feat(ui): allow tag filtering (#30)

Author: hawkeye64

demo/src/markdown/iconpicker.md

@@ -64,7 +64,7 @@ export default {
 
 If you are using a large icon set and find it is taking too long to load, you can pre-cache the UMD variant.
 
-You can do this by adding to your **App.vue** (or, any other appropriate) file:
+You can do this by adding to your **App.vue** (or, any other appropriate) file, one or more of the UMD icon-set variants:
 
 :::
 ```html
@@ -195,3 +195,87 @@ Most icon sets are very large which may cause performance issues.
 ::: tip
 In order to work properly, QIconPicker needs a specified height in it's style (or parent style).
 :::
+
+# Categories (tags)
+Added in **v1.0.7**, you can now get categories (tags) for the associated loaded icon set.
+
+As of this writing, the **Eva** and **Material Design** icon sets are done. The **Fontawesome v5** icon set is partially done. If you need an icon set that **needs** to be completed and is not, PRs are welcomed or DM me on the Discord channel.
+
+You can get the tags viw the `tag` event.
+
+```html
+  <q-icon-picker
+    v-model="name"
+    :filter="filter"
+    :icon-set="iconSet"
+    :tags="tags"
+    font-size="3em"
+    tooltips
+    :pagination.sync="pagination"
+    @tags="onTags"
+    style="height: calc(100vh - 140px)"
+  />
+```
+
+Notice the `@tags="onTags"`. Capturing this is a bit tricky. You need to set a guard to stop potential end-less loop in your Vue code (depending on how you use it). In your `data ()` function set a guard variable; in this case `loaded`:
+
+```js
+  data () {
+    return {
+      loaded: false,  // guard var
+      tags: [],       // user selected tags to pass to QIconPicker
+      categories: [], // keep track of categories
+      selected: {}    // keep track of user selected categories
+    }
+```
+
+in your `methods` section, add the event handler, and put the guard in to stop potential recursion:
+
+```js
+  methods: {
+    onTags (tags) {
+      if (this.loaded !== true) {
+        let cats = []
+        let t = [ ...tags ]
+        cats.splice(0, 0, ...t)
+        this.categories.splice(0, this.categories.length, ...cats)
+        this.categories.concat(...cats)
+        this.categories.forEach(cat => {
+          this.$set(this.selected, cat, false)
+        })
+        this.loaded = true
+      }
+    }
+  }
+```
+
+This is all good and well, until you need to select a different icon-set. We can create the proper handlers in the `watch` section:
+
+```js
+  watch: {
+    iconSet (val) {
+      this.loaded = false
+      this.tags.splice(0, this.tags.length)
+    },
+    filter (val) {
+      this.loaded = false
+    },
+    selected: {
+      handler (val) {
+        let tags = []
+        this.categories.forEach(cat => {
+          // if user has selected this tag...
+          if (val[cat] === true) {
+            // ...then keep track of it
+            tags.push(cat)
+          }
+        })
+        // push all user selected tags to QIconPicker
+        this.tags.splice(0, this.tags.length, ...tags)
+      },
+      deep: true
+    }
+  },
+```
+
+Notice in the above code, the ares where the guard is reset with `this.loaded = false`.

demo/src/pages/Icons.vue

@@ -38,15 +38,14 @@
           <div class="column col-grow">
             <q-resize-observer @resize="onResize" />
             <q-icon-picker
-              ref="icons"
               v-model="name"
               :filter="filter"
               :icon-set="iconSet"
               :tags="tags"
               font-size="3em"
               tooltips
               :pagination.sync="pagination"
-              @loaded="onLoaded"
+              @tags="onTags"
               style="height: calc(100vh - 140px)"
             />
           </div>
@@ -104,6 +103,7 @@ export default {
   watch: {
     iconSet (val) {
       this.loaded = false
+      this.tags.splice(0, this.tags.length)
     },
     filter (val) {
       this.loaded = false
@@ -117,26 +117,23 @@ export default {
           }
         })
         this.tags.splice(0, this.tags.length, ...tags)
-        console.log(this.tags)
       },
       deep: true
     }
   },
 
   methods: {
-    onLoaded () {
+    onTags (tags) {
       if (this.loaded !== true) {
         let cats = []
-        if (this.$refs.icons) {
-          let tags = [ ...this.$refs.icons.getTags() ]
-          cats.splice(0, 0, ...tags)
-          this.loaded = true
-        }
+        let t = [ ...tags ]
+        cats.splice(0, 0, ...t)
         this.categories.splice(0, this.categories.length, ...cats)
         this.categories.concat(...cats)
         this.categories.forEach(cat => {
           this.$set(this.selected, cat, false)
         })
+        this.loaded = true
       }
     },
 

ui/build/icons/build.eva.js

@@ -47,7 +47,7 @@ fileContents
             const tags = oldIcons[line].tags.split(',').map(tag => {
               if (tag === '') return tag
               return "'" + tag + "'"
-            }).join(',')
+            }).join(', ')
             icons.push(`{ name: '${line}', tags: [${tags}] }`)
           } else {
             icons.push(`{ name: '${line}', tags: [] }`)

ui/build/icons/build.ion.js

@@ -44,7 +44,7 @@ fileContents
             const tags = oldIcons[line].tags.split(',').map(tag => {
               if (tag === '') return tag
               return "'" + tag + "'"
-            }).join(',')
+            }).join(', ')
             icons.push(`{ name: '${line}', tags: [${tags}] }`)
           } else {
             icons.push(`{ name: '${line}', tags: [] }`)

ui/build/icons/build.mdi.js

@@ -61,7 +61,7 @@ fileContents
             const tags = oldIcons[line].tags.split(',').map(tag => {
               if (tag === '') return tag
               return "'" + tag + "'"
-            }).join(',')
+            }).join(', ')
             icons.push(`{ name: '${line}', tags: [${tags}] }`)
           } else {
             icons.push(`{ name: '${line}', tags: [] }`)

ui/src/components/QIconPicker.js

@@ -23,7 +23,8 @@ export default {
         page: 1,
         itemsPerPage: 0,
         totalPages: 0
-      }
+      },
+      categories: []
     }
   },
 
@@ -163,7 +164,6 @@ export default {
     },
 
     tags (val) {
-      console.log('tags changed:', val)
       // whenever the tags change, it resets pagination page to page 1
       this.__setPagination({ page: 1, totalPages: this.pagesNumber })
       this.__updatePagination()
@@ -181,14 +181,17 @@ export default {
             const iconsSet = window.QIconPicker.iconSet[name]
             this.iconsList = iconsSet.icons
           } else {
+            // eslint-disable-next-line no-console
             console.error(`QIconPicker: no icon set loaded called '${set}'`)
+            // eslint-disable-next-line no-console
             console.error('Be sure to load the UMD version of the icon set in a script tag before using with UMD')
           }
         } else {
           try {
             const iconsSet = require(`@quasar/quasar-ui-qiconpicker/src/components/icon-set/${set}.js`).default
             this.iconsList = iconsSet.icons
           } catch (e) {
+            // eslint-disable-next-line no-console
             console.error(`QIconPicker: cannot find icon set found called '${set}'`)
           }
         }
@@ -252,9 +255,9 @@ export default {
       }
     },
 
-    getTags (name) {
+    __getCategories () {
       let t = []
-      this.displayedIcons.forEach(icon => {
+      this.iconsList.forEach(icon => {
         const tags = icon.tags
         tags.forEach(tag => {
           if (t.includes(tag) !== true) {
@@ -263,7 +266,8 @@ export default {
         })
       })
       t.sort()
-      return t
+      this.categories = t
+      return true
     },
 
     __renderBody (h) {
@@ -370,13 +374,19 @@ export default {
   },
 
   render (h) {
-    return h('div', this.setBothColors(this.color, this.backgroundColor, {
+    const picker = h('div', this.setBothColors(this.color, this.backgroundColor, {
       ref: 'icon-picker',
       staticClass: 'q-icon-picker flex'
     }), [
       this.__renderBody(h),
-      this.noFooter !== true && this.pagination !== void 0 && this.__renderFooter(h),
-      this.$emit('loaded') && void 0
+      this.noFooter !== true && this.pagination !== void 0 && this.__renderFooter(h)
     ])
+
+    this.$nextTick(() => {
+      this.__getCategories()
+      this.$emit('tags', this.categories)
+    })
+
+    return picker
   }
 }

ui/src/components/QIconPicker.json

@@ -137,6 +137,10 @@
     "input": {
       "type": "String",
       "desc": "`v-model`; Value from when the selection changes"
+    },
+    "tags": {
+      "type": "Array",
+      "desc": "An array for categories (tags) for the selected icon set"
     }
   },
   "scopedSlots": {
@@ -161,25 +165,6 @@
     },
     "nextPage": {
       "desc": "If paginated, will go to next page, if not on last page"
-    },
-    "getTags": {
-      "desc": "Returns an array of tags associated with the passed in icon name",
-      "params": {
-        "name": {
-          "type": "Array",
-          "desc": "The categories associated with the current icon set",
-          "examples": [
-            "[ 'file', 'food', 'nature', 'people' ]"
-          ]
-        }
-      },
-      "returns": {
-        "type": "Array",
-        "desc": "An array of tags",
-        "examples": [
-          "['accessibility', 'media']"
-        ]
-      }
     }
   }
 }