@marianmeres/stuic 2.58.0 → 2.59.0
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/components/AppShell/AppShell.svelte +2 -2
- package/dist/components/AppShell/AppShell.svelte.d.ts +1 -1
- package/dist/components/AppShell/AppShellSimple.svelte +8 -3
- package/dist/components/AppShell/AppShellSimple.svelte.d.ts +2 -1
- package/dist/components/AppShell/index.d.ts +2 -2
- package/dist/components/AppShell/index.js +2 -2
- package/package.json +1 -1
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
elFooter?: HTMLElement;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
export const
|
|
41
|
+
export const APP_SHELL_MAIN_WIDTH = Symbol("APP_SHELL_MAIN_WIDTH");
|
|
42
42
|
|
|
43
43
|
/**
|
|
44
44
|
* Helper utility function which sets document.body height to 100vh, and overflow: hidden.
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
|
|
104
104
|
// pragmatic use case...
|
|
105
105
|
let mainWidth: number = $state(0);
|
|
106
|
-
setContext(
|
|
106
|
+
setContext(APP_SHELL_MAIN_WIDTH, {
|
|
107
107
|
get current() {
|
|
108
108
|
return mainWidth;
|
|
109
109
|
},
|
|
@@ -33,7 +33,7 @@ export interface Props {
|
|
|
33
33
|
elSidebarRight?: HTMLElement;
|
|
34
34
|
elFooter?: HTMLElement;
|
|
35
35
|
}
|
|
36
|
-
export declare const
|
|
36
|
+
export declare const APP_SHELL_MAIN_WIDTH: unique symbol;
|
|
37
37
|
/**
|
|
38
38
|
* Helper utility function which sets document.body height to 100vh, and overflow: hidden.
|
|
39
39
|
* It also returns a function which unsets the full height. So we can write:
|
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
railClass?: string;
|
|
10
10
|
asideClass?: string;
|
|
11
11
|
mainClass?: string;
|
|
12
|
+
// header support style as well (for iOS theming, seem to be better supported)
|
|
13
|
+
headerStyle?: string;
|
|
12
14
|
//
|
|
13
15
|
rail?: Snippet;
|
|
14
16
|
header?: Snippet;
|
|
@@ -21,7 +23,7 @@
|
|
|
21
23
|
elMain?: HTMLElement;
|
|
22
24
|
}
|
|
23
25
|
|
|
24
|
-
export const
|
|
26
|
+
export const APP_SHELL_SIMPLE_MAIN_WIDTH = Symbol("APP_SHELL_SIMPLE_MAIN_WIDTH");
|
|
25
27
|
</script>
|
|
26
28
|
|
|
27
29
|
<script lang="ts">
|
|
@@ -33,6 +35,8 @@
|
|
|
33
35
|
asideClass,
|
|
34
36
|
mainClass,
|
|
35
37
|
//
|
|
38
|
+
headerStyle = "",
|
|
39
|
+
//
|
|
36
40
|
rail,
|
|
37
41
|
header,
|
|
38
42
|
aside,
|
|
@@ -48,7 +52,7 @@
|
|
|
48
52
|
|
|
49
53
|
// pragmatic use case...
|
|
50
54
|
let mainWidth: number = $state(0);
|
|
51
|
-
setContext(
|
|
55
|
+
setContext(APP_SHELL_SIMPLE_MAIN_WIDTH, {
|
|
52
56
|
get current() {
|
|
53
57
|
return mainWidth;
|
|
54
58
|
},
|
|
@@ -61,6 +65,7 @@
|
|
|
61
65
|
bind:clientHeight={headerHeight}
|
|
62
66
|
data-shell="header"
|
|
63
67
|
class={twMerge("sticky top-0 z-10", headerClass)}
|
|
68
|
+
style={headerStyle}
|
|
64
69
|
>
|
|
65
70
|
{@render header()}
|
|
66
71
|
</header>
|
|
@@ -106,7 +111,7 @@
|
|
|
106
111
|
<main
|
|
107
112
|
bind:this={elMain}
|
|
108
113
|
data-shell="main"
|
|
109
|
-
class={twMerge("flex-1", mainClass)}
|
|
114
|
+
class={twMerge("flex-1 max-w-full", mainClass)}
|
|
110
115
|
bind:offsetWidth={mainWidth}
|
|
111
116
|
>
|
|
112
117
|
{@render children?.()}
|
|
@@ -5,6 +5,7 @@ export interface Props {
|
|
|
5
5
|
railClass?: string;
|
|
6
6
|
asideClass?: string;
|
|
7
7
|
mainClass?: string;
|
|
8
|
+
headerStyle?: string;
|
|
8
9
|
rail?: Snippet;
|
|
9
10
|
header?: Snippet;
|
|
10
11
|
aside?: Snippet;
|
|
@@ -14,7 +15,7 @@ export interface Props {
|
|
|
14
15
|
elAside?: HTMLElement;
|
|
15
16
|
elMain?: HTMLElement;
|
|
16
17
|
}
|
|
17
|
-
export declare const
|
|
18
|
+
export declare const APP_SHELL_SIMPLE_MAIN_WIDTH: unique symbol;
|
|
18
19
|
declare const AppShellSimple: import("svelte").Component<Props, {}, "elRail" | "elHeader" | "elAside" | "elMain">;
|
|
19
20
|
type AppShellSimple = ReturnType<typeof AppShellSimple>;
|
|
20
21
|
export default AppShellSimple;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default as AppShell, type Props as AppShellProps, appShellSetHtmlBodyHeight,
|
|
2
|
-
export { default as AppShellSimple, type Props as AppShellSimpleProps,
|
|
1
|
+
export { default as AppShell, type Props as AppShellProps, appShellSetHtmlBodyHeight, APP_SHELL_MAIN_WIDTH, } from "./AppShell.svelte";
|
|
2
|
+
export { default as AppShellSimple, type Props as AppShellSimpleProps, APP_SHELL_SIMPLE_MAIN_WIDTH, } from "./AppShellSimple.svelte";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default as AppShell, appShellSetHtmlBodyHeight,
|
|
2
|
-
export { default as AppShellSimple,
|
|
1
|
+
export { default as AppShell, appShellSetHtmlBodyHeight, APP_SHELL_MAIN_WIDTH, } from "./AppShell.svelte";
|
|
2
|
+
export { default as AppShellSimple, APP_SHELL_SIMPLE_MAIN_WIDTH, } from "./AppShellSimple.svelte";
|