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,17 @@
|
|
|
1
|
+
export interface NativeChoiceOption<Value> {
|
|
2
|
+
value: Value;
|
|
3
|
+
}
|
|
4
|
+
export interface NativeSelectChoiceAdapter<Value> {
|
|
5
|
+
commit: (select: HTMLSelectElement, value: Value, defaultValue: Value, applyValue: () => void) => void;
|
|
6
|
+
read: (select: HTMLSelectElement) => Value;
|
|
7
|
+
resolveResetValue: (select: HTMLSelectElement, initialValue: Value) => Value;
|
|
8
|
+
sync: (select: HTMLSelectElement, value: Value, defaultValue: Value) => void;
|
|
9
|
+
}
|
|
10
|
+
interface SingleNativeChoiceAdapterOptions<Value> {
|
|
11
|
+
emptyValue: Value;
|
|
12
|
+
options: () => readonly NativeChoiceOption<Value>[] | undefined;
|
|
13
|
+
}
|
|
14
|
+
export declare function createSingleNativeChoiceAdapter<Value>(options: SingleNativeChoiceAdapterOptions<Value>): NativeSelectChoiceAdapter<Value>;
|
|
15
|
+
export declare function createMultipleNativeChoiceAdapter<Value>(options: () => readonly NativeChoiceOption<Value>[] | undefined): NativeSelectChoiceAdapter<Value[]>;
|
|
16
|
+
export declare function createStringListNativeChoiceAdapter(): NativeSelectChoiceAdapter<string[]>;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
type PointerSessionEndUpdate = 'event' | 'none' | 'pending-pointerup';
|
|
2
|
+
type PointerSessionUpdateMode = 'animation-frame' | 'immediate';
|
|
3
|
+
interface PointerSessionAdapter<TState> {
|
|
4
|
+
endUpdate?: PointerSessionEndUpdate;
|
|
5
|
+
onStart?: (event: PointerEvent, state: TState) => void;
|
|
6
|
+
onStop?: (state: TState) => void;
|
|
7
|
+
onUpdate: (event: PointerEvent, state: TState) => void;
|
|
8
|
+
refreshGeometry?: (state: TState) => boolean;
|
|
9
|
+
updateMode?: PointerSessionUpdateMode;
|
|
10
|
+
}
|
|
11
|
+
interface PointerSessionStart<TState> {
|
|
12
|
+
geometryDirty?: boolean;
|
|
13
|
+
state: TState;
|
|
14
|
+
target: HTMLElement;
|
|
15
|
+
}
|
|
16
|
+
export declare function createPointerSession<TState>(adapter: PointerSessionAdapter<TState>): {
|
|
17
|
+
start: (event: PointerEvent, initialize: () => PointerSessionStart<TState> | undefined) => boolean;
|
|
18
|
+
stop: () => void;
|
|
19
|
+
};
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare function isElement(value: unknown): value is Element;
|
|
2
|
+
export declare function matchesSelectorSafe(element: Element, selector: string): boolean;
|
|
3
|
+
export declare function querySelectorSafe<ElementType extends Element = Element>(selector: string, root?: ParentNode | null): ElementType | null;
|
|
4
|
+
export declare function querySelectorAllSafe<ElementType extends Element = Element>(selector: string, root?: ParentNode | null): ElementType[];
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { ElementDirection } from './direction.js';
|
|
2
|
+
export type ScrollAxis = 'x' | 'y';
|
|
3
|
+
export type ScrollDirection = ElementDirection;
|
|
4
|
+
export interface KeyboardScrollPositionOptions {
|
|
5
|
+
axis: ScrollAxis;
|
|
6
|
+
key: string;
|
|
7
|
+
current: number;
|
|
8
|
+
pageSize: number;
|
|
9
|
+
maxPosition: number;
|
|
10
|
+
direction: ScrollDirection;
|
|
11
|
+
lineStep: number;
|
|
12
|
+
}
|
|
13
|
+
export declare function getScrollDirection(element: Element): ScrollDirection;
|
|
14
|
+
export declare function getLogicalHorizontalScrollPosition(scrollLeft: number, maxPosition: number, direction: ScrollDirection): number;
|
|
15
|
+
export declare function getRawHorizontalScrollPosition(position: number, maxPosition: number, direction: ScrollDirection): number;
|
|
16
|
+
export declare function getScrollThumbGeometry(trackSize: number, viewportSize: number, scrollSize: number, minimumSize: number): {
|
|
17
|
+
size: number;
|
|
18
|
+
offsetRatio: number;
|
|
19
|
+
};
|
|
20
|
+
export declare function getScrollThumbOffset(position: number, maxPosition: number, sizeRatio: number): number;
|
|
21
|
+
export declare function getKeyboardScrollPosition({ axis, key, current, pageSize, maxPosition, direction, lineStep, }: KeyboardScrollPositionOptions): number | undefined;
|
|
22
|
+
export declare function getWheelScrollDelta(axis: ScrollAxis, event: Pick<WheelEvent, 'deltaX' | 'deltaY'>, direction: ScrollDirection): number;
|
|
23
|
+
export declare function applyFallbackScrollPosition(element: Pick<HTMLElement, 'scrollLeft' | 'scrollTop'>, options: Pick<ScrollToOptions, 'left' | 'top'>, mode: 'absolute' | 'relative'): void;
|
|
24
|
+
export declare function getPointerAxisCoordinate(axis: ScrollAxis, event: Pick<PointerEvent, 'clientX' | 'clientY'>): number;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export interface FloatingOffsetAxes {
|
|
2
|
+
mainAxis?: number;
|
|
3
|
+
crossAxis?: number;
|
|
4
|
+
}
|
|
5
|
+
export type FloatingOffsetValue = number | FloatingOffsetAxes;
|
|
6
|
+
export interface FloatingOffsetProperties {
|
|
7
|
+
mainAxis: `--${string}`;
|
|
8
|
+
crossAxis: `--${string}`;
|
|
9
|
+
}
|
|
10
|
+
export declare function getFloatingOffsetStyle(offset: FloatingOffsetValue | null | undefined, properties: FloatingOffsetProperties): Record<string, string> | undefined;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export interface Point {
|
|
2
|
+
x: number;
|
|
3
|
+
y: number;
|
|
4
|
+
}
|
|
5
|
+
export type Triangle = [Point, Point, Point];
|
|
6
|
+
type RectBounds = Pick<DOMRect, 'bottom' | 'height' | 'left' | 'right' | 'top' | 'width'>;
|
|
7
|
+
export declare function getClientPoint(event: Pick<MouseEvent, 'clientX' | 'clientY'>): Point;
|
|
8
|
+
export declare function hasMeasuredRect(rect: Pick<DOMRect, 'height' | 'width'>): boolean;
|
|
9
|
+
export declare function isPointInRect(point: Point, rect: RectBounds, padding?: number): boolean;
|
|
10
|
+
export declare function getTriangleArea(a: Point, b: Point, c: Point): number;
|
|
11
|
+
export declare function isPointInTriangle(point: Point, triangle: Triangle, tolerance?: number): boolean;
|
|
12
|
+
export declare function clampPointToRect(point: Point, rect: RectBounds): Point;
|
|
13
|
+
export declare function createPointRect(point: Point): DOMRect;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export type IndexPath = number[];
|
|
2
|
+
export declare function getPathKey(path: IndexPath): string;
|
|
3
|
+
export declare function getParentPath(path: IndexPath): IndexPath;
|
|
4
|
+
export declare function arePathsEqual(a: IndexPath, b: IndexPath): boolean;
|
|
5
|
+
export declare function isPathPrefix(prefix: IndexPath, path: IndexPath): boolean;
|
|
6
|
+
export declare function normalizePath(indexOrPath: number | IndexPath): IndexPath;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare function clamp(value: number, min: number, max: number): number;
|
|
2
|
+
export declare function getValuePercent(value: number, min: number, max: number): number;
|
|
3
|
+
export declare function normalizeDelay(value: number | null | undefined, fallback?: number): number;
|
|
4
|
+
export declare function roundTo(value: number, fractionDigits?: number): number;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export interface LabeledOption {
|
|
2
|
+
label: string;
|
|
3
|
+
}
|
|
4
|
+
export type OptionFilter<Option> = (option: Option, searchValue: string) => boolean;
|
|
5
|
+
export declare function filterOptions<Option extends LabeledOption>(options: readonly Option[] | undefined, searchValue: string, filter: OptionFilter<Option> | false | undefined): Option[];
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
# Code architecture
|
|
2
|
+
|
|
3
|
+
This guide defines the source structure expected from contributors. The goal is a predictable
|
|
4
|
+
codebase where UI files describe rendering, behavior is testable through small interfaces, and
|
|
5
|
+
shared logic has one obvious home.
|
|
6
|
+
|
|
7
|
+
## Module seams
|
|
8
|
+
|
|
9
|
+
A module should hide a meaningful amount of behavior behind a small interface. Extract code around
|
|
10
|
+
a responsibility, not merely to reduce a line count. A useful extraction makes callers simpler and
|
|
11
|
+
lets tests exercise the same interface that production code uses.
|
|
12
|
+
|
|
13
|
+
Use this dependency direction:
|
|
14
|
+
|
|
15
|
+
```text
|
|
16
|
+
Vue components and component-local modules
|
|
17
|
+
-> internal composables
|
|
18
|
+
-> public composables
|
|
19
|
+
-> utilities
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
A higher layer may also import a lower layer directly. Lower layers must not import higher layers:
|
|
23
|
+
|
|
24
|
+
- `src/utils/` does not import components or composables.
|
|
25
|
+
- `src/composables/` does not import components or internal modules.
|
|
26
|
+
- `src/internal/` does not import components.
|
|
27
|
+
- Components may compose other components when the dependency remains acyclic.
|
|
28
|
+
|
|
29
|
+
## Where code belongs
|
|
30
|
+
|
|
31
|
+
| Location | Responsibility |
|
|
32
|
+
| ----------------------------------------- | --------------------------------------------------------------------- |
|
|
33
|
+
| `src/components/<name>/*.vue` | Template, bindings, slots, and lightweight view-derived state |
|
|
34
|
+
| `src/components/<name>/useX.ts` | Component-specific reactive state, lifecycle, and event orchestration |
|
|
35
|
+
| `src/components/<name>/<concern>Model.ts` | Pure behavior that encodes only that component's contract |
|
|
36
|
+
| `src/internal/composables/` | Shared reactive behavior that is not part of the package interface |
|
|
37
|
+
| `src/composables/` | Reusable public composables exported by the package |
|
|
38
|
+
| `src/utils/` | Reusable runtime helpers without component state or lifecycle |
|
|
39
|
+
| `src/utils/dom/` | Reusable helpers that operate on browser and DOM primitives |
|
|
40
|
+
| `tests/`, `tooling/`, `scripts/` | Test, build, and repository automation helpers |
|
|
41
|
+
|
|
42
|
+
Do not add catch-all `utils`, `helpers`, or `core` modules beside a component. Keep a pure helper
|
|
43
|
+
local when it expresses one component's contract, and give it a semantic name such as
|
|
44
|
+
`sliderModel`. Move it to `src/utils/` once more than one feature needs the behavior.
|
|
45
|
+
|
|
46
|
+
## Component shape
|
|
47
|
+
|
|
48
|
+
Production SFCs use `<script setup lang="ts" vapor>` and remain zero-VDOM. Do not use `h`, `VNode`,
|
|
49
|
+
`defineComponent`, `createVNode`, or related VDOM block helpers in production source.
|
|
50
|
+
|
|
51
|
+
Keep SFC blocks in this order:
|
|
52
|
+
|
|
53
|
+
1. `<template>`
|
|
54
|
+
2. `<script setup lang="ts" vapor>`
|
|
55
|
+
3. `<style>`
|
|
56
|
+
|
|
57
|
+
Within the script block, use this order:
|
|
58
|
+
|
|
59
|
+
1. Imports
|
|
60
|
+
2. `defineOptions`, props defaults, emits, and slots
|
|
61
|
+
3. Composable state and template refs
|
|
62
|
+
4. View-derived computed attributes
|
|
63
|
+
5. Small event adapters and `defineExpose`
|
|
64
|
+
|
|
65
|
+
A short computed value used only to bind the template can stay in the SFC. Move state transitions,
|
|
66
|
+
timers, document listeners, multi-step event handling, and reusable calculations behind a
|
|
67
|
+
composable or pure model interface.
|
|
68
|
+
|
|
69
|
+
## Function design
|
|
70
|
+
|
|
71
|
+
Oxlint enforces a conservative baseline of cyclomatic complexity 20, nesting depth 4, at most 5
|
|
72
|
+
parameters, and at most 250 non-blank, non-comment lines per function. These are upper bounds, not
|
|
73
|
+
targets.
|
|
74
|
+
|
|
75
|
+
- Give each function one reason to change.
|
|
76
|
+
- Prefer guard clauses over deeply nested branches.
|
|
77
|
+
- Use an options object when several parameters describe one concept.
|
|
78
|
+
- Split orchestration into named steps, while keeping the external interface small.
|
|
79
|
+
- Accept dependencies or callbacks at the module seam instead of constructing hard-to-test global
|
|
80
|
+
dependencies inside the implementation.
|
|
81
|
+
- Return observable results where practical; isolate side effects in lifecycle or event adapters.
|
|
82
|
+
|
|
83
|
+
Do not create shallow pass-through functions solely to satisfy a metric. A refactor should improve
|
|
84
|
+
the caller, the module interface, or the test surface.
|
|
85
|
+
|
|
86
|
+
## Imports and package interfaces
|
|
87
|
+
|
|
88
|
+
- Import utilities directly from their module, for example `@/utils/number`; do not add a utils
|
|
89
|
+
barrel.
|
|
90
|
+
- Component `index.ts` files define package-facing exports. Internal code should not import from the
|
|
91
|
+
root package barrel.
|
|
92
|
+
- Keep imports acyclic. If two modules need each other, move the shared behavior to the lowest
|
|
93
|
+
layer that owns the concept.
|
|
94
|
+
- Use `import type` for type-only dependencies.
|
|
95
|
+
|
|
96
|
+
## Testing
|
|
97
|
+
|
|
98
|
+
Test through the interface of the extracted module:
|
|
99
|
+
|
|
100
|
+
- Pure models and utilities use deterministic unit tests.
|
|
101
|
+
- Composables test returned state and commands, using the smallest host needed for lifecycle
|
|
102
|
+
behavior.
|
|
103
|
+
- Component tests cover DOM integration, events, accessibility, and public rendering contracts.
|
|
104
|
+
- Storybook tests cover visual and interaction scenarios that depend on real browser layout.
|
|
105
|
+
|
|
106
|
+
Tests should assert observable behavior rather than private implementation details. Refactoring a
|
|
107
|
+
module internally should not require rewriting its behavioral tests.
|
|
108
|
+
|
|
109
|
+
## Contributor checklist
|
|
110
|
+
|
|
111
|
+
Before opening a pull request:
|
|
112
|
+
|
|
113
|
+
- The SFC primarily adapts props, slots, and composable results to the template.
|
|
114
|
+
- New reusable helpers live in `src/utils/`; feature-only pure logic has a semantic local name.
|
|
115
|
+
- Dependency direction remains downward and acyclic.
|
|
116
|
+
- Functions stay below the enforced complexity, depth, length, and parameter limits.
|
|
117
|
+
- New behavior is tested at the module interface.
|
|
118
|
+
- `pnpm run verify` passes.
|
|
@@ -42,7 +42,6 @@ const { actualPlacement, arrowStyle, floatingStyle } = useFloatingPosition({
|
|
|
42
42
|
open,
|
|
43
43
|
placement: 'bottom-start',
|
|
44
44
|
offset: 8,
|
|
45
|
-
restartKey: () => [teleport.value, teleportTo.value],
|
|
46
45
|
});
|
|
47
46
|
</script>
|
|
48
47
|
```
|
|
@@ -63,24 +62,26 @@ The composable accepts plain values, refs, computed refs or getters for reactive
|
|
|
63
62
|
| `shift` | `true` | Keeps the floating element inside the collision boundary. |
|
|
64
63
|
| `collisionPadding` | `8` | Padding between the floating element and viewport boundary. |
|
|
65
64
|
| `autoUpdateOptions.animationFrame` | `false` | Tracks transform animations and detached nested floating contexts. |
|
|
66
|
-
| `restartKey` | — |
|
|
65
|
+
| `restartKey` | — | Forces a rebind for reactive changes unrelated to DOM ancestry. |
|
|
67
66
|
|
|
68
67
|
Use `autoUpdateOptions.animationFrame` sparingly. It checks the reference position every animation
|
|
69
68
|
frame and is intended for references moving with CSS transforms or nested floating elements outside
|
|
70
69
|
their ancestor's scrolling context. The animation-frame loop only runs while positioning is open.
|
|
71
70
|
|
|
72
|
-
`Popover`, `Tooltip`, `DropdownMenu`, `DropdownMenuContent` and
|
|
73
|
-
same `flipOptions` and `autoUpdateOptions` objects. On the
|
|
74
|
-
also apply to its open submenus. Each open floating element
|
|
75
|
-
animation-frame loop.
|
|
71
|
+
`HoverCard`, `Popover`, `Tooltip`, `DropdownMenu`, `DropdownMenuContent` and
|
|
72
|
+
`DropdownMenuSubContent` accept the same `flipOptions` and `autoUpdateOptions` objects. On the
|
|
73
|
+
data-driven `DropdownMenu`, the options also apply to its open submenus. Each open floating element
|
|
74
|
+
using `animationFrame: true` runs its own animation-frame loop.
|
|
76
75
|
|
|
77
76
|
The return value contains readonly `actualPlacement`, `floatingStyle`, `arrowStyle` and
|
|
78
77
|
`isPositioned` refs, plus an async `update()` method for content-driven layout changes.
|
|
79
78
|
|
|
80
79
|
`useTeleportTarget()` resolves the nearest `TeleportProvider` target and falls back to `body`. Pass
|
|
81
|
-
a target value, ref or getter to override the provider for one floating element.
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
a target value, ref or getter to override the provider for one floating element. Positioning
|
|
81
|
+
automatically rebinds when the reference or floating element moves through the composed DOM,
|
|
82
|
+
including Teleport moves, temporary detachments and slot reassignment within an existing shadow
|
|
83
|
+
tree. Use `restartKey` when a reactive change outside observable DOM ancestry must recreate the
|
|
84
|
+
auto-update subscriptions, such as a host attaching a new shadow root after positioning starts.
|
|
84
85
|
|
|
85
86
|
Positioning does not add interaction or accessibility behavior. Custom overlays remain responsible
|
|
86
87
|
for keyboard handling, focus management, roles, labels, outside interaction and dismissal.
|
|
@@ -91,6 +92,9 @@ for keyboard handling, focus management, roles, labels, outside interaction and
|
|
|
91
92
|
coordinates the trigger and floating content, so a close delay started when the pointer leaves the
|
|
92
93
|
trigger is cancelled when the pointer enters the content.
|
|
93
94
|
|
|
95
|
+
`HoverCard` composes this behavior with positioning, Teleport and styled content. Use the composable
|
|
96
|
+
directly when custom markup or a different visual treatment is required.
|
|
97
|
+
|
|
94
98
|
```vue
|
|
95
99
|
<template>
|
|
96
100
|
<a ref="reference" href="/people/ada" v-bind="triggerProps">Ada Lovelace</a>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Public Styles API
|
|
2
2
|
|
|
3
|
-
The Public Styles API is the supported way to restyle Ropav without depending on component DOM nesting or internal selectors.
|
|
3
|
+
The Public Styles API is the supported way to restyle Ropav without depending on component DOM nesting or internal selectors.
|
|
4
4
|
|
|
5
5
|
## Typed component API
|
|
6
6
|
|
|
@@ -46,28 +46,35 @@ Only independently useful semantic elements are public parts. Conditional parts
|
|
|
46
46
|
| Button, ButtonLink | `root`, `loader`, `left`, `label`, `right` |
|
|
47
47
|
| IconButton | `root`, `loader`, `icon` |
|
|
48
48
|
| ButtonGroup | `root` |
|
|
49
|
+
| Calendar | `root`, `header`, `previousControl`, `monthLabel`, `nextControl`, `weekdays`, `weekday`, `grid`, `week`, `dayCell`, `day` |
|
|
49
50
|
| Card | `root`, `header`, `title`, `description`, `body`, `footer` |
|
|
50
51
|
| Checkbox | `root`, `input`, `indicator`, `label` |
|
|
51
52
|
| Collapse | `root`, `trigger`, `content` |
|
|
52
53
|
| ColorInput | `root`, `control`, `input`, `preview`, `eyeDropper`, `content`, `picker`, `pickerControl`, `pickerHandle`, `pickerSwatches`, `pickerSwatch` |
|
|
53
54
|
| ColorPicker | `root`, `label`, `control`, `handle`, `swatches`, `swatch` |
|
|
54
55
|
| ColorSwatch | `root` |
|
|
56
|
+
| Combobox | `root`, `input`, `indicator`, `clear`, `toggle`, `content`, `option`, `empty` |
|
|
55
57
|
| DropdownMenu | `root`, `trigger`, `content`, `item`, `label`, `shortcut`, `submenu`, `submenuIndicator`, `empty` |
|
|
58
|
+
| Dropzone | `root`, `input`, `content`, `label`, `description` |
|
|
56
59
|
| Field | `root`, `label`, `required`, `control`, `description` |
|
|
60
|
+
| FileInput | `root`, `input`, `trigger`, `value` |
|
|
57
61
|
| FocusTrap | `root` |
|
|
58
62
|
| Input | `root`, `input`, `left`, `right` |
|
|
59
63
|
| Modal | `root`, `overlay`, `panel`, `header`, `title`, `description`, `body`, `footer`, `close` |
|
|
64
|
+
| MultiSelect | `root`, `pills`, `pill`, `pillLabel`, `pillRemove`, `input`, `indicator`, `clear`, `toggle`, `content`, `option`, `empty` |
|
|
60
65
|
| NumberInput | `root`, `input`, `control` |
|
|
61
66
|
| Overlay | `root` |
|
|
62
|
-
| Popover, Tooltip
|
|
67
|
+
| HoverCard, Popover, Tooltip | `root`, `trigger`, `content` |
|
|
63
68
|
| Progress | `root`, `label`, `value`, `track`, `indicator` |
|
|
64
69
|
| Radio | `root`, `input`, `indicator`, `label` |
|
|
65
70
|
| RadioGroup | `root` |
|
|
71
|
+
| SegmentedControl | `root`, `control`, `input`, `indicator`, `label` |
|
|
66
72
|
| Select | `root`, `trigger`, `value`, `indicator`, `clear`, `content`, `option`, `empty` |
|
|
67
73
|
| Slider | `root`, `label`, `value`, `track`, `range`, `input`, `thumb`, `mark`, `markLabel`, `tooltip` |
|
|
68
74
|
| RangeSlider | `root`, `label`, `value`, `track`, `range`, `input`, `thumb`, `mark`, `markLabel`, `tooltip` |
|
|
69
75
|
| Switch | `root`, `input`, `track`, `thumb`, `label` |
|
|
70
76
|
| Tabs, TabsList, TabsTrigger, TabsContent | `root` on each component |
|
|
77
|
+
| TagsInput | `root`, `tags`, `tag`, `tagLabel`, `tagRemove`, `input`, `clear` |
|
|
71
78
|
| Textarea | `root`, `input` |
|
|
72
79
|
| Toast | `root`, `icon`, `title`, `description`, `body`, `action`, `close` |
|
|
73
80
|
| ToastViewport | `root`, `item`, `toast`, `toastIcon`, `toastTitle`, `toastDescription`, `toastBody`, `toastAction`, `toastClose` |
|
|
@@ -78,25 +85,29 @@ Only independently useful semantic elements are public parts. Conditional parts
|
|
|
78
85
|
|
|
79
86
|
Boolean states use presence semantics: the attribute value is empty when true and the attribute is absent when false or unknown. Enum values are lowercase kebab-case.
|
|
80
87
|
|
|
81
|
-
- `data-state="open|closed"`: AccordionItem, Collapse, DropdownMenu and submenus, Modal, Popover, Select and Tooltip.
|
|
88
|
+
- `data-state="open|closed"`: AccordionItem, Collapse, Combobox, DropdownMenu and submenus, HoverCard, Modal, MultiSelect, Popover, Select and Tooltip.
|
|
82
89
|
- `data-state="checked|unchecked|indeterminate"`: Checkbox.
|
|
83
|
-
- `data-state="checked|unchecked"`: Radio and Switch.
|
|
90
|
+
- `data-state="checked|unchecked"`: Radio, SegmentedControl controls and inputs, and Switch.
|
|
84
91
|
- `data-state="active|inactive"`: TabsTrigger and TabsContent.
|
|
85
92
|
- `data-state="determinate|indeterminate"`: Progress.
|
|
93
|
+
- `data-state="idle|accept|reject"`: Dropzone.
|
|
86
94
|
- `data-disabled`: the effective disabled state on each applicable control, trigger, item or option.
|
|
87
|
-
- `data-readonly`: Input, Textarea, ColorInput and ColorPicker controls.
|
|
95
|
+
- `data-readonly`: Calendar, Input, Textarea, TagsInput, ColorInput and ColorPicker controls.
|
|
88
96
|
- `data-invalid`: form-control roots and their public input parts.
|
|
89
97
|
- `data-loading`: Button, ButtonLink and IconButton.
|
|
90
98
|
- `data-active` and `data-paused`: FocusTrap.
|
|
91
|
-
- `data-selected`: Select options and ColorPicker swatches.
|
|
92
|
-
- `data-
|
|
99
|
+
- `data-selected`: Calendar days, Combobox, MultiSelect and Select options, and ColorPicker swatches.
|
|
100
|
+
- `data-outside` and `data-today`: Calendar days.
|
|
101
|
+
- `data-month="YYYY-MM-DD"`: Calendar roots.
|
|
102
|
+
- `data-highlighted`: Combobox, MultiSelect and Select options, and DropdownMenu items.
|
|
93
103
|
- `data-filled`: Slider and RangeSlider marks.
|
|
104
|
+
- `data-filled` and `data-dragging`: Dropzone.
|
|
94
105
|
- `data-track-hovered` and `data-dragging`: Slider track pointer interaction.
|
|
95
106
|
- `data-thumb-visibility="always|interaction|hidden"`: Slider thumb visibility behavior.
|
|
96
107
|
- `data-submenu`: DropdownMenu items that own children.
|
|
97
|
-
- `data-orientation="horizontal|vertical"`: ButtonGroup, RadioGroup, Slider, RangeSlider, Tabs and TabsList.
|
|
98
|
-
- `data-placement`: the final placement after collision handling; twelve placements for Popover and DropdownMenu, and a side (`top`, `right`, `bottom`, `left`) for Tooltip.
|
|
99
|
-
- `data-side="top|right|bottom|left"`: the side component of the final placement for Popover, DropdownMenu and Tooltip.
|
|
108
|
+
- `data-orientation="horizontal|vertical"`: ButtonGroup, RadioGroup, SegmentedControl, Slider, RangeSlider, Tabs and TabsList.
|
|
109
|
+
- `data-placement`: the final placement after collision handling; twelve placements for HoverCard, Popover and DropdownMenu, `top-start|bottom-start` for Combobox, MultiSelect and Select, and a side (`top`, `right`, `bottom`, `left`) for Tooltip.
|
|
110
|
+
- `data-side="top|right|bottom|left"`: the side component of the final placement for Combobox, MultiSelect, HoverCard, Popover, DropdownMenu, Select and Tooltip.
|
|
100
111
|
- `data-control="increment|decrement"`: NumberInput controls.
|
|
101
112
|
- `data-control="saturation|hue|opacity"`: ColorPicker controls and handles.
|
|
102
113
|
- `data-thumb="lower|upper|merged"`: RangeSlider inputs, thumbs and tooltips; `data-active-thumb="lower|upper"` is present on its root only while a thumb is active.
|
|
@@ -111,6 +122,8 @@ The exact entries in [`styles-manifest.json`](../src/styles/styles-manifest.json
|
|
|
111
122
|
|
|
112
123
|
The manifest contains design tokens plus a deliberately small component-geometry allowlist. Slider and RangeSlider share the `--rp-slider-*` namespace. Size presets provide fallbacks, while a consumer value wins for the individual dimension. See the generated [token table](./public-tokens.md).
|
|
113
124
|
|
|
125
|
+
The schema-v2 manifest does not pin a Git commit. `tokens:check` resolves compatibility from release tags, so the baseline advances with releases instead of remaining hard-coded.
|
|
126
|
+
|
|
114
127
|
Palette shades and their normal and active `*-contrast` companions are required override groups because `autoContrast` consumes state-specific companions selected at build time. The [color override contract](./public-tokens.md#color-override-contract) documents the state pairings and preset-role requirements.
|
|
115
128
|
|
|
116
129
|
## Cascade layers and migration
|
|
@@ -128,6 +141,6 @@ Place global resets in `reset` and application overrides in `app`. Import order
|
|
|
128
141
|
- Typed parts, state attributes, manifest entries, geometry variables and cascade layers form the current Public Styles API.
|
|
129
142
|
- Renaming or removing a documented part, state attribute or variable changes the public contract.
|
|
130
143
|
- Adding a public part, state attribute or variable extends the public contract.
|
|
131
|
-
- `tokens:check` compares the current manifest with the latest reachable `v*` release tag that contains one.
|
|
132
|
-
- Release tags must be available in the Git checkout that runs the check. `PUBLIC_STYLES_BASELINE_REF` can explicitly
|
|
144
|
+
- `tokens:check` compares the current manifest with the latest reachable `v*` release tag that contains one. Released variables cannot be removed, renamed or changed semantically; adding a variable requires incrementing the manifest's `contractVersion`.
|
|
145
|
+
- Release tags must be available in the Git checkout that runs the check. `PUBLIC_STYLES_BASELINE_REF` can explicitly select another Git ref that contains a manifest.
|
|
133
146
|
- Internal DOM, selectors and undocumented variables are outside the public contract.
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ropav",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"packageManager": "pnpm@11.
|
|
6
|
+
"packageManager": "pnpm@11.17.0",
|
|
7
7
|
"engines": {
|
|
8
8
|
"node": "^20.19.0 || ^22.13.0 || >=24.0.0"
|
|
9
9
|
},
|
|
@@ -65,6 +65,10 @@
|
|
|
65
65
|
"types": "./dist/components/button-link/index.d.ts",
|
|
66
66
|
"import": "./dist/components/button-link/index.js"
|
|
67
67
|
},
|
|
68
|
+
"./calendar": {
|
|
69
|
+
"types": "./dist/components/calendar/index.d.ts",
|
|
70
|
+
"import": "./dist/components/calendar/index.js"
|
|
71
|
+
},
|
|
68
72
|
"./card": {
|
|
69
73
|
"types": "./dist/components/card/index.d.ts",
|
|
70
74
|
"import": "./dist/components/card/index.js"
|
|
@@ -89,6 +93,14 @@
|
|
|
89
93
|
"types": "./dist/components/color-swatch/index.d.ts",
|
|
90
94
|
"import": "./dist/components/color-swatch/index.js"
|
|
91
95
|
},
|
|
96
|
+
"./combobox": {
|
|
97
|
+
"types": "./dist/components/combobox/index.d.ts",
|
|
98
|
+
"import": "./dist/components/combobox/index.js"
|
|
99
|
+
},
|
|
100
|
+
"./date-picker": {
|
|
101
|
+
"types": "./dist/components/date-picker/index.d.ts",
|
|
102
|
+
"import": "./dist/components/date-picker/index.js"
|
|
103
|
+
},
|
|
92
104
|
"./dialog": {
|
|
93
105
|
"types": "./dist/components/dialog/index.d.ts",
|
|
94
106
|
"import": "./dist/components/dialog/index.js"
|
|
@@ -97,10 +109,18 @@
|
|
|
97
109
|
"types": "./dist/components/dropdown-menu/index.d.ts",
|
|
98
110
|
"import": "./dist/components/dropdown-menu/index.js"
|
|
99
111
|
},
|
|
112
|
+
"./dropzone": {
|
|
113
|
+
"types": "./dist/components/dropzone/index.d.ts",
|
|
114
|
+
"import": "./dist/components/dropzone/index.js"
|
|
115
|
+
},
|
|
100
116
|
"./field": {
|
|
101
117
|
"types": "./dist/components/field/index.d.ts",
|
|
102
118
|
"import": "./dist/components/field/index.js"
|
|
103
119
|
},
|
|
120
|
+
"./file-input": {
|
|
121
|
+
"types": "./dist/components/file-input/index.d.ts",
|
|
122
|
+
"import": "./dist/components/file-input/index.js"
|
|
123
|
+
},
|
|
104
124
|
"./floating": {
|
|
105
125
|
"types": "./dist/components/floating/index.d.ts",
|
|
106
126
|
"import": "./dist/components/floating/index.js"
|
|
@@ -109,6 +129,10 @@
|
|
|
109
129
|
"types": "./dist/components/focus-trap/index.d.ts",
|
|
110
130
|
"import": "./dist/components/focus-trap/index.js"
|
|
111
131
|
},
|
|
132
|
+
"./hover-card": {
|
|
133
|
+
"types": "./dist/components/hover-card/index.d.ts",
|
|
134
|
+
"import": "./dist/components/hover-card/index.js"
|
|
135
|
+
},
|
|
112
136
|
"./icon-button": {
|
|
113
137
|
"types": "./dist/components/icon-button/index.d.ts",
|
|
114
138
|
"import": "./dist/components/icon-button/index.js"
|
|
@@ -121,6 +145,10 @@
|
|
|
121
145
|
"types": "./dist/components/modal/index.d.ts",
|
|
122
146
|
"import": "./dist/components/modal/index.js"
|
|
123
147
|
},
|
|
148
|
+
"./multi-select": {
|
|
149
|
+
"types": "./dist/components/multi-select/index.d.ts",
|
|
150
|
+
"import": "./dist/components/multi-select/index.js"
|
|
151
|
+
},
|
|
124
152
|
"./number-input": {
|
|
125
153
|
"types": "./dist/components/number-input/index.d.ts",
|
|
126
154
|
"import": "./dist/components/number-input/index.js"
|
|
@@ -149,6 +177,10 @@
|
|
|
149
177
|
"types": "./dist/components/scroll-area/index.d.ts",
|
|
150
178
|
"import": "./dist/components/scroll-area/index.js"
|
|
151
179
|
},
|
|
180
|
+
"./segmented-control": {
|
|
181
|
+
"types": "./dist/components/segmented-control/index.d.ts",
|
|
182
|
+
"import": "./dist/components/segmented-control/index.js"
|
|
183
|
+
},
|
|
152
184
|
"./select": {
|
|
153
185
|
"types": "./dist/components/select/index.d.ts",
|
|
154
186
|
"import": "./dist/components/select/index.js"
|
|
@@ -165,6 +197,10 @@
|
|
|
165
197
|
"types": "./dist/components/tabs/index.d.ts",
|
|
166
198
|
"import": "./dist/components/tabs/index.js"
|
|
167
199
|
},
|
|
200
|
+
"./tags-input": {
|
|
201
|
+
"types": "./dist/components/tags-input/index.d.ts",
|
|
202
|
+
"import": "./dist/components/tags-input/index.js"
|
|
203
|
+
},
|
|
168
204
|
"./teleport-provider": {
|
|
169
205
|
"types": "./dist/components/teleport-provider/index.d.ts",
|
|
170
206
|
"import": "./dist/components/teleport-provider/index.js"
|
|
@@ -192,8 +228,9 @@
|
|
|
192
228
|
},
|
|
193
229
|
"scripts": {
|
|
194
230
|
"dev": "pnpm run storybook",
|
|
195
|
-
"
|
|
196
|
-
"
|
|
231
|
+
"publication:sync": "node scripts/sync-package-publication.mjs --write",
|
|
232
|
+
"publication:check": "node scripts/sync-package-publication.mjs --check",
|
|
233
|
+
"publication:verify": "node scripts/verify-package-publication.mjs",
|
|
197
234
|
"tokens:build": "style-dictionary build --config scripts/tokens.config.mjs --silent",
|
|
198
235
|
"tokens:check": "node scripts/check-tokens.mjs",
|
|
199
236
|
"typecheck": "vue-tsc -b tsconfig.app.json tsconfig.node.json tsconfig.test.json",
|
|
@@ -204,13 +241,13 @@
|
|
|
204
241
|
"format:check": "oxfmt --check",
|
|
205
242
|
"test": "vitest run --project=unit --project=tooling",
|
|
206
243
|
"test:consumer-types:built": "tsc -p tests/fixtures/consumer-types/tsconfig.bundler.json && tsc -p tests/fixtures/consumer-types/tsconfig.nodenext.json",
|
|
207
|
-
"test:
|
|
244
|
+
"test:bundle:built": "node scripts/check-package-bundle.mjs",
|
|
208
245
|
"test:consumer-fixture:built": "node tests/fixtures/consumer-app/check.mjs && vue-tsc -p tests/fixtures/consumer-app/tsconfig.json --noEmit && vite build --config tests/fixtures/consumer-app/vite.config.ts && node tests/fixtures/consumer-app/assertions.mjs",
|
|
209
|
-
"test:package": "pnpm run build && pnpm run test:
|
|
246
|
+
"test:package": "pnpm run build && pnpm run publication:verify && pnpm run test:bundle:built && pnpm run test:consumer-types:built && pnpm run test:consumer-fixture:built",
|
|
210
247
|
"test:watch": "vitest --project=unit --project=tooling",
|
|
211
248
|
"test:typecheck": "vitest run --project=unit --project=tooling --typecheck",
|
|
212
249
|
"test:storybook": "vitest run --project=storybook-light --project=storybook-dark",
|
|
213
|
-
"build": "pnpm run
|
|
250
|
+
"build": "pnpm run publication:check && pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck && vite build",
|
|
214
251
|
"verify": "pnpm run lint && pnpm run format:check && pnpm run typecheck:storybook && pnpm run test && pnpm run test:storybook && pnpm run test:package",
|
|
215
252
|
"prepublishOnly": "pnpm run verify",
|
|
216
253
|
"preview": "vite preview",
|
|
@@ -220,9 +257,9 @@
|
|
|
220
257
|
"release": "pnpm run verify && bumpp --git-check --all --commit \"chore(release): v%s\" --tag \"v%s\" --execute \"pnpm run changelog\""
|
|
221
258
|
},
|
|
222
259
|
"peerDependencies": {
|
|
223
|
-
"@vue/compiler-vapor": "3.6.0-rc.
|
|
260
|
+
"@vue/compiler-vapor": "3.6.0-rc.2",
|
|
224
261
|
"unplugin-icons": "^23.0.1",
|
|
225
|
-
"vue": "^3.6.0-rc.
|
|
262
|
+
"vue": "^3.6.0-rc.2"
|
|
226
263
|
},
|
|
227
264
|
"peerDependenciesMeta": {
|
|
228
265
|
"@vue/compiler-vapor": {
|
|
@@ -245,13 +282,13 @@
|
|
|
245
282
|
"@types/node": "^26.1.1",
|
|
246
283
|
"@vitejs/plugin-vue": "^6.0.8",
|
|
247
284
|
"@vitest/browser-playwright": "^4.1.10",
|
|
248
|
-
"@vue/compiler-vapor": "3.6.0-rc.
|
|
285
|
+
"@vue/compiler-vapor": "3.6.0-rc.2",
|
|
249
286
|
"@vue/tsconfig": "^0.9.1",
|
|
250
|
-
"bumpp": "^
|
|
287
|
+
"bumpp": "^12.0.0",
|
|
251
288
|
"conventional-changelog": "^8.1.0",
|
|
252
289
|
"conventional-changelog-conventionalcommits": "^10.2.1",
|
|
253
290
|
"jsdom": "^29.1.1",
|
|
254
|
-
"oxfmt": "^0.
|
|
291
|
+
"oxfmt": "^0.60.0",
|
|
255
292
|
"oxlint": "^1.75.0",
|
|
256
293
|
"playwright": "^1.61.1",
|
|
257
294
|
"sass-embedded": "^1.100.0",
|
|
@@ -263,8 +300,8 @@
|
|
|
263
300
|
"vite": "^8.1.5",
|
|
264
301
|
"vite-plugin-dts": "^5.0.3",
|
|
265
302
|
"vitest": "^4.1.10",
|
|
266
|
-
"vue": "3.6.0-rc.
|
|
267
|
-
"vue-tsc": "^3.3.
|
|
303
|
+
"vue": "3.6.0-rc.2",
|
|
304
|
+
"vue-tsc": "^3.3.8"
|
|
268
305
|
},
|
|
269
306
|
"repository": {
|
|
270
307
|
"type": "git",
|
package/src/styles/_mixins.scss
CHANGED
|
@@ -108,6 +108,32 @@ $rp-component-colors:
|
|
|
108
108
|
padding: var(--rp-spacing-1) 0;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
+
@mixin bordered-floating-arrow {
|
|
112
|
+
background-color: inherit;
|
|
113
|
+
border: inherit;
|
|
114
|
+
rotate: 45deg;
|
|
115
|
+
|
|
116
|
+
&[data-side='top'] {
|
|
117
|
+
border-top-color: transparent;
|
|
118
|
+
border-left-color: transparent;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&[data-side='right'] {
|
|
122
|
+
border-top-color: transparent;
|
|
123
|
+
border-right-color: transparent;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&[data-side='bottom'] {
|
|
127
|
+
border-right-color: transparent;
|
|
128
|
+
border-bottom-color: transparent;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
&[data-side='left'] {
|
|
132
|
+
border-bottom-color: transparent;
|
|
133
|
+
border-left-color: transparent;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
111
137
|
@mixin inline-icon($size: 1em) {
|
|
112
138
|
display: inline-flex;
|
|
113
139
|
align-items: center;
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { DropdownMenuInteractOutsideTarget } from './types.js';
|
|
2
|
-
export declare function isEventWithinElement(event: Event, element: Element): boolean;
|
|
3
|
-
export declare function isEventWithinTargets(event: Event, targets: readonly DropdownMenuInteractOutsideTarget[]): boolean;
|