sprintify-ui 0.5.12 → 0.6.1

package/src/components/BaseDisplayRelativeTime.vue

@@ -1,26 +1,22 @@
 <template>
-  <component
-    :is="as"
-    ref="tooltipRef"
+  <BaseTooltip
+    :visible="tooltip"
+    :text="tooltipContent"
   >
-    <slot
-      name="default"
-      :readable-date="readableDate"
+    <component
+      :is="as"
+      ref="tooltipRef"
     >
-      <span class="text-xs text-slate-600">
-        {{ readableDate }}
-      </span>
-    </slot>
-
-    <BaseTooltip
-      v-if="tooltip"
-      :target="tooltipRef"
-    >
-      <div class="text-xs">
-        {{ tooltipContent }}
-      </div>
-    </BaseTooltip>
-  </component>
+      <slot
+        name="default"
+        :readable-date="readableDate"
+      >
+        <span class="text-xs text-slate-600">
+          {{ readableDate }}
+        </span>
+      </slot>
+    </component>
+  </BaseTooltip>
 </template>
 
 <script lang="ts" setup>
@@ -52,6 +48,11 @@ const props = defineProps({
 const tooltipRef = ref();
 
 const tooltipContent = computed(() => {
+
+  if (!props.tooltip) {
+    return null;
+  }
+
   return DateTime.fromISO(props.value)
     .setLocale(useI18nStore().locale)
     .toLocaleString(DateTime.DATETIME_MED);

package/src/components/BaseDropdown.stories.js

@@ -3,7 +3,6 @@ import BaseAutocomplete from './BaseAutocomplete.vue';
 import BaseModalCenter from './BaseModalCenter.vue';
 import BaseDropdown from './BaseDropdown.vue';
 import BaseDatePicker from './BaseDatePicker.vue';
-import BaseClickOutside from './BaseClickOutside.vue';
 import { options } from '../../.storybook/utils';
 
 const items = [];
@@ -21,13 +20,12 @@ export default {
     placement: {
       control: {
         type: 'select',
-        options: ['top-start', 'top-end', 'bottom-start', 'bottom-end'],
       },
+      options: ['top-start', 'top-end', 'bottom-start', 'bottom-end'],
     },
   },
   args: {
     placement: 'bottom-start',
-    padding: 8,
   },
 };
 
@@ -73,40 +71,23 @@ export const WithAutocomplete = (args) => ({
   components: { BaseDropdown, BaseAutocomplete, BaseBadge },
   setup() {
     const value = ref(null);
-    const autocomplete = ref(null);
-
-    function onOpen() {
-      if (autocomplete.value) {
-        setTimeout(() => {
-          autocomplete.value.open();
-        }, 1);
-      }
-    }
-
-    function onClose() {
-      setTimeout(() => {
-        if (autocomplete.value) {
-          autocomplete.value.setKeywords('');
-        }
-      }, 10);
-    }
 
     function onUpdate(v, close) {
       if (v) {
         close();
       }
     }
-    return { args, options, value, onOpen, onClose, onUpdate, autocomplete };
+
+    return { args, options, value, onUpdate };
   },
   template: `
-    <BaseDropdown @open="onOpen" @close="onClose" v-bind="args">
+    <BaseDropdown v-bind="args">
       <template #button>
         <BaseBadge>{{ value ? value.label : 'Select a Character' }}</BaseBadge>
       </template>
       <template #dropdown="{close}">
-        <div class="bg-white shadow border border-slate-300 py-1 px-1 rounded" style="min-width: 250px">
+        <div class="bg-white shadow-lg rounded-md border py-2 px-2" style="min-width: 250px">
           <BaseAutocomplete
-            ref="autocomplete"
             required
             v-model="value"
             label-key="label" 
@@ -117,6 +98,7 @@ export const WithAutocomplete = (args) => ({
             :visibleFocus="false"
             dropdownShow="always"
             :showModelValue="false"
+            focus-on-mount
             @update:modelValue="onUpdate($event, close)"
           ></BaseAutocomplete>
         </div>
@@ -128,37 +110,8 @@ export const WithAutocomplete = (args) => ({
 WithAutocomplete.args = {
   animated: true,
   placement: 'bottom-start',
-  padding: 3,
 };
 
-export const ModalWithScroll = (args) => ({
-  components: { BaseDropdown, BaseModalCenter },
-  setup() {
-    return { args, items };
-  },
-  template: `
-  <BaseModalCenter :model-value="true">
-    <div class="p-10 bg-white">
-      <BaseDropdown v-bind="args">
-        <template #button>
-          <div class="btn btn-primary">Click me</div>
-        </template>
-        <template #dropdown>
-          <div 
-            class="bg-white shadow py-1 px-1 rounded" 
-            style="max-height: 200px; overflow: auto;" 
-            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>
-        </template>
-      </BaseDropdown>
-
-      <div style="height: 3000px;"></div>
-    </div>
-  </BaseModalCenter>
-  `,
-});
-
 export const WithDatePicker = (args) => ({
   components: { BaseDropdown, BaseDatePicker },
   setup() {
@@ -171,7 +124,7 @@ export const WithDatePicker = (args) => ({
       <div class="btn btn-primary">Click me</div>
     </template>
     <template #dropdown>
-      <div class="bg-white shadow-lg rounded border p-2">
+      <div class="bg-white shadow-lg rounded-md ring-1 ring-black ring-opacity-10 p-2">
         <BaseDatePicker v-model="date" :show-input="true" inline></BaseDatePicker>
       </div>
     </template>
@@ -180,31 +133,35 @@ export const WithDatePicker = (args) => ({
 });
 
 WithDatePicker.args = {
+  animated: true,
   placement: 'bottom-start',
 };
 
-export const WithinClickOutside = (args) => ({
-  components: { BaseDropdown, BaseClickOutside },
+export const ModalWithScroll = (args) => ({
+  components: { BaseDropdown, BaseModalCenter },
   setup() {
-    function onClickOutside() {
-      alert('click outside');
-    }
-    return { args, items, onClickOutside };
+    const open = ref(true);
+    return { args, items, open };
   },
   template: `
-  <BaseClickOutside @clickOutside="onClickOutside">
-    <div class="bg-slate-200 shadow-md min-h-[100px] p-3">
+  <BaseModalCenter v-model="open">
+    <div class="p-10 bg-white">
       <BaseDropdown v-bind="args">
         <template #button>
           <div class="btn btn-primary">Click me</div>
         </template>
         <template #dropdown>
-          <div class="bg-white shadow-lg rounded border p-2 w-[260px]">
-            ...
+          <div 
+            class="bg-white shadow py-1 px-1 rounded" 
+            style="max-height: 200px; overflow: auto;" 
+            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>
         </template>
       </BaseDropdown>
+
+      <div style="height: 3000px;"></div>
     </div>
-  </BaseClickOutside>
+  </BaseModalCenter>
   `,
 });

package/src/components/BaseDropdown.vue

@@ -1,280 +1,74 @@
 <template>
-  <div>
-    <button
-      ref="button"
-      type="button"
-      @click="toggle()"
-    >
-      <slot name="button" />
-    </button>
+  <Popover v-slot="{ open }">
+    <PopoverButton class="outline-none">
+      <div ref="buttonRef">
+        <slot name="button" />
+      </div>
+    </PopoverButton>
+    
     <Teleport to="body">
       <div
-        ref="dropdown"
-        class="z-menu"
-        :style="dropdownStyles"
+        ref="dropdownRef"
+        :style="floatingStyles"
+        class="fixed top-0 left-0 z-menu"
       >
         <Transition
-          :enter-active-class="
-            animated ? 'transition duration-200 ease-out' : ''
-          "
+          :enter-active-class="animated ? 'transition duration-200 ease-out' : ''"
           enter-from-class="transform scale-95 opacity-0"
           enter-to-class="transform scale-100 opacity-100"
           :leave-active-class="animated ? 'transition duration-75 ease-in' : ''"
           leave-from-class="transform scale-100 opacity-100"
           leave-to-class="transform scale-95 opacity-0"
         >
-          <template v-if="showDropdown || keepAlive">
-            <div
-              v-show="showDropdown"
-              class="inline-block"
+          <div v-if="open || keepAlive">
+            <PopoverPanel
+              v-show="open"
+              v-slot="{ close }"
+              static
             >
               <slot
                 name="dropdown"
-                :show-dropdown="showDropdown"
                 :close="close"
-                :open="open"
-                :toggle="toggle"
+                :opened="open"
               />
-            </div>
-          </template>
+            </PopoverPanel>
+          </div>
         </Transition>
       </div>
     </Teleport>
-  </div>
+  </Popover>
 </template>
 
 <script lang="ts" setup>
-import { useClickOutside } from '@/composables/clickOutside';
-import { MaybeElement, MaybeRef, useResizeObserver } from '@vueuse/core';
-import { throttle } from 'lodash';
-import { PropType, StyleValue } from 'vue';
-import { disableScroll, enableScroll } from '../utils';
+import { autoUpdate, offset, flip, shift, useFloating, Placement } from '@floating-ui/vue';
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
+import { unrefElement } from '@vueuse/core';
+import { PropType } from 'vue';
+
+const buttonRef = ref<InstanceType<typeof PopoverButton> | null>(null);
+const dropdownRef = ref<HTMLElement | null>(null);
 
-const button = ref<HTMLElement | null>(null);
-const dropdown = ref<HTMLElement | null>(null);
+const buttonRefEl = computed(() => unrefElement(buttonRef));
 
-const showDropdown = ref(false);
 const props = defineProps({
-  placement: {
-    type: String as PropType<
-      'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'
-    >,
-    default() {
-      return 'bottom-start';
-    },
-  },
-  padding: {
-    default: 8,
-    type: Number,
-  },
   animated: {
-    default: false,
+    default: true,
     type: Boolean,
   },
   keepAlive: {
-    default: true,
+    default: false,
     type: Boolean,
   },
-});
-
-const emit = defineEmits(['close', 'open']);
-
-const buttonX = ref(0);
-const buttonY = ref(0);
-const buttonWidth = ref(0);
-const buttonHeight = ref(0);
-
-const dropdownX = ref(0);
-const dropdownY = ref(0);
-const dropdownWidth = ref(0);
-const dropdownHeight = ref(0);
-
-function setBoundingBoxes() {
-  if (button.value) {
-    const { y, x, height, width } = button.value.getBoundingClientRect();
-    buttonX.value = x;
-    buttonY.value = y;
-    buttonWidth.value = width;
-    buttonHeight.value = height;
-  }
-
-  if (dropdown.value) {
-    const { y, x, height, width } = dropdown.value.getBoundingClientRect();
-    dropdownX.value = x;
-    dropdownY.value = y;
-    dropdownWidth.value = width;
-    dropdownHeight.value = height;
-  }
-}
-
-function toggle() {
-  if (showDropdown.value) {
-    close();
-  } else {
-    open();
-  }
-}
-
-function open() {
-  activate();
-  showDropdown.value = true;
-  nextTick(() => {
-    setBoundingBoxes();
-    disableScroll();
-    emit('open');
-  });
-}
-
-function close() {
-  deactivate();
-  showDropdown.value = false;
-  enableScroll();
-  emit('close');
-}
-
-function onKeydown(event: KeyboardEvent) {
-  if (event.code == 'Escape') {
-    if (showDropdown.value) {
-      close();
-    }
-  }
-}
-
-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);
-}
-
-useClickOutside(
-  dropdown,
-  () => {
-    if (showDropdown.value) {
-      close();
-    }
-  },
-  { includes: () => [button] }
-);
-
-const placementInternal = computed(() => {
-  // vertical
-  const spaceTop = buttonY.value - props.padding;
-  const spaceBottom =
-    window.innerHeight - buttonY.value - buttonHeight.value - props.padding;
-
-  const tooTallForTop = spaceTop < dropdownHeight.value;
-  const tooTallForBottom = spaceBottom < dropdownHeight.value;
-
-  let verticalPreference = props.placement.split('-')[0];
-
-  if (tooTallForTop && !tooTallForBottom) {
-    verticalPreference = 'bottom';
-  } else if (!tooTallForTop && tooTallForBottom) {
-    verticalPreference = 'top';
-  } else if (tooTallForTop && tooTallForBottom) {
-    if (spaceTop > spaceBottom) {
-      verticalPreference = 'top';
-    } else {
-      verticalPreference = 'bottom';
-    }
-  }
-
-  // horizontal
-  const spaceStart = buttonX.value + buttonWidth.value;
-  const spaceEnd = window.innerWidth - buttonX.value;
-
-  const tooLargeForStart = spaceStart < dropdownWidth.value;
-  const tooLargeForEnd = spaceEnd < dropdownWidth.value;
-
-  let horizontalPreference = props.placement.split('-')[1];
-
-  if (tooLargeForStart && !tooLargeForEnd) {
-    horizontalPreference = 'start';
-  } else if (!tooLargeForStart && tooLargeForEnd) {
-    horizontalPreference = 'end';
-  } else if (tooLargeForStart && tooLargeForEnd) {
-    if (spaceStart > spaceEnd) {
-      horizontalPreference = 'end';
-    } else {
-      horizontalPreference = 'start';
-    }
-  }
-
-  return `${verticalPreference}-${horizontalPreference}`;
-});
-
-const dropdownStyles = computed((): StyleValue => {
-  let top = buttonY.value;
-
-  if (
-    placementInternal.value == 'bottom-start' ||
-    placementInternal.value == 'bottom-end'
-  ) {
-    top += buttonHeight.value;
-    top += props.padding;
-  }
-
-  if (
-    placementInternal.value == 'top-start' ||
-    placementInternal.value == 'top-end'
-  ) {
-    top -= dropdownHeight.value;
-    top -= props.padding;
-  }
-
-  const styles = {
-    position: 'fixed',
-    top: `${top}px`,
-  } as any;
-
-  if (
-    placementInternal.value == 'bottom-end' ||
-    placementInternal.value == 'top-end'
-  ) {
-    styles.left = `${
-      buttonX.value + buttonWidth.value - dropdownWidth.value
-    }px`;
-  } else {
-    styles.left = `${buttonX.value}px`;
+  placement: {
+    default: 'bottom-end',
+    type: String as PropType<Placement>,
   }
-
-  return styles as StyleValue;
 });
 
-const addClickOutsideInclude = inject('clickOutside:addInclude', () => {
-  return;
-}) as (include: MaybeRef<MaybeElement> | string) => void;
-
-addClickOutsideInclude(dropdown);
-
-onBeforeUnmount(() => {
-  close();
-  deactivate();
+const { floatingStyles } = useFloating(buttonRefEl, dropdownRef, {
+  placement: props.placement,
+  middleware: [offset(6), flip(), shift()],
+  whileElementsMounted: autoUpdate,
 });
 
-defineExpose({
-  open,
-  close,
-  toggle,
-});
 </script>

package/src/components/BaseDropdownAutocomplete.vue

@@ -3,9 +3,6 @@
     :animated="true"
     :keep-alive="false"
     :placement="placement"
-    :padding="padding"
-    @open="onOpen"
-    @close="onClose"
   >
     <template #button="buttonProps">
       <slot
@@ -16,7 +13,7 @@
     </template>
     <template #dropdown="{ close }">
       <div
-        class="inline-block w-[320px] overflow-hidden rounded-md border border-slate-300 bg-white px-1 pt-1 shadow-lg"
+        class="inline-block w-[320px] overflow-hidden rounded-md ring-1 ring-black ring-opacity-10 bg-white px-2 pt-2 shadow-lg"
       >
         <component
           :is="componentName"
@@ -29,6 +26,7 @@
           :inline="true"
           :required="required"
           :select="select"
+          :focus-on-mount="true"
           dropdown-show="always"
           @update:model-value="onUpdate($event, close)"
         >
@@ -69,6 +67,7 @@ import BaseAutocomplete from './BaseAutocomplete.vue';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
 import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
 import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
+import { Placement } from '@floating-ui/vue';
 
 const props = defineProps({
   modelValue: {
@@ -110,14 +109,8 @@ const props = defineProps({
     type: String,
   },
   placement: {
-    type: String as PropType<
-      'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'
-    >,
-    default: undefined,
-  },
-  padding: {
+    type: String as PropType<Placement>,
     default: undefined,
-    type: Number,
   },
   select: {
     default: undefined,
@@ -125,7 +118,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:model-value', 'close']);
+const emit = defineEmits(['update:model-value']);
 
 const componentName = computed<any>(() => {
   if (props.multiple) {
@@ -180,24 +173,6 @@ watch(
   { immediate: true, deep: true }
 );
 
-function onOpen() {
-  nextTick(() => {
-    setTimeout(() => {
-      autocomplete.value?.open();
-    }, 1);
-  });
-}
-
-function onClose() {
-  nextTick(() => {
-    setTimeout(() => {
-      autocomplete.value?.setKeywords('');
-    }, 1);
-  });
-
-  emit('close');
-}
-
 function onUpdate(
   value: Option | Option[] | null | undefined,
   close: () => void

package/src/components/BaseInputLabel.vue

@@ -7,27 +7,21 @@
     >
       <div> {{ label }}</div>
 
-      <BaseIcon
+      <BaseTooltip
         v-if="help"
-        class="block relative text-slate-900 -bottom-[3px] ml-1 mr-1 h-[13px] w-[13px]"
-        icon="mdi:information-outline"
-      />
+        :text="help"
+      >
+        <BaseIcon
+          class="block relative text-slate-900 -bottom-[3px] ml-1 mr-1 h-[13px] w-[13px]"
+          icon="mdi:information-outline"
+        />
+      </BaseTooltip>
 
       <div
         v-if="required"
         class="ml-0.5 text-red-600"
       > *</div>
     </div>
-
-    <BaseTooltip
-      v-if="help"
-      :target="labelRef"
-    >
-      <div class="text-xs">
-        {{ help }}
-      </div>
-    </BaseTooltip>
-
   </label>
 </template>