@pequity/squirrel 8.4.1 → 8.4.3

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

@@ -332,6 +332,20 @@ describe('PSelectList.vue', () => {
     cleanup(wrapper);
   });
 
+  it('displays a spacer on non-selected items', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const wrapper = createWrapper({ selected: [] }, { multiple: true });
+
+    const checkIcons = wrapper.findAll('[p-select-list-option-item] img');
+    const spacers = wrapper.findAll('[p-select-list-option-item] .w-\\[26px\\].pl-2');
+
+    expect(checkIcons.length).toBe(0);
+    expect(spacers.length).toBe(20);
+
+    cleanup(wrapper);
+  });
+
   it('works with an object for v-model', async () => {
     useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
 
@@ -531,9 +545,11 @@ describe('PSelectList.vue', () => {
 
     listItems.forEach((item, i) => {
       if (i === 0 || i === 1) {
-        expect(item.classes()).toContain('pointer-events-none');
+        expect(item.classes()).toContain('cursor-default');
+        expect(item.classes()).not.toContain('cursor-pointer');
       } else {
-        expect(item.classes()).not.toContain('pointer-events-none');
+        expect(item.classes()).toContain('cursor-pointer');
+        expect(item.classes()).not.toContain('cursor-default');
       }
     });
 
@@ -553,9 +569,11 @@ describe('PSelectList.vue', () => {
 
     listItems.forEach((item, i) => {
       if (i === 0 || i === 1) {
-        expect(item.classes()).toContain('pointer-events-none');
+        expect(item.classes()).toContain('cursor-default');
+        expect(item.classes()).not.toContain('cursor-pointer');
       } else {
-        expect(item.classes()).not.toContain('pointer-events-none');
+        expect(item.classes()).toContain('cursor-pointer');
+        expect(item.classes()).not.toContain('cursor-default');
       }
     });
 

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

@@ -75,12 +75,12 @@
                 LIST_ITEM_CLASS,
                 {
                   [LIST_ITEM_ACTIVE_CLASS]: isSelected(getValue(row.index)),
-                  [LIST_ITEM_DISABLED_CLASS]: isDisabled(computedItems[row.index]),
                 },
+                isDisabled(computedItems[row.index]) ? LIST_ITEM_DISABLED_CLASS : 'cursor-pointer',
               ]"
               p-select-list-option-item
               :style="listItemStyle"
-              @click="select($event, getValue(row.index))"
+              @click="!isDisabled(computedItems[row.index]) && select($event, getValue(row.index))"
             >
               <div :class="['flex items-center', { [SIZES[size]]: !itemSize }]">
                 <slot
@@ -104,6 +104,7 @@
                   class="ml-auto fill-p-purple-60 pl-2"
                   src="@squirrel/assets/select-check.svg"
                 />
+                <div v-else class="ml-auto h-4 w-[26px] pl-2"></div>
               </div>
             </div>
           </div>

package/squirrel/components/p-select-list/useSelectList.ts

@@ -44,9 +44,9 @@ const nextLoop = (ms?: number) => new Promise((resolve) => setTimeout(resolve, m
 // Constants
 const LIST_ITEM_SIZES = { sm: 32, md: 40, lg: 48 };
 const LIST_ITEM_CLASS =
-  'clear-both block w-full cursor-pointer whitespace-nowrap py-1 px-3 text-left text-sm font-medium hover:bg-p-blue-10';
+  'clear-both block w-full whitespace-nowrap py-1 px-3 text-left text-sm font-medium hover:bg-p-blue-10';
 const LIST_ITEM_ACTIVE_CLASS = 'selected';
-const LIST_ITEM_DISABLED_CLASS = 'opacity-30 pointer-events-none';
+const LIST_ITEM_DISABLED_CLASS = 'opacity-30 cursor-default';
 
 export const useSelectList = (props: Props, inputSearch: InputSearch, virtualizerRef: VirtualizerRef, emit: Emits) => {
   // Data

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

@@ -1,5 +1,5 @@
 import { useVirtualizer } from '@tanstack/vue-virtual';
-import { type ComponentPublicInstance, computed, type ComputedRef, isRef, nextTick, type Ref, ref, unref } from 'vue';
+import { type ComponentPublicInstance, computed, type ComputedRef, nextTick, ref } from 'vue';
 
 type Options = ComputedRef<{
   count: number;
@@ -16,7 +16,7 @@ export const usePTableRowVirtualizer = (options: Options) => {
       virtualRows: ref([{ key: 0, index: 0 }]),
       paddingTop: ref(0),
       paddingBottom: ref(0),
-      measureElement: () => ref(undefined),
+      measureElement: () => undefined,
     };
   }
 
@@ -32,15 +32,19 @@ export const usePTableRowVirtualizer = (options: Options) => {
       : 0
   );
 
-  const measureElement = (cmp: ComponentPublicInstance | Ref<HTMLElement>) => {
-    const el = isRef(cmp) ? unref(cmp) : cmp?.$el;
+  const measureElement = (el: Element | ComponentPublicInstance | null) => {
+    if (!el) {
+      return;
+    }
+
+    const element = el instanceof Element ? el : el.$el;
 
     nextTick(() => {
-      if (!el) {
+      if (!element || !(element instanceof HTMLElement)) {
         return;
       }
 
-      virtualizer.value.measureElement(el);
+      virtualizer.value.measureElement(element);
     });
 
     return undefined;

package/squirrel/components/p-tabs/p-tabs.stories.js

@@ -1,6 +1,7 @@
 import PaginateRightIcon from '@squirrel/assets/pagination-right-icon.svg?inline';
 import PTabs from '@squirrel/components/p-tabs/p-tabs.vue';
 import { action } from 'storybook/actions';
+import { markRaw } from 'vue';
 
 export default {
   title: 'Components/PTabs',
@@ -34,7 +35,7 @@ export const Default = {
       {
         title: 'Tab 2',
         name: 'tab2',
-        icon: PaginateRightIcon,
+        icon: markRaw(PaginateRightIcon),
       },
       {
         title: 'Tab 3',