@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
202 lines (201 loc) • 7.88 kB
JavaScript
import EmojiTabset from "./modules/emoji_tabset.vue.js";
import EmojiSearch from "./modules/emoji_search.vue.js";
import EmojiSelector from "./modules/emoji_selector.vue.js";
import EmojiDescription from "./modules/emoji_description.vue.js";
import EmojiSkinSelector from "./modules/emoji_skin_selector.vue.js";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
name: "DtEmojiPicker",
components: {
EmojiTabset,
EmojiSearch,
EmojiSelector,
EmojiDescription,
EmojiSkinSelector
},
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
},
/**
* 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
}
},
data() {
return {
internalSearchQuery: this.searchQuery,
highlightedEmoji: null,
selectedTabset: {},
scrollIntoTab: 0
};
},
computed: {
showRecentlyUsedTab() {
var _a;
return ((_a = this.recentlyUsedEmojis) == null ? void 0 : _a.length) > 0;
}
},
watch: {
searchQuery(value) {
this.internalSearchQuery = value;
}
},
methods: {
scrollToSelectedTabset(tabId) {
this.internalSearchQuery = "";
this.selectedTabset = { ...this.selectedTabset, tabId };
},
updateScrollIntoTab(value) {
this.scrollIntoTab = value;
},
updateHighlightedEmoji(emoji) {
this.highlightedEmoji = emoji;
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "d-emoji-picker" }, [_c("div", { staticClass: "d-emoji-picker--header" }, [_c("emoji-tabset", { ref: "tabsetRef", attrs: { "emoji-filter": _vm.internalSearchQuery, "show-recently-used-tab": _vm.showRecentlyUsedTab, "scroll-into-tab": _vm.scrollIntoTab, "tab-set-labels": _vm.tabSetLabels }, on: { "focus-skin-selector": function($event) {
return _vm.$refs.skinSelectorRef.focusSkinSelector();
}, "focus-search-input": function($event) {
_vm.showSearch ? _vm.$refs.searchInputRef.focusSearchInput() : _vm.$refs.emojiSelectorRef.focusEmojiSelector();
}, "selected-tabset": _vm.scrollToSelectedTabset }, nativeOn: { "keydown": function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
return _vm.$emit("close");
} } })], 1), _c("div", { staticClass: "d-emoji-picker--body" }, [_vm.showSearch ? _c("emoji-search", { ref: "searchInputRef", attrs: { "model-value": _vm.internalSearchQuery, "search-placeholder-label": _vm.searchPlaceholderLabel }, on: { "update:model-value": (newValue) => _vm.internalSearchQuery = newValue, "select-first-emoji": function($event) {
return _vm.$emit("selected-emoji", _vm.highlightedEmoji);
}, "focus-tabset": function($event) {
return _vm.$refs.tabsetRef.focusTabset();
}, "focus-emoji-selector": function($event) {
return _vm.$refs.emojiSelectorRef.focusEmojiSelector();
} }, nativeOn: { "keydown": function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
return _vm.$emit("close");
} } }) : _vm._e(), _c("emoji-selector", { ref: "emojiSelectorRef", attrs: { "emoji-filter": _vm.internalSearchQuery, "skin-tone": _vm.skinTone, "tab-set-labels": _vm.tabSetLabels, "search-results-label": _vm.searchResultsLabel, "search-no-results-label": _vm.searchNoResultsLabel, "recently-used-emojis": _vm.recentlyUsedEmojis, "selected-tabset": _vm.selectedTabset }, on: { "scroll-into-tab": _vm.updateScrollIntoTab, "highlighted-emoji": _vm.updateHighlightedEmoji, "selected-emoji": function($event) {
return _vm.$emit("selected-emoji", $event);
}, "focus-skin-selector": function($event) {
return _vm.$refs.skinSelectorRef.focusSkinSelector();
}, "focus-search-input": function($event) {
_vm.showSearch ? _vm.$refs.searchInputRef.focusSearchInput() : _vm.$refs.tabsetRef.focusTabset();
} }, nativeOn: { "keydown": function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
return _vm.$emit("close");
} } })], 1), _c("div", { staticClass: "d-emoji-picker--footer" }, [_c("emoji-description", { attrs: { "emoji": _vm.highlightedEmoji } }), _c("emoji-skin-selector", { ref: "skinSelectorRef", attrs: { "is-hovering": !!_vm.highlightedEmoji, "skin-selector-button-tooltip-label": _vm.skinSelectorButtonTooltipLabel, "skin-tone": _vm.skinTone }, on: { "skin-tone": function($event) {
return _vm.$emit("skin-tone", $event);
}, "focus-tabset": function($event) {
return _vm.$refs.tabsetRef.focusTabset();
}, "focus-last-emoji": function($event) {
return _vm.$refs.emojiSelectorRef.focusLastEmoji();
} }, nativeOn: { "keydown": function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
return _vm.$emit("close");
} } })], 1)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtEmojiPicker = __component__.exports;
export {
DtEmojiPicker as default
};
//# sourceMappingURL=emoji_picker.vue.js.map