drawer2.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var iconsVue = require('@element-plus/icons-vue');
  5. var index = require('../../overlay/index.js');
  6. require('../../focus-trap/index.js');
  7. require('../../dialog/index.js');
  8. require('../../../utils/index.js');
  9. var index$1 = require('../../icon/index.js');
  10. require('../../../hooks/index.js');
  11. var drawer = require('./drawer.js');
  12. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  13. var focusTrap = require('../../focus-trap/src/focus-trap.js');
  14. var index$2 = require('../../../hooks/use-deprecated/index.js');
  15. var index$3 = require('../../../hooks/use-namespace/index.js');
  16. var index$4 = require('../../../hooks/use-locale/index.js');
  17. var style = require('../../../utils/dom/style.js');
  18. var useDialog = require('../../dialog/src/use-dialog.js');
  19. const _sfc_main = vue.defineComponent({
  20. name: "ElDrawer",
  21. components: {
  22. ElOverlay: index.ElOverlay,
  23. ElFocusTrap: focusTrap["default"],
  24. ElIcon: index$1.ElIcon,
  25. Close: iconsVue.Close
  26. },
  27. inheritAttrs: false,
  28. props: drawer.drawerProps,
  29. emits: drawer.drawerEmits,
  30. setup(props, { slots }) {
  31. index$2.useDeprecated({
  32. scope: "el-drawer",
  33. from: "the title slot",
  34. replacement: "the header slot",
  35. version: "3.0.0",
  36. ref: "https://element-plus.org/en-US/component/drawer.html#slots"
  37. }, vue.computed(() => !!slots.title));
  38. index$2.useDeprecated({
  39. scope: "el-drawer",
  40. from: "custom-class",
  41. replacement: "class",
  42. version: "2.3.0",
  43. ref: "https://element-plus.org/en-US/component/drawer.html#attributes",
  44. type: "Attribute"
  45. }, vue.computed(() => !!props.customClass));
  46. const drawerRef = vue.ref();
  47. const focusStartRef = vue.ref();
  48. const ns = index$3.useNamespace("drawer");
  49. const { t } = index$4.useLocale();
  50. const isHorizontal = vue.computed(() => props.direction === "rtl" || props.direction === "ltr");
  51. const drawerSize = vue.computed(() => style.addUnit(props.size));
  52. return {
  53. ...useDialog.useDialog(props, drawerRef),
  54. drawerRef,
  55. focusStartRef,
  56. isHorizontal,
  57. drawerSize,
  58. ns,
  59. t
  60. };
  61. }
  62. });
  63. const _hoisted_1 = ["aria-label", "aria-labelledby", "aria-describedby"];
  64. const _hoisted_2 = ["id"];
  65. const _hoisted_3 = ["aria-label"];
  66. const _hoisted_4 = ["id"];
  67. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  68. const _component_close = vue.resolveComponent("close");
  69. const _component_el_icon = vue.resolveComponent("el-icon");
  70. const _component_el_focus_trap = vue.resolveComponent("el-focus-trap");
  71. const _component_el_overlay = vue.resolveComponent("el-overlay");
  72. return vue.openBlock(), vue.createBlock(vue.Teleport, {
  73. to: "body",
  74. disabled: !_ctx.appendToBody
  75. }, [
  76. vue.createVNode(vue.Transition, {
  77. name: _ctx.ns.b("fade"),
  78. onAfterEnter: _ctx.afterEnter,
  79. onAfterLeave: _ctx.afterLeave,
  80. onBeforeLeave: _ctx.beforeLeave,
  81. persisted: ""
  82. }, {
  83. default: vue.withCtx(() => [
  84. vue.withDirectives(vue.createVNode(_component_el_overlay, {
  85. mask: _ctx.modal,
  86. "overlay-class": _ctx.modalClass,
  87. "z-index": _ctx.zIndex,
  88. onClick: _ctx.onModalClick
  89. }, {
  90. default: vue.withCtx(() => [
  91. vue.createVNode(_component_el_focus_trap, {
  92. loop: "",
  93. trapped: _ctx.visible,
  94. "focus-trap-el": _ctx.drawerRef,
  95. "focus-start-el": _ctx.focusStartRef,
  96. onReleaseRequested: _ctx.onCloseRequested
  97. }, {
  98. default: vue.withCtx(() => [
  99. vue.createElementVNode("div", vue.mergeProps({
  100. ref: "drawerRef",
  101. "aria-modal": "true",
  102. "aria-label": _ctx.title || void 0,
  103. "aria-labelledby": !_ctx.title ? _ctx.titleId : void 0,
  104. "aria-describedby": _ctx.bodyId
  105. }, _ctx.$attrs, {
  106. class: [_ctx.ns.b(), _ctx.direction, _ctx.visible && "open", _ctx.customClass],
  107. style: _ctx.isHorizontal ? "width: " + _ctx.drawerSize : "height: " + _ctx.drawerSize,
  108. role: "dialog",
  109. onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
  110. }, ["stop"]))
  111. }), [
  112. vue.createElementVNode("span", {
  113. ref: "focusStartRef",
  114. class: vue.normalizeClass(_ctx.ns.e("sr-focus")),
  115. tabindex: "-1"
  116. }, null, 2),
  117. _ctx.withHeader ? (vue.openBlock(), vue.createElementBlock("header", {
  118. key: 0,
  119. class: vue.normalizeClass(_ctx.ns.e("header"))
  120. }, [
  121. !_ctx.$slots.title ? vue.renderSlot(_ctx.$slots, "header", {
  122. key: 0,
  123. close: _ctx.handleClose,
  124. titleId: _ctx.titleId,
  125. titleClass: _ctx.ns.e("title")
  126. }, () => [
  127. !_ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", {
  128. key: 0,
  129. id: _ctx.titleId,
  130. role: "heading",
  131. class: vue.normalizeClass(_ctx.ns.e("title"))
  132. }, vue.toDisplayString(_ctx.title), 11, _hoisted_2)) : vue.createCommentVNode("v-if", true)
  133. ]) : vue.renderSlot(_ctx.$slots, "title", { key: 1 }, () => [
  134. vue.createCommentVNode(" DEPRECATED SLOT ")
  135. ]),
  136. _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
  137. key: 2,
  138. "aria-label": _ctx.t("el.drawer.close"),
  139. class: vue.normalizeClass(_ctx.ns.e("close-btn")),
  140. type: "button",
  141. onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
  142. }, [
  143. vue.createVNode(_component_el_icon, {
  144. class: vue.normalizeClass(_ctx.ns.e("close"))
  145. }, {
  146. default: vue.withCtx(() => [
  147. vue.createVNode(_component_close)
  148. ]),
  149. _: 1
  150. }, 8, ["class"])
  151. ], 10, _hoisted_3)) : vue.createCommentVNode("v-if", true)
  152. ], 2)) : vue.createCommentVNode("v-if", true),
  153. _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("div", {
  154. key: 1,
  155. id: _ctx.bodyId,
  156. class: vue.normalizeClass(_ctx.ns.e("body"))
  157. }, [
  158. vue.renderSlot(_ctx.$slots, "default")
  159. ], 10, _hoisted_4)) : vue.createCommentVNode("v-if", true),
  160. _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
  161. key: 2,
  162. class: vue.normalizeClass(_ctx.ns.e("footer"))
  163. }, [
  164. vue.renderSlot(_ctx.$slots, "footer")
  165. ], 2)) : vue.createCommentVNode("v-if", true)
  166. ], 16, _hoisted_1)
  167. ]),
  168. _: 3
  169. }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onReleaseRequested"])
  170. ]),
  171. _: 3
  172. }, 8, ["mask", "overlay-class", "z-index", "onClick"]), [
  173. [vue.vShow, _ctx.visible]
  174. ])
  175. ]),
  176. _: 3
  177. }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
  178. ], 8, ["disabled"]);
  179. }
  180. var Drawer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/drawer/src/drawer.vue"]]);
  181. exports["default"] = Drawer;
  182. //# sourceMappingURL=drawer2.js.map