wad-lab 1.2.2 → 1.2.4

package/templates/vue-todo-pinia/src/components/TodoList.vue

@@ -0,0 +1,101 @@
+<script setup>
+defineProps({
+  todos: {
+    type: Array,
+    required: true
+  }
+})
+
+const emit = defineEmits(['toggle', 'patch', 'delete'])
+
+function handlePatch(todo) {
+  const newText = prompt('Update task description:', todo.text)
+  if (newText && newText.trim() !== todo.text) {
+    emit('patch', { id: todo.id, text: newText.trim() })
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="todos.length === 0" class="empty-state">
+      No todos found. Add one above!
+    </div>
+
+    <ul v-else class="todo-list">
+      <li v-for="item in todos" :key="item.id" class="todo-item">
+        <label class="todo-label">
+          <input
+            type="checkbox"
+            :checked="item.done"
+            @change="emit('toggle', item.id)"
+          />
+          <span :class="{ completed: item.done }">{{ item.text }}</span>
+        </label>
+        <div class="actions">
+          <button type="button" class="btn-patch" @click="handlePatch(item)">Edit</button>
+          <button type="button" class="btn-delete" @click="emit('delete', item.id)">Delete</button>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.todo-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.todo-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.todo-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  flex: 1;
+}
+
+.completed {
+  text-decoration: line-through;
+  color: #888;
+}
+
+.actions {
+  display: flex;
+  gap: 6px;
+}
+
+.btn-patch {
+  background: #f1f5f9;
+  border: 1px solid #cbd5e1;
+  padding: 4px 8px;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn-delete {
+  background: #fee2e2;
+  border: 1px solid #fca5a5;
+  color: #b91c1c;
+  padding: 4px 8px;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.empty-state {
+  text-align: center;
+  color: #888;
+  padding: 20px 0;
+}
+</style>

package/templates/vue-todo-pinia/src/stores/todoStore.js

@@ -37,6 +37,12 @@ export const useTodoStore = defineStore('todo', {
         item.done = !item.done
       }
     },
+    patchTodo(id, partial) {
+      const item = this.todos.find((t) => t.id === id)
+      if (item) {
+        Object.assign(item, partial)
+      }
+    },
     deleteTodo(id) {
       this.todos = this.todos.filter((t) => t.id !== id)
     },

package/templates/vue-todo-router/src/App.vue

@@ -1,14 +1,10 @@
+<script setup>
+import TodoNavBar from './components/TodoNavBar.vue'
+</script>
+
 <template>
   <div class="app-container">
-    <header class="app-header">
-      <h1>Vue Router Todo App</h1>
-      <nav class="nav">
-        <router-link to="/" class="nav-link">Task List</router-link>
-        <span class="divider">|</span>
-        <router-link to="/add" class="nav-link">Add New Task</router-link>
-      </nav>
-    </header>
-
+    <TodoNavBar />
     <main class="main-content">
       <router-view />
     </main>
@@ -22,33 +18,6 @@
   font-family: Arial, sans-serif;
 }
 
-.app-header {
-  border-bottom: 2px solid #333;
-  padding-bottom: 15px;
-  margin-bottom: 20px;
-}
-
-.nav {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.nav-link {
-  text-decoration: none;
-  color: #2980b9;
-  font-weight: bold;
-}
-
-.nav-link.router-link-exact-active {
-  color: #27ae60;
-  text-decoration: underline;
-}
-
-.divider {
-  color: #aaa;
-}
-
 .main-content {
   padding: 10px 0;
 }

package/templates/vue-todo-router/src/components/TodoForm.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { ref } from 'vue'
+
+const emit = defineEmits(['submit'])
+
+const title = ref('')
+const description = ref('')
+
+function handleSubmit() {
+  if (!title.value.trim()) return
+  emit('submit', { title: title.value.trim(), description: description.value.trim() })
+  title.value = ''
+  description.value = ''
+}
+</script>
+
+<template>
+  <form @submit.prevent="handleSubmit" class="add-form">
+    <div class="form-group">
+      <label for="todo-title">Task Title:</label>
+      <input
+        id="todo-title"
+        type="text"
+        v-model="title"
+        placeholder="Enter task name..."
+        required
+      />
+    </div>
+
+    <div class="form-group">
+      <label for="todo-desc">Description (Optional):</label>
+      <textarea
+        id="todo-desc"
+        v-model="description"
+        placeholder="Add details about this task..."
+        rows="3"
+      ></textarea>
+    </div>
+
+    <button type="submit" class="btn btn-submit">Save Task</button>
+  </form>
+</template>
+
+<style scoped>
+.add-form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+label {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+input, textarea {
+  padding: 8px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.btn-submit {
+  padding: 10px;
+  background-color: #27ae60;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+}
+</style>

package/templates/vue-todo-router/src/components/TodoList.vue

@@ -0,0 +1,84 @@
+<script setup>
+defineProps({
+  todos: {
+    type: Array,
+    required: true
+  }
+})
+
+const emit = defineEmits(['toggle', 'patch', 'delete'])
+
+function handlePatch(item) {
+  const newTitle = prompt('Edit task title:', item.title)
+  if (newTitle && newTitle.trim() !== item.title) {
+    emit('patch', { id: item.id, title: newTitle.trim() })
+  }
+}
+</script>
+
+<template>
+  <ul class="task-list">
+    <li v-for="item in todos" :key="item.id" class="task-item">
+      <label class="task-label">
+        <input
+          type="checkbox"
+          :checked="item.done"
+          @change="emit('toggle', item.id)"
+        />
+        <span :class="{ completed: item.done }">{{ item.title }}</span>
+      </label>
+      <div class="actions">
+        <router-link :to="'/todo/' + item.id" class="btn btn-detail">Details</router-link>
+        <button type="button" class="btn btn-patch" @click="handlePatch(item)">Patch</button>
+        <button type="button" class="btn btn-delete" @click="emit('delete', item.id)">Delete</button>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.task-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.task-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.task-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  flex: 1;
+}
+
+.completed {
+  text-decoration: line-through;
+  color: #888;
+}
+
+.actions {
+  display: flex;
+  gap: 6px;
+}
+
+.btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  text-decoration: none;
+}
+
+.btn-detail { background: #e0f2fe; color: #0369a1; }
+.btn-patch { background: #f3e8ff; color: #7e22ce; }
+.btn-delete { background: #fee2e2; color: #b91c1c; }
+</style>

package/templates/vue-todo-router/src/components/TodoNavBar.vue

@@ -0,0 +1,47 @@
+<script setup>
+</script>
+
+<template>
+  <header class="app-header">
+    <h1>Vue Router Todo App</h1>
+    <nav class="nav">
+      <router-link to="/" class="nav-link">Task List</router-link>
+      <span class="divider">|</span>
+      <router-link to="/add" class="nav-link">Add New Task</router-link>
+    </nav>
+  </header>
+</template>
+
+<style scoped>
+.app-header {
+  border-bottom: 2px solid #333;
+  padding-bottom: 15px;
+  margin-bottom: 20px;
+}
+
+.app-header h1 {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.nav {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.nav-link {
+  text-decoration: none;
+  color: #2980b9;
+  font-weight: bold;
+}
+
+.nav-link.router-link-exact-active {
+  color: #27ae60;
+  text-decoration: underline;
+}
+
+.divider {
+  color: #aaa;
+}
+</style>

package/templates/vue-todo-router/src/data/todoState.js

@@ -25,6 +25,13 @@ export const todoState = reactive({
     }
   },
 
+  patchTodo(id, partial) {
+    const item = this.todos.find((t) => t.id === Number(id))
+    if (item) {
+      Object.assign(item, partial)
+    }
+  },
+
   deleteTodo(id) {
     const index = this.todos.findIndex((t) => t.id === Number(id))
     if (index !== -1) {

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

@@ -1,14 +1,12 @@
 <script setup>
-import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { todoState } from '../data/todoState'
+import TodoForm from '../components/TodoForm.vue'
 
 const router = useRouter()
-const title = ref('')
-const description = ref('')
 
-function handleSubmit() {
-  todoState.addTodo(title.value, description.value)
+function handleSubmit({ title, description }) {
+  todoState.addTodo(title, description)
   router.push('/')
 }
 </script>
@@ -16,70 +14,13 @@ function handleSubmit() {
 <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>
+    <TodoForm @submit="handleSubmit" />
   </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;
+h2 {
+  font-size: 20px;
+  margin-bottom: 12px;
 }
 </style>

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

@@ -16,6 +16,14 @@ function handleDelete() {
     router.push('/')
   }
 }
+
+function handlePatch() {
+  if (!todo.value) return
+  const newDesc = prompt('Update task description:', todo.value.description)
+  if (newDesc !== null) {
+    todoState.patchTodo(todo.value.id, { description: newDesc.trim() })
+  }
+}
 </script>
 
 <template>
@@ -24,12 +32,13 @@ function handleDelete() {
     <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>
+    <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-patch" @click="handlePatch">Patch Description</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>
@@ -70,6 +79,11 @@ function handleDelete() {
   color: white;
 }
 
+.btn-patch {
+  background-color: #8e44ad;
+  color: white;
+}
+
 .btn-delete {
   background-color: #e74c3c;
   color: white;

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

@@ -1,77 +1,35 @@
 <script setup>
 import { todoState } from '../data/todoState'
+import TodoList from '../components/TodoList.vue'
+
+function handleToggle(id) {
+  todoState.toggleTodo(id)
+}
+
+function handlePatch({ id, title }) {
+  todoState.patchTodo(id, { title })
+}
+
+function handleDelete(id) {
+  todoState.deleteTodo(id)
+}
 </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>
+    <TodoList
+      :todos="todoState.todos"
+      @toggle="handleToggle"
+      @patch="handlePatch"
+      @delete="handleDelete"
+    />
   </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;
+h2 {
+  font-size: 20px;
+  margin-bottom: 12px;
 }
 </style>