@pequity/squirrel 6.0.0 → 6.0.2

package/README.md

@@ -53,13 +53,13 @@ Add the "Inter" font to your project's `index.html` file:
 <link rel="preconnect" href="https://rsms.me/" /><link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
 ```
 
-Use the Squirrel Tailwind configuration as a `preset` in your project's `tailwind.config.cjs` file:
+Use the Squirrel Tailwind configuration as a `preset` in your project's `tailwind.config.js` file:
 
 ```js
-/** @type {import('@pequity/squirrel').SquirrelTailwindConfig} */
+import { squirrelTailwindConfig } from '@pequity/squirrel';
 
-module.exports = {
-  presets: [require('@pequity/squirrel/tailwind').config],
+export default {
+  presets: [squirrelTailwindConfig],
   content: [
     './index.html',
     './src/**/*.{vue,js,ts,jsx,tsx,mdx}',

package/dist/cjs/config.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const config = {
+const squirrelTailwindConfig = {
   content: ["./index.html", "./squirrel/**/*.{vue,js,ts,jsx,tsx,mdx}", "./src/**/*.{vue,js,ts,jsx,tsx,mdx}"],
   theme: {
     colors: {
@@ -102,4 +102,4 @@ const config = {
     }
   }
 };
-exports.config = config;
+exports.squirrelTailwindConfig = squirrelTailwindConfig;

package/dist/cjs/index.js

@@ -1005,7 +1005,7 @@ exports.PTableTd = pTableTd;
 exports.PTabs = pTabs_vue_vue_type_script_setup_true_lang._sfc_main;
 exports.PTextarea = pTextarea;
 exports.PToggle = pToggle;
-exports.config = config.config;
+exports.squirrelTailwindConfig = config.squirrelTailwindConfig;
 exports.CURRENCY_INPUT_DEFAULTS = currency.CURRENCY_INPUT_DEFAULTS;
 exports.getNextActiveElement = dom.getNextActiveElement;
 exports.isElement = dom.isElement;

package/dist/cjs/p-dropdown.js

@@ -1,6 +1,5 @@
 "use strict";
 const listKeyboardNavigation = require("./listKeyboardNavigation.js");
-const floatingVue = require("floating-vue");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
 const ESCAPE_KEY = "Escape";
@@ -13,9 +12,6 @@ const nextFrame = () => {
 };
 const _sfc_main = vue.defineComponent({
   name: "PDropdown",
-  components: {
-    Dropdown: floatingVue.Dropdown
-  },
   inheritAttrs: false,
   props: {
     /**
@@ -110,8 +106,8 @@ const _sfc_main = vue.defineComponent({
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Dropdown = vue.resolveComponent("Dropdown");
-  return vue.openBlock(), vue.createBlock(_component_Dropdown, vue.mergeProps({ ref: "vPopper" }, { ..._ctx.defaultAttrs, ..._ctx.$attrs }, {
+  const _component_VDropdown = vue.resolveComponent("VDropdown");
+  return vue.openBlock(), vue.createBlock(_component_VDropdown, vue.mergeProps({ ref: "vPopper" }, { ..._ctx.defaultAttrs, ..._ctx.$attrs }, {
     onShow: _ctx.onShow,
     onHide: _ctx.destroy
   }), vue.createSlots({ _: 2 }, [

package/dist/cjs/tailwind.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const config$1 = require("./config.js");
 const lodashEs = require("lodash-es");
 const resolveConfig = require("tailwindcss/resolveConfig");
-const config = resolveConfig(config$1.config);
+const config = resolveConfig(config$1.squirrelTailwindConfig);
 const theme = config.theme;
 const colors = theme == null ? void 0 : theme.colors;
 (_a = theme == null ? void 0 : theme.extend) == null ? void 0 : _a.colors;

package/dist/cjs/useSelectList.js

@@ -39,6 +39,9 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
   const selectedItems = vue.computed(() => {
     return internalItems.value.filter((item) => internalValue.value.includes(item[props.itemValue]));
   });
+  const deselectedItems = vue.computed(() => {
+    return internalItems.value.filter((item) => !internalValue.value.includes(item[props.itemValue]));
+  });
   const computedItems = vue.computed(() => {
     return lodashEs.cloneDeep(internalItems.value).filter((item) => {
       return String(item[props.itemText]).toLocaleLowerCase().includes(String(search.value).toLocaleLowerCase());
@@ -205,17 +208,21 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     return internalItems.value.indexOf(selectedItems.value[0]);
   };
   const selectAll = () => {
-    if (!props.multiple) {
-      return;
-    }
+    if (!props.multiple) return;
     const selectedItems2 = internalValue.value;
+    const deselectedDisabledItemsValues = deselectedItems.value.filter((item) => isDisabled(item)).map((item) => item[props.itemValue]);
     const filteredItems = computedItems.value.map((item) => item[props.itemValue]);
-    const toEmit = lodashEs.uniqBy([...selectedItems2, ...filteredItems], (item) => item);
+    const uniqueItems = lodashEs.uniqBy([...selectedItems2, ...filteredItems], (item) => item);
+    const toEmit = lodashEs.difference(uniqueItems, deselectedDisabledItemsValues);
     emit("update:modelValue", toArrOfObjIfNeeded(toEmit));
   };
   const clearAll = () => {
+    if (!props.multiple) return;
     search.value = "";
-    emit("update:modelValue", []);
+    const disabledItemsValues = internalItems.value.filter((item) => isDisabled(item)).map((item) => item[props.itemValue]);
+    const selectedItemsValues = internalValue.value;
+    const selectedDisabledItems = lodashEs.intersection(disabledItemsValues, selectedItemsValues);
+    emit("update:modelValue", toArrOfObjIfNeeded(selectedDisabledItems));
   };
   vue.watch(
     () => props.items,

package/dist/es/config.js

@@ -1,4 +1,4 @@
-const config = {
+const squirrelTailwindConfig = {
   content: ["./index.html", "./squirrel/**/*.{vue,js,ts,jsx,tsx,mdx}", "./src/**/*.{vue,js,ts,jsx,tsx,mdx}"],
   theme: {
     colors: {
@@ -101,5 +101,5 @@ const config = {
   }
 };
 export {
-  config
+  squirrelTailwindConfig
 };

package/dist/es/index.js

@@ -54,7 +54,7 @@ import { default as default19 } from "./p-table-td.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 { config } from "./config.js";
+import { squirrelTailwindConfig } from "./config.js";
 import { CURRENCY_INPUT_DEFAULTS } from "./currency.js";
 import { getNextActiveElement, isElement, isVisible } from "./dom.js";
 import { default as default22 } from "./inputClassesMixin.js";
@@ -1016,7 +1016,6 @@ export {
   SPACING_SUFFIX,
   TEXTAREA_BASE,
   colsInjectionKey,
-  config,
   createPagingRange,
   getColor,
   getColorDeep,
@@ -1032,6 +1031,7 @@ export {
   sanitizeUrl,
   setupListKeyboardNavigation,
   splitStringForHighlight,
+  squirrelTailwindConfig,
   toNumberOrNull,
   toString,
   useInputClasses,

package/dist/es/p-dropdown.js

@@ -1,5 +1,4 @@
 import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
-import { Dropdown } from "floating-vue";
 import { defineComponent, resolveComponent, openBlock, createBlock, mergeProps, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
 const ESCAPE_KEY = "Escape";
@@ -12,9 +11,6 @@ const nextFrame = () => {
 };
 const _sfc_main = defineComponent({
   name: "PDropdown",
-  components: {
-    Dropdown
-  },
   inheritAttrs: false,
   props: {
     /**
@@ -109,8 +105,8 @@ const _sfc_main = defineComponent({
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Dropdown = resolveComponent("Dropdown");
-  return openBlock(), createBlock(_component_Dropdown, mergeProps({ ref: "vPopper" }, { ..._ctx.defaultAttrs, ..._ctx.$attrs }, {
+  const _component_VDropdown = resolveComponent("VDropdown");
+  return openBlock(), createBlock(_component_VDropdown, mergeProps({ ref: "vPopper" }, { ..._ctx.defaultAttrs, ..._ctx.$attrs }, {
     onShow: _ctx.onShow,
     onHide: _ctx.destroy
   }), createSlots({ _: 2 }, [

package/dist/es/tailwind.js

@@ -1,8 +1,8 @@
 var _a;
-import { config as config$1 } from "./config.js";
+import { squirrelTailwindConfig } from "./config.js";
 import { get } from "lodash-es";
 import resolveConfig from "tailwindcss/resolveConfig";
-const config = resolveConfig(config$1);
+const config = resolveConfig(squirrelTailwindConfig);
 const theme = config.theme;
 const colors = theme == null ? void 0 : theme.colors;
 (_a = theme == null ? void 0 : theme.extend) == null ? void 0 : _a.colors;

package/dist/es/useSelectList.js

@@ -2,7 +2,7 @@ import { isObject } from "./object.js";
 import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
 import { toString } from "./string.js";
 import { useVirtualizer } from "@tanstack/vue-virtual";
-import { cloneDeep, uniqBy } from "lodash-es";
+import { cloneDeep, uniqBy, difference, intersection } from "lodash-es";
 import { ref, computed, watch, onUnmounted, nextTick } from "vue";
 const createInternalItems = (items) => {
   let arr = Array.isArray(items) ? items.slice() : [];
@@ -37,6 +37,9 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
   const selectedItems = computed(() => {
     return internalItems.value.filter((item) => internalValue.value.includes(item[props.itemValue]));
   });
+  const deselectedItems = computed(() => {
+    return internalItems.value.filter((item) => !internalValue.value.includes(item[props.itemValue]));
+  });
   const computedItems = computed(() => {
     return cloneDeep(internalItems.value).filter((item) => {
       return String(item[props.itemText]).toLocaleLowerCase().includes(String(search.value).toLocaleLowerCase());
@@ -203,17 +206,21 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     return internalItems.value.indexOf(selectedItems.value[0]);
   };
   const selectAll = () => {
-    if (!props.multiple) {
-      return;
-    }
+    if (!props.multiple) return;
     const selectedItems2 = internalValue.value;
+    const deselectedDisabledItemsValues = deselectedItems.value.filter((item) => isDisabled(item)).map((item) => item[props.itemValue]);
     const filteredItems = computedItems.value.map((item) => item[props.itemValue]);
-    const toEmit = uniqBy([...selectedItems2, ...filteredItems], (item) => item);
+    const uniqueItems = uniqBy([...selectedItems2, ...filteredItems], (item) => item);
+    const toEmit = difference(uniqueItems, deselectedDisabledItemsValues);
     emit("update:modelValue", toArrOfObjIfNeeded(toEmit));
   };
   const clearAll = () => {
+    if (!props.multiple) return;
     search.value = "";
-    emit("update:modelValue", []);
+    const disabledItemsValues = internalItems.value.filter((item) => isDisabled(item)).map((item) => item[props.itemValue]);
+    const selectedItemsValues = internalValue.value;
+    const selectedDisabledItems = intersection(disabledItemsValues, selectedItemsValues);
+    emit("update:modelValue", toArrOfObjIfNeeded(selectedDisabledItems));
   };
   watch(
     () => props.items,

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

@@ -27,14 +27,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>, {}, {
     defaultAttrs: {
-        triggers: "click"[];
-        autoHide: true;
+        triggers: string[];
+        autoHide: boolean;
         theme: string;
         popperClass: string;
-        placement: "bottom-start";
+        placement: string;
         distance: number;
         delay: number;
-        handleResize: true;
+        handleResize: boolean;
     };
     navigationSvc: ListKeyboardNavigationInstance | null;
     prevReference: HTMLElement | null;
@@ -73,403 +73,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     enableArrowNavigation: boolean;
     enableCloseOnEsc: boolean;
     triggerStyle: Record<string, any>;
-}, {}, {
-    Dropdown: import("vue").DefineComponent<{
-        theme: {
-            type: StringConstructor;
-            default: any;
-        };
-        referenceNode: {
-            type: import("vue").PropType<() => Element>;
-            default: any;
-        };
-        shown: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        showGroup: {
-            type: StringConstructor;
-            default: any;
-        };
-        ariaId: {
-            default: any;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        positioningDisabled: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        placement: {
-            type: import("vue").PropType<import("floating-vue/dist/util/popper.js").Placement>;
-            default: any;
-        };
-        delay: {
-            type: import("vue").PropType<string | number | {
-                show: number;
-                hide: number;
-            }>;
-            default: any;
-        };
-        distance: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        skidding: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        triggers: {
-            type: import("vue").PropType<import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]>;
-            default: any;
-        };
-        showTriggers: {
-            type: import("vue").PropType<import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        hideTriggers: {
-            type: import("vue").PropType<import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        popperTriggers: {
-            type: import("vue").PropType<import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]>;
-            default: any;
-        };
-        popperShowTriggers: {
-            type: import("vue").PropType<import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        popperHideTriggers: {
-            type: import("vue").PropType<import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        container: {
-            type: any[];
-            default: any;
-        };
-        boundary: {
-            type: any[];
-            default: any;
-        };
-        strategy: {
-            type: import("vue").PropType<"absolute" | "fixed">;
-            default: any;
-        };
-        autoHide: {
-            type: import("vue").PropType<boolean | ((event: Event) => boolean)>;
-            default: any;
-        };
-        handleResize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        instantMove: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        eagerMount: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        popperClass: {
-            type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
-            default: any;
-        };
-        computeTransformOrigin: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        autoMinSize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        autoSize: {
-            type: import("vue").PropType<boolean | "min" | "max">;
-            default: any;
-        };
-        autoMaxSize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        autoBoundaryMaxSize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        preventOverflow: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        overflowPadding: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        arrowPadding: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        arrowOverflow: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        flip: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        shift: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        shiftCrossAxis: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        noAutoFocus: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        disposeTimeout: {
-            type: NumberConstructor;
-            default: any;
-        };
-    }, unknown, unknown, {
-        finalTheme(): string;
-    }, {
-        getTargetNodes(): unknown[];
-    }, {
-        computed: {
-            themeClass(): string[];
-        };
-    } | {
-        methods: {
-            show(...args: any[]): any;
-            hide(...args: any[]): any;
-            dispose(...args: any[]): any;
-            onResize(...args: any[]): any;
-        };
-    }, import("vue").ComponentOptionsMixin, {
-        show: () => true;
-        hide: () => true;
-        'update:shown': (shown: boolean) => true;
-        'apply-show': () => true;
-        'apply-hide': () => true;
-        'close-group': () => true;
-        'close-directive': () => true;
-        'auto-hide': () => true;
-        resize: () => true;
-    }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        theme: {
-            type: StringConstructor;
-            default: any;
-        };
-        referenceNode: {
-            type: import("vue").PropType<() => Element>;
-            default: any;
-        };
-        shown: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        showGroup: {
-            type: StringConstructor;
-            default: any;
-        };
-        ariaId: {
-            default: any;
-        };
-        disabled: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        positioningDisabled: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        placement: {
-            type: import("vue").PropType<import("floating-vue").Placement>;
-            default: any;
-        };
-        delay: {
-            type: import("vue").PropType<string | number | {
-                show: number;
-                hide: number;
-            }>;
-            default: any;
-        };
-        distance: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        skidding: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        triggers: {
-            type: import("vue").PropType<import("floating-vue").TriggerEvent[]>;
-            default: any;
-        };
-        showTriggers: {
-            type: import("vue").PropType<import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        hideTriggers: {
-            type: import("vue").PropType<import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        popperTriggers: {
-            type: import("vue").PropType<import("floating-vue").TriggerEvent[]>;
-            default: any;
-        };
-        popperShowTriggers: {
-            type: import("vue").PropType<import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        popperHideTriggers: {
-            type: import("vue").PropType<import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[])>;
-            default: any;
-        };
-        container: {
-            type: any[];
-            default: any;
-        };
-        boundary: {
-            type: any[];
-            default: any;
-        };
-        strategy: {
-            type: import("vue").PropType<"absolute" | "fixed">;
-            default: any;
-        };
-        autoHide: {
-            type: import("vue").PropType<boolean | ((event: Event) => boolean)>;
-            default: any;
-        };
-        handleResize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        instantMove: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        eagerMount: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        popperClass: {
-            type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
-            default: any;
-        };
-        computeTransformOrigin: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        autoMinSize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        autoSize: {
-            type: import("vue").PropType<boolean | "min" | "max">;
-            default: any;
-        };
-        autoMaxSize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        autoBoundaryMaxSize: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        preventOverflow: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        overflowPadding: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        arrowPadding: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: any;
-        };
-        arrowOverflow: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        flip: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        shift: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        shiftCrossAxis: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        noAutoFocus: {
-            type: BooleanConstructor;
-            default: any;
-        };
-        disposeTimeout: {
-            type: NumberConstructor;
-            default: any;
-        };
-    }>> & {
-        onResize?: () => any;
-        onShow?: () => any;
-        onHide?: () => any;
-        "onUpdate:shown"?: (shown: boolean) => any;
-        "onApply-show"?: () => any;
-        "onApply-hide"?: () => any;
-        "onClose-group"?: () => any;
-        "onClose-directive"?: () => any;
-        "onAuto-hide"?: () => any;
-    }, {
-        placement: import("floating-vue").Placement;
-        strategy: "absolute" | "fixed";
-        disabled: boolean;
-        positioningDisabled: boolean;
-        delay: string | number | {
-            show: number;
-            hide: number;
-        };
-        distance: string | number;
-        skidding: string | number;
-        triggers: import("floating-vue").TriggerEvent[];
-        showTriggers: import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]);
-        hideTriggers: import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]);
-        popperTriggers: import("floating-vue").TriggerEvent[];
-        popperShowTriggers: import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]);
-        popperHideTriggers: import("floating-vue").TriggerEvent[] | ((triggers: import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]) => import("floating-vue/dist/components/PopperWrapper.vue.js").TriggerEvent[]);
-        container: any;
-        boundary: any;
-        autoHide: boolean | ((event: Event) => boolean);
-        handleResize: boolean;
-        instantMove: boolean;
-        eagerMount: boolean;
-        popperClass: string | unknown[] | Record<string, any>;
-        computeTransformOrigin: boolean;
-        autoMinSize: boolean;
-        autoSize: boolean | "min" | "max";
-        autoMaxSize: boolean;
-        autoBoundaryMaxSize: boolean;
-        preventOverflow: boolean;
-        overflowPadding: string | number;
-        arrowPadding: string | number;
-        arrowOverflow: boolean;
-        flip: boolean;
-        shift: boolean;
-        shiftCrossAxis: boolean;
-        noAutoFocus: boolean;
-        disposeTimeout: number;
-        shown: boolean;
-        theme: string;
-        referenceNode: () => Element;
-        showGroup: string;
-        ariaId: any;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/squirrel/tailwind/config.d.ts

@@ -1,4 +1,4 @@
-export declare const config: {
+export declare const squirrelTailwindConfig: {
     readonly content: ["./index.html", "./squirrel/**/*.{vue,js,ts,jsx,tsx,mdx}", "./src/**/*.{vue,js,ts,jsx,tsx,mdx}"];
     readonly theme: {
         readonly colors: {
@@ -97,4 +97,4 @@ export declare const config: {
         };
     };
 };
-export type SquirrelTailwindConfig = typeof config;
+export type SquirrelTailwindConfig = typeof squirrelTailwindConfig;

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "6.0.0",
+  "version": "6.0.2",
   "packageManager": "pnpm@9.15.0",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "vite --host",
     "debug:hmr": "vite --host --debug hmr",
-    "build:tailwind": "tsc --target es6 --module CommonJS ./squirrel/tailwind/config.ts --outDir ./dist/tailwind",
-    "build": "rimraf dist && pnpm run build:tailwind && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.squirrel.json && resolve-tspaths --src ./squirrel --project tsconfig.squirrel.json && vite build",
+    "build": "rimraf dist && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.squirrel.json && resolve-tspaths --src ./squirrel --project tsconfig.squirrel.json && vite build",
     "preview": "vite preview",
     "lint": "eslint \"**/*.{vue,ts,js}\"",
     "lint-fix": "eslint --fix \"**/*.{vue,ts,js}\"",
@@ -32,8 +31,7 @@
       "import": "./dist/es/index.js",
       "require": "./dist/cjs/index.js"
     },
-    "./assets/squirrel.css": "./dist/squirrel.css",
-    "./tailwind": "./dist/tailwind/config.js"
+    "./assets/squirrel.css": "./dist/squirrel.css"
   },
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",
@@ -49,10 +47,10 @@
     "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.6.0",
+    "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@pequity/eslint-config": "^1.0.3",
-    "@playwright/test": "^1.49.0",
+    "@playwright/test": "^1.49.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-a11y": "^8.4.7",
@@ -67,10 +65,10 @@
     "@storybook/theming": "^8.4.7",
     "@storybook/vue3": "^8.4.7",
     "@storybook/vue3-vite": "^8.4.7",
-    "@tanstack/vue-virtual": "3.11.0",
+    "@tanstack/vue-virtual": "3.11.2",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.10.1",
+    "@types/node": "^22.10.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^2.1.8",
     "@vue/compiler-sfc": "3.5.13",
@@ -78,14 +76,14 @@
     "@vuepic/vue-datepicker": "10.0.0",
     "autoprefixer": "^10.4.20",
     "dayjs": "1.11.13",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-plugin-storybook": "^0.11.1",
     "floating-vue": "5.2.2",
     "glob": "^11.0.0",
     "husky": "^9.1.7",
     "iconify-icon": "^2.2.0",
     "jsdom": "^25.0.1",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.2.11",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
     "postcss": "^8.4.49",
@@ -93,7 +91,7 @@
     "prettier-plugin-tailwindcss": "^0.6.9",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.82.0",
+    "sass": "^1.83.0",
     "semantic-release": "^24.2.0",
     "storybook": "^8.4.7",
     "svgo": "^3.3.2",

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

@@ -1,9 +1,9 @@
 <template>
-  <Dropdown ref="vPopper" v-bind="{ ...defaultAttrs, ...$attrs }" @show="onShow" @hide="destroy">
+  <VDropdown ref="vPopper" v-bind="{ ...defaultAttrs, ...$attrs }" @show="onShow" @hide="destroy">
     <template v-for="(_, slot) in $slots" #[slot]="scope">
       <slot :name="slot" v-bind="scope || {}" />
     </template>
-  </Dropdown>
+  </VDropdown>
 </template>
 
 <script lang="ts">
@@ -88,11 +88,8 @@ import {
   type ListKeyboardNavigationInstance,
   setupListKeyboardNavigation,
 } from '@squirrel/utils/listKeyboardNavigation';
-import { Dropdown } from 'floating-vue';
 import { defineComponent } from 'vue';
 
-type DropdownProps = InstanceType<typeof Dropdown>['$props'];
-
 type VPopper = {
   $refs: {
     popperContent: {
@@ -125,9 +122,6 @@ const nextFrame = () => {
 
 export default defineComponent({
   name: 'PDropdown',
-  components: {
-    Dropdown,
-  },
   inheritAttrs: false,
   props: {
     /**
@@ -167,7 +161,7 @@ export default defineComponent({
         distance: 4,
         delay: 0,
         handleResize: true,
-      } satisfies DropdownProps,
+      },
       navigationSvc: null as ListKeyboardNavigationInstance | null,
       prevReference: null as HTMLElement | null,
     };

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

@@ -197,6 +197,27 @@ describe('PDropdownSelect.vue', () => {
     cleanup(wrapper);
   });
 
+  it('does not select disabled items when "Select All" is clicked', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    items[1].disabled = true;
+    const wrapper = createWrapper({ selected: [], items }, { multiple: true });
+
+    await wrapper.find('button').trigger('click');
+
+    await wrapper.findByText('Select all').trigger('click');
+
+    const selectedItemsOptions = wrapper.findAll('[p-select-list-option-item]');
+    const selectedItems = wrapper.findAll('[p-select-list-option-item].selected');
+
+    expect(selectedItems.length).toBe(selectedItemsOptions.length - 2);
+    expect(wrapper.vm.$data.selected.length).toBe(items.length - 2);
+
+    cleanup(wrapper);
+  });
+
   it('clears all values', async () => {
     const wrapper = createWrapper({ selected: [] }, { multiple: true });
 
@@ -213,6 +234,26 @@ describe('PDropdownSelect.vue', () => {
     cleanup(wrapper);
   });
 
+  it('does not clear disabled items', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    items[1].disabled = true;
+    const wrapper = createWrapper({ selected: [1, 2], items }, { multiple: true });
+
+    await wrapper.find('button').trigger('click');
+
+    await wrapper.findByText('Clear all').trigger('click');
+
+    const selectedItems = wrapper.findAll('[p-select-list-option-item].selected');
+
+    expect(selectedItems.length).toBe(2);
+    expect(wrapper.vm.$data.selected).toEqual([1, 2]);
+
+    cleanup(wrapper);
+  });
+
   it('displays the selected items on top', async () => {
     useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
 
@@ -532,6 +573,8 @@ describe('PDropdownSelect.vue', () => {
     });
 
     expect(wrapper.vm.$data.selected).toEqual([1, 3]);
+
+    cleanup(wrapper);
   });
 
   it('disables the item when the disabled item prop is set', async () => {
@@ -555,6 +598,7 @@ describe('PDropdownSelect.vue', () => {
         expect(item.classes()).not.toContain('pointer-events-none');
       }
     });
+
     cleanup(wrapper);
   });
 
@@ -580,13 +624,14 @@ describe('PDropdownSelect.vue', () => {
         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 wrapper = createWrapper({ selected: [17] }, { multiple: true, clearable: true });
 
     const clearButton = wrapper.find('button[aria-label="Clear selection"]');
     expect(clearButton.exists()).toBe(true);
@@ -618,6 +663,7 @@ describe('PDropdownSelect.vue', () => {
 
     await clearButton.trigger('click');
     expect(wrapper.vm.$data.selected).toEqual([]);
+
     cleanup(wrapper);
   });
 });

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

@@ -183,6 +183,25 @@ describe('PSelectList.vue', () => {
     cleanup(wrapper);
   });
 
+  it('does not select disabled items when "Select All" is clicked', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    items[1].disabled = true;
+    const wrapper = createWrapper({ selected: [], items }, { multiple: true });
+
+    await wrapper.findByText('Select all').trigger('click');
+
+    const selectedItemsOptions = wrapper.findAll('[p-select-list-option-item]');
+    const selectedItems = wrapper.findAll('[p-select-list-option-item].selected');
+
+    expect(selectedItems.length).toBe(selectedItemsOptions.length - 2);
+    expect(wrapper.vm.$data.selected.length).toBe(items.length - 2);
+
+    cleanup(wrapper);
+  });
+
   it('clears all values', async () => {
     const wrapper = createWrapper({ selected: [] }, { multiple: true });
 
@@ -198,6 +217,24 @@ describe('PSelectList.vue', () => {
     cleanup(wrapper);
   });
 
+  it('does not clear disabled items', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    items[1].disabled = true;
+    const wrapper = createWrapper({ selected: [1, 2], items }, { multiple: true });
+
+    await wrapper.findByText('Clear all').trigger('click');
+
+    const selectedItems = wrapper.findAll('[p-select-list-option-item].selected');
+
+    expect(selectedItems.length).toBe(2);
+    expect(wrapper.vm.$data.selected).toEqual([1, 2]);
+
+    cleanup(wrapper);
+  });
+
   it('displays the selected items on top', async () => {
     useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
 
@@ -448,6 +485,8 @@ describe('PSelectList.vue', () => {
     });
 
     expect(wrapper.vm.$data.selected).toEqual([1, 3]);
+
+    cleanup(wrapper);
   });
 
   it('removes values from the internalValue (modelValue) that are not in the items list', async () => {

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

@@ -11,7 +11,7 @@ import {
 } from '@squirrel/utils/listKeyboardNavigation';
 import { toString } from '@squirrel/utils/string';
 import { useVirtualizer } from '@tanstack/vue-virtual';
-import { cloneDeep, uniqBy } from 'lodash-es';
+import { cloneDeep, difference, intersection, uniqBy } from 'lodash-es';
 import { type ComponentPublicInstance, computed, nextTick, onUnmounted, type Ref, ref, watch } from 'vue';
 
 type Emits = {
@@ -59,7 +59,11 @@ export const useSelectList = (props: Props, inputSearch: InputSearch, virtualize
 
   // Computed
   const selectedItems = computed(() => {
-    return internalItems.value.filter((item) => internalValue.value.includes(item[props.itemValue] as AnyValue));
+    return internalItems.value.filter((item) => internalValue.value.includes(item[props.itemValue]));
+  });
+
+  const deselectedItems = computed(() => {
+    return internalItems.value.filter((item) => !internalValue.value.includes(item[props.itemValue]));
   });
 
   const computedItems = computed(() => {
@@ -279,20 +283,36 @@ export const useSelectList = (props: Props, inputSearch: InputSearch, virtualize
   };
 
   const selectAll = () => {
-    if (!props.multiple) {
-      return;
-    }
+    if (!props.multiple) return;
 
     const selectedItems = internalValue.value;
+    const deselectedDisabledItemsValues = deselectedItems.value
+      .filter((item) => isDisabled(item))
+      .map((item) => item[props.itemValue]);
     const filteredItems = computedItems.value.map((item) => item[props.itemValue]);
-    const toEmit = uniqBy([...selectedItems, ...filteredItems], (item) => item);
+    const uniqueItems = uniqBy([...selectedItems, ...filteredItems], (item) => item);
+
+    // We cannot select disabled items so we remove them from the list
+    const toEmit = difference(uniqueItems, deselectedDisabledItemsValues);
 
     emit('update:modelValue', toArrOfObjIfNeeded(toEmit));
   };
 
   const clearAll = () => {
+    if (!props.multiple) return;
+
     search.value = '';
-    emit('update:modelValue', []);
+
+    // We cannot clear disabled items that are selected
+    const disabledItemsValues = internalItems.value
+      .filter((item) => isDisabled(item))
+      .map((item) => item[props.itemValue]);
+
+    const selectedItemsValues = internalValue.value;
+
+    const selectedDisabledItems = intersection(disabledItemsValues, selectedItemsValues);
+
+    emit('update:modelValue', toArrOfObjIfNeeded(selectedDisabledItems));
   };
 
   // Watch

package/squirrel/tailwind/config.ts

@@ -1,6 +1,6 @@
 import type { Config } from 'tailwindcss';
 
-export const config = {
+export const squirrelTailwindConfig = {
   content: ['./index.html', './squirrel/**/*.{vue,js,ts,jsx,tsx,mdx}', './src/**/*.{vue,js,ts,jsx,tsx,mdx}'],
   theme: {
     colors: {
@@ -103,4 +103,4 @@ export const config = {
   },
 } as const satisfies Config;
 
-export type SquirrelTailwindConfig = typeof config;
+export type SquirrelTailwindConfig = typeof squirrelTailwindConfig;

package/squirrel/utils/listKeyboardNavigation.spec.js

@@ -168,4 +168,40 @@ describe('listKeyboardNavigation', () => {
 
     navigationSvc.destroy();
   });
+
+  it('triggers selection event on enter key', () => {
+    const navigationSvc = createTestSvc();
+
+    const event = new window.KeyboardEvent('keydown', {
+      key: 'Enter',
+      keyCode: 13,
+      bubbles: true,
+      target: document.querySelector('.dropdown-menu'),
+    });
+
+    const items = navigationSvc.getItems();
+    navigationSvc.setFocusedItem(items[1]);
+
+    const clickEvent = vi.fn();
+    items[1].addEventListener('click', clickEvent);
+
+    navigationSvc.listKeydown(event);
+
+    expect(clickEvent).toHaveBeenCalled();
+
+    navigationSvc.destroy();
+  });
+
+  it('warns when multiple instances are initialized', () => {
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    const navigationSvc1 = createTestSvc();
+    const navigationSvc2 = createTestSvc();
+
+    expect(consoleWarnSpy).toHaveBeenCalledWith('There can only be one instance of list navigation active at a time.');
+
+    navigationSvc1.destroy();
+    navigationSvc2.destroy();
+    consoleWarnSpy.mockRestore();
+  });
 });

package/squirrel/utils/tailwind.ts

@@ -1,6 +1,4 @@
-import { config as squirrelTailwindConfig } from '@squirrel/tailwind/config';
-// Relative import is used here because of
-// "Module source URI is not allowed in this document: “http://tailwind.config/”" error
+import { squirrelTailwindConfig } from '@squirrel/tailwind/config';
 import { get } from 'lodash-es';
 import type { Config } from 'tailwindcss';
 import resolveConfig from 'tailwindcss/resolveConfig';

package/dist/tailwind/config.js

@@ -1,105 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.config = void 0;
-exports.config = {
-    content: ['./index.html', './squirrel/**/*.{vue,js,ts,jsx,tsx,mdx}', './src/**/*.{vue,js,ts,jsx,tsx,mdx}'],
-    theme: {
-        colors: {
-            transparent: 'transparent',
-            current: 'currentColor',
-            /* Design system colors */
-            white: 'rgb(var(--color-white))',
-            black: 'rgb(var(--color-black))',
-            night: 'rgb(var(--color-night))',
-            'barley-white': 'rgb(var(--color-barley-white))',
-            'horses-neck': 'rgb(var(--color-horses-neck))',
-            'active-blue': 'rgb(var(--color-active-blue))',
-            /* Pequity colors */
-            'p-gray': {
-                10: 'rgb(var(--color-p-gray-10))',
-                20: 'rgb(var(--color-p-gray-20))',
-                30: 'rgb(var(--color-p-gray-30))',
-                40: 'rgb(var(--color-p-gray-40))',
-                50: 'rgb(var(--color-p-gray-50))',
-                60: 'rgb(var(--color-p-gray-60))',
-                70: 'rgb(var(--color-p-gray-70))',
-                80: 'rgb(var(--color-p-gray-80))',
-                90: 'rgb(var(--color-p-gray-90))',
-                100: 'rgb(var(--color-p-gray-100))',
-            },
-            'p-blue': {
-                10: 'rgb(var(--color-p-blue-10))',
-                15: 'rgb(var(--color-p-blue-15))',
-                20: 'rgb(var(--color-p-blue-20))',
-                30: 'rgb(var(--color-p-blue-30))',
-                40: 'rgb(var(--color-p-blue-40))',
-                50: 'rgb(var(--color-p-blue-50))',
-                60: 'rgb(var(--color-p-blue-60))',
-                70: 'rgb(var(--color-p-blue-70))',
-                80: 'rgb(var(--color-p-blue-80))',
-            },
-            'p-purple': {
-                10: 'rgb(var(--color-p-purple-10))',
-                20: 'rgb(var(--color-p-purple-20))',
-                30: 'rgb(var(--color-p-purple-30))',
-                40: 'rgb(var(--color-p-purple-40))',
-                50: 'rgb(var(--color-p-purple-50))',
-                60: 'rgb(var(--color-p-purple-60))',
-            },
-            'p-green': {
-                10: 'rgb(var(--color-p-green-10))',
-                20: 'rgb(var(--color-p-green-20))',
-                30: 'rgb(var(--color-p-green-30))',
-                40: 'rgb(var(--color-p-green-40))',
-                50: 'rgb(var(--color-p-green-50))',
-            },
-            'p-red': {
-                10: 'rgb(var(--color-p-red-10))',
-                20: 'rgb(var(--color-p-red-20))',
-                30: 'rgb(var(--color-p-red-30))',
-                40: 'rgb(var(--color-p-red-40))',
-                50: 'rgb(var(--color-p-red-50))',
-            },
-            /* Aliases */
-            primary: 'rgb(var(--color-primary))',
-            accent: 'rgb(var(--color-accent))',
-            surface: 'rgb(var(--color-surface))',
-            'on-surface': 'rgb(var(--color-on-surface))',
-            error: 'rgb(var(--color-error))',
-            'on-error': 'rgb(var(--color-on-error))',
-            info: 'rgb(var(--color-info))',
-            'on-info': 'rgb(var(--color-on-info))',
-            success: 'rgb(var(--color-success))',
-            'on-success': 'rgb(var(--color-on-success))',
-            warning: 'rgb(var(--color-warning))',
-            'on-warning': 'rgb(var(--color-on-warning))',
-        },
-        fontFamily: {
-            sans: ['Inter', 'Helvetica', 'Arial', 'sans-serif'],
-        },
-        fontSize: {
-            xs: '0.75rem',
-            sm: '0.875rem',
-            base: '1rem',
-            lg: '1.125rem',
-            xl: '1.25rem',
-            '2xl': '1.5rem',
-            '3xl': '1.875rem',
-            '4xl': '2.25rem',
-            '5xl': '3rem',
-            '6xl': '4rem',
-        },
-        extend: {
-            borderColor: {
-                DEFAULT: 'rgb(var(--color-p-gray-30))',
-            },
-            spacing: {
-                7.5: '1.875rem',
-            },
-            zIndex: {
-                110: '110',
-            },
-            screens: {},
-        },
-    },
-};