vxe-pc-ui/lib/form-design/src/layout-setting.js

A vue based PC component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _core = require("@vxe-ui/core");
var _vn = require("../../ui/src/vn");
var _tabs = _interopRequireDefault(require("../../tabs/src/tabs"));
var _tabPane = _interopRequireDefault(require("../../tabs/src/tab-pane"));
var _defaultSettingForm = require("./default-setting-form");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = (0, _vue.defineComponent)({
  name: 'FormDesignLayoutSetting',
  props: {},
  emits: [],
  setup() {
    const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
    if (!$xeFormDesign) {
      return () => [];
    }
    const {
      props: formDesignProps,
      reactData: formDesignReactData
    } = $xeFormDesign;
    const activeTab = (0, _vue.ref)(1);
    const renderSettingWidgetForm = () => {
      const {
        activeWidget
      } = formDesignReactData;
      if (activeWidget) {
        const compConf = _core.renderer.get(activeWidget.name);
        const renderWidgetFormView = compConf ? compConf.renderFormDesignWidgetFormView : null;
        if (renderWidgetFormView) {
          const isEditMode = true;
          return (0, _vue.h)('div', {
            class: 'vxe-form-design--custom-widget-form-view'
          }, (0, _vn.getSlotVNs)(renderWidgetFormView(activeWidget, {
            isEditMode,
            isViewMode: !isEditMode,
            widget: activeWidget,
            $formDesign: $xeFormDesign,
            $formView: null
          })));
        }
      }
      return (0, _vue.createCommentVNode)();
    };
    const renderSettingConfigForm = () => {
      const {
        formRender
      } = formDesignProps;
      const {
        formData
      } = formDesignReactData;
      if (formRender) {
        const compConf = _core.renderer.get(formRender.name);
        const renderSettingView = compConf ? compConf.renderFormDesignSettingFormView : null;
        if (renderSettingView) {
          return (0, _vue.h)('div', {
            class: 'vxe-form-design--custom-setting-form-view'
          }, (0, _vn.getSlotVNs)(renderSettingView({}, {
            $formDesign: $xeFormDesign
          })));
        }
      }
      return (0, _vue.h)(_defaultSettingForm.DefaultSettingFormComponent, {
        formData
      });
    };
    (0, _vue.watch)(() => formDesignReactData.activeWidget, () => {
      activeTab.value = 1;
    });
    return () => {
      return (0, _vue.h)('div', {
        class: 'vxe-form-design--setting'
      }, [(0, _vue.h)('div', {
        class: 'vxe-form-design--setting-form'
      }, [(0, _vue.h)(_tabs.default, {
        modelValue: activeTab.value,
        titleWidth: '50%',
        titleAlign: 'center',
        padding: true,
        class: 'vxe-form-design--setting-form-tabs',
        'onUpdate:modelValue'(val) {
          activeTab.value = val;
        }
      }, {
        default() {
          return [(0, _vue.h)(_tabPane.default, {
            title: (0, _core.getI18n)('vxe.formDesign.widgetPropTab'),
            name: 1
          }, {
            default() {
              return renderSettingWidgetForm();
            }
          }), (0, _vue.h)(_tabPane.default, {
            title: (0, _core.getI18n)('vxe.formDesign.widgetFormTab'),
            name: 2
          }, {
            default() {
              return renderSettingConfigForm();
            }
          })];
        }
      })])]);
    };
  }
});