@v1nt1248/3nclient-lib 0.3.39 → 0.3.41

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.3.39",
+  "version": "0.3.41",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

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

@@ -26,6 +26,7 @@
     items: () => [],
     itemTitle: 'name',
     itemValue: 'id',
+    addNewValue: false,
   });
   const emits = defineEmits<Ui3nAutocompleteEmits<T>>();
   defineSlots<Ui3nAutocompleteSlots<T>>();
@@ -40,6 +41,7 @@
   const activeItemsIndex = ref<Nullable<number>>(null);
   const isLastChipHighlighted = ref(false);
   const isNewValueValid = ref(true);
+  const selectedFromMenu = ref(false);
 
   const ids = computed(() =>
     props.returnObject ? (props.modelValue as T[]).map(item => item.id) : (props.modelValue as Array<T[keyof T]>),
@@ -89,12 +91,60 @@
     activeItemsIndex.value = null;
     isLastChipHighlighted.value = false;
 
+    if (!selectedFromMenu.value) {
+      tryAddNewValue();
+    }
+
     setTimeout(() => {
       isMenuOpen.value = false;
       query.value = '';
+      selectedFromMenu.value = false;
     }, 150);
   }
 
+  function tryAddNewValue(): boolean {
+    if (!props.addNewValue || props.disabled) return false;
+
+    const text = query.value.trim();
+    if (!text) return false;
+
+    isNewValueValid.value = !props.newValueValidator ? true : props.newValueValidator(text);
+    emits('valid:new-value', isNewValueValid.value);
+    if (!isNewValueValid.value) return false;
+
+    const item = {
+      id: getRandomId(6),
+      [props.itemTitle]: text,
+      [props.itemValue]: text,
+    } as unknown as T;
+
+    if (!props.multiple) {
+      const newValue = props.returnObject ? [item] : [item[props.itemValue]];
+      emits('update:modelValue', newValue);
+    } else {
+      const alreadyPresent = props.returnObject
+        ? (props.modelValue as T[]).some(
+            v => v[props.itemValue] === item[props.itemValue] || v[props.itemTitle] === item[props.itemTitle],
+          )
+        : props.modelValue.some(v => v === item[props.itemValue]);
+
+      if (!alreadyPresent) {
+        const updatedValue = cloneDeep(props.modelValue);
+        // @ts-ignore
+        updatedValue.push(props.returnObject ? item : item[props.itemValue]);
+        emits('update:modelValue', updatedValue);
+      }
+    }
+
+    isNewValueValid.value = true;
+    props.clearOnSelect && (query.value = '');
+    return true;
+  }
+
+  function onItemMouseDown() {
+    selectedFromMenu.value = true;
+  }
+
   function onItemClick(item: T) {
     if (props.disabled) return;
 
@@ -155,7 +205,7 @@
     }
   }
 
-  function handlePressingEscOrTabKeys() {
+  function handlePressingEscKey() {
     emits('update:focused', false);
     isMenuOpen.value = false;
     activeItemsIndex.value = null;
@@ -164,34 +214,35 @@
     activatorEl.value && activatorEl.value.blur();
   }
 
-  function handlePressingEnterKey() {
-    if (activeItemsIndex.value === null && !isMenuOpen.value) {
-      isMenuOpen.value = true;
-      activeItemsIndex.value = 0;
-      menuBodyEl.value && menuBodyEl.value.focus({ preventScroll: true });
-      return;
+  function handlePressingTabKey() {
+    if (props.addNewValue) {
+      tryAddNewValue();
     }
 
-    if (activeItemsIndex.value === null && isMenuOpen.value && query.value) {
-      isNewValueValid.value = !props.newValueValidator ? true : props.newValueValidator(query.value);
-      emits('valid:new-value', isNewValueValid.value);
-      if (isNewValueValid.value) {
-        const item = {
-          id: getRandomId(6),
-          [props.itemTitle]: query.value,
-          [props.itemValue]: query.value,
-        };
-        onItemClick(item as unknown as T);
-      }
-      props.clearOnSelect && (query.value = '');
-      return;
-    }
+    emits('update:focused', false);
+    isMenuOpen.value = false;
+    activeItemsIndex.value = null;
+    query.value = '';
+  }
 
+  function handlePressingEnterKey() {
     if (activeItemsIndex.value !== null) {
       const item = filteredItems.value[activeItemsIndex.value!];
       onItemClick(item);
       activeItemsIndex.value = null;
       props.clearOnSelect && (query.value = '');
+      return;
+    }
+
+    if (props.addNewValue && query.value.trim()) {
+      tryAddNewValue();
+      return;
+    }
+
+    if (!isMenuOpen.value) {
+      isMenuOpen.value = true;
+      activeItemsIndex.value = 0;
+      menuBodyEl.value && menuBodyEl.value.focus({ preventScroll: true });
     }
   }
 
@@ -229,8 +280,11 @@
       }
 
       case 'esc':
+        handlePressingEscKey();
+        break;
+
       case 'tab':
-        handlePressingEscOrTabKeys();
+        handlePressingTabKey();
         break;
 
       case 'enter': {
@@ -251,6 +305,7 @@
     isMenuOpen.value = false;
     activeItemsIndex.value = null;
     isNewValueValid.value = true;
+    selectedFromMenu.value = false;
 
     emits('update:modelValue', [] as unknown as T[] & Array<T[keyof T]>);
     emits('update:search', '');
@@ -323,6 +378,7 @@
 
     <ui3n-menu
       v-model="isMenuOpen"
+      width="100%"
       :lock-scroll="lockScroll"
       :offset-x="2"
       :offset-y="4"
@@ -413,6 +469,7 @@
                   activeItemsIndex === index && $style.itemSelected,
                   disabled && $style.itemDisabled,
                 ]"
+                @mousedown="onItemMouseDown"
                 @click.stop.prevent="onItemClick(item)"
               >
                 <slot

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

@@ -24,6 +24,11 @@ export interface Ui3nMenuProps {
    * Root element id
    */
   id?: string;
+  /**
+   * Root element width
+   * @default 'max-content'
+   */
+  width?: string | number;
   /**
    * Menu open state
    */

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

@@ -16,6 +16,7 @@
     closeOnClick: true,
     closeOnClickOutside: true,
     disabled: false,
+    width: 'max-content',
   });
   const emits = defineEmits<Ui3nMenuEmits>();
   defineSlots<Ui3nMenuSlots>();
@@ -90,6 +91,13 @@
     };
   });
 
+  const rootStyles = computed(() => {
+    const numericWidth = !isNaN(Number(props.width));
+    const widthStr = numericWidth ? `${props.width}px` : String(props.width);
+
+    return { width: widthStr };
+  });
+
   function preventScrollEvent(e: Event) {
     e.preventDefault();
   }
@@ -262,6 +270,7 @@
     ref="menu-element"
     :id="id"
     :class="$style.ui3nMenu"
+    :style="rootStyles"
     @click="emits('click', $event)"
   >
     <div
@@ -292,7 +301,6 @@
     --ui3n-menu-content-bg: var(--color-bg-control-secondary-default);
 
     position: relative;
-    width: max-content;
     display: inline-block;
     overflow: visible;
   }

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

@@ -259,6 +259,7 @@
 
     <ui3n-menu
       v-model="isMenuOpen"
+      width="100%"
       :offset-x="-3"
       :offset-y="4"
       position-autoupdate
@@ -399,8 +400,6 @@
   }
 
   .menu {
-    width: 100%;
-    max-width: 100% !important;
     border-radius: var(--ui3n-selector-border-radius);
 
     & > div {