Skip to content

Commit f4eb4f9

Browse files
mayashavinmayashavin
committed
fix: ch9
1 parent 357313b commit f4eb4f9

34 files changed

+1737
-869
lines changed

‎ch09/.prettierrc.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
1-
{}
1+
{
2+
"$schema": "https://json.schemastore.org/prettierrc",
3+
"semi": false,
4+
"tabWidth": 2,
5+
"singleQuote": true,
6+
"printWidth": 100,
7+
"trailingComma": "none"
8+
}

‎ch09/README.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# ch09
1+
# ch08
22

33
This template should help get you started developing with Vue 3 in Vite.
44

@@ -39,6 +39,12 @@ npm run dev
3939
npm run build
4040
```
4141

42+
### Run Unit Tests with [Vitest](https://vitest.dev/)
43+
44+
```sh
45+
npm run test:unit
46+
```
47+
4248
### Lint with [ESLint](https://eslint.org/)
4349

4450
```sh

‎ch09/package.json‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,35 @@
66
"dev": "vite",
77
"build": "run-p type-check build-only",
88
"preview": "vite preview",
9+
"test:unit": "vitest",
910
"build-only": "vite build",
10-
"type-check": "vue-tsc --noEmit",
11-
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
11+
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
12+
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
13+
"format": "prettier --write src/"
1214
},
1315
"dependencies": {
14-
"gsap": "^3.11.4",
15-
"vue": "^3.2.45"
16+
"pinia": "^2.0.36",
17+
"vue": "^3.3.2",
18+
"vue-router": "^4.2.0"
1619
},
1720
"devDependencies": {
18-
"@rushstack/eslint-patch": "^1.1.4",
19-
"@types/node": "^18.11.12",
20-
"@vitejs/plugin-vue": "^4.0.0",
21-
"@vue/eslint-config-prettier": "^7.0.0",
22-
"@vue/eslint-config-typescript": "^11.0.0",
23-
"@vue/tsconfig": "^0.1.3",
24-
"eslint": "^8.22.0",
25-
"eslint-plugin-vue": "^9.3.0",
21+
"@rushstack/eslint-patch": "^1.2.0",
22+
"@tsconfig/node18": "^2.0.1",
23+
"@types/jsdom": "^21.1.1",
24+
"@types/node": "^18.16.8",
25+
"@vitejs/plugin-vue": "^4.2.3",
26+
"@vue/eslint-config-prettier": "^7.1.0",
27+
"@vue/eslint-config-typescript": "^11.0.3",
28+
"@vue/test-utils": "^2.3.2",
29+
"@vue/tsconfig": "^0.4.0",
30+
"eslint": "^8.39.0",
31+
"eslint-plugin-vue": "^9.11.0",
32+
"jsdom": "^22.0.0",
2633
"npm-run-all": "^4.1.5",
27-
"prettier": "^2.7.1",
28-
"typescript": "~4.7.4",
29-
"vite": "^4.0.0",
30-
"vue-router": "4.1.6",
31-
"vue-tsc": "^1.0.12"
34+
"prettier": "^2.8.8",
35+
"typescript": "~5.0.4",
36+
"vite": "^4.3.5",
37+
"vitest": "^0.31.0",
38+
"vue-tsc": "^1.6.4"
3239
}
3340
}

‎ch09/src/App.vue‎

Lines changed: 3 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,10 @@
11
<script setup lang="ts">
22
import { RouterView } from "vue-router";
3-
import NavBar from "@/components/NavBar.vue";
4-
import { gsap } from "gsap";
5-
6-
const beforeEnter = (el: HTMLElement) => {
7-
el.style.transform = "translateX(100px)";
8-
el.style.opacity = "0";
9-
};
10-
11-
const enter = (el: HTMLElement, done: gsap.Callback) => {
12-
gsap.to(el, {
13-
duration: 1,
14-
x: 0,
15-
opacity: 1,
16-
onComplete: done,
17-
});
18-
};
19-
20-
const afterEnter = (el: HTMLElement) => {
21-
el.style.transform = "";
22-
el.style.opacity = "";
23-
};
24-
25-
const beforeLeave = (el: HTMLElement) => {
26-
el.style.transform = "";
27-
el.style.opacity = "";
28-
};
29-
30-
const leave = (el: HTMLElement, done: gsap.Callback) => {
31-
gsap.to(el, {
32-
duration: 1,
33-
x: -100,
34-
opacity: 0,
35-
onComplete: done,
36-
});
37-
}
38-
39-
40-
const afterLeave = (el: HTMLElement) => {
41-
el.style.transform = "translateX(20px)";
42-
el.style.opacity = "0";
43-
};
44-
3+
import LHeader from "@/components/LHeader.vue";
454
</script>
465
<template>
47-
<NavBar />
48-
<!-- <router-view v-slot="{ Component }">
49-
<transition name="slidein">
50-
<component :is="Component" />
51-
</transition>
52-
</router-view> -->
53-
<router-view v-slot="{ Component }">
54-
<transition
55-
@before-enter="beforeEnter"
56-
@enter="enter"
57-
@after-enter="afterEnter"
58-
@before-leave="beforeLeave"
59-
@leave="leave"
60-
@after-leave="afterLeave"
61-
:css="false"
62-
>
63-
<component :is="Component" />
64-
</transition>
65-
</router-view>
6+
<LHeader />
7+
<RouterView />
668
</template>
679
<style scoped>
6810
header {
@@ -91,26 +33,4 @@ header {
9133
flex-wrap: wrap;
9234
}
9335
}
94-
95-
96-
.slidein-enter-to {
97-
transform: translateX(0);
98-
}
99-
100-
.slidein-enter-from {
101-
transform: translateX(-100%);
102-
}
103-
104-
.slidein-leave-to {
105-
transform: translateX(100%);
106-
}
107-
108-
.slidein-leave-from {
109-
transform: translateX(0);
110-
}
111-
112-
.slidein-enter-active,
113-
.slidein-leave-active {
114-
transition: transform 0.5s;
115-
}
11636
</style>

‎ch09/src/assets/base.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@
5555
*::after {
5656
box-sizing: border-box;
5757
margin: 0;
58-
position: relative;
5958
font-weight: normal;
6059
}
6160

‎ch09/src/assets/logo.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎ch09/src/assets/pizzas.json‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
[
2+
{
3+
"id": "1",
4+
"title": "Pina Colada Pizza",
5+
"price": "10.00",
6+
"description":
7+
"A delicious combination of pineapple, coconut, and coconut milk.",
8+
"image":
9+
"https://res.cloudinary.com/mayashavin/image/upload/v1643005556/Demo/pina_colada_pizza.jpg",
10+
"quantity": 1
11+
},
12+
{
13+
"id": "2",
14+
"title": "Pepperoni Pizza",
15+
"price": "12.00",
16+
"description":
17+
"A delicious combination of pepperoni, cheese, and pineapple.",
18+
"image":
19+
"https://res.cloudinary.com/mayashavin/image/upload/v1643005556/Demo/pepperoni_pizza.jpg",
20+
"quantity": 2
21+
},
22+
{
23+
"id": "3",
24+
"title": "Veggie Pizza",
25+
"price": "9.00",
26+
"description":
27+
"A delicious combination of mushrooms, onions, and peppers.",
28+
"image":
29+
"https://res.cloudinary.com/mayashavin/image/upload/v1643005556/Demo/veggie_pizza.jpg",
30+
"quantity": 1
31+
},
32+
{
33+
"id": "4",
34+
"title": "Hawaiian Pizza",
35+
"price": "11.00",
36+
"description":
37+
"A delicious combination of ham, pineapple, and pineapple.",
38+
"quantity": 5,
39+
"image":
40+
"https://res.cloudinary.com/mayashavin/image/upload/v1643005556/Demo/hawaiian_pizza.jpg"
41+
},
42+
{
43+
"id": "5",
44+
"title": "Meat Lovers Pizza",
45+
"price": "13.00",
46+
"description":
47+
"A delicious combination of pepperoni, sausage, and bacon.",
48+
"quantity": 3,
49+
"image":
50+
"https://res.cloudinary.com/mayashavin/image/upload/v1643005556/Demo/meat_lovers_pizza.jpg"
51+
},
52+
{
53+
"id": "6",
54+
"title": "Supreme Pizza",
55+
"price": "15.00",
56+
"description":
57+
"A delicious combination of pepperoni, sausage, bacon, and pepperoni.",
58+
"quantity": 1,
59+
"image":
60+
"https://res.cloudinary.com/mayashavin/image/upload/v1643005556/Demo/supreme_pizza.jpg"
61+
}
62+
]

‎ch09/src/components/Cart.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="cart">
3+
<span class="cart__total" @click="toggleCartDetails">Cart: {{ cart.total }}</span>
4+
<div class="cart__list" v-show="showCartDetails">
5+
<div v-if="cart.total === 0">No items in cart</div>
6+
<div v-else>
7+
<ul>
8+
<li v-for="(item, index) in cart.detailedItems" :key="item.id" class="cart__list-item">
9+
<span>{{index + 1}}. {{ item.title }}</span>
10+
<span>${{ item.price }}</span> x
11+
<span>{{ item.quantity }}</span>
12+
<span>= ${{ item.total }}</span>
13+
<button @click="cart.remove(item.id)">Remove</button>
14+
</li>
15+
</ul>
16+
<button @click="cart.clear">Remove all</button>
17+
</div>
18+
</div>
19+
</div>
20+
</template>
21+
<script setup lang="ts">
22+
import { useCartStore } from '@/stores/cart'
23+
import { ref } from 'vue'
24+
25+
const cart = useCartStore();
26+
const showCartDetails = ref(false);
27+
28+
const toggleCartDetails = () => {
29+
showCartDetails.value = !showCartDetails.value;
30+
}
31+
</script>
32+
<style scoped>
33+
.cart__list {
34+
position: absolute;
35+
list-style: none;
36+
box-shadow: 2px 2px 3px #e3e0e0;
37+
border: 1px solid #e3e0e0;
38+
padding: 10px;
39+
inset-inline-end: 0;
40+
background-color: white;
41+
min-width: 500px
42+
}
43+
44+
.cart {
45+
position: relative;
46+
}
47+
48+
.cart__total {
49+
cursor: pointer;
50+
text-decoration: underline;
51+
}
52+
53+
.cart__list-item {
54+
display: flex;
55+
justify-content: space-between;
56+
align-items: center;
57+
margin-bottom: 5px;
58+
}
59+
</style>

‎ch09/src/components/HelloWorld.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
msg: string
4+
}>()
5+
</script>
6+
7+
<template>
8+
<div class="greetings">
9+
<h1 class="green">{{ msg }}</h1>
10+
<h3>
11+
You’ve successfully created a project with
12+
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
13+
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
14+
</h3>
15+
</div>
16+
</template>
17+
18+
<style scoped>
19+
h1 {
20+
font-weight: 500;
21+
font-size: 2.6rem;
22+
top: -10px;
23+
}
24+
25+
h3 {
26+
font-size: 1.2rem;
27+
}
28+
29+
.greetings h1,
30+
.greetings h3 {
31+
text-align: center;
32+
}
33+
34+
@media (min-width: 1024px) {
35+
.greetings h1,
36+
.greetings h3 {
37+
text-align: left;
38+
}
39+
}
40+
</style>

‎ch09/src/components/LHeader.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<header>
3+
<div>Pizza House</div>
4+
<!-- <NavBar /> -->
5+
<Cart />
6+
</header>
7+
</template>
8+
<script setup lang="ts">
9+
// import NavBar from './NavBar.vue';
10+
import Cart from './Cart.vue';
11+
</script>
12+
<style scoped>
13+
header {
14+
display: flex;
15+
justify-content: space-between;
16+
padding: 0;
17+
}
18+
</style>

0 commit comments

Comments
 (0)