@ithinkdt/core/src/theme/page-tab/use-page-tab.js

iThinkDT Core

import { onActivated, ref, watch, computed, inject, provide, getCurrentInstance, isRef } from 'vue'

import { useAuth } from '../../auth'

import { useModalRef } from '../../page/use-modal'
import { PageTabInjection, useTheme } from '../plugin'
import { setTitle } from './set-title'
import { syncRef } from '@vueuse/core'

export function usePageTab(title, { priority, titleTemplate = (t) => t } = {}) {
    const TAB_INJECTION = '@ithinkdt/tab'

    const tab = inject(PageTabInjection, () => getCurrentInstance()._tab, true)

    if (!tab) {
        console.log(`[theme] "usePageTab" not in page!`)
        return { tab: {}, title: ref(title), setTitle() {}, close() {} }
    }

    if (typeof title === 'function') {
        const _title = title
        title = computed(() => _title(tab.value._title))
    }

    let __t = inject(TAB_INJECTION, () => {}, true)
    if (__t) {
        if (__t.priority === 'low') {
            if (isRef(title)) {
                syncRef(__t.title, title, { direction: 'rtl' })
            } else if (title) {
                __t.title.value = title
            }
        }
    } else {
        __t = {
            priority,
            tab,
            title: ref(title || tab.value?.title),
            title2: undefined,
            setTitle(title) {
                __t.title.value = title
            },
            close() {
                if (modalRef.inModal) {
                    modalRef.close()
                } else if (__t.tab.value) {
                    theme.closePage(__t.tab.value)
                }
            },
        }

        __t.title2 = computed(() => titleTemplate(__t.title.value?.trim()))

        const theme = useTheme()
        const auth = useAuth()

        const modalRef = useModalRef(__t.title2)

        const _set = () => {
            if (modalRef.inModal) return
            console.debug(`[theme] usePageTab change title to '${__t.title2.value}'.`)

            setTitle(__t.title2.value, auth, __t.tab.value)
        }

        watch(__t.title2, _set, { immediate: true })
        onActivated(_set)
    }

    provide(TAB_INJECTION, __t)

    return __t
}