double-ui-vue/es/form/index.js

基于vue框架的ui库

import { defineComponent, reactive, provide, ref, createVNode, toRaw, inject, createTextVNode } from "vue";
var style = "";
var Ae = (e) => /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(e), I = Ae;
var Re = (e) => /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(e), v = Re;
var A = (e) => /^(?:\d+|[a-zA-Z]+|[!@#$%^&*`()\-+=_?.,~]+)$/.test(e), R = (e) => /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*`()\-+=_?.,~]+$)[a-zA-Z\d!@#$%^&*`()\-+=_?.,~]+$/.test(e), N = (e) => /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*`()\-+=_?.,~]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*`()\-+=_?.,~]+$)(?![\d!@#$%^&*`()\-+=_?.,~]+$)[a-zA-Z\d!@#$%^&*`()\-+=_?.,~]+$/.test(e);
var Ne = { checkPhoneNumber: I, checkEmail: v, checkPassword: A, checkPasswordBetter: R, checkPasswordBest: N }, je = ({ rule: e, value: t, success: r, fail: o, confirmValue: n = "" }) => {
  var _a;
  let { validate: a, check: i = "", message: s = "" } = e;
  if (a)
    return typeof a == "function" ? a(t, n) ? (r == null ? void 0 : r(t), true) : (o == null ? void 0 : o(t, s), false) : (console.error("The validate field must be a function!"), false);
  if (!i)
    return console.error("The check field cannot be empty!"), false;
  if (i === "required")
    return t ? (r == null ? void 0 : r(t), true) : (o == null ? void 0 : o(t, s), false);
  let l = i.split("");
  l[0] = l[0].toUpperCase();
  let c = l.join("");
  return ((_a = Ne[`check${c}`]) == null ? void 0 : _a.call(Ne, t)) ? (r == null ? void 0 : r(t), true) : (o == null ? void 0 : o(t, s), false);
}, Se = ({ rules: e, value: t, success: r, fail: o, confirmValue: n }) => {
  let a = (e == null ? void 0 : e.length) || 0;
  for (let i = 0; i < a; i++)
    if (!je({ rule: e[i], value: t, success: r, fail: o, confirmValue: n }))
      return false;
  return true;
}, Pe = Se;
var st = (e) => JSON.stringify(e) === "{}", H = st;
const Form = defineComponent({
  name: "DForm",
  props: {
    name: {
      type: String,
      default: "dui-form"
    }
  },
  emits: ["submit", "reset"],
  setup(props, {
    emit,
    slots
  }) {
    const errRules = reactive({});
    const params = reactive({});
    const setRules = (name, options) => {
      errRules[name] = options;
    };
    provide("setRules", setRules);
    const resetStatus = ref(false);
    provide("resetStatus", resetStatus);
    const submit = (e) => {
      e.preventDefault();
      const {
        elements
      } = e.target;
      const els = Array.from(elements).filter((tag) => tag.tagName === "INPUT");
      const elsLen = els.length;
      els.forEach((tag) => {
        const {
          name,
          value
        } = tag;
        params[name] = value;
      });
      new Promise((resolve) => {
        const statusArr = [];
        Object.keys(params).forEach((name) => {
          statusArr.push(errRules[name].check(params));
        });
        if (statusArr.length === elsLen && statusArr.every((d) => d === true)) {
          resolve(toRaw(params));
        }
      }).then((res) => {
        emit("submit", res);
      });
    };
    const reset = () => {
      if (!H(toRaw(errRules))) {
        Object.values(errRules).forEach((d) => {
          d.resetErrText();
        });
      }
      emit("reset");
    };
    return () => createVNode("form", {
      "class": "d-form",
      "name": props.name,
      "onSubmit": submit,
      "onReset": reset
    }, [slots.default && slots.default()]);
  }
});
const FormItem = defineComponent({
  name: "FormItem",
  props: {
    label: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    confirmName: {
      type: String,
      default: ""
    },
    classes: {
      type: String,
      default: ""
    },
    required: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: []
    }
  },
  setup(props, {
    slots
  }) {
    provide("name", props.name);
    const formErrText = ref("");
    provide("formErrText", formErrText);
    const setRules = inject("setRules");
    const success = () => {
      formErrText.value = "";
    };
    const fail = (value, message) => {
      formErrText.value = message;
    };
    const checkValue = (params) => {
      const {
        name,
        confirmName,
        rules
      } = props;
      const value = params[name];
      const confirmValue = params[confirmName];
      return Pe({
        rules,
        value,
        success,
        fail,
        confirmValue
      });
    };
    if (props.name && props.rules && props.rules.length) {
      setRules(props.name, {
        rules: props.rules,
        confirmName: props.confirmName,
        check: checkValue,
        resetErrText() {
          formErrText.value = "";
        }
      });
    }
    return () => createVNode("div", {
      "class": ["d-form-item", props.classes]
    }, [props.label && createVNode("section", {
      "class": "d-form-item-label"
    }, [props.required && createVNode("i", {
      "class": "d-form-item-required"
    }, [createTextVNode("*")]), createVNode("span", {
      "class": "d-form-item-title"
    }, [props.label])]), slots.default && slots.default()]);
  }
});
Form.Item = FormItem;
export { Form as default };