@pequity/squirrel 3.0.2-beta.2 → 3.1.0

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,7 +12,7 @@ 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 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"
@@ -48,7 +48,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             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"
+                class: "overflow-hidden rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 shadow-sm transition-all duration-300"
               }, [
                 vue.createVNode(vue.Transition, {
                   "enter-from-class": "opacity-0",
@@ -82,5 +82,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-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-6f528d56"]]);
 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/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

@@ -11,7 +11,7 @@ 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 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"
@@ -47,7 +47,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             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"
+                class: "overflow-hidden rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 shadow-sm transition-all duration-300"
               }, [
                 createVNode(Transition, {
                   "enter-from-class": "opacity-0",
@@ -81,7 +81,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pLoading = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bf137f9d"]]);
+const pLoading = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6f528d56"]]);
 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/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-6f528d56] {
   animation-duration: 0.4s;
   animation-fill-mode: both;
-  animation-name: fadeInDown-bf137f9d;
+  animation-name: fadeInDown-6f528d56;
 }
-@keyframes fadeInDown-bf137f9d {
+@keyframes fadeInDown-6f528d56 {
 0% {
     opacity: 0;
     transform: translate3d(0, -100%, 0);
@@ -396,12 +396,12 @@ to {
     transform: none;
 }
 }
-.fadeOutUp[data-v-bf137f9d] {
+.fadeOutUp[data-v-6f528d56] {
   animation-duration: 0.25s;
   animation-fill-mode: both;
-  animation-name: fadeOutUp-bf137f9d;
+  animation-name: fadeOutUp-6f528d56;
 }
-@keyframes fadeOutUp-bf137f9d {
+@keyframes fadeOutUp-6f528d56 {
 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.1.0",
   "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,36 +58,36 @@
     "@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",
     "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.0.11",
+    "glob": "^10.4.5",
+    "husky": "^9.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.7",
@@ -97,20 +97,20 @@
     "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.4",
+    "storybook": "^8.2.5",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.6",
-    "ts-jest": "^29.2.2",
-    "typescript": "5.5.3",
+    "ts-jest": "^29.2.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",
-    "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.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

@@ -3,7 +3,7 @@
     <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"
+        class="overflow-hidden rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 shadow-sm transition-all duration-300"
       >
         <Transition enter-from-class="opacity-0" enter-active-class="transition duration-500">
           <Component :is="content" v-if="isComponent(content)" v-bind="componentProps" />
@@ -24,7 +24,7 @@
 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`;
+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',

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: {