{
  "type": "component",
  "meta": {
    "docsUrl": "https://quasarframework.github.io/quasar-ui-qiconpicker/docs"
  },
  "props": {
    "value": {
      "type": "String",
      "desc": "`v-model`; The selected icon",
      "default": "''",
      "category": "model",
      "examples": [
        "v-model=\"calendar_today\"",
        "v-model=\"bolt\""
      ]
    },
    "icon-set": {
      "type": "String",
      "desc": "The name of a [Quasar Icon Set](https://quasar.dev/options/quasar-icon-sets)",
      "category": "model",
      "values": [
        "material-icons",
        "material-icons-outlined",
        "material-icons-round",
        "material-icons-sharp",
        "ionicons-v4",
        "mdi-v4",
        "mdi-v5",
        "mdi-v6",
        "fontawesome-v5",
        "line-awesome",
        "eva-icons",
        "themify",
        "bootstrap-icons"
      ],
      "examples": [
        "icon-set=\"material-icons\"",
        "icon-set=\"fontawesome-v5\""
      ]
    },
    "icons": {
      "type": "Array",
      "tsType": "IconNameArray",
      "desc": "An array of objects containing icon information. The object must contain the key `name` with the value being the icon name (ie: `{ name: 'bolt' }`). _**Note:** the icons used must already be loaded by Quasar._",
      "category": "model",
      "examples": [
        ":icons=\"[{ name: 'calendar-today' }, { name: 'bolt' }]\""
      ],
      "definition": {
        "name": {
          "type": "String",
          "desc": "The icon name"
        }
      }
    },
    "filter": {
      "type": "String",
      "desc": "Icons will be filtered by the passed string",
      "category": "behavior",
      "examples": [
        ":filter=\"myFilter\""
      ]
    },
    "tags": {
      "type": "Array",
      "tsType": "StringArray",
      "addedIn": "v1.0.7",
      "desc": "An array of tags to be used to do filtering by category",
      "category": "behavior",
      "examples": [
        ":tags=\"['accessibility']\"",
        ":tags=\"['media']\""
      ]
    },
    "dense": {
      "type": "Boolean",
      "desc": "Use less of a foot print for the component",
      "category": "style"
    },
    "tooltips": {
      "type": "Boolean",
      "desc": "Turns tooltips on for each displayed icon (shows the icon name)",
      "category": "behavior"
    },
    "no-footer": {
      "type": "Boolean",
      "desc": "hides the footer area when `pagination` is enabled",
      "category": "style"
    },
    "color": {
      "type": "String",
      "desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette)",
      "category": "style",
      "examples": [
        "color=\"orange-8\"",
        "color=\"yellow-6\""
      ]
    },
    "text-color": {
      "type": "String",
      "desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette)",
      "category": "style",
      "examples": [
        "text-color=\"orange-8\"",
        "text-color=\"red-6\""
      ]
    },
    "selected-color": {
      "type": "String",
      "desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette)",
      "default": "primary",
      "category": "style",
      "examples": [
        "selected-color=\"orange-8\"",
        "selected-color=\"#c8c8c8\""
      ]
    },
    "selected-text-color": {
      "type": "String",
      "desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette)",
      "default": "grey-1",
      "category": "style",
      "examples": [
        "selected-text-color=\"orange-8\"",
        "selected-text-color=\"#c8c8c8\""
      ]
    },
    "size": {
      "type": "String",
      "desc": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)",
      "category": "style",
      "examples": [
        "size=\"3rem\"",
        "size=\"24px\"",
        "size=\"lg\""
      ]
    },
    "model-pagination": {
      "type": "Object",
      "tsType": "Pagination",
      "desc": "For pagination purposes uses Quasar's pagination component. Use `v-model:model-pagination` to synchronize the data. You can use `page` and `itemsPerPage` to control the pagination. QIconPicker will set `totalPages` depending on `icon-set` or `icons` properties. If using a `filter` the page will automatically be reset to 1",
      "category": "model",
      "examples": [
        "v-model:model-pagination=\"myPagination\""
      ]
    },
    "pagination-props": {
      "type": "Object",
      "tsType": "PaginationProps",
      "desc": "The properties to pass to the QPagination component",
      "category": "behavior"
    },
    "animated": {
      "type": "Boolean",
      "category": "behavior",
      "desc": "Turns on animation"
    },
    "transition-prev": {
      "type": "String",
      "category": "behavior",
      "desc": "When animated property is true, transition to use for previous paginated view",
      "default": "slide-right",
      "examples": [
        "transition-prev=\"flip-right\""
      ]
    },
    "transition-next": {
      "type": "String",
      "category": "behavior",
      "desc": "When animated property is true, transition to use for next paginated view",
      "default": "slide-left",
      "examples": [
        "transition-next=\"flip-left\""
      ]
    }
  },
  "slots": {
    "icon": {
      "desc": "Slot for changing the display of the icon",
      "scope": {
        "name": {
          "type": "String",
          "desc": "The name of the slotted icon",
          "examples": [
            "bolt",
            "calendar",
            "<template #icon=\"name\"><q-btn :name=\"name\" :label=\"name\" no-caps /></template>"
          ]
        }
      }
    },
    "footer": {
      "desc": "Anything can go into this slot"
    },
    "pagination": {
      "desc": "Use if you want to provide your own pagination UI. You can control this with the data from the property `model-pagination`"
    }
  },
  "events": {
    "input": {
      "type": "String",
      "desc": "`v-model`; Value from when the selection changes"
    },
    "tags": {
      "type": "Array",
      "desc": "An array of categories (tags) for the selected icon set"
    }
  },
  "methods": {
    "prevPage": {
      "desc": "If paginated, will go to previous page if not on 1st page"
    },
    "nextPage": {
      "desc": "If paginated, will go to next page, if not on last page"
    },
    "lastPage": {
      "desc": "If paginated, will go to the last page"
    },
    "isLastPage": {
      "desc": "True if on last page otherwise false"
    },
    "firstPage": {
      "desc": "If paginated, will go to the first page"
    },
    "isFirstPage": {
      "desc": "True if on first page otherwise false"
    }
  }
}