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

iThinkDT Naive UI

import { defineComponent, computed } from 'vue'
import { NButton, NDropdown } from 'ithinkdt-ui'

import { useI18n, lang } from '@ithinkdt/core'

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

import { ILang } from '../assets.jsx'

export const DtLang = defineComponent({
    name: 'DtLanguage',

    setup() {
        const cls = `${p}-language`
        createStyle(cls)
        const { t, locale } = useI18n()

        const availableLocales = computed(() =>
            Object.values(lang).map((lang) => {
                return {
                    label: t('sys.lang', {
                        locale: lang,
                    }),
                    key: lang,
                }
            }),
        )
        return () => (
            <NDropdown
                showArrow
                displayDirective="if"
                options={availableLocales.value}
                onSelect={(e) => (locale.value = e)}
            >
                <NButton class={cls} quaternary circle size="large">
                    <ILang />
                </NButton>
            </NDropdown>
        )
    },
})

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

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