@pequity/squirrel 8.4.0 → 8.4.2

package/squirrel/components/p-input-number/p-input-number.stories.js

@@ -96,7 +96,7 @@ export const WithPrefix = {
     },
     template: `
       <div class="space-y-4">
-        <PInputNumber v-bind="args" prefix="$" label="Using prefix prop" />
+        <PInputNumber v-bind="args" prefixString="$" label="Using prefix prop" />
         <PInputNumber v-bind="args" label="Using prefix slot">
           <template #prefix>
             <span class="text-primary font-semibold">$</span>
@@ -107,6 +107,7 @@ export const WithPrefix = {
   }),
   args: {
     modelValue: 1234,
+    prefixString: '$',
   },
   parameters: {
     docs: {

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-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',