@nmorph/nmorph-ui-kit 2.2.53 → 2.2.54

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

@@ -1,232 +1,407 @@
 import './NmorphEmojiPicker.css';
-import x from "./NmorphEmojiPicker.vue2.js";
-import { openBlock as l, createElementBlock as r, normalizeStyle as y, normalizeClass as p, createBlock as _, withModifiers as j, withCtx as n, createVNode as i, createElementVNode as c, toDisplayString as t, createCommentVNode as h, Fragment as d, renderList as m } from "vue";
-/* empty css                       */
-import v from "../../../_virtual/_plugin-vue_export-helper.js";
-const g = ["lang"], f = { class: "nmorph-emoji-picker__button-label" }, N = ["aria-label"], u = ["aria-label", "title", "disabled", "onClick"], C = {
+import { defineComponent as Ee, ref as S, computed as s, watch as Q, openBlock as c, createElementBlock as d, normalizeStyle as Se, normalizeClass as J, createBlock as le, unref as b, withModifiers as Ce, withCtx as v, createVNode as k, createElementVNode as L, toDisplayString as w, createCommentVNode as W, Fragment as O, renderList as $, nextTick as Ae } from "vue";
+import { useModifiers as Ke } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Me } from "../../../utils/common.js";
+import Ne from "../../form/nmorph-checkbox/NmorphCheckbox.vue.js";
+/* empty css                                             */
+import X from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import ze from "../../../assets/icons/burger.svg.js";
+import Y from "../../basic/nmorph-scroll/NmorphScroll.vue.js";
+/* empty css                                          */
+import Be from "../../form/nmorph-text-input/NmorphTextInput.vue.js";
+/* empty css                                                */
+import Ie from "../../../assets/icons/search.svg.js";
+import Oe from "../../../assets/icons/smile.svg.js";
+const $e = ["lang"], Ve = { class: "nmorph-emoji-picker__button-label" }, qe = ["aria-label"], De = ["aria-label", "title", "disabled", "onClick"], Te = {
   key: 2,
   class: "nmorph-emoji-picker__panel"
-}, L = { class: "nmorph-emoji-picker__toolbar" }, I = ["aria-selected", "disabled", "onClick"], E = ["aria-label"], S = {
+}, Fe = { class: "nmorph-emoji-picker__toolbar" }, Re = ["aria-selected", "disabled", "onClick"], He = ["aria-label"], Pe = {
   key: 0,
   class: "nmorph-emoji-picker__section-title"
-}, w = { class: "nmorph-emoji-picker__grid" }, z = ["aria-label", "title", "disabled", "onFocus", "onClick"], q = { class: "nmorph-emoji-picker__emoji-symbol" }, V = {
+}, Ue = { class: "nmorph-emoji-picker__grid" }, Qe = ["aria-label", "title", "disabled", "onFocus", "onClick"], Je = { class: "nmorph-emoji-picker__emoji-symbol" }, We = {
   key: 1,
   class: "nmorph-emoji-picker__empty"
-};
-function B(F, s, G, e, P, H) {
-  return l(), r("div", {
-    class: p(e.modifiers),
-    style: y(e.styles),
-    lang: e.props.language
-  }, [
-    e.canCollapse ? (l(), _(e.NmorphCheckbox, {
-      key: 0,
-      class: p(["nmorph-emoji-picker__toggle-button nmorph-emoji-picker__expand-button", { "nmorph-emoji-picker__collapse-button": e.expanded }]),
-      design: "button",
-      "model-value": e.expanded,
-      "aria-label": e.expanded ? e.texts.collapseLabel : e.texts.expandLabel,
-      title: e.expanded ? e.texts.collapseLabel : e.texts.expandLabel,
-      disabled: e.props.disabled,
-      onClick: s[0] || (s[0] = j((o) => e.toggleExpandedHandler(!e.expanded), ["prevent"]))
-    }, {
-      label: n(() => [
-        i(e.NmorphIcon, { size: "small" }, {
-          default: n(() => [
-            i(e.NmorphIconBurger)
-          ]),
-          _: 1
-          /* STABLE */
-        }),
-        c(
-          "span",
-          f,
-          t(e.expanded ? e.texts.collapseLabel : e.texts.expandLabel),
-          1
-          /* TEXT */
-        )
-      ]),
-      _: 1
-      /* STABLE */
-    }, 8, ["class", "model-value", "aria-label", "title", "disabled"])) : h("v-if", !0),
-    e.showCompact ? (l(), r("div", {
-      key: 1,
-      class: "nmorph-emoji-picker__compact",
-      role: "group",
-      "aria-label": e.texts.quickLabel
+}, uo = /* @__PURE__ */ Ee({
+  __name: "NmorphEmojiPicker",
+  props: {
+    language: { default: "en" },
+    dataSource: { default: () => [] },
+    i18n: { default: () => ({}) },
+    quickList: { default: () => [] },
+    initialExpanded: { type: Boolean, default: !0 },
+    width: { default: "300px" },
+    height: { default: "260px" },
+    columns: { default: 8 },
+    disabled: { type: Boolean, default: !1 },
+    hideShadow: { type: Boolean, default: !1 }
+  },
+  emits: ["select", "expand", "collapse"],
+  setup(ie, { emit: se }) {
+    const l = ie, V = se, q = S(""), f = S(l.initialExpanded), y = S(""), C = S(0), Z = S(null), ce = {
+      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"
+    }, _ = (e) => !!e && typeof e == "object" && !Array.isArray(e), G = (e) => e.trim().toLocaleLowerCase(l.language || void 0), g = (e, o) => {
+      for (const r of o) {
+        const t = e[r];
+        if (typeof t == "string" && t.trim()) return t.trim();
+        if (typeof t == "number") return String(t);
+      }
+      return "";
+    }, A = (e) => Array.isArray(e) ? e.flatMap(A) : typeof e == "string" ? e.trim() ? [e.trim()] : [] : typeof e == "number" ? [String(e)] : _(e) ? Object.values(e).flatMap(A) : [], K = (e, o, r) => {
+      for (const t of o) {
+        const n = e[t], a = typeof n == "number" ? n : Number(n);
+        if (Number.isFinite(a)) return a;
+      }
+      return r;
+    }, ee = (e, o) => {
+      for (const r of o) {
+        const t = e[r];
+        if (Array.isArray(t)) return t;
+      }
+    }, M = (e) => {
+      if (typeof e == "string") return e.trim();
+      if (!_(e)) return "";
+      const o = g(e, ["emoji", "native", "char", "unicode", "value"]);
+      if (o) return o;
+      const r = ee(e, ["skinToneVariants", "skins", "variants"])?.[0];
+      return M(r);
+    }, ue = (e) => !!M(e), pe = (e) => Array.isArray(e) ? e.map((o) => {
+      const r = M(o);
+      if (!r) return null;
+      if (typeof o == "string") return { emoji: r };
+      const t = _(o) ? o : {};
+      return {
+        emoji: r,
+        annotation: g(t, ["annotation", "label", "name", "description"]),
+        tags: A(t.tags || t.keywords || t.aliases || t.shortcodes),
+        tone: g(t, ["tone", "skinTone", "skin_tone"])
+      };
+    }).filter((o) => !!o) : [], de = (e, o, r) => {
+      if (!_(e))
+        return {
+          key: o,
+          label: o,
+          sort: r
+        };
+      const t = g(e, ["group", "category", "groupName", "categoryName"]) || o, n = g(e, ["groupLabel", "categoryLabel"]) || t, a = K(e, ["groupOrder", "categoryOrder"], Number(t));
+      return {
+        key: t,
+        label: n,
+        sort: Number.isFinite(a) ? a : r
+      };
+    }, me = (e, o, r, t, n) => {
+      const a = M(e);
+      if (!a) return null;
+      const i = _(e) ? e : {}, p = de(i, o, t), m = g(i, ["annotation", "label", "name", "description"]) || a, h = A(i.tags || i.keywords || i.aliases || i.shortcodes), z = K(i, ["order", "sortOrder", "sort_order", "index"], n), U = i.skinToneVariants || i.skins || i.variants, B = pe(U).filter((I) => I.emoji !== a), E = p.key || o, ne = p.label || r || E, we = G(
+        [a, m, ne, ...h, ...B.map((I) => I.annotation || I.emoji)].filter(Boolean).join(" ")
+      );
+      return {
+        key: `${E}-${z}-${a}`,
+        emoji: a,
+        annotation: m,
+        tags: h,
+        groupKey: E,
+        groupLabel: ne,
+        groupSort: p.sort,
+        order: z,
+        skinToneVariants: B,
+        searchText: we
+      };
+    }, D = (e) => {
+      if (!(!_(e) || ue(e)))
+        return ee(e, ["emojis", "items", "children", "data"]);
+    }, he = (e) => {
+      const o = [], r = (n, a = "emoji", i = a, p = 0, m = o.length) => {
+        const h = me(
+          n,
+          a,
+          i,
+          p,
+          m
+        );
+        h && o.push(h);
+      }, t = (n, a, i) => {
+        const p = D(n);
+        if (!p) {
+          r(n, "emoji", "emoji", 0, i);
+          return;
+        }
+        const m = _(n) ? n : {}, h = g(m, ["group", "category", "name", "label"]) || a, z = g(m, ["label", "name", "title", "groupLabel", "categoryLabel"]) || h, U = K(m, ["order", "groupOrder", "categoryOrder"], i);
+        p.forEach((B, E) => r(B, h, z, U, E));
+      };
+      if (Array.isArray(e))
+        e.forEach((n, a) => {
+          D(n) ? t(n, `group-${a + 1}`, a) : r(n, "emoji", "emoji", 0, a);
+        });
+      else if (_(e)) {
+        const n = D(e);
+        if (n) {
+          const a = g(e, ["group", "category", "name", "label"]) || "emoji", i = g(e, ["label", "name", "title", "groupLabel", "categoryLabel"]) || a, p = K(e, ["order", "groupOrder", "categoryOrder"], 0);
+          n.forEach((m, h) => r(m, a, i, p, h));
+        } else
+          Object.entries(e).forEach(([a, i], p) => {
+            Array.isArray(i) ? i.forEach((m, h) => r(m, a, a, p, h)) : t(i, a, p);
+          });
+      }
+      return o.sort((n, a) => n.groupSort !== a.groupSort ? n.groupSort - a.groupSort : n.order - a.order);
+    }, u = s(() => ({
+      ...ce,
+      ...l.i18n
+    })), oe = s(() => ({
+      ...l.i18n?.categories || {},
+      ...l.i18n?.categoryLabels || {}
+    })), j = s(() => he(l.dataSource)), fe = s(() => {
+      const e = /* @__PURE__ */ new Map();
+      return j.value.forEach((o) => e.set(o.emoji, o.annotation || o.emoji)), e;
+    }), T = s(() => Array.from(new Set(l.quickList.map((e) => e.trim()).filter(Boolean)))), re = s(() => !f.value && T.value.length > 0), x = s(() => G(q.value)), N = s(() => {
+      const e = /* @__PURE__ */ new Map();
+      return j.value.forEach((o) => {
+        e.has(o.groupKey) || e.set(o.groupKey, {
+          key: o.groupKey,
+          label: oe.value[o.groupKey] || o.groupLabel,
+          sort: o.groupSort
+        });
+      }), Array.from(e.values()).sort((o, r) => o.sort - r.sort);
+    });
+    Q(
+      N,
+      (e) => {
+        if (!e.length) {
+          y.value = "";
+          return;
+        }
+        e.some((o) => o.key === y.value) || (y.value = e[0].key);
+      },
+      { immediate: !0 }
+    ), Q(
+      () => l.initialExpanded,
+      (e) => {
+        f.value = e;
+      }
+    ), Q([x, y], () => {
+      C.value = 0;
+    });
+    const be = s(() => x.value ? j.value.filter((e) => e.searchText.includes(x.value)) : y.value ? j.value.filter((e) => e.groupKey === y.value) : j.value), F = s(() => {
+      const e = /* @__PURE__ */ new Map();
+      return be.value.forEach((o) => {
+        const r = oe.value[o.groupKey] || o.groupLabel, t = e.get(o.groupKey) || {
+          key: o.groupKey,
+          label: r,
+          items: []
+        };
+        t.items.push(o), e.set(o.groupKey, t);
+      }), Array.from(e.values());
+    }), R = s(() => F.value.flatMap((e) => e.items)), ye = s(
+      () => N.value.find((e) => e.key === y.value)?.label || u.value.resultsLabel
+    ), ge = s(() => x.value ? u.value.resultsLabel : ye.value), H = s(() => !l.initialExpanded && T.value.length > 0), ke = s(
+      () => Ke({
+        "nmorph-emoji-picker": [
+          re.value && "compact",
+          f.value && "expanded",
+          H.value && "collapsible",
+          l.disabled && "disabled",
+          l.hideShadow && "hide-shadow",
+          !j.value.length && "empty"
+        ]
+      })
+    ), _e = s(() => ({
+      ...Me({
+        "--nmorph-emoji-picker-width": l.width,
+        "--nmorph-emoji-picker-height": l.height
+      }),
+      "--nmorph-emoji-picker-columns": Math.max(1, Math.floor(l.columns))
+    })), te = (e) => fe.value.get(e) || e, ae = (e) => {
+      l.disabled || V("select", e);
+    }, ve = () => {
+      l.disabled || (f.value = !0, V("expand"));
+    }, je = () => {
+      l.disabled || !H.value || (f.value = !1, V("collapse"));
+    }, xe = (e) => {
+      if (e) {
+        ve();
+        return;
+      }
+      je();
+    }, P = async (e) => {
+      const o = Z.value?.querySelectorAll(".nmorph-emoji-picker__emoji");
+      if (!o?.length) return;
+      const r = Math.min(Math.max(e, 0), o.length - 1);
+      C.value = r, await Ae(), o[r]?.focus();
+    }, Le = (e) => {
+      if (l.disabled || !R.value.length || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+      const o = Math.max(1, Math.floor(l.columns)), r = R.value.length - 1, t = {
+        ArrowRight: 1,
+        ArrowLeft: -1,
+        ArrowDown: o,
+        ArrowUp: -o
+      };
+      e.key in t && (e.preventDefault(), P(C.value + t[e.key])), e.key === "Home" && (e.preventDefault(), P(0)), e.key === "End" && (e.preventDefault(), P(r));
+    };
+    return (e, o) => (c(), d("div", {
+      class: J(ke.value),
+      style: Se(_e.value),
+      lang: l.language
     }, [
-      i(e.NmorphScroll, {
-        class: "nmorph-emoji-picker__quick-list",
-        height: "calc(var(--nmorph-emoji-picker-cell-size) + var(--nmorph-emoji-picker-scrollbar-size))",
-        "max-height": "calc(var(--nmorph-emoji-picker-cell-size) + var(--nmorph-emoji-picker-scrollbar-size))",
-        "scroll-y-prop": "hidden",
-        "scroll-x-prop": "auto",
-        "css-scroll-behavior": "auto",
-        "x-bar-width-in-px": 6
+      H.value ? (c(), le(b(Ne), {
+        key: 0,
+        class: J(["nmorph-emoji-picker__toggle-button nmorph-emoji-picker__expand-button", { "nmorph-emoji-picker__collapse-button": f.value }]),
+        design: "button",
+        "model-value": f.value,
+        "aria-label": f.value ? u.value.collapseLabel : u.value.expandLabel,
+        title: f.value ? u.value.collapseLabel : u.value.expandLabel,
+        disabled: l.disabled,
+        onClick: o[0] || (o[0] = Ce((r) => xe(!f.value), ["prevent"]))
       }, {
-        default: n(() => [
-          (l(!0), r(
-            d,
-            null,
-            m(e.quickItems, (o) => (l(), r("button", {
-              key: o,
-              type: "button",
-              class: "nmorph-emoji-picker__quick-button",
-              "aria-label": e.getEmojiLabel(o),
-              title: e.getEmojiLabel(o),
-              disabled: e.props.disabled,
-              onClick: (a) => e.selectEmoji(o)
-            }, t(o), 9, u))),
-            128
-            /* KEYED_FRAGMENT */
-          ))
+        label: v(() => [
+          k(b(X), { size: "small" }, {
+            default: v(() => [
+              k(b(ze))
+            ]),
+            _: 1
+          }),
+          L("span", Ve, w(f.value ? u.value.collapseLabel : u.value.expandLabel), 1)
         ]),
         _: 1
-        /* STABLE */
-      })
-    ], 8, N)) : (l(), r("div", C, [
-      c("div", L, [
-        i(e.NmorphTextInput, {
-          modelValue: e.searchQuery,
-          "onUpdate:modelValue": s[1] || (s[1] = (o) => e.searchQuery = o),
-          class: "nmorph-emoji-picker__search",
-          placeholder: e.texts.searchPlaceholder,
-          disabled: e.props.disabled,
-          "input-attrs": {
-            class: "nmorph-emoji-picker__search-input",
-            role: "searchbox",
-            "aria-label": e.texts.searchLabel
-          }
+      }, 8, ["class", "model-value", "aria-label", "title", "disabled"])) : W("", !0),
+      re.value ? (c(), d("div", {
+        key: 1,
+        class: "nmorph-emoji-picker__compact",
+        role: "group",
+        "aria-label": u.value.quickLabel
+      }, [
+        k(b(Y), {
+          class: "nmorph-emoji-picker__quick-list",
+          height: "calc(var(--nmorph-emoji-picker-cell-size) + var(--nmorph-emoji-picker-scrollbar-size))",
+          "max-height": "calc(var(--nmorph-emoji-picker-cell-size) + var(--nmorph-emoji-picker-scrollbar-size))",
+          "scroll-y-prop": "hidden",
+          "scroll-x-prop": "auto",
+          "css-scroll-behavior": "auto",
+          "x-bar-width-in-px": 6
         }, {
-          "prepend-icon": n(() => [
-            i(e.NmorphIcon, { size: "small" }, {
-              default: n(() => [
-                i(e.NmorphIconSearch)
-              ]),
-              _: 1
-              /* STABLE */
-            })
+          default: v(() => [
+            (c(!0), d(O, null, $(T.value, (r) => (c(), d("button", {
+              key: r,
+              type: "button",
+              class: "nmorph-emoji-picker__quick-button",
+              "aria-label": te(r),
+              title: te(r),
+              disabled: l.disabled,
+              onClick: (t) => ae(r)
+            }, w(r), 9, De))), 128))
           ]),
           _: 1
-          /* STABLE */
-        }, 8, ["modelValue", "placeholder", "disabled", "input-attrs"])
-      ]),
-      e.categoryOptions.length && !e.query ? (l(), _(e.NmorphScroll, {
-        key: 0,
-        class: "nmorph-emoji-picker__categories",
-        height: "40px",
-        "max-height": "40px",
-        "scroll-y-prop": "hidden",
-        "scroll-x-prop": "auto",
-        "css-scroll-behavior": "auto",
-        "x-bar-width-in-px": 6,
-        "x-gap-in-px": 6,
-        role: "tablist",
-        "aria-label": e.texts.categoryLabel
-      }, {
-        default: n(() => [
-          (l(!0), r(
-            d,
-            null,
-            m(e.categoryOptions, (o) => (l(), r("button", {
-              key: o.key,
+        })
+      ], 8, qe)) : (c(), d("div", Te, [
+        L("div", Fe, [
+          k(b(Be), {
+            modelValue: q.value,
+            "onUpdate:modelValue": o[1] || (o[1] = (r) => q.value = r),
+            class: "nmorph-emoji-picker__search",
+            placeholder: u.value.searchPlaceholder,
+            disabled: l.disabled,
+            "input-attrs": {
+              class: "nmorph-emoji-picker__search-input",
+              role: "searchbox",
+              "aria-label": u.value.searchLabel
+            }
+          }, {
+            "prepend-icon": v(() => [
+              k(b(X), { size: "small" }, {
+                default: v(() => [
+                  k(b(Ie))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue", "placeholder", "disabled", "input-attrs"])
+        ]),
+        N.value.length && !x.value ? (c(), le(b(Y), {
+          key: 0,
+          class: "nmorph-emoji-picker__categories",
+          height: "40px",
+          "max-height": "40px",
+          "scroll-y-prop": "hidden",
+          "scroll-x-prop": "auto",
+          "css-scroll-behavior": "auto",
+          "x-bar-width-in-px": 6,
+          "x-gap-in-px": 6,
+          role: "tablist",
+          "aria-label": u.value.categoryLabel
+        }, {
+          default: v(() => [
+            (c(!0), d(O, null, $(N.value, (r) => (c(), d("button", {
+              key: r.key,
               type: "button",
-              class: p(["nmorph-emoji-picker__category", { "nmorph-emoji-picker__category--active": o.key === e.selectedGroup }]),
+              class: J(["nmorph-emoji-picker__category", { "nmorph-emoji-picker__category--active": r.key === y.value }]),
               role: "tab",
-              "aria-selected": o.key === e.selectedGroup,
-              disabled: e.props.disabled,
-              onClick: (a) => e.selectedGroup = o.key
-            }, t(o.label), 11, I))),
-            128
-            /* KEYED_FRAGMENT */
-          ))
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["aria-label"])) : h("v-if", !0),
-      i(e.NmorphScroll, {
-        class: "nmorph-emoji-picker__body",
-        height: "100%",
-        "max-height": "100%",
-        "scroll-x-prop": "hidden",
-        "scroll-y-prop": "auto",
-        "css-scroll-behavior": "auto",
-        "y-bar-width-in-px": 8
-      }, {
-        default: n(() => [
-          c("div", {
-            ref: "gridRef",
-            class: "nmorph-emoji-picker__body-content",
-            "aria-label": e.bodyLabel,
-            onKeydown: e.gridKeydownHandler
-          }, [
-            e.visibleSections.length ? (l(!0), r(
-              d,
-              { key: 0 },
-              m(e.visibleSections, (o) => (l(), r("section", {
-                key: o.key,
+              "aria-selected": r.key === y.value,
+              disabled: l.disabled,
+              onClick: (t) => y.value = r.key
+            }, w(r.label), 11, Re))), 128))
+          ]),
+          _: 1
+        }, 8, ["aria-label"])) : W("", !0),
+        k(b(Y), {
+          class: "nmorph-emoji-picker__body",
+          height: "100%",
+          "max-height": "100%",
+          "scroll-x-prop": "hidden",
+          "scroll-y-prop": "auto",
+          "css-scroll-behavior": "auto",
+          "y-bar-width-in-px": 8
+        }, {
+          default: v(() => [
+            L("div", {
+              ref_key: "gridRef",
+              ref: Z,
+              class: "nmorph-emoji-picker__body-content",
+              "aria-label": ge.value,
+              onKeydown: Le
+            }, [
+              F.value.length ? (c(!0), d(O, { key: 0 }, $(F.value, (r) => (c(), d("section", {
+                key: r.key,
                 class: "nmorph-emoji-picker__section"
               }, [
-                e.query ? (l(), r(
-                  "div",
-                  S,
-                  t(o.label),
-                  1
-                  /* TEXT */
-                )) : h("v-if", !0),
-                c("div", w, [
-                  (l(!0), r(
-                    d,
-                    null,
-                    m(o.items, (a) => (l(), r("button", {
-                      key: a.key,
-                      type: "button",
-                      class: "nmorph-emoji-picker__emoji",
-                      "aria-label": a.annotation,
-                      title: a.annotation,
-                      disabled: e.props.disabled,
-                      onFocus: (b) => e.activeIndex = e.visibleFlatItems.findIndex((k) => k.key === a.key),
-                      onClick: (b) => e.selectEmoji(a.emoji)
-                    }, [
-                      c(
-                        "span",
-                        q,
-                        t(a.emoji),
-                        1
-                        /* TEXT */
-                      )
-                    ], 40, z))),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))
+                x.value ? (c(), d("div", Pe, w(r.label), 1)) : W("", !0),
+                L("div", Ue, [
+                  (c(!0), d(O, null, $(r.items, (t) => (c(), d("button", {
+                    key: t.key,
+                    type: "button",
+                    class: "nmorph-emoji-picker__emoji",
+                    "aria-label": t.annotation,
+                    title: t.annotation,
+                    disabled: l.disabled,
+                    onFocus: (n) => C.value = R.value.findIndex((a) => a.key === t.key),
+                    onClick: (n) => ae(t.emoji)
+                  }, [
+                    L("span", Je, w(t.emoji), 1)
+                  ], 40, Qe))), 128))
                 ])
-              ]))),
-              128
-              /* KEYED_FRAGMENT */
-            )) : (l(), r("div", V, [
-              i(e.NmorphIcon, null, {
-                default: n(() => [
-                  i(e.NmorphIconSmile)
-                ]),
-                _: 1
-                /* STABLE */
-              }),
-              c(
-                "span",
-                null,
-                t(e.texts.noResults),
-                1
-                /* TEXT */
-              )
-            ]))
-          ], 40, E)
-        ]),
-        _: 1
-        /* STABLE */
-      })
-    ]))
-  ], 14, g);
-}
-const D = /* @__PURE__ */ v(x, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-emoji-picker/NmorphEmojiPicker.vue"]]);
+              ]))), 128)) : (c(), d("div", We, [
+                k(b(X), null, {
+                  default: v(() => [
+                    k(b(Oe))
+                  ]),
+                  _: 1
+                }),
+                L("span", null, w(u.value.noResults), 1)
+              ]))
+            ], 40, He)
+          ]),
+          _: 1
+        })
+      ]))
+    ], 14, $e));
+  }
+});
 export {
-  D as default
+  uo as default
 };

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

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