@fangzhongya/fang-ui 0.1.86 → 0.1.89

package/dist/components/forms/src/setup.d.ts

@@ -1,5 +1,5 @@
 import { DataProps } from './data';
-import { UseCssNameReturn } from '../../../hooks/cssname/index';
+import { UseCssNameReturn } from '../../../../hooks/cssname/index';
 import { CSSProperties, Ref, WritableComputedRef, ComputedRef } from 'vue';
 type Emit = (...args: any[]) => void;
 /**
@@ -14,7 +14,7 @@ type Emit = (...args: any[]) => void;
  */
 export declare function setUp(props: DataProps, emit: Emit, cs: UseCssNameReturn, refForm: any, getLocale: Function): {
     dataRules: Ref<ObjAny, ObjAny>;
-    dataForm: WritableComputedRef<Record<string, any> | undefined, Record<string, any> | undefined> | Ref<Record<string, any>, Record<string, any>>;
+    dataForm: Ref<ObjAny, ObjAny> | WritableComputedRef<Record<string, any> | undefined, Record<string, any> | undefined>;
     buts: ComputedRef<ObjAny[]>;
     styles: ComputedRef<CSSProperties>;
     setStyles: (v: ListObj) => string | {

package/dist/components/forms/src/setup.js

@@ -1,233 +1,233 @@
-import { dataHandle } from "./data.js";
+import { getFormRule, getListObjValue, setFormDefaultValue } from "../../common/use.js";
+import { useCompons } from "../../../hooks/compons/index.js";
 import { provides } from "../../formset/common/config.js";
-import { setPlaceholder, getRule } from "./util.js";
+import { dataHandle } from "./data.js";
+import { getRule, setPlaceholder } from "./util.js";
+import FormsItems from "../../forms-items/index.js";
+import { computed, isProxy, provide, ref, watch } from "vue";
 import { setObjStyle } from "@fangzhongya/utils/css/setObjStyle";
-import { setFormDefaultValue, getListObjValue, getFormRule } from "../../common/use.js";
-import { computed, provide, isProxy, ref, watch } from "vue";
-import { useCompons } from "../../../hooks/compons/index.js";
-import { FormsItems } from "../../forms-items/index.js";
-const Components = {
-  Items: FormsItems
-};
+//#region packages/components/packages/formset/forms/src/setup.ts
+var Components = { Items: FormsItems };
+/**
+* 初始化表单相关配置与逻辑处理
+*
+* @param props 表单组件的属性对象，包含表单配置、列表项等信息
+* @param emit 事件发射器，用于触发自定义事件（如 submit、cancel 等）
+* @param cs CSS 类名管理工具返回值，用于动态设置样式类名
+* @param refForm 表单引用对象，通常指向 el-form 或其他表单实例
+* @param getLocale 国际化文本获取函数，根据 key 获取对应语言的内容
+* @returns 返回一系列供模板或其他模块使用的响应式数据和方法
+*/
 function setUp(props, emit, cs, refForm, getLocale) {
-  const buts = computed(() => {
-    if (props.buts === void 0) {
-      return [
-        {
-          _id: "2",
-          label: getLocale("close")
-        },
-        {
-          _id: "1",
-          type: "primary",
-          label: getLocale("form.confirm")
-        }
-      ];
-    } else {
-      return props.buts || [];
-    }
-  });
-  useCompons(provides.compons, props, Components);
-  provide(provides.form, props);
-  const defaultValue = {};
-  const getDataForm = () => {
-    if (props.modelValue) {
-      if (isProxy(props.modelValue)) {
-        return computed({
-          get() {
-            return props.modelValue;
-          },
-          set(value) {
-            emit("update:modelValue", value);
-          }
-        });
-      } else {
-        return ref(props.modelValue);
-      }
-    } else {
-      return ref(defaultValue);
-    }
-  };
-  const dataForm = getDataForm();
-  const styles = computed(() => {
-    return cs.vdo({
-      "inline-right": props.inlineRight,
-      "item-bottom": props.query ? "0px" : props.itemBottom
-    });
-  });
-  function setStyles(v) {
-    const style = v.style || {};
-    let vst;
-    if (typeof style === "function") {
-      vst = style(v, dataForm.value) || {};
-    } else {
-      vst = style;
-    }
-    const obj = {};
-    const minWidth = v.minWidth ?? props.rowMinWidth;
-    const width = v.width ?? props.rowWidth;
-    if (width) {
-      obj.width = width;
-    } else if (props.column > 1) {
-      obj.width = Number((100 / props.column).toFixed(2)) + "%";
-    }
-    if (minWidth) {
-      obj.minWidth = minWidth;
-    }
-    if (v.whole) {
-      obj.display = "block";
-      obj.width = "100%";
-    }
-    return setObjStyle(vst, obj);
-  }
-  const setListValue = (arr, listobj, callback) => {
-    arr == null ? void 0 : arr.forEach((obj) => {
-      if (listobj) {
-        obj.__father = obj.__father ?? listobj;
-      }
-      if (obj.children) {
-        setListValue(obj.children, obj, callback);
-      }
-      setFormDefaultValue(obj, dataForm.value);
-      if (callback) {
-        callback(obj);
-      }
-    });
-  };
-  function setReset() {
-    setListValue(props.list);
-  }
-  function getListValue() {
-    const value = {};
-    const data = dataForm.value;
-    const getValue = (arr, indexs) => {
-      arr == null ? void 0 : arr.forEach((obj, index) => {
-        const indss = [...indexs, index];
-        if (obj.prop) {
-          getListObjValue(value, obj, data, indss);
-        }
-        if (obj.children) {
-          getValue(obj.children, indss);
-        }
-      });
-    };
-    getValue(props.list, []);
-    return value;
-  }
-  const triggerMap = {
-    blur: getLocale("form.import"),
-    change: getLocale("form.select"),
-    verif: getLocale("form.verif")
-  };
-  function getRules() {
-    const rules = {};
-    setListValue(props.list, void 0, (obj) => {
-      var _a;
-      obj.config = obj.config ?? {};
-      if (((_a = obj.config) == null ? void 0 : _a.clearable) === void 0) {
-        obj.config.clearable = true;
-      }
-      if (!obj.rule) {
-        setPlaceholder(obj, triggerMap);
-      }
-      if (obj.prop) {
-        const p = getFormRule(obj) ?? obj.prop;
-        obj.__prop = p;
-        if (obj.rules) {
-          rules[p] = obj.rules;
-        } else if (obj.rule) {
-          rules[p] = getRule(obj, dataForm, refForm, triggerMap);
-        } else {
-          rules[p] = [];
-        }
-      }
-    });
-    return rules;
-  }
-  const dataRules = ref(getRules());
-  watch([() => props.list, () => props.list.length], () => {
-    dataRules.value = getRules();
-  });
-  function validate() {
-    return new Promise((resolve, reject) => {
-      if (refForm.value) {
-        refForm.value.validate((valid) => {
-          if (valid) {
-            resolve(dataForm.value);
-          } else {
-            reject(new Error(getLocale("form.verif")));
-          }
-        });
-      } else {
-        reject(new Error(getLocale("form.verif")));
-      }
-    });
-  }
-  function submitForm(callback) {
-    validate().then((obj) => {
-      if (props.ajax) {
-        dataHandle(props, obj).then((list) => {
-          if (callback) {
-            callback(list, true);
-          }
-          emit("submit", list, true);
-        }).catch((error) => {
-          if (callback) {
-            callback(error, false);
-          }
-          emit("submit", error, false);
-        });
-      } else {
-        if (callback) {
-          callback(obj);
-        }
-        emit("submit", obj, true, true);
-      }
-    }).catch(() => {
-    });
-  }
-  function resetFields() {
-    var _a;
-    (_a = refForm.value) == null ? void 0 : _a.resetFields();
-    setReset();
-  }
-  function validateField(...arr) {
-    var _a;
-    (_a = refForm.value) == null ? void 0 : _a.validateField(...arr);
-  }
-  function closeForm() {
-    resetFields();
-    emit("cancel", dataForm.value);
-  }
-  function onClickButs(obj, index, event) {
-    if (obj._id == 1) {
-      submitForm();
-    } else if (obj._id == 2) {
-      closeForm();
-    } else if (obj.click) {
-      obj.click(obj, dataForm.value, index, event);
-    } else {
-      emit("buts", obj, dataForm.value, index, event);
-    }
-  }
-  if (props.query) {
-    emit("submit", dataForm.value);
-  }
-  return {
-    dataRules,
-    dataForm,
-    buts,
-    styles,
-    setStyles,
-    onClickButs,
-    submitForm,
-    validateField,
-    resetFields,
-    closeForm,
-    validate,
-    getListValue
-  };
+	/**
+	* 计算按钮组配置，默认提供“关闭”和“确认”两个按钮
+	*/
+	const buts = computed(() => {
+		if (props.buts === void 0) return [{
+			_id: "2",
+			label: getLocale("close")
+		}, {
+			_id: "1",
+			type: "primary",
+			label: getLocale("form.confirm")
+		}];
+		else return props.buts || [];
+	});
+	useCompons(provides.compons, props, Components);
+	provide(provides.form, props);
+	const defaultValue = {};
+	/**
+	* 获取表单绑定的数据模型，支持响应式更新
+	* 若 modelValue 是代理对象则创建计算属性进行双向绑定；否则直接使用 ref 包装
+	*/
+	const getDataForm = () => {
+		if (props.modelValue) if (isProxy(props.modelValue)) return computed({
+			get() {
+				return props.modelValue;
+			},
+			set(value) {
+				emit("update:modelValue", value);
+			}
+		});
+		else return ref(props.modelValue);
+		else return ref(defaultValue);
+	};
+	const dataForm = getDataForm();
+	/**
+	* 动态计算表单容器的样式
+	*/
+	const styles = computed(() => {
+		return cs.vdo({
+			"inline-right": props.inlineRight,
+			"item-bottom": props.query ? "0px" : props.itemBottom
+		});
+	});
+	/**
+	* 根据字段配置动态设置其样式规则
+	* 支持宽度、最小宽度及整行显示等功能
+	*
+	* @param v 字段配置对象
+	* @returns 处理后的样式对象
+	*/
+	function setStyles(v) {
+		const style = v.style || {};
+		let vst;
+		if (typeof style === "function") vst = style(v, dataForm.value) || {};
+		else vst = style;
+		const obj = {};
+		const minWidth = v.minWidth ?? props.rowMinWidth;
+		const width = v.width ?? props.rowWidth;
+		if (width) obj.width = width;
+		else if (props.column > 1) obj.width = Number((100 / props.column).toFixed(2)) + "%";
+		if (minWidth) obj.minWidth = minWidth;
+		if (v.whole) {
+			obj.display = "block";
+			obj.width = "100%";
+		}
+		return setObjStyle(vst, obj);
+	}
+	const setListValue = (arr, listobj, callback) => {
+		arr?.forEach((obj) => {
+			if (listobj) obj.__father = obj.__father ?? listobj;
+			if (obj.children) setListValue(obj.children, obj, callback);
+			setFormDefaultValue(obj, dataForm.value);
+			if (callback) callback(obj);
+		});
+	};
+	/**
+	* 重置表单项默认值
+	*/
+	function setReset() {
+		setListValue(props.list);
+	}
+	function getListValue() {
+		const value = {};
+		const data = dataForm.value;
+		const getValue = (arr, indexs) => {
+			arr?.forEach((obj, index) => {
+				const indss = [...indexs, index];
+				if (obj.prop) getListObjValue(value, obj, data, indss);
+				if (obj.children) getValue(obj.children, indss);
+			});
+		};
+		getValue(props.list, []);
+		return value;
+	}
+	const triggerMap = {
+		blur: getLocale("form.import"),
+		change: getLocale("form.select"),
+		verif: getLocale("form.verif")
+	};
+	/**
+	* 构建表单校验规则集合
+	* 遍历所有字段，并为其生成相应的验证规则
+	*
+	* @returns 表单字段与其校验规则组成的对象
+	*/
+	function getRules() {
+		const rules = {};
+		setListValue(props.list, void 0, (obj) => {
+			obj.config = obj.config ?? {};
+			if (obj.config?.clearable === void 0) obj.config.clearable = true;
+			if (!obj.rule) setPlaceholder(obj, triggerMap);
+			if (obj.prop) {
+				const p = getFormRule(obj) ?? obj.prop;
+				obj.__prop = p;
+				if (obj.rules) rules[p] = obj.rules;
+				else if (obj.rule) rules[p] = getRule(obj, dataForm, refForm, triggerMap);
+				else rules[p] = [];
+			}
+		});
+		return rules;
+	}
+	const dataRules = ref(getRules());
+	watch([() => props.list, () => props.list.length], () => {
+		dataRules.value = getRules();
+	});
+	/**
+	* 执行整体表单校验
+	*
+	* @returns Promise 对象，成功时携带当前表单数据，失败时抛出错误
+	*/
+	function validate() {
+		return new Promise((resolve, reject) => {
+			if (refForm.value) refForm.value.validate((valid) => {
+				if (valid) resolve(dataForm.value);
+				else reject(new Error(getLocale("form.verif")));
+			});
+			else reject(new Error(getLocale("form.verif")));
+		});
+	}
+	/**
+	* 提交表单操作，先执行校验再调用接口或触发事件
+	*
+	* @param callback 可选回调函数，在提交前后可做额外处理
+	*/
+	function submitForm(callback) {
+		validate().then((obj) => {
+			if (props.ajax) dataHandle(props, obj).then((list) => {
+				if (callback) callback(list, true);
+				emit("submit", list, true);
+			}).catch((error) => {
+				if (callback) callback(error, false);
+				emit("submit", error, false);
+			});
+			else {
+				if (callback) callback(obj);
+				emit("submit", obj, true, true);
+			}
+		}).catch(() => {});
+	}
+	/**
+	* 重置表单字段到初始状态
+	*/
+	function resetFields() {
+		refForm.value?.resetFields();
+		setReset();
+	}
+	/**
+	* 校验指定字段
+	*
+	* @param arr 要校验的字段名称数组
+	*/
+	function validateField(...arr) {
+		refForm.value?.validateField(...arr);
+	}
+	/**
+	* 关闭表单并重置字段
+	*/
+	function closeForm() {
+		resetFields();
+		emit("cancel", dataForm.value);
+	}
+	/**
+	* 按钮点击统一处理入口
+	*
+	* @param obj 按钮配置对象
+	* @param index 按钮在数组中的索引位置
+	* @param event 原始点击事件对象
+	*/
+	function onClickButs(obj, index, event) {
+		if (obj._id == 1) submitForm();
+		else if (obj._id == 2) closeForm();
+		else if (obj.click) obj.click(obj, dataForm.value, index, event);
+		else emit("buts", obj, dataForm.value, index, event);
+	}
+	if (props.query) emit("submit", dataForm.value);
+	return {
+		dataRules,
+		dataForm,
+		buts,
+		styles,
+		setStyles,
+		onClickButs,
+		submitForm,
+		validateField,
+		resetFields,
+		closeForm,
+		validate,
+		getListValue
+	};
 }
-export {
-  setUp
-};
+//#endregion
+export { setUp };