@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
142 lines (141 loc) • 4.48 kB
JavaScript
import { codeToEmojiData as c, stringToUnicode as j, customEmojiAssetUrl as u, emojiImageUrlSmall as g, emojiFileExtensionSmall as h, emojiImageUrlLarge as f, emojiFileExtensionLarge as D } from "../../common/emoji/index.js";
import { resolveComponent as S, createElementBlock as E, openBlock as L, normalizeClass as o, withDirectives as n, createVNode as p, vShow as l, createElementVNode as _ } from "vue";
import { _ as k } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import y from "../skeleton/skeleton.js";
import { ICON_SIZE_MODIFIERS as s } from "../icon/icon-constants.js";
const b = {
compatConfig: { MODE: 3 },
name: "DtEmoji",
components: {
DtSkeleton: y
},
props: {
/**
* Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
* <a class="d-link" href="https://emojipedia.org/joypixels/" target="_blank">JoyPixels</a>
* for all supported shortcode/unicode or the docs for setting up custom emojis.
*/
code: {
type: String,
required: !0
},
/**
* The size of the emoji. Can be any of the icon size utility classes from
* <a class="d-link" href="https://dialtone.dialpad.com/components/icon.html" target="_blank"> Dialpad Icon Size</a>
* @values 100, 200, 300, 400, 500, 600, 700, 800
*/
size: {
type: String,
default: "500",
validator: (i) => Object.keys(s).includes(i)
},
/**
* Additional class name for the emoji img element.
* Can accept String, Object, and Array, i.e. has the
* same API as Vue's built-in handling of the class attribute.
*/
imgClass: {
type: [String, Object, Array],
default: ""
},
/**
* Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n
* Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will
* be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the
* getEmojiData() function
*/
ariaLabel: {
type: String,
default: null
},
/**
* Shows a skeleton loader while the emoji asset is loading.
* @values true, false
*/
showSkeleton: {
type: Boolean,
default: !0
}
},
data() {
return {
emojiData: null,
imgLoading: !1
};
},
computed: {
emojiDataValid() {
return !!this.emojiData;
},
emojiSrc() {
var i;
return this.emojiDataValid ? (i = this.emojiData) != null && i.custom ? u + this.emojiData.key + this.emojiData.extension : ["100", "200"].includes(this.size) ? g + this.emojiData.key + h : f + this.emojiData.key + D : "invalid";
},
emojiAlt() {
if (this.emojiDataValid)
return this.emojiData.unicode_output ? j(this.emojiData.unicode_output) : this.emojiData.name;
},
emojiLabel() {
return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
},
emojiSize() {
return s[this.size];
}
},
watch: {
code: {
handler: function() {
this.getEmojiData();
},
immediate: !0
},
emojiSrc: {
handler: async function() {
this.imgLoading = !0;
},
immediate: !0
}
},
methods: {
getEmojiData() {
this.emojiData = c(this.code);
},
imageLoaded() {
this.imgLoading = !1;
},
imageErrored() {
this.imgLoading = !1;
}
}
}, z = ["aria-label", "alt", "title", "src"];
function I(i, t, r, v, m, e) {
const d = S("dt-skeleton");
return L(), E("span", {
class: o(["d-emoji d-icon", e.emojiSize])
}, [
n(p(d, {
offset: 0,
class: o(["d-icon", e.emojiSize]),
"shape-option": { shape: "circle", size: "100%" }
}, null, 8, ["class"]), [
[l, m.imgLoading && r.showSkeleton]
]),
n(_("img", {
ref: "emojiImg",
class: o(["d-icon", e.emojiSize, r.imgClass]),
"aria-label": e.emojiLabel,
alt: e.emojiAlt,
title: e.emojiLabel,
src: e.emojiSrc,
onLoad: t[0] || (t[0] = (...a) => e.imageLoaded && e.imageLoaded(...a)),
onError: t[1] || (t[1] = (...a) => e.imageErrored && e.imageErrored(...a))
}, null, 42, z), [
[l, !m.imgLoading]
])
], 2);
}
const A = /* @__PURE__ */ k(b, [["render", I]]);
export {
A as default
};
//# sourceMappingURL=emoji.js.map