ropav 0.1.6 → 0.1.7
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 +6 -0
- 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/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/card.js +1 -1
- package/dist/checkbox.css +32 -32
- package/dist/checkbox.js +22 -28
- 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 +221 -200
- 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/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/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/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/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-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-trigger.d.ts +1 -1
- package/dist/components/dropdown-menu/dropdown-menu-sub.d.ts +1 -1
- package/dist/components/dropdown-menu/{dropdown-menu-primitive-core.d.ts → dropdownMenuContext.d.ts} +16 -18
- 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 +85 -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 +34 -0
- package/dist/components/dropdown-menu/useDropdownMenuDataRegistration.d.ts +22 -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 +29 -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/floating/hoverDisclosureInteractionModel.d.ts +42 -0
- package/dist/components/floating/index.js +1 -1
- package/dist/components/floating/useFloatingPosition.d.ts +0 -1
- package/dist/components/floating/useHoverDisclosureInteractions.d.ts +32 -0
- package/dist/components/floating/useHoverDisclosureOpenState.d.ts +25 -0
- package/dist/components/floating/useHoverDisclosureTargetBinding.d.ts +27 -0
- package/dist/components/number-input/numberInputModel.d.ts +15 -0
- package/dist/components/number-input/useNumberInput.d.ts +3 -17
- 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 +16 -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 +10 -8
- package/dist/components/scroll-area/useScrollAreaVisibility.d.ts +15 -20
- 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 +8 -16
- 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/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/css.js +12 -0
- package/dist/dialog.js +226 -218
- package/dist/dropdown-menu.js +1458 -1097
- package/dist/events.js +59 -0
- package/dist/field.css +8 -8
- package/dist/field.js +13 -25
- package/dist/floating.js +548 -319
- package/dist/floatingOffset.js +11 -0
- package/dist/focus-trap.js +7 -5
- package/dist/focusNavigation.js +37 -0
- package/dist/icon-button.css +8 -8
- package/dist/icon-button.js +7 -6
- package/dist/index.js +6 -6
- package/dist/input.css +24 -24
- package/dist/input.js +19 -31
- package/dist/interactive.js +18 -0
- package/dist/modal.js +1 -1
- package/dist/number-input.css +18 -18
- package/dist/number-input.js +14 -12
- package/dist/number.js +22 -0
- package/dist/overlay.js +3 -2
- package/dist/pagination.css +28 -28
- package/dist/pagination.js +65 -63
- package/dist/pointer.js +9 -0
- package/dist/popover.css +34 -34
- package/dist/popover.js +85 -86
- 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 +512 -516
- package/dist/select.css +45 -45
- package/dist/select.js +36 -44
- package/dist/slider.css +191 -191
- package/dist/slider.js +691 -618
- 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/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 +36 -40
- package/dist/useCollapse.js +8 -11
- package/dist/useControlState.js +3 -6
- package/dist/useFloatingPosition.js +140 -10
- package/dist/useOverlayZIndex.js +1 -5
- 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/dom/ancestry.d.ts +7 -0
- package/dist/utils/dom/attributes.d.ts +16 -0
- package/dist/utils/dom/componentRef.d.ts +4 -0
- package/dist/utils/dom/events.d.ts +5 -0
- package/dist/utils/dom/focusNavigation.d.ts +7 -0
- package/dist/utils/dom/interactive.d.ts +2 -0
- package/dist/utils/dom/pointer.d.ts +2 -0
- package/dist/utils/dom/query.d.ts +4 -0
- package/dist/utils/dom/scroll.d.ts +23 -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/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 +6 -5
- package/package.json +13 -12
- 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/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
|
@@ -1,11 +1,142 @@
|
|
|
1
|
+
import { i as querySelectorSafe, t as isElement } from "./query.js";
|
|
2
|
+
import { t as createRafScheduler } from "./rafScheduler.js";
|
|
1
3
|
import { computed, isRef, nextTick, onBeforeUnmount, onMounted, readonly, ref, shallowRef, toValue, watch } from "vue";
|
|
2
4
|
import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
|
|
5
|
+
//#region src/utils/dom/ancestry.ts
|
|
6
|
+
function getFrameElement(documentNode) {
|
|
7
|
+
try {
|
|
8
|
+
const frameElement = documentNode.defaultView?.frameElement;
|
|
9
|
+
return isElement(frameElement) ? frameElement : null;
|
|
10
|
+
} catch {
|
|
11
|
+
return null;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
function getComposedParent(node) {
|
|
15
|
+
if (isElement(node) && node.assignedSlot) return node.assignedSlot;
|
|
16
|
+
if (node.parentNode) return node.parentNode;
|
|
17
|
+
if (node.nodeType === 9) return getFrameElement(node);
|
|
18
|
+
const host = "host" in node ? node.host : null;
|
|
19
|
+
return isElement(host) ? host : null;
|
|
20
|
+
}
|
|
21
|
+
function getComposedAncestry(node) {
|
|
22
|
+
const ancestry = [];
|
|
23
|
+
let current = node ?? null;
|
|
24
|
+
while (current) {
|
|
25
|
+
current = getComposedParent(current);
|
|
26
|
+
if (current) ancestry.push(current);
|
|
27
|
+
}
|
|
28
|
+
return ancestry;
|
|
29
|
+
}
|
|
30
|
+
function areNodeListsIdentical(left, right) {
|
|
31
|
+
return left.length === right.length && left.every((node, index) => node === right[index]);
|
|
32
|
+
}
|
|
33
|
+
function readComposedAncestryPaths(nodes) {
|
|
34
|
+
return nodes.map((node) => node ? [node, ...getComposedAncestry(node)] : []);
|
|
35
|
+
}
|
|
36
|
+
function areAncestryPathsIdentical(left, right) {
|
|
37
|
+
return left.length === right.length && left.every((path, index) => areNodeListsIdentical(path, right[index] ?? []));
|
|
38
|
+
}
|
|
39
|
+
function getNodeDocument(node) {
|
|
40
|
+
return node.nodeType === 9 ? node : node.ownerDocument;
|
|
41
|
+
}
|
|
42
|
+
function getMutationObserverConstructor(node) {
|
|
43
|
+
return getNodeDocument(node)?.defaultView?.MutationObserver ?? globalThis.MutationObserver;
|
|
44
|
+
}
|
|
45
|
+
function isShadowRootNode(node) {
|
|
46
|
+
return node.nodeType === 11 && "host" in node && isElement(node.host);
|
|
47
|
+
}
|
|
48
|
+
function hasDisconnectedAncestry(nodes) {
|
|
49
|
+
return nodes.some((node) => node != null && [node, ...getComposedAncestry(node)].some((ancestor) => !ancestor.isConnected));
|
|
50
|
+
}
|
|
51
|
+
function observeComposedAncestry(getNodes, onChange, options = {}) {
|
|
52
|
+
let paths = readComposedAncestryPaths(getNodes());
|
|
53
|
+
let mutationObservers = [];
|
|
54
|
+
let slotRoots = [];
|
|
55
|
+
let disposed = false;
|
|
56
|
+
const reconnectScheduler = createRafScheduler(check, getView);
|
|
57
|
+
function getView() {
|
|
58
|
+
for (const node of getNodes()) {
|
|
59
|
+
const view = node ? getNodeDocument(node)?.defaultView : null;
|
|
60
|
+
if (view) return view;
|
|
61
|
+
}
|
|
62
|
+
return null;
|
|
63
|
+
}
|
|
64
|
+
function scheduleReconnectCheck(nodes) {
|
|
65
|
+
if (!hasDisconnectedAncestry(nodes)) return;
|
|
66
|
+
if (!getView()?.requestAnimationFrame) return;
|
|
67
|
+
reconnectScheduler.schedule();
|
|
68
|
+
}
|
|
69
|
+
function disconnectTargets() {
|
|
70
|
+
for (const observer of mutationObservers) observer.disconnect();
|
|
71
|
+
mutationObservers = [];
|
|
72
|
+
for (const root of slotRoots) root.removeEventListener("slotchange", check);
|
|
73
|
+
slotRoots = [];
|
|
74
|
+
}
|
|
75
|
+
function observeTargets(nodes, nextPaths) {
|
|
76
|
+
const observedNodes = new Set(nextPaths.flat());
|
|
77
|
+
const nextSlotRoots = /* @__PURE__ */ new Set();
|
|
78
|
+
const observersByConstructor = /* @__PURE__ */ new Map();
|
|
79
|
+
for (const node of observedNodes) {
|
|
80
|
+
if (isElement(node) && node.shadowRoot) nextSlotRoots.add(node.shadowRoot);
|
|
81
|
+
if (isShadowRootNode(node)) nextSlotRoots.add(node);
|
|
82
|
+
const MutationObserverConstructor = getMutationObserverConstructor(node);
|
|
83
|
+
if (!MutationObserverConstructor) continue;
|
|
84
|
+
let observer = observersByConstructor.get(MutationObserverConstructor);
|
|
85
|
+
if (!observer) {
|
|
86
|
+
observer = new MutationObserverConstructor(check);
|
|
87
|
+
observersByConstructor.set(MutationObserverConstructor, observer);
|
|
88
|
+
}
|
|
89
|
+
if (isElement(node)) observer.observe(node, {
|
|
90
|
+
childList: true,
|
|
91
|
+
attributes: true,
|
|
92
|
+
attributeFilter: ["slot", "name"]
|
|
93
|
+
});
|
|
94
|
+
else observer.observe(node, { childList: true });
|
|
95
|
+
}
|
|
96
|
+
mutationObservers = [...observersByConstructor.values()];
|
|
97
|
+
slotRoots = [...nextSlotRoots];
|
|
98
|
+
for (const root of slotRoots) root.addEventListener("slotchange", check);
|
|
99
|
+
scheduleReconnectCheck(nodes);
|
|
100
|
+
}
|
|
101
|
+
function rebind(nodes, nextPaths) {
|
|
102
|
+
disconnectTargets();
|
|
103
|
+
paths = nextPaths;
|
|
104
|
+
observeTargets(nodes, paths);
|
|
105
|
+
}
|
|
106
|
+
function check() {
|
|
107
|
+
if (disposed) return;
|
|
108
|
+
const nodes = getNodes();
|
|
109
|
+
if (options.deferWhileDisconnected && hasDisconnectedAncestry(nodes)) {
|
|
110
|
+
scheduleReconnectCheck(nodes);
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
reconnectScheduler.cancel();
|
|
114
|
+
const nextPaths = readComposedAncestryPaths(nodes);
|
|
115
|
+
if (areAncestryPathsIdentical(paths, nextPaths)) return;
|
|
116
|
+
rebind(nodes, nextPaths);
|
|
117
|
+
onChange();
|
|
118
|
+
}
|
|
119
|
+
const initialNodes = getNodes();
|
|
120
|
+
paths = readComposedAncestryPaths(initialNodes);
|
|
121
|
+
observeTargets(initialNodes, paths);
|
|
122
|
+
return () => {
|
|
123
|
+
if (disposed) return;
|
|
124
|
+
disposed = true;
|
|
125
|
+
reconnectScheduler.cancel();
|
|
126
|
+
disconnectTargets();
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
//#endregion
|
|
3
130
|
//#region src/components/floating/useFloatingPosition.ts
|
|
4
131
|
var DEFAULT_ARROW_PADDING = 4;
|
|
5
132
|
var DEFAULT_COLLISION_PADDING = 8;
|
|
6
133
|
var DEFAULT_OFFSET = 8;
|
|
7
134
|
var DEFAULT_PLACEMENT = "bottom";
|
|
8
135
|
var DEFAULT_STRATEGY = "absolute";
|
|
136
|
+
function getReferenceElement(reference) {
|
|
137
|
+
if (isElement(reference)) return reference;
|
|
138
|
+
return reference && isElement(reference.contextElement) ? reference.contextElement : null;
|
|
139
|
+
}
|
|
9
140
|
function readFloatingTarget(target) {
|
|
10
141
|
return isRef(target) ? target.value : target;
|
|
11
142
|
}
|
|
@@ -13,18 +144,10 @@ function isVirtualReference(value) {
|
|
|
13
144
|
if (value == null || typeof value !== "object") return false;
|
|
14
145
|
return "getBoundingClientRect" in value && typeof value.getBoundingClientRect === "function";
|
|
15
146
|
}
|
|
16
|
-
function isElementReference(value) {
|
|
17
|
-
return typeof Element !== "undefined" && value instanceof Element;
|
|
18
|
-
}
|
|
19
147
|
function resolveFloatingTarget(target) {
|
|
20
148
|
if (!target) return null;
|
|
21
149
|
if (typeof target !== "string") return isVirtualReference(target) ? target : null;
|
|
22
|
-
|
|
23
|
-
try {
|
|
24
|
-
return document.querySelector(target);
|
|
25
|
-
} catch {
|
|
26
|
-
return null;
|
|
27
|
-
}
|
|
150
|
+
return querySelectorSafe(target);
|
|
28
151
|
}
|
|
29
152
|
function useFloatingTarget(getTarget, fallback) {
|
|
30
153
|
const resolvedTarget = shallowRef(null);
|
|
@@ -51,6 +174,7 @@ function useFloatingPosition(options) {
|
|
|
51
174
|
const floatingStyle = ref(getHiddenStyle());
|
|
52
175
|
const arrowStyle = ref();
|
|
53
176
|
let cleanup;
|
|
177
|
+
let cleanupPositioningAncestry;
|
|
54
178
|
let generation = 0;
|
|
55
179
|
let request = 0;
|
|
56
180
|
function getReference() {
|
|
@@ -106,9 +230,14 @@ function useFloatingPosition(options) {
|
|
|
106
230
|
function stop() {
|
|
107
231
|
cleanup?.();
|
|
108
232
|
cleanup = void 0;
|
|
233
|
+
cleanupPositioningAncestry?.();
|
|
234
|
+
cleanupPositioningAncestry = void 0;
|
|
109
235
|
generation += 1;
|
|
110
236
|
request += 1;
|
|
111
237
|
}
|
|
238
|
+
function observePositioningAncestry() {
|
|
239
|
+
cleanupPositioningAncestry = observeComposedAncestry(() => [getReferenceElement(getReference()), getFloating()], start, { deferWhileDisconnected: true });
|
|
240
|
+
}
|
|
112
241
|
function getMiddleware() {
|
|
113
242
|
const middleware = [offset(getOffset())];
|
|
114
243
|
const padding = getCollisionPadding();
|
|
@@ -162,6 +291,7 @@ function useFloatingPosition(options) {
|
|
|
162
291
|
const updatePosition = () => void update();
|
|
163
292
|
const animationFrame = getAutoUpdateAnimationFrame();
|
|
164
293
|
cleanup = animationFrame == null ? autoUpdate(reference, floating, updatePosition) : autoUpdate(reference, floating, updatePosition, { animationFrame });
|
|
294
|
+
observePositioningAncestry();
|
|
165
295
|
});
|
|
166
296
|
}
|
|
167
297
|
watch([
|
|
@@ -192,4 +322,4 @@ function useFloatingPosition(options) {
|
|
|
192
322
|
};
|
|
193
323
|
}
|
|
194
324
|
//#endregion
|
|
195
|
-
export {
|
|
325
|
+
export { useFloatingTarget as n, useFloatingPosition as t };
|
package/dist/useOverlayZIndex.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { n as isEventWithinElement } from "./events.js";
|
|
1
2
|
import { computed, inject, onBeforeUnmount, provide, readonly, ref, shallowRef, toValue, watch } from "vue";
|
|
2
3
|
//#region src/internal/composables/useOverlayLayer.ts
|
|
3
4
|
var overlayLayerKey = Symbol("overlay-layer");
|
|
@@ -38,11 +39,6 @@ function syncLayerZIndices(state) {
|
|
|
38
39
|
highestZIndex = zIndex;
|
|
39
40
|
}
|
|
40
41
|
}
|
|
41
|
-
function isEventWithinElement(event, element) {
|
|
42
|
-
const path = event.composedPath();
|
|
43
|
-
if (path.length > 0) return path.some((entry) => entry === element || typeof Node !== "undefined" && entry instanceof Node && element.contains(entry));
|
|
44
|
-
return typeof Node !== "undefined" && event.target instanceof Node && element.contains(event.target);
|
|
45
|
-
}
|
|
46
42
|
function restoreInertBackground(state) {
|
|
47
43
|
for (const [element, snapshot] of state.inertSnapshots) {
|
|
48
44
|
element.inert = snapshot.inert;
|
|
@@ -7,21 +7,14 @@ function readTeleportTarget(target) {
|
|
|
7
7
|
function hasTarget(target) {
|
|
8
8
|
return target != null && target !== "";
|
|
9
9
|
}
|
|
10
|
-
function provideTeleportTarget(props
|
|
10
|
+
function provideTeleportTarget(props) {
|
|
11
11
|
const parentContext = inject(teleportTargetKey, void 0);
|
|
12
12
|
const target = computed(() => {
|
|
13
13
|
const ownTarget = readTeleportTarget(props.teleportTo);
|
|
14
14
|
if (hasTarget(ownTarget)) return ownTarget;
|
|
15
15
|
return parentContext?.target.value ?? "body";
|
|
16
16
|
});
|
|
17
|
-
provide(teleportTargetKey, {
|
|
18
|
-
target,
|
|
19
|
-
positioningKey: computed(() => [
|
|
20
|
-
target.value,
|
|
21
|
-
toValue(positioningKey),
|
|
22
|
-
parentContext?.positioningKey.value
|
|
23
|
-
])
|
|
24
|
-
});
|
|
17
|
+
provide(teleportTargetKey, { target });
|
|
25
18
|
return target;
|
|
26
19
|
}
|
|
27
20
|
function useTeleportTarget(target) {
|
|
@@ -32,9 +25,5 @@ function useTeleportTarget(target) {
|
|
|
32
25
|
return providedContext?.target.value ?? "body";
|
|
33
26
|
});
|
|
34
27
|
}
|
|
35
|
-
function useTeleportPositioningKey() {
|
|
36
|
-
const providedContext = inject(teleportTargetKey, void 0);
|
|
37
|
-
return computed(() => providedContext?.positioningKey.value);
|
|
38
|
-
}
|
|
39
28
|
//#endregion
|
|
40
|
-
export {
|
|
29
|
+
export { useTeleportTarget as n, provideTeleportTarget as t };
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { n as normalizeTypeaheadText } from "./text.js";
|
|
2
|
+
import { onBeforeUnmount } from "vue";
|
|
3
|
+
//#region src/internal/composables/useTypeahead.ts
|
|
4
|
+
var DEFAULT_TYPEAHEAD_TIMEOUT = 1e3;
|
|
5
|
+
function isRepeatedQuery(query) {
|
|
6
|
+
const characters = [...query];
|
|
7
|
+
return characters.length > 1 && characters.every((character) => character === characters[0]);
|
|
8
|
+
}
|
|
9
|
+
function useTypeahead(options) {
|
|
10
|
+
let buffer = "";
|
|
11
|
+
let timer;
|
|
12
|
+
let lastMatch;
|
|
13
|
+
let currentScope = options.scopeKey?.();
|
|
14
|
+
const isDisabled = options.isDisabled ?? (() => false);
|
|
15
|
+
function clearTimer() {
|
|
16
|
+
if (timer !== void 0) clearTimeout(timer);
|
|
17
|
+
timer = void 0;
|
|
18
|
+
}
|
|
19
|
+
function reset() {
|
|
20
|
+
clearTimer();
|
|
21
|
+
buffer = "";
|
|
22
|
+
lastMatch = void 0;
|
|
23
|
+
currentScope = options.scopeKey?.();
|
|
24
|
+
}
|
|
25
|
+
function scheduleReset() {
|
|
26
|
+
clearTimer();
|
|
27
|
+
timer = setTimeout(reset, options.timeout ?? DEFAULT_TYPEAHEAD_TIMEOUT);
|
|
28
|
+
}
|
|
29
|
+
function hasBuffer() {
|
|
30
|
+
return buffer.length > 0;
|
|
31
|
+
}
|
|
32
|
+
function getMatchIndex(query, startIndex, keepCurrent) {
|
|
33
|
+
const items = options.items();
|
|
34
|
+
if (items.length === 0) return -1;
|
|
35
|
+
function matches(index) {
|
|
36
|
+
const item = items[index];
|
|
37
|
+
return Boolean(item && !isDisabled(item) && normalizeTypeaheadText(options.getTextValue(item)).startsWith(query));
|
|
38
|
+
}
|
|
39
|
+
if (keepCurrent && startIndex >= 0 && matches(startIndex)) return startIndex;
|
|
40
|
+
for (let offset = 1; offset <= items.length; offset += 1) {
|
|
41
|
+
const index = (startIndex + offset + items.length) % items.length;
|
|
42
|
+
if (matches(index)) return index;
|
|
43
|
+
}
|
|
44
|
+
return -1;
|
|
45
|
+
}
|
|
46
|
+
function getLastMatchIndex(items) {
|
|
47
|
+
const match = lastMatch;
|
|
48
|
+
if (!match) return -1;
|
|
49
|
+
if (Object.is(items[match.index], match.item)) return match.index;
|
|
50
|
+
const identityIndex = items.findIndex((item) => Object.is(item, match.item));
|
|
51
|
+
if (identityIndex >= 0) return identityIndex;
|
|
52
|
+
let keyIndex = -1;
|
|
53
|
+
for (let index = 0; index < items.length; index += 1) {
|
|
54
|
+
if (!Object.is(options.getKey(items[index]), match.key)) continue;
|
|
55
|
+
if (keyIndex >= 0) return -1;
|
|
56
|
+
keyIndex = index;
|
|
57
|
+
}
|
|
58
|
+
return keyIndex;
|
|
59
|
+
}
|
|
60
|
+
function handleKey(event) {
|
|
61
|
+
const nextScope = options.scopeKey?.();
|
|
62
|
+
if (!Object.is(currentScope, nextScope)) reset();
|
|
63
|
+
currentScope = nextScope;
|
|
64
|
+
if (event.ctrlKey || event.metaKey || event.altKey || event.isComposing || [...event.key].length !== 1 || event.key === " " && !hasBuffer()) return false;
|
|
65
|
+
event.preventDefault();
|
|
66
|
+
buffer += event.key;
|
|
67
|
+
scheduleReset();
|
|
68
|
+
const normalizedBuffer = normalizeTypeaheadText(buffer);
|
|
69
|
+
if (!normalizedBuffer) return true;
|
|
70
|
+
const repeated = isRepeatedQuery(normalizedBuffer);
|
|
71
|
+
const query = repeated ? [...normalizedBuffer][0] : normalizedBuffer;
|
|
72
|
+
const items = options.items();
|
|
73
|
+
const lastMatchIndex = getLastMatchIndex(items);
|
|
74
|
+
const matchIndex = getMatchIndex(query, lastMatchIndex >= 0 ? lastMatchIndex : options.activeIndex(), !repeated && [...query].length > 1);
|
|
75
|
+
if (matchIndex < 0) return true;
|
|
76
|
+
const item = items[matchIndex];
|
|
77
|
+
if (!item) return true;
|
|
78
|
+
lastMatch = {
|
|
79
|
+
item,
|
|
80
|
+
index: matchIndex,
|
|
81
|
+
key: options.getKey(item)
|
|
82
|
+
};
|
|
83
|
+
options.onMatch(item, matchIndex);
|
|
84
|
+
return true;
|
|
85
|
+
}
|
|
86
|
+
onBeforeUnmount(clearTimer);
|
|
87
|
+
return {
|
|
88
|
+
handleKey,
|
|
89
|
+
hasBuffer,
|
|
90
|
+
reset
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
//#endregion
|
|
94
|
+
export { useTypeahead as t };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare function parseAriaIdRefs(value: string | null | undefined): string[];
|
|
2
|
+
export declare function hasAriaIdRef(value: string | null | undefined, id: string): boolean;
|
|
3
|
+
export declare function mergeAriaIdRefs(...values: Array<string | null | undefined>): string | undefined;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export declare function getEnabledIndexes<T>(items: readonly T[], isDisabled: (item: T) => boolean): number[];
|
|
2
|
+
export declare function getNextEnabledIndex<T>(items: readonly T[], currentIndex: number, direction: 1 | -1, isDisabled: (item: T) => boolean, loop?: boolean): number | undefined;
|
|
@@ -1,22 +1,23 @@
|
|
|
1
|
-
|
|
1
|
+
export declare const colorPickerFormats: readonly ["hex", "hexa", "rgb", "rgba", "hsl", "hsla"];
|
|
2
|
+
export type ColorPickerFormat = (typeof colorPickerFormats)[number];
|
|
2
3
|
export declare const DEFAULT_HUE = 0;
|
|
3
4
|
export declare const HUE_MAX = 359;
|
|
4
|
-
export declare const KEYBOARD_STEP = 1;
|
|
5
|
-
export declare const KEYBOARD_LARGE_STEP = 10;
|
|
6
5
|
export declare const DEFAULT_OPACITY = 100;
|
|
6
|
+
export declare const COLOR_PICKER_KEYBOARD_STEP = 1;
|
|
7
|
+
export declare const COLOR_PICKER_KEYBOARD_LARGE_STEP = 10;
|
|
7
8
|
export interface ColorPickerHsvColor {
|
|
8
9
|
hue: number;
|
|
9
10
|
saturation: number;
|
|
10
11
|
value: number;
|
|
11
12
|
opacity: number;
|
|
12
13
|
}
|
|
13
|
-
export declare function clamp(value: number, min: number, max: number): number;
|
|
14
14
|
export declare function clampPercent(value: number | undefined): number;
|
|
15
15
|
export declare function normalizeHue(value: number | undefined): number;
|
|
16
16
|
export declare function normalizeHueForColor(value: number | undefined): number;
|
|
17
17
|
export declare function clampHue(value: number): number;
|
|
18
18
|
export declare function clampOpacity(value: number | undefined): number;
|
|
19
19
|
export declare function roundPercent(value: number): number;
|
|
20
|
+
export declare function getColorPickerKeyboardValue(key: string, currentValue: number, maxValue: number, step?: number): number | undefined;
|
|
20
21
|
export declare function isColorPickerAlphaFormat(format: ColorPickerFormat): format is "hexa" | "rgba" | "hsla";
|
|
21
22
|
export declare function parseColorPickerValue(value: string): ColorPickerHsvColor | undefined;
|
|
22
23
|
export declare function formatColorPickerValue(color: ColorPickerHsvColor, format: ColorPickerFormat): string;
|
|
@@ -46,6 +46,12 @@ export interface ComponentVariantColorOptions extends ComponentContrastColorOpti
|
|
|
46
46
|
variant: ComponentColorVariant | undefined;
|
|
47
47
|
defaultColor?: ComponentColorValue;
|
|
48
48
|
}
|
|
49
|
+
export interface ComponentCheckedColorStyleOptions extends ComponentContrastColorOptions {
|
|
50
|
+
color: ComponentColorValue | undefined;
|
|
51
|
+
colorProperty: `--${string}`;
|
|
52
|
+
checkedColorProperty: `--${string}`;
|
|
53
|
+
defaultColor?: ComponentColorValue;
|
|
54
|
+
}
|
|
49
55
|
export type ParsedComponentColor = {
|
|
50
56
|
kind: 'empty';
|
|
51
57
|
} | {
|
|
@@ -68,6 +74,7 @@ export declare function isComponentPresetColor(color: ComponentColorValue | unde
|
|
|
68
74
|
export declare function parseComponentColor(color: ComponentColorValue | undefined): ParsedComponentColor;
|
|
69
75
|
export declare function getComponentColorValue(color: ComponentColorValue | undefined): string | undefined;
|
|
70
76
|
export declare function getComponentContrastColor(color: ComponentColorValue | undefined, options?: ComponentContrastColorOptions): string;
|
|
77
|
+
export declare function getComponentCheckedColorStyle({ color, colorProperty, checkedColorProperty, defaultColor, autoContrast, contrastColor, }: ComponentCheckedColorStyleOptions): Record<string, string> | undefined;
|
|
71
78
|
export declare function getComponentContrastColorRoles(color: ComponentColorValue | undefined, options?: ComponentContrastColorOptions): ComponentContrastColorRoles;
|
|
72
79
|
export declare function getComponentColorRoles(color: ComponentColorValue | undefined): ComponentColorRoles | undefined;
|
|
73
80
|
export declare function getComponentVariantColorRoles({ color, variant, defaultColor, autoContrast, contrastColor, }: ComponentVariantColorOptions): ComponentVariantColorRoles | undefined;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export interface ObserveComposedAncestryOptions {
|
|
2
|
+
deferWhileDisconnected?: boolean;
|
|
3
|
+
}
|
|
4
|
+
export declare function getComposedParent(node: Node): Node | null;
|
|
5
|
+
export declare function getComposedAncestry(node: Node | null | undefined): Node[];
|
|
6
|
+
export declare function areNodeListsIdentical(left: readonly Node[], right: readonly Node[]): boolean;
|
|
7
|
+
export declare function observeComposedAncestry(getNodes: () => readonly (Node | null | undefined)[], onChange: () => void, options?: ObserveComposedAncestryOptions): () => void;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type AttributeSnapshot<Name extends string = string> = ReadonlyMap<Name, string | null>;
|
|
2
|
+
export interface CompatibilityAttributes {
|
|
3
|
+
class?: unknown;
|
|
4
|
+
style?: unknown;
|
|
5
|
+
}
|
|
6
|
+
export type EventHandler<EventType extends Event> = (event: EventType) => unknown;
|
|
7
|
+
export declare function splitCompatibilityAttributes<Attributes extends CompatibilityAttributes>(attributes: Attributes): {
|
|
8
|
+
compatibilityClass: Attributes['class'];
|
|
9
|
+
compatibilityStyle: Attributes['style'];
|
|
10
|
+
forwardedAttributes: Omit<Attributes, 'class' | 'style'>;
|
|
11
|
+
};
|
|
12
|
+
export declare function composeEventHandlers<EventType extends Event>(...handlers: ReadonlyArray<EventHandler<EventType> | undefined>): (event: EventType) => void;
|
|
13
|
+
export declare function parseAttributeTokens(value: string | null | undefined): string[];
|
|
14
|
+
export declare function hasAttributeToken(value: string | null | undefined, token: string): boolean;
|
|
15
|
+
export declare function snapshotAttributes<Name extends string>(element: Element, attributes: readonly Name[]): AttributeSnapshot<Name>;
|
|
16
|
+
export declare function restoreAttributes(element: Element, snapshot: AttributeSnapshot): void;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ComponentPublicInstance, VaporComponentInstance } from 'vue';
|
|
2
|
+
export type ComponentElementRef = Element | ComponentPublicInstance | VaporComponentInstance | null;
|
|
3
|
+
export declare function toHTMLElement(value: ComponentElementRef, fallbackId?: string): HTMLElement | null;
|
|
4
|
+
export declare function resolveHTMLElementRef(value: ComponentElementRef, fallbackId: string, resolve: (element: HTMLElement | null) => void): void;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare function isNodeWithinElement(value: unknown, element: unknown): value is Node;
|
|
2
|
+
export declare function isEventWithinElement(event: Event, element: Element): boolean;
|
|
3
|
+
export type EventContainmentTarget = string | Element | null | undefined;
|
|
4
|
+
export declare function isEventWithinTargets(event: Event, targets: readonly EventContainmentTarget[]): boolean;
|
|
5
|
+
export declare function createCancelableCustomEvent<T>(type: string, detail: T, originalEvent: Event): CustomEvent<T>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type FocusNavigationOrientation = 'horizontal' | 'vertical';
|
|
2
|
+
export interface FocusNavigationOptions {
|
|
3
|
+
itemSelector: string;
|
|
4
|
+
collectionSelector: string;
|
|
5
|
+
orientation: FocusNavigationOrientation;
|
|
6
|
+
}
|
|
7
|
+
export declare function getFocusNavigationTarget<ElementType extends HTMLElement>(event: Pick<KeyboardEvent, 'key' | 'target'>, collection: HTMLElement, options: FocusNavigationOptions): ElementType | undefined;
|
|
@@ -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,23 @@
|
|
|
1
|
+
export type ScrollAxis = 'x' | 'y';
|
|
2
|
+
export type ScrollDirection = 'ltr' | 'rtl';
|
|
3
|
+
export interface KeyboardScrollPositionOptions {
|
|
4
|
+
axis: ScrollAxis;
|
|
5
|
+
key: string;
|
|
6
|
+
current: number;
|
|
7
|
+
pageSize: number;
|
|
8
|
+
maxPosition: number;
|
|
9
|
+
direction: ScrollDirection;
|
|
10
|
+
lineStep: number;
|
|
11
|
+
}
|
|
12
|
+
export declare function getScrollDirection(element: Element): ScrollDirection;
|
|
13
|
+
export declare function getLogicalHorizontalScrollPosition(scrollLeft: number, maxPosition: number, direction: ScrollDirection): number;
|
|
14
|
+
export declare function getRawHorizontalScrollPosition(position: number, maxPosition: number, direction: ScrollDirection): number;
|
|
15
|
+
export declare function getScrollThumbGeometry(trackSize: number, viewportSize: number, scrollSize: number, minimumSize: number): {
|
|
16
|
+
size: number;
|
|
17
|
+
offsetRatio: number;
|
|
18
|
+
};
|
|
19
|
+
export declare function getScrollThumbOffset(position: number, maxPosition: number, sizeRatio: number): number;
|
|
20
|
+
export declare function getKeyboardScrollPosition({ axis, key, current, pageSize, maxPosition, direction, lineStep, }: KeyboardScrollPositionOptions): number | undefined;
|
|
21
|
+
export declare function getWheelScrollDelta(axis: ScrollAxis, event: Pick<WheelEvent, 'deltaX' | 'deltaY'>, direction: ScrollDirection): number;
|
|
22
|
+
export declare function applyFallbackScrollPosition(element: Pick<HTMLElement, 'scrollLeft' | 'scrollTop'>, options: Pick<ScrollToOptions, 'left' | 'top'>, mode: 'absolute' | 'relative'): void;
|
|
23
|
+
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;
|