base-ui-vue 0.1.0 → 0.2.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/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/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 +80 -10
- package/dist/index.d.cts +2751 -612
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +2751 -612
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +15 -5
- package/dist/index2.cjs +3651 -370
- package/dist/index2.cjs.map +1 -1
- package/dist/index2.js +3365 -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 +9 -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/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 +7 -0
- package/src/utils/owner.ts +5 -0
- package/src/utils/resolveAriaLabelledBy.ts +10 -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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"}
|