@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
@@ -1,30 +1,30 @@
|
|
1
|
-
import { CONTENT_TYPE, CONTENT_LENGTH } from '../../../constants/http/index.js';
|
2
|
-
|
3
|
-
import { OCTET_STREAM } from '../../../constants/mime/application.js';
|
4
|
-
|
5
|
-
const BASE64_DATA =
|
6
|
-
'UklGRnwAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
|
7
|
-
|
8
|
-
/**
|
9
|
-
* Create a response value that can be used by a mocked
|
10
|
-
* fetch function
|
11
|
-
*
|
12
|
-
* @returns {Response}
|
13
|
-
*/
|
14
|
-
export function createDataResponse(/* data , options */) {
|
15
|
-
const binaryString = atob(BASE64_DATA);
|
16
|
-
const bytes = new Uint8Array(binaryString.length);
|
17
|
-
|
18
|
-
for (let i = 0; i < binaryString.length; i++) {
|
19
|
-
bytes[i] = binaryString.charCodeAt(i);
|
20
|
-
}
|
21
|
-
|
22
|
-
const response = new Response(bytes, {
|
23
|
-
headers: new Headers({
|
24
|
-
[CONTENT_TYPE]: OCTET_STREAM,
|
25
|
-
[CONTENT_LENGTH]: String(bytes.length)
|
26
|
-
})
|
27
|
-
});
|
28
|
-
|
29
|
-
return response;
|
30
|
-
}
|
1
|
+
import { CONTENT_TYPE, CONTENT_LENGTH } from '../../../constants/http/index.js';
|
2
|
+
|
3
|
+
import { OCTET_STREAM } from '../../../constants/mime/application.js';
|
4
|
+
|
5
|
+
const BASE64_DATA =
|
6
|
+
'UklGRnwAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
|
7
|
+
|
8
|
+
/**
|
9
|
+
* Create a response value that can be used by a mocked
|
10
|
+
* fetch function
|
11
|
+
*
|
12
|
+
* @returns {Response}
|
13
|
+
*/
|
14
|
+
export function createDataResponse(/* data , options */) {
|
15
|
+
const binaryString = atob(BASE64_DATA);
|
16
|
+
const bytes = new Uint8Array(binaryString.length);
|
17
|
+
|
18
|
+
for (let i = 0; i < binaryString.length; i++) {
|
19
|
+
bytes[i] = binaryString.charCodeAt(i);
|
20
|
+
}
|
21
|
+
|
22
|
+
const response = new Response(bytes, {
|
23
|
+
headers: new Headers({
|
24
|
+
[CONTENT_TYPE]: OCTET_STREAM,
|
25
|
+
[CONTENT_LENGTH]: String(bytes.length)
|
26
|
+
})
|
27
|
+
});
|
28
|
+
|
29
|
+
return response;
|
30
|
+
}
|
@@ -1,8 +1,8 @@
|
|
1
|
-
/**
|
2
|
-
* @typedef {Object} LoadingProgress
|
3
|
-
* @property {number} bytesLoaded
|
4
|
-
* @property {number} size
|
5
|
-
* @property {boolean} loaded
|
6
|
-
*/
|
7
|
-
|
8
|
-
export default {};
|
1
|
+
/**
|
2
|
+
* @typedef {Object} LoadingProgress
|
3
|
+
* @property {number} bytesLoaded
|
4
|
+
* @property {number} size
|
5
|
+
* @property {boolean} loaded
|
6
|
+
*/
|
7
|
+
|
8
|
+
export default {};
|
@@ -1,49 +1,49 @@
|
|
1
|
-
<script>
|
2
|
-
/**
|
3
|
-
* Area component
|
4
|
-
* An area is actually a DIV that can be styled and can contain content
|
5
|
-
*
|
6
|
-
* Following component guidelines from Skeleton
|
7
|
-
* @see https://next.skeleton.dev/docs/resources/contribute/components
|
8
|
-
*/
|
9
|
-
|
10
|
-
/**
|
11
|
-
* @type {{
|
12
|
-
* base?: string,
|
13
|
-
* bg?: string,
|
14
|
-
* padding?: string,
|
15
|
-
* margin?: string,
|
16
|
-
* classes?: string,
|
17
|
-
* style?: string,
|
18
|
-
* children: import('svelte').Snippet
|
19
|
-
* } & { [attr: string]: any }}
|
20
|
-
*/
|
21
|
-
let {
|
22
|
-
// Style
|
23
|
-
base,
|
24
|
-
bg,
|
25
|
-
padding,
|
26
|
-
margin,
|
27
|
-
classes,
|
28
|
-
style,
|
29
|
-
|
30
|
-
// Snippets
|
31
|
-
children,
|
32
|
-
|
33
|
-
// DOM Element
|
34
|
-
domElem = $bindable(),
|
35
|
-
|
36
|
-
// Attributes
|
37
|
-
...attrs
|
38
|
-
} = $props();
|
39
|
-
</script>
|
40
|
-
|
41
|
-
<div
|
42
|
-
data-hk-area
|
43
|
-
class="{base} {bg} {padding} {margin} {classes}"
|
44
|
-
bind:this={domElem}
|
45
|
-
{style}
|
46
|
-
{...attrs}
|
47
|
-
>
|
48
|
-
{@render children()}
|
49
|
-
</div>
|
1
|
+
<script>
|
2
|
+
/**
|
3
|
+
* Area component
|
4
|
+
* An area is actually a DIV that can be styled and can contain content
|
5
|
+
*
|
6
|
+
* Following component guidelines from Skeleton
|
7
|
+
* @see https://next.skeleton.dev/docs/resources/contribute/components
|
8
|
+
*/
|
9
|
+
|
10
|
+
/**
|
11
|
+
* @type {{
|
12
|
+
* base?: string,
|
13
|
+
* bg?: string,
|
14
|
+
* padding?: string,
|
15
|
+
* margin?: string,
|
16
|
+
* classes?: string,
|
17
|
+
* style?: string,
|
18
|
+
* children: import('svelte').Snippet
|
19
|
+
* } & { [attr: string]: any }}
|
20
|
+
*/
|
21
|
+
let {
|
22
|
+
// Style
|
23
|
+
base,
|
24
|
+
bg,
|
25
|
+
padding,
|
26
|
+
margin,
|
27
|
+
classes,
|
28
|
+
style,
|
29
|
+
|
30
|
+
// Snippets
|
31
|
+
children,
|
32
|
+
|
33
|
+
// DOM Element
|
34
|
+
domElem = $bindable(),
|
35
|
+
|
36
|
+
// Attributes
|
37
|
+
...attrs
|
38
|
+
} = $props();
|
39
|
+
</script>
|
40
|
+
|
41
|
+
<div
|
42
|
+
data-hk-area
|
43
|
+
class="{base} {bg} {padding} {margin} {classes}"
|
44
|
+
bind:this={domElem}
|
45
|
+
{style}
|
46
|
+
{...attrs}
|
47
|
+
>
|
48
|
+
{@render children()}
|
49
|
+
</div>
|
@@ -1,77 +1,77 @@
|
|
1
|
-
<script>
|
2
|
-
/**
|
3
|
-
* Grid area component
|
4
|
-
* This component contains a DIV that has display: grid set. It is
|
5
|
-
* wrapped in a box which makes it possible to add box attributes
|
6
|
-
* such as margins.
|
7
|
-
*
|
8
|
-
* Following component guidelines from Skeleton
|
9
|
-
* @see https://next.skeleton.dev/docs/resources/contribute/components
|
10
|
-
*/
|
11
|
-
|
12
|
-
import HkArea from './HkArea.svelte';
|
13
|
-
|
14
|
-
/**
|
15
|
-
* @type {{
|
16
|
-
* base?: string,
|
17
|
-
* bg?: string,
|
18
|
-
* padding?: string,
|
19
|
-
* margin?: string,
|
20
|
-
* classes?: string,
|
21
|
-
* style?: string,
|
22
|
-
* boxBase?: string,
|
23
|
-
* boxBg?: string,
|
24
|
-
* boxPadding?: string,
|
25
|
-
* boxMargin?: string,
|
26
|
-
* boxClasses?: string,
|
27
|
-
* boxAttrs?: { [attr: string]: * },
|
28
|
-
* children: import('svelte').Snippet
|
29
|
-
* } & { [attr: string]: any }}
|
30
|
-
*/
|
31
|
-
let {
|
32
|
-
// Style
|
33
|
-
base,
|
34
|
-
bg,
|
35
|
-
padding,
|
36
|
-
margin,
|
37
|
-
classes,
|
38
|
-
style,
|
39
|
-
boxBase,
|
40
|
-
boxBg,
|
41
|
-
boxPadding,
|
42
|
-
boxMargin,
|
43
|
-
boxClasses,
|
44
|
-
boxAttrs,
|
45
|
-
|
46
|
-
// Snippets
|
47
|
-
children,
|
48
|
-
|
49
|
-
// DOM Element's
|
50
|
-
domElem = $bindable(),
|
51
|
-
boxDomElem = $bindable(),
|
52
|
-
|
53
|
-
// Attributes
|
54
|
-
...attrs
|
55
|
-
} = $props();
|
56
|
-
</script>
|
57
|
-
|
58
|
-
<div
|
59
|
-
data-hk-grid-area-box
|
60
|
-
class="{boxBase} {boxBg} {boxPadding} {boxMargin} {boxClasses}"
|
61
|
-
{...boxAttrs}
|
62
|
-
bind:this={boxDomElem}
|
63
|
-
>
|
64
|
-
<HkArea
|
65
|
-
data-hk-grid-area
|
66
|
-
base="grid {base}"
|
67
|
-
bind:domElem
|
68
|
-
{bg}
|
69
|
-
{padding}
|
70
|
-
{margin}
|
71
|
-
{classes}
|
72
|
-
{style}
|
73
|
-
{...attrs}
|
74
|
-
>
|
75
|
-
{@render children()}
|
76
|
-
</HkArea>
|
77
|
-
</div>
|
1
|
+
<script>
|
2
|
+
/**
|
3
|
+
* Grid area component
|
4
|
+
* This component contains a DIV that has display: grid set. It is
|
5
|
+
* wrapped in a box which makes it possible to add box attributes
|
6
|
+
* such as margins.
|
7
|
+
*
|
8
|
+
* Following component guidelines from Skeleton
|
9
|
+
* @see https://next.skeleton.dev/docs/resources/contribute/components
|
10
|
+
*/
|
11
|
+
|
12
|
+
import HkArea from './HkArea.svelte';
|
13
|
+
|
14
|
+
/**
|
15
|
+
* @type {{
|
16
|
+
* base?: string,
|
17
|
+
* bg?: string,
|
18
|
+
* padding?: string,
|
19
|
+
* margin?: string,
|
20
|
+
* classes?: string,
|
21
|
+
* style?: string,
|
22
|
+
* boxBase?: string,
|
23
|
+
* boxBg?: string,
|
24
|
+
* boxPadding?: string,
|
25
|
+
* boxMargin?: string,
|
26
|
+
* boxClasses?: string,
|
27
|
+
* boxAttrs?: { [attr: string]: * },
|
28
|
+
* children: import('svelte').Snippet
|
29
|
+
* } & { [attr: string]: any }}
|
30
|
+
*/
|
31
|
+
let {
|
32
|
+
// Style
|
33
|
+
base,
|
34
|
+
bg,
|
35
|
+
padding,
|
36
|
+
margin,
|
37
|
+
classes,
|
38
|
+
style,
|
39
|
+
boxBase,
|
40
|
+
boxBg,
|
41
|
+
boxPadding,
|
42
|
+
boxMargin,
|
43
|
+
boxClasses,
|
44
|
+
boxAttrs,
|
45
|
+
|
46
|
+
// Snippets
|
47
|
+
children,
|
48
|
+
|
49
|
+
// DOM Element's
|
50
|
+
domElem = $bindable(),
|
51
|
+
boxDomElem = $bindable(),
|
52
|
+
|
53
|
+
// Attributes
|
54
|
+
...attrs
|
55
|
+
} = $props();
|
56
|
+
</script>
|
57
|
+
|
58
|
+
<div
|
59
|
+
data-hk-grid-area-box
|
60
|
+
class="{boxBase} {boxBg} {boxPadding} {boxMargin} {boxClasses}"
|
61
|
+
{...boxAttrs}
|
62
|
+
bind:this={boxDomElem}
|
63
|
+
>
|
64
|
+
<HkArea
|
65
|
+
data-hk-grid-area
|
66
|
+
base="grid {base}"
|
67
|
+
bind:domElem
|
68
|
+
{bg}
|
69
|
+
{padding}
|
70
|
+
{margin}
|
71
|
+
{classes}
|
72
|
+
{style}
|
73
|
+
{...attrs}
|
74
|
+
>
|
75
|
+
{@render children()}
|
76
|
+
</HkArea>
|
77
|
+
</div>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export { default as HkArea } from './HkArea.svelte';
|
2
|
-
export { default as HkGridArea } from './HkGridArea.svelte';
|
1
|
+
export { default as HkArea } from './HkArea.svelte';
|
2
|
+
export { default as HkGridArea } from './HkGridArea.svelte';
|
@@ -1,82 +1,82 @@
|
|
1
|
-
<script>
|
2
|
-
import { toStateClasses } from '../../../util/design-system/index.js';
|
3
|
-
|
4
|
-
/**
|
5
|
-
* @type {{
|
6
|
-
* base?: string,
|
7
|
-
* bg?: string,
|
8
|
-
* classes?: string,
|
9
|
-
* type?: string,
|
10
|
-
* role?: 'primary' | 'secondary' | 'tertiary' | 'custom',
|
11
|
-
* size?: 'sm' | 'md' | 'lg',
|
12
|
-
* variant?: string,
|
13
|
-
* mode?: 'light'|'dark'
|
14
|
-
* buttonType?: 'button' | 'submit' | 'reset',
|
15
|
-
* active?: boolean,
|
16
|
-
* selected?: boolean,
|
17
|
-
* loading?: boolean,
|
18
|
-
* error?: boolean,
|
19
|
-
* disabled?: boolean,
|
20
|
-
* snippetLoading?: import('svelte').Snippet,
|
21
|
-
* snippetError?: import('svelte').Snippet,
|
22
|
-
* children: import('svelte').Snippet,
|
23
|
-
* [key: string]: any
|
24
|
-
* }}
|
25
|
-
*/
|
26
|
-
const {
|
27
|
-
// Style
|
28
|
-
base,
|
29
|
-
bg,
|
30
|
-
classes,
|
31
|
-
|
32
|
-
type = '',
|
33
|
-
role = 'primary',
|
34
|
-
size = 'md',
|
35
|
-
variant = '',
|
36
|
-
mode = 'light',
|
37
|
-
|
38
|
-
buttonType = 'button',
|
39
|
-
|
40
|
-
// States
|
41
|
-
active = $bindable(false),
|
42
|
-
selected = $bindable(false),
|
43
|
-
loading = $bindable(false),
|
44
|
-
error = $bindable(false),
|
45
|
-
disabled = $bindable(false),
|
46
|
-
|
47
|
-
// Snippets
|
48
|
-
snippetLoading,
|
49
|
-
snippetError,
|
50
|
-
children,
|
51
|
-
|
52
|
-
// Attributes
|
53
|
-
...attrs
|
54
|
-
} = $props();
|
55
|
-
|
56
|
-
let stateClasses = $derived.by(() => {
|
57
|
-
return toStateClasses({ active, selected, loading, error, disabled });
|
58
|
-
});
|
59
|
-
</script>
|
60
|
-
|
61
|
-
<button
|
62
|
-
data-component="button"
|
63
|
-
data-type={type}
|
64
|
-
data-role={role}
|
65
|
-
data-size={size}
|
66
|
-
data-variant={variant}
|
67
|
-
data-mode={mode}
|
68
|
-
type={buttonType}
|
69
|
-
class="{base} {bg} {classes} {stateClasses}"
|
70
|
-
disabled={disabled || loading}
|
71
|
-
aria-busy={loading}
|
72
|
-
aria-pressed={selected}
|
73
|
-
{...attrs}
|
74
|
-
>
|
75
|
-
{#if loading && snippetLoading}
|
76
|
-
{@render snippetLoading()}
|
77
|
-
{:else if error && snippetError}
|
78
|
-
{@render snippetError()}
|
79
|
-
{:else}
|
80
|
-
{@render children()}
|
81
|
-
{/if}
|
82
|
-
</button>
|
1
|
+
<script>
|
2
|
+
import { toStateClasses } from '../../../util/design-system/index.js';
|
3
|
+
|
4
|
+
/**
|
5
|
+
* @type {{
|
6
|
+
* base?: string,
|
7
|
+
* bg?: string,
|
8
|
+
* classes?: string,
|
9
|
+
* type?: string,
|
10
|
+
* role?: 'primary' | 'secondary' | 'tertiary' | 'custom',
|
11
|
+
* size?: 'sm' | 'md' | 'lg',
|
12
|
+
* variant?: string,
|
13
|
+
* mode?: 'light'|'dark'
|
14
|
+
* buttonType?: 'button' | 'submit' | 'reset',
|
15
|
+
* active?: boolean,
|
16
|
+
* selected?: boolean,
|
17
|
+
* loading?: boolean,
|
18
|
+
* error?: boolean,
|
19
|
+
* disabled?: boolean,
|
20
|
+
* snippetLoading?: import('svelte').Snippet,
|
21
|
+
* snippetError?: import('svelte').Snippet,
|
22
|
+
* children: import('svelte').Snippet,
|
23
|
+
* [key: string]: any
|
24
|
+
* }}
|
25
|
+
*/
|
26
|
+
const {
|
27
|
+
// Style
|
28
|
+
base,
|
29
|
+
bg,
|
30
|
+
classes,
|
31
|
+
|
32
|
+
type = '',
|
33
|
+
role = 'primary',
|
34
|
+
size = 'md',
|
35
|
+
variant = '',
|
36
|
+
mode = 'light',
|
37
|
+
|
38
|
+
buttonType = 'button',
|
39
|
+
|
40
|
+
// States
|
41
|
+
active = $bindable(false),
|
42
|
+
selected = $bindable(false),
|
43
|
+
loading = $bindable(false),
|
44
|
+
error = $bindable(false),
|
45
|
+
disabled = $bindable(false),
|
46
|
+
|
47
|
+
// Snippets
|
48
|
+
snippetLoading,
|
49
|
+
snippetError,
|
50
|
+
children,
|
51
|
+
|
52
|
+
// Attributes
|
53
|
+
...attrs
|
54
|
+
} = $props();
|
55
|
+
|
56
|
+
let stateClasses = $derived.by(() => {
|
57
|
+
return toStateClasses({ active, selected, loading, error, disabled });
|
58
|
+
});
|
59
|
+
</script>
|
60
|
+
|
61
|
+
<button
|
62
|
+
data-component="button"
|
63
|
+
data-type={type}
|
64
|
+
data-role={role}
|
65
|
+
data-size={size}
|
66
|
+
data-variant={variant}
|
67
|
+
data-mode={mode}
|
68
|
+
type={buttonType}
|
69
|
+
class="{base} {bg} {classes} {stateClasses}"
|
70
|
+
disabled={disabled || loading}
|
71
|
+
aria-busy={loading}
|
72
|
+
aria-pressed={selected}
|
73
|
+
{...attrs}
|
74
|
+
>
|
75
|
+
{#if loading && snippetLoading}
|
76
|
+
{@render snippetLoading()}
|
77
|
+
{:else if error && snippetError}
|
78
|
+
{@render snippetError()}
|
79
|
+
{:else}
|
80
|
+
{@render children()}
|
81
|
+
{/if}
|
82
|
+
</button>
|
@@ -1,30 +1,30 @@
|
|
1
|
-
<script>
|
2
|
-
import Button from '../button/Button.svelte';
|
3
|
-
|
4
|
-
import { SteezeIcon } from '../../icons/index.js';
|
5
|
-
|
6
|
-
/**
|
7
|
-
* @type {{
|
8
|
-
* src: import('../../icons/typedef.js').IconSource,
|
9
|
-
* iconSize?: string,
|
10
|
-
* theme?: string,
|
11
|
-
* [key: string]: any
|
12
|
-
* }}
|
13
|
-
*/
|
14
|
-
const {
|
15
|
-
// Icon
|
16
|
-
src,
|
17
|
-
iconSize,
|
18
|
-
theme,
|
19
|
-
|
20
|
-
// Snippets
|
21
|
-
children,
|
22
|
-
|
23
|
-
// Attributes
|
24
|
-
...attrs
|
25
|
-
} = $props();
|
26
|
-
</script>
|
27
|
-
|
28
|
-
<Button type="icon-steeze" {...attrs}>
|
29
|
-
<SteezeIcon {src} size={iconSize} {theme} />
|
30
|
-
</Button>
|
1
|
+
<script>
|
2
|
+
import Button from '../button/Button.svelte';
|
3
|
+
|
4
|
+
import { SteezeIcon } from '../../icons/index.js';
|
5
|
+
|
6
|
+
/**
|
7
|
+
* @type {{
|
8
|
+
* src: import('../../icons/typedef.js').IconSource,
|
9
|
+
* iconSize?: string,
|
10
|
+
* theme?: string,
|
11
|
+
* [key: string]: any
|
12
|
+
* }}
|
13
|
+
*/
|
14
|
+
const {
|
15
|
+
// Icon
|
16
|
+
src,
|
17
|
+
iconSize,
|
18
|
+
theme,
|
19
|
+
|
20
|
+
// Snippets
|
21
|
+
children,
|
22
|
+
|
23
|
+
// Attributes
|
24
|
+
...attrs
|
25
|
+
} = $props();
|
26
|
+
</script>
|
27
|
+
|
28
|
+
<Button type="icon-steeze" {...attrs}>
|
29
|
+
<SteezeIcon {src} size={iconSize} {theme} />
|
30
|
+
</Button>
|
@@ -1,21 +1,21 @@
|
|
1
|
-
<script>
|
2
|
-
import Button from '../button/Button.svelte';
|
3
|
-
|
4
|
-
/**
|
5
|
-
* @type {{
|
6
|
-
* children: import('svelte').Snippet,
|
7
|
-
* [key: string]: any
|
8
|
-
* }}
|
9
|
-
*/
|
10
|
-
const {
|
11
|
-
// Snippets
|
12
|
-
children,
|
13
|
-
|
14
|
-
// Attributes
|
15
|
-
...attrs
|
16
|
-
} = $props();
|
17
|
-
</script>
|
18
|
-
|
19
|
-
<Button type="text" {...attrs}>
|
20
|
-
{@render children()}
|
21
|
-
</Button>
|
1
|
+
<script>
|
2
|
+
import Button from '../button/Button.svelte';
|
3
|
+
|
4
|
+
/**
|
5
|
+
* @type {{
|
6
|
+
* children: import('svelte').Snippet,
|
7
|
+
* [key: string]: any
|
8
|
+
* }}
|
9
|
+
*/
|
10
|
+
const {
|
11
|
+
// Snippets
|
12
|
+
children,
|
13
|
+
|
14
|
+
// Attributes
|
15
|
+
...attrs
|
16
|
+
} = $props();
|
17
|
+
</script>
|
18
|
+
|
19
|
+
<Button type="text" {...attrs}>
|
20
|
+
{@render children()}
|
21
|
+
</Button>
|
@@ -1,3 +1,3 @@
|
|
1
|
-
export { default as Button } from './button/Button.svelte';
|
2
|
-
export { default as TextButton } from './button-text/TextButton.svelte';
|
3
|
-
export { default as SteezeIconButton } from './button-icon-steeze/SteezeIconButton.svelte';
|
1
|
+
export { default as Button } from './button/Button.svelte';
|
2
|
+
export { default as TextButton } from './button-text/TextButton.svelte';
|
3
|
+
export { default as SteezeIconButton } from './button-icon-steeze/SteezeIconButton.svelte';
|