@v1nt1248/3nclient-lib 0.1.80 → 0.1.82

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.80",
+  "version": "0.1.82",
   "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

@@ -52,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)
@@ -96,7 +97,7 @@
   }
 
   function onBlur() {
-    emits('update:focused', false)
+    emits('update:focused', false);
     activeItemsIndex.value = null;
 
     setTimeout(() => {
@@ -166,7 +167,7 @@
   }
 
   function handlePressingEscOrTabKeys() {
-    emits('update:focused', false)
+    emits('update:focused', false);
     isMenuOpen.value = false;
     activeItemsIndex.value = null;
     query.value = '';
@@ -175,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();
@@ -219,18 +234,29 @@
       if (val !== oVal) {
         activeItemsIndex.value = null;
       }
+
+      if (val && !isNewValueValid.value) {
+        isNewValueValid.value = true;
+      }
     },
   );
 </script>
 
 <template>
   <div :class="$style.ui3nAutocomplete">
-    <ui3n-menu v-model="isMenuOpen" :offset-x="2" :offset-y="4" :disabled="disabled">
+    <ui3n-menu
+      v-model="isMenuOpen"
+      :offset-x="2"
+      :offset-y="4"
+      :content-border-radius="[0, 0, 8, 8]"
+      :disabled="disabled"
+    >
       <div ref="activatorEl" :class="$style.trigger">
         <template v-if="chips">
           <template v-for="(item, index) in modelValue" :key="item.id">
             <slot name="chip" :item="item" :index="index">
               <ui3n-chip
+                height="32"
                 round
                 closeable
                 @close="onChipClose(item)"
@@ -249,7 +275,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)"
@@ -295,7 +322,7 @@
 
 <style lang="scss" module>
   .ui3nAutocomplete {
-    --autocomplete-min-height: var(--spacing-ml);
+    --autocomplete-min-height: var(--spacing-l);
 
     position: relative;
     width: 100%;
@@ -329,7 +356,7 @@
     flex-grow: 1;
     height: var(--autocomplete-min-height);
     font-size: var(--font-12);
-    line-height: var(--font-16);
+    line-height: var(--autocomplete-min-height);
     font-weight: 400;
     color: var(--color-text-control-primary-default);
     background-color: transparent;
@@ -342,14 +369,19 @@
 
     &:hover,
     &:focus {
+      background-color: var(--color-bg-control-secondary-default);
+    }
+
+    &.inputWithError {
       height: calc(var(--autocomplete-min-height) - 2px);
-      border: 1px solid var(--color-border-control-accent-focused);
+      padding: 0 calc(var(--spacing-s) - 1px);
+      border: 1px solid var(--error-content-default);
     }
   }
 
   .body {
     position: relative;
-    background-color: var(--color-bg-control-secondary-default);
+    background-color: var(--color-bg-block-primary-default);
     padding: var(--spacing-xs);
   }
 

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

@@ -5,6 +5,8 @@ export interface Ui3nMenuProps {
   positionStrategy?: 'absolute' | 'fixed';
   offsetX?: number;
   offsetY?: number;
+  contentBorderRadius?: number | number[];
+  zIndex?: number;
   closeOnClick?: boolean;
   closeOnClickOutside?: boolean;
   disabled?: boolean;

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
+  import { computed, ref, watch } 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 } from './types';
@@ -8,6 +8,8 @@
     positionStrategy: 'absolute',
     offsetX: 0,
     offsetY: 0,
+    contentBorderRadius: 4,
+    zIndex: 1000,
     closeOnClick: true,
     closeOnClickOutside: true,
     disabled: false,
@@ -20,6 +22,16 @@
   const menuContentElement = ref<HTMLDivElement | null>(null);
   const isShow = ref(false);
 
+  const contentBorderRadiusCss = computed(() => {
+    if (typeof props.contentBorderRadius === 'number') {
+      return `${props.contentBorderRadius}px`;
+    }
+
+    const [tl, tr, br, bl] = props.contentBorderRadius;
+    return `${tl}px ${tr}px ${br}px ${bl}px`;
+  });
+  const zIndexCss = computed(() => props.zIndex);
+
   const { floatingStyles, isPositioned } = useFloating(
     menuTriggerElement,
     menuContentElement,
@@ -112,6 +124,7 @@
 
   .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;
@@ -130,9 +143,10 @@
 
   .ui3nMenuContent {
     position: absolute;
-    border-radius: 4px;
+    border-radius: var(--ui3n-menu-content-border-raduis);
     background-color: var(--ui3n-menu-content-bg);
-    z-index: 1000;
-    @include mixins.elevation(3);
+    z-index: v-bind(zIndexCss);
+    overflow: hidden;
+    @include mixins.dropShadow();
   }
 </style>