@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
154 lines (153 loc) • 4.82 kB
JavaScript
import { EMOJI_PICKER_CATEGORIES } from "../emoji_picker_constants.js";
import { DtIconClock, DtIconSatisfied, DtIconLivingThing, DtIconFood, DtIconObject, DtIconTransportation, DtIconLightbulb, DtIconHeart, DtIconFlag } from "@dialpad/dialtone-icons/vue2";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
import DtTabGroup from "../../tab/tab_group.vue.js";
import DtTab from "../../tab/tab.vue.js";
const _sfc_main = {
name: "EmojiTabset",
components: {
DtTabGroup,
DtTab
},
props: {
/**
* Whether to show the recently used tab or not
* @type {Boolean}
* @default false
*/
showRecentlyUsedTab: {
type: Boolean,
default: false
},
scrollIntoTab: {
type: Number,
required: true
},
emojiFilter: {
type: String,
default: ""
},
/**
* The labels for the aria-label
* @type {Array}
* @required
*/
tabSetLabels: {
type: Array,
required: true
}
},
data() {
return {
selectedTab: "1",
tabsetRef: [],
TABS_DATA: [
{ label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: DtIconClock },
{ label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: DtIconSatisfied },
{ label: EMOJI_PICKER_CATEGORIES.NATURE, icon: DtIconLivingThing },
{ label: EMOJI_PICKER_CATEGORIES.FOOD, icon: DtIconFood },
{ label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: DtIconObject },
{ label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: DtIconTransportation },
{ label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: DtIconLightbulb },
{ label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: DtIconHeart },
{ label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: DtIconFlag }
]
};
},
computed: {
tabs() {
const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);
return tabsData.map((tab, index) => ({
...tab,
label: this.tabSetLabels[index],
// IDs on dt-tab component need to be on string
id: (index + 1).toString(),
panelId: (index + 1).toString()
}));
},
isSearching() {
return this.emojiFilter.length > 0;
}
},
watch: {
scrollIntoTab: function(newVal) {
if (!this.isSearching) {
this.selectedTab = (newVal + 1).toString();
}
},
isSearching: function(newVal) {
if (newVal) {
this.selectedTab = null;
}
}
},
mounted() {
this.$nextTick(() => {
this.setTabsetRef();
});
},
methods: {
selectTabset(id) {
const parseId = parseInt(id);
this.selectedTab = id;
this.$emit("selected-tabset", parseId);
},
setTabsetRef() {
this.tabs.forEach((skin, index) => {
const refKey = `tabsetRef-${index}`;
if (this.$refs[refKey]) {
this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);
}
});
},
focusTabset() {
if (this.tabsetRef[0]) {
this.tabsetRef[0].focus();
}
},
// eslint-disable-next-line complexity
handleKeyDown(event, tabId) {
if (event.key === "Enter") {
this.selectTabset(tabId);
if (this.tabsetRef[tabId - 1]) {
this.tabsetRef[tabId - 1].blur();
}
}
if (event.key === "Tab") {
event.preventDefault();
if (event.shiftKey) {
this.$emit("focus-skin-selector");
} else {
this.$emit("focus-search-input");
}
}
if (event.key === "ArrowDown") {
this.$emit("focus-search-input");
}
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "size": "sm", "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
return _vm._l(_vm.tabs, function(tab, index) {
return _c("dt-tab", { key: tab.id, ref: `tabsetRef-${index}`, refInFor: true, attrs: { "id": tab.id, "panel-id": tab.panelId, "label": tab.label, "aria-controls": "d-emoji-picker-list", "tabindex": index + 1 }, on: { "!click": function($event) {
$event.stopPropagation();
return _vm.selectTabset(tab.id);
}, "keydown": function($event) {
return _vm.handleKeyDown($event, tab.id);
} } }, [_c(tab.icon, { tag: "component", attrs: { "size": "400" } })], 1);
});
}, proxy: true }]) })], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const EmojiTabset = __component__.exports;
export {
EmojiTabset as default
};
//# sourceMappingURL=emoji_tabset.vue.js.map