@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
158 lines (157 loc) • 5.2 kB
JavaScript
import { customEmojiAssetUrl, emojiImageUrlSmall, emojiFileExtensionSmall, emojiImageUrlLarge, emojiFileExtensionLarge, stringToUnicode, codeToEmojiData } from "../../common/emoji.js";
import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, createVNode, vShow, createElementVNode } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
import DtSkeleton from "../skeleton/skeleton.vue.js";
import { ICON_SIZE_MODIFIERS } from "../icon/icon_constants.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtEmoji",
components: {
DtSkeleton
},
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: true
},
/**
* 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: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t)
},
/**
* 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: true
}
},
data() {
return {
emojiData: null,
imgLoading: false
};
},
computed: {
emojiDataValid() {
return !!this.emojiData;
},
emojiSrc() {
var _a;
if (!this.emojiDataValid) {
return "invalid";
}
if ((_a = this.emojiData) == null ? void 0 : _a.custom) {
return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;
}
if (["100", "200"].includes(this.size)) {
return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;
} else {
return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;
}
},
emojiAlt() {
if (!this.emojiDataValid) {
return void 0;
}
return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;
},
emojiLabel() {
if (!this.emojiDataValid) {
return "Invalid Emoji";
}
return this.ariaLabel ? this.ariaLabel : this.emojiData.name;
},
emojiSize() {
return ICON_SIZE_MODIFIERS[this.size];
}
},
watch: {
code: {
handler: function() {
this.getEmojiData();
},
immediate: true
},
emojiSrc: {
handler: async function() {
this.imgLoading = true;
},
immediate: true
}
},
methods: {
getEmojiData() {
this.emojiData = codeToEmojiData(this.code);
},
imageLoaded() {
this.imgLoading = false;
},
imageErrored() {
this.imgLoading = false;
}
}
};
const _hoisted_1 = ["aria-label", "alt", "title", "src"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_skeleton = resolveComponent("dt-skeleton");
return openBlock(), createElementBlock("span", {
class: normalizeClass(["d-emoji d-icon", $options.emojiSize])
}, [
withDirectives(createVNode(_component_dt_skeleton, {
offset: 0,
class: normalizeClass(["d-icon", $options.emojiSize]),
"shape-option": { shape: "circle", size: "100%" }
}, null, 8, ["class"]), [
[vShow, $data.imgLoading && $props.showSkeleton]
]),
withDirectives(createElementVNode("img", {
ref: "emojiImg",
class: normalizeClass(["d-icon", $options.emojiSize, $props.imgClass]),
"aria-label": $options.emojiLabel,
alt: $options.emojiAlt,
title: $options.emojiLabel,
src: $options.emojiSrc,
onLoad: _cache[0] || (_cache[0] = (...args) => $options.imageLoaded && $options.imageLoaded(...args)),
onError: _cache[1] || (_cache[1] = (...args) => $options.imageErrored && $options.imageErrored(...args))
}, null, 42, _hoisted_1), [
[vShow, !$data.imgLoading]
])
], 2);
}
const DtEmoji = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtEmoji as default
};
//# sourceMappingURL=emoji.vue.js.map