@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
229 lines (228 loc) • 9.13 kB
JavaScript
import { ref, computed, watch, openBlock, createElementBlock, createElementVNode, createVNode, withKeys, createBlock, createCommentVNode } from "vue";
import _sfc_main$2 from "./modules/emoji_search.vue.js";
import _sfc_main$1 from "./modules/emoji_tabset.vue.js";
import _sfc_main$3 from "./modules/emoji_selector.vue.js";
import _sfc_main$5 from "./modules/emoji_skin_selector.vue.js";
import _sfc_main$4 from "./modules/emoji_description.vue.js";
const _hoisted_1 = { class: "d-emoji-picker" };
const _hoisted_2 = { class: "d-emoji-picker--header" };
const _hoisted_3 = { class: "d-emoji-picker--body" };
const _hoisted_4 = { class: "d-emoji-picker--footer" };
const _sfc_main = {
__name: "emoji_picker",
props: {
/**
* The array with recently used emoji object
* This list is necessary to fill the recently used tab
* @type {Array}
* @default []
* @example
* <dt-emoji-picker :recentlyUsedEmojis="[emojiObject, emojiObject]" />
*/
// TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object
recentlyUsedEmojis: {
type: Array,
default: () => []
},
/**
* The placeholder text for the search input
* @type {String}
* @required
* @example
* <dt-emoji-picker :searchPlaceholderLabel="'Search...'" />
*/
searchPlaceholderLabel: {
type: String,
required: true
},
/**
* The label for the search results tab
* @type {String}
* @required
* @example
* <dt-emoji-picker :searchResultsLabel="'Search results'" />
*/
searchResultsLabel: {
type: String,
required: true
},
/**
* The label for the search no results
* @type {String}
* @required
* @example
* <dt-emoji-picker :searchNoResultsLabel="'No results'" />
*/
searchNoResultsLabel: {
type: String,
required: true
},
/**
* The list of tabsets to show, it is necessary to be updated with the correct language
* It must respect the provided order.
* @type {Array}
* @required
* @example
* <dt-emoji-picker
* :tabSetLabels="['Most recently used', 'Smileys and people', 'Nature',
* 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags']" />
*/
tabSetLabels: {
type: Array,
required: true
},
/**
* The skin tone to show the emojis
* This prop gives the possibility to use the skin tone selected by the user previously
* @type {String}
* @default 'Default'
* @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'
* @example
* <dt-emoji-picker :skinTone="'Default'" />
*/
skinTone: {
type: String,
default: "Default"
},
/**
* Tooltip shown when skin selector button is hovered.
* @type {String}
* @required
* @example
* <dt-emoji-picker :skin-selector-button-tooltip-label="'Change default skin tone'" />
*/
skinSelectorButtonTooltipLabel: {
type: String,
required: true
},
/**
* Sets the search query that filters emojis.
* @type {String}
* @example
* <dt-emoji-picker search-query="smile" />
*/
searchQuery: {
type: String,
default: ""
},
/**
* Shows the search input
* @type {Boolean}
* @example
* <dt-emoji-picker :show-search="false" />
*/
showSearch: {
type: Boolean,
default: true
}
},
emits: [
/**
* It will emit the selected emoji
* @event selected-emoji
* @param {Object} emoji - The selected emoji from the emoji selector
*/
"selected-emoji",
/**
* It will emit the selected skin tone
* @event skin-tone
* @param {String} skin - The selected skin tone from the skin selector
*/
"skin-tone",
/**
* Since the keyboard events are encapsulated, we emit this event to close the picker
* @event close
*/
"close"
],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const internalSearchQuery = ref(props.searchQuery.value);
const highlightedEmoji = ref(null);
const selectedTabset = ref({});
const scrollIntoTab = ref(0);
const showRecentlyUsedTab = computed(() => props.recentlyUsedEmojis.length > 0);
watch(
() => props.searchQuery,
(newValue) => {
internalSearchQuery.value = newValue;
}
);
function scrollToSelectedTabset(tabId) {
internalSearchQuery.value = "";
selectedTabset.value = tabId;
selectedTabset.value = { ...selectedTabset.value, tabId };
}
function updateScrollIntoTab(value) {
scrollIntoTab.value = value;
}
function updateHighlightedEmoji(emoji) {
highlightedEmoji.value = emoji;
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createVNode(_sfc_main$1, {
ref: "tabsetRef",
"emoji-filter": internalSearchQuery.value,
"show-recently-used-tab": showRecentlyUsedTab.value,
"scroll-into-tab": scrollIntoTab.value,
"tabset-labels": __props.tabSetLabels,
onFocusSkinSelector: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
onFocusSearchInput: _cache[1] || (_cache[1] = ($event) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
onSelectedTabset: scrollToSelectedTabset,
onKeydown: _cache[2] || (_cache[2] = withKeys(($event) => emits("close"), ["esc"]))
}, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels"])
]),
createElementVNode("div", _hoisted_3, [
__props.showSearch ? (openBlock(), createBlock(_sfc_main$2, {
key: 0,
ref: "searchInputRef",
modelValue: internalSearchQuery.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => internalSearchQuery.value = $event),
"search-placeholder-label": __props.searchPlaceholderLabel,
onSelectFirstEmoji: _cache[4] || (_cache[4] = ($event) => emits("selected-emoji", highlightedEmoji.value)),
onFocusTabset: _cache[5] || (_cache[5] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
onFocusEmojiSelector: _cache[6] || (_cache[6] = ($event) => _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
onKeydown: _cache[7] || (_cache[7] = withKeys(($event) => emits("close"), ["esc"]))
}, null, 8, ["modelValue", "search-placeholder-label"])) : createCommentVNode("", true),
createVNode(_sfc_main$3, {
ref: "emojiSelectorRef",
"emoji-filter": internalSearchQuery.value,
"skin-tone": __props.skinTone,
"tabset-labels": __props.tabSetLabels,
"search-results-label": __props.searchResultsLabel,
"search-no-results-label": __props.searchNoResultsLabel,
"recently-used-emojis": __props.recentlyUsedEmojis,
"selected-tabset": selectedTabset.value,
onScrollIntoTab: updateScrollIntoTab,
onHighlightedEmoji: updateHighlightedEmoji,
onSelectedEmoji: _cache[8] || (_cache[8] = ($event) => emits("selected-emoji", $event)),
onFocusSkinSelector: _cache[9] || (_cache[9] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
onFocusSearchInput: _cache[10] || (_cache[10] = ($event) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.tabsetRef.focusTabset()),
onKeydown: _cache[11] || (_cache[11] = withKeys(($event) => emits("close"), ["esc"]))
}, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
]),
createElementVNode("div", _hoisted_4, [
createVNode(_sfc_main$4, { emoji: highlightedEmoji.value }, null, 8, ["emoji"]),
createVNode(_sfc_main$5, {
ref: "skinSelectorRef",
"is-hovering": !!highlightedEmoji.value,
"skin-selector-button-tooltip-label": __props.skinSelectorButtonTooltipLabel,
"skin-tone": __props.skinTone,
onSkinTone: _cache[12] || (_cache[12] = ($event) => emits("skin-tone", $event)),
onFocusTabset: _cache[13] || (_cache[13] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
onFocusLastEmoji: _cache[14] || (_cache[14] = ($event) => _ctx.$refs.emojiSelectorRef.focusLastEmoji()),
onKeydown: _cache[15] || (_cache[15] = withKeys(($event) => emits("close"), ["esc"]))
}, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
])
]);
};
}
};
const DtEmojiPicker = _sfc_main;
export {
DtEmojiPicker as default
};
//# sourceMappingURL=emoji_picker.vue.js.map