@nmorph/nmorph-ui-kit 2.2.52 → 2.2.53

package/dist/components/data/nmorph-emoji-picker/NmorphEmojiPicker.vue2.js

@@ -0,0 +1,254 @@
+import './NmorphEmojiPicker.css';
+import { defineComponent as de, ref as L, computed as l, watch as z, nextTick as fe } from "vue";
+import { useModifiers as ge } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as ye } from "../../../utils/common.js";
+import he from "../../form/nmorph-text-input/NmorphTextInput.vue.js";
+import be from "../../basic/nmorph-scroll/NmorphScroll.vue.js";
+import je from "../../../assets/icons/smile.svg.js";
+import ke from "../../../assets/icons/search.svg.js";
+import Se from "../../../assets/icons/burger.svg.js";
+import Le from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import xe from "../../form/nmorph-checkbox/NmorphCheckbox.vue.js";
+const _e = /* @__PURE__ */ de({
+  __name: "NmorphEmojiPicker",
+  props: {
+    language: { type: String, required: !1, default: "en" },
+    dataSource: { type: [Array, Object], required: !1, default: () => [] },
+    i18n: { type: Object, required: !1, default: () => ({}) },
+    quickList: { type: Array, required: !1, default: () => [] },
+    initialExpanded: { type: Boolean, required: !1, default: !0 },
+    width: { type: [Number, String], required: !1, default: "300px" },
+    height: { type: [Number, String], required: !1, default: "260px" },
+    columns: { type: Number, required: !1, default: 8 },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    hideShadow: { type: Boolean, required: !1, default: !1 }
+  },
+  emits: ["select", "expand", "collapse"],
+  setup(oe, { expose: ne, emit: ae }) {
+    ne();
+    const i = oe, x = ae, H = L(""), y = L(i.initialExpanded), f = L(""), N = L(0), V = L(null), F = {
+      searchPlaceholder: "Search emoji",
+      searchLabel: "Search emoji",
+      quickLabel: "Frequent emoji",
+      expandLabel: "Open emoji picker",
+      collapseLabel: "Close emoji picker",
+      noResults: "No emoji found",
+      categoryLabel: "Emoji categories",
+      resultsLabel: "Emoji results"
+    }, d = (e) => !!e && typeof e == "object" && !Array.isArray(e), q = (e) => e.trim().toLocaleLowerCase(i.language || void 0), m = (e, r) => {
+      for (const n of r) {
+        const t = e[n];
+        if (typeof t == "string" && t.trim()) return t.trim();
+        if (typeof t == "number") return String(t);
+      }
+      return "";
+    }, h = (e) => Array.isArray(e) ? e.flatMap(h) : typeof e == "string" ? e.trim() ? [e.trim()] : [] : typeof e == "number" ? [String(e)] : d(e) ? Object.values(e).flatMap(h) : [], b = (e, r, n) => {
+      for (const t of r) {
+        const a = e[t], o = typeof a == "number" ? a : Number(a);
+        if (Number.isFinite(o)) return o;
+      }
+      return n;
+    }, K = (e, r) => {
+      for (const n of r) {
+        const t = e[n];
+        if (Array.isArray(t)) return t;
+      }
+    }, j = (e) => {
+      if (typeof e == "string") return e.trim();
+      if (!d(e)) return "";
+      const r = m(e, ["emoji", "native", "char", "unicode", "value"]);
+      if (r) return r;
+      const n = K(e, ["skinToneVariants", "skins", "variants"])?.[0];
+      return j(n);
+    }, R = (e) => !!j(e), $ = (e) => Array.isArray(e) ? e.map((r) => {
+      const n = j(r);
+      if (!n) return null;
+      if (typeof r == "string") return { emoji: n };
+      const t = d(r) ? r : {};
+      return {
+        emoji: n,
+        annotation: m(t, ["annotation", "label", "name", "description"]),
+        tags: h(t.tags || t.keywords || t.aliases || t.shortcodes),
+        tone: m(t, ["tone", "skinTone", "skin_tone"])
+      };
+    }).filter((r) => !!r) : [], P = (e, r, n) => {
+      if (!d(e))
+        return {
+          key: r,
+          label: r,
+          sort: n
+        };
+      const t = m(e, ["group", "category", "groupName", "categoryName"]) || r, a = m(e, ["groupLabel", "categoryLabel"]) || t, o = b(e, ["groupOrder", "categoryOrder"], Number(t));
+      return {
+        key: t,
+        label: a,
+        sort: Number.isFinite(o) ? o : n
+      };
+    }, Q = (e, r, n, t, a) => {
+      const o = j(e);
+      if (!o) return null;
+      const s = d(e) ? e : {}, c = P(s, r, t), u = m(s, ["annotation", "label", "name", "description"]) || o, p = h(s.tags || s.keywords || s.aliases || s.shortcodes), A = b(s, ["order", "sortOrder", "sort_order", "index"], a), D = s.skinToneVariants || s.skins || s.variants, v = $(D).filter((I) => I.emoji !== o), S = c.key || r, te = c.label || n || S, me = q(
+        [o, u, te, ...p, ...v.map((I) => I.annotation || I.emoji)].filter(Boolean).join(" ")
+      );
+      return {
+        key: `${S}-${A}-${o}`,
+        emoji: o,
+        annotation: u,
+        tags: p,
+        groupKey: S,
+        groupLabel: te,
+        groupSort: c.sort,
+        order: A,
+        skinToneVariants: v,
+        searchText: me
+      };
+    }, E = (e) => {
+      if (!(!d(e) || R(e)))
+        return K(e, ["emojis", "items", "children", "data"]);
+    }, U = (e) => {
+      const r = [], n = (a, o = "emoji", s = o, c = 0, u = r.length) => {
+        const p = Q(
+          a,
+          o,
+          s,
+          c,
+          u
+        );
+        p && r.push(p);
+      }, t = (a, o, s) => {
+        const c = E(a);
+        if (!c) {
+          n(a, "emoji", "emoji", 0, s);
+          return;
+        }
+        const u = d(a) ? a : {}, p = m(u, ["group", "category", "name", "label"]) || o, A = m(u, ["label", "name", "title", "groupLabel", "categoryLabel"]) || p, D = b(u, ["order", "groupOrder", "categoryOrder"], s);
+        c.forEach((v, S) => n(v, p, A, D, S));
+      };
+      if (Array.isArray(e))
+        e.forEach((a, o) => {
+          E(a) ? t(a, `group-${o + 1}`, o) : n(a, "emoji", "emoji", 0, o);
+        });
+      else if (d(e)) {
+        const a = E(e);
+        if (a) {
+          const o = m(e, ["group", "category", "name", "label"]) || "emoji", s = m(e, ["label", "name", "title", "groupLabel", "categoryLabel"]) || o, c = b(e, ["order", "groupOrder", "categoryOrder"], 0);
+          a.forEach((u, p) => n(u, o, s, c, p));
+        } else
+          Object.entries(e).forEach(([o, s], c) => {
+            Array.isArray(s) ? s.forEach((u, p) => n(u, o, o, c, p)) : t(s, o, c);
+          });
+      }
+      return r.sort((a, o) => a.groupSort !== o.groupSort ? a.groupSort - o.groupSort : a.order - o.order);
+    }, O = l(() => ({
+      ...F,
+      ...i.i18n
+    })), C = l(() => ({
+      ...i.i18n?.categories || {},
+      ...i.i18n?.categoryLabels || {}
+    })), g = l(() => U(i.dataSource)), J = l(() => {
+      const e = /* @__PURE__ */ new Map();
+      return g.value.forEach((r) => e.set(r.emoji, r.annotation || r.emoji)), e;
+    }), M = l(() => Array.from(new Set(i.quickList.map((e) => e.trim()).filter(Boolean)))), W = l(() => !y.value && M.value.length > 0), k = l(() => q(H.value)), _ = l(() => {
+      const e = /* @__PURE__ */ new Map();
+      return g.value.forEach((r) => {
+        e.has(r.groupKey) || e.set(r.groupKey, {
+          key: r.groupKey,
+          label: C.value[r.groupKey] || r.groupLabel,
+          sort: r.groupSort
+        });
+      }), Array.from(e.values()).sort((r, n) => r.sort - n.sort);
+    });
+    z(
+      _,
+      (e) => {
+        if (!e.length) {
+          f.value = "";
+          return;
+        }
+        e.some((r) => r.key === f.value) || (f.value = e[0].key);
+      },
+      { immediate: !0 }
+    ), z(
+      () => i.initialExpanded,
+      (e) => {
+        y.value = e;
+      }
+    ), z([k, f], () => {
+      N.value = 0;
+    });
+    const X = l(() => k.value ? g.value.filter((e) => e.searchText.includes(k.value)) : f.value ? g.value.filter((e) => e.groupKey === f.value) : g.value), Y = l(() => {
+      const e = /* @__PURE__ */ new Map();
+      return X.value.forEach((r) => {
+        const n = C.value[r.groupKey] || r.groupLabel, t = e.get(r.groupKey) || {
+          key: r.groupKey,
+          label: n,
+          items: []
+        };
+        t.items.push(r), e.set(r.groupKey, t);
+      }), Array.from(e.values());
+    }), B = l(() => Y.value.flatMap((e) => e.items)), Z = l(
+      () => _.value.find((e) => e.key === f.value)?.label || O.value.resultsLabel
+    ), se = l(() => k.value ? O.value.resultsLabel : Z.value), T = l(() => !i.initialExpanded && M.value.length > 0), ie = l(
+      () => ge({
+        "nmorph-emoji-picker": [
+          W.value && "compact",
+          y.value && "expanded",
+          T.value && "collapsible",
+          i.disabled && "disabled",
+          i.hideShadow && "hide-shadow",
+          !g.value.length && "empty"
+        ]
+      })
+    ), le = l(() => ({
+      ...ye({
+        "--nmorph-emoji-picker-width": i.width,
+        "--nmorph-emoji-picker-height": i.height
+      }),
+      "--nmorph-emoji-picker-columns": Math.max(1, Math.floor(i.columns))
+    })), ce = (e) => J.value.get(e) || e, ue = (e) => {
+      i.disabled || x("select", e);
+    }, G = () => {
+      i.disabled || (y.value = !0, x("expand"));
+    }, ee = () => {
+      i.disabled || !T.value || (y.value = !1, x("collapse"));
+    }, pe = (e) => {
+      if (e) {
+        G();
+        return;
+      }
+      ee();
+    }, w = async (e) => {
+      const r = V.value?.querySelectorAll(".nmorph-emoji-picker__emoji");
+      if (!r?.length) return;
+      const n = Math.min(Math.max(e, 0), r.length - 1);
+      N.value = n, await fe(), r[n]?.focus();
+    }, re = { props: i, emit: x, searchQuery: H, expanded: y, selectedGroup: f, activeIndex: N, gridRef: V, fallbackTexts: F, isRecord: d, normalizeSearchValue: q, getStringCandidate: m, toStringList: h, getNumberCandidate: b, getArrayCandidate: K, getEmojiValue: j, hasEmojiValue: R, normalizeVariants: $, getGroupData: P, normalizeEmojiItem: Q, getGroupedChildren: E, normalizeDataSource: U, texts: O, categoryLabels: C, allEmoji: g, labelByEmoji: J, quickItems: M, showCompact: W, query: k, categoryOptions: _, visibleItems: X, visibleSections: Y, visibleFlatItems: B, activeCategoryLabel: Z, bodyLabel: se, canCollapse: T, modifiers: ie, styles: le, getEmojiLabel: ce, selectEmoji: ue, expandHandler: G, collapseHandler: ee, toggleExpandedHandler: pe, focusEmojiButton: w, gridKeydownHandler: (e) => {
+      if (i.disabled || !B.value.length || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+      const r = Math.max(1, Math.floor(i.columns)), n = B.value.length - 1, t = {
+        ArrowRight: 1,
+        ArrowLeft: -1,
+        ArrowDown: r,
+        ArrowUp: -r
+      };
+      e.key in t && (e.preventDefault(), w(N.value + t[e.key])), e.key === "Home" && (e.preventDefault(), w(0)), e.key === "End" && (e.preventDefault(), w(n));
+    }, get NmorphCheckbox() {
+      return xe;
+    }, get NmorphIcon() {
+      return Le;
+    }, get NmorphIconBurger() {
+      return Se;
+    }, get NmorphIconSearch() {
+      return ke;
+    }, get NmorphIconSmile() {
+      return je;
+    }, get NmorphScroll() {
+      return be;
+    }, get NmorphTextInput() {
+      return he;
+    } };
+    return Object.defineProperty(re, "__isScriptSetup", { enumerable: !1, value: !0 }), re;
+  }
+});
+export {
+  _e as default
+};

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

@@ -1,84 +1,64 @@
 import './NmorphEmpty.css';
-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 = {
+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 = {
   key: 0,
   class: "nmorph-empty__icon",
   "aria-hidden": "true"
-}, E = { class: "nmorph-empty__title" }, D = {
+}, v = { class: "nmorph-empty__title" }, N = {
   key: 1,
   class: "nmorph-empty__description"
-}, H = {
+}, S = {
   key: 2,
   class: "nmorph-empty__action"
-}, 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));
-  }
-});
+};
+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"]]);
 export {
-  G as default
+  B as default
 };

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

@@ -0,0 +1,48 @@
+import './NmorphEmpty.css';
+import { defineComponent as m, useSlots as u, computed as t } from "vue";
+import { useModifiers as f } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as c, toCssSize as h } from "../../../utils/common.js";
+import { NmorphShadowType as g } from "../../../types/common.types.js";
+import y from "../../../assets/icons/folder-opened.svg.js";
+import S from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+const v = /* @__PURE__ */ m({
+  __name: "NmorphEmpty",
+  props: {
+    title: { type: String, required: !1, default: "No data" },
+    description: { type: String, required: !1, default: "" },
+    iconSize: { type: [Number, String], required: !1, default: 56 },
+    minHeight: { type: [Number, String], required: !1, default: 160 },
+    padding: { type: [Number, String], required: !1, default: "var(--indentation-05)" },
+    design: { type: String, required: !1, default: "nmorph" },
+    shadowType: { type: null, required: !1, default: "inset" },
+    hideIcon: { type: Boolean, required: !1, default: !1 },
+    role: { type: String, required: !1, default: "status" },
+    ariaLabel: { type: String, required: !1, default: void 0 },
+    ariaOrientation: { type: String, required: !1, default: void 0 }
+  },
+  setup(o, { expose: n }) {
+    n();
+    const e = o, r = u(), s = t(() => !e.hideIcon || !!r.icon), a = t(() => !!(e.description || r.description)), p = t(() => e.ariaLabel || e.title), d = t(
+      () => f({
+        nmorph: [e.design === "nmorph" ? g[e.shadowType] : ""],
+        "nmorph-empty": [e.design]
+      })
+    ), l = t(
+      () => c({
+        "--nmorph-empty-icon-size": e.iconSize,
+        "--nmorph-empty-min-height": e.minHeight,
+        "--nmorph-empty-padding": e.padding
+      })
+    ), i = { props: e, slots: r, hasIcon: s, hasDescription: a, label: p, modifiers: d, styles: l, get NmorphIcon() {
+      return S;
+    }, get NmorphIconFolderOpened() {
+      return y;
+    }, get toCssSize() {
+      return h;
+    } };
+    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+  }
+});
+export {
+  v as default
+};