wad-lab 1.2.2 → 1.2.4

package/templates/vue-memory-game/src/stores/memoryStore.js

@@ -2,61 +2,56 @@ import { defineStore } from 'pinia'
 
 export const useMemoryStore = defineStore('memory', {
   state: () => ({
-    symbols: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊'],
+    symbols: ['A', 'B', 'C', 'D', 'E', 'F'],
     cards: [],
-    flippedCards: [],
+    selectedIndices: [],
     moves: 0,
-    matches: 0,
-    isLocked: false
+    matchedCount: 0
   }),
   getters: {
-    isGameOver: (state) => state.matches === state.symbols.length
+    isGameWon: (state) => state.matchedCount === state.symbols.length
   },
   actions: {
     initGame() {
-      const duplicated = [...this.symbols, ...this.symbols]
-      duplicated.sort(() => 0.5 - Math.random())
-
-      this.cards = duplicated.map((symbol, idx) => ({
-        id: idx,
-        symbol: symbol,
-        isFlipped: false,
-        isMatched: false
-      }))
-
-      this.flippedCards = []
+      const deck = [...this.symbols, ...this.symbols]
+        .sort(() => Math.random() - 0.5)
+        .map((sym, id) => ({
+          id,
+          symbol: sym,
+          flipped: false,
+          matched: false
+        }))
+      this.cards = deck
+      this.selectedIndices = []
       this.moves = 0
-      this.matches = 0
-      this.isLocked = false
+      this.matchedCount = 0
     },
+    flipCard(index) {
+      const card = this.cards[index]
+      if (card.flipped || card.matched || this.selectedIndices.length === 2) {
+        return
+      }
 
-    flipCard(card) {
-      if (this.isLocked || card.isFlipped || card.isMatched) return
-
-      card.isFlipped = true
-      this.flippedCards.push(card)
+      card.flipped = true
+      this.selectedIndices.push(index)
 
-      if (this.flippedCards.length === 2) {
+      if (this.selectedIndices.length === 2) {
         this.moves++
         this.checkMatch()
       }
     },
-
     checkMatch() {
-      const [card1, card2] = this.flippedCards
-
-      if (card1.symbol === card2.symbol) {
-        card1.isMatched = true
-        card2.isMatched = true
-        this.matches++
-        this.flippedCards = []
+      const [first, second] = this.selectedIndices
+      if (this.cards[first].symbol === this.cards[second].symbol) {
+        this.cards[first].matched = true
+        this.cards[second].matched = true
+        this.matchedCount++
+        this.selectedIndices = []
       } else {
-        this.isLocked = true
         setTimeout(() => {
-          card1.isFlipped = false
-          card2.isFlipped = false
-          this.flippedCards = []
-          this.isLocked = false
+          this.cards[first].flipped = false
+          this.cards[second].flipped = false
+          this.selectedIndices = []
         }, 800)
       }
     }

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

@@ -1,20 +1,30 @@
 <script setup>
-import { RouterLink, RouterView } from 'vue-router'
+import NavBar from './components/NavBar.vue'
 </script>
 
 <template>
-  <h2>Vue Router CRUD</h2>
-  <br>
-
-  <nav>
-    <RouterLink to="/">All Items</RouterLink>
-    <br><br>
-    <RouterLink to="/add">Add New Item</RouterLink>
-  </nav>
+  <div class="app-shell">
+    <NavBar />
+    <main class="main-body">
+      <router-view />
+    </main>
+  </div>
+</template>
 
-  <br>
-  <hr>
-  <br>
+<style>
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-color: #f8fafc;
+  color: #334155;
+}
+</style>
 
-  <RouterView />
-</template>
+<style scoped>
+.app-shell {
+  max-width: 800px;
+  margin: 30px auto;
+  padding: 0 16px;
+}
+</style>

package/templates/vue-router/src/components/AboutCard.vue

@@ -0,0 +1,38 @@
+<script setup>
+</script>
+
+<template>
+  <div class="about-card">
+    <h3>Routing Overview</h3>
+    <p>This module demonstrates declarative nested route views using <code>vue-router</code>. Items can be navigated, viewed by ID, edited, and patched.</p>
+  </div>
+</template>
+
+<style scoped>
+.about-card {
+  background: #f8fafc;
+  border: 1px dashed #cbd5e1;
+  border-radius: 8px;
+  padding: 14px 16px;
+  margin-top: 20px;
+}
+
+.about-card h3 {
+  font-size: 14px;
+  margin-bottom: 4px;
+  color: #334155;
+}
+
+.about-card p {
+  font-size: 12px;
+  color: #64748b;
+  margin: 0;
+  line-height: 1.5;
+}
+
+code {
+  background: #e2e8f0;
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+</style>

package/templates/vue-router/src/components/HomeHero.vue

@@ -0,0 +1,75 @@
+<script setup>
+defineProps({
+  totalItems: { type: Number, default: 0 },
+  totalValue: { type: Number, default: 0 }
+})
+</script>
+
+<template>
+  <div class="hero-card">
+    <div class="hero-text">
+      <h2>Item Inventory Manager</h2>
+      <p>Clean Vue 3 Client Routing Architecture with Child Views</p>
+    </div>
+    <div class="hero-stats">
+      <div class="stat">
+        <span class="label">Total Items</span>
+        <strong>{{ totalItems }}</strong>
+      </div>
+      <div class="stat">
+        <span class="label">Total Inventory Value</span>
+        <strong>${{ Number(totalValue).toFixed(2) }}</strong>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hero-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.hero-text h2 {
+  font-size: 20px;
+  color: #0f172a;
+  margin-bottom: 4px;
+}
+
+.hero-text p {
+  color: #64748b;
+  font-size: 13px;
+  margin: 0;
+}
+
+.hero-stats {
+  display: flex;
+  gap: 20px;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.label {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: #64748b;
+  font-weight: 600;
+}
+
+.stat strong {
+  font-size: 20px;
+  color: #0284c7;
+}
+</style>

package/templates/vue-router/src/components/NavBar.vue

@@ -0,0 +1,54 @@
+<script setup>
+</script>
+
+<template>
+  <header class="navbar">
+    <div class="brand">
+      <h2>Vue Router App</h2>
+    </div>
+    <nav class="nav-links">
+      <router-link to="/items" class="nav-link" exact-active-class="active">All Items</router-link>
+      <router-link to="/items/add" class="nav-link" active-class="active">Add New Item</router-link>
+    </nav>
+  </header>
+</template>
+
+<style scoped>
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #1e293b;
+  color: #fff;
+  padding: 12px 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.brand h2 {
+  font-size: 18px;
+  margin: 0;
+}
+
+.nav-links {
+  display: flex;
+  gap: 12px;
+}
+
+.nav-link {
+  color: #cbd5e1;
+  text-decoration: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.nav-link:hover {
+  background: #334155;
+}
+
+.nav-link.active {
+  background: #0284c7;
+  color: #fff;
+}
+</style>

package/templates/vue-router/src/views/ItemsLayout.vue

@@ -1,11 +1,19 @@
+<script setup>
+import { computed } from 'vue'
+import { items } from '../data/items'
+import HomeHero from '../components/HomeHero.vue'
+import AboutCard from '../components/AboutCard.vue'
+
+const totalItems = computed(() => items.value.length)
+const totalValue = computed(() =>
+  items.value.reduce((sum, item) => sum + Number(item.price || 0), 0)
+)
+</script>
+
 <template>
-  <h1>Items Application</h1>
-  <nav>
-    <router-link to="/items">Item List</router-link> | 
-    <router-link to="/items/add">Add Item</router-link>
-  </nav>
-  <br>
-  <hr>
-  <br>
-  <router-view></router-view>
+  <div>
+    <HomeHero :total-items="totalItems" :total-value="totalValue" />
+    <router-view />
+    <AboutCard />
+  </div>
 </template>

package/templates/vue-router/src/views/ListView.vue

@@ -5,25 +5,113 @@ import { items } from '../data/items'
 function deleteItem(id) {
   items.value = items.value.filter(item => item.id !== id)
 }
+
+function patchItem(item) {
+  const newPrice = prompt('Enter new price for ' + item.name + ':', item.price)
+  if (newPrice !== null && !isNaN(Number(newPrice))) {
+    item.price = Number(newPrice)
+  }
+}
 </script>
 
 <template>
-  <h3>Items List</h3>
-  <br>
-
-  <RouterLink to="/add">Add New Item</RouterLink>
-  <br><br>
-
-  <p v-if="items.length === 0">No items available.</p>
-
-  <ul v-if="items.length > 0">
-    <li v-for="item in items" :key="item.id">
-      <span>{{ item.name }} - ${{ item.price }}</span>
-      <br><br>
-      <RouterLink :to="'/item/' + item.id">View Details</RouterLink>
-      <br><br>
-      <button @click="deleteItem(item.id)">Delete</button>
-      <br><br>
-    </li>
-  </ul>
+  <div class="list-card">
+    <div class="card-header">
+      <h3>Items List</h3>
+      <RouterLink to="/items/add" class="btn btn-primary">Add New Item</RouterLink>
+    </div>
+
+    <table class="items-table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Description</th>
+          <th>Price</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="items.length === 0">
+          <td colspan="4" class="empty">No items available.</td>
+        </tr>
+        <tr v-for="item in items" :key="item.id">
+          <td><strong>{{ item.name }}</strong></td>
+          <td>{{ item.description }}</td>
+          <td>${{ Number(item.price).toFixed(2) }}</td>
+          <td class="action-cell">
+            <RouterLink :to="'/items/' + item.id" class="btn btn-sm btn-info">View</RouterLink>
+            <button type="button" class="btn btn-sm btn-patch" @click="patchItem(item)">Patch</button>
+            <button type="button" class="btn btn-sm btn-danger" @click="deleteItem(item.id)">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
+
+<style scoped>
+.list-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.card-header h3 {
+  font-size: 18px;
+  margin: 0;
+}
+
+.items-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+th, td {
+  padding: 10px;
+  border-bottom: 1px solid #f1f5f9;
+  text-align: left;
+}
+
+th {
+  background: #f8fafc;
+  color: #475569;
+}
+
+.action-cell {
+  display: flex;
+  gap: 6px;
+}
+
+.btn {
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  text-decoration: none;
+}
+
+.btn-sm {
+  padding: 4px 8px;
+}
+
+.btn-primary { background: #0284c7; color: #fff; }
+.btn-info { background: #e0f2fe; color: #0369a1; }
+.btn-patch { background: #8250df; color: #fff; }
+.btn-danger { background: #cf222e; color: #fff; }
+
+.empty {
+  text-align: center;
+  color: #94a3b8;
+  padding: 20px;
+}
+</style>

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

@@ -1,20 +1,30 @@
 <script setup>
-import { RouterLink, RouterView } from 'vue-router'
+import NavBar from './components/NavBar.vue'
 </script>
 
 <template>
-  <h2>Vue Router CRUD</h2>
-  <br>
-
-  <nav>
-    <RouterLink to="/">All Items</RouterLink>
-    <br><br>
-    <RouterLink to="/add">Add New Item</RouterLink>
-  </nav>
+  <div class="app-shell">
+    <NavBar />
+    <main class="main-body">
+      <router-view />
+    </main>
+  </div>
+</template>
 
-  <br>
-  <hr>
-  <br>
+<style>
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-color: #f8fafc;
+  color: #334155;
+}
+</style>
 
-  <RouterView />
-</template>
+<style scoped>
+.app-shell {
+  max-width: 800px;
+  margin: 30px auto;
+  padding: 0 16px;
+}
+</style>

package/templates/vue-router-pinia/src/components/ItemFormModal.vue

@@ -0,0 +1,163 @@
+<script setup>
+import { reactive, watch } from 'vue'
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  isEdit: { type: Boolean, default: false },
+  itemData: { type: Object, default: null }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+const form = reactive({
+  id: '',
+  name: '',
+  description: '',
+  price: 0
+})
+
+watch(
+  () => props.itemData,
+  (val) => {
+    if (val) {
+      form.id = val.id
+      form.name = val.name
+      form.description = val.description
+      form.price = Number(val.price)
+    } else {
+      form.id = ''
+      form.name = ''
+      form.description = ''
+      form.price = 0
+    }
+  },
+  { immediate: true }
+)
+
+function handleSubmit() {
+  if (!form.name.trim()) return
+  emit('submit', {
+    id: form.id || String(Date.now()),
+    name: form.name.trim(),
+    description: form.description.trim(),
+    price: Number(form.price)
+  })
+}
+</script>
+
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="emit('close')">
+    <div class="modal-card">
+      <div class="modal-header">
+        <h3>{{ isEdit ? 'Edit Item' : 'Add New Item' }}</h3>
+        <button type="button" class="btn-close" @click="emit('close')">x</button>
+      </div>
+
+      <form @submit.prevent="handleSubmit" class="modal-form">
+        <div class="form-group">
+          <label for="r-name">Name</label>
+          <input id="r-name" v-model="form.name" required placeholder="Item Name" />
+        </div>
+
+        <div class="form-group">
+          <label for="r-desc">Description</label>
+          <input id="r-desc" v-model="form.description" required placeholder="Item Description" />
+        </div>
+
+        <div class="form-group">
+          <label for="r-price">Price ($)</label>
+          <input id="r-price" v-model.number="form.price" type="number" step="any" min="0" required />
+        </div>
+
+        <div class="modal-actions">
+          <button type="button" class="btn btn-secondary" @click="emit('close')">Cancel</button>
+          <button type="submit" class="btn btn-primary">{{ isEdit ? 'Save Changes' : 'Create' }}</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 16px;
+}
+
+.modal-card {
+  background: #ffffff;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 440px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+  overflow: hidden;
+}
+
+.modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  font-size: 16px;
+  margin: 0;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.modal-form {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.form-group input {
+  padding: 8px 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.btn {
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-size: 13px;
+}
+
+.btn-primary { background: #0284c7; color: #fff; }
+.btn-secondary { background: #f1f5f9; color: #475569; }
+</style>