@v1nt1248/3nclient-lib 0.3.28 → 0.3.29

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

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

@@ -1,9 +1,11 @@
+<!-- @strictTemplates false -->
 <script lang="ts" setup>
   import { onMounted, ref, watch } from 'vue';
   import { patchTextareaMaxRowsSupport } from '@/utils';
-  import type { Ui3nTextEmits, Ui3nTextProps } from './types';
+  import type { Ui3nTextEmits, Ui3nTextProps, Ui3nTextExpose } from './types';
 
   const props = withDefaults(defineProps<Ui3nTextProps>(), {
+    name: undefined,
     rows: 6,
     maxRows: 6,
     label: '',
@@ -42,9 +44,10 @@
   }
 
   function onBlur(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
+
     setTimeout(() => {
       isFocused.value = false;
-      const value = (event.target as HTMLInputElement).value;
       validate(value);
       emits('blur', event);
       emits('change', value);
@@ -82,6 +85,25 @@
     emits('keydown', event);
   }
 
+  function clear() {
+    text.value = '';
+    errorMessage.value = '';
+    isDirty.value = false;
+
+    if (textareaElement.value) {
+      textareaElement.value.value = '';
+    }
+
+    emits('update:modelValue', '');
+    emits('input', '');
+    emits('change', '');
+    emits('update:valid', true);
+  }
+
+  defineExpose<Ui3nTextExpose>({
+    clear,
+  });
+
   onMounted(() => {
     if (textareaElement.value) {
       patchTextareaMaxRowsSupport(textareaElement.value!);
@@ -93,6 +115,15 @@
     }
   });
 
+  watch(
+    () => props.name,
+    newName => {
+      if (!newName) {
+        clear();
+      }
+    },
+  );
+
   watch(
     () => props.modelValue,
     (val, oldVal) => {
@@ -106,7 +137,10 @@
 </script>
 
 <template>
-  <div :class="[$style.ui3nText, disabled && $style.disabled, isFocused && $style.focused]">
+  <div
+    :id="id"
+    :class="[$style.ui3nText, disabled && $style.disabled, isFocused && $style.focused]"
+  >
     <label
       v-if="label"
       :class="$style.label"
@@ -119,6 +153,7 @@
         ref="textareaElement"
         :class="$style.content"
         :value="text"
+        :name="name"
         :placeholder="placeholder"
         :readonly="disabled"
         :rows="rows"
@@ -138,28 +173,34 @@
 
 <style lang="scss" module>
   .ui3nText {
+    --ui3n-text-border-radius: 4px;
+    --ui3n-text-label-font-size: 12px;
+    --ui3n-text-font-size: 13px;
+    --ui3n-text-padding-inline: 8px;
+    --ui3n-text-padding-block: 8px;
+
     position: relative;
     width: 100%;
-    border-radius: var(--spacing-xs);
+    border-radius: var(--ui3n-text-border-radius);
     padding: 1px;
   }
 
   .label {
     display: block;
     width: 100%;
-    font-size: var(--font-12);
-    line-height: var(--font-16);
+    font-size: var(--ui3n-text-label-font-size);
+    line-height: 1.33;
     font-weight: 600;
     color: var(--color-text-control-primary-default);
-    margin-bottom: var(--spacing-xs);
+    margin-bottom: 4px;
   }
 
   .body {
     position: relative;
     width: 100%;
-    padding: var(--spacing-s) 0;
+    padding: var(--ui3n-text-padding-block) 0;
     background-color: var(--color-bg-control-secondary-default);
-    border-radius: var(--spacing-xs);
+    border-radius: var(--ui3n-text-border-radius);
     transition: all 0.2s ease-in-out;
 
     &:hover {
@@ -184,12 +225,12 @@
     box-sizing: border-box;
     position: relative;
     width: 100%;
-    border-radius: var(--spacing-xs);
+    border-radius: var(--ui3n-text-border-radius);
     background-color: var(--color-bg-control-secondary-default);
-    padding: 0 var(--spacing-s);
+    padding: 0 var(--ui3n-text-padding-inline);
     font-family: Inter, system-ui, sans-serif;
-    font-size: var(--font-13);
-    line-height: var(--font-16);
+    font-size: var(--ui3n-text-font-size);
+    line-height: 1.23;
     font-weight: 400;
     color: var(--color-text-control-primary-default);
     transition: all 0.2s ease-in-out;
@@ -197,8 +238,8 @@
     &::placeholder {
       color: var(--color-text-control-secondary-default);
       font-style: italic;
-      font-size: var(--font-13);
-      line-height: var(--font-16);
+      font-size: var(--ui3n-text-font-size);
+      line-height: 1.23;
       font-weight: 400;
     }
 

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

@@ -21,6 +21,10 @@ export type Ui3nTooltipPlacement =
  * Tooltip component properties
  */
 export interface Ui3nTooltipProps {
+  /**
+   * Root element id
+   */
+  id?: string;
   /**
    * Whether tooltip is open
    */