sprintify-ui 0.0.106 → 0.0.108

package/src/components/BaseBelongsTo.stories.js

@@ -163,6 +163,59 @@ export const SlotEmpty = (args) => {
   };
 };
 
+export const WithSelect = (args) => {
+  return {
+    components: { BaseBelongsTo, ShowValue },
+    setup() {
+      const value = ref(options[0]);
+      const selected = ref(null);
+
+      const select = {
+        options: [
+          { label: 'All', value: 'all' },
+          { label: 'Video', value: 'video' },
+          { label: 'Article', value: 'article' },
+        ],
+        labelKey: 'label',
+        valueKey: 'value',
+        onChange: (option) => {
+          selected.value = option;
+        },
+      };
+
+      const url = computed(() => {
+        if (selected.value == 'all' || !selected.value) {
+          return 'https://effettandem.com/api/content/articles';
+        }
+        return (
+          'https://effettandem.com/api/content/articles' +
+          '?type=' +
+          selected.value
+        );
+      });
+
+      return { args, value, url, selected, select };
+    },
+    template: `
+  <BaseBelongsTo
+    v-model="value"
+    v-bind="args"
+    :url="url"
+    :select="select"
+  >
+  </BaseBelongsTo>
+
+  <div class="mb-2"></div>
+
+  <p class="text-xs mb-0">Selection</p>
+  <ShowValue class="mt-0 mb-2" :value="selected" />
+  
+  <p class="text-xs mb-0">Model Value</p>
+  <ShowValue class="mt-0" :value="value" />
+`,
+  };
+};
+
 export const Field = createFieldStory({
   component: BaseBelongsTo,
   componentName: 'BaseBelongsTo',

package/src/components/BaseBelongsTo.vue

@@ -17,6 +17,7 @@
     :show-empty-option="showEmptyOption"
     :empty-option-label="emptyOptionLabel"
     :visible-focus="visibleFocus"
+    :select="select"
     @update:model-value="onUpdate"
   >
     <template #option="optionProps">
@@ -36,7 +37,7 @@ import { PropType, Ref } from 'vue';
 import { AxiosResponse } from 'axios';
 import { config } from '@/index';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
-import { Option } from '@/types';
+import { Option, SelectConfiguration } from '@/types';
 
 const props = defineProps({
   modelValue: {
@@ -113,6 +114,10 @@ const props = defineProps({
     default: undefined,
     type: String,
   },
+  select: {
+    default: undefined,
+    type: Object as PropType<SelectConfiguration | undefined>,
+  },
 });
 
 const http = config.http;

package/src/components/BaseDataIterator.vue

@@ -473,6 +473,7 @@ const onSearch = debounce((event: any) => {
 watch(
   () => route.query,
   () => {
+    // Wait for the willUnmount flag to be set
     nextTick(() => {
       onRouteChange();
     });

package/src/components/BaseDropdown.stories.js

@@ -33,7 +33,11 @@ export default {
 const Template = (args) => ({
   components: { BaseDropdown },
   setup() {
-    return { args, items };
+    const maxHeight = ref(200);
+    setInterval(() => {
+      maxHeight.value = Math.floor(Math.random() * 200) + 100;
+    }, 1000);
+    return { args, items, maxHeight };
   },
   template: `
   <div style="height: 1000px; margin-top: 300px;">
@@ -46,6 +50,7 @@ const Template = (args) => ({
           <div 
             class="bg-white shadow py-1 px-1 rounded" 
             style="max-height: 200px; overflow: auto;" 
+            :style="{maxHeight: maxHeight + 'px'}"
             data-scroll-lock-scrollable>
             <button type="button" v-for="item in items" :key="item.label" class="block text-sm px-4 py-1.5">{{ item.label }}</button>
           </div>

package/src/components/BaseDropdown.vue

@@ -7,13 +7,13 @@
       <div ref="dropdown" class="z-menu" :style="dropdownStyles">
         <Transition
           :enter-active-class="
-            animated ? 'duration-100 transition  ease-out' : ''
+            animated ? 'transition duration-200 ease-out' : ''
           "
-          enter-from-class="transform scale-90 opacity-0"
+          enter-from-class="transform scale-95 opacity-0"
           enter-to-class="transform scale-100 opacity-100"
-          :leave-active-class="animated ? 'duration-75 transition ease-in' : ''"
+          :leave-active-class="animated ? 'transition duration-75 ease-in' : ''"
           leave-from-class="transform scale-100 opacity-100"
-          leave-to-class="transform scale-90 opacity-0"
+          leave-to-class="transform scale-95 opacity-0"
         >
           <template v-if="showDropdown || keepAlive">
             <div v-show="showDropdown" class="inline-block">
@@ -34,6 +34,7 @@
 
 <script lang="ts" setup>
 import { useClickOutside } from '@/composables/clickOutside';
+import { useResizeObserver } from '@vueuse/core';
 import { throttle } from 'lodash';
 import { PropType, StyleValue } from 'vue';
 import { disableScroll, enableScroll } from '../utils';
@@ -129,13 +130,23 @@ const setBoundingBoxesDebounced = throttle(() => {
   setBoundingBoxes();
 }, 10);
 
+let buttonResizeObserver = null as any;
+let dropdownResizeObserver = null as any;
+
 function activate() {
+  buttonResizeObserver = useResizeObserver(button, setBoundingBoxesDebounced);
+  dropdownResizeObserver = useResizeObserver(
+    dropdown,
+    setBoundingBoxesDebounced
+  );
   window.addEventListener('keydown', onKeydown);
   window.addEventListener('resize', setBoundingBoxesDebounced);
   window.addEventListener('scroll', setBoundingBoxesDebounced, true);
 }
 
 function deactivate() {
+  buttonResizeObserver?.stop();
+  dropdownResizeObserver?.stop();
   window.removeEventListener('resize', setBoundingBoxesDebounced);
   window.removeEventListener('scroll', setBoundingBoxesDebounced, true);
   window.removeEventListener('keydown', onKeydown);

package/src/components/BaseTagAutocomplete.vue

@@ -60,14 +60,14 @@
             : 'absolute top-1 z-menu min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md',
         ]"
       >
-        <BaseAutocompleteDropdown
-          ref="dropdown"
+        <BaseAutocompleteDrawer
+          ref="drawer"
           :selected="normalizedModelValue"
           :options="filteredNormalizedOptions"
           :size="size"
           :loading="loading"
           :loading-bottom="loadingBottom"
-          :dropdown-class="inline ? 'pt-1' : 'p-1'"
+          :drawer-class="inline ? 'pt-1' : 'p-1'"
           :keywords="keywords"
           @select="onSelect"
           @scroll-bottom="emit('scrollBottom')"
@@ -81,7 +81,7 @@
           <template #footer="footerProps">
             <slot name="footer" v-bind="{ ...footerProps, ...slotProps }" />
           </template>
-        </BaseAutocompleteDropdown>
+        </BaseAutocompleteDrawer>
       </div>
     </div>
   </div>
@@ -95,7 +95,7 @@ import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
 import { useClickOutside } from '@/composables/clickOutside';
 import { useNotificationsStore } from '@/stores/notifications';
-import BaseAutocompleteDropdown from './BaseAutocompleteDropdown.vue';
+import BaseAutocompleteDrawer from './BaseAutocompleteDrawer.vue';
 
 const i18n = useI18n();
 const notifications = useNotificationsStore();
@@ -190,8 +190,8 @@ const hasOptions = useHasOptions(
   computed(() => true)
 );
 
-const dropdown = ref(null) as Ref<InstanceType<
-  typeof BaseAutocompleteDropdown
+const drawer = ref(null) as Ref<InstanceType<
+  typeof BaseAutocompleteDrawer
 > | null>;
 
 const keywords = ref('');
@@ -259,7 +259,7 @@ const onTextInput = (event: Event) => {
 const onTextKeydown = (event: KeyboardEvent) => {
   const key = event.key;
 
-  dropdown.value?.onKeydown(event);
+  drawer.value?.onKeydown(event);
 
   // Prevent default behavior for up/down arrows
 

package/src/types/index.ts

@@ -197,3 +197,10 @@ export interface NotificationsConfig {
   footerLabel?: string;
   footerTo?: RouteLocationRaw;
 }
+
+export interface SelectConfiguration {
+  options: Option[];
+  valueKey: string;
+  labelKey: string;
+  onChange: (value: OptionValue) => void;
+}