@v1nt1248/3nclient-lib 0.3.28 → 0.3.29

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

@@ -1,69 +1,77 @@
 <script lang="ts" setup>
-  import { computed, useCssModule, useSlots } from 'vue';
+  import { computed, useSlots } from 'vue';
   import Ui3nButton from '../ui3n-button/ui3n-button.vue';
   import type { Ui3nChipEmits, Ui3nChipProps, Ui3nChipSlots } from './types';
 
-  const props = withDefaults(
-    defineProps<Ui3nChipProps>(),
-    {
-      height: 24,
-      maxWidth: 200,
-      plain: false,
-      round: true,
-      closeable: false,
-      color: 'var(--color-bg-control-secondary-default)',
-      textSize: 10,
-      textColor: 'var(--color-text-control-primary-default)',
-    },
-  );
+  const props = withDefaults(defineProps<Ui3nChipProps>(), {
+    height: 24,
+    maxWidth: 200,
+    plain: false,
+    round: true,
+    closeable: false,
+    color: 'var(--color-bg-control-secondary-default)',
+    textSize: 10,
+    textColor: 'var(--color-text-control-primary-default)',
+  });
 
   const emits = defineEmits<Ui3nChipEmits>();
   defineSlots<Ui3nChipSlots>();
 
   const slots = useSlots();
-  const $css = useCssModule();
-
-  const height = computed(() => `${props.height}px`);
-  const iconHeight = computed(() => Number(props.height) - 4);
 
-  const maxWidth = computed(() => `${props.maxWidth}px`);
-  const bgColor = computed(() => props.color);
-  const textSize = computed(() => `${props.textSize}px`);
-  const textColor = computed(() => props.textColor);
-  const hasLeftSlot = computed(() => !!slots.left);
-
-  const padding = computed(() => {
-    const padValue = Math.round(Number(props.height) / 3);
-
-    if (hasLeftSlot.value) {
-      return `0 ${padValue}px 0 4px`;
-    }
+  const chipHeight = computed(() => {
+    const num = Number(props.height);
+    return isNaN(num) ? 24 : num;
+  });
+  const heightCss = computed(() => `${chipHeight.value}px`);
+  const iconSize = computed(() => chipHeight.value - 4);
 
-    return `0 ${padValue}px`;
+  const paddingCss = computed(() => {
+    const padValue = Math.round(chipHeight.value / 3);
+    return hasLeftSlot.value ? `0 ${padValue}px 0 4px` : `0 ${padValue}px`;
   });
 
-  const mainCssClasses = computed(() => {
-    const val = [$css.ui3nChip];
+  const maxWidthCss = computed(() => {
+    const num = Number(props.maxWidth);
+    return isNaN(num) ? String(props.maxWidth) : `${num}px`;
+  });
 
-    props.round && val.push($css.round);
-    props.plain && val.push($css.plain);
-    props.closeable && val.push($css.closeable);
-    hasLeftSlot.value && val.push($css.withIcon);
+  const bgColor = computed(() => props.color);
 
-    return val;
+  const textSize = computed(() => {
+    const num = Number(props.textSize);
+    return isNaN(num) ? String(props.textSize) : `${num}px`;
   });
 
-  function onClick() {
-    emits('close');
-  }
+  const textColor = computed(() => props.textColor);
+
+  const hasLeftSlot = computed(() => !!slots.left);
 </script>
 
 <template>
-  <div :class="mainCssClasses">
+  <div
+    :id="id"
+    :class="[
+      $style.ui3nChip,
+      round && $style.round,
+      plain && $style.plain,
+      closeable && $style.closeable,
+      hasLeftSlot && $style.withIcon,
+    ]"
+    :style="{
+      '--ui3n-chip-height': heightCss,
+      '--ui3n-chip-max-width': maxWidthCss,
+      '--ui3n-chip-padding': paddingCss,
+      '--ui3n-chip-bg-color': bgColor,
+      '--ui3n-chip-font-size': textSize,
+      '--ui3n-chip-font-color': textColor,
+    }"
+    @click="emits('click', $event)"
+  >
     <div :class="$style.ui3nChipIcon">
       <slot
         name="left"
-        :size="iconHeight"
+        :size="iconSize"
         :color="textColor"
       />
     </div>
@@ -74,14 +82,13 @@
 
     <ui3n-button
       v-if="closeable"
-      :class="$style.closeBtn"
       type="icon"
       size="small"
       color="transparent"
       icon="round-close"
       icon-color="var(--color-icon-control-primary-default)"
       :disabled="disabled"
-      @click.stop.prevent="onClick"
+      @click.stop.prevent="emits('close')"
     />
   </div>
 </template>
@@ -90,13 +97,14 @@
   .ui3nChip {
     position: relative;
     display: flex;
-    height: v-bind('height');
-    padding: v-bind('padding');
+    height: var(--ui3n-chip-height);
+    padding: var(--ui3n-chip-padding);
     width: max-content;
-    max-width: v-bind('maxWidth');
-    background-color: v-bind('bgColor');
+    max-width: var(--ui3n-chip-max-width);
+    background-color: var(--ui3n-chip-bg-color);
     justify-content: flex-start;
     align-items: center;
+    column-gap: 4px;
 
     &.closeable:not(.withIcon) {
       .body {
@@ -106,31 +114,27 @@
 
     &.withIcon:not(.closeable) {
       .body {
-        max-width: calc(100% - v-bind(height) - 4px);
+        max-width: calc(100% - var(--ui3n-chip-height) - 4px);
       }
     }
 
     &.closable.withIcon {
       .body {
-        max-width: calc(100% - v-bind(height) - 28px);
+        max-width: calc(100% - var(--ui3n-chip-height) - 28px);
       }
     }
   }
 
   .ui3nChipBody {
-    font-size: v-bind('textSize');
+    font-size: var(--ui3n-chip-font-size);
     line-height: 1;
     font-weight: 400;
-    color: v-bind('textColor');
+    color: var(--ui3n-chip-font-color);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
-  .closeBtn {
-    margin-left: var(--spacing-xs);
-  }
-
   .withIcon {
     .ui3nChipIcon {
       display: flex;
@@ -138,20 +142,19 @@
       flex-shrink: 0;
       border-radius: 50%;
       overflow: hidden;
-      margin-right: var(--spacing-xs);
     }
   }
 
   .round {
-    border-radius: calc(v-bind('height') / 2);
+    border-radius: calc(var(--ui3n-chip-height) / 2);
   }
 
   .closeable {
-    min-width: var(--spacing-ml);
+    min-width: 24px;
     padding-right: 0;
   }
 
   .plain {
-    border: 1px solid v-bind('textColor');
+    border: 1px solid var(--ui3n-chip-font-color);
   }
 </style>

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

@@ -248,7 +248,7 @@
     display: flex;
     flex-direction: column;
     height: auto;
-    min-height: var(--spacing-xxl);
+    min-height: 48px;
     max-height: 95%;
     background-color: var(--color-bg-block-primary-default);
     border: 1px solid var(--color-border-block-primary-default);
@@ -281,7 +281,7 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    column-gap: var(--spacing-s);
+    column-gap: 8px;
     padding: var(--ui3n-dialog-title-padding);
     border-bottom: 1px solid var(--color-border-block-primary-default);
 
@@ -318,7 +318,7 @@
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    gap: var(--spacing-s);
+    gap: 8px;
   }
 
   .loading {

package/src/components/ui3n-drop-files/types.ts

@@ -4,6 +4,10 @@ import { VNode } from 'vue';
  * Drop files component properties
  */
 export interface Ui3nDropFilesProps {
+  /**
+   * HTML name attribute for form submission
+   */
+  name?: string;
   /**
    * Drop files title
    */
@@ -46,3 +50,7 @@ export interface Ui3nDropFilesSlots {
    */
   'additional-text': () => VNode;
 }
+
+export interface Ui3nDropFilesExpose {
+  clear: () => void;
+}

package/src/components/ui3n-drop-files/ui3n-drop-files.vue

@@ -1,47 +1,47 @@
 <script lang="ts" setup>
-  import { onMounted, ref } from 'vue';
-  import { Ui3nResize } from '@/directives';
-  import type { Ui3nDropFilesEmits, Ui3nDropFilesProps, Ui3nDropFilesSlots } from './types';
+  import { onMounted, ref, watch } from 'vue';
+  import Ui3nResize from '../../directives/ui3n-resize';
+  import type { Ui3nDropFilesEmits, Ui3nDropFilesProps, Ui3nDropFilesSlots, Ui3nDropFilesExpose } from './types';
 
   const vUi3nResize = Ui3nResize;
 
-  withDefaults(
-    defineProps<Ui3nDropFilesProps>(),
-    {
-      title: 'Upload',
-      text: '',
-      additionalText: '',
-    },
-  );
+  const props = withDefaults(defineProps<Ui3nDropFilesProps>(), {
+    name: undefined,
+    title: 'Upload',
+    text: '',
+    additionalText: '',
+    permanentDisplay: false,
+  });
   const emits = defineEmits<Ui3nDropFilesEmits>();
   defineSlots<Ui3nDropFilesSlots>();
 
   const wrapperElement = ref<HTMLDivElement | null>(null);
+  const fileInput = ref<HTMLInputElement | null>(null);
   const wrapperElementMinSize = ref(0);
   const isOverDropPlace = ref(false);
   const isOverDropZone = ref(false);
 
-  function onDragenter(ev: MouseEvent) {
+  function onDragenter(ev: DragEvent) {
     ev.preventDefault();
     isOverDropPlace.value = true;
   }
 
-  function onDragleave(ev: MouseEvent) {
+  function onDragleave(ev: DragEvent) {
     ev.preventDefault();
     isOverDropPlace.value = false;
   }
 
-  function onDropzoneDragover(ev: MouseEvent) {
+  function onDropzoneDragover(ev: DragEvent) {
     ev.preventDefault();
     ev.stopPropagation();
   }
 
-  function onDropzoneDragenter(ev: MouseEvent) {
+  function onDropzoneDragenter(ev: DragEvent) {
     ev.preventDefault();
     isOverDropZone.value = true;
   }
 
-  function onDropzoneDragleave(ev: MouseEvent) {
+  function onDropzoneDragleave(ev: DragEvent) {
     ev.preventDefault();
     isOverDropZone.value = false;
   }
@@ -49,9 +49,17 @@
   function onDrop(ev: DragEvent) {
     ev.stopPropagation();
     ev.preventDefault();
-    if (ev.dataTransfer!.files) {
-      emits('select', ev.dataTransfer!.files);
+
+    if (ev.dataTransfer?.files) {
+      const files = ev.dataTransfer.files;
+
+      if (fileInput.value) {
+        fileInput.value.files = files;
+      }
+
+      emits('select', files);
     }
+
     isOverDropPlace.value = false;
     isOverDropZone.value = false;
   }
@@ -59,17 +67,42 @@
   function calcElementsSizes() {
     if (wrapperElement.value) {
       wrapperElementMinSize.value = Math.min(wrapperElement.value.clientHeight, wrapperElement.value.clientWidth);
-      wrapperElement.value.style.setProperty('--dropzone-height', `${wrapperElementMinSize.value}px`);
+      wrapperElement.value.style.setProperty('--ui3n-dropzone-height', `${wrapperElementMinSize.value}px`);
+
       let titleFontSize = 12;
       if (wrapperElementMinSize.value > 100 && wrapperElementMinSize.value <= 240) {
         titleFontSize = 16;
       } else if (wrapperElementMinSize.value > 240) {
         titleFontSize = 20;
       }
-      wrapperElement.value.style.setProperty('--dropzone-title-font', `${titleFontSize}px`);
+      wrapperElement.value.style.setProperty('--ui3n-dropzone-title-font', `${titleFontSize}px`);
+    }
+  }
+
+  function clear() {
+    if (fileInput.value) {
+      fileInput.value.value = '';
     }
+    isOverDropPlace.value = false;
+    isOverDropZone.value = false;
+
+    const dataTransfer = new DataTransfer();
+    emits('select', dataTransfer.files);
   }
 
+  defineExpose<Ui3nDropFilesExpose>({
+    clear,
+  });
+
+  watch(
+    () => props.name,
+    newName => {
+      if (!newName && fileInput.value) {
+        fileInput.value.value = '';
+      }
+    },
+  );
+
   onMounted(() => {
     calcElementsSizes();
   });
@@ -83,11 +116,21 @@
     :class="[
       $style.ui3nDropFiles,
       permanentDisplay && $style.ui3nDropFilesWithBorder,
-      (isOverDropPlace || isOverDropZone) && $style.ui3nDropFilesWithAccentBorder
+      (isOverDropPlace || isOverDropZone) && $style.ui3nDropFilesWithAccentBorder,
     ]"
     @dragenter="onDragenter"
+    @dragover.prevent
     @dragleave="onDragleave"
   >
+    <input
+      v-if="name"
+      ref="fileInput"
+      type="file"
+      :name="name"
+      multiple
+      hidden
+    />
+
     <slot />
 
     <div
@@ -130,14 +173,15 @@
 
 <style lang="scss" module>
   .ui3nDropFiles {
-    --dropzone-height: 0;
-    --dropzone-title-font: 0;
+    --ui3n-dropzone-height: 0;
+    --ui3n-dropzone-title-font: 0;
+    --ui3n-dropzone-border-radius: 4px;
 
     position: relative;
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-    border-radius: var(--spacing-s);
+    border-radius: var(--ui3n-dropzone-border-radius);
   }
 
   .ui3nDropFilesWithBorder {
@@ -156,13 +200,13 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    row-gap: var(--spacing-m);
-    inset: var(--spacing-xs);
+    row-gap: 16px;
+    inset: 4px;
     z-index: 5;
   }
 
   .ui3nDropFilesDropzoneTitle {
-    font-size: var(--dropzone-title-font);
+    font-size: var(--ui3n-dropzone-title-font);
     font-weight: 500;
     color: var(--color-text-table-secondary-default);
     margin: 0;
@@ -171,8 +215,8 @@
 
   .ui3nDropFilesDropzoneIcon {
     position: relative;
-    width: calc(var(--dropzone-height) * 0.4);
-    height: calc(var(--dropzone-height) * 0.4);
+    width: calc(var(--ui3n-dropzone-height) * 0.4);
+    height: calc(var(--ui3n-dropzone-height) * 0.4);
     border-radius: 50%;
     background-color: var(--color-bg-button-tritery-default);
     display: flex;

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

@@ -80,6 +80,14 @@ export interface Ui3nContentEditableEmits {
  * Properties of the Ui3nEditable component
  */
 export interface Ui3nEditableProps {
+  /**
+   * Root element id
+   */
+  id?: string;
+  /**
+   * HTML name attribute for form submission
+   */
+  name?: string;
   /**
    * Current value of the editable content
    */
@@ -143,3 +151,7 @@ export interface Ui3nEditableEmits {
    */
   (event: 'focusout'): void;
 }
+
+export interface Ui3nEditableExpose {
+  clear: () => void;
+}

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

@@ -3,8 +3,8 @@
   import Ui3nIcon from '@/components/ui3n-icon/ui3n-icon.vue';
   import Ui3nRipple from '@/directives/ui3n-ripple';
   import Ui3nClickOutside from '@/directives/ui3n-click-outside';
-  import type { Ui3nEditableProps, Ui3nEditableEmits } from './types';
   import type { Nullable } from '@/types';
+  import type { Ui3nEditableProps, Ui3nEditableEmits, Ui3nEditableExpose } from './types';
 
   const vUi3nRipple = Ui3nRipple;
   const vUi3nClickOutside = Ui3nClickOutside;
@@ -124,6 +124,16 @@
     }
   }
 
+  function clear() {
+    value.value = '';
+    initialValue.value = '';
+    emits('update:modelValue', '');
+  }
+
+  defineExpose<Ui3nEditableExpose>({
+    clear,
+  });
+
   watch(
     () => props.modelValue,
     (val, oVal) => {
@@ -140,14 +150,31 @@
       !props.disabled && emits('toggle:editMode', val);
     },
   );
+
+  watch(
+    () => props.name,
+    newName => {
+      if (!newName) {
+        clear();
+      }
+    },
+  );
 </script>
 
 <template>
   <div
+    :id="id"
     v-ui3n-click-outside="onClickOutside"
     :class="[$style.ui3nEditable, disabled && $style.ui3nEditableDisabled]"
-    @focusin="emits('focusin', $event);"
+    @focusin="emits('focusin', $event)"
   >
+    <input
+      v-if="name"
+      type="hidden"
+      :name="name"
+      :value="value"
+    />
+
     <template v-if="inEdit">
       <span
         ref="hiddenEl"
@@ -165,7 +192,7 @@
         @keydown.enter="done"
         @keydown.tab="done"
         @keydown.esc="cancel"
-      >
+      />
 
       <div
         v-ui3n-ripple
@@ -224,16 +251,21 @@
     --ui3n-editable-min-width: v-bind(cssMinWidth);
     --ui3n-editable-max-width: v-bind(cssMaxWidth);
     --ui3n-editable-height: 24px;
+    --ui3n-editable-font-size: 12px;
+    --ui3n-editable-border-radius: 4px;
+    --ui3n-editable-padding-base: 4px;
+    --ui3n-editable-padding: 4px 44px 4px 4px;
+    --ui3n-editable-button-size: 16px;
 
     position: relative;
     box-sizing: border-box;
     width: max-content;
     max-width: var(--ui3n-editable-max-width);
     height: var(--ui3n-editable-height);
-    border-radius: var(--spacing-xs);
-    font-size: var(--font-12);
+    border-radius: var(--ui3n-editable-border-radius);
+    font-size: var(--ui3n-editable-font-size);
     font-weight: 400;
-    line-height: var(--font-16);
+    line-height: 1.33;
     color: var(--color-text-table-primary-default);
     overflow: hidden;
   }
@@ -248,8 +280,8 @@
     height: var(--ui3n-editable-height);
     min-width: var(--ui3n-editable-min-width);
     max-width: var(--ui3n-editable-max-width);
-    padding: var(--spacing-xs) 44px var(--spacing-xs) var(--spacing-xs);
-    border-radius: var(--spacing-xs);
+    padding: var(--ui3n-editable-padding);
+    border-radius: var(--ui3n-editable-border-radius);
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -278,19 +310,19 @@
     position: relative;
     min-width: var(--ui3n-editable-min-width);
     max-width: calc(100% - 52px);
-    padding: var(--spacing-xs) 44px var(--spacing-xs) var(--spacing-xs);
-    font-size: var(--font-12);
+    padding: var(--ui3n-editable-padding);
+    font-size: var(--ui3n-editable-font-size);
     font-weight: 400;
-    line-height: var(--font-16);
-    border-radius: var(--spacing-xs);
+    line-height: 1.33;
+    border-radius: var(--ui3n-editable-border-radius);
 
     &::placeholder {
       color: var(--color-text-table-secondary-default);
     }
 
     &.inEdit {
-      padding-top: calc(var(--spacing-xs) - 1px);
-      padding-bottom: calc(var(--spacing-xs) - 1px);
+      padding-top: calc(var(--ui3n-editable-padding-base) - 1px);
+      padding-bottom: calc(var(--ui3n-editable-padding-base) - 1px);
 
       &:not(.inEditWarning) {
         border: 1px solid var(--color-border-table-accent-default);
@@ -314,10 +346,10 @@
 
   .btn {
     position: absolute;
-    width: var(--spacing-m);
-    min-width: var(--spacing-m);
-    height: var(--spacing-m);
-    min-height: var(--spacing-m);
+    width: var(--ui3n-editable-button-size);
+    min-width: var(--ui3n-editable-button-size);
+    height: var(--ui3n-editable-button-size);
+    min-height: var(--ui3n-editable-button-size);
     border-radius: 50%;
     background-color: transparent;
     cursor: pointer;
@@ -334,20 +366,20 @@
     }
 
     &.editBtn {
-      top: var(--spacing-xs);
-      right: var(--spacing-xs);
+      top: 4px;
+      right: 4px;
       opacity: 0;
     }
 
     &.cancelBtn {
-      top: var(--spacing-xs);
-      right: var(--spacing-xs);
+      top: 4px;
+      right: 4px;
       opacity: 1;
     }
 
     &.doneBtn {
-      top: var(--spacing-xs);
-      right: var(--spacing-ml);
+      top: 4px;
+      right: 24px;
       opacity: 1;
     }
   }

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

@@ -1,4 +1,8 @@
 export interface Ui3nIconProps {
+  /**
+   * Root element id
+   */
+  id?: string;
   /** Icon name */
   icon: string;
   /** Icon title */
@@ -21,5 +25,5 @@ export interface Ui3nIconProps {
 
 export interface Ui3nIconEmits {
   /** Called when the icon is clicked */
-  (ev: 'click', value: Event): void;
+  (ev: 'click', value: MouseEvent): void;
 }