@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1,006 lines (1,004 loc) • 32.6 kB
JavaScript
import { ref as S, onMounted as re, createElementBlock as j, openBlock as E, createVNode as B, 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, createCommentVNode as Y, toDisplayString as z, withDirectives as te, vShow as oe, normalizeClass as ce, watchEffect as ae, createTextVNode as fe } from "vue";
import { DtIconSearch as Ie, DtIconClose as je, DtIconClock as Re, DtIconSatisfied as Ae, DtIconLivingThing as $e, DtIconFood as we, DtIconObject as Oe, DtIconTransportation as Ce, DtIconLightbulb as De, DtIconHeart as Fe, DtIconFlag as Be, DtIconTiktok as Ke } from "@dialpad/dialtone-icons/vue3";
import Ne from "../input/input.js";
import de from "../button/button.js";
import { returnFirstEl as Me } from "../../common/utils/index.js";
import Pe from "../tab/tab-group.js";
import Ue from "../tab/tab.js";
import { emojisGrouped as C } 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 = {
__name: "emoji_search",
props: {
searchPlaceholderLabel: {
type: String,
required: !0
},
modelValue: {
type: String,
default: ""
}
},
emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
setup(o, { expose: g, emit: y }) {
const l = y, f = S(null);
function R() {
l("update:modelValue", ""), L();
}
function L() {
f.value.focus();
}
return re(() => {
L();
}), g({
focusSearchInput: L
}), (I, m) => (E(), j("div", He, [
B(k(Ne), {
id: "searchInput",
ref_key: "searchInput",
ref: f,
placeholder: o.searchPlaceholderLabel,
"model-value": o.modelValue,
"onUpdate:modelValue": m[0] || (m[0] = (a) => I.$emit("update:modelValue", a)),
onKeydown: [
m[1] || (m[1] = J((a) => I.$emit("focus-tabset"), ["up"])),
m[2] || (m[2] = J(ue((a) => I.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
m[3] || (m[3] = J((a) => I.$emit("select-first-emoji"), ["enter"]))
]
}, ye({
leftIcon: N(() => [
B(k(Ie), { size: "200" })
]),
_: 2
}, [
o.modelValue.length > 0 ? {
name: "rightIcon",
fn: N(() => [
B(k(de), {
importance: "clear",
size: "xs",
class: "d-emoji-picker__search-x-button",
circle: "",
kind: "muted",
onClick: R
}, {
icon: N(() => [
B(k(je), { size: "200" })
]),
_: 1
})
]),
key: "0"
} : void 0
]), 1032, ["placeholder", "model-value"])
]));
}
}, qe = { class: "d-emoji-picker__tabset" }, We = {
__name: "emoji_tabset",
props: {
/**
* Whether to show the recently used tab or not
* @type {Boolean}
* @default false
*/
showRecentlyUsedTab: {
type: Boolean,
default: !1
},
/**
* Whether to show the custom emojis tab or not
* @type {Boolean}
* @default false
*/
showCustomEmojisTab: {
type: Boolean,
default: !1
},
scrollIntoTab: {
type: Number,
required: !0
},
emojiFilter: {
type: String,
default: ""
},
/**
* The labels for the aria-label
* @type {Array}
* @required
*/
tabSetLabels: {
type: Array,
required: !0
}
},
emits: [
/**
* Emitted when a tab is selected
* @event selected-tabset
* @param {String} tabId - The name of the tab that was selected
*/
"selected-tabset",
"focus-search-input",
"focus-skin-selector"
],
setup(o, { expose: g, emit: y }) {
const l = o, f = y, R = [
{ label: l.tabSetLabels[0], icon: Re },
{ label: l.tabSetLabels[1], icon: Ae },
{ label: l.tabSetLabels[2], icon: $e },
{ label: l.tabSetLabels[3], icon: we },
{ label: l.tabSetLabels[4], icon: Oe },
{ label: l.tabSetLabels[5], icon: Ce },
{ label: l.tabSetLabels[6], icon: De },
{ label: l.tabSetLabels[7], icon: Fe },
{ label: l.tabSetLabels[8], icon: Be },
{ label: l.tabSetLabels[9], icon: Ke }
], L = M(() => {
const t = l.showRecentlyUsedTab ? R : R.slice(1);
return l.showCustomEmojisTab || t.pop(), t.map((e, n) => ({
...e,
// IDs on dt-tab component need to be on string
id: (n + 1).toString(),
panelId: (n + 1).toString()
}));
}), I = M(() => l.emojiFilter.length > 0), m = S("1"), a = S([]);
K(
() => l.scrollIntoTab,
() => {
I.value || (m.value = (l.scrollIntoTab + 1).toString());
}
), K(
I,
() => {
I.value && (m.value = null);
}
);
function d(t) {
const e = parseInt(t);
m.value = t, f("selected-tabset", e);
}
function D(t) {
a.value.push(Me(t.$el));
}
function F() {
a.value[0].focus();
}
function w(t, e) {
t.key === "Enter" && (d(e), a.value[e - 1].blur()), t.key === "Tab" && (t.preventDefault(), t.shiftKey ? f("focus-skin-selector") : f("focus-search-input")), t.key === "ArrowDown" && f("focus-search-input");
}
return g({
focusTabset: F
}), (t, e) => (E(), j("div", qe, [
B(k(Pe), {
selected: m.value,
size: "sm",
"tab-list-class": "d-emoji-picker__tabset-list"
}, {
tabs: N(() => [
(E(!0), j(W, null, G(L.value, (n, v) => (E(), Z(k(Ue), {
id: n.id,
key: n.id,
ref_for: !0,
ref: (c) => {
c && D(c);
},
label: n.label,
"panel-id": n.panelId,
tabindex: v + 1,
"aria-controls": "d-emoji-picker-list",
onKeydown: (c) => w(c, n.id),
onClickCapture: ue((c) => d(n.id), ["stop"])
}, {
default: N(() => [
(E(), Z(Le(n.icon), { size: "400" }))
]),
_: 2
}, 1032, ["id", "label", "panel-id", "tabindex", "onKeydown", "onClickCapture"]))), 128))
]),
_: 1
}, 8, ["selected"])
]));
}
};
function Ge() {
const o = S([]), g = S([]), y = S(!1), l = S(!0);
function f(t, e) {
a(t, e - 1) || (o.value[t - 1] ? a(t - 1, o.value[t - 1].length - 1) : a(o.value.length - 1, o.value[o.value.length - 1].length - 1));
}
function R(t, e) {
a(t, e + 1) || a(t + 1, 0) || a(0, 0);
}
function L(t, e) {
a(0, e - 1) || a(0, g.value.length - 1);
}
function I(t, e) {
a(0, e + 1) || a(0, 0);
}
function m(t, e, n) {
y.value ? t === "left" ? L(e, n) : t === "right" && I(e, n) : t === "left" ? f(e, n) : t === "right" && R(e, n);
}
function a(t, e) {
var v, c, T;
const n = y.value ? (v = g.value) == null ? void 0 : v[e] : (T = (c = o.value) == null ? void 0 : c[t]) == null ? void 0 : T[e];
return n ? (n.focus(), !0) : !1;
}
function d(t, e, n) {
o.value[e] || (o.value[e] = []), o.value[e][n] = t;
}
function D(t, e) {
g.value[e] = t;
}
function F(t, e) {
var n;
if (l.value = !1, t === H.ARROW_UP) {
const v = e % $;
if (!a(0, e - $)) {
const c = g.value.length - g.value.length % $ + v;
a(0, c), a(0, c) || a(0, g.value.length - 1);
}
}
if (t === H.ARROW_DOWN && !a(0, e + $)) {
const v = e % $;
(n = g.value) != null && n[e + ($ - v)] ? a(0, g.value.length - 1) : a(0, v);
}
t === H.ARROW_LEFT && m("left", 0, e), t === H.ARROW_RIGHT && m("right", 0, e);
}
function w(t, e, n) {
var v, c;
if (t === "ArrowUp") {
const T = n % $;
if (e === 0) {
const r = $ - o.value[o.value.length - 1].length % $, i = o.value[o.value.length - 1].length + r - ($ - T);
a(o.value.length - 1, i) || a(o.value.length - 1, o.value[o.value.length - 1].length - 1);
return;
}
if (!a(e, n - $)) {
const r = e - 1 < 0 ? 0 : e - 1, i = o.value[r].length, _ = i - i % $ + T;
a(r, _) || a(e - 1, o.value[e - 1].length - 1);
}
}
if (t === "ArrowDown" && !a(e, n + $)) {
const T = n % $;
(c = (v = o.value) == null ? void 0 : v[e]) != null && c[n + ($ - T)] ? a(e, o.value[e].length - 1) : a(e + 1, T) || a(0, T) || a(0, o.value[0].length - 1);
}
t === "ArrowLeft" && m("left", e, n), t === "ArrowRight" && m("right", e, n);
}
return {
emojiFilteredRefs: g,
isFiltering: y,
hoverFirstEmoji: l,
setEmojiRef: d,
setFilteredRef: D,
focusEmoji: a,
handleArrowNavigationFiltered: F,
handleArrowNavigation: w
};
}
const Ye = { class: "d-emoji-picker__selector" }, Qe = {
key: 0,
class: "d-emoji-picker__search-label d-emoji-picker__alignment"
}, Xe = { key: 0 }, Ze = { class: "d-emoji-picker__tab" }, xe = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], et = ["alt", "aria-label", "title", "src"], tt = {
key: 2,
class: "d-emoji-picker__alignment"
}, ot = {
class: "d-emoji-picker__tab",
"data-qa": "filtered-emojis"
}, lt = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], st = ["alt", "aria-label", "title", "src"], nt = {
__name: "emoji_selector",
props: {
/**
* The filter to apply to the emoji list
* @type {String}
* @default ''
*/
emojiFilter: {
type: String,
default: ""
},
/**
* The skin tone to apply to the emoji list
* @type {String}
* @required
*/
skinTone: {
type: String,
required: !0
},
/**
* The labels for the tabset
* @type {Array}
* @required
*/
tabsetLabels: {
type: Array,
required: !0
},
selectedTabset: {
type: Object,
required: !0
},
/**
* The label for the search results tab
* @type {String}
* @required
*/
searchResultsLabel: {
type: String,
required: !0
},
searchNoResultsLabel: {
type: String,
required: !0
},
/**
* The list of recently used emojis
* @type {Array}
*/
recentlyUsedEmojis: {
type: Array,
default: () => []
},
/**
* The list of custom emojis
* @type {Array}
*/
customEmojis: {
type: Array,
default: () => []
}
},
emits: [
/**
* Emitted when the user hover over an emoji
* @event highlighted-emoji
* @param {Object} emoji - The emoji data that was hovered
*/
"highlighted-emoji",
/**
* Emitted when the user select an emoji
* @event selected-emoji
* @param {Object} emoji - The emoji data that was selected
*/
"selected-emoji",
/**
* Emitted when the user scroll into an emoji tab
* @event scroll-into-tab
* @param {Number} tab-index - The tab that was scrolled into
*/
"scroll-into-tab",
/**
* Emitted when the user reach bottom scroll
* This event is used on handleScroll method
* @event scroll-bottom-reached
*/
"scroll-bottom-reached",
/**
* Emitted when the user reach the end of the emoji list
* @event focus-skin-selector
*/
"focus-skin-selector",
/**
* Emitted when the user shift tab in first tab of emoji selector
* @event focus-search-input
*/
"focus-search-input"
],
setup(o, { expose: g, emit: y }) {
const l = o, f = y, {
emojiFilteredRefs: R,
isFiltering: L,
hoverFirstEmoji: I,
setEmojiRef: m,
setFilteredRef: a,
focusEmoji: d,
handleArrowNavigationFiltered: D,
handleArrowNavigation: F
} = Ge(), w = S(null), t = 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(() => {
const s = l.recentlyUsedEmojis.length ? n.slice() : n.slice(1);
return l.customEmojis && !l.customEmojis.length && s.pop(), s;
}), r = S([]), i = M(() => [
...C[`People${l.skinTone}`],
...C.Nature,
...C.Food,
...C[`Activity${l.skinTone}`],
...C.Travel,
...C[`Objects${l.skinTone}`],
...C.Symbols,
...C.Flags
]), _ = me(() => {
R.value = [], se();
}), le = () => {
const s = t.value;
s.scrollTop + s.clientHeight >= s.scrollHeight && f("scroll-bottom-reached");
};
K(i, () => {
se();
}, { immediate: !0 }), K(
() => l.recentlyUsedEmojis,
() => {
C["Recently used"] = l.recentlyUsedEmojis;
},
{ immediate: !0 }
), K(
() => l.customEmojis,
() => {
C.Custom = l.customEmojis;
},
{ immediate: !0 }
), K(() => l.emojiFilter, () => {
he(), l.emojiFilter ? L.value = !0 : (L.value = !1, P(null)), _();
}), K(
() => l.selectedTabset,
(s) => {
q(s.tabId);
},
{ deep: !0 }
);
function ee(s, u = !1) {
I.value = u, f("highlighted-emoji", s);
}
function se() {
const s = l.emojiFilter.toLowerCase();
r.value = i.value.filter((u) => {
const h = u.name.toLowerCase().includes(s), p = u.keywords.some((b) => b.toLowerCase().includes(s));
return h || p;
}), x(() => {
s && ee(r.value[0], !0);
});
}
function me(s, u = 300) {
let h;
return (...p) => {
clearTimeout(h), h = setTimeout(() => s(...p), u);
};
}
function ve(s) {
return s.date_added ? s.image : Q + s.unicode_character + ".png";
}
function be(s) {
s.target.parentNode.style.display = "none";
}
function q(s, u = !0) {
const p = v.value[s - 1].ref.value[0];
x(() => {
const b = t.value, U = s === 1 ? 0 : p.offsetTop - 15;
b.scrollTop = U, u && d(s - 1, 0);
});
}
function he() {
const s = t.value;
s.scrollTop = 0;
}
function pe() {
t.value.addEventListener("scroll", le);
}
function _e() {
e.value = new IntersectionObserver(async (s) => {
s.forEach((u) => {
var b, U, O, ne, ie;
const { target: h } = u, p = parseInt(h.dataset.index);
u.isIntersecting && h.offsetTop <= w.value.offsetTop + 50 ? (c.value = ((b = v.value[p - 1]) == null ? void 0 : b.label) ?? ((U = v.value[0]) == null ? void 0 : U.label), f("scroll-into-tab", p - 1)) : u.boundingClientRect.bottom <= ((O = w.value) == null ? void 0 : O.getBoundingClientRect().bottom) ? (f("scroll-into-tab", p), c.value = (ne = v.value[p]) == null ? void 0 : ne.label) : p === 1 && (f("scroll-into-tab", p), c.value = (ie = v.value[0]) == null ? void 0 : ie.label);
});
}), e.value.observe(w.value), Array.from(t.value.children).forEach((s, u) => {
e.value.observe(s), s.dataset.index = u;
});
}
const Ee = (s, u, h) => {
if (s.preventDefault(), Object.values(H).includes(s.key)) {
D(s.key, u);
return;
}
switch (s.key) {
case "Tab":
f("focus-skin-selector");
break;
case "Enter":
X(h, s);
break;
}
}, ke = (s, u, h, p) => {
if (s.preventDefault(), Object.values(H).includes(s.key)) {
F(s.key, u, h);
return;
}
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");
break;
case "Enter":
X(p, s);
break;
}
};
function X(s, u) {
f("selected-emoji", { ...s, shift_key: u.shiftKey });
}
function P(s) {
f("highlighted-emoji", s);
}
function Se() {
d(0, 0);
}
function ge() {
q(T.value.length, !0);
}
return re(() => {
_e(), pe();
}), Te(() => {
e.value.disconnect(), t.value.removeEventListener("scroll", le);
}), g({
focusEmojiSelector: Se,
focusLastEmoji: ge
}), (s, u) => (E(), j("div", Ye, [
A("div", {
id: "d-emoji-picker-list",
ref_key: "listRef",
ref: t,
class: "d-emoji-picker__list"
}, [
o.emojiFilter ? (E(), j("p", Qe, z(r.value.length > 0 ? o.searchResultsLabel : o.searchNoResultsLabel), 1)) : (E(), j("div", {
key: 1,
ref_key: "tabCategoryRef",
ref: w,
class: "d-emoji-picker__category d-emoji-picker__alignment"
}, [
A("p", null, z(c.value), 1)
], 512)),
(E(!0), j(W, null, G(v.value, (h, p) => te((E(), j("div", {
key: p,
ref_for: !0,
ref: h.ref,
class: "d-emoji-picker__alignment"
}, [
p ? (E(), j("p", Xe, z(h.label), 1)) : Y("", !0),
A("div", Ze, [
(E(!0), j(W, null, G(k(C)[T.value[p] + o.skinTone] ? k(C)[T.value[p] + o.skinTone] : k(C)[T.value[p]], (b, U) => (E(), j("button", {
key: b.shortname,
ref_for: !0,
ref: (O) => {
O && k(m)(O, p, U);
},
type: "button",
"aria-label": b.name,
onClick: (O) => X(b, O),
onFocusin: (O) => P(b),
onFocusout: u[0] || (u[0] = (O) => P(null)),
onMouseover: (O) => P(b),
onMouseleave: u[1] || (u[1] = (O) => P(null)),
onKeydown: (O) => ke(O, p, U, b)
}, [
A("img", {
class: "d-icon d-icon--size-500",
alt: b.name,
"aria-label": b.name,
title: b.name,
src: ve(b),
onError: be
}, null, 40, et)
], 40, xe))), 128))
])
])), [
[oe, !o.emojiFilter]
])), 128)),
o.emojiFilter ? (E(), j("div", tt, [
A("div", ot, [
(E(!0), j(W, null, G(r.value, (h, p) => (E(), j("button", {
key: h.shortname,
ref_for: !0,
ref: (b) => {
b && k(a)(b, p);
},
type: "button",
"aria-label": h.name,
class: ce({
"hover-emoji": p === 0 && k(I)
}),
onClick: (b) => X(h, b),
onFocusin: (b) => P(h),
onFocusout: u[2] || (u[2] = (b) => P(null)),
onMouseover: (b) => ee(h),
onMouseleave: u[3] || (u[3] = (b) => ee(null)),
onKeydown: (b) => Ee(b, p, h)
}, [
A("img", {
class: "d-icon d-icon--size-500",
alt: h.name,
"aria-label": h.name,
title: h.name,
src: `${k(Q) + h.unicode_character}.png`
}, null, 8, st)
], 42, lt))), 128))
])
])) : Y("", !0)
], 512)
]));
}
}, it = { "data-qa": "skin-selector" }, at = { class: "d-emoji-picker__skin-list" }, rt = ["onKeydown", "onClick"], ut = ["alt", "aria-label", "title", "src"], ct = { class: "d-emoji-picker__skin-selected" }, ft = ["aria-label"], dt = ["alt", "aria-label", "title", "src"], mt = {
__name: "emoji_skin_selector",
props: {
/**
* The skin tone to apply to the emoji list
* @type {String}
* @required
*/
skinTone: {
type: String,
required: !0
},
isHovering: {
type: Boolean,
default: !1
},
skinSelectorButtonTooltipLabel: {
type: String,
required: !0
}
},
emits: [
/**
* The skin tone that was selected
* @event skin-tone
* @type {Number}
*/
"skin-tone",
"focus-tabset",
"focus-last-emoji"
],
setup(o, { expose: g, emit: y }) {
const l = o, f = y, R = [
{
name: ":wave_tone1:",
unicode_output: "1f44b-1f3fb",
skinTone: V.LIGHT,
skinCode: "_tone1"
},
{
name: ":wave_tone2:",
unicode_output: "1f44b-1f3fc",
skinTone: V.MEDIUM_LIGHT,
skinCode: "_tone2"
},
{
name: ":wave_tone3:",
unicode_output: "1f44b-1f3fd",
skinTone: V.MEDIUM,
skinCode: "_tone3"
},
{
name: ":wave_tone4:",
unicode_output: "1f44b-1f3fe",
skinTone: V.MEDIUM_DARK,
skinCode: "_tone4"
},
{
name: ":wave_tone5:",
unicode_output: "1f44b-1f3ff",
skinTone: V.DARK,
skinCode: "_tone5"
},
{
name: ":wave:",
unicode_output: "1f44b",
skinTone: V.DEFAULT,
skinCode: ""
}
], L = S(!1), I = S(null), m = S([]);
ae(
() => l.isHovering && (L.value = !1)
);
const a = M(() => R.find((n) => n.skinTone === l.skinTone)), d = S(a.value);
ae(() => a.value && (d.value = a.value));
function D(n) {
m.value.push(n);
}
function F() {
I.value.focus();
}
function w(n) {
d.value = n, L.value = !1, f("skin-tone", n.skinTone), x(() => F());
}
const t = (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"));
};
function e() {
L.value = !L.value, x(() => m.value[0].focus());
}
return g({
focusSkinSelector: F
}), (n, v) => (E(), j("div", it, [
te(A("div", at, [
(E(), j(W, null, G(R, (c, T) => A("button", {
ref_for: !0,
ref: (r) => {
r && D(r);
},
key: c.name,
class: ce({
selected: d.value.skinCode === c.skinCode
}),
onKeydown: (r) => t(r, c, T),
onClick: (r) => w(c)
}, [
A("img", {
class: "d-icon d-icon--size-500",
alt: c.name,
"aria-label": c.name,
title: c.name,
src: `${k(Q) + c.unicode_output}.png`
}, null, 8, ut)
], 42, rt)), 64))
], 512), [
[oe, L.value]
]),
te(A("div", ct, [
B(k(Je), { placement: "top-end" }, {
anchor: N(() => [
A("button", {
ref_key: "skinSelectorRef",
ref: I,
"aria-label": o.skinSelectorButtonTooltipLabel,
tabindex: "-1",
onClick: e,
onKeydown: v[0] || (v[0] = (c) => t(c))
}, [
A("img", {
class: "d-icon d-icon--size-500",
alt: d.value.name,
"aria-label": d.value.name,
title: d.value.name,
src: `${k(Q) + d.value.unicode_output}.png`
}, null, 8, dt)
], 40, ft)
]),
default: N(() => [
fe(z(o.skinSelectorButtonTooltipLabel) + " ", 1)
]),
_: 1
})
], 512), [
[oe, !L.value]
])
]));
}
}, vt = { class: "d-emoji-picker__data" }, bt = ["alt", "aria-label", "title", "src"], ht = {
__name: "emoji_description",
props: {
/**
* Emoji data
* @type {Object}
* @default null
*/
emoji: {
type: Object,
default: null
}
},
setup(o) {
function g(y) {
return y.date_added ? y.image : `${Q + y.unicode_character}.png`;
}
return (y, l) => {
var f;
return E(), j("div", vt, [
o.emoji ? (E(), j("img", {
key: 0,
class: "d-icon d-icon--size-500",
alt: o.emoji.name,
"aria-label": o.emoji.name,
title: o.emoji.name,
src: g(o.emoji)
}, null, 8, bt)) : Y("", !0),
A("div", null, z((f = o.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 = {
__name: "emoji_picker",
props: {
/**
* The array with recently used emoji object
* This list is necessary to fill the recently used tab
* @type {Array}
* @default []
* @example
* <dt-emoji-picker :recentlyUsedEmojis="[emojiObject, emojiObject]" />
*/
// TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object
recentlyUsedEmojis: {
type: Array,
default: () => []
},
/**
* The array with custom emojis object
* This list is necessary to fill the custom tab
* @type {Array}
* @default []
* @example
* <dt-emoji-picker :customEmojis="[emojiObject, emojiObject]" />
*/
customEmojis: {
type: Array
},
/**
* The skin tone to show the emojis
* This prop gives the possibility to use the skin tone selected by the user previously
* @type {String}
* @default 'Default'
* @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'
* @example
* <dt-emoji-picker :skinTone="'Default'" />
*/
skinTone: {
type: String,
default: "Default"
},
/**
* Sets the search query that filters emojis.
* @type {String}
* @example
* <dt-emoji-picker search-query="smile" />
*/
searchQuery: {
type: String,
default: ""
},
/**
* Shows the search input
* @type {Boolean}
* @example
* <dt-emoji-picker :show-search="false" />
*/
showSearch: {
type: Boolean,
default: !0
}
},
emits: [
/**
* It will emit the selected emoji
* @event selected-emoji
* @param {Object} emoji - The selected emoji from the emoji selector
*/
"selected-emoji",
/**
* Emitted when the user reach bottom scroll
* This is being handled by handleScroll method
* @event scroll-bottom-reached
*/
"scroll-bottom-reached",
/**
* It will emit the selected skin tone
* @event skin-tone
* @param {String} skin - The selected skin tone from the skin selector
*/
"skin-tone",
/**
* Since the keyboard events are encapsulated, we emit this event to close the picker
* @event close
*/
"close",
/**
* Emitted when the user clicks on the add emoji button
* @event add-emoji
*/
"add-emoji"
],
setup(o, { emit: g }) {
const y = o, l = g, f = S(y.searchQuery.value), R = S(null), L = S({}), I = S(0), m = M(() => {
var r;
return ((r = y.recentlyUsedEmojis) == null ? void 0 : r.length) > 0;
}), a = M(() => {
var r;
return ((r = y.customEmojis) == null ? void 0 : r.length) > 0;
}), d = new Ve(), D = [
d.$t("DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL"),
d.$t("DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL"),
d.$t("DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL"),
d.$t("DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL"),
d.$t("DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL"),
d.$t("DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL"),
d.$t("DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL"),
d.$t("DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL"),
d.$t("DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL"),
d.$t("DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL")
], F = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL"), w = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL"), t = d.$t("DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL"), e = d.$t("DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL"), n = d.$t("DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL");
K(
() => y.searchQuery,
(r) => {
f.value = r;
}
);
function v(r) {
f.value = "", L.value = { ...L.value, tabId: r };
}
function c(r) {
I.value = r;
}
function T(r) {
R.value = r;
}
return (r, i) => (E(), j("div", pt, [
A("div", _t, [
B(We, {
ref: "tabsetRef",
"emoji-filter": f.value,
"show-custom-emojis-tab": a.value,
"show-recently-used-tab": m.value,
"scroll-into-tab": I.value,
"tab-set-labels": D,
onFocusSkinSelector: i[0] || (i[0] = (_) => r.$refs.skinSelectorRef.focusSkinSelector()),
onFocusSearchInput: i[1] || (i[1] = (_) => o.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.emojiSelectorRef.focusEmojiSelector()),
onSelectedTabset: v,
onKeydown: i[2] || (i[2] = J((_) => l("close"), ["esc"]))
}, null, 8, ["emoji-filter", "show-custom-emojis-tab", "show-recently-used-tab", "scroll-into-tab"])
]),
A("div", Et, [
o.showSearch ? (E(), Z(ze, {
key: 0,
ref: "searchInputRef",
modelValue: f.value,
"onUpdate:modelValue": i[3] || (i[3] = (_) => f.value = _),
"search-placeholder-label": k(F),
onSelectFirstEmoji: i[4] || (i[4] = (_) => l("selected-emoji", R.value)),
onFocusTabset: i[5] || (i[5] = (_) => r.$refs.tabsetRef.focusTabset()),
onFocusEmojiSelector: i[6] || (i[6] = (_) => r.$refs.emojiSelectorRef.focusEmojiSelector()),
onKeydown: i[7] || (i[7] = J((_) => l("close"), ["esc"]))
}, null, 8, ["modelValue", "search-placeholder-label"])) : Y("", !0),
B(nt, {
ref: "emojiSelectorRef",
"emoji-filter": f.value,
"skin-tone": o.skinTone,
"tabset-labels": D,
"search-results-label": k(w),
"search-no-results-label": k(t),
"recently-used-emojis": o.recentlyUsedEmojis,
"custom-emojis": o.customEmojis,
"selected-tabset": L.value,
onScrollIntoTab: c,
onHighlightedEmoji: T,
onSelectedEmoji: i[8] || (i[8] = (_) => l("selected-emoji", _)),
onFocusSkinSelector: i[9] || (i[9] = (_) => r.$refs.skinSelectorRef.focusSkinSelector()),
onFocusSearchInput: i[10] || (i[10] = (_) => o.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.tabsetRef.focusTabset()),
onKeydown: i[11] || (i[11] = J((_) => l("close"), ["esc"])),
onScrollBottomReached: i[12] || (i[12] = (_) => l("scroll-bottom-reached"))
}, null, 8, ["emoji-filter", "skin-tone", "search-results-label", "search-no-results-label", "recently-used-emojis", "custom-emojis", "selected-tabset"])
]),
A("div", kt, [
a.value && !R.value ? (E(), Z(k(de), {
key: 0,
importance: "outlined",
"aria-label": k(n),
class: "d-emoji-picker__add-emoji",
onClick: i[13] || (i[13] = (_) => l("add-emoji"))
}, {
default: N(() => [
fe(z(k(n)), 1)
]),
_: 1
}, 8, ["aria-label"])) : Y("", !0),
B(ht, { emoji: R.value }, null, 8, ["emoji"]),
B(mt, {
ref: "skinSelectorRef",
"is-hovering": !!R.value,
"skin-selector-button-tooltip-label": k(e),
"skin-tone": o.skinTone,
onSkinTone: i[14] || (i[14] = (_) => l("skin-tone", _)),
onFocusTabset: i[15] || (i[15] = (_) => r.$refs.tabsetRef.focusTabset()),
onFocusLastEmoji: i[16] || (i[16] = (_) => r.$refs.emojiSelectorRef.focusLastEmoji()),
onKeydown: i[17] || (i[17] = J((_) => l("close"), ["esc"]))
}, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
])
]));
}
};
export {
Ot as default
};
//# sourceMappingURL=emoji-picker.js.map