sprintify-ui 0.8.41 → 0.8.42

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

@@ -1,14 +1,14 @@
 import { TimelineItem } from '../types';
 import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     items: {
         required: true;
         type: PropType<TimelineItem[]>;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         required: true;
         type: PropType<TimelineItem[]>;
     };
-}>>, {}, {}>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,14 +1,14 @@
 import { TimelineItem } from '../types';
 import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     item: {
         required: true;
         type: PropType<TimelineItem>;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     item: {
         required: true;
         type: PropType<TimelineItem>;
     };
-}>>, {}, {}>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,17 +1,8 @@
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
+declare const _default: import("vue").DefineComponent<{
     text: string;
     color: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     text: string;
     color: string;
-}>>>, {}, {}>;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

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

@@ -1,60 +1,39 @@
 import { UseFloatingOptions } from '@floating-ui/vue';
 declare function __VLS_template(): {
-    default?(_: {}): any;
-    tooltip?(_: {}): any;
+    slots: {
+        default?(_: {}): any;
+        tooltip?(_: {}): any;
+    };
+    refs: {
+        targetRef: HTMLDivElement;
+        tooltipRef: HTMLDivElement;
+    };
+    attrs: Partial<{}>;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<{
     visible?: boolean;
     text?: string | null | undefined;
     class?: string[] | string | null | undefined;
     floatingOptions?: UseFloatingOptions;
     interactive?: boolean;
-}>, {
-    visible: boolean;
-    text: null;
-    class: null;
-    floatingOptions: undefined;
-    interactive: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     visible?: boolean;
     text?: string | null | undefined;
     class?: string[] | string | null | undefined;
     floatingOptions?: UseFloatingOptions;
     interactive?: boolean;
-}>, {
-    visible: boolean;
-    text: null;
-    class: null;
-    floatingOptions: undefined;
-    interactive: boolean;
-}>>>, {
+}> & Readonly<{}>, {
     class: string | string[] | null;
     text: string | null;
     visible: boolean;
     floatingOptions: UseFloatingOptions;
     interactive: boolean;
-}, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
         type: PropType<string | number | null>;
@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         type: PropType<"numeric" | "alphanumeric">;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -27,9 +27,9 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         type: PropType<"numeric" | "alphanumeric">;
     };
-}>> & {
+}>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
     type: "numeric" | "alphanumeric";
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/components/SlotComponent.d.ts

@@ -2,7 +2,7 @@ import { DefineComponent } from 'vue';
 /**
  * Base component to manually render the slot of component
  */
-declare const _default: DefineComponent<{
+declare const _default: DefineComponent<import("vue").ExtractPropTypes<{
     component: {
         type: ObjectConstructor;
         required: true;
@@ -19,7 +19,7 @@ declare const _default: DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     component: {
         type: ObjectConstructor;
         required: true;
@@ -36,8 +36,8 @@ declare const _default: DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-}>>, {
+}>> & Readonly<{}>, {
     name: string;
     tag: string;
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/stories/PageInputSizes.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/stories/PageShow.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/svg/BaseEmptyState.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/svg/BaseSpinnerLarge.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/types/svg/BaseSpinnerSmall.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.8.41",
+  "version": "0.8.42",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
@@ -53,14 +53,9 @@
     "@commitlint/cli": "^17.8.1",
     "@commitlint/config-conventional": "^17.8.1",
     "@iconify/vue": "^4.1.1",
-    "@storybook/addon-actions": "^8.3.0",
     "@storybook/addon-controls": "^8.3.0",
     "@storybook/addon-docs": "^8.3.0",
-    "@storybook/addon-essentials": "^8.3.0",
-    "@storybook/addon-interactions": "^8.3.0",
-    "@storybook/addon-links": "^8.3.0",
     "@storybook/manager-api": "^8.3.0",
-    "@storybook/test": "^8.3.0",
     "@storybook/theming": "^8.3.0",
     "@storybook/vue3": "^8.3.0",
     "@storybook/vue3-vite": "^8.3.0",

package/src/components/BaseLazy.stories.js

@@ -2,10 +2,13 @@ import BaseLazy from "./BaseLazy.vue";
 
 export default {
     title: "Utils/BaseLazy",
-    description: "BaseLazy component",
     component: BaseLazy,
-    args: {
-        delay: 1000,
+    parameters: {
+        docs: {
+            description: {
+                component: "A lazy loading component that shows a preview while the main content is loading.",
+            },
+        },
     },
 };
 
@@ -18,10 +21,10 @@ const Template = (args) => ({
     },
     template: `
     <div>
-      <BaseLazy v-bind="args">
+      <BaseLazy v-for="i in 300" v-bind="args" class="border-b">
         <template #default>
             <div class="flex items-center p-3 bg-blue-500 text-blue-900 h-20">
-                <p class="text-center">Rendered content</p>
+                <p class="text-center">Rendered content [{{ i }}]</p>
             </div>
         </template>
         <template #preview>
@@ -34,5 +37,23 @@ const Template = (args) => ({
   `,
 });
 
-export const Demo = Template.bind({});
-Demo.args = {};
+export const Mount = Template.bind({});
+Mount.args = {
+    delay: 2000,
+    trigger: 'mount'
+};
+
+export const Intersection = Template.bind({});
+Intersection.args = {
+    delay: 1000,
+    trigger: 'intersection'
+};
+
+export const IntersectionMargin = Template.bind({});
+IntersectionMargin.args = {
+    trigger: 'intersection',
+    intersectionConfig: {
+        rootMargin: '500px',
+    },
+    delay: 1000,
+};

package/src/components/BaseLazy.vue

@@ -1,26 +1,80 @@
 <template>
-  <slot
+  <div ref="nodeRef">
+
+    <slot
     v-if="shouldRender"
     name="default"
-  />
-  <slot
+    />
+    <slot
     v-else
     name="preview"
-  />
+    />
+  </div>
 </template>
   
 <script lang="ts" setup>
 
-const props = defineProps<{
+import { useIntersectionObserver, UseIntersectionObserverOptions } from '@vueuse/core';
+
+const nodeRef = ref<HTMLElement | null>(null);
+
+const TRIGGER_MOUNT = 'mount';
+const TRIGGER_INTERSECTION = 'intersection';
+
+const props = withDefaults(defineProps<{
   delay?: number;
-}>();
+  trigger?: typeof TRIGGER_MOUNT | typeof TRIGGER_INTERSECTION;
+  intersectionConfig?: UseIntersectionObserverOptions;
+}>(), {
+  delay: 200,
+  trigger: TRIGGER_MOUNT,
+  intersectionConfig: undefined,
+});
+
+const inViewport = ref(false);
+const delayCompleted = ref(false);
+let timeoutId = 0;
+
+if (props.trigger === TRIGGER_INTERSECTION) {
 
-const shouldRender = ref(false);
+  useIntersectionObserver(
+    nodeRef,
+    (ctx) => inViewport.value = ctx[0].isIntersecting,
+    props.intersectionConfig
+  );
 
-onMounted(() => {
-  setTimeout(() => {
-    shouldRender.value = true;
+  watch(
+    inViewport,
+    () => {
+      startTimeout();
+    }
+  );
+} else {
+  onMounted(() => {
+    startTimeout();
+  });
+}
+
+onUnmounted(() => {
+  clearTimeout(timeoutId);
+});
+
+function startTimeout() {
+  clearTimeout(timeoutId);
+
+  delayCompleted.value = false;
+
+  timeoutId = setTimeout(() => {
+    delayCompleted.value = true;
   }, props.delay);
+}
+
+const shouldRender = computed(() => {
+  if (props.trigger === TRIGGER_MOUNT) {
+    return delayCompleted.value;
+  }
+
+  return inViewport.value && delayCompleted.value;
 });
 
 </script>