@enos5/enos-vue-default 1.8.9 → 1.8.11

package/dist/{plugin-3CiafDXC.js → plugin-Bl7pzq-e.js}

@@ -1,5 +1,5 @@
-import { ref, computed, watch, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, normalizeStyle, toDisplayString, createBlock, createCommentVNode, renderSlot, createVNode, Transition, withCtx, mergeProps, useSlots, unref, withDirectives, vShow, useAttrs, vModelCheckbox, onMounted, nextTick, onBeforeUnmount, Teleport, withModifiers, vModelText, onUnmounted, inject, provide, defineComponent, isVNode, cloneVNode, resolveDynamicComponent, createTextVNode, h, createSlots } from "vue";
-import { LockClosedIcon, ChevronDownIcon, PhotoIcon, EyeDropperIcon, ExclamationCircleIcon, ExclamationTriangleIcon, ChevronUpIcon, MagnifyingGlassIcon, CheckIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
+import { ref, computed, watch, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, normalizeStyle, toDisplayString, createBlock, createCommentVNode, renderSlot, createVNode, Transition, withCtx, mergeProps, useSlots, unref, withDirectives, vShow, useAttrs, vModelCheckbox, onMounted, nextTick, onBeforeUnmount, withModifiers, Teleport, vModelText, onUnmounted, inject, provide, defineComponent, isVNode, cloneVNode, resolveDynamicComponent, createTextVNode, h, createSlots } from "vue";
+import { LockClosedIcon, XMarkIcon, ChevronDownIcon, PhotoIcon, EyeDropperIcon, ExclamationCircleIcon, ExclamationTriangleIcon, ChevronUpIcon, MagnifyingGlassIcon, CheckIcon, PencilSquareIcon } from "@heroicons/vue/24/outline";
 import Editor from "@tinymce/tinymce-vue";
 import { useI18n } from "vue-i18n";
 import { Link } from "@inertiajs/vue3";
@@ -307,7 +307,7 @@ const _hoisted_1$B = { class: "md:col-span-1 flex justify-between" };
 const _hoisted_2$m = { class: "px-4 sm:px-0" };
 const _hoisted_3$g = { class: "text-xl font-semibold tracking-tight text-neutral-950 dark:text-neutral-50" };
 const _hoisted_4$c = { class: "mt-1 max-w-2xl text-sm text-neutral-600 dark:text-neutral-200" };
-const _hoisted_5$9 = { class: "px-4 sm:px-0" };
+const _hoisted_5$a = { class: "px-4 sm:px-0" };
 function _sfc_render(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$B, [
     createElementVNode("div", _hoisted_2$m, [
@@ -318,7 +318,7 @@ function _sfc_render(_ctx, _cache) {
         renderSlot(_ctx.$slots, "description")
       ])
     ]),
-    createElementVNode("div", _hoisted_5$9, [
+    createElementVNode("div", _hoisted_5$a, [
       renderSlot(_ctx.$slots, "aside")
     ])
   ]);
@@ -622,7 +622,7 @@ const _hoisted_2$k = {
 };
 const _hoisted_3$e = ["type", "value", "disabled"];
 const _hoisted_4$b = ["aria-label"];
-const _hoisted_5$8 = {
+const _hoisted_5$9 = {
   key: 0,
   class: "h-5 w-5",
   fill: "none",
@@ -719,7 +719,7 @@ const _sfc_main$I = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
           "aria-label": revealed.value ? "Hide password" : "Show password",
           onClick: toggleVisibility
         }, [
-          revealed.value ? (openBlock(), createElementBlock("svg", _hoisted_5$8, [..._cache[2] || (_cache[2] = [
+          revealed.value ? (openBlock(), createElementBlock("svg", _hoisted_5$9, [..._cache[2] || (_cache[2] = [
             createElementVNode("path", {
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
@@ -822,13 +822,14 @@ const _sfc_main$H = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     };
   }
 });
-const _hoisted_1$t = ["placeholder"];
-const _hoisted_2$j = ["onClick"];
-const _hoisted_3$d = {
+const _hoisted_1$t = { class: "flex h-5 items-center gap-1" };
+const _hoisted_2$j = ["placeholder"];
+const _hoisted_3$d = ["data-option-value", "onClick", "onFocus", "onKeydown"];
+const _hoisted_4$a = {
   key: 0,
   class: "flex items-center gap-3"
 };
-const _hoisted_4$a = ["checked", "disabled", "onChange"];
+const _hoisted_5$8 = ["checked", "disabled", "onChange"];
 const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
   __name: "CustomSelect",
   props: {
@@ -916,6 +917,10 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       type: [String, Array, Object],
       default: "bg-neutral-100 font-medium text-neutral-950 dark:bg-neutral-900 dark:text-neutral-50"
     },
+    dropdownHighlightedClass: {
+      type: [String, Array, Object],
+      default: "bg-slate-50 text-slate-900 dark:bg-neutral-800 dark:text-neutral-50"
+    },
     searchable: {
       type: Boolean,
       default: false
@@ -927,6 +932,10 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     searchInputClass: {
       type: [String, Array, Object],
       default: "w-full border-b border-neutral-200 px-4 py-3 text-sm outline-none focus:border-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:focus:border-neutral-100"
+    },
+    noOptionsText: {
+      type: String,
+      default: "No options available"
     }
   },
   emits: ["update:modelValue"],
@@ -939,9 +948,14 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     const triggerRef = ref(null);
     const dropdownMenuRef = ref(null);
     const dropdownStyle = ref({});
+    const teleportTarget = ref("body");
     const isDarkMode = ref(false);
     const isMounted = ref(false);
     const searchQuery = ref("");
+    const searchInputRef = ref(null);
+    const highlightedOptionValue = ref(null);
+    const typeaheadQuery = ref("");
+    let typeaheadResetTimeout = null;
     const isObjectOption = (option) => typeof option === "object" && option !== null;
     const optionValue = (option) => {
       if (isObjectOption(option)) {
@@ -1016,6 +1030,9 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       }
       return multipleOptions.value.filter((option) => modelValueSet.value.has(String(optionValue(option) ?? "")));
     });
+    const hasVisibleOptions = computed(() => filteredOptions.value.length > 0);
+    const visibleOptions = computed(() => filteredOptions.value);
+    const canClearSelection = computed(() => !props.multiple && !props.placeholderDisabled && !props.disabled && props.modelValue !== null && props.modelValue !== void 0 && props.modelValue !== "");
     const displayText = computed(() => {
       if (props.multiple) {
         if (selectedMultipleOptions.value.length === 0) {
@@ -1043,19 +1060,24 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     };
     const normalizeEmittedValues = (values) => values.map((value) => normalizeEmittedValue(value));
     const optionIsSelected = (option) => modelValueSet.value.has(String(optionValue(option) ?? ""));
+    const optionIsHighlighted = (option) => highlightedOptionValue.value === String(optionValue(option) ?? "");
     const toggleDropdown = () => {
       if (!props.disabled) {
         isOpen.value = !isOpen.value;
       }
     };
+    const syncTeleportTarget = () => {
+      const dialog = rootRef.value?.closest("dialog");
+      teleportTarget.value = dialog ?? document.body;
+    };
     const selectOption = (option) => {
       const value = optionValue(option);
       emit("update:modelValue", normalizeEmittedValue(value));
       isOpen.value = false;
     };
-    const selectPlaceholder = () => {
-      if (!props.placeholderDisabled) {
-        emit("update:modelValue", props.multiple ? [] : normalizeEmittedValue(""));
+    const clearSelection = () => {
+      if (canClearSelection.value) {
+        emit("update:modelValue", normalizeEmittedValue(""));
         isOpen.value = false;
       }
     };
@@ -1097,6 +1119,8 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       if (!clickedInsideTrigger && !clickedInsideMenu) {
         isOpen.value = false;
         searchQuery.value = "";
+        highlightedOptionValue.value = null;
+        typeaheadQuery.value = "";
       }
     };
     const syncDarkMode = () => {
@@ -1107,26 +1131,218 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
       isDarkMode.value = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark");
     };
     const darkTextStyle = computed(() => isDarkMode.value ? { color: "#ffffff" } : null);
+    const clearTypeaheadQuery = () => {
+      typeaheadQuery.value = "";
+      if (typeaheadResetTimeout) {
+        window.clearTimeout(typeaheadResetTimeout);
+        typeaheadResetTimeout = null;
+      }
+    };
+    const scheduleTypeaheadReset = () => {
+      if (typeaheadResetTimeout) {
+        window.clearTimeout(typeaheadResetTimeout);
+      }
+      typeaheadResetTimeout = window.setTimeout(() => {
+        typeaheadQuery.value = "";
+        typeaheadResetTimeout = null;
+      }, 700);
+    };
+    const escapeSelectorValue = (value) => {
+      if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+        return CSS.escape(value);
+      }
+      return value.replace(/["\\]/g, "\\$&");
+    };
+    const scrollOptionByValue = async (value) => {
+      await nextTick();
+      if (!dropdownMenuRef.value) {
+        return null;
+      }
+      const optionElement = dropdownMenuRef.value.querySelector(
+        `[data-option-value="${escapeSelectorValue(value)}"]`
+      );
+      if (!optionElement) {
+        return null;
+      }
+      optionElement.scrollIntoView({ block: "nearest" });
+      return optionElement;
+    };
+    const focusOptionByValue = async (value) => {
+      const optionElement = await scrollOptionByValue(value);
+      if (!optionElement) {
+        return;
+      }
+      optionElement.focus({ preventScroll: true });
+    };
+    const setHighlightedOption = async (option, { focus = !props.searchable } = {}) => {
+      const value = String(optionValue(option) ?? "");
+      highlightedOptionValue.value = value;
+      if (focus) {
+        await focusOptionByValue(value);
+        return;
+      }
+      await scrollOptionByValue(value);
+    };
+    const findMatchingOption = (query) => {
+      const normalizedQuery = query.trimStart().toLowerCase();
+      if (!normalizedQuery) {
+        return null;
+      }
+      const options = props.multiple ? multipleOptions.value : availableOptions.value;
+      return options.find((option) => String(optionText(option)).toLowerCase().startsWith(normalizedQuery)) ?? null;
+    };
+    const findHighlightedOptionIndex = () => {
+      return visibleOptions.value.findIndex((option) => String(optionValue(option) ?? "") === highlightedOptionValue.value);
+    };
+    const moveHighlightedOption = async (direction) => {
+      if (!visibleOptions.value.length) {
+        return;
+      }
+      const currentIndex = findHighlightedOptionIndex();
+      const fallbackIndex = direction > 0 ? 0 : visibleOptions.value.length - 1;
+      const nextIndex = currentIndex === -1 ? fallbackIndex : (currentIndex + direction + visibleOptions.value.length) % visibleOptions.value.length;
+      await setHighlightedOption(visibleOptions.value[nextIndex]);
+    };
+    const selectHighlightedOption = () => {
+      const highlightedOption = visibleOptions.value.find((option) => String(optionValue(option) ?? "") === highlightedOptionValue.value);
+      if (!highlightedOption) {
+        return;
+      }
+      if (props.multiple) {
+        toggleMultipleOption(highlightedOption);
+        return;
+      }
+      selectOption(highlightedOption);
+    };
+    const syncHighlightedOption = async () => {
+      if (!visibleOptions.value.length) {
+        highlightedOptionValue.value = null;
+        return;
+      }
+      const hasCurrentHighlight = visibleOptions.value.some((option) => String(optionValue(option) ?? "") === highlightedOptionValue.value);
+      if (hasCurrentHighlight) {
+        await setHighlightedOption(
+          visibleOptions.value.find((option) => String(optionValue(option) ?? "") === highlightedOptionValue.value),
+          { focus: false }
+        );
+        return;
+      }
+      await setHighlightedOption(visibleOptions.value[0], { focus: false });
+    };
+    const handleTypeaheadKeydown = (event) => {
+      if (!isOpen.value || props.searchable) {
+        return;
+      }
+      if (event.ctrlKey || event.altKey || event.metaKey || event.key.length !== 1) {
+        return;
+      }
+      const target = event.target;
+      const targetInsideSelect = rootRef.value?.contains(target) || dropdownMenuRef.value?.contains(target);
+      if (!targetInsideSelect) {
+        return;
+      }
+      typeaheadQuery.value += event.key;
+      scheduleTypeaheadReset();
+      const matchingOption = findMatchingOption(typeaheadQuery.value);
+      if (!matchingOption) {
+        return;
+      }
+      setHighlightedOption(matchingOption);
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    const handleDropdownKeydown = (event) => {
+      if (!isOpen.value) {
+        return;
+      }
+      const target = event.target;
+      const targetInsideSelect = rootRef.value?.contains(target) || dropdownMenuRef.value?.contains(target);
+      if (!targetInsideSelect) {
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        isOpen.value = false;
+        triggerRef.value?.focus();
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        event.stopPropagation();
+        moveHighlightedOption(1);
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        event.stopPropagation();
+        moveHighlightedOption(-1);
+        return;
+      }
+      if (event.key === "Enter" && highlightedOptionValue.value !== null) {
+        event.preventDefault();
+        event.stopPropagation();
+        selectHighlightedOption();
+      }
+    };
+    const handleOptionKeydown = (event, option) => {
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      if (props.multiple) {
+        toggleMultipleOption(option);
+        return;
+      }
+      selectOption(option);
+    };
     onMounted(() => {
       isMounted.value = true;
+      syncTeleportTarget();
       syncDarkMode();
       document.addEventListener("click", closeDropdown);
+      document.addEventListener("keydown", handleDropdownKeydown, true);
+      document.addEventListener("keydown", handleTypeaheadKeydown, true);
       window.addEventListener("resize", updateDropdownPosition);
       window.addEventListener("scroll", updateDropdownPosition, true);
     });
     onBeforeUnmount(() => {
+      clearTypeaheadQuery();
       document.removeEventListener("click", closeDropdown);
+      document.removeEventListener("keydown", handleDropdownKeydown, true);
+      document.removeEventListener("keydown", handleTypeaheadKeydown, true);
       window.removeEventListener("resize", updateDropdownPosition);
       window.removeEventListener("scroll", updateDropdownPosition, true);
     });
     watch(isOpen, async (open) => {
       if (!open) {
         searchQuery.value = "";
+        highlightedOptionValue.value = null;
+        clearTypeaheadQuery();
         return;
       }
+      clearTypeaheadQuery();
+      syncTeleportTarget();
       syncDarkMode();
       await nextTick();
       updateDropdownPosition();
+      if (props.searchable) {
+        await nextTick();
+        await syncHighlightedOption();
+        searchInputRef.value?.focus();
+        return;
+      }
+      const initialOption = props.multiple ? selectedMultipleOptions.value[0] ?? multipleOptions.value[0] : props.options.find((option) => optionValue(option) === props.modelValue || String(optionValue(option)) === String(props.modelValue)) ?? availableOptions.value[0];
+      if (initialOption) {
+        await setHighlightedOption(initialOption);
+      }
+    });
+    watch(filteredOptions, async () => {
+      if (!isOpen.value || !props.searchable) {
+        return;
+      }
+      await syncHighlightedOption();
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -1150,13 +1366,26 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
             class: normalizeClass((__props.multiple && selectedMultipleOptions.value.length === 0 || !__props.multiple && !__props.modelValue) && __props.placeholder ? __props.placeholderClass : null),
             style: normalizeStyle(darkTextStyle.value)
           }, toDisplayString(displayText.value), 7),
-          createVNode(unref(ChevronDownIcon), {
-            class: normalizeClass(["size-5 text-neutral-400 transition-transform dark:text-neutral-200", { "rotate-180": isOpen.value }])
-          }, null, 8, ["class"])
+          createElementVNode("div", _hoisted_1$t, [
+            canClearSelection.value ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: "inline-flex size-5 shrink-0 items-center justify-center rounded-full text-neutral-400 transition hover:bg-neutral-100 hover:text-neutral-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:hover:bg-neutral-900 dark:hover:text-neutral-200 dark:focus-visible:ring-neutral-100/20",
+              "aria-label": "Clear selection",
+              onClick: withModifiers(clearSelection, ["stop", "prevent"]),
+              onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              createVNode(unref(XMarkIcon), { class: "size-4" })
+            ], 32)) : createCommentVNode("", true),
+            createVNode(unref(ChevronDownIcon), {
+              class: normalizeClass(["size-5 text-neutral-400 transition-transform dark:text-neutral-200", { "rotate-180": isOpen.value }])
+            }, null, 8, ["class"])
+          ])
         ], 16),
         isMounted.value ? (openBlock(), createBlock(Teleport, {
           key: 0,
-          to: "body"
+          to: teleportTarget.value
         }, [
           createVNode(Transition, {
             "enter-active-class": "transition-all duration-200 ease-out",
@@ -1179,64 +1408,64 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                 }, [
                   __props.searchable ? withDirectives((openBlock(), createElementBlock("input", {
                     key: 0,
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+                    ref_key: "searchInputRef",
+                    ref: searchInputRef,
+                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => searchQuery.value = $event),
                     type: "text",
                     placeholder: __props.searchPlaceholder,
                     class: normalizeClass(__props.searchInputClass),
-                    onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                    onClick: _cache[2] || (_cache[2] = withModifiers(() => {
                     }, ["stop"])),
-                    onKeydown: _cache[2] || (_cache[2] = withModifiers(() => {
+                    onKeydown: _cache[3] || (_cache[3] = withModifiers(() => {
                     }, ["stop"]))
-                  }, null, 42, _hoisted_1$t)), [
+                  }, null, 42, _hoisted_2$j)), [
                     [vModelText, searchQuery.value]
                   ]) : createCommentVNode("", true),
-                  __props.placeholder && !__props.multiple ? (openBlock(), createElementBlock("div", {
-                    key: 1,
-                    class: normalizeClass([
-                      __props.dropdownOptionClass,
-                      __props.placeholderClass,
-                      { "text-gray-400": !__props.modelValue }
-                    ]),
-                    onClick: withModifiers(selectPlaceholder, ["stop"])
-                  }, [
-                    createElementVNode("span", {
-                      style: normalizeStyle(darkTextStyle.value)
-                    }, toDisplayString(__props.placeholder), 5)
-                  ], 2)) : createCommentVNode("", true),
                   selectedDeletedOption.value ? (openBlock(), createElementBlock("div", {
-                    key: 2,
+                    key: 1,
                     class: normalizeClass([
                       __props.dropdownOptionClass,
                       __props.deletedOptionClass,
                       __props.dropdownSelectedClass
                     ])
                   }, toDisplayString(optionText(selectedDeletedOption.value)), 3)) : createCommentVNode("", true),
+                  !hasVisibleOptions.value ? (openBlock(), createElementBlock("div", {
+                    key: 2,
+                    class: normalizeClass([__props.dropdownOptionClass, __props.placeholderClass, "cursor-default"]),
+                    style: normalizeStyle(darkTextStyle.value)
+                  }, toDisplayString(__props.noOptionsText), 7)) : createCommentVNode("", true),
                   (openBlock(true), createElementBlock(Fragment, null, renderList(filteredOptions.value, (option) => {
                     return openBlock(), createElementBlock("div", {
                       key: String(optionValue(option)),
+                      "data-option-value": String(optionValue(option) ?? ""),
+                      "data-select-option": "true",
+                      tabindex: "-1",
                       class: normalizeClass([
                         __props.dropdownOptionClass,
                         optionDeleted(option) ? __props.deletedOptionClass : __props.optionClass,
                         { "text-neutral-50": isDarkMode.value && !optionDeleted(option) },
                         {
+                          [__props.dropdownHighlightedClass]: optionIsHighlighted(option),
                           [__props.dropdownSelectedClass]: __props.multiple ? optionIsSelected(option) : optionValue(option) === __props.modelValue || String(optionValue(option)) === String(__props.modelValue),
-                          "rounded-b-lg": option === availableOptions.value[availableOptions.value.length - 1] && !__props.placeholder,
-                          "rounded-lg": !__props.placeholder && availableOptions.value.length === 1
+                          "rounded-b-lg": option === availableOptions.value[availableOptions.value.length - 1],
+                          "rounded-lg": availableOptions.value.length === 1
                         }
                       ]),
-                      onClick: withModifiers(($event) => __props.multiple ? toggleMultipleOption(option) : selectOption(option), ["stop"])
+                      onClick: withModifiers(($event) => __props.multiple ? toggleMultipleOption(option) : selectOption(option), ["stop"]),
+                      onFocus: ($event) => highlightedOptionValue.value = String(optionValue(option) ?? ""),
+                      onKeydown: ($event) => handleOptionKeydown($event, option)
                     }, [
-                      __props.multiple ? (openBlock(), createElementBlock("div", _hoisted_3$d, [
+                      __props.multiple ? (openBlock(), createElementBlock("div", _hoisted_4$a, [
                         createElementVNode("input", {
                           type: "checkbox",
                           class: "h-4 w-4 rounded border-neutral-300 text-neutral-900 focus:ring-neutral-900",
                           checked: optionIsSelected(option),
                           disabled: __props.disabled,
                           tabindex: "-1",
-                          onClick: _cache[3] || (_cache[3] = withModifiers(() => {
+                          onClick: _cache[4] || (_cache[4] = withModifiers(() => {
                           }, ["stop"])),
                           onChange: withModifiers(($event) => toggleMultipleOption(option), ["stop"])
-                        }, null, 40, _hoisted_4$a),
+                        }, null, 40, _hoisted_5$8),
                         createElementVNode("span", {
                           style: normalizeStyle(darkTextStyle.value)
                         }, toDisplayString(optionText(option)), 5)
@@ -1244,14 +1473,14 @@ const _sfc_main$G = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
                         key: 1,
                         style: normalizeStyle(darkTextStyle.value)
                       }, toDisplayString(optionText(option)), 5))
-                    ], 10, _hoisted_2$j);
+                    ], 42, _hoisted_3$d);
                   }), 128))
                 ], 2)
               ], 6)) : createCommentVNode("", true)
             ]),
             _: 1
           })
-        ])) : createCommentVNode("", true)
+        ], 8, ["to"])) : createCommentVNode("", true)
       ], 512);
     };
   }
@@ -1343,6 +1572,10 @@ const _sfc_main$F = {
       type: [String, Array, Object],
       default: "bg-blue-50 text-blue-700 font-medium dark:bg-neutral-900 dark:text-neutral-50"
     },
+    dropdownHighlightedClass: {
+      type: [String, Array, Object],
+      default: "bg-slate-100 text-slate-900 dark:bg-neutral-800 dark:text-neutral-50"
+    },
     searchable: {
       type: Boolean,
       default: false
@@ -1354,6 +1587,10 @@ const _sfc_main$F = {
     searchInputClass: {
       type: [String, Array, Object],
       default: "w-full border-b border-neutral-200 px-4 py-3 text-sm outline-none focus:border-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:focus:border-neutral-100"
+    },
+    noOptionsText: {
+      type: String,
+      default: "No options available"
     }
   },
   emits: ["update:modelValue"],
@@ -1382,11 +1619,13 @@ const _sfc_main$F = {
         "dropdown-class": __props.dropdownClass,
         "dropdown-option-class": __props.dropdownOptionClass,
         "dropdown-selected-class": __props.dropdownSelectedClass,
+        "dropdown-highlighted-class": __props.dropdownHighlightedClass,
         searchable: __props.searchable,
         "search-placeholder": __props.searchPlaceholder,
         "search-input-class": __props.searchInputClass,
+        "no-options-text": __props.noOptionsText,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
-      }, _ctx.$attrs), null, 16, ["model-value", "model-modifiers", "options", "placeholder", "placeholder-disabled", "multiple", "disabled", "soft-delete-aware", "label-key", "value-key", "deleted-key", "option-label", "base-class", "normal-text-class", "deleted-selected-class", "option-class", "deleted-option-class", "placeholder-class", "dropdown-class", "dropdown-option-class", "dropdown-selected-class", "searchable", "search-placeholder", "search-input-class"]);
+      }, _ctx.$attrs), null, 16, ["model-value", "model-modifiers", "options", "placeholder", "placeholder-disabled", "multiple", "disabled", "soft-delete-aware", "label-key", "value-key", "deleted-key", "option-label", "base-class", "normal-text-class", "deleted-selected-class", "option-class", "deleted-option-class", "placeholder-class", "dropdown-class", "dropdown-option-class", "dropdown-selected-class", "dropdown-highlighted-class", "searchable", "search-placeholder", "search-input-class", "no-options-text"]);
     };
   }
 };
@@ -1887,7 +2126,7 @@ const _sfc_main$D = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     };
   }
 });
-const DateRangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-5c96a933"]]);
+const DateRangeInput = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-0612bf1a"]]);
 const _hoisted_1$q = { class: "relative" };
 const _hoisted_2$h = { class: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" };
 const _hoisted_3$b = ["accept"];
@@ -3353,6 +3592,14 @@ const _sfc_main$v = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
     searchInputClass: {
       type: [String, Array, Object],
       default: void 0
+    },
+    dropdownHighlightedClass: {
+      type: [String, Array, Object],
+      default: void 0
+    },
+    noOptionsText: {
+      type: String,
+      default: void 0
     }
   },
   emits: ["update:modelValue", "blur"],
@@ -3460,6 +3707,10 @@ const _sfc_main$v = /* @__PURE__ */ Object.assign({ inheritAttrs: false }, {
         inputProps.searchPlaceholder = props.searchPlaceholder;
       if (props.searchInputClass !== void 0)
         inputProps.searchInputClass = props.searchInputClass;
+      if (props.dropdownHighlightedClass !== void 0)
+        inputProps.dropdownHighlightedClass = props.dropdownHighlightedClass;
+      if (props.noOptionsText !== void 0)
+        inputProps.noOptionsText = props.noOptionsText;
       return inputProps;
     });
     const notationBindings = computed(() => ({
@@ -6274,4 +6525,4 @@ export {
   _sfc_main$B as y,
   _sfc_main$A as z
 };
-//# sourceMappingURL=plugin-3CiafDXC.js.map
+//# sourceMappingURL=plugin-Bl7pzq-e.js.map