@pequity/squirrel 5.4.4 → 5.4.6

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

@@ -1,6 +1,7 @@
 "use strict";
 const vue = require("vue");
 const pDropdown = require("../p-dropdown.js");
+const pIcon_vue_vue_type_script_setup_true_lang = require("./p-icon.js");
 const pInputSearch = require("../p-input-search.js");
 const pSelectList = require("../p-select-list.js");
 const lodashEs = require("lodash-es");
@@ -124,6 +125,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       type: Boolean,
       default: false
     },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Enables multiple selection
      */
@@ -151,6 +156,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     selectedTopShown: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Specify the key in the object to be used as item disabled prop.
+     */
+    disabledBy: {
+      type: String,
+      default: "disabled"
     }
   },
   emits: ["update:modelValue", "select"],
@@ -167,6 +179,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       noAutoFocus: true,
       enableArrowNavigation: false
     };
+    const CLEAR_BUTTON_SPACING = {
+      sm: "right-8",
+      md: "right-9",
+      lg: "right-10"
+    };
     const width = vue.ref("auto");
     const listItemStyle = vue.ref({ paddingTop: 0, paddingBottom: 0 });
     const dropdownShow = vue.ref(false);
@@ -181,6 +198,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const {
       LIST_ITEM_CLASS,
       LIST_ITEM_ACTIVE_CLASS,
+      LIST_ITEM_DISABLED_CLASS,
       selectedItems,
       computedItems,
       computedItemSize,
@@ -192,6 +210,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       getValue,
       getText,
       isSelected,
+      isDisabled,
       setupNavigationSvc,
       destroyNavigationSvc,
       select,
@@ -288,18 +307,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       class: vue.normalizeClass([
                         vue.unref(selectedItems).length !== vue.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) => vue.unref(selectAll) && vue.unref(selectAll)(...args))
                     }, " Select all ", 2)) : (vue.openBlock(), vue.createElementBlock("a", {
                       key: 1,
                       class: vue.normalizeClass([vue.unref(computedInsideSelected) ? "pointer-events-none opacity-50" : "cursor-pointer"]),
-                      onClick: _cache[2] || (_cache[2] = //@ts-ignore
+                      onClick: _cache[3] || (_cache[3] = //@ts-ignore
                       (...args) => vue.unref(selectAll) && vue.unref(selectAll)(...args))
                     }, " Select all filtered ", 2)),
-                    _cache[6] || (_cache[6] = vue.createElementVNode("span", { class: "px-1 leading-none" }, ".", -1)),
+                    _cache[7] || (_cache[7] = vue.createElementVNode("span", { class: "px-1 leading-none" }, ".", -1)),
                     vue.createElementVNode("a", {
                       class: vue.normalizeClass([vue.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) => vue.unref(clearAll) && vue.unref(clearAll)(...args))
                     }, " Clear all ", 2)
                   ])
@@ -312,7 +331,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     ref_key: "inputSearch",
                     ref: inputSearch,
                     modelValue: vue.unref(search),
-                    "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => vue.isRef(search) ? search.value = $event : null),
+                    "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => vue.isRef(search) ? search.value = $event : null),
                     size: __props.size,
                     placeholder: __props.placeholderSearch
                   }, null, 8, ["modelValue", "size", "placeholder"])
@@ -328,7 +347,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   class: "relative w-full",
                   "p-select-list-options": "",
                   style: vue.normalizeStyle({ height: `${vue.unref(rowVirtualizer).getTotalSize()}px` }),
-                  onMousemove: _cache[5] || (_cache[5] = //@ts-ignore
+                  onMousemove: _cache[6] || (_cache[6] = //@ts-ignore
                   (...args) => vue.unref(onMousemove) && vue.unref(onMousemove)(...args))
                 }, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rowVirtualizer).getVirtualItems(), (row) => {
@@ -340,7 +359,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       style: vue.normalizeStyle({ height: `${row.size}px`, transform: `translateY(${row.start}px)` })
                     }, [
                       vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-                        class: vue.normalizeClass([vue.unref(LIST_ITEM_CLASS), { [vue.unref(LIST_ITEM_ACTIVE_CLASS)]: vue.unref(isSelected)(vue.unref(getValue)(row.index)) }]),
+                        class: vue.normalizeClass([
+                          vue.unref(LIST_ITEM_CLASS),
+                          {
+                            [vue.unref(LIST_ITEM_ACTIVE_CLASS)]: vue.unref(isSelected)(vue.unref(getValue)(row.index)),
+                            [vue.unref(LIST_ITEM_DISABLED_CLASS)]: vue.unref(isDisabled)(vue.unref(computedItems)[row.index])
+                          }
+                        ]),
                         "p-select-list-option-item": "",
                         style: vue.normalizeStyle(listItemStyle.value),
                         onClick: ($event) => vue.unref(select)($event, vue.unref(getValue)(row.index))
@@ -388,14 +413,26 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               class: ["w-full", vue.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)
             }), [
               !vue.unref(internalValue).length || !vue.unref(selectedItems).length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(__props.placeholder || " "), 1)) : vue.renderSlot(_ctx.$slots, "selected-item", {
                 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 > 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", {
+                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",
+                onClick: _cache[0] || (_cache[0] = vue.withModifiers(
+                  //@ts-ignore
+                  (...args) => vue.unref(clearAll) && vue.unref(clearAll)(...args),
+                  ["stop"]
+                ))
+              }, [
+                vue.createVNode(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, { icon: "fe:close" })
+              ], 2)) : vue.createCommentVNode("", true)
             ], 16)
           ]),
           _: 3