menu-collapse-transition.mjs 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. import { defineComponent, openBlock, createBlock, Transition, mergeProps, withCtx, renderSlot } from 'vue';
  2. import '../../../hooks/index.mjs';
  3. import '../../../utils/index.mjs';
  4. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  5. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  6. import { addClass, removeClass, hasClass } from '../../../utils/dom/style.mjs';
  7. const _sfc_main = defineComponent({
  8. name: "ElMenuCollapseTransition",
  9. setup() {
  10. const ns = useNamespace("menu");
  11. const listeners = {
  12. onBeforeEnter: (el) => el.style.opacity = "0.2",
  13. onEnter(el, done) {
  14. addClass(el, `${ns.namespace.value}-opacity-transition`);
  15. el.style.opacity = "1";
  16. done();
  17. },
  18. onAfterEnter(el) {
  19. removeClass(el, `${ns.namespace.value}-opacity-transition`);
  20. el.style.opacity = "";
  21. },
  22. onBeforeLeave(el) {
  23. if (!el.dataset) {
  24. ;
  25. el.dataset = {};
  26. }
  27. if (hasClass(el, ns.m("collapse"))) {
  28. removeClass(el, ns.m("collapse"));
  29. el.dataset.oldOverflow = el.style.overflow;
  30. el.dataset.scrollWidth = el.clientWidth.toString();
  31. addClass(el, ns.m("collapse"));
  32. } else {
  33. addClass(el, ns.m("collapse"));
  34. el.dataset.oldOverflow = el.style.overflow;
  35. el.dataset.scrollWidth = el.clientWidth.toString();
  36. removeClass(el, ns.m("collapse"));
  37. }
  38. el.style.width = `${el.scrollWidth}px`;
  39. el.style.overflow = "hidden";
  40. },
  41. onLeave(el) {
  42. addClass(el, "horizontal-collapse-transition");
  43. el.style.width = `${el.dataset.scrollWidth}px`;
  44. }
  45. };
  46. return {
  47. listeners
  48. };
  49. }
  50. });
  51. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  52. return openBlock(), createBlock(Transition, mergeProps({ mode: "out-in" }, _ctx.listeners), {
  53. default: withCtx(() => [
  54. renderSlot(_ctx.$slots, "default")
  55. ]),
  56. _: 3
  57. }, 16);
  58. }
  59. var ElMenuCollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/menu/src/menu-collapse-transition.vue"]]);
  60. export { ElMenuCollapseTransition as default };
  61. //# sourceMappingURL=menu-collapse-transition.mjs.map