@volverjs/ui-vue 0.0.10-beta.74 → 0.0.10-beta.76

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

@@ -1,9 +1,9 @@
-import { computed, isRef, defineComponent, h, inject, unref, mergeDefaults, ref, toRefs, createBlock, createCommentVNode, openBlock, mergeProps, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, toRef, getCurrentInstance, watch, resolveComponent, resolveDynamicComponent, withCtx, useId, useAttrs, useSlots, Fragment, provide, onMounted, createVNode, normalizeProps, guardReactiveProps, Transition, toHandlers, withDirectives, createElementVNode, normalizeStyle, vShow, nextTick, renderList, vModelSelect, createSlots, withModifiers, withKeys, vModelText } from "vue";
+import { computed, isRef, defineComponent, h, inject, unref, mergeDefaults, ref, toRefs, createBlock, createCommentVNode, openBlock, mergeProps, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, toRef, getCurrentInstance, watch, resolveComponent, resolveDynamicComponent, withCtx, useId, useAttrs, useSlots, Fragment, provide, onMounted, createVNode, normalizeProps, guardReactiveProps, Transition, toHandlers, withDirectives, createElementVNode, normalizeStyle, vShow, nextTick, renderList, vModelSelect, createSlots, mergeModels, useModel, withModifiers, withKeys, vModelText } from "vue";
 import { iconLoaded, Icon, addIcon } from "@iconify/vue";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, useElementHover, onKeyStroke, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import mitt from "mitt";
-import { get } from "ts-dot-prop";
+import { getProperty } from "dot-prop";
 const ACTION_ICONS = {
   clear: "close"
 };
@@ -519,6 +519,13 @@ const VvComboboxProps = {
    * Label for no options	available
    */
   noOptionsLabel: { type: String, default: "No options available" },
+  /**
+   * Label for selected option not found
+   */
+  selectedOptionNotFoundLabel: {
+    type: String,
+    default: "Selected option not found"
+  },
   /**
    * Label for selected option hint
    */
@@ -555,6 +562,10 @@ const VvComboboxProps = {
    * Use input text to search on options
    */
   searchable: Boolean,
+  /**
+   * If true, the search input will retain its value even when the dropdown is closed
+   */
+  keepSearch: Boolean,
   /**
    * Search function to filter options
    */
@@ -797,7 +808,6 @@ function HintSlotFactory(propsOrRef, slots) {
       };
     },
     render() {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
       if (this.isVisible) {
         let role;
         if (this.hasInvalidLabelOrSlot) {
@@ -812,7 +822,7 @@ function HintSlotFactory(propsOrRef, slots) {
             {
               role
             },
-            ((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
+            this.$slots.loading?.() ?? this.loadingLabel
           );
         }
         if (this.hasInvalidLabelOrSlot) {
@@ -821,7 +831,7 @@ function HintSlotFactory(propsOrRef, slots) {
             {
               role
             },
-            ((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
+            this.$slots.invalid?.() ?? this.$slots.invalid ?? this.invalidLabel
           );
         }
         if (this.hasValidLabelOrSlot) {
@@ -830,7 +840,7 @@ function HintSlotFactory(propsOrRef, slots) {
             {
               role
             },
-            ((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
+            this.$slots.valid?.() ?? this.validLabel
           );
         }
         return h(
@@ -838,7 +848,7 @@ function HintSlotFactory(propsOrRef, slots) {
           {
             role
           },
-          ((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
+          this.$slots.hint?.() ?? this.$slots.hint ?? this.hintLabel
         );
       }
       return null;
@@ -861,7 +871,7 @@ function useModifiers(prefix, modifiers, others) {
     const toReturn = {
       [prefix]: true
     };
-    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : modifiers?.value;
     if (modifiersArray) {
       if (Array.isArray(modifiersArray)) {
         modifiersArray.forEach((modifier) => {
@@ -915,7 +925,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const { modifiers } = toRefs(props);
     const bemCssClasses = useModifiers("vv-icon", modifiers);
     const provider = computed(() => {
-      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
+      return props.provider || volver?.iconsProvider;
     });
     const icon = computed(() => {
       const name = props.name ?? "";
@@ -923,7 +933,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       if (iconLoaded(iconName)) {
         return iconName;
       }
-      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
+      const iconsCollection = volver?.iconsCollections.find(
         (iconsCollection2) => {
           const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
           return iconLoaded(icon2);
@@ -947,7 +957,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     }
     function addIconFromSvg(svg) {
       const svgContentEl = getSvgContent(svg);
-      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
+      const svgContent = svgContentEl?.innerHTML.trim() || "";
       if (svgContentEl && svgContent) {
         addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
           body: svgContent,
@@ -966,7 +976,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             show.value = true;
           }
         }).catch((e) => {
-          throw new Error(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
+          throw new Error(`Error during fetch icon: ${e?.message}`);
         });
       }
     }
@@ -993,28 +1003,28 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
 });
 function useComponentIcon(icon, iconPosition) {
   const hasIcon = computed(() => {
-    if (typeof (icon == null ? void 0 : icon.value) === "string") {
-      return { name: icon == null ? void 0 : icon.value };
+    if (typeof icon?.value === "string") {
+      return { name: icon?.value };
     }
-    return icon == null ? void 0 : icon.value;
+    return icon?.value;
   });
   const hasIconBefore = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
+    () => iconPosition?.value === Position.before ? hasIcon.value : void 0
   );
   const hasIconAfter = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
+    () => iconPosition?.value === Position.after ? hasIcon.value : void 0
   );
   const hasIconLeft = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
+    () => iconPosition?.value === Side.left ? hasIcon.value : void 0
   );
   const hasIconRight = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
+    () => iconPosition?.value === Side.right ? hasIcon.value : void 0
   );
   const hasIconTop = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
+    () => iconPosition?.value === Side.top ? hasIcon.value : void 0
   );
   const hasIconBottom = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
+    () => iconPosition?.value === Side.bottom ? hasIcon.value : void 0
   );
   return {
     hasIcon,
@@ -1052,7 +1062,7 @@ const VvInputClearAction = defineComponent({
   setup(props, { emit }) {
     const { hasIcon } = useComponentIcon(computed(() => props.icon));
     function onClick(e) {
-      e == null ? void 0 : e.stopPropagation();
+      e?.stopPropagation();
       if (!props.disabled) {
         emit("clear");
       }
@@ -1119,7 +1129,7 @@ function useGroupStateInject(groupKey) {
   const group = inject(groupKey, void 0);
   const isInGroup = computed(() => group !== void 0);
   function getGroupOrLocalRef(propName, props, emit) {
-    const groupPropValue = group == null ? void 0 : group[propName];
+    const groupPropValue = group?.[propName];
     if (groupPropValue) {
       return computed({
         get() {
@@ -1203,10 +1213,10 @@ function useGroupProps(props, emit) {
   const modelValue = getGroupOrLocalRef("modelValue", props, emit);
   const toggle = getGroupOrLocalRef("toggle", props);
   const unselectable = getGroupOrLocalRef("unselectable", props);
-  const multiple = computed(() => (group == null ? void 0 : group.multiple.value) ?? false);
+  const multiple = computed(() => group?.multiple.value ?? false);
   const modifiers = computed(() => {
     let localModifiers = props.modifiers;
-    let groupModifiers = group == null ? void 0 : group.modifiers.value;
+    let groupModifiers = group?.modifiers.value;
     const toReturn = /* @__PURE__ */ new Set();
     if (localModifiers) {
       if (!Array.isArray(localModifiers)) {
@@ -1223,7 +1233,7 @@ function useGroupProps(props, emit) {
     return Array.from(toReturn);
   });
   const disabled = computed(
-    () => Boolean(props.disabled || (group == null ? void 0 : group.disabled.value))
+    () => Boolean(props.disabled || group?.disabled.value)
   );
   return {
     // group props
@@ -1283,7 +1293,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       }
     );
     const pressed = computed(() => {
-      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
+      return props.pressed || dropdownExpanded?.value;
     });
     const { role } = useInjectedDropdownAction();
     const hasTag = computed(() => {
@@ -1291,7 +1301,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         case props.disabled:
           return ActionTag.button;
         case props.to !== void 0:
-          return (volver == null ? void 0 : volver.nuxt) ? resolveComponent(ActionTag.nuxtLink) : ActionTag.routerLink;
+          return volver?.nuxt ? resolveComponent(ActionTag.nuxtLink) : ActionTag.routerLink;
         case props.href !== void 0:
           return ActionTag.a;
         default:
@@ -1300,10 +1310,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     });
     const hasProps = computed(() => {
       const toReturn = {
-        ...dropdownAria == null ? void 0 : dropdownAria.value,
+        ...dropdownAria?.value,
         ariaPressed: pressed.value ? true : void 0,
         ariaLabel: props.ariaLabel,
-        role: role == null ? void 0 : role.value
+        role: role?.value
       };
       switch (hasTag.value) {
         case ActionTag.a:
@@ -1331,32 +1341,29 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       }
     });
     function onClick(e) {
-      var _a;
       if (props.disabled) {
         e.preventDefault();
         return;
       }
-      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onClick) {
+      if (instance?.vnode.props?.onClick) {
         emit("click", e);
         return;
       }
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
+      dropdownEventBus?.emit("click", e);
     }
     function onMouseover(e) {
-      var _a;
-      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseover) {
+      if (instance?.vnode.props?.onMouseover) {
         emit("mouseover", e);
         return;
       }
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
+      dropdownEventBus?.emit("mouseover", e);
     }
     function onMouseleave(e) {
-      var _a;
-      if ((_a = instance == null ? void 0 : instance.vnode.props) == null ? void 0 : _a.onMouseleave) {
+      if (instance?.vnode.props?.onMouseleave) {
         emit("mouseleave", e);
         return;
       }
-      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
+      dropdownEventBus?.emit("mouseleave", e);
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
@@ -1388,7 +1395,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 function useUniqueId(id) {
-  return computed(() => String((id == null ? void 0 : id.value) || useId()));
+  return computed(() => String(id?.value || useId()));
 }
 const _hoisted_1$5 = {
   key: 1,
@@ -1423,12 +1430,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       unselectable
     } = useGroupProps(props, emit);
     const hasId = useUniqueId(id);
-    const name = computed(() => (attrs == null ? void 0 : attrs.name) || hasId.value);
+    const name = computed(() => attrs?.name || hasId.value);
     const element = ref(null);
-    const $el = computed(() => {
-      var _a;
-      return (_a = element.value) == null ? void 0 : _a.$el;
-    });
+    const $el = computed(() => element.value?.$el);
     __expose({ $el });
     const pressed = computed(() => {
       if (!toggle.value) {
@@ -1450,7 +1454,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           iconPosition.value
         ),
         "icon-only": Boolean(
-          (icon == null ? void 0 : icon.value) && !(label == null ? void 0 : label.value) && !slots.default
+          icon?.value && !label?.value && !slots.default
         )
       }))
     );
@@ -1626,8 +1630,7 @@ function useDropdownProvideTrigger({
       });
     },
     render() {
-      var _a, _b;
-      return h(Fragment, {}, (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a));
+      return h(Fragment, {}, this.$slots.default?.());
     }
   });
   return {
@@ -1704,8 +1707,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       useMutationObserver(
         floatingEl.value,
         () => {
-          var _a;
-          hasCustomPosition.value = ((_a = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")) == null ? void 0 : _a.trim()) === "true";
+          hasCustomPosition.value = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")?.trim() === "true";
         },
         {
           attributeFilter: ["style"],
@@ -1792,11 +1794,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       }
     );
     const dropdownPlacement = computed(() => {
-      var _a;
       if (hasCustomPosition.value) {
         return void 0;
       }
-      const width = props.triggerWidth && referenceEl.value ? `${(_a = referenceEl.value) == null ? void 0 : _a.offsetWidth}px` : void 0;
+      const width = props.triggerWidth && referenceEl.value ? `${referenceEl.value?.offsetWidth}px` : void 0;
       return {
         position: strategy.value,
         top: `${y.value ?? 0}px`,
@@ -1810,7 +1811,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       () => placement.value.split("-")[0]
     );
     const arrowPlacement = computed(() => {
-      var _a, _b, _c, _d, _e;
       if (hasCustomPosition.value) {
         return void 0;
       }
@@ -1821,9 +1821,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         [Side.left]: Side.right
       }[side.value];
       return {
-        left: ((_a = middlewareData.value.arrow) == null ? void 0 : _a.x) !== void 0 ? `${(_b = middlewareData.value.arrow) == null ? void 0 : _b.x}px` : void 0,
-        top: ((_c = middlewareData.value.arrow) == null ? void 0 : _c.y) !== void 0 ? `${(_d = middlewareData.value.arrow) == null ? void 0 : _d.y}px` : void 0,
-        [staticSide]: `${-(((_e = arrowEl.value) == null ? void 0 : _e.offsetWidth) ?? 0) / 2}px`
+        left: middlewareData.value.arrow?.x !== void 0 ? `${middlewareData.value.arrow?.x}px` : void 0,
+        top: middlewareData.value.arrow?.y !== void 0 ? `${middlewareData.value.arrow?.y}px` : void 0,
+        [staticSide]: `${-(arrowEl.value?.offsetWidth ?? 0) / 2}px`
       };
     });
     const modelValue = useVModel(props, "modelValue", emit);
@@ -1860,8 +1860,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       { ignore: [referenceEl] }
     );
     const hasAriaLabelledby = computed(() => {
-      var _a, _b;
-      return ((_b = (_a = referenceEl.value) == null ? void 0 : _a.getAttribute) == null ? void 0 : _b.call(_a, "id")) ?? void 0;
+      return referenceEl.value?.getAttribute?.("id") ?? void 0;
     });
     const referenceAria = computed(() => ({
       "aria-controls": hasId.value,
@@ -2012,7 +2011,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     onKeyStroke([" ", "Enter"], (e) => {
       const htmlEl = e.target;
       if (expanded.value && focused.value && htmlEl) {
-        htmlEl == null ? void 0 : htmlEl.click();
+        htmlEl?.click();
       }
     });
     const dropdownTransitionHandlers = {
@@ -2299,8 +2298,7 @@ function useVvSelectProps() {
 function useDefaults(componentName, propsDefinition, props) {
   const volver = useVolver();
   const volverComponentDefaults = computed(() => {
-    var _a;
-    if (!volver || !((_a = volver.defaults.value) == null ? void 0 : _a[componentName])) {
+    if (!volver || !volver.defaults.value?.[componentName]) {
       return void 0;
     }
     return volver.defaults.value[componentName];
@@ -2368,7 +2366,7 @@ function useOptions(props) {
       return labelKey.value(option);
     }
     return String(
-      labelKey.value ? get(option, labelKey.value) : option
+      labelKey.value ? getProperty(option, labelKey.value) : option
     );
   };
   const getOptionValue = (option) => {
@@ -2378,7 +2376,7 @@ function useOptions(props) {
     if (typeof valueKey.value === "function") {
       return valueKey.value(option);
     }
-    return valueKey.value ? get(option, valueKey.value) : option;
+    return valueKey.value ? getProperty(option, valueKey.value) : option;
   };
   const isOptionDisabled = (option) => {
     if (typeof option === "string") {
@@ -2387,7 +2385,7 @@ function useOptions(props) {
     if (typeof disabledKey.value === "function") {
       return disabledKey.value(option);
     }
-    return disabledKey.value ? get(option, disabledKey.value) : false;
+    return disabledKey.value ? Boolean(getProperty(option, disabledKey.value)) : false;
   };
   const getOptionGrouped = (option) => {
     if (typeof option == "string") {
@@ -2448,11 +2446,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     } = HintSlotFactory(propsDefaults, slots);
     const { focused } = useComponentFocus(selectEl, emit);
     function isGroup(option) {
-      var _a;
       if (typeof option === "string") {
         return false;
       }
-      return (_a = option.options) == null ? void 0 : _a.length;
+      return option.options?.length;
     }
     const {
       id,
@@ -2542,7 +2539,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     watch(
       () => props.options,
       (newValue) => {
-        if ((newValue == null ? void 0 : newValue.length) && props.autoselectFirst && !isDirty.value) {
+        if (newValue?.length && props.autoselectFirst && !isDirty.value) {
           const firstOptionValue = getOptionValue(newValue[0]);
           localModelValue.value = props.multiple ? [firstOptionValue] : firstOptionValue;
         }
@@ -2746,8 +2743,15 @@ const __default__ = {
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
-  props: useVvComboboxProps(),
-  emits: ["update:modelValue", "update:search", "update:options", "focus", "blur", "clear", "change:search"],
+  props: /* @__PURE__ */ mergeModels(useVvComboboxProps(), {
+    "search": {
+      type: String,
+      default: "",
+      required: false
+    },
+    "searchModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["update:modelValue", "update:search", "update:options", "focus", "blur", "clear", "change:search"], ["update:search"]),
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -2787,7 +2791,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         collapse();
       }
     });
-    const searchText = ref("");
+    const searchText = useModel(__props, "search");
     const debouncedSearchText = refDebounced(
       searchText,
       computed(() => Number(props.debounceSearch))
@@ -2822,16 +2826,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     function onAfterCollapse() {
-      if (propsDefaults.value.searchable) {
+      if (!propsDefaults.value.keepSearch) {
         searchText.value = "";
       }
     }
     function isGroup(option) {
-      var _a;
       if (typeof option === "string") {
         return false;
       }
-      return (_a = option.options) == null ? void 0 : _a.length;
+      return option.options?.length;
     }
     const {
       id,
@@ -2925,15 +2928,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     } = useOptions(props);
     const hasOptions = computed(() => {
       const toReturn = [...props.options, ...addedOptions.value];
-      for (const localModelValueItem of localModelValue.value) {
+      for (const item of localModelValue.value) {
         if (!toReturn.some((option) => {
           const optionValue = getOptionValue(option);
-          if (typeof optionValue === "object") {
-            return JSON.stringify(optionValue) === JSON.stringify(localModelValueItem);
+          if (typeof optionValue === "object" && typeof item === "object") {
+            return JSON.stringify(optionValue) === JSON.stringify(item);
           }
-          return optionValue === localModelValueItem;
+          return optionValue === item;
         })) {
-          toReturn.push(localModelValueItem);
+          toReturn.push(item);
         }
       }
       return toReturn;
@@ -2947,7 +2950,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return isOptionDisabled(option) || !isSelectable.value && !isOptionSelected(option);
     }
     const filteredOptions = computedAsync(async () => {
-      var _a;
       if (propsDefaults.value.searchFunction) {
         localLoading.value = true;
         const toReturn = await Promise.resolve(
@@ -2959,7 +2961,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         localLoading.value = false;
         return toReturn;
       }
-      return (_a = hasOptions.value) == null ? void 0 : _a.filter((option) => {
+      return hasOptions.value?.filter((option) => {
         return getOptionLabel(option).toLowerCase().includes(debouncedSearchText.value.toLowerCase().trim());
       });
     });
@@ -3024,7 +3026,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       hasOptions,
       (newValue) => {
-        if ((newValue == null ? void 0 : newValue.length) && props.autoselectFirst && !isDirty.value) {
+        if (newValue?.length && props.autoselectFirst && !isDirty.value) {
           onInput(newValue[0]);
         }
       },
@@ -3092,13 +3094,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       { target: inputEl }
     );
     function onKeyupEnterInputSearch() {
-      var _a, _b;
-      if ((_a = filteredOptions.value) == null ? void 0 : _a.length) {
+      if (filteredOptions.value?.length) {
         if (filteredOptions.value.length === 1) {
           onInput(filteredOptions.value[0]);
           return;
         }
-        (_b = dropdownEl.value) == null ? void 0 : _b.focusFirstListElement();
+        dropdownEl.value?.focusFirstListElement();
         return;
       }
       if (propsDefaults.value.addable) {
@@ -3171,64 +3172,50 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     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$8, {
-                                key: index,
-                                modifiers: _ctx.badgeModifiers,
-                                class: "vv-select__badge"
-                              }, {
-                                default: withCtx(() => [
-                                  createTextVNode(
-                                    toDisplayString(unref(getOptionLabel)(option)) + " ",
-                                    1
-                                    /* TEXT */
-                                  ),
-                                  unref(isUnselectable) ? (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(
+                    unref(hasValue) ? renderSlot(_ctx.$slots, "value", normalizeProps(mergeProps({ key: 0 }, { selectedOptions: unref(selectedOptions), onInput })), () => [
+                      !_ctx.badges ? (openBlock(), createElementBlock(
+                        "div",
+                        _hoisted_7,
+                        toDisplayString(unref(hasValue)),
+                        1
+                        /* TEXT */
+                      )) : (openBlock(true), createElementBlock(
                         Fragment,
                         { key: 1 },
-                        [
-                          createTextVNode(
-                            toDisplayString(_ctx.placeholder),
-                            1
-                            /* TEXT */
-                          )
-                        ],
-                        64
-                        /* STABLE_FRAGMENT */
+                        renderList(unref(selectedOptions), (option, index) => {
+                          return openBlock(), createBlock(_sfc_main$8, {
+                            key: index,
+                            modifiers: _ctx.badgeModifiers,
+                            class: "vv-select__badge"
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(
+                                toDisplayString(unref(getOptionLabel)(option)) + " ",
+                                1
+                                /* TEXT */
+                              ),
+                              unref(isUnselectable) ? (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 */
                       ))
+                    ]) : renderSlot(_ctx.$slots, "placeholder", { key: 1 }, () => [
+                      createTextVNode(
+                        toDisplayString(_ctx.placeholder),
+                        1
+                        /* TEXT */
+                      )
                     ])
                   ], 16, _hoisted_6),
                   unref(hasIconAfter) ? (openBlock(), createBlock(
@@ -3251,151 +3238,145 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
                 ])) : createCommentVNode("v-if", 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$4, {
-                                label: unref(getOptionLabel)(option)
-                              }, null, 8, ["label"]),
-                              (openBlock(true), createElementBlock(
-                                Fragment,
-                                null,
-                                renderList(unref(getOptionGrouped)(
-                                  option
-                                ), (item, i) => {
-                                  return openBlock(), createBlock(_sfc_main$2, mergeProps({ ref_for: true }, {
-                                    selected: isOptionSelected(item),
-                                    disabled: isOptionDisabledOrNotSelectable(item),
-                                    unselectable: unref(isUnselectable),
-                                    deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                                    selectHintLabel: unref(propsDefaults).selectHintLabel,
-                                    selectedHintLabel: unref(propsDefaults).selectedHintLabel,
-                                    focusOnHover: _ctx.focusOnHover
-                                  }, {
-                                    key: i,
-                                    class: "vv-dropdown-option",
-                                    onClickPassive: ($event) => onInput(item)
-                                  }), {
-                                    default: withCtx(() => [
-                                      renderSlot(_ctx.$slots, "option", mergeProps({ ref_for: true }, {
-                                        option,
-                                        selectedOptions: unref(selectedOptions),
-                                        selected: isOptionSelected(item),
-                                        disabled: isOptionDisabledOrNotSelectable(item)
-                                      }), () => [
-                                        createTextVNode(
-                                          toDisplayString(unref(getOptionLabel)(item)),
-                                          1
-                                          /* TEXT */
-                                        )
-                                      ])
-                                    ]),
-                                    _: 2
-                                    /* DYNAMIC */
-                                  }, 1040, ["onClickPassive"]);
-                                }),
-                                128
-                                /* KEYED_FRAGMENT */
-                              ))
-                            ],
-                            64
-                            /* STABLE_FRAGMENT */
-                          )) : (openBlock(), createBlock(_sfc_main$2, mergeProps({
-                            key: 1,
-                            ref_for: true
-                          }, {
-                            selected: isOptionSelected(option),
-                            disabled: isOptionDisabledOrNotSelectable(option),
-                            unselectable: unref(isUnselectable),
-                            deselectHintLabel: unref(propsDefaults).deselectHintLabel,
-                            selectHintLabel: unref(propsDefaults).selectHintLabel,
-                            selectedHintLabel: unref(propsDefaults).selectedHintLabel,
-                            focusOnHover: _ctx.focusOnHover
-                          }, {
-                            class: "vv-dropdown-option",
-                            onClickPassive: ($event) => onInput(option)
-                          }), {
-                            default: withCtx(() => [
-                              renderSlot(_ctx.$slots, "option", mergeProps({ ref_for: true }, {
-                                option,
-                                selectedOptions: unref(selectedOptions),
-                                selected: isOptionSelected(option),
-                                disabled: isOptionDisabledOrNotSelectable(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$2, {
-                    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$2, {
-                    key: 2,
-                    modifiers: "inert"
-                  }, {
-                    default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "no-results", {}, () => [
-                        createTextVNode(
-                          toDisplayString(unref(propsDefaults).addable ? unref(propsDefaults).addOptionHintLabel : unref(propsDefaults).noResultsLabel),
-                          1
-                          /* TEXT */
-                        )
-                      ])
-                    ]),
-                    _: 3
-                    /* FORWARDED */
-                  })) : createCommentVNode("v-if", true)
-                ];
-              }),
+              items: withCtx(() => [
+                !unref(disabled) && unref(filteredOptions)?.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$4, {
+                              label: unref(getOptionLabel)(option)
+                            }, null, 8, ["label"]),
+                            (openBlock(true), createElementBlock(
+                              Fragment,
+                              null,
+                              renderList(unref(getOptionGrouped)(
+                                option
+                              ), (item, i) => {
+                                return openBlock(), createBlock(_sfc_main$2, mergeProps({ ref_for: true }, {
+                                  selected: isOptionSelected(item),
+                                  disabled: isOptionDisabledOrNotSelectable(item),
+                                  unselectable: unref(isUnselectable),
+                                  deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                                  selectHintLabel: unref(propsDefaults).selectHintLabel,
+                                  selectedHintLabel: unref(propsDefaults).selectedHintLabel,
+                                  focusOnHover: _ctx.focusOnHover
+                                }, {
+                                  key: i,
+                                  class: "vv-dropdown-option",
+                                  onClickPassive: ($event) => onInput(item)
+                                }), {
+                                  default: withCtx(() => [
+                                    renderSlot(_ctx.$slots, "option", mergeProps({ ref_for: true }, {
+                                      option,
+                                      selectedOptions: unref(selectedOptions),
+                                      selected: isOptionSelected(item),
+                                      disabled: isOptionDisabledOrNotSelectable(item)
+                                    }), () => [
+                                      createTextVNode(
+                                        toDisplayString(unref(getOptionLabel)(item)),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ])
+                                  ]),
+                                  _: 2
+                                  /* DYNAMIC */
+                                }, 1040, ["onClickPassive"]);
+                              }),
+                              128
+                              /* KEYED_FRAGMENT */
+                            ))
+                          ],
+                          64
+                          /* STABLE_FRAGMENT */
+                        )) : (openBlock(), createBlock(_sfc_main$2, mergeProps({
+                          key: 1,
+                          ref_for: true
+                        }, {
+                          selected: isOptionSelected(option),
+                          disabled: isOptionDisabledOrNotSelectable(option),
+                          unselectable: unref(isUnselectable),
+                          deselectHintLabel: unref(propsDefaults).deselectHintLabel,
+                          selectHintLabel: unref(propsDefaults).selectHintLabel,
+                          selectedHintLabel: unref(propsDefaults).selectedHintLabel,
+                          focusOnHover: _ctx.focusOnHover
+                        }, {
+                          class: "vv-dropdown-option",
+                          onClickPassive: ($event) => onInput(option)
+                        }), {
+                          default: withCtx(() => [
+                            renderSlot(_ctx.$slots, "option", mergeProps({ ref_for: true }, {
+                              option,
+                              selectedOptions: unref(selectedOptions),
+                              selected: isOptionSelected(option),
+                              disabled: isOptionDisabledOrNotSelectable(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$2, {
+                  key: 1,
+                  modifiers: "inert"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "no-options", {}, () => [
+                      createTextVNode(
+                        toDisplayString(unref(propsDefaults).addable && searchText.value.length ? unref(propsDefaults).addOptionHintLabel : unref(propsDefaults).noOptionsLabel),
+                        1
+                        /* TEXT */
+                      )
+                    ])
+                  ]),
+                  _: 3
+                  /* FORWARDED */
+                })) : (openBlock(), createBlock(_sfc_main$2, {
+                  key: 2,
+                  modifiers: "inert"
+                }, {
+                  default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "no-results", {}, () => [
+                      createTextVNode(
+                        toDisplayString(unref(propsDefaults).addable ? unref(propsDefaults).addOptionHintLabel : unref(propsDefaults).noResultsLabel),
+                        1
+                        /* TEXT */
+                      )
+                    ])
+                  ]),
+                  _: 3
+                  /* FORWARDED */
+                }))
+              ]),
               after: withCtx(() => [
-                renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
-                  var _a;
-                  return [
-                    ((_a = unref(dropdownEl)) == null ? void 0 : _a.customPosition) ? (openBlock(), createBlock(_sfc_main$6, {
-                      key: 0,
-                      label: unref(propsDefaults).closeLabel,
-                      modifiers: "secondary",
-                      onClick: _cache[1] || (_cache[1] = ($event) => unref(dropdownEl).hide())
-                    }, null, 8, ["label"])) : createCommentVNode("v-if", true)
-                  ];
-                })
+                renderSlot(_ctx.$slots, "dropdown::after", {}, () => [
+                  unref(dropdownEl)?.customPosition ? (openBlock(), createBlock(_sfc_main$6, {
+                    key: 0,
+                    label: unref(propsDefaults).closeLabel,
+                    modifiers: "secondary",
+                    onClick: _cache[1] || (_cache[1] = ($event) => unref(dropdownEl).hide())
+                  }, null, 8, ["label"])) : createCommentVNode("v-if", true)
+                ])
               ]),
               _: 2
               /* DYNAMIC */
@@ -3409,7 +3390,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     id: unref(hasSearchId),
                     ref_key: "inputSearchEl",
                     ref: inputSearchEl,
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(searchText) ? searchText.value = $event : null),
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event),
                     "aria-autocomplete": "list",
                     "aria-controls": unref(hasDropdownId),
                     autocomplete: "off",
@@ -3419,7 +3400,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     placeholder: unref(propsDefaults).searchPlaceholder,
                     onKeyup: withKeys(onKeyupEnterInputSearch, ["enter"])
                   }, null, 40, _hoisted_3)), [
-                    [vModelText, unref(searchText)]
+                    [vModelText, searchText.value]
                   ]) : createCommentVNode("v-if", true)
                 ]),
                 key: "0"