@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
162 lines (161 loc) • 5.32 kB
JavaScript
import { computed, ref, watch, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createBlock, withModifiers, resolveDynamicComponent } from "vue";
import { returnFirstEl } from "../../../common/utils.js";
import { EMOJI_PICKER_CATEGORIES } from "../emoji_picker_constants.js";
import { DtIconClock, DtIconSatisfied, DtIconLivingThing, DtIconFood, DtIconObject, DtIconTransportation, DtIconLightbulb, DtIconHeart, DtIconFlag } from "@dialpad/dialtone-icons/vue3";
import DtTabGroup from "../../tab/tab_group.vue.js";
import DtTab from "../../tab/tab.vue.js";
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_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 }
];
const tabs = computed(() => {
const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);
return tabsData.map((tab, index) => ({
...tab,
label: props.tabsetLabels[index],
// IDs on dt-tab component need to be on string
id: (index + 1).toString(),
panelId: (index + 1).toString()
}));
});
const isSearching = computed(() => props.emojiFilter.length > 0);
const selectedTab = ref("1");
const tabsetRef = ref([]);
watch(
() => props.scrollIntoTab,
() => {
if (!isSearching.value) {
selectedTab.value = (props.scrollIntoTab + 1).toString();
}
}
);
watch(
isSearching,
() => {
if (isSearching.value) {
selectedTab.value = null;
}
}
);
function selectTabset(id) {
const parseId = parseInt(id);
selectedTab.value = id;
emits("selected-tabset", parseId);
}
function setTabsetRef(ref2) {
tabsetRef.value.push(returnFirstEl(ref2.$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 openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(unref(DtTabGroup), {
size: "sm",
"tab-list-class": "d-emoji-picker__tabset-list",
selected: selectedTab.value
}, {
tabs: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (tab, index) => {
return openBlock(), createBlock(unref(DtTab), {
id: tab.id,
ref_for: true,
ref: (el) => {
if (el) setTabsetRef(el);
},
key: tab.id,
"panel-id": tab.panelId,
label: tab.label,
"aria-controls": "d-emoji-picker-list",
tabindex: index + 1,
onClickCapture: withModifiers(($event) => selectTabset(tab.id), ["stop"]),
onKeydown: ($event) => handleKeyDown($event, tab.id)
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(tab.icon), { size: "400" }))
]),
_: 2
}, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]);
}), 128))
]),
_: 1
}, 8, ["selected"])
]);
};
}
};
export {
_sfc_main as default
};
//# sourceMappingURL=emoji_tabset.vue.js.map