ropav 0.1.6 → 0.1.8
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 +7 -1
- package/dist/accordion.css +17 -17
- package/dist/accordion.js +123 -155
- package/dist/alert.css +18 -18
- package/dist/alert.js +10 -11
- package/dist/ancestry.js +136 -0
- package/dist/aria.js +14 -0
- package/dist/aspect-ratio.js +1 -1
- package/dist/attributes.js +9 -0
- package/dist/attributes2.js +29 -0
- package/dist/avatar.css +19 -19
- package/dist/avatar.js +9 -17
- package/dist/badge.css +16 -16
- package/dist/badge.js +5 -5
- package/dist/button-group.js +1 -1
- package/dist/button-link.js +4 -3
- package/dist/button.js +4 -3
- package/dist/button.scss_vue_type_style_index_0_src_true_lang.js +1 -1
- package/dist/calendar.css +173 -0
- package/dist/calendar.js +714 -0
- package/dist/calendar2.js +37 -0
- package/dist/card.js +1 -1
- package/dist/checkbox.css +32 -32
- package/dist/checkbox.js +22 -28
- package/dist/chevron-left.js +12 -0
- package/dist/collapse.css +6 -6
- package/dist/collapse.js +7 -6
- package/dist/collectionNavigation.js +2 -99
- package/dist/color-input.css +19 -19
- package/dist/color-input.js +14 -13
- package/dist/color-picker.css +40 -40
- package/dist/color-picker.js +247 -276
- package/dist/color-picker2.js +1 -9
- package/dist/color-swatch.css +4 -4
- package/dist/color-swatch.js +6 -8
- package/dist/color.js +5 -10
- package/dist/combobox.css +251 -0
- package/dist/combobox.js +410 -0
- package/dist/componentColors.js +125 -84
- package/dist/componentRef.js +26 -0
- package/dist/components/accordion/accordionContext.d.ts +3 -0
- package/dist/components/accordion/accordionModel.d.ts +14 -0
- package/dist/components/accordion/index.d.ts +2 -1
- package/dist/components/accordion/index.js +1 -1
- package/dist/components/accordion/types.d.ts +1 -2
- package/dist/components/accordion/useAccordion.d.ts +2 -2
- package/dist/components/accordion/useAccordionItem.d.ts +2 -0
- package/dist/components/calendar/calendar.d.ts +30 -0
- package/dist/components/calendar/calendarBehavior.d.ts +49 -0
- package/dist/components/calendar/index.d.ts +3 -0
- package/dist/components/calendar/index.js +3 -0
- package/dist/components/calendar/types.d.ts +53 -0
- package/dist/components/calendar/useCalendar.d.ts +24 -0
- package/dist/components/checkbox/useCheckbox.d.ts +1 -2
- package/dist/components/color-picker/index.js +2 -2
- package/dist/components/color-picker/types.d.ts +2 -2
- package/dist/components/color-picker/useColorPickerDrag.d.ts +1 -1
- package/dist/components/color-picker/useColorPickerSaturation.d.ts +22 -0
- package/dist/components/color-picker/useColorPickerSlider.d.ts +20 -0
- package/dist/components/color-picker/useColorPickerValue.d.ts +1 -1
- package/dist/components/combobox/combobox.d.ts +29 -0
- package/dist/components/combobox/comboboxModel.d.ts +4 -0
- package/dist/components/combobox/index.d.ts +3 -0
- package/dist/components/combobox/index.js +2 -0
- package/dist/components/combobox/types.d.ts +43 -0
- package/dist/components/combobox/useCombobox.d.ts +45 -0
- package/dist/components/date-picker/date-picker.d.ts +33 -0
- package/dist/components/date-picker/datePickerModel.d.ts +10 -0
- package/dist/components/date-picker/index.d.ts +4 -0
- package/dist/components/date-picker/index.js +2 -0
- package/dist/components/date-picker/types.d.ts +57 -0
- package/dist/components/date-picker/useDatePicker.d.ts +29 -0
- package/dist/components/date-picker/useDatePickerValueState.d.ts +21 -0
- package/dist/components/dialog/{dialog-core.d.ts → dialogContext.d.ts} +1 -5
- package/dist/components/dialog/useDialogContentInteractions.d.ts +18 -0
- package/dist/components/dialog/useDialogRootState.d.ts +19 -0
- package/dist/components/dropdown-menu/dropdown-menu-content.d.ts +2 -2
- package/dist/components/dropdown-menu/dropdown-menu-item-row.d.ts +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-items.d.ts +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-model.d.ts +8 -0
- package/dist/components/dropdown-menu/dropdown-menu-root.d.ts +2 -2
- package/dist/components/dropdown-menu/dropdown-menu-sub-content.d.ts +2 -2
- package/dist/components/dropdown-menu/dropdown-menu-sub-trigger.d.ts +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-sub.d.ts +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.d.ts +2 -2
- package/dist/components/dropdown-menu/{dropdown-menu-primitive-core.d.ts → dropdownMenuContext.d.ts} +17 -30
- package/dist/components/dropdown-menu/dropdownMenuDataModel.d.ts +20 -0
- package/dist/components/dropdown-menu/dropdownMenuInteraction.d.ts +3 -0
- package/dist/components/dropdown-menu/dropdownMenuInteractionNavigation.d.ts +24 -0
- package/dist/components/dropdown-menu/dropdownMenuInteractionRegistry.d.ts +42 -0
- package/dist/components/dropdown-menu/dropdownMenuInteractionTypes.d.ts +114 -0
- package/dist/components/dropdown-menu/useDropdownMenu.d.ts +11 -11
- package/dist/components/dropdown-menu/useDropdownMenuContextTrigger.d.ts +9 -0
- package/dist/components/dropdown-menu/useDropdownMenuDataController.d.ts +35 -0
- package/dist/components/dropdown-menu/useDropdownMenuDataRegistration.d.ts +24 -0
- package/dist/components/dropdown-menu/useDropdownMenuHoverIntent.d.ts +6 -5
- package/dist/components/dropdown-menu/useDropdownMenuInteractionDismissal.d.ts +17 -0
- package/dist/components/dropdown-menu/useDropdownMenuInteractionKeyboard.d.ts +19 -0
- package/dist/components/dropdown-menu/useDropdownMenuPortalPosition.d.ts +0 -1
- package/dist/components/dropdown-menu/useDropdownMenuPresentation.d.ts +28 -0
- package/dist/components/dropdown-menu/useDropdownMenuPrimitiveContent.d.ts +2 -2
- package/dist/components/dropdown-menu/useDropdownMenuRenderItems.d.ts +1 -1
- package/dist/components/dropdown-menu/useDropdownMenuTargetBindings.d.ts +19 -0
- package/dist/components/dropzone/dropzone.d.ts +31 -0
- package/dist/components/dropzone/dropzoneModel.d.ts +16 -0
- package/dist/components/dropzone/index.d.ts +3 -0
- package/dist/components/dropzone/index.js +2 -0
- package/dist/components/dropzone/types.d.ts +56 -0
- package/dist/components/dropzone/useDropzone.d.ts +25 -0
- package/dist/components/file-input/file-input.d.ts +29 -0
- package/dist/components/file-input/index.d.ts +3 -0
- package/dist/components/file-input/index.js +2 -0
- package/dist/components/file-input/types.d.ts +37 -0
- package/dist/components/file-input/useFileInput.d.ts +15 -0
- package/dist/components/floating/index.js +2 -2
- package/dist/components/floating/useFloatingPosition.d.ts +1 -14
- package/dist/components/floating/useFloatingTargetLifecycle.d.ts +32 -0
- package/dist/components/floating/useHoverDisclosure.d.ts +10 -0
- package/dist/components/hover-card/hover-card.d.ts +25 -0
- package/dist/components/hover-card/index.d.ts +3 -0
- package/dist/components/hover-card/index.js +2 -0
- package/dist/components/hover-card/types.d.ts +45 -0
- package/dist/components/hover-card/useHoverCard.d.ts +22 -0
- package/dist/components/hover-card/useHoverCardDisclosure.d.ts +19 -0
- package/dist/components/multi-select/index.d.ts +3 -0
- package/dist/components/multi-select/index.js +2 -0
- package/dist/components/multi-select/multi-select.d.ts +30 -0
- package/dist/components/multi-select/multiSelectModel.d.ts +3 -0
- package/dist/components/multi-select/types.d.ts +49 -0
- package/dist/components/multi-select/useMultiSelect.d.ts +46 -0
- package/dist/components/number-input/numberInputModel.d.ts +15 -0
- package/dist/components/number-input/useNumberInput.d.ts +3 -19
- package/dist/components/pagination/index.d.ts +1 -1
- package/dist/components/pagination/index.js +1 -1
- package/dist/components/pagination/paginationModel.d.ts +4 -0
- package/dist/components/pagination/types.d.ts +15 -0
- package/dist/components/pagination/usePagination.d.ts +3 -19
- package/dist/components/popover/usePopoverBindings.d.ts +13 -0
- package/dist/components/progress/progressModel.d.ts +8 -0
- package/dist/components/progress/useProgress.d.ts +0 -6
- package/dist/components/radio/useRadio.d.ts +1 -2
- package/dist/components/scroll-area/scroll-area.d.ts +1 -1
- package/dist/components/scroll-area/scrollAreaModel.d.ts +64 -0
- package/dist/components/scroll-area/useScrollArea.d.ts +70 -53
- package/dist/components/scroll-area/{useScrollAreaPresentation.d.ts → useScrollAreaAttributes.d.ts} +37 -17
- package/dist/components/scroll-area/useScrollAreaDerivedState.d.ts +8 -0
- package/dist/components/scroll-area/useScrollAreaMeasurement.d.ts +35 -0
- package/dist/components/scroll-area/useScrollAreaPointer.d.ts +11 -9
- package/dist/components/scroll-area/useScrollAreaVisibility.d.ts +15 -20
- package/dist/components/segmented-control/index.d.ts +3 -0
- package/dist/components/segmented-control/index.js +2 -0
- package/dist/components/segmented-control/segmented-control.d.ts +26 -0
- package/dist/components/segmented-control/types.d.ts +47 -0
- package/dist/components/segmented-control/useSegmentedControl.d.ts +15 -0
- package/dist/components/select/useSelect.d.ts +31 -19
- package/dist/components/slider/rangeSliderModel.d.ts +41 -0
- package/dist/components/slider/{sliderCore.d.ts → sliderModel.d.ts} +0 -1
- package/dist/components/slider/useRangeSlider.d.ts +9 -17
- package/dist/components/slider/useRangeSliderPointer.d.ts +1 -1
- package/dist/components/slider/useRangeSliderValueState.d.ts +40 -0
- package/dist/components/slider/useSlider.d.ts +7 -13
- package/dist/components/slider/useSliderPointerPreview.d.ts +22 -0
- package/dist/components/slider/useSliderTooltipState.d.ts +40 -0
- package/dist/components/slider/useSliderValueState.d.ts +33 -0
- package/dist/components/tags-input/index.d.ts +3 -0
- package/dist/components/tags-input/index.js +2 -0
- package/dist/components/tags-input/tags-input.d.ts +27 -0
- package/dist/components/tags-input/tagsInputModel.d.ts +12 -0
- package/dist/components/tags-input/types.d.ts +37 -0
- package/dist/components/tags-input/useTagsInput.d.ts +23 -0
- package/dist/components/teleport-provider/index.js +1 -1
- package/dist/components/teleport-provider/useTeleportTarget.d.ts +1 -2
- package/dist/components/toast/useToastLifecycle.d.ts +19 -0
- package/dist/components/tooltip/useTooltip.d.ts +1 -2
- package/dist/components/tooltip/useTooltipTargetBindings.d.ts +12 -0
- package/dist/css.js +12 -0
- package/dist/date-picker.css +49 -0
- package/dist/date-picker.js +809 -0
- package/dist/dialog.js +215 -218
- package/dist/direction.js +6 -0
- package/dist/dropdown-menu.css +21 -3
- package/dist/dropdown-menu.js +1626 -1185
- package/dist/dropzone.css +135 -0
- package/dist/dropzone.js +431 -0
- package/dist/events.js +59 -0
- package/dist/field.css +8 -8
- package/dist/field.js +13 -25
- package/dist/file-input.css +135 -0
- package/dist/file-input.js +198 -0
- package/dist/floatingOffset.js +11 -0
- package/dist/focus-trap.js +7 -5
- package/dist/focusNavigation.js +37 -0
- package/dist/hover-card.css +80 -0
- package/dist/hover-card.js +402 -0
- package/dist/icon-button.css +8 -8
- package/dist/icon-button.js +7 -6
- package/dist/index.d.ts +9 -0
- package/dist/index.js +20 -9
- package/dist/input.css +24 -24
- package/dist/input.js +19 -31
- package/dist/interactive.js +18 -0
- package/dist/internal/composables/useOverlayLayer.d.ts +12 -0
- package/dist/modal.js +2 -2
- package/dist/multi-select.css +316 -0
- package/dist/multi-select.js +481 -0
- package/dist/nativeChoice.js +169 -0
- package/dist/number-input.css +18 -18
- package/dist/number-input.js +44 -44
- package/dist/number.js +22 -0
- package/dist/overlay.js +3 -2
- package/dist/pagination.css +28 -28
- package/dist/pagination.js +66 -73
- package/dist/pointerSession.js +130 -0
- package/dist/popover.css +55 -37
- package/dist/popover.js +75 -101
- package/dist/progress.js +10 -13
- package/dist/query.js +40 -0
- package/dist/radio.css +18 -18
- package/dist/radio.js +30 -36
- package/dist/rafScheduler.js +34 -0
- package/dist/scroll-area.css +28 -28
- package/dist/scroll-area.js +540 -554
- package/dist/segmented-control.css +176 -0
- package/dist/segmented-control.js +382 -0
- package/dist/select.css +50 -48
- package/dist/select.js +131 -289
- package/dist/slider.css +191 -191
- package/dist/slider.js +720 -706
- package/dist/styles-api.d.ts +0 -1
- package/dist/styles-api.js +1 -4
- package/dist/switch.css +17 -17
- package/dist/switch.js +14 -15
- package/dist/tabs.css +43 -43
- package/dist/tabs.js +29 -56
- package/dist/tags-input.css +197 -0
- package/dist/tags-input.js +380 -0
- package/dist/text.js +17 -0
- package/dist/textarea.css +26 -26
- package/dist/textarea.js +21 -32
- package/dist/toast.css +26 -26
- package/dist/toast.js +141 -118
- package/dist/tooltip.css +12 -12
- package/dist/tooltip.js +64 -63
- package/dist/useCollapse.js +8 -11
- package/dist/useControlState.js +3 -6
- package/dist/useEditableOptionList.js +216 -0
- package/dist/useFlatOptionCollection.js +134 -0
- package/dist/useFloatingPosition.js +14 -40
- package/dist/useFloatingTargetLifecycle.js +127 -0
- package/dist/useFormControl.js +1 -0
- package/dist/useHoverDisclosure.js +561 -0
- package/dist/useNativeChoiceTransaction.js +46 -0
- package/dist/useNativeFileSelection.js +86 -0
- package/dist/useOverlayZIndex.js +246 -19
- package/dist/useTeleportTarget.js +3 -14
- package/dist/useTypeahead.js +94 -0
- package/dist/utils/aria.d.ts +3 -0
- package/dist/utils/attributes.d.ts +2 -0
- package/dist/utils/bem.d.ts +3 -0
- package/dist/utils/collectionNavigation.d.ts +2 -0
- package/dist/utils/color.d.ts +7 -0
- package/dist/{components/color-picker/color-picker-utils.d.ts → utils/colorPicker.d.ts} +5 -4
- package/dist/utils/componentColors.d.ts +7 -0
- package/dist/utils/css.d.ts +3 -0
- package/dist/utils/date.d.ts +13 -0
- package/dist/utils/dateAvailability.d.ts +7 -0
- package/dist/utils/dom/ancestry.d.ts +8 -0
- package/dist/utils/dom/attributes.d.ts +16 -0
- package/dist/utils/dom/componentRef.d.ts +4 -0
- package/dist/utils/dom/direction.d.ts +2 -0
- package/dist/utils/dom/events.d.ts +5 -0
- package/dist/utils/dom/files.d.ts +3 -0
- package/dist/utils/dom/focusNavigation.d.ts +7 -0
- package/dist/utils/dom/interactive.d.ts +2 -0
- package/dist/utils/dom/nativeChoice.d.ts +17 -0
- package/dist/utils/dom/pointerSession.d.ts +20 -0
- package/dist/utils/dom/query.d.ts +4 -0
- package/dist/utils/dom/scroll.d.ts +24 -0
- package/dist/utils/floatingOffset.d.ts +10 -0
- package/dist/utils/geometry.d.ts +14 -0
- package/dist/utils/indexPath.d.ts +6 -0
- package/dist/utils/number.d.ts +4 -0
- package/dist/utils/optionFilter.d.ts +5 -0
- package/dist/utils/rafScheduler.d.ts +4 -0
- package/dist/utils/text.d.ts +2 -0
- package/docs/code-architecture.md +118 -0
- package/docs/public-floating-api.md +13 -9
- package/docs/public-styles-api.md +25 -12
- package/package.json +51 -14
- package/src/styles/_mixins.scss +26 -0
- package/src/styles/styles-manifest.json +1 -2
- package/dist/components/dropdown-menu/dropdown-menu-outside.d.ts +0 -3
- package/dist/components/dropdown-menu/dropdown-menu-utils.d.ts +0 -21
- package/dist/components/dropdown-menu/useDropdownMenuDisclosure.d.ts +0 -36
- package/dist/components/dropdown-menu/useDropdownMenuDom.d.ts +0 -29
- package/dist/components/dropdown-menu/useDropdownMenuInteractions.d.ts +0 -52
- package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +0 -17
- package/dist/components/dropdown-menu/useDropdownSubmenus.d.ts +0 -18
- package/dist/components/scroll-area/scrollAreaCore.d.ts +0 -30
- package/dist/components/scroll-area/useScrollAreaControls.d.ts +0 -25
- package/dist/components/scroll-area/useScrollAreaMetrics.d.ts +0 -38
- package/dist/components/select/useSelectNativeControl.d.ts +0 -9
- package/dist/components/select/useSelectNativeValue.d.ts +0 -9
- package/dist/floating.js +0 -415
- /package/dist/components/alert/{useAlertColor.d.ts → alertColor.d.ts} +0 -0
- /package/dist/components/avatar/{useAvatarColor.d.ts → avatarColor.d.ts} +0 -0
- /package/dist/components/badge/{useBadgeColor.d.ts → badgeColor.d.ts} +0 -0
- /package/dist/components/button/{useButtonColor.d.ts → buttonColor.d.ts} +0 -0
- /package/dist/components/color-swatch/{useColorSwatchColor.d.ts → colorSwatchColor.d.ts} +0 -0
- /package/dist/components/toast/{useToastColor.d.ts → toastColor.d.ts} +0 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { DatePickerProps } from './types.js';
|
|
2
|
+
export type DatePickerValueStateProps = Pick<DatePickerProps, 'id' | 'form' | 'modelValue' | 'defaultValue' | 'locale' | 'dateFormat' | 'formatDate' | 'parseDate' | 'min' | 'max' | 'disabledDates' | 'allowInput' | 'clearable' | 'disabled' | 'readonly' | 'required' | 'invalid' | 'valid' | 'describedby' | 'labelledby' | 'validationMessage' | 'invalidDateMessage'>;
|
|
3
|
+
interface DatePickerValueStateOptions {
|
|
4
|
+
props: Readonly<DatePickerValueStateProps>;
|
|
5
|
+
getInput: () => HTMLInputElement | null;
|
|
6
|
+
onChange: (value: Date | null) => void;
|
|
7
|
+
}
|
|
8
|
+
export declare function useDatePickerValueState(options: Readonly<DatePickerValueStateOptions>): {
|
|
9
|
+
control: import('../../internal/composables/useControlState.js').ControlState;
|
|
10
|
+
selectedDate: import('vue').ComputedRef<Date | null>;
|
|
11
|
+
inputValue: import('vue').ShallowRef<string, string>;
|
|
12
|
+
isInputEditable: import('vue').ComputedRef<boolean>;
|
|
13
|
+
isInvalid: import('vue').ComputedRef<boolean>;
|
|
14
|
+
validationMessage: import('vue').ComputedRef<string | undefined>;
|
|
15
|
+
canClear: import('vue').ComputedRef<boolean>;
|
|
16
|
+
updateInput: (value: string) => void;
|
|
17
|
+
blurInput: () => void;
|
|
18
|
+
selectDate: (value: Date) => boolean;
|
|
19
|
+
clear: () => boolean;
|
|
20
|
+
};
|
|
21
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ComputedRef, InjectionKey, Ref } from 'vue';
|
|
2
2
|
import { OverlayLayerContext } from '../../internal/composables/useOverlayLayer.js';
|
|
3
3
|
import { DialogCloseReason } from './types.js';
|
|
4
4
|
export interface DialogRootContext {
|
|
@@ -22,8 +22,4 @@ export interface DialogRootContext {
|
|
|
22
22
|
registerDescription: (id: string) => () => void;
|
|
23
23
|
}
|
|
24
24
|
export declare const dialogRootKey: InjectionKey<DialogRootContext>;
|
|
25
|
-
export type DialogElementRefValue = Element | ComponentPublicInstance | VaporComponentInstance | null;
|
|
26
25
|
export declare function resolveDialogCloseReason(reason: unknown): DialogCloseReason;
|
|
27
|
-
export declare function toDialogHTMLElement(value: DialogElementRefValue): HTMLElement | null;
|
|
28
|
-
export declare function resolveDialogHTMLElementRef(value: DialogElementRefValue, fallbackId: string, resolve: (element: HTMLElement | null) => void): void;
|
|
29
|
-
export declare function createDialogEvent<T>(type: string, detail: T, originalEvent: Event): CustomEvent<T>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ComponentElementRef } from '../../utils/dom/componentRef.js';
|
|
2
|
+
import { DialogRootContext } from './dialogContext.js';
|
|
3
|
+
import { DialogContentProps, DialogFocusTrapOptions, DialogInteractOutsideEvent } from './types.js';
|
|
4
|
+
type DialogContentInteractionProps = Readonly<DialogContentProps & {
|
|
5
|
+
focusTrapOptions: DialogFocusTrapOptions;
|
|
6
|
+
}>;
|
|
7
|
+
interface DialogContentInteractionEvents {
|
|
8
|
+
escapeKeyDown: (event: CustomEvent<{
|
|
9
|
+
originalEvent: KeyboardEvent;
|
|
10
|
+
}>) => void;
|
|
11
|
+
pointerDownOutside: (event: DialogInteractOutsideEvent) => void;
|
|
12
|
+
interactOutside: (event: DialogInteractOutsideEvent) => void;
|
|
13
|
+
}
|
|
14
|
+
export declare function useDialogContentInteractions(root: DialogRootContext, props: DialogContentInteractionProps, events: Readonly<DialogContentInteractionEvents>): {
|
|
15
|
+
id: import('vue').ComputedRef<string>;
|
|
16
|
+
setElement: (value: ComponentElementRef) => void;
|
|
17
|
+
};
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { DialogRootContext } from './dialogContext.js';
|
|
2
|
+
import { DialogCloseReason, DialogRootProps, DialogRootSlotProps } from './types.js';
|
|
3
|
+
type DialogRootStateProps = Readonly<DialogRootProps & {
|
|
4
|
+
defaultOpen: boolean;
|
|
5
|
+
modal: boolean;
|
|
6
|
+
closeOnEscape: boolean;
|
|
7
|
+
closeOnOutsideClick: boolean;
|
|
8
|
+
preventScroll: boolean;
|
|
9
|
+
returnFocus: boolean;
|
|
10
|
+
}>;
|
|
11
|
+
interface DialogRootStateEvents {
|
|
12
|
+
openChange: (open: boolean) => void;
|
|
13
|
+
close: (reason: DialogCloseReason) => void;
|
|
14
|
+
}
|
|
15
|
+
export declare function useDialogRootState(props: DialogRootStateProps, events: Readonly<DialogRootStateEvents>): {
|
|
16
|
+
context: DialogRootContext;
|
|
17
|
+
slotProps: import('vue').ComputedRef<DialogRootSlotProps>;
|
|
18
|
+
};
|
|
19
|
+
export {};
|
|
@@ -5,8 +5,8 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
|
|
|
5
5
|
originalEvent: KeyboardEvent;
|
|
6
6
|
}>) => any) | undefined;
|
|
7
7
|
onPointerDownOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
|
|
8
|
-
onInteractOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
|
|
9
8
|
onFocusOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
|
|
9
|
+
onInteractOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
|
|
10
10
|
}> & (typeof globalThis extends {
|
|
11
11
|
__VLS_PROPS_FALLBACK: infer P;
|
|
12
12
|
} ? P : {});
|
|
@@ -21,7 +21,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
|
|
|
21
21
|
};
|
|
22
22
|
emit: ((evt: "escapeKeyDown", event: CustomEvent<{
|
|
23
23
|
originalEvent: KeyboardEvent;
|
|
24
|
-
}>) => void) & ((evt: "pointerDownOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "
|
|
24
|
+
}>) => void) & ((evt: "pointerDownOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "focusOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "interactOutside", event: DropdownMenuInteractOutsideEvent) => void);
|
|
25
25
|
}>) => import('vue').VNode & {
|
|
26
26
|
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
27
27
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ItemPath } from './dropdown-menu-
|
|
1
|
+
import { ItemPath } from './dropdown-menu-model.js';
|
|
2
2
|
import { DropdownMenuItem, DropdownMenuItemSlotProps } from './types.js';
|
|
3
3
|
import { DropdownMenuRenderContext } from './useDropdownMenuRenderItems.js';
|
|
4
4
|
declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ItemPath } from './dropdown-menu-
|
|
1
|
+
import { ItemPath } from './dropdown-menu-model.js';
|
|
2
2
|
import { DropdownMenuItem, DropdownMenuItemSlotProps } from './types.js';
|
|
3
3
|
import { DropdownMenuRenderContext } from './useDropdownMenuRenderItems.js';
|
|
4
4
|
declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { DropdownMenuFocusTarget, DropdownMenuItem, DropdownMenuItemPath, DropdownMenuPlacement } from './types.js';
|
|
2
|
+
export declare const DEFAULT_PLACEMENT: DropdownMenuPlacement;
|
|
3
|
+
export declare const DEFAULT_FOCUS_TARGET: DropdownMenuFocusTarget;
|
|
4
|
+
export type ItemPath = DropdownMenuItemPath;
|
|
5
|
+
export type SubmenuFocusTarget = DropdownMenuFocusTarget | false;
|
|
6
|
+
export declare function getItemClass(item: DropdownMenuItem, focused: boolean, disabled: boolean, hasSubmenu: boolean, submenuOpen: boolean): string[];
|
|
7
|
+
export declare function hasItemSubmenu(item: DropdownMenuItem): boolean;
|
|
8
|
+
export declare function hasNestedItems(items: DropdownMenuItem[]): boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DropdownMenuFocusTarget, DropdownMenuOpenOptions, DropdownMenuPoint, DropdownMenuRootPrimitiveProps, DropdownMenuRootSlotProps } from './types.js';
|
|
2
2
|
declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
3
3
|
props: import('vue').PublicProps & __VLS_PrettifyLocal<DropdownMenuRootPrimitiveProps & {
|
|
4
4
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
@@ -7,7 +7,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
|
|
|
7
7
|
} ? P : {});
|
|
8
8
|
expose: (exposed: import('vue').ShallowUnwrapRef<{
|
|
9
9
|
open: (options?: DropdownMenuOpenOptions | DropdownMenuFocusTarget) => void;
|
|
10
|
-
close: (options?: DropdownMenuCloseOptions & {
|
|
10
|
+
close: (options?: import('./types.js').DropdownMenuCloseOptions & {
|
|
11
11
|
returnFocus?: boolean;
|
|
12
12
|
}) => void;
|
|
13
13
|
toggle: () => void;
|
|
@@ -5,8 +5,8 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
|
|
|
5
5
|
originalEvent: KeyboardEvent;
|
|
6
6
|
}>) => any) | undefined;
|
|
7
7
|
onPointerDownOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
|
|
8
|
-
onInteractOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
|
|
9
8
|
onFocusOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
|
|
9
|
+
onInteractOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
|
|
10
10
|
}> & (typeof globalThis extends {
|
|
11
11
|
__VLS_PROPS_FALLBACK: infer P;
|
|
12
12
|
} ? P : {});
|
|
@@ -21,7 +21,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
|
|
|
21
21
|
};
|
|
22
22
|
emit: ((evt: "escapeKeyDown", event: CustomEvent<{
|
|
23
23
|
originalEvent: KeyboardEvent;
|
|
24
|
-
}>) => void) & ((evt: "pointerDownOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "
|
|
24
|
+
}>) => void) & ((evt: "pointerDownOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "focusOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "interactOutside", event: DropdownMenuInteractOutsideEvent) => void);
|
|
25
25
|
}>) => import('vue').VNode & {
|
|
26
26
|
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
27
27
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { OpenFocusTarget } from './
|
|
1
|
+
import { OpenFocusTarget } from './dropdownMenuContext.js';
|
|
2
2
|
import { DropdownMenuSubTriggerPrimitiveProps } from './types.js';
|
|
3
3
|
declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
4
4
|
props: import('vue').PublicProps & __VLS_PrettifyLocal<DropdownMenuSubTriggerPrimitiveProps> & (typeof globalThis extends {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { OpenFocusTarget } from './
|
|
1
|
+
import { OpenFocusTarget } from './dropdownMenuContext.js';
|
|
2
2
|
import { DropdownMenuSubPrimitiveProps } from './types.js';
|
|
3
3
|
declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
4
4
|
props: import('vue').PublicProps & __VLS_PrettifyLocal<DropdownMenuSubPrimitiveProps & {
|
|
@@ -4,8 +4,8 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
|
|
|
4
4
|
onSelect?: ((item: DropdownMenuItem, event: DropdownMenuSelectEvent) => any) | undefined;
|
|
5
5
|
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
6
6
|
onPointerDownOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
|
|
7
|
-
onInteractOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
|
|
8
7
|
onFocusOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
|
|
8
|
+
onInteractOutside?: ((event: DropdownMenuInteractOutsideEvent) => any) | undefined;
|
|
9
9
|
}> & (typeof globalThis extends {
|
|
10
10
|
__VLS_PROPS_FALLBACK: infer P;
|
|
11
11
|
} ? P : {});
|
|
@@ -16,7 +16,7 @@ declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup
|
|
|
16
16
|
item?(props: DropdownMenuItemSlotProps): unknown;
|
|
17
17
|
empty?(): unknown;
|
|
18
18
|
};
|
|
19
|
-
emit: ((evt: "select", item: DropdownMenuItem, event: DropdownMenuSelectEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "pointerDownOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "
|
|
19
|
+
emit: ((evt: "select", item: DropdownMenuItem, event: DropdownMenuSelectEvent) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "pointerDownOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "focusOutside", event: DropdownMenuInteractOutsideEvent) => void) & ((evt: "interactOutside", event: DropdownMenuInteractOutsideEvent) => void);
|
|
20
20
|
}>) => import('vue').VNode & {
|
|
21
21
|
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
22
22
|
};
|
package/dist/components/dropdown-menu/{dropdown-menu-primitive-core.d.ts → dropdownMenuContext.d.ts}
RENAMED
|
@@ -1,42 +1,37 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ComputedRef, InjectionKey, Ref } from 'vue';
|
|
2
2
|
import { OverlayLayerContext } from '../../internal/composables/useOverlayLayer.js';
|
|
3
|
+
import { ComponentElementRef } from '../../utils/dom/componentRef.js';
|
|
3
4
|
import { FloatingReference } from '../floating/types.js';
|
|
4
|
-
import {
|
|
5
|
+
import { DropdownMenuInteraction, DropdownMenuInteractionFocusTarget, DropdownMenuInteractionItem, DropdownMenuInteractionMenu, DropdownMenuInteractionSubmenu } from './dropdownMenuInteraction.js';
|
|
6
|
+
import { DropdownMenuCloseOptions, DropdownMenuFocusTarget, DropdownMenuItemPrimitiveProps, DropdownMenuItemValue, DropdownMenuOpenOptions, DropdownMenuPlacement, DropdownMenuPoint, DropdownMenuSelectEvent, DropdownMenuVirtualAnchor } from './types.js';
|
|
5
7
|
export type ElementReference = FloatingReference;
|
|
6
|
-
export type OpenFocusTarget =
|
|
7
|
-
export type ComponentRefValue = Element | ComponentPublicInstance | VaporComponentInstance | null;
|
|
8
|
+
export type OpenFocusTarget = DropdownMenuInteractionFocusTarget;
|
|
8
9
|
export interface MenuItemRegistration {
|
|
9
10
|
id: string;
|
|
10
11
|
element: () => HTMLElement | null;
|
|
11
12
|
textValue: () => string;
|
|
12
13
|
disabled: () => boolean;
|
|
13
|
-
activate: (event: Event) =>
|
|
14
|
+
activate: (event: Event) => DropdownMenuSelectEvent | undefined;
|
|
15
|
+
closeOnSelect?: () => boolean;
|
|
14
16
|
submenu?: DropdownMenuSubContext;
|
|
15
17
|
}
|
|
16
18
|
export interface DropdownMenuContext {
|
|
17
19
|
root: DropdownMenuRootContext;
|
|
20
|
+
id: string;
|
|
18
21
|
element: Ref<HTMLElement | null>;
|
|
19
|
-
activeId: Ref<string | null>;
|
|
20
22
|
actualPlacement: Ref<DropdownMenuPlacement>;
|
|
21
23
|
parentSub?: DropdownMenuSubContext;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
registerSub: (sub: DropdownMenuSubContext) => void;
|
|
25
|
-
unregisterSub: (sub: DropdownMenuSubContext) => void;
|
|
26
|
-
closeSubmenus: (except?: DropdownMenuSubContext) => void;
|
|
27
|
-
setActive: (id: string) => void;
|
|
28
|
-
isActive: (id: string) => boolean;
|
|
29
|
-
focus: (target?: DropdownMenuFocusTarget) => boolean;
|
|
30
|
-
focusElement: () => void;
|
|
31
|
-
onKeydown: (event: KeyboardEvent) => void;
|
|
24
|
+
interaction: DropdownMenuInteractionMenu;
|
|
25
|
+
connectItem: (item: MenuItemRegistration) => DropdownMenuInteractionItem;
|
|
32
26
|
}
|
|
33
27
|
export interface DropdownMenuSubContext {
|
|
28
|
+
menuId: string;
|
|
34
29
|
isOpen: ComputedRef<boolean>;
|
|
35
30
|
trigger: Ref<HTMLElement | null>;
|
|
36
31
|
contentId: Ref<string | undefined>;
|
|
37
32
|
actualPlacement: Ref<DropdownMenuPlacement>;
|
|
38
|
-
pendingFocus: Ref<OpenFocusTarget>;
|
|
39
33
|
menu: DropdownMenuContext | null;
|
|
34
|
+
interaction: DropdownMenuInteractionSubmenu;
|
|
40
35
|
open: (focus?: OpenFocusTarget) => void;
|
|
41
36
|
close: (focusParent?: boolean) => void;
|
|
42
37
|
}
|
|
@@ -49,8 +44,9 @@ export interface DropdownMenuRootContext {
|
|
|
49
44
|
triggerId: Ref<string | undefined>;
|
|
50
45
|
contentId: Ref<string | undefined>;
|
|
51
46
|
reference: ComputedRef<ElementReference | null>;
|
|
52
|
-
|
|
47
|
+
interactionRootMenuId: string;
|
|
53
48
|
layer: OverlayLayerContext;
|
|
49
|
+
interaction: DropdownMenuInteraction;
|
|
54
50
|
open: (options?: DropdownMenuOpenOptions | DropdownMenuFocusTarget) => void;
|
|
55
51
|
close: (options?: DropdownMenuCloseOptions & {
|
|
56
52
|
returnFocus?: boolean;
|
|
@@ -60,9 +56,7 @@ export interface DropdownMenuRootContext {
|
|
|
60
56
|
setTrigger: (element: HTMLElement | null, id?: string) => void;
|
|
61
57
|
setReference: (reference: ElementReference | null) => void;
|
|
62
58
|
setReturnFocus: (element: HTMLElement | null) => void;
|
|
63
|
-
|
|
64
|
-
unregisterInside: (element: HTMLElement) => void;
|
|
65
|
-
isInside: (event: Event) => boolean;
|
|
59
|
+
connectInside: (element: HTMLElement) => () => void;
|
|
66
60
|
}
|
|
67
61
|
export interface DropdownMenuRadioGroupContext {
|
|
68
62
|
value: ComputedRef<DropdownMenuItemValue | null>;
|
|
@@ -77,21 +71,14 @@ export declare const menuKey: InjectionKey<DropdownMenuContext>;
|
|
|
77
71
|
export declare const subKey: InjectionKey<DropdownMenuSubContext>;
|
|
78
72
|
export declare const radioGroupKey: InjectionKey<DropdownMenuRadioGroupContext>;
|
|
79
73
|
export declare const checkedKey: InjectionKey<DropdownMenuCheckedContext>;
|
|
80
|
-
export declare function optionalAttr<T extends boolean | string | undefined>(value: T): T | undefined;
|
|
81
|
-
export declare function getFocusTarget(options?: DropdownMenuOpenOptions | DropdownMenuFocusTarget): DropdownMenuFocusTarget;
|
|
82
|
-
export declare function toHTMLElement(value: ComponentRefValue, fallbackId?: string): HTMLElement | null;
|
|
83
|
-
export declare function resolveHTMLElementRef(value: ComponentRefValue, fallbackId: string, resolve: (element: HTMLElement | null) => void): void;
|
|
84
74
|
export declare function createVirtualAnchor(point: DropdownMenuPoint): DropdownMenuVirtualAnchor;
|
|
85
|
-
export declare function createCustomEvent<T>(type: string, detail: T, originalEvent: Event): CustomEvent<T>;
|
|
86
75
|
export declare function createSelectEvent(originalEvent: Event, value?: DropdownMenuItemValue): DropdownMenuSelectEvent;
|
|
87
|
-
export declare function createOutsideEvent(originalEvent: Event): DropdownMenuInteractOutsideEvent;
|
|
88
|
-
export declare function blockNextDocumentClick(): void;
|
|
89
76
|
export declare function createMenuContext(options: {
|
|
90
77
|
root: DropdownMenuRootContext;
|
|
91
78
|
element: Ref<HTMLElement | null>;
|
|
92
79
|
actualPlacement: Ref<DropdownMenuPlacement>;
|
|
93
80
|
parentSub?: DropdownMenuSubContext;
|
|
94
|
-
onEscape: (event: KeyboardEvent) =>
|
|
81
|
+
onEscape: (event: KeyboardEvent) => boolean;
|
|
95
82
|
}): DropdownMenuContext;
|
|
96
83
|
export declare function usePrimitiveItem(componentName: string, props: Readonly<DropdownMenuItemPrimitiveProps>, emitSelect: (event: DropdownMenuSelectEvent) => void, options: {
|
|
97
84
|
checked?: ComputedRef<boolean | 'mixed'>;
|
|
@@ -106,6 +93,6 @@ export declare function usePrimitiveItem(componentName: string, props: Readonly<
|
|
|
106
93
|
checked: ComputedRef<boolean | "mixed"> | undefined;
|
|
107
94
|
activate: (originalEvent: Event) => void;
|
|
108
95
|
select: () => void;
|
|
109
|
-
setElement: (value:
|
|
96
|
+
setElement: (value: ComponentElementRef) => void;
|
|
110
97
|
onPointerenter: () => void;
|
|
111
98
|
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ItemPath } from './dropdown-menu-model.js';
|
|
2
|
+
import { DropdownMenuItem } from './types.js';
|
|
3
|
+
export interface DropdownMenuDataEntry {
|
|
4
|
+
item: DropdownMenuItem;
|
|
5
|
+
path: ItemPath;
|
|
6
|
+
itemId: string;
|
|
7
|
+
ownerMenuId: string;
|
|
8
|
+
order: number;
|
|
9
|
+
submenuMenuId: string | undefined;
|
|
10
|
+
}
|
|
11
|
+
export interface DropdownMenuDataIndex {
|
|
12
|
+
entries: readonly DropdownMenuDataEntry[];
|
|
13
|
+
itemIdByPath: ReadonlyMap<string, string>;
|
|
14
|
+
pathByItemId: ReadonlyMap<string, ItemPath>;
|
|
15
|
+
menuIdByPath: ReadonlyMap<string, string>;
|
|
16
|
+
pathByMenuId: ReadonlyMap<string, ItemPath>;
|
|
17
|
+
primaryItemId: WeakMap<DropdownMenuItem, string>;
|
|
18
|
+
}
|
|
19
|
+
export declare function buildDropdownMenuDataIndex(items: readonly DropdownMenuItem[], rootMenuId: string, getStableItemId: (item: DropdownMenuItem) => string): DropdownMenuDataIndex;
|
|
20
|
+
export declare function getDropdownMenuDataCollectionState(items: readonly DropdownMenuItem[]): unknown[];
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { DropdownMenuInteraction, DropdownMenuInteractionHost } from './dropdownMenuInteractionTypes.js';
|
|
2
|
+
export type { DropdownMenuInteractionDismissalRegistration, DropdownMenuInteraction, DropdownMenuInteractionFocusTarget, DropdownMenuInteractionHost, DropdownMenuInteractionItem, DropdownMenuInteractionItemOptions, DropdownMenuInteractionMenu, DropdownMenuInteractionMenuOptions, DropdownMenuInteractionSubmenu, DropdownMenuInteractionSubmenuOptions, } from './dropdownMenuInteractionTypes.js';
|
|
3
|
+
export declare function useDropdownMenuInteraction(host: DropdownMenuInteractionHost): DropdownMenuInteraction;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { DropdownMenuCloseOptions, DropdownMenuFocusTarget } from './types.js';
|
|
2
|
+
import { DropdownMenuInteractionRegistry } from './dropdownMenuInteractionRegistry.js';
|
|
3
|
+
import { DropdownMenuInteractionFocusTarget, DropdownMenuInteractionHost } from './dropdownMenuInteractionTypes.js';
|
|
4
|
+
interface CreateDropdownMenuInteractionNavigationOptions {
|
|
5
|
+
host: DropdownMenuInteractionHost;
|
|
6
|
+
registry: DropdownMenuInteractionRegistry;
|
|
7
|
+
closeRoot: (options?: DropdownMenuCloseOptions & {
|
|
8
|
+
returnFocus?: boolean;
|
|
9
|
+
}) => void;
|
|
10
|
+
}
|
|
11
|
+
export declare function createDropdownMenuInteractionNavigation({ host, registry, closeRoot, }: CreateDropdownMenuInteractionNavigationOptions): {
|
|
12
|
+
closeMenu: (menuId: string, focusParent?: boolean) => boolean;
|
|
13
|
+
closeSubmenus: (menuId: string, exceptMenuId?: string) => void;
|
|
14
|
+
closeAllSubmenus: () => void;
|
|
15
|
+
focusMenu: (menuId: string, target?: DropdownMenuFocusTarget) => boolean;
|
|
16
|
+
openMenu: (menuId: string, focus?: DropdownMenuInteractionFocusTarget) => boolean;
|
|
17
|
+
selectItem: (id: string, originalEvent?: Event) => void;
|
|
18
|
+
activateItem: (id: string, originalEvent?: Event) => void;
|
|
19
|
+
hoverItem: (id: string, openSubmenu?: boolean) => void;
|
|
20
|
+
reconcile: (menuId?: string) => void;
|
|
21
|
+
reconcileOpenSubmenus: () => void;
|
|
22
|
+
};
|
|
23
|
+
export type DropdownMenuInteractionNavigation = ReturnType<typeof createDropdownMenuInteractionNavigation>;
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { DropdownMenuFocusTarget } from './types.js';
|
|
2
|
+
import { DropdownMenuInteractionFocusTarget, DropdownMenuInteractionHost, DropdownMenuInteractionItemRegistration, DropdownMenuInteractionMenuRegistration, DropdownMenuInteractionMenuStateRegistration } from './dropdownMenuInteractionTypes.js';
|
|
3
|
+
export interface DropdownMenuInteractionRegistryNavigation {
|
|
4
|
+
closeMenu: (menuId: string, focusParent?: boolean) => boolean;
|
|
5
|
+
closeSubmenus: (menuId: string, exceptMenuId?: string) => void;
|
|
6
|
+
focusMenu: (menuId: string, target?: DropdownMenuFocusTarget) => boolean;
|
|
7
|
+
reconcile: (menuId?: string) => void;
|
|
8
|
+
reconcileOpenSubmenus: () => void;
|
|
9
|
+
}
|
|
10
|
+
export declare function createDropdownMenuInteractionRegistry(host: DropdownMenuInteractionHost, navigation: DropdownMenuInteractionRegistryNavigation): {
|
|
11
|
+
activeItemId: import('vue').Ref<string | null, string | null>;
|
|
12
|
+
activeMenuId: import('vue').Ref<string, string>;
|
|
13
|
+
pendingRootFocus: import('vue').Ref<DropdownMenuInteractionFocusTarget, DropdownMenuInteractionFocusTarget>;
|
|
14
|
+
registerMenu: (registration: DropdownMenuInteractionMenuRegistration) => () => void;
|
|
15
|
+
unregisterMenu: (id: string) => void;
|
|
16
|
+
registerMenuState: (registration: DropdownMenuInteractionMenuStateRegistration) => () => void;
|
|
17
|
+
registerItem: (registration: DropdownMenuInteractionItemRegistration) => () => void;
|
|
18
|
+
unregisterItem: (id: string) => void;
|
|
19
|
+
getActiveId: (menuId: string) => import('vue').ComputedRef<string | null>;
|
|
20
|
+
getItem: (id: string) => DropdownMenuInteractionItemRegistration | undefined;
|
|
21
|
+
getMenu: (id: string) => DropdownMenuInteractionMenuRegistration | undefined;
|
|
22
|
+
isActive: (id: string) => boolean;
|
|
23
|
+
isMenuOpen: (menuId: string) => boolean;
|
|
24
|
+
setActive: (id: string | null, focusElement?: boolean) => boolean;
|
|
25
|
+
focusMenuElement: (menuId: string) => void;
|
|
26
|
+
state: {
|
|
27
|
+
getMenuState: (id: string) => DropdownMenuInteractionMenuStateRegistration | undefined;
|
|
28
|
+
getItems: (menuId: string) => DropdownMenuInteractionItemRegistration[];
|
|
29
|
+
getEnabledItems: (menuId: string) => DropdownMenuInteractionItemRegistration[];
|
|
30
|
+
getActiveIdValue: (menuId: string) => string | null;
|
|
31
|
+
clearMenuState: (menuId: string) => void;
|
|
32
|
+
getParentItem: (menuId: string) => DropdownMenuInteractionItemRegistration | undefined;
|
|
33
|
+
setMenuOpen: (menuId: string, open: boolean) => void;
|
|
34
|
+
chooseNeighbor: (menuId: string, previousIndex: number) => void;
|
|
35
|
+
getMenuIds: () => Set<string>;
|
|
36
|
+
getRegisteredMenuIds: () => string[];
|
|
37
|
+
getPendingMenuFocus: (menuId: string) => DropdownMenuInteractionFocusTarget | undefined;
|
|
38
|
+
setPendingMenuFocus: (menuId: string, focus: DropdownMenuInteractionFocusTarget) => Map<string, DropdownMenuInteractionFocusTarget>;
|
|
39
|
+
clearPendingMenuFocus: (menuId: string) => boolean;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
export type DropdownMenuInteractionRegistry = ReturnType<typeof createDropdownMenuInteractionRegistry>;
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { ComputedRef, Ref } from 'vue';
|
|
2
|
+
import { OverlayLayerInteraction, OverlayLayerInteractionConnection } from '../../internal/composables/useOverlayLayer.js';
|
|
3
|
+
import { DropdownMenuCloseOptions, DropdownMenuFocusTarget, DropdownMenuInteractOutsideEvent, DropdownMenuInteractOutsideTarget, DropdownMenuOpenOptions, DropdownMenuPlacement, DropdownMenuSelectEvent } from './types.js';
|
|
4
|
+
export type DropdownMenuInteractionFocusTarget = DropdownMenuFocusTarget | false;
|
|
5
|
+
export interface DropdownMenuInteractionMenuRegistration {
|
|
6
|
+
id: string;
|
|
7
|
+
parentItemId?: () => string | undefined;
|
|
8
|
+
element: () => HTMLElement | null;
|
|
9
|
+
focusTarget?: () => HTMLElement | null;
|
|
10
|
+
placement: () => DropdownMenuPlacement;
|
|
11
|
+
isOpen: () => boolean;
|
|
12
|
+
setOpen?: (open: boolean) => void;
|
|
13
|
+
stopKeyPropagation?: boolean;
|
|
14
|
+
onEscape?: (event: KeyboardEvent) => boolean;
|
|
15
|
+
}
|
|
16
|
+
export interface DropdownMenuInteractionMenuStateRegistration {
|
|
17
|
+
id: string;
|
|
18
|
+
isOpen: () => boolean;
|
|
19
|
+
setOpen: (open: boolean) => void;
|
|
20
|
+
}
|
|
21
|
+
export interface DropdownMenuInteractionItemRegistration {
|
|
22
|
+
id: string;
|
|
23
|
+
menuId: string;
|
|
24
|
+
element: () => HTMLElement | null;
|
|
25
|
+
textValue: () => string;
|
|
26
|
+
disabled: () => boolean;
|
|
27
|
+
order?: () => number;
|
|
28
|
+
submenuId?: () => string | undefined;
|
|
29
|
+
submenuDirection?: () => 'left' | 'right';
|
|
30
|
+
select?: (originalEvent: Event) => DropdownMenuSelectEvent | undefined;
|
|
31
|
+
closeOnSelect?: () => boolean;
|
|
32
|
+
}
|
|
33
|
+
export interface DropdownMenuInteractionDismissalRegistration {
|
|
34
|
+
ignoredTargets: () => readonly DropdownMenuInteractOutsideTarget[];
|
|
35
|
+
pointerDownOutside?: (event: DropdownMenuInteractOutsideEvent) => void;
|
|
36
|
+
focusOutside?: (event: DropdownMenuInteractOutsideEvent) => void;
|
|
37
|
+
interactOutside?: (event: DropdownMenuInteractOutsideEvent) => void;
|
|
38
|
+
}
|
|
39
|
+
export interface DropdownMenuInteractionHost {
|
|
40
|
+
rootMenuId: string;
|
|
41
|
+
isOpen: Readonly<Ref<boolean>>;
|
|
42
|
+
disabled: Readonly<Ref<boolean>>;
|
|
43
|
+
modal: Readonly<Ref<boolean>>;
|
|
44
|
+
setOpen: (open: boolean) => void;
|
|
45
|
+
connectLayerInteraction: (interaction: OverlayLayerInteraction) => OverlayLayerInteractionConnection;
|
|
46
|
+
focusTrigger: () => void;
|
|
47
|
+
beforeOpen?: () => void;
|
|
48
|
+
beforeClose?: () => void;
|
|
49
|
+
}
|
|
50
|
+
export interface DropdownMenuInteractionMenuOptions {
|
|
51
|
+
element: () => HTMLElement | null;
|
|
52
|
+
focusTarget?: () => HTMLElement | null;
|
|
53
|
+
placement: () => DropdownMenuPlacement;
|
|
54
|
+
stopKeyPropagation?: boolean;
|
|
55
|
+
onEscape?: (event: KeyboardEvent) => boolean;
|
|
56
|
+
}
|
|
57
|
+
export interface DropdownMenuInteractionItemOptions {
|
|
58
|
+
id: string;
|
|
59
|
+
element: () => HTMLElement | null;
|
|
60
|
+
textValue: () => string;
|
|
61
|
+
disabled: () => boolean;
|
|
62
|
+
order?: () => number;
|
|
63
|
+
submenu?: DropdownMenuInteractionSubmenu;
|
|
64
|
+
submenuDirection?: () => 'left' | 'right';
|
|
65
|
+
select?: (originalEvent: Event) => DropdownMenuSelectEvent | undefined;
|
|
66
|
+
closeOnSelect?: () => boolean;
|
|
67
|
+
}
|
|
68
|
+
export interface DropdownMenuInteractionItem {
|
|
69
|
+
active: ComputedRef<boolean>;
|
|
70
|
+
submenuOpen: ComputedRef<boolean>;
|
|
71
|
+
setActive: (focusElement?: boolean) => boolean;
|
|
72
|
+
openSubmenu: (focus?: DropdownMenuInteractionFocusTarget) => boolean;
|
|
73
|
+
closeSubmenu: (focusParent?: boolean) => boolean;
|
|
74
|
+
select: (originalEvent?: Event) => void;
|
|
75
|
+
activate: (originalEvent?: Event) => void;
|
|
76
|
+
hover: (openSubmenu?: boolean) => boolean;
|
|
77
|
+
dispose: () => void;
|
|
78
|
+
}
|
|
79
|
+
export interface DropdownMenuInteractionMenu {
|
|
80
|
+
activeId: ComputedRef<string | null>;
|
|
81
|
+
connectItem: (registration: DropdownMenuInteractionItemOptions) => DropdownMenuInteractionItem;
|
|
82
|
+
clearActive: () => void;
|
|
83
|
+
focusPending: () => boolean;
|
|
84
|
+
onKeydown: (event: KeyboardEvent) => void;
|
|
85
|
+
dispose: () => void;
|
|
86
|
+
}
|
|
87
|
+
export interface DropdownMenuInteractionSubmenu {
|
|
88
|
+
id: string;
|
|
89
|
+
open: (focus?: DropdownMenuInteractionFocusTarget) => boolean;
|
|
90
|
+
close: (focusParent?: boolean) => boolean;
|
|
91
|
+
connectContent: (options: DropdownMenuInteractionMenuOptions) => DropdownMenuInteractionMenu;
|
|
92
|
+
dispose: () => void;
|
|
93
|
+
}
|
|
94
|
+
export interface DropdownMenuInteractionSubmenuOptions {
|
|
95
|
+
id: string;
|
|
96
|
+
parentItemId: () => string | undefined;
|
|
97
|
+
isOpen: () => boolean;
|
|
98
|
+
setOpen: (open: boolean) => void;
|
|
99
|
+
}
|
|
100
|
+
export interface DropdownMenuInteraction {
|
|
101
|
+
activeItemId: Readonly<Ref<string | null>>;
|
|
102
|
+
connectRootMenu: (options: DropdownMenuInteractionMenuOptions) => DropdownMenuInteractionMenu;
|
|
103
|
+
connectSubmenu: (options: DropdownMenuInteractionSubmenuOptions) => DropdownMenuInteractionSubmenu;
|
|
104
|
+
connectInside: (element: Element) => () => void;
|
|
105
|
+
connectDismissal: (registration: DropdownMenuInteractionDismissalRegistration) => () => void;
|
|
106
|
+
open: (options?: DropdownMenuOpenOptions | DropdownMenuFocusTarget) => void;
|
|
107
|
+
close: (options?: DropdownMenuCloseOptions & {
|
|
108
|
+
returnFocus?: boolean;
|
|
109
|
+
}) => void;
|
|
110
|
+
toggle: () => void;
|
|
111
|
+
onTriggerClick: (beforeToggle?: () => void) => void;
|
|
112
|
+
onTriggerKeydown: (event: KeyboardEvent, beforeOpen?: () => void) => void;
|
|
113
|
+
onMenuKeydown: (event: KeyboardEvent) => void;
|
|
114
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties } from 'vue';
|
|
2
|
-
import {
|
|
2
|
+
import { DropdownMenuCloseOptions, DropdownMenuInteractOutsideEvent, DropdownMenuItem, DropdownMenuProps, DropdownMenuSelectEvent } from './types.js';
|
|
3
3
|
export declare function useDropdownMenu(props: Readonly<DropdownMenuProps>, emit?: {
|
|
4
4
|
openChange?: (open: boolean) => void;
|
|
5
5
|
select?: (item: DropdownMenuItem, event: DropdownMenuSelectEvent) => void;
|
|
@@ -17,7 +17,7 @@ export declare function useDropdownMenu(props: Readonly<DropdownMenuProps>, emit
|
|
|
17
17
|
renderedItems: import('vue').ComputedRef<import('./types.js').DropdownMenuRenderedItem[]>;
|
|
18
18
|
renderContext: import('./useDropdownMenuRenderItems.js').DropdownMenuRenderContext;
|
|
19
19
|
focusedIndex: import('vue').ComputedRef<number>;
|
|
20
|
-
focusedPath: import('vue').Ref<
|
|
20
|
+
focusedPath: import('vue').Ref<import('./types.js').DropdownMenuItemPath, import('./types.js').DropdownMenuItemPath>;
|
|
21
21
|
activeDescendantId: import('vue').ComputedRef<string | undefined>;
|
|
22
22
|
rootClass: import('vue').ComputedRef<string[]>;
|
|
23
23
|
contentClass: import('vue').ComputedRef<string[]>;
|
|
@@ -28,18 +28,18 @@ export declare function useDropdownMenu(props: Readonly<DropdownMenuProps>, emit
|
|
|
28
28
|
isTargetMode: import('vue').ComputedRef<boolean>;
|
|
29
29
|
teleportTo: import('vue').ComputedRef<import('../floating/index.js').TeleportTargetValue>;
|
|
30
30
|
shouldTeleport: import('vue').ComputedRef<boolean>;
|
|
31
|
-
triggerProps: import('vue').ComputedRef<DropdownMenuTriggerProps>;
|
|
32
|
-
contentProps: import('vue').ComputedRef<DropdownMenuContentProps>;
|
|
33
|
-
slotProps: import('vue').ComputedRef<DropdownMenuSlotProps>;
|
|
31
|
+
triggerProps: import('vue').ComputedRef<import('./types.js').DropdownMenuTriggerProps>;
|
|
32
|
+
contentProps: import('vue').ComputedRef<import('./types.js').DropdownMenuContentProps>;
|
|
33
|
+
slotProps: import('vue').ComputedRef<import('./types.js').DropdownMenuSlotProps>;
|
|
34
34
|
open: (options?: import('./types.js').DropdownMenuOpenOptions | import('./types.js').DropdownMenuFocusTarget) => void;
|
|
35
|
-
close: (options?:
|
|
35
|
+
close: (options?: DropdownMenuCloseOptions) => void;
|
|
36
36
|
toggle: () => void;
|
|
37
37
|
selectItem: (item: DropdownMenuItem, originalEvent?: Event) => void;
|
|
38
|
-
openSubmenu: (path: import('./dropdown-menu-
|
|
39
|
-
closeSubmenu: (path: import('./dropdown-menu-
|
|
40
|
-
onItemMouseenter: (item: DropdownMenuItem, indexOrPath: number | import('./dropdown-menu-
|
|
38
|
+
openSubmenu: (path: import('./dropdown-menu-model.js').ItemPath, focus?: import('./dropdown-menu-model.js').SubmenuFocusTarget, point?: import('../../utils/geometry.js').Point) => boolean;
|
|
39
|
+
closeSubmenu: (path: import('./dropdown-menu-model.js').ItemPath) => boolean;
|
|
40
|
+
onItemMouseenter: (item: DropdownMenuItem, indexOrPath: number | import('./dropdown-menu-model.js').ItemPath, event?: MouseEvent) => void;
|
|
41
41
|
onTriggerKeydown: (event: KeyboardEvent) => void;
|
|
42
42
|
onMenuKeydown: (event: KeyboardEvent) => void;
|
|
43
|
-
getItemProps: (item: DropdownMenuItem, indexOrPath: number | import('./dropdown-menu-
|
|
44
|
-
getItemSlotProps: (item: DropdownMenuItem, indexOrPath: number | import('./dropdown-menu-
|
|
43
|
+
getItemProps: (item: DropdownMenuItem, indexOrPath: number | import('./dropdown-menu-model.js').ItemPath, focused?: boolean, disabled?: boolean, submenuOpen?: boolean) => import('./types.js').DropdownMenuItemProps;
|
|
44
|
+
getItemSlotProps: (item: DropdownMenuItem, indexOrPath: number | import('./dropdown-menu-model.js').ItemPath, focused?: boolean, disabled?: boolean, submenuOpen?: boolean) => import('./types.js').DropdownMenuItemSlotProps;
|
|
45
45
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ComponentElementRef } from '../../utils/dom/componentRef.js';
|
|
2
|
+
import { DropdownMenuContextTriggerPrimitiveProps } from './types.js';
|
|
3
|
+
export declare function useDropdownMenuContextTrigger(props: Readonly<DropdownMenuContextTriggerPrimitiveProps>): {
|
|
4
|
+
isOpen: import('vue').ComputedRef<boolean>;
|
|
5
|
+
rootAttrs: import('vue').ComputedRef<{
|
|
6
|
+
[x: string]: unknown;
|
|
7
|
+
}>;
|
|
8
|
+
setElement: (value: ComponentElementRef) => void;
|
|
9
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { Ref } from 'vue';
|
|
2
|
+
import { Point } from '../../utils/geometry.js';
|
|
3
|
+
import { ItemPath, SubmenuFocusTarget } from './dropdown-menu-model.js';
|
|
4
|
+
import { DropdownMenuInteraction, DropdownMenuInteractionMenu } from './dropdownMenuInteraction.js';
|
|
5
|
+
import { DropdownMenuItem, DropdownMenuPlacement, DropdownMenuProps, DropdownMenuSelectEvent } from './types.js';
|
|
6
|
+
interface UseDropdownMenuDataControllerOptions {
|
|
7
|
+
props: Readonly<DropdownMenuProps>;
|
|
8
|
+
items: Readonly<Ref<DropdownMenuItem[]>>;
|
|
9
|
+
rootMenuId: string;
|
|
10
|
+
menuId: Readonly<Ref<string>>;
|
|
11
|
+
menuRef: Readonly<Ref<HTMLElement | null>>;
|
|
12
|
+
actualPlacement: Readonly<Ref<DropdownMenuPlacement>>;
|
|
13
|
+
interaction: DropdownMenuInteraction;
|
|
14
|
+
rootMenu: DropdownMenuInteractionMenu;
|
|
15
|
+
onSelect?: (item: DropdownMenuItem, event: DropdownMenuSelectEvent) => void;
|
|
16
|
+
}
|
|
17
|
+
export declare function useDropdownMenuDataController({ props, items, rootMenuId, menuId, menuRef, actualPlacement, interaction, rootMenu, onSelect, }: UseDropdownMenuDataControllerOptions): {
|
|
18
|
+
focusedPath: Ref<import('./types.js').DropdownMenuItemPath, import('./types.js').DropdownMenuItemPath>;
|
|
19
|
+
focusedIndex: import('vue').ComputedRef<number>;
|
|
20
|
+
activeDescendantId: import('vue').ComputedRef<string | undefined>;
|
|
21
|
+
getItemId: (path: ItemPath) => string;
|
|
22
|
+
getSubmenuId: (path: ItemPath) => string;
|
|
23
|
+
getItemElement: (path: ItemPath) => HTMLElement | null;
|
|
24
|
+
getMenuActiveDescendant: (path: ItemPath) => string | undefined;
|
|
25
|
+
isItemFocused: (indexOrPath: number | ItemPath) => boolean;
|
|
26
|
+
isSubmenuOpen: (path: ItemPath) => boolean;
|
|
27
|
+
openSubmenu: (path: ItemPath, focus?: SubmenuFocusTarget, point?: Point) => boolean;
|
|
28
|
+
closeSubmenu: (path: ItemPath) => boolean;
|
|
29
|
+
focusHoveredItem: (item: DropdownMenuItem, indexOrPath: number | ItemPath, event?: MouseEvent) => void;
|
|
30
|
+
onMenuMousemove: (event: MouseEvent) => void;
|
|
31
|
+
resetHoverIntent: () => void;
|
|
32
|
+
selectItem: (item: DropdownMenuItem, originalEvent?: Event) => void;
|
|
33
|
+
activateItem: (_item: DropdownMenuItem, path: ItemPath, event?: MouseEvent | KeyboardEvent) => void;
|
|
34
|
+
};
|
|
35
|
+
export {};
|