@itfin/components 2.0.45 → 2.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "2.0.45",
+  "version": "2.0.46",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/filter/FilterBadge.vue

@@ -56,6 +56,7 @@
       <div v-else-if="type === 'facets-list'" style="width: 300px;">
         <filter-facets-list
           :title="options.title"
+          :options="options"
           :value="value.value"
           :items="options.items"
           :total="options.total"

package/src/components/filter/FilterFacetsList.vue

@@ -20,25 +20,17 @@
       </div>
     </div>
     <div class="facets-list">
-      <div v-for="(group, g) of groupedList">
-        <div v-if="group.group" class="dropdown-item ps-1 d-flex align-items-center"
-             :class="{'active': isGroupSelected(group.items)}" @click="groupSelected(!isGroupSelected(group.items), group.items)">
-          <span class="facet-name text-dark d-flex align-items-center">
-            <itf-checkbox ungrouped :value="isGroupSelected(group.items)" @input="groupSelected($event, group.items)" class="m-0" />
-            <div class="w-100 text-truncate">{{ group.group }}</div>
-          </span>
-        </div>
-
-        <div v-for="(val, n) of group.items" :key="n" class="dropdown-item ps-1" :class="{'active': val.isSelected, 'ps-4': group.group}" @click="onFilterClick(val)">
-          <span class="facet-name text-dark d-flex align-items-center">
-            <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
-            <div class="w-100 text-truncate">{{ val.label }} <span v-if="val.description" class="small"><br/>{{ val.description }}</span></div>
-          </span>
-          <span v-if="val.count" class="facet-stat">
-            {{ val.count }}
-            <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
-          </span>
-        </div>
+      <div v-for="(val, g) of groupedList" :key="g" :style="{paddingLeft: `${((val.level || 0) + 0.5) * 1}rem`}"
+           class="dropdown-item" :class="{'active': val.isSelected, 'active': isGroupSelected(val)}" @click="onFilterClick(val)">
+        <span class="facet-name text-dark d-flex align-items-center">
+          <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
+          <itf-icon new v-if="val.isGroup && groupIcon" :name="groupIcon" class="me-1" />
+          <div class="w-100 text-truncate">{{ val.label }} <span v-if="val.description" class="small"><br/>{{ val.description }}</span></div>
+        </span>
+        <span v-if="val.count" class="facet-stat">
+          {{ val.count }}
+          <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
+        </span>
       </div>
     </div>
 
@@ -123,8 +115,10 @@
 <script>
 import uniq from 'lodash/uniq';
 import sortBy from 'lodash/sortBy';
+import groupBy from 'lodash/groupBy';
 import { Vue, Prop, Model, Component } from 'vue-property-decorator';
 import itfTextField from '../text-field/TextField.vue';
+import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
 import itfCheckbox from '../checkbox/Checkbox.vue';
 
@@ -132,6 +126,7 @@ export default @Component({
   name: 'FilterFacetsList',
   components: {
     itfCheckbox,
+    itfIcon,
     itfButton,
     itfTextField
   }
@@ -141,6 +136,7 @@ class FilterFacetsList extends Vue {
   @Prop() items;
   @Prop() item;
   @Prop() total;
+  @Prop() options;
   @Prop({ type: Number, default: 5 }) limit;
   @Prop(Boolean) multiple;
   @Prop(Boolean) showAll;
@@ -154,6 +150,44 @@ class FilterFacetsList extends Vue {
     this.showMore = !this.showMore;
   }
 
+  get groupIcon() {
+    return this.options?.groupIcon;
+  }
+
+  get flatList() {
+    return treeToFlat(this.items || []);
+
+    function getIdsDeep(items, mapFunc) {
+      return (items ?? []).reduce((acc, item) => {
+        const id = mapFunc(item);
+        if (id) {
+          acc.push(id);
+        }
+        if (item.items && item.items.length) {
+          acc.push(...getIdsDeep(item.items, mapFunc));
+        }
+        return acc;
+      }, []);
+    }
+    function treeToFlat(items, level = 0) {
+      return (items ?? []).reduce((acc, item) => {
+        acc.push({
+          ...item,
+          level,
+          ids: [item.isGroup ? `g:${item.value}` : item.value].concat(
+            getIdsDeep(item.items, (item) => item.isGroup ? `g:${item.value}` : item.value)
+          )
+            .filter(Boolean),
+        });
+        if (item.items && item.items.length) {
+          // acc.push({ ...item, group: item.label, level });
+          acc.push(...treeToFlat(item.items, level + 1));
+        }
+        return acc;
+      }, []);
+    }
+  }
+
   get hasMore() {
     if (this.showAll) {
       return false;
@@ -162,26 +196,27 @@ class FilterFacetsList extends Vue {
   }
 
   get hasGroups() {
-    const groups = uniq(this.items && this.items.map(item => item.group).filter(Boolean));
+    const groups = uniq(this.flatList && this.flatList.map(item => item.group).filter(Boolean));
     return groups.length > 1
   }
 
-  isGroupSelected(items) {
-    return items.every(item => item.isSelected);
+  isGroupSelected(val) {
+    return (val.ids ?? []).every(id => this.value.includes(`${id}`));
   }
 
-  groupSelected(value, items) {
+  groupSelected(value, ids) {
     let newVal = this.value ? [...Array.isArray(this.value) ? this.value : [this.value]] : [];
+    console.info(value, ids);
     if (value) {
-      items.forEach((item) => {
-        const itemValue = `${item.value}`;
+      ids.forEach((id) => {
+        const itemValue = `${id}`;
         if (!newVal.includes(itemValue)) {
           newVal.push(itemValue);
         }
       });
     } else {
-      items.forEach((item) => {
-        const itemValue = `${item.value}`;
+      ids.forEach((id) => {
+        const itemValue = `${id}`;
         newVal = newVal.filter(val => val !== itemValue);
       });
     }
@@ -189,7 +224,7 @@ class FilterFacetsList extends Vue {
   }
 
   get visibleList() {
-    let list = this.items.map(val => {
+    let list = this.flatList.map(val => {
       const isSelected = this.multiple
         ? Array.isArray(this.value) && this.value.map(String).includes(`${val.value}`)
         : `${this.value}` === `${val.value}`;
@@ -202,22 +237,15 @@ class FilterFacetsList extends Vue {
     if (this.isShowSelected) {
       return list.filter((val) => val.isSelected);
     }
-    return sortBy(list, (item) => this.hasGroups ? item.group || item.label : item.label);
+    return this.hasGroups ? sortBy(list, (item) => item.group || item.label) : list;//sortBy(list, (item) => this.hasGroups ? item.group || item.label : item.label);
   }
 
   get groupedList() {
     if (!this.hasGroups) {
-      return [{ items: this.mappedValues }];
+      return this.mappedValues;
     }
-    const groups = {};
-    this.mappedValues.forEach((item) => {
-      const group = item.group || '';
-      if (!groups[group]) {
-        groups[group] = [];
-      }
-      groups[group].push(item);
-    });
-    return Object.entries(groups).map(([group, items]) => ({ group, items }));
+    const groups = groupBy(this.mappedValues, (item) => item.group || '');
+    return Object.entries(groups).reduce((acc, [group, items]) => [...acc, { label: group, isGroup: true }, ...(items.map(item => ({ ...item, level: 1 })))], []);
   }
 
   get mappedValues() {
@@ -233,6 +261,10 @@ class FilterFacetsList extends Vue {
   }
 
   onFilterClick(val) {
+    if (val.isGroup) {
+      this.groupSelected(!val.isSelected, val.ids);
+      return;
+    }
     const value = `${val.value}`;
     if (!this.multiple) {
       return this.$emit('input', `${this.value}` === value ? null : value);

package/src/components/icon/components/nomi-demo.vue

@@ -0,0 +1,7 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.10922 8.4091C6.78269 7.59278 7.59277 6.7827 8.40909 7.10923L18.3172 11.0725C19.1183 11.3929 19.1648 12.5095 18.393 12.8954L15.0261 14.5789C14.8325 14.6756 14.6756 14.8325 14.5789 15.0261L12.8954 18.393C12.5095 19.1648 11.3929 19.1183 11.0725 18.3172L7.10922 8.4091Z" fill="currentColor"/>
+    <path d="M5.81577 15.4361C5.88458 15.2732 6.11542 15.2732 6.18424 15.4361L6.56237 16.3312C6.58263 16.3792 6.62081 16.4174 6.66877 16.4376L7.56388 16.8158C7.72678 16.8846 7.72678 17.1154 7.56388 17.1842L6.66878 17.5624C6.62081 17.5826 6.58263 17.6208 6.56237 17.6688L6.18424 18.5639C6.11542 18.7268 5.88458 18.7268 5.81576 18.5639L5.43763 17.6688C5.41737 17.6208 5.37919 17.5826 5.33123 17.5624L4.43612 17.1842C4.27322 17.1154 4.27322 16.8846 4.43612 16.8158L5.33123 16.4376C5.37919 16.4174 5.41737 16.3792 5.43763 16.3312L5.81577 15.4361Z" fill="currentColor"/>
+    <path d="M17.3139 4.47174C17.3805 4.30291 17.6195 4.30291 17.6861 4.47174L18.1752 5.71209C18.1956 5.76363 18.2364 5.80443 18.2879 5.82476L19.5283 6.31395C19.6971 6.38053 19.6971 6.61947 19.5283 6.68605L18.2879 7.17524C18.2364 7.19557 18.1956 7.23637 18.1752 7.28791L17.6861 8.52826C17.6195 8.69709 17.3805 8.69709 17.3139 8.52826L16.8248 7.28791C16.8044 7.23637 16.7636 7.19557 16.7121 7.17524L15.4717 6.68605C15.3029 6.61947 15.3029 6.38053 15.4717 6.31395L16.7121 5.82476C16.7636 5.80443 16.8044 5.76363 16.8248 5.71209L17.3139 4.47174Z" fill="currentColor"/>
+    <path d="M12.3158 4.43612C12.3846 4.27322 12.6154 4.27322 12.6842 4.43612L12.9139 4.97972C12.9341 5.02769 12.9723 5.06586 13.0203 5.08612L13.5639 5.31576C13.7268 5.38458 13.7268 5.61542 13.5639 5.68424L13.0203 5.91388C12.9723 5.93414 12.9341 5.97231 12.9139 6.02028L12.6842 6.56388C12.6154 6.72678 12.3846 6.72678 12.3158 6.56388L12.0861 6.02028C12.0659 5.97231 12.0277 5.93414 11.9797 5.91388L11.4361 5.68424C11.2732 5.61542 11.2732 5.38458 11.4361 5.31576L11.9797 5.08612C12.0277 5.06586 12.0659 5.02769 12.0861 4.97972L12.3158 4.43612Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/icons.js

@@ -1,534 +1,535 @@
 export default {
-  'align_vertical': () => import('./components/align_vertical.vue'),
   'align_horizontal': () => import('./components/align_horizontal.vue'),
+  'angle': () => import('./components/angle.vue'),
   'airplay': () => import('./components/airplay.vue'),
   'alarm_clock': () => import('./components/alarm_clock.vue'),
-  'arrow_down': () => import('./components/arrow_down.vue'),
-  'arrow_bottom_right': () => import('./components/arrow_bottom_right.vue'),
-  'arrow_bottom_left': () => import('./components/arrow_bottom_left.vue'),
-  'arrow_left_circle': () => import('./components/arrow_left_circle.vue'),
-  'arrow_down_circle': () => import('./components/arrow_down_circle.vue'),
   'archive': () => import('./components/archive.vue'),
+  'arrow_bottom_right': () => import('./components/arrow_bottom_right.vue'),
+  'arrow_down': () => import('./components/arrow_down.vue'),
   'arrow_left': () => import('./components/arrow_left.vue'),
-  'arrow_top_right': () => import('./components/arrow_top_right.vue'),
+  'align_vertical': () => import('./components/align_vertical.vue'),
+  'arrow_down_circle': () => import('./components/arrow_down_circle.vue'),
+  'arrow_bottom_left': () => import('./components/arrow_bottom_left.vue'),
+  'arrow_right': () => import('./components/arrow_right.vue'),
   'arrow_top_left': () => import('./components/arrow_top_left.vue'),
-  'arrow_up_circle': () => import('./components/arrow_up_circle.vue'),
+  'arrow_left_circle': () => import('./components/arrow_left_circle.vue'),
   'arrow_right_circle': () => import('./components/arrow_right_circle.vue'),
-  'backspace': () => import('./components/backspace.vue'),
-  'audio_wave': () => import('./components/audio_wave.vue'),
+  'arrow_up_circle': () => import('./components/arrow_up_circle.vue'),
+  'backward': () => import('./components/backward.vue'),
   'arrow_up': () => import('./components/arrow_up.vue'),
-  'angle': () => import('./components/angle.vue'),
   'backward10': () => import('./components/backward10.vue'),
-  'backward': () => import('./components/backward.vue'),
-  'bag': () => import('./components/bag.vue'),
-  'battery_empty': () => import('./components/battery_empty.vue'),
   'battery_75': () => import('./components/battery_75.vue'),
-  'battery_full': () => import('./components/battery_full.vue'),
-  'arrow_right': () => import('./components/arrow_right.vue'),
-  'battery_half': () => import('./components/battery_half.vue'),
+  'backspace': () => import('./components/backspace.vue'),
   'battery_charging': () => import('./components/battery_charging.vue'),
-  'bell_disabled': () => import('./components/bell_disabled.vue'),
+  'arrow_top_right': () => import('./components/arrow_top_right.vue'),
+  'audio_wave': () => import('./components/audio_wave.vue'),
   'battery_low': () => import('./components/battery_low.vue'),
   'bell': () => import('./components/bell.vue'),
-  'bell_snooze': () => import('./components/bell_snooze.vue'),
-  'bell_ringing': () => import('./components/bell_ringing.vue'),
   'blocked': () => import('./components/blocked.vue'),
+  'battery_full': () => import('./components/battery_full.vue'),
+  'battery_half': () => import('./components/battery_half.vue'),
+  'battery_empty': () => import('./components/battery_empty.vue'),
+  'bell_disabled': () => import('./components/bell_disabled.vue'),
+  'bell_ringing': () => import('./components/bell_ringing.vue'),
+  'bag': () => import('./components/bag.vue'),
   'bluetooth': () => import('./components/bluetooth.vue'),
   'book_closed': () => import('./components/book_closed.vue'),
-  'box': () => import('./components/box.vue'),
-  'bookmark_book': () => import('./components/bookmark_book.vue'),
   'bookmark': () => import('./components/bookmark.vue'),
-  'box_open': () => import('./components/box_open.vue'),
   'book': () => import('./components/book.vue'),
-  'book_text': () => import('./components/book_text.vue'),
-  'box_download': () => import('./components/box_download.vue'),
-  'branch': () => import('./components/branch.vue'),
+  'bell_snooze': () => import('./components/bell_snooze.vue'),
+  'bookmark_book': () => import('./components/bookmark_book.vue'),
   'browser_alt': () => import('./components/browser_alt.vue'),
-  'browser': () => import('./components/browser.vue'),
+  'box_open': () => import('./components/box_open.vue'),
+  'box_download': () => import('./components/box_download.vue'),
+  'book_text': () => import('./components/book_text.vue'),
+  'button_add': () => import('./components/button_add.vue'),
   'briefcase': () => import('./components/briefcase.vue'),
+  'box': () => import('./components/box.vue'),
+  'button_minus': () => import('./components/button_minus.vue'),
   'calendar': () => import('./components/calendar.vue'),
-  'calculator': () => import('./components/calculator.vue'),
-  'button_add': () => import('./components/button_add.vue'),
   'calendar_date': () => import('./components/calendar_date.vue'),
-  'button_minus': () => import('./components/button_minus.vue'),
-  'calendar_last_day': () => import('./components/calendar_last_day.vue'),
-  'calendar_day': () => import('./components/calendar_day.vue'),
+  'browser': () => import('./components/browser.vue'),
+  'branch': () => import('./components/branch.vue'),
   'calendar_days': () => import('./components/calendar_days.vue'),
-  'calendar_add': () => import('./components/calendar_add.vue'),
-  'calendar_month': () => import('./components/calendar_month.vue'),
+  'calendar_last_day': () => import('./components/calendar_last_day.vue'),
   'calendar_remove': () => import('./components/calendar_remove.vue'),
+  'calculator': () => import('./components/calculator.vue'),
+  'calendar_add': () => import('./components/calendar_add.vue'),
+  'camera_noflash_alt': () => import('./components/camera_noflash_alt.vue'),
+  'calendar_day': () => import('./components/calendar_day.vue'),
   'calendar_move': () => import('./components/calendar_move.vue'),
-  'calendar_split': () => import('./components/calendar_split.vue'),
+  'calendar_month': () => import('./components/calendar_month.vue'),
   'camera': () => import('./components/camera.vue'),
+  'capture': () => import('./components/capture.vue'),
+  'calendar_split': () => import('./components/calendar_split.vue'),
+  'card_view': () => import('./components/card_view.vue'),
   'calendar_week': () => import('./components/calendar_week.vue'),
-  'card_timeline': () => import('./components/card_timeline.vue'),
   'camera_noflash': () => import('./components/camera_noflash.vue'),
-  'camera_noflash_alt': () => import('./components/camera_noflash_alt.vue'),
-  'capture': () => import('./components/capture.vue'),
+  'camera_alt': () => import('./components/camera_alt.vue'),
   'cart': () => import('./components/cart.vue'),
-  'card_view': () => import('./components/card_view.vue'),
-  'cast': () => import('./components/cast.vue'),
-  'check_circle_outside': () => import('./components/check_circle_outside.vue'),
+  'checkbox_checked': () => import('./components/checkbox_checked.vue'),
   'carousel': () => import('./components/carousel.vue'),
-  'check_circle': () => import('./components/check_circle.vue'),
+  'chain': () => import('./components/chain.vue'),
+  'cast': () => import('./components/cast.vue'),
   'check': () => import('./components/check.vue'),
-  'checkbox_checked': () => import('./components/checkbox_checked.vue'),
+  'check_circle_outside': () => import('./components/check_circle_outside.vue'),
+  'checkbox_empty': () => import('./components/checkbox_empty.vue'),
   'chevron_down': () => import('./components/chevron_down.vue'),
-  'chat_add': () => import('./components/chat_add.vue'),
-  'chevron_down_circle': () => import('./components/chevron_down_circle.vue'),
-  'chain': () => import('./components/chain.vue'),
-  'chevron_left': () => import('./components/chevron_left.vue'),
-  'camera_alt': () => import('./components/camera_alt.vue'),
-  'chevron_left_double': () => import('./components/chevron_left_double.vue'),
   'chevron_close': () => import('./components/chevron_close.vue'),
-  'chevron_open': () => import('./components/chevron_open.vue'),
-  'chevron_left_circle': () => import('./components/chevron_left_circle.vue'),
   'chevron_down_double': () => import('./components/chevron_down_double.vue'),
+  'check_circle': () => import('./components/check_circle.vue'),
+  'chevron_left_circle': () => import('./components/chevron_left_circle.vue'),
+  'chevron_left': () => import('./components/chevron_left.vue'),
+  'chevron_open': () => import('./components/chevron_open.vue'),
+  'chat_add': () => import('./components/chat_add.vue'),
+  'card_timeline': () => import('./components/card_timeline.vue'),
+  'chevron_down_circle': () => import('./components/chevron_down_circle.vue'),
+  'chevron_right': () => import('./components/chevron_right.vue'),
   'chevron_right_double': () => import('./components/chevron_right_double.vue'),
-  'circle': () => import('./components/circle.vue'),
+  'chevron_right_circle': () => import('./components/chevron_right_circle.vue'),
   'chevron_up': () => import('./components/chevron_up.vue'),
-  'chevron_right': () => import('./components/chevron_right.vue'),
-  'circle_menu': () => import('./components/circle_menu.vue'),
-  'checkbox_empty': () => import('./components/checkbox_empty.vue'),
-  'circle_split': () => import('./components/circle_split.vue'),
-  'chevron_up_double': () => import('./components/chevron_up_double.vue'),
-  'chevron_up_circle': () => import('./components/chevron_up_circle.vue'),
-  'clipboard_notes': () => import('./components/clipboard_notes.vue'),
-  'clipboard_cross': () => import('./components/clipboard_cross.vue'),
   'clipboard': () => import('./components/clipboard.vue'),
-  'clock': () => import('./components/clock.vue'),
   'clipboard_add': () => import('./components/clipboard_add.vue'),
+  'chevron_up_double': () => import('./components/chevron_up_double.vue'),
+  'circle_menu': () => import('./components/circle_menu.vue'),
   'clipboard_check': () => import('./components/clipboard_check.vue'),
-  'chevron_right_circle': () => import('./components/chevron_right_circle.vue'),
-  'cloud': () => import('./components/cloud.vue'),
+  'clipboard_copy': () => import('./components/clipboard_copy.vue'),
+  'clock': () => import('./components/clock.vue'),
+  'clipboard_cross': () => import('./components/clipboard_cross.vue'),
+  'chevron_left_double': () => import('./components/chevron_left_double.vue'),
   'close': () => import('./components/close.vue'),
-  'code': () => import('./components/code.vue'),
+  'cloud': () => import('./components/cloud.vue'),
+  'chevron_up_circle': () => import('./components/chevron_up_circle.vue'),
+  'circle': () => import('./components/circle.vue'),
+  'circle_split': () => import('./components/circle_split.vue'),
   'cloud_download_alt': () => import('./components/cloud_download_alt.vue'),
-  'clipboard_copy': () => import('./components/clipboard_copy.vue'),
+  'clipboard_remove': () => import('./components/clipboard_remove.vue'),
+  'cloud_upload': () => import('./components/cloud_upload.vue'),
+  'cloud_disconnect': () => import('./components/cloud_disconnect.vue'),
   'cloud_upload_alt': () => import('./components/cloud_upload_alt.vue'),
+  'cloud_download': () => import('./components/cloud_download.vue'),
+  'clipboard_notes': () => import('./components/clipboard_notes.vue'),
+  'code': () => import('./components/code.vue'),
   'coffee': () => import('./components/coffee.vue'),
-  'cloud_disconnect': () => import('./components/cloud_disconnect.vue'),
-  'component_add': () => import('./components/component_add.vue'),
-  'compass': () => import('./components/compass.vue'),
   'contacts': () => import('./components/contacts.vue'),
-  'cloud_download': () => import('./components/cloud_download.vue'),
   'credit_card': () => import('./components/credit_card.vue'),
-  'coins': () => import('./components/coins.vue'),
-  'connect': () => import('./components/connect.vue'),
   'coin': () => import('./components/coin.vue'),
+  'contract': () => import('./components/contract.vue'),
+  'component_add': () => import('./components/component_add.vue'),
   'crop': () => import('./components/crop.vue'),
-  'create': () => import('./components/create.vue'),
   'cross': () => import('./components/cross.vue'),
-  'cube': () => import('./components/cube.vue'),
-  'cloud_upload': () => import('./components/cloud_upload.vue'),
-  'contract': () => import('./components/contract.vue'),
-  'clipboard_remove': () => import('./components/clipboard_remove.vue'),
-  'cylinder': () => import('./components/cylinder.vue'),
+  'coins': () => import('./components/coins.vue'),
+  'create': () => import('./components/create.vue'),
+  'crosshair': () => import('./components/crosshair.vue'),
+  'connect': () => import('./components/connect.vue'),
+  'compass': () => import('./components/compass.vue'),
   'cross_circle': () => import('./components/cross_circle.vue'),
   'database': () => import('./components/database.vue'),
+  'cylinder': () => import('./components/cylinder.vue'),
   'display': () => import('./components/display.vue'),
-  'diamond': () => import('./components/diamond.vue'),
-  'crosshair': () => import('./components/crosshair.vue'),
-  'directions': () => import('./components/directions.vue'),
-  'disc': () => import('./components/disc.vue'),
   'document': () => import('./components/document.vue'),
+  'diamond': () => import('./components/diamond.vue'),
+  'display_alt': () => import('./components/display_alt.vue'),
+  'document_stack': () => import('./components/document_stack.vue'),
   'document_justified': () => import('./components/document_justified.vue'),
-  'document_list': () => import('./components/document_list.vue'),
-  'download': () => import('./components/download.vue'),
+  'disc': () => import('./components/disc.vue'),
+  'document_words': () => import('./components/document_words.vue'),
+  'directions': () => import('./components/directions.vue'),
   'door': () => import('./components/door.vue'),
+  'drag_vertical': () => import('./components/drag_vertical.vue'),
+  'cube': () => import('./components/cube.vue'),
+  'download': () => import('./components/download.vue'),
+  'door_alt': () => import('./components/door_alt.vue'),
   'downward': () => import('./components/downward.vue'),
+  'document_list': () => import('./components/document_list.vue'),
   'download_alt': () => import('./components/download_alt.vue'),
-  'document_stack': () => import('./components/document_stack.vue'),
-  'door_alt': () => import('./components/door_alt.vue'),
-  'duplicate': () => import('./components/duplicate.vue'),
-  'document_words': () => import('./components/document_words.vue'),
-  'drag_circle': () => import('./components/drag_circle.vue'),
-  'drag': () => import('./components/drag.vue'),
   'exit_left': () => import('./components/exit_left.vue'),
-  'drag_vertical': () => import('./components/drag_vertical.vue'),
-  'display_alt': () => import('./components/display_alt.vue'),
-  'enter': () => import('./components/enter.vue'),
+  'duplicate_alt': () => import('./components/duplicate_alt.vue'),
   'enter_alt': () => import('./components/enter_alt.vue'),
+  'duplicate': () => import('./components/duplicate.vue'),
+  'enter': () => import('./components/enter.vue'),
+  'drag': () => import('./components/drag.vue'),
+  'expand_height': () => import('./components/expand_height.vue'),
+  'exit_right': () => import('./components/exit_right.vue'),
   'episodes': () => import('./components/episodes.vue'),
+  'drag_circle': () => import('./components/drag_circle.vue'),
   'external': () => import('./components/external.vue'),
+  'face_sad': () => import('./components/face_sad.vue'),
   'eye': () => import('./components/eye.vue'),
-  'exit_right': () => import('./components/exit_right.vue'),
-  'expand_height': () => import('./components/expand_height.vue'),
   'expand_width': () => import('./components/expand_width.vue'),
-  'face_delighted': () => import('./components/face_delighted.vue'),
-  'expand': () => import('./components/expand.vue'),
-  'eye_no': () => import('./components/eye_no.vue'),
-  'face_neutral': () => import('./components/face_neutral.vue'),
   'eye_closed': () => import('./components/eye_closed.vue'),
+  'expand': () => import('./components/expand.vue'),
+  'face_happy': () => import('./components/face_happy.vue'),
+  'face_delighted': () => import('./components/face_delighted.vue'),
   'fi_fingerprint': () => import('./components/fi_fingerprint.vue'),
-  'face_sad': () => import('./components/face_sad.vue'),
+  'face_neutral': () => import('./components/face_neutral.vue'),
+  'eye_no': () => import('./components/eye_no.vue'),
   'file_download': () => import('./components/file_download.vue'),
-  'film': () => import('./components/film.vue'),
-  'duplicate_alt': () => import('./components/duplicate_alt.vue'),
-  'files_history': () => import('./components/files_history.vue'),
   'files_multi': () => import('./components/files_multi.vue'),
-  'face_happy': () => import('./components/face_happy.vue'),
-  'filter': () => import('./components/filter.vue'),
-  'files_stack': () => import('./components/files_stack.vue'),
   'filter_completed': () => import('./components/filter_completed.vue'),
-  'filter_all': () => import('./components/filter_all.vue'),
-  'filter_circle': () => import('./components/filter_circle.vue'),
+  'files_history': () => import('./components/files_history.vue'),
+  'files_stack': () => import('./components/files_stack.vue'),
   'file_upload': () => import('./components/file_upload.vue'),
-  'flag': () => import('./components/flag.vue'),
+  'filter_all': () => import('./components/filter_all.vue'),
   'filter_not_started': () => import('./components/filter_not_started.vue'),
   'filter_overdue': () => import('./components/filter_overdue.vue'),
-  'flame': () => import('./components/flame.vue'),
-  'flip_view': () => import('./components/flip_view.vue'),
+  'filter': () => import('./components/filter.vue'),
+  'film': () => import('./components/film.vue'),
+  'filter_circle': () => import('./components/filter_circle.vue'),
   'filtering': () => import('./components/filtering.vue'),
-  'fingerprint': () => import('./components/fingerprint.vue'),
-  'flame_alt': () => import('./components/flame_alt.vue'),
-  'filter_ongoing': () => import('./components/filter_ongoing.vue'),
-  'fork_git': () => import('./components/fork_git.vue'),
-  'folder_closed': () => import('./components/folder_closed.vue'),
+  'flame': () => import('./components/flame.vue'),
+  'filter_single': () => import('./components/filter_single.vue'),
   'floppy': () => import('./components/floppy.vue'),
+  'flag': () => import('./components/flag.vue'),
   'folder_add': () => import('./components/folder_add.vue'),
-  'forward10': () => import('./components/forward10.vue'),
+  'folder_open': () => import('./components/folder_open.vue'),
+  'fingerprint': () => import('./components/fingerprint.vue'),
+  'folder_minus': () => import('./components/folder_minus.vue'),
+  'filter_ongoing': () => import('./components/filter_ongoing.vue'),
+  'flip_view': () => import('./components/flip_view.vue'),
+  'flame_alt': () => import('./components/flame_alt.vue'),
   'frame': () => import('./components/frame.vue'),
+  'funnel': () => import('./components/funnel.vue'),
+  'forward': () => import('./components/forward.vue'),
+  'gauge': () => import('./components/gauge.vue'),
+  'folder_closed': () => import('./components/folder_closed.vue'),
   'forward_alt': () => import('./components/forward_alt.vue'),
-  'folder_open': () => import('./components/folder_open.vue'),
-  'filter_single': () => import('./components/filter_single.vue'),
   'fullscreen': () => import('./components/fullscreen.vue'),
-  'gauge': () => import('./components/gauge.vue'),
-  'gps': () => import('./components/gps.vue'),
+  'fork_git': () => import('./components/fork_git.vue'),
   'gift': () => import('./components/gift.vue'),
-  'globe': () => import('./components/globe.vue'),
-  'folder_minus': () => import('./components/folder_minus.vue'),
-  'forward': () => import('./components/forward.vue'),
-  'graph_bar': () => import('./components/graph_bar.vue'),
   'grab': () => import('./components/grab.vue'),
-  'funnel': () => import('./components/funnel.vue'),
-  'grid': () => import('./components/grid.vue'),
+  'globe': () => import('./components/globe.vue'),
+  'grid_small': () => import('./components/grid_small.vue'),
   'graph_box': () => import('./components/graph_box.vue'),
+  'graph_bar': () => import('./components/graph_bar.vue'),
   'graph_increase': () => import('./components/graph_increase.vue'),
-  'grid_squares': () => import('./components/grid_squares.vue'),
-  'grid_squares_add': () => import('./components/grid_squares_add.vue'),
-  'grid_small': () => import('./components/grid_small.vue'),
   'grid_circles': () => import('./components/grid_circles.vue'),
   'grid_circles_add': () => import('./components/grid_circles_add.vue'),
+  'grid': () => import('./components/grid.vue'),
+  'grid_squares_add': () => import('./components/grid_squares_add.vue'),
   'harddrive': () => import('./components/harddrive.vue'),
-  'hash': () => import('./components/hash.vue'),
-  'heart_rate': () => import('./components/heart_rate.vue'),
-  'hierarchy': () => import('./components/hierarchy.vue'),
-  'heart_remove': () => import('./components/heart_remove.vue'),
   'heart': () => import('./components/heart.vue'),
-  'inbox': () => import('./components/inbox.vue'),
-  'home_door': () => import('./components/home_door.vue'),
   'hand': () => import('./components/hand.vue'),
+  'hash': () => import('./components/hash.vue'),
+  'forward10': () => import('./components/forward10.vue'),
+  'heart_remove': () => import('./components/heart_remove.vue'),
+  'heart_rate': () => import('./components/heart_rate.vue'),
+  'grid_squares': () => import('./components/grid_squares.vue'),
   'home': () => import('./components/home.vue'),
-  'home_alt': () => import('./components/home_alt.vue'),
+  'hierarchy': () => import('./components/hierarchy.vue'),
+  'home_door': () => import('./components/home_door.vue'),
   'home_check': () => import('./components/home_check.vue'),
-  'import': () => import('./components/import.vue'),
-  'jump_backward': () => import('./components/jump_backward.vue'),
-  'iphone_landscape': () => import('./components/iphone_landscape.vue'),
-  'jump_forward': () => import('./components/jump_forward.vue'),
-  'iphone_portrait': () => import('./components/iphone_portrait.vue'),
   'info_circle': () => import('./components/info_circle.vue'),
-  'height': () => import('./components/height.vue'),
   'inbox_alt': () => import('./components/inbox_alt.vue'),
-  'lightbulb': () => import('./components/lightbulb.vue'),
-  'laptop': () => import('./components/laptop.vue'),
-  'jump_right': () => import('./components/jump_right.vue'),
+  'iphone_landscape': () => import('./components/iphone_landscape.vue'),
+  'iphone_portrait': () => import('./components/iphone_portrait.vue'),
+  'gps': () => import('./components/gps.vue'),
+  'import': () => import('./components/import.vue'),
+  'home_alt': () => import('./components/home_alt.vue'),
+  'inbox': () => import('./components/inbox.vue'),
+  'jump_backward': () => import('./components/jump_backward.vue'),
+  'keyboard': () => import('./components/keyboard.vue'),
   'jump_left': () => import('./components/jump_left.vue'),
   'lightning': () => import('./components/lightning.vue'),
-  'lightbulb_on': () => import('./components/lightbulb_on.vue'),
-  'link': () => import('./components/link.vue'),
-  'lineweight': () => import('./components/lineweight.vue'),
-  'keyboard': () => import('./components/keyboard.vue'),
+  'jump_right': () => import('./components/jump_right.vue'),
+  'laptop': () => import('./components/laptop.vue'),
   'lightning_alt': () => import('./components/lightning_alt.vue'),
-  'link_broken': () => import('./components/link_broken.vue'),
+  'jump_forward': () => import('./components/jump_forward.vue'),
+  'lineweight': () => import('./components/lineweight.vue'),
+  'lightbulb_on': () => import('./components/lightbulb_on.vue'),
+  'link_vertical': () => import('./components/link_vertical.vue'),
   'link_alt': () => import('./components/link_alt.vue'),
+  'list_numbered': () => import('./components/list_numbered.vue'),
   'link_horizontal': () => import('./components/link_horizontal.vue'),
   'list': () => import('./components/list.vue'),
-  'list_numbered': () => import('./components/list_numbered.vue'),
-  'loader': () => import('./components/loader.vue'),
+  'lightbulb': () => import('./components/lightbulb.vue'),
   'list_add': () => import('./components/list_add.vue'),
   'lock': () => import('./components/lock.vue'),
-  'link_vertical': () => import('./components/link_vertical.vue'),
-  'mail_minus': () => import('./components/mail_minus.vue'),
-  'lock_open': () => import('./components/lock_open.vue'),
-  'mail_delete': () => import('./components/mail_delete.vue'),
+  'link_broken': () => import('./components/link_broken.vue'),
+  'link': () => import('./components/link.vue'),
+  'loader': () => import('./components/loader.vue'),
   'mail_add': () => import('./components/mail_add.vue'),
-  'marquee': () => import('./components/marquee.vue'),
-  'mail_new': () => import('./components/mail_new.vue'),
-  'mail_open': () => import('./components/mail_open.vue'),
-  'message': () => import('./components/message.vue'),
+  'lock_open': () => import('./components/lock_open.vue'),
   'location': () => import('./components/location.vue'),
-  'menu_horizontal': () => import('./components/menu_horizontal.vue'),
+  'mail_new': () => import('./components/mail_new.vue'),
+  'height': () => import('./components/height.vue'),
   'mail': () => import('./components/mail.vue'),
   'menu_hamburger': () => import('./components/menu_hamburger.vue'),
-  'midpoint': () => import('./components/midpoint.vue'),
-  'microphone': () => import('./components/microphone.vue'),
-  'mini_player': () => import('./components/mini_player.vue'),
-  'mail_remove': () => import('./components/mail_remove.vue'),
+  'mail_minus': () => import('./components/mail_minus.vue'),
+  'mail_open': () => import('./components/mail_open.vue'),
+  'marquee': () => import('./components/marquee.vue'),
+  'maximise': () => import('./components/maximise.vue'),
   'menu_vertical': () => import('./components/menu_vertical.vue'),
+  'message': () => import('./components/message.vue'),
+  'mail_delete': () => import('./components/mail_delete.vue'),
+  'menu_horizontal': () => import('./components/menu_horizontal.vue'),
   'microphone_muted': () => import('./components/microphone_muted.vue'),
   'minimise': () => import('./components/minimise.vue'),
-  'move': () => import('./components/move.vue'),
-  'maximise': () => import('./components/maximise.vue'),
-  'microphone_disabled': () => import('./components/microphone_disabled.vue'),
-  'notebook': () => import('./components/notebook.vue'),
-  'minus': () => import('./components/minus.vue'),
+  'mail_remove': () => import('./components/mail_remove.vue'),
   'message_writing': () => import('./components/message_writing.vue'),
+  'microphone_disabled': () => import('./components/microphone_disabled.vue'),
+  'microphone': () => import('./components/microphone.vue'),
+  'minus_circle': () => import('./components/minus_circle.vue'),
   'moon': () => import('./components/moon.vue'),
-  'pages': () => import('./components/pages.vue'),
+  'minus': () => import('./components/minus.vue'),
+  'midpoint': () => import('./components/midpoint.vue'),
+  'no_sign': () => import('./components/no_sign.vue'),
+  'move': () => import('./components/move.vue'),
+  'mini_player': () => import('./components/mini_player.vue'),
+  'newspaper': () => import('./components/newspaper.vue'),
   'nut': () => import('./components/nut.vue'),
-  'notification': () => import('./components/notification.vue'),
-  'minus_circle': () => import('./components/minus_circle.vue'),
   'optional': () => import('./components/optional.vue'),
   'panel_bottom': () => import('./components/panel_bottom.vue'),
+  'notebook': () => import('./components/notebook.vue'),
   'panel_right': () => import('./components/panel_right.vue'),
+  'pages': () => import('./components/pages.vue'),
   'paper': () => import('./components/paper.vue'),
-  'panel_left': () => import('./components/panel_left.vue'),
   'panel_top': () => import('./components/panel_top.vue'),
+  'panel_left': () => import('./components/panel_left.vue'),
+  'paper_folded': () => import('./components/paper_folded.vue'),
   'panel_sectioned': () => import('./components/panel_sectioned.vue'),
+  'paper_plane': () => import('./components/paper_plane.vue'),
+  'paragraph_left': () => import('./components/paragraph_left.vue'),
   'paper_plane_alt': () => import('./components/paper_plane_alt.vue'),
-  'paper_folded': () => import('./components/paper_folded.vue'),
-  'panel_center': () => import('./components/panel_center.vue'),
-  'newspaper': () => import('./components/newspaper.vue'),
-  'no_sign': () => import('./components/no_sign.vue'),
-  'paragraph_center': () => import('./components/paragraph_center.vue'),
   'paragraph_right': () => import('./components/paragraph_right.vue'),
   'paragraph_end': () => import('./components/paragraph_end.vue'),
-  'paper_plane': () => import('./components/paper_plane.vue'),
-  'phone_landscape': () => import('./components/phone_landscape.vue'),
-  'paragraph_left': () => import('./components/paragraph_left.vue'),
+  'paperclip': () => import('./components/paperclip.vue'),
   'picture': () => import('./components/picture.vue'),
+  'paragraph_center': () => import('./components/paragraph_center.vue'),
   'phone_portrait': () => import('./components/phone_portrait.vue'),
-  'pen': () => import('./components/pen.vue'),
+  'paragraph_start': () => import('./components/paragraph_start.vue'),
   'pause': () => import('./components/pause.vue'),
-  'pie_third': () => import('./components/pie_third.vue'),
+  'notification': () => import('./components/notification.vue'),
+  'panel_center': () => import('./components/panel_center.vue'),
+  'phone_landscape': () => import('./components/phone_landscape.vue'),
+  'play': () => import('./components/play.vue'),
+  'pen': () => import('./components/pen.vue'),
   'pie_quarter': () => import('./components/pie_quarter.vue'),
-  'pie_half': () => import('./components/pie_half.vue'),
-  'plus': () => import('./components/plus.vue'),
   'project_nonprofit': () => import('./components/project_nonprofit.vue'),
-  'paperclip': () => import('./components/paperclip.vue'),
-  'plus_circle': () => import('./components/plus_circle.vue'),
   'play_button': () => import('./components/play_button.vue'),
-  'projector': () => import('./components/projector.vue'),
+  'plus': () => import('./components/plus.vue'),
+  'pie_third': () => import('./components/pie_third.vue'),
+  'pie_half': () => import('./components/pie_half.vue'),
   'postcard': () => import('./components/postcard.vue'),
   'project_tnm': () => import('./components/project_tnm.vue'),
-  'pull_left': () => import('./components/pull_left.vue'),
   'pull_down': () => import('./components/pull_down.vue'),
-  'pull_up': () => import('./components/pull_up.vue'),
-  'push_down': () => import('./components/push_down.vue'),
-  'push_up': () => import('./components/push_up.vue'),
-  'printer': () => import('./components/printer.vue'),
   'push_left': () => import('./components/push_left.vue'),
-  'radio_on': () => import('./components/radio_on.vue'),
   'pull_right': () => import('./components/pull_right.vue'),
-  'replicate_alt': () => import('./components/replicate_alt.vue'),
-  'play': () => import('./components/play.vue'),
-  'question_circle': () => import('./components/question_circle.vue'),
-  'replicate': () => import('./components/replicate.vue'),
-  'refresh_alt': () => import('./components/refresh_alt.vue'),
-  'paragraph_start': () => import('./components/paragraph_start.vue'),
-  'receipt': () => import('./components/receipt.vue'),
+  'pull_left': () => import('./components/pull_left.vue'),
   'project_fixed': () => import('./components/project_fixed.vue'),
-  'reset': () => import('./components/reset.vue'),
+  'pull_up': () => import('./components/pull_up.vue'),
+  'push_right': () => import('./components/push_right.vue'),
+  'plus_circle': () => import('./components/plus_circle.vue'),
+  'projector': () => import('./components/projector.vue'),
+  'printer': () => import('./components/printer.vue'),
+  'question_circle': () => import('./components/question_circle.vue'),
+  'radio_on': () => import('./components/radio_on.vue'),
   'redo': () => import('./components/redo.vue'),
+  'receipt': () => import('./components/receipt.vue'),
   'record': () => import('./components/record.vue'),
-  'reset_hard': () => import('./components/reset_hard.vue'),
-  'required': () => import('./components/required.vue'),
+  'refresh_alt': () => import('./components/refresh_alt.vue'),
+  'replicate_alt': () => import('./components/replicate_alt.vue'),
   'refresh': () => import('./components/refresh.vue'),
-  'push_right': () => import('./components/push_right.vue'),
+  'reset': () => import('./components/reset.vue'),
+  'replicate': () => import('./components/replicate.vue'),
+  'push_up': () => import('./components/push_up.vue'),
   'reset_alt': () => import('./components/reset_alt.vue'),
-  'reverse_alt': () => import('./components/reverse_alt.vue'),
-  'reuse': () => import('./components/reuse.vue'),
-  'reset_forward': () => import('./components/reset_forward.vue'),
   'retweet': () => import('./components/retweet.vue'),
-  'reverse': () => import('./components/reverse.vue'),
-  'rocket': () => import('./components/rocket.vue'),
-  'ruler': () => import('./components/ruler.vue'),
-  'search': () => import('./components/search.vue'),
+  'required': () => import('./components/required.vue'),
+  'reset_hard': () => import('./components/reset_hard.vue'),
   'reset_temporary': () => import('./components/reset_temporary.vue'),
+  'reset_forward': () => import('./components/reset_forward.vue'),
+  'revert': () => import('./components/revert.vue'),
   'scale': () => import('./components/scale.vue'),
-  'side_menu': () => import('./components/side_menu.vue'),
-  'share_alt': () => import('./components/share_alt.vue'),
+  'reverse_alt': () => import('./components/reverse_alt.vue'),
+  'ruler': () => import('./components/ruler.vue'),
+  'search': () => import('./components/search.vue'),
+  'rocket': () => import('./components/rocket.vue'),
   'server': () => import('./components/server.vue'),
-  'slash_backward': () => import('./components/slash_backward.vue'),
-  'sliders': () => import('./components/sliders.vue'),
-  'revert': () => import('./components/revert.vue'),
-  'slash_forward': () => import('./components/slash_forward.vue'),
-  'sort': () => import('./components/sort.vue'),
-  'scalpel': () => import('./components/scalpel.vue'),
   'scale_extend': () => import('./components/scale_extend.vue'),
-  'settings': () => import('./components/settings.vue'),
   'scale_contract': () => import('./components/scale_contract.vue'),
+  'settings': () => import('./components/settings.vue'),
+  'reverse': () => import('./components/reverse.vue'),
+  'reuse': () => import('./components/reuse.vue'),
+  'share_alt': () => import('./components/share_alt.vue'),
   'shuffle': () => import('./components/shuffle.vue'),
-  'split_three': () => import('./components/split_three.vue'),
-  'speaker': () => import('./components/speaker.vue'),
-  'speech_bubble': () => import('./components/speech_bubble.vue'),
+  'sliders': () => import('./components/sliders.vue'),
+  'sort': () => import('./components/sort.vue'),
+  'push_down': () => import('./components/push_down.vue'),
+  'slash_backward': () => import('./components/slash_backward.vue'),
+  'side_menu': () => import('./components/side_menu.vue'),
   'share': () => import('./components/share.vue'),
+  'speaker': () => import('./components/speaker.vue'),
   'speech_typing': () => import('./components/speech_typing.vue'),
-  'star': () => import('./components/star.vue'),
-  'table_header': () => import('./components/table_header.vue'),
+  'speech_bubble': () => import('./components/speech_bubble.vue'),
+  'split': () => import('./components/split.vue'),
+  'table': () => import('./components/table.vue'),
+  'slash_forward': () => import('./components/slash_forward.vue'),
   'swap': () => import('./components/swap.vue'),
-  'switch': () => import('./components/switch.vue'),
-  'sun': () => import('./components/sun.vue'),
-  'tag': () => import('./components/tag.vue'),
   'sort_alt': () => import('./components/sort_alt.vue'),
-  'target': () => import('./components/target.vue'),
+  'tag': () => import('./components/tag.vue'),
   'tag_milestone': () => import('./components/tag_milestone.vue'),
-  'table': () => import('./components/table.vue'),
-  'thread': () => import('./components/thread.vue'),
+  'split_three': () => import('./components/split_three.vue'),
   'support': () => import('./components/support.vue'),
-  'thumbs_up': () => import('./components/thumbs_up.vue'),
-  'ticket': () => import('./components/ticket.vue'),
+  'switch': () => import('./components/switch.vue'),
+  'target': () => import('./components/target.vue'),
+  'star': () => import('./components/star.vue'),
+  'sun': () => import('./components/sun.vue'),
   'tags': () => import('./components/tags.vue'),
-  'translate': () => import('./components/translate.vue'),
+  'thumbs_down': () => import('./components/thumbs_down.vue'),
+  'todo': () => import('./components/todo.vue'),
   'toggles': () => import('./components/toggles.vue'),
-  'trash': () => import('./components/trash.vue'),
   'timeline': () => import('./components/timeline.vue'),
+  'table_header': () => import('./components/table_header.vue'),
+  'thread': () => import('./components/thread.vue'),
+  'ticket': () => import('./components/ticket.vue'),
+  'toggle': () => import('./components/toggle.vue'),
+  'type_email': () => import('./components/type_email.vue'),
+  'trash_alt': () => import('./components/trash_alt.vue'),
   'type_checkbox': () => import('./components/type_checkbox.vue'),
+  'trash': () => import('./components/trash.vue'),
   'trophy': () => import('./components/trophy.vue'),
-  'todo': () => import('./components/todo.vue'),
-  'toggle': () => import('./components/toggle.vue'),
-  'tv_mode': () => import('./components/tv_mode.vue'),
+  'thumbs_up': () => import('./components/thumbs_up.vue'),
+  'type_date': () => import('./components/type_date.vue'),
   'type_file': () => import('./components/type_file.vue'),
-  'trash_alt': () => import('./components/trash_alt.vue'),
-  'type_number': () => import('./components/type_number.vue'),
-  'split': () => import('./components/split.vue'),
-  'type_email': () => import('./components/type_email.vue'),
-  'type_formula': () => import('./components/type_formula.vue'),
-  'thumbs_down': () => import('./components/thumbs_down.vue'),
   'type_id': () => import('./components/type_id.vue'),
-  'type_multiselect': () => import('./components/type_multiselect.vue'),
-  'type_date': () => import('./components/type_date.vue'),
-  'type_text': () => import('./components/type_text.vue'),
-  'type_phone': () => import('./components/type_phone.vue'),
-  'type_status': () => import('./components/type_status.vue'),
+  'type_number': () => import('./components/type_number.vue'),
   'type_person': () => import('./components/type_person.vue'),
+  'tv_mode': () => import('./components/tv_mode.vue'),
+  'type_select': () => import('./components/type_select.vue'),
+  'type_formula': () => import('./components/type_formula.vue'),
   'type_relation': () => import('./components/type_relation.vue'),
-  'type_url': () => import('./components/type_url.vue'),
-  'unarchive': () => import('./components/unarchive.vue'),
+  'type_status': () => import('./components/type_status.vue'),
+  'type_multiselect': () => import('./components/type_multiselect.vue'),
   'type_user': () => import('./components/type_user.vue'),
-  'undo': () => import('./components/undo.vue'),
+  'translate': () => import('./components/translate.vue'),
+  'type_text': () => import('./components/type_text.vue'),
   'undo_history': () => import('./components/undo_history.vue'),
-  'unlink_vertical': () => import('./components/unlink_vertical.vue'),
+  'unarchive': () => import('./components/unarchive.vue'),
   'type_time': () => import('./components/type_time.vue'),
+  'type_url': () => import('./components/type_url.vue'),
+  'unlink_vertical': () => import('./components/unlink_vertical.vue'),
+  'type_phone': () => import('./components/type_phone.vue'),
+  'upward': () => import('./components/upward.vue'),
   'upload': () => import('./components/upload.vue'),
+  'undo': () => import('./components/undo.vue'),
+  'upload_alt': () => import('./components/upload_alt.vue'),
   'unlink_horizontal': () => import('./components/unlink_horizontal.vue'),
-  'type_select': () => import('./components/type_select.vue'),
-  'user_add': () => import('./components/user_add.vue'),
-  'user': () => import('./components/user.vue'),
   'user_circle': () => import('./components/user_circle.vue'),
-  'upward': () => import('./components/upward.vue'),
-  'upload_alt': () => import('./components/upload_alt.vue'),
-  'user_remove': () => import('./components/user_remove.vue'),
-  'user_male_circle': () => import('./components/user_male_circle.vue'),
+  'user_add': () => import('./components/user_add.vue'),
   'user_male': () => import('./components/user_male.vue'),
-  'video': () => import('./components/video.vue'),
+  'user_remove': () => import('./components/user_remove.vue'),
+  'volume_add': () => import('./components/volume_add.vue'),
+  'users': () => import('./components/users.vue'),
   'version': () => import('./components/version.vue'),
-  'volume_disabled': () => import('./components/volume_disabled.vue'),
-  'versions': () => import('./components/versions.vue'),
-  'volume_0': () => import('./components/volume_0.vue'),
   'venn': () => import('./components/venn.vue'),
-  'users': () => import('./components/users.vue'),
-  'volume_add': () => import('./components/volume_add.vue'),
-  'volume_low': () => import('./components/volume_low.vue'),
+  'user': () => import('./components/user.vue'),
+  'versions': () => import('./components/versions.vue'),
+  'video': () => import('./components/video.vue'),
+  'user_male_circle': () => import('./components/user_male_circle.vue'),
+  'volume_disabled': () => import('./components/volume_disabled.vue'),
   'volume_high': () => import('./components/volume_high.vue'),
+  'volume_low': () => import('./components/volume_low.vue'),
   'warning_circle': () => import('./components/warning_circle.vue'),
+  'volume_0': () => import('./components/volume_0.vue'),
   'width': () => import('./components/width.vue'),
   'wallet': () => import('./components/wallet.vue'),
-  'waves': () => import('./components/waves.vue'),
+  'volume_muted': () => import('./components/volume_muted.vue'),
   'warning_hex': () => import('./components/warning_hex.vue'),
+  'volume_minus': () => import('./components/volume_minus.vue'),
+  'wifi_error': () => import('./components/wifi_error.vue'),
+  'warning_triangle': () => import('./components/warning_triangle.vue'),
   'wifi': () => import('./components/wifi.vue'),
-  'volume_muted': () => import('./components/volume_muted.vue'),
-  'wrap_back': () => import('./components/wrap_back.vue'),
   'wifi_none': () => import('./components/wifi_none.vue'),
+  'window_collapse_right': () => import('./components/window_collapse_right.vue'),
   'window_content': () => import('./components/window_content.vue'),
-  'window_collapse_left': () => import('./components/window_collapse_left.vue'),
-  'volume_minus': () => import('./components/volume_minus.vue'),
-  'warning_triangle': () => import('./components/warning_triangle.vue'),
   'write': () => import('./components/write.vue'),
   'window': () => import('./components/window.vue'),
-  'wifi_error': () => import('./components/wifi_error.vue'),
-  'zoom_out': () => import('./components/zoom_out.vue'),
+  'scalpel': () => import('./components/scalpel.vue'),
+  'window_collapse_left': () => import('./components/window_collapse_left.vue'),
+  'wrap_back': () => import('./components/wrap_back.vue'),
+  'waves': () => import('./components/waves.vue'),
   'zoom_cancel': () => import('./components/zoom_cancel.vue'),
-  'wrap_forward': () => import('./components/wrap_forward.vue'),
-  'window_collapse_right': () => import('./components/window_collapse_right.vue'),
   'zoom_in': () => import('./components/zoom_in.vue'),
+  'wrap_forward': () => import('./components/wrap_forward.vue'),
   'zoom_reset': () => import('./components/zoom_reset.vue'),
+  'zoom_out': () => import('./components/zoom_out.vue'),
   'nomi-ai': () => import('./components/nomi-ai.vue'),
   'nomi-arrow-up': () => import('./components/nomi-arrow-up.vue'),
   'nomi-arrow_down': () => import('./components/nomi-arrow_down.vue'),
-  'nomi-automation': () => import('./components/nomi-automation.vue'),
+  'nomi-arrow-down': () => import('./components/nomi-arrow-down.vue'),
   'nomi-arrow_up': () => import('./components/nomi-arrow_up.vue'),
+  'nomi-calendar-alt': () => import('./components/nomi-calendar-alt.vue'),
   'nomi-arrow-right-top': () => import('./components/nomi-arrow-right-top.vue'),
-  'nomi-arrow-down': () => import('./components/nomi-arrow-down.vue'),
-  'nomi-cash': () => import('./components/nomi-cash.vue'),
-  'nomi-cashflow': () => import('./components/nomi-cashflow.vue'),
+  'nomi-automation': () => import('./components/nomi-automation.vue'),
+  'nomi-card': () => import('./components/nomi-card.vue'),
   'nomi-category': () => import('./components/nomi-category.vue'),
-  'nomi-calendar-alt': () => import('./components/nomi-calendar-alt.vue'),
+  'nomi-balance': () => import('./components/nomi-balance.vue'),
+  'nomi-cash': () => import('./components/nomi-cash.vue'),
   'nomi-calendar': () => import('./components/nomi-calendar.vue'),
-  'nomi-category_alt': () => import('./components/nomi-category_alt.vue'),
+  'nomi-calendar-alt2': () => import('./components/nomi-calendar-alt2.vue'),
   'nomi-bell': () => import('./components/nomi-bell.vue'),
-  'nomi-balance': () => import('./components/nomi-balance.vue'),
-  'nomi-currencies': () => import('./components/nomi-currencies.vue'),
-  'nomi-card': () => import('./components/nomi-card.vue'),
+  'nomi-category_alt': () => import('./components/nomi-category_alt.vue'),
+  'nomi-arrows': () => import('./components/nomi-arrows.vue'),
+  'nomi-dashboard': () => import('./components/nomi-dashboard.vue'),
+  'nomi-debt': () => import('./components/nomi-debt.vue'),
   'nomi-close': () => import('./components/nomi-close.vue'),
-  'nomi-counterparty': () => import('./components/nomi-counterparty.vue'),
-  'nomi-chevron-right': () => import('./components/nomi-chevron-right.vue'),
   'nomi-check': () => import('./components/nomi-check.vue'),
-  'nomi-debt': () => import('./components/nomi-debt.vue'),
-  'nomi-dashboard': () => import('./components/nomi-dashboard.vue'),
+  'nomi-currencies': () => import('./components/nomi-currencies.vue'),
+  'nomi-cashflow': () => import('./components/nomi-cashflow.vue'),
+  'nomi-expand': () => import('./components/nomi-expand.vue'),
+  'nomi-eye-close': () => import('./components/nomi-eye-close.vue'),
+  'nomi-eye-open': () => import('./components/nomi-eye-open.vue'),
+  'nomi-counterparty': () => import('./components/nomi-counterparty.vue'),
   'nomi-clear': () => import('./components/nomi-clear.vue'),
+  'nomi-filter': () => import('./components/nomi-filter.vue'),
   'nomi-dev': () => import('./components/nomi-dev.vue'),
-  'nomi-arrows': () => import('./components/nomi-arrows.vue'),
-  'nomi-collapse': () => import('./components/nomi-collapse.vue'),
+  'nomi-chevron-right': () => import('./components/nomi-chevron-right.vue'),
+  'nomi-help': () => import('./components/nomi-help.vue'),
+  'nomi-demo': () => import('./components/nomi-demo.vue'),
   'nomi-export': () => import('./components/nomi-export.vue'),
-  'nomi-eye-close': () => import('./components/nomi-eye-close.vue'),
-  'nomi-integration': () => import('./components/nomi-integration.vue'),
-  'nomi-calendar-alt2': () => import('./components/nomi-calendar-alt2.vue'),
+  'nomi-hide': () => import('./components/nomi-hide.vue'),
+  'nomi-menu': () => import('./components/nomi-menu.vue'),
+  'nomi-logout': () => import('./components/nomi-logout.vue'),
   'nomi-file': () => import('./components/nomi-file.vue'),
+  'nomi-collapse': () => import('./components/nomi-collapse.vue'),
   'nomi-folder': () => import('./components/nomi-folder.vue'),
-  'nomi-expand': () => import('./components/nomi-expand.vue'),
-  'nomi-help': () => import('./components/nomi-help.vue'),
-  'nomi-filter': () => import('./components/nomi-filter.vue'),
-  'nomi-eye': () => import('./components/nomi-eye.vue'),
-  'nomi-eye-open': () => import('./components/nomi-eye-open.vue'),
+  'nomi-move-left': () => import('./components/nomi-move-left.vue'),
+  'nomi-money': () => import('./components/nomi-money.vue'),
+  'nomi-payment_calendar': () => import('./components/nomi-payment_calendar.vue'),
   'nomi-lock': () => import('./components/nomi-lock.vue'),
-  'nomi-hide': () => import('./components/nomi-hide.vue'),
+  'nomi-eye': () => import('./components/nomi-eye.vue'),
   'nomi-move-right': () => import('./components/nomi-move-right.vue'),
-  'nomi-payment_calendar': () => import('./components/nomi-payment_calendar.vue'),
-  'nomi-logout': () => import('./components/nomi-logout.vue'),
+  'nomi-integration': () => import('./components/nomi-integration.vue'),
+  'nomi-minus': () => import('./components/nomi-minus.vue'),
   'nomi-person': () => import('./components/nomi-person.vue'),
-  'nomi-money': () => import('./components/nomi-money.vue'),
-  'nomi-pen': () => import('./components/nomi-pen.vue'),
-  'nomi-move-left': () => import('./components/nomi-move-left.vue'),
+  'nomi-planFact': () => import('./components/nomi-planFact.vue'),
   'nomi-pin': () => import('./components/nomi-pin.vue'),
-  'nomi-pnl': () => import('./components/nomi-pnl.vue'),
-  'nomi-menu': () => import('./components/nomi-menu.vue'),
-  'nomi-project': () => import('./components/nomi-project.vue'),
-  'nomi-project_alt': () => import('./components/nomi-project_alt.vue'),
-  'nomi-project_alt2': () => import('./components/nomi-project_alt2.vue'),
-  'nomi-strongbox': () => import('./components/nomi-strongbox.vue'),
+  'nomi-recurrence': () => import('./components/nomi-recurrence.vue'),
+  'nomi-pen': () => import('./components/nomi-pen.vue'),
   'nomi-repeat': () => import('./components/nomi-repeat.vue'),
-  'nomi-planFact': () => import('./components/nomi-planFact.vue'),
   'nomi-scissors': () => import('./components/nomi-scissors.vue'),
-  'nomi-settings': () => import('./components/nomi-settings.vue'),
+  'nomi-project_alt2': () => import('./components/nomi-project_alt2.vue'),
   'nomi-sort-asc': () => import('./components/nomi-sort-asc.vue'),
-  'nomi-recurrence': () => import('./components/nomi-recurrence.vue'),
-  'nomi-minus': () => import('./components/nomi-minus.vue'),
-  'nomi-segment': () => import('./components/nomi-segment.vue'),
+  'nomi-project_alt': () => import('./components/nomi-project_alt.vue'),
+  'nomi-report': () => import('./components/nomi-report.vue'),
   'nomi-table-view': () => import('./components/nomi-table-view.vue'),
-  'nomi-time': () => import('./components/nomi-time.vue'),
-  'nomi-target': () => import('./components/nomi-target.vue'),
-  'nomi-tag': () => import('./components/nomi-tag.vue'),
   'nomi-sort-desc': () => import('./components/nomi-sort-desc.vue'),
-  'nomi-trash': () => import('./components/nomi-trash.vue'),
-  'nomi-report': () => import('./components/nomi-report.vue'),
+  'nomi-target': () => import('./components/nomi-target.vue'),
+  'nomi-pnl': () => import('./components/nomi-pnl.vue'),
+  'nomi-strongbox': () => import('./components/nomi-strongbox.vue'),
   'nomi-subscription': () => import('./components/nomi-subscription.vue'),
-  'nomi-unpin': () => import('./components/nomi-unpin.vue'),
-  'nomi-text': () => import('./components/nomi-text.vue'),
+  'nomi-settings': () => import('./components/nomi-settings.vue'),
+  'nomi-time': () => import('./components/nomi-time.vue'),
   'nomi-transactions': () => import('./components/nomi-transactions.vue'),
-  'nomi-transactions_alt': () => import('./components/nomi-transactions_alt.vue'),
   'nomi-user': () => import('./components/nomi-user.vue'),
+  'nomi-unpin': () => import('./components/nomi-unpin.vue'),
+  'nomi-tag': () => import('./components/nomi-tag.vue'),
   'nomi-warehouse': () => import('./components/nomi-warehouse.vue'),
+  'nomi-text': () => import('./components/nomi-text.vue'),
+  'nomi-trash': () => import('./components/nomi-trash.vue'),
+  'nomi-project': () => import('./components/nomi-project.vue'),
+  'nomi-segment': () => import('./components/nomi-segment.vue'),
+  'nomi-transactions_alt': () => import('./components/nomi-transactions_alt.vue'),
   'nomi-user_plus': () => import('./components/nomi-user_plus.vue'),
 }

package/src/components/icon/new-icons/demo.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.10922 8.4091C6.78269 7.59278 7.59277 6.7827 8.40909 7.10923L18.3172 11.0725C19.1183 11.3929 19.1648 12.5095 18.393 12.8954L15.0261 14.5789C14.8325 14.6756 14.6756 14.8325 14.5789 15.0261L12.8954 18.393C12.5095 19.1648 11.3929 19.1183 11.0725 18.3172L7.10922 8.4091Z" fill="currentColor"/>
+    <path d="M5.81577 15.4361C5.88458 15.2732 6.11542 15.2732 6.18424 15.4361L6.56237 16.3312C6.58263 16.3792 6.62081 16.4174 6.66877 16.4376L7.56388 16.8158C7.72678 16.8846 7.72678 17.1154 7.56388 17.1842L6.66878 17.5624C6.62081 17.5826 6.58263 17.6208 6.56237 17.6688L6.18424 18.5639C6.11542 18.7268 5.88458 18.7268 5.81576 18.5639L5.43763 17.6688C5.41737 17.6208 5.37919 17.5826 5.33123 17.5624L4.43612 17.1842C4.27322 17.1154 4.27322 16.8846 4.43612 16.8158L5.33123 16.4376C5.37919 16.4174 5.41737 16.3792 5.43763 16.3312L5.81577 15.4361Z" fill="currentColor"/>
+    <path d="M17.3139 4.47174C17.3805 4.30291 17.6195 4.30291 17.6861 4.47174L18.1752 5.71209C18.1956 5.76363 18.2364 5.80443 18.2879 5.82476L19.5283 6.31395C19.6971 6.38053 19.6971 6.61947 19.5283 6.68605L18.2879 7.17524C18.2364 7.19557 18.1956 7.23637 18.1752 7.28791L17.6861 8.52826C17.6195 8.69709 17.3805 8.69709 17.3139 8.52826L16.8248 7.28791C16.8044 7.23637 16.7636 7.19557 16.7121 7.17524L15.4717 6.68605C15.3029 6.61947 15.3029 6.38053 15.4717 6.31395L16.7121 5.82476C16.7636 5.80443 16.8044 5.76363 16.8248 5.71209L17.3139 4.47174Z" fill="currentColor"/>
+    <path d="M12.3158 4.43612C12.3846 4.27322 12.6154 4.27322 12.6842 4.43612L12.9139 4.97972C12.9341 5.02769 12.9723 5.06586 13.0203 5.08612L13.5639 5.31576C13.7268 5.38458 13.7268 5.61542 13.5639 5.68424L13.0203 5.91388C12.9723 5.93414 12.9341 5.97231 12.9139 6.02028L12.6842 6.56388C12.6154 6.72678 12.3846 6.72678 12.3158 6.56388L12.0861 6.02028C12.0659 5.97231 12.0277 5.93414 11.9797 5.91388L11.4361 5.68424C11.2732 5.61542 11.2732 5.38458 11.4361 5.31576L11.9797 5.08612C12.0277 5.06586 12.0659 5.02769 12.0861 4.97972L12.3158 4.43612Z" fill="currentColor"/>
+</svg>

package/src/components/panels/PanelList.vue

@@ -333,18 +333,21 @@ export default class PanelList extends Vue {
         newPanel.isAnimate = isAnimation;
         newPanel.permanentExpanded = !!panel.permanentExpanded;
         newPanel.emit = (event, ...args) => this.emitEvent(event, ...args);
-        newPanel.open = (type, payload) => this.openPanel(type, payload, n + 1);
+        newPanel.open = (type, payload, index?:number) => this.openPanel(type, payload, index ?? n + 1);
         newPanel.close = () => this.closePanel(newPanel);
         newPanel.expand = () => this.expandPanel(newPanel);
         newPanel.getTitle = () => newPanel.title;
         newPanel.getIcon = () => newPanel.icon;
         newPanel.setTitle = (title: string) => { newPanel.title = title; this.updateTitle() };
         newPanel.setIcon = (icon: string) => { newPanel.icon = icon; };
-        newPanel.on = (eventName, func: (event: string, ...args: any[]) => any) => {
-          if (!newPanel.__events[eventName]) {
-            newPanel.__events[eventName] = [];
+        newPanel.on = (eventName: string|string[], func: (event: string, ...args: any[]) => any) => {
+          const eventNames = Array.isArray(eventName) ? eventName : [eventName];
+          for (const evName of eventNames) {
+            if (!newPanel.__events[evName]) {
+              newPanel.__events[evName] = [];
+            }
+            newPanel.__events[evName].push(func);
           }
-          newPanel.__events[eventName].push(func);
         };
         newPanel.off = (eventName, func: (event: string, ...args: any[]) => any) => {
           if (newPanel.__events[eventName]) {

package/src/components/view/View.vue

@@ -182,6 +182,7 @@ class itfView extends Vue {
           sort: this.sorting
         }
       });
+      this.selectedIds = [];
       this.items = res[this.itemsKey];
       this.page = res.meta.page;
       this.total = res.meta.total;