song-ui-u/es/components/form/src/formItem.vue.mjs

vue3 + js的PC前端组件库

import { ref, computed, reactive, toRefs, provide, onMounted, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, toDisplayString, createCommentVNode, renderSlot, createVNode, Transition, withCtx } from 'vue';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import { useStyle } from '../../../hook/use-style/index.mjs';
import '../../../hook/use-zindex/index.mjs';
import { FORM_ITEM_KEY } from './constant.mjs';
import { useFormItem } from './composables/use-form-item.mjs';
import AsyncValidator from 'async-validator';
import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';

const __default__ = { name: "x-form-item" };

const _sfc_main = /*#__PURE__*/Object.assign(__default__, {
  props: {
  label: {
    type: String,
    default: "",
  },
  labelWidth: {
    type: String,
    default: "",
  },
  align: {
    type: String,
    default: "right",
  },
  prop: {
    type: String,
    default: "",
  },
  rules: {
    type: [Object, Array],
    default: () => [],
  },
  required: Boolean,
},
  setup(__props, { expose: __expose }) {
  __expose();

const ns = useNamespace("form-item");
const uStyle = useStyle();
const { formContent } = useFormItem();

const props = __props;

// 初始值
let initValue = null;

// 校验结果message
const validateMessage = ref("");

const width = computed(() =>
  uStyle.width(formContent.labelWidth.value || props.labelWidth)
);
const textAlign = computed(() => formContent.align.value || props.align);
const isRequired = computed(() =>
  initRules.value.some((rule) => rule.required)
);
const controlSize = computed(() => formContent.size.value);
const isColon = computed(() => formContent.colon.value);
/** 转换为数组 */
const convertArray = (rules) => {
  return rules ? (Array.isArray(rules) ? rules : [rules]) : [];
};
/** 校验规则集合 */
const initRules = computed(() => {
  const _rules = convertArray(props.rules);
  const formRules = formContent?.rules?.value;
  if (formRules && props.prop) {
    const propRules = formRules[props.prop];
    propRules && _rules.push(...convertArray(propRules));
  }
  return _rules;
});
/** 根据触发类型过滤规则 */
const filterRules = (trigger) => {
  const rules = initRules.value;
  return rules.filter((rule) => {
    if (!rule.trigger || !trigger) return true;
    if (Array.isArray(rule.trigger)) {
      return rule.trigger.includes(trigger);
    } else {
      return rule.trigger === trigger;
    }
  });
};

const validate = (trigger) => {
  const rules = filterRules(trigger);
  // 获取key
  const propName = props.prop;
  // 根据key获取校验规则
  const formModel = formContent?.model?.value;
  // 实例化
  const validator = new AsyncValidator({
    [propName]: rules,
  });
  // 开始校验
  return validator
    .validate({ [propName]: formModel[propName] }, { firstFields: true })
    .then(() => {
      onalidateSuccess();
      return Promise.resolve();
    })
    .catch(({ errors, fields }) => {
      validateFailed(errors);
      return Promise.reject(errors);
    });
};

const onalidateSuccess = () => {
  validateMessage.value = "";
};

const validateFailed = (errors) => {
  validateMessage.value = errors?.[0].message;
};

const resetField = () => {
  props.prop && (formContent.model.value[props.prop] = initValue);
};

const context = reactive({
  ...toRefs(props),
  validate,
  resetField,
});
provide(FORM_ITEM_KEY, context);

onMounted(() => {
  if (props.prop) {
    formContent.pushField(context);
    initValue = formContent?.model?.value?.[props.prop];
  }
});

const __returned__ = { ns, uStyle, formContent, props, get initValue() { return initValue }, set initValue(v) { initValue = v; }, validateMessage, width, textAlign, isRequired, controlSize, isColon, convertArray, initRules, filterRules, validate, onalidateSuccess, validateFailed, resetField, context, ref, reactive, toRefs, computed, provide, onMounted, get useNamespace() { return useNamespace }, get useStyle() { return useStyle }, get FORM_ITEM_KEY() { return FORM_ITEM_KEY }, get useFormItem() { return useFormItem }, get AsyncValidator() { return AsyncValidator } };
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
return __returned__
}

});

function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("div", {
    class: normalizeClass([
      $setup.ns.b(),
      $setup.ns.m('size', $setup.controlSize),
      $setup.ns.is('required', $setup.isRequired),
      $setup.ns.m('label', $setup.textAlign),
    ])
  }, [
    ($props.label)
      ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: normalizeClass([$setup.ns.e('label')]),
          style: normalizeStyle([$setup.width])
        }, [
          createElementVNode("label", {
            class: normalizeClass([$setup.ns.e('label-inner'), $setup.ns.is('colon', $setup.isColon)]),
            style: normalizeStyle([$setup.textAlign])
          }, toDisplayString($props.label), 7 /* TEXT, CLASS, STYLE */)
        ], 6 /* CLASS, STYLE */))
      : createCommentVNode("v-if", true),
    createElementVNode("div", {
      class: normalizeClass([$setup.ns.e('control')])
    }, [
      createElementVNode("div", {
        class: normalizeClass([$setup.ns.e('control-inner')])
      }, [
        renderSlot(_ctx.$slots, "default")
      ], 2 /* CLASS */),
      createVNode(Transition, {
        name: `${$setup.ns.namespace}-form-message`
      }, {
        default: withCtx(() => [
          ($setup.validateMessage)
            ? (openBlock(), createElementBlock("div", {
                key: 0,
                class: normalizeClass([$setup.ns.e('message')])
              }, toDisplayString($setup.validateMessage), 3 /* TEXT, CLASS */))
            : createCommentVNode("v-if", true)
        ]),
        _: 1 /* STABLE */
      }, 8 /* PROPS */, ["name"])
    ], 2 /* CLASS */)
  ], 2 /* CLASS */))
}
var FormItem = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\form\\src\\formItem.vue"]]);

export { FormItem as default };
//# sourceMappingURL=formItem.vue.mjs.map