77c6a16040
* chore: update unovis deps * chore: update color to use the themePrimary * docs: use gradient for overview component * docs: add themePopover to MainLayout * docs: enable global theme on every page * feat: introduce area, line, bar, donut chart * feat: add more props * fix: revert old pipeline * fix: patch @unovis/vue deps * fix: patch @unovis/vue deps again * chore: revert unovis/ts to 1.2.1 * chore: wip * docs: add alpha tag, fix tooltipo styling * docs: add charts installations step * feat: use generic, add better color * chore: build registry * feat: improve generic props * chore: build registry * docs: add alpha label * fix: collapsible not open correctly * docs: add badge to mobile nav * chore: better types * chore: run registry * chore: wip * fix: crosshair issue * chore: fix type, import missing error * chore: build registry * chore: arrange interface, expose margin, slot * chore: build registry * docs: guide page feat: add prop to barchart * chore: fix pnpm-lock * chore: add feature * chore: run build registry * refactor: change color var * feat: codegen * chore: add meta tables * feat: add line, area example * feat: bar and donut examples * docs: codege * chore: build registry * docs: improve chart doc * chore: fix missing icon package
48 lines
1.5 KiB
Vue
48 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { Paintbrush } from 'lucide-vue-next'
|
|
import { onMounted, watch } from 'vue'
|
|
import { allColors } from './theming/utils/data'
|
|
import ThemeCustomizer from './ThemeCustomizer.vue'
|
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
|
|
import { useConfigStore } from '@/stores/config'
|
|
|
|
const { theme, radius } = useConfigStore()
|
|
|
|
// Whenever the component is mounted, update the document class list
|
|
onMounted(() => {
|
|
document.documentElement.style.setProperty('--radius', `${radius.value}rem`)
|
|
document.documentElement.classList.add(`theme-${theme.value}`)
|
|
})
|
|
|
|
// Whenever the theme value changes, update the document class list
|
|
watch(theme, (theme) => {
|
|
document.documentElement.classList.remove(
|
|
...allColors.map(color => `theme-${color}`),
|
|
)
|
|
document.documentElement.classList.add(`theme-${theme}`)
|
|
})
|
|
|
|
// Whenever the radius value changes, update the document style
|
|
watch(radius, (radius) => {
|
|
document.documentElement.style.setProperty('--radius', `${radius}rem`)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Popover>
|
|
<PopoverTrigger as-child>
|
|
<Button
|
|
class="w-9 h-9"
|
|
:variant="'ghost'"
|
|
:size="'icon'"
|
|
>
|
|
<Paintbrush class="w-4 h-4" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent :side-offset="8" align="end" class="w-96">
|
|
<ThemeCustomizer :all-colors="allColors" />
|
|
</PopoverContent>
|
|
</Popover>
|
|
</template>
|