antdv-next 0.0.111 → 1.0.0-alpha.2

package/dist/form/utils/validateUtil.js

@@ -0,0 +1,149 @@
+import { defaultValidateMessages } from "./messages.js";
+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.js

@@ -0,0 +1,50 @@
+import { toArray } from "./typeUtil.js";
+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.
+* This function should keep since we still thinking if need support like `a.b.c` format.
+* 'a' => ['a']
+* 123 => [123]
+* ['a', 123] => ['a', 123]
+*/
+function getNamePath(path) {
+	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/form/validateMessagesContext.js

@@ -0,0 +1,13 @@
+import { inject, provide } from "vue";
+
+//#region src/form/validateMessagesContext.tsx
+const ValidateMessagesContextKey = Symbol("ValidateMessagesContext");
+function useValidateMessagesProvider(validateMessages) {
+	provide(ValidateMessagesContextKey, validateMessages);
+}
+function useValidateMessagesContext() {
+	return inject(ValidateMessagesContextKey, void 0);
+}
+
+//#endregion
+export { useValidateMessagesContext, useValidateMessagesProvider };

package/dist/grid/RowContext.js

@@ -0,0 +1,13 @@
+import { inject, provide } from "vue";
+
+//#region src/grid/RowContext.ts
+const RowContext = Symbol("RowContext");
+function useRowContextProvider(value) {
+	provide(RowContext, value);
+}
+function useRowContext() {
+	return inject(RowContext, {});
+}
+
+//#endregion
+export { useRowContext, useRowContextProvider };

package/dist/grid/col.d.ts

@@ -0,0 +1,32 @@
+import * as vue11 from "vue";
+import { LiteralUnion } from "@v-c/util/dist/type";
+
+//#region src/grid/col.d.ts
+type ColSpanType = number | string;
+type FlexType = number | LiteralUnion<'none' | 'auto'>;
+interface ColSize {
+  flex?: FlexType;
+  span?: ColSpanType;
+  order?: ColSpanType;
+  offset?: ColSpanType;
+  push?: ColSpanType;
+  pull?: ColSpanType;
+}
+interface ColProps {
+  flex?: FlexType;
+  span?: ColSpanType;
+  order?: ColSpanType;
+  offset?: ColSpanType;
+  push?: ColSpanType;
+  pull?: ColSpanType;
+  prefixCls?: string;
+  xs?: ColSpanType | ColSize;
+  sm?: ColSpanType | ColSize;
+  md?: ColSpanType | ColSize;
+  lg?: ColSpanType | ColSize;
+  xl?: ColSpanType | ColSize;
+  xxl?: ColSpanType | ColSize;
+}
+declare const Col: vue11.DefineSetupFnComponent<ColProps, {}, {}, ColProps & {}, vue11.PublicProps>;
+//#endregion
+export { Col, ColProps, ColSize };

package/dist/grid/col.js

@@ -0,0 +1,167 @@
+import { useConfig } from "../config-provider/context.js";
+import { useColStyle } from "./style/index.js";
+import { useRowContext } from "./RowContext.js";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+import { classNames } from "@v-c/util";
+
+//#region src/grid/col.tsx
+function parseFlex(flex) {
+	if (typeof flex === "number") 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 [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[`--${prefixCls.value}-${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
+		},
+		span: {
+			type: [Number, String],
+			required: false
+		},
+		order: {
+			type: [Number, String],
+			required: false
+		},
+		offset: {
+			type: [Number, String],
+			required: false
+		},
+		push: {
+			type: [Number, String],
+			required: false
+		},
+		pull: {
+			type: [Number, String],
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		xs: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		},
+		sm: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		},
+		md: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		},
+		lg: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		},
+		xl: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		},
+		xxl: {
+			type: [
+				Number,
+				String,
+				Object
+			],
+			required: false
+		}
+	},
+	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.js

@@ -0,0 +1,23 @@
+import responsiveObserver_default from "../../_util/responsiveObserver.js";
+import { nextTick, ref, unref, watchEffect } from "vue";
+
+//#region src/grid/hooks/useBreakpoint.tsx
+function useBreakpoint(refreshOnChange = true, defaultScreens = {}) {
+	const screensRef = ref(unref(defaultScreens));
+	const responsiveObserver = responsiveObserver_default();
+	watchEffect(async (onCleanup) => {
+		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.js

@@ -0,0 +1,36 @@
+import { responsiveArray } from "../../_util/responsiveObserver.js";
+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.ts

@@ -0,0 +1,23 @@
+import { Breakpoint } from "../_util/responsiveObserver.js";
+import { Col, ColProps, ColSize } from "./col.js";
+import { Row, RowProps } from "./row.js";
+import * as vue4 from "vue";
+
+//#region src/grid/index.d.ts
+declare function useBreakpoint(): vue4.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.js

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

package/dist/grid/row.d.ts

@@ -0,0 +1,21 @@
+import { Breakpoint } from "../_util/responsiveObserver.js";
+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 };

package/dist/grid/row.js

@@ -0,0 +1,108 @@
+import { useConfig } from "../config-provider/context.js";
+import { useRowStyle } from "./style/index.js";
+import { responsiveArray } from "../_util/responsiveObserver.js";
+import { useBreakpoint } from "./hooks/useBreakpoint.js";
+import { useRowContextProvider } from "./RowContext.js";
+import useGutter from "./hooks/useGutter.js";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, watch } from "vue";
+import { classNames } from "@v-c/util";
+import { getAttrStyleAndClass } from "@v-c/util/dist/props-util";
+
+//#region src/grid/row.tsx
+function useMergedPropByScreen(oriProp, screen) {
+	const prop = shallowRef(typeof oriProp.value === "string" ? oriProp.value : "");
+	const calcMergedAlignOrJustify = () => {
+		if (typeof oriProp.value === "string") prop.value = oriProp.value;
+		if (typeof oriProp.value !== "object") return;
+		for (let i = 0; i < responsiveArray.length; i++) {
+			const breakpoint = responsiveArray[i];
+			if (!screen.value || !screen.value[breakpoint]) continue;
+			const curVal = oriProp.value[breakpoint];
+			if (curVal !== void 0) {
+				prop.value = curVal;
+				return;
+			}
+		}
+	};
+	watch([() => JSON.stringify(oriProp.value), screen], () => {
+		calcMergedAlignOrJustify();
+	}, { immediate: true });
+	return prop;
+}
+const Row = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
+	const configCtx = useConfig();
+	const screens = useBreakpoint(true, null);
+	const mergedAlign = useMergedPropByScreen(computed(() => props.align), screens);
+	const mergedJustify = useMergedPropByScreen(computed(() => props.justify), screens);
+	const prefixCls = computed(() => configCtx.value?.getPrefixCls("row", props.prefixCls));
+	const [hashId, cssVarCls] = useRowStyle(prefixCls);
+	const gutters = useGutter(computed(() => props.gutter), screens);
+	useRowContextProvider({
+		gutter: gutters,
+		wrap: computed(() => !!props.wrap)
+	});
+	return () => {
+		const { wrap } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const classes = classNames(prefixCls.value, {
+			[`${prefixCls.value}-no-wrap`]: wrap === false,
+			[`${prefixCls.value}-${mergedJustify.value}`]: mergedJustify.value,
+			[`${prefixCls.value}-${mergedAlign.value}`]: mergedAlign.value,
+			[`${prefixCls.value}-rtl`]: configCtx.value.direction === "rtl"
+		}, hashId.value, cssVarCls.value, className);
+		const rowStyle = {};
+		const horizontalGutter = gutters.value[0] != null && gutters.value[0] > 0 ? gutters.value[0] / -2 : void 0;
+		if (horizontalGutter) {
+			rowStyle.marginLeft = `${horizontalGutter}px`;
+			rowStyle.marginRight = `${horizontalGutter}px`;
+		}
+		const [_, gutterV] = gutters.value;
+		rowStyle.rowGap = gutterV;
+		return createVNode("div", mergeProps(restAttrs, {
+			"class": classes,
+			"style": [rowStyle, style]
+		}), [slots?.default?.()]);
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		gutter: {
+			type: [
+				Number,
+				null,
+				Object,
+				Array
+			],
+			required: false
+		},
+		align: {
+			type: [String, Object],
+			required: false
+		},
+		justify: {
+			type: [String, Object],
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		wrap: {
+			type: Boolean,
+			required: false
+		}
+	}, {
+		gutter: 0,
+		align: "top",
+		justify: "start",
+		wrap: true
+	}),
+	name: "ARow",
+	inheritAttrs: false
+});
+Row.install = (app) => {
+	app.component(Row.name, Row);
+};
+var row_default = Row;
+
+//#endregion
+export { row_default as default };

package/dist/grid/style/index.d.ts

@@ -0,0 +1,7 @@
+import "../../theme/internal.js";
+import "vue";
+
+//#region src/grid/style/index.d.ts
+interface ComponentToken {}
+//#endregion
+export { ComponentToken };