sprintify-ui 0.11.24 → 0.11.26

package/dist/types/components/BaseLoadingCover.vue.d.ts

@@ -42,6 +42,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: number;
         type: NumberConstructor;
     };
+    /**
+     * Maximum distance in pixels from the top of the loading cover for the spinner center.
+     */
+    maxSpinnerTopOffset: {
+        default: number;
+        type: NumberConstructor;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Show/Hide the loading cover
@@ -85,6 +92,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: number;
         type: NumberConstructor;
     };
+    /**
+     * Maximum distance in pixels from the top of the loading cover for the spinner center.
+     */
+    maxSpinnerTopOffset: {
+        default: number;
+        type: NumberConstructor;
+    };
 }>> & Readonly<{}>, {
     size: "sm" | "lg";
     duration: string;
@@ -92,5 +106,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     modelValue: boolean;
     twIcon: string;
     twBackdrop: string;
+    maxSpinnerTopOffset: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/composables/tooltip.d.ts

@@ -3,5 +3,5 @@ type ReturnType = UseFloatingReturn & {
     showTooltip: Ref<boolean>;
 };
 import { Ref } from "vue";
-declare function useTooltip(reference: Readonly<Ref<MaybeElement<any>>>, floating: Readonly<Ref<MaybeElement<HTMLElement>>>, interactive?: boolean, delay?: number, options?: UseFloatingOptions | undefined, offset?: number): ReturnType;
+declare function useTooltip(reference: Readonly<Ref<MaybeElement<any>>>, floating: Readonly<Ref<MaybeElement<HTMLElement>>>, interactive?: boolean, delay?: number, options?: UseFloatingOptions | undefined, offset?: number, arrowRef?: Readonly<Ref<MaybeElement<HTMLElement>>>): ReturnType;
 export { useTooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.24",
+  "version": "0.11.26",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseLoadingCover.stories.js

@@ -24,7 +24,7 @@ const Template = (args) => ({
     return { args };
   },
   template: `
-    <div class="relative bg-slate-100 p-6 py-10">
+    <div class="relative bg-slate-100 p-6 h-[1000px] border border-slate-700 border-dashed">
       <p class="text-center text-slate-700">Non dolor consectetur et occaecat.</p>
       <BaseLoadingCover v-bind="args" />
     </div>

package/src/components/BaseLoadingCover.vue

@@ -9,18 +9,23 @@
   >
     <div
       v-if="showSpinner"
-      class="absolute inset-0 flex h-full w-full items-center justify-center"
+      class="absolute inset-0 h-full w-full"
     >
       <div :class="twMerge('absolute h-full w-full bg-white', twBackdrop)" />
 
-      <BaseSpinnerSmall
-        v-if="size == 'sm'"
-        :class="twMerge('h-10 w-10 text-blue-500', twIcon)"
-      />
-      <BaseSpinnerLarge
-        v-else-if="size == 'lg'"
-        :class="twMerge('h-10 w-10 text-blue-500', twIcon)"
-      />
+      <div
+        class="absolute left-1/2 -translate-x-1/2 -translate-y-1/2"
+        :style="{ top: spinnerTopOffset }"
+      >
+        <BaseSpinnerSmall
+          v-if="size == 'sm'"
+          :class="twMerge('h-10 w-10 text-blue-500', twIcon)"
+        />
+        <BaseSpinnerLarge
+          v-else-if="size == 'lg'"
+          :class="twMerge('h-10 w-10 text-blue-500', twIcon)"
+        />
+      </div>
     </div>
   </Transition>
 </template>
@@ -74,11 +79,21 @@ const props = defineProps({
     default: 0,
     type: Number,
   },
+  /**
+   * Maximum distance in pixels from the top of the loading cover for the spinner center.
+   */
+  maxSpinnerTopOffset: {
+    default: 200,
+    type: Number,
+  },
 });
 
 let timeoutId = null as number | null;
 
 const showSpinner = ref(false);
+const spinnerTopOffset = computed(
+  () => `min(50%, ${props.maxSpinnerTopOffset}px)`
+);
 
 watch(
   () => props.modelValue,

package/src/components/BaseTooltip.vue

@@ -26,13 +26,23 @@
             v-if="showTooltip"
             name="tooltip"
           >
-            <div
-              class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3"
-              :class="[
-                dark ? 'bg-slate-900 text-white' : 'bg-white text-slate-900 ring-1 ring-black ring-opacity-10 shadow-md',
-              ]"
-              v-html="text"
-            />
+            <div class="relative filter drop-shadow-[0_1px_2px_rgba(0,0,0,0.1)]">
+              <div
+                class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3"
+                :class="[
+                  dark ? 'bg-slate-900 text-white' : 'bg-white text-slate-900',
+                ]"
+                v-html="text"
+              />
+              <div
+                ref="arrowRef"
+                class="absolute w-2 h-2 rotate-45"
+                :class="[
+                  dark ? 'bg-slate-900' : 'bg-white',
+                ]"
+                :style="arrowStyles"
+              />
+            </div>
           </slot>
         </transition>
       </div>
@@ -78,7 +88,26 @@ const targetRef = ref<HTMLElement | null>(null);
 const targetInternal = computed(() => unrefElement(targetRef));
 
 const tooltipRef = ref<HTMLElement | null>(null)
+const arrowRef = ref<HTMLElement | null>(null)
 
-const { floatingStyles, showTooltip } = useTooltip(targetInternal, tooltipRef, props.interactive, props.delay, props.floatingOptions, props.offset);
+const { floatingStyles, showTooltip, middlewareData, placement } = useTooltip(targetInternal, tooltipRef, props.interactive, props.delay, props.floatingOptions, props.offset, arrowRef);
+
+const arrowStyles = computed(() => {
+  const arrow = middlewareData.value.arrow;
+  const style: Record<string, string> = {};
+
+  if (arrow?.x != null) {
+    style.left = `${arrow.x}px`;
+  }
+  if (arrow?.y != null) {
+    style.top = `${arrow.y}px`;
+  }
+
+  const side = placement.value.split('-')[0];
+  const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side]!;
+  style[staticSide] = '-4px';
+
+  return style;
+});
 
 </script>

package/src/composables/tooltip.ts

@@ -1,4 +1,4 @@
-import { UseFloatingOptions, MaybeElement, UseFloatingReturn, autoUpdate, flip, offset as offset2, shift, useFloating } from "@floating-ui/vue";
+import { UseFloatingOptions, MaybeElement, UseFloatingReturn, autoUpdate, flip, offset as offset2, shift, arrow, useFloating } from "@floating-ui/vue";
 import { unrefElement, useEventListener, } from "@vueuse/core";
 import { debounce } from "lodash";
 
@@ -15,6 +15,7 @@ function useTooltip(
     delay: number = 0,
     options: UseFloatingOptions | undefined = undefined,
     offset: number = 6,
+    arrowRef?: Readonly<Ref<MaybeElement<HTMLElement>>>,
 ): ReturnType {
 
     const show = ref(false);
@@ -80,9 +81,15 @@ function useTooltip(
         show.value = false;
     }, 0);
 
+    const middleware = [offset2(offset), flip(), shift()];
+
+    if (arrowRef) {
+        middleware.push(arrow({ element: arrowRef }));
+    }
+
     const config = {
         placement: 'top',
-        middleware: [offset2(offset), flip(), shift()],
+        middleware,
         whileElementsMounted: autoUpdate,
     };