@v1nt1248/3nclient-lib 0.3.30 → 0.3.31

package/src/components/ui3n-selector/ui3n-selector.vue

@@ -22,7 +22,6 @@
     items: () => [] as T[],
     itemValue: 'id',
     clearable: false,
-    withSearch: false,
     returnObject: false,
     noDataText: '',
   });
@@ -37,28 +36,16 @@
   const isFocused = ref(false);
   const activeItemIndex = ref<Nullable<number>>(null);
 
-  const query = ref('');
-  const processedQuery = computed(() => query.value.toLowerCase());
-
   const filteredItems = computed(() => {
-    return props.items
-      .filter(item => {
-        if (props.customFilter) {
-          return props.customFilter(item, query.value);
-        }
-
-        const itemDisplayingVal = getItemTitle(item, true);
-        return itemDisplayingVal.includes(processedQuery.value);
-      })
-      .filter(item => {
-        if (!props.hideSelected) {
-          return true;
-        }
+    return props.items.filter(item => {
+      if (!props.hideSelected) {
+        return true;
+      }
 
-        return props.returnObject
-          ? (props.modelValue as T).id !== item.id
-          : (props.modelValue as T[keyof T]) !== item[props.itemValue];
-      });
+      return props.returnObject
+        ? (props.modelValue as T).id !== item.id
+        : (props.modelValue as T[keyof T]) !== item[props.itemValue];
+    });
   }) as ComputedRef<T[]>;
 
   const displayingSelection = computed(() => {
@@ -79,24 +66,23 @@
     return selectedItem ? getItemTitle(selectedItem) : props.modelValue;
   });
 
-  function getItemTitle(value: T | T[keyof T], withProcessing?: boolean): string {
-    if (!value) {
+  function getItemTitle(item: T, withProcessing?: boolean): string {
+    if (!item || typeof item !== 'object') {
       return '';
     }
 
-    if (typeof value !== 'object') {
-      const val = (value as T[keyof T]).toString();
-      return withProcessing ? val.toLowerCase() : val;
-    }
-
     const isItemDisplayFunction = props.itemDisplay && typeof props.itemDisplay === 'function';
-    const preVal = isItemDisplayFunction
-      ? (props.itemDisplay as Ui3nSelectorItemDisplayingFunction<T>)(value as T)
+    const preVal: unknown = isItemDisplayFunction
+      ? (props.itemDisplay as Ui3nSelectorItemDisplayingFunction<T>)(item)
       : props.itemDisplay
-        ? (value as T)[props.itemDisplay as keyof T]
-        : (value as T).id;
-    // @ts-expect-error
-    const val = preVal.toString();
+        ? item[props.itemDisplay as keyof T]
+        : item.id;
+
+    if (preVal === undefined || preVal === null) {
+      return '';
+    }
+
+    const val = String(preVal);
     return withProcessing ? val.toLowerCase() : val;
   }
 
@@ -105,11 +91,15 @@
     emits('focus');
   }
 
-  function onBlur() {
-    setTimeout(() => {
-      isFocused.value = false;
-      emits('blur');
-    }, 100);
+  function onBlur(event: FocusEvent) {
+    const target = event.relatedTarget as HTMLElement;
+
+    if (activatorEl.value?.contains(target) || bodyEl.value?.contains(target)) {
+      return;
+    }
+
+    isFocused.value = false;
+    emits('blur');
   }
 
   function onItemClick(item: T) {
@@ -119,7 +109,6 @@
 
     const newValue = props.returnObject ? item : item[props.itemValue];
     emits('update:modelValue', newValue);
-    query.value = '';
     isMenuOpen.value = false;
   }
 
@@ -127,7 +116,6 @@
     emits('update:modelValue', null);
     isMenuOpen.value = false;
     activeItemIndex.value = null;
-    query.value = '';
   }
 
   function handlePressingDownKey() {
@@ -157,7 +145,7 @@
   function handlePressingEscOrTabKeys() {
     emits('blur');
     isMenuOpen.value = false;
-    bodyEl.value!.blur();
+    bodyEl.value?.blur();
     activatorEl.value && activatorEl.value.blur();
   }
 
@@ -177,7 +165,6 @@
       const item = filteredItems.value[activeItemIndex.value!];
       onItemClick(item);
       activeItemIndex.value = null;
-      query.value = '';
     }
   }
 
@@ -226,6 +213,11 @@
     () => isMenuOpen.value,
     (val, oVal) => {
       if (val !== oVal && val) {
+        if (activatorEl.value) {
+          const rect = activatorEl.value.getBoundingClientRect();
+          activatorEl.value.style.setProperty('--ui3n-selector-width', `${rect.width}px`);
+        }
+
         if (props.modelValue) {
           const selectedItemIndex = filteredItems.value.findIndex(item => {
             if (typeof props.modelValue === 'object') {
@@ -240,7 +232,6 @@
         emits('list:open');
       } else if (val !== oVal && !val) {
         activeItemIndex.value = null;
-        query.value = '';
         emits('list:close');
       }
     },
@@ -272,13 +263,20 @@
       :offset-y="4"
       position-autoupdate
       :content-border-radius="8"
-      :content-styles="{ width: '100%' }"
+      :content-styles="{ width: '100%', minWidth: 'var(--ui3n-selector-width, 200px)' }"
       :class="$style.menu"
       :disabled="disabled"
+      @click="
+        () => {
+          if (!disabled) {
+            isMenuOpen = !isMenuOpen;
+          }
+        }
+      "
     >
       <div
         ref="activator"
-        tabindex="0"
+        :tabindex="disabled ? -1 : 0"
         :class="[
           $style.trigger,
           isFocused && $style.triggerFocused,
@@ -313,6 +311,7 @@
           :disabled="disabled"
           :class="$style.clearBtn"
           @click.stop.prevent="resetValue"
+          @mousedown.stop.prevent
         />
 
         <ui3n-icon
@@ -349,7 +348,6 @@
                   :item="item"
                   :index="index"
                   :active-index="activeItemIndex"
-                  :query="query"
                 >
                   {{ getItemTitle(item) }}
                 </slot>
@@ -384,6 +382,7 @@
     --ui3n-selector-item-padding: 4px;
     --ui3n-selector-item-font-size: 13px;
     --ui3n-selector-item-border-radius: 4px;
+    --ui3n-selector-body-padding: 4px;
 
     position: relative;
     width: 100%;
@@ -466,6 +465,9 @@
     width: 100%;
     background-color: var(--color-bg-block-primary-default);
     padding: var(--ui3n-selector-body-padding);
+    box-shadow: 0 4px 12px var(--shadow-close);
+    border: 1px solid var(--color-border-control-tritery-default);
+    border-radius: 8px;
 
     .noData {
       display: flex;

package/src/components/ui3n-slider/ui3n-slider.vue

@@ -75,14 +75,10 @@
   }) as ComputedRef<Record<string, string>>;
 
   const pointer1PositionCss = computed(() =>
-    props.range
-      ? `calc(${activeBlockStyle.value.left} - calc(${thumbSizeCss.value} / 2))`
-      : `calc(${activeBlockStyle.value.width} - calc(${thumbSizeCss.value} / 2))`,
+    props.range ? `calc(${activeBlockStyle.value.left} + 1px)` : `${activeBlockStyle.value.width}`,
   );
   const pointer2PositionCss = computed(() =>
-    props.range
-      ? `calc(${activeBlockStyle.value.width} + ${activeBlockStyle.value.left} - calc(${thumbSizeCss.value} / 2))`
-      : '200%',
+    props.range ? `calc(${activeBlockStyle.value.width} + ${activeBlockStyle.value.left} - 1px)` : '200%',
   );
 
   const label1Text = computed(() => {
@@ -312,7 +308,7 @@
         :model-value="showLabel['1']"
         :content="label1Text"
         trigger="manual"
-        placement="top-start"
+        placement="top"
         position-strategy="absolute"
         :color="labelColor"
         :text-color="labelTextColor"
@@ -336,7 +332,7 @@
         :model-value="showLabel['2']"
         :content="label2Text"
         trigger="manual"
-        placement="top-start"
+        placement="top"
         position-strategy="absolute"
         :color="labelColor"
         :text-color="labelTextColor"
@@ -381,7 +377,8 @@
 
   .pointerWrapper {
     position: absolute;
-    top: 0;
+    //top: calc(var(--ui3n-slider-track-height) / 2 * -1);
+    top: calc(var(--ui3n-slider-track-height) * -1);
     width: var(--ui3n-slider-thumb-size);
     height: var(--ui3n-slider-thumb-size);
     border-radius: 50%;

package/src/components/ui3n-step-line-bar/ui3n-step-line-bar.vue

@@ -1,9 +1,13 @@
 <script lang="ts" setup>
+  import { computed } from 'vue';
   import type { Ui3nStepLineBarProps } from './types';
 
   const props = withDefaults(defineProps<Ui3nStepLineBarProps>(), {
+    steps: 1,
     current: 1,
   });
+
+  const validatedSteps = computed(() => Math.max(0, Math.floor(props.steps)));
 </script>
 
 <template>
@@ -17,7 +21,7 @@
 
     <div :class="$style.body">
       <div
-        v-for="step in steps"
+        v-for="step in validatedSteps"
         :key="step"
         :class="[$style.step, step <= current && $style.active]"
       />

package/src/components/ui3n-switch/ui3n-switch.vue

@@ -10,11 +10,9 @@
   });
 
   const emits = defineEmits<Ui3nSwitchEmits>();
-
   defineSlots<Ui3nSwitchSlots>();
 
   const slots = useSlots();
-  const switchEl = ref<HTMLDivElement | null>(null);
   const val = ref<boolean>(false);
 
   const switchStyle = computed(() => ({
@@ -24,6 +22,9 @@
 
   function change(ev: Event) {
     ev.preventDefault();
+    if (props.disabled) {
+      return;
+    }
 
     val.value = !val.value;
     emits('change', val.value);
@@ -58,15 +59,18 @@
 
 <template>
   <div
-    ref="switchEl"
     :id="id"
     :style="switchStyle"
+    :tabindex="disabled ? -1 : 0"
     :class="[
       $style.ui3nSwitch,
       val && $style.checked,
       !slots.default && $style.noLabel,
       disabled && $style.disabled,
     ]"
+    @keydown.enter="change"
+    @keydown.space="change"
+    @click="change"
   >
     <input
       v-if="name"
@@ -78,13 +82,7 @@
       :value="val ? 'on' : ''"
     />
 
-    <div
-      :class="$style.body"
-      :tabindex="disabled ? -1 : 0"
-      @keydown.enter="change"
-      @keydown.space="change"
-      @click="change"
-    >
+    <div :class="$style.body">
       <div :class="[$style.dot, val ? $style.right : $style.left]" />
     </div>
 
@@ -104,10 +102,17 @@
     --ui3n-switch-font-weight: 500;
 
     position: relative;
-    display: flex;
+    display: inline-flex;
     justify-content: flex-start;
     align-items: center;
     gap: 8px;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--color-border-control-accent-focused);
+      outline-offset: 4px;
+      border-radius: 4px;
+    }
   }
 
   .body {
@@ -116,7 +121,7 @@
     height: var(--ui3n-switch-size);
     width: calc(var(--ui3n-switch-size) * 2);
     border-radius: var(--ui3n-switch-size);
-    cursor: pointer;
+    transition: background-color 0.2s ease;
   }
 
   .checked {
@@ -135,23 +140,23 @@
 
   .dot {
     --ui3n-switch-dot-size: calc(var(--ui3n-switch-size) / 4 * 3);
+    --ui3n-switch-dot-margin: calc(var(--ui3n-switch-size) / 8);
 
     position: absolute;
     width: var(--ui3n-switch-dot-size);
     height: var(--ui3n-switch-dot-size);
     border-radius: 50%;
     background-color: var(--color-bg-control-primary-default);
-    top: 0;
-    margin: calc(var(--ui3n-switch-size) / 8);
-    transition: all 250ms ease-in-out;
+    top: var(--ui3n-switch-dot-margin);
+    transition: left 200ms cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   .left {
-    left: 0;
+    left: var(--ui3n-switch-dot-margin);
   }
 
   .right {
-    left: calc(100% - var(--ui3n-switch-size));
+    left: calc(100% - var(--ui3n-switch-dot-size) - var(--ui3n-switch-dot-margin));
   }
 
   .label {
@@ -159,11 +164,11 @@
     font-weight: var(--ui3n-switch-font-weight);
     color: var(--ui3n-switch-font-color);
     user-select: none;
-    cursor: pointer;
   }
 
   .disabled {
-    opacity: 0.7;
+    opacity: 0.5;
     pointer-events: none;
+    cursor: not-allowed;
   }
 </style>

package/src/components/ui3n-table/composables/useTable.ts

@@ -2,6 +2,7 @@ import { computed, type Ref, ref, watch, UnwrapRef } from 'vue';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import size from 'lodash/size';
+import cloneDeep from 'lodash/cloneDeep';
 import {
   Ui3nTableBodyBaseItem,
   Ui3nTableConfig,
@@ -43,7 +44,7 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
 
     const { config = {}, head } = props;
     const { columnStyle } = config;
-    const keys = head.map(h => h.key);
+    const keys = head.filter(h => !h.hidden).map(h => h.key);
     return keys.reduce((res, key, index) => {
       const width = get(columnStyle, [key, 'width'], '1fr');
       res = index === 0 ? `${width}` : `${res} ${width}`;
@@ -79,7 +80,7 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
     const { config = {}, head } = props;
     const { sortOrder } = config;
     if (!isEmpty(sortOrder)) {
-      return sortOrder;
+      return cloneDeep(sortOrder);
     }
 
     for (const h of head) {
@@ -146,12 +147,16 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
         const index = (selectedRows.value as Array<T[keyof T]>).findIndex(
           keyValue => keyValue === row[currentConfig.value.fieldAsRowKey as keyof T],
         );
-        (selectedRows.value as Array<T[keyof T]>).splice(index, 1);
+        if (index !== -1) {
+          (selectedRows.value as Array<T[keyof T]>).splice(index, 1);
+        }
       }
     } else {
-      isRowKeyUsed.value &&
+      if (isRowKeyUsed.value) {
         (selectedRows.value as Array<T[keyof T]>).push(row[currentConfig.value.fieldAsRowKey as keyof T]);
-      !isRowKeyUsed.value && (selectedRows.value as Set<T>).add(row);
+      } else {
+        (selectedRows.value as Set<T>).add(row);
+      }
     }
   }
 
@@ -164,7 +169,9 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
       selectInMultipleMode(row);
     }
 
-    !withoutEvents && emits('select:row', selectedRowsArray.value);
+    if (!withoutEvents) {
+      emits('select:row', selectedRowsArray.value);
+    }
   }
 
   function toggleSelectedRows(val: Ui3nCheckboxValue) {
@@ -191,17 +198,24 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
       currentConfig.value.sortOrder.direction =
         currentConfig.value.sortOrder?.direction === 'asc' ? 'desc' : 'asc';
     } else {
-      currentConfig.value.sortOrder!.field = field as UnwrapRef<keyof T>;
-      currentConfig.value.sortOrder!.direction = 'desc';
+      currentConfig.value.sortOrder = {
+        field: field as UnwrapRef<keyof T>,
+        direction: 'desc',
+      };
     }
 
-    currentConfig.value.sortOrder?.field &&
+    if (currentConfig.value.sortOrder?.field) {
       emits('change:sort', currentConfig.value.sortOrder as Ui3nTableSort<T>);
+    }
   }
 
   function clear() {
-    isRowKeyUsed.value && ((selectedRows.value as Array<T[keyof T]>) = []);
-    !isRowKeyUsed.value && (selectedRows.value as Set<T>).clear();
+    if (isRowKeyUsed.value) {
+      (selectedRows.value as Array<T[keyof T]>) = [];
+    } else {
+      (selectedRows.value as Set<T>).clear();
+    }
+
     hasGroupActionsRow.value = false;
     emits('select:row', []);
   }
@@ -215,17 +229,17 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
     },
   );
 
-  watch(
-    tableColumnWidth,
-    (val, oVal) => {
-      if (val && val !== oVal) {
-        tableEl.value && tableEl.value.style.setProperty('--ui3n-table-columns-width', val);
-      }
-    },
-    {
-      immediate: true,
-    },
-  );
+  // watch(
+  //   tableColumnWidth,
+  //   (val, oVal) => {
+  //     if (val && val !== oVal) {
+  //       tableEl.value && tableEl.value.style.setProperty('--ui3n-table-columns-width', val);
+  //     }
+  //   },
+  //   {
+  //     immediate: true,
+  //   },
+  // );
 
   watch(
     () => selectedRowsSize.value,
@@ -238,6 +252,7 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
 
   return {
     tableEl,
+    tableColumnWidth,
     unusedPlaceCssStyle,
     currentConfig,
     visibleColumns,

package/src/components/ui3n-table/ui3n-table-sort-icon.vue

@@ -9,6 +9,11 @@
   });
 
   const iconName = computed(() => (props.value === 'asc' ? 'round-arrow-upward' : 'round-arrow-downward'));
+
+  const parsedSize = computed(() => {
+    const num = Number(props.size);
+    return isNaN(num) ? 16 : num;
+  });
 </script>
 
 <template>
@@ -19,7 +24,7 @@
     <ui3n-icon
       :key="iconName"
       :icon="iconName"
-      :size="Number(size)"
+      :size="parsedSize"
       :color="color"
     />
   </transition>

package/src/components/ui3n-table/ui3n-table.vue

@@ -18,6 +18,7 @@
 
   const {
     tableEl,
+    tableColumnWidth,
     unusedPlaceCssStyle,
     currentConfig,
     visibleColumns,
@@ -53,6 +54,7 @@
 <template>
   <div
     ref="tableEl"
+    :style="{ '--ui3n-table-columns-width': tableColumnWidth }"
     :class="$style.ui3nTable"
   >
     <fieldset
@@ -192,7 +194,7 @@
                   :cell="row[col.key]"
                 >
                   <span :class="$style.cell">
-                    {{ row[col.key] }}
+                    {{ col.format ? col.format(row[col.key]) : row[col.key] }}
                   </span>
                 </slot>
               </div>

package/src/components/ui3n-tabs/ui3n-tabs.vue

@@ -18,7 +18,6 @@
 
   const tabs = ref<HTMLDivElement | null>(null);
   const activeIndex = ref(props.modelValue);
-  const children = ref<HTMLCollection | null>(null);
 
   const tabsStyle = computed(() => ({
     '--ui3n-tabs-active-color': props.activeColor,
@@ -49,28 +48,6 @@
     }
   }
 
-  function initialTabsActivity(): void {
-    if (children.value) {
-      for (let i = 0; i < children.value.length; i++) {
-        // @ts-ignore
-        children.value[i].dataset.index = `${i}`;
-        children.value[i].classList.add($style.item);
-      }
-    }
-  }
-
-  function setTabsActivity(index: number): void {
-    if (children.value) {
-      for (let i = 0; i < children.value.length; i++) {
-        if (i === index) {
-          children.value[i].classList.add($style.active);
-        } else {
-          children.value[i].classList.remove($style.active);
-        }
-      }
-    }
-  }
-
   function onClick(ev: MouseEvent) {
     const target = ev.target as HTMLElement;