/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

import { h as helper } from '../../_chunks/dep-29915b8e.js';
import { CloseIcon } from '@ldesign/icons-vue';
import { Button } from '../button/index.js';
import { renderContent, renderLNodeJSX } from '../../utils/render-node.js';
import mixins from '../../utils/mixins.js';
import getConfigReceiverMixins, { getGlobalIconMixins } from '../config-provider/config-receiver.js';
import TransferDom from '../../utils/transfer-dom.js';
import { emitEvent } from '../../utils/event.js';
import { addClass, removeClass } from '../../utils/dom.js';
import ActionMixin from '../dialog/mixins/action.js';
import props from './props.js';
import '../../utils/with-install.js';
import 'vue';
import 'lodash';
import '../../config.js';
import '../button/button.js';
import '../loading/index.js';
import '../loading/loading.js';
import '../loading/props.js';
import '../loading/icon/gradient.js';
import '../../_chunks/dep-eb467ddf.js';
import '../../_chunks/dep-cf772670.js';
import '../../_chunks/dep-47d77fc8.js';
import 'raf';
import 'lodash/isString';
import '../../_chunks/dep-70c789e5.js';
import '../../_chunks/dep-5210251b.js';
import '../../utils/easing.js';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import '../../_chunks/dep-def4c2ce.js';
import '../loading/plugin.js';
import '../../utils/ripple.js';
import '../button/props.js';
import '../../utils/helper.js';
import 'lodash/camelCase';
import 'lodash/isObject';

var _Drawer = mixins(ActionMixin, getConfigReceiverMixins("drawer"), getGlobalIconMixins()).extend({
  name: "LDrawer",
  components: {
    TButton: Button
  },
  props,
  directives: {
    TransferDom
  },
  data() {
    return {
      isSizeDragging: false,
      draggedSizeValue: null
    };
  },
  computed: {
    drawerClasses() {
      return [this.componentName, `${this.componentName}--${this.placement}`, {
        [`${this.componentName}--open`]: this.visible,
        [`${this.componentName}--attach`]: this.showInAttachedElement,
        [`${this.componentName}--without-mask`]: !this.showOverlay
      }];
    },
    sizeValue() {
      if (this.draggedSizeValue) return this.draggedSizeValue;
      const size = this.size ?? this.global.size;
      const defaultSize = isNaN(Number(size)) ? size : `${size}px`;
      return {
        small: "300px",
        medium: "500px",
        large: "760px"
      }[size] || defaultSize;
    },
    wrapperStyles() {
      return {
        transform: this.visible ? "translateX(0)" : void 0,
        width: this.isHorizontal ? this.sizeValue : "",
        height: this.isVertical ? this.sizeValue : ""
      };
    },
    wrapperClasses() {
      return [`${this.componentName}__content-wrapper`, `${this.componentName}__content-wrapper--${this.placement}`];
    },
    parentNode() {
      return this.$el && this.$el.parentNode;
    },
    modeAndPlacement() {
      return [this.mode, this.placement].join();
    },
    footerStyle() {
      return {
        display: "flex",
        justifyContent: this.placement === "right" ? "flex-start" : "flex-end"
      };
    },
    isHorizontal() {
      return ["right", "left"].includes(this.placement);
    },
    isVertical() {
      return ["top", "bottom"].includes(this.placement);
    },
    draggableLineStyles() {
      const oppositeMap = {
        left: "right",
        right: "left",
        top: "bottom",
        bottom: "top"
      };
      return {
        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"
      };
    }
  },
  watch: {
    modeAndPlacement: {
      handler() {
        this.handlePushMode();
      },
      immediate: true
    },
    visible: {
      handler(val) {
        var _this$$refs$drawerCon, _this$$refs$drawerCon2;
        if (val) (_this$$refs$drawerCon = this.$refs.drawerContainer) === null || _this$$refs$drawerCon === void 0 ? void 0 : (_this$$refs$drawerCon2 = _this$$refs$drawerCon.focus) === null || _this$$refs$drawerCon2 === void 0 ? void 0 : _this$$refs$drawerCon2.call(_this$$refs$drawerCon);
        this.handleScrollThrough(val);
      }
    }
  },
  updated() {
    this.updatePushMode();
  },
  mounted() {
    this.handleScrollThrough(this.visible);
  },
  render() {
    const h = arguments[0];
    if (this.destroyOnClose && !this.visible) return;
    const {
      CloseIcon: CloseIcon$1
    } = this.useGlobalIcon({
      CloseIcon: CloseIcon
    });
    const defaultCloseBtn = h(CloseIcon$1, {
      "class": `${this.classPrefix}-submenu-icon`
    });
    const body = renderContent(this, "default", "body");
    const defaultFooter = this.getDefaultFooter();
    return h("div", {
      "class": this.drawerClasses,
      "style": {
        zIndex: this.zIndex
      },
      "on": {
        "keydown": this.onKeyDown
      },
      "directives": [{
        name: "transfer-dom",
        value: this.attach
      }],
      "ref": "drawerContainer",
      "attrs": {
        "tabindex": 0
      }
    }, [this.showOverlay && h("div", {
      "class": `${this.componentName}__mask`,
      "on": {
        "click": this.handleWrapperClick
      }
    }), h("div", {
      "class": this.wrapperClasses,
      "style": this.wrapperStyles
    }, [this.header !== false ? h("div", {
      "class": `${this.componentName}__header`
    }, [renderLNodeJSX(this, "header", h("div"))]) : null, this.closeBtn !== false ? h("div", {
      "class": `${this.componentName}__close-btn`,
      "on": {
        "click": this.handleCloseBtnClick
      }
    }, [renderLNodeJSX(this, "closeBtn", defaultCloseBtn)]) : null, h("div", {
      "class": `${this.componentName}__body`
    }, [body]), this.footer !== false ? h("div", {
      "class": `${this.componentName}__footer`
    }, [renderLNodeJSX(this, "footer", defaultFooter)]) : null, this.sizeDraggable && h("div", {
      "style": this.draggableLineStyles,
      "on": {
        "mousedown": this.enableDrag
      }
    })])]);
  },
  methods: {
    enableDrag() {
      document.addEventListener("mouseup", this.handleMouseup, true);
      document.addEventListener("mousemove", this.handleMousemove, true);
      this.isSizeDragging = true;
    },
    handleMouseup() {
      document.removeEventListener("mouseup", this.handleMouseup, true);
      document.removeEventListener("mousemove", this.handleMousemove, true);
      this.isSizeDragging = false;
    },
    handleMousemove(e) {
      const {
        x,
        y
      } = e;
      const maxHeight = document.documentElement.clientHeight;
      const maxWidth = document.documentElement.clientWidth;
      const offsetHeight = 8;
      const offsetWidth = 8;
      if (this.isSizeDragging && this.sizeDraggable) {
        if (this.placement === "right") {
          const moveLeft = Math.min(Math.max(maxWidth - x + offsetWidth, offsetWidth), maxWidth);
          this.draggedSizeValue = `${moveLeft}px`;
        }
        if (this.placement === "left") {
          const moveRight = Math.min(Math.max(x + offsetWidth, offsetWidth), maxWidth);
          this.draggedSizeValue = `${moveRight}px`;
        }
        if (this.placement === "top") {
          const moveBottom = Math.min(Math.max(y + offsetHeight, offsetHeight), maxHeight);
          this.draggedSizeValue = `${moveBottom}px`;
        }
        if (this.placement === "bottom") {
          const moveTop = Math.min(Math.max(maxHeight - y + offsetHeight, offsetHeight), maxHeight);
          this.draggedSizeValue = `${moveTop}px`;
        }
      }
    },
    handleScrollThrough(visible) {
      if (!document || !document.body || !this.preventScrollThrough) return;
      if (visible && !this.showInAttachedElement) this.preventScrollThrough && addClass(document.body, `${this.componentName}--lock`);else this.preventScrollThrough && removeClass(document.body, `${this.componentName}--lock`);
    },
    handlePushMode() {
      if (this.mode !== "push") return;
      this.$nextTick(() => {
        if (!this.parentNode) return;
        this.parentNode.style.cssText = "transition: margin 300ms cubic-bezier(0.7, 0.3, 0.1, 1) 0s;";
      });
    },
    updatePushMode() {
      if (!this.parentNode) return;
      if (this.mode !== "push" || !this.parentNode) return;
      const marginStr = {
        left: `margin: 0 0 0 ${this.sizeValue}`,
        right: `margin: 0 0 0 -${this.sizeValue}`,
        top: `margin: ${this.sizeValue} 0 0 0`,
        bottom: `margin: -${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(btnType, btnApi) {
      const h = this.$createElement;
      const isCancel = btnType === "cancel";
      const clickAction = isCancel ? this.cancelBtnAction : this.confirmBtnAction;
      const theme = isCancel ? "default" : "primary";
      const isApiObject = typeof btnApi === "object";
      return h("t-button", helper([{
        "attrs": {
          "theme": theme
        },
        "on": {
          "click": clickAction
        }
      }, {
        "props": isApiObject ? btnApi : {}
      }, {
        "class": `${this.componentName}-${btnType}`
      }]), [btnApi && typeof btnApi === "object" ? btnApi.content : btnApi]);
    },
    isUseDefault(btnApi) {
      const baseTypes = ["string", "object"];
      return Boolean(btnApi && baseTypes.includes(typeof btnApi));
    },
    getDefaultFooter() {
      const h = this.$createElement;
      const confirmBtn = this.getConfirmBtn({
        confirmBtn: this.confirmBtn,
        globalConfirm: this.global.confirm,
        className: `${this.componentName}__confirm`
      });
      const cancelBtn = this.getCancelBtn({
        cancelBtn: this.cancelBtn,
        globalCancel: this.global.cancel,
        className: `${this.componentName}__cancel`
      });
      return h("div", {
        "style": this.footerStyle
      }, [this.placement === "right" ? confirmBtn : null, cancelBtn, this.placement !== "right" ? confirmBtn : null]);
    },
    handleCloseBtnClick(e) {
      emitEvent(this, "close-btn-click", {
        e
      });
      this.closeDrawer({
        trigger: "close-btn",
        e
      });
    },
    handleWrapperClick(e) {
      emitEvent(this, "overlay-click", {
        e
      });
      if (this.closeOnOverlayClick ?? this.global.closeOnOverlayClick) this.closeDrawer({
        trigger: "overlay",
        e
      });
    },
    onKeyDown(e) {
      if (e.key === "Escape") {
        emitEvent(this, "esc-keydown", {
          e
        });
        if (this.closeOnEscKeydown ?? this.global.closeOnEscKeydown) this.closeDrawer({
          trigger: "esc",
          e
        });
      }
    },
    confirmBtnAction(e) {
      emitEvent(this, "confirm", {
        e
      });
    },
    cancelBtnAction(e) {
      emitEvent(this, "cancel", {
        e
      });
      this.closeDrawer({
        trigger: "cancel",
        e
      });
    },
    closeDrawer(params) {
      emitEvent(this, "close", params);
      this.$emit("update:visible", false);
    }
  }
});

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