antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/form/style/index.js

@@ -0,0 +1,309 @@
+import { resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import collapse_default from "../../style/motion/collapse.js";
+import { zoomIn } from "../../style/motion/zoom.js";
+import "../../style/motion/index.js";
+import explain_default from "./explain.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/form/style/index.ts
+function resetForm(token) {
+	return {
+		"legend": {
+			display: "block",
+			width: "100%",
+			marginBottom: token.marginLG,
+			padding: 0,
+			color: token.colorTextDescription,
+			fontSize: token.fontSizeLG,
+			lineHeight: "inherit",
+			border: 0,
+			borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`
+		},
+		"input[type=\"search\"]": { boxSizing: "border-box" },
+		"input[type=\"radio\"], input[type=\"checkbox\"]": { lineHeight: "normal" },
+		"input[type=\"file\"]": { display: "block" },
+		"input[type=\"range\"]": {
+			display: "block",
+			width: "100%"
+		},
+		"select[multiple], select[size]": { height: "auto" },
+		[`input[type='file']:focus,
+  input[type='radio']:focus,
+  input[type='checkbox']:focus`]: {
+			outline: 0,
+			boxShadow: `0 0 0 ${unit(token.controlOutlineWidth)} ${token.controlOutline}`
+		},
+		"output": {
+			display: "block",
+			paddingTop: 15,
+			color: token.colorText,
+			fontSize: token.fontSize,
+			lineHeight: token.lineHeight
+		}
+	};
+}
+function genFormSize(token, height) {
+	const { formItemCls } = token;
+	return { [formItemCls]: {
+		[`${formItemCls}-label > label`]: { height },
+		[`${formItemCls}-control-input`]: { minHeight: height }
+	} };
+}
+const genFormStyle = (token) => {
+	const { componentCls } = token;
+	return { [token.componentCls]: {
+		...resetComponent(token),
+		...resetForm(token),
+		[`${componentCls}-text`]: {
+			display: "inline-block",
+			paddingInlineEnd: token.paddingSM
+		},
+		"&-small": { ...genFormSize(token, token.controlHeightSM) },
+		"&-large": { ...genFormSize(token, token.controlHeightLG) }
+	} };
+};
+const genFormItemStyle = (token) => {
+	const { formItemCls, iconCls, rootPrefixCls, antCls, labelRequiredMarkColor, labelColor, labelFontSize, labelHeight, labelColonMarginInlineStart, labelColonMarginInlineEnd, itemMarginBottom } = token;
+	return { [formItemCls]: {
+		...resetComponent(token),
+		"marginBottom": itemMarginBottom,
+		"verticalAlign": "top",
+		"&-with-help": { transition: "none" },
+		[`&-hidden,
+        &-hidden${antCls}-row`]: { display: "none" },
+		"&-has-warning": { [`${formItemCls}-split`]: { color: token.colorError } },
+		"&-has-error": { [`${formItemCls}-split`]: { color: token.colorWarning } },
+		[`${formItemCls}-label`]: {
+			"flexGrow": 0,
+			"overflow": "hidden",
+			"whiteSpace": "nowrap",
+			"textAlign": "end",
+			"verticalAlign": "middle",
+			"&-left": { textAlign: "start" },
+			"&-wrap": {
+				"overflow": "unset",
+				"lineHeight": token.lineHeight,
+				"whiteSpace": "unset",
+				"> label": {
+					verticalAlign: "middle",
+					textWrap: "balance"
+				}
+			},
+			"> label": {
+				"position": "relative",
+				"display": "inline-flex",
+				"alignItems": "center",
+				"maxWidth": "100%",
+				"height": labelHeight,
+				"color": labelColor,
+				"fontSize": labelFontSize,
+				[`> ${iconCls}`]: {
+					fontSize: token.fontSize,
+					verticalAlign: "top"
+				},
+				[`&${formItemCls}-required`]: {
+					"&::before": {
+						display: "inline-block",
+						marginInlineEnd: token.marginXXS,
+						color: labelRequiredMarkColor,
+						fontSize: token.fontSize,
+						fontFamily: "SimSun, sans-serif",
+						lineHeight: 1,
+						content: "\"*\""
+					},
+					[`&${formItemCls}-required-mark-hidden, &${formItemCls}-required-mark-optional`]: { "&::before": { display: "none" } }
+				},
+				[`${formItemCls}-optional`]: {
+					display: "inline-block",
+					marginInlineStart: token.marginXXS,
+					color: token.colorTextDescription,
+					[`&${formItemCls}-required-mark-hidden`]: { display: "none" }
+				},
+				[`${formItemCls}-tooltip`]: {
+					color: token.colorTextDescription,
+					cursor: "help",
+					writingMode: "horizontal-tb",
+					marginInlineStart: token.marginXXS
+				},
+				"&::after": {
+					content: "\":\"",
+					position: "relative",
+					marginBlock: 0,
+					marginInlineStart: labelColonMarginInlineStart,
+					marginInlineEnd: labelColonMarginInlineEnd
+				},
+				[`&${formItemCls}-no-colon::after`]: { content: "\"\\a0\"" }
+			}
+		},
+		[`${formItemCls}-control`]: {
+			["--ant-display"]: "flex",
+			"flexDirection": "column",
+			"flexGrow": 1,
+			[`&:first-child:not([class^="'${rootPrefixCls}-col-'"]):not([class*="' ${rootPrefixCls}-col-'"])`]: { width: "100%" },
+			"&-input": {
+				"position": "relative",
+				"display": "flex",
+				"alignItems": "center",
+				"minHeight": token.controlHeight,
+				"&-content": {
+					flex: "auto",
+					maxWidth: "100%",
+					[`&:has(> ${antCls}-switch:only-child, > ${antCls}-rate:only-child)`]: {
+						display: "flex",
+						alignItems: "center"
+					}
+				}
+			}
+		},
+		[formItemCls]: {
+			"&-additional": {
+				display: "flex",
+				flexDirection: "column"
+			},
+			"&-explain, &-extra": {
+				clear: "both",
+				color: token.colorTextDescription,
+				fontSize: token.fontSize,
+				lineHeight: token.lineHeight
+			},
+			"&-explain-connected": { width: "100%" },
+			"&-extra": {
+				minHeight: token.controlHeightSM,
+				transition: `color ${token.motionDurationMid} ${token.motionEaseOut}`
+			},
+			"&-explain": {
+				"&-error": { color: token.colorError },
+				"&-warning": { color: token.colorWarning }
+			}
+		},
+		[`&-with-help ${formItemCls}-explain`]: {
+			height: "auto",
+			opacity: 1
+		},
+		[`${formItemCls}-feedback-icon`]: {
+			"fontSize": token.fontSize,
+			"textAlign": "center",
+			"visibility": "visible",
+			"animationName": zoomIn,
+			"animationDuration": token.motionDurationMid,
+			"animationTimingFunction": token.motionEaseOutBack,
+			"pointerEvents": "none",
+			"&-success": { color: token.colorSuccess },
+			"&-error": { color: token.colorError },
+			"&-warning": { color: token.colorWarning },
+			"&-validating": { color: token.colorPrimary }
+		}
+	} };
+};
+function makeVerticalLayoutLabel(token) {
+	return {
+		"padding": token.verticalLabelPadding,
+		"margin": token.verticalLabelMargin,
+		"whiteSpace": "initial",
+		"textAlign": "start",
+		"> label": {
+			"margin": 0,
+			"&::after": { visibility: "hidden" }
+		}
+	};
+}
+function genHorizontalStyle(token) {
+	const { antCls, formItemCls } = token;
+	return { [`${formItemCls}-horizontal`]: {
+		[`${formItemCls}-label`]: { flexGrow: 0 },
+		[`${formItemCls}-control`]: {
+			flex: "1 1 0",
+			minWidth: 0
+		},
+		[`${formItemCls}-label[class$='-24'], ${formItemCls}-label[class*='-24 ']`]: { [`& + ${formItemCls}-control`]: { minWidth: "unset" } },
+		[`${antCls}-col-24${formItemCls}-label,
+        ${antCls}-col-xl-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
+	} };
+}
+const genInlineStyle = (token) => {
+	const { componentCls, formItemCls, inlineItemMarginBottom } = token;
+	return { [`${componentCls}-inline`]: {
+		display: "flex",
+		flexWrap: "wrap",
+		[`${formItemCls}-inline`]: {
+			"flex": "none",
+			"marginInlineEnd": token.margin,
+			"marginBottom": inlineItemMarginBottom,
+			"&-row": { flexWrap: "nowrap" },
+			[`> ${formItemCls}-label,
+        > ${formItemCls}-control`]: {
+				display: "inline-block",
+				verticalAlign: "top"
+			},
+			[`> ${formItemCls}-label`]: { flex: "none" },
+			[`${componentCls}-text`]: { display: "inline-block" },
+			[`${formItemCls}-has-feedback`]: { display: "inline-block" }
+		}
+	} };
+};
+function makeVerticalLayout(token) {
+	const { componentCls, formItemCls, rootPrefixCls } = token;
+	return {
+		[`${formItemCls} ${formItemCls}-label`]: makeVerticalLayoutLabel(token),
+		[`${componentCls}:not(${componentCls}-inline)`]: { [formItemCls]: {
+			flexWrap: "wrap",
+			[`${formItemCls}-label, ${formItemCls}-control`]: { [`&:not([class*=" ${rootPrefixCls}-col-xs"])`]: {
+				flex: "0 0 100%",
+				maxWidth: "100%"
+			} }
+		} }
+	};
+}
+const genVerticalStyle = (token) => {
+	const { componentCls, formItemCls, antCls } = token;
+	return {
+		[`${formItemCls}-vertical`]: {
+			[`${formItemCls}-row`]: { flexDirection: "column" },
+			[`${formItemCls}-label > label`]: { height: "auto" },
+			[`${formItemCls}-control`]: { width: "100%" },
+			[`${formItemCls}-label,
+        ${antCls}-col-24${formItemCls}-label,
+        ${antCls}-col-xl-24${formItemCls}-label`]: makeVerticalLayoutLabel(token)
+		},
+		[`@media (max-width: ${unit(token.screenXSMax)})`]: [makeVerticalLayout(token), { [componentCls]: { [`${formItemCls}:not(${formItemCls}-horizontal)`]: { [`${antCls}-col-xs-24${formItemCls}-label`]: makeVerticalLayoutLabel(token) } } }],
+		[`@media (max-width: ${unit(token.screenSMMax)})`]: { [componentCls]: { [`${formItemCls}:not(${formItemCls}-horizontal)`]: { [`${antCls}-col-sm-24${formItemCls}-label`]: makeVerticalLayoutLabel(token) } } },
+		[`@media (max-width: ${unit(token.screenMDMax)})`]: { [componentCls]: { [`${formItemCls}:not(${formItemCls}-horizontal)`]: { [`${antCls}-col-md-24${formItemCls}-label`]: makeVerticalLayoutLabel(token) } } },
+		[`@media (max-width: ${unit(token.screenLGMax)})`]: { [componentCls]: { [`${formItemCls}:not(${formItemCls}-horizontal)`]: { [`${antCls}-col-lg-24${formItemCls}-label`]: makeVerticalLayoutLabel(token) } } }
+	};
+};
+const prepareComponentToken = (token) => ({
+	labelRequiredMarkColor: token.colorError,
+	labelColor: token.colorTextHeading,
+	labelFontSize: token.fontSize,
+	labelHeight: token.controlHeight,
+	labelColonMarginInlineStart: token.marginXXS / 2,
+	labelColonMarginInlineEnd: token.marginXS,
+	itemMarginBottom: token.marginLG,
+	verticalLabelPadding: `0 0 ${token.paddingXS}px`,
+	verticalLabelMargin: 0,
+	inlineItemMarginBottom: 0
+});
+const prepareToken = (token, rootPrefixCls) => {
+	return mergeToken(token, {
+		formItemCls: `${token.componentCls}-item`,
+		rootPrefixCls
+	});
+};
+var style_default = genStyleHooks("Form", (token, { rootPrefixCls }) => {
+	const formToken = prepareToken(token, rootPrefixCls);
+	return [
+		genFormStyle(formToken),
+		genFormItemStyle(formToken),
+		explain_default(formToken),
+		genHorizontalStyle(formToken),
+		genInlineStyle(formToken),
+		genVerticalStyle(formToken),
+		collapse_default(formToken),
+		zoomIn
+	];
+}, prepareComponentToken, { order: -1e3 });
+
+//#endregion
+export { style_default as default, prepareToken };

package/dist/form/types.d.ts

@@ -0,0 +1,162 @@
+import { DeepNamePath } from "./namePathType.js";
+import { Component } from "vue";
+
+//#region src/form/types.d.ts
+type InternalNamePath = (string | number)[];
+type NamePath<T = any> = DeepNamePath<T>;
+type StoreValue = any;
+interface Meta {
+  touched: boolean;
+  validating: boolean;
+  errors: string[];
+  warnings: string[];
+  name: InternalNamePath;
+  validated: boolean;
+}
+interface InternalFieldData extends Meta {
+  value: StoreValue;
+}
+/**
+ * Used by `setFields` config
+ */
+interface FieldData<Values = any> extends Partial<Omit<InternalFieldData, 'name'>> {
+  name: NamePath<Values>;
+}
+type RuleType = 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email';
+type Validator = (rule: RuleObject, value: StoreValue, callback: (error?: string) => void) => Promise<void | any> | void;
+type RuleRender = (form: FormInstance) => RuleObject;
+interface ValidatorRule {
+  warningOnly?: boolean;
+  message?: string | Component;
+  validator: Validator;
+}
+interface BaseRule {
+  warningOnly?: boolean;
+  enum?: StoreValue[];
+  len?: number;
+  max?: number;
+  message?: string | Component;
+  min?: number;
+  pattern?: RegExp;
+  required?: boolean;
+  transform?: (value: StoreValue) => StoreValue;
+  type?: RuleType;
+  whitespace?: boolean;
+  /** Customize rule level `validateTrigger`. Must be subset of Field `validateTrigger` */
+  validateTrigger?: string | string[];
+}
+type AggregationRule = BaseRule & Partial<ValidatorRule>;
+interface ArrayRule extends Omit<AggregationRule, 'type'> {
+  type: 'array';
+  defaultField?: RuleObject;
+}
+type RuleObject = AggregationRule | ArrayRule;
+type Rule = RuleObject | RuleRender;
+interface ValidateErrorEntity<Values = any> {
+  message: string;
+  values: Values;
+  errorFields: {
+    name: InternalNamePath;
+    errors: string[];
+  }[];
+  outOfDate: boolean;
+}
+interface FieldError {
+  name: InternalNamePath;
+  errors: string[];
+  warnings: string[];
+}
+interface ValidateOptions {
+  /**
+   * Validate only and not trigger UI and Field status update
+   */
+  validateOnly?: boolean;
+  /**
+   * Recursive validate. It will validate all the name path that contains the provided one.
+   * e.g. [['a']] will validate ['a'] , ['a', 'b'] and ['a', 1].
+   */
+  recursive?: boolean;
+  /** Validate when a field is dirty (validated or touched) */
+  dirty?: boolean;
+}
+interface ValidateFields<Values = any> {
+  (opt?: ValidateOptions): Promise<Values>;
+  (nameList?: NamePath[], opt?: ValidateOptions): Promise<Values>;
+}
+/** Only return partial when type is not any */
+type RecursivePartial<T> = NonNullable<T> extends object ? { [P in keyof T]?: NonNullable<T[P]> extends (infer U)[] ? RecursivePartial<U>[] : NonNullable<T[P]> extends object ? RecursivePartial<T[P]> : T[P] } : T;
+type FilterFunc = (meta: Meta | null) => boolean;
+interface GetFieldsValueConfig {
+  /**
+   * @deprecated `strict` is deprecated and not working anymore
+   */
+  strict?: boolean;
+  filter?: FilterFunc;
+}
+interface FormInstance<Values = any> {
+  getFieldValue: (name: NamePath<Values>) => StoreValue;
+  getFieldsValue: (() => Values) & ((nameList: NamePath<Values>[] | true, filterFunc?: FilterFunc) => any) & ((config: GetFieldsValueConfig) => any);
+  getFieldError: (name: NamePath<Values>) => string[];
+  getFieldsError: (nameList?: NamePath<Values>[]) => FieldError[];
+  getFieldWarning: (name: NamePath<Values>) => string[];
+  isFieldsTouched: ((nameList?: NamePath<Values>[], allFieldsTouched?: boolean) => boolean) & ((allFieldsTouched?: boolean) => boolean);
+  isFieldTouched: (name: NamePath<Values>) => boolean;
+  isFieldValidating: (name: NamePath<Values>) => boolean;
+  isFieldsValidating: (nameList?: NamePath<Values>[]) => boolean;
+  resetFields: (fields?: NamePath<Values>[]) => void;
+  setFields: (fields: FieldData<Values>[]) => void;
+  setFieldValue: (name: NamePath<Values>, value: any) => void;
+  setFieldsValue: (values: RecursivePartial<Values>) => void;
+  validateFields: ValidateFields<Values>;
+  submit: () => void;
+}
+type ValidateMessage = string | (() => string);
+interface ValidateMessages {
+  default?: ValidateMessage;
+  required?: ValidateMessage;
+  enum?: ValidateMessage;
+  whitespace?: ValidateMessage;
+  date?: {
+    format?: ValidateMessage;
+    parse?: ValidateMessage;
+    invalid?: ValidateMessage;
+  };
+  types?: {
+    string?: ValidateMessage;
+    method?: ValidateMessage;
+    array?: ValidateMessage;
+    object?: ValidateMessage;
+    number?: ValidateMessage;
+    date?: ValidateMessage;
+    boolean?: ValidateMessage;
+    integer?: ValidateMessage;
+    float?: ValidateMessage;
+    regexp?: ValidateMessage;
+    email?: ValidateMessage;
+    url?: ValidateMessage;
+    hex?: ValidateMessage;
+  };
+  string?: {
+    len?: ValidateMessage;
+    min?: ValidateMessage;
+    max?: ValidateMessage;
+    range?: ValidateMessage;
+  };
+  number?: {
+    len?: ValidateMessage;
+    min?: ValidateMessage;
+    max?: ValidateMessage;
+    range?: ValidateMessage;
+  };
+  array?: {
+    len?: ValidateMessage;
+    min?: ValidateMessage;
+    max?: ValidateMessage;
+    range?: ValidateMessage;
+  };
+  pattern?: {
+    mismatch?: ValidateMessage;
+  };
+}
+//#endregion
+export { FieldData, InternalNamePath, NamePath, Rule, ValidateErrorEntity, ValidateMessages, ValidateOptions };

package/dist/form/util.js

@@ -0,0 +1,35 @@
+import { cloneDeep } from "es-toolkit";
+
+//#region src/form/util.ts
+const formItemNameBlackList = ["parentNode"];
+const defaultItemNamePrefixCls = "form_item";
+function toArray(candidate) {
+	if (candidate === void 0 || candidate === false) return [];
+	return Array.isArray(candidate) ? candidate : [candidate];
+}
+function getFieldId(namePath, formName) {
+	if (!namePath.length) return;
+	const mergedId = namePath.join("_");
+	if (formName) return `${formName}_${mergedId}`;
+	return formItemNameBlackList.includes(mergedId) ? `${defaultItemNamePrefixCls}_${mergedId}` : mergedId;
+}
+/**
+* Get merged status by meta or passed `validateStatus`.
+*/
+function getStatus(errors, warnings, meta, defaultValidateStatus, hasFeedback, validateStatus) {
+	let status = defaultValidateStatus;
+	if (validateStatus !== void 0) status = validateStatus;
+	else if (meta.validating) status = "validating";
+	else if (errors.length) status = "error";
+	else if (warnings.length) status = "warning";
+	else if (meta.touched || hasFeedback && meta.validated) status = "success";
+	return status;
+}
+function initialValueFormat(value) {
+	if (value === void 0 || value === null || value === "") return value;
+	if (Array.isArray(value) || typeof value === "object") return cloneDeep(value);
+	return value;
+}
+
+//#endregion
+export { getFieldId, getStatus, initialValueFormat, toArray };

package/dist/form/utils/asyncUtil.js

@@ -0,0 +1,24 @@
+//#region src/form/utils/asyncUtil.ts
+function allPromiseFinish(promiseList) {
+	let hasError = false;
+	let count = promiseList.length;
+	const results = [];
+	if (!promiseList.length) return Promise.resolve([]);
+	return new Promise((resolve, reject) => {
+		promiseList.forEach((promise, index) => {
+			promise.catch((e) => {
+				hasError = true;
+				return e;
+			}).then((result) => {
+				count -= 1;
+				results[index] = result;
+				if (count > 0) return;
+				if (hasError) reject(results);
+				resolve(results);
+			});
+		});
+	});
+}
+
+//#endregion
+export { allPromiseFinish };

package/dist/form/utils/messages.js

@@ -0,0 +1,50 @@
+//#region src/form/utils/messages.ts
+const typeTemplate = "'${name}' is not a valid ${type}";
+const defaultValidateMessages = {
+	default: "Validation error on field '${name}'",
+	required: "'${name}' is required",
+	enum: "'${name}' must be one of [${enum}]",
+	whitespace: "'${name}' cannot be empty",
+	date: {
+		format: "'${name}' is invalid for format date",
+		parse: "'${name}' could not be parsed as date",
+		invalid: "'${name}' is invalid date"
+	},
+	types: {
+		string: typeTemplate,
+		method: typeTemplate,
+		array: typeTemplate,
+		object: typeTemplate,
+		number: typeTemplate,
+		date: typeTemplate,
+		boolean: typeTemplate,
+		integer: typeTemplate,
+		float: typeTemplate,
+		regexp: typeTemplate,
+		email: typeTemplate,
+		url: typeTemplate,
+		hex: typeTemplate
+	},
+	string: {
+		len: "'${name}' must be exactly ${len} characters",
+		min: "'${name}' must be at least ${min} characters",
+		max: "'${name}' cannot be longer than ${max} characters",
+		range: "'${name}' must be between ${min} and ${max} characters"
+	},
+	number: {
+		len: "'${name}' must equal ${len}",
+		min: "'${name}' cannot be less than ${min}",
+		max: "'${name}' cannot be greater than ${max}",
+		range: "'${name}' must be between ${min} and ${max}"
+	},
+	array: {
+		len: "'${name}' must be exactly ${len} in length",
+		min: "'${name}' cannot be less than ${min} in length",
+		max: "'${name}' cannot be greater than ${max} in length",
+		range: "'${name}' must be between ${min} and ${max} in length"
+	},
+	pattern: { mismatch: "'${name}' does not match pattern ${pattern}" }
+};
+
+//#endregion
+export { defaultValidateMessages };

package/dist/form/utils/typeUtil.js

@@ -0,0 +1,8 @@
+//#region src/form/utils/typeUtil.ts
+function toArray(value) {
+	if (value === void 0 || value === null) return [];
+	return Array.isArray(value) ? value : [value];
+}
+
+//#endregion
+export { toArray };