@nmorph/nmorph-ui-kit 2.2.53 → 2.2.55

package/dist/components/basic/nmorph-button/NmorphButton.vue.js

@@ -1,76 +1,107 @@
 import './NmorphButton.css';
-import d from "./NmorphButton.vue2.js";
-import { openBlock as e, createElementBlock as r, normalizeStyle as s, normalizeClass as c, createElementVNode as m, createBlock as l, withCtx as a, createVNode as p, renderSlot as n, Fragment as f, createCommentVNode as i, toDisplayString as _ } from "vue";
-/* empty css                  */
-import b from "../../../_virtual/_plugin-vue_export-helper.js";
-const h = ["disabled", "loading", "type", "tabindex", "aria-pressed"], y = {
+import { defineComponent as C, useSlots as z, computed as o, ref as N, openBlock as t, createElementBlock as r, normalizeStyle as V, normalizeClass as $, createElementVNode as O, createBlock as i, unref as a, withCtx as s, createVNode as E, renderSlot as n, Fragment as H, createCommentVNode as f, toDisplayString as M } from "vue";
+import { useModifiers as D } from "../../../utils/create-modifiers.js";
+import { NmorphComponentHeight as I } from "../../../types/common.types.js";
+import d from "../nmorph-icon/NmorphIcon.vue.js";
+/* empty css                             */
+import w from "../../../assets/icons/loading.svg.js";
+const T = ["disabled", "loading", "type", "tabindex", "aria-pressed"], F = {
   key: 1,
   class: "nmorph-button__label"
-};
-function g(t, k, N, o, v, S) {
-  return e(), r(
-    "div",
-    {
-      class: c(o.modifiers),
-      style: s(o.buttonColorStyles)
-    },
-    [
-      m("button", {
-        ref: "buttonDOMElement",
+}, P = /* @__PURE__ */ C({
+  __name: "NmorphButton",
+  props: {
+    styleType: { default: "default" },
+    color: { default: void 0 },
+    loading: { type: Boolean, default: !1 },
+    ripple: { type: Boolean, default: !0 },
+    type: { default: "button" },
+    text: { default: void 0 },
+    accentBgOnHover: { type: Boolean, default: !1 },
+    shape: { default: "default" },
+    fill: { type: Boolean, default: !1 },
+    tabindex: { default: 0 },
+    toggle: { type: Boolean, default: !1 },
+    modelValue: { type: Boolean, default: void 0 },
+    active: { type: Boolean, default: !1 },
+    danger: { type: Boolean, default: !1 },
+    id: {},
+    name: {},
+    autocomplete: {},
+    height: { default: "basic" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:model-value"],
+  setup(y, { expose: h, emit: g }) {
+    const e = y, b = g, u = z(), v = o(() => !!u.icon), c = o(() => !!u["icon-only"]), p = o(() => e.active || !!e.modelValue), B = o(
+      () => D({
+        nmorph: [I[e.height], e.fill && "fill"],
+        "nmorph-button": [
+          e.styleType,
+          e.shape,
+          e.disabled && "disabled",
+          e.accentBgOnHover && "accent-bg-on-hover",
+          e.ripple && "ripple",
+          c.value && "icon-only",
+          e.color && "custom-color",
+          p.value && "active",
+          e.danger && "danger"
+        ]
+      })
+    ), m = N(null), _ = {
+      thin: "small",
+      basic: "medium",
+      thick: "large"
+    }, k = o(() => _[e.height]), S = o(() => e.color ? {
+      "--nmorph-button-color": e.color,
+      "--transparent-button-color": e.color,
+      "--nmorph-button-hover-color": `color-mix(in srgb, ${e.color} 75%, var(--nmorph-white-color))`
+    } : {}), x = () => {
+      !e.toggle || e.disabled || e.loading || b("update:model-value", !e.modelValue);
+    };
+    return h({ buttonDOMElement: m }), (l, L) => (t(), r("div", {
+      class: $(B.value),
+      style: V(S.value)
+    }, [
+      O("button", {
+        ref_key: "buttonDOMElement",
+        ref: m,
         class: "nmorph-button__content",
-        disabled: o.props.disabled,
-        loading: o.props.loading,
-        type: o.props.type,
-        tabindex: o.props.tabindex,
-        "aria-pressed": o.props.toggle ? o.active : void 0,
-        onClick: o.toggleClickHandler
+        disabled: e.disabled,
+        loading: e.loading,
+        type: e.type,
+        tabindex: e.tabindex,
+        "aria-pressed": e.toggle ? p.value : void 0,
+        onClick: x
       }, [
-        o.props.loading ? (e(), l(o.NmorphIcon, {
+        e.loading ? (t(), i(a(d), {
           key: 0,
-          size: o.loadingButtonSize
+          size: k.value
         }, {
-          default: a(() => [
-            p(o.NmorphIconLoader)
+          default: s(() => [
+            E(a(w))
           ]),
           _: 1
-          /* STABLE */
-        }, 8, ["size"])) : o.hasIconOnlySlot ? (e(), l(o.NmorphIcon, { key: 1 }, {
-          default: a(() => [
-            n(t.$slots, "icon-only")
+        }, 8, ["size"])) : c.value ? (t(), i(a(d), { key: 1 }, {
+          default: s(() => [
+            n(l.$slots, "icon-only")
           ]),
           _: 3
-          /* FORWARDED */
-        })) : (e(), r(
-          f,
-          { key: 2 },
-          [
-            o.hasIconSlot ? (e(), l(o.NmorphIcon, { key: 0 }, {
-              default: a(() => [
-                n(t.$slots, "icon")
-              ]),
-              _: 3
-              /* FORWARDED */
-            })) : i("v-if", !0),
-            n(t.$slots, "default"),
-            o.props.text !== void 0 ? (e(), r(
-              "span",
-              y,
-              _(o.props.text),
-              1
-              /* TEXT */
-            )) : i("v-if", !0),
-            n(t.$slots, "append")
-          ],
-          64
-          /* STABLE_FRAGMENT */
-        ))
-      ], 8, h)
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const z = /* @__PURE__ */ b(d, [["render", g], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-button/NmorphButton.vue"]]);
+        })) : (t(), r(H, { key: 2 }, [
+          v.value ? (t(), i(a(d), { key: 0 }, {
+            default: s(() => [
+              n(l.$slots, "icon")
+            ]),
+            _: 3
+          })) : f("", !0),
+          n(l.$slots, "default"),
+          e.text !== void 0 ? (t(), r("span", F, M(e.text), 1)) : f("", !0),
+          n(l.$slots, "append")
+        ], 64))
+      ], 8, T)
+    ], 6));
+  }
+});
 export {
-  z as default
+  P as default
 };

package/dist/components/basic/nmorph-button/NmorphButton.vue3.js

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

package/dist/components/basic/nmorph-icon/NmorphIcon.vue.js

@@ -1,26 +1,37 @@
 import './NmorphIcon.css';
-import r from "./NmorphIcon.vue2.js";
-import { openBlock as t, createElementBlock as n, normalizeStyle as s, normalizeClass as c, createElementVNode as i, renderSlot as m } from "vue";
-/* empty css                */
-import l from "../../../_virtual/_plugin-vue_export-helper.js";
-const a = { class: "nmorph-icon__content" };
-function p(e, _, d, o, f, h) {
-  return t(), n(
-    "div",
-    {
-      class: c(o.modifiers),
-      style: s(o.customStyles)
-    },
-    [
-      i("div", a, [
-        m(e.$slots, "default")
+import { defineComponent as r, computed as t, openBlock as c, createElementBlock as n, normalizeStyle as h, normalizeClass as d, createElementVNode as m, renderSlot as a } from "vue";
+import { useModifiers as u } from "../../../utils/create-modifiers.js";
+const f = { class: "nmorph-icon__content" }, v = /* @__PURE__ */ r({
+  __name: "NmorphIcon",
+  props: {
+    size: { default: "small" },
+    width: { default: void 0 },
+    height: { default: void 0 },
+    color: { default: void 0 }
+  },
+  setup(i) {
+    const o = i, s = t(
+      () => u({
+        "nmorph-icon": [
+          !o.width && !o.height && o.size,
+          o.width && "custom-width",
+          o.height && "custom-height"
+        ]
+      })
+    ), l = t(() => {
+      const e = {};
+      return o.width && (e["--width"] = o.width), o.height && (e["--height"] = o.height), o.color && (e["--nmorph-icon-color"] = o.color, e["--color"] = o.color), e;
+    });
+    return (e, p) => (c(), n("div", {
+      class: d(s.value),
+      style: h(l.value)
+    }, [
+      m("div", f, [
+        a(e.$slots, "default")
       ])
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const v = /* @__PURE__ */ l(r, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-icon/NmorphIcon.vue"]]);
+    ], 6));
+  }
+});
 export {
   v as default
 };

package/dist/components/basic/nmorph-icon/NmorphIcon.vue3.js

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

package/dist/components/basic/nmorph-layout/NmorphLayout.vue.js

@@ -1,50 +1,66 @@
 import './NmorphLayout.css';
-import l from "./NmorphLayout.vue2.js";
-import { openBlock as s, createBlock as n, resolveDynamicComponent as d, normalizeStyle as m, normalizeClass as _, withCtx as c, createElementBlock as r, renderSlot as t, createCommentVNode as a, createElementVNode as i } from "vue";
-/* empty css                  */
-import h from "../../../_virtual/_plugin-vue_export-helper.js";
-const f = {
+import { defineComponent as c, useSlots as p, computed as d, openBlock as t, createBlock as f, resolveDynamicComponent as _, normalizeStyle as y, normalizeClass as g, withCtx as k, unref as l, createElementBlock as i, renderSlot as s, createCommentVNode as r, createElementVNode as n } from "vue";
+import { useModifiers as C } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as $ } from "../../../utils/common.js";
+const v = {
   key: 0,
   class: "nmorph-layout__header"
-}, p = { class: "nmorph-layout__body" }, y = {
+}, B = { class: "nmorph-layout__body" }, P = {
   key: 0,
   class: "nmorph-layout__aside"
-}, u = { class: "nmorph-layout__main" }, k = {
+}, S = { class: "nmorph-layout__main" }, z = {
   key: 1,
   class: "nmorph-layout__aside"
-}, v = {
+}, N = {
   key: 1,
   class: "nmorph-layout__footer"
-};
-function b(e, C, N, o, B, g) {
-  return s(), n(d(o.props.tag), {
-    class: _(o.modifiers),
-    style: m(o.styles)
-  }, {
-    default: c(() => [
-      o.slots.header ? (s(), r("header", f, [
-        t(e.$slots, "header")
-      ])) : a("v-if", !0),
-      i("div", p, [
-        o.slots.aside && o.props.asidePosition === "left" ? (s(), r("aside", y, [
-          t(e.$slots, "aside")
-        ])) : a("v-if", !0),
-        i("main", u, [
-          t(e.$slots, "default")
+}, H = /* @__PURE__ */ c({
+  __name: "NmorphLayout",
+  props: {
+    tag: { default: "section" },
+    gap: { default: 0 },
+    asideWidth: { default: "240px" },
+    asidePosition: { default: "left" },
+    fullHeight: { type: Boolean, default: !1 }
+  },
+  setup(u) {
+    const e = u, a = p(), m = d(
+      () => C({
+        "nmorph-layout": [`aside-${e.asidePosition}`, e.fullHeight && "full-height"]
+      })
+    ), h = d(
+      () => $({
+        "--nmorph-layout-gap": e.gap,
+        "--nmorph-layout-aside-width": e.asideWidth
+      })
+    );
+    return (o, V) => (t(), f(_(e.tag), {
+      class: g(m.value),
+      style: y(h.value)
+    }, {
+      default: k(() => [
+        l(a).header ? (t(), i("header", v, [
+          s(o.$slots, "header")
+        ])) : r("", !0),
+        n("div", B, [
+          l(a).aside && e.asidePosition === "left" ? (t(), i("aside", P, [
+            s(o.$slots, "aside")
+          ])) : r("", !0),
+          n("main", S, [
+            s(o.$slots, "default")
+          ]),
+          l(a).aside && e.asidePosition === "right" ? (t(), i("aside", z, [
+            s(o.$slots, "aside")
+          ])) : r("", !0)
         ]),
-        o.slots.aside && o.props.asidePosition === "right" ? (s(), r("aside", k, [
-          t(e.$slots, "aside")
-        ])) : a("v-if", !0)
+        l(a).footer ? (t(), i("footer", N, [
+          s(o.$slots, "footer")
+        ])) : r("", !0)
       ]),
-      o.slots.footer ? (s(), r("footer", v, [
-        t(e.$slots, "footer")
-      ])) : a("v-if", !0)
-    ]),
-    _: 3
-    /* FORWARDED */
-  }, 8, ["class", "style"]);
-}
-const S = /* @__PURE__ */ h(l, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-layout/NmorphLayout.vue"]]);
+      _: 3
+    }, 8, ["class", "style"]));
+  }
+});
 export {
-  S as default
+  H as default
 };

package/dist/components/basic/nmorph-layout/NmorphLayout.vue3.js

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

package/dist/components/basic/nmorph-link/NmorphLink.vue.js

@@ -1,61 +1,85 @@
 import './NmorphLink.css';
-import s from "./NmorphLink.vue2.js";
-import { openBlock as e, createElementBlock as a, normalizeStyle as m, normalizeClass as d, createElementVNode as p, normalizeProps as h, guardReactiveProps as f, renderSlot as n, createBlock as t, withCtx as i, resolveDynamicComponent as _, createCommentVNode as l, createTextVNode as k, toDisplayString as v } from "vue";
-/* empty css                */
-import y from "../../../_virtual/_plugin-vue_export-helper.js";
-function x(r, N, c, o, g, u) {
-  return e(), a(
-    "div",
-    {
-      class: d(o.modifiers),
-      style: m(o.styles)
-    },
-    [
-      p(
-        "a",
-        h(f(o.anchorAttrs)),
-        [
-          n(r.$slots, "prepend"),
-          o.resolvedIcon ? (e(), t(o.NmorphIcon, {
-            key: 0,
-            class: "nmorph-link__icon",
-            width: "10px",
-            height: "10px"
-          }, {
-            default: i(() => [
-              (e(), t(_(o.resolvedIcon)))
-            ]),
-            _: 1
-            /* STABLE */
-          })) : l("v-if", !0),
-          k(
-            " " + v(c.text) + " ",
-            1
-            /* TEXT */
-          ),
-          o.slots.icon ? (e(), t(o.NmorphIcon, {
-            key: 1,
-            class: "nmorph-link__icon",
-            width: "10px",
-            height: "10px"
-          }, {
-            default: i(() => [
-              n(r.$slots, "icon")
-            ]),
-            _: 3
-            /* FORWARDED */
-          })) : l("v-if", !0),
-          n(r.$slots, "default")
-        ],
-        16
-        /* FULL_PROPS */
-      )
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const z = /* @__PURE__ */ y(s, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/basic/nmorph-link/NmorphLink.vue"]]);
+import { defineComponent as k, useSlots as _, computed as r, openBlock as t, createElementBlock as C, normalizeStyle as w, normalizeClass as b, createElementVNode as x, normalizeProps as B, guardReactiveProps as $, renderSlot as i, createBlock as n, unref as s, withCtx as f, resolveDynamicComponent as P, createCommentVNode as p, createTextVNode as S, toDisplayString as L } from "vue";
+import { useModifiers as V } from "../../../utils/create-modifiers.js";
+import { createCssVariables as z } from "../../../utils/common.js";
+import * as I from "../nmorph-icon/NmorphIcons.js";
+import { NmorphLinkTarget as T } from "./types.js";
+import { NmorphColor as A } from "../../../types/common.types.js";
+import m from "../nmorph-icon/NmorphIcon.vue.js";
+/* empty css                             */
+const F = /* @__PURE__ */ k({
+  __name: "NmorphLink",
+  props: {
+    type: { default: A.accent },
+    underline: { type: Boolean, default: !1 },
+    href: { default: "" },
+    text: { default: "" },
+    target: { default: "self" },
+    rel: { default: void 0 },
+    referrerpolicy: { default: void 0 },
+    referrerPolicy: { default: void 0 },
+    download: { type: [String, Boolean], default: void 0 },
+    ariaLabel: { default: void 0 },
+    title: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    color: { default: void 0 },
+    iconName: { default: void 0 }
+  },
+  setup(d) {
+    const e = d, u = _(), l = I, h = (o) => o.split(/[-_\s]+/).filter(Boolean).map((a) => `${a.charAt(0).toUpperCase()}${a.slice(1)}`).join(""), c = r(() => {
+      if (e.iconName)
+        return e.iconName in l ? l[e.iconName] : l[`NmorphIcon${h(e.iconName)}`];
+    }), v = r(
+      () => V({
+        "nmorph-link": [e.type, e.underline && "underline", e.disabled && "disabled"]
+      })
+    ), y = r(
+      () => z({
+        "--link-color": e.color
+      })
+    ), N = r(() => T[e.target] ?? e.target), g = r(() => ({
+      href: e.href,
+      target: N.value,
+      rel: e.rel,
+      referrerpolicy: e.referrerpolicy ?? e.referrerPolicy,
+      download: e.download === !0 ? "" : e.download === !1 ? void 0 : e.download,
+      "aria-label": e.ariaLabel,
+      title: e.title
+    }));
+    return (o, a) => (t(), C("div", {
+      class: b(v.value),
+      style: w(y.value)
+    }, [
+      x("a", B($(g.value)), [
+        i(o.$slots, "prepend"),
+        c.value ? (t(), n(s(m), {
+          key: 0,
+          class: "nmorph-link__icon",
+          width: "10px",
+          height: "10px"
+        }, {
+          default: f(() => [
+            (t(), n(P(c.value)))
+          ]),
+          _: 1
+        })) : p("", !0),
+        S(" " + L(d.text) + " ", 1),
+        s(u).icon ? (t(), n(s(m), {
+          key: 1,
+          class: "nmorph-link__icon",
+          width: "10px",
+          height: "10px"
+        }, {
+          default: f(() => [
+            i(o.$slots, "icon")
+          ]),
+          _: 3
+        })) : p("", !0),
+        i(o.$slots, "default")
+      ], 16)
+    ], 6));
+  }
+});
 export {
-  z as default
+  F as default
 };

package/dist/components/basic/nmorph-link/NmorphLink.vue3.js

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