@pequity/squirrel 8.4.5 → 8.5.1

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

@@ -4,26 +4,34 @@
       :class="[DEFAULT_CLASSES, textClass, textColorClass, { 'mr-auto': !tooltipText }]"
       :style="style"
       :title="text"
+      data-p-table-header-text
     >
       {{ 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 truncate 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.
@@ -32,85 +40,63 @@ const DEFAULT_CLASSES = `text-xs leading-5 font-semibold truncate shrink`;
  *
  * @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;
-    };
-}>, void, {}, {}, {}, 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;

package/squirrel/assets/filter-icon-active-hover.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24" rx="4" fill="black" fill-opacity="0.05"/>
-<path  d="M10 14L4 5V3h16v2l-6 9v6l-4 2z" fill="#0F45AF" />
-</svg>

package/squirrel/assets/filter-icon-active.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path  d="M10 14L4 5V3h16v2l-6 9v6l-4 2z" fill="#0F45AF" />
-</svg>
-

package/squirrel/assets/filter-icon-hover.svg

@@ -1,7 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="20" height="20" rx="4" fill="black" fill-opacity="0.05"/>
-<path d="M15.5 6.73001H4.5C4.36739 6.73001 4.24021 6.67733 4.14645 6.58356C4.05268 6.4898 4 6.36262 4 6.23001C4 6.0974 4.05268 5.97023 4.14645 5.87646C4.24021 5.78269 4.36739 5.73001 4.5 5.73001H15.5C15.6326 5.73001 15.7598 5.78269 15.8536 5.87646C15.9473 5.97023 16 6.0974 16 6.23001C16 6.36262 15.9473 6.4898 15.8536 6.58356C15.7598 6.67733 15.6326 6.73001 15.5 6.73001Z" fill="#424E6E"/>
-<path d="M14.33 9.24503H5.67C5.53739 9.24503 5.41021 9.19235 5.31644 9.09858C5.22268 9.00481 5.17 8.87763 5.17 8.74503C5.17 8.61242 5.22268 8.48524 5.31644 8.39147C5.41021 8.2977 5.53739 8.24503 5.67 8.24503H14.33C14.4626 8.24503 14.5898 8.2977 14.6836 8.39147C14.7773 8.48524 14.83 8.61242 14.83 8.74503C14.83 8.87763 14.7773 9.00481 14.6836 9.09858C14.5898 9.19235 14.4626 9.24503 14.33 9.24503Z" fill="#424E6E"/>
-<path d="M11.605 14.27H8.395C8.2624 14.27 8.13522 14.2173 8.04145 14.1236C7.94768 14.0298 7.895 13.9026 7.895 13.77C7.895 13.6374 7.94768 13.5102 8.04145 13.4165C8.13522 13.3227 8.2624 13.27 8.395 13.27H11.605C11.7376 13.27 11.8648 13.3227 11.9586 13.4165C12.0523 13.5102 12.105 13.6374 12.105 13.77C12.105 13.9026 12.0523 14.0298 11.9586 14.1236C11.8648 14.2173 11.7376 14.27 11.605 14.27Z" fill="#424E6E"/>
-<path d="M13.155 11.755H6.845C6.71239 11.755 6.58522 11.7023 6.49145 11.6086C6.39768 11.5148 6.345 11.3876 6.345 11.255C6.345 11.1224 6.39768 10.9952 6.49145 10.9015C6.58522 10.8077 6.71239 10.755 6.845 10.755H13.155C13.2876 10.755 13.4148 10.8077 13.5086 10.9015C13.6023 10.9952 13.655 11.1224 13.655 11.255C13.655 11.3876 13.6023 11.5148 13.5086 11.6086C13.4148 11.7023 13.2876 11.755 13.155 11.755Z" fill="#424E6E"/>
-</svg>

package/squirrel/assets/filter-icon.svg

@@ -1,6 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.5 6.73H4.5C4.36739 6.73 4.24021 6.67732 4.14645 6.58355C4.05268 6.48978 4 6.3626 4 6.23C4 6.09739 4.05268 5.97021 4.14645 5.87644C4.24021 5.78267 4.36739 5.73 4.5 5.73H15.5C15.6326 5.73 15.7598 5.78267 15.8536 5.87644C15.9473 5.97021 16 6.09739 16 6.23C16 6.3626 15.9473 6.48978 15.8536 6.58355C15.7598 6.67732 15.6326 6.73 15.5 6.73Z" fill="#424E6E"/>
-<path d="M14.33 9.245H5.67C5.53739 9.245 5.41021 9.19232 5.31644 9.09855C5.22268 9.00478 5.17 8.8776 5.17 8.745C5.17 8.61239 5.22268 8.48521 5.31644 8.39144C5.41021 8.29767 5.53739 8.245 5.67 8.245H14.33C14.4626 8.245 14.5898 8.29767 14.6836 8.39144C14.7773 8.48521 14.83 8.61239 14.83 8.745C14.83 8.8776 14.7773 9.00478 14.6836 9.09855C14.5898 9.19232 14.4626 9.245 14.33 9.245Z" fill="#424E6E"/>
-<path d="M11.605 14.27H8.395C8.2624 14.27 8.13522 14.2173 8.04145 14.1235C7.94768 14.0298 7.895 13.9026 7.895 13.77C7.895 13.6374 7.94768 13.5102 8.04145 13.4164C8.13522 13.3227 8.2624 13.27 8.395 13.27H11.605C11.7376 13.27 11.8648 13.3227 11.9586 13.4164C12.0523 13.5102 12.105 13.6374 12.105 13.77C12.105 13.9026 12.0523 14.0298 11.9586 14.1235C11.8648 14.2173 11.7376 14.27 11.605 14.27Z" fill="#424E6E"/>
-<path d="M13.155 11.755H6.845C6.71239 11.755 6.58522 11.7023 6.49145 11.6085C6.39768 11.5148 6.345 11.3876 6.345 11.255C6.345 11.1224 6.39768 10.9952 6.49145 10.9014C6.58522 10.8077 6.71239 10.755 6.845 10.755H13.155C13.2876 10.755 13.4148 10.8077 13.5086 10.9014C13.6023 10.9952 13.655 11.1224 13.655 11.255C13.655 11.3876 13.6023 11.5148 13.5086 11.6085C13.4148 11.7023 13.2876 11.755 13.155 11.755Z" fill="#424E6E"/>
-</svg>

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

@@ -1,20 +0,0 @@
-import PFilterIcon from '@squirrel/components/p-table-header-cell/p-table-filter-icon.vue';
-import { createWrapperFor } from '@tests/vitest.helpers';
-
-describe('PFilterIcon.vue', () => {
-  it('renders a filter icon', async () => {
-    const wrapper = createWrapperFor(PFilterIcon);
-
-    const icon = await wrapper.find('div.filter.w-5.h-5.cursor-pointer.shrink-0');
-
-    expect(icon.exists()).toBe(true);
-  });
-
-  it('sets the active icon state', async () => {
-    const wrapper = createWrapperFor(PFilterIcon, { props: { active: true } });
-
-    const icon = await wrapper.find('div.filter.w-5.h-5.cursor-pointer.shrink-0');
-
-    expect(icon.classes()).toContain('active');
-  });
-});

package/squirrel/components/p-table-header-cell/p-filter-icon.stories.js

@@ -1,33 +0,0 @@
-import PFilterIcon from '@squirrel/components/p-table-header-cell/p-table-filter-icon.vue';
-
-export default {
-  title: 'Components/PFilterIcon',
-  component: PFilterIcon,
-  tags: ['autodocs'],
-  render: (args) => ({
-    components: { PFilterIcon },
-    setup() {
-      return { args };
-    },
-    template: `<PFilterIcon v-bind="args" />`,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        component: 'A component that is used inside table header cells to display a filtering/sorting icon.',
-      },
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    active: false,
-  },
-};
-
-export const Active = {
-  args: {
-    active: true,
-  },
-};

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

@@ -1,41 +0,0 @@
-<template>
-  <div :class="['h-5 w-5 shrink-0 cursor-pointer filter', { active: active }]" v-bind="$attrs"></div>
-</template>
-
-<script setup lang="ts">
-/**
- * A filter icon component for table headers, used to indicate and toggle filter state.
- * Changes its appearance based on the active state and supports hover effects.
- *
- * @displayName PTableFilterIcon
- */
-defineOptions({
-  name: 'PTableFilterIcon',
-  inheritAttrs: false,
-});
-
-defineProps({
-  /**
-   * Whether the filter icon is active (filtered state).
-   */
-  active: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-.filter {
-  background: url('@squirrel/assets/filter-icon.svg') no-repeat;
-}
-.filter:hover {
-  background: url('@squirrel/assets/filter-icon-hover.svg') no-repeat;
-}
-.filter.active {
-  background: url('@squirrel/assets/filter-icon-active.svg') no-repeat;
-}
-.filter.active:hover {
-  background: url('@squirrel/assets/filter-icon-active-hover.svg') no-repeat;
-}
-</style>