energy-components 2.0.0-beta.3 → 2.0.0-beta.5

package/dist/components/collapsable.es.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./collapsable.scss_vue_type_style_index_0_src_true_lang-DGVMcmcy.js";
+import { _ as f } from "./collapsable.scss_vue_type_style_index_0_src_true_lang-C_OxhT8v.js";
 export {
   f as default
 };

package/dist/components/collapsable.scss_vue_type_style_index_0_src_true_lang-C_OxhT8v.js

@@ -0,0 +1,105 @@
+import { defineComponent as C, ref as i, computed as c, watch as y, nextTick as o, onMounted as N, onBeforeUnmount as R, createElementBlock as S, openBlock as g, normalizeClass as u, createElementVNode as s, withKeys as $, createBlock as I, createCommentVNode as L, createVNode as O, toDisplayString as x, renderSlot as V, createTextVNode as H } from "vue";
+import { R as k } from "./icon-svg-CTR8GnC2.js";
+import './style/collapsable.css';const D = ["id", "aria-expanded", "aria-controls", "disabled"], K = { class: "rds-e-collapsable__header-title" }, M = { class: "rds-e-collapsable__header-title-text" }, T = ["id", "aria-labelledby"], U = /* @__PURE__ */ C({
+  __name: "collapsable",
+  props: {
+    title: {},
+    content: { default: "" },
+    icon: { default: "" },
+    open: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    fullWidth: { type: Boolean, default: !1 },
+    id: { default: "" }
+  },
+  emits: ["update:open"],
+  setup(a, { emit: z }) {
+    const d = a, B = z, e = i(d.open), p = i(null), n = i(null);
+    let r = null;
+    const v = () => {
+      e.value && o(() => t());
+    }, b = c(() => d.id || `rds-collapsable-${Math.random().toString(36).substr(2, 9)}`), f = c(() => `${b.value}-panel`), m = c(() => `${b.value}-header`);
+    function t() {
+      const l = p.value;
+      if (!l || !n.value) return;
+      const _ = n.value.scrollHeight;
+      l.style.overflow = "hidden";
+      const w = (E) => {
+        E.propertyName === "max-height" && (l.removeEventListener("transitionend", w), l.style.overflow = e.value ? "visible" : "hidden");
+      };
+      l.addEventListener("transitionend", w, { once: !0 }), l.style.maxHeight = e.value ? `${_}px` : "0px";
+    }
+    const h = () => {
+      d.disabled || (e.value = !e.value, B("update:open", e.value), o(() => {
+        t();
+      }));
+    };
+    return y(() => d.open, (l) => {
+      e.value = l, o(() => {
+        t();
+      });
+    }), y(e, () => {
+      o(() => {
+        t();
+      });
+    }, { immediate: !0 }), N(() => {
+      "ResizeObserver" in window && (r = new ResizeObserver(() => {
+        e.value && t();
+      }), o(() => {
+        n.value && r?.observe(n.value);
+      })), window.addEventListener("resize", v, { passive: !0 });
+    }), R(() => {
+      window.removeEventListener("resize", v), r?.disconnect(), r = null;
+    }), (l, _) => (g(), S("div", {
+      class: u(["rds-e-collapsable", {
+        "rds-e-collapsable--open": e.value,
+        "rds-e-collapsable--disabled": a.disabled,
+        "rds-e-collapsable--full-width": a.fullWidth
+      }])
+    }, [
+      s("button", {
+        id: m.value,
+        class: "rds-e-collapsable__header",
+        type: "button",
+        "aria-expanded": e.value,
+        "aria-controls": f.value,
+        disabled: a.disabled,
+        onClick: h,
+        onKeydown: $(h, ["enter", "space"])
+      }, [
+        a.icon ? (g(), I(k, {
+          key: 0,
+          name: a.icon,
+          class: "rds-e-collapsable__header-icon"
+        }, null, 8, ["name"])) : L("", !0),
+        s("span", K, [
+          s("span", M, x(a.title), 1)
+        ]),
+        O(k, {
+          class: u(["rds-e-collapsable__header-arrow", { "rds-e-collapsable__header-arrow--open": e.value }]),
+          name: "arrow_down"
+        }, null, 8, ["class"])
+      ], 40, D),
+      s("div", {
+        id: f.value,
+        ref_key: "panel",
+        ref: p,
+        class: u(["rds-e-collapsable__panel", { "rds-e-collapsable__panel--open": e.value }]),
+        role: "region",
+        "aria-labelledby": m.value
+      }, [
+        s("div", {
+          ref_key: "panelContent",
+          ref: n,
+          class: "rds-e-collapsable__panel-content"
+        }, [
+          V(l.$slots, "default", {}, () => [
+            H(x(a.content), 1)
+          ])
+        ], 512)
+      ], 10, T)
+    ], 2));
+  }
+});
+export {
+  U as _
+};