@quasar/quasar-ui-qiconpicker 2.0.3 → 2.0.6

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 /*!
- * @quasar/quasar-ui-qiconpicker v2.0.3
- * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
+ * @quasar/quasar-ui-qiconpicker v2.0.5
+ * (c) 2022 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */
 
@@ -10,11 +10,11 @@ import { QScrollArea, QResizeObserver, QPagination, QBtn, QTooltip } from 'quasa
 /**
  * QIconPicker Properties
  */
-var useIconPickerProps = {
+const useIconPickerProps = {
   modelValue: String,
   iconSet: {
     type: String,
-    validator: function (v) { return [
+    validator: v => [
       'material-icons',
       'material-icons-outlined',
       'material-icons-round',
@@ -29,7 +29,7 @@ var useIconPickerProps = {
       'line-awesome',
       'bootstrap-icons',
       ''
-    ].includes(v); },
+    ].includes(v),
     default: ''
   },
   icons: Array,
@@ -54,10 +54,10 @@ var useIconPickerProps = {
   },
   paginationProps: {
     type: Object,
-    default: function () { return ({
+    default: () => ({
       maxPages: 5,
       input: true
-    }); }
+    })
   },
   modelPagination: Object,
   animated: Boolean,
@@ -71,7 +71,7 @@ var useIconPickerProps = {
   }
 };
 
-var direction = {
+const direction = {
   NEXT: 'next',
   PREV: 'prev'
 };
@@ -94,7 +94,7 @@ function useIconPickerPagination(data, props, emit, computedFilteredIcons) {
   // returns true if the pagination is the same,
   // otherwise returns false if it has changed
   function samePagination(oldPag, newPag) {
-    for (var prop in newPag) {
+    for (const prop in newPag) {
       if (newPag[ prop ] !== oldPag[ prop ]) {
         return false
       }
@@ -102,19 +102,23 @@ function useIconPickerPagination(data, props, emit, computedFilteredIcons) {
     return true
   }
 
-  var computedPagination = computed(function () {
-    return fixPagination(Object.assign({}, data.innerPagination,
-      props.modelPagination))
+  const computedPagination = computed(() => {
+    return fixPagination({
+      ...data.innerPagination,
+      ...props.modelPagination
+    })
   });
 
-  var computedPagesNumber = computed(function () {
+  const computedPagesNumber = computed(() => {
     return computedPagination.value.itemsPerPage === 0 ? 1
       : Math.max(1, Math.ceil(computedFilteredIcons.value.length / computedPagination.value.itemsPerPage))
   });
 
   function setPagination(val) {
-    var newPagination = fixPagination(Object.assign({}, computedPagination.value,
-      val));
+    const newPagination = fixPagination({
+      ...computedPagination.value,
+      ...val
+    });
 
     if (!samePagination(data.innerPagination, newPagination)) {
       if (props.modelPagination) {
@@ -131,11 +135,11 @@ function useIconPickerPagination(data, props, emit, computedFilteredIcons) {
   }
 
   return {
-    samePagination: samePagination,
-    computedPagination: computedPagination,
-    setPagination: setPagination,
-    updatePagination: updatePagination,
-    computedPagesNumber: computedPagesNumber
+    samePagination,
+    computedPagination,
+    setPagination,
+    updatePagination,
+    computedPagesNumber
   }
 }
 
@@ -149,29 +153,29 @@ function useIconPickerIcons(data, props, computedFirstItemIndex, computedLastIte
     if (iconSet) {
       // detect if UMD version is installed
       if (window.QIconPicker) {
-        var name = iconSet.replace(/-([a-z])/g, function (g) { return g[ 1 ].toUpperCase(); });
+        const name = iconSet.replace(/-([a-z])/g, g => g[ 1 ].toUpperCase());
         if (window.QIconPicker.iconSet && window.QIconPicker.iconSet[ name ]) {
           data.iconsList = window.QIconPicker.iconSet[ name ].icons;
         }
         else {
-          console.error(("QIconPicker: no icon set loaded called " + iconSet));
+          console.error(`QIconPicker: no icon set loaded called ${ iconSet }`);
           console.error('Be sure to load the UMD version of the icon set in a script tag before using QIconPicker UMD version');
         }
       }
       else {
         try {
-          data.iconsList = require(("@quasar/quasar-ui-qiconpicker/src/components/icon-set/" + iconSet + ".js")).default.icons;
+          data.iconsList = require(`@quasar/quasar-ui-qiconpicker/src/components/icon-set/${ iconSet }.js`).default.icons;
         }
         catch (e) {
-          console.error(("QIconPicker: cannot find icon set found called " + iconSet));
+          console.error(`QIconPicker: cannot find icon set found called ${ iconSet }`);
         }
       }
     }
-    console.info(("Loaded " + (data.iconsList.length) + " icons."));
+    console.info(`Loaded ${ data.iconsList.length } icons.`);
   }
 
-  var computedDisplayedIcons = computed(function () {
-    var icons = [];
+  const computedDisplayedIcons = computed(() => {
+    let icons = [];
     if (data.iconsList) {
       icons = computedFilteredIcons.value;
 
@@ -183,27 +187,27 @@ function useIconPickerIcons(data, props, computedFirstItemIndex, computedLastIte
     return icons
   });
 
-  var computedFilteredIcons = computed(function () {
-    var icons = data.iconsList;
+  const computedFilteredIcons = computed(() => {
+    let icons = data.iconsList;
     if (icons) {
       if (props.tags !== void 0 && props.tags !== '' && props.tags !== null && props.tags.length > 0) {
-        icons = icons.filter(function (icon) {
-          return icon.tags.filter(function (tag) { return props.tags.includes(tag); }).length > 0
+        icons = icons.filter(icon => {
+          return icon.tags.filter(tag => props.tags.includes(tag)).length > 0
         });
       }
       if (props.filter !== void 0 && props.filter !== '' && props.filter !== null) {
-        icons = icons.filter(function (icon) { return icon.name.includes(props.filter); });
+        icons = icons.filter(icon => icon.name.includes(props.filter));
       }
     }
     return icons
   });
 
   function categories() {
-    var t = [];
-    data.iconsList.forEach(function (icon) {
-      var tags = icon.tags;
+    const t = [];
+    data.iconsList.forEach(icon => {
+      const tags = icon.tags;
       if (tags && tags.length > 0) {
-        tags.forEach(function (tag) {
+        tags.forEach(tag => {
           if (t.includes(tag) !== true) {
             t.push(tag);
           }
@@ -216,10 +220,10 @@ function useIconPickerIcons(data, props, computedFirstItemIndex, computedLastIte
   }
 
   return {
-    loadIconSet: loadIconSet,
-    computedDisplayedIcons: computedDisplayedIcons,
-    computedFilteredIcons: computedFilteredIcons,
-    categories: categories
+    loadIconSet,
+    computedDisplayedIcons,
+    computedFilteredIcons,
+    categories
   }
 }
 
@@ -228,9 +232,8 @@ function useIconPickerIcons(data, props, computedFirstItemIndex, computedLastIte
  */
 function exposeIconPickerApi(data, expose, computedPagination, setPagination, computedFirstItemIndex, computedLastItemIndex, computedFilteredIcons, computedPagesNumber) {
   // goes to previous page
-  var prevPage = function () {
-    var ref = computedPagination.value;
-    var page = ref.page;
+  const prevPage = () => {
+    const { page } = computedPagination.value;
     if (page > 1) {
       setPagination({ page: page - 1 });
       data.direction = direction.PREV;
@@ -238,10 +241,8 @@ function exposeIconPickerApi(data, expose, computedPagination, setPagination, co
   };
 
   // goes to next page
-  var nextPage = function () {
-    var ref = computedPagination.value;
-    var page = ref.page;
-    var itemsPerPage = ref.itemsPerPage;
+  const nextPage = () => {
+    const { page, itemsPerPage } = computedPagination.value;
     if (computedLastItemIndex.value > 0 && page * itemsPerPage < computedFilteredIcons.value.length) {
       setPagination({ page: page + 1 });
       data.direction = direction.NEXT;
@@ -249,17 +250,17 @@ function exposeIconPickerApi(data, expose, computedPagination, setPagination, co
   };
 
   // goes to last page
-  var lastPage = function () {
+  const lastPage = () => {
     setPagination({ page: computedPagesNumber.value });
   };
 
   // goes to first page
-  var firstPage = function () {
+  const firstPage = () => {
     setPagination({ page: 0 });
   };
 
   // checks if we are on the last page
-  var isLastPage = computed(function () {
+  const isLastPage = computed(() => {
     return computedLastItemIndex.value === 0
       ? true
       : computedPagination.value.page >= computedPagesNumber.value
@@ -267,17 +268,17 @@ function exposeIconPickerApi(data, expose, computedPagination, setPagination, co
 
 
   // checks if we are on the first page
-  var isFirstPage = computed(function () {
+  const isFirstPage = computed(() => {
     return computedPagination.value.page === 1
   });
 
   expose({
-    prevPage: prevPage,
-    nextPage: nextPage,
-    lastPage: lastPage,
-    firstPage: firstPage,
-    isLastPage: isLastPage,
-    isFirstPage: isFirstPage
+    prevPage,
+    nextPage,
+    lastPage,
+    firstPage,
+    isLastPage,
+    isFirstPage
   });
 }
 
@@ -285,7 +286,9 @@ function exposeIconPickerApi(data, expose, computedPagination, setPagination, co
 var QIconPicker = defineComponent({
   name: 'QIconPicker',
 
-  props: Object.assign({}, useIconPickerProps),
+  props: {
+    ...useIconPickerProps
+  },
 
   emits: [
     'update:model-value',
@@ -293,13 +296,9 @@ var QIconPicker = defineComponent({
     'update:model-pagination'
   ],
 
-  setup: function setup(props, ref$1) {
-    var slots = ref$1.slots;
-    var emit = ref$1.emit;
-    var expose = ref$1.expose;
-
-    var scrollAreaRef = ref(null);
-    var data = reactive({
+  setup(props, { slots, emit, expose }) {
+    const scrollAreaRef = ref(null);
+    const data = reactive({
       iconsList: [],
       innerPagination: {
         page: 1,
@@ -313,37 +312,35 @@ var QIconPicker = defineComponent({
     });
 
     // index of first item on a page
-    var computedFirstItemIndex = computed(function () {
-      var ref = computedPagination.value;
-      var page = ref.page;
-      var itemsPerPage = ref.itemsPerPage;
+    const computedFirstItemIndex = computed(() => {
+      const { page, itemsPerPage } = computedPagination.value;
       return (page - 1) * itemsPerPage
     });
 
     // index of last item on a page
-    var computedLastItemIndex = computed(function () {
-      var ref = computedPagination.value;
-      var page = ref.page;
-      var itemsPerPage = ref.itemsPerPage;
+    const computedLastItemIndex = computed(() => {
+      const { page, itemsPerPage } = computedPagination.value;
       return page * itemsPerPage
     });
 
-    var ref$2 = useIconPickerIcons(data, props, computedFirstItemIndex, computedLastItemIndex);
-    var loadIconSet = ref$2.loadIconSet;
-    var computedDisplayedIcons = ref$2.computedDisplayedIcons;
-    var computedFilteredIcons = ref$2.computedFilteredIcons;
-    var categories = ref$2.categories;
-
-    var ref$3 = useIconPickerPagination(data, props, emit, computedFilteredIcons);
-    var samePagination = ref$3.samePagination;
-    var computedPagination = ref$3.computedPagination;
-    var setPagination = ref$3.setPagination;
-    var updatePagination = ref$3.updatePagination;
-    var computedPagesNumber = ref$3.computedPagesNumber;
+    const {
+      loadIconSet,
+      computedDisplayedIcons,
+      computedFilteredIcons,
+      categories
+    } = useIconPickerIcons(data, props, computedFirstItemIndex, computedLastItemIndex);
+
+    const {
+      samePagination,
+      computedPagination,
+      setPagination,
+      updatePagination,
+      computedPagesNumber
+    } = useIconPickerPagination(data, props, emit, computedFilteredIcons);
 
     exposeIconPickerApi(data, expose, computedPagination, setPagination, computedFirstItemIndex, computedLastItemIndex, computedFilteredIcons, computedPagesNumber);
 
-    onMounted(function () {
+    onMounted(() => {
       if (props.iconSet) {
         loadIconSet(props.iconSet);
       }
@@ -354,14 +351,14 @@ var QIconPicker = defineComponent({
     });
 
 
-    watch(function () { return props.iconSet; }, function (val) {
+    watch(() => props.iconSet, (val) => {
       if (val) {
         loadIconSet(val);
         updatePagination();
-        nextTick(function () {
+        nextTick(() => {
           // whenever the icon set changes, it resets pagination page to page 1
           setPagination({ page: 1 });
-        }).catch(function (e) { return console.error(e); });
+        }).catch(e => console.error(e));
         // scroll to top of QScrollArea, if applicable
         if(scrollAreaRef.value) {
           scrollAreaRef.value.setScrollPosition(0);
@@ -369,35 +366,35 @@ var QIconPicker = defineComponent({
       }
     });
 
-    watch(function () { return props.icons; }, function (val) {
+    watch(() => props.icons, (val) => {
       if (props.icons !== void 0 && props.icons.length > 0) {
         data.iconsList = props.icons;
       }
       updatePagination();
-      nextTick(function () {
+      nextTick(() => {
         // whenever the icon set changes, it resets pagination page to page 1
         setPagination({ page: 1 });
-      }).catch(function (e) { return console.error(e); });
+      }).catch(e => console.error(e));
       // scroll to top of QScrollArea, if applicable
       if(scrollAreaRef.value) {
         scrollAreaRef.value.setScrollPosition(0);
       }
     });
 
-    watch(function () { return props.filter; }, function () {
+    watch(() => props.filter, () => {
       // whenever the filter changes, it resets pagination page to page 1
       setPagination({ page: 1, totalPages: computedPagesNumber.value });
       updatePagination();
     });
 
-    watch(function () { return props.tags; }, function (val) {
+    watch(() => props.tags, (val) => {
       // whenever the tags change, it resets pagination page to page 1
       setPagination({ page: 1, totalPages: computedPagesNumber.value });
       updatePagination();
     });
 
     if (props.modelPagination) {
-      watch(function () { return props.modelPagination; }, function (newVal, oldVal) {
+      watch(() => props.modelPagination, (newVal, oldVal) => {
         if (!samePagination(oldVal, newVal)) {
           updatePagination();
         }
@@ -405,29 +402,28 @@ var QIconPicker = defineComponent({
     }
 
     if (props.modelPagination) {
-      watch(function () { return props.modelPagination.itemsPerPage; }, function () {
+      watch(() => props.modelPagination.itemsPerPage, () => {
         updatePagination();
       });
 
-      watch(function () { return props.modelPagination.page; }, function () {
+      watch(() =>props.modelPagination.page, () => {
         updatePagination();
       });
     }
 
-    return function () {
+    return () => {
 
       function renderPagination() {
-        if (props.modelPagination && props.modelPagination.itemsPerPage === 0) { return '' }
-        var slot = (slots.pagination && slots.pagination());
-        var ref = computedPagination.value;
-        var page = ref.page;
-        var totalPages = ref.totalPages;
-
-        return slot || h(QPagination, Object.assign({}, {class: 'q-icon-picker__pagination'},
-          props.paginationProps,
-          {modelValue: page,
+        if (props.modelPagination && props.modelPagination.itemsPerPage === 0) return ''
+        const slot = (slots.pagination && slots.pagination());
+        const { page, totalPages } = computedPagination.value;
+
+        return slot || h(QPagination, {
+          class: 'q-icon-picker__pagination',
+          ...props.paginationProps,
+          modelValue: page,
           max: totalPages,
-          'onUpdate:modelValue': function (value) {
+          'onUpdate:modelValue': value => {
             if (props.animated) {
               if (value > page) {
                 data.direction = direction.NEXT;
@@ -437,12 +433,13 @@ var QIconPicker = defineComponent({
               }
             }
             setPagination({ page: value });
-          }}))
+          }
+        })
       }
 
       function renderFooter() {
         if (props.noFooter !== true && props.modelPagination !== void 0) {
-          var slot = (slots.footer && slots.footer());
+          const slot = (slots.footer && slots.footer());
 
           return h('div', {
             class: 'q-icon-picker__footer flex flex-center'
@@ -454,20 +451,20 @@ var QIconPicker = defineComponent({
 
       function renderTooltip(name) {
         if (props.tooltips === true) {
-          return function () { return h(QTooltip, {}, function () { return name; }); }
+          return () => h(QTooltip, {}, () => name)
         }
       }
 
       function renderIcon(icon) {
-        var name = (icon.prefix !== void 0 ? icon.prefix + ' ' + icon.name : icon.name);
+        const name = (icon.prefix !== void 0 ? icon.prefix + ' ' + icon.name : icon.name);
 
         if (slots.icon && slots.icon()) {
           return slots.icon(name)
         }
-        var isSelected = name === props.modelValue;
-        var textColor = isSelected ? props.selectedTextColor : undefined;
-        var color = isSelected ? props.selectedColor : undefined;
-        var size = props.size ? props.size : undefined;
+        const isSelected = name === props.modelValue;
+        const textColor = isSelected ? props.selectedTextColor : undefined;
+        const color = isSelected ? props.selectedColor : undefined;
+        const size = props.size ? props.size : undefined;
 
         return h(QBtn, {
           id: name,
@@ -478,26 +475,26 @@ var QIconPicker = defineComponent({
           textColor: textColor,
           color: color,
           icon: name,
-          onClick: function () { return emit('update:model-value', name); },
+          onClick: () => emit('update:model-value', name),
         }, renderTooltip(name))
       }
 
       function renderIcons() {
-        return computedDisplayedIcons.value.map(function (icon) { return renderIcon(icon); })
+        return computedDisplayedIcons.value.map(icon => renderIcon(icon))
       }
 
       function renderContainer() {
-        var container = function () { return h('div', {
+        const container = () => h('div', {
           key: computedPagination.value.page,
           class: 'q-icon-picker__container col'
-        },  [].concat( renderIcons() )); };
+        },  [...renderIcons()]);
 
         if (props.animated === true) {
-          var transition = 'q-transition--' + (data.direction === 'prev' ? props.transitionPrev : props.transitionNext);
-          return function () { return h(Transition, {
+          const transition = 'q-transition--' + (data.direction === 'prev' ? props.transitionPrev : props.transitionNext);
+          return () => h(Transition, {
             name: transition,
             appear: true
-          }, container); }
+          }, container)
         }
 
         return container
@@ -520,7 +517,7 @@ var QIconPicker = defineComponent({
         }, [
           renderScrollArea(),
           h(QResizeObserver, {
-            onResize: function (size) {
+            onResize: (size) => {
               data.width = size.width;
               data.height = size.height;
             }
@@ -528,31 +525,31 @@ var QIconPicker = defineComponent({
         ])
       }
 
-      var classes = [
+      const classes = [
         'q-icon-picker',
         'column'
       ];
-      if (props.color) { classes.push('bg-' + props.color); }
-      if (props.textColor) { classes.push('text-' + props.textColor); }
+      if (props.color) classes.push('bg-' + props.color);
+      if (props.textColor) classes.push('text-' + props.textColor);
 
-      var picker = h('div', {
+      const picker = h('div', {
         class: classes.join(' ')
       },  [
         renderBody(),
         renderFooter()
       ]);
 
-      nextTick(function () {
+      nextTick(() => {
         categories();
         emit('update:tags', data.categories);
-      }).catch(function (e) { return console.error(e); });
+      }).catch(e => console.error(e));
 
       return picker
     }
   }
 });
 
-var version = '2.0.3';
+const version = '2.0.5';
 
 function install (app) {
   app.component(QIconPicker.name, QIconPicker);

package/dist/index.esm.min.js

@@ -1,6 +1,6 @@
 /*!
- * @quasar/quasar-ui-qiconpicker v2.0.3
- * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
+ * @quasar/quasar-ui-qiconpicker v2.0.5
+ * (c) 2022 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */
-import{defineComponent,ref,reactive,computed,onMounted,watch,nextTick,h,Transition}from"vue";import{QScrollArea,QResizeObserver,QPagination,QBtn,QTooltip}from"quasar";var useIconPickerProps={modelValue:String,iconSet:{type:String,validator:function(e){return["material-icons","material-icons-outlined","material-icons-round","material-icons-sharp","ionicons-v4","mdi-v4","mdi-v5","mdi-v6","fontawesome-v5","eva-icons","themify","line-awesome","bootstrap-icons",""].includes(e)},default:""},icons:Array,filter:String,tags:Array,dense:Boolean,tooltips:Boolean,noFooter:Boolean,size:{type:String,default:"inherit"},color:String,textColor:String,selectedColor:{type:String,default:"primary"},selectedTextColor:{type:String,default:"grey-1"},paginationProps:{type:Object,default:function(){return{maxPages:5,input:!0}}},modelPagination:Object,animated:Boolean,transitionPrev:{type:String,default:"slide-right"},transitionNext:{type:String,default:"slide-left"}},direction={NEXT:"next",PREV:"prev"};function useIconPickerPagination(n,t,i,e){function o(e){return e.page<1&&(e.page=1),(void 0===e.itemsPerPage||e.itemsPerPage<1)&&(e.itemsPerPage=0),e}function a(e,n){for(var t in n)if(n[t]!==e[t])return!1;return!0}var r=computed(function(){return o(Object.assign({},n.innerPagination,t.modelPagination))}),c=computed(function(){return 0===r.value.itemsPerPage?1:Math.max(1,Math.ceil(e.value.length/r.value.itemsPerPage))});function u(e){e=o(Object.assign({},r.value,e));a(n.innerPagination,e)||(t.modelPagination&&i("update:model-pagination",e),n.innerPagination=e)}function s(){void 0!==t.modelPagination&&u({total:e.value.length,totalPages:c.value})}return{samePagination:a,computedPagination:r,setPagination:u,updatePagination:s,computedPagesNumber:c}}function useIconPickerIcons(t,n,i,o){function e(n){if(t.iconsList=[],n)if(window.QIconPicker){var e=n.replace(/-([a-z])/g,function(e){return e[1].toUpperCase()});window.QIconPicker.iconSet&&window.QIconPicker.iconSet[e]?t.iconsList=window.QIconPicker.iconSet[e].icons:(console.error("QIconPicker: no icon set loaded called "+n),console.error("Be sure to load the UMD version of the icon set in a script tag before using QIconPicker UMD version"))}else try{t.iconsList=require("@quasar/quasar-ui-qiconpicker/src/components/icon-set/"+n+".js").default.icons}catch(e){console.error("QIconPicker: cannot find icon set found called "+n)}console.info("Loaded "+t.iconsList.length+" icons.")}var a=computed(function(){var e=[];return t.iconsList&&(e=r.value,n.modelPagination&&0!==n.modelPagination.itemsPerPage&&(e=e.slice(i.value,o.value))),e}),r=computed(function(){var e=t.iconsList;return e&&(void 0!==n.tags&&""!==n.tags&&null!==n.tags&&n.tags.length>0&&(e=e.filter(function(e){return e.tags.filter(function(e){return n.tags.includes(e)}).length>0})),void 0!==n.filter&&""!==n.filter&&null!==n.filter&&(e=e.filter(function(e){return e.name.includes(n.filter)}))),e});function c(){var n=[];return t.iconsList.forEach(function(e){e=e.tags;e&&e.length>0&&e.forEach(function(e){!0!==n.includes(e)&&n.push(e)})}),n.sort(),t.categories=n,!0}return{loadIconSet:e,computedDisplayedIcons:a,computedFilteredIcons:r,categories:c}}function exposeIconPickerApi(t,e,i,o,n,a,r,c){var u=function(){var e=i.value,e=e.page;e>1&&(o({page:e-1}),t.direction=direction.PREV)},s=function(){var e=i.value,n=e.page,e=e.itemsPerPage;a.value>0&&n*e<r.value.length&&(o({page:n+1}),t.direction=direction.NEXT)},l=function(){o({page:c.value})},g=function(){o({page:0})},d=computed(function(){return 0===a.value||i.value.page>=c.value}),f=computed(function(){return 1===i.value.page});e({prevPage:u,nextPage:s,lastPage:l,firstPage:g,isLastPage:d,isFirstPage:f})}var QIconPicker=defineComponent({name:"QIconPicker",props:Object.assign({},useIconPickerProps),emits:["update:model-value","update:tags","update:model-pagination"],setup:function(s,e){var l=e.slots,g=e.emit,n=e.expose,d=ref(null),f=reactive({iconsList:[],innerPagination:{page:1,itemsPerPage:0,totalPages:0},categories:[],width:"100",height:"100",direction:""}),t=computed(function(){var e=v.value,n=e.page,e=e.itemsPerPage;return(n-1)*e}),i=computed(function(){var e=v.value,n=e.page,e=e.itemsPerPage;return n*e}),o=useIconPickerIcons(f,s,t,i),a=o.loadIconSet,p=o.computedDisplayedIcons,e=o.computedFilteredIcons,P=o.categories,o=useIconPickerPagination(f,s,g,e),r=o.samePagination,v=o.computedPagination,m=o.setPagination,c=o.updatePagination,u=o.computedPagesNumber;return exposeIconPickerApi(f,n,v,m,t,i,e,u),onMounted(function(){s.iconSet?a(s.iconSet):void 0!==s.icons&&s.icons.length>0&&(f.iconsList=s.icons),c()}),watch(function(){return s.iconSet},function(e){e&&(a(e),c(),nextTick(function(){m({page:1})}).catch(function(e){return console.error(e)}),d.value&&d.value.setScrollPosition(0))}),watch(function(){return s.icons},function(e){void 0!==s.icons&&s.icons.length>0&&(f.iconsList=s.icons),c(),nextTick(function(){m({page:1})}).catch(function(e){return console.error(e)}),d.value&&d.value.setScrollPosition(0)}),watch(function(){return s.filter},function(){m({page:1,totalPages:u.value}),c()}),watch(function(){return s.tags},function(e){m({page:1,totalPages:u.value}),c()}),s.modelPagination&&watch(function(){return s.modelPagination},function(e,n){r(n,e)||c()}),s.modelPagination&&(watch(function(){return s.modelPagination.itemsPerPage},function(){c()}),watch(function(){return s.modelPagination.page},function(){c()})),function(){function n(){if(s.modelPagination&&0===s.modelPagination.itemsPerPage)return"";var e=l.pagination&&l.pagination(),n=v.value,t=n.page,n=n.totalPages;return e||h(QPagination,Object.assign({},{class:"q-icon-picker__pagination"},s.paginationProps,{modelValue:t,max:n,"onUpdate:modelValue":function(e){s.animated&&(f.direction=e>t?direction.NEXT:direction.PREV),m({page:e})}}))}function e(){if(!0!==s.noFooter&&void 0!==s.modelPagination){var e=l.footer&&l.footer();return h("div",{class:"q-icon-picker__footer flex flex-center"},[e?e(v.value):n()])}}function o(e){if(!0===s.tooltips)return function(){return h(QTooltip,{},function(){return e})}}function t(e){var n=void 0!==e.prefix?e.prefix+" "+e.name:e.name;if(l.icon&&l.icon())return l.icon(n);var t=n===s.modelValue,i=t?s.selectedTextColor:void 0,e=t?s.selectedColor:void 0,t=s.size||void 0;return h(QBtn,{id:n,unelevated:!0,dense:s.dense,noWrap:!0,size:t,textColor:i,color:e,icon:n,onClick:function(){return g("update:model-value",n)}},o(n))}function i(){return p.value.map(function(e){return t(e)})}function a(){var e=function(){return h("div",{key:v.value.page,class:"q-icon-picker__container col"},[].concat(i()))};if(!0!==s.animated)return e;var n="q-transition--"+("prev"===f.direction?s.transitionPrev:s.transitionNext);return function(){return h(Transition,{name:n,appear:!0},e)}}function r(){return h(QScrollArea,{ref:d,style:{width:f.width+"px",height:f.height+"px"}},a())}function c(){return h("div",{class:"q-icon-picker__body col column"},[r(),h(QResizeObserver,{onResize:function(e){f.width=e.width,f.height=e.height}})])}var u=["q-icon-picker","column"];s.color&&u.push("bg-"+s.color),s.textColor&&u.push("text-"+s.textColor);u=h("div",{class:u.join(" ")},[c(),e()]);return nextTick(function(){P(),g("update:tags",f.categories)}).catch(function(e){return console.error(e)}),u}}}),version="2.0.3";function install(e){e.component(QIconPicker.name,QIconPicker)}var VuePlugin=Object.freeze({__proto__:null,version:version,QIconPicker:QIconPicker,install:install});export{QIconPicker,VuePlugin as default,install,version};
+import{defineComponent,ref,reactive,computed,onMounted,watch,nextTick,h,Transition}from"vue";import{QScrollArea,QResizeObserver,QPagination,QBtn,QTooltip}from"quasar";const useIconPickerProps={modelValue:String,iconSet:{type:String,validator:e=>["material-icons","material-icons-outlined","material-icons-round","material-icons-sharp","ionicons-v4","mdi-v4","mdi-v5","mdi-v6","fontawesome-v5","eva-icons","themify","line-awesome","bootstrap-icons",""].includes(e),default:""},icons:Array,filter:String,tags:Array,dense:Boolean,tooltips:Boolean,noFooter:Boolean,size:{type:String,default:"inherit"},color:String,textColor:String,selectedColor:{type:String,default:"primary"},selectedTextColor:{type:String,default:"grey-1"},paginationProps:{type:Object,default:()=>({maxPages:5,input:!0})},modelPagination:Object,animated:Boolean,transitionPrev:{type:String,default:"slide-right"},transitionNext:{type:String,default:"slide-left"}},direction={NEXT:"next",PREV:"prev"};function useIconPickerPagination(o,t,i,e){function a(e){return e.page<1&&(e.page=1),(void 0===e.itemsPerPage||e.itemsPerPage<1)&&(e.itemsPerPage=0),e}function r(e,n){for(const o in n)if(n[o]!==e[o])return!1;return!0}const c=computed(()=>{return a({...o.innerPagination,...t.modelPagination})}),n=computed(()=>{return 0===c.value.itemsPerPage?1:Math.max(1,Math.ceil(e.value.length/c.value.itemsPerPage))});function s(e){const n=a({...c.value,...e});r(o.innerPagination,n)||(t.modelPagination&&i("update:model-pagination",n),o.innerPagination=n)}function l(){void 0!==t.modelPagination&&s({total:e.value.length,totalPages:n.value})}return{samePagination:r,computedPagination:c,setPagination:s,updatePagination:l,computedPagesNumber:n}}function useIconPickerIcons(t,n,o,i){function e(n){if(t.iconsList=[],n)if(window.QIconPicker){const e=n.replace(/-([a-z])/g,e=>e[1].toUpperCase());window.QIconPicker.iconSet&&window.QIconPicker.iconSet[e]?t.iconsList=window.QIconPicker.iconSet[e].icons:(console.error("QIconPicker: no icon set loaded called "+n),console.error("Be sure to load the UMD version of the icon set in a script tag before using QIconPicker UMD version"))}else try{t.iconsList=require(`@quasar/quasar-ui-qiconpicker/src/components/icon-set/${n}.js`).default.icons}catch(e){console.error("QIconPicker: cannot find icon set found called "+n)}console.info(`Loaded ${t.iconsList.length} icons.`)}const a=computed(()=>{let e=[];t.iconsList&&(e=r.value,n.modelPagination&&0!==n.modelPagination.itemsPerPage&&(e=e.slice(o.value,i.value)));return e}),r=computed(()=>{let e=t.iconsList;e&&(void 0!==n.tags&&""!==n.tags&&null!==n.tags&&n.tags.length>0&&(e=e.filter(e=>{return e.tags.filter(e=>n.tags.includes(e)).length>0})),void 0!==n.filter&&""!==n.filter&&null!==n.filter&&(e=e.filter(e=>e.name.includes(n.filter))));return e});function c(){const o=[];return t.iconsList.forEach(e=>{const n=e.tags;n&&n.length>0&&n.forEach(e=>{!0!==o.includes(e)&&o.push(e)})}),o.sort(),t.categories=o,!0}return{loadIconSet:e,computedDisplayedIcons:a,computedFilteredIcons:r,categories:c}}function exposeIconPickerApi(o,e,t,i,n,a,r,c){const s=()=>{const e=t.value["page"];e>1&&(i({page:e-1}),o.direction=direction.PREV)},l=()=>{const{page:e,itemsPerPage:n}=t.value;a.value>0&&e*n<r.value.length&&(i({page:e+1}),o.direction=direction.NEXT)},u=()=>{i({page:c.value})},d=()=>{i({page:0})},g=computed(()=>{return 0===a.value||t.value.page>=c.value}),p=computed(()=>{return 1===t.value.page});e({prevPage:s,nextPage:l,lastPage:u,firstPage:d,isLastPage:g,isFirstPage:p})}var QIconPicker=defineComponent({name:"QIconPicker",props:{...useIconPickerProps},emits:["update:model-value","update:tags","update:model-pagination"],setup(u,{slots:d,emit:g,expose:e}){const p=ref(null),P=reactive({iconsList:[],innerPagination:{page:1,itemsPerPage:0,totalPages:0},categories:[],width:"100",height:"100",direction:""}),n=computed(()=>{const{page:e,itemsPerPage:n}=f.value;return(e-1)*n}),o=computed(()=>{const{page:e,itemsPerPage:n}=f.value;return e*n}),{loadIconSet:t,computedDisplayedIcons:m,computedFilteredIcons:i,categories:v}=useIconPickerIcons(P,u,n,o),{samePagination:a,computedPagination:f,setPagination:k,updatePagination:r,computedPagesNumber:c}=useIconPickerPagination(P,u,g,i);return exposeIconPickerApi(P,e,f,k,n,o,i,c),onMounted(()=>{u.iconSet?t(u.iconSet):void 0!==u.icons&&u.icons.length>0&&(P.iconsList=u.icons);r()}),watch(()=>u.iconSet,e=>{e&&(t(e),r(),nextTick(()=>{k({page:1})}).catch(e=>console.error(e)),p.value&&p.value.setScrollPosition(0))}),watch(()=>u.icons,e=>{void 0!==u.icons&&u.icons.length>0&&(P.iconsList=u.icons);r();nextTick(()=>{k({page:1})}).catch(e=>console.error(e));p.value&&p.value.setScrollPosition(0)}),watch(()=>u.filter,()=>{k({page:1,totalPages:c.value});r()}),watch(()=>u.tags,e=>{k({page:1,totalPages:c.value});r()}),u.modelPagination&&watch(()=>u.modelPagination,(e,n)=>{a(n,e)||r()}),u.modelPagination&&(watch(()=>u.modelPagination.itemsPerPage,()=>{r()}),watch(()=>u.modelPagination.page,()=>{r()})),()=>{function n(){if(u.modelPagination&&0===u.modelPagination.itemsPerPage)return"";const e=d.pagination&&d.pagination(),{page:n,totalPages:o}=f.value;return e||h(QPagination,{class:"q-icon-picker__pagination",...u.paginationProps,modelValue:n,max:o,"onUpdate:modelValue":e=>{u.animated&&(e>n?P.direction=direction.NEXT:P.direction=direction.PREV);k({page:e})}})}function e(){if(!0!==u.noFooter&&void 0!==u.modelPagination){const e=d.footer&&d.footer();return h("div",{class:"q-icon-picker__footer flex flex-center"},[e?e(f.value):n()])}}function r(e){if(!0===u.tooltips)return()=>h(QTooltip,{},()=>e)}function o(e){const n=void 0!==e.prefix?e.prefix+" "+e.name:e.name;if(d.icon&&d.icon())return d.icon(n);const o=n===u.modelValue,t=o?u.selectedTextColor:void 0,i=o?u.selectedColor:void 0,a=u.size||void 0;return h(QBtn,{id:n,unelevated:!0,dense:u.dense,noWrap:!0,size:a,textColor:t,color:i,icon:n,onClick:()=>g("update:model-value",n)},r(n))}function t(){return m.value.map(e=>o(e))}function i(){const e=()=>h("div",{key:f.value.page,class:"q-icon-picker__container col"},[...t()]);if(!0!==u.animated)return e;{const n="q-transition--"+("prev"===P.direction?u.transitionPrev:u.transitionNext);return()=>h(Transition,{name:n,appear:!0},e)}}function a(){return h(QScrollArea,{ref:p,style:{width:P.width+"px",height:P.height+"px"}},i())}function c(){return h("div",{class:"q-icon-picker__body col column"},[a(),h(QResizeObserver,{onResize:e=>{P.width=e.width;P.height=e.height}})])}const s=["q-icon-picker","column"];u.color&&s.push("bg-"+u.color);u.textColor&&s.push("text-"+u.textColor);const l=h("div",{class:s.join(" ")},[c(),e()]);nextTick(()=>{v();g("update:tags",P.categories)}).catch(e=>console.error(e));return l}}});const version="2.0.5";function install(e){e.component(QIconPicker.name,QIconPicker)}var VuePlugin=Object.freeze({__proto__:null,version:version,QIconPicker:QIconPicker,install:install});export{QIconPicker,VuePlugin as default,install,version};

package/dist/index.min.css

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qiconpicker v2.0.3
- * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
+ * @quasar/quasar-ui-qiconpicker v2.0.5
+ * (c) 2022 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */.q-icon-picker{display:flex;flex-direction:column;flex-wrap:nowrap;width:100%;height:100%}.q-icon-picker__body{position:relative}.q-icon-picker__body,.q-icon-picker__scroll-area{overflow:hidden;flex:1 1 auto;width:100%}.q-icon-picker__container{display:flex;flex:1 1 auto;flex-wrap:wrap;flex-direction:row;justify-content:center;width:100%}.q-icon-picker__footer,.q-icon-picker__header{width:100%}

package/dist/index.rtl.css

@@ -1,6 +1,6 @@
 /*!
- * @quasar/quasar-ui-qiconpicker v2.0.3
- * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
+ * @quasar/quasar-ui-qiconpicker v2.0.5
+ * (c) 2022 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */
 .q-icon-picker {

package/dist/index.rtl.min.css

@@ -1,5 +1,5 @@
 /*!
- * @quasar/quasar-ui-qiconpicker v2.0.3
- * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
+ * @quasar/quasar-ui-qiconpicker v2.0.5
+ * (c) 2022 Jeff Galbraith <jeff@quasar.dev>
  * Released under the MIT License.
  */.q-icon-picker{display:flex;flex-direction:column;flex-wrap:nowrap;width:100%;height:100%}.q-icon-picker__body{position:relative}.q-icon-picker__body,.q-icon-picker__scroll-area{overflow:hidden;flex:1 1 auto;width:100%}.q-icon-picker__container{display:flex;flex:1 1 auto;flex-wrap:wrap;flex-direction:row;justify-content:center;width:100%}.q-icon-picker__footer,.q-icon-picker__header{width:100%}