@pequity/squirrel 3.0.2 → 3.1.0

package/dist/cjs/p-loading.js

@@ -12,20 +12,23 @@ const _hoisted_2 = {
   key: 0,
   class: "invisible fixed"
 };
+const textDivClass = `overflow-hidden whitespace-nowrap px-4 pt-1 h-8 text-center text-sm font-semibold text-p-purple-60`;
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "PLoading"
   },
   __name: "p-loading",
   setup(__props) {
-    const { show, content } = usePLoading.usePLoading();
-    const widthReference = vue.ref(null);
+    const { show, content, props: componentProps } = usePLoading.usePLoading();
+    const dimsReference = vue.ref(null);
     const width = vue.ref(0);
+    const height = vue.ref(0);
     vue.watch(
       () => vue.toValue(content),
       () => {
-        if (widthReference.value) {
-          width.value = widthReference.value.offsetWidth;
+        if (dimsReference.value) {
+          width.value = dimsReference.value.offsetWidth;
+          height.value = dimsReference.value.offsetHeight;
         }
       },
       { flush: "post" }
@@ -44,12 +47,21 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           default: vue.withCtx(() => [
             vue.unref(show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
               vue.createElementVNode("div", {
-                style: vue.normalizeStyle({ width: `${width.value}px` }),
-                class: "h-8 overflow-hidden whitespace-nowrap rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 px-4 pt-2 text-center text-sm font-semibold leading-none text-p-purple-60 shadow-sm transition-all duration-500"
+                style: vue.normalizeStyle({ width: `${width.value}px`, height: `${height.value}px` }),
+                class: "overflow-hidden rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 shadow-sm transition-all duration-300"
               }, [
-                isComponent(vue.unref(content)) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(content)), { key: 0 })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                  vue.createTextVNode(vue.toDisplayString(vue.unref(content)), 1)
-                ], 64))
+                vue.createVNode(vue.Transition, {
+                  "enter-from-class": "opacity-0",
+                  "enter-active-class": "transition duration-500"
+                }, {
+                  default: vue.withCtx(() => [
+                    isComponent(vue.unref(content)) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(content)), vue.normalizeProps(vue.mergeProps({ key: 0 }, vue.unref(componentProps))), null, 16)) : (vue.openBlock(), vue.createElementBlock("div", {
+                      key: 1,
+                      class: vue.normalizeClass(textDivClass)
+                    }, vue.toDisplayString(vue.unref(content)), 1))
+                  ]),
+                  _: 1
+                })
               ], 4)
             ])) : vue.createCommentVNode("", true)
           ]),
@@ -57,18 +69,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }),
         vue.unref(content) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
           vue.createElementVNode("div", {
-            ref_key: "widthReference",
-            ref: widthReference,
-            class: "inline-flex px-4"
+            ref_key: "dimsReference",
+            ref: dimsReference
           }, [
-            isComponent(vue.unref(content)) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(content)), { key: 0 })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-              vue.createTextVNode(vue.toDisplayString(vue.unref(content)), 1)
-            ], 64))
+            isComponent(vue.unref(content)) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(content)), vue.normalizeProps(vue.mergeProps({ key: 0 }, vue.unref(componentProps))), null, 16)) : (vue.openBlock(), vue.createElementBlock("div", {
+              key: 1,
+              class: vue.normalizeClass(textDivClass)
+            }, vue.toDisplayString(vue.unref(content)), 1))
           ], 512)
         ])) : vue.createCommentVNode("", true)
       ], 64);
     };
   }
 });
-const pLoading = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-8c0c66ab"]]);
+const pLoading = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-6f528d56"]]);
 module.exports = pLoading;

package/dist/cjs/usePLoading.js

@@ -8,6 +8,10 @@ const content = vue.computed(() => {
   var _a;
   return (_a = loadingItems.value[loadingItems.value.length - 1]) == null ? void 0 : _a.content;
 });
+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 };
@@ -25,11 +29,19 @@ const usePLoading = (options) => {
     }
     loadingItems.value.push({
       id: loadingItem.id,
-      content: loadingItem.content && typeof loadingItem.content === "object" ? vue.markRaw(loadingItem.content) : loadingItem.content || LOADING_TEXT
+      content: loadingItem.content && typeof loadingItem.content === "object" ? vue.markRaw(loadingItem.content) : loadingItem.content || LOADING_TEXT,
+      props: loadingItem.props
     });
   };
   const loadingHide = (id) => {
-    loadingItems.value = id && typeof id === "string" ? loadingItems.value.filter((item) => item.id !== id) : [];
+    if (id && typeof id === "string") {
+      const index = loadingItems.value.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        loadingItems.value.splice(index, 1);
+      }
+    } else {
+      loadingItems.value = [];
+    }
     if (loadingItems.value.length === 0) {
       show.value = false;
     }
@@ -42,6 +54,6 @@ const usePLoading = (options) => {
       clearTimeout(timer);
     });
   }
-  return { show, content, loadingShow, loadingHide };
+  return { show, content, props, loadingShow, loadingHide };
 };
 exports.usePLoading = usePLoading;

package/dist/es/p-loading.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, toValue, openBlock, createElementBlock, Fragment, createVNode, Transition, withCtx, unref, createElementVNode, normalizeStyle, createBlock, resolveDynamicComponent, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, ref, watch, toValue, openBlock, createElementBlock, Fragment, createVNode, Transition, withCtx, unref, createElementVNode, normalizeStyle, createBlock, 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 = {
@@ -11,20 +11,23 @@ const _hoisted_2 = {
   key: 0,
   class: "invisible fixed"
 };
+const textDivClass = `overflow-hidden whitespace-nowrap px-4 pt-1 h-8 text-center text-sm font-semibold text-p-purple-60`;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "PLoading"
   },
   __name: "p-loading",
   setup(__props) {
-    const { show, content } = usePLoading();
-    const widthReference = ref(null);
+    const { show, content, props: componentProps } = usePLoading();
+    const dimsReference = ref(null);
     const width = ref(0);
+    const height = ref(0);
     watch(
       () => toValue(content),
       () => {
-        if (widthReference.value) {
-          width.value = widthReference.value.offsetWidth;
+        if (dimsReference.value) {
+          width.value = dimsReference.value.offsetWidth;
+          height.value = dimsReference.value.offsetHeight;
         }
       },
       { flush: "post" }
@@ -43,12 +46,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             unref(show) ? (openBlock(), createElementBlock("div", _hoisted_1, [
               createElementVNode("div", {
-                style: normalizeStyle({ width: `${width.value}px` }),
-                class: "h-8 overflow-hidden whitespace-nowrap rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 px-4 pt-2 text-center text-sm font-semibold leading-none text-p-purple-60 shadow-sm transition-all duration-500"
+                style: normalizeStyle({ width: `${width.value}px`, height: `${height.value}px` }),
+                class: "overflow-hidden rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 shadow-sm transition-all duration-300"
               }, [
-                isComponent(unref(content)) ? (openBlock(), createBlock(resolveDynamicComponent(unref(content)), { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  createTextVNode(toDisplayString(unref(content)), 1)
-                ], 64))
+                createVNode(Transition, {
+                  "enter-from-class": "opacity-0",
+                  "enter-active-class": "transition duration-500"
+                }, {
+                  default: withCtx(() => [
+                    isComponent(unref(content)) ? (openBlock(), createBlock(resolveDynamicComponent(unref(content)), normalizeProps(mergeProps({ key: 0 }, unref(componentProps))), null, 16)) : (openBlock(), createElementBlock("div", {
+                      key: 1,
+                      class: normalizeClass(textDivClass)
+                    }, toDisplayString(unref(content)), 1))
+                  ]),
+                  _: 1
+                })
               ], 4)
             ])) : createCommentVNode("", true)
           ]),
@@ -56,20 +68,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }),
         unref(content) ? (openBlock(), createElementBlock("div", _hoisted_2, [
           createElementVNode("div", {
-            ref_key: "widthReference",
-            ref: widthReference,
-            class: "inline-flex px-4"
+            ref_key: "dimsReference",
+            ref: dimsReference
           }, [
-            isComponent(unref(content)) ? (openBlock(), createBlock(resolveDynamicComponent(unref(content)), { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-              createTextVNode(toDisplayString(unref(content)), 1)
-            ], 64))
+            isComponent(unref(content)) ? (openBlock(), createBlock(resolveDynamicComponent(unref(content)), normalizeProps(mergeProps({ key: 0 }, unref(componentProps))), null, 16)) : (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(textDivClass)
+            }, toDisplayString(unref(content)), 1))
           ], 512)
         ])) : createCommentVNode("", true)
       ], 64);
     };
   }
 });
-const pLoading = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8c0c66ab"]]);
+const pLoading = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6f528d56"]]);
 export {
   pLoading as default
 };

package/dist/es/usePLoading.js

@@ -6,6 +6,10 @@ const content = computed(() => {
   var _a;
   return (_a = loadingItems.value[loadingItems.value.length - 1]) == null ? void 0 : _a.content;
 });
+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 };
@@ -23,11 +27,19 @@ const usePLoading = (options) => {
     }
     loadingItems.value.push({
       id: loadingItem.id,
-      content: loadingItem.content && typeof loadingItem.content === "object" ? markRaw(loadingItem.content) : loadingItem.content || LOADING_TEXT
+      content: loadingItem.content && typeof loadingItem.content === "object" ? markRaw(loadingItem.content) : loadingItem.content || LOADING_TEXT,
+      props: loadingItem.props
     });
   };
   const loadingHide = (id) => {
-    loadingItems.value = id && typeof id === "string" ? loadingItems.value.filter((item) => item.id !== id) : [];
+    if (id && typeof id === "string") {
+      const index = loadingItems.value.findIndex((item) => item.id === id);
+      if (index !== -1) {
+        loadingItems.value.splice(index, 1);
+      }
+    } else {
+      loadingItems.value = [];
+    }
     if (loadingItems.value.length === 0) {
       show.value = false;
     }
@@ -40,7 +52,7 @@ const usePLoading = (options) => {
       clearTimeout(timer);
     });
   }
-  return { show, content, loadingShow, loadingHide };
+  return { show, content, props, loadingShow, loadingHide };
 };
 export {
   usePLoading

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

@@ -6,10 +6,12 @@ type Content = string | Component;
 type LoadingItem = {
     id: string;
     content?: Content;
+    props?: Ref;
 };
 type UsePLoading = {
     show: Ref<boolean>;
     content: Content;
+    props: Ref;
     loadingShow: (loadingItem: LoadingItem) => void;
     loadingHide: (id: LoadingItem['id']) => void;
 };

package/dist/style.css

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "packageManager": "pnpm@8.9.2",
   "type": "module",
   "scripts": {
@@ -82,11 +82,11 @@
     "@vue/vue3-jest": "^29.2.6",
     "autoprefixer": "^10.4.19",
     "babel-jest": "^29.7.0",
-    "dayjs": "1.11.11",
+    "dayjs": "1.11.12",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "floating-vue": "5.2.2",
-    "glob": "^10.4.3",
+    "glob": "^10.4.5",
     "husky": "^9.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -97,17 +97,17 @@
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "resolve-tspaths": "^0.8.19",
-    "rimraf": "^5.0.8",
+    "rimraf": "^5.0.9",
     "sass": "^1.77.8",
     "semantic-release": "^24.0.0",
     "storybook": "^8.2.5",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.6",
     "ts-jest": "^29.2.3",
-    "typescript": "5.5.3",
+    "typescript": "5.5.4",
     "v-calendar": "3.1.2",
     "vite": "^5.3.4",
-    "vue": "3.4.32",
+    "vue": "3.4.33",
     "vue-currency-input": "3.1.0",
     "vue-router": "4.4.0",
     "vue-toastification": "2.0.0-rc.5",

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

@@ -1,6 +1,7 @@
 import PLoading from '@squirrel/components/p-loading/p-loading.vue';
 import PSkeletonLoader from '@squirrel/components/p-skeleton-loader/p-skeleton-loader.vue';
 import { createWrapperFor, waitNT } from '@tests/jest.helpers';
+import { defineComponent, ref } from 'vue';
 import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 
 const createAppWrapper = () =>
@@ -218,4 +219,61 @@ describe('PLoading.vue', () => {
       });
     }).toThrowError('id is required');
   });
+
+  it(`accepts a component with reactive props as the content`, async () => {
+    const TestComponent = defineComponent({
+      name: 'TestComponent',
+      props: {
+        modelValue: {
+          type: Number,
+          required: true,
+        },
+      },
+      template: `<div>{{ modelValue }}</div>`,
+    });
+
+    const wrapper = createWrapperFor({
+      template: `
+        <button class="request-1-sec-component-props" @click="fireRequestComponentProps"></button>
+        <button class="update-props" @click="updateProps"></button>
+      `,
+      components: { TestComponent },
+      setup() {
+        const componentProps = ref({ modelValue: 0 });
+        const { loadingShow, loadingHide } = usePLoading();
+
+        const fireRequestComponentProps = async () => {
+          const id = `component-props`;
+          componentProps.value.modelValue = 10;
+          loadingShow({ id, content: TestComponent, props: componentProps });
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+          loadingHide(id);
+        };
+
+        const updateProps = () => {
+          componentProps.value.modelValue = 20;
+        };
+
+        return { loadingShow, loadingHide, fireRequestComponentProps, updateProps };
+      },
+    });
+
+    await wrapper.find('.request-1-sec-component-props').trigger('click');
+
+    jest.advanceTimersByTime(300);
+    await waitNT(appWrapper.vm);
+    const testComponent = appWrapper.findComponent(TestComponent);
+    expect(appWrapper.find('[aria-busy]').exists()).toBe(true);
+    expect(testComponent.exists()).toBe(true);
+    expect(testComponent.props().modelValue).toBe(10);
+
+    jest.advanceTimersByTime(300);
+    await waitNT(appWrapper.vm);
+    await wrapper.find('.update-props').trigger('click');
+    expect(testComponent.props().modelValue).toBe(20);
+
+    jest.advanceTimersByTime(500);
+    await waitNT(appWrapper.vm);
+    expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
+  });
 });

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

@@ -1,8 +1,20 @@
-import ComputationStatus from '@/playground/components/ComputationStatus.vue';
+import ComputationStatus1 from '@/playground/components/ComputationStatus1.vue';
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import PLoading from '@squirrel/components/p-loading/p-loading.vue';
+import { defineComponent, ref } from 'vue';
 import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 
+const TestComponent = defineComponent({
+  name: 'TestComponent',
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  template: `<div class="text-sm px-4 py-2 whitespace-nowrap">{{ modelValue }}</div>`,
+});
+
 export default {
   title: 'Components/PLoading',
   component: PLoading,
@@ -87,7 +99,7 @@ export const WithComponentAsContent = {
 
       const fireRequestComponent = async (time) => {
         const id = `component-${time}`;
-        loadingShow({ id, content: ComputationStatus });
+        loadingShow({ id, content: ComputationStatus1 });
         await new Promise((resolve) => setTimeout(resolve, time));
         loadingHide(id);
       };
@@ -107,3 +119,46 @@ export const WithComponentAsContent = {
     `,
   }),
 };
+
+export const WithComponentWithPropsAsContent = {
+  render: (args) => ({
+    components: { PLoading, PBtn, TestComponent },
+    setup() {
+      const { loadingShow, loadingHide } = usePLoading();
+      const loading = ref(false);
+      const componentProps = ref({ modelValue: '' });
+
+      const fireRequestComponentProps = async () => {
+        const id = `component-props`;
+        componentProps.value = { modelValue: 'Loading, please wait' };
+
+        loading.value = true;
+        loadingShow({ id, content: TestComponent, props: componentProps });
+
+        await new Promise((resolve) => setTimeout(resolve, 1500));
+
+        componentProps.value = { modelValue: 'Still loading...' };
+
+        await new Promise((resolve) => setTimeout(resolve, 1500));
+
+        componentProps.value = { modelValue: 'Almost there!' };
+
+        await new Promise((resolve) => setTimeout(resolve, 1500));
+
+        loadingHide(id);
+        loading.value = false;
+      };
+
+      return { args, loadingShow, fireRequestComponentProps, loading };
+    },
+    template: `
+    <PLoading />
+    <div class="mt-10">
+      <div>Demo with a component with props as content</div>
+      <div class="flex gap-4 mt-2">
+        <PBtn @click="fireRequestComponentProps" :disabled="loading">Display loader</PBtn>
+      </div>
+    </div>
+    `,
+  }),
+};

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

@@ -2,18 +2,20 @@
   <Transition name="pm-backdrop-transition" enter-active-class="fadeInDown" leave-active-class="fadeOutUp">
     <div v-if="show" class="fixed left-0 top-0 z-[120] flex w-full justify-center" aria-live="polite" aria-busy="true">
       <div
-        :style="{ width: `${width}px` }"
-        class="h-8 overflow-hidden whitespace-nowrap rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 px-4 pt-2 text-center text-sm font-semibold leading-none text-p-purple-60 shadow-sm transition-all duration-500"
+        :style="{ width: `${width}px`, height: `${height}px` }"
+        class="overflow-hidden rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 shadow-sm transition-all duration-300"
       >
-        <Component :is="content" v-if="isComponent(content)" />
-        <template v-else>{{ content }}</template>
+        <Transition enter-from-class="opacity-0" enter-active-class="transition duration-500">
+          <Component :is="content" v-if="isComponent(content)" v-bind="componentProps" />
+          <div v-else :class="textDivClass">{{ content }}</div>
+        </Transition>
       </div>
     </div>
   </Transition>
   <div v-if="content" class="invisible fixed">
-    <div ref="widthReference" class="inline-flex px-4">
-      <Component :is="content" v-if="isComponent(content)" />
-      <template v-else>{{ content }}</template>
+    <div ref="dimsReference">
+      <Component :is="content" v-if="isComponent(content)" v-bind="componentProps" />
+      <div v-else :class="textDivClass">{{ content }}</div>
     </div>
   </div>
 </template>
@@ -22,19 +24,23 @@
 import { type Component, 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`;
+
 defineOptions({
   name: 'PLoading',
 });
 
-const { show, content } = usePLoading();
-const widthReference = ref<HTMLElement | null>(null);
+const { show, content, props: componentProps } = usePLoading();
+const dimsReference = ref<HTMLElement | null>(null);
 const width = ref(0);
+const height = ref(0);
 
 watch(
   () => toValue(content),
   () => {
-    if (widthReference.value) {
-      width.value = widthReference.value.offsetWidth;
+    if (dimsReference.value) {
+      width.value = dimsReference.value.offsetWidth;
+      height.value = dimsReference.value.offsetHeight;
     }
   },
   { flush: 'post' }

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

@@ -9,11 +9,13 @@ type Content = string | Component;
 type LoadingItem = {
   id: string;
   content?: Content;
+  props?: Ref;
 };
 
 type UsePLoading = {
   show: Ref<boolean>;
   content: Content;
+  props: Ref;
   loadingShow: (loadingItem: LoadingItem) => void;
   loadingHide: (id: LoadingItem['id']) => void;
 };
@@ -22,6 +24,7 @@ const LOADING_TEXT = 'Loading...';
 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 => {
@@ -47,11 +50,21 @@ export const usePLoading = (options?: Options): UsePLoading => {
         loadingItem.content && typeof loadingItem.content === 'object'
           ? markRaw(loadingItem.content)
           : loadingItem.content || LOADING_TEXT,
+      props: loadingItem.props,
     });
   };
 
   const loadingHide = (id?: LoadingItem['id']) => {
-    loadingItems.value = id && typeof id === 'string' ? loadingItems.value.filter((item) => item.id !== id) : [];
+    if (id && typeof id === 'string') {
+      const index = loadingItems.value.findIndex((item) => item.id === id);
+
+      if (index !== -1) {
+        loadingItems.value.splice(index, 1);
+      }
+    } else {
+      loadingItems.value = [];
+    }
+
     if (loadingItems.value.length === 0) {
       show.value = false;
     }
@@ -66,5 +79,5 @@ export const usePLoading = (options?: Options): UsePLoading => {
     });
   }
 
-  return { show, content, loadingShow, loadingHide };
+  return { show, content, props, loadingShow, loadingHide };
 };