@cqmcui/cqmcui/dist/packages/_es/Form.js

轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { g as isObject, h as getPropByPath, f as isPromise, c as createComponent } from "./component-81a4c1d0.js";
import { computed, reactive, provide, watch, resolveComponent, openBlock, createElementBlock, withModifiers, createVNode, withCtx, renderSlot } from "vue";
import CellGroup from "./CellGroup.js";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const component = (components) => {
  return {
    props: {
      modelValue: {
        type: Object,
        default: {}
      },
      rules: {
        type: Object,
        default: {}
      }
    },
    components,
    emits: ["validate"],
    setup(props, { emit, slots }) {
      const formErrorTip = computed(() => reactive({}));
      provide("formErrorTip", formErrorTip);
      const clearErrorTips = () => {
        Object.keys(formErrorTip.value).forEach((item) => {
          formErrorTip.value[item] = "";
        });
      };
      const reset = () => {
        clearErrorTips();
      };
      watch(
        () => props.modelValue,
        () => {
          clearErrorTips();
        },
        { immediate: true }
      );
      const findFormItem = (vnodes) => {
        let task = [];
        vnodes.forEach((vnode) => {
          var _a, _b, _c, _d;
          let type = vnode.type;
          type = type.name || type;
          if (type == "cqmc-form-item" || (type == null ? void 0 : type.toString().endsWith("form-item"))) {
            task.push({
              prop: (_a = vnode.props) == null ? void 0 : _a["prop"],
              rules: ((_b = vnode.props) == null ? void 0 : _b["rules"]) || []
            });
          } else if (Array.isArray(vnode.children) && ((_c = vnode.children) == null ? void 0 : _c.length)) {
            task = task.concat(findFormItem(vnode.children));
          } else if (isObject(vnode.children) && Object.keys(vnode.children)) {
            if ((_d = vnode.children) == null ? void 0 : _d.default) {
              vnode.children = vnode.children.default();
              task = task.concat(findFormItem(vnode.children));
            }
          }
        });
        return task;
      };
      const tipMessage = (errorMsg) => {
        if (errorMsg.message) {
          emit("validate", errorMsg);
        }
        formErrorTip.value[errorMsg.prop] = errorMsg.message;
      };
      const checkRule = (item) => {
        const { rules, prop } = item;
        const _Promise = (errorMsg) => {
          return new Promise((resolve, reject) => {
            try {
              tipMessage(errorMsg);
              resolve(errorMsg);
            } catch (error) {
              reject(error);
            }
          });
        };
        if (!prop) {
          console.warn("[NutUI] <FormItem> 使用 rules 校验规则时 , 必须设置 prop 参数");
        }
        const value = getPropByPath(props.modelValue, prop || "");
        tipMessage({ prop, message: "" });
        const formRules = props.rules || {};
        const _rules = [...(formRules == null ? void 0 : formRules[prop]) || [], ...rules];
        while (_rules.length) {
          const rule = _rules.shift();
          const { validator, ...ruleWithoutValidator } = rule;
          const { required, regex, message } = ruleWithoutValidator;
          const errorMsg = { prop, message };
          if (required) {
            if (!value && value !== 0) {
              return _Promise(errorMsg);
            }
          }
          if (regex && !regex.test(String(value))) {
            return _Promise(errorMsg);
          }
          if (validator) {
            const result = validator(value, ruleWithoutValidator);
            if (isPromise(result)) {
              return new Promise((r, j) => {
                result.then((res) => {
                  if (!res) {
                    tipMessage(errorMsg);
                    r(errorMsg);
                  } else {
                    r(true);
                  }
                }).catch((e) => j(e));
              });
            } else {
              if (!result) {
                return _Promise(errorMsg);
              }
            }
          }
        }
        return Promise.resolve(true);
      };
      const validate = (customProp = "") => {
        return new Promise((resolve, reject) => {
          try {
            const task = findFormItem(slots.default());
            const errors = task.map((item) => {
              if (customProp) {
                if (customProp == item.prop) {
                  return checkRule(item);
                } else {
                  return Promise.resolve(true);
                }
              } else {
                return checkRule(item);
              }
            });
            Promise.all(errors).then((errorRes) => {
              errorRes = errorRes.filter((item) => item != true);
              const res = { valid: true, errors: [] };
              if (errorRes.length) {
                res.valid = false;
                res.errors = errorRes;
              }
              resolve(res);
            });
          } catch (error) {
            reject(error);
          }
        });
      };
      const submit = () => {
        validate();
        return false;
      };
      return { validate, reset, submit, formErrorTip };
    }
  };
};
const { create } = createComponent("form");
const _sfc_main = create(
  component({
    [CellGroup.name]: CellGroup
  })
);
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_nut_cell_group = resolveComponent("cqmc-cell-group");
  return openBlock(), createElementBlock("form", {
    class: "cqmc-form",
    action: "#",
    onSubmit: _cache[0] || (_cache[0] = withModifiers(() => false, ["prevent"]))
  }, [
    createVNode(_component_nut_cell_group, null, {
      default: withCtx(() => [
        renderSlot(_ctx.$slots, "default")
      ]),
      _: 3
    })
  ], 32);
}
const Form = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  Form as default
};