reka-ui 2.0.0 → 2.0.2
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/README.md +1 -1
- package/dist/Accordion/AccordionContent.cjs +1 -1
- package/dist/Accordion/AccordionContent.js +1 -1
- package/dist/DatePicker/DatePickerRoot.cjs +1 -2
- package/dist/DatePicker/DatePickerRoot.cjs.map +1 -1
- package/dist/DatePicker/DatePickerRoot.js +1 -2
- package/dist/DatePicker/DatePickerRoot.js.map +1 -1
- package/dist/Dialog/utils.cjs +1 -1
- package/dist/Dialog/utils.cjs.map +1 -1
- package/dist/Dialog/utils.js +1 -1
- package/dist/Dialog/utils.js.map +1 -1
- package/dist/DismissableLayer/DismissableLayer.cjs.map +1 -1
- package/dist/DismissableLayer/DismissableLayer.js.map +1 -1
- package/dist/Select/SelectContentImpl.cjs.map +1 -1
- package/dist/Select/SelectContentImpl.js.map +1 -1
- package/dist/ToggleGroup/ToggleGroupItem.cjs +0 -2
- package/dist/ToggleGroup/ToggleGroupItem.cjs.map +1 -1
- package/dist/ToggleGroup/ToggleGroupItem.js +0 -2
- package/dist/ToggleGroup/ToggleGroupItem.js.map +1 -1
- package/dist/Toolbar/ToolbarToggleItem.cjs +0 -2
- package/dist/Toolbar/ToolbarToggleItem.cjs.map +1 -1
- package/dist/Toolbar/ToolbarToggleItem.js +0 -2
- package/dist/Toolbar/ToolbarToggleItem.js.map +1 -1
- package/dist/index.d.ts +39 -39
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -50,7 +50,7 @@ For changelog, visit [releases](https://github.com/unovue/reka-ui/releases).
|
|
|
50
50
|
|
|
51
51
|
## Contributing
|
|
52
52
|
|
|
53
|
-
We would love to have your contributions! All PRs
|
|
53
|
+
We would love to have your contributions! All PRs are welcome! We need help building the core components, docs, tests, stories! Join our discord and we will get you up and running!
|
|
54
54
|
|
|
55
55
|
## Dev Setup
|
|
56
56
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const vue = require('vue');
|
|
4
3
|
require('@vueuse/core');
|
|
4
|
+
const vue = require('vue');
|
|
5
5
|
const Accordion_AccordionItem = require('./AccordionItem.cjs');
|
|
6
6
|
const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
|
|
7
7
|
const Collapsible_CollapsibleContent = require('../Collapsible/CollapsibleContent.cjs');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent, openBlock, createBlock, unref, withCtx, renderSlot } from 'vue';
|
|
2
1
|
import '@vueuse/core';
|
|
2
|
+
import { defineComponent, openBlock, createBlock, unref, withCtx, renderSlot } from 'vue';
|
|
3
3
|
import { i as injectAccordionItemContext } from './AccordionItem.js';
|
|
4
4
|
import { u as useForwardExpose } from '../shared/useForwardExpose.js';
|
|
5
5
|
import { _ as _sfc_main$1 } from '../Collapsible/CollapsibleContent.js';
|
|
@@ -136,8 +136,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
136
136
|
}
|
|
137
137
|
},
|
|
138
138
|
onPlaceholderChange(date) {
|
|
139
|
-
|
|
140
|
-
placeholder.value = date.copy();
|
|
139
|
+
placeholder.value = date.copy();
|
|
141
140
|
}
|
|
142
141
|
});
|
|
143
142
|
return (_ctx, _cache) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerRoot.cjs","sources":["../../src/DatePicker/DatePickerRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\n\nimport type { Ref } from 'vue'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { createContext, useDirection } from '@/shared'\nimport { type Granularity, type HourCycle, getDefaultDate } from '@/shared/date'\nimport type { Matcher, WeekDayFormat } from '@/date'\nimport { type CalendarRootProps, type DateFieldRoot, type DateFieldRootProps, PopoverRoot, type PopoverRootEmits, type PopoverRootProps } from '..'\nimport type { Direction } from '@/shared/types'\n\ntype DatePickerRootContext = {\n id: Ref<string | undefined>\n name: Ref<string | undefined>\n minValue: Ref<DateValue | undefined>\n maxValue: Ref<DateValue | undefined>\n hourCycle: Ref<HourCycle | undefined>\n granularity: Ref<Granularity | undefined>\n hideTimeZone: Ref<boolean>\n required: Ref<boolean>\n locale: Ref<string>\n dateFieldRef: Ref<InstanceType<typeof DateFieldRoot> | undefined>\n modelValue: Ref<DateValue | undefined>\n placeholder: Ref<DateValue>\n pagedNavigation: Ref<boolean>\n preventDeselect: Ref<boolean>\n weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>\n weekdayFormat: Ref<WeekDayFormat>\n fixedWeeks: Ref<boolean>\n numberOfMonths: Ref<number>\n disabled: Ref<boolean>\n readonly: Ref<boolean>\n isDateDisabled?: Matcher\n isDateUnavailable?: Matcher\n defaultOpen: Ref<boolean>\n open: Ref<boolean>\n modal: Ref<boolean>\n onDateChange: (date: DateValue | undefined) => void\n onPlaceholderChange: (date: DateValue) => void\n dir: Ref<Direction>\n}\n\nexport type DatePickerRootProps = DateFieldRootProps & PopoverRootProps & Pick<CalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect'>\n\nexport type DatePickerRootEmits = {\n /** Event handler called whenever the model value changes */\n 'update:modelValue': [date: DateValue | undefined]\n /** Event handler called whenever the placeholder value changes */\n 'update:placeholder': [date: DateValue]\n}\n\nexport const [injectDatePickerRootContext, provideDatePickerRootContext]\n = createContext<DatePickerRootContext>('DatePickerRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\n\ndefineOptions({\n inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<DatePickerRootProps>(), {\n defaultValue: undefined,\n defaultOpen: false,\n open: undefined,\n modal: false,\n pagedNavigation: false,\n preventDeselect: false,\n weekStartsOn: 0,\n weekdayFormat: 'narrow',\n fixedWeeks: false,\n numberOfMonths: 1,\n disabled: false,\n readonly: false,\n initialFocus: false,\n placeholder: undefined,\n locale: 'en',\n isDateDisabled: undefined,\n isDateUnavailable: undefined,\n})\nconst emits = defineEmits<DatePickerRootEmits & PopoverRootEmits>()\nconst {\n locale,\n disabled,\n readonly,\n pagedNavigation,\n weekStartsOn,\n weekdayFormat,\n fixedWeeks,\n numberOfMonths,\n preventDeselect,\n isDateDisabled: propsIsDateDisabled,\n isDateUnavailable: propsIsDateUnavailable,\n defaultOpen,\n modal,\n id,\n name,\n required,\n minValue,\n maxValue,\n granularity,\n hideTimeZone,\n hourCycle,\n defaultValue,\n dir: propDir,\n} = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n defaultValue: defaultValue.value,\n passive: (props.modelValue === undefined) as false,\n}) as Ref<DateValue | undefined>\n\nconst defaultDate = computed(() => getDefaultDate({\n defaultPlaceholder: props.placeholder,\n granularity: props.granularity,\n defaultValue: modelValue.value,\n locale: props.locale,\n}))\n\nconst placeholder = useVModel(props, 'placeholder', emits, {\n defaultValue: props.defaultPlaceholder ?? defaultDate.value.copy(),\n passive: (props.placeholder === undefined) as false,\n}) as Ref<DateValue>\n\nconst open = useVModel(props, 'open', emits, {\n defaultValue: defaultOpen.value,\n passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst dateFieldRef = ref<InstanceType<typeof DateFieldRoot> | undefined>()\n\nwatch(modelValue, (value) => {\n if (value && value.compare(placeholder.value) !== 0) {\n placeholder.value = value.copy()\n }\n})\n\nprovideDatePickerRootContext({\n isDateUnavailable: propsIsDateUnavailable.value,\n isDateDisabled: propsIsDateDisabled.value,\n locale,\n disabled,\n pagedNavigation,\n weekStartsOn,\n weekdayFormat,\n fixedWeeks,\n numberOfMonths,\n readonly,\n preventDeselect,\n modelValue,\n placeholder,\n defaultOpen,\n modal,\n open,\n id,\n name,\n required,\n minValue,\n maxValue,\n granularity,\n hideTimeZone,\n hourCycle,\n dateFieldRef,\n dir,\n onDateChange(date: DateValue | undefined) {\n if (!date || !modelValue.value) {\n modelValue.value = date?.copy() ?? undefined\n }\n else if (!preventDeselect.value && date && modelValue.value.compare(date) === 0) {\n modelValue.value = undefined\n }\n else {\n modelValue.value = date.copy()\n }\n },\n onPlaceholderChange(date: DateValue) {\n
|
|
1
|
+
{"version":3,"file":"DatePickerRoot.cjs","sources":["../../src/DatePicker/DatePickerRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\n\nimport type { Ref } from 'vue'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { createContext, useDirection } from '@/shared'\nimport { type Granularity, type HourCycle, getDefaultDate } from '@/shared/date'\nimport type { Matcher, WeekDayFormat } from '@/date'\nimport { type CalendarRootProps, type DateFieldRoot, type DateFieldRootProps, PopoverRoot, type PopoverRootEmits, type PopoverRootProps } from '..'\nimport type { Direction } from '@/shared/types'\n\ntype DatePickerRootContext = {\n id: Ref<string | undefined>\n name: Ref<string | undefined>\n minValue: Ref<DateValue | undefined>\n maxValue: Ref<DateValue | undefined>\n hourCycle: Ref<HourCycle | undefined>\n granularity: Ref<Granularity | undefined>\n hideTimeZone: Ref<boolean>\n required: Ref<boolean>\n locale: Ref<string>\n dateFieldRef: Ref<InstanceType<typeof DateFieldRoot> | undefined>\n modelValue: Ref<DateValue | undefined>\n placeholder: Ref<DateValue>\n pagedNavigation: Ref<boolean>\n preventDeselect: Ref<boolean>\n weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>\n weekdayFormat: Ref<WeekDayFormat>\n fixedWeeks: Ref<boolean>\n numberOfMonths: Ref<number>\n disabled: Ref<boolean>\n readonly: Ref<boolean>\n isDateDisabled?: Matcher\n isDateUnavailable?: Matcher\n defaultOpen: Ref<boolean>\n open: Ref<boolean>\n modal: Ref<boolean>\n onDateChange: (date: DateValue | undefined) => void\n onPlaceholderChange: (date: DateValue) => void\n dir: Ref<Direction>\n}\n\nexport type DatePickerRootProps = DateFieldRootProps & PopoverRootProps & Pick<CalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect'>\n\nexport type DatePickerRootEmits = {\n /** Event handler called whenever the model value changes */\n 'update:modelValue': [date: DateValue | undefined]\n /** Event handler called whenever the placeholder value changes */\n 'update:placeholder': [date: DateValue]\n}\n\nexport const [injectDatePickerRootContext, provideDatePickerRootContext]\n = createContext<DatePickerRootContext>('DatePickerRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\n\ndefineOptions({\n inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<DatePickerRootProps>(), {\n defaultValue: undefined,\n defaultOpen: false,\n open: undefined,\n modal: false,\n pagedNavigation: false,\n preventDeselect: false,\n weekStartsOn: 0,\n weekdayFormat: 'narrow',\n fixedWeeks: false,\n numberOfMonths: 1,\n disabled: false,\n readonly: false,\n initialFocus: false,\n placeholder: undefined,\n locale: 'en',\n isDateDisabled: undefined,\n isDateUnavailable: undefined,\n})\nconst emits = defineEmits<DatePickerRootEmits & PopoverRootEmits>()\nconst {\n locale,\n disabled,\n readonly,\n pagedNavigation,\n weekStartsOn,\n weekdayFormat,\n fixedWeeks,\n numberOfMonths,\n preventDeselect,\n isDateDisabled: propsIsDateDisabled,\n isDateUnavailable: propsIsDateUnavailable,\n defaultOpen,\n modal,\n id,\n name,\n required,\n minValue,\n maxValue,\n granularity,\n hideTimeZone,\n hourCycle,\n defaultValue,\n dir: propDir,\n} = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n defaultValue: defaultValue.value,\n passive: (props.modelValue === undefined) as false,\n}) as Ref<DateValue | undefined>\n\nconst defaultDate = computed(() => getDefaultDate({\n defaultPlaceholder: props.placeholder,\n granularity: props.granularity,\n defaultValue: modelValue.value,\n locale: props.locale,\n}))\n\nconst placeholder = useVModel(props, 'placeholder', emits, {\n defaultValue: props.defaultPlaceholder ?? defaultDate.value.copy(),\n passive: (props.placeholder === undefined) as false,\n}) as Ref<DateValue>\n\nconst open = useVModel(props, 'open', emits, {\n defaultValue: defaultOpen.value,\n passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst dateFieldRef = ref<InstanceType<typeof DateFieldRoot> | undefined>()\n\nwatch(modelValue, (value) => {\n if (value && value.compare(placeholder.value) !== 0) {\n placeholder.value = value.copy()\n }\n})\n\nprovideDatePickerRootContext({\n isDateUnavailable: propsIsDateUnavailable.value,\n isDateDisabled: propsIsDateDisabled.value,\n locale,\n disabled,\n pagedNavigation,\n weekStartsOn,\n weekdayFormat,\n fixedWeeks,\n numberOfMonths,\n readonly,\n preventDeselect,\n modelValue,\n placeholder,\n defaultOpen,\n modal,\n open,\n id,\n name,\n required,\n minValue,\n maxValue,\n granularity,\n hideTimeZone,\n hourCycle,\n dateFieldRef,\n dir,\n onDateChange(date: DateValue | undefined) {\n if (!date || !modelValue.value) {\n modelValue.value = date?.copy() ?? undefined\n }\n else if (!preventDeselect.value && date && modelValue.value.compare(date) === 0) {\n modelValue.value = undefined\n }\n else {\n modelValue.value = date.copy()\n }\n },\n onPlaceholderChange(date: DateValue) {\n placeholder.value = date.copy()\n },\n})\n</script>\n\n<template>\n <PopoverRoot\n v-model:open=\"open\"\n :default-open=\"defaultOpen\"\n :modal=\"modal\"\n >\n <slot />\n </PopoverRoot>\n</template>\n"],"names":["createContext","toRefs","useDirection","useVModel","computed","getDefaultDate","ref","watch"],"mappings":"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"}
|
|
@@ -134,8 +134,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
134
134
|
}
|
|
135
135
|
},
|
|
136
136
|
onPlaceholderChange(date) {
|
|
137
|
-
|
|
138
|
-
placeholder.value = date.copy();
|
|
137
|
+
placeholder.value = date.copy();
|
|
139
138
|
}
|
|
140
139
|
});
|
|
141
140
|
return (_ctx, _cache) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerRoot.js","sources":["../../src/DatePicker/DatePickerRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\n\nimport type { Ref } from 'vue'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { createContext, useDirection } from '@/shared'\nimport { type Granularity, type HourCycle, getDefaultDate } from '@/shared/date'\nimport type { Matcher, WeekDayFormat } from '@/date'\nimport { type CalendarRootProps, type DateFieldRoot, type DateFieldRootProps, PopoverRoot, type PopoverRootEmits, type PopoverRootProps } from '..'\nimport type { Direction } from '@/shared/types'\n\ntype DatePickerRootContext = {\n id: Ref<string | undefined>\n name: Ref<string | undefined>\n minValue: Ref<DateValue | undefined>\n maxValue: Ref<DateValue | undefined>\n hourCycle: Ref<HourCycle | undefined>\n granularity: Ref<Granularity | undefined>\n hideTimeZone: Ref<boolean>\n required: Ref<boolean>\n locale: Ref<string>\n dateFieldRef: Ref<InstanceType<typeof DateFieldRoot> | undefined>\n modelValue: Ref<DateValue | undefined>\n placeholder: Ref<DateValue>\n pagedNavigation: Ref<boolean>\n preventDeselect: Ref<boolean>\n weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>\n weekdayFormat: Ref<WeekDayFormat>\n fixedWeeks: Ref<boolean>\n numberOfMonths: Ref<number>\n disabled: Ref<boolean>\n readonly: Ref<boolean>\n isDateDisabled?: Matcher\n isDateUnavailable?: Matcher\n defaultOpen: Ref<boolean>\n open: Ref<boolean>\n modal: Ref<boolean>\n onDateChange: (date: DateValue | undefined) => void\n onPlaceholderChange: (date: DateValue) => void\n dir: Ref<Direction>\n}\n\nexport type DatePickerRootProps = DateFieldRootProps & PopoverRootProps & Pick<CalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect'>\n\nexport type DatePickerRootEmits = {\n /** Event handler called whenever the model value changes */\n 'update:modelValue': [date: DateValue | undefined]\n /** Event handler called whenever the placeholder value changes */\n 'update:placeholder': [date: DateValue]\n}\n\nexport const [injectDatePickerRootContext, provideDatePickerRootContext]\n = createContext<DatePickerRootContext>('DatePickerRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\n\ndefineOptions({\n inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<DatePickerRootProps>(), {\n defaultValue: undefined,\n defaultOpen: false,\n open: undefined,\n modal: false,\n pagedNavigation: false,\n preventDeselect: false,\n weekStartsOn: 0,\n weekdayFormat: 'narrow',\n fixedWeeks: false,\n numberOfMonths: 1,\n disabled: false,\n readonly: false,\n initialFocus: false,\n placeholder: undefined,\n locale: 'en',\n isDateDisabled: undefined,\n isDateUnavailable: undefined,\n})\nconst emits = defineEmits<DatePickerRootEmits & PopoverRootEmits>()\nconst {\n locale,\n disabled,\n readonly,\n pagedNavigation,\n weekStartsOn,\n weekdayFormat,\n fixedWeeks,\n numberOfMonths,\n preventDeselect,\n isDateDisabled: propsIsDateDisabled,\n isDateUnavailable: propsIsDateUnavailable,\n defaultOpen,\n modal,\n id,\n name,\n required,\n minValue,\n maxValue,\n granularity,\n hideTimeZone,\n hourCycle,\n defaultValue,\n dir: propDir,\n} = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n defaultValue: defaultValue.value,\n passive: (props.modelValue === undefined) as false,\n}) as Ref<DateValue | undefined>\n\nconst defaultDate = computed(() => getDefaultDate({\n defaultPlaceholder: props.placeholder,\n granularity: props.granularity,\n defaultValue: modelValue.value,\n locale: props.locale,\n}))\n\nconst placeholder = useVModel(props, 'placeholder', emits, {\n defaultValue: props.defaultPlaceholder ?? defaultDate.value.copy(),\n passive: (props.placeholder === undefined) as false,\n}) as Ref<DateValue>\n\nconst open = useVModel(props, 'open', emits, {\n defaultValue: defaultOpen.value,\n passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst dateFieldRef = ref<InstanceType<typeof DateFieldRoot> | undefined>()\n\nwatch(modelValue, (value) => {\n if (value && value.compare(placeholder.value) !== 0) {\n placeholder.value = value.copy()\n }\n})\n\nprovideDatePickerRootContext({\n isDateUnavailable: propsIsDateUnavailable.value,\n isDateDisabled: propsIsDateDisabled.value,\n locale,\n disabled,\n pagedNavigation,\n weekStartsOn,\n weekdayFormat,\n fixedWeeks,\n numberOfMonths,\n readonly,\n preventDeselect,\n modelValue,\n placeholder,\n defaultOpen,\n modal,\n open,\n id,\n name,\n required,\n minValue,\n maxValue,\n granularity,\n hideTimeZone,\n hourCycle,\n dateFieldRef,\n dir,\n onDateChange(date: DateValue | undefined) {\n if (!date || !modelValue.value) {\n modelValue.value = date?.copy() ?? undefined\n }\n else if (!preventDeselect.value && date && modelValue.value.compare(date) === 0) {\n modelValue.value = undefined\n }\n else {\n modelValue.value = date.copy()\n }\n },\n onPlaceholderChange(date: DateValue) {\n
|
|
1
|
+
{"version":3,"file":"DatePickerRoot.js","sources":["../../src/DatePicker/DatePickerRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\n\nimport type { Ref } from 'vue'\nimport { computed, ref, toRefs, watch } from 'vue'\nimport { createContext, useDirection } from '@/shared'\nimport { type Granularity, type HourCycle, getDefaultDate } from '@/shared/date'\nimport type { Matcher, WeekDayFormat } from '@/date'\nimport { type CalendarRootProps, type DateFieldRoot, type DateFieldRootProps, PopoverRoot, type PopoverRootEmits, type PopoverRootProps } from '..'\nimport type { Direction } from '@/shared/types'\n\ntype DatePickerRootContext = {\n id: Ref<string | undefined>\n name: Ref<string | undefined>\n minValue: Ref<DateValue | undefined>\n maxValue: Ref<DateValue | undefined>\n hourCycle: Ref<HourCycle | undefined>\n granularity: Ref<Granularity | undefined>\n hideTimeZone: Ref<boolean>\n required: Ref<boolean>\n locale: Ref<string>\n dateFieldRef: Ref<InstanceType<typeof DateFieldRoot> | undefined>\n modelValue: Ref<DateValue | undefined>\n placeholder: Ref<DateValue>\n pagedNavigation: Ref<boolean>\n preventDeselect: Ref<boolean>\n weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>\n weekdayFormat: Ref<WeekDayFormat>\n fixedWeeks: Ref<boolean>\n numberOfMonths: Ref<number>\n disabled: Ref<boolean>\n readonly: Ref<boolean>\n isDateDisabled?: Matcher\n isDateUnavailable?: Matcher\n defaultOpen: Ref<boolean>\n open: Ref<boolean>\n modal: Ref<boolean>\n onDateChange: (date: DateValue | undefined) => void\n onPlaceholderChange: (date: DateValue) => void\n dir: Ref<Direction>\n}\n\nexport type DatePickerRootProps = DateFieldRootProps & PopoverRootProps & Pick<CalendarRootProps, 'isDateDisabled' | 'pagedNavigation' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'preventDeselect'>\n\nexport type DatePickerRootEmits = {\n /** Event handler called whenever the model value changes */\n 'update:modelValue': [date: DateValue | undefined]\n /** Event handler called whenever the placeholder value changes */\n 'update:placeholder': [date: DateValue]\n}\n\nexport const [injectDatePickerRootContext, provideDatePickerRootContext]\n = createContext<DatePickerRootContext>('DatePickerRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\n\ndefineOptions({\n inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<DatePickerRootProps>(), {\n defaultValue: undefined,\n defaultOpen: false,\n open: undefined,\n modal: false,\n pagedNavigation: false,\n preventDeselect: false,\n weekStartsOn: 0,\n weekdayFormat: 'narrow',\n fixedWeeks: false,\n numberOfMonths: 1,\n disabled: false,\n readonly: false,\n initialFocus: false,\n placeholder: undefined,\n locale: 'en',\n isDateDisabled: undefined,\n isDateUnavailable: undefined,\n})\nconst emits = defineEmits<DatePickerRootEmits & PopoverRootEmits>()\nconst {\n locale,\n disabled,\n readonly,\n pagedNavigation,\n weekStartsOn,\n weekdayFormat,\n fixedWeeks,\n numberOfMonths,\n preventDeselect,\n isDateDisabled: propsIsDateDisabled,\n isDateUnavailable: propsIsDateUnavailable,\n defaultOpen,\n modal,\n id,\n name,\n required,\n minValue,\n maxValue,\n granularity,\n hideTimeZone,\n hourCycle,\n defaultValue,\n dir: propDir,\n} = toRefs(props)\n\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n defaultValue: defaultValue.value,\n passive: (props.modelValue === undefined) as false,\n}) as Ref<DateValue | undefined>\n\nconst defaultDate = computed(() => getDefaultDate({\n defaultPlaceholder: props.placeholder,\n granularity: props.granularity,\n defaultValue: modelValue.value,\n locale: props.locale,\n}))\n\nconst placeholder = useVModel(props, 'placeholder', emits, {\n defaultValue: props.defaultPlaceholder ?? defaultDate.value.copy(),\n passive: (props.placeholder === undefined) as false,\n}) as Ref<DateValue>\n\nconst open = useVModel(props, 'open', emits, {\n defaultValue: defaultOpen.value,\n passive: (props.open === undefined) as false,\n}) as Ref<boolean>\n\nconst dateFieldRef = ref<InstanceType<typeof DateFieldRoot> | undefined>()\n\nwatch(modelValue, (value) => {\n if (value && value.compare(placeholder.value) !== 0) {\n placeholder.value = value.copy()\n }\n})\n\nprovideDatePickerRootContext({\n isDateUnavailable: propsIsDateUnavailable.value,\n isDateDisabled: propsIsDateDisabled.value,\n locale,\n disabled,\n pagedNavigation,\n weekStartsOn,\n weekdayFormat,\n fixedWeeks,\n numberOfMonths,\n readonly,\n preventDeselect,\n modelValue,\n placeholder,\n defaultOpen,\n modal,\n open,\n id,\n name,\n required,\n minValue,\n maxValue,\n granularity,\n hideTimeZone,\n hourCycle,\n dateFieldRef,\n dir,\n onDateChange(date: DateValue | undefined) {\n if (!date || !modelValue.value) {\n modelValue.value = date?.copy() ?? undefined\n }\n else if (!preventDeselect.value && date && modelValue.value.compare(date) === 0) {\n modelValue.value = undefined\n }\n else {\n modelValue.value = date.copy()\n }\n },\n onPlaceholderChange(date: DateValue) {\n placeholder.value = date.copy()\n },\n})\n</script>\n\n<template>\n <PopoverRoot\n v-model:open=\"open\"\n :default-open=\"defaultOpen\"\n :modal=\"modal\"\n >\n <slot />\n </PopoverRoot>\n</template>\n"],"names":[],"mappings":"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"}
|
package/dist/Dialog/utils.cjs
CHANGED
|
@@ -16,7 +16,7 @@ function useWarning({
|
|
|
16
16
|
|
|
17
17
|
If you want to hide the \`${titleName}\`, you can wrap it with our VisuallyHidden component.
|
|
18
18
|
|
|
19
|
-
For more information, see https://www.reka.com/components/${componentLink}`;
|
|
19
|
+
For more information, see https://www.reka-ui.com/docs/components/${componentLink}`;
|
|
20
20
|
const DESCRIPTION_MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby="undefined"\` for ${contentName}.`;
|
|
21
21
|
vue.onMounted(() => {
|
|
22
22
|
const hasTitle = document.getElementById(titleId);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs","sources":["../../src/Dialog/utils.ts"],"sourcesContent":["import { type Ref, onMounted } from 'vue'\n\nconst DEFAULT_TITLE_NAME = 'DialogTitle'\nconst DEFAULT_CONTENT_NAME = 'DialogContent'\n\nexport type WarningProps = {\n titleName?: string\n contentName?: string\n componentLink?: string\n titleId: string\n descriptionId: string\n contentElement: Ref<HTMLElement | undefined>\n}\n\nexport function useWarning({\n titleName = DEFAULT_TITLE_NAME,\n contentName = DEFAULT_CONTENT_NAME,\n componentLink = 'dialog.html#title',\n titleId,\n descriptionId,\n contentElement,\n}: WarningProps) {\n const TITLE_MESSAGE = `Warning: \\`${contentName}\\` requires a \\`${titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://www.reka.com/components/${componentLink}`\n\n const DESCRIPTION_MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby=\"undefined\"\\` for ${contentName}.`\n\n onMounted(() => {\n const hasTitle = document.getElementById(titleId)\n if (!hasTitle)\n console.warn(TITLE_MESSAGE)\n\n const describedById = contentElement.value?.getAttribute('aria-describedby')\n // if we have an id and the user hasn't set aria-describedby=\"undefined\"\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId)\n if (!hasDescription)\n console.warn(DESCRIPTION_MESSAGE)\n }\n })\n}\n"],"names":["onMounted"],"mappings":";;;;AAEA,MAAM,kBAAqB,GAAA,aAAA;AAC3B,MAAM,oBAAuB,GAAA,eAAA;AAWtB,SAAS,UAAW,CAAA;AAAA,EACzB,SAAY,GAAA,kBAAA;AAAA,EACZ,WAAc,GAAA,oBAAA;AAAA,EACd,aAAgB,GAAA,mBAAA;AAAA,EAChB,OAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAiB,EAAA;AACf,EAAA,MAAM,aAAgB,GAAA,CAAA,WAAA,EAAc,WAAW,CAAA,gBAAA,EAAmB,SAAS,CAAA;;AAAA,0BAAA,EAEjD,SAAS,CAAA;;AAAA,
|
|
1
|
+
{"version":3,"file":"utils.cjs","sources":["../../src/Dialog/utils.ts"],"sourcesContent":["import { type Ref, onMounted } from 'vue'\n\nconst DEFAULT_TITLE_NAME = 'DialogTitle'\nconst DEFAULT_CONTENT_NAME = 'DialogContent'\n\nexport type WarningProps = {\n titleName?: string\n contentName?: string\n componentLink?: string\n titleId: string\n descriptionId: string\n contentElement: Ref<HTMLElement | undefined>\n}\n\nexport function useWarning({\n titleName = DEFAULT_TITLE_NAME,\n contentName = DEFAULT_CONTENT_NAME,\n componentLink = 'dialog.html#title',\n titleId,\n descriptionId,\n contentElement,\n}: WarningProps) {\n const TITLE_MESSAGE = `Warning: \\`${contentName}\\` requires a \\`${titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://www.reka-ui.com/docs/components/${componentLink}`\n\n const DESCRIPTION_MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby=\"undefined\"\\` for ${contentName}.`\n\n onMounted(() => {\n const hasTitle = document.getElementById(titleId)\n if (!hasTitle)\n console.warn(TITLE_MESSAGE)\n\n const describedById = contentElement.value?.getAttribute('aria-describedby')\n // if we have an id and the user hasn't set aria-describedby=\"undefined\"\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId)\n if (!hasDescription)\n console.warn(DESCRIPTION_MESSAGE)\n }\n })\n}\n"],"names":["onMounted"],"mappings":";;;;AAEA,MAAM,kBAAqB,GAAA,aAAA;AAC3B,MAAM,oBAAuB,GAAA,eAAA;AAWtB,SAAS,UAAW,CAAA;AAAA,EACzB,SAAY,GAAA,kBAAA;AAAA,EACZ,WAAc,GAAA,oBAAA;AAAA,EACd,aAAgB,GAAA,mBAAA;AAAA,EAChB,OAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAiB,EAAA;AACf,EAAA,MAAM,aAAgB,GAAA,CAAA,WAAA,EAAc,WAAW,CAAA,gBAAA,EAAmB,SAAS,CAAA;;AAAA,0BAAA,EAEjD,SAAS,CAAA;;AAAA,kEAAA,EAE+B,aAAa,CAAA,CAAA;AAE/E,EAAM,MAAA,mBAAA,GAAsB,4EAA4E,WAAW,CAAA,CAAA,CAAA;AAEnH,EAAAA,aAAA,CAAU,MAAM;AACd,IAAM,MAAA,QAAA,GAAW,QAAS,CAAA,cAAA,CAAe,OAAO,CAAA;AAChD,IAAA,IAAI,CAAC,QAAA;AACH,MAAA,OAAA,CAAQ,KAAK,aAAa,CAAA;AAE5B,IAAA,MAAM,aAAgB,GAAA,cAAA,CAAe,KAAO,EAAA,YAAA,CAAa,kBAAkB,CAAA;AAE3E,IAAA,IAAI,iBAAiB,aAAe,EAAA;AAClC,MAAM,MAAA,cAAA,GAAiB,QAAS,CAAA,cAAA,CAAe,aAAa,CAAA;AAC5D,MAAA,IAAI,CAAC,cAAA;AACH,QAAA,OAAA,CAAQ,KAAK,mBAAmB,CAAA;AAAA;AACpC,GACD,CAAA;AACH;;;;"}
|
package/dist/Dialog/utils.js
CHANGED
|
@@ -14,7 +14,7 @@ function useWarning({
|
|
|
14
14
|
|
|
15
15
|
If you want to hide the \`${titleName}\`, you can wrap it with our VisuallyHidden component.
|
|
16
16
|
|
|
17
|
-
For more information, see https://www.reka.com/components/${componentLink}`;
|
|
17
|
+
For more information, see https://www.reka-ui.com/docs/components/${componentLink}`;
|
|
18
18
|
const DESCRIPTION_MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby="undefined"\` for ${contentName}.`;
|
|
19
19
|
onMounted(() => {
|
|
20
20
|
const hasTitle = document.getElementById(titleId);
|
package/dist/Dialog/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../src/Dialog/utils.ts"],"sourcesContent":["import { type Ref, onMounted } from 'vue'\n\nconst DEFAULT_TITLE_NAME = 'DialogTitle'\nconst DEFAULT_CONTENT_NAME = 'DialogContent'\n\nexport type WarningProps = {\n titleName?: string\n contentName?: string\n componentLink?: string\n titleId: string\n descriptionId: string\n contentElement: Ref<HTMLElement | undefined>\n}\n\nexport function useWarning({\n titleName = DEFAULT_TITLE_NAME,\n contentName = DEFAULT_CONTENT_NAME,\n componentLink = 'dialog.html#title',\n titleId,\n descriptionId,\n contentElement,\n}: WarningProps) {\n const TITLE_MESSAGE = `Warning: \\`${contentName}\\` requires a \\`${titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://www.reka.com/components/${componentLink}`\n\n const DESCRIPTION_MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby=\"undefined\"\\` for ${contentName}.`\n\n onMounted(() => {\n const hasTitle = document.getElementById(titleId)\n if (!hasTitle)\n console.warn(TITLE_MESSAGE)\n\n const describedById = contentElement.value?.getAttribute('aria-describedby')\n // if we have an id and the user hasn't set aria-describedby=\"undefined\"\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId)\n if (!hasDescription)\n console.warn(DESCRIPTION_MESSAGE)\n }\n })\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAqB,GAAA,aAAA;AAC3B,MAAM,oBAAuB,GAAA,eAAA;AAWtB,SAAS,UAAW,CAAA;AAAA,EACzB,SAAY,GAAA,kBAAA;AAAA,EACZ,WAAc,GAAA,oBAAA;AAAA,EACd,aAAgB,GAAA,mBAAA;AAAA,EAChB,OAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAiB,EAAA;AACf,EAAA,MAAM,aAAgB,GAAA,CAAA,WAAA,EAAc,WAAW,CAAA,gBAAA,EAAmB,SAAS,CAAA;;AAAA,0BAAA,EAEjD,SAAS,CAAA;;AAAA,
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../src/Dialog/utils.ts"],"sourcesContent":["import { type Ref, onMounted } from 'vue'\n\nconst DEFAULT_TITLE_NAME = 'DialogTitle'\nconst DEFAULT_CONTENT_NAME = 'DialogContent'\n\nexport type WarningProps = {\n titleName?: string\n contentName?: string\n componentLink?: string\n titleId: string\n descriptionId: string\n contentElement: Ref<HTMLElement | undefined>\n}\n\nexport function useWarning({\n titleName = DEFAULT_TITLE_NAME,\n contentName = DEFAULT_CONTENT_NAME,\n componentLink = 'dialog.html#title',\n titleId,\n descriptionId,\n contentElement,\n}: WarningProps) {\n const TITLE_MESSAGE = `Warning: \\`${contentName}\\` requires a \\`${titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://www.reka-ui.com/docs/components/${componentLink}`\n\n const DESCRIPTION_MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby=\"undefined\"\\` for ${contentName}.`\n\n onMounted(() => {\n const hasTitle = document.getElementById(titleId)\n if (!hasTitle)\n console.warn(TITLE_MESSAGE)\n\n const describedById = contentElement.value?.getAttribute('aria-describedby')\n // if we have an id and the user hasn't set aria-describedby=\"undefined\"\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId)\n if (!hasDescription)\n console.warn(DESCRIPTION_MESSAGE)\n }\n })\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAqB,GAAA,aAAA;AAC3B,MAAM,oBAAuB,GAAA,eAAA;AAWtB,SAAS,UAAW,CAAA;AAAA,EACzB,SAAY,GAAA,kBAAA;AAAA,EACZ,WAAc,GAAA,oBAAA;AAAA,EACd,aAAgB,GAAA,mBAAA;AAAA,EAChB,OAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAiB,EAAA;AACf,EAAA,MAAM,aAAgB,GAAA,CAAA,WAAA,EAAc,WAAW,CAAA,gBAAA,EAAmB,SAAS,CAAA;;AAAA,0BAAA,EAEjD,SAAS,CAAA;;AAAA,kEAAA,EAE+B,aAAa,CAAA,CAAA;AAE/E,EAAM,MAAA,mBAAA,GAAsB,4EAA4E,WAAW,CAAA,CAAA,CAAA;AAEnH,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,QAAA,GAAW,QAAS,CAAA,cAAA,CAAe,OAAO,CAAA;AAChD,IAAA,IAAI,CAAC,QAAA;AACH,MAAA,OAAA,CAAQ,KAAK,aAAa,CAAA;AAE5B,IAAA,MAAM,aAAgB,GAAA,cAAA,CAAe,KAAO,EAAA,YAAA,CAAa,kBAAkB,CAAA;AAE3E,IAAA,IAAI,iBAAiB,aAAe,EAAA;AAClC,MAAM,MAAA,cAAA,GAAiB,QAAS,CAAA,cAAA,CAAe,aAAa,CAAA;AAC5D,MAAA,IAAI,CAAC,cAAA;AACH,QAAA,OAAA,CAAQ,KAAK,mBAAmB,CAAA;AAAA;AACpC,GACD,CAAA;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DismissableLayer.cjs","sources":["../../src/DismissableLayer/DismissableLayer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n computed,\n nextTick,\n reactive,\n watchEffect,\n} from 'vue'\n\nimport type { PrimitiveProps } from '@/Primitive'\nimport type {\n FocusOutsideEvent,\n PointerDownOutsideEvent,\n} from './utils'\nimport { useForwardExpose } from '@/shared'\n\nexport interface DismissableLayerProps extends PrimitiveProps {\n /**\n * When `true`, hover/focus/click interactions will be disabled on elements outside\n * the `DismissableLayer`. Users will need to click twice on outside elements to\n * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n */\n disableOutsidePointerEvents?: boolean\n}\n\nexport type DismissableLayerEmits = {\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n escapeKeyDown: [event: KeyboardEvent]\n /**\n * Event handler called when
|
|
1
|
+
{"version":3,"file":"DismissableLayer.cjs","sources":["../../src/DismissableLayer/DismissableLayer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n computed,\n nextTick,\n reactive,\n watchEffect,\n} from 'vue'\n\nimport type { PrimitiveProps } from '@/Primitive'\nimport type {\n FocusOutsideEvent,\n PointerDownOutsideEvent,\n} from './utils'\nimport { useForwardExpose } from '@/shared'\n\nexport interface DismissableLayerProps extends PrimitiveProps {\n /**\n * When `true`, hover/focus/click interactions will be disabled on elements outside\n * the `DismissableLayer`. Users will need to click twice on outside elements to\n * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n */\n disableOutsidePointerEvents?: boolean\n}\n\nexport type DismissableLayerEmits = {\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n escapeKeyDown: [event: KeyboardEvent]\n /**\n * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n pointerDownOutside: [event: PointerDownOutsideEvent]\n /**\n * Event handler called when the focus moves outside of the `DismissableLayer`.\n * Can be prevented.\n */\n focusOutside: [ event: FocusOutsideEvent]\n /**\n * Event handler called when an interaction happens outside the `DismissableLayer`.\n * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n * Can be prevented.\n */\n interactOutside: [ event: PointerDownOutsideEvent | FocusOutsideEvent]\n}\n\nexport type DismissableLayerPrivateEmits = DismissableLayerEmits & {\n /**\n * Handler called when the `DismissableLayer` should be dismissed\n */\n dismiss: []\n}\n\nexport const context = reactive({\n layersRoot: new Set<HTMLElement>(),\n layersWithOutsidePointerEventsDisabled: new Set<HTMLElement>(),\n branches: new Set<HTMLElement>(),\n})\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke } from '@vueuse/core'\nimport {\n useFocusOutside,\n usePointerDownOutside,\n} from './utils'\nimport {\n Primitive,\n} from '@/Primitive'\n\nconst props = withDefaults(defineProps<DismissableLayerProps>(), {\n disableOutsidePointerEvents: false,\n})\n\nconst emits = defineEmits<DismissableLayerPrivateEmits>()\n\nconst { forwardRef, currentElement: layerElement } = useForwardExpose()\nconst ownerDocument = computed(\n () => layerElement.value?.ownerDocument ?? globalThis.document,\n)\n\nconst layers = computed(() => context.layersRoot)\n\nconst index = computed(() => {\n return layerElement.value\n ? Array.from(layers.value).indexOf(layerElement.value)\n : -1\n})\n\nconst isBodyPointerEventsDisabled = computed(() => {\n return context.layersWithOutsidePointerEventsDisabled.size > 0\n})\n\nconst isPointerEventsEnabled = computed(() => {\n const localLayers = Array.from(layers.value)\n const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1)\n const highestLayerWithOutsidePointerEventsDisabledIndex = localLayers.indexOf(highestLayerWithOutsidePointerEventsDisabled)\n\n return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex\n})\n\nconst pointerDownOutside = usePointerDownOutside(async (event) => {\n const isPointerDownOnBranch = [...context.branches].some(branch =>\n branch?.contains(event.target as HTMLElement),\n )\n\n if (!isPointerEventsEnabled.value || isPointerDownOnBranch)\n return\n emits('pointerDownOutside', event)\n emits('interactOutside', event)\n await nextTick()\n if (!event.defaultPrevented)\n emits('dismiss')\n}, layerElement)\n\nconst focusOutside = useFocusOutside((event) => {\n const isFocusInBranch = [...context.branches].some(branch =>\n branch?.contains(event.target as HTMLElement),\n )\n\n if (isFocusInBranch)\n return\n emits('focusOutside', event)\n emits('interactOutside', event)\n if (!event.defaultPrevented)\n emits('dismiss')\n}, layerElement)\n\nonKeyStroke('Escape', (event) => {\n const isHighestLayer = index.value === layers.value.size - 1\n if (!isHighestLayer)\n return\n emits('escapeKeyDown', event)\n if (!event.defaultPrevented)\n emits('dismiss')\n})\n\nlet originalBodyPointerEvents: string\nwatchEffect((cleanupFn) => {\n if (!layerElement.value)\n return\n if (props.disableOutsidePointerEvents) {\n if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents\n ownerDocument.value.body.style.pointerEvents = 'none'\n }\n context.layersWithOutsidePointerEventsDisabled.add(layerElement.value)\n }\n layers.value.add(layerElement.value)\n\n cleanupFn(() => {\n if (\n props.disableOutsidePointerEvents\n && context.layersWithOutsidePointerEventsDisabled.size === 1\n ) {\n ownerDocument.value.body.style.pointerEvents = originalBodyPointerEvents\n }\n })\n})\n\nwatchEffect((cleanupFn) => {\n cleanupFn(() => {\n if (!layerElement.value)\n return\n layers.value.delete(layerElement.value)\n context.layersWithOutsidePointerEventsDisabled.delete(layerElement.value)\n })\n})\n</script>\n\n<template>\n <Primitive\n :ref=\"forwardRef\"\n :as-child=\"asChild\"\n :as=\"as\"\n data-dismissable-layer\n :style=\"{\n pointerEvents: isBodyPointerEventsDisabled\n ? isPointerEventsEnabled\n ? 'auto'\n : 'none'\n : undefined,\n }\"\n @focus.capture=\"focusOutside.onFocusCapture\"\n @blur.capture=\"focusOutside.onBlurCapture\"\n @pointerdown.capture=\"pointerDownOutside.onPointerDownCapture\"\n >\n <slot />\n </Primitive>\n</template>\n"],"names":["reactive","useForwardExpose","computed","usePointerDownOutside","nextTick","useFocusOutside","onKeyStroke","watchEffect"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DismissableLayer.js","sources":["../../src/DismissableLayer/DismissableLayer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n computed,\n nextTick,\n reactive,\n watchEffect,\n} from 'vue'\n\nimport type { PrimitiveProps } from '@/Primitive'\nimport type {\n FocusOutsideEvent,\n PointerDownOutsideEvent,\n} from './utils'\nimport { useForwardExpose } from '@/shared'\n\nexport interface DismissableLayerProps extends PrimitiveProps {\n /**\n * When `true`, hover/focus/click interactions will be disabled on elements outside\n * the `DismissableLayer`. Users will need to click twice on outside elements to\n * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n */\n disableOutsidePointerEvents?: boolean\n}\n\nexport type DismissableLayerEmits = {\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n escapeKeyDown: [event: KeyboardEvent]\n /**\n * Event handler called when
|
|
1
|
+
{"version":3,"file":"DismissableLayer.js","sources":["../../src/DismissableLayer/DismissableLayer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport {\n computed,\n nextTick,\n reactive,\n watchEffect,\n} from 'vue'\n\nimport type { PrimitiveProps } from '@/Primitive'\nimport type {\n FocusOutsideEvent,\n PointerDownOutsideEvent,\n} from './utils'\nimport { useForwardExpose } from '@/shared'\n\nexport interface DismissableLayerProps extends PrimitiveProps {\n /**\n * When `true`, hover/focus/click interactions will be disabled on elements outside\n * the `DismissableLayer`. Users will need to click twice on outside elements to\n * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n */\n disableOutsidePointerEvents?: boolean\n}\n\nexport type DismissableLayerEmits = {\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n escapeKeyDown: [event: KeyboardEvent]\n /**\n * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n pointerDownOutside: [event: PointerDownOutsideEvent]\n /**\n * Event handler called when the focus moves outside of the `DismissableLayer`.\n * Can be prevented.\n */\n focusOutside: [ event: FocusOutsideEvent]\n /**\n * Event handler called when an interaction happens outside the `DismissableLayer`.\n * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n * Can be prevented.\n */\n interactOutside: [ event: PointerDownOutsideEvent | FocusOutsideEvent]\n}\n\nexport type DismissableLayerPrivateEmits = DismissableLayerEmits & {\n /**\n * Handler called when the `DismissableLayer` should be dismissed\n */\n dismiss: []\n}\n\nexport const context = reactive({\n layersRoot: new Set<HTMLElement>(),\n layersWithOutsidePointerEventsDisabled: new Set<HTMLElement>(),\n branches: new Set<HTMLElement>(),\n})\n</script>\n\n<script setup lang=\"ts\">\nimport { onKeyStroke } from '@vueuse/core'\nimport {\n useFocusOutside,\n usePointerDownOutside,\n} from './utils'\nimport {\n Primitive,\n} from '@/Primitive'\n\nconst props = withDefaults(defineProps<DismissableLayerProps>(), {\n disableOutsidePointerEvents: false,\n})\n\nconst emits = defineEmits<DismissableLayerPrivateEmits>()\n\nconst { forwardRef, currentElement: layerElement } = useForwardExpose()\nconst ownerDocument = computed(\n () => layerElement.value?.ownerDocument ?? globalThis.document,\n)\n\nconst layers = computed(() => context.layersRoot)\n\nconst index = computed(() => {\n return layerElement.value\n ? Array.from(layers.value).indexOf(layerElement.value)\n : -1\n})\n\nconst isBodyPointerEventsDisabled = computed(() => {\n return context.layersWithOutsidePointerEventsDisabled.size > 0\n})\n\nconst isPointerEventsEnabled = computed(() => {\n const localLayers = Array.from(layers.value)\n const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1)\n const highestLayerWithOutsidePointerEventsDisabledIndex = localLayers.indexOf(highestLayerWithOutsidePointerEventsDisabled)\n\n return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex\n})\n\nconst pointerDownOutside = usePointerDownOutside(async (event) => {\n const isPointerDownOnBranch = [...context.branches].some(branch =>\n branch?.contains(event.target as HTMLElement),\n )\n\n if (!isPointerEventsEnabled.value || isPointerDownOnBranch)\n return\n emits('pointerDownOutside', event)\n emits('interactOutside', event)\n await nextTick()\n if (!event.defaultPrevented)\n emits('dismiss')\n}, layerElement)\n\nconst focusOutside = useFocusOutside((event) => {\n const isFocusInBranch = [...context.branches].some(branch =>\n branch?.contains(event.target as HTMLElement),\n )\n\n if (isFocusInBranch)\n return\n emits('focusOutside', event)\n emits('interactOutside', event)\n if (!event.defaultPrevented)\n emits('dismiss')\n}, layerElement)\n\nonKeyStroke('Escape', (event) => {\n const isHighestLayer = index.value === layers.value.size - 1\n if (!isHighestLayer)\n return\n emits('escapeKeyDown', event)\n if (!event.defaultPrevented)\n emits('dismiss')\n})\n\nlet originalBodyPointerEvents: string\nwatchEffect((cleanupFn) => {\n if (!layerElement.value)\n return\n if (props.disableOutsidePointerEvents) {\n if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents\n ownerDocument.value.body.style.pointerEvents = 'none'\n }\n context.layersWithOutsidePointerEventsDisabled.add(layerElement.value)\n }\n layers.value.add(layerElement.value)\n\n cleanupFn(() => {\n if (\n props.disableOutsidePointerEvents\n && context.layersWithOutsidePointerEventsDisabled.size === 1\n ) {\n ownerDocument.value.body.style.pointerEvents = originalBodyPointerEvents\n }\n })\n})\n\nwatchEffect((cleanupFn) => {\n cleanupFn(() => {\n if (!layerElement.value)\n return\n layers.value.delete(layerElement.value)\n context.layersWithOutsidePointerEventsDisabled.delete(layerElement.value)\n })\n})\n</script>\n\n<template>\n <Primitive\n :ref=\"forwardRef\"\n :as-child=\"asChild\"\n :as=\"as\"\n data-dismissable-layer\n :style=\"{\n pointerEvents: isBodyPointerEventsDisabled\n ? isPointerEventsEnabled\n ? 'auto'\n : 'none'\n : undefined,\n }\"\n @focus.capture=\"focusOutside.onFocusCapture\"\n @blur.capture=\"focusOutside.onBlurCapture\"\n @pointerdown.capture=\"pointerDownOutside.onPointerDownCapture\"\n >\n <slot />\n </Primitive>\n</template>\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectContentImpl.cjs","sources":["../../src/Select/SelectContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n ComponentPublicInstance,\n Ref,\n} from 'vue'\nimport type { PopperContentProps } from '@/Popper'\nimport type { PointerDownOutsideEvent } from '@/DismissableLayer'\nimport {\n createContext,\n useFocusGuards,\n useForwardProps,\n useHideOthers,\n useTypeahead,\n} from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\nimport type { AcceptableValue } from '@/shared/types'\nimport { valueComparator } from './utils'\nimport { useCollection } from '@/Collection'\n\nexport interface SelectContentContext {\n content?: Ref<HTMLElement | undefined>\n viewport?: Ref<HTMLElement | undefined>\n onViewportChange: (node: HTMLElement | undefined) => void\n itemRefCallback: (\n node: HTMLElement | undefined,\n value: AcceptableValue,\n disabled: boolean\n ) => void\n selectedItem?: Ref<HTMLElement | undefined>\n onItemLeave?: () => void\n itemTextRefCallback: (\n node: HTMLElement | undefined,\n value: AcceptableValue,\n disabled: boolean\n ) => void\n focusSelectedItem?: () => void\n selectedItemText?: Ref<HTMLElement | undefined>\n position?: 'item-aligned' | 'popper'\n isPositioned?: Ref<boolean>\n searchRef?: Ref<string>\n}\n\nexport const SelectContentDefaultContextValue: SelectContentContext = {\n onViewportChange: () => {},\n itemTextRefCallback: () => {},\n itemRefCallback: () => {},\n}\n\nexport type SelectContentImplEmits = {\n closeAutoFocus: [event: Event]\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n escapeKeyDown: [event: KeyboardEvent]\n /**\n * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n pointerDownOutside: [event: PointerDownOutsideEvent]\n}\n\nexport interface SelectContentImplProps extends PopperContentProps {\n /**\n * The positioning mode to use\n *\n * `item-aligned (default)` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>\n * `popper` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.\n */\n position?: 'item-aligned' | 'popper'\n /**\n * The document.body will be lock, and scrolling will be disabled.\n *\n * @defaultValue true\n */\n bodyLock?: boolean\n}\n\nexport const [injectSelectContentContext, provideSelectContentContext]\n = createContext<SelectContentContext>('SelectContent')\n</script>\n\n<script setup lang=\"ts\">\nimport {\n computed,\n ref,\n watch,\n watchEffect,\n} from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'\nimport SelectPopperPosition from './SelectPopperPosition.vue'\nimport { FocusScope } from '@/FocusScope'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { focusFirst } from '@/Menu/utils'\n\nconst props = withDefaults(defineProps<SelectContentImplProps>(), {\n align: 'start',\n position: 'item-aligned',\n bodyLock: true,\n})\nconst emits = defineEmits<SelectContentImplEmits>()\n\nconst rootContext = injectSelectRootContext()\n\nuseFocusGuards()\nuseBodyScrollLock(props.bodyLock)\nconst { CollectionSlot, getItems } = useCollection()\n\nconst content = ref<HTMLElement>()\nuseHideOthers(content)\n\nconst { search, handleTypeaheadSearch } = useTypeahead()\n\nconst viewport = ref<HTMLElement>()\nconst selectedItem = ref<HTMLElement>()\nconst selectedItemText = ref<HTMLElement>()\nconst isPositioned = ref(false)\nconst firstValidItemFoundRef = ref(false)\n\nfunction focusSelectedItem() {\n if (selectedItem.value && content.value)\n focusFirst([selectedItem.value, content.value])\n}\n\nwatch(isPositioned, () => {\n focusSelectedItem()\n})\n\n// prevent selecting items on `pointerup` in some cases after opening from `pointerdown`\n// and close on `pointerup` outside.\nconst { onOpenChange, triggerPointerDownPosRef } = rootContext\nwatchEffect((cleanupFn) => {\n if (!content.value)\n return\n let pointerMoveDelta = { x: 0, y: 0 }\n\n const handlePointerMove = (event: PointerEvent) => {\n pointerMoveDelta = {\n x: Math.abs(\n Math.round(event.pageX) - (triggerPointerDownPosRef.value?.x ?? 0),\n ),\n y: Math.abs(\n Math.round(event.pageY) - (triggerPointerDownPosRef.value?.y ?? 0),\n ),\n }\n }\n const handlePointerUp = (event: PointerEvent) => {\n // Prevent options from being untappable on touch devices\n // https://github.com/unovue/reka-ui/issues/804\n if (event.pointerType === 'touch')\n return\n\n // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.\n if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {\n event.preventDefault()\n }\n else {\n // otherwise, if the event was outside the content, close.\n if (!content.value?.contains(event.target as HTMLElement))\n onOpenChange(false)\n }\n document.removeEventListener('pointermove', handlePointerMove)\n triggerPointerDownPosRef.value = null\n }\n\n if (triggerPointerDownPosRef.value !== null) {\n document.addEventListener('pointermove', handlePointerMove)\n document.addEventListener('pointerup', handlePointerUp, {\n capture: true,\n once: true,\n })\n }\n\n cleanupFn(() => {\n document.removeEventListener('pointermove', handlePointerMove)\n document.removeEventListener('pointerup', handlePointerUp, {\n capture: true,\n })\n })\n})\n\nfunction handleKeyDown(event: KeyboardEvent) {\n const isModifierKey = event.ctrlKey || event.altKey || event.metaKey\n\n // select should not be navigated using tab key so we prevent it\n if (event.key === 'Tab')\n event.preventDefault()\n\n if (!isModifierKey && event.key.length === 1)\n handleTypeaheadSearch(event.key, getItems())\n\n if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const collectionItems = getItems().map(i => i.ref)\n let candidateNodes = [...collectionItems]\n\n if (['ArrowUp', 'End'].includes(event.key))\n candidateNodes = candidateNodes.slice().reverse()\n\n if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n const currentElement = event.target as HTMLElement\n const currentIndex = candidateNodes.indexOf(currentElement)\n candidateNodes = candidateNodes.slice(currentIndex + 1)\n }\n setTimeout(() => focusFirst(candidateNodes))\n event.preventDefault()\n }\n}\n\nconst pickedProps = computed(() => {\n if (props.position === 'popper')\n return props\n else return {}\n})\n\nconst forwardedProps = useForwardProps(pickedProps.value)\n\nprovideSelectContentContext({\n content,\n viewport,\n onViewportChange: (node) => {\n viewport.value = node\n },\n itemRefCallback: (node, value, disabled) => {\n const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n if (isFirstValidItem) {\n if (rootContext.isEmptyModelValue.value) {\n firstValidItemFoundRef.value = true\n selectedItem.value = node\n }\n else if (isSelectedItem) {\n firstValidItemFoundRef.value = true\n selectedItem.value = node\n }\n }\n },\n selectedItem,\n selectedItemText,\n onItemLeave: () => {\n content.value?.focus()\n },\n itemTextRefCallback: (node, value, disabled) => {\n const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n if (isSelectedItem || isFirstValidItem)\n selectedItemText.value = node\n },\n focusSelectedItem,\n position: props.position,\n isPositioned,\n searchRef: search,\n})\n</script>\n\n<template>\n <CollectionSlot>\n <FocusScope\n as-child\n @mount-auto-focus.prevent\n @unmount-auto-focus=\"\n (event) => {\n emits('closeAutoFocus', event);\n if (event.defaultPrevented) return;\n rootContext.triggerElement.value?.focus({ preventScroll: true });\n event.preventDefault();\n }\n \"\n >\n <DismissableLayer\n as-child\n disable-outside-pointer-events\n @focus-outside.prevent\n @dismiss=\"rootContext.onOpenChange(false)\"\n @escape-key-down=\"emits('escapeKeyDown', $event)\"\n @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n >\n <component\n :is=\"\n position === 'popper'\n ? SelectPopperPosition\n : SelectItemAlignedPosition\n \"\n v-bind=\"{ ...$attrs, ...forwardedProps }\"\n :id=\"rootContext.contentId\"\n :ref=\"\n (vnode: ComponentPublicInstance) => {\n content = unrefElement(vnode) as HTMLElement\n return undefined\n }\n \"\n role=\"listbox\"\n :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n :dir=\"rootContext.dir.value\"\n :style=\"{\n // flex layout so we can place the scroll buttons properly\n display: 'flex',\n flexDirection: 'column',\n // reset the outline by default as the content MAY get focused\n outline: 'none',\n }\"\n @contextmenu.prevent\n @placed=\"isPositioned = true\"\n @keydown=\"(handleKeyDown as any)\"\n >\n <slot />\n </component>\n </DismissableLayer>\n </FocusScope>\n </CollectionSlot>\n</template>\n"],"names":["createContext","injectSelectRootContext","useFocusGuards","useBodyScrollLock","useCollection","ref","useHideOthers","useTypeahead","focusFirst","watch","watchEffect","computed","useForwardProps","valueComparator"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectContentImpl.cjs","sources":["../../src/Select/SelectContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n ComponentPublicInstance,\n Ref,\n} from 'vue'\nimport type { PopperContentProps } from '@/Popper'\nimport type { PointerDownOutsideEvent } from '@/DismissableLayer'\nimport {\n createContext,\n useFocusGuards,\n useForwardProps,\n useHideOthers,\n useTypeahead,\n} from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\nimport type { AcceptableValue } from '@/shared/types'\nimport { valueComparator } from './utils'\nimport { useCollection } from '@/Collection'\n\nexport interface SelectContentContext {\n content?: Ref<HTMLElement | undefined>\n viewport?: Ref<HTMLElement | undefined>\n onViewportChange: (node: HTMLElement | undefined) => void\n itemRefCallback: (\n node: HTMLElement | undefined,\n value: AcceptableValue,\n disabled: boolean\n ) => void\n selectedItem?: Ref<HTMLElement | undefined>\n onItemLeave?: () => void\n itemTextRefCallback: (\n node: HTMLElement | undefined,\n value: AcceptableValue,\n disabled: boolean\n ) => void\n focusSelectedItem?: () => void\n selectedItemText?: Ref<HTMLElement | undefined>\n position?: 'item-aligned' | 'popper'\n isPositioned?: Ref<boolean>\n searchRef?: Ref<string>\n}\n\nexport const SelectContentDefaultContextValue: SelectContentContext = {\n onViewportChange: () => {},\n itemTextRefCallback: () => {},\n itemRefCallback: () => {},\n}\n\nexport type SelectContentImplEmits = {\n closeAutoFocus: [event: Event]\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n escapeKeyDown: [event: KeyboardEvent]\n /**\n * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n pointerDownOutside: [event: PointerDownOutsideEvent]\n}\n\nexport interface SelectContentImplProps extends PopperContentProps {\n /**\n * The positioning mode to use\n *\n * `item-aligned (default)` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>\n * `popper` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.\n */\n position?: 'item-aligned' | 'popper'\n /**\n * The document.body will be lock, and scrolling will be disabled.\n *\n * @defaultValue true\n */\n bodyLock?: boolean\n}\n\nexport const [injectSelectContentContext, provideSelectContentContext]\n = createContext<SelectContentContext>('SelectContent')\n</script>\n\n<script setup lang=\"ts\">\nimport {\n computed,\n ref,\n watch,\n watchEffect,\n} from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'\nimport SelectPopperPosition from './SelectPopperPosition.vue'\nimport { FocusScope } from '@/FocusScope'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { focusFirst } from '@/Menu/utils'\n\nconst props = withDefaults(defineProps<SelectContentImplProps>(), {\n align: 'start',\n position: 'item-aligned',\n bodyLock: true,\n})\nconst emits = defineEmits<SelectContentImplEmits>()\n\nconst rootContext = injectSelectRootContext()\n\nuseFocusGuards()\nuseBodyScrollLock(props.bodyLock)\nconst { CollectionSlot, getItems } = useCollection()\n\nconst content = ref<HTMLElement>()\nuseHideOthers(content)\n\nconst { search, handleTypeaheadSearch } = useTypeahead()\n\nconst viewport = ref<HTMLElement>()\nconst selectedItem = ref<HTMLElement>()\nconst selectedItemText = ref<HTMLElement>()\nconst isPositioned = ref(false)\nconst firstValidItemFoundRef = ref(false)\n\nfunction focusSelectedItem() {\n if (selectedItem.value && content.value)\n focusFirst([selectedItem.value, content.value])\n}\n\nwatch(isPositioned, () => {\n focusSelectedItem()\n})\n\n// prevent selecting items on `pointerup` in some cases after opening from `pointerdown`\n// and close on `pointerup` outside.\nconst { onOpenChange, triggerPointerDownPosRef } = rootContext\nwatchEffect((cleanupFn) => {\n if (!content.value)\n return\n let pointerMoveDelta = { x: 0, y: 0 }\n\n const handlePointerMove = (event: PointerEvent) => {\n pointerMoveDelta = {\n x: Math.abs(\n Math.round(event.pageX) - (triggerPointerDownPosRef.value?.x ?? 0),\n ),\n y: Math.abs(\n Math.round(event.pageY) - (triggerPointerDownPosRef.value?.y ?? 0),\n ),\n }\n }\n const handlePointerUp = (event: PointerEvent) => {\n // Prevent options from being untappable on touch devices\n // https://github.com/unovue/reka-ui/issues/804\n if (event.pointerType === 'touch')\n return\n\n // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.\n if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {\n event.preventDefault()\n }\n else {\n // otherwise, if the event was outside the content, close.\n if (!content.value?.contains(event.target as HTMLElement))\n onOpenChange(false)\n }\n document.removeEventListener('pointermove', handlePointerMove)\n triggerPointerDownPosRef.value = null\n }\n\n if (triggerPointerDownPosRef.value !== null) {\n document.addEventListener('pointermove', handlePointerMove)\n document.addEventListener('pointerup', handlePointerUp, {\n capture: true,\n once: true,\n })\n }\n\n cleanupFn(() => {\n document.removeEventListener('pointermove', handlePointerMove)\n document.removeEventListener('pointerup', handlePointerUp, {\n capture: true,\n })\n })\n})\n\nfunction handleKeyDown(event: KeyboardEvent) {\n const isModifierKey = event.ctrlKey || event.altKey || event.metaKey\n\n // select should not be navigated using tab key so we prevent it\n if (event.key === 'Tab')\n event.preventDefault()\n\n if (!isModifierKey && event.key.length === 1)\n handleTypeaheadSearch(event.key, getItems())\n\n if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const collectionItems = getItems().map(i => i.ref)\n let candidateNodes = [...collectionItems]\n\n if (['ArrowUp', 'End'].includes(event.key))\n candidateNodes = candidateNodes.slice().reverse()\n\n if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n const currentElement = event.target as HTMLElement\n const currentIndex = candidateNodes.indexOf(currentElement)\n candidateNodes = candidateNodes.slice(currentIndex + 1)\n }\n setTimeout(() => focusFirst(candidateNodes))\n event.preventDefault()\n }\n}\n\nconst pickedProps = computed(() => {\n if (props.position === 'popper')\n return props\n else return {}\n})\n\nconst forwardedProps = useForwardProps(pickedProps.value)\n\nprovideSelectContentContext({\n content,\n viewport,\n onViewportChange: (node) => {\n viewport.value = node\n },\n itemRefCallback: (node, value, disabled) => {\n const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n if (isFirstValidItem) {\n if (rootContext.isEmptyModelValue.value) {\n firstValidItemFoundRef.value = true\n selectedItem.value = node\n }\n else if (isSelectedItem) {\n firstValidItemFoundRef.value = true\n selectedItem.value = node\n }\n }\n },\n selectedItem,\n selectedItemText,\n onItemLeave: () => {\n content.value?.focus()\n },\n itemTextRefCallback: (node, value, disabled) => {\n const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n if (isSelectedItem || isFirstValidItem)\n selectedItemText.value = node\n },\n focusSelectedItem,\n position: props.position,\n isPositioned,\n searchRef: search,\n})\n</script>\n\n<template>\n <CollectionSlot>\n <FocusScope\n as-child\n @mount-auto-focus.prevent\n @unmount-auto-focus=\"\n (event) => {\n emits('closeAutoFocus', event);\n if (event.defaultPrevented) return;\n rootContext.triggerElement.value?.focus({ preventScroll: true });\n event.preventDefault();\n }\n \"\n >\n <DismissableLayer\n as-child\n disable-outside-pointer-events\n @focus-outside.prevent\n @dismiss=\"rootContext.onOpenChange(false)\"\n @escape-key-down=\"emits('escapeKeyDown', $event)\"\n @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n >\n <component\n :is=\"\n position === 'popper'\n ? SelectPopperPosition\n : SelectItemAlignedPosition\n \"\n v-bind=\"{ ...$attrs, ...forwardedProps }\"\n :id=\"rootContext.contentId\"\n :ref=\"\n (vnode: ComponentPublicInstance) => {\n content = unrefElement(vnode) as HTMLElement\n return undefined\n }\n \"\n role=\"listbox\"\n :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n :dir=\"rootContext.dir.value\"\n :style=\"{\n // flex layout so we can place the scroll buttons properly\n display: 'flex',\n flexDirection: 'column',\n // reset the outline by default as the content MAY get focused\n outline: 'none',\n }\"\n @contextmenu.prevent\n @placed=\"isPositioned = true\"\n @keydown=\"(handleKeyDown as any)\"\n >\n <slot />\n </component>\n </DismissableLayer>\n </FocusScope>\n </CollectionSlot>\n</template>\n"],"names":["createContext","injectSelectRootContext","useFocusGuards","useBodyScrollLock","useCollection","ref","useHideOthers","useTypeahead","focusFirst","watch","watchEffect","computed","useForwardProps","valueComparator"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectContentImpl.js","sources":["../../src/Select/SelectContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n ComponentPublicInstance,\n Ref,\n} from 'vue'\nimport type { PopperContentProps } from '@/Popper'\nimport type { PointerDownOutsideEvent } from '@/DismissableLayer'\nimport {\n createContext,\n useFocusGuards,\n useForwardProps,\n useHideOthers,\n useTypeahead,\n} from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\nimport type { AcceptableValue } from '@/shared/types'\nimport { valueComparator } from './utils'\nimport { useCollection } from '@/Collection'\n\nexport interface SelectContentContext {\n content?: Ref<HTMLElement | undefined>\n viewport?: Ref<HTMLElement | undefined>\n onViewportChange: (node: HTMLElement | undefined) => void\n itemRefCallback: (\n node: HTMLElement | undefined,\n value: AcceptableValue,\n disabled: boolean\n ) => void\n selectedItem?: Ref<HTMLElement | undefined>\n onItemLeave?: () => void\n itemTextRefCallback: (\n node: HTMLElement | undefined,\n value: AcceptableValue,\n disabled: boolean\n ) => void\n focusSelectedItem?: () => void\n selectedItemText?: Ref<HTMLElement | undefined>\n position?: 'item-aligned' | 'popper'\n isPositioned?: Ref<boolean>\n searchRef?: Ref<string>\n}\n\nexport const SelectContentDefaultContextValue: SelectContentContext = {\n onViewportChange: () => {},\n itemTextRefCallback: () => {},\n itemRefCallback: () => {},\n}\n\nexport type SelectContentImplEmits = {\n closeAutoFocus: [event: Event]\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n escapeKeyDown: [event: KeyboardEvent]\n /**\n * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n pointerDownOutside: [event: PointerDownOutsideEvent]\n}\n\nexport interface SelectContentImplProps extends PopperContentProps {\n /**\n * The positioning mode to use\n *\n * `item-aligned (default)` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>\n * `popper` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.\n */\n position?: 'item-aligned' | 'popper'\n /**\n * The document.body will be lock, and scrolling will be disabled.\n *\n * @defaultValue true\n */\n bodyLock?: boolean\n}\n\nexport const [injectSelectContentContext, provideSelectContentContext]\n = createContext<SelectContentContext>('SelectContent')\n</script>\n\n<script setup lang=\"ts\">\nimport {\n computed,\n ref,\n watch,\n watchEffect,\n} from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'\nimport SelectPopperPosition from './SelectPopperPosition.vue'\nimport { FocusScope } from '@/FocusScope'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { focusFirst } from '@/Menu/utils'\n\nconst props = withDefaults(defineProps<SelectContentImplProps>(), {\n align: 'start',\n position: 'item-aligned',\n bodyLock: true,\n})\nconst emits = defineEmits<SelectContentImplEmits>()\n\nconst rootContext = injectSelectRootContext()\n\nuseFocusGuards()\nuseBodyScrollLock(props.bodyLock)\nconst { CollectionSlot, getItems } = useCollection()\n\nconst content = ref<HTMLElement>()\nuseHideOthers(content)\n\nconst { search, handleTypeaheadSearch } = useTypeahead()\n\nconst viewport = ref<HTMLElement>()\nconst selectedItem = ref<HTMLElement>()\nconst selectedItemText = ref<HTMLElement>()\nconst isPositioned = ref(false)\nconst firstValidItemFoundRef = ref(false)\n\nfunction focusSelectedItem() {\n if (selectedItem.value && content.value)\n focusFirst([selectedItem.value, content.value])\n}\n\nwatch(isPositioned, () => {\n focusSelectedItem()\n})\n\n// prevent selecting items on `pointerup` in some cases after opening from `pointerdown`\n// and close on `pointerup` outside.\nconst { onOpenChange, triggerPointerDownPosRef } = rootContext\nwatchEffect((cleanupFn) => {\n if (!content.value)\n return\n let pointerMoveDelta = { x: 0, y: 0 }\n\n const handlePointerMove = (event: PointerEvent) => {\n pointerMoveDelta = {\n x: Math.abs(\n Math.round(event.pageX) - (triggerPointerDownPosRef.value?.x ?? 0),\n ),\n y: Math.abs(\n Math.round(event.pageY) - (triggerPointerDownPosRef.value?.y ?? 0),\n ),\n }\n }\n const handlePointerUp = (event: PointerEvent) => {\n // Prevent options from being untappable on touch devices\n // https://github.com/unovue/reka-ui/issues/804\n if (event.pointerType === 'touch')\n return\n\n // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.\n if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {\n event.preventDefault()\n }\n else {\n // otherwise, if the event was outside the content, close.\n if (!content.value?.contains(event.target as HTMLElement))\n onOpenChange(false)\n }\n document.removeEventListener('pointermove', handlePointerMove)\n triggerPointerDownPosRef.value = null\n }\n\n if (triggerPointerDownPosRef.value !== null) {\n document.addEventListener('pointermove', handlePointerMove)\n document.addEventListener('pointerup', handlePointerUp, {\n capture: true,\n once: true,\n })\n }\n\n cleanupFn(() => {\n document.removeEventListener('pointermove', handlePointerMove)\n document.removeEventListener('pointerup', handlePointerUp, {\n capture: true,\n })\n })\n})\n\nfunction handleKeyDown(event: KeyboardEvent) {\n const isModifierKey = event.ctrlKey || event.altKey || event.metaKey\n\n // select should not be navigated using tab key so we prevent it\n if (event.key === 'Tab')\n event.preventDefault()\n\n if (!isModifierKey && event.key.length === 1)\n handleTypeaheadSearch(event.key, getItems())\n\n if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const collectionItems = getItems().map(i => i.ref)\n let candidateNodes = [...collectionItems]\n\n if (['ArrowUp', 'End'].includes(event.key))\n candidateNodes = candidateNodes.slice().reverse()\n\n if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n const currentElement = event.target as HTMLElement\n const currentIndex = candidateNodes.indexOf(currentElement)\n candidateNodes = candidateNodes.slice(currentIndex + 1)\n }\n setTimeout(() => focusFirst(candidateNodes))\n event.preventDefault()\n }\n}\n\nconst pickedProps = computed(() => {\n if (props.position === 'popper')\n return props\n else return {}\n})\n\nconst forwardedProps = useForwardProps(pickedProps.value)\n\nprovideSelectContentContext({\n content,\n viewport,\n onViewportChange: (node) => {\n viewport.value = node\n },\n itemRefCallback: (node, value, disabled) => {\n const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n if (isFirstValidItem) {\n if (rootContext.isEmptyModelValue.value) {\n firstValidItemFoundRef.value = true\n selectedItem.value = node\n }\n else if (isSelectedItem) {\n firstValidItemFoundRef.value = true\n selectedItem.value = node\n }\n }\n },\n selectedItem,\n selectedItemText,\n onItemLeave: () => {\n content.value?.focus()\n },\n itemTextRefCallback: (node, value, disabled) => {\n const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n if (isSelectedItem || isFirstValidItem)\n selectedItemText.value = node\n },\n focusSelectedItem,\n position: props.position,\n isPositioned,\n searchRef: search,\n})\n</script>\n\n<template>\n <CollectionSlot>\n <FocusScope\n as-child\n @mount-auto-focus.prevent\n @unmount-auto-focus=\"\n (event) => {\n emits('closeAutoFocus', event);\n if (event.defaultPrevented) return;\n rootContext.triggerElement.value?.focus({ preventScroll: true });\n event.preventDefault();\n }\n \"\n >\n <DismissableLayer\n as-child\n disable-outside-pointer-events\n @focus-outside.prevent\n @dismiss=\"rootContext.onOpenChange(false)\"\n @escape-key-down=\"emits('escapeKeyDown', $event)\"\n @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n >\n <component\n :is=\"\n position === 'popper'\n ? SelectPopperPosition\n : SelectItemAlignedPosition\n \"\n v-bind=\"{ ...$attrs, ...forwardedProps }\"\n :id=\"rootContext.contentId\"\n :ref=\"\n (vnode: ComponentPublicInstance) => {\n content = unrefElement(vnode) as HTMLElement\n return undefined\n }\n \"\n role=\"listbox\"\n :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n :dir=\"rootContext.dir.value\"\n :style=\"{\n // flex layout so we can place the scroll buttons properly\n display: 'flex',\n flexDirection: 'column',\n // reset the outline by default as the content MAY get focused\n outline: 'none',\n }\"\n @contextmenu.prevent\n @placed=\"isPositioned = true\"\n @keydown=\"(handleKeyDown as any)\"\n >\n <slot />\n </component>\n </DismissableLayer>\n </FocusScope>\n </CollectionSlot>\n</template>\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectContentImpl.js","sources":["../../src/Select/SelectContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n ComponentPublicInstance,\n Ref,\n} from 'vue'\nimport type { PopperContentProps } from '@/Popper'\nimport type { PointerDownOutsideEvent } from '@/DismissableLayer'\nimport {\n createContext,\n useFocusGuards,\n useForwardProps,\n useHideOthers,\n useTypeahead,\n} from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\nimport type { AcceptableValue } from '@/shared/types'\nimport { valueComparator } from './utils'\nimport { useCollection } from '@/Collection'\n\nexport interface SelectContentContext {\n content?: Ref<HTMLElement | undefined>\n viewport?: Ref<HTMLElement | undefined>\n onViewportChange: (node: HTMLElement | undefined) => void\n itemRefCallback: (\n node: HTMLElement | undefined,\n value: AcceptableValue,\n disabled: boolean\n ) => void\n selectedItem?: Ref<HTMLElement | undefined>\n onItemLeave?: () => void\n itemTextRefCallback: (\n node: HTMLElement | undefined,\n value: AcceptableValue,\n disabled: boolean\n ) => void\n focusSelectedItem?: () => void\n selectedItemText?: Ref<HTMLElement | undefined>\n position?: 'item-aligned' | 'popper'\n isPositioned?: Ref<boolean>\n searchRef?: Ref<string>\n}\n\nexport const SelectContentDefaultContextValue: SelectContentContext = {\n onViewportChange: () => {},\n itemTextRefCallback: () => {},\n itemRefCallback: () => {},\n}\n\nexport type SelectContentImplEmits = {\n closeAutoFocus: [event: Event]\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n escapeKeyDown: [event: KeyboardEvent]\n /**\n * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n pointerDownOutside: [event: PointerDownOutsideEvent]\n}\n\nexport interface SelectContentImplProps extends PopperContentProps {\n /**\n * The positioning mode to use\n *\n * `item-aligned (default)` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>\n * `popper` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.\n */\n position?: 'item-aligned' | 'popper'\n /**\n * The document.body will be lock, and scrolling will be disabled.\n *\n * @defaultValue true\n */\n bodyLock?: boolean\n}\n\nexport const [injectSelectContentContext, provideSelectContentContext]\n = createContext<SelectContentContext>('SelectContent')\n</script>\n\n<script setup lang=\"ts\">\nimport {\n computed,\n ref,\n watch,\n watchEffect,\n} from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'\nimport SelectPopperPosition from './SelectPopperPosition.vue'\nimport { FocusScope } from '@/FocusScope'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { focusFirst } from '@/Menu/utils'\n\nconst props = withDefaults(defineProps<SelectContentImplProps>(), {\n align: 'start',\n position: 'item-aligned',\n bodyLock: true,\n})\nconst emits = defineEmits<SelectContentImplEmits>()\n\nconst rootContext = injectSelectRootContext()\n\nuseFocusGuards()\nuseBodyScrollLock(props.bodyLock)\nconst { CollectionSlot, getItems } = useCollection()\n\nconst content = ref<HTMLElement>()\nuseHideOthers(content)\n\nconst { search, handleTypeaheadSearch } = useTypeahead()\n\nconst viewport = ref<HTMLElement>()\nconst selectedItem = ref<HTMLElement>()\nconst selectedItemText = ref<HTMLElement>()\nconst isPositioned = ref(false)\nconst firstValidItemFoundRef = ref(false)\n\nfunction focusSelectedItem() {\n if (selectedItem.value && content.value)\n focusFirst([selectedItem.value, content.value])\n}\n\nwatch(isPositioned, () => {\n focusSelectedItem()\n})\n\n// prevent selecting items on `pointerup` in some cases after opening from `pointerdown`\n// and close on `pointerup` outside.\nconst { onOpenChange, triggerPointerDownPosRef } = rootContext\nwatchEffect((cleanupFn) => {\n if (!content.value)\n return\n let pointerMoveDelta = { x: 0, y: 0 }\n\n const handlePointerMove = (event: PointerEvent) => {\n pointerMoveDelta = {\n x: Math.abs(\n Math.round(event.pageX) - (triggerPointerDownPosRef.value?.x ?? 0),\n ),\n y: Math.abs(\n Math.round(event.pageY) - (triggerPointerDownPosRef.value?.y ?? 0),\n ),\n }\n }\n const handlePointerUp = (event: PointerEvent) => {\n // Prevent options from being untappable on touch devices\n // https://github.com/unovue/reka-ui/issues/804\n if (event.pointerType === 'touch')\n return\n\n // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.\n if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {\n event.preventDefault()\n }\n else {\n // otherwise, if the event was outside the content, close.\n if (!content.value?.contains(event.target as HTMLElement))\n onOpenChange(false)\n }\n document.removeEventListener('pointermove', handlePointerMove)\n triggerPointerDownPosRef.value = null\n }\n\n if (triggerPointerDownPosRef.value !== null) {\n document.addEventListener('pointermove', handlePointerMove)\n document.addEventListener('pointerup', handlePointerUp, {\n capture: true,\n once: true,\n })\n }\n\n cleanupFn(() => {\n document.removeEventListener('pointermove', handlePointerMove)\n document.removeEventListener('pointerup', handlePointerUp, {\n capture: true,\n })\n })\n})\n\nfunction handleKeyDown(event: KeyboardEvent) {\n const isModifierKey = event.ctrlKey || event.altKey || event.metaKey\n\n // select should not be navigated using tab key so we prevent it\n if (event.key === 'Tab')\n event.preventDefault()\n\n if (!isModifierKey && event.key.length === 1)\n handleTypeaheadSearch(event.key, getItems())\n\n if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const collectionItems = getItems().map(i => i.ref)\n let candidateNodes = [...collectionItems]\n\n if (['ArrowUp', 'End'].includes(event.key))\n candidateNodes = candidateNodes.slice().reverse()\n\n if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n const currentElement = event.target as HTMLElement\n const currentIndex = candidateNodes.indexOf(currentElement)\n candidateNodes = candidateNodes.slice(currentIndex + 1)\n }\n setTimeout(() => focusFirst(candidateNodes))\n event.preventDefault()\n }\n}\n\nconst pickedProps = computed(() => {\n if (props.position === 'popper')\n return props\n else return {}\n})\n\nconst forwardedProps = useForwardProps(pickedProps.value)\n\nprovideSelectContentContext({\n content,\n viewport,\n onViewportChange: (node) => {\n viewport.value = node\n },\n itemRefCallback: (node, value, disabled) => {\n const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n if (isFirstValidItem) {\n if (rootContext.isEmptyModelValue.value) {\n firstValidItemFoundRef.value = true\n selectedItem.value = node\n }\n else if (isSelectedItem) {\n firstValidItemFoundRef.value = true\n selectedItem.value = node\n }\n }\n },\n selectedItem,\n selectedItemText,\n onItemLeave: () => {\n content.value?.focus()\n },\n itemTextRefCallback: (node, value, disabled) => {\n const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n if (isSelectedItem || isFirstValidItem)\n selectedItemText.value = node\n },\n focusSelectedItem,\n position: props.position,\n isPositioned,\n searchRef: search,\n})\n</script>\n\n<template>\n <CollectionSlot>\n <FocusScope\n as-child\n @mount-auto-focus.prevent\n @unmount-auto-focus=\"\n (event) => {\n emits('closeAutoFocus', event);\n if (event.defaultPrevented) return;\n rootContext.triggerElement.value?.focus({ preventScroll: true });\n event.preventDefault();\n }\n \"\n >\n <DismissableLayer\n as-child\n disable-outside-pointer-events\n @focus-outside.prevent\n @dismiss=\"rootContext.onOpenChange(false)\"\n @escape-key-down=\"emits('escapeKeyDown', $event)\"\n @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n >\n <component\n :is=\"\n position === 'popper'\n ? SelectPopperPosition\n : SelectItemAlignedPosition\n \"\n v-bind=\"{ ...$attrs, ...forwardedProps }\"\n :id=\"rootContext.contentId\"\n :ref=\"\n (vnode: ComponentPublicInstance) => {\n content = unrefElement(vnode) as HTMLElement\n return undefined\n }\n \"\n role=\"listbox\"\n :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n :dir=\"rootContext.dir.value\"\n :style=\"{\n // flex layout so we can place the scroll buttons properly\n display: 'flex',\n flexDirection: 'column',\n // reset the outline by default as the content MAY get focused\n outline: 'none',\n }\"\n @contextmenu.prevent\n @placed=\"isPositioned = true\"\n @keydown=\"(handleKeyDown as any)\"\n >\n <slot />\n </component>\n </DismissableLayer>\n </FocusScope>\n </CollectionSlot>\n</template>\n"],"names":[],"mappings":"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"}
|
|
@@ -12,8 +12,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
12
12
|
__name: "ToggleGroupItem",
|
|
13
13
|
props: {
|
|
14
14
|
value: {},
|
|
15
|
-
defaultValue: { type: Boolean },
|
|
16
|
-
modelValue: { type: [Boolean, null] },
|
|
17
15
|
disabled: { type: Boolean },
|
|
18
16
|
asChild: { type: Boolean },
|
|
19
17
|
as: { default: "button" }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleGroupItem.cjs","sources":["../../src/ToggleGroup/ToggleGroupItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleProps } from '@/Toggle'\nimport { isValueEqualOrExist, useForwardExpose } from '@/shared'\nimport type { AcceptableValue } from '@/shared/types'\n\nexport interface ToggleGroupItemProps extends Omit<ToggleProps, 'name' | 'required'> {\n /**\n * A string value for the toggle group item. All items within a toggle group should use a unique value.\n */\n value: AcceptableValue\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { injectToggleGroupRootContext } from './ToggleGroupRoot.vue'\nimport { Toggle } from '@/Toggle'\nimport { RovingFocusItem } from '@/RovingFocus'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ToggleGroupItemProps>(), {\n as: 'button',\n})\n\nconst rootContext = injectToggleGroupRootContext()\nconst disabled = computed(() => rootContext.disabled?.value || props.disabled)\nconst pressed = computed(() => isValueEqualOrExist(rootContext.modelValue.value, props.value))\n\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n <component\n :is=\"rootContext.rovingFocus.value ? RovingFocusItem : Primitive\"\n as-child\n :focusable=\"!disabled\"\n :active=\"pressed\"\n >\n <Toggle\n v-bind=\"props\"\n :ref=\"forwardRef\"\n :disabled=\"disabled\"\n :model-value=\"pressed\"\n @update:model-value=\"rootContext.changeModelValue(value)\"\n >\n <slot />\n </Toggle>\n </component>\n</template>\n"],"names":["injectToggleGroupRootContext","computed","isValueEqualOrExist","useForwardExpose"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToggleGroupItem.cjs","sources":["../../src/ToggleGroup/ToggleGroupItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleProps } from '@/Toggle'\nimport { isValueEqualOrExist, useForwardExpose } from '@/shared'\nimport type { AcceptableValue } from '@/shared/types'\n\nexport interface ToggleGroupItemProps extends Omit<ToggleProps, 'name' | 'required' | 'modelValue' | 'defaultValue'> {\n /**\n * A string value for the toggle group item. All items within a toggle group should use a unique value.\n */\n value: AcceptableValue\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { injectToggleGroupRootContext } from './ToggleGroupRoot.vue'\nimport { Toggle } from '@/Toggle'\nimport { RovingFocusItem } from '@/RovingFocus'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ToggleGroupItemProps>(), {\n as: 'button',\n})\n\nconst rootContext = injectToggleGroupRootContext()\nconst disabled = computed(() => rootContext.disabled?.value || props.disabled)\nconst pressed = computed(() => isValueEqualOrExist(rootContext.modelValue.value, props.value))\n\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n <component\n :is=\"rootContext.rovingFocus.value ? RovingFocusItem : Primitive\"\n as-child\n :focusable=\"!disabled\"\n :active=\"pressed\"\n >\n <Toggle\n v-bind=\"props\"\n :ref=\"forwardRef\"\n :disabled=\"disabled\"\n :model-value=\"pressed\"\n @update:model-value=\"rootContext.changeModelValue(value)\"\n >\n <slot />\n </Toggle>\n </component>\n</template>\n"],"names":["injectToggleGroupRootContext","computed","isValueEqualOrExist","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,wDAA6B,EAAA;AACjD,IAAA,MAAM,WAAWC,YAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAC7E,IAAM,MAAA,OAAA,GAAUA,aAAS,MAAMC,8CAAA,CAAoB,YAAY,UAAW,CAAA,KAAA,EAAO,KAAM,CAAA,KAAK,CAAC,CAAA;AAE7F,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -10,8 +10,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
10
10
|
__name: "ToggleGroupItem",
|
|
11
11
|
props: {
|
|
12
12
|
value: {},
|
|
13
|
-
defaultValue: { type: Boolean },
|
|
14
|
-
modelValue: { type: [Boolean, null] },
|
|
15
13
|
disabled: { type: Boolean },
|
|
16
14
|
asChild: { type: Boolean },
|
|
17
15
|
as: { default: "button" }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleGroupItem.js","sources":["../../src/ToggleGroup/ToggleGroupItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleProps } from '@/Toggle'\nimport { isValueEqualOrExist, useForwardExpose } from '@/shared'\nimport type { AcceptableValue } from '@/shared/types'\n\nexport interface ToggleGroupItemProps extends Omit<ToggleProps, 'name' | 'required'> {\n /**\n * A string value for the toggle group item. All items within a toggle group should use a unique value.\n */\n value: AcceptableValue\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { injectToggleGroupRootContext } from './ToggleGroupRoot.vue'\nimport { Toggle } from '@/Toggle'\nimport { RovingFocusItem } from '@/RovingFocus'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ToggleGroupItemProps>(), {\n as: 'button',\n})\n\nconst rootContext = injectToggleGroupRootContext()\nconst disabled = computed(() => rootContext.disabled?.value || props.disabled)\nconst pressed = computed(() => isValueEqualOrExist(rootContext.modelValue.value, props.value))\n\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n <component\n :is=\"rootContext.rovingFocus.value ? RovingFocusItem : Primitive\"\n as-child\n :focusable=\"!disabled\"\n :active=\"pressed\"\n >\n <Toggle\n v-bind=\"props\"\n :ref=\"forwardRef\"\n :disabled=\"disabled\"\n :model-value=\"pressed\"\n @update:model-value=\"rootContext.changeModelValue(value)\"\n >\n <slot />\n </Toggle>\n </component>\n</template>\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToggleGroupItem.js","sources":["../../src/ToggleGroup/ToggleGroupItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleProps } from '@/Toggle'\nimport { isValueEqualOrExist, useForwardExpose } from '@/shared'\nimport type { AcceptableValue } from '@/shared/types'\n\nexport interface ToggleGroupItemProps extends Omit<ToggleProps, 'name' | 'required' | 'modelValue' | 'defaultValue'> {\n /**\n * A string value for the toggle group item. All items within a toggle group should use a unique value.\n */\n value: AcceptableValue\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { injectToggleGroupRootContext } from './ToggleGroupRoot.vue'\nimport { Toggle } from '@/Toggle'\nimport { RovingFocusItem } from '@/RovingFocus'\nimport { Primitive } from '@/Primitive'\n\nconst props = withDefaults(defineProps<ToggleGroupItemProps>(), {\n as: 'button',\n})\n\nconst rootContext = injectToggleGroupRootContext()\nconst disabled = computed(() => rootContext.disabled?.value || props.disabled)\nconst pressed = computed(() => isValueEqualOrExist(rootContext.modelValue.value, props.value))\n\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n <component\n :is=\"rootContext.rovingFocus.value ? RovingFocusItem : Primitive\"\n as-child\n :focusable=\"!disabled\"\n :active=\"pressed\"\n >\n <Toggle\n v-bind=\"props\"\n :ref=\"forwardRef\"\n :disabled=\"disabled\"\n :model-value=\"pressed\"\n @update:model-value=\"rootContext.changeModelValue(value)\"\n >\n <slot />\n </Toggle>\n </component>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAoBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,4BAA6B,EAAA;AACjD,IAAA,MAAM,WAAW,QAAS,CAAA,MAAM,YAAY,QAAU,EAAA,KAAA,IAAS,MAAM,QAAQ,CAAA;AAC7E,IAAM,MAAA,OAAA,GAAU,SAAS,MAAM,mBAAA,CAAoB,YAAY,UAAW,CAAA,KAAA,EAAO,KAAM,CAAA,KAAK,CAAC,CAAA;AAE7F,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -9,8 +9,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
9
9
|
__name: "ToolbarToggleItem",
|
|
10
10
|
props: {
|
|
11
11
|
value: {},
|
|
12
|
-
defaultValue: { type: Boolean },
|
|
13
|
-
modelValue: { type: [Boolean, null] },
|
|
14
12
|
disabled: { type: Boolean },
|
|
15
13
|
asChild: { type: Boolean },
|
|
16
14
|
as: {}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarToggleItem.cjs","sources":["../../src/Toolbar/ToolbarToggleItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleGroupItemProps } from '@/ToggleGroup'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ToolbarToggleItemProps extends ToggleGroupItemProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport ToolbarButton from './ToolbarButton.vue'\nimport { ToggleGroupItem } from '@/ToggleGroup'\n\nconst props = defineProps<ToolbarToggleItemProps>()\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n <ToolbarButton as-child>\n <ToggleGroupItem\n v-bind=\"props\"\n :ref=\"forwardRef\"\n >\n <slot />\n </ToggleGroupItem>\n </ToolbarButton>\n</template>\n"],"names":["useForwardExpose"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolbarToggleItem.cjs","sources":["../../src/Toolbar/ToolbarToggleItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleGroupItemProps } from '@/ToggleGroup'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ToolbarToggleItemProps extends ToggleGroupItemProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport ToolbarButton from './ToolbarButton.vue'\nimport { ToggleGroupItem } from '@/ToggleGroup'\n\nconst props = defineProps<ToolbarToggleItemProps>()\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n <ToolbarButton as-child>\n <ToggleGroupItem\n v-bind=\"props\"\n :ref=\"forwardRef\"\n >\n <slot />\n </ToggleGroupItem>\n </ToolbarButton>\n</template>\n"],"names":["useForwardExpose"],"mappings":";;;;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,wCAAiB,EAAA;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarToggleItem.js","sources":["../../src/Toolbar/ToolbarToggleItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleGroupItemProps } from '@/ToggleGroup'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ToolbarToggleItemProps extends ToggleGroupItemProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport ToolbarButton from './ToolbarButton.vue'\nimport { ToggleGroupItem } from '@/ToggleGroup'\n\nconst props = defineProps<ToolbarToggleItemProps>()\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n <ToolbarButton as-child>\n <ToggleGroupItem\n v-bind=\"props\"\n :ref=\"forwardRef\"\n >\n <slot />\n </ToggleGroupItem>\n </ToolbarButton>\n</template>\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToolbarToggleItem.js","sources":["../../src/Toolbar/ToolbarToggleItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ToggleGroupItemProps } from '@/ToggleGroup'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ToolbarToggleItemProps extends ToggleGroupItemProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport ToolbarButton from './ToolbarButton.vue'\nimport { ToggleGroupItem } from '@/ToggleGroup'\n\nconst props = defineProps<ToolbarToggleItemProps>()\nconst { forwardRef } = useForwardExpose()\n</script>\n\n<template>\n <ToolbarButton as-child>\n <ToggleGroupItem\n v-bind=\"props\"\n :ref=\"forwardRef\"\n >\n <slot />\n </ToggleGroupItem>\n </ToolbarButton>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2784,7 +2784,7 @@ export declare interface ComboboxInputProps extends ListboxFilterProps {
|
|
|
2784
2784
|
}
|
|
2785
2785
|
|
|
2786
2786
|
export declare const ComboboxItem: <T extends AcceptableValue = AcceptableValue>(__VLS_props: {
|
|
2787
|
-
readonly onSelect?: ((event:
|
|
2787
|
+
readonly onSelect?: ((event: ListboxItemSelectEvent<T>) => any) | undefined;
|
|
2788
2788
|
textValue?: string | undefined;
|
|
2789
2789
|
value: T;
|
|
2790
2790
|
disabled?: boolean | undefined;
|
|
@@ -2795,10 +2795,10 @@ export declare const ComboboxItem: <T extends AcceptableValue = AcceptableValue>
|
|
|
2795
2795
|
default?(_: {}): any;
|
|
2796
2796
|
};
|
|
2797
2797
|
attrs: any;
|
|
2798
|
-
emit: (evt: "select", event:
|
|
2798
|
+
emit: (evt: "select", event: ListboxItemSelectEvent<T>) => void;
|
|
2799
2799
|
} | undefined, __VLS_expose?: ((exposed: ShallowUnwrapRef< {}>) => void) | undefined, __VLS_setup?: Promise<{
|
|
2800
2800
|
props: {
|
|
2801
|
-
readonly onSelect?: ((event:
|
|
2801
|
+
readonly onSelect?: ((event: ListboxItemSelectEvent<T>) => any) | undefined;
|
|
2802
2802
|
textValue?: string | undefined;
|
|
2803
2803
|
value: T;
|
|
2804
2804
|
disabled?: boolean | undefined;
|
|
@@ -2810,13 +2810,13 @@ export declare const ComboboxItem: <T extends AcceptableValue = AcceptableValue>
|
|
|
2810
2810
|
slots: {
|
|
2811
2811
|
default?(_: {}): any;
|
|
2812
2812
|
};
|
|
2813
|
-
emit: (evt: "select", event:
|
|
2813
|
+
emit: (evt: "select", event: ListboxItemSelectEvent<T>) => void;
|
|
2814
2814
|
}>) => VNode<RendererNode, RendererElement, {
|
|
2815
2815
|
[key: string]: any;
|
|
2816
2816
|
}> & {
|
|
2817
2817
|
__ctx?: {
|
|
2818
2818
|
props: {
|
|
2819
|
-
readonly onSelect?: ((event:
|
|
2819
|
+
readonly onSelect?: ((event: ListboxItemSelectEvent<T>) => any) | undefined;
|
|
2820
2820
|
textValue?: string | undefined;
|
|
2821
2821
|
value: T;
|
|
2822
2822
|
disabled?: boolean | undefined;
|
|
@@ -2828,7 +2828,7 @@ export declare const ComboboxItem: <T extends AcceptableValue = AcceptableValue>
|
|
|
2828
2828
|
slots: {
|
|
2829
2829
|
default?(_: {}): any;
|
|
2830
2830
|
};
|
|
2831
|
-
emit: (evt: "select", event:
|
|
2831
|
+
emit: (evt: "select", event: ListboxItemSelectEvent<T>) => void;
|
|
2832
2832
|
} | undefined;
|
|
2833
2833
|
};
|
|
2834
2834
|
|
|
@@ -4386,7 +4386,7 @@ declare type DismissableLayerEmits = {
|
|
|
4386
4386
|
*/
|
|
4387
4387
|
escapeKeyDown: [event: KeyboardEvent];
|
|
4388
4388
|
/**
|
|
4389
|
-
* Event handler called when
|
|
4389
|
+
* Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.
|
|
4390
4390
|
* Can be prevented.
|
|
4391
4391
|
*/
|
|
4392
4392
|
pointerDownOutside: [event: PointerDownOutsideEvent];
|
|
@@ -5234,7 +5234,7 @@ export declare interface ListboxGroupProps extends PrimitiveProps {
|
|
|
5234
5234
|
}
|
|
5235
5235
|
|
|
5236
5236
|
export declare const ListboxItem: <T extends AcceptableValue = AcceptableValue>(__VLS_props: {
|
|
5237
|
-
readonly onSelect?: ((event:
|
|
5237
|
+
readonly onSelect?: ((event: ListboxItemSelectEvent<T>) => any) | undefined;
|
|
5238
5238
|
value: T;
|
|
5239
5239
|
disabled?: boolean | undefined;
|
|
5240
5240
|
asChild?: boolean | undefined;
|
|
@@ -5244,10 +5244,10 @@ export declare const ListboxItem: <T extends AcceptableValue = AcceptableValue>(
|
|
|
5244
5244
|
default?(_: {}): any;
|
|
5245
5245
|
};
|
|
5246
5246
|
attrs: any;
|
|
5247
|
-
emit: (evt: "select", event:
|
|
5247
|
+
emit: (evt: "select", event: ListboxItemSelectEvent<T>) => void;
|
|
5248
5248
|
} | undefined, __VLS_expose?: ((exposed: ShallowUnwrapRef< {}>) => void) | undefined, __VLS_setup?: Promise<{
|
|
5249
5249
|
props: {
|
|
5250
|
-
readonly onSelect?: ((event:
|
|
5250
|
+
readonly onSelect?: ((event: ListboxItemSelectEvent<T>) => any) | undefined;
|
|
5251
5251
|
value: T;
|
|
5252
5252
|
disabled?: boolean | undefined;
|
|
5253
5253
|
asChild?: boolean | undefined;
|
|
@@ -5258,13 +5258,13 @@ export declare const ListboxItem: <T extends AcceptableValue = AcceptableValue>(
|
|
|
5258
5258
|
slots: {
|
|
5259
5259
|
default?(_: {}): any;
|
|
5260
5260
|
};
|
|
5261
|
-
emit: (evt: "select", event:
|
|
5261
|
+
emit: (evt: "select", event: ListboxItemSelectEvent<T>) => void;
|
|
5262
5262
|
}>) => VNode<RendererNode, RendererElement, {
|
|
5263
5263
|
[key: string]: any;
|
|
5264
5264
|
}> & {
|
|
5265
5265
|
__ctx?: {
|
|
5266
5266
|
props: {
|
|
5267
|
-
readonly onSelect?: ((event:
|
|
5267
|
+
readonly onSelect?: ((event: ListboxItemSelectEvent<T>) => any) | undefined;
|
|
5268
5268
|
value: T;
|
|
5269
5269
|
disabled?: boolean | undefined;
|
|
5270
5270
|
asChild?: boolean | undefined;
|
|
@@ -5275,7 +5275,7 @@ export declare const ListboxItem: <T extends AcceptableValue = AcceptableValue>(
|
|
|
5275
5275
|
slots: {
|
|
5276
5276
|
default?(_: {}): any;
|
|
5277
5277
|
};
|
|
5278
|
-
emit: (evt: "select", event:
|
|
5278
|
+
emit: (evt: "select", event: ListboxItemSelectEvent<T>) => void;
|
|
5279
5279
|
} | undefined;
|
|
5280
5280
|
};
|
|
5281
5281
|
|
|
@@ -5285,7 +5285,7 @@ declare interface ListboxItemContext {
|
|
|
5285
5285
|
|
|
5286
5286
|
export declare type ListboxItemEmits<T = AcceptableValue> = {
|
|
5287
5287
|
/** Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`. */
|
|
5288
|
-
select: [event:
|
|
5288
|
+
select: [event: ListboxItemSelectEvent<T>];
|
|
5289
5289
|
};
|
|
5290
5290
|
|
|
5291
5291
|
export declare const ListboxItemIndicator: __VLS_WithTemplateSlots_148<DefineComponent<ListboxItemIndicatorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ListboxItemIndicatorProps> & Readonly<{}>, {
|
|
@@ -5304,6 +5304,11 @@ export declare interface ListboxItemProps<T = AcceptableValue> extends Primitive
|
|
|
5304
5304
|
disabled?: boolean;
|
|
5305
5305
|
}
|
|
5306
5306
|
|
|
5307
|
+
export declare type ListboxItemSelectEvent<T> = CustomEvent<{
|
|
5308
|
+
originalEvent: PointerEvent;
|
|
5309
|
+
value?: T;
|
|
5310
|
+
}>;
|
|
5311
|
+
|
|
5307
5312
|
export declare const ListboxRoot: <T extends AcceptableValue = AcceptableValue>(__VLS_props: {
|
|
5308
5313
|
readonly "onUpdate:modelValue"?: ((value: AcceptableValue) => any) | undefined;
|
|
5309
5314
|
readonly onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
|
|
@@ -7125,9 +7130,9 @@ export declare interface RadioGroupIndicatorProps extends PrimitiveProps {
|
|
|
7125
7130
|
}
|
|
7126
7131
|
|
|
7127
7132
|
export declare const RadioGroupItem: __VLS_WithTemplateSlots_201<DefineComponent<RadioGroupItemProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
7128
|
-
select: (event:
|
|
7133
|
+
select: (event: RadioGroupItemSelectEvent) => any;
|
|
7129
7134
|
}, string, PublicProps, Readonly<RadioGroupItemProps> & Readonly<{
|
|
7130
|
-
onSelect?: ((event:
|
|
7135
|
+
onSelect?: ((event: RadioGroupItemSelectEvent) => any) | undefined;
|
|
7131
7136
|
}>, {
|
|
7132
7137
|
disabled: boolean;
|
|
7133
7138
|
as: AsTag | Component;
|
|
@@ -7159,6 +7164,11 @@ declare interface RadioGroupItemContext {
|
|
|
7159
7164
|
export declare interface RadioGroupItemProps extends Omit<RadioProps, 'checked'> {
|
|
7160
7165
|
}
|
|
7161
7166
|
|
|
7167
|
+
export declare type RadioGroupItemSelectEvent = CustomEvent<{
|
|
7168
|
+
originalEvent: MouseEvent;
|
|
7169
|
+
value?: AcceptableValue;
|
|
7170
|
+
}>;
|
|
7171
|
+
|
|
7162
7172
|
export declare const RadioGroupRoot: __VLS_WithTemplateSlots_200<DefineComponent<RadioGroupRootProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
7163
7173
|
"update:modelValue": (payload: string) => any;
|
|
7164
7174
|
}, string, PublicProps, Readonly<RadioGroupRootProps> & Readonly<{
|
|
@@ -7726,7 +7736,7 @@ declare type SelectContentImplEmits = {
|
|
|
7726
7736
|
*/
|
|
7727
7737
|
escapeKeyDown: [event: KeyboardEvent];
|
|
7728
7738
|
/**
|
|
7729
|
-
* Event handler called when
|
|
7739
|
+
* Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.
|
|
7730
7740
|
* Can be prevented.
|
|
7731
7741
|
*/
|
|
7732
7742
|
pointerDownOutside: [event: PointerDownOutsideEvent];
|
|
@@ -7756,21 +7766,6 @@ export declare interface SelectContentProps extends SelectContentImplProps {
|
|
|
7756
7766
|
forceMount?: boolean;
|
|
7757
7767
|
}
|
|
7758
7768
|
|
|
7759
|
-
declare type SelectEvent<T> = CustomEvent<{
|
|
7760
|
-
originalEvent: PointerEvent;
|
|
7761
|
-
value?: T;
|
|
7762
|
-
}>;
|
|
7763
|
-
|
|
7764
|
-
declare type SelectEvent_2 = CustomEvent<{
|
|
7765
|
-
originalEvent: MouseEvent;
|
|
7766
|
-
value?: AcceptableValue;
|
|
7767
|
-
}>;
|
|
7768
|
-
|
|
7769
|
-
declare type SelectEvent_3<T> = CustomEvent<{
|
|
7770
|
-
originalEvent: PointerEvent | KeyboardEvent;
|
|
7771
|
-
value?: T;
|
|
7772
|
-
}>;
|
|
7773
|
-
|
|
7774
7769
|
export declare const SelectGroup: __VLS_WithTemplateSlots_227<DefineComponent<SelectGroupProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SelectGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
|
|
7775
7770
|
default?(_: {}): any;
|
|
7776
7771
|
}>;
|
|
@@ -7792,7 +7787,7 @@ export declare interface SelectIconProps extends PrimitiveProps {
|
|
|
7792
7787
|
}
|
|
7793
7788
|
|
|
7794
7789
|
export declare const SelectItem: <T extends AcceptableValue = AcceptableValue>(__VLS_props: {
|
|
7795
|
-
readonly onSelect?: ((event:
|
|
7790
|
+
readonly onSelect?: ((event: SelectItemSelectEvent<T>) => any) | undefined;
|
|
7796
7791
|
value: AcceptableValue;
|
|
7797
7792
|
disabled?: boolean | undefined;
|
|
7798
7793
|
textValue?: string | undefined;
|
|
@@ -7803,10 +7798,10 @@ export declare const SelectItem: <T extends AcceptableValue = AcceptableValue>(_
|
|
|
7803
7798
|
default?(_: {}): any;
|
|
7804
7799
|
};
|
|
7805
7800
|
attrs: any;
|
|
7806
|
-
emit: (evt: "select", event:
|
|
7801
|
+
emit: (evt: "select", event: SelectItemSelectEvent<T>) => void;
|
|
7807
7802
|
} | undefined, __VLS_expose?: ((exposed: ShallowUnwrapRef< {}>) => void) | undefined, __VLS_setup?: Promise<{
|
|
7808
7803
|
props: {
|
|
7809
|
-
readonly onSelect?: ((event:
|
|
7804
|
+
readonly onSelect?: ((event: SelectItemSelectEvent<T>) => any) | undefined;
|
|
7810
7805
|
value: AcceptableValue;
|
|
7811
7806
|
disabled?: boolean | undefined;
|
|
7812
7807
|
textValue?: string | undefined;
|
|
@@ -7818,13 +7813,13 @@ export declare const SelectItem: <T extends AcceptableValue = AcceptableValue>(_
|
|
|
7818
7813
|
slots: {
|
|
7819
7814
|
default?(_: {}): any;
|
|
7820
7815
|
};
|
|
7821
|
-
emit: (evt: "select", event:
|
|
7816
|
+
emit: (evt: "select", event: SelectItemSelectEvent<T>) => void;
|
|
7822
7817
|
}>) => VNode<RendererNode, RendererElement, {
|
|
7823
7818
|
[key: string]: any;
|
|
7824
7819
|
}> & {
|
|
7825
7820
|
__ctx?: {
|
|
7826
7821
|
props: {
|
|
7827
|
-
readonly onSelect?: ((event:
|
|
7822
|
+
readonly onSelect?: ((event: SelectItemSelectEvent<T>) => any) | undefined;
|
|
7828
7823
|
value: AcceptableValue;
|
|
7829
7824
|
disabled?: boolean | undefined;
|
|
7830
7825
|
textValue?: string | undefined;
|
|
@@ -7836,7 +7831,7 @@ export declare const SelectItem: <T extends AcceptableValue = AcceptableValue>(_
|
|
|
7836
7831
|
slots: {
|
|
7837
7832
|
default?(_: {}): any;
|
|
7838
7833
|
};
|
|
7839
|
-
emit: (evt: "select", event:
|
|
7834
|
+
emit: (evt: "select", event: SelectItemSelectEvent<T>) => void;
|
|
7840
7835
|
} | undefined;
|
|
7841
7836
|
};
|
|
7842
7837
|
|
|
@@ -7872,6 +7867,11 @@ export declare interface SelectItemProps<T = AcceptableValue> extends PrimitiveP
|
|
|
7872
7867
|
textValue?: string;
|
|
7873
7868
|
}
|
|
7874
7869
|
|
|
7870
|
+
export declare type SelectItemSelectEvent<T> = CustomEvent<{
|
|
7871
|
+
originalEvent: PointerEvent | KeyboardEvent;
|
|
7872
|
+
value?: T;
|
|
7873
|
+
}>;
|
|
7874
|
+
|
|
7875
7875
|
export declare const SelectItemText: __VLS_WithTemplateSlots_228<DefineComponent<SelectItemTextProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SelectItemTextProps> & Readonly<{}>, {
|
|
7876
7876
|
as: AsTag | Component;
|
|
7877
7877
|
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
|
|
@@ -9425,7 +9425,7 @@ as: AsTag | Component;
|
|
|
9425
9425
|
default?(_: {}): any;
|
|
9426
9426
|
}>;
|
|
9427
9427
|
|
|
9428
|
-
export declare interface ToggleGroupItemProps extends Omit<ToggleProps, 'name' | 'required'> {
|
|
9428
|
+
export declare interface ToggleGroupItemProps extends Omit<ToggleProps, 'name' | 'required' | 'modelValue' | 'defaultValue'> {
|
|
9429
9429
|
/**
|
|
9430
9430
|
* A string value for the toggle group item. All items within a toggle group should use a unique value.
|
|
9431
9431
|
*/
|