@pequity/squirrel 5.0.2 → 5.2.0

package/dist/es/p-icon.js

@@ -0,0 +1,9 @@
+const P_ICON_ALIASES = {
+  delete: "octicon:trash-24",
+  edit: "simple-line-icons:pencil",
+  send: "fa:paper-plane",
+  settings: "heroicons:cog-8-tooth-20-solid"
+};
+export {
+  P_ICON_ALIASES
+};

package/dist/squirrel/components/index.d.ts

@@ -12,6 +12,7 @@ import PDropdown from './p-dropdown/p-dropdown.vue';
 import PDropdownSelect from './p-dropdown-select/p-dropdown-select.vue';
 import PFileUpload from './p-file-upload/p-file-upload.vue';
 import PFilterIcon from './p-table-header-cell/p-table-filter-icon.vue';
+import PIcon from './p-icon/p-icon.vue';
 import PInfoIcon from './p-info-icon/p-info-icon.vue';
 import PInlineDatePicker from './p-inline-date-picker/p-inline-date-picker.vue';
 import PInput from './p-input/p-input.vue';
@@ -41,6 +42,7 @@ import PToggle from './p-toggle/p-toggle.vue';
 import { type FileUploadFile } from './p-file-upload/p-file-upload.types';
 import { type HeaderCellAttrs, MIN_WIDTH_COL_RESIZE, type TableCol, type ThAttrs, colsInjectionKey, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey } from './p-table/p-table.types';
 import { type PActionBarAction } from './p-action-bar/p-action-bar.types';
+import { type PIconAlias, P_ICON_ALIASES } from './p-icon/p-icon.types';
 import { SORTING_TYPES, type SortingType, type SortingTypeWithoutNoSorting } from './p-table-sort/p-table-sort.config';
 import { type Size } from './p-btn/p-btn.types';
 import { usePLoading } from './p-loading/usePLoading';
@@ -48,4 +50,4 @@ import { usePModal } from './p-modal/usePModal';
 import { usePTableColResize } from './p-table/usePTableColResize';
 import { usePTableRowVirtualizer } from './p-table/usePTableRowVirtualizer';
 import { useSelectList } from './p-select-list/useSelectList';
-export { PActionBar, PActionBarAction, PAlert, PAvatar, PBtn, PCard, PCheckbox, PChips, PCloseBtn, PDatePicker, PDrawer, PDropdown, PDropdownSelect, PFileUpload, PFilterIcon, PInfoIcon, PInlineDatePicker, PInput, PInputNumber, PInputPercent, PInputSearch, PLink, PLoading, PModal, PPagination, PPaginationInfo, PProgressBar, PRingLoader, PSelect, PSelectBtn, PSelectList, PSelectPill, PSkeletonLoader, PTable, PTableHeaderCell, PTableLoader, PTableSort, PTableTd, PTabs, PTextarea, PToggle, SORTING_TYPES, MIN_WIDTH_COL_RESIZE, colsInjectionKey, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, usePModal, usePTableColResize, usePTableRowVirtualizer, useSelectList, usePLoading, SortingType, SortingTypeWithoutNoSorting, Size, FileUploadFile, HeaderCellAttrs, TableCol, ThAttrs, };
+export { PActionBar, PActionBarAction, PAlert, PAvatar, PBtn, PCard, PCheckbox, PChips, PCloseBtn, PDatePicker, PDrawer, PDropdown, PDropdownSelect, PFileUpload, PFilterIcon, PIcon, PInfoIcon, PInlineDatePicker, PInput, PInputNumber, PInputPercent, PInputSearch, PLink, PLoading, PModal, PPagination, PPaginationInfo, PProgressBar, PRingLoader, PSelect, PSelectBtn, PSelectList, PSelectPill, PSkeletonLoader, PTable, PTableHeaderCell, PTableLoader, PTableSort, PTableTd, PTabs, PTextarea, PToggle, SORTING_TYPES, MIN_WIDTH_COL_RESIZE, P_ICON_ALIASES, colsInjectionKey, isColsResizableInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, usePModal, usePTableColResize, usePTableRowVirtualizer, useSelectList, usePLoading, SortingType, SortingTypeWithoutNoSorting, Size, FileUploadFile, HeaderCellAttrs, TableCol, ThAttrs, PIconAlias, };

package/dist/squirrel/components/p-icon/p-icon.types.d.ts

@@ -0,0 +1,7 @@
+export declare const P_ICON_ALIASES: {
+    readonly delete: "octicon:trash-24";
+    readonly edit: "simple-line-icons:pencil";
+    readonly send: "fa:paper-plane";
+    readonly settings: "heroicons:cog-8-tooth-20-solid";
+};
+export type PIconAlias = keyof typeof P_ICON_ALIASES;

package/dist/squirrel/components/p-icon/p-icon.vue.d.ts

@@ -0,0 +1,17 @@
+import { type IconifyIconAttributes } from 'iconify-icon';
+import { type PIconAlias } from './p-icon.types';
+import 'iconify-icon';
+interface Props extends /* @vue-ignore */ Omit<IconifyIconAttributes, 'icon'> {
+    icon: IconifyIconAttributes['icon'] | PIconAlias;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -19,6 +19,7 @@ declare function __VLS_template(): {
     };
     refs: {
         scrollWrapper: HTMLDivElement;
+        tbodyElement: HTMLTableSectionElement;
     };
     attrs: Partial<{}>;
 };
@@ -33,7 +34,9 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<
         paddingTop: number;
         paddingBottom: number;
     };
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {
+    tbodyElement: import("vue").Ref<HTMLElement | null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     scroll: (val: Event) => void;
     "click-filter-icon": (val: Event, col: any) => void;
     "col-resize": (colIndex: number, width: number) => void;

package/dist/style.css

@@ -2098,29 +2098,29 @@ to {
 .bg-file-upload-x-icon[data-v-d07a8f64]:hover {
   background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%208C0%209.58225%200.469192%2011.129%201.34824%2012.4446C2.22729%2013.7602%203.47672%2014.7855%204.93853%2015.391C6.40034%2015.9965%208.00887%2016.155%209.56072%2015.8463C11.1126%2015.5376%2012.538%2014.7757%2013.6569%2013.6569C14.7757%2012.538%2015.5376%2011.1126%2015.8463%209.56072C16.155%208.00887%2015.9965%206.40034%2015.391%204.93853C14.7855%203.47672%2013.7602%202.22729%2012.4446%201.34824C11.129%200.469192%209.58225%200%208%200C5.87827%200%203.84344%200.842855%202.34315%202.34315C0.842855%203.84344%200%205.87827%200%208ZM14.3333%208C14.3333%209.25262%2013.9619%2010.4771%2013.266%2011.5186C12.5701%2012.5601%2011.5809%2013.3719%2010.4237%2013.8512C9.2664%2014.3306%207.99298%2014.456%206.76443%2014.2116C5.53588%2013.9673%204.40739%2013.3641%203.52166%2012.4783C2.63592%2011.5926%202.03273%2010.4641%201.78836%209.23557C1.54399%208.00703%201.66941%206.7336%202.14876%205.57634C2.62812%204.41907%203.43988%203.42994%204.48139%202.73403C5.5229%202.03811%206.74739%201.66667%208%201.66667C9.67916%201.66843%2011.289%202.33626%2012.4764%203.52361C13.6637%204.71096%2014.3316%206.32084%2014.3333%208Z'%20fill='%23BB1410'%20/%3e%3cpath%20d='M5.88634%204.71322C5.73075%204.55763%205.51972%204.47021%205.29967%204.47021C5.07963%204.47021%204.8686%204.55763%204.71301%204.71322C4.55741%204.86881%204.47%205.07984%204.47%205.29989C4.47%205.51993%204.55741%205.73096%204.71301%205.88655L6.71301%207.88655C6.72914%207.9021%206.74197%207.92074%206.75073%207.94136C6.7595%207.96198%206.76401%207.98415%206.76401%208.00655C6.76401%208.02896%206.7595%208.05113%206.75073%208.07175C6.74197%208.09237%206.72914%208.11101%206.71301%208.12655L4.71301%2010.1266C4.63561%2010.2034%204.57417%2010.2948%204.53225%2010.3955C4.49033%2010.4962%204.46875%2010.6042%204.46875%2010.7132C4.46875%2010.8223%204.49033%2010.9303%204.53225%2011.031C4.57417%2011.1317%204.63561%2011.223%204.71301%2011.2999C4.78939%2011.3781%204.88063%2011.4403%204.98138%2011.4827C5.08213%2011.5251%205.19035%2011.547%205.29967%2011.547C5.409%2011.547%205.51721%2011.5251%205.61796%2011.4827C5.71871%2011.4403%205.80996%2011.3781%205.88634%2011.2999L7.88634%209.29989C7.91934%209.27037%207.96207%209.25405%208.00634%209.25405C8.05062%209.25405%208.09334%209.27037%208.12634%209.29989L10.1263%2011.2999C10.2027%2011.3781%2010.294%2011.4403%2010.3947%2011.4827C10.4955%2011.5251%2010.6037%2011.547%2010.713%2011.547C10.8223%2011.547%2010.9305%2011.5251%2011.0313%2011.4827C11.132%2011.4403%2011.2233%2011.3781%2011.2997%2011.2999C11.3771%2011.223%2011.4385%2011.1317%2011.4804%2011.031C11.5224%2010.9303%2011.5439%2010.8223%2011.5439%2010.7132C11.5439%2010.6042%2011.5224%2010.4962%2011.4804%2010.3955C11.4385%2010.2948%2011.3771%2010.2034%2011.2997%2010.1266L9.29967%208.12655C9.27016%208.09355%209.25384%208.05083%209.25384%208.00655C9.25384%207.96228%209.27016%207.91955%209.29967%207.88655L11.2997%205.88655C11.4553%205.73096%2011.5427%205.51993%2011.5427%205.29989C11.5427%205.07984%2011.4553%204.86881%2011.2997%204.71322C11.1441%204.55763%2010.9331%204.47021%2010.713%204.47021C10.493%204.47021%2010.2819%204.55763%2010.1263%204.71322L8.12634%206.71322C8.09334%206.74274%208.05062%206.75906%208.00634%206.75906C7.96207%206.75906%207.91934%206.74274%207.88634%206.71322L5.88634%204.71322Z'%20fill='%23BB1410'%20/%3e%3c/svg%3e");
 }
-.p-table[data-v-f12e8db6] {
+.p-table[data-v-1d76cd98] {
   color: var(--color-night);
   height: 1px;
 }
-.p-table th[data-v-f12e8db6] {
+.p-table th[data-v-1d76cd98] {
   position: sticky;
   top: 0px;
   z-index: 20;
   padding: 0px;
 }
-.p-table.first-col-fixed th[data-v-f12e8db6]:first-child {
+.p-table.first-col-fixed th[data-v-1d76cd98]:first-child {
   left: 0px;
   z-index: 30;
 }
-.p-table.first-col-fixed th:first-child .th-shadow[data-v-f12e8db6] {
+.p-table.first-col-fixed th:first-child .th-shadow[data-v-1d76cd98] {
   box-shadow: -1px 1px 5px 4px rgba(0, 0, 0, 0.15);
   clip-path: inset(0px -12px 0px 0px);
 }
-.p-table.last-col-fixed th[data-v-f12e8db6]:last-child {
+.p-table.last-col-fixed th[data-v-1d76cd98]:last-child {
   right: 0px;
   z-index: 30;
 }
-.p-table.last-col-fixed th:last-child .th-shadow[data-v-f12e8db6] {
+.p-table.last-col-fixed th:last-child .th-shadow[data-v-1d76cd98] {
   box-shadow: -2px 1px 8px rgba(0, 0, 0, 0.15);
   clip-path: inset(0px 0px 0px -12px);
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.0.2",
-  "packageManager": "pnpm@9.9.0",
+  "version": "5.2.0",
+  "packageManager": "pnpm@9.10.0",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -52,27 +52,27 @@
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
-    "@commitlint/cli": "^19.4.1",
-    "@commitlint/config-conventional": "^19.4.1",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
     "@pequity/eslint-config": "^0.0.13",
     "@playwright/test": "^1.47.0",
     "@popperjs/core": "2.11.8",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.2.9",
-    "@storybook/addon-actions": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/manager-api": "^8.2.9",
-    "@storybook/test": "^8.2.9",
+    "@storybook/addon-a11y": "^8.3.0",
+    "@storybook/addon-actions": "^8.3.0",
+    "@storybook/addon-essentials": "^8.3.0",
+    "@storybook/addon-interactions": "^8.3.0",
+    "@storybook/addon-links": "^8.3.0",
+    "@storybook/blocks": "^8.3.0",
+    "@storybook/manager-api": "^8.3.0",
+    "@storybook/test": "^8.3.0",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.2.9",
-    "@storybook/vue3": "^8.2.9",
-    "@storybook/vue3-vite": "^8.2.9",
+    "@storybook/theming": "^8.3.0",
+    "@storybook/vue3": "^8.3.0",
+    "@storybook/vue3-vite": "^8.3.0",
     "@tanstack/vue-virtual": "3.10.7",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.5.4",
@@ -87,7 +87,8 @@
     "eslint-plugin-storybook": "^0.8.0",
     "floating-vue": "5.2.2",
     "glob": "^11.0.0",
-    "husky": "^9.1.5",
+    "husky": "^9.1.6",
+    "iconify-icon": "^2.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.10",
@@ -99,17 +100,17 @@
     "resolve-tspaths": "^0.8.19",
     "rimraf": "^6.0.1",
     "sass": "^1.78.0",
-    "semantic-release": "^24.1.0",
-    "storybook": "^8.2.9",
+    "semantic-release": "^24.1.1",
+    "storybook": "^8.3.0",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^3.4.11",
     "ts-jest": "^29.2.5",
     "typescript": "5.5.4",
     "v-calendar": "3.1.2",
-    "vite": "^5.4.3",
+    "vite": "^5.4.4",
     "vue": "3.4.38",
     "vue-currency-input": "3.1.0",
-    "vue-router": "4.4.3",
+    "vue-router": "4.4.5",
     "vue-toastification": "2.0.0-rc.5",
     "vue-tsc": "2.1.6"
   }

package/squirrel/components/index.ts

@@ -12,6 +12,7 @@ import PDropdown from '@squirrel/components/p-dropdown/p-dropdown.vue';
 import PDropdownSelect from '@squirrel/components/p-dropdown-select/p-dropdown-select.vue';
 import PFileUpload from '@squirrel/components/p-file-upload/p-file-upload.vue';
 import PFilterIcon from '@squirrel/components/p-table-header-cell/p-table-filter-icon.vue';
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import PInfoIcon from '@squirrel/components/p-info-icon/p-info-icon.vue';
 import PInlineDatePicker from '@squirrel/components/p-inline-date-picker/p-inline-date-picker.vue';
 import PInput from '@squirrel/components/p-input/p-input.vue';
@@ -50,6 +51,7 @@ import {
   isLastColFixedInjectionKey,
 } from '@squirrel/components/p-table/p-table.types';
 import { type PActionBarAction } from '@squirrel/components/p-action-bar/p-action-bar.types';
+import { type PIconAlias, P_ICON_ALIASES } from '@squirrel/components/p-icon/p-icon.types';
 import {
   SORTING_TYPES,
   type SortingType,
@@ -78,6 +80,7 @@ export {
   PDropdownSelect,
   PFileUpload,
   PFilterIcon,
+  PIcon,
   PInfoIcon,
   PInlineDatePicker,
   PInput,
@@ -106,6 +109,7 @@ export {
   PToggle,
   SORTING_TYPES,
   MIN_WIDTH_COL_RESIZE,
+  P_ICON_ALIASES,
   colsInjectionKey,
   isColsResizableInjectionKey,
   isFirstColFixedInjectionKey,
@@ -122,4 +126,5 @@ export {
   HeaderCellAttrs,
   TableCol,
   ThAttrs,
+  PIconAlias,
 };

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

@@ -0,0 +1,79 @@
+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/jest.helpers';
+
+const createWrapper = (props, attrs) => {
+  return createWrapperFor(PIcon, {
+    props: {
+      icon: 'ant-design:build-twotone',
+      ...props,
+    },
+    attrs,
+    global: {
+      stubs: {
+        'iconify-icon': true,
+      },
+    },
+  });
+};
+
+describe('PIcon.vue', () => {
+  it('renders an icon', async () => {
+    const wrapper = createWrapper({
+      icon: 'ant-design:build-twotone',
+    });
+
+    const icon = wrapper.findComponent('iconify-icon-stub');
+
+    expect(icon.exists()).toBe(true);
+    expect(icon.attributes().icon).toBe('ant-design:build-twotone');
+  });
+
+  it('passes arbitrary attrs to the icon component', async () => {
+    const wrapper = createWrapper({}, { 'data-test': 'test' });
+
+    const icon = wrapper.findComponent('iconify-icon-stub');
+
+    expect(icon.attributes()['data-test']).toBe('test');
+  });
+
+  it('passes down events to the icon component', async () => {
+    const clickFn = jest.fn();
+
+    const wrapper = createWrapperFor(
+      {
+        template: '<PIcon icon="ant-design:build-twotone" @click="onClick" />',
+        components: {
+          PIcon,
+        },
+        methods: {
+          onClick: clickFn,
+        },
+      },
+      {
+        global: {
+          stubs: {
+            'iconify-icon': true,
+          },
+        },
+      }
+    );
+
+    const icon = wrapper.findComponent('iconify-icon-stub');
+
+    await icon.trigger('click');
+
+    expect(clickFn).toHaveBeenCalled();
+  });
+
+  it.each(Object.entries(P_ICON_ALIASES))(
+    'renders the %s icon when the %s is passed as an icon prop',
+    async (iconAliasKey, iconAlias) => {
+      const wrapper = createWrapper({ icon: iconAliasKey });
+
+      const icon = wrapper.findComponent('iconify-icon-stub');
+
+      expect(icon.attributes().icon).toBe(iconAlias);
+    }
+  );
+});

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

@@ -0,0 +1,128 @@
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
+import { P_ICON_ALIASES } from '@squirrel/components/p-icon/p-icon.types';
+
+export default {
+  title: 'Components/PIcon',
+  component: PIcon,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `**PIcon** is a wrapper for the [iconify-icon](https://iconify.design/docs/iconify-icon/#attributes) web component that adds custom **icon aliases**, making it easier to maintain a consistent and unified icon set.
+
+All the customization options provided by [iconify-icon](https://iconify.design/docs/iconify-icon/#attributes) are available.
+
+- Learn how to control icon dimensions [here](https://iconify.design/docs/iconify-icon/dimensions.html).
+- Discover how to adjust icon colors [here](https://iconify.design/docs/iconify-icon/color).
+- Check out the available icons [here](https://icon-sets.iconify.design/).`,
+      },
+    },
+  },
+  args: {
+    icon: 'ant-design:build-twotone',
+    mode: 'svg',
+    inline: false,
+    width: '4rem',
+    height: '4rem',
+    flip: '',
+    rotate: '',
+  },
+  argTypes: {
+    icon: {
+      control: { type: 'text' },
+      description: 'Icon',
+    },
+    mode: {
+      control: { type: 'select' },
+      options: ['svg', 'style', 'bg', 'mask'],
+      description: 'Sets icon rendering mode. See [rendering modes](https://iconify.design/docs/iconify-icon/modes).',
+    },
+    inline: {
+      control: { type: 'boolean' },
+      description:
+        'Changes vertical alignment. See [vertical alignment](https://iconify.design/docs/iconify-icon/inline.html).',
+    },
+    width: {
+      control: { type: 'text' },
+      description: 'Icon width. See [icon dimensions](https://iconify.design/docs/iconify-icon/dimensions.html).',
+    },
+    height: {
+      control: { type: 'text' },
+      description: 'Icon height. See [icon dimensions](https://iconify.design/docs/iconify-icon/dimensions.html).',
+    },
+    flip: {
+      control: { type: 'select' },
+      options: ['', 'horizontal', 'vertical'],
+      description: 'Flip icon. See [icon transformations](https://iconify.design/docs/iconify-icon/transform.html).',
+    },
+    rotate: {
+      control: { type: 'select' },
+      options: ['', '90deg', '180deg', '270deg'],
+      description: 'Rotates icon. See [icon transformations](https://iconify.design/docs/iconify-icon/transform.html).',
+    },
+    color: {
+      control: { type: 'color' },
+      description: 'Icon color. See [icon colors](https://iconify.design/docs/iconify-icon/color).',
+    },
+  },
+};
+
+export const Default = {
+  render: (args) => ({
+    components: { PIcon },
+    setup() {
+      return { args };
+    },
+    template: `<PIcon v-bind="args" class="text-p-purple-50" :style="{ color: args.color }" />`,
+  }),
+};
+
+export const IconAlias = {
+  ...Default,
+  args: {
+    icon: 'delete',
+  },
+  argTypes: {
+    icon: {
+      control: { type: 'select' },
+      options: Object.keys(P_ICON_ALIASES),
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `The **icon** prop accepts an alias that points to a specific icon. This allows for a consistent and unified icon set.`,
+      },
+    },
+  },
+};
+
+export const AllIconAliases = {
+  ...Default,
+  render: (args) => ({
+    components: { PIcon },
+    setup() {
+      return { args, P_ICON_ALIASES };
+    },
+    template: `
+      <div class="mt-2 flex w-full gap-4">
+        <div
+          v-for="(iconClass, iconAlias) in P_ICON_ALIASES"
+          :key="iconAlias"
+          :title="iconClass"
+          class="flex flex-col items-center justify-center gap-y-2"
+        >
+          <PIcon v-bind="args" :icon="iconAlias" class="text-p-purple-50" :style="{ color: args.color }" />
+          <div>{{ iconAlias }}</div>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: `All available icon aliases.`,
+      },
+    },
+  },
+};

package/squirrel/components/p-icon/p-icon.types.ts

@@ -0,0 +1,8 @@
+export const P_ICON_ALIASES = {
+  delete: 'octicon:trash-24',
+  edit: 'simple-line-icons:pencil',
+  send: 'fa:paper-plane',
+  settings: 'heroicons:cog-8-tooth-20-solid',
+} as const;
+
+export type PIconAlias = keyof typeof P_ICON_ALIASES;

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

@@ -0,0 +1,22 @@
+<template>
+  <iconify-icon v-bind="{ ...$props, icon: isPIcon(icon) ? P_ICON_ALIASES[icon] : icon }" />
+</template>
+
+<script setup lang="ts">
+import { type IconifyIconAttributes } from 'iconify-icon';
+import { type PIconAlias, P_ICON_ALIASES } from '@squirrel/components/p-icon/p-icon.types';
+import 'iconify-icon';
+
+defineOptions({
+  name: 'PIcon',
+});
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+interface Props extends /* @vue-ignore */ Omit<IconifyIconAttributes, 'icon'> {
+  icon: IconifyIconAttributes['icon'] | PIconAlias;
+}
+
+const isPIcon = (icon: string): icon is PIconAlias => !!P_ICON_ALIASES[icon as PIconAlias];
+
+defineProps<Props>();
+</script>

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

@@ -65,7 +65,7 @@
           ></th>
         </tr>
       </thead>
-      <tbody>
+      <tbody ref="tbodyElement">
         <tr v-if="virtualizer.paddingTop > 0">
           <td :style="{ height: `${virtualizer.paddingTop}px` }"></td>
         </tr>
@@ -159,6 +159,7 @@ const {
   enabled: computed(() => props.colsResizable),
   ths,
 });
+const tbodyElement = ref<HTMLElement | null>(null);
 
 // Methods
 const updateThsRefs = (el: unknown, index: number) => {
@@ -235,6 +236,11 @@ watch(isColResizing, (nV) => {
     emit('col-resize', colResizingIndex.value, colResizingWidth.value);
   }
 });
+
+// Expose
+defineExpose({
+  tbodyElement,
+});
 </script>
 
 <style scoped lang="scss">