@v1nt1248/3nclient-lib 0.1.81 → 0.1.83

package/package.json

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

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

@@ -77,7 +77,7 @@
 
           return props.returnObject
             ? !(ids.value as string[]).includes(item.id as string)
-            : !(ids.value as Array<T[keyof T]>).includes(item as T[keyof T]);
+            : !(ids.value as Array<T[keyof T]>).includes(item[props.itemValue]);
         });
     }
 
@@ -88,7 +88,7 @@
 
         return props.returnObject
           ? !(ids.value as string[]).includes(item.id as string)
-          : !(ids.value as Array<T[keyof T]>).includes(item as T[keyof T]);
+          : !(ids.value as Array<T[keyof T]>).includes(item[props.itemValue]);
       });
   });
 
@@ -187,7 +187,7 @@
       isNewValueValid.value = !props.newValueValidator ? true : props.newValueValidator(query.value);
       emits('valid:new-value', isNewValueValid.value);
       if (isNewValueValid.value) {
-        const item =  {
+        const item = {
           id: getRandomId(6),
           [props.itemTitle]: query.value,
           [props.itemValue]: query.value,
@@ -244,12 +244,20 @@
 
 <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"
+      position-autoupdate
+      :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)"
@@ -283,7 +291,11 @@
       </div>
 
       <template #menu>
-        <div ref="menuBodyEl" :class="$style.body">
+        <div
+          v-if="!isEmpty(filteredItems) || (isEmpty(filteredItems) && noDataText)"
+          ref="menuBodyEl"
+          :class="$style.body"
+        >
           <template v-if="size(filteredItems)">
             <template v-for="(item, index) in filteredItems" :key="item.id">
               <div
@@ -296,7 +308,10 @@
                 @click.stop.prevent="onItemClick(item)"
               >
                 <slot name="item" :item="item" :index="index" :query="query">
-                  <span v-ui3n-html="markSearch(item[props.itemTitle] as string, query)" />
+                  <div
+                    v-ui3n-html="markSearch(item[props.itemTitle] as string, query)"
+                    :class="$style.simpleItem"
+                  />
                 </slot>
               </div>
             </template>
@@ -315,7 +330,7 @@
 
 <style lang="scss" module>
   .ui3nAutocomplete {
-    --autocomplete-min-height: var(--spacing-ml);
+    --autocomplete-min-height: var(--spacing-l);
 
     position: relative;
     width: 100%;
@@ -349,7 +364,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;
@@ -362,19 +377,19 @@
 
     &:hover,
     &:focus {
-      height: calc(var(--autocomplete-min-height) - 2px);
-
-      &:not(.inputWithError) {
-        border: 1px solid var(--color-border-control-accent-focused);
-      }
+      background-color: var(--color-bg-control-secondary-default);
+    }
 
+    &.inputWithError {
+      height: calc(var(--autocomplete-min-height) - 2px);
+      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);
   }
 
@@ -404,6 +419,11 @@
     }
   }
 
+  .simpleItem {
+    position: relative;
+    width: max-content;
+  }
+
   .noData {
     display: flex;
     min-height: var(--spacing-l);

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

@@ -3,8 +3,11 @@ import { VNode } from 'vue';
 export interface Ui3nMenuProps {
   modelValue?: boolean;
   positionStrategy?: 'absolute' | 'fixed';
+  positionAutoupdate?: boolean;
   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,
@@ -38,7 +50,7 @@
         }),
         shift(),
       ],
-      whileElementsMounted: props.positionStrategy === 'fixed' ? autoUpdate : undefined,
+      whileElementsMounted: props.positionAutoupdate || props.positionStrategy === 'fixed' ? autoUpdate : undefined,
     },
   );
 
@@ -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>