vxe-pc-ui/lib/form-design/src/layout-style.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 _modal = _interopRequireDefault(require("../../modal/src/modal"));
var _tabs = _interopRequireDefault(require("../../tabs/src/tabs"));
var _tabPane = _interopRequireDefault(require("../../tabs/src/tab-pane"));
var _formView = _interopRequireDefault(require("./form-view"));
var _defaultStyleForm = require("./default-style-form");
var _defaultSettingData = require("./default-setting-data");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = (0, _vue.defineComponent)({
  name: 'FormDesignLayoutStyle',
  props: {},
  emits: [],
  setup() {
    const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
    const reactData = (0, _vue.reactive)({
      activeTab: 1
    });
    const $xeFormDesignLayoutStyle = {
      reactData,
      renderVN() {
        return [];
      }
    };
    if (!$xeFormDesign) {
      return $xeFormDesignLayoutStyle;
    }
    const {
      props: formDesignProps,
      reactData: formDesignReactData
    } = $xeFormDesign;
    const settingVisible = (0, _vue.ref)(false);
    const settingConfig = (0, _vue.ref)(null);
    const settingFormData = (0, _vue.ref)({});
    const updatePreviewView = () => {
      settingConfig.value = $xeFormDesign.getConfig();
    };
    const createFormViewFormConfig = params => {
      const {
        viewRender
      } = params;
      const {
        activeTab
      } = reactData;
      const {
        name
      } = viewRender || {};
      const compConf = _core.renderer.get(name) || {};
      const createPCFormConfig = compConf ? compConf.createFormViewFormConfig : null;
      const createMobileFormConfig = compConf ? compConf.createFormViewMobileFormConfig : null;
      if (activeTab === 2) {
        if (createMobileFormConfig) {
          return createMobileFormConfig(params);
        }
        return (0, _defaultSettingData.createDefaultFormViewMobileFormConfig)(params);
      }
      if (createPCFormConfig) {
        return createPCFormConfig(params);
      }
      return (0, _defaultSettingData.createDefaultFormViewPCFormConfig)(params);
    };
    const formDesignLayoutStyleMethod = {
      updatePreviewView,
      openStylePreview() {
        const {
          showPc
        } = formDesignProps;
        updatePreviewView();
        reactData.activeTab = showPc ? 1 : 2;
        settingVisible.value = true;
      }
    };
    Object.assign($xeFormDesignLayoutStyle, formDesignLayoutStyleMethod);
    const renderStylePreview = () => {
      const {
        activeTab
      } = reactData;
      return (0, _vue.h)('div', {
        class: ['vxe-form-design--layout-style-preview', `is--${activeTab === 2 ? 'mobile' : 'pc'}`]
      }, [(0, _vue.h)(_formView.default, {
        modelValue: settingFormData.value,
        config: settingConfig.value,
        createFormConfig: createFormViewFormConfig,
        'onUpdate:modelValue'(val) {
          settingFormData.value = val;
        }
      })]);
    };
    const renderMobileStyle = () => {
      const {
        formRender
      } = formDesignProps;
      const {
        formData
      } = formDesignReactData;
      if (formRender) {
        const compConf = _core.renderer.get(formRender.name);
        const renderSettingMobileFormView = compConf ? compConf.renderFormDesignMobileStyleFormView : null;
        if (renderSettingMobileFormView) {
          return (0, _vue.h)('div', {
            class: 'vxe-form-design--custom-setting-mobile-form-view'
          }, (0, _vn.getSlotVNs)(renderSettingMobileFormView({}, {
            $formDesign: $xeFormDesign,
            formConfig: formData
          })));
        }
      }
      return (0, _vue.h)(_defaultStyleForm.DefaultMobileStyleFormComponent, {
        formData
      });
    };
    const renderPCStyle = () => {
      const {
        formRender
      } = formDesignProps;
      const {
        formData
      } = formDesignReactData;
      if (formRender) {
        const compConf = _core.renderer.get(formRender.name);
        const renderStylePCFormView = compConf ? compConf.renderFormDesignStyleFormView : null;
        if (renderStylePCFormView) {
          return (0, _vue.h)('div', {
            class: 'vxe-form-design--custom-setting-pc-form-view'
          }, (0, _vn.getSlotVNs)(renderStylePCFormView({}, {
            $formDesign: $xeFormDesign,
            formConfig: formData
          })));
        }
      }
      return (0, _vue.h)(_defaultStyleForm.DefaultPCStyleFormComponent, {
        formData
      });
    };
    const renderStyleSetting = () => {
      const {
        showPc,
        showMobile
      } = formDesignProps;
      const {
        activeTab
      } = reactData;
      return (0, _vue.h)('div', {
        class: 'vxe-form-design--layout-style-setting'
      }, [(0, _vue.h)(_tabs.default, {
        modelValue: activeTab,
        titleWidth: showPc && showMobile ? '50%' : '100%',
        titleAlign: 'center',
        padding: true,
        onChange: updatePreviewView,
        'onUpdate:modelValue'(val) {
          reactData.activeTab = val;
        }
      }, {
        default() {
          const tabVNs = [];
          if (showPc) {
            tabVNs.push((0, _vue.h)(_tabPane.default, {
              title: (0, _core.getI18n)('vxe.formDesign.widgetProp.displaySetting.pc'),
              icon: (0, _core.getIcon)().FORM_DESIGN_PROPS_PC,
              k: 1,
              name: 1
            }, {
              default() {
                return renderPCStyle();
              }
            }));
          }
          if (showMobile) {
            tabVNs.push((0, _vue.h)(_tabPane.default, {
              title: (0, _core.getI18n)('vxe.formDesign.widgetProp.displaySetting.mobile'),
              icon: (0, _core.getIcon)().FORM_DESIGN_PROPS_MOBILE,
              key: 2,
              name: 2
            }, {
              default() {
                return renderMobileStyle();
              }
            }));
          }
          return tabVNs;
        }
      })]);
    };
    const renderVN = () => {
      const {
        showPc,
        showMobile
      } = formDesignProps;
      return (0, _vue.h)(_modal.default, {
        modelValue: settingVisible.value,
        title: (0, _core.getI18n)('vxe.formDesign.styleSetting.title'),
        height: '90vh',
        width: '90vw',
        escClosable: true,
        maskClosable: true,
        destroyOnClose: true,
        showMaximize: true,
        transfer: true,
        'onUpdate:modelValue'(val) {
          settingVisible.value = val;
        }
      }, {
        default() {
          return (0, _vue.h)('div', {
            class: 'vxe-form-design--layout-style'
          }, [renderStylePreview(), showPc || showMobile ? renderStyleSetting() : (0, _vue.createCommentVNode)()]);
        }
      });
    };
    $xeFormDesignLayoutStyle.renderVN = renderVN;
    (0, _vue.provide)('$xeFormDesignLayoutStyle', $xeFormDesignLayoutStyle);
    return $xeFormDesignLayoutStyle;
  },
  render() {
    return this.renderVN();
  }
});