UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 4.34 kB
{"version":3,"file":"drawer2.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', customClass]\"\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 '@element-plus/icons-vue'\n\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { useDialog } from '@element-plus/components/dialog'\nimport ElIcon from '@element-plus/components/icon'\nimport { TrapFocus } from '@element-plus/directives'\nimport { useNamespace } from '@element-plus/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":["_openBlock","_createBlock","_Transition","_createVNode","_createElementBlock","_normalizeClass","_withCtx","_createCommentVNode"],"mappings":";;;;;;;;;;;;;AAqEA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,KAAK;AAChB,UAAM,YAAY;AAClB,UAAM,KAAK,aAAa;AAExB,UAAM,eAAe,SACnB,MAAM,MAAM,cAAc,SAAS,MAAM,cAAc;AAEzD,UAAM,aAAa,SAAS,MAC1B,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,WAAW,MAAM;AAG7D,WAAO;AAAA,SACF,UAAU,OAAO,KAAK;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;;SAjGSA,aAAMC;AAAA,IAAE;AAAA;KACnB;AAAA,gBACSC,YAAI;AAAA,MACV,cAAa;AAAA,MACb,cAAa;AAAA,MACb,cAAY,KAAE;AAAA;;uBAEf;AAAA,uBAESC,YAAK;AAAA,UACX;AAAA,UACA,iBAAS,KAAM;AAAA,UACf,WAAO;AAAA;;;yCAGSC;AAAA,cAEf;AAAA,cACC;AAAA,cACA,mBAAY,KAAK;AAAA,cACjB,cAAK;AAAA,cACL,OAAKC;AAAA,cAAe;cAIpB;AAAA;;eAEa;AAAA;gBAAa,KAAI;AAAA,gBAAgB,SAAK;AAAA;iBAClD;AAAA,2BACE,aAEO;AAAA,qCAFa;AAAA,oBAAE,MAAK;AAAA;;;;kBAM1B;AAAA,kBACA,cAAK,iBAAK,SAAC;AAAA,kBACZ,OAAKA,eAAQ;AAAA,kBACZ;AAAA;mBAED;AAAA,8BAAe,oBAAK;AAAA;;6BAAYC,QAAS;AAAA;;;;;oCAG7BC,mBAAQ;AAAA;gBACZ,KAAK;AAAA;iBACb;AAAA;uBAGOA,mBAAa;AAAA;gBAAG,KAAK;AAAA;iBAC9B;AAAA;;;;;;;cAzCI,SAAO;AAAA;;;;;;;;;;;"}