antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/form/FormItemInput.js

@@ -0,0 +1,166 @@
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import { FormItemPrefixContextProvider, useFormContext, useFormContextProvider } from "./context.js";
+import col_default from "../grid/col.js";
+import "../grid/index.js";
+import ErrorList_default from "./ErrorList.js";
+import fallbackCmp_default from "./style/fallbackCmp.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, shallowRef, watch } from "vue";
+import { clsx, get, set } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import { omit } from "es-toolkit";
+
+//#region src/form/FormItemInput.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const GRID_MAX = 24;
+const FormItemInput = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const baseClassName = computed(() => `${props.prefixCls}-item`);
+	const formContext = useFormContext();
+	const contextClassNames = computed(() => formContext.value?.classes ?? {});
+	const contextStyles = computed(() => formContext.value?.styles ?? {});
+	const extraRef = shallowRef();
+	const extraHeight = shallowRef(0);
+	watch(() => props.extra, async () => {
+		await nextTick();
+		if (props.extra && extraRef.value) extraHeight.value = extraRef.value.clientHeight;
+		else extraHeight.value = 0;
+	}, { immediate: true });
+	useFormContextProvider(computed(() => omit(formContext.value ?? {}, ["labelCol", "wrapperCol"])));
+	return () => {
+		const { wrapperCol, labelCol, marginBottom, warnings, errors, prefixCls, status, fieldId, onErrorVisibleChanged } = props;
+		const label = getSlotPropsFnRun({}, props, "label");
+		const extra = getSlotPropsFnRun({}, props, "extra");
+		const help = getSlotPropsFnRun({}, props, "help");
+		const children = filterEmpty(slots?.default?.() ?? []);
+		const mergedWrapperColFn = () => {
+			let mergedWrapper = { ...wrapperCol || formContext.value?.wrapperCol || {} };
+			if (label === null && !labelCol && !wrapperCol && formContext.value?.labelCol) {
+				[
+					void 0,
+					"xs",
+					"sm",
+					"md",
+					"lg",
+					"xl",
+					"xxl"
+				].forEach((size) => {
+					const _size = size ? [size] : [];
+					const formLabel = get(formContext?.value?.labelCol, _size);
+					const formLabelObj = typeof formLabel === "object" ? formLabel : {};
+					const wrapper = get(mergedWrapper, _size);
+					const wrapperObj = typeof wrapper === "object" ? wrapper : {};
+					if ("span" in formLabelObj && !("offset" in wrapperObj) && formLabelObj.span < GRID_MAX) mergedWrapper = set(mergedWrapper, [..._size, "offset"], formLabelObj.span);
+				});
+				return mergedWrapper;
+			}
+		};
+		const mergedWrapperCol = mergedWrapperColFn();
+		const className = clsx(`${baseClassName.value}-control`, mergedWrapperCol?.class);
+		const inputDom = createVNode("div", { "class": `${baseClassName.value}-control-input` }, [createVNode("div", {
+			"class": clsx(`${baseClassName.value}-control-input-content`, contextClassNames.value?.content),
+			"style": contextStyles.value?.content
+		}, [children])]);
+		const errorListDom = marginBottom !== null || errors.length || warnings.length ? createVNode(FormItemPrefixContextProvider, {
+			"prefixCls": prefixCls,
+			"status": status
+		}, { default: () => [createVNode(ErrorList_default, {
+			"fieldId": fieldId,
+			"errors": errors,
+			"warnings": warnings,
+			"help": help,
+			"helpStatus": status,
+			"class": `${baseClassName.value}-explain-connected`,
+			"onVisibleChanged": onErrorVisibleChanged
+		}, null)] }) : null;
+		const extraProps = {};
+		if (fieldId) extraProps.id = `${fieldId}_extra`;
+		const extraDom = extra ? createVNode("div", mergeProps(extraProps, {
+			"class": `${baseClassName.value}-extra`,
+			"ref": extraRef
+		}), [extra]) : null;
+		const dom = createVNode(Fragment, null, [inputDom, errorListDom || extraDom ? createVNode("div", {
+			"class": `${baseClassName.value}-additional`,
+			"style": marginBottom ? { minHeight: `${marginBottom + extraHeight.value}px` } : {}
+		}, [errorListDom, extraDom]) : null]);
+		return createVNode(Fragment, null, [createVNode(col_default, mergeProps(mergedWrapperCol, { "class": className }), _isSlot(dom) ? dom : { default: () => [dom] }), createVNode(fallbackCmp_default, { "prefixCls": prefixCls }, null)]);
+	};
+}, {
+	props: {
+		labelCol: {
+			type: Object,
+			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
+		},
+		label: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		errors: {
+			type: Array,
+			required: true
+		},
+		warnings: {
+			type: Array,
+			required: true
+		},
+		marginBottom: {
+			type: [Number, null],
+			required: false
+		},
+		onErrorVisibleChanged: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "FormItemInput",
+	inheritAttrs: false
+});
+var FormItemInput_default = FormItemInput;
+
+//#endregion
+export { FormItemInput_default as default };

package/dist/form/FormItemLabel.d.ts

@@ -0,0 +1,31 @@
+import { VueNode } from "../_util/type.js";
+import { ColProps } from "../grid/col.js";
+import "../grid/index.js";
+import { FormLabelAlign } from "./interface.js";
+import { RequiredMark } from "./Form.js";
+import { TooltipProps } from "../tooltip/index.js";
+import "vue";
+
+//#region src/form/FormItemLabel.d.ts
+type WrapperTooltipProps = TooltipProps & {
+  icon?: any;
+};
+type LabelTooltipType = WrapperTooltipProps | VueNode;
+type ColPropsWithClass = ColProps & {
+  class: string;
+};
+interface FormItemLabelProps {
+  colon?: boolean;
+  htmlFor?: string;
+  label?: VueNode;
+  labelAlign?: FormLabelAlign;
+  labelCol?: ColPropsWithClass;
+  /**
+   * @internal Used for pass `requiredMark` from `<Form />`
+   */
+  requiredMark?: RequiredMark;
+  tooltip?: LabelTooltipType;
+  vertical?: boolean;
+}
+//#endregion
+export { FormItemLabelProps, LabelTooltipType };

package/dist/form/FormItemLabel.js

@@ -0,0 +1,134 @@
+import { getSlotPropsFnRun } from "../_util/tools.js";
+import tooltip_default from "../tooltip/index.js";
+import en_US_default from "../locale/en_US.js";
+import useLocale_default from "../locale/useLocale.js";
+import { useFormContext } from "./context.js";
+import col_default from "../grid/col.js";
+import "../grid/index.js";
+import convertToTooltipProps from "../_util/convertToTooltipProps.js";
+import { Fragment, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { QuestionCircleFilled } from "@antdv-next/icons";
+
+//#region src/form/FormItemLabel.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const FormItemLabel = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const [formLocale] = useLocale_default("Form");
+	const formContext = useFormContext();
+	return () => {
+		const { labelCol, labelAlign, prefixCls, required, colon, vertical, tooltip, requiredMark, htmlFor } = props;
+		const { labelAlign: contextLabelAlign, labelCol: contextLabelCol, labelWrap, colon: contextColon, classes: contextClassNames, styles: contextStyles } = formContext.value;
+		const label = getSlotPropsFnRun(slots, props, "label");
+		if (!label) return null;
+		const mergedLabelCol = labelCol || contextLabelCol || {};
+		const mergedLabelAlign = labelAlign || contextLabelAlign;
+		const labelClsBasic = `${prefixCls}-item-label`;
+		const labelColClassName = clsx(labelClsBasic, mergedLabelAlign === "left" && `${labelClsBasic}-left`, mergedLabelCol.class, { [`${labelClsBasic}-wrap`]: !!labelWrap });
+		let labelChildren = label;
+		const computedColon = colon === true || contextColon !== false && colon !== false;
+		if (computedColon && !vertical && typeof label === "string" && label.trim()) labelChildren = label.replace(/[:|：]\s*$/, "");
+		const tooltipProps = convertToTooltipProps(tooltip);
+		if (tooltipProps) {
+			let _slot;
+			const { icon = createVNode(QuestionCircleFilled, null, null),...restTooltipProps } = tooltipProps;
+			const tooltipNode = createVNode(tooltip_default, restTooltipProps, _isSlot(_slot = createVNode(icon, {
+				class: `${prefixCls}-item-tooltip-icon`,
+				title: "",
+				onClick: (e) => e.stopPropagation(),
+				tabIndex: null
+			})) ? _slot : { default: () => [_slot] });
+			labelChildren = createVNode(Fragment, null, [labelChildren, tooltipNode]);
+		}
+		const isOptionalMark = requiredMark === "optional";
+		const isRenderMark = typeof requiredMark === "function";
+		const hideRequiredMark = requiredMark === false;
+		if (isRenderMark) labelChildren = requiredMark(labelChildren, { required: !!required });
+		else if (isOptionalMark && !required) labelChildren = createVNode(Fragment, null, [labelChildren, createVNode("span", {
+			"class": `${prefixCls}-item-optional`,
+			"title": ""
+		}, [formLocale?.value?.optional || en_US_default.Form?.optional])]);
+		let markType;
+		if (hideRequiredMark) markType = "hidden";
+		else if (isOptionalMark || isRenderMark) markType = "optional";
+		const labelClassName = clsx(contextClassNames?.label, {
+			[`${prefixCls}-item-required`]: required,
+			[`${prefixCls}-item-required-mark-${markType}`]: markType,
+			[`${prefixCls}-item-no-colon`]: !computedColon
+		});
+		return createVNode(col_default, mergeProps(mergedLabelCol, { "class": labelColClassName }), { default: () => [createVNode("label", {
+			"for": htmlFor,
+			"class": labelClassName,
+			"style": contextStyles?.label,
+			"title": typeof label === "string" ? label : ""
+		}, [labelChildren])] });
+	};
+}, {
+	props: {
+		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
+		},
+		requiredMark: {
+			type: [
+				Boolean,
+				String,
+				Function
+			],
+			required: false
+		},
+		tooltip: {
+			type: [
+				Object,
+				Function,
+				Boolean,
+				String,
+				Number,
+				null
+			],
+			required: false
+		},
+		vertical: {
+			type: Boolean,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: true
+		}
+	},
+	name: "FormItemLabel",
+	inheritAttrs: false
+});
+var FormItemLabel_default = FormItemLabel;
+
+//#endregion
+export { FormItemLabel_default as default };

package/dist/form/context.js

@@ -0,0 +1,117 @@
+import { computed, defineComponent, inject, provide, ref } from "vue";
+
+//#region src/form/context.tsx
+/** Form Context. Set top form style and pass to Form Item usage. */
+const FormContextKey = Symbol("FormContextKey");
+function useFormContextProvider(value) {
+	provide(FormContextKey, value);
+}
+function useFormContext() {
+	return inject(FormContextKey, ref({
+		labelAlign: "right",
+		layout: "horizontal"
+	}));
+}
+const FormItemPrefixContextKey = Symbol("FormItemPrefixContextKey");
+/** Used for ErrorList only */
+function useFormItemPrefixContextProvider(value) {
+	provide(FormItemPrefixContextKey, value);
+}
+const FormItemPrefixContextProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	useFormItemPrefixContextProvider(computed(() => props));
+	return () => {
+		return slots?.default?.();
+	};
+}, { props: {
+	prefixCls: {
+		type: String,
+		required: true
+	},
+	status: {
+		type: String,
+		required: false
+	}
+} });
+function useFormItemPrefixContext() {
+	return inject(FormItemPrefixContextKey, ref({ prefixCls: "" }));
+}
+const VariantContextKey = Symbol("VariantContextKey");
+function useVariantContextProvider(variant) {
+	provide(VariantContextKey, variant);
+}
+function useVariantContext() {
+	return inject(VariantContextKey, ref(void 0));
+}
+const FormItemInputContextKey = Symbol("FormItemInputContextKey");
+function useFormItemInputContextProvider(value) {
+	provide(FormItemInputContextKey, value);
+}
+function useFormItemInputContext() {
+	return inject(FormItemInputContextKey, ref({}));
+}
+/** `noStyle` Form Item Context. Used for error collection */
+const NoStyleItemContextKey = Symbol("NoStyleItemContextKey");
+function useNoStyleItemContextProvider(value) {
+	provide(NoStyleItemContextKey, value);
+}
+const NoStyleItemContextProvider = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	useNoStyleItemContextProvider(props.value);
+	return () => {
+		return slots?.default?.();
+	};
+}, {
+	props: { value: {
+		type: Function,
+		required: true
+	} },
+	name: "NoStyleItemContext"
+});
+function useNoStyleItemContext() {
+	return inject(NoStyleItemContextKey, null);
+}
+const NoFormStyle = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const formItemInputContext = useFormItemInputContext();
+	useFormItemInputContextProvider(computed(() => {
+		const { override, status } = props;
+		const newContext = { ...formItemInputContext.value };
+		if (override) delete newContext.isFormItemInput;
+		if (status) {
+			delete newContext.status;
+			delete newContext.hasFeedback;
+			delete newContext.feedbackIcon;
+		}
+		return newContext;
+	}));
+	return () => {
+		return slots?.default?.();
+	};
+}, { props: {
+	override: {
+		type: Boolean,
+		required: false
+	},
+	status: {
+		type: Boolean,
+		required: false
+	}
+} });
+const FormItemProviderContextKey = Symbol("FormItemProviderContextKey");
+function useFormItemProvider(value) {
+	provide(FormItemProviderContextKey, value);
+}
+function useFormItemContext(rest = false) {
+	if (rest) useFormItemProviderRest();
+	return inject(FormItemProviderContextKey, void 0);
+}
+function useFormItemProviderRest() {
+	return provide(FormItemProviderContextKey, {
+		fieldId: ref(void 0),
+		triggerChange: () => {},
+		triggerBlur: () => {},
+		clearValidate: () => {},
+		triggerFocus: () => {}
+	});
+}
+
+//#endregion
+export { FormItemPrefixContextProvider, NoFormStyle, NoStyleItemContextProvider, useFormContext, useFormContextProvider, useFormItemContext, useFormItemInputContext, useFormItemInputContextProvider, useFormItemPrefixContext, useFormItemProvider, useNoStyleItemContext, useVariantContext, useVariantContextProvider };

package/dist/form/hooks/useForm.js

@@ -0,0 +1,9 @@
+import { toArray } from "../util.js";
+
+//#region src/form/hooks/useForm.ts
+function toNamePathStr(name) {
+	return toArray(name).join("_");
+}
+
+//#endregion
+export { toNamePathStr };

package/dist/form/hooks/useVariant.js

@@ -0,0 +1,21 @@
+import { Variants, useConfig } from "../../config-provider/context.js";
+import { useVariantContext } from "../context.js";
+import { computed } from "vue";
+
+//#region src/form/hooks/useVariant.ts
+function useVariant(component, variant, legacyBordered) {
+	const config = useConfig();
+	const formVariant = useVariantContext();
+	const mergedVariant = computed(() => {
+		if (typeof variant?.value !== "undefined") return variant.value;
+		if ((typeof legacyBordered === "object" ? legacyBordered.value : legacyBordered) === false) return "borderless";
+		const componentConfigVariant = config.value?.[component]?.variant;
+		const globalVariant = config.value?.variant;
+		return formVariant.value ?? componentConfigVariant ?? globalVariant ?? "outlined";
+	});
+	return [mergedVariant, computed(() => Variants.includes(mergedVariant.value))];
+}
+const useVariants = useVariant;
+
+//#endregion
+export { useVariant as default, useVariants };

package/dist/form/index.d.ts

@@ -0,0 +1,2 @@
+import { FormEmits, FormInstance, FormProps, FormSlots, InternalForm } from "./Form.js";
+import { InternalFormItem } from "./FormItem/index.js";

package/dist/form/index.js

@@ -0,0 +1,12 @@
+import Form_default from "./Form.js";
+import FormItem_default from "./FormItem/index.js";
+
+//#region src/form/index.tsx
+Form_default.install = (app) => {
+	app.component(Form_default.name, Form_default);
+	app.component(FormItem_default.name, FormItem_default);
+};
+var form_default = Form_default;
+
+//#endregion
+export { form_default as default };

package/dist/form/interface.d.ts

@@ -0,0 +1,9 @@
+import { Options } from "scroll-into-view-if-needed";
+
+//#region src/form/interface.d.ts
+type ScrollFocusOptions = Options & {
+  focus?: boolean;
+};
+type FormLabelAlign = 'left' | 'right';
+//#endregion
+export { FormLabelAlign, ScrollFocusOptions };

package/dist/form/namePathType.d.ts

@@ -0,0 +1,9 @@
+//#region src/form/namePathType.d.ts
+type BaseNamePath = string | number | boolean | (string | number | boolean)[];
+/**
+ * Store: The store type from `FormInstance<Store>`
+ * ParentNamePath: Auto generate by nest logic. Do not fill manually.
+ */
+type DeepNamePath<Store = any, ParentNamePath extends any[] = []> = ParentNamePath['length'] extends 5 ? never : true extends (Store extends BaseNamePath ? true : false) ? ParentNamePath['length'] extends 0 ? Store | BaseNamePath : Store extends any[] ? [...ParentNamePath, number] : never : Store extends any[] ? [...ParentNamePath, number] | DeepNamePath<Store[number], [...ParentNamePath, number]> : keyof Store extends never ? Store : { [FieldKey in keyof Store]: Store[FieldKey] extends Function ? never : (ParentNamePath['length'] extends 0 ? FieldKey : never) | [...ParentNamePath, FieldKey] | DeepNamePath<Required<Store>[FieldKey], [...ParentNamePath, FieldKey]> }[keyof Store];
+//#endregion
+export { DeepNamePath };

package/dist/form/style/explain.js

@@ -0,0 +1,36 @@
+//#region src/form/style/explain.ts
+const genFormValidateMotionStyle = (token) => {
+	const { componentCls } = token;
+	const helpCls = `${componentCls}-show-help`;
+	const helpItemCls = `${componentCls}-show-help-item`;
+	return { [helpCls]: {
+		"transition": `opacity ${token.motionDurationFast} ${token.motionEaseInOut}`,
+		"&-appear, &-enter": {
+			"opacity": 0,
+			"&-active": { opacity: 1 }
+		},
+		"&-leave": {
+			"opacity": 1,
+			"&-active": { opacity: 0 }
+		},
+		[helpItemCls]: {
+			overflow: "hidden",
+			transition: `height ${token.motionDurationFast} ${token.motionEaseInOut},
+                     opacity ${token.motionDurationFast} ${token.motionEaseInOut},
+                     transform ${token.motionDurationFast} ${token.motionEaseInOut} !important`,
+			[`&${helpItemCls}-appear, &${helpItemCls}-enter`]: {
+				"transform": `translateY(-5px)`,
+				"opacity": 0,
+				"&-active": {
+					transform: "translateY(0)",
+					opacity: 1
+				}
+			},
+			[`&${helpItemCls}-leave-active`]: { transform: `translateY(-5px)` }
+		}
+	} };
+};
+var explain_default = genFormValidateMotionStyle;
+
+//#endregion
+export { explain_default as default };

package/dist/form/style/fallbackCmp.js

@@ -0,0 +1,15 @@
+import { genSubStyleComponent } from "../../theme/util/genStyleUtils.js";
+import "../../theme/internal.js";
+import { prepareToken } from "./index.js";
+
+//#region src/form/style/fallbackCmp.ts
+const genFallbackStyle = (token) => {
+	const { formItemCls } = token;
+	return { "@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)": { [`${formItemCls}-control`]: { display: "flex" } } };
+};
+var fallbackCmp_default = genSubStyleComponent(["Form", "item-item"], (token, { rootPrefixCls }) => {
+	return genFallbackStyle(prepareToken(token, rootPrefixCls));
+});
+
+//#endregion
+export { fallbackCmp_default as default };

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

@@ -0,0 +1,58 @@
+import "../../theme/internal.js";
+import { CSSProperties } from "vue";
+
+//#region src/form/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 必填项标记颜色
+   * @descEN Required mark color
+   */
+  labelRequiredMarkColor: string;
+  /**
+   * @desc 标签颜色
+   * @descEN Label color
+   */
+  labelColor: string;
+  /**
+   * @desc 标签字体大小
+   * @descEN Label font size
+   */
+  labelFontSize: number;
+  /**
+   * @desc 标签高度
+   * @descEN Label height
+   */
+  labelHeight: number | string;
+  /**
+   * @desc 标签冒号前间距
+   * @descEN Label colon margin-inline-start
+   */
+  labelColonMarginInlineStart: number;
+  /**
+   * @desc 标签冒号后间距
+   * @descEN Label colon margin-inline-end
+   */
+  labelColonMarginInlineEnd: number;
+  /**
+   * @desc 表单项间距
+   * @descEN Form item margin bottom
+   */
+  itemMarginBottom: number;
+  /**
+   * @desc 行内布局表单项间距
+   * @descEN Inline layout form item margin bottom
+   */
+  inlineItemMarginBottom: number;
+  /**
+   * @desc 垂直布局标签内边距
+   * @descEN Vertical layout label padding
+   */
+  verticalLabelPadding: CSSProperties['padding'];
+  /**
+   * @desc 垂直布局标签外边距
+   * @descEN Vertical layout label margin
+   */
+  verticalLabelMargin: CSSProperties['margin'];
+}
+//#endregion
+export { ComponentToken };