reka-ui 2.3.1 → 2.3.2

package/dist/Combobox/ComboboxRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxRoot.cjs","sources":["../../src/Combobox/ComboboxRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListboxRootProps } from '@/Listbox'\nimport type { AcceptableValue, GenericComponentInstance } from '@/shared/types'\nimport { usePrimitiveElement } from '@/Primitive'\nimport { createContext, useDirection, useFilter } from '@/shared'\n\ntype ComboboxRootContext<T> = {\n  modelValue: Ref<T | Array<T>>\n  multiple: Ref<boolean>\n  disabled: Ref<boolean>\n  open: Ref<boolean>\n  onOpenChange: (value: boolean) => void\n  isUserInputted: Ref<boolean>\n  isVirtual: Ref<boolean>\n  contentId: string\n  inputElement: Ref<HTMLInputElement | undefined>\n  onInputElementChange: (el: HTMLInputElement) => void\n  triggerElement: Ref<HTMLElement | undefined>\n  onTriggerElementChange: (el: HTMLElement) => void\n  highlightedElement: Ref<HTMLElement | undefined>\n  parentElement: Ref<HTMLElement | undefined>\n  resetSearchTermOnSelect: Ref<boolean>\n  onResetSearchTerm: EventHookOn\n  allItems: Ref<Map<string, string>>\n  allGroups: Ref<Map<string, Set<string>>>\n  filterState: {\n    search: string\n    filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n  }\n  ignoreFilter: Ref<boolean>\n}\n\nexport const [injectComboboxRootContext, provideComboboxRootContext]\n  = createContext<ComboboxRootContext<AcceptableValue>>('ComboboxRoot')\n\nexport type ComboboxRootEmits<T = AcceptableValue> = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: T]\n  /** Event handler when highlighted element changes. */\n  'highlight': [payload: { ref: HTMLElement, value: T } | undefined]\n  /** Event handler called when the open state of the combobox changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRootProps<T>, 'orientation' | 'selectionBehavior'> {\n  /** The controlled open state of the Combobox. Can be binded with with `v-model:open`. */\n  open?: boolean\n  /** The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox input blurred\n   * @defaultValue `true`\n   */\n  resetSearchTermOnBlur?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox value is selected\n   * @defaultValue `true`\n   */\n  resetSearchTermOnSelect?: boolean\n  /**\n   * When `true`, disable the default filters\n   */\n  ignoreFilter?: boolean\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport type { EventHookOn } from '@vueuse/core'\nimport { createEventHook, useVModel } from '@vueuse/core'\nimport { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'\nimport { ListboxRoot } from '@/Listbox'\nimport { PopperRoot } from '@/Popper'\n\nconst props = withDefaults(defineProps<ComboboxRootProps<T>>(), {\n  open: undefined,\n  resetSearchTermOnBlur: true,\n  resetSearchTermOnSelect: true,\n})\nconst emits = defineEmits<ComboboxRootEmits<T>>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()\nconst { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, dir: propDir } = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props as ComboboxRootProps<T>, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),\n  passive: (props.modelValue === undefined) as false,\n  deep: true,\n}) as Ref<T | T[]>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nasync function onOpenChange(val: boolean) {\n  open.value = val\n  filterState.search = ''\n\n  if (val) {\n    // make sure dom is ready then only highlight the selected\n    await nextTick()\n    primitiveElement.value?.highlightSelected()\n    isUserInputted.value = true\n  }\n  else {\n    isUserInputted.value = false\n  }\n\n  inputElement.value?.focus()\n  setTimeout(() => {\n    if (!val && props.resetSearchTermOnBlur)\n      resetSearchTerm.trigger()\n  }, 1)\n}\n\nconst resetSearchTerm = createEventHook()\nconst isUserInputted = ref(false)\nconst isVirtual = ref(false)\nconst inputElement = ref<HTMLInputElement>()\nconst triggerElement = ref<HTMLElement>()\n\nconst highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n  search: '',\n  filtered: {\n    /** The count of all visible items. */\n    count: 0,\n    /** Map from visible item id to its search score. */\n    items: new Map() as Map<string, number>,\n    /** Set of groups with at least one visible item. */\n    groups: new Set() as Set<string>,\n  },\n})\n\nfunction filterItems() {\n  if (!filterState.search || props.ignoreFilter || isVirtual.value) {\n    filterState.filtered.count = allItems.value.size\n    // Do nothing, each item will know to show itself because search is empty\n    return\n  }\n\n  // Reset the groups\n  filterState.filtered.groups = new Set()\n  let itemCount = 0\n\n  // Check which items should be included\n  for (const [id, value] of allItems.value) {\n    const score = contains(value, filterState.search)\n    filterState.filtered.items.set(id, score ? 1 : 0)\n    if (score)\n      itemCount++\n  }\n\n  // Check which groups have at least 1 item shown\n  for (const [groupId, group] of allGroups.value) {\n    for (const itemId of group) {\n      if (filterState.filtered.items.get(itemId)! > 0) {\n        filterState.filtered.groups.add(groupId)\n        break\n      }\n    }\n  }\n\n  filterState.filtered.count = itemCount\n}\n\nwatch([() => filterState.search, () => allItems.value.size], () => {\n  filterItems()\n}, { immediate: true })\n\nwatch(() => open.value, () => {\n  // nextTick to allow multiple items to be mounted first\n  nextTick(() => {\n    if (open.value)\n      filterItems()\n  })\n}, { flush: 'post' })\n\nconst inst = getCurrentInstance()\nonMounted(() => {\n  if (inst?.exposed) {\n    inst.exposed.highlightItem = primitiveElement.value?.highlightItem\n    inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem\n    inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected\n  }\n})\n\ndefineExpose({\n  filtered: computed(() => filterState.filtered),\n  highlightedElement,\n  highlightItem: primitiveElement.value?.highlightItem,\n  highlightFirstItem: primitiveElement.value?.highlightFirstItem,\n  highlightSelected: primitiveElement.value?.highlightSelected,\n})\n\nprovideComboboxRootContext({\n  modelValue,\n  multiple,\n  disabled,\n  open,\n  onOpenChange,\n  contentId: '',\n  isUserInputted,\n  isVirtual,\n  inputElement,\n  highlightedElement,\n  onInputElementChange: val => inputElement.value = val,\n  triggerElement,\n  onTriggerElementChange: val => triggerElement.value = val,\n  parentElement,\n  resetSearchTermOnSelect,\n  onResetSearchTerm: resetSearchTerm.on,\n  allItems,\n  allGroups,\n  filterState,\n  ignoreFilter,\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <ListboxRoot\n      ref=\"primitiveElement\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :style=\"{\n        pointerEvents: open ? 'auto' : undefined,\n      }\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :dir=\"dir\"\n      :multiple=\"multiple\"\n      :name=\"name\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n      :highlight-on-hover=\"true\"\n      :by=\"props.by as any\"\n      @highlight=\"emits('highlight', $event as any)\"\n    >\n      <slot\n        :open=\"open\"\n        :model-value=\"modelValue\"\n      />\n    </ListboxRoot>\n  </PopperRoot>\n</template>\n"],"names":["createContext","usePrimitiveElement","toRefs","useDirection","useVModel","nextTick","createEventHook","ref","computed","useFilter","reactive","watch","getCurrentInstance","onMounted"],"mappings":"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"}
+{"version":3,"file":"ComboboxRoot.cjs","sources":["../../src/Combobox/ComboboxRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { ListboxRootProps } from '@/Listbox'\nimport type { AcceptableValue, GenericComponentInstance } from '@/shared/types'\nimport { usePrimitiveElement } from '@/Primitive'\nimport { createContext, useDirection, useFilter } from '@/shared'\n\ntype ComboboxRootContext<T> = {\n  modelValue: Ref<T | Array<T>>\n  multiple: Ref<boolean>\n  disabled: Ref<boolean>\n  open: Ref<boolean>\n  onOpenChange: (value: boolean) => void\n  isUserInputted: Ref<boolean>\n  isVirtual: Ref<boolean>\n  contentId: string\n  inputElement: Ref<HTMLInputElement | undefined>\n  onInputElementChange: (el: HTMLInputElement) => void\n  triggerElement: Ref<HTMLElement | undefined>\n  onTriggerElementChange: (el: HTMLElement) => void\n  highlightedElement: Ref<HTMLElement | undefined>\n  parentElement: Ref<HTMLElement | undefined>\n  resetSearchTermOnSelect: Ref<boolean>\n  onResetSearchTerm: EventHookOn\n  allItems: Ref<Map<string, string>>\n  allGroups: Ref<Map<string, Set<string>>>\n  filterSearch: Ref<string>\n  filterState: ComputedRef<{ count: number, items: Map<string, number>, groups: Set<string> }>\n  ignoreFilter: Ref<boolean>\n}\n\nexport const [injectComboboxRootContext, provideComboboxRootContext]\n  = createContext<ComboboxRootContext<AcceptableValue>>('ComboboxRoot')\n\nexport type ComboboxRootEmits<T = AcceptableValue> = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: T]\n  /** Event handler when highlighted element changes. */\n  'highlight': [payload: { ref: HTMLElement, value: T } | undefined]\n  /** Event handler called when the open state of the combobox changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRootProps<T>, 'orientation' | 'selectionBehavior'> {\n  /** The controlled open state of the Combobox. Can be binded with with `v-model:open`. */\n  open?: boolean\n  /** The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox input blurred\n   * @defaultValue `true`\n   */\n  resetSearchTermOnBlur?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox value is selected\n   * @defaultValue `true`\n   */\n  resetSearchTermOnSelect?: boolean\n  /**\n   * When `true`, disable the default filters\n   */\n  ignoreFilter?: boolean\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport type { EventHookOn } from '@vueuse/core'\nimport { createEventHook, useVModel } from '@vueuse/core'\nimport { computed, getCurrentInstance, nextTick, onMounted, ref, toRefs } from 'vue'\nimport { ListboxRoot } from '@/Listbox'\nimport { PopperRoot } from '@/Popper'\n\nconst props = withDefaults(defineProps<ComboboxRootProps<T>>(), {\n  open: undefined,\n  resetSearchTermOnBlur: true,\n  resetSearchTermOnSelect: true,\n})\nconst emits = defineEmits<ComboboxRootEmits<T>>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()\nconst { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, dir: propDir } = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props as ComboboxRootProps<T>, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),\n  passive: (props.modelValue === undefined) as false,\n  deep: true,\n}) as Ref<T | T[]>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nasync function onOpenChange(val: boolean) {\n  open.value = val\n  filterSearch.value = ''\n\n  if (val) {\n    // make sure dom is ready then only highlight the selected\n    await nextTick()\n    primitiveElement.value?.highlightSelected()\n    isUserInputted.value = true\n  }\n  else {\n    isUserInputted.value = false\n  }\n\n  inputElement.value?.focus()\n  setTimeout(() => {\n    if (!val && props.resetSearchTermOnBlur)\n      resetSearchTerm.trigger()\n  }, 1)\n}\n\nconst resetSearchTerm = createEventHook()\nconst isUserInputted = ref(false)\nconst isVirtual = ref(false)\nconst inputElement = ref<HTMLInputElement>()\nconst triggerElement = ref<HTMLElement>()\n\nconst highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\n\nconst filterSearch = ref('')\n\nconst filterState = computed<{\n  count: number\n  items: Map<string, number>\n  groups: Set<string>\n}>((oldValue) => {\n  if (!filterSearch.value || props.ignoreFilter || isVirtual.value) {\n    // Do nothing, each item will know to show itself because search is empty\n    return {\n      count: allItems.value.size,\n      items: oldValue?.items ?? new Map(),\n      groups: oldValue?.groups ?? new Set(allGroups.value.keys()),\n    }\n  }\n\n  let itemCount = 0\n  const filteredItems = new Map<string, number>()\n  const filteredGroups = new Set<string>()\n\n  // Check which items should be included\n  for (const [id, value] of allItems.value) {\n    const score = contains(value, filterSearch.value)\n    filteredItems.set(id, score ? 1 : 0)\n    if (score)\n      itemCount++\n  }\n\n  // Check which groups have at least 1 item shown\n  for (const [groupId, group] of allGroups.value) {\n    for (const itemId of group) {\n      if (filteredItems.get(itemId)! > 0) {\n        filteredGroups.add(groupId)\n        break\n      }\n    }\n  }\n\n  return {\n    count: itemCount,\n    items: filteredItems,\n    groups: filteredGroups,\n  }\n})\n\nconst inst = getCurrentInstance()\nonMounted(() => {\n  if (inst?.exposed) {\n    inst.exposed.highlightItem = primitiveElement.value?.highlightItem\n    inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem\n    inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected\n  }\n})\n\ndefineExpose({\n  filtered: filterState,\n  highlightedElement,\n  highlightItem: primitiveElement.value?.highlightItem,\n  highlightFirstItem: primitiveElement.value?.highlightFirstItem,\n  highlightSelected: primitiveElement.value?.highlightSelected,\n})\n\nprovideComboboxRootContext({\n  modelValue,\n  multiple,\n  disabled,\n  open,\n  onOpenChange,\n  contentId: '',\n  isUserInputted,\n  isVirtual,\n  inputElement,\n  highlightedElement,\n  onInputElementChange: val => inputElement.value = val,\n  triggerElement,\n  onTriggerElementChange: val => triggerElement.value = val,\n  parentElement,\n  resetSearchTermOnSelect,\n  onResetSearchTerm: resetSearchTerm.on,\n  allItems,\n  allGroups,\n  filterSearch,\n  filterState,\n  ignoreFilter,\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <ListboxRoot\n      ref=\"primitiveElement\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :style=\"{\n        pointerEvents: open ? 'auto' : undefined,\n      }\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :dir=\"dir\"\n      :multiple=\"multiple\"\n      :name=\"name\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n      :highlight-on-hover=\"true\"\n      :by=\"props.by as any\"\n      @highlight=\"emits('highlight', $event as any)\"\n    >\n      <slot\n        :open=\"open\"\n        :model-value=\"modelValue\"\n      />\n    </ListboxRoot>\n  </PopperRoot>\n</template>\n"],"names":["createContext","usePrimitiveElement","toRefs","useDirection","useVModel","nextTick","createEventHook","ref","computed","useFilter","getCurrentInstance","onMounted"],"mappings":"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"}

package/dist/Combobox/ComboboxRoot.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, ref, computed, reactive, watch, nextTick, getCurrentInstance, onMounted, createBlock, openBlock, unref, withCtx, createVNode, mergeProps, isRef, renderSlot } from 'vue';
+import { defineComponent, toRefs, ref, computed, getCurrentInstance, onMounted, createBlock, openBlock, unref, withCtx, createVNode, mergeProps, isRef, renderSlot, nextTick } from 'vue';
 import { useVModel, createEventHook } from '@vueuse/core';
 import { _ as _sfc_main$1 } from '../Popper/PopperRoot.js';
 import { c as createContext } from '../shared/createContext.js';
@@ -46,7 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     async function onOpenChange(val) {
       open.value = val;
-      filterState.search = "";
+      filterSearch.value = "";
       if (val) {
         await nextTick();
         primitiveElement.value?.highlightSelected();
@@ -69,49 +69,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const allItems = ref(/* @__PURE__ */ new Map());
     const allGroups = ref(/* @__PURE__ */ new Map());
     const { contains } = useFilter({ sensitivity: "base" });
-    const filterState = reactive({
-      search: "",
-      filtered: {
-        /** The count of all visible items. */
-        count: 0,
-        /** Map from visible item id to its search score. */
-        items: /* @__PURE__ */ new Map(),
-        /** Set of groups with at least one visible item. */
-        groups: /* @__PURE__ */ new Set()
+    const filterSearch = ref("");
+    const filterState = computed((oldValue) => {
+      if (!filterSearch.value || props.ignoreFilter || isVirtual.value) {
+        return {
+          count: allItems.value.size,
+          items: oldValue?.items ?? /* @__PURE__ */ new Map(),
+          groups: oldValue?.groups ?? new Set(allGroups.value.keys())
+        };
       }
-    });
-    function filterItems() {
-      if (!filterState.search || props.ignoreFilter || isVirtual.value) {
-        filterState.filtered.count = allItems.value.size;
-        return;
-      }
-      filterState.filtered.groups = /* @__PURE__ */ new Set();
       let itemCount = 0;
+      const filteredItems = /* @__PURE__ */ new Map();
+      const filteredGroups = /* @__PURE__ */ new Set();
       for (const [id, value] of allItems.value) {
-        const score = contains(value, filterState.search);
-        filterState.filtered.items.set(id, score ? 1 : 0);
+        const score = contains(value, filterSearch.value);
+        filteredItems.set(id, score ? 1 : 0);
         if (score)
           itemCount++;
       }
       for (const [groupId, group] of allGroups.value) {
         for (const itemId of group) {
-          if (filterState.filtered.items.get(itemId) > 0) {
-            filterState.filtered.groups.add(groupId);
+          if (filteredItems.get(itemId) > 0) {
+            filteredGroups.add(groupId);
             break;
           }
         }
       }
-      filterState.filtered.count = itemCount;
-    }
-    watch([() => filterState.search, () => allItems.value.size], () => {
-      filterItems();
-    }, { immediate: true });
-    watch(() => open.value, () => {
-      nextTick(() => {
-        if (open.value)
-          filterItems();
-      });
-    }, { flush: "post" });
+      return {
+        count: itemCount,
+        items: filteredItems,
+        groups: filteredGroups
+      };
+    });
     const inst = getCurrentInstance();
     onMounted(() => {
       if (inst?.exposed) {
@@ -121,7 +110,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     __expose({
-      filtered: computed(() => filterState.filtered),
+      filtered: filterState,
       highlightedElement,
       highlightItem: primitiveElement.value?.highlightItem,
       highlightFirstItem: primitiveElement.value?.highlightFirstItem,
@@ -146,6 +135,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       onResetSearchTerm: resetSearchTerm.on,
       allItems,
       allGroups,
+      filterSearch,
       filterState,
       ignoreFilter
     });

package/dist/Combobox/ComboboxRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxRoot.js","sources":["../../src/Combobox/ComboboxRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListboxRootProps } from '@/Listbox'\nimport type { AcceptableValue, GenericComponentInstance } from '@/shared/types'\nimport { usePrimitiveElement } from '@/Primitive'\nimport { createContext, useDirection, useFilter } from '@/shared'\n\ntype ComboboxRootContext<T> = {\n  modelValue: Ref<T | Array<T>>\n  multiple: Ref<boolean>\n  disabled: Ref<boolean>\n  open: Ref<boolean>\n  onOpenChange: (value: boolean) => void\n  isUserInputted: Ref<boolean>\n  isVirtual: Ref<boolean>\n  contentId: string\n  inputElement: Ref<HTMLInputElement | undefined>\n  onInputElementChange: (el: HTMLInputElement) => void\n  triggerElement: Ref<HTMLElement | undefined>\n  onTriggerElementChange: (el: HTMLElement) => void\n  highlightedElement: Ref<HTMLElement | undefined>\n  parentElement: Ref<HTMLElement | undefined>\n  resetSearchTermOnSelect: Ref<boolean>\n  onResetSearchTerm: EventHookOn\n  allItems: Ref<Map<string, string>>\n  allGroups: Ref<Map<string, Set<string>>>\n  filterState: {\n    search: string\n    filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n  }\n  ignoreFilter: Ref<boolean>\n}\n\nexport const [injectComboboxRootContext, provideComboboxRootContext]\n  = createContext<ComboboxRootContext<AcceptableValue>>('ComboboxRoot')\n\nexport type ComboboxRootEmits<T = AcceptableValue> = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: T]\n  /** Event handler when highlighted element changes. */\n  'highlight': [payload: { ref: HTMLElement, value: T } | undefined]\n  /** Event handler called when the open state of the combobox changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRootProps<T>, 'orientation' | 'selectionBehavior'> {\n  /** The controlled open state of the Combobox. Can be binded with with `v-model:open`. */\n  open?: boolean\n  /** The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox input blurred\n   * @defaultValue `true`\n   */\n  resetSearchTermOnBlur?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox value is selected\n   * @defaultValue `true`\n   */\n  resetSearchTermOnSelect?: boolean\n  /**\n   * When `true`, disable the default filters\n   */\n  ignoreFilter?: boolean\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport type { EventHookOn } from '@vueuse/core'\nimport { createEventHook, useVModel } from '@vueuse/core'\nimport { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'\nimport { ListboxRoot } from '@/Listbox'\nimport { PopperRoot } from '@/Popper'\n\nconst props = withDefaults(defineProps<ComboboxRootProps<T>>(), {\n  open: undefined,\n  resetSearchTermOnBlur: true,\n  resetSearchTermOnSelect: true,\n})\nconst emits = defineEmits<ComboboxRootEmits<T>>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()\nconst { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, dir: propDir } = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props as ComboboxRootProps<T>, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),\n  passive: (props.modelValue === undefined) as false,\n  deep: true,\n}) as Ref<T | T[]>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nasync function onOpenChange(val: boolean) {\n  open.value = val\n  filterState.search = ''\n\n  if (val) {\n    // make sure dom is ready then only highlight the selected\n    await nextTick()\n    primitiveElement.value?.highlightSelected()\n    isUserInputted.value = true\n  }\n  else {\n    isUserInputted.value = false\n  }\n\n  inputElement.value?.focus()\n  setTimeout(() => {\n    if (!val && props.resetSearchTermOnBlur)\n      resetSearchTerm.trigger()\n  }, 1)\n}\n\nconst resetSearchTerm = createEventHook()\nconst isUserInputted = ref(false)\nconst isVirtual = ref(false)\nconst inputElement = ref<HTMLInputElement>()\nconst triggerElement = ref<HTMLElement>()\n\nconst highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n  search: '',\n  filtered: {\n    /** The count of all visible items. */\n    count: 0,\n    /** Map from visible item id to its search score. */\n    items: new Map() as Map<string, number>,\n    /** Set of groups with at least one visible item. */\n    groups: new Set() as Set<string>,\n  },\n})\n\nfunction filterItems() {\n  if (!filterState.search || props.ignoreFilter || isVirtual.value) {\n    filterState.filtered.count = allItems.value.size\n    // Do nothing, each item will know to show itself because search is empty\n    return\n  }\n\n  // Reset the groups\n  filterState.filtered.groups = new Set()\n  let itemCount = 0\n\n  // Check which items should be included\n  for (const [id, value] of allItems.value) {\n    const score = contains(value, filterState.search)\n    filterState.filtered.items.set(id, score ? 1 : 0)\n    if (score)\n      itemCount++\n  }\n\n  // Check which groups have at least 1 item shown\n  for (const [groupId, group] of allGroups.value) {\n    for (const itemId of group) {\n      if (filterState.filtered.items.get(itemId)! > 0) {\n        filterState.filtered.groups.add(groupId)\n        break\n      }\n    }\n  }\n\n  filterState.filtered.count = itemCount\n}\n\nwatch([() => filterState.search, () => allItems.value.size], () => {\n  filterItems()\n}, { immediate: true })\n\nwatch(() => open.value, () => {\n  // nextTick to allow multiple items to be mounted first\n  nextTick(() => {\n    if (open.value)\n      filterItems()\n  })\n}, { flush: 'post' })\n\nconst inst = getCurrentInstance()\nonMounted(() => {\n  if (inst?.exposed) {\n    inst.exposed.highlightItem = primitiveElement.value?.highlightItem\n    inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem\n    inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected\n  }\n})\n\ndefineExpose({\n  filtered: computed(() => filterState.filtered),\n  highlightedElement,\n  highlightItem: primitiveElement.value?.highlightItem,\n  highlightFirstItem: primitiveElement.value?.highlightFirstItem,\n  highlightSelected: primitiveElement.value?.highlightSelected,\n})\n\nprovideComboboxRootContext({\n  modelValue,\n  multiple,\n  disabled,\n  open,\n  onOpenChange,\n  contentId: '',\n  isUserInputted,\n  isVirtual,\n  inputElement,\n  highlightedElement,\n  onInputElementChange: val => inputElement.value = val,\n  triggerElement,\n  onTriggerElementChange: val => triggerElement.value = val,\n  parentElement,\n  resetSearchTermOnSelect,\n  onResetSearchTerm: resetSearchTerm.on,\n  allItems,\n  allGroups,\n  filterState,\n  ignoreFilter,\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <ListboxRoot\n      ref=\"primitiveElement\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :style=\"{\n        pointerEvents: open ? 'auto' : undefined,\n      }\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :dir=\"dir\"\n      :multiple=\"multiple\"\n      :name=\"name\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n      :highlight-on-hover=\"true\"\n      :by=\"props.by as any\"\n      @highlight=\"emits('highlight', $event as any)\"\n    >\n      <slot\n        :open=\"open\"\n        :model-value=\"modelValue\"\n      />\n    </ListboxRoot>\n  </PopperRoot>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComboboxRoot.js","sources":["../../src/Combobox/ComboboxRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, Ref } from 'vue'\nimport type { ListboxRootProps } from '@/Listbox'\nimport type { AcceptableValue, GenericComponentInstance } from '@/shared/types'\nimport { usePrimitiveElement } from '@/Primitive'\nimport { createContext, useDirection, useFilter } from '@/shared'\n\ntype ComboboxRootContext<T> = {\n  modelValue: Ref<T | Array<T>>\n  multiple: Ref<boolean>\n  disabled: Ref<boolean>\n  open: Ref<boolean>\n  onOpenChange: (value: boolean) => void\n  isUserInputted: Ref<boolean>\n  isVirtual: Ref<boolean>\n  contentId: string\n  inputElement: Ref<HTMLInputElement | undefined>\n  onInputElementChange: (el: HTMLInputElement) => void\n  triggerElement: Ref<HTMLElement | undefined>\n  onTriggerElementChange: (el: HTMLElement) => void\n  highlightedElement: Ref<HTMLElement | undefined>\n  parentElement: Ref<HTMLElement | undefined>\n  resetSearchTermOnSelect: Ref<boolean>\n  onResetSearchTerm: EventHookOn\n  allItems: Ref<Map<string, string>>\n  allGroups: Ref<Map<string, Set<string>>>\n  filterSearch: Ref<string>\n  filterState: ComputedRef<{ count: number, items: Map<string, number>, groups: Set<string> }>\n  ignoreFilter: Ref<boolean>\n}\n\nexport const [injectComboboxRootContext, provideComboboxRootContext]\n  = createContext<ComboboxRootContext<AcceptableValue>>('ComboboxRoot')\n\nexport type ComboboxRootEmits<T = AcceptableValue> = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: T]\n  /** Event handler when highlighted element changes. */\n  'highlight': [payload: { ref: HTMLElement, value: T } | undefined]\n  /** Event handler called when the open state of the combobox changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRootProps<T>, 'orientation' | 'selectionBehavior'> {\n  /** The controlled open state of the Combobox. Can be binded with with `v-model:open`. */\n  open?: boolean\n  /** The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox input blurred\n   * @defaultValue `true`\n   */\n  resetSearchTermOnBlur?: boolean\n  /**\n   * Whether to reset the searchTerm when the Combobox value is selected\n   * @defaultValue `true`\n   */\n  resetSearchTermOnSelect?: boolean\n  /**\n   * When `true`, disable the default filters\n   */\n  ignoreFilter?: boolean\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport type { EventHookOn } from '@vueuse/core'\nimport { createEventHook, useVModel } from '@vueuse/core'\nimport { computed, getCurrentInstance, nextTick, onMounted, ref, toRefs } from 'vue'\nimport { ListboxRoot } from '@/Listbox'\nimport { PopperRoot } from '@/Popper'\n\nconst props = withDefaults(defineProps<ComboboxRootProps<T>>(), {\n  open: undefined,\n  resetSearchTermOnBlur: true,\n  resetSearchTermOnSelect: true,\n})\nconst emits = defineEmits<ComboboxRootEmits<T>>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n    /** Current active value */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()\nconst { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, dir: propDir } = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props as ComboboxRootProps<T>, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),\n  passive: (props.modelValue === undefined) as false,\n  deep: true,\n}) as Ref<T | T[]>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nasync function onOpenChange(val: boolean) {\n  open.value = val\n  filterSearch.value = ''\n\n  if (val) {\n    // make sure dom is ready then only highlight the selected\n    await nextTick()\n    primitiveElement.value?.highlightSelected()\n    isUserInputted.value = true\n  }\n  else {\n    isUserInputted.value = false\n  }\n\n  inputElement.value?.focus()\n  setTimeout(() => {\n    if (!val && props.resetSearchTermOnBlur)\n      resetSearchTerm.trigger()\n  }, 1)\n}\n\nconst resetSearchTerm = createEventHook()\nconst isUserInputted = ref(false)\nconst isVirtual = ref(false)\nconst inputElement = ref<HTMLInputElement>()\nconst triggerElement = ref<HTMLElement>()\n\nconst highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\n\nconst filterSearch = ref('')\n\nconst filterState = computed<{\n  count: number\n  items: Map<string, number>\n  groups: Set<string>\n}>((oldValue) => {\n  if (!filterSearch.value || props.ignoreFilter || isVirtual.value) {\n    // Do nothing, each item will know to show itself because search is empty\n    return {\n      count: allItems.value.size,\n      items: oldValue?.items ?? new Map(),\n      groups: oldValue?.groups ?? new Set(allGroups.value.keys()),\n    }\n  }\n\n  let itemCount = 0\n  const filteredItems = new Map<string, number>()\n  const filteredGroups = new Set<string>()\n\n  // Check which items should be included\n  for (const [id, value] of allItems.value) {\n    const score = contains(value, filterSearch.value)\n    filteredItems.set(id, score ? 1 : 0)\n    if (score)\n      itemCount++\n  }\n\n  // Check which groups have at least 1 item shown\n  for (const [groupId, group] of allGroups.value) {\n    for (const itemId of group) {\n      if (filteredItems.get(itemId)! > 0) {\n        filteredGroups.add(groupId)\n        break\n      }\n    }\n  }\n\n  return {\n    count: itemCount,\n    items: filteredItems,\n    groups: filteredGroups,\n  }\n})\n\nconst inst = getCurrentInstance()\nonMounted(() => {\n  if (inst?.exposed) {\n    inst.exposed.highlightItem = primitiveElement.value?.highlightItem\n    inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem\n    inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected\n  }\n})\n\ndefineExpose({\n  filtered: filterState,\n  highlightedElement,\n  highlightItem: primitiveElement.value?.highlightItem,\n  highlightFirstItem: primitiveElement.value?.highlightFirstItem,\n  highlightSelected: primitiveElement.value?.highlightSelected,\n})\n\nprovideComboboxRootContext({\n  modelValue,\n  multiple,\n  disabled,\n  open,\n  onOpenChange,\n  contentId: '',\n  isUserInputted,\n  isVirtual,\n  inputElement,\n  highlightedElement,\n  onInputElementChange: val => inputElement.value = val,\n  triggerElement,\n  onTriggerElementChange: val => triggerElement.value = val,\n  parentElement,\n  resetSearchTermOnSelect,\n  onResetSearchTerm: resetSearchTerm.on,\n  allItems,\n  allGroups,\n  filterSearch,\n  filterState,\n  ignoreFilter,\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <ListboxRoot\n      ref=\"primitiveElement\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\n      :style=\"{\n        pointerEvents: open ? 'auto' : undefined,\n      }\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :dir=\"dir\"\n      :multiple=\"multiple\"\n      :name=\"name\"\n      :required=\"required\"\n      :disabled=\"disabled\"\n      :highlight-on-hover=\"true\"\n      :by=\"props.by as any\"\n      @highlight=\"emits('highlight', $event as any)\"\n    >\n      <slot\n        :open=\"open\"\n        :model-value=\"modelValue\"\n      />\n    </ListboxRoot>\n  </PopperRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;;;AA+BO,MAAM,CAAC,yBAAA,EAA2B,0BAA0B,CAAA,GAC/D,cAAoD,cAAc;;;;;;;;;;;;;;;;;;;;;;;AAwCtE,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAWd,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAgB,EAAA,aAAA,KAAkB,mBAAkE,EAAA;AAC9H,IAAM,MAAA,EAAE,UAAU,QAAU,EAAA,YAAA,EAAc,yBAAyB,GAAK,EAAA,OAAA,EAAY,GAAA,MAAA,CAAO,KAAK,CAAA;AAEhG,IAAM,MAAA,GAAA,GAAM,aAAa,OAAO,CAAA;AAEhC,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAA+B,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MAC/E,cAAc,KAAM,CAAA,YAAA,KAAiB,QAAS,CAAA,KAAA,GAAQ,EAAK,GAAA,MAAA,CAAA;AAAA,MAC3D,OAAA,EAAU,MAAM,UAAe,KAAA,MAAA;AAAA,MAC/B,IAAM,EAAA;AAAA,KACP,CAAA;AAED,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,KAAO,EAAA;AAAA,MAC3C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAA,eAAe,aAAa,GAAc,EAAA;AACxC,MAAA,IAAA,CAAK,KAAQ,GAAA,GAAA;AACb,MAAA,YAAA,CAAa,KAAQ,GAAA,EAAA;AAErB,MAAA,IAAI,GAAK,EAAA;AAEP,QAAA,MAAM,QAAS,EAAA;AACf,QAAA,gBAAA,CAAiB,OAAO,iBAAkB,EAAA;AAC1C,QAAA,cAAA,CAAe,KAAQ,GAAA,IAAA;AAAA,OAEpB,MAAA;AACH,QAAA,cAAA,CAAe,KAAQ,GAAA,KAAA;AAAA;AAGzB,MAAA,YAAA,CAAa,OAAO,KAAM,EAAA;AAC1B,MAAA,UAAA,CAAW,MAAM;AACf,QAAI,IAAA,CAAC,OAAO,KAAM,CAAA,qBAAA;AAChB,UAAA,eAAA,CAAgB,OAAQ,EAAA;AAAA,SACzB,CAAC,CAAA;AAAA;AAGN,IAAA,MAAM,kBAAkB,eAAgB,EAAA;AACxC,IAAM,MAAA,cAAA,GAAiB,IAAI,KAAK,CAAA;AAChC,IAAM,MAAA,SAAA,GAAY,IAAI,KAAK,CAAA;AAC3B,IAAA,MAAM,eAAe,GAAsB,EAAA;AAC3C,IAAA,MAAM,iBAAiB,GAAiB,EAAA;AAExC,IAAA,MAAM,qBAAqB,QAAS,CAAA,MAAM,gBAAiB,CAAA,KAAA,EAAO,sBAAsB,MAAS,CAAA;AAEjG,IAAA,MAAM,QAAW,GAAA,GAAA,iBAA6B,IAAA,GAAA,EAAK,CAAA;AACnD,IAAA,MAAM,SAAY,GAAA,GAAA,iBAAkC,IAAA,GAAA,EAAK,CAAA;AAEzD,IAAA,MAAM,EAAE,QAAS,EAAA,GAAI,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AAEtD,IAAM,MAAA,YAAA,GAAe,IAAI,EAAE,CAAA;AAE3B,IAAM,MAAA,WAAA,GAAc,QAIjB,CAAA,CAAC,QAAa,KAAA;AACf,MAAA,IAAI,CAAC,YAAa,CAAA,KAAA,IAAS,KAAM,CAAA,YAAA,IAAgB,UAAU,KAAO,EAAA;AAEhE,QAAO,OAAA;AAAA,UACL,KAAA,EAAO,SAAS,KAAM,CAAA,IAAA;AAAA,UACtB,KAAO,EAAA,QAAA,EAAU,KAAS,oBAAA,IAAI,GAAI,EAAA;AAAA,UAClC,MAAA,EAAQ,UAAU,MAAU,IAAA,IAAI,IAAI,SAAU,CAAA,KAAA,CAAM,MAAM;AAAA,SAC5D;AAAA;AAGF,MAAA,IAAI,SAAY,GAAA,CAAA;AAChB,MAAM,MAAA,aAAA,uBAAoB,GAAoB,EAAA;AAC9C,MAAM,MAAA,cAAA,uBAAqB,GAAY,EAAA;AAGvC,MAAA,KAAA,MAAW,CAAC,EAAA,EAAI,KAAK,CAAA,IAAK,SAAS,KAAO,EAAA;AACxC,QAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,KAAO,EAAA,YAAA,CAAa,KAAK,CAAA;AAChD,QAAA,aAAA,CAAc,GAAI,CAAA,EAAA,EAAI,KAAQ,GAAA,CAAA,GAAI,CAAC,CAAA;AACnC,QAAI,IAAA,KAAA;AACF,UAAA,SAAA,EAAA;AAAA;AAIJ,MAAA,KAAA,MAAW,CAAC,OAAA,EAAS,KAAK,CAAA,IAAK,UAAU,KAAO,EAAA;AAC9C,QAAA,KAAA,MAAW,UAAU,KAAO,EAAA;AAC1B,UAAA,IAAI,aAAc,CAAA,GAAA,CAAI,MAAM,CAAA,GAAK,CAAG,EAAA;AAClC,YAAA,cAAA,CAAe,IAAI,OAAO,CAAA;AAC1B,YAAA;AAAA;AACF;AACF;AAGF,MAAO,OAAA;AAAA,QACL,KAAO,EAAA,SAAA;AAAA,QACP,KAAO,EAAA,aAAA;AAAA,QACP,MAAQ,EAAA;AAAA,OACV;AAAA,KACD,CAAA;AAED,IAAA,MAAM,OAAO,kBAAmB,EAAA;AAChC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,MAAM,OAAS,EAAA;AACjB,QAAK,IAAA,CAAA,OAAA,CAAQ,aAAgB,GAAA,gBAAA,CAAiB,KAAO,EAAA,aAAA;AACrD,QAAK,IAAA,CAAA,OAAA,CAAQ,kBAAqB,GAAA,gBAAA,CAAiB,KAAO,EAAA,kBAAA;AAC1D,QAAK,IAAA,CAAA,OAAA,CAAQ,iBAAoB,GAAA,gBAAA,CAAiB,KAAO,EAAA,iBAAA;AAAA;AAC3D,KACD,CAAA;AAED,IAAa,QAAA,CAAA;AAAA,MACX,QAAU,EAAA,WAAA;AAAA,MACV,kBAAA;AAAA,MACA,aAAA,EAAe,iBAAiB,KAAO,EAAA,aAAA;AAAA,MACvC,kBAAA,EAAoB,iBAAiB,KAAO,EAAA,kBAAA;AAAA,MAC5C,iBAAA,EAAmB,iBAAiB,KAAO,EAAA;AAAA,KAC5C,CAAA;AAED,IAA2B,0BAAA,CAAA;AAAA,MACzB,UAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,cAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,kBAAA;AAAA,MACA,oBAAA,EAAsB,CAAO,GAAA,KAAA,YAAA,CAAa,KAAQ,GAAA,GAAA;AAAA,MAClD,cAAA;AAAA,MACA,sBAAA,EAAwB,CAAO,GAAA,KAAA,cAAA,CAAe,KAAQ,GAAA,GAAA;AAAA,MACtD,aAAA;AAAA,MACA,uBAAA;AAAA,MACA,mBAAmB,eAAgB,CAAA,EAAA;AAAA,MACnC,QAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DateRangePicker/DateRangePickerCalendar.cjs

@@ -28,7 +28,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         minValue: vue.unref(rootContext).minValue.value,
         maxValue: vue.unref(rootContext).maxValue.value,
         dir: vue.unref(rootContext).dir.value,
-        fixedDate: vue.unref(rootContext).fixedDate.value
+        fixedDate: vue.unref(rootContext).fixedDate.value,
+        maximumDays: vue.unref(rootContext).maximumDays?.value
       }, {
         "initial-focus": "",
         "model-value": vue.unref(rootContext).modelValue.value,

package/dist/DateRangePicker/DateRangePickerCalendar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerCalendar.cjs","sources":["../../src/DateRangePicker/DateRangePickerCalendar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { isEqualDay } from '@internationalized/date'\nimport { RangeCalendarRoot } from '..'\nimport { injectDateRangePickerRootContext } from './DateRangePickerRoot.vue'\n</script>\n\n<script setup lang=\"ts\">\nconst rootContext = injectDateRangePickerRootContext()\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ weekDays, grid, date, weekStartsOn, locale, fixedWeeks }\"\n    v-bind=\"{\n      allowNonContiguousRanges: rootContext.allowNonContiguousRanges.value,\n      isDateDisabled: rootContext.isDateDisabled,\n      isDateUnavailable: rootContext.isDateUnavailable,\n      isDateHighlightable: rootContext.isDateHighlightable,\n      locale: rootContext.locale.value,\n      disabled: rootContext.disabled.value,\n      pagedNavigation: rootContext.pagedNavigation.value,\n      weekStartsOn: rootContext.weekStartsOn.value,\n      weekdayFormat: rootContext.weekdayFormat.value,\n      fixedWeeks: rootContext.fixedWeeks.value,\n      numberOfMonths: rootContext.numberOfMonths.value,\n      readonly: rootContext.readonly.value,\n      preventDeselect: rootContext.preventDeselect.value,\n      minValue: rootContext.minValue.value,\n      maxValue: rootContext.maxValue.value,\n      dir: rootContext.dir.value,\n      fixedDate: rootContext.fixedDate.value,\n    }\"\n    initial-focus\n    :model-value=\"rootContext.modelValue.value\"\n    :placeholder=\"rootContext.placeholder.value\"\n    @update:start-value=\"(date) => {\n      rootContext.onStartValueChange(date)\n    }\"\n    @update:model-value=\"(date) => {\n      if (date.start && rootContext.modelValue.value?.start && date.end && rootContext.modelValue.value?.end && isEqualDay(date.start, rootContext.modelValue.value?.start) && isEqualDay(date.end, rootContext.modelValue.value?.end)) return\n      rootContext.onDateChange(date)\n    }\"\n    @update:placeholder=\"(date) => {\n      if (isEqualDay(date, rootContext.placeholder.value)) return\n      rootContext.onPlaceholderChange(date)\n    }\"\n  >\n    <slot\n      :date=\"date\"\n      :grid=\"grid\"\n      :week-days=\"weekDays\"\n      :week-starts-on=\"weekStartsOn\"\n      :locale=\"locale\"\n      :fixed-weeks=\"fixedWeeks\"\n    />\n  </RangeCalendarRoot>\n</template>\n"],"names":["injectDateRangePickerRootContext"],"mappings":";;;;;;;;;;;AAOA,IAAA,MAAM,cAAcA,oEAAiC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DateRangePickerCalendar.cjs","sources":["../../src/DateRangePicker/DateRangePickerCalendar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { isEqualDay } from '@internationalized/date'\nimport { RangeCalendarRoot } from '..'\nimport { injectDateRangePickerRootContext } from './DateRangePickerRoot.vue'\n</script>\n\n<script setup lang=\"ts\">\nconst rootContext = injectDateRangePickerRootContext()\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ weekDays, grid, date, weekStartsOn, locale, fixedWeeks }\"\n    v-bind=\"{\n      allowNonContiguousRanges: rootContext.allowNonContiguousRanges.value,\n      isDateDisabled: rootContext.isDateDisabled,\n      isDateUnavailable: rootContext.isDateUnavailable,\n      isDateHighlightable: rootContext.isDateHighlightable,\n      locale: rootContext.locale.value,\n      disabled: rootContext.disabled.value,\n      pagedNavigation: rootContext.pagedNavigation.value,\n      weekStartsOn: rootContext.weekStartsOn.value,\n      weekdayFormat: rootContext.weekdayFormat.value,\n      fixedWeeks: rootContext.fixedWeeks.value,\n      numberOfMonths: rootContext.numberOfMonths.value,\n      readonly: rootContext.readonly.value,\n      preventDeselect: rootContext.preventDeselect.value,\n      minValue: rootContext.minValue.value,\n      maxValue: rootContext.maxValue.value,\n      dir: rootContext.dir.value,\n      fixedDate: rootContext.fixedDate.value,\n      maximumDays: rootContext.maximumDays?.value,\n    }\"\n    initial-focus\n    :model-value=\"rootContext.modelValue.value\"\n    :placeholder=\"rootContext.placeholder.value\"\n    @update:start-value=\"(date) => {\n      rootContext.onStartValueChange(date)\n    }\"\n    @update:model-value=\"(date) => {\n      if (date.start && rootContext.modelValue.value?.start && date.end && rootContext.modelValue.value?.end && isEqualDay(date.start, rootContext.modelValue.value?.start) && isEqualDay(date.end, rootContext.modelValue.value?.end)) return\n      rootContext.onDateChange(date)\n    }\"\n    @update:placeholder=\"(date) => {\n      if (isEqualDay(date, rootContext.placeholder.value)) return\n      rootContext.onPlaceholderChange(date)\n    }\"\n  >\n    <slot\n      :date=\"date\"\n      :grid=\"grid\"\n      :week-days=\"weekDays\"\n      :week-starts-on=\"weekStartsOn\"\n      :locale=\"locale\"\n      :fixed-weeks=\"fixedWeeks\"\n    />\n  </RangeCalendarRoot>\n</template>\n"],"names":["injectDateRangePickerRootContext"],"mappings":";;;;;;;;;;;AAOA,IAAA,MAAM,cAAcA,oEAAiC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DateRangePicker/DateRangePickerCalendar.js

@@ -26,7 +26,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         minValue: unref(rootContext).minValue.value,
         maxValue: unref(rootContext).maxValue.value,
         dir: unref(rootContext).dir.value,
-        fixedDate: unref(rootContext).fixedDate.value
+        fixedDate: unref(rootContext).fixedDate.value,
+        maximumDays: unref(rootContext).maximumDays?.value
       }, {
         "initial-focus": "",
         "model-value": unref(rootContext).modelValue.value,

package/dist/DateRangePicker/DateRangePickerCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerCalendar.js","sources":["../../src/DateRangePicker/DateRangePickerCalendar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { isEqualDay } from '@internationalized/date'\nimport { RangeCalendarRoot } from '..'\nimport { injectDateRangePickerRootContext } from './DateRangePickerRoot.vue'\n</script>\n\n<script setup lang=\"ts\">\nconst rootContext = injectDateRangePickerRootContext()\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ weekDays, grid, date, weekStartsOn, locale, fixedWeeks }\"\n    v-bind=\"{\n      allowNonContiguousRanges: rootContext.allowNonContiguousRanges.value,\n      isDateDisabled: rootContext.isDateDisabled,\n      isDateUnavailable: rootContext.isDateUnavailable,\n      isDateHighlightable: rootContext.isDateHighlightable,\n      locale: rootContext.locale.value,\n      disabled: rootContext.disabled.value,\n      pagedNavigation: rootContext.pagedNavigation.value,\n      weekStartsOn: rootContext.weekStartsOn.value,\n      weekdayFormat: rootContext.weekdayFormat.value,\n      fixedWeeks: rootContext.fixedWeeks.value,\n      numberOfMonths: rootContext.numberOfMonths.value,\n      readonly: rootContext.readonly.value,\n      preventDeselect: rootContext.preventDeselect.value,\n      minValue: rootContext.minValue.value,\n      maxValue: rootContext.maxValue.value,\n      dir: rootContext.dir.value,\n      fixedDate: rootContext.fixedDate.value,\n    }\"\n    initial-focus\n    :model-value=\"rootContext.modelValue.value\"\n    :placeholder=\"rootContext.placeholder.value\"\n    @update:start-value=\"(date) => {\n      rootContext.onStartValueChange(date)\n    }\"\n    @update:model-value=\"(date) => {\n      if (date.start && rootContext.modelValue.value?.start && date.end && rootContext.modelValue.value?.end && isEqualDay(date.start, rootContext.modelValue.value?.start) && isEqualDay(date.end, rootContext.modelValue.value?.end)) return\n      rootContext.onDateChange(date)\n    }\"\n    @update:placeholder=\"(date) => {\n      if (isEqualDay(date, rootContext.placeholder.value)) return\n      rootContext.onPlaceholderChange(date)\n    }\"\n  >\n    <slot\n      :date=\"date\"\n      :grid=\"grid\"\n      :week-days=\"weekDays\"\n      :week-starts-on=\"weekStartsOn\"\n      :locale=\"locale\"\n      :fixed-weeks=\"fixedWeeks\"\n    />\n  </RangeCalendarRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;;;AAOA,IAAA,MAAM,cAAc,gCAAiC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DateRangePickerCalendar.js","sources":["../../src/DateRangePicker/DateRangePickerCalendar.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { isEqualDay } from '@internationalized/date'\nimport { RangeCalendarRoot } from '..'\nimport { injectDateRangePickerRootContext } from './DateRangePickerRoot.vue'\n</script>\n\n<script setup lang=\"ts\">\nconst rootContext = injectDateRangePickerRootContext()\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-slot=\"{ weekDays, grid, date, weekStartsOn, locale, fixedWeeks }\"\n    v-bind=\"{\n      allowNonContiguousRanges: rootContext.allowNonContiguousRanges.value,\n      isDateDisabled: rootContext.isDateDisabled,\n      isDateUnavailable: rootContext.isDateUnavailable,\n      isDateHighlightable: rootContext.isDateHighlightable,\n      locale: rootContext.locale.value,\n      disabled: rootContext.disabled.value,\n      pagedNavigation: rootContext.pagedNavigation.value,\n      weekStartsOn: rootContext.weekStartsOn.value,\n      weekdayFormat: rootContext.weekdayFormat.value,\n      fixedWeeks: rootContext.fixedWeeks.value,\n      numberOfMonths: rootContext.numberOfMonths.value,\n      readonly: rootContext.readonly.value,\n      preventDeselect: rootContext.preventDeselect.value,\n      minValue: rootContext.minValue.value,\n      maxValue: rootContext.maxValue.value,\n      dir: rootContext.dir.value,\n      fixedDate: rootContext.fixedDate.value,\n      maximumDays: rootContext.maximumDays?.value,\n    }\"\n    initial-focus\n    :model-value=\"rootContext.modelValue.value\"\n    :placeholder=\"rootContext.placeholder.value\"\n    @update:start-value=\"(date) => {\n      rootContext.onStartValueChange(date)\n    }\"\n    @update:model-value=\"(date) => {\n      if (date.start && rootContext.modelValue.value?.start && date.end && rootContext.modelValue.value?.end && isEqualDay(date.start, rootContext.modelValue.value?.start) && isEqualDay(date.end, rootContext.modelValue.value?.end)) return\n      rootContext.onDateChange(date)\n    }\"\n    @update:placeholder=\"(date) => {\n      if (isEqualDay(date, rootContext.placeholder.value)) return\n      rootContext.onPlaceholderChange(date)\n    }\"\n  >\n    <slot\n      :date=\"date\"\n      :grid=\"grid\"\n      :week-days=\"weekDays\"\n      :week-starts-on=\"weekStartsOn\"\n      :locale=\"locale\"\n      :fixed-weeks=\"fixedWeeks\"\n    />\n  </RangeCalendarRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;;;AAOA,IAAA,MAAM,cAAc,gCAAiC,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DateRangePicker/DateRangePickerRoot.cjs

@@ -47,7 +47,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     preventDeselect: { type: Boolean, default: false },
     isDateHighlightable: { type: Function, default: void 0 },
     allowNonContiguousRanges: { type: Boolean, default: false },
-    fixedDate: {}
+    fixedDate: {},
+    maximumDays: { default: void 0 }
   },
   emits: ["update:modelValue", "update:placeholder", "update:startValue", "update:open"],
   setup(__props, { emit: __emit }) {
@@ -78,7 +79,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       hourCycle,
       dir: propsDir,
       allowNonContiguousRanges,
-      fixedDate
+      fixedDate,
+      maximumDays
     } = vue.toRefs(props);
     const dir = shared_useDirection.useDirection(propsDir);
     const modelValue = core.useVModel(props, "modelValue", emits, {
@@ -135,6 +137,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       dateFieldRef,
       dir,
       fixedDate,
+      maximumDays,
       onStartValueChange(date) {
         emits("update:startValue", date);
       },

package/dist/DateRangePicker/DateRangePickerRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerRoot.cjs","sources":["../../src/DateRangePicker/DateRangePickerRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\n\nimport type { Ref } from 'vue'\nimport type { DateRangeFieldRoot, DateRangeFieldRootProps, PopoverRootEmits, PopoverRootProps, RangeCalendarRootProps } from '..'\nimport type { Matcher, WeekDayFormat } from '@/date'\nimport type { DateRange, Granularity, HourCycle } from '@/shared/date'\n\nimport type { Direction } from '@/shared/types'\nimport { createContext, useDirection } from '@/shared'\nimport { getDefaultDate } from '@/shared/date'\nimport { PopoverRoot } from '..'\n\ntype DateRangePickerRootContext = {\n  id: Ref<string | undefined>\n  name: Ref<string | undefined>\n  minValue: Ref<DateValue | undefined>\n  maxValue: Ref<DateValue | undefined>\n  hourCycle: Ref<HourCycle | undefined>\n  granularity: Ref<Granularity | undefined>\n  hideTimeZone: Ref<boolean>\n  required: Ref<boolean>\n  locale: Ref<string>\n  dateFieldRef: Ref<InstanceType<typeof DateRangeFieldRoot> | undefined>\n  modelValue: Ref<{ start: DateValue | undefined, end: DateValue | undefined }>\n  placeholder: Ref<DateValue>\n  pagedNavigation: Ref<boolean>\n  preventDeselect: Ref<boolean>\n  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>\n  weekdayFormat: Ref<WeekDayFormat>\n  fixedWeeks: Ref<boolean>\n  numberOfMonths: Ref<number>\n  disabled: Ref<boolean>\n  readonly: Ref<boolean>\n  isDateDisabled?: Matcher\n  isDateUnavailable?: Matcher\n  isDateHighlightable?: Matcher\n  defaultOpen: Ref<boolean>\n  open: Ref<boolean>\n  modal: Ref<boolean>\n  onDateChange: (date: DateRange) => void\n  onPlaceholderChange: (date: DateValue) => void\n  onStartValueChange: (date: DateValue | undefined) => void\n  dir: Ref<Direction>\n  allowNonContiguousRanges: Ref<boolean>\n  fixedDate: Ref<'start' | 'end' | undefined>\n}\n\nexport type DateRangePickerRootProps = DateRangeFieldRootProps & PopoverRootProps & Pick<RangeCalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect' | 'isDateUnavailable' | 'isDateHighlightable' | 'allowNonContiguousRanges' | 'fixedDate'>\n\nexport type DateRangePickerRootEmits = {\n  /** Event handler called whenever the model value changes */\n  'update:modelValue': [date: DateRange]\n  /** Event handler called whenever the placeholder value changes */\n  'update:placeholder': [date: DateValue]\n  /** Event handler called whenever the start value changes */\n  'update:startValue': [date: DateValue | undefined]\n}\n\nexport const [injectDateRangePickerRootContext, provideDateRangePickerRootContext]\n  = createContext<DateRangePickerRootContext>('DateRangePickerRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ref, toRefs, watch } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<DateRangePickerRootProps>(), {\n  defaultValue: () => ({ start: undefined, end: undefined }),\n  defaultOpen: false,\n  open: undefined,\n  modal: false,\n  pagedNavigation: false,\n  preventDeselect: false,\n  weekStartsOn: 0,\n  weekdayFormat: 'narrow',\n  fixedWeeks: false,\n  numberOfMonths: 1,\n  disabled: false,\n  readonly: false,\n  initialFocus: false,\n  placeholder: undefined,\n  locale: 'en',\n  isDateDisabled: undefined,\n  isDateUnavailable: undefined,\n  isDateHighlightable: undefined,\n  allowNonContiguousRanges: false,\n})\nconst emits = defineEmits<DateRangePickerRootEmits & PopoverRootEmits>()\nconst {\n  locale,\n  disabled,\n  readonly,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  preventDeselect,\n  isDateDisabled: propsIsDateDisabled,\n  isDateUnavailable: propsIsDateUnavailable,\n  isDateHighlightable: propsIsDateHighlightable,\n  defaultOpen,\n  modal,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  dir: propsDir,\n  allowNonContiguousRanges,\n  fixedDate,\n} = toRefs(props)\n\nconst dir = useDirection(propsDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? { start: undefined, end: undefined },\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<DateRange>\n\nconst defaultDate = getDefaultDate({\n  defaultPlaceholder: props.placeholder,\n  granularity: props.granularity,\n  defaultValue: modelValue.value?.start,\n  locale: props.locale,\n})\n\nconst placeholder = useVModel(props, 'placeholder', emits, {\n  defaultValue: props.defaultPlaceholder ?? defaultDate.copy(),\n  passive: (props.placeholder === undefined) as false,\n}) as Ref<DateValue>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: defaultOpen.value,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst dateFieldRef = ref<InstanceType<typeof DateRangeFieldRoot> | undefined>()\n\nwatch(modelValue, (value) => {\n  if (value && value.start && value.start.compare(placeholder.value) !== 0) {\n    placeholder.value = value.start.copy()\n  }\n})\n\nprovideDateRangePickerRootContext({\n  allowNonContiguousRanges,\n  isDateUnavailable: propsIsDateUnavailable.value,\n  isDateDisabled: propsIsDateDisabled.value,\n  isDateHighlightable: propsIsDateHighlightable.value,\n  locale,\n  disabled,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  readonly,\n  preventDeselect,\n  modelValue,\n  placeholder,\n  defaultOpen,\n  modal,\n  open,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  dateFieldRef,\n  dir,\n  fixedDate,\n  onStartValueChange(date: DateValue | undefined) {\n    emits('update:startValue', date)\n  },\n  onDateChange(date: DateRange) {\n    modelValue.value = { start: date.start?.copy(), end: date.end?.copy() }\n  },\n  onPlaceholderChange(date: DateValue) {\n    placeholder.value = date.copy()\n  },\n})\n</script>\n\n<template>\n  <PopoverRoot\n    v-model:open=\"open\"\n    :default-open=\"defaultOpen\"\n    :modal=\"modal\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :open=\"open\"\n    />\n  </PopoverRoot>\n</template>\n"],"names":["createContext","toRefs","useDirection","useVModel","getDefaultDate","ref","watch"],"mappings":"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"}
+{"version":3,"file":"DateRangePickerRoot.cjs","sources":["../../src/DateRangePicker/DateRangePickerRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\n\nimport type { Ref } from 'vue'\nimport type { DateRangeFieldRoot, DateRangeFieldRootProps, PopoverRootEmits, PopoverRootProps, RangeCalendarRootProps } from '..'\nimport type { Matcher, WeekDayFormat } from '@/date'\nimport type { DateRange, Granularity, HourCycle } from '@/shared/date'\n\nimport type { Direction } from '@/shared/types'\nimport { createContext, useDirection } from '@/shared'\nimport { getDefaultDate } from '@/shared/date'\nimport { PopoverRoot } from '..'\n\ntype DateRangePickerRootContext = {\n  id: Ref<string | undefined>\n  name: Ref<string | undefined>\n  minValue: Ref<DateValue | undefined>\n  maxValue: Ref<DateValue | undefined>\n  hourCycle: Ref<HourCycle | undefined>\n  granularity: Ref<Granularity | undefined>\n  hideTimeZone: Ref<boolean>\n  required: Ref<boolean>\n  locale: Ref<string>\n  dateFieldRef: Ref<InstanceType<typeof DateRangeFieldRoot> | undefined>\n  modelValue: Ref<{ start: DateValue | undefined, end: DateValue | undefined }>\n  placeholder: Ref<DateValue>\n  pagedNavigation: Ref<boolean>\n  preventDeselect: Ref<boolean>\n  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>\n  weekdayFormat: Ref<WeekDayFormat>\n  fixedWeeks: Ref<boolean>\n  numberOfMonths: Ref<number>\n  disabled: Ref<boolean>\n  readonly: Ref<boolean>\n  isDateDisabled?: Matcher\n  isDateUnavailable?: Matcher\n  isDateHighlightable?: Matcher\n  defaultOpen: Ref<boolean>\n  open: Ref<boolean>\n  modal: Ref<boolean>\n  onDateChange: (date: DateRange) => void\n  onPlaceholderChange: (date: DateValue) => void\n  onStartValueChange: (date: DateValue | undefined) => void\n  dir: Ref<Direction>\n  allowNonContiguousRanges: Ref<boolean>\n  fixedDate: Ref<'start' | 'end' | undefined>\n  maximumDays?: Ref<number | undefined>\n}\n\nexport type DateRangePickerRootProps = DateRangeFieldRootProps & PopoverRootProps & Pick<RangeCalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect' | 'isDateUnavailable' | 'isDateHighlightable' | 'allowNonContiguousRanges' | 'fixedDate' | 'maximumDays'>\n\nexport type DateRangePickerRootEmits = {\n  /** Event handler called whenever the model value changes */\n  'update:modelValue': [date: DateRange]\n  /** Event handler called whenever the placeholder value changes */\n  'update:placeholder': [date: DateValue]\n  /** Event handler called whenever the start value changes */\n  'update:startValue': [date: DateValue | undefined]\n}\n\nexport const [injectDateRangePickerRootContext, provideDateRangePickerRootContext]\n  = createContext<DateRangePickerRootContext>('DateRangePickerRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ref, toRefs, watch } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<DateRangePickerRootProps>(), {\n  defaultValue: () => ({ start: undefined, end: undefined }),\n  defaultOpen: false,\n  open: undefined,\n  modal: false,\n  pagedNavigation: false,\n  preventDeselect: false,\n  weekStartsOn: 0,\n  weekdayFormat: 'narrow',\n  fixedWeeks: false,\n  numberOfMonths: 1,\n  disabled: false,\n  readonly: false,\n  initialFocus: false,\n  placeholder: undefined,\n  locale: 'en',\n  isDateDisabled: undefined,\n  isDateUnavailable: undefined,\n  isDateHighlightable: undefined,\n  allowNonContiguousRanges: false,\n  maximumDays: undefined,\n})\nconst emits = defineEmits<DateRangePickerRootEmits & PopoverRootEmits>()\nconst {\n  locale,\n  disabled,\n  readonly,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  preventDeselect,\n  isDateDisabled: propsIsDateDisabled,\n  isDateUnavailable: propsIsDateUnavailable,\n  isDateHighlightable: propsIsDateHighlightable,\n  defaultOpen,\n  modal,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  dir: propsDir,\n  allowNonContiguousRanges,\n  fixedDate,\n  maximumDays,\n} = toRefs(props)\n\nconst dir = useDirection(propsDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? { start: undefined, end: undefined },\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<DateRange>\n\nconst defaultDate = getDefaultDate({\n  defaultPlaceholder: props.placeholder,\n  granularity: props.granularity,\n  defaultValue: modelValue.value?.start,\n  locale: props.locale,\n})\n\nconst placeholder = useVModel(props, 'placeholder', emits, {\n  defaultValue: props.defaultPlaceholder ?? defaultDate.copy(),\n  passive: (props.placeholder === undefined) as false,\n}) as Ref<DateValue>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: defaultOpen.value,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst dateFieldRef = ref<InstanceType<typeof DateRangeFieldRoot> | undefined>()\n\nwatch(modelValue, (value) => {\n  if (value && value.start && value.start.compare(placeholder.value) !== 0) {\n    placeholder.value = value.start.copy()\n  }\n})\n\nprovideDateRangePickerRootContext({\n  allowNonContiguousRanges,\n  isDateUnavailable: propsIsDateUnavailable.value,\n  isDateDisabled: propsIsDateDisabled.value,\n  isDateHighlightable: propsIsDateHighlightable.value,\n  locale,\n  disabled,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  readonly,\n  preventDeselect,\n  modelValue,\n  placeholder,\n  defaultOpen,\n  modal,\n  open,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  dateFieldRef,\n  dir,\n  fixedDate,\n  maximumDays,\n  onStartValueChange(date: DateValue | undefined) {\n    emits('update:startValue', date)\n  },\n  onDateChange(date: DateRange) {\n    modelValue.value = { start: date.start?.copy(), end: date.end?.copy() }\n  },\n  onPlaceholderChange(date: DateValue) {\n    placeholder.value = date.copy()\n  },\n})\n</script>\n\n<template>\n  <PopoverRoot\n    v-model:open=\"open\"\n    :default-open=\"defaultOpen\"\n    :modal=\"modal\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :open=\"open\"\n    />\n  </PopoverRoot>\n</template>\n"],"names":["createContext","toRefs","useDirection","useVModel","getDefaultDate","ref","watch"],"mappings":"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"}

package/dist/DateRangePicker/DateRangePickerRoot.js

@@ -45,7 +45,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     preventDeselect: { type: Boolean, default: false },
     isDateHighlightable: { type: Function, default: void 0 },
     allowNonContiguousRanges: { type: Boolean, default: false },
-    fixedDate: {}
+    fixedDate: {},
+    maximumDays: { default: void 0 }
   },
   emits: ["update:modelValue", "update:placeholder", "update:startValue", "update:open"],
   setup(__props, { emit: __emit }) {
@@ -76,7 +77,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       hourCycle,
       dir: propsDir,
       allowNonContiguousRanges,
-      fixedDate
+      fixedDate,
+      maximumDays
     } = toRefs(props);
     const dir = useDirection(propsDir);
     const modelValue = useVModel(props, "modelValue", emits, {
@@ -133,6 +135,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       dateFieldRef,
       dir,
       fixedDate,
+      maximumDays,
       onStartValueChange(date) {
         emits("update:startValue", date);
       },

package/dist/DateRangePicker/DateRangePickerRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePickerRoot.js","sources":["../../src/DateRangePicker/DateRangePickerRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\n\nimport type { Ref } from 'vue'\nimport type { DateRangeFieldRoot, DateRangeFieldRootProps, PopoverRootEmits, PopoverRootProps, RangeCalendarRootProps } from '..'\nimport type { Matcher, WeekDayFormat } from '@/date'\nimport type { DateRange, Granularity, HourCycle } from '@/shared/date'\n\nimport type { Direction } from '@/shared/types'\nimport { createContext, useDirection } from '@/shared'\nimport { getDefaultDate } from '@/shared/date'\nimport { PopoverRoot } from '..'\n\ntype DateRangePickerRootContext = {\n  id: Ref<string | undefined>\n  name: Ref<string | undefined>\n  minValue: Ref<DateValue | undefined>\n  maxValue: Ref<DateValue | undefined>\n  hourCycle: Ref<HourCycle | undefined>\n  granularity: Ref<Granularity | undefined>\n  hideTimeZone: Ref<boolean>\n  required: Ref<boolean>\n  locale: Ref<string>\n  dateFieldRef: Ref<InstanceType<typeof DateRangeFieldRoot> | undefined>\n  modelValue: Ref<{ start: DateValue | undefined, end: DateValue | undefined }>\n  placeholder: Ref<DateValue>\n  pagedNavigation: Ref<boolean>\n  preventDeselect: Ref<boolean>\n  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>\n  weekdayFormat: Ref<WeekDayFormat>\n  fixedWeeks: Ref<boolean>\n  numberOfMonths: Ref<number>\n  disabled: Ref<boolean>\n  readonly: Ref<boolean>\n  isDateDisabled?: Matcher\n  isDateUnavailable?: Matcher\n  isDateHighlightable?: Matcher\n  defaultOpen: Ref<boolean>\n  open: Ref<boolean>\n  modal: Ref<boolean>\n  onDateChange: (date: DateRange) => void\n  onPlaceholderChange: (date: DateValue) => void\n  onStartValueChange: (date: DateValue | undefined) => void\n  dir: Ref<Direction>\n  allowNonContiguousRanges: Ref<boolean>\n  fixedDate: Ref<'start' | 'end' | undefined>\n}\n\nexport type DateRangePickerRootProps = DateRangeFieldRootProps & PopoverRootProps & Pick<RangeCalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect' | 'isDateUnavailable' | 'isDateHighlightable' | 'allowNonContiguousRanges' | 'fixedDate'>\n\nexport type DateRangePickerRootEmits = {\n  /** Event handler called whenever the model value changes */\n  'update:modelValue': [date: DateRange]\n  /** Event handler called whenever the placeholder value changes */\n  'update:placeholder': [date: DateValue]\n  /** Event handler called whenever the start value changes */\n  'update:startValue': [date: DateValue | undefined]\n}\n\nexport const [injectDateRangePickerRootContext, provideDateRangePickerRootContext]\n  = createContext<DateRangePickerRootContext>('DateRangePickerRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ref, toRefs, watch } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<DateRangePickerRootProps>(), {\n  defaultValue: () => ({ start: undefined, end: undefined }),\n  defaultOpen: false,\n  open: undefined,\n  modal: false,\n  pagedNavigation: false,\n  preventDeselect: false,\n  weekStartsOn: 0,\n  weekdayFormat: 'narrow',\n  fixedWeeks: false,\n  numberOfMonths: 1,\n  disabled: false,\n  readonly: false,\n  initialFocus: false,\n  placeholder: undefined,\n  locale: 'en',\n  isDateDisabled: undefined,\n  isDateUnavailable: undefined,\n  isDateHighlightable: undefined,\n  allowNonContiguousRanges: false,\n})\nconst emits = defineEmits<DateRangePickerRootEmits & PopoverRootEmits>()\nconst {\n  locale,\n  disabled,\n  readonly,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  preventDeselect,\n  isDateDisabled: propsIsDateDisabled,\n  isDateUnavailable: propsIsDateUnavailable,\n  isDateHighlightable: propsIsDateHighlightable,\n  defaultOpen,\n  modal,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  dir: propsDir,\n  allowNonContiguousRanges,\n  fixedDate,\n} = toRefs(props)\n\nconst dir = useDirection(propsDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? { start: undefined, end: undefined },\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<DateRange>\n\nconst defaultDate = getDefaultDate({\n  defaultPlaceholder: props.placeholder,\n  granularity: props.granularity,\n  defaultValue: modelValue.value?.start,\n  locale: props.locale,\n})\n\nconst placeholder = useVModel(props, 'placeholder', emits, {\n  defaultValue: props.defaultPlaceholder ?? defaultDate.copy(),\n  passive: (props.placeholder === undefined) as false,\n}) as Ref<DateValue>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: defaultOpen.value,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst dateFieldRef = ref<InstanceType<typeof DateRangeFieldRoot> | undefined>()\n\nwatch(modelValue, (value) => {\n  if (value && value.start && value.start.compare(placeholder.value) !== 0) {\n    placeholder.value = value.start.copy()\n  }\n})\n\nprovideDateRangePickerRootContext({\n  allowNonContiguousRanges,\n  isDateUnavailable: propsIsDateUnavailable.value,\n  isDateDisabled: propsIsDateDisabled.value,\n  isDateHighlightable: propsIsDateHighlightable.value,\n  locale,\n  disabled,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  readonly,\n  preventDeselect,\n  modelValue,\n  placeholder,\n  defaultOpen,\n  modal,\n  open,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  dateFieldRef,\n  dir,\n  fixedDate,\n  onStartValueChange(date: DateValue | undefined) {\n    emits('update:startValue', date)\n  },\n  onDateChange(date: DateRange) {\n    modelValue.value = { start: date.start?.copy(), end: date.end?.copy() }\n  },\n  onPlaceholderChange(date: DateValue) {\n    placeholder.value = date.copy()\n  },\n})\n</script>\n\n<template>\n  <PopoverRoot\n    v-model:open=\"open\"\n    :default-open=\"defaultOpen\"\n    :modal=\"modal\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :open=\"open\"\n    />\n  </PopoverRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;;AA2DO,MAAM,CAAC,gCAAA,EAAkC,iCAAiC,CAAA,GAC7E,cAA0C,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUnE,IAAA,MAAM,KAAQ,GAAA,OAAA;AAqBd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,cAAgB,EAAA,mBAAA;AAAA,MAChB,iBAAmB,EAAA,sBAAA;AAAA,MACnB,mBAAqB,EAAA,wBAAA;AAAA,MACrB,WAAA;AAAA,MACA,KAAA;AAAA,MACA,EAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAK,EAAA,QAAA;AAAA,MACL,wBAAA;AAAA,MACA;AAAA,KACF,GAAI,OAAO,KAAK,CAAA;AAEhB,IAAM,MAAA,GAAA,GAAM,aAAa,QAAQ,CAAA;AAEjC,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,cAAc,KAAM,CAAA,YAAA,IAAgB,EAAE,KAAO,EAAA,MAAA,EAAW,KAAK,MAAU,EAAA;AAAA,MACvE,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,cAAc,cAAe,CAAA;AAAA,MACjC,oBAAoB,KAAM,CAAA,WAAA;AAAA,MAC1B,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,YAAA,EAAc,WAAW,KAAO,EAAA,KAAA;AAAA,MAChC,QAAQ,KAAM,CAAA;AAAA,KACf,CAAA;AAED,IAAA,MAAM,WAAc,GAAA,SAAA,CAAU,KAAO,EAAA,aAAA,EAAe,KAAO,EAAA;AAAA,MACzD,YAAc,EAAA,KAAA,CAAM,kBAAsB,IAAA,WAAA,CAAY,IAAK,EAAA;AAAA,MAC3D,OAAA,EAAU,MAAM,WAAgB,KAAA;AAAA,KACjC,CAAA;AAED,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,KAAO,EAAA;AAAA,MAC3C,cAAc,WAAY,CAAA,KAAA;AAAA,MAC1B,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAA,MAAM,eAAe,GAAyD,EAAA;AAE9E,IAAM,KAAA,CAAA,UAAA,EAAY,CAAC,KAAU,KAAA;AAC3B,MAAI,IAAA,KAAA,IAAS,MAAM,KAAS,IAAA,KAAA,CAAM,MAAM,OAAQ,CAAA,WAAA,CAAY,KAAK,CAAA,KAAM,CAAG,EAAA;AACxE,QAAY,WAAA,CAAA,KAAA,GAAQ,KAAM,CAAA,KAAA,CAAM,IAAK,EAAA;AAAA;AACvC,KACD,CAAA;AAED,IAAkC,iCAAA,CAAA;AAAA,MAChC,wBAAA;AAAA,MACA,mBAAmB,sBAAuB,CAAA,KAAA;AAAA,MAC1C,gBAAgB,mBAAoB,CAAA,KAAA;AAAA,MACpC,qBAAqB,wBAAyB,CAAA,KAAA;AAAA,MAC9C,MAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,QAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,EAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAA;AAAA,MACA,mBAAmB,IAA6B,EAAA;AAC9C,QAAA,KAAA,CAAM,qBAAqB,IAAI,CAAA;AAAA,OACjC;AAAA,MACA,aAAa,IAAiB,EAAA;AAC5B,QAAW,UAAA,CAAA,KAAA,GAAQ,EAAE,KAAA,EAAO,IAAK,CAAA,KAAA,EAAO,IAAK,EAAA,EAAG,GAAK,EAAA,IAAA,CAAK,GAAK,EAAA,IAAA,EAAO,EAAA;AAAA,OACxE;AAAA,MACA,oBAAoB,IAAiB,EAAA;AACnC,QAAY,WAAA,CAAA,KAAA,GAAQ,KAAK,IAAK,EAAA;AAAA;AAChC,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DateRangePickerRoot.js","sources":["../../src/DateRangePicker/DateRangePickerRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\n\nimport type { Ref } from 'vue'\nimport type { DateRangeFieldRoot, DateRangeFieldRootProps, PopoverRootEmits, PopoverRootProps, RangeCalendarRootProps } from '..'\nimport type { Matcher, WeekDayFormat } from '@/date'\nimport type { DateRange, Granularity, HourCycle } from '@/shared/date'\n\nimport type { Direction } from '@/shared/types'\nimport { createContext, useDirection } from '@/shared'\nimport { getDefaultDate } from '@/shared/date'\nimport { PopoverRoot } from '..'\n\ntype DateRangePickerRootContext = {\n  id: Ref<string | undefined>\n  name: Ref<string | undefined>\n  minValue: Ref<DateValue | undefined>\n  maxValue: Ref<DateValue | undefined>\n  hourCycle: Ref<HourCycle | undefined>\n  granularity: Ref<Granularity | undefined>\n  hideTimeZone: Ref<boolean>\n  required: Ref<boolean>\n  locale: Ref<string>\n  dateFieldRef: Ref<InstanceType<typeof DateRangeFieldRoot> | undefined>\n  modelValue: Ref<{ start: DateValue | undefined, end: DateValue | undefined }>\n  placeholder: Ref<DateValue>\n  pagedNavigation: Ref<boolean>\n  preventDeselect: Ref<boolean>\n  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>\n  weekdayFormat: Ref<WeekDayFormat>\n  fixedWeeks: Ref<boolean>\n  numberOfMonths: Ref<number>\n  disabled: Ref<boolean>\n  readonly: Ref<boolean>\n  isDateDisabled?: Matcher\n  isDateUnavailable?: Matcher\n  isDateHighlightable?: Matcher\n  defaultOpen: Ref<boolean>\n  open: Ref<boolean>\n  modal: Ref<boolean>\n  onDateChange: (date: DateRange) => void\n  onPlaceholderChange: (date: DateValue) => void\n  onStartValueChange: (date: DateValue | undefined) => void\n  dir: Ref<Direction>\n  allowNonContiguousRanges: Ref<boolean>\n  fixedDate: Ref<'start' | 'end' | undefined>\n  maximumDays?: Ref<number | undefined>\n}\n\nexport type DateRangePickerRootProps = DateRangeFieldRootProps & PopoverRootProps & Pick<RangeCalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect' | 'isDateUnavailable' | 'isDateHighlightable' | 'allowNonContiguousRanges' | 'fixedDate' | 'maximumDays'>\n\nexport type DateRangePickerRootEmits = {\n  /** Event handler called whenever the model value changes */\n  'update:modelValue': [date: DateRange]\n  /** Event handler called whenever the placeholder value changes */\n  'update:placeholder': [date: DateValue]\n  /** Event handler called whenever the start value changes */\n  'update:startValue': [date: DateValue | undefined]\n}\n\nexport const [injectDateRangePickerRootContext, provideDateRangePickerRootContext]\n  = createContext<DateRangePickerRootContext>('DateRangePickerRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ref, toRefs, watch } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<DateRangePickerRootProps>(), {\n  defaultValue: () => ({ start: undefined, end: undefined }),\n  defaultOpen: false,\n  open: undefined,\n  modal: false,\n  pagedNavigation: false,\n  preventDeselect: false,\n  weekStartsOn: 0,\n  weekdayFormat: 'narrow',\n  fixedWeeks: false,\n  numberOfMonths: 1,\n  disabled: false,\n  readonly: false,\n  initialFocus: false,\n  placeholder: undefined,\n  locale: 'en',\n  isDateDisabled: undefined,\n  isDateUnavailable: undefined,\n  isDateHighlightable: undefined,\n  allowNonContiguousRanges: false,\n  maximumDays: undefined,\n})\nconst emits = defineEmits<DateRangePickerRootEmits & PopoverRootEmits>()\nconst {\n  locale,\n  disabled,\n  readonly,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  preventDeselect,\n  isDateDisabled: propsIsDateDisabled,\n  isDateUnavailable: propsIsDateUnavailable,\n  isDateHighlightable: propsIsDateHighlightable,\n  defaultOpen,\n  modal,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  dir: propsDir,\n  allowNonContiguousRanges,\n  fixedDate,\n  maximumDays,\n} = toRefs(props)\n\nconst dir = useDirection(propsDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: props.defaultValue ?? { start: undefined, end: undefined },\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<DateRange>\n\nconst defaultDate = getDefaultDate({\n  defaultPlaceholder: props.placeholder,\n  granularity: props.granularity,\n  defaultValue: modelValue.value?.start,\n  locale: props.locale,\n})\n\nconst placeholder = useVModel(props, 'placeholder', emits, {\n  defaultValue: props.defaultPlaceholder ?? defaultDate.copy(),\n  passive: (props.placeholder === undefined) as false,\n}) as Ref<DateValue>\n\nconst open = useVModel(props, 'open', emits, {\n  defaultValue: defaultOpen.value,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst dateFieldRef = ref<InstanceType<typeof DateRangeFieldRoot> | undefined>()\n\nwatch(modelValue, (value) => {\n  if (value && value.start && value.start.compare(placeholder.value) !== 0) {\n    placeholder.value = value.start.copy()\n  }\n})\n\nprovideDateRangePickerRootContext({\n  allowNonContiguousRanges,\n  isDateUnavailable: propsIsDateUnavailable.value,\n  isDateDisabled: propsIsDateDisabled.value,\n  isDateHighlightable: propsIsDateHighlightable.value,\n  locale,\n  disabled,\n  pagedNavigation,\n  weekStartsOn,\n  weekdayFormat,\n  fixedWeeks,\n  numberOfMonths,\n  readonly,\n  preventDeselect,\n  modelValue,\n  placeholder,\n  defaultOpen,\n  modal,\n  open,\n  id,\n  name,\n  required,\n  minValue,\n  maxValue,\n  granularity,\n  hideTimeZone,\n  hourCycle,\n  dateFieldRef,\n  dir,\n  fixedDate,\n  maximumDays,\n  onStartValueChange(date: DateValue | undefined) {\n    emits('update:startValue', date)\n  },\n  onDateChange(date: DateRange) {\n    modelValue.value = { start: date.start?.copy(), end: date.end?.copy() }\n  },\n  onPlaceholderChange(date: DateValue) {\n    placeholder.value = date.copy()\n  },\n})\n</script>\n\n<template>\n  <PopoverRoot\n    v-model:open=\"open\"\n    :default-open=\"defaultOpen\"\n    :modal=\"modal\"\n  >\n    <slot\n      :model-value=\"modelValue\"\n      :open=\"open\"\n    />\n  </PopoverRoot>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/Dialog/DialogContent.cjs

@@ -12,7 +12,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "DialogContent",
   props: {
     forceMount: { type: Boolean },
-    trapFocus: { type: Boolean },
     disableOutsidePointerEvents: { type: Boolean },
     asChild: { type: Boolean },
     as: {}

package/dist/Dialog/DialogContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.cjs","sources":["../../src/Dialog/DialogContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogContentImplEmits,\n  DialogContentImplProps,\n} from './DialogContentImpl.vue'\n\nexport type DialogContentEmits = DialogContentImplEmits\n\nexport interface DialogContentProps extends DialogContentImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport { useEmitAsProps, useForwardExpose } from '@/shared'\nimport DialogContentModal from './DialogContentModal.vue'\nimport DialogContentNonModal from './DialogContentNonModal.vue'\nimport { injectDialogRootContext } from './DialogRoot.vue'\n\nconst props = defineProps<DialogContentProps>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst rootContext = injectDialogRootContext()\n\nconst emitsAsProps = useEmitAsProps(emits)\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <Presence :present=\"forceMount || rootContext.open.value\">\n    <DialogContentModal\n      v-if=\"rootContext.modal.value\"\n      :ref=\"forwardRef\"\n      v-bind=\"{ ...props, ...emitsAsProps, ...$attrs }\"\n    >\n      <slot />\n    </DialogContentModal>\n    <DialogContentNonModal\n      v-else\n      :ref=\"forwardRef\"\n      v-bind=\"{ ...props, ...emitsAsProps, ...$attrs }\"\n    >\n      <slot />\n    </DialogContentNonModal>\n  </Presence>\n</template>\n"],"names":["injectDialogRootContext","useEmitAsProps","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAE5C,IAAM,MAAA,YAAA,GAAeC,qCAAe,KAAK,CAAA;AACzC,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DialogContent.cjs","sources":["../../src/Dialog/DialogContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogContentImplEmits,\n  DialogContentImplProps,\n} from './DialogContentImpl.vue'\n\nexport type DialogContentEmits = DialogContentImplEmits\n\nexport interface DialogContentProps extends Omit<DialogContentImplProps, 'trapFocus'> {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport { useEmitAsProps, useForwardExpose } from '@/shared'\nimport DialogContentModal from './DialogContentModal.vue'\nimport DialogContentNonModal from './DialogContentNonModal.vue'\nimport { injectDialogRootContext } from './DialogRoot.vue'\n\nconst props = defineProps<DialogContentProps>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst rootContext = injectDialogRootContext()\n\nconst emitsAsProps = useEmitAsProps(emits)\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <Presence :present=\"forceMount || rootContext.open.value\">\n    <DialogContentModal\n      v-if=\"rootContext.modal.value\"\n      :ref=\"forwardRef\"\n      v-bind=\"{ ...props, ...emitsAsProps, ...$attrs }\"\n    >\n      <slot />\n    </DialogContentModal>\n    <DialogContentNonModal\n      v-else\n      :ref=\"forwardRef\"\n      v-bind=\"{ ...props, ...emitsAsProps, ...$attrs }\"\n    >\n      <slot />\n    </DialogContentNonModal>\n  </Presence>\n</template>\n"],"names":["injectDialogRootContext","useEmitAsProps","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAE5C,IAAM,MAAA,YAAA,GAAeC,qCAAe,KAAK,CAAA;AACzC,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Dialog/DialogContent.js

@@ -10,7 +10,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DialogContent",
   props: {
     forceMount: { type: Boolean },
-    trapFocus: { type: Boolean },
     disableOutsidePointerEvents: { type: Boolean },
     asChild: { type: Boolean },
     as: {}

package/dist/Dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","sources":["../../src/Dialog/DialogContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogContentImplEmits,\n  DialogContentImplProps,\n} from './DialogContentImpl.vue'\n\nexport type DialogContentEmits = DialogContentImplEmits\n\nexport interface DialogContentProps extends DialogContentImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport { useEmitAsProps, useForwardExpose } from '@/shared'\nimport DialogContentModal from './DialogContentModal.vue'\nimport DialogContentNonModal from './DialogContentNonModal.vue'\nimport { injectDialogRootContext } from './DialogRoot.vue'\n\nconst props = defineProps<DialogContentProps>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst rootContext = injectDialogRootContext()\n\nconst emitsAsProps = useEmitAsProps(emits)\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <Presence :present=\"forceMount || rootContext.open.value\">\n    <DialogContentModal\n      v-if=\"rootContext.modal.value\"\n      :ref=\"forwardRef\"\n      v-bind=\"{ ...props, ...emitsAsProps, ...$attrs }\"\n    >\n      <slot />\n    </DialogContentModal>\n    <DialogContentNonModal\n      v-else\n      :ref=\"forwardRef\"\n      v-bind=\"{ ...props, ...emitsAsProps, ...$attrs }\"\n    >\n      <slot />\n    </DialogContentNonModal>\n  </Presence>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAM,MAAA,YAAA,GAAe,eAAe,KAAK,CAAA;AACzC,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DialogContent.js","sources":["../../src/Dialog/DialogContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogContentImplEmits,\n  DialogContentImplProps,\n} from './DialogContentImpl.vue'\n\nexport type DialogContentEmits = DialogContentImplEmits\n\nexport interface DialogContentProps extends Omit<DialogContentImplProps, 'trapFocus'> {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport { useEmitAsProps, useForwardExpose } from '@/shared'\nimport DialogContentModal from './DialogContentModal.vue'\nimport DialogContentNonModal from './DialogContentNonModal.vue'\nimport { injectDialogRootContext } from './DialogRoot.vue'\n\nconst props = defineProps<DialogContentProps>()\nconst emits = defineEmits<DialogContentEmits>()\n\nconst rootContext = injectDialogRootContext()\n\nconst emitsAsProps = useEmitAsProps(emits)\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n  <Presence :present=\"forceMount || rootContext.open.value\">\n    <DialogContentModal\n      v-if=\"rootContext.modal.value\"\n      :ref=\"forwardRef\"\n      v-bind=\"{ ...props, ...emitsAsProps, ...$attrs }\"\n    >\n      <slot />\n    </DialogContentModal>\n    <DialogContentNonModal\n      v-else\n      :ref=\"forwardRef\"\n      v-bind=\"{ ...props, ...emitsAsProps, ...$attrs }\"\n    >\n      <slot />\n    </DialogContentNonModal>\n  </Presence>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAM,MAAA,YAAA,GAAe,eAAe,KAAK,CAAA;AACzC,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Listbox/ListboxFilter.cjs

@@ -57,7 +57,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         ],
         onInput: _cache[0] || (_cache[0] = (event) => {
           modelValue.value = event.target.value;
-          vue.unref(rootContext).highlightFirstItem(event);
+          vue.unref(rootContext).highlightFirstItem();
         }),
         onCompositionstart: vue.unref(rootContext).onCompositionStart,
         onCompositionend: vue.unref(rootContext).onCompositionEnd

package/dist/Listbox/ListboxFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListboxFilter.cjs","sources":["../../src/Listbox/ListboxFilter.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '..'\nimport { useVModel } from '@vueuse/core'\nimport { computed, onMounted, onUnmounted, ref, watchSyncEffect } from 'vue'\nimport { usePrimitiveElement } from '@/Primitive'\nimport { Primitive } from '..'\nimport { injectListboxRootContext } from './ListboxRoot.vue'\n\nexport interface ListboxFilterProps extends PrimitiveProps {\n  /** The controlled value of the filter. Can be binded with with v-model. */\n  modelValue?: string\n  /** Focus on element when mounted. */\n  autoFocus?: boolean\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n\nexport type ListboxFilterEmits = {\n  'update:modelValue': [string]\n}\n</script>\n\n<script setup lang=\"ts\">\nconst props = withDefaults(defineProps<ListboxFilterProps>(), {\n  as: 'input',\n})\nconst emits = defineEmits<ListboxFilterEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: '',\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst rootContext = injectListboxRootContext()\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst disabled = computed(() => props.disabled || rootContext.disabled.value || false)\n\nconst activedescendant = ref<string | undefined>()\nwatchSyncEffect(() => activedescendant.value = rootContext.highlightedElement.value?.id)\n\nonMounted(() => {\n  rootContext.focusable.value = false\n\n  setTimeout(() => {\n    // make sure all DOM was flush then only capture the focus\n    if (props.autoFocus)\n      currentElement.value?.focus()\n  }, 1)\n})\n\nonUnmounted(() => {\n  rootContext.focusable.value = true\n})\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :value=\"modelValue\"\n    :disabled=\"disabled ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :aria-disabled=\"disabled ?? undefined\"\n    :aria-activedescendant=\"activedescendant\"\n    type=\"text\"\n    @keydown.down.up.home.end.prevent=\"rootContext.onKeydownNavigation\"\n    @keydown.enter=\"rootContext.onKeydownEnter\"\n    @input=\"(event: InputEvent) => {\n      modelValue = (event.target as HTMLInputElement).value\n      rootContext.highlightFirstItem(event)\n    }\"\n    @compositionstart=\"rootContext.onCompositionStart\"\n    @compositionend=\"rootContext.onCompositionEnd\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":["useVModel","injectListboxRootContext","usePrimitiveElement","computed","ref","watchSyncEffect","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,UAAa,GAAAA,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAc,EAAA,EAAA;AAAA,MACd,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,cAAcC,4CAAyB,EAAA;AAE7C,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AACjE,IAAM,MAAA,QAAA,GAAWC,aAAS,MAAM,KAAA,CAAM,YAAY,WAAY,CAAA,QAAA,CAAS,SAAS,KAAK,CAAA;AAErF,IAAA,MAAM,mBAAmBC,OAAwB,EAAA;AACjD,IAAAC,mBAAA,CAAgB,MAAM,gBAAiB,CAAA,KAAA,GAAQ,WAAY,CAAA,kBAAA,CAAmB,OAAO,EAAE,CAAA;AAEvF,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,UAAU,KAAQ,GAAA,KAAA;AAE9B,MAAA,UAAA,CAAW,MAAM;AAEf,QAAA,IAAI,KAAM,CAAA,SAAA;AACR,UAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,SAC7B,CAAC,CAAA;AAAA,KACL,CAAA;AAED,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,WAAA,CAAY,UAAU,KAAQ,GAAA,IAAA;AAAA,KAC/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ListboxFilter.cjs","sources":["../../src/Listbox/ListboxFilter.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '..'\nimport { useVModel } from '@vueuse/core'\nimport { computed, onMounted, onUnmounted, ref, watchSyncEffect } from 'vue'\nimport { usePrimitiveElement } from '@/Primitive'\nimport { Primitive } from '..'\nimport { injectListboxRootContext } from './ListboxRoot.vue'\n\nexport interface ListboxFilterProps extends PrimitiveProps {\n  /** The controlled value of the filter. Can be binded with with v-model. */\n  modelValue?: string\n  /** Focus on element when mounted. */\n  autoFocus?: boolean\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n\nexport type ListboxFilterEmits = {\n  'update:modelValue': [string]\n}\n</script>\n\n<script setup lang=\"ts\">\nconst props = withDefaults(defineProps<ListboxFilterProps>(), {\n  as: 'input',\n})\nconst emits = defineEmits<ListboxFilterEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: '',\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst rootContext = injectListboxRootContext()\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst disabled = computed(() => props.disabled || rootContext.disabled.value || false)\n\nconst activedescendant = ref<string | undefined>()\nwatchSyncEffect(() => activedescendant.value = rootContext.highlightedElement.value?.id)\n\nonMounted(() => {\n  rootContext.focusable.value = false\n\n  setTimeout(() => {\n    // make sure all DOM was flush then only capture the focus\n    if (props.autoFocus)\n      currentElement.value?.focus()\n  }, 1)\n})\n\nonUnmounted(() => {\n  rootContext.focusable.value = true\n})\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :value=\"modelValue\"\n    :disabled=\"disabled ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :aria-disabled=\"disabled ?? undefined\"\n    :aria-activedescendant=\"activedescendant\"\n    type=\"text\"\n    @keydown.down.up.home.end.prevent=\"rootContext.onKeydownNavigation\"\n    @keydown.enter=\"rootContext.onKeydownEnter\"\n    @input=\"(event: InputEvent) => {\n      modelValue = (event.target as HTMLInputElement).value\n      rootContext.highlightFirstItem()\n    }\"\n    @compositionstart=\"rootContext.onCompositionStart\"\n    @compositionend=\"rootContext.onCompositionEnd\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":["useVModel","injectListboxRootContext","usePrimitiveElement","computed","ref","watchSyncEffect","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,UAAa,GAAAA,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAc,EAAA,EAAA;AAAA,MACd,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,cAAcC,4CAAyB,EAAA;AAE7C,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AACjE,IAAM,MAAA,QAAA,GAAWC,aAAS,MAAM,KAAA,CAAM,YAAY,WAAY,CAAA,QAAA,CAAS,SAAS,KAAK,CAAA;AAErF,IAAA,MAAM,mBAAmBC,OAAwB,EAAA;AACjD,IAAAC,mBAAA,CAAgB,MAAM,gBAAiB,CAAA,KAAA,GAAQ,WAAY,CAAA,kBAAA,CAAmB,OAAO,EAAE,CAAA;AAEvF,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,UAAU,KAAQ,GAAA,KAAA;AAE9B,MAAA,UAAA,CAAW,MAAM;AAEf,QAAA,IAAI,KAAM,CAAA,SAAA;AACR,UAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,SAC7B,CAAC,CAAA;AAAA,KACL,CAAA;AAED,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,WAAA,CAAY,UAAU,KAAQ,GAAA,IAAA;AAAA,KAC/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Listbox/ListboxFilter.js

@@ -55,7 +55,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ],
         onInput: _cache[0] || (_cache[0] = (event) => {
           modelValue.value = event.target.value;
-          unref(rootContext).highlightFirstItem(event);
+          unref(rootContext).highlightFirstItem();
         }),
         onCompositionstart: unref(rootContext).onCompositionStart,
         onCompositionend: unref(rootContext).onCompositionEnd

package/dist/Listbox/ListboxFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListboxFilter.js","sources":["../../src/Listbox/ListboxFilter.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '..'\nimport { useVModel } from '@vueuse/core'\nimport { computed, onMounted, onUnmounted, ref, watchSyncEffect } from 'vue'\nimport { usePrimitiveElement } from '@/Primitive'\nimport { Primitive } from '..'\nimport { injectListboxRootContext } from './ListboxRoot.vue'\n\nexport interface ListboxFilterProps extends PrimitiveProps {\n  /** The controlled value of the filter. Can be binded with with v-model. */\n  modelValue?: string\n  /** Focus on element when mounted. */\n  autoFocus?: boolean\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n\nexport type ListboxFilterEmits = {\n  'update:modelValue': [string]\n}\n</script>\n\n<script setup lang=\"ts\">\nconst props = withDefaults(defineProps<ListboxFilterProps>(), {\n  as: 'input',\n})\nconst emits = defineEmits<ListboxFilterEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: '',\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst rootContext = injectListboxRootContext()\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst disabled = computed(() => props.disabled || rootContext.disabled.value || false)\n\nconst activedescendant = ref<string | undefined>()\nwatchSyncEffect(() => activedescendant.value = rootContext.highlightedElement.value?.id)\n\nonMounted(() => {\n  rootContext.focusable.value = false\n\n  setTimeout(() => {\n    // make sure all DOM was flush then only capture the focus\n    if (props.autoFocus)\n      currentElement.value?.focus()\n  }, 1)\n})\n\nonUnmounted(() => {\n  rootContext.focusable.value = true\n})\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :value=\"modelValue\"\n    :disabled=\"disabled ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :aria-disabled=\"disabled ?? undefined\"\n    :aria-activedescendant=\"activedescendant\"\n    type=\"text\"\n    @keydown.down.up.home.end.prevent=\"rootContext.onKeydownNavigation\"\n    @keydown.enter=\"rootContext.onKeydownEnter\"\n    @input=\"(event: InputEvent) => {\n      modelValue = (event.target as HTMLInputElement).value\n      rootContext.highlightFirstItem(event)\n    }\"\n    @compositionstart=\"rootContext.onCompositionStart\"\n    @compositionend=\"rootContext.onCompositionEnd\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAc,EAAA,EAAA;AAAA,MACd,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,cAAc,wBAAyB,EAAA;AAE7C,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AACjE,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM,KAAA,CAAM,YAAY,WAAY,CAAA,QAAA,CAAS,SAAS,KAAK,CAAA;AAErF,IAAA,MAAM,mBAAmB,GAAwB,EAAA;AACjD,IAAA,eAAA,CAAgB,MAAM,gBAAiB,CAAA,KAAA,GAAQ,WAAY,CAAA,kBAAA,CAAmB,OAAO,EAAE,CAAA;AAEvF,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,UAAU,KAAQ,GAAA,KAAA;AAE9B,MAAA,UAAA,CAAW,MAAM;AAEf,QAAA,IAAI,KAAM,CAAA,SAAA;AACR,UAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,SAC7B,CAAC,CAAA;AAAA,KACL,CAAA;AAED,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,WAAA,CAAY,UAAU,KAAQ,GAAA,IAAA;AAAA,KAC/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ListboxFilter.js","sources":["../../src/Listbox/ListboxFilter.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '..'\nimport { useVModel } from '@vueuse/core'\nimport { computed, onMounted, onUnmounted, ref, watchSyncEffect } from 'vue'\nimport { usePrimitiveElement } from '@/Primitive'\nimport { Primitive } from '..'\nimport { injectListboxRootContext } from './ListboxRoot.vue'\n\nexport interface ListboxFilterProps extends PrimitiveProps {\n  /** The controlled value of the filter. Can be binded with with v-model. */\n  modelValue?: string\n  /** Focus on element when mounted. */\n  autoFocus?: boolean\n  /** When `true`, prevents the user from interacting with item */\n  disabled?: boolean\n}\n\nexport type ListboxFilterEmits = {\n  'update:modelValue': [string]\n}\n</script>\n\n<script setup lang=\"ts\">\nconst props = withDefaults(defineProps<ListboxFilterProps>(), {\n  as: 'input',\n})\nconst emits = defineEmits<ListboxFilterEmits>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current input values */\n    modelValue: typeof modelValue.value\n  }) => any\n}>()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  defaultValue: '',\n  passive: (props.modelValue === undefined) as false,\n})\n\nconst rootContext = injectListboxRootContext()\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\nconst disabled = computed(() => props.disabled || rootContext.disabled.value || false)\n\nconst activedescendant = ref<string | undefined>()\nwatchSyncEffect(() => activedescendant.value = rootContext.highlightedElement.value?.id)\n\nonMounted(() => {\n  rootContext.focusable.value = false\n\n  setTimeout(() => {\n    // make sure all DOM was flush then only capture the focus\n    if (props.autoFocus)\n      currentElement.value?.focus()\n  }, 1)\n})\n\nonUnmounted(() => {\n  rootContext.focusable.value = true\n})\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :value=\"modelValue\"\n    :disabled=\"disabled ? '' : undefined\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :aria-disabled=\"disabled ?? undefined\"\n    :aria-activedescendant=\"activedescendant\"\n    type=\"text\"\n    @keydown.down.up.home.end.prevent=\"rootContext.onKeydownNavigation\"\n    @keydown.enter=\"rootContext.onKeydownEnter\"\n    @input=\"(event: InputEvent) => {\n      modelValue = (event.target as HTMLInputElement).value\n      rootContext.highlightFirstItem()\n    }\"\n    @compositionstart=\"rootContext.onCompositionStart\"\n    @compositionend=\"rootContext.onCompositionEnd\"\n  >\n    <slot :model-value=\"modelValue\" />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AASd,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,YAAc,EAAA,EAAA;AAAA,MACd,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,MAAM,cAAc,wBAAyB,EAAA;AAE7C,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AACjE,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM,KAAA,CAAM,YAAY,WAAY,CAAA,QAAA,CAAS,SAAS,KAAK,CAAA;AAErF,IAAA,MAAM,mBAAmB,GAAwB,EAAA;AACjD,IAAA,eAAA,CAAgB,MAAM,gBAAiB,CAAA,KAAA,GAAQ,WAAY,CAAA,kBAAA,CAAmB,OAAO,EAAE,CAAA;AAEvF,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,WAAA,CAAY,UAAU,KAAQ,GAAA,KAAA;AAE9B,MAAA,UAAA,CAAW,MAAM;AAEf,QAAA,IAAI,KAAM,CAAA,SAAA;AACR,UAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA,SAC7B,CAAC,CAAA;AAAA,KACL,CAAA;AAED,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,WAAA,CAAY,UAAU,KAAQ,GAAA,IAAA;AAAA,KAC/B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}