keep-vue/lib/components/Tabs/useTabs.js

Keep Vue is an open-source component library built on top of Vue3 and Tailwind CSS. It offers a collection of pre-designed UI components and styles that you can easily integrate into your web applications.

import { createInjectionState } from "@vueuse/core";
import { ref } from "vue";
// custom injectionKey
const TabsStoreKey = "tabs-store";
const [useProvideTabsStore, useInjectTabStore] = createInjectionState((variant, defaultActive) => {
    const activeItem = ref(defaultActive);
    const handleActive = (item) => {
        activeItem.value = item;
    };
    return {
        variant,
        defaultActive,
        activeItem,
        handleActive,
    };
}, {
    injectionKey: TabsStoreKey,
});
function useTabs() {
    const tabsState = useInjectTabStore();
    if (!tabsState)
        throw new Error("useTabs must be used within a <Tabs /> Component");
    return tabsState;
}
export { useProvideTabsStore, useTabs };