wad-lab 1.2.2 → 1.2.3

package/templates/vue-library-system/src/stores/libraryStore.js

@@ -20,9 +20,34 @@ export const useLibraryStore = defineStore('library', {
     totalFines: (state) => state.borrowedRecords.reduce((sum, r) => sum + (r.fine || 0), 0)
   },
   actions: {
+    addBook(book) {
+      this.books.push({
+        id: Date.now(),
+        title: book.title.trim(),
+        author: book.author.trim(),
+        isbn: book.isbn.trim(),
+        category: book.category || 'General',
+        copies: Number(book.copies) || 1
+      })
+    },
+    updateBook(id, updated) {
+      const idx = this.books.findIndex(b => b.id === Number(id))
+      if (idx !== -1) {
+        this.books[idx] = { ...this.books[idx], ...updated }
+      }
+    },
+    patchBook(id, partial) {
+      const book = this.books.find(b => b.id === Number(id))
+      if (book) {
+        Object.assign(book, partial)
+      }
+    },
+    deleteBook(id) {
+      this.books = this.books.filter(b => b.id !== Number(id))
+    },
     registerMember(member) {
       const newMember = {
-        id: member.id || `MEM-${100 + this.members.length + 1}`,
+        id: member.id || ('MEM-' + (100 + this.members.length + 1)),
         name: member.name,
         email: member.email,
         membershipType: member.membershipType || 'Standard',

package/templates/vue-library-system/src/views/BookCatalogView.vue

@@ -1,432 +1,51 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useLibraryStore } from '../stores/libraryStore'
+import BookForm from '../components/BookForm.vue'
+import BookTable from '../components/BookTable.vue'
+import BorrowModal from '../components/BorrowModal.vue'
 
-const libraryStore = useLibraryStore()
+const store = useLibraryStore()
+const isModalOpen = ref(false)
+const selectedBook = ref(null)
 
-const searchQuery = ref('')
-const selectedCategory = ref('')
-const selectedMemberId = ref({})
-const notification = ref('')
-
-const newBook = ref({
-  title: '',
-  author: '',
-  isbn: '',
-  category: 'Computer Science',
-  copies: 1
-})
-
-const categories = ['Computer Science', 'Web Dev', 'Algorithms', 'Fiction', 'Science']
-
-const filteredBooks = computed(() => {
-  return libraryStore.books.filter((book) => {
-    const matchesSearch =
-      book.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
-      book.author.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
-      book.isbn.includes(searchQuery.value)
-    const matchesCategory =
-      !selectedCategory.value || book.category === selectedCategory.value
-    return matchesSearch && matchesCategory
-  })
-})
-
-function handleIssueBook(bookId) {
-  const memberId = selectedMemberId.value[bookId]
-  if (!memberId) {
-    notification.value = 'Please select a member before issuing.'
-    return
-  }
-  const success = libraryStore.issueBook(bookId, memberId)
-  if (success) {
-    notification.value = 'Book successfully issued!'
-    selectedMemberId.value[bookId] = ''
-  } else {
-    notification.value = 'Unable to issue book. Check copy availability.'
-  }
-  setTimeout(() => {
-    notification.value = ''
-  }, 3000)
+function handleBorrow(book) {
+  selectedBook.value = book
+  isModalOpen.value = true
 }
 
-function handleAddBook() {
-  if (!newBook.value.title || !newBook.value.author || !newBook.value.isbn) {
-    return
-  }
-  libraryStore.books.push({
-    id: Date.now(),
-    title: newBook.value.title,
-    author: newBook.value.author,
-    isbn: newBook.value.isbn,
-    category: newBook.value.category,
-    copies: Number(newBook.value.copies) || 1
-  })
-  newBook.value = {
-    title: '',
-    author: '',
-    isbn: '',
-    category: 'Computer Science',
-    copies: 1
-  }
-  notification.value = 'New book added to catalog.'
-  setTimeout(() => {
-    notification.value = ''
-  }, 3000)
+function handleConfirmBorrow({ bookId, memberId }) {
+  store.issueBook(bookId, memberId)
+  isModalOpen.value = false
 }
 </script>
 
 <template>
   <div class="catalog-page">
-    <div class="stats-bar">
-      <div class="stat-card">
-        <span class="stat-num">{{ libraryStore.books.length }}</span>
-        <span class="stat-label">Total Titles</span>
-      </div>
-      <div class="stat-card">
-        <span class="stat-num">{{ libraryStore.availableBooks.length }}</span>
-        <span class="stat-label">Available Titles</span>
-      </div>
-      <div class="stat-card">
-        <span class="stat-num">{{ libraryStore.activeLoansCount }}</span>
-        <span class="stat-label">Active Loans</span>
-      </div>
-      <div class="stat-card">
-        <span class="stat-num">${{ libraryStore.totalFines }}</span>
-        <span class="stat-label">Accrued Fines</span>
-      </div>
-    </div>
-
-    <div v-if="notification" class="alert-box">
-      {{ notification }}
-    </div>
-
-    <div class="controls-row">
-      <input
-        v-model="searchQuery"
-        type="text"
-        placeholder="Search title, author, or ISBN..."
-        class="search-input"
-      />
-      <select v-model="selectedCategory" class="filter-select">
-        <option value="">All Categories</option>
-        <option v-for="cat in categories" :key="cat" :value="cat">
-          {{ cat }}
-        </option>
-      </select>
-    </div>
-
-    <div class="table-card">
-      <h2>Book Inventory</h2>
-      <table class="data-table">
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>Title</th>
-            <th>Author</th>
-            <th>ISBN</th>
-            <th>Category</th>
-            <th>Copies</th>
-            <th>Availability</th>
-            <th>Issue Book</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="book in filteredBooks" :key="book.id">
-            <td>#{{ book.id }}</td>
-            <td class="font-bold">{{ book.title }}</td>
-            <td>{{ book.author }}</td>
-            <td><code>{{ book.isbn }}</code></td>
-            <td><span class="tag">{{ book.category }}</span></td>
-            <td>
-              <span class="copies-count" :class="{ 'zero-copies': book.copies === 0 }">
-                {{ book.copies }}
-              </span>
-            </td>
-            <td>
-              <span :class="['status-badge', book.copies > 0 ? 'in-stock' : 'out-stock']">
-                {{ book.copies > 0 ? 'In Stock' : 'Out of Stock' }}
-              </span>
-            </td>
-            <td>
-              <div class="issue-controls">
-                <select v-model="selectedMemberId[book.id]" class="member-select" :disabled="book.copies === 0">
-                  <option value="" disabled selected>Select Member</option>
-                  <option v-for="member in libraryStore.members" :key="member.id" :value="member.id">
-                    {{ member.name }} ({{ member.id }})
-                  </option>
-                </select>
-                <button
-                  class="btn-issue"
-                  :disabled="book.copies === 0 || !selectedMemberId[book.id]"
-                  @click="handleIssueBook(book.id)"
-                >
-                  Issue
-                </button>
-              </div>
-            </td>
-          </tr>
-          <tr v-if="filteredBooks.length === 0">
-            <td colspan="8" class="text-center">No books match your criteria.</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <div class="form-card">
-      <h3>Add New Book to Inventory</h3>
-      <form class="add-form" @submit.prevent="handleAddBook">
-        <div class="form-group">
-          <label>Book Title</label>
-          <input v-model="newBook.title" type="text" required placeholder="e.g. Design Patterns" />
-        </div>
-        <div class="form-group">
-          <label>Author</label>
-          <input v-model="newBook.author" type="text" required placeholder="e.g. Gang of Four" />
-        </div>
-        <div class="form-group">
-          <label>ISBN</label>
-          <input v-model="newBook.isbn" type="text" required placeholder="e.g. 978-0201633610" />
-        </div>
-        <div class="form-group">
-          <label>Category</label>
-          <select v-model="newBook.category">
-            <option v-for="cat in categories" :key="cat" :value="cat">{{ cat }}</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label>Copies</label>
-          <input v-model.number="newBook.copies" type="number" min="1" required />
-        </div>
-        <button type="submit" class="btn-submit">Add Book</button>
-      </form>
-    </div>
+    <h2>Book Catalog & Inventory</h2>
+
+    <BookForm @submit-book="store.addBook" />
+
+    <BookTable
+      :books="store.books"
+      @borrow="handleBorrow"
+      @patch="({ id, copies }) => store.patchBook(id, { copies })"
+      @delete="(id) => store.deleteBook(id)"
+    />
+
+    <BorrowModal
+      :show="isModalOpen"
+      :book="selectedBook"
+      :members="store.members"
+      @close="isModalOpen = false"
+      @confirm="handleConfirmBorrow"
+    />
   </div>
 </template>
 
 <style scoped>
-.catalog-page {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.stats-bar {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
-  gap: 15px;
-}
-
-.stat-card {
-  background: white;
-  padding: 16px;
-  border-radius: 6px;
-  border: 1px solid #e2e8f0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.stat-num {
-  font-size: 24px;
-  font-weight: 700;
-  color: #1e293b;
-}
-
-.stat-label {
-  font-size: 13px;
-  color: #64748b;
-  margin-top: 4px;
-}
-
-.alert-box {
-  background-color: #e0f2fe;
-  color: #0369a1;
-  border: 1px solid #bae6fd;
-  padding: 12px 16px;
-  border-radius: 6px;
-  font-size: 14px;
-}
-
-.controls-row {
-  display: flex;
-  gap: 12px;
-}
-
-.search-input {
-  flex: 1;
-  padding: 8px 12px;
-  border: 1px solid #cbd5e1;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.filter-select {
-  padding: 8px 12px;
-  border: 1px solid #cbd5e1;
-  border-radius: 4px;
-  font-size: 14px;
-  background-color: white;
-}
-
-.table-card {
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
-  padding: 20px;
-  overflow-x: auto;
-}
-
-.table-card h2 {
-  margin: 0 0 16px 0;
-  font-size: 18px;
-  color: #1e293b;
-}
-
-.data-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-  text-align: left;
-}
-
-.data-table th,
-.data-table td {
-  padding: 10px 12px;
-  border-bottom: 1px solid #e2e8f0;
-}
-
-.data-table th {
-  background-color: #f8fafc;
-  color: #475569;
-  font-weight: 600;
-}
-
-.font-bold {
-  font-weight: 600;
-}
-
-.tag {
-  background-color: #f1f5f9;
-  color: #475569;
-  padding: 3px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-.copies-count {
-  font-weight: 600;
-  color: #0f172a;
-}
-
-.copies-count.zero-copies {
-  color: #ef4444;
-}
-
-.status-badge {
-  display: inline-block;
-  padding: 3px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.status-badge.in-stock {
-  background-color: #dcfce7;
-  color: #166534;
-}
-
-.status-badge.out-stock {
-  background-color: #fee2e2;
-  color: #991b1b;
-}
-
-.issue-controls {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.member-select {
-  padding: 6px 8px;
-  border: 1px solid #cbd5e1;
-  border-radius: 4px;
-  font-size: 13px;
-  max-width: 150px;
-}
-
-.btn-issue {
-  background-color: #2563eb;
-  color: white;
-  border: none;
-  padding: 6px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-}
-
-.btn-issue:disabled {
-  background-color: #94a3b8;
-  cursor: not-allowed;
-}
-
-.text-center {
-  text-align: center;
-  color: #64748b;
-  padding: 20px 0;
-}
-
-.form-card {
-  background: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
-  padding: 20px;
-}
-
-.form-card h3 {
-  margin: 0 0 16px 0;
-  font-size: 16px;
-  color: #1e293b;
-}
-
-.add-form {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 12px;
-  align-items: flex-end;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.form-group label {
-  font-size: 12px;
-  font-weight: 600;
-  color: #475569;
-}
-
-.form-group input,
-.form-group select {
-  padding: 8px 10px;
-  border: 1px solid #cbd5e1;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.btn-submit {
-  background-color: #0f172a;
-  color: white;
-  border: none;
-  padding: 9px 16px;
-  border-radius: 4px;
-  font-size: 14px;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.btn-submit:hover {
-  background-color: #1e293b;
+.catalog-page h2 {
+  font-size: 22px;
+  margin-bottom: 16px;
 }
 </style>

package/templates/vue-memory-game/src/App.vue

@@ -10,37 +10,38 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="game-wrapper">
-    <h1>Vue Pinia Memory Game</h1>
+  <div class="game-container">
+    <h1>Card Memory Game</h1>
 
     <div class="stats">
       <span>Moves: {{ store.moves }}</span>
-      <span>Matches: {{ store.matches }} / {{ store.symbols.length }}</span>
+      <span>Matched: {{ store.matchedCount }} / {{ store.symbols.length }}</span>
     </div>
 
-    <button type="button" class="btn" @click="store.initGame()">Restart Game</button>
-
-    <div v-if="store.isGameOver" class="win-banner">
-      🎉 You won in {{ store.moves }} moves!
+    <div v-if="store.isGameWon" class="win-banner">
+      You won in {{ store.moves }} moves!
     </div>
 
-    <div class="grid">
+    <div class="card-grid">
       <div
-        v-for="card in store.cards"
+        v-for="(card, index) in store.cards"
         :key="card.id"
         class="card"
-        :class="{ flipped: card.isFlipped, matched: card.isMatched }"
-        @click="store.flipCard(card)"
+        :class="{ flipped: card.flipped || card.matched, matched: card.matched }"
+        @click="store.flipCard(index)"
       >
-        {{ card.isFlipped || card.isMatched ? card.symbol : '?' }}
+        <span v-if="card.flipped || card.matched">{{ card.symbol }}</span>
+        <span v-else class="card-back">?</span>
       </div>
     </div>
+
+    <button class="reset-btn" @click="store.initGame">Restart Game</button>
   </div>
 </template>
 
 <style scoped>
-.game-wrapper {
-  max-width: 360px;
+.game-container {
+  max-width: 380px;
   margin: 30px auto;
   text-align: center;
   font-family: Arial, sans-serif;
@@ -48,59 +49,54 @@ onMounted(() => {
 
 .stats {
   display: flex;
-  justify-content: space-around;
-  font-size: 18px;
+  justify-content: space-between;
+  margin-bottom: 15px;
   font-weight: bold;
-  margin: 15px 0;
-}
-
-.btn {
-  padding: 8px 16px;
-  background-color: #2980b9;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-bottom: 20px;
 }
 
 .win-banner {
-  padding: 10px;
   background-color: #d4edda;
   color: #155724;
-  margin-bottom: 15px;
+  padding: 10px;
   border-radius: 4px;
+  margin-bottom: 15px;
   font-weight: bold;
 }
 
-.grid {
+.card-grid {
   display: grid;
-  grid-template-columns: repeat(4, 75px);
+  grid-template-columns: repeat(4, 1fr);
   gap: 10px;
-  justify-content: center;
 }
 
 .card {
-  width: 75px;
-  height: 75px;
+  height: 70px;
   background-color: #34495e;
   color: white;
-  font-size: 32px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  font-size: 26px;
   border-radius: 6px;
   cursor: pointer;
-  user-select: none;
 }
 
 .card.flipped {
-  background-color: #ecf0f1;
-  color: #2c3e50;
+  background-color: #3498db;
 }
 
 .card.matched {
   background-color: #2ecc71;
-  color: white;
+}
+
+.card-back {
+  font-size: 20px;
+  color: #bdc3c7;
+}
+
+.reset-btn {
+  margin-top: 20px;
+  padding: 8px 16px;
+  cursor: pointer;
 }
 </style>