src/App.vue - dev - vdele/app

src/App.vue
95 строк3 KB
Vasilii Polshakov
last fixes for 0.0.1-alpha
02 апр 2025, 12:32
02 апр 2025, 12:32ef3d4ef
<script setup lang="ts">
import { onBeforeMount, inject, type ComputedRef, computed } from 'vue';
import router from '@/plugins/router';
import { useLocalDB } from '@/stores/db';
import FullscreenModal from '@/components/FullscreenModal.vue';
import { useAccountStore } from '@/stores/account';
import { Routes } from '@/libs/routes';
import { BaseButton } from '@/components/common/buttons/BaseButton';
import { PriceButton } from '@/components/common/buttons/PriceButton';

const accountStore = useAccountStore();

const modalStore = inject('modalStore') as {
    visible: ComputedRef<boolean>;
    showModal: () => void;
    hideModal: () => void;
};

const modalVisible = computed(() => modalStore.visible.value);

onBeforeMount(async () => {
    useLocalDB().migrate();
});

const version = APP_VERSION;
</script>

<template>
    <div class="container">
        <DevOnly>
            <div class="d-flex gap-2">
                <BaseButton mode="123" @click="(e) => { console.log(e); }">Кнопка</BaseButton>
                <PriceButton :value="3000" @click="(e) => { console.log(e); }"></PriceButton>
            </div>
        </DevOnly>
        <nav v-if="router.currentRoute.value.path !== Routes.getPath(Routes.Login)"
            class="navbar navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand">
                    <div><b>de💩moApp</b> <code>{{ version }}</code></div>
                </a>
                <div class="d-flex gap-2">
                    <div>
                        <RouterLink
                            :class="['btn', (router.currentRoute.value.path === Routes.getPath(Routes.Settings) ? 'btn-primary' : 'btn-light')]"
                            :to="{ name: Routes.Settings }">Редактировать набор данных</RouterLink>
                    </div>
                    <div>
                        <RouterLink
                            :class="['btn', (router.currentRoute.value.path === Routes.getPath(Routes.Checkout) ? 'btn-primary' : 'btn-light')]"
                            :to="{ name: Routes.Checkout }">Сформировать набор услуг</RouterLink>
                    </div>
                </div>
                <div><b>Привет,</b> <code>{{ accountStore.self.name }}</code> <b>!</b></div>
            </div>
        </nav>
        <nav v-else class="navbar navbar-light bg-light">
            <div class="container-fluid">
                <a class="navbar-brand">
                    <div><b>de💩moApp</b> <code>{{ version }}</code></div>
                </a>
            </div>
        </nav>
        <DevOnly>
            <div class="d-flex gap-2">
                <code>[debug | routes: </code>
                <RouterLink v-for="route in Object.values(Routes).filter(val => typeof val === 'string')"
                    :key="'debug-route-link-' + route" :to="{ name: route }">{{ `Go to ${route} Page` }}</RouterLink>
                <code>]</code>
            </div>
        </DevOnly>
        <router-view v-slot="{ Component }">
            <transition name="show" mode="out-in">
                <component :is="Component" />
            </transition>
        </router-view>
        <FullscreenModal v-if="modalVisible" />
    </div>
</template>

<style scoped>
.show-enter-active, .show-leave-active{
    transition: all .2s ease;
}

.show-enter-from {
    transform: translateX(1000px);
    opacity: 0;
}

.show-leave-to {
    transform: translateX(-1000px);
    opacity: 0;
}
</style>