@ithinkdt/naive/src/frame/layout/l-collpase-btn.jsx

iThinkDT Naive UI

import { defineComponent, inject, useAttrs } from 'vue'

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

import { useI18n } from '@ithinkdt/core'

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

import { IFold, IUnfold } from '../assets.jsx'

export const DtCollpaseBtn = defineComponent({
    name: 'DtCollpaseBtn',
    inheritAttrs: false,
    props: {
        size: { type: String, required: false, default: 'medium' },
    },
    setup(props) {
        const cls = `${p}-collpase-btn`
        createStyle(cls)

        const theme = inject('__INJECTED_THEME__')

        const { t } = useI18n()

        const attrs = useAttrs()

        return () => (
            <NTooltip delay={666} duration={0} placement="right">
                {{
                    default: () => (theme.isFixedSidebar ? t('sys.collpase') : t('sys.expand')),
                    trigger: () => (
                        <NButton
                            class={[cls, `${cls}--${props.size}`]}
                            text
                            onClick={() => (theme.isFixedSidebar = !theme.isFixedSidebar)}
                            {...attrs}
                        >
                            <NIcon>{theme.isFixedSidebar ? <IFold /> : <IUnfold />}</NIcon>
                        </NButton>
                    ),
                }}
            </NTooltip>
        )
    },
})

let style
function createStyle(cls) {
    if (!style) {
        style = cB(
            'collpase-btn',
            {
                fontSize: '19px',
                backdropFilter: 'blur(5px)',
            },
            [
                cM('large', {
                    fontSize: '22px',
                }),
            ],
        )

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