@pequity/squirrel 3.0.2-beta.2 → 3.0.2

package/dist/cjs/index.js

@@ -70,6 +70,7 @@ const _hoisted_7$3 = { class: "flex flex-col bg-p-purple-60" };
 const _hoisted_8$1 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   ...{
+    name: "PActionBar",
     inheritAttrs: false
   },
   __name: "p-action-bar",

package/dist/cjs/p-loading.js

@@ -12,23 +12,20 @@ const _hoisted_2 = {
   key: 0,
   class: "invisible fixed"
 };
-const textDivClass = `overflow-hidden whitespace-nowrap px-4 py-2.5 leading-none 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, props: componentProps } = usePLoading.usePLoading();
-    const dimsReference = vue.ref(null);
+    const { show, content } = usePLoading.usePLoading();
+    const widthReference = vue.ref(null);
     const width = vue.ref(0);
-    const height = vue.ref(0);
     vue.watch(
       () => vue.toValue(content),
       () => {
-        if (dimsReference.value) {
-          width.value = dimsReference.value.offsetWidth;
-          height.value = dimsReference.value.offsetHeight;
+        if (widthReference.value) {
+          width.value = widthReference.value.offsetWidth;
         }
       },
       { flush: "post" }
@@ -47,21 +44,12 @@ 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`, height: `${height.value}px` }),
-                class: "rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 shadow-sm transition-all duration-300"
+                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"
               }, [
-                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
-                })
+                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))
               ], 4)
             ])) : vue.createCommentVNode("", true)
           ]),
@@ -69,18 +57,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }),
         vue.unref(content) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
           vue.createElementVNode("div", {
-            ref_key: "dimsReference",
-            ref: dimsReference
+            ref_key: "widthReference",
+            ref: widthReference,
+            class: "inline-flex px-4"
           }, [
-            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))
+            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))
           ], 512)
         ])) : vue.createCommentVNode("", true)
       ], 64);
     };
   }
 });
-const pLoading = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-bf137f9d"]]);
+const pLoading = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-8c0c66ab"]]);
 module.exports = pLoading;

package/dist/cjs/p-select-pill.js

@@ -13,6 +13,7 @@ const getOffsetValues = (container) => {
   return res;
 };
 const _sfc_main = vue.defineComponent({
+  name: "PSelectPill",
   props: {
     modelValue: {
       type: [String, Number],

package/dist/cjs/p-toggle.js

@@ -26,6 +26,7 @@ const TOGGLE_CLASSES = [
   "peer-disabled:after:border-p-blue-10"
 ].join(" ");
 const _sfc_main = vue.defineComponent({
+  name: "PToggle",
   mixins: [inputClassesMixin],
   inheritAttrs: false,
   props: {
@@ -110,5 +111,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 14, _hoisted_1);
 }
-const pToggle = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3a6de4eb"]]);
+const pToggle = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7aa9c3e7"]]);
 module.exports = pToggle;

package/dist/cjs/usePLoading.js

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

package/dist/es/index.js

@@ -70,6 +70,7 @@ const _hoisted_7$3 = { class: "flex flex-col bg-p-purple-60" };
 const _hoisted_8$1 = { class: "flex items-center gap-2 px-1 py-0.5" };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...{
+    name: "PActionBar",
     inheritAttrs: false
   },
   __name: "p-action-bar",

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

package/dist/es/p-select-pill.js

@@ -12,6 +12,7 @@ const getOffsetValues = (container) => {
   return res;
 };
 const _sfc_main = defineComponent({
+  name: "PSelectPill",
   props: {
     modelValue: {
       type: [String, Number],

package/dist/es/p-toggle.js

@@ -25,6 +25,7 @@ const TOGGLE_CLASSES = [
   "peer-disabled:after:border-p-blue-10"
 ].join(" ");
 const _sfc_main = defineComponent({
+  name: "PToggle",
   mixins: [inputClassesMixin],
   inheritAttrs: false,
   props: {
@@ -109,7 +110,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 14, _hoisted_1);
 }
-const pToggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3a6de4eb"]]);
+const pToggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7aa9c3e7"]]);
 export {
   pToggle as default
 };

package/dist/es/usePLoading.js

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

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

@@ -6,12 +6,10 @@ 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

@@ -233,7 +233,7 @@ div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-divider {
 .filter.active[data-v-cbac2434]:hover {
   background: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='20'%20height='20'%20rx='4'%20fill='black'%20fill-opacity='0.05'/%3e%3cpath%20d='M15.5%206.72998H4.5C4.36739%206.72998%204.24021%206.6773%204.14645%206.58353C4.05268%206.48977%204%206.36259%204%206.22998C4%206.09737%204.05268%205.9702%204.14645%205.87643C4.24021%205.78266%204.36739%205.72998%204.5%205.72998H15.5C15.6326%205.72998%2015.7598%205.78266%2015.8536%205.87643C15.9473%205.9702%2016%206.09737%2016%206.22998C16%206.36259%2015.9473%206.48977%2015.8536%206.58353C15.7598%206.6773%2015.6326%206.72998%2015.5%206.72998Z'%20fill='%230F45AF'/%3e%3cpath%20d='M14.33%209.245H5.67C5.53739%209.245%205.41021%209.19232%205.31644%209.09855C5.22268%209.00478%205.17%208.8776%205.17%208.745C5.17%208.61239%205.22268%208.48521%205.31644%208.39144C5.41021%208.29767%205.53739%208.245%205.67%208.245H14.33C14.4626%208.245%2014.5898%208.29767%2014.6836%208.39144C14.7773%208.48521%2014.83%208.61239%2014.83%208.745C14.83%208.8776%2014.7773%209.00478%2014.6836%209.09855C14.5898%209.19232%2014.4626%209.245%2014.33%209.245Z'%20fill='%230F45AF'/%3e%3cpath%20d='M11.605%2014.27H8.395C8.2624%2014.27%208.13522%2014.2173%208.04145%2014.1235C7.94768%2014.0297%207.895%2013.9026%207.895%2013.77C7.895%2013.6374%207.94768%2013.5102%208.04145%2013.4164C8.13522%2013.3226%208.2624%2013.27%208.395%2013.27H11.605C11.7376%2013.27%2011.8648%2013.3226%2011.9586%2013.4164C12.0523%2013.5102%2012.105%2013.6374%2012.105%2013.77C12.105%2013.9026%2012.0523%2014.0297%2011.9586%2014.1235C11.8648%2014.2173%2011.7376%2014.27%2011.605%2014.27Z'%20fill='%230F45AF'/%3e%3cpath%20d='M13.155%2011.755H6.845C6.71239%2011.755%206.58522%2011.7023%206.49145%2011.6086C6.39768%2011.5148%206.345%2011.3876%206.345%2011.255C6.345%2011.1224%206.39768%2010.9952%206.49145%2010.9015C6.58522%2010.8077%206.71239%2010.755%206.845%2010.755H13.155C13.2876%2010.755%2013.4148%2010.8077%2013.5086%2010.9015C13.6023%2010.9952%2013.655%2011.1224%2013.655%2011.255C13.655%2011.3876%2013.6023%2011.5148%2013.5086%2011.6086C13.4148%2011.7023%2013.2876%2011.755%2013.155%2011.755Z'%20fill='%230F45AF'/%3e%3c/svg%3e") no-repeat;
 }
-.shadow-inner-toggle[data-v-3a6de4eb]::after {
+.shadow-inner-toggle[data-v-7aa9c3e7]::after {
   box-shadow:
     rgba(0, 0, 0, 0.3) 0px 1px 2px 0px,
     rgba(0, 0, 0, 0.05) 0px 0px 1px 0px inset;
@@ -381,12 +381,12 @@ from {
 to {
     opacity: 0;
 }
-}.fadeInDown[data-v-bf137f9d] {
+}.fadeInDown[data-v-8c0c66ab] {
   animation-duration: 0.4s;
   animation-fill-mode: both;
-  animation-name: fadeInDown-bf137f9d;
+  animation-name: fadeInDown-8c0c66ab;
 }
-@keyframes fadeInDown-bf137f9d {
+@keyframes fadeInDown-8c0c66ab {
 0% {
     opacity: 0;
     transform: translate3d(0, -100%, 0);
@@ -396,12 +396,12 @@ to {
     transform: none;
 }
 }
-.fadeOutUp[data-v-bf137f9d] {
+.fadeOutUp[data-v-8c0c66ab] {
   animation-duration: 0.25s;
   animation-fill-mode: both;
-  animation-name: fadeOutUp-bf137f9d;
+  animation-name: fadeOutUp-8c0c66ab;
 }
-@keyframes fadeOutUp-bf137f9d {
+@keyframes fadeOutUp-8c0c66ab {
 0% {
     opacity: 1;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "3.0.2-beta.2",
+  "version": "3.0.2",
   "packageManager": "pnpm@8.9.2",
   "type": "module",
   "scripts": {
@@ -39,14 +39,14 @@
   "module": "./dist/es/index.js",
   "peerDependencies": {
     "@popperjs/core": "^2.11.8",
-    "@tanstack/vue-virtual": "^3.2.0",
-    "dayjs": "^1.11.10",
+    "@tanstack/vue-virtual": "^3.8.3",
+    "dayjs": "^1.11.12",
     "floating-vue": "^5.2.2",
     "lodash-es": "^4.17.21",
     "v-calendar": "^3.1.2",
-    "vue": "^3.4.21",
+    "vue": "^3.4.33",
     "vue-currency-input": "^3.1.0",
-    "vue-router": "^4.3.0",
+    "vue-router": "^4.4.0",
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
@@ -58,26 +58,26 @@
     "@popperjs/core": "2.11.8",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.2.4",
-    "@storybook/addon-actions": "^8.2.4",
-    "@storybook/addon-essentials": "^8.2.4",
-    "@storybook/addon-interactions": "^8.2.4",
-    "@storybook/addon-links": "^8.2.4",
-    "@storybook/blocks": "^8.2.4",
+    "@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.4",
+    "@storybook/manager-api": "^8.2.5",
     "@storybook/test-runner": "^0.19.1",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.2.4",
-    "@storybook/vue3": "^8.2.4",
-    "@storybook/vue3-vite": "^8.2.4",
+    "@storybook/theming": "^8.2.5",
+    "@storybook/vue3": "^8.2.5",
+    "@storybook/vue3-vite": "^8.2.5",
     "@tanstack/vue-virtual": "3.8.3",
     "@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.32",
+    "@vue/compiler-sfc": "3.4.33",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
     "autoprefixer": "^10.4.19",
@@ -87,7 +87,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "floating-vue": "5.2.2",
     "glob": "^10.4.3",
-    "husky": "^9.0.11",
+    "husky": "^9.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.7",
@@ -100,10 +100,10 @@
     "rimraf": "^5.0.8",
     "sass": "^1.77.8",
     "semantic-release": "^24.0.0",
-    "storybook": "^8.2.4",
+    "storybook": "^8.2.5",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.6",
-    "ts-jest": "^29.2.2",
+    "ts-jest": "^29.2.3",
     "typescript": "5.5.3",
     "v-calendar": "3.1.2",
     "vite": "^5.3.4",
@@ -111,6 +111,6 @@
     "vue-currency-input": "3.1.0",
     "vue-router": "4.4.0",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "2.0.26"
+    "vue-tsc": "2.0.28"
   }
 }

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

@@ -59,6 +59,7 @@ import PDropdown from '@squirrel/components/p-dropdown/p-dropdown.vue';
 import { type PActionBarAction } from '@squirrel/components/p-action-bar/p-action-bar.types';
 
 defineOptions({
+  name: 'PActionBar',
   inheritAttrs: false,
 });
 

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

@@ -2,20 +2,18 @@
   <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`, height: `${height}px` }"
-        class="rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 shadow-sm transition-all duration-300"
+        :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"
       >
-        <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>
+        <Component :is="content" v-if="isComponent(content)" />
+        <template v-else>{{ content }}</template>
       </div>
     </div>
   </Transition>
   <div v-if="content" class="invisible fixed">
-    <div ref="dimsReference">
-      <Component :is="content" v-if="isComponent(content)" v-bind="componentProps" />
-      <div v-else :class="textDivClass">{{ content }}</div>
+    <div ref="widthReference" class="inline-flex px-4">
+      <Component :is="content" v-if="isComponent(content)" />
+      <template v-else>{{ content }}</template>
     </div>
   </div>
 </template>
@@ -24,23 +22,19 @@
 import { type Component, ref, toValue, watch } from 'vue';
 import { usePLoading } from '@squirrel/components/p-loading/usePLoading';
 
-const textDivClass = `overflow-hidden whitespace-nowrap px-4 py-2.5 leading-none text-center text-sm font-semibold text-p-purple-60`;
-
 defineOptions({
   name: 'PLoading',
 });
 
-const { show, content, props: componentProps } = usePLoading();
-const dimsReference = ref<HTMLElement | null>(null);
+const { show, content } = usePLoading();
+const widthReference = ref<HTMLElement | null>(null);
 const width = ref(0);
-const height = ref(0);
 
 watch(
   () => toValue(content),
   () => {
-    if (dimsReference.value) {
-      width.value = dimsReference.value.offsetWidth;
-      height.value = dimsReference.value.offsetHeight;
+    if (widthReference.value) {
+      width.value = widthReference.value.offsetWidth;
     }
   },
   { flush: 'post' }

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

@@ -9,13 +9,11 @@ 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;
 };
@@ -24,7 +22,6 @@ 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 => {
@@ -50,21 +47,11 @@ 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']) => {
-    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 = [];
-    }
-
+    loadingItems.value = id && typeof id === 'string' ? loadingItems.value.filter((item) => item.id !== id) : [];
     if (loadingItems.value.length === 0) {
       show.value = false;
     }
@@ -79,5 +66,5 @@ export const usePLoading = (options?: Options): UsePLoading => {
     });
   }
 
-  return { show, content, props, loadingShow, loadingHide };
+  return { show, content, loadingShow, loadingHide };
 };

package/squirrel/components/p-select-pill/p-select-pill.vue

@@ -60,6 +60,7 @@ const getOffsetValues = (container: HTMLElement) => {
 };
 
 export default defineComponent({
+  name: 'PSelectPill',
   props: {
     modelValue: {
       type: [String, Number],

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

@@ -54,6 +54,7 @@ const TOGGLE_CLASSES = [
 ].join(' ');
 
 export default defineComponent({
+  name: 'PToggle',
   mixins: [inputClassesMixin],
   inheritAttrs: false,
   props: {