@vuecs/forms 5.0.0 → 5.1.0

package/dist/index.mjs

@@ -1,7 +1,46 @@
-import { installDefaultsManager, installThemeManager, useComponentDefaults, useComponentTheme, useId } from "@vuecs/core";
+import { installDefaultsManager, installThemeManager, useComponentDefaults, useComponentTheme, useId, useThemeProps } from "@vuecs/core";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, h, inject, mergeProps, normalizeClass, openBlock, provide, ref, renderList, renderSlot, resolveComponent, toDisplayString, toRef, toValue, vModelText, vShow, watch, withCtx, withDirectives } from "vue";
 import { CheckboxGroupRoot, CheckboxIndicator, CheckboxRoot, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, PinInputInput, PinInputRoot, RadioGroupIndicator, RadioGroupItem, RadioGroupRoot, SelectContent, SelectGroup, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectTrigger, SelectValue, SelectViewport, SliderRange, SliderRoot, SliderThumb, SliderTrack, SwitchRoot, SwitchThumb, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot } from "reka-ui";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, h, mergeProps, normalizeClass, openBlock, ref, renderList, renderSlot, resolveComponent, toDisplayString, toRef, toValue, vModelText, vShow, watch, withCtx, withDirectives } from "vue";
 import { onClickOutside, useDebounceFn, useInfiniteScroll } from "@vueuse/core";
+//#region src/components/form-group/context.ts
+const FORM_GROUP_CONTEXT_KEY = Symbol("vcFormGroupContext");
+function provideFormGroupContext(ctx) {
+	provide(FORM_GROUP_CONTEXT_KEY, ctx);
+}
+function useFormGroupContext() {
+	return inject(FORM_GROUP_CONTEXT_KEY, null);
+}
+/**
+* Wrap a form-input component's props so that any inherited severity
+* from the surrounding `<VCFormGroup>` flows into `themeVariant.severity`
+* — lighting up the theme's `severity` variant on the input without
+* the consumer wiring it per-instance.
+*
+* Per-instance values win: if the caller's `themeVariant` already has
+* a `severity` key (even one set to `undefined`), the inherited value
+* is ignored. Outside a `<VCFormGroup>` the helper is a pass-through.
+*
+* Pass directly to `useComponentTheme(name, useFormInputThemeProps(props), defaults)`.
+*/
+function useFormInputThemeProps(props) {
+	const ctx = useFormGroupContext();
+	return {
+		get themeClass() {
+			return props.themeClass;
+		},
+		get themeVariant() {
+			const own = props.themeVariant;
+			if (own && "severity" in own) return own;
+			const inherited = ctx?.severity();
+			if (inherited === void 0) return own;
+			return {
+				...own ?? {},
+				severity: inherited
+			};
+		}
+	};
+}
+//#endregion
 //#region src/components/form-checkbox/FormCheckbox.vue?vue&type=script&lang.ts
 const formCheckboxThemeDefaults = { classes: {
 	root: "vc-form-checkbox",
@@ -79,7 +118,7 @@ var FormCheckbox_default = defineComponent({
 	emits: ["update:modelValue"],
 	slots: Object,
 	setup(props, { attrs, emit, slots }) {
-		const theme = useComponentTheme("formCheckbox", props, formCheckboxThemeDefaults);
+		const theme = useComponentTheme("formCheckbox", useFormInputThemeProps(props), formCheckboxThemeDefaults);
 		const defaults = useComponentDefaults("formCheckbox", props, behavioralDefaults$3);
 		const fallbackId = useId(void 0, "vc-form-checkbox");
 		return () => {
@@ -165,7 +204,7 @@ var FormCheckboxGroup_default = defineComponent({
 	},
 	emits: ["update:modelValue"],
 	setup(props, { attrs, emit, slots }) {
-		const theme = useComponentTheme("formCheckboxGroup", props, formCheckboxGroupThemeDefaults);
+		const theme = useComponentTheme("formCheckboxGroup", useFormInputThemeProps(props), formCheckboxGroupThemeDefaults);
 		return () => h(CheckboxGroupRoot, mergeProps(attrs, {
 			name: props.name,
 			orientation: props.orientation,
@@ -234,7 +273,7 @@ var ValidationGroup_default = defineComponent({
 	},
 	slots: Object,
 	setup(props, { slots }) {
-		const theme = useComponentTheme("validationGroup", props, validationGroupThemeDefaults);
+		const theme = useComponentTheme("validationGroup", useThemeProps(props, "severity"), validationGroupThemeDefaults);
 		return () => {
 			const resolved = theme.value;
 			let errors;
@@ -358,6 +397,12 @@ var FormGroup_default = defineComponent({
 	slots: Object,
 	setup(props, { attrs, slots }) {
 		const theme = useComponentTheme("formGroup", props, formGroupThemeDefaults);
+		provideFormGroupContext({ severity: () => {
+			if (props.validation != null) return props.validation.severity;
+			if (props.validationSeverity !== void 0) return props.validationSeverity;
+			const messages = props.validationMessages;
+			return !!messages && (Array.isArray(messages) ? messages.length > 0 : Object.keys(messages).length > 0) ? "error" : void 0;
+		} });
 		return () => {
 			const resolved = theme.value;
 			const children = [];
@@ -407,11 +452,16 @@ var FormInput_default = defineComponent({
 	name: "VCFormInput",
 	inheritAttrs: false,
 	props: {
-		/** Controlled string value (v-model). */
-		modelValue: {
-			type: String,
-			default: ""
-		},
+		/**
+		* Controlled string value (v-model). `null` is the documented "unset" value.
+		*
+		* No `default` on purpose: vue-tsc strips `null`/`undefined` (via `NonNullable`)
+		* when folding a prop default into the emitted `DefaultProps`, which then
+		* intersects `$props['modelValue']` back down to `string` and breaks v-model
+		* against nullable entity fields (#1613). The render coerces `null`/`undefined`
+		* to `''`, so the empty-input behaviour is unchanged.
+		*/
+		modelValue: { type: [String, null] },
 		/** Native `<input type>` attribute. */
 		type: {
 			type: String,
@@ -461,7 +511,7 @@ var FormInput_default = defineComponent({
 	emits: ["update:modelValue"],
 	slots: Object,
 	setup(props, { attrs, emit, slots }) {
-		const theme = useComponentTheme("formInput", props, formInputThemeDefaults);
+		const theme = useComponentTheme("formInput", useFormInputThemeProps(props), formInputThemeDefaults);
 		const localValue = ref(props.modelValue);
 		watch(() => props.modelValue, (value) => {
 			localValue.value = value;
@@ -592,7 +642,7 @@ var FormNumber_default = defineComponent({
 	},
 	emits: ["update:modelValue"],
 	setup(props, { attrs, emit }) {
-		const theme = useComponentTheme("formNumber", props, formNumberThemeDefaults);
+		const theme = useComponentTheme("formNumber", useFormInputThemeProps(props), formNumberThemeDefaults);
 		return () => h(NumberFieldRoot, mergeProps(attrs, {
 			focusOnChange: props.focusOnChange,
 			name: props.name,
@@ -692,7 +742,7 @@ var FormPin_default = defineComponent({
 	},
 	emits: ["update:modelValue", "complete"],
 	setup(props, { attrs, emit }) {
-		const theme = useComponentTheme("formPin", props, formPinThemeDefaults);
+		const theme = useComponentTheme("formPin", useFormInputThemeProps(props), formPinThemeDefaults);
 		return () => h(PinInputRoot, mergeProps(attrs, {
 			name: props.name,
 			id: props.id,
@@ -781,7 +831,7 @@ var FormRadio_default = defineComponent({
 	},
 	slots: Object,
 	setup(props, { attrs, slots }) {
-		const theme = useComponentTheme("formRadio", props, formRadioThemeDefaults);
+		const theme = useComponentTheme("formRadio", useFormInputThemeProps(props), formRadioThemeDefaults);
 		const defaults = useComponentDefaults("formRadio", props, behavioralDefaults$2);
 		const fallbackId = useId(void 0, "vc-form-radio");
 		return () => {
@@ -870,7 +920,7 @@ var FormRadioGroup_default = defineComponent({
 	},
 	emits: ["update:modelValue"],
 	setup(props, { attrs, emit, slots }) {
-		const theme = useComponentTheme("formRadioGroup", props, formRadioGroupThemeDefaults);
+		const theme = useComponentTheme("formRadioGroup", useFormInputThemeProps(props), formRadioGroupThemeDefaults);
 		return () => h(RadioGroupRoot, mergeProps(attrs, {
 			name: props.name,
 			orientation: props.orientation,
@@ -975,7 +1025,7 @@ var FormSelect_default = defineComponent({
 	},
 	emits: ["update:modelValue"],
 	setup(props, { attrs, emit }) {
-		const theme = useComponentTheme("formSelect", props, formSelectThemeDefaults);
+		const theme = useComponentTheme("formSelect", useFormInputThemeProps(props), formSelectThemeDefaults);
 		const defaults = useComponentDefaults("formSelect", props, behavioralDefaults$1);
 		return () => {
 			const resolved = theme.value;
@@ -1113,7 +1163,7 @@ var FormSelectSearch_vue_vue_type_script_lang_default = defineComponent({
 	},
 	emits: ["update:modelValue", "change"],
 	setup(props, { emit }) {
-		const theme = useComponentTheme("formSelectSearch", props, formSelectSearchThemeDefaults);
+		const theme = useComponentTheme("formSelectSearch", useFormInputThemeProps(props), formSelectSearchThemeDefaults);
 		const listElement = ref(null);
 		const inputElement = ref(null);
 		const q = ref("");
@@ -1416,7 +1466,7 @@ var FormSlider_default = defineComponent({
 	},
 	emits: ["update:modelValue", "valueCommit"],
 	setup(props, { attrs, emit }) {
-		const theme = useComponentTheme("formSlider", props, formSliderThemeDefaults);
+		const theme = useComponentTheme("formSlider", useFormInputThemeProps(props), formSliderThemeDefaults);
 		const isScalar = computed(() => typeof props.modelValue === "number");
 		const internalValue = computed(() => {
 			if (props.modelValue === void 0 || props.modelValue === null) return [props.min];
@@ -1519,7 +1569,7 @@ var FormSwitch_default = defineComponent({
 	emits: ["update:modelValue"],
 	slots: Object,
 	setup(props, { attrs, emit, slots }) {
-		const theme = useComponentTheme("formSwitch", props, formSwitchThemeDefaults);
+		const theme = useComponentTheme("formSwitch", useFormInputThemeProps(props), formSwitchThemeDefaults);
 		const defaults = useComponentDefaults("formSwitch", props, behavioralDefaults);
 		const fallbackId = useId(void 0, "vc-form-switch");
 		return () => {
@@ -1636,7 +1686,7 @@ var FormTags_default = defineComponent({
 	},
 	emits: ["update:modelValue", "invalid"],
 	setup(props, { attrs, emit }) {
-		const theme = useComponentTheme("formTags", props, formTagsThemeDefaults);
+		const theme = useComponentTheme("formTags", useFormInputThemeProps(props), formTagsThemeDefaults);
 		return () => h(TagsInputRoot, mergeProps(attrs, {
 			placeholder: props.placeholder,
 			addOnBlur: props.addOnBlur,
@@ -1671,11 +1721,16 @@ const formTextareaThemeDefaults = { classes: { root: "" } };
 var FormTextarea_default = defineComponent({
 	name: "VCFormTextarea",
 	props: {
-		/** Controlled string value (v-model). */
-		modelValue: {
-			type: String,
-			default: ""
-		},
+		/**
+		* Controlled string value (v-model). `null` is the documented "unset" value.
+		*
+		* No `default` on purpose: vue-tsc strips `null`/`undefined` (via `NonNullable`)
+		* when folding a prop default into the emitted `DefaultProps`, which then
+		* intersects `$props['modelValue']` back down to `string` and breaks v-model
+		* against nullable entity fields (#1613). The render coerces `null`/`undefined`
+		* to `''`, so the empty-textarea behaviour is unchanged.
+		*/
+		modelValue: { type: [String, null] },
 		/** Debounce window (ms) for `update:modelValue` emissions. `0` disables debouncing. */
 		debounce: {
 			type: Number,
@@ -1694,7 +1749,7 @@ var FormTextarea_default = defineComponent({
 	},
 	emits: ["update:modelValue"],
 	setup(props, { attrs, emit }) {
-		const theme = useComponentTheme("formTextarea", props, formTextareaThemeDefaults);
+		const theme = useComponentTheme("formTextarea", useFormInputThemeProps(props), formTextareaThemeDefaults);
 		const localValue = ref(props.modelValue);
 		watch(() => props.modelValue, (value) => {
 			localValue.value = value;
@@ -1794,6 +1849,6 @@ function install(instance, options = {}) {
 }
 var src_default = { install };
 //#endregion
-export { FormCheckbox_default as VCFormCheckbox, FormCheckboxGroup_default as VCFormCheckboxGroup, FormGroup_default as VCFormGroup, FormInput_default as VCFormInput, FormNumber_default as VCFormNumber, FormPin_default as VCFormPin, FormRadio_default as VCFormRadio, FormRadioGroup_default as VCFormRadioGroup, FormSelect_default as VCFormSelect, FormSelectSearch_default as VCFormSelectSearch, FormSlider_default as VCFormSlider, FormSwitch_default as VCFormSwitch, FormTags_default as VCFormTags, FormTextarea_default as VCFormTextarea, ValidationGroup_default as VCValidationGroup, ValidationSeverity, src_default as default, formCheckboxGroupThemeDefaults, formCheckboxThemeDefaults, formGroupThemeDefaults, formInputThemeDefaults, formNumberThemeDefaults, formPinThemeDefaults, formRadioGroupThemeDefaults, formRadioThemeDefaults, formSelectSearchThemeDefaults, formSelectThemeDefaults, formSliderThemeDefaults, formSwitchThemeDefaults, formTagsThemeDefaults, formTextareaThemeDefaults, install, isFormOptionGroup, useSubmitButton, validationGroupThemeDefaults };
+export { FormCheckbox_default as VCFormCheckbox, FormCheckboxGroup_default as VCFormCheckboxGroup, FormGroup_default as VCFormGroup, FormInput_default as VCFormInput, FormNumber_default as VCFormNumber, FormPin_default as VCFormPin, FormRadio_default as VCFormRadio, FormRadioGroup_default as VCFormRadioGroup, FormSelect_default as VCFormSelect, FormSelectSearch_default as VCFormSelectSearch, FormSlider_default as VCFormSlider, FormSwitch_default as VCFormSwitch, FormTags_default as VCFormTags, FormTextarea_default as VCFormTextarea, ValidationGroup_default as VCValidationGroup, ValidationSeverity, src_default as default, formCheckboxGroupThemeDefaults, formCheckboxThemeDefaults, formGroupThemeDefaults, formInputThemeDefaults, formNumberThemeDefaults, formPinThemeDefaults, formRadioGroupThemeDefaults, formRadioThemeDefaults, formSelectSearchThemeDefaults, formSelectThemeDefaults, formSliderThemeDefaults, formSwitchThemeDefaults, formTagsThemeDefaults, formTextareaThemeDefaults, install, isFormOptionGroup, provideFormGroupContext, useFormGroupContext, useFormInputThemeProps, useSubmitButton, validationGroupThemeDefaults };
 
 //# sourceMappingURL=index.mjs.map