birdpaper-ui/lib/form/src/form-item.js

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

"use strict";
const vue = require("vue");
const types = require("./types.js");
const _formItem = /* @__PURE__ */ vue.defineComponent({
  name: "FormItem",
  props: {
    label: {
      type: String
    },
    field: {
      type: String
    },
    rules: {
      type: Array,
      default: () => []
    },
    labelCol: {
      type: Number,
      default: 4
    },
    wrapperCol: {
      type: Number,
      default: 20
    },
    gutter: {
      type: Number,
      default: 4
    }
  },
  setup(props, {
    slots,
    expose
  }) {
    const name = "bp-form-item";
    const messageVisible = vue.ref(false);
    const ctx = vue.ref();
    const message = vue.ref("");
    ctx.value = vue.inject(types.FormInjectionKey, null);
    const formItemCls = vue.computed(() => {
      let clsName = [name];
      if (messageVisible.value)
        clsName.push(`${name}-has-message`);
      return clsName;
    });
    const wrapperCls = vue.computed(() => {
      let clsName = [`${name}-wrapper`];
      return clsName;
    });
    const isRequire = vue.computed(() => {
      return props.rules.some((item) => {
        return item.required;
      });
    });
    const handleError = (msg) => {
      message.value = msg;
      messageVisible.value = true;
    };
    const clearError = () => {
      if (!messageVisible.value)
        return;
      messageVisible.value = false;
      message.value = "";
    };
    const resetFields = () => {
      ctx.value.model[props.field] = "";
      clearError();
    };
    vue.watch(() => ctx.value.model[props.field], () => {
      messageVisible.value && clearError();
    });
    const render = () => {
      return vue.createVNode(vue.resolveComponent("bp-row"), {
        "class": formItemCls.value,
        "gutter": props.gutter
      }, {
        default: () => [vue.withDirectives(vue.createVNode(vue.resolveComponent("bp-col"), {
          "span": props.labelCol,
          "class": `${name}-label`
        }, {
          default: () => [isRequire.value ? vue.createVNode("span", {
            "class": "label-asterisk"
          }, null) : "", vue.createVNode("label", null, [props.label])]
        }), [[vue.vShow, props.label || ctx.value.layout !== "inline"]]), vue.createVNode(vue.resolveComponent("bp-col"), {
          "span": props.wrapperCol,
          "class": wrapperCls.value
        }, {
          default: () => {
            var _a;
            return [(_a = slots.default) == null ? void 0 : _a.call(slots), messageVisible.value ? vue.createVNode(vue.Transition, {
              "name": "form-error",
              "appear": true
            }, {
              default: () => [vue.withDirectives(vue.createVNode("div", {
                "class": `${name}-message`
              }, [message.value]), [[vue.vShow, messageVisible.value]])]
            }) : null];
          }
        })]
      });
    };
    expose({
      handleError,
      clearError,
      resetFields
    });
    return render;
  }
});
module.exports = _formItem;