@pequity/squirrel 3.0.2 → 3.1.1

package/dist/cjs/index.js

@@ -60,10 +60,10 @@ const dom = require("./dom.js");
 const object = require("./object.js");
 const listKeyboardNavigation = require("./listKeyboardNavigation.js");
 const number = require("./number.js");
-const _hoisted_1$4 = { class: "flex h-12 min-w-fit select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
+const _hoisted_1$4 = { class: "flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
 const _hoisted_2$4 = { class: "whitespace-nowrap px-3" };
 const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "mx-4 h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1);
-const _hoisted_4$4 = { class: "flex min-w-fit" };
+const _hoisted_4$4 = { class: "flex" };
 const _hoisted_5$4 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _hoisted_6$4 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _hoisted_7$3 = { class: "flex flex-col bg-p-purple-60" };
@@ -83,7 +83,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
         vue.createElementVNode("div", vue.mergeProps({
-          class: "fixed bottom-6 z-[100] flex w-full justify-center",
+          class: "fixed bottom-6 left-1/2 z-[100] -translate-x-2/4",
           role: "alertdialog"
         }, _ctx.$attrs), [
           vue.createElementVNode("div", _hoisted_1$4, [

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/index.js

@@ -60,10 +60,10 @@ import { getNextActiveElement, isElement, isVisible } from "./dom.js";
 import { isObject } from "./object.js";
 import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
 import { toNumberOrNull } from "./number.js";
-const _hoisted_1$4 = { class: "flex h-12 min-w-fit select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
+const _hoisted_1$4 = { class: "flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
 const _hoisted_2$4 = { class: "whitespace-nowrap px-3" };
 const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("div", { class: "mx-4 h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1);
-const _hoisted_4$4 = { class: "flex min-w-fit" };
+const _hoisted_4$4 = { class: "flex" };
 const _hoisted_5$4 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _hoisted_6$4 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _hoisted_7$3 = { class: "flex flex-col bg-p-purple-60" };
@@ -83,7 +83,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Teleport, { to: "body" }, [
         createElementVNode("div", mergeProps({
-          class: "fixed bottom-6 z-[100] flex w-full justify-center",
+          class: "fixed bottom-6 left-1/2 z-[100] -translate-x-2/4",
           role: "alertdialog"
         }, _ctx.$attrs), [
           createElementVNode("div", _hoisted_1$4, [

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-action-bar/p-action-bar.vue.d.ts

@@ -5,10 +5,10 @@ type Props = {
 };
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "click:dismiss": () => void;
-    "click:action": (value: string | undefined) => void;
+    "click:action": (args_0: string | undefined) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>> & {
     "onClick:dismiss"?: (() => any) | undefined;
-    "onClick:action"?: ((value: string | undefined) => any) | undefined;
+    "onClick:action"?: ((args_0: string | undefined) => any) | undefined;
 }, {}, {}>;
 export default _default;
 

package/dist/squirrel/components/p-input-number/p-input-number.vue.d.ts

@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    inputRef: import("vue").Ref<any>;
+    inputRef: import("vue").Ref<any, any>;
     computedAttrs: import("vue").ComputedRef<{
         [x: string]: unknown;
     }>;

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/squirrel/components/p-select-list/useSelectList.d.ts

@@ -31,10 +31,10 @@ export declare const useSelectList: (props: Props, inputSearch: InputSearch, vir
     computedItems: import("vue").ComputedRef<AnyObject[]>;
     computedItemSize: import("vue").ComputedRef<number>;
     computedInsideSelected: import("vue").ComputedRef<boolean>;
-    internalItems: Ref<AnyObject[]>;
-    internalValue: Ref<AnyValue[]>;
-    search: Ref<string>;
-    rowVirtualizer: Ref<import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>>;
+    internalItems: Ref<AnyObject[], AnyObject[]>;
+    internalValue: Ref<AnyValue[], AnyValue[]>;
+    search: Ref<string, string>;
+    rowVirtualizer: Ref<import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>, import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>>;
     getValue: (index: number) => AnyValue;
     getText: (index: number) => AnyValue;
     isSelected: (val: AnyValue) => boolean;

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

@@ -4,10 +4,10 @@ type Options = {
     ths: Ref<HTMLElement[]>;
 };
 export declare const usePTableColResize: (options: Options) => {
-    isColResizing: Ref<boolean>;
-    colResizeHandleLeft: Ref<string>;
-    colResizingIndex: Ref<number>;
-    colResizingWidth: Ref<number>;
+    isColResizing: Ref<boolean, boolean>;
+    colResizeHandleLeft: Ref<string, string>;
+    colResizingIndex: Ref<number, number>;
+    colResizingWidth: Ref<number, number>;
     colResize: (e: MouseEvent) => void;
     colResizeStart: (e: MouseEvent, i: number) => void;
     colResizeStop: () => void;

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

@@ -11,12 +11,18 @@ export declare const usePTableRowVirtualizer: (options: Options) => {
     virtualRows: Ref<{
         key: number;
         index: number;
+    }[], {
+        key: number;
+        index: number;
+    }[] | {
+        key: number;
+        index: number;
     }[]>;
-    paddingTop: Ref<number>;
-    paddingBottom: Ref<number>;
-    measureElement: () => Ref<undefined>;
+    paddingTop: Ref<number, number>;
+    paddingBottom: Ref<number, number>;
+    measureElement: () => Ref<undefined, undefined>;
 } | {
-    virtualizer: Ref<import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>>;
+    virtualizer: Ref<import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>, import("@tanstack/vue-virtual").Virtualizer<HTMLElement, Element>>;
     virtualRows: ComputedRef<import("@tanstack/vue-virtual").VirtualItem<Element>[]>;
     paddingTop: ComputedRef<number>;
     paddingBottom: ComputedRef<number>;

package/dist/squirrel/composables/useInputClasses.d.ts

@@ -12,6 +12,6 @@ export declare function useInputClasses(props: Partial<Props>): {
     labelClasses: import("vue").ComputedRef<string>;
     selectClasses: import("vue").ComputedRef<string>;
     textareaClasses: import("vue").ComputedRef<string>;
-    errorMsgClasses: import("vue").Ref<string>;
+    errorMsgClasses: import("vue").Ref<string, string>;
 };
 export {};

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.1",
   "packageManager": "pnpm@8.9.2",
   "type": "module",
   "scripts": {
@@ -50,67 +50,66 @@
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.9",
-    "@babel/preset-env": "^7.24.8",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@pequity/eslint-config": "^0.0.13",
     "@popperjs/core": "2.11.8",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.2.5",
-    "@storybook/addon-actions": "^8.2.5",
-    "@storybook/addon-essentials": "^8.2.5",
-    "@storybook/addon-interactions": "^8.2.5",
-    "@storybook/addon-links": "^8.2.5",
-    "@storybook/blocks": "^8.2.5",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^8.2.5",
+    "@storybook/addon-a11y": "^8.2.7",
+    "@storybook/addon-actions": "^8.2.7",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-interactions": "^8.2.7",
+    "@storybook/addon-links": "^8.2.7",
+    "@storybook/blocks": "^8.2.7",
+    "@storybook/manager-api": "^8.2.7",
+    "@storybook/test": "^8.2.7",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.2.5",
-    "@storybook/vue3": "^8.2.5",
-    "@storybook/vue3-vite": "^8.2.5",
-    "@tanstack/vue-virtual": "3.8.3",
+    "@storybook/theming": "^8.2.7",
+    "@storybook/vue3": "^8.2.7",
+    "@storybook/vue3-vite": "^8.2.7",
+    "@tanstack/vue-virtual": "3.8.4",
     "@types/jest": "^29.5.12",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.11",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/compiler-sfc": "3.4.33",
+    "@types/node": "^22.1.0",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vue/compiler-sfc": "3.4.35",
     "@vue/test-utils": "^2.4.6",
     "@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",
-    "husky": "^9.1.1",
+    "glob": "^10.4.5",
+    "husky": "^9.1.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.7",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.40",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "resolve-tspaths": "^0.8.19",
-    "rimraf": "^5.0.8",
+    "rimraf": "^5.0.10",
     "sass": "^1.77.8",
     "semantic-release": "^24.0.0",
-    "storybook": "^8.2.5",
+    "storybook": "^8.2.7",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.6",
-    "ts-jest": "^29.2.3",
-    "typescript": "5.5.3",
+    "tailwindcss": "^3.4.7",
+    "ts-jest": "^29.2.4",
+    "typescript": "5.5.4",
     "v-calendar": "3.1.2",
-    "vite": "^5.3.4",
-    "vue": "3.4.32",
+    "vite": "^5.3.5",
+    "vue": "3.4.35",
     "vue-currency-input": "3.1.0",
-    "vue-router": "4.4.0",
+    "vue-router": "4.4.2",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "2.0.28"
+    "vue-tsc": "2.0.29"
   }
 }

package/squirrel/components/p-action-bar/p-action-bar.spec.js

@@ -62,13 +62,13 @@ describe('PActionBar.vue', () => {
     const mainDiv = await wrapper.find('.teleport-stub > .fixed.bottom-6');
     expect(mainDiv.exists()).toBe(true);
 
-    expect(mainDiv.classes()).toEqual(['fixed', 'bottom-6', 'z-[100]', 'flex', 'w-full', 'justify-center']);
+    expect(mainDiv.classes()).toEqual(['fixed', 'bottom-6', 'left-1/2', 'z-[100]', '-translate-x-2/4']);
     const actionBarDiv = mainDiv.find('.bg-p-purple-60');
     expect(actionBarDiv.exists()).toBe(true);
     expect(actionBarDiv.classes()).toEqual([
       'flex',
       'h-12',
-      'min-w-fit',
+      'w-max',
       'select-none',
       'items-center',
       'rounded-lg',

package/squirrel/components/p-action-bar/p-action-bar.stories.js

@@ -1,10 +1,39 @@
 import FileUploadIcon from '@squirrel/assets/file-upload-upload-icon.svg?inline';
 import PActionBar from '@squirrel/components/p-action-bar/p-action-bar.vue';
+import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import PaginateLeftIcon from '@squirrel/assets/pagination-left-icon.svg?inline';
 import PaginateRightIcon from '@squirrel/assets/pagination-right-icon.svg?inline';
 import { action } from '@storybook/addon-actions';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import { shallowRef } from 'vue';
 
+const actionBarActions = [
+  {
+    label: 'Upload',
+    icon: shallowRef(FileUploadIcon),
+    name: 'upload',
+  },
+  {
+    label: 'Say Hi',
+    name: 'greet',
+  },
+  {
+    label: 'Action Menu',
+    subActions: [
+      {
+        label: 'Subaction 1',
+        name: 'subaction1',
+        icon: shallowRef(PaginateLeftIcon),
+      },
+      {
+        label: 'Subaction 2',
+        name: 'subaction2',
+        icon: shallowRef(PaginateRightIcon),
+      },
+    ],
+  },
+];
+
 export default {
   title: 'Components/PActionBar',
   component: PActionBar,
@@ -27,35 +56,53 @@ export const Default = {
 
       return { args, onAction, onDismiss };
     },
-    template: `<div class="h-20"><PActionBar v-bind="args" @click:dismiss="onDismiss" @click:action="onAction" /></div>`,
+    template: `
+      <div class="h-20">
+        <PActionBar v-bind="args" @click:dismiss="onDismiss" @click:action="onAction" />
+      </div>
+    `,
   }),
   args: {
     label: 'Hello World',
-    actions: [
-      {
-        label: 'Upload',
-        icon: shallowRef(FileUploadIcon),
-        name: 'upload',
-      },
-      {
-        label: 'Say Hi',
-        name: 'greet',
-      },
-      {
-        label: 'Action Menu',
-        subActions: [
-          {
-            label: 'Subaction 1',
-            name: 'subaction1',
-            icon: shallowRef(PaginateLeftIcon),
-          },
-          {
-            label: 'Subaction 2',
-            name: 'subaction2',
-            icon: shallowRef(PaginateRightIcon),
-          },
-        ],
+    actions: actionBarActions,
+  },
+};
+
+export const WithAnElementBehind = {
+  render: (args) => ({
+    components: { PActionBar, PBtn },
+    setup() {
+      const onDismiss = action('dismiss');
+      const onAction = action('action');
+
+      return { args, onAction, onDismiss };
+    },
+    template: `
+      <div class="h-20">
+        <div class="flex items-center fixed bottom-0 h-28 w-full z-10 bg-p-gray-30">
+          <PBtn @click="args.onClick">Click me!</PBtn>
+        </div>
+        <PActionBar v-bind="args" @click:dismiss="onDismiss" @click:action="onAction" />
+      </div>
+    `,
+  }),
+  args: {
+    label: 'Hello World',
+    actions: actionBarActions,
+    onClick: fn(),
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByRole('button', { name: 'Click me!' }));
+
+    await waitFor(() => expect(args.onClick).toHaveBeenCalled());
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Elements behind `PActionBar` should be clickable.',
       },
-    ],
+    },
   },
 };

package/squirrel/components/p-action-bar/p-action-bar.vue

@@ -1,13 +1,13 @@
 <template>
   <Teleport to="body">
-    <div class="fixed bottom-6 z-[100] flex w-full justify-center" role="alertdialog" v-bind="$attrs">
+    <div class="fixed bottom-6 left-1/2 z-[100] -translate-x-2/4" role="alertdialog" v-bind="$attrs">
       <div
-        class="flex h-12 min-w-fit select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white"
+        class="flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white"
       >
         <PCloseBtn variant="dark" @click="$emit('click:dismiss')"></PCloseBtn>
         <p class="whitespace-nowrap px-3">{{ label }}</p>
         <div class="mx-4 h-9 w-0.5 shrink-0 rounded bg-p-purple-50"></div>
-        <div class="flex min-w-fit">
+        <div class="flex">
           <template v-for="actionOrMenu in actions" :key="`action-${actionOrMenu.label}`">
             <PBtn
               v-if="!actionOrMenu.subActions"
@@ -69,8 +69,8 @@ type Props = {
 };
 
 defineEmits<{
-  (e: 'click:dismiss'): void;
-  (e: 'click:action', value: PActionBarAction['name']): void;
+  'click:dismiss': [];
+  'click:action': [PActionBarAction['name']];
 }>();
 
 defineProps<Props>();

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

@@ -1,6 +1,5 @@
 import PAlert from '@squirrel/components/p-alert/p-alert.vue';
-import { expect } from '@storybook/jest';
-import { within } from '@storybook/testing-library';
+import { expect, within } from '@storybook/test';
 
 export default {
   title: 'Components/PAlert',

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

@@ -1,8 +1,7 @@
 import Icon from '@squirrel/assets/info-circle-icon.svg?inline';
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import { action } from '@storybook/addon-actions';
-import { expect } from '@storybook/jest';
-import { within } from '@storybook/testing-library';
+import { expect, within } from '@storybook/test';
 
 // You can also import an `md` file and use it as a story's description
 // import PBtnReadme from './PBtn.readme.md';

package/squirrel/components/p-close-btn/p-close-btn.stories.js

@@ -1,7 +1,6 @@
 import PCloseBtn from '@squirrel/components/p-close-btn/p-close-btn.vue';
 import { action } from '@storybook/addon-actions';
-import { expect } from '@storybook/jest';
-import { within } from '@storybook/testing-library';
+import { expect, within } from '@storybook/test';
 
 export default {
   title: 'Components/PCloseBtn',

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 };
 };

package/squirrel/components/p-select-btn/p-select-btn.stories.js

@@ -1,7 +1,6 @@
 import PSelectBtn from '@squirrel/components/p-select-btn/p-select-btn.vue';
-import { expect } from '@storybook/jest';
+import { expect, userEvent, within } from '@storybook/test';
 import { fieldArgTypes } from '@root/stories/common/field';
-import { userEvent, within } from '@storybook/testing-library';
 
 const selectItems = Object.freeze([
   { value: 1, text: 'Aleksandr Chappel', tooltip: 'lorem ipsum text 1' },

package/squirrel/components/p-select-pill/p-select-pill.stories.js

@@ -1,8 +1,7 @@
 import PSelectPill from '@squirrel/components/p-select-pill/p-select-pill.vue';
-import { expect } from '@storybook/jest';
+import { expect, userEvent, within } from '@storybook/test';
 import { fieldArgTypes } from '@root/stories/common/field';
 import { getCSSTransitionDuration, sleep } from '@root/stories/common/helpers';
-import { userEvent, within } from '@storybook/testing-library';
 
 const ACTIVE_CLASS = 'text-p-purple-60';