@itfin/components 1.4.30 → 1.4.35

package/package.json

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

package/src/components/app/App.vue

@@ -74,9 +74,12 @@ class itfApp extends Vue {
     try {
       await func();
     } catch (err) {
-      this.showError(err.message);
-      if (errFunc) {
-        errFunc(err);
+      if (err.code !== 'ERR_CANCELED') {
+        console.error(err);
+        this.showError(err.message);
+        if (errFunc) {
+          errFunc(err);
+        }
       }
     }
   }

package/src/components/checkbox/Checkbox.vue

@@ -2,7 +2,7 @@
 
   <div class="itf-checkbox form-check" :class="{ 'form-switch': this.switch, 'itf-checkbox__large': large, 'itf-checkbox__medium': medium }">
     <input class="form-check-input" ref="input" :id="id" type="checkbox" name="checkbox" v-model="isChecked" :disabled="isDisabled" />
-    <label :for="id" class="form-check-label">
+    <label :for="id" class="form-check-label w-100" :class="{ 'disabled': isDisabled }">
       <slot name="label">
         {{label}}
         <slot name="icon"></slot>

package/src/components/checkbox/RadioBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-radio-box form-check card" :class="{ 'itf-radio__large': large, 'itf-radio__medium': medium, 'active': isChecked, 'right': right, 'left': !right }">
+  <div class="itf-radio-box form-check card" :class="{ 'disabled': disabled, 'itf-radio__large': large, 'itf-radio__medium': medium, 'active': isChecked, 'right': right, 'left': !right }">
     <input class="form-check-input" :id="id" type="radio" :name="radioName" v-model="isChecked" :value="true" :disabled="disabled" />
     <label :for="id" slot="label" class="form-check-label card-body">
 
@@ -18,6 +18,17 @@
   position: relative;
   cursor: pointer;
 
+  &:not(.disabled) {
+    cursor: pointer;
+
+    .form-check-label {
+      cursor: pointer;
+    }
+  }
+
+  .form-check-label {
+    cursor: not-allowed;
+  }
   &.left {
     padding: 0 0 0 2.5rem;
 
@@ -38,13 +49,9 @@
   &.active {
     background-color: rgba(var(--bs-primary-rgb),.1) !important;
   }
-  &:hover {
+  &:hover:not(.disabled) {
     background-color: rgba(0,0,0,.05);
   }
-
-  .form-check-label {
-    cursor: pointer;
-  }
 }
 </style>
 <script>

package/src/components/customize/PropertyItem.vue

@@ -9,7 +9,7 @@
 
       <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 :class="`b-properties-list__title-text-${fullName ? 'full' : 'short'}`" v-text="field.Name" />
@@ -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;
-    min-height: 34px;
+    min-height: 44px;
     width: 250px;
     flex: 0 0 auto;
   }
@@ -119,6 +124,9 @@
       background-color: rgba(55, 53, 47, 0.08);
     }
   }
+  &__title-text {
+    min-height: 44px;
+  }
   &__title-text-short {
     white-space: nowrap;
     overflow: hidden;

package/src/components/datepicker/DatePickerInline.vue

@@ -11,9 +11,9 @@
         <button
           v-for="(item, n) in daysList"
           :key="n"
-          :disabled="!isEnabled(item.date())"
-          :class="{'active': isSelected(item.date())}"
-          @click="selectDate(item.date())"
+          :disabled="!isEnabled(item.date)"
+          :class="{'active': isSelected(item.date)}"
+          @click="selectDate(item.date)"
           class="btn btn-outline-primary btn-sm text-start">
           {{item.title}}
         </button>
@@ -30,31 +30,29 @@ export default @Component({
   name: 'itfDatePickerInline',
 })
 class itfDatePickerInline extends Vue {
-  @Prop() value;
+  @Prop({ type: String }) value;
   @Prop({ type: String, default: 'yyyy-MM-dd' }) valueFormat;
   @Prop({ type: String, default: ITFSettings.defaultDisplayDateFormat }) displayFormat;
+  @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) startView;
+  @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) minView;
   @Prop({ type: Boolean, default: false }) onlyCalendar;
+  @Prop({ type: Boolean, default: false }) range;
   @Prop({ type: Object, default: () => ({}) }) customDays;
   @Prop({ type:  [String, Date], default: '' }) minDate;
   @Prop({ type:  [String, Date], default: '' }) maxDate;
-  @Prop({ type:  String, default: 'days' }) minView;
   @Prop({
     type: Array,
     default: function () {
-      return [// { title: 'Today', date: () => [DateTime.local(), DateTime.local()] },
-        { title: this.$t('components.thisWeek'), date: () => [DateTime.local().startOf('week'), DateTime.local().endOf('week')] },
-        { title: this.$t('components.lastWeek'), date: () => [DateTime.local().minus({ week: 1 }).startOf('week'), DateTime.local().minus({ week: 1 }).endOf('week')] },
-        { title: this.$t('components.thisMonth'), date: () => [DateTime.local().startOf('month'), DateTime.local().endOf('month')] },
-        { title: this.$t('components.lastMonth'), date: () => [DateTime.local().minus({ months: 1 }).startOf('month'), DateTime.local().minus({ months: 1 }).endOf('month')] },
-        { title: this.$t('components.thisQuarter'), date: () => [DateTime.local().startOf('quarter'), DateTime.local().endOf('quarter')] },
-        { title: this.$t('components.lastQuarter'), date: () => [DateTime.local().minus({ quarter: 1 }).startOf('quarter'), DateTime.local().minus({ quarter: 1 }).endOf('quarter')] },
-        { title: this.$t('components.thisYear'), date: () => [DateTime.local().startOf('year'), DateTime.local().endOf('year')] },
-        { title: this.$t('components.lastYear'), date: () => [DateTime.local().minus({ year: 1 }).startOf('year'), DateTime.local().minus({ year: 1 }).endOf('year')] },
+      return [
+        { title: this.$t('components.today'), date: {} },
+        { title: this.$t('components.tomorrow'), date: { days: 1 } },
+        { title: this.$t('components.inAWeek'), date: { week: 1 } },
+        { title: this.$t('components.inAMonth'), date: { month: 1 } },
+        { title: this.$t('components.inAHalfYear'), date: { month: 6 } },
+        { title: this.$t('components.inAYear'), date: { year: 1 } },
       ];
     }
   }) daysList;
-  @Prop(Boolean) compare;
-  @Prop({ type: Array }) range; // for compare mode
 
   calendar = null;
 
@@ -62,17 +60,12 @@ class itfDatePickerInline extends Vue {
     this.createCalendar();
   }
 
-  compareMode(value) {
-    return this.calendar.compareMode(value);
-  }
-
   @Watch('minDate')
-  @Watch('maxDate')
-  @Watch('minView')
   async createCalendar() {
     if (this.calendar) {
       this.destroyCalendar();
     }
+
     const [
       { default: AirDatepicker },
       { default: localeEn },
@@ -90,35 +83,28 @@ class itfDatePickerInline extends Vue {
       uk: localeUk,
       de: localeDe,
     };
-    const opts = {
+    this.calendar = new AirDatepicker(this.$refs.calendar, {
       locale: locales[this.$i18n.locale] || locales.en,
       firstDay: 1,
       altFieldDateFormat: this.valueFormat,
+      range: this.range,
+      view: (this.valueAsLuxon && !this.minView) ? 'days' : this.startView,
+      minView: this.minView,
       minDate: this.minDate,
       maxDate: this.maxDate,
-      view: this.minView,
-      minView: this.minView,
-      range: true,
-      compareRange: true,
-      dynamicRange: true,
-      toggleSelected: function({ date, datepicker }) {
-        if (datepicker.selectedDates.length > 1) {
-          datepicker.selectDate(date);
-        }
-        return false;
-      },
-      selectedDates: this.valueAsLuxon
-        ? [this.valueAsLuxon[0].toJSDate(), this.valueAsLuxon[1].toJSDate()]
-        : [],
-      onSelect: () => {
-        if (!this.calendar.rangeDateTo) {
+      selectedDates: this.valueAsLuxon ? [this.valueAsLuxon.toJSDate()] : [],
+      onSelect: ({ date }) => {
+        if (this.range && !this.calendar.rangeDateTo) {
           return;
         }
-        this.updateValue(
-          DateTime.fromJSDate(this.calendar.rangeDateFrom).toFormat(this.displayFormat),
-          DateTime.fromJSDate(this.calendar.rangeDateTo).toFormat(this.displayFormat),
-          false,
-        );
+        if (this.range) {
+          this.updateValue(
+            DateTime.fromJSDate(this.calendar.rangeDateFrom).toFormat(this.displayFormat),
+            false
+          );
+        } else {
+          this.updateValue(DateTime.fromJSDate(date).toFormat(this.displayFormat));
+        }
       },
       onRenderCell: ({ date }) => {
         const strDate = DateTime.fromJSDate(date).toFormat('yyyy-MM-dd');
@@ -127,22 +113,13 @@ class itfDatePickerInline extends Vue {
         }
         return {
           html: this.customDays[strDate].text || false,
-          classes: this.customDays[strDate].class || false,
+          classes: this.customDays[strDate].class || false
         };
       },
-    };
-    if (this.compare) {
-      opts.compareRange = true;
-    }
-
-    this.calendar = new AirDatepicker(this.$refs.calendar, opts);
+    });
     if (this.valueAsLuxon) {
-      this.calendar.setViewDate(this.valueAsLuxon[0].toJSDate());
-    }
-    if (this.compare) {
-      this.calendar.compareMode(true);
+      this.calendar.setViewDate(this.valueAsLuxon.toJSDate());
     }
-    this.onRangeChange();
   }
 
   beforeDestroy() {
@@ -158,97 +135,59 @@ class itfDatePickerInline extends Vue {
   }
 
   get valueAsLuxon() {
-    if (!this.value || this.value.length < 2 || !this.value[0] || !this.value[1]) {
+    if (!this.value) {
       return null;
     }
     if (this.valueFormat === 'ISO') {
-      return [
-        DateTime.fromISO(this.value[0]),
-        DateTime.fromISO(this.value[1]),
-      ];
+      return DateTime.fromISO(this.value);
+    }
+    return DateTime.fromFormat(this.value, this.valueFormat);
+  }
+
+  get displayValue() {
+    if (!this.valueAsLuxon) {
+      return '';
     }
-    return [
-      DateTime.fromFormat(this.value[0], this.valueFormat),
-      DateTime.fromFormat(this.value[1], this.valueFormat),
-    ];
+    return this.valueAsLuxon.toFormat(this.displayFormat);
   }
 
-  updateValue(date1, date2, emitEmpty = false) {
-    const val = date1 && DateTime.fromFormat(date1, this.displayFormat);
-    const val2 = date2 && DateTime.fromFormat(date2, this.displayFormat);
-    if (!val || !val.isValid || !val2 || !val2.isValid) {
+  updateValue(value, emitEmpty = false) {
+    const val = value && DateTime.fromFormat(value, this.displayFormat);
+    if (!val || !val.isValid) {
       if (emitEmpty) {
         this.$emit('input', null);
       }
       return;
     }
-    if ((this.minDateLuxon && (val < this.minDateLuxon || val2 < this.minDateLuxon)) ||
-      (this.maxDateLuxon && (val > this.maxDateLuxon || val2 > this.maxDateLuxon))
-    ) {
-      return;
-    }
-
     if (this.valueFormat === 'ISO') {
-      return this.$emit('input', [val.toISO(), val2.toISO()]);
+      return this.$emit('input', val.toISO());
     }
-    this.$emit('input', [
-      val.toFormat(this.valueFormat),
-      val2.toFormat(this.valueFormat),
-    ]);
+    this.$emit('input', val.toFormat(this.valueFormat));
   }
 
-  get minDateLuxon() {
-    return this.minDate && this.dateLuxon(this.minDate);
-  }
-  get maxDateLuxon() {
-    return this.maxDate && this.dateLuxon(this.maxDate);
+  isSelected(date) {
+    if (!this.valueAsLuxon) {
+      return false;
+    }
+    return this.valueAsLuxon.hasSame(DateTime.local().plus(date), 'day');
   }
 
-  dateLuxon(date) {
-    return typeof date === 'string' ? DateTime.fromISO(date) : DateTime.fromJSDate(date);
+  get minDateLuxon() {
+    return this.minDate && (typeof this.minDate === 'string' ? DateTime.fromISO(this.minDate) : DateTime.fromJSDate(this.minDate));
   }
 
   isEnabled(date) {
-    const lxDate1 = date[0].set({ hours: 0, minutes: 0, seconds: 0 });
-    const lxDate2 = date[1].set({ hours: 23, minutes: 59, seconds: 59 });
-
-    if (this.minDateLuxon) {
-      if (this.maxDateLuxon) {
-        return lxDate1 > this.minDateLuxon && lxDate2 > this.minDateLuxon && lxDate1 < this.maxDateLuxon && lxDate2 < this.maxDateLuxon;
-      } else {
-        return lxDate1 > this.minDateLuxon && lxDate2 > this.minDateLuxon;
-      }
-    } else if (this.maxDateLuxon) {
-      return lxDate1 < this.maxDateLuxon && lxDate2 < this.maxDateLuxon;
-    }
-
-    return true;
-  }
-
-  isSelected(date) {
-    if (!this.valueAsLuxon || this.valueAsLuxon.length < 2) {
-      return false;
-    }
-    return this.valueAsLuxon[0].hasSame(date[0], 'day') &&
-      this.valueAsLuxon[1].hasSame(date[1], 'day');
+    const lxDate = DateTime.local().plus(date);
+    return !(this.minDateLuxon && lxDate < this.minDateLuxon);
   }
 
   selectDate(date) {
-    const lxDate1 = date[0].set({ hours: 0, minutes: 0, seconds: 0 });
-    const lxDate2 = date[1].set({ hours: 23, minutes: 59, seconds: 59 });
-    this.updateValue(lxDate1.toFormat(this.displayFormat), lxDate2.toFormat(this.displayFormat));
-    this.calendar.selectDate([lxDate1.toJSDate(), lxDate2.toJSDate()], { silent: true });
-  }
-
-  @Watch('range')
-  onRangeChange() {
-    if (!this.calendar) {
+    let lxDate = DateTime.local().plus(date);
+    if (this.minDateLuxon && lxDate < this.minDateLuxon) {
       return;
     }
-    this.calendar.selectCompareRange(this.range ? [
-      DateTime.fromFormat(this.range[0], this.valueFormat).toJSDate(),
-      DateTime.fromFormat(this.range[1], this.valueFormat).toJSDate(),
-    ] : []);
+    this.calendar.selectDate(lxDate.toJSDate());
+    this.updateValue(lxDate.toFormat(this.displayFormat));
   }
 
   @Watch('value')
@@ -257,13 +196,7 @@ class itfDatePickerInline extends Vue {
       this.calendar && this.calendar.clear({ silent: true });
       return;
     }
-    const date1 = this.calendar.rangeDateFrom && DateTime.fromJSDate(this.calendar.rangeDateFrom).toFormat('yyyy-MM-dd')
-    const date2 = this.calendar.rangeDateTo && DateTime.fromJSDate(this.calendar.rangeDateTo).toFormat('yyyy-MM-dd')
-    if (date1 !== this.valueAsLuxon[0].toFormat('yyyy-MM-dd') || date2 !== this.valueAsLuxon[1].toFormat('yyyy-MM-dd')) {
-      this.$nextTick(() => {
-        this.calendar.selectDate(this.valueAsLuxon && [this.valueAsLuxon[0].toJSDate(), this.valueAsLuxon[1].toJSDate()], { silent: true });
-      });
-    }
+    this.calendar.selectDate(this.valueAsLuxon.toJSDate(), { silent: true });
   }
 }
 </script>

package/src/components/filter/FilterPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-filter-panel d-flex flex-column align-items-start" :class="{'gap-3': !filtersOnly}">
+  <div class="itf-filter-panel d-flex flex-column gap-3 align-items-start">
     <div v-if="!filtersOnly" class="d-flex gap-2 justify-content-between w-100">
       <slot name="search">
         <div>
@@ -35,8 +35,8 @@
           class="itf-filter-panel__badge"
           :ref="'item-' + n"
           v-model="filter[facet.name]"
-          :is-default="filter[facet.name] && filter[facet.name].isDefault"
-          :text="filter[facet.name] && filter[facet.name].label"
+          :is-default="filter[facet.name].isDefault"
+          :text="filter[facet.name].label"
           :type="facet.type"
           :icon="facet.icon"
           :options="facet.options"
@@ -52,7 +52,7 @@
       </div>
       <slot name="after-filters"></slot>
     </div>
-    <div v-if="loading && !visibleFilters.length">
+    <div v-if="loading">
       <span class="itf-spinner"></span>
       {{$t('loading')}}
     </div>
@@ -177,8 +177,6 @@ class FilterPanel extends Vue {
       (entries) => {
         entries.forEach(entry => {
           const index = parseInt(entry.target.dataset.index);
-          const filter = this.filters[index];
-          const value = this.filter[filter.name];
           if (entry.isIntersecting) {
             this.visibleItems.add(index); // Додаємо, якщо елемент у полі зору
           } else {
@@ -208,7 +206,7 @@ class FilterPanel extends Vue {
 
   get visibleFilters() {
     if (this.mini) {
-      return sortBy(this.filters, (f) => this.filter[f.name].isDefault).filter(f => !f.options?.hidden);
+      return sortBy(this.filters, (f) => this.filter[f.name].isDefault).filter(f => !f.options?.hidden).slice(0, 2);
     }
     return this.filters.filter(f => !f.options?.hidden);
   }
@@ -235,7 +233,15 @@ class FilterPanel extends Vue {
 
     this.filters = this.staticFilters ?? [];
     if (this.endpoint) {
-      this.loadData();
+      this.loading = true;
+      await this.$try(async () => {
+        const payload = this.panel ? this.panel.getPayload() : {};
+        const {filters, tableSchema} = await this.$axios.$get(this.endpoint, { params: payload });
+        this.filters = filters;
+        this.$emit('set-table-schema', tableSchema);
+        this.loadFiltersValue();
+      });
+      this.loading = false;
     } else {
       this.loadFiltersValue();
     }
@@ -244,23 +250,6 @@ class FilterPanel extends Vue {
     }
   }
 
-  async loadData() {
-    this.loading = true;
-    await this.$try(async () => {
-      const payload = this.panel ? this.panel.getPayload() : {};
-      const {filters, tableSchema} = await this.$axios.$get(this.endpoint, {
-        preventRaceCondition: true,
-        params: payload
-      });
-      this.filters = filters;
-      this.loading = false;
-      this.$emit('set-table-schema', tableSchema);
-      this.loadFiltersValue();
-    }, () => {
-      this.loading = false;
-    });
-  }
-
   toggleFilters() {
     this.showFilters = !this.showFilters;
     if (this.stateName) {
@@ -280,7 +269,7 @@ class FilterPanel extends Vue {
           filterValue.to = payload.to;
         } else {
           filter[item.name] = payload[item.name] ? this.formatValue(item, { value: payload[item.name] }) : { isDefault: true, ...item.options.defaultValue };
-          filterValue[item.name] = payload[item.name];
+          filterValue[item.name] = payload[item.name] ?? filter[item.name].value;
         }
       }
     }
@@ -293,7 +282,6 @@ class FilterPanel extends Vue {
       this.filter = filter;
       this.filterValue = filterValue;
       this.$emit('input', this.filterValue);
-      this.$emit('loaded', this.filterValue);
       this.initObserver();
     }
   }
@@ -330,7 +318,6 @@ class FilterPanel extends Vue {
       this.panel.setPayload({ ...payload, ...this.filterValue });
     }
     this.$emit('input', this.filterValue);
-    this.$emit('change', this.filterValue);
   }
 
   get daysList() {
@@ -376,11 +363,7 @@ 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 ?? DateTime.now().toISO())).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'));
+      value.label = (date.isValid ? value.value : DateTime.fromISO(facet.options.defaultValue.value ?? DateTime.now())).toFormat('dd MMM yyyy');
       value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
     } else if (facet.type === 'facets-list') {
       const firstItem = facet.options.items.find(item => item.value === (Array.isArray(value.value) ? value.value[0] : value.value));
@@ -419,10 +402,6 @@ class FilterPanel extends Vue {
     }
     value.hidden = facet.options?.hidden ?? false;
     return value;
-
-    function capitalizeFirstLetter(string) {
-      return string.charAt(0).toUpperCase() + string.slice(1);
-    }
   }
 }
 </script>

package/src/components/icon/components/nomi-arrow_left.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 d="M12 19L5 12M5 12L12 5M5 12H19" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

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

@@ -0,0 +1,5 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.1484 3.91992L13.7451 5.11914L16.3584 4.24805L16.8125 5.61328L14.6318 6.33984L16.46 11.3682C14.9474 11.6415 13.6336 12.4861 12.7529 13.6729C11.9303 13.4792 11.1979 13.0524 10.6318 12.4629L12.8574 6.33984L10.1484 5.43652V15.2285H11.9268C11.7654 15.6851 11.6583 16.1669 11.6133 16.667H5.83301V15.2285H8.70996V5.43652L6.00098 6.33984L8.22754 12.4629C7.44212 13.2809 6.33683 13.79 5.11328 13.79C3.8899 13.79 2.7853 13.2807 2 12.4629L4.22559 6.33984L2.0459 5.61328L2.50098 4.24805L5.11328 5.11914L8.70996 3.91992V3H10.1484V3.91992ZM4.09375 10.9131H6.13281L5.11328 8.10938L4.09375 10.9131ZM12.7256 10.9131H14.7646L13.7451 8.10938L12.7256 10.9131Z" fill="currentColor"/>
+    <path d="M13.999 17C13.999 15.9391 14.4205 14.9217 15.1706 14.1716C15.9207 13.4214 16.9382 13 17.999 13C19.1173 13.0042 20.1906 13.4405 20.9946 14.2178L21.999 15.2222M21.999 15.2222V13M21.999 15.2222H19.7768M21.999 17C21.999 18.0609 21.5776 19.0783 20.8275 19.8284C20.0773 20.5786 19.0599 21 17.999 21C16.8808 20.9958 15.8075 20.5595 15.0035 19.7822L13.999 18.7778M13.999 18.7778H16.2212M13.999 18.7778V21" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-bar-horizontal.vue

@@ -0,0 +1,7 @@
+<template><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5 13.3333V10.8333C5 10.3731 5.3731 10 5.83333 10H6.66667C7.1269 10 7.5 10.3731 7.5 10.8333V13.3333C7.5 13.7936 7.1269 14.1667 6.66667 14.1667H5.83333C5.3731 14.1667 5 13.7936 5 13.3333Z" fill="currentColor"/>
+    <path d="M8.75 13.3333V5.83333C8.75 5.3731 9.1231 5 9.58333 5H10.4167C10.8769 5 11.25 5.3731 11.25 5.83333V13.3333C11.25 13.7936 10.8769 14.1667 10.4167 14.1667H9.58333C9.1231 14.1667 8.75 13.7936 8.75 13.3333Z" fill="currentColor"/>
+    <path d="M12.5 13.3333V8.33333C12.5 7.8731 12.8731 7.5 13.3333 7.5H14.1667C14.6269 7.5 15 7.8731 15 8.33333V13.3333C15 13.7936 14.6269 14.1667 14.1667 14.1667H13.3333C12.8731 14.1667 12.5 13.7936 12.5 13.3333Z" fill="currentColor"/>
+    <path d="M15.4163 15.4165H4.58301" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-check-alt.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 d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.745 9.41566 20.7162 6.93859 18.8888 5.11118C17.0614 3.28378 14.5843 2.25496 12 2.25ZM16.6406 10.2938L11.1469 15.5438C11.0049 15.6774 10.8169 15.7512 10.6219 15.75C10.5266 15.7514 10.4319 15.7338 10.3434 15.6984C10.2549 15.663 10.1743 15.6105 10.1063 15.5438L7.35938 12.9188C7.28319 12.8523 7.22123 12.7711 7.17722 12.6801C7.13321 12.589 7.10806 12.49 7.10328 12.389C7.0985 12.2881 7.11419 12.1871 7.14941 12.0924C7.18463 11.9976 7.23865 11.9109 7.30822 11.8375C7.3778 11.7642 7.46149 11.7056 7.55426 11.6654C7.64703 11.6252 7.74698 11.6042 7.84809 11.6036C7.94919 11.603 8.04938 11.6229 8.14261 11.662C8.23585 11.7011 8.32021 11.7587 8.39063 11.8312L10.6219 13.9594L15.6094 9.20625C15.7552 9.07902 15.9446 9.01309 16.1379 9.02223C16.3312 9.03138 16.5135 9.1149 16.6467 9.25533C16.7798 9.39576 16.8536 9.58222 16.8524 9.77575C16.8513 9.96928 16.7754 10.1549 16.6406 10.2938Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-credit.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 d="M17.54 6.75L7.04004 17.25M10.04 7.875C10.04 8.91053 9.20057 9.75 8.16504 9.75C7.12951 9.75 6.29004 8.91053 6.29004 7.875C6.29004 6.83947 7.12951 6 8.16504 6C9.20057 6 10.04 6.83947 10.04 7.875ZM18.29 16.125C18.29 17.1605 17.4506 18 16.415 18C15.3795 18 14.54 17.1605 14.54 16.125C14.54 15.0895 15.3795 14.25 16.415 14.25C17.4506 14.25 18.29 15.0895 18.29 16.125Z" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>

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

@@ -0,0 +1,5 @@
+<template><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 14L9 14C7.11438 14 6.17157 14 5.58579 13.4142C5 12.8284 5 11.8856 5 10L5 9C5 7.11438 5 6.17157 5.58579 5.58579C6.17157 5 7.11438 5 9 5L10 5C11.8856 5 12.8284 5 13.4142 5.58579C14 6.17157 14 7.11438 14 9L14 10C14 11.8856 14 12.8284 13.4142 13.4142C12.8284 14 11.8856 14 10 14Z" fill="currentColor"/>
+    <path d="M9.40039 14C9.40039 13.0742 9.39868 12.3195 9.47852 11.7256C9.56068 11.1144 9.73818 10.5841 10.1611 10.1611C10.5841 9.73818 11.1144 9.56068 11.7256 9.47852C12.3195 9.39868 13.0742 9.40039 14 9.40039L15 9.40039C15.9258 9.40039 16.6805 9.39868 17.2744 9.47852C17.8856 9.56068 18.4159 9.73818 18.8389 10.1611C19.2618 10.5841 19.4393 11.1144 19.5215 11.7256C19.6013 12.3195 19.5996 13.0742 19.5996 14L19.5996 15C19.5996 15.9258 19.6013 16.6805 19.5215 17.2744C19.4393 17.8856 19.2618 18.4159 18.8389 18.8389C18.4159 19.2618 17.8856 19.4393 17.2744 19.5215C16.6805 19.6013 15.9258 19.5996 15 19.5996L14 19.5996C13.0742 19.5996 12.3195 19.6013 11.7256 19.5215C11.1144 19.4393 10.5841 19.2618 10.1611 18.8389C9.73818 18.4159 9.56068 17.8856 9.47852 17.2744C9.39868 16.6805 9.40039 15.9258 9.40039 15L9.40039 14Z" fill="currentColor" stroke="white" stroke-width="1.2"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-goods-turnover.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 d="M19 6.28923V9.71569C19 9.94288 18.9115 10.1608 18.754 10.3214C18.5964 10.4821 18.3828 10.5723 18.16 10.5723H14.8C14.5772 10.5723 14.3636 10.4821 14.206 10.3214C14.0485 10.1608 13.96 9.94288 13.96 9.71569C13.96 9.4885 14.0485 9.27062 14.206 9.10997C14.3636 8.94933 14.5772 8.85907 14.8 8.85907H16.13L15.584 8.30227C14.5955 7.2892 13.253 6.71768 11.8516 6.71325H11.8215C10.4326 6.71015 9.09827 7.26484 8.1073 8.2573C7.94801 8.41614 7.73337 8.50395 7.5106 8.50141C7.28782 8.49887 7.07516 8.40618 6.9194 8.24374C6.76364 8.0813 6.67753 7.86241 6.68003 7.63523C6.68252 7.40805 6.77341 7.19118 6.9327 7.03234C8.23765 5.72561 9.99472 4.9955 11.8236 5.00002H11.86C13.705 5.00515 15.4725 5.75721 16.774 7.09088L17.32 7.64554V6.28923C17.32 6.06204 17.4085 5.84416 17.566 5.68351C17.7236 5.52286 17.9372 5.43261 18.16 5.43261C18.3828 5.43261 18.5964 5.52286 18.754 5.68351C18.9115 5.84416 19 6.06204 19 6.28923ZM15.8927 15.7427C14.9012 16.7357 13.5661 17.2904 12.1764 17.2867H12.1463C10.7448 17.2823 9.40243 16.7108 8.4139 15.6977L7.87 15.1409H9.2C9.42278 15.1409 9.63644 15.0507 9.79397 14.89C9.9515 14.7294 10.04 14.5115 10.04 14.2843C10.04 14.0571 9.9515 13.8392 9.79397 13.6786C9.63644 13.5179 9.42278 13.4277 9.2 13.4277H5.84C5.61722 13.4277 5.40356 13.5179 5.24603 13.6786C5.0885 13.8392 5 14.0571 5 14.2843V17.7108C5 17.938 5.0885 18.1558 5.24603 18.3165C5.40356 18.4771 5.61722 18.5674 5.84 18.5674C6.06278 18.5674 6.27644 18.4771 6.43397 18.3165C6.5915 18.1558 6.68 17.938 6.68 17.7108V16.3545L7.226 16.9113C8.5278 18.2441 10.2953 18.9954 12.14 19H12.1792C14.0081 19.0045 15.7651 18.2744 17.0701 16.9677C17.149 16.889 17.2119 16.7953 17.2552 16.6918C17.2986 16.5884 17.3215 16.4773 17.3228 16.3648C17.324 16.2523 17.3035 16.1406 17.2624 16.0362C17.2214 15.9318 17.1605 15.8367 17.0834 15.7563C17.0063 15.6758 16.9144 15.6117 16.8129 15.5675C16.7115 15.5233 16.6025 15.4998 16.4922 15.4986C16.3819 15.4973 16.2724 15.5182 16.17 15.5601C16.0677 15.602 15.9744 15.664 15.8955 15.7427H15.8927Z" fill="currentColor"/>
+</svg>
+</template>

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

@@ -0,0 +1,5 @@
+<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="M6.89168 5.77825C6.54711 4.51318 5.21013 3.73426 3.88429 4.08373L3.4401 4.20081C3.12074 4.28499 2.9335 4.59979 3.02189 4.90394C3.11028 5.20809 3.44082 5.38641 3.76018 5.30223L4.20438 5.18514C4.85307 5.01416 5.54567 5.38792 5.73016 6.06521L8.06655 14.9285C6.88106 15.1999 6.0001 16.2163 6.0001 17.4287C6.0001 18.8488 7.2089 20 8.70005 20C9.95256 20 11.0059 19.1878 11.3109 18.0862L20.5895 15.1414C20.9039 15.0417 21.0738 14.7181 20.9691 14.4187C20.8643 14.1193 20.5245 13.9575 20.2102 14.0572L11.3369 16.8733C11.1132 15.9058 10.3174 15.1426 9.30448 14.922L6.89168 5.77825ZM8.70005 18.2858C9.19708 18.2858 9.60004 17.902 9.60004 17.4287C9.60004 16.9553 9.19708 16.5715 8.70005 16.5715C8.20299 16.5715 7.80007 16.9553 7.80007 17.4287C7.80007 17.902 8.20299 18.2858 8.70005 18.2858Z" fill="currentColor"/>
+<path d="M9.31113 6.10533C8.3591 6.37781 7.81926 7.33372 8.10539 8.2404L9.58413 13.2121C9.87023 14.1188 10.874 14.6329 11.826 14.3605L17.5485 12.7226C18.5005 12.4501 19.0404 11.4942 18.7543 10.5875L17.2755 5.61577C16.9894 4.70909 15.9857 4.19497 15.0336 4.46746L9.31113 6.10533Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-help-alt.vue

@@ -0,0 +1,4 @@
+<template><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.625 11.25C8.625 11.3736 8.58835 11.4945 8.51967 11.5972C8.451 11.7 8.35338 11.7801 8.23918 11.8274C8.12498 11.8747 7.99931 11.8871 7.87807 11.863C7.75683 11.8389 7.64547 11.7794 7.55806 11.6919C7.47065 11.6045 7.41113 11.4932 7.38701 11.3719C7.3629 11.2507 7.37527 11.125 7.42258 11.0108C7.46988 10.8966 7.54999 10.799 7.65277 10.7303C7.75555 10.6617 7.87639 10.625 8 10.625C8.16576 10.625 8.32474 10.6908 8.44195 10.8081C8.55916 10.9253 8.625 11.0842 8.625 11.25ZM8 4.625C6.6875 4.625 5.625 5.57812 5.625 6.75V7C5.625 7.09946 5.66451 7.19484 5.73484 7.26516C5.80516 7.33549 5.90055 7.375 6 7.375C6.09946 7.375 6.19484 7.33549 6.26517 7.26516C6.33549 7.19484 6.375 7.09946 6.375 7V6.75C6.375 5.99188 7.10375 5.375 8 5.375C8.89625 5.375 9.625 5.99188 9.625 6.75C9.625 7.50813 8.89625 8.125 8 8.125C7.90055 8.125 7.80516 8.16451 7.73484 8.23483C7.66451 8.30516 7.625 8.40054 7.625 8.5V9C7.625 9.09946 7.66451 9.19484 7.73484 9.26517C7.80516 9.33549 7.90055 9.375 8 9.375C8.09946 9.375 8.19484 9.33549 8.26517 9.26517C8.33549 9.19484 8.375 9.09946 8.375 9V8.84875C9.50688 8.6875 10.375 7.8075 10.375 6.75C10.375 5.57812 9.3125 4.625 8 4.625ZM14.375 8C14.375 9.26086 14.0011 10.4934 13.3006 11.5418C12.6001 12.5901 11.6045 13.4072 10.4396 13.8897C9.27473 14.3722 7.99293 14.4985 6.7563 14.2525C5.51967 14.0065 4.38376 13.3994 3.4922 12.5078C2.60064 11.6162 1.99348 10.4803 1.7475 9.2437C1.50152 8.00707 1.62776 6.72527 2.11027 5.56039C2.59278 4.39551 3.40988 3.39988 4.45824 2.69938C5.50661 1.99889 6.73915 1.625 8 1.625C9.69015 1.62698 11.3105 2.29927 12.5056 3.49439C13.7007 4.6895 14.373 6.30985 14.375 8ZM13.625 8C13.625 6.88748 13.2951 5.79994 12.677 4.87492C12.0589 3.94989 11.1804 3.22892 10.1526 2.80318C9.12476 2.37743 7.99376 2.26604 6.90262 2.48308C5.81148 2.70012 4.8092 3.23585 4.02253 4.02252C3.23586 4.80919 2.70013 5.81147 2.48309 6.90262C2.26604 7.99376 2.37744 9.12476 2.80318 10.1526C3.22892 11.1804 3.94989 12.0589 4.87492 12.677C5.79995 13.2951 6.88748 13.625 8 13.625C9.49134 13.6233 10.9211 13.0302 11.9757 11.9756C13.0302 10.9211 13.6233 9.49134 13.625 8Z" fill="currentColor"/>
+</svg>
+</template>

package/src/components/icon/components/nomi-link.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="M10 14L14 10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15 13L17 11C18.1046 9.89543 18.1046 8.10457 17 7C15.8954 5.89543 14.1046 5.89543 13 7L11 9" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M9 11L7 13C5.89543 14.1046 5.89543 15.8954 7 17C8.10457 18.1046 9.89543 18.1046 11 17L13 15" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>