@hyvor/design 2.1.3 → 2.1.4
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.
|
@@ -1,17 +1,49 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { setContext } from 'svelte';
|
|
3
|
+
import type { TabNavState } from './tabnav.js';
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
type Props = (
|
|
6
|
+
| {
|
|
7
|
+
basePath?: undefined;
|
|
8
|
+
pathname?: undefined;
|
|
9
|
+
goto?: undefined;
|
|
10
|
+
}
|
|
11
|
+
| {
|
|
12
|
+
basePath: string;
|
|
13
|
+
// SvelteKit's `page.url.pathname`, e.g. `import { page } from '$app/state'`.
|
|
14
|
+
pathname: string;
|
|
15
|
+
// SvelteKit's `goto`, e.g. `import { goto } from '$app/navigation'`.
|
|
16
|
+
goto: (url: string, opts?: { replaceState?: boolean }) => void;
|
|
17
|
+
}
|
|
18
|
+
) & {
|
|
6
19
|
replaceState?: boolean;
|
|
7
20
|
children?: import('svelte').Snippet;
|
|
8
|
-
}
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
let { children, basePath, replaceState = false, pathname: pathnameProp, goto }: Props = $props();
|
|
24
|
+
|
|
25
|
+
let fallbackPathname = $state(typeof window !== 'undefined' ? window.location.pathname : '');
|
|
26
|
+
|
|
27
|
+
$effect(() => {
|
|
28
|
+
if (!basePath || pathnameProp !== undefined) return;
|
|
9
29
|
|
|
10
|
-
|
|
30
|
+
const onPopState = () => {
|
|
31
|
+
fallbackPathname = window.location.pathname;
|
|
32
|
+
};
|
|
33
|
+
window.addEventListener('popstate', onPopState);
|
|
34
|
+
return () => window.removeEventListener('popstate', onPopState);
|
|
35
|
+
});
|
|
11
36
|
|
|
12
|
-
const tabNavState = {
|
|
37
|
+
const tabNavState: TabNavState = {
|
|
13
38
|
basePath,
|
|
14
|
-
replaceState
|
|
39
|
+
replaceState,
|
|
40
|
+
goto,
|
|
41
|
+
get pathname() {
|
|
42
|
+
return pathnameProp ?? fallbackPathname;
|
|
43
|
+
},
|
|
44
|
+
set pathname(value: string) {
|
|
45
|
+
fallbackPathname = value;
|
|
46
|
+
}
|
|
15
47
|
};
|
|
16
48
|
|
|
17
49
|
setContext('tab-nav-state', tabNavState);
|
|
@@ -1,8 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
basePath?:
|
|
1
|
+
type Props = ({
|
|
2
|
+
basePath?: undefined;
|
|
3
|
+
pathname?: undefined;
|
|
4
|
+
goto?: undefined;
|
|
5
|
+
} | {
|
|
6
|
+
basePath: string;
|
|
7
|
+
pathname: string;
|
|
8
|
+
goto: (url: string, opts?: {
|
|
9
|
+
replaceState?: boolean;
|
|
10
|
+
}) => void;
|
|
11
|
+
}) & {
|
|
3
12
|
replaceState?: boolean;
|
|
4
13
|
children?: import('svelte').Snippet;
|
|
5
|
-
}
|
|
14
|
+
};
|
|
6
15
|
declare const TabNav: import("svelte").Component<Props, {}, "">;
|
|
7
16
|
type TabNav = ReturnType<typeof TabNav>;
|
|
8
17
|
export default TabNav;
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { getContext } from 'svelte';
|
|
3
|
-
import { page } from '$app/state';
|
|
4
|
-
import { goto } from '$app/navigation';
|
|
5
3
|
import type { TabNavState } from './tabnav.js';
|
|
6
4
|
|
|
7
5
|
interface Props {
|
|
@@ -28,8 +26,7 @@
|
|
|
28
26
|
if (active) return true;
|
|
29
27
|
|
|
30
28
|
if (tabNavState.basePath) {
|
|
31
|
-
|
|
32
|
-
return currentUrl === getTabPath();
|
|
29
|
+
return tabNavState.pathname === getTabPath();
|
|
33
30
|
}
|
|
34
31
|
|
|
35
32
|
return false;
|
|
@@ -37,7 +34,14 @@
|
|
|
37
34
|
|
|
38
35
|
function handleClick(event: MouseEvent) {
|
|
39
36
|
if (tabNavState.basePath) {
|
|
40
|
-
|
|
37
|
+
const path = getTabPath();
|
|
38
|
+
|
|
39
|
+
if (tabNavState.goto) {
|
|
40
|
+
tabNavState.goto(path, { replaceState: tabNavState.replaceState });
|
|
41
|
+
tabNavState.pathname = path;
|
|
42
|
+
} else {
|
|
43
|
+
window.location.href = path;
|
|
44
|
+
}
|
|
41
45
|
}
|
|
42
46
|
onclick?.(event);
|
|
43
47
|
}
|