lutra 0.1.4 → 0.1.5
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.
|
@@ -44,6 +44,10 @@
|
|
|
44
44
|
<div class="Header">
|
|
45
45
|
<MenuItemContent {...item} />
|
|
46
46
|
</div>
|
|
47
|
+
{:else if item.type === 'text'}
|
|
48
|
+
<div class="Text">
|
|
49
|
+
<MenuItemContent {...item} />
|
|
50
|
+
</div>
|
|
47
51
|
{:else if item.type === 'item'}
|
|
48
52
|
{#if item.href}
|
|
49
53
|
<a href="{item.href}" class="Item" bind:this={el}>
|
|
@@ -14,6 +14,13 @@ export type MenuItem = {
|
|
|
14
14
|
component?: Component;
|
|
15
15
|
/** Color to use for the item. */
|
|
16
16
|
color?: StatusColorOrString;
|
|
17
|
+
} | {
|
|
18
|
+
/** Type of menu item to render. */
|
|
19
|
+
type: 'text';
|
|
20
|
+
/** Text label of the item to display to the user. */
|
|
21
|
+
text?: string;
|
|
22
|
+
/** Color to use for the item. */
|
|
23
|
+
color?: StatusColorOrString;
|
|
17
24
|
} | {
|
|
18
25
|
/** Type of menu item to render. */
|
|
19
26
|
type: 'item';
|
|
@@ -4,105 +4,27 @@
|
|
|
4
4
|
/**
|
|
5
5
|
* @description
|
|
6
6
|
* A container for page content.
|
|
7
|
-
* If you want to add padding to the container, pass in `pad`. You can also pass in an array of booleans or strings to specify padding on the block and inline axis.
|
|
8
|
-
* Padding will be halved for smaller viewport sizes.
|
|
9
7
|
* @example
|
|
10
|
-
* <PageContent
|
|
8
|
+
* <PageContent>
|
|
11
9
|
* <p>Paragraph</p>
|
|
12
10
|
* </PageContent>
|
|
13
11
|
*/
|
|
14
12
|
let {
|
|
15
13
|
children,
|
|
16
|
-
pad = false,
|
|
17
|
-
middle = false,
|
|
18
|
-
center = false,
|
|
19
|
-
style,
|
|
20
14
|
}: {
|
|
21
15
|
children: Snippet;
|
|
22
|
-
/** Add padding to the container. Pass in either a boolean or an array of booleans to specify padding on the block and inline axes. */
|
|
23
|
-
pad?: boolean |
|
|
24
|
-
[boolean, boolean] |
|
|
25
|
-
[boolean, boolean, boolean] |
|
|
26
|
-
[boolean, boolean, boolean, boolean] |
|
|
27
|
-
string |
|
|
28
|
-
[string, string] |
|
|
29
|
-
[string, string, string] |
|
|
30
|
-
[string, string, string, string] |
|
|
31
|
-
'xs' |
|
|
32
|
-
's' |
|
|
33
|
-
'm' |
|
|
34
|
-
'l' |
|
|
35
|
-
'xl' |
|
|
36
|
-
'xxl';
|
|
37
|
-
/** Center the content in the block direction. */
|
|
38
|
-
middle?: boolean;
|
|
39
|
-
/** Center the content in the inline direction. */
|
|
40
|
-
center?: boolean;
|
|
41
|
-
style?: string;
|
|
42
16
|
} = $props();
|
|
43
17
|
|
|
44
|
-
let padStyle = $derived.by(() => {
|
|
45
|
-
if(typeof pad === 'boolean') {
|
|
46
|
-
return `--padBlockStart: ${pad ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
|
|
47
|
-
--padBlockEnd: ${pad ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
|
|
48
|
-
--padInlineStart: ${pad ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};
|
|
49
|
-
--padInlineEnd: ${pad ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};`;
|
|
50
|
-
} else if(typeof pad === 'string') {
|
|
51
|
-
return `--padBlockStart: ${pad};
|
|
52
|
-
--padBlockEnd: ${pad};
|
|
53
|
-
--padInlineStart: ${pad};
|
|
54
|
-
--padInlineEnd: ${pad};`;
|
|
55
|
-
}
|
|
56
|
-
else if(Array.isArray(pad) && pad.length > 1 && typeof pad[0] === 'string') {
|
|
57
|
-
switch(pad.length) {
|
|
58
|
-
case 2:
|
|
59
|
-
return `--padBlockStart: ${pad[0]};
|
|
60
|
-
--padBlockEnd: ${pad[0]};
|
|
61
|
-
--padInlineStart: ${pad[1]};
|
|
62
|
-
--padInlineEnd: ${pad[1]};`;
|
|
63
|
-
case 3:
|
|
64
|
-
return `--padBlockStart: ${pad[0]};
|
|
65
|
-
--padBlockEnd: ${pad[1]};
|
|
66
|
-
--padInlineStart: ${pad[2]};
|
|
67
|
-
--padInlineEnd: ${pad[2]};`;
|
|
68
|
-
case 4:
|
|
69
|
-
return `--padBlockStart: ${pad[0]};
|
|
70
|
-
--padBlockEnd: ${pad[1]};
|
|
71
|
-
--padInlineStart: ${pad[2]};
|
|
72
|
-
--padInlineEnd: ${pad[3]};`;
|
|
73
|
-
}
|
|
74
|
-
} else if(Array.isArray(pad) && pad.length > 1) {
|
|
75
|
-
switch(pad.length) {
|
|
76
|
-
case 2:
|
|
77
|
-
return `--padBlockStart: ${pad[0] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
|
|
78
|
-
--padBlockEnd: ${pad[0] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
|
|
79
|
-
--padInlineStart: ${pad[1] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};
|
|
80
|
-
--padInlineEnd: ${pad[1] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};`;
|
|
81
|
-
case 3:
|
|
82
|
-
return `--padBlockStart: ${pad[0] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
|
|
83
|
-
--padBlockEnd: ${pad[1] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
|
|
84
|
-
--padInlineStart: ${pad[2] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};
|
|
85
|
-
--padInlineEnd: ${pad[2] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};`;
|
|
86
|
-
case 4:
|
|
87
|
-
return `--padBlockStart: ${pad[0] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
|
|
88
|
-
--padBlockEnd: ${pad[1] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
|
|
89
|
-
--padInlineStart: ${pad[2] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};
|
|
90
|
-
--padInlineEnd: ${pad[3] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};`;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
return '';
|
|
94
|
-
});
|
|
95
18
|
|
|
96
19
|
</script>
|
|
97
20
|
|
|
98
|
-
<div class="PageContent"
|
|
21
|
+
<div class="PageContent">
|
|
99
22
|
{@render children()}
|
|
100
23
|
</div>
|
|
101
24
|
|
|
102
25
|
<style>
|
|
103
26
|
.PageContent {
|
|
104
|
-
display:
|
|
105
|
-
|
|
106
|
-
min-height: 0;
|
|
27
|
+
display: contents;
|
|
28
|
+
--isPage: 1;
|
|
107
29
|
}
|
|
108
30
|
</style>
|
|
@@ -1,37 +1,6 @@
|
|
|
1
1
|
import type { Snippet } from "svelte";
|
|
2
2
|
type $$ComponentProps = {
|
|
3
3
|
children: Snippet;
|
|
4
|
-
/** Add padding to the container. Pass in either a boolean or an array of booleans to specify padding on the block and inline axes. */
|
|
5
|
-
pad?: boolean | [
|
|
6
|
-
boolean,
|
|
7
|
-
boolean
|
|
8
|
-
] | [
|
|
9
|
-
boolean,
|
|
10
|
-
boolean,
|
|
11
|
-
boolean
|
|
12
|
-
] | [
|
|
13
|
-
boolean,
|
|
14
|
-
boolean,
|
|
15
|
-
boolean,
|
|
16
|
-
boolean
|
|
17
|
-
] | string | [
|
|
18
|
-
string,
|
|
19
|
-
string
|
|
20
|
-
] | [
|
|
21
|
-
string,
|
|
22
|
-
string,
|
|
23
|
-
string
|
|
24
|
-
] | [
|
|
25
|
-
string,
|
|
26
|
-
string,
|
|
27
|
-
string,
|
|
28
|
-
string
|
|
29
|
-
] | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
|
|
30
|
-
/** Center the content in the block direction. */
|
|
31
|
-
middle?: boolean;
|
|
32
|
-
/** Center the content in the inline direction. */
|
|
33
|
-
center?: boolean;
|
|
34
|
-
style?: string;
|
|
35
4
|
};
|
|
36
5
|
declare const PageContent: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
37
6
|
type PageContent = ReturnType<typeof PageContent>;
|
package/dist/css/3-typo.css
CHANGED