antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/form/FormItem/StatusProvider.js

@@ -0,0 +1,93 @@
+import { useFormContext, useFormItemInputContext, useFormItemInputContextProvider } from "../context.js";
+import { getStatus } from "../util.js";
+import { computed, createVNode, defineComponent } from "vue";
+import { clsx } from "@v-c/util";
+import { CheckCircleFilled, CloseCircleFilled, ExclamationCircleFilled, LoadingOutlined } from "@antdv-next/icons";
+
+//#region src/form/FormItem/StatusProvider.tsx
+const iconMap = {
+	success: CheckCircleFilled,
+	warning: ExclamationCircleFilled,
+	error: CloseCircleFilled,
+	validating: LoadingOutlined
+};
+const StatusProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const formContext = useFormContext();
+	const formItemContext = useFormItemInputContext();
+	useFormItemInputContextProvider(computed(() => {
+		const { errors, warnings, hasFeedback, validateStatus, prefixCls, meta, noStyle, name } = props;
+		const itemPrefixCls = `${prefixCls}-item`;
+		const { feedbackIcons } = formContext.value ?? {};
+		const mergedValidateStatus = getStatus(errors, warnings, meta, null, !!hasFeedback, validateStatus);
+		const { isFormItemInput: parentIsFormItemInput, status: parentStatus, hasFeedback: parentHasFeedback, feedbackIcon: parentFeedbackIcon, name: parentName } = formItemContext.value;
+		let feedbackIcon;
+		if (hasFeedback) {
+			const customIcons = hasFeedback !== true && hasFeedback.icons || feedbackIcons;
+			const customIconNode = mergedValidateStatus && customIcons?.({
+				status: mergedValidateStatus,
+				errors,
+				warnings
+			})?.[mergedValidateStatus];
+			const IconNode = mergedValidateStatus ? iconMap[mergedValidateStatus] : null;
+			feedbackIcon = customIconNode !== false && IconNode ? createVNode("span", { "class": clsx(`${itemPrefixCls}-feedback-icon`, `${itemPrefixCls}-feedback-icon-${mergedValidateStatus}`) }, [customIconNode || createVNode(IconNode, null, null)]) : null;
+		}
+		const context = {
+			status: mergedValidateStatus || "",
+			errors,
+			warnings,
+			hasFeedback: !!hasFeedback,
+			feedbackIcon,
+			isFormItemInput: true,
+			name
+		};
+		if (noStyle) {
+			context.status = (mergedValidateStatus ?? parentStatus) || "";
+			context.isFormItemInput = parentIsFormItemInput;
+			context.hasFeedback = !!(hasFeedback ?? parentHasFeedback);
+			context.feedbackIcon = hasFeedback !== void 0 ? context.feedbackIcon : parentFeedbackIcon;
+			context.name = name ?? parentName;
+		}
+		return context;
+	}));
+	return () => {
+		return slots?.default?.();
+	};
+}, {
+	props: {
+		validateStatus: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		meta: {
+			type: Object,
+			required: true
+		},
+		errors: {
+			type: Array,
+			required: true
+		},
+		warnings: {
+			type: Array,
+			required: true
+		},
+		hasFeedback: {
+			type: [Boolean, Object],
+			required: false
+		},
+		noStyle: {
+			type: Boolean,
+			required: false
+		},
+		name: { required: false }
+	},
+	name: "StatusProvider",
+	inheritAttrs: false
+});
+var StatusProvider_default = StatusProvider;
+
+//#endregion
+export { StatusProvider_default as default };

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

@@ -0,0 +1,60 @@
+import { Rule } from "../types.js";
+import { FormItemLayout } from "../Form.js";
+import { FormItemInputProps } from "../FormItemInput.js";
+import { FormItemLabelProps, LabelTooltipType } from "../FormItemLabel.js";
+import { ComponentBaseProps } from "../../config-provider/context.js";
+import * as vue245 from "vue";
+import { SlotsType } from "vue";
+
+//#region src/form/FormItem/index.d.ts
+declare const _ValidateStatuses: readonly ["success", "warning", "error", "validating", ""];
+type ValidateStatus = (typeof _ValidateStatuses)[number];
+type FeedbackIcons = (itemStatus: {
+  status: ValidateStatus;
+  errors?: any[];
+  warnings?: any[];
+}) => { [key in ValidateStatus]?: any };
+interface BaseFormItemProps {
+  name?: string;
+  rules?: Rule[];
+  trigger?: string;
+  validateTrigger?: string | string[] | false;
+  validateDebounce?: number;
+  validateFirst?: boolean | 'parallel';
+}
+type FormItemProps = BaseFormItemProps & ComponentBaseProps & Omit<FormItemLabelProps, 'requiredMark'> & FormItemInputProps & {
+  noStyle?: boolean;
+  id?: string;
+  hasFeedback?: boolean | {
+    icons: FeedbackIcons;
+  };
+  validateStatus?: ValidateStatus;
+  required?: boolean;
+  hidden?: boolean;
+  messageVariables?: Record<string, string>;
+  tooltip?: LabelTooltipType;
+  layout?: FormItemLayout;
+};
+interface FormItemEmits {
+  [key: string]: (...args: any[]) => void;
+}
+interface FormItemSlots {
+  default: () => any;
+}
+declare const InternalFormItem: vue245.DefineSetupFnComponent<FormItemProps, FormItemEmits, SlotsType<FormItemSlots>, BaseFormItemProps & ComponentBaseProps & Omit<FormItemLabelProps, "requiredMark"> & FormItemInputProps & {
+  noStyle?: boolean;
+  id?: string;
+  hasFeedback?: boolean | {
+    icons: FeedbackIcons;
+  };
+  validateStatus?: ValidateStatus;
+  required?: boolean;
+  hidden?: boolean;
+  messageVariables?: Record<string, string>;
+  tooltip?: LabelTooltipType;
+  layout?: FormItemLayout;
+} & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue245.PublicProps>;
+//#endregion
+export { FeedbackIcons, InternalFormItem, ValidateStatus };

package/dist/form/FormItem/index.js

@@ -0,0 +1,437 @@
+import { useComponentBaseConfig } from "../../config-provider/context.js";
+import { checkRenderNode } from "../../_util/vueNode.js";
+import useCSSVarCls_default from "../../config-provider/hooks/useCSSVarCls.js";
+import { useFormContext, useFormItemProvider, useNoStyleItemContext } from "../context.js";
+import { getFieldId, initialValueFormat, toArray } from "../util.js";
+import style_default from "../style/index.js";
+import { getNamePath, getValue, setValue } from "../utils/valueUtil.js";
+import { validateRules } from "../utils/validateUtil.js";
+import StatusProvider_default from "./StatusProvider.js";
+import ItemHolder_default from "./ItemHolder.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, onBeforeUnmount, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+
+//#region src/form/FormItem/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const NAME_SPLIT = "__SPLIT__";
+function genEmptyMeta() {
+	return {
+		errors: [],
+		warnings: [],
+		touched: false,
+		validating: false,
+		name: [],
+		validated: false
+	};
+}
+const InternalFormItem = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const formContext = useFormContext();
+	const mergedValidateTrigger = computed(() => {
+		const { validateTrigger } = props;
+		return validateTrigger !== void 0 ? validateTrigger : formContext.value?.validateTrigger ?? "change";
+	});
+	const { prefixCls } = useComponentBaseConfig("form", props);
+	const notifyParentMetaChange = useNoStyleItemContext();
+	const hasName = computed(() => !(props.name === void 0 || props.name === null));
+	const namePath = computed(() => hasName.value ? getNamePath(props.name) : []);
+	const fieldId = computed(() => getFieldId(namePath.value, formContext.value?.name));
+	const rootCls = useCSSVarCls_default(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const meta = shallowRef({
+		...genEmptyMeta(),
+		name: namePath.value
+	});
+	watch(namePath, (val) => {
+		meta.value = {
+			...meta.value,
+			name: val
+		};
+	});
+	const errors = shallowRef([]);
+	const warnings = shallowRef([]);
+	const validateDisabled = shallowRef(false);
+	const subFieldErrors = shallowRef({});
+	const initialValue = shallowRef(initialValueFormat(formContext.value?.getFieldValue?.(namePath.value)));
+	const mergedRules = computed(() => {
+		const collectedRules = [];
+		const formRules = formContext.value?.rules ? getValue(formContext.value.rules, namePath.value) : void 0;
+		if (formRules) collectedRules.push(...Array.isArray(formRules) ? formRules : [formRules]);
+		if (props.rules) collectedRules.push(...props.rules);
+		if (props.required !== void 0) collectedRules.push({
+			required: !!props.required,
+			trigger: mergedValidateTrigger.value || []
+		});
+		return collectedRules;
+	});
+	const isRequired = computed(() => mergedRules.value.some((rule) => rule?.required && !rule?.warningOnly));
+	const messageVariables = computed(() => {
+		let variables = {};
+		if (typeof props.label === "string") variables.label = props.label;
+		else if (props.name) variables.label = String(props.name);
+		if (props.messageVariables) variables = {
+			...variables,
+			...props.messageVariables
+		};
+		return variables;
+	});
+	const fieldValue = computed(() => {
+		if (!hasName.value) return void 0;
+		if (formContext.value?.getFieldValue) return formContext.value.getFieldValue(namePath.value);
+		return getValue(formContext.value?.model ?? {}, namePath.value);
+	});
+	const updateMeta = (state) => {
+		meta.value = {
+			...meta.value,
+			...state
+		};
+		if (props.noStyle && notifyParentMetaChange) notifyParentMetaChange(meta.value, meta.value.name);
+	};
+	const validateRulesInner = (options = {}) => {
+		if (!namePath.value.length) return Promise.resolve();
+		let filteredRules = mergedRules.value;
+		const { triggerName } = options;
+		if (triggerName) filteredRules = filteredRules.filter((rule) => {
+			const ruleTrigger = rule.trigger;
+			if (!ruleTrigger && !mergedValidateTrigger.value) return true;
+			return toArray(ruleTrigger || mergedValidateTrigger.value || []).includes(triggerName);
+		});
+		if (!filteredRules.length) {
+			errors.value = [];
+			warnings.value = [];
+			updateMeta({
+				errors: [],
+				warnings: [],
+				validating: false,
+				validated: true
+			});
+			formContext.value?.onValidate?.(namePath.value, true, null);
+			formContext.value?.triggerFieldsChange?.([namePath.value]);
+			return Promise.resolve();
+		}
+		updateMeta({
+			validating: true,
+			validated: true
+		});
+		return validateRules(namePath.value, fieldValue.value, filteredRules, {
+			validateMessages: formContext.value?.validateMessages,
+			...options
+		}, props.validateFirst ?? false, messageVariables.value).catch((e) => e).then((results = []) => {
+			const mergedErrors = [];
+			const mergedWarnings = [];
+			results.forEach(({ rule: { warningOnly }, errors: ruleErrors }) => {
+				if (warningOnly) mergedWarnings.push(...ruleErrors);
+				else mergedErrors.push(...ruleErrors);
+			});
+			errors.value = mergedErrors;
+			warnings.value = mergedWarnings;
+			updateMeta({
+				errors: mergedErrors,
+				warnings: mergedWarnings,
+				validating: false,
+				validated: true,
+				touched: meta.value.touched
+			});
+			formContext.value?.onValidate?.(namePath.value, mergedErrors.length === 0, mergedErrors.length ? mergedErrors : null);
+			formContext.value?.triggerFieldsChange?.([namePath.value]);
+			if (mergedErrors.length) return Promise.reject(results);
+			return results;
+		});
+	};
+	const triggerValidate = (triggerName) => {
+		const trigger = mergedValidateTrigger.value;
+		if (trigger === false) return;
+		if ((Array.isArray(trigger) ? trigger : [trigger]).includes(triggerName)) validateRulesInner({ triggerName });
+	};
+	const clearValidate = () => {
+		errors.value = [];
+		warnings.value = [];
+		updateMeta({
+			errors: [],
+			warnings: [],
+			validating: false
+		});
+	};
+	const resetField = () => {
+		validateDisabled.value = true;
+		errors.value = [];
+		warnings.value = [];
+		updateMeta({
+			errors: [],
+			warnings: [],
+			validating: false,
+			touched: false,
+			validated: false
+		});
+		if (hasName.value && formContext.value?.model) {
+			const newStore = setValue(formContext.value.model, namePath.value, initialValueFormat(initialValue.value));
+			Object.assign(formContext.value.model, newStore);
+		}
+	};
+	const onFieldBlur = () => {
+		updateMeta({ touched: true });
+		triggerValidate("blur");
+	};
+	const onFieldChange = () => {
+		updateMeta({ touched: true });
+		triggerValidate("change");
+	};
+	const onFieldFoucs = () => {
+		updateMeta({ touched: true });
+		triggerValidate("focus");
+	};
+	watch(fieldValue, (val, prev) => {
+		if (!hasName.value) return;
+		if (validateDisabled.value) {
+			validateDisabled.value = false;
+			return;
+		}
+		if (!meta.value.touched && val !== prev) updateMeta({ touched: true });
+		formContext.value?.triggerValuesChange?.(namePath.value, val);
+		triggerValidate("change");
+	}, { immediate: false });
+	const onSubItemMetaChange = (subMeta, uniqueKeys) => {
+		const clone = { ...subFieldErrors.value };
+		const mergedNameKey = [...subMeta.name.slice(0, -1), ...uniqueKeys].join(NAME_SPLIT);
+		if (subMeta.destroy) delete clone[mergedNameKey];
+		else clone[mergedNameKey] = subMeta;
+		subFieldErrors.value = clone;
+	};
+	const mergedErrorList = computed(() => {
+		const errorList = [...errors.value];
+		const warningList = [...warnings.value];
+		Object.values(subFieldErrors.value).forEach((subFieldError) => {
+			errorList.push(...subFieldError.errors || []);
+			warningList.push(...subFieldError.warnings || []);
+		});
+		return {
+			errors: errorList,
+			warnings: warningList
+		};
+	});
+	const rootClassName = computed(() => clsx(cssVarCls.value, rootCls.value, hashId.value, props.rootClass));
+	const eventKey = `form-item-${fieldId.value || namePath.value.join("-") || Math.random().toString(36).slice(2)}`;
+	watch(hasName, (val) => {
+		if (val && formContext.value?.addField) formContext.value.addField(eventKey, {
+			onFieldBlur,
+			namePath: () => namePath.value,
+			getValue: () => fieldValue.value,
+			getMeta: () => meta.value,
+			rules: () => mergedRules.value,
+			validateRules: (options) => validateRulesInner(options),
+			resetField,
+			clearValidate,
+			setFieldState: (state) => {
+				if (state.errors) errors.value = state.errors;
+				if (state.warnings) warnings.value = state.warnings;
+				updateMeta({
+					...meta.value,
+					...state,
+					errors: state.errors ?? meta.value.errors,
+					warnings: state.warnings ?? meta.value.warnings
+				});
+			}
+		});
+		else formContext.value?.removeField?.(eventKey);
+	}, { immediate: true });
+	onBeforeUnmount(() => {
+		formContext.value?.removeField?.(eventKey);
+	});
+	useFormItemProvider({
+		fieldId,
+		triggerBlur: onFieldBlur,
+		triggerChange: onFieldChange,
+		clearValidate,
+		triggerFocus: onFieldFoucs
+	});
+	return () => {
+		return renderLayout(checkRenderNode(filterEmpty(slots.default?.() ?? [])), fieldId.value, isRequired.value);
+	};
+	function renderLayout(baseChildren, currentFieldId, isRequiredMark) {
+		if (props.noStyle && !props.hidden) return createVNode(StatusProvider_default, {
+			"prefixCls": prefixCls.value,
+			"hasFeedback": props.hasFeedback,
+			"validateStatus": props.validateStatus,
+			"meta": meta.value,
+			"errors": mergedErrorList.value.errors,
+			"warnings": mergedErrorList.value.warnings,
+			"noStyle": true,
+			"name": props.name
+		}, _isSlot(baseChildren) ? baseChildren : { default: () => [baseChildren] });
+		return createVNode(ItemHolder_default, mergeProps(props, attrs, {
+			"rootClass": rootClassName.value,
+			"prefixCls": prefixCls.value,
+			"fieldId": currentFieldId,
+			"isRequired": isRequiredMark,
+			"errors": mergedErrorList.value.errors,
+			"warnings": mergedErrorList.value.warnings,
+			"meta": meta.value,
+			"onSubItemMetaChange": onSubItemMetaChange,
+			"layout": props.layout,
+			"name": props.name
+		}), { default: () => [createVNode(StatusProvider_default, {
+			"prefixCls": prefixCls.value,
+			"meta": meta.value,
+			"errors": mergedErrorList.value.errors,
+			"warnings": mergedErrorList.value.warnings,
+			"hasFeedback": props.hasFeedback,
+			"validateStatus": props.validateStatus,
+			"name": props.name
+		}, _isSlot(baseChildren) ? baseChildren : { default: () => [baseChildren] })] });
+	}
+}, {
+	props: {
+		name: {
+			type: String,
+			required: false
+		},
+		rules: {
+			type: Array,
+			required: false
+		},
+		trigger: {
+			type: String,
+			required: false
+		},
+		validateTrigger: {
+			type: [
+				String,
+				Array,
+				Boolean
+			],
+			required: false
+		},
+		validateDebounce: {
+			type: Number,
+			required: false
+		},
+		validateFirst: {
+			type: [Boolean, String],
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		colon: {
+			type: Boolean,
+			required: false
+		},
+		htmlFor: {
+			type: String,
+			required: false
+		},
+		label: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		labelAlign: {
+			type: String,
+			required: false
+		},
+		labelCol: {
+			type: Object,
+			required: false
+		},
+		tooltip: {
+			type: [
+				Object,
+				Function,
+				Boolean,
+				String,
+				Number,
+				null
+			],
+			required: false
+		},
+		vertical: {
+			type: Boolean,
+			required: false
+		},
+		wrapperCol: {
+			type: Object,
+			required: false
+		},
+		extra: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		help: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		fieldId: {
+			type: String,
+			required: false
+		},
+		noStyle: {
+			type: Boolean,
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		hasFeedback: {
+			type: [Boolean, Object],
+			required: false
+		},
+		validateStatus: {
+			type: String,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		hidden: {
+			type: Boolean,
+			required: false
+		},
+		messageVariables: {
+			type: Object,
+			required: false
+		},
+		layout: {
+			type: String,
+			required: false
+		}
+	},
+	name: "AFormItem",
+	inheritAttrs: false
+});
+var FormItem_default = InternalFormItem;
+
+//#endregion
+export { FormItem_default as default };

package/dist/form/FormItemInput.d.ts

@@ -0,0 +1,19 @@
+import { VueNode } from "../_util/type.js";
+import { ColProps } from "../grid/col.js";
+import "../grid/index.js";
+import { ValidateStatus } from "./FormItem/index.js";
+import "vue";
+
+//#region src/form/FormItemInput.d.ts
+
+interface FormItemInputProps {
+  labelCol?: ColProps;
+  wrapperCol?: ColProps;
+  extra?: VueNode;
+  status?: ValidateStatus;
+  help?: VueNode;
+  fieldId?: string;
+  label?: VueNode;
+}
+//#endregion
+export { FormItemInputProps };