chore(docs): add QIconPicker JSON API

Author: hawkeye64

src/component/QIconPicker.json

@@ -3,11 +3,11 @@
   "props": {
     "value": {
       "type": "String",
-      "desc": "Vue v-model value",
+      "desc": "`v-model`; The selected icon",
       "default": "",
       "examples": [
-        "calendar-today",
-        "bolt"
+        "v-model=\"calendar-today\"",
+        "v-model=\"bolt\""
       ]
     },
     "icon-set": {
@@ -23,25 +23,31 @@
         "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.",
+      "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",
-          "examples": [
-            "calendar-today",
-            "bolt"
-          ]
+          "desc": "The icon name"
         }
       }
     },
     "filter": {
       "type": "String",
-      "desc": "Icons will be filtered by the passed string"
+      "desc": "Icons will be filtered by the passed string",
+      "examples": [
+        ":filter=\"myFilter\""
+      ]
     },
     "dense": {
       "type": "Boolean",
@@ -53,66 +59,70 @@
     },
     "no-footer": {
       "type": "Boolean",
-      "desc": "hides the footer area that contains the pagination"
+      "desc": "hides the footer area when `pagination` is enabled"
     },
     "color": {
       "type": "String",
-      "desc": "This can be any CSS color value or Quasar color",
+      "desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or a CSS color (#, rgb, rgba, hls, etc)",
       "examples": [
-        "orange-8",
-        "#c8c8c8"
+        "color=\"orange-8\"",
+        "color=\"#c8c8c8\""
       ]
     },
     "background-color": {
       "type": "String",
-      "desc": "This can be any CSS color value or Quasar color",
+      "desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or a CSS color (#, rgb, rgba, hls, etc)",
       "examples": [
-        "orange-8",
-        "#c8c8c8"
+        "background-color=\"orange-8\"",
+        "background-color=\"#c8c8c8\""
       ]
     },
     "selected-color": {
       "type": "String",
-      "desc": "This can be any CSS color value or Quasar color",
+      "desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or a CSS color (#, rgb, rgba, hls, etc)",
       "examples": [
-        "orange-8",
-        "#c8c8c8"
+        "selected-color=\"orange-8\"",
+        "selected-color=\"#c8c8c8\""
       ]
     },
     "selected-background-color": {
       "type": "String",
-      "desc": "This can be any CSS color value or Quasar color",
+      "desc": "Any color from the [Quasar Color Pallete](https://quasar.dev/style/color-palette) or a CSS color (#, rgb, rgba, hls, etc)",
       "examples": [
-        "orange-8",
-        "#c8c8c8"
+        "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": [
-        "3rem",
-        "24px"
+        "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=\"pagination\""
+        ":pagination.sync=\"myPagination\""
       ]
     }
   },
   "events": {
     "input": {
       "type": "String",
-      "desc": "Value from when the selection changes"
+      "desc": "`v-model`; Value from when the selection changes"
     }
   },
   "scopedSlots": {
     "icon": {
       "type": "String",
-      "desc": "Slot for re-displaying icon"
+      "desc": "Slot for changing the display of the icon",
+      "examples":[
+        "<template #icon=\"name\"><q-btn :name=\"name\" :label=\"name\" no-caps /></template>"
+      ]
     }
   }
 }