wad-lab 1.0.5 → 1.0.6

package/templates/vue-todo-router/src/views/AddTodoView.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { todoState } from '../data/todoState'
+
+const router = useRouter()
+const title = ref('')
+const description = ref('')
+
+function handleSubmit() {
+  todoState.addTodo(title.value, description.value)
+  router.push('/')
+}
+</script>
+
+<template>
+  <div>
+    <h2>Add New Task</h2>
+    <form @submit.prevent="handleSubmit" class="add-form">
+      <div class="form-group">
+        <label for="title">Task Title:</label>
+        <input id="title" type="text" v-model="title" required placeholder="Enter task title" />
+      </div>
+
+      <div class="form-group">
+        <label for="desc">Description:</label>
+        <textarea id="desc" v-model="description" rows="3" placeholder="Enter optional details"></textarea>
+      </div>
+
+      <div class="form-actions">
+        <button type="submit" class="btn btn-save">Save Task</button>
+        <router-link to="/" class="btn btn-cancel">Cancel</router-link>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.add-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 400px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+input, textarea {
+  padding: 8px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.form-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.btn {
+  padding: 8px 16px;
+  border-radius: 4px;
+  text-decoration: none;
+  font-size: 14px;
+  cursor: pointer;
+  border: none;
+}
+
+.btn-save {
+  background-color: #27ae60;
+  color: white;
+}
+
+.btn-cancel {
+  background-color: #95a5a6;
+  color: white;
+  display: inline-flex;
+  align-items: center;
+}
+</style>

package/templates/vue-todo-router/src/views/TodoDetailView.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { todoState } from '../data/todoState'
+
+const route = useRoute()
+const router = useRouter()
+
+const todo = computed(() => {
+  return todoState.getTodoById(route.params.id)
+})
+
+function handleDelete() {
+  if (todo.value) {
+    todoState.deleteTodo(todo.value.id)
+    router.push('/')
+  }
+}
+</script>
+
+<template>
+  <div v-if="todo" class="detail-card">
+    <h2>Task Details</h2>
+    <p><strong>ID:</strong> {{ todo.id }}</p>
+    <p><strong>Title:</strong> {{ todo.title }}</p>
+    <p><strong>Description:</strong> {{ todo.description || 'No description provided' }}</p>
+    <p><strong>Status:</strong> {{ todo.done ? 'Completed ✅' : 'Pending ⏳' }}</p>
+
+    <div class="actions">
+      <button type="button" class="btn btn-toggle" @click="todoState.toggleTodo(todo.id)">
+        Mark as {{ todo.done ? 'Pending' : 'Completed' }}
+      </button>
+      <button type="button" class="btn btn-delete" @click="handleDelete">Delete</button>
+      <router-link to="/" class="btn btn-back">Back to List</router-link>
+    </div>
+  </div>
+  <div v-else class="not-found">
+    <p>Task not found.</p>
+    <router-link to="/">Return to List</router-link>
+  </div>
+</template>
+
+<style scoped>
+.detail-card {
+  max-width: 450px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 20px;
+  background-color: #fafafa;
+}
+
+.actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  padding: 8px 14px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+.btn-toggle {
+  background-color: #2980b9;
+  color: white;
+}
+
+.btn-delete {
+  background-color: #e74c3c;
+  color: white;
+}
+
+.btn-back {
+  background-color: #7f8c8d;
+  color: white;
+  display: inline-flex;
+  align-items: center;
+}
+
+.not-found {
+  padding: 20px;
+  text-align: center;
+}
+</style>

package/templates/vue-todo-router/src/views/TodoListView.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { todoState } from '../data/todoState'
+</script>
+
+<template>
+  <div>
+    <h2>Task List</h2>
+    <ul class="task-list">
+      <li v-for="item in todoState.todos" :key="item.id" class="task-item">
+        <label>
+          <input
+            type="checkbox"
+            :checked="item.done"
+            @change="todoState.toggleTodo(item.id)"
+          />
+          <span :class="{ completed: item.done }">{{ item.title }}</span>
+        </label>
+        <div class="actions">
+          <router-link :to="'/todo/' + item.id" class="btn-link">View Details</router-link>
+          <button type="button" class="btn-del" @click="todoState.deleteTodo(item.id)">Delete</button>
+        </div>
+      </li>
+    </ul>
+
+    <div v-if="todoState.todos.length === 0" class="empty">
+      No tasks available. Click "Add Task" to create one.
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.task-list {
+  list-style: none;
+  padding: 0;
+  margin: 15px 0;
+}
+
+.task-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid #ddd;
+}
+
+.completed {
+  text-decoration: line-through;
+  color: #888;
+}
+
+.actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.btn-link {
+  color: #2980b9;
+  text-decoration: none;
+  font-size: 13px;
+}
+
+.btn-del {
+  background-color: #e74c3c;
+  color: white;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.empty {
+  text-align: center;
+  color: #888;
+  padding: 20px 0;
+}
+</style>

package/templates/vue-todo-router/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()]
+})