@dialpad/dialtone-vue 3.218.3 → 3.219.0-next.2

package/dist/lib/emoji-picker/emoji-picker.js

@@ -1,5 +1,5 @@
-import { ref as S, onMounted as re, openBlock as E, createElementBlock as I, createVNode as F, unref as k, withKeys as J, withModifiers as ue, createSlots as ye, withCtx as N, computed as M, watch as K, Fragment as W, renderList as G, createBlock as Z, resolveDynamicComponent as Le, nextTick as x, onBeforeUnmount as Te, createElementVNode as A, toDisplayString as z, withDirectives as te, createCommentVNode as Y, vShow as oe, normalizeClass as ce, watchEffect as ae, createTextVNode as fe } from "vue";
-import { DtIconSearch as je, DtIconClose as Ie, DtIconClock as Re, DtIconSatisfied as Ae, DtIconLivingThing as $e, DtIconFood as we, DtIconObject as Oe, DtIconTransportation as De, DtIconLightbulb as Ce, DtIconHeart as Be, DtIconFlag as Fe, DtIconDialpadStar as Ke } from "@dialpad/dialtone-icons/vue3";
+import { ref as S, onMounted as re, openBlock as E, createElementBlock as I, createVNode as F, unref as k, withKeys as J, withModifiers as ue, createSlots as ye, withCtx as N, computed as M, watch as K, Fragment as W, renderList as G, createBlock as Z, resolveDynamicComponent as Le, nextTick as x, onBeforeUnmount as je, createElementVNode as A, toDisplayString as q, withDirectives as te, createCommentVNode as Y, vShow as oe, normalizeClass as ce, watchEffect as ae, createTextVNode as fe } from "vue";
+import { DtIconSearch as Te, DtIconClose as Ie, DtIconClock as Re, DtIconSatisfied as Ae, DtIconLivingThing as $e, DtIconFood as we, DtIconObject as Oe, DtIconTransportation as De, DtIconLightbulb as Ce, DtIconHeart as Be, DtIconFlag as Fe, DtIconDialpadStar as Ke } from "@dialpad/dialtone-icons/vue";
 import Ne from "../input/input.js";
 import de from "../button/button.js";
 import { returnFirstEl as Me } from "../../common/utils/index.js";
@@ -9,7 +9,7 @@ import { emojisGrouped as D } from "@dialpad/dialtone-emojis";
 import { EMOJIS_PER_ROW as $, ARROW_KEYS as H, CDN_URL as Q, EMOJI_PICKER_SKIN_TONE_MODIFIERS as V } from "./emoji-picker-constants.js";
 import Je from "../tooltip/tooltip.js";
 import { DialtoneLocalization as Ve } from "../../localization/index.js";
-const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
+const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, qe = {
   __name: "emoji_search",
   props: {
     searchPlaceholderLabel: {
@@ -34,31 +34,31 @@ const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
       L();
     }), g({
       focusSearchInput: L
-    }), (j, m) => (E(), I("div", He, [
+    }), (T, m) => (E(), I("div", He, [
       F(k(Ne), {
         id: "searchInput",
         ref_key: "searchInput",
         ref: f,
         placeholder: t.searchPlaceholderLabel,
         "model-value": t.modelValue,
-        "onUpdate:modelValue": m[0] || (m[0] = (a) => j.$emit("update:modelValue", a)),
+        "onUpdate:modelValue": m[0] || (m[0] = (a) => T.$emit("update:modelValue", a)),
         onKeydown: [
-          m[1] || (m[1] = J((a) => j.$emit("focus-tabset"), ["up"])),
-          m[2] || (m[2] = J(ue((a) => j.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
-          m[3] || (m[3] = J((a) => j.$emit("select-first-emoji"), ["enter"]))
+          m[1] || (m[1] = J((a) => T.$emit("focus-tabset"), ["up"])),
+          m[2] || (m[2] = J(ue((a) => T.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
+          m[3] || (m[3] = J((a) => T.$emit("select-first-emoji"), ["enter"]))
         ]
       }, ye({
-        leftIcon: N(() => [
-          F(k(je), { size: "200" })
+        startIcon: N(() => [
+          F(k(Te), { size: "200" })
         ]),
         _: 2
       }, [
         t.modelValue.length > 0 ? {
-          name: "rightIcon",
+          name: "endIcon",
           fn: N(() => [
             F(k(de), {
               importance: "clear",
-              size: "xs",
+              size: 100,
               class: "d-emoji-picker__search-x-button",
               circle: "",
               kind: "muted",
@@ -75,7 +75,7 @@ const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
       ]), 1032, ["placeholder", "model-value"])
     ]));
   }
-}, qe = { class: "d-emoji-picker__tabset" }, We = {
+}, ze = { class: "d-emoji-picker__tabset" }, We = {
   __name: "emoji_tabset",
   props: {
     /**
@@ -144,16 +144,16 @@ const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
         id: (n + 1).toString(),
         panelId: (n + 1).toString()
       }));
-    }), j = M(() => l.emojiFilter.length > 0), m = S("1"), a = S([]);
+    }), T = M(() => l.emojiFilter.length > 0), m = S("1"), a = S([]);
     K(
       () => l.scrollIntoTab,
       () => {
-        j.value || (m.value = (l.scrollIntoTab + 1).toString());
+        T.value || (m.value = (l.scrollIntoTab + 1).toString());
       }
     ), K(
-      j,
+      T,
       () => {
-        j.value && (m.value = null);
+        T.value && (m.value = null);
       }
     );
     function d(o) {
@@ -171,10 +171,11 @@ const He = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ze = {
     }
     return g({
       focusTabset: B
-    }), (o, e) => (E(), I("div", qe, [
+    }), (o, e) => (E(), I("div", ze, [
       F(k(Pe), {
         selected: m.value,
-        size: "sm",
+        size: 200,
+        spread: "equal",
         "tab-list-class": "d-emoji-picker__tabset-list"
       }, {
         tabs: N(() => [
@@ -214,15 +215,15 @@ function Ge() {
   function L(o, e) {
     a(0, e - 1) || a(0, g.value.length - 1);
   }
-  function j(o, e) {
+  function T(o, e) {
     a(0, e + 1) || a(0, 0);
   }
   function m(o, e, n) {
-    y.value ? o === "left" ? L(e, n) : o === "right" && j(e, n) : o === "left" ? f(e, n) : o === "right" && R(e, n);
+    y.value ? o === "left" ? L(e, n) : o === "right" && T(e, n) : o === "left" ? f(e, n) : o === "right" && R(e, n);
   }
   function a(o, e) {
-    var v, c, T;
-    const n = y.value ? (v = g.value) == null ? void 0 : v[e] : (T = (c = t.value) == null ? void 0 : c[o]) == null ? void 0 : T[e];
+    var v, c, j;
+    const n = y.value ? (v = g.value) == null ? void 0 : v[e] : (j = (c = t.value) == null ? void 0 : c[o]) == null ? void 0 : j[e];
     return n ? (n.focus(), !0) : !1;
   }
   function d(o, e, n) {
@@ -249,20 +250,20 @@ function Ge() {
   function w(o, e, n) {
     var v, c;
     if (o === "ArrowUp") {
-      const T = n % $;
+      const j = n % $;
       if (e === 0) {
-        const r = $ - t.value[t.value.length - 1].length % $, i = t.value[t.value.length - 1].length + r - ($ - T);
+        const r = $ - t.value[t.value.length - 1].length % $, i = t.value[t.value.length - 1].length + r - ($ - j);
         a(t.value.length - 1, i) || a(t.value.length - 1, t.value[t.value.length - 1].length - 1);
         return;
       }
       if (!a(e, n - $)) {
-        const r = e - 1 < 0 ? 0 : e - 1, i = t.value[r].length, _ = i - i % $ + T;
+        const r = e - 1 < 0 ? 0 : e - 1, i = t.value[r].length, _ = i - i % $ + j;
         a(r, _) || a(e - 1, t.value[e - 1].length - 1);
       }
     }
     if (o === "ArrowDown" && !a(e, n + $)) {
-      const T = n % $;
-      (c = (v = t.value) == null ? void 0 : v[e]) != null && c[n + ($ - T)] ? a(e, t.value[e].length - 1) : a(e + 1, T) || a(0, T) || a(0, t.value[0].length - 1);
+      const j = n % $;
+      (c = (v = t.value) == null ? void 0 : v[e]) != null && c[n + ($ - j)] ? a(e, t.value[e].length - 1) : a(e + 1, j) || a(0, j) || a(0, t.value[0].length - 1);
     }
     o === "ArrowLeft" && m("left", e, n), o === "ArrowRight" && m("right", e, n);
   }
@@ -390,7 +391,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     const l = t, f = y, {
       emojiFilteredRefs: R,
       isFiltering: L,
-      hoverFirstEmoji: j,
+      hoverFirstEmoji: T,
       setEmojiRef: m,
       setFilteredRef: a,
       focusEmoji: d,
@@ -399,7 +400,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     } = Ge(), w = S(null), o = S(null), e = S(null), n = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags", "Custom"], v = M(() => {
       let s = l.tabsetLabels.map((u) => ({ label: u, ref: S(null) }));
       return l.recentlyUsedEmojis && !l.recentlyUsedEmojis.length && (s = l.tabsetLabels.slice(1).map((u) => ({ label: u, ref: S(null) }))), l.customEmojis && !l.customEmojis.length && s.pop(), s;
-    }), c = S(v.value[0].label), T = M(() => {
+    }), c = S(v.value[0].label), j = M(() => {
       const s = l.recentlyUsedEmojis.length ? n.slice() : n.slice(1);
       return l.customEmojis && !l.customEmojis.length && s.pop(), s;
     }), r = S([]), i = M(() => [
@@ -436,12 +437,12 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     }), K(
       () => l.selectedTabset,
       (s) => {
-        q(s.tabId);
+        z(s.tabId);
       },
       { deep: !0 }
     );
     function ee(s, u = !1) {
-      j.value = u, f("highlighted-emoji", s);
+      T.value = u, f("highlighted-emoji", s);
     }
     function se() {
       const s = l.emojiFilter.toLowerCase();
@@ -464,7 +465,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     function be(s) {
       s.target.parentNode.style.display = "none";
     }
-    function q(s, u = !0) {
+    function z(s, u = !0) {
       const p = v.value[s - 1].ref.value[0];
       x(() => {
         const b = o.value, U = s === 1 ? 0 : p.offsetTop - 15;
@@ -509,7 +510,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       }
       switch (s.key) {
         case "Tab":
-          s.shiftKey ? d(u, 0) && u > 0 ? q(u, !0) : (q(1, !1), f("focus-search-input")) : d(u + 1, 0) ? q(u + 1 + 1, !1) : f("focus-skin-selector");
+          s.shiftKey ? d(u, 0) && u > 0 ? z(u, !0) : (z(1, !1), f("focus-search-input")) : d(u + 1, 0) ? z(u + 1 + 1, !1) : f("focus-skin-selector");
           break;
         case "Enter":
           X(p, s);
@@ -526,11 +527,11 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       d(0, 0);
     }
     function ge() {
-      q(T.value.length, !0);
+      z(j.value.length, !0);
     }
     return re(() => {
       _e(), pe();
-    }), Te(() => {
+    }), je(() => {
       e.value.disconnect(), o.value.removeEventListener("scroll", le);
     }), g({
       focusEmojiSelector: Se,
@@ -542,13 +543,13 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
         ref: o,
         class: "d-emoji-picker__list"
       }, [
-        t.emojiFilter ? (E(), I("p", Qe, z(r.value.length > 0 ? t.searchResultsLabel : t.searchNoResultsLabel), 1)) : (E(), I("div", {
+        t.emojiFilter ? (E(), I("p", Qe, q(r.value.length > 0 ? t.searchResultsLabel : t.searchNoResultsLabel), 1)) : (E(), I("div", {
           key: 1,
           ref_key: "tabCategoryRef",
           ref: w,
           class: "d-emoji-picker__category d-emoji-picker__alignment"
         }, [
-          A("p", null, z(c.value), 1)
+          A("p", null, q(c.value), 1)
         ], 512)),
         (E(!0), I(W, null, G(v.value, (h, p) => te((E(), I("div", {
           key: p,
@@ -556,9 +557,9 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
           ref: h.ref,
           class: "d-emoji-picker__alignment"
         }, [
-          p ? (E(), I("p", Xe, z(h.label), 1)) : Y("", !0),
+          p ? (E(), I("p", Xe, q(h.label), 1)) : Y("", !0),
           A("div", Ze, [
-            (E(!0), I(W, null, G(k(D)[T.value[p] + t.skinTone] ? k(D)[T.value[p] + t.skinTone] : k(D)[T.value[p]], (b, U) => (E(), I("button", {
+            (E(!0), I(W, null, G(k(D)[j.value[p] + t.skinTone] ? k(D)[j.value[p] + t.skinTone] : k(D)[j.value[p]], (b, U) => (E(), I("button", {
               key: b.shortname,
               ref_for: !0,
               ref: (O) => {
@@ -597,7 +598,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
               type: "button",
               "aria-label": h.name,
               class: ce({
-                "hover-emoji": p === 0 && k(j)
+                "hover-emoji": p === 0 && k(T)
               }),
               onClick: (b) => X(h, b),
               onFocusin: (b) => P(h),
@@ -688,7 +689,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
         skinTone: V.DEFAULT,
         skinCode: ""
       }
-    ], L = S(!1), j = S(null), m = S([]);
+    ], L = S(!1), T = S(null), m = S([]);
     ae(
       () => l.isHovering && (L.value = !1)
     );
@@ -698,14 +699,14 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       m.value.push(n);
     }
     function B() {
-      j.value.focus();
+      T.value.focus();
     }
     function w(n) {
       d.value = n, L.value = !1, f("skin-tone", n.skinTone), x(() => B());
     }
     const o = (n, v, c) => {
-      var T, r, i;
-      n.preventDefault(), n.key === "ArrowLeft" && (c === 0 && ((T = m.value[m.value.length - 1]) == null || T.focus()), (r = m.value[c - 1]) == null || r.focus()), n.key === "ArrowRight" && ((i = m.value[c + 1]) == null || i.focus()), n.key === "Enter" && (v ? w(v) : e()), n.key === "Tab" && (n.shiftKey ? f("focus-last-emoji") : f("focus-tabset"));
+      var j, r, i;
+      n.preventDefault(), n.key === "ArrowLeft" && (c === 0 && ((j = m.value[m.value.length - 1]) == null || j.focus()), (r = m.value[c - 1]) == null || r.focus()), n.key === "ArrowRight" && ((i = m.value[c + 1]) == null || i.focus()), n.key === "Enter" && (v ? w(v) : e()), n.key === "Tab" && (n.shiftKey ? f("focus-last-emoji") : f("focus-tabset"));
     };
     function e() {
       L.value = !L.value, x(() => m.value[0].focus());
@@ -714,7 +715,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       focusSkinSelector: B
     }), (n, v) => (E(), I("div", it, [
       te(A("div", at, [
-        (E(), I(W, null, G(R, (c, T) => A("button", {
+        (E(), I(W, null, G(R, (c, j) => A("button", {
           ref_for: !0,
           ref: (r) => {
             r && C(r);
@@ -723,7 +724,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
           class: ce({
             selected: d.value.skinCode === c.skinCode
           }),
-          onKeydown: (r) => o(r, c, T),
+          onKeydown: (r) => o(r, c, j),
           onClick: (r) => w(c)
         }, [
           A("img", {
@@ -742,7 +743,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
           anchor: N(() => [
             A("button", {
               ref_key: "skinSelectorRef",
-              ref: j,
+              ref: T,
               "aria-label": t.skinSelectorButtonTooltipLabel,
               tabindex: "-1",
               onClick: e,
@@ -758,7 +759,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
             ], 40, ft)
           ]),
           default: N(() => [
-            fe(z(t.skinSelectorButtonTooltipLabel) + " ", 1)
+            fe(q(t.skinSelectorButtonTooltipLabel) + " ", 1)
           ]),
           _: 1
         })
@@ -795,11 +796,13 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
           title: t.emoji.name,
           src: g(t.emoji)
         }, null, 8, bt)) : Y("", !0),
-        A("div", null, z((f = t.emoji) == null ? void 0 : f.name), 1)
+        A("div", null, q((f = t.emoji) == null ? void 0 : f.name), 1)
       ]);
     };
   }
-}, pt = { class: "d-emoji-picker" }, _t = { class: "d-emoji-picker--header" }, Et = { class: "d-emoji-picker--body" }, kt = { class: "d-emoji-picker--footer" }, Ot = {
+}, pt = { class: "d-emoji-picker" }, _t = { class: "d-emoji-picker--header" }, Et = { class: "d-emoji-picker--body" }, kt = { class: "d-emoji-picker--footer" }, Ot = /* @__PURE__ */ Object.assign({
+  name: "DtEmojiPicker"
+}, {
   __name: "emoji_picker",
   props: {
     /**
@@ -902,7 +905,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
     "add-emoji"
   ],
   setup(t, { emit: g }) {
-    const y = t, l = g, f = S(y.searchQuery.value), R = S(null), L = S({}), j = S(0), m = M(() => {
+    const y = t, l = g, f = S(y.searchQuery.value), R = S(null), L = S({}), T = S(0), m = M(() => {
       var r;
       return ((r = y.recentlyUsedEmojis) == null ? void 0 : r.length) > 0;
     }), a = M(() => {
@@ -930,9 +933,9 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       f.value = "", L.value = { ...L.value, tabId: r };
     }
     function c(r) {
-      j.value = r;
+      T.value = r;
     }
-    function T(r) {
+    function j(r) {
       R.value = r;
     }
     return (r, i) => (E(), I("div", pt, [
@@ -942,7 +945,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
           "emoji-filter": f.value,
           "show-custom-emojis-tab": a.value,
           "show-recently-used-tab": m.value,
-          "scroll-into-tab": j.value,
+          "scroll-into-tab": T.value,
           "tab-set-labels": C,
           onFocusSkinSelector: i[0] || (i[0] = (_) => r.$refs.skinSelectorRef.focusSkinSelector()),
           onFocusSearchInput: i[1] || (i[1] = (_) => t.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.emojiSelectorRef.focusEmojiSelector()),
@@ -951,7 +954,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
         }, null, 8, ["emoji-filter", "show-custom-emojis-tab", "show-recently-used-tab", "scroll-into-tab"])
       ]),
       A("div", Et, [
-        t.showSearch ? (E(), Z(ze, {
+        t.showSearch ? (E(), Z(qe, {
           key: 0,
           ref: "searchInputRef",
           modelValue: f.value,
@@ -973,7 +976,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
           "custom-emojis": t.customEmojis,
           "selected-tabset": L.value,
           onScrollIntoTab: c,
-          onHighlightedEmoji: T,
+          onHighlightedEmoji: j,
           onSelectedEmoji: i[8] || (i[8] = (_) => l("selected-emoji", _)),
           onFocusSkinSelector: i[9] || (i[9] = (_) => r.$refs.skinSelectorRef.focusSkinSelector()),
           onFocusSearchInput: i[10] || (i[10] = (_) => t.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.tabsetRef.focusTabset()),
@@ -990,7 +993,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
           onClick: i[13] || (i[13] = (_) => l("add-emoji"))
         }, {
           default: N(() => [
-            fe(z(k(n)), 1)
+            fe(q(k(n)), 1)
           ]),
           _: 1
         }, 8, ["aria-label"])) : Y("", !0),
@@ -1008,7 +1011,7 @@ const Ye = { class: "d-emoji-picker__selector" }, Qe = {
       ])
     ]));
   }
-};
+});
 export {
   Ot as default
 };