@v1nt1248/3nclient-lib 0.3.28 → 0.3.29

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

@@ -1,67 +1,62 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import type { Ui3nIconEmits, Ui3nIconProps } from './types';
+  import { computed } from 'vue';
+  import type { Ui3nIconEmits, Ui3nIconProps } from './types';
 
-const props = withDefaults(
-  defineProps<Ui3nIconProps>(),
-  {
+  const props = withDefaults(defineProps<Ui3nIconProps>(), {
     title: '',
     rotate: 0,
     color: 'var(--color-icon-control-primary-default)',
-  },
-);
-const emits = defineEmits<Ui3nIconEmits>();
-
-const widthVal = computed(() => props.size || props.width || 16);
-const heightVal = computed(() => props.size || props.height || 16);
-const widthCss = computed(() => `${widthVal.value}px`);
-const heightCss = computed(() => `${heightVal.value}px`);
-
-const iconStyle = computed(() => {
-  const value: Record<string, string> = {};
-  const transformData = [];
-  props.horizontalFlip && transformData.push('rotateY(180deg)');
-  props.verticalFlip && transformData.push('rotateX(180deg)');
-  props.rotate && transformData.push(`rotate(${props.rotate}deg)`);
-  if (transformData.length) {
-    value.transform = transformData.join(' ');
-  }
-
-  return value;
-});
-
-function onClick(ev: Event) {
-  emits('click', ev);
-}
+  });
+  const emits = defineEmits<Ui3nIconEmits>();
+
+  const widthVal = computed(() => props.size || props.width || 16);
+  const heightVal = computed(() => props.size || props.height || 16);
+
+  const iconStyle = computed(() => {
+    const value: Record<string, string> = {
+      '--ui3n-icon-width': `${widthVal.value}px`,
+      '--ui3n-icon-height': `${heightVal.value}px`,
+      '--ui3n-icon-color': props.color,
+    };
+    const transformData = [];
+    props.horizontalFlip && transformData.push('rotateY(180deg)');
+    props.verticalFlip && transformData.push('rotateX(180deg)');
+    props.rotate && transformData.push(`rotate(${props.rotate}deg)`);
+    if (transformData.length) {
+      value.transform = transformData.join(' ');
+    }
+
+    return value;
+  });
 </script>
 
 <template>
   <div
+    :id="id"
     :class="$style.ui3nIcon"
-    :data-icon="icon"
     :title="title"
     :style="iconStyle"
-    @click="onClick"
+    v-bind="{ 'data-icon': icon }"
+    @click="emits('click', $event)"
   />
 </template>
 
 <style lang="scss" module>
-.ui3nIcon {
-  --ui3n-icon-color: v-bind(color);
-
-  display: block;
-  min-width: v-bind(widthCss);
-  width: v-bind(widthCss);
-  max-width: v-bind(widthCss);
-  min-height: v-bind(heightCss);
-  height: v-bind(heightCss);
-  max-height: v-bind(heightCss);
-  flex-grow: 0;
-  flex-shrink: 0;
-  background-color: currentcolor;
-  color: var(--ui3n-icon-color);
-  mask-image: var(--svg);
-  mask-repeat: no-repeat;
-  mask-size: 100% 100%;
-}
+  .ui3nIcon {
+    display: block;
+    min-width: var(--ui3n-icon-width);
+    width: var(--ui3n-icon-width);
+
+    min-height: var(--ui3n-icon-height);
+    height: var(--ui3n-icon-height);
+    max-height: var(--ui3n-icon-height);
+
+    flex-grow: 0;
+    flex-shrink: 0;
+    background-color: currentcolor;
+    color: var(--ui3n-icon-color);
+    mask-image: var(--svg);
+    mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+  }
 </style>

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

@@ -1,6 +1,10 @@
 import type { Ref, VNode } from 'vue';
 
 export interface Ui3nInputProps {
+  /**
+   * Root element id
+   */
+  id?: string;
   /**
    * Input value
    */

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

@@ -6,6 +6,9 @@
 
   const props = withDefaults(defineProps<Ui3nInputProps>(), {
     modelValue: '',
+    name: undefined,
+    maxlength: undefined,
+    minlength: undefined,
     type: 'text',
     size: 'regular',
     label: '',
@@ -177,10 +180,20 @@
       }
     },
   );
+
+  watch(
+    () => props.name,
+    newName => {
+      if (!newName) {
+        clearValue();
+      }
+    },
+  );
 </script>
 
 <template>
   <div
+    :id="id"
     :class="[
       $style.ui3nInput,
       size === 'large' && $style.large,
@@ -359,7 +372,7 @@
     padding: 0 var(--ui3n-input-padding-x);
     background-color: transparent;
     font-size: var(--ui3n-input-font-size);
-    line-height: var(--spacing-m);
+    line-height: 1.23;
     font-weight: 400;
     color: var(--color-text-control-primary-default);
     transition: color 0.2s ease-in-out;

package/src/components/ui3n-input-file/types.ts

@@ -1,6 +1,14 @@
 import { VNode } from 'vue';
 
 export interface Ui3nInputFileProps {
+  /**
+   * Root element id
+   */
+  id?: string;
+  /**
+   * Input name attribute (for use in native forms)
+   */
+  name?: string;
   /**
    * Selected files
    */
@@ -50,3 +58,7 @@ export interface Ui3nInputFileSlots {
    */
   default: () => VNode;
 }
+
+export interface Ui3nInputFileExpose {
+  clear: () => void;
+}

package/src/components/ui3n-input-file/ui3n-input-file.vue

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
   import size from 'lodash/size';
   import last from 'lodash/last';
   import trim from 'lodash/trim';
   import { getRandomId, formatFileSize } from '@/utils';
-  import type { Ui3nInputFileProps, Ui3nInputFileEmits, Ui3nInputFileSlots } from './types';
   import type { Nullable } from '@/types';
+  import type { Ui3nInputFileProps, Ui3nInputFileEmits, Ui3nInputFileSlots, Ui3nInputFileExpose } from './types';
 
   const props = withDefaults(defineProps<Ui3nInputFileProps>(), {
+    name: undefined,
     modelValue: () => [],
     buttonText: 'Select file',
     allowedFileTypes: '*',
@@ -15,7 +16,7 @@
   const emits = defineEmits<Ui3nInputFileEmits>();
   defineSlots<Ui3nInputFileSlots>();
 
-  const id = getRandomId(4);
+  const id = props.id || getRandomId(4);
   const fileInput = ref<Nullable<HTMLInputElement>>(null);
 
   function selectFiles(ev: MouseEvent) {
@@ -80,15 +81,8 @@
       return true;
     }
 
-    const total = files.reduce((acc, file) => {
-      const { size } = file;
-      if (size) {
-        acc += size;
-      }
-      return acc;
-    }, 0);
-
-    const isValid = total <= Number(props.maxNumberOfFiles);
+    const totalCount = size(props.modelValue) + size(files);
+    const isValid = totalCount <= Number(props.maxNumberOfFiles);
     if (!isValid) {
       emits('error', `You cannot select more than ${props.maxNumberOfFiles} files.`);
     }
@@ -116,6 +110,26 @@
     fileInput.value && fileInput.value.files && processFiles([...fileInput.value.files]);
     fileInput.value && (fileInput.value!.value = '');
   }
+
+  function clear() {
+    if (fileInput.value) {
+      fileInput.value.value = '';
+    }
+    emits('update:modelValue', []);
+  }
+
+  defineExpose<Ui3nInputFileExpose>({
+    clear,
+  });
+
+  watch(
+    () => props.name,
+    newName => {
+      if (!newName) {
+        clear();
+      }
+    },
+  );
 </script>
 
 <template>
@@ -132,7 +146,7 @@
       :id="id"
       ref="fileInput"
       type="file"
-      name="file"
+      :name="name || 'file'"
       hidden
       :multiple="multiple"
       :accept="allowedFileTypes"
@@ -144,16 +158,19 @@
 
 <style lang="scss" module>
   .ui3nInputFile {
+    --ui3n-input-file-font-size: 12px;
+    --ui3n-input-file-padding-inline: 4px;
+
     position: relative;
     width: max-content;
   }
 
   .label {
-    font-size: var(--font-12);
+    font-size: var(--ui3n-input-file-font-size);
     font-weight: 500;
-    line-height: var(--font-16);
+    line-height: 1.33;
     color: var(--color-text-button-secondary-default);
-    padding: 0 var(--space-xs);
+    padding: 0 var(--ui3n-input-file-padding-inline);
     cursor: pointer;
 
     &:hover {

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

@@ -4,6 +4,10 @@ import type { VNode } from 'vue';
  * List component properties
  */
 export interface Ui3nListProps<T> {
+  /**
+   * Root element id
+   */
+  id?: string;
   /**
    * List title
    */

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

@@ -15,6 +15,7 @@
 <template>
   <div
     ref="listElement"
+    :id="id"
     :class="$style.ui3nList"
   >
     <div :class="[$style.ui3nListTitle, sticky && $style.ui3nListTitleSticky]">
@@ -55,6 +56,7 @@
   .ui3nList {
     --ui3n-list-item-height: 28px;
     --ui3n-list-bg-color: transparent;
+    --ui3n-list-padding-block: 4px;
 
     position: relative;
     width: 100%;
@@ -81,7 +83,7 @@
     position: relative;
     width: 100%;
     min-height: var(--ui3n-list-item-height);
-    padding: 4px 0;
+    padding: var(--ui3n-list-padding-block) 0;
     display: flex;
     justify-content: flex-start;
     align-items: center;

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

@@ -4,6 +4,10 @@ import type { Ref, VNode } from 'vue';
  * Menu component properties
  */
 export interface Ui3nMenuProps {
+  /**
+   * Root element id
+   */
+  id?: string;
   /**
    * Menu open state
    */

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

@@ -2,8 +2,8 @@
   import { computed, ref, watch, useTemplateRef } from 'vue';
   import { autoUpdate, flip, useFloating, offset, shift } from '@floating-ui/vue';
   import { default as vClickOutside } from '../../directives/ui3n-click-outside';
-  import type { Ui3nMenuEmits, Ui3nMenuProps, Ui3nMenuSlots, Ui3nMenuExpose } from './types';
   import { Nullable } from '@/types';
+  import type { Ui3nMenuEmits, Ui3nMenuProps, Ui3nMenuSlots, Ui3nMenuExpose } from './types';
 
   const props = withDefaults(defineProps<Ui3nMenuProps>(), {
     positionStrategy: 'absolute',
@@ -27,33 +27,26 @@
 
   const usedTriggerElement = computed(() => outerTriggerElement.value || menuTriggerElement.value);
 
-  const contentBorderRadiusCss = computed(() => {
-    if (typeof props.contentBorderRadius === 'number') {
-      return `${props.contentBorderRadius}px`;
+  const middleware = computed(() => {
+    const list = [
+      offset({
+        mainAxis: props.offsetY,
+        crossAxis: props.offsetX + 2,
+      }),
+    ];
+
+    if (props.allowFlip) {
+      list.push(
+        flip({
+          fallbackAxisSideDirection: 'end',
+          fallbackPlacements: ['top-end', 'bottom-end'],
+        }),
+      );
     }
 
-    const [tl, tr, br, bl] = props.contentBorderRadius;
-    return `${tl}px ${tr}px ${br}px ${bl}px`;
+    list.push(shift());
+    return list;
   });
-  const zIndexCss = computed(() => props.zIndex);
-
-  const middleware = [
-    offset({
-      mainAxis: props.offsetY,
-      crossAxis: props.offsetX + 2,
-    }),
-  ];
-
-  if (props.allowFlip) {
-    middleware.push(
-      flip({
-        fallbackAxisSideDirection: 'end',
-        fallbackPlacements: ['top-end', 'bottom-end'],
-      }),
-    );
-  }
-
-  middleware.push(shift());
 
   const { floatingStyles, isPositioned, update } = useFloating(usedTriggerElement, menuContentElement, {
     placement: 'bottom-start',
@@ -62,6 +55,23 @@
     whileElementsMounted: props.positionAutoupdate || props.positionStrategy === 'fixed' ? autoUpdate : undefined,
   });
 
+  const contentStylesComputed = computed(() => {
+    let borderRadiusStr = '';
+    if (typeof props.contentBorderRadius === 'number') {
+      borderRadiusStr = `${props.contentBorderRadius}px`;
+    } else if (Array.isArray(props.contentBorderRadius)) {
+      const [tl, tr, br, bl] = props.contentBorderRadius;
+      borderRadiusStr = `${tl}px ${tr}px ${br}px ${bl}px`;
+    }
+
+    return {
+      ...floatingStyles.value,
+      '--ui3n-menu-zIndex': String(props.zIndex),
+      ...(borderRadiusStr && { '--ui3n-menu-border-radius': borderRadiusStr }),
+      ...(props.contentStyles || {}),
+    };
+  });
+
   function toggleMenu() {
     if (props.disabled) {
       return;
@@ -78,7 +88,11 @@
     emits('update:modelValue', isShow.value);
   }
 
-  function onClickOutside() {
+  function onClickOutside(event: MouseEvent) {
+    if (usedTriggerElement.value?.contains(event.target as Node)) {
+      return;
+    }
+
     emits('click-outside');
     if (props.closeOnClickOutside) {
       isShow.value = false;
@@ -126,6 +140,7 @@
 <template>
   <div
     ref="menu-element"
+    :id="id"
     :class="$style.ui3nMenu"
   >
     <div
@@ -140,10 +155,7 @@
       v-if="isShow"
       ref="menu-content-element"
       v-click-outside="onClickOutside"
-      :style="{
-        ...floatingStyles,
-        ...(contentStyles && { ...contentStyles }),
-      }"
+      :style="contentStylesComputed"
       :class="$style.ui3nMenuContent"
       v-on="closeOnClick ? { click: onContentClick } : {}"
     >
@@ -157,7 +169,6 @@
 
   .ui3nMenu {
     --ui3n-menu-content-bg: var(--color-bg-control-secondary-default);
-    --ui3n-menu-content-border-raduis: v-bind(contentBorderRadiusCss);
 
     position: relative;
     max-width: max-content;
@@ -178,7 +189,7 @@
     position: absolute;
     border-radius: var(--ui3n-menu-content-border-raduis);
     background-color: var(--ui3n-menu-content-bg);
-    z-index: v-bind(zIndexCss);
+    z-index: var(--ui3n-menu-zIndex, 1000);
     overflow: hidden;
     @include mixins.dropShadow();
   }