@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,83 +1,83 @@
|
|
1
|
-
<script>
|
2
|
-
/**
|
3
|
-
* @type {{
|
4
|
-
* classes?: string,
|
5
|
-
* fieldClasses?: string,
|
6
|
-
* legendClasses?: string,
|
7
|
-
* legendTitle?: string,
|
8
|
-
* error?: boolean,
|
9
|
-
* type?: string,
|
10
|
-
* placeholder: string,
|
11
|
-
* required: boolean,
|
12
|
-
* snippetWarning?: import('svelte').Snippet,
|
13
|
-
* } & { [attr: string]: any }}
|
14
|
-
*/
|
15
|
-
let {
|
16
|
-
// Style
|
17
|
-
classes,
|
18
|
-
fieldClasses,
|
19
|
-
legendClasses,
|
20
|
-
|
21
|
-
// Functionality
|
22
|
-
name,
|
23
|
-
disabled,
|
24
|
-
required,
|
25
|
-
|
26
|
-
// initialValue
|
27
|
-
// value
|
28
|
-
// readonly
|
29
|
-
// pattern
|
30
|
-
// minlength
|
31
|
-
// maxlength
|
32
|
-
|
33
|
-
// Text placeholders
|
34
|
-
legendTitle,
|
35
|
-
placeholder,
|
36
|
-
|
37
|
-
type,
|
38
|
-
snippetWarning,
|
39
|
-
|
40
|
-
// Attributes
|
41
|
-
...attrs
|
42
|
-
} = $props();
|
43
|
-
</script>
|
44
|
-
|
45
|
-
{#snippet defaultWarning()}
|
46
|
-
<svg
|
47
|
-
width="17"
|
48
|
-
height="16"
|
49
|
-
viewBox="0 0 17 16"
|
50
|
-
fill="none"
|
51
|
-
xmlns="http://www.w3.org/2000/svg"
|
52
|
-
>
|
53
|
-
<path
|
54
|
-
fill-rule="evenodd"
|
55
|
-
clip-rule="evenodd"
|
56
|
-
d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
|
57
|
-
fill="#F8705E"
|
58
|
-
/>
|
59
|
-
</svg>
|
60
|
-
{/snippet}
|
61
|
-
|
62
|
-
<fieldset
|
63
|
-
data-input="text-input"
|
64
|
-
class="flex w-full items-center rounded {fieldClasses}"
|
65
|
-
>
|
66
|
-
<legend class="px-2 {legendClasses}" class:error>{legendTitle}</legend>
|
67
|
-
<input
|
68
|
-
class="w-full border-none bg-transparent {classes}"
|
69
|
-
{type}
|
70
|
-
{placeholder}
|
71
|
-
{name}
|
72
|
-
{required}
|
73
|
-
{...attrs}
|
74
|
-
/>
|
75
|
-
{#if error}
|
76
|
-
{#if snippetWarning}
|
77
|
-
{@render snippetWarning()}
|
78
|
-
{:else}
|
79
|
-
{@render defaultWarning()}
|
80
|
-
{/if}
|
81
|
-
<!-- <img src={warningSymbol} class="mb-2 mr-8" alt="Warning" /> -->
|
82
|
-
{/if}
|
83
|
-
</fieldset>
|
1
|
+
<script>
|
2
|
+
/**
|
3
|
+
* @type {{
|
4
|
+
* classes?: string,
|
5
|
+
* fieldClasses?: string,
|
6
|
+
* legendClasses?: string,
|
7
|
+
* legendTitle?: string,
|
8
|
+
* error?: boolean,
|
9
|
+
* type?: string,
|
10
|
+
* placeholder: string,
|
11
|
+
* required: boolean,
|
12
|
+
* snippetWarning?: import('svelte').Snippet,
|
13
|
+
* } & { [attr: string]: any }}
|
14
|
+
*/
|
15
|
+
let {
|
16
|
+
// Style
|
17
|
+
classes,
|
18
|
+
fieldClasses,
|
19
|
+
legendClasses,
|
20
|
+
|
21
|
+
// Functionality
|
22
|
+
name,
|
23
|
+
disabled,
|
24
|
+
required,
|
25
|
+
|
26
|
+
// initialValue
|
27
|
+
// value
|
28
|
+
// readonly
|
29
|
+
// pattern
|
30
|
+
// minlength
|
31
|
+
// maxlength
|
32
|
+
|
33
|
+
// Text placeholders
|
34
|
+
legendTitle,
|
35
|
+
placeholder,
|
36
|
+
|
37
|
+
type,
|
38
|
+
snippetWarning,
|
39
|
+
|
40
|
+
// Attributes
|
41
|
+
...attrs
|
42
|
+
} = $props();
|
43
|
+
</script>
|
44
|
+
|
45
|
+
{#snippet defaultWarning()}
|
46
|
+
<svg
|
47
|
+
width="17"
|
48
|
+
height="16"
|
49
|
+
viewBox="0 0 17 16"
|
50
|
+
fill="none"
|
51
|
+
xmlns="http://www.w3.org/2000/svg"
|
52
|
+
>
|
53
|
+
<path
|
54
|
+
fill-rule="evenodd"
|
55
|
+
clip-rule="evenodd"
|
56
|
+
d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
|
57
|
+
fill="#F8705E"
|
58
|
+
/>
|
59
|
+
</svg>
|
60
|
+
{/snippet}
|
61
|
+
|
62
|
+
<fieldset
|
63
|
+
data-input="text-input"
|
64
|
+
class="flex w-full items-center rounded {fieldClasses}"
|
65
|
+
>
|
66
|
+
<legend class="px-2 {legendClasses}" class:error>{legendTitle}</legend>
|
67
|
+
<input
|
68
|
+
class="w-full border-none bg-transparent {classes}"
|
69
|
+
{type}
|
70
|
+
{placeholder}
|
71
|
+
{name}
|
72
|
+
{required}
|
73
|
+
{...attrs}
|
74
|
+
/>
|
75
|
+
{#if error}
|
76
|
+
{#if snippetWarning}
|
77
|
+
{@render snippetWarning()}
|
78
|
+
{:else}
|
79
|
+
{@render defaultWarning()}
|
80
|
+
{/if}
|
81
|
+
<!-- <img src={warningSymbol} class="mb-2 mr-8" alt="Warning" /> -->
|
82
|
+
{/if}
|
83
|
+
</fieldset>
|
@@ -1,14 +1,14 @@
|
|
1
|
-
<svg
|
2
|
-
width="17"
|
3
|
-
height="16"
|
4
|
-
viewBox="0 0 17 16"
|
5
|
-
fill="none"
|
6
|
-
xmlns="http://www.w3.org/2000/svg"
|
7
|
-
>
|
8
|
-
<path
|
9
|
-
fill-rule="evenodd"
|
10
|
-
clip-rule="evenodd"
|
11
|
-
d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
|
12
|
-
fill="currentColor"
|
13
|
-
/>
|
14
|
-
</svg>
|
1
|
+
<svg
|
2
|
+
width="17"
|
3
|
+
height="16"
|
4
|
+
viewBox="0 0 17 16"
|
5
|
+
fill="none"
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
7
|
+
>
|
8
|
+
<path
|
9
|
+
fill-rule="evenodd"
|
10
|
+
clip-rule="evenodd"
|
11
|
+
d="M6.36747 1.28014C7.3152 -0.426712 9.68492 -0.426712 10.6318 1.28014L16.6669 12.1596C17.6138 13.8664 16.429 16 14.5343 16H2.46497C0.570331 16 -0.613713 13.8664 0.333194 12.1596L6.36665 1.28014H6.36747ZM8.50006 5.75805C8.66328 5.75805 8.81981 5.82549 8.93522 5.94553C9.05063 6.06556 9.11547 6.22837 9.11547 6.39812V9.59846C9.11547 9.76822 9.05063 9.93102 8.93522 10.0511C8.81981 10.1711 8.66328 10.2385 8.50006 10.2385C8.33684 10.2385 8.18031 10.1711 8.0649 10.0511C7.94949 9.93102 7.88465 9.76822 7.88465 9.59846V6.39812C7.88465 6.22837 7.94949 6.06556 8.0649 5.94553C8.18031 5.82549 8.33684 5.75805 8.50006 5.75805ZM8.50006 12.7988C8.66328 12.7988 8.81981 12.7314 8.93522 12.6113C9.05063 12.4913 9.11547 12.3285 9.11547 12.1587C9.11547 11.989 9.05063 11.8262 8.93522 11.7061C8.81981 11.5861 8.66328 11.5187 8.50006 11.5187C8.33684 11.5187 8.18031 11.5861 8.0649 11.7061C7.94949 11.8262 7.88465 11.989 7.88465 12.1587C7.88465 12.3285 7.94949 12.4913 8.0649 12.6113C8.18031 12.7314 8.33684 12.7988 8.50006 12.7988Z"
|
12
|
+
fill="currentColor"
|
13
|
+
/>
|
14
|
+
</svg>
|
@@ -1,12 +1,12 @@
|
|
1
|
-
<svg
|
2
|
-
xmlns="http://www.w3.org/2000/svg"
|
3
|
-
viewBox="0 0 24 24"
|
4
|
-
fill="currentColor"
|
5
|
-
class="size-6"
|
6
|
-
>
|
7
|
-
<path
|
8
|
-
fill-rule="evenodd"
|
9
|
-
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
|
10
|
-
clip-rule="evenodd"
|
11
|
-
/>
|
12
|
-
</svg>
|
1
|
+
<svg
|
2
|
+
xmlns="http://www.w3.org/2000/svg"
|
3
|
+
viewBox="0 0 24 24"
|
4
|
+
fill="currentColor"
|
5
|
+
class="size-6"
|
6
|
+
>
|
7
|
+
<path
|
8
|
+
fill-rule="evenodd"
|
9
|
+
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
|
10
|
+
clip-rule="evenodd"
|
11
|
+
/>
|
12
|
+
</svg>
|
@@ -1,167 +1,167 @@
|
|
1
|
-
<script>
|
2
|
-
/**
|
3
|
-
* Grid Layers Component
|
4
|
-
*
|
5
|
-
* A component that creates a single-cell grid where all children exist
|
6
|
-
* in the same grid cell, allowing them to be positioned independently
|
7
|
-
* and stacked on top of each other. Perfect for complex layouts like
|
8
|
-
* overlaying text on images, card stacks, positioning UI elements, etc.
|
9
|
-
*
|
10
|
-
* Each child can use grid positioning properties (justify-self-*, self-*)
|
11
|
-
* for precise placement. Children can control stacking order with z-index.
|
12
|
-
*
|
13
|
-
* @example Basic usage with 9-position grid
|
14
|
-
* ```html
|
15
|
-
* <GridLayers classes="border w-[500px] h-[500px]">
|
16
|
-
* <!-- Top Row -->
|
17
|
-
* <div class="justify-self-start self-start">
|
18
|
-
* <div class="bg-blue-500 w-[100px] h-[100px]">
|
19
|
-
* Top Left
|
20
|
-
* </div>
|
21
|
-
* </div>
|
22
|
-
* <div class="justify-self-center self-start">
|
23
|
-
* <div class="bg-blue-300 w-[100px] h-[100px]">
|
24
|
-
* Top Center
|
25
|
-
* </div>
|
26
|
-
* </div>
|
27
|
-
* <div class="justify-self-end self-start">
|
28
|
-
* <div class="bg-blue-500 w-[100px] h-[100px]">
|
29
|
-
* Top Right
|
30
|
-
* </div>
|
31
|
-
* </div>
|
32
|
-
*
|
33
|
-
* <!-- Middle Row -->
|
34
|
-
* <div class="justify-self-start self-center">
|
35
|
-
* <div class="bg-green-500 w-[100px] h-[100px]">
|
36
|
-
* Middle Left
|
37
|
-
* </div>
|
38
|
-
* </div>
|
39
|
-
* <div class="justify-self-center self-center">
|
40
|
-
* <div class="bg-green-300 w-[100px] h-[100px]">
|
41
|
-
* Middle Center
|
42
|
-
* </div>
|
43
|
-
* </div>
|
44
|
-
* <div class="justify-self-end self-center">
|
45
|
-
* <div class="bg-green-500 w-[100px] h-[100px]">
|
46
|
-
* Middle Right
|
47
|
-
* </div>
|
48
|
-
* </div>
|
49
|
-
*
|
50
|
-
* <!-- Bottom Row -->
|
51
|
-
* <div class="justify-self-start self-end">
|
52
|
-
* <div class="bg-red-500 w-[100px] h-[100px]">
|
53
|
-
* Bottom Left
|
54
|
-
* </div>
|
55
|
-
* </div>
|
56
|
-
* <div class="justify-self-center self-end">
|
57
|
-
* <div class="bg-red-300 w-[100px] h-[100px]">
|
58
|
-
* Bottom Center
|
59
|
-
* </div>
|
60
|
-
* </div>
|
61
|
-
* <div class="justify-self-end self-end">
|
62
|
-
* <div class="bg-red-500 w-[100px] h-[100px]">
|
63
|
-
* Bottom Right
|
64
|
-
* </div>
|
65
|
-
* </div>
|
66
|
-
* </GridLayers>
|
67
|
-
* ```
|
68
|
-
*
|
69
|
-
* @example Text over image
|
70
|
-
* ```html
|
71
|
-
* <GridLayers classes="w-full h-[300px]">
|
72
|
-
* <!-- Background image layer -->
|
73
|
-
* <div class="justify-self-stretch self-stretch z-0">
|
74
|
-
* <img
|
75
|
-
* src="/images/landscape.jpg"
|
76
|
-
* alt="Landscape"
|
77
|
-
* class="w-full h-full object-cover"
|
78
|
-
* />
|
79
|
-
* </div>
|
80
|
-
*
|
81
|
-
* <!-- Text overlay layer -->
|
82
|
-
* <div class="justify-self-center self-center z-10">
|
83
|
-
* <div class="bg-black/50 p-16up text-white
|
84
|
-
* font-ui rounded-md">
|
85
|
-
* <h2 class="text-2xl">Explore Nature</h2>
|
86
|
-
* <p>Discover the beauty of the outdoors</p>
|
87
|
-
* </div>
|
88
|
-
* </div>
|
89
|
-
* </GridLayers>
|
90
|
-
* ```
|
91
|
-
*/
|
92
|
-
|
93
|
-
/**
|
94
|
-
* @type {{
|
95
|
-
* base?: string,
|
96
|
-
* bg?: string,
|
97
|
-
* padding?: string,
|
98
|
-
* margin?: string,
|
99
|
-
* height?: string,
|
100
|
-
* classes?: string,
|
101
|
-
* style?: string,
|
102
|
-
* cellBase?: string,
|
103
|
-
* cellBg?: string,
|
104
|
-
* cellPadding?: string,
|
105
|
-
* cellMargin?: string,
|
106
|
-
* cellClasses?: string,
|
107
|
-
* cellStyle?: string,
|
108
|
-
* children: import('svelte').Snippet,
|
109
|
-
* cellAttrs?: { [attr: string]: * },
|
110
|
-
* [attr: string]: any
|
111
|
-
* }}
|
112
|
-
*/
|
113
|
-
const {
|
114
|
-
// Style
|
115
|
-
base,
|
116
|
-
bg,
|
117
|
-
padding,
|
118
|
-
margin,
|
119
|
-
height,
|
120
|
-
classes,
|
121
|
-
style,
|
122
|
-
cellBase,
|
123
|
-
cellBg,
|
124
|
-
cellPadding,
|
125
|
-
cellMargin,
|
126
|
-
cellClasses,
|
127
|
-
cellStyle,
|
128
|
-
|
129
|
-
cellAttrs,
|
130
|
-
|
131
|
-
// Snippets
|
132
|
-
children,
|
133
|
-
|
134
|
-
// Attributes
|
135
|
-
...attrs
|
136
|
-
} = $props();
|
137
|
-
</script>
|
138
|
-
|
139
|
-
<div
|
140
|
-
data-component="grid-layers"
|
141
|
-
class="relative {base} {bg} {height} {classes} {margin} {padding}"
|
142
|
-
{style}
|
143
|
-
{...attrs}
|
144
|
-
>
|
145
|
-
<div
|
146
|
-
data-section="grid"
|
147
|
-
class="absolute inset-0 grid {cellBase} {cellBg} {cellPadding} {cellMargin} {cellClasses}"
|
148
|
-
style={cellStyle}
|
149
|
-
>
|
150
|
-
{@render children()}
|
151
|
-
</div>
|
152
|
-
</div>
|
153
|
-
|
154
|
-
<style>
|
155
|
-
/* All children of the layer share the same grid area
|
156
|
-
but aren't absolutely positioned */
|
157
|
-
[data-section='grid'] {
|
158
|
-
grid-template-columns: 1fr;
|
159
|
-
grid-template-rows: 1fr;
|
160
|
-
}
|
161
|
-
|
162
|
-
[data-section='grid'] > :global(*) {
|
163
|
-
grid-column: 1;
|
164
|
-
grid-row: 1;
|
165
|
-
z-index: 0; /* Base z-index to allow explicit stacking order */
|
166
|
-
}
|
167
|
-
</style>
|
1
|
+
<script>
|
2
|
+
/**
|
3
|
+
* Grid Layers Component
|
4
|
+
*
|
5
|
+
* A component that creates a single-cell grid where all children exist
|
6
|
+
* in the same grid cell, allowing them to be positioned independently
|
7
|
+
* and stacked on top of each other. Perfect for complex layouts like
|
8
|
+
* overlaying text on images, card stacks, positioning UI elements, etc.
|
9
|
+
*
|
10
|
+
* Each child can use grid positioning properties (justify-self-*, self-*)
|
11
|
+
* for precise placement. Children can control stacking order with z-index.
|
12
|
+
*
|
13
|
+
* @example Basic usage with 9-position grid
|
14
|
+
* ```html
|
15
|
+
* <GridLayers classes="border w-[500px] h-[500px]">
|
16
|
+
* <!-- Top Row -->
|
17
|
+
* <div class="justify-self-start self-start">
|
18
|
+
* <div class="bg-blue-500 w-[100px] h-[100px]">
|
19
|
+
* Top Left
|
20
|
+
* </div>
|
21
|
+
* </div>
|
22
|
+
* <div class="justify-self-center self-start">
|
23
|
+
* <div class="bg-blue-300 w-[100px] h-[100px]">
|
24
|
+
* Top Center
|
25
|
+
* </div>
|
26
|
+
* </div>
|
27
|
+
* <div class="justify-self-end self-start">
|
28
|
+
* <div class="bg-blue-500 w-[100px] h-[100px]">
|
29
|
+
* Top Right
|
30
|
+
* </div>
|
31
|
+
* </div>
|
32
|
+
*
|
33
|
+
* <!-- Middle Row -->
|
34
|
+
* <div class="justify-self-start self-center">
|
35
|
+
* <div class="bg-green-500 w-[100px] h-[100px]">
|
36
|
+
* Middle Left
|
37
|
+
* </div>
|
38
|
+
* </div>
|
39
|
+
* <div class="justify-self-center self-center">
|
40
|
+
* <div class="bg-green-300 w-[100px] h-[100px]">
|
41
|
+
* Middle Center
|
42
|
+
* </div>
|
43
|
+
* </div>
|
44
|
+
* <div class="justify-self-end self-center">
|
45
|
+
* <div class="bg-green-500 w-[100px] h-[100px]">
|
46
|
+
* Middle Right
|
47
|
+
* </div>
|
48
|
+
* </div>
|
49
|
+
*
|
50
|
+
* <!-- Bottom Row -->
|
51
|
+
* <div class="justify-self-start self-end">
|
52
|
+
* <div class="bg-red-500 w-[100px] h-[100px]">
|
53
|
+
* Bottom Left
|
54
|
+
* </div>
|
55
|
+
* </div>
|
56
|
+
* <div class="justify-self-center self-end">
|
57
|
+
* <div class="bg-red-300 w-[100px] h-[100px]">
|
58
|
+
* Bottom Center
|
59
|
+
* </div>
|
60
|
+
* </div>
|
61
|
+
* <div class="justify-self-end self-end">
|
62
|
+
* <div class="bg-red-500 w-[100px] h-[100px]">
|
63
|
+
* Bottom Right
|
64
|
+
* </div>
|
65
|
+
* </div>
|
66
|
+
* </GridLayers>
|
67
|
+
* ```
|
68
|
+
*
|
69
|
+
* @example Text over image
|
70
|
+
* ```html
|
71
|
+
* <GridLayers classes="w-full h-[300px]">
|
72
|
+
* <!-- Background image layer -->
|
73
|
+
* <div class="justify-self-stretch self-stretch z-0">
|
74
|
+
* <img
|
75
|
+
* src="/images/landscape.jpg"
|
76
|
+
* alt="Landscape"
|
77
|
+
* class="w-full h-full object-cover"
|
78
|
+
* />
|
79
|
+
* </div>
|
80
|
+
*
|
81
|
+
* <!-- Text overlay layer -->
|
82
|
+
* <div class="justify-self-center self-center z-10">
|
83
|
+
* <div class="bg-black/50 p-16up text-white
|
84
|
+
* font-ui rounded-md">
|
85
|
+
* <h2 class="text-2xl">Explore Nature</h2>
|
86
|
+
* <p>Discover the beauty of the outdoors</p>
|
87
|
+
* </div>
|
88
|
+
* </div>
|
89
|
+
* </GridLayers>
|
90
|
+
* ```
|
91
|
+
*/
|
92
|
+
|
93
|
+
/**
|
94
|
+
* @type {{
|
95
|
+
* base?: string,
|
96
|
+
* bg?: string,
|
97
|
+
* padding?: string,
|
98
|
+
* margin?: string,
|
99
|
+
* height?: string,
|
100
|
+
* classes?: string,
|
101
|
+
* style?: string,
|
102
|
+
* cellBase?: string,
|
103
|
+
* cellBg?: string,
|
104
|
+
* cellPadding?: string,
|
105
|
+
* cellMargin?: string,
|
106
|
+
* cellClasses?: string,
|
107
|
+
* cellStyle?: string,
|
108
|
+
* children: import('svelte').Snippet,
|
109
|
+
* cellAttrs?: { [attr: string]: * },
|
110
|
+
* [attr: string]: any
|
111
|
+
* }}
|
112
|
+
*/
|
113
|
+
const {
|
114
|
+
// Style
|
115
|
+
base,
|
116
|
+
bg,
|
117
|
+
padding,
|
118
|
+
margin,
|
119
|
+
height,
|
120
|
+
classes,
|
121
|
+
style,
|
122
|
+
cellBase,
|
123
|
+
cellBg,
|
124
|
+
cellPadding,
|
125
|
+
cellMargin,
|
126
|
+
cellClasses,
|
127
|
+
cellStyle,
|
128
|
+
|
129
|
+
cellAttrs,
|
130
|
+
|
131
|
+
// Snippets
|
132
|
+
children,
|
133
|
+
|
134
|
+
// Attributes
|
135
|
+
...attrs
|
136
|
+
} = $props();
|
137
|
+
</script>
|
138
|
+
|
139
|
+
<div
|
140
|
+
data-component="grid-layers"
|
141
|
+
class="relative {base} {bg} {height} {classes} {margin} {padding}"
|
142
|
+
{style}
|
143
|
+
{...attrs}
|
144
|
+
>
|
145
|
+
<div
|
146
|
+
data-section="grid"
|
147
|
+
class="absolute inset-0 grid {cellBase} {cellBg} {cellPadding} {cellMargin} {cellClasses}"
|
148
|
+
style={cellStyle}
|
149
|
+
>
|
150
|
+
{@render children()}
|
151
|
+
</div>
|
152
|
+
</div>
|
153
|
+
|
154
|
+
<style>
|
155
|
+
/* All children of the layer share the same grid area
|
156
|
+
but aren't absolutely positioned */
|
157
|
+
[data-section='grid'] {
|
158
|
+
grid-template-columns: 1fr;
|
159
|
+
grid-template-rows: 1fr;
|
160
|
+
}
|
161
|
+
|
162
|
+
[data-section='grid'] > :global(*) {
|
163
|
+
grid-column: 1;
|
164
|
+
grid-row: 1;
|
165
|
+
z-index: 0; /* Base z-index to allow explicit stacking order */
|
166
|
+
}
|
167
|
+
</style>
|
@@ -1 +1 @@
|
|
1
|
-
export { default as GridLayers } from './grid-layers/GridLayers.svelte';
|
1
|
+
export { default as GridLayers } from './grid-layers/GridLayers.svelte';
|
@@ -1 +1 @@
|
|
1
|
-
export { default as Panel } from './panel/Panel.svelte';
|
1
|
+
export { default as Panel } from './panel/Panel.svelte';
|
@@ -1,43 +1,43 @@
|
|
1
|
-
<script>
|
2
|
-
/**
|
3
|
-
* @example
|
4
|
-
*
|
5
|
-
*
|
6
|
-
*/
|
7
|
-
|
8
|
-
/**
|
9
|
-
* @type {{
|
10
|
-
* base?: string,
|
11
|
-
* bg?: string,
|
12
|
-
* classes?: string,
|
13
|
-
* width?: 'sm' | 'md' | 'lg',
|
14
|
-
* variant?: string,
|
15
|
-
* children?: import('svelte').Snippet,
|
16
|
-
* } & { [attr: string]: any }}
|
17
|
-
*/
|
18
|
-
const {
|
19
|
-
// Style
|
20
|
-
base,
|
21
|
-
bg,
|
22
|
-
classes,
|
23
|
-
|
24
|
-
width = 'md',
|
25
|
-
variant = 'light',
|
26
|
-
|
27
|
-
// Snippets
|
28
|
-
children,
|
29
|
-
|
30
|
-
// Attributes
|
31
|
-
...attrs
|
32
|
-
} = $props();
|
33
|
-
</script>
|
34
|
-
|
35
|
-
<div
|
36
|
-
data-component="panel"
|
37
|
-
data-width={width}
|
38
|
-
data-variant={variant}
|
39
|
-
class="{base} {bg} {classes}"
|
40
|
-
{...attrs}
|
41
|
-
>
|
42
|
-
{@render children()}
|
43
|
-
</div>
|
1
|
+
<script>
|
2
|
+
/**
|
3
|
+
* @example
|
4
|
+
*
|
5
|
+
*
|
6
|
+
*/
|
7
|
+
|
8
|
+
/**
|
9
|
+
* @type {{
|
10
|
+
* base?: string,
|
11
|
+
* bg?: string,
|
12
|
+
* classes?: string,
|
13
|
+
* width?: 'sm' | 'md' | 'lg',
|
14
|
+
* variant?: string,
|
15
|
+
* children?: import('svelte').Snippet,
|
16
|
+
* } & { [attr: string]: any }}
|
17
|
+
*/
|
18
|
+
const {
|
19
|
+
// Style
|
20
|
+
base,
|
21
|
+
bg,
|
22
|
+
classes,
|
23
|
+
|
24
|
+
width = 'md',
|
25
|
+
variant = 'light',
|
26
|
+
|
27
|
+
// Snippets
|
28
|
+
children,
|
29
|
+
|
30
|
+
// Attributes
|
31
|
+
...attrs
|
32
|
+
} = $props();
|
33
|
+
</script>
|
34
|
+
|
35
|
+
<div
|
36
|
+
data-component="panel"
|
37
|
+
data-width={width}
|
38
|
+
data-variant={variant}
|
39
|
+
class="{base} {bg} {classes}"
|
40
|
+
{...attrs}
|
41
|
+
>
|
42
|
+
{@render children()}
|
43
|
+
</div>
|
@@ -1,3 +1,3 @@
|
|
1
|
-
export { default as PanelGridRow } from './panel-grid-row/PanelGridRow.svelte';
|
2
|
-
|
3
|
-
export { default as PanelRow2 } from './panel-row-2/PanelRow2.svelte';
|
1
|
+
export { default as PanelGridRow } from './panel-grid-row/PanelGridRow.svelte';
|
2
|
+
|
3
|
+
export { default as PanelRow2 } from './panel-row-2/PanelRow2.svelte';
|