@arco-design/web-vue/lib/drawer/drawer.js

Arco Design Vue 2.0: A Vue.js 3 UI Library

"use strict";
var vue = require("vue");
var globalConfig = require("../_utils/global-config.js");
var clientOnly = require("../_components/client-only.js");
var index = require("../button/index.js");
var iconHover = require("../_components/icon-hover.js");
var index$1 = require("../icon/icon-close/index.js");
var index$2 = require("../locale/index.js");
var useOverflow = require("../_hooks/use-overflow.js");
var dom = require("../_utils/dom.js");
var usePopupManager = require("../_hooks/use-popup-manager.js");
var is = require("../_utils/is.js");
var keyboard = require("../_utils/keyboard.js");
var useTeleportContainer = require("../_hooks/use-teleport-container.js");
var pluginVue_exportHelper = require("../_virtual/plugin-vue_export-helper.js");
const DRAWER_PLACEMENTS = ["top", "right", "bottom", "left"];
const _sfc_main = vue.defineComponent({
  name: "Drawer",
  components: {
    ClientOnly: clientOnly,
    ArcoButton: index["default"],
    IconHover: iconHover,
    IconClose: index$1
  },
  inheritAttrs: false,
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    defaultVisible: {
      type: Boolean,
      default: false
    },
    placement: {
      type: String,
      default: "right",
      validator: (value) => DRAWER_PLACEMENTS.includes(value)
    },
    title: String,
    mask: {
      type: Boolean,
      default: true
    },
    maskClosable: {
      type: Boolean,
      default: true
    },
    closable: {
      type: Boolean,
      default: true
    },
    okText: String,
    cancelText: String,
    okLoading: {
      type: Boolean,
      default: false
    },
    okButtonProps: {
      type: Object
    },
    cancelButtonProps: {
      type: Object
    },
    unmountOnClose: Boolean,
    width: {
      type: [Number, String],
      default: 250
    },
    height: {
      type: [Number, String],
      default: 250
    },
    popupContainer: {
      type: [String, Object],
      default: "body"
    },
    drawerStyle: {
      type: Object
    },
    bodyClass: {
      type: [String, Array]
    },
    bodyStyle: {
      type: [String, Object, Array]
    },
    onBeforeOk: {
      type: Function
    },
    onBeforeCancel: {
      type: Function
    },
    escToClose: {
      type: Boolean,
      default: true
    },
    renderToBody: {
      type: Boolean,
      default: true
    },
    header: {
      type: Boolean,
      default: true
    },
    footer: {
      type: Boolean,
      default: true
    },
    hideCancel: {
      type: Boolean,
      default: false
    }
  },
  emits: {
    "update:visible": (visible) => true,
    "ok": (e) => true,
    "cancel": (e) => true,
    "open": () => true,
    "close": () => true,
    "beforeOpen": () => true,
    "beforeClose": () => true
  },
  setup(props, { emit }) {
    const { popupContainer } = vue.toRefs(props);
    const prefixCls = globalConfig.getPrefixCls("drawer");
    const { t } = index$2.useI18n();
    const _visible = vue.ref(props.defaultVisible);
    const computedVisible = vue.computed(() => {
      var _a;
      return (_a = props.visible) != null ? _a : _visible.value;
    });
    const _okLoading = vue.ref(false);
    const mergedOkLoading = vue.computed(() => props.okLoading || _okLoading.value);
    const classNames = vue.computed(() => [
      `${prefixCls}-container`,
      {
        [`${prefixCls}-penetrable`]: !props.mask
      }
    ]);
    const { teleportContainer, containerRef } = useTeleportContainer.useTeleportContainer({
      popupContainer,
      visible: computedVisible
    });
    const mounted = vue.ref(computedVisible.value);
    let globalKeyDownListener = false;
    const handleGlobalKeyDown = (ev) => {
      if (props.escToClose && ev.key === keyboard.KEYBOARD_KEY.ESC && isLastDialog()) {
        handleCancel(ev);
      }
    };
    const addGlobalKeyDownListener = () => {
      if (props.escToClose && !globalKeyDownListener) {
        globalKeyDownListener = true;
        dom.on(document.documentElement, "keydown", handleGlobalKeyDown);
      }
    };
    const removeGlobalKeyDownListener = () => {
      if (globalKeyDownListener) {
        globalKeyDownListener = false;
        dom.off(document.documentElement, "keydown", handleGlobalKeyDown);
      }
    };
    const { zIndex, isLastDialog } = usePopupManager("dialog", {
      visible: computedVisible
    });
    const isFixed = vue.computed(() => {
      return (containerRef == null ? void 0 : containerRef.value) === document.body;
    });
    let promiseNumber = 0;
    const close = () => {
      promiseNumber++;
      if (_okLoading.value) {
        _okLoading.value = false;
      }
      _visible.value = false;
      emit("update:visible", false);
    };
    const handleOk = async (e) => {
      const currentPromiseNumber = promiseNumber;
      const closed = await new Promise(
        async (resolve) => {
          var _a;
          if (is.isFunction(props.onBeforeOk)) {
            let result = props.onBeforeOk((closed2 = true) => resolve(closed2));
            if (is.isPromise(result) || !is.isBoolean(result)) {
              _okLoading.value = true;
            }
            if (is.isPromise(result)) {
              try {
                result = (_a = await result) != null ? _a : true;
              } catch (error) {
                result = false;
                throw error;
              }
            }
            if (is.isBoolean(result)) {
              resolve(result);
            }
          } else {
            resolve(true);
          }
        }
      );
      if (currentPromiseNumber === promiseNumber) {
        if (closed) {
          emit("ok", e);
          close();
        } else if (_okLoading.value) {
          _okLoading.value = false;
        }
      }
    };
    const handleCancel = (e) => {
      var _a;
      let result = true;
      if (is.isFunction(props.onBeforeCancel)) {
        result = (_a = props.onBeforeCancel()) != null ? _a : false;
      }
      if (result) {
        emit("cancel", e);
        close();
      }
    };
    const handleMask = (e) => {
      if (props.maskClosable) {
        handleCancel(e);
      }
    };
    const handleOpen = () => {
      if (computedVisible.value) {
        emit("open");
      }
    };
    const handleClose = () => {
      if (!computedVisible.value) {
        mounted.value = false;
        resetOverflow();
        emit("close");
      }
    };
    const { setOverflowHidden, resetOverflow } = useOverflow.useOverflow(containerRef);
    vue.onMounted(() => {
      if (computedVisible.value) {
        mounted.value = true;
        setOverflowHidden();
        addGlobalKeyDownListener();
      }
    });
    vue.onBeforeUnmount(() => {
      resetOverflow();
      removeGlobalKeyDownListener();
    });
    vue.watch(computedVisible, (visible) => {
      if (_visible.value !== visible) {
        _visible.value = visible;
      }
      if (visible) {
        emit("beforeOpen");
        mounted.value = true;
        setOverflowHidden();
        addGlobalKeyDownListener();
      } else {
        emit("beforeClose");
        removeGlobalKeyDownListener();
      }
    });
    const style = vue.computed(() => {
      var _a;
      const style2 = {
        [props.placement]: 0,
        ...(_a = props.drawerStyle) != null ? _a : {}
      };
      if (["right", "left"].includes(props.placement)) {
        style2.width = is.isNumber(props.width) ? `${props.width}px` : props.width;
      } else {
        style2.height = is.isNumber(props.height) ? `${props.height}px` : props.height;
      }
      return style2;
    });
    return {
      prefixCls,
      classNames,
      style,
      t,
      mounted,
      computedVisible,
      mergedOkLoading,
      zIndex,
      handleOk,
      handleCancel,
      handleOpen,
      handleClose,
      handleMask,
      isFixed,
      teleportContainer
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_icon_close = vue.resolveComponent("icon-close");
  const _component_icon_hover = vue.resolveComponent("icon-hover");
  const _component_arco_button = vue.resolveComponent("arco-button");
  const _component_client_only = vue.resolveComponent("client-only");
  return vue.openBlock(), vue.createBlock(_component_client_only, null, {
    default: vue.withCtx(() => [
      (vue.openBlock(), vue.createBlock(vue.Teleport, {
        to: _ctx.teleportContainer,
        disabled: !_ctx.renderToBody
      }, [
        !_ctx.unmountOnClose || _ctx.computedVisible || _ctx.mounted ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
          key: 0,
          class: _ctx.classNames,
          style: _ctx.isFixed ? { zIndex: _ctx.zIndex } : { zIndex: "inherit", position: "absolute" }
        }, _ctx.$attrs), [
          vue.createVNode(vue.Transition, {
            name: "fade-drawer",
            appear: ""
          }, {
            default: vue.withCtx(() => [
              _ctx.mask ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                key: 0,
                class: vue.normalizeClass(`${_ctx.prefixCls}-mask`),
                onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleMask && _ctx.handleMask(...args))
              }, null, 2)), [
                [vue.vShow, _ctx.computedVisible]
              ]) : vue.createCommentVNode("v-if", true)
            ]),
            _: 1
          }),
          vue.createVNode(vue.Transition, {
            name: `slide-${_ctx.placement}-drawer`,
            appear: "",
            onAfterEnter: _ctx.handleOpen,
            onAfterLeave: _ctx.handleClose,
            persisted: ""
          }, {
            default: vue.withCtx(() => [
              vue.withDirectives(vue.createElementVNode("div", {
                class: vue.normalizeClass(_ctx.prefixCls),
                style: vue.normalizeStyle(_ctx.style)
              }, [
                _ctx.header ? (vue.openBlock(), vue.createElementBlock("div", {
                  key: 0,
                  class: vue.normalizeClass(`${_ctx.prefixCls}-header`)
                }, [
                  vue.renderSlot(_ctx.$slots, "header", {}, () => [
                    _ctx.$slots.title || _ctx.title ? (vue.openBlock(), vue.createElementBlock("div", {
                      key: 0,
                      class: vue.normalizeClass(`${_ctx.prefixCls}-title`)
                    }, [
                      vue.renderSlot(_ctx.$slots, "title", {}, () => [
                        vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
                      ])
                    ], 2)) : vue.createCommentVNode("v-if", true),
                    _ctx.closable ? (vue.openBlock(), vue.createElementBlock("div", {
                      key: 1,
                      tabindex: "-1",
                      role: "button",
                      "aria-label": "Close",
                      class: vue.normalizeClass(`${_ctx.prefixCls}-close-btn`),
                      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleCancel && _ctx.handleCancel(...args))
                    }, [
                      vue.createVNode(_component_icon_hover, null, {
                        default: vue.withCtx(() => [
                          vue.createVNode(_component_icon_close)
                        ]),
                        _: 1
                      })
                    ], 2)) : vue.createCommentVNode("v-if", true)
                  ])
                ], 2)) : vue.createCommentVNode("v-if", true),
                vue.createElementVNode("div", {
                  class: vue.normalizeClass([`${_ctx.prefixCls}-body`, _ctx.bodyClass]),
                  style: vue.normalizeStyle(_ctx.bodyStyle)
                }, [
                  vue.renderSlot(_ctx.$slots, "default")
                ], 6),
                _ctx.footer ? (vue.openBlock(), vue.createElementBlock("div", {
                  key: 1,
                  class: vue.normalizeClass(`${_ctx.prefixCls}-footer`)
                }, [
                  vue.renderSlot(_ctx.$slots, "footer", {}, () => [
                    !_ctx.hideCancel ? (vue.openBlock(), vue.createBlock(_component_arco_button, vue.mergeProps({ key: 0 }, _ctx.cancelButtonProps, { onClick: _ctx.handleCancel }), {
                      default: vue.withCtx(() => [
                        vue.createTextVNode(vue.toDisplayString(_ctx.cancelText || _ctx.t("drawer.cancelText")), 1)
                      ]),
                      _: 1
                    }, 16, ["onClick"])) : vue.createCommentVNode("v-if", true),
                    vue.createVNode(_component_arco_button, vue.mergeProps({
                      type: "primary",
                      loading: _ctx.mergedOkLoading
                    }, _ctx.okButtonProps, { onClick: _ctx.handleOk }), {
                      default: vue.withCtx(() => [
                        vue.createTextVNode(vue.toDisplayString(_ctx.okText || _ctx.t("drawer.okText")), 1)
                      ]),
                      _: 1
                    }, 16, ["loading", "onClick"])
                  ])
                ], 2)) : vue.createCommentVNode("v-if", true)
              ], 6), [
                [vue.vShow, _ctx.computedVisible]
              ])
            ]),
            _: 3
          }, 8, ["name", "onAfterEnter", "onAfterLeave"])
        ], 16)), [
          [vue.vShow, _ctx.computedVisible || _ctx.mounted]
        ]) : vue.createCommentVNode("v-if", true)
      ], 8, ["to", "disabled"]))
    ]),
    _: 3
  });
}
var _Drawer = /* @__PURE__ */ pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
module.exports = _Drawer;