@v1nt1248/3nclient-lib 0.1.82 → 0.1.84

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.1.82",
+  "version": "0.1.84",
   "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,
@@ -248,6 +248,7 @@
       v-model="isMenuOpen"
       :offset-x="2"
       :offset-y="4"
+      position-autoupdate
       :content-border-radius="[0, 0, 8, 8]"
       :disabled="disabled"
     >
@@ -290,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
@@ -303,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>
@@ -411,6 +419,11 @@
     }
   }
 
+  .simpleItem {
+    position: relative;
+    width: max-content;
+  }
+
   .noData {
     display: flex;
     min-height: var(--spacing-l);

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

@@ -24,14 +24,24 @@ const slots = useSlots();
 const $css = useCssModule();
 
 const height = computed(() => `${props.height}px`);
-const iconHeight = computed(() => props.height ? Number(props.height) - 2 : Number(props.height));
-const padding = computed(() => `${Math.round(Number(props.height) / 3)}px`);
+const iconHeight = computed(() => Number(props.height) - 4);
+
 const maxWidth = computed(() => `${props.maxWidth}px`);
 const bgColor = computed(() => props.color);
 const textSize = computed(() => `${props.textSize}px`);
 const textColor = computed(() => props.textColor);
 const hasLeftSlot = computed(() => !!slots.left);
 
+const padding = computed(() => {
+  const padValue = Math.round(Number(props.height) / 3);
+
+  if (hasLeftSlot.value) {
+    return `0 ${padValue}px 0 4px`;
+  }
+
+  return `0 ${padValue}px`;
+});
+
 const mainCssClasses = computed(() => {
   const val = [$css.ui3nChip];
 
@@ -76,7 +86,7 @@ function onClick() {
   position: relative;
   display: flex;
   height: v-bind('height');
-  padding: 0 v-bind('padding');
+  padding: v-bind('padding');
   width: max-content;
   max-width: v-bind('maxWidth');
   background-color: v-bind('bgColor');

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

@@ -3,6 +3,7 @@ import { VNode } from 'vue';
 export interface Ui3nMenuProps {
   modelValue?: boolean;
   positionStrategy?: 'absolute' | 'fixed';
+  positionAutoupdate?: boolean;
   offsetX?: number;
   offsetY?: number;
   contentBorderRadius?: number | number[];

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

@@ -50,7 +50,7 @@
         }),
         shift(),
       ],
-      whileElementsMounted: props.positionStrategy === 'fixed' ? autoUpdate : undefined,
+      whileElementsMounted: props.positionAutoupdate || props.positionStrategy === 'fixed' ? autoUpdate : undefined,
     },
   );