sprintify-ui 0.11.25 → 0.11.26

package/dist/sprintify-ui.es.js

@@ -23026,7 +23026,7 @@ const vI = ["disabled"], yI = ["accept", "multiple"], ep = /* @__PURE__ */ te({
   }
 }), bI = {
   key: 0,
-  class: "absolute inset-0 flex h-full w-full items-center justify-center"
+  class: "absolute inset-0 h-full w-full"
 }, tp = /* @__PURE__ */ te({
   __name: "BaseLoadingCover",
   props: {
@@ -23071,23 +23071,32 @@ const vI = ["disabled"], yI = ["accept", "multiple"], ep = /* @__PURE__ */ te({
     delay: {
       default: 0,
       type: Number
+    },
+    /**
+     * Maximum distance in pixels from the top of the loading cover for the spinner center.
+     */
+    maxSpinnerTopOffset: {
+      default: 200,
+      type: Number
     }
   },
   setup(n) {
     const t = n;
     let e = null;
-    const r = z(!1);
+    const r = z(!1), o = S(
+      () => `min(50%, ${t.maxSpinnerTopOffset}px)`
+    );
     return We(
       () => t.modelValue,
-      (o) => {
-        o ? e = setTimeout(() => {
+      (i) => {
+        i ? e = setTimeout(() => {
           r.value = !0;
         }, t.delay) : (e && clearTimeout(e), r.value = !1);
       },
       {
         immediate: !0
       }
-    ), (o, i) => (k(), re(An, {
+    ), (i, s) => (k(), re(An, {
       "enter-active-class": "transition ease-out " + n.duration,
       "enter-from-class": "opacity-0",
       "enter-to-class": "opacity-100",
@@ -23100,13 +23109,18 @@ const vI = ["disabled"], yI = ["accept", "multiple"], ep = /* @__PURE__ */ te({
           A("div", {
             class: j(g(Ze)("absolute h-full w-full bg-white", n.twBackdrop))
           }, null, 2),
-          n.size == "sm" ? (k(), re(d0, {
-            key: 0,
-            class: j(g(Ze)("h-10 w-10 text-blue-500", n.twIcon))
-          }, null, 8, ["class"])) : n.size == "lg" ? (k(), re(V0, {
-            key: 1,
-            class: j(g(Ze)("h-10 w-10 text-blue-500", n.twIcon))
-          }, null, 8, ["class"])) : Z("", !0)
+          A("div", {
+            class: "absolute left-1/2 -translate-x-1/2 -translate-y-1/2",
+            style: Fe({ top: g(o) })
+          }, [
+            n.size == "sm" ? (k(), re(d0, {
+              key: 0,
+              class: j(g(Ze)("h-10 w-10 text-blue-500", n.twIcon))
+            }, null, 8, ["class"])) : n.size == "lg" ? (k(), re(V0, {
+              key: 1,
+              class: j(g(Ze)("h-10 w-10 text-blue-500", n.twIcon))
+            }, null, 8, ["class"])) : Z("", !0)
+          ], 4)
         ])) : Z("", !0)
       ]),
       _: 1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.25",
+  "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,