@v1nt1248/3nclient-lib 0.3.28 → 0.3.30

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

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

@@ -3,10 +3,12 @@
   import Ui3nIcon from '../ui3n-icon/ui3n-icon.vue';
   import type { Ui3nTableSortIconProps } from './types';
 
-  const props = defineProps<Ui3nTableSortIconProps>();
+  const props = withDefaults(defineProps<Ui3nTableSortIconProps>(), {
+    size: 16,
+    color: 'var(--color-icon-table-primary-default)',
+  });
 
-  const iconSize = computed(() => props.size ? +props.size : 16);
-  const iconColor = computed(() => props.color || 'var(--color-icon-table-primary-default)');
+  const iconName = computed(() => (props.value === 'asc' ? 'round-arrow-upward' : 'round-arrow-downward'));
 </script>
 
 <template>
@@ -15,11 +17,10 @@
     name="fade"
   >
     <ui3n-icon
-      :key="value === 'asc' ? 'round-arrow-upward' : 'round-arrow-downward'"
-      :icon="value === 'asc' ? 'round-arrow-upward' : 'round-arrow-downward'"
-      :width="iconSize"
-      :height="iconSize"
-      :color="iconColor"
+      :key="iconName"
+      :icon="iconName"
+      :size="Number(size)"
+      :color="color"
     />
   </transition>
 </template>

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

@@ -1,7 +1,13 @@
 <script setup lang="ts" generic="T extends Ui3nTableBodyBaseItem">
   import size from 'lodash/size';
   import { useTable } from './composables/useTable';
-  import type { Ui3nTableBodyBaseItem, Ui3nTableEmits, Ui3nTableProps, Ui3nTableSlots, Ui3nTableExpose } from './types';
+  import type {
+    Ui3nTableBodyBaseItem,
+    Ui3nTableEmits,
+    Ui3nTableProps,
+    Ui3nTableSlots,
+    Ui3nTableExpose,
+  } from './types';
   import Ui3nButton from '../ui3n-button/ui3n-button.vue';
   import Ui3nCheckbox from '../ui3n-checkbox/ui3n-checkbox.vue';
   import Ui3nTableSortIcon from './ui3n-table-sort-icon.vue';
@@ -27,6 +33,7 @@
     processSelection,
     toggleSelectedRows,
     changeSortOrder,
+    clear,
   } = useTable(props, emits);
 
   const eventHandlers = {
@@ -39,6 +46,7 @@
     selectedRowsArray,
     hasGroupActionsRow,
     closeGroupActionsRow,
+    clear,
   });
 </script>
 
@@ -47,6 +55,19 @@
     ref="tableEl"
     :class="$style.ui3nTable"
   >
+    <fieldset
+      v-if="config?.tableName && selectedRowsSize > 0"
+      :class="$style.hiddenBlock"
+    >
+      <input
+        v-for="(row, rowIndex) in selectedRowsArray"
+        :key="getRowKey(row, rowIndex)"
+        type="hidden"
+        :name="config.selectable === 'multiple' ? `${config.tableName}[]` : config.tableName"
+        :value="String(getRowKey(row, rowIndex))"
+      />
+    </fieldset>
+
     <div :class="[$style.header, showGroupActionsRow && $style.withGroupActions]">
       <!-- group actions -->
       <div
@@ -112,9 +133,7 @@
     <div :class="$style.body">
       <template v-if="config?.showNoDataMessage && !size(body.content)">
         <slot name="no-data">
-          <div :class="$style.noData">
-            No data
-          </div>
+          <div :class="$style.noData">No data</div>
         </slot>
       </template>
 
@@ -204,8 +223,13 @@
     --ui3n-table-group-actions-bg-color: var(--color-bg-block-primary-default);
     --ui3n-table-header-bg-color: var(--color-bg-table-header-default);
     --ui3n-table-header-color: var(--color-text-table-primary-default);
+    --ui3n-table-header-font-size: 14px;
+    --ui3n-table-padding-inline: 16px;
     --ui3n-table-row-color: var(--color-text-table-primary-default);
     --ui3n-table-row-bg-color-selected: var(--color-bg-control-primary-hover);
+    --ui3n-table-row-checkbox-width: 16px;
+    --ui3n-table-cell-font-size: 12px;
+    --ui3n-table-nodata-height: 48px;
     --ui3n-table-nodata-color: var(--color-text-control-secondary-default);
 
     position: relative;
@@ -219,6 +243,13 @@
     align-items: stretch;
   }
 
+  .hiddenBlock {
+    display: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
   .header {
     position: sticky;
     top: 0;
@@ -228,7 +259,7 @@
     display: grid;
     grid-template-columns: var(--ui3n-table-columns-width);
     background-color: var(--ui3n-table-header-bg-color);
-    padding-left: var(--spacing-m);
+    padding-left: var(--ui3n-table-padding-inline);
     z-index: 5;
 
     &.withGroupActions {
@@ -238,7 +269,7 @@
     }
 
     .headerItemWrapper:not(:first-child) {
-      padding: 0 var(--spacing-xs);
+      padding: 0 calc(var(--ui3n-table-padding-inline) / 4);
     }
   }
 
@@ -267,7 +298,7 @@
 
   .headerText {
     display: block;
-    font-size: var(--font-14);
+    font-size: var(--ui3n-table-header-font-size);
     font-weight: 500;
     color: var(--ui3n-table-header-color);
     @include mixins.text-overflow-ellipsis();
@@ -275,7 +306,7 @@
 
   .sortableActive {
     .headerItem {
-      gap: var(--spacing-s);
+      gap: 8px;
     }
   }
 
@@ -286,7 +317,7 @@
     display: flex;
     width: 100%;
     height: var(--ui3n-table-group-actions-height);
-    padding: 0 var(--spacing-m);
+    padding: 0 var(--ui3n-table-padding-inline);
     justify-content: space-between;
     align-items: center;
     background-color: var(--ui3n-table-group-actions-bg-color);
@@ -298,7 +329,7 @@
   .groupActionsBody {
     display: flex;
     height: 100%;
-    padding: 0 var(--spacing-s);
+    padding: 0 calc(var(--ui3n-table-padding-inline) / 2);
     flex-grow: 1;
   }
 
@@ -318,7 +349,7 @@
     background-color: transparent;
 
     &:not(.customRow) {
-      padding-left: var(--spacing-m);
+      padding-left: var(--ui3n-table-padding-inline);
       display: grid;
       grid-template-columns: var(--ui3n-table-columns-width);
     }
@@ -340,7 +371,7 @@
     position: absolute;
     top: 0;
     left: 16px;
-    width: var(--spacing-m);
+    width: var(--ui3n-table-row-checkbox-width);
     height: 100%;
     display: flex;
     justify-content: flex-start;
@@ -356,12 +387,12 @@
     align-items: center;
 
     &.bodyItemFirst {
-      padding-left: var(--spacing-ml);
+      padding-left: calc(var(--ui3n-table-padding-inline) * 1.5);
     }
   }
 
   .cell {
-    font-size: var(--font-12);
+    font-size: var(--ui3n-table-cell-font-size);
     font-weight: 400;
     color: var(--ui3n-table-row-color);
   }
@@ -369,12 +400,12 @@
   .noData {
     position: relative;
     width: 100%;
-    height: var(--spacing-xxl);
-    padding-top: var(--spacing-ml);
+    height: var(--ui3n-table-nodata-height);
+    padding-top: 24px;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: var(--font-12);
+    font-size: var(--ui3n-table-cell-font-size);
     font-weight: 600;
     color: var(--ui3n-table-nodata-color);
   }

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

@@ -4,6 +4,10 @@ import { VNode } from 'vue';
  * Tabs component properties
  */
 export interface Ui3nTabsProps {
+  /**
+   * Root element id
+   */
+  id?: string;
   /**
    * Current active tab index
    */