@antdv-next/mobile 0.0.0-stage → 0.1.1

package/dist/form/FormItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,471 @@
+import Spinner_default from "../_base/Spinner.js";
+import { addUnit, isRenderable, toArray } from "../_util/index.js";
+import RenderNode_default from "../_util/RenderNode.js";
+import { useDisabled } from "../config-provider/context.js";
+import { useLocale } from "../locale/index.js";
+import { formItemInputContextKey } from "./context.js";
+import { formInternalContextKey, formItemParentContextKey } from "./internal.js";
+import { cloneValue, getFieldId, getNamePath, getValue, isEqualValue, setValue, validateRules } from "./utils.js";
+import "../style/index2.js";
+import './style/index.css';/* empty css            */
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, provide, reactive, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useSlots, watch } from "vue";
+import { CheckCircleFilled, CloseCircleFilled, ExclamationCircleFilled, RightOutlined } from "@antdv-next/icons";
+// src/form/FormItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["for"];
+var _hoisted_2 = {
+	key: 0,
+	class: "am-form-item-required-mark",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = { class: "am-form-item-label-text" };
+var _hoisted_4 = {
+	key: 1,
+	class: "am-form-item-optional"
+};
+var _hoisted_5 = { class: "am-form-item-control" };
+var _hoisted_6 = { class: "am-form-item-control-input" };
+var _hoisted_7 = {
+	key: 0,
+	class: "am-form-item-feedback-icon"
+};
+var _hoisted_8 = {
+	key: 1,
+	class: "am-form-item-arrow"
+};
+var FormItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "AmFormItem",
+	inheritAttrs: false,
+	__name: "FormItem",
+	props: {
+		name: {},
+		label: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		rules: {},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		help: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		extra: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		validateStatus: {},
+		hasFeedback: { type: Boolean },
+		validateTrigger: {
+			type: [
+				String,
+				Array,
+				Boolean
+			],
+			default: void 0
+		},
+		validateFirst: {
+			type: [Boolean, String],
+			default: false
+		},
+		validateDebounce: {},
+		messageVariables: {},
+		noStyle: { type: Boolean },
+		hidden: { type: Boolean },
+		layout: {},
+		labelAlign: {},
+		labelWidth: {},
+		colon: {
+			type: Boolean,
+			default: void 0
+		},
+		id: {},
+		clickable: { type: Boolean },
+		arrow: {
+			type: [
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array,
+				Function
+			],
+			default: void 0
+		},
+		contentAlign: {},
+		rootClass: {},
+		classes: {},
+		styles: {}
+	},
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const form = inject(formInternalContextKey, void 0);
+		const parentItem = inject(formItemParentContextKey, void 0);
+		const locale = useLocale("Form");
+		const formDisabled = useDisabled(() => void 0);
+		const rootRef = ref();
+		const namePath = computed(() => getNamePath(props.name));
+		const hasName = computed(() => namePath.value.length > 0);
+		const fieldId = computed(() => props.id ?? getFieldId(namePath.value, form?.props.name));
+		const fieldValue = computed(() => hasName.value && form?.props.model ? getValue(form.props.model, namePath.value) : void 0);
+		function getMergedRules() {
+			const rules = [];
+			const formRules = form?.props.rules && hasName.value ? getValue(form.props.rules, namePath.value) : void 0;
+			if (Array.isArray(formRules)) rules.push(...formRules);
+			if (props.rules) rules.push(...props.rules);
+			return rules;
+		}
+		const isRequired = computed(() => props.required ?? getMergedRules().some((rule) => rule?.required && !rule.warningOnly));
+		const mergedValidateTrigger = computed(() => props.validateTrigger !== void 0 ? props.validateTrigger : form?.props.validateTrigger);
+		function getRuleTriggerList(rule) {
+			const trigger = rule.validateTrigger ?? rule.trigger ?? mergedValidateTrigger.value ?? "change";
+			return trigger === false ? [] : toArray(trigger);
+		}
+		const messageVariables = computed(() => {
+			const variables = {};
+			if (typeof props.label === "string") variables.label = props.label;
+			else if (hasName.value) variables.label = namePath.value.join(".");
+			return {
+				...variables,
+				...props.messageVariables
+			};
+		});
+		const errors = shallowRef([]);
+		const warnings = shallowRef([]);
+		const meta = reactive({
+			touched: false,
+			validating: false,
+			validated: false
+		});
+		let validateId = 0;
+		let cancelDebounce;
+		let unmounted = false;
+		const initialValue = cloneValue(fieldValue.value);
+		function validateRulesInner(options = {}) {
+			if (!hasName.value) return Promise.resolve([]);
+			const { triggerName, validateOnly = false } = options;
+			let rules = getMergedRules();
+			if (triggerName) rules = mergedValidateTrigger.value === false ? [] : rules.filter((rule) => getRuleTriggerList(rule).includes(triggerName));
+			if (!rules.length) {
+				if (!validateOnly) {
+					validateId += 1;
+					errors.value = [];
+					warnings.value = [];
+					meta.validating = false;
+					meta.validated = true;
+					form?.onValidate(namePath.value, true, null);
+				}
+				return Promise.resolve([]);
+			}
+			if (!validateOnly) {
+				meta.validating = true;
+				meta.validated = true;
+			}
+			const currentId = validateOnly ? validateId : ++validateId;
+			const name = namePath.value;
+			const runRules = () => validateRules(name, fieldValue.value, rules, form?.validateMessages.value ?? {}, props.validateFirst, messageVariables.value);
+			const debounce = triggerName && !validateOnly ? props.validateDebounce : void 0;
+			return (debounce ? new Promise((resolve) => {
+				cancelDebounce?.();
+				const timer = setTimeout(resolve, debounce);
+				cancelDebounce = () => {
+					clearTimeout(timer);
+					resolve();
+				};
+			}).then(() => currentId === validateId ? runRules() : []) : runRules()).catch((e) => e).then((results = []) => {
+				const mergedErrors = [];
+				const mergedWarnings = [];
+				results.forEach(({ rule, errors: ruleErrors }) => {
+					if (rule.warningOnly) mergedWarnings.push(...ruleErrors);
+					else mergedErrors.push(...ruleErrors);
+				});
+				if (!validateOnly && currentId === validateId && !unmounted) {
+					errors.value = mergedErrors;
+					warnings.value = mergedWarnings;
+					meta.validating = false;
+					meta.validated = true;
+					form?.onValidate(name, mergedErrors.length === 0, mergedErrors.length ? mergedErrors : null);
+				}
+				if (mergedErrors.length) return Promise.reject(results);
+				return results;
+			});
+		}
+		function triggerValidate(triggerName) {
+			if (mergedValidateTrigger.value === false) return;
+			if (!getMergedRules().some((rule) => getRuleTriggerList(rule).includes(triggerName))) return;
+			validateRulesInner({ triggerName }).catch((e) => e);
+		}
+		function clearValidate() {
+			validateId += 1;
+			cancelDebounce?.();
+			errors.value = [];
+			warnings.value = [];
+			meta.validating = false;
+		}
+		let skipNextChange = false;
+		function resetField() {
+			clearValidate();
+			meta.touched = false;
+			meta.validated = false;
+			if (hasName.value && form?.props.model) {
+				const next = cloneValue(initialValue);
+				if (!isEqualValue(fieldValue.value, next)) {
+					skipNextChange = true;
+					setValue(form.props.model, namePath.value, next);
+				}
+			}
+		}
+		let changeScheduled = false;
+		let notifyValuesChange = false;
+		function scheduleChange(fromControl) {
+			if (fromControl) notifyValuesChange = true;
+			if (changeScheduled) return;
+			changeScheduled = true;
+			Promise.resolve().then(() => nextTick(() => {
+				changeScheduled = false;
+				if (unmounted) return;
+				if (notifyValuesChange) {
+					notifyValuesChange = false;
+					if (hasName.value) form?.triggerValuesChange(namePath.value, fieldValue.value);
+				}
+				if (skipNextChange) {
+					skipNextChange = false;
+					return;
+				}
+				triggerValidate("change");
+			}));
+		}
+		function onFieldChange() {
+			meta.touched = true;
+			scheduleChange(true);
+		}
+		function onFieldBlur() {
+			meta.touched = true;
+			triggerValidate("blur");
+		}
+		watch(fieldValue, () => scheduleChange(false), { deep: true });
+		const childStates = reactive(/* @__PURE__ */ new Map());
+		const itemKey = Symbol("AmFormItem");
+		if (!props.noStyle) provide(formItemParentContextKey, {
+			report: (key, state) => childStates.set(key, state),
+			remove: (key) => childStates.delete(key)
+		});
+		watch([
+			errors,
+			warnings,
+			() => meta.validating,
+			() => props.noStyle
+		], () => {
+			if (!parentItem) return;
+			if (props.noStyle) parentItem.report(itemKey, {
+				errors: errors.value,
+				warnings: warnings.value,
+				validating: meta.validating
+			});
+			else parentItem.remove(itemKey);
+		});
+		const mergedErrors = computed(() => {
+			const list = [...errors.value];
+			childStates.forEach((state) => list.push(...state.errors));
+			return list;
+		});
+		const mergedWarnings = computed(() => {
+			const list = [...warnings.value];
+			childStates.forEach((state) => list.push(...state.warnings));
+			return list;
+		});
+		const mergedValidating = computed(() => meta.validating || [...childStates.values()].some((state) => state.validating));
+		const mergedStatus = computed(() => {
+			if (props.validateStatus !== void 0) return props.validateStatus;
+			if (mergedValidating.value) return "validating";
+			if (mergedErrors.value.length) return "error";
+			if (mergedWarnings.value.length) return "warning";
+			if (props.hasFeedback && meta.validated) return "success";
+			return "";
+		});
+		provide(formItemInputContextKey, {
+			status: mergedStatus,
+			id: fieldId,
+			onFieldChange,
+			onFieldBlur,
+			isFormItemInput: true
+		});
+		const entity = {
+			namePath: () => namePath.value,
+			rules: getMergedRules,
+			validateRules: validateRulesInner,
+			clearValidate,
+			resetField,
+			getMeta: () => ({
+				...meta,
+				errors: errors.value,
+				warnings: warnings.value
+			}),
+			setFieldState: (state) => {
+				validateId += 1;
+				if (state.errors) errors.value = state.errors;
+				if (state.warnings) warnings.value = state.warnings;
+				if (state.touched !== void 0) meta.touched = state.touched;
+				if (state.validating !== void 0) meta.validating = state.validating;
+				if (state.validated !== void 0) meta.validated = state.validated;
+			},
+			getElement: () => rootRef.value ?? (fieldId.value && typeof document !== "undefined" ? document.getElementById(fieldId.value) ?? void 0 : void 0),
+			getId: () => fieldId.value
+		};
+		form?.addField(entity);
+		onBeforeUnmount(() => {
+			unmounted = true;
+			validateId += 1;
+			cancelDebounce?.();
+			form?.removeField(entity);
+			parentItem?.remove(itemKey);
+		});
+		const mergedLayout = computed(() => props.layout ?? form?.props.layout ?? "horizontal");
+		const mergedLabelAlign = computed(() => {
+			const align = props.labelAlign ?? form?.props.labelAlign ?? "start";
+			return align === "right" || align === "end" ? "end" : "start";
+		});
+		const mergedContentAlign = computed(() => props.contentAlign ?? form?.props.contentAlign ?? "start");
+		const mergedColon = computed(() => (props.colon ?? form?.props.colon ?? false) && mergedLayout.value === "horizontal");
+		const mergedLabelWidth = computed(() => addUnit(props.labelWidth ?? form?.props.labelWidth));
+		const requiredMark = computed(() => form?.props.requiredMark ?? true);
+		const hasLabel = computed(() => !!slots.label || isRenderable(props.label));
+		const hasHelp = computed(() => !!slots.help || isRenderable(props.help));
+		const hasExtra = computed(() => !!slots.extra || isRenderable(props.extra));
+		const showArrow = computed(() => !!slots.arrow || (props.arrow === "" ? true : !!(props.arrow ?? props.clickable)));
+		const customArrow = computed(() => props.arrow === true || props.arrow === "" || props.arrow === void 0 ? void 0 : props.arrow);
+		const showExplain = computed(() => hasHelp.value || mergedErrors.value.length > 0 || mergedWarnings.value.length > 0);
+		const feedbackIcon = computed(() => {
+			if (!props.hasFeedback) return void 0;
+			switch (mergedStatus.value) {
+				case "success": return CheckCircleFilled;
+				case "error": return CloseCircleFilled;
+				case "warning": return ExclamationCircleFilled;
+				case "validating": return Spinner_default;
+				default: return;
+			}
+		});
+		const classNames = computed(() => [
+			"am-form-item",
+			`am-form-item-${mergedLayout.value}`,
+			{
+				"am-form-item-standalone": !form,
+				"am-form-item-hidden": props.hidden,
+				"am-form-item-required": isRequired.value,
+				"am-form-item-clickable": props.clickable && !formDisabled.value,
+				"am-form-item-label-wrap": form?.props.labelWrap,
+				"am-form-item-content-end": mergedContentAlign.value === "end",
+				"am-form-item-has-feedback": props.hasFeedback,
+				[`am-form-item-has-${mergedStatus.value}`]: !!mergedStatus.value
+			},
+			form?.props.classes?.item,
+			props.rootClass,
+			props.classes?.root
+		]);
+		function handleClick(event) {
+			if (props.clickable && formDisabled.value) return;
+			emit("click", event);
+		}
+		__expose({
+			validate: (options) => validateRulesInner(options).then(() => {}),
+			clearValidate,
+			resetField,
+			get nativeElement() {
+				return rootRef.value;
+			}
+		});
+		return (_ctx, _cache) => {
+			return __props.noStyle ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : (openBlock(), createElementBlock("div", mergeProps({
+				key: 1,
+				ref_key: "rootRef",
+				ref: rootRef
+			}, _ctx.$attrs, {
+				class: classNames.value,
+				style: [unref(form)?.props.styles?.item, __props.styles?.root],
+				onClick: handleClick
+			}), [hasLabel.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["am-form-item-label", [
+					{ "am-form-item-label-end": mergedLabelAlign.value === "end" },
+					unref(form)?.props.classes?.label,
+					__props.classes?.label
+				]]),
+				style: normalizeStyle([
+					mergedLayout.value === "horizontal" && mergedLabelWidth.value ? { width: mergedLabelWidth.value } : void 0,
+					unref(form)?.props.styles?.label,
+					__props.styles?.label
+				])
+			}, [createElementVNode("label", {
+				for: fieldId.value,
+				class: normalizeClass({ "am-form-item-colon": mergedColon.value })
+			}, [
+				isRequired.value && requiredMark.value === true ? (openBlock(), createElementBlock("span", _hoisted_2, "*")) : createCommentVNode("", true),
+				createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "label", {}, () => [createVNode(unref(RenderNode_default), { node: __props.label }, null, 8, ["node"])])]),
+				!isRequired.value && requiredMark.value === "optional" ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(unref(locale).optional), 1)) : createCommentVNode("", true)
+			], 10, _hoisted_1)], 6)) : createCommentVNode("", true), createElementVNode("div", _hoisted_5, [
+				createElementVNode("div", _hoisted_6, [
+					createElementVNode("div", {
+						class: normalizeClass(["am-form-item-content", [unref(form)?.props.classes?.content, __props.classes?.content]]),
+						style: normalizeStyle([unref(form)?.props.styles?.content, __props.styles?.content])
+					}, [renderSlot(_ctx.$slots, "default")], 6),
+					feedbackIcon.value ? (openBlock(), createElementBlock("span", _hoisted_7, [(openBlock(), createBlock(resolveDynamicComponent(feedbackIcon.value)))])) : createCommentVNode("", true),
+					showArrow.value ? (openBlock(), createElementBlock("span", _hoisted_8, [renderSlot(_ctx.$slots, "arrow", {}, () => [customArrow.value !== void 0 ? (openBlock(), createBlock(unref(RenderNode_default), {
+						key: 0,
+						node: customArrow.value
+					}, null, 8, ["node"])) : (openBlock(), createBlock(unref(RightOutlined), { key: 1 }))])])) : createCommentVNode("", true)
+				]),
+				showExplain.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["am-form-item-explain", [unref(form)?.props.classes?.help, __props.classes?.help]]),
+					style: normalizeStyle([unref(form)?.props.styles?.help, __props.styles?.help]),
+					role: "alert"
+				}, [hasHelp.value ? renderSlot(_ctx.$slots, "help", {}, () => [createVNode(unref(RenderNode_default), { node: __props.help }, null, 8, ["node"])], void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(mergedErrors.value, (error, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: `error-${index}`,
+						class: "am-form-item-explain-error"
+					}, toDisplayString(error), 1);
+				}), 128)), (openBlock(true), createElementBlock(Fragment, null, renderList(mergedWarnings.value, (warning, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: `warning-${index}`,
+						class: "am-form-item-explain-warning"
+					}, toDisplayString(warning), 1);
+				}), 128))], 64))], 6)) : createCommentVNode("", true),
+				hasExtra.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(["am-form-item-extra", [unref(form)?.props.classes?.extra, __props.classes?.extra]]),
+					style: normalizeStyle([unref(form)?.props.styles?.extra, __props.styles?.extra])
+				}, [renderSlot(_ctx.$slots, "extra", {}, () => [createVNode(unref(RenderNode_default), { node: __props.extra }, null, 8, ["node"])])], 6)) : createCommentVNode("", true)
+			])], 16));
+		};
+	}
+});
+export { FormItem_vue_vue_type_script_setup_true_lang_default as default };

package/dist/form/context.d.ts

@@ -0,0 +1,32 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+import type { ValidateStatus } from '../_util/type';
+/**
+ * Contract between FormItem and any data-entry component rendered inside it.
+ * Data-entry components call `onFieldChange()` after their value changed and
+ * `onFieldBlur()` on blur so FormItem can run the matching validation trigger.
+ */
+export interface FormItemInputContext {
+    /** validate status of the wrapping FormItem (`''` when none) */
+    status: ComputedRef<ValidateStatus>;
+    /** id for the native control, generated from the field name */
+    id: ComputedRef<string | undefined>;
+    onFieldChange: () => void;
+    onFieldBlur: () => void;
+    /** true when rendered inside a FormItem */
+    isFormItemInput: boolean;
+}
+export declare const formItemInputContextKey: InjectionKey<FormItemInputContext>;
+export declare function useFormItemInputContext(): FormItemInputContext;
+/** `props.status` > FormItem validate status. Returns `'error' | 'warning' | ...`. */
+export declare function useMergedStatus(status: () => ValidateStatus | undefined): ComputedRef<ValidateStatus>;
+export type Variant = 'outlined' | 'filled' | 'borderless' | 'underlined';
+/**
+ * Provided by Form (`variant` prop). Fields inside a Form default to `borderless`
+ * because FormItem already draws the cell; standalone fields default to `outlined`.
+ */
+export declare const variantContextKey: InjectionKey<ComputedRef<Variant | undefined>>;
+/**
+ * `props.variant` > `'outlined'` inside a Space.Compact (a seamless group needs borders,
+ * even in a Form whose default is borderless) > Form `variant` > `'outlined'`.
+ */
+export declare function useVariant(variant: () => Variant | undefined): ComputedRef<Variant>;

package/dist/form/context.js

@@ -0,0 +1,34 @@
+import { compactItemContextKey } from "../_base/compact.js";
+import { computed, inject } from "vue";
+// src/form/context.ts
+var formItemInputContextKey = Symbol("AmFormItemInputContext");
+var defaultContext = {
+	status: computed(() => ""),
+	id: computed(() => void 0),
+	onFieldChange: () => {},
+	onFieldBlur: () => {},
+	isFormItemInput: false
+};
+function useFormItemInputContext() {
+	return inject(formItemInputContextKey, defaultContext);
+}
+/** `props.status` > FormItem validate status. Returns `'error' | 'warning' | ...`. */
+function useMergedStatus(status) {
+	const ctx = useFormItemInputContext();
+	return computed(() => status() ?? ctx.status.value);
+}
+/**
+* Provided by Form (`variant` prop). Fields inside a Form default to `borderless`
+* because FormItem already draws the cell; standalone fields default to `outlined`.
+*/
+var variantContextKey = Symbol("AmVariantContext");
+/**
+* `props.variant` > `'outlined'` inside a Space.Compact (a seamless group needs borders,
+* even in a Form whose default is borderless) > Form `variant` > `'outlined'`.
+*/
+function useVariant(variant) {
+	const formVariant = inject(variantContextKey, void 0);
+	const compact = inject(compactItemContextKey, null);
+	return computed(() => variant() ?? (compact ? "outlined" : formVariant?.value) ?? "outlined");
+}
+export { formItemInputContextKey, useFormItemInputContext, useMergedStatus, useVariant, variantContextKey };