@nmorph/nmorph-ui-kit 2.2.51 → 2.2.53

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

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

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

@@ -0,0 +1,101 @@
+import './NmorphTagItem.css';
+import { defineComponent as E, ref as I, computed as f, onMounted as H, onBeforeUnmount as B, watch as F, nextTick as P } from "vue";
+import { useModifiers as U } from "../../../../../utils/create-modifiers.js";
+import { createCssVariables as $ } from "../../../../../utils/common.js";
+import { NmorphComponentHeight as z } from "../../../../../types/common.types.js";
+import G from "../../../../../assets/icons/error.svg.js";
+import j from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+const S = "var(--nmorph-gray-color)", b = "var(--nmorph-black-color)", w = "var(--nmorph-white-color)", Y = /* @__PURE__ */ E({
+  __name: "NmorphTagItem",
+  props: {
+    value: { type: String, required: !0 },
+    text: { type: String, required: !1, default: "" },
+    removable: { type: Boolean, required: !1, default: !0 },
+    height: { type: null, required: !1, default: "basic" },
+    design: { type: String, required: !1, default: "nmorph" },
+    color: { type: String, required: !1, default: S }
+  },
+  emits: ["click", "close"],
+  setup(L, { expose: T, emit: D }) {
+    T();
+    const C = { r: 201, g: 210, b: 222 }, s = L, u = I(null), m = I(b);
+    let i = null;
+    const V = f(
+      () => U({
+        nmorph: [z[s.height]],
+        "nmorph-tag-item": [s.design]
+      })
+    ), p = f(() => s.design === "common"), x = f(
+      () => p.value ? m.value : "var(--nmorph-contrast-text-color)"
+    ), A = f(() => p.value ? $({
+      "--tag-item-background-color": s.color,
+      "--tag-item-content-color": m.value
+    }) : {}), g = D, M = () => {
+      g("close", s.value);
+    }, q = () => {
+      g("click", s.value);
+    }, v = (r) => {
+      const t = r.trim().replace("#", "");
+      if (![3, 4, 6, 8].includes(t.length)) return null;
+      const e = t.length <= 4 ? t.split("").map((o) => `${o}${o}`).join("") : t;
+      return {
+        r: parseInt(e.slice(0, 2), 16),
+        g: parseInt(e.slice(2, 4), 16),
+        b: parseInt(e.slice(4, 6), 16)
+      };
+    }, _ = (r) => {
+      const t = r.match(/^rgba?\((.+)\)$/);
+      if (!t) return null;
+      const e = t[1].split("/")[0], o = e.includes(",") ? e.split(",") : e.trim().split(/\s+/), [n, a, c] = o.map((l) => Number.parseFloat(l));
+      return [n, a, c].some((l) => Number.isNaN(l)) ? null : { r: n, g: a, b: c };
+    }, O = (r, t) => {
+      const e = r.trim().match(/^var\(\s*(--[A-Za-z0-9-_]+)(?:\s*,\s*(.+))?\)$/);
+      if (!e) return r;
+      const [, o, n] = e, a = t.ownerDocument, c = getComputedStyle(t).getPropertyValue(o).trim(), l = getComputedStyle(a.documentElement).getPropertyValue(o).trim();
+      return c || l || n || r;
+    }, y = (r, t) => {
+      let e = r;
+      for (let o = 0; o < 4; o += 1) {
+        const n = O(e, t);
+        if (n === e) break;
+        e = n;
+      }
+      return v(e) || _(e) || C;
+    }, N = ({ r, g: t, b: e }) => {
+      const [o, n, a] = [r, 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 * o + 0.7152 * n + 0.0722 * a;
+    }, h = (r, t) => {
+      const [e, o] = [r, t].sort((n, a) => a - n);
+      return (e + 0.05) / (o + 0.05);
+    }, R = (r) => {
+      const t = N(r), e = h(t, 1), o = h(t, 0);
+      return e > o ? w : b;
+    }, d = async () => {
+      await P(), !(!p.value || !u.value) && (m.value = R(y(s.color, u.value)));
+    };
+    H(() => {
+      d(), !(typeof MutationObserver > "u" || !u.value) && (i = new MutationObserver(() => d()), i.observe(u.value.ownerDocument.documentElement, {
+        attributes: !0,
+        attributeFilter: ["nmorph-data-theme", "class", "style"]
+      }));
+    }), B(() => {
+      i?.disconnect();
+    }), F(() => [s.color, s.design], d, { flush: "post" });
+    const k = { DEFAULT_COMMON_BACKGROUND_COLOR: S, DARK_CONTRAST_COLOR: b, LIGHT_CONTRAST_COLOR: w, DEFAULT_RGB_COLOR: C, props: s, tagRef: u, commonContentColor: m, get themeObserver() {
+      return i;
+    }, set themeObserver(r) {
+      i = r;
+    }, modifiers: V, isCommonDesign: p, closeIconColor: x, styles: A, emit: g, closeHandler: M, clickHandler: q, parseHexColor: v, parseRgbColor: _, resolveCssVariable: O, resolveColor: y, getLuminance: N, getContrastRatio: h, getReadableContentColor: R, updateCommonContentColor: d, get NmorphIcon() {
+      return j;
+    }, get NmorphIconError() {
+      return G;
+    } };
+    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
+  }
+});
+export {
+  Y as default
+};