reka-ui 2.0.2 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AlertDialog/AlertDialogRoot.cjs +2 -2
- package/dist/AlertDialog/AlertDialogRoot.cjs.map +1 -1
- package/dist/AlertDialog/AlertDialogRoot.js +3 -3
- package/dist/AlertDialog/AlertDialogRoot.js.map +1 -1
- package/dist/Calendar/CalendarCellTrigger.cjs +7 -5
- package/dist/Calendar/CalendarCellTrigger.cjs.map +1 -1
- package/dist/Calendar/CalendarCellTrigger.js +7 -5
- package/dist/Calendar/CalendarCellTrigger.js.map +1 -1
- package/dist/Combobox/ComboboxItem.cjs +0 -3
- package/dist/Combobox/ComboboxItem.cjs.map +1 -1
- package/dist/Combobox/ComboboxItem.js +1 -3
- package/dist/Combobox/ComboboxItem.js.map +1 -1
- package/dist/Combobox/ComboboxRoot.cjs +9 -1
- package/dist/Combobox/ComboboxRoot.cjs.map +1 -1
- package/dist/Combobox/ComboboxRoot.js +10 -2
- package/dist/Combobox/ComboboxRoot.js.map +1 -1
- package/dist/HoverCard/HoverCardRoot.cjs.map +1 -1
- package/dist/HoverCard/HoverCardRoot.js.map +1 -1
- package/dist/NavigationMenu/NavigationMenuSub.cjs +11 -1
- package/dist/NavigationMenu/NavigationMenuSub.cjs.map +1 -1
- package/dist/NavigationMenu/NavigationMenuSub.js +12 -2
- package/dist/NavigationMenu/NavigationMenuSub.js.map +1 -1
- package/dist/NavigationMenu/NavigationMenuViewport.cjs +2 -3
- package/dist/NavigationMenu/NavigationMenuViewport.cjs.map +1 -1
- package/dist/NavigationMenu/NavigationMenuViewport.js +2 -3
- package/dist/NavigationMenu/NavigationMenuViewport.js.map +1 -1
- package/dist/NumberField/NumberFieldInput.cjs +2 -0
- package/dist/NumberField/NumberFieldInput.cjs.map +1 -1
- package/dist/NumberField/NumberFieldInput.js +2 -0
- package/dist/NumberField/NumberFieldInput.js.map +1 -1
- package/dist/NumberField/NumberFieldRoot.cjs +5 -2
- package/dist/NumberField/NumberFieldRoot.cjs.map +1 -1
- package/dist/NumberField/NumberFieldRoot.js +5 -2
- package/dist/NumberField/NumberFieldRoot.js.map +1 -1
- package/dist/RangeCalendar/RangeCalendarCellTrigger.cjs +6 -4
- package/dist/RangeCalendar/RangeCalendarCellTrigger.cjs.map +1 -1
- package/dist/RangeCalendar/RangeCalendarCellTrigger.js +6 -4
- package/dist/RangeCalendar/RangeCalendarCellTrigger.js.map +1 -1
- package/dist/RangeCalendar/RangeCalendarRoot.cjs +3 -3
- package/dist/RangeCalendar/RangeCalendarRoot.cjs.map +1 -1
- package/dist/RangeCalendar/RangeCalendarRoot.js +3 -3
- package/dist/RangeCalendar/RangeCalendarRoot.js.map +1 -1
- package/dist/Select/SelectContentImpl.cjs +15 -5
- package/dist/Select/SelectContentImpl.cjs.map +1 -1
- package/dist/Select/SelectContentImpl.js +15 -5
- package/dist/Select/SelectContentImpl.js.map +1 -1
- package/dist/Slider/SliderHorizontal.cjs +19 -9
- package/dist/Slider/SliderHorizontal.cjs.map +1 -1
- package/dist/Slider/SliderHorizontal.js +20 -10
- package/dist/Slider/SliderHorizontal.js.map +1 -1
- package/dist/Slider/SliderRoot.cjs +5 -3
- package/dist/Slider/SliderRoot.cjs.map +1 -1
- package/dist/Slider/SliderRoot.js +5 -3
- package/dist/Slider/SliderRoot.js.map +1 -1
- package/dist/Slider/SliderThumb.cjs +2 -2
- package/dist/Slider/SliderThumb.cjs.map +1 -1
- package/dist/Slider/SliderThumb.js +2 -2
- package/dist/Slider/SliderThumb.js.map +1 -1
- package/dist/Slider/SliderThumbImpl.cjs +7 -1
- package/dist/Slider/SliderThumbImpl.cjs.map +1 -1
- package/dist/Slider/SliderThumbImpl.js +7 -1
- package/dist/Slider/SliderThumbImpl.js.map +1 -1
- package/dist/Slider/SliderVertical.cjs +19 -9
- package/dist/Slider/SliderVertical.cjs.map +1 -1
- package/dist/Slider/SliderVertical.js +20 -10
- package/dist/Slider/SliderVertical.js.map +1 -1
- package/dist/TagsInput/TagsInputItemDelete.cjs +2 -1
- package/dist/TagsInput/TagsInputItemDelete.cjs.map +1 -1
- package/dist/TagsInput/TagsInputItemDelete.js +2 -1
- package/dist/TagsInput/TagsInputItemDelete.js.map +1 -1
- package/dist/Toast/ToastClose.cjs +2 -2
- package/dist/Toast/ToastClose.cjs.map +1 -1
- package/dist/Toast/ToastClose.js +2 -2
- package/dist/Toast/ToastClose.js.map +1 -1
- package/dist/Toast/ToastRoot.cjs +3 -0
- package/dist/Toast/ToastRoot.cjs.map +1 -1
- package/dist/Toast/ToastRoot.js +3 -0
- package/dist/Toast/ToastRoot.js.map +1 -1
- package/dist/Toast/ToastRootImpl.cjs +6 -3
- package/dist/Toast/ToastRootImpl.cjs.map +1 -1
- package/dist/Toast/ToastRootImpl.js +6 -3
- package/dist/Toast/ToastRootImpl.js.map +1 -1
- package/dist/Toggle/Toggle.cjs +6 -1
- package/dist/Toggle/Toggle.cjs.map +1 -1
- package/dist/Toggle/Toggle.js +6 -1
- package/dist/Toggle/Toggle.js.map +1 -1
- package/dist/ToggleGroup/ToggleGroupItem.cjs +2 -2
- package/dist/ToggleGroup/ToggleGroupItem.cjs.map +1 -1
- package/dist/ToggleGroup/ToggleGroupItem.js +3 -3
- package/dist/ToggleGroup/ToggleGroupItem.js.map +1 -1
- package/dist/date.d.ts +2 -0
- package/dist/index.cjs +4 -4
- package/dist/index.d.ts +59 -16
- package/dist/index.js +2 -2
- package/package.json +2 -2
|
@@ -19,8 +19,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
19
19
|
shared_useForwardExpose.useForwardExpose();
|
|
20
20
|
return (_ctx, _cache) => {
|
|
21
21
|
return vue.openBlock(), vue.createBlock(vue.unref(Dialog_DialogRoot._sfc_main), vue.mergeProps(vue.unref(forwarded), { modal: true }), {
|
|
22
|
-
default: vue.withCtx(() => [
|
|
23
|
-
vue.renderSlot(_ctx.$slots, "default")
|
|
22
|
+
default: vue.withCtx((slotProps) => [
|
|
23
|
+
vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(slotProps)))
|
|
24
24
|
]),
|
|
25
25
|
_: 3
|
|
26
26
|
}, 16);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialogRoot.cjs","sources":["../../src/AlertDialog/AlertDialogRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n DialogRootEmits,\n DialogRootProps,\n} from '@/Dialog'\n\nexport type AlertDialogEmits = DialogRootEmits\nexport interface AlertDialogProps extends Omit<DialogRootProps, 'modal'> {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DialogRoot } from '@/Dialog'\nimport { useForwardExpose, useForwardPropsEmits } from '@/shared'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n</script>\n\n<template>\n <DialogRoot\n v-bind=\"forwarded\"\n :modal=\"true\"\n >\n <slot />\n </DialogRoot>\n</template>\n"],"names":["useForwardPropsEmits","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiBC,wCAAA,EAAA;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"AlertDialogRoot.cjs","sources":["../../src/AlertDialog/AlertDialogRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n DialogRootEmits,\n DialogRootProps,\n} from '@/Dialog'\n\nexport type AlertDialogEmits = DialogRootEmits\nexport interface AlertDialogProps extends Omit<DialogRootProps, 'modal'> {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DialogRoot } from '@/Dialog'\nimport { useForwardExpose, useForwardPropsEmits } from '@/shared'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n</script>\n\n<template>\n <DialogRoot\n v-slot=\"slotProps\"\n v-bind=\"forwarded\"\n :modal=\"true\"\n >\n <slot v-bind=\"slotProps\" />\n </DialogRoot>\n</template>\n"],"names":["useForwardPropsEmits","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiBC,wCAAA,EAAA;;;;;;;;;;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot } from 'vue';
|
|
1
|
+
import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
|
|
2
2
|
import { u as useForwardPropsEmits } from '../shared/useForwardPropsEmits.js';
|
|
3
3
|
import { u as useForwardExpose } from '../shared/useForwardExpose.js';
|
|
4
4
|
import { _ as _sfc_main$1 } from '../Dialog/DialogRoot.js';
|
|
@@ -17,8 +17,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
17
17
|
useForwardExpose();
|
|
18
18
|
return (_ctx, _cache) => {
|
|
19
19
|
return openBlock(), createBlock(unref(_sfc_main$1), mergeProps(unref(forwarded), { modal: true }), {
|
|
20
|
-
default: withCtx(() => [
|
|
21
|
-
renderSlot(_ctx.$slots, "default")
|
|
20
|
+
default: withCtx((slotProps) => [
|
|
21
|
+
renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)))
|
|
22
22
|
]),
|
|
23
23
|
_: 3
|
|
24
24
|
}, 16);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialogRoot.js","sources":["../../src/AlertDialog/AlertDialogRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n DialogRootEmits,\n DialogRootProps,\n} from '@/Dialog'\n\nexport type AlertDialogEmits = DialogRootEmits\nexport interface AlertDialogProps extends Omit<DialogRootProps, 'modal'> {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DialogRoot } from '@/Dialog'\nimport { useForwardExpose, useForwardPropsEmits } from '@/shared'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n</script>\n\n<template>\n <DialogRoot\n v-bind=\"forwarded\"\n :modal=\"true\"\n >\n <slot />\n </DialogRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiB,gBAAA,EAAA;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"AlertDialogRoot.js","sources":["../../src/AlertDialog/AlertDialogRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n DialogRootEmits,\n DialogRootProps,\n} from '@/Dialog'\n\nexport type AlertDialogEmits = DialogRootEmits\nexport interface AlertDialogProps extends Omit<DialogRootProps, 'modal'> {}\n</script>\n\n<script setup lang=\"ts\">\nimport { DialogRoot } from '@/Dialog'\nimport { useForwardExpose, useForwardPropsEmits } from '@/shared'\n\nconst props = defineProps<AlertDialogProps>()\nconst emits = defineEmits<AlertDialogEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\nuseForwardExpose()\n</script>\n\n<template>\n <DialogRoot\n v-slot=\"slotProps\"\n v-bind=\"forwarded\"\n :modal=\"true\"\n >\n <slot v-bind=\"slotProps\" />\n </DialogRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAcA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AACnD,IAAiB,gBAAA,EAAA;;;;;;;;;;;;;;"}
|
|
@@ -98,8 +98,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
98
98
|
rootContext.prevPage();
|
|
99
99
|
vue.nextTick(() => {
|
|
100
100
|
const newCollectionItems = parentElement ? Array.from(parentElement.querySelectorAll(SELECTOR)) : [];
|
|
101
|
-
if (!rootContext.pagedNavigation.value) {
|
|
102
|
-
const numberOfDays = date_comparators.getDaysInMonth(rootContext.placeholder.value);
|
|
101
|
+
if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
|
|
102
|
+
const numberOfDays = date_comparators.getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value }));
|
|
103
103
|
newCollectionItems[numberOfDays - Math.abs(newIndex)].focus();
|
|
104
104
|
return;
|
|
105
105
|
}
|
|
@@ -113,9 +113,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
113
113
|
rootContext.nextPage();
|
|
114
114
|
vue.nextTick(() => {
|
|
115
115
|
const newCollectionItems = parentElement ? Array.from(parentElement.querySelectorAll(SELECTOR)) : [];
|
|
116
|
-
if (!rootContext.pagedNavigation.value) {
|
|
117
|
-
const numberOfDays = date_comparators.getDaysInMonth(
|
|
118
|
-
|
|
116
|
+
if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
|
|
117
|
+
const numberOfDays = date_comparators.getDaysInMonth(
|
|
118
|
+
rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 })
|
|
119
|
+
);
|
|
120
|
+
newCollectionItems[newIndex - allCollectionItems.length + (newCollectionItems.length - numberOfDays)].focus();
|
|
119
121
|
return;
|
|
120
122
|
}
|
|
121
123
|
newCollectionItems[newIndex - allCollectionItems.length].focus();
|
|
@@ -1 +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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"}
|
|
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 && 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":"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"}
|
|
@@ -96,8 +96,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
96
96
|
rootContext.prevPage();
|
|
97
97
|
nextTick(() => {
|
|
98
98
|
const newCollectionItems = parentElement ? Array.from(parentElement.querySelectorAll(SELECTOR)) : [];
|
|
99
|
-
if (!rootContext.pagedNavigation.value) {
|
|
100
|
-
const numberOfDays = getDaysInMonth(rootContext.placeholder.value);
|
|
99
|
+
if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
|
|
100
|
+
const numberOfDays = getDaysInMonth(rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value }));
|
|
101
101
|
newCollectionItems[numberOfDays - Math.abs(newIndex)].focus();
|
|
102
102
|
return;
|
|
103
103
|
}
|
|
@@ -111,9 +111,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
111
111
|
rootContext.nextPage();
|
|
112
112
|
nextTick(() => {
|
|
113
113
|
const newCollectionItems = parentElement ? Array.from(parentElement.querySelectorAll(SELECTOR)) : [];
|
|
114
|
-
if (!rootContext.pagedNavigation.value) {
|
|
115
|
-
const numberOfDays = getDaysInMonth(
|
|
116
|
-
|
|
114
|
+
if (!rootContext.pagedNavigation.value && rootContext.numberOfMonths.value > 1) {
|
|
115
|
+
const numberOfDays = getDaysInMonth(
|
|
116
|
+
rootContext.placeholder.value.add({ months: rootContext.numberOfMonths.value - 1 })
|
|
117
|
+
);
|
|
118
|
+
newCollectionItems[newIndex - allCollectionItems.length + (newCollectionItems.length - numberOfDays)].focus();
|
|
117
119
|
return;
|
|
118
120
|
}
|
|
119
121
|
newCollectionItems[newIndex - allCollectionItems.length].focus();
|
|
@@ -1 +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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"}
|
|
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 && 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":";;;;;;;;;;;;;;;;;;AA4CA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAMd,IAAA,MAAM,MAAM,MAAO,EAAA;AACnB,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAE9C,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AAEjE,IAAM,MAAA,QAAA,GAAW,QAAS,CAAA,MAAM,KAAM,CAAA,GAAA,CAAI,IAAI,cAAe,CAAA,WAAA,CAAY,MAAO,CAAA,KAAK,CAAC,CAAA;AAEtF,IAAM,MAAA,SAAA,GAAY,SAAS,MAAM;AAC/B,MAAA,OAAO,YAAY,SAAU,CAAA,MAAA,CAAO,MAAO,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,aAAa,QAAS,CAAA,MAAM,YAAY,cAAe,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AACvE,IAAA,MAAM,aAAgB,GAAA,QAAA;AAAA,MAAS,MAC7B,WAAA,CAAY,iBAAoB,GAAA,KAAA,CAAM,GAAG,CAAK,IAAA;AAAA,KAChD;AACA,IAAM,MAAA,WAAA,GAAc,SAAS,MAAM;AACjC,MAAA,OAAO,OAAQ,CAAA,KAAA,CAAM,GAAK,EAAA,gBAAA,EAAkB,CAAA;AAAA,KAC7C,CAAA;AACD,IAAM,MAAA,aAAA,GAAgB,SAAS,MAAM;AACnC,MAAA,OAAO,CAAC,WAAA,CAAY,KAAM,CAAA,GAAA,EAAK,MAAM,KAAK,CAAA;AAAA,KAC3C,CAAA;AACD,IAAA,MAAM,oBAAuB,GAAA,QAAA;AAAA,MAAS,MACpC,WAAA,CAAY,oBAAqB,CAAA,KAAA,CAAM,GAAG;AAAA,KAC5C;AAEA,IAAM,MAAA,aAAA,GAAgB,SAAS,MAAM;AACnC,MAAO,OAAA,CAAC,YAAY,QAAS,CAAA,KAAA,IAAS,UAAU,KAAM,CAAA,GAAA,EAAK,WAAY,CAAA,WAAA,CAAY,KAAK,CAAA;AAAA,KACzF,CAAA;AACD,IAAA,MAAM,iBAAiB,QAAS,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,QAAA,QAAA,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,GAAA,cAAA,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,QAAA,QAAA,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,GAAA,cAAA;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -4,11 +4,9 @@ const vue = require('vue');
|
|
|
4
4
|
const shared_useId = require('../shared/useId.cjs');
|
|
5
5
|
const Primitive_usePrimitiveElement = require('../Primitive/usePrimitiveElement.cjs');
|
|
6
6
|
const Listbox_ListboxItem = require('../Listbox/ListboxItem.cjs');
|
|
7
|
-
const shared_createContext = require('../shared/createContext.cjs');
|
|
8
7
|
const Combobox_ComboboxRoot = require('./ComboboxRoot.cjs');
|
|
9
8
|
const Combobox_ComboboxGroup = require('./ComboboxGroup.cjs');
|
|
10
9
|
|
|
11
|
-
const [injectComboboxItemContext, provideComboboxItemContext] = shared_createContext.createContext("ComboboxItem");
|
|
12
10
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
13
11
|
__name: "ComboboxItem",
|
|
14
12
|
props: {
|
|
@@ -84,5 +82,4 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
84
82
|
});
|
|
85
83
|
|
|
86
84
|
exports._sfc_main = _sfc_main;
|
|
87
|
-
exports.injectComboboxItemContext = injectComboboxItemContext;
|
|
88
85
|
//# sourceMappingURL=ComboboxItem.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxItem.cjs","sources":["../../src/Combobox/ComboboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {
|
|
1
|
+
{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,11 +2,9 @@ import { defineComponent, computed, onMounted, onUnmounted, openBlock, createBlo
|
|
|
2
2
|
import { u as useId } from '../shared/useId.js';
|
|
3
3
|
import { u as usePrimitiveElement } from '../Primitive/usePrimitiveElement.js';
|
|
4
4
|
import { _ as _sfc_main$1 } from '../Listbox/ListboxItem.js';
|
|
5
|
-
import { c as createContext } from '../shared/createContext.js';
|
|
6
5
|
import { i as injectComboboxRootContext } from './ComboboxRoot.js';
|
|
7
6
|
import { i as injectComboboxGroupContext } from './ComboboxGroup.js';
|
|
8
7
|
|
|
9
|
-
const [injectComboboxItemContext, provideComboboxItemContext] = createContext("ComboboxItem");
|
|
10
8
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
11
9
|
__name: "ComboboxItem",
|
|
12
10
|
props: {
|
|
@@ -81,5 +79,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
81
79
|
}
|
|
82
80
|
});
|
|
83
81
|
|
|
84
|
-
export { _sfc_main as _
|
|
82
|
+
export { _sfc_main as _ };
|
|
85
83
|
//# sourceMappingURL=ComboboxItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxItem.js","sources":["../../src/Combobox/ComboboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {
|
|
1
|
+
{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -39,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
39
39
|
const dir = shared_useDirection.useDirection(propDir);
|
|
40
40
|
const modelValue = core.useVModel(props, "modelValue", emits, {
|
|
41
41
|
// @ts-expect-error ignore the type error here
|
|
42
|
-
defaultValue: props.defaultValue ?? multiple.value ? [] : undefined,
|
|
42
|
+
defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),
|
|
43
43
|
passive: props.modelValue === undefined,
|
|
44
44
|
deep: true
|
|
45
45
|
});
|
|
@@ -115,6 +115,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
115
115
|
filterItems();
|
|
116
116
|
});
|
|
117
117
|
}, { flush: "post" });
|
|
118
|
+
const inst = vue.getCurrentInstance();
|
|
119
|
+
vue.onMounted(() => {
|
|
120
|
+
if (inst?.exposed) {
|
|
121
|
+
inst.exposed.highlightItem = primitiveElement.value?.highlightItem;
|
|
122
|
+
inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem;
|
|
123
|
+
inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected;
|
|
124
|
+
}
|
|
125
|
+
});
|
|
118
126
|
__expose({
|
|
119
127
|
filtered: vue.computed(() => filterState.filtered),
|
|
120
128
|
highlightedElement,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxRoot.cjs","sources":["../../src/Combobox/ComboboxRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListboxRootProps } from '@/Listbox'\nimport { createContext, useDirection, useFilter } from '@/shared'\nimport { usePrimitiveElement } from '@/Primitive'\nimport type { AcceptableValue, GenericComponentInstance } from '@/shared/types'\n\ntype ComboboxRootContext<T> = {\n modelValue: Ref<T | Array<T>>\n multiple: Ref<boolean>\n disabled: Ref<boolean>\n open: Ref<boolean>\n onOpenChange: (value: boolean) => void\n isUserInputted: Ref<boolean>\n isVirtual: Ref<boolean>\n contentId: string\n inputElement: Ref<HTMLInputElement | undefined>\n onInputElementChange: (el: HTMLInputElement) => void\n triggerElement: Ref<HTMLElement | undefined>\n onTriggerElementChange: (el: HTMLElement) => void\n highlightedElement: Ref<HTMLElement | undefined>\n parentElement: Ref<HTMLElement | undefined>\n resetSearchTermOnSelect: Ref<boolean>\n onResetSearchTerm: EventHookOn\n allItems: Ref<Map<string, string>>\n allGroups: Ref<Map<string, Set<string>>>\n filterState: {\n search: string\n filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n }\n ignoreFilter: Ref<boolean>\n}\n\nexport const [injectComboboxRootContext, provideComboboxRootContext]\n = createContext<ComboboxRootContext<AcceptableValue>>('ComboboxRoot')\n\nexport type ComboboxRootEmits<T = AcceptableValue> = {\n /** Event handler called when the value changes. */\n 'update:modelValue': [value: T]\n /** Event handler when highlighted element changes. */\n 'highlight': [payload: { ref: HTMLElement, value: T } | undefined]\n /** Event handler called when the open state of the combobox changes. */\n 'update:open': [value: boolean]\n}\n\nexport interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRootProps<T>, 'orientation' | 'selectionBehavior' > {\n /** The controlled open state of the Combobox. Can be binded with with `v-model:open`. */\n open?: boolean\n /** The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state. */\n defaultOpen?: boolean\n /**\n * Whether to reset the searchTerm when the Combobox input blurred\n * @defaultValue `true`\n */\n resetSearchTermOnBlur?: boolean\n /**\n * Whether to reset the searchTerm when the Combobox value is selected\n * @defaultValue `true`\n */\n resetSearchTermOnSelect?: boolean\n /**\n * When `true`, disable the default filters\n */\n ignoreFilter?: boolean\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { computed, nextTick, reactive, ref, toRefs, watch } from 'vue'\nimport { PopperRoot } from '@/Popper'\nimport { type EventHookOn, createEventHook, useVModel } from '@vueuse/core'\nimport { ListboxRoot } from '@/Listbox'\n\nconst props = withDefaults(defineProps<ComboboxRootProps<T>>(), {\n open: undefined,\n resetSearchTermOnBlur: true,\n resetSearchTermOnSelect: true,\n})\nconst emits = defineEmits<ComboboxRootEmits<T>>()\n\ndefineSlots<{\n default: (props: {\n /** Current open state */\n open: typeof open.value\n /** Current active value */\n modelValue: typeof modelValue.value\n }) => any\n}>()\n\nconst { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()\nconst { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, dir: propDir } = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n // @ts-expect-error ignore the type error here\n defaultValue: props.defaultValue ?? multiple.value ? [] : undefined,\n passive: (props.modelValue === undefined) as false,\n deep: true,\n}) as Ref<T | T[]>\n\nconst open = useVModel(props, 'open', emits, {\n defaultValue: props.defaultOpen,\n passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nasync function onOpenChange(val: boolean) {\n open.value = val\n filterState.search = ''\n\n if (val) {\n // make sure dom is ready then only highlight the selected\n await nextTick()\n primitiveElement.value?.highlightSelected()\n isUserInputted.value = true\n }\n else {\n isUserInputted.value = false\n }\n\n inputElement.value?.focus()\n setTimeout(() => {\n if (!val && props.resetSearchTermOnBlur)\n resetSearchTerm.trigger()\n }, 1)\n}\n\nconst resetSearchTerm = createEventHook()\nconst isUserInputted = ref(false)\nconst isVirtual = ref(false)\nconst inputElement = ref<HTMLInputElement>()\nconst triggerElement = ref<HTMLElement>()\n\nconst highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n search: '',\n filtered: {\n /** The count of all visible items. */\n count: 0,\n /** Map from visible item id to its search score. */\n items: new Map() as Map<string, number>,\n /** Set of groups with at least one visible item. */\n groups: new Set() as Set<string>,\n },\n})\n\nfunction filterItems() {\n if (!filterState.search || props.ignoreFilter || isVirtual.value) {\n filterState.filtered.count = allItems.value.size\n // Do nothing, each item will know to show itself because search is empty\n return\n }\n\n // Reset the groups\n filterState.filtered.groups = new Set()\n let itemCount = 0\n\n // Check which items should be included\n for (const [id, value] of allItems.value) {\n const score = contains(value, filterState.search)\n filterState.filtered.items.set(id, score ? 1 : 0)\n if (score)\n itemCount++\n }\n\n // Check which groups have at least 1 item shown\n for (const [groupId, group] of allGroups.value) {\n for (const itemId of group) {\n if (filterState.filtered.items.get(itemId)! > 0) {\n filterState.filtered.groups.add(groupId)\n break\n }\n }\n }\n\n filterState.filtered.count = itemCount\n}\n\nwatch([() => filterState.search, () => allItems.value.size], () => {\n filterItems()\n}, { immediate: true })\n\nwatch(() => open.value, () => {\n // nextTick to allow multiple items to be mounted first\n nextTick(() => {\n if (open.value)\n filterItems()\n })\n}, { flush: 'post' })\n\ndefineExpose({\n filtered: computed(() => filterState.filtered),\n highlightedElement,\n highlightItem: primitiveElement.value?.highlightItem,\n highlightFirstItem: primitiveElement.value?.highlightFirstItem,\n highlightSelected: primitiveElement.value?.highlightSelected,\n})\n\nprovideComboboxRootContext({\n modelValue,\n multiple,\n disabled,\n open,\n onOpenChange,\n contentId: '',\n isUserInputted,\n isVirtual,\n inputElement,\n highlightedElement,\n onInputElementChange: val => inputElement.value = val,\n triggerElement,\n onTriggerElementChange: val => triggerElement.value = val,\n parentElement,\n resetSearchTermOnSelect,\n onResetSearchTerm: resetSearchTerm.on,\n allItems,\n allGroups,\n filterState,\n ignoreFilter,\n})\n</script>\n\n<template>\n <PopperRoot>\n <ListboxRoot\n ref=\"primitiveElement\"\n v-bind=\"$attrs\"\n v-model=\"modelValue\"\n :style=\"{\n pointerEvents: open ? 'auto' : undefined,\n }\"\n :as=\"as\"\n :as-child=\"asChild\"\n :dir=\"dir\"\n :multiple=\"multiple\"\n :name=\"name\"\n :required=\"required\"\n :disabled=\"disabled\"\n :highlight-on-hover=\"true\"\n :by=\"props.by as any\"\n @highlight=\"emits('highlight', $event as any)\"\n >\n <slot\n :open=\"open\"\n :model-value=\"modelValue\"\n />\n </ListboxRoot>\n </PopperRoot>\n</template>\n"],"names":["createContext","usePrimitiveElement","toRefs","useDirection","useVModel","nextTick","createEventHook","ref","computed","useFilter","reactive","watch"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ComboboxRoot.cjs","sources":["../../src/Combobox/ComboboxRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListboxRootProps } from '@/Listbox'\nimport { createContext, useDirection, useFilter } from '@/shared'\nimport { usePrimitiveElement } from '@/Primitive'\nimport type { AcceptableValue, GenericComponentInstance } from '@/shared/types'\n\ntype ComboboxRootContext<T> = {\n modelValue: Ref<T | Array<T>>\n multiple: Ref<boolean>\n disabled: Ref<boolean>\n open: Ref<boolean>\n onOpenChange: (value: boolean) => void\n isUserInputted: Ref<boolean>\n isVirtual: Ref<boolean>\n contentId: string\n inputElement: Ref<HTMLInputElement | undefined>\n onInputElementChange: (el: HTMLInputElement) => void\n triggerElement: Ref<HTMLElement | undefined>\n onTriggerElementChange: (el: HTMLElement) => void\n highlightedElement: Ref<HTMLElement | undefined>\n parentElement: Ref<HTMLElement | undefined>\n resetSearchTermOnSelect: Ref<boolean>\n onResetSearchTerm: EventHookOn\n allItems: Ref<Map<string, string>>\n allGroups: Ref<Map<string, Set<string>>>\n filterState: {\n search: string\n filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n }\n ignoreFilter: Ref<boolean>\n}\n\nexport const [injectComboboxRootContext, provideComboboxRootContext]\n = createContext<ComboboxRootContext<AcceptableValue>>('ComboboxRoot')\n\nexport type ComboboxRootEmits<T = AcceptableValue> = {\n /** Event handler called when the value changes. */\n 'update:modelValue': [value: T]\n /** Event handler when highlighted element changes. */\n 'highlight': [payload: { ref: HTMLElement, value: T } | undefined]\n /** Event handler called when the open state of the combobox changes. */\n 'update:open': [value: boolean]\n}\n\nexport interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRootProps<T>, 'orientation' | 'selectionBehavior' > {\n /** The controlled open state of the Combobox. Can be binded with with `v-model:open`. */\n open?: boolean\n /** The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state. */\n defaultOpen?: boolean\n /**\n * Whether to reset the searchTerm when the Combobox input blurred\n * @defaultValue `true`\n */\n resetSearchTermOnBlur?: boolean\n /**\n * Whether to reset the searchTerm when the Combobox value is selected\n * @defaultValue `true`\n */\n resetSearchTermOnSelect?: boolean\n /**\n * When `true`, disable the default filters\n */\n ignoreFilter?: boolean\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'\nimport { PopperRoot } from '@/Popper'\nimport { type EventHookOn, createEventHook, useVModel } from '@vueuse/core'\nimport { ListboxRoot } from '@/Listbox'\n\nconst props = withDefaults(defineProps<ComboboxRootProps<T>>(), {\n open: undefined,\n resetSearchTermOnBlur: true,\n resetSearchTermOnSelect: true,\n})\nconst emits = defineEmits<ComboboxRootEmits<T>>()\n\ndefineSlots<{\n default: (props: {\n /** Current open state */\n open: typeof open.value\n /** Current active value */\n modelValue: typeof modelValue.value\n }) => any\n}>()\n\nconst { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()\nconst { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, dir: propDir } = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n // @ts-expect-error ignore the type error here\n defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),\n passive: (props.modelValue === undefined) as false,\n deep: true,\n}) as Ref<T | T[]>\n\nconst open = useVModel(props, 'open', emits, {\n defaultValue: props.defaultOpen,\n passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nasync function onOpenChange(val: boolean) {\n open.value = val\n filterState.search = ''\n\n if (val) {\n // make sure dom is ready then only highlight the selected\n await nextTick()\n primitiveElement.value?.highlightSelected()\n isUserInputted.value = true\n }\n else {\n isUserInputted.value = false\n }\n\n inputElement.value?.focus()\n setTimeout(() => {\n if (!val && props.resetSearchTermOnBlur)\n resetSearchTerm.trigger()\n }, 1)\n}\n\nconst resetSearchTerm = createEventHook()\nconst isUserInputted = ref(false)\nconst isVirtual = ref(false)\nconst inputElement = ref<HTMLInputElement>()\nconst triggerElement = ref<HTMLElement>()\n\nconst highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n search: '',\n filtered: {\n /** The count of all visible items. */\n count: 0,\n /** Map from visible item id to its search score. */\n items: new Map() as Map<string, number>,\n /** Set of groups with at least one visible item. */\n groups: new Set() as Set<string>,\n },\n})\n\nfunction filterItems() {\n if (!filterState.search || props.ignoreFilter || isVirtual.value) {\n filterState.filtered.count = allItems.value.size\n // Do nothing, each item will know to show itself because search is empty\n return\n }\n\n // Reset the groups\n filterState.filtered.groups = new Set()\n let itemCount = 0\n\n // Check which items should be included\n for (const [id, value] of allItems.value) {\n const score = contains(value, filterState.search)\n filterState.filtered.items.set(id, score ? 1 : 0)\n if (score)\n itemCount++\n }\n\n // Check which groups have at least 1 item shown\n for (const [groupId, group] of allGroups.value) {\n for (const itemId of group) {\n if (filterState.filtered.items.get(itemId)! > 0) {\n filterState.filtered.groups.add(groupId)\n break\n }\n }\n }\n\n filterState.filtered.count = itemCount\n}\n\nwatch([() => filterState.search, () => allItems.value.size], () => {\n filterItems()\n}, { immediate: true })\n\nwatch(() => open.value, () => {\n // nextTick to allow multiple items to be mounted first\n nextTick(() => {\n if (open.value)\n filterItems()\n })\n}, { flush: 'post' })\n\nconst inst = getCurrentInstance()\nonMounted(() => {\n if (inst?.exposed) {\n inst.exposed.highlightItem = primitiveElement.value?.highlightItem\n inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem\n inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected\n }\n})\n\ndefineExpose({\n filtered: computed(() => filterState.filtered),\n highlightedElement,\n highlightItem: primitiveElement.value?.highlightItem,\n highlightFirstItem: primitiveElement.value?.highlightFirstItem,\n highlightSelected: primitiveElement.value?.highlightSelected,\n})\n\nprovideComboboxRootContext({\n modelValue,\n multiple,\n disabled,\n open,\n onOpenChange,\n contentId: '',\n isUserInputted,\n isVirtual,\n inputElement,\n highlightedElement,\n onInputElementChange: val => inputElement.value = val,\n triggerElement,\n onTriggerElementChange: val => triggerElement.value = val,\n parentElement,\n resetSearchTermOnSelect,\n onResetSearchTerm: resetSearchTerm.on,\n allItems,\n allGroups,\n filterState,\n ignoreFilter,\n})\n</script>\n\n<template>\n <PopperRoot>\n <ListboxRoot\n ref=\"primitiveElement\"\n v-bind=\"$attrs\"\n v-model=\"modelValue\"\n :style=\"{\n pointerEvents: open ? 'auto' : undefined,\n }\"\n :as=\"as\"\n :as-child=\"asChild\"\n :dir=\"dir\"\n :multiple=\"multiple\"\n :name=\"name\"\n :required=\"required\"\n :disabled=\"disabled\"\n :highlight-on-hover=\"true\"\n :by=\"props.by as any\"\n @highlight=\"emits('highlight', $event as any)\"\n >\n <slot\n :open=\"open\"\n :model-value=\"modelValue\"\n />\n </ListboxRoot>\n </PopperRoot>\n</template>\n"],"names":["createContext","usePrimitiveElement","toRefs","useDirection","useVModel","nextTick","createEventHook","ref","computed","useFilter","reactive","watch","getCurrentInstance","onMounted"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, toRefs, ref, computed, reactive, watch, nextTick, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, isRef, renderSlot } from 'vue';
|
|
1
|
+
import { defineComponent, toRefs, ref, computed, reactive, watch, nextTick, getCurrentInstance, onMounted, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, isRef, renderSlot } from 'vue';
|
|
2
2
|
import { _ as _sfc_main$1 } from '../Popper/PopperRoot.js';
|
|
3
3
|
import { useVModel, createEventHook } from '@vueuse/core';
|
|
4
4
|
import { u as usePrimitiveElement } from '../Primitive/usePrimitiveElement.js';
|
|
@@ -37,7 +37,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
37
37
|
const dir = useDirection(propDir);
|
|
38
38
|
const modelValue = useVModel(props, "modelValue", emits, {
|
|
39
39
|
// @ts-expect-error ignore the type error here
|
|
40
|
-
defaultValue: props.defaultValue ?? multiple.value ? [] : undefined,
|
|
40
|
+
defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),
|
|
41
41
|
passive: props.modelValue === undefined,
|
|
42
42
|
deep: true
|
|
43
43
|
});
|
|
@@ -113,6 +113,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
113
113
|
filterItems();
|
|
114
114
|
});
|
|
115
115
|
}, { flush: "post" });
|
|
116
|
+
const inst = getCurrentInstance();
|
|
117
|
+
onMounted(() => {
|
|
118
|
+
if (inst?.exposed) {
|
|
119
|
+
inst.exposed.highlightItem = primitiveElement.value?.highlightItem;
|
|
120
|
+
inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem;
|
|
121
|
+
inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected;
|
|
122
|
+
}
|
|
123
|
+
});
|
|
116
124
|
__expose({
|
|
117
125
|
filtered: computed(() => filterState.filtered),
|
|
118
126
|
highlightedElement,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxRoot.js","sources":["../../src/Combobox/ComboboxRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListboxRootProps } from '@/Listbox'\nimport { createContext, useDirection, useFilter } from '@/shared'\nimport { usePrimitiveElement } from '@/Primitive'\nimport type { AcceptableValue, GenericComponentInstance } from '@/shared/types'\n\ntype ComboboxRootContext<T> = {\n modelValue: Ref<T | Array<T>>\n multiple: Ref<boolean>\n disabled: Ref<boolean>\n open: Ref<boolean>\n onOpenChange: (value: boolean) => void\n isUserInputted: Ref<boolean>\n isVirtual: Ref<boolean>\n contentId: string\n inputElement: Ref<HTMLInputElement | undefined>\n onInputElementChange: (el: HTMLInputElement) => void\n triggerElement: Ref<HTMLElement | undefined>\n onTriggerElementChange: (el: HTMLElement) => void\n highlightedElement: Ref<HTMLElement | undefined>\n parentElement: Ref<HTMLElement | undefined>\n resetSearchTermOnSelect: Ref<boolean>\n onResetSearchTerm: EventHookOn\n allItems: Ref<Map<string, string>>\n allGroups: Ref<Map<string, Set<string>>>\n filterState: {\n search: string\n filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n }\n ignoreFilter: Ref<boolean>\n}\n\nexport const [injectComboboxRootContext, provideComboboxRootContext]\n = createContext<ComboboxRootContext<AcceptableValue>>('ComboboxRoot')\n\nexport type ComboboxRootEmits<T = AcceptableValue> = {\n /** Event handler called when the value changes. */\n 'update:modelValue': [value: T]\n /** Event handler when highlighted element changes. */\n 'highlight': [payload: { ref: HTMLElement, value: T } | undefined]\n /** Event handler called when the open state of the combobox changes. */\n 'update:open': [value: boolean]\n}\n\nexport interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRootProps<T>, 'orientation' | 'selectionBehavior' > {\n /** The controlled open state of the Combobox. Can be binded with with `v-model:open`. */\n open?: boolean\n /** The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state. */\n defaultOpen?: boolean\n /**\n * Whether to reset the searchTerm when the Combobox input blurred\n * @defaultValue `true`\n */\n resetSearchTermOnBlur?: boolean\n /**\n * Whether to reset the searchTerm when the Combobox value is selected\n * @defaultValue `true`\n */\n resetSearchTermOnSelect?: boolean\n /**\n * When `true`, disable the default filters\n */\n ignoreFilter?: boolean\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { computed, nextTick, reactive, ref, toRefs, watch } from 'vue'\nimport { PopperRoot } from '@/Popper'\nimport { type EventHookOn, createEventHook, useVModel } from '@vueuse/core'\nimport { ListboxRoot } from '@/Listbox'\n\nconst props = withDefaults(defineProps<ComboboxRootProps<T>>(), {\n open: undefined,\n resetSearchTermOnBlur: true,\n resetSearchTermOnSelect: true,\n})\nconst emits = defineEmits<ComboboxRootEmits<T>>()\n\ndefineSlots<{\n default: (props: {\n /** Current open state */\n open: typeof open.value\n /** Current active value */\n modelValue: typeof modelValue.value\n }) => any\n}>()\n\nconst { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()\nconst { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, dir: propDir } = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n // @ts-expect-error ignore the type error here\n defaultValue: props.defaultValue ?? multiple.value ? [] : undefined,\n passive: (props.modelValue === undefined) as false,\n deep: true,\n}) as Ref<T | T[]>\n\nconst open = useVModel(props, 'open', emits, {\n defaultValue: props.defaultOpen,\n passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nasync function onOpenChange(val: boolean) {\n open.value = val\n filterState.search = ''\n\n if (val) {\n // make sure dom is ready then only highlight the selected\n await nextTick()\n primitiveElement.value?.highlightSelected()\n isUserInputted.value = true\n }\n else {\n isUserInputted.value = false\n }\n\n inputElement.value?.focus()\n setTimeout(() => {\n if (!val && props.resetSearchTermOnBlur)\n resetSearchTerm.trigger()\n }, 1)\n}\n\nconst resetSearchTerm = createEventHook()\nconst isUserInputted = ref(false)\nconst isVirtual = ref(false)\nconst inputElement = ref<HTMLInputElement>()\nconst triggerElement = ref<HTMLElement>()\n\nconst highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n search: '',\n filtered: {\n /** The count of all visible items. */\n count: 0,\n /** Map from visible item id to its search score. */\n items: new Map() as Map<string, number>,\n /** Set of groups with at least one visible item. */\n groups: new Set() as Set<string>,\n },\n})\n\nfunction filterItems() {\n if (!filterState.search || props.ignoreFilter || isVirtual.value) {\n filterState.filtered.count = allItems.value.size\n // Do nothing, each item will know to show itself because search is empty\n return\n }\n\n // Reset the groups\n filterState.filtered.groups = new Set()\n let itemCount = 0\n\n // Check which items should be included\n for (const [id, value] of allItems.value) {\n const score = contains(value, filterState.search)\n filterState.filtered.items.set(id, score ? 1 : 0)\n if (score)\n itemCount++\n }\n\n // Check which groups have at least 1 item shown\n for (const [groupId, group] of allGroups.value) {\n for (const itemId of group) {\n if (filterState.filtered.items.get(itemId)! > 0) {\n filterState.filtered.groups.add(groupId)\n break\n }\n }\n }\n\n filterState.filtered.count = itemCount\n}\n\nwatch([() => filterState.search, () => allItems.value.size], () => {\n filterItems()\n}, { immediate: true })\n\nwatch(() => open.value, () => {\n // nextTick to allow multiple items to be mounted first\n nextTick(() => {\n if (open.value)\n filterItems()\n })\n}, { flush: 'post' })\n\ndefineExpose({\n filtered: computed(() => filterState.filtered),\n highlightedElement,\n highlightItem: primitiveElement.value?.highlightItem,\n highlightFirstItem: primitiveElement.value?.highlightFirstItem,\n highlightSelected: primitiveElement.value?.highlightSelected,\n})\n\nprovideComboboxRootContext({\n modelValue,\n multiple,\n disabled,\n open,\n onOpenChange,\n contentId: '',\n isUserInputted,\n isVirtual,\n inputElement,\n highlightedElement,\n onInputElementChange: val => inputElement.value = val,\n triggerElement,\n onTriggerElementChange: val => triggerElement.value = val,\n parentElement,\n resetSearchTermOnSelect,\n onResetSearchTerm: resetSearchTerm.on,\n allItems,\n allGroups,\n filterState,\n ignoreFilter,\n})\n</script>\n\n<template>\n <PopperRoot>\n <ListboxRoot\n ref=\"primitiveElement\"\n v-bind=\"$attrs\"\n v-model=\"modelValue\"\n :style=\"{\n pointerEvents: open ? 'auto' : undefined,\n }\"\n :as=\"as\"\n :as-child=\"asChild\"\n :dir=\"dir\"\n :multiple=\"multiple\"\n :name=\"name\"\n :required=\"required\"\n :disabled=\"disabled\"\n :highlight-on-hover=\"true\"\n :by=\"props.by as any\"\n @highlight=\"emits('highlight', $event as any)\"\n >\n <slot\n :open=\"open\"\n :model-value=\"modelValue\"\n />\n </ListboxRoot>\n </PopperRoot>\n</template>\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ComboboxRoot.js","sources":["../../src/Combobox/ComboboxRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { ListboxRootProps } from '@/Listbox'\nimport { createContext, useDirection, useFilter } from '@/shared'\nimport { usePrimitiveElement } from '@/Primitive'\nimport type { AcceptableValue, GenericComponentInstance } from '@/shared/types'\n\ntype ComboboxRootContext<T> = {\n modelValue: Ref<T | Array<T>>\n multiple: Ref<boolean>\n disabled: Ref<boolean>\n open: Ref<boolean>\n onOpenChange: (value: boolean) => void\n isUserInputted: Ref<boolean>\n isVirtual: Ref<boolean>\n contentId: string\n inputElement: Ref<HTMLInputElement | undefined>\n onInputElementChange: (el: HTMLInputElement) => void\n triggerElement: Ref<HTMLElement | undefined>\n onTriggerElementChange: (el: HTMLElement) => void\n highlightedElement: Ref<HTMLElement | undefined>\n parentElement: Ref<HTMLElement | undefined>\n resetSearchTermOnSelect: Ref<boolean>\n onResetSearchTerm: EventHookOn\n allItems: Ref<Map<string, string>>\n allGroups: Ref<Map<string, Set<string>>>\n filterState: {\n search: string\n filtered: { count: number, items: Map<string, number>, groups: Set<string> }\n }\n ignoreFilter: Ref<boolean>\n}\n\nexport const [injectComboboxRootContext, provideComboboxRootContext]\n = createContext<ComboboxRootContext<AcceptableValue>>('ComboboxRoot')\n\nexport type ComboboxRootEmits<T = AcceptableValue> = {\n /** Event handler called when the value changes. */\n 'update:modelValue': [value: T]\n /** Event handler when highlighted element changes. */\n 'highlight': [payload: { ref: HTMLElement, value: T } | undefined]\n /** Event handler called when the open state of the combobox changes. */\n 'update:open': [value: boolean]\n}\n\nexport interface ComboboxRootProps<T = AcceptableValue> extends Omit<ListboxRootProps<T>, 'orientation' | 'selectionBehavior' > {\n /** The controlled open state of the Combobox. Can be binded with with `v-model:open`. */\n open?: boolean\n /** The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state. */\n defaultOpen?: boolean\n /**\n * Whether to reset the searchTerm when the Combobox input blurred\n * @defaultValue `true`\n */\n resetSearchTermOnBlur?: boolean\n /**\n * Whether to reset the searchTerm when the Combobox value is selected\n * @defaultValue `true`\n */\n resetSearchTermOnSelect?: boolean\n /**\n * When `true`, disable the default filters\n */\n ignoreFilter?: boolean\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'\nimport { PopperRoot } from '@/Popper'\nimport { type EventHookOn, createEventHook, useVModel } from '@vueuse/core'\nimport { ListboxRoot } from '@/Listbox'\n\nconst props = withDefaults(defineProps<ComboboxRootProps<T>>(), {\n open: undefined,\n resetSearchTermOnBlur: true,\n resetSearchTermOnSelect: true,\n})\nconst emits = defineEmits<ComboboxRootEmits<T>>()\n\ndefineSlots<{\n default: (props: {\n /** Current open state */\n open: typeof open.value\n /** Current active value */\n modelValue: typeof modelValue.value\n }) => any\n}>()\n\nconst { primitiveElement, currentElement: parentElement } = usePrimitiveElement<GenericComponentInstance<typeof ListboxRoot>>()\nconst { multiple, disabled, ignoreFilter, resetSearchTermOnSelect, dir: propDir } = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n // @ts-expect-error ignore the type error here\n defaultValue: props.defaultValue ?? (multiple.value ? [] : undefined),\n passive: (props.modelValue === undefined) as false,\n deep: true,\n}) as Ref<T | T[]>\n\nconst open = useVModel(props, 'open', emits, {\n defaultValue: props.defaultOpen,\n passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nasync function onOpenChange(val: boolean) {\n open.value = val\n filterState.search = ''\n\n if (val) {\n // make sure dom is ready then only highlight the selected\n await nextTick()\n primitiveElement.value?.highlightSelected()\n isUserInputted.value = true\n }\n else {\n isUserInputted.value = false\n }\n\n inputElement.value?.focus()\n setTimeout(() => {\n if (!val && props.resetSearchTermOnBlur)\n resetSearchTerm.trigger()\n }, 1)\n}\n\nconst resetSearchTerm = createEventHook()\nconst isUserInputted = ref(false)\nconst isVirtual = ref(false)\nconst inputElement = ref<HTMLInputElement>()\nconst triggerElement = ref<HTMLElement>()\n\nconst highlightedElement = computed(() => primitiveElement.value?.highlightedElement ?? undefined)\n\nconst allItems = ref<Map<string, string>>(new Map())\nconst allGroups = ref<Map<string, Set<string>>>(new Map())\n\nconst { contains } = useFilter({ sensitivity: 'base' })\nconst filterState = reactive({\n search: '',\n filtered: {\n /** The count of all visible items. */\n count: 0,\n /** Map from visible item id to its search score. */\n items: new Map() as Map<string, number>,\n /** Set of groups with at least one visible item. */\n groups: new Set() as Set<string>,\n },\n})\n\nfunction filterItems() {\n if (!filterState.search || props.ignoreFilter || isVirtual.value) {\n filterState.filtered.count = allItems.value.size\n // Do nothing, each item will know to show itself because search is empty\n return\n }\n\n // Reset the groups\n filterState.filtered.groups = new Set()\n let itemCount = 0\n\n // Check which items should be included\n for (const [id, value] of allItems.value) {\n const score = contains(value, filterState.search)\n filterState.filtered.items.set(id, score ? 1 : 0)\n if (score)\n itemCount++\n }\n\n // Check which groups have at least 1 item shown\n for (const [groupId, group] of allGroups.value) {\n for (const itemId of group) {\n if (filterState.filtered.items.get(itemId)! > 0) {\n filterState.filtered.groups.add(groupId)\n break\n }\n }\n }\n\n filterState.filtered.count = itemCount\n}\n\nwatch([() => filterState.search, () => allItems.value.size], () => {\n filterItems()\n}, { immediate: true })\n\nwatch(() => open.value, () => {\n // nextTick to allow multiple items to be mounted first\n nextTick(() => {\n if (open.value)\n filterItems()\n })\n}, { flush: 'post' })\n\nconst inst = getCurrentInstance()\nonMounted(() => {\n if (inst?.exposed) {\n inst.exposed.highlightItem = primitiveElement.value?.highlightItem\n inst.exposed.highlightFirstItem = primitiveElement.value?.highlightFirstItem\n inst.exposed.highlightSelected = primitiveElement.value?.highlightSelected\n }\n})\n\ndefineExpose({\n filtered: computed(() => filterState.filtered),\n highlightedElement,\n highlightItem: primitiveElement.value?.highlightItem,\n highlightFirstItem: primitiveElement.value?.highlightFirstItem,\n highlightSelected: primitiveElement.value?.highlightSelected,\n})\n\nprovideComboboxRootContext({\n modelValue,\n multiple,\n disabled,\n open,\n onOpenChange,\n contentId: '',\n isUserInputted,\n isVirtual,\n inputElement,\n highlightedElement,\n onInputElementChange: val => inputElement.value = val,\n triggerElement,\n onTriggerElementChange: val => triggerElement.value = val,\n parentElement,\n resetSearchTermOnSelect,\n onResetSearchTerm: resetSearchTerm.on,\n allItems,\n allGroups,\n filterState,\n ignoreFilter,\n})\n</script>\n\n<template>\n <PopperRoot>\n <ListboxRoot\n ref=\"primitiveElement\"\n v-bind=\"$attrs\"\n v-model=\"modelValue\"\n :style=\"{\n pointerEvents: open ? 'auto' : undefined,\n }\"\n :as=\"as\"\n :as-child=\"asChild\"\n :dir=\"dir\"\n :multiple=\"multiple\"\n :name=\"name\"\n :required=\"required\"\n :disabled=\"disabled\"\n :highlight-on-hover=\"true\"\n :by=\"props.by as any\"\n @highlight=\"emits('highlight', $event as any)\"\n >\n <slot\n :open=\"open\"\n :model-value=\"modelValue\"\n />\n </ListboxRoot>\n </PopperRoot>\n</template>\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +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?:
|
|
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?: 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;;;;;;;;;;;;;;;"}
|
|
@@ -1 +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?:
|
|
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?: 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;;;;;;;;;;;;;;"}
|
|
@@ -29,12 +29,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
29
29
|
const { forwardRef, currentElement } = shared_useForwardExpose.useForwardExpose();
|
|
30
30
|
const indicatorTrack = vue.ref();
|
|
31
31
|
const viewport = vue.ref();
|
|
32
|
-
const
|
|
32
|
+
const activeTrigger = vue.ref();
|
|
33
|
+
const { getItems, CollectionSlot } = Collection_Collection.useCollection({ key: "NavigationMenu", isProvider: true });
|
|
34
|
+
vue.watchEffect(() => {
|
|
35
|
+
if (!modelValue.value)
|
|
36
|
+
return;
|
|
37
|
+
const items = getItems().map((i) => i.ref);
|
|
38
|
+
activeTrigger.value = items.find(
|
|
39
|
+
(item) => item.id.includes(modelValue.value)
|
|
40
|
+
);
|
|
41
|
+
});
|
|
33
42
|
NavigationMenu_NavigationMenuRoot.provideNavigationMenuContext({
|
|
34
43
|
...menuContext,
|
|
35
44
|
isRootMenu: false,
|
|
36
45
|
modelValue,
|
|
37
46
|
previousValue,
|
|
47
|
+
activeTrigger,
|
|
38
48
|
orientation: props.orientation,
|
|
39
49
|
rootNavigationMenu: currentElement,
|
|
40
50
|
indicatorTrack,
|