lutra 0.0.19 → 0.0.33
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/color.css +0 -0
- package/dist/display/Avatar.svelte +1 -1
- package/dist/display/Avatar.svelte.d.ts +18 -22
- package/dist/display/Badge.svelte +2 -4
- package/dist/display/Badge.svelte.d.ts +28 -32
- package/dist/display/Callout.svelte +8 -8
- package/dist/display/Callout.svelte.d.ts +27 -35
- package/dist/display/Close.svelte.d.ts +17 -20
- package/dist/display/Code.svelte +26 -31
- package/dist/display/Code.svelte.d.ts +31 -30
- package/dist/display/ContextTip.svelte +2 -5
- package/dist/display/ContextTip.svelte.d.ts +16 -20
- package/dist/display/DataList.svelte +16 -0
- package/dist/display/DataList.svelte.d.ts +21 -0
- package/dist/display/Details.svelte.d.ts +25 -30
- package/dist/display/Hero.svelte.d.ts +24 -28
- package/dist/display/Icon.svelte +3 -4
- package/dist/display/Icon.svelte.d.ts +18 -23
- package/dist/display/IconButton.svelte +12 -5
- package/dist/display/IconButton.svelte.d.ts +26 -29
- package/dist/display/Image.svelte.d.ts +25 -36
- package/dist/display/Indicator.svelte.d.ts +21 -22
- package/dist/display/Inset.svelte.d.ts +16 -20
- package/dist/display/LineChart.svelte +385 -0
- package/dist/display/LineChart.svelte.d.ts +24 -0
- package/dist/display/LoadingIndicator.svelte +33 -0
- package/dist/display/LoadingIndicator.svelte.d.ts +15 -0
- package/dist/display/Modal.svelte +116 -0
- package/dist/display/Modal.svelte.d.ts +27 -0
- package/dist/display/Notification.svelte.d.ts +22 -41
- package/dist/display/Panel.svelte +23 -0
- package/dist/display/Panel.svelte.d.ts +19 -0
- package/dist/display/Popup.svelte.d.ts +23 -28
- package/dist/{data → display}/Stat.svelte +9 -17
- package/dist/display/Stat.svelte.d.ts +30 -0
- package/dist/display/Table.svelte +14 -10
- package/dist/display/Table.svelte.d.ts +22 -32
- package/dist/display/TablePaginator.svelte +51 -0
- package/dist/display/TablePaginator.svelte.d.ts +21 -0
- package/dist/display/Tag.svelte.d.ts +29 -32
- package/dist/display/Tooltip.svelte +5 -4
- package/dist/display/Tooltip.svelte.d.ts +21 -26
- package/dist/display/chart.d.ts +78 -0
- package/dist/display/chart.js +212 -0
- package/dist/display/index.d.ts +11 -1
- package/dist/display/index.js +11 -1
- package/dist/display/notifications.svelte.d.ts +3 -3
- package/dist/display/notifications.svelte.js +2 -2
- package/dist/form/Button.svelte +7 -2
- package/dist/form/Button.svelte.d.ts +25 -35
- package/dist/form/FieldActions.svelte +25 -3
- package/dist/form/FieldActions.svelte.d.ts +18 -22
- package/dist/form/FieldContainer.svelte +1 -1
- package/dist/form/FieldContainer.svelte.d.ts +17 -22
- package/dist/form/FieldContent.svelte +52 -33
- package/dist/form/FieldContent.svelte.d.ts +28 -56
- package/dist/form/FieldError.svelte.d.ts +17 -20
- package/dist/form/FieldSection.svelte.d.ts +18 -32
- package/dist/form/Fieldset.svelte.d.ts +29 -40
- package/dist/form/Form.svelte +55 -16
- package/dist/form/Form.svelte.d.ts +36 -31
- package/dist/form/ImageUpload.svelte +259 -0
- package/dist/form/ImageUpload.svelte.d.ts +31 -0
- package/dist/form/Input.svelte +192 -153
- package/dist/form/Input.svelte.d.ts +115 -140
- package/dist/form/InputLength.svelte.d.ts +19 -20
- package/dist/form/Label.svelte +21 -4
- package/dist/form/Label.svelte.d.ts +24 -30
- package/dist/form/LogoUpload.svelte +100 -0
- package/dist/form/LogoUpload.svelte.d.ts +29 -0
- package/dist/form/Select.svelte +84 -36
- package/dist/form/Select.svelte.d.ts +69 -96
- package/dist/form/Textarea.svelte +163 -0
- package/dist/form/Textarea.svelte.d.ts +108 -0
- package/dist/form/Toggle.svelte +2 -0
- package/dist/form/Toggle.svelte.d.ts +15 -0
- package/dist/form/client.svelte.d.ts +8 -9
- package/dist/form/client.svelte.js +18 -10
- package/dist/form/form.d.ts +6 -4
- package/dist/form/form.js +23 -9
- package/dist/form/index.d.ts +6 -3
- package/dist/form/index.js +6 -3
- package/dist/form/types.d.ts +11 -1
- package/dist/icons/IconAlert.svelte.d.ts +23 -0
- package/dist/icons/{Copy.svelte → IconCopy.svelte} +1 -1
- package/dist/icons/IconCopy.svelte.d.ts +23 -0
- package/dist/icons/IconDone.svelte.d.ts +23 -0
- package/dist/icons/IconError.svelte.d.ts +23 -0
- package/dist/icons/IconHelp.svelte.d.ts +23 -0
- package/dist/icons/IconHide.svelte.d.ts +23 -0
- package/dist/icons/IconInfo.svelte.d.ts +23 -0
- package/dist/icons/IconLink.svelte.d.ts +23 -0
- package/dist/icons/IconMenuBurger.svelte.d.ts +23 -0
- package/dist/icons/IconMenuDots.svelte.d.ts +23 -0
- package/dist/icons/IconSearch.svelte +3 -0
- package/dist/icons/IconSearch.svelte.d.ts +23 -0
- package/dist/icons/IconShow.svelte.d.ts +23 -0
- package/dist/icons/IconSuccess.svelte.d.ts +23 -0
- package/dist/icons/IconWarning.svelte.d.ts +23 -0
- package/dist/icons/index.d.ts +14 -11
- package/dist/icons/index.js +14 -11
- package/dist/layout/Layout.svelte +7 -5
- package/dist/layout/Layout.svelte.d.ts +19 -22
- package/dist/layout/LayoutFooter.svelte.d.ts +17 -18
- package/dist/layout/LayoutGrid.svelte.d.ts +25 -36
- package/dist/layout/LayoutHeader.svelte +3 -0
- package/dist/layout/LayoutHeader.svelte.d.ts +33 -38
- package/dist/layout/LayoutSideMenu.svelte +18 -17
- package/dist/layout/LayoutSideMenu.svelte.d.ts +18 -22
- package/dist/layout/Overlay.svelte.d.ts +22 -32
- package/dist/layout/OverlayContainer.svelte.d.ts +14 -15
- package/dist/layout/OverlayLayer.svelte +6 -11
- package/dist/layout/OverlayLayer.svelte.d.ts +17 -20
- package/dist/layout/PageContent.svelte +9 -24
- package/dist/layout/PageContent.svelte.d.ts +23 -26
- package/dist/layout/Theme.svelte +19 -4
- package/dist/layout/Theme.svelte.d.ts +17 -22
- package/dist/layout/UIContent.svelte.d.ts +16 -20
- package/dist/layout/index.d.ts +5 -1
- package/dist/layout/index.js +5 -1
- package/dist/layout/overlays.svelte.d.ts +2 -2
- package/dist/nav/Breadcrumb.svelte +1 -1
- package/dist/nav/Breadcrumb.svelte.d.ts +26 -31
- package/dist/nav/Menu.svelte +6 -13
- package/dist/nav/Menu.svelte.d.ts +25 -31
- package/dist/nav/MenuItem.svelte +15 -8
- package/dist/nav/MenuItem.svelte.d.ts +20 -24
- package/dist/nav/MenuTypes.d.ts +7 -7
- package/dist/nav/NavMenu.svelte +7 -9
- package/dist/nav/NavMenu.svelte.d.ts +17 -18
- package/dist/nav/TabbedContent.svelte +1 -1
- package/dist/nav/TabbedContent.svelte.d.ts +21 -22
- package/dist/nav/Tabs.svelte +53 -13
- package/dist/nav/Tabs.svelte.d.ts +24 -25
- package/dist/nav/index.d.ts +2 -1
- package/dist/nav/index.js +2 -1
- package/dist/style.css +176 -79
- package/dist/typo/Clamp.svelte.d.ts +22 -26
- package/dist/typo/H.svelte.d.ts +26 -30
- package/dist/typo/H1.svelte.d.ts +24 -28
- package/dist/typo/H2.svelte.d.ts +24 -28
- package/dist/typo/H3.svelte.d.ts +24 -28
- package/dist/typo/H4.svelte.d.ts +24 -28
- package/dist/typo/H5.svelte.d.ts +24 -28
- package/dist/typo/H6.svelte.d.ts +24 -28
- package/dist/typo/P.svelte.d.ts +24 -28
- package/dist/utils/StringOrComponent.svelte +14 -0
- package/dist/utils/StringOrComponent.svelte.d.ts +19 -0
- package/dist/utils/StringOrSnippet.svelte +11 -0
- package/dist/utils/StringOrSnippet.svelte.d.ts +19 -0
- package/dist/utils/color.d.ts +1 -1
- package/dist/utils/index.d.ts +2 -1
- package/dist/utils/index.js +2 -1
- package/dist/utils/isSnippet.d.ts +3 -5
- package/dist/utils/isSnippet.js +9 -4
- package/package.json +32 -25
- package/dist/data/Stat.svelte.d.ts +0 -39
- package/dist/data/index.d.ts +0 -1
- package/dist/data/index.js +0 -1
- package/dist/grid/Column.svelte +0 -11
- package/dist/grid/Column.svelte.d.ts +0 -22
- package/dist/grid/Grid.svelte +0 -19
- package/dist/grid/Grid.svelte.d.ts +0 -24
- package/dist/grid/Row.svelte +0 -44
- package/dist/grid/Row.svelte.d.ts +0 -24
- package/dist/icons/Alert.svelte.d.ts +0 -23
- package/dist/icons/Copy.svelte.d.ts +0 -23
- package/dist/icons/Done.svelte.d.ts +0 -23
- package/dist/icons/Error.svelte.d.ts +0 -23
- package/dist/icons/Help.svelte.d.ts +0 -23
- package/dist/icons/Hide.svelte.d.ts +0 -23
- package/dist/icons/Info.svelte.d.ts +0 -23
- package/dist/icons/Link.svelte.d.ts +0 -23
- package/dist/icons/MenuBurger.svelte.d.ts +0 -23
- package/dist/icons/MenuDots.svelte.d.ts +0 -23
- package/dist/icons/Show.svelte.d.ts +0 -23
- package/dist/icons/Success.svelte.d.ts +0 -23
- package/dist/icons/Warning.svelte.d.ts +0 -23
- package/dist/utils/StringOrComponentOrSnippet.svelte +0 -14
- package/dist/utils/StringOrComponentOrSnippet.svelte.d.ts +0 -24
- /package/dist/icons/{Alert.svelte → IconAlert.svelte} +0 -0
- /package/dist/icons/{Done.svelte → IconDone.svelte} +0 -0
- /package/dist/icons/{Error.svelte → IconError.svelte} +0 -0
- /package/dist/icons/{Help.svelte → IconHelp.svelte} +0 -0
- /package/dist/icons/{Hide.svelte → IconHide.svelte} +0 -0
- /package/dist/icons/{Info.svelte → IconInfo.svelte} +0 -0
- /package/dist/icons/{Link.svelte → IconLink.svelte} +0 -0
- /package/dist/icons/{MenuBurger.svelte → IconMenuBurger.svelte} +0 -0
- /package/dist/icons/{MenuDots.svelte → IconMenuDots.svelte} +0 -0
- /package/dist/icons/{Show.svelte → IconShow.svelte} +0 -0
- /package/dist/icons/{Success.svelte → IconSuccess.svelte} +0 -0
- /package/dist/icons/{Warning.svelte → IconWarning.svelte} +0 -0
package/dist/icons/index.d.ts
CHANGED
@@ -1,11 +1,14 @@
|
|
1
|
-
export { default as
|
2
|
-
export { default as
|
3
|
-
export { default as
|
4
|
-
export { default as
|
5
|
-
export { default as
|
6
|
-
export { default as
|
7
|
-
export { default as
|
8
|
-
export { default as
|
9
|
-
export { default as
|
10
|
-
export { default as
|
11
|
-
export { default as
|
1
|
+
export { default as IconAlert } from './IconAlert.svelte';
|
2
|
+
export { default as IconCopy } from './IconCopy.svelte';
|
3
|
+
export { default as IconDone } from './IconDone.svelte';
|
4
|
+
export { default as IconError } from './IconError.svelte';
|
5
|
+
export { default as IconHelp } from './IconHelp.svelte';
|
6
|
+
export { default as IconHide } from './IconHide.svelte';
|
7
|
+
export { default as IconInfo } from './IconInfo.svelte';
|
8
|
+
export { default as IconLink } from './IconLink.svelte';
|
9
|
+
export { default as IconMenuBurger } from './IconMenuBurger.svelte';
|
10
|
+
export { default as IconMenuDots } from './IconMenuDots.svelte';
|
11
|
+
export { default as IconSearch } from './IconSearch.svelte';
|
12
|
+
export { default as IconShow } from './IconShow.svelte';
|
13
|
+
export { default as IconSuccess } from './IconSuccess.svelte';
|
14
|
+
export { default as IconWarning } from './IconWarning.svelte';
|
package/dist/icons/index.js
CHANGED
@@ -1,11 +1,14 @@
|
|
1
|
-
export { default as
|
2
|
-
export { default as
|
3
|
-
export { default as
|
4
|
-
export { default as
|
5
|
-
export { default as
|
6
|
-
export { default as
|
7
|
-
export { default as
|
8
|
-
export { default as
|
9
|
-
export { default as
|
10
|
-
export { default as
|
11
|
-
export { default as
|
1
|
+
export { default as IconAlert } from './IconAlert.svelte';
|
2
|
+
export { default as IconCopy } from './IconCopy.svelte';
|
3
|
+
export { default as IconDone } from './IconDone.svelte';
|
4
|
+
export { default as IconError } from './IconError.svelte';
|
5
|
+
export { default as IconHelp } from './IconHelp.svelte';
|
6
|
+
export { default as IconHide } from './IconHide.svelte';
|
7
|
+
export { default as IconInfo } from './IconInfo.svelte';
|
8
|
+
export { default as IconLink } from './IconLink.svelte';
|
9
|
+
export { default as IconMenuBurger } from './IconMenuBurger.svelte';
|
10
|
+
export { default as IconMenuDots } from './IconMenuDots.svelte';
|
11
|
+
export { default as IconSearch } from './IconSearch.svelte';
|
12
|
+
export { default as IconShow } from './IconShow.svelte';
|
13
|
+
export { default as IconSuccess } from './IconSuccess.svelte';
|
14
|
+
export { default as IconWarning } from './IconWarning.svelte';
|
@@ -31,15 +31,17 @@ let {
|
|
31
31
|
</defs>
|
32
32
|
</svg>
|
33
33
|
|
34
|
-
<
|
35
|
-
<
|
34
|
+
<Theme theme={theme}>
|
35
|
+
<div class="Layout">
|
36
36
|
{@render children()}
|
37
37
|
<OverlayContainer />
|
38
|
-
</
|
39
|
-
</
|
38
|
+
</div>
|
39
|
+
</Theme>
|
40
40
|
|
41
41
|
<style>
|
42
42
|
.Layout {
|
43
|
-
|
43
|
+
background: var(--bg-app);
|
44
|
+
min-height: 100%;
|
45
|
+
height: 100%;
|
44
46
|
}
|
45
47
|
</style>
|
@@ -1,25 +1,22 @@
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
2
1
|
import type { Snippet } from "svelte";
|
3
2
|
import "../style.css";
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
};
|
12
|
-
|
13
|
-
};
|
14
|
-
export type LayoutProps = typeof __propDef.props;
|
15
|
-
export type LayoutEvents = typeof __propDef.events;
|
16
|
-
export type LayoutSlots = typeof __propDef.slots;
|
17
|
-
export default class Layout extends SvelteComponent<LayoutProps, LayoutEvents, LayoutSlots> {
|
18
|
-
constructor(options?: import("svelte").ComponentConstructorOptions<{
|
19
|
-
theme?: "light" | "dark" | undefined;
|
20
|
-
children: (this: void) => typeof import("svelte").SnippetReturn & {
|
21
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
22
|
-
};
|
23
|
-
}>);
|
3
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
4
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
5
|
+
$$bindings?: Bindings;
|
6
|
+
} & Exports;
|
7
|
+
(internal: unknown, props: Props & {
|
8
|
+
$$events?: Events;
|
9
|
+
$$slots?: Slots;
|
10
|
+
}): Exports;
|
11
|
+
z_$$bindings?: Bindings;
|
24
12
|
}
|
25
|
-
|
13
|
+
declare const Layout: $$__sveltets_2_IsomorphicComponent<{
|
14
|
+
/** The theme to use for the layout. Leave empty to detect automatically or get from user preferences, if any exist. */
|
15
|
+
theme?: "light" | "dark" | undefined;
|
16
|
+
/** The content to display. */
|
17
|
+
children: Snippet;
|
18
|
+
}, {
|
19
|
+
[evt: string]: CustomEvent<any>;
|
20
|
+
}, {}, {}, "">;
|
21
|
+
type Layout = InstanceType<typeof Layout>;
|
22
|
+
export default Layout;
|
@@ -1,19 +1,18 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
};
|
9
|
-
|
10
|
-
};
|
11
|
-
export type LayoutFooterProps = typeof __propDef.props;
|
12
|
-
export type LayoutFooterEvents = typeof __propDef.events;
|
13
|
-
export type LayoutFooterSlots = typeof __propDef.slots;
|
14
|
-
export default class LayoutFooter extends SvelteComponent<LayoutFooterProps, LayoutFooterEvents, LayoutFooterSlots> {
|
15
|
-
constructor(options?: import("svelte").ComponentConstructorOptions<{
|
16
|
-
copyright?: string | undefined;
|
17
|
-
}>);
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
|
+
$$bindings?: Bindings;
|
4
|
+
} & Exports;
|
5
|
+
(internal: unknown, props: Props & {
|
6
|
+
$$events?: Events;
|
7
|
+
$$slots?: Slots;
|
8
|
+
}): Exports;
|
9
|
+
z_$$bindings?: Bindings;
|
18
10
|
}
|
19
|
-
|
11
|
+
declare const LayoutFooter: $$__sveltets_2_IsomorphicComponent<{
|
12
|
+
/** The copyright text to display. */
|
13
|
+
copyright?: string;
|
14
|
+
}, {
|
15
|
+
[evt: string]: CustomEvent<any>;
|
16
|
+
}, {}, {}, "">;
|
17
|
+
type LayoutFooter = InstanceType<typeof LayoutFooter>;
|
18
|
+
export default LayoutFooter;
|
@@ -1,38 +1,27 @@
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
2
1
|
import { type Snippet } from "svelte";
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
sticky?: boolean | undefined;
|
13
|
-
children: Snippet;
|
14
|
-
};
|
15
|
-
events: {
|
16
|
-
[evt: string]: CustomEvent<any>;
|
17
|
-
};
|
18
|
-
slots: {};
|
19
|
-
};
|
20
|
-
export type LayoutGridProps = typeof __propDef.props;
|
21
|
-
export type LayoutGridEvents = typeof __propDef.events;
|
22
|
-
export type LayoutGridSlots = typeof __propDef.slots;
|
23
|
-
export default class LayoutGrid extends SvelteComponent<LayoutGridProps, LayoutGridEvents, LayoutGridSlots> {
|
24
|
-
constructor(options?: import("svelte").ComponentConstructorOptions<{
|
25
|
-
header?: ((this: void) => typeof import("svelte").SnippetReturn & {
|
26
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
27
|
-
}) | undefined;
|
28
|
-
footer?: ((this: void) => typeof import("svelte").SnippetReturn & {
|
29
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
30
|
-
}) | undefined;
|
31
|
-
border?: boolean | undefined;
|
32
|
-
sticky?: boolean | undefined;
|
33
|
-
children: (this: void) => typeof import("svelte").SnippetReturn & {
|
34
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
35
|
-
};
|
36
|
-
}>);
|
2
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
3
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
4
|
+
$$bindings?: Bindings;
|
5
|
+
} & Exports;
|
6
|
+
(internal: unknown, props: Props & {
|
7
|
+
$$events?: Events;
|
8
|
+
$$slots?: Slots;
|
9
|
+
}): Exports;
|
10
|
+
z_$$bindings?: Bindings;
|
37
11
|
}
|
38
|
-
|
12
|
+
declare const LayoutGrid: $$__sveltets_2_IsomorphicComponent<{
|
13
|
+
/** The header of the grid. */
|
14
|
+
header?: Snippet;
|
15
|
+
/** The footer of the grid. */
|
16
|
+
footer?: Snippet;
|
17
|
+
/** Add a subtle border to the header and footer. */
|
18
|
+
border?: boolean;
|
19
|
+
/** Make the header sticky. */
|
20
|
+
sticky?: boolean;
|
21
|
+
/** The main content of the grid. */
|
22
|
+
children: Snippet;
|
23
|
+
}, {
|
24
|
+
[evt: string]: CustomEvent<any>;
|
25
|
+
}, {}, {}, "">;
|
26
|
+
type LayoutGrid = InstanceType<typeof LayoutGrid>;
|
27
|
+
export default LayoutGrid;
|
@@ -37,6 +37,8 @@ let {
|
|
37
37
|
background: color-mix(in srgb, var(--bg-app) 50%, transparent 50%);
|
38
38
|
backdrop-filter: blur(16px);
|
39
39
|
-webkit-backdrop-filter: blur(16px);
|
40
|
+
display: flex;
|
41
|
+
place-items: center;
|
40
42
|
}
|
41
43
|
.LayoutHeader.sticky {
|
42
44
|
position: sticky;
|
@@ -68,6 +70,7 @@ let {
|
|
68
70
|
grid-template-areas: "left center right";
|
69
71
|
grid-template-columns: 1fr auto 1fr;
|
70
72
|
align-items: center;
|
73
|
+
max-width: var(--max-width, 100%);
|
71
74
|
}
|
72
75
|
li {
|
73
76
|
padding: 0;
|
@@ -1,39 +1,34 @@
|
|
1
|
-
import {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
12
|
-
}) | undefined;
|
13
|
-
skipToContentText?: string | undefined;
|
14
|
-
sticky?: boolean | undefined;
|
15
|
-
};
|
16
|
-
events: {
|
17
|
-
[evt: string]: CustomEvent<any>;
|
18
|
-
};
|
19
|
-
slots: {};
|
20
|
-
};
|
21
|
-
export type LayoutHeaderProps = typeof __propDef.props;
|
22
|
-
export type LayoutHeaderEvents = typeof __propDef.events;
|
23
|
-
export type LayoutHeaderSlots = typeof __propDef.slots;
|
24
|
-
export default class LayoutHeader extends SvelteComponent<LayoutHeaderProps, LayoutHeaderEvents, LayoutHeaderSlots> {
|
25
|
-
constructor(options?: import("svelte").ComponentConstructorOptions<{
|
26
|
-
left?: ((this: void) => typeof import("svelte").SnippetReturn & {
|
27
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
28
|
-
}) | undefined;
|
29
|
-
center?: ((this: void) => typeof import("svelte").SnippetReturn & {
|
30
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
31
|
-
}) | undefined;
|
32
|
-
right?: ((this: void) => typeof import("svelte").SnippetReturn & {
|
33
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
34
|
-
}) | undefined;
|
35
|
-
skipToContentText?: string | undefined;
|
36
|
-
sticky?: boolean | undefined;
|
37
|
-
}>);
|
1
|
+
import { type Snippet } from "svelte";
|
2
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
3
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
4
|
+
$$bindings?: Bindings;
|
5
|
+
} & Exports;
|
6
|
+
(internal: unknown, props: Props & {
|
7
|
+
$$events?: Events;
|
8
|
+
$$slots?: Slots;
|
9
|
+
}): Exports;
|
10
|
+
z_$$bindings?: Bindings;
|
38
11
|
}
|
39
|
-
|
12
|
+
declare const LayoutHeader: $$__sveltets_2_IsomorphicComponent<{
|
13
|
+
left?: Snippet;
|
14
|
+
/**
|
15
|
+
* The center of the header (usually a menu), search bar, etc.
|
16
|
+
*/
|
17
|
+
center?: Snippet;
|
18
|
+
/**
|
19
|
+
* The right side of the header (usually user info, settings, etc.)
|
20
|
+
*/
|
21
|
+
right?: Snippet;
|
22
|
+
/**
|
23
|
+
* The text to display for the skip to content link
|
24
|
+
*/
|
25
|
+
skipToContentText?: string;
|
26
|
+
/**
|
27
|
+
* Whether the header should be sticky
|
28
|
+
*/
|
29
|
+
sticky?: boolean;
|
30
|
+
}, {
|
31
|
+
[evt: string]: CustomEvent<any>;
|
32
|
+
}, {}, {}, "">;
|
33
|
+
type LayoutHeader = InstanceType<typeof LayoutHeader>;
|
34
|
+
export default LayoutHeader;
|
@@ -1,19 +1,28 @@
|
|
1
1
|
<script lang="ts">import MenuItem from "../nav/MenuItem.svelte";
|
2
2
|
let {
|
3
3
|
items,
|
4
|
-
children
|
4
|
+
children,
|
5
|
+
navContainer
|
5
6
|
} = $props();
|
6
7
|
</script>
|
7
8
|
|
9
|
+
{#snippet content()}
|
10
|
+
<nav>
|
11
|
+
<ul>
|
12
|
+
{#each items as item, index}
|
13
|
+
<MenuItem {index} {item} />
|
14
|
+
{/each}
|
15
|
+
</ul>
|
16
|
+
</nav>
|
17
|
+
{/snippet}
|
18
|
+
|
8
19
|
<main>
|
9
20
|
<aside>
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
</ul>
|
16
|
-
</nav>
|
21
|
+
{#if navContainer}
|
22
|
+
{@render navContainer(content)}
|
23
|
+
{:else}
|
24
|
+
{@render content()}
|
25
|
+
{/if}
|
17
26
|
</aside>
|
18
27
|
{@render children()}
|
19
28
|
</main>
|
@@ -22,9 +31,9 @@ let {
|
|
22
31
|
main {
|
23
32
|
display: grid;
|
24
33
|
grid-template-columns: clamp(10rem, 20%, 20rem) 1fr;
|
34
|
+
min-height: 100%;
|
25
35
|
}
|
26
36
|
nav {
|
27
|
-
padding: 4rem 0 4rem 2rem;
|
28
37
|
--menu-item-margin: 0;
|
29
38
|
}
|
30
39
|
ul {
|
@@ -35,14 +44,6 @@ let {
|
|
35
44
|
top: -1rem;
|
36
45
|
border-left: 1px solid var(--border);
|
37
46
|
}
|
38
|
-
@media (max-width: 1280px) {
|
39
|
-
nav {
|
40
|
-
padding: 2rem 0 2rem 1rem;
|
41
|
-
}
|
42
|
-
ul {
|
43
|
-
padding: 0;
|
44
|
-
}
|
45
|
-
}
|
46
47
|
@media(max-width: 800px) {
|
47
48
|
main {
|
48
49
|
grid-template-columns: 1fr;
|
@@ -1,25 +1,21 @@
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
2
1
|
import type { Snippet } from "svelte";
|
3
2
|
import type { MenuItem as Item } from "../nav/MenuTypes.js";
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
};
|
12
|
-
|
13
|
-
};
|
14
|
-
export type LayoutSideMenuProps = typeof __propDef.props;
|
15
|
-
export type LayoutSideMenuEvents = typeof __propDef.events;
|
16
|
-
export type LayoutSideMenuSlots = typeof __propDef.slots;
|
17
|
-
export default class LayoutSideMenu extends SvelteComponent<LayoutSideMenuProps, LayoutSideMenuEvents, LayoutSideMenuSlots> {
|
18
|
-
constructor(options?: import("svelte").ComponentConstructorOptions<{
|
19
|
-
items: Item[];
|
20
|
-
children: (this: void) => typeof import("svelte").SnippetReturn & {
|
21
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
22
|
-
};
|
23
|
-
}>);
|
3
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
4
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
5
|
+
$$bindings?: Bindings;
|
6
|
+
} & Exports;
|
7
|
+
(internal: unknown, props: Props & {
|
8
|
+
$$events?: Events;
|
9
|
+
$$slots?: Slots;
|
10
|
+
}): Exports;
|
11
|
+
z_$$bindings?: Bindings;
|
24
12
|
}
|
25
|
-
|
13
|
+
declare const LayoutSideMenu: $$__sveltets_2_IsomorphicComponent<{
|
14
|
+
items: Item[];
|
15
|
+
children: Snippet;
|
16
|
+
navContainer?: Snippet<[content: Snippet]>;
|
17
|
+
}, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "">;
|
20
|
+
type LayoutSideMenu = InstanceType<typeof LayoutSideMenu>;
|
21
|
+
export default LayoutSideMenu;
|
@@ -1,35 +1,25 @@
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
2
1
|
import { type Snippet } from "svelte";
|
3
2
|
import { type OverlayPosition, type TransitionOpts } from "./overlays.svelte.js";
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
};
|
14
|
-
events: {
|
15
|
-
[evt: string]: CustomEvent<any>;
|
16
|
-
};
|
17
|
-
slots: {};
|
18
|
-
};
|
19
|
-
export type OverlayProps = typeof __propDef.props;
|
20
|
-
export type OverlayEvents = typeof __propDef.events;
|
21
|
-
export type OverlaySlots = typeof __propDef.slots;
|
22
|
-
export default class Overlay extends SvelteComponent<OverlayProps, OverlayEvents, OverlaySlots> {
|
23
|
-
constructor(options?: import("svelte").ComponentConstructorOptions<{
|
24
|
-
id?: string | undefined;
|
25
|
-
children: (this: void) => typeof import("svelte").SnippetReturn & {
|
26
|
-
_: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
|
27
|
-
};
|
28
|
-
anchor?: HTMLElement | undefined;
|
29
|
-
layer?: string | undefined;
|
30
|
-
position?: OverlayPosition | undefined;
|
31
|
-
transition?: TransitionOpts | undefined;
|
32
|
-
z?: number | undefined;
|
33
|
-
}>);
|
3
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
4
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
5
|
+
$$bindings?: Bindings;
|
6
|
+
} & Exports;
|
7
|
+
(internal: unknown, props: Props & {
|
8
|
+
$$events?: Events;
|
9
|
+
$$slots?: Slots;
|
10
|
+
}): Exports;
|
11
|
+
z_$$bindings?: Bindings;
|
34
12
|
}
|
35
|
-
|
13
|
+
declare const Overlay: $$__sveltets_2_IsomorphicComponent<{
|
14
|
+
id?: string;
|
15
|
+
children: Snippet;
|
16
|
+
anchor?: HTMLElement;
|
17
|
+
layer?: string;
|
18
|
+
position?: OverlayPosition;
|
19
|
+
transition?: TransitionOpts;
|
20
|
+
z?: number;
|
21
|
+
}, {
|
22
|
+
[evt: string]: CustomEvent<any>;
|
23
|
+
}, {}, {}, "">;
|
24
|
+
type Overlay = InstanceType<typeof Overlay>;
|
25
|
+
export default Overlay;
|
@@ -1,16 +1,15 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
};
|
9
|
-
|
10
|
-
};
|
11
|
-
export type OverlayContainerProps = typeof __propDef.props;
|
12
|
-
export type OverlayContainerEvents = typeof __propDef.events;
|
13
|
-
export type OverlayContainerSlots = typeof __propDef.slots;
|
14
|
-
export default class OverlayContainer extends SvelteComponent<OverlayContainerProps, OverlayContainerEvents, OverlayContainerSlots> {
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
3
|
+
$$bindings?: Bindings;
|
4
|
+
} & Exports;
|
5
|
+
(internal: unknown, props: {
|
6
|
+
$$events?: Events;
|
7
|
+
$$slots?: Slots;
|
8
|
+
}): Exports;
|
9
|
+
z_$$bindings?: Bindings;
|
15
10
|
}
|
16
|
-
|
11
|
+
declare const OverlayContainer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
12
|
+
[evt: string]: CustomEvent<any>;
|
13
|
+
}, {}, {}, string>;
|
14
|
+
type OverlayContainer = InstanceType<typeof OverlayContainer>;
|
15
|
+
export default OverlayContainer;
|
@@ -21,8 +21,7 @@ let positions = $derived.by(() => {
|
|
21
21
|
contentEls;
|
22
22
|
return items.map((item) => {
|
23
23
|
const contentEl = contentEls[item.id];
|
24
|
-
if (!item.anchor || !contentEl)
|
25
|
-
return { left: 0, top: 0, index: 1 };
|
24
|
+
if (!item.anchor || !contentEl) return { left: 0, top: 0, index: 1 };
|
26
25
|
const triggerPos = item.anchor.getBoundingClientRect();
|
27
26
|
const height = contentEl.clientHeight;
|
28
27
|
const width = contentEl.clientWidth;
|
@@ -30,10 +29,8 @@ let positions = $derived.by(() => {
|
|
30
29
|
const isOffRight = triggerPos.left + width > window.innerWidth - fudge;
|
31
30
|
let left = triggerPos.left;
|
32
31
|
let top = triggerPos.top + triggerPos.height + fudge;
|
33
|
-
if (isOffRight)
|
34
|
-
|
35
|
-
if (isOffBottom)
|
36
|
-
top = top - height - triggerPos.height - fudge * 2;
|
32
|
+
if (isOffRight) left = left - width + triggerPos.width;
|
33
|
+
if (isOffBottom) top = top - height - triggerPos.height - fudge * 2;
|
37
34
|
return {
|
38
35
|
left,
|
39
36
|
top,
|
@@ -55,10 +52,8 @@ let origins = $derived.by(() => {
|
|
55
52
|
const isOffBottom = triggerPos.bottom + height > innerHeight - fudge;
|
56
53
|
const isOffRight = triggerPos.left + width > innerWidth - fudge;
|
57
54
|
let text = "top left";
|
58
|
-
if (isOffRight)
|
59
|
-
|
60
|
-
if (isOffBottom)
|
61
|
-
text = text.replace("top", "bottom");
|
55
|
+
if (isOffRight) text = text.replace("left", "right");
|
56
|
+
if (isOffBottom) text = text.replace("top", "bottom");
|
62
57
|
return text;
|
63
58
|
});
|
64
59
|
});
|
@@ -91,7 +86,7 @@ function introend(item) {
|
|
91
86
|
style="--index: {index}; --z: {item.z}; --left: {positions[index].left}px; --top: {positions[index].top}px;"
|
92
87
|
>
|
93
88
|
{#if isComponent(item.content)}
|
94
|
-
<
|
89
|
+
<item.content {...item.props} />
|
95
90
|
{:else if isSnippet(item.content)}
|
96
91
|
{@render item.content()}
|
97
92
|
{/if}
|
@@ -1,22 +1,19 @@
|
|
1
|
-
import { SvelteComponent } from "svelte";
|
2
1
|
import { type OverlayItem, type OverlayPosition } from "./overlays.svelte.js";
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
};
|
11
|
-
|
12
|
-
};
|
13
|
-
export type OverlayLayerProps = typeof __propDef.props;
|
14
|
-
export type OverlayLayerEvents = typeof __propDef.events;
|
15
|
-
export type OverlayLayerSlots = typeof __propDef.slots;
|
16
|
-
export default class OverlayLayer extends SvelteComponent<OverlayLayerProps, OverlayLayerEvents, OverlayLayerSlots> {
|
17
|
-
constructor(options?: import("svelte").ComponentConstructorOptions<{
|
18
|
-
position?: OverlayPosition | undefined;
|
19
|
-
items: OverlayItem[];
|
20
|
-
}>);
|
2
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
3
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
4
|
+
$$bindings?: Bindings;
|
5
|
+
} & Exports;
|
6
|
+
(internal: unknown, props: Props & {
|
7
|
+
$$events?: Events;
|
8
|
+
$$slots?: Slots;
|
9
|
+
}): Exports;
|
10
|
+
z_$$bindings?: Bindings;
|
21
11
|
}
|
22
|
-
|
12
|
+
declare const OverlayLayer: $$__sveltets_2_IsomorphicComponent<{
|
13
|
+
position?: OverlayPosition;
|
14
|
+
items: OverlayItem[];
|
15
|
+
}, {
|
16
|
+
[evt: string]: CustomEvent<any>;
|
17
|
+
}, {}, {}, "">;
|
18
|
+
type OverlayLayer = InstanceType<typeof OverlayLayer>;
|
19
|
+
export default OverlayLayer;
|