@pequity/squirrel 10.0.2 → 10.1.0

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

@@ -3,7 +3,7 @@
   <div v-if="!loading && pages.length > 1" class="flex text-p-gray-40">
     <div
       :class="[BTN_CLASS, Number(modelValue) <= 1 ? ARROW_INACTIVE_CLASS : ARROW_ACTIVE_CLASS]"
-      aria-label="go to the previous page"
+      :aria-label="$t('squirrel.pagination_go_to_previous_page')"
       @click="setPage(Number(modelValue) - 1)"
     >
       <PIcon icon="chevron-left" width="24px" />
@@ -13,7 +13,7 @@
         <div
           v-if="page !== DOTS"
           :class="[BTN_CLASS, page === modelValue ? BTN_ACTIVE_CLASS : BTN_INACTIVE_CLASS]"
-          :aria-label="`go to page ${page}`"
+          :aria-label="$t('squirrel.pagination_go_to_page', { page })"
         >
           {{ page }}
         </div>
@@ -22,7 +22,7 @@
     </div>
     <div
       :class="[BTN_CLASS, modelValue === pageCount ? ARROW_INACTIVE_CLASS : ARROW_ACTIVE_CLASS]"
-      aria-label="go to the next page"
+      :aria-label="$t('squirrel.pagination_go_to_next_page')"
       @click="setPage(Number(modelValue) + 1)"
     >
       <PIcon icon="chevron-right" width="24px" />

package/squirrel/components/p-pagination-info/p-pagination-info.vue

@@ -1,8 +1,8 @@
 <template>
   <PSkeletonLoader v-if="loading" class="h-6 w-56" />
   <div v-else class="text-sm font-medium text-p-gray-40">
-    <template v-if="count">Showing {{ from }} to {{ to }} of {{ count }} results</template>
-    <slot v-else name="no-results">No results found</slot>
+    <template v-if="count">{{ $t('squirrel.pagination_info_showing_results', { from, to, count }) }}</template>
+    <slot v-else name="no-results">{{ $t('squirrel.pagination_info_no_results_found') }}</slot>
   </div>
 </template>
 

package/squirrel/components/p-progress-bar/{p-progess-bar.spec.js → p-progress-bar.spec.js}

@@ -2,20 +2,22 @@ import PProgressBar from '@squirrel/components/p-progress-bar/p-progress-bar.vue
 import { createWrapperFor } from '@tests/vitest.helpers';
 
 const items = [
-  { vaLue: 50, label: 'bar1', color: 'rgb(204, 204, 204)' },
-  { vaLue: 50, label: 'bar2', color: 'rgb(221, 221, 221)' },
+  { value: 50, label: 'bar1', color: 'rgb(204, 204, 204)' },
+  { value: 30, label: 'bar2', color: 'rgb(221, 221, 221)' },
 ];
 
 describe('PProgressBar.vue', () => {
   it('renders correctly', async () => {
-    const wrapper = createWrapperFor(PProgressBar, { props: { total: 2, items } });
+    const wrapper = createWrapperFor(PProgressBar, { props: { total: 100, items } });
 
     const div = wrapper.find('div[role="progressbar"]');
 
     const bars = div.findAll('div.h-full');
 
     bars.forEach((bar, i) => {
-      expect(bar.attributes('style')).toEqual(`background: ${items[i].color};`);
+      const expectedWidth = `${(items[i].value / 100) * 100}%`;
+      expect(bar.attributes('style')).toContain(`width: ${expectedWidth}`);
+      expect(bar.attributes('style')).toContain(`background: ${items[i].color}`);
     });
 
     expect(div.classes()).toEqual(['flex', 'justify-start', 'overflow-hidden', 'rounded', 'bg-p-blue-20']);
@@ -24,7 +26,7 @@ describe('PProgressBar.vue', () => {
   it('attrs fall through', async () => {
     const ParentComponent = {
       template: `
-        <PProgressBar :total="2" :items="items" class="test-class" data-testattr="test attribute" />
+        <PProgressBar :total="100" :items="items" class="test-class" data-testattr="test attribute" />
       `,
       data() {
         return {

package/squirrel/components/p-select-btn/p-select-btn.spec.js

@@ -283,4 +283,108 @@ describe('PSelectBtn.vue', () => {
 
     expect(true).toBe(true);
   });
+
+  describe('Multiple selection', () => {
+    it('allows multiple items to be selected', async () => {
+      const wrapper = createWrapperFor(PSelectBtn, {
+        props: {
+          items,
+          itemValue: 'valueCustom',
+          itemText: 'textCustom',
+          modelValue: [items[0], items[1]], // Select first two items
+          multiple: true,
+          'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+        },
+      });
+
+      // Check that first two buttons are selected
+      const buttons = await wrapper.findAll('button');
+      expect(buttons[0].attributes()['aria-selected']).toBe('true');
+      expect(buttons[1].attributes()['aria-selected']).toBe('true');
+      expect(buttons[2].attributes()['aria-selected']).toBe('false');
+    });
+
+    it('adds items to selection when clicked in multiple mode', async () => {
+      const wrapper = createWrapperFor(PSelectBtn, {
+        props: {
+          items,
+          itemValue: 'valueCustom',
+          itemText: 'textCustom',
+          modelValue: [items[0]], // Start with first item selected
+          multiple: true,
+          'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+        },
+      });
+
+      // Click second item to add it to selection
+      await wrapper.findByText('Option 2', 'button').trigger('click');
+
+      const newModelValue = wrapper.props('modelValue');
+      expect(Array.isArray(newModelValue)).toBe(true);
+      expect(newModelValue).toHaveLength(2);
+      expect(newModelValue[0].valueCustom).toBe(1);
+      expect(newModelValue[1].valueCustom).toBe(2);
+    });
+
+    it('removes items from selection when clicked again in multiple mode', async () => {
+      const wrapper = createWrapperFor(PSelectBtn, {
+        props: {
+          items,
+          itemValue: 'valueCustom',
+          itemText: 'textCustom',
+          modelValue: [items[0], items[1]], // Start with first two selected
+          multiple: true,
+          'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+        },
+      });
+
+      // Click first item to remove it from selection
+      await wrapper.findByText('Option 1', 'button').trigger('click');
+
+      const newModelValue = wrapper.props('modelValue');
+      expect(Array.isArray(newModelValue)).toBe(true);
+      expect(newModelValue).toHaveLength(1);
+      expect(newModelValue[0].valueCustom).toBe(2);
+    });
+
+    it('creates new array when starting with non-array value in multiple mode', async () => {
+      const wrapper = createWrapperFor(PSelectBtn, {
+        props: {
+          items,
+          itemValue: 'valueCustom',
+          itemText: 'textCustom',
+          modelValue: null, // Start with null
+          multiple: true,
+          'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+        },
+      });
+
+      // Click first item
+      await wrapper.findByText('Option 1', 'button').trigger('click');
+
+      const newModelValue = wrapper.props('modelValue');
+      expect(Array.isArray(newModelValue)).toBe(true);
+      expect(newModelValue).toHaveLength(1);
+      expect(newModelValue[0].valueCustom).toBe(1);
+    });
+
+    it('handles isSelected correctly with non-array modelValue in multiple mode', async () => {
+      const wrapper = createWrapperFor(PSelectBtn, {
+        props: {
+          items,
+          itemValue: 'valueCustom',
+          itemText: 'textCustom',
+          modelValue: null, // Non-array value
+          multiple: true,
+        },
+      });
+
+      const buttons = await wrapper.findAll('button');
+
+      // All buttons should be unselected when modelValue is not an array
+      buttons.forEach((button) => {
+        expect(button.attributes()['aria-selected']).toBe('false');
+      });
+    });
+  });
 });

package/squirrel/components/p-select-list/p-select-list.vue

@@ -19,7 +19,7 @@
           ref="actionsContainer"
           class="flex flex-row justify-between text-xs font-semibold text-primary"
         >
-          <p class="text-p-purple-60">{{ computedItems.length }} items</p>
+          <p class="text-p-purple-60">{{ $t('squirrel.select_list_items', computedItems.length) }}</p>
           <div class="flex flex-row">
             <a
               v-if="computedItems.length === internalItems.length"
@@ -28,18 +28,18 @@
               ]"
               @click="selectAll"
             >
-              Select all
+              {{ $t('squirrel.select_list_select_all') }}
             </a>
             <a
               v-else
               :class="[computedInsideSelected ? 'pointer-events-none opacity-50' : 'cursor-pointer']"
               @click="selectAll"
             >
-              Select all filtered
+              {{ $t('squirrel.select_list_select_all_filtered') }}
             </a>
             <span class="px-1 leading-none">.</span>
             <a :class="[selectedItems.length ? 'cursor-pointer' : 'pointer-events-none opacity-50']" @click="clearAll">
-              Clear all
+              {{ $t('squirrel.select_list_clear_all') }}
             </a>
           </div>
         </div>
@@ -110,7 +110,9 @@
           </div>
         </div>
         <slot v-if="!computedItems.length" name="no-items">
-          <div :class="['flex items-center justify-center', SIZES[size]]">No items found</div>
+          <div :class="['flex items-center justify-center', SIZES[size]]">
+            {{ $t('squirrel.select_list_no_items_found') }}
+          </div>
         </slot>
       </div>
     </div>

package/squirrel/components/p-select-pill/p-select-pill.spec.js

@@ -136,4 +136,118 @@ describe('PSelectPill.vue', () => {
       expect(button.text()).toContain(`subtext for ${items[i].text}`);
     });
   });
+
+  it('handles empty/null items array with default', async () => {
+    const wrapper = createWrapperFor(PSelectPill, {
+      props: {
+        items: null, // Test default items prop
+      },
+    });
+
+    const buttons = await wrapper.findAll('button');
+    expect(buttons).toHaveLength(0);
+  });
+
+  it('updates pill style when selection changes', async () => {
+    const wrapper = createWrapperFor(PSelectPill, {
+      props: {
+        items: selectItems,
+        modelValue: 1,
+      },
+    });
+
+    // Spy on the setPillStyle method
+    const setPillStyleSpy = vi.spyOn(wrapper.vm, 'setPillStyle');
+
+    // Trigger a prop change to test setPillStyle
+    await wrapper.setProps({ modelValue: 2 });
+
+    // Wait for the setTimeout delay (60ms + buffer)
+    await new Promise((resolve) => setTimeout(resolve, 80));
+
+    expect(setPillStyleSpy).toHaveBeenCalled();
+  });
+
+  it('handles setPillStyle when no active element exists', async () => {
+    const wrapper = createWrapperFor(PSelectPill, {
+      props: {
+        items: selectItems,
+        modelValue: 999, // Non-existent value
+      },
+    });
+
+    // Should not throw error when no active element exists
+    expect(() => wrapper.vm.setPillStyle()).not.toThrow();
+  });
+
+  it('handles responsive sizing with getOffsetValues fallback', async () => {
+    const wrapper = createWrapperFor(PSelectPill, {
+      props: {
+        items: selectItems,
+        modelValue: 1,
+      },
+      attachTo: document.body, // Ensure proper DOM attachment
+    });
+
+    // Mock offsetWidth to be 0 to trigger getOffsetValues fallback
+    const activeButton = wrapper.find('button.text-p-purple-60');
+    expect(activeButton.exists()).toBe(true);
+
+    // Mock the element's offsetWidth to be 0
+    Object.defineProperty(activeButton.element, 'offsetWidth', {
+      get: () => 0,
+    });
+    Object.defineProperty(activeButton.element, 'offsetLeft', {
+      get: () => 0,
+    });
+
+    // This should trigger the getOffsetValues fallback and not throw
+    expect(() => wrapper.vm.setPillStyle()).not.toThrow();
+
+    wrapper.unmount();
+  });
+
+  it('handles lifecycle events correctly', async () => {
+    const wrapper = createWrapperFor(PSelectPill, {
+      props: {
+        items: selectItems,
+        modelValue: 1,
+      },
+      attachTo: document.body,
+    });
+
+    // Test mounted lifecycle
+    expect(wrapper.vm.$refs.pill).toBeDefined();
+
+    // Test that pill ref exists and style can be set
+    if (wrapper.vm.$refs.pill instanceof HTMLElement) {
+      wrapper.vm.setPillStyle();
+      expect(wrapper.vm.$refs.pill.style.left).toBeDefined();
+      expect(wrapper.vm.$refs.pill.style.width).toBeDefined();
+    }
+
+    wrapper.unmount();
+  });
+
+  it('handles window resize events', async () => {
+    const wrapper = createWrapperFor(PSelectPill, {
+      props: {
+        items: selectItems,
+        modelValue: 1,
+      },
+      attachTo: document.body,
+    });
+
+    const setPillStyleSpy = vi.spyOn(wrapper.vm, 'setPillStyle');
+
+    // Simulate window resize
+    window.dispatchEvent(new Event('resize'));
+
+    // Wait for debounced resize handler
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(setPillStyleSpy).toHaveBeenCalled();
+
+    wrapper.unmount();
+  });
 });

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

@@ -1,7 +1,7 @@
 import { usePTableColResize } from '@squirrel/components/p-table/usePTableColResize';
 import { createApp, nextTick, ref } from 'vue';
 
-const withSetup = (composable) => {
+const withSetup = (composable, returnApp = false) => {
   let result;
 
   const app = createApp({
@@ -9,23 +9,36 @@ const withSetup = (composable) => {
       result = composable();
       return () => {};
     },
+    template: '<div></div>',
   });
 
-  app.mount(document.createElement('div'));
+  const element = document.createElement('div');
+  app.mount(element);
 
-  return result;
+  return returnApp ? { result, app, element } : { result };
 };
 
 describe('usePTableColResize', () => {
+  let mockAddEventListener;
+  let mockRemoveEventListener;
+
+  beforeEach(() => {
+    mockAddEventListener = vi.spyOn(document, 'addEventListener');
+    mockRemoveEventListener = vi.spyOn(document, 'removeEventListener');
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   it('should resize the column when colResize is called', () => {
     const options = {
       enabled: ref(true),
       ths: ref([{ offsetWidth: 100, getBoundingClientRect: () => ({ width: 100 }) }]),
     };
 
-    const { isColResizing, colResizingIndex, colResizeHandleLeft, colResizingWidth, colResize } = withSetup(() =>
-      usePTableColResize(options)
-    );
+    const { result } = withSetup(() => usePTableColResize(options));
+    const { isColResizing, colResizingIndex, colResizeHandleLeft, colResizingWidth, colResize } = result;
 
     isColResizing.value = true;
     colResizingIndex.value = 0;
@@ -42,9 +55,8 @@ describe('usePTableColResize', () => {
       enabled: ref(true),
       ths: ref([{ offsetWidth: 100 }, { offsetWidth: 200 }]),
     };
-    const { colResizeStart, isColResizing, colResizingWidth, colResizingIndex } = withSetup(() =>
-      usePTableColResize(options)
-    );
+    const { result } = withSetup(() => usePTableColResize(options));
+    const { colResizeStart, isColResizing, colResizingWidth, colResizingIndex } = result;
 
     const event = new MouseEvent('mousedown', { detail: 1 });
     colResizeStart(event, 1);
@@ -59,7 +71,23 @@ describe('usePTableColResize', () => {
       enabled: ref(true),
       ths: ref([{ offsetWidth: 100 }]),
     };
-    const { colResizeStop, isColResizing } = withSetup(() => usePTableColResize(options));
+    const { result } = withSetup(() => usePTableColResize(options));
+    const { colResizeStop, isColResizing } = result;
+
+    colResizeStop();
+
+    expect(isColResizing.value).toBe(false);
+  });
+
+  it('should do nothing when colResizeStop is called and not resizing', () => {
+    const options = {
+      enabled: ref(true),
+      ths: ref([{ offsetWidth: 100 }]),
+    };
+    const { result } = withSetup(() => usePTableColResize(options));
+    const { colResizeStop, isColResizing } = result;
+
+    expect(isColResizing.value).toBe(false);
 
     colResizeStop();
 
@@ -77,7 +105,8 @@ describe('usePTableColResize', () => {
         },
       ]),
     };
-    const { colResizeFitToData, isColResizing, colResizingWidth } = withSetup(() => usePTableColResize(options));
+    const { result } = withSetup(() => usePTableColResize(options));
+    const { colResizeFitToData, isColResizing, colResizingWidth } = result;
 
     colResizeFitToData(0);
 
@@ -86,4 +115,87 @@ describe('usePTableColResize', () => {
     expect(isColResizing.value).toBe(false);
     expect(colResizingWidth.value).toBe(150);
   });
+
+  it('should return early when colResizeFitToData cannot find cells', () => {
+    const options = {
+      enabled: ref(true),
+      ths: ref([
+        {
+          closest: () => null,
+        },
+      ]),
+    };
+    const { result } = withSetup(() => usePTableColResize(options));
+    const { colResizeFitToData, colResizingWidth } = result;
+
+    const initialWidth = colResizingWidth.value;
+
+    colResizeFitToData(0);
+
+    // Should not change width since no cells were found
+    expect(colResizingWidth.value).toBe(initialWidth);
+  });
+
+  it('should manage event listeners based on enabled state', async () => {
+    const enabled = ref(true);
+    const options = {
+      enabled,
+      ths: ref([{ offsetWidth: 100 }]),
+    };
+
+    withSetup(() => usePTableColResize(options));
+
+    // Should add listener on mount when enabled
+    expect(mockAddEventListener).toHaveBeenCalledWith('mouseup', expect.any(Function));
+
+    // Change enabled to false
+    enabled.value = false;
+    await nextTick();
+    expect(mockRemoveEventListener).toHaveBeenCalledWith('mouseup', expect.any(Function));
+
+    // Change enabled back to true
+    enabled.value = true;
+    await nextTick();
+    expect(mockAddEventListener).toHaveBeenCalledTimes(2);
+  });
+
+  it('should cleanup event listeners on unmount when enabled', () => {
+    const options = {
+      enabled: ref(true),
+      ths: ref([{ offsetWidth: 100 }]),
+    };
+
+    const { app } = withSetup(() => usePTableColResize(options), true);
+
+    // Trigger unmount
+    app.unmount();
+
+    expect(mockRemoveEventListener).toHaveBeenCalledWith('mouseup', expect.any(Function));
+  });
+
+  it('should not manage event listeners when disabled on mount', () => {
+    const options = {
+      enabled: ref(false),
+      ths: ref([{ offsetWidth: 100 }]),
+    };
+
+    withSetup(() => usePTableColResize(options));
+
+    // Should not add listener when disabled
+    expect(mockAddEventListener).not.toHaveBeenCalled();
+  });
+
+  it('should not start resizing on double click', () => {
+    const options = {
+      enabled: ref(true),
+      ths: ref([{ offsetWidth: 100 }]),
+    };
+    const { result } = withSetup(() => usePTableColResize(options));
+    const { colResizeStart, isColResizing } = result;
+
+    const event = new MouseEvent('mousedown', { detail: 2 }); // Double click
+    colResizeStart(event, 0);
+
+    expect(isColResizing.value).toBe(false);
+  });
 });

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

@@ -6,7 +6,7 @@ import { defineComponent, useTemplateRef } from 'vue';
 
 // Mock ResizeObserver to capture the composable's callback
 let composableResizeCallback;
-const mockResizeObserver = vi.fn((callback) => {
+const mockResizeObserver = vi.fn().mockImplementation(function (callback) {
   composableResizeCallback = callback;
   return {
     observe: vi.fn(),