wad-lab 1.2.2 → 1.2.4

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

@@ -1,91 +1,120 @@
 <script setup>
-import { ref, reactive, computed } from 'vue'
+import { ref, computed } from 'vue'
+import CounterCard from './components/CounterCard.vue'
+import UserForm from './components/UserForm.vue'
+import ItemList from './components/ItemList.vue'
 
 const items = ref([
   { id: '1', name: 'Notebook', description: 'Spiral ruled notebook', price: 15 },
   { id: '2', name: 'Pen', description: 'Blue gel pen', price: 5 }
 ])
 
-const form = reactive({
-  name: '',
-  description: '',
-  price: 0
-})
-
-const itemCount = computed(() => {
-  return items.value.length
-})
-
-const totalPrice = computed(() => {
-  return items.value.reduce((sum, item) => sum + Number(item.price), 0)
-})
-
-function addItem() {
-  if (!form.name) return
-  items.value.push({
-    id: String(Date.now()),
-    name: form.name,
-    description: form.description,
-    price: Number(form.price)
-  })
-  form.name = ''
-  form.description = ''
-  form.price = 0
+const isEditMode = ref(false)
+const itemToEdit = ref(null)
+
+const itemCount = computed(() => items.value.length)
+const totalPrice = computed(() =>
+  items.value.reduce((sum, item) => sum + Number(item.price || 0), 0)
+)
+
+function handleAddOrUpdate(itemData) {
+  if (isEditMode.value) {
+    const idx = items.value.findIndex(i => i.id === itemData.id)
+    if (idx !== -1) {
+      items.value[idx] = { ...itemData }
+    }
+    isEditMode.value = false
+    itemToEdit.value = null
+  } else {
+    items.value.push({
+      id: String(Date.now()),
+      ...itemData
+    })
+  }
 }
 
-function deleteItem(id) {
+function handleEdit(item) {
+  isEditMode.value = true
+  itemToEdit.value = { ...item }
+}
+
+function handlePatch(item) {
+  const newPrice = prompt('Enter new price for ' + item.name + ':', item.price)
+  if (newPrice !== null && newPrice !== '') {
+    const target = items.value.find(i => i.id === item.id)
+    if (target) {
+      target.price = Number(newPrice)
+    }
+  }
+}
+
+function handleDelete(id) {
   items.value = items.value.filter(item => item.id !== id)
 }
+
+function handleCancelEdit() {
+  isEditMode.value = false
+  itemToEdit.value = null
+}
 </script>
 
 <template>
-  <h2>Vue Basics CRUD</h2>
-  <br>
-
-  <form @submit.prevent="addItem">
-    <label for="name">Name:</label>
-    <br>
-    <input id="name" v-model="form.name" placeholder="Item Name" required>
-    <br><br>
-
-    <label for="description">Description:</label>
-    <br>
-    <input id="description" v-model="form.description" placeholder="Item Description" required>
-    <br><br>
-
-    <label for="price">Price:</label>
-    <br>
-    <input id="price" v-model.number="form.price" type="number" placeholder="Item Price" required>
-    <br><br>
-
-    <button type="submit">Add Item</button>
-  </form>
-
-  <br>
-  <hr>
-  <br>
-
-  <h3>Item Statistics</h3>
-  <br>
-  <p>Total Items: {{ itemCount }}</p>
-  <br>
-  <p>Total Price: ${{ totalPrice }}</p>
-
-  <br>
-  <hr>
-  <br>
-
-  <h3>Items List</h3>
-  <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.description }} - ${{ item.price }}</span>
-      <br><br>
-      <button @click="deleteItem(item.id)">Delete</button>
-      <br><br>
-    </li>
-  </ul>
+  <div class="basics-container">
+    <header class="header">
+      <h2>Vue Basics CRUD</h2>
+      <p>Modular: CounterCard, UserForm, ItemList</p>
+    </header>
+
+    <CounterCard :total-items="itemCount" :total-price="totalPrice" />
+
+    <UserForm
+      :is-edit="isEditMode"
+      :item-to-edit="itemToEdit"
+      @submit-item="handleAddOrUpdate"
+      @cancel-edit="handleCancelEdit"
+    />
+
+    <ItemList
+      :items="items"
+      @edit-item="handleEdit"
+      @patch-item="handlePatch"
+      @delete-item="handleDelete"
+    />
+  </div>
 </template>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background-color: #f8fafc;
+  color: #334155;
+}
+</style>
+
+<style scoped>
+.basics-container {
+  max-width: 800px;
+  margin: 30px auto;
+  padding: 0 16px;
+}
+
+.header {
+  margin-bottom: 20px;
+}
+
+.header h2 {
+  font-size: 24px;
+  margin-bottom: 4px;
+}
+
+.header p {
+  color: #64748b;
+  font-size: 14px;
+}
+</style>

package/templates/vue-basics/src/components/CounterCard.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  totalItems: {
+    type: Number,
+    default: 0
+  },
+  totalPrice: {
+    type: Number,
+    default: 0
+  }
+})
+
+const counter = ref(0)
+</script>
+
+<template>
+  <div class="stats-card">
+    <div class="stat-box">
+      <span class="label">Total Items</span>
+      <strong class="value">{{ totalItems }}</strong>
+    </div>
+    <div class="stat-box">
+      <span class="label">Total Price</span>
+      <strong class="value">${{ Number(totalPrice).toFixed(2) }}</strong>
+    </div>
+    <div class="counter-box">
+      <span class="label">Interactive Counter</span>
+      <div class="counter-controls">
+        <button type="button" class="btn btn-sm" @click="counter--">-</button>
+        <span class="counter-num">{{ counter }}</span>
+        <button type="button" class="btn btn-sm" @click="counter++">+</button>
+        <button type="button" class="btn btn-sm btn-reset" @click="counter = 0">Reset</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.stats-card {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  background: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 20px;
+}
+
+.stat-box {
+  flex: 1;
+  min-width: 140px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.counter-box {
+  flex: 1.5;
+  min-width: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.label {
+  font-size: 12px;
+  color: #64748b;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.value {
+  font-size: 20px;
+  color: #0f172a;
+}
+
+.counter-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.counter-num {
+  font-weight: 700;
+  font-size: 16px;
+  min-width: 24px;
+  text-align: center;
+}
+
+.btn {
+  padding: 4px 10px;
+  border-radius: 4px;
+  border: 1px solid #cbd5e1;
+  background: #f1f5f9;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.btn-reset {
+  font-size: 11px;
+  font-weight: normal;
+}
+</style>

package/templates/vue-basics/src/components/ItemList.vue

@@ -0,0 +1,99 @@
+<script setup>
+defineProps({
+  items: {
+    type: Array,
+    required: true
+  }
+})
+
+const emit = defineEmits(['edit-item', 'patch-item', 'delete-item'])
+</script>
+
+<template>
+  <div class="list-container">
+    <h3>Item List</h3>
+    <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 class="font-bold">{{ item.name }}</td>
+          <td>{{ item.description }}</td>
+          <td>${{ Number(item.price).toFixed(2) }}</td>
+          <td class="actions-cell">
+            <button type="button" class="btn btn-sm btn-edit" @click="emit('edit-item', item)">Edit</button>
+            <button type="button" class="btn btn-sm btn-patch" @click="emit('patch-item', item)">Patch</button>
+            <button type="button" class="btn btn-sm btn-delete" @click="emit('delete-item', item.id)">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.list-container {
+  background: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.list-container h3 {
+  font-size: 16px;
+  margin-bottom: 12px;
+}
+
+.items-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+th, td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #e2e8f0;
+  text-align: left;
+}
+
+th {
+  background: #f8fafc;
+  color: #475569;
+}
+
+.font-bold {
+  font-weight: 600;
+}
+
+.actions-cell {
+  display: flex;
+  gap: 6px;
+}
+
+.empty {
+  text-align: center;
+  color: #94a3b8;
+  padding: 20px;
+}
+
+.btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-edit { background: #0284c7; color: #fff; }
+.btn-patch { background: #8250df; color: #fff; }
+.btn-delete { background: #cf222e; color: #fff; }
+</style>

package/templates/vue-basics/src/components/UserForm.vue

@@ -0,0 +1,138 @@
+<script setup>
+import { reactive, watch } from 'vue'
+
+const props = defineProps({
+  isEdit: {
+    type: Boolean,
+    default: false
+  },
+  itemToEdit: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['submit-item', 'cancel-edit'])
+
+const form = reactive({
+  id: '',
+  name: '',
+  description: '',
+  price: 0
+})
+
+watch(
+  () => props.itemToEdit,
+  (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-item', { ...form, price: Number(form.price) })
+  if (!props.isEdit) {
+    form.name = ''
+    form.description = ''
+    form.price = 0
+  }
+}
+</script>
+
+<template>
+  <div class="form-container">
+    <h3>{{ isEdit ? 'Edit Item' : 'Add New Item' }}</h3>
+    <form @submit.prevent="handleSubmit" class="item-form">
+      <div class="form-group">
+        <label for="basic-name">Name</label>
+        <input id="basic-name" v-model="form.name" required placeholder="Item Name" />
+      </div>
+
+      <div class="form-group">
+        <label for="basic-desc">Description</label>
+        <input id="basic-desc" v-model="form.description" required placeholder="Item Description" />
+      </div>
+
+      <div class="form-group">
+        <label for="basic-price">Price ($)</label>
+        <input id="basic-price" v-model.number="form.price" type="number" step="any" min="0" required placeholder="0.00" />
+      </div>
+
+      <div class="form-actions">
+        <button type="submit" class="btn btn-primary">{{ isEdit ? 'Update Item' : 'Add Item' }}</button>
+        <button v-if="isEdit" type="button" class="btn btn-secondary" @click="emit('cancel-edit')">Cancel</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.form-container {
+  background: #ffffff;
+  border: 1px solid #d0d7de;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 20px;
+}
+
+.form-container h3 {
+  font-size: 16px;
+  margin-bottom: 12px;
+}
+
+.item-form {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: flex-end;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 140px;
+}
+
+.form-group label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.form-group input {
+  padding: 8px 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.form-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.btn {
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.btn-primary { background: #0284c7; color: #fff; }
+.btn-secondary { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
+</style>

package/templates/vue-cart-router-pinia/src/components/CartSummary.vue

@@ -0,0 +1,139 @@
+<script setup>
+defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  total: {
+    type: Number,
+    required: true
+  }
+})
+
+const emit = defineEmits(['increment', 'decrement', 'patch', 'remove', 'clear'])
+
+function handlePatchQuantity(item) {
+  const newQty = prompt('Enter new quantity for ' + item.name + ':', item.quantity)
+  if (newQty !== null && newQty !== '') {
+    emit('patch', { id: item.id, quantity: Number(newQty) })
+  }
+}
+</script>
+
+<template>
+  <div class="cart-summary">
+    <table class="cart-table">
+      <thead>
+        <tr>
+          <th>Product</th>
+          <th>Price</th>
+          <th>Qty</th>
+          <th>Subtotal</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="items.length === 0">
+          <td colspan="5" class="empty">Your cart is empty.</td>
+        </tr>
+        <tr v-for="item in items" :key="item.id">
+          <td>{{ item.name }}</td>
+          <td>${{ item.price }}</td>
+          <td>
+            <div class="qty-controls">
+              <button type="button" class="btn-qty" @click="emit('decrement', item.id)">-</button>
+              <span>{{ item.quantity }}</span>
+              <button type="button" class="btn-qty" @click="emit('increment', item.id)">+</button>
+            </div>
+          </td>
+          <td>${{ item.price * item.quantity }}</td>
+          <td class="action-cell">
+            <button type="button" class="btn btn-sm btn-patch" @click="handlePatchQuantity(item)">Patch</button>
+            <button type="button" class="btn btn-sm btn-danger" @click="emit('remove', item.id)">Remove</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div v-if="items.length > 0" class="summary-footer">
+      <button type="button" class="btn btn-secondary" @click="emit('clear')">Clear Cart</button>
+      <div class="total-display">
+        Total: <strong>${{ total }}</strong>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cart-summary {
+  background: #ffffff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.cart-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+th, td {
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+  text-align: left;
+}
+
+th {
+  background: #f8fafc;
+}
+
+.qty-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.btn-qty {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background: #f1f5f9;
+  cursor: pointer;
+}
+
+.action-cell {
+  display: flex;
+  gap: 6px;
+}
+
+.btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-size: 12px;
+}
+
+.btn-patch { background: #8250df; color: #fff; }
+.btn-danger { background: #cf222e; color: #fff; }
+.btn-secondary { background: #f1f5f9; color: #475569; }
+
+.summary-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16px;
+}
+
+.total-display {
+  font-size: 18px;
+}
+
+.empty {
+  text-align: center;
+  color: #888;
+  padding: 20px;
+}
+</style>