39 lines
873 B
Vue
39 lines
873 B
Vue
|
<script setup lang="ts">
|
||
|
|
import { ToggleGroup, ToggleGroupItem } from '@vben-core/shadcn-ui';
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'PreferenceColorMode',
|
||
|
|
});
|
||
|
|
|
||
|
|
const modelValue = defineModel<string | undefined>('themeRadius', {
|
||
|
|
default: '0.5',
|
||
|
|
});
|
||
|
|
|
||
|
|
const items = [
|
||
|
|
{ label: '0', value: '0' },
|
||
|
|
{ label: '0.25', value: '0.25' },
|
||
|
|
{ label: '0.5', value: '0.5' },
|
||
|
|
{ label: '0.75', value: '0.75' },
|
||
|
|
{ label: '1', value: '1' },
|
||
|
|
];
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<ToggleGroup
|
||
|
|
v-model="modelValue"
|
||
|
|
class="gap-2"
|
||
|
|
size="sm"
|
||
|
|
type="single"
|
||
|
|
variant="outline"
|
||
|
|
>
|
||
|
|
<template v-for="item in items" :key="item.value">
|
||
|
|
<ToggleGroupItem
|
||
|
|
:value="item.value"
|
||
|
|
class="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground h-7 w-16 rounded-sm"
|
||
|
|
>
|
||
|
|
{{ item.label }}
|
||
|
|
</ToggleGroupItem>
|
||
|
|
</template>
|
||
|
|
</ToggleGroup>
|
||
|
|
</template>
|