vxe-design/lib/form-design/src/default-setting-form.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.DefaultSettingFormComponent = void 0;
var _vue = require("vue");
var _comp = require("../../ui/src/comp");
var _core = require("@vxe-ui/core");
const DefaultSettingFormComponent = exports.DefaultSettingFormComponent = (0, _comp.defineVxeComponent)({
  name: 'DefaultSettingForm',
  props: {
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [],
  setup(props) {
    const VxeUIFormComponent = _core.VxeUI.getComponent('vxe-form');
    const VxeUIFormItemComponent = _core.VxeUI.getComponent('vxe-form-item');
    const VxeUISwitchComponent = _core.VxeUI.getComponent('vxe-switch');
    const VxeUITextComponent = _core.VxeUI.getComponent('vxe-text');
    const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
    if (!$xeFormDesign) {
      return () => [];
    }
    const {
      props: formDesignProps
    } = $xeFormDesign;
    return () => {
      const {
        formData
      } = props;
      return (0, _vue.h)(VxeUIFormComponent, {
        data: formData,
        span: 24,
        vertical: true,
        titleBold: true
      }, {
        default() {
          const {
            showPc,
            showMobile
          } = formDesignProps;
          return [(0, _vue.h)(VxeUIFormItemComponent, {
            title: (0, _core.getI18n)('vxe.formDesign.formName'),
            field: 'title',
            itemRender: {
              name: 'VxeInput',
              props: {
                placeholder: (0, _core.getI18n)('vxe.formDesign.defFormTitle')
              }
            }
          }), showPc && showMobile ? (0, _vue.h)(VxeUIFormItemComponent, {
            title: (0, _core.getI18n)('vxe.formDesign.widgetProp.displaySetting.name')
          }, {
            default() {
              return [(0, _vue.h)('div', {
                class: 'vxe-form-design--widget-form-item-devices'
              }, [(0, _vue.h)('div', {
                class: 'vxe-form-design--widget-form-item-pc'
              }, [(0, _vue.h)(VxeUITextComponent, {
                icon: (0, _core.getIcon)().FORM_DESIGN_PROPS_PC,
                content: (0, _core.getI18n)('vxe.formDesign.widgetProp.displaySetting.pc')
              }), (0, _vue.h)(VxeUISwitchComponent, {
                modelValue: formData.pcVisible,
                openLabel: (0, _core.getI18n)('vxe.formDesign.widgetProp.displaySetting.visible'),
                closeLabel: (0, _core.getI18n)('vxe.formDesign.widgetProp.displaySetting.hidden'),
                'onUpdate:modelValue'(val) {
                  formData.pcVisible = val;
                }
              })]), (0, _vue.h)('div', {
                class: 'vxe-form-design--widget-form-item-mobile'
              }, [(0, _vue.h)(VxeUITextComponent, {
                icon: (0, _core.getIcon)().FORM_DESIGN_PROPS_MOBILE,
                content: (0, _core.getI18n)('vxe.formDesign.widgetProp.displaySetting.mobile')
              }), (0, _vue.h)(VxeUISwitchComponent, {
                modelValue: formData.mobileVisible,
                openLabel: (0, _core.getI18n)('vxe.formDesign.widgetProp.displaySetting.visible'),
                closeLabel: (0, _core.getI18n)('vxe.formDesign.widgetProp.displaySetting.hidden'),
                'onUpdate:modelValue'(val) {
                  formData.mobileVisible = val;
                }
              })])])];
            }
          }) : (0, _vue.createCommentVNode)()];
        }
      });
    };
  }
});