@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
177 lines (176 loc) • 6.34 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const tooltip = require("../../tooltip/tooltip.vue.cjs");
const emoji_picker_constants = require("../emoji_picker_constants.cjs");
const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
const _sfc_main = {
name: "EmojiSkinSelector",
components: {
DtTooltip: tooltip.default
},
props: {
skinTone: {
type: String,
required: true
},
isHovering: {
type: Boolean,
default: false
},
skinSelectorButtonTooltipLabel: {
type: String,
required: true
}
},
data() {
return {
isOpen: false,
skinSelected: null,
skinsRef: [],
cdnUrl: emoji_picker_constants.CDN_URL
};
},
computed: {
skinPassedIn() {
return this.skinList.find((skin) => skin.skinTone === this.skinTone);
},
skinList() {
return [
{
name: ":wave_tone1:",
unicode_output: "1f44b-1f3fb",
skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
skinCode: "_tone1"
},
{
name: ":wave_tone2:",
unicode_output: "1f44b-1f3fc",
skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
skinCode: "_tone2"
},
{
name: ":wave_tone3:",
unicode_output: "1f44b-1f3fd",
skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
skinCode: "_tone3"
},
{
name: ":wave_tone4:",
unicode_output: "1f44b-1f3fe",
skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
skinCode: "_tone4"
},
{
name: ":wave_tone5:",
unicode_output: "1f44b-1f3ff",
skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
skinCode: "_tone5"
},
{
name: ":wave:",
unicode_output: "1f44b",
skinTone: emoji_picker_constants.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
skinCode: ""
}
];
}
},
watch: {
isHovering(newVal) {
if (newVal) {
this.isOpen = false;
}
},
skinTone(newVal, oldVal) {
if (newVal !== oldVal) {
this.skinSelected = this.skinPassedIn;
}
}
},
mounted() {
this.skinSelected = this.skinPassedIn;
this.$nextTick(() => {
this.setupSkinRefs();
});
},
methods: {
setupSkinRefs() {
this.skinList.forEach((skin, index) => {
const refKey = `skinRef-${index}`;
if (this.$refs[refKey]) {
this.$set(this.skinsRef, index, this.$refs[refKey][0]);
}
});
},
focusSkinSelector() {
if (this.$refs.skinSelectorRef) {
this.$refs.skinSelectorRef.focus();
}
},
selectSkin(skin) {
this.skinSelected = skin;
this.isOpen = false;
this.$emit("skin-tone", skin.skinTone);
this.$nextTick(() => {
this.focusSkinSelector();
});
},
handleKeyDown(event, skin, index) {
var _a, _b, _c, _d;
event.preventDefault();
if (event.key === "ArrowLeft") {
if (index === 0) (_a = this.skinsRef[this.skinsRef.length - 1]) == null ? void 0 : _a.focus();
(_b = this.skinsRef[index - 1]) == null ? void 0 : _b.focus();
}
if (event.key === "ArrowRight") {
if (this.skinsRef.length) (_c = this.skinsRef[0]) == null ? void 0 : _c.focus();
(_d = this.skinsRef[index + 1]) == null ? void 0 : _d.focus();
}
if (event.key === "Enter") {
if (skin) {
this.selectSkin(skin);
} else {
this.toggleSkinList();
}
}
if (event.key === "Tab") {
if (event.shiftKey) {
this.$emit("focus-last-emoji");
} else {
this.$emit("focus-tabset");
}
}
},
toggleSkinList() {
this.isOpen = !this.isOpen;
this.$nextTick(() => {
if (this.skinsRef[0]) {
this.skinsRef[0].focus();
}
});
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { attrs: { "data-qa": "skin-selector" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isOpen, expression: "isOpen" }], staticClass: "d-emoji-picker__skin-list" }, _vm._l(_vm.skinList, function(skin, index) {
var _a;
return _c("button", { key: skin.name, ref: `skinRef-${index}`, refInFor: true, class: {
"selected": ((_a = _vm.skinSelected) == null ? void 0 : _a.skinCode) === skin.skinCode
}, on: { "click": function($event) {
return _vm.selectSkin(skin);
}, "keydown": (event) => _vm.handleKeyDown(event, skin, index) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": skin.name, "aria-label": skin.name, "title": skin.name, "src": `${_vm.cdnUrl + skin.unicode_output}.png` } })]);
}), 0), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.isOpen, expression: "!isOpen" }], staticClass: "d-emoji-picker__skin-selected" }, [_c("dt-tooltip", { attrs: { "placement": "top-end" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
var _a, _b, _c2, _d;
return [_c("button", { ref: "skinSelectorRef", attrs: { "aria-label": _vm.skinSelectorButtonTooltipLabel, "tabindex": "-1" }, on: { "click": _vm.toggleSkinList, "keydown": (event) => _vm.handleKeyDown(event) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": (_a = _vm.skinSelected) == null ? void 0 : _a.name, "aria-label": (_b = _vm.skinSelected) == null ? void 0 : _b.name, "title": (_c2 = _vm.skinSelected) == null ? void 0 : _c2.name, "src": `${_vm.cdnUrl + ((_d = _vm.skinSelected) == null ? void 0 : _d.unicode_output)}.png` } })])];
}, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const EmojiSkinSelector = __component__.exports;
exports.default = EmojiSkinSelector;
//# sourceMappingURL=emoji_skin_selector.vue.cjs.map