collapse-transition.mjs 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. import { defineComponent, openBlock, createBlock, Transition, mergeProps, unref, toHandlers, 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. const __default__ = defineComponent({
  5. name: "ElCollapseTransition"
  6. });
  7. const _sfc_main = /* @__PURE__ */ defineComponent({
  8. ...__default__,
  9. setup(__props) {
  10. const ns = useNamespace("collapse-transition");
  11. const reset = (el) => {
  12. el.style.maxHeight = "";
  13. el.style.overflow = el.dataset.oldOverflow;
  14. el.style.paddingTop = el.dataset.oldPaddingTop;
  15. el.style.paddingBottom = el.dataset.oldPaddingBottom;
  16. };
  17. const on = {
  18. beforeEnter(el) {
  19. if (!el.dataset)
  20. el.dataset = {};
  21. el.dataset.oldPaddingTop = el.style.paddingTop;
  22. el.dataset.oldPaddingBottom = el.style.paddingBottom;
  23. if (el.style.height)
  24. el.dataset.elExistsHeight = el.style.height;
  25. el.style.maxHeight = 0;
  26. el.style.paddingTop = 0;
  27. el.style.paddingBottom = 0;
  28. },
  29. enter(el) {
  30. requestAnimationFrame(() => {
  31. el.dataset.oldOverflow = el.style.overflow;
  32. if (el.dataset.elExistsHeight) {
  33. el.style.maxHeight = el.dataset.elExistsHeight;
  34. } else if (el.scrollHeight !== 0) {
  35. el.style.maxHeight = `${el.scrollHeight}px`;
  36. } else {
  37. el.style.maxHeight = 0;
  38. }
  39. el.style.paddingTop = el.dataset.oldPaddingTop;
  40. el.style.paddingBottom = el.dataset.oldPaddingBottom;
  41. el.style.overflow = "hidden";
  42. });
  43. },
  44. afterEnter(el) {
  45. el.style.maxHeight = "";
  46. el.style.overflow = el.dataset.oldOverflow;
  47. },
  48. enterCancelled(el) {
  49. reset(el);
  50. },
  51. beforeLeave(el) {
  52. if (!el.dataset)
  53. el.dataset = {};
  54. el.dataset.oldPaddingTop = el.style.paddingTop;
  55. el.dataset.oldPaddingBottom = el.style.paddingBottom;
  56. el.dataset.oldOverflow = el.style.overflow;
  57. el.style.maxHeight = `${el.scrollHeight}px`;
  58. el.style.overflow = "hidden";
  59. },
  60. leave(el) {
  61. if (el.scrollHeight !== 0) {
  62. el.style.maxHeight = 0;
  63. el.style.paddingTop = 0;
  64. el.style.paddingBottom = 0;
  65. }
  66. },
  67. afterLeave(el) {
  68. reset(el);
  69. },
  70. leaveCancelled(el) {
  71. reset(el);
  72. }
  73. };
  74. return (_ctx, _cache) => {
  75. return openBlock(), createBlock(Transition, mergeProps({
  76. name: unref(ns).b()
  77. }, toHandlers(on)), {
  78. default: withCtx(() => [
  79. renderSlot(_ctx.$slots, "default")
  80. ]),
  81. _: 3
  82. }, 16, ["name"]);
  83. };
  84. }
  85. });
  86. var CollapseTransition = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "collapse-transition.vue"]]);
  87. export { CollapseTransition as default };
  88. //# sourceMappingURL=collapse-transition.mjs.map