Skip to content

Commit d1a338b

Browse files
oskaldevoskaldev
committed
refactor: decomposed code and moved todos to components
- Moved todo-related components to `components/todos` - Updated component imports accordingly - Improved project structure for better maintainability and scalability
1 parent 3cbc983 commit d1a338b

File tree

9 files changed

+115
-66
lines changed

9 files changed

+115
-66
lines changed

‎public/style.css

+4-1
Original file line numberDiff line numberDiff line change
@@ -266,5 +266,8 @@ button {
266266
.app-footer {
267267
font-size: 1.4rem;
268268
text-align: center;
269-
color: var(--secondary-color);
269+
color: var(--default-color);
270+
border: 1px solid var(--default-color);
271+
border-radius: 10px;
272+
padding: 5px;
270273
}

‎src/App.vue

+10-65
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,16 @@
11
<template>
2-
<header class="app-header">
3-
<span class="logo">TODOS</span>
4-
</header>
5-
6-
<aside class="app-filters">
7-
<section class="toggle-group">
8-
<button class="button button--primary">All</button>
9-
<button class="button">Active</button>
10-
<button class="button">Done</button>
11-
</section>
12-
</aside>
13-
14-
<main class="app-main">
15-
<ul class="todo-list">
16-
<li class="todo-item todo-item--done">
17-
<div class="todo-item__status">
18-
<i class="bi bi-check2"></i>
19-
</div>
20-
<span class="todo-item__text">Learn the basics of Vue</span>
21-
<button class="todo-item__remove-button">
22-
<i class="bi bi-trash3"></i>
23-
</button>
24-
</li>
25-
<li class="todo-item">
26-
<div class="todo-item__status">
27-
<i class="bi bi-check2"></i>
28-
</div>
29-
<span class="todo-item__text">Learn the basics of Typescript</span>
30-
<button class="todo-item__remove-button">
31-
<i class="bi bi-trash3"></i>
32-
</button>
33-
</li>
34-
<li class="todo-item">
35-
<div class="todo-item__status">
36-
<i class="bi bi-check2"></i>
37-
</div>
38-
<span class="todo-item__text">Subscribe to the channel</span>
39-
<button class="todo-item__remove-button">
40-
<i class="bi bi-trash3"></i>
41-
</button>
42-
</li>
43-
</ul>
44-
45-
<section class="add-todo">
46-
<button class="add-todo__show-form-button">
47-
<i class="bi bi-plus-lg"></i>
48-
</button>
49-
<form class="add-todo__form">
50-
<button class="close-button" type="button">
51-
<i class="bi bi-x"></i>
52-
</button>
53-
<div class="text-input text-input--focus">
54-
<input class="input" />
55-
</div>
56-
<button class="button button--filled">Add task</button>
57-
</form>
58-
</section>
59-
</main>
60-
61-
<footer class="app-footer">2 more to do, 1 done</footer>
2+
<HomePage />
623
</template>
634

64-
<script>
65-
export default {
66-
components: {
67-
},
68-
}
5+
<script lang="ts">
6+
import { defineComponent } from 'vue'
7+
import HomePage from './views/HomePage.vue'
8+
9+
export default defineComponent({
10+
components: {
11+
HomePage
12+
},
13+
})
6914
</script>
7015

7116
<style scoped></style>

‎src/components/todos/AppAddTodo.vue

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<section class="add-todo">
3+
<button class="add-todo__show-form-button">
4+
<i class="bi bi-plus-lg"></i>
5+
</button>
6+
<form class="add-todo__form">
7+
<button class="close-button" type="button">
8+
<i class="bi bi-x"></i>
9+
</button>
10+
<div class="text-input text-input--focus">
11+
<input class="input" />
12+
</div>
13+
<button class="button button--filled">Add task</button>
14+
</form>
15+
</section>
16+
</template>

‎src/components/todos/AppFiltersTodo.vue

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<aside class="app-filters">
3+
<section class="toggle-group">
4+
<button class="button button--primary">All</button>
5+
<button class="button">Active</button>
6+
<button class="button">Done</button>
7+
</section>
8+
</aside>
9+
</template>
10+
<style scoped></style>

‎src/components/todos/AppFooterTodo.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<footer class="app-footer">2 more to do, 1 done</footer>
3+
</template>

‎src/components/todos/AppHeaderTodo.vue

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<header class="app-header">
3+
<span class="logo">TODOS</span>
4+
</header>
5+
</template>
6+
<style scoped></style>

‎src/components/todos/AppListTodo.vue

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<ul class="todo-list">
3+
<li class="todo-item todo-item--done">
4+
<div class="todo-item__status">
5+
<i class="bi bi-check2"></i>
6+
</div>
7+
<span class="todo-item__text">Learn the basics of Vue</span>
8+
<button class="todo-item__remove-button">
9+
<i class="bi bi-trash3"></i>
10+
</button>
11+
</li>
12+
<li class="todo-item">
13+
<div class="todo-item__status">
14+
<i class="bi bi-check2"></i>
15+
</div>
16+
<span class="todo-item__text">Learn the basics of Typescript</span>
17+
<button class="todo-item__remove-button">
18+
<i class="bi bi-trash3"></i>
19+
</button>
20+
</li>
21+
<li class="todo-item">
22+
<div class="todo-item__status">
23+
<i class="bi bi-check2"></i>
24+
</div>
25+
<span class="todo-item__text">Subscribe to the channel</span>
26+
<button class="todo-item__remove-button">
27+
<i class="bi bi-trash3"></i>
28+
</button>
29+
</li>
30+
</ul>
31+
</template>
32+
33+
<style scoped></style>

‎src/components/todos/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import AppFiltersTodo from "./AppFiltersTodo.vue"
2+
import AppHeaderTodo from "./AppHeaderTodo.vue"
3+
import AppListTodo from "./AppListTodo.vue"
4+
import AppAddTodo from "./AppAddTodo.vue"
5+
import AppFooterTodo from "./AppFooterTodo.vue"
6+
7+
export { AppFiltersTodo, AppHeaderTodo, AppListTodo, AppAddTodo, AppFooterTodo }

‎src/views/HomePage.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<AppHeaderTodo />
3+
<AppFiltersTodo />
4+
<main class="app-main">
5+
<AppListTodo />
6+
<AppAddTodo />
7+
</main>
8+
<AppFooterTodo />
9+
</template>
10+
11+
<script lang="ts">
12+
import { defineComponent } from 'vue'
13+
import { AppAddTodo, AppFiltersTodo, AppHeaderTodo, AppListTodo, AppFooterTodo } from '../components/todos'
14+
15+
export default defineComponent({
16+
components: {
17+
AppAddTodo,
18+
AppFiltersTodo,
19+
AppHeaderTodo,
20+
AppListTodo,
21+
AppFooterTodo
22+
},
23+
})
24+
</script>
25+
26+
<style scoped></style>

0 commit comments

Comments
 (0)