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.
Files changed (192) hide show
  1. package/dist/color.css +0 -0
  2. package/dist/display/Avatar.svelte +1 -1
  3. package/dist/display/Avatar.svelte.d.ts +18 -22
  4. package/dist/display/Badge.svelte +2 -4
  5. package/dist/display/Badge.svelte.d.ts +28 -32
  6. package/dist/display/Callout.svelte +8 -8
  7. package/dist/display/Callout.svelte.d.ts +27 -35
  8. package/dist/display/Close.svelte.d.ts +17 -20
  9. package/dist/display/Code.svelte +26 -31
  10. package/dist/display/Code.svelte.d.ts +31 -30
  11. package/dist/display/ContextTip.svelte +2 -5
  12. package/dist/display/ContextTip.svelte.d.ts +16 -20
  13. package/dist/display/DataList.svelte +16 -0
  14. package/dist/display/DataList.svelte.d.ts +21 -0
  15. package/dist/display/Details.svelte.d.ts +25 -30
  16. package/dist/display/Hero.svelte.d.ts +24 -28
  17. package/dist/display/Icon.svelte +3 -4
  18. package/dist/display/Icon.svelte.d.ts +18 -23
  19. package/dist/display/IconButton.svelte +12 -5
  20. package/dist/display/IconButton.svelte.d.ts +26 -29
  21. package/dist/display/Image.svelte.d.ts +25 -36
  22. package/dist/display/Indicator.svelte.d.ts +21 -22
  23. package/dist/display/Inset.svelte.d.ts +16 -20
  24. package/dist/display/LineChart.svelte +385 -0
  25. package/dist/display/LineChart.svelte.d.ts +24 -0
  26. package/dist/display/LoadingIndicator.svelte +33 -0
  27. package/dist/display/LoadingIndicator.svelte.d.ts +15 -0
  28. package/dist/display/Modal.svelte +116 -0
  29. package/dist/display/Modal.svelte.d.ts +27 -0
  30. package/dist/display/Notification.svelte.d.ts +22 -41
  31. package/dist/display/Panel.svelte +23 -0
  32. package/dist/display/Panel.svelte.d.ts +19 -0
  33. package/dist/display/Popup.svelte.d.ts +23 -28
  34. package/dist/{data → display}/Stat.svelte +9 -17
  35. package/dist/display/Stat.svelte.d.ts +30 -0
  36. package/dist/display/Table.svelte +14 -10
  37. package/dist/display/Table.svelte.d.ts +22 -32
  38. package/dist/display/TablePaginator.svelte +51 -0
  39. package/dist/display/TablePaginator.svelte.d.ts +21 -0
  40. package/dist/display/Tag.svelte.d.ts +29 -32
  41. package/dist/display/Tooltip.svelte +5 -4
  42. package/dist/display/Tooltip.svelte.d.ts +21 -26
  43. package/dist/display/chart.d.ts +78 -0
  44. package/dist/display/chart.js +212 -0
  45. package/dist/display/index.d.ts +11 -1
  46. package/dist/display/index.js +11 -1
  47. package/dist/display/notifications.svelte.d.ts +3 -3
  48. package/dist/display/notifications.svelte.js +2 -2
  49. package/dist/form/Button.svelte +7 -2
  50. package/dist/form/Button.svelte.d.ts +25 -35
  51. package/dist/form/FieldActions.svelte +25 -3
  52. package/dist/form/FieldActions.svelte.d.ts +18 -22
  53. package/dist/form/FieldContainer.svelte +1 -1
  54. package/dist/form/FieldContainer.svelte.d.ts +17 -22
  55. package/dist/form/FieldContent.svelte +52 -33
  56. package/dist/form/FieldContent.svelte.d.ts +28 -56
  57. package/dist/form/FieldError.svelte.d.ts +17 -20
  58. package/dist/form/FieldSection.svelte.d.ts +18 -32
  59. package/dist/form/Fieldset.svelte.d.ts +29 -40
  60. package/dist/form/Form.svelte +55 -16
  61. package/dist/form/Form.svelte.d.ts +36 -31
  62. package/dist/form/ImageUpload.svelte +259 -0
  63. package/dist/form/ImageUpload.svelte.d.ts +31 -0
  64. package/dist/form/Input.svelte +192 -153
  65. package/dist/form/Input.svelte.d.ts +115 -140
  66. package/dist/form/InputLength.svelte.d.ts +19 -20
  67. package/dist/form/Label.svelte +21 -4
  68. package/dist/form/Label.svelte.d.ts +24 -30
  69. package/dist/form/LogoUpload.svelte +100 -0
  70. package/dist/form/LogoUpload.svelte.d.ts +29 -0
  71. package/dist/form/Select.svelte +84 -36
  72. package/dist/form/Select.svelte.d.ts +69 -96
  73. package/dist/form/Textarea.svelte +163 -0
  74. package/dist/form/Textarea.svelte.d.ts +108 -0
  75. package/dist/form/Toggle.svelte +2 -0
  76. package/dist/form/Toggle.svelte.d.ts +15 -0
  77. package/dist/form/client.svelte.d.ts +8 -9
  78. package/dist/form/client.svelte.js +18 -10
  79. package/dist/form/form.d.ts +6 -4
  80. package/dist/form/form.js +23 -9
  81. package/dist/form/index.d.ts +6 -3
  82. package/dist/form/index.js +6 -3
  83. package/dist/form/types.d.ts +11 -1
  84. package/dist/icons/IconAlert.svelte.d.ts +23 -0
  85. package/dist/icons/{Copy.svelte → IconCopy.svelte} +1 -1
  86. package/dist/icons/IconCopy.svelte.d.ts +23 -0
  87. package/dist/icons/IconDone.svelte.d.ts +23 -0
  88. package/dist/icons/IconError.svelte.d.ts +23 -0
  89. package/dist/icons/IconHelp.svelte.d.ts +23 -0
  90. package/dist/icons/IconHide.svelte.d.ts +23 -0
  91. package/dist/icons/IconInfo.svelte.d.ts +23 -0
  92. package/dist/icons/IconLink.svelte.d.ts +23 -0
  93. package/dist/icons/IconMenuBurger.svelte.d.ts +23 -0
  94. package/dist/icons/IconMenuDots.svelte.d.ts +23 -0
  95. package/dist/icons/IconSearch.svelte +3 -0
  96. package/dist/icons/IconSearch.svelte.d.ts +23 -0
  97. package/dist/icons/IconShow.svelte.d.ts +23 -0
  98. package/dist/icons/IconSuccess.svelte.d.ts +23 -0
  99. package/dist/icons/IconWarning.svelte.d.ts +23 -0
  100. package/dist/icons/index.d.ts +14 -11
  101. package/dist/icons/index.js +14 -11
  102. package/dist/layout/Layout.svelte +7 -5
  103. package/dist/layout/Layout.svelte.d.ts +19 -22
  104. package/dist/layout/LayoutFooter.svelte.d.ts +17 -18
  105. package/dist/layout/LayoutGrid.svelte.d.ts +25 -36
  106. package/dist/layout/LayoutHeader.svelte +3 -0
  107. package/dist/layout/LayoutHeader.svelte.d.ts +33 -38
  108. package/dist/layout/LayoutSideMenu.svelte +18 -17
  109. package/dist/layout/LayoutSideMenu.svelte.d.ts +18 -22
  110. package/dist/layout/Overlay.svelte.d.ts +22 -32
  111. package/dist/layout/OverlayContainer.svelte.d.ts +14 -15
  112. package/dist/layout/OverlayLayer.svelte +6 -11
  113. package/dist/layout/OverlayLayer.svelte.d.ts +17 -20
  114. package/dist/layout/PageContent.svelte +9 -24
  115. package/dist/layout/PageContent.svelte.d.ts +23 -26
  116. package/dist/layout/Theme.svelte +19 -4
  117. package/dist/layout/Theme.svelte.d.ts +17 -22
  118. package/dist/layout/UIContent.svelte.d.ts +16 -20
  119. package/dist/layout/index.d.ts +5 -1
  120. package/dist/layout/index.js +5 -1
  121. package/dist/layout/overlays.svelte.d.ts +2 -2
  122. package/dist/nav/Breadcrumb.svelte +1 -1
  123. package/dist/nav/Breadcrumb.svelte.d.ts +26 -31
  124. package/dist/nav/Menu.svelte +6 -13
  125. package/dist/nav/Menu.svelte.d.ts +25 -31
  126. package/dist/nav/MenuItem.svelte +15 -8
  127. package/dist/nav/MenuItem.svelte.d.ts +20 -24
  128. package/dist/nav/MenuTypes.d.ts +7 -7
  129. package/dist/nav/NavMenu.svelte +7 -9
  130. package/dist/nav/NavMenu.svelte.d.ts +17 -18
  131. package/dist/nav/TabbedContent.svelte +1 -1
  132. package/dist/nav/TabbedContent.svelte.d.ts +21 -22
  133. package/dist/nav/Tabs.svelte +53 -13
  134. package/dist/nav/Tabs.svelte.d.ts +24 -25
  135. package/dist/nav/index.d.ts +2 -1
  136. package/dist/nav/index.js +2 -1
  137. package/dist/style.css +176 -79
  138. package/dist/typo/Clamp.svelte.d.ts +22 -26
  139. package/dist/typo/H.svelte.d.ts +26 -30
  140. package/dist/typo/H1.svelte.d.ts +24 -28
  141. package/dist/typo/H2.svelte.d.ts +24 -28
  142. package/dist/typo/H3.svelte.d.ts +24 -28
  143. package/dist/typo/H4.svelte.d.ts +24 -28
  144. package/dist/typo/H5.svelte.d.ts +24 -28
  145. package/dist/typo/H6.svelte.d.ts +24 -28
  146. package/dist/typo/P.svelte.d.ts +24 -28
  147. package/dist/utils/StringOrComponent.svelte +14 -0
  148. package/dist/utils/StringOrComponent.svelte.d.ts +19 -0
  149. package/dist/utils/StringOrSnippet.svelte +11 -0
  150. package/dist/utils/StringOrSnippet.svelte.d.ts +19 -0
  151. package/dist/utils/color.d.ts +1 -1
  152. package/dist/utils/index.d.ts +2 -1
  153. package/dist/utils/index.js +2 -1
  154. package/dist/utils/isSnippet.d.ts +3 -5
  155. package/dist/utils/isSnippet.js +9 -4
  156. package/package.json +32 -25
  157. package/dist/data/Stat.svelte.d.ts +0 -39
  158. package/dist/data/index.d.ts +0 -1
  159. package/dist/data/index.js +0 -1
  160. package/dist/grid/Column.svelte +0 -11
  161. package/dist/grid/Column.svelte.d.ts +0 -22
  162. package/dist/grid/Grid.svelte +0 -19
  163. package/dist/grid/Grid.svelte.d.ts +0 -24
  164. package/dist/grid/Row.svelte +0 -44
  165. package/dist/grid/Row.svelte.d.ts +0 -24
  166. package/dist/icons/Alert.svelte.d.ts +0 -23
  167. package/dist/icons/Copy.svelte.d.ts +0 -23
  168. package/dist/icons/Done.svelte.d.ts +0 -23
  169. package/dist/icons/Error.svelte.d.ts +0 -23
  170. package/dist/icons/Help.svelte.d.ts +0 -23
  171. package/dist/icons/Hide.svelte.d.ts +0 -23
  172. package/dist/icons/Info.svelte.d.ts +0 -23
  173. package/dist/icons/Link.svelte.d.ts +0 -23
  174. package/dist/icons/MenuBurger.svelte.d.ts +0 -23
  175. package/dist/icons/MenuDots.svelte.d.ts +0 -23
  176. package/dist/icons/Show.svelte.d.ts +0 -23
  177. package/dist/icons/Success.svelte.d.ts +0 -23
  178. package/dist/icons/Warning.svelte.d.ts +0 -23
  179. package/dist/utils/StringOrComponentOrSnippet.svelte +0 -14
  180. package/dist/utils/StringOrComponentOrSnippet.svelte.d.ts +0 -24
  181. /package/dist/icons/{Alert.svelte → IconAlert.svelte} +0 -0
  182. /package/dist/icons/{Done.svelte → IconDone.svelte} +0 -0
  183. /package/dist/icons/{Error.svelte → IconError.svelte} +0 -0
  184. /package/dist/icons/{Help.svelte → IconHelp.svelte} +0 -0
  185. /package/dist/icons/{Hide.svelte → IconHide.svelte} +0 -0
  186. /package/dist/icons/{Info.svelte → IconInfo.svelte} +0 -0
  187. /package/dist/icons/{Link.svelte → IconLink.svelte} +0 -0
  188. /package/dist/icons/{MenuBurger.svelte → IconMenuBurger.svelte} +0 -0
  189. /package/dist/icons/{MenuDots.svelte → IconMenuDots.svelte} +0 -0
  190. /package/dist/icons/{Show.svelte → IconShow.svelte} +0 -0
  191. /package/dist/icons/{Success.svelte → IconSuccess.svelte} +0 -0
  192. /package/dist/icons/{Warning.svelte → IconWarning.svelte} +0 -0
@@ -1,11 +1,14 @@
1
- export { default as Alert } from './Alert.svelte';
2
- export { default as Copy } from './Copy.svelte';
3
- export { default as Done } from './Done.svelte';
4
- export { default as Error } from './Error.svelte';
5
- export { default as Help } from './Help.svelte';
6
- export { default as Hide } from './Hide.svelte';
7
- export { default as Info } from './Info.svelte';
8
- export { default as Link } from './Link.svelte';
9
- export { default as Show } from './Show.svelte';
10
- export { default as Success } from './Success.svelte';
11
- export { default as Warning } from './Warning.svelte';
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';
@@ -1,11 +1,14 @@
1
- export { default as Alert } from './Alert.svelte';
2
- export { default as Copy } from './Copy.svelte';
3
- export { default as Done } from './Done.svelte';
4
- export { default as Error } from './Error.svelte';
5
- export { default as Help } from './Help.svelte';
6
- export { default as Hide } from './Hide.svelte';
7
- export { default as Info } from './Info.svelte';
8
- export { default as Link } from './Link.svelte';
9
- export { default as Show } from './Show.svelte';
10
- export { default as Success } from './Success.svelte';
11
- export { default as Warning } from './Warning.svelte';
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
- <div class="Layout">
35
- <Theme theme={theme}>
34
+ <Theme theme={theme}>
35
+ <div class="Layout">
36
36
  {@render children()}
37
37
  <OverlayContainer />
38
- </Theme>
39
- </div>
38
+ </div>
39
+ </Theme>
40
40
 
41
41
  <style>
42
42
  .Layout {
43
- display: contents;
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
- declare const __propDef: {
5
- props: {
6
- theme?: 'light' | 'dark' | undefined;
7
- children: Snippet;
8
- };
9
- events: {
10
- [evt: string]: CustomEvent<any>;
11
- };
12
- slots: {};
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
- export {};
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
- import { SvelteComponent } from "svelte";
2
- declare const __propDef: {
3
- props: {
4
- copyright?: string | undefined;
5
- };
6
- events: {
7
- [evt: string]: CustomEvent<any>;
8
- };
9
- slots: {};
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
- export {};
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
- declare const __propDef: {
4
- props: {
5
- header?: ((this: void) => typeof import("svelte").SnippetReturn & {
6
- _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
7
- }) | undefined;
8
- footer?: ((this: void) => typeof import("svelte").SnippetReturn & {
9
- _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
10
- }) | undefined;
11
- border?: boolean | undefined;
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
- export {};
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 { SvelteComponent } from "svelte";
2
- declare const __propDef: {
3
- props: {
4
- left?: ((this: void) => typeof import("svelte").SnippetReturn & {
5
- _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
6
- }) | undefined;
7
- center?: ((this: void) => typeof import("svelte").SnippetReturn & {
8
- _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
9
- }) | undefined;
10
- right?: ((this: void) => typeof import("svelte").SnippetReturn & {
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
- export {};
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
- <nav>
11
- <ul>
12
- {#each items as item, index}
13
- <MenuItem {index} {item} />
14
- {/each}
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
- declare const __propDef: {
5
- props: {
6
- items: Item[];
7
- children: Snippet;
8
- };
9
- events: {
10
- [evt: string]: CustomEvent<any>;
11
- };
12
- slots: {};
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
- export {};
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
- declare const __propDef: {
5
- props: {
6
- id?: string | undefined;
7
- children: Snippet;
8
- anchor?: HTMLElement | undefined;
9
- layer?: string | undefined;
10
- position?: OverlayPosition | undefined;
11
- transition?: TransitionOpts | undefined;
12
- z?: number | undefined;
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
- export {};
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
- import { SvelteComponent } from "svelte";
2
- declare const __propDef: {
3
- props: {
4
- [x: string]: never;
5
- };
6
- events: {
7
- [evt: string]: CustomEvent<any>;
8
- };
9
- slots: {};
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
- export {};
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
- left = left - width + triggerPos.width;
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
- text = text.replace("left", "right");
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
- <svelte:component this={item.content} {...item.props} />
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
- declare const __propDef: {
4
- props: {
5
- position?: OverlayPosition | undefined;
6
- items: OverlayItem[];
7
- };
8
- events: {
9
- [evt: string]: CustomEvent<any>;
10
- };
11
- slots: {};
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
- export {};
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;