layui-vue/es/formItem/index.js

import { w as withInstall } from "../badge/index2.js";
import { defineComponent, inject, ref, computed, watch, onMounted, reactive, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, unref, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
import { S as Schema } from "../_chunks/async-validator/index.js";
var cnValidateMessage = {
  default: "%s\u9A8C\u8BC1\u5931\u8D25",
  required: "%s\u4E0D\u80FD\u4E3A\u7A7A",
  enum: "%s\u4E0D\u5728\u679A\u4E3E%s\u91CC\u9762",
  whitespace: "%s\u4E0D\u80FD\u4E3A\u7A7A",
  date: {
    format: "%s\u65E5\u671F%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u683C\u5F0F\u7684\u65E5\u671F%s",
    parse: "%s\u65E0\u6CD5\u89E3\u6790\u4E3A\u65E5\u671F,%s\u662F\u65E0\u6548\u7684",
    invalid: "%s\u65E5\u671F%s\u662F\u65E0\u6548\u7684"
  },
  types: {
    number: "%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684\u6570\u5B57",
    boolean: "%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684\u5E03\u5C14\u7C7B\u578B",
    method: "%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684\u65B9\u6CD5",
    regexp: "%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684\u6B63\u5219\u8868\u8FBE\u5F0F",
    integer: "%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684\u6574\u578B\u6570\u5B57",
    float: "%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684\u6D6E\u70B9\u5C0F\u6570",
    array: "%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684\u6570\u7EC4",
    object: "%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684\u5BF9\u8C61",
    enum: "%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684\u679A\u4E3E",
    date: "%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684\u65E5\u671F",
    url: "%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684url",
    hex: "%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684\u5341\u516D\u8FDB\u5236",
    email: "%s\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684\u90AE\u7BB1"
  },
  string: {
    len: "%s\u5FC5\u987B\u662F\u957F\u5EA6\u4E3A%s\u4E2A\u5B57\u7B26",
    min: "%s\u6700\u5C0F\u957F\u5EA6\u4E3A%s\u4E2A\u5B57\u7B26",
    max: "%s\u6700\u957F%s\u4E2A\u5B57\u7B26",
    range: "%s\u5B57\u7B26\u957F\u5EA6\u9700\u8981\u5728%s\u548C%s\u4E4B\u95F4"
  },
  number: {
    len: "%s\u957F\u5EA6\u5FC5\u987B\u4E3A%s",
    min: "%s\u5FC5\u987B\u5C0F\u4E8E%s",
    max: "%s\u5FC5\u987B\u5927\u4E8E%s",
    range: "%s\u9700\u8981\u5728%s\u548C%s\u4E4B\u95F4"
  },
  array: {
    len: "%s\u957F\u5EA6\u5FC5\u987B\u4E3A%s",
    min: "%s\u957F\u5EA6\u5FC5\u987B\u5C0F\u4E8E%s",
    max: "%s\u957F\u5EA6\u5FC5\u987B\u5927\u4E8E%s",
    range: "%s\u957F\u5EA6\u9700\u8981\u5728%s\u548C%s\u4E4B\u95F4"
  },
  pattern: {
    mismatch: "%s\u503C%s\u4E0D\u80FD\u5339\u914D%s"
  }
};
const __default__ = {
  name: "LayFormItem"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    prop: null,
    mode: { default: "block" },
    label: null,
    labelPosition: { default: "right" },
    labelWidth: { default: 95 },
    errorMessage: null,
    rules: null,
    required: { type: Boolean },
    requiredErrorMessage: null
  },
  setup(__props, { expose }) {
    const props = __props;
    const layForm = inject("LayForm", {});
    const formItemRef = ref();
    const slotParent = ref();
    const isRequired = computed(() => {
      return props.required || layForm.required;
    });
    const ruleItems = computed(() => {
      const prop = props.prop;
      if (!prop) {
        return {};
      }
      let rulesArrs = [];
      if (isRequired.value) {
        rulesArrs.push({ required: true });
      }
      if (props.rules) {
        rulesArrs = rulesArrs.concat(props.rules);
      }
      if (layForm.rules && layForm.rules[prop]) {
        rulesArrs = rulesArrs.concat(layForm.rules[prop]);
      }
      return rulesArrs;
    });
    const filedValue = computed(() => props.prop ? layForm.model[props.prop] : void 0);
    watch(() => filedValue.value, (val) => validate(), { deep: true });
    const errorMsg = ref();
    const errorStatus = ref(false);
    const validate = (callback) => {
      if (props.prop && ruleItems.value.length > 0) {
        const descriptor = {};
        descriptor[layForm.useCN ? props.label || props.prop : props.prop] = ruleItems.value;
        const validator = new Schema(descriptor);
        let model = {};
        let validateMessage = null;
        if (layForm.useCN) {
          validateMessage = Object.assign({}, cnValidateMessage, layForm.validateMessage);
          model[props.label || props.prop] = filedValue.value;
        } else {
          layForm.validateMessage && (validateMessage = layForm.validateMessage);
          model[props.prop] = filedValue.value;
        }
        layForm.requiredErrorMessage && (validateMessage = Object.assign(validateMessage, {
          required: layForm.requiredErrorMessage
        }));
        props.requiredErrorMessage && (validateMessage = Object.assign(validateMessage, {
          required: props.requiredErrorMessage
        }));
        validateMessage && validator.messages(validateMessage);
        validator.validate(model, (errors, fields) => {
          var _a, _b;
          errorStatus.value = errors !== null && errors.length > 0;
          const slotParentDiv = slotParent.value;
          if (errorStatus.value) {
            const _errors = errors;
            layForm.useCN && _errors.forEach((error) => {
              error.label = props.label;
              error.field = props.prop;
            });
            errorMsg.value = (_a = props.errorMessage) != null ? _a : _errors[0].message;
            (slotParentDiv == null ? void 0 : slotParentDiv.childElementCount) > 0 && ((_b = slotParentDiv == null ? void 0 : slotParentDiv.firstElementChild) == null ? void 0 : _b.classList.add("layui-form-danger"));
            callback && callback(_errors, fields);
          } else {
            clearValidate();
          }
        });
      }
    };
    const clearValidate = () => {
      var _a;
      errorStatus.value = false;
      errorMsg.value = "";
      const slotParentDiv = slotParent.value;
      (slotParentDiv == null ? void 0 : slotParentDiv.childElementCount) > 0 && ((_a = slotParentDiv == null ? void 0 : slotParentDiv.firstElementChild) == null ? void 0 : _a.classList.remove("layui-form-danger"));
    };
    expose({ validate, clearValidate });
    onMounted(() => {
      if (props.prop) {
        layForm.addField(reactive({
          ...toRefs(props),
          $el: formItemRef,
          validate,
          clearValidate
        }));
      }
    });
    const getMarginLeft = computed(() => {
      if (props.mode == "block") {
        if (props.labelPosition != "top") {
          let labelWidth = typeof props.labelWidth === "string" ? parseFloat(props.labelWidth) : props.labelWidth;
          labelWidth += 15;
          return {
            "margin-left": `${labelWidth}px`
          };
        } else {
          return {
            "margin-left": "0px"
          };
        }
      }
    });
    return (_ctx, _cache) => {
      var _a;
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["layui-form-item", [`layui-form-item-${__props.labelPosition}`]]),
        ref_key: "formItemRef",
        ref: formItemRef
      }, [
        createElementVNode("label", {
          class: "layui-form-label",
          style: normalizeStyle({ width: __props.labelWidth + "px" })
        }, [
          props.prop && unref(isRequired) ? (openBlock(), createElementBlock("span", {
            key: 0,
            class: normalizeClass(["layui-required", "layui-icon"].concat((_a = unref(layForm).requiredIcons) != null ? _a : ""))
          }, [
            renderSlot(_ctx.$slots, "required", {
              props: { ...props, model: unref(layForm).model }
            }, () => [
              createTextVNode(toDisplayString(unref(layForm).requiredIcons ? "" : "*"), 1)
            ])
          ], 2)) : createCommentVNode("", true),
          renderSlot(_ctx.$slots, "label", {
            props: { ...props, model: unref(layForm).model }
          }, () => [
            createTextVNode(toDisplayString(__props.label), 1)
          ])
        ], 4),
        createElementVNode("div", {
          class: normalizeClass([__props.mode ? "layui-input-" + __props.mode : ""]),
          style: normalizeStyle(unref(getMarginLeft))
        }, [
          createElementVNode("div", {
            ref_key: "slotParent",
            ref: slotParent
          }, [
            renderSlot(_ctx.$slots, "default", {
              props: { ...props, model: unref(layForm).model }
            })
          ], 512),
          errorStatus.value ? (openBlock(), createElementBlock("span", {
            key: 0,
            class: normalizeClass([
              "layui-error-message",
              { "layui-error-message-anim": errorStatus.value }
            ])
          }, toDisplayString(errorMsg.value), 3)) : createCommentVNode("", true)
        ], 6)
      ], 2);
    };
  }
});
const component = withInstall(_sfc_main);
export { component as default };