029871c52ca30f40c512f13502cf818bd1052a4b786ea40516782f08a5c614d0afd2a440e3042db55bfa6507d8c9eb5d38a7597b520668a8f9aaa7f354297d 2.1 KB

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