@nmorph/nmorph-ui-kit 2.2.53 → 2.2.55

package/dist/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue.js

@@ -1,64 +1,76 @@
 import './NmorphCollapseItem.css';
-import i from "./NmorphCollapseItem.vue2.js";
-import { openBlock as n, createElementBlock as a, normalizeStyle as l, normalizeClass as r, createElementVNode as o, withModifiers as c, renderSlot as s, createTextVNode as m, toDisplayString as p } from "vue";
-/* empty css                        */
-import d from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const _ = {
-  ref: "collapseItemDOMElContent",
-  class: "nmorph-collapse-item__inner-wrapper"
-};
-function f(t, h, y, e, k, v) {
-  return n(), a(
-    "div",
-    {
-      class: r(e.modifiers),
-      style: l(e.styles)
-    },
-    [
-      o(
-        "div",
-        {
-          class: r(["nmorph-collapse-item__title", e.titleModifiers]),
-          onClick: c(e.clickHandler, ["stop"])
-        },
-        [
-          s(t.$slots, "title", {}, () => [
-            m(
-              p(e.props.title),
-              1
-              /* TEXT */
-            )
-          ])
-        ],
-        2
-        /* CLASS */
-      ),
-      o(
-        "div",
-        {
-          class: "nmorph-collapse-item__content",
-          style: l({ height: `${e.contentHeight}px` })
-        },
-        [
-          o(
-            "div",
-            _,
-            [
-              s(t.$slots, "default")
-            ],
-            512
-            /* NEED_PATCH */
-          )
-        ],
-        4
-        /* STYLE */
-      )
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const E = /* @__PURE__ */ d(i, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue"]]);
+import { defineComponent as B, ref as a, computed as i, inject as u, onMounted as D, onBeforeUnmount as S, watch as f, openBlock as E, createElementBlock as N, normalizeStyle as v, normalizeClass as h, createElementVNode as r, withModifiers as V, renderSlot as b, createTextVNode as $, toDisplayString as x, nextTick as A } from "vue";
+import { useModifiers as k } from "../../../../../utils/create-modifiers.js";
+import { createCssVariables as I } from "../../../../../utils/common.js";
+import { NmorphComponentHeight as R } from "../../../../../types/common.types.js";
+const G = /* @__PURE__ */ B({
+  __name: "NmorphCollapseItem",
+  props: {
+    height: { default: "basic" },
+    block: { type: Boolean, default: !1 },
+    transitionSpeed: { default: void 0 },
+    name: {},
+    title: { default: "" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["click-item"],
+  setup(y, { emit: C }) {
+    const t = y, _ = C, o = a(!1), g = i(
+      () => k({
+        "nmorph-collapse-item": [t.disabled && "disabled", t.block && "block", o.value && "is-open"]
+      })
+    ), O = i(
+      () => k({
+        nmorph: [R[t.height]]
+      })
+    ), M = (e) => typeof e == "number" ? `${e}ms` : e, w = i(
+      () => I({
+        "--transition-speed": M(t.transitionSpeed)
+      })
+    ), c = u("collapse-data"), H = u("update-model"), l = a(null), p = a(0);
+    let n = null;
+    const d = (e) => Array.isArray(e) ? e.includes(t.name) : e === t.name, m = () => {
+      p.value = o.value && l.value ? l.value.scrollHeight : 0;
+    }, s = () => A(m), z = () => {
+      t.disabled || t.block || (o.value = !o.value, H?.(t.name, o.value), _("click-item", { id: t.name, isOpen: o.value }));
+    };
+    return D(() => {
+      o.value = d(c?.value), s(), "ResizeObserver" in window && l.value && (n = new ResizeObserver(m), n.observe(l.value));
+    }), S(() => {
+      n?.disconnect();
+    }), f(
+      () => c?.value,
+      (e) => {
+        o.value = d(e), s();
+      },
+      { deep: !0 }
+    ), f(o, s), (e, T) => (E(), N("div", {
+      class: h(g.value),
+      style: v(w.value)
+    }, [
+      r("div", {
+        class: h(["nmorph-collapse-item__title", O.value]),
+        onClick: V(z, ["stop"])
+      }, [
+        b(e.$slots, "title", {}, () => [
+          $(x(t.title), 1)
+        ])
+      ], 2),
+      r("div", {
+        class: "nmorph-collapse-item__content",
+        style: v({ height: `${p.value}px` })
+      }, [
+        r("div", {
+          ref_key: "collapseItemDOMElContent",
+          ref: l,
+          class: "nmorph-collapse-item__inner-wrapper"
+        }, [
+          b(e.$slots, "default")
+        ], 512)
+      ], 4)
+    ], 6));
+  }
+});
 export {
-  E as default
+  G as default
 };

package/dist/components/data/nmorph-collapse/components/nmorph-collapse-item/NmorphCollapseItem.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphCollapseItem.css';
+import o from "./NmorphCollapseItem.vue.js";
+/* empty css                        */
+export {
+  o as default
+};