base-ui-vue 0.1.0 → 0.3.0
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 +41 -1
- package/dist/button/Button.cjs +53 -12
- package/dist/button/Button.cjs.map +1 -1
- package/dist/button/Button.js +26 -15
- package/dist/button/Button.js.map +1 -1
- package/dist/button/ToolbarButton.cjs +367 -0
- package/dist/button/ToolbarButton.cjs.map +1 -0
- package/dist/button/ToolbarButton.js +320 -0
- package/dist/button/ToolbarButton.js.map +1 -0
- package/dist/button/ToolbarButtonDataAttributes.cjs +27 -0
- package/dist/button/ToolbarButtonDataAttributes.cjs.map +1 -0
- package/dist/button/ToolbarButtonDataAttributes.js +21 -0
- package/dist/button/ToolbarButtonDataAttributes.js.map +1 -0
- package/dist/checkbox/index.cjs +1173 -0
- package/dist/checkbox/index.cjs.map +1 -0
- package/dist/checkbox/index.js +1048 -0
- package/dist/checkbox/index.js.map +1 -0
- package/dist/checkbox-group/CheckboxGroup.cjs +629 -0
- package/dist/checkbox-group/CheckboxGroup.cjs.map +1 -0
- package/dist/checkbox-group/CheckboxGroup.js +540 -0
- package/dist/checkbox-group/CheckboxGroup.js.map +1 -0
- package/dist/checkbox-group/CheckboxGroupDataAttributes.cjs +18 -0
- package/dist/checkbox-group/CheckboxGroupDataAttributes.cjs.map +1 -0
- package/dist/checkbox-group/CheckboxGroupDataAttributes.js +12 -0
- package/dist/checkbox-group/CheckboxGroupDataAttributes.js.map +1 -0
- package/dist/composite/composite.cjs +167 -0
- package/dist/composite/composite.cjs.map +1 -1
- package/dist/composite/composite.js +96 -1
- package/dist/composite/composite.js.map +1 -1
- package/dist/composite/constants.cjs +12 -0
- package/dist/composite/constants.cjs.map +1 -0
- package/dist/composite/constants.js +6 -0
- package/dist/composite/constants.js.map +1 -0
- package/dist/content/ScrollAreaContent.cjs +168 -0
- package/dist/content/ScrollAreaContent.cjs.map +1 -0
- package/dist/content/ScrollAreaContent.js +133 -0
- package/dist/content/ScrollAreaContent.js.map +1 -0
- package/dist/control/FieldControl.cjs +18 -343
- package/dist/control/FieldControl.cjs.map +1 -1
- package/dist/control/FieldControl.js +14 -285
- package/dist/control/FieldControl.js.map +1 -1
- package/dist/control/SliderControl.cjs +636 -0
- package/dist/control/SliderControl.cjs.map +1 -0
- package/dist/control/SliderControl.js +553 -0
- package/dist/control/SliderControl.js.map +1 -0
- package/dist/control/SliderControlDataAttributes.cjs +47 -0
- package/dist/control/SliderControlDataAttributes.cjs.map +1 -0
- package/dist/control/SliderControlDataAttributes.js +41 -0
- package/dist/control/SliderControlDataAttributes.js.map +1 -0
- package/dist/corner/ScrollAreaCorner.cjs +77 -0
- package/dist/corner/ScrollAreaCorner.cjs.map +1 -0
- package/dist/corner/ScrollAreaCorner.js +72 -0
- package/dist/corner/ScrollAreaCorner.js.map +1 -0
- package/dist/csp-provider/CSPContext.cjs +32 -0
- package/dist/csp-provider/CSPContext.cjs.map +1 -0
- package/dist/csp-provider/CSPContext.js +21 -0
- package/dist/csp-provider/CSPContext.js.map +1 -0
- package/dist/csp-provider/CSPProvider.cjs +46 -0
- package/dist/csp-provider/CSPProvider.cjs.map +1 -0
- package/dist/csp-provider/CSPProvider.js +41 -0
- package/dist/csp-provider/CSPProvider.js.map +1 -0
- package/dist/description/FieldDescription.cjs +5 -5
- package/dist/description/FieldDescription.cjs.map +1 -1
- package/dist/description/FieldDescription.js +1 -1
- package/dist/direction-provider/DirectionProvider.cjs +2 -2
- package/dist/direction-provider/DirectionProvider.cjs.map +1 -1
- package/dist/direction-provider/DirectionProvider.js +1 -1
- package/dist/error/FieldError.cjs +10 -288
- package/dist/error/FieldError.cjs.map +1 -1
- package/dist/error/FieldError.js +4 -246
- package/dist/error/FieldError.js.map +1 -1
- package/dist/form/Form.cjs +5 -4
- package/dist/form/Form.cjs.map +1 -1
- package/dist/form/Form.js +5 -4
- package/dist/form/Form.js.map +1 -1
- package/dist/group/ToolbarGroup.cjs +92 -0
- package/dist/group/ToolbarGroup.cjs.map +1 -0
- package/dist/group/ToolbarGroup.js +87 -0
- package/dist/group/ToolbarGroup.js.map +1 -0
- package/dist/group/ToolbarGroupDataAttributes.cjs +23 -0
- package/dist/group/ToolbarGroupDataAttributes.cjs.map +1 -0
- package/dist/group/ToolbarGroupDataAttributes.js +17 -0
- package/dist/group/ToolbarGroupDataAttributes.js.map +1 -0
- package/dist/header/AccordionHeader.cjs +2 -2
- package/dist/header/AccordionHeader.js +1 -1
- package/dist/image/AvatarImage.cjs +4 -4
- package/dist/image/AvatarImage.cjs.map +1 -1
- package/dist/image/AvatarImage.js +1 -1
- package/dist/index.cjs +113 -10
- package/dist/index.d.cts +3457 -603
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +3457 -603
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +17 -5
- package/dist/index2.cjs +5897 -424
- package/dist/index2.cjs.map +1 -1
- package/dist/index2.js +5389 -270
- package/dist/index2.js.map +1 -1
- package/package.json +8 -4
- package/src/accordion/root/AccordionRoot.vue +2 -1
- package/src/checkbox/index.ts +23 -0
- package/src/checkbox/indicator/CheckboxIndicator.vue +102 -0
- package/src/checkbox/indicator/CheckboxIndicatorDataAttributes.ts +61 -0
- package/src/checkbox/root/CheckboxRoot.vue +632 -0
- package/src/checkbox/root/CheckboxRootContext.ts +22 -0
- package/src/checkbox/root/CheckboxRootDataAttributes.ts +54 -0
- package/src/checkbox/utils/useStateAttributesMapping.ts +30 -0
- package/src/checkbox-group/CheckboxGroup.vue +241 -0
- package/src/checkbox-group/CheckboxGroupContext.ts +39 -0
- package/src/checkbox-group/CheckboxGroupDataAttributes.ts +6 -0
- package/src/checkbox-group/index.ts +11 -0
- package/src/checkbox-group/useCheckboxGroupParent.ts +173 -0
- package/src/collapsible/panel/useCollapsiblePanel.ts +2 -1
- package/src/collapsible/root/useCollapsibleRoot.ts +3 -1
- package/src/composite/composite.ts +2 -0
- package/src/composite/item/CompositeItem.vue +7 -8
- package/src/composite/root/CompositeRoot.vue +12 -1
- package/src/csp-provider/CSPContext.ts +26 -0
- package/src/csp-provider/CSPProvider.vue +40 -0
- package/src/csp-provider/index.ts +5 -0
- package/src/field/item/FieldItem.vue +6 -1
- package/src/field/label/FieldLabel.vue +10 -51
- package/src/field/root/FieldRoot.vue +16 -3
- package/src/floating-ui-vue/types.ts +1 -4
- package/src/floating-ui-vue/utils/element.ts +12 -0
- package/src/floating-ui-vue/utils/shadowDom.ts +44 -0
- package/src/floating-ui-vue/utils.ts +3 -0
- package/src/form/Form.vue +5 -3
- package/src/index.ts +13 -0
- package/src/input/Input.vue +37 -0
- package/src/input/InputDataAttributes.ts +30 -0
- package/src/input/index.ts +4 -0
- package/src/labelable-provider/LabelableContext.ts +2 -2
- package/src/labelable-provider/LabelableProvider.vue +21 -4
- package/src/labelable-provider/index.ts +2 -0
- package/src/labelable-provider/useAriaLabelledBy.ts +9 -9
- package/src/labelable-provider/useLabel.ts +115 -0
- package/src/labelable-provider/useLabelableId.ts +12 -10
- package/src/meter/index.ts +16 -0
- package/src/meter/indicator/MeterIndicator.vue +65 -0
- package/src/meter/label/MeterLabel.vue +63 -0
- package/src/meter/root/MeterRoot.vue +131 -0
- package/src/meter/root/MeterRootContext.ts +41 -0
- package/src/meter/track/MeterTrack.vue +46 -0
- package/src/meter/value/MeterValue.vue +85 -0
- package/src/progress/index.ts +23 -0
- package/src/progress/indicator/ProgressIndicator.vue +74 -0
- package/src/progress/label/ProgressLabel.vue +63 -0
- package/src/progress/root/ProgressRoot.vue +160 -0
- package/src/progress/root/ProgressRootContext.ts +51 -0
- package/src/progress/root/ProgressRootDataAttributes.ts +14 -0
- package/src/progress/root/stateAttributesMapping.ts +18 -0
- package/src/progress/track/ProgressTrack.vue +48 -0
- package/src/progress/value/ProgressValue.vue +92 -0
- package/src/scroll-area/constants.ts +2 -0
- package/src/scroll-area/content/ScrollAreaContent.vue +87 -0
- package/src/scroll-area/corner/ScrollAreaCorner.vue +64 -0
- package/src/scroll-area/index.ts +25 -0
- package/src/scroll-area/root/ScrollAreaRoot.vue +297 -0
- package/src/scroll-area/root/ScrollAreaRootContext.ts +89 -0
- package/src/scroll-area/root/ScrollAreaRootCssVars.ts +4 -0
- package/src/scroll-area/root/ScrollAreaRootDataAttributes.ts +9 -0
- package/src/scroll-area/root/stateAttributes.ts +14 -0
- package/src/scroll-area/scrollbar/ScrollAreaScrollbar.vue +263 -0
- package/src/scroll-area/scrollbar/ScrollAreaScrollbarContext.ts +20 -0
- package/src/scroll-area/scrollbar/ScrollAreaScrollbarCssVars.ts +4 -0
- package/src/scroll-area/scrollbar/ScrollAreaScrollbarDataAttributes.ts +11 -0
- package/src/scroll-area/thumb/ScrollAreaThumb.vue +120 -0
- package/src/scroll-area/thumb/ScrollAreaThumbDataAttributes.ts +3 -0
- package/src/scroll-area/utils/getOffset.ts +34 -0
- package/src/scroll-area/viewport/ScrollAreaViewport.vue +379 -0
- package/src/scroll-area/viewport/ScrollAreaViewportContext.ts +20 -0
- package/src/scroll-area/viewport/ScrollAreaViewportCssVars.ts +6 -0
- package/src/scroll-area/viewport/ScrollAreaViewportDataAttributes.ts +9 -0
- package/src/separator/Separator.vue +65 -0
- package/src/separator/SeparatorDataAttributes.ts +7 -0
- package/src/separator/index.ts +3 -0
- package/src/slider/control/SliderControl.vue +497 -0
- package/src/slider/control/SliderControlDataAttributes.ts +35 -0
- package/src/slider/index.ts +35 -0
- package/src/slider/indicator/SliderIndicator.vue +144 -0
- package/src/slider/indicator/SliderIndicatorDataAttributes.ts +35 -0
- package/src/slider/label/SliderLabel.vue +75 -0
- package/src/slider/root/SliderRoot.vue +557 -0
- package/src/slider/root/SliderRootContext.ts +126 -0
- package/src/slider/root/SliderRootDataAttributes.ts +35 -0
- package/src/slider/root/stateAttributesMapping.ts +13 -0
- package/src/slider/thumb/SliderThumb.vue +601 -0
- package/src/slider/thumb/SliderThumbDataAttributes.ts +39 -0
- package/src/slider/thumb/prehydrationScript.min.ts +5 -0
- package/src/slider/thumb/prehydrationScript.template.js +69 -0
- package/src/slider/track/SliderTrack.vue +48 -0
- package/src/slider/track/SliderTrackDataAttributes.ts +10 -0
- package/src/slider/utils/asc.ts +3 -0
- package/src/slider/utils/getMidpoint.ts +9 -0
- package/src/slider/utils/getPushedThumbValues.ts +68 -0
- package/src/slider/utils/getSliderValue.ts +25 -0
- package/src/slider/utils/replaceArrayItemAtIndex.ts +15 -0
- package/src/slider/utils/resolveThumbCollision.ts +177 -0
- package/src/slider/utils/roundValueToStep.ts +19 -0
- package/src/slider/utils/test-utils.ts +25 -0
- package/src/slider/utils/validateMinimumDistance.ts +20 -0
- package/src/slider/utils/valueArrayToPercentages.ts +10 -0
- package/src/slider/value/SliderValue.vue +90 -0
- package/src/slider/value/SliderValueDataAttributes.ts +35 -0
- package/src/switch/index.ts +14 -0
- package/src/switch/root/SwitchRoot.vue +448 -0
- package/src/switch/root/SwitchRootContext.ts +22 -0
- package/src/switch/root/SwitchRootDataAttributes.ts +46 -0
- package/src/switch/stateAttributesMapping.ts +23 -0
- package/src/switch/thumb/SwitchThumb.vue +59 -0
- package/src/switch/thumb/SwitchThumbDataAttributes.ts +46 -0
- package/src/toggle/Toggle.vue +211 -0
- package/src/toggle/ToggleDataAttributes.ts +6 -0
- package/src/toggle/index.ts +3 -0
- package/src/toggle-group/ToggleGroup.vue +224 -0
- package/src/toggle-group/ToggleGroupContext.ts +45 -0
- package/src/toggle-group/ToggleGroupDataAttributes.ts +15 -0
- package/src/toggle-group/index.ts +5 -0
- package/src/toolbar/button/ToolbarButton.vue +99 -0
- package/src/toolbar/button/ToolbarButtonDataAttributes.ts +15 -0
- package/src/toolbar/group/ToolbarGroup.vue +70 -0
- package/src/toolbar/group/ToolbarGroupContext.ts +23 -0
- package/src/toolbar/group/ToolbarGroupDataAttributes.ts +11 -0
- package/src/toolbar/index.ts +27 -0
- package/src/toolbar/input/ToolbarInput.vue +114 -0
- package/src/toolbar/input/ToolbarInputDataAttributes.ts +15 -0
- package/src/toolbar/link/ToolbarLink.vue +54 -0
- package/src/toolbar/link/ToolbarLinkDataAttributes.ts +7 -0
- package/src/toolbar/root/ToolbarRoot.vue +144 -0
- package/src/toolbar/root/ToolbarRootContext.ts +29 -0
- package/src/toolbar/root/ToolbarRootDataAttributes.ts +11 -0
- package/src/toolbar/separator/ToolbarSeparator.vue +41 -0
- package/src/toolbar/separator/ToolbarSeparatorDataAttributes.ts +7 -0
- package/src/use-button/useButton.ts +2 -1
- package/src/utils/areArraysEqual.ts +12 -0
- package/src/utils/clamp.ts +7 -0
- package/src/utils/createBaseUIEventDetails.ts +9 -0
- package/src/utils/formatNumber.ts +32 -0
- package/src/utils/owner.ts +5 -0
- package/src/utils/resolveAriaLabelledBy.ts +10 -0
- package/src/utils/scrollEdges.ts +33 -0
- package/src/utils/styles.ts +28 -0
- package/src/utils/useControllableState.ts +78 -14
- package/src/utils/useFocusableWhenDisabled.ts +6 -1
- package/src/utils/useMergedRefs.ts +26 -2
- package/src/utils/useRegisteredLabelId.ts +21 -0
- package/src/utils/valueToPercent.ts +7 -0
- package/src/utils/visuallyHidden.ts +24 -0
- package/dist/direction-provider/DirectionContext.cjs +0 -26
- package/dist/direction-provider/DirectionContext.cjs.map +0 -1
- package/dist/direction-provider/DirectionContext.js +0 -15
- package/dist/direction-provider/DirectionContext.js.map +0 -1
|
@@ -1,297 +1,26 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { mergeProps as mergeProps$1, useRenderElement } from "../button/Button.js";
|
|
2
|
+
import { useAriaLabelledBy } from "../checkbox/index.js";
|
|
3
|
+
import { fieldValidityMapping, useBaseUiId, useField, useFieldRootContext, useLabelableContext } from "../checkbox-group/CheckboxGroup.js";
|
|
4
|
+
import { computed, createBlock, createCommentVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, resolveDynamicComponent, shallowRef, toValue, unref, useAttrs, watchEffect } from "vue";
|
|
3
5
|
|
|
4
|
-
//#region src/utils/useId.ts
|
|
5
|
-
let globalId = 0;
|
|
6
|
-
/**
|
|
7
|
-
* Generates a unique ID string, optionally prefixed.
|
|
8
|
-
* Uses Vue 3.5+ `useId()` when available, otherwise falls back to an
|
|
9
|
-
* incrementing counter (client-side only, not SSR-safe).
|
|
10
|
-
*
|
|
11
|
-
* @param idOverride - If provided, returned as-is.
|
|
12
|
-
* @param prefix - Optional prefix prepended to the generated id.
|
|
13
|
-
*/
|
|
14
|
-
function useId$1(idOverride, prefix) {
|
|
15
|
-
if (idOverride != null) return idOverride;
|
|
16
|
-
if (typeof useId === "function") {
|
|
17
|
-
const reactId = useId();
|
|
18
|
-
return prefix ? `${prefix}-${reactId}` : reactId;
|
|
19
|
-
}
|
|
20
|
-
globalId += 1;
|
|
21
|
-
const id = String(globalId);
|
|
22
|
-
return prefix ? `${prefix}-${id}` : id;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
//#endregion
|
|
26
|
-
//#region src/utils/useBaseUiId.ts
|
|
27
|
-
/**
|
|
28
|
-
* Wraps `useId` and prefixes generated IDs with `base-ui-`.
|
|
29
|
-
* @param idOverride - If provided, returned as-is.
|
|
30
|
-
*/
|
|
31
|
-
function useBaseUiId(idOverride) {
|
|
32
|
-
return useId$1(idOverride, "base-ui");
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
//#endregion
|
|
36
|
-
//#region src/labelable-provider/LabelableContext.ts
|
|
37
|
-
const defaultContext$1 = {
|
|
38
|
-
controlId: shallowReadonly(shallowRef(void 0)),
|
|
39
|
-
setControlId: NOOP,
|
|
40
|
-
labelId: shallowReadonly(shallowRef(void 0)),
|
|
41
|
-
setLabelId: NOOP,
|
|
42
|
-
messageIds: shallowReadonly(shallowRef([])),
|
|
43
|
-
setMessageIds: NOOP,
|
|
44
|
-
getDescriptionProps: () => ({})
|
|
45
|
-
};
|
|
46
|
-
const labelableContextKey = Symbol("LabelableContext");
|
|
47
|
-
function useLabelableContext() {
|
|
48
|
-
return inject(labelableContextKey, defaultContext$1);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
//#endregion
|
|
52
|
-
//#region src/labelable-provider/useAriaLabelledBy.ts
|
|
53
|
-
function useAriaLabelledBy(params) {
|
|
54
|
-
const { ariaLabelledBy, labelId, labelSourceRef, enableFallback = true, labelSourceId } = params;
|
|
55
|
-
const fallbackAriaLabelledBy = ref(void 0);
|
|
56
|
-
const generatedLabelId = useBaseUiId(labelSourceId ? `${labelSourceId}-label` : void 0);
|
|
57
|
-
const resolvedAriaLabelledBy = computed(() => {
|
|
58
|
-
const explicit = ariaLabelledBy?.value;
|
|
59
|
-
const fromContext = labelId?.value;
|
|
60
|
-
return explicit ?? fromContext ?? fallbackAriaLabelledBy.value;
|
|
61
|
-
});
|
|
62
|
-
watchEffect(() => {
|
|
63
|
-
if (ariaLabelledBy?.value || labelId?.value || !enableFallback) {
|
|
64
|
-
fallbackAriaLabelledBy.value = void 0;
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
const next = getAriaLabelledBy(labelSourceRef.value, generatedLabelId);
|
|
68
|
-
if (fallbackAriaLabelledBy.value !== next) fallbackAriaLabelledBy.value = next;
|
|
69
|
-
});
|
|
70
|
-
return resolvedAriaLabelledBy;
|
|
71
|
-
}
|
|
72
|
-
function getAriaLabelledBy(labelSource, generatedLabelId) {
|
|
73
|
-
const label = findAssociatedLabel(labelSource);
|
|
74
|
-
if (!label) return;
|
|
75
|
-
if (!label.id && generatedLabelId) label.id = generatedLabelId;
|
|
76
|
-
return label.id || void 0;
|
|
77
|
-
}
|
|
78
|
-
function findAssociatedLabel(labelSource) {
|
|
79
|
-
if (!labelSource) return;
|
|
80
|
-
const parent = labelSource.parentElement;
|
|
81
|
-
if (parent && parent.tagName === "LABEL") return parent;
|
|
82
|
-
const controlId = labelSource.id;
|
|
83
|
-
if (controlId) {
|
|
84
|
-
const nextSibling = labelSource.nextElementSibling;
|
|
85
|
-
if (nextSibling && nextSibling.htmlFor === controlId) return nextSibling;
|
|
86
|
-
}
|
|
87
|
-
const labels = labelSource.labels;
|
|
88
|
-
return labels && labels[0] ? labels[0] : void 0;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
//#endregion
|
|
92
6
|
//#region src/labelable-provider/useLabelableId.ts
|
|
93
7
|
function useLabelableId(params = {}) {
|
|
94
8
|
const { id } = params;
|
|
95
|
-
const { controlId,
|
|
96
|
-
const
|
|
97
|
-
const
|
|
9
|
+
const { controlId, registerControlId } = useLabelableContext();
|
|
10
|
+
const source = Symbol("labelable-id");
|
|
11
|
+
const defaultId = useBaseUiId();
|
|
12
|
+
const resolvedId = computed(() => toValue(id) ?? defaultId);
|
|
98
13
|
watchEffect((onCleanup) => {
|
|
99
|
-
if (!resolvedId) {
|
|
100
|
-
|
|
14
|
+
if (!resolvedId.value) {
|
|
15
|
+
registerControlId(source, void 0);
|
|
101
16
|
return;
|
|
102
17
|
}
|
|
103
|
-
|
|
104
|
-
onCleanup(() => {
|
|
105
|
-
setControlId(void 0);
|
|
106
|
-
});
|
|
107
|
-
});
|
|
108
|
-
return computed(() => controlId.value ?? defaultId);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
//#endregion
|
|
112
|
-
//#region src/field/root/FieldRootDataAttributes.ts
|
|
113
|
-
let FieldRootDataAttributes = /* @__PURE__ */ function(FieldRootDataAttributes) {
|
|
114
|
-
/**
|
|
115
|
-
* Present when the field is disabled.
|
|
116
|
-
*/
|
|
117
|
-
FieldRootDataAttributes["disabled"] = "data-disabled";
|
|
118
|
-
/**
|
|
119
|
-
* Present when the field has been touched.
|
|
120
|
-
*/
|
|
121
|
-
FieldRootDataAttributes["touched"] = "data-touched";
|
|
122
|
-
/**
|
|
123
|
-
* Present when the field's value has changed.
|
|
124
|
-
*/
|
|
125
|
-
FieldRootDataAttributes["dirty"] = "data-dirty";
|
|
126
|
-
/**
|
|
127
|
-
* Present when the field is in valid state.
|
|
128
|
-
*/
|
|
129
|
-
FieldRootDataAttributes["valid"] = "data-valid";
|
|
130
|
-
/**
|
|
131
|
-
* Present when the field is in invalid state.
|
|
132
|
-
*/
|
|
133
|
-
FieldRootDataAttributes["invalid"] = "data-invalid";
|
|
134
|
-
/**
|
|
135
|
-
* Present when the field is filled.
|
|
136
|
-
*/
|
|
137
|
-
FieldRootDataAttributes["filled"] = "data-filled";
|
|
138
|
-
/**
|
|
139
|
-
* Present when the field control is focused.
|
|
140
|
-
*/
|
|
141
|
-
FieldRootDataAttributes["focused"] = "data-focused";
|
|
142
|
-
return FieldRootDataAttributes;
|
|
143
|
-
}({});
|
|
144
|
-
|
|
145
|
-
//#endregion
|
|
146
|
-
//#region src/field/utils/constants.ts
|
|
147
|
-
const DEFAULT_VALIDITY_STATE = {
|
|
148
|
-
badInput: false,
|
|
149
|
-
customError: false,
|
|
150
|
-
patternMismatch: false,
|
|
151
|
-
rangeOverflow: false,
|
|
152
|
-
rangeUnderflow: false,
|
|
153
|
-
stepMismatch: false,
|
|
154
|
-
tooLong: false,
|
|
155
|
-
tooShort: false,
|
|
156
|
-
typeMismatch: false,
|
|
157
|
-
valid: null,
|
|
158
|
-
valueMissing: false
|
|
159
|
-
};
|
|
160
|
-
const DEFAULT_FIELD_STATE_ATTRIBUTES = {
|
|
161
|
-
valid: null,
|
|
162
|
-
touched: false,
|
|
163
|
-
dirty: false,
|
|
164
|
-
filled: false,
|
|
165
|
-
focused: false
|
|
166
|
-
};
|
|
167
|
-
const DEFAULT_FIELD_ROOT_STATE = {
|
|
168
|
-
disabled: false,
|
|
169
|
-
...DEFAULT_FIELD_STATE_ATTRIBUTES
|
|
170
|
-
};
|
|
171
|
-
const fieldValidityMapping = { valid(value) {
|
|
172
|
-
if (value === null) return null;
|
|
173
|
-
if (value) return { [FieldRootDataAttributes.valid]: "" };
|
|
174
|
-
return { [FieldRootDataAttributes.invalid]: "" };
|
|
175
|
-
} };
|
|
176
|
-
|
|
177
|
-
//#endregion
|
|
178
|
-
//#region src/field/root/FieldRootContext.ts
|
|
179
|
-
function createDefaultContext() {
|
|
180
|
-
const defaultValidation = {
|
|
181
|
-
getValidationProps: () => ({}),
|
|
182
|
-
getInputValidationProps: () => ({}),
|
|
183
|
-
inputRef: shallowReadonly(shallowRef(null)),
|
|
184
|
-
setInputRef: () => {},
|
|
185
|
-
commit: async () => {}
|
|
186
|
-
};
|
|
187
|
-
return {
|
|
188
|
-
invalid: ref(void 0),
|
|
189
|
-
name: ref(void 0),
|
|
190
|
-
validityData: ref({
|
|
191
|
-
state: { ...DEFAULT_VALIDITY_STATE },
|
|
192
|
-
errors: [],
|
|
193
|
-
error: "",
|
|
194
|
-
value: "",
|
|
195
|
-
initialValue: null
|
|
196
|
-
}),
|
|
197
|
-
setValidityData: NOOP,
|
|
198
|
-
disabled: ref(false),
|
|
199
|
-
touched: ref(false),
|
|
200
|
-
setTouched: NOOP,
|
|
201
|
-
dirty: ref(false),
|
|
202
|
-
setDirty: NOOP,
|
|
203
|
-
filled: ref(false),
|
|
204
|
-
setFilled: NOOP,
|
|
205
|
-
focused: ref(false),
|
|
206
|
-
setFocused: NOOP,
|
|
207
|
-
validate: () => null,
|
|
208
|
-
validationMode: ref("onSubmit"),
|
|
209
|
-
validationDebounceTime: ref(0),
|
|
210
|
-
shouldValidateOnChange: () => false,
|
|
211
|
-
state: ref({ ...DEFAULT_FIELD_ROOT_STATE }),
|
|
212
|
-
markedDirtyRef: ref(false),
|
|
213
|
-
validation: defaultValidation
|
|
214
|
-
};
|
|
215
|
-
}
|
|
216
|
-
const fieldRootContextKey = Symbol("FieldRootContext");
|
|
217
|
-
let _defaultContext = null;
|
|
218
|
-
function useFieldRootContext(optional = true) {
|
|
219
|
-
const context = inject(fieldRootContextKey, void 0);
|
|
220
|
-
if (!context && !optional) throw new Error("Base UI Vue: FieldRootContext is missing. Field parts must be placed within <FieldRoot>.");
|
|
221
|
-
if (!context) {
|
|
222
|
-
if (!_defaultContext) _defaultContext = createDefaultContext();
|
|
223
|
-
return _defaultContext;
|
|
224
|
-
}
|
|
225
|
-
return context;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
//#endregion
|
|
229
|
-
//#region src/form/FormContext.ts
|
|
230
|
-
const formContextKey = Symbol("FormContext");
|
|
231
|
-
const defaultContext = {
|
|
232
|
-
errors: { value: EMPTY_OBJECT },
|
|
233
|
-
clearErrors: NOOP,
|
|
234
|
-
formRef: { value: { fields: /* @__PURE__ */ new Map() } },
|
|
235
|
-
validationMode: { value: "onSubmit" },
|
|
236
|
-
submitAttempted: { value: false }
|
|
237
|
-
};
|
|
238
|
-
function useFormContext() {
|
|
239
|
-
return inject(formContextKey, defaultContext);
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
//#endregion
|
|
243
|
-
//#region src/field/utils/getCombinedFieldValidityData.ts
|
|
244
|
-
/**
|
|
245
|
-
* Combines the field's client-side, stateful validity data with the external
|
|
246
|
-
* invalid state to determine the field's true validity.
|
|
247
|
-
*/
|
|
248
|
-
function getCombinedFieldValidityData(validityData, invalid) {
|
|
249
|
-
return {
|
|
250
|
-
...validityData,
|
|
251
|
-
state: {
|
|
252
|
-
...validityData.state,
|
|
253
|
-
valid: !invalid && validityData.state.valid
|
|
254
|
-
}
|
|
255
|
-
};
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
//#endregion
|
|
259
|
-
//#region src/field/useField.ts
|
|
260
|
-
function useField(params) {
|
|
261
|
-
const { enabled, value, id, name, controlRef, commit } = params;
|
|
262
|
-
const { formRef } = useFormContext();
|
|
263
|
-
const { invalid, markedDirtyRef, validityData, setValidityData } = useFieldRootContext();
|
|
264
|
-
const getValue = params.getValue ?? (() => value.value);
|
|
265
|
-
watchEffect(() => {
|
|
266
|
-
if (enabled && !enabled.value) return;
|
|
267
|
-
let initialValue = value.value;
|
|
268
|
-
if (initialValue === void 0) initialValue = getValue();
|
|
269
|
-
if (validityData.value.initialValue === null && initialValue !== null) setValidityData({
|
|
270
|
-
...validityData.value,
|
|
271
|
-
initialValue
|
|
272
|
-
});
|
|
273
|
-
});
|
|
274
|
-
watchEffect((onCleanup) => {
|
|
275
|
-
if (enabled && !enabled.value) return;
|
|
276
|
-
const currentId = id.value;
|
|
277
|
-
if (!currentId) return;
|
|
278
|
-
const fields = formRef.value.fields;
|
|
279
|
-
fields.set(currentId, {
|
|
280
|
-
getValue,
|
|
281
|
-
name: name?.value,
|
|
282
|
-
controlRef,
|
|
283
|
-
validityData: getCombinedFieldValidityData(validityData.value, invalid.value),
|
|
284
|
-
validate() {
|
|
285
|
-
let nextValue = value.value;
|
|
286
|
-
if (nextValue === void 0) nextValue = getValue();
|
|
287
|
-
markedDirtyRef.value = true;
|
|
288
|
-
commit(nextValue);
|
|
289
|
-
}
|
|
290
|
-
});
|
|
18
|
+
registerControlId(source, resolvedId.value);
|
|
291
19
|
onCleanup(() => {
|
|
292
|
-
|
|
20
|
+
registerControlId(source, void 0);
|
|
293
21
|
});
|
|
294
22
|
});
|
|
23
|
+
return computed(() => controlId.value ?? resolvedId.value);
|
|
295
24
|
}
|
|
296
25
|
|
|
297
26
|
//#endregion
|
|
@@ -507,5 +236,5 @@ var FieldControl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
|
|
|
507
236
|
var FieldControl_default = FieldControl_vue_vue_type_script_setup_true_lang_default;
|
|
508
237
|
|
|
509
238
|
//#endregion
|
|
510
|
-
export {
|
|
239
|
+
export { FieldControl_default, useLabelableId };
|
|
511
240
|
//# sourceMappingURL=FieldControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldControl.js","names":[
|
|
1
|
+
{"version":3,"file":"FieldControl.js","names":[],"sources":["../../src/labelable-provider/useLabelableId.ts","../../src/field/control/FieldControl.vue","../../src/field/control/FieldControl.vue"],"sourcesContent":[],"mappings":"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"}
|