@v1nt1248/3nclient-lib 0.3.27 → 0.3.29

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-horizontal/types.ts

@@ -8,6 +8,7 @@ export interface Ui3nScrollbarHorizontalProps {
   thumbHoverColor?: string;
   thumbActiveColor?: string;
   trackHeight?: number | string;
+  trackRadius?: number | string;
   trackColor?: string;
 }
 

package/src/components/ui3n-scrollbar-horizontal/ui3n-scroolbar-horizontal.vue

@@ -7,7 +7,7 @@
     Ui3nScrollbarHorizontalExpose,
   } from './types';
 
-  const MIN_WIDTH = 40;
+  const MIN_WIDTH = 32;
 
   const props = withDefaults(defineProps<Ui3nScrollbarHorizontalProps>(), {
     thumbMinWidth: MIN_WIDTH,
@@ -17,6 +17,7 @@
     thumbHoverColor: 'var(--color-bg-control-accent-hover)',
     thumbActiveColor: 'var(--color-bg-control-accent-focused)',
     trackHeight: 6,
+    trackRadius: 4,
     trackColor: 'transparent',
   });
 
@@ -91,6 +92,10 @@
     const num = Number(props.trackHeight);
     return isNaN(num) ? String(props.trackHeight) : `${num}px`;
   });
+  const trackRadiusCss = computed(() => {
+    const num = Number(props.trackRadius);
+    return isNaN(num) ? String(props.trackRadius) : `${num}px`;
+  });
   const trackColorCss = computed(() => props.trackColor);
 
   function updateMetrics() {
@@ -232,6 +237,7 @@
       '--ui3n-scrollbar-horizontal-thumb-hover-color': thumbHoverColorCss,
       '--ui3n-scrollbar-horizontal-thumb-active-color': thumbActiveColorCss,
       '--ui3n-scrollbar-horizontal-track-height': trackHeightCss,
+      '--ui3n-scrollbar-horizontal-track-radius': trackRadiusCss,
       '--ui3n-scrollbar-horizontal-track-color': trackColorCss,
     }"
     @mouseenter="isHovered = true"
@@ -293,6 +299,7 @@
     bottom: 2px;
     height: var(--ui3n-scrollbar-horizontal-track-height);
     background: var(--ui3n-scrollbar-horizontal-track-color);
+    border-radius: var(--ui3n-scrollbar-horizontal-track-radius);
     z-index: 10;
     visibility: hidden;
     opacity: 0;

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

@@ -11,7 +11,9 @@ export interface Ui3nScrollbarVerticalProps {
   thumbHoverColor?: string;
   thumbActiveColor?: string;
   trackWidth?: number;
+  trackRadius?: number | string;
   trackColor?: string;
+  autoUpdate?: boolean;
 }
 
 /**
@@ -34,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

@@ -7,7 +7,7 @@
     Ui3nScrollbarVerticalExpose,
   } from './types';
 
-  const MIN_HEIGHT = 40;
+  const MIN_HEIGHT = 32;
 
   const props = withDefaults(defineProps<Ui3nScrollbarVerticalProps>(), {
     thumbMinHeight: MIN_HEIGHT,
@@ -17,7 +17,9 @@
     thumbHoverColor: 'var(--color-bg-control-accent-hover)',
     thumbActiveColor: 'var(--color-bg-control-accent-focused)',
     trackWidth: 6,
+    trackRadius: 4,
     trackColor: 'transparent',
+    autoUpdate: true,
   });
   const emits = defineEmits<Ui3nScrollbarVerticalEmits>();
   defineSlots<Ui3nScrollbarVerticalSlots>();
@@ -90,6 +92,10 @@
     return isNaN(num) ? String(props.trackWidth) : `${num}px`;
   });
   const trackColorCss = computed(() => props.trackColor);
+  const trackRadiusCss = computed(() => {
+    const num = Number(props.trackRadius);
+    return isNaN(num) ? String(props.trackRadius) : `${num}px`;
+  });
 
   function updateMetrics() {
     if (!containerRef.value) {
@@ -132,7 +138,6 @@
 
     containerRef.value.scrollTo({
       top: targetScrollTop,
-      behavior: 'smooth',
     });
   }
 
@@ -196,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);
       }
     }
@@ -219,8 +224,8 @@
     scrollTo: (options: ScrollToOptions) => {
       containerRef.value?.scrollTo(options);
     },
-
     getContainer: () => containerRef.value!,
+    updateMetrics,
   });
 </script>
 
@@ -233,6 +238,7 @@
       '--ui3n-scrollbar-thumb-hover-color': thumbHoverColorCss,
       '--ui3n-scrollbar-thumb-active-color': thumbActiveColorCss,
       '--ui3n-scrollbar-track-width': trackWidthCss,
+      '--ui3n-scrollbar-track-radius': trackRadiusCss,
       '--ui3n-scrollbar-track-color': trackColorCss,
     }"
     @mouseenter="isHovered = true"
@@ -249,7 +255,7 @@
     <div
       ref="trackRef"
       :class="[$style.track, { [$style.trackVisible]: isBarVisible }]"
-      @mousedown="onTrackClick"
+      @pointerdown="onTrackClick"
     >
       <div
         ref="thumbRef"
@@ -293,6 +299,7 @@
     bottom: 0;
     width: var(--ui3n-scrollbar-track-width);
     background: var(--ui3n-scrollbar-track-color);
+    border-radius: var(--ui3n-scrollbar-track-radius);
     z-index: 10;
     visibility: hidden;
     opacity: 0;

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;
+}