@v1nt1248/3nclient-lib 0.1.79 → 0.1.81

package/package.json

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

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

@@ -20,6 +20,8 @@ export interface Ui3nAutocompleteProps<T extends Ui3nAutocompleteOptionBase> {
   itemTitle?: keyof T;
   itemValue?: keyof T;
   modelValue: T[] | Array<T[keyof T]>;
+  addNewValue?: boolean;
+  newValueValidator?: (value: string) => boolean;
   multiple?: boolean;
   noDataText?: string;
   placeholder?: string;
@@ -30,6 +32,7 @@ export interface Ui3nAutocompleteEmits<T extends Ui3nAutocompleteOptionBase> {
   (event: 'update:modelValue', value: T[] | Array<T[keyof T]>): void;
   (event: 'update:search', value: string): void;
   (event: 'update:focused', value: boolean): void;
+  (event: 'valid:new-value', value: boolean): void;
 }
 
 export interface Ui3nAutocompleteSlots<T extends Ui3nAutocompleteOptionBase> {

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

@@ -22,7 +22,6 @@
   import Ui3nChip from '../ui3n-chip/ui3n-chip.vue';
   import Ui3nMenu from '../ui3n-menu/ui3n-menu.vue';
   import Ui3nHtml from '@/directives/ui3n-html';
-  import Ui3nClickOutside from '@/directives/ui3n-click-outside';
   import { markSearch, getRandomId } from '@/utils';
   import type { Nullable } from '@/components/types';
   import {
@@ -33,12 +32,10 @@
   } from './types';
 
   const vUi3nHtml = Ui3nHtml;
-  const vUi3nClickOutside = Ui3nClickOutside;
 
   const props = withDefaults(defineProps<Ui3nAutocompleteProps<T>>(), {
     clearOnSelect: false,
     filterKeys: () => [],
-    filterMode: 'every',
     hideSelected: false,
     items: () => [],
     itemTitle: 'name',
@@ -55,6 +52,7 @@
   const inputEl = ref<Nullable<HTMLInputElement>>(null);
   const menuBodyEl = ref<Nullable<HTMLDivElement>>(null);
   const activeItemsIndex = ref<Nullable<number>>(null);
+  const isNewValueValid = ref(true);
 
   const ids = computed(() => props.returnObject
     ? (props.modelValue as T[]).map(item => item.id)
@@ -99,9 +97,13 @@
   }
 
   function onBlur() {
-    emits('update:focused', false)
+    emits('update:focused', false);
     activeItemsIndex.value = null;
-    query.value = '';
+
+    setTimeout(() => {
+      isMenuOpen.value = false;
+      query.value = '';
+    }, 150);
   }
 
   function onItemClick(item: T) {
@@ -165,7 +167,7 @@
   }
 
   function handlePressingEscOrTabKeys() {
-    emits('update:focused', false)
+    emits('update:focused', false);
     isMenuOpen.value = false;
     activeItemsIndex.value = null;
     query.value = '';
@@ -174,21 +176,35 @@
   }
 
   function handlePressingEnterKey() {
-    if (activeItemsIndex.value === null) {
+    if (activeItemsIndex.value === null && !isMenuOpen.value) {
       isMenuOpen.value = true;
       activeItemsIndex.value = 0;
       menuBodyEl.value && menuBodyEl.value.focus();
       return;
     }
 
-    const item = filteredItems.value[activeItemsIndex.value!];
-    onItemClick(item);
-    activeItemsIndex.value = null;
+    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);
+      }
+      return;
+    }
+
+    if (activeItemsIndex.value !== null) {
+      const item = filteredItems.value[activeItemsIndex.value!];
+      onItemClick(item);
+      activeItemsIndex.value = null;
+    }
   }
 
   function onKeydown(event: KeyboardEvent, key: 'down' | 'up' | 'esc' | 'enter' | 'tab') {
-    if (isEmpty(filteredItems.value)) return;
-
     switch (key) {
       case 'down':
         event.preventDefault();
@@ -212,16 +228,16 @@
     }
   }
 
-  function onClickOutside() {
-    handlePressingEscOrTabKeys();
-  }
-
   watch(
     () => size(filteredItems.value),
     (val, oVal) => {
       if (val !== oVal) {
         activeItemsIndex.value = null;
       }
+
+      if (val && !isNewValueValid.value) {
+        isNewValueValid.value = true;
+      }
     },
   );
 </script>
@@ -252,7 +268,8 @@
           ref="inputEl"
           v-model="query"
           type="text"
-          :class="$style.input"
+          :class="[$style.input, !isNewValueValid && $style.inputWithError]"
+          :placeholder="isEmpty(modelValue) && placeholder ? placeholder : ''"
           :disabled="disabled"
           @input="onInput"
           @focusin="emits('update:focused', true)"
@@ -266,7 +283,7 @@
       </div>
 
       <template #menu>
-        <div ref="menuBodyEl" v-ui3n-click-outside="onClickOutside" :class="$style.body">
+        <div ref="menuBodyEl" :class="$style.body">
           <template v-if="size(filteredItems)">
             <template v-for="(item, index) in filteredItems" :key="item.id">
               <div
@@ -335,6 +352,7 @@
     line-height: var(--font-16);
     font-weight: 400;
     color: var(--color-text-control-primary-default);
+    background-color: transparent;
     border: none;
     outline: none;
 
@@ -345,7 +363,12 @@
     &:hover,
     &:focus {
       height: calc(var(--autocomplete-min-height) - 2px);
-      border: 1px solid var(--color-border-control-accent-focused);
+
+      &:not(.inputWithError) {
+        border: 1px solid var(--color-border-control-accent-focused);
+      }
+
+      border: 1px solid var(--error-content-default);
     }
   }