@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.
- package/README.md +135 -135
- package/dist/assets/autospuiten/car-paint-picker.js +41 -41
- package/dist/assets/autospuiten/labels.js +7 -7
- package/dist/classes/data/IterableTree.js +243 -243
- package/dist/classes/data/Selector.js +190 -190
- package/dist/classes/data/index.js +2 -2
- package/dist/classes/index.js +4 -4
- package/dist/classes/promise/HkPromise.js +377 -377
- package/dist/classes/promise/index.js +1 -1
- package/dist/classes/stores/SubscribersCount.js +107 -107
- package/dist/classes/stores/index.js +1 -1
- package/dist/classes/streams/LogTransformStream.js +19 -19
- package/dist/classes/streams/ServerEventsStore.js +110 -110
- package/dist/classes/streams/TimeStampSource.js +26 -26
- package/dist/classes/streams/index.js +3 -3
- package/dist/classes/svelte/audio/AudioLoader.svelte.js +58 -58
- package/dist/classes/svelte/audio/AudioScene.svelte.js +295 -295
- package/dist/classes/svelte/audio/mocks.js +35 -35
- package/dist/classes/svelte/finite-state-machine/FiniteStateMachine.svelte.js +133 -133
- package/dist/classes/svelte/finite-state-machine/index.js +1 -1
- package/dist/classes/svelte/image/ImageLoader.svelte.js +47 -47
- package/dist/classes/svelte/image/ImageScene.svelte.js +253 -253
- package/dist/classes/svelte/image/ImageVariantsLoader.svelte.js +152 -152
- package/dist/classes/svelte/image/index.js +4 -4
- package/dist/classes/svelte/image/mocks.js +35 -35
- package/dist/classes/svelte/image/typedef.js +8 -8
- package/dist/classes/svelte/index.js +14 -14
- package/dist/classes/svelte/loading-state-machine/LoadingStateMachine.svelte.js +109 -109
- package/dist/classes/svelte/loading-state-machine/constants.js +16 -16
- package/dist/classes/svelte/loading-state-machine/index.js +3 -3
- package/dist/classes/svelte/network-loader/NetworkLoader.svelte.js +331 -331
- package/dist/classes/svelte/network-loader/constants.js +3 -3
- package/dist/classes/svelte/network-loader/index.js +3 -3
- package/dist/classes/svelte/network-loader/mocks.js +30 -30
- package/dist/classes/svelte/network-loader/typedef.js +8 -8
- package/dist/components/area/HkArea.svelte +49 -49
- package/dist/components/area/HkGridArea.svelte +77 -77
- package/dist/components/area/index.js +2 -2
- package/dist/components/buttons/button/Button.svelte +82 -82
- package/dist/components/buttons/button-icon-steeze/SteezeIconButton.svelte +30 -30
- package/dist/components/buttons/button-text/TextButton.svelte +21 -21
- package/dist/components/buttons/index.js +3 -3
- package/dist/components/debug/debug-panel-design-scaling/DebugPanelDesignScaling.svelte +146 -146
- package/dist/components/debug/index.js +1 -1
- package/dist/components/hkdev/blocks/TextBlock.svelte +46 -46
- package/dist/components/hkdev/buttons/CheckButton.svelte +62 -62
- package/dist/components/icons/HkIcon.svelte +86 -86
- package/dist/components/icons/HkTabIcon.svelte +116 -116
- package/dist/components/icons/SteezeIcon.svelte +97 -97
- package/dist/components/icons/index.js +6 -6
- package/dist/components/icons/typedef.js +16 -16
- package/dist/components/index.js +2 -2
- package/dist/components/inputs/index.js +1 -1
- package/dist/components/inputs/text-input/TestTextInput.svelte__ +102 -102
- package/dist/components/inputs/text-input/TextInput.svelte +223 -223
- package/dist/components/inputs/text-input/TextInput.svelte___ +83 -83
- package/dist/components/inputs/text-input/assets/IconInvalid.svelte +14 -14
- package/dist/components/inputs/text-input/assets/IconValid.svelte +12 -12
- package/dist/components/layout/grid-layers/GridLayers.svelte +167 -167
- package/dist/components/layout/index.js +1 -1
- package/dist/components/panels/index.js +1 -1
- package/dist/components/panels/panel/Panel.svelte +43 -43
- package/dist/components/rows/index.js +3 -3
- package/dist/components/rows/panel-grid-row/PanelGridRow.svelte +104 -104
- package/dist/components/rows/panel-row-2/PanelRow2.svelte +40 -40
- package/dist/components/tab-bar/HkTabBar.state.svelte.js +149 -149
- package/dist/components/tab-bar/HkTabBar.svelte +74 -74
- package/dist/components/tab-bar/HkTabBarSelector.state.svelte.js +93 -93
- package/dist/components/tab-bar/HkTabBarSelector.svelte +49 -49
- package/dist/components/tab-bar/index.js +17 -17
- package/dist/components/tab-bar/typedef.js +8 -8
- package/dist/config/imagetools-config.js +189 -189
- package/dist/config/imagetools.d.ts +71 -71
- package/dist/config/typedef.js +8 -8
- package/dist/constants/bases.js +13 -13
- package/dist/constants/errors/api.js +9 -9
- package/dist/constants/errors/generic.js +5 -5
- package/dist/constants/errors/index.js +3 -3
- package/dist/constants/errors/jwt.js +5 -5
- package/dist/constants/http/headers.js +6 -6
- package/dist/constants/http/index.js +2 -2
- package/dist/constants/http/methods.js +2 -2
- package/dist/constants/index.js +3 -3
- package/dist/constants/mime/application.js +5 -5
- package/dist/constants/mime/audio.js +13 -13
- package/dist/constants/mime/image.js +3 -3
- package/dist/constants/mime/index.js +4 -4
- package/dist/constants/mime/text.js +2 -2
- package/dist/constants/regexp/index.js +31 -31
- package/dist/constants/regexp/inspiratie.js__ +95 -95
- package/dist/constants/regexp/text.js +49 -49
- package/dist/constants/regexp/user.js +32 -32
- package/dist/constants/regexp/web.js +3 -3
- package/dist/constants/state-labels/input-states.js +11 -11
- package/dist/constants/state-labels/submit-states.js +4 -4
- package/dist/constants/time.js +28 -28
- package/dist/css/utilities.css +43 -43
- package/dist/design/design-config.js +73 -73
- package/dist/design/tailwind-theme-extend.js +158 -158
- package/dist/schemas/index.js +1 -1
- package/dist/schemas/validate-url.js +180 -180
- package/dist/server/index.js +1 -1
- package/dist/server/logger.js +94 -94
- package/dist/states/index.js +1 -1
- package/dist/states/navigation.svelte.js +55 -55
- package/dist/stores/index.js +1 -1
- package/dist/stores/theme.js +80 -80
- package/dist/themes/hkdev/components/blocks/text-block.css +41 -41
- package/dist/themes/hkdev/components/boxes/game-box.css +12 -12
- package/dist/themes/hkdev/components/buttons/button-icon-steeze.css +22 -22
- package/dist/themes/hkdev/components/buttons/button-text.css +32 -32
- package/dist/themes/hkdev/components/buttons/button.css +142 -142
- package/dist/themes/hkdev/components/buttons/skip-button.css +6 -6
- package/dist/themes/hkdev/components/icons/icon-steeze.css +22 -22
- package/dist/themes/hkdev/components/inputs/text-input.css +104 -104
- package/dist/themes/hkdev/components/panels/panel.css +27 -27
- package/dist/themes/hkdev/components/rows/panel-grid-row.css +6 -6
- package/dist/themes/hkdev/components/rows/panel-row-2.css +7 -7
- package/dist/themes/hkdev/components.css +47 -47
- package/dist/themes/hkdev/debug.css +1 -1
- package/dist/themes/hkdev/global/layout.css +39 -39
- package/dist/themes/hkdev/global/on-colors.css +53 -53
- package/dist/themes/hkdev/globals.css +11 -11
- package/dist/themes/hkdev/responsive.css +12 -12
- package/dist/themes/hkdev/theme-ext.js +15 -15
- package/dist/themes/hkdev/theme.js +235 -235
- package/dist/themes/index.js +1 -1
- package/dist/util/array/index.js +455 -455
- package/dist/util/bases/base58.js +262 -262
- package/dist/util/bases/index.js +1 -1
- package/dist/util/compare/index.js +247 -247
- package/dist/util/css/css-vars.js +83 -83
- package/dist/util/css/index.js +1 -1
- package/dist/util/design-system/components/states.js +22 -22
- package/dist/util/design-system/css/clamp.js +66 -66
- package/dist/util/design-system/css/root-design-vars.js +100 -100
- package/dist/util/design-system/index.js +5 -5
- package/dist/util/design-system/layout/scaling.js +228 -228
- package/dist/util/design-system/skeleton.js +208 -208
- package/dist/util/design-system/tailwind.js +288 -288
- package/dist/util/expect/arrays.js +47 -47
- package/dist/util/expect/index.js +259 -259
- package/dist/util/expect/primitives.js +55 -55
- package/dist/util/expect/url.js +60 -60
- package/dist/util/function/index.js +218 -218
- package/dist/util/http/errors.js +97 -97
- package/dist/util/http/headers.js +45 -45
- package/dist/util/http/http-request.js +294 -294
- package/dist/util/http/index.js +22 -22
- package/dist/util/http/json-request.js +143 -143
- package/dist/util/http/mocks.js +65 -65
- package/dist/util/http/response.js +241 -241
- package/dist/util/http/test-data__/content-length-test-hkdigital-small.V4HfZyBQ.avif +0 -0
- package/dist/util/http/url.js +52 -52
- package/dist/util/image/index.js +86 -86
- package/dist/util/index.js +2 -2
- package/dist/util/is/index.js +140 -140
- package/dist/util/iterate/index.js +234 -234
- package/dist/util/object/index.js +1361 -1361
- package/dist/util/singleton/index.js +97 -97
- package/dist/util/string/array-path.js +75 -75
- package/dist/util/string/convert.js +54 -54
- package/dist/util/string/fs.js +226 -226
- package/dist/util/string/index.js +5 -5
- package/dist/util/string/interpolate.js +61 -61
- package/dist/util/string/pad.js +10 -10
- package/dist/util/svelte/index.js +4 -4
- package/dist/util/svelte/loading/loading-tracker.svelte.js +108 -108
- package/dist/util/svelte/observe/index.js +49 -49
- package/dist/util/svelte/state-context/index.js +83 -83
- package/dist/util/svelte/wait/index.js +38 -38
- package/dist/util/sveltekit/index.js +1 -1
- package/dist/util/sveltekit/route-folders/index.js +101 -101
- package/dist/util/time/index.js +323 -323
- package/dist/util/unique/index.js +249 -249
- package/dist/valibot/date.js__ +10 -10
- package/dist/valibot/index.js +9 -9
- package/dist/valibot/url.js +95 -95
- package/dist/valibot/user.js +23 -23
- package/dist/widgets/button-group/ButtonGroup.svelte +82 -94
- package/dist/widgets/button-group/ButtonGroup.svelte.d.ts +0 -2
- package/dist/widgets/button-group/typedef.js +10 -10
- package/dist/widgets/compare-left-right/CompareLeftRight.svelte +179 -179
- package/dist/widgets/compare-left-right/index.js +1 -1
- package/dist/widgets/game-box/GameBox.svelte +579 -186
- package/dist/widgets/game-box/GameBox.svelte.d.ts +64 -4
- package/dist/widgets/game-box/gamebox.util.js +83 -83
- package/dist/widgets/hk-app-layout/HkAppLayout.state.svelte.js +25 -25
- package/dist/widgets/hk-app-layout/HkAppLayout.svelte +251 -251
- package/dist/widgets/image-box/ImageBox.svelte +212 -212
- package/dist/widgets/image-box/index.js +5 -5
- package/dist/widgets/image-box/typedef.js +32 -32
- package/dist/widgets/index.js +23 -23
- package/dist/widgets/presenter/(broken) Presenter.state.svelte.js__ +613 -0
- package/dist/widgets/presenter/ImageSlide.svelte +64 -64
- package/dist/widgets/presenter/Presenter.state.svelte.js +636 -636
- package/dist/widgets/presenter/Presenter.svelte +140 -140
- package/dist/widgets/presenter/Presenter.svelte__ +125 -0
- package/dist/widgets/presenter/constants.js +7 -7
- package/dist/widgets/presenter/index.js +10 -10
- package/dist/widgets/presenter/typedef.js +106 -106
- package/dist/widgets/presenter/util.js +210 -210
- package/dist/widgets/virtual-viewport/VirtualViewport.svelte +196 -196
- package/dist/zod/all.js +33 -33
- package/dist/zod/generic.js +11 -11
- package/dist/zod/javascript.js +32 -32
- package/dist/zod/user.js +16 -16
- package/dist/zod/web.js +52 -52
- package/package.json +102 -102
package/dist/valibot/url.js
CHANGED
@@ -1,95 +1,95 @@
|
|
1
|
-
// > Imports
|
2
|
-
|
3
|
-
import * as v from 'valibot';
|
4
|
-
|
5
|
-
// > Exports
|
6
|
-
|
7
|
-
/**
|
8
|
-
* Schema to validate an URL or empty string.
|
9
|
-
*/
|
10
|
-
export const UrlOrEmptyString = v.pipe(
|
11
|
-
v.pipe(v.string(), v.trim()),
|
12
|
-
v.union([v.literal(''), v.pipe(v.string(), v.url())])
|
13
|
-
);
|
14
|
-
|
15
|
-
/**
|
16
|
-
* Schema to validate an url that may miss the protocol part
|
17
|
-
*
|
18
|
-
* @note an empty string is not allowed!
|
19
|
-
*/
|
20
|
-
export const HumanUrl = v.pipe(
|
21
|
-
v.string(),
|
22
|
-
v.trim(),
|
23
|
-
v.transform((value) => {
|
24
|
-
if (!value.length || value.includes('://')) {
|
25
|
-
return value;
|
26
|
-
} else {
|
27
|
-
// Prefix 'url' with 'https://'
|
28
|
-
return `https://${value}`;
|
29
|
-
}
|
30
|
-
}),
|
31
|
-
v.url()
|
32
|
-
);
|
33
|
-
|
34
|
-
/**
|
35
|
-
* Schema to validate url path, without a search and hash part
|
36
|
-
*/
|
37
|
-
export const UrlPath = v.pipe(
|
38
|
-
v.string(),
|
39
|
-
v.transform((value) => {
|
40
|
-
// Convert relative url to URL object
|
41
|
-
// @note removes ../../ parts
|
42
|
-
try {
|
43
|
-
return new URL(value, 'http://localhost');
|
44
|
-
|
45
|
-
// eslint-disable-next-line no-unused-vars
|
46
|
-
} catch (e) {
|
47
|
-
return null;
|
48
|
-
}
|
49
|
-
}),
|
50
|
-
v.custom((urlOrNull) => {
|
51
|
-
return urlOrNull ? true : false;
|
52
|
-
}, 'Invalid URL pathname'),
|
53
|
-
v.transform((url) => {
|
54
|
-
return url.pathname;
|
55
|
-
})
|
56
|
-
);
|
57
|
-
|
58
|
-
/**
|
59
|
-
* Schema to validate a url path, which consists of
|
60
|
-
* a path and optionally search and hash parts
|
61
|
-
*/
|
62
|
-
export const RelativeUrl = v.pipe(
|
63
|
-
v.string(),
|
64
|
-
v.transform((value) => {
|
65
|
-
// Convert relative url to URL object
|
66
|
-
// @note removes ../../ parts
|
67
|
-
try {
|
68
|
-
return new URL(value, 'http://localhost');
|
69
|
-
|
70
|
-
// eslint-disable-next-line no-unused-vars
|
71
|
-
} catch (e) {
|
72
|
-
return null;
|
73
|
-
}
|
74
|
-
}),
|
75
|
-
v.custom((urlOrNull) => {
|
76
|
-
return urlOrNull ? true : false;
|
77
|
-
}, 'Invalid URL pathname or search part'),
|
78
|
-
v.transform((url) => {
|
79
|
-
return (
|
80
|
-
`${url.pathname}` +
|
81
|
-
`${url.search.length <= 1 ? '' : url.search}` +
|
82
|
-
`${url.hash.length <= 1 ? '' : url.hash}`
|
83
|
-
);
|
84
|
-
})
|
85
|
-
);
|
86
|
-
|
87
|
-
/**
|
88
|
-
* Schema to validate an absolute or relative url
|
89
|
-
*
|
90
|
-
* @note an empty string is not allowed!
|
91
|
-
*/
|
92
|
-
export const AbsOrRelUrl = v.union([
|
93
|
-
v.pipe(v.string(), v.trim(), v.url()),
|
94
|
-
v.pipe(v.string(), v.nonEmpty(), RelativeUrl)
|
95
|
-
]);
|
1
|
+
// > Imports
|
2
|
+
|
3
|
+
import * as v from 'valibot';
|
4
|
+
|
5
|
+
// > Exports
|
6
|
+
|
7
|
+
/**
|
8
|
+
* Schema to validate an URL or empty string.
|
9
|
+
*/
|
10
|
+
export const UrlOrEmptyString = v.pipe(
|
11
|
+
v.pipe(v.string(), v.trim()),
|
12
|
+
v.union([v.literal(''), v.pipe(v.string(), v.url())])
|
13
|
+
);
|
14
|
+
|
15
|
+
/**
|
16
|
+
* Schema to validate an url that may miss the protocol part
|
17
|
+
*
|
18
|
+
* @note an empty string is not allowed!
|
19
|
+
*/
|
20
|
+
export const HumanUrl = v.pipe(
|
21
|
+
v.string(),
|
22
|
+
v.trim(),
|
23
|
+
v.transform((value) => {
|
24
|
+
if (!value.length || value.includes('://')) {
|
25
|
+
return value;
|
26
|
+
} else {
|
27
|
+
// Prefix 'url' with 'https://'
|
28
|
+
return `https://${value}`;
|
29
|
+
}
|
30
|
+
}),
|
31
|
+
v.url()
|
32
|
+
);
|
33
|
+
|
34
|
+
/**
|
35
|
+
* Schema to validate url path, without a search and hash part
|
36
|
+
*/
|
37
|
+
export const UrlPath = v.pipe(
|
38
|
+
v.string(),
|
39
|
+
v.transform((value) => {
|
40
|
+
// Convert relative url to URL object
|
41
|
+
// @note removes ../../ parts
|
42
|
+
try {
|
43
|
+
return new URL(value, 'http://localhost');
|
44
|
+
|
45
|
+
// eslint-disable-next-line no-unused-vars
|
46
|
+
} catch (e) {
|
47
|
+
return null;
|
48
|
+
}
|
49
|
+
}),
|
50
|
+
v.custom((urlOrNull) => {
|
51
|
+
return urlOrNull ? true : false;
|
52
|
+
}, 'Invalid URL pathname'),
|
53
|
+
v.transform((url) => {
|
54
|
+
return url.pathname;
|
55
|
+
})
|
56
|
+
);
|
57
|
+
|
58
|
+
/**
|
59
|
+
* Schema to validate a url path, which consists of
|
60
|
+
* a path and optionally search and hash parts
|
61
|
+
*/
|
62
|
+
export const RelativeUrl = v.pipe(
|
63
|
+
v.string(),
|
64
|
+
v.transform((value) => {
|
65
|
+
// Convert relative url to URL object
|
66
|
+
// @note removes ../../ parts
|
67
|
+
try {
|
68
|
+
return new URL(value, 'http://localhost');
|
69
|
+
|
70
|
+
// eslint-disable-next-line no-unused-vars
|
71
|
+
} catch (e) {
|
72
|
+
return null;
|
73
|
+
}
|
74
|
+
}),
|
75
|
+
v.custom((urlOrNull) => {
|
76
|
+
return urlOrNull ? true : false;
|
77
|
+
}, 'Invalid URL pathname or search part'),
|
78
|
+
v.transform((url) => {
|
79
|
+
return (
|
80
|
+
`${url.pathname}` +
|
81
|
+
`${url.search.length <= 1 ? '' : url.search}` +
|
82
|
+
`${url.hash.length <= 1 ? '' : url.hash}`
|
83
|
+
);
|
84
|
+
})
|
85
|
+
);
|
86
|
+
|
87
|
+
/**
|
88
|
+
* Schema to validate an absolute or relative url
|
89
|
+
*
|
90
|
+
* @note an empty string is not allowed!
|
91
|
+
*/
|
92
|
+
export const AbsOrRelUrl = v.union([
|
93
|
+
v.pipe(v.string(), v.trim(), v.url()),
|
94
|
+
v.pipe(v.string(), v.nonEmpty(), RelativeUrl)
|
95
|
+
]);
|
package/dist/valibot/user.js
CHANGED
@@ -1,23 +1,23 @@
|
|
1
|
-
// > Imports
|
2
|
-
|
3
|
-
import * as v from 'valibot';
|
4
|
-
|
5
|
-
import {
|
6
|
-
RE_FULLNAME,
|
7
|
-
RE_NAME,
|
8
|
-
RE_USERNAME,
|
9
|
-
RE_SURNAME,
|
10
|
-
RE_PHONENUMBER
|
11
|
-
} from '../constants/regexp/index.js';
|
12
|
-
|
13
|
-
// > Exports
|
14
|
-
|
15
|
-
export const Name = v.pipe(v.string(), v.trim(), v.regex(RE_NAME));
|
16
|
-
|
17
|
-
export const Fullname = v.pipe(v.string(), v.trim(), v.regex(RE_FULLNAME));
|
18
|
-
|
19
|
-
export const Username = v.pipe(v.string(), v.trim(), v.regex(RE_USERNAME));
|
20
|
-
|
21
|
-
export const Surname = v.pipe(v.string(), v.trim(), v.regex(RE_SURNAME));
|
22
|
-
|
23
|
-
export const PhoneNumber = v.pipe(v.string(), v.trim(), v.regex(RE_PHONENUMBER));
|
1
|
+
// > Imports
|
2
|
+
|
3
|
+
import * as v from 'valibot';
|
4
|
+
|
5
|
+
import {
|
6
|
+
RE_FULLNAME,
|
7
|
+
RE_NAME,
|
8
|
+
RE_USERNAME,
|
9
|
+
RE_SURNAME,
|
10
|
+
RE_PHONENUMBER
|
11
|
+
} from '../constants/regexp/index.js';
|
12
|
+
|
13
|
+
// > Exports
|
14
|
+
|
15
|
+
export const Name = v.pipe(v.string(), v.trim(), v.regex(RE_NAME));
|
16
|
+
|
17
|
+
export const Fullname = v.pipe(v.string(), v.trim(), v.regex(RE_FULLNAME));
|
18
|
+
|
19
|
+
export const Username = v.pipe(v.string(), v.trim(), v.regex(RE_USERNAME));
|
20
|
+
|
21
|
+
export const Surname = v.pipe(v.string(), v.trim(), v.regex(RE_SURNAME));
|
22
|
+
|
23
|
+
export const PhoneNumber = v.pipe(v.string(), v.trim(), v.regex(RE_PHONENUMBER));
|
@@ -1,94 +1,82 @@
|
|
1
|
-
<script>
|
2
|
-
/**
|
3
|
-
* ButtonGroup component
|
4
|
-
* A group of toggle buttons where only one can be active at
|
5
|
-
* a time.
|
6
|
-
*/
|
7
|
-
|
8
|
-
import { onMount } from 'svelte';
|
9
|
-
import { findFirst } from '../../util/array/index.js';
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*
|
16
|
-
*
|
17
|
-
*
|
18
|
-
*
|
19
|
-
*
|
20
|
-
*
|
21
|
-
*
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
text: button.text,
|
84
|
-
value: button.value,
|
85
|
-
label: button.label,
|
86
|
-
props: {
|
87
|
-
...(button.props || {}),
|
88
|
-
selected: index === selectedIndex,
|
89
|
-
onclick: () => handleSelect(index)
|
90
|
-
}
|
91
|
-
})}
|
92
|
-
{/if}
|
93
|
-
{/each}
|
94
|
-
</div>
|
1
|
+
<script>
|
2
|
+
/**
|
3
|
+
* ButtonGroup component
|
4
|
+
* A group of toggle buttons where only one can be active at
|
5
|
+
* a time.
|
6
|
+
*/
|
7
|
+
|
8
|
+
import { onMount } from 'svelte';
|
9
|
+
import { findFirst } from '../../util/array/index.js';
|
10
|
+
|
11
|
+
/**
|
12
|
+
* @type {{
|
13
|
+
* base?: string,
|
14
|
+
* bg?: string,
|
15
|
+
* classes?: string,
|
16
|
+
* buttons: Array<import('./typedef.js').ButtonDef>,
|
17
|
+
* selected?: (import('./typedef.js').ButtonDef|null),
|
18
|
+
* select?: ( label:string ) => void,
|
19
|
+
* buttonSnippet: import('svelte').Snippet<[{text: string, value: string, label: string, props: Object}]>,
|
20
|
+
* [attr: string]: any
|
21
|
+
* }}
|
22
|
+
*/
|
23
|
+
let {
|
24
|
+
base = '',
|
25
|
+
bg = '',
|
26
|
+
classes = '',
|
27
|
+
buttons = [],
|
28
|
+
selected = $bindable(null),
|
29
|
+
select = $bindable(),
|
30
|
+
buttonSnippet,
|
31
|
+
...attrs
|
32
|
+
} = $props();
|
33
|
+
|
34
|
+
let selectedIndex = $state(-1);
|
35
|
+
|
36
|
+
/**
|
37
|
+
* Handle button selection
|
38
|
+
*/
|
39
|
+
function handleSelect(index) {
|
40
|
+
if (!buttons[index].props?.disabled) {
|
41
|
+
selectedIndex = index;
|
42
|
+
selected = buttons[selectedIndex] ?? null;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
function handleSelectByLabel(label) {
|
47
|
+
for (let j = 0; j < buttons.length; j = j + 1) {
|
48
|
+
if (buttons[j].label === label) {
|
49
|
+
selectedIndex = j;
|
50
|
+
selected = buttons[j] ?? null;
|
51
|
+
break;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
onMount(() => {
|
57
|
+
select = handleSelectByLabel;
|
58
|
+
});
|
59
|
+
</script>
|
60
|
+
|
61
|
+
<div
|
62
|
+
data-component="button-group"
|
63
|
+
class="{base} {bg} {classes} flex"
|
64
|
+
role="group"
|
65
|
+
aria-label="Button group"
|
66
|
+
{...attrs}
|
67
|
+
>
|
68
|
+
{#each buttons as button, index}
|
69
|
+
{#if !button.hide}
|
70
|
+
{@render buttonSnippet?.({
|
71
|
+
text: button.text,
|
72
|
+
value: button.value,
|
73
|
+
label: button.label,
|
74
|
+
props: {
|
75
|
+
...(button.props || {}),
|
76
|
+
selected: index === selectedIndex,
|
77
|
+
onclick: () => handleSelect(index)
|
78
|
+
}
|
79
|
+
})}
|
80
|
+
{/if}
|
81
|
+
{/each}
|
82
|
+
</div>
|
@@ -9,7 +9,6 @@ type ButtonGroup = {
|
|
9
9
|
buttons: ButtonDef[];
|
10
10
|
selected?: ButtonDef;
|
11
11
|
select?: (label: string) => void;
|
12
|
-
busy?: boolean;
|
13
12
|
buttonSnippet: Snippet<[{
|
14
13
|
text: string;
|
15
14
|
value: string;
|
@@ -26,7 +25,6 @@ declare const ButtonGroup: import("svelte").Component<{
|
|
26
25
|
buttons: Array<import("./typedef.js").ButtonDef>;
|
27
26
|
selected?: (import("./typedef.js").ButtonDef | null);
|
28
27
|
select?: (label: string) => void;
|
29
|
-
busy?: boolean;
|
30
28
|
buttonSnippet: import("svelte").Snippet<[{
|
31
29
|
text: string;
|
32
30
|
value: string;
|
@@ -1,10 +1,10 @@
|
|
1
|
-
/**
|
2
|
-
* @typedef {{
|
3
|
-
* text?: string,
|
4
|
-
* value?: any,
|
5
|
-
* label?: string,
|
6
|
-
* hide?: boolean,
|
7
|
-
* props?: Object}} ButtonDef
|
8
|
-
*/
|
9
|
-
|
10
|
-
export {};
|
1
|
+
/**
|
2
|
+
* @typedef {{
|
3
|
+
* text?: string,
|
4
|
+
* value?: any,
|
5
|
+
* label?: string,
|
6
|
+
* hide?: boolean,
|
7
|
+
* props?: Object}} ButtonDef
|
8
|
+
*/
|
9
|
+
|
10
|
+
export {};
|