element-plus-jsx/es/form/form.vue.js

基于 Element Plus 扩展 JSX 语法的组件库

import { defineComponent, useModel, shallowRef, getCurrentInstance, inject, onBeforeMount, createVNode, mergeProps, shallowReactive } from 'vue';
import { ElForm, ElFormItem } from 'element-plus';
import { getConfig, installPlugins, transWidth } from '../_utils/index.js';
import { useFnOrRefProp } from '../hooks.js';
import defaultPlugins from './plugins/index.js';
import { providerInjectKey } from '../provider/context.js';

var _sfc_main = /* @__PURE__ */ defineComponent({
  props: {
    model: {
      type: Object,
      default: () => ({})
    },
    plugins: {
      type: Array,
      default: () => []
    },
    formFn: {
      type: Array,
      default: () => []
    }
  },
  setup(props, ctx) {
    const form = useModel(props, 'model');
    const formRef = shallowRef();
    const plugins = getConfig(getCurrentInstance(), 'formPlugins') || [];
    const {
      formProps = {},
      formPlugins = []
    } = inject(providerInjectKey, {});
    onBeforeMount(() => {
      // install default plugins
      plugins.push(...props.plugins, ...formPlugins, ...defaultPlugins);
    });
    ctx.expose({
      formRef
    });
    return () => createVNode(ElForm, mergeProps({
      "style": {
        display: 'flex',
        flexWrap: 'wrap',
        width: '100%'
      },
      "ref": formRef
    }, {
      ...formProps,
      ...ctx.attrs
    }, {
      "model": form.value
    }), {
      default: () => [shallowReactive(installPlugins({
        ...props,
        ...ctx,
        form,
        formRef,
        plugins
      }, 'formFn')).filter(res => useFnOrRefProp(res.show, {
        ...props,
        ...ctx,
        form,
        formRef
      }) ?? true).map((fn, index) => fn.slots?.row ? createVNode("span", {
        "style": {
          width: transWidth(fn.width) || '100%'
        }
      }, [fn.slots.row({
        ...props,
        ...ctx,
        form,
        formRef
      })]) : createVNode(ElFormItem, mergeProps({
        "style": {
          width: transWidth(fn.width) || '100%'
        },
        "key": index
      }, fn), {
        ...fn.slots,
        default: () => fn.slots?.default?.({
          ...props,
          ...ctx,
          form,
          formRef
        })
      }))],
      ...ctx.slots
    });
  }
});

export { _sfc_main as default };