Skip to content

Commit b9a4f97

Browse files
chibxchibx
authored
feat: replace useHead with ionic-compatible head implementation (#518)
1 parent 7a16d0e commit b9a4f97

File tree

16 files changed

+441
-66
lines changed

16 files changed

+441
-66
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ jobs:
4747
run: pnpm dev:prepare
4848

4949
- name: 🎭 Set up playwright
50-
run: pnpm playwright install
50+
run: pnpm playwright-core install
5151

5252
- name: 🧪 Test project
5353
run: pnpm test -- --coverage

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"@ionic/vue": "^8.1.2",
6161
"@ionic/vue-router": "^8.1.2",
6262
"@nuxt/kit": "^3.11.2",
63+
"@unhead/vue": "^1.9.10",
6364
"ionicons": "^7.3.1",
6465
"pathe": "^1.1.2",
6566
"pkg-types": "^1.0.3",
@@ -73,13 +74,15 @@
7374
"@nuxt/test-utils": "3.13.1",
7475
"@types/node": "20.12.12",
7576
"@vitest/coverage-v8": "1.4.0",
77+
"@vue/test-utils": "^2.4.6",
7678
"bumpp": "9.4.1",
7779
"eslint": "9.0.0",
7880
"expect-type": "0.19.0",
81+
"happy-dom": "^14.11.0",
7982
"husky": "9.0.11",
8083
"lint-staged": "15.2.2",
8184
"nuxt": "3.11.2",
82-
"playwright": "1.43.1",
85+
"playwright-core": "1.44.0",
8386
"typescript": "5.4.5",
8487
"vitest": "1.4.0",
8588
"vue": "3.4.27",

‎playground/components/ExploreContainer.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<script setup lang="ts">
2-
defineProps({ name: String })
2+
const props = defineProps({ name: String })
3+
useHead({
4+
title: `Explore Container - ${props.name}`,
5+
})
36
</script>
47

58
<template>

‎playground/pages/overlap.vue‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
<script setup lang="ts">
2+
useHead({
3+
title: 'Overlapping - no tabs',
4+
})
5+
const isExploreEnabled = ref(true)
6+
</script>
7+
18
<template>
29
<ion-page>
310
<ion-header>
@@ -8,8 +15,22 @@
815
<ion-title>Overlapping - no tabs</ion-title>
916
</ion-toolbar>
1017
</ion-header>
11-
<ion-content>
12-
<ExploreContainer name="Overlapping page" />
18+
<ion-content :fullscreen="true">
19+
<ExploreContainer
20+
v-if="isExploreEnabled"
21+
name="Overlap Page"
22+
/>
23+
<p style="text-align: center;">
24+
<ion-button
25+
class="explorer-toggle-op"
26+
fill="solid"
27+
color="primary"
28+
strong
29+
@click="isExploreEnabled = !isExploreEnabled"
30+
>
31+
Toggle Overlap Explore Container
32+
</ion-button>
33+
</p>
1334
</ion-content>
1435
</ion-page>
1536
</template>

‎playground/pages/tabs.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup lang="ts">
22
useHead({
3-
title: 'Nuxt Ionic',
3+
title: 'House Tabs',
44
})
55
</script>
66

‎playground/pages/tabs/tab1/index.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
definePageMeta({
33
alias: ['/', '/tabs'],
44
})
5+
useHead({
6+
title: 'Tab 1',
7+
})
8+
const isExploreEnabled = ref(true)
59
</script>
610

711
<template>
@@ -15,6 +19,10 @@ definePageMeta({
1519
</ion-toolbar>
1620
</ion-header>
1721
<ion-content :fullscreen="true">
22+
<ExploreContainer
23+
v-if="isExploreEnabled"
24+
name="Tab 1"
25+
/>
1826
<ion-header collapse="condense">
1927
<ion-toolbar>
2028
<ion-title size="large">
@@ -41,6 +49,18 @@ definePageMeta({
4149
</ion-badge>
4250
</ion-item>
4351
</ion-list>
52+
53+
<p style="text-align: center;">
54+
<ion-button
55+
class="explorer-toggle-1"
56+
fill="solid"
57+
color="primary"
58+
strong
59+
@click="isExploreEnabled = !isExploreEnabled"
60+
>
61+
Toggle Explore Container - Tab 1
62+
</ion-button>
63+
</p>
4464
</ion-content>
4565
</ion-page>
4666
</template>

‎playground/pages/tabs/tab2/index.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
import { actionSheetController } from '@ionic/vue'
33
import type { UserPhoto } from '~/composables/usePhotoGallery'
44
5+
useHead({
6+
title: 'Tab 2 - Photos',
7+
})
8+
59
const { photos, takePhoto, deletePhoto } = usePhotoGallery()
610
711
const showActionSheet = async (photo: UserPhoto) => {

‎playground/pages/tabs/tab3/index.vue‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
<script setup lang="ts">
2+
useHead({
3+
title: 'Tab 3',
4+
})
5+
const isExploreEnabled = ref(true)
6+
</script>
7+
18
<template>
29
<ion-page>
310
<ion-header>
@@ -19,7 +26,21 @@
1926
<ion-button router-link="/overlap">
2027
Go to overlapping page
2128
</ion-button>
22-
<ExploreContainer name="Tab 3 page" />
29+
<ExploreContainer
30+
v-if="isExploreEnabled"
31+
name="Tab 3"
32+
/>
33+
<p style="text-align: center;">
34+
<ion-button
35+
class="explorer-toggle-3"
36+
fill="solid"
37+
color="primary"
38+
strong
39+
@click="isExploreEnabled = !isExploreEnabled"
40+
>
41+
Toggle Explore Container - Tab 3
42+
</ion-button>
43+
</p>
2344
</ion-content>
2445
</ion-page>
2546
</template>

‎playground/pages/tabs/tab3/page-two.vue‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
<script setup lang="ts">
2+
useHead({
3+
title: 'Page Two - Tab 3',
4+
})
5+
const isExploreEnabled = ref(true)
6+
</script>
7+
18
<template>
29
<ion-page>
310
<ion-header>
@@ -9,7 +16,21 @@
916
</ion-toolbar>
1017
</ion-header>
1118
<ion-content>
12-
<ExploreContainer name="Tab 3 page two" />
19+
<ExploreContainer
20+
v-if="isExploreEnabled"
21+
name="Tab 3 - Page Two"
22+
/>
23+
<p style="text-align: center;">
24+
<ion-button
25+
class="explorer-toggle-p2"
26+
fill="solid"
27+
color="primary"
28+
strong
29+
@click="isExploreEnabled = !isExploreEnabled"
30+
>
31+
Toggle Explore Container - Tab 3 / Page Two
32+
</ion-button>
33+
</p>
1334
</ion-content>
1435
</ion-page>
1536
</template>

‎playground/pages/tabs/tab4/index.vue‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
<script setup lang="ts">
2+
useHead({
3+
title: 'Tab 4',
4+
})
5+
</script>
6+
17
<template>
28
<ion-page>
39
<ion-header>
@@ -32,13 +38,13 @@
3238
<div class="red-square" />
3339

3440
<div class="buttons">
35-
<IonButton @click="animation.play()">
41+
<IonButton @click="animation?.play()">
3642
Play
3743
</IonButton>
38-
<IonButton @click="animation.pause()">
44+
<IonButton @click="animation?.pause()">
3945
Pause
4046
</IonButton>
41-
<IonButton @click="animation.stop()">
47+
<IonButton @click="animation?.stop()">
4248
Stop
4349
</IonButton>
4450
</div>
@@ -64,13 +70,13 @@
6470
<div class="blue-square" />
6571

6672
<div class="buttons">
67-
<IonButton @click="animation.play()">
73+
<IonButton @click="animation?.play()">
6874
Play
6975
</IonButton>
70-
<IonButton @click="animation.pause()">
76+
<IonButton @click="animation?.pause()">
7177
Pause
7278
</IonButton>
73-
<IonButton @click="animation.stop()">
79+
<IonButton @click="animation?.stop()">
7480
Stop
7581
</IonButton>
7682
</div>
@@ -95,13 +101,13 @@
95101
<div class="green-square" />
96102

97103
<div class="buttons">
98-
<IonButton @click="animation.play()">
104+
<IonButton @click="animation?.play()">
99105
Play
100106
</IonButton>
101-
<IonButton @click="animation.pause()">
107+
<IonButton @click="animation?.pause()">
102108
Pause
103109
</IonButton>
104-
<IonButton @click="animation.stop()">
110+
<IonButton @click="animation?.stop()">
105111
Stop
106112
</IonButton>
107113
</div>
@@ -134,13 +140,13 @@
134140
<div class="red-square" />
135141

136142
<div class="buttons">
137-
<IonButton @click="animation.play()">
143+
<IonButton @click="animation?.play()">
138144
Play
139145
</IonButton>
140-
<IonButton @click="animation.pause()">
146+
<IonButton @click="animation?.pause()">
141147
Pause
142148
</IonButton>
143-
<IonButton @click="animation.stop()">
149+
<IonButton @click="animation?.stop()">
144150
Stop
145151
</IonButton>
146152
</div>
@@ -174,13 +180,13 @@
174180
<div class="blue-square" />
175181

176182
<div class="buttons">
177-
<IonButton @click="animation.play()">
183+
<IonButton @click="animation?.play()">
178184
Play
179185
</IonButton>
180-
<IonButton @click="animation.pause()">
186+
<IonButton @click="animation?.pause()">
181187
Pause
182188
</IonButton>
183-
<IonButton @click="animation.stop()">
189+
<IonButton @click="animation?.stop()">
184190
Stop
185191
</IonButton>
186192
</div>
@@ -208,13 +214,13 @@
208214
<div class="green-square" />
209215

210216
<div class="buttons">
211-
<IonButton @click="animation.play()">
217+
<IonButton @click="animation?.play()">
212218
Play
213219
</IonButton>
214-
<IonButton @click="animation.pause()">
220+
<IonButton @click="animation?.pause()">
215221
Pause
216222
</IonButton>
217-
<IonButton @click="animation.stop()">
223+
<IonButton @click="animation?.stop()">
218224
Stop
219225
</IonButton>
220226
</div>

0 commit comments

Comments
 (0)