@v1nt1248/3nclient-lib 0.3.28 → 0.3.30

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
    */
@@ -27,6 +31,11 @@ export interface Ui3nMenuProps {
    * @default true
    */
   allowFlip?: boolean;
+  /**
+   * Whether to lock scroll when menu is open
+   * @default false
+   */
+  lockScroll?: boolean;
   /**
    * Offset X
    * @default 0

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

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-  import { computed, ref, watch, useTemplateRef } from 'vue';
+  import { computed, nextTick, onUnmounted, 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>(), {
+    lockScroll: false,
     positionStrategy: 'absolute',
     offsetX: 0,
     offsetY: 0,
@@ -23,37 +24,32 @@
   const menuContentElement = useTemplateRef<HTMLDivElement>('menu-content-element');
   const isShow = ref(false);
 
+  let targetScrollElement: HTMLElement | null = null;
+
   const outerTriggerElement = ref<Nullable<HTMLElement>>(props.triggerElement || null);
 
   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 +58,126 @@
     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 preventScrollEvent(e: Event) {
+    e.preventDefault();
+  }
+
+  function getVerticalScrollParent(element: HTMLElement | null): HTMLElement {
+    if (!element) {
+      return document.body;
+    }
+
+    let parent: HTMLElement | null = element.parentElement;
+
+    while (parent && parent !== document.body && parent !== document.documentElement) {
+      const style = window.getComputedStyle(parent);
+
+      if (/(auto|scroll)/.test(style.overflowY || style.overflow)) {
+        if (parent.scrollHeight > parent.clientHeight) {
+          return parent;
+        }
+      }
+      parent = parent.parentElement;
+    }
+
+    return document.body;
+  }
+
+  function lockScroll() {
+    if (!props.lockScroll) {
+      return;
+    }
+
+    const trigger = usedTriggerElement.value;
+    targetScrollElement = getVerticalScrollParent(trigger);
+
+    if (targetScrollElement) {
+      const el = targetScrollElement;
+
+      const currentLocks = Number(el.dataset.scrollLocksCount || '0');
+
+      // If this is the FIRST menu opened for this container
+      if (currentLocks === 0) {
+        el.dataset.scrollLocksCount = '1';
+
+        // We remember the original overscroll-behavior-y in data-original-overscroll
+        el.dataset.originalOverscroll = el.style.overscrollBehaviorY || '';
+
+        // Isolating scrolling
+        el.style.overscrollBehaviorY = 'contain';
+
+        if (targetScrollElement === document.body) {
+          document.addEventListener('wheel', preventScrollEvent, { passive: false });
+          document.addEventListener('touchmove', preventScrollEvent, { passive: false });
+        } else {
+          targetScrollElement.addEventListener('wheel', preventScrollEvent, { passive: false });
+          targetScrollElement.addEventListener('touchmove', preventScrollEvent, { passive: false });
+        }
+      } else {
+        // If the container is already blocked by another menu, simply increment the counter
+        el.dataset.scrollLocksCount = String(currentLocks + 1);
+      }
+    }
+  }
+
+  function unlockScroll() {
+    if (!targetScrollElement) {
+      return;
+    }
+
+    const el = targetScrollElement;
+    const currentLocks = Number(el.dataset.scrollLocksCount || '0');
+
+    if (currentLocks > 0) {
+      const newLocks = currentLocks - 1;
+
+      // Release the lock only when the LAST menu holding this container has closed
+      if (newLocks === 0) {
+        const originalOverscroll = el.dataset.originalOverscroll;
+
+        if (originalOverscroll) {
+          el.style.overscrollBehaviorY = originalOverscroll;
+        } else {
+          el.style.removeProperty('overscroll-behavior-y');
+        }
+
+        if (targetScrollElement === document.body) {
+          document.removeEventListener('wheel', preventScrollEvent);
+          document.removeEventListener('touchmove', preventScrollEvent);
+        } else {
+          targetScrollElement.removeEventListener('wheel', preventScrollEvent);
+          targetScrollElement.removeEventListener('touchmove', preventScrollEvent);
+        }
+
+        // We completely remove data attributes from the DOM tree to avoid leaving garbage.
+        delete el.dataset.scrollLocksCount;
+        delete el.dataset.originalOverscroll;
+      } else {
+        // If there are still open menus, simply keep the reduced counter
+        el.dataset.scrollLocksCount = String(newLocks);
+      }
+    }
+
+    targetScrollElement = null;
+  }
+
   function toggleMenu() {
     if (props.disabled) {
       return;
@@ -78,7 +194,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;
@@ -87,13 +207,13 @@
     }
   }
 
-  watch(isPositioned, val => {
-    val ? emits('opened') : emits('closed');
-  });
-
   watch(
     () => props.modelValue,
-    val => {
+    async val => {
+      if (!val) {
+        unlockScroll();
+      }
+
       if (isShow.value !== val) {
         isShow.value = val;
       }
@@ -101,6 +221,15 @@
     { immediate: true },
   );
 
+  watch(isPositioned, val => {
+    if (val) {
+      lockScroll();
+      emits('opened');
+    } else {
+      emits('closed');
+    }
+  });
+
   watch(
     () => props.triggerElement,
     val => {
@@ -117,6 +246,10 @@
     }
   });
 
+  onUnmounted(() => {
+    unlockScroll();
+  });
+
   defineExpose<Ui3nMenuExpose>({
     isPositioned,
     update,
@@ -126,6 +259,7 @@
 <template>
   <div
     ref="menu-element"
+    :id="id"
     :class="$style.ui3nMenu"
   >
     <div
@@ -140,10 +274,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 +288,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;
@@ -176,9 +306,9 @@
 
   .ui3nMenuContent {
     position: absolute;
-    border-radius: var(--ui3n-menu-content-border-raduis);
+    border-radius: var(--ui3n-menu-content-border-radius);
     background-color: var(--ui3n-menu-content-bg);
-    z-index: v-bind(zIndexCss);
+    z-index: var(--ui3n-menu-zIndex, 1000);
     overflow: hidden;
     @include mixins.dropShadow();
   }