@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
122 lines (121 loc) • 4.17 kB
JavaScript
import { codeToEmojiData as o, stringToUnicode as r, customEmojiAssetUrl as m, emojiImageUrlSmall as s, emojiFileExtensionSmall as n, emojiImageUrlLarge as l, emojiFileExtensionLarge as d } from "../../common/emoji/index.js";
import { n as c } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import j from "../skeleton/skeleton.js";
import { ICON_SIZE_MODIFIERS as a } from "../icon/icon-constants.js";
const u = {
name: "DtEmoji",
components: {
DtSkeleton: j
},
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(a).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 ? m + this.emojiData.key + this.emojiData.extension : ["100", "200"].includes(this.size) ? s + this.emojiData.key + n : l + this.emojiData.key + d : "invalid";
},
emojiAlt() {
if (this.emojiDataValid)
return this.emojiData.unicode_output ? r(this.emojiData.unicode_output) : this.emojiData.name;
},
emojiLabel() {
return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
},
emojiSize() {
return a[this.size];
}
},
watch: {
code: {
handler: function() {
this.getEmojiData();
},
immediate: !0
},
emojiSrc: {
handler: async function() {
this.imgLoading = !0;
},
immediate: !0
}
},
methods: {
getEmojiData() {
this.emojiData = o(this.code);
},
imageLoaded() {
this.imgLoading = !1;
},
imageErrored() {
this.imgLoading = !1;
}
}
};
var h = function() {
var e = this, t = e._self._c;
return t("span", { class: ["d-emoji d-icon", e.emojiSize] }, [t("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: e.imgLoading && e.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", e.emojiSize], attrs: { offset: 0, "shape-option": { shape: "circle", size: "100%" } } }), t("img", { directives: [{ name: "show", rawName: "v-show", value: !e.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", e.emojiSize, e.imgClass], attrs: { "aria-label": e.emojiLabel, alt: e.emojiAlt, title: e.emojiLabel, src: e.emojiSrc }, on: { load: e.imageLoaded, error: e.imageErrored } })], 1);
}, g = [], f = /* @__PURE__ */ c(
u,
h,
g
);
const _ = f.exports;
export {
_ as default
};
//# sourceMappingURL=emoji.js.map