@volverjs/ui-vue 0.0.9 → 0.0.10-beta.10

package/dist/components/VvCombobox/VvCombobox.es.js

@@ -1,7 +1,7 @@
 import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, provide, h, Fragment, useAttrs, onMounted, watch, nextTick, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, toHandlers, withDirectives, createElementVNode, normalizeStyle, normalizeClass, vShow, createTextVNode, toDisplayString, isRef, useSlots, renderList, vModelSelect, createSlots, resolveDynamicComponent, toRef, withModifiers, vModelText } from "vue";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
-import { nanoid } from "nanoid";
+import { uid } from "uid";
 import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import mitt from "mitt";
 import { get } from "ts-dot-prop";
@@ -158,6 +158,12 @@ const ActiveProps = {
    */
   active: Boolean
 };
+const CurrentProps = {
+  /**
+   * Whether the item is current
+   */
+  current: Boolean
+};
 const PressedProps = {
   /**
    * Whether the item is pressed
@@ -367,6 +373,7 @@ const ActionProps = {
   ...LabelProps,
   ...PressedProps,
   ...ActiveProps,
+  ...CurrentProps,
   ...LinkProps,
   /**
    * Button type
@@ -382,10 +389,21 @@ const ActionProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
   }
 };
 const VvComboboxEvents = [
   "update:modelValue",
+  "update:search",
+  /**
+   * @deprecated change:search should not be used, use update:search instead
+   */
   "change:search",
   "focus",
   "blur"
@@ -745,7 +763,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         color: _ctx.color,
         onLoad: _ctx.onLoad,
         icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("", true);
+      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
     };
   }
 });
@@ -776,7 +794,7 @@ const VvDropdownProps = {
     validator: (value) => Object.values(DropdownRole).includes(value)
   }
 };
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
 function useProvideDropdownTrigger({
   reference,
   id,
@@ -1186,50 +1204,70 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(unref(VvDropdownTriggerProvider), null, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ init, show, hide, toggle, expanded: unref(expanded), aria: unref(referenceAria) })))
-          ]),
-          _: 3
-        }),
-        createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers)), {
-          default: withCtx(() => [
-            withDirectives(createElementVNode("div", {
-              ref_key: "floatingEl",
-              ref: floatingEl,
-              style: normalizeStyle(unref(dropdownPlacement)),
-              class: normalizeClass(unref(bemCssClasses))
-            }, [
-              props.arrow ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                ref_key: "arrowEl",
-                ref: arrowEl,
-                style: normalizeStyle(unref(arrowPlacement)),
-                class: "vv-dropdown__arrow"
-              }, null, 4)) : createCommentVNode("", true),
-              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
-              createElementVNode("div", mergeProps(unref(attrs), {
-                id: unref(hasId),
-                ref_key: "listEl",
-                ref: listEl,
-                tabindex: !unref(expanded) ? -1 : void 0,
-                role: unref(role),
-                "aria-labelledby": unref(hasAriaLabelledby),
-                class: "vv-dropdown__list"
-              }), [
-                renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
-                  role: unref(itemRole)
-                })))
-              ], 16, _hoisted_1$5),
-              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
-            ], 6), [
-              [vShow, unref(expanded)]
-            ])
-          ]),
-          _: 3
-        }, 16, ["name"])
-      ], 64);
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          createVNode(unref(VvDropdownTriggerProvider), null, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ init, show, hide, toggle, expanded: unref(expanded), aria: unref(referenceAria) })))
+            ]),
+            _: 3
+            /* FORWARDED */
+          }),
+          createVNode(Transition, mergeProps({ name: _ctx.transitionName }, toHandlers(dropdownTransitionHandlers), { persisted: "" }), {
+            default: withCtx(() => [
+              withDirectives(createElementVNode(
+                "div",
+                {
+                  ref_key: "floatingEl",
+                  ref: floatingEl,
+                  style: normalizeStyle(unref(dropdownPlacement)),
+                  class: normalizeClass(unref(bemCssClasses))
+                },
+                [
+                  props.arrow ? (openBlock(), createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      ref_key: "arrowEl",
+                      ref: arrowEl,
+                      style: normalizeStyle(unref(arrowPlacement)),
+                      class: "vv-dropdown__arrow"
+                    },
+                    null,
+                    4
+                    /* STYLE */
+                  )) : createCommentVNode("v-if", true),
+                  renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps({ expanded: unref(expanded) }))),
+                  createElementVNode("div", mergeProps(unref(attrs), {
+                    id: unref(hasId),
+                    ref_key: "listEl",
+                    ref: listEl,
+                    tabindex: !unref(expanded) ? -1 : void 0,
+                    role: unref(role),
+                    "aria-labelledby": unref(hasAriaLabelledby),
+                    class: "vv-dropdown__list"
+                  }), [
+                    renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
+                      role: unref(itemRole)
+                    })))
+                  ], 16, _hoisted_1$5),
+                  renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
+                ],
+                6
+                /* CLASS, STYLE */
+              ), [
+                [vShow, unref(expanded)]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["name"])
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
     };
   }
 });
@@ -1260,13 +1298,19 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({ role: unref(role) }, {
-        ref_key: "element",
-        ref: element,
-        class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
-      }), [
-        renderSlot(_ctx.$slots, "default")
-      ], 16);
+      return openBlock(), createElementBlock(
+        "div",
+        mergeProps({ role: unref(role) }, {
+          ref_key: "element",
+          ref: element,
+          class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
+        }),
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        16
+        /* FULL_PROPS */
+      );
     };
   }
 });
@@ -1325,11 +1369,16 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             title: unref(hintLabel)
           }, [
             renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
-              createTextVNode(toDisplayString(unref(hintLabel)), 1)
+              createTextVNode(
+                toDisplayString(unref(hintLabel)),
+                1
+                /* TEXT */
+              )
             ])
           ], 8, _hoisted_1$4)
         ]),
         _: 3
+        /* FORWARDED */
       }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]);
     };
   }
@@ -1350,15 +1399,21 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", _hoisted_1$3, toDisplayString(props.label), 1);
+      return openBlock(), createElementBlock(
+        "li",
+        _hoisted_1$3,
+        toDisplayString(props.label),
+        1
+        /* TEXT */
+      );
     };
   }
 });
 function equals(obj1, obj2, field) {
-  if (field)
+  if (field) {
     return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
-  else
-    return deepEquals(obj1, obj2);
+  }
+  return deepEquals(obj1, obj2);
 }
 function deepEquals(a, b) {
   if (a === b)
@@ -1737,7 +1792,7 @@ function useOptions(props) {
       return option;
     return typeof valueKey.value === "function" ? valueKey.value(option) : get(option, valueKey.value);
   };
-  const getOptionDisabled = (option) => {
+  const isOptionDisabled = (option) => {
     if (typeof option !== "object" && option !== null)
       return false;
     return typeof disabledKey.value === "function" ? disabledKey.value(option) : get(option, disabledKey.value);
@@ -1751,7 +1806,7 @@ function useOptions(props) {
     options,
     getOptionLabel,
     getOptionValue,
-    getOptionDisabled,
+    isOptionDisabled,
     getOptionGrouped
   };
 }
@@ -1872,7 +1927,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const {
       getOptionLabel,
       getOptionValue,
-      getOptionDisabled,
+      isOptionDisabled,
       getOptionGrouped
     } = useOptions(props);
     const localModelValue = computed({
@@ -1892,101 +1947,140 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       return option && option.options && option.options.length > 0;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        _ctx.label ? (openBlock(), createElementBlock("label", {
-          key: 0,
-          for: unref(hasId)
-        }, toDisplayString(_ctx.label), 9, _hoisted_1$2)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$2, [
-          _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-            renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4$1, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
-              key: 0,
-              class: "vv-select__icon"
-            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
-            withDirectives(createElementVNode("select", mergeProps({
-              id: unref(hasId),
-              ref_key: "select",
-              ref: select,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
-            }, unref(hasAttrs)), [
-              _ctx.placeholder ? (openBlock(), createElementBlock("option", {
-                key: 0,
-                value: void 0,
-                disabled: !_ctx.unselectable,
-                hidden: !_ctx.unselectable
-              }, toDisplayString(_ctx.placeholder), 9, _hoisted_6$1)) : createCommentVNode("", true),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
-                return openBlock(), createElementBlock(Fragment, null, [
-                  !isGroup(option) ? (openBlock(), createElementBlock("option", {
-                    key: index,
-                    disabled: unref(getOptionDisabled)(option),
-                    value: unref(getOptionValue)(option)
-                  }, toDisplayString(unref(getOptionLabel)(option)), 9, _hoisted_7$1)) : (openBlock(), createElementBlock("optgroup", {
-                    key: `group-${index}`,
-                    disabled: unref(getOptionDisabled)(option),
-                    label: unref(getOptionLabel)(option)
-                  }, [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(option), (item, i) => {
-                      return openBlock(), createElementBlock("option", {
-                        key: `group-${index}-item-${i}`,
-                        disabled: unref(getOptionDisabled)(item),
-                        value: unref(getOptionValue)(item)
-                      }, toDisplayString(unref(getOptionLabel)(item)), 9, _hoisted_9$1);
-                    }), 128))
-                  ], 8, _hoisted_8$1))
-                ], 64);
-              }), 256))
-            ], 16, _hoisted_5$1), [
-              [vModelSelect, unref(localModelValue)]
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          _ctx.label ? (openBlock(), createElementBlock("label", {
+            key: 0,
+            for: unref(hasId)
+          }, toDisplayString(_ctx.label), 9, _hoisted_1$2)) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_2$2, [
+            _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true),
+            createElementVNode("div", _hoisted_4$1, [
+              unref(hasIconBefore) ? (openBlock(), createBlock(
+                _sfc_main$9,
+                mergeProps({
+                  key: 0,
+                  class: "vv-select__icon"
+                }, unref(hasIcon)),
+                null,
+                16
+                /* FULL_PROPS */
+              )) : createCommentVNode("v-if", true),
+              withDirectives(createElementVNode("select", mergeProps({
+                id: unref(hasId),
+                ref_key: "select",
+                ref: select,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
+              }, unref(hasAttrs)), [
+                _ctx.placeholder ? (openBlock(), createElementBlock("option", {
+                  key: 0,
+                  value: void 0,
+                  disabled: !_ctx.unselectable,
+                  hidden: !_ctx.unselectable
+                }, toDisplayString(_ctx.placeholder), 9, _hoisted_6$1)) : createCommentVNode("v-if", true),
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(_ctx.options, (option, index) => {
+                    return openBlock(), createElementBlock(
+                      Fragment,
+                      null,
+                      [
+                        !isGroup(option) ? (openBlock(), createElementBlock("option", {
+                          key: index,
+                          disabled: unref(isOptionDisabled)(option),
+                          value: unref(getOptionValue)(option)
+                        }, toDisplayString(unref(getOptionLabel)(option)), 9, _hoisted_7$1)) : (openBlock(), createElementBlock("optgroup", {
+                          key: `group-${index}`,
+                          disabled: unref(isOptionDisabled)(option),
+                          label: unref(getOptionLabel)(option)
+                        }, [
+                          (openBlock(true), createElementBlock(
+                            Fragment,
+                            null,
+                            renderList(unref(getOptionGrouped)(option), (item, i) => {
+                              return openBlock(), createElementBlock("option", {
+                                key: `group-${index}-item-${i}`,
+                                disabled: unref(isOptionDisabled)(item),
+                                value: unref(getOptionValue)(item)
+                              }, toDisplayString(unref(getOptionLabel)(item)), 9, _hoisted_9$1);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ], 8, _hoisted_8$1))
+                      ],
+                      64
+                      /* STABLE_FRAGMENT */
+                    );
+                  }),
+                  256
+                  /* UNKEYED_FRAGMENT */
+                ))
+              ], 16, _hoisted_5$1), [
+                [vModelSelect, unref(localModelValue)]
+              ]),
+              unref(hasIconAfter) ? (openBlock(), createBlock(
+                _sfc_main$9,
+                mergeProps({
+                  key: 1,
+                  class: "vv-select__icon vv-select__icon-after"
+                }, unref(hasIcon)),
+                null,
+                16
+                /* FULL_PROPS */
+              )) : createCommentVNode("v-if", true)
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
-              key: 1,
-              class: "vv-select__icon vv-select__icon-after"
-            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
+            _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_10, [
+              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true)
           ]),
-          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_10, [
-            renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
-          ])) : createCommentVNode("", true)
-        ]),
-        createVNode(unref(HintSlot), {
-          id: unref(hasHintId),
-          class: "vv-select__hint"
-        }, createSlots({ _: 2 }, [
-          _ctx.$slots.hint ? {
-            name: "hint",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots.loading ? {
-            name: "loading",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "1"
-          } : void 0,
-          _ctx.$slots.valid ? {
-            name: "valid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "2"
-          } : void 0,
-          _ctx.$slots.invalid ? {
-            name: "invalid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "3"
-          } : void 0
-        ]), 1032, ["id"])
-      ], 2);
+          createVNode(unref(HintSlot), {
+            id: unref(hasHintId),
+            class: "vv-select__hint"
+          }, createSlots({
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots.hint ? {
+              name: "hint",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots.loading ? {
+              name: "loading",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots.valid ? {
+              name: "valid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "2"
+            } : void 0,
+            _ctx.$slots.invalid ? {
+              name: "invalid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1032, ["id"])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
@@ -2005,14 +2099,24 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const { modifiers } = toRefs(props);
     const bemCssClasses = useModifiers("vv-badge", modifiers);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        class: normalizeClass(unref(bemCssClasses)),
-        role: "status"
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, () => [
-          createTextVNode(toDisplayString(_ctx.value), 1)
-        ])
-      ], 2);
+      return openBlock(), createElementBlock(
+        "span",
+        {
+          class: normalizeClass(unref(bemCssClasses)),
+          role: "status"
+        },
+        [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(
+              toDisplayString(_ctx.value),
+              1
+              /* TEXT */
+            )
+          ])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });
@@ -2057,7 +2161,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         case props.href !== void 0:
           return ActionTag.a;
         default:
-          return ActionTag.button;
+          return props.defaultTag;
       }
     });
     const hasProps = computed(() => {
@@ -2082,12 +2186,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             to: props.to,
             target: props.target
           };
-        default:
+        case ActionTag.button:
           return {
             ...toReturn,
             type: props.type,
             disabled: props.disabled
           };
+        default:
+          return toReturn;
       }
     });
     const onClick = (e) => {
@@ -2113,7 +2219,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         class: {
           active: _ctx.active,
           pressed: unref(pressed),
-          disabled: _ctx.disabled
+          disabled: _ctx.disabled,
+          current: _ctx.current
         },
         onClickPassive: onClick,
         onMouseoverPassive: onMouseover,
@@ -2121,10 +2228,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
-            createTextVNode(toDisplayString(_ctx.label), 1)
+            createTextVNode(
+              toDisplayString(_ctx.label),
+              1
+              /* TEXT */
+            )
           ])
         ]),
         _: 3
+        /* FORWARDED */
       }, 16, ["class"]);
     };
   }
@@ -2379,24 +2491,47 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 key: 0,
                 class: "vv-button__loading-icon",
                 name: _ctx.loadingIcon
-              }, null, 8, ["name"])) : createCommentVNode("", true),
-              _ctx.loadingLabel ? (openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(_ctx.loadingLabel), 1)) : createCommentVNode("", true)
-            ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-              renderSlot(_ctx.$slots, "before"),
-              unref(icon) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
-                key: 0,
-                class: "vv-button__icon"
-              }, unref(hasIconProps)), null, 16)) : createCommentVNode("", true),
-              unref(label) ? (openBlock(), createElementBlock("span", _hoisted_2$1, [
-                renderSlot(_ctx.$slots, "label", {}, () => [
-                  createTextVNode(toDisplayString(unref(label)), 1)
-                ])
-              ])) : createCommentVNode("", true),
-              renderSlot(_ctx.$slots, "after")
-            ], 64))
+              }, null, 8, ["name"])) : createCommentVNode("v-if", true),
+              _ctx.loadingLabel ? (openBlock(), createElementBlock(
+                "span",
+                _hoisted_1$1,
+                toDisplayString(_ctx.loadingLabel),
+                1
+                /* TEXT */
+              )) : createCommentVNode("v-if", true)
+            ]) : (openBlock(), createElementBlock(
+              Fragment,
+              { key: 1 },
+              [
+                renderSlot(_ctx.$slots, "before"),
+                unref(icon) ? (openBlock(), createBlock(
+                  _sfc_main$9,
+                  mergeProps({
+                    key: 0,
+                    class: "vv-button__icon"
+                  }, unref(hasIconProps)),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                )) : createCommentVNode("v-if", true),
+                unref(label) ? (openBlock(), createElementBlock("span", _hoisted_2$1, [
+                  renderSlot(_ctx.$slots, "label", {}, () => [
+                    createTextVNode(
+                      toDisplayString(unref(label)),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ])) : createCommentVNode("v-if", true),
+                renderSlot(_ctx.$slots, "after")
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            ))
           ])
         ]),
         _: 3
+        /* FORWARDED */
       }, 16, ["id", "class"]);
     };
   }
@@ -2479,10 +2614,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       searchText,
       computed(() => Number(props.debounceSearch))
     );
-    watch(
-      debouncedSearchText,
-      () => emit("change:search", debouncedSearchText.value)
-    );
+    watch(debouncedSearchText, () => {
+      emit("update:search", debouncedSearchText.value);
+      emit("change:search", debouncedSearchText.value);
+    });
     const expanded = ref(false);
     const toggleExpanded = () => {
       if (props.disabled || props.readonly)
@@ -2553,7 +2688,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         valid: valid.value,
         invalid: invalid.value,
         dirty: isDirty.value,
-        focus: focused.value,
+        focus: focused.value || focusedWithin.value || expanded.value,
         floating: floating.value,
         badges: props.badges
       }))
@@ -2561,8 +2696,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const {
       getOptionLabel,
       getOptionValue,
-      getOptionDisabled,
-      getOptionGrouped
+      getOptionGrouped,
+      isOptionDisabled
     } = useOptions(props);
     const filteredOptions = computedAsync(async () => {
       var _a;
@@ -2581,19 +2716,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return getOptionLabel(option).toLowerCase().includes(debouncedSearchText.value.toLowerCase().trim());
       });
     });
-    function getOptionSelected(option) {
+    function isOptionSelected(option) {
       if (Array.isArray(props.modelValue)) {
         return contains(option, props.modelValue) || contains(getOptionValue(option), props.modelValue);
       }
       return equals(option, props.modelValue) || equals(getOptionValue(option), props.modelValue);
     }
     const selectedOptions = computed(() => {
-      let selectedValues = [];
-      if (Array.isArray(props.modelValue)) {
-        selectedValues = props.modelValue;
-      } else if (props.modelValue) {
-        selectedValues = [props.modelValue];
-      }
       const options = props.options.reduce(
         (acc, value) => {
           if (isGroup(value)) {
@@ -2604,12 +2733,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         []
       );
       return options.filter((option) => {
-        if (isGroup(option)) {
-          return getOptionGrouped(option).some(
-            (item) => selectedValues.includes(getOptionValue(item))
-          );
-        }
-        return selectedValues.includes(getOptionValue(option));
+        return isOptionSelected(option);
       });
     });
     const hasValue = computed(() => {
@@ -2641,7 +2765,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (!props.keepOpen) {
           collapse();
         }
-        if (props.unselectable && value === props.modelValue) {
+        if (Array.isArray(props.modelValue)) {
+          if (props.unselectable && props.modelValue.includes(value)) {
+            toReturn = [];
+          } else {
+            toReturn = [value];
+          }
+        } else if (props.unselectable && value === props.modelValue) {
           toReturn = void 0;
         }
       }
@@ -2717,208 +2847,307 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           key: 0,
           id: unref(hasLabelId),
           for: unref(propsDefaults).searchable ? unref(hasSearchId) : void 0
-        }, toDisplayString(_ctx.label), 9, _hoisted_2)) : createCommentVNode("", true),
-        createElementVNode("div", {
-          ref_key: "wrapperEl",
-          ref: wrapperEl,
-          class: "vv-select__wrapper"
-        }, [
-          createVNode(_sfc_main$8, mergeProps({
-            ref_key: "dropdownEl",
-            ref: dropdownEl,
-            modelValue: unref(expanded),
-            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(expanded) ? expanded.value = $event : null)
-          }, unref(dropdownProps), {
-            role: unref(DropdownRole).listbox,
-            onAfterExpand,
-            onAfterCollapse
-          }), createSlots({
-            default: withCtx(({ aria }) => [
-              _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4, [
-                renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
-              ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_5, [
-                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
-                  key: 0,
-                  class: "vv-select__icon"
-                }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
-                createElementVNode("div", mergeProps({
-                  ref_key: "inputEl",
-                  ref: inputEl
-                }, aria, {
-                  class: "vv-select__input",
-                  role: "combobox",
-                  "aria-expanded": unref(expanded),
-                  "aria-labelledby": unref(hasLabelId),
-                  "aria-describedby": unref(hasHintLabelOrSlot) ? unref(hasHintId) : void 0,
-                  "aria-errormessage": unref(hasInvalidLabelOrSlot) ? unref(hasHintId) : void 0,
-                  tabindex: unref(hasTabindex),
-                  onClickPassive: onClickInput
-                }), [
-                  renderSlot(_ctx.$slots, "value", normalizeProps(guardReactiveProps({ selectedOptions: unref(selectedOptions), onInput })), () => [
-                    unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      !_ctx.badges ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(unref(hasValue)), 1)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(selectedOptions), (option, index) => {
-                        return openBlock(), createBlock(_sfc_main$3, {
-                          key: index,
-                          modifiers: _ctx.badgeModifiers,
-                          class: "vv-select__badge"
-                        }, {
-                          default: withCtx(() => [
-                            createTextVNode(toDisplayString(unref(getOptionLabel)(option)) + " ", 1),
-                            _ctx.unselectable && !unref(readonly) && !unref(disabled) ? (openBlock(), createElementBlock("button", {
-                              key: 0,
-                              "aria-label": unref(propsDefaults).deselectActionLabel,
-                              type: "button",
-                              onClick: withModifiers(($event) => onInput(option), ["stop"])
-                            }, [
-                              createVNode(_sfc_main$9, { name: "close" })
-                            ], 8, _hoisted_8)) : createCommentVNode("", true)
-                          ]),
-                          _: 2
-                        }, 1032, ["modifiers"]);
-                      }), 128))
-                    ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                      createTextVNode(toDisplayString(_ctx.placeholder), 1)
-                    ], 64))
-                  ])
-                ], 16, _hoisted_6),
-                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
-                  key: 1,
-                  class: "vv-select__icon vv-select__icon-after"
-                }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
-              ]),
-              _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_9, [
-                renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
-              ])) : createCommentVNode("", true)
-            ]),
-            items: withCtx(() => {
-              var _a;
-              return [
-                !unref(disabled) && ((_a = unref(filteredOptions)) == null ? void 0 : _a.length) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
-                  return openBlock(), createElementBlock(Fragment, { key: index }, [
-                    isGroup(option) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      createVNode(_sfc_main$5, {
-                        label: unref(getOptionLabel)(option)
-                      }, null, 8, ["label"]),
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(
-                        option
-                      ), (item, i) => {
-                        return openBlock(), createBlock(_sfc_main$6, mergeProps({
-                          disabled: unref(getOptionDisabled)(item),
-                          selected: getOptionSelected(item),
-                          unselectable: _ctx.unselectable,
-                          deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                          selectHintLabel: unref(propsDefaults).selectHintLabel,
-                          selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                        }, {
-                          key: i,
-                          class: "vv-dropdown-option",
-                          onClickPassive: ($event) => onInput(item)
-                        }), {
-                          default: withCtx(() => [
-                            renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                              option,
-                              selectedOptions: unref(selectedOptions),
-                              selected: getOptionSelected(item),
-                              disabled: unref(getOptionDisabled)(item)
-                            })), () => [
-                              createTextVNode(toDisplayString(unref(getOptionLabel)(item)), 1)
-                            ])
-                          ]),
-                          _: 2
-                        }, 1040, ["onClickPassive"]);
-                      }), 128))
-                    ], 64)) : (openBlock(), createBlock(_sfc_main$6, mergeProps({ key: 1 }, {
-                      disabled: unref(getOptionDisabled)(option),
-                      selected: getOptionSelected(option),
-                      unselectable: _ctx.unselectable,
-                      deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                      selectHintLabel: unref(propsDefaults).selectHintLabel,
-                      selectedHintLabel: unref(propsDefaults).selectedHintLabel
-                    }, {
-                      class: "vv-dropdown-option",
-                      onClickPassive: ($event) => onInput(option)
-                    }), {
-                      default: withCtx(() => [
-                        renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
-                          option,
-                          selectedOptions: unref(selectedOptions),
-                          selected: getOptionSelected(option),
-                          disabled: unref(getOptionDisabled)(option)
-                        })), () => [
-                          createTextVNode(toDisplayString(unref(getOptionLabel)(option)), 1)
-                        ])
-                      ]),
-                      _: 2
-                    }, 1040, ["onClickPassive"]))
-                  ], 64);
-                }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$6, {
-                  key: 1,
-                  modifiers: "inert"
-                }, {
-                  default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "no-options", {}, () => [
-                      createTextVNode(toDisplayString(unref(propsDefaults).noOptionsLabel), 1)
-                    ])
-                  ]),
-                  _: 3
-                })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$6, {
-                  key: 2,
-                  modifiers: "inert"
-                }, {
-                  default: withCtx(() => [
-                    renderSlot(_ctx.$slots, "no-results", {}, () => [
-                      createTextVNode(toDisplayString(unref(propsDefaults).noResultsLabel), 1)
+        }, toDisplayString(_ctx.label), 9, _hoisted_2)) : createCommentVNode("v-if", true),
+        createElementVNode(
+          "div",
+          {
+            ref_key: "wrapperEl",
+            ref: wrapperEl,
+            class: "vv-select__wrapper"
+          },
+          [
+            createVNode(_sfc_main$8, mergeProps({
+              ref_key: "dropdownEl",
+              ref: dropdownEl,
+              modelValue: unref(expanded),
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(expanded) ? expanded.value = $event : null)
+            }, unref(dropdownProps), {
+              role: unref(DropdownRole).listbox,
+              onAfterExpand,
+              onAfterCollapse
+            }), createSlots({
+              default: withCtx(({ aria }) => [
+                _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                  renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+                ])) : createCommentVNode("v-if", true),
+                createElementVNode("div", _hoisted_5, [
+                  unref(hasIconBefore) ? (openBlock(), createBlock(
+                    _sfc_main$9,
+                    mergeProps({
+                      key: 0,
+                      class: "vv-select__icon"
+                    }, unref(hasIcon)),
+                    null,
+                    16
+                    /* FULL_PROPS */
+                  )) : createCommentVNode("v-if", true),
+                  createElementVNode("div", mergeProps({
+                    ref_key: "inputEl",
+                    ref: inputEl
+                  }, aria, {
+                    class: "vv-select__input",
+                    role: "combobox",
+                    "aria-expanded": unref(expanded),
+                    "aria-labelledby": unref(hasLabelId),
+                    "aria-describedby": unref(hasHintLabelOrSlot) ? unref(hasHintId) : void 0,
+                    "aria-errormessage": unref(hasInvalidLabelOrSlot) ? unref(hasHintId) : void 0,
+                    tabindex: unref(hasTabindex),
+                    onClickPassive: onClickInput
+                  }), [
+                    renderSlot(_ctx.$slots, "value", normalizeProps(guardReactiveProps({ selectedOptions: unref(selectedOptions), onInput })), () => [
+                      unref(hasValue) ? (openBlock(), createElementBlock(
+                        Fragment,
+                        { key: 0 },
+                        [
+                          !_ctx.badges ? (openBlock(), createElementBlock(
+                            "div",
+                            _hoisted_7,
+                            toDisplayString(unref(hasValue)),
+                            1
+                            /* TEXT */
+                          )) : (openBlock(true), createElementBlock(
+                            Fragment,
+                            { key: 1 },
+                            renderList(unref(selectedOptions), (option, index) => {
+                              return openBlock(), createBlock(_sfc_main$3, {
+                                key: index,
+                                modifiers: _ctx.badgeModifiers,
+                                class: "vv-select__badge"
+                              }, {
+                                default: withCtx(() => [
+                                  createTextVNode(
+                                    toDisplayString(unref(getOptionLabel)(option)) + " ",
+                                    1
+                                    /* TEXT */
+                                  ),
+                                  _ctx.unselectable && !unref(readonly) && !unref(disabled) ? (openBlock(), createElementBlock("button", {
+                                    key: 0,
+                                    "aria-label": unref(propsDefaults).deselectActionLabel,
+                                    type: "button",
+                                    onClick: withModifiers(($event) => onInput(option), ["stop"])
+                                  }, [
+                                    createVNode(_sfc_main$9, { name: "close" })
+                                  ], 8, _hoisted_8)) : createCommentVNode("v-if", true)
+                                ]),
+                                _: 2
+                                /* DYNAMIC */
+                              }, 1032, ["modifiers"]);
+                            }),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      )) : (openBlock(), createElementBlock(
+                        Fragment,
+                        { key: 1 },
+                        [
+                          createTextVNode(
+                            toDisplayString(_ctx.placeholder),
+                            1
+                            /* TEXT */
+                          )
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      ))
                     ])
-                  ]),
-                  _: 3
-                })) : createCommentVNode("", true)
-              ];
-            }),
-            after: withCtx(() => [
-              renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
+                  ], 16, _hoisted_6),
+                  unref(hasIconAfter) ? (openBlock(), createBlock(
+                    _sfc_main$9,
+                    mergeProps({
+                      key: 1,
+                      class: "vv-select__icon vv-select__icon-after"
+                    }, unref(hasIcon)),
+                    null,
+                    16
+                    /* FULL_PROPS */
+                  )) : createCommentVNode("v-if", true)
+                ]),
+                _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_9, [
+                  renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+                ])) : createCommentVNode("v-if", true)
+              ]),
+              items: withCtx(() => {
                 var _a;
                 return [
-                  ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$1, {
-                    key: 0,
-                    label: unref(propsDefaults).closeLabel,
-                    modifiers: "secondary",
-                    onClick: _cache[1] || (_cache[1] = ($event) => unref(dropdownEl).hide())
-                  }, null, 8, ["label"])) : createCommentVNode("", true)
+                  !unref(disabled) && ((_a = unref(filteredOptions)) == null ? void 0 : _a.length) ? (openBlock(true), createElementBlock(
+                    Fragment,
+                    { key: 0 },
+                    renderList(unref(filteredOptions), (option, index) => {
+                      return openBlock(), createElementBlock(
+                        Fragment,
+                        { key: index },
+                        [
+                          isGroup(option) ? (openBlock(), createElementBlock(
+                            Fragment,
+                            { key: 0 },
+                            [
+                              createVNode(_sfc_main$5, {
+                                label: unref(getOptionLabel)(option)
+                              }, null, 8, ["label"]),
+                              (openBlock(true), createElementBlock(
+                                Fragment,
+                                null,
+                                renderList(unref(getOptionGrouped)(
+                                  option
+                                ), (item, i) => {
+                                  return openBlock(), createBlock(_sfc_main$6, mergeProps({
+                                    selected: isOptionSelected(item),
+                                    disabled: unref(isOptionDisabled)(item),
+                                    unselectable: _ctx.unselectable,
+                                    deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                                    selectHintLabel: unref(propsDefaults).selectHintLabel,
+                                    selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                                  }, {
+                                    key: i,
+                                    class: "vv-dropdown-option",
+                                    onClickPassive: ($event) => onInput(item)
+                                  }), {
+                                    default: withCtx(() => [
+                                      renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                                        option,
+                                        selectedOptions: unref(selectedOptions),
+                                        selected: isOptionSelected(item),
+                                        disabled: unref(isOptionDisabled)(item)
+                                      })), () => [
+                                        createTextVNode(
+                                          toDisplayString(unref(getOptionLabel)(item)),
+                                          1
+                                          /* TEXT */
+                                        )
+                                      ])
+                                    ]),
+                                    _: 2
+                                    /* DYNAMIC */
+                                  }, 1040, ["onClickPassive"]);
+                                }),
+                                128
+                                /* KEYED_FRAGMENT */
+                              ))
+                            ],
+                            64
+                            /* STABLE_FRAGMENT */
+                          )) : (openBlock(), createBlock(_sfc_main$6, mergeProps({ key: 1 }, {
+                            selected: isOptionSelected(option),
+                            disabled: unref(isOptionDisabled)(option),
+                            unselectable: _ctx.unselectable,
+                            deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                            selectHintLabel: unref(propsDefaults).selectHintLabel,
+                            selectedHintLabel: unref(propsDefaults).selectedHintLabel
+                          }, {
+                            class: "vv-dropdown-option",
+                            onClickPassive: ($event) => onInput(option)
+                          }), {
+                            default: withCtx(() => [
+                              renderSlot(_ctx.$slots, "option", normalizeProps(guardReactiveProps({
+                                option,
+                                selectedOptions: unref(selectedOptions),
+                                selected: isOptionSelected(option),
+                                disabled: unref(isOptionDisabled)(option)
+                              })), () => [
+                                createTextVNode(
+                                  toDisplayString(unref(getOptionLabel)(option)),
+                                  1
+                                  /* TEXT */
+                                )
+                              ])
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1040, ["onClickPassive"]))
+                        ],
+                        64
+                        /* STABLE_FRAGMENT */
+                      );
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  )) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$6, {
+                    key: 1,
+                    modifiers: "inert"
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "no-options", {}, () => [
+                        createTextVNode(
+                          toDisplayString(unref(propsDefaults).noOptionsLabel),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ]),
+                    _: 3
+                    /* FORWARDED */
+                  })) : !unref(disabled) ? (openBlock(), createBlock(_sfc_main$6, {
+                    key: 2,
+                    modifiers: "inert"
+                  }, {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "no-results", {}, () => [
+                        createTextVNode(
+                          toDisplayString(unref(propsDefaults).noResultsLabel),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ]),
+                    _: 3
+                    /* FORWARDED */
+                  })) : createCommentVNode("v-if", true)
                 ];
-              })
-            ]),
-            _: 2
-          }, [
-            unref(propsDefaults).searchable || _ctx.$slots["dropdown::before"] ? {
-              name: "before",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "dropdown::before"),
-                unref(propsDefaults).searchable && !unref(disabled) ? withDirectives((openBlock(), createElementBlock("input", {
-                  key: 0,
-                  id: unref(hasSearchId),
-                  ref_key: "inputSearchEl",
-                  ref: inputSearchEl,
-                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(searchText) ? searchText.value = $event : null),
-                  "aria-autocomplete": "list",
-                  "aria-controls": unref(hasDropdownId),
-                  autocomplete: "off",
-                  spellcheck: "false",
-                  type: "search",
-                  class: "vv-dropdown__search",
-                  placeholder: unref(propsDefaults).searchPlaceholder
-                }, null, 8, _hoisted_3)), [
-                  [vModelText, unref(searchText)]
-                ]) : createCommentVNode("", true)
+              }),
+              after: withCtx(() => [
+                renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
+                  var _a;
+                  return [
+                    ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$1, {
+                      key: 0,
+                      label: unref(propsDefaults).closeLabel,
+                      modifiers: "secondary",
+                      onClick: _cache[1] || (_cache[1] = ($event) => unref(dropdownEl).hide())
+                    }, null, 8, ["label"])) : createCommentVNode("v-if", true)
+                  ];
+                })
               ]),
-              key: "0"
-            } : void 0
-          ]), 1040, ["modelValue", "role"])
-        ], 512),
+              _: 2
+              /* DYNAMIC */
+            }, [
+              unref(propsDefaults).searchable || _ctx.$slots["dropdown::before"] ? {
+                name: "before",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "dropdown::before"),
+                  unref(propsDefaults).searchable && !unref(disabled) ? withDirectives((openBlock(), createElementBlock("input", {
+                    key: 0,
+                    id: unref(hasSearchId),
+                    ref_key: "inputSearchEl",
+                    ref: inputSearchEl,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(searchText) ? searchText.value = $event : null),
+                    "aria-autocomplete": "list",
+                    "aria-controls": unref(hasDropdownId),
+                    autocomplete: "off",
+                    spellcheck: "false",
+                    type: "search",
+                    class: "vv-dropdown__search",
+                    placeholder: unref(propsDefaults).searchPlaceholder
+                  }, null, 8, _hoisted_3)), [
+                    [vModelText, unref(searchText)]
+                  ]) : createCommentVNode("v-if", true)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["modelValue", "role"])
+          ],
+          512
+          /* NEED_PATCH */
+        ),
         createVNode(unref(HintSlot), {
           id: unref(hasHintId),
           class: "vv-select__hint"
-        }, createSlots({ _: 2 }, [
+        }, createSlots({
+          _: 2
+          /* DYNAMIC */
+        }, [
           _ctx.$slots.hint ? {
             name: "hint",
             fn: withCtx(() => [
@@ -2948,9 +3177,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1)) : (openBlock(), createBlock(_sfc_main$4, mergeProps({ key: 1 }, unref(selectProps), {
-        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emit("update:modelValue", $event))
-      }), null, 16));
+      ], 10, _hoisted_1)) : (openBlock(), createBlock(
+        _sfc_main$4,
+        mergeProps({ key: 1 }, unref(selectProps), {
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emit("update:modelValue", $event))
+        }),
+        null,
+        16
+        /* FULL_PROPS */
+      ));
     };
   }
 });