vxe-pc-ui 3.16.0 → 3.16.1

package/lib/drawer/src/drawer.js

@@ -0,0 +1,801 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.allActiveDrawers = void 0;
+var _comp = require("../../ui/src/comp");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _ui = require("../../ui");
+var _utils = require("../../ui/src/utils");
+var _dom = require("../../ui/src/dom");
+var _vn = require("../../ui/src/vn");
+var _button = _interopRequireDefault(require("../../button"));
+var _loading = _interopRequireDefault(require("../../loading"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var allActiveDrawers = exports.allActiveDrawers = [];
+var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
+  name: 'VxeDrawer',
+  mixins: [_ui.globalMixins.sizeMixin, _ui.globalMixins.permissionMixin],
+  props: {
+    value: Boolean,
+    id: String,
+    title: String,
+    loading: {
+      type: Boolean,
+      default: null
+    },
+    className: String,
+    position: {
+      type: [String, Object],
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.position;
+      }
+    },
+    lockView: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.lockView;
+      }
+    },
+    lockScroll: Boolean,
+    mask: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.mask;
+      }
+    },
+    maskClosable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.maskClosable;
+      }
+    },
+    escClosable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.escClosable;
+      }
+    },
+    cancelClosable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.cancelClosable;
+      }
+    },
+    confirmClosable: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.confirmClosable;
+      }
+    },
+    showHeader: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.showHeader;
+      }
+    },
+    showFooter: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.showFooter;
+      }
+    },
+    showClose: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.showClose;
+      }
+    },
+    content: [Number, String],
+    useHtml: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.useHtml;
+      }
+    },
+    showCancelButton: {
+      type: Boolean,
+      default: null
+    },
+    cancelButtonText: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.cancelButtonText;
+      }
+    },
+    showConfirmButton: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.showConfirmButton;
+      }
+    },
+    confirmButtonText: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.confirmButtonText;
+      }
+    },
+    destroyOnClose: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.destroyOnClose;
+      }
+    },
+    showTitleOverflow: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.showTitleOverflow;
+      }
+    },
+    preload: Boolean,
+    width: [Number, String],
+    height: [Number, String],
+    resize: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.resize;
+      }
+    },
+    zIndex: Number,
+    transfer: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.transfer;
+      }
+    },
+    padding: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.padding;
+      }
+    },
+    size: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.size || (0, _ui.getConfig)().size;
+      }
+    },
+    beforeHideMethod: {
+      type: Function,
+      default: function _default() {
+        return (0, _ui.getConfig)().drawer.beforeHideMethod;
+      }
+    },
+    slots: Object
+  },
+  inject: {
+    $xeModal: {
+      default: null
+    },
+    $xeParentDrawer: {
+      from: '$xeDrawer',
+      default: null
+    },
+    $xeTable: {
+      default: null
+    },
+    $xeForm: {
+      default: null
+    }
+  },
+  provide: function provide() {
+    var $xeDrawer = this;
+    return {
+      $xeDrawer: $xeDrawer
+    };
+  },
+  data: function data() {
+    var reactData = {
+      initialized: false,
+      visible: false,
+      contentVisible: false,
+      drawerZIndex: 0,
+      resizeFlag: 1
+    };
+    return {
+      xID: _xeUtils.default.uniqueId(),
+      reactData: reactData
+    };
+  },
+  computed: Object.assign(Object.assign({}, {}), {
+    computeBtnTransfer: function computeBtnTransfer() {
+      var $xeSelect = this;
+      var props = $xeSelect;
+      var $xeTable = $xeSelect.$xeTable;
+      var $xeModal = $xeSelect.$xeModal;
+      var $xeParentDrawer = $xeSelect.$xeParentDrawer;
+      var $xeForm = $xeSelect.$xeForm;
+      var transfer = props.transfer;
+      if (transfer === null) {
+        var globalTransfer = (0, _ui.getConfig)().select.transfer;
+        if (_xeUtils.default.isBoolean(globalTransfer)) {
+          return globalTransfer;
+        }
+        if ($xeTable || $xeModal || $xeParentDrawer || $xeForm) {
+          return true;
+        }
+      }
+      return transfer;
+    },
+    computeDragType: function computeDragType() {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      switch (props.position) {
+        case 'top':
+          return 'sb';
+        case 'bottom':
+          return 'st';
+        case 'left':
+          return 'wr';
+      }
+      return 'wl';
+    }
+  }),
+  methods: {
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeDrawer = this;
+      $xeDrawer.$emit(type, (0, _ui.createEvent)(evnt, {
+        $drawer: $xeDrawer
+      }, params));
+    },
+    emitModel: function emitModel(value) {
+      var $xeDrawer = this;
+      var _events = $xeDrawer._events;
+      $xeDrawer.$emit('input', value);
+      if (_events && _events.modelValue) {
+        $xeDrawer.$emit('modelValue', value);
+      } else {
+        $xeDrawer.$emit('model-value', value);
+      }
+    },
+    callSlot: function callSlot(slotFunc, params, h) {
+      var $xeDrawer = this;
+      var slots = $xeDrawer.$scopedSlots;
+      if (slotFunc) {
+        if (_xeUtils.default.isString(slotFunc)) {
+          slotFunc = slots[slotFunc] || null;
+        }
+        if (_xeUtils.default.isFunction(slotFunc)) {
+          return (0, _vn.getSlotVNs)(slotFunc.call($xeDrawer, params, h));
+        }
+      }
+      return [];
+    },
+    open: function open() {
+      var $xeDrawer = this;
+      return $xeDrawer.openDrawer();
+    },
+    close: function close() {
+      var $xeDrawer = this;
+      return $xeDrawer.closeDrawer('close');
+    },
+    getBox: function getBox() {
+      var $xeDrawer = this;
+      var boxElem = $xeDrawer.$refs.refDrawerBox;
+      return boxElem;
+    },
+    recalculate: function recalculate() {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      var width = props.width,
+        height = props.height;
+      var boxElem = $xeDrawer.getBox();
+      if (boxElem) {
+        boxElem.style.width = (0, _dom.toCssUnit)(width);
+        boxElem.style.height = (0, _dom.toCssUnit)(height);
+      }
+      return $xeDrawer.$nextTick();
+    },
+    updateZindex: function updateZindex() {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      var reactData = $xeDrawer.reactData;
+      var zIndex = props.zIndex;
+      var drawerZIndex = reactData.drawerZIndex;
+      if (zIndex) {
+        reactData.drawerZIndex = zIndex;
+      } else if (drawerZIndex < (0, _utils.getLastZIndex)()) {
+        reactData.drawerZIndex = (0, _utils.nextZIndex)();
+      }
+    },
+    removeActiveQueue: function removeActiveQueue() {
+      var $xeDrawer = this;
+      if (allActiveDrawers.indexOf($xeDrawer) > -1) {
+        _xeUtils.default.remove(allActiveDrawers, function (item) {
+          return item === $xeDrawer;
+        });
+      }
+    },
+    closeDrawer: function closeDrawer(type) {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      var reactData = $xeDrawer.reactData;
+      var beforeHideMethod = props.beforeHideMethod;
+      var visible = reactData.visible;
+      var params = {
+        type: type
+      };
+      if (visible) {
+        Promise.resolve(beforeHideMethod ? beforeHideMethod(params) : null).then(function (rest) {
+          if (!_xeUtils.default.isError(rest)) {
+            reactData.contentVisible = false;
+            $xeDrawer.removeActiveQueue();
+            $xeDrawer.dispatchEvent('before-hide', params, null);
+            setTimeout(function () {
+              reactData.visible = false;
+              $xeDrawer.emitModel(false);
+              $xeDrawer.dispatchEvent('hide', params, null);
+            }, 200);
+          }
+        }).catch(function (e) {
+          return e;
+        });
+      }
+      return $xeDrawer.$nextTick();
+    },
+    closeEvent: function closeEvent(evnt) {
+      var $xeDrawer = this;
+      var type = 'close';
+      $xeDrawer.dispatchEvent(type, {
+        type: type
+      }, evnt);
+      $xeDrawer.closeDrawer(type);
+    },
+    confirmEvent: function confirmEvent(evnt) {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      var confirmClosable = props.confirmClosable;
+      var type = 'confirm';
+      $xeDrawer.dispatchEvent(type, {
+        type: type
+      }, evnt);
+      if (confirmClosable) {
+        $xeDrawer.closeDrawer(type);
+      }
+    },
+    cancelEvent: function cancelEvent(evnt) {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      var cancelClosable = props.cancelClosable;
+      var type = 'cancel';
+      $xeDrawer.dispatchEvent(type, {
+        type: type
+      }, evnt);
+      if (cancelClosable) {
+        $xeDrawer.closeDrawer(type);
+      }
+    },
+    openDrawer: function openDrawer() {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      var reactData = $xeDrawer.reactData;
+      var showFooter = props.showFooter;
+      var initialized = reactData.initialized,
+        visible = reactData.visible;
+      var btnTransfer = $xeDrawer.computeBtnTransfer;
+      if (!initialized) {
+        reactData.initialized = true;
+        if (btnTransfer) {
+          var panelElem = $xeDrawer.$refs.refElem;
+          document.body.appendChild(panelElem);
+        }
+      }
+      if (!visible) {
+        reactData.visible = true;
+        reactData.contentVisible = false;
+        $xeDrawer.updateZindex();
+        allActiveDrawers.push($xeDrawer);
+        setTimeout(function () {
+          $xeDrawer.recalculate();
+          reactData.contentVisible = true;
+          $xeDrawer.$nextTick(function () {
+            if (showFooter) {
+              var confirmBtn = $xeDrawer.$refs.refConfirmBtn;
+              var cancelBtn = $xeDrawer.$refs.refCancelBtn;
+              var operBtn = confirmBtn || cancelBtn;
+              if (operBtn) {
+                operBtn.focus();
+              }
+            }
+            var type = '';
+            var params = {
+              type: type
+            };
+            $xeDrawer.emitModel(true);
+            $xeDrawer.dispatchEvent('show', params, null);
+          });
+        }, 10);
+      }
+      return $xeDrawer.$nextTick();
+    },
+    selfClickEvent: function selfClickEvent(evnt) {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      var el = $xeDrawer.$refs.refElem;
+      if (props.maskClosable && evnt.target === el) {
+        var type = 'mask';
+        $xeDrawer.closeDrawer(type);
+      }
+    },
+    handleGlobalKeydownEvent: function handleGlobalKeydownEvent(evnt) {
+      var $xeDrawer = this;
+      var isEsc = _ui.globalEvents.hasKey(evnt, _ui.GLOBAL_EVENT_KEYS.ESCAPE);
+      if (isEsc) {
+        var lastDrawer = _xeUtils.default.max(allActiveDrawers, function (item) {
+          return item.reactData.drawerZIndex;
+        });
+        // 多个时，只关掉最上层的窗口
+        if (lastDrawer) {
+          setTimeout(function () {
+            if (lastDrawer === $xeDrawer && lastDrawer.escClosable) {
+              var type = 'exit';
+              $xeDrawer.dispatchEvent('close', {
+                type: type
+              }, evnt);
+              $xeDrawer.closeDrawer(type);
+            }
+          }, 10);
+        }
+      }
+    },
+    boxMousedownEvent: function boxMousedownEvent() {
+      var $xeDrawer = this;
+      var reactData = $xeDrawer.reactData;
+      var drawerZIndex = reactData.drawerZIndex;
+      if (allActiveDrawers.some(function (comp) {
+        return comp.reactData.visible && comp.reactData.drawerZIndex > drawerZIndex;
+      })) {
+        $xeDrawer.updateZindex();
+      }
+    },
+    dragEvent: function dragEvent(evnt) {
+      var $xeModal = this;
+      var reactData = $xeModal.reactData;
+      evnt.preventDefault();
+      var _getDomNode = (0, _dom.getDomNode)(),
+        visibleHeight = _getDomNode.visibleHeight,
+        visibleWidth = _getDomNode.visibleWidth;
+      var marginSize = 0;
+      var targetElem = evnt.target;
+      var type = targetElem.getAttribute('type');
+      var minWidth = 0;
+      var minHeight = 0;
+      var maxWidth = visibleWidth;
+      var maxHeight = visibleHeight;
+      var boxElem = $xeModal.getBox();
+      var clientWidth = boxElem.clientWidth;
+      var clientHeight = boxElem.clientHeight;
+      var disX = evnt.clientX;
+      var disY = evnt.clientY;
+      var offsetTop = boxElem.offsetTop;
+      var offsetLeft = boxElem.offsetLeft;
+      var params = {
+        type: 'resize'
+      };
+      document.onmousemove = function (evnt) {
+        evnt.preventDefault();
+        var dragLeft;
+        var dragTop;
+        var width;
+        var height;
+        switch (type) {
+          case 'wl':
+            dragLeft = disX - evnt.clientX;
+            width = dragLeft + clientWidth;
+            if (offsetLeft - dragLeft > marginSize) {
+              if (width > minWidth) {
+                boxElem.style.width = "".concat(width < maxWidth ? width : maxWidth, "px");
+              }
+            }
+            break;
+          case 'st':
+            dragTop = disY - evnt.clientY;
+            height = clientHeight + dragTop;
+            if (offsetTop - dragTop > marginSize) {
+              if (height > minHeight) {
+                boxElem.style.height = "".concat(height < maxHeight ? height : maxHeight, "px");
+              }
+            }
+            break;
+          case 'wr':
+            dragLeft = evnt.clientX - disX;
+            width = dragLeft + clientWidth;
+            if (offsetLeft + width + marginSize < visibleWidth) {
+              if (width > minWidth) {
+                boxElem.style.width = "".concat(width < maxWidth ? width : maxWidth, "px");
+              }
+            }
+            break;
+          case 'sb':
+            dragTop = evnt.clientY - disY;
+            height = dragTop + clientHeight;
+            if (offsetTop + height + marginSize < visibleHeight) {
+              if (height > minHeight) {
+                boxElem.style.height = "".concat(height < maxHeight ? height : maxHeight, "px");
+              }
+            }
+            break;
+        }
+        boxElem.className = boxElem.className.replace(/\s?is--drag/, '') + ' is--drag';
+        $xeModal.dispatchEvent('resize', params, evnt);
+        reactData.resizeFlag++;
+      };
+      document.onmouseup = function () {
+        document.onmousemove = null;
+        document.onmouseup = null;
+        reactData.resizeFlag++;
+        setTimeout(function () {
+          boxElem.className = boxElem.className.replace(/\s?is--drag/, '');
+        }, 50);
+      };
+    },
+    //
+    // Render
+    //
+    renderTitles: function renderTitles(h) {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      var slots = $xeDrawer.$scopedSlots;
+      var _props$slots = props.slots,
+        propSlots = _props$slots === void 0 ? {} : _props$slots,
+        showClose = props.showClose,
+        title = props.title;
+      var titleSlot = slots.title || propSlots.title;
+      var cornerSlot = slots.corner || propSlots.corner;
+      return [h('div', {
+        class: 'vxe-drawer--header-title'
+      }, titleSlot ? $xeDrawer.callSlot(titleSlot, {
+        $drawer: $xeDrawer
+      }, h) : title ? (0, _utils.getFuncText)(title) : (0, _ui.getI18n)('vxe.alert.title')), h('div', {
+        class: 'vxe-drawer--header-right'
+      }, [cornerSlot ? h('div', {
+        class: 'vxe-drawer--corner-wrapper'
+      }, $xeDrawer.callSlot(cornerSlot, {
+        $drawer: $xeDrawer
+      }, h)) : (0, _ui.renderEmptyElement)($xeDrawer), showClose ? h('div', {
+        class: ['vxe-drawer--close-btn', 'trigger--btn'],
+        attrs: {
+          title: (0, _ui.getI18n)('vxe.drawer.close')
+        },
+        on: {
+          click: $xeDrawer.closeEvent
+        }
+      }, [h('i', {
+        class: (0, _ui.getIcon)().DRAWER_CLOSE
+      })]) : (0, _ui.renderEmptyElement)($xeDrawer)])];
+    },
+    renderHeader: function renderHeader(h) {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      var slots = $xeDrawer.$scopedSlots;
+      var _props$slots2 = props.slots,
+        propSlots = _props$slots2 === void 0 ? {} : _props$slots2,
+        showTitleOverflow = props.showTitleOverflow;
+      var headerSlot = slots.header || propSlots.header;
+      if (props.showHeader) {
+        return h('div', {
+          class: ['vxe-drawer--header', {
+            'is--ellipsis': showTitleOverflow
+          }]
+        }, headerSlot ? $xeDrawer.callSlot(headerSlot, {
+          $drawer: $xeDrawer
+        }, h) : $xeDrawer.renderTitles(h));
+      }
+      return (0, _ui.renderEmptyElement)($xeDrawer);
+    },
+    renderBody: function renderBody(h) {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      var slots = $xeDrawer.$scopedSlots;
+      var _props$slots3 = props.slots,
+        propSlots = _props$slots3 === void 0 ? {} : _props$slots3,
+        content = props.content,
+        useHtml = props.useHtml;
+      var defaultSlot = slots.default || propSlots.default;
+      var leftSlot = slots.left || propSlots.left;
+      var rightSlot = slots.right || propSlots.right;
+      return h('div', {
+        class: 'vxe-drawer--body'
+      }, [leftSlot ? h('div', {
+        class: 'vxe-drawer--body-left'
+      }, $xeDrawer.callSlot(leftSlot, {
+        $drawer: $xeDrawer
+      }, h)) : (0, _ui.renderEmptyElement)($xeDrawer), h('div', {
+        class: 'vxe-drawer--body-default'
+      }, [useHtml && !defaultSlot ? h('div', {
+        key: 'hc',
+        class: 'vxe-drawer--content',
+        domProps: {
+          innerHTML: (0, _utils.getFuncText)(content)
+        }
+      }) : h('div', {
+        class: 'vxe-drawer--content'
+      }, defaultSlot ? $xeDrawer.callSlot(defaultSlot, {
+        $drawer: $xeDrawer
+      }, h) : (0, _utils.getFuncText)(content))]), rightSlot ? h('div', {
+        class: 'vxe-drawer--body-right'
+      }, $xeDrawer.callSlot(rightSlot, {
+        $drawer: $xeDrawer
+      }, h)) : (0, _ui.renderEmptyElement)($xeDrawer), h(_loading.default, {
+        class: 'vxe-drawer--loading',
+        props: {
+          value: props.loading
+        }
+      })]);
+    },
+    renderDefaultFooter: function renderDefaultFooter(h) {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      var slots = $xeDrawer.$scopedSlots;
+      var _props$slots4 = props.slots,
+        propSlots = _props$slots4 === void 0 ? {} : _props$slots4,
+        showCancelButton = props.showCancelButton,
+        showConfirmButton = props.showConfirmButton,
+        loading = props.loading;
+      var lfSlot = slots.leftfoot || propSlots.leftfoot;
+      var rfSlot = slots.rightfoot || propSlots.rightfoot;
+      var btnVNs = [];
+      if (showCancelButton) {
+        btnVNs.push(h(_button.default, {
+          key: 1,
+          ref: 'refCancelBtn',
+          props: {
+            content: props.cancelButtonText || (0, _ui.getI18n)('vxe.button.cancel')
+          },
+          on: {
+            click: $xeDrawer.cancelEvent
+          }
+        }));
+      }
+      if (showConfirmButton) {
+        btnVNs.push(h(_button.default, {
+          key: 2,
+          ref: 'refConfirmBtn',
+          props: {
+            status: 'primary',
+            loading: loading,
+            content: props.confirmButtonText || (0, _ui.getI18n)('vxe.button.confirm')
+          },
+          on: {
+            click: $xeDrawer.confirmEvent
+          }
+        }));
+      }
+      return h('div', {
+        class: 'vxe-drawer--footer-wrapper'
+      }, [h('div', {
+        class: 'vxe-drawer--footer-left'
+      }, lfSlot ? $xeDrawer.callSlot(lfSlot, {
+        $drawer: $xeDrawer
+      }, h) : []), h('div', {
+        class: 'vxe-drawer--footer-right'
+      }, rfSlot ? $xeDrawer.callSlot(rfSlot, {
+        $drawer: $xeDrawer
+      }, h) : btnVNs)]);
+    },
+    renderFooter: function renderFooter(h) {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      var slots = $xeDrawer.$scopedSlots;
+      var _props$slots5 = props.slots,
+        propSlots = _props$slots5 === void 0 ? {} : _props$slots5;
+      var footerSlot = slots.footer || propSlots.footer;
+      if (props.showFooter) {
+        return h('div', {
+          class: 'vxe-drawer--footer'
+        }, footerSlot ? $xeDrawer.callSlot(footerSlot, {
+          $drawer: $xeDrawer
+        }, h) : [$xeDrawer.renderDefaultFooter(h)]);
+      }
+      return (0, _ui.renderEmptyElement)($xeDrawer);
+    },
+    renderVN: function renderVN(h) {
+      var $xeDrawer = this;
+      var props = $xeDrawer;
+      var slots = $xeDrawer.$scopedSlots;
+      var reactData = $xeDrawer.reactData;
+      var _props$slots6 = props.slots,
+        propSlots = _props$slots6 === void 0 ? {} : _props$slots6,
+        className = props.className,
+        position = props.position,
+        loading = props.loading,
+        lockScroll = props.lockScroll,
+        padding = props.padding,
+        lockView = props.lockView,
+        mask = props.mask,
+        resize = props.resize,
+        destroyOnClose = props.destroyOnClose;
+      var initialized = reactData.initialized,
+        contentVisible = reactData.contentVisible,
+        visible = reactData.visible;
+      var asideSlot = slots.aside || propSlots.aside;
+      var vSize = $xeDrawer.computeSize;
+      var dragType = $xeDrawer.computeDragType;
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-drawer--wrapper', "pos--".concat(position), className || '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--padding', padding), 'lock--scroll', lockScroll), 'lock--view', lockView), 'is--mask', mask), 'is--visible', contentVisible), 'is--active', visible), 'is--loading', loading)],
+        style: {
+          zIndex: reactData.drawerZIndex
+        },
+        on: {
+          click: $xeDrawer.selfClickEvent
+        }
+      }, initialized ? [h('div', {
+        ref: 'refDrawerBox',
+        class: 'vxe-drawer--box',
+        on: {
+          mousedown: $xeDrawer.boxMousedownEvent
+        }
+      }, [asideSlot ? h('div', {
+        class: 'vxe-drawer--aside'
+      }, $xeDrawer.callSlot(asideSlot, {
+        $drawer: $xeDrawer
+      }, h)) : (0, _ui.renderEmptyElement)($xeDrawer), h('div', {
+        class: 'vxe-drawer--container'
+      }, !reactData.initialized || destroyOnClose && !reactData.visible ? [] : [$xeDrawer.renderHeader(h), $xeDrawer.renderBody(h), $xeDrawer.renderFooter(h), resize ? h('span', {
+        class: 'vxe-drawer--resize'
+      }, [h('span', {
+        class: "".concat(dragType, "-resize"),
+        attrs: {
+          type: dragType
+        },
+        on: {
+          mousedown: $xeDrawer.dragEvent
+        }
+      })]) : (0, _ui.renderEmptyElement)($xeDrawer)])])] : []);
+    }
+  },
+  watch: {
+    width: function width() {
+      var $xeDrawer = this;
+      $xeDrawer.recalculate();
+    },
+    height: function height() {
+      var $xeDrawer = this;
+      $xeDrawer.recalculate();
+    },
+    value: function value(val) {
+      var $xeDrawer = this;
+      if (val) {
+        $xeDrawer.openDrawer();
+      } else {
+        $xeDrawer.closeDrawer('model');
+      }
+    }
+  },
+  mounted: function mounted() {
+    var $xeDrawer = this;
+    var props = $xeDrawer;
+    var reactData = $xeDrawer.reactData;
+    reactData.initialized = !!props.preload;
+    $xeDrawer.$nextTick(function () {
+      if (props.value) {
+        $xeDrawer.openDrawer();
+      }
+    });
+    if (props.escClosable) {
+      _ui.globalEvents.on($xeDrawer, 'keydown', $xeDrawer.handleGlobalKeydownEvent);
+    }
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $xeDrawer = this;
+    var panelElem = $xeDrawer.$refs.refElem;
+    if (panelElem && panelElem.parentNode) {
+      panelElem.parentNode.removeChild(panelElem);
+    }
+    _ui.globalEvents.off($xeDrawer, 'keydown');
+    $xeDrawer.removeActiveQueue();
+  },
+  render: function render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */