@pequity/squirrel 5.4.5 → 5.4.7

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

@@ -1,5 +1,6 @@
-import { defineComponent, ref, useAttrs, computed, watch, onMounted, onUnmounted, resolveDirective, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, toDisplayString, createCommentVNode, createVNode, mergeProps, withCtx, createElementVNode, isRef, Fragment, renderList, withDirectives, renderSlot, vShow } from "vue";
+import { defineComponent, ref, useAttrs, computed, watch, onMounted, onUnmounted, resolveDirective, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, toDisplayString, createCommentVNode, createVNode, mergeProps, withCtx, createElementVNode, isRef, Fragment, renderList, withDirectives, renderSlot, withModifiers, 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";
 import { SIZES } from "../p-select-list.js";
 import { omit } from "lodash-es";
@@ -123,6 +124,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: false
     },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Enables multiple selection
      */
@@ -173,6 +178,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       noAutoFocus: true,
       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);
@@ -296,18 +306,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       class: normalizeClass([
                         unref(selectedItems).length !== unref(internalItems).length ? "cursor-pointer" : "pointer-events-none opacity-50"
                       ]),
-                      onClick: _cache[1] || (_cache[1] = //@ts-ignore
+                      onClick: _cache[2] || (_cache[2] = //@ts-ignore
                       (...args) => unref(selectAll) && unref(selectAll)(...args))
                     }, " Select all ", 2)) : (openBlock(), createElementBlock("a", {
                       key: 1,
                       class: normalizeClass([unref(computedInsideSelected) ? "pointer-events-none opacity-50" : "cursor-pointer"]),
-                      onClick: _cache[2] || (_cache[2] = //@ts-ignore
+                      onClick: _cache[3] || (_cache[3] = //@ts-ignore
                       (...args) => unref(selectAll) && unref(selectAll)(...args))
                     }, " Select all filtered ", 2)),
-                    _cache[6] || (_cache[6] = createElementVNode("span", { class: "px-1 leading-none" }, ".", -1)),
+                    _cache[7] || (_cache[7] = createElementVNode("span", { class: "px-1 leading-none" }, ".", -1)),
                     createElementVNode("a", {
                       class: normalizeClass([unref(selectedItems).length ? "cursor-pointer" : "pointer-events-none opacity-50"]),
-                      onClick: _cache[3] || (_cache[3] = //@ts-ignore
+                      onClick: _cache[4] || (_cache[4] = //@ts-ignore
                       (...args) => unref(clearAll) && unref(clearAll)(...args))
                     }, " Clear all ", 2)
                   ])
@@ -320,7 +330,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ref_key: "inputSearch",
                     ref: inputSearch,
                     modelValue: unref(search),
-                    "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(search) ? search.value = $event : null),
+                    "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => isRef(search) ? search.value = $event : null),
                     size: __props.size,
                     placeholder: __props.placeholderSearch
                   }, null, 8, ["modelValue", "size", "placeholder"])
@@ -336,7 +346,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   class: "relative w-full",
                   "p-select-list-options": "",
                   style: normalizeStyle({ height: `${unref(rowVirtualizer).getTotalSize()}px` }),
-                  onMousemove: _cache[5] || (_cache[5] = //@ts-ignore
+                  onMousemove: _cache[6] || (_cache[6] = //@ts-ignore
                   (...args) => unref(onMousemove) && unref(onMousemove)(...args))
                 }, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rowVirtualizer).getVirtualItems(), (row) => {
@@ -402,14 +412,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               class: ["w-full", unref(selectClasses), dropdownShow.value ? "border-primary" : ""],
               role: "button",
               "aria-haspopup": "listbox",
-              onClick: _cache[0] || (_cache[0] = ($event) => dropdownShow.value = !dropdownShow.value)
+              onClick: _cache[1] || (_cache[1] = ($event) => dropdownShow.value = !dropdownShow.value)
             }), [
               !unref(internalValue).length || !unref(selectedItems).length ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.placeholder || " "), 1)) : renderSlot(_ctx.$slots, "selected-item", {
                 key: 1,
                 item: __props.multiple ? unref(selectedItems) : unref(selectedItems)[0]
               }, () => [
                 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", {
+                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",
+                onClick: _cache[0] || (_cache[0] = withModifiers(
+                  //@ts-ignore
+                  (...args) => unref(clearAll) && unref(clearAll)(...args),
+                  ["stop"]
+                ))
+              }, [
+                createVNode(_sfc_main$1, { icon: "fe:close" })
+              ], 2)) : createCommentVNode("", true)
             ], 16)
           ]),
           _: 3