chore(ui): add json api

Author: hawkeye64

ui/src/component/QIconPicker.json

@@ -0,0 +1,128 @@
+{
+  "type": "component",
+  "props": {
+    "value": {
+      "type": "String",
+      "desc": "`v-model`; The selected icon",
+      "default": "",
+      "examples": [
+        "v-model=\"calendar-today\"",
+        "v-model=\"bolt\""
+      ]
+    },
+    "icon-set": {
+      "type": "String",
+      "desc": "The name of a Quasar icon set",
+      "values": [
+        "material-icons",
+        "material-icons-outlined",
+        "material-icons-round",
+        "material-icons-sharp",
+        "ionicons-v4",
+        "mdi-v4",
+        "fontawesome-v5",
+        "eva-icons",
+        "themify"
+      ],
+      "examples": [
+        "icon-set=\"material-icons\"",
+        "icon-set=\"fontawesome-v5\""
+      ]
+    },
+    "icons": {
+      "type": "Array",
+      "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._",
+      "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",
+      "examples": [
+        ":filter=\"myFilter\""
+      ]
+    },
+    "dense": {
+      "type": "Boolean",
+      "desc": "Use less of a foot print for the component"
+    },
+    "tooltips": {
+      "type": "Boolean",
+      "desc": "Turns tooltips on for each displayed icon (shows the icon name)"
+    },
+    "no-footer": {
+      "type": "Boolean",
+      "desc": "hides the footer area when `pagination` is enabled"
+    },
+    "color": {
+      "type": "String",
+      "desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or a CSS color (#, rgb, rgba, hls, etc)",
+      "examples": [
+        "color=\"orange-8\"",
+        "color=\"#c8c8c8\""
+      ]
+    },
+    "background-color": {
+      "type": "String",
+      "desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or a CSS color (#, rgb, rgba, hls, etc)",
+      "examples": [
+        "background-color=\"orange-8\"",
+        "background-color=\"#c8c8c8\""
+      ]
+    },
+    "selected-color": {
+      "type": "String",
+      "desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or a CSS color (#, rgb, rgba, hls, etc)",
+      "examples": [
+        "selected-color=\"orange-8\"",
+        "selected-color=\"#c8c8c8\""
+      ]
+    },
+    "selected-background-color": {
+      "type": "String",
+      "desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or a CSS color (#, rgb, rgba, hls, etc)",
+      "examples": [
+        "selected-background-color=\"orange-8\"",
+        "selected-background-color=\"#c8c8c8\""
+      ]
+    },
+    "font-size": {
+      "type": "String",
+      "desc": "The font-size to use for the icons. Any acceptable CSS size can be used",
+      "examples": [
+        "font-size=\"3rem\"",
+        "font-size=\"24px\""
+      ]
+    },
+    "pagination": {
+      "type": "Object",
+      "sync": true,
+      "desc": "For pagination purposes uses Quasar's pagination component. Use `pagination.sync` 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",
+      "examples": [
+        ":pagination.sync=\"myPagination\""
+      ]
+    }
+  },
+  "events": {
+    "input": {
+      "type": "String",
+      "desc": "`v-model`; Value from when the selection changes"
+    }
+  },
+  "scopedSlots": {
+    "icon": {
+      "type": "String",
+      "desc": "Slot for changing the display of the icon",
+      "examples":[
+        "<template #icon=\"name\"><q-btn :name=\"name\" :label=\"name\" no-caps /></template>"
+      ]
+    }
+  }
+}