@pequity/squirrel 5.4.5 → 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";
@@ -974,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/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
      */
@@ -433,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
      */
@@ -489,6 +497,7 @@ 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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.4.5",
+  "version": "5.4.6",
   "packageManager": "pnpm@9.12.2",
   "type": "module",
   "scripts": {

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

@@ -555,7 +555,6 @@ describe('PDropdownSelect.vue', () => {
         expect(item.classes()).not.toContain('pointer-events-none');
       }
     });
-
     cleanup(wrapper);
   });
 
@@ -581,7 +580,44 @@ 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 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>
@@ -148,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,
@@ -275,6 +286,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
   /**
    * Enables multiple selection
    */
@@ -326,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);