@v1nt1248/3nclient-lib 0.3.28 → 0.3.30

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

@@ -1,65 +1,78 @@
 <script setup lang="ts">
-import { provide, ref, watch } from 'vue';
-import type {
-  Ui3nRadioGroupProps,
-  Ui3nRadioGroupEmits,
-  Ui3nRadioGroupSlots,
-  Ui3nRadioValue,
-} from './types';
+  import { computed, provide, ref, watch } from 'vue';
+  import type {
+    Ui3nRadioGroupProps,
+    Ui3nRadioGroupEmits,
+    Ui3nRadioGroupSlots,
+    Ui3nRadioGroupExpose,
+    Ui3nRadioValue,
+  } from './types';
 
-const props = withDefaults(defineProps<Ui3nRadioGroupProps>(), {
-  direction: 'vertical',
-  disabled: false,
-});
-const emits = defineEmits<Ui3nRadioGroupEmits>();
-defineSlots<Ui3nRadioGroupSlots>();
+  const props = withDefaults(defineProps<Ui3nRadioGroupProps>(), {
+    direction: 'vertical',
+    disabled: false,
+  });
+  const emits = defineEmits<Ui3nRadioGroupEmits>();
+  defineSlots<Ui3nRadioGroupSlots>();
 
-const groupValue = ref<Ui3nRadioValue>(props.modelValue);
+  const groupValue = ref<Ui3nRadioValue>(props.modelValue);
 
-function updateGroupValue(value: Ui3nRadioValue): void {
-  groupValue.value = value;
-  emits('update:modelValue', value);
-  emits('change', value);
-}
+  function updateGroupValue(value: Ui3nRadioValue): void {
+    groupValue.value = value;
+    emits('update:modelValue', value);
+    emits('change', value);
+  }
 
-provide(`radio-group-${props.name}`, {
-  groupValue,
-  updateGroupValue,
-});
+  provide(`radio-group-${props.name}`, {
+    groupValue: computed(() => groupValue.value),
+    updateGroupValue,
+  });
 
-watch(
-  () => props.modelValue,
-  (val: Ui3nRadioValue) => {
-    if (val !== groupValue.value) {
-      groupValue.value = val;
-    }
-  },
-);
+  function clear() {
+    updateGroupValue('' as unknown as Ui3nRadioValue);
+  }
+
+  defineExpose<Ui3nRadioGroupExpose>({
+    clear,
+  });
+
+  watch(
+    () => props.modelValue,
+    (val: Ui3nRadioValue) => {
+      if (val !== groupValue.value) {
+        groupValue.value = val;
+      }
+    },
+  );
+
+  watch(
+    () => props.name,
+    newName => {
+      if (!newName) {
+        clear();
+      }
+    },
+  );
 </script>
 
 <template>
-  <div
-    :class="[
-      $style.ui3nRadioGroup,
-      direction === 'horizontal' && $style.horizontal,
-    ]"
-  >
+  <div :class="[$style.ui3nRadioGroup, direction === 'horizontal' && $style.horizontal]">
     <slot />
   </div>
 </template>
 
 <style lang="scss" module>
-.ui3nRadioGroup {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: var(--spacing-xs);
+  .ui3nRadioGroup {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 4px;
 
-  &.horizontal {
-    flex-direction: row;
-    column-gap: var(--spacing-s);
+    &.horizontal {
+      flex-direction: row;
+      column-gap: 8px;
+    }
   }
-}
 </style>

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance, inject, onBeforeMount, onMounted, ref, useSlots, watch } from 'vue';
-  import type { Ref } from 'vue';
-  import type { Nullable } from '../../types';
-  import type { Ui3nRadioEmits, Ui3nRadioProps, Ui3nRadioSlots, Ui3nRadioValue } from './types';
+  import { computed, getCurrentInstance, inject, onBeforeMount, ref, useSlots, watch } from 'vue';
+  import type { ComputedRef } from 'vue';
+  import type { Ui3nRadioEmits, Ui3nRadioProps, Ui3nRadioSlots, Ui3nRadioValue, Ui3nRadioExpose } from './types';
 
   const props = withDefaults(defineProps<Ui3nRadioProps>(), {
+    name: undefined,
     modelValue: false,
     checkedValue: true,
     uncheckedValue: false,
@@ -20,27 +20,30 @@
   const instance = getCurrentInstance();
   const isComponentPartOfGroup =
     instance?.parent?.type.__name === 'Ui3nRadioGroup' || instance?.parent?.type.__name === 'ui3n-radio-group';
-  const groupName = isComponentPartOfGroup ? instance?.parent?.props.name : '';
-
-  const radioEl = ref<HTMLDivElement | null>(null);
+  const groupName = (isComponentPartOfGroup ? instance?.parent?.props.name : '') as string;
 
   const {
     groupValue,
     updateGroupValue,
   }: {
-    groupValue: Nullable<Ref<Ui3nRadioValue>>;
-    updateGroupValue: Nullable<(value: Ui3nRadioValue) => void>;
+    groupValue: ComputedRef<Ui3nRadioValue> | null;
+    updateGroupValue: ((value: Ui3nRadioValue) => void) | null;
   } = groupName
     ? inject(`radio-group-${groupName}`)!
     : {
-      groupValue: null,
-      updateGroupValue: null,
-    };
+        groupValue: null,
+        updateGroupValue: null,
+      };
 
   const val = ref<Ui3nRadioValue>(groupName ? groupValue!.value : props.modelValue);
 
   const isOn = computed(() => val.value === props.checkedValue);
 
+  const radioStyle = computed(() => ({
+    '--ui3n-radio-size': `${props.size}px`,
+    '--ui3n-radio-color': props.color,
+  }));
+
   function change(ev: Event) {
     ev.preventDefault();
 
@@ -57,15 +60,29 @@
 
     val.value = props.checkedValue;
     updateGroupValue!(val.value);
+  }
 
-    // if (groupName) {
-    //   isOn.value && updateGroupValue!(val.value);
-    // } else {
-    //   emits('change', val.value);
-    //   emits('update:modelValue', val.value);
-    // }
+  function clear() {
+    val.value = props.uncheckedValue;
+    if (!groupName) {
+      emits('change', val.value);
+      emits('update:modelValue', val.value);
+    }
   }
 
+  defineExpose<Ui3nRadioExpose>({
+    clear,
+  });
+
+  watch(
+    () => props.name,
+    newName => {
+      if (!newName && !groupName) {
+        clear();
+      }
+    },
+  );
+
   onBeforeMount(() => {
     if (
       // @ts-ignore
@@ -73,14 +90,7 @@
       // @ts-ignore
       (!slots.checkedIcon && slots.uncheckedIcon)
     ) {
-      throw Error('[Ui3nRadio] Both checkedIcon and uncheckedIcon slots must have values ​​defined.');
-    }
-  });
-
-  onMounted(() => {
-    if (radioEl.value) {
-      radioEl.value.style.setProperty('--ui3n-radio-size', `${props.size}px`);
-      radioEl.value.style.setProperty('--ui3n-radio-color', props.color);
+      throw Error('[Ui3nRadio] Both checkedIcon and uncheckedIcon slots must have values defined.');
     }
   });
 
@@ -93,24 +103,6 @@
     },
   );
 
-  watch(
-    () => props.size,
-    newValue => {
-      if (radioEl.value) {
-        radioEl.value.style.setProperty('--ui3n-radio-size', `${newValue}px`);
-      }
-    },
-  );
-
-  watch(
-    () => props.color,
-    newValue => {
-      if (radioEl.value) {
-        radioEl.value.style.setProperty('--ui3n-radio-color', newValue);
-      }
-    },
-  );
-
   watch(
     () => groupValue?.value,
     newVal => {
@@ -124,9 +116,18 @@
 <template>
   <!-- eslint-disable max-len -->
   <div
-    ref="radioEl"
+    :style="radioStyle"
     :class="[$style.ui3nRadio, disabled && $style.disabled, !slots.default && $style.noLabel]"
   >
+    <input
+      type="radio"
+      hidden
+      :name="groupName || name"
+      :checked="isOn"
+      :value="String(checkedValue)"
+      :disabled="disabled"
+    />
+
     <div
       :class="[$style.body, disabled && $style.bodyDisabled]"
       :tabindex="disabled ? -1 : 0"
@@ -139,7 +140,6 @@
         name="checkedIcon"
       >
         <svg
-          xmlns="http://www.w3.org/2000/svg"
           :width="Number(size) - 4"
           :height="Number(size) - 4"
           viewBox="0 0 24 24"
@@ -157,7 +157,6 @@
         name="uncheckedIcon"
       >
         <svg
-          xmlns="http://www.w3.org/2000/svg"
           :width="Number(size) - 4"
           :height="Number(size) - 4"
           viewBox="0 0 24 24"
@@ -181,18 +180,14 @@
   @use '../../assets/styles/mixins' as mixins;
 
   .ui3nRadio {
-    --ui3n-radio-size: 16px;
-    --ui3n-radio-color: var(--color-icon-control-accent-default);
-    --ui3n-radio-text-size: 12px;
-    --ui3n-radio-text-color: var(--color-text-control-primary-default);
-    --ui3n-radio-text-weight: 500;
+    --ui3n-radio-min-height: 24px;
 
     position: relative;
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    min-height: var(--spacing-vl);
-    gap: var(--spacing-s);
+    min-height: var(--ui3n-radio-min-height);
+    gap: 8px;
 
     &.disabled {
       --ui3n-radio-color: var(--color-icon-control-primary-disabled) !important;
@@ -213,10 +208,10 @@
   .body {
     position: relative;
     display: flex;
-    width: var(--ui3n-radio-size);
-    min-width: var(--ui3n-radio-size);
-    height: var(--ui3n-radio-size);
-    min-height: var(--ui3n-radio-size);
+    width: var(--ui3n-radio-size, 16px);
+    min-width: var(--ui3n-radio-size, 16px);
+    height: var(--ui3n-radio-size, 16px);
+    min-height: var(--ui3n-radio-size, 16px);
     justify-content: center;
     align-items: center;
     border-radius: 50%;
@@ -229,18 +224,18 @@
   }
 
   .label {
-    font-size: var(--ui3n-radio-text-size);
-    font-weight: var(--ui3n-radio-text-weight);
-    color: var(--ui3n-radio-text-color);
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--color-text-control-primary-default);
     user-select: none;
   }
 
   .icon {
     color: var(--ui3n-radio-color);
-    min-height: calc(var(--ui3n-radion-size) - 2px);
-    height: calc(var(--ui3n-radion-size) - 2px);
-    min-width: calc(var(--ui3n-checkbox-size) - 2px);
-    width: calc(var(--ui3n-radion-size) - 2px);
+    min-height: calc(var(--ui3n-radio-size, 16px) - 2px);
+    height: calc(var(--ui3n-radio-size, 16px) - 2px);
+    min-width: calc(var(--ui3n-radio-size, 16px) - 2px);
+    width: calc(var(--ui3n-radio-size, 16px) - 2px);
     cursor: pointer;
   }
 

package/src/components/ui3n-scrollbar-vertical/types.ts

@@ -13,6 +13,7 @@ export interface Ui3nScrollbarVerticalProps {
   trackWidth?: number;
   trackRadius?: number | string;
   trackColor?: string;
+  autoUpdate?: boolean;
 }
 
 /**
@@ -35,4 +36,5 @@ export interface Ui3nScrollbarVerticalSlots {
 export interface Ui3nScrollbarVerticalExpose {
   scrollTo(options: ScrollToOptions): void;
   getContainer(): HTMLDivElement;
+  updateMetrics(): void;
 }

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

@@ -19,6 +19,7 @@
     trackWidth: 6,
     trackRadius: 4,
     trackColor: 'transparent',
+    autoUpdate: true,
   });
   const emits = defineEmits<Ui3nScrollbarVerticalEmits>();
   defineSlots<Ui3nScrollbarVerticalSlots>();
@@ -137,7 +138,6 @@
 
     containerRef.value.scrollTo({
       top: targetScrollTop,
-      behavior: 'smooth',
     });
   }
 
@@ -201,7 +201,7 @@
       resizeObserver = new ResizeObserver(updateMetrics);
       resizeObserver.observe(containerRef.value);
 
-      if (containerRef.value.firstElementChild) {
+      if (props.autoUpdate && containerRef.value.firstElementChild) {
         resizeObserver.observe(containerRef.value.firstElementChild);
       }
     }
@@ -224,8 +224,8 @@
     scrollTo: (options: ScrollToOptions) => {
       containerRef.value?.scrollTo(options);
     },
-
     getContainer: () => containerRef.value!,
+    updateMetrics,
   });
 </script>
 
@@ -255,7 +255,7 @@
     <div
       ref="trackRef"
       :class="[$style.track, { [$style.trackVisible]: isBarVisible }]"
-      @mousedown="onTrackClick"
+      @pointerdown="onTrackClick"
     >
       <div
         ref="thumbRef"

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

@@ -27,6 +27,14 @@ export type Ui3nSelectorValue<T extends Ui3nSelectorOptionBase> = T | T[keyof T]
  * Selector component properties
  */
 export interface Ui3nSelectorProps<T extends Ui3nSelectorOptionBase> {
+  /**
+   * Root element id
+   */
+  id?: string;
+  /**
+   * HTML name attribute for form submission
+   */
+  name?: string;
   /**
    * Current selector value
    */
@@ -147,3 +155,7 @@ export interface Ui3nSelectorSlots<T extends Ui3nSelectorOptionBase> {
    */
   selection?: (props: { value: Ui3nSelectorValue<T>; selectedItem: T | undefined }) => VNode;
 }
+
+export interface Ui3nSelectorExpose {
+  clear: () => void;
+}

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

@@ -1,19 +1,3 @@
-<!--
- Copyright (C) 2026 3NSoft Inc.
-
- This program is free software: you can redistribute it and/or modify it under
- the terms of the GNU General Public License as published by the Free Software
- Foundation, either version 3 of the License, or (at your option) any later
- version.
-
- This program is distributed in the hope that it will be useful, but
- WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
- See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- this program. If not, see <http://www.gnu.org/licenses/>.
--->
 <script setup lang="ts" generic="T extends Ui3nSelectorOptionBase">
   import { ref, computed, type ComputedRef, useTemplateRef, watch } from 'vue';
   import isEmpty from 'lodash/isEmpty';
@@ -25,6 +9,7 @@
     Ui3nSelectorProps,
     Ui3nSelectorEmits,
     Ui3nSelectorSlots,
+    Ui3nSelectorExpose,
     Ui3nSelectorItemDisplayingFunction,
   } from './types';
   import Ui3nButton from '../ui3n-button/ui3n-button.vue';
@@ -32,6 +17,7 @@
   import Ui3nMenu from '../ui3n-menu/ui3n-menu.vue';
 
   const props = withDefaults(defineProps<Ui3nSelectorProps<T>>(), {
+    name: undefined,
     label: '',
     items: () => [] as T[],
     itemValue: 'id',
@@ -219,6 +205,23 @@
     }
   }
 
+  function clear() {
+    resetValue();
+  }
+
+  defineExpose<Ui3nSelectorExpose>({
+    clear,
+  });
+
+  watch(
+    () => props.name,
+    newName => {
+      if (!newName) {
+        clear();
+      }
+    },
+  );
+
   watch(
     () => isMenuOpen.value,
     (val, oVal) => {
@@ -245,7 +248,17 @@
 </script>
 
 <template>
-  <div :class="$style.ui3nSelector">
+  <div
+    :id="id"
+    :class="$style.ui3nSelector"
+  >
+    <input
+      v-if="name && modelValue"
+      type="hidden"
+      :name="name"
+      :value="typeof modelValue === 'object' ? JSON.stringify(modelValue) : String(modelValue)"
+    />
+
     <label
       v-if="label"
       :class="$style.label"
@@ -362,7 +375,15 @@
   @use '@/assets/styles/mixins' as mixins;
 
   .ui3nSelector {
-    --selector-activator-height: 32px;
+    --ui3n-selector-activator-height: 32px;
+    --ui3n-selector-border-radius: calc(var(--ui3n-selector-activator-height) / 2.5);
+    --ui3n-selector-font-size: 12px;
+    --ui3n-selector-trigger-padding: 0 24px 0 8px;
+    --ui3n-selector-trigger-font-size: 13px;
+    --ui3n-selector-item-min-height: 32px;
+    --ui3n-selector-item-padding: 4px;
+    --ui3n-selector-item-font-size: 13px;
+    --ui3n-selector-item-border-radius: 4px;
 
     position: relative;
     width: 100%;
@@ -371,35 +392,37 @@
   .label {
     display: block;
     width: 100%;
-    font-size: var(--font-12);
+    font-size: var(--ui3n-selector-font-size);
     font-weight: 500;
-    line-height: var(--font-16);
+    line-height: 1.33;
     color: var(--color-text-control-primary-default);
-    margin-bottom: var(--spacing-xs);
+    margin-bottom: 4px;
   }
 
   .menu {
     width: 100%;
     max-width: 100% !important;
+    border-radius: var(--ui3n-selector-border-radius);
 
     & > div {
       max-width: 100% !important;
+      border-radius: var(--ui3n-selector-border-radius);
     }
   }
 
   .trigger {
     display: flex;
     width: 100%;
-    height: var(--selector-activator-height);
-    padding: 0 var(--spacing-ml) 0 var(--spacing-s);
+    height: var(--ui3n-selector-activator-height);
+    padding: var(--ui3n-selector-trigger-padding);
     justify-content: flex-start;
     align-items: center;
     background-color: var(--color-bg-control-secondary-default);
-    border-radius: var(--spacing-xs);
+    border-radius: var(--ui3n-selector-border-radius);
     color: var(--color-text-control-primary-default);
-    font-size: var(--font-13);
+    font-size: var(--ui3n-selector-trigger-font-size);
     font-weight: 400;
-    line-height: var(--font-16);
+    line-height: 1.23;
     transition: all 0.2s ease-in-out;
     cursor: pointer;
     @include mixins.text-overflow-ellipsis();
@@ -423,13 +446,13 @@
     }
 
     &.clearable {
-      padding-right: calc(var(--spacing-xxl) + var(--spacing-xs));
+      padding-right: 52px;
     }
 
     .clearBtn {
       position: absolute;
-      top: var(--spacing-xs);
-      right: var(--spacing-ml);
+      top: 4px;
+      right: 24px;
     }
 
     &.triggerFocused {
@@ -442,32 +465,32 @@
     position: relative;
     width: 100%;
     background-color: var(--color-bg-block-primary-default);
-    padding: var(--spacing-xs);
+    padding: var(--ui3n-selector-body-padding);
 
     .noData {
       display: flex;
-      min-height: var(--spacing-l);
+      min-height: var(--ui3n-selector-item-min-height);
       justify-content: flex-start;
       align-items: center;
-      padding: var(--spacing-xs) var(--spacing-s);
-      font-size: var(--font-13);
-      line-height: var(--font-16);
+      padding: var(--ui3n-selector-item-padding) calc(var(--ui3n-selector-item-padding) * 2);
+      font-size: var(--ui3n-selector-item-font-size);
+      line-height: 1.33;
       font-weight: 500;
       color: var(--color-text-control-primary-default);
-      border-radius: var(--spacing-xs);
+      border-radius: var(--ui3n-selector-item-border-radius);
     }
 
     .item {
       display: flex;
-      min-height: var(--spacing-l);
+      min-height: var(--ui3n-selector-item-min-height);
       justify-content: flex-start;
       align-items: center;
-      padding: var(--spacing-xs) var(--spacing-s);
-      font-size: var(--font-13);
-      line-height: var(--font-16);
+      padding: var(--ui3n-selector-item-padding) calc(var(--ui3n-selector-item-padding) * 2);
+      font-size: var(--ui3n-selector-item-font-size);
+      line-height: 1.33;
       font-weight: 500;
       color: var(--color-text-control-primary-default);
-      border-radius: var(--spacing-xs);
+      border-radius: var(--ui3n-selector-item-border-radius);
       user-select: none;
       cursor: pointer;
 

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

@@ -1,4 +1,12 @@
 export interface UI3nSliderProps {
+  /**
+   * Root element id
+   */
+  id?: string;
+  /**
+   * HTML name attribute for form submission
+   */
+  name?: string;
   /**
    * Current slider value
    */
@@ -70,3 +78,7 @@ export interface UI3nSliderEmits {
    */
   (event: 'update:modelValue', value: number | [number, number]): void;
 }
+
+export interface UI3nSliderExpose {
+  clear: () => void;
+}