@turnipxenon/pineapple 5.0.0-alpha.5 → 5.0.0-alpha.6
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/dist/external/paraglide/messages/_index.d.ts.map +1 -1
- package/dist/external/paraglide/messages/_index.js +5 -3
- package/dist/external/paraglide/messages/en.js +1 -1
- package/dist/external/paraglide/messages/fr.js +1 -1
- package/dist/external/paraglide/messages/tl.js +1 -1
- package/dist/external/paraglide/messages.js +1 -1
- package/dist/external/paraglide/registry.js +1 -1
- package/dist/external/paraglide/runtime.d.ts +8 -189
- package/dist/external/paraglide/runtime.d.ts.map +1 -1
- package/dist/external/paraglide/runtime.js +90 -426
- package/dist/external/paraglide/server.d.ts +2 -4
- package/dist/external/paraglide/server.d.ts.map +1 -1
- package/dist/external/paraglide/server.js +20 -21
- package/dist/ui/components/MeltToaster/MeltToaster.svelte +61 -61
- package/dist/ui/components/ModalBase.svelte.d.ts +1 -8
- package/dist/ui/components/ModalBase.svelte.d.ts.map +1 -1
- package/dist/ui/components/NestedNavigation.svelte +106 -106
- package/dist/ui/components/accordion/PinyaAccordion.svelte.d.ts +1 -2
- package/dist/ui/components/accordion/PinyaAccordion.svelte.d.ts.map +1 -1
- package/dist/ui/components/accordion/PinyaAccordionItem.svelte.d.ts +1 -2
- package/dist/ui/components/accordion/PinyaAccordionItem.svelte.d.ts.map +1 -1
- package/dist/ui/elements/ImageIcon.svelte.d.ts +1 -4
- package/dist/ui/elements/ImageIcon.svelte.d.ts.map +1 -1
- package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte.d.ts +1 -2
- package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte.d.ts.map +1 -1
- package/dist/ui/elements/PinyaButton/PinyaButton.svelte.d.ts +1 -2
- package/dist/ui/elements/PinyaButton/PinyaButton.svelte.d.ts.map +1 -1
- package/dist/ui/elements/PinyaCard/PinyaCard.svelte.d.ts +1 -2
- package/dist/ui/elements/PinyaCard/PinyaCard.svelte.d.ts.map +1 -1
- package/dist/ui/elements/Placeholder.svelte.d.ts +1 -6
- package/dist/ui/elements/Placeholder.svelte.d.ts.map +1 -1
- package/dist/ui/elements/TextLink.svelte.d.ts +1 -2
- package/dist/ui/elements/TextLink.svelte.d.ts.map +1 -1
- package/package.json +16 -17
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
*
|
|
18
18
|
* @param {Request} request - The incoming request object
|
|
19
19
|
* @param {(args: { request: Request, locale: import("./runtime.js").Locale }) => T | Promise<T>} resolve - Function to handle the request
|
|
20
|
-
*
|
|
20
|
+
*
|
|
21
21
|
* @returns {Promise<Response>}
|
|
22
22
|
*
|
|
23
23
|
* @example
|
|
@@ -62,7 +62,5 @@
|
|
|
62
62
|
export function paraglideMiddleware<T>(request: Request, resolve: (args: {
|
|
63
63
|
request: Request;
|
|
64
64
|
locale: import("./runtime.js").Locale;
|
|
65
|
-
}) => T | Promise<T
|
|
66
|
-
onRedirect: (response: Response) => void;
|
|
67
|
-
}): Promise<Response>;
|
|
65
|
+
}) => T | Promise<T>): Promise<Response>;
|
|
68
66
|
//# sourceMappingURL=server.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../src/lib/external/paraglide/server.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,oCA9Ca,CAAC,WAEH,OAAO,WACP,CAAC,IAAI,EAAE;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,OAAO,cAAc,EAAE,MAAM,CAAA;CAAE,KAAK,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../../src/lib/external/paraglide/server.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,oCA9Ca,CAAC,WAEH,OAAO,WACP,CAAC,IAAI,EAAE;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,OAAO,cAAc,EAAE,MAAM,CAAA;CAAE,KAAK,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,GAEnF,OAAO,CAAC,QAAQ,CAAC,CAqG7B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
// eslint-disable
|
|
2
2
|
|
|
3
3
|
import * as runtime from "./runtime.js";
|
|
4
4
|
|
|
@@ -21,7 +21,7 @@ import * as runtime from "./runtime.js";
|
|
|
21
21
|
*
|
|
22
22
|
* @param {Request} request - The incoming request object
|
|
23
23
|
* @param {(args: { request: Request, locale: import("./runtime.js").Locale }) => T | Promise<T>} resolve - Function to handle the request
|
|
24
|
-
*
|
|
24
|
+
*
|
|
25
25
|
* @returns {Promise<Response>}
|
|
26
26
|
*
|
|
27
27
|
* @example
|
|
@@ -63,7 +63,7 @@ import * as runtime from "./runtime.js";
|
|
|
63
63
|
* };
|
|
64
64
|
* ```
|
|
65
65
|
*/
|
|
66
|
-
export async function paraglideMiddleware(request, resolve
|
|
66
|
+
export async function paraglideMiddleware(request, resolve) {
|
|
67
67
|
if (!runtime.disableAsyncLocalStorage && !runtime.serverAsyncLocalStorage) {
|
|
68
68
|
const { AsyncLocalStorage } = await import("async_hooks");
|
|
69
69
|
runtime.overwriteServerAsyncLocalStorage(new AsyncLocalStorage());
|
|
@@ -71,29 +71,16 @@ export async function paraglideMiddleware(request, resolve, callbacks) {
|
|
|
71
71
|
else if (!runtime.serverAsyncLocalStorage) {
|
|
72
72
|
runtime.overwriteServerAsyncLocalStorage(createMockAsyncLocalStorage());
|
|
73
73
|
}
|
|
74
|
-
const
|
|
75
|
-
const locale = decision.locale;
|
|
74
|
+
const locale = runtime.extractLocaleFromRequest(request);
|
|
76
75
|
const origin = new URL(request.url).origin;
|
|
77
76
|
// if the client makes a request to a URL that doesn't match
|
|
78
77
|
// the localizedUrl, redirect the client to the localized URL
|
|
79
78
|
if (request.headers.get("Sec-Fetch-Dest") === "document" &&
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
const headers = {};
|
|
85
|
-
if (runtime.strategy.includes("preferredLanguage")) {
|
|
86
|
-
headers["Vary"] = "Accept-Language";
|
|
79
|
+
runtime.strategy.includes("url")) {
|
|
80
|
+
const localizedUrl = runtime.localizeUrl(request.url, { locale });
|
|
81
|
+
if (normalizeURL(localizedUrl.href) !== normalizeURL(request.url)) {
|
|
82
|
+
return Response.redirect(localizedUrl, 307);
|
|
87
83
|
}
|
|
88
|
-
const response = new Response(null, {
|
|
89
|
-
status: 307,
|
|
90
|
-
headers: {
|
|
91
|
-
Location: decision.redirectUrl.href,
|
|
92
|
-
...headers,
|
|
93
|
-
},
|
|
94
|
-
});
|
|
95
|
-
callbacks?.onRedirect(response);
|
|
96
|
-
return response;
|
|
97
84
|
}
|
|
98
85
|
// If the strategy includes "url", we need to de-localize the URL
|
|
99
86
|
// before passing it to the server middleware.
|
|
@@ -137,6 +124,18 @@ export async function paraglideMiddleware(request, resolve, callbacks) {
|
|
|
137
124
|
}
|
|
138
125
|
return response;
|
|
139
126
|
}
|
|
127
|
+
/**
|
|
128
|
+
* Normalize url for comparison.
|
|
129
|
+
* Strips trailing slash
|
|
130
|
+
* @param {string} url
|
|
131
|
+
* @returns {string} normalized url string
|
|
132
|
+
*/
|
|
133
|
+
function normalizeURL(url) {
|
|
134
|
+
const urlObj = new URL(url);
|
|
135
|
+
// // strip trailing slash from pathname
|
|
136
|
+
urlObj.pathname = urlObj.pathname.replace(/\/$/, "");
|
|
137
|
+
return urlObj.href;
|
|
138
|
+
}
|
|
140
139
|
/**
|
|
141
140
|
* Creates a mock AsyncLocalStorage implementation for environments where
|
|
142
141
|
* native AsyncLocalStorage is not available or disabled.
|
|
@@ -1,65 +1,65 @@
|
|
|
1
1
|
<!-- TODO: Documentation: consider documentation showcase -->
|
|
2
2
|
|
|
3
|
-
<script lang="ts" module>
|
|
4
|
-
import type { ToastSettings } from "./ToastSettings";
|
|
5
|
-
import { Toaster } from "melt/builders";
|
|
6
|
-
|
|
7
|
-
// const toaster = new Toaster<ToastSettings>({ closeDelay: 0 });
|
|
8
|
-
const toaster = new Toaster<ToastSettings>();
|
|
9
|
-
|
|
10
|
-
export const addToast = toaster.addToast;
|
|
11
|
-
</script>
|
|
12
|
-
|
|
13
|
-
<script lang="ts">
|
|
14
|
-
import { onDestroy, onMount } from "svelte";
|
|
15
|
-
|
|
16
|
-
let toasterRoot: HTMLDivElement;
|
|
17
|
-
let observer = $state<MutationObserver>();
|
|
18
|
-
|
|
19
|
-
onMount(() => {
|
|
20
|
-
// from https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
|
|
21
|
-
observer = new MutationObserver((mutationList) => {
|
|
22
|
-
for (const mutation of mutationList) {
|
|
23
|
-
if (mutation.type === "childList") {
|
|
24
|
-
setTimeout(() => {
|
|
25
|
-
// get all toasterRoot children
|
|
26
|
-
const children = Array.from(toasterRoot.children);
|
|
27
|
-
children.forEach((child, index) => {
|
|
28
|
-
const revNum = Math.min(Math.abs(children.length - 1 - index), 5);
|
|
29
|
-
child.style.setProperty("--toast-index", index.toString());
|
|
30
|
-
child.style.setProperty("--toast-gap", `${Math.max(2 - (revNum * 0.2), 1)}lh`);
|
|
31
|
-
child.style.setProperty("--toast-scale", `${Math.max(1 - (revNum * 0.02), 0.9)}`);
|
|
32
|
-
child.style.setProperty("--toast-shadow-px", `${Math.max(8 - (revNum), 3)}px`);
|
|
33
|
-
});
|
|
34
|
-
}, 16); // 16 is an approximate ms for 60 Hz
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
observer.observe(toasterRoot, { childList: true });
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
onDestroy(() => {
|
|
42
|
-
if (observer) observer.disconnect();
|
|
43
|
-
});
|
|
44
|
-
</script>
|
|
45
|
-
|
|
46
|
-
<!-- @component MeltToaster
|
|
47
|
-
todo: implement outgoing animation
|
|
48
|
-
todo: add animation indicating its duration
|
|
49
|
-
-->
|
|
50
|
-
<div {...toaster.root} bind:this={toasterRoot} class="pinya-toaster-root">
|
|
51
|
-
{#each toaster.toasts as toast (toast.id)}
|
|
52
|
-
|
|
53
|
-
<div {...toast.content} class={`toast-instance ${toast.data.type}`}>
|
|
54
|
-
<div class="toast-header">
|
|
55
|
-
<div {...toast.title} class="fake-h4">{toast.data.title ?? (toast.data.type ?? "Info").toUpperCase()}</div>
|
|
56
|
-
<button {...toast.close} aria-label="dismiss alert">X</button>
|
|
57
|
-
</div>
|
|
58
|
-
<div {...toast.description}>{toast.data.description}</div>
|
|
59
|
-
</div>
|
|
60
|
-
{/each}
|
|
61
|
-
</div>
|
|
62
|
-
|
|
3
|
+
<script lang="ts" module>
|
|
4
|
+
import type { ToastSettings } from "./ToastSettings";
|
|
5
|
+
import { Toaster } from "melt/builders";
|
|
6
|
+
|
|
7
|
+
// const toaster = new Toaster<ToastSettings>({ closeDelay: 0 });
|
|
8
|
+
const toaster = new Toaster<ToastSettings>();
|
|
9
|
+
|
|
10
|
+
export const addToast = toaster.addToast;
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<script lang="ts">
|
|
14
|
+
import { onDestroy, onMount } from "svelte";
|
|
15
|
+
|
|
16
|
+
let toasterRoot: HTMLDivElement;
|
|
17
|
+
let observer = $state<MutationObserver>();
|
|
18
|
+
|
|
19
|
+
onMount(() => {
|
|
20
|
+
// from https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
|
|
21
|
+
observer = new MutationObserver((mutationList) => {
|
|
22
|
+
for (const mutation of mutationList) {
|
|
23
|
+
if (mutation.type === "childList") {
|
|
24
|
+
setTimeout(() => {
|
|
25
|
+
// get all toasterRoot children
|
|
26
|
+
const children = Array.from(toasterRoot.children);
|
|
27
|
+
children.forEach((child, index) => {
|
|
28
|
+
const revNum = Math.min(Math.abs(children.length - 1 - index), 5);
|
|
29
|
+
child.style.setProperty("--toast-index", index.toString());
|
|
30
|
+
child.style.setProperty("--toast-gap", `${Math.max(2 - (revNum * 0.2), 1)}lh`);
|
|
31
|
+
child.style.setProperty("--toast-scale", `${Math.max(1 - (revNum * 0.02), 0.9)}`);
|
|
32
|
+
child.style.setProperty("--toast-shadow-px", `${Math.max(8 - (revNum), 3)}px`);
|
|
33
|
+
});
|
|
34
|
+
}, 16); // 16 is an approximate ms for 60 Hz
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
observer.observe(toasterRoot, { childList: true });
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
onDestroy(() => {
|
|
42
|
+
if (observer) observer.disconnect();
|
|
43
|
+
});
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<!-- @component MeltToaster
|
|
47
|
+
todo: implement outgoing animation
|
|
48
|
+
todo: add animation indicating its duration
|
|
49
|
+
-->
|
|
50
|
+
<div {...toaster.root} bind:this={toasterRoot} class="pinya-toaster-root">
|
|
51
|
+
{#each toaster.toasts as toast (toast.id)}
|
|
52
|
+
|
|
53
|
+
<div {...toast.content} class={`toast-instance ${toast.data.type}`}>
|
|
54
|
+
<div class="toast-header">
|
|
55
|
+
<div {...toast.title} class="fake-h4">{toast.data.title ?? (toast.data.type ?? "Info").toUpperCase()}</div>
|
|
56
|
+
<button {...toast.close} aria-label="dismiss alert">X</button>
|
|
57
|
+
</div>
|
|
58
|
+
<div {...toast.description}>{toast.data.description}</div>
|
|
59
|
+
</div>
|
|
60
|
+
{/each}
|
|
61
|
+
</div>
|
|
62
|
+
|
|
63
63
|
<style>.apply-current-surface {
|
|
64
64
|
background-color: var(--current-surface-color);
|
|
65
65
|
}
|
|
@@ -100,4 +100,4 @@
|
|
|
100
100
|
.pinya-toaster-root .toast-instance .toast-header {
|
|
101
101
|
display: flex;
|
|
102
102
|
justify-content: space-between;
|
|
103
|
-
}</style>
|
|
103
|
+
}</style>
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
import { type Snippet } from 'svelte';
|
|
3
|
-
import { type PinyaCardProps } from "../elements";
|
|
4
|
-
interface ModalBaseProps extends ModalProps {
|
|
5
|
-
children: Snippet;
|
|
6
|
-
}
|
|
7
|
-
type $$ComponentProps = ModalBaseProps & PinyaCardProps;
|
|
8
|
-
declare const ModalBase: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
1
|
+
declare const ModalBase: import("svelte").Component<any, {}, "">;
|
|
9
2
|
type ModalBase = ReturnType<typeof ModalBase>;
|
|
10
3
|
export default ModalBase;
|
|
11
4
|
//# sourceMappingURL=ModalBase.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalBase.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/ModalBase.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ModalBase.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/ModalBase.svelte.ts"],"names":[],"mappings":"AAsEA,QAAA,MAAM,SAAS,yCAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
|
|
@@ -1,108 +1,108 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { page } from "$app/state";
|
|
3
|
-
import type { PageMeta } from "../..";
|
|
4
|
-
import { deLocalizeUrl, localizeHref } from "../../external/paraglide/runtime";
|
|
5
|
-
import { PinyaAccordion, PinyaAccordionItem } from "./accordion/index";
|
|
6
|
-
import { PinyaCard, TextLink } from "../elements/index";
|
|
7
|
-
import Placeholder from "../elements/Placeholder.svelte";
|
|
8
|
-
import type { HTMLAttributes } from "svelte/elements";
|
|
9
|
-
import Self from "./NestedNavigation.svelte";
|
|
10
|
-
|
|
11
|
-
let {
|
|
12
|
-
layout,
|
|
13
|
-
depth,
|
|
14
|
-
close = () => {
|
|
15
|
-
},
|
|
16
|
-
openBehavior,
|
|
17
|
-
...props
|
|
18
|
-
}: {
|
|
19
|
-
layout: PageMeta[],
|
|
20
|
-
depth: number,
|
|
21
|
-
close?: () => void,
|
|
22
|
-
openBehavior?: "open-all" | "open-active" | "close-all"
|
|
23
|
-
// we have to omit id since id is auto assigned by melt
|
|
24
|
-
} & Omit<HTMLAttributes<HTMLDivElement>, 'id'> = $props();
|
|
25
|
-
|
|
26
|
-
let openItems = $state<string[]>([]);
|
|
27
|
-
|
|
28
|
-
let currentPath = $state("");
|
|
29
|
-
|
|
30
|
-
$effect(() => {
|
|
31
|
-
currentPath = deLocalizeUrl(page.url).pathname.replace(/^\/|\/$/g, "");
|
|
32
|
-
|
|
33
|
-
switch (openBehavior) {
|
|
34
|
-
case "close-all":
|
|
35
|
-
openItems = [];
|
|
36
|
-
break;
|
|
37
|
-
|
|
38
|
-
case "open-all":
|
|
39
|
-
openItems = layout.map(site => site.relativeLink);
|
|
40
|
-
break;
|
|
41
|
-
|
|
42
|
-
case "open-active":
|
|
43
|
-
// find the biggest match
|
|
44
|
-
// for example if our current link is documentation/test/test2
|
|
45
|
-
// if the relativeLink are documentation-test, documentation, doc
|
|
46
|
-
// we return [documentation]
|
|
47
|
-
{
|
|
48
|
-
let bestMatch: string | null = null;
|
|
49
|
-
|
|
50
|
-
layout.forEach(site => {
|
|
51
|
-
console.log(`Current path (${currentPath}) vs layout path (${site.relativeLink})`);
|
|
52
|
-
const link = site.relativeLink;
|
|
53
|
-
if (!link) {
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
const isMatch = currentPath === link || currentPath.startsWith(`${link}/`);
|
|
58
|
-
if (isMatch && (!bestMatch || link.length > bestMatch.length)) {
|
|
59
|
-
bestMatch = link;
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
if (bestMatch) {
|
|
64
|
-
openItems = [bestMatch];
|
|
65
|
-
}
|
|
66
|
-
break;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
default:
|
|
70
|
-
break;
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
</script>
|
|
74
|
-
|
|
75
|
-
{#if layout.length > 0}
|
|
76
|
-
<PinyaAccordion bind:openItems={openItems} {...props} class="pinya-nested-navigation {props.class ?? ''}">
|
|
77
|
-
{#each layout as site (site.relativeLink)}
|
|
78
|
-
<!-- todo: add highlighted class when relativeLink === page.url -->
|
|
79
|
-
<PinyaAccordionItem
|
|
80
|
-
class="{currentPath === site.relativeLink ? 'highlighted' : ''}"
|
|
81
|
-
hasNoChild={site.nestedPages.length === 0}
|
|
82
|
-
pinyaValue={site.relativeLink}>
|
|
83
|
-
{#snippet control()}
|
|
84
|
-
<TextLink href={localizeHref(site.relativeLink)} onclick={() => close()}>
|
|
85
|
-
{site.title}
|
|
86
|
-
</TextLink>
|
|
87
|
-
{/snippet}
|
|
88
|
-
{#snippet panel()}
|
|
89
|
-
{#if site.nestedPages.length > 0 && depth < 5}
|
|
90
|
-
<div class="wrapper">
|
|
91
|
-
<Self layout={site.nestedPages} depth={depth + 1} {close} {openBehavior}></Self>
|
|
92
|
-
</div>
|
|
93
|
-
{/if}
|
|
94
|
-
{/snippet}
|
|
95
|
-
</PinyaAccordionItem>
|
|
96
|
-
{/each}
|
|
97
|
-
</PinyaAccordion>
|
|
98
|
-
{:else }
|
|
99
|
-
<PinyaCard {...props} class={`nested-navigation-placeholder ${props.class ?? ''}`} colorClass="bg-primary-100 dark:bg-tertiary-900">
|
|
100
|
-
{#each { length: 10 } as _, idx (idx)}
|
|
101
|
-
<Placeholder class="mb-2 placeholder" />
|
|
102
|
-
{/each}
|
|
103
|
-
</PinyaCard>
|
|
104
|
-
{/if}
|
|
105
|
-
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { page } from "$app/state";
|
|
3
|
+
import type { PageMeta } from "../..";
|
|
4
|
+
import { deLocalizeUrl, localizeHref } from "../../external/paraglide/runtime";
|
|
5
|
+
import { PinyaAccordion, PinyaAccordionItem } from "./accordion/index";
|
|
6
|
+
import { PinyaCard, TextLink } from "../elements/index";
|
|
7
|
+
import Placeholder from "../elements/Placeholder.svelte";
|
|
8
|
+
import type { HTMLAttributes } from "svelte/elements";
|
|
9
|
+
import Self from "./NestedNavigation.svelte";
|
|
10
|
+
|
|
11
|
+
let {
|
|
12
|
+
layout,
|
|
13
|
+
depth,
|
|
14
|
+
close = () => {
|
|
15
|
+
},
|
|
16
|
+
openBehavior,
|
|
17
|
+
...props
|
|
18
|
+
}: {
|
|
19
|
+
layout: PageMeta[],
|
|
20
|
+
depth: number,
|
|
21
|
+
close?: () => void,
|
|
22
|
+
openBehavior?: "open-all" | "open-active" | "close-all"
|
|
23
|
+
// we have to omit id since id is auto assigned by melt
|
|
24
|
+
} & Omit<HTMLAttributes<HTMLDivElement>, 'id'> = $props();
|
|
25
|
+
|
|
26
|
+
let openItems = $state<string[]>([]);
|
|
27
|
+
|
|
28
|
+
let currentPath = $state("");
|
|
29
|
+
|
|
30
|
+
$effect(() => {
|
|
31
|
+
currentPath = deLocalizeUrl(page.url).pathname.replace(/^\/|\/$/g, "");
|
|
32
|
+
|
|
33
|
+
switch (openBehavior) {
|
|
34
|
+
case "close-all":
|
|
35
|
+
openItems = [];
|
|
36
|
+
break;
|
|
37
|
+
|
|
38
|
+
case "open-all":
|
|
39
|
+
openItems = layout.map(site => site.relativeLink);
|
|
40
|
+
break;
|
|
41
|
+
|
|
42
|
+
case "open-active":
|
|
43
|
+
// find the biggest match
|
|
44
|
+
// for example if our current link is documentation/test/test2
|
|
45
|
+
// if the relativeLink are documentation-test, documentation, doc
|
|
46
|
+
// we return [documentation]
|
|
47
|
+
{
|
|
48
|
+
let bestMatch: string | null = null;
|
|
49
|
+
|
|
50
|
+
layout.forEach(site => {
|
|
51
|
+
console.log(`Current path (${currentPath}) vs layout path (${site.relativeLink})`);
|
|
52
|
+
const link = site.relativeLink;
|
|
53
|
+
if (!link) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
const isMatch = currentPath === link || currentPath.startsWith(`${link}/`);
|
|
58
|
+
if (isMatch && (!bestMatch || link.length > bestMatch.length)) {
|
|
59
|
+
bestMatch = link;
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
if (bestMatch) {
|
|
64
|
+
openItems = [bestMatch];
|
|
65
|
+
}
|
|
66
|
+
break;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
default:
|
|
70
|
+
break;
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
</script>
|
|
74
|
+
|
|
75
|
+
{#if layout.length > 0}
|
|
76
|
+
<PinyaAccordion bind:openItems={openItems} {...props} class="pinya-nested-navigation {props.class ?? ''}">
|
|
77
|
+
{#each layout as site (site.relativeLink)}
|
|
78
|
+
<!-- todo: add highlighted class when relativeLink === page.url -->
|
|
79
|
+
<PinyaAccordionItem
|
|
80
|
+
class="{currentPath === site.relativeLink ? 'highlighted' : ''}"
|
|
81
|
+
hasNoChild={site.nestedPages.length === 0}
|
|
82
|
+
pinyaValue={site.relativeLink}>
|
|
83
|
+
{#snippet control()}
|
|
84
|
+
<TextLink href={localizeHref(site.relativeLink)} onclick={() => close()}>
|
|
85
|
+
{site.title}
|
|
86
|
+
</TextLink>
|
|
87
|
+
{/snippet}
|
|
88
|
+
{#snippet panel()}
|
|
89
|
+
{#if site.nestedPages.length > 0 && depth < 5}
|
|
90
|
+
<div class="wrapper">
|
|
91
|
+
<Self layout={site.nestedPages} depth={depth + 1} {close} {openBehavior}></Self>
|
|
92
|
+
</div>
|
|
93
|
+
{/if}
|
|
94
|
+
{/snippet}
|
|
95
|
+
</PinyaAccordionItem>
|
|
96
|
+
{/each}
|
|
97
|
+
</PinyaAccordion>
|
|
98
|
+
{:else }
|
|
99
|
+
<PinyaCard {...props} class={`nested-navigation-placeholder ${props.class ?? ''}`} colorClass="bg-primary-100 dark:bg-tertiary-900">
|
|
100
|
+
{#each { length: 10 } as _, idx (idx)}
|
|
101
|
+
<Placeholder class="mb-2 placeholder" />
|
|
102
|
+
{/each}
|
|
103
|
+
</PinyaCard>
|
|
104
|
+
{/if}
|
|
105
|
+
|
|
106
106
|
<style>.apply-current-surface {
|
|
107
107
|
background-color: var(--current-surface-color);
|
|
108
108
|
}
|
|
@@ -133,4 +133,4 @@
|
|
|
133
133
|
width: 10em;
|
|
134
134
|
padding: 1em;
|
|
135
135
|
gap: 0.5lh;
|
|
136
|
-
}</style>
|
|
136
|
+
}</style>
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
declare const PinyaAccordion: import("svelte").Component<PinyaAccordionProps, {}, "openItems">;
|
|
1
|
+
declare const PinyaAccordion: import("svelte").Component<any, {}, "openItems">;
|
|
3
2
|
type PinyaAccordion = ReturnType<typeof PinyaAccordion>;
|
|
4
3
|
export default PinyaAccordion;
|
|
5
4
|
//# sourceMappingURL=PinyaAccordion.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinyaAccordion.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/accordion/PinyaAccordion.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PinyaAccordion.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/accordion/PinyaAccordion.svelte.ts"],"names":[],"mappings":"AA0DA,QAAA,MAAM,cAAc,kDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
declare const PinyaAccordionItem: import("svelte").Component<PinyaAccordionItemProps, {}, "">;
|
|
1
|
+
declare const PinyaAccordionItem: import("svelte").Component<any, {}, "">;
|
|
3
2
|
type PinyaAccordionItem = ReturnType<typeof PinyaAccordionItem>;
|
|
4
3
|
export default PinyaAccordionItem;
|
|
5
4
|
//# sourceMappingURL=PinyaAccordionItem.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinyaAccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/accordion/PinyaAccordionItem.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PinyaAccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/accordion/PinyaAccordionItem.svelte.ts"],"names":[],"mappings":"AA4EA,QAAA,MAAM,kBAAkB,yCAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import type { HTMLImgAttributes } from 'svelte/elements';
|
|
2
|
-
import type { GeneralUIProps } from "./GeneralUIProps";
|
|
3
|
-
type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
|
|
4
1
|
/**
|
|
5
2
|
* ImageIcon
|
|
6
3
|
* todo: consider current-surface scss
|
|
7
4
|
*/
|
|
8
|
-
declare const ImageIcon: import("svelte").Component<
|
|
5
|
+
declare const ImageIcon: import("svelte").Component<any, {}, "">;
|
|
9
6
|
type ImageIcon = ReturnType<typeof ImageIcon>;
|
|
10
7
|
export default ImageIcon;
|
|
11
8
|
//# sourceMappingURL=ImageIcon.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageIcon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/ImageIcon.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ImageIcon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/ImageIcon.svelte.ts"],"names":[],"mappings":"AA+CA;;;GAGG;AACH,QAAA,MAAM,SAAS,yCAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import type { PinyaAnchorButtonProps } from "./PinyaAnchorButtonProps";
|
|
2
1
|
/**
|
|
3
2
|
* PinyaAnchorButton
|
|
4
3
|
* todo: consider current-surface scss and tailwind cleanup
|
|
5
4
|
*/
|
|
6
|
-
declare const PinyaAnchorButton: import("svelte").Component<
|
|
5
|
+
declare const PinyaAnchorButton: import("svelte").Component<any, {}, "">;
|
|
7
6
|
type PinyaAnchorButton = ReturnType<typeof PinyaAnchorButton>;
|
|
8
7
|
export default PinyaAnchorButton;
|
|
9
8
|
//# sourceMappingURL=PinyaAnchorButton.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinyaAnchorButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PinyaAnchorButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte.ts"],"names":[],"mappings":"AAqCA;;;GAGG;AACH,QAAA,MAAM,iBAAiB,yCAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
declare const PinyaButton: import("svelte").Component<PinyaButtonProps, {}, "">;
|
|
1
|
+
declare const PinyaButton: import("svelte").Component<any, {}, "">;
|
|
3
2
|
type PinyaButton = ReturnType<typeof PinyaButton>;
|
|
4
3
|
export default PinyaButton;
|
|
5
4
|
//# sourceMappingURL=PinyaButton.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinyaButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaButton/PinyaButton.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PinyaButton.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaButton/PinyaButton.svelte.ts"],"names":[],"mappings":"AAqCA,QAAA,MAAM,WAAW,yCAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import type { PinyaCardProps } from "./PinyaCardProps";
|
|
2
1
|
/**
|
|
3
2
|
* # Note:
|
|
4
3
|
* When with texts, wrap the text content inside a div so flex wont apply
|
|
5
4
|
*/
|
|
6
|
-
declare const PinyaCard: import("svelte").Component<
|
|
5
|
+
declare const PinyaCard: import("svelte").Component<any, {}, "">;
|
|
7
6
|
type PinyaCard = ReturnType<typeof PinyaCard>;
|
|
8
7
|
export default PinyaCard;
|
|
9
8
|
//# sourceMappingURL=PinyaCard.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinyaCard.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaCard/PinyaCard.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PinyaCard.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/PinyaCard/PinyaCard.svelte.ts"],"names":[],"mappings":"AAoCA;;;GAGG;AACH,QAAA,MAAM,SAAS,yCAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
|
|
@@ -1,13 +1,8 @@
|
|
|
1
|
-
import type { HTMLAttributes } from "svelte/elements";
|
|
2
|
-
type $$ComponentProps = {
|
|
3
|
-
isCircle?: boolean;
|
|
4
|
-
classes?: string;
|
|
5
|
-
} & HTMLAttributes<HTMLDivElement>;
|
|
6
1
|
/**
|
|
7
2
|
* Placeholder
|
|
8
3
|
* todo: consider current-surface scss
|
|
9
4
|
*/
|
|
10
|
-
declare const Placeholder: import("svelte").Component
|
|
5
|
+
declare const Placeholder: import("svelte").Component<any, {}, "">;
|
|
11
6
|
type Placeholder = ReturnType<typeof Placeholder>;
|
|
12
7
|
export default Placeholder;
|
|
13
8
|
//# sourceMappingURL=Placeholder.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Placeholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/Placeholder.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Placeholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/Placeholder.svelte.ts"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,QAAA,MAAM,WAAW,yCAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import type { TextLinkProps } from "./TextLinkProps";
|
|
2
1
|
/**
|
|
3
2
|
* TextLink
|
|
4
3
|
* todo: consider current-surface scss
|
|
5
4
|
*/
|
|
6
|
-
declare const TextLink: import("svelte").Component<
|
|
5
|
+
declare const TextLink: import("svelte").Component<any, {}, "">;
|
|
7
6
|
type TextLink = ReturnType<typeof TextLink>;
|
|
8
7
|
export default TextLink;
|
|
9
8
|
//# sourceMappingURL=TextLink.svelte.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextLink.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/TextLink.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextLink.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/TextLink.svelte.ts"],"names":[],"mappings":"AAwBA;;;GAGG;AACH,QAAA,MAAM,QAAQ,yCAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
|