sprintify-ui 0.5.10 → 0.5.12

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
@@ -29,7 +28,7 @@
 
     <template #items>
       <template
-        v-for="notification in notificationsConfig.items"
+        v-for="notification in notificationsConfig.items.slice(0, 4)"
         :key="notification.id + 'link'"
       >
         <BaseLayoutNotificationItem
@@ -105,8 +104,7 @@ const props = defineProps({
 });
 
 const unreadNotifications = computed(() => {
-  return props.notificationsConfig.items
-    .filter(i => !i.read);
+  return props.notificationsConfig.items.filter(i => !i.read);
 });
 
 const breakpoints = useBreakpoints();

package/src/components/BaseMenu.vue

@@ -3,9 +3,8 @@
     v-slot="{ open }"
     as="div"
     class="text-left"
-    :class="[position == 'custom' ? 'static' : 'relative']"
   >
-    <div>
+    <div ref="buttonWrapRef">
       <MenuButton :class="twButton">
         <slot
           name="button"
@@ -14,104 +13,116 @@
       </MenuButton>
     </div>
 
-    <transition
-      enter-active-class="transition duration-200 ease-out"
-      enter-from-class="transform scale-95 opacity-0"
-      enter-to-class="transform scale-100 opacity-100"
-      leave-active-class="transition duration-75 ease-in"
-      leave-from-class="transform scale-100 opacity-100"
-      leave-to-class="transform scale-95 opacity-0"
-    >
-      <MenuItems
-        :style="menuPositionStyles"
-        :class="twMerge('w-48', twMenu)"
-        class="absolute z-menu mt-2 rounded-md bg-white p-1 shadow-lg outline-none ring-1 ring-black ring-opacity-10 focus:outline-none"
+    <Teleport to="body">
+      <div
+        ref="menuItemsRef"
+        :style="{
+          ...floatingStyles,
+          width: `${width}px`,
+        }"
+        class="fixed top-0 left-0 z-menu"
       >
-        <slot
-          name="items"
-          :items="items"
+        <transition
+          enter-active-class="transition duration-200 ease-out"
+          enter-from-class="transform -translate-y-2 scale-95 opacity-0"
+          enter-to-class="transform translate-y-0 scale-100 opacity-100"
+          leave-active-class="transition duration-75 ease-in"
+          leave-from-class="transform translate-y-0 scale-100 opacity-100"
+          leave-to-class="transform -translate-y-2 scale-95 opacity-0"
         >
-          <template
-            v-for="item in items"
-            :key="item.label + 'link'"
+          <MenuItems
+            :style="{
+              width: `${width}px`,
+            }"
+            :class="twMerge('rounded-md bg-white p-1 shadow-lg outline-none ring-1 ring-black ring-opacity-10 focus:outline-none', twMenu)"
           >
-            <div
-              v-if="item.meta?.line"
-              class="-mx-1 my-1 flex h-px bg-slate-200"
-            />
-
-            <MenuItem
-              v-else-if="item.to"
-              v-slot="{ active, close }"
+            <slot
+              name="items"
+              :items="items"
             >
-              <RouterLink
-                :to="item.to"
-                @mouseup="close"
+              <template
+                v-for="item in items"
+                :key="item.label + 'link'"
               >
-                <slot
-                  name="item"
-                  :item="item"
+                <div
+                  v-if="item.meta?.line"
+                  class="-mx-1 my-1 flex h-px bg-slate-200"
+                />
+
+                <MenuItem
+                  v-else-if="item.to"
+                  v-slot="{ active, close }"
                 >
-                  <BaseMenuItem
-                    :label="item.label"
-                    :count="item.count"
-                    :icon="item.icon"
-                    :color="item.color"
-                    :active="active"
-                    :size="size"
-                  />
-                </slot>
-              </RouterLink>
-            </MenuItem>
+                  <RouterLink
+                    :to="item.to"
+                    @mouseup="close"
+                  >
+                    <slot
+                      name="item"
+                      :item="item"
+                    >
+                      <BaseMenuItem
+                        :label="item.label"
+                        :count="item.count"
+                        :icon="item.icon"
+                        :color="item.color"
+                        :active="active"
+                        :size="size"
+                      />
+                    </slot>
+                  </RouterLink>
+                </MenuItem>
 
-            <MenuItem
-              v-else-if="item.href"
-              v-slot="{ active }"
-              as="a"
-              :href="item.href"
-            >
-              <slot
-                name="item"
-                :item="item"
-              >
-                <BaseMenuItem
-                  :label="item.label"
-                  :count="item.count"
-                  :icon="item.icon"
-                  :color="item.color"
-                  :active="active"
-                  :size="size"
-                />
-              </slot>
-            </MenuItem>
+                <MenuItem
+                  v-else-if="item.href"
+                  v-slot="{ active }"
+                  as="a"
+                  :href="item.href"
+                >
+                  <slot
+                    name="item"
+                    :item="item"
+                  >
+                    <BaseMenuItem
+                      :label="item.label"
+                      :count="item.count"
+                      :icon="item.icon"
+                      :color="item.color"
+                      :active="active"
+                      :size="size"
+                    />
+                  </slot>
+                </MenuItem>
 
-            <MenuItem
-              v-else-if="item.action"
-              v-slot="{ active }"
-              as="button"
-              type="button"
-              class="w-full"
-              @click="item.action"
-            >
-              <slot
-                name="item"
-                :item="item"
-                :active="active"
-              >
-                <BaseMenuItem
-                  :label="item.label"
-                  :count="item.count"
-                  :icon="item.icon"
-                  :color="item.color"
-                  :active="active"
-                  :size="size"
-                />
-              </slot>
-            </MenuItem>
-          </template>
-        </slot>
-      </MenuItems>
-    </transition>
+                <MenuItem
+                  v-else-if="item.action"
+                  v-slot="{ active }"
+                  as="button"
+                  type="button"
+                  class="w-full"
+                  @click="item.action"
+                >
+                  <slot
+                    name="item"
+                    :item="item"
+                    :active="active"
+                  >
+                    <BaseMenuItem
+                      :label="item.label"
+                      :count="item.count"
+                      :icon="item.icon"
+                      :color="item.color"
+                      :active="active"
+                      :size="size"
+                    />
+                  </slot>
+                </MenuItem>
+              </template>
+            </slot>
+          </MenuItems>
+        </transition>
+      </div>
+    </Teleport>
   </Menu>
 </template>
 
@@ -121,20 +132,25 @@ import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
 import BaseMenuItem from './BaseMenuItem.vue';
 import { twMerge } from 'tailwind-merge';
 import { ActionItem } from '@/types';
+import { autoUpdate, flip, offset, useFloating } from '@floating-ui/vue';
 
 const props = defineProps({
   items: {
     default: undefined,
     type: Array as PropType<ActionItem[]>,
   },
-  position: {
-    default: 'bottom-left',
-    type: String as PropType<'bottom-left' | 'bottom-right' | 'custom'>,
+  placement: {
+    default: 'bottom-end',
+    type: String as PropType<'bottom-end' | 'bottom-start' | 'bottom' | 'top' | 'top-start' | 'top-end'>,
   },
   size: {
     default: 'sm',
     type: String as PropType<'xs' | 'sm' | 'md'>,
   },
+  width: {
+    default: 200,
+    type: Number,
+  },
   twMenu: {
     default: '',
     type: [String, Array] as PropType<string | string[]>,
@@ -145,21 +161,15 @@ const props = defineProps({
   },
 });
 
-const menuPositionStyles = computed(() => {
-  if (props.position == 'custom') {
-    return {};
-  }
-  if (props.position == 'bottom-left') {
-    return {
-      origin: 'top-right',
-      right: '0',
-    };
-  }
-  if (props.position == 'bottom-right') {
-    return {
-      origin: 'top-left',
-      left: '0',
-    };
-  }
+const buttonWrapRef = ref<HTMLElement | null>(null);
+const menuItemsRef = ref<InstanceType<typeof MenuItems> | null>(null);
+
+const { floatingStyles } = useFloating(buttonWrapRef, menuItemsRef, {
+  placement: props.placement,
+  middleware: [offset(4), flip({
+    fallbackPlacements: ['right', 'bottom'],
+  })],
+  whileElementsMounted: autoUpdate,
 });
+
 </script>

package/src/components/BaseTooltip.vue

@@ -0,0 +1,44 @@
+<template>
+  <Teleport to="body">
+    <div
+      ref="tooltipRef"
+      class="fixed top-0 left-0 pointer-events-none z-tooltip"
+      :style="floatingStyles"
+    >
+      <transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="transform scale-90 opacity-0"
+        enter-to-class="transform scale-100 opacity-100"
+        leave-active-class="transition duration-75 ease-in"
+        leave-from-class="transform scale-100 opacity-100"
+        leave-to-class="transform scale-90 opacity-0"
+      >
+        <div
+          v-if="showTooltip"
+          class="bg-white shadow-md ring-1 ring-black ring-opacity-10 text-slate-900 rounded-md pt-1.5 pb-2 px-3"
+        >
+          <slot />
+        </div>
+      </transition>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useTooltip } from '@/composables/tooltip';
+import { PropType } from 'vue';
+
+const props = defineProps({
+    target: {
+        required: true,
+        type: Object as PropType<HTMLElement | null>,
+    }
+});
+
+const targetInternal = computed(() => props.target ?? null);
+
+const tooltipRef = ref<HTMLElement | null>(null)
+
+const { floatingStyles, showTooltip } = useTooltip(targetInternal, tooltipRef);
+
+</script>

package/src/composables/tooltip.ts

@@ -0,0 +1,43 @@
+import { UseFloatingOptions, MaybeElement, UseFloatingReturn, autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/vue";
+import { unrefElement, useEventListener, } from "@vueuse/core";
+
+type ReturnType = UseFloatingReturn & {
+    showTooltip: Ref<boolean>;
+};
+
+import { Ref } from "vue";
+
+function useTooltip(
+    reference: Readonly<Ref<MaybeElement<any>>>,
+    floating: Readonly<Ref<MaybeElement<HTMLElement>>>,
+    options: UseFloatingOptions | undefined = undefined
+): ReturnType {
+
+    const show = ref(false);
+
+    const elementRef = computed(() => {
+        return unrefElement(reference);
+    });
+
+    useEventListener(elementRef, 'mouseenter', () => {
+        show.value = true;
+    });
+
+    useEventListener(elementRef, 'mouseleave', () => {
+        show.value = false;
+    });
+
+    const config = {
+        placement: 'top',
+        middleware: [offset(6), flip(), shift()],
+        whileElementsMounted: autoUpdate,
+    };
+
+    const useFloatingReturn = useFloating(reference, floating, Object.assign(config, options));
+
+    return {
+        ...useFloatingReturn,
+        showTooltip: show,
+    };
+}
+export { useTooltip };