@itfin/components 1.5.2 → 1.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -59,7 +59,11 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.29.0",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-syntax-numeric-separator": "^7.10.4",
     "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
     "@vue/cli-plugin-babel": "^5.0.8",
@@ -81,6 +85,7 @@
     "vue-class-component": "^7.2.6",
     "vue-eslint-parser": "^9.1.0",
     "vue-jest": "^3.0.7",
+    "vue-loader": "^15.11.1",
     "vue-template-compiler": "=2.6.14"
   },
   "eslintConfig": {
@@ -130,5 +135,11 @@
       "lcov"
     ]
   },
+  "overrides": {
+    "@vue/vue-loader-v15": {
+      ".": "npm:vue-loader@^15.11.1",
+      "webpack": "^5.88.0"
+    }
+  },
   "license": "ISC"
 }

package/src/ITFSettings.js

@@ -1,9 +1,3 @@
-if (typeof CSS !== 'undefined' && 'paintWorklet' in CSS) {
-  CSS.paintWorklet.addModule(
-    "https://www.unpkg.com/css-houdini-squircle@0.1.3/squircle.min.js"
-  );
-}
-
 class ITFSettings {
   options = {
     firstDayOfWeek: 'Monday',

package/src/components/button/Button.vue

@@ -17,7 +17,6 @@ class itfButton extends Vue {
   @Prop(Boolean) large;
   @Prop(Boolean) icon;
   @Prop(Boolean) block;
-  @Prop(Boolean) squircle;
   @Prop(String) loadingText;
   @Prop(String) color;
   @Prop(Boolean) disabled;
@@ -28,7 +27,7 @@ class itfButton extends Vue {
 
   render (createElement, { data, slots, children, props }) {
     const {
-      to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText, squircle, default: defaultStyle,
+      to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText, default: defaultStyle,
       class: classNames
     } = props;
     const component = to ? 'nuxt-link' : (props.href ? 'a' : 'button');
@@ -48,7 +47,6 @@ class itfButton extends Vue {
         'btn-default': defaultStyle,
         'btn-basic': !primary && !secondary && !color && !defaultStyle,
         'btn-secondary': secondary,
-        // 'btn-squircle': squircle,
         'btn-sm': small,
         'btn-lg': large,
         // 'px-3': small && !icon,

package/src/components/button/NativeButton.js

@@ -7,7 +7,6 @@ const CSS_CLASSES = {
   small: ['btn-sm'],
   block: ['itf-button__block'],
   labeled: ['labeled'],
-  squircle: ['btn-squircle'],
   icon: ['btn-icon'],
   loading: ['loading'],
   spinner: ['itf-spinner'],
@@ -36,9 +35,6 @@ class Button extends HTMLElement {
     if (this.hasAttribute('labeled')) {
       styles.push(CSS_CLASSES.labeled);
     }
-    if (this.hasAttribute('squircle')) {
-      styles.push(CSS_CLASSES.squircle);
-    }
     if (this.hasAttribute('icon')) {
       styles.push(CSS_CLASSES.icon);
     }

package/src/components/button/index.stories.js

@@ -66,7 +66,7 @@ storiesOf('Common', module)
 
         <h3>Standart button</h3>
 
-        <itf-button squircle primary>Primary button</itf-button>
+        <itf-button primary>Primary button</itf-button>
         <itf-button secondary>Secondary button</itf-button>
         <itf-button>Basic button</itf-button>
         <itf-button icon>
@@ -92,7 +92,7 @@ storiesOf('Common', module)
 
         <h3>Large button</h3>
 
-        <itf-button squircle large primary>Primary button</itf-button>
+        <itf-button large primary>Primary button</itf-button>
         <itf-button large secondary>Secondary button</itf-button>
         <itf-button large>Basic button</itf-button>
         <itf-button large icon>

package/src/components/card/BentoGrid.vue

@@ -1,7 +1,6 @@
 <template>
   <grid-layout
     :layout="layout"
-    :responsive-layouts="responsiveLayouts"
     @update:layout="onUpdateLayout"
     class="itf-bento-grid"
     :col-num="4"
@@ -57,7 +56,6 @@ export default @Component({
 })
 class itfBentoGrid extends Vue {
   @Prop() layout;
-  @Prop() responsiveLayouts;
   @Prop() components;
   @Prop({ type: Boolean, default: true }) enabled;
 

package/src/components/customize/PropertiesList.vue

@@ -15,6 +15,7 @@
           :field="field"
           :editable="editable"
           :lock-fields="lockFields"
+          :full-name="fullName"
           :value="value[field.Id]"
           @input="$emit('input', { ...value, [field.Id]: $event })"
           @delete="onDelete(field)"
@@ -104,6 +105,7 @@ class itfPropertiesList extends Vue {
   @Prop({ type: Boolean, default: false }) loading;
   @Prop({ type: Boolean, default: false }) editable;
   @Prop({ type: Boolean, default: false }) lockFields;
+  @Prop({ type: Boolean, default: false }) fullName;
 
   isShowAll = false;
 

package/src/components/customize/PropertiesPopupMenu.vue

@@ -27,7 +27,7 @@
   </div>
 </template>
 <script>
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { Vue, Component, Prop } from 'vue-property-decorator';
 import itfTextField from '../text-field/TextField.vue';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';

package/src/components/customize/PropertyItem.vue

@@ -9,10 +9,10 @@
 
       <itf-dropdown text :disabled="!editable || lockFields" ref="editDd" autoclose="outside" class="flex-grow-1 mw-100 editable-field" shadow @close="onClose">
         <div slot="button">
-          <div class="d-flex align-items-center">
+          <div class="d-flex align-items-center" :class="{ 'b-properties-list__title-text': lockFields }">
 <!--            <itf-icon :name="field.Icon" :size="16" class="me-1" />-->
 
-            <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-text="field.Name" />
+            <div :class="`b-properties-list__title-text-${fullName ? 'full' : 'short'}`" v-text="field.Name" />
           </div>
         </div>
         <properties-edit-menu
@@ -35,11 +35,11 @@
         />
       </itf-dropdown>
     </div>
-    <div class="b-properties-list__value rounded-2" :class="{'editable': editable, 'active shadow rounded-2 bg-body': focusId === field.Id}" sortable-skip>
+    <div class="bg-light b-properties-list__value rounded-2" :class="{'editable': editable, 'active shadow rounded-2 bg-body': focusId === field.Id}" sortable-skip>
       <property-inline-edit
         @focus="onFocus(field.Id)"
         @blur="onBlur(field.Id)"
-        class="flex-grow-1 b-properties-list__inline-editor editable-field"
+        class="flex-grow-1 b-properties-list__inline-editor editable-field rounded-2"
         :field="field"
         :value="value"
         :editable="editable"
@@ -62,6 +62,11 @@
       background: rgba(0, 0, 0, 0.05);
     }
   }
+  &__inline-editor {
+    min-height: 44px;
+    padding-right: 10px;
+    padding-left: 10px;
+  }
   &__draghandler {
     user-select: none;
     transition: opacity 150ms ease-in 0s;
@@ -80,7 +85,7 @@
   }
   &__inner {
     display: flex;
-    padding-bottom: 4px;
+    padding-bottom: 8px;
     width: 100%;
   }
   &__name, &__value {
@@ -98,7 +103,7 @@
   &__name {
     display: flex;
     align-items: center;
-    height: 34px;
+    min-height: 44px;
     width: 250px;
     flex: 0 0 auto;
   }
@@ -119,6 +124,18 @@
       background-color: rgba(55, 53, 47, 0.08);
     }
   }
+  &__title-text {
+    min-height: 44px;
+  }
+  &__title-text-short {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &__title-text-full {
+    white-space: normal;
+    word-break: break-word;
+  }
 }
 </style>
 <script>
@@ -154,6 +171,7 @@ class itfPropertyItem extends Vue {
   @Prop({ type: Boolean, default: false }) loading;
   @Prop({ type: Boolean, default: false }) editable;
   @Prop({ type: Boolean, default: false }) lockFields;
+  @Prop({ type: Boolean, default: false }) fullName;
 
   isEditMode = false;
   focusId = null;

package/src/components/datepicker/DatePicker.vue

@@ -24,7 +24,7 @@
       :disabled="disabled"
     />
 
-    <div class="addon-end" v-if="clearable && value">
+    <div class="addon-end" v-if="clearable && value && !isInvalid()">
       <slot name="clear">
         <itf-button
           icon

package/src/components/datepicker/MonthPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-monthpicker" :class="{'with-addon addon-start': prependIcon}">
+  <div class="itf-monthpicker" :class="{'with-addon addon-start': prependIcon, 'with-addon addon-end': clearable}">
     <div class="addon" v-if="prependIcon">
       <slot name="addon">
         <itf-icon :name="prependIcon" />
@@ -16,6 +16,18 @@
       :value="displayValue"
       :placeholder="placeholder"
     />
+    <div class="addon-end" v-if="clearable && value && !isInvalid()">
+      <slot name="clear">
+        <itf-button
+          icon
+          small
+          @click="$emit('input', '')"
+        >
+          <itf-icon name="close" />
+        </itf-button>
+      </slot>
+    </div>
+
     <div style="display: none">
       <div ref="dropdown" class="itf-monthpicker__dropdown border rounded">
         <div>
@@ -36,16 +48,23 @@
     </div>
   </div>
 </template>
+<style>
+.itf-monthpicker .addon-end {
+  top: 0
+}
+</style>
 <script>
 import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
 import { DateTime } from 'luxon';
 import tippy from 'tippy.js';
 import itfIcon from '../icon/Icon';
 import itfDatePickerInline from './DatePickerInline.vue';
+import itfButton from "@itfin/components/src/components/button/Button.vue";
 
 export default @Component({
   name: 'itfMonthPicker',
   components: {
+    itfButton,
     itfIcon,
     itfDatePickerInline
   },
@@ -63,6 +82,7 @@ class itfMonthPicker extends Vue {
   @Prop({ type: String, default: '' }) placeholder;
   @Prop({ type: String, default: '' }) prependIcon;
   @Prop({ type: String, default: 'bottom-start' }) placement;
+  @Prop(Boolean) clearable;
 
   focused = false;
 

package/src/components/dropdown/Dropdown.vue

@@ -1,5 +1,5 @@
 <script>
-import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator';
+import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
 import itfButton from '../button/Button';
 import itfDropdownMenu from './DropdownMenu';
 

package/src/components/dropdown/DropdownMenu.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator';
+import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
 
 let globalModalIndex = 0; // base modal z-index
 

package/src/components/editable/EditButton.vue

@@ -24,7 +24,7 @@
 }
 </style>
 <script>
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
 

package/src/components/filter/FilterBadge.vue

@@ -12,7 +12,7 @@
       </div>
     </template>
 
-    <div>
+    <div class="px-2">
       <template v-if="type === 'list'">
         <a
           v-for="(item, n) in options.items"
@@ -24,7 +24,7 @@
       </template>
       <template v-else-if="type === 'period'">
         <itf-date-range-picker-inline
-          style="margin: -.5rem 0"
+          style="margin: -.5rem"
           :value="value.value"
           @input="onFilterChange({ value: $event })"
         />
@@ -48,12 +48,13 @@
       </template>
       <template v-else-if="type === 'date'">
         <itf-date-picker-inline
-          style="margin: -.5rem 0"
+          style="margin: -.5rem"
           :value="value.value"
           :only-calendar="options.calendarOptions && options.calendarOptions.onlyCalendar"
           :max-date="options.calendarOptions && options.calendarOptions.maxDate"
           :min-date="options.calendarOptions && options.calendarOptions.minDate"
-          value-format="yyyy-MM-dd"
+          :start-view="options.calendarOptions && options.calendarOptions.startView"
+          :min-view="options.calendarOptions && options.calendarOptions.minView"
           @input="onFilterChange({ value: $event })"
         />
       </template>

package/src/components/filter/FilterFacetsList.vue

@@ -41,6 +41,7 @@
         </div>
       </div>
     </div>
+    </div>
 
     <itf-button default class="mt-1" v-if="hasMore" small block @click="toggleMore">
       <span v-if="showMore">{{ $t('components.filter.hideMore', { count: visibleList.length }) }}</span>
@@ -86,7 +87,7 @@
   margin: 1px 0;
   &.active {
     .facet-bar-progress {
-      background-color: var(--bs-blue);
+      background-color: var(--bs-primary);
     }
   }
   .facet-name {
@@ -115,7 +116,7 @@
     width: var(--bar-width);
     min-width: 5px;
     height: 10px;
-    background-color: rgba(var(--bs-blue-rgb), 50%);
+    background-color: rgba(var(--bs-primary-rgb), 50%);
     transition: width 0.3s ease 0s;
   }
 }

package/src/components/filter/FilterPanel.vue

@@ -35,8 +35,8 @@
           class="itf-filter-panel__badge"
           :ref="'item-' + n"
           v-model="filter[facet.name]"
-          :is-default="filter[facet.name].isDefault"
-          :text="filter[facet.name].label"
+          :is-default="filter[facet.name] && filter[facet.name].isDefault"
+          :text="filter[facet.name] && filter[facet.name].label"
           :type="facet.type"
           :icon="facet.icon"
           :options="facet.options"
@@ -377,11 +377,25 @@ class FilterPanel extends Vue {
       }
     } else if (facet.type === 'date') {
       const date = DateTime.fromISO(value.value);
-      value.label = (date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('dd MMM yyyy');
-      value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
-      if (value.isDefault && facet.options.defaultValue.label) {
-        value.label = facet.options.defaultValue.label;
+      const effectiveDate = (date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value ?? DateTime.now().toISO()));
+      // Якщо календарь в режимі вибору місяця (startView/minView === 'month'),
+      // відображаємо весь місяць, наприклад: "01 - 31 Mar 2026"
+      if (
+        facet.options?.calendarOptions &&
+        facet.options.calendarOptions.startView === 'months' &&
+        facet.options.calendarOptions.minView === 'months'
+      ) {
+        const startOfMonth = effectiveDate.startOf('month');
+        const endOfMonth = effectiveDate.endOf('month');
+        const startLabel = startOfMonth.toFormat('dd');
+        const endLabel = endOfMonth.toFormat('dd MMM yyyy');
+        value.label = `${startLabel} - ${endLabel}`;
+      } else {
+        // Стандартний сценарій: одиночна дата
+        value.label = effectiveDate.toFormat('dd MMM yyyy');
       }
+
+      value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
     } else if  (facet.type === 'month') {
       const date = DateTime.fromISO(value.value);
       value.label = capitalizeFirstLetter((date.isValid ? date : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('LLLL yyyy'));

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-help.vue

@@ -1,4 +1,5 @@
-<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M11.965 16.2C12.21 16.2 12.4172 16.1153 12.5866 15.9459C12.756 15.7765 12.8405 15.5695 12.84 15.325C12.8395 15.0805 12.7551 14.8733 12.5866 14.7034C12.4181 14.5335 12.2109 14.4491 11.965 14.45C11.7191 14.4509 11.5121 14.5356 11.3441 14.7041C11.1761 14.8726 11.0914 15.0795 11.09 15.325C11.0886 15.5705 11.1733 15.7777 11.3441 15.9466C11.5149 16.1155 11.7219 16.2 11.965 16.2ZM12 19C11.0317 19 10.1217 18.8161 9.27001 18.4484C8.41834 18.0807 7.67751 17.582 7.04751 16.9525C6.41751 16.323 5.91888 15.5821 5.55162 14.73C5.18435 13.8779 5.00048 12.9679 5.00002 12C4.99955 11.0321 5.18342 10.1221 5.55162 9.27C5.91981 8.41787 6.41845 7.67704 7.04751 7.04751C7.67658 6.41798 8.41741 5.91934 9.27001 5.55161C10.1226 5.18388 11.0326 5.00001 12 5.00001C12.9674 5.00001 13.8774 5.18388 14.73 5.55161C15.5826 5.91934 16.3234 6.41798 16.9525 7.04751C17.5816 7.67704 18.0804 8.41787 18.4491 9.27C18.8178 10.1221 19.0014 11.0321 19 12C18.9986 12.9679 18.8147 13.8779 18.4484 14.73C18.0821 15.5821 17.5834 16.323 16.9525 16.9525C16.3216 17.582 15.5807 18.0809 14.73 18.4491C13.8793 18.8173 12.9693 19.0009 12 19ZM12.07 8.99C12.3617 8.99 12.6155 9.08334 12.8316 9.27C13.0477 9.45667 13.1555 9.69 13.155 9.97C13.155 10.2267 13.0764 10.4542 12.9191 10.6525C12.7618 10.8508 12.5838 11.0375 12.385 11.2125C12.1167 11.4458 11.8805 11.7025 11.6766 11.9825C11.4727 12.2625 11.3705 12.5775 11.37 12.9275C11.37 13.0908 11.4314 13.228 11.5541 13.3391C11.6768 13.4502 11.8196 13.5055 11.9825 13.505C12.1575 13.505 12.3064 13.4467 12.4291 13.33C12.5518 13.2133 12.6305 13.0675 12.665 12.8925C12.7117 12.6475 12.8167 12.4289 12.98 12.2366C13.1433 12.0443 13.3183 11.8605 13.505 11.685C13.7733 11.4283 14.0039 11.1483 14.1966 10.845C14.3893 10.5417 14.4855 10.2033 14.485 9.83C14.485 9.235 14.243 8.74804 13.7591 8.36911C13.2752 7.99017 12.7121 7.80047 12.07 7.80001C11.6267 7.80001 11.2039 7.89334 10.8016 8.08001C10.3993 8.26667 10.093 8.55251 9.88251 8.93751C9.80084 9.0775 9.77471 9.22637 9.80411 9.3841C9.83351 9.54184 9.91214 9.6613 10.04 9.7425C10.2033 9.83584 10.3725 9.865 10.5475 9.83C10.7225 9.795 10.8683 9.69584 10.985 9.5325C11.1133 9.3575 11.2739 9.22334 11.4666 9.13C11.6593 9.03667 11.8605 8.99 12.07 8.99Z" fill="currentColor"/>
+<template><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
 </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-lock.vue

@@ -1,4 +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="M12 4.3999C13.9882 4.3999 15.6 6.01168 15.6 7.9999V10.0489C16.033 10.1018 16.3329 10.2114 16.5607 10.4392C17 10.8786 17 11.5857 17 12.9999V14.9999C17 16.4141 17 17.1212 16.5607 17.5606C16.1213 17.9999 15.4142 17.9999 14 17.9999H10C8.58579 17.9999 7.87868 17.9999 7.43934 17.5606C7 17.1212 7 16.4141 7 14.9999V12.9999C7 11.5857 7 10.8786 7.43934 10.4392C7.66715 10.2114 7.96695 10.1018 8.4 10.0489L8.4 7.9999C8.4 6.01168 10.0118 4.3999 12 4.3999ZM14.4 7.9999V10.0003C14.2733 9.99991 14.1401 9.99991 14 9.99991H10C9.85987 9.99991 9.72668 9.99991 9.6 10.0003L9.6 7.9999C9.6 6.67442 10.6745 5.5999 12 5.5999C13.3255 5.5999 14.4 6.67442 14.4 7.9999ZM12.6 12.9999C12.6 12.6685 12.3314 12.3999 12 12.3999C11.6686 12.3999 11.4 12.6685 11.4 12.9999V14.9999C11.4 15.3313 11.6686 15.5999 12 15.5999C12.3314 15.5999 12.6 15.3313 12.6 14.9999V12.9999Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.40002C13.9882 4.40002 15.6 6.0118 15.6 8.00002V10.0491C16.033 10.1019 16.3329 10.2116 16.5607 10.4394C17 10.8787 17 11.5858 17 13V15C17 16.4142 17 17.1214 16.5607 17.5607C16.1213 18 15.4142 18 14 18H10C8.58579 18 7.87868 18 7.43934 17.5607C7 17.1214 7 16.4142 7 15V13C7 11.5858 7 10.8787 7.43934 10.4394C7.66715 10.2116 7.96695 10.1019 8.4 10.0491L8.4 8.00002C8.4 6.0118 10.0118 4.40002 12 4.40002ZM14.4 8.00002V10.0005C14.2733 10 14.1401 10 14 10H10C9.85987 10 9.72668 10 9.6 10.0005L9.6 8.00002C9.6 6.67454 10.6745 5.60002 12 5.60002C13.3255 5.60002 14.4 6.67454 14.4 8.00002ZM12.6 13C12.6 12.6687 12.3314 12.4 12 12.4C11.6686 12.4 11.4 12.6687 11.4 13V15C11.4 15.3314 11.6686 15.6 12 15.6C12.3314 15.6 12.6 15.3314 12.6 15V13Z" fill="currentColor"/>
 </svg>
 </template>

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

@@ -1,4 +1,4 @@
-<template><svg width="24" height="24" viewBox="-3 -3 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.53589 6C8.70919 5.69981 8.92222 5.42092 9.17157 5.17157C9.92172 4.42143 10.9391 4 12 4C13.0609 4 14.0783 4.42143 14.8284 5.17157C15.0778 5.42092 15.2908 5.69981 15.4641 6H8.53589ZM7.41742 6C7.66505 5.4326 8.01823 4.9107 8.46447 4.46447C9.40215 3.52678 10.6739 3 12 3C13.3261 3 14.5979 3.52678 15.5355 4.46447C15.9818 4.9107 16.3349 5.4326 16.5826 6H20C20.5523 6 21 6.44772 21 7V13C21 13.5523 20.5523 14 20 14H4C3.44772 14 3 13.5523 3 13V7C3 6.44772 3.44772 6 4 6H7.41742ZM3 14.7324V19C3 19.5523 3.44772 20 4 20H20C20.5523 20 21 19.5523 21 19V14.7324C20.7058 14.9026 20.3643 15 20 15H4C3.63571 15 3.29417 14.9026 3 14.7324ZM10 11.5C10 11.2239 10.2239 11 10.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H10.5C10.2239 12 10 11.7761 10 11.5Z" fill="currentColor"/>
+<template><svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0003 15.8337C13.222 15.8337 15.8337 13.222 15.8337 10.0003C15.8337 6.77866 13.222 4.16699 10.0003 4.16699C6.77866 4.16699 4.16699 6.77866 4.16699 10.0003C4.16699 13.222 6.77866 15.8337 10.0003 15.8337ZM7.91697 10.0003C7.91697 8.84973 8.84971 7.91699 10.0003 7.91699C11.1509 7.91699 12.0836 8.84973 12.0836 10.0003C12.0836 11.1509 11.1509 12.0837 10.0003 12.0837C8.84971 12.0837 7.91697 11.1509 7.91697 10.0003ZM10.0003 6.25032C7.92924 6.25032 6.25031 7.92925 6.25031 10.0003C6.25031 12.0714 7.92924 13.7503 10.0003 13.7503C12.0714 13.7503 13.7503 12.0714 13.7503 10.0003C13.7503 7.92925 12.0714 6.25032 10.0003 6.25032Z" fill="currentColor"/>
 </svg>
 </template>

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

@@ -1,4 +1,4 @@
 <template><svg style="transform: rotate(-90deg);" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="-1 -1 19 19">
-  <path fill="currentColor" d="M3.5 3.5c-.614-.884-.074-1.962.858-2.5L8 7.226 11.642 1c.932.538 1.472 1.616.858 2.5L8.81 8.61l1.556 2.661a2.5 2.5 0 1 1-.794.637L8 9.73l-1.572 2.177a2.5 2.5 0 1 1-.794-.637L7.19 8.61zm2.5 10a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0m7 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"/>
+  <path d="M3.5 3.5c-.614-.884-.074-1.962.858-2.5L8 7.226 11.642 1c.932.538 1.472 1.616.858 2.5L8.81 8.61l1.556 2.661a2.5 2.5 0 1 1-.794.637L8 9.73l-1.572 2.177a2.5 2.5 0 1 1-.794-.637L7.19 8.61zm2.5 10a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0m7 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0"/>
 </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/components/nomi-user.vue

@@ -1,5 +1,5 @@
-<template><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="15.9998" cy="11.3333" r="3.33333" fill="currentColor"/>
-  <path d="M10.6054 24C9.29221 24 8.63561 24 8.23231 23.44C7.82902 22.88 8.00385 22.3808 8.35352 21.3824C8.40585 21.233 8.46271 21.085 8.52407 20.9385C8.93073 19.9679 9.52677 19.086 10.2782 18.3431C11.0296 17.6003 11.9216 17.011 12.9034 16.609C13.8851 16.2069 14.9374 16 16 16C17.0626 16 18.1149 16.2069 19.0966 16.609C20.0784 17.011 20.9704 17.6003 21.7218 18.3431C22.4732 19.086 23.0693 19.9679 23.4759 20.9385C23.5373 21.085 23.5941 21.233 23.6465 21.3824C23.9961 22.3808 24.171 22.88 23.7677 23.44C23.3644 24 22.7078 24 21.3946 24L10.6054 24Z" fill="currentColor"/>
+<template><svg width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10.0003" cy="7.08333" r="2.08333" fill="currentColor"/>
+<path d="M6.62838 15C5.80763 15 5.39726 15 5.1452 14.65C4.89314 14.3 5.00241 13.988 5.22095 13.364C5.25366 13.2706 5.2892 13.1781 5.32754 13.0866C5.5817 12.48 5.95423 11.9288 6.42386 11.4645C6.89348 11.0002 7.45101 10.6319 8.06461 10.3806C8.6782 10.1293 9.33585 10 10 10C10.6642 10 11.3218 10.1293 11.9354 10.3806C12.549 10.6319 13.1065 11.0002 13.5761 11.4645C14.0458 11.9288 14.4183 12.48 14.6725 13.0866C14.7108 13.1781 14.7463 13.2706 14.779 13.364C14.9976 13.988 15.1069 14.3 14.8548 14.65C14.6027 15 14.1924 15 13.3716 15L6.62838 15Z" fill="currentColor"/>
 </svg>
 </template>

package/src/components/icon/convert-icons.js

@@ -17,9 +17,6 @@ async function bootstrap() {
     });
   }));
   await Promise.all(fs.readdirSync(fromNewFolder).map((file) => {
-    if (file.includes('.DS_Store')) {
-      return;
-    }
     return new Promise((resolve) => {
       fs.readFile(`${fromNewFolder}/${file}`, { encoding: 'utf-8' }, (err, data) => {
         fs.writeFile(`${toFolder}/nomi-${file.replace('.svg', '.vue')}`, `<template>${data}</template>`, (err) => {