birdpaper-ui/es/form/src/form.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

import { defineComponent, provide, computed, ref, Comment, createVNode, Fragment, h } from "vue";
import { FormInjectionKey } from "./types.js";
import { getAllElements } from "../../utils/dom.js";
import Schema from "async-validator";
import { getValidateInfo } from "./core.js";
const _form = /* @__PURE__ */ defineComponent({
  name: "Form",
  props: {
    model: {
      type: Object,
      default: () => {
      }
    },
    rules: {
      type: Object
    },
    layout: {
      type: String,
      default: "horizontal"
    },
    labelCol: {
      type: Number,
      default: 4
    },
    wrapperCol: {
      type: Number,
      default: 20
    }
  },
  setup(props, {
    slots,
    expose
  }) {
    const name = "bp-form";
    provide(FormInjectionKey, {
      model: props.model,
      layout: props.layout
    });
    const cls = computed(() => {
      let clsName = [name];
      clsName.push(`${name}-${props.layout}`);
      return clsName;
    });
    const formRef = ref();
    const formItemRef = ref({});
    const validate = async (callback) => {
      return new Promise((resove) => {
        const rules = getValidateInfo(props.rules, slots);
        const validator = new Schema(rules || {});
        const defaultCallback = (errors) => {
          if (errors) {
            for (let i = 0; i < errors.length; i++) {
              const {
                field,
                message
              } = errors[i];
              formItemRef.value[field].handleError(message);
              console.warn(`BpForm validate - [ ${field} ]`, message);
            }
            resove(errors);
          }
          resove(void 0);
        };
        validator.validate(props.model, callback || defaultCallback);
      });
    };
    const resetFields = () => {
      for (const key in formItemRef.value) {
        formItemRef.value[key].resetFields();
      }
    };
    const clearValidate = () => {
    };
    const render = () => {
      var _a;
      const children = getAllElements((_a = slots.default) == null ? void 0 : _a.call(slots), true).filter((item) => item.type !== Comment && item.type.name === "BpFormItem");
      return createVNode("form", {
        "ref": formRef,
        "class": cls.value
      }, [children.map((child, index) => {
        const FormItem = Object.assign({}, child);
        return createVNode(Fragment, {
          "key": child.key ?? `item-${index}`
        }, [h(FormItem, {
          gutter: props.layout !== "vertical" ? 4 : 0,
          labelCol: props.layout === "vertical" ? 24 : props.labelCol,
          wrapperCol: props.layout === "vertical" ? 24 : props.wrapperCol,
          ref: (el) => {
            var _a2, _b;
            ((_a2 = child.props) == null ? void 0 : _a2.field) && (formItemRef.value[(_b = child.props) == null ? void 0 : _b.field] = el);
          }
        })]);
      })]);
    };
    expose({
      validate,
      clearValidate,
      resetFields
    });
    return render;
  }
});
export {
  _form as default
};