You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
963 B
Vue
36 lines
963 B
Vue
<script setup lang="ts">
|
|
import DefaultPage from '../components/DefaultPage.vue';
|
|
import ItemList from '../components/ItemList.vue';
|
|
import { useShoppingListStore } from '../store/shoppingList';
|
|
|
|
const store = useShoppingListStore();
|
|
|
|
const tabs = [
|
|
{ name: 'open items' },
|
|
{ name: 'bought items' },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<DefaultPage :tabs="tabs" v-slot="slot" title="Shopping List">
|
|
<v-container>
|
|
<v-window v-model="slot.tab">
|
|
<v-window-item value="open-items">
|
|
<ItemList :items="store.openItems"></ItemList>
|
|
</v-window-item>
|
|
<v-window-item value="bought-items">
|
|
<ItemList :items="store.boughtItems"></ItemList>
|
|
</v-window-item>
|
|
</v-window>
|
|
<v-btn
|
|
icon="mdi-plus"
|
|
color="red"
|
|
to="/add-item"
|
|
elevation="8"
|
|
size="large"
|
|
style="position: absolute; right: 1rem; bottom: 1rem;"
|
|
/>
|
|
</v-container>
|
|
</DefaultPage>
|
|
</template>
|