antdv-next 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/form/types.d.mts

@@ -0,0 +1,162 @@
+import { DeepNamePath } from "./namePathType.mjs";
+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/utils/validateUtil.mjs

@@ -0,0 +1,149 @@
+import { defaultValidateMessages } from "./messages.mjs";
+import { createVNode, isVNode } from "vue";
+import { warning } from "@v-c/util/dist/warning";
+import { merge } from "@v-c/util/dist/utils/set";
+import RawAsyncValidator from "@v-c/async-validator";
+
+//#region src/form/utils/validateUtil.ts
+const AsyncValidator = RawAsyncValidator;
+/**
+* Replace with template.
+*   `I'm ${name}` + { name: 'bamboo' } = I'm bamboo
+*/
+function replaceMessage(template, kv) {
+	return template.replace(/\\?\$\{\w+\}/g, (str) => {
+		if (str.startsWith("\\")) return str.slice(1);
+		return kv[str.slice(2, -1)];
+	});
+}
+const CODE_LOGIC_ERROR = "CODE_LOGIC_ERROR";
+async function validateRule(name, value, rule, options, messageVariables) {
+	const cloneRule = { ...rule };
+	delete cloneRule.ruleIndex;
+	AsyncValidator.warning = () => void 0;
+	if (cloneRule.validator) {
+		const originValidator = cloneRule.validator;
+		cloneRule.validator = (...args) => {
+			try {
+				return originValidator(...args);
+			} catch (error) {
+				console.error(error);
+				return Promise.reject(CODE_LOGIC_ERROR);
+			}
+		};
+	}
+	let subRuleField = null;
+	if (cloneRule && cloneRule.type === "array" && cloneRule.defaultField) {
+		subRuleField = cloneRule.defaultField;
+		delete cloneRule.defaultField;
+	}
+	const validator = new AsyncValidator({ [name]: [cloneRule] });
+	const messages = merge(defaultValidateMessages, options.validateMessages);
+	validator.messages(messages);
+	let result = [];
+	try {
+		await Promise.resolve(validator.validate({ [name]: value }, { ...options }));
+	} catch (errObj) {
+		if (errObj.errors) result = errObj.errors.map(({ message }, index) => {
+			const mergedMessage = message === CODE_LOGIC_ERROR ? messages.default : message;
+			return isVNode(mergedMessage) ? createVNode(mergedMessage, { key: `error_${index}` }) : mergedMessage;
+		});
+	}
+	if (!result.length && subRuleField && Array.isArray(value) && value.length > 0) return (await Promise.all(value.map((subValue, i) => validateRule(`${name}.${i}`, subValue, subRuleField, options, messageVariables)))).reduce((prev, errors) => [...prev, ...errors], []);
+	const kv = {
+		...rule,
+		name,
+		enum: (rule.enum || []).join(", "),
+		...messageVariables
+	};
+	return result.map((error) => {
+		if (typeof error === "string") return replaceMessage(error, kv);
+		return error;
+	});
+}
+/**
+* We use `async-validator` to validate the value.
+* But only check one value in a time to avoid namePath validate issue.
+*/
+function validateRules(namePath, value, rules, options, validateFirst, messageVariables) {
+	const name = namePath.join(".");
+	const filledRules = rules.map((currentRule, ruleIndex) => {
+		const originValidatorFunc = currentRule.validator;
+		const cloneRule = {
+			...currentRule,
+			ruleIndex
+		};
+		if (originValidatorFunc) cloneRule.validator = (rule, val, callback) => {
+			let hasPromise = false;
+			const wrappedCallback = (...args) => {
+				Promise.resolve().then(() => {
+					warning(!hasPromise, "Your validator function has already return a promise. `callback` will be ignored.");
+					if (!hasPromise) callback(...args);
+				});
+			};
+			const promise = originValidatorFunc(rule, val, wrappedCallback);
+			hasPromise = promise && typeof promise.then === "function" && typeof promise.catch === "function";
+			/**
+			* 1. Use promise as the first priority.
+			* 2. If promise not exist, use callback with warning instead
+			*/
+			warning(hasPromise, "`callback` is deprecated. Please return a promise instead.");
+			if (hasPromise) promise.then(() => {
+				callback();
+			}).catch((err) => {
+				callback(err || " ");
+			});
+		};
+		return cloneRule;
+	}).sort(({ warningOnly: w1, ruleIndex: i1 }, { warningOnly: w2, ruleIndex: i2 }) => {
+		if (!!w1 === !!w2) return i1 - i2;
+		if (w1) return 1;
+		return -1;
+	});
+	let summaryPromise;
+	if (validateFirst === true) summaryPromise = new Promise(async (resolve, reject) => {
+		for (let i = 0; i < filledRules.length; i += 1) {
+			const rule = filledRules[i];
+			const errors = await validateRule(name, value, rule, options, messageVariables);
+			if (errors.length) {
+				reject([{
+					errors,
+					rule
+				}]);
+				return;
+			}
+		}
+		resolve([]);
+	});
+	else {
+		const rulePromises = filledRules.map((rule) => validateRule(name, value, rule, options, messageVariables).then((errors) => ({
+			errors,
+			rule
+		})));
+		summaryPromise = (validateFirst ? finishOnFirstFailed(rulePromises) : finishOnAllFailed(rulePromises)).then((errors) => {
+			return Promise.reject(errors);
+		});
+	}
+	summaryPromise.catch((e) => e);
+	return summaryPromise;
+}
+async function finishOnAllFailed(rulePromises) {
+	return Promise.all(rulePromises).then((errorsList) => {
+		return [].concat(...errorsList);
+	});
+}
+async function finishOnFirstFailed(rulePromises) {
+	let count = 0;
+	return new Promise((resolve) => {
+		rulePromises.forEach((promise) => {
+			promise.then((ruleError) => {
+				if (ruleError.errors.length) resolve([ruleError]);
+				count += 1;
+				if (count === rulePromises.length) resolve([]);
+			});
+		});
+	});
+}
+
+//#endregion
+export { validateRules };

package/dist/form/utils/valueUtil.mjs

@@ -0,0 +1,53 @@
+import { toArray } from "./typeUtil.mjs";
+import getValue from "@v-c/util/dist/utils/get";
+import setValue from "@v-c/util/dist/utils/set";
+
+//#region src/form/utils/valueUtil.ts
+/**
+* Convert name to internal supported format.
+* Support formats:
+* 'a' => ['a']
+* 'a.b.c' => ['a', 'b', 'c']
+* 123 => [123]
+* ['a', 123] => ['a', 123]
+* ['a', 'b', 'c'] => ['a', 'b', 'c']
+*/
+function getNamePath(path) {
+	if (typeof path === "string") return path.split(".");
+	return toArray(path);
+}
+/**
+* Create a new store object that contains only the values referenced by
+* the provided list of name paths.
+*/
+function cloneByNamePathList(store, namePathList) {
+	let newStore = {};
+	namePathList.forEach((namePath) => {
+		const value = getValue(store, namePath);
+		newStore = setValue(newStore, namePath, value);
+	});
+	return newStore;
+}
+/**
+* Check if `namePathList` includes `namePath`.
+* @param namePathList A list of `InternalNamePath[]`
+* @param namePath Compare `InternalNamePath`
+* @param partialMatch True will make `[a, b]` match `[a, b, c]`
+*/
+function containsNamePath(namePathList, namePath, partialMatch = false) {
+	return namePathList && namePathList.some((path) => matchNamePath(namePath, path, partialMatch));
+}
+/**
+* Check if `namePath` is super set or equal of `subNamePath`.
+* @param namePath A list of `InternalNamePath[]`
+* @param subNamePath Compare `InternalNamePath`
+* @param partialMatch True will make `[a, b]` match `[a, b, c]`
+*/
+function matchNamePath(namePath, subNamePath, partialMatch = false) {
+	if (!namePath || !subNamePath) return false;
+	if (!partialMatch && namePath.length !== subNamePath.length) return false;
+	return subNamePath.every((nameUnit, i) => namePath[i] === nameUnit);
+}
+
+//#endregion
+export { cloneByNamePathList, containsNamePath, getNamePath, getValue, setValue };

package/dist/grid/col.mjs

@@ -0,0 +1,185 @@
+import { useConfig } from "../config-provider/context.mjs";
+import { genCssVar } from "../theme/util/genStyleUtils.mjs";
+import { useColStyle } from "./style/index.mjs";
+import { useRowContext } from "./RowContext.mjs";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+import { classNames } from "@v-c/util";
+
+//#region src/grid/col.tsx
+function isNumber(value) {
+	return typeof value === "number" && !Number.isNaN(value);
+}
+function parseFlex(flex) {
+	if (isNumber(flex)) return `${flex} ${flex} auto`;
+	if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) return `0 0 ${flex}`;
+	return flex;
+}
+const sizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"xxl"
+];
+const Col = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const configCtx = useConfig();
+	const { gutter, wrap } = useRowContext();
+	const prefixCls = computed(() => configCtx.value?.getPrefixCls("col", props.prefixCls));
+	const [varName] = genCssVar(computed(() => configCtx.value?.getPrefixCls()).value, "col");
+	const [hashId, cssVarCls] = useColStyle(prefixCls);
+	return () => {
+		const { span, order, offset, push, pull, flex } = props;
+		const sizeStyle = {};
+		let sizeClassObj = {};
+		sizes.forEach((size) => {
+			let sizeProps = {};
+			const propSize = props[size];
+			if (typeof propSize === "number") sizeProps.span = propSize;
+			else if (typeof propSize === "object") sizeProps = propSize || {};
+			sizeClassObj = {
+				...sizeClassObj,
+				[`${prefixCls.value}-${size}-${sizeProps.span}`]: sizeProps.span !== void 0,
+				[`${prefixCls.value}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
+				[`${prefixCls.value}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset || sizeProps.offset === 0,
+				[`${prefixCls.value}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
+				[`${prefixCls.value}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
+				[`${prefixCls.value}-rtl`]: configCtx.value.direction === "rtl"
+			};
+			if (sizeProps.flex) {
+				sizeClassObj[`${prefixCls.value}-${size}-flex`] = true;
+				sizeStyle[varName(`${size}-flex`)] = parseFlex(sizeProps.flex);
+			}
+		});
+		const classes = classNames(prefixCls.value, {
+			[`${prefixCls.value}-${span}`]: span !== void 0,
+			[`${prefixCls.value}-order-${order}`]: order,
+			[`${prefixCls.value}-offset-${offset}`]: offset,
+			[`${prefixCls.value}-push-${push}`]: push,
+			[`${prefixCls.value}-pull-${pull}`]: pull
+		}, sizeClassObj, hashId.value, cssVarCls.value);
+		const mergedStyle = {};
+		if (gutter?.value && gutter.value[0] > 0) {
+			const horizontalGutter = gutter.value[0] / 2;
+			mergedStyle.paddingLeft = `${horizontalGutter}px`;
+			mergedStyle.paddingRight = `${horizontalGutter}px`;
+		}
+		if (flex) {
+			mergedStyle.flex = parseFlex(flex);
+			if (wrap?.value === false && !mergedStyle.minWidth) mergedStyle.minWidth = 0;
+		}
+		return createVNode("div", mergeProps(attrs, {
+			"class": classes,
+			"style": [
+				mergedStyle,
+				attrs.style,
+				sizeStyle
+			]
+		}), [slots.default?.()]);
+	};
+}, {
+	props: {
+		flex: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		span: {
+			type: [Number, String],
+			required: false,
+			default: void 0
+		},
+		order: {
+			type: [Number, String],
+			required: false,
+			default: void 0
+		},
+		offset: {
+			type: [Number, String],
+			required: false,
+			default: void 0
+		},
+		push: {
+			type: [Number, String],
+			required: false,
+			default: void 0
+		},
+		pull: {
+			type: [Number, String],
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		xs: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		sm: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		md: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		lg: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		xl: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false,
+			default: void 0
+		},
+		xxl: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "ACol",
+	inheritAttrs: false
+});
+Col.install = (app) => {
+	app.component(Col.name, Col);
+};
+var col_default = Col;
+
+//#endregion
+export { col_default as default };

package/dist/grid/hooks/useBreakpoint.mjs

@@ -0,0 +1,25 @@
+import responsiveObserver_default from "../../_util/responsiveObserver.mjs";
+import { nextTick, ref, unref, watchEffect } from "vue";
+import canUseDom from "@v-c/util/dist/Dom/canUseDom";
+
+//#region src/grid/hooks/useBreakpoint.tsx
+function useBreakpoint(refreshOnChange = true, defaultScreens = {}) {
+	const screensRef = ref(unref(defaultScreens));
+	const responsiveObserver = responsiveObserver_default();
+	watchEffect(async (onCleanup) => {
+		if (!canUseDom()) return;
+		await nextTick();
+		const token = responsiveObserver.value?.subscribe((supportScreens) => {
+			screensRef.value = unref(supportScreens);
+			if (unref(refreshOnChange)) {}
+		});
+		onCleanup(() => {
+			responsiveObserver.value.unsubscribe(token);
+		});
+	});
+	return screensRef;
+}
+var useBreakpoint_default = useBreakpoint;
+
+//#endregion
+export { useBreakpoint_default as default, useBreakpoint };

package/dist/grid/hooks/useGutter.mjs

@@ -0,0 +1,36 @@
+import { responsiveArray } from "../../_util/responsiveObserver.mjs";
+import { computed, ref, watchEffect } from "vue";
+
+//#region src/grid/hooks/useGutter.ts
+function useGutter(gutter, screens) {
+	const results = ref([void 0, void 0]);
+	const normalizedGutter = computed(() => {
+		return Array.isArray(gutter.value) ? gutter.value : [gutter.value, void 0];
+	});
+	const mergedScreens = computed(() => {
+		return screens.value || {
+			xs: true,
+			sm: true,
+			md: true,
+			lg: true,
+			xl: true,
+			xxl: true
+		};
+	});
+	watchEffect(() => {
+		normalizedGutter.value.forEach((g, index) => {
+			if (typeof g === "object" && g !== null) for (let i = 0; i < responsiveArray.length; i++) {
+				const breakpoint = responsiveArray[i];
+				if (mergedScreens.value[breakpoint] && g[breakpoint] !== void 0) {
+					results.value[index] = g[breakpoint];
+					break;
+				}
+			}
+			else results.value[index] = g;
+		});
+	});
+	return results;
+}
+
+//#endregion
+export { useGutter as default };

package/dist/grid/index.d.mts

@@ -0,0 +1,23 @@
+import { Breakpoint } from "../_util/responsiveObserver.mjs";
+import { Col, ColProps, ColSize } from "./col.mjs";
+import { Row, RowProps } from "./row.mjs";
+import * as vue7 from "vue";
+
+//#region src/grid/index.d.ts
+declare function useBreakpoint(): vue7.Ref<{
+  xxl?: boolean | undefined;
+  xl?: boolean | undefined;
+  lg?: boolean | undefined;
+  md?: boolean | undefined;
+  sm?: boolean | undefined;
+  xs?: boolean | undefined;
+} | null, Partial<Record<Breakpoint, boolean>> | {
+  xxl?: boolean | undefined;
+  xl?: boolean | undefined;
+  lg?: boolean | undefined;
+  md?: boolean | undefined;
+  sm?: boolean | undefined;
+  xs?: boolean | undefined;
+} | null>;
+//#endregion
+export { useBreakpoint };

package/dist/grid/index.mjs

@@ -0,0 +1,11 @@
+import useBreakpoint_default from "./hooks/useBreakpoint.mjs";
+import col_default from "./col.mjs";
+import row_default from "./row.mjs";
+
+//#region src/grid/index.tsx
+function useBreakpoint() {
+	return useBreakpoint_default();
+}
+
+//#endregion
+export { useBreakpoint };

package/dist/grid/row.d.mts

@@ -0,0 +1,21 @@
+import { Breakpoint } from "../_util/responsiveObserver.mjs";
+import * as vue9 from "vue";
+
+//#region src/grid/row.d.ts
+declare const _RowAligns: readonly ["top", "middle", "bottom", "stretch"];
+declare const _RowJustify: readonly ["start", "end", "center", "space-around", "space-between", "space-evenly"];
+type Responsive = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+type ResponsiveLike<T> = { [key in Responsive]?: T };
+type Gutter = number | undefined | Partial<Record<Breakpoint, number>>;
+type ResponsiveAligns = ResponsiveLike<(typeof _RowAligns)[number]>;
+type ResponsiveJustify = ResponsiveLike<(typeof _RowJustify)[number]>;
+interface RowProps {
+  gutter?: Gutter | [Gutter, Gutter];
+  align?: (typeof _RowAligns)[number] | ResponsiveAligns;
+  justify?: (typeof _RowJustify)[number] | ResponsiveJustify;
+  prefixCls?: string;
+  wrap?: boolean;
+}
+declare const Row: vue9.DefineSetupFnComponent<RowProps, {}, {}, RowProps & {}, vue9.PublicProps>;
+//#endregion
+export { Row, RowProps };