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

package/dist/components/{collapsable.scss_vue_type_style_index_0_src_true_lang-BERfoghR.js → collapsable.scss_vue_type_style_index_0_src_true_lang-CwEWYCf1.js}

@@ -1,6 +1,6 @@
-import { defineComponent as k, ref as c, computed as r, watch as v, nextTick as i, createElementBlock as w, openBlock as h, normalizeClass as u, createElementVNode as t, withKeys as B, createBlock as C, createCommentVNode as I, createVNode as $, toDisplayString as _, renderSlot as N, createTextVNode as S } from "vue";
-import { I as y } from "./icon-svg-DxlNo61Q.js";
-import './style/collapsable.css';const V = ["id", "aria-expanded", "aria-controls", "disabled"], H = { class: "rds-e-collapsable__header-title" }, E = { class: "rds-e-collapsable__header-title-text" }, K = ["id", "aria-labelledby"], z = /* @__PURE__ */ k({
+import { defineComponent as k, ref as c, computed as r, watch as v, nextTick as i, createElementBlock as w, openBlock as h, normalizeClass as u, createElementVNode as t, withKeys as B, createBlock as C, createCommentVNode as S, createVNode as $, toDisplayString as _, renderSlot as I, createTextVNode as N } from "vue";
+import { R as y } from "./icon-svg-9fQGq_1_.js";
+import './style/collapsable.css';const V = ["id", "aria-expanded", "aria-controls", "disabled"], H = { class: "rds-e-collapsable__header-title" }, D = { class: "rds-e-collapsable__header-title-text" }, E = ["id", "aria-labelledby"], W = /* @__PURE__ */ k({
   __name: "collapsable",
   props: {
     title: {},
@@ -30,7 +30,7 @@ import './style/collapsable.css';const V = ["id", "aria-expanded", "aria-control
       i(() => {
         d();
       });
-    }, { immediate: !0 }), (a, T) => (h(), w("div", {
+    }, { immediate: !0 }), (a, K) => (h(), w("div", {
       class: u(["rds-e-collapsable", {
         "rds-e-collapsable--open": e.value,
         "rds-e-collapsable--disabled": l.disabled,
@@ -51,9 +51,9 @@ import './style/collapsable.css';const V = ["id", "aria-expanded", "aria-control
           key: 0,
           name: l.icon,
           class: "rds-e-collapsable__header-icon"
-        }, null, 8, ["name"])) : I("", !0),
+        }, null, 8, ["name"])) : S("", !0),
         t("span", H, [
-          t("span", E, _(l.title), 1)
+          t("span", D, _(l.title), 1)
         ]),
         $(y, {
           class: u(["rds-e-collapsable__header-arrow", { "rds-e-collapsable__header-arrow--open": e.value }]),
@@ -73,14 +73,14 @@ import './style/collapsable.css';const V = ["id", "aria-expanded", "aria-control
           ref: s,
           class: "rds-e-collapsable__panel-content"
         }, [
-          N(a.$slots, "default", {}, () => [
-            S(_(l.content), 1)
+          I(a.$slots, "default", {}, () => [
+            N(_(l.content), 1)
           ])
         ], 512)
-      ], 10, K)
+      ], 10, E)
     ], 2));
   }
 });
 export {
-  z as _
+  W as _
 };

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

@@ -0,0 +1,86 @@
+import { defineComponent as k, ref as c, computed as r, watch as v, nextTick as i, createElementBlock as w, openBlock as h, normalizeClass as u, createElementVNode as t, withKeys as B, createBlock as C, createCommentVNode as S, createVNode as $, toDisplayString as _, renderSlot as I, createTextVNode as N } from "vue";
+import { R as y } from "./icon-svg-CTR8GnC2.js";
+import './style/collapsable.css';const V = ["id", "aria-expanded", "aria-controls", "disabled"], H = { class: "rds-e-collapsable__header-title" }, D = { class: "rds-e-collapsable__header-title-text" }, E = ["id", "aria-labelledby"], W = /* @__PURE__ */ k({
+  __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(l, { emit: g }) {
+    const n = l, x = g, e = c(n.open), o = c(null), s = c(null), p = r(() => n.id || `rds-collapsable-${Math.random().toString(36).substr(2, 9)}`), b = r(() => `${p.value}-panel`), f = r(() => `${p.value}-header`), d = () => {
+      if (!o.value || !s.value) return;
+      const a = s.value.scrollHeight;
+      o.value.style.maxHeight = e.value ? `${a}px` : "0px";
+    }, m = () => {
+      n.disabled || (e.value = !e.value, x("update:open", e.value), i(() => {
+        d();
+      }));
+    };
+    return v(() => n.open, (a) => {
+      e.value = a, i(() => {
+        d();
+      });
+    }), v(e, () => {
+      i(() => {
+        d();
+      });
+    }, { immediate: !0 }), (a, K) => (h(), w("div", {
+      class: u(["rds-e-collapsable", {
+        "rds-e-collapsable--open": e.value,
+        "rds-e-collapsable--disabled": l.disabled,
+        "rds-e-collapsable--full-width": l.fullWidth
+      }])
+    }, [
+      t("button", {
+        id: f.value,
+        class: "rds-e-collapsable__header",
+        type: "button",
+        "aria-expanded": e.value,
+        "aria-controls": b.value,
+        disabled: l.disabled,
+        onClick: m,
+        onKeydown: B(m, ["enter", "space"])
+      }, [
+        l.icon ? (h(), C(y, {
+          key: 0,
+          name: l.icon,
+          class: "rds-e-collapsable__header-icon"
+        }, null, 8, ["name"])) : S("", !0),
+        t("span", H, [
+          t("span", D, _(l.title), 1)
+        ]),
+        $(y, {
+          class: u(["rds-e-collapsable__header-arrow", { "rds-e-collapsable__header-arrow--open": e.value }]),
+          name: "arrow_down"
+        }, null, 8, ["class"])
+      ], 40, V),
+      t("div", {
+        id: b.value,
+        ref_key: "panel",
+        ref: o,
+        class: u(["rds-e-collapsable__panel", { "rds-e-collapsable__panel--open": e.value }]),
+        role: "region",
+        "aria-labelledby": f.value
+      }, [
+        t("div", {
+          ref_key: "panelContent",
+          ref: s,
+          class: "rds-e-collapsable__panel-content"
+        }, [
+          I(a.$slots, "default", {}, () => [
+            N(_(l.content), 1)
+          ])
+        ], 512)
+      ], 10, E)
+    ], 2));
+  }
+});
+export {
+  W as _
+};