@pequity/squirrel 6.0.6 → 6.0.7

package/README.md

@@ -76,7 +76,7 @@ Import and use the components you need in your Vue 3 project:
 </template>
 
 <script setup lang="ts">
-  import { PBtn, PRingLoader } from '@pequity/squirrel';
+  import { PBtn } from '@pequity/squirrel';
 </script>
 ```
 
@@ -111,7 +111,7 @@ Then, in your consumer project's `.env.local` file, add an `VUE_APP_SQUIRREL_LOC
 
 Finally, in your project's `vite.config` file, add the following:
 
-> Heads up! The `vite.config.mts` file of the `pequity/frontendv2` already includes the following configuration.
+> Heads up! The `vite.config.ts` file of the `pequity/frontendv2` already includes the following configuration.
 
 ```js
 import { defineConfig, searchForWorkspaceRoot } from 'vite';

package/dist/cjs/chunks/p-dropdown-select.js

@@ -420,7 +420,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               }, () => [
                 vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(__props.multiple && vue.unref(selectedItems).length > 1 ? `${vue.unref(selectedItems).length} option${vue.unref(selectedItems).length > 1 ? "s" : ""} selected` : vue.unref(selectedItems)[0][__props.itemText]), 1)
               ]),
-              __props.clearable && vue.unref(internalValue).length ? (vue.openBlock(), vue.createElementBlock("button", {
+              __props.clearable && vue.unref(selectedItems).length ? (vue.openBlock(), vue.createElementBlock("button", {
                 key: 2,
                 class: vue.normalizeClass(["absolute top-1/2 flex -translate-y-1/2 items-center justify-center text-p-gray-40 hover:text-p-gray-60", [vue.unref(pSelectList.SIZES)[__props.size], CLEAR_BUTTON_SPACING[__props.size]]]),
                 "aria-label": "Clear selection",

package/dist/cjs/useSelectList.js

@@ -217,12 +217,17 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     emit("update:modelValue", toArrOfObjIfNeeded(toEmit));
   };
   const clearAll = () => {
-    if (!props.multiple) return;
     search.value = "";
-    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));
+    if (props.multiple) {
+      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));
+    } else {
+      if (!isDisabled(selectedItems.value[0])) {
+        emit("update:modelValue", null);
+      }
+    }
   };
   vue.watch(
     () => props.items,

package/dist/es/chunks/p-dropdown-select.js

@@ -419,7 +419,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, () => [
                 createElementVNode("div", _hoisted_3, toDisplayString(__props.multiple && unref(selectedItems).length > 1 ? `${unref(selectedItems).length} option${unref(selectedItems).length > 1 ? "s" : ""} selected` : unref(selectedItems)[0][__props.itemText]), 1)
               ]),
-              __props.clearable && unref(internalValue).length ? (openBlock(), createElementBlock("button", {
+              __props.clearable && unref(selectedItems).length ? (openBlock(), createElementBlock("button", {
                 key: 2,
                 class: normalizeClass(["absolute top-1/2 flex -translate-y-1/2 items-center justify-center text-p-gray-40 hover:text-p-gray-60", [unref(SIZES)[__props.size], CLEAR_BUTTON_SPACING[__props.size]]]),
                 "aria-label": "Clear selection",

package/dist/es/useSelectList.js

@@ -215,12 +215,17 @@ const useSelectList = (props, inputSearch, virtualizerRef, emit) => {
     emit("update:modelValue", toArrOfObjIfNeeded(toEmit));
   };
   const clearAll = () => {
-    if (!props.multiple) return;
     search.value = "";
-    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));
+    if (props.multiple) {
+      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));
+    } else {
+      if (!isDisabled(selectedItems.value[0])) {
+        emit("update:modelValue", null);
+      }
+    }
   };
   watch(
     () => props.items,

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "6.0.6",
-  "packageManager": "pnpm@9.15.3",
+  "version": "6.0.7",
+  "packageManager": "pnpm@9.15.4",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -53,54 +53,54 @@
     "@playwright/test": "^1.49.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-a11y": "^8.4.7",
-    "@storybook/addon-actions": "^8.4.7",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/manager-api": "^8.4.7",
-    "@storybook/test": "^8.4.7",
+    "@storybook/addon-a11y": "^8.5.0",
+    "@storybook/addon-actions": "^8.5.0",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/manager-api": "^8.5.0",
+    "@storybook/test": "^8.5.0",
     "@storybook/test-runner": "^0.21.0",
-    "@storybook/theming": "^8.4.7",
-    "@storybook/vue3": "^8.4.7",
-    "@storybook/vue3-vite": "^8.4.7",
+    "@storybook/theming": "^8.5.0",
+    "@storybook/vue3": "^8.5.0",
+    "@storybook/vue3-vite": "^8.5.0",
     "@tanstack/vue-virtual": "3.11.2",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^22.10.5",
+    "@types/node": "^22.10.7",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/coverage-v8": "^3.0.3",
     "@vue/compiler-sfc": "3.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vuepic/vue-datepicker": "11.0.1",
     "autoprefixer": "^10.4.20",
     "dayjs": "1.11.13",
-    "eslint": "^9.17.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-storybook": "^0.11.2",
     "floating-vue": "5.2.2",
     "glob": "^11.0.1",
     "husky": "^9.1.7",
     "iconify-icon": "^2.3.0",
     "jsdom": "^26.0.0",
-    "lint-staged": "^15.3.0",
+    "lint-staged": "^15.4.1",
     "lodash-es": "4.17.21",
     "make-coverage-badge": "^1.2.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
+    "prettier-plugin-tailwindcss": "^0.6.10",
     "resolve-tspaths": "^0.8.23",
     "rimraf": "^6.0.1",
-    "sass": "^1.83.1",
+    "sass": "^1.83.4",
     "semantic-release": "^24.2.1",
-    "storybook": "^8.4.7",
+    "storybook": "^8.5.0",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.17",
     "typescript": "5.7.3",
-    "vite": "^6.0.7",
-    "vitest": "^2.1.8",
+    "vite": "^6.0.11",
+    "vitest": "^3.0.3",
     "vue": "3.5.13",
-    "vue-currency-input": "3.1.0",
+    "vue-currency-input": "3.2.1",
     "vue-router": "4.5.0",
     "vue-toastification": "2.0.0-rc.5",
     "vue-tsc": "2.2.0"

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

@@ -653,6 +653,17 @@ describe('PDropdownSelect.vue', () => {
     cleanup(wrapper);
   });
 
+  it('does not render clear button when there is no value selected', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+    const wrapper = createWrapper({ selected: null }, { clearable: true });
+
+    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));
 
@@ -666,4 +677,40 @@ describe('PDropdownSelect.vue', () => {
 
     cleanup(wrapper);
   });
+
+  it('clears a single selection select when clearable is true', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = false;
+    const wrapper = createWrapper({ selected: 1, items }, { multiple: false, clearable: true });
+
+    expect(wrapper.vm.$data.selected).toEqual(1);
+
+    const clearButton = wrapper.find('button[aria-label="Clear selection"]');
+    expect(clearButton.exists()).toBe(true);
+
+    await clearButton.trigger('click');
+    expect(wrapper.vm.$data.selected).toEqual(null);
+
+    cleanup(wrapper);
+  });
+
+  it('does not clear a single selection select when the item is disabled', async () => {
+    useVirtualizer.mockImplementation(() => createMockedVirtualizer(10));
+
+    const items = cloneDeep(filterListItems).slice(0, 10);
+    items[0].disabled = true;
+    const wrapper = createWrapper({ selected: 1, items }, { multiple: false, clearable: true });
+
+    expect(wrapper.vm.$data.selected).toEqual(1);
+
+    const clearButton = wrapper.find('button[aria-label="Clear selection"]');
+    expect(clearButton.exists()).toBe(true);
+
+    await clearButton.trigger('click');
+    expect(wrapper.vm.$data.selected).toEqual(1);
+
+    cleanup(wrapper);
+  });
 });

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

@@ -38,9 +38,9 @@
             }}
           </div>
         </slot>
-        <!-- Add clear button -->
+        <!-- Clear selection button -->
         <button
-          v-if="clearable && internalValue.length"
+          v-if="clearable && selectedItems.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"

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

@@ -299,20 +299,24 @@ export const useSelectList = (props: Props, inputSearch: InputSearch, virtualize
   };
 
   const clearAll = () => {
-    if (!props.multiple) return;
-
     search.value = '';
 
     // We cannot clear disabled items that are selected
-    const disabledItemsValues = internalItems.value
-      .filter((item) => isDisabled(item))
-      .map((item) => item[props.itemValue]);
+    if (props.multiple) {
+      const disabledItemsValues = internalItems.value
+        .filter((item) => isDisabled(item))
+        .map((item) => item[props.itemValue]);
 
-    const selectedItemsValues = internalValue.value;
+      const selectedItemsValues = internalValue.value;
 
-    const selectedDisabledItems = intersection(disabledItemsValues, selectedItemsValues);
+      const selectedDisabledItems = intersection(disabledItemsValues, selectedItemsValues);
 
-    emit('update:modelValue', toArrOfObjIfNeeded(selectedDisabledItems));
+      emit('update:modelValue', toArrOfObjIfNeeded(selectedDisabledItems));
+    } else {
+      if (!isDisabled(selectedItems.value[0])) {
+        emit('update:modelValue', null);
+      }
+    }
   };
 
   // Watch