This commit is contained in:
jxxghp
2023-07-21 11:12:52 +08:00
parent 7da9f53043
commit 5eebe087b2
3 changed files with 39 additions and 42 deletions

View File

@@ -1,26 +1,20 @@
<script setup lang="ts">
interface Props {
errorCode?: string
errorTitle?: string
errorDescription?: string
errorCode?: string;
errorTitle?: string;
errorDescription?: string;
}
const props = defineProps<Props>()
const props = defineProps<Props>();
</script>
<template>
<div class="text-center mb-4">
<!-- 👉 Title and subtitle -->
<h1
v-if="props.errorCode"
class="text-h1 font-weight-medium"
>
<h1 v-if="props.errorCode" class="text-h1 font-weight-medium">
{{ props.errorCode }}
</h1>
<h5
v-if="props.errorTitle"
class="text-h5 font-weight-medium mb-3"
>
<h5 v-if="props.errorTitle" class="text-h5 font-weight-medium mb-3">
{{ props.errorTitle }}
</h5>
<p v-if="props.errorDescription">

View File

@@ -1,25 +1,18 @@
<script lang="ts" setup>
interface Props {
menuList?: unknown[]
itemProps?: boolean
menuList?: unknown[];
itemProps?: boolean;
}
const props = defineProps<Props>()
const props = defineProps<Props>();
</script>
<template>
<IconBtn>
<VIcon icon="mdi-dots-vertical" />
<VMenu
v-if="props.menuList"
activator="parent"
close-on-content-click
>
<VList
:items="props.menuList"
:item-props="props.itemProps"
/>
<VMenu v-if="props.menuList" activator="parent" close-on-content-click>
<VList :items="props.menuList" :item-props="props.itemProps" />
</VMenu>
</IconBtn>
</template>

View File

@@ -1,35 +1,45 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useTheme } from 'vuetify'
import type { ThemeSwitcherTheme } from '@layouts/types'
import type { ThemeSwitcherTheme } from "@layouts/types";
import { ref, watch } from "vue";
import { useTheme } from "vuetify";
const props = defineProps<{
themes: ThemeSwitcherTheme[]
}>()
themes: ThemeSwitcherTheme[];
}>();
const { name: themeName, global: globalTheme } = useTheme()
const { name: themeName, global: globalTheme } = useTheme();
const savedTheme = ref(localStorage.getItem('theme') ?? themeName)
const savedTheme = ref(localStorage.getItem("theme") ?? themeName);
const { state: currentThemeName, next: getNextThemeName, index: currentThemeIndex } = useCycleList(props.themes.map(t => t.name), { initialValue: savedTheme.value })
const {
state: currentThemeName,
next: getNextThemeName,
index: currentThemeIndex,
} = useCycleList(
props.themes.map((t) => t.name),
{ initialValue: savedTheme.value }
);
const changeTheme = () => {
const nextTheme = getNextThemeName()
const nextTheme = getNextThemeName();
globalTheme.name.value = nextTheme
savedTheme.value = nextTheme
localStorage.setItem('theme', nextTheme)
}
globalTheme.name.value = nextTheme;
savedTheme.value = nextTheme;
localStorage.setItem("theme", nextTheme);
};
// Update icon if theme is changed from other sources
watch(() => globalTheme.name.value, val => {
currentThemeName.value = val
})
watch(
() => globalTheme.name.value,
(val) => {
currentThemeName.value = val;
}
);
// Apply saved theme on page load
onMounted(() => {
globalTheme.name.value = savedTheme.value
})
globalTheme.name.value = savedTheme.value;
});
</script>
<template>