@nmorph/nmorph-ui-kit 2.2.41 → 2.2.43

package/dist/components/data/nmorph-table/components/nmorph-table-column/NmorphTableColumn.vue.js

@@ -1,19 +1,39 @@
-import r from "./NmorphTableColumn.vue2.js";
-import { openBlock as a, createElementBlock as l, normalizeClass as n, renderSlot as t } from "vue";
-import m from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const s = ["data-id"];
-function c(e, d, i, o, f, p) {
-  return a(), l("div", {
-    ref: "columnDOMEl",
-    "data-id": o.id,
-    class: n(o.modifiers)
-  }, [
-    t(e.$slots, "default", {
-      scope: { columns: o.data?.columns.value, rows: o.data?.rows.value, tableId: o.tableIdentifier }
-    })
-  ], 10, s);
-}
-const h = /* @__PURE__ */ m(r, [["render", c], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-table/components/nmorph-table-column/NmorphTableColumn.vue"]]);
+import { defineComponent as p, inject as r, computed as f, ref as u, provide as s, onMounted as v, openBlock as b, createElementBlock as _, normalizeClass as h, renderSlot as M, unref as l } from "vue";
+import { useModifiers as k } from "../../../../../utils/create-modifiers.js";
+const w = ["data-id"], g = /* @__PURE__ */ p({
+  __name: "NmorphTableColumn",
+  props: {
+    label: { default: "" },
+    width: { default: "" },
+    alignment: { default: "center" },
+    prop: {}
+  },
+  setup(c) {
+    const e = r("table-data"), n = r("table-identifier"), a = c, d = f(
+      () => k({
+        "nmorph-table-column": []
+      })
+    ), o = u(0);
+    s("column-property", a.prop), s("table-identifier", n), v(() => {
+      i();
+    });
+    const i = () => {
+      if (!e?.columns.value) return;
+      const { columns: t } = e;
+      o.value = t.value.length + 1, e.columns.value = [...t.value, { ...a, id: o.value }];
+    }, m = u(null);
+    return (t, C) => (b(), _("div", {
+      ref_key: "columnDOMEl",
+      ref: m,
+      "data-id": o.value,
+      class: h(d.value)
+    }, [
+      M(t.$slots, "default", {
+        scope: { columns: l(e)?.columns.value, rows: l(e)?.rows.value, tableId: l(n) }
+      })
+    ], 10, w));
+  }
+});
 export {
-  h as default
+  g as default
 };

package/dist/components/data/nmorph-table/components/nmorph-table-column/NmorphTableColumn.vue2.js

@@ -1,31 +1,4 @@
-import { defineComponent as m, inject as u, computed as b, ref as i, provide as p, onMounted as _ } from "vue";
-import { useModifiers as v } from "../../../../../utils/create-modifiers.js";
-const S = /* @__PURE__ */ m({
-  __name: "NmorphTableColumn",
-  props: {
-    label: { type: String, required: !1, default: "" },
-    width: { type: String, required: !1, default: "" },
-    alignment: { type: String, required: !1, default: "center" },
-    prop: { type: String, required: !0 }
-  },
-  setup(s, { expose: d }) {
-    d();
-    const e = u("table-data"), n = u("table-identifier"), t = s, c = b(
-      () => v({
-        "nmorph-table-column": []
-      })
-    ), r = i(0);
-    p("column-property", t.prop), p("table-identifier", n), _(() => {
-      o();
-    });
-    const o = () => {
-      if (!e?.columns.value) return;
-      const { columns: a } = e;
-      r.value = a.value.length + 1, e.columns.value = [...a.value, { ...t, id: r.value }];
-    }, f = i(null), l = { data: e, tableIdentifier: n, props: t, modifiers: c, id: r, updateTableData: o, columnDOMEl: f };
-    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
-  }
-});
+import f from "./NmorphTableColumn.vue.js";
 export {
-  S as default
+  f as default
 };

package/dist/components/data/nmorph-table/inner-components/nmorph-sort-button/NmorphSortButton.vue.js

@@ -1,53 +1,61 @@
 import './NmorphSortButton.css';
-import t from "./NmorphSortButton.vue2.js";
-import { openBlock as i, createElementBlock as e, normalizeClass as c, createVNode as n, withCtx as r } from "vue";
-/* empty css                      */
-import m from "../../../../../_virtual/_plugin-vue_export-helper.js";
-function a(h, l, p, o, _, d) {
-  return i(), e(
-    "div",
-    {
-      class: c(o.modifiers)
-    },
-    [
-      n(o.NmorphButton, {
+import { defineComponent as d, computed as _, openBlock as f, createElementBlock as h, normalizeClass as g, createVNode as t, unref as o, withCtx as n } from "vue";
+import { useModifiers as v } from "../../../../../utils/create-modifiers.js";
+import w from "../../../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                                */
+import s from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                            */
+import c from "../../../../../assets/icons/triangle-down.svg.js";
+const e = "10px", y = /* @__PURE__ */ d({
+  __name: "NmorphSortButton",
+  props: {
+    value: {}
+  },
+  emits: ["sort"],
+  setup(m, { emit: a }) {
+    const r = m, p = a, l = _(
+      () => v({
+        "nmorph-sort-button": [`${r.value}`]
+      })
+    ), u = () => {
+      const i = r.value === "ascending" ? "descending" : "ascending";
+      p("sort", i);
+    };
+    return (i, x) => (f(), h("div", {
+      class: g(l.value)
+    }, [
+      t(o(w), {
         height: "thin",
         "style-type": "transparent",
-        onClick: o.toggleSort
+        onClick: u
       }, {
-        default: r(() => [
-          n(o.NmorphIcon, {
+        default: n(() => [
+          t(o(s), {
             class: "nmorph-sort-button__icon-up",
-            width: o.iconSize,
-            height: o.iconSize
+            width: e,
+            height: e
           }, {
-            default: r(() => [
-              n(o.NmorphIconTriangleDown)
+            default: n(() => [
+              t(o(c))
             ]),
             _: 1
-            /* STABLE */
           }),
-          n(o.NmorphIcon, {
+          t(o(s), {
             class: "nmorph-sort-button__icon-down",
-            width: o.iconSize,
-            height: o.iconSize
+            width: e,
+            height: e
           }, {
-            default: r(() => [
-              n(o.NmorphIconTriangleDown)
+            default: n(() => [
+              t(o(c))
             ]),
             _: 1
-            /* STABLE */
           })
         ]),
         _: 1
-        /* STABLE */
       })
-    ],
-    2
-    /* CLASS */
-  );
-}
-const S = /* @__PURE__ */ m(t, [["render", a], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-table/inner-components/nmorph-sort-button/NmorphSortButton.vue"]]);
+    ], 2));
+  }
+});
 export {
-  S as default
+  y as default
 };

package/dist/components/data/nmorph-table/inner-components/nmorph-sort-button/NmorphSortButton.vue3.js

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

package/dist/components/data/nmorph-tag-list/NmorphTagList.vue.js

@@ -1,39 +1,83 @@
 import './NmorphTagList.css';
-import n from "./NmorphTagList.vue2.js";
-import { openBlock as e, createElementBlock as l, normalizeClass as t, Fragment as a, renderList as i, createBlock as c, mergeProps as m } from "vue";
-/* empty css                   */
-import s from "../../../_virtual/_plugin-vue_export-helper.js";
-function p(d, f, _, r, g, k) {
-  return e(), l(
-    "div",
-    {
-      class: t(r.modifiers)
-    },
-    [
-      (e(!0), l(
-        a,
-        null,
-        i(r.resolvedTagList, (o) => (e(), c(
-          r.NmorphTagItem,
-          m({
-            key: o.value
-          }, { ref_for: !0 }, o, {
-            onClick: r.clickTagHandler,
-            onClose: r.closeTagHandler
-          }),
-          null,
-          16
-          /* FULL_PROPS */
-        ))),
-        128
-        /* KEYED_FRAGMENT */
-      ))
-    ],
-    2
-    /* CLASS */
-  );
-}
-const L = /* @__PURE__ */ s(n, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/NmorphTagList.vue"]]);
+import { defineComponent as V, computed as u, shallowRef as T, watch as I, openBlock as r, createElementBlock as c, normalizeClass as L, Fragment as d, renderList as P, createBlock as a, unref as p, mergeProps as f, withCtx as w, renderSlot as x } from "vue";
+import { useModifiers as y } from "../../../utils/create-modifiers.js";
+import v from "./components/nmorph-tag-item/NmorphTagItem.vue.js";
+/* empty css                                              */
+const R = /* @__PURE__ */ V({
+  __name: "NmorphTagList",
+  props: {
+    modelValue: {},
+    selectedValue: {},
+    design: { default: "nmorph" },
+    color: {}
+  },
+  emits: ["click", "close", "update:model-value", "update:selected-value", "update:selectedValue"],
+  setup(g, { emit: h }) {
+    const l = g, t = h, k = u(
+      () => y({
+        "nmorph-list": [l.design]
+      })
+    ), s = T(l.modelValue), _ = (e) => ({
+      ...e,
+      design: e.design ?? l.design,
+      color: e.color ?? l.color
+    }), C = u(
+      () => s.value.map((e) => {
+        const o = _(e);
+        return {
+          item: o,
+          tagItemProps: {
+            value: e.value,
+            text: e.text,
+            removable: e.removable,
+            height: e.height,
+            design: o.design,
+            color: o.color
+          }
+        };
+      })
+    );
+    I(
+      () => l.modelValue,
+      (e) => {
+        s.value = e;
+      }
+    );
+    const i = (e) => {
+      s.value = s.value.filter((o) => o.value !== e), t("close", e), t("update:model-value", s.value);
+    }, m = (e) => {
+      t("click", e), t("update:selected-value", e), t("update:selectedValue", e);
+    };
+    return (e, o) => (r(), c("div", {
+      class: L(k.value)
+    }, [
+      (r(!0), c(d, null, P(C.value, (n) => (r(), c(d, {
+        key: n.item.value
+      }, [
+        e.$slots.item ? (r(), a(p(v), f({
+          key: 0,
+          ref_for: !0
+        }, n.tagItemProps, {
+          onClick: m,
+          onClose: i
+        }), {
+          default: w(() => [
+            x(e.$slots, "item", {
+              item: n.item
+            })
+          ]),
+          _: 2
+        }, 1040)) : (r(), a(p(v), f({
+          key: 1,
+          ref_for: !0
+        }, n.tagItemProps, {
+          onClick: m,
+          onClose: i
+        }), null, 16))
+      ], 64))), 128))
+    ], 2));
+  }
+});
 export {
-  L as default
+  R as default
 };

package/dist/components/data/nmorph-tag-list/NmorphTagList.vue3.js

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

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.css

@@ -1 +1 @@
-.nmorph-tag-item{display:inline-flex;margin-right:var(--indentation-02);padding:var(--indentation-00) var(--indentation-03);color:var(--nmorph-text-color);border-radius:var(--default-border-radius);cursor:default}.nmorph-tag-item .nmorph-tag-item__content{display:flex;align-items:center;height:100%}.nmorph-tag-item span{color:inherit}.nmorph-tag-item .nmorph-tag-item__close-icon{margin-left:4px;cursor:pointer;--color: currentColor}.nmorph-tag-item.nmorph-tag-item--nmorph{background:var(--nmorph-main-color);border:none;box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tag-item.nmorph-tag-item--common{color:var(--tag-item-content-color);background:var(--tag-item-background-color);border:none;box-shadow:none}.nmorph-tag-item.nmorph-tag-item--thin{--height: var(--thin-component)}.nmorph-tag-item.nmorph-tag-item--thin span{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-tag-item.nmorph-tag-item--thick{--height: var(--thick-component)}
+.nmorph-tag-item{display:inline-flex;margin-right:var(--indentation-02);padding:var(--indentation-00) var(--indentation-03);color:var(--nmorph-text-color);border-radius:var(--default-border-radius);cursor:default}.nmorph-tag-item .nmorph-tag-item__content{display:flex;gap:4px;align-items:center;height:100%;color:inherit}.nmorph-tag-item span{color:inherit}.nmorph-tag-item .nmorph-tag-item__close-icon{cursor:pointer;--color: currentColor}.nmorph-tag-item.nmorph-tag-item--nmorph{background:var(--nmorph-main-color);border:none;box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-tag-item.nmorph-tag-item--common{color:var(--tag-item-content-color);background:var(--tag-item-background-color);border:none;box-shadow:none}.nmorph-tag-item.nmorph-tag-item--thin{--height: var(--thin-component)}.nmorph-tag-item.nmorph-tag-item--thin span{font-weight:400;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular)}.nmorph-tag-item.nmorph-tag-item--thick{--height: var(--thick-component)}

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js

@@ -1,45 +1,109 @@
 import './NmorphTagItem.css';
-import n from "./NmorphTagItem.vue2.js";
-import { openBlock as e, createElementBlock as a, normalizeStyle as c, normalizeClass as i, createElementVNode as t, toDisplayString as m, createBlock as l, withModifiers as s, withCtx as p, createVNode as d, createCommentVNode as _ } from "vue";
-/* empty css                   */
-import f from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const h = { class: "nmorph-tag-item__content" };
-function g(k, N, r, o, y, v) {
-  return e(), a(
-    "div",
-    {
-      ref: "tagRef",
-      class: i(o.modifiers),
-      style: c(o.styles),
-      onClick: o.clickHandler
-    },
-    [
-      t("div", h, [
-        t(
-          "span",
-          null,
-          m(r.text),
-          1
-          /* TEXT */
-        ),
-        o.props.removable ? (e(), l(o.NmorphIcon, {
-          key: 0,
+import { defineComponent as S, ref as v, computed as p, onMounted as $, onBeforeUnmount as x, watch as I, openBlock as d, createElementBlock as _, normalizeStyle as z, normalizeClass as H, createElementVNode as F, renderSlot as U, toDisplayString as G, createBlock as P, unref as k, withModifiers as K, withCtx as j, createVNode as Z, createCommentVNode as q, nextTick as J } from "vue";
+import { useModifiers as Q } from "../../../../../utils/create-modifiers.js";
+import { createCssVariables as W } from "../../../../../utils/common.js";
+import { NmorphComponentHeight as X } from "../../../../../types/common.types.js";
+import Y from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                            */
+import ee from "../../../../../assets/icons/error.svg.js";
+const te = { class: "nmorph-tag-item__content" }, oe = { key: 1 }, re = "var(--nmorph-gray-color)", y = "var(--nmorph-black-color)", ne = "var(--nmorph-white-color)", pe = /* @__PURE__ */ S({
+  __name: "NmorphTagItem",
+  props: {
+    value: {},
+    text: { default: "" },
+    removable: { type: Boolean, default: !0 },
+    height: { default: "basic" },
+    design: { default: "nmorph" },
+    color: { default: re }
+  },
+  emits: ["click", "close"],
+  setup(f, { emit: O }) {
+    const N = { r: 201, g: 210, b: 222 }, s = f, i = v(null), h = v(y);
+    let m = null;
+    const R = p(
+      () => Q({
+        nmorph: [X[s.height]],
+        "nmorph-tag-item": [s.design]
+      })
+    ), g = p(() => s.design === "common"), w = p(() => g.value ? W({
+      "--tag-item-background-color": s.color,
+      "--tag-item-content-color": h.value
+    }) : {}), C = O, V = () => {
+      C("close", s.value);
+    }, D = () => {
+      C("click", s.value);
+    }, L = (o) => {
+      const t = o.trim().replace("#", "");
+      if (![3, 4, 6, 8].includes(t.length)) return null;
+      const e = t.length <= 4 ? t.split("").map((r) => `${r}${r}`).join("") : t;
+      return {
+        r: parseInt(e.slice(0, 2), 16),
+        g: parseInt(e.slice(2, 4), 16),
+        b: parseInt(e.slice(4, 6), 16)
+      };
+    }, T = (o) => {
+      const t = o.match(/^rgba?\((.+)\)$/);
+      if (!t) return null;
+      const e = t[1].split("/")[0], r = e.includes(",") ? e.split(",") : e.trim().split(/\s+/), [n, a, c] = r.map((l) => Number.parseFloat(l));
+      return [n, a, c].some((l) => Number.isNaN(l)) ? null : { r: n, g: a, b: c };
+    }, M = (o, t) => {
+      const e = o.trim().match(/^var\(\s*(--[A-Za-z0-9-_]+)(?:\s*,\s*(.+))?\)$/);
+      if (!e) return o;
+      const [, r, n] = e, a = t.ownerDocument, c = getComputedStyle(t).getPropertyValue(r).trim(), l = getComputedStyle(a.documentElement).getPropertyValue(r).trim();
+      return c || l || n || o;
+    }, A = (o, t) => {
+      let e = o;
+      for (let r = 0; r < 4; r += 1) {
+        const n = M(e, t);
+        if (n === e) break;
+        e = n;
+      }
+      return L(e) || T(e) || N;
+    }, B = ({ r: o, g: t, b: e }) => {
+      const [r, n, a] = [o, t, e].map((c) => {
+        const l = c / 255;
+        return l <= 0.03928 ? l / 12.92 : ((l + 0.055) / 1.055) ** 2.4;
+      });
+      return 0.2126 * r + 0.7152 * n + 0.0722 * a;
+    }, b = (o, t) => {
+      const [e, r] = [o, t].sort((n, a) => a - n);
+      return (e + 0.05) / (r + 0.05);
+    }, E = (o) => {
+      const t = B(o), e = b(t, 1), r = b(t, 0);
+      return e > r ? ne : y;
+    }, u = async () => {
+      await J(), !(!g.value || !i.value) && (h.value = E(A(s.color, i.value)));
+    };
+    return $(() => {
+      u(), !(typeof MutationObserver > "u" || !i.value) && (m = new MutationObserver(() => u()), m.observe(i.value.ownerDocument.documentElement, {
+        attributes: !0,
+        attributeFilter: ["nmorph-data-theme", "class", "style"]
+      }));
+    }), x(() => {
+      m?.disconnect();
+    }), I(() => [s.color, s.design], u, { flush: "post" }), (o, t) => (d(), _("div", {
+      ref_key: "tagRef",
+      ref: i,
+      class: H(R.value),
+      style: z(w.value),
+      onClick: D
+    }, [
+      F("div", te, [
+        o.$slots.default ? U(o.$slots, "default", { key: 0 }) : (d(), _("span", oe, G(f.text), 1)),
+        s.removable ? (d(), P(k(Y), {
+          key: 2,
           class: "nmorph-tag-item__close-icon",
-          onClick: s(o.closeHandler, ["stop"])
+          onClick: K(V, ["stop"])
         }, {
-          default: p(() => [
-            d(o.NmorphIconError)
+          default: j(() => [
+            Z(k(ee))
           ]),
           _: 1
-          /* STABLE */
-        })) : _("v-if", !0)
+        })) : q("", !0)
       ])
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const B = /* @__PURE__ */ f(n, [["render", g], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue"]]);
+    ], 6));
+  }
+});
 export {
-  B as default
+  pe as default
 };

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue3.js

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