sprintify-ui 0.5.11 → 0.6.0

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

@@ -160,7 +160,6 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-
   max: {
     default: undefined,
     type: Number,
@@ -185,9 +184,13 @@ const props = defineProps({
     default: 'focus',
     type: String as PropType<'focus' | 'always'>,
   },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
   twContainer: {
     default: '',
-    type: [String, Array] as PropType<string|string[]>,
+    type: [String, Array] as PropType<string | string[]>,
   },
 });
 
@@ -214,6 +217,20 @@ const hasOptions = useHasOptions(
   computed(() => true)
 );
 
+let openOfFocusTimeout = 0;
+
+onMounted(() => {
+  openOfFocusTimeout = setTimeout(() => {
+    if (props.focusOnMount) {
+      open();
+    }
+  }, 10)
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(openOfFocusTimeout);
+});
+
 const drawer = ref<InstanceType<typeof BaseAutocompleteDrawer> | null>(null);
 
 const keywords = ref('');

package/src/components/BaseTagAutocompleteFetch.vue

@@ -12,6 +12,7 @@
     :has-error="hasError"
     :max="max"
     :filter="() => true"
+    :focus-on-mount="focusOnMount"
     @open="onOpen"
     @typing="onTyping"
     @scroll-bottom="scrollBottom"
@@ -111,6 +112,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  focusOnMount: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 defineEmits(['update:modelValue', 'typing', 'focus', 'scrollBottom']);

package/src/components/BaseTooltip.vue

@@ -0,0 +1,40 @@
+<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';
+
+const props = defineProps<{
+  target: HTMLElement | null;
+}>();
+
+const targetInternal = computed(() => props.target ?? null);
+
+const tooltipRef = ref<HTMLElement | null>(null)
+
+const { floatingStyles, showTooltip } = useTooltip(targetInternal, tooltipRef);
+
+</script>

package/src/components/index.ts

@@ -18,7 +18,6 @@ import BaseButtonGroup from './BaseButtonGroup.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
 import BaseCharacterCounter from './BaseCharacterCounter.vue';
-import BaseClickOutside from './BaseClickOutside.vue';
 import BaseClipboard from './BaseClipboard.vue';
 import BaseCalendar from './BaseCalendar.vue';
 import BaseColor from './BaseColor.vue';
@@ -118,7 +117,6 @@ export {
   BaseCard,
   BaseCardRow,
   BaseCharacterCounter,
-  BaseClickOutside,
   BaseClipboard,
   BaseCalendar,
   BaseColor,

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 };

package/dist/types/src/components/BaseClickOutside.vue.d.ts

@@ -1,28 +0,0 @@
-import { MaybeElement } from '@vueuse/core';
-import { MaybeRef } from '@vueuse/shared';
-import { PropType } from 'vue';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    includes: {
-        type: PropType<(string | MaybeRef<MaybeElement>)[]>;
-        default: () => never[];
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    clickOutside: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    includes: {
-        type: PropType<(string | MaybeRef<MaybeElement>)[]>;
-        default: () => never[];
-    };
-}>> & {
-    onClickOutside?: ((...args: any[]) => any) | undefined;
-}, {
-    includes: (string | MaybeRef<MaybeElement>)[];
-}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/src/components/BaseClickOutside.vue

@@ -1,37 +0,0 @@
-<template>
-  <div ref="root">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useClickOutside } from '@/composables/clickOutside';
-import { MaybeElement } from '@vueuse/core';
-import { MaybeRef } from '@vueuse/shared';
-import { PropType } from 'vue';
-
-const props = defineProps({
-  includes: {
-    type: Array as PropType<(MaybeRef<MaybeElement> | string)[]>,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['clickOutside']);
-
-const root = ref<null | HTMLElement>(null);
-
-const includes = [] as (MaybeRef<MaybeElement> | string)[];
-
-function addInclude(include: MaybeRef<MaybeElement> | string) {
-  includes.push(include);
-}
-
-provide('clickOutside:addInclude', addInclude);
-
-useClickOutside(root, () => emit('clickOutside'), {
-  includes: () => {
-    return [...includes, ...props.includes];
-  },
-});
-</script>