@v1nt1248/3nclient-lib 0.3.30 → 0.3.31

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

@@ -23,19 +23,17 @@
 
   const inEdit = ref(false);
 
-  const cssMinWidth = computed(() => `${minWidth}px`);
-
-  const cssMaxWidth = computed(() => {
-    if (!props.maxWidth) {
-      return '100%';
-    }
-
-    const maxWidthAsNumber = Number(props.maxWidth);
-    if (Number.isNaN(maxWidthAsNumber)) {
-      return props.maxWidth as string;
+  const inlineStyles = computed(() => {
+    let maxWidthStr = '100%';
+    if (props.maxWidth) {
+      const maxWidthAsNumber = Number(props.maxWidth);
+      maxWidthStr = Number.isNaN(maxWidthAsNumber) ? (props.maxWidth as string) : `${maxWidthAsNumber}px`;
     }
 
-    return `${maxWidthAsNumber}px`;
+    return {
+      '--ui3n-editable-min-width': `${minWidth}px`,
+      '--ui3n-editable-max-width': maxWidthStr,
+    };
   });
 
   const isContentTruncated = computed(() => {
@@ -55,8 +53,12 @@
   });
 
   function setInputWidth() {
-    hiddenEl.value!.textContent = value.value || props.placeholder || '...';
-    const newWidth = Math.max(hiddenEl.value!.scrollWidth, minWidth);
+    if (!hiddenEl.value) {
+      return;
+    }
+
+    hiddenEl.value.textContent = value.value || props.placeholder || '';
+    const newWidth = Math.max(hiddenEl.value.scrollWidth + 48, minWidth);
     inputElWidth.value = `${newWidth}px`;
   }
 
@@ -78,8 +80,7 @@
   }
 
   function onInput(ev: Event) {
-    // @ts-ignore
-    value.value = ev.target!.value || '';
+    value.value = (ev.target as HTMLInputElement).value || '';
     setInputWidth();
   }
 
@@ -96,6 +97,7 @@
       initialValue.value = value.value;
       emits('update:modelValue', value.value);
     }
+
     emits('done');
     inEdit.value = false;
   }
@@ -109,6 +111,7 @@
       value.value = initialValue.value;
       emits('update:modelValue', value.value);
     }
+
     emits('cancel');
     inEdit.value = false;
   }
@@ -165,7 +168,13 @@
   <div
     :id="id"
     v-ui3n-click-outside="onClickOutside"
-    :class="[$style.ui3nEditable, disabled && $style.ui3nEditableDisabled]"
+    :class="[
+      $style.ui3nEditable,
+      disabled && $style.ui3nEditableDisabled,
+      inEdit && $style.ui3nEditableInEdit,
+      inEdit && !isValid && $style.ui3nEditableInEditWarning,
+    ]"
+    :style="inlineStyles"
     @focusin="emits('focusin', $event)"
   >
     <input
@@ -183,7 +192,7 @@
 
       <input
         ref="inputEl"
-        :class="[$style.input, inEdit && $style.inEdit, inEdit && !isValid && $style.inEditWarning]"
+        :class="$style.input"
         :style="{ width: inputElWidth }"
         :value="value"
         :placeholder="placeholder"
@@ -248,13 +257,14 @@
   @use '../../assets/styles/mixins' as mixins;
 
   .ui3nEditable {
-    --ui3n-editable-min-width: v-bind(cssMinWidth);
-    --ui3n-editable-max-width: v-bind(cssMaxWidth);
+    --ui3n-editable-min-width: 60px;
+    --ui3n-editable-max-width: 100%;
     --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-padding-base: 4px;
+    //--ui3n-editable-padding: 0 4px;
+    //--ui3n-editable-padding: 4px 44px 4px 4px;
     --ui3n-editable-button-size: 16px;
 
     position: relative;
@@ -265,9 +275,22 @@
     border-radius: var(--ui3n-editable-border-radius);
     font-size: var(--ui3n-editable-font-size);
     font-weight: 400;
-    line-height: 1.33;
+    line-height: var(--ui3n-editable-height);
     color: var(--color-text-table-primary-default);
     overflow: hidden;
+    border: 1px solid transparent;
+
+    &.ui3nEditableInEdit {
+      background-color: var(--color-bg-control-primary-default, #fff);
+
+      &:not(.ui3nEditableInEditWarning) {
+        border: 1px solid var(--color-border-table-accent-default);
+      }
+
+      &.ui3nEditableInEditWarning {
+        border: 1px solid var(--error-content-default);
+      }
+    }
   }
 
   .ui3nEditableDisabled {
@@ -277,15 +300,23 @@
 
   .content {
     position: relative;
+    box-sizing: border-box;
     height: var(--ui3n-editable-height);
     min-width: var(--ui3n-editable-min-width);
     max-width: var(--ui3n-editable-max-width);
-    padding: var(--ui3n-editable-padding);
+    padding: 0 24px 0 4px;
     border-radius: var(--ui3n-editable-border-radius);
     display: flex;
     justify-content: flex-start;
     align-items: center;
     cursor: pointer;
+    border: 1px solid transparent;
+
+    span {
+      display: block;
+      max-width: 100%;
+      @include mixins.text-overflow-ellipsis();
+    }
 
     &.contentEmpty {
       color: var(--color-text-table-secondary-default);
@@ -298,43 +329,28 @@
         opacity: 1;
       }
     }
-
-    span {
-      display: block;
-      max-width: 100%;
-      @include mixins.text-overflow-ellipsis();
-    }
   }
 
   .input {
     position: relative;
+    height: 100%;
+    box-sizing: border-box;
     min-width: var(--ui3n-editable-min-width);
-    max-width: calc(100% - 52px);
-    padding: var(--ui3n-editable-padding);
+    max-width: 100%;
+    padding: 0 44px 0 4px;
+    font-family: inherit;
     font-size: var(--ui3n-editable-font-size);
     font-weight: 400;
-    line-height: 1.33;
+    line-height: var(--ui3n-editable-height);
     border-radius: var(--ui3n-editable-border-radius);
+    background-color: transparent;
+    border: none;
 
     &::placeholder {
       color: var(--color-text-table-secondary-default);
     }
 
-    &.inEdit {
-      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);
-      }
-
-      &.inEditWarning {
-        border: 1px solid var(--error-content-default);
-      }
-    }
-
     &:focus-visible {
-      border: none;
       outline: none;
     }
   }
@@ -342,6 +358,12 @@
   .hidden {
     position: absolute;
     visibility: hidden;
+    padding: 0;
+    font-family: inherit;
+    font-size: var(--ui3n-editable-font-size);
+    font-weight: 400;
+    line-height: var(--ui3n-editable-height);
+    white-space: pre;
   }
 
   .btn {

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

@@ -1,26 +1,32 @@
 <script lang="ts" setup>
-  import { computed, onMounted, ref, watch } from 'vue';
+  import { computed, ref, watch } from 'vue';
   import { emoticons } from '@/constants/emoticons';
   import type { Ui3nEmojiEmits, Ui3nEmojiProps } from './types';
 
-  const props = withDefaults(
-    defineProps<Ui3nEmojiProps>(),
-    {
-      size: 16,
-      readonly: false,
-    },
-  );
+  const props = withDefaults(defineProps<Ui3nEmojiProps>(), {
+    size: 16,
+    readonly: false,
+  });
   const emits = defineEmits<Ui3nEmojiEmits>();
 
   const emojiElement = ref<HTMLDivElement | null>(null);
   const emojiData = computed(() => emoticons[props.emoji]);
 
-  onMounted(() => {
-    if (emojiElement.value) {
-      emojiElement.value.style.setProperty('--ui3n-emoji-size', `${props.size}px`);
-    }
+  const inlineStyles = computed(() => {
+    const isNumeric = !isNaN(Number(props.size));
+    const sizeStr = isNumeric ? `${props.size}px` : String(props.size);
+
+    return {
+      '--ui3n-emoji-size': sizeStr,
+      'line-height': sizeStr,
+    };
   });
 
+  function onClick(ev: Event) {
+    ev.stopPropagation();
+    emits('click', ev);
+  }
+
   watch(
     () => props.emoji,
     newValue => {
@@ -30,27 +36,14 @@
     },
     { immediate: true },
   );
-
-  watch(
-    () => props.size,
-    (newValue, prevValue) => {
-      if (emojiElement.value && newValue && newValue !== prevValue) {
-        emojiElement.value.style.setProperty('--ui3n-emoji-size', `${newValue}px`);
-      }
-    },
-  );
-
-  const onClick = (ev: Event) => {
-    ev.stopImmediatePropagation();
-    emits('click', ev);
-  };
 </script>
 
 <template>
   <div
     ref="emojiElement"
     :class="[$style.ui3nEmoji, readonly && $style.readonly]"
-    v-on="readonly ? {} : { 'click': onClick }"
+    :style="inlineStyles"
+    v-on="readonly ? {} : { click: onClick }"
   >
     {{ emojiData && emojiData.value }}
   </div>
@@ -69,6 +62,7 @@
     justify-content: center;
     align-items: center;
     cursor: pointer;
+    user-select: none;
   }
 
   .readonly {

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

@@ -9,25 +9,32 @@
   });
   const emits = defineEmits<Ui3nIconEmits>();
 
-  const widthVal = computed(() => props.size || props.width || 16);
-  const heightVal = computed(() => props.size || props.height || 16);
+  const rawWidth = computed(() => props.size || props.width || 16);
+  const rawHeight = 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-width': formatUnit(rawWidth.value),
+      '--ui3n-icon-height': formatUnit(rawHeight.value),
       '--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;
   });
+
+  function formatUnit(val: string | number): string {
+    const isNumeric = !isNaN(Number(val));
+    return isNumeric ? `${val}px` : String(val);
+  }
 </script>
 
 <template>
@@ -43,7 +50,8 @@
 
 <style lang="scss" module>
   .ui3nIcon {
-    display: block;
+    display: inline-block;
+    vertical-align: middle;
     min-width: var(--ui3n-icon-width);
     width: var(--ui3n-icon-width);
 

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

@@ -153,11 +153,11 @@ export interface Ui3nInputSlots {
   /**
    * Slot for prepend icon (displayed at the start of the input)
    */
-  'prepend-icon'?: () => VNode[];
+  'prepend-icon'?: () => VNode;
   /**
    * Slot for append icon (displayed at the end of the input)
    */
-  'append-icon'?: () => VNode[];
+  'append-icon'?: () => VNode;
 }
 
 export interface Ui3nInputExpose {

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

@@ -61,7 +61,7 @@
     return (event.target as HTMLInputElement).value;
   }
 
-  function validate(value: string) {
+  function validate(value: string, forceEmit = false) {
     const errors: string[] = [];
     for (const rule of props.rules) {
       if (typeof rule !== 'function') {
@@ -77,7 +77,7 @@
     }
 
     errorMessage.value = errors.join('. ');
-    if (isDirty.value || props.validateAtStartup) {
+    if (isDirty.value || props.validateAtStartup || forceEmit) {
       emits('update:valid', errors.length === 0);
     }
   }
@@ -152,12 +152,13 @@
 
   onMounted(() => {
     internalValue.value = props.modelValue ?? '';
+
     if (inputElement.value) {
-      inputElement.value.value = internalValue.value;
+      emits('init', inputElement.value);
+
       if (props.autofocus) {
         inputElement.value.focus();
       }
-      emits('init', inputElement.value);
     }
 
     if (props.validateAtStartup) {
@@ -172,11 +173,7 @@
       const normalized = val ?? '';
       if (normalized !== internalValue.value) {
         internalValue.value = normalized;
-
-        if (inputElement.value) {
-          inputElement.value.value = normalized;
-        }
-        validate(normalized);
+        validate(normalized, true);
       }
     },
   );
@@ -231,6 +228,7 @@
         :name="name"
         :maxlength="maxlength"
         :minlength="minlength"
+        :value="internalValue"
         :class="$style.ui3nInputField"
         @input="onInput"
         @keydown.enter="onEnterKeydown"
@@ -456,6 +454,14 @@
     .inputWrapper {
       outline: 1px solid var(--error-content-default);
     }
+
+    &:focus-within {
+      .inputWrapper {
+        background-color: var(--color-bg-control-secondary-focused);
+        outline: 1px solid var(--error-content-default);
+        box-shadow: 0 0 0 1px var(--error-content-default);
+      }
+    }
   }
 
   .success {

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

@@ -1,5 +1,21 @@
 import type { Ref, VNode } from 'vue';
 
+export interface Ui3nVirtualElement {
+  getBoundingClientRect: () =>
+    | DOMRect
+    | {
+        x: number;
+        y: number;
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+      };
+  contextElement?: HTMLElement;
+}
+
 /**
  * Menu component properties
  */
@@ -15,7 +31,7 @@ export interface Ui3nMenuProps {
   /**
    * Trigger element
    */
-  triggerElement?: HTMLElement;
+  triggerElement?: HTMLElement | Ui3nVirtualElement;
   /**
    * Position strategy
    * @default 'absolute'
@@ -79,6 +95,8 @@ export interface Ui3nMenuProps {
  * Menu component emits
  */
 export interface Ui3nMenuEmits {
+  /** Called when the menu is clicked */
+  (ev: 'click', value: Event): void;
   /**
    * Emitted when menu opens
    */

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

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-  import { computed, nextTick, onUnmounted, ref, watch, useTemplateRef } from 'vue';
+  import { computed, 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 { Nullable } from '@/types';
-  import type { Ui3nMenuEmits, Ui3nMenuProps, Ui3nMenuSlots, Ui3nMenuExpose } from './types';
+  import type { Ui3nMenuEmits, Ui3nMenuProps, Ui3nMenuSlots, Ui3nMenuExpose, Ui3nVirtualElement } from './types';
 
   const props = withDefaults(defineProps<Ui3nMenuProps>(), {
     lockScroll: false,
@@ -24,12 +24,27 @@
   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 outerTriggerElement = ref<Nullable<HTMLElement | Ui3nVirtualElement>>(props.triggerElement || null);
 
   const usedTriggerElement = computed(() => outerTriggerElement.value || menuTriggerElement.value);
 
+  const nativeHtmlTriggerElement = computed<HTMLElement | null>(() => {
+    const trigger = usedTriggerElement.value;
+    if (!trigger) {
+      return null;
+    }
+
+    if (trigger instanceof HTMLElement) {
+      return trigger;
+    }
+
+    if ('contextElement' in trigger && trigger.contextElement instanceof HTMLElement) {
+      return trigger.contextElement;
+    }
+
+    return null;
+  });
+
   const middleware = computed(() => {
     const list = [
       offset({
@@ -105,77 +120,64 @@
       return;
     }
 
-    const trigger = usedTriggerElement.value;
-    targetScrollElement = getVerticalScrollParent(trigger);
+    const scrollParent = getVerticalScrollParent(nativeHtmlTriggerElement.value);
 
-    if (targetScrollElement) {
-      const el = targetScrollElement;
+    if (scrollParent) {
+      const currentLocks = Number(scrollParent.dataset.scrollLocksCount || '0');
 
-      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';
+        scrollParent.dataset.scrollLocksCount = '1';
+        scrollParent.dataset.originalOverscroll = scrollParent.style.overscrollBehaviorY || '';
+        scrollParent.style.overscrollBehaviorY = 'contain';
 
-        if (targetScrollElement === document.body) {
+        if (scrollParent === 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 });
+          scrollParent.addEventListener('wheel', preventScrollEvent, { passive: false });
+          scrollParent.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);
+        scrollParent.dataset.scrollLocksCount = String(currentLocks + 1);
       }
     }
   }
 
   function unlockScroll() {
-    if (!targetScrollElement) {
+    const scrollParent = getVerticalScrollParent(nativeHtmlTriggerElement.value);
+
+    if (!scrollParent) {
       return;
     }
 
-    const el = targetScrollElement;
-    const currentLocks = Number(el.dataset.scrollLocksCount || '0');
+    const currentLocks = Number(scrollParent.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;
+        const originalOverscroll = scrollParent.dataset.originalOverscroll;
 
         if (originalOverscroll) {
-          el.style.overscrollBehaviorY = originalOverscroll;
+          scrollParent.style.overscrollBehaviorY = originalOverscroll;
         } else {
-          el.style.removeProperty('overscroll-behavior-y');
+          scrollParent.style.removeProperty('overscroll-behavior-y');
         }
 
-        if (targetScrollElement === document.body) {
+        if (scrollParent === document.body) {
           document.removeEventListener('wheel', preventScrollEvent);
           document.removeEventListener('touchmove', preventScrollEvent);
         } else {
-          targetScrollElement.removeEventListener('wheel', preventScrollEvent);
-          targetScrollElement.removeEventListener('touchmove', preventScrollEvent);
+          scrollParent.removeEventListener('wheel', preventScrollEvent);
+          scrollParent.removeEventListener('touchmove', preventScrollEvent);
         }
 
-        // We completely remove data attributes from the DOM tree to avoid leaving garbage.
-        delete el.dataset.scrollLocksCount;
-        delete el.dataset.originalOverscroll;
+        delete scrollParent.dataset.scrollLocksCount;
+        delete scrollParent.dataset.originalOverscroll;
       } else {
-        // If there are still open menus, simply keep the reduced counter
-        el.dataset.scrollLocksCount = String(newLocks);
+        scrollParent.dataset.scrollLocksCount = String(newLocks);
       }
     }
-
-    targetScrollElement = null;
   }
 
   function toggleMenu() {
@@ -195,7 +197,7 @@
   }
 
   function onClickOutside(event: MouseEvent) {
-    if (usedTriggerElement.value?.contains(event.target as Node)) {
+    if (nativeHtmlTriggerElement.value?.contains(event.target as Node)) {
       return;
     }
 
@@ -208,28 +210,27 @@
   }
 
   watch(
-    () => props.modelValue,
-    async val => {
-      if (!val) {
+    () => isShow.value,
+    val => {
+      if (val) {
+        lockScroll();
+      } else {
         unlockScroll();
       }
+    },
+  );
 
-      if (isShow.value !== val) {
+  watch(
+    () => props.modelValue,
+    val => {
+      if (val !== undefined && isShow.value !== val) {
         isShow.value = val;
+        val ? emits('open') : emits('close');
       }
     },
     { immediate: true },
   );
 
-  watch(isPositioned, val => {
-    if (val) {
-      lockScroll();
-      emits('opened');
-    } else {
-      emits('closed');
-    }
-  });
-
   watch(
     () => props.triggerElement,
     val => {
@@ -261,6 +262,7 @@
     ref="menu-element"
     :id="id"
     :class="$style.ui3nMenu"
+    @click="emits('click', $event)"
   >
     <div
       ref="menu-trigger-element"
@@ -290,13 +292,14 @@
     --ui3n-menu-content-bg: var(--color-bg-control-secondary-default);
 
     position: relative;
-    max-width: max-content;
+    width: max-content;
+    display: inline-block;
     overflow: visible;
   }
 
   .ui3nMenuTrigger {
     position: relative;
-    max-width: max-content;
+    width: 100%;
 
     &.ui3nMenuTriggerDisabled {
       pointer-events: none;