tdesign-vue/esm/drawer/drawer.js

tdesign-vue

/**
 * tdesign v1.12.1
 * (c) 2025 tdesign
 * @license MIT
 */

import { h as helper } from '../_chunks/dep-323b993c.js';
import _typeof from '@babel/runtime/helpers/typeof';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { CloseIcon } from 'tdesign-icons-vue';
import { Button } from '../button/index.js';
import props from './props.js';
import { renderContent, renderTNodeJSX } from '../utils/render-tnode.js';
import mixins from '../utils/mixins.js';
import getConfigReceiverMixins, { getGlobalIconMixins, getAttachConfigMixins } from '../config-provider/config-receiver.js';
import TransferDom from '../utils/transfer-dom.js';
import { emitEvent } from '../utils/event.js';
import ActionMixin from '../dialog/actions.js';
import { getScrollbarWidth } from '../_common/js/utils/getScrollbarWidth.js';
import { getSizeDraggable, calcMoveSize } from '../_common/js/drawer/utils.js';
import '../button/button.js';
import '../loading/index.js';
import '../loading/directive.js';
import 'lodash-es';
import '../loading/plugin.js';
import 'vue';
import '../loading/loading.js';
import '../loading/icon/gradient.js';
import '../_common/js/loading/circle-adapter.js';
import '../_common/js/utils/setStyle.js';
import '../_common/js/utils/helper.js';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/helpers/slicedToArray';
import '../utils/dom.js';
import 'raf';
import '../utils/easing.js';
import '../loading/props.js';
import '@babel/runtime/helpers/readOnlyError';
import '@vue/composition-api';
import '../config-provider/context.js';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/zh_CN.js';
import '../_chunks/dep-c44a474d.js';
import '../_chunks/dep-d639fbd7.js';
import 'dayjs';
import '../_chunks/dep-3c66615e.js';
import '../config-provider/type.js';
import '../_common/js/global-config/t.js';
import '../config.js';
import '../utils/withInstall.js';
import './style/index.js';
import '../loading/type.js';
import '../button/props.js';
import '../utils/ripple.js';
import '../button/type.js';
import '../utils/helper.js';

var key = 1;
var _Drawer = mixins(ActionMixin, getConfigReceiverMixins("drawer"), getGlobalIconMixins(), getAttachConfigMixins("drawer")).extend({
  name: "TDrawer",
  components: {
    TButton: Button
  },
  props: props,
  directives: {
    TransferDom: TransferDom
  },
  data: function data() {
    return {
      isSizeDragging: false,
      draggedSizeValue: null,
      animationStart: false,
      animationEnd: true,
      styleTimer: null,
      styleEl: null
    };
  },
  computed: {
    drawerClasses: function drawerClasses() {
      return [this.componentName, "".concat(this.componentName, "--").concat(this.placement), _defineProperty(_defineProperty(_defineProperty({}, "".concat(this.componentName, "--open"), this.visible), "".concat(this.componentName, "--attach"), this.showInAttachedElement), "".concat(this.componentName, "--without-mask"), !this.showOverlay), this.drawerClassName];
    },
    sizeValue: function sizeValue() {
      var _this$size;
      if (this.draggedSizeValue) return this.draggedSizeValue;
      var size = (_this$size = this.size) !== null && _this$size !== void 0 ? _this$size : this.global.size;
      var defaultSize = isNaN(Number(size)) ? size : "".concat(size, "px");
      return {
        small: "300px",
        medium: "500px",
        large: "760px"
      }[size] || defaultSize;
    },
    wrapperStyles: function wrapperStyles() {
      return {
        transform: this.visible && this.animationStart ? "translateX(0)" : void 0,
        width: this.isHorizontal ? this.sizeValue : "",
        height: this.isVertical ? this.sizeValue : ""
      };
    },
    wrapperClasses: function wrapperClasses() {
      return ["".concat(this.componentName, "__content-wrapper"), "".concat(this.componentName, "__content-wrapper--").concat(this.placement)];
    },
    parentNode: function parentNode() {
      return this.$el && this.$el.parentNode;
    },
    modeAndPlacement: function modeAndPlacement() {
      return [this.mode, this.placement].join();
    },
    footerStyle: function footerStyle() {
      return {
        display: "flex",
        justifyContent: this.placement === "right" ? "flex-start" : "flex-end"
      };
    },
    isHorizontal: function isHorizontal() {
      return ["right", "left"].includes(this.placement);
    },
    isVertical: function isVertical() {
      return ["top", "bottom"].includes(this.placement);
    },
    draggableLineStyles: function draggableLineStyles() {
      var oppositeMap = {
        left: "right",
        right: "left",
        top: "bottom",
        bottom: "top"
      };
      return _defineProperty(_defineProperty(_defineProperty(_defineProperty({
        zIndex: 1,
        position: "absolute",
        background: "transparent"
      }, oppositeMap[this.placement], 0), "width", this.isHorizontal ? "16px" : "100%"), "height", this.isHorizontal ? "100%" : "16px"), "cursor", this.isHorizontal ? "col-resize" : "row-resize");
    },
    computedAttach: function computedAttach() {
      return this.showInAttachedElement ? void 0 : this.attach || this.globalAttach();
    }
  },
  watch: {
    modeAndPlacement: {
      handler: function handler() {
        this.handlePushMode();
      },
      immediate: true
    },
    visible: {
      handler: function handler(val) {
        var _this = this;
        if (val) {
          this.$nextTick(function () {
            var _this$$refs$drawerCon, _this$$refs$drawerCon2;
            (_this$$refs$drawerCon = _this.$refs.drawerContainer) === null || _this$$refs$drawerCon === void 0 || (_this$$refs$drawerCon2 = _this$$refs$drawerCon.focus) === null || _this$$refs$drawerCon2 === void 0 || _this$$refs$drawerCon2.call(_this$$refs$drawerCon);
          });
        }
        this.handleScrollThrough(val);
      }
    }
  },
  updated: function updated() {
    this.updatePushMode();
  },
  mounted: function mounted() {
    var hasScrollBar = window.innerWidth > document.documentElement.clientWidth;
    var scrollWidth = hasScrollBar ? getScrollbarWidth() : 0;
    this.styleEl = document.createElement("style");
    this.styleEl.dataset.id = "td_drawer_".concat(+new Date(), "_").concat(key += 1);
    this.styleEl.innerHTML = "\n      html body {\n        overflow-y: hidden;\n        transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;\n        ".concat(this.mode === "push" ? "" : "width: calc(100% - ".concat(scrollWidth, "px);"), "\n      }\n    ");
    this.handleScrollThrough(this.visible);
  },
  beforeDestroy: function beforeDestroy() {
    this.clearStyleFunc();
  },
  render: function render() {
    var h = arguments[0];
    if (this.destroyOnClose && !this.visible && this.animationEnd) return null;
    var _this$useGlobalIcon = this.useGlobalIcon({
        CloseIcon: CloseIcon
      }),
      CloseIcon$1 = _this$useGlobalIcon.CloseIcon;
    var defaultCloseBtn = h(CloseIcon$1, {
      "class": "".concat(this.classPrefix, "-submenu-icon")
    });
    var body = renderContent(this, "default", "body");
    var defaultFooter = this.getDefaultFooter();
    return h("transition", {
      "on": {
        "appear": this.afterEnter,
        "beforeEnter": this.beforeEnter,
        "beforeLeave": this.beforeLeave,
        "afterEnter": this.afterEnter,
        "afterLeave": this.afterLeave
      },
      "attrs": {
        "duration": {
          enter: 10,
          leave: 300
        }
      }
    }, [h("div", {
      "class": this.drawerClasses,
      "style": {
        zIndex: this.zIndex
      },
      "on": {
        "keydown": this.onKeyDown
      },
      "directives": [{
        name: "transfer-dom",
        value: this.computedAttach
      }, {
        name: "show",
        value: this.visible
      }],
      "ref": "drawerContainer",
      "attrs": {
        "tabindex": 0
      }
    }, [this.showOverlay && h("transition", {
      "attrs": {
        "duration": 300,
        "name": "".concat(this.componentName, "-fade")
      }
    }, [h("div", {
      "key": "mask",
      "class": "".concat(this.componentName, "__mask"),
      "on": {
        "click": this.handleWrapperClick
      },
      "directives": [{
        name: "show",
        value: this.visible
      }]
    })]), h("div", {
      "class": this.wrapperClasses,
      "style": this.wrapperStyles
    }, [this.header !== false ? h("div", {
      "class": "".concat(this.componentName, "__header")
    }, [renderTNodeJSX(this, "header", h("div"))]) : null, this.closeBtn !== false ? h("div", {
      "class": "".concat(this.componentName, "__close-btn"),
      "on": {
        "click": this.handleCloseBtnClick
      }
    }, [renderTNodeJSX(this, "closeBtn", defaultCloseBtn)]) : null, h("div", {
      "class": "".concat(this.componentName, "__body")
    }, [body]), this.footer !== false ? h("div", {
      "class": "".concat(this.componentName, "__footer")
    }, [renderTNodeJSX(this, "footer", defaultFooter)]) : null, this.sizeDraggable && h("div", {
      "style": this.draggableLineStyles,
      "on": {
        "mousedown": this.enableDrag
      }
    })])])]);
  },
  methods: {
    clearStyleFunc: function clearStyleFunc() {
      var _this2 = this;
      clearTimeout(this.styleTimer);
      this.styleTimer = setTimeout(function () {
        var _this2$styleEl$parent, _this2$styleEl$parent2;
        (_this2$styleEl$parent = _this2.styleEl.parentNode) === null || _this2$styleEl$parent === void 0 || (_this2$styleEl$parent2 = _this2$styleEl$parent.removeChild) === null || _this2$styleEl$parent2 === void 0 || _this2$styleEl$parent2.call(_this2$styleEl$parent, _this2.styleEl);
      }, 150);
    },
    beforeEnter: function beforeEnter() {
      emitEvent(this, "before-open");
    },
    afterEnter: function afterEnter() {
      this.animationStart = true;
      this.animationEnd = false;
    },
    beforeLeave: function beforeLeave() {
      emitEvent(this, "before-close");
    },
    afterLeave: function afterLeave() {
      this.animationStart = false;
      this.animationEnd = true;
    },
    enableDrag: function enableDrag() {
      document.addEventListener("mouseup", this.handleMouseup, true);
      document.addEventListener("mousemove", this.handleMousemove, true);
      this.isSizeDragging = true;
    },
    handleMouseup: function handleMouseup() {
      document.removeEventListener("mouseup", this.handleMouseup, true);
      document.removeEventListener("mousemove", this.handleMousemove, true);
      this.isSizeDragging = false;
    },
    handleMousemove: function handleMousemove(e) {
      var x = e.x,
        y = e.y;
      var maxHeight = document.documentElement.clientHeight;
      var maxWidth = document.documentElement.clientWidth;
      var offsetHeight = 8;
      var offsetWidth = 8;
      var max = this.placement === "left" || this.placement === "right" ? maxWidth : maxHeight;
      var min = this.placement === "left" || this.placement === "right" ? offsetWidth : offsetHeight;
      var _getSizeDraggable = getSizeDraggable(this.sizeDraggable, {
          max: max,
          min: min
        }),
        allowSizeDraggable = _getSizeDraggable.allowSizeDraggable,
        limitMax = _getSizeDraggable.max,
        limitMin = _getSizeDraggable.min;
      if (!this.isSizeDragging || !allowSizeDraggable) return;
      var moveSize = calcMoveSize(this.placement, {
        x: x,
        y: y,
        maxWidth: maxWidth,
        maxHeight: maxHeight,
        max: limitMax,
        min: limitMin
      });
      if (typeof moveSize === "undefined") return;
      this.draggedSizeValue = "".concat(moveSize, "px");
    },
    handleScrollThrough: function handleScrollThrough(visible) {
      if (!document || !document.body || !this.preventScrollThrough) return;
      if (visible) {
        if (!this.showInAttachedElement && this.preventScrollThrough) {
          document.head.appendChild(this.styleEl);
        }
      } else {
        this.clearStyleFunc();
      }
    },
    handlePushMode: function handlePushMode() {
      var _this3 = this;
      if (this.mode !== "push") return;
      this.$nextTick(function () {
        if (!_this3.parentNode) return;
        _this3.parentNode.style.cssText = "transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;";
      });
    },
    updatePushMode: function updatePushMode() {
      if (!this.parentNode) return;
      if (this.mode !== "push" || !this.parentNode) return;
      var marginStr = {
        left: "margin: 0 0 0 ".concat(this.sizeValue),
        right: "margin: 0 0 0 -".concat(this.sizeValue),
        top: "margin: ".concat(this.sizeValue, " 0 0 0"),
        bottom: "margin: -".concat(this.sizeValue, " 0 0 0")
      }[this.placement];
      if (this.visible) {
        this.parentNode.style.cssText += marginStr;
      } else {
        this.parentNode.style.cssText = this.parentNode.style.cssText.replace(/margin:.+;/, "");
      }
    },
    getDefaultBtn: function getDefaultBtn(btnType, btnApi) {
      var h = this.$createElement;
      var isCancel = btnType === "cancel";
      var clickAction = isCancel ? this.cancelBtnAction : this.confirmBtnAction;
      var theme = isCancel ? "default" : "primary";
      var isApiObject = _typeof(btnApi) === "object";
      return h("t-button", helper([{
        "attrs": {
          "theme": theme
        },
        "on": {
          "click": clickAction
        }
      }, {
        "props": isApiObject ? btnApi : {}
      }, {
        "class": "".concat(this.componentName, "-").concat(btnType)
      }]), [btnApi && _typeof(btnApi) === "object" ? btnApi.content : btnApi]);
    },
    isUseDefault: function isUseDefault(btnApi) {
      var baseTypes = ["string", "object"];
      return Boolean(btnApi && baseTypes.includes(_typeof(btnApi)));
    },
    getDefaultFooter: function getDefaultFooter() {
      var h = this.$createElement;
      var confirmBtn = this.getConfirmBtn({
        confirmBtn: this.confirmBtn,
        globalConfirm: this.global.confirm,
        className: "".concat(this.componentName, "__confirm")
      });
      var cancelBtn = this.getCancelBtn({
        cancelBtn: this.cancelBtn,
        globalCancel: this.global.cancel,
        className: "".concat(this.componentName, "__cancel")
      });
      return h("div", {
        "style": this.footerStyle
      }, [this.placement === "right" ? confirmBtn : null, cancelBtn, this.placement !== "right" ? confirmBtn : null]);
    },
    handleCloseBtnClick: function handleCloseBtnClick(e) {
      emitEvent(this, "close-btn-click", {
        e: e
      });
      this.closeDrawer({
        trigger: "close-btn",
        e: e
      });
    },
    handleWrapperClick: function handleWrapperClick(e) {
      var _this$closeOnOverlayC;
      emitEvent(this, "overlay-click", {
        e: e
      });
      if ((_this$closeOnOverlayC = this.closeOnOverlayClick) !== null && _this$closeOnOverlayC !== void 0 ? _this$closeOnOverlayC : this.global.closeOnOverlayClick) {
        this.closeDrawer({
          trigger: "overlay",
          e: e
        });
      }
    },
    onKeyDown: function onKeyDown(e) {
      if (e.key === "Escape") {
        var _this$closeOnEscKeydo;
        emitEvent(this, "esc-keydown", {
          e: e
        });
        if ((_this$closeOnEscKeydo = this.closeOnEscKeydown) !== null && _this$closeOnEscKeydo !== void 0 ? _this$closeOnEscKeydo : this.global.closeOnEscKeydown) {
          this.closeDrawer({
            trigger: "esc",
            e: e
          });
        }
      }
    },
    confirmBtnAction: function confirmBtnAction(e) {
      emitEvent(this, "confirm", {
        e: e
      });
    },
    cancelBtnAction: function cancelBtnAction(e) {
      emitEvent(this, "cancel", {
        e: e
      });
      this.closeDrawer({
        trigger: "cancel",
        e: e
      });
    },
    closeDrawer: function closeDrawer(params) {
      emitEvent(this, "close", params);
      this.$emit("update:visible", false);
    }
  }
});

export { _Drawer as default };
//# sourceMappingURL=drawer.js.map