@marianmeres/stuic 1.126.0 → 2.0.0-next.2

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 (252) hide show
  1. package/README.md +2 -8
  2. package/dist/_shared.css +2 -0
  3. package/dist/actions/autogrow.svelte.d.ts +6 -0
  4. package/dist/actions/autogrow.svelte.js +19 -0
  5. package/dist/actions/highlight-dragover.svelte.d.ts +7 -0
  6. package/dist/actions/highlight-dragover.svelte.js +38 -0
  7. package/dist/actions/index.d.ts +7 -0
  8. package/dist/actions/index.js +7 -0
  9. package/dist/actions/on-submit-validity-check.svelte.d.ts +15 -0
  10. package/dist/actions/on-submit-validity-check.svelte.js +58 -0
  11. package/dist/actions/tooltip/index.css +34 -0
  12. package/dist/actions/tooltip/tooltip.svelte.d.ts +13 -0
  13. package/dist/actions/tooltip/tooltip.svelte.js +203 -0
  14. package/dist/actions/trim.svelte.d.ts +4 -0
  15. package/dist/actions/trim.svelte.js +17 -0
  16. package/dist/actions/{validate.d.ts → validate.svelte.d.ts} +8 -8
  17. package/dist/actions/validate.svelte.js +90 -0
  18. package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte +59 -385
  19. package/dist/components/AlertConfirmPrompt/AlertConfirmPrompt.svelte.d.ts +9 -101
  20. package/dist/components/AlertConfirmPrompt/Current.svelte +202 -0
  21. package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts +22 -0
  22. package/dist/components/AlertConfirmPrompt/acp-icons.d.ts +7 -2
  23. package/dist/components/AlertConfirmPrompt/acp-icons.js +8 -8
  24. package/dist/components/AlertConfirmPrompt/alert-confirm-prompt-stack.svelte.d.ts +63 -0
  25. package/dist/components/AlertConfirmPrompt/alert-confirm-prompt-stack.svelte.js +144 -0
  26. package/dist/components/AlertConfirmPrompt/index.d.ts +2 -0
  27. package/dist/components/AlertConfirmPrompt/index.js +2 -0
  28. package/dist/components/AnimatedElipsis/AnimatedEllipsis.svelte +47 -0
  29. package/dist/components/AnimatedElipsis/AnimatedEllipsis.svelte.d.ts +7 -0
  30. package/dist/components/AnimatedElipsis/index.d.ts +1 -0
  31. package/dist/components/AnimatedElipsis/index.js +1 -0
  32. package/dist/components/AppShell/AppShell.svelte +188 -127
  33. package/dist/components/AppShell/AppShell.svelte.d.ts +62 -43
  34. package/dist/components/AppShell/index.d.ts +1 -0
  35. package/dist/components/AppShell/index.js +1 -0
  36. package/dist/components/Backdrop/Backdrop.svelte +149 -49
  37. package/dist/components/Backdrop/Backdrop.svelte.d.ts +22 -37
  38. package/dist/components/Backdrop/index.d.ts +1 -0
  39. package/dist/components/Backdrop/index.js +1 -0
  40. package/dist/components/Button/Button.svelte +122 -146
  41. package/dist/components/Button/Button.svelte.d.ts +22 -80
  42. package/dist/components/Button/index.css +16 -0
  43. package/dist/components/Button/index.d.ts +1 -0
  44. package/dist/components/Button/index.js +1 -0
  45. package/dist/components/ColResize/ColResize.svelte +0 -0
  46. package/dist/components/ColResize/ColResize.svelte.d.ts +26 -0
  47. package/dist/components/ColorScheme/{LocalColorScheme.svelte → ColorSchemeLocal.svelte} +2 -2
  48. package/dist/components/ColorScheme/ColorSchemeLocal.svelte.d.ts +26 -0
  49. package/dist/components/ColorScheme/{SystemAwareColorScheme.svelte → ColorSchemeSystemAware.svelte} +4 -4
  50. package/dist/components/ColorScheme/ColorSchemeSystemAware.svelte.d.ts +26 -0
  51. package/dist/components/ColorScheme/color-scheme.d.ts +26 -8
  52. package/dist/components/ColorScheme/color-scheme.js +40 -16
  53. package/dist/components/ColorScheme/index.d.ts +3 -0
  54. package/dist/components/ColorScheme/index.js +3 -0
  55. package/dist/components/DismissibleMessage/DismissibleMessage.svelte +76 -83
  56. package/dist/components/DismissibleMessage/DismissibleMessage.svelte.d.ts +16 -37
  57. package/dist/components/DismissibleMessage/index.css +13 -0
  58. package/dist/components/DismissibleMessage/index.d.ts +1 -0
  59. package/dist/components/DismissibleMessage/index.js +1 -0
  60. package/dist/components/Drawer/Drawer.svelte +155 -84
  61. package/dist/components/Drawer/Drawer.svelte.d.ts +24 -35
  62. package/dist/components/Drawer/index.d.ts +1 -0
  63. package/dist/components/Drawer/index.js +1 -0
  64. package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte +150 -111
  65. package/dist/components/HoverExpandableWidth/HoverExpandableWidth.svelte.d.ts +16 -29
  66. package/dist/components/HoverExpandableWidth/index.d.ts +1 -0
  67. package/dist/components/HoverExpandableWidth/index.js +1 -0
  68. package/dist/components/Input/FieldCheckbox.svelte +174 -132
  69. package/dist/components/Input/FieldCheckbox.svelte.d.ts +28 -64
  70. package/dist/components/Input/FieldFile.svelte +166 -0
  71. package/dist/components/Input/FieldFile.svelte.d.ts +41 -0
  72. package/dist/components/Input/FieldInput.svelte +143 -0
  73. package/dist/components/Input/FieldInput.svelte.d.ts +41 -0
  74. package/dist/components/Input/FieldLikeButton.svelte +206 -0
  75. package/dist/components/Input/FieldLikeButton.svelte.d.ts +41 -0
  76. package/dist/components/Input/FieldOptions.svelte +646 -0
  77. package/dist/components/Input/FieldOptions.svelte.d.ts +58 -0
  78. package/dist/components/Input/FieldRadios.svelte +126 -77
  79. package/dist/components/Input/FieldRadios.svelte.d.ts +23 -61
  80. package/dist/components/Input/FieldSelect.svelte +160 -239
  81. package/dist/components/Input/FieldSelect.svelte.d.ts +40 -88
  82. package/dist/components/Input/FieldSwitch.svelte +132 -0
  83. package/dist/components/Input/FieldSwitch.svelte.d.ts +41 -0
  84. package/dist/components/Input/FieldTextarea.svelte +146 -0
  85. package/dist/components/Input/FieldTextarea.svelte.d.ts +44 -0
  86. package/dist/components/Input/Fieldset.svelte +21 -17
  87. package/dist/components/Input/Fieldset.svelte.d.ts +10 -27
  88. package/dist/components/Input/_internal/FieldRadioInternal.svelte +186 -0
  89. package/dist/components/Input/_internal/FieldRadioInternal.svelte.d.ts +30 -0
  90. package/dist/components/Input/_internal/InputWrap.svelte +216 -0
  91. package/dist/components/Input/_internal/InputWrap.svelte.d.ts +36 -0
  92. package/dist/components/Input/index.css +134 -0
  93. package/dist/components/Input/index.d.ts +11 -0
  94. package/dist/components/Input/index.js +11 -0
  95. package/dist/components/Input/types.d.ts +11 -0
  96. package/dist/components/KbdShortcut/KbdShortcut.svelte +89 -0
  97. package/dist/components/KbdShortcut/KbdShortcut.svelte.d.ts +17 -0
  98. package/dist/components/KbdShortcut/index.d.ts +1 -0
  99. package/dist/components/KbdShortcut/index.js +1 -0
  100. package/dist/components/Modal/Modal.svelte +127 -0
  101. package/dist/components/Modal/Modal.svelte.d.ts +32 -0
  102. package/dist/components/Modal/index.d.ts +1 -0
  103. package/dist/components/Modal/index.js +1 -0
  104. package/dist/components/ModalDialog/ModalDialog.svelte +137 -81
  105. package/dist/components/ModalDialog/ModalDialog.svelte.d.ts +17 -38
  106. package/dist/components/ModalDialog/index.d.ts +1 -0
  107. package/dist/components/ModalDialog/index.js +1 -0
  108. package/dist/components/Notifications/Notifications.svelte +259 -173
  109. package/dist/components/Notifications/Notifications.svelte.d.ts +32 -60
  110. package/dist/components/Notifications/index.css +12 -0
  111. package/dist/components/Notifications/index.d.ts +2 -0
  112. package/dist/components/Notifications/index.js +2 -0
  113. package/dist/components/Notifications/notifications-icons.d.ts +1 -1
  114. package/dist/components/Notifications/notifications-icons.js +4 -4
  115. package/dist/components/Notifications/notifications-stack.svelte.d.ts +89 -0
  116. package/dist/components/Notifications/notifications-stack.svelte.js +161 -0
  117. package/dist/components/Progress/Progress.svelte +26 -0
  118. package/dist/components/Progress/Progress.svelte.d.ts +10 -0
  119. package/dist/components/Progress/_internal/Bar.svelte +31 -0
  120. package/dist/components/Progress/_internal/Bar.svelte.d.ts +10 -0
  121. package/dist/components/Progress/_internal/Circle.svelte +10 -0
  122. package/dist/components/Progress/_internal/Circle.svelte.d.ts +7 -0
  123. package/dist/components/Progress/index.css +7 -0
  124. package/dist/components/Progress/index.d.ts +1 -0
  125. package/dist/components/Progress/index.js +1 -0
  126. package/dist/components/Spinner/Spinner.svelte +56 -41
  127. package/dist/components/Spinner/Spinner.svelte.d.ts +10 -22
  128. package/dist/components/Spinner/index.d.ts +1 -0
  129. package/dist/components/Spinner/index.js +1 -0
  130. package/dist/components/Switch/Switch.svelte +158 -118
  131. package/dist/components/Switch/Switch.svelte.d.ts +25 -66
  132. package/dist/components/Switch/SwitchButton.svelte +131 -0
  133. package/dist/components/Switch/SwitchButton.svelte.d.ts +21 -0
  134. package/dist/components/Switch/index.css +7 -0
  135. package/dist/components/Switch/index.d.ts +2 -0
  136. package/dist/components/Switch/index.js +2 -0
  137. package/dist/components/Thc/Thc.svelte +67 -10
  138. package/dist/components/Thc/Thc.svelte.d.ts +18 -22
  139. package/dist/components/Thc/index.d.ts +1 -0
  140. package/dist/components/Thc/index.js +1 -0
  141. package/dist/components/TwCheck/TwCheck.svelte +34 -0
  142. package/dist/components/TwCheck/TwCheck.svelte.d.ts +10 -0
  143. package/dist/components/TwCheck/index.css +5 -0
  144. package/dist/components/TwCheck/index.d.ts +1 -0
  145. package/dist/components/TwCheck/index.js +1 -0
  146. package/dist/components/X/X.svelte +12 -5
  147. package/dist/components/X/X.svelte.d.ts +6 -18
  148. package/dist/components/X/index.d.ts +1 -0
  149. package/dist/components/X/index.js +1 -0
  150. package/dist/index.css +26 -0
  151. package/dist/index.d.ts +21 -39
  152. package/dist/index.js +23 -54
  153. package/dist/types.d.ts +251 -2
  154. package/dist/types.js +248 -0
  155. package/dist/utils/breakpoint.svelte.d.ts +19 -0
  156. package/dist/utils/breakpoint.svelte.js +42 -0
  157. package/dist/utils/debounce.d.ts +13 -0
  158. package/dist/utils/debounce.js +22 -0
  159. package/dist/utils/device-pointer.svelte.d.ts +11 -0
  160. package/dist/utils/device-pointer.svelte.js +26 -0
  161. package/dist/utils/event-modifiers.d.ts +4 -0
  162. package/dist/utils/event-modifiers.js +29 -0
  163. package/dist/utils/get-id.d.ts +1 -1
  164. package/dist/utils/get-id.js +3 -1
  165. package/dist/utils/index.d.ts +21 -0
  166. package/dist/utils/index.js +21 -0
  167. package/dist/utils/is-browser.d.ts +1 -0
  168. package/dist/utils/is-browser.js +5 -0
  169. package/dist/utils/is-mac.d.ts +1 -0
  170. package/dist/utils/is-mac.js +11 -0
  171. package/dist/utils/maybe-json-parse.d.ts +1 -0
  172. package/dist/utils/maybe-json-parse.js +12 -0
  173. package/dist/utils/maybe-json-stringify.d.ts +1 -0
  174. package/dist/utils/maybe-json-stringify.js +11 -0
  175. package/dist/utils/move-array-item.d.ts +4 -0
  176. package/dist/utils/move-array-item.js +20 -0
  177. package/dist/utils/omit-pick.d.ts +2 -2
  178. package/dist/utils/omit-pick.js +10 -8
  179. package/dist/utils/paint.d.ts +18 -0
  180. package/dist/utils/paint.js +32 -0
  181. package/dist/utils/persistent-state.svelte.d.ts +23 -0
  182. package/dist/utils/persistent-state.svelte.js +48 -0
  183. package/dist/utils/prefers-reduced-motion.svelte.d.ts +2 -0
  184. package/dist/utils/prefers-reduced-motion.svelte.js +4 -0
  185. package/dist/utils/qsa.d.ts +1 -0
  186. package/dist/utils/qsa.js +3 -0
  187. package/dist/utils/sleep.d.ts +28 -0
  188. package/dist/utils/sleep.js +33 -0
  189. package/dist/utils/storage-abstraction.d.ts +35 -0
  190. package/dist/utils/storage-abstraction.js +136 -0
  191. package/dist/utils/str-hash.d.ts +7 -0
  192. package/dist/utils/str-hash.js +35 -0
  193. package/dist/utils/throttle.d.ts +1 -0
  194. package/dist/utils/throttle.js +47 -0
  195. package/dist/utils/to-integer.d.ts +1 -0
  196. package/dist/utils/to-integer.js +11 -0
  197. package/dist/utils/tr.d.ts +5 -0
  198. package/dist/utils/tr.js +13 -0
  199. package/dist/utils/tw-merge.d.ts +10 -0
  200. package/dist/utils/tw-merge.js +16 -0
  201. package/dist/utils/ucfirst.d.ts +1 -0
  202. package/dist/utils/ucfirst.js +6 -0
  203. package/package.json +66 -73
  204. package/dist/actions/autogrow.d.ts +0 -8
  205. package/dist/actions/autogrow.js +0 -22
  206. package/dist/actions/autoscroll.d.ts +0 -21
  207. package/dist/actions/autoscroll.js +0 -60
  208. package/dist/actions/drag-drop.d.ts +0 -28
  209. package/dist/actions/drag-drop.js +0 -152
  210. package/dist/actions/on-outside.d.ts +0 -9
  211. package/dist/actions/on-outside.js +0 -27
  212. package/dist/actions/pre-submit-validity-check.d.ts +0 -3
  213. package/dist/actions/pre-submit-validity-check.js +0 -21
  214. package/dist/actions/tooltip/_make-visible.d.ts +0 -3
  215. package/dist/actions/tooltip/_make-visible.js +0 -25
  216. package/dist/actions/tooltip/_maybe-pick-safe-placement.d.ts +0 -3
  217. package/dist/actions/tooltip/_maybe-pick-safe-placement.js +0 -86
  218. package/dist/actions/tooltip/_set-position.d.ts +0 -2
  219. package/dist/actions/tooltip/_set-position.js +0 -125
  220. package/dist/actions/tooltip/tooltip.d.ts +0 -42
  221. package/dist/actions/tooltip/tooltip.js +0 -299
  222. package/dist/actions/trim.d.ts +0 -4
  223. package/dist/actions/trim.js +0 -18
  224. package/dist/actions/validate.js +0 -80
  225. package/dist/components/AlertConfirmPrompt/alert-confirm-prompt.d.ts +0 -58
  226. package/dist/components/AlertConfirmPrompt/alert-confirm-prompt.js +0 -141
  227. package/dist/components/ColorScheme/LocalColorScheme.svelte.d.ts +0 -25
  228. package/dist/components/ColorScheme/SystemAwareColorScheme.svelte.d.ts +0 -25
  229. package/dist/components/Input/Field.svelte +0 -315
  230. package/dist/components/Input/Field.svelte.d.ts +0 -102
  231. package/dist/components/Input/PinInput.svelte +0 -151
  232. package/dist/components/Input/PinInput.svelte.d.ts +0 -51
  233. package/dist/components/Input/XFieldRadioInternal.svelte +0 -143
  234. package/dist/components/Input/XFieldRadioInternal.svelte.d.ts +0 -45
  235. package/dist/components/Notifications/notifications.d.ts +0 -78
  236. package/dist/components/Notifications/notifications.js +0 -215
  237. package/dist/components/Popover/Popover.svelte +0 -24
  238. package/dist/components/Popover/Popover.svelte.d.ts +0 -22
  239. package/dist/components/Spinner/Spinner.v5.svelte +0 -114
  240. package/dist/components/Spinner/Spinner.v5.svelte.d.ts +0 -16
  241. package/dist/utils/calculate-alignment.d.ts +0 -68
  242. package/dist/utils/calculate-alignment.js +0 -183
  243. package/dist/utils/device-pointer.d.ts +0 -5
  244. package/dist/utils/device-pointer.js +0 -10
  245. package/dist/utils/prefers-reduced-motion.d.ts +0 -6
  246. package/dist/utils/prefers-reduced-motion.js +0 -26
  247. package/dist/utils/tw-merge2.d.ts +0 -3
  248. package/dist/utils/tw-merge2.js +0 -9
  249. package/dist/utils/tw-types.d.ts +0 -1
  250. package/dist/utils/window-size.d.ts +0 -22
  251. package/dist/utils/window-size.js +0 -35
  252. /package/dist/{utils/tw-types.js → components/Input/types.js} +0 -0
package/dist/components/AppShell/AppShell.svelte CHANGED
@@ -1,206 +1,267 @@
1
- <script context="module">export const appShellSetHtmlBodyHeight = () => {
2
- const _set = (flag) => {
3
- document.body.style.height = flag ? "100vh" : "auto";
4
- document.body.style.overflow = flag ? "hidden" : "visible";
5
- };
6
- _set(true);
7
- return () => _set(false);
8
- };
1
+ <script module lang="ts">
2
+ export const MAIN_WIDTH = Symbol("MAIN_WIDTH");
3
+ /**
4
+ * Helper utility function which sets document.body height to 100vh, and overflow: hidden.
5
+ * It also returns a function which unsets the full height. So we can write:
6
+ *
7
+ * ```js
8
+ * onMount(appShellSetHtmlBodyHeight)
9
+ * ```
10
+ *
11
+ * From: https://www.skeleton.dev/components/app-shell
12
+ *
13
+ * The App Shell will need to expand to fill all available space within your app's body tag.
14
+ * Open /src/app.html and add the following classes. This wrapping element is required
15
+ * and the style of display: contents should remain.
16
+ *
17
+ * <body>
18
+ * <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
19
+ * </body>
20
+ *
21
+ * Then update your global stylesheet with the following. This will disable overflow for
22
+ * html and body tags to prevent duplicate scroll bars.
23
+ *
24
+ * html, body { @apply h-full overflow-hidden; }
25
+ */
26
+ export function appShellSetHtmlBodyHeight(): () => any {
27
+ const _set = (flag: boolean) => {
28
+ document.body.style.height = flag ? "100vh" : "auto";
29
+ document.body.style.overflow = flag ? "hidden" : "visible";
30
+ };
31
+ _set(true);
32
+ return () => _set(false);
33
+ }
9
34
  </script>
10
35
 
11
- <script>import { createEventDispatcher } from "svelte";
12
- import { twMerge2 } from "../../utils/tw-merge2.js";
13
- const dispatch = createEventDispatcher();
14
- let _class = "";
15
- export { _class as class };
16
- export let railClass = "";
17
- export let headerClass = "";
18
- export let contentClass = "";
19
- export let sidebarLeftClass = "";
20
- export let pageClass = "";
21
- export let pageHeaderClass = "";
22
- export let pageMainClass = "";
23
- export let pageFooterClass = "";
24
- export let sidebarRightClass = "";
25
- export let footerClass = "";
26
- export let scrollbarGutter = "auto";
27
- export let id = "shell";
28
- export let pageFlexGrow = 3;
29
- $:
30
- _sidebarFlexCls = pageFlexGrow ? "flex-1" : "flex-none";
31
- const flexMap = ["flex-1", "flex-1", "flex-[2]", "flex-[3]", "flex-[4]", "flex-[5]"];
32
- $:
33
- _pageFlexCls = flexMap[pageFlexGrow] || "flex-1";
34
- let shell;
35
- let rail;
36
- let header;
37
- let sidebarLeft;
38
- let page;
39
- let pageHeader;
40
- let pageMain;
41
- let pageFooter;
42
- let sidebarRight;
43
- let footer;
44
- $:
45
- if (shell)
46
- dispatch("element", { shell });
47
- $:
48
- if (rail)
49
- dispatch("element", { rail });
50
- $:
51
- if (header)
52
- dispatch("element", { header });
53
- $:
54
- if (sidebarLeft)
55
- dispatch("element", { sidebarLeft });
56
- $:
57
- if (page)
58
- dispatch("element", { page });
59
- $:
60
- if (pageHeader)
61
- dispatch("element", { pageHeader });
62
- $:
63
- if (pageMain)
64
- dispatch("element", { pageMain });
65
- $:
66
- if (pageFooter)
67
- dispatch("element", { pageFooter });
68
- $:
69
- if (sidebarRight)
70
- dispatch("element", { sidebarRight });
71
- $:
72
- if (footer)
73
- dispatch("element", { footer });
36
+ <script lang="ts">
37
+ import { setContext, type Snippet } from "svelte";
38
+ import { twMerge } from "../../utils/tw-merge.js";
39
+
40
+ // idea copied from https://www.skeleton.dev/components/app-shell
41
+ // adjusted and tweaked to personal opinion and taste...
42
+
43
+ /* Layout:
44
+ <shell>
45
+ <rail />
46
+ <div>
47
+ <header />
48
+ <content>
49
+ <sidebar-left />
50
+ <page>
51
+ <page-header />
52
+ <page-main />
53
+ <page-footer />
54
+ <page/>
55
+ <sidebar-right />
56
+ </content>
57
+ <footer />
58
+ </div>
59
+ </shell>
60
+ */
61
+
62
+ interface Props {
63
+ id?: string;
64
+ class?: string;
65
+ railClass?: string;
66
+ headerClass?: string;
67
+ contentClass?: string;
68
+ sidebarLeftClass?: string;
69
+ pageClass?: string;
70
+ pageHeaderClass?: string;
71
+ pageMainClass?: string;
72
+ pageFooterClass?: string;
73
+ sidebarRightClass?: string;
74
+ footerClass?: string;
75
+ scrollbarGutter?: "auto" | "stable" | "both-edges";
76
+ pageFlexGrow?: 0 | 1 | 2 | 3 | 4 | 5;
77
+ //
78
+ rail?: Snippet;
79
+ header?: Snippet;
80
+ sidebarLeft?: Snippet;
81
+ pageHeader?: Snippet;
82
+ children?: Snippet;
83
+ pageFooter?: Snippet;
84
+ sidebarRight?: Snippet;
85
+ footer?: Snippet;
86
+ //
87
+ elShell?: HTMLElement;
88
+ elRail?: HTMLElement;
89
+ elHeader?: HTMLElement;
90
+ elSidebarLeft?: HTMLElement;
91
+ elPage?: HTMLElement;
92
+ elPageHeader?: HTMLElement;
93
+ elPageMain?: HTMLElement;
94
+ elPageFooter?: HTMLElement;
95
+ elSidebarRight?: HTMLElement;
96
+ elFooter?: HTMLElement;
97
+ }
98
+
99
+ let {
100
+ id = "shell",
101
+ class: classProp,
102
+ railClass,
103
+ headerClass,
104
+ contentClass,
105
+ sidebarLeftClass,
106
+ pageClass,
107
+ pageHeaderClass,
108
+ pageMainClass,
109
+ pageFooterClass,
110
+ sidebarRightClass,
111
+ footerClass,
112
+ scrollbarGutter = "auto",
113
+ pageFlexGrow = 3,
114
+ //
115
+ rail,
116
+ header,
117
+ sidebarLeft,
118
+ pageHeader,
119
+ children,
120
+ pageFooter,
121
+ sidebarRight,
122
+ footer,
123
+ //
124
+ elShell = $bindable(),
125
+ elRail = $bindable(),
126
+ elHeader = $bindable(),
127
+ elSidebarLeft = $bindable(),
128
+ elPage = $bindable(),
129
+ elPageHeader = $bindable(),
130
+ elPageMain = $bindable(),
131
+ elPageFooter = $bindable(),
132
+ elSidebarRight = $bindable(),
133
+ elFooter = $bindable(),
134
+ }: Props = $props();
135
+
136
+ let _sidebarFlexCls = $derived(pageFlexGrow ? "flex-1" : "flex-none");
137
+
138
+ const flexMap = ["flex-1", "flex-1", "flex-[2]", "flex-[3]", "flex-[4]", "flex-[5]"];
139
+ let _pageFlexCls = $derived(flexMap[pageFlexGrow] || "flex-1");
140
+
141
+ // pragmatic use case...
142
+ let mainWidth: number = $state(0);
143
+ setContext(MAIN_WIDTH, {
144
+ get current() {
145
+ return mainWidth;
146
+ },
147
+ });
74
148
  </script>
75
149
 
76
- <!-- shell -->
77
150
  <div
78
- bind:this={shell}
151
+ bind:this={elShell}
79
152
  {id}
80
153
  data-shell="shell"
81
- class={twMerge2(`w-full h-full flex overflow-hidden ${_class}`)}
154
+ class={twMerge("w-full h-full flex overflow-hidden", classProp)}
82
155
  >
83
156
  <!-- shell > rail -->
84
- {#if $$slots.rail}
157
+ {#if rail}
85
158
  <div
86
- bind:this={rail}
159
+ bind:this={elRail}
87
160
  data-shell="rail"
88
- class={twMerge2(`flex-none overflow-x-hidden overflow-y-auto ${railClass}`)}
161
+ class={twMerge("flex-none overflow-x-hidden overflow-y-auto", railClass)}
89
162
  >
90
- <slot name="rail" />
163
+ {@render rail()}
91
164
  </div>
92
165
  {/if}
93
166
 
94
167
  <!-- shell > div-->
95
168
  <div class="h-full flex-1 flex flex-col overflow-hidden">
96
169
  <!-- shell > div > header -->
97
- {#if $$slots.header}
170
+ {#if header}
98
171
  <header
99
- bind:this={header}
172
+ bind:this={elHeader}
100
173
  data-shell="header"
101
- class={twMerge2(`flex-none ${headerClass}`)}
174
+ class={twMerge("flex-none", headerClass)}
102
175
  >
103
- <slot name="header" />
176
+ {@render header()}
104
177
  </header>
105
178
  {/if}
106
179
 
107
180
  <!-- shell > div > content -->
108
181
  <div
109
182
  data-shell="content"
110
- class={twMerge2(`flex-auto w-full h-full flex overflow-hidden ${contentClass}`)}
183
+ class={twMerge("flex-auto w-full h-full flex overflow-hidden", contentClass)}
111
184
  >
112
185
  <!-- shell > div > content > sidebar-left -->
113
- {#if $$slots.sidebarLeft}
186
+ {#if sidebarLeft}
114
187
  <aside
115
- bind:this={sidebarLeft}
188
+ bind:this={elSidebarLeft}
116
189
  data-shell="sidebar-left"
117
- class={twMerge2(
118
- `${_sidebarFlexCls} overflow-x-hidden overflow-y-auto w-auto ${sidebarLeftClass}`
190
+ class={twMerge(
191
+ _sidebarFlexCls,
192
+ "overflow-x-hidden overflow-y-auto w-auto",
193
+ sidebarLeftClass
119
194
  )}
120
195
  >
121
- <slot name="sidebarLeft" />
196
+ {@render sidebarLeft()}
122
197
  </aside>
123
198
  {/if}
124
199
 
125
200
  <!-- shell > div > content > page -->
126
201
  <div
127
- bind:this={page}
202
+ bind:this={elPage}
128
203
  data-shell="page"
129
- class={twMerge2(`${_pageFlexCls} overflow-x-hidden flex flex-col ${pageClass}`)}
204
+ class={twMerge(_pageFlexCls, "overflow-x-hidden flex flex-col", pageClass)}
130
205
  style:scrollbar-gutter={scrollbarGutter}
131
- on:scroll
132
206
  >
133
207
  <!-- shell > div > content > page > page-header -->
134
- {#if $$slots.pageHeader}
208
+ {#if pageHeader}
135
209
  <header
136
- bind:this={pageHeader}
210
+ bind:this={elPageHeader}
137
211
  data-shell="page-header"
138
- class={twMerge2(`flex-none ${pageHeaderClass}`)}
212
+ class={twMerge("flex-none", pageHeaderClass)}
139
213
  >
140
- <slot name="pageHeader" />
214
+ {@render pageHeader()}
141
215
  </header>
142
216
  {/if}
143
217
 
144
218
  <!-- shell > div > content > page > page-main -->
145
219
  <main
146
- bind:this={pageMain}
220
+ bind:this={elPageMain}
147
221
  data-shell="page-main"
148
- class={twMerge2(`flex-auto ${pageMainClass}`)}
222
+ class={twMerge("flex-auto", pageMainClass)}
223
+ bind:offsetWidth={mainWidth}
149
224
  >
150
- <slot />
225
+ {@render children?.()}
151
226
  </main>
152
227
 
153
228
  <!-- shell > div > content > page > page-footer -->
154
- {#if $$slots.pageFooter}
229
+ {#if pageFooter}
155
230
  <footer
156
- bind:this={pageFooter}
231
+ bind:this={elPageFooter}
157
232
  data-shell="page-footer"
158
- class={twMerge2(`flex-none ${pageFooterClass}`)}
233
+ class={twMerge("flex-none", pageFooterClass)}
159
234
  >
160
- <slot name="pageFooter" />
235
+ {@render pageFooter()}
161
236
  </footer>
162
237
  {/if}
163
238
  </div>
164
239
 
165
240
  <!-- shell > div > content > sidebar-right -->
166
- {#if $$slots.sidebarRight}
241
+ {#if sidebarRight}
167
242
  <aside
168
- bind:this={sidebarRight}
243
+ bind:this={elSidebarRight}
169
244
  data-shell="sidebar-right"
170
- class={twMerge2(
171
- `${_sidebarFlexCls} overflow-x-hidden overflow-y-auto ${sidebarRightClass}`
245
+ class={twMerge(
246
+ _sidebarFlexCls,
247
+ "overflow-x-hidden overflow-y-auto",
248
+ sidebarRightClass
172
249
  )}
173
250
  >
174
- <slot name="sidebarRight" />
251
+ {@render sidebarRight()}
175
252
  </aside>
176
253
  {/if}
177
254
  </div>
178
255
 
179
256
  <!-- shell > div > footer -->
180
- {#if $$slots.footer}
257
+ {#if footer}
181
258
  <footer
182
- bind:this={footer}
259
+ bind:this={elFooter}
183
260
  data-shell="footer"
184
- class={twMerge2(`flex-none ${footerClass}`)}
261
+ class={twMerge("flex-none", footerClass)}
185
262
  >
186
- <slot name="footer" />
263
+ {@render footer()}
187
264
  </footer>
188
265
  {/if}
189
266
  </div>
190
267
  </div>
191
-
192
- <style>/* from: https://www.skeleton.dev/components/app-shell
193
-
194
- The App Shell will need to expand to fill all available space within your app's body tag.
195
- Open /src/app.html and add the following classes. This wrapping element is required
196
- and the style of display: contents should remain.
197
-
198
- <body>
199
- <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
200
- </body>
201
-
202
- Then update your global stylesheet with the following. This will disable overflow for
203
- html and body tags to prevent duplicate scroll bars.
204
-
205
- html, body { @apply h-full overflow-hidden; }
206
- */</style>
package/dist/components/AppShell/AppShell.svelte.d.ts CHANGED
@@ -1,44 +1,63 @@
1
- import { SvelteComponent } from "svelte";
2
- export declare const appShellSetHtmlBodyHeight: () => (() => any);
3
- declare const __propDef: {
4
- props: {
5
- class?: string;
6
- railClass?: string;
7
- headerClass?: string;
8
- contentClass?: string;
9
- sidebarLeftClass?: string;
10
- pageClass?: string;
11
- pageHeaderClass?: string;
12
- pageMainClass?: string;
13
- pageFooterClass?: string;
14
- sidebarRightClass?: string;
15
- footerClass?: string;
16
- scrollbarGutter?: string;
17
- id?: string;
18
- pageFlexGrow?: 0 | 1 | 2 | 3 | 4 | 5;
19
- };
20
- events: {
21
- scroll: Event;
22
- element: CustomEvent<any>;
23
- } & {
24
- [evt: string]: CustomEvent<any>;
25
- };
26
- slots: {
27
- rail: {};
28
- header: {};
29
- sidebarLeft: {};
30
- pageHeader: {};
31
- default: {};
32
- pageFooter: {};
33
- sidebarRight: {};
34
- footer: {};
35
- };
36
- exports?: {} | undefined;
37
- bindings?: string | undefined;
38
- };
39
- export type AppShellProps = typeof __propDef.props;
40
- export type AppShellEvents = typeof __propDef.events;
41
- export type AppShellSlots = typeof __propDef.slots;
42
- export default class AppShell extends SvelteComponent<AppShellProps, AppShellEvents, AppShellSlots> {
1
+ export declare const MAIN_WIDTH: unique symbol;
2
+ /**
3
+ * Helper utility function which sets document.body height to 100vh, and overflow: hidden.
4
+ * It also returns a function which unsets the full height. So we can write:
5
+ *
6
+ * ```js
7
+ * onMount(appShellSetHtmlBodyHeight)
8
+ * ```
9
+ *
10
+ * From: https://www.skeleton.dev/components/app-shell
11
+ *
12
+ * The App Shell will need to expand to fill all available space within your app's body tag.
13
+ * Open /src/app.html and add the following classes. This wrapping element is required
14
+ * and the style of display: contents should remain.
15
+ *
16
+ * <body>
17
+ * <div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
18
+ * </body>
19
+ *
20
+ * Then update your global stylesheet with the following. This will disable overflow for
21
+ * html and body tags to prevent duplicate scroll bars.
22
+ *
23
+ * html, body { @apply h-full overflow-hidden; }
24
+ */
25
+ export declare function appShellSetHtmlBodyHeight(): () => any;
26
+ import { type Snippet } from "svelte";
27
+ interface Props {
28
+ id?: string;
29
+ class?: string;
30
+ railClass?: string;
31
+ headerClass?: string;
32
+ contentClass?: string;
33
+ sidebarLeftClass?: string;
34
+ pageClass?: string;
35
+ pageHeaderClass?: string;
36
+ pageMainClass?: string;
37
+ pageFooterClass?: string;
38
+ sidebarRightClass?: string;
39
+ footerClass?: string;
40
+ scrollbarGutter?: "auto" | "stable" | "both-edges";
41
+ pageFlexGrow?: 0 | 1 | 2 | 3 | 4 | 5;
42
+ rail?: Snippet;
43
+ header?: Snippet;
44
+ sidebarLeft?: Snippet;
45
+ pageHeader?: Snippet;
46
+ children?: Snippet;
47
+ pageFooter?: Snippet;
48
+ sidebarRight?: Snippet;
49
+ footer?: Snippet;
50
+ elShell?: HTMLElement;
51
+ elRail?: HTMLElement;
52
+ elHeader?: HTMLElement;
53
+ elSidebarLeft?: HTMLElement;
54
+ elPage?: HTMLElement;
55
+ elPageHeader?: HTMLElement;
56
+ elPageMain?: HTMLElement;
57
+ elPageFooter?: HTMLElement;
58
+ elSidebarRight?: HTMLElement;
59
+ elFooter?: HTMLElement;
43
60
  }
44
- export {};
61
+ declare const AppShell: import("svelte").Component<Props, {}, "elShell" | "elRail" | "elHeader" | "elSidebarLeft" | "elPage" | "elPageHeader" | "elPageMain" | "elPageFooter" | "elSidebarRight" | "elFooter">;
62
+ type AppShell = ReturnType<typeof AppShell>;
63
+ export default AppShell;
package/dist/components/AppShell/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as AppShell, appShellSetHtmlBodyHeight, MAIN_WIDTH, } from "./AppShell.svelte";
package/dist/components/AppShell/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default as AppShell, appShellSetHtmlBodyHeight, MAIN_WIDTH, } from "./AppShell.svelte";