@pequity/squirrel 5.0.1 → 5.0.2

package/dist/cjs/p-loading.js

@@ -19,7 +19,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   __name: "p-loading",
   setup(__props) {
-    const { show, content, props: componentProps } = usePLoading.usePLoading();
+    const { show, content, props: componentProps, loadingHide } = usePLoading.usePLoading();
     const dimsReference = vue.ref(null);
     const width = vue.ref(0);
     const height = vue.ref(0);
@@ -37,6 +37,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       const isComponent2 = typeof content2 === "object" && content2 !== null;
       return isComponent2;
     };
+    vue.onBeforeUnmount(() => {
+      loadingHide();
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
         vue.createVNode(vue.Transition, {
@@ -82,5 +85,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pLoading = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-7af44c7f"]]);
+const pLoading = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-f0f6bdd4"]]);
 module.exports = pLoading;

package/dist/cjs/usePLoading.js

@@ -12,11 +12,17 @@ const props = vue.computed(() => {
   var _a;
   return (_a = loadingItems.value[loadingItems.value.length - 1]) == null ? void 0 : _a.props;
 });
-let timer;
 const usePLoading = (options) => {
   const { delay } = { delay: 200, ...options };
   const scope = vue.getCurrentScope();
+  const clearLoadingItems = () => {
+    loadingItems.value.forEach((item) => {
+      clearTimeout(item.timer);
+    });
+    loadingItems.value = [];
+  };
   const loadingShow = (loadingItem) => {
+    let timer = 0;
     if (!loadingItem.id) {
       throw new Error("id is required");
     }
@@ -30,28 +36,39 @@ const usePLoading = (options) => {
     loadingItems.value.push({
       id: loadingItem.id,
       content: loadingItem.content && typeof loadingItem.content === "object" ? vue.markRaw(loadingItem.content) : loadingItem.content || LOADING_TEXT,
-      props: loadingItem.props
+      props: loadingItem.props,
+      timer,
+      clearOnDispose: loadingItem.clearOnDispose ?? true
     });
   };
   const loadingHide = (id) => {
     if (id && typeof id === "string") {
       const index = loadingItems.value.findIndex((item) => item.id === id);
+      const loadingItem = loadingItems.value[index];
       if (index !== -1) {
+        clearTimeout(loadingItem.timer);
         loadingItems.value.splice(index, 1);
       }
     } else {
-      loadingItems.value = [];
+      clearLoadingItems();
     }
     if (loadingItems.value.length === 0) {
       show.value = false;
     }
-    clearTimeout(timer);
   };
   if (scope) {
     vue.onScopeDispose(() => {
-      loadingItems.value = [];
-      show.value = false;
-      clearTimeout(timer);
+      if (loadingItems.value.some((item) => item.clearOnDispose === false)) {
+        loadingItems.value.forEach((item) => {
+          if (item.clearOnDispose) {
+            clearTimeout(item.timer);
+          }
+        });
+        loadingItems.value = loadingItems.value.filter((item) => item.clearOnDispose === false);
+      } else {
+        clearLoadingItems();
+        show.value = false;
+      }
     });
   }
   return { show, content, props, loadingShow, loadingHide };

package/dist/es/p-loading.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, toValue, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, unref, createElementBlock, createElementVNode, normalizeStyle, resolveDynamicComponent, normalizeProps, mergeProps, normalizeClass, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, ref, watch, toValue, onBeforeUnmount, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, unref, createElementBlock, createElementVNode, normalizeStyle, resolveDynamicComponent, normalizeProps, mergeProps, normalizeClass, toDisplayString, createCommentVNode } from "vue";
 import { usePLoading } from "./usePLoading.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = {
@@ -18,7 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   __name: "p-loading",
   setup(__props) {
-    const { show, content, props: componentProps } = usePLoading();
+    const { show, content, props: componentProps, loadingHide } = usePLoading();
     const dimsReference = ref(null);
     const width = ref(0);
     const height = ref(0);
@@ -36,6 +36,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const isComponent2 = typeof content2 === "object" && content2 !== null;
       return isComponent2;
     };
+    onBeforeUnmount(() => {
+      loadingHide();
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Teleport, { to: "body" }, [
         createVNode(Transition, {
@@ -81,7 +84,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pLoading = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7af44c7f"]]);
+const pLoading = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f0f6bdd4"]]);
 export {
   pLoading as default
 };

package/dist/es/usePLoading.js

@@ -10,11 +10,17 @@ const props = computed(() => {
   var _a;
   return (_a = loadingItems.value[loadingItems.value.length - 1]) == null ? void 0 : _a.props;
 });
-let timer;
 const usePLoading = (options) => {
   const { delay } = { delay: 200, ...options };
   const scope = getCurrentScope();
+  const clearLoadingItems = () => {
+    loadingItems.value.forEach((item) => {
+      clearTimeout(item.timer);
+    });
+    loadingItems.value = [];
+  };
   const loadingShow = (loadingItem) => {
+    let timer = 0;
     if (!loadingItem.id) {
       throw new Error("id is required");
     }
@@ -28,28 +34,39 @@ const usePLoading = (options) => {
     loadingItems.value.push({
       id: loadingItem.id,
       content: loadingItem.content && typeof loadingItem.content === "object" ? markRaw(loadingItem.content) : loadingItem.content || LOADING_TEXT,
-      props: loadingItem.props
+      props: loadingItem.props,
+      timer,
+      clearOnDispose: loadingItem.clearOnDispose ?? true
     });
   };
   const loadingHide = (id) => {
     if (id && typeof id === "string") {
       const index = loadingItems.value.findIndex((item) => item.id === id);
+      const loadingItem = loadingItems.value[index];
       if (index !== -1) {
+        clearTimeout(loadingItem.timer);
         loadingItems.value.splice(index, 1);
       }
     } else {
-      loadingItems.value = [];
+      clearLoadingItems();
     }
     if (loadingItems.value.length === 0) {
       show.value = false;
     }
-    clearTimeout(timer);
   };
   if (scope) {
     onScopeDispose(() => {
-      loadingItems.value = [];
-      show.value = false;
-      clearTimeout(timer);
+      if (loadingItems.value.some((item) => item.clearOnDispose === false)) {
+        loadingItems.value.forEach((item) => {
+          if (item.clearOnDispose) {
+            clearTimeout(item.timer);
+          }
+        });
+        loadingItems.value = loadingItems.value.filter((item) => item.clearOnDispose === false);
+      } else {
+        clearLoadingItems();
+        show.value = false;
+      }
     });
   }
   return { show, content, props, loadingShow, loadingHide };

package/dist/squirrel/components/p-card/p-card.vue.d.ts

@@ -1,17 +1,14 @@
-declare var __VLS_0: {
-    titleClass: "text-xl font-medium leading-none text-p-purple-60";
-};
-declare var __VLS_1: {};
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: {
-        title?(_: typeof __VLS_0): any;
-        default?(_: typeof __VLS_1): any;
+        title?(_: {
+            titleClass: "text-xl font-medium leading-none text-p-purple-60";
+        }): any;
+        default?(_: {}): any;
     };
     refs: {};
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{
     title: {
         type: StringConstructor;
@@ -25,7 +22,7 @@ declare const __VLS_component: import("vue").DefineComponent<{
 }>>, {
     title: string;
 }, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/squirrel/components/p-checkbox/p-checkbox.vue.d.ts

@@ -1,15 +1,12 @@
-declare var __VLS_0: {};
-declare var __VLS_1: {};
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: {
-        "label-before"?(_: typeof __VLS_0): any;
-        label?(_: typeof __VLS_1): any;
+        "label-before"?(_: {}): any;
+        label?(_: {}): any;
     };
     refs: {};
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{
     modelValue: {
         type: BooleanConstructor;
@@ -36,7 +33,7 @@ declare const __VLS_component: import("vue").DefineComponent<{
     label: string;
     modelValue: boolean;
 }, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/squirrel/components/p-dropdown-select/p-dropdown-select.vue.d.ts

@@ -2,8 +2,7 @@ import { type PropType } from 'vue';
 import { type ModelValue, type Size } from '../p-select-list/p-select-list.types';
 type AnyValue = string | number | boolean | null | undefined | Record<string, unknown>;
 type AnyObject = Record<string, AnyValue>;
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: Readonly<{
         'selected-item'(props: {
             item: any;
@@ -26,9 +25,9 @@ declare const __VLS_templateResult: {
         }): unknown;
     };
     refs: {
-        formControl: import("vue").HTMLAttributes & import("vue").ReservedProps;
-        button: import("vue").ButtonHTMLAttributes & import("vue").ReservedProps;
-        actionsContainer: import("vue").HTMLAttributes & import("vue").ReservedProps;
+        formControl: HTMLDivElement;
+        button: HTMLButtonElement;
+        actionsContainer: HTMLDivElement;
         inputSearch: import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 type: StringConstructor;
@@ -116,11 +115,11 @@ declare const __VLS_templateResult: {
             modelValue: string;
             showEnterIcon: boolean;
         }> | null;
-        virtualizerRef: import("vue").HTMLAttributes & import("vue").ReservedProps;
+        virtualizerRef: HTMLDivElement;
     };
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{
     modelValue: {
         type: PropType<ModelValue>;
@@ -381,7 +380,7 @@ declare const __VLS_component: import("vue").DefineComponent<{
     placeholderSearch: string;
     selectedTopShown: boolean;
 }, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/squirrel/components/p-info-icon/p-info-icon.vue.d.ts

@@ -1,12 +1,11 @@
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
     };
     refs: {};
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{
     text: {
         type: StringConstructor;
@@ -20,7 +19,7 @@ declare const __VLS_component: import("vue").DefineComponent<{
 }>>, {
     text: string;
 }, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/squirrel/components/p-link/p-link.vue.d.ts

@@ -1,16 +1,15 @@
 import { type RouterLinkProps } from 'vue-router';
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
         default?(_: {}): any;
     };
     refs: {};
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<RouterLinkProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<RouterLinkProps>>>, {}, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToOption<T> = {

package/dist/squirrel/components/p-loading/usePLoading.d.ts

@@ -7,13 +7,16 @@ type LoadingItem = {
     id: string;
     content?: Content;
     props?: Ref;
+    timer: ReturnType<typeof setTimeout> | 0;
+    clearOnDispose?: boolean;
 };
+type LoadingItemOption = Pick<LoadingItem, 'id' | 'content' | 'props' | 'clearOnDispose'>;
 type UsePLoading = {
     show: Ref<boolean>;
     content: Content;
     props: Ref;
-    loadingShow: (loadingItem: LoadingItem) => void;
-    loadingHide: (id: LoadingItem['id']) => void;
+    loadingShow: (loadingItem: LoadingItemOption) => void;
+    loadingHide: (id?: LoadingItemOption['id']) => void;
 };
 export declare const usePLoading: (options?: Options) => UsePLoading;
 export {};

package/dist/squirrel/components/p-modal/p-modal.vue.d.ts

@@ -1,6 +1,5 @@
 import { type PropType, type StyleValue } from 'vue';
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: {
         "title-wrapper"?(_: {}): any;
         "content-wrapper"?(_: {}): any;
@@ -9,12 +8,12 @@ declare const __VLS_templateResult: {
         footer?(_: {}): any;
     };
     refs: {
-        pmWrapper: import("vue").HTMLAttributes & import("vue").ReservedProps;
-        pm: import("vue").HTMLAttributes & import("vue").ReservedProps;
+        pmWrapper: HTMLDivElement;
+        pm: HTMLDivElement;
     };
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{
     name: {
         type: StringConstructor;
@@ -206,7 +205,7 @@ declare const __VLS_component: import("vue").DefineComponent<{
     bgInClass: string;
     bgOutClass: string;
 }, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/squirrel/components/p-pagination-info/p-pagination-info.vue.d.ts

@@ -1,12 +1,11 @@
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: {
         "no-results"?(_: {}): any;
     };
     refs: {};
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{
     /**
      * The current page.
@@ -71,7 +70,7 @@ declare const __VLS_component: import("vue").DefineComponent<{
     pageSize: number;
     currentPage: number;
 }, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/squirrel/components/p-select/p-select.vue.d.ts

@@ -1,18 +1,16 @@
 import { type InputSize } from '../../utils/inputClassesShared';
 import { type PropType } from 'vue';
-declare var __VLS_0: {
-    label: string;
-    labelClasses: string;
-};
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: {
-        label?(_: typeof __VLS_0): any;
+        label?(_: {
+            label: string;
+            labelClasses: string;
+        }): any;
     };
     refs: {};
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{
     modelValue: {
         type: PropType<string | number | boolean | null>;
@@ -95,7 +93,7 @@ declare const __VLS_component: import("vue").DefineComponent<{
     errorMsg: string;
     itemValue: string | number | boolean | null;
 }, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/squirrel/components/p-select-btn/p-select-btn.vue.d.ts

@@ -13,16 +13,15 @@ type Props = {
     multiple?: boolean;
     noPadding?: boolean;
 };
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: Partial<Record<`btn-${number}`, (_: {
         item: BtnGroupItem;
         isSelected: boolean | undefined;
     }) => any>>;
     refs: {};
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     modelValue: null;
     items: () => never[];
@@ -64,7 +63,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     highlightSelected: boolean;
     noPadding: boolean;
 }, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+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_PrettifyLocal<P[K] & {

package/dist/squirrel/components/p-select-list/p-select-list.vue.d.ts

@@ -1,7 +1,6 @@
 import { type AnyObject, type AnyValue, type ModelValue, type Size } from './p-select-list.types';
 import { type PropType } from 'vue';
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: Readonly<{
         'selected-item'(props: {
             item: any;
@@ -24,8 +23,8 @@ declare const __VLS_templateResult: {
         }): unknown;
     };
     refs: {
-        formControl: import("vue").HTMLAttributes & import("vue").ReservedProps;
-        actionsContainer: import("vue").HTMLAttributes & import("vue").ReservedProps;
+        formControl: HTMLDivElement;
+        actionsContainer: HTMLDivElement;
         inputSearch: import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
             modelValue: {
                 type: StringConstructor;
@@ -113,11 +112,11 @@ declare const __VLS_templateResult: {
             modelValue: string;
             showEnterIcon: boolean;
         }> | null;
-        virtualizerRef: import("vue").HTMLAttributes & import("vue").ReservedProps;
+        virtualizerRef: HTMLDivElement;
     };
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<{
     modelValue: {
         type: PropType<ModelValue>;
@@ -360,7 +359,7 @@ declare const __VLS_component: import("vue").DefineComponent<{
     topSectionClass: string;
     closePopperOnSelect: boolean;
 }, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/dist/squirrel/components/p-table/p-table.vue.d.ts

@@ -11,20 +11,18 @@ type Props = {
         paddingBottom: number;
     };
 };
-declare var __VLS_11: {};
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: Partial<Record<`prepend-header-cell-${string}`, (_: {
         col: TableCol;
     }) => any>> & Partial<Record<`subheader-cell-${string}`, (_: {}) => any>> & {
-        default?(_: typeof __VLS_11): any;
+        default?(_: {}): any;
     };
     refs: {
-        scrollWrapper: import("vue").HTMLAttributes & import("vue").ReservedProps;
+        scrollWrapper: HTMLDivElement;
     };
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     colsResizable: boolean;
     isFirstColFixed: boolean;
@@ -64,7 +62,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
         paddingBottom: number;
     };
 }, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+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_PrettifyLocal<P[K] & {

package/dist/squirrel/components/p-table-td/p-table-td.vue.d.ts

@@ -3,16 +3,14 @@ type Props = {
     isEditable?: boolean;
     isSelected?: boolean;
 };
-declare var __VLS_0: {};
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
+declare function __VLS_template(): {
     slots: {
-        default?(_: typeof __VLS_0): any;
+        default?(_: {}): any;
     };
     refs: {};
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+    attrs: Partial<{}>;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
     isEditable: boolean;
     isSelected: boolean;
@@ -23,7 +21,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
     isSelected: boolean;
     isEditable: boolean;
 }, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+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_PrettifyLocal<P[K] & {

package/dist/style.css

@@ -381,12 +381,12 @@ from {
 to {
     opacity: 0;
 }
-}.fadeInDown[data-v-7af44c7f] {
+}.fadeInDown[data-v-f0f6bdd4] {
   animation-duration: 0.4s;
   animation-fill-mode: both;
-  animation-name: fadeInDown-7af44c7f;
+  animation-name: fadeInDown-f0f6bdd4;
 }
-@keyframes fadeInDown-7af44c7f {
+@keyframes fadeInDown-f0f6bdd4 {
 0% {
     opacity: 0;
     transform: translate3d(0, -100%, 0);
@@ -396,12 +396,12 @@ to {
     transform: none;
 }
 }
-.fadeOutUp[data-v-7af44c7f] {
+.fadeOutUp[data-v-f0f6bdd4] {
   animation-duration: 0.25s;
   animation-fill-mode: both;
-  animation-name: fadeOutUp-7af44c7f;
+  animation-name: fadeOutUp-f0f6bdd4;
 }
-@keyframes fadeOutUp-7af44c7f {
+@keyframes fadeOutUp-f0f6bdd4 {
 0% {
     opacity: 1;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "packageManager": "pnpm@9.9.0",
   "type": "module",
   "scripts": {
@@ -55,7 +55,7 @@
     "@commitlint/cli": "^19.4.1",
     "@commitlint/config-conventional": "^19.4.1",
     "@pequity/eslint-config": "^0.0.13",
-    "@playwright/test": "^1.46.1",
+    "@playwright/test": "^1.47.0",
     "@popperjs/core": "2.11.8",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -75,20 +75,18 @@
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.5.3",
+    "@types/node": "^22.5.4",
     "@vitejs/plugin-vue": "^5.1.3",
     "@vue/compiler-sfc": "3.4.38",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
     "autoprefixer": "^10.4.20",
     "babel-jest": "^29.7.0",
-    "concurrently": "^8.2.2",
     "dayjs": "1.11.13",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "floating-vue": "5.2.2",
     "glob": "^11.0.0",
-    "http-server": "^14.1.1",
     "husky": "^9.1.5",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -113,6 +111,6 @@
     "vue-currency-input": "3.1.0",
     "vue-router": "4.4.3",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "2.1.4"
+    "vue-tsc": "2.1.6"
   }
 }

package/squirrel/components/p-loading/p-loading.spec.js

@@ -24,7 +24,7 @@ const createWrapper = (options) => {
       <button class="request-1-sec-component" @click="fireRequestComponent(1000)"></button>
     `,
       setup() {
-        const { loadingShow, loadingHide } = usePLoading(options);
+        const { loadingShow, loadingHide, show } = usePLoading(options);
 
         const fireRequest = async (time) => {
           const id = `default-${time}`;
@@ -47,7 +47,7 @@ const createWrapper = (options) => {
           loadingHide(id);
         };
 
-        return { loadingShow, loadingHide, fireRequest, fireRequestText, fireRequestComponent };
+        return { loadingShow, loadingHide, fireRequest, fireRequestText, fireRequestComponent, show };
       },
     },
     {
@@ -287,4 +287,22 @@ describe('PLoading.vue', () => {
     await waitNT(appWrapper.vm);
     expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
   });
+
+  it('hides the loader on unmount', async () => {
+    const wrapper = createWrapper({ delay: 200 });
+
+    await wrapper.find('.request-1-sec-component').trigger('click');
+
+    jest.advanceTimersByTime(300);
+    await waitNT(appWrapper.vm);
+
+    expect(wrapper.vm.show).toBe(true);
+    expect(appWrapper.find('[aria-busy]').exists()).toBe(true);
+    expect(appWrapper.findComponent(PSkeletonLoader).exists()).toBe(true);
+
+    appWrapper.unmount();
+
+    expect(wrapper.vm.show).toBe(false);
+    expect(appWrapper.exists()).toBe(false);
+  });
 });

package/squirrel/components/p-loading/p-loading.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Component, ref, toValue, watch } from 'vue';
+import { type Component, onBeforeUnmount, ref, toValue, watch } from 'vue';
 import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 
 const textDivClass = `overflow-hidden whitespace-nowrap px-4 pt-1 h-8 text-center text-sm font-semibold text-p-purple-60`;
@@ -37,7 +37,7 @@ defineOptions({
   name: 'PLoading',
 });
 
-const { show, content, props: componentProps } = usePLoading();
+const { show, content, props: componentProps, loadingHide } = usePLoading();
 const dimsReference = ref<HTMLElement | null>(null);
 const width = ref(0);
 const height = ref(0);
@@ -58,6 +58,10 @@ const isComponent = (content: unknown): content is Component => {
 
   return isComponent;
 };
+
+onBeforeUnmount(() => {
+  loadingHide();
+});
 </script>
 
 <style scoped lang="scss">

package/squirrel/components/p-loading/usePLoading.ts

@@ -10,14 +10,18 @@ type LoadingItem = {
   id: string;
   content?: Content;
   props?: Ref;
+  timer: ReturnType<typeof setTimeout> | 0;
+  clearOnDispose?: boolean;
 };
 
+type LoadingItemOption = Pick<LoadingItem, 'id' | 'content' | 'props' | 'clearOnDispose'>;
+
 type UsePLoading = {
   show: Ref<boolean>;
   content: Content;
   props: Ref;
-  loadingShow: (loadingItem: LoadingItem) => void;
-  loadingHide: (id: LoadingItem['id']) => void;
+  loadingShow: (loadingItem: LoadingItemOption) => void;
+  loadingHide: (id?: LoadingItemOption['id']) => void;
 };
 
 const LOADING_TEXT = 'Loading...';
@@ -25,13 +29,21 @@ const show = ref(false);
 const loadingItems = ref<LoadingItem[]>([]);
 const content = computed(() => loadingItems.value[loadingItems.value.length - 1]?.content);
 const props = computed(() => loadingItems.value[loadingItems.value.length - 1]?.props);
-let timer: ReturnType<typeof setTimeout>;
 
 export const usePLoading = (options?: Options): UsePLoading => {
   const { delay } = { delay: 200, ...options };
   const scope = getCurrentScope();
 
-  const loadingShow = (loadingItem: LoadingItem) => {
+  const clearLoadingItems = () => {
+    loadingItems.value.forEach((item) => {
+      clearTimeout(item.timer);
+    });
+    loadingItems.value = [];
+  };
+
+  const loadingShow = (loadingItem: LoadingItemOption) => {
+    let timer: ReturnType<typeof setTimeout> | 0 = 0;
+
     if (!loadingItem.id) {
       throw new Error('id is required');
     }
@@ -51,31 +63,42 @@ export const usePLoading = (options?: Options): UsePLoading => {
           ? markRaw(loadingItem.content)
           : loadingItem.content || LOADING_TEXT,
       props: loadingItem.props,
+      timer,
+      clearOnDispose: loadingItem.clearOnDispose ?? true,
     });
   };
 
-  const loadingHide = (id?: LoadingItem['id']) => {
+  const loadingHide = (id?: LoadingItemOption['id']) => {
     if (id && typeof id === 'string') {
       const index = loadingItems.value.findIndex((item) => item.id === id);
+      const loadingItem = loadingItems.value[index];
 
       if (index !== -1) {
+        clearTimeout(loadingItem.timer);
         loadingItems.value.splice(index, 1);
       }
     } else {
-      loadingItems.value = [];
+      clearLoadingItems();
     }
 
     if (loadingItems.value.length === 0) {
       show.value = false;
     }
-    clearTimeout(timer);
   };
 
   if (scope) {
     onScopeDispose(() => {
-      loadingItems.value = [];
-      show.value = false;
-      clearTimeout(timer);
+      if (loadingItems.value.some((item) => item.clearOnDispose === false)) {
+        loadingItems.value.forEach((item) => {
+          if (item.clearOnDispose) {
+            clearTimeout(item.timer);
+          }
+        });
+        loadingItems.value = loadingItems.value.filter((item) => item.clearOnDispose === false);
+      } else {
+        clearLoadingItems();
+        show.value = false;
+      }
     });
   }