create-nix-app 1.0.12 → 1.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/template-nix-ionic/package.json +1 -1
- package/template-nix-ionic/src/types/css.d.ts +11 -0
- package/template-nix-ionic-tabs/README.md +2 -2
- package/template-nix-ionic-tabs/package.json +1 -1
- package/template-nix-ionic-tabs/src/pages/HomePage.ts +6 -5
- package/template-nix-ionic-tabs/src/pages/LoginPage.ts +14 -16
- package/template-nix-ionic-tabs/src/pages/MapPage.ts +18 -21
- package/template-nix-ionic-tabs/src/pages/ProfilePage.ts +4 -4
- package/template-nix-ionic-tabs/src/style.css +30 -5
- package/template-nix-ionic-tabs/src/types/css.d.ts +11 -0
- package/template-vanilla-js/index.html +1 -1
- package/template-vanilla-ts/index.html +1 -1
- package/template-vanilla-ts/package.json +1 -1
- package/template-vite-js/package.json +1 -1
- package/template-vite-ts/package.json +1 -1
package/package.json
CHANGED
|
@@ -4,8 +4,8 @@ Complete starter template with:
|
|
|
4
4
|
|
|
5
5
|
- `IonRouterOutlet` route definitions and guards
|
|
6
6
|
- `createBottomTabBar()` bottom navigation
|
|
7
|
-
- `
|
|
8
|
-
- `
|
|
7
|
+
- `nixRouter()` navigation actions
|
|
8
|
+
- `nixRouterState()` reactive route state
|
|
9
9
|
- `setupNixIonic({ icons })` custom icon registration
|
|
10
10
|
|
|
11
11
|
## Quick Start
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { html } from "@deijose/nix-js";
|
|
2
|
-
import { IonPage,
|
|
2
|
+
import { IonPage, nixRouter } from "@deijose/nix-ionic";
|
|
3
3
|
import type { PageContext } from "@deijose/nix-ionic";
|
|
4
4
|
|
|
5
5
|
export class HomePage extends IonPage {
|
|
@@ -8,7 +8,7 @@ export class HomePage extends IonPage {
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
override render() {
|
|
11
|
-
const router =
|
|
11
|
+
const router = nixRouter();
|
|
12
12
|
|
|
13
13
|
return html`
|
|
14
14
|
<ion-header>
|
|
@@ -16,7 +16,7 @@ export class HomePage extends IonPage {
|
|
|
16
16
|
<ion-title>Home</ion-title>
|
|
17
17
|
</ion-toolbar>
|
|
18
18
|
</ion-header>
|
|
19
|
-
|
|
19
|
+
|
|
20
20
|
<ion-content class="ion-padding">
|
|
21
21
|
<ion-card>
|
|
22
22
|
<ion-card-header>
|
|
@@ -25,8 +25,9 @@ export class HomePage extends IonPage {
|
|
|
25
25
|
</ion-card-header>
|
|
26
26
|
<ion-card-content>
|
|
27
27
|
<p>This page is protected by <code>beforeEnter</code> and rendered inside Ionic's router outlet.</p>
|
|
28
|
-
<ion-button expand="block" @click=${()
|
|
29
|
-
<ion-button expand="block" fill="outline" @click=${()
|
|
28
|
+
<ion-button expand="block" @click=${()=> router.navigate("/map", "root")}>Open Map Tab</ion-button>
|
|
29
|
+
<ion-button expand="block" fill="outline" @click=${()=> router.navigate("/profile", "root")}>Go to Profile Tab
|
|
30
|
+
</ion-button>
|
|
30
31
|
</ion-card-content>
|
|
31
32
|
</ion-card>
|
|
32
33
|
</ion-content>
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { html } from "@deijose/nix-js";
|
|
2
|
-
import { IonPage,
|
|
2
|
+
import { IonPage, nixRouter } from "@deijose/nix-ionic";
|
|
3
3
|
import type { PageContext } from "@deijose/nix-ionic";
|
|
4
4
|
import { authStore } from "../stores/auth";
|
|
5
5
|
|
|
6
6
|
export class LoginPage extends IonPage {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
constructor(ctx: PageContext) {
|
|
8
|
+
super(ctx.lc);
|
|
9
|
+
}
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
override render() {
|
|
12
|
+
const router = nixRouter();
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
return html`
|
|
15
15
|
<ion-header>
|
|
16
16
|
<ion-toolbar>
|
|
17
17
|
<ion-title>Login</ion-title>
|
|
18
18
|
</ion-toolbar>
|
|
19
19
|
</ion-header>
|
|
20
|
-
|
|
20
|
+
|
|
21
21
|
<ion-content class="ion-padding login-page">
|
|
22
22
|
<ion-card>
|
|
23
23
|
<ion-card-header>
|
|
@@ -25,13 +25,11 @@ export class LoginPage extends IonPage {
|
|
|
25
25
|
<ion-card-subtitle>Login to unlock tabs and pages</ion-card-subtitle>
|
|
26
26
|
</ion-card-header>
|
|
27
27
|
<ion-card-content>
|
|
28
|
-
<ion-button
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}}
|
|
34
|
-
>
|
|
28
|
+
<ion-button expand="block" @click=${()=> {
|
|
29
|
+
authStore.login();
|
|
30
|
+
router.replace("/");
|
|
31
|
+
}}
|
|
32
|
+
>
|
|
35
33
|
<ion-icon slot="start" name="log-in-outline"></ion-icon>
|
|
36
34
|
Sign in
|
|
37
35
|
</ion-button>
|
|
@@ -39,5 +37,5 @@ export class LoginPage extends IonPage {
|
|
|
39
37
|
</ion-card>
|
|
40
38
|
</ion-content>
|
|
41
39
|
`;
|
|
42
|
-
|
|
40
|
+
}
|
|
43
41
|
}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import { html } from "@deijose/nix-js";
|
|
2
|
-
import { IonPage,
|
|
2
|
+
import { IonPage, nixRouter } from "@deijose/nix-ionic";
|
|
3
3
|
import type { PageContext } from "@deijose/nix-ionic";
|
|
4
4
|
|
|
5
5
|
const demoRoutes = [
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
{ id: "101", name: "Mountain Loop" },
|
|
7
|
+
{ id: "102", name: "Coastal Ride" },
|
|
8
|
+
{ id: "103", name: "City Night Route" },
|
|
9
9
|
];
|
|
10
10
|
|
|
11
11
|
export class MapPage extends IonPage {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
constructor(ctx: PageContext) {
|
|
13
|
+
super(ctx.lc);
|
|
14
|
+
}
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
override render() {
|
|
17
|
+
const router = nixRouter();
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
return html`
|
|
20
20
|
<ion-header>
|
|
21
21
|
<ion-toolbar>
|
|
22
22
|
<ion-title>Map</ion-title>
|
|
23
23
|
</ion-toolbar>
|
|
24
24
|
</ion-header>
|
|
25
|
-
|
|
25
|
+
|
|
26
26
|
<ion-content class="ion-padding">
|
|
27
27
|
<ion-card>
|
|
28
28
|
<ion-card-header>
|
|
@@ -31,19 +31,16 @@ export class MapPage extends IonPage {
|
|
|
31
31
|
</ion-card-header>
|
|
32
32
|
<ion-card-content>
|
|
33
33
|
${demoRoutes.map(
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
${route.name}
|
|
41
|
-
</ion-button>
|
|
42
|
-
`,
|
|
34
|
+
(route) => html`
|
|
35
|
+
<ion-button expand="block" fill="outline" @click=${()=> router.navigate(`/map/route/${route.id}`)}
|
|
36
|
+
>
|
|
37
|
+
${route.name}
|
|
38
|
+
</ion-button>
|
|
39
|
+
`,
|
|
43
40
|
)}
|
|
44
41
|
</ion-card-content>
|
|
45
42
|
</ion-card>
|
|
46
43
|
</ion-content>
|
|
47
44
|
`;
|
|
48
|
-
|
|
45
|
+
}
|
|
49
46
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { html } from "@deijose/nix-js";
|
|
2
|
-
import { IonPage,
|
|
2
|
+
import { IonPage, nixRouter, nixRouterState } from "@deijose/nix-ionic";
|
|
3
3
|
import type { PageContext } from "@deijose/nix-ionic";
|
|
4
4
|
import { authStore } from "../stores/auth";
|
|
5
5
|
|
|
@@ -9,8 +9,8 @@ export class ProfilePage extends IonPage {
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
override render() {
|
|
12
|
-
const router =
|
|
13
|
-
const routerState =
|
|
12
|
+
const router = nixRouter();
|
|
13
|
+
const routerState = nixRouterState();
|
|
14
14
|
|
|
15
15
|
return html`
|
|
16
16
|
<ion-header>
|
|
@@ -23,7 +23,7 @@ export class ProfilePage extends IonPage {
|
|
|
23
23
|
<ion-card>
|
|
24
24
|
<ion-card-header>
|
|
25
25
|
<ion-card-title>Router State Demo</ion-card-title>
|
|
26
|
-
<ion-card-subtitle>Reactive path and params from
|
|
26
|
+
<ion-card-subtitle>Reactive path and params from nixRouterState()</ion-card-subtitle>
|
|
27
27
|
</ion-card-header>
|
|
28
28
|
<ion-card-content>
|
|
29
29
|
<p><strong>Current path:</strong> ${() => routerState.path.value}</p>
|
|
@@ -7,15 +7,34 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
ion-content {
|
|
10
|
-
--padding-bottom:
|
|
10
|
+
--padding-bottom: calc(88px + env(safe-area-inset-bottom));
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.app-tab-bar {
|
|
14
|
+
position: fixed;
|
|
15
|
+
left: 0;
|
|
16
|
+
right: 0;
|
|
17
|
+
bottom: 0;
|
|
18
|
+
z-index: 1000;
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: stretch;
|
|
21
|
+
min-height: 64px;
|
|
22
|
+
padding-bottom: env(safe-area-inset-bottom);
|
|
23
|
+
|
|
14
24
|
--background: #ffffff;
|
|
15
|
-
--color:
|
|
16
|
-
--color-selected:
|
|
25
|
+
--color: #6b7280;
|
|
26
|
+
--color-selected: #2563eb;
|
|
27
|
+
--border: 0;
|
|
28
|
+
|
|
17
29
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
18
|
-
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.
|
|
30
|
+
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.app-tab-bar ion-tab-button {
|
|
34
|
+
min-height: 64px;
|
|
35
|
+
font-size: 11px;
|
|
36
|
+
letter-spacing: 0.02em;
|
|
37
|
+
text-transform: none;
|
|
19
38
|
}
|
|
20
39
|
|
|
21
40
|
.app-tab-bar ion-tab-button.tab-active {
|
|
@@ -23,7 +42,13 @@ ion-content {
|
|
|
23
42
|
}
|
|
24
43
|
|
|
25
44
|
.app-tab-bar ion-tab-button ion-icon {
|
|
26
|
-
font-size: 1.
|
|
45
|
+
font-size: 1.2rem;
|
|
46
|
+
margin-bottom: 2px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.app-tab-bar ion-tab-button.tab-active ion-icon,
|
|
50
|
+
.app-tab-bar ion-tab-button.tab-active ion-label {
|
|
51
|
+
color: #2563eb;
|
|
27
52
|
}
|
|
28
53
|
|
|
29
54
|
.login-page {
|