{"version":3,"file":"drawer.vue.mjs","sources":["../../../../../../packages/components/drawer/src/drawer.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, defineComponent, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'\n  import type { StyleValue } from 'vue'\n  import { getComponentNamespace, getNamespace } from '../../../utils/global-config'\n  import { upperFirstChar, addUnit } from '../../../shared/utils'\n  import { isFunction, isPromise } from '../../../utils/is'\n  import { useOverflow } from '../../../hooks/use-overflow'\n  import BnButton from '../../../components/button/src/button.vue'\n  import BnSpace from '../../../components/space/src/space.vue'\n  import { KEYBOARD_KEY } from '../../../utils/keyboard'\n  import { getElement, off, on } from '../../../utils/dom'\n  import usePopupManager from '../../../hooks/use-popup-manager'\n  import { Scrollbar } from '../../scrollbar'\n  import { drawerProps } from './props'\n\n  export default defineComponent({\n    name: getComponentNamespace('Drawer'),\n    components: {\n      BnButton,\n      BnSpace,\n      Scrollbar\n    },\n    inheritAttrs: false,\n    props: drawerProps,\n    emits: ['update:modelValue', 'close', 'closed', 'open', 'opened'],\n    setup(props, { emit }) {\n      const ns = getNamespace('drawer')\n\n      const containerStyle = computed(() => {\n        const style: StyleValue = {}\n\n        if (props.width && ['left', 'right'].includes(props.placement)) {\n          style.width = addUnit(props.width)\n        }\n        if (props.height && ['top', 'bottom'].includes(props.placement)) {\n          style.height = addUnit(props.height)\n        }\n        return style\n      })\n\n      const modelVisible = computed(() => props.modelValue)\n      const animation = ref(false)\n      const mergeVisible = computed(() => modelVisible.value || animation.value)\n\n      const teleportContainer = computed(() => getElement(props.renderTo))\n      const drawerRef = ref<HTMLElement>()\n\n      const drawerBodyStyle = computed(() => {\n        const style: StyleValue = {}\n        if (props.showFooter) {\n          style.height = `calc(100% - 68px - 80px)`\n        } else {\n          style.height = `calc(100% - 68px)`\n        }\n        return style\n      })\n\n      const { zIndex, isLastDialog } = usePopupManager('dialog', {\n        visible: modelVisible\n      })\n\n      const { setOverflowHidden, resetOverflow } = useOverflow(teleportContainer, drawerRef)\n\n      const drawerStyle = computed(() => {\n        const style: StyleValue = {\n          zIndex: zIndex.value\n        }\n        return style\n      })\n\n      const emitToClose = (action: 'cancel' | 'ok', e?: Event) => {\n        emit('update:modelValue', false)\n        emit('close', action, e)\n      }\n\n      const loadingObj = reactive({\n        ok: false,\n        cancel: false\n      })\n\n      const interceptClose = (action: 'ok' | 'cancel', e?: Event) => {\n        const fnKey = `onBefore${upperFirstChar(action)}` as 'onBeforeOk' | 'onBeforeCancel'\n        const interceptFn = props[fnKey]\n        let result: boolean | Promise<boolean> = true\n        loadingObj[action] = true\n        if (isFunction(interceptFn)) {\n          result = interceptFn() ?? false\n        }\n        if (isPromise(result)) {\n          result.then((res) => {\n            loadingObj[action] = false\n            res && emitToClose(action, e)\n          })\n          return\n        }\n        loadingObj[action] = false\n        result && emitToClose(action, e)\n      }\n\n      const handleMask = () => {\n        if (!props.maskToClose) return\n        if (!props.mask) return\n        interceptClose('cancel')\n      }\n\n      const afterEnter = () => {\n        emit('opened')\n      }\n\n      // 动画结束\n      const afterLeave = () => {\n        animation.value = false\n        resetOverflow()\n        emit('closed')\n      }\n\n      let globalKeyDownListener = false\n\n      const handleGlobalKeyDown = (ev: KeyboardEvent) => {\n        if (props.escToClose && ev.key === KEYBOARD_KEY.ESC && isLastDialog()) {\n          interceptClose('cancel')\n        }\n      }\n\n      const addGlobalKeyDownListener = () => {\n        if (props.escToClose && !globalKeyDownListener) {\n          globalKeyDownListener = true\n          on(document.documentElement, 'keydown', handleGlobalKeyDown)\n        }\n      }\n\n      const removeGlobalKeyDownListener = () => {\n        globalKeyDownListener = false\n        off(document.documentElement, 'keydown', handleGlobalKeyDown)\n      }\n\n      onMounted(() => {\n        if (modelVisible.value) {\n          props.escToClose && addGlobalKeyDownListener()\n        }\n      })\n\n      // 页面意外关闭\n      onBeforeUnmount(() => {\n        resetOverflow()\n        removeGlobalKeyDownListener()\n      })\n\n      watch(\n        () => modelVisible.value,\n        (val) => {\n          if (val) {\n            emit('open')\n            setOverflowHidden()\n            animation.value = true\n            // 监听键盘事件\n            addGlobalKeyDownListener()\n          } else {\n            // 移除键盘事件\n            removeGlobalKeyDownListener()\n          }\n        }\n      )\n\n      // footer按钮内部控制\n      const handleCancel = (e: Event) => {\n        interceptClose('cancel', e)\n      }\n      const handleOk = (e: Event) => {\n        interceptClose('ok', e)\n      }\n\n      return {\n        ns,\n        containerStyle,\n        drawerStyle,\n        teleportContainer,\n        drawerRef,\n        modelVisible,\n        mergeVisible,\n        drawerBodyStyle,\n        handleMask,\n        afterEnter,\n        afterLeave,\n        interceptClose,\n        handleCancel,\n        handleOk,\n        loadingObj\n      }\n    }\n  })\n</script>\n\n<template>\n  <teleport :to=\"teleportContainer\" :disabled=\"disabled || !teleportContainer\">\n    <div\n      v-if=\"!destroyOnClosed || mergeVisible\"\n      v-show=\"mergeVisible\"\n      ref=\"drawerRef\"\n      :class=\"[`${ns}`, popupClass]\"\n      :style=\"drawerStyle\"\n      v-bind=\"$attrs\"\n    >\n      <transition name=\"bn-fade-in-standard\" appear>\n        <div v-if=\"mask\" v-show=\"modelVisible\" :class=\"`${ns}__mask`\" @click.self=\"handleMask\" />\n      </transition>\n      <transition\n        :name=\"`bn-slide-${placement}`\"\n        appear\n        @after-enter=\"afterEnter\"\n        @after-leave=\"afterLeave\"\n      >\n        <div\n          v-show=\"modelVisible\"\n          :class=\"[`${ns}__container`, `is-${placement}`]\"\n          :style=\"containerStyle\"\n        >\n          <slot>\n            <div :class=\"[`${ns}__header`]\">\n              <!-- title插槽 -->\n              <slot name=\"title\">\n                <span :class=\"[`${ns}__title`]\">{{ title }}</span>\n              </slot>\n            </div>\n            <div :class=\"[`${ns}__body`]\" :style=\"drawerBodyStyle\">\n              <Scrollbar>\n                <!-- body插槽 -->\n                <slot name=\"body\"></slot>\n              </Scrollbar>\n            </div>\n            <div v-if=\"showFooter\" :class=\"[`${ns}__footer`, `is-${placement}`]\">\n              <!-- footer插槽 -->\n              <slot name=\"footer\" :ok=\"handleOk\" :cancel=\"handleCancel\" :loading-obj=\"loadingObj\">\n                <BnSpace :size=\"12\">\n                  <BnButton type=\"primary\" :loading=\"loadingObj.ok\" @click=\"handleOk\"\n                    >{{ `${okText ? okText : '确认'}` }}\n                  </BnButton>\n                  <BnButton :loading=\"loadingObj.cancel\" @click=\"handleCancel\">{{\n                    `${cancelText ? cancelText : '取消'}`\n                  }}</BnButton>\n                </BnSpace>\n              </slot>\n            </div>\n          </slot>\n          <span\n            v-if=\"showClose\"\n            :class=\"[`${ns}__close-icon`]\"\n            @click=\"interceptClose('cancel')\"\n          ></span>\n        </div>\n      </transition>\n    </div>\n  </teleport>\n</template>\n"],"names":["_resolveComponent","_openBlock","teleportContainer","destroyOnClosed","mergeVisible","_createElementBlock","_mergeProps","$attrs","_createVNode","_Transition","ns","_normalizeClass","modelVisible","_withModifiers","afterEnter","_withCtx","_withDirectives","_createElementVNode","containerStyle","_normalizeStyle","_renderSlot","_createCommentVNode","title","drawerBodyStyle","showFooter","handleCancel","loadingObj","showClose"],"mappings":"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"}