sprintify-ui 0.5.11 → 0.6.0

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/BaseHeader.vue

@@ -78,7 +78,6 @@
             v-if="secondaryActions.length"
             :items="secondaryActions"
             size="sm"
-            :position="compactLayout ? 'bottom-right' : 'bottom-left'"
           >
             <template #button="{ open }">
               <div

package/src/components/BaseInputLabel.vue

@@ -1,7 +1,7 @@
 <template>
   <label :class="classes">
     <div
-      :ref="help ? 'info' : ''"
+      ref="labelRef"
       class="relative inline-flex"
       :class="[help ? 'cursor-help' : 'cursor-default']"
     >
@@ -18,16 +18,25 @@
         class="ml-0.5 text-red-600"
       > *</div>
     </div>
+
+    <BaseTooltip
+      v-if="help"
+      :target="labelRef"
+    >
+      <div class="text-xs">
+        {{ help }}
+      </div>
+    </BaseTooltip>
+
   </label>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
-import { useTippy } from 'vue-tippy'
-import 'tippy.js/dist/tippy.css'
+import BaseTooltip from './BaseTooltip.vue';
 
-const props = defineProps({
+defineProps({
   required: {
     default: false,
     type: Boolean,
@@ -46,12 +55,6 @@ const props = defineProps({
   },
 });
 
-const info = ref();
-const content = computed(() => { return props.help })
-
-useTippy(info, {
-  content: content,
-  placement: 'auto',
-})
+const labelRef = ref();
 
 </script>

package/src/components/BaseLayoutNotificationDropdown.vue

@@ -1,8 +1,7 @@
 <template>
   <BaseMenu
     class="inline-block"
-    :position="mobile ? 'custom' : 'bottom-left'"
-    :tw-menu="['sm:w-[320px] w-[280px]', mobile ? 'right-4' : '']"
+    :width="mobile ? 230 : 320"
   >
     <template #button="{ open }">
       <div