@pequity/squirrel 8.4.5 → 8.5.0

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

@@ -25,7 +25,11 @@ describe('PTableHeaderCell.vue', () => {
       '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',

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

@@ -4,6 +4,7 @@
       :class="[DEFAULT_CLASSES, textClass, textColorClass, { 'mr-auto': !tooltipText }]"
       :style="style"
       :title="text"
+      data-p-table-header-text
     >
       {{ text }}
     </div>
@@ -23,7 +24,7 @@ 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';
 
-const DEFAULT_CLASSES = `text-xs leading-5 font-semibold truncate shrink`;
+const DEFAULT_CLASSES = `text-xs leading-5 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.