@zboson/ui 0.0.0-stage → 0.0.1

package/dist/form/Form.js

@@ -0,0 +1,572 @@
+import warning from "../_util/warning.js";
+import { NoFormStyle, useFormContextProvider, useVariantContextProvider } from "./context.js";
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { useSizeProvider } from "../config-provider/SizeContext.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import { useDisabledContext, useDisabledContextProvider } from "../config-provider/DisabledContext.js";
+import useLocale from "../locale/useLocale.js";
+import { getFieldId, toArray, toNamePathStr } from "./util.js";
+import { FormHookRegistryKey, FormInstanceContextKey } from "./hooks/useForm.js";
+import style_default from "./style/index.js";
+import { allPromiseFinish } from "./utils/asyncUtil.js";
+import { defaultValidateMessages } from "./utils/messages.js";
+import { cloneByNamePathList, containsNamePath, getNamePath, setValue } from "./utils/valueUtil.js";
+import { useValidateMessagesContext, useValidateMessagesProvider } from "./validateMessagesContext.js";
+import { computed, createVNode, defineComponent, getCurrentInstance, inject, mergeDefaults, mergeProps, onBeforeUnmount, onMounted, provide, shallowRef, watch } from "vue";
+import { clsx, get, set } from "@v-c/util";
+import { pick } from "es-toolkit";
+import scrollIntoView from "scroll-into-view-if-needed";
+import { getDOM } from "@v-c/util/dist/Dom/findDOMNode";
+//#region src/form/Form.tsx
+const InternalForm = /* @__PURE__ */ defineComponent((props, { slots, expose, emit, attrs }) => {
+	const contextDisabled = useDisabledContext();
+	const { prefixCls, direction, requiredMark: contextRequiredMark, colon: contextColon, scrollToFirstError: contextScrollToFirstError, autoComplete: contextAutoComplete, autocomplete: contextAutocomplete, class: contextClassName, style: contextStyle, styles: contextStyles, classes: contextClassNames, tooltip: contextTooltip, labelAlign: contextLabelAlign, labelWrap: contextLabelWrap } = useComponentBaseConfig("form", props, [
+		"scrollToFirstError",
+		"colon",
+		"requiredMark",
+		"tooltip",
+		"autoComplete",
+		"autocomplete",
+		"labelAlign",
+		"labelWrap"
+	]);
+	const { size, styles, classes, variant, model, rules, validateTrigger, validateMessages, feedbackIcons } = toPropsRefs(props, "size", "classes", "styles", "variant", "model", "rules", "validateTrigger", "validateMessages", "feedbackIcons");
+	const mergedSize = useSize(size);
+	const disabled = computed(() => props?.disabled ?? contextDisabled.value);
+	const contextValidateMessages = useValidateMessagesContext();
+	const [formLocale] = useLocale("Form");
+	const mergedRequiredMark = computed(() => {
+		if (props.requiredMark !== void 0) return props.requiredMark;
+		if (contextRequiredMark.value !== void 0) return contextRequiredMark.value;
+		return true;
+	});
+	const mergedColon = computed(() => props.colon ?? contextColon.value);
+	const mergedLabelAlign = computed(() => props.labelAlign ?? contextLabelAlign.value);
+	const mergedLabelWrap = computed(() => props.labelWrap ?? contextLabelWrap.value);
+	const mergedAutoComplete = computed(() => props.autoComplete ?? props.autocomplete ?? contextAutoComplete.value ?? contextAutocomplete.value);
+	const mergedTooltip = computed(() => {
+		return {
+			...contextTooltip.value,
+			...props.tooltip
+		};
+	});
+	const mergedValidateMessages = computed(() => ({
+		...defaultValidateMessages,
+		...formLocale?.value?.defaultValidateMessages || {},
+		...contextValidateMessages?.value || {},
+		...validateMessages.value || {}
+	}));
+	useValidateMessagesProvider(mergedValidateMessages);
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			size: mergedSize.value,
+			colon: mergedColon.value,
+			requiredMark: mergedRequiredMark.value,
+			labelAlign: mergedLabelAlign.value,
+			labelWrap: mergedLabelWrap.value
+		};
+	});
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, styles), useToProps(mergedProps));
+	const fields = {};
+	const lastValidatePromise = shallowRef();
+	const addField = (eventKey, field) => {
+		fields[eventKey] = field;
+	};
+	const removeField = (eventKey, field) => {
+		if (field && fields[eventKey] !== field) return;
+		delete fields[eventKey];
+	};
+	const items = /* @__PURE__ */ new Map();
+	const addItem = (namePathStr, instance) => {
+		items.set(namePathStr, instance);
+	};
+	const removeItem = (namePathStr) => {
+		items.delete(namePathStr);
+	};
+	const getFieldInstance = (name) => {
+		return items.get(toNamePathStr(getNamePath(name)));
+	};
+	const getFieldsByNameList = (namePathList, partialMatch = false) => {
+		const mergedNamePathList = namePathList?.length ? namePathList : void 0;
+		const fieldList = Object.values(fields);
+		if (!mergedNamePathList) return fieldList;
+		return fieldList.filter((field) => containsNamePath(mergedNamePathList, field.namePath(), partialMatch));
+	};
+	const getFieldValue = (namePath) => {
+		return get(model.value ?? {}, namePath);
+	};
+	const getFieldsValue = (nameList = true) => {
+		if (nameList === true) {
+			const allNameList = Object.values(fields).map((field) => field.namePath());
+			return cloneByNamePathList(model.value ?? {}, allNameList);
+		}
+		return cloneByNamePathList(model.value ?? {}, nameList);
+	};
+	const getFields = (namePathList) => {
+		return getFieldsByNameList(namePathList).map((field) => {
+			return {
+				...field.getMeta(),
+				name: field.namePath(),
+				value: field.getValue()
+			};
+		});
+	};
+	const triggerFieldsChange = (namePathList) => {
+		emit("fieldsChange", getFields(namePathList), getFields());
+	};
+	const triggerValuesChange = (namePath, value) => {
+		if (model.value) emit("valuesChange", setValue({}, namePath, value), model.value);
+		triggerFieldsChange([namePath]);
+	};
+	const onValidate = (name, status, errors) => {
+		emit("validate", name, status, errors);
+	};
+	const resetFields = (nameList) => {
+		const targetList = nameList ? nameList.map(getNamePath) : void 0;
+		getFieldsByNameList(targetList).forEach((field) => field.resetField());
+	};
+	const clearValidate = (nameList) => {
+		const targetList = nameList ? nameList.map(getNamePath) : void 0;
+		getFieldsByNameList(targetList).forEach((field) => field.clearValidate());
+	};
+	const validateFields = (arg1, arg2) => {
+		let nameList;
+		let options;
+		if (Array.isArray(arg1) || typeof arg1 === "string" || typeof arg2 === "string") {
+			nameList = arg1;
+			options = arg2 || {};
+		} else options = arg1 || {};
+		const provideNameList = !!(nameList && toArray(nameList).length);
+		const namePathList = provideNameList ? toArray(nameList).map(getNamePath) : [];
+		const promiseList = [];
+		const { recursive, dirty } = options;
+		getFieldsByNameList(provideNameList ? namePathList : void 0, recursive).forEach((field) => {
+			if (!provideNameList) namePathList.push(field.namePath());
+			if (!field.rules || !field.rules()?.length) return;
+			if (dirty && !field.isFieldDirty?.()) return;
+			const promise = field.validateRules(options).then(() => ({
+				name: field.namePath(),
+				errors: [],
+				warnings: []
+			})).catch((ruleErrors) => {
+				const mergedErrors = [];
+				const mergedWarnings = [];
+				ruleErrors?.forEach(({ rule: { warningOnly }, errors }) => {
+					if (warningOnly) mergedWarnings.push(...errors);
+					else mergedErrors.push(...errors);
+				});
+				if (mergedErrors.length) return Promise.reject({
+					name: field.namePath(),
+					errors: mergedErrors,
+					warnings: mergedWarnings
+				});
+				return {
+					name: field.namePath(),
+					errors: mergedErrors,
+					warnings: mergedWarnings
+				};
+			});
+			promiseList.push(promise);
+		});
+		const summaryPromise = allPromiseFinish(promiseList);
+		lastValidatePromise.value = summaryPromise;
+		const returnPromise = summaryPromise.then(() => {
+			if (lastValidatePromise.value === summaryPromise) return Promise.resolve(getFieldsValue(namePathList));
+			return Promise.reject([]);
+		}).catch((results) => {
+			const errorList = results.filter((result) => result && result.errors.length);
+			const errorMessage = errorList[0]?.errors?.[0];
+			return Promise.reject({
+				message: errorMessage,
+				values: getFieldsValue(namePathList),
+				errorFields: errorList,
+				outOfDate: lastValidatePromise.value !== summaryPromise
+			});
+		});
+		returnPromise.catch((e) => e);
+		return returnPromise;
+	};
+	const formContextValue = computed(() => {
+		return {
+			...pick(props, [
+				"name",
+				"labelCol",
+				"wrapperCol",
+				"layout"
+			]),
+			labelAlign: mergedLabelAlign.value,
+			labelWrap: mergedLabelWrap.value,
+			colon: mergedColon.value,
+			requiredMark: mergedRequiredMark.value,
+			classes: mergedClassNames.value,
+			styles: mergedStyles.value,
+			rules: rules.value,
+			model: model.value,
+			validateTrigger: validateTrigger.value,
+			tooltip: mergedTooltip.value,
+			validateMessages: mergedValidateMessages.value,
+			feedbackIcons: feedbackIcons.value,
+			addField,
+			removeField,
+			addItem,
+			removeItem,
+			onValidate,
+			triggerValuesChange,
+			triggerFieldsChange,
+			getFieldValue,
+			getFieldsValue
+		};
+	});
+	const nativeElementRef = shallowRef();
+	const scrollToField = (fieldName, options = {}) => {
+		let defaultScrollToFirstError = { block: "nearest" };
+		if (typeof options === "object") defaultScrollToFirstError = {
+			...defaultScrollToFirstError,
+			...options
+		};
+		const targetId = getFieldId(fieldName, props.name);
+		const node = targetId ? document.getElementById(targetId) : null;
+		if (node) {
+			scrollIntoView(node, defaultScrollToFirstError);
+			if (defaultScrollToFirstError.focus !== false) try {
+				node.focus();
+			} catch {}
+		}
+	};
+	const onInternalFinishFailed = (errorInfo) => {
+		emit("finishFailed", errorInfo);
+		if (errorInfo.errorFields?.length) {
+			const fieldName = errorInfo.errorFields?.[0]?.name;
+			if (props.scrollToFirstError !== void 0) scrollToField(fieldName, props.scrollToFirstError);
+			else if (contextScrollToFirstError.value !== void 0) scrollToField(fieldName, contextScrollToFirstError.value);
+		}
+	};
+	const updateModelValue = (namePath, value) => {
+		if (!model.value) return;
+		const newStore = set(model.value, namePath, value);
+		Object.assign(model.value, newStore);
+	};
+	const setFieldValue = (name, value) => {
+		const namePath = getNamePath(name);
+		updateModelValue(namePath, value);
+		triggerValuesChange(namePath, value);
+	};
+	const setFieldsValue = (values) => {
+		if (!model.value) return;
+		Object.keys(values || {}).forEach((key) => {
+			updateModelValue(getNamePath(key), values[key]);
+		});
+		triggerFieldsChange();
+	};
+	const getFieldError = (name) => {
+		const namePath = getNamePath(name);
+		return getFields([namePath])[0]?.errors || [];
+	};
+	const getFieldWarning = (name) => {
+		const namePath = getNamePath(name);
+		return getFields([namePath])[0]?.warnings || [];
+	};
+	const getFieldsError = (nameList) => {
+		const namePathList = nameList?.length ? nameList.map(getNamePath) : void 0;
+		return getFields(namePathList).map((field) => ({
+			name: field.name,
+			errors: field.errors,
+			warnings: field.warnings
+		}));
+	};
+	const isFieldTouched = (name) => {
+		const namePath = getNamePath(name);
+		return !!getFields([namePath])[0]?.touched;
+	};
+	const isFieldsTouched = (nameList, allFieldsTouched) => {
+		const arrNameList = typeof nameList === "boolean" || nameList === void 0 ? void 0 : nameList.map(getNamePath);
+		const fieldsData = getFields(arrNameList);
+		if (nameList === false) return false;
+		if (!fieldsData.length) return false;
+		if (allFieldsTouched) return fieldsData.every((field) => field.touched);
+		return fieldsData.some((field) => field.touched);
+	};
+	const isFieldValidating = (name) => {
+		const namePath = getNamePath(name);
+		return !!getFields([namePath])[0]?.validating;
+	};
+	const isFieldsValidating = (nameList) => {
+		const namePathList = nameList?.length ? nameList.map(getNamePath) : void 0;
+		return getFields(namePathList).some((field) => field.validating);
+	};
+	const setFields = (data) => {
+		data.forEach((item) => {
+			const namePath = getNamePath(item.name);
+			const target = Object.values(fields).find((field) => containsNamePath([field.namePath()], namePath));
+			if (target?.setFieldState) target.setFieldState({
+				errors: item.errors || [],
+				warnings: item.warnings || [],
+				touched: item.touched ?? target.getMeta().touched,
+				validating: item.validating ?? target.getMeta().validating
+			});
+			if (Object.prototype.hasOwnProperty.call(item, "value")) updateModelValue(namePath, item.value);
+		});
+		triggerFieldsChange();
+	};
+	const submit = () => {
+		handleSubmit(new Event("submit"));
+	};
+	useFormContextProvider(formContextValue);
+	useVariantContextProvider(variant);
+	useDisabledContextProvider(disabled);
+	useSizeProvider(mergedSize);
+	const formInstance = {
+		getFieldValue: (name) => getFieldValue(getNamePath(name)),
+		getFieldsValue,
+		getFieldError,
+		getFieldsError,
+		getFieldWarning,
+		isFieldsTouched,
+		isFieldTouched,
+		isFieldValidating,
+		isFieldsValidating,
+		resetFields,
+		clearValidate,
+		setFields,
+		setFieldValue,
+		setFieldsValue,
+		validateFields,
+		validate: validateFields,
+		submit,
+		get nativeElement() {
+			return nativeElementRef.value;
+		},
+		get el() {
+			return nativeElementRef.value;
+		},
+		scrollToField: (name, options = {}) => {
+			scrollToField(getNamePath(name), options);
+		},
+		focusField: (name) => {
+			const instance = getFieldInstance(name);
+			if (typeof instance?.focus === "function") {
+				try {
+					instance.focus();
+				} finally {}
+				return;
+			}
+			const targetId = getFieldId(getNamePath(name), props.name);
+			const node = getDOM(instance) ?? (targetId ? document.getElementById(targetId) : null);
+			if (node) try {
+				node.focus?.();
+			} finally {}
+		},
+		getFieldInstance
+	};
+	expose(formInstance);
+	provide(FormInstanceContextKey, formInstance);
+	const hookRegistry = inject(FormHookRegistryKey, null);
+	const vm = getCurrentInstance();
+	let boundEntry;
+	onMounted(() => {
+		if (!hookRegistry || !vm) return;
+		const entries = hookRegistry.entries;
+		const isSelf = (val) => !!val && (val === formInstance || val.$ === vm);
+		if (entries.some((entry) => isSelf(entry.instanceRef.value))) return;
+		let entry;
+		if (props.name) entry = entries.find((item) => item.boundBy === void 0 && item.name === props.name);
+		if (!entry) entry = entries.find((item) => item.boundBy === void 0 && item.name === void 0);
+		if (entry) {
+			if (!entry.name && entries.filter((item) => item.name === void 0).length > 1) warning(false, "Form", "Multiple unnamed `useForm` instances are connected by declaration order, which is fragile. Bind explicitly via template ref or a matching `name`.");
+			entry.boundBy = vm.uid;
+			entry.instanceRef.value = formInstance;
+			boundEntry = entry;
+		}
+	});
+	onBeforeUnmount(() => {
+		if (boundEntry && vm && boundEntry.boundBy === vm.uid) {
+			boundEntry.boundBy = void 0;
+			boundEntry.instanceRef.value = void 0;
+			boundEntry = void 0;
+		}
+	});
+	watch(() => rules.value, () => {
+		if (props.validateOnRuleChange) validateFields();
+	}, { deep: true });
+	function handleSubmit(e) {
+		e.preventDefault();
+		e.stopPropagation();
+		emit("submit", e);
+		if (props.model) validateFields().then((values) => {
+			emit("finish", values);
+		}).catch((errors) => {
+			onInternalFinishFailed(errors);
+		});
+	}
+	const handleReset = (e) => {
+		e.preventDefault();
+		emit("reset", e);
+		resetFields();
+	};
+	return () => {
+		const { layout, rootClass, name } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const formClassName = clsx(prefixCls.value, `${prefixCls.value}-${layout}`, {
+			[`${prefixCls.value}-hide-required-mark`]: mergedRequiredMark.value === false,
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
+			[`${prefixCls.value}-${mergedSize.value}`]: mergedSize.value
+		}, cssVarCls.value, rootCls.value, hashId.value, contextClassName.value, className, rootClass, mergedClassNames.value.root);
+		return createVNode("form", mergeProps({ "id": name }, restAttrs, {
+			"autocomplete": mergedAutoComplete.value,
+			"name": name,
+			"ref": nativeElementRef,
+			"style": [mergedStyles.value.root, style],
+			"class": formClassName,
+			"onSubmit": handleSubmit,
+			"onReset": handleReset
+		}), [createVNode(NoFormStyle, { "status": true }, { default: () => [slots?.default?.()] })]);
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		colon: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		layout: {
+			type: String,
+			required: false
+		},
+		labelAlign: {
+			type: String,
+			required: false
+		},
+		labelWrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		labelCol: {
+			type: Object,
+			required: false
+		},
+		wrapperCol: {
+			type: Object,
+			required: false
+		},
+		feedbackIcons: {
+			type: Function,
+			required: false
+		},
+		size: {
+			type: [String, null],
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		scrollToFirstError: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		requiredMark: {
+			type: [
+				Boolean,
+				String,
+				Function
+			],
+			required: false,
+			default: void 0
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		validateMessages: {
+			type: Object,
+			required: false
+		},
+		model: {
+			type: Object,
+			required: false
+		},
+		rules: {
+			type: Object,
+			required: false
+		},
+		validateTrigger: {
+			type: [
+				String,
+				Array,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		preserve: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		clearOnDestroy: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		validateOnRuleChange: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		autoComplete: {
+			type: [String, null],
+			required: false
+		},
+		autocomplete: {
+			type: [String, null],
+			required: false
+		},
+		tooltip: {
+			type: Object,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	}, { layout: "horizontal" }),
+	emits: [
+		"finish",
+		"finishFailed",
+		"submit",
+		"reset",
+		"validate",
+		"valuesChange",
+		"fieldsChange"
+	],
+	name: "AForm",
+	inheritAttrs: false
+});
+//#endregion
+export { InternalForm as default };

package/dist/form/FormItem/ItemHolder.d.ts

@@ -0,0 +1,37 @@
+import { FormItemLabelProps } from "../FormItemLabel.js";
+import { Meta } from "../types.js";
+import { FormItemLayout } from "../Form.js";
+import { FormItemInputProps } from "../FormItemInput.js";
+import { BaseFormItemProps, FeedbackIcons, FormItemProps, ValidateStatus } from "./index.js";
+import { ComponentBaseProps } from "../../config-provider/context.js";
+import { ReportMetaChange } from "../context.js";
+//#region src/form/FormItem/ItemHolder.d.ts
+type ItemHolderProps = FormItemProps & {
+  errors: any[];
+  warnings: any[];
+  meta: Meta;
+  fieldId?: string;
+  isRequired?: boolean;
+  onSubItemMetaChange: ReportMetaChange;
+};
+declare const ItemHolder: import("vue").DefineSetupFnComponent<ItemHolderProps, {}, {}, BaseFormItemProps & ComponentBaseProps & Omit<FormItemLabelProps, "requiredMark"> & FormItemInputProps & {
+  noStyle?: boolean;
+  id?: string;
+  hasFeedback?: boolean | {
+    icons: FeedbackIcons;
+  };
+  validateStatus?: ValidateStatus;
+  required?: boolean;
+  hidden?: boolean;
+  messageVariables?: Record<string, string>;
+  layout?: FormItemLayout;
+} & {
+  errors: any[];
+  warnings: any[];
+  meta: Meta;
+  fieldId?: string;
+  isRequired?: boolean;
+  onSubItemMetaChange: ReportMetaChange;
+} & {}, import("vue").PublicProps>;
+//#endregion
+export { ItemHolderProps, ItemHolder as default };