63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import type { PopoverPlacement } from 'naive-ui';
|
||
|
|
import { $t } from '@/locales';
|
||
|
|
|
||
|
|
defineOptions({ name: 'ThemeSchemaSwitch' });
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
/**
|
||
|
|
* theme schema
|
||
|
|
*/
|
||
|
|
themeSchema: UnionKey.ThemeScheme;
|
||
|
|
/**
|
||
|
|
* show tooltip
|
||
|
|
*/
|
||
|
|
showTooltip?: boolean;
|
||
|
|
/**
|
||
|
|
* tooltip placement
|
||
|
|
*/
|
||
|
|
tooltipPlacement?: PopoverPlacement;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
showTooltip: true,
|
||
|
|
tooltipPlacement: 'bottom'
|
||
|
|
});
|
||
|
|
|
||
|
|
interface Emits {
|
||
|
|
(e: 'switch'): void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const emit = defineEmits<Emits>();
|
||
|
|
|
||
|
|
function handleSwitch() {
|
||
|
|
emit('switch');
|
||
|
|
}
|
||
|
|
|
||
|
|
const icons: Record<UnionKey.ThemeScheme, string> = {
|
||
|
|
light: 'material-symbols:sunny',
|
||
|
|
dark: 'material-symbols:nightlight-rounded',
|
||
|
|
auto: 'material-symbols:hdr-auto'
|
||
|
|
};
|
||
|
|
|
||
|
|
const icon = computed(() => icons[props.themeSchema]);
|
||
|
|
|
||
|
|
const tooltipContent = computed(() => {
|
||
|
|
if (!props.showTooltip) return '';
|
||
|
|
|
||
|
|
return $t('icon.themeSchema');
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<ButtonIcon
|
||
|
|
:icon="icon"
|
||
|
|
:tooltip-content="tooltipContent"
|
||
|
|
:tooltip-placement="tooltipPlacement"
|
||
|
|
@click="handleSwitch"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|