sprintify-ui 0.10.25 → 0.10.27

package/dist/types/components/BaseAutocomplete.vue.d.ts

@@ -9,6 +9,8 @@ import BaseInput from './BaseInput.vue';
 import BaseSelect from './BaseSelect.vue';
 declare const emit: (event: "close" | "select" | "open" | "clear" | "update:modelValue" | "scrollBottom" | "typing", ...args: any[]) => void;
 declare const hasErrorInternal: ComputedRef<boolean>, sizeInternal: ComputedRef<"xs" | "sm" | "md" | "lg" | "xl">;
+declare const inputRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+declare const dropdownRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
 declare const drawer: import("vue").Ref<({
     $: import("vue").ComponentInternalInstance;
     $data: {};
@@ -349,18 +351,32 @@ declare const slotProps: {
     close: typeof close;
     keywords: ComputedRef<string>;
 };
+declare const inputRefWidth: ComputedRef<number>;
+declare const floatingStyles: Readonly<import("vue").Ref<{
+    position: import("@floating-ui/utils").Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+}, {
+    position: import("@floating-ui/utils").Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+}>>;
 declare const deleteButtonIconClasses: ComputedRef<string[]>;
 declare const inputClasses: ComputedRef<string | string[]>;
 declare const selectClasses: ComputedRef<string | string[]>;
 declare const showRemoveButtonInternal: ComputedRef<boolean | null>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_33: {
+declare var __VLS_37: {
     focus: typeof focus;
     blur: typeof blur;
     open: typeof open;
     close: typeof close;
     keywords: ComputedRef<string>;
-}, __VLS_35: {
+}, __VLS_39: {
     focus: typeof focus;
     blur: typeof blur;
     open: typeof open;
@@ -371,7 +387,7 @@ declare var __VLS_33: {
     label: string;
     selected: boolean;
     active: boolean;
-}, __VLS_37: {
+}, __VLS_41: {
     focus: typeof focus;
     blur: typeof blur;
     open: typeof open;
@@ -380,11 +396,11 @@ declare var __VLS_33: {
     options: NormalizedOption[];
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    empty?: (props: typeof __VLS_33) => any;
+    empty?: (props: typeof __VLS_37) => any;
 } & {
-    option?: (props: typeof __VLS_35) => any;
+    option?: (props: typeof __VLS_39) => any;
 } & {
-    footer?: (props: typeof __VLS_37) => any;
+    footer?: (props: typeof __VLS_41) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -494,6 +510,8 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     emit: typeof emit;
     hasErrorInternal: typeof hasErrorInternal;
     sizeInternal: typeof sizeInternal;
+    inputRef: typeof inputRef;
+    dropdownRef: typeof dropdownRef;
     drawer: typeof drawer;
     keywords: typeof keywords;
     autocomplete: typeof autocomplete;
@@ -510,6 +528,8 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     selection: typeof selection;
     onSelectChange: typeof onSelectChange;
     slotProps: typeof slotProps;
+    inputRefWidth: typeof inputRefWidth;
+    floatingStyles: typeof floatingStyles;
     deleteButtonIconClasses: typeof deleteButtonIconClasses;
     inputClasses: typeof inputClasses;
     selectClasses: typeof selectClasses;

package/dist/types/components/BaseTagAutocomplete.vue.d.ts

@@ -4,6 +4,8 @@ import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
 import { t } from '@/i18n';
 import { Size } from '@/utils/sizes';
 declare const emit: (event: "close" | "open" | "update:modelValue" | "scrollBottom" | "typing", ...args: any[]) => void;
+declare const inputRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+declare const dropdownRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
 declare const drawer: import("vue").Ref<({
     $: import("vue").ComponentInternalInstance;
     $data: {};
@@ -341,6 +343,20 @@ declare const slotProps: {
     keywords: ComputedRef<string>;
 };
 declare const removeOption: (option: NormalizedOption) => void;
+declare const inputRefWidth: ComputedRef<number>;
+declare const floatingStyles: Readonly<import("vue").Ref<{
+    position: import("@floating-ui/utils").Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+}, {
+    position: import("@floating-ui/utils").Strategy;
+    top: string;
+    left: string;
+    transform?: string;
+    willChange?: string;
+}>>;
 declare const wrapperClass: ComputedRef<string | string[]>;
 declare const inputClasses: ComputedRef<string[]>;
 declare const selectionClass: (selection: NormalizedOption) => string;
@@ -350,13 +366,13 @@ declare var __VLS_1: {
     items: NormalizedOption[];
     removeOption: (option: NormalizedOption) => void;
     disabled: boolean;
-}, __VLS_13: {
+}, __VLS_17: {
     focus: typeof focus;
     blur: typeof blur;
     open: typeof open;
     close: typeof close;
     keywords: ComputedRef<string>;
-}, __VLS_15: {
+}, __VLS_19: {
     focus: typeof focus;
     blur: typeof blur;
     open: typeof open;
@@ -367,7 +383,7 @@ declare var __VLS_1: {
     label: string;
     selected: boolean;
     active: boolean;
-}, __VLS_17: {
+}, __VLS_21: {
     focus: typeof focus;
     blur: typeof blur;
     open: typeof open;
@@ -378,11 +394,11 @@ declare var __VLS_1: {
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     items?: (props: typeof __VLS_1) => any;
 } & {
-    empty?: (props: typeof __VLS_13) => any;
+    empty?: (props: typeof __VLS_17) => any;
 } & {
-    option?: (props: typeof __VLS_15) => any;
+    option?: (props: typeof __VLS_19) => any;
 } & {
-    footer?: (props: typeof __VLS_17) => any;
+    footer?: (props: typeof __VLS_21) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -465,6 +481,8 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     BaseAutocompleteDrawer: typeof BaseAutocompleteDrawer;
     t: typeof t;
     emit: typeof emit;
+    inputRef: typeof inputRef;
+    dropdownRef: typeof dropdownRef;
     drawer: typeof drawer;
     keywords: typeof keywords;
     autocomplete: typeof autocomplete;
@@ -478,6 +496,8 @@ declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPro
     onSelect: typeof onSelect;
     slotProps: typeof slotProps;
     removeOption: typeof removeOption;
+    inputRefWidth: typeof inputRefWidth;
+    floatingStyles: typeof floatingStyles;
     wrapperClass: typeof wrapperClass;
     inputClasses: typeof inputClasses;
     selectionClass: typeof selectionClass;

package/package.json

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

package/src/components/BaseAutocomplete.stories.js

@@ -1,5 +1,7 @@
 import { createFieldStory, options, sizes } from "../../.storybook/utils";
 import BaseAutocomplete from "./BaseAutocomplete.vue";
+import BaseCard from "./BaseCard.vue";
+import BaseCardRow from "./BaseCardRow.vue";
 import ShowValue from "@/../.storybook/components/ShowValue.vue";
 import { computed } from "vue";
 
@@ -25,13 +27,17 @@ export default {
 };
 
 const Template = (args) => ({
-  components: { BaseAutocomplete, ShowValue },
+  components: { BaseAutocomplete, BaseCard, BaseCardRow, ShowValue },
   setup() {
     const value = ref(options[2]);
     return { args, value };
   },
   template: `
-    <BaseAutocomplete v-model="value" v-bind="args"></BaseAutocomplete>
+    <BaseCard clipped>  
+      <BaseCardRow>
+        <BaseAutocomplete v-model="value" v-bind="args"></BaseAutocomplete>
+      </BaseCardRow>
+    </BaseCard>
     <ShowValue :value="value" />
   `,
 });

package/src/components/BaseAutocomplete.vue

@@ -1,6 +1,9 @@
 <template>
   <div ref="autocomplete">
-    <div class="relative z-[1]">
+    <div
+      ref="inputRef"
+      class="relative z-[1]"
+    >
       <div
         class="flex"
         :class="[
@@ -61,15 +64,19 @@
         </button>
       </div>
     </div>
-
-    <div class="relative">
+    <Teleport
+      to="body"
+      :disabled="inline"
+    >
       <div
         v-show="dropdownOpened"
-        class="w-full min-h-[110px] overflow-hidden bg-white border-slate-300 input-rounded"
+        ref="dropdownRef"
+        :style="!inline ? { ...floatingStyles, width: inputRefWidth + 'px' } : {}"
+        class="min-h-[110px] overflow-hidden bg-white border-slate-300 input-rounded"
         :class="[
           inline
             ? 'relative border-b border-x rounded-t-none'
-            : 'absolute top-1 border shadow-2xl z-menu',
+            : 'fixed border shadow-2xl z-menu',
         ]"
       >
         <BaseAutocompleteDrawer
@@ -104,7 +111,7 @@
           </template>
         </BaseAutocompleteDrawer>
       </div>
-    </div>
+    </Teleport>
   </div>
 </template>
 
@@ -122,6 +129,8 @@ import { Size, sizes } from '@/utils/sizes';
 import BaseInput from './BaseInput.vue';
 import BaseSelect from './BaseSelect.vue';
 import { twMerge } from 'tailwind-merge';
+import { autoUpdate, flip, offset, useFloating } from '@floating-ui/vue';
+import { useElementBounding } from '@vueuse/core';
 
 const props = defineProps({
   modelValue: {
@@ -266,6 +275,8 @@ onBeforeUnmount(() => {
   clearTimeout(openOfFocusTimeout);
 });
 
+const inputRef = ref<HTMLElement | null>(null);
+const dropdownRef = ref<HTMLElement | null>(null);
 const drawer = ref<InstanceType<typeof BaseAutocompleteDrawer> | null>(null);
 
 let timerId = 0;
@@ -279,8 +290,7 @@ const opened = ref(false);
 const dropdownOpened = computed(() => opened.value || props.dropdownShow == 'always');
 
 const normalizedOptions = hasOptions.normalizedOptions;
-const normalizedModelValue =
-  hasOptions.normalizedModelValue as ComputedRef<NormalizedOption | null>;
+const normalizedModelValue = hasOptions.normalizedModelValue as ComputedRef<NormalizedOption | null>;
 
 const filteredNormalizedOptions = computed((): NormalizedOption[] => {
   let options = normalizedOptions.value;
@@ -330,7 +340,7 @@ watch(
 
 useClickOutside(autocomplete, () => {
   close();
-});
+}, { includes: () => [dropdownRef] });
 
 onMounted(() => {
   window.addEventListener('keydown', onWindowKeydown);
@@ -510,6 +520,20 @@ const slotProps = {
   keywords: computed(() => keywords.value),
 };
 
+// Floating UI
+
+const inputRefRect = useElementBounding(inputRef);
+const inputRefWidth = computed(() => {
+  return inputRefRect.width.value;
+});
+
+const { floatingStyles } = useFloating(inputRef, dropdownRef, {
+  middleware: [offset(4), flip({
+    fallbackPlacements: ['right', 'bottom'],
+  })],
+  whileElementsMounted: autoUpdate,
+});
+
 // Element Classes
 
 const deleteButtonIconClasses = computed(() => {

package/src/components/BaseBelongsTo.vue

@@ -135,9 +135,10 @@ const emit = defineEmits(['update:modelValue']);
 const autocomplete = ref<InstanceType<typeof BaseAutocomplete> | null>(null);
 
 const model = computed(() => {
-  return props.modelValue
-    ? props.options.find((option) => (option[props.primaryKey] + '') === (props.modelValue + ''))
-    : null;
+  if (!props.modelValue) {
+    return null;
+  }
+  return props.options.find((option) => (option[props.primaryKey] + '') === (props.modelValue + ''));
 });
 
 function onUpdate(newModel: RawOption | null) {

package/src/components/BaseDataIterator.vue

@@ -198,7 +198,7 @@ const DEFAULT_QUERY = {
 </script>
 
 <script lang="ts" setup>
-import { cloneDeep, debounce, merge, set, sortBy } from 'lodash';
+import { cloneDeep, debounce, merge, set, sortBy, uniqueId } from 'lodash';
 import hash from 'object-hash';
 import { PropType } from 'vue';
 import {
@@ -661,6 +661,8 @@ function fetchWithoutLoading(force = false) {
   fetch(force, false);
 }
 
+let requestId = '';
+
 function fetch(force = false, showLoading = true) {
   if (willUnmount) {
     return;
@@ -682,6 +684,9 @@ function fetch(force = false, showLoading = true) {
     return;
   }
 
+  const requestIdInternal = uniqueId();
+  requestId = requestIdInternal;
+
   if (showLoading) {
     loading.value = true;
   }
@@ -691,6 +696,10 @@ function fetch(force = false, showLoading = true) {
   http
     .get(fullUrl)
     .then((response) => {
+      if (requestIdInternal !== requestId) {
+        return;
+      }
+
       data.value = response.data;
       error.value = false;
       firstLoad.value = true;

package/src/components/BaseTagAutocomplete.stories.js

@@ -2,6 +2,8 @@ import { createFieldStory, options, sizes } from "../../.storybook/utils";
 import BaseTagAutocomplete from "./BaseTagAutocomplete.vue";
 import ShowValue from "@/../.storybook/components/ShowValue.vue";
 import BaseAppSnackbars from "./BaseAppSnackbars.vue";
+import BaseCard from "./BaseCard.vue";
+import BaseCardRow from "./BaseCardRow.vue";
 
 export default {
   title: "Form/BaseTagAutocomplete",
@@ -25,15 +27,19 @@ export default {
 };
 
 const Template = (args) => ({
-  components: { BaseTagAutocomplete, ShowValue, BaseAppSnackbars },
+  components: { BaseTagAutocomplete, BaseCard, BaseCardRow, ShowValue, BaseAppSnackbars },
   setup() {
     const value = ref(null);
     return { args, value };
   },
   template: `
-    <BaseTagAutocomplete v-model="value" v-bind="args"></BaseTagAutocomplete>
-    <ShowValue :value="value" />
-    <BaseAppSnackbars />
+  <BaseCard clipped>
+    <BaseCardRow>
+      <BaseTagAutocomplete v-model="value" v-bind="args"></BaseTagAutocomplete>
+    </BaseCardRow>
+  </BaseCard>
+  <ShowValue :value="value" />
+  <BaseAppSnackbars />
   `,
 });
 

package/src/components/BaseTagAutocomplete.vue

@@ -1,6 +1,9 @@
 <template>
   <div ref="autocomplete">
-    <div :class="wrapperClass">
+    <div
+      ref="inputRef"
+      :class="wrapperClass"
+    >
       <slot
         name="items"
         :items="normalizedModelValue"
@@ -44,14 +47,19 @@
       >
     </div>
 
-    <div class="relative">
+    <Teleport
+      to="body"
+      :disabled="inline"
+    >
       <div
-        v-if="dropdownOpened"
-        class="w-full min-h-[110px] overflow-hidden bg-white border-slate-300 input-rounded"
+        v-show="dropdownOpened"
+        ref="dropdownRef"
+        :style="!inline ? { ...floatingStyles, width: inputRefWidth + 'px' } : {}"
+        class="min-h-[110px] overflow-hidden bg-white border-slate-300 input-rounded"
         :class="[
           inline
             ? 'relative border-b border-x rounded-t-none'
-            : 'absolute top-1 border shadow-2xl z-menu',
+            : 'fixed border shadow-2xl z-menu',
         ]"
       >
         <BaseAutocompleteDrawer
@@ -86,7 +94,7 @@
           </template>
         </BaseAutocompleteDrawer>
       </div>
-    </div>
+    </Teleport>
   </div>
 </template>
 
@@ -102,6 +110,8 @@ import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
 import { twMerge } from 'tailwind-merge';
 import { t } from '@/i18n';
 import { Size, sizes } from '@/utils/sizes';
+import { autoUpdate, flip, offset, useFloating } from '@floating-ui/vue';
+import { useElementBounding } from '@vueuse/core';
 
 const snackbars = useSnackbarsStore();
 
@@ -248,6 +258,8 @@ onBeforeUnmount(() => {
   clearTimeout(openOfFocusTimeout);
 });
 
+const inputRef = ref<HTMLElement | null>(null);
+const dropdownRef = ref<HTMLElement | null>(null);
 const drawer = ref<InstanceType<typeof BaseAutocompleteDrawer> | null>(null);
 
 const keywords = ref('');
@@ -286,7 +298,7 @@ const filteredNormalizedOptions = computed((): NormalizedOption[] => {
 
 useClickOutside(autocomplete, () => {
   close();
-});
+}, { includes: () => [dropdownRef] });
 
 function open() {
   // Always focus as a safety
@@ -422,6 +434,20 @@ const removeOption = (option: NormalizedOption) => {
   update(newModelValue);
 };
 
+// Floating UI
+
+const inputRefRect = useElementBounding(inputRef);
+const inputRefWidth = computed(() => {
+  return inputRefRect.width.value;
+});
+
+const { floatingStyles } = useFloating(inputRef, dropdownRef, {
+  middleware: [offset(4), flip({
+    fallbackPlacements: ['right', 'bottom'],
+  })],
+  whileElementsMounted: autoUpdate,
+});
+
 // Element Classes
 
 const wrapperClass = computed(() => {