@v1nt1248/3nclient-lib 0.3.28 → 0.3.29

package/src/components/ui3n-badge/ui3n-badge-simple.vue

@@ -1,45 +1,40 @@
 <script lang="ts" setup>
-import { nextTick, onMounted, ref, watch } from 'vue';
-import type { Ui3nBadgeSimpleProps } from './types';
+  import { nextTick, onMounted, ref, watch } from 'vue';
+  import type { Ui3nBadgeSimpleProps, Ui3nBadgeSimpleEmits } from './types';
 
-const props = withDefaults(
-  defineProps<Ui3nBadgeSimpleProps>(),
-  {
+  const props = withDefaults(defineProps<Ui3nBadgeSimpleProps>(), {
     dot: false,
     value: '',
     color: 'var(--color-bg-button-primary-default)',
     textColor: 'var(--color-text-button-primary-default)',
-  },
-);
+  });
 
-const emits = defineEmits<{
-  (ev: 'change:size', val: { width: number; height: number }): void;
-}>();
+  const emits = defineEmits<Ui3nBadgeSimpleEmits>();
 
-const element = ref<HTMLDivElement | null>(null);
+  const element = ref<HTMLDivElement | null>(null);
 
-function getElementSize() {
-  nextTick(() => {
-    if (element.value) {
-      emits('change:size', { width: element.value.offsetWidth, height: element.value.offsetHeight });
-    }
-  });
-}
-  
+  function getElementSize() {
+    nextTick(() => {
+      if (element.value) {
+        emits('change:size', { width: element.value.offsetWidth, height: element.value.offsetHeight });
+      }
+    });
+  }
 
-watch(
-  () => [props.value, props.dot],
-  () => getElementSize(),
-);
+  watch(
+    () => [props.value, props.dot],
+    () => getElementSize(),
+  );
 
-onMounted(() => {
-  getElementSize();
-});
+  onMounted(() => {
+    getElementSize();
+  });
 </script>
 
 <template>
   <div
     ref="element"
+    :id="id"
     :class="[$style.ui3nBadgeSimple, dot && $style.ui3nBadgeDot]"
   >
     <span
@@ -52,38 +47,42 @@ onMounted(() => {
 </template>
 
 <style lang="scss" module>
-.ui3nBadgeSimple {
-  --ui3n-badge-size: 20px;
+  .ui3nBadgeSimple {
+    --ui3n-badge-size: 20px;
+    --ui3n-badge-dot-size: 8px;
+    --ui3n-badge-padding-inline: 6px;
+    --ui3n-badge-nodot-border-radius: 10px;
+    --ui3n-badge-font-size: 12px;
 
-  position: relative;
-  box-sizing: border-box;
-  background-color: v-bind(color);
-  outline: 1px var(--color-bg-block-primary-default)solid;
+    position: relative;
+    box-sizing: border-box;
+    background-color: v-bind(color);
+    outline: 1px var(--color-bg-block-primary-default) solid;
 
-  &:not(.ui3nBadgeDot) {
-    min-height: var(--ui3n-badge-size);
-    height: var(--ui3n-badge-size);
-    width: max-content;
-    padding: 0 6px;
-    border-radius: 10px;
+    &:not(.ui3nBadgeDot) {
+      min-height: var(--ui3n-badge-size);
+      height: var(--ui3n-badge-size);
+      width: max-content;
+      padding: 0 var(--ui3n-badge-padding-inline);
+      border-radius: var(--ui3n-badge-nodot-border-radius);
+    }
   }
-}
 
-.ui3nBadgeDot {
-  min-width: var(--spacing-s);
-  width: var(--spacing-s);
-  max-width: var(--spacing-s);
-  min-height: var(--spacing-s);
-  height: var(--spacing-s);
-  max-height: var(--spacing-s);
-  border-radius: 50%;
-}
+  .ui3nBadgeDot {
+    min-width: var(--ui3n-badge-dot-size);
+    width: var(--ui3n-badge-dot-size);
+    max-width: var(--ui3n-badge-dot-size);
+    min-height: var(--ui3n-badge-dot-size);
+    height: var(--ui3n-badge-dot-size);
+    max-height: var(--ui3n-badge-dot-size);
+    border-radius: 50%;
+  }
 
-.ui3nBadgeText {
-  display: block;
-  color: v-bind(textColor);
-  font-size: var(--font-12);
-  line-height: var(--ui3n-badge-size);
-  text-align: center;
-}
+  .ui3nBadgeText {
+    display: block;
+    color: v-bind(textColor);
+    font-size: var(--ui3n-badge-font-size);
+    line-height: var(--ui3n-badge-size);
+    text-align: center;
+  }
 </style>

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

@@ -23,6 +23,7 @@
   >();
 
   const hasDefaultSlot = computed(() => !!slots.default);
+
   const style = computed(() => {
     const [xPosition, yPosition] = props.position.split('-');
     return {
@@ -44,6 +45,7 @@
       <slot />
 
       <ui3n-badge-simple
+        :id="id"
         :dot="dot"
         :value="value"
         :color="color"
@@ -57,6 +59,7 @@
 
   <ui3n-badge-simple
     v-else
+    :id="id"
     :dot="dot"
     :value="value"
     :color="color"
@@ -74,6 +77,7 @@
   .ui3nBadgeWrapper {
     position: relative;
     width: max-content;
+    min-width: var(--ui3n-badge-size);
   }
 
   .ui3nBadgeContent {

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

@@ -28,7 +28,7 @@ export interface Ui3nBreadcrumbEmits {
   /**
    * Called when the breadcrumb is clicked
    */
-  (ev: 'click', value: Event): void;
+  (ev: 'click', value: MouseEvent): void;
 }
 
 /**

package/src/components/ui3n-breadcrumbs/ui3n-breadcrumb.vue

@@ -34,7 +34,7 @@
     return val;
   });
 
-  function onClick(ev: Event) {
+  function onClick(ev: MouseEvent) {
     emits('click', ev);
   }
 </script>
@@ -58,7 +58,9 @@
 
 <style lang="scss" module>
   .ui3nBreadcrumb {
-    --ui3n-breadcrumb-font-size: var(--spacing-m);
+    --ui3n-breadcrumb-font-size: 16px;
+    --ui3n-breadcrumb-padding-inline: 4px;
+    --ui3n-breadcrumb-separator-distance: 8px;
     --ui3n-breadcrumb-color-default: var(--color-text-block-primary-default);
     --ui3n-breadcrumb-color-selected: var(--color-text-block-accent-default);
 
@@ -70,14 +72,14 @@
   .separator {
     display: flex;
     align-items: center;
-    margin: 0 var(--spacing-s);
+    margin: 0 var(--ui3n-breadcrumb-separator-distance);
   }
 
   .ui3nBreadcrumbActive {
     font-size: var(--ui3n-breadcrumb-font-size);
     line-height: 1.25;
     color: var(--ui3n-breadcrumb-color-default);
-    padding-right: var(--spacing-xs);
+    padding-right: var(--ui3n-breadcrumb-padding-inline);
 
     &:hover {
       cursor: pointer;
@@ -90,7 +92,7 @@
   }
 
   .ui3nBreadcrumbSeparator {
-    padding-left: var(--spacing-xs);
+    padding-left: var(--ui3n-breadcrumb-padding-inline);
   }
 
   .ui3nBreadcrumbDisabled {

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

@@ -1,6 +1,8 @@
-import type { VNode } from 'vue';
+import type { ButtonHTMLAttributes, VNode } from 'vue';
 
-export interface Ui3nButtonProps {
+export interface Ui3nButtonProps extends /*@vue-ignore */ Omit<ButtonHTMLAttributes, 'type'> {
+  /** Root element  id*/
+  id?: string;
   /** Button type */
   type?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'icon' | 'custom';
   /** Button size */

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

@@ -104,6 +104,7 @@
   <button
     ref="buttonEl"
     v-ui3n-ripple
+    :id="id"
     :class="mainCssClasses"
     type="button"
     :disabled="disabled"
@@ -135,12 +136,16 @@
   .ui3nButton {
     --ui3n-button-height: 32px;
     --ui3n-button-border-radius: calc(var(--ui3n-button-height) / 2);
+    --ui3n-button-gap: 4px;
     --ui3n-button-outline-color: transparent;
-    --ui3n-button-padding: 0 var(--spacing-m);
-    --ui3n-button-padding-when-icon: var(--spacing-s);
-    --ui3n-button-text-size: var(--font-12);
+    --ui3n-button-padding: 0 16px;
+    --ui3n-button-padding-when-icon: 8px;
+    --ui3n-button-text-size: 12px;
     --ui3n-button-text-color: var(--color-text-button-primary-default);
     --ui3n-button-bg-color: var(--color-bg-button-primary-default);
+    --ui3n-button-icon-small: 24px;
+    --ui3n-button-icon-regular: 32px;
+    --ui3n-button-icon-large: 48px;
 
     position: relative;
     width: max-content;
@@ -149,7 +154,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    column-gap: var(--spacing-xs);
+    column-gap: var(--ui3n-button-gap);
     border: none;
     border-radius: var(--ui3n-button-border-radius);
     outline: 2px solid var(--ui3n-button-outline-color);
@@ -182,23 +187,23 @@
 
   .regular {
     --ui3n-button-height: 32px;
-    --ui3n-button-padding: 0 var(--spacing-m);
-    --ui3n-button-padding-when-icon: var(--spacing-s);
-    --ui3n-button-text-size: var(--font-12);
+    --ui3n-button-padding: 0 16px;
+    --ui3n-button-padding-when-icon: 8px;
+    --ui3n-button-text-size: 12px;
   }
 
   .small {
     --ui3n-button-height: 24px;
-    --ui3n-button-padding: 0 var(--spacing-s);
-    --ui3n-button-padding-when-icon: var(--spacing-xs);
-    --ui3n-button-text-size: var(--font-12);
+    --ui3n-button-padding: 0 8px;
+    --ui3n-button-padding-when-icon: 4px;
+    --ui3n-button-text-size: 12px;
   }
 
   .large {
     --ui3n-button-height: 48px;
-    --ui3n-button-padding: 0 var(--spacing-m);
-    --ui3n-button-padding-when-icon: var(--spacing-s);
-    --ui3n-button-text-size: var(--font-15);
+    --ui3n-button-padding: 0 16px;
+    --ui3n-button-padding-when-icon: 8px;
+    --ui3n-button-text-size: 15px;
   }
 
   .block {
@@ -534,18 +539,18 @@
     }
 
     &.regular {
-      min-width: var(--spacing-l);
-      width: var(--spacing-l);
+      min-width: var(--ui3n-button-icon-regular);
+      width: var(--ui3n-button-icon-regular);
     }
 
     &.small {
-      min-width: var(--spacing-ml);
-      width: var(--spacing-ml);
+      min-width: var(--ui3n-button-icon-small);
+      width: var(--ui3n-button-icon-small);
     }
 
     &.large {
-      min-width: var(--spacing-xxl);
-      width: var(--spacing-xxl);
+      min-width: var(--ui3n-button-icon-large);
+      width: var(--ui3n-button-icon-large);
     }
   }
 

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

@@ -9,6 +9,14 @@ export type Ui3nCheckboxValue = boolean | string | number;
  * Checkbox component properties
  */
 export interface Ui3nCheckboxProps {
+  /**
+   * Root element  id
+   */
+  id?: string;
+  /**
+   * HTML name attribute for form submission
+   */
+  name?: string;
   /**
    * Current checkbox value
    */
@@ -64,3 +72,7 @@ export interface Ui3nCheckboxSlots {
    */
   default: () => VNode;
 }
+
+export interface Ui3nCheckboxExpose {
+  clear: () => void;
+}

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

@@ -1,8 +1,18 @@
 <script lang="ts" setup>
   import { computed, onMounted, watch, onBeforeMount, ref, useCssModule, useSlots } from 'vue';
-  import type { Ui3nCheckboxEmits, Ui3nCheckboxProps, Ui3nCheckboxSlots, Ui3nCheckboxValue } from './types';
+  import Ui3nRipple from '../../directives/ui3n-ripple';
+  import type {
+    Ui3nCheckboxEmits,
+    Ui3nCheckboxProps,
+    Ui3nCheckboxSlots,
+    Ui3nCheckboxValue,
+    Ui3nCheckboxExpose,
+  } from './types';
+
+  const vUi3nRipple = Ui3nRipple;
 
   const props = withDefaults(defineProps<Ui3nCheckboxProps>(), {
+    name: undefined,
     modelValue: false,
     checkedValue: true,
     uncheckedValue: false,
@@ -29,6 +39,13 @@
     return val.value === props.checkedValue ? 'checked' : 'unchecked';
   });
 
+  const nativeInputValue = computed(() => {
+    if (typeof val.value === 'boolean') {
+      return val.value ? 'on' : '';
+    }
+    return String(val.value);
+  });
+
   const mainCssClasses = computed(() => {
     const val = [$css.ui3nCheckbox];
 
@@ -46,26 +63,40 @@
     return val;
   });
 
-  onBeforeMount(() => {
-    const checkedValueType = typeof props.checkedValue;
-    const uncheckedValueType = typeof props.uncheckedValue;
-    const valueType = typeof props.modelValue;
-    if (
-      checkedValueType !== uncheckedValueType ||
-      checkedValueType !== valueType ||
-      uncheckedValueType !== valueType
-    ) {
-      throw Error('[Ui3nCheckbox] types of "value", "checkedValue" and "uncheckedValue" are different');
-    }
-  });
+  function change(ev: Event) {
+    ev.preventDefault();
 
-  onMounted(() => {
-    if (checkboxEl.value) {
-      checkboxEl.value.style.setProperty('--ui3n-checkbox-size', `${props.size}px`);
-      checkboxEl.value.style.setProperty('--ui3n-checkbox-color', props.color);
+    val.value = checkBoxValue.value !== 'unchecked' ? props.uncheckedValue : props.checkedValue;
+
+    if (uncertain.value) {
+      uncertain.value = false;
     }
+
+    emits('change', val.value);
+    emits('update:modelValue', val.value);
+  }
+
+  function clear() {
+    val.value = props.uncheckedValue;
+    uncertain.value = false;
+
+    emits('change', val.value);
+    emits('update:modelValue', val.value);
+  }
+
+  defineExpose<Ui3nCheckboxExpose>({
+    clear,
   });
 
+  watch(
+    () => props.name,
+    newName => {
+      if (!newName) {
+        clear();
+      }
+    },
+  );
+
   watch(
     () => props.modelValue,
     newValue => (val.value = newValue),
@@ -96,26 +127,45 @@
     },
   );
 
-  function change(ev: Event) {
-    ev.preventDefault();
-
-    val.value = checkBoxValue.value !== 'unchecked' ? props.uncheckedValue : props.checkedValue;
-
-    if (uncertain.value) {
-      uncertain.value = false;
+  onBeforeMount(() => {
+    const checkedValueType = typeof props.checkedValue;
+    const uncheckedValueType = typeof props.uncheckedValue;
+    const valueType = typeof props.modelValue;
+    if (
+      checkedValueType !== uncheckedValueType ||
+      checkedValueType !== valueType ||
+      uncheckedValueType !== valueType
+    ) {
+      throw Error('[Ui3nCheckbox] types of "value", "checkedValue" and "uncheckedValue" are different');
     }
+  });
 
-    emits('change', val.value);
-    emits('update:modelValue', val.value);
-  }
+  onMounted(() => {
+    if (checkboxEl.value) {
+      checkboxEl.value.style.setProperty('--ui3n-checkbox-size', `${props.size}px`);
+      checkboxEl.value.style.setProperty('--ui3n-checkbox-color', props.color);
+    }
+  });
 </script>
 
 <template>
   <div
     ref="checkboxEl"
+    :id="id"
     :class="mainCssClasses"
   >
+    <input
+      type="checkbox"
+      style="display: none"
+      :name="name"
+      :id="id ? `${id}-native` : undefined"
+      :disabled="disabled"
+      :checked="checkBoxValue !== 'unchecked'"
+      :value="nativeInputValue"
+    />
+
     <div
+      v-ui3n-ripple
       :class="bodyCssClasses"
       :tabindex="disabled ? -1 : 0"
       @keydown.space="change"
@@ -195,6 +245,7 @@
 
   .ui3nCheckbox {
     --ui3n-checkbox-size: 16px;
+    --ui3n-checkbox-gap: 4px;
     --ui3n-checkbox-color: var(--color-icon-control-accent-default);
     --ui3n-checkbox-text-size: 12px;
     --ui3n-checkbox-text-color: var(--color-text-control-primary-default);
@@ -204,8 +255,7 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    min-height: var(--spacing-m);
-    gap: var(--spacing-s);
+    gap: var(--ui3n-checkbox-gap);
   }
 
   .noLabel {

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

@@ -4,6 +4,10 @@ import { VNode } from 'vue';
  * Chip component properties
  */
 export interface Ui3nChipProps {
+  /**
+   * Root element id
+   */
+  id?: string;
   /**
    * Chip height
    */
@@ -53,7 +57,8 @@ export interface Ui3nChipEmits {
   /**
    * Called when chip is closed
    */
-  (ev: 'close'): void;
+  (event: 'close'): void;
+  (event: 'click', value: MouseEvent): void;
 }
 
 /**