@pequity/squirrel 8.4.5 → 8.5.1

package/squirrel/components/p-modal/p-modal-basic.spec.js

@@ -1,5 +1,5 @@
 import PModal from '@squirrel/components/p-modal/p-modal.vue';
-import { waitRAF } from '@tests/vitest.helpers';
+import { waitNT, waitRAF } from '@tests/vitest.helpers';
 import { mount } from '@vue/test-utils';
 
 const createWrapperContainer = (componentArgs) => {
@@ -85,18 +85,44 @@ describe('Modal basic functionality', () => {
     await wrapper.setData({ showModal: true });
 
     expect(wrapper.find('[data-pm-id]').classes()).toEqual(
-      'pm relative flex flex-col rounded-2xl pb-6 cursor-default bg-surface shadow-xl'.split(' ')
+      'pm relative flex flex-col rounded-2xl cursor-default bg-surface shadow-xl pb-6'.split(' ')
     );
 
     wrapper.unmount();
   });
 
+  it('sets the correct base modal class when modal-wrapper slot is used', async () => {
+    const wrapper = mount(PModal, {
+      attachTo: document.body,
+      global: {
+        stubs: {
+          transition: true,
+          teleport: true,
+        },
+      },
+      props: {
+        modelValue: true,
+      },
+      slots: {
+        'modal-wrapper': '<div>Modal content goes here...</div>',
+      },
+    });
+
+    await waitNT(wrapper.vm);
+
+    const modalContent = wrapper.find('[data-pm-id]');
+
+    expect(modalContent.classes()).not.toContain('pb-6');
+
+    wrapper.unmount();
+  });
+
   it('passes the modalBaseClass prop to the modal', async () => {
     const wrapper = createWrapperContainer({ modalBaseClass: 'custom-class' });
 
     await wrapper.setData({ showModal: true });
 
-    expect(wrapper.find('[data-pm-id]').classes()).toEqual(['custom-class']);
+    expect(wrapper.find('[data-pm-id]').classes()).toEqual(['custom-class', 'pb-6']);
 
     wrapper.unmount();
   });

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

@@ -29,40 +29,47 @@
         @click="overlayClick($event)"
         @keydown="keydown($event)"
       >
-        <div ref="pm" :data-pm-id="id" :class="[modalBaseClass, modalClass]" :style="modalStyle">
-          <slot name="title-wrapper">
-            <div class="flex pb-4 pl-8 pr-4 pt-4">
-              <h3 v-if="title" :id="`${id}-title`" class="mr-auto pt-4 text-xl font-semibold">
-                {{ title }}
-              </h3>
-              <div class="ml-auto">
-                <PCloseBtn
-                  :disabled="disabled"
-                  :class="{ invisible: !enableClose }"
-                  :aria-label="closeLabel"
-                  @click.prevent="close"
-                />
+        <div
+          ref="pm"
+          :data-pm-id="id"
+          :class="[modalBaseClass, modalClass, { 'pb-6': !$slots['modal-wrapper'] }]"
+          :style="modalStyle"
+        >
+          <slot name="modal-wrapper">
+            <slot name="title-wrapper">
+              <div class="flex pb-4 pl-8 pr-4 pt-4">
+                <h3 v-if="title" :id="`${id}-title`" class="mr-auto pt-4 text-xl font-semibold">
+                  {{ title }}
+                </h3>
+                <div class="ml-auto">
+                  <PCloseBtn
+                    :disabled="disabled"
+                    :class="{ invisible: !enableClose }"
+                    :aria-label="closeLabel"
+                    @click.prevent="close"
+                  />
+                </div>
               </div>
+            </slot>
+            <div v-if="errorMsg" class="mb-4 px-8">
+              <PAlert type="error">{{ errorMsg }}</PAlert>
             </div>
-          </slot>
-          <div v-if="errorMsg" class="mb-4 px-8">
-            <PAlert type="error">{{ errorMsg }}</PAlert>
-          </div>
-          <slot name="content-wrapper">
-            <div
-              :id="`${id}-content`"
-              :class="[
-                'relative grow overflow-y-auto overflow-x-hidden px-8',
-                { 'pointer-events-none opacity-50': disabled },
-              ]"
-            >
-              <slot></slot>
-            </div>
-          </slot>
-          <slot name="footer-wrapper">
-            <div v-if="$slots.footer" class="px-8 pt-6">
-              <slot name="footer"></slot>
-            </div>
+            <slot name="content-wrapper">
+              <div
+                :id="`${id}-content`"
+                :class="[
+                  'relative grow overflow-y-auto overflow-x-hidden px-8',
+                  { 'pointer-events-none opacity-50': disabled },
+                ]"
+              >
+                <slot></slot>
+              </div>
+            </slot>
+            <slot name="footer-wrapper">
+              <div v-if="$slots.footer" class="px-8 pt-6">
+                <slot name="footer"></slot>
+              </div>
+            </slot>
           </slot>
         </div>
       </div>
@@ -106,6 +113,10 @@ defineSlots<{
    * Default content slot for the modal body.
    */
   default?: () => unknown;
+  /**
+   * Custom modal wrapper content.
+   */
+  'modal-wrapper'?: () => unknown;
   /**
    * Custom title wrapper content.
    */
@@ -209,7 +220,7 @@ const props = defineProps({
    */
   modalBaseClass: {
     type: [String, Object, Array] as PropType<StyleValue>,
-    default: 'pm relative flex flex-col rounded-2xl pb-6 cursor-default bg-surface shadow-xl',
+    default: 'pm relative flex flex-col rounded-2xl cursor-default bg-surface shadow-xl',
   },
   /**
    * Additional CSS classes for the modal content.

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();
@@ -354,6 +354,57 @@ describe('PTable.vue', () => {
     expect(wrapper.findAll('tbody div')[2].text()).toBe('true');
   });
 
+  it('renders correctly with column resizing enabled', async () => {
+    const cols = cloneDeep(columns);
+    const wrapper = createWrapperFor(PTable, {
+      props: { cols, colsResizable: true },
+      global: {
+        stubs: {
+          PTableHeaderCell: { template: `<div class="header-cell-stub">{{ text }}</div>`, props: { text: '' } },
+        },
+      },
+    });
+
+    // Should have resize handles for middle columns (not first, not last when isLastColFixed)
+    const resizeHandles = wrapper.findAll('[data-resize-handle]');
+    expect(resizeHandles.length).toBe(cols.length - 1); // All columns except first
+
+    // Should have extra th for column resizing when not isLastColFixed
+    const extraTh = wrapper.find('thead th:last-child');
+    expect(extraTh.classes()).toContain('min-w-[80px]');
+    expect(extraTh.classes()).toContain('bg-gradient-to-r');
+  });
+
+  it('renders correctly with subheader', async () => {
+    const cols = cloneDeep(columns);
+    const wrapper = createWrapperFor(PTable, {
+      props: { cols, subheader: true, isFirstColFixed: true, isLastColFixed: true },
+      slots: {
+        'subheader-cell-first-column': `<div class="subheader-content">Subheader 1</div>`,
+        'subheader-cell-third-column': `<div class="subheader-content">Subheader 3</div>`,
+      },
+      global: {
+        stubs: {
+          PTableHeaderCell: { template: `<div class="header-cell-stub">{{ text }}</div>`, props: { text: '' } },
+        },
+      },
+    });
+
+    // Check subheader divs exist
+    const subheaderDivs = wrapper.findAll('.subheader-content');
+    expect(subheaderDivs.length).toBe(2);
+    expect(subheaderDivs[0].text()).toBe('Subheader 1');
+    expect(subheaderDivs[1].text()).toBe('Subheader 3');
+
+    // Check subheader classes include th-shadow for fixed columns
+    cols.forEach((col, i) => {
+      const subheaderDiv = wrapper.find(`th[data-col-id="${col.id}"] > div:last-child`);
+      if (i === 0 || i === cols.length - 1) {
+        expect(subheaderDiv.classes()).toContain('th-shadow');
+      }
+    });
+  });
+
   it('shows additional rows when the virtualizer padding options are set', async () => {
     const cols = cloneDeep(columns);
     const wrapper = createWrapperFor(PTable, {
@@ -375,18 +426,36 @@ describe('PTable.vue', () => {
     expect(wrapper.find('table tbody tr:last-child').classes()).toEqual([]);
   });
 
-  it('sets th refs correctly', async () => {
+  it('emits col-resize event when column resizing stops', async () => {
     const cols = cloneDeep(columns);
-    const wrapper = createWrapperFor(PTable, { props: { cols } });
+    const wrapper = createWrapperFor(PTable, {
+      props: {
+        cols,
+        colsResizable: true,
+        data,
+      },
+    });
 
-    const thsRefs = wrapper.vm.ths;
+    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,
+      });
+    }
 
-    expect(thsRefs.length).toBe(3);
-    thsRefs.forEach((thRef, i) => {
-      const thClasses = [...thRef.classList];
+    await resizeHandle.trigger('dblclick');
 
-      expect(thClasses).toContain(cols[i].thAttrs.class);
-      expect(thRef instanceof HTMLTableCellElement).toBe(true);
-    });
+    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.types.ts

@@ -26,3 +26,5 @@ export const isLastColFixedInjectionKey = Symbol('isLastColFixed');
 export const isColsResizableInjectionKey = Symbol('isColsResizable');
 
 export const MIN_WIDTH_COL_RESIZE = 80;
+
+export const HEADER_CELL_ONE_LINE_HEIGHT = 20;

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

@@ -21,7 +21,7 @@
       ]"
       v-on="colsResizable ? { mousemove: colResize } : {}"
     >
-      <thead>
+      <thead ref="theadRef">
         <tr>
           <th
             v-for="(col, i) in props.cols"
@@ -33,14 +33,18 @@
             class="bg-surface"
           >
             <div :class="thDivClasses(i)" :style="bgColorStyle(col)">
-              <div class="flex">
+              <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)"
@@ -48,7 +52,7 @@
               </div>
               <div
                 v-if="colsResizable && i !== 0 && !(i === cols.length - 1 && isLastColFixed)"
-                class="absolute bottom-2 right-0 z-110 h-5 w-2 cursor-col-resize after:absolute after:bottom-0 after:z-110 after:block after:h-full after:w-2 after:cursor-col-resize after:border-r-2 after:border-dashed after:border-p-gray-30"
+                class="absolute right-0 top-1/2 z-110 h-5 w-2 -translate-y-1/2 cursor-col-resize after:absolute after:bottom-0 after:z-110 after:block after:h-full after:w-2 after:cursor-col-resize after:border-r-2 after:border-dashed after:border-p-gray-30"
                 :class="i === cols.length - 1 ? 'after:right-0.5' : 'after:right-0'"
                 data-resize-handle
                 @mousedown="colResizeStart($event, i)"
@@ -108,10 +112,11 @@ import {
   type TableCol,
 } from '@squirrel/components/p-table/p-table.types';
 import { usePTableColResize } from '@squirrel/components/p-table/usePTableColResize';
+import { usePTableHeaderWrap } from '@squirrel/components/p-table/usePTableHeaderWrap';
 import PTableHeaderCell from '@squirrel/components/p-table-header-cell/p-table-header-cell.vue';
 import PTableTd from '@squirrel/components/p-table-td/p-table-td.vue';
 import { kebabCase } from 'lodash-es';
-import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, provide, ref, useTemplateRef, watch } from 'vue';
 
 type Props = {
   /**
@@ -209,6 +214,7 @@ provide(
 
 // Data
 const scrollWrapper = ref<HTMLElement | null>(null);
+const theadRef = useTemplateRef('theadRef');
 const ths = ref<HTMLElement[]>([]);
 const {
   isColResizing,
@@ -222,6 +228,7 @@ const {
   enabled: computed(() => props.colsResizable),
   ths,
 });
+const { hasWrap } = usePTableHeaderWrap(theadRef);
 const tbodyElement = ref<HTMLElement | null>(null);
 
 // Methods

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

@@ -0,0 +1,118 @@
+import { HEADER_CELL_ONE_LINE_HEIGHT } from '@squirrel/components/p-table/p-table.types';
+import { usePTableHeaderWrap } from '@squirrel/components/p-table/usePTableHeaderWrap';
+import { waitNT } from '@tests/vitest.helpers';
+import { mount } from '@vue/test-utils';
+import { defineComponent, useTemplateRef } from 'vue';
+
+// Mock ResizeObserver to capture the composable's callback
+let composableResizeCallback;
+const mockResizeObserver = vi.fn((callback) => {
+  composableResizeCallback = callback;
+  return {
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+  };
+});
+
+const createWrapper = (refName = 'theadRef') => {
+  const TestComponent = defineComponent({
+    setup() {
+      const theadRef = useTemplateRef('theadRef');
+      const { hasWrap } = usePTableHeaderWrap(theadRef);
+
+      return {
+        theadRef,
+        hasWrap,
+      };
+    },
+    template: `
+      <table>
+        <thead ref="${refName}" :data-has-wrap="hasWrap">
+          <tr>
+            <th>
+              <div data-p-table-header-text class="div-to-resize">Short</div>
+            </th>
+            <th>
+              <span data-p-table-header-text>Very Long Header That Could Potentially Wrap To Multiple Lines</span>
+            </th>
+          </tr>
+        </thead>
+      </table>
+    `,
+  });
+
+  return mount(TestComponent, {
+    attachTo: document.body,
+  });
+};
+
+describe('usePTableHeaderWrap', () => {
+  const originalOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight');
+  const originalGlobalResizeObserver = globalThis.ResizeObserver;
+
+  beforeAll(() => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      value: HEADER_CELL_ONE_LINE_HEIGHT,
+    });
+    globalThis.ResizeObserver = mockResizeObserver;
+  });
+
+  afterAll(() => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetHeight);
+    globalThis.ResizeObserver = originalGlobalResizeObserver;
+  });
+
+  beforeEach(() => {
+    mockResizeObserver.mockClear();
+    composableResizeCallback = null;
+  });
+
+  it('should have hasWrap false when all divs are single line height', async () => {
+    const wrapper = createWrapper();
+
+    // Trigger the composable's ResizeObserver callback
+    if (composableResizeCallback) {
+      composableResizeCallback();
+      await waitNT(wrapper.vm);
+    }
+
+    expect(wrapper.find('thead').attributes()['data-has-wrap']).toBe('false');
+
+    wrapper.unmount();
+  });
+
+  it('should have hasWrap true when one div is double line height', async () => {
+    // Override offsetHeight for the "div-to-resize" element
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      get() {
+        if (this.classList.contains('div-to-resize')) {
+          return HEADER_CELL_ONE_LINE_HEIGHT * 2;
+        }
+        return HEADER_CELL_ONE_LINE_HEIGHT;
+      },
+    });
+
+    const wrapper = createWrapper();
+
+    // Trigger the composable's ResizeObserver callback
+    if (composableResizeCallback) {
+      composableResizeCallback();
+      await waitNT(wrapper.vm);
+    }
+
+    expect(wrapper.find('thead').attributes()['data-has-wrap']).toBe('true');
+
+    wrapper.unmount();
+  });
+
+  it('should handle null theadRef gracefully', () => {
+    const wrapper = createWrapper('nullRef');
+
+    expect(wrapper.find('thead').attributes()['data-has-wrap']).toBe('false');
+
+    wrapper.unmount();
+  });
+});

package/squirrel/components/p-table/usePTableHeaderWrap.ts

@@ -0,0 +1,45 @@
+import { HEADER_CELL_ONE_LINE_HEIGHT } from '@squirrel/components/p-table/p-table.types';
+import { onBeforeUnmount, onMounted, type Ref, ref } from 'vue';
+
+export const usePTableHeaderWrap = (theadRef: Ref<HTMLElement | null>) => {
+  let headerObserver: ResizeObserver | null = null;
+  const hasWrap = ref(false);
+
+  const setupObserver = () => {
+    if (!theadRef.value) return;
+
+    headerObserver = new ResizeObserver(() => {
+      if (theadRef.value) {
+        const textDivs = theadRef.value.querySelectorAll('[data-p-table-header-text]') as NodeListOf<HTMLElement>;
+
+        for (const div of textDivs) {
+          if (div.offsetHeight > HEADER_CELL_ONE_LINE_HEIGHT) {
+            hasWrap.value = true;
+            return;
+          }
+        }
+
+        hasWrap.value = false;
+      }
+    });
+
+    headerObserver.observe(theadRef.value);
+  };
+
+  const cleanupObserver = () => {
+    if (headerObserver) {
+      headerObserver.disconnect();
+      headerObserver = null;
+    }
+  };
+
+  onMounted(() => {
+    setupObserver();
+  });
+
+  onBeforeUnmount(() => {
+    cleanupObserver();
+  });
+
+  return { hasWrap };
+};

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,9 +27,12 @@ describe('PTableHeaderCell.vue', () => {
     expect(div.attributes('title')).toBe('Test text');
     expect(div.classes()).toEqual([
       'text-xs',
-      'leading-5',
       'font-semibold',
-      'truncate',
+      'line-clamp-2',
+      'break-words',
+      'hyphens-auto',
+      'whitespace-normal',
+      'max-h-10',
       'shrink',
       'test-class',
       'text-p-gray-60',
@@ -45,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');
   });
 
@@ -79,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];