Skip to content

Commit 10e5691

Browse files
author
Pablo Alonso García
committed
First version of the AWESOME product list
1 parent bb9a65f commit 10e5691

19 files changed

+163
-441
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ coverage
1818
/cypress/screenshots/
1919

2020
# Editor directories and files
21+
.vscode/
2122
.vscode/*
2223
!.vscode/extensions.json
2324
.idea

‎.vscode/extensions.json

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎README.md

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
1-
# solid-in-vuejs
1+
# SOLID principles in Vue.js components
22

3-
This template should help get you started developing with Vue 3 in Vite.
3+
The goal of this project is to showcase how you can apply the SOLID principles to Vue.js components, by following a series of refactorings:
44

5-
## Recommended IDE Setup
5+
🎯 SRP - The Single Responsibility Principle
6+
- [Extract LocalStorageProductsService](https://github.com/alonsogarciapablo/solid-in-vuejs/tree/step-1)
67

7-
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
8+
🧵 ISP - The Interface Segregation Principle
9+
- [Extract Products view and SearchBox component](https://github.com/alonsogarciapablo/solid-in-vuejs/tree/step-2)
810

9-
## Customize configuration
11+
🚪 OCP - The Open-Closed Principle
12+
- [Extract get-product-list-item-component function](https://github.com/alonsogarciapablo/solid-in-vuejs/tree/step-3)
1013

11-
See [Vite Configuration Reference](https://vitejs.dev/config/).
14+
🧩 LSP - The Liskov Substitution Principle
15+
- [Create product-card that knows how to render a product card](https://github.com/alonsogarciapablo/solid-in-vuejs/tree/step-4)
16+
17+
🔌 DIP - The Dependency Inversion Principle
18+
- [Invert dependency between products view and productsService](https://github.com/alonsogarciapablo/solid-in-vuejs/tree/step-5)
1219

1320
## Project Setup
1421

@@ -21,15 +28,3 @@ npm install
2128
```sh
2229
npm run dev
2330
```
24-
25-
### Compile and Minify for Production
26-
27-
```sh
28-
npm run build
29-
```
30-
31-
### Lint with [ESLint](https://eslint.org/)
32-
33-
```sh
34-
npm run lint
35-
```

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<link rel="icon" href="/favicon.ico">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Vite App</title>
7+
<title>✨ AWESOME PRODUCT LIST ✨</title>
88
</head>
99
<body>
1010
<div id="app"></div>

‎src/App.vue

Lines changed: 21 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,35 @@
11
<script setup>
2-
import HelloWorld from './components/HelloWorld.vue'
3-
import TheWelcome from './components/TheWelcome.vue'
2+
import { onMounted } from 'vue';
3+
import ProductList from './components/products-list.vue';
4+
5+
const products = [
6+
{ id: 1, name: 'Product 1', imageURL: 'https://placehold.co/200x400', type: 'electronics' },
7+
{ id: 2, name: 'Product 2', imageURL: 'https://placehold.co/200x200', type: 'fashion' },
8+
{ id: 3, name: 'Product 3', imageURL: 'https://placehold.co/200x400', type: 'electronics' },
9+
{ id: 4, name: 'Product 4', imageURL: 'https://placehold.co/200x400', type: 'electronics' },
10+
{ id: 5, name: 'Product 5', imageURL: 'https://placehold.co/200x400', type: 'electronics' },
11+
{ id: 6, name: 'Product 6', imageURL: 'https://placehold.co/200x200', type: 'fashion' },
12+
{ id: 7, name: 'Product 7', imageURL: 'https://placehold.co/200x200', type: 'fashion' },
13+
{ id: 8, name: 'Product 8', imageURL: 'https://placehold.co/200x200', type: 'fashion' }
14+
]
15+
16+
onMounted(() => {
17+
localStorage.setItem('products', JSON.stringify(products));
18+
});
419
</script>
520

621
<template>
722
<header>
8-
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
9-
10-
<div class="wrapper">
11-
<HelloWorld msg="You did it!" />
12-
</div>
23+
<h1>✨ AWESOME PRODUCT LIST ✨</h1>
1324
</header>
1425

1526
<main>
16-
<TheWelcome />
27+
<product-list :showSearchBox="true" />
1728
</main>
1829
</template>
1930

2031
<style scoped>
21-
header {
22-
line-height: 1.5;
23-
}
24-
25-
.logo {
26-
display: block;
27-
margin: 0 auto 2rem;
28-
}
29-
30-
@media (min-width: 1024px) {
31-
header {
32-
display: flex;
33-
place-items: center;
34-
padding-right: calc(var(--section-gap) / 2);
35-
}
36-
37-
.logo {
38-
margin: 0 2rem 0 0;
39-
}
40-
41-
header .wrapper {
42-
display: flex;
43-
place-items: flex-start;
44-
flex-wrap: wrap;
32+
h1 {
33+
text-align: center;
4534
}
46-
}
4735
</style>

‎src/assets/base.css

Lines changed: 0 additions & 86 deletions
This file was deleted.

‎src/assets/logo.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/assets/main.css

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,7 @@
1-
@import './base.css';
2-
31
#app {
42
max-width: 1280px;
53
margin: 0 auto;
64
padding: 2rem;
75

86
font-weight: normal;
97
}
10-
11-
a,
12-
.green {
13-
text-decoration: none;
14-
color: hsla(160, 100%, 37%, 1);
15-
transition: 0.4s;
16-
}
17-
18-
@media (hover: hover) {
19-
a:hover {
20-
background-color: hsla(160, 100%, 37%, 0.2);
21-
}
22-
}
23-
24-
@media (min-width: 1024px) {
25-
body {
26-
display: flex;
27-
place-items: center;
28-
}
29-
30-
#app {
31-
display: grid;
32-
grid-template-columns: 1fr 1fr;
33-
padding: 0 2rem;
34-
}
35-
}

‎src/components/HelloWorld.vue

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎src/components/TheWelcome.vue

Lines changed: 0 additions & 88 deletions
This file was deleted.

0 commit comments

Comments
 (0)