@pi-form-create/component-subform/dist/index.esm.js

@pi-form-create 内置组件

/*!
 * @pi-form-create/component-subform v3.0.0-alpha.1
 * (c) 2018-2025 xaboy
 * Github https://github.com/xaboy/form-create with subform
 * Released under the Apache-2.0 License.
 */
import { defineComponent, reactive, markRaw, nextTick, createVNode } from 'vue';
import '@pi-form-create/utils/lib/toline';
import is from '@pi-form-create/utils/lib/type';

const NAME = 'fcSubForm';
var Sub = defineComponent({
  name: NAME,
  props: {
    rule: Array,
    options: {
      type: Object,
      default: () => reactive({
        submitBtn: false,
        resetBtn: false
      })
    },
    modelValue: {
      type: Object,
      default: () => ({})
    },
    disabled: {
      type: [Boolean, undefined],
      default: undefined
    },
    syncDisabled: {
      type: Boolean,
      default: true
    },
    formCreateInject: Object
  },
  data() {
    return {
      cacheValue: {},
      subApi: {},
      form: markRaw(this.formCreateInject.form.$form())
    };
  },
  emits: ['fc:subform', 'update:modelValue', 'change', 'itemMounted'],
  watch: {
    disabled(n) {
      if (is.Boolean(n)) {
        this.syncDisabled && this.subApi.disabled(n);
      }
    },
    modelValue(n) {
      this.setValue(n);
    }
  },
  methods: {
    formData(value) {
      this.cacheValue = JSON.stringify(value);
      this.$emit('update:modelValue', value);
      this.$emit('change', value);
    },
    setValue(value) {
      const str = JSON.stringify(value);
      if (this.cacheValue === str) {
        return;
      }
      this.cacheValue = str;
      this.subApi.coverValue(value || {});
    },
    add$f(api) {
      this.subApi = api;
      nextTick(() => {
        if (is.Boolean(this.disabled)) {
          this.syncDisabled && api.disabled(this.disabled);
        }
        this.$emit('itemMounted', api);
      });
    }
    // emitEvent(name, ...args) {
    //     const {field, api} = this.formCreateInject
    //     const fieldKey = toLine(`${field}-${name}`);
    //     api.emit(fieldKey, ...args);
    // },
    // submit(...args){
    //     const {field, api} = this.formCreateInject
    //     const submitKey = toLine(`${field}-submit`);
    //     api.emit(submitKey, ...args);
    // }
  },
  render() {
    const Type = this.form;
    return createVNode(Type, {
      "disabled": this.disabled,
      "onUpdate:modelValue": this.formData,
      "modelValue": this.modelValue,
      "onEmit-event": this.$emit,
      "onUpdate:api": this.add$f,
      "rule": this.rule,
      "option": this.options,
      "extendOption": true,
      "dataScope": this.formCreateInject.dataScope,
      "utils": this.formCreateInject.utils
    }, null);
  }
});

export { Sub as default };