reka-ui 2.1.0 → 2.1.1

package/dist/Calendar/CalendarCellTrigger.cjs

@@ -98,8 +98,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         rootContext.prevPage();
         vue.nextTick(() => {
           const newCollectionItems = parentElement ? Array.from(parentElement.querySelectorAll(SELECTOR)) : [];
-          if (!rootContext.pagedNavigation.value) {
-            const numberOfDays = date_comparators.getDaysInMonth(rootContext.placeholder.value);
+          if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
+            const numberOfDays = date_comparators.getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value }));
             newCollectionItems[numberOfDays - Math.abs(newIndex)].focus();
             return;
           }
@@ -113,9 +113,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         rootContext.nextPage();
         vue.nextTick(() => {
           const newCollectionItems = parentElement ? Array.from(parentElement.querySelectorAll(SELECTOR)) : [];
-          if (!rootContext.pagedNavigation.value) {
-            const numberOfDays = date_comparators.getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }));
-            newCollectionItems[newCollectionItems.length - numberOfDays + newIndex - allCollectionItems.length].focus();
+          if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
+            const numberOfDays = date_comparators.getDaysInMonth(
+              rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 })
+            );
+            newCollectionItems[newIndex - allCollectionItems.length + (newCollectionItems.length - numberOfDays)].focus();
             return;
           }
           newCollectionItems[newIndex - allCollectionItems.length].focus();

package/dist/Calendar/CalendarCellTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarCellTrigger.cjs","sources":["../../src/Calendar/CalendarCellTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport {\n  type DateValue,\n  getLocalTimeZone,\n  isSameDay,\n  isSameMonth,\n  isToday,\n} from '@internationalized/date'\nimport { computed, nextTick } from 'vue'\nimport { useKbd } from '@/shared'\nimport { getDaysInMonth, toDate } from '@/date'\n\nexport interface CalendarCellTriggerProps extends PrimitiveProps {\n  /** The date value provided to the cell trigger */\n  day: DateValue\n  /** The month in which the cell is rendered */\n  month: DateValue\n}\n\nexport interface CalendarCellTriggerSlot {\n  default: (props: {\n    /** Current day */\n    dayValue: string\n    /** Current disable state */\n    disabled: boolean\n    /** Current selected state */\n    selected: boolean\n    /** Current today state */\n    today: boolean\n    /** Current outside view state */\n    outsideView: boolean\n    /** Current outside visible view state */\n    outsideVisibleView: boolean\n    /** Current unavailable state */\n    unavailable: boolean\n  }) => any\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { injectCalendarRootContext } from './CalendarRoot.vue'\n\nconst props = withDefaults(defineProps<CalendarCellTriggerProps>(), {\n  as: 'div',\n})\n\ndefineSlots<CalendarCellTriggerSlot>()\n\nconst kbd = useKbd()\nconst rootContext = injectCalendarRootContext()\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst dayValue = computed(() => props.day.day.toLocaleString(rootContext.locale.value))\n\nconst labelText = computed(() => {\n  return rootContext.formatter.custom(toDate(props.day), {\n    weekday: 'long',\n    month: 'long',\n    day: 'numeric',\n    year: 'numeric',\n  })\n})\n\nconst isDisabled = computed(() => rootContext.isDateDisabled(props.day))\nconst isUnavailable = computed(() =>\n  rootContext.isDateUnavailable?.(props.day) ?? false,\n)\nconst isDateToday = computed(() => {\n  return isToday(props.day, getLocalTimeZone())\n})\nconst isOutsideView = computed(() => {\n  return !isSameMonth(props.day, props.month)\n})\nconst isOutsideVisibleView = computed(() =>\n  rootContext.isOutsideVisibleView(props.day),\n)\n\nconst isFocusedDate = computed(() => {\n  return !rootContext.disabled.value && isSameDay(props.day, rootContext.placeholder.value)\n})\nconst isSelectedDate = computed(() => rootContext.isDateSelected(props.day))\n\nconst SELECTOR\n  = '[data-reka-calendar-cell-trigger]:not([data-disabled]):not([data-outside-view]):not([data-outside-visible-view])'\n\nfunction changeDate(date: DateValue) {\n  if (rootContext.readonly.value)\n    return\n  if (rootContext.isDateDisabled(date) || rootContext.isDateUnavailable?.(date))\n    return\n\n  rootContext.onDateChange(date)\n}\n\nfunction handleClick() {\n  changeDate(props.day)\n}\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  e.preventDefault()\n  e.stopPropagation()\n  const parentElement = rootContext.parentElement.value!\n  const allCollectionItems: HTMLElement[] = parentElement\n    ? Array.from(parentElement.querySelectorAll(SELECTOR))\n    : []\n  const index = allCollectionItems.indexOf(currentElement.value)\n  let newIndex = index\n  const indexIncrementation = 7\n  const sign = rootContext.dir.value === 'rtl' ? -1 : 1\n  switch (e.code) {\n    case kbd.ARROW_RIGHT:\n      newIndex += sign\n      break\n    case kbd.ARROW_LEFT:\n      newIndex -= sign\n      break\n    case kbd.ARROW_UP:\n      newIndex -= indexIncrementation\n      break\n    case kbd.ARROW_DOWN:\n      newIndex += indexIncrementation\n      break\n    case kbd.ENTER:\n    case kbd.SPACE_CODE:\n      changeDate(props.day)\n      return\n    default:\n      return\n  }\n\n  if (newIndex >= 0 && newIndex < allCollectionItems.length) {\n    allCollectionItems[newIndex].focus()\n    return\n  }\n\n  if (newIndex < 0) {\n    if (rootContext.isPrevButtonDisabled())\n      return\n    rootContext.prevPage()\n    nextTick(() => {\n      const newCollectionItems: HTMLElement[] = parentElement\n        ? Array.from(parentElement.querySelectorAll(SELECTOR))\n        : []\n      if (!rootContext.pagedNavigation.value) {\n        // Placeholder is set to first month of the new page\n        const numberOfDays = getDaysInMonth(rootContext.placeholder.value)\n        newCollectionItems[\n          numberOfDays - Math.abs(newIndex)\n        ].focus()\n        return\n      }\n      newCollectionItems[\n        newCollectionItems.length - Math.abs(newIndex)\n      ].focus()\n    })\n    return\n  }\n\n  if (newIndex >= allCollectionItems.length) {\n    if (rootContext.isNextButtonDisabled())\n      return\n    rootContext.nextPage()\n    nextTick(() => {\n      const newCollectionItems: HTMLElement[] = parentElement\n        ? Array.from(parentElement.querySelectorAll(SELECTOR))\n        : []\n\n      if (!rootContext.pagedNavigation.value) {\n        // Placeholder is set to first month of the new page\n        const numberOfDays = getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }))\n        newCollectionItems[newCollectionItems.length - numberOfDays + newIndex - allCollectionItems.length].focus()\n        return\n      }\n\n      newCollectionItems[newIndex - allCollectionItems.length].focus()\n    })\n  }\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    v-bind=\"props\"\n    role=\"button\"\n    :aria-label=\"labelText\"\n    data-reka-calendar-cell-trigger\n    :aria-disabled=\"isDisabled || isUnavailable ? true : undefined\"\n    :data-selected=\"isSelectedDate ? true : undefined\"\n    :data-value=\"day.toString()\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n    :data-unavailable=\"isUnavailable ? '' : undefined\"\n    :data-today=\"isDateToday ? '' : undefined\"\n    :data-outside-view=\"isOutsideView ? '' : undefined\"\n    :data-outside-visible-view=\"isOutsideVisibleView ? '' : undefined\"\n    :data-focused=\"isFocusedDate ? '' : undefined\"\n    :tabindex=\"isFocusedDate ? 0 : isOutsideView || isDisabled ? undefined : -1\"\n    @click=\"handleClick\"\n    @keydown.up.down.left.right.space.enter=\"handleArrowKey\"\n    @keydown.enter.prevent\n  >\n    <slot\n      :day-value=\"dayValue\"\n      :disabled=\"isDisabled\"\n      :today=\"isDateToday\"\n      :selected=\"isSelectedDate\"\n      :outside-view=\"isOutsideView\"\n      :outside-visible-view=\"isOutsideVisibleView\"\n      :unavailable=\"isUnavailable\"\n    >\n      {{ dayValue }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":["useKbd","injectCalendarRootContext","usePrimitiveElement","computed","toDate","isToday","getLocalTimeZone","isSameMonth","isSameDay","nextTick","getDaysInMonth"],"mappings":"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"}
+{"version":3,"file":"CalendarCellTrigger.cjs","sources":["../../src/Calendar/CalendarCellTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport {\n  type DateValue,\n  getLocalTimeZone,\n  isSameDay,\n  isSameMonth,\n  isToday,\n} from '@internationalized/date'\nimport { computed, nextTick } from 'vue'\nimport { useKbd } from '@/shared'\nimport { getDaysInMonth, toDate } from '@/date'\n\nexport interface CalendarCellTriggerProps extends PrimitiveProps {\n  /** The date value provided to the cell trigger */\n  day: DateValue\n  /** The month in which the cell is rendered */\n  month: DateValue\n}\n\nexport interface CalendarCellTriggerSlot {\n  default: (props: {\n    /** Current day */\n    dayValue: string\n    /** Current disable state */\n    disabled: boolean\n    /** Current selected state */\n    selected: boolean\n    /** Current today state */\n    today: boolean\n    /** Current outside view state */\n    outsideView: boolean\n    /** Current outside visible view state */\n    outsideVisibleView: boolean\n    /** Current unavailable state */\n    unavailable: boolean\n  }) => any\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { injectCalendarRootContext } from './CalendarRoot.vue'\n\nconst props = withDefaults(defineProps<CalendarCellTriggerProps>(), {\n  as: 'div',\n})\n\ndefineSlots<CalendarCellTriggerSlot>()\n\nconst kbd = useKbd()\nconst rootContext = injectCalendarRootContext()\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst dayValue = computed(() => props.day.day.toLocaleString(rootContext.locale.value))\n\nconst labelText = computed(() => {\n  return rootContext.formatter.custom(toDate(props.day), {\n    weekday: 'long',\n    month: 'long',\n    day: 'numeric',\n    year: 'numeric',\n  })\n})\n\nconst isDisabled = computed(() => rootContext.isDateDisabled(props.day))\nconst isUnavailable = computed(() =>\n  rootContext.isDateUnavailable?.(props.day) ?? false,\n)\nconst isDateToday = computed(() => {\n  return isToday(props.day, getLocalTimeZone())\n})\nconst isOutsideView = computed(() => {\n  return !isSameMonth(props.day, props.month)\n})\nconst isOutsideVisibleView = computed(() =>\n  rootContext.isOutsideVisibleView(props.day),\n)\n\nconst isFocusedDate = computed(() => {\n  return !rootContext.disabled.value && isSameDay(props.day, rootContext.placeholder.value)\n})\nconst isSelectedDate = computed(() => rootContext.isDateSelected(props.day))\n\nconst SELECTOR\n  = '[data-reka-calendar-cell-trigger]:not([data-disabled]):not([data-outside-view]):not([data-outside-visible-view])'\n\nfunction changeDate(date: DateValue) {\n  if (rootContext.readonly.value)\n    return\n  if (rootContext.isDateDisabled(date) || rootContext.isDateUnavailable?.(date))\n    return\n\n  rootContext.onDateChange(date)\n}\n\nfunction handleClick() {\n  changeDate(props.day)\n}\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  e.preventDefault()\n  e.stopPropagation()\n  const parentElement = rootContext.parentElement.value!\n  const allCollectionItems: HTMLElement[] = parentElement\n    ? Array.from(parentElement.querySelectorAll(SELECTOR))\n    : []\n  const index = allCollectionItems.indexOf(currentElement.value)\n  let newIndex = index\n  const indexIncrementation = 7\n  const sign = rootContext.dir.value === 'rtl' ? -1 : 1\n  switch (e.code) {\n    case kbd.ARROW_RIGHT:\n      newIndex += sign\n      break\n    case kbd.ARROW_LEFT:\n      newIndex -= sign\n      break\n    case kbd.ARROW_UP:\n      newIndex -= indexIncrementation\n      break\n    case kbd.ARROW_DOWN:\n      newIndex += indexIncrementation\n      break\n    case kbd.ENTER:\n    case kbd.SPACE_CODE:\n      changeDate(props.day)\n      return\n    default:\n      return\n  }\n\n  if (newIndex >= 0 && newIndex < allCollectionItems.length) {\n    allCollectionItems[newIndex].focus()\n    return\n  }\n\n  if (newIndex < 0) {\n    if (rootContext.isPrevButtonDisabled())\n      return\n    rootContext.prevPage()\n    nextTick(() => {\n      const newCollectionItems: HTMLElement[] = parentElement\n        ? Array.from(parentElement.querySelectorAll(SELECTOR))\n        : []\n      if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {\n        // Placeholder is set to first month of the new page\n        const numberOfDays = getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value }))\n        newCollectionItems[\n          numberOfDays - Math.abs(newIndex)\n        ].focus()\n        return\n      }\n      newCollectionItems[\n        newCollectionItems.length - Math.abs(newIndex)\n      ].focus()\n    })\n    return\n  }\n\n  if (newIndex >= allCollectionItems.length) {\n    if (rootContext.isNextButtonDisabled())\n      return\n    rootContext.nextPage()\n    nextTick(() => {\n      const newCollectionItems: HTMLElement[] = parentElement\n        ? Array.from(parentElement.querySelectorAll(SELECTOR))\n        : []\n\n      if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {\n        // Placeholder is set to first month of the new page\n        const numberOfDays = getDaysInMonth(\n          rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }),\n        )\n        newCollectionItems[newIndex - allCollectionItems.length + (newCollectionItems.length - numberOfDays)].focus()\n        return\n      }\n\n      newCollectionItems[newIndex - allCollectionItems.length].focus()\n    })\n  }\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    v-bind=\"props\"\n    role=\"button\"\n    :aria-label=\"labelText\"\n    data-reka-calendar-cell-trigger\n    :aria-disabled=\"isDisabled || isUnavailable ? true : undefined\"\n    :data-selected=\"isSelectedDate ? true : undefined\"\n    :data-value=\"day.toString()\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n    :data-unavailable=\"isUnavailable ? '' : undefined\"\n    :data-today=\"isDateToday ? '' : undefined\"\n    :data-outside-view=\"isOutsideView ? '' : undefined\"\n    :data-outside-visible-view=\"isOutsideVisibleView ? '' : undefined\"\n    :data-focused=\"isFocusedDate ? '' : undefined\"\n    :tabindex=\"isFocusedDate ? 0 : isOutsideView || isDisabled ? undefined : -1\"\n    @click=\"handleClick\"\n    @keydown.up.down.left.right.space.enter=\"handleArrowKey\"\n    @keydown.enter.prevent\n  >\n    <slot\n      :day-value=\"dayValue\"\n      :disabled=\"isDisabled\"\n      :today=\"isDateToday\"\n      :selected=\"isSelectedDate\"\n      :outside-view=\"isOutsideView\"\n      :outside-visible-view=\"isOutsideVisibleView\"\n      :unavailable=\"isUnavailable\"\n    >\n      {{ dayValue }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":["useKbd","injectCalendarRootContext","usePrimitiveElement","computed","toDate","isToday","getLocalTimeZone","isSameMonth","isSameDay","nextTick","getDaysInMonth"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4CA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,MAAMA,oBAAO,EAAA;AACnB,IAAA,MAAM,cAAcC,+CAA0B,EAAA;AAE9C,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AAEjE,IAAM,MAAA,QAAA,GAAWC,YAAS,CAAA,MAAM,KAAM,CAAA,GAAA,CAAI,IAAI,cAAe,CAAA,WAAA,CAAY,MAAO,CAAA,KAAK,CAAC,CAAA;AAEtF,IAAM,MAAA,SAAA,GAAYA,aAAS,MAAM;AAC/B,MAAA,OAAO,YAAY,SAAU,CAAA,MAAA,CAAOC,uBAAO,CAAA,KAAA,CAAM,GAAG,CAAG,EAAA;AAAA,QACrD,OAAS,EAAA,MAAA;AAAA,QACT,KAAO,EAAA,MAAA;AAAA,QACP,GAAK,EAAA,SAAA;AAAA,QACL,IAAM,EAAA;AAAA,OACP,CAAA;AAAA,KACF,CAAA;AAED,IAAA,MAAM,aAAaD,YAAS,CAAA,MAAM,YAAY,cAAe,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AACvE,IAAA,MAAM,aAAgB,GAAAA,YAAA;AAAA,MAAS,MAC7B,WAAA,CAAY,iBAAoB,GAAA,KAAA,CAAM,GAAG,CAAK,IAAA;AAAA,KAChD;AACA,IAAM,MAAA,WAAA,GAAcA,aAAS,MAAM;AACjC,MAAA,OAAOE,YAAQ,CAAA,KAAA,CAAM,GAAK,EAAAC,qBAAA,EAAkB,CAAA;AAAA,KAC7C,CAAA;AACD,IAAM,MAAA,aAAA,GAAgBH,aAAS,MAAM;AACnC,MAAA,OAAO,CAACI,gBAAA,CAAY,KAAM,CAAA,GAAA,EAAK,MAAM,KAAK,CAAA;AAAA,KAC3C,CAAA;AACD,IAAA,MAAM,oBAAuB,GAAAJ,YAAA;AAAA,MAAS,MACpC,WAAA,CAAY,oBAAqB,CAAA,KAAA,CAAM,GAAG;AAAA,KAC5C;AAEA,IAAM,MAAA,aAAA,GAAgBA,aAAS,MAAM;AACnC,MAAO,OAAA,CAAC,YAAY,QAAS,CAAA,KAAA,IAASK,eAAU,KAAM,CAAA,GAAA,EAAK,WAAY,CAAA,WAAA,CAAY,KAAK,CAAA;AAAA,KACzF,CAAA;AACD,IAAA,MAAM,iBAAiBL,YAAS,CAAA,MAAM,YAAY,cAAe,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAE3E,IAAA,MAAM,QACF,GAAA,kHAAA;AAEJ,IAAA,SAAS,WAAW,IAAiB,EAAA;AACnC,MAAA,IAAI,YAAY,QAAS,CAAA,KAAA;AACvB,QAAA;AACF,MAAA,IAAI,YAAY,cAAe,CAAA,IAAI,CAAK,IAAA,WAAA,CAAY,oBAAoB,IAAI,CAAA;AAC1E,QAAA;AAEF,MAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAAA;AAG/B,IAAA,SAAS,WAAc,GAAA;AACrB,MAAA,UAAA,CAAW,MAAM,GAAG,CAAA;AAAA;AAGtB,IAAA,SAAS,eAAe,CAAkB,EAAA;AACxC,MAAA,CAAA,CAAE,cAAe,EAAA;AACjB,MAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,MAAM,MAAA,aAAA,GAAgB,YAAY,aAAc,CAAA,KAAA;AAChD,MAAM,MAAA,kBAAA,GAAoC,gBACtC,KAAM,CAAA,IAAA,CAAK,cAAc,gBAAiB,CAAA,QAAQ,CAAC,CAAA,GACnD,EAAC;AACL,MAAA,MAAM,KAAQ,GAAA,kBAAA,CAAmB,OAAQ,CAAA,cAAA,CAAe,KAAK,CAAA;AAC7D,MAAA,IAAI,QAAW,GAAA,KAAA;AACf,MAAA,MAAM,mBAAsB,GAAA,CAAA;AAC5B,MAAA,MAAM,IAAO,GAAA,WAAA,CAAY,GAAI,CAAA,KAAA,KAAU,QAAQ,EAAK,GAAA,CAAA;AACpD,MAAA,QAAQ,EAAE,IAAM;AAAA,QACd,KAAK,GAAI,CAAA,WAAA;AACP,UAAY,QAAA,IAAA,IAAA;AACZ,UAAA;AAAA,QACF,KAAK,GAAI,CAAA,UAAA;AACP,UAAY,QAAA,IAAA,IAAA;AACZ,UAAA;AAAA,QACF,KAAK,GAAI,CAAA,QAAA;AACP,UAAY,QAAA,IAAA,mBAAA;AACZ,UAAA;AAAA,QACF,KAAK,GAAI,CAAA,UAAA;AACP,UAAY,QAAA,IAAA,mBAAA;AACZ,UAAA;AAAA,QACF,KAAK,GAAI,CAAA,KAAA;AAAA,QACT,KAAK,GAAI,CAAA,UAAA;AACP,UAAA,UAAA,CAAW,MAAM,GAAG,CAAA;AACpB,UAAA;AAAA,QACF;AACE,UAAA;AAAA;AAGJ,MAAA,IAAI,QAAY,IAAA,CAAA,IAAK,QAAW,GAAA,kBAAA,CAAmB,MAAQ,EAAA;AACzD,QAAmB,kBAAA,CAAA,QAAQ,EAAE,KAAM,EAAA;AACnC,QAAA;AAAA;AAGF,MAAA,IAAI,WAAW,CAAG,EAAA;AAChB,QAAA,IAAI,YAAY,oBAAqB,EAAA;AACnC,UAAA;AACF,QAAA,WAAA,CAAY,QAAS,EAAA;AACrB,QAAAM,YAAA,CAAS,MAAM;AACb,UAAM,MAAA,kBAAA,GAAoC,gBACtC,KAAM,CAAA,IAAA,CAAK,cAAc,gBAAiB,CAAA,QAAQ,CAAC,CAAA,GACnD,EAAC;AACL,UAAA,IAAI,CAAC,WAAY,CAAA,eAAA,CAAgB,SAAS,WAAY,CAAA,cAAA,CAAe,QAAQ,CAAG,EAAA;AAE9E,YAAA,MAAM,YAAe,GAAAC,+BAAA,CAAe,WAAY,CAAA,WAAA,CAAY,KAAM,CAAA,GAAA,CAAI,EAAE,MAAA,EAAQ,WAAY,CAAA,cAAA,CAAe,KAAM,EAAC,CAAC,CAAA;AACnH,YAAA,kBAAA,CACE,eAAe,IAAK,CAAA,GAAA,CAAI,QAAQ,CAClC,EAAE,KAAM,EAAA;AACR,YAAA;AAAA;AAEF,UAAA,kBAAA,CACE,mBAAmB,MAAS,GAAA,IAAA,CAAK,IAAI,QAAQ,CAC/C,EAAE,KAAM,EAAA;AAAA,SACT,CAAA;AACD,QAAA;AAAA;AAGF,MAAI,IAAA,QAAA,IAAY,mBAAmB,MAAQ,EAAA;AACzC,QAAA,IAAI,YAAY,oBAAqB,EAAA;AACnC,UAAA;AACF,QAAA,WAAA,CAAY,QAAS,EAAA;AACrB,QAAAD,YAAA,CAAS,MAAM;AACb,UAAM,MAAA,kBAAA,GAAoC,gBACtC,KAAM,CAAA,IAAA,CAAK,cAAc,gBAAiB,CAAA,QAAQ,CAAC,CAAA,GACnD,EAAC;AAEL,UAAA,IAAI,CAAC,WAAY,CAAA,eAAA,CAAgB,SAAS,WAAY,CAAA,cAAA,CAAe,QAAQ,CAAG,EAAA;AAE9E,YAAA,MAAM,YAAe,GAAAC,+BAAA;AAAA,cACnB,WAAA,CAAY,WAAY,CAAA,KAAA,CAAM,GAAI,CAAA,EAAE,QAAQ,WAAY,CAAA,cAAA,CAAe,KAAQ,GAAA,CAAA,EAAG;AAAA,aACpF;AACA,YAAA,kBAAA,CAAmB,WAAW,kBAAmB,CAAA,MAAA,IAAU,mBAAmB,MAAS,GAAA,YAAA,CAAa,EAAE,KAAM,EAAA;AAC5G,YAAA;AAAA;AAGF,UAAA,kBAAA,CAAmB,QAAW,GAAA,kBAAA,CAAmB,MAAM,CAAA,CAAE,KAAM,EAAA;AAAA,SAChE,CAAA;AAAA;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Calendar/CalendarCellTrigger.js

@@ -96,8 +96,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         rootContext.prevPage();
         nextTick(() => {
           const newCollectionItems = parentElement ? Array.from(parentElement.querySelectorAll(SELECTOR)) : [];
-          if (!rootContext.pagedNavigation.value) {
-            const numberOfDays = getDaysInMonth(rootContext.placeholder.value);
+          if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
+            const numberOfDays = getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value }));
             newCollectionItems[numberOfDays - Math.abs(newIndex)].focus();
             return;
           }
@@ -111,9 +111,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         rootContext.nextPage();
         nextTick(() => {
           const newCollectionItems = parentElement ? Array.from(parentElement.querySelectorAll(SELECTOR)) : [];
-          if (!rootContext.pagedNavigation.value) {
-            const numberOfDays = getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }));
-            newCollectionItems[newCollectionItems.length - numberOfDays + newIndex - allCollectionItems.length].focus();
+          if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
+            const numberOfDays = getDaysInMonth(
+              rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 })
+            );
+            newCollectionItems[newIndex - allCollectionItems.length + (newCollectionItems.length - numberOfDays)].focus();
             return;
           }
           newCollectionItems[newIndex - allCollectionItems.length].focus();

package/dist/Calendar/CalendarCellTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarCellTrigger.js","sources":["../../src/Calendar/CalendarCellTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport {\n  type DateValue,\n  getLocalTimeZone,\n  isSameDay,\n  isSameMonth,\n  isToday,\n} from '@internationalized/date'\nimport { computed, nextTick } from 'vue'\nimport { useKbd } from '@/shared'\nimport { getDaysInMonth, toDate } from '@/date'\n\nexport interface CalendarCellTriggerProps extends PrimitiveProps {\n  /** The date value provided to the cell trigger */\n  day: DateValue\n  /** The month in which the cell is rendered */\n  month: DateValue\n}\n\nexport interface CalendarCellTriggerSlot {\n  default: (props: {\n    /** Current day */\n    dayValue: string\n    /** Current disable state */\n    disabled: boolean\n    /** Current selected state */\n    selected: boolean\n    /** Current today state */\n    today: boolean\n    /** Current outside view state */\n    outsideView: boolean\n    /** Current outside visible view state */\n    outsideVisibleView: boolean\n    /** Current unavailable state */\n    unavailable: boolean\n  }) => any\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { injectCalendarRootContext } from './CalendarRoot.vue'\n\nconst props = withDefaults(defineProps<CalendarCellTriggerProps>(), {\n  as: 'div',\n})\n\ndefineSlots<CalendarCellTriggerSlot>()\n\nconst kbd = useKbd()\nconst rootContext = injectCalendarRootContext()\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst dayValue = computed(() => props.day.day.toLocaleString(rootContext.locale.value))\n\nconst labelText = computed(() => {\n  return rootContext.formatter.custom(toDate(props.day), {\n    weekday: 'long',\n    month: 'long',\n    day: 'numeric',\n    year: 'numeric',\n  })\n})\n\nconst isDisabled = computed(() => rootContext.isDateDisabled(props.day))\nconst isUnavailable = computed(() =>\n  rootContext.isDateUnavailable?.(props.day) ?? false,\n)\nconst isDateToday = computed(() => {\n  return isToday(props.day, getLocalTimeZone())\n})\nconst isOutsideView = computed(() => {\n  return !isSameMonth(props.day, props.month)\n})\nconst isOutsideVisibleView = computed(() =>\n  rootContext.isOutsideVisibleView(props.day),\n)\n\nconst isFocusedDate = computed(() => {\n  return !rootContext.disabled.value && isSameDay(props.day, rootContext.placeholder.value)\n})\nconst isSelectedDate = computed(() => rootContext.isDateSelected(props.day))\n\nconst SELECTOR\n  = '[data-reka-calendar-cell-trigger]:not([data-disabled]):not([data-outside-view]):not([data-outside-visible-view])'\n\nfunction changeDate(date: DateValue) {\n  if (rootContext.readonly.value)\n    return\n  if (rootContext.isDateDisabled(date) || rootContext.isDateUnavailable?.(date))\n    return\n\n  rootContext.onDateChange(date)\n}\n\nfunction handleClick() {\n  changeDate(props.day)\n}\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  e.preventDefault()\n  e.stopPropagation()\n  const parentElement = rootContext.parentElement.value!\n  const allCollectionItems: HTMLElement[] = parentElement\n    ? Array.from(parentElement.querySelectorAll(SELECTOR))\n    : []\n  const index = allCollectionItems.indexOf(currentElement.value)\n  let newIndex = index\n  const indexIncrementation = 7\n  const sign = rootContext.dir.value === 'rtl' ? -1 : 1\n  switch (e.code) {\n    case kbd.ARROW_RIGHT:\n      newIndex += sign\n      break\n    case kbd.ARROW_LEFT:\n      newIndex -= sign\n      break\n    case kbd.ARROW_UP:\n      newIndex -= indexIncrementation\n      break\n    case kbd.ARROW_DOWN:\n      newIndex += indexIncrementation\n      break\n    case kbd.ENTER:\n    case kbd.SPACE_CODE:\n      changeDate(props.day)\n      return\n    default:\n      return\n  }\n\n  if (newIndex >= 0 && newIndex < allCollectionItems.length) {\n    allCollectionItems[newIndex].focus()\n    return\n  }\n\n  if (newIndex < 0) {\n    if (rootContext.isPrevButtonDisabled())\n      return\n    rootContext.prevPage()\n    nextTick(() => {\n      const newCollectionItems: HTMLElement[] = parentElement\n        ? Array.from(parentElement.querySelectorAll(SELECTOR))\n        : []\n      if (!rootContext.pagedNavigation.value) {\n        // Placeholder is set to first month of the new page\n        const numberOfDays = getDaysInMonth(rootContext.placeholder.value)\n        newCollectionItems[\n          numberOfDays - Math.abs(newIndex)\n        ].focus()\n        return\n      }\n      newCollectionItems[\n        newCollectionItems.length - Math.abs(newIndex)\n      ].focus()\n    })\n    return\n  }\n\n  if (newIndex >= allCollectionItems.length) {\n    if (rootContext.isNextButtonDisabled())\n      return\n    rootContext.nextPage()\n    nextTick(() => {\n      const newCollectionItems: HTMLElement[] = parentElement\n        ? Array.from(parentElement.querySelectorAll(SELECTOR))\n        : []\n\n      if (!rootContext.pagedNavigation.value) {\n        // Placeholder is set to first month of the new page\n        const numberOfDays = getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }))\n        newCollectionItems[newCollectionItems.length - numberOfDays + newIndex - allCollectionItems.length].focus()\n        return\n      }\n\n      newCollectionItems[newIndex - allCollectionItems.length].focus()\n    })\n  }\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    v-bind=\"props\"\n    role=\"button\"\n    :aria-label=\"labelText\"\n    data-reka-calendar-cell-trigger\n    :aria-disabled=\"isDisabled || isUnavailable ? true : undefined\"\n    :data-selected=\"isSelectedDate ? true : undefined\"\n    :data-value=\"day.toString()\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n    :data-unavailable=\"isUnavailable ? '' : undefined\"\n    :data-today=\"isDateToday ? '' : undefined\"\n    :data-outside-view=\"isOutsideView ? '' : undefined\"\n    :data-outside-visible-view=\"isOutsideVisibleView ? '' : undefined\"\n    :data-focused=\"isFocusedDate ? '' : undefined\"\n    :tabindex=\"isFocusedDate ? 0 : isOutsideView || isDisabled ? undefined : -1\"\n    @click=\"handleClick\"\n    @keydown.up.down.left.right.space.enter=\"handleArrowKey\"\n    @keydown.enter.prevent\n  >\n    <slot\n      :day-value=\"dayValue\"\n      :disabled=\"isDisabled\"\n      :today=\"isDateToday\"\n      :selected=\"isSelectedDate\"\n      :outside-view=\"isOutsideView\"\n      :outside-visible-view=\"isOutsideVisibleView\"\n      :unavailable=\"isUnavailable\"\n    >\n      {{ dayValue }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CalendarCellTrigger.js","sources":["../../src/Calendar/CalendarCellTrigger.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport {\n  type DateValue,\n  getLocalTimeZone,\n  isSameDay,\n  isSameMonth,\n  isToday,\n} from '@internationalized/date'\nimport { computed, nextTick } from 'vue'\nimport { useKbd } from '@/shared'\nimport { getDaysInMonth, toDate } from '@/date'\n\nexport interface CalendarCellTriggerProps extends PrimitiveProps {\n  /** The date value provided to the cell trigger */\n  day: DateValue\n  /** The month in which the cell is rendered */\n  month: DateValue\n}\n\nexport interface CalendarCellTriggerSlot {\n  default: (props: {\n    /** Current day */\n    dayValue: string\n    /** Current disable state */\n    disabled: boolean\n    /** Current selected state */\n    selected: boolean\n    /** Current today state */\n    today: boolean\n    /** Current outside view state */\n    outsideView: boolean\n    /** Current outside visible view state */\n    outsideVisibleView: boolean\n    /** Current unavailable state */\n    unavailable: boolean\n  }) => any\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { injectCalendarRootContext } from './CalendarRoot.vue'\n\nconst props = withDefaults(defineProps<CalendarCellTriggerProps>(), {\n  as: 'div',\n})\n\ndefineSlots<CalendarCellTriggerSlot>()\n\nconst kbd = useKbd()\nconst rootContext = injectCalendarRootContext()\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst dayValue = computed(() => props.day.day.toLocaleString(rootContext.locale.value))\n\nconst labelText = computed(() => {\n  return rootContext.formatter.custom(toDate(props.day), {\n    weekday: 'long',\n    month: 'long',\n    day: 'numeric',\n    year: 'numeric',\n  })\n})\n\nconst isDisabled = computed(() => rootContext.isDateDisabled(props.day))\nconst isUnavailable = computed(() =>\n  rootContext.isDateUnavailable?.(props.day) ?? false,\n)\nconst isDateToday = computed(() => {\n  return isToday(props.day, getLocalTimeZone())\n})\nconst isOutsideView = computed(() => {\n  return !isSameMonth(props.day, props.month)\n})\nconst isOutsideVisibleView = computed(() =>\n  rootContext.isOutsideVisibleView(props.day),\n)\n\nconst isFocusedDate = computed(() => {\n  return !rootContext.disabled.value && isSameDay(props.day, rootContext.placeholder.value)\n})\nconst isSelectedDate = computed(() => rootContext.isDateSelected(props.day))\n\nconst SELECTOR\n  = '[data-reka-calendar-cell-trigger]:not([data-disabled]):not([data-outside-view]):not([data-outside-visible-view])'\n\nfunction changeDate(date: DateValue) {\n  if (rootContext.readonly.value)\n    return\n  if (rootContext.isDateDisabled(date) || rootContext.isDateUnavailable?.(date))\n    return\n\n  rootContext.onDateChange(date)\n}\n\nfunction handleClick() {\n  changeDate(props.day)\n}\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  e.preventDefault()\n  e.stopPropagation()\n  const parentElement = rootContext.parentElement.value!\n  const allCollectionItems: HTMLElement[] = parentElement\n    ? Array.from(parentElement.querySelectorAll(SELECTOR))\n    : []\n  const index = allCollectionItems.indexOf(currentElement.value)\n  let newIndex = index\n  const indexIncrementation = 7\n  const sign = rootContext.dir.value === 'rtl' ? -1 : 1\n  switch (e.code) {\n    case kbd.ARROW_RIGHT:\n      newIndex += sign\n      break\n    case kbd.ARROW_LEFT:\n      newIndex -= sign\n      break\n    case kbd.ARROW_UP:\n      newIndex -= indexIncrementation\n      break\n    case kbd.ARROW_DOWN:\n      newIndex += indexIncrementation\n      break\n    case kbd.ENTER:\n    case kbd.SPACE_CODE:\n      changeDate(props.day)\n      return\n    default:\n      return\n  }\n\n  if (newIndex >= 0 && newIndex < allCollectionItems.length) {\n    allCollectionItems[newIndex].focus()\n    return\n  }\n\n  if (newIndex < 0) {\n    if (rootContext.isPrevButtonDisabled())\n      return\n    rootContext.prevPage()\n    nextTick(() => {\n      const newCollectionItems: HTMLElement[] = parentElement\n        ? Array.from(parentElement.querySelectorAll(SELECTOR))\n        : []\n      if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {\n        // Placeholder is set to first month of the new page\n        const numberOfDays = getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value }))\n        newCollectionItems[\n          numberOfDays - Math.abs(newIndex)\n        ].focus()\n        return\n      }\n      newCollectionItems[\n        newCollectionItems.length - Math.abs(newIndex)\n      ].focus()\n    })\n    return\n  }\n\n  if (newIndex >= allCollectionItems.length) {\n    if (rootContext.isNextButtonDisabled())\n      return\n    rootContext.nextPage()\n    nextTick(() => {\n      const newCollectionItems: HTMLElement[] = parentElement\n        ? Array.from(parentElement.querySelectorAll(SELECTOR))\n        : []\n\n      if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {\n        // Placeholder is set to first month of the new page\n        const numberOfDays = getDaysInMonth(\n          rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }),\n        )\n        newCollectionItems[newIndex - allCollectionItems.length + (newCollectionItems.length - numberOfDays)].focus()\n        return\n      }\n\n      newCollectionItems[newIndex - allCollectionItems.length].focus()\n    })\n  }\n}\n</script>\n\n<template>\n  <Primitive\n    ref=\"primitiveElement\"\n    v-bind=\"props\"\n    role=\"button\"\n    :aria-label=\"labelText\"\n    data-reka-calendar-cell-trigger\n    :aria-disabled=\"isDisabled || isUnavailable ? true : undefined\"\n    :data-selected=\"isSelectedDate ? true : undefined\"\n    :data-value=\"day.toString()\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n    :data-unavailable=\"isUnavailable ? '' : undefined\"\n    :data-today=\"isDateToday ? '' : undefined\"\n    :data-outside-view=\"isOutsideView ? '' : undefined\"\n    :data-outside-visible-view=\"isOutsideVisibleView ? '' : undefined\"\n    :data-focused=\"isFocusedDate ? '' : undefined\"\n    :tabindex=\"isFocusedDate ? 0 : isOutsideView || isDisabled ? undefined : -1\"\n    @click=\"handleClick\"\n    @keydown.up.down.left.right.space.enter=\"handleArrowKey\"\n    @keydown.enter.prevent\n  >\n    <slot\n      :day-value=\"dayValue\"\n      :disabled=\"isDisabled\"\n      :today=\"isDateToday\"\n      :selected=\"isSelectedDate\"\n      :outside-view=\"isOutsideView\"\n      :outside-visible-view=\"isOutsideVisibleView\"\n      :unavailable=\"isUnavailable\"\n    >\n      {{ dayValue }}\n    </slot>\n  </Primitive>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/Combobox/ComboboxItem.cjs

@@ -4,11 +4,9 @@ const vue = require('vue');
 const shared_useId = require('../shared/useId.cjs');
 const Primitive_usePrimitiveElement = require('../Primitive/usePrimitiveElement.cjs');
 const Listbox_ListboxItem = require('../Listbox/ListboxItem.cjs');
-const shared_createContext = require('../shared/createContext.cjs');
 const Combobox_ComboboxRoot = require('./ComboboxRoot.cjs');
 const Combobox_ComboboxGroup = require('./ComboboxGroup.cjs');
 
-const [injectComboboxItemContext, provideComboboxItemContext] = shared_createContext.createContext("ComboboxItem");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "ComboboxItem",
   props: {
@@ -84,5 +82,4 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
 });
 
 exports._sfc_main = _sfc_main;
-exports.injectComboboxItemContext = injectComboboxItemContext;
 //# sourceMappingURL=ComboboxItem.cjs.map

package/dist/Combobox/ComboboxItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxItem.cjs","sources":["../../src/Combobox/ComboboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { type Ref, computed, onMounted, onUnmounted } from 'vue'\nimport type { ListboxItemEmits, ListboxItemProps } from '@/Listbox'\nimport { createContext, useId } from '@/shared'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\nimport type { AcceptableValue } from '@/shared/types'\nimport { injectComboboxGroupContext } from './ComboboxGroup.vue'\nimport { usePrimitiveElement } from '@/Primitive'\n\ninterface ComboboxItemContext {\n  isSelected: Ref<boolean>\n}\n\nexport const [injectComboboxItemContext, provideComboboxItemContext]\n  = createContext<ComboboxItemContext>('ComboboxItem')\n\nexport type ComboboxItemEmits<T = AcceptableValue> = ListboxItemEmits<T>\nexport interface ComboboxItemProps<T = AcceptableValue> extends ListboxItemProps<T> {\n  /**\n   * A string representation of the item contents.\n   *\n   * If the children are not plain text, then the `textValue` prop must also be set to a plain text representation, which will be used for autocomplete in the ComboBox.\n   */\n  textValue?: string\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { ListboxItem } from '@/Listbox'\n\nconst props = defineProps<ComboboxItemProps<T>>()\nconst emits = defineEmits<ComboboxItemEmits<T>>()\n\nconst id = useId(undefined, 'reka-combobox-item')\nconst rootContext = injectComboboxRootContext()\nconst groupContext = injectComboboxGroupContext(null)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nif (props.value === '') {\n  throw new Error(\n    'A <ComboboxItem /> must have a value prop that is not an empty string. This is because the Combobox value can be set to an empty string to clear the selection and show the placeholder.',\n  )\n}\n\nconst isRender = computed(() => {\n  if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterState.search) {\n    return true\n  }\n  else {\n    const filteredCurrentItem = rootContext.filterState.filtered.items.get(id)\n    // If the filtered items is undefined means not in the all times map yet\n    // Do the first render to add into the map\n    if (filteredCurrentItem === undefined) {\n      return true\n    }\n\n    // Check with filter\n    return filteredCurrentItem > 0\n  }\n})\n\nonMounted(() => {\n  // textValue to perform filter\n  rootContext.allItems.value.set(id, props.textValue || currentElement.value.textContent || currentElement.value.innerText)\n\n  const groupId = groupContext?.id\n  if (groupId) {\n    if (!rootContext.allGroups.value.has(groupId)) {\n      rootContext.allGroups.value.set(groupId, new Set([id]))\n    }\n    else {\n      rootContext.allGroups.value.get(groupId)?.add(id)\n    }\n  }\n})\nonUnmounted(() => {\n  rootContext.allItems.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxItem\n    v-if=\"isRender\"\n    v-bind=\"props\"\n    :id=\"id\"\n    ref=\"primitiveElement\"\n    @select=\"(event) => {\n      emits('select', event as any)\n      if (event.defaultPrevented)\n        return\n\n      if (!rootContext.multiple.value) {\n        event.preventDefault()\n        rootContext.onOpenChange(false)\n        rootContext.modelValue.value = props.value\n      }\n    }\"\n  >\n    <slot>{{ value }}</slot>\n  </ListboxItem>\n</template>\n"],"names":["createContext","useId","injectComboboxRootContext","injectComboboxGroupContext","usePrimitiveElement","computed","onMounted","onUnmounted"],"mappings":";;;;;;;;;;AAaO,MAAM,CAAC,yBAAA,EAA2B,0BAA0B,CAAA,GAC/DA,mCAAmC,cAAc;;;;;;;;;;;;AAgBrD,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,EAAA,GAAKC,kBAAM,CAAA,SAAA,EAAW,oBAAoB,CAAA;AAChD,IAAA,MAAM,cAAcC,+CAA0B,EAAA;AAC9C,IAAM,MAAA,YAAA,GAAeC,kDAA2B,IAAI,CAAA;AAEpD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AAEjE,IAAI,IAAA,KAAA,CAAM,UAAU,EAAI,EAAA;AACtB,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAGF,IAAM,MAAA,QAAA,GAAWC,aAAS,MAAM;AAC9B,MAAI,IAAA,WAAA,CAAY,UAAU,KAAS,IAAA,WAAA,CAAY,aAAa,KAAS,IAAA,CAAC,WAAY,CAAA,WAAA,CAAY,MAAQ,EAAA;AACpG,QAAO,OAAA,IAAA;AAAA,OAEJ,MAAA;AACH,QAAA,MAAM,sBAAsB,WAAY,CAAA,WAAA,CAAY,QAAS,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAGzE,QAAA,IAAI,wBAAwB,SAAW,EAAA;AACrC,UAAO,OAAA,IAAA;AAAA;AAIT,QAAA,OAAO,mBAAsB,GAAA,CAAA;AAAA;AAC/B,KACD,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM;AAEd,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,GAAA,CAAI,EAAI,EAAA,KAAA,CAAM,SAAa,IAAA,cAAA,CAAe,KAAM,CAAA,WAAA,IAAe,cAAe,CAAA,KAAA,CAAM,SAAS,CAAA;AAExH,MAAA,MAAM,UAAU,YAAc,EAAA,EAAA;AAC9B,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,IAAI,CAAC,WAAY,CAAA,SAAA,CAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAG,EAAA;AAC7C,UAAY,WAAA,CAAA,SAAA,CAAU,MAAM,GAAI,CAAA,OAAA,sBAAa,GAAI,CAAA,CAAC,EAAE,CAAC,CAAC,CAAA;AAAA,SAEnD,MAAA;AACH,UAAA,WAAA,CAAY,UAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAA,EAAG,IAAI,EAAE,CAAA;AAAA;AAClD;AACF,KACD,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,KACrC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ComboboxItem.cjs","sources":["../../src/Combobox/ComboboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport type { ListboxItemEmits, ListboxItemProps } from '@/Listbox'\nimport { useId } from '@/shared'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\nimport type { AcceptableValue } from '@/shared/types'\nimport { injectComboboxGroupContext } from './ComboboxGroup.vue'\nimport { usePrimitiveElement } from '@/Primitive'\n\nexport { injectListboxItemContext as injectComboboxItemContext } from '@/Listbox'\n\nexport type ComboboxItemEmits<T = AcceptableValue> = ListboxItemEmits<T>\nexport interface ComboboxItemProps<T = AcceptableValue> extends ListboxItemProps<T> {\n  /**\n   * A string representation of the item contents.\n   *\n   * If the children are not plain text, then the `textValue` prop must also be set to a plain text representation, which will be used for autocomplete in the ComboBox.\n   */\n  textValue?: string\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { ListboxItem } from '@/Listbox'\n\nconst props = defineProps<ComboboxItemProps<T>>()\nconst emits = defineEmits<ComboboxItemEmits<T>>()\n\nconst id = useId(undefined, 'reka-combobox-item')\nconst rootContext = injectComboboxRootContext()\nconst groupContext = injectComboboxGroupContext(null)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nif (props.value === '') {\n  throw new Error(\n    'A <ComboboxItem /> must have a value prop that is not an empty string. This is because the Combobox value can be set to an empty string to clear the selection and show the placeholder.',\n  )\n}\n\nconst isRender = computed(() => {\n  if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterState.search) {\n    return true\n  }\n  else {\n    const filteredCurrentItem = rootContext.filterState.filtered.items.get(id)\n    // If the filtered items is undefined means not in the all times map yet\n    // Do the first render to add into the map\n    if (filteredCurrentItem === undefined) {\n      return true\n    }\n\n    // Check with filter\n    return filteredCurrentItem > 0\n  }\n})\n\nonMounted(() => {\n  // textValue to perform filter\n  rootContext.allItems.value.set(id, props.textValue || currentElement.value.textContent || currentElement.value.innerText)\n\n  const groupId = groupContext?.id\n  if (groupId) {\n    if (!rootContext.allGroups.value.has(groupId)) {\n      rootContext.allGroups.value.set(groupId, new Set([id]))\n    }\n    else {\n      rootContext.allGroups.value.get(groupId)?.add(id)\n    }\n  }\n})\nonUnmounted(() => {\n  rootContext.allItems.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxItem\n    v-if=\"isRender\"\n    v-bind=\"props\"\n    :id=\"id\"\n    ref=\"primitiveElement\"\n    @select=\"(event) => {\n      emits('select', event as any)\n      if (event.defaultPrevented)\n        return\n\n      if (!rootContext.multiple.value) {\n        event.preventDefault()\n        rootContext.onOpenChange(false)\n        rootContext.modelValue.value = props.value\n      }\n    }\"\n  >\n    <slot>{{ value }}</slot>\n  </ListboxItem>\n</template>\n"],"names":["useId","injectComboboxRootContext","injectComboboxGroupContext","usePrimitiveElement","computed","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,EAAA,GAAKA,kBAAM,CAAA,SAAA,EAAW,oBAAoB,CAAA;AAChD,IAAA,MAAM,cAAcC,+CAA0B,EAAA;AAC9C,IAAM,MAAA,YAAA,GAAeC,kDAA2B,IAAI,CAAA;AAEpD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AAEjE,IAAI,IAAA,KAAA,CAAM,UAAU,EAAI,EAAA;AACtB,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAGF,IAAM,MAAA,QAAA,GAAWC,aAAS,MAAM;AAC9B,MAAI,IAAA,WAAA,CAAY,UAAU,KAAS,IAAA,WAAA,CAAY,aAAa,KAAS,IAAA,CAAC,WAAY,CAAA,WAAA,CAAY,MAAQ,EAAA;AACpG,QAAO,OAAA,IAAA;AAAA,OAEJ,MAAA;AACH,QAAA,MAAM,sBAAsB,WAAY,CAAA,WAAA,CAAY,QAAS,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAGzE,QAAA,IAAI,wBAAwB,SAAW,EAAA;AACrC,UAAO,OAAA,IAAA;AAAA;AAIT,QAAA,OAAO,mBAAsB,GAAA,CAAA;AAAA;AAC/B,KACD,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM;AAEd,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,GAAA,CAAI,EAAI,EAAA,KAAA,CAAM,SAAa,IAAA,cAAA,CAAe,KAAM,CAAA,WAAA,IAAe,cAAe,CAAA,KAAA,CAAM,SAAS,CAAA;AAExH,MAAA,MAAM,UAAU,YAAc,EAAA,EAAA;AAC9B,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,IAAI,CAAC,WAAY,CAAA,SAAA,CAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAG,EAAA;AAC7C,UAAY,WAAA,CAAA,SAAA,CAAU,MAAM,GAAI,CAAA,OAAA,sBAAa,GAAI,CAAA,CAAC,EAAE,CAAC,CAAC,CAAA;AAAA,SAEnD,MAAA;AACH,UAAA,WAAA,CAAY,UAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAA,EAAG,IAAI,EAAE,CAAA;AAAA;AAClD;AACF,KACD,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,KACrC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Combobox/ComboboxItem.js

@@ -2,11 +2,9 @@ import { defineComponent, computed, onMounted, onUnmounted, openBlock, createBlo
 import { u as useId } from '../shared/useId.js';
 import { u as usePrimitiveElement } from '../Primitive/usePrimitiveElement.js';
 import { _ as _sfc_main$1 } from '../Listbox/ListboxItem.js';
-import { c as createContext } from '../shared/createContext.js';
 import { i as injectComboboxRootContext } from './ComboboxRoot.js';
 import { i as injectComboboxGroupContext } from './ComboboxGroup.js';
 
-const [injectComboboxItemContext, provideComboboxItemContext] = createContext("ComboboxItem");
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ComboboxItem",
   props: {
@@ -81,5 +79,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 
-export { _sfc_main as _, injectComboboxItemContext as i };
+export { _sfc_main as _ };
 //# sourceMappingURL=ComboboxItem.js.map

package/dist/Combobox/ComboboxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxItem.js","sources":["../../src/Combobox/ComboboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { type Ref, computed, onMounted, onUnmounted } from 'vue'\nimport type { ListboxItemEmits, ListboxItemProps } from '@/Listbox'\nimport { createContext, useId } from '@/shared'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\nimport type { AcceptableValue } from '@/shared/types'\nimport { injectComboboxGroupContext } from './ComboboxGroup.vue'\nimport { usePrimitiveElement } from '@/Primitive'\n\ninterface ComboboxItemContext {\n  isSelected: Ref<boolean>\n}\n\nexport const [injectComboboxItemContext, provideComboboxItemContext]\n  = createContext<ComboboxItemContext>('ComboboxItem')\n\nexport type ComboboxItemEmits<T = AcceptableValue> = ListboxItemEmits<T>\nexport interface ComboboxItemProps<T = AcceptableValue> extends ListboxItemProps<T> {\n  /**\n   * A string representation of the item contents.\n   *\n   * If the children are not plain text, then the `textValue` prop must also be set to a plain text representation, which will be used for autocomplete in the ComboBox.\n   */\n  textValue?: string\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { ListboxItem } from '@/Listbox'\n\nconst props = defineProps<ComboboxItemProps<T>>()\nconst emits = defineEmits<ComboboxItemEmits<T>>()\n\nconst id = useId(undefined, 'reka-combobox-item')\nconst rootContext = injectComboboxRootContext()\nconst groupContext = injectComboboxGroupContext(null)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nif (props.value === '') {\n  throw new Error(\n    'A <ComboboxItem /> must have a value prop that is not an empty string. This is because the Combobox value can be set to an empty string to clear the selection and show the placeholder.',\n  )\n}\n\nconst isRender = computed(() => {\n  if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterState.search) {\n    return true\n  }\n  else {\n    const filteredCurrentItem = rootContext.filterState.filtered.items.get(id)\n    // If the filtered items is undefined means not in the all times map yet\n    // Do the first render to add into the map\n    if (filteredCurrentItem === undefined) {\n      return true\n    }\n\n    // Check with filter\n    return filteredCurrentItem > 0\n  }\n})\n\nonMounted(() => {\n  // textValue to perform filter\n  rootContext.allItems.value.set(id, props.textValue || currentElement.value.textContent || currentElement.value.innerText)\n\n  const groupId = groupContext?.id\n  if (groupId) {\n    if (!rootContext.allGroups.value.has(groupId)) {\n      rootContext.allGroups.value.set(groupId, new Set([id]))\n    }\n    else {\n      rootContext.allGroups.value.get(groupId)?.add(id)\n    }\n  }\n})\nonUnmounted(() => {\n  rootContext.allItems.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxItem\n    v-if=\"isRender\"\n    v-bind=\"props\"\n    :id=\"id\"\n    ref=\"primitiveElement\"\n    @select=\"(event) => {\n      emits('select', event as any)\n      if (event.defaultPrevented)\n        return\n\n      if (!rootContext.multiple.value) {\n        event.preventDefault()\n        rootContext.onOpenChange(false)\n        rootContext.modelValue.value = props.value\n      }\n    }\"\n  >\n    <slot>{{ value }}</slot>\n  </ListboxItem>\n</template>\n"],"names":[],"mappings":";;;;;;;;AAaO,MAAM,CAAC,yBAAA,EAA2B,0BAA0B,CAAA,GAC/D,cAAmC,cAAc;;;;;;;;;;;;AAgBrD,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,EAAA,GAAK,KAAM,CAAA,SAAA,EAAW,oBAAoB,CAAA;AAChD,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAC9C,IAAM,MAAA,YAAA,GAAe,2BAA2B,IAAI,CAAA;AAEpD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AAEjE,IAAI,IAAA,KAAA,CAAM,UAAU,EAAI,EAAA;AACtB,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAGF,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAI,IAAA,WAAA,CAAY,UAAU,KAAS,IAAA,WAAA,CAAY,aAAa,KAAS,IAAA,CAAC,WAAY,CAAA,WAAA,CAAY,MAAQ,EAAA;AACpG,QAAO,OAAA,IAAA;AAAA,OAEJ,MAAA;AACH,QAAA,MAAM,sBAAsB,WAAY,CAAA,WAAA,CAAY,QAAS,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAGzE,QAAA,IAAI,wBAAwB,SAAW,EAAA;AACrC,UAAO,OAAA,IAAA;AAAA;AAIT,QAAA,OAAO,mBAAsB,GAAA,CAAA;AAAA;AAC/B,KACD,CAAA;AAED,IAAA,SAAA,CAAU,MAAM;AAEd,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,GAAA,CAAI,EAAI,EAAA,KAAA,CAAM,SAAa,IAAA,cAAA,CAAe,KAAM,CAAA,WAAA,IAAe,cAAe,CAAA,KAAA,CAAM,SAAS,CAAA;AAExH,MAAA,MAAM,UAAU,YAAc,EAAA,EAAA;AAC9B,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,IAAI,CAAC,WAAY,CAAA,SAAA,CAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAG,EAAA;AAC7C,UAAY,WAAA,CAAA,SAAA,CAAU,MAAM,GAAI,CAAA,OAAA,sBAAa,GAAI,CAAA,CAAC,EAAE,CAAC,CAAC,CAAA;AAAA,SAEnD,MAAA;AACH,UAAA,WAAA,CAAY,UAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAA,EAAG,IAAI,EAAE,CAAA;AAAA;AAClD;AACF,KACD,CAAA;AACD,IAAA,WAAA,CAAY,MAAM;AAChB,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,KACrC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ComboboxItem.js","sources":["../../src/Combobox/ComboboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport type { ListboxItemEmits, ListboxItemProps } from '@/Listbox'\nimport { useId } from '@/shared'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\nimport type { AcceptableValue } from '@/shared/types'\nimport { injectComboboxGroupContext } from './ComboboxGroup.vue'\nimport { usePrimitiveElement } from '@/Primitive'\n\nexport { injectListboxItemContext as injectComboboxItemContext } from '@/Listbox'\n\nexport type ComboboxItemEmits<T = AcceptableValue> = ListboxItemEmits<T>\nexport interface ComboboxItemProps<T = AcceptableValue> extends ListboxItemProps<T> {\n  /**\n   * A string representation of the item contents.\n   *\n   * If the children are not plain text, then the `textValue` prop must also be set to a plain text representation, which will be used for autocomplete in the ComboBox.\n   */\n  textValue?: string\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { ListboxItem } from '@/Listbox'\n\nconst props = defineProps<ComboboxItemProps<T>>()\nconst emits = defineEmits<ComboboxItemEmits<T>>()\n\nconst id = useId(undefined, 'reka-combobox-item')\nconst rootContext = injectComboboxRootContext()\nconst groupContext = injectComboboxGroupContext(null)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nif (props.value === '') {\n  throw new Error(\n    'A <ComboboxItem /> must have a value prop that is not an empty string. This is because the Combobox value can be set to an empty string to clear the selection and show the placeholder.',\n  )\n}\n\nconst isRender = computed(() => {\n  if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterState.search) {\n    return true\n  }\n  else {\n    const filteredCurrentItem = rootContext.filterState.filtered.items.get(id)\n    // If the filtered items is undefined means not in the all times map yet\n    // Do the first render to add into the map\n    if (filteredCurrentItem === undefined) {\n      return true\n    }\n\n    // Check with filter\n    return filteredCurrentItem > 0\n  }\n})\n\nonMounted(() => {\n  // textValue to perform filter\n  rootContext.allItems.value.set(id, props.textValue || currentElement.value.textContent || currentElement.value.innerText)\n\n  const groupId = groupContext?.id\n  if (groupId) {\n    if (!rootContext.allGroups.value.has(groupId)) {\n      rootContext.allGroups.value.set(groupId, new Set([id]))\n    }\n    else {\n      rootContext.allGroups.value.get(groupId)?.add(id)\n    }\n  }\n})\nonUnmounted(() => {\n  rootContext.allItems.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxItem\n    v-if=\"isRender\"\n    v-bind=\"props\"\n    :id=\"id\"\n    ref=\"primitiveElement\"\n    @select=\"(event) => {\n      emits('select', event as any)\n      if (event.defaultPrevented)\n        return\n\n      if (!rootContext.multiple.value) {\n        event.preventDefault()\n        rootContext.onOpenChange(false)\n        rootContext.modelValue.value = props.value\n      }\n    }\"\n  >\n    <slot>{{ value }}</slot>\n  </ListboxItem>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,EAAA,GAAK,KAAM,CAAA,SAAA,EAAW,oBAAoB,CAAA;AAChD,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAC9C,IAAM,MAAA,YAAA,GAAe,2BAA2B,IAAI,CAAA;AAEpD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AAEjE,IAAI,IAAA,KAAA,CAAM,UAAU,EAAI,EAAA;AACtB,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAGF,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAI,IAAA,WAAA,CAAY,UAAU,KAAS,IAAA,WAAA,CAAY,aAAa,KAAS,IAAA,CAAC,WAAY,CAAA,WAAA,CAAY,MAAQ,EAAA;AACpG,QAAO,OAAA,IAAA;AAAA,OAEJ,MAAA;AACH,QAAA,MAAM,sBAAsB,WAAY,CAAA,WAAA,CAAY,QAAS,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAGzE,QAAA,IAAI,wBAAwB,SAAW,EAAA;AACrC,UAAO,OAAA,IAAA;AAAA;AAIT,QAAA,OAAO,mBAAsB,GAAA,CAAA;AAAA;AAC/B,KACD,CAAA;AAED,IAAA,SAAA,CAAU,MAAM;AAEd,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,GAAA,CAAI,EAAI,EAAA,KAAA,CAAM,SAAa,IAAA,cAAA,CAAe,KAAM,CAAA,WAAA,IAAe,cAAe,CAAA,KAAA,CAAM,SAAS,CAAA;AAExH,MAAA,MAAM,UAAU,YAAc,EAAA,EAAA;AAC9B,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,IAAI,CAAC,WAAY,CAAA,SAAA,CAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAG,EAAA;AAC7C,UAAY,WAAA,CAAA,SAAA,CAAU,MAAM,GAAI,CAAA,OAAA,sBAAa,GAAI,CAAA,CAAC,EAAE,CAAC,CAAC,CAAA;AAAA,SAEnD,MAAA;AACH,UAAA,WAAA,CAAY,UAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAA,EAAG,IAAI,EAAE,CAAA;AAAA;AAClD;AACF,KACD,CAAA;AACD,IAAA,WAAA,CAAY,MAAM;AAChB,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,KACrC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/HoverCard/HoverCardRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCardRoot.cjs","sources":["../../src/HoverCard/HoverCardRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { createContext, useForwardExpose } from '@/shared'\n\nexport interface HoverCardRootProps {\n  /** The open state of the hover card when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: false\n  /** The controlled open state of the hover card. Can be binded as `v-model:open`. */\n  open?: boolean\n  /** The duration from when the mouse enters the trigger until the hover card opens. */\n  openDelay?: number\n  /** The duration from when the mouse leaves the trigger or content until the hover card closes. */\n  closeDelay?: number\n}\nexport type HoverCardRootEmits = {\n  /** Event handler called when the open state of the hover card changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface HoverCardRootContext {\n  open: Ref<boolean>\n  onOpenChange: (open: boolean) => void\n  onOpen: () => void\n  onClose: () => void\n  onDismiss: () => void\n  hasSelectionRef: Ref<boolean>\n  isPointerDownOnContentRef: Ref<boolean>\n  isPointerInTransitRef: Ref<boolean>\n  triggerElement: Ref<HTMLElement | undefined>\n}\n\nexport const [injectHoverCardRootContext, provideHoverCardRootContext]\n  = createContext<HoverCardRootContext>('HoverCardRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { PopperRoot } from '@/Popper'\n\nconst props = withDefaults(defineProps<HoverCardRootProps>(), {\n  defaultOpen: false,\n  open: undefined,\n  openDelay: 700,\n  closeDelay: 300,\n})\nconst emit = defineEmits<HoverCardRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst { openDelay, closeDelay } = toRefs(props)\n\nuseForwardExpose()\nconst open = useVModel(props, 'open', emit, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst openTimerRef = ref(0)\nconst closeTimerRef = ref(0)\nconst hasSelectionRef = ref(false)\nconst isPointerDownOnContentRef = ref(false)\nconst isPointerInTransitRef = ref(false)\nconst triggerElement = ref<HTMLElement>()\n\nfunction handleOpen() {\n  clearTimeout(closeTimerRef.value)\n  openTimerRef.value = window.setTimeout(() => open.value = true, openDelay.value)\n}\n\nfunction handleClose() {\n  clearTimeout(openTimerRef.value)\n  if (!hasSelectionRef.value && !isPointerDownOnContentRef.value)\n    closeTimerRef.value = window.setTimeout(() => open.value = false, closeDelay.value)\n}\n\nfunction handleDismiss() {\n  open.value = false\n}\n\nprovideHoverCardRootContext({\n  open,\n  onOpenChange(value) {\n    open.value = value\n  },\n  onOpen: handleOpen,\n  onClose: handleClose,\n  onDismiss: handleDismiss,\n  hasSelectionRef,\n  isPointerDownOnContentRef,\n  isPointerInTransitRef,\n  triggerElement,\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <slot :open=\"open\" />\n  </PopperRoot>\n</template>\n"],"names":["createContext","toRefs","useForwardExpose","useVModel","ref"],"mappings":";;;;;;;;AA+BO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjEA,mCAAoC,eAAe;;;;;;;;;;;AAQvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAA,MAAM,EAAE,SAAA,EAAW,UAAW,EAAA,GAAIC,WAAO,KAAK,CAAA;AAE9C,IAAiBC,wCAAA,EAAA;AACjB,IAAA,MAAM,IAAO,GAAAC,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAM,MAAA,YAAA,GAAeC,QAAI,CAAC,CAAA;AAC1B,IAAM,MAAA,aAAA,GAAgBA,QAAI,CAAC,CAAA;AAC3B,IAAM,MAAA,eAAA,GAAkBA,QAAI,KAAK,CAAA;AACjC,IAAM,MAAA,yBAAA,GAA4BA,QAAI,KAAK,CAAA;AAC3C,IAAM,MAAA,qBAAA,GAAwBA,QAAI,KAAK,CAAA;AACvC,IAAA,MAAM,iBAAiBA,OAAiB,EAAA;AAExC,IAAA,SAAS,UAAa,GAAA;AACpB,MAAA,YAAA,CAAa,cAAc,KAAK,CAAA;AAChC,MAAa,YAAA,CAAA,KAAA,GAAQ,OAAO,UAAW,CAAA,MAAM,KAAK,KAAQ,GAAA,IAAA,EAAM,UAAU,KAAK,CAAA;AAAA;AAGjF,IAAA,SAAS,WAAc,GAAA;AACrB,MAAA,YAAA,CAAa,aAAa,KAAK,CAAA;AAC/B,MAAA,IAAI,CAAC,eAAA,CAAgB,KAAS,IAAA,CAAC,yBAA0B,CAAA,KAAA;AACvD,QAAc,aAAA,CAAA,KAAA,GAAQ,OAAO,UAAW,CAAA,MAAM,KAAK,KAAQ,GAAA,KAAA,EAAO,WAAW,KAAK,CAAA;AAAA;AAGtF,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA;AAGf,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,aAAa,KAAO,EAAA;AAClB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,SAAW,EAAA,aAAA;AAAA,MACX,eAAA;AAAA,MACA,yBAAA;AAAA,MACA,qBAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"HoverCardRoot.cjs","sources":["../../src/HoverCard/HoverCardRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { createContext, useForwardExpose } from '@/shared'\n\nexport interface HoverCardRootProps {\n  /** The open state of the hover card when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /** The controlled open state of the hover card. Can be binded as `v-model:open`. */\n  open?: boolean\n  /** The duration from when the mouse enters the trigger until the hover card opens. */\n  openDelay?: number\n  /** The duration from when the mouse leaves the trigger or content until the hover card closes. */\n  closeDelay?: number\n}\nexport type HoverCardRootEmits = {\n  /** Event handler called when the open state of the hover card changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface HoverCardRootContext {\n  open: Ref<boolean>\n  onOpenChange: (open: boolean) => void\n  onOpen: () => void\n  onClose: () => void\n  onDismiss: () => void\n  hasSelectionRef: Ref<boolean>\n  isPointerDownOnContentRef: Ref<boolean>\n  isPointerInTransitRef: Ref<boolean>\n  triggerElement: Ref<HTMLElement | undefined>\n}\n\nexport const [injectHoverCardRootContext, provideHoverCardRootContext]\n  = createContext<HoverCardRootContext>('HoverCardRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { PopperRoot } from '@/Popper'\n\nconst props = withDefaults(defineProps<HoverCardRootProps>(), {\n  defaultOpen: false,\n  open: undefined,\n  openDelay: 700,\n  closeDelay: 300,\n})\nconst emit = defineEmits<HoverCardRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst { openDelay, closeDelay } = toRefs(props)\n\nuseForwardExpose()\nconst open = useVModel(props, 'open', emit, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst openTimerRef = ref(0)\nconst closeTimerRef = ref(0)\nconst hasSelectionRef = ref(false)\nconst isPointerDownOnContentRef = ref(false)\nconst isPointerInTransitRef = ref(false)\nconst triggerElement = ref<HTMLElement>()\n\nfunction handleOpen() {\n  clearTimeout(closeTimerRef.value)\n  openTimerRef.value = window.setTimeout(() => open.value = true, openDelay.value)\n}\n\nfunction handleClose() {\n  clearTimeout(openTimerRef.value)\n  if (!hasSelectionRef.value && !isPointerDownOnContentRef.value)\n    closeTimerRef.value = window.setTimeout(() => open.value = false, closeDelay.value)\n}\n\nfunction handleDismiss() {\n  open.value = false\n}\n\nprovideHoverCardRootContext({\n  open,\n  onOpenChange(value) {\n    open.value = value\n  },\n  onOpen: handleOpen,\n  onClose: handleClose,\n  onDismiss: handleDismiss,\n  hasSelectionRef,\n  isPointerDownOnContentRef,\n  isPointerInTransitRef,\n  triggerElement,\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <slot :open=\"open\" />\n  </PopperRoot>\n</template>\n"],"names":["createContext","toRefs","useForwardExpose","useVModel","ref"],"mappings":";;;;;;;;AA+BO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjEA,mCAAoC,eAAe;;;;;;;;;;;AAQvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAA,MAAM,EAAE,SAAA,EAAW,UAAW,EAAA,GAAIC,WAAO,KAAK,CAAA;AAE9C,IAAiBC,wCAAA,EAAA;AACjB,IAAA,MAAM,IAAO,GAAAC,cAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAM,MAAA,YAAA,GAAeC,QAAI,CAAC,CAAA;AAC1B,IAAM,MAAA,aAAA,GAAgBA,QAAI,CAAC,CAAA;AAC3B,IAAM,MAAA,eAAA,GAAkBA,QAAI,KAAK,CAAA;AACjC,IAAM,MAAA,yBAAA,GAA4BA,QAAI,KAAK,CAAA;AAC3C,IAAM,MAAA,qBAAA,GAAwBA,QAAI,KAAK,CAAA;AACvC,IAAA,MAAM,iBAAiBA,OAAiB,EAAA;AAExC,IAAA,SAAS,UAAa,GAAA;AACpB,MAAA,YAAA,CAAa,cAAc,KAAK,CAAA;AAChC,MAAa,YAAA,CAAA,KAAA,GAAQ,OAAO,UAAW,CAAA,MAAM,KAAK,KAAQ,GAAA,IAAA,EAAM,UAAU,KAAK,CAAA;AAAA;AAGjF,IAAA,SAAS,WAAc,GAAA;AACrB,MAAA,YAAA,CAAa,aAAa,KAAK,CAAA;AAC/B,MAAA,IAAI,CAAC,eAAA,CAAgB,KAAS,IAAA,CAAC,yBAA0B,CAAA,KAAA;AACvD,QAAc,aAAA,CAAA,KAAA,GAAQ,OAAO,UAAW,CAAA,MAAM,KAAK,KAAQ,GAAA,KAAA,EAAO,WAAW,KAAK,CAAA;AAAA;AAGtF,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA;AAGf,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,aAAa,KAAO,EAAA;AAClB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,SAAW,EAAA,aAAA;AAAA,MACX,eAAA;AAAA,MACA,yBAAA;AAAA,MACA,qBAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;;"}

package/dist/HoverCard/HoverCardRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCardRoot.js","sources":["../../src/HoverCard/HoverCardRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { createContext, useForwardExpose } from '@/shared'\n\nexport interface HoverCardRootProps {\n  /** The open state of the hover card when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: false\n  /** The controlled open state of the hover card. Can be binded as `v-model:open`. */\n  open?: boolean\n  /** The duration from when the mouse enters the trigger until the hover card opens. */\n  openDelay?: number\n  /** The duration from when the mouse leaves the trigger or content until the hover card closes. */\n  closeDelay?: number\n}\nexport type HoverCardRootEmits = {\n  /** Event handler called when the open state of the hover card changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface HoverCardRootContext {\n  open: Ref<boolean>\n  onOpenChange: (open: boolean) => void\n  onOpen: () => void\n  onClose: () => void\n  onDismiss: () => void\n  hasSelectionRef: Ref<boolean>\n  isPointerDownOnContentRef: Ref<boolean>\n  isPointerInTransitRef: Ref<boolean>\n  triggerElement: Ref<HTMLElement | undefined>\n}\n\nexport const [injectHoverCardRootContext, provideHoverCardRootContext]\n  = createContext<HoverCardRootContext>('HoverCardRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { PopperRoot } from '@/Popper'\n\nconst props = withDefaults(defineProps<HoverCardRootProps>(), {\n  defaultOpen: false,\n  open: undefined,\n  openDelay: 700,\n  closeDelay: 300,\n})\nconst emit = defineEmits<HoverCardRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst { openDelay, closeDelay } = toRefs(props)\n\nuseForwardExpose()\nconst open = useVModel(props, 'open', emit, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst openTimerRef = ref(0)\nconst closeTimerRef = ref(0)\nconst hasSelectionRef = ref(false)\nconst isPointerDownOnContentRef = ref(false)\nconst isPointerInTransitRef = ref(false)\nconst triggerElement = ref<HTMLElement>()\n\nfunction handleOpen() {\n  clearTimeout(closeTimerRef.value)\n  openTimerRef.value = window.setTimeout(() => open.value = true, openDelay.value)\n}\n\nfunction handleClose() {\n  clearTimeout(openTimerRef.value)\n  if (!hasSelectionRef.value && !isPointerDownOnContentRef.value)\n    closeTimerRef.value = window.setTimeout(() => open.value = false, closeDelay.value)\n}\n\nfunction handleDismiss() {\n  open.value = false\n}\n\nprovideHoverCardRootContext({\n  open,\n  onOpenChange(value) {\n    open.value = value\n  },\n  onOpen: handleOpen,\n  onClose: handleClose,\n  onDismiss: handleDismiss,\n  hasSelectionRef,\n  isPointerDownOnContentRef,\n  isPointerInTransitRef,\n  triggerElement,\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <slot :open=\"open\" />\n  </PopperRoot>\n</template>\n"],"names":[],"mappings":";;;;;;AA+BO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjE,cAAoC,eAAe;;;;;;;;;;;AAQvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAA,MAAM,EAAE,SAAA,EAAW,UAAW,EAAA,GAAI,OAAO,KAAK,CAAA;AAE9C,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,IAAI,CAAC,CAAA;AAC1B,IAAM,MAAA,aAAA,GAAgB,IAAI,CAAC,CAAA;AAC3B,IAAM,MAAA,eAAA,GAAkB,IAAI,KAAK,CAAA;AACjC,IAAM,MAAA,yBAAA,GAA4B,IAAI,KAAK,CAAA;AAC3C,IAAM,MAAA,qBAAA,GAAwB,IAAI,KAAK,CAAA;AACvC,IAAA,MAAM,iBAAiB,GAAiB,EAAA;AAExC,IAAA,SAAS,UAAa,GAAA;AACpB,MAAA,YAAA,CAAa,cAAc,KAAK,CAAA;AAChC,MAAa,YAAA,CAAA,KAAA,GAAQ,OAAO,UAAW,CAAA,MAAM,KAAK,KAAQ,GAAA,IAAA,EAAM,UAAU,KAAK,CAAA;AAAA;AAGjF,IAAA,SAAS,WAAc,GAAA;AACrB,MAAA,YAAA,CAAa,aAAa,KAAK,CAAA;AAC/B,MAAA,IAAI,CAAC,eAAA,CAAgB,KAAS,IAAA,CAAC,yBAA0B,CAAA,KAAA;AACvD,QAAc,aAAA,CAAA,KAAA,GAAQ,OAAO,UAAW,CAAA,MAAM,KAAK,KAAQ,GAAA,KAAA,EAAO,WAAW,KAAK,CAAA;AAAA;AAGtF,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA;AAGf,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,aAAa,KAAO,EAAA;AAClB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,SAAW,EAAA,aAAA;AAAA,MACX,eAAA;AAAA,MACA,yBAAA;AAAA,MACA,qBAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"HoverCardRoot.js","sources":["../../src/HoverCard/HoverCardRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { createContext, useForwardExpose } from '@/shared'\n\nexport interface HoverCardRootProps {\n  /** The open state of the hover card when it is initially rendered. Use when you do not need to control its open state. */\n  defaultOpen?: boolean\n  /** The controlled open state of the hover card. Can be binded as `v-model:open`. */\n  open?: boolean\n  /** The duration from when the mouse enters the trigger until the hover card opens. */\n  openDelay?: number\n  /** The duration from when the mouse leaves the trigger or content until the hover card closes. */\n  closeDelay?: number\n}\nexport type HoverCardRootEmits = {\n  /** Event handler called when the open state of the hover card changes. */\n  'update:open': [value: boolean]\n}\n\nexport interface HoverCardRootContext {\n  open: Ref<boolean>\n  onOpenChange: (open: boolean) => void\n  onOpen: () => void\n  onClose: () => void\n  onDismiss: () => void\n  hasSelectionRef: Ref<boolean>\n  isPointerDownOnContentRef: Ref<boolean>\n  isPointerInTransitRef: Ref<boolean>\n  triggerElement: Ref<HTMLElement | undefined>\n}\n\nexport const [injectHoverCardRootContext, provideHoverCardRootContext]\n  = createContext<HoverCardRootContext>('HoverCardRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, toRefs } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { PopperRoot } from '@/Popper'\n\nconst props = withDefaults(defineProps<HoverCardRootProps>(), {\n  defaultOpen: false,\n  open: undefined,\n  openDelay: 700,\n  closeDelay: 300,\n})\nconst emit = defineEmits<HoverCardRootEmits>()\n\ndefineSlots<{\n  default: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst { openDelay, closeDelay } = toRefs(props)\n\nuseForwardExpose()\nconst open = useVModel(props, 'open', emit, {\n  defaultValue: props.defaultOpen,\n  passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst openTimerRef = ref(0)\nconst closeTimerRef = ref(0)\nconst hasSelectionRef = ref(false)\nconst isPointerDownOnContentRef = ref(false)\nconst isPointerInTransitRef = ref(false)\nconst triggerElement = ref<HTMLElement>()\n\nfunction handleOpen() {\n  clearTimeout(closeTimerRef.value)\n  openTimerRef.value = window.setTimeout(() => open.value = true, openDelay.value)\n}\n\nfunction handleClose() {\n  clearTimeout(openTimerRef.value)\n  if (!hasSelectionRef.value && !isPointerDownOnContentRef.value)\n    closeTimerRef.value = window.setTimeout(() => open.value = false, closeDelay.value)\n}\n\nfunction handleDismiss() {\n  open.value = false\n}\n\nprovideHoverCardRootContext({\n  open,\n  onOpenChange(value) {\n    open.value = value\n  },\n  onOpen: handleOpen,\n  onClose: handleClose,\n  onDismiss: handleDismiss,\n  hasSelectionRef,\n  isPointerDownOnContentRef,\n  isPointerInTransitRef,\n  triggerElement,\n})\n</script>\n\n<template>\n  <PopperRoot>\n    <slot :open=\"open\" />\n  </PopperRoot>\n</template>\n"],"names":[],"mappings":";;;;;;AA+BO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjE,cAAoC,eAAe;;;;;;;;;;;AAQvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,IAAO,GAAA,MAAA;AASb,IAAA,MAAM,EAAE,SAAA,EAAW,UAAW,EAAA,GAAI,OAAO,KAAK,CAAA;AAE9C,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,KAAO,EAAA,MAAA,EAAQ,IAAM,EAAA;AAAA,MAC1C,cAAc,KAAM,CAAA,WAAA;AAAA,MACpB,OAAA,EAAU,MAAM,IAAS,KAAA;AAAA,KAC1B,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,IAAI,CAAC,CAAA;AAC1B,IAAM,MAAA,aAAA,GAAgB,IAAI,CAAC,CAAA;AAC3B,IAAM,MAAA,eAAA,GAAkB,IAAI,KAAK,CAAA;AACjC,IAAM,MAAA,yBAAA,GAA4B,IAAI,KAAK,CAAA;AAC3C,IAAM,MAAA,qBAAA,GAAwB,IAAI,KAAK,CAAA;AACvC,IAAA,MAAM,iBAAiB,GAAiB,EAAA;AAExC,IAAA,SAAS,UAAa,GAAA;AACpB,MAAA,YAAA,CAAa,cAAc,KAAK,CAAA;AAChC,MAAa,YAAA,CAAA,KAAA,GAAQ,OAAO,UAAW,CAAA,MAAM,KAAK,KAAQ,GAAA,IAAA,EAAM,UAAU,KAAK,CAAA;AAAA;AAGjF,IAAA,SAAS,WAAc,GAAA;AACrB,MAAA,YAAA,CAAa,aAAa,KAAK,CAAA;AAC/B,MAAA,IAAI,CAAC,eAAA,CAAgB,KAAS,IAAA,CAAC,yBAA0B,CAAA,KAAA;AACvD,QAAc,aAAA,CAAA,KAAA,GAAQ,OAAO,UAAW,CAAA,MAAM,KAAK,KAAQ,GAAA,KAAA,EAAO,WAAW,KAAK,CAAA;AAAA;AAGtF,IAAA,SAAS,aAAgB,GAAA;AACvB,MAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA;AAGf,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,aAAa,KAAO,EAAA;AAClB,QAAA,IAAA,CAAK,KAAQ,GAAA,KAAA;AAAA,OACf;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,SAAW,EAAA,aAAA;AAAA,MACX,eAAA;AAAA,MACA,yBAAA;AAAA,MACA,qBAAA;AAAA,MACA;AAAA,KACD,CAAA;;;;;;;;;;;;;;"}

package/dist/NavigationMenu/NavigationMenuSub.cjs

@@ -29,12 +29,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const { forwardRef, currentElement } = shared_useForwardExpose.useForwardExpose();
     const indicatorTrack = vue.ref();
     const viewport = vue.ref();
-    const { CollectionSlot } = Collection_Collection.useCollection({ key: "NavigationMenu", isProvider: true });
+    const activeTrigger = vue.ref();
+    const { getItems, CollectionSlot } = Collection_Collection.useCollection({ key: "NavigationMenu", isProvider: true });
+    vue.watchEffect(() => {
+      if (!modelValue.value)
+        return;
+      const items = getItems().map((i) => i.ref);
+      activeTrigger.value = items.find(
+        (item) => item.id.includes(modelValue.value)
+      );
+    });
     NavigationMenu_NavigationMenuRoot.provideNavigationMenuContext({
       ...menuContext,
       isRootMenu: false,
       modelValue,
       previousValue,
+      activeTrigger,
       orientation: props.orientation,
       rootNavigationMenu: currentElement,
       indicatorTrack,

package/dist/NavigationMenu/NavigationMenuSub.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuSub.cjs","sources":["../../src/NavigationMenu/NavigationMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Orientation } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useCollection } from '@/Collection'\n\nexport type NavigationMenuSubEmits = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: string]\n}\n\nexport interface NavigationMenuSubProps extends PrimitiveProps {\n  /** The controlled value of the sub menu item to activate. Can be used as `v-model`. */\n  modelValue?: string\n  /**\n   * The value of the menu item that should be active when initially rendered.\n   *\n   * Use when you do not need to control the value state.\n   */\n  defaultValue?: string\n  /** The orientation of the menu. */\n  orientation?: Orientation\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { injectNavigationMenuContext, provideNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<NavigationMenuSubProps>(), {\n  orientation: 'horizontal',\n})\nconst emits = defineEmits<NavigationMenuSubEmits>()\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: props.defaultValue ?? '',\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<string>\nconst previousValue = ref('')\n\nconst menuContext = injectNavigationMenuContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst indicatorTrack = ref<HTMLElement>()\nconst viewport = ref<HTMLElement>()\n\nconst { CollectionSlot } = useCollection({ key: 'NavigationMenu', isProvider: true })\n\nprovideNavigationMenuContext({\n  ...menuContext,\n  isRootMenu: false,\n  modelValue,\n  previousValue,\n  orientation: props.orientation,\n  rootNavigationMenu: currentElement,\n  indicatorTrack,\n  onIndicatorTrackChange: (val) => {\n    indicatorTrack.value = val\n  },\n  viewport,\n  onViewportChange: (val) => {\n    viewport.value = val\n  },\n\n  onTriggerEnter: (val) => {\n    modelValue.value = val\n  },\n  onTriggerLeave: () => {\n    // do nothing for submenu\n  },\n  onContentEnter: () => {\n    // do nothing for submenu\n  },\n  onContentLeave: () => {\n    // do nothing for submenu\n  },\n  onItemSelect: (val) => {\n    modelValue.value = val\n  },\n  onItemDismiss: () => {\n    modelValue.value = ''\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :ref=\"forwardRef\"\n      :data-orientation=\"orientation\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      data-reka-navigation-menu\n    >\n      <slot :model-value=\"modelValue\" />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":["useVModel","ref","injectNavigationMenuContext","useForwardExpose","useCollection","provideNavigationMenuContext"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCA,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,YAAA,EAAc,MAAM,YAAgB,IAAA,EAAA;AAAA,MACpC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AACD,IAAM,MAAA,aAAA,GAAgBC,QAAI,EAAE,CAAA;AAE5B,IAAA,MAAM,cAAcC,6DAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAA,MAAM,iBAAiBF,OAAiB,EAAA;AACxC,IAAA,MAAM,WAAWA,OAAiB,EAAA;AAElC,IAAM,MAAA,EAAE,gBAAmB,GAAAG,mCAAA,CAAc,EAAE,GAAK,EAAA,gBAAA,EAAkB,UAAY,EAAA,IAAA,EAAM,CAAA;AAEpF,IAA6BC,8DAAA,CAAA;AAAA,MAC3B,GAAG,WAAA;AAAA,MACH,UAAY,EAAA,KAAA;AAAA,MACZ,UAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,kBAAoB,EAAA,cAAA;AAAA,MACpB,cAAA;AAAA,MACA,sBAAA,EAAwB,CAAC,GAAQ,KAAA;AAC/B,QAAA,cAAA,CAAe,KAAQ,GAAA,GAAA;AAAA,OACzB;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,GAAQ,KAAA;AACzB,QAAA,QAAA,CAAS,KAAQ,GAAA,GAAA;AAAA,OACnB;AAAA,MAEA,cAAA,EAAgB,CAAC,GAAQ,KAAA;AACvB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,YAAA,EAAc,CAAC,GAAQ,KAAA;AACrB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,eAAe,MAAM;AACnB,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AACrB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NavigationMenuSub.cjs","sources":["../../src/NavigationMenu/NavigationMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Orientation } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useCollection } from '@/Collection'\n\nexport type NavigationMenuSubEmits = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: string]\n}\n\nexport interface NavigationMenuSubProps extends PrimitiveProps {\n  /** The controlled value of the sub menu item to activate. Can be used as `v-model`. */\n  modelValue?: string\n  /**\n   * The value of the menu item that should be active when initially rendered.\n   *\n   * Use when you do not need to control the value state.\n   */\n  defaultValue?: string\n  /** The orientation of the menu. */\n  orientation?: Orientation\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watchEffect } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { injectNavigationMenuContext, provideNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<NavigationMenuSubProps>(), {\n  orientation: 'horizontal',\n})\nconst emits = defineEmits<NavigationMenuSubEmits>()\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: props.defaultValue ?? '',\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<string>\nconst previousValue = ref('')\n\nconst menuContext = injectNavigationMenuContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst indicatorTrack = ref<HTMLElement>()\nconst viewport = ref<HTMLElement>()\nconst activeTrigger = ref<HTMLElement>()\n\nconst { getItems, CollectionSlot } = useCollection({ key: 'NavigationMenu', isProvider: true })\n\nwatchEffect(() => {\n  if (!modelValue.value)\n    return\n\n  const items = getItems().map(i => i.ref)\n  activeTrigger.value = items.find(item =>\n    item.id.includes(modelValue.value),\n  )\n})\n\nprovideNavigationMenuContext({\n  ...menuContext,\n  isRootMenu: false,\n  modelValue,\n  previousValue,\n  activeTrigger,\n  orientation: props.orientation,\n  rootNavigationMenu: currentElement,\n  indicatorTrack,\n  onIndicatorTrackChange: (val) => {\n    indicatorTrack.value = val\n  },\n  viewport,\n  onViewportChange: (val) => {\n    viewport.value = val\n  },\n\n  onTriggerEnter: (val) => {\n    modelValue.value = val\n  },\n  onTriggerLeave: () => {\n    // do nothing for submenu\n  },\n  onContentEnter: () => {\n    // do nothing for submenu\n  },\n  onContentLeave: () => {\n    // do nothing for submenu\n  },\n  onItemSelect: (val) => {\n    modelValue.value = val\n  },\n  onItemDismiss: () => {\n    modelValue.value = ''\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :ref=\"forwardRef\"\n      :data-orientation=\"orientation\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      data-reka-navigation-menu\n    >\n      <slot :model-value=\"modelValue\" />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":["useVModel","ref","injectNavigationMenuContext","useForwardExpose","useCollection","watchEffect","provideNavigationMenuContext"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkCA,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,YAAA,EAAc,MAAM,YAAgB,IAAA,EAAA;AAAA,MACpC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AACD,IAAM,MAAA,aAAA,GAAgBC,QAAI,EAAE,CAAA;AAE5B,IAAA,MAAM,cAAcC,6DAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAA,MAAM,iBAAiBF,OAAiB,EAAA;AACxC,IAAA,MAAM,WAAWA,OAAiB,EAAA;AAClC,IAAA,MAAM,gBAAgBA,OAAiB,EAAA;AAEvC,IAAM,MAAA,EAAE,QAAU,EAAA,cAAA,EAAmB,GAAAG,mCAAA,CAAc,EAAE,GAAK,EAAA,gBAAA,EAAkB,UAAY,EAAA,IAAA,EAAM,CAAA;AAE9F,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAA,IAAI,CAAC,UAAW,CAAA,KAAA;AACd,QAAA;AAEF,MAAA,MAAM,QAAQ,QAAS,EAAA,CAAE,GAAI,CAAA,CAAA,CAAA,KAAK,EAAE,GAAG,CAAA;AACvC,MAAA,aAAA,CAAc,QAAQ,KAAM,CAAA,IAAA;AAAA,QAAK,CAC/B,IAAA,KAAA,IAAA,CAAK,EAAG,CAAA,QAAA,CAAS,WAAW,KAAK;AAAA,OACnC;AAAA,KACD,CAAA;AAED,IAA6BC,8DAAA,CAAA;AAAA,MAC3B,GAAG,WAAA;AAAA,MACH,UAAY,EAAA,KAAA;AAAA,MACZ,UAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,kBAAoB,EAAA,cAAA;AAAA,MACpB,cAAA;AAAA,MACA,sBAAA,EAAwB,CAAC,GAAQ,KAAA;AAC/B,QAAA,cAAA,CAAe,KAAQ,GAAA,GAAA;AAAA,OACzB;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,GAAQ,KAAA;AACzB,QAAA,QAAA,CAAS,KAAQ,GAAA,GAAA;AAAA,OACnB;AAAA,MAEA,cAAA,EAAgB,CAAC,GAAQ,KAAA;AACvB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,YAAA,EAAc,CAAC,GAAQ,KAAA;AACrB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,eAAe,MAAM;AACnB,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AACrB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NavigationMenu/NavigationMenuSub.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createVNode, renderSlot } from 'vue';
+import { defineComponent, ref, watchEffect, openBlock, createBlock, unref, withCtx, createVNode, renderSlot } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { u as useCollection } from '../Collection/Collection.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
@@ -27,12 +27,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { forwardRef, currentElement } = useForwardExpose();
     const indicatorTrack = ref();
     const viewport = ref();
-    const { CollectionSlot } = useCollection({ key: "NavigationMenu", isProvider: true });
+    const activeTrigger = ref();
+    const { getItems, CollectionSlot } = useCollection({ key: "NavigationMenu", isProvider: true });
+    watchEffect(() => {
+      if (!modelValue.value)
+        return;
+      const items = getItems().map((i) => i.ref);
+      activeTrigger.value = items.find(
+        (item) => item.id.includes(modelValue.value)
+      );
+    });
     provideNavigationMenuContext({
       ...menuContext,
       isRootMenu: false,
       modelValue,
       previousValue,
+      activeTrigger,
       orientation: props.orientation,
       rootNavigationMenu: currentElement,
       indicatorTrack,

package/dist/NavigationMenu/NavigationMenuSub.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuSub.js","sources":["../../src/NavigationMenu/NavigationMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Orientation } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useCollection } from '@/Collection'\n\nexport type NavigationMenuSubEmits = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: string]\n}\n\nexport interface NavigationMenuSubProps extends PrimitiveProps {\n  /** The controlled value of the sub menu item to activate. Can be used as `v-model`. */\n  modelValue?: string\n  /**\n   * The value of the menu item that should be active when initially rendered.\n   *\n   * Use when you do not need to control the value state.\n   */\n  defaultValue?: string\n  /** The orientation of the menu. */\n  orientation?: Orientation\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { injectNavigationMenuContext, provideNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<NavigationMenuSubProps>(), {\n  orientation: 'horizontal',\n})\nconst emits = defineEmits<NavigationMenuSubEmits>()\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: props.defaultValue ?? '',\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<string>\nconst previousValue = ref('')\n\nconst menuContext = injectNavigationMenuContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst indicatorTrack = ref<HTMLElement>()\nconst viewport = ref<HTMLElement>()\n\nconst { CollectionSlot } = useCollection({ key: 'NavigationMenu', isProvider: true })\n\nprovideNavigationMenuContext({\n  ...menuContext,\n  isRootMenu: false,\n  modelValue,\n  previousValue,\n  orientation: props.orientation,\n  rootNavigationMenu: currentElement,\n  indicatorTrack,\n  onIndicatorTrackChange: (val) => {\n    indicatorTrack.value = val\n  },\n  viewport,\n  onViewportChange: (val) => {\n    viewport.value = val\n  },\n\n  onTriggerEnter: (val) => {\n    modelValue.value = val\n  },\n  onTriggerLeave: () => {\n    // do nothing for submenu\n  },\n  onContentEnter: () => {\n    // do nothing for submenu\n  },\n  onContentLeave: () => {\n    // do nothing for submenu\n  },\n  onItemSelect: (val) => {\n    modelValue.value = val\n  },\n  onItemDismiss: () => {\n    modelValue.value = ''\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :ref=\"forwardRef\"\n      :data-orientation=\"orientation\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      data-reka-navigation-menu\n    >\n      <slot :model-value=\"modelValue\" />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkCA,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,YAAA,EAAc,MAAM,YAAgB,IAAA,EAAA;AAAA,MACpC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AACD,IAAM,MAAA,aAAA,GAAgB,IAAI,EAAE,CAAA;AAE5B,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,MAAM,iBAAiB,GAAiB,EAAA;AACxC,IAAA,MAAM,WAAW,GAAiB,EAAA;AAElC,IAAM,MAAA,EAAE,gBAAmB,GAAA,aAAA,CAAc,EAAE,GAAK,EAAA,gBAAA,EAAkB,UAAY,EAAA,IAAA,EAAM,CAAA;AAEpF,IAA6B,4BAAA,CAAA;AAAA,MAC3B,GAAG,WAAA;AAAA,MACH,UAAY,EAAA,KAAA;AAAA,MACZ,UAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,kBAAoB,EAAA,cAAA;AAAA,MACpB,cAAA;AAAA,MACA,sBAAA,EAAwB,CAAC,GAAQ,KAAA;AAC/B,QAAA,cAAA,CAAe,KAAQ,GAAA,GAAA;AAAA,OACzB;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,GAAQ,KAAA;AACzB,QAAA,QAAA,CAAS,KAAQ,GAAA,GAAA;AAAA,OACnB;AAAA,MAEA,cAAA,EAAgB,CAAC,GAAQ,KAAA;AACvB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,YAAA,EAAc,CAAC,GAAQ,KAAA;AACrB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,eAAe,MAAM;AACnB,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AACrB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NavigationMenuSub.js","sources":["../../src/NavigationMenu/NavigationMenuSub.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Orientation } from './utils'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useCollection } from '@/Collection'\n\nexport type NavigationMenuSubEmits = {\n  /** Event handler called when the value changes. */\n  'update:modelValue': [value: string]\n}\n\nexport interface NavigationMenuSubProps extends PrimitiveProps {\n  /** The controlled value of the sub menu item to activate. Can be used as `v-model`. */\n  modelValue?: string\n  /**\n   * The value of the menu item that should be active when initially rendered.\n   *\n   * Use when you do not need to control the value state.\n   */\n  defaultValue?: string\n  /** The orientation of the menu. */\n  orientation?: Orientation\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watchEffect } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { injectNavigationMenuContext, provideNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = withDefaults(defineProps<NavigationMenuSubProps>(), {\n  orientation: 'horizontal',\n})\nconst emits = defineEmits<NavigationMenuSubEmits>()\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: props.defaultValue ?? '',\n  passive: (props.modelValue === undefined) as false,\n}) as Ref<string>\nconst previousValue = ref('')\n\nconst menuContext = injectNavigationMenuContext()\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst indicatorTrack = ref<HTMLElement>()\nconst viewport = ref<HTMLElement>()\nconst activeTrigger = ref<HTMLElement>()\n\nconst { getItems, CollectionSlot } = useCollection({ key: 'NavigationMenu', isProvider: true })\n\nwatchEffect(() => {\n  if (!modelValue.value)\n    return\n\n  const items = getItems().map(i => i.ref)\n  activeTrigger.value = items.find(item =>\n    item.id.includes(modelValue.value),\n  )\n})\n\nprovideNavigationMenuContext({\n  ...menuContext,\n  isRootMenu: false,\n  modelValue,\n  previousValue,\n  activeTrigger,\n  orientation: props.orientation,\n  rootNavigationMenu: currentElement,\n  indicatorTrack,\n  onIndicatorTrackChange: (val) => {\n    indicatorTrack.value = val\n  },\n  viewport,\n  onViewportChange: (val) => {\n    viewport.value = val\n  },\n\n  onTriggerEnter: (val) => {\n    modelValue.value = val\n  },\n  onTriggerLeave: () => {\n    // do nothing for submenu\n  },\n  onContentEnter: () => {\n    // do nothing for submenu\n  },\n  onContentLeave: () => {\n    // do nothing for submenu\n  },\n  onItemSelect: (val) => {\n    modelValue.value = val\n  },\n  onItemDismiss: () => {\n    modelValue.value = ''\n  },\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <Primitive\n      :ref=\"forwardRef\"\n      :data-orientation=\"orientation\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n      data-reka-navigation-menu\n    >\n      <slot :model-value=\"modelValue\" />\n    </Primitive>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkCA,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,YAAA,EAAc,MAAM,YAAgB,IAAA,EAAA;AAAA,MACpC,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AACD,IAAM,MAAA,aAAA,GAAgB,IAAI,EAAE,CAAA;AAE5B,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,MAAM,iBAAiB,GAAiB,EAAA;AACxC,IAAA,MAAM,WAAW,GAAiB,EAAA;AAClC,IAAA,MAAM,gBAAgB,GAAiB,EAAA;AAEvC,IAAM,MAAA,EAAE,QAAU,EAAA,cAAA,EAAmB,GAAA,aAAA,CAAc,EAAE,GAAK,EAAA,gBAAA,EAAkB,UAAY,EAAA,IAAA,EAAM,CAAA;AAE9F,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,IAAI,CAAC,UAAW,CAAA,KAAA;AACd,QAAA;AAEF,MAAA,MAAM,QAAQ,QAAS,EAAA,CAAE,GAAI,CAAA,CAAA,CAAA,KAAK,EAAE,GAAG,CAAA;AACvC,MAAA,aAAA,CAAc,QAAQ,KAAM,CAAA,IAAA;AAAA,QAAK,CAC/B,IAAA,KAAA,IAAA,CAAK,EAAG,CAAA,QAAA,CAAS,WAAW,KAAK;AAAA,OACnC;AAAA,KACD,CAAA;AAED,IAA6B,4BAAA,CAAA;AAAA,MAC3B,GAAG,WAAA;AAAA,MACH,UAAY,EAAA,KAAA;AAAA,MACZ,UAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,kBAAoB,EAAA,cAAA;AAAA,MACpB,cAAA;AAAA,MACA,sBAAA,EAAwB,CAAC,GAAQ,KAAA;AAC/B,QAAA,cAAA,CAAe,KAAQ,GAAA,GAAA;AAAA,OACzB;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,GAAQ,KAAA;AACzB,QAAA,QAAA,CAAS,KAAQ,GAAA,GAAA;AAAA,OACnB;AAAA,MAEA,cAAA,EAAgB,CAAC,GAAQ,KAAA;AACvB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,gBAAgB,MAAM;AAAA,OAEtB;AAAA,MACA,YAAA,EAAc,CAAC,GAAQ,KAAA;AACrB,QAAA,UAAA,CAAW,KAAQ,GAAA,GAAA;AAAA,OACrB;AAAA,MACA,eAAe,MAAM;AACnB,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AACrB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/NavigationMenu/NavigationMenuViewport.cjs

@@ -35,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (!currentElement.value)
         return;
       requestAnimationFrame(() => {
-        const el = currentElement.value?.querySelector("[data-state=open]")?.children?.[0];
+        const el = currentElement.value?.querySelector("[data-state=open]");
         content.value = el;
       });
     }, { immediate: true, flush: "post" });

package/dist/NavigationMenu/NavigationMenuViewport.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuViewport.cjs","sources":["../../src/NavigationMenu/NavigationMenuViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuViewportProps extends PrimitiveProps {\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   * Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.\n   * @defaultValue 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, whenMouse } from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { Presence } from '@/Presence'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuViewportProps>(), {\n  align: 'center',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst menuContext = injectNavigationMenuContext()\nconst { activeTrigger, rootNavigationMenu, modelValue } = menuContext\n\nconst size = ref<{ width: number, height: number }>()\nconst position = ref<{ left: number, top: number }>()\n\nconst open = computed(() => !!menuContext.modelValue.value)\n\nwatch(currentElement, () => {\n  menuContext.onViewportChange(currentElement.value)\n})\n\nconst content = ref<HTMLElement>()\n\nwatch([modelValue, open], () => {\n  if (!currentElement.value)\n    return\n\n  requestAnimationFrame(() => {\n    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]')?.children?.[0] as HTMLElement | undefined\n    content.value = el\n  })\n}, { immediate: true, flush: 'post' })\n\nfunction updatePosition() {\n  if (content.value && activeTrigger.value && rootNavigationMenu.value) {\n    const bodyWidth = document.documentElement.offsetWidth\n    const bodyHeight = document.documentElement.offsetHeight\n    const rootRect = rootNavigationMenu.value.getBoundingClientRect()\n    const rect = activeTrigger.value.getBoundingClientRect()\n    const { offsetWidth, offsetHeight } = content.value\n\n    // Find the beginning of the position of the menu item\n    const startPositionLeft = rect.left - rootRect.left\n    const startPositionTop = rect.top - rootRect.top\n\n    // Aligning to specified alignment\n    let posLeft = null\n    let posTop = null\n    switch (props.align) {\n      case 'start':\n        posLeft = startPositionLeft\n        posTop = startPositionTop\n        break\n      case 'end':\n        posLeft = startPositionLeft - offsetWidth + rect.width\n        posTop = startPositionTop - offsetHeight + rect.height\n        break\n      default:\n        // center\n        posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2\n        posTop = startPositionTop - offsetHeight / 2 + rect.height / 2\n    }\n\n    const screenOffset = 10\n\n    // Do not let go of the left side of the screen\n    if (posLeft + rootRect.left < screenOffset) {\n      posLeft = screenOffset - rootRect.left\n    }\n\n    // Now also check the right side of the screen\n    const rightOffset = posLeft + rootRect.left + offsetWidth\n    if (rightOffset > bodyWidth - screenOffset) {\n      posLeft -= rightOffset - bodyWidth + screenOffset\n\n      // Recheck the left side of the screen\n      if (posLeft < screenOffset - rootRect.left) {\n        // Just set the menu to the full width of the screen\n        posLeft = screenOffset - rootRect.left\n      }\n    }\n\n    // Do not let go of the top side of the screen\n    if (posTop + rootRect.top < screenOffset) {\n      posTop = screenOffset - rootRect.top\n    }\n\n    // Now also check the bottom side of the screen\n    const bottomOffset = posTop + rootRect.top + offsetHeight\n    if (bottomOffset > bodyHeight - screenOffset) {\n      posTop -= bottomOffset - bodyHeight + screenOffset\n\n      // Recheck the top side of the screen\n      if (posTop < screenOffset - rootRect.top) {\n        // Just set the menu to the full height of the screen\n        posTop = screenOffset - rootRect.top\n      }\n    }\n\n    // Possible blurring font with decimal values\n    posLeft = Math.round(posLeft)\n    posTop = Math.round(posTop)\n\n    position.value = {\n      left: posLeft,\n      top: posTop,\n    }\n  }\n}\n\nuseResizeObserver(content, () => {\n  if (content.value) {\n    size.value = {\n      width: content.value.offsetWidth,\n      height: content.value.offsetHeight,\n    }\n    updatePosition()\n  }\n})\n\nuseResizeObserver([globalThis.document?.body, rootNavigationMenu], () => {\n  updatePosition()\n})\n</script>\n\n<template>\n  <Presence\n    v-slot=\"{ present }\"\n    :present=\"forceMount || open\"\n    :force-mount=\"!menuContext.unmountOnHide.value\"\n    @after-leave=\"() => {\n      size = undefined\n      position = undefined\n    }\"\n  >\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-state=\"getOpenState(open)\"\n      :data-orientation=\"menuContext.orientation\"\n      :style=\"{\n        // Prevent interaction when animating out\n        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,\n        ['--reka-navigation-menu-viewport-width']: size ? `${size?.width}px` : undefined,\n        ['--reka-navigation-menu-viewport-height']: size ? `${size?.height}px` : undefined,\n        ['--reka-navigation-menu-viewport-left']: position ? `${position?.left}px` : undefined,\n        ['--reka-navigation-menu-viewport-top']: position ? `${position?.top}px` : undefined,\n      }\"\n      :hidden=\"!present\"\n      @pointerenter=\"menuContext.onContentEnter(menuContext.modelValue.value)\"\n      @pointerleave=\"whenMouse(() => menuContext.onContentLeave())($event)\"\n    >\n      <slot />\n    </Primitive>\n  </Presence>\n</template>\n"],"names":["useForwardExpose","injectNavigationMenuContext","ref","computed","watch","useResizeObserver"],"mappings":"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"}
+{"version":3,"file":"NavigationMenuViewport.cjs","sources":["../../src/NavigationMenu/NavigationMenuViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuViewportProps extends PrimitiveProps {\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   * Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.\n   * @defaultValue 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, whenMouse } from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { Presence } from '@/Presence'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuViewportProps>(), {\n  align: 'center',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst menuContext = injectNavigationMenuContext()\nconst { activeTrigger, rootNavigationMenu, modelValue } = menuContext\n\nconst size = ref<{ width: number, height: number }>()\nconst position = ref<{ left: number, top: number }>()\n\nconst open = computed(() => !!menuContext.modelValue.value)\n\nwatch(currentElement, () => {\n  menuContext.onViewportChange(currentElement.value)\n})\n\nconst content = ref<HTMLElement>()\n\nwatch([modelValue, open], () => {\n  if (!currentElement.value)\n    return\n\n  requestAnimationFrame(() => {\n    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]') as HTMLElement | undefined\n    content.value = el\n  })\n}, { immediate: true, flush: 'post' })\n\nfunction updatePosition() {\n  if (content.value && activeTrigger.value && rootNavigationMenu.value) {\n    const bodyWidth = document.documentElement.offsetWidth\n    const bodyHeight = document.documentElement.offsetHeight\n    const rootRect = rootNavigationMenu.value.getBoundingClientRect()\n    const rect = activeTrigger.value.getBoundingClientRect()\n    const { offsetWidth, offsetHeight } = content.value\n\n    // Find the beginning of the position of the menu item\n    const startPositionLeft = rect.left - rootRect.left\n    const startPositionTop = rect.top - rootRect.top\n\n    // Aligning to specified alignment\n    let posLeft = null\n    let posTop = null\n    switch (props.align) {\n      case 'start':\n        posLeft = startPositionLeft\n        posTop = startPositionTop\n        break\n      case 'end':\n        posLeft = startPositionLeft - offsetWidth + rect.width\n        posTop = startPositionTop - offsetHeight + rect.height\n        break\n      default:\n        // center\n        posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2\n        posTop = startPositionTop - offsetHeight / 2 + rect.height / 2\n    }\n\n    const screenOffset = 10\n\n    // Do not let go of the left side of the screen\n    if (posLeft + rootRect.left < screenOffset) {\n      posLeft = screenOffset - rootRect.left\n    }\n\n    // Now also check the right side of the screen\n    const rightOffset = posLeft + rootRect.left + offsetWidth\n    if (rightOffset > bodyWidth - screenOffset) {\n      posLeft -= rightOffset - bodyWidth + screenOffset\n\n      // Recheck the left side of the screen\n      if (posLeft < screenOffset - rootRect.left) {\n        // Just set the menu to the full width of the screen\n        posLeft = screenOffset - rootRect.left\n      }\n    }\n\n    // Do not let go of the top side of the screen\n    if (posTop + rootRect.top < screenOffset) {\n      posTop = screenOffset - rootRect.top\n    }\n\n    // Now also check the bottom side of the screen\n    const bottomOffset = posTop + rootRect.top + offsetHeight\n    if (bottomOffset > bodyHeight - screenOffset) {\n      posTop -= bottomOffset - bodyHeight + screenOffset\n\n      // Recheck the top side of the screen\n      if (posTop < screenOffset - rootRect.top) {\n        // Just set the menu to the full height of the screen\n        posTop = screenOffset - rootRect.top\n      }\n    }\n\n    // Possible blurring font with decimal values\n    posLeft = Math.round(posLeft)\n    posTop = Math.round(posTop)\n\n    position.value = {\n      left: posLeft,\n      top: posTop,\n    }\n  }\n}\n\nuseResizeObserver(content, () => {\n  if (content.value) {\n    size.value = {\n      width: content.value.offsetWidth,\n      height: content.value.offsetHeight,\n    }\n    updatePosition()\n  }\n})\n\nuseResizeObserver([globalThis.document?.body, rootNavigationMenu], () => {\n  updatePosition()\n})\n</script>\n\n<template>\n  <Presence\n    v-slot=\"{ present }\"\n    :present=\"forceMount || open\"\n    :force-mount=\"!menuContext.unmountOnHide.value\"\n    @after-leave=\"() => {\n      size = undefined\n      position = undefined\n    }\"\n  >\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-state=\"getOpenState(open)\"\n      :data-orientation=\"menuContext.orientation\"\n      :style=\"{\n        // Prevent interaction when animating out\n        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,\n        ['--reka-navigation-menu-viewport-width']: size ? `${size?.width}px` : undefined,\n        ['--reka-navigation-menu-viewport-height']: size ? `${size?.height}px` : undefined,\n        ['--reka-navigation-menu-viewport-left']: position ? `${position?.left}px` : undefined,\n        ['--reka-navigation-menu-viewport-top']: position ? `${position?.top}px` : undefined,\n      }\"\n      :hidden=\"!present\"\n      @pointerenter=\"menuContext.onContentEnter(menuContext.modelValue.value)\"\n      @pointerleave=\"whenMouse(() => menuContext.onContentLeave())($event)\"\n    >\n      <slot />\n    </Primitive>\n  </Presence>\n</template>\n"],"names":["useForwardExpose","injectNavigationMenuContext","ref","computed","watch","useResizeObserver"],"mappings":"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"}

package/dist/NavigationMenu/NavigationMenuViewport.js

@@ -33,7 +33,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!currentElement.value)
         return;
       requestAnimationFrame(() => {
-        const el = currentElement.value?.querySelector("[data-state=open]")?.children?.[0];
+        const el = currentElement.value?.querySelector("[data-state=open]");
         content.value = el;
       });
     }, { immediate: true, flush: "post" });

package/dist/NavigationMenu/NavigationMenuViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuViewport.js","sources":["../../src/NavigationMenu/NavigationMenuViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuViewportProps extends PrimitiveProps {\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   * Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.\n   * @defaultValue 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, whenMouse } from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { Presence } from '@/Presence'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuViewportProps>(), {\n  align: 'center',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst menuContext = injectNavigationMenuContext()\nconst { activeTrigger, rootNavigationMenu, modelValue } = menuContext\n\nconst size = ref<{ width: number, height: number }>()\nconst position = ref<{ left: number, top: number }>()\n\nconst open = computed(() => !!menuContext.modelValue.value)\n\nwatch(currentElement, () => {\n  menuContext.onViewportChange(currentElement.value)\n})\n\nconst content = ref<HTMLElement>()\n\nwatch([modelValue, open], () => {\n  if (!currentElement.value)\n    return\n\n  requestAnimationFrame(() => {\n    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]')?.children?.[0] as HTMLElement | undefined\n    content.value = el\n  })\n}, { immediate: true, flush: 'post' })\n\nfunction updatePosition() {\n  if (content.value && activeTrigger.value && rootNavigationMenu.value) {\n    const bodyWidth = document.documentElement.offsetWidth\n    const bodyHeight = document.documentElement.offsetHeight\n    const rootRect = rootNavigationMenu.value.getBoundingClientRect()\n    const rect = activeTrigger.value.getBoundingClientRect()\n    const { offsetWidth, offsetHeight } = content.value\n\n    // Find the beginning of the position of the menu item\n    const startPositionLeft = rect.left - rootRect.left\n    const startPositionTop = rect.top - rootRect.top\n\n    // Aligning to specified alignment\n    let posLeft = null\n    let posTop = null\n    switch (props.align) {\n      case 'start':\n        posLeft = startPositionLeft\n        posTop = startPositionTop\n        break\n      case 'end':\n        posLeft = startPositionLeft - offsetWidth + rect.width\n        posTop = startPositionTop - offsetHeight + rect.height\n        break\n      default:\n        // center\n        posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2\n        posTop = startPositionTop - offsetHeight / 2 + rect.height / 2\n    }\n\n    const screenOffset = 10\n\n    // Do not let go of the left side of the screen\n    if (posLeft + rootRect.left < screenOffset) {\n      posLeft = screenOffset - rootRect.left\n    }\n\n    // Now also check the right side of the screen\n    const rightOffset = posLeft + rootRect.left + offsetWidth\n    if (rightOffset > bodyWidth - screenOffset) {\n      posLeft -= rightOffset - bodyWidth + screenOffset\n\n      // Recheck the left side of the screen\n      if (posLeft < screenOffset - rootRect.left) {\n        // Just set the menu to the full width of the screen\n        posLeft = screenOffset - rootRect.left\n      }\n    }\n\n    // Do not let go of the top side of the screen\n    if (posTop + rootRect.top < screenOffset) {\n      posTop = screenOffset - rootRect.top\n    }\n\n    // Now also check the bottom side of the screen\n    const bottomOffset = posTop + rootRect.top + offsetHeight\n    if (bottomOffset > bodyHeight - screenOffset) {\n      posTop -= bottomOffset - bodyHeight + screenOffset\n\n      // Recheck the top side of the screen\n      if (posTop < screenOffset - rootRect.top) {\n        // Just set the menu to the full height of the screen\n        posTop = screenOffset - rootRect.top\n      }\n    }\n\n    // Possible blurring font with decimal values\n    posLeft = Math.round(posLeft)\n    posTop = Math.round(posTop)\n\n    position.value = {\n      left: posLeft,\n      top: posTop,\n    }\n  }\n}\n\nuseResizeObserver(content, () => {\n  if (content.value) {\n    size.value = {\n      width: content.value.offsetWidth,\n      height: content.value.offsetHeight,\n    }\n    updatePosition()\n  }\n})\n\nuseResizeObserver([globalThis.document?.body, rootNavigationMenu], () => {\n  updatePosition()\n})\n</script>\n\n<template>\n  <Presence\n    v-slot=\"{ present }\"\n    :present=\"forceMount || open\"\n    :force-mount=\"!menuContext.unmountOnHide.value\"\n    @after-leave=\"() => {\n      size = undefined\n      position = undefined\n    }\"\n  >\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-state=\"getOpenState(open)\"\n      :data-orientation=\"menuContext.orientation\"\n      :style=\"{\n        // Prevent interaction when animating out\n        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,\n        ['--reka-navigation-menu-viewport-width']: size ? `${size?.width}px` : undefined,\n        ['--reka-navigation-menu-viewport-height']: size ? `${size?.height}px` : undefined,\n        ['--reka-navigation-menu-viewport-left']: position ? `${position?.left}px` : undefined,\n        ['--reka-navigation-menu-viewport-top']: position ? `${position?.top}px` : undefined,\n      }\"\n      :hidden=\"!present\"\n      @pointerenter=\"menuContext.onContentEnter(menuContext.modelValue.value)\"\n      @pointerleave=\"whenMouse(() => menuContext.onContentLeave())($event)\"\n    >\n      <slot />\n    </Primitive>\n  </Presence>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAgCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,aAAA,EAAe,kBAAoB,EAAA,UAAA,EAAe,GAAA,WAAA;AAE1D,IAAA,MAAM,OAAO,GAAuC,EAAA;AACpD,IAAA,MAAM,WAAW,GAAmC,EAAA;AAEpD,IAAA,MAAM,OAAO,QAAS,CAAA,MAAM,CAAC,CAAC,WAAA,CAAY,WAAW,KAAK,CAAA;AAE1D,IAAA,KAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAY,WAAA,CAAA,gBAAA,CAAiB,eAAe,KAAK,CAAA;AAAA,KAClD,CAAA;AAED,IAAA,MAAM,UAAU,GAAiB,EAAA;AAEjC,IAAA,KAAA,CAAM,CAAC,UAAA,EAAY,IAAI,CAAA,EAAG,MAAM;AAC9B,MAAA,IAAI,CAAC,cAAe,CAAA,KAAA;AAClB,QAAA;AAEF,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,MAAM,KAAM,cAAe,CAAA,KAAA,EAAuB,cAAc,mBAAmB,CAAA,EAAG,WAAW,CAAC,CAAA;AAClG,QAAA,OAAA,CAAQ,KAAQ,GAAA,EAAA;AAAA,OACjB,CAAA;AAAA,OACA,EAAE,SAAA,EAAW,IAAM,EAAA,KAAA,EAAO,QAAQ,CAAA;AAErC,IAAA,SAAS,cAAiB,GAAA;AACxB,MAAA,IAAI,OAAQ,CAAA,KAAA,IAAS,aAAc,CAAA,KAAA,IAAS,mBAAmB,KAAO,EAAA;AACpE,QAAM,MAAA,SAAA,GAAY,SAAS,eAAgB,CAAA,WAAA;AAC3C,QAAM,MAAA,UAAA,GAAa,SAAS,eAAgB,CAAA,YAAA;AAC5C,QAAM,MAAA,QAAA,GAAW,kBAAmB,CAAA,KAAA,CAAM,qBAAsB,EAAA;AAChE,QAAM,MAAA,IAAA,GAAO,aAAc,CAAA,KAAA,CAAM,qBAAsB,EAAA;AACvD,QAAA,MAAM,EAAE,WAAA,EAAa,YAAa,EAAA,GAAI,OAAQ,CAAA,KAAA;AAG9C,QAAM,MAAA,iBAAA,GAAoB,IAAK,CAAA,IAAA,GAAO,QAAS,CAAA,IAAA;AAC/C,QAAM,MAAA,gBAAA,GAAmB,IAAK,CAAA,GAAA,GAAM,QAAS,CAAA,GAAA;AAG7C,QAAA,IAAI,OAAU,GAAA,IAAA;AACd,QAAA,IAAI,MAAS,GAAA,IAAA;AACb,QAAA,QAAQ,MAAM,KAAO;AAAA,UACnB,KAAK,OAAA;AACH,YAAU,OAAA,GAAA,iBAAA;AACV,YAAS,MAAA,GAAA,gBAAA;AACT,YAAA;AAAA,UACF,KAAK,KAAA;AACH,YAAU,OAAA,GAAA,iBAAA,GAAoB,cAAc,IAAK,CAAA,KAAA;AACjD,YAAS,MAAA,GAAA,gBAAA,GAAmB,eAAe,IAAK,CAAA,MAAA;AAChD,YAAA;AAAA,UACF;AAEE,YAAA,OAAA,GAAU,iBAAoB,GAAA,WAAA,GAAc,CAAI,GAAA,IAAA,CAAK,KAAQ,GAAA,CAAA;AAC7D,YAAA,MAAA,GAAS,gBAAmB,GAAA,YAAA,GAAe,CAAI,GAAA,IAAA,CAAK,MAAS,GAAA,CAAA;AAAA;AAGjE,QAAA,MAAM,YAAe,GAAA,EAAA;AAGrB,QAAI,IAAA,OAAA,GAAU,QAAS,CAAA,IAAA,GAAO,YAAc,EAAA;AAC1C,UAAA,OAAA,GAAU,eAAe,QAAS,CAAA,IAAA;AAAA;AAIpC,QAAM,MAAA,WAAA,GAAc,OAAU,GAAA,QAAA,CAAS,IAAO,GAAA,WAAA;AAC9C,QAAI,IAAA,WAAA,GAAc,YAAY,YAAc,EAAA;AAC1C,UAAA,OAAA,IAAW,cAAc,SAAY,GAAA,YAAA;AAGrC,UAAI,IAAA,OAAA,GAAU,YAAe,GAAA,QAAA,CAAS,IAAM,EAAA;AAE1C,YAAA,OAAA,GAAU,eAAe,QAAS,CAAA,IAAA;AAAA;AACpC;AAIF,QAAI,IAAA,MAAA,GAAS,QAAS,CAAA,GAAA,GAAM,YAAc,EAAA;AACxC,UAAA,MAAA,GAAS,eAAe,QAAS,CAAA,GAAA;AAAA;AAInC,QAAM,MAAA,YAAA,GAAe,MAAS,GAAA,QAAA,CAAS,GAAM,GAAA,YAAA;AAC7C,QAAI,IAAA,YAAA,GAAe,aAAa,YAAc,EAAA;AAC5C,UAAA,MAAA,IAAU,eAAe,UAAa,GAAA,YAAA;AAGtC,UAAI,IAAA,MAAA,GAAS,YAAe,GAAA,QAAA,CAAS,GAAK,EAAA;AAExC,YAAA,MAAA,GAAS,eAAe,QAAS,CAAA,GAAA;AAAA;AACnC;AAIF,QAAU,OAAA,GAAA,IAAA,CAAK,MAAM,OAAO,CAAA;AAC5B,QAAS,MAAA,GAAA,IAAA,CAAK,MAAM,MAAM,CAAA;AAE1B,QAAA,QAAA,CAAS,KAAQ,GAAA;AAAA,UACf,IAAM,EAAA,OAAA;AAAA,UACN,GAAK,EAAA;AAAA,SACP;AAAA;AACF;AAGF,IAAA,iBAAA,CAAkB,SAAS,MAAM;AAC/B,MAAA,IAAI,QAAQ,KAAO,EAAA;AACjB,QAAA,IAAA,CAAK,KAAQ,GAAA;AAAA,UACX,KAAA,EAAO,QAAQ,KAAM,CAAA,WAAA;AAAA,UACrB,MAAA,EAAQ,QAAQ,KAAM,CAAA;AAAA,SACxB;AACA,QAAe,cAAA,EAAA;AAAA;AACjB,KACD,CAAA;AAED,IAAA,iBAAA,CAAkB,CAAC,UAAW,CAAA,QAAA,EAAU,IAAM,EAAA,kBAAkB,GAAG,MAAM;AACvE,MAAe,cAAA,EAAA;AAAA,KAChB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NavigationMenuViewport.js","sources":["../../src/NavigationMenu/NavigationMenuViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface NavigationMenuViewportProps extends PrimitiveProps {\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   * Placement of the viewport for css variables `(--reka-navigation-menu-viewport-left, --reka-navigation-menu-viewport-top)`.\n   * @defaultValue 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { injectNavigationMenuContext } from './NavigationMenuRoot.vue'\nimport { getOpenState, whenMouse } from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { Presence } from '@/Presence'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<NavigationMenuViewportProps>(), {\n  align: 'center',\n})\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nconst menuContext = injectNavigationMenuContext()\nconst { activeTrigger, rootNavigationMenu, modelValue } = menuContext\n\nconst size = ref<{ width: number, height: number }>()\nconst position = ref<{ left: number, top: number }>()\n\nconst open = computed(() => !!menuContext.modelValue.value)\n\nwatch(currentElement, () => {\n  menuContext.onViewportChange(currentElement.value)\n})\n\nconst content = ref<HTMLElement>()\n\nwatch([modelValue, open], () => {\n  if (!currentElement.value)\n    return\n\n  requestAnimationFrame(() => {\n    const el = (currentElement.value as HTMLElement)?.querySelector('[data-state=open]') as HTMLElement | undefined\n    content.value = el\n  })\n}, { immediate: true, flush: 'post' })\n\nfunction updatePosition() {\n  if (content.value && activeTrigger.value && rootNavigationMenu.value) {\n    const bodyWidth = document.documentElement.offsetWidth\n    const bodyHeight = document.documentElement.offsetHeight\n    const rootRect = rootNavigationMenu.value.getBoundingClientRect()\n    const rect = activeTrigger.value.getBoundingClientRect()\n    const { offsetWidth, offsetHeight } = content.value\n\n    // Find the beginning of the position of the menu item\n    const startPositionLeft = rect.left - rootRect.left\n    const startPositionTop = rect.top - rootRect.top\n\n    // Aligning to specified alignment\n    let posLeft = null\n    let posTop = null\n    switch (props.align) {\n      case 'start':\n        posLeft = startPositionLeft\n        posTop = startPositionTop\n        break\n      case 'end':\n        posLeft = startPositionLeft - offsetWidth + rect.width\n        posTop = startPositionTop - offsetHeight + rect.height\n        break\n      default:\n        // center\n        posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2\n        posTop = startPositionTop - offsetHeight / 2 + rect.height / 2\n    }\n\n    const screenOffset = 10\n\n    // Do not let go of the left side of the screen\n    if (posLeft + rootRect.left < screenOffset) {\n      posLeft = screenOffset - rootRect.left\n    }\n\n    // Now also check the right side of the screen\n    const rightOffset = posLeft + rootRect.left + offsetWidth\n    if (rightOffset > bodyWidth - screenOffset) {\n      posLeft -= rightOffset - bodyWidth + screenOffset\n\n      // Recheck the left side of the screen\n      if (posLeft < screenOffset - rootRect.left) {\n        // Just set the menu to the full width of the screen\n        posLeft = screenOffset - rootRect.left\n      }\n    }\n\n    // Do not let go of the top side of the screen\n    if (posTop + rootRect.top < screenOffset) {\n      posTop = screenOffset - rootRect.top\n    }\n\n    // Now also check the bottom side of the screen\n    const bottomOffset = posTop + rootRect.top + offsetHeight\n    if (bottomOffset > bodyHeight - screenOffset) {\n      posTop -= bottomOffset - bodyHeight + screenOffset\n\n      // Recheck the top side of the screen\n      if (posTop < screenOffset - rootRect.top) {\n        // Just set the menu to the full height of the screen\n        posTop = screenOffset - rootRect.top\n      }\n    }\n\n    // Possible blurring font with decimal values\n    posLeft = Math.round(posLeft)\n    posTop = Math.round(posTop)\n\n    position.value = {\n      left: posLeft,\n      top: posTop,\n    }\n  }\n}\n\nuseResizeObserver(content, () => {\n  if (content.value) {\n    size.value = {\n      width: content.value.offsetWidth,\n      height: content.value.offsetHeight,\n    }\n    updatePosition()\n  }\n})\n\nuseResizeObserver([globalThis.document?.body, rootNavigationMenu], () => {\n  updatePosition()\n})\n</script>\n\n<template>\n  <Presence\n    v-slot=\"{ present }\"\n    :present=\"forceMount || open\"\n    :force-mount=\"!menuContext.unmountOnHide.value\"\n    @after-leave=\"() => {\n      size = undefined\n      position = undefined\n    }\"\n  >\n    <Primitive\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      :data-state=\"getOpenState(open)\"\n      :data-orientation=\"menuContext.orientation\"\n      :style=\"{\n        // Prevent interaction when animating out\n        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,\n        ['--reka-navigation-menu-viewport-width']: size ? `${size?.width}px` : undefined,\n        ['--reka-navigation-menu-viewport-height']: size ? `${size?.height}px` : undefined,\n        ['--reka-navigation-menu-viewport-left']: position ? `${position?.left}px` : undefined,\n        ['--reka-navigation-menu-viewport-top']: position ? `${position?.top}px` : undefined,\n      }\"\n      :hidden=\"!present\"\n      @pointerenter=\"menuContext.onContentEnter(menuContext.modelValue.value)\"\n      @pointerleave=\"whenMouse(() => menuContext.onContentLeave())($event)\"\n    >\n      <slot />\n    </Primitive>\n  </Presence>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAgCA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,EAAE,aAAA,EAAe,kBAAoB,EAAA,UAAA,EAAe,GAAA,WAAA;AAE1D,IAAA,MAAM,OAAO,GAAuC,EAAA;AACpD,IAAA,MAAM,WAAW,GAAmC,EAAA;AAEpD,IAAA,MAAM,OAAO,QAAS,CAAA,MAAM,CAAC,CAAC,WAAA,CAAY,WAAW,KAAK,CAAA;AAE1D,IAAA,KAAA,CAAM,gBAAgB,MAAM;AAC1B,MAAY,WAAA,CAAA,gBAAA,CAAiB,eAAe,KAAK,CAAA;AAAA,KAClD,CAAA;AAED,IAAA,MAAM,UAAU,GAAiB,EAAA;AAEjC,IAAA,KAAA,CAAM,CAAC,UAAA,EAAY,IAAI,CAAA,EAAG,MAAM;AAC9B,MAAA,IAAI,CAAC,cAAe,CAAA,KAAA;AAClB,QAAA;AAEF,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,MAAM,EAAM,GAAA,cAAA,CAAe,KAAuB,EAAA,aAAA,CAAc,mBAAmB,CAAA;AACnF,QAAA,OAAA,CAAQ,KAAQ,GAAA,EAAA;AAAA,OACjB,CAAA;AAAA,OACA,EAAE,SAAA,EAAW,IAAM,EAAA,KAAA,EAAO,QAAQ,CAAA;AAErC,IAAA,SAAS,cAAiB,GAAA;AACxB,MAAA,IAAI,OAAQ,CAAA,KAAA,IAAS,aAAc,CAAA,KAAA,IAAS,mBAAmB,KAAO,EAAA;AACpE,QAAM,MAAA,SAAA,GAAY,SAAS,eAAgB,CAAA,WAAA;AAC3C,QAAM,MAAA,UAAA,GAAa,SAAS,eAAgB,CAAA,YAAA;AAC5C,QAAM,MAAA,QAAA,GAAW,kBAAmB,CAAA,KAAA,CAAM,qBAAsB,EAAA;AAChE,QAAM,MAAA,IAAA,GAAO,aAAc,CAAA,KAAA,CAAM,qBAAsB,EAAA;AACvD,QAAA,MAAM,EAAE,WAAA,EAAa,YAAa,EAAA,GAAI,OAAQ,CAAA,KAAA;AAG9C,QAAM,MAAA,iBAAA,GAAoB,IAAK,CAAA,IAAA,GAAO,QAAS,CAAA,IAAA;AAC/C,QAAM,MAAA,gBAAA,GAAmB,IAAK,CAAA,GAAA,GAAM,QAAS,CAAA,GAAA;AAG7C,QAAA,IAAI,OAAU,GAAA,IAAA;AACd,QAAA,IAAI,MAAS,GAAA,IAAA;AACb,QAAA,QAAQ,MAAM,KAAO;AAAA,UACnB,KAAK,OAAA;AACH,YAAU,OAAA,GAAA,iBAAA;AACV,YAAS,MAAA,GAAA,gBAAA;AACT,YAAA;AAAA,UACF,KAAK,KAAA;AACH,YAAU,OAAA,GAAA,iBAAA,GAAoB,cAAc,IAAK,CAAA,KAAA;AACjD,YAAS,MAAA,GAAA,gBAAA,GAAmB,eAAe,IAAK,CAAA,MAAA;AAChD,YAAA;AAAA,UACF;AAEE,YAAA,OAAA,GAAU,iBAAoB,GAAA,WAAA,GAAc,CAAI,GAAA,IAAA,CAAK,KAAQ,GAAA,CAAA;AAC7D,YAAA,MAAA,GAAS,gBAAmB,GAAA,YAAA,GAAe,CAAI,GAAA,IAAA,CAAK,MAAS,GAAA,CAAA;AAAA;AAGjE,QAAA,MAAM,YAAe,GAAA,EAAA;AAGrB,QAAI,IAAA,OAAA,GAAU,QAAS,CAAA,IAAA,GAAO,YAAc,EAAA;AAC1C,UAAA,OAAA,GAAU,eAAe,QAAS,CAAA,IAAA;AAAA;AAIpC,QAAM,MAAA,WAAA,GAAc,OAAU,GAAA,QAAA,CAAS,IAAO,GAAA,WAAA;AAC9C,QAAI,IAAA,WAAA,GAAc,YAAY,YAAc,EAAA;AAC1C,UAAA,OAAA,IAAW,cAAc,SAAY,GAAA,YAAA;AAGrC,UAAI,IAAA,OAAA,GAAU,YAAe,GAAA,QAAA,CAAS,IAAM,EAAA;AAE1C,YAAA,OAAA,GAAU,eAAe,QAAS,CAAA,IAAA;AAAA;AACpC;AAIF,QAAI,IAAA,MAAA,GAAS,QAAS,CAAA,GAAA,GAAM,YAAc,EAAA;AACxC,UAAA,MAAA,GAAS,eAAe,QAAS,CAAA,GAAA;AAAA;AAInC,QAAM,MAAA,YAAA,GAAe,MAAS,GAAA,QAAA,CAAS,GAAM,GAAA,YAAA;AAC7C,QAAI,IAAA,YAAA,GAAe,aAAa,YAAc,EAAA;AAC5C,UAAA,MAAA,IAAU,eAAe,UAAa,GAAA,YAAA;AAGtC,UAAI,IAAA,MAAA,GAAS,YAAe,GAAA,QAAA,CAAS,GAAK,EAAA;AAExC,YAAA,MAAA,GAAS,eAAe,QAAS,CAAA,GAAA;AAAA;AACnC;AAIF,QAAU,OAAA,GAAA,IAAA,CAAK,MAAM,OAAO,CAAA;AAC5B,QAAS,MAAA,GAAA,IAAA,CAAK,MAAM,MAAM,CAAA;AAE1B,QAAA,QAAA,CAAS,KAAQ,GAAA;AAAA,UACf,IAAM,EAAA,OAAA;AAAA,UACN,GAAK,EAAA;AAAA,SACP;AAAA;AACF;AAGF,IAAA,iBAAA,CAAkB,SAAS,MAAM;AAC/B,MAAA,IAAI,QAAQ,KAAO,EAAA;AACjB,QAAA,IAAA,CAAK,KAAQ,GAAA;AAAA,UACX,KAAA,EAAO,QAAQ,KAAM,CAAA,WAAA;AAAA,UACrB,MAAA,EAAQ,QAAQ,KAAM,CAAA;AAAA,SACxB;AACA,QAAe,cAAA,EAAA;AAAA;AACjB,KACD,CAAA;AAED,IAAA,iBAAA,CAAkB,CAAC,UAAW,CAAA,QAAA,EAAU,IAAM,EAAA,kBAAkB,GAAG,MAAM;AACvE,MAAe,cAAA,EAAA;AAAA,KAChB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/RangeCalendar/RangeCalendarCellTrigger.cjs

@@ -129,7 +129,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         rootContext.prevPage();
         vue.nextTick(() => {
           const newCollectionItems = parentElement ? Array.from(parentElement.querySelectorAll(SELECTOR)) : [];
-          if (!rootContext.pagedNavigation.value) {
+          if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
             const numberOfDays = date_comparators.getDaysInMonth(rootContext.placeholder.value);
             newCollectionItems[numberOfDays - Math.abs(newIndex)].focus();
             return;
@@ -144,9 +144,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         rootContext.nextPage();
         vue.nextTick(() => {
           const newCollectionItems = parentElement ? Array.from(parentElement.querySelectorAll(SELECTOR)) : [];
-          if (!rootContext.pagedNavigation.value) {
-            const numberOfDays = date_comparators.getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 }));
-            newCollectionItems[newCollectionItems.length - numberOfDays + newIndex - allCollectionItems.length].focus();
+          if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
+            const numberOfDays = date_comparators.getDaysInMonth(
+              rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 })
+            );
+            newCollectionItems[newIndex - allCollectionItems.length + (newCollectionItems.length - numberOfDays)].focus();
             return;
           }
           newCollectionItems[newIndex - allCollectionItems.length].focus();