github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-26 04:48:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Move app.vue to script[setup] (#18289)

Browse Source
This commit is contained in:
Rijk van Zanten
2023-04-21 15:50:57 -04:00
committed by GitHub
parent 8c8daa89ff
commit 5e1ca0bf3d
1 changed files with 65 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
app/src/app.vue
View File

@@ -20,86 +20,79 @@
</div>
</template>
<script lang="ts">
import { useI18n } from 'vue-i18n';
import { defineComponent, toRefs, watch, computed, onMounted, onUnmounted, StyleValue } from 'vue';
import { useAppStore } from '@/stores/app';
import { useUserStore } from '@/stores/user';
import { useServerStore } from '@/stores/server';
import { startIdleTracking, stopIdleTracking } from './idle';
<script lang="ts" setup>
import { useSystem } from '@/composables/use-system';
import { useAppStore } from '@/stores/app';
import { useServerStore } from '@/stores/server';
import { useUserStore } from '@/stores/user';
import { setFavicon } from '@/utils/set-favicon';
import { User } from '@directus/types';
import { StyleValue, computed, onMounted, onUnmounted, toRefs, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { startIdleTracking, stopIdleTracking } from './idle';
export default defineComponent({
setup() {
const { t } = useI18n();
const { t } = useI18n();
const appStore = useAppStore();
const userStore = useUserStore();
const serverStore = useServerStore();
const appStore = useAppStore();
const userStore = useUserStore();
const serverStore = useServerStore();
const { hydrating } = toRefs(appStore);
const { hydrating } = toRefs(appStore);
const brandStyle = computed(() => {
return {
'--brand': serverStore.info?.project?.project_color || 'var(--primary)',
} as StyleValue;
});
onMounted(() => startIdleTracking());
onUnmounted(() => stopIdleTracking());
watch(
[() => serverStore.info?.project?.project_color ?? null, () => serverStore.info?.project?.project_logo ?? null],
() => {
const hasCustomLogo = !!serverStore.info?.project?.project_logo;
setFavicon(serverStore.info?.project?.project_color, hasCustomLogo);
},
{ immediate: true }
);
watch(
() => (userStore.currentUser as User)?.theme,
(theme) => {
document.body.classList.remove('dark');
document.body.classList.remove('light');
document.body.classList.remove('auto');
if (theme) {
document.body.classList.add(theme);
document
.querySelector('head meta[name="theme-color"]')
?.setAttribute('content', theme === 'light' ? '#ffffff' : '#263238');
} else {
// Default to auto mode
document.body.classList.add('auto');
}
},
{ immediate: true }
);
watch(
() => serverStore.info?.project?.project_name,
(projectName) => {
document.title = projectName || 'Directus';
},
{ immediate: true }
);
const customCSS = computed(() => {
return serverStore.info?.project?.custom_css || '';
});
const error = computed(() => appStore.error);
useSystem();
return { t, hydrating, brandStyle, error, customCSS };
},
const brandStyle = computed(() => {
return {
'--brand': serverStore.info?.project?.project_color || 'var(--primary)',
} as StyleValue;
});
onMounted(() => startIdleTracking());
onUnmounted(() => stopIdleTracking());
watch(
[() => serverStore.info?.project?.project_color ?? null, () => serverStore.info?.project?.project_logo ?? null],
() => {
const hasCustomLogo = !!serverStore.info?.project?.project_logo;
setFavicon(serverStore.info?.project?.project_color, hasCustomLogo);
},
{ immediate: true }
);
watch(
() => (userStore.currentUser as User)?.theme,
(theme) => {
document.body.classList.remove('dark');
document.body.classList.remove('light');
document.body.classList.remove('auto');
if (theme) {
document.body.classList.add(theme);
document
.querySelector('head meta[name="theme-color"]')
?.setAttribute('content', theme === 'light' ? '#ffffff' : '#263238');
} else {
// Default to auto mode
document.body.classList.add('auto');
}
},
{ immediate: true }
);
watch(
() => serverStore.info?.project?.project_name,
(projectName) => {
document.title = projectName || 'Directus';
},
{ immediate: true }
);
const customCSS = computed(() => {
return serverStore.info?.project?.custom_css || '';
});
const error = computed(() => appStore.error);
useSystem();
</script>
<style lang="scss" scoped>