|
|
|
import { useState } from '#app'
|
|
|
|
|
|
|
|
export interface TabItem {
|
|
|
|
type: 'table' | 'view' | 'auth'
|
|
|
|
title: string
|
|
|
|
id?: string
|
|
|
|
}
|
|
|
|
|
|
|
|
function getPredicate(key: Partial<TabItem>) {
|
|
|
|
return (tab: TabItem) =>
|
|
|
|
(!('id' in key) || tab.id === key.id) &&
|
|
|
|
(!('title' in key) || tab.title === key.id) &&
|
|
|
|
(!('type' in key) || tab.type === key.id)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default () => {
|
|
|
|
const tabs = useState<TabItem[]>('tabs', () => [])
|
|
|
|
const activeTab = useState<number>('activeTab', () => 0)
|
|
|
|
|
|
|
|
const addTab = (tabMeta: TabItem) => {
|
|
|
|
const tabIndex = tabs.value.findIndex((tab) => tab.id === tabMeta.id)
|
|
|
|
// if tab already found make it active
|
|
|
|
if (tabIndex > -1) {
|
|
|
|
activeTab.value = tabIndex
|
|
|
|
}
|
|
|
|
// if tab not found add it
|
|
|
|
else {
|
|
|
|
tabs.value = [...(tabs.value || []), tabMeta]
|
|
|
|
activeTab.value = tabs.value.length - 1
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const clearTabs = () => {
|
|
|
|
tabs.value = []
|
|
|
|
}
|
|
|
|
|
|
|
|
const closeTab = (key: number | Partial<TabItem>) => {
|
|
|
|
if (typeof key === 'number') tabs.value.splice(key, 1)
|
|
|
|
else {
|
|
|
|
const index = tabs.value.findIndex(getPredicate(key))
|
|
|
|
if (index > -1) tabs.value.splice(index, 1)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const updateTab = (key: number | Partial<TabItem>, newTabItemProps: Partial<TabItem>) => {
|
|
|
|
const tab = typeof key === 'number' ? tabs.value[key] : tabs.value.find(getPredicate(key))
|
|
|
|
if (tab) {
|
|
|
|
Object.assign(tab, newTabItemProps)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return { tabs, addTab, activeTab, clearTabs, closeTab, updateTab }
|
|
|
|
}
|