@pequity/squirrel 5.2.3 → 5.3.0

package/dist/es/p-loading.js

@@ -1,4 +1,5 @@
 import { defineComponent, ref, watch, toValue, onBeforeUnmount, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, unref, createElementBlock, createElementVNode, normalizeStyle, resolveDynamicComponent, normalizeProps, mergeProps, normalizeClass, toDisplayString, createCommentVNode } from "vue";
+import { i as isComponent } from "./chunks/component.js";
 import { usePLoading } from "./usePLoading.js";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const _hoisted_1 = {
@@ -32,10 +33,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       },
       { flush: "post" }
     );
-    const isComponent = (content2) => {
-      const isComponent2 = typeof content2 === "object" && content2 !== null;
-      return isComponent2;
-    };
     onBeforeUnmount(() => {
       loadingHide();
     });
@@ -57,7 +54,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "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", {
+                    unref(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))
@@ -74,7 +71,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ref_key: "dimsReference",
             ref: dimsReference
           }, [
-            isComponent(unref(content)) ? (openBlock(), createBlock(resolveDynamicComponent(unref(content)), normalizeProps(mergeProps({ key: 0 }, unref(componentProps))), null, 16)) : (openBlock(), createElementBlock("div", {
+            unref(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))
@@ -84,7 +81,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pLoading = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f0f6bdd4"]]);
+const pLoading = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-980d32e1"]]);
 export {
   pLoading as default
 };

package/dist/es/string.js

@@ -1,12 +1,32 @@
-const toString = (value) => {
-  if (typeof value === "number" && (!isFinite(value) || isNaN(value))) {
-    return "";
-  }
-  if (typeof value !== "string" && typeof value !== "number") {
-    return "";
-  }
-  return String(value);
-};
-export {
-  toString
-};
+import { t as toString, i as isString } from "./chunks/string.js";
+describe("toString", () => {
+  it.each(["", /* @__PURE__ */ new Date(), NaN, Infinity, {}, [], true, false, null, void 0])(
+    "returns an empty string if input is %s",
+    (val) => {
+      expect(toString(val)).toBe("");
+    }
+  );
+  it("returns a string when the value is a string", () => {
+    expect(toString("test")).toBe("test");
+  });
+  it("converts the value to a string when the value is a number", () => {
+    expect(toString(290349822e-2)).toBe("2903498.22");
+  });
+});
+describe("isString", () => {
+  it("should return true for a string", () => {
+    expect(isString("hello")).toBe(true);
+  });
+  it.each([
+    [123, false],
+    [{}, false],
+    [[], false],
+    [null, false],
+    [void 0, false],
+    [true, false],
+    [() => {
+    }, false]
+  ])("should return %s for %p", (input, expected) => {
+    expect(isString(input)).toBe(expected);
+  });
+});

package/dist/es/useSelectList.js

@@ -2,7 +2,7 @@ import { ref, computed, watch, onUnmounted, nextTick } from "vue";
 import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
 import { cloneDeep, uniqBy } from "lodash-es";
 import { isObject } from "./object.js";
-import { toString } from "./string.js";
+import { t as toString } from "./chunks/string.js";
 import { useVirtualizer } from "@tanstack/vue-virtual";
 const createInternalItems = (items) => {
   let arr = Array.isArray(items) ? items.slice() : [];

package/dist/squirrel/components/p-action-bar/p-action-bar.types.d.ts

@@ -1,10 +1,11 @@
+import { type Component } from 'vue';
 export type PActionBarAction = {
     name?: string;
     label: string;
-    icon?: string;
+    icon?: string | Component;
     subActions?: {
         name: string;
         label: string;
-        icon?: string;
+        icon?: string | Component;
     }[];
 };

package/dist/squirrel/utils/component.d.ts

@@ -0,0 +1,2 @@
+import { type Component } from 'vue';
+export declare const isComponent: (val: unknown) => val is Component;

package/dist/squirrel/utils/component.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/squirrel/utils/string.d.ts

@@ -1 +1,2 @@
+export declare const isString: (val: unknown) => val is string;
 export declare const toString: (value: unknown) => string;

package/dist/squirrel/utils/string.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/style.css

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.2.3",
+  "version": "5.3.0",
   "packageManager": "pnpm@9.11.0",
   "type": "module",
   "scripts": {
@@ -72,7 +72,7 @@
     "@tanstack/vue-virtual": "3.10.8",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.7.0",
+    "@types/node": "^22.7.2",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitest/coverage-v8": "^2.1.1",
     "@vue/compiler-sfc": "3.4.38",

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

@@ -1,26 +1,15 @@
 import PActionBar from '@squirrel/components/p-action-bar/p-action-bar.vue';
 import { createWrapperFor } from '@tests/vitest.helpers';
+import { defineComponent } from 'vue';
 
 const createPDropdownStub = () => {
-  return {
+  return defineComponent({
     name: 'PDropdownStub',
-    template: `
-      <div class="pdropdown-stub">
-        <slot></slot>
-        <div v-if="show" class="pdropdown-stub-popper">
-          <slot name="popper"></slot>
-        </div>
-      </div>`,
     data() {
       return {
         show: false,
       };
     },
-    methods: {
-      toggleShow() {
-        this.show = !this.show;
-      },
-    },
     async mounted() {
       const btn = this.$el.querySelector('button');
 
@@ -31,7 +20,19 @@ const createPDropdownStub = () => {
 
       btn.removeEventListener('click', this.toggleShow);
     },
-  };
+    methods: {
+      toggleShow() {
+        this.show = !this.show;
+      },
+    },
+    template: `
+      <div class="p-dropdown-stub">
+        <slot></slot>
+        <div v-if="show" class="p-dropdown-stub-popper">
+          <slot name="popper"></slot>
+        </div>
+      </div>`,
+  });
 };
 
 const createComponentWrapper = (args = {}) =>
@@ -103,6 +104,37 @@ describe('PActionBar.vue', () => {
     expect(actionBtn.text()).toContain('Say Hi');
   });
 
+  it('renders p-icons', async () => {
+    const wrapper = createComponentWrapper({
+      props: {
+        show: true,
+        label: 'Hello World',
+        actions: [
+          { label: 'Say Hi', name: 'greet', icon: 'test-icon-1' },
+          {
+            label: 'Action menu',
+            icon: 'test-icon-2',
+            subActions: [{ label: 'Say Bye', name: 'bye', icon: 'test-icon-3' }],
+          },
+        ],
+      },
+    });
+
+    const mainDiv = await wrapper.find('.teleport-stub > .fixed.bottom-6');
+
+    await mainDiv.find('.p-dropdown-stub > button').trigger('click');
+
+    await wrapper.vm.$nextTick();
+
+    const icons = mainDiv.findAll('iconify-icon');
+
+    expect(icons.length).toBe(3);
+
+    expect(icons[0].attributes().icon).toBe('test-icon-1');
+    expect(icons[1].attributes().icon).toBe('test-icon-2');
+    expect(icons[2].attributes().icon).toBe('test-icon-3');
+  });
+
   it('attrs fall through ', async () => {
     const wrapper = createComponentWrapper({
       props: {

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

@@ -14,6 +14,7 @@ const actionBarActions = [
   },
   {
     label: 'Say Hi',
+    icon: 'delete',
     name: 'greet',
   },
   {
@@ -29,6 +30,11 @@ const actionBarActions = [
         name: 'subaction2',
         icon: PaginateRightIcon,
       },
+      {
+        label: 'Subaction 3',
+        name: 'subaction3',
+        icon: 'ph:android-logo',
+      },
     ],
   },
 ];

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

@@ -1,10 +1,12 @@
+import { type Component } from 'vue';
+
 export type PActionBarAction = {
   name?: string;
   label: string;
-  icon?: string;
+  icon?: string | Component;
   subActions?: {
     name: string;
     label: string;
-    icon?: string;
+    icon?: string | Component;
   }[];
 };

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

@@ -16,14 +16,16 @@
               @click="$emit('click:action', actionOrMenu.name)"
             >
               <div class="flex items-center gap-2 px-1 py-0.5">
-                <Component :is="actionOrMenu.icon" v-if="actionOrMenu.icon" class="h-4 w-4" />
+                <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" />
                 <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">
-                  <Component :is="actionOrMenu.icon" v-if="actionOrMenu.icon" class="h-4 w-4" />
+                  <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" />
                   <div>{{ actionOrMenu.label }}</div>
                 </div>
               </PBtn>
@@ -37,7 +39,8 @@
                       @click="$emit('click:action', subaction.name)"
                     >
                       <div class="flex items-center gap-2 px-1 py-0.5">
-                        <Component :is="subaction.icon" v-if="subaction.icon" class="h-4 w-4" />
+                        <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" />
                         <div>{{ subaction.label }}</div>
                       </div>
                     </PBtn>
@@ -56,7 +59,10 @@
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 import PCloseBtn from '@squirrel/components/p-close-btn/p-close-btn.vue';
 import PDropdown from '@squirrel/components/p-dropdown/p-dropdown.vue';
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import { type PActionBarAction } from '@squirrel/components/p-action-bar/p-action-bar.types';
+import { isComponent } from '@squirrel/utils/component';
+import { isString } from '@squirrel/utils/string';
 
 defineOptions({
   name: 'PActionBar',

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

@@ -67,4 +67,19 @@ describe('PAvatar.vue', () => {
 
     expect(wrapper.find('div.items-center').classes()).toContain('custom-label-class');
   });
+
+  it('should reset imageBroken when imageSrc changes', async () => {
+    const wrapper = createWrapperFor(PAvatar, {
+      props: {
+        label: 'Test Label',
+        imageSrc: 'initial-src.jpg',
+      },
+    });
+
+    await wrapper.setData({ imageBroken: true });
+    expect(wrapper.vm.imageBroken).toBe(true);
+
+    await wrapper.setProps({ imageSrc: 'new-src.jpg' });
+    expect(wrapper.vm.imageBroken).toBe(false);
+  });
 });

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

@@ -1,7 +1,6 @@
 import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import { P_ICON_ALIASES } from '@squirrel/components/p-icon/p-icon.types';
 import { createWrapperFor } from '@tests/vitest.helpers';
-import { expect } from 'vitest';
 
 const createWrapper = (props, attrs) => {
   return createWrapperFor(PIcon, {

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

@@ -28,7 +28,8 @@
 </template>
 
 <script setup lang="ts">
-import { type Component, onBeforeUnmount, ref, toValue, watch } from 'vue';
+import { isComponent } from '@squirrel/utils/component';
+import { onBeforeUnmount, 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`;
@@ -53,12 +54,6 @@ watch(
   { flush: 'post' }
 );
 
-const isComponent = (content: unknown): content is Component => {
-  const isComponent = typeof content === 'object' && content !== null;
-
-  return isComponent;
-};
-
 onBeforeUnmount(() => {
   loadingHide();
 });

package/squirrel/components/p-table-td/p-table-td.spec.js

@@ -6,7 +6,6 @@ import {
   isLastColFixedInjectionKey,
 } from '@squirrel/components/p-table/p-table.types';
 import { createWrapperFor } from '@tests/vitest.helpers';
-import { expect } from 'vitest';
 import { ref } from 'vue';
 
 const DEFAULT_TD_CLASSES = [

package/squirrel/utils/component.spec.ts

@@ -0,0 +1,29 @@
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
+import { isComponent } from '@squirrel/utils/component';
+
+describe('isComponent', () => {
+  it('should return true for a valid component object', () => {
+    expect(isComponent(PIcon)).toBe(true);
+  });
+
+  it('should return false for null', () => {
+    expect(isComponent(null)).toBe(false);
+  });
+
+  it.each([
+    ['string', 'string'],
+    ['number', 123],
+    ['boolean', true],
+    ['undefined', undefined],
+    ['symbol', Symbol('symbol')],
+    ['function', () => {}],
+    ['array', []],
+    ['date', new Date()],
+    ['regexp', /regex/],
+    ['error', new Error('error')],
+    ['map', new Map()],
+    ['set', new Set()],
+  ])('should return false for a non-component object: %s', (_, value) => {
+    expect(isComponent(value)).toBe(false);
+  });
+});

package/squirrel/utils/component.ts

@@ -0,0 +1,5 @@
+import { type Component } from 'vue';
+import { isPlainObject } from 'lodash-es';
+
+// Vue produces a different type of object in dev and prod mode, so we cannot check for e.g `typeof val.render === 'function`
+export const isComponent = (val: unknown): val is Component => isPlainObject(val);

package/squirrel/utils/{string.spec.js → string.spec.ts}

@@ -1,4 +1,4 @@
-import { toString } from '@squirrel/utils/string';
+import { isString, toString } from '@squirrel/utils/string';
 
 describe('toString', () => {
   it.each(['', new Date(), NaN, Infinity, {}, [], true, false, null, undefined])(
@@ -16,3 +16,21 @@ describe('toString', () => {
     expect(toString(2903498.22)).toBe('2903498.22');
   });
 });
+
+describe('isString', () => {
+  it('should return true for a string', () => {
+    expect(isString('hello')).toBe(true);
+  });
+
+  it.each([
+    [123, false],
+    [{}, false],
+    [[], false],
+    [null, false],
+    [undefined, false],
+    [true, false],
+    [() => {}, false],
+  ])('should return %s for %p', (input, expected) => {
+    expect(isString(input)).toBe(expected);
+  });
+});

package/squirrel/utils/string.ts

@@ -1,3 +1,5 @@
+export const isString = (val: unknown): val is string => typeof val === 'string';
+
 export const toString = (value: unknown): string => {
   if (typeof value === 'number' && (!isFinite(value) || isNaN(value))) {
     return '';