@v1nt1248/3nclient-lib 0.1.81 → 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.81",
+  "version": "0.1.82",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [

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

@@ -244,12 +244,19 @@
 
 <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)"
@@ -315,7 +322,7 @@
 
 <style lang="scss" module>
   .ui3nAutocomplete {
-    --autocomplete-min-height: var(--spacing-ml);
+    --autocomplete-min-height: var(--spacing-l);
 
     position: relative;
     width: 100%;
@@ -349,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;
@@ -362,19 +369,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);
   }
 

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>