plus-pro-components/lib/components/form/src/form-content.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var elementPlus = require('element-plus');
var index$1 = require('../../form-item/index.js');
var index = require('../../utils/index.js');
var collapseTransition = require('./collapse-transition.vue.js');
var is = require('../../utils/is.js');

const _hoisted_1 = {
  key: 0,
  class: "plus-form-item-extra"
};
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "PlusFormContent"
  },
  __name: "form-content",
  props: {
    modelValue: { default: () => ({}) },
    hasLabel: { type: Boolean, default: true },
    columns: { default: () => [] },
    rowProps: { default: () => ({}) },
    colProps: { default: () => ({}) },
    collapseDuration: { default: void 0 },
    collapseTransition: { type: Boolean, default: void 0 },
    clearable: { type: Boolean, default: true }
  },
  emits: ["update:modelValue", "change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const values = vue.ref({});
    const getHasLabel = (hasLabel) => {
      const has = vue.unref(hasLabel);
      if (is.isBoolean(has)) {
        return has;
      }
      return props.hasLabel;
    };
    vue.watch(
      () => props.modelValue,
      (val) => {
        values.value = val;
      },
      {
        immediate: true
      }
    );
    const getModelValue = (prop) => index.getValue(values.value, prop);
    const handleChange = (value, column) => {
      index.setValue(values.value, column.prop, value);
      emit("update:modelValue", values.value);
      emit("change", values.value, column);
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(
        vue.unref(elementPlus.ElRow),
        vue.mergeProps(_ctx.rowProps, { class: "plus-form__row" }),
        {
          default: vue.withCtx(() => [
            vue.createVNode(collapseTransition.default, {
              "collapse-duration": _ctx.collapseDuration,
              "collapse-transition": _ctx.collapseTransition
            }, {
              default: vue.withCtx(() => [
                (vue.openBlock(true), vue.createElementBlock(
                  vue.Fragment,
                  null,
                  vue.renderList(_ctx.columns, (item) => {
                    return vue.openBlock(), vue.createBlock(
                      vue.unref(elementPlus.ElCol),
                      vue.mergeProps({
                        key: item.prop
                      }, item.colProps || _ctx.colProps),
                      {
                        default: vue.withCtx(() => [
                          vue.createVNode(vue.unref(index$1.PlusFormItem), vue.mergeProps({
                            "model-value": getModelValue(item.prop)
                          }, item, {
                            clearable: _ctx.clearable,
                            "has-label": getHasLabel(item.hasLabel),
                            onChange: (value) => handleChange(value, item)
                          }), vue.createSlots({
                            _: 2
                            /* DYNAMIC */
                          }, [
                            _ctx.$slots[vue.unref(index.getLabelSlotName)(item.prop)] ? {
                              name: vue.unref(index.getLabelSlotName)(item.prop),
                              fn: vue.withCtx((data) => [
                                vue.renderSlot(_ctx.$slots, vue.unref(index.getLabelSlotName)(item.prop), vue.normalizeProps(vue.guardReactiveProps(data)))
                              ]),
                              key: "0"
                            } : void 0,
                            _ctx.$slots[vue.unref(index.getFieldSlotName)(item.prop)] ? {
                              name: vue.unref(index.getFieldSlotName)(item.prop),
                              fn: vue.withCtx((data) => [
                                vue.renderSlot(_ctx.$slots, vue.unref(index.getFieldSlotName)(item.prop), vue.normalizeProps(vue.guardReactiveProps(data)))
                              ]),
                              key: "1"
                            } : void 0,
                            _ctx.$slots["tooltip-icon"] ? {
                              name: "tooltip-icon",
                              fn: vue.withCtx(() => [
                                vue.renderSlot(_ctx.$slots, "tooltip-icon")
                              ]),
                              key: "2"
                            } : void 0
                          ]), 1040, ["model-value", "clearable", "has-label", "onChange"]),
                          vue.createCommentVNode(" el-form-item \u4E0B\u4E00\u884C\u989D\u5916\u7684\u5185\u5BB9 "),
                          item.renderExtra || _ctx.$slots[vue.unref(index.getExtraSlotName)(item.prop)] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
                            item.renderExtra && vue.unref(is.isFunction)(item.renderExtra) ? (vue.openBlock(), vue.createBlock(
                              vue.resolveDynamicComponent(item.renderExtra),
                              vue.normalizeProps(vue.mergeProps({ key: 0 }, item)),
                              null,
                              16
                              /* FULL_PROPS */
                            )) : _ctx.$slots[vue.unref(index.getExtraSlotName)(item.prop)] ? vue.renderSlot(_ctx.$slots, vue.unref(index.getExtraSlotName)(item.prop), vue.normalizeProps(vue.mergeProps({ key: 1 }, item))) : vue.createCommentVNode("v-if", true)
                          ])) : vue.createCommentVNode("v-if", true)
                        ]),
                        _: 2
                        /* DYNAMIC */
                      },
                      1040
                      /* FULL_PROPS, DYNAMIC_SLOTS */
                    );
                  }),
                  128
                  /* KEYED_FRAGMENT */
                ))
              ]),
              _: 3
              /* FORWARDED */
            }, 8, ["collapse-duration", "collapse-transition"]),
            vue.createCommentVNode(" \u641C\u7D22\u7684footer\u63D2\u69FD  "),
            vue.renderSlot(_ctx.$slots, "search-footer")
          ]),
          _: 3
          /* FORWARDED */
        },
        16
        /* FULL_PROPS */
      );
    };
  }
});

exports.default = _sfc_main;