@quasar/quasar-ui-qiconpicker 2.0.5 → 2.0.6

package/dist/icon-set/themify.umd.js

@@ -0,0 +1,6 @@
+/*!
+ * @quasar/quasar-ui-qiconpicker v2.0.5
+ * (c) 2022 Jeff Galbraith <jeff@quasar.dev>
+ * Released under the MIT License.
+ */
+(function(t,a){"object"===typeof exports&&"undefined"!==typeof module?module.exports=a():"function"===typeof define&&define.amd?define(a):(t="undefined"!==typeof globalThis?globalThis:t||self,t.QIconPicker=t.QIconPicker||{},t.QIconPicker.iconSet=t.QIconPicker.iconSet||{},t.QIconPicker.iconSet.themify=a())})(this,function(){"use strict";var t={name:"themify",icons:[{name:"ti-wand",tags:[]},{name:"ti-volume",tags:[]},{name:"ti-user",tags:[]},{name:"ti-unlock",tags:[]},{name:"ti-unlink",tags:[]},{name:"ti-trash",tags:[]},{name:"ti-thought",tags:[]},{name:"ti-target",tags:[]},{name:"ti-tag",tags:[]},{name:"ti-tablet",tags:[]},{name:"ti-star",tags:[]},{name:"ti-spray",tags:[]},{name:"ti-signal",tags:[]},{name:"ti-shopping-cart",tags:[]},{name:"ti-shopping-cart-full",tags:[]},{name:"ti-settings",tags:[]},{name:"ti-search",tags:[]},{name:"ti-zoom-in",tags:[]},{name:"ti-zoom-out",tags:[]},{name:"ti-cut",tags:[]},{name:"ti-ruler",tags:[]},{name:"ti-ruler-pencil",tags:[]},{name:"ti-ruler-alt",tags:[]},{name:"ti-bookmark",tags:[]},{name:"ti-bookmark-alt",tags:[]},{name:"ti-reload",tags:[]},{name:"ti-plus",tags:[]},{name:"ti-pin",tags:[]},{name:"ti-pencil",tags:[]},{name:"ti-pencil-alt",tags:[]},{name:"ti-paint-roller",tags:[]},{name:"ti-paint-bucket",tags:[]},{name:"ti-na",tags:[]},{name:"ti-mobile",tags:[]},{name:"ti-minus",tags:[]},{name:"ti-medall",tags:[]},{name:"ti-medall-alt",tags:[]},{name:"ti-marker",tags:[]},{name:"ti-marker-alt",tags:[]},{name:"ti-arrow-up",tags:[]},{name:"ti-arrow-right",tags:[]},{name:"ti-arrow-left",tags:[]},{name:"ti-arrow-down",tags:[]},{name:"ti-lock",tags:[]},{name:"ti-location-arrow",tags:[]},{name:"ti-link",tags:[]},{name:"ti-layout",tags:[]},{name:"ti-layers",tags:[]},{name:"ti-layers-alt",tags:[]},{name:"ti-key",tags:[]},{name:"ti-import",tags:[]},{name:"ti-image",tags:[]},{name:"ti-heart",tags:[]},{name:"ti-heart-broken",tags:[]},{name:"ti-hand-stop",tags:[]},{name:"ti-hand-open",tags:[]},{name:"ti-hand-drag",tags:[]},{name:"ti-folder",tags:[]},{name:"ti-flag",tags:[]},{name:"ti-flag-alt",tags:[]},{name:"ti-flag-alt-2",tags:[]},{name:"ti-eye",tags:[]},{name:"ti-export",tags:[]},{name:"ti-exchange-vertical",tags:[]},{name:"ti-desktop",tags:[]},{name:"ti-cup",tags:[]},{name:"ti-crown",tags:[]},{name:"ti-comments",tags:[]},{name:"ti-comment",tags:[]},{name:"ti-comment-alt",tags:[]},{name:"ti-close",tags:[]},{name:"ti-clip",tags:[]},{name:"ti-angle-up",tags:[]},{name:"ti-angle-right",tags:[]},{name:"ti-angle-left",tags:[]},{name:"ti-angle-down",tags:[]},{name:"ti-check",tags:[]},{name:"ti-check-box",tags:[]},{name:"ti-camera",tags:[]},{name:"ti-announcement",tags:[]},{name:"ti-brush",tags:[]},{name:"ti-briefcase",tags:[]},{name:"ti-bolt",tags:[]},{name:"ti-bolt-alt",tags:[]},{name:"ti-blackboard",tags:[]},{name:"ti-bag",tags:[]},{name:"ti-move",tags:[]},{name:"ti-arrows-vertical",tags:[]},{name:"ti-arrows-horizontal",tags:[]},{name:"ti-fullscreen",tags:[]},{name:"ti-arrow-top-right",tags:[]},{name:"ti-arrow-top-left",tags:[]},{name:"ti-arrow-circle-up",tags:[]},{name:"ti-arrow-circle-right",tags:[]},{name:"ti-arrow-circle-left",tags:[]},{name:"ti-arrow-circle-down",tags:[]},{name:"ti-angle-double-up",tags:[]},{name:"ti-angle-double-right",tags:[]},{name:"ti-angle-double-left",tags:[]},{name:"ti-angle-double-down",tags:[]},{name:"ti-zip",tags:[]},{name:"ti-world",tags:[]},{name:"ti-wheelchair",tags:[]},{name:"ti-view-list",tags:[]},{name:"ti-view-list-alt",tags:[]},{name:"ti-view-grid",tags:[]},{name:"ti-uppercase",tags:[]},{name:"ti-upload",tags:[]},{name:"ti-underline",tags:[]},{name:"ti-truck",tags:[]},{name:"ti-timer",tags:[]},{name:"ti-ticket",tags:[]},{name:"ti-thumb-up",tags:[]},{name:"ti-thumb-down",tags:[]},{name:"ti-text",tags:[]},{name:"ti-stats-up",tags:[]},{name:"ti-stats-down",tags:[]},{name:"ti-split-v",tags:[]},{name:"ti-split-h",tags:[]},{name:"ti-smallcap",tags:[]},{name:"ti-shine",tags:[]},{name:"ti-shift-right",tags:[]},{name:"ti-shift-left",tags:[]},{name:"ti-shield",tags:[]},{name:"ti-notepad",tags:[]},{name:"ti-server",tags:[]},{name:"ti-quote-right",tags:[]},{name:"ti-quote-left",tags:[]},{name:"ti-pulse",tags:[]},{name:"ti-printer",tags:[]},{name:"ti-power-off",tags:[]},{name:"ti-plug",tags:[]},{name:"ti-pie-chart",tags:[]},{name:"ti-paragraph",tags:[]},{name:"ti-panel",tags:[]},{name:"ti-package",tags:[]},{name:"ti-music",tags:[]},{name:"ti-music-alt",tags:[]},{name:"ti-mouse",tags:[]},{name:"ti-mouse-alt",tags:[]},{name:"ti-money",tags:[]},{name:"ti-microphone",tags:[]},{name:"ti-menu",tags:[]},{name:"ti-menu-alt",tags:[]},{name:"ti-map",tags:[]},{name:"ti-map-alt",tags:[]},{name:"ti-loop",tags:[]},{name:"ti-location-pin",tags:[]},{name:"ti-list",tags:[]},{name:"ti-light-bulb",tags:[]},{name:"ti-Italic",tags:[]},{name:"ti-info",tags:[]},{name:"ti-infinite",tags:[]},{name:"ti-id-badge",tags:[]},{name:"ti-hummer",tags:[]},{name:"ti-home",tags:[]},{name:"ti-help",tags:[]},{name:"ti-headphone",tags:[]},{name:"ti-harddrives",tags:[]},{name:"ti-harddrive",tags:[]},{name:"ti-gift",tags:[]},{name:"ti-game",tags:[]},{name:"ti-filter",tags:[]},{name:"ti-files",tags:[]},{name:"ti-file",tags:[]},{name:"ti-eraser",tags:[]},{name:"ti-envelope",tags:[]},{name:"ti-download",tags:[]},{name:"ti-direction",tags:[]},{name:"ti-direction-alt",tags:[]},{name:"ti-dashboard",tags:[]},{name:"ti-control-stop",tags:[]},{name:"ti-control-shuffle",tags:[]},{name:"ti-control-play",tags:[]},{name:"ti-control-pause",tags:[]},{name:"ti-control-forward",tags:[]},{name:"ti-control-backward",tags:[]},{name:"ti-cloud",tags:[]},{name:"ti-cloud-up",tags:[]},{name:"ti-cloud-down",tags:[]},{name:"ti-clipboard",tags:[]},{name:"ti-car",tags:[]},{name:"ti-calendar",tags:[]},{name:"ti-book",tags:[]},{name:"ti-bell",tags:[]},{name:"ti-basketball",tags:[]},{name:"ti-bar-chart",tags:[]},{name:"ti-bar-chart-alt",tags:[]},{name:"ti-back-right",tags:[]},{name:"ti-back-left",tags:[]},{name:"ti-arrows-corner",tags:[]},{name:"ti-archive",tags:[]},{name:"ti-anchor",tags:[]},{name:"ti-align-right",tags:[]},{name:"ti-align-left",tags:[]},{name:"ti-align-justify",tags:[]},{name:"ti-align-center",tags:[]},{name:"ti-alert",tags:[]},{name:"ti-alarm-clock",tags:[]},{name:"ti-agenda",tags:[]},{name:"ti-write",tags:[]},{name:"ti-window",tags:[]},{name:"ti-widgetized",tags:[]},{name:"ti-widget",tags:[]},{name:"ti-widget-alt",tags:[]},{name:"ti-wallet",tags:[]},{name:"ti-video-clapper",tags:[]},{name:"ti-video-camera",tags:[]},{name:"ti-vector",tags:[]},{name:"ti-themify-logo",tags:[]},{name:"ti-themify-favicon",tags:[]},{name:"ti-themify-favicon-alt",tags:[]},{name:"ti-support",tags:[]},{name:"ti-stamp",tags:[]},{name:"ti-split-v-alt",tags:[]},{name:"ti-slice",tags:[]},{name:"ti-shortcode",tags:[]},{name:"ti-shift-right-alt",tags:[]},{name:"ti-shift-left-alt",tags:[]},{name:"ti-ruler-alt-2",tags:[]},{name:"ti-receipt",tags:[]},{name:"ti-pin2",tags:[]},{name:"ti-pin-alt",tags:[]},{name:"ti-pencil-alt2",tags:[]},{name:"ti-palette",tags:[]},{name:"ti-more",tags:[]},{name:"ti-more-alt",tags:[]},{name:"ti-microphone-alt",tags:[]},{name:"ti-magnet",tags:[]},{name:"ti-line-double",tags:[]},{name:"ti-line-dotted",tags:[]},{name:"ti-line-dashed",tags:[]},{name:"ti-layout-width-full",tags:[]},{name:"ti-layout-width-default",tags:[]},{name:"ti-layout-width-default-alt",tags:[]},{name:"ti-layout-tab",tags:[]},{name:"ti-layout-tab-window",tags:[]},{name:"ti-layout-tab-v",tags:[]},{name:"ti-layout-tab-min",tags:[]},{name:"ti-layout-slider",tags:[]},{name:"ti-layout-slider-alt",tags:[]},{name:"ti-layout-sidebar-right",tags:[]},{name:"ti-layout-sidebar-none",tags:[]},{name:"ti-layout-sidebar-left",tags:[]},{name:"ti-layout-placeholder",tags:[]},{name:"ti-layout-menu",tags:[]},{name:"ti-layout-menu-v",tags:[]},{name:"ti-layout-menu-separated",tags:[]},{name:"ti-layout-menu-full",tags:[]},{name:"ti-layout-media-right-alt",tags:[]},{name:"ti-layout-media-right",tags:[]},{name:"ti-layout-media-overlay",tags:[]},{name:"ti-layout-media-overlay-alt",tags:[]},{name:"ti-layout-media-overlay-alt-2",tags:[]},{name:"ti-layout-media-left-alt",tags:[]},{name:"ti-layout-media-left",tags:[]},{name:"ti-layout-media-center-alt",tags:[]},{name:"ti-layout-media-center",tags:[]},{name:"ti-layout-list-thumb",tags:[]},{name:"ti-layout-list-thumb-alt",tags:[]},{name:"ti-layout-list-post",tags:[]},{name:"ti-layout-list-large-image",tags:[]},{name:"ti-layout-line-solid",tags:[]},{name:"ti-layout-grid4",tags:[]},{name:"ti-layout-grid3",tags:[]},{name:"ti-layout-grid2",tags:[]},{name:"ti-layout-grid2-thumb",tags:[]},{name:"ti-layout-cta-right",tags:[]},{name:"ti-layout-cta-left",tags:[]},{name:"ti-layout-cta-center",tags:[]},{name:"ti-layout-cta-btn-right",tags:[]},{name:"ti-layout-cta-btn-left",tags:[]},{name:"ti-layout-column4",tags:[]},{name:"ti-layout-column3",tags:[]},{name:"ti-layout-column2",tags:[]},{name:"ti-layout-accordion-separated",tags:[]},{name:"ti-layout-accordion-merged",tags:[]},{name:"ti-layout-accordion-list",tags:[]},{name:"ti-ink-pen",tags:[]},{name:"ti-info-alt",tags:[]},{name:"ti-help-alt",tags:[]},{name:"ti-headphone-alt",tags:[]},{name:"ti-hand-point-up",tags:[]},{name:"ti-hand-point-right",tags:[]},{name:"ti-hand-point-left",tags:[]},{name:"ti-hand-point-down",tags:[]},{name:"ti-gallery",tags:[]},{name:"ti-face-smile",tags:[]},{name:"ti-face-sad",tags:[]},{name:"ti-credit-card",tags:[]},{name:"ti-control-skip-forward",tags:[]},{name:"ti-control-skip-backward",tags:[]},{name:"ti-control-record",tags:[]},{name:"ti-control-eject",tags:[]},{name:"ti-comments-smiley",tags:[]},{name:"ti-brush-alt",tags:[]},{name:"ti-youtube",tags:[]},{name:"ti-vimeo",tags:[]},{name:"ti-twitter",tags:[]},{name:"ti-time",tags:[]},{name:"ti-tumblr",tags:[]},{name:"ti-skype",tags:[]},{name:"ti-share",tags:[]},{name:"ti-share-alt",tags:[]},{name:"ti-rocket",tags:[]},{name:"ti-pinterest",tags:[]},{name:"ti-new-window",tags:[]},{name:"ti-microsoft",tags:[]},{name:"ti-list-ol",tags:[]},{name:"ti-linkedin",tags:[]},{name:"ti-layout-sidebar-2",tags:[]},{name:"ti-layout-grid4-alt",tags:[]},{name:"ti-layout-grid3-alt",tags:[]},{name:"ti-layout-grid2-alt",tags:[]},{name:"ti-layout-column4-alt",tags:[]},{name:"ti-layout-column3-alt",tags:[]},{name:"ti-layout-column2-alt",tags:[]},{name:"ti-instagram",tags:[]},{name:"ti-google",tags:[]},{name:"ti-github",tags:[]},{name:"ti-flickr",tags:[]},{name:"ti-facebook",tags:[]},{name:"ti-dropbox",tags:[]},{name:"ti-dribbble",tags:[]},{name:"ti-apple",tags:[]},{name:"ti-android",tags:[]},{name:"ti-save",tags:[]},{name:"ti-save-alt",tags:[]},{name:"ti-yahoo",tags:[]},{name:"ti-wordpress",tags:[]},{name:"ti-vimeo-alt",tags:[]},{name:"ti-twitter-alt",tags:[]},{name:"ti-tumblr-alt",tags:[]},{name:"ti-trello",tags:[]},{name:"ti-stack-overflow",tags:[]},{name:"ti-soundcloud",tags:[]},{name:"ti-sharethis",tags:[]},{name:"ti-sharethis-alt",tags:[]},{name:"ti-reddit",tags:[]},{name:"ti-pinterest-alt",tags:[]},{name:"ti-microsoft-alt",tags:[]},{name:"ti-linux",tags:[]},{name:"ti-jsfiddle",tags:[]},{name:"ti-joomla",tags:[]},{name:"ti-html5",tags:[]},{name:"ti-flickr-alt",tags:[]},{name:"ti-email",tags:[]},{name:"ti-drupal",tags:[]},{name:"ti-dropbox-alt",tags:[]},{name:"ti-css3",tags:[]},{name:"ti-rss",tags:[]},{name:"ti-rss-alt",tags:[]}]};return t});

package/dist/index.cjs.js

@@ -0,0 +1,564 @@
+/*!
+ * @quasar/quasar-ui-qiconpicker v2.0.5
+ * (c) 2022 Jeff Galbraith <jeff@quasar.dev>
+ * Released under the MIT License.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var quasar = require('quasar');
+
+/**
+ * QIconPicker Properties
+ */
+const useIconPickerProps = {
+  modelValue: String,
+  iconSet: {
+    type: String,
+    validator: v => [
+      '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(v),
+    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: true
+    })
+  },
+  modelPagination: Object,
+  animated: Boolean,
+  transitionPrev: {
+    type: String,
+    default: 'slide-right'
+  },
+  transitionNext: {
+    type: String,
+    default: 'slide-left'
+  }
+};
+
+const direction = {
+  NEXT: 'next',
+  PREV: 'prev'
+};
+
+/**
+ * Pagination
+ */
+function useIconPickerPagination(data, props, emit, computedFilteredIcons) {
+
+  function fixPagination(p) {
+    if (p.page < 1) {
+      p.page = 1;
+    }
+    if (p.itemsPerPage === void 0 || p.itemsPerPage < 1) {
+      p.itemsPerPage = 0; // all
+    }
+    return p
+  }
+
+  // returns true if the pagination is the same,
+  // otherwise returns false if it has changed
+  function samePagination(oldPag, newPag) {
+    for (const prop in newPag) {
+      if (newPag[ prop ] !== oldPag[ prop ]) {
+        return false
+      }
+    }
+    return true
+  }
+
+  const computedPagination = vue.computed(() => {
+    return fixPagination({
+      ...data.innerPagination,
+      ...props.modelPagination
+    })
+  });
+
+  const computedPagesNumber = vue.computed(() => {
+    return computedPagination.value.itemsPerPage === 0 ? 1
+      : Math.max(1, Math.ceil(computedFilteredIcons.value.length / computedPagination.value.itemsPerPage))
+  });
+
+  function setPagination(val) {
+    const newPagination = fixPagination({
+      ...computedPagination.value,
+      ...val
+    });
+
+    if (!samePagination(data.innerPagination, newPagination)) {
+      if (props.modelPagination) {
+        emit('update:model-pagination', newPagination);
+      }
+      data.innerPagination = newPagination;
+    }
+  }
+
+  function updatePagination() {
+    if (props.modelPagination !== void 0) {
+      setPagination({ total: computedFilteredIcons.value.length, totalPages: computedPagesNumber.value });
+    }
+  }
+
+  return {
+    samePagination,
+    computedPagination,
+    setPagination,
+    updatePagination,
+    computedPagesNumber
+  }
+}
+
+/**
+ * Icons
+ */
+function useIconPickerIcons(data, props, computedFirstItemIndex, computedLastItemIndex) {
+
+  function loadIconSet(iconSet) {
+    data.iconsList = [];
+    if (iconSet) {
+      // detect if UMD version is installed
+      if (window.QIconPicker) {
+        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('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;
+        }
+        catch (e) {
+          console.error(`QIconPicker: cannot find icon set found called ${ iconSet }`);
+        }
+      }
+    }
+    console.info(`Loaded ${ data.iconsList.length } icons.`);
+  }
+
+  const computedDisplayedIcons = vue.computed(() => {
+    let icons = [];
+    if (data.iconsList) {
+      icons = computedFilteredIcons.value;
+
+      // should the icons be paged?
+      if (props.modelPagination && props.modelPagination.itemsPerPage !== 0) {
+        icons = icons.slice(computedFirstItemIndex.value, computedLastItemIndex.value);
+      }
+    }
+    return icons
+  });
+
+  const computedFilteredIcons = vue.computed(() => {
+    let icons = data.iconsList;
+    if (icons) {
+      if (props.tags !== void 0 && props.tags !== '' && props.tags !== null && props.tags.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(icon => icon.name.includes(props.filter));
+      }
+    }
+    return icons
+  });
+
+  function categories() {
+    const t = [];
+    data.iconsList.forEach(icon => {
+      const tags = icon.tags;
+      if (tags && tags.length > 0) {
+        tags.forEach(tag => {
+          if (t.includes(tag) !== true) {
+            t.push(tag);
+          }
+        });
+      }
+    });
+    t.sort();
+    data.categories = t;
+    return true
+  }
+
+  return {
+    loadIconSet,
+    computedDisplayedIcons,
+    computedFilteredIcons,
+    categories
+  }
+}
+
+/**
+ * Exposes api functions
+ */
+function exposeIconPickerApi(data, expose, computedPagination, setPagination, computedFirstItemIndex, computedLastItemIndex, computedFilteredIcons, computedPagesNumber) {
+  // goes to previous page
+  const prevPage = () => {
+    const { page } = computedPagination.value;
+    if (page > 1) {
+      setPagination({ page: page - 1 });
+      data.direction = direction.PREV;
+    }
+  };
+
+  // goes to next page
+  const nextPage = () => {
+    const { page, itemsPerPage } = computedPagination.value;
+    if (computedLastItemIndex.value > 0 && page * itemsPerPage < computedFilteredIcons.value.length) {
+      setPagination({ page: page + 1 });
+      data.direction = direction.NEXT;
+    }
+  };
+
+  // goes to last page
+  const lastPage = () => {
+    setPagination({ page: computedPagesNumber.value });
+  };
+
+  // goes to first page
+  const firstPage = () => {
+    setPagination({ page: 0 });
+  };
+
+  // checks if we are on the last page
+  const isLastPage = vue.computed(() => {
+    return computedLastItemIndex.value === 0
+      ? true
+      : computedPagination.value.page >= computedPagesNumber.value
+  });
+
+
+  // checks if we are on the first page
+  const isFirstPage = vue.computed(() => {
+    return computedPagination.value.page === 1
+  });
+
+  expose({
+    prevPage,
+    nextPage,
+    lastPage,
+    firstPage,
+    isLastPage,
+    isFirstPage
+  });
+}
+
+
+var QIconPicker = vue.defineComponent({
+  name: 'QIconPicker',
+
+  props: {
+    ...useIconPickerProps
+  },
+
+  emits: [
+    'update:model-value',
+    'update:tags',
+    'update:model-pagination'
+  ],
+
+  setup(props, { slots, emit, expose }) {
+    const scrollAreaRef = vue.ref(null);
+    const data = vue.reactive({
+      iconsList: [],
+      innerPagination: {
+        page: 1,
+        itemsPerPage: 0,
+        totalPages: 0
+      },
+      categories: [],
+      width: '100',
+      height: '100',
+      direction: ''
+    });
+
+    // index of first item on a page
+    const computedFirstItemIndex = vue.computed(() => {
+      const { page, itemsPerPage } = computedPagination.value;
+      return (page - 1) * itemsPerPage
+    });
+
+    // index of last item on a page
+    const computedLastItemIndex = vue.computed(() => {
+      const { page, itemsPerPage } = computedPagination.value;
+      return page * itemsPerPage
+    });
+
+    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);
+
+    vue.onMounted(() => {
+      if (props.iconSet) {
+        loadIconSet(props.iconSet);
+      }
+      else if (props.icons !== void 0 && props.icons.length > 0) {
+        data.iconsList = props.icons;
+      }
+      updatePagination();
+    });
+
+
+    vue.watch(() => props.iconSet, (val) => {
+      if (val) {
+        loadIconSet(val);
+        updatePagination();
+        vue.nextTick(() => {
+          // whenever the icon set changes, it resets pagination page to page 1
+          setPagination({ page: 1 });
+        }).catch(e => console.error(e));
+        // scroll to top of QScrollArea, if applicable
+        if(scrollAreaRef.value) {
+          scrollAreaRef.value.setScrollPosition(0);
+        }
+      }
+    });
+
+    vue.watch(() => props.icons, (val) => {
+      if (props.icons !== void 0 && props.icons.length > 0) {
+        data.iconsList = props.icons;
+      }
+      updatePagination();
+      vue.nextTick(() => {
+        // whenever the icon set changes, it resets pagination page to page 1
+        setPagination({ page: 1 });
+      }).catch(e => console.error(e));
+      // scroll to top of QScrollArea, if applicable
+      if(scrollAreaRef.value) {
+        scrollAreaRef.value.setScrollPosition(0);
+      }
+    });
+
+    vue.watch(() => props.filter, () => {
+      // whenever the filter changes, it resets pagination page to page 1
+      setPagination({ page: 1, totalPages: computedPagesNumber.value });
+      updatePagination();
+    });
+
+    vue.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) {
+      vue.watch(() => props.modelPagination, (newVal, oldVal) => {
+        if (!samePagination(oldVal, newVal)) {
+          updatePagination();
+        }
+      });
+    }
+
+    if (props.modelPagination) {
+      vue.watch(() => props.modelPagination.itemsPerPage, () => {
+        updatePagination();
+      });
+
+      vue.watch(() =>props.modelPagination.page, () => {
+        updatePagination();
+      });
+    }
+
+    return () => {
+
+      function renderPagination() {
+        if (props.modelPagination && props.modelPagination.itemsPerPage === 0) return ''
+        const slot = (slots.pagination && slots.pagination());
+        const { page, totalPages } = computedPagination.value;
+
+        return slot || vue.h(quasar.QPagination, {
+          class: 'q-icon-picker__pagination',
+          ...props.paginationProps,
+          modelValue: page,
+          max: totalPages,
+          'onUpdate:modelValue': value => {
+            if (props.animated) {
+              if (value > page) {
+                data.direction = direction.NEXT;
+              }
+              else {
+                data.direction = direction.PREV;
+              }
+            }
+            setPagination({ page: value });
+          }
+        })
+      }
+
+      function renderFooter() {
+        if (props.noFooter !== true && props.modelPagination !== void 0) {
+          const slot = (slots.footer && slots.footer());
+
+          return vue.h('div', {
+            class: 'q-icon-picker__footer flex flex-center'
+          }, [
+            slot ? slot(computedPagination.value) : renderPagination()
+          ])
+        }
+      }
+
+      function renderTooltip(name) {
+        if (props.tooltips === true) {
+          return () => vue.h(quasar.QTooltip, {}, () => name)
+        }
+      }
+
+      function renderIcon(icon) {
+        const name = (icon.prefix !== void 0 ? icon.prefix + ' ' + icon.name : icon.name);
+
+        if (slots.icon && slots.icon()) {
+          return slots.icon(name)
+        }
+        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 vue.h(quasar.QBtn, {
+          id: name,
+          unelevated: true,
+          dense: props.dense,
+          noWrap: true,
+          size: size,
+          textColor: textColor,
+          color: color,
+          icon: name,
+          onClick: () => emit('update:model-value', name),
+        }, renderTooltip(name))
+      }
+
+      function renderIcons() {
+        return computedDisplayedIcons.value.map(icon => renderIcon(icon))
+      }
+
+      function renderContainer() {
+        const container = () => vue.h('div', {
+          key: computedPagination.value.page,
+          class: 'q-icon-picker__container col'
+        },  [...renderIcons()]);
+
+        if (props.animated === true) {
+          const transition = 'q-transition--' + (data.direction === 'prev' ? props.transitionPrev : props.transitionNext);
+          return () => vue.h(vue.Transition, {
+            name: transition,
+            appear: true
+          }, container)
+        }
+
+        return container
+      }
+
+
+      function renderScrollArea() {
+        return vue.h(quasar.QScrollArea, {
+          ref: scrollAreaRef,
+          style: {
+            width: data.width + 'px',
+            height: data.height + 'px'
+          }
+        }, renderContainer())
+      }
+
+      function renderBody() {
+        return vue.h('div', {
+          class: 'q-icon-picker__body col column'
+        }, [
+          renderScrollArea(),
+          vue.h(quasar.QResizeObserver, {
+            onResize: (size) => {
+              data.width = size.width;
+              data.height = size.height;
+            }
+          })
+        ])
+      }
+
+      const classes = [
+        'q-icon-picker',
+        'column'
+      ];
+      if (props.color) classes.push('bg-' + props.color);
+      if (props.textColor) classes.push('text-' + props.textColor);
+
+      const picker = vue.h('div', {
+        class: classes.join(' ')
+      },  [
+        renderBody(),
+        renderFooter()
+      ]);
+
+      vue.nextTick(() => {
+        categories();
+        emit('update:tags', data.categories);
+      }).catch(e => console.error(e));
+
+      return picker
+    }
+  }
+});
+
+const version = '2.0.5';
+
+function install (app) {
+  app.component(QIconPicker.name, QIconPicker);
+}
+
+exports.QIconPicker = QIconPicker;
+exports.install = install;
+exports.version = version;

package/dist/index.cjs.min.js

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