vxe-design/lib/index.umd.js

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

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("vue"), require("@vxe-ui/core"), require("xe-utils"));
	else if(typeof define === 'function' && define.amd)
		define([, "@vxe-ui/core", "xe-utils"], factory);
	else if(typeof exports === 'object')
		exports["VxeUIDesign"] = factory(require("vue"), require("@vxe-ui/core"), require("xe-utils"));
	else
		root["VxeUIDesign"] = factory(root["Vue"], root["VxeUI"], root["XEUtils"]);
})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__9274__, __WEBPACK_EXTERNAL_MODULE__4345__, __WEBPACK_EXTERNAL_MODULE__8871__) {
return /******/ (function() { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ 7860:
/***/ (function(__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) {

/* eslint-disable no-var */
// This file is imported into lib/wc client bundles.

if (typeof window !== 'undefined') {
  var currentScript = window.document.currentScript
  if (false) { var getCurrentScript; }

  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
  if (src) {
    __webpack_require__.p = src[1] // eslint-disable-line
  }
}

// Indicate to webpack that this file can be concatenated
/* unused harmony default export */ var __WEBPACK_DEFAULT_EXPORT__ = (null);


/***/ }),

/***/ 6963:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _packages_components__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(229);
/* harmony reexport (unknown) */ var __WEBPACK_REEXPORT_OBJECT__ = {};
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _packages_components__WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== "default") __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = function(key) { return _packages_components__WEBPACK_IMPORTED_MODULE_0__[key]; }.bind(0, __WEBPACK_IMPORT_KEY__)
/* harmony reexport (unknown) */ __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);



/* harmony default export */ __webpack_exports__["default"] = (_packages_components__WEBPACK_IMPORTED_MODULE_0__);

/***/ }),

/***/ 229:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   FlowDesign: function() { return /* reexport safe */ _flow_design__WEBPACK_IMPORTED_MODULE_1__.TO; },
/* harmony export */   FlowView: function() { return /* reexport safe */ _flow_view__WEBPACK_IMPORTED_MODULE_2__.YH; },
/* harmony export */   FormDesign: function() { return /* reexport safe */ _form_design__WEBPACK_IMPORTED_MODULE_3__.H9; },
/* harmony export */   FormView: function() { return /* reexport safe */ _form_view__WEBPACK_IMPORTED_MODULE_4__.co; },
/* harmony export */   ListDesign: function() { return /* reexport safe */ _list_design__WEBPACK_IMPORTED_MODULE_5__.RP; },
/* harmony export */   ListView: function() { return /* reexport safe */ _list_view__WEBPACK_IMPORTED_MODULE_6__.uO; },
/* harmony export */   VxeFlowDesign: function() { return /* reexport safe */ _flow_design__WEBPACK_IMPORTED_MODULE_1__.KA; },
/* harmony export */   VxeFlowView: function() { return /* reexport safe */ _flow_view__WEBPACK_IMPORTED_MODULE_2__.JF; },
/* harmony export */   VxeFormDesign: function() { return /* reexport safe */ _form_design__WEBPACK_IMPORTED_MODULE_3__.Cd; },
/* harmony export */   VxeFormView: function() { return /* reexport safe */ _form_view__WEBPACK_IMPORTED_MODULE_4__.Xz; },
/* harmony export */   VxeListDesign: function() { return /* reexport safe */ _list_design__WEBPACK_IMPORTED_MODULE_5__.uc; },
/* harmony export */   VxeListView: function() { return /* reexport safe */ _list_view__WEBPACK_IMPORTED_MODULE_6__.jM; },
/* harmony export */   install: function() { return /* binding */ install; }
/* harmony export */ });
/* harmony import */ var _vxe_ui_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4345);
/* harmony import */ var _vxe_ui_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_vxe_ui_core__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _flow_design__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6539);
/* harmony import */ var _flow_view__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7189);
/* harmony import */ var _form_design__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4370);
/* harmony import */ var _form_view__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7830);
/* harmony import */ var _list_design__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(272);
/* harmony import */ var _list_view__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(4293);
/* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(2084);
/* harmony reexport (unknown) */ var __WEBPACK_REEXPORT_OBJECT__ = {};
/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _ui__WEBPACK_IMPORTED_MODULE_7__) if(["default","install"].indexOf(__WEBPACK_IMPORT_KEY__) < 0) __WEBPACK_REEXPORT_OBJECT__[__WEBPACK_IMPORT_KEY__] = function(key) { return _ui__WEBPACK_IMPORTED_MODULE_7__[key]; }.bind(0, __WEBPACK_IMPORT_KEY__)
/* harmony reexport (unknown) */ __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);







const components = [_flow_design__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Ay, _flow_view__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Ay, _form_design__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Ay, _form_view__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Ay, _list_design__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Ay, _list_view__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Ay];
function install(app, options) {
  (0,_vxe_ui_core__WEBPACK_IMPORTED_MODULE_0__.setConfig)(options);
  components.forEach(component => app.use(component));
}

// Components







/***/ }),

/***/ 6539:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {


// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  TO: function() { return /* binding */ FlowDesign; },
  KA: function() { return /* binding */ VxeFlowDesign; },
  Ay: function() { return /* binding */ packages_flow_design; }
});

// EXTERNAL MODULE: external {"root":"VxeUI","commonjs":"@vxe-ui/core","commonjs2":"@vxe-ui/core","amd":"@vxe-ui/core"}
var core_ = __webpack_require__(4345);
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(9274);
// EXTERNAL MODULE: ./packages/ui/src/comp.ts
var comp = __webpack_require__(6938);
// EXTERNAL MODULE: external {"root":"XEUtils","commonjs":"xe-utils","commonjs2":"xe-utils","amd":"xe-utils"}
var external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_ = __webpack_require__(8871);
var external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default = /*#__PURE__*/__webpack_require__.n(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_);
;// CONCATENATED MODULE: ./packages/flow-design/src/flow-design.ts



/* harmony default export */ var flow_design = ((0,comp/* defineVxeComponent */.u)({
  name: 'VxeFlowDesign',
  props: {},
  emits: [],
  setup(props, context) {
    const {
      slots
    } = context;
    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({});
    const refMaps = {
      refElem
    };
    const computeMaps = {};
    const $xeFlowDesign = {
      xID,
      props,
      context,
      reactData,
      getRefMaps: () => refMaps,
      getComputeMaps: () => computeMaps
    };
    const renderVN = () => {
      const defaultSlot = slots.default;
      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
        ref: refElem,
        class: ['vxe-flow-design']
      }, defaultSlot ? defaultSlot({}) : []);
    };
    $xeFlowDesign.renderVN = renderVN;
    return $xeFlowDesign;
  },
  render() {
    return this.renderVN();
  }
}));
;// CONCATENATED MODULE: ./packages/flow-design/index.ts


const VxeFlowDesign = Object.assign({}, flow_design, {
  install(app) {
    app.component(flow_design.name, flow_design);
  }
});
if (core_.VxeUI.dynamicApp) {
  core_.VxeUI.dynamicApp.use(VxeFlowDesign);
}
core_.VxeUI.component(flow_design);
const FlowDesign = VxeFlowDesign;
/* harmony default export */ var packages_flow_design = (VxeFlowDesign);

/***/ }),

/***/ 7189:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {


// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  YH: function() { return /* binding */ FlowView; },
  JF: function() { return /* binding */ VxeFlowView; },
  Ay: function() { return /* binding */ packages_flow_view; }
});

// EXTERNAL MODULE: external {"root":"VxeUI","commonjs":"@vxe-ui/core","commonjs2":"@vxe-ui/core","amd":"@vxe-ui/core"}
var core_ = __webpack_require__(4345);
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(9274);
// EXTERNAL MODULE: ./packages/ui/src/comp.ts
var comp = __webpack_require__(6938);
// EXTERNAL MODULE: external {"root":"XEUtils","commonjs":"xe-utils","commonjs2":"xe-utils","amd":"xe-utils"}
var external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_ = __webpack_require__(8871);
var external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default = /*#__PURE__*/__webpack_require__.n(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_);
;// CONCATENATED MODULE: ./packages/flow-design/src/flow-view.ts



/* harmony default export */ var flow_view = ((0,comp/* defineVxeComponent */.u)({
  name: 'VxeFlowView',
  props: {},
  emits: [],
  setup(props, context) {
    const {
      slots
    } = context;
    const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
    const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
    const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({});
    const refMaps = {
      refElem
    };
    const computeMaps = {};
    const $xeFlowView = {
      xID,
      props,
      context,
      reactData,
      getRefMaps: () => refMaps,
      getComputeMaps: () => computeMaps
    };
    const renderVN = () => {
      const defaultSlot = slots.default;
      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
        ref: refElem,
        class: ['vxe-flow-view']
      }, defaultSlot ? defaultSlot({}) : []);
    };
    $xeFlowView.renderVN = renderVN;
    return $xeFlowView;
  },
  render() {
    return this.renderVN();
  }
}));
;// CONCATENATED MODULE: ./packages/flow-view/index.ts


const VxeFlowView = Object.assign({}, flow_view, {
  install(app) {
    app.component(flow_view.name, flow_view);
  }
});
if (core_.VxeUI.dynamicApp) {
  core_.VxeUI.dynamicApp.use(VxeFlowView);
}
core_.VxeUI.component(flow_view);
const FlowView = VxeFlowView;
/* harmony default export */ var packages_flow_view = (VxeFlowView);

/***/ }),

/***/ 4370:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {


// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  H9: function() { return /* binding */ FormDesign; },
  Cd: function() { return /* binding */ VxeFormDesign; },
  Ay: function() { return /* binding */ packages_form_design; }
});

// EXTERNAL MODULE: external {"root":"VxeUI","commonjs":"@vxe-ui/core","commonjs2":"@vxe-ui/core","amd":"@vxe-ui/core"}
var core_ = __webpack_require__(4345);
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
var es_array_push = __webpack_require__(4114);
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(9274);
// EXTERNAL MODULE: ./packages/ui/src/comp.ts
var comp = __webpack_require__(6938);
// EXTERNAL MODULE: ./packages/ui/src/dom.ts
var dom = __webpack_require__(1465);
// EXTERNAL MODULE: ./packages/form-design/src/widget-info.ts + 4 modules
var widget_info = __webpack_require__(1878);
// EXTERNAL MODULE: external {"root":"XEUtils","commonjs":"xe-utils","commonjs2":"xe-utils","amd":"xe-utils"}
var external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_ = __webpack_require__(8871);
var external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default = /*#__PURE__*/__webpack_require__.n(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_);
// EXTERNAL MODULE: ./packages/ui/src/vn.ts
var vn = __webpack_require__(65);
;// CONCATENATED MODULE: ./packages/form-design/src/layout-widget.ts







/* harmony default export */ var layout_widget = ((0,comp/* defineVxeComponent */.u)({
  props: {},
  emits: [],
  setup() {
    const $xeFormDesign = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeFormDesign', null);
    if (!$xeFormDesign) {
      return () => [];
    }
    const {
      reactData: formDesignReactData
    } = $xeFormDesign;
    const dragstartEvent = evnt => {
      const divEl = evnt.currentTarget;
      const dataTransfer = evnt.dataTransfer;
      const widgetName = divEl.getAttribute('data-widget-name') || '';
      if ($xeFormDesign.validWidgetUnique(widgetName)) {
        const dragWidget = $xeFormDesign.createWidget(widgetName);
        if (dataTransfer) {
          dataTransfer.setData('text/plain', widgetName);
        }
        formDesignReactData.sortWidget = null;
        formDesignReactData.dragWidget = dragWidget;
      } else {
        evnt.preventDefault();
      }
    };
    const dragendEvent = evnt => {
      evnt.preventDefault();
      if (formDesignReactData.dragWidget) {
        const newWidget = formDesignReactData.dragWidget;
        formDesignReactData.activeWidget = newWidget;
        $xeFormDesign.dispatchEvent('add-widget', {
          newWidget
        }, evnt);
      }
      formDesignReactData.dragWidget = null;
      formDesignReactData.sortWidget = null;
    };
    const cancelDragoverItem = (evnt, group) => {
      const {
        widgetObjList,
        dragWidget
      } = formDesignReactData;
      if (dragWidget) {
        if (group.children.some(widget => widget.name === dragWidget.name)) {
          const rest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(widgetObjList, item => item && item.id === dragWidget.id, {
            children: 'children'
          });
          if (rest) {
            rest.items.splice(rest.index, 1);
          }
        }
      }
    };
    const addNewWidget = (evnt, widgetName) => {
      if ($xeFormDesign.validWidgetUnique(widgetName)) {
        const {
          widgetObjList
        } = formDesignReactData;
        const dragWidget = $xeFormDesign.createWidget(widgetName);
        widgetObjList.push(dragWidget);
        formDesignReactData.activeWidget = dragWidget;
        formDesignReactData.sortWidget = null;
        formDesignReactData.dragWidget = null;
        $xeFormDesign.dispatchEvent('add-widget', {
          newWidget: dragWidget
        }, evnt);
      }
    };
    const renderWidgetList = group => {
      const widgetVNs = [];
      if (group.children) {
        group.children.forEach((widget, index) => {
          const {
            name
          } = widget;
          const configTitle = (0,widget_info/* getWidgetConfigTitle */.bd)(name, $xeFormDesign);
          const compConf = core_.renderer.get(name) || {};
          const widgetConf = (0,widget_info/* getWidgetConfig */.Bc)(name);
          const renderWidgetItem = compConf.renderFormDesignWidgetItem;
          widgetVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
            key: index,
            class: 'vxe-form-design--widget-item'
          }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
            class: 'vxe-form-design--widget-box',
            'data-widget-name': name,
            title: configTitle,
            draggable: true,
            onDragstart: dragstartEvent,
            onDragend: dragendEvent
          }, renderWidgetItem ? (0,vn/* getSlotVNs */.OW)(renderWidgetItem({}, {
            $formDesign: $xeFormDesign
          })) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
            class: ['vxe-form-design--widget-item-icon', widgetConf ? widgetConf.icon || '' : '']
          }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
            class: 'vxe-form-design--widget-item-name'
          }, configTitle), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
            class: 'vxe-form-design--widget-item-add',
            onClick(evnt) {
              addNewWidget(evnt, name);
            }
          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
            class: (0,core_.getIcon)().FORM_DESIGN_WIDGET_ADD
          })])])));
        });
      }
      return widgetVNs;
    };
    const renderWidgetGroups = () => {
      const {
        widgetConfigs
      } = formDesignReactData;
      return widgetConfigs.map((config, gIndex) => {
        const {
          title,
          group
        } = config;
        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
          key: gIndex,
          class: 'vxe-form-design--widget-group'
        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
          class: 'vxe-form-design--widget-title'
        }, group ? (0,core_.getI18n)(`vxe.formDesign.widget.group.${group}`) : `${title || ''}`), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
          class: 'vxe-form-design--widget-list',
          onDragover(evnt) {
            cancelDragoverItem(evnt, config);
          }
        }, renderWidgetList(config))]);
      });
    };
    return () => {
      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
        class: 'vxe-form-design--widget'
      }, renderWidgetGroups());
    };
  }
}));
;// CONCATENATED MODULE: ./packages/form-design/src/layout-view-item.ts




const ViewItemComponent = (0,comp/* defineVxeComponent */.u)({
  name: 'FormDesignLayoutViewItem',
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    itemIndex: {
      type: Number,
      default: 0
    },
    items: {
      type: Array,
      default: () => []
    }
  },
  emits: [],
  setup(props, {
    slots
  }) {
    const VxeUIButtonComponent = core_.VxeUI.getComponent('vxe-button');
    const $xeFormDesign = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeFormDesign', null);
    if (!$xeFormDesign) {
      return () => [];
    }
    const {
      reactData: formDesignReactData
    } = $xeFormDesign;
    const sortDragstartEvent = evnt => {
      const {
        widgetObjList
      } = formDesignReactData;
      const divEl = evnt.currentTarget;
      const widgetId = Number(divEl.getAttribute('data-widget-id'));
      const currRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(widgetObjList, item => item && item.id === widgetId, {
        children: 'children'
      });
      if (currRest) {
        formDesignReactData.dragWidget = null;
        formDesignReactData.sortWidget = currRest.item;
      }
    };
    const sortDragendEvent = () => {
      formDesignReactData.activeWidget = formDesignReactData.sortWidget;
      formDesignReactData.sortWidget = null;
    };
    const sortDragenterEvent = evnt => {
      const {
        widgetObjList,
        sortWidget
      } = formDesignReactData;
      const formDesignInternalData = $xeFormDesign.internalData;
      const {
        lastDragTime
      } = formDesignInternalData;
      if (lastDragTime && lastDragTime > Date.now() - 300) {
        evnt.preventDefault();
        return;
      }
      if (sortWidget) {
        const divEl = evnt.currentTarget;
        evnt.preventDefault();
        const widgetId = Number(divEl.getAttribute('data-widget-id'));
        if (widgetId !== sortWidget.id) {
          const targetRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(widgetObjList, item => item && item.id === widgetId, {
            children: 'children'
          });
          if (targetRest) {
            const currRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(widgetObjList, item => item && item.id === sortWidget.id, {
              children: 'children'
            });
            if (currRest) {
              // 控件换位置
              if (currRest.parent && currRest.parent.name === 'row') {
                // 如是是从 row 移出
                currRest.items[currRest.index] = $xeFormDesign.createEmptyWidget();
              } else {
                currRest.items.splice(currRest.index, 1);
              }
              targetRest.items.splice(targetRest.index, 0, currRest.item);
              formDesignInternalData.lastDragTime = Date.now();
              $xeFormDesign.dispatchEvent('drag-widget', {
                widget: currRest.item
              }, evnt);
            }
          }
        }
      }
    };
    // const dragoverItemEvent = (evnt: DragEvent) => {
    //   // const { sortWidget, dragWidget } = formDesignReactData
    //   // if (sortWidget || dragWidget) {
    //   //   evnt.preventDefault()
    //   // }
    // }
    const handleClickEvent = (evnt, item) => {
      $xeFormDesign.handleClickWidget(evnt, item);
    };
    return () => {
      const {
        dragWidget,
        activeWidget,
        sortWidget
      } = formDesignReactData;
      const {
        item
      } = props;
      const {
        name
      } = item;
      const isActive = activeWidget && activeWidget.id === item.id;
      const defaultSlot = slots.default;
      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
        key: item.id,
        'data-widget-id': item.id,
        draggable: true,
        class: ['vxe-form-design--preview-item', `widget-${external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().kebabCase(name)}`, {
          'is--active': isActive,
          'is--sort': sortWidget && sortWidget.id === item.id,
          'is--drag': dragWidget && dragWidget.id === item.id
        }],
        onDragstart: sortDragstartEvent,
        onDragend: sortDragendEvent,
        onDragenter: sortDragenterEvent,
        // onDragover: dragoverItemEvent,
        onClick(evnt) {
          handleClickEvent(evnt, item);
        }
      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
        class: 'vxe-form-design--preview-item-view vxe-form--item-row'
      }, defaultSlot ? defaultSlot({}) : []), isActive ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
        class: 'vxe-form-design--preview-item-operate'
      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIButtonComponent, {
        icon: (0,core_.getIcon)().FORM_DESIGN_WIDGET_COPY,
        status: 'primary',
        size: 'mini',
        circle: true,
        onClick(params) {
          $xeFormDesign.handleCopyWidget(params.$event, item);
        }
      }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIButtonComponent, {
        icon: (0,core_.getIcon)().FORM_DESIGN_WIDGET_DELETE,
        status: 'danger',
        size: 'mini',
        circle: true,
        onClick(params) {
          $xeFormDesign.handleRemoveWidget(params.$event, item);
        }
      })]) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)()]);
    };
  }
});
// EXTERNAL MODULE: ./packages/form-design/src/util.ts
var util = __webpack_require__(9442);
;// CONCATENATED MODULE: ./packages/form-design/src/layout-preview.ts








/* harmony default export */ var layout_preview = ((0,comp/* defineVxeComponent */.u)({
  name: 'FormDesignLayoutPreview',
  props: {},
  emits: [],
  setup() {
    const VxeUIFormComponent = core_.VxeUI.getComponent('vxe-form');
    const $xeFormDesign = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeFormDesign', null);
    if (!$xeFormDesign) {
      return () => [];
    }
    const {
      reactData: formDesignReactData
    } = $xeFormDesign;
    const dragenterEvent = evnt => {
      const {
        widgetObjList,
        dragWidget
      } = formDesignReactData;
      if (dragWidget) {
        evnt.preventDefault();
        const rest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(widgetObjList, item => item && item.id === dragWidget.id, {
          children: 'children'
        });
        if (!rest) {
          formDesignReactData.sortWidget = dragWidget;
          widgetObjList.push(dragWidget);
          $xeFormDesign.dispatchEvent('drag-widget', {
            widget: dragWidget
          }, evnt);
        }
      }
    };
    const dragoverEvent = evnt => {
      evnt.preventDefault();
    };
    let lastDragTime = Date.now();
    const handleDragenterTopPlaceEvent = evnt => {
      const {
        widgetObjList,
        sortWidget
      } = formDesignReactData;
      evnt.stopPropagation();
      if (lastDragTime > Date.now() - 300) {
        evnt.preventDefault();
        return;
      }
      if (sortWidget) {
        if ((0,util/* hasFormDesignLayoutType */.H)(sortWidget)) {
          return;
        }
        // const targetRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' })
        const currRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(widgetObjList, item => item.id === sortWidget.id, {
          children: 'children'
        });
        if (currRest) {
          const {
            item,
            index,
            items,
            parent
          } = currRest;
          if (parent && parent.name === 'row') {
            // 如是是从 row 移出
            currRest.items[currRest.index] = $xeFormDesign.createEmptyWidget();
          } else {
            items.splice(index, 1);
          }
          widgetObjList.unshift(item);
          lastDragTime = Date.now();
          $xeFormDesign.dispatchEvent('drag-widget', {
            widget: item
          }, evnt);
        }
      }
    };
    const handleDragenterBottomPlaceEvent = evnt => {
      const {
        widgetObjList,
        sortWidget
      } = formDesignReactData;
      evnt.stopPropagation();
      if (lastDragTime > Date.now() - 300) {
        evnt.preventDefault();
        return;
      }
      if (sortWidget) {
        if ((0,util/* hasFormDesignLayoutType */.H)(sortWidget)) {
          return;
        }
        // const targetRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' })
        const currRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(widgetObjList, item => item.id === sortWidget.id, {
          children: 'children'
        });
        if (currRest) {
          const {
            item,
            index,
            items,
            parent
          } = currRest;
          if (parent && parent.name === 'row') {
            // 如是是从 row 移出
            currRest.items[currRest.index] = $xeFormDesign.createEmptyWidget();
          } else {
            items.splice(index, 1);
          }
          widgetObjList.push(item);
          lastDragTime = Date.now();
          $xeFormDesign.dispatchEvent('drag-widget', {
            widget: item
          }, evnt);
        }
      }
    };
    return () => {
      const {
        widgetObjList
      } = formDesignReactData;
      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
        class: 'vxe-form-design--preview',
        onDragenter: dragenterEvent,
        onDragover: dragoverEvent
      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
        class: 'vxe-form-design--preview-wrapper'
      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
        class: 'vxe-form-design--preview-place-widget',
        onDragenter: handleDragenterTopPlaceEvent
      }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIFormComponent, {
        customLayout: true,
        span: 24,
        vertical: true
      }, {
        default() {
          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.TransitionGroup, {
            class: 'vxe-form-design--preview-list',
            tag: 'div',
            name: 'vxe-form-design--preview-list'
          }, {
            default: () => {
              return widgetObjList.map((widget, widgetIndex) => {
                return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(ViewItemComponent, {
                  key: widget.id,
                  item: widget,
                  itemIndex: widgetIndex,
                  items: widgetObjList
                }, {
                  default() {
                    const {
                      name
                    } = widget;
                    const compConf = core_.renderer.get(name) || {};
                    const renderWidgetDesignView = compConf.renderFormDesignWidgetEdit || compConf.renderFormDesignWidgetView;
                    const renderOpts = widget;
                    const isEditMode = true;
                    const params = {
                      widget,
                      readonly: false,
                      disabled: false,
                      isEditMode,
                      isViewMode: !isEditMode,
                      $formDesign: $xeFormDesign,
                      $formView: null
                    };
                    return renderWidgetDesignView ? (0,vn/* getSlotVNs */.OW)(renderWidgetDesignView(renderOpts, params)) : [];
                  }
                });
              });
            }
          });
        }
      }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
        class: 'vxe-form-design--preview-place-widget',
        onDragenter: handleDragenterBottomPlaceEvent
      })])]);
    };
  }
}));
;// CONCATENATED MODULE: ./packages/form-design/src/default-setting-form.ts



const DefaultSettingFormComponent = (0,comp/* defineVxeComponent */.u)({
  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,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeFormDesign', null);
    if (!$xeFormDesign) {
      return () => [];
    }
    const {
      props: formDesignProps
    } = $xeFormDesign;
    return () => {
      const {
        formData
      } = props;
      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIFormComponent, {
        data: formData,
        span: 24,
        vertical: true,
        titleBold: true
      }, {
        default() {
          const {
            showPc,
            showMobile
          } = formDesignProps;
          return [(0,external_commonjs_vue_commonjs2_vue_root_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIFormItemComponent, {
            title: (0,core_.getI18n)('vxe.formDesign.widgetProp.displaySetting.name')
          }, {
            default() {
              return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
                class: 'vxe-form-design--widget-form-item-devices'
              }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
                class: 'vxe-form-design--widget-form-item-pc'
              }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUITextComponent, {
                icon: (0,core_.getIcon)().FORM_DESIGN_PROPS_PC,
                content: (0,core_.getI18n)('vxe.formDesign.widgetProp.displaySetting.pc')
              }), (0,external_commonjs_vue_commonjs2_vue_root_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
                class: 'vxe-form-design--widget-form-item-mobile'
              }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUITextComponent, {
                icon: (0,core_.getIcon)().FORM_DESIGN_PROPS_MOBILE,
                content: (0,core_.getI18n)('vxe.formDesign.widgetProp.displaySetting.mobile')
              }), (0,external_commonjs_vue_commonjs2_vue_root_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,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)()];
        }
      });
    };
  }
});
;// CONCATENATED MODULE: ./packages/form-design/src/layout-setting.ts





/* harmony default export */ var layout_setting = ((0,comp/* defineVxeComponent */.u)({
  name: 'FormDesignLayoutSetting',
  props: {},
  emits: [],
  setup() {
    const VxeUITabsComponent = core_.VxeUI.getComponent('vxe-tabs');
    const VxeUITabPaneComponent = core_.VxeUI.getComponent('vxe-tab-pane');
    const $xeFormDesign = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeFormDesign', null);
    if (!$xeFormDesign) {
      return () => [];
    }
    const {
      props: formDesignProps,
      reactData: formDesignReactData
    } = $xeFormDesign;
    const activeTab = (0,external_commonjs_vue_commonjs2_vue_root_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
            class: 'vxe-form-design--custom-widget-form-view'
          }, (0,vn/* getSlotVNs */.OW)(renderWidgetFormView(activeWidget, {
            isEditMode,
            isViewMode: !isEditMode,
            widget: activeWidget,
            $formDesign: $xeFormDesign,
            $formView: null
          })));
        }
      }
      return (0,external_commonjs_vue_commonjs2_vue_root_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
            class: 'vxe-form-design--custom-setting-form-view'
          }, (0,vn/* getSlotVNs */.OW)(renderSettingView({}, {
            $formDesign: $xeFormDesign
          })));
        }
      }
      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(DefaultSettingFormComponent, {
        formData
      });
    };
    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => formDesignReactData.activeWidget, () => {
      activeTab.value = 1;
    });
    return () => {
      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
        class: 'vxe-form-design--setting'
      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
        class: 'vxe-form-design--setting-form'
      }, [(0,external_commonjs_vue_commonjs2_vue_root_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUITabPaneComponent, {
            title: (0,core_.getI18n)('vxe.formDesign.widgetPropTab'),
            name: 1
          }, {
            default() {
              return renderSettingWidgetForm();
            }
          }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUITabPaneComponent, {
            title: (0,core_.getI18n)('vxe.formDesign.widgetFormTab'),
            name: 2
          }, {
            default() {
              return renderSettingConfigForm();
            }
          })];
        }
      })])]);
    };
  }
}));
// EXTERNAL MODULE: ./packages/form-design/src/form-view.ts
var form_view = __webpack_require__(4592);
;// CONCATENATED MODULE: ./packages/form-design/src/default-style-form.ts



const getBoldOptions = () => {
  return [{
    label: (0,core_.getI18n)('vxe.formDesign.styleSetting.fontNormal'),
    value: false
  }, {
    label: (0,core_.getI18n)('vxe.formDesign.styleSetting.fontBold'),
    value: true
  }];
};
const getColonOptions = () => {
  return [{
    label: (0,core_.getI18n)('vxe.formDesign.styleSetting.colonVisible'),
    value: true
  }, {
    label: (0,core_.getI18n)('vxe.formDesign.styleSetting.colonHidden'),
    value: false
  }];
};
const getAlignOptions = () => {
  return [{
    label: (0,core_.getI18n)('vxe.formDesign.styleSetting.alignLeft'),
    value: ''
  }, {
    label: (0,core_.getI18n)('vxe.formDesign.styleSetting.alignRight'),
    value: 'right'
  }];
};
const getWidthUnitOptions = () => {
  return [{
    label: (0,core_.getI18n)('vxe.formDesign.styleSetting.unitPx'),
    value: ''
  }, {
    label: (0,core_.getI18n)('vxe.formDesign.styleSetting.unitPct'),
    value: '%'
  }];
};
const renderLayoutOption = (formData, field, type, changeEvent) => {
  const isVertical = type === 'vertical';
  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
    class: ['vxe-form-design--widget-form-item-option', `is--${type}`, {
      'is--active': isVertical ? formData[field] : !formData[field]
    }],
    onClick() {
      formData[field] = isVertical;
      changeEvent();
    }
  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
    class: 'vxe-form-design--widget-form-item-option-row'
  }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
    class: 'vxe-form-design--widget-form-item-option-row'
  }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {}, isVertical ? (0,core_.getI18n)('vxe.formDesign.styleSetting.verticalLayout') : (0,core_.getI18n)('vxe.formDesign.styleSetting.horizontalLayout'))]);
};
const DefaultPCStyleFormComponent = (0,comp/* defineVxeComponent */.u)({
  name: 'DefaultPCStyleForm',
  props: {
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [],
  setup(props) {
    const VxeUIFormComponent = core_.VxeUI.getComponent('vxe-form');
    const VxeUIFormItemComponent = core_.VxeUI.getComponent('vxe-form-item');
    const VxeUIInputComponent = core_.VxeUI.getComponent('VxeInput');
    const VxeUIRadioGroupComponent = core_.VxeUI.getComponent('vxe-radio-group');
    const VxeUISelectComponent = core_.VxeUI.getComponent('vxe-select');
    const $xeFormDesign = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeFormDesign', null);
    const verticalField = 'pcVertical';
    const refBoldOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(getBoldOptions());
    const refColonOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(getColonOptions());
    const refAlignOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(getAlignOptions());
    const refWidthUnitOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(getWidthUnitOptions());
    const refreshPreview = () => {
      if ($xeFormDesign) {
        $xeFormDesign.refreshPreviewView();
      }
    };
    const changeLayoutEvent = () => {
      const {
        formData
      } = props;
      if (!formData.pcTitleWidth) {
        formData.pcTitleWidth = 100;
      }
      refreshPreview();
    };
    return () => {
      const {
        formData
      } = props;
      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIFormComponent, {
        data: formData,
        span: 24,
        vertical: true,
        titleBold: true
      }, {
        default() {
          return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIFormItemComponent, {
            title: (0,core_.getI18n)('vxe.formDesign.styleSetting.layoutTitle'),
            field: verticalField
          }, {
            default() {
              return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
                class: 'vxe-form-design--widget-form-item-layout'
              }, [renderLayoutOption(formData, verticalField, 'vertical', changeLayoutEvent), renderLayoutOption(formData, verticalField, 'horizontal', changeLayoutEvent)])];
            }
          }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIFormItemComponent, {
            title: (0,core_.getI18n)('vxe.formDesign.styleSetting.styleTitle')
          }, {
            default() {
              return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {}, (0,core_.getI18n)('vxe.formDesign.styleSetting.boldTitle')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIRadioGroupComponent, {
                modelValue: formData.pcTitleBold,
                options: refBoldOpts.value,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.pcTitleBold = val;
                }
              })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {}, (0,core_.getI18n)('vxe.formDesign.styleSetting.colonTitle')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIRadioGroupComponent, {
                modelValue: formData.pcTitleColon,
                options: refColonOpts.value,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.pcTitleColon = val;
                }
              })]), formData.pcVertical ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {}, (0,core_.getI18n)('vxe.formDesign.styleSetting.alignTitle')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIRadioGroupComponent, {
                modelValue: formData.pcTitleAlign,
                options: refAlignOpts.value,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.pcTitleAlign = val;
                }
              })]), formData.pcVertical ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {}, (0,core_.getI18n)('vxe.formDesign.styleSetting.widthTitle')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIInputComponent, {
                class: 'vxe-form-design--widget-form-item-prop-width',
                modelValue: formData.pcTitleWidth,
                type: 'integer',
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.pcTitleWidth = val;
                }
              }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUISelectComponent, {
                class: 'vxe-form-design--widget-form-item-prop-unit',
                modelValue: formData.pcTitleWidthUnit,
                options: refWidthUnitOpts.value,
                transfer: true,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.pcTitleWidthUnit = val;
                }
              })])];
            }
          })];
        }
      });
    };
  }
});
const DefaultMobileStyleFormComponent = (0,comp/* defineVxeComponent */.u)({
  name: 'DefaultMobileStyleForm',
  props: {
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [],
  setup(props) {
    const VxeUIFormComponent = core_.VxeUI.getComponent('vxe-form');
    const VxeUIFormItemComponent = core_.VxeUI.getComponent('vxe-form-item');
    const VxeUIInputComponent = core_.VxeUI.getComponent('VxeInput');
    const VxeUIRadioGroupComponent = core_.VxeUI.getComponent('vxe-radio-group');
    const VxeUISelectComponent = core_.VxeUI.getComponent('vxe-select');
    const $xeFormDesign = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeFormDesign', null);
    const verticalField = 'mobileVertical';
    const refBoldOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(getBoldOptions());
    const refColonOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(getColonOptions());
    const refAlignOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(getAlignOptions());
    const refWidthUnitOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(getWidthUnitOptions());
    const refreshPreview = () => {
      if ($xeFormDesign) {
        $xeFormDesign.refreshPreviewView();
      }
    };
    const changeLayoutEvent = () => {
      const {
        formData
      } = props;
      if (!formData.mobileTitleWidth) {
        formData.mobileTitleWidth = 100;
      }
      refreshPreview();
    };
    return () => {
      const {
        formData
      } = props;
      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIFormComponent, {
        data: formData,
        span: 24,
        vertical: true,
        titleBold: true
      }, {
        default() {
          return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIFormItemComponent, {
            title: (0,core_.getI18n)('vxe.formDesign.styleSetting.layoutTitle'),
            field: verticalField
          }, {
            default() {
              return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
                class: 'vxe-form-design--widget-form-item-layout'
              }, [renderLayoutOption(formData, verticalField, 'vertical', changeLayoutEvent), renderLayoutOption(formData, verticalField, 'horizontal', changeLayoutEvent)])];
            }
          }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIFormItemComponent, {
            title: (0,core_.getI18n)('vxe.formDesign.styleSetting.styleTitle')
          }, {
            default() {
              return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {}, (0,core_.getI18n)('vxe.formDesign.styleSetting.boldTitle')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIRadioGroupComponent, {
                modelValue: formData.mobileTitleBold,
                options: refBoldOpts.value,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.mobileTitleBold = val;
                }
              })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
                class: 'vxe-form-design--widget-form-item-prop-list'
              }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {}, (0,core_.getI18n)('vxe.formDesign.styleSetting.colonTitle')), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(VxeUIRadioGroupComponent, {
                modelValue: formData.mobileTitleColon,
                options: refColonOpts.value,
                onChange: refreshPreview,
                'onUpdate:modelValue'(val) {
                  formData.mobileTitleColon = val;
                }
              })]), formData.mobileVertical ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)() : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
                class: 'vxe-form-design--widget-form-item-pr