49 lines
1.5 KiB
Vue
49 lines
1.5 KiB
Vue
<template>
|
|
<main class="container page-padding text-center">
|
|
<h1>Welcome to Valerie UI App</h1>
|
|
<p class="mb-3">This is the main index page.</p>
|
|
|
|
<!-- The ExampleComponent is not provided, so this section is a placeholder -->
|
|
<div v-if="todos.length" class="card">
|
|
<div class="card-header">
|
|
<h3>Sample Todos (from IndexPage data)</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="item-list">
|
|
<li v-for="todo in todos" :key="todo.id" class="list-item">
|
|
<div class="list-item-content">
|
|
<span class="item-text">{{ todo.id }}: {{ todo.content }}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<p class="mt-2">Total count from meta: {{ meta.totalCount }}</p>
|
|
</div>
|
|
</div>
|
|
<p v-else>No todos to display.</p>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import type { Todo, Meta } from '@/components/models'; // Adjusted path if models.ts is in the same directory
|
|
// import ExampleComponent from 'components/ExampleComponent.vue'; // This component is not provided for conversion
|
|
|
|
const todos = ref<Todo[]>([
|
|
{ id: 1, content: 'ct1' },
|
|
{ id: 2, content: 'ct2' },
|
|
{ id: 3, content: 'ct3' },
|
|
{ id: 4, content: 'ct4' },
|
|
{ id: 5, content: 'ct5' },
|
|
]);
|
|
|
|
const meta = ref<Meta>({
|
|
totalCount: 1200,
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-padding { padding: 1rem; }
|
|
.mb-3 { margin-bottom: 1.5rem; }
|
|
.mt-2 { margin-top: 1rem; }
|
|
.text-center { text-align: center; }
|
|
</style> |