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

A PC-based visual designer based on Vxe UI, used for building zero-code and low-code platforms

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _comp = require("../../ui/src/comp");
var _core = require("@vxe-ui/core");
var _vn = require("../../ui/src/vn");
var _defaultSettingForm = require("./default-setting-form");
var _default = exports.default = (0, _comp.defineVxeComponent)({
  name: 'FormDesignLayoutSetting',
  props: {},
  emits: [],
  setup() {
    const VxeUITabsComponent = _core.VxeUI.getComponent('vxe-tabs');
    const VxeUITabPaneComponent = _core.VxeUI.getComponent('vxe-tab-pane');
    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)(VxeUITabsComponent, {
        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)(VxeUITabPaneComponent, {
            title: (0, _core.getI18n)('vxe.formDesign.widgetPropTab'),
            name: 1
          }, {
            default() {
              return renderSettingWidgetForm();
            }
          }), (0, _vue.h)(VxeUITabPaneComponent, {
            title: (0, _core.getI18n)('vxe.formDesign.widgetFormTab'),
            name: 2
          }, {
            default() {
              return renderSettingConfigForm();
            }
          })];
        }
      })])]);
    };
  }
});