@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
154 lines (153 loc) • 5.13 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const emoji_picker_constants = require("../emoji_picker_constants.cjs");
const vue2 = require("@dialpad/dialtone-icons/vue2");
const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
const tab_group = require("../../tab/tab_group.vue.cjs");
const tab = require("../../tab/tab.vue.cjs");
const _sfc_main = {
name: "EmojiTabset",
components: {
DtTabGroup: tab_group.default,
DtTab: tab.default
},
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_constants.EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: vue2.DtIconClock },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: vue2.DtIconSatisfied },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.NATURE, icon: vue2.DtIconLivingThing },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.FOOD, icon: vue2.DtIconFood },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: vue2.DtIconObject },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.TRAVEL, icon: vue2.DtIconTransportation },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.OBJECTS, icon: vue2.DtIconLightbulb },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: vue2.DtIconHeart },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.FLAGS, icon: vue2.DtIconFlag }
]
};
},
computed: {
tabs() {
const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);
return tabsData.map((tab2, index) => ({
...tab2,
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(tab2, index) {
return _c("dt-tab", { key: tab2.id, ref: `tabsetRef-${index}`, refInFor: true, attrs: { "id": tab2.id, "panel-id": tab2.panelId, "label": tab2.label, "aria-controls": "d-emoji-picker-list", "tabindex": index + 1 }, on: { "!click": function($event) {
$event.stopPropagation();
return _vm.selectTabset(tab2.id);
}, "keydown": function($event) {
return _vm.handleKeyDown($event, tab2.id);
} } }, [_c(tab2.icon, { tag: "component", attrs: { "size": "400" } })], 1);
});
}, proxy: true }]) })], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const EmojiTabset = __component__.exports;
exports.default = EmojiTabset;
//# sourceMappingURL=emoji_tabset.vue.cjs.map