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

A vue based PC component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _core = require("@vxe-ui/core");
var _vn = require("../../ui/src/vn");
var _widgetInfo = require("./widget-info");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = (0, _vue.defineComponent)({
  props: {},
  emits: [],
  setup() {
    const $xeFormDesign = (0, _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 = _xeUtils.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, _widgetInfo.getWidgetConfigTitle)(name, $xeFormDesign);
          const compConf = _core.renderer.get(name) || {};
          const widgetConf = (0, _widgetInfo.getWidgetConfig)(name);
          const renderWidgetItem = compConf.renderFormDesignWidgetItem;
          widgetVNs.push((0, _vue.h)('div', {
            key: index,
            class: 'vxe-form-design--widget-item'
          }, (0, _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)(renderWidgetItem({}, {
            $formDesign: $xeFormDesign
          })) : [(0, _vue.h)('i', {
            class: ['vxe-form-design--widget-item-icon', widgetConf ? widgetConf.icon || '' : '']
          }), (0, _vue.h)('span', {
            class: 'vxe-form-design--widget-item-name'
          }, configTitle), (0, _vue.h)('span', {
            class: 'vxe-form-design--widget-item-add',
            onClick(evnt) {
              addNewWidget(evnt, name);
            }
          }, [(0, _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, _vue.h)('div', {
          key: gIndex,
          class: 'vxe-form-design--widget-group'
        }, [(0, _vue.h)('div', {
          class: 'vxe-form-design--widget-title'
        }, group ? (0, _core.getI18n)(`vxe.formDesign.widget.group.${group}`) : `${title || ''}`), (0, _vue.h)('div', {
          class: 'vxe-form-design--widget-list',
          onDragover(evnt) {
            cancelDragoverItem(evnt, config);
          }
        }, renderWidgetList(config))]);
      });
    };
    return () => {
      return (0, _vue.h)('div', {
        class: 'vxe-form-design--widget'
      }, renderWidgetGroups());
    };
  }
});