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
1
|
const require_button_Button = require('../button/Button.cjs');
|
|
2
|
+
const require_checkbox_index = require('../checkbox/index.cjs');
|
|
3
|
+
const require_checkbox_group_CheckboxGroup = require('../checkbox-group/CheckboxGroup.cjs');
|
|
2
4
|
let vue = require("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(idOverride, prefix) {
|
|
15
|
-
if (idOverride != null) return idOverride;
|
|
16
|
-
if (typeof vue.useId === "function") {
|
|
17
|
-
const reactId = (0, vue.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(idOverride, "base-ui");
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
//#endregion
|
|
36
|
-
//#region src/labelable-provider/LabelableContext.ts
|
|
37
|
-
const defaultContext$1 = {
|
|
38
|
-
controlId: (0, vue.shallowReadonly)((0, vue.shallowRef)(void 0)),
|
|
39
|
-
setControlId: require_button_Button.NOOP,
|
|
40
|
-
labelId: (0, vue.shallowReadonly)((0, vue.shallowRef)(void 0)),
|
|
41
|
-
setLabelId: require_button_Button.NOOP,
|
|
42
|
-
messageIds: (0, vue.shallowReadonly)((0, vue.shallowRef)([])),
|
|
43
|
-
setMessageIds: require_button_Button.NOOP,
|
|
44
|
-
getDescriptionProps: () => ({})
|
|
45
|
-
};
|
|
46
|
-
const labelableContextKey = Symbol("LabelableContext");
|
|
47
|
-
function useLabelableContext() {
|
|
48
|
-
return (0, vue.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 = (0, vue.ref)(void 0);
|
|
56
|
-
const generatedLabelId = useBaseUiId(labelSourceId ? `${labelSourceId}-label` : void 0);
|
|
57
|
-
const resolvedAriaLabelledBy = (0, vue.computed)(() => {
|
|
58
|
-
const explicit = ariaLabelledBy?.value;
|
|
59
|
-
const fromContext = labelId?.value;
|
|
60
|
-
return explicit ?? fromContext ?? fallbackAriaLabelledBy.value;
|
|
61
|
-
});
|
|
62
|
-
(0, vue.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 } = require_checkbox_group_CheckboxGroup.useLabelableContext();
|
|
10
|
+
const source = Symbol("labelable-id");
|
|
11
|
+
const defaultId = require_checkbox_group_CheckboxGroup.useBaseUiId();
|
|
12
|
+
const resolvedId = (0, vue.computed)(() => (0, vue.toValue)(id) ?? defaultId);
|
|
98
13
|
(0, vue.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 (0, vue.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: (0, vue.shallowReadonly)((0, vue.shallowRef)(null)),
|
|
184
|
-
setInputRef: () => {},
|
|
185
|
-
commit: async () => {}
|
|
186
|
-
};
|
|
187
|
-
return {
|
|
188
|
-
invalid: (0, vue.ref)(void 0),
|
|
189
|
-
name: (0, vue.ref)(void 0),
|
|
190
|
-
validityData: (0, vue.ref)({
|
|
191
|
-
state: { ...DEFAULT_VALIDITY_STATE },
|
|
192
|
-
errors: [],
|
|
193
|
-
error: "",
|
|
194
|
-
value: "",
|
|
195
|
-
initialValue: null
|
|
196
|
-
}),
|
|
197
|
-
setValidityData: require_button_Button.NOOP,
|
|
198
|
-
disabled: (0, vue.ref)(false),
|
|
199
|
-
touched: (0, vue.ref)(false),
|
|
200
|
-
setTouched: require_button_Button.NOOP,
|
|
201
|
-
dirty: (0, vue.ref)(false),
|
|
202
|
-
setDirty: require_button_Button.NOOP,
|
|
203
|
-
filled: (0, vue.ref)(false),
|
|
204
|
-
setFilled: require_button_Button.NOOP,
|
|
205
|
-
focused: (0, vue.ref)(false),
|
|
206
|
-
setFocused: require_button_Button.NOOP,
|
|
207
|
-
validate: () => null,
|
|
208
|
-
validationMode: (0, vue.ref)("onSubmit"),
|
|
209
|
-
validationDebounceTime: (0, vue.ref)(0),
|
|
210
|
-
shouldValidateOnChange: () => false,
|
|
211
|
-
state: (0, vue.ref)({ ...DEFAULT_FIELD_ROOT_STATE }),
|
|
212
|
-
markedDirtyRef: (0, vue.ref)(false),
|
|
213
|
-
validation: defaultValidation
|
|
214
|
-
};
|
|
215
|
-
}
|
|
216
|
-
const fieldRootContextKey = Symbol("FieldRootContext");
|
|
217
|
-
let _defaultContext = null;
|
|
218
|
-
function useFieldRootContext(optional = true) {
|
|
219
|
-
const context = (0, vue.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: require_button_Button.EMPTY_OBJECT },
|
|
233
|
-
clearErrors: require_button_Button.NOOP,
|
|
234
|
-
formRef: { value: { fields: /* @__PURE__ */ new Map() } },
|
|
235
|
-
validationMode: { value: "onSubmit" },
|
|
236
|
-
submitAttempted: { value: false }
|
|
237
|
-
};
|
|
238
|
-
function useFormContext() {
|
|
239
|
-
return (0, vue.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
|
-
(0, vue.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
|
-
(0, vue.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 (0, vue.computed)(() => controlId.value ?? resolvedId.value);
|
|
295
24
|
}
|
|
296
25
|
|
|
297
26
|
//#endregion
|
|
@@ -392,7 +121,7 @@ var FieldControl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
|
|
|
392
121
|
const emit = __emit;
|
|
393
122
|
const attrs = (0, vue.useAttrs)();
|
|
394
123
|
const attrsObject = attrs;
|
|
395
|
-
const { state: fieldState, name: fieldName, disabled: fieldDisabled, setTouched, setDirty, markedDirtyRef, validityData, setFocused, setFilled, validationMode, validation } = useFieldRootContext();
|
|
124
|
+
const { state: fieldState, name: fieldName, disabled: fieldDisabled, setTouched, setDirty, markedDirtyRef, validityData, setFocused, setFilled, validationMode, validation } = require_checkbox_group_CheckboxGroup.useFieldRootContext();
|
|
396
125
|
const disabled = (0, vue.computed)(() => fieldDisabled.value || props.disabled);
|
|
397
126
|
const name = (0, vue.computed)(() => fieldName.value ?? props.name);
|
|
398
127
|
const state = (0, vue.computed)(() => ({
|
|
@@ -407,8 +136,8 @@ var FieldControl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
|
|
|
407
136
|
return internalValue.value;
|
|
408
137
|
});
|
|
409
138
|
const inputElementRef = (0, vue.ref)(null);
|
|
410
|
-
const { labelId } = useLabelableContext();
|
|
411
|
-
const ariaLabelledBy = useAriaLabelledBy({
|
|
139
|
+
const { labelId } = require_checkbox_group_CheckboxGroup.useLabelableContext();
|
|
140
|
+
const ariaLabelledBy = require_checkbox_index.useAriaLabelledBy({
|
|
412
141
|
ariaLabelledBy: (0, vue.computed)(() => attrs["aria-labelledby"]),
|
|
413
142
|
labelId,
|
|
414
143
|
labelSourceRef: inputElementRef,
|
|
@@ -418,7 +147,7 @@ var FieldControl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
|
|
|
418
147
|
(0, vue.watchEffect)(() => {
|
|
419
148
|
validation.setInputRef(inputElementRef.value);
|
|
420
149
|
});
|
|
421
|
-
useField({
|
|
150
|
+
require_checkbox_group_CheckboxGroup.useField({
|
|
422
151
|
id: controlId,
|
|
423
152
|
name,
|
|
424
153
|
commit: (v) => validation.commit(v),
|
|
@@ -484,7 +213,7 @@ var FieldControl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
|
|
|
484
213
|
"onBlur": handleBlur,
|
|
485
214
|
"onKeydown": handleKeydown
|
|
486
215
|
})),
|
|
487
|
-
stateAttributesMapping: fieldValidityMapping,
|
|
216
|
+
stateAttributesMapping: require_checkbox_group_CheckboxGroup.fieldValidityMapping,
|
|
488
217
|
defaultTagName: "input",
|
|
489
218
|
ref: inputElementRef
|
|
490
219
|
});
|
|
@@ -507,70 +236,16 @@ var FieldControl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
|
|
|
507
236
|
var FieldControl_default = FieldControl_vue_vue_type_script_setup_true_lang_default;
|
|
508
237
|
|
|
509
238
|
//#endregion
|
|
510
|
-
Object.defineProperty(exports, 'DEFAULT_VALIDITY_STATE', {
|
|
511
|
-
enumerable: true,
|
|
512
|
-
get: function () {
|
|
513
|
-
return DEFAULT_VALIDITY_STATE;
|
|
514
|
-
}
|
|
515
|
-
});
|
|
516
239
|
Object.defineProperty(exports, 'FieldControl_default', {
|
|
517
240
|
enumerable: true,
|
|
518
241
|
get: function () {
|
|
519
242
|
return FieldControl_default;
|
|
520
243
|
}
|
|
521
244
|
});
|
|
522
|
-
Object.defineProperty(exports, '
|
|
523
|
-
enumerable: true,
|
|
524
|
-
get: function () {
|
|
525
|
-
return fieldRootContextKey;
|
|
526
|
-
}
|
|
527
|
-
});
|
|
528
|
-
Object.defineProperty(exports, 'fieldValidityMapping', {
|
|
529
|
-
enumerable: true,
|
|
530
|
-
get: function () {
|
|
531
|
-
return fieldValidityMapping;
|
|
532
|
-
}
|
|
533
|
-
});
|
|
534
|
-
Object.defineProperty(exports, 'formContextKey', {
|
|
535
|
-
enumerable: true,
|
|
536
|
-
get: function () {
|
|
537
|
-
return formContextKey;
|
|
538
|
-
}
|
|
539
|
-
});
|
|
540
|
-
Object.defineProperty(exports, 'getCombinedFieldValidityData', {
|
|
541
|
-
enumerable: true,
|
|
542
|
-
get: function () {
|
|
543
|
-
return getCombinedFieldValidityData;
|
|
544
|
-
}
|
|
545
|
-
});
|
|
546
|
-
Object.defineProperty(exports, 'labelableContextKey', {
|
|
547
|
-
enumerable: true,
|
|
548
|
-
get: function () {
|
|
549
|
-
return labelableContextKey;
|
|
550
|
-
}
|
|
551
|
-
});
|
|
552
|
-
Object.defineProperty(exports, 'useBaseUiId', {
|
|
553
|
-
enumerable: true,
|
|
554
|
-
get: function () {
|
|
555
|
-
return useBaseUiId;
|
|
556
|
-
}
|
|
557
|
-
});
|
|
558
|
-
Object.defineProperty(exports, 'useFieldRootContext', {
|
|
559
|
-
enumerable: true,
|
|
560
|
-
get: function () {
|
|
561
|
-
return useFieldRootContext;
|
|
562
|
-
}
|
|
563
|
-
});
|
|
564
|
-
Object.defineProperty(exports, 'useFormContext', {
|
|
565
|
-
enumerable: true,
|
|
566
|
-
get: function () {
|
|
567
|
-
return useFormContext;
|
|
568
|
-
}
|
|
569
|
-
});
|
|
570
|
-
Object.defineProperty(exports, 'useLabelableContext', {
|
|
245
|
+
Object.defineProperty(exports, 'useLabelableId', {
|
|
571
246
|
enumerable: true,
|
|
572
247
|
get: function () {
|
|
573
|
-
return
|
|
248
|
+
return useLabelableId;
|
|
574
249
|
}
|
|
575
250
|
});
|
|
576
251
|
//# sourceMappingURL=FieldControl.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldControl.cjs","names":["
|
|
1
|
+
{"version":3,"file":"FieldControl.cjs","names":["useLabelableContext","useBaseUiId"],"sources":["../../src/labelable-provider/useLabelableId.ts","../../src/field/control/FieldControl.vue","../../src/field/control/FieldControl.vue"],"sourcesContent":[],"mappings":"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"}
|