@kunukn/vue-collapse/dist/vue-collapse.js

Collapsible library based on CSS transition for Vue

import { defineComponent as y, ref as p, onMounted as _, onBeforeUnmount as g, openBlock as x, createBlock as h, resolveDynamicComponent as w, normalizeStyle as E, withCtx as C, createElementVNode as S, renderSlot as k } from "vue";
const B = { class: "vue-collapse-content" }, r = "grid-template-rows", L = "expanding", N = "collapsing", c = "expanded", v = "collapsed", m = "transitionstart", f = "transitionend", V = /* @__PURE__ */ y({
  __name: "VueCollapse",
  props: {
    when: {
      type: Boolean,
      required: !0
    },
    as: {
      type: String,
      default: "div"
    },
    transition: {
      type: String
    }
  },
  emits: [
    "init",
    "event",
    "expanding",
    "collapsing",
    "expanded",
    "collapsed"
  ],
  setup(l, { emit: i }) {
    const t = l, e = p(null), n = p(""), s = i, d = (a) => {
      if (a.propertyName === r) {
        let o = t.when ? N : L;
        n.value = o, s("event", o), s(o);
      }
    }, u = (a) => {
      if (a.propertyName === r) {
        let o = t.when ? v : c;
        n.value = o, s("event", o), s(o);
      }
    };
    return _(() => {
      let a = t.when ? v : c;
      n.value = a, s("init", a), e.value && e.value.addEventListener(m, d), e.value && e.value.addEventListener(f, u);
    }), g(() => {
      e.value && e.value.removeEventListener(m, d), e.value && e.value.removeEventListener(f, u);
    }), (a, o) => (x(), h(w(l.as), {
      class: "vue-collapse",
      ref_key: "root",
      ref: e,
      "data-state": n.value,
      "data-is-collapsed": l.when ? "" : null,
      "data-vue-collapse-transition": "",
      inert: n.value !== c ? "" : null,
      style: E({
        transition: t.transition ? r + " " + t.transition : null
      })
    }, {
      default: C(() => [
        S("div", B, [
          k(a.$slots, "default", { state: n.value }, void 0, !0)
        ])
      ]),
      _: 3
    }, 8, ["data-state", "data-is-collapsed", "inert", "style"]));
  }
}), q = (l, i) => {
  const t = l.__vccOpts || l;
  for (const [e, n] of i)
    t[e] = n;
  return t;
}, D = /* @__PURE__ */ q(V, [["__scopeId", "data-v-61e379e8"]]);
export {
  D as VueCollapse
};