wad-lab 1.1.4 → 1.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/index.js +30 -3
- package/package.json +1 -1
- package/templates/vue-axios-basic/src/App.vue +405 -405
- package/templates/vue-axios-pinia/src/App.vue +427 -427
- package/templates/vue-axios-props-emits/src/App.vue +167 -167
- package/templates/vue-axios-props-emits/src/components/DepartmentForm.vue +98 -98
- package/templates/vue-axios-props-emits/src/components/DepartmentList.vue +91 -91
- package/templates/vue-axios-props-emits/src/components/EmployeeForm.vue +128 -128
- package/templates/vue-axios-props-emits/src/components/EmployeeList.vue +94 -94
- package/templates/vue-axios-router/src/App.vue +90 -90
- package/templates/vue-axios-router/src/views/AddEmployeeView.vue +247 -247
- package/templates/vue-axios-router/src/views/DepartmentView.vue +273 -273
- package/templates/vue-axios-router/src/views/EmployeeView.vue +196 -196
- package/templates/vue-axios-router/src/views/HomeDashboardView.vue +263 -263
- package/templates/vue-axios-router-props/src/App.vue +59 -59
|
@@ -1,167 +1,167 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="container">
|
|
3
|
-
<header class="header">
|
|
4
|
-
<h1>Company Directory</h1>
|
|
5
|
-
<p>Vue 3 + Axios + Props & Emits</p>
|
|
6
|
-
</header>
|
|
7
|
-
|
|
8
|
-
<div class="grid">
|
|
9
|
-
<section class="card">
|
|
10
|
-
<h2>Departments</h2>
|
|
11
|
-
<DepartmentForm @create-department="createDepartment" />
|
|
12
|
-
<DepartmentList
|
|
13
|
-
:departments="departments"
|
|
14
|
-
@delete-department="deleteDepartment"
|
|
15
|
-
/>
|
|
16
|
-
</section>
|
|
17
|
-
|
|
18
|
-
<section class="card">
|
|
19
|
-
<h2>Employees</h2>
|
|
20
|
-
<EmployeeForm
|
|
21
|
-
:departments="departments"
|
|
22
|
-
@create-employee="createEmployee"
|
|
23
|
-
/>
|
|
24
|
-
<EmployeeList
|
|
25
|
-
:employees="employees"
|
|
26
|
-
:departments="departments"
|
|
27
|
-
@delete-employee="deleteEmployee"
|
|
28
|
-
/>
|
|
29
|
-
</section>
|
|
30
|
-
</div>
|
|
31
|
-
</div>
|
|
32
|
-
</template>
|
|
33
|
-
|
|
34
|
-
<script setup>
|
|
35
|
-
import { ref, onMounted } from 'vue'
|
|
36
|
-
import api from './services/api'
|
|
37
|
-
import DepartmentList from './components/DepartmentList.vue'
|
|
38
|
-
import DepartmentForm from './components/DepartmentForm.vue'
|
|
39
|
-
import EmployeeList from './components/EmployeeList.vue'
|
|
40
|
-
import EmployeeForm from './components/EmployeeForm.vue'
|
|
41
|
-
|
|
42
|
-
const departments = ref([])
|
|
43
|
-
const employees = ref([])
|
|
44
|
-
|
|
45
|
-
const fetchDepartments = async () => {
|
|
46
|
-
try {
|
|
47
|
-
const response = await api.get('/departments')
|
|
48
|
-
departments.value = response.data
|
|
49
|
-
} catch (error) {
|
|
50
|
-
console.error(error)
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
const fetchEmployees = async () => {
|
|
55
|
-
try {
|
|
56
|
-
const response = await api.get('/employees')
|
|
57
|
-
employees.value = response.data
|
|
58
|
-
} catch (error) {
|
|
59
|
-
console.error(error)
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
const createDepartment = async (departmentData) => {
|
|
64
|
-
try {
|
|
65
|
-
await api.post('/departments', departmentData)
|
|
66
|
-
await fetchDepartments()
|
|
67
|
-
} catch (error) {
|
|
68
|
-
console.error(error)
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
const deleteDepartment = async (id) => {
|
|
73
|
-
try {
|
|
74
|
-
await api.delete(`/departments/${id}`)
|
|
75
|
-
await fetchDepartments()
|
|
76
|
-
await fetchEmployees()
|
|
77
|
-
} catch (error) {
|
|
78
|
-
console.error(error)
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
const createEmployee = async (employeeData) => {
|
|
83
|
-
try {
|
|
84
|
-
await api.post('/employees', employeeData)
|
|
85
|
-
await fetchEmployees()
|
|
86
|
-
} catch (error) {
|
|
87
|
-
console.error(error)
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
const deleteEmployee = async (id) => {
|
|
92
|
-
try {
|
|
93
|
-
await api.delete(`/employees/${id}`)
|
|
94
|
-
await fetchEmployees()
|
|
95
|
-
} catch (error) {
|
|
96
|
-
console.error(error)
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
onMounted(() => {
|
|
101
|
-
fetchDepartments()
|
|
102
|
-
fetchEmployees()
|
|
103
|
-
})
|
|
104
|
-
</script>
|
|
105
|
-
|
|
106
|
-
<style>
|
|
107
|
-
* {
|
|
108
|
-
box-sizing: border-box;
|
|
109
|
-
margin: 0;
|
|
110
|
-
padding: 0;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
body {
|
|
114
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
115
|
-
background-color: #f4f5f7;
|
|
116
|
-
color: #333333;
|
|
117
|
-
line-height: 1.5;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.container {
|
|
121
|
-
max-width: 1200px;
|
|
122
|
-
margin: 0 auto;
|
|
123
|
-
padding: 32px 16px;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.header {
|
|
127
|
-
margin-bottom: 24px;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.header h1 {
|
|
131
|
-
font-size: 28px;
|
|
132
|
-
color: #1a1a1a;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.header p {
|
|
136
|
-
color: #666666;
|
|
137
|
-
font-size: 14px;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.grid {
|
|
141
|
-
display: grid;
|
|
142
|
-
grid-template-columns: 1fr;
|
|
143
|
-
gap: 24px;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
@media (min-width: 900px) {
|
|
147
|
-
.grid {
|
|
148
|
-
grid-template-columns: 1fr 1fr;
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.card {
|
|
153
|
-
background: #ffffff;
|
|
154
|
-
border: 1px solid #e1e4e8;
|
|
155
|
-
border-radius: 8px;
|
|
156
|
-
padding: 20px;
|
|
157
|
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.card h2 {
|
|
161
|
-
font-size: 20px;
|
|
162
|
-
margin-bottom: 16px;
|
|
163
|
-
color: #222222;
|
|
164
|
-
border-bottom: 1px solid #edf0f2;
|
|
165
|
-
padding-bottom: 8px;
|
|
166
|
-
}
|
|
167
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="container">
|
|
3
|
+
<header class="header">
|
|
4
|
+
<h1>Company Directory</h1>
|
|
5
|
+
<p>Vue 3 + Axios + Props & Emits</p>
|
|
6
|
+
</header>
|
|
7
|
+
|
|
8
|
+
<div class="grid">
|
|
9
|
+
<section class="card">
|
|
10
|
+
<h2>Departments</h2>
|
|
11
|
+
<DepartmentForm @create-department="createDepartment" />
|
|
12
|
+
<DepartmentList
|
|
13
|
+
:departments="departments"
|
|
14
|
+
@delete-department="deleteDepartment"
|
|
15
|
+
/>
|
|
16
|
+
</section>
|
|
17
|
+
|
|
18
|
+
<section class="card">
|
|
19
|
+
<h2>Employees</h2>
|
|
20
|
+
<EmployeeForm
|
|
21
|
+
:departments="departments"
|
|
22
|
+
@create-employee="createEmployee"
|
|
23
|
+
/>
|
|
24
|
+
<EmployeeList
|
|
25
|
+
:employees="employees"
|
|
26
|
+
:departments="departments"
|
|
27
|
+
@delete-employee="deleteEmployee"
|
|
28
|
+
/>
|
|
29
|
+
</section>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<script setup>
|
|
35
|
+
import { ref, onMounted } from 'vue'
|
|
36
|
+
import api from './services/api'
|
|
37
|
+
import DepartmentList from './components/DepartmentList.vue'
|
|
38
|
+
import DepartmentForm from './components/DepartmentForm.vue'
|
|
39
|
+
import EmployeeList from './components/EmployeeList.vue'
|
|
40
|
+
import EmployeeForm from './components/EmployeeForm.vue'
|
|
41
|
+
|
|
42
|
+
const departments = ref([])
|
|
43
|
+
const employees = ref([])
|
|
44
|
+
|
|
45
|
+
const fetchDepartments = async () => {
|
|
46
|
+
try {
|
|
47
|
+
const response = await api.get('/departments')
|
|
48
|
+
departments.value = response.data
|
|
49
|
+
} catch (error) {
|
|
50
|
+
console.error(error)
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
const fetchEmployees = async () => {
|
|
55
|
+
try {
|
|
56
|
+
const response = await api.get('/employees')
|
|
57
|
+
employees.value = response.data
|
|
58
|
+
} catch (error) {
|
|
59
|
+
console.error(error)
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
const createDepartment = async (departmentData) => {
|
|
64
|
+
try {
|
|
65
|
+
await api.post('/departments', departmentData)
|
|
66
|
+
await fetchDepartments()
|
|
67
|
+
} catch (error) {
|
|
68
|
+
console.error(error)
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
const deleteDepartment = async (id) => {
|
|
73
|
+
try {
|
|
74
|
+
await api.delete(`/departments/${id}`)
|
|
75
|
+
await fetchDepartments()
|
|
76
|
+
await fetchEmployees()
|
|
77
|
+
} catch (error) {
|
|
78
|
+
console.error(error)
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const createEmployee = async (employeeData) => {
|
|
83
|
+
try {
|
|
84
|
+
await api.post('/employees', employeeData)
|
|
85
|
+
await fetchEmployees()
|
|
86
|
+
} catch (error) {
|
|
87
|
+
console.error(error)
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
const deleteEmployee = async (id) => {
|
|
92
|
+
try {
|
|
93
|
+
await api.delete(`/employees/${id}`)
|
|
94
|
+
await fetchEmployees()
|
|
95
|
+
} catch (error) {
|
|
96
|
+
console.error(error)
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
onMounted(() => {
|
|
101
|
+
fetchDepartments()
|
|
102
|
+
fetchEmployees()
|
|
103
|
+
})
|
|
104
|
+
</script>
|
|
105
|
+
|
|
106
|
+
<style>
|
|
107
|
+
* {
|
|
108
|
+
box-sizing: border-box;
|
|
109
|
+
margin: 0;
|
|
110
|
+
padding: 0;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
body {
|
|
114
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
115
|
+
background-color: #f4f5f7;
|
|
116
|
+
color: #333333;
|
|
117
|
+
line-height: 1.5;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.container {
|
|
121
|
+
max-width: 1200px;
|
|
122
|
+
margin: 0 auto;
|
|
123
|
+
padding: 32px 16px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.header {
|
|
127
|
+
margin-bottom: 24px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.header h1 {
|
|
131
|
+
font-size: 28px;
|
|
132
|
+
color: #1a1a1a;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.header p {
|
|
136
|
+
color: #666666;
|
|
137
|
+
font-size: 14px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.grid {
|
|
141
|
+
display: grid;
|
|
142
|
+
grid-template-columns: 1fr;
|
|
143
|
+
gap: 24px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
@media (min-width: 900px) {
|
|
147
|
+
.grid {
|
|
148
|
+
grid-template-columns: 1fr 1fr;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.card {
|
|
153
|
+
background: #ffffff;
|
|
154
|
+
border: 1px solid #e1e4e8;
|
|
155
|
+
border-radius: 8px;
|
|
156
|
+
padding: 20px;
|
|
157
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.card h2 {
|
|
161
|
+
font-size: 20px;
|
|
162
|
+
margin-bottom: 16px;
|
|
163
|
+
color: #222222;
|
|
164
|
+
border-bottom: 1px solid #edf0f2;
|
|
165
|
+
padding-bottom: 8px;
|
|
166
|
+
}
|
|
167
|
+
</style>
|
|
@@ -1,98 +1,98 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<form @submit.prevent="handleSubmit" class="form">
|
|
3
|
-
<div class="form-group">
|
|
4
|
-
<label for="dept-name">Department Name</label>
|
|
5
|
-
<input
|
|
6
|
-
id="dept-name"
|
|
7
|
-
v-model="deptForm.name"
|
|
8
|
-
type="text"
|
|
9
|
-
required
|
|
10
|
-
placeholder="e.g. Engineering"
|
|
11
|
-
/>
|
|
12
|
-
</div>
|
|
13
|
-
<div class="form-group">
|
|
14
|
-
<label for="dept-code">Department Code</label>
|
|
15
|
-
<input
|
|
16
|
-
id="dept-code"
|
|
17
|
-
v-model="deptForm.code"
|
|
18
|
-
type="text"
|
|
19
|
-
required
|
|
20
|
-
placeholder="e.g. ENG"
|
|
21
|
-
/>
|
|
22
|
-
</div>
|
|
23
|
-
<button type="submit" class="btn btn-primary">Add Department</button>
|
|
24
|
-
</form>
|
|
25
|
-
</template>
|
|
26
|
-
|
|
27
|
-
<script setup>
|
|
28
|
-
import { reactive } from 'vue'
|
|
29
|
-
|
|
30
|
-
const emit = defineEmits(['create-department'])
|
|
31
|
-
|
|
32
|
-
const deptForm = reactive({
|
|
33
|
-
name: '',
|
|
34
|
-
code: ''
|
|
35
|
-
})
|
|
36
|
-
|
|
37
|
-
const handleSubmit = () => {
|
|
38
|
-
emit('create-department', {
|
|
39
|
-
name: deptForm.name,
|
|
40
|
-
code: deptForm.code
|
|
41
|
-
})
|
|
42
|
-
deptForm.name = ''
|
|
43
|
-
deptForm.code = ''
|
|
44
|
-
}
|
|
45
|
-
</script>
|
|
46
|
-
|
|
47
|
-
<style scoped>
|
|
48
|
-
.form {
|
|
49
|
-
display: flex;
|
|
50
|
-
flex-direction: column;
|
|
51
|
-
gap: 12px;
|
|
52
|
-
margin-bottom: 20px;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.form-group {
|
|
56
|
-
display: flex;
|
|
57
|
-
flex-direction: column;
|
|
58
|
-
gap: 4px;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.form-group label {
|
|
62
|
-
font-size: 13px;
|
|
63
|
-
font-weight: 600;
|
|
64
|
-
color: #444444;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.form-group input {
|
|
68
|
-
padding: 8px 10px;
|
|
69
|
-
border: 1px solid #cccccc;
|
|
70
|
-
border-radius: 4px;
|
|
71
|
-
font-size: 14px;
|
|
72
|
-
background-color: #ffffff;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.form-group input:focus {
|
|
76
|
-
outline: none;
|
|
77
|
-
border-color: #0066cc;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.btn {
|
|
81
|
-
padding: 8px 14px;
|
|
82
|
-
border: none;
|
|
83
|
-
border-radius: 4px;
|
|
84
|
-
cursor: pointer;
|
|
85
|
-
font-size: 13px;
|
|
86
|
-
font-weight: 600;
|
|
87
|
-
transition: background-color 0.15s ease;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.btn-primary {
|
|
91
|
-
background-color: #0066cc;
|
|
92
|
-
color: #ffffff;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.btn-primary:hover {
|
|
96
|
-
background-color: #0052a3;
|
|
97
|
-
}
|
|
98
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<form @submit.prevent="handleSubmit" class="form">
|
|
3
|
+
<div class="form-group">
|
|
4
|
+
<label for="dept-name">Department Name</label>
|
|
5
|
+
<input
|
|
6
|
+
id="dept-name"
|
|
7
|
+
v-model="deptForm.name"
|
|
8
|
+
type="text"
|
|
9
|
+
required
|
|
10
|
+
placeholder="e.g. Engineering"
|
|
11
|
+
/>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="form-group">
|
|
14
|
+
<label for="dept-code">Department Code</label>
|
|
15
|
+
<input
|
|
16
|
+
id="dept-code"
|
|
17
|
+
v-model="deptForm.code"
|
|
18
|
+
type="text"
|
|
19
|
+
required
|
|
20
|
+
placeholder="e.g. ENG"
|
|
21
|
+
/>
|
|
22
|
+
</div>
|
|
23
|
+
<button type="submit" class="btn btn-primary">Add Department</button>
|
|
24
|
+
</form>
|
|
25
|
+
</template>
|
|
26
|
+
|
|
27
|
+
<script setup>
|
|
28
|
+
import { reactive } from 'vue'
|
|
29
|
+
|
|
30
|
+
const emit = defineEmits(['create-department'])
|
|
31
|
+
|
|
32
|
+
const deptForm = reactive({
|
|
33
|
+
name: '',
|
|
34
|
+
code: ''
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
const handleSubmit = () => {
|
|
38
|
+
emit('create-department', {
|
|
39
|
+
name: deptForm.name,
|
|
40
|
+
code: deptForm.code
|
|
41
|
+
})
|
|
42
|
+
deptForm.name = ''
|
|
43
|
+
deptForm.code = ''
|
|
44
|
+
}
|
|
45
|
+
</script>
|
|
46
|
+
|
|
47
|
+
<style scoped>
|
|
48
|
+
.form {
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-direction: column;
|
|
51
|
+
gap: 12px;
|
|
52
|
+
margin-bottom: 20px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.form-group {
|
|
56
|
+
display: flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
gap: 4px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.form-group label {
|
|
62
|
+
font-size: 13px;
|
|
63
|
+
font-weight: 600;
|
|
64
|
+
color: #444444;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.form-group input {
|
|
68
|
+
padding: 8px 10px;
|
|
69
|
+
border: 1px solid #cccccc;
|
|
70
|
+
border-radius: 4px;
|
|
71
|
+
font-size: 14px;
|
|
72
|
+
background-color: #ffffff;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.form-group input:focus {
|
|
76
|
+
outline: none;
|
|
77
|
+
border-color: #0066cc;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.btn {
|
|
81
|
+
padding: 8px 14px;
|
|
82
|
+
border: none;
|
|
83
|
+
border-radius: 4px;
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
font-size: 13px;
|
|
86
|
+
font-weight: 600;
|
|
87
|
+
transition: background-color 0.15s ease;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.btn-primary {
|
|
91
|
+
background-color: #0066cc;
|
|
92
|
+
color: #ffffff;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.btn-primary:hover {
|
|
96
|
+
background-color: #0052a3;
|
|
97
|
+
}
|
|
98
|
+
</style>
|