@pequity/squirrel 8.5.0 → 8.5.1

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

@@ -1,168 +1,21 @@
-/**
- * A table header cell component that displays text with optional tooltip and filter icon.
- * Provides consistent styling for table headers with support for custom text colors,
- * tooltips, and filter functionality.
- *
- * @displayName PTableHeaderCell
- */
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /**
-     * The text content to display in the header cell.
-     * Also used as the title attribute for accessibility.
-     */
-    text: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * CSS classes to apply to the text element.
-     * Can be a string, object, or array for flexible styling.
-     */
-    textClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: string;
-    };
-    /**
-     * Whether the filter icon is in an active state.
-     * Controls the visual appearance of the filter icon and text color.
-     */
-    filterActive: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Whether to show the filter icon.
-     * When false, the filter icon is hidden regardless of other states.
-     */
-    showFilterIcon: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Tooltip text to display when hovering over the info icon.
-     * When provided, shows an info icon with the tooltip content.
-     */
-    tooltipText: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Custom text color to apply to the header text.
-     * Overrides the default text color when provided.
-     */
-    textColor: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {}, {
-    DEFAULT_CLASSES: string;
-}, {
-    textColorClass(): "" | "text-active-blue" | "text-p-gray-60";
-    style(): {
-        color?: undefined;
-    } | {
-        color: string;
-    };
-}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click-filter-icon"[], "click-filter-icon", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * The text content to display in the header cell.
-     * Also used as the title attribute for accessibility.
-     */
-    text: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * CSS classes to apply to the text element.
-     * Can be a string, object, or array for flexible styling.
-     */
-    textClass: {
-        type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
-        default: string;
-    };
-    /**
-     * Whether the filter icon is in an active state.
-     * Controls the visual appearance of the filter icon and text color.
-     */
-    filterActive: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Whether to show the filter icon.
-     * When false, the filter icon is hidden regardless of other states.
-     */
-    showFilterIcon: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * Tooltip text to display when hovering over the info icon.
-     * When provided, shows an info icon with the tooltip content.
-     */
-    tooltipText: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * Custom text color to apply to the header text.
-     * Overrides the default text color when provided.
-     */
-    textColor: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{
-    "onClick-filter-icon"?: ((...args: any[]) => any) | undefined;
+type Props = {
+    text?: string;
+    textClass?: string;
+    filterActive?: boolean;
+    showFilterIcon?: boolean;
+    tooltipText?: string;
+    textColor?: string;
+};
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "click-filter-icon": (event: Event, filterActive: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onClick-filter-icon"?: ((event: Event, filterActive: boolean) => any) | undefined;
 }>, {
     text: string;
     tooltipText: string;
-    textClass: string | Record<string, any> | unknown[];
+    textClass: string;
     filterActive: boolean;
     showFilterIcon: boolean;
     textColor: string;
-}, {}, {
-    PTableFilterIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        active: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        active: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-    }>> & Readonly<{}>, {
-        active: boolean;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-    PInfoIcon: {
-        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
-            text?: string | null;
-        }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-            text: string | null;
-        }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<{
-            text?: string | null;
-        }> & Readonly<{}>, {}, {}, {}, {}, {
-            text: string | null;
-        }>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import("vue").ComponentOptionsBase<Readonly<{
-        text?: string | null;
-    }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-        text: string | null;
-    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-        $slots: {
-            default?: () => unknown;
-        };
-    });
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/squirrel.css

@@ -364,17 +364,6 @@ to {
 100% {
     transform: translateX(100%);
 }
-}.filter[data-v-5c047926] {
-  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%3cpath%20d='M15.5%206.73H4.5C4.36739%206.73%204.24021%206.67732%204.14645%206.58355C4.05268%206.48978%204%206.3626%204%206.23C4%206.09739%204.05268%205.97021%204.14645%205.87644C4.24021%205.78267%204.36739%205.73%204.5%205.73H15.5C15.6326%205.73%2015.7598%205.78267%2015.8536%205.87644C15.9473%205.97021%2016%206.09739%2016%206.23C16%206.3626%2015.9473%206.48978%2015.8536%206.58355C15.7598%206.67732%2015.6326%206.73%2015.5%206.73Z'%20fill='%23424E6E'/%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='%23424E6E'/%3e%3cpath%20d='M11.605%2014.27H8.395C8.2624%2014.27%208.13522%2014.2173%208.04145%2014.1235C7.94768%2014.0298%207.895%2013.9026%207.895%2013.77C7.895%2013.6374%207.94768%2013.5102%208.04145%2013.4164C8.13522%2013.3227%208.2624%2013.27%208.395%2013.27H11.605C11.7376%2013.27%2011.8648%2013.3227%2011.9586%2013.4164C12.0523%2013.5102%2012.105%2013.6374%2012.105%2013.77C12.105%2013.9026%2012.0523%2014.0298%2011.9586%2014.1235C11.8648%2014.2173%2011.7376%2014.27%2011.605%2014.27Z'%20fill='%23424E6E'/%3e%3cpath%20d='M13.155%2011.755H6.845C6.71239%2011.755%206.58522%2011.7023%206.49145%2011.6085C6.39768%2011.5148%206.345%2011.3876%206.345%2011.255C6.345%2011.1224%206.39768%2010.9952%206.49145%2010.9014C6.58522%2010.8077%206.71239%2010.755%206.845%2010.755H13.155C13.2876%2010.755%2013.4148%2010.8077%2013.5086%2010.9014C13.6023%2010.9952%2013.655%2011.1224%2013.655%2011.255C13.655%2011.3876%2013.6023%2011.5148%2013.5086%2011.6085C13.4148%2011.7023%2013.2876%2011.755%2013.155%2011.755Z'%20fill='%23424E6E'/%3e%3c/svg%3e") no-repeat;
-}
-.filter[data-v-5c047926]: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.73001H4.5C4.36739%206.73001%204.24021%206.67733%204.14645%206.58356C4.05268%206.4898%204%206.36262%204%206.23001C4%206.0974%204.05268%205.97023%204.14645%205.87646C4.24021%205.78269%204.36739%205.73001%204.5%205.73001H15.5C15.6326%205.73001%2015.7598%205.78269%2015.8536%205.87646C15.9473%205.97023%2016%206.0974%2016%206.23001C16%206.36262%2015.9473%206.4898%2015.8536%206.58356C15.7598%206.67733%2015.6326%206.73001%2015.5%206.73001Z'%20fill='%23424E6E'/%3e%3cpath%20d='M14.33%209.24503H5.67C5.53739%209.24503%205.41021%209.19235%205.31644%209.09858C5.22268%209.00481%205.17%208.87763%205.17%208.74503C5.17%208.61242%205.22268%208.48524%205.31644%208.39147C5.41021%208.2977%205.53739%208.24503%205.67%208.24503H14.33C14.4626%208.24503%2014.5898%208.2977%2014.6836%208.39147C14.7773%208.48524%2014.83%208.61242%2014.83%208.74503C14.83%208.87763%2014.7773%209.00481%2014.6836%209.09858C14.5898%209.19235%2014.4626%209.24503%2014.33%209.24503Z'%20fill='%23424E6E'/%3e%3cpath%20d='M11.605%2014.27H8.395C8.2624%2014.27%208.13522%2014.2173%208.04145%2014.1236C7.94768%2014.0298%207.895%2013.9026%207.895%2013.77C7.895%2013.6374%207.94768%2013.5102%208.04145%2013.4165C8.13522%2013.3227%208.2624%2013.27%208.395%2013.27H11.605C11.7376%2013.27%2011.8648%2013.3227%2011.9586%2013.4165C12.0523%2013.5102%2012.105%2013.6374%2012.105%2013.77C12.105%2013.9026%2012.0523%2014.0298%2011.9586%2014.1236C11.8648%2014.2173%2011.7376%2014.27%2011.605%2014.27Z'%20fill='%23424E6E'/%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='%23424E6E'/%3e%3c/svg%3e") no-repeat;
-}
-.filter.active[data-v-5c047926] {
-  background: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10%2014L4%205V3h16v2l-6%209v6l-4%202z'%20fill='%230F45AF'%20/%3e%3c/svg%3e") no-repeat;
-}
-.filter.active[data-v-5c047926]:hover {
-  background: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='24'%20height='24'%20rx='4'%20fill='black'%20fill-opacity='0.05'/%3e%3cpath%20d='M10%2014L4%205V3h16v2l-6%209v6l-4%202z'%20fill='%230F45AF'%20/%3e%3c/svg%3e") no-repeat;
 }.td-shadow-right[data-v-9a0c95c7] {
   box-shadow: -1px 1px 5px 4px rgba(0, 0, 0, 0.15);
   clip-path: inset(0px -12px 0px 0px);
@@ -1128,35 +1117,35 @@ to {
   background-image: url("data:image/svg+xml,%3csvg%20width='33'%20height='30'%20viewBox='0%200%2033%2030'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M31.0143%2029.9524C31.1862%2029.9516%2031.3551%2029.9066%2031.5045%2029.8215C31.6539%2029.7365%2031.7789%2029.6144%2031.8674%2029.4669C31.9558%2029.3195%2032.0048%2029.1517%2032.0095%2028.9799C32.0142%2028.808%2031.9745%2028.6378%2031.8943%2028.4857L16.8943%200.485744C16.8006%200.337008%2016.6708%200.214443%2016.5169%200.129498C16.363%200.0445534%2016.1901%200%2016.0143%200C15.8385%200%2015.6656%200.0445534%2015.5117%200.129498C15.3578%200.214443%2015.228%200.337008%2015.1343%200.485744L0.134286%2028.4857C0.0463617%2028.6353%200%2028.8056%200%2028.9791C0%2029.1526%200.0463617%2029.3229%200.134286%2029.4724C0.221436%2029.6207%200.346313%2029.7432%200.496207%2029.8275C0.6461%2029.9118%200.815658%2029.9549%200.98762%2029.9524H31.0143ZM16.0143%2026.2857C15.6176%2026.2857%2015.2299%2026.1677%2014.9004%2025.9467C14.571%2025.7258%2014.3147%2025.4118%2014.1641%2025.0448C14.0136%2024.6778%2013.9755%2024.2743%2014.0549%2023.8857C14.1342%2023.497%2014.3274%2023.1407%2014.6098%2022.8621C14.8922%2022.5835%2015.251%2022.3951%2015.6407%2022.321C16.0304%2022.2468%2016.4334%2022.2903%2016.7983%2022.4458C17.1633%2022.6012%2017.4737%2022.8617%2017.6903%2023.1941C17.9068%2023.5265%2018.0196%2023.9158%2018.0143%2024.3124C18.0073%2024.8382%2017.7935%2025.3401%2017.4192%2025.7094C17.0448%2026.0787%2016.5401%2026.2858%2016.0143%2026.2857ZM16.0143%209.95241C16.3679%209.95241%2016.707%2010.0929%2016.9571%2010.3429C17.2071%2010.593%2017.3476%2010.9321%2017.3476%2011.2857V18.5791C17.3476%2018.9327%2017.2071%2019.2718%2016.9571%2019.5219C16.707%2019.7719%2016.3679%2019.9124%2016.0143%2019.9124C15.6607%2019.9124%2015.3215%2019.7719%2015.0715%2019.5219C14.8214%2019.2718%2014.681%2018.9327%2014.681%2018.5791V11.2857C14.681%2010.9321%2014.8214%2010.593%2015.0715%2010.3429C15.3215%2010.0929%2015.6607%209.95241%2016.0143%209.95241Z'%20fill='%23F2C94C'%20/%3e%3c/svg%3e");
 }
 
-/*# sourceMappingURL=squirrel.css.map */.p-table[data-v-8af637b9] {
+/*# sourceMappingURL=squirrel.css.map */.p-table[data-v-58c21732] {
   color: rgb(var(--color-night));
   height: 1px;
 }
-.p-table th[data-v-8af637b9] {
+.p-table th[data-v-58c21732] {
   position: sticky;
   top: 0px;
   z-index: 20;
   padding: 0px;
 }
-.p-table.first-col-fixed th[data-v-8af637b9]:first-child {
+.p-table.first-col-fixed th[data-v-58c21732]:first-child {
   left: 0px;
   z-index: 30;
 }
-.p-table.first-col-fixed th:first-child .th-shadow[data-v-8af637b9] {
+.p-table.first-col-fixed th:first-child .th-shadow[data-v-58c21732] {
   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-8af637b9]:last-child {
+.p-table.last-col-fixed th[data-v-58c21732]:last-child {
   right: 0px;
   z-index: 30;
 }
-.p-table.last-col-fixed th:last-child .th-shadow[data-v-8af637b9] {
+.p-table.last-col-fixed th:last-child .th-shadow[data-v-58c21732] {
   box-shadow: -2px 1px 8px rgba(0, 0, 0, 0.15);
   clip-path: inset(0px 0px 0px -12px);
 }
-[data-v-8af637b9] .p-table tr:last-child td {
+[data-v-58c21732] .p-table tr:last-child td {
   border-bottom-width: 0px;
 }
-[data-v-8af637b9] .p-table tr:last-child td.td-col-fixed-border-b::after {
+[data-v-58c21732] .p-table tr:last-child td.td-col-fixed-border-b::after {
   height: 0px;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "8.5.0",
+  "version": "8.5.1",
   "packageManager": "pnpm@10.15.1",
   "type": "module",
   "scripts": {

package/squirrel/components/index.ts

@@ -52,7 +52,6 @@ import {
 import PTable from '@squirrel/components/p-table/p-table.vue';
 import { usePTableColResize } from '@squirrel/components/p-table/usePTableColResize';
 import { usePTableRowVirtualizer } from '@squirrel/components/p-table/usePTableRowVirtualizer';
-import PFilterIcon from '@squirrel/components/p-table-header-cell/p-table-filter-icon.vue';
 import PTableHeaderCell from '@squirrel/components/p-table-header-cell/p-table-header-cell.vue';
 import PTableLoader from '@squirrel/components/p-table-loader/p-table-loader.vue';
 import {
@@ -90,7 +89,6 @@ export {
   PDropdown,
   PDropdownSelect,
   PFileUpload,
-  PFilterIcon,
   PIcon,
   PIconAlias,
   PInfoIcon,

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

@@ -302,7 +302,7 @@ describe('PTable.vue', () => {
       props: { cols },
     });
 
-    const filterIcon = wrapper.find('div.cursor-pointer.filter.active');
+    const filterIcon = wrapper.findComponent({ name: 'PIcon' });
     await filterIcon.trigger('click');
 
     expect(wrapper.emitted()['click-filter-icon']).toBeTruthy();
@@ -425,4 +425,37 @@ describe('PTable.vue', () => {
     expect(wrapper.find('table tbody tr:last-child > td').attributes().style).toEqual('height: 100px;');
     expect(wrapper.find('table tbody tr:last-child').classes()).toEqual([]);
   });
+
+  it('emits col-resize event when column resizing stops', async () => {
+    const cols = cloneDeep(columns);
+    const wrapper = createWrapperFor(PTable, {
+      props: {
+        cols,
+        colsResizable: true,
+        data,
+      },
+    });
+
+    const resizeHandle = wrapper.find('[data-resize-handle]');
+
+    // Find the parent th element and mock its dimensions
+    const th = resizeHandle.element.closest('th');
+    if (th) {
+      const mockTds = [{ getBoundingClientRect: () => ({ width: 120 }) }];
+      const mockTable = {
+        querySelectorAll: vi.fn(() => mockTds),
+      };
+      Object.defineProperty(th, 'closest', {
+        value: vi.fn(() => mockTable),
+        configurable: true,
+      });
+    }
+
+    await resizeHandle.trigger('dblclick');
+
+    expect(wrapper.emitted()['col-resize']).toBeTruthy();
+    expect(wrapper.emitted()['col-resize'][0]).toHaveLength(2);
+    expect(typeof wrapper.emitted()['col-resize'][0][0]).toBe('number');
+    expect(typeof wrapper.emitted()['col-resize'][0][1]).toBe('number');
+  });
 });

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

@@ -33,14 +33,18 @@
             class="bg-surface"
           >
             <div :class="thDivClasses(i)" :style="bgColorStyle(col)">
-              <div :class="['flex', { 'h-10': hasWrap }]">
+              <div :class="['flex', { 'h-8': hasWrap }]">
                 <slot :name="`prepend-header-cell-${kebabCase(col.name)}`" :col="col" />
                 <PTableHeaderCell
                   :text="col.title"
                   :filter-active="col.filterActive"
                   :show-filter-icon="col.filterable || col.sortable"
                   :tooltip-text="col.tooltip"
-                  :class="[{ 'pl-2': i === 1 && isFirstColFixed, 'pr-2': i === cols.length && isLastColFixed }, 'grow']"
+                  :class="[
+                    hasWrap ? 'leading-4' : 'leading-5',
+                    { 'pl-2': i === 1 && isFirstColFixed, 'pr-2': i === cols.length && isLastColFixed },
+                    'grow',
+                  ]"
                   :text-color="headerCellTextColor(col)"
                   v-bind="col.headerCellAttrs"
                   @click-filter-icon="$emit('click-filter-icon', $event, col)"

package/squirrel/components/p-table-header-cell/p-table-header-cell.spec.js

@@ -1,4 +1,3 @@
-import PFilterIcon from '@squirrel/components/p-table-header-cell/p-table-filter-icon.vue';
 import PTableHeaderCell from '@squirrel/components/p-table-header-cell/p-table-header-cell.vue';
 import { createWrapperFor } from '@tests/vitest.helpers';
 
@@ -9,11 +8,16 @@ describe('PTableHeaderCell.vue', () => {
         text: 'Test text',
         textClass: 'test-class',
       },
-      global: { stubs: { PInfoIcon: true } },
+      global: {
+        stubs: {
+          PInfoIcon: true,
+          PIcon: true,
+        },
+      },
     });
 
     const div = await wrapper.find('div.test-class');
-    const icon = wrapper.findComponent(PFilterIcon);
+    const icon = wrapper.findComponent({ name: 'PIcon' });
     const tooltipIcon = await wrapper.findComponent({ name: 'PInfoIcon' });
 
     expect(wrapper.classes()).toEqual(['flex', 'items-center', 'overflow-hidden']);
@@ -23,7 +27,6 @@ describe('PTableHeaderCell.vue', () => {
     expect(div.attributes('title')).toBe('Test text');
     expect(div.classes()).toEqual([
       'text-xs',
-      'leading-5',
       'font-semibold',
       'line-clamp-2',
       'break-words',
@@ -49,11 +52,10 @@ describe('PTableHeaderCell.vue', () => {
     });
 
     const div = wrapper.find('div.test-class');
-    const icon = wrapper.findComponent(PFilterIcon);
+    const icon = wrapper.findComponent({ name: 'PIcon' });
 
-    expect(icon.exists()).toBe(true);
     expect(icon.classes()).not.toContain('hidden');
-    expect(icon.vm.active).toBe(true);
+    expect(icon.classes()).toContain('text-active-blue');
     expect(div.classes()).toContain('text-active-blue');
   });
 
@@ -83,7 +85,9 @@ describe('PTableHeaderCell.vue', () => {
       },
     });
 
-    await wrapper.find('.filter').trigger('click');
+    const icon = wrapper.findComponent({ name: 'PIcon' });
+
+    await icon.trigger('click');
 
     const emittedEvent = wrapper.emitted()['click-filter-icon'][0];
     const mouseEvent = emittedEvent[0];

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

@@ -9,22 +9,29 @@
       {{ text }}
     </div>
     <div v-if="tooltipText" class="relative ml-1 mr-auto h-3 w-3 shrink-0">
-      <PInfoIcon v-if="tooltipText" :text="tooltipText" />
+      <PInfoIcon :text="tooltipText" />
     </div>
-    <PTableFilterIcon
-      :class="['ml-2', { hidden: !showFilterIcon }]"
-      :active="filterActive"
+    <PIcon
+      :icon="filterActive ? 'ph:funnel-fill' : 'si:filter-list-alt-duotone'"
+      :class="[
+        'ml-2 mr-px cursor-pointer rounded-sm',
+        { hidden: !showFilterIcon },
+        filterActive
+          ? 'text-active-blue hover:bg-p-blue-10 hover:text-p-blue-60 hover:ring-1 hover:ring-p-blue-10'
+          : 'text-p-gray-60 hover:bg-p-gray-10 hover:text-night hover:ring-1 hover:ring-p-gray-10',
+      ]"
+      height="16"
       @click="$emit('click-filter-icon', $event, filterActive)"
     />
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import PInfoIcon from '@squirrel/components/p-info-icon/p-info-icon.vue';
-import PTableFilterIcon from '@squirrel/components/p-table-header-cell/p-table-filter-icon.vue';
-import { defineComponent } from 'vue';
+import { computed } from 'vue';
 
-const DEFAULT_CLASSES = `text-xs leading-5 font-semibold line-clamp-2 break-words hyphens-auto whitespace-normal max-h-10 shrink`;
+const DEFAULT_CLASSES = `text-xs font-semibold line-clamp-2 break-words hyphens-auto whitespace-normal max-h-10 shrink`;
 
 /**
  * A table header cell component that displays text with optional tooltip and filter icon.
@@ -33,85 +40,63 @@ const DEFAULT_CLASSES = `text-xs leading-5 font-semibold line-clamp-2 break-word
  *
  * @displayName PTableHeaderCell
  */
-export default defineComponent({
+defineOptions({
   name: 'PTableHeaderCell',
-  components: {
-    PTableFilterIcon,
-    PInfoIcon,
-  },
-  props: {
-    /**
-     * The text content to display in the header cell.
-     * Also used as the title attribute for accessibility.
-     */
-    text: {
-      type: String,
-      default: '',
-    },
-    /**
-     * CSS classes to apply to the text element.
-     * Can be a string, object, or array for flexible styling.
-     */
-    textClass: {
-      type: [String, Object, Array],
-      default: 'text-left',
-    },
-    /**
-     * Whether the filter icon is in an active state.
-     * Controls the visual appearance of the filter icon and text color.
-     */
-    filterActive: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Whether to show the filter icon.
-     * When false, the filter icon is hidden regardless of other states.
-     */
-    showFilterIcon: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Tooltip text to display when hovering over the info icon.
-     * When provided, shows an info icon with the tooltip content.
-     */
-    tooltipText: {
-      type: String,
-      default: '',
-    },
-    /**
-     * Custom text color to apply to the header text.
-     * Overrides the default text color when provided.
-     */
-    textColor: {
-      type: String,
-      default: '',
-    },
-  },
+});
+
+type Props = {
+  text?: string;
+  textClass?: string;
+  filterActive?: boolean;
+  showFilterIcon?: boolean;
+  tooltipText?: string;
+  textColor?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  /**
+   * The text content to display in the header cell.
+   * Also used as the title attribute for accessibility.
+   */
+  text: '',
+  /**
+   * CSS classes to apply to the text element.
+   * Can be a string, object, or array for flexible styling.
+   */
+  textClass: 'text-left',
+  /**
+   * Whether the filter icon is in an active state.
+   * Controls the visual appearance of the filter icon and text color.
+   */
+  filterActive: false,
+  /**
+   * Whether to show the filter icon.
+   */
+  showFilterIcon: false,
+  /**
+   * Tooltip text to display when hovering over the info icon.
+   * When provided, shows an info icon with the tooltip content.
+   */
+  tooltipText: '',
+  /**
+   * Custom text color to apply to the header text.
+   * Overrides the default text color when provided.
+   */
+  textColor: '',
+});
+
+defineEmits<{
   /**
    * Emitted when the filter icon is clicked.
    * @param {Event} event - The click event
    * @param {boolean} filterActive - The current filter active state
    */
-  emits: ['click-filter-icon'],
-  data() {
-    return {
-      DEFAULT_CLASSES,
-    };
-  },
-  computed: {
-    textColorClass() {
-      return this.filterActive ? 'text-active-blue' : this.textColor ? '' : 'text-p-gray-60';
-    },
-    style() {
-      if (this.filterActive) {
-        return {};
-      }
-      return {
-        color: this.textColor,
-      };
-    },
-  },
-});
+  'click-filter-icon': [event: Event, filterActive: boolean];
+}>();
+
+const textColorClass = computed(() =>
+  props.filterActive ? 'text-active-blue' : props.textColor ? '' : 'text-p-gray-60'
+);
+
+const style = computed(() => (props.filterActive ? {} : { color: props.textColor }));
 </script>

package/dist/cjs/p-table-filter-icon.js

@@ -1,28 +0,0 @@
-"use strict";
-const vue = require("vue");
-const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...{
-    name: "PTableFilterIcon",
-    inheritAttrs: false
-  },
-  __name: "p-table-filter-icon",
-  props: {
-    /**
-     * Whether the filter icon is active (filtered state).
-     */
-    active: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-        class: ["h-5 w-5 shrink-0 cursor-pointer filter", { active: __props.active }]
-      }, _ctx.$attrs), null, 16);
-    };
-  }
-});
-const PTableFilterIcon = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-5c047926"]]);
-module.exports = PTableFilterIcon;

package/dist/es/p-table-filter-icon.js

@@ -1,29 +0,0 @@
-import { defineComponent, createElementBlock, openBlock, mergeProps } from "vue";
-import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "PTableFilterIcon",
-    inheritAttrs: false
-  },
-  __name: "p-table-filter-icon",
-  props: {
-    /**
-     * Whether the filter icon is active (filtered state).
-     */
-    active: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({
-        class: ["h-5 w-5 shrink-0 cursor-pointer filter", { active: __props.active }]
-      }, _ctx.$attrs), null, 16);
-    };
-  }
-});
-const PTableFilterIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5c047926"]]);
-export {
-  PTableFilterIcon as default
-};

package/dist/squirrel/components/p-table-header-cell/p-table-filter-icon.vue.d.ts

@@ -1,20 +0,0 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /**
-     * Whether the filter icon is active (filtered state).
-     */
-    active: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * Whether the filter icon is active (filtered state).
-     */
-    active: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    active: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;