sprintify-ui 0.8.47 → 0.8.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.47",
+  "version": "0.8.48",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/BaseAutocomplete.vue

@@ -65,11 +65,11 @@
     <div class="relative">
       <div
         v-show="dropdownOpened"
-        class="w-full min-h-[110px] overflow-hidden bg-white border-b border-x border-slate-300 input-rounded rounded-t-none"
+        class="w-full min-h-[110px] overflow-hidden bg-white border-slate-300 input-rounded"
         :class="[
           inline
-            ? 'relative'
-            : ['absolute shadow-2xl z-menu'],
+            ? 'relative border-b border-x rounded-t-none'
+            : 'absolute top-1 border shadow-2xl z-menu',
         ]"
       >
         <BaseAutocompleteDrawer
@@ -533,14 +533,16 @@ const inputClasses = computed(() => {
   const base = 'w-full';
   const paddingRight = showRemoveButtonInternal.value ? 'pr-5' : '';
   const withSelect = props.select ? 'rounded-l-none' : '';
-  // Remove focus style when open to avoid overlapping with dropdown
-  const open = dropdownOpened.value ? 'rounded-b-none relative focus-within:ring-0' : '';
+
+  const inline = props.inline ? 'relative focus-within:ring-0 focus-within:border-slate-300' : '';
+  const inlineOpen = props.inline && dropdownOpened.value ? 'rounded-b-none' : '';
 
   const internalClasses = [
     base,
     withSelect,
     paddingRight,
-    open,
+    inline,
+    inlineOpen,
   ];
 
   if (!props.twInput) {
@@ -552,12 +554,14 @@ const inputClasses = computed(() => {
 
 const selectClasses = computed(() => {
   const base = 'relative rounded-r-none min-w-0';
-  // Remove focus style when open to avoid overlapping with dropdown
-  const open = dropdownOpened.value ? 'rounded-b-none focus:ring-0' : '';
+
+  const inline = props.inline ? 'relative focus:ring-0 focus:border-slate-300' : '';
+  const inlineOpen = props.inline && dropdownOpened.value ? 'rounded-b-none' : '';
 
   const internalClasses = [
     base,
-    open,
+    inline,
+    inlineOpen,
   ];
 
   if (!props.twSelect) {

package/src/components/BaseTagAutocomplete.vue

@@ -46,11 +46,12 @@
 
     <div class="relative">
       <div
-        v-if="opened || dropdownShow == 'always'"
+        v-if="dropdownOpened"
+        class="w-full min-h-[110px] overflow-hidden bg-white border-slate-300 input-rounded"
         :class="[
           inline
-            ? 'relative'
-            : 'absolute top-1 z-menu min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md',
+            ? 'relative border-b border-x rounded-t-none'
+            : 'absolute top-1 border shadow-2xl z-menu',
         ]"
       >
         <BaseAutocompleteDrawer
@@ -60,7 +61,7 @@
           :size="size"
           :loading="loading"
           :loading-bottom="loadingBottom"
-          :tw-drawer="inline ? 'pt-1' : 'p-1'"
+          tw-drawer="p-1"
           :keywords="keywords"
           @select="onSelect"
           @scroll-bottom="emit('scrollBottom')"
@@ -256,6 +257,8 @@ const shouldFilter = ref(false);
 const opened = ref(false);
 const selectionToDelete = ref<NormalizedOption | null>(null);
 
+const dropdownOpened = computed(() => opened.value || props.dropdownShow == 'always');
+
 const isSelected = hasOptions.isSelected;
 const normalizedOptions = hasOptions.normalizedOptions;
 const normalizedModelValue = hasOptions.normalizedModelValue as ComputedRef<
@@ -432,9 +435,16 @@ const wrapperClass = computed(() => {
     'xl': 'min-h-control-xl gap-1 p-1',
   }[sizeInternal.value];
 
-  const focus = opened.value ? 'input-focus border-blue-300' : '';
+  const focus = (dropdownOpened.value && !props.inline) ? 'input-focus border-blue-300' : '';
+  const inline = (dropdownOpened.value && props.inline) ? 'rounded-b-none' : '';
+
+  const internalClasses = [base, error, height, focus, inline];
 
-  return twMerge(base, error, height, focus, props.twContainer);
+  if (props.twContainer) {
+    return twMerge(internalClasses, props.twContainer);
+  }
+
+  return internalClasses;
 });
 
 const innerHeight = computed(() => {
@@ -455,6 +465,9 @@ const inputClasses = computed(() => {
   const disabled = 'disabled:cursor-not-allowed';
   const sizeConfig = sizes[sizeInternal.value];
 
+  const inline = props.inline ? 'relative focus:ring-0 focus:border-slate-300' : '';
+  const inlineOpen = props.inline && dropdownOpened.value ? 'rounded-b-none' : '';
+
   const padding = {
     'xs': 'pl-1.5',
     'sm': 'pl-2',
@@ -463,7 +476,7 @@ const inputClasses = computed(() => {
     'xl': 'pl-2.5',
   }[sizeInternal.value];
 
-  return [base, padding, innerHeight.value, focus, disabled, sizeConfig.fontSize];
+  return [base, padding, innerHeight.value, focus, disabled, sizeConfig.fontSize, inline, inlineOpen];
 });
 
 const selectionClass = (selection: NormalizedOption): string => {