@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
162 lines (161 loc) • 5.55 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const common_utils = require("../../../common/utils.cjs");
const emoji_picker_constants = require("../emoji_picker_constants.cjs");
const vue3 = require("@dialpad/dialtone-icons/vue3");
const tab_group = require("../../tab/tab_group.vue.cjs");
const tab = require("../../tab/tab.vue.cjs");
const _hoisted_1 = { class: "d-emoji-picker__tabset" };
const _sfc_main = {
__name: "emoji_tabset",
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
}
},
emits: [
/**
* Emitted when a tab is selected
* @event selected-tabset
* @param {String} tabId - The name of the tab that was selected
*/
"selected-tabset",
"focus-search-input",
"focus-skin-selector"
],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const TABS_DATA = [
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: vue3.DtIconClock },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: vue3.DtIconSatisfied },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.NATURE, icon: vue3.DtIconLivingThing },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.FOOD, icon: vue3.DtIconFood },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: vue3.DtIconObject },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.TRAVEL, icon: vue3.DtIconTransportation },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.OBJECTS, icon: vue3.DtIconLightbulb },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: vue3.DtIconHeart },
{ label: emoji_picker_constants.EMOJI_PICKER_CATEGORIES.FLAGS, icon: vue3.DtIconFlag }
];
const tabs = vue.computed(() => {
const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);
return tabsData.map((tab2, index) => ({
...tab2,
label: props.tabsetLabels[index],
// IDs on dt-tab component need to be on string
id: (index + 1).toString(),
panelId: (index + 1).toString()
}));
});
const isSearching = vue.computed(() => props.emojiFilter.length > 0);
const selectedTab = vue.ref("1");
const tabsetRef = vue.ref([]);
vue.watch(
() => props.scrollIntoTab,
() => {
if (!isSearching.value) {
selectedTab.value = (props.scrollIntoTab + 1).toString();
}
}
);
vue.watch(
isSearching,
() => {
if (isSearching.value) {
selectedTab.value = null;
}
}
);
function selectTabset(id) {
const parseId = parseInt(id);
selectedTab.value = id;
emits("selected-tabset", parseId);
}
function setTabsetRef(ref) {
tabsetRef.value.push(common_utils.returnFirstEl(ref.$el));
}
function focusTabset() {
tabsetRef.value[0].focus();
}
function handleKeyDown(event, tabId) {
if (event.key === "Enter") {
selectTabset(tabId);
tabsetRef.value[tabId - 1].blur();
}
if (event.key === "Tab") {
event.preventDefault();
if (event.shiftKey) {
emits("focus-skin-selector");
} else {
emits("focus-search-input");
}
}
if (event.key === "ArrowDown") {
emits("focus-search-input");
}
}
__expose({
focusTabset
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createVNode(vue.unref(tab_group.default), {
size: "sm",
"tab-list-class": "d-emoji-picker__tabset-list",
selected: selectedTab.value
}, {
tabs: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabs.value, (tab$1, index) => {
return vue.openBlock(), vue.createBlock(vue.unref(tab.default), {
id: tab$1.id,
ref_for: true,
ref: (el) => {
if (el) setTabsetRef(el);
},
key: tab$1.id,
"panel-id": tab$1.panelId,
label: tab$1.label,
"aria-controls": "d-emoji-picker-list",
tabindex: index + 1,
onClickCapture: vue.withModifiers(($event) => selectTabset(tab$1.id), ["stop"]),
onKeydown: ($event) => handleKeyDown($event, tab$1.id)
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tab$1.icon), { size: "400" }))
]),
_: 2
}, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]);
}), 128))
]),
_: 1
}, 8, ["selected"])
]);
};
}
};
exports.default = _sfc_main;
//# sourceMappingURL=emoji_tabset.vue.cjs.map