@pequity/squirrel 8.0.1 → 8.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "packageManager": "pnpm@10.6.4",
   "type": "module",
   "scripts": {
@@ -18,7 +18,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test-storybook": "test-storybook",
-    "quality": "pnpm run lint && pnpm run typecheck && pnpm run test:unit && pnpm run build",
+    "quality": "pnpm run lint && pnpm run typecheck && vitest run && pnpm run build",
     "prepare": "husky"
   },
   "files": [
@@ -50,7 +50,7 @@
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@pequity/eslint-config": "^2.0.0",
-    "@playwright/test": "^1.51.1",
+    "@playwright/test": "^1.52.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-a11y": "^8.6.12",
@@ -68,21 +68,21 @@
     "@tanstack/vue-virtual": "3.13.6",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.14.0",
+    "@types/node": "^22.15.2",
     "@vitejs/plugin-vue": "^5.2.3",
-    "@vitest/coverage-v8": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.2",
     "@vue/compiler-sfc": "3.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.2",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.24.0",
+    "eslint": "^9.25.1",
     "eslint-plugin-storybook": "^0.12.0",
     "floating-vue": "5.2.2",
-    "glob": "^11.0.1",
+    "glob": "^11.0.2",
     "husky": "^9.1.7",
     "iconify-icon": "^2.3.0",
-    "jsdom": "^26.0.0",
-    "lint-staged": "^15.5.0",
+    "jsdom": "^26.1.0",
+    "lint-staged": "^15.5.1",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
     "postcss": "^8.5.3",
@@ -90,19 +90,19 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.86.3",
+    "sass": "^1.87.0",
     "semantic-release": "^24.2.3",
     "storybook": "^8.6.12",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.8.3",
-    "vite": "^6.2.5",
-    "vitest": "^3.1.1",
+    "vite": "^6.3.3",
+    "vitest": "^3.1.2",
     "vue": "3.5.13",
     "vue-currency-input": "3.2.1",
-    "vue-router": "4.5.0",
+    "vue-router": "4.5.1",
     "vue-toastification": "2.0.0-rc.5",
-    "vue-tsc": "2.2.8"
+    "vue-tsc": "2.2.10"
   },
   "dependencies": {
     "tailwind-variants": "^1.0.0"

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

@@ -1,5 +1,6 @@
 import PActionBar from '@squirrel/components/p-action-bar/p-action-bar.vue';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { type VueWrapper } from '@vue/test-utils';
 import { defineComponent } from 'vue';
 
 const createPDropdownStub = () => {
@@ -77,7 +78,7 @@ describe('PActionBar.vue', () => {
       },
     });
 
-    const mainDiv = await wrapper.find('.teleport-stub > .fixed.bottom-6');
+    const mainDiv = wrapper.find('.teleport-stub > .fixed.bottom-6');
     expect(mainDiv.exists()).toBe(true);
 
     expect(mainDiv.classes()).toEqual(['fixed', 'bottom-6', 'left-1/2', 'z-[100]', '-translate-x-2/4']);
@@ -97,14 +98,19 @@ describe('PActionBar.vue', () => {
       'text-white',
     ]);
 
-    const paragraph = await wrapper.find('p');
+    const buttons = wrapper.findAllComponents({ name: 'PBtn' });
+    buttons.forEach((button: VueWrapper) => {
+      expect(button.find('.slot-wrapper > div').classes()).toEqual(['flex', 'items-center', 'gap-2', 'px-1']);
+    });
+
+    const paragraph = wrapper.find('p');
     expect(paragraph.text()).toContain('Hello World');
 
-    const dismissIcon = await wrapper.find('i.x-white-icon');
+    const dismissIcon = wrapper.find('i.x-white-icon');
     expect(dismissIcon.exists()).toBe(true);
     expect(actionBarDiv.find('.text-xs').text()).toBe('Clear All');
 
-    const actionBtn = await wrapper.find('button.inline-block');
+    const actionBtn = wrapper.find('button.inline-block');
     expect(actionBtn.exists()).toBe(true);
     expect(actionBtn.text()).toContain('Say Hi');
   });
@@ -125,9 +131,9 @@ describe('PActionBar.vue', () => {
       },
     });
 
-    const mainDiv = await wrapper.find('.teleport-stub > .fixed.bottom-6');
+    const mainDiv = wrapper.find('.teleport-stub > .fixed.bottom-6');
 
-    await mainDiv.find('.p-dropdown-stub > button').trigger('click');
+    mainDiv.find('.p-dropdown-stub > button').trigger('click');
 
     await wrapper.vm.$nextTick();
 
@@ -155,7 +161,7 @@ describe('PActionBar.vue', () => {
       },
     });
 
-    const actionBar = await wrapper.find('.teleport-stub > div');
+    const actionBar = wrapper.find('.teleport-stub > div');
 
     expect(actionBar.attributes('role')).toBe('alertdialog');
     expect(actionBar.attributes('data-testid')).toBe('TestId');
@@ -168,7 +174,7 @@ describe('PActionBar.vue', () => {
       props: { show: true, label: 'Hello World', actions: [{ label: 'Say Hi', name: 'greet' }] },
     });
 
-    const button = await wrapper.find('button.inline-flex');
+    const button = wrapper.find('button.inline-flex');
 
     await button.trigger('click');
 
@@ -187,15 +193,15 @@ describe('PActionBar.vue', () => {
       },
     });
 
-    const button = await wrapper.findByText('Say Hi', 'button');
+    const button = wrapper.findByText('Say Hi', 'button');
     await button.trigger('click');
 
     expect(wrapper.emitted()['click:action'][0]).toEqual(['greet']);
 
-    const actionMenu = await wrapper.findByText('Action menu', 'button');
+    const actionMenu = wrapper.findByText('Action menu', 'button');
     await actionMenu.trigger('click');
 
-    const subAction = await wrapper.findByText('Say Bye', 'button');
+    const subAction = wrapper.findByText('Say Bye', 'button');
     await subAction.trigger('click');
 
     expect(wrapper.emitted()['click:action'][1]).toEqual(['bye']);

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

@@ -19,17 +19,17 @@
               type="secondary-ghost-dark"
               @click="$emit('click:action', actionOrMenu.name)"
             >
-              <div class="flex items-center gap-2 px-1 py-0.5">
+              <div class="flex items-center gap-2 px-1">
                 <Component :is="actionOrMenu.icon" v-if="isComponent(actionOrMenu.icon)" class="h-4 w-4" />
-                <PIcon v-if="isString(actionOrMenu.icon)" :icon="actionOrMenu.icon" width="16px" height="16px" />
+                <PIcon v-if="isString(actionOrMenu.icon)" :icon="actionOrMenu.icon" width="16" />
                 <div>{{ actionOrMenu.label }}</div>
               </div>
             </PBtn>
             <PDropdown v-else placement="top" strategy="fixed">
               <PBtn size="sm" type="secondary-ghost-dark">
-                <div class="flex items-center gap-2 px-1 py-0.5">
+                <div class="flex items-center gap-2 px-1">
                   <Component :is="actionOrMenu.icon" v-if="isComponent(actionOrMenu.icon)" class="h-4 w-4" />
-                  <PIcon v-if="isString(actionOrMenu.icon)" :icon="actionOrMenu.icon" width="16px" height="16px" />
+                  <PIcon v-if="isString(actionOrMenu.icon)" :icon="actionOrMenu.icon" width="16" />
                   <div>{{ actionOrMenu.label }}</div>
                 </div>
               </PBtn>
@@ -42,9 +42,9 @@
                       type="secondary-ghost-dark"
                       @click="($emit('click:action', subaction.name), hide())"
                     >
-                      <div class="flex items-center gap-2 px-1 py-0.5">
+                      <div class="flex items-center gap-2 px-1">
                         <Component :is="subaction.icon" v-if="isComponent(subaction.icon)" class="h-4 w-4" />
-                        <PIcon v-if="isString(subaction.icon)" :icon="subaction.icon" width="16px" height="16px" />
+                        <PIcon v-if="isString(subaction.icon)" :icon="subaction.icon" width="16" />
                         <div>{{ subaction.label }}</div>
                       </div>
                     </PBtn>

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

@@ -24,7 +24,7 @@ const createWrapper = (options) => {
       <button class="request-1-sec-component" @click="fireRequestComponent(1000)"></button>
     `,
       setup() {
-        const { loadingShow, loadingHide, show } = usePLoading(options);
+        const { loadingShow, loadingHide, show, isLoading } = usePLoading(options);
 
         const fireRequest = async (time) => {
           const id = `default-${time}`;
@@ -47,7 +47,7 @@ const createWrapper = (options) => {
           loadingHide(id);
         };
 
-        return { loadingShow, loadingHide, fireRequest, fireRequestText, fireRequestComponent, show };
+        return { loadingShow, loadingHide, fireRequest, fireRequestText, fireRequestComponent, show, isLoading };
       },
     },
     {
@@ -90,6 +90,39 @@ describe('PLoading.vue', () => {
     expect(appWrapper.find('[aria-busy]').exists()).toBe(false);
   });
 
+  it('correctly reports loading state for a single loader', async () => {
+    const wrapper = createWrapper({ delay: 0 });
+
+    await wrapper.find('.request-1-sec').trigger('click');
+
+    vi.advanceTimersByTime(500);
+    await waitNT(appWrapper.vm);
+    expect(wrapper.vm.isLoading('default-1000')).toBe(true);
+
+    vi.advanceTimersByTime(600);
+    await waitNT(appWrapper.vm);
+    expect(wrapper.vm.isLoading('default-1000')).toBe(false);
+  });
+
+  it('correctly reports loading state for multiple loaders', async () => {
+    const wrapper = createWrapper({ delay: 0 });
+
+    await wrapper.find('.request-1-sec').trigger('click');
+    await wrapper.find('.request-3-secs').trigger('click');
+
+    vi.advanceTimersByTime(500);
+    await waitNT(appWrapper.vm);
+    expect(wrapper.vm.isLoading()).toBe(true);
+
+    vi.advanceTimersByTime(1000);
+    await waitNT(appWrapper.vm);
+    expect(wrapper.vm.isLoading()).toBe(true);
+
+    vi.advanceTimersByTime(2000);
+    await waitNT(appWrapper.vm);
+    expect(wrapper.vm.isLoading()).toBe(false);
+  });
+
   it(`doesn't show the loading indicator when loadingHide gets called before the delay time has passed`, async () => {
     const wrapper = createWrapper({ delay: 1000 });
 

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

@@ -22,6 +22,7 @@ type UsePLoading = {
   props: Ref;
   loadingShow: (loadingItem: LoadingItemOption) => void;
   loadingHide: (id?: LoadingItemOption['id']) => void;
+  isLoading: (id?: LoadingItemOption['id']) => boolean;
 };
 
 const LOADING_TEXT = 'Loading...';
@@ -86,6 +87,14 @@ export const usePLoading = (options?: Options): UsePLoading => {
     }
   };
 
+  const isLoading = (id?: LoadingItemOption['id']) => {
+    if (id) {
+      return loadingItems.value.some((item) => item.id === id);
+    }
+
+    return loadingItems.value.length > 0;
+  };
+
   if (scope) {
     onScopeDispose(() => {
       if (loadingItems.value.some((item) => item.clearOnDispose === false)) {
@@ -102,5 +111,5 @@ export const usePLoading = (options?: Options): UsePLoading => {
     });
   }
 
-  return { show, content, props, loadingShow, loadingHide };
+  return { show, content, props, loadingShow, loadingHide, isLoading };
 };