@itfin/components 1.4.2 → 1.4.4

package/package.json

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

package/src/components/filter/FilterPanel.vue

@@ -1,20 +1,23 @@
 <template>
   <div class="itf-filter-panel d-flex flex-column gap-3 align-items-start">
-    <div v-if="search" class="d-flex gap-2 justify-content-between w-100">
+    <div class="d-flex gap-2 justify-content-between w-100">
       <slot name="search">
-        <itf-text-field
-          style="width: 300px"
-          small
-          :placeholder="searchPlaceholder"
-          prepend-icon="search"
-          :delay-input="250"
-          clearable
-          :value="filterValue.query"
-          @input="(e) => onFilterChange({ type: 'text', name: 'query' }, { value: e })"
-        />
+        <div>
+          <itf-text-field
+            v-if="search"
+            style="width: 300px"
+            small
+            :placeholder="searchPlaceholder"
+            prepend-icon="search"
+            :delay-input="250"
+            clearable
+            :value="filterValue.query"
+            @input="(e) => onFilterChange({ type: 'text', name: 'query' }, { value: e })"
+          />
+        </div>
       </slot>
       <div class="d-flex gap-2">
-        <itf-button default icon class="position-relative" @click="toggleFilters">
+        <itf-button v-if="showFilter" default icon class="position-relative" @click="toggleFilters">
           <itf-icon new name="filter" />
           <span v-if="activeFiltersCount" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">
             {{activeFiltersCount}}
@@ -24,7 +27,7 @@
         <slot name="after-filter-btn"></slot>
       </div>
     </div>
-    <div v-if="showFilters" class="d-flex gap-2 flex-nowrap">
+    <div v-if="showFilters && showFilter" class="d-flex gap-2 flex-nowrap">
       <filter-badge
         v-for="(facet, n) in visibleFilters"
         :key="n"
@@ -94,6 +97,7 @@ class FilterPanel extends Vue {
   @Prop() panel;
   @Prop(String) stateName;
   @Prop(Boolean) search;
+  @Prop({ type: Boolean, default: true }) showFilter;
   @Prop(Boolean) mini;
   @Prop({ type: String, default: function() { return this.$t('components.filter.search'); } }) searchPlaceholder;
 

package/src/components/icon/components/nomi-calendar-view.vue

@@ -0,0 +1,4 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.60039 5.00039C8.60039 4.66902 8.33176 4.40039 8.00039 4.40039C7.66902 4.40039 7.40039 4.66902 7.40039 5.00039V6.44556C7.35748 6.45011 7.31553 6.45512 7.27454 6.46063C6.79953 6.52449 6.3652 6.6657 6.01547 7.01544C5.66574 7.36517 5.52452 7.7995 5.46066 8.2745C5.40035 8.72311 5.40037 9.28719 5.40039 9.95917V9.9592L5.40039 10.0004V15.0004L5.40039 15.0415V15.0416C5.40037 15.7135 5.40035 16.2776 5.46066 16.7262C5.52452 17.2012 5.66574 17.6356 6.01547 17.9853C6.3652 18.335 6.79953 18.4762 7.27454 18.5401C7.72314 18.6004 8.28721 18.6004 8.95917 18.6004H8.95923L9.00039 18.6004H15.0004L15.0416 18.6004H15.0416C15.7136 18.6004 16.2776 18.6004 16.7263 18.5401C17.2013 18.4762 17.6356 18.335 17.9853 17.9853C18.335 17.6356 18.4763 17.2012 18.5401 16.7262C18.6004 16.2776 18.6004 15.7135 18.6004 15.0416V15.0415L18.6004 15.0004V10.0004L18.6004 9.9592V9.95917C18.6004 9.28719 18.6004 8.72311 18.5401 8.2745C18.4763 7.7995 18.335 7.36517 17.9853 7.01544C17.6356 6.6657 17.2013 6.52449 16.7263 6.46063C16.6853 6.45512 16.6433 6.45011 16.6004 6.44556L16.6004 5.00039C16.6004 4.66902 16.3318 4.40039 16.0004 4.40039C15.669 4.40039 15.4004 4.66902 15.4004 5.00039V6.40072C15.2845 6.40035 15.1649 6.40035 15.0417 6.40036H15.0416L15.0004 6.40036H9.00039L8.95923 6.40036H8.9591H8.95908H8.95907H8.95905C8.83586 6.40035 8.71629 6.40035 8.60039 6.40072L8.60039 5.00039ZM17.3987 9.40036C17.3952 8.99258 17.3843 8.68374 17.3508 8.4344C17.3049 8.09246 17.2264 7.95357 17.1368 7.86396C17.0472 7.77436 16.9083 7.6959 16.5664 7.64993C16.2072 7.60163 15.7245 7.60036 15.0004 7.60036H9.00039C8.27632 7.60036 7.79363 7.60163 7.43443 7.64993C7.0925 7.6959 6.95361 7.77436 6.864 7.86396C6.77439 7.95357 6.69593 8.09246 6.64996 8.4344C6.61644 8.68374 6.60557 8.99258 6.60206 9.40036L17.3987 9.40036ZM6.60039 10.6004L17.4004 10.6004V15.0004C17.4004 15.7244 17.3991 16.2071 17.3508 16.5663C17.3049 16.9083 17.2264 17.0471 17.1368 17.1368C17.0472 17.2264 16.9083 17.3048 16.5664 17.3508C16.2072 17.3991 15.7245 17.4004 15.0004 17.4004H9.00039C8.27632 17.4004 7.79363 17.3991 7.43443 17.3508C7.0925 17.3048 6.95361 17.2264 6.864 17.1368C6.77439 17.0471 6.69593 16.9083 6.64996 16.5663C6.60167 16.2071 6.60039 15.7244 6.60039 15.0004V10.6004ZM7.90039 12.5004C7.90039 12.169 8.16902 11.9004 8.50039 11.9004L13.5004 11.9004C13.8318 11.9004 14.1004 12.169 14.1004 12.5004C14.1004 12.8318 13.8318 13.1004 13.5004 13.1004H8.50039C8.16902 13.1004 7.90039 12.8318 7.90039 12.5004ZM8.50039 15.6004H11.5004C11.8318 15.6004 12.1004 15.3318 12.1004 15.0004C12.1004 14.669 11.8318 14.4004 11.5004 14.4004H8.50039C8.16902 14.4004 7.90039 14.669 7.90039 15.0004C7.90039 15.3318 8.16902 15.6004 8.50039 15.6004Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-kanban-view.vue

@@ -0,0 +1,6 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 18L10 18C8.11438 18 7.17157 18 6.58579 17.4142C6 16.8284 6 15.8856 6 14L6 10C6 8.11438 6 7.17157 6.58579 6.58579C7.17157 6 8.11438 6 10 6L14 6C15.8856 6 16.8284 6 17.4142 6.58579C18 7.17157 18 8.11438 18 10L18 14C18 15.8856 18 16.8284 17.4142 17.4142C16.8284 18 15.8856 18 14 18Z" stroke="currentColor" stroke-width="1.2"/>
+  <path d="M10 6V18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14 6V18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-list-view.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="M14 18L10 18C8.11438 18 7.17157 18 6.58579 17.4142C6 16.8284 6 15.8856 6 14L6 10C6 8.11438 6 7.17157 6.58579 6.58579C7.17157 6 8.11438 6 10 6L14 6C15.8856 6 16.8284 6 17.4142 6.58579C18 7.17157 18 8.11438 18 10L18 14C18 15.8856 18 16.8284 17.4142 17.4142C16.8284 18 15.8856 18 14 18Z" stroke="currentColor" stroke-width="1.2"/>
+  <path d="M13 15L8.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 9H8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15 12H8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-table-config.vue

@@ -0,0 +1,9 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 18L10 18C8.11438 18 7.17157 18 6.58579 17.4142C6 16.8284 6 15.8856 6 14L6 10C6 8.11438 6 7.17157 6.58579 6.58579C7.17157 6 8.11438 6 10 6L14 6C15.8856 6 16.8284 6 17.4142 6.58579C18 7.17157 18 8.11438 18 10L18 14C18 15.8856 18 16.8284 17.4142 17.4142C16.8284 18 15.8856 18 14 18Z" stroke="currentColor" stroke-width="1.2"/>
+  <path d="M6 14L18 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6 10L18 10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10 6L10 18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M20.1384 16.7558C20.4109 16.2888 20.4109 15.7112 20.1384 15.2442L18.9718 13.2442C18.703 12.7834 18.2096 12.5 17.6761 12.5L15.3248 12.5C14.7913 12.5 14.298 12.7834 14.0292 13.2442L12.8625 15.2442C12.5901 15.7112 12.5901 16.2888 12.8625 16.7558L14.0292 18.7558C14.298 19.2166 14.7913 19.5 15.3248 19.5L17.6761 19.5C18.2096 19.5 18.703 19.2166 18.9718 18.7558L20.1384 16.7558Z" fill="currentColor" stroke="white"/>
+  <circle cx="16.5" cy="16" r="1" fill="white"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-table-view.vue

@@ -1,4 +1,7 @@
 <template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.43934 6.43934C5 6.87868 5 7.58579 5 9V9.4L8.4 9.4L8.4 6H8C6.58579 6 5.87868 6 5.43934 6.43934ZM5 10.6L8.4 10.6L8.4 13.4H5V10.6ZM5 14.6V15C5 16.4142 5 17.1213 5.43934 17.5607C5.87868 18 6.58579 18 8 18H8.4L8.4 14.6H5ZM9.6 14.6V18H16C17.4142 18 18.1213 18 18.5607 17.5607C19 17.1213 19 16.4142 19 15V14.6L9.6 14.6ZM19 13.4V10.6L9.6 10.6V13.4L19 13.4ZM9.6 6V9.4L19 9.4V9C19 7.58579 19 6.87868 18.5607 6.43934C18.1213 6 17.4142 6 16 6H9.6Z" fill="currentColor"/>
+  <path d="M14 18L10 18C8.11438 18 7.17157 18 6.58579 17.4142C6 16.8284 6 15.8856 6 14L6 10C6 8.11438 6 7.17157 6.58579 6.58579C7.17157 6 8.11438 6 10 6L14 6C15.8856 6 16.8284 6 17.4142 6.58579C18 7.17157 18 8.11438 18 10L18 14C18 15.8856 18 16.8284 17.4142 17.4142C16.8284 18 15.8856 18 14 18Z" stroke="currentColor" stroke-width="1.2"/>
+  <path d="M6 14L18 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6 10L18 10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10 6L10 18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 </template>

package/src/components/icon/icons.js

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

package/src/components/icon/new-icons/calendar-view.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.60039 5.00039C8.60039 4.66902 8.33176 4.40039 8.00039 4.40039C7.66902 4.40039 7.40039 4.66902 7.40039 5.00039V6.44556C7.35748 6.45011 7.31553 6.45512 7.27454 6.46063C6.79953 6.52449 6.3652 6.6657 6.01547 7.01544C5.66574 7.36517 5.52452 7.7995 5.46066 8.2745C5.40035 8.72311 5.40037 9.28719 5.40039 9.95917V9.9592L5.40039 10.0004V15.0004L5.40039 15.0415V15.0416C5.40037 15.7135 5.40035 16.2776 5.46066 16.7262C5.52452 17.2012 5.66574 17.6356 6.01547 17.9853C6.3652 18.335 6.79953 18.4762 7.27454 18.5401C7.72314 18.6004 8.28721 18.6004 8.95917 18.6004H8.95923L9.00039 18.6004H15.0004L15.0416 18.6004H15.0416C15.7136 18.6004 16.2776 18.6004 16.7263 18.5401C17.2013 18.4762 17.6356 18.335 17.9853 17.9853C18.335 17.6356 18.4763 17.2012 18.5401 16.7262C18.6004 16.2776 18.6004 15.7135 18.6004 15.0416V15.0415L18.6004 15.0004V10.0004L18.6004 9.9592V9.95917C18.6004 9.28719 18.6004 8.72311 18.5401 8.2745C18.4763 7.7995 18.335 7.36517 17.9853 7.01544C17.6356 6.6657 17.2013 6.52449 16.7263 6.46063C16.6853 6.45512 16.6433 6.45011 16.6004 6.44556L16.6004 5.00039C16.6004 4.66902 16.3318 4.40039 16.0004 4.40039C15.669 4.40039 15.4004 4.66902 15.4004 5.00039V6.40072C15.2845 6.40035 15.1649 6.40035 15.0417 6.40036H15.0416L15.0004 6.40036H9.00039L8.95923 6.40036H8.9591H8.95908H8.95907H8.95905C8.83586 6.40035 8.71629 6.40035 8.60039 6.40072L8.60039 5.00039ZM17.3987 9.40036C17.3952 8.99258 17.3843 8.68374 17.3508 8.4344C17.3049 8.09246 17.2264 7.95357 17.1368 7.86396C17.0472 7.77436 16.9083 7.6959 16.5664 7.64993C16.2072 7.60163 15.7245 7.60036 15.0004 7.60036H9.00039C8.27632 7.60036 7.79363 7.60163 7.43443 7.64993C7.0925 7.6959 6.95361 7.77436 6.864 7.86396C6.77439 7.95357 6.69593 8.09246 6.64996 8.4344C6.61644 8.68374 6.60557 8.99258 6.60206 9.40036L17.3987 9.40036ZM6.60039 10.6004L17.4004 10.6004V15.0004C17.4004 15.7244 17.3991 16.2071 17.3508 16.5663C17.3049 16.9083 17.2264 17.0471 17.1368 17.1368C17.0472 17.2264 16.9083 17.3048 16.5664 17.3508C16.2072 17.3991 15.7245 17.4004 15.0004 17.4004H9.00039C8.27632 17.4004 7.79363 17.3991 7.43443 17.3508C7.0925 17.3048 6.95361 17.2264 6.864 17.1368C6.77439 17.0471 6.69593 16.9083 6.64996 16.5663C6.60167 16.2071 6.60039 15.7244 6.60039 15.0004V10.6004ZM7.90039 12.5004C7.90039 12.169 8.16902 11.9004 8.50039 11.9004L13.5004 11.9004C13.8318 11.9004 14.1004 12.169 14.1004 12.5004C14.1004 12.8318 13.8318 13.1004 13.5004 13.1004H8.50039C8.16902 13.1004 7.90039 12.8318 7.90039 12.5004ZM8.50039 15.6004H11.5004C11.8318 15.6004 12.1004 15.3318 12.1004 15.0004C12.1004 14.669 11.8318 14.4004 11.5004 14.4004H8.50039C8.16902 14.4004 7.90039 14.669 7.90039 15.0004C7.90039 15.3318 8.16902 15.6004 8.50039 15.6004Z" fill="currentColor"/>
+</svg>

package/src/components/icon/new-icons/kanban-view.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 18L10 18C8.11438 18 7.17157 18 6.58579 17.4142C6 16.8284 6 15.8856 6 14L6 10C6 8.11438 6 7.17157 6.58579 6.58579C7.17157 6 8.11438 6 10 6L14 6C15.8856 6 16.8284 6 17.4142 6.58579C18 7.17157 18 8.11438 18 10L18 14C18 15.8856 18 16.8284 17.4142 17.4142C16.8284 18 15.8856 18 14 18Z" stroke="currentColor" stroke-width="1.2"/>
+  <path d="M10 6V18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14 6V18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/icon/new-icons/list-view.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="M14 18L10 18C8.11438 18 7.17157 18 6.58579 17.4142C6 16.8284 6 15.8856 6 14L6 10C6 8.11438 6 7.17157 6.58579 6.58579C7.17157 6 8.11438 6 10 6L14 6C15.8856 6 16.8284 6 17.4142 6.58579C18 7.17157 18 8.11438 18 10L18 14C18 15.8856 18 16.8284 17.4142 17.4142C16.8284 18 15.8856 18 14 18Z" stroke="currentColor" stroke-width="1.2"/>
+  <path d="M13 15L8.5 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 9H8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15 12H8.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/icon/new-icons/table-config.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 18L10 18C8.11438 18 7.17157 18 6.58579 17.4142C6 16.8284 6 15.8856 6 14L6 10C6 8.11438 6 7.17157 6.58579 6.58579C7.17157 6 8.11438 6 10 6L14 6C15.8856 6 16.8284 6 17.4142 6.58579C18 7.17157 18 8.11438 18 10L18 14C18 15.8856 18 16.8284 17.4142 17.4142C16.8284 18 15.8856 18 14 18Z" stroke="currentColor" stroke-width="1.2"/>
+  <path d="M6 14L18 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6 10L18 10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10 6L10 18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M20.1384 16.7558C20.4109 16.2888 20.4109 15.7112 20.1384 15.2442L18.9718 13.2442C18.703 12.7834 18.2096 12.5 17.6761 12.5L15.3248 12.5C14.7913 12.5 14.298 12.7834 14.0292 13.2442L12.8625 15.2442C12.5901 15.7112 12.5901 16.2888 12.8625 16.7558L14.0292 18.7558C14.298 19.2166 14.7913 19.5 15.3248 19.5L17.6761 19.5C18.2096 19.5 18.703 19.2166 18.9718 18.7558L20.1384 16.7558Z" fill="currentColor" stroke="white"/>
+  <circle cx="16.5" cy="16" r="1" fill="white"/>
+</svg>

package/src/components/icon/new-icons/table-view.svg

@@ -1,3 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.43934 6.43934C5 6.87868 5 7.58579 5 9V9.4L8.4 9.4L8.4 6H8C6.58579 6 5.87868 6 5.43934 6.43934ZM5 10.6L8.4 10.6L8.4 13.4H5V10.6ZM5 14.6V15C5 16.4142 5 17.1213 5.43934 17.5607C5.87868 18 6.58579 18 8 18H8.4L8.4 14.6H5ZM9.6 14.6V18H16C17.4142 18 18.1213 18 18.5607 17.5607C19 17.1213 19 16.4142 19 15V14.6L9.6 14.6ZM19 13.4V10.6L9.6 10.6V13.4L19 13.4ZM9.6 6V9.4L19 9.4V9C19 7.58579 19 6.87868 18.5607 6.43934C18.1213 6 17.4142 6 16 6H9.6Z" fill="currentColor"/>
+  <path d="M14 18L10 18C8.11438 18 7.17157 18 6.58579 17.4142C6 16.8284 6 15.8856 6 14L6 10C6 8.11438 6 7.17157 6.58579 6.58579C7.17157 6 8.11438 6 10 6L14 6C15.8856 6 16.8284 6 17.4142 6.58579C18 7.17157 18 8.11438 18 10L18 14C18 15.8856 18 16.8284 17.4142 17.4142C16.8284 18 15.8856 18 14 18Z" stroke="currentColor" stroke-width="1.2"/>
+  <path d="M6 14L18 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6 10L18 10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10 6L10 18" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/src/components/view/View.vue

@@ -3,7 +3,8 @@
   <div v-loading="loading || loadingData" class="flex-grow-1 w-100 d-flex flex-column">
     <itf-filter-panel
       :search-placeholder="searchPlaceholder"
-      search
+      :search="currentTab !== 'list'"
+      :show-filter="currentTab !== 'list'"
       class="py-2 px-3"
       :endpoint="filtersEndpoint"
       :panel="panel"
@@ -14,7 +15,7 @@
       <template #after-filter-btn>
         <itf-dropdown v-if="$refs.table && tableSchema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
           <template #button>
-            <itf-icon new name="table-view" />
+            <itf-icon new name="table-config" />
           </template>
           <div class="dropdown-header">
             {{ $t('components.table.columns') }}
@@ -38,9 +39,27 @@
             </div>
           </a>
         </itf-dropdown>
+
+        <itf-segmented-control
+          class="small"
+          v-model="currentTab"
+          item-key="value"
+          :items="tabs"
+        >
+          <template #item="{ item }">
+            <div class="d-flex align-items-center">
+              <itf-icon class="text-muted" new :name="item.icon" />
+              {{item.text}}
+            </div>
+          </template>
+        </itf-segmented-control>
       </template>
     </itf-filter-panel>
 
+    <slot v-if="currentTab === 'list'" name="list-view"></slot>
+    <slot v-else-if="currentTab === 'board'" name="kanban-view"></slot>
+    <slot v-else-if="currentTab === 'calendar'" name="calendar-view"></slot>
+    <slot v-else name="table-view">
     <div class="flex-grow-1 px-3 d-flex flex-column">
       <div class="position-relative flex-grow-1">
         <itf-table
@@ -73,9 +92,11 @@
         </itf-table>
       </div>
     </div>
+    </slot>
 
     <itf-pagination
       class="my-2 px-3"
+      v-if="showPagination"
       show-size
       :size="size"
       :items="items"
@@ -100,10 +121,12 @@ import itfPagination from '../pagination/Pagination2.vue';
 import itfTableBody from "../table/TableBody.vue";
 import itfIcon from "../icon/Icon.vue";
 import itfDropdown from "../dropdown/Dropdown.vue";
+import itfSegmentedControl from '@itfin/components/src/components/segmented-control/SegmentedControl.vue';
 
 export default @Component({
   name: 'itfView',
   components: {
+    itfSegmentedControl,
     itfDropdown, itfIcon,
     itfPagination,
     itfFilterPanel,
@@ -130,9 +153,15 @@ class itfView extends Vue {
   @Prop(String) itemsKey;
   @Prop(String) panelKey;
   @Prop(String) stateName;
+  @Prop({ type: String, default: 'table' }) tab;
   @Prop({ type: String, default () { return this.$t('components.table.search'); } }) searchPlaceholder;
   @Prop() panel;
   @Prop(Boolean) showActions;
+  @Prop({ type: Boolean, default: true }) showPagination;
+  @Prop(Boolean) listViewEnabled;
+  @Prop(Boolean) kanbanViewEnabled;
+  @Prop(Boolean) calendarViewEnabled;
+  @Prop(Boolean) tableViewEnabled;
 
   page = 1;
   total = 0;
@@ -143,9 +172,34 @@ class itfView extends Vue {
   loadingData = false;
   activeIds = [];
   tableColumns = [];
+  _currentTab = null;
+
+  get currentTab() {
+    return this.tab;
+  }
+
+  set currentTab(val) {
+    this.$emit('update:tab', val);
+  }
+
+  get tabs() {
+    const views = [];
+    if (this.listViewEnabled) {
+      views.push({ value: 'list', text: this.$t('list'), icon: 'list-view' });
+    }
+    if (this.kanbanViewEnabled) {
+      views.push({ value: 'board', text: this.$t('board'), icon: 'kanban-view' });
+    }
+    if (this.calendarViewEnabled) {
+      views.push({ value: 'calendar', text: this.$t('calendar'), icon: 'calendar-view' });
+    }
+    if (this.tableViewEnabled) {
+      views.push({ value: 'table', text: this.$t('table'), icon: 'table-view' });
+    }
+    return views;
+  }
 
   get tableSchema() {
-    console.log(123, this.tableColumns, this.schema)
     // return this.tableColumns || this.schema;
     if (this.tableColumns) {
       return {