@v1nt1248/3nclient-lib 0.3.27 → 0.3.29

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

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

@@ -4,9 +4,10 @@
   import Ui3nTooltip from '../ui3n-tooltip/ui3n-tooltip.vue';
   import { round } from '@/utils';
   import type { Nullable } from '@/types';
-  import type { UI3nSliderProps, UI3nSliderEmits } from './types';
+  import type { UI3nSliderProps, UI3nSliderEmits, UI3nSliderExpose } from './types';
 
   const props = withDefaults(defineProps<UI3nSliderProps>(), {
+    name: undefined,
     min: 0,
     max: 100,
     labelVisible: 'normal',
@@ -34,14 +35,9 @@
   const innerValue = ref<number | [number, number]>(0);
   const selectedPointer = ref<Nullable<1 | 2>>(null);
 
-  const sliderHeight = computed(() => {
-    const height = Math.max(Number(props.trackHeight), Number(props.thumbSize));
-    return `${height}px`;
-  });
-  const trackHeightCss = computed(() => `${props.trackHeight}px`);
   const thumbSizeCss = computed(() => `${props.thumbSize}px`);
   const diff = computed(() => Number(props.max) - Number(props.min));
-  const innerStep = computed(() => props.step ? Number(props.step) : diff.value / 100);
+  const innerStep = computed(() => (props.step ? Number(props.step) : diff.value / 100));
 
   const activeBlockStyle = computed(() => {
     const style = {} as Record<'left' | 'width', string>;
@@ -51,15 +47,14 @@
       if (minVal <= Number(props.min)) {
         style.left = '0px';
       } else if (minVal < Number(props.max)) {
-        style.left = `${round((minVal - Number(props.min)) / diff.value * 100, 0)}%`;
+        style.left = `${round(((minVal - Number(props.min)) / diff.value) * 100, 0)}%`;
       }
 
       if (maxVal >= Number(props.max)) {
-        style.width = minVal <= Number(props.min)
-          ? '100%'
-          : `${round((Number(props.max) - minVal) / diff.value * 100, 0)}%`;
+        style.width =
+          minVal <= Number(props.min) ? '100%' : `${round(((Number(props.max) - minVal) / diff.value) * 100, 0)}%`;
       } else if (maxVal > Number(props.min)) {
-        style.width = `${round((maxVal - minVal) / diff.value * 100, 0)}%`;
+        style.width = `${round(((maxVal - minVal) / diff.value) * 100, 0)}%`;
       }
 
       return style;
@@ -73,30 +68,32 @@
       style.width = '100%';
     } else {
       style.left = '0px';
-      style.width = `${round(((innerValue.value as number) - Number(props.min)) / diff.value * 100, 0)}%`;
+      style.width = `${round((((innerValue.value as number) - Number(props.min)) / diff.value) * 100, 0)}%`;
     }
 
     return style;
   }) 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))`,
+  const pointer1PositionCss = computed(() =>
+    props.range
+      ? `calc(${activeBlockStyle.value.left} - calc(${thumbSizeCss.value} / 2))`
+      : `calc(${activeBlockStyle.value.width} - calc(${thumbSizeCss.value} / 2))`,
   );
-  const pointer2PositionCss = computed(() => props.range
-    ? `calc(${activeBlockStyle.value.width} + ${activeBlockStyle.value.left} - calc(${thumbSizeCss.value} / 2))`
-    : '200%',
+  const pointer2PositionCss = computed(() =>
+    props.range
+      ? `calc(${activeBlockStyle.value.width} + ${activeBlockStyle.value.left} - calc(${thumbSizeCss.value} / 2))`
+      : '200%',
   );
 
   const label1Text = computed(() => {
     if (props.range) {
       const val = (innerValue.value as [number, number])[0];
-      return props.transformValueMethod
-        ? props.transformValueMethod(val)
-        : `${val}`;
+      return props.transformValueMethod ? props.transformValueMethod(val) : `${val}`;
     }
 
-    return props.transformValueMethod ? props.transformValueMethod(innerValue.value as number) : `${innerValue.value}`;
+    return props.transformValueMethod
+      ? props.transformValueMethod(innerValue.value as number)
+      : `${innerValue.value}`;
   });
   const label2Text = computed(() => {
     if (!props.range) {
@@ -104,7 +101,23 @@
     }
 
     const val = (innerValue.value as [number, number])[1];
-    return props.transformValueMethod ? props.transformValueMethod(val) :  `${val}`;
+    return props.transformValueMethod ? props.transformValueMethod(val) : `${val}`;
+  });
+
+  const sliderStyle = computed(() => {
+    const height = Math.max(Number(props.trackHeight), Number(props.thumbSize));
+    return {
+      '--ui3n-slider-height': `${height}px`,
+      '--ui3n-slider-label-color': props.labelColor,
+      '--ui3n-slider-label-text-color': props.labelTextColor,
+      '--ui3n-slider-active-color': props.activeColor,
+      '--ui3n-slider-track-color': props.trackColor,
+      '--ui3n-slider-track-height': `${props.trackHeight}px`,
+      '--ui3n-slider-thumb-size': `${props.thumbSize}px`,
+      '--ui3n-slider-thumb-color': props.thumbColor,
+      '--ui3n-slider-pointer1-position': pointer1PositionCss.value,
+      '--ui3n-slider-pointer2-position': pointer2PositionCss.value,
+    };
   });
 
   function onMouseenter(pointer: 1 | 2) {
@@ -152,7 +165,8 @@
     }
 
     const sliderRefClientRect = sliderRef.value!.getBoundingClientRect();
-    const getValue = (leftPosition: number): number => Math.round(leftPosition / sliderRefClientRect.width * diff.value) + Number(props.min);
+    const getValue = (leftPosition: number): number =>
+      Math.round((leftPosition / sliderRefClientRect.width) * diff.value) + Number(props.min);
 
     let newLeft = event.clientX - shiftX.value[`${selectedPointer.value}`] - sliderRefClientRect.left;
     if (newLeft < 0) {
@@ -187,7 +201,7 @@
   function onTimelineClick(event: MouseEvent) {
     const { x } = event;
     const { x: sliderElStart, width: sliderElWidth } = sliderRef.value!.getBoundingClientRect();
-    const selectedValue = Math.round((x - sliderElStart) / sliderElWidth * diff.value) + Number(props.min);
+    const selectedValue = Math.round(((x - sliderElStart) / sliderElWidth) * diff.value) + Number(props.min);
 
     if (props.range) {
       const [minVal, maxVal] = innerValue.value as [number, number];
@@ -204,9 +218,30 @@
     emits('update:modelValue', innerValue.value);
   }
 
+  function clear() {
+    const resetValue = props.range
+      ? ([Number(props.min), Number(props.min)] as [number, number])
+      : Number(props.min);
+    innerValue.value = resetValue;
+    emits('update:modelValue', resetValue);
+  }
+
+  defineExpose<UI3nSliderExpose>({
+    clear,
+  });
+
+  watch(
+    () => props.name,
+    newName => {
+      if (!newName) {
+        clear();
+      }
+    },
+  );
+
   watch(
     () => JSON.stringify(props.modelValue),
-    (val) => {
+    val => {
       if (props.range) {
         if (val !== JSON.stringify(innerValue.value)) {
           innerValue.value = cloneDeep(props.modelValue);
@@ -220,7 +255,8 @@
       if (newVal !== innerValue.value) {
         innerValue.value = newVal;
       }
-    }, {
+    },
+    {
       immediate: true,
     },
   );
@@ -229,9 +265,33 @@
 <template>
   <div
     ref="sliderEl"
+    :id="id"
+    :style="sliderStyle"
     :class="[$style.ui3nSlider, disabled && $style.disabled]"
     @click.stop.prevent="onTimelineClick"
   >
+    <template v-if="name">
+      <template v-if="range">
+        <input
+          type="hidden"
+          :name="`${name}_min`"
+          :value="(innerValue as [number, number])[0]"
+        />
+        <input
+          type="hidden"
+          :name="`${name}_max`"
+          :value="(innerValue as [number, number])[1]"
+        />
+      </template>
+      <template v-else>
+        <input
+          type="hidden"
+          :name="name"
+          :value="innerValue as number"
+        />
+      </template>
+    </template>
+
     <div :class="$style.track">
       <div
         :class="$style.active"
@@ -290,17 +350,6 @@
 
 <style lang="scss" module>
   .ui3nSlider {
-    --ui3n-slider-height: v-bind(sliderHeight);
-    --ui3n-slider-label-color: v-bind(labelColor);
-    --ui3n-slider-label-text-color: v-bind(labelTextColor);
-    --ui3n-slider-active-color: v-bind(activeColor);
-    --ui3n-slider-track-color: v-bind(trackColor);
-    --ui3n-slider-track-height: v-bind(trackHeightCss);
-    --ui3n-slider-thumb-size: v-bind(thumbSizeCss);
-    --ui3n-slider-thumb-color: v-bind(thumbColor);
-    --ui3n-slider-pointer1-position: v-bind(pointer1PositionCss);
-    --ui3n-slider-pointer2-position: v-bind(pointer2PositionCss);
-
     position: relative;
     width: 100%;
     height: var(--ui3n-slider-height);

package/src/components/ui3n-step-line-bar/types.ts

@@ -2,6 +2,10 @@
  * Step line bar component properties
  */
 export interface Ui3nStepLineBarProps {
+  /**
+   * Root element id
+   */
+  id?: string;
   /**
    * Step label
    */

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

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
   import type { Ui3nStepLineBarProps } from './types';
 
-  withDefaults(
-    defineProps<Ui3nStepLineBarProps>(),
-    {
-      current: 1,
-    },
-  );
+  const props = withDefaults(defineProps<Ui3nStepLineBarProps>(), {
+    current: 1,
+  });
 </script>
 
 <template>
-  <div :class="$style.ui3nStepLineBar">
+  <div
+    :id="id"
+    :class="$style.ui3nStepLineBar"
+  >
     <div :class="$style.label">
       {{ label }}
     </div>
@@ -27,8 +27,6 @@
 
 <style lang="scss" module>
   .ui3nStepLineBar {
-    --ui3n-step-line-bar-steps: v-bind(steps);
-
     position: relative;
     width: 100%;
   }
@@ -54,7 +52,7 @@
 
   .step {
     position: relative;
-    width: calc((100% - (calc(var(--ui3n-step-line-bar-steps) - 1) * var(--spacing-s))) / var(--ui3n-step-line-bar-steps));
+    flex: 1;
     height: var(--spacing-xs);
     border-radius: var(--spacing-xs);
     background-color: var(--color-bg-control-secondary-default);

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

@@ -4,6 +4,14 @@ import { VNode } from 'vue';
  * Switch component properties
  */
 export interface Ui3nSwitchProps {
+  /**
+   * Root element id
+   */
+  id?: string;
+  /**
+   * HTML name attribute for form submission
+   */
+  name?: string;
   /**
    * Current switch value
    */
@@ -46,3 +54,7 @@ export interface Ui3nSwitchSlots {
    */
   default: () => VNode;
 }
+
+export interface Ui3nSwitchExpose {
+  clear: () => void;
+}

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

@@ -1,15 +1,13 @@
 <script lang="ts" setup>
-  import { onMounted, ref, watch, useSlots } from 'vue';
-  import type { Ui3nSwitchEmits, Ui3nSwitchProps, Ui3nSwitchSlots } from './types';
-
-  const props = withDefaults(
-    defineProps<Ui3nSwitchProps>(),
-    {
-      size: 16,
-      color: 'var(--color-icon-control-accent-default)',
-      disabled: false,
-    },
-  );
+  import { computed, ref, watch, useSlots } from 'vue';
+  import type { Ui3nSwitchEmits, Ui3nSwitchProps, Ui3nSwitchSlots, Ui3nSwitchExpose } from './types';
+
+  const props = withDefaults(defineProps<Ui3nSwitchProps>(), {
+    name: undefined,
+    size: 16,
+    color: 'var(--color-icon-control-accent-default)',
+    disabled: false,
+  });
 
   const emits = defineEmits<Ui3nSwitchEmits>();
 
@@ -19,18 +17,10 @@
   const switchEl = ref<HTMLDivElement | null>(null);
   const val = ref<boolean>(false);
 
-  onMounted(() => {
-    if (switchEl.value) {
-      switchEl.value.style.setProperty('--ui3n-switch-color', `${props.color}`);
-      props.size && switchEl.value.style.setProperty('--ui3n-switch-size', `${props.size}px`);
-    }
-  });
-
-  watch(
-    () => props.modelValue,
-    newValue => val.value = newValue,
-    { immediate: true },
-  );
+  const switchStyle = computed(() => ({
+    '--ui3n-switch-color': props.color,
+    '--ui3n-switch-size': `${props.size}px`,
+  }));
 
   function change(ev: Event) {
     ev.preventDefault();
@@ -39,13 +29,55 @@
     emits('change', val.value);
     emits('update:modelValue', val.value);
   }
+
+  function clear() {
+    val.value = false;
+    emits('change', false);
+    emits('update:modelValue', false);
+  }
+
+  defineExpose<Ui3nSwitchExpose>({
+    clear,
+  });
+
+  watch(
+    () => props.name,
+    newName => {
+      if (!newName) {
+        clear();
+      }
+    },
+  );
+
+  watch(
+    () => props.modelValue,
+    newValue => (val.value = newValue),
+    { immediate: true },
+  );
 </script>
 
 <template>
   <div
     ref="switchEl"
-    :class="[$style.ui3nSwitch, val && $style.checked, !slots.default && $style.noLabel, disabled && $style.disabled]"
+    :id="id"
+    :style="switchStyle"
+    :class="[
+      $style.ui3nSwitch,
+      val && $style.checked,
+      !slots.default && $style.noLabel,
+      disabled && $style.disabled,
+    ]"
   >
+    <input
+      v-if="name"
+      type="checkbox"
+      hidden
+      :name="name"
+      :checked="val"
+      :disabled="disabled"
+      :value="val ? 'on' : ''"
+    />
+
     <div
       :class="$style.body"
       :tabindex="disabled ? -1 : 0"
@@ -75,7 +107,7 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--spacing-s);
+    gap: 8px;
   }
 
   .body {

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

@@ -199,6 +199,22 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
       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();
+    hasGroupActionsRow.value = false;
+    emits('select:row', []);
+  }
+
+  watch(
+    () => props.config?.tableName,
+    newTableName => {
+      if (!newTableName) {
+        clear();
+      }
+    },
+  );
+
   watch(
     tableColumnWidth,
     (val, oVal) => {
@@ -237,5 +253,6 @@ export function useTable<T extends Ui3nTableBodyBaseItem>(props: Ui3nTableProps<
     processSelection,
     toggleSelectedRows,
     changeSortOrder,
+    clear,
   };
 }

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

@@ -309,4 +309,8 @@ export type Ui3nTableExpose<T extends Ui3nTableBodyBaseItem> = {
    * Close group actions row
    */
   closeGroupActionsRow: () => void;
+  /**
+   * Clear all selected rows
+   */
+  clear: () => void;
 };