@quasar/quasar-ui-qiconpicker 2.0.5 → 2.0.6

package/dist/index.esm.js

@@ -0,0 +1,565 @@
+/*!
+ * @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';
+
+/**
+ * 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 = computed(() => {
+    return fixPagination({
+      ...data.innerPagination,
+      ...props.modelPagination
+    })
+  });
+
+  const computedPagesNumber = 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 = 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 = 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 = computed(() => {
+    return computedLastItemIndex.value === 0
+      ? true
+      : computedPagination.value.page >= computedPagesNumber.value
+  });
+
+
+  // checks if we are on the first page
+  const isFirstPage = computed(() => {
+    return computedPagination.value.page === 1
+  });
+
+  expose({
+    prevPage,
+    nextPage,
+    lastPage,
+    firstPage,
+    isLastPage,
+    isFirstPage
+  });
+}
+
+
+var QIconPicker = defineComponent({
+  name: 'QIconPicker',
+
+  props: {
+    ...useIconPickerProps
+  },
+
+  emits: [
+    'update:model-value',
+    'update:tags',
+    'update:model-pagination'
+  ],
+
+  setup(props, { slots, emit, expose }) {
+    const scrollAreaRef = ref(null);
+    const data = reactive({
+      iconsList: [],
+      innerPagination: {
+        page: 1,
+        itemsPerPage: 0,
+        totalPages: 0
+      },
+      categories: [],
+      width: '100',
+      height: '100',
+      direction: ''
+    });
+
+    // index of first item on a page
+    const computedFirstItemIndex = computed(() => {
+      const { page, itemsPerPage } = computedPagination.value;
+      return (page - 1) * itemsPerPage
+    });
+
+    // index of last item on a page
+    const computedLastItemIndex = 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);
+
+    onMounted(() => {
+      if (props.iconSet) {
+        loadIconSet(props.iconSet);
+      }
+      else if (props.icons !== void 0 && props.icons.length > 0) {
+        data.iconsList = props.icons;
+      }
+      updatePagination();
+    });
+
+
+    watch(() => props.iconSet, (val) => {
+      if (val) {
+        loadIconSet(val);
+        updatePagination();
+        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);
+        }
+      }
+    });
+
+    watch(() => props.icons, (val) => {
+      if (props.icons !== void 0 && props.icons.length > 0) {
+        data.iconsList = props.icons;
+      }
+      updatePagination();
+      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);
+      }
+    });
+
+    watch(() => props.filter, () => {
+      // whenever the filter changes, it resets pagination page to page 1
+      setPagination({ page: 1, totalPages: computedPagesNumber.value });
+      updatePagination();
+    });
+
+    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(() => props.modelPagination, (newVal, oldVal) => {
+        if (!samePagination(oldVal, newVal)) {
+          updatePagination();
+        }
+      });
+    }
+
+    if (props.modelPagination) {
+      watch(() => props.modelPagination.itemsPerPage, () => {
+        updatePagination();
+      });
+
+      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 || h(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 h('div', {
+            class: 'q-icon-picker__footer flex flex-center'
+          }, [
+            slot ? slot(computedPagination.value) : renderPagination()
+          ])
+        }
+      }
+
+      function renderTooltip(name) {
+        if (props.tooltips === true) {
+          return () => h(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 h(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 = () => 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 () => h(Transition, {
+            name: transition,
+            appear: true
+          }, container)
+        }
+
+        return container
+      }
+
+
+      function renderScrollArea() {
+        return h(QScrollArea, {
+          ref: scrollAreaRef,
+          style: {
+            width: data.width + 'px',
+            height: data.height + 'px'
+          }
+        }, renderContainer())
+      }
+
+      function renderBody() {
+        return h('div', {
+          class: 'q-icon-picker__body col column'
+        }, [
+          renderScrollArea(),
+          h(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 = h('div', {
+        class: classes.join(' ')
+      },  [
+        renderBody(),
+        renderFooter()
+      ]);
+
+      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);
+}
+
+var VuePlugin = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  version: version,
+  QIconPicker: QIconPicker,
+  install: install
+});
+
+export { QIconPicker, VuePlugin as default, install, version };

package/dist/index.esm.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.
+ */
+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};