@v1nt1248/3nclient-lib 0.3.27 → 0.3.29

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
    */

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

@@ -1,10 +1,8 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch, useCssModule } from 'vue';
-import type { Ui3nTabsEmits, Ui3nTabsProps, Ui3nTabsSlots } from './types';
+  import { computed, nextTick, onMounted, ref, watch, useCssModule } from 'vue';
+  import type { Ui3nTabsEmits, Ui3nTabsProps, Ui3nTabsSlots } from './types';
 
-const props = withDefaults(
-  defineProps<Ui3nTabsProps>(),
-  {
+  const props = withDefaults(defineProps<Ui3nTabsProps>(), {
     modelValue: 0,
     itemDirection: 'horizontal',
     activeColor: 'var(--color-text-control-accent-default)',
@@ -12,139 +10,179 @@ const props = withDefaults(
     indicatorColor: 'var(--color-border-control-accent-default)',
     indicatorSize: 2,
     indicatorPosition: 'normal',
-  },
-);
-const emits = defineEmits<Ui3nTabsEmits>();
-defineSlots<Ui3nTabsSlots>();
-
-const $style = useCssModule();
-
-const tabs = ref<HTMLDivElement | null>(null);
-const children = ref<HTMLCollection | null>(null);
-
-const activeColorValue = computed(() => props.activeColor);
-const inactiveColorValue = computed(() => props.inactiveColor);
-const indicatorColorValue = computed(() => props.indicatorColor);
-const indicatorSizeValue = computed(() => `${props.indicatorSize}px`);
-const indicatorPositionValue = computed(() => props.indicatorPosition === 'reverse' ? '100%' : '0');
-
-watch(
-  () => props.modelValue,
-  newValue => setTabsActivity(newValue),
-);
-
-onMounted(() => {
-  if (tabs.value) {
-    children.value = tabs.value.children;
-    initialTabsActivity();
-    setTabsActivity(props.modelValue);
+  });
+  const emits = defineEmits<Ui3nTabsEmits>();
+  defineSlots<Ui3nTabsSlots>();
+
+  const $style = useCssModule();
+
+  const tabs = ref<HTMLDivElement | null>(null);
+  const activeIndex = ref(props.modelValue);
+  const children = ref<HTMLCollection | null>(null);
+
+  const tabsStyle = computed(() => ({
+    '--ui3n-tabs-active-color': props.activeColor,
+    '--ui3n-tabs-inactive-color': props.inactiveColor,
+    '--ui3n-tabs-indicator-color': props.indicatorColor,
+    '--ui3n-tabs-indicator-size': `${props.indicatorSize}px`,
+    '--ui3n-tabs-indicator-position': props.indicatorPosition === 'reverse' ? '100%' : '0',
+  }));
+
+  function updateChildrenAttributes(): void {
+    if (tabs.value?.children) {
+      const children = tabs.value.children;
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i] as HTMLElement;
+
+        child.dataset.index = `${i}`;
+
+        if (!child.classList.contains($style.item)) {
+          child.classList.add($style.item);
+        }
+
+        if (i === activeIndex.value) {
+          child.classList.add($style.active);
+        } else {
+          child.classList.remove($style.active);
+        }
+      }
+    }
   }
-});
-
-function initialTabsActivity(): void {
-  if (children.value) {
-    for (let i = 0; i < children.value.length; i++) {
-      // @ts-ignore
-      children.value[i].dataset.index = `${i}`;
-      children.value[i].classList.add($style.item);
+
+  function initialTabsActivity(): void {
+    if (children.value) {
+      for (let i = 0; i < children.value.length; i++) {
+        // @ts-ignore
+        children.value[i].dataset.index = `${i}`;
+        children.value[i].classList.add($style.item);
+      }
     }
   }
-}
-
-function setTabsActivity(index: number): void {
-  if (children.value) {
-    for (let i = 0; i < children.value.length; i++) {
-      if (i === index) {
-        children.value[i].classList.add($style.active);
-      } else {
-        children.value[i].classList.remove($style.active);
+
+  function setTabsActivity(index: number): void {
+    if (children.value) {
+      for (let i = 0; i < children.value.length; i++) {
+        if (i === index) {
+          children.value[i].classList.add($style.active);
+        } else {
+          children.value[i].classList.remove($style.active);
+        }
       }
     }
   }
-}
 
-const onClick = (ev: MouseEvent) => {
-  // @ts-ignore
-  const { index } = ev.target.dataset;
-  if (index) {
-    emits('update:modelValue', Number(index));
+  function onClick(ev: MouseEvent) {
+    const target = ev.target as HTMLElement;
+
+    const itemEl = target.closest('[data-index]') as HTMLElement | null;
+
+    if (itemEl && itemEl.dataset.index) {
+      if (itemEl.hasAttribute('disabled') || itemEl.classList.contains($style.disabled)) {
+        return;
+      }
+
+      const index = Number(itemEl.dataset.index);
+
+      activeIndex.value = index;
+      updateChildrenAttributes();
+
+      emits('update:modelValue', index);
+    }
   }
-};
+
+  watch(
+    () => props.modelValue,
+    newVal => {
+      if (newVal !== activeIndex.value) {
+        activeIndex.value = newVal;
+        nextTick(() => {
+          updateChildrenAttributes();
+        });
+      }
+    },
+    { immediate: true },
+  );
+
+  onMounted(() => {
+    updateChildrenAttributes();
+  });
 </script>
 
 <template>
   <div
     ref="tabs"
+    :id="id"
+    :style="tabsStyle"
     :class="[$style.ui3nTabs, itemDirection === 'vertical' && $style.vertical]"
-    v-on="children ? { click: onClick } : {}"
+    @click="onClick"
   >
     <slot />
   </div>
 </template>
 
 <style lang="scss" module>
-@use '../../assets/styles/mixins' as mixins;
-
-.ui3nTabs {
-  --ui3n-tabs-height: 48px;
-
-  position: relative;
-  height: var(--ui3n-tabs-height);
-  display: flex;
-  justify-content: center;
-  align-items: stretch;
-  background-color: transparent;
-}
-
-.item {
-  cursor: pointer;
-  position: relative;
-  user-select: none;
-  color: v-bind(inactiveColorValue);
-  @include mixins.ripple(var(--color-bg-control-secondary-default));
-
-  &:hover {
-    background-color: var(--color-bg-control-secondary-default);
-  }
+  @use '../../assets/styles/mixins' as mixins;
+
+  .ui3nTabs {
+    --ui3n-tabs-height: 48px;
 
-  &::after {
-    position: absolute;
-    content: '';
-    left: 0;
-    width: 100%;
-    bottom: v-bind(indicatorPositionValue);
-    height: v-bind(indicatorSizeValue);
+    position: relative;
+    height: var(--ui3n-tabs-height);
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
     background-color: transparent;
-    transition: background-color 250ms ease-in-out;
   }
 
-  &[disabled] {
-    opacity: 0.5;
-    cursor: default;
-    pointer-events: none
-  }
-}
+  .item {
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+    color: var(--ui3n-tabs-inactive-color);
+    @include mixins.ripple(var(--color-bg-control-secondary-default));
+
+    &:hover {
+      background-color: var(--color-bg-control-secondary-default);
+    }
 
-.active {
-  color: v-bind(activeColorValue);
+    &::after {
+      position: absolute;
+      content: '';
+      left: 0;
+      width: 100%;
+      bottom: var(--ui3n-tabs-indicator-position);
+      height: var(--ui3n-tabs-indicator-size);
+      background-color: transparent;
+      transition: background-color 250ms ease-in-out;
+    }
 
-  &::after {
-    background-color: v-bind(indicatorColorValue);
-    transition: background-color 250ms ease-in-out;
+    &[disabled] {
+      opacity: 0.5;
+      cursor: default;
+      pointer-events: none;
+    }
   }
-}
 
-.vertical {
-  height: auto;
-  flex-direction: column;
+  .active {
+    color: var(--ui3n-tabs-active-color);
 
-  .item {
     &::after {
-      left: v-bind(indicatorPositionValue);
-      width: v-bind(indicatorSizeValue);
-      bottom: 0;
-      height: 100%;
+      background-color: var(--ui3n-tabs-indicator-color);
+      transition: background-color 250ms ease-in-out;
+    }
+  }
+
+  .vertical {
+    height: auto;
+    flex-direction: column;
+
+    .item {
+      &::after {
+        left: var(--ui3n-tabs-indicator-position);
+        width: var(--ui3n-tabs-indicator-size);
+        bottom: 0;
+        height: 100%;
+      }
     }
   }
-}
 </style>

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

@@ -1,4 +1,12 @@
 export interface Ui3nTextProps {
+  /**
+   * Root element id
+   */
+  id?: string;
+  /**
+   * HTML name attribute for form submission
+   */
+  name?: string;
   /**
    * Text value
    */
@@ -86,3 +94,7 @@ export interface Ui3nTextEmits {
    */
   (event: 'update:valid', value: boolean): void;
 }
+
+export interface Ui3nTextExpose {
+  clear: () => void;
+}