You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
14 KiB
1 line
14 KiB
{"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":[]} |