@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
139 lines (138 loc) • 4.71 kB
JavaScript
import { customEmojiAssetUrl, emojiImageUrlSmall, emojiFileExtensionSmall, emojiImageUrlLarge, emojiFileExtensionLarge, stringToUnicode, codeToEmojiData } from "../../common/emoji.js";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
import DtSkeleton from "../skeleton/skeleton.vue.js";
import { ICON_SIZE_MODIFIERS } from "../icon/icon_constants.js";
const _sfc_main = {
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;
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("span", { class: ["d-emoji d-icon", _vm.emojiSize] }, [_c("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: _vm.imgLoading && _vm.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", _vm.emojiSize], attrs: { "offset": 0, "shape-option": { shape: "circle", size: "100%" } } }), _c("img", { directives: [{ name: "show", rawName: "v-show", value: !_vm.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", _vm.emojiSize, _vm.imgClass], attrs: { "aria-label": _vm.emojiLabel, "alt": _vm.emojiAlt, "title": _vm.emojiLabel, "src": _vm.emojiSrc }, on: { "load": _vm.imageLoaded, "error": _vm.imageErrored } })], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtEmoji = __component__.exports;
export {
DtEmoji as default
};
//# sourceMappingURL=emoji.vue.js.map