Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: upadte to use composables

Browse Source
This commit is contained in:
zernonia 2023-09-08 14:40:58 +08:00
parent d39220e3e8
commit 22e548f452
2 changed files with 5 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/www/.vitepress/theme/layout/ThemingLayout.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, watch } from 'vue' import { onMounted, watch } from 'vue'
import { useDark } from '@vueuse/core'
import { Paintbrush } from 'lucide-vue-next' import { Paintbrush } from 'lucide-vue-next'
import { useData } from 'vitepress'
import PageHeader from '../components/PageHeader.vue' import PageHeader from '../components/PageHeader.vue'
import PageHeaderHeading from '../components/PageHeaderHeading.vue' import PageHeaderHeading from '../components/PageHeaderHeading.vue'
import PageHeaderDescription from '../components/PageHeaderDescription.vue' import PageHeaderDescription from '../components/PageHeaderDescription.vue'
@ -47,26 +47,7 @@ const allColors: Color[] = [
] ]
const { theme, radius, setRadius, setTheme } = useConfigStore() const { theme, radius, setRadius, setTheme } = useConfigStore()
const { isDark } = useData()
const isDark = useDark()
// Store an object called config in local storage with the theme and radius values
watch([theme, radius], ([theme, radius]) => {
localStorage.setItem(
'config',
JSON.stringify({
theme,
radius,
}),
)
})
// If there is a config object in local storage, set the theme and radius values to the values in local storage
if (localStorage.getItem('config')) {
const config = JSON.parse(localStorage.getItem('config')!)
setTheme(config.theme)
setRadius(config.radius)
}
// Whenever the component is mounted, update the document class list // Whenever the component is mounted, update the document class list
onMounted(() => { onMounted(() => {

5
apps/www/src/stores/config.ts
View File

@ -1,4 +1,5 @@
import { computed, ref } from 'vue' import { computed } from 'vue'
import { useSessionStorage } from '@vueuse/core'
import type { Theme } from './../lib/registry/themes' import type { Theme } from './../lib/registry/themes'
interface Config { interface Config {
@ -9,7 +10,7 @@ interface Config {
export const RADII = [0, 0.25, 0.5, 0.75, 1] export const RADII = [0, 0.25, 0.5, 0.75, 1]
export function useConfigStore() { export function useConfigStore() {
const config = ref<Config>({ const config = useSessionStorage<Config>('config', {
theme: 'zinc', theme: 'zinc',
radius: 0.5, radius: 0.5,
}) })