{"version":3,"file":"drawer.vue2.mjs","sources":["../../../../../packages/components/drawer/src/drawer.vue"],"sourcesContent":["<template>\n  <teleport to=\"body\" :disabled=\"!appendToBody\">\n    <transition\n      :name=\"ns.b('fade')\"\n      @after-enter=\"afterEnter\"\n      @after-leave=\"afterLeave\"\n      @before-leave=\"beforeLeave\"\n    >\n      <el-overlay\n        v-show=\"visible\"\n        :mask=\"modal\"\n        :overlay-class=\"modalClass\"\n        :z-index=\"zIndex\"\n        @click=\"onModalClick\"\n      >\n        <div\n          ref=\"drawerRef\"\n          v-trap-focus\n          aria-modal=\"true\"\n          :aria-labelledby=\"ns.e('title')\"\n          :aria-label=\"title\"\n          :class=\"[ns.b(), direction, visible && 'open']\"\n          :style=\"\n            isHorizontal ? 'width: ' + drawerSize : 'height: ' + drawerSize\n          \"\n          role=\"dialog\"\n          @click.stop\n        >\n          <header v-if=\"withHeader\" :id=\"ns.e('title')\" :class=\"ns.e('header')\">\n            <slot name=\"title\">\n              <span role=\"heading\" :title=\"title\">\n                {{ title }}\n              </span>\n            </slot>\n            <button\n              v-if=\"showClose\"\n              :aria-label=\"'close ' + (title || 'drawer')\"\n              :class=\"ns.e('close-btn')\"\n              type=\"button\"\n              @click=\"handleClose\"\n            >\n              <el-icon :class=\"ns.e('close')\"><close /></el-icon>\n            </button>\n          </header>\n          <template v-if=\"rendered\">\n            <section :class=\"ns.e('body')\">\n              <slot></slot>\n            </section>\n          </template>\n          <div v-if=\"$slots.footer\" :class=\"ns.e('footer')\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </el-overlay>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport { Close } from 'icon-ultra'\n\nimport { ElOverlay } from '@element-ultra/components/overlay'\nimport { useDialog } from '@element-ultra/components/dialog'\nimport ElIcon from '@element-ultra/components/icon'\nimport { TrapFocus } from '@element-ultra/directives'\nimport { useNamespace } from '@element-ultra/hooks'\nimport { drawerProps, drawerEmits } from './drawer'\n\nexport default defineComponent({\n  name: 'ElDrawer',\n  components: {\n    ElOverlay,\n    ElIcon,\n    Close,\n  },\n  directives: {\n    TrapFocus,\n  },\n  props: drawerProps,\n  emits: drawerEmits,\n\n  setup(props, ctx) {\n    const drawerRef = ref<HTMLElement>()\n    const ns = useNamespace('drawer')\n\n    const isHorizontal = computed(\n      () => props.direction === 'rtl' || props.direction === 'ltr'\n    )\n    const drawerSize = computed(() =>\n      typeof props.size === 'number' ? `${props.size}px` : props.size\n    )\n\n    return {\n      ...useDialog(props, ctx, drawerRef),\n      drawerRef,\n      isHorizontal,\n      drawerSize,\n      ns,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqEA,gBAAe,eAAgB,CAAA;AAAA,EAC7B,IAAM,EAAA,UAAA;AAAA,EACN,UAAY,EAAA;AAAA,IACV,SAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,GACF;AAAA,EACA,UAAY,EAAA;AAAA,IACV,SAAA;AAAA,GACF;AAAA,EACA,KAAO,EAAA,WAAA;AAAA,EACP,KAAO,EAAA,WAAA;AAAA,EAEP,KAAA,CAAM,OAAO,GAAK,EAAA;AAChB,IAAA,MAAM,YAAY,GAAiB,EAAA,CAAA;AACnC,IAAM,MAAA,EAAA,GAAK,aAAa,QAAQ,CAAA,CAAA;AAEhC,IAAA,MAAM,YAAe,GAAA,QAAA;AAAA,MACnB,MAAM,KAAA,CAAM,SAAc,KAAA,KAAA,IAAS,MAAM,SAAc,KAAA,KAAA;AAAA,KACzD,CAAA;AACA,IAAA,MAAM,UAAa,GAAA,QAAA;AAAA,MAAS,MAC1B,OAAO,KAAM,CAAA,IAAA,KAAS,WAAW,CAAG,EAAA,KAAA,CAAM,WAAW,KAAM,CAAA,IAAA;AAAA,KAC7D,CAAA;AAEA,IAAO,OAAA;AAAA,MACL,GAAG,SAAA,CAAU,KAAO,EAAA,GAAA,EAAK,SAAS,CAAA;AAAA,MAClC,SAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAA;AAAA,MACA,EAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAC,CAAA;;;;"}