@pequity/squirrel 5.4.4 → 5.4.6

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import { config } from "./config.js";
-import { _, a } from "./chunks/p-action-bar.js";
+import { _ } from "./chunks/p-action-bar.js";
 import { default as default2 } from "./p-alert.js";
 import { default as default3 } from "./p-avatar.js";
 import { default as default4 } from "./p-btn.js";
@@ -11,7 +11,7 @@ import { _ as _3 } from "./chunks/p-date-picker.js";
 import { default as default8 } from "./p-drawer.js";
 import { default as default9 } from "./p-dropdown.js";
 import { _ as _imports_0$2 } from "./chunks/p-dropdown-select.js";
-import { a as a2 } from "./chunks/p-dropdown-select.js";
+import { a } from "./chunks/p-dropdown-select.js";
 import { defineComponent, shallowRef, ref, computed, onMounted, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, createCommentVNode, createElementVNode, withModifiers, createTextVNode, Fragment, renderList, withDirectives, vShow, useAttrs, resolveDirective, normalizeStyle, createVNode, isRef, renderSlot, provide, onBeforeUnmount, watch, mergeProps, toHandlers } from "vue";
 import { formatBytes, getFileExtension } from "./p-file-upload.js";
 import { uniq, kebabCase } from "lodash-es";
@@ -19,21 +19,22 @@ import { useInputClasses } from "./useInputClasses.js";
 import { useToast } from "vue-toastification";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 import { default as default10 } from "./p-table-filter-icon.js";
+import { _ as _4 } from "./chunks/p-icon.js";
 import { default as default11 } from "./p-info-icon.js";
-import { _ as _4 } from "./chunks/p-inline-date-picker.js";
+import { _ as _5 } from "./chunks/p-inline-date-picker.js";
 import { default as default12 } from "./p-input.js";
 import { default as default13 } from "./p-input-number.js";
-import { _ as _5 } from "./chunks/p-input-percent.js";
+import { _ as _6 } from "./chunks/p-input-percent.js";
 import PInputSearch from "./p-input-search.js";
-import { _ as _6 } from "./chunks/p-link.js";
+import { _ as _7 } from "./chunks/p-link.js";
 import { default as default14 } from "./p-loading.js";
 import { default as default15 } from "./p-modal.js";
-import { _ as _7 } from "./chunks/p-pagination.js";
-import { _ as _8 } from "./chunks/p-pagination-info.js";
+import { _ as _8 } from "./chunks/p-pagination.js";
+import { _ as _9 } from "./chunks/p-pagination-info.js";
 import { default as default16 } from "./p-progress-bar.js";
-import { _ as _9 } from "./chunks/p-ring-loader.js";
-import { _ as _10 } from "./chunks/p-select.js";
-import { _ as _11 } from "./chunks/p-select-btn.js";
+import { _ as _10 } from "./chunks/p-ring-loader.js";
+import { _ as _11 } from "./chunks/p-select.js";
+import { _ as _12 } from "./chunks/p-select-btn.js";
 import { SIZES } from "./p-select-list.js";
 import { splitStringForHighlight } from "./text.js";
 import { toString } from "./string.js";
@@ -44,10 +45,10 @@ import PTableHeaderCell from "./p-table-header-cell.js";
 import { colsInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, isColsResizableInjectionKey } from "./p-table.js";
 import { MIN_WIDTH_COL_RESIZE } from "./p-table.js";
 import { usePTableColResize } from "./usePTableColResize.js";
-import { _ as _12 } from "./chunks/p-table-loader.js";
+import { _ as _13 } from "./chunks/p-table-loader.js";
 import { SORTING_TYPES } from "./p-table-sort.js";
 import { default as default19 } from "./p-table-td.js";
-import { _ as _13 } from "./chunks/p-tabs.js";
+import { _ as _14 } from "./chunks/p-tabs.js";
 import { default as default20 } from "./p-textarea.js";
 import { default as default21 } from "./p-toggle.js";
 import { P_ICON_ALIASES } from "./p-icon.js";
@@ -452,6 +453,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     focusSearchOnMount: {
       type: Boolean,
       default: true
+    },
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+      type: String,
+      default: "disabled"
     }
   },
   emits: ["update:modelValue", "select"],
@@ -468,6 +476,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const {
       LIST_ITEM_CLASS,
       LIST_ITEM_ACTIVE_CLASS,
+      LIST_ITEM_DISABLED_CLASS,
       selectedItems,
       computedItems,
       computedItemSize,
@@ -478,6 +487,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       getValue,
       getText,
       isSelected,
+      isDisabled,
       setupNavigationSvc,
       select,
       onFocus,
@@ -591,7 +601,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   style: normalizeStyle({ height: `${row.size}px`, transform: `translateY(${row.start}px)` })
                 }, [
                   withDirectives((openBlock(), createElementBlock("div", {
-                    class: normalizeClass([unref(LIST_ITEM_CLASS), { [unref(LIST_ITEM_ACTIVE_CLASS)]: unref(isSelected)(unref(getValue)(row.index)) }]),
+                    class: normalizeClass([
+                      unref(LIST_ITEM_CLASS),
+                      {
+                        [unref(LIST_ITEM_ACTIVE_CLASS)]: unref(isSelected)(unref(getValue)(row.index)),
+                        [unref(LIST_ITEM_DISABLED_CLASS)]: unref(isDisabled)(unref(computedItems)[row.index])
+                      }
+                    ]),
                     "p-select-list-option-item": "",
                     style: normalizeStyle(listItemStyle.value),
                     onClick: ($event) => unref(select)($event, unref(getValue)(row.index))
@@ -959,34 +975,34 @@ export {
   _3 as PDatePicker,
   default8 as PDrawer,
   default9 as PDropdown,
-  a2 as PDropdownSelect,
+  a as PDropdownSelect,
   pFileUpload as PFileUpload,
   default10 as PFilterIcon,
-  a as PIcon,
+  _4 as PIcon,
   default11 as PInfoIcon,
-  _4 as PInlineDatePicker,
+  _5 as PInlineDatePicker,
   default12 as PInput,
   default13 as PInputNumber,
-  _5 as PInputPercent,
+  _6 as PInputPercent,
   PInputSearch,
-  _6 as PLink,
+  _7 as PLink,
   default14 as PLoading,
   default15 as PModal,
-  _7 as PPagination,
-  _8 as PPaginationInfo,
+  _8 as PPagination,
+  _9 as PPaginationInfo,
   default16 as PProgressBar,
-  _9 as PRingLoader,
-  _10 as PSelect,
-  _11 as PSelectBtn,
+  _10 as PRingLoader,
+  _11 as PSelect,
+  _12 as PSelectBtn,
   _sfc_main$2 as PSelectList,
   default17 as PSelectPill,
   default18 as PSkeletonLoader,
   pTable as PTable,
   PTableHeaderCell,
-  _12 as PTableLoader,
+  _13 as PTableLoader,
   pTableSort as PTableSort,
   default19 as PTableTd,
-  _13 as PTabs,
+  _14 as PTabs,
   default20 as PTextarea,
   default21 as PToggle,
   P_ICON_ALIASES,

package/dist/es/useSelectList.js

@@ -28,6 +28,7 @@ const nextLoop = (ms) => new Promise((resolve) => setTimeout(resolve, ms || 0));
 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";
 const LIST_ITEM_ACTIVE_CLASS = "selected";
+const LIST_ITEM_DISABLED_CLASS = "opacity-30 pointer-events-none";
 const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
   let navigationSvc = null;
   const internalItems = ref([]);
@@ -149,6 +150,13 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
   const isSelected = (val) => {
     return internalValue.value.includes(val);
   };
+  const isDisabled = (val) => {
+    const disabledProp = props.disabledBy;
+    if (val && typeof val === "object" && disabledProp in val) {
+      return val[disabledProp];
+    }
+    return false;
+  };
   const setupNavigationSvc = () => {
     if (navigationSvc) {
       navigationSvc.init();
@@ -229,6 +237,7 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     LIST_ITEM_SIZES,
     LIST_ITEM_CLASS,
     LIST_ITEM_ACTIVE_CLASS,
+    LIST_ITEM_DISABLED_CLASS,
     selectedItems,
     computedItems,
     computedItemSize,
@@ -240,6 +249,7 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     getValue,
     getText,
     isSelected,
+    isDisabled,
     setupNavigationSvc,
     destroyNavigationSvc,
     select,

package/dist/squirrel/components/p-dropdown-select/p-dropdown-select.vue.d.ts

@@ -307,6 +307,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Enables multiple selection
      */
@@ -335,6 +339,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+        type: PropType<string>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
@@ -426,6 +437,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Enables multiple selection
      */
@@ -454,6 +469,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+        type: PropType<string>;
+        default: string;
+    };
 }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -475,9 +497,11 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     dropdownMenuStyle: Record<string, any>;
     pDropdownProps: Record<string, any>;
     searchable: boolean;
+    clearable: boolean;
     multiple: boolean;
     placeholderSearch: string;
     selectedTopShown: boolean;
+    disabledBy: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/squirrel/components/p-select-list/p-select-list.vue.d.ts

@@ -331,6 +331,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+        type: PropType<string>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
@@ -449,6 +456,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+        type: PropType<string>;
+        default: string;
+    };
 }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -469,6 +483,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     multiple: boolean;
     placeholderSearch: string;
     selectedTopShown: boolean;
+    disabledBy: string;
     topSectionClass: string;
     closePopperOnSelect: boolean;
     focusSearchOnMount: boolean;

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

@@ -16,6 +16,7 @@ type Props = {
     searchable: boolean;
     multiple: boolean;
     selectedTopShown: boolean;
+    disabledBy: string;
 };
 type InputSearch = Ref<ComponentPublicInstance | null>;
 type VirtualizerRef = Ref<HTMLElement | null>;
@@ -27,6 +28,7 @@ export declare const useSelectList: (props: Props, inputSearch: InputSearch, vir
     };
     LIST_ITEM_CLASS: string;
     LIST_ITEM_ACTIVE_CLASS: string;
+    LIST_ITEM_DISABLED_CLASS: string;
     selectedItems: import("vue").ComputedRef<AnyObject[]>;
     computedItems: import("vue").ComputedRef<AnyObject[]>;
     computedItemSize: import("vue").ComputedRef<number>;
@@ -38,6 +40,7 @@ export declare const useSelectList: (props: Props, inputSearch: InputSearch, vir
     getValue: (index: number) => AnyValue;
     getText: (index: number) => AnyValue;
     isSelected: (val: AnyValue) => boolean;
+    isDisabled: (val: AnyValue) => unknown;
     setupNavigationSvc: () => void;
     destroyNavigationSvc: () => void;
     select: (e: Event, val: AnyValue) => Promise<void>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.4.4",
+  "version": "5.4.6",
   "packageManager": "pnpm@9.12.2",
   "type": "module",
   "scripts": {
@@ -95,7 +95,7 @@
     "resolve-tspaths": "^0.8.22",
     "rimraf": "^6.0.1",
     "sass": "^1.80.2",
-    "semantic-release": "^24.1.2",
+    "semantic-release": "^24.1.3",
     "storybook": "^8.3.6",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.14",

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

@@ -533,4 +533,91 @@ describe('PDropdownSelect.vue', () => {
 
     expect(wrapper.vm.$data.selected).toEqual([1, 3]);
   });
+
+  it('disables the item when the disabled item prop is set', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    items[1].disabled = true;
+    const wrapper = createWrapper({ selected: [], items }, { multiple: true });
+
+    const button = wrapper.find('button');
+
+    await button.trigger('click');
+
+    const listItems = wrapper.findAll('[p-select-list-option-item]');
+
+    listItems.forEach((item, i) => {
+      if (i === 0 || i === 1) {
+        expect(item.classes()).toContain('pointer-events-none');
+      } else {
+        expect(item.classes()).not.toContain('pointer-events-none');
+      }
+    });
+    cleanup(wrapper);
+  });
+
+  it('disables the item when the disabledBy prop is set', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].inactive = true;
+    items[1].inactive = true;
+    items[2].disabled = true;
+    const wrapper = createWrapper({ selected: [], items }, { multiple: true, disabledBy: 'inactive' });
+
+    const button = wrapper.find('button');
+
+    await button.trigger('click');
+
+    const listItems = wrapper.findAll('[p-select-list-option-item]');
+
+    listItems.forEach((item, i) => {
+      if (i === 0 || i === 1) {
+        expect(item.classes()).toContain('pointer-events-none');
+      } else {
+        expect(item.classes()).not.toContain('pointer-events-none');
+      }
+    });
+    cleanup(wrapper);
+  });
+
+  it('renders clear button when clearable is true and a value is selected', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const wrapper = createWrapper({ selected: 17 }, { clearable: true });
+
+    const clearButton = wrapper.find('button[aria-label="Clear selection"]');
+    expect(clearButton.exists()).toBe(true);
+
+    await clearButton.trigger('click');
+    expect(wrapper.vm.$data.selected).toEqual([]);
+
+    cleanup(wrapper);
+  });
+
+  it('does not render clear button when clearable is false', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const wrapper = createWrapper({ selected: 17 }, { clearable: false });
+
+    const clearButton = wrapper.find('button[aria-label="Clear selection"]');
+    expect(clearButton.exists()).toBe(false);
+
+    cleanup(wrapper);
+  });
+
+  it('clears multiple selections when clearable is true', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const wrapper = createWrapper({ selected: [4, 5] }, { multiple: true, clearable: true });
+
+    const clearButton = wrapper.find('button[aria-label="Clear selection"]');
+    expect(clearButton.exists()).toBe(true);
+
+    await clearButton.trigger('click');
+    expect(wrapper.vm.$data.selected).toEqual([]);
+    cleanup(wrapper);
+  });
 });

package/squirrel/components/p-dropdown-select/p-dropdown-select.stories.js

@@ -69,6 +69,10 @@ export default {
   }),
   argTypes: {
     ...fieldArgTypes,
+    clearable: {
+      control: 'boolean',
+      description: 'Whether the dropdown should be clearable',
+    },
   },
   parameters: {
     docs: {
@@ -289,3 +293,22 @@ export const SelectedOnTop = {
     selectedTopShown: true,
   },
 };
+
+export const Clearable = {
+  render: createRenderFunction({ selectedVal: 17 }),
+  args: {
+    ...Default.args,
+    label: 'Clearable dropdown',
+    clearable: true,
+  },
+};
+
+export const ClearableMultiple = {
+  render: createRenderFunction({ selectedVal: [33, 34, 36] }),
+  args: {
+    ...Default.args,
+    label: 'Clearable multiple dropdown',
+    multiple: true,
+    clearable: true,
+  },
+};

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

@@ -36,6 +36,16 @@
             }}
           </div>
         </slot>
+        <!-- Add clear button -->
+        <button
+          v-if="clearable && internalValue.length"
+          class="absolute top-1/2 flex -translate-y-1/2 items-center justify-center text-p-gray-40 hover:text-p-gray-60"
+          :class="[SIZES[size], CLEAR_BUTTON_SPACING[size]]"
+          aria-label="Clear selection"
+          @click.stop="clearAll"
+        >
+          <PIcon icon="fe:close" />
+        </button>
       </button>
       <!-- Dropdown -->
       <template #popper>
@@ -98,7 +108,13 @@
               >
                 <div
                   v-close-popper="!multiple"
-                  :class="[LIST_ITEM_CLASS, { [LIST_ITEM_ACTIVE_CLASS]: isSelected(getValue(row.index)) }]"
+                  :class="[
+                    LIST_ITEM_CLASS,
+                    {
+                      [LIST_ITEM_ACTIVE_CLASS]: isSelected(getValue(row.index)),
+                      [LIST_ITEM_DISABLED_CLASS]: isDisabled(computedItems[row.index]),
+                    },
+                  ]"
                   p-select-list-option-item
                   :style="listItemStyle"
                   @click="select($event, getValue(row.index))"
@@ -142,6 +158,7 @@
 
 <script setup lang="ts">
 import PDropdown from '@squirrel/components/p-dropdown/p-dropdown.vue';
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import PInputSearch from '@squirrel/components/p-input-search/p-input-search.vue';
 import {
   type ComponentPublicInstance,
@@ -269,6 +286,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
   /**
    * Enables multiple selection
    */
@@ -297,6 +318,13 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * Specify the key in the object to be used as item disabled prop.
+   */
+  disabledBy: {
+    type: String as PropType<string>,
+    default: 'disabled',
+  },
 });
 
 // Async helpers
@@ -313,6 +341,12 @@ const P_DROPDOWN_DEFAULTS = {
   enableArrowNavigation: false,
 };
 
+const CLEAR_BUTTON_SPACING = {
+  sm: 'right-8',
+  md: 'right-9',
+  lg: 'right-10',
+};
+
 const width = ref('auto');
 const listItemStyle = ref({ paddingTop: 0, paddingBottom: 0 });
 const dropdownShow = ref(false);
@@ -328,6 +362,7 @@ const { labelClasses, selectClasses, errorMsgClasses } = useInputClasses(props);
 const {
   LIST_ITEM_CLASS,
   LIST_ITEM_ACTIVE_CLASS,
+  LIST_ITEM_DISABLED_CLASS,
   selectedItems,
   computedItems,
   computedItemSize,
@@ -339,6 +374,7 @@ const {
   getValue,
   getText,
   isSelected,
+  isDisabled,
   setupNavigationSvc,
   destroyNavigationSvc,
   select,

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

@@ -479,4 +479,47 @@ describe('PSelectList.vue', () => {
 
     cleanup(wrapper);
   });
+
+  it('disables the item when the disabled item prop is set', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    items[1].disabled = true;
+    const wrapper = createWrapper({ selected: [], items }, { multiple: true });
+
+    const listItems = wrapper.findAll('[p-select-list-option-item]');
+
+    listItems.forEach((item, i) => {
+      if (i === 0 || i === 1) {
+        expect(item.classes()).toContain('pointer-events-none');
+      } else {
+        expect(item.classes()).not.toContain('pointer-events-none');
+      }
+    });
+
+    cleanup(wrapper);
+  });
+
+  it('disables the item when the disabledBy prop is set', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].inactive = true;
+    items[1].inactive = true;
+    items[2].disabled = true;
+    const wrapper = createWrapper({ selected: [], items }, { multiple: true, disabledBy: 'inactive' });
+
+    const listItems = wrapper.findAll('[p-select-list-option-item]');
+
+    listItems.forEach((item, i) => {
+      if (i === 0 || i === 1) {
+        expect(item.classes()).toContain('pointer-events-none');
+      } else {
+        expect(item.classes()).not.toContain('pointer-events-none');
+      }
+    });
+
+    cleanup(wrapper);
+  });
 });

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

@@ -71,7 +71,13 @@
           >
             <div
               v-close-popper="closePopperOnSelect && !multiple"
-              :class="[LIST_ITEM_CLASS, { [LIST_ITEM_ACTIVE_CLASS]: isSelected(getValue(row.index)) }]"
+              :class="[
+                LIST_ITEM_CLASS,
+                {
+                  [LIST_ITEM_ACTIVE_CLASS]: isSelected(getValue(row.index)),
+                  [LIST_ITEM_DISABLED_CLASS]: isDisabled(computedItems[row.index]),
+                },
+              ]"
               p-select-list-option-item
               :style="listItemStyle"
               @click="select($event, getValue(row.index))"
@@ -258,6 +264,13 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  /**
+   * Specify the key in the object to be used as item disabled prop.
+   */
+  disabledBy: {
+    type: String as PropType<string>,
+    default: 'disabled',
+  },
 });
 
 // Data
@@ -273,6 +286,7 @@ const virtualizerRef = ref<HTMLElement | null>(null);
 const {
   LIST_ITEM_CLASS,
   LIST_ITEM_ACTIVE_CLASS,
+  LIST_ITEM_DISABLED_CLASS,
   selectedItems,
   computedItems,
   computedItemSize,
@@ -283,6 +297,7 @@ const {
   getValue,
   getText,
   isSelected,
+  isDisabled,
   setupNavigationSvc,
   select,
   onFocus,

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

@@ -31,6 +31,7 @@ type Props = {
   searchable: boolean;
   multiple: boolean;
   selectedTopShown: boolean;
+  disabledBy: string;
 };
 
 type InputSearch = Ref<ComponentPublicInstance | null>;
@@ -45,6 +46,7 @@ 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';
 const LIST_ITEM_ACTIVE_CLASS = 'selected';
+const LIST_ITEM_DISABLED_CLASS = 'opacity-30 pointer-events-none';
 
 export const useSelectList = (props: Props, inputSearch: InputSearch, virtualizerRef: VirtualizerRef, emit: Emits) => {
   // Data
@@ -207,6 +209,16 @@ export const useSelectList = (props: Props, inputSearch: InputSearch, virtualize
     return internalValue.value.includes(val);
   };
 
+  const isDisabled = (val: AnyValue) => {
+    const disabledProp = props.disabledBy;
+
+    if (val && typeof val === 'object' && disabledProp in val) {
+      return val[disabledProp];
+    }
+
+    return false;
+  };
+
   const setupNavigationSvc = () => {
     if (navigationSvc) {
       navigationSvc.init();
@@ -311,6 +323,7 @@ export const useSelectList = (props: Props, inputSearch: InputSearch, virtualize
     LIST_ITEM_SIZES,
     LIST_ITEM_CLASS,
     LIST_ITEM_ACTIVE_CLASS,
+    LIST_ITEM_DISABLED_CLASS,
     selectedItems,
     computedItems,
     computedItemSize,
@@ -322,6 +335,7 @@ export const useSelectList = (props: Props, inputSearch: InputSearch, virtualize
     getValue,
     getText,
     isSelected,
+    isDisabled,
     setupNavigationSvc,
     destroyNavigationSvc,
     select,