wad-lab 1.0.4 → 1.0.6

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

@@ -0,0 +1,179 @@
+<script setup>
+import { ref } from 'vue'
+import { useTodoStore } from './stores/todoStore'
+
+const store = useTodoStore()
+const newTodoText = ref('')
+
+function handleAdd() {
+  store.addTodo(newTodoText.value)
+  newTodoText.value = ''
+}
+</script>
+
+<template>
+  <div class="todo-app">
+    <h1>Todo List (Pinia)</h1>
+
+    <form @submit.prevent="handleAdd" class="add-form">
+      <input
+        type="text"
+        v-model="newTodoText"
+        placeholder="What needs to be done?"
+        required
+      />
+      <button type="submit" class="btn btn-add">Add</button>
+    </form>
+
+    <div class="filters">
+      <button
+        type="button"
+        class="filter-btn"
+        :class="{ active: store.filter === 'all' }"
+        @click="store.setFilter('all')"
+      >
+        All ({{ store.totalCount }})
+      </button>
+      <button
+        type="button"
+        class="filter-btn"
+        :class="{ active: store.filter === 'active' }"
+        @click="store.setFilter('active')"
+      >
+        Pending ({{ store.pendingCount }})
+      </button>
+      <button
+        type="button"
+        class="filter-btn"
+        :class="{ active: store.filter === 'completed' }"
+        @click="store.setFilter('completed')"
+      >
+        Completed ({{ store.completedCount }})
+      </button>
+    </div>
+
+    <ul class="todo-list">
+      <li v-for="item in store.filteredTodos" :key="item.id" class="todo-item">
+        <label>
+          <input
+            type="checkbox"
+            :checked="item.done"
+            @change="store.toggleTodo(item.id)"
+          />
+          <span :class="{ completed: item.done }">{{ item.text }}</span>
+        </label>
+        <button
+          type="button"
+          class="btn-delete"
+          @click="store.deleteTodo(item.id)"
+        >
+          ✕
+        </button>
+      </li>
+    </ul>
+
+    <div v-if="store.todos.length === 0" class="empty-state">
+      No todos found. Add one above!
+    </div>
+
+    <div class="footer-actions" v-if="store.completedCount > 0">
+      <button type="button" class="btn btn-clear" @click="store.clearCompleted()">
+        Clear Completed
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.todo-app {
+  max-width: 450px;
+  margin: 30px auto;
+  font-family: Arial, sans-serif;
+}
+
+.add-form {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 15px;
+}
+
+.add-form input {
+  flex: 1;
+  padding: 8px;
+  font-size: 14px;
+}
+
+.btn {
+  padding: 8px 16px;
+  cursor: pointer;
+}
+
+.btn-add {
+  background-color: #27ae60;
+  color: white;
+  border: none;
+}
+
+.filters {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 15px;
+}
+
+.filter-btn {
+  padding: 5px 10px;
+  background-color: #eee;
+  border: 1px solid #ccc;
+  cursor: pointer;
+}
+
+.filter-btn.active {
+  background-color: #2980b9;
+  color: white;
+  border-color: #2980b9;
+}
+
+.todo-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.todo-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.completed {
+  text-decoration: line-through;
+  color: #888;
+}
+
+.btn-delete {
+  background: none;
+  border: none;
+  color: #e74c3c;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.empty-state {
+  text-align: center;
+  color: #888;
+  padding: 20px 0;
+}
+
+.footer-actions {
+  margin-top: 15px;
+  text-align: right;
+}
+
+.btn-clear {
+  background-color: #e74c3c;
+  color: white;
+  border: none;
+}
+</style>

package/templates/vue-todo-pinia/src/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(createPinia())
+app.mount('#app')

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

@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia'
+
+export const useTodoStore = defineStore('todo', {
+  state: () => ({
+    todos: [
+      { id: 1, text: 'Study Web Application Development', done: false },
+      { id: 2, text: 'Complete Lab Assignment', done: true }
+    ],
+    filter: 'all'
+  }),
+  getters: {
+    filteredTodos: (state) => {
+      if (state.filter === 'active') {
+        return state.todos.filter((t) => !t.done)
+      }
+      if (state.filter === 'completed') {
+        return state.todos.filter((t) => t.done)
+      }
+      return state.todos
+    },
+    totalCount: (state) => state.todos.length,
+    pendingCount: (state) => state.todos.filter((t) => !t.done).length,
+    completedCount: (state) => state.todos.filter((t) => t.done).length
+  },
+  actions: {
+    addTodo(text) {
+      if (!text || !text.trim()) return
+      this.todos.push({
+        id: Date.now(),
+        text: text.trim(),
+        done: false
+      })
+    },
+    toggleTodo(id) {
+      const item = this.todos.find((t) => t.id === id)
+      if (item) {
+        item.done = !item.done
+      }
+    },
+    deleteTodo(id) {
+      this.todos = this.todos.filter((t) => t.id !== id)
+    },
+    setFilter(filterName) {
+      this.filter = filterName
+    },
+    clearCompleted() {
+      this.todos = this.todos.filter((t) => !t.done)
+    }
+  }
+})

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

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

package/templates/vue-todo-router/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vue Router Todo App</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+</body>
+</html>

package/templates/vue-todo-router/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "vue-todo-router",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.44",
+    "vue-router": "^5.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.10",
+    "vite": "^8.3.4"
+  }
+}

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

@@ -0,0 +1,55 @@
+<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>
+
+    <main class="main-content">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  max-width: 500px;
+  margin: 30px auto;
+  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;
+}
+</style>

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

@@ -0,0 +1,38 @@
+import { reactive } from 'vue'
+
+export const todoState = reactive({
+  todos: [
+    { id: 1, title: 'Install Node.js & Vue CLI', description: 'Ensure the environment is ready for WAD development', done: true },
+    { id: 2, title: 'Build Vue Router Navigation', description: 'Implement multi-view routing and parameter handling', done: false },
+    { id: 3, title: 'Prepare for Lab Exam', description: 'Review state management and component communications', done: false }
+  ],
+
+  addTodo(title, description) {
+    if (!title || !title.trim()) return
+    const newId = this.todos.length > 0 ? Math.max(...this.todos.map((t) => t.id)) + 1 : 1
+    this.todos.push({
+      id: newId,
+      title: title.trim(),
+      description: description ? description.trim() : '',
+      done: false
+    })
+  },
+
+  toggleTodo(id) {
+    const item = this.todos.find((t) => t.id === Number(id))
+    if (item) {
+      item.done = !item.done
+    }
+  },
+
+  deleteTodo(id) {
+    const index = this.todos.findIndex((t) => t.id === Number(id))
+    if (index !== -1) {
+      this.todos.splice(index, 1)
+    }
+  },
+
+  getTodoById(id) {
+    return this.todos.find((t) => t.id === Number(id))
+  }
+})

package/templates/vue-todo-router/src/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')

package/templates/vue-todo-router/src/router/index.js

@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import TodoListView from '../views/TodoListView.vue'
+import AddTodoView from '../views/AddTodoView.vue'
+import TodoDetailView from '../views/TodoDetailView.vue'
+
+const routes = [
+  { path: '/', name: 'TodoList', component: TodoListView },
+  { path: '/add', name: 'AddTodo', component: AddTodoView },
+  { path: '/todo/:id', name: 'TodoDetail', component: TodoDetailView, props: true }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

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()]
+})