@hkdigital/lib-sveltekit 0.1.62 → 0.1.65

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 (209) hide show
  1. package/README.md +135 -135
  2. package/dist/assets/autospuiten/car-paint-picker.js +41 -41
  3. package/dist/assets/autospuiten/labels.js +7 -7
  4. package/dist/classes/data/IterableTree.js +243 -243
  5. package/dist/classes/data/Selector.js +190 -190
  6. package/dist/classes/data/index.js +2 -2
  7. package/dist/classes/index.js +4 -4
  8. package/dist/classes/promise/HkPromise.js +377 -377
  9. package/dist/classes/promise/index.js +1 -1
  10. package/dist/classes/stores/SubscribersCount.js +107 -107
  11. package/dist/classes/stores/index.js +1 -1
  12. package/dist/classes/streams/LogTransformStream.js +19 -19
  13. package/dist/classes/streams/ServerEventsStore.js +110 -110
  14. package/dist/classes/streams/TimeStampSource.js +26 -26
  15. package/dist/classes/streams/index.js +3 -3
  16. package/dist/classes/svelte/audio/AudioLoader.svelte.js +58 -58
  17. package/dist/classes/svelte/audio/AudioScene.svelte.js +295 -295
  18. package/dist/classes/svelte/audio/mocks.js +35 -35
  19. package/dist/classes/svelte/finite-state-machine/FiniteStateMachine.svelte.js +133 -133
  20. package/dist/classes/svelte/finite-state-machine/index.js +1 -1
  21. package/dist/classes/svelte/image/ImageLoader.svelte.js +47 -47
  22. package/dist/classes/svelte/image/ImageScene.svelte.js +253 -253
  23. package/dist/classes/svelte/image/ImageVariantsLoader.svelte.js +152 -152
  24. package/dist/classes/svelte/image/index.js +4 -4
  25. package/dist/classes/svelte/image/mocks.js +35 -35
  26. package/dist/classes/svelte/image/typedef.js +8 -8
  27. package/dist/classes/svelte/index.js +14 -14
  28. package/dist/classes/svelte/loading-state-machine/LoadingStateMachine.svelte.js +109 -109
  29. package/dist/classes/svelte/loading-state-machine/constants.js +16 -16
  30. package/dist/classes/svelte/loading-state-machine/index.js +3 -3
  31. package/dist/classes/svelte/network-loader/NetworkLoader.svelte.js +331 -331
  32. package/dist/classes/svelte/network-loader/constants.js +3 -3
  33. package/dist/classes/svelte/network-loader/index.js +3 -3
  34. package/dist/classes/svelte/network-loader/mocks.js +30 -30
  35. package/dist/classes/svelte/network-loader/typedef.js +8 -8
  36. package/dist/components/area/HkArea.svelte +49 -49
  37. package/dist/components/area/HkGridArea.svelte +77 -77
  38. package/dist/components/area/index.js +2 -2
  39. package/dist/components/buttons/button/Button.svelte +82 -82
  40. package/dist/components/buttons/button-icon-steeze/SteezeIconButton.svelte +30 -30
  41. package/dist/components/buttons/button-text/TextButton.svelte +21 -21
  42. package/dist/components/buttons/index.js +3 -3
  43. package/dist/components/debug/debug-panel-design-scaling/DebugPanelDesignScaling.svelte +146 -146
  44. package/dist/components/debug/index.js +1 -1
  45. package/dist/components/hkdev/blocks/TextBlock.svelte +46 -46
  46. package/dist/components/hkdev/buttons/CheckButton.svelte +62 -62
  47. package/dist/components/icons/HkIcon.svelte +86 -86
  48. package/dist/components/icons/HkTabIcon.svelte +116 -116
  49. package/dist/components/icons/SteezeIcon.svelte +97 -97
  50. package/dist/components/icons/index.js +6 -6
  51. package/dist/components/icons/typedef.js +16 -16
  52. package/dist/components/index.js +2 -2
  53. package/dist/components/inputs/index.js +1 -1
  54. package/dist/components/inputs/text-input/TestTextInput.svelte__ +102 -102
  55. package/dist/components/inputs/text-input/TextInput.svelte +223 -223
  56. package/dist/components/inputs/text-input/TextInput.svelte___ +83 -83
  57. package/dist/components/inputs/text-input/assets/IconInvalid.svelte +14 -14
  58. package/dist/components/inputs/text-input/assets/IconValid.svelte +12 -12
  59. package/dist/components/layout/grid-layers/GridLayers.svelte +167 -167
  60. package/dist/components/layout/index.js +1 -1
  61. package/dist/components/panels/index.js +1 -1
  62. package/dist/components/panels/panel/Panel.svelte +43 -43
  63. package/dist/components/rows/index.js +3 -3
  64. package/dist/components/rows/panel-grid-row/PanelGridRow.svelte +104 -104
  65. package/dist/components/rows/panel-row-2/PanelRow2.svelte +40 -40
  66. package/dist/components/tab-bar/HkTabBar.state.svelte.js +149 -149
  67. package/dist/components/tab-bar/HkTabBar.svelte +74 -74
  68. package/dist/components/tab-bar/HkTabBarSelector.state.svelte.js +93 -93
  69. package/dist/components/tab-bar/HkTabBarSelector.svelte +49 -49
  70. package/dist/components/tab-bar/index.js +17 -17
  71. package/dist/components/tab-bar/typedef.js +8 -8
  72. package/dist/config/imagetools-config.js +189 -189
  73. package/dist/config/imagetools.d.ts +71 -71
  74. package/dist/config/typedef.js +8 -8
  75. package/dist/constants/bases.js +13 -13
  76. package/dist/constants/errors/api.js +9 -9
  77. package/dist/constants/errors/generic.js +5 -5
  78. package/dist/constants/errors/index.js +3 -3
  79. package/dist/constants/errors/jwt.js +5 -5
  80. package/dist/constants/http/headers.js +6 -6
  81. package/dist/constants/http/index.js +2 -2
  82. package/dist/constants/http/methods.js +2 -2
  83. package/dist/constants/index.js +3 -3
  84. package/dist/constants/mime/application.js +5 -5
  85. package/dist/constants/mime/audio.js +13 -13
  86. package/dist/constants/mime/image.js +3 -3
  87. package/dist/constants/mime/index.js +4 -4
  88. package/dist/constants/mime/text.js +2 -2
  89. package/dist/constants/regexp/index.js +31 -31
  90. package/dist/constants/regexp/inspiratie.js__ +95 -95
  91. package/dist/constants/regexp/text.js +49 -49
  92. package/dist/constants/regexp/user.js +32 -32
  93. package/dist/constants/regexp/web.js +3 -3
  94. package/dist/constants/state-labels/input-states.js +11 -11
  95. package/dist/constants/state-labels/submit-states.js +4 -4
  96. package/dist/constants/time.js +28 -28
  97. package/dist/css/utilities.css +43 -43
  98. package/dist/design/design-config.js +73 -73
  99. package/dist/design/tailwind-theme-extend.js +158 -158
  100. package/dist/schemas/index.js +1 -1
  101. package/dist/schemas/validate-url.js +180 -180
  102. package/dist/server/index.js +1 -1
  103. package/dist/server/logger.js +94 -94
  104. package/dist/states/index.js +1 -1
  105. package/dist/states/navigation.svelte.js +55 -55
  106. package/dist/stores/index.js +1 -1
  107. package/dist/stores/theme.js +80 -80
  108. package/dist/themes/hkdev/components/blocks/text-block.css +41 -41
  109. package/dist/themes/hkdev/components/boxes/game-box.css +12 -12
  110. package/dist/themes/hkdev/components/buttons/button-icon-steeze.css +22 -22
  111. package/dist/themes/hkdev/components/buttons/button-text.css +32 -32
  112. package/dist/themes/hkdev/components/buttons/button.css +142 -142
  113. package/dist/themes/hkdev/components/buttons/skip-button.css +6 -6
  114. package/dist/themes/hkdev/components/icons/icon-steeze.css +22 -22
  115. package/dist/themes/hkdev/components/inputs/text-input.css +104 -104
  116. package/dist/themes/hkdev/components/panels/panel.css +27 -27
  117. package/dist/themes/hkdev/components/rows/panel-grid-row.css +6 -6
  118. package/dist/themes/hkdev/components/rows/panel-row-2.css +7 -7
  119. package/dist/themes/hkdev/components.css +47 -47
  120. package/dist/themes/hkdev/debug.css +1 -1
  121. package/dist/themes/hkdev/global/layout.css +39 -39
  122. package/dist/themes/hkdev/global/on-colors.css +53 -53
  123. package/dist/themes/hkdev/globals.css +11 -11
  124. package/dist/themes/hkdev/responsive.css +12 -12
  125. package/dist/themes/hkdev/theme-ext.js +15 -15
  126. package/dist/themes/hkdev/theme.js +235 -235
  127. package/dist/themes/index.js +1 -1
  128. package/dist/util/array/index.js +455 -455
  129. package/dist/util/bases/base58.js +262 -262
  130. package/dist/util/bases/index.js +1 -1
  131. package/dist/util/compare/index.js +247 -247
  132. package/dist/util/css/css-vars.js +83 -83
  133. package/dist/util/css/index.js +1 -1
  134. package/dist/util/design-system/components/states.js +22 -22
  135. package/dist/util/design-system/css/clamp.js +66 -66
  136. package/dist/util/design-system/css/root-design-vars.js +100 -100
  137. package/dist/util/design-system/index.js +5 -5
  138. package/dist/util/design-system/layout/scaling.js +228 -228
  139. package/dist/util/design-system/skeleton.js +208 -208
  140. package/dist/util/design-system/tailwind.js +288 -288
  141. package/dist/util/expect/arrays.js +47 -47
  142. package/dist/util/expect/index.js +259 -259
  143. package/dist/util/expect/primitives.js +55 -55
  144. package/dist/util/expect/url.js +60 -60
  145. package/dist/util/function/index.js +218 -218
  146. package/dist/util/http/errors.js +97 -97
  147. package/dist/util/http/headers.js +45 -45
  148. package/dist/util/http/http-request.js +294 -294
  149. package/dist/util/http/index.js +22 -22
  150. package/dist/util/http/json-request.js +143 -143
  151. package/dist/util/http/mocks.js +65 -65
  152. package/dist/util/http/response.js +241 -241
  153. package/dist/util/http/test-data__/content-length-test-hkdigital-small.V4HfZyBQ.avif +0 -0
  154. package/dist/util/http/url.js +52 -52
  155. package/dist/util/image/index.js +86 -86
  156. package/dist/util/index.js +2 -2
  157. package/dist/util/is/index.js +140 -140
  158. package/dist/util/iterate/index.js +234 -234
  159. package/dist/util/object/index.js +1361 -1361
  160. package/dist/util/singleton/index.js +97 -97
  161. package/dist/util/string/array-path.js +75 -75
  162. package/dist/util/string/convert.js +54 -54
  163. package/dist/util/string/fs.js +226 -226
  164. package/dist/util/string/index.js +5 -5
  165. package/dist/util/string/interpolate.js +61 -61
  166. package/dist/util/string/pad.js +10 -10
  167. package/dist/util/svelte/index.js +4 -4
  168. package/dist/util/svelte/loading/loading-tracker.svelte.js +108 -108
  169. package/dist/util/svelte/observe/index.js +49 -49
  170. package/dist/util/svelte/state-context/index.js +83 -83
  171. package/dist/util/svelte/wait/index.js +38 -38
  172. package/dist/util/sveltekit/index.js +1 -1
  173. package/dist/util/sveltekit/route-folders/index.js +101 -101
  174. package/dist/util/time/index.js +323 -323
  175. package/dist/util/unique/index.js +249 -249
  176. package/dist/valibot/date.js__ +10 -10
  177. package/dist/valibot/index.js +9 -9
  178. package/dist/valibot/url.js +95 -95
  179. package/dist/valibot/user.js +23 -23
  180. package/dist/widgets/button-group/ButtonGroup.svelte +82 -94
  181. package/dist/widgets/button-group/ButtonGroup.svelte.d.ts +0 -2
  182. package/dist/widgets/button-group/typedef.js +10 -10
  183. package/dist/widgets/compare-left-right/CompareLeftRight.svelte +179 -179
  184. package/dist/widgets/compare-left-right/index.js +1 -1
  185. package/dist/widgets/game-box/GameBox.svelte +579 -186
  186. package/dist/widgets/game-box/GameBox.svelte.d.ts +64 -4
  187. package/dist/widgets/game-box/gamebox.util.js +83 -83
  188. package/dist/widgets/hk-app-layout/HkAppLayout.state.svelte.js +25 -25
  189. package/dist/widgets/hk-app-layout/HkAppLayout.svelte +251 -251
  190. package/dist/widgets/image-box/ImageBox.svelte +212 -212
  191. package/dist/widgets/image-box/index.js +5 -5
  192. package/dist/widgets/image-box/typedef.js +32 -32
  193. package/dist/widgets/index.js +23 -23
  194. package/dist/widgets/presenter/(broken) Presenter.state.svelte.js__ +613 -0
  195. package/dist/widgets/presenter/ImageSlide.svelte +64 -64
  196. package/dist/widgets/presenter/Presenter.state.svelte.js +636 -636
  197. package/dist/widgets/presenter/Presenter.svelte +140 -140
  198. package/dist/widgets/presenter/Presenter.svelte__ +125 -0
  199. package/dist/widgets/presenter/constants.js +7 -7
  200. package/dist/widgets/presenter/index.js +10 -10
  201. package/dist/widgets/presenter/typedef.js +106 -106
  202. package/dist/widgets/presenter/util.js +210 -210
  203. package/dist/widgets/virtual-viewport/VirtualViewport.svelte +196 -196
  204. package/dist/zod/all.js +33 -33
  205. package/dist/zod/generic.js +11 -11
  206. package/dist/zod/javascript.js +32 -32
  207. package/dist/zod/user.js +16 -16
  208. package/dist/zod/web.js +52 -52
  209. package/package.json +102 -102
@@ -1,74 +1,74 @@
1
- <script>
2
- /**
3
- * TabBar component
4
- *
5
- * Following component guidelines from Skeleton
6
- * @see https://next.skeleton.dev/docs/resources/contribute/components
7
- */
8
-
9
- import { createOrGetState } from './HkTabBar.state.svelte';
10
-
11
- import { HkGridArea } from '../area/index.js';
12
-
13
- /**
14
- * @type {{
15
- * cols?: number,
16
- * base?: string,
17
- * bg?: string,
18
- * padding?: string,
19
- * margin?: string,
20
- * classes?: string,
21
- * style?: string,
22
- * instanceKey?: Symbol | string,
23
- * children: import('svelte').Snippet,
24
- * onmount?: function,
25
- * domElem?: HTMLElement
26
- * } & { [attr: string]: any }}
27
- */
28
- let {
29
- // Functional
30
- cols = 3,
31
-
32
- // Style
33
- base,
34
- bg,
35
- padding,
36
- margin,
37
- classes,
38
-
39
- style,
40
-
41
- // State
42
- instanceKey,
43
-
44
- // Snippets
45
- children,
46
-
47
- // Event handlers
48
- onmount,
49
-
50
- // DOM Elements
51
- domElem = $bindable(),
52
-
53
- // Rest attributes
54
- ...attrs
55
- } = $props();
56
-
57
- createOrGetState(instanceKey);
58
-
59
- //grid-cols-[repeat({cols},minmax(0,auto))]
60
- </script>
61
-
62
- <HkGridArea
63
- data-hk-tab-bar
64
- base="justify-center content-stretch items-center {base}"
65
- style="grid-template-columns: repeat({cols}, minmax(0,auto)); {style}"
66
- boxBg={bg}
67
- boxPadding={padding}
68
- boxMargin={margin}
69
- bind:boxDomElem={domElem}
70
- {classes}
71
- {...attrs}
72
- >
73
- {@render children()}
74
- </HkGridArea>
1
+ <script>
2
+ /**
3
+ * TabBar component
4
+ *
5
+ * Following component guidelines from Skeleton
6
+ * @see https://next.skeleton.dev/docs/resources/contribute/components
7
+ */
8
+
9
+ import { createOrGetState } from './HkTabBar.state.svelte';
10
+
11
+ import { HkGridArea } from '../area/index.js';
12
+
13
+ /**
14
+ * @type {{
15
+ * cols?: number,
16
+ * base?: string,
17
+ * bg?: string,
18
+ * padding?: string,
19
+ * margin?: string,
20
+ * classes?: string,
21
+ * style?: string,
22
+ * instanceKey?: Symbol | string,
23
+ * children: import('svelte').Snippet,
24
+ * onmount?: function,
25
+ * domElem?: HTMLElement
26
+ * } & { [attr: string]: any }}
27
+ */
28
+ let {
29
+ // Functional
30
+ cols = 3,
31
+
32
+ // Style
33
+ base,
34
+ bg,
35
+ padding,
36
+ margin,
37
+ classes,
38
+
39
+ style,
40
+
41
+ // State
42
+ instanceKey,
43
+
44
+ // Snippets
45
+ children,
46
+
47
+ // Event handlers
48
+ onmount,
49
+
50
+ // DOM Elements
51
+ domElem = $bindable(),
52
+
53
+ // Rest attributes
54
+ ...attrs
55
+ } = $props();
56
+
57
+ createOrGetState(instanceKey);
58
+
59
+ //grid-cols-[repeat({cols},minmax(0,auto))]
60
+ </script>
61
+
62
+ <HkGridArea
63
+ data-hk-tab-bar
64
+ base="justify-center content-stretch items-center {base}"
65
+ style="grid-template-columns: repeat({cols}, minmax(0,auto)); {style}"
66
+ boxBg={bg}
67
+ boxPadding={padding}
68
+ boxMargin={margin}
69
+ bind:boxDomElem={domElem}
70
+ {classes}
71
+ {...attrs}
72
+ >
73
+ {@render children()}
74
+ </HkGridArea>
@@ -1,93 +1,93 @@
1
- import { defineStateContext } from '../../util/svelte/state-context/index.js';
2
-
3
- import { useResizeObserver } from '../../util/svelte/observe/index.js';
4
-
5
- /* ------------------------------------------------------- Define state class */
6
-
7
- export class HkTabBarSelectorState {
8
- /** @type {HTMLElement|undefined} */
9
- // outer = $state.raw();
10
- // outerBox = $state.raw();
11
-
12
- /** @type {number} */
13
- // tabBarWidth = $state(0);
14
-
15
- selectorWidth = $state(0);
16
- selectorStyle = $state('');
17
-
18
- //currentTabIndex;
19
-
20
- /** @type {DOMRect[]} */
21
- iconSizes = [];
22
-
23
- constructor() {
24
- // $effect(() => {
25
- // if (this.outer) {
26
- // this.outerBox = this.outer.getBoundingClientRect();
27
- // }
28
- // });
29
- }
30
-
31
- /**
32
- * Link the tab bar selector to a tab bar state
33
- *
34
- * @param {import('./HkTabBar.svelte').TabBarState} tabBarState
35
- */
36
- linkToTabBarState(tabBarState) {
37
- // console.log('setBottomBar', bottomBarState);
38
-
39
- // if this.bottomBarState > error
40
-
41
- this.tabBarState = tabBarState;
42
-
43
- $effect(() => {
44
- tabBarState.currentTabIndex;
45
-
46
- // console.log('currentTabIndex $effect');
47
-
48
- this.#updateSelector();
49
- });
50
-
51
- useResizeObserver(
52
- () => tabBarState.tabBarElement,
53
- (entries) => {
54
- this.#updateSelector();
55
- }
56
- );
57
- }
58
-
59
- /**
60
- * Update the size and position of the selector
61
- */
62
- #updateSelector() {
63
- if (!this.tabBarState) {
64
- return;
65
- }
66
-
67
- const { currentTabIndex, tabBarElement, tabElements } = this.tabBarState;
68
-
69
- const tabElem = tabElements[currentTabIndex];
70
-
71
- if (!tabElem || !tabBarElement) {
72
- return;
73
- }
74
-
75
- const tabElemRect = tabElem.getBoundingClientRect();
76
-
77
- const tabBarRect = tabBarElement.getBoundingClientRect();
78
-
79
- // const offsetX = (iconWidth - selectorWidth) / 2 - outerBox.x;
80
- const offsetX = (tabElemRect.width - this.selectorWidth) / 2 - tabBarRect.x;
81
-
82
- const x = tabElemRect.x + offsetX;
83
- const w = tabBarRect.width;
84
-
85
- this.selectorStyle = `left: ${(100 * x) / w}%; opacity: 1;`;
86
-
87
- // console.log('selectorStyle', this.selectorStyle);
88
- }
89
- }
90
-
91
- /* -------------------------------------- Export create & get state functions */
92
-
93
- export const [createOrGetState, createState, getState] = defineStateContext(HkTabBarSelectorState);
1
+ import { defineStateContext } from '../../util/svelte/state-context/index.js';
2
+
3
+ import { useResizeObserver } from '../../util/svelte/observe/index.js';
4
+
5
+ /* ------------------------------------------------------- Define state class */
6
+
7
+ export class HkTabBarSelectorState {
8
+ /** @type {HTMLElement|undefined} */
9
+ // outer = $state.raw();
10
+ // outerBox = $state.raw();
11
+
12
+ /** @type {number} */
13
+ // tabBarWidth = $state(0);
14
+
15
+ selectorWidth = $state(0);
16
+ selectorStyle = $state('');
17
+
18
+ //currentTabIndex;
19
+
20
+ /** @type {DOMRect[]} */
21
+ iconSizes = [];
22
+
23
+ constructor() {
24
+ // $effect(() => {
25
+ // if (this.outer) {
26
+ // this.outerBox = this.outer.getBoundingClientRect();
27
+ // }
28
+ // });
29
+ }
30
+
31
+ /**
32
+ * Link the tab bar selector to a tab bar state
33
+ *
34
+ * @param {import('./HkTabBar.svelte').TabBarState} tabBarState
35
+ */
36
+ linkToTabBarState(tabBarState) {
37
+ // console.log('setBottomBar', bottomBarState);
38
+
39
+ // if this.bottomBarState > error
40
+
41
+ this.tabBarState = tabBarState;
42
+
43
+ $effect(() => {
44
+ tabBarState.currentTabIndex;
45
+
46
+ // console.log('currentTabIndex $effect');
47
+
48
+ this.#updateSelector();
49
+ });
50
+
51
+ useResizeObserver(
52
+ () => tabBarState.tabBarElement,
53
+ (entries) => {
54
+ this.#updateSelector();
55
+ }
56
+ );
57
+ }
58
+
59
+ /**
60
+ * Update the size and position of the selector
61
+ */
62
+ #updateSelector() {
63
+ if (!this.tabBarState) {
64
+ return;
65
+ }
66
+
67
+ const { currentTabIndex, tabBarElement, tabElements } = this.tabBarState;
68
+
69
+ const tabElem = tabElements[currentTabIndex];
70
+
71
+ if (!tabElem || !tabBarElement) {
72
+ return;
73
+ }
74
+
75
+ const tabElemRect = tabElem.getBoundingClientRect();
76
+
77
+ const tabBarRect = tabBarElement.getBoundingClientRect();
78
+
79
+ // const offsetX = (iconWidth - selectorWidth) / 2 - outerBox.x;
80
+ const offsetX = (tabElemRect.width - this.selectorWidth) / 2 - tabBarRect.x;
81
+
82
+ const x = tabElemRect.x + offsetX;
83
+ const w = tabBarRect.width;
84
+
85
+ this.selectorStyle = `left: ${(100 * x) / w}%; opacity: 1;`;
86
+
87
+ // console.log('selectorStyle', this.selectorStyle);
88
+ }
89
+ }
90
+
91
+ /* -------------------------------------- Export create & get state functions */
92
+
93
+ export const [createOrGetState, createState, getState] = defineStateContext(HkTabBarSelectorState);
@@ -1,49 +1,49 @@
1
- <script>
2
- // prettier-ignore
3
- // import { getTabBarSelectorState }
4
- // from "./HkTabBarSelector.state.svelte.js";
5
-
6
- import { createOrGetState }
7
- from "./HkTabBarSelector.state.svelte.js";
8
-
9
- /**
10
- * @type {{
11
- * base?: string,
12
- * bg?: string,
13
- * classes?: string,
14
- * boxBase?: string,
15
- * boxBg?: string,
16
- * boxPadding?: string,
17
- * boxMargin?: string,
18
- * boxClasses?: string,
19
- * boxAttrs?: { [attr: string]: * },
20
- * instanceKey?: Symbol | string
21
- * } & { [attr: string]: any }}
22
- */
23
- let {
24
- // Style
25
- base,
26
- bg,
27
- classes,
28
- boxBase,
29
- boxBg,
30
- boxClasses,
31
-
32
- // State
33
- instanceKey
34
- } = $props();
35
-
36
- const selectorState = createOrGetState(instanceKey);
37
- </script>
38
-
39
- <div
40
- data-hk-tab-bar-selector-box
41
- class="g-tab-bar-h w-full {boxBase} {boxBg} {boxClasses}"
42
- >
43
- <div
44
- data-hk-tab-bar-selector
45
- bind:clientWidth={selectorState.selectorWidth}
46
- class="relative opacity-0 {base} {bg} {classes}"
47
- style={selectorState.selectorStyle}
48
- ></div>
49
- </div>
1
+ <script>
2
+ // prettier-ignore
3
+ // import { getTabBarSelectorState }
4
+ // from "./HkTabBarSelector.state.svelte.js";
5
+
6
+ import { createOrGetState }
7
+ from "./HkTabBarSelector.state.svelte.js";
8
+
9
+ /**
10
+ * @type {{
11
+ * base?: string,
12
+ * bg?: string,
13
+ * classes?: string,
14
+ * boxBase?: string,
15
+ * boxBg?: string,
16
+ * boxPadding?: string,
17
+ * boxMargin?: string,
18
+ * boxClasses?: string,
19
+ * boxAttrs?: { [attr: string]: * },
20
+ * instanceKey?: Symbol | string
21
+ * } & { [attr: string]: any }}
22
+ */
23
+ let {
24
+ // Style
25
+ base,
26
+ bg,
27
+ classes,
28
+ boxBase,
29
+ boxBg,
30
+ boxClasses,
31
+
32
+ // State
33
+ instanceKey
34
+ } = $props();
35
+
36
+ const selectorState = createOrGetState(instanceKey);
37
+ </script>
38
+
39
+ <div
40
+ data-hk-tab-bar-selector-box
41
+ class="g-tab-bar-h w-full {boxBase} {boxBg} {boxClasses}"
42
+ >
43
+ <div
44
+ data-hk-tab-bar-selector
45
+ bind:clientWidth={selectorState.selectorWidth}
46
+ class="relative opacity-0 {base} {bg} {classes}"
47
+ style={selectorState.selectorStyle}
48
+ ></div>
49
+ </div>
@@ -1,17 +1,17 @@
1
- export {
2
- createOrGetState as createOrGetTabBarState,
3
- createState as createTabBarState,
4
- getState as getTabBarState
5
- } from './HkTabBar.state.svelte.js';
6
-
7
- export { default as HkTabBar } from './HkTabBar.svelte';
8
-
9
- export {
10
- createOrGetState as createOrGetTabBarSelectorState,
11
- createState as createTabBarSelectorState,
12
- getState as getTabBarSelectorState
13
- } from './HkTabBarSelector.state.svelte.js';
14
-
15
- export { default as HkTabBarSelector } from './HkTabBarSelector.svelte';
16
-
17
- export * from './typedef.js';
1
+ export {
2
+ createOrGetState as createOrGetTabBarState,
3
+ createState as createTabBarState,
4
+ getState as getTabBarState
5
+ } from './HkTabBar.state.svelte.js';
6
+
7
+ export { default as HkTabBar } from './HkTabBar.svelte';
8
+
9
+ export {
10
+ createOrGetState as createOrGetTabBarSelectorState,
11
+ createState as createTabBarSelectorState,
12
+ getState as getTabBarSelectorState
13
+ } from './HkTabBarSelector.state.svelte.js';
14
+
15
+ export { default as HkTabBarSelector } from './HkTabBarSelector.svelte';
16
+
17
+ export * from './typedef.js';
@@ -1,8 +1,8 @@
1
- /**
2
- * @typedef {object} Tab
3
- * @property {import('../icon/typedef.js').IconSource} icon
4
- * @property {string} [label]
5
- *
6
- * @property {string} [route]
7
- * @property {string} [routePrefix]
8
- */
1
+ /**
2
+ * @typedef {object} Tab
3
+ * @property {import('../icon/typedef.js').IconSource} icon
4
+ * @property {string} [label]
5
+ *
6
+ * @property {string} [route]
7
+ * @property {string} [routePrefix]
8
+ */