@v1nt1248/3nclient-lib 0.3.30 → 0.3.32

package/src/components/ui3n-progress/ui3n-progress-circular.vue

@@ -1,129 +1,76 @@
 <script lang="ts" setup>
-  import { computed, onBeforeUnmount, ref, useCssModule, watch } from 'vue';
-  import toNumber from 'lodash/toNumber';
+  import { computed } from 'vue';
   import type { Ui3nProgressCircularProps } from './types';
 
-  const thresholdSize = 64;
-  const indeterminateModeValues = [1, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 85, 90, 95, 99];
-
   const props = withDefaults(defineProps<Ui3nProgressCircularProps>(), {
     value: 0,
     size: 64,
     bgColor: 'var(--color-bg-control-primary-default)',
     color: 'var(--color-bg-control-accent-default)',
+    indeterminate: false,
+    withText: false,
   });
 
-  const $style = useCssModule();
+  const parseToNumber = (val: number | string): number => {
+    const num = parseFloat(String(val));
+    return isNaN(num) ? 0 : num;
+  };
 
-  const element = ref<HTMLDivElement>();
+  const innerSize = computed(() => parseToNumber(props.size) || 64);
+  const innerValue = computed(() => Math.min(Math.max(parseToNumber(props.value), 0), 100));
   const isValueShown = computed(() => props.withText && !props.indeterminate);
 
-  const innerSize = computed(() => toNumber(props.size));
-  const innerWidth = computed(() => {
+  const virtualStrokeWidth = computed(() => {
     if (props.width) {
-      return toNumber(props.width);
-    }
-
-    const diff = innerSize.value - thresholdSize;
-    if (diff <= 0) {
-      return Math.round(innerSize.value / 10);
+      return (parseToNumber(props.width) / innerSize.value) * 100;
     }
-
-    return 6 + Math.round(diff / 20);
+    return 8;
   });
 
-  const innerValue = computed(() => toNumber(props.value));
-  const fontSize = computed(() => `${Math.floor((innerSize.value - 2 * innerWidth.value) / 3.2)}px`);
+  const virtualRadius = computed(() => (100 - virtualStrokeWidth.value) / 2);
+  const virtualCircumference = computed(() => Math.round(Math.PI * 2 * virtualRadius.value));
 
-  const circleRadius = computed(() => Math.round(innerSize.value / 2) - Math.round(innerWidth.value / 2));
-  const circumference = computed(() => Math.round(Math.PI * 2 * circleRadius.value));
+  const strokeDasharray = computed(() => {
+    const dash = Math.round((virtualCircumference.value * innerValue.value) / 100);
+    const gap = virtualCircumference.value - dash;
+    return `${dash} ${gap}`;
+  });
 
-  const timerId = ref<ReturnType<typeof setInterval> | null>(null);
-  const indeterminateModeValue = ref(0);
-  const isInverse = ref(false);
+  const fontSize = computed(() => `${Math.floor(innerSize.value / 3.8)}px`);
 
   const progressStyle = computed(() => ({
     '--ui3n-progress-circular-size': `${innerSize.value}px`,
-    '--ui3n-progress-circular-width': `${innerWidth.value}px`,
     '--ui3n-progress-circular-font-size': fontSize.value,
     '--ui3n-progress-circular-bg': props.bgColor,
     '--ui3n-progress-circular-color': props.color,
+    '--ui3n-progress-virtual-width': String(virtualStrokeWidth.value),
   }));
-
-  const strokeDasharray = computed(() => {
-    const value = props.indeterminate ? indeterminateModeValue.value : innerValue.value;
-    const dash = Math.round((circumference.value * value!) / 100);
-    const gap = circumference.value - dash;
-    return `${dash} ${gap}`;
-  });
-
-  function changeValueForIndeterminateMode() {
-    if (timerId.value) {
-      return;
-    }
-
-    const indeterminateModeValuesLength = indeterminateModeValues.length;
-    let index = 0;
-
-    timerId.value = setInterval(() => {
-      indeterminateModeValue.value = indeterminateModeValues[index % indeterminateModeValuesLength];
-      index += 1;
-      if (index % indeterminateModeValuesLength === 1) {
-        isInverse.value = !isInverse.value;
-      }
-    }, 200);
-  }
-
-  function clearIndeterminateTimer() {
-    if (timerId.value) {
-      clearInterval(timerId.value);
-      timerId.value = null;
-    }
-  }
-
-  watch(
-    () => props.indeterminate,
-    isIndeterminate => {
-      if (isIndeterminate) {
-        changeValueForIndeterminateMode();
-      } else {
-        clearIndeterminateTimer();
-        isInverse.value = false;
-        indeterminateModeValue.value = 0;
-      }
-    },
-    { immediate: true },
-  );
-
-  onBeforeUnmount(() => {
-    clearIndeterminateTimer();
-  });
 </script>
 
 <template>
   <div
-    ref="element"
     :style="progressStyle"
-    :class="[$style.ui3nProgressCircular, indeterminate && $style.indeterminate, isInverse && $style.inverse]"
+    :class="[$style.ui3nProgressCircular, indeterminate && $style.indeterminate]"
   >
     <svg
       :height="innerSize"
       :width="innerSize"
+      viewBox="0 0 100 100"
       :class="$style.pie"
     >
       <circle
         :class="$style.background"
-        :r="circleRadius"
-        cx="50%"
-        cy="50%"
+        :r="virtualRadius"
+        cx="50"
+        cy="50"
       />
 
       <circle
         :class="$style.chart"
-        :r="circleRadius"
-        cx="50%"
-        cy="50%"
-        :stroke-dasharray="strokeDasharray"
+        :r="virtualRadius"
+        cx="50"
+        cy="50"
+        :stroke-dasharray="indeterminate ? undefined : strokeDasharray"
       />
     </svg>
 
@@ -139,80 +86,93 @@
 <style lang="scss" module>
   .ui3nProgressCircular {
     position: relative;
+    display: inline-flex;
     min-width: var(--ui3n-progress-circular-size);
     width: var(--ui3n-progress-circular-size);
     min-height: var(--ui3n-progress-circular-size);
     height: var(--ui3n-progress-circular-size);
-    border-radius: 50%;
-    display: flex;
     justify-content: center;
     align-items: center;
-
-    &.inverse {
-      .background {
-        stroke: var(--ui3n-progress-circular-color) !important;
-      }
-
-      .chart {
-        stroke: var(--ui3n-progress-circular-bg) !important;
-      }
-    }
-
-    &:not(.indeterminate) {
-      .chart {
-        transition: 0.2s ease-in-out all;
-      }
-    }
+    user-select: none;
   }
 
   .pie {
-    min-width: var(--ui3n-progress-circular-size);
-    width: var(--ui3n-progress-circular-size);
-    min-height: var(--ui3n-progress-circular-size);
-    height: var(--ui3n-progress-circular-size);
-    border-radius: 50%;
     transform: rotate(-90deg);
+    width: 100%;
+    height: 100%;
   }
 
   .background {
     fill: none;
     stroke: var(--ui3n-progress-circular-bg);
-    stroke-width: var(--ui3n-progress-circular-width);
+    stroke-width: var(--ui3n-progress-virtual-width);
+    transition: stroke 0.2s ease;
   }
 
   .chart {
     fill: none;
     stroke: var(--ui3n-progress-circular-color);
-    stroke-width: var(--ui3n-progress-circular-width);
+    stroke-width: var(--ui3n-progress-virtual-width);
+    transition:
+      stroke-dasharray 0.2s ease-in-out,
+      stroke 0.2s ease;
   }
 
   .text {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    inset: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: var(--ui3n-progress-circular-font-size);
-    font-weight: 500;
+    font-weight: 600;
+    line-height: 1;
     color: var(--ui3n-progress-circular-color);
   }
 
   .indeterminate {
-    .pie {
-      animation: 0.75s linear 0s infinite normal spin;
+    animation: circular-spin 2s linear infinite;
+
+    .chart {
+      stroke-linecap: round;
+      animation: circular-dash 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
     }
   }
 
-  @keyframes spin {
-    0% {
-      transform: rotate(-90deg);
+  :global {
+    @keyframes circular-spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
     }
 
-    100% {
-      transform: rotate(270deg);
+    :global {
+      @keyframes circular-spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes circular-dash {
+        0% {
+          stroke-dasharray: 1 289;
+          stroke-dashoffset: 0;
+        }
+        50% {
+          stroke-dasharray: 216 289;
+          stroke-dashoffset: -35;
+        }
+        100% {
+          stroke-dasharray: 1 289;
+          stroke-dashoffset: -289;
+        }
+      }
     }
   }
 </style>

package/src/components/ui3n-progress/ui3n-progress-linear.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
   import { computed } from 'vue';
-  import toNumber from 'lodash/toNumber';
   import type { Ui3nProgressLinearProps } from './types';
 
   const thresholdHeight = 12;
@@ -11,12 +10,23 @@
     height: 2,
     bgColor: 'var(--color-bg-control-primary-default)',
     color: 'var(--color-bg-control-accent-default)',
+    indeterminate: false,
+    withText: false,
+  });
+
+  const parseToNumber = (val: number | string): number => {
+    const num = parseFloat(String(val));
+    return isNaN(num) ? 0 : num;
+  };
+
+  const innerHeight = computed(() => parseToNumber(props.height));
+  const innerValue = computed(() => {
+    const val = parseToNumber(props.value);
+    return Math.min(Math.max(val, 0), 100);
   });
 
   const isValueShown = computed(() => props.withText && !props.indeterminate);
-  const innerHeight = computed(() => toNumber(props.height));
-  const innerValue = computed(() => toNumber(props.value));
-  const displayValue = computed(() => (props.indeterminate ? `20%` : `${Math.min(innerValue.value, 100)}%`));
+  const displayValue = computed(() => `${innerValue.value}%`);
 
   const progressStyle = computed(() => ({
     '--ui3n-progress-linear-height': `${innerHeight.value}px`,
@@ -41,7 +51,7 @@
     <div :class="$style.body">
       <div
         :class="$style.value"
-        :style="{ width: displayValue }"
+        :style="indeterminate ? undefined : { width: displayValue }"
       >
         <div
           v-if="isValueShown && innerHeight >= thresholdHeight && innerValue >= thresholdValue"
@@ -58,6 +68,7 @@
   .ui3nProgressLinear {
     position: relative;
     width: 100%;
+    user-select: none;
   }
 
   .body {
@@ -66,7 +77,7 @@
     height: var(--ui3n-progress-linear-height);
     border-radius: calc(var(--ui3n-progress-linear-height) - 2px);
     background-color: var(--ui3n-progress-linear-bg);
-    overflow-x: hidden;
+    overflow: hidden;
   }
 
   .value {
@@ -75,7 +86,8 @@
     align-items: center;
     position: absolute;
     left: 0;
-    height: var(--ui3n-progress-linear-height);
+    top: 0;
+    height: 100%;
     border-radius: calc(var(--ui3n-progress-linear-height) - 2px);
     background-color: var(--ui3n-progress-linear-color);
     transition: width 0.2s ease-in-out;
@@ -83,9 +95,10 @@
 
   .text {
     font-size: var(--ui3n-progress-linear-font-size);
-    font-weight: 500;
+    font-weight: 600;
     line-height: var(--ui3n-progress-linear-height);
     color: var(--ui3n-progress-linear-bg);
+    white-space: nowrap;
   }
 
   .above {
@@ -95,22 +108,26 @@
     font-size: var(--font-14);
     line-height: var(--font-16);
     color: var(--color-bg-control-accent-default);
+    margin-bottom: 4px;
   }
 
   .indeterminate {
     .value {
       transition: none;
-      animation: 1s linear 0s infinite normal move;
+      width: 25%;
+      left: 0;
+      top: 0;
+      height: 100%;
+      animation: linear-fly 1.4s linear infinite;
     }
   }
 
-  @keyframes move {
-    from {
-      left: -22%;
+  @keyframes linear-fly {
+    0% {
+      transform: translateX(-105%);
     }
-
-    to {
-      left: 122%;
+    100% {
+      transform: translateX(405%);
     }
   }
 </style>

package/src/components/ui3n-radio-group/ui3n-radio-group.vue

@@ -23,8 +23,9 @@
     emits('change', value);
   }
 
-  provide(`radio-group-${props.name}`, {
+  provide('ui3n-radio-group-context', {
     groupValue: computed(() => groupValue.value),
+    groupName: computed(() => props.name || ''),
     updateGroupValue,
   });
 

package/src/components/ui3n-radio-group/ui3n-radio.vue

@@ -17,27 +17,25 @@
 
   const slots = useSlots();
 
-  const instance = getCurrentInstance();
-  const isComponentPartOfGroup =
-    instance?.parent?.type.__name === 'Ui3nRadioGroup' || instance?.parent?.type.__name === 'ui3n-radio-group';
-  const groupName = (isComponentPartOfGroup ? instance?.parent?.props.name : '') as string;
-
-  const {
-    groupValue,
-    updateGroupValue,
-  }: {
-    groupValue: ComputedRef<Ui3nRadioValue> | null;
-    updateGroupValue: ((value: Ui3nRadioValue) => void) | null;
-  } = groupName
-    ? inject(`radio-group-${groupName}`)!
-    : {
-        groupValue: null,
-        updateGroupValue: null,
-      };
-
-  const val = ref<Ui3nRadioValue>(groupName ? groupValue!.value : props.modelValue);
-
-  const isOn = computed(() => val.value === props.checkedValue);
+  const groupContext = inject<{
+    groupValue: ComputedRef<Ui3nRadioValue>;
+    groupName: ComputedRef<string>;
+    updateGroupValue: (value: Ui3nRadioValue) => void;
+  } | null>('ui3n-radio-group-context', null);
+
+  const isComponentPartOfGroup = computed(() => groupContext !== null);
+  const finalGroupName = computed(() => (groupContext ? groupContext.groupName.value : props.name || ''));
+
+  const val = ref<Ui3nRadioValue>(
+    isComponentPartOfGroup.value && groupContext ? groupContext.groupValue.value : props.modelValue,
+  );
+
+  const isOn = computed(() => {
+    if (isComponentPartOfGroup.value && groupContext) {
+      return groupContext.groupValue.value === props.checkedValue;
+    }
+    return val.value === props.checkedValue;
+  });
 
   const radioStyle = computed(() => ({
     '--ui3n-radio-size': `${props.size}px`,
@@ -46,8 +44,11 @@
 
   function change(ev: Event) {
     ev.preventDefault();
+    if (props.disabled) {
+      return;
+    }
 
-    if (!groupName) {
+    if (!isComponentPartOfGroup.value) {
       val.value = isOn.value ? props.uncheckedValue : props.checkedValue;
       emits('change', val.value);
       emits('update:modelValue', val.value);
@@ -58,13 +59,14 @@
       return;
     }
 
-    val.value = props.checkedValue;
-    updateGroupValue!(val.value);
+    if (groupContext) {
+      groupContext.updateGroupValue(props.checkedValue);
+    }
   }
 
   function clear() {
     val.value = props.uncheckedValue;
-    if (!groupName) {
+    if (!isComponentPartOfGroup.value) {
       emits('change', val.value);
       emits('update:modelValue', val.value);
     }
@@ -74,26 +76,24 @@
     clear,
   });
 
+  onBeforeMount(() => {
+    const hasChecked = !!slots['checkedIcon'];
+    const hasUnchecked = !!slots['uncheckedIcon'];
+
+    if ((hasChecked && !hasUnchecked) || (!hasChecked && hasUnchecked)) {
+      throw Error('[Ui3nRadio] Both checkedIcon and uncheckedIcon slots must have values defined.');
+    }
+  });
+
   watch(
     () => props.name,
     newName => {
-      if (!newName && !groupName) {
+      if (!newName && !isComponentPartOfGroup.value) {
         clear();
       }
     },
   );
 
-  onBeforeMount(() => {
-    if (
-      // @ts-ignore
-      (slots.checkedIcon && !slots.uncheckedIcon) ||
-      // @ts-ignore
-      (!slots.checkedIcon && slots.uncheckedIcon)
-    ) {
-      throw Error('[Ui3nRadio] Both checkedIcon and uncheckedIcon slots must have values defined.');
-    }
-  });
-
   watch(
     () => props.modelValue,
     newValue => {
@@ -102,15 +102,6 @@
       }
     },
   );
-
-  watch(
-    () => groupValue?.value,
-    newVal => {
-      if (groupName) {
-        val.value = newVal === props.checkedValue ? props.checkedValue : props.uncheckedValue;
-      }
-    },
-  );
 </script>
 
 <template>
@@ -122,7 +113,7 @@
     <input
       type="radio"
       hidden
-      :name="groupName || name"
+      :name="finalGroupName"
       :checked="isOn"
       :value="String(checkedValue)"
       :disabled="disabled"

package/src/components/ui3n-scrollbar-horizontal/{ui3n-scroolbar-horizontal.vue → ui3n-scrollbar-horizontal.vue}

@@ -37,7 +37,7 @@
   const isScrollingNow = ref(false);
 
   let resizeObserver: ResizeObserver | null = null;
-  let scrollTimeout: number | undefined;
+  let scrollTimeout: ReturnType<typeof setTimeout> | undefined;
   let startX = 0;
   let startScrollLeft = 0;
 
@@ -114,9 +114,9 @@
     }
 
     isScrollingNow.value = true;
-    window.clearTimeout(scrollTimeout);
+    clearTimeout(scrollTimeout);
 
-    scrollTimeout = window.setTimeout(() => {
+    scrollTimeout = setTimeout(() => {
       isScrollingNow.value = false;
     }, 1500);
 
@@ -210,7 +210,7 @@
 
   onBeforeUnmount(() => {
     resizeObserver?.disconnect();
-    window.clearTimeout(scrollTimeout);
+    scrollTimeout && clearTimeout(scrollTimeout);
 
     if (thumbRef.value) {
       thumbRef.value.removeEventListener('pointermove', onThumbPointerMove);
@@ -273,16 +273,14 @@
   .ui3nScrollbarHorizontal {
     position: relative;
     width: 100%;
-    height: 100%;
-    overflow: hidden;
+    overflow: visible;
   }
 
   .scrollbarContainer {
     position: relative;
     width: 100%;
-    height: 100%;
     overflow-x: auto;
-    overflow-y: hidden;
+    overflow-y: visible;
     scrollbar-width: none;
 
     &::-webkit-scrollbar {

package/src/components/ui3n-scrollbar-vertical/ui3n-scrollbar-vertical.vue

@@ -37,7 +37,7 @@
   const isScrollingNow = ref(false);
 
   let resizeObserver: ResizeObserver | null = null;
-  let scrollTimeout: number | undefined;
+  let scrollTimeout: ReturnType<typeof setTimeout> | undefined;
   let startY = 0;
   let startScrollTop = 0;
 
@@ -113,9 +113,9 @@
     }
 
     isScrollingNow.value = true;
-    window.clearTimeout(scrollTimeout);
+    scrollTimeout && clearTimeout(scrollTimeout);
 
-    scrollTimeout = window.setTimeout(() => {
+    scrollTimeout = setTimeout(() => {
       isScrollingNow.value = false;
     }, 1500);
 
@@ -146,7 +146,9 @@
       return;
     }
 
-    e.preventDefault();
+    if (e.pointerType === 'mouse') {
+      e.preventDefault();
+    }
     e.stopPropagation();
 
     thumbRef.value.setPointerCapture(e.pointerId);
@@ -209,7 +211,7 @@
 
   onBeforeUnmount(() => {
     resizeObserver?.disconnect();
-    window.clearTimeout(scrollTimeout);
+    scrollTimeout && clearTimeout(scrollTimeout);
 
     if (thumbRef.value) {
       thumbRef.value.removeEventListener('pointermove', onThumbPointerMove);
@@ -275,7 +277,8 @@
     position: relative;
     width: 100%;
     height: 100%;
-    overflow: hidden;
+    overflow-x: visible;
+    overflow-y: hidden;
   }
 
   .scrollbarContainer {
@@ -283,6 +286,7 @@
     width: 100%;
     height: 100%;
     overflow-y: auto;
+    overflow-x: visible;
     scrollbar-width: none;
 
     &::-webkit-scrollbar {

package/src/components/ui3n-selector/types.ts

@@ -59,10 +59,6 @@ export interface Ui3nSelectorProps<T extends Ui3nSelectorOptionBase> {
    * Property or function to display item
    */
   itemDisplay?: keyof T | Ui3nSelectorItemDisplayingFunction<T>;
-  /**
-   * Custom filter function
-   */
-  customFilter?: (value: Ui3nSelectorValue<T>, query: string) => boolean;
   /**
    * Whether to return the whole object or just the value
    * @default false
@@ -73,11 +69,6 @@ export interface Ui3nSelectorProps<T extends Ui3nSelectorOptionBase> {
    * @default false
    */
   clearable?: boolean;
-  /**
-   * Whether to show search input
-   * @default false
-   */
-  withSearch?: boolean;
   /**
    * Whether to hide selected item
    * @default false
@@ -149,7 +140,7 @@ export interface Ui3nSelectorSlots<T extends Ui3nSelectorOptionBase> {
   /**
    * Item slot
    */
-  item?: (props: { item: T; index: number; activeIndex: Nullable<number>; query?: string }) => VNode;
+  item?: (props: { item: T; index: number; activeIndex: Nullable<number> }) => VNode;
   /**
    * Selection slot
    */