{"ast":null,"code":"import { defineComponent, useSlots, computed, ref, openBlock, createBlock, unref, withCtx, createVNode, Transition, withDirectives, createElementVNode, mergeProps, withModifiers, normalizeClass, createElementBlock, renderSlot, toDisplayString, createCommentVNode, vShow } from 'vue';\nimport { Close } from '@element-plus/icons-vue';\nimport { ElOverlay } from '../../overlay/index.mjs';\nimport '../../focus-trap/index.mjs';\nimport { ElTeleport } from '../../teleport/index.mjs';\nimport '../../dialog/index.mjs';\nimport '../../../utils/index.mjs';\nimport { ElIcon } from '../../icon/index.mjs';\nimport '../../../hooks/index.mjs';\nimport { drawerProps, drawerEmits } from './drawer.mjs';\nimport _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';\nimport { useDeprecated } from '../../../hooks/use-deprecated/index.mjs';\nimport { useNamespace } from '../../../hooks/use-namespace/index.mjs';\nimport { useLocale } from '../../../hooks/use-locale/index.mjs';\nimport { useDialog } from '../../dialog/src/use-dialog.mjs';\nimport { addUnit } from '../../../utils/dom/style.mjs';\nimport ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';\nconst __default__ = defineComponent({\n  name: \"ElDrawer\",\n  inheritAttrs: false\n});\nconst _sfc_main = /* @__PURE__ */defineComponent({\n  ...__default__,\n  props: drawerProps,\n  emits: drawerEmits,\n  setup(__props, {\n    expose\n  }) {\n    const props = __props;\n    const slots = useSlots();\n    useDeprecated({\n      scope: \"el-drawer\",\n      from: \"the title slot\",\n      replacement: \"the header slot\",\n      version: \"3.0.0\",\n      ref: \"https://element-plus.org/en-US/component/drawer.html#slots\"\n    }, computed(() => !!slots.title));\n    const drawerRef = ref();\n    const focusStartRef = ref();\n    const ns = useNamespace(\"drawer\");\n    const {\n      t\n    } = useLocale();\n    const {\n      afterEnter,\n      afterLeave,\n      beforeLeave,\n      visible,\n      rendered,\n      titleId,\n      bodyId,\n      zIndex,\n      onModalClick,\n      onOpenAutoFocus,\n      onCloseAutoFocus,\n      onFocusoutPrevented,\n      onCloseRequested,\n      handleClose\n    } = useDialog(props, drawerRef);\n    const isHorizontal = computed(() => props.direction === \"rtl\" || props.direction === \"ltr\");\n    const drawerSize = computed(() => addUnit(props.size));\n    expose({\n      handleClose,\n      afterEnter,\n      afterLeave\n    });\n    return (_ctx, _cache) => {\n      return openBlock(), createBlock(unref(ElTeleport), {\n        to: _ctx.appendTo,\n        disabled: _ctx.appendTo !== \"body\" ? false : !_ctx.appendToBody\n      }, {\n        default: withCtx(() => [createVNode(Transition, {\n          name: unref(ns).b(\"fade\"),\n          onAfterEnter: unref(afterEnter),\n          onAfterLeave: unref(afterLeave),\n          onBeforeLeave: unref(beforeLeave),\n          persisted: \"\"\n        }, {\n          default: withCtx(() => [withDirectives(createVNode(unref(ElOverlay), {\n            mask: _ctx.modal,\n            \"overlay-class\": _ctx.modalClass,\n            \"z-index\": unref(zIndex),\n            onClick: unref(onModalClick)\n          }, {\n            default: withCtx(() => [createVNode(unref(ElFocusTrap), {\n              loop: \"\",\n              trapped: unref(visible),\n              \"focus-trap-el\": drawerRef.value,\n              \"focus-start-el\": focusStartRef.value,\n              onFocusAfterTrapped: unref(onOpenAutoFocus),\n              onFocusAfterReleased: unref(onCloseAutoFocus),\n              onFocusoutPrevented: unref(onFocusoutPrevented),\n              onReleaseRequested: unref(onCloseRequested)\n            }, {\n              default: withCtx(() => [createElementVNode(\"div\", mergeProps({\n                ref_key: \"drawerRef\",\n                ref: drawerRef,\n                \"aria-modal\": \"true\",\n                \"aria-label\": _ctx.title || void 0,\n                \"aria-labelledby\": !_ctx.title ? unref(titleId) : void 0,\n                \"aria-describedby\": unref(bodyId)\n              }, _ctx.$attrs, {\n                class: [unref(ns).b(), _ctx.direction, unref(visible) && \"open\"],\n                style: unref(isHorizontal) ? \"width: \" + unref(drawerSize) : \"height: \" + unref(drawerSize),\n                role: \"dialog\",\n                onClick: withModifiers(() => {}, [\"stop\"])\n              }), [createElementVNode(\"span\", {\n                ref_key: \"focusStartRef\",\n                ref: focusStartRef,\n                class: normalizeClass(unref(ns).e(\"sr-focus\")),\n                tabindex: \"-1\"\n              }, null, 2), _ctx.withHeader ? (openBlock(), createElementBlock(\"header\", {\n                key: 0,\n                class: normalizeClass(unref(ns).e(\"header\"))\n              }, [!_ctx.$slots.title ? renderSlot(_ctx.$slots, \"header\", {\n                key: 0,\n                close: unref(handleClose),\n                titleId: unref(titleId),\n                titleClass: unref(ns).e(\"title\")\n              }, () => [!_ctx.$slots.title ? (openBlock(), createElementBlock(\"span\", {\n                key: 0,\n                id: unref(titleId),\n                role: \"heading\",\n                \"aria-level\": _ctx.headerAriaLevel,\n                class: normalizeClass(unref(ns).e(\"title\"))\n              }, toDisplayString(_ctx.title), 11, [\"id\", \"aria-level\"])) : createCommentVNode(\"v-if\", true)]) : renderSlot(_ctx.$slots, \"title\", {\n                key: 1\n              }, () => [createCommentVNode(\" DEPRECATED SLOT \")]), _ctx.showClose ? (openBlock(), createElementBlock(\"button\", {\n                key: 2,\n                \"aria-label\": unref(t)(\"el.drawer.close\"),\n                class: normalizeClass(unref(ns).e(\"close-btn\")),\n                type: \"button\",\n                onClick: unref(handleClose)\n              }, [createVNode(unref(ElIcon), {\n                class: normalizeClass(unref(ns).e(\"close\"))\n              }, {\n                default: withCtx(() => [createVNode(unref(Close))]),\n                _: 1\n              }, 8, [\"class\"])], 10, [\"aria-label\", \"onClick\"])) : createCommentVNode(\"v-if\", true)], 2)) : createCommentVNode(\"v-if\", true), unref(rendered) ? (openBlock(), createElementBlock(\"div\", {\n                key: 1,\n                id: unref(bodyId),\n                class: normalizeClass(unref(ns).e(\"body\"))\n              }, [renderSlot(_ctx.$slots, \"default\")], 10, [\"id\"])) : createCommentVNode(\"v-if\", true), _ctx.$slots.footer ? (openBlock(), createElementBlock(\"div\", {\n                key: 2,\n                class: normalizeClass(unref(ns).e(\"footer\"))\n              }, [renderSlot(_ctx.$slots, \"footer\")], 2)) : createCommentVNode(\"v-if\", true)], 16, [\"aria-label\", \"aria-labelledby\", \"aria-describedby\", \"onClick\"])]),\n              _: 3\n            }, 8, [\"trapped\", \"focus-trap-el\", \"focus-start-el\", \"onFocusAfterTrapped\", \"onFocusAfterReleased\", \"onFocusoutPrevented\", \"onReleaseRequested\"])]),\n            _: 3\n          }, 8, [\"mask\", \"overlay-class\", \"z-index\", \"onClick\"]), [[vShow, unref(visible)]])]),\n          _: 3\n        }, 8, [\"name\", \"onAfterEnter\", \"onAfterLeave\", \"onBeforeLeave\"])]),\n        _: 3\n      }, 8, [\"to\", \"disabled\"]);\n    };\n  }\n});\nvar Drawer = /* @__PURE__ */_export_sfc(_sfc_main, [[\"__file\", \"drawer.vue\"]]);\nexport { Drawer as default };","map":{"version":3,"names":["name","inheritAttrs","slots","useSlots","useDeprecated","scope","from","replacement","version","ref","computed","title","drawerRef","focusStartRef","ns","useNamespace","t","useLocale","afterEnter","afterLeave","beforeLeave","visible","rendered","titleId","bodyId","zIndex","onModalClick","onOpenAutoFocus","onCloseAutoFocus","onFocusoutPrevented","onCloseRequested","handleClose","useDialog","props","isHorizontal","direction","drawerSize","addUnit","size","expose","_ctx","_cache","openBlock","createBlock","unref","ElTeleport","to","appendTo","disabled","appendToBody"],"sources":["../../../../../../packages/components/drawer/src/drawer.vue"],"sourcesContent":["<template>\n  <el-teleport\n    :to=\"appendTo\"\n    :disabled=\"appendTo !== 'body' ? false : !appendToBody\"\n  >\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        <el-focus-trap\n          loop\n          :trapped=\"visible\"\n          :focus-trap-el=\"drawerRef\"\n          :focus-start-el=\"focusStartRef\"\n          @focus-after-trapped=\"onOpenAutoFocus\"\n          @focus-after-released=\"onCloseAutoFocus\"\n          @focusout-prevented=\"onFocusoutPrevented\"\n          @release-requested=\"onCloseRequested\"\n        >\n          <div\n            ref=\"drawerRef\"\n            aria-modal=\"true\"\n            :aria-label=\"title || undefined\"\n            :aria-labelledby=\"!title ? titleId : undefined\"\n            :aria-describedby=\"bodyId\"\n            v-bind=\"$attrs\"\n            :class=\"[ns.b(), direction, visible && 'open']\"\n            :style=\"\n              isHorizontal ? 'width: ' + drawerSize : 'height: ' + drawerSize\n            \"\n            role=\"dialog\"\n            @click.stop\n          >\n            <span ref=\"focusStartRef\" :class=\"ns.e('sr-focus')\" tabindex=\"-1\" />\n            <header v-if=\"withHeader\" :class=\"ns.e('header')\">\n              <slot\n                v-if=\"!$slots.title\"\n                name=\"header\"\n                :close=\"handleClose\"\n                :title-id=\"titleId\"\n                :title-class=\"ns.e('title')\"\n              >\n                <span\n                  v-if=\"!$slots.title\"\n                  :id=\"titleId\"\n                  role=\"heading\"\n                  :aria-level=\"headerAriaLevel\"\n                  :class=\"ns.e('title')\"\n                >\n                  {{ title }}\n                </span>\n              </slot>\n              <slot v-else name=\"title\">\n                <!-- DEPRECATED SLOT -->\n              </slot>\n              <button\n                v-if=\"showClose\"\n                :aria-label=\"t('el.drawer.close')\"\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              <div :id=\"bodyId\" :class=\"ns.e('body')\">\n                <slot />\n              </div>\n            </template>\n            <div v-if=\"$slots.footer\" :class=\"ns.e('footer')\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </el-focus-trap>\n      </el-overlay>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, useSlots } from 'vue'\nimport { Close } from '@element-plus/icons-vue'\n\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport { useDialog } from '@element-plus/components/dialog'\nimport { addUnit } from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks'\nimport { drawerEmits, drawerProps } from './drawer'\n\ndefineOptions({\n  name: 'ElDrawer',\n  inheritAttrs: false,\n})\n\nconst props = defineProps(drawerProps)\ndefineEmits(drawerEmits)\nconst slots = useSlots()\n\nuseDeprecated(\n  {\n    scope: 'el-drawer',\n    from: 'the title slot',\n    replacement: 'the header slot',\n    version: '3.0.0',\n    ref: 'https://element-plus.org/en-US/component/drawer.html#slots',\n  },\n  computed(() => !!slots.title)\n)\n\nconst drawerRef = ref<HTMLElement>()\nconst focusStartRef = ref<HTMLElement>()\nconst ns = useNamespace('drawer')\nconst { t } = useLocale()\nconst {\n  afterEnter,\n  afterLeave,\n  beforeLeave,\n  visible,\n  rendered,\n  titleId,\n  bodyId,\n  zIndex,\n  onModalClick,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onFocusoutPrevented,\n  onCloseRequested,\n  handleClose,\n} = useDialog(props, drawerRef)\n\nconst isHorizontal = computed(\n  () => props.direction === 'rtl' || props.direction === 'ltr'\n)\nconst drawerSize = computed(() => addUnit(props.size))\n\ndefineExpose({\n  handleClose,\n  afterEnter,\n  afterLeave,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;mCAsGc;EACZA,IAAM;EACNC,YAAc;AAChB;;;;;;;;;IAIA,MAAMC,KAAA,GAAQC,QAAS;IAEvBC,aAAA;MACEC,KAAA;MAAAC,IACS;MAAAC,WACD;MAAAC,OACO;MAAAC,GACJ;IAAA,GAAAC,QACJ,SAAAR,KAAA,CAAAS,KAAA;IACP,MAAAC,SAAA,GAAAH,GAAA;IAAA,MACSI,aAAQ,GAAAJ,GAAM,EAAK;IAC9B,MAAAK,EAAA,GAAAC,YAAA;IAEA,MAAM;MAAAC;IAAA,IAAAC,SAA6B;IACnC,MAAM;MACAC,UAAA;MACAC,UAAI;MACJC,WAAA;MACJC,OAAA;MACAC,QAAA;MACAC,OAAA;MACAC,MAAA;MACAC,MAAA;MACAC,YAAA;MACAC,eAAA;MACAC,gBAAA;MACAC,mBAAA;MACAC,gBAAA;MACAC;IAAA,CACA,GAAAC,SAAA,CAAAC,KAAA,EAAArB,SAAA;IACA,MAAAsB,YAAA,GAAAxB,QAAA,OAAAuB,KAAA,CAAAE,SAAA,cAAAF,KAAA,CAAAE,SAAA;IACA,MAAAC,UAAA,GAAA1B,QAAA,OAAA2B,OAAA,CAAAJ,KAAA,CAAAK,IAAA;IACFC,MAAc;MAEdR,WAAqB;MACnBb,UAAM;MACRC;IACA;IAEa,QAAAqB,IAAA,EAAAC,MAAA;MACX,OAAAC,SAAA,IAAAC,WAAA,CAAAC,KAAA,CAAAC,UAAA;QACAC,EAAA,EAAAN,IAAA,CAAAO,QAAA;QACAC,QAAA,EAAAR,IAAA,CAAAO,QAAA,uBAAAP,IAAA,CAAAS;MAAA,CACD","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}