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

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

import { defineComponent, ref, inject, computed, watch, createVNode, resolveComponent, withDirectives, vShow, Transition } from "vue";
import { FormInjectionKey } from "./types.js";
const _formItem = /* @__PURE__ */ 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 = ref(false);
    const ctx = ref();
    const message = ref("");
    ctx.value = inject(FormInjectionKey, null);
    const formItemCls = computed(() => {
      let clsName = [name];
      if (messageVisible.value)
        clsName.push(`${name}-has-message`);
      return clsName;
    });
    const wrapperCls = computed(() => {
      let clsName = [`${name}-wrapper`];
      return clsName;
    });
    const isRequire = 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();
    };
    watch(() => ctx.value.model[props.field], () => {
      messageVisible.value && clearError();
    });
    const render = () => {
      return createVNode(resolveComponent("bp-row"), {
        "class": formItemCls.value,
        "gutter": props.gutter
      }, {
        default: () => [withDirectives(createVNode(resolveComponent("bp-col"), {
          "span": props.labelCol,
          "class": `${name}-label`
        }, {
          default: () => [isRequire.value ? createVNode("span", {
            "class": "label-asterisk"
          }, null) : "", createVNode("label", null, [props.label])]
        }), [[vShow, props.label || ctx.value.layout !== "inline"]]), createVNode(resolveComponent("bp-col"), {
          "span": props.wrapperCol,
          "class": wrapperCls.value
        }, {
          default: () => {
            var _a;
            return [(_a = slots.default) == null ? void 0 : _a.call(slots), messageVisible.value ? createVNode(Transition, {
              "name": "form-error",
              "appear": true
            }, {
              default: () => [withDirectives(createVNode("div", {
                "class": `${name}-message`
              }, [message.value]), [[vShow, messageVisible.value]])]
            }) : null];
          }
        })]
      });
    };
    expose({
      handleError,
      clearError,
      resetFields
    });
    return render;
  }
});
export {
  _formItem as default
};