@pequity/squirrel 7.1.1 → 7.1.3

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

@@ -12,16 +12,28 @@ const lodashEs = require("lodash-es");
 const _imports_0 = "data:image/svg+xml,%3csvg%20width='18'%20height='12'%20viewBox='0%200%2018%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.1383%200.166992L6.30411%209.83366L1.69828%205.27533L0.526611%206.46033L5.71578%2011.597C5.87174%2011.7509%206.08205%2011.8372%206.3012%2011.8372C6.52034%2011.8372%206.73065%2011.7509%206.88661%2011.597L17.3033%201.35366L16.1383%200.166992Z'%20fill='%231A123B'%20/%3e%3c/svg%3e";
 const _hoisted_1 = ["data-has-error"];
 const _hoisted_2 = { class: "truncate text-left text-p-gray-40" };
-const _hoisted_3 = { class: "truncate text-left" };
+const _hoisted_3 = {
+  key: 0,
+  class: "flex flex-wrap gap-1.5 pr-8"
+};
 const _hoisted_4 = {
+  class: "max-w-[200px] truncate",
+  "data-test": "pill-text"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = {
+  key: 1,
+  class: "truncate text-left"
+};
+const _hoisted_7 = {
   key: 0,
   class: "mt-3 px-3"
 };
-const _hoisted_5 = { class: "text-p-purple-60" };
-const _hoisted_6 = { class: "flex flex-row" };
-const _hoisted_7 = ["onClick"];
-const _hoisted_8 = ["title"];
-const _hoisted_9 = {
+const _hoisted_8 = { class: "text-p-purple-60" };
+const _hoisted_9 = { class: "flex flex-row" };
+const _hoisted_10 = ["onClick"];
+const _hoisted_11 = ["title"];
+const _hoisted_12 = {
   key: 0,
   class: "ml-auto fill-p-purple-60 pl-2",
   src: _imports_0
@@ -167,6 +179,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     creatable: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Shows selected items as pills in the button when multiple selection is enabled
+     */
+    pills: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:modelValue", "select", "create"],
@@ -184,9 +203,19 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       enableArrowNavigation: false
     };
     const CLEAR_BUTTON_SPACING = {
-      sm: "right-8",
-      md: "right-9",
-      lg: "right-10"
+      sm: "right-8 text-sm top-[0.3rem]",
+      md: "right-9 text-base top-[0.5rem]",
+      lg: "right-10 text-lg top-[0.7rem]"
+    };
+    const PILL_SIZE = {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    };
+    const PILL_SELECT_SPACING = {
+      sm: "min-h-[2rem] py-1 bg-[position:right_1rem_top_0.7rem]",
+      md: "min-h-[2.5rem] py-2 bg-[position:right_1rem_top_0.9rem]",
+      lg: "min-h-[3rem] py-2 bg-[position:right_1rem_top_1.1rem]"
     };
     const width = vue.ref("auto");
     const listItemStyle = vue.ref({ paddingTop: 0, paddingBottom: 0 });
@@ -304,15 +333,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               "p-select-list": "",
               role: "listbox"
             }), [
-              __props.multiple || __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+              __props.multiple || __props.searchable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
                 __props.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
                   key: 0,
                   ref_key: "actionsContainer",
                   ref: actionsContainer,
                   class: "flex flex-row justify-between text-xs font-semibold text-primary"
                 }, [
-                  vue.createElementVNode("p", _hoisted_5, vue.toDisplayString(vue.unref(computedItems).length) + " items", 1),
-                  vue.createElementVNode("div", _hoisted_6, [
+                  vue.createElementVNode("p", _hoisted_8, vue.toDisplayString(vue.unref(computedItems).length) + " items", 1),
+                  vue.createElementVNode("div", _hoisted_9, [
                     vue.unref(computedItems).length === vue.unref(internalItems).length ? (vue.openBlock(), vue.createElementBlock("a", {
                       key: 0,
                       class: vue.normalizeClass([
@@ -399,11 +428,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                   class: vue.normalizeClass({ "bg-p-blue-20": index === 1 })
                                 }, vue.toDisplayString(str), 3);
                               }), 128))
-                            ], 8, _hoisted_8)
+                            ], 8, _hoisted_11)
                           ]),
-                          vue.unref(isSelected)(vue.unref(getValue)(row.index)) ? (vue.openBlock(), vue.createElementBlock("img", _hoisted_9)) : vue.createCommentVNode("", true)
+                          vue.unref(isSelected)(vue.unref(getValue)(row.index)) ? (vue.openBlock(), vue.createElementBlock("img", _hoisted_12)) : vue.createCommentVNode("", true)
                         ], 2)
-                      ], 14, _hoisted_7)), [
+                      ], 14, _hoisted_10)), [
                         [_directive_close_popper, !__props.multiple]
                       ])
                     ], 4);
@@ -434,7 +463,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             vue.createElementVNode("button", vue.mergeProps(attrs.value, {
               ref: "button",
               type: "button",
-              class: ["w-full", vue.unref(selectClasses), dropdownShow.value ? "border-primary" : ""],
+              class: [
+                "w-full",
+                vue.unref(selectClasses),
+                dropdownShow.value ? "border-primary" : "",
+                { "box-border h-auto items-start": __props.multiple && __props.pills && vue.unref(selectedItems).length > 0 },
+                PILL_SELECT_SPACING[__props.size]
+              ],
               role: "button",
               "aria-haspopup": "listbox",
               onClick: _cache[1] || (_cache[1] = ($event) => dropdownShow.value = !dropdownShow.value)
@@ -445,11 +480,33 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 key: 1,
                 item: __props.multiple ? vue.unref(selectedItems) : vue.unref(selectedItems)[0]
               }, () => [
-                vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(__props.multiple ? vue.unref(selectedItems).length === selectableItemsCount.value ? "All options selected" : `${vue.unref(selectedItems).length} option${vue.unref(selectedItems).length > 1 ? "s" : ""} selected` : vue.unref(selectedItems)[0][__props.itemText]), 1)
+                __props.multiple && __props.pills ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(selectedItems), (item) => {
+                    return vue.openBlock(), vue.createElementBlock("div", {
+                      key: String(item[__props.itemValue]),
+                      class: vue.normalizeClass(["flex items-center gap-1 rounded bg-p-gray-10 px-2 text-p-gray-50", [PILL_SIZE[__props.size]]]),
+                      "data-test": "selected-pill"
+                    }, [
+                      vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(item[__props.itemText]), 1),
+                      vue.createElementVNode("button", {
+                        type: "button",
+                        class: "flex items-center justify-center text-p-gray-40 hover:text-p-gray-60",
+                        "aria-label": "Remove item",
+                        "data-test": "pill-remove",
+                        onClick: vue.withModifiers(($event) => vue.unref(select)($event, item[__props.itemValue]), ["stop"])
+                      }, [
+                        vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
+                          icon: "fe:close",
+                          class: "h-3.5 w-3.5"
+                        })
+                      ], 8, _hoisted_5)
+                    ], 2);
+                  }), 128))
+                ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, vue.toDisplayString(__props.multiple ? vue.unref(selectedItems).length === selectableItemsCount.value ? "All options selected" : `${vue.unref(selectedItems).length} option${vue.unref(selectedItems).length > 1 ? "s" : ""} selected` : vue.unref(selectedItems)[0][__props.itemText]), 1))
               ]),
               __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]]]),
+                class: vue.normalizeClass(["absolute right-9 flex h-6 items-center justify-center text-base text-p-gray-40 hover:text-p-gray-60", [CLEAR_BUTTON_SPACING[__props.size]]]),
                 "aria-label": "Clear selection",
                 onClick: _cache[0] || (_cache[0] = vue.withModifiers(
                   //@ts-ignore

package/dist/cjs/p-input-search.js

@@ -47,7 +47,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       lg: "bg-[length:2rem_2rem] w-[2rem] h-[2rem] right-[46px] top-2"
     };
     const showEnterIconOnFocus = vue.ref(false);
-    const searchInput = vue.useTemplateRef("searchInput");
+    const input = vue.useTemplateRef("pInput");
     const query = vue.ref(props.modelValue);
     vue.watch(
       () => props.modelValue,
@@ -62,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       query.value = "";
       requestAnimationFrame(() => {
         var _a;
-        (_a = searchInput.value) == null ? void 0 : _a.$el.querySelector("input").focus();
+        (_a = input.value) == null ? void 0 : _a.$el.querySelector("input").focus();
       });
     };
     const keydownEnter = () => {
@@ -70,13 +70,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     return (_ctx, _cache) => {
       const _directive_tooltip = vue.resolveDirective("tooltip");
-      return vue.openBlock(), vue.createBlock(pInput_vue_vue_type_script_setup_true_lang._sfc_main, vue.mergeProps({
-        ref_key: "searchInput",
-        ref: searchInput,
+      return vue.openBlock(), vue.createBlock(pInput_vue_vue_type_script_setup_true_lang._sfc_main, vue.mergeProps({ ref: "pInput" }, _ctx.$attrs, {
         modelValue: query.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
-        size: __props.size
-      }, _ctx.$attrs, {
+        size: __props.size,
         role: "searchbox",
         rounded: "",
         onFocus: _cache[1] || (_cache[1] = ($event) => showEnterIconOnFocus.value = true),
@@ -119,5 +116,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const PInputSearch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-ebc375ff"]]);
+const PInputSearch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-0e51ff56"]]);
 module.exports = PInputSearch;

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, useAttrs, computed, watch, onMounted, onUnmounted, resolveDirective, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createCommentVNode, createVNode, withDirectives, toDisplayString, mergeProps, withCtx, createElementVNode, renderSlot, withModifiers, isRef, Fragment, renderList, createTextVNode, vShow } from "vue";
+import { defineComponent, ref, useAttrs, computed, watch, onMounted, onUnmounted, resolveDirective, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createCommentVNode, createVNode, withDirectives, toDisplayString, mergeProps, withCtx, createElementVNode, renderSlot, Fragment, renderList, withModifiers, isRef, createTextVNode, vShow } from "vue";
 import PDropdown from "../p-dropdown.js";
 import { _ as _sfc_main$1 } from "./p-icon.js";
 import PInputSearch from "../p-input-search.js";
@@ -11,16 +11,28 @@ import { omit } from "lodash-es";
 const _imports_0 = "data:image/svg+xml,%3csvg%20width='18'%20height='12'%20viewBox='0%200%2018%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M16.1383%200.166992L6.30411%209.83366L1.69828%205.27533L0.526611%206.46033L5.71578%2011.597C5.87174%2011.7509%206.08205%2011.8372%206.3012%2011.8372C6.52034%2011.8372%206.73065%2011.7509%206.88661%2011.597L17.3033%201.35366L16.1383%200.166992Z'%20fill='%231A123B'%20/%3e%3c/svg%3e";
 const _hoisted_1 = ["data-has-error"];
 const _hoisted_2 = { class: "truncate text-left text-p-gray-40" };
-const _hoisted_3 = { class: "truncate text-left" };
+const _hoisted_3 = {
+  key: 0,
+  class: "flex flex-wrap gap-1.5 pr-8"
+};
 const _hoisted_4 = {
+  class: "max-w-[200px] truncate",
+  "data-test": "pill-text"
+};
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = {
+  key: 1,
+  class: "truncate text-left"
+};
+const _hoisted_7 = {
   key: 0,
   class: "mt-3 px-3"
 };
-const _hoisted_5 = { class: "text-p-purple-60" };
-const _hoisted_6 = { class: "flex flex-row" };
-const _hoisted_7 = ["onClick"];
-const _hoisted_8 = ["title"];
-const _hoisted_9 = {
+const _hoisted_8 = { class: "text-p-purple-60" };
+const _hoisted_9 = { class: "flex flex-row" };
+const _hoisted_10 = ["onClick"];
+const _hoisted_11 = ["title"];
+const _hoisted_12 = {
   key: 0,
   class: "ml-auto fill-p-purple-60 pl-2",
   src: _imports_0
@@ -166,6 +178,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     creatable: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Shows selected items as pills in the button when multiple selection is enabled
+     */
+    pills: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:modelValue", "select", "create"],
@@ -183,9 +202,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       enableArrowNavigation: false
     };
     const CLEAR_BUTTON_SPACING = {
-      sm: "right-8",
-      md: "right-9",
-      lg: "right-10"
+      sm: "right-8 text-sm top-[0.3rem]",
+      md: "right-9 text-base top-[0.5rem]",
+      lg: "right-10 text-lg top-[0.7rem]"
+    };
+    const PILL_SIZE = {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    };
+    const PILL_SELECT_SPACING = {
+      sm: "min-h-[2rem] py-1 bg-[position:right_1rem_top_0.7rem]",
+      md: "min-h-[2.5rem] py-2 bg-[position:right_1rem_top_0.9rem]",
+      lg: "min-h-[3rem] py-2 bg-[position:right_1rem_top_1.1rem]"
     };
     const width = ref("auto");
     const listItemStyle = ref({ paddingTop: 0, paddingBottom: 0 });
@@ -303,15 +332,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "p-select-list": "",
               role: "listbox"
             }), [
-              __props.multiple || __props.searchable ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              __props.multiple || __props.searchable ? (openBlock(), createElementBlock("div", _hoisted_7, [
                 __props.multiple ? (openBlock(), createElementBlock("div", {
                   key: 0,
                   ref_key: "actionsContainer",
                   ref: actionsContainer,
                   class: "flex flex-row justify-between text-xs font-semibold text-primary"
                 }, [
-                  createElementVNode("p", _hoisted_5, toDisplayString(unref(computedItems).length) + " items", 1),
-                  createElementVNode("div", _hoisted_6, [
+                  createElementVNode("p", _hoisted_8, toDisplayString(unref(computedItems).length) + " items", 1),
+                  createElementVNode("div", _hoisted_9, [
                     unref(computedItems).length === unref(internalItems).length ? (openBlock(), createElementBlock("a", {
                       key: 0,
                       class: normalizeClass([
@@ -398,11 +427,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   class: normalizeClass({ "bg-p-blue-20": index === 1 })
                                 }, toDisplayString(str), 3);
                               }), 128))
-                            ], 8, _hoisted_8)
+                            ], 8, _hoisted_11)
                           ]),
-                          unref(isSelected)(unref(getValue)(row.index)) ? (openBlock(), createElementBlock("img", _hoisted_9)) : createCommentVNode("", true)
+                          unref(isSelected)(unref(getValue)(row.index)) ? (openBlock(), createElementBlock("img", _hoisted_12)) : createCommentVNode("", true)
                         ], 2)
-                      ], 14, _hoisted_7)), [
+                      ], 14, _hoisted_10)), [
                         [_directive_close_popper, !__props.multiple]
                       ])
                     ], 4);
@@ -433,7 +462,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("button", mergeProps(attrs.value, {
               ref: "button",
               type: "button",
-              class: ["w-full", unref(selectClasses), dropdownShow.value ? "border-primary" : ""],
+              class: [
+                "w-full",
+                unref(selectClasses),
+                dropdownShow.value ? "border-primary" : "",
+                { "box-border h-auto items-start": __props.multiple && __props.pills && unref(selectedItems).length > 0 },
+                PILL_SELECT_SPACING[__props.size]
+              ],
               role: "button",
               "aria-haspopup": "listbox",
               onClick: _cache[1] || (_cache[1] = ($event) => dropdownShow.value = !dropdownShow.value)
@@ -444,11 +479,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 key: 1,
                 item: __props.multiple ? unref(selectedItems) : unref(selectedItems)[0]
               }, () => [
-                createElementVNode("div", _hoisted_3, toDisplayString(__props.multiple ? unref(selectedItems).length === selectableItemsCount.value ? "All options selected" : `${unref(selectedItems).length} option${unref(selectedItems).length > 1 ? "s" : ""} selected` : unref(selectedItems)[0][__props.itemText]), 1)
+                __props.multiple && __props.pills ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(selectedItems), (item) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: String(item[__props.itemValue]),
+                      class: normalizeClass(["flex items-center gap-1 rounded bg-p-gray-10 px-2 text-p-gray-50", [PILL_SIZE[__props.size]]]),
+                      "data-test": "selected-pill"
+                    }, [
+                      createElementVNode("span", _hoisted_4, toDisplayString(item[__props.itemText]), 1),
+                      createElementVNode("button", {
+                        type: "button",
+                        class: "flex items-center justify-center text-p-gray-40 hover:text-p-gray-60",
+                        "aria-label": "Remove item",
+                        "data-test": "pill-remove",
+                        onClick: withModifiers(($event) => unref(select)($event, item[__props.itemValue]), ["stop"])
+                      }, [
+                        createVNode(_sfc_main$1, {
+                          icon: "fe:close",
+                          class: "h-3.5 w-3.5"
+                        })
+                      ], 8, _hoisted_5)
+                    ], 2);
+                  }), 128))
+                ])) : (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(__props.multiple ? unref(selectedItems).length === selectableItemsCount.value ? "All options selected" : `${unref(selectedItems).length} option${unref(selectedItems).length > 1 ? "s" : ""} selected` : unref(selectedItems)[0][__props.itemText]), 1))
               ]),
               __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]]]),
+                class: normalizeClass(["absolute right-9 flex h-6 items-center justify-center text-base text-p-gray-40 hover:text-p-gray-60", [CLEAR_BUTTON_SPACING[__props.size]]]),
                 "aria-label": "Clear selection",
                 onClick: _cache[0] || (_cache[0] = withModifiers(
                   //@ts-ignore

package/dist/es/p-input-search.js

@@ -46,7 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       lg: "bg-[length:2rem_2rem] w-[2rem] h-[2rem] right-[46px] top-2"
     };
     const showEnterIconOnFocus = ref(false);
-    const searchInput = useTemplateRef("searchInput");
+    const input = useTemplateRef("pInput");
     const query = ref(props.modelValue);
     watch(
       () => props.modelValue,
@@ -61,7 +61,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       query.value = "";
       requestAnimationFrame(() => {
         var _a;
-        (_a = searchInput.value) == null ? void 0 : _a.$el.querySelector("input").focus();
+        (_a = input.value) == null ? void 0 : _a.$el.querySelector("input").focus();
       });
     };
     const keydownEnter = () => {
@@ -69,13 +69,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _directive_tooltip = resolveDirective("tooltip");
-      return openBlock(), createBlock(_sfc_main$1, mergeProps({
-        ref_key: "searchInput",
-        ref: searchInput,
+      return openBlock(), createBlock(_sfc_main$1, mergeProps({ ref: "pInput" }, _ctx.$attrs, {
         modelValue: query.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
-        size: __props.size
-      }, _ctx.$attrs, {
+        size: __props.size,
         role: "searchbox",
         rounded: "",
         onFocus: _cache[1] || (_cache[1] = ($event) => showEnterIconOnFocus.value = true),
@@ -118,7 +115,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const PInputSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ebc375ff"]]);
+const PInputSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0e51ff56"]]);
 export {
   PInputSearch as default
 };

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

@@ -148,6 +148,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Shows selected items as pills in the button when multiple selection is enabled
+     */
+    pills: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
@@ -286,6 +293,13 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Shows selected items as pills in the button when multiple selection is enabled
+     */
+    pills: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -314,6 +328,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     selectedTopShown: boolean;
     disabledBy: string;
     creatable: boolean;
+    pills: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/squirrel.css

@@ -263,9 +263,11 @@ from {
 to {
     opacity: 0;
 }
-}.enter[data-v-ebc375ff] {
+}
+.enter[data-v-0e51ff56] {
   background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1627_786)'%3e%3crect%20width='24'%20height='24'%20rx='5'%20fill='%23ECF1FF'/%3e%3cpath%20d='M19.17%201.03744e-05H4.83C4.19619%20-0.00130459%203.56834%200.122398%202.98239%200.364037C2.39645%200.605676%201.86392%200.960506%201.41528%201.40822C0.966641%201.85592%200.610708%202.38772%200.367855%202.97316C0.125002%203.55861%20-1.36406e-06%204.1862%200%204.82001L0%2019.17C0%2020.451%200.508874%2021.6795%201.41467%2022.5853C2.32048%2023.4911%203.549%2024%204.83%2024H19.17C20.4502%2023.9974%2021.6772%2023.4876%2022.5824%2022.5824C23.4876%2021.6772%2023.9974%2020.4502%2024%2019.17V4.82001C23.9974%203.54075%2023.4873%202.31479%2022.5818%201.41115C21.6763%200.507508%2020.4493%207.63258e-06%2019.17%201.03744e-05ZM22%2019.17C22%2019.9206%2021.7018%2020.6404%2021.1711%2021.1711C20.6404%2021.7018%2019.9206%2022%2019.17%2022H4.83C4.07944%2022%203.35962%2021.7018%202.82889%2021.1711C2.29816%2020.6404%202%2019.9206%202%2019.17V4.82001C2.00265%204.07118%202.30197%203.35393%202.83242%202.82536C3.36286%202.29679%204.08117%202.00001%204.83%202.00001H19.17C19.9188%202.00001%2020.6371%202.29679%2021.1676%202.82536C21.698%203.35393%2021.9974%204.07118%2022%204.82001V19.17Z'%20fill='%234750EB'/%3e%3cpath%20d='M17.5%207.5C17.2348%207.5%2016.9804%207.60536%2016.7929%207.79289C16.6054%207.98043%2016.5%208.23478%2016.5%208.5V11.25C16.5%2011.3163%2016.4737%2011.3799%2016.4268%2011.4268C16.3799%2011.4737%2016.3163%2011.5%2016.25%2011.5H10.75C10.6837%2011.5%2010.6201%2011.4737%2010.5732%2011.4268C10.5263%2011.3799%2010.5%2011.3163%2010.5%2011.25V9.5C10.5012%209.30138%2010.4431%209.10691%2010.3333%208.94139C10.2235%208.77587%2010.0669%208.6468%209.88348%208.57063C9.70004%208.49446%209.49807%208.47465%209.30332%208.51372C9.10857%208.55279%208.92987%208.64897%208.79%208.79L5.79%2011.79C5.60375%2011.9774%205.49921%2012.2308%205.49921%2012.495C5.49921%2012.7592%205.60375%2013.0126%205.79%2013.2L8.79%2016.2C8.88261%2016.2945%208.99306%2016.3697%209.11493%2016.4212C9.23681%2016.4727%209.36769%2016.4995%209.5%2016.5C9.76522%2016.5%2010.0196%2016.3946%2010.2071%2016.2071C10.3946%2016.0196%2010.5%2015.7652%2010.5%2015.5V13.75C10.5%2013.6837%2010.5263%2013.6201%2010.5732%2013.5732C10.6201%2013.5263%2010.6837%2013.5%2010.75%2013.5H16.5C17.0304%2013.5%2017.5391%2013.2893%2017.9142%2012.9142C18.2893%2012.5391%2018.5%2012.0304%2018.5%2011.5V8.5C18.5%208.23478%2018.3946%207.98043%2018.2071%207.79289C18.0196%207.60536%2017.7652%207.5%2017.5%207.5Z'%20fill='%234750EB'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1627_786'%3e%3crect%20width='24'%20height='24'%20rx='5'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
-}.fadeInDown[data-v-9ad56d4f] {
+}
+.fadeInDown[data-v-9ad56d4f] {
   animation-duration: 0.4s;
   animation-fill-mode: both;
   animation-name: fadeInDown-9ad56d4f;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "7.1.1",
+  "version": "7.1.3",
   "packageManager": "pnpm@9.15.9",
   "type": "module",
   "scripts": {

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

@@ -857,4 +857,111 @@ describe('PDropdownSelect.vue', () => {
       cleanup(wrapper);
     });
   });
+
+  describe('pills functionality', () => {
+    it('renders selected items as pills when pills prop is true and multiple is true', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: [4, 5] }, { multiple: true, pills: true });
+
+      const button = wrapper.find('button');
+      const pillsContainer = button.find('div.flex.flex-wrap.gap-1\\.5');
+      expect(pillsContainer.exists()).toBe(true);
+
+      const pills = wrapper.findAll('[data-test="selected-pill"]');
+      expect(pills.length).toBe(2);
+      expect(pills[0].find('[data-test="pill-text"]').text()).toBe('d39ad899-709e-4ed1-b48f-3ef160a617b1');
+      expect(pills[1].find('[data-test="pill-text"]').text()).toBe('42e1aeff-2147-485d-9265-fd79abc897b5');
+
+      cleanup(wrapper);
+    });
+
+    it('does not render pills when pills prop is false', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: [4, 5] }, { multiple: true, pills: false });
+
+      const button = wrapper.find('button');
+      const pills = wrapper.findAll('[data-test="selected-pill"]');
+      expect(pills.length).toBe(0);
+      expect(button.text()).toBe('2 options selected');
+
+      cleanup(wrapper);
+    });
+
+    it('does not render pills when multiple is false, regardless of pills prop', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: 4 }, { multiple: false, pills: true });
+
+      const button = wrapper.find('button');
+      const pills = wrapper.findAll('[data-test="selected-pill"]');
+      expect(pills.length).toBe(0);
+      expect(button.text()).toBe('d39ad899-709e-4ed1-b48f-3ef160a617b1');
+
+      cleanup(wrapper);
+    });
+
+    it('allows removing individual items by clicking the pill close button', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: [4, 5] }, { multiple: true, pills: true });
+
+      const pills = wrapper.findAll('[data-test="selected-pill"]');
+      const closeButton = pills[0].find('[data-test="pill-remove"]');
+      await closeButton.trigger('click');
+
+      expect(wrapper.vm.$data.selected).toEqual([5]);
+      expect(wrapper.findAll('[data-test="selected-pill"]').length).toBe(1);
+
+      cleanup(wrapper);
+    });
+
+    it('shows pills with correct layout', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: [4, 5] }, { multiple: true, pills: true });
+
+      const button = wrapper.find('button');
+      expect(button.classes()).toContain('h-auto');
+      expect(button.classes()).toContain('min-h-[2.5rem]');
+      expect(button.classes()).toContain('items-start');
+      expect(button.classes()).toContain('py-2');
+
+      const pillsContainer = wrapper.find('div.flex.flex-wrap.gap-1\\.5');
+      expect(pillsContainer.exists()).toBe(true);
+
+      cleanup(wrapper);
+    });
+
+    it('truncates long text in pills', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: [4, 5] }, { multiple: true, pills: true });
+
+      const pillText = wrapper.find('[data-test="pill-text"]');
+      expect(pillText.classes()).toContain('max-w-[200px]');
+      expect(pillText.classes()).toContain('truncate');
+
+      cleanup(wrapper);
+    });
+
+    it('maintains pills after dropdown interaction', async () => {
+      useVirtualizer.mockImplementation(() => createMockedVirtualizer(20));
+
+      const wrapper = createWrapper({ selected: [4, 5] }, { multiple: true, pills: true });
+
+      const button = wrapper.find('button');
+      await button.trigger('click');
+
+      const item = wrapper.findAll('[p-select-list-option-item]')[6];
+      await item.trigger('click');
+
+      const pills = wrapper.findAll('[data-test="selected-pill"]');
+      expect(pills.length).toBe(3);
+      expect(wrapper.vm.$data.selected).toEqual([4, 5, 7]);
+
+      cleanup(wrapper);
+    });
+  });
 });

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

@@ -280,6 +280,27 @@ export const MultipleSearchable = {
   },
 };
 
+export const MultipleWithPills = {
+  render: createRenderFunction({ selectedVal: [33, 34, 36] }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Multiple selection with selected items displayed as pills in the button',
+      },
+    },
+  },
+  args: {
+    ...Default.args,
+    label: 'Multiple with pills',
+    items: items4,
+    multiple: true,
+    searchable: true,
+    pills: true,
+    placeholder: 'Select an item from the list',
+    placeholderSearch: 'Search an item...',
+  },
+};
+
 export const SelectedOnTop = {
   render: createRenderFunction({ selectedVal: [33, 34, 36] }),
   args: {

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

@@ -19,7 +19,13 @@
         v-bind="attrs"
         ref="button"
         type="button"
-        :class="['w-full', selectClasses, dropdownShow ? 'border-primary' : '']"
+        :class="[
+          'w-full',
+          selectClasses,
+          dropdownShow ? 'border-primary' : '',
+          { 'box-border h-auto items-start': multiple && pills && selectedItems.length > 0 },
+          PILL_SELECT_SPACING[size],
+        ]"
         role="button"
         aria-haspopup="listbox"
         @click="dropdownShow = !dropdownShow"
@@ -30,7 +36,27 @@
           </div>
         </slot>
         <slot v-else name="selected-item" :item="multiple ? selectedItems : selectedItems[0]">
-          <div class="truncate text-left">
+          <div v-if="multiple && pills" class="flex flex-wrap gap-1.5 pr-8">
+            <div
+              v-for="item in selectedItems"
+              :key="String(item[itemValue])"
+              class="flex items-center gap-1 rounded bg-p-gray-10 px-2 text-p-gray-50"
+              :class="[PILL_SIZE[size]]"
+              data-test="selected-pill"
+            >
+              <span class="max-w-[200px] truncate" data-test="pill-text">{{ item[itemText] }}</span>
+              <button
+                type="button"
+                class="flex items-center justify-center text-p-gray-40 hover:text-p-gray-60"
+                aria-label="Remove item"
+                data-test="pill-remove"
+                @click.stop="select($event, item[itemValue])"
+              >
+                <PIcon icon="fe:close" class="h-3.5 w-3.5" />
+              </button>
+            </div>
+          </div>
+          <div v-else class="truncate text-left">
             {{
               multiple
                 ? selectedItems.length === selectableItemsCount
@@ -43,8 +69,8 @@
         <!-- Clear selection button -->
         <button
           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]]"
+          class="absolute right-9 flex h-6 items-center justify-center text-base text-p-gray-40 hover:text-p-gray-60"
+          :class="[CLEAR_BUTTON_SPACING[size]]"
           aria-label="Clear selection"
           @click.stop="clearAll"
         >
@@ -349,6 +375,13 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * Shows selected items as pills in the button when multiple selection is enabled
+   */
+  pills: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 // Async helpers
@@ -366,9 +399,21 @@ const P_DROPDOWN_DEFAULTS = {
 };
 
 const CLEAR_BUTTON_SPACING = {
-  sm: 'right-8',
-  md: 'right-9',
-  lg: 'right-10',
+  sm: 'right-8 text-sm top-[0.3rem]',
+  md: 'right-9 text-base top-[0.5rem]',
+  lg: 'right-10 text-lg top-[0.7rem]',
+};
+
+const PILL_SIZE = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+};
+
+const PILL_SELECT_SPACING = {
+  sm: 'min-h-[2rem] py-1 bg-[position:right_1rem_top_0.7rem]',
+  md: 'min-h-[2.5rem] py-2 bg-[position:right_1rem_top_0.9rem]',
+  lg: 'min-h-[3rem] py-2 bg-[position:right_1rem_top_1.1rem]',
 };
 
 const width = ref('auto');

package/squirrel/components/p-input-search/p-input-search.vue

@@ -1,9 +1,9 @@
 <template>
   <PInput
-    ref="searchInput"
+    ref="pInput"
+    v-bind="$attrs"
     v-model="query"
     :size="size"
-    v-bind="$attrs"
     role="searchbox"
     rounded
     @focus="showEnterIconOnFocus = true"
@@ -87,7 +87,7 @@ const enterIconClasses = {
   lg: 'bg-[length:2rem_2rem] w-[2rem] h-[2rem] right-[46px] top-2',
 } as const;
 const showEnterIconOnFocus = ref(false);
-const searchInput = useTemplateRef<PInputInstance>('searchInput');
+const input = useTemplateRef<PInputInstance>('pInput');
 const query = ref(props.modelValue);
 
 // Watchers
@@ -107,7 +107,7 @@ const clearSearch = () => {
   query.value = '';
 
   requestAnimationFrame(() => {
-    searchInput.value?.$el.querySelector('input').focus();
+    input.value?.$el.querySelector('input').focus();
   });
 };
 
@@ -116,7 +116,7 @@ const keydownEnter = () => {
 };
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .enter {
   background-image: url('@squirrel/assets/keyboard-press-enter.svg');
 }