@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
120 lines (119 loc) • 2.94 kB
JavaScript
import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { codeToEmojiData as t, emojiFileExtensionLarge as n, emojiFileExtensionSmall as r, emojiImageUrlLarge as i, emojiImageUrlSmall as a, stringToUnicode as o } from "../../common/emoji/index.js";
import { ICON_SIZE_MODIFIERS as s } from "../icon/icon-constants.js";
import c from "../skeleton/skeleton.js";
import { createElementBlock as l, createElementVNode as u, createVNode as d, normalizeClass as f, openBlock as p, resolveComponent as m, vShow as h, withDirectives as g } from "vue";
//#region components/emoji/emoji.vue
var _ = {
compatConfig: { MODE: 3 },
name: "DtEmoji",
components: { DtSkeleton: c },
props: {
code: {
type: String,
required: !0
},
size: {
type: String,
default: "500",
validator: (e) => Object.keys(s).includes(e)
},
imgClass: {
type: [
String,
Object,
Array
],
default: ""
},
ariaLabel: {
type: String,
default: null
},
showSkeleton: {
type: Boolean,
default: !0
}
},
data() {
return {
emojiData: null,
imgLoading: !1
};
},
computed: {
emojiDataValid() {
return !!this.emojiData;
},
emojiSrc() {
return this.emojiDataValid ? this.emojiData?.custom ? this.emojiData.image : ["100", "200"].includes(this.size) ? a + this.emojiData.key + r : i + this.emojiData.key + n : "invalid";
},
emojiAlt() {
if (this.emojiDataValid) return this.emojiData.unicode_output ? o(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 = t(this.code);
},
imageLoaded() {
this.imgLoading = !1;
},
imageErrored() {
this.imgLoading = !1;
}
}
}, v = [
"aria-label",
"alt",
"title",
"src"
];
function y(e, t, n, r, i, a) {
let o = m("dt-skeleton");
return p(), l("span", { class: f(["d-emoji d-icon", a.emojiSize]) }, [g(d(o, {
offset: 0,
class: f(["d-icon", a.emojiSize]),
"shape-option": {
shape: "circle",
size: "100%"
}
}, null, 8, ["class"]), [[h, i.imgLoading && n.showSkeleton]]), g(u("img", {
ref: "emojiImg",
class: f([
"d-icon",
a.emojiSize,
n.imgClass
]),
"aria-label": a.emojiLabel,
alt: a.emojiAlt,
title: a.emojiLabel,
src: a.emojiSrc,
onLoad: t[0] || (t[0] = (...e) => a.imageLoaded && a.imageLoaded(...e)),
onError: t[1] || (t[1] = (...e) => a.imageErrored && a.imageErrored(...e))
}, null, 42, v), [[h, !i.imgLoading]])], 2);
}
var b = /* @__PURE__ */ e(_, [["render", y]]);
//#endregion
export { b as default };
//# sourceMappingURL=emoji.js.map