wad-lab 1.2.2 → 1.2.3

package/templates/fullstack-springboot-vue/frontend/vue-axios-router/src/components/ItemFormModal.vue

@@ -0,0 +1,173 @@
+<script setup>
+import { reactive, watch } from 'vue'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String,
+    default: 'Form'
+  },
+  fields: {
+    type: Array,
+    default: () => []
+  },
+  initialData: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['close', 'submit'])
+
+const formData = reactive({})
+
+watch(
+  () => [props.show, props.initialData],
+  () => {
+    if (props.show) {
+      props.fields.forEach(f => {
+        formData[f.key] = props.initialData[f.key] !== undefined ? props.initialData[f.key] : ''
+      })
+    }
+  },
+  { immediate: true }
+)
+
+function handleSubmit() {
+  emit('submit', { ...formData })
+}
+</script>
+
+<template>
+  <div v-if="show" class="modal-overlay" @click.self="emit('close')">
+    <div class="modal-card">
+      <div class="modal-header">
+        <h3>{{ title }}</h3>
+        <button type="button" class="btn-close" @click="emit('close')">x</button>
+      </div>
+
+      <form @submit.prevent="handleSubmit" class="modal-form">
+        <div v-for="field in fields" :key="field.key" class="form-group">
+          <label :for="'f-' + field.key">{{ field.label }}</label>
+          <select
+            v-if="field.type === 'select'"
+            :id="'f-' + field.key"
+            v-model="formData[field.key]"
+            :required="field.required"
+          >
+            <option value="" disabled>{{ field.placeholder || 'Select...' }}</option>
+            <option v-for="opt in field.options" :key="opt.value" :value="opt.value">
+              {{ opt.label }}
+            </option>
+          </select>
+          <input
+            v-else
+            :id="'f-' + field.key"
+            v-model="formData[field.key]"
+            :type="field.type || 'text'"
+            :required="field.required"
+            :placeholder="field.placeholder || ''"
+          />
+        </div>
+
+        <div class="modal-actions">
+          <button type="button" class="btn btn-secondary" @click="emit('close')">Cancel</button>
+          <button type="submit" class="btn btn-primary">Submit</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: 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;
+  color: #24292f;
+}
+
+.btn-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: #57606a;
+}
+
+.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;
+  color: #444444;
+}
+
+.form-group input,
+.form-group select {
+  padding: 8px 12px;
+  border: 1px solid #d0d7de;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-primary { background: #0969da; color: #fff; }
+.btn-secondary { background: #f6f8fa; border-color: #d0d7de; color: #24292f; }
+</style>

package/templates/fullstack-springboot-vue/frontend/vue-axios-router/src/components/ItemTable.vue

@@ -0,0 +1,102 @@
+<script setup>
+defineProps({
+  columns: {
+    type: Array,
+    required: true
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['patch', 'delete'])
+</script>
+
+<template>
+  <div class="table-container">
+    <div v-if="loading" class="loading-state">Loading table data...</div>
+    <table v-else class="data-table">
+      <thead>
+        <tr>
+          <th v-for="col in columns" :key="col.key">{{ col.label }}</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="items.length === 0">
+          <td :colspan="columns.length + 1" class="empty">No records found.</td>
+        </tr>
+        <tr v-for="row in items" :key="row.id">
+          <td v-for="col in columns" :key="col.key">
+            {{ col.format ? col.format(row[col.key], row) : row[col.key] }}
+          </td>
+          <td class="action-cell">
+            <button type="button" class="btn btn-sm btn-patch" @click="emit('patch', row)">Patch</button>
+            <button type="button" class="btn btn-sm btn-danger" @click="emit('delete', row.id)">Delete</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.table-container {
+  overflow-x: auto;
+  background: #ffffff;
+  border: 1px solid #e1e4e8;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+th, td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #e1e4e8;
+  text-align: left;
+}
+
+th {
+  background-color: #f8fafc;
+  font-weight: 600;
+  color: #475569;
+}
+
+.action-cell {
+  display: flex;
+  gap: 6px;
+}
+
+.empty {
+  text-align: center;
+  color: #94a3b8;
+  padding: 24px;
+}
+
+.loading-state {
+  padding: 16px;
+  text-align: center;
+  color: #64748b;
+}
+
+.btn {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+
+.btn-patch { background: #8250df; color: #fff; }
+.btn-danger { background: #cf222e; color: #fff; }
+</style>

package/templates/fullstack-springboot-vue/frontend/vue-axios-router/src/components/NavBar.vue

@@ -0,0 +1,57 @@
+<script setup>
+</script>
+
+<template>
+  <header class="app-header">
+    <div class="brand">
+      <h1>Company Portal</h1>
+    </div>
+    <nav class="nav-links">
+      <router-link to="/" class="nav-item">Dashboard</router-link>
+      <router-link to="/departments" class="nav-item">Departments</router-link>
+      <router-link to="/employees" class="nav-item">Employees</router-link>
+      <router-link to="/add-employee" class="nav-item">Add Employee</router-link>
+    </nav>
+  </header>
+</template>
+
+<style scoped>
+.app-header {
+  background-color: #2c3e50;
+  color: #ffffff;
+  padding: 0 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.brand h1 {
+  font-size: 20px;
+  margin: 16px 0;
+}
+
+.nav-links {
+  display: flex;
+  gap: 8px;
+}
+
+.nav-item {
+  color: #ecf0f1;
+  text-decoration: none;
+  padding: 8px 14px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.nav-item:hover {
+  background-color: #34495e;
+}
+
+.nav-item.router-link-exact-active {
+  background-color: #1abc9c;
+  color: #ffffff;
+}
+</style>