@nmorph/nmorph-ui-kit 2.2.41 → 2.2.43

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
+};

package/dist/components/data/nmorph-empty/NmorphEmpty.vue.js

@@ -1,64 +1,84 @@
 import './NmorphEmpty.css';
-import c from "./NmorphEmpty.vue2.js";
-import { openBlock as t, createElementBlock as i, normalizeStyle as m, normalizeClass as d, renderSlot as r, createVNode as n, withCtx as p, createCommentVNode as s, createElementVNode as h, createTextVNode as l, toDisplayString as a } from "vue";
-/* empty css                 */
-import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = ["role", "aria-label"], f = {
+import { defineComponent as g, useSlots as S, computed as t, openBlock as n, createElementBlock as s, normalizeStyle as z, normalizeClass as N, renderSlot as a, createVNode as d, unref as o, withCtx as b, createCommentVNode as l, createElementVNode as w, createTextVNode as p, toDisplayString as m } from "vue";
+import { useModifiers as C } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as k, toCssSize as c } from "../../../utils/common.js";
+import { NmorphShadowType as B } from "../../../types/common.types.js";
+import V from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import $ from "../../../assets/icons/folder-opened.svg.js";
+const I = ["role", "aria-label"], T = {
   key: 0,
   class: "nmorph-empty__icon",
   "aria-hidden": "true"
-}, v = { class: "nmorph-empty__title" }, N = {
+}, E = { class: "nmorph-empty__title" }, D = {
   key: 1,
   class: "nmorph-empty__description"
-}, S = {
+}, H = {
   key: 2,
   class: "nmorph-empty__action"
-};
-function k(e, z, b, o, C, E) {
-  return t(), i("div", {
-    class: d(o.modifiers),
-    style: m(o.styles),
-    role: o.props.role,
-    "aria-label": o.label
-  }, [
-    o.hasIcon ? (t(), i("div", f, [
-      r(e.$slots, "icon", {}, () => [
-        n(o.NmorphIcon, {
-          width: o.toCssSize(o.props.iconSize),
-          height: o.toCssSize(o.props.iconSize)
-        }, {
-          default: p(() => [
-            n(o.NmorphIconFolderOpened)
-          ]),
-          _: 1
-          /* STABLE */
-        }, 8, ["width", "height"])
-      ])
-    ])) : s("v-if", !0),
-    h("div", v, [
-      r(e.$slots, "title", {}, () => [
-        l(
-          a(o.props.title),
-          1
-          /* TEXT */
-        )
-      ])
-    ]),
-    o.hasDescription ? (t(), i("div", N, [
-      r(e.$slots, "description", {}, () => [
-        l(
-          a(o.props.description),
-          1
-          /* TEXT */
-        )
-      ])
-    ])) : s("v-if", !0),
-    o.slots.action ? (t(), i("div", S, [
-      r(e.$slots, "action")
-    ])) : s("v-if", !0)
-  ], 14, y);
-}
-const B = /* @__PURE__ */ _(c, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-empty/NmorphEmpty.vue"]]);
+}, G = /* @__PURE__ */ g({
+  __name: "NmorphEmpty",
+  props: {
+    title: { default: "No data" },
+    description: { default: "" },
+    iconSize: { default: 56 },
+    minHeight: { default: 160 },
+    padding: { default: "var(--indentation-05)" },
+    design: { default: "nmorph" },
+    shadowType: { default: "inset" },
+    hideIcon: { type: Boolean, default: !1 },
+    role: { default: "status" },
+    ariaLabel: { default: void 0 },
+    ariaOrientation: { default: void 0 }
+  },
+  setup(h) {
+    const e = h, r = S(), u = t(() => !e.hideIcon || !!r.icon), f = t(() => !!(e.description || r.description)), _ = t(() => e.ariaLabel || e.title), y = t(
+      () => C({
+        nmorph: [e.design === "nmorph" ? B[e.shadowType] : ""],
+        "nmorph-empty": [e.design]
+      })
+    ), v = t(
+      () => k({
+        "--nmorph-empty-icon-size": e.iconSize,
+        "--nmorph-empty-min-height": e.minHeight,
+        "--nmorph-empty-padding": e.padding
+      })
+    );
+    return (i, L) => (n(), s("div", {
+      class: N(y.value),
+      style: z(v.value),
+      role: e.role,
+      "aria-label": _.value
+    }, [
+      u.value ? (n(), s("div", T, [
+        a(i.$slots, "icon", {}, () => [
+          d(o(V), {
+            width: o(c)(e.iconSize),
+            height: o(c)(e.iconSize)
+          }, {
+            default: b(() => [
+              d(o($))
+            ]),
+            _: 1
+          }, 8, ["width", "height"])
+        ])
+      ])) : l("", !0),
+      w("div", E, [
+        a(i.$slots, "title", {}, () => [
+          p(m(e.title), 1)
+        ])
+      ]),
+      f.value ? (n(), s("div", D, [
+        a(i.$slots, "description", {}, () => [
+          p(m(e.description), 1)
+        ])
+      ])) : l("", !0),
+      o(r).action ? (n(), s("div", H, [
+        a(i.$slots, "action")
+      ])) : l("", !0)
+    ], 14, I));
+  }
+});
 export {
-  B as default
+  G as default
 };

package/dist/components/data/nmorph-empty/NmorphEmpty.vue3.js

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

package/dist/components/data/nmorph-image/NmorphImage.vue.js

@@ -1,54 +1,63 @@
 import './NmorphImage.css';
-import l from "./NmorphImage.vue2.js";
-import { openBlock as r, createElementBlock as e, normalizeStyle as m, normalizeClass as d, createElementVNode as c, renderSlot as i, createTextVNode as t, toDisplayString as s, createCommentVNode as n } from "vue";
-/* empty css                 */
-import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-const p = ["src", "alt", "srcset"], g = {
+import { defineComponent as L, computed as t, ref as m, openBlock as l, createElementBlock as s, normalizeStyle as k, normalizeClass as B, createElementVNode as E, renderSlot as c, createTextVNode as u, toDisplayString as f, createCommentVNode as p } from "vue";
+import { useModifiers as S } from "../../../utils/create-modifiers.js";
+import { useI18n as I } from "vue-i18n";
+const N = ["src", "alt", "srcset"], C = {
   key: 0,
   class: "nmorph-image__load-failed"
-}, f = {
+}, V = {
   key: 1,
   class: "nmorph-image__loading"
-};
-function h(a, y, k, o, v, L) {
-  return o.props.src ? (r(), e(
-    "div",
-    {
+}, D = /* @__PURE__ */ L({
+  __name: "NmorphImage",
+  props: {
+    loadingText: { default: "" },
+    loadFailedText: { default: "" },
+    frameBorder: { default: 4 },
+    src: {},
+    srcSet: { default: "" },
+    fit: { default: "cover" },
+    alt: { default: "" }
+  },
+  emits: ["error", "load"],
+  setup(g, { emit: v }) {
+    const { t: d } = I(), e = g, h = t(() => e.loadingText ? e.loadingText : d("loadingText")), _ = t(() => e.loadFailedText ? e.loadFailedText : d("loadFailedText")), a = m(!1), r = m(!1), n = v, x = (o) => {
+      a.value = !0, r.value = !1, n("load", o);
+    }, T = (o) => {
+      a.value = !0, r.value = !0, n("error", o);
+    }, i = t(() => a.value && r.value), y = t(
+      () => S({
+        nmorph: [e.frameBorder > 0 && "shadow-combined"],
+        "nmorph-image": [(i.value || !a.value) && "hide"]
+      })
+    ), F = t(() => ({
+      "--nmorph-image-fit": e.fit || "cover",
+      "--nmorph-image-frame-border": `${e.frameBorder}px`
+    }));
+    return (o, $) => e.src ? (l(), s("div", {
       key: 0,
-      class: d(o.modifiers),
-      style: m(o.styles)
-    },
-    [
-      c("img", {
-        src: o.props.src,
-        alt: o.props.alt,
-        srcset: o.props.srcSet,
-        onLoad: o.onImageLoad,
-        onError: o.onImageError
-      }, null, 40, p),
-      o.loadingFailed ? (r(), e("div", g, [
-        i(a.$slots, "error", {}, () => [
-          t(
-            s(o.computedLoadFailedText),
-            1
-            /* TEXT */
-          )
+      class: B(y.value),
+      style: k(F.value)
+    }, [
+      E("img", {
+        src: e.src,
+        alt: e.alt,
+        srcset: e.srcSet,
+        onLoad: x,
+        onError: T
+      }, null, 40, N),
+      i.value ? (l(), s("div", C, [
+        c(o.$slots, "error", {}, () => [
+          u(f(_.value), 1)
         ])
-      ])) : o.imageLoadFinished ? n("v-if", !0) : (r(), e("div", f, [
-        i(a.$slots, "loading", {}, () => [
-          t(
-            s(o.computedLoadingText),
-            1
-            /* TEXT */
-          )
+      ])) : a.value ? p("", !0) : (l(), s("div", V, [
+        c(o.$slots, "loading", {}, () => [
+          u(f(h.value), 1)
         ])
       ]))
-    ],
-    6
-    /* CLASS, STYLE */
-  )) : n("v-if", !0);
-}
-const S = /* @__PURE__ */ _(l, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image/NmorphImage.vue"]]);
+    ], 6)) : p("", !0);
+  }
+});
 export {
-  S as default
+  D as default
 };

package/dist/components/data/nmorph-image/NmorphImage.vue3.js

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

package/dist/components/data/nmorph-image-preview/NmorphImagePreview.css

@@ -1 +1 @@
-.nmorph-image-preview{--width: 50px;--height: 50px;width:var(--width);height:var(--height);overflow:hidden}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger{width:auto;height:auto;overflow:visible}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger{display:flex;flex-wrap:wrap;gap:var(--nmorph-image-preview-trigger-gap, 8px);width:auto;height:auto}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger:hover{filter:none}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item{position:relative;display:block;width:var(--width);height:var(--height);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item:hover{filter:brightness(.8)}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-more{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:var(--nmorph-white-color);font-weight:600;line-height:var(--line-height-regular);background:color-mix(in srgb,var(--nmorph-black-color) 60%,transparent);pointer-events:none}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content{--nmorph-image-preview-content-width: min( calc(100vw - 96px) , 960px);--nmorph-image-preview-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-image-preview-content-width);height:var(--nmorph-image-preview-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-image-preview__portal .nmorph-image-preview__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}.nmorph-image-preview__portal .nmorph-button__content{box-shadow:none}.nmorph-image-preview__portal .nmorph-image-preview__left,.nmorph-image-preview__portal .nmorph-image-preview__right{z-index:2}.nmorph-image-preview__portal .nmorph-image-preview__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__actions{bottom:50px}.nmorph-image-preview__portal.nmorph-image-preview--opened{--nmorph-image-preview-btn-margin: 20px}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__left{left:var(--nmorph-image-preview-btn-margin)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__right{right:var(--nmorph-image-preview-btn-margin)}
+.nmorph-image-preview{--width: 50px;--height: 50px;--nmorph-image-preview-radius: var(--default-border-radius);width:var(--width);height:var(--height);overflow:hidden;border-radius:var(--nmorph-image-preview-radius)}.nmorph-image-preview .nmorph-image-preview__trigger{position:relative;width:100%;height:100%;cursor:pointer}.nmorph-image-preview .nmorph-image-preview__trigger:hover{filter:brightness(.8)}.nmorph-image-preview .nmorph-image-preview__trigger .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger{width:auto;height:auto;overflow:visible}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger{display:flex;flex-wrap:wrap;gap:var(--nmorph-image-preview-trigger-gap, 8px);width:auto;height:auto}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger:hover{filter:none}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item{position:relative;display:block;width:var(--width);height:var(--height);padding:0;overflow:hidden;color:inherit;font:inherit;background:transparent;border:0;border-radius:var(--nmorph-image-preview-radius);cursor:pointer}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item:hover{filter:brightness(.8)}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-item .nmorph-image{width:100%;height:100%}.nmorph-image-preview.nmorph-image-preview--gallery-trigger .nmorph-image-preview__trigger-more{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;color:var(--nmorph-white-color);font-weight:600;line-height:var(--line-height-regular);background:color-mix(in srgb,var(--nmorph-black-color) 60%,transparent);pointer-events:none}.nmorph-image-preview__portal{display:contents}.nmorph-image-preview__portal .nmorph-image-preview__content{--nmorph-image-preview-content-width: min( calc(100vw - 96px) , 960px);--nmorph-image-preview-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-image-preview-content-width);height:var(--nmorph-image-preview-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image{width:100%;height:100%;pointer-events:none}.nmorph-image-preview__portal .nmorph-image-preview__content .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-image-preview__portal .nmorph-image-preview__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__action-element{margin-right:var(--indentation-03)}.nmorph-image-preview__portal .nmorph-button__content{box-shadow:none}.nmorph-image-preview__portal .nmorph-image-preview__left,.nmorph-image-preview__portal .nmorph-image-preview__right{z-index:2}.nmorph-image-preview__portal .nmorph-image-preview__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-image-preview__portal .nmorph-image-preview__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__actions{bottom:50px}.nmorph-image-preview__portal.nmorph-image-preview--opened{--nmorph-image-preview-btn-margin: 20px}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__left{left:var(--nmorph-image-preview-btn-margin)}.nmorph-image-preview__portal.nmorph-image-preview--opened .nmorph-image-preview__right{right:var(--nmorph-image-preview-btn-margin)}