Skip to content

Commit 4a692d2

Browse files
TommertomTommertom
Tommertom
authored and
Tommertom
committed
More ionic7 stuff
1 parent ca49593 commit 4a692d2

File tree

17 files changed

+759
-234
lines changed

17 files changed

+759
-234
lines changed

‎CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
# Change Log Ionic-Svelte-NPM
22
All notable changes to this project will be documented in this file.
33

4+
## 0.5.79
5+
- support for a href and goto routing for IonTabs - solving https://github.com/Tommertom/svelte-ionic-app/issues/76
6+
- this may create an issue with slug navigation - will test later
7+
8+
## 0.5.78
9+
- migrated the demo-app - see MIGRATION.md https://github.com/Tommertom/svelte-ionic-app/blob/mainMIGRATION.md on how I did so
10+
11+
412
## 0.5.77
513
- Bumped to 7.0.3 - including creator scripts
614
- Fix on MenuI

‎components/IonTabs.svelte

Lines changed: 83 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,96 @@
11
<script>
2-
// @ts-nocheck
3-
import { onMount } from 'svelte';
4-
import { page } from '$app/stores';
2+
// @ts-nocheck
3+
import { onMount } from "svelte";
4+
import { navigating } from "$app/stores";
5+
import { page } from "$app/stores";
56
6-
import { goto } from '$app/navigation';
7+
import { goto } from "$app/navigation";
78
8-
export let ionTabsDidChange = () => {};
9-
export let ionTabsWillChange = () => {};
10-
export let slot = 'bottom';
11-
export let tabs = [];
9+
export let ionTabsDidChange = () => {};
10+
export let ionTabsWillChange = () => {};
11+
export let slot = "bottom";
1212
13-
let ionTabBarElement;
14-
let controller;
13+
/**
14+
An array of tab objects containing label, icon, and tab properties.
15+
@type {{label: string; icon: string; tab: string;}[]}
16+
*/
17+
export let tabs = [];
1518
16-
// we need relative path for the goto to function properly and to allow for relative tab definitions
17-
const { pathname } = $page.url;
18-
const pathSplit = pathname.split('/');
19-
let currentTabName = pathSplit[pathSplit.length - 1]; // we don't want to use at(-1) because of old browsers
20-
const relativePath = pathname.replace(currentTabName, '');
19+
let ionTabBarElement;
20+
let controller;
2121
22-
onMount(async () => {
23-
// reassignment needed after onMount
24-
controller = ionTabBarElement;
25-
controller.select(currentTabName);
26-
});
22+
// we need relative path for the goto to function properly and to allow for relative tab definitions
23+
const { pathname } = $page.url;
24+
const pathSplit = pathname.split("/");
25+
let currentTabName = pathSplit[pathSplit.length - 1]; // we don't want to use at(-1) because of old browsers
26+
const relativePath = pathname.replace(currentTabName, "");
2727
28-
const tabBarClick = async (selectedTab) => {
29-
currentTabName = selectedTab;
30-
await goto(relativePath + selectedTab);
31-
controller.select(selectedTab);
32-
};
28+
// we need to capture the router changes - to support a-href navigation and other stuff
29+
$: if ($navigating && $navigating.to) {
30+
tabs.forEach(async (tab) => {
31+
if ($navigating.to.url.pathname.includes(relativePath + tab.tab)) {
32+
currentTabName = tab.tab;
33+
await goto(relativePath + tab.tab);
34+
controller.select(tab.tab);
35+
}
36+
});
37+
}
38+
39+
onMount(async () => {
40+
// reassignment needed after onMount
41+
controller = ionTabBarElement;
42+
controller.select(currentTabName);
43+
});
44+
45+
const tabBarClick = async (selectedTab) => {
46+
currentTabName = selectedTab;
47+
await goto(relativePath + selectedTab);
48+
controller.select(selectedTab);
49+
};
3350
</script>
3451

3552
<ion-tabs
36-
on:ionTabsDidChange={ionTabsDidChange}
37-
on:ionTabsWillChange={ionTabsWillChange}
38-
bind:this={ionTabBarElement}>
39-
<slot />
53+
on:ionTabsDidChange={ionTabsDidChange}
54+
on:ionTabsWillChange={ionTabsWillChange}
55+
bind:this={ionTabBarElement}
56+
>
57+
<slot />
4058

41-
{#if slot === 'bottom' || slot === ''}
42-
<ion-tab-bar slot="bottom">
43-
{#each tabs as tab}
44-
<ion-tab-button
45-
tab={tab.tab}
46-
on:keydown={() => {
47-
tabBarClick(tab.tab);
48-
}}
49-
on:click={() => {
50-
tabBarClick(tab.tab);
51-
}}>
52-
<ion-label>{tab.label}</ion-label>
53-
<ion-icon icon={tab.icon} />
54-
</ion-tab-button>
55-
{/each}
56-
</ion-tab-bar>
57-
{/if}
59+
{#if slot === "bottom" || slot === ""}
60+
<ion-tab-bar slot="bottom">
61+
{#each tabs as tab}
62+
<ion-tab-button
63+
tab={tab.tab}
64+
on:keydown={() => {
65+
tabBarClick(tab.tab);
66+
}}
67+
on:click={() => {
68+
tabBarClick(tab.tab);
69+
}}
70+
>
71+
<ion-label>{tab.label}</ion-label>
72+
<ion-icon icon={tab.icon} />
73+
</ion-tab-button>
74+
{/each}
75+
</ion-tab-bar>
76+
{/if}
5877

59-
{#if slot === 'top'}
60-
<ion-tab-bar slot="top">
61-
{#each tabs as tab}
62-
<ion-tab-button
63-
tab={tab.tab}
64-
on:keydown={() => {
65-
tabBarClick(tab.tab);
66-
}}
67-
on:click={() => {
68-
tabBarClick(tab.tab);
69-
}}>
70-
<ion-label>{tab.label}</ion-label>
71-
<ion-icon icon={tab.icon} />
72-
</ion-tab-button>
73-
{/each}
74-
</ion-tab-bar>
75-
{/if}
78+
{#if slot === "top"}
79+
<ion-tab-bar slot="top">
80+
{#each tabs as tab}
81+
<ion-tab-button
82+
tab={tab.tab}
83+
on:keydown={() => {
84+
tabBarClick(tab.tab);
85+
}}
86+
on:click={() => {
87+
tabBarClick(tab.tab);
88+
}}
89+
>
90+
<ion-label>{tab.label}</ion-label>
91+
<ion-icon icon={tab.icon} />
92+
</ion-tab-button>
93+
{/each}
94+
</ion-tab-bar>
95+
{/if}
7696
</ion-tabs>

‎demo-app/MIGRATION.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Migrating to Ionic 7 from Ionic 6
2+
So these are the steps I took to migrate the Ionic demo from Ionic 6 to Ionic 7:
3+
4+
* npm i [email protected]
5+
* npm i @ionic/core@7.0.2
6+
(or take the latest version as you can see https://www.npmjs.com/package/ionic-svelte)
7+
* npm cache clean --force - possibly not necessary ion your end, but it was on mine
8+
* update ionic components as per https://ionicframework.com/docs/updating/7-0
9+
* but even better - look at the breaking changes https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-7x
10+
* and the warnings you get especially on the forms-related components - see https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax
11+
* implemented Slides via Swiper 9 (webcomponents) - https://swiperjs.com/element:
12+
- npm install swiper
13+
- configure as ion-slides was doing https://ionicframework.com/docs/angular/slides
14+
- styling https://ionicframework.com/docs/angular/slides#additional-ion-slides-styles
15+
- fix styling problem - add `flex-direction: column;` for `swiper-slide`
16+
- check events https://ionicframework.com/docs/angular/slides#events
17+
18+
* started implementing superforms as forms library https://superforms.vercel.app/, see Inputs. Issues:
19+
- input in form fields are not detected
20+
- hence likely the client side validation fails
21+
- how to do do the multi-input item with ion-label (now giving Ionic warning)

0 commit comments

Comments
 (0)