@ithinkdt/naive/src/frame/layout/l-fullscreen.jsx

iThinkDT Naive UI

import { defineComponent, useAttrs } from 'vue'

import { NButton, NTooltip } from 'ithinkdt-ui'

import { useFullscreen } from '@vueuse/core'

import { useI18n } from '@ithinkdt/core'

import { cB, CSS_MOUNT_ANCHOR_META_NAME, CSS_STYLE_PREFIX as p } from '@ithinkdt/core/cssr'

import { IScreenFull, IScreenNormal } from '../assets.jsx'

export const DtFullscreen = defineComponent({
    name: 'DtFullscreen',
    inheritAttrs: false,
    setup() {
        const cls = `${p}-fullscreen`
        createStyle(cls)

        const { t } = useI18n()

        const attrs = useAttrs()

        const { isFullscreen, isSupported, toggle } = useFullscreen(document.documentElement)

        return () => (
            <NTooltip delay={333} duration={0} placement="bottom">
                {{
                    default: () => (isFullscreen.value ? t('sys.screen.exit') : t('sys.screen.full')),
                    trigger: () => (
                        <NButton
                            class={cls}
                            quaternary
                            circle
                            size="large"
                            disabled={!isSupported.value}
                            onClick={toggle}
                            {...attrs}
                        >
                            {isFullscreen.value ? <IScreenNormal /> : <IScreenFull />}
                        </NButton>
                    ),
                }}
            </NTooltip>
        )
    },
})

let style
function createStyle(cls) {
    if (!style) {
        style = cB('fullscreen', {
            fontSize: '19px',
        })

        style.mount({
            id: cls,
            anchorMetaName: CSS_MOUNT_ANCHOR_META_NAME,
        })
    }
}