wad-lab 1.0.4 → 1.0.6

package/templates/vue-cart-router-pinia/src/views/CartView.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { useCartStore } from '../stores/cartStore'
+
+const cartStore = useCartStore()
+</script>
+
+<template>
+  <div>
+    <h2>Your Shopping Cart</h2>
+
+    <div v-if="cartStore.items.length === 0" class="empty-cart">
+      <p>Your cart is empty.</p>
+      <router-link to="/">Browse Products</router-link>
+    </div>
+
+    <div v-else>
+      <table class="cart-table">
+        <thead>
+          <tr>
+            <th>Product</th>
+            <th>Price</th>
+            <th>Quantity</th>
+            <th>Subtotal</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in cartStore.items" :key="item.id">
+            <td>{{ item.name }}</td>
+            <td>${{ item.price }}</td>
+            <td class="qty-cell">
+              <button type="button" class="btn-qty" @click="cartStore.decrementQuantity(item.id)">-</button>
+              <span>{{ item.quantity }}</span>
+              <button type="button" class="btn-qty" @click="cartStore.incrementQuantity(item.id)">+</button>
+            </td>
+            <td>${{ item.price * item.quantity }}</td>
+            <td>
+              <button type="button" class="btn-remove" @click="cartStore.removeFromCart(item.id)">Remove</button>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="3" class="total-label">Grand Total:</td>
+            <td colspan="2" class="total-value">${{ cartStore.cartTotal }}</td>
+          </tr>
+        </tfoot>
+      </table>
+
+      <div class="cart-actions">
+        <button type="button" class="btn btn-clear" @click="cartStore.clearCart()">Clear Cart</button>
+        <router-link to="/checkout" class="btn btn-checkout">Proceed to Checkout</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.empty-cart {
+  padding: 30px;
+  text-align: center;
+  color: #777;
+}
+
+.cart-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 15px 0;
+}
+
+.cart-table th, .cart-table td {
+  border: 1px solid #ddd;
+  padding: 10px;
+  text-align: left;
+}
+
+.cart-table th {
+  background-color: #f2f2f2;
+}
+
+.qty-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.btn-qty {
+  width: 24px;
+  height: 24px;
+  background-color: #eee;
+  border: 1px solid #ccc;
+  cursor: pointer;
+}
+
+.btn-remove {
+  background-color: #e74c3c;
+  color: white;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.total-label {
+  text-align: right;
+  font-weight: bold;
+}
+
+.total-value {
+  font-weight: bold;
+  color: #27ae60;
+  font-size: 16px;
+}
+
+.cart-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 15px;
+}
+
+.btn {
+  padding: 10px 18px;
+  border-radius: 4px;
+  text-decoration: none;
+  font-size: 14px;
+  cursor: pointer;
+  border: none;
+}
+
+.btn-clear {
+  background-color: #95a5a6;
+  color: white;
+}
+
+.btn-checkout {
+  background-color: #27ae60;
+  color: white;
+}
+</style>

package/templates/vue-cart-router-pinia/src/views/CheckoutView.vue

@@ -0,0 +1,144 @@
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useCartStore } from '../stores/cartStore'
+
+const cartStore = useCartStore()
+const router = useRouter()
+
+const name = ref('')
+const address = ref('')
+const orderPlaced = ref(false)
+
+function handleCheckout() {
+  orderPlaced.value = true
+  cartStore.clearCart()
+}
+</script>
+
+<template>
+  <div class="checkout-wrapper">
+    <h2>Checkout & Order Summary</h2>
+
+    <div v-if="orderPlaced" class="success-banner">
+      <h3>Thank you for your order! 🎉</h3>
+      <p>Your order has been placed successfully.</p>
+      <router-link to="/" class="btn btn-shop">Continue Shopping</router-link>
+    </div>
+
+    <div v-else-if="cartStore.items.length === 0" class="empty-state">
+      <p>No items in cart to checkout.</p>
+      <router-link to="/">Browse Catalog</router-link>
+    </div>
+
+    <div v-else class="checkout-content">
+      <div class="order-summary">
+        <h3>Order Items:</h3>
+        <ul>
+          <li v-for="item in cartStore.items" :key="item.id">
+            {{ item.name }} x {{ item.quantity }} — ${{ item.price * item.quantity }}
+          </li>
+        </ul>
+        <p class="summary-total">Total Amount: <strong>${{ cartStore.cartTotal }}</strong></p>
+      </div>
+
+      <form @submit.prevent="handleCheckout" class="checkout-form">
+        <h3>Shipping Information</h3>
+        <div class="form-group">
+          <label for="custName">Full Name:</label>
+          <input id="custName" type="text" v-model="name" required placeholder="John Doe" />
+        </div>
+
+        <div class="form-group">
+          <label for="custAddr">Delivery Address:</label>
+          <textarea id="custAddr" v-model="address" rows="3" required placeholder="123 Main St, City"></textarea>
+        </div>
+
+        <button type="submit" class="btn btn-place">Confirm and Place Order</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.checkout-wrapper {
+  max-width: 500px;
+}
+
+.checkout-content {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.order-summary {
+  background-color: #f8f9fa;
+  padding: 15px;
+  border-radius: 6px;
+  border: 1px solid #ddd;
+}
+
+.order-summary ul {
+  padding-left: 20px;
+  margin: 10px 0;
+}
+
+.summary-total {
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.checkout-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+input, textarea {
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.btn {
+  padding: 10px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 14px;
+  text-align: center;
+}
+
+.btn-place {
+  background-color: #27ae60;
+  color: white;
+  margin-top: 10px;
+}
+
+.btn-shop {
+  background-color: #2980b9;
+  color: white;
+  display: inline-block;
+  margin-top: 10px;
+}
+
+.success-banner {
+  background-color: #d4edda;
+  color: #155724;
+  padding: 20px;
+  border-radius: 6px;
+  text-align: center;
+}
+
+.empty-state {
+  padding: 20px 0;
+  text-align: center;
+}
+</style>

package/templates/vue-cart-router-pinia/src/views/ProductCatalogView.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { useCartStore } from '../stores/cartStore'
+
+const cartStore = useCartStore()
+</script>
+
+<template>
+  <div>
+    <h2>Available Products</h2>
+    <div class="product-grid">
+      <div v-for="product in cartStore.products" :key="product.id" class="product-card">
+        <h3>{{ product.name }}</h3>
+        <p class="category">{{ product.category }}</p>
+        <p class="price">${{ product.price }}</p>
+        <button
+          type="button"
+          class="btn btn-add"
+          @click="cartStore.addToCart(product)"
+        >
+          Add to Cart
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 15px;
+  margin-top: 15px;
+}
+
+.product-card {
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 15px;
+  text-align: center;
+  background-color: #fafafa;
+}
+
+.product-card h3 {
+  font-size: 16px;
+  margin: 5px 0;
+}
+
+.category {
+  color: #777;
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.price {
+  font-size: 18px;
+  font-weight: bold;
+  color: #27ae60;
+  margin-bottom: 12px;
+}
+
+.btn-add {
+  background-color: #2980b9;
+  color: white;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.btn-add:hover {
+  background-color: #1f618d;
+}
+</style>

package/templates/vue-cart-router-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-memory-game/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 Pinia Memory Game</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+</body>
+</html>

package/templates/vue-memory-game/package.json

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

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

@@ -0,0 +1,106 @@
+<script setup>
+import { onMounted } from 'vue'
+import { useMemoryStore } from './stores/memoryStore'
+
+const store = useMemoryStore()
+
+onMounted(() => {
+  store.initGame()
+})
+</script>
+
+<template>
+  <div class="game-wrapper">
+    <h1>Vue Pinia Memory Game</h1>
+
+    <div class="stats">
+      <span>Moves: {{ store.moves }}</span>
+      <span>Matches: {{ store.matches }} / {{ 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>
+
+    <div class="grid">
+      <div
+        v-for="card in store.cards"
+        :key="card.id"
+        class="card"
+        :class="{ flipped: card.isFlipped, matched: card.isMatched }"
+        @click="store.flipCard(card)"
+      >
+        {{ card.isFlipped || card.isMatched ? card.symbol : '?' }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.game-wrapper {
+  max-width: 360px;
+  margin: 30px auto;
+  text-align: center;
+  font-family: Arial, sans-serif;
+}
+
+.stats {
+  display: flex;
+  justify-content: space-around;
+  font-size: 18px;
+  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;
+  border-radius: 4px;
+  font-weight: bold;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 75px);
+  gap: 10px;
+  justify-content: center;
+}
+
+.card {
+  width: 75px;
+  height: 75px;
+  background-color: #34495e;
+  color: white;
+  font-size: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.card.flipped {
+  background-color: #ecf0f1;
+  color: #2c3e50;
+}
+
+.card.matched {
+  background-color: #2ecc71;
+  color: white;
+}
+</style>

package/templates/vue-memory-game/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-memory-game/src/stores/memoryStore.js

@@ -0,0 +1,64 @@
+import { defineStore } from 'pinia'
+
+export const useMemoryStore = defineStore('memory', {
+  state: () => ({
+    symbols: ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊'],
+    cards: [],
+    flippedCards: [],
+    moves: 0,
+    matches: 0,
+    isLocked: false
+  }),
+  getters: {
+    isGameOver: (state) => state.matches === 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 = []
+      this.moves = 0
+      this.matches = 0
+      this.isLocked = false
+    },
+
+    flipCard(card) {
+      if (this.isLocked || card.isFlipped || card.isMatched) return
+
+      card.isFlipped = true
+      this.flippedCards.push(card)
+
+      if (this.flippedCards.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 = []
+      } else {
+        this.isLocked = true
+        setTimeout(() => {
+          card1.isFlipped = false
+          card2.isFlipped = false
+          this.flippedCards = []
+          this.isLocked = false
+        }, 800)
+      }
+    }
+  }
+})

package/templates/vue-memory-game/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-pinia/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 Pinia Todo List</title>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+</body>
+</html>

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

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