layui-vue/es/transition/index2.js

import { w as withInstall } from "../badge/index2.js";
import { defineComponent, inject, openBlock, createBlock, Transition, withCtx, renderSlot, useCssVars, ref, provide, createElementBlock, Fragment, createCommentVNode } from "vue";
const __default__$1 = {
  name: "LayCollapseTransition"
};
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
  ...__default__$1,
  setup(__props) {
    const time = inject("time");
    const elTransition = `${time}s height ease-in-out, ${time}s padding-top ease-in-out, ${time}s padding-bottom ease-in-out`;
    const beforeEnter = (el) => {
      el.style.transition = elTransition;
      if (!el.dataset)
        el.dataset = {};
      el.dataset.oldPaddingTop = el.style.paddingTop;
      el.dataset.oldPaddingBottom = el.style.paddingBottom;
      el.style.height = 0;
      el.style.paddingTop = 0;
      el.style.paddingBottom = 0;
    };
    const enter = (el) => {
      el.dataset.oldOverflow = el.style.overflow;
      if (el.scrollHeight !== 0) {
        el.style.height = el.scrollHeight + "px";
        el.style.paddingTop = el.dataset.oldPaddingTop;
        el.style.paddingBottom = el.dataset.oldPaddingBottom;
      } else {
        el.style.height = "";
        el.style.paddingTop = el.dataset.oldPaddingTop;
        el.style.paddingBottom = el.dataset.oldPaddingBottom;
      }
      el.style.overflow = "hidden";
    };
    const afterEnter = (el) => {
      el.style.transition = "";
      el.style.height = "";
      el.style.overflow = el.dataset.oldOverflow;
    };
    const beforeLeave = (el) => {
      if (!el.dataset)
        el.dataset = {};
      el.dataset.oldPaddingTop = el.style.paddingTop;
      el.dataset.oldPaddingBottom = el.style.paddingBottom;
      el.dataset.oldOverflow = el.style.overflow;
      var computedStyle = getComputedStyle(el, null);
      el.style.height = el.scrollHeight - parseInt(computedStyle.paddingTop) - parseInt(computedStyle.paddingBottom) + "px";
      el.style.overflow = "hidden";
    };
    const leave = (el) => {
      if (el.scrollHeight !== 0) {
        el.style.transition = elTransition;
        el.style.height = 0;
        el.style.paddingTop = 0;
        el.style.paddingBottom = 0;
      }
    };
    const afterLeave = (el) => {
      el.style.transition = "";
      el.style.height = "";
      el.style.overflow = el.dataset.oldOverflow;
      el.style.paddingTop = el.dataset.oldPaddingTop;
      el.style.paddingBottom = el.dataset.oldPaddingBottom;
    };
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Transition, {
        onBeforeEnter: beforeEnter,
        onEnter: enter,
        onAfterEnter: afterEnter,
        onBeforeLeave: beforeLeave,
        onLeave: leave,
        onAfterLeave: afterLeave
      }, {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default")
        ]),
        _: 3
      });
    };
  }
});
var fadeTransition_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".fade-enter-from,.fade-leave-to{opacity:0}.fade-enter-to,.fade-leave-from{opacity:1}.fade-enter-active,.fade-leave-active{transition:var(--7470bb1c)}\n")();
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  __name: "fadeTransition",
  setup(__props) {
    useCssVars((_ctx) => ({
      "7470bb1c": transition.value
    }));
    const time = inject("time");
    const transition = ref(`opacity ${time}s ease`);
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Transition, { name: "fade" }, {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default")
        ]),
        _: 3
      });
    };
  }
});
const __default__ = {
  name: "LayTransition"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    type: { default: "collapse" },
    enable: { type: Boolean, default: true },
    time: { default: 0.3 }
  },
  setup(__props) {
    const props = __props;
    provide("time", props.time);
    return (_ctx, _cache) => {
      return __props.enable ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
        __props.type === "collapse" ? (openBlock(), createBlock(_sfc_main$2, { key: 0 }, {
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "default")
          ]),
          _: 3
        })) : createCommentVNode("", true),
        __props.type === "fade" ? (openBlock(), createBlock(_sfc_main$1, { key: 1 }, {
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "default")
          ]),
          _: 3
        })) : createCommentVNode("", true)
      ], 64)) : renderSlot(_ctx.$slots, "default", { key: 1 });
    };
  }
});
const component = withInstall(_sfc_main);
export { _sfc_main as _, component as c };