@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,22 +1,22 @@
|
|
1
|
-
/**
|
2
|
-
* Generates state classes from an object of state variables
|
3
|
-
*
|
4
|
-
* @param {Object.<string, boolean>} stateObject
|
5
|
-
* Object with state names as keys and boolean values
|
6
|
-
*
|
7
|
-
* @returns {string} Space-separated string of state classes
|
8
|
-
*
|
9
|
-
* @example
|
10
|
-
* // Returns "state-selected state-error"
|
11
|
-
* toStateClasses({ selected: true, loading: false, error: true });
|
12
|
-
*/
|
13
|
-
export function toStateClasses(stateObject) {
|
14
|
-
if (!stateObject || typeof stateObject !== 'object') {
|
15
|
-
return '';
|
16
|
-
}
|
17
|
-
|
18
|
-
return Object.entries(stateObject)
|
19
|
-
.filter((entry) => entry[1] === true)
|
20
|
-
.map(([state]) => `state-${state}`)
|
21
|
-
.join(' ');
|
22
|
-
}
|
1
|
+
/**
|
2
|
+
* Generates state classes from an object of state variables
|
3
|
+
*
|
4
|
+
* @param {Object.<string, boolean>} stateObject
|
5
|
+
* Object with state names as keys and boolean values
|
6
|
+
*
|
7
|
+
* @returns {string} Space-separated string of state classes
|
8
|
+
*
|
9
|
+
* @example
|
10
|
+
* // Returns "state-selected state-error"
|
11
|
+
* toStateClasses({ selected: true, loading: false, error: true });
|
12
|
+
*/
|
13
|
+
export function toStateClasses(stateObject) {
|
14
|
+
if (!stateObject || typeof stateObject !== 'object') {
|
15
|
+
return '';
|
16
|
+
}
|
17
|
+
|
18
|
+
return Object.entries(stateObject)
|
19
|
+
.filter((entry) => entry[1] === true)
|
20
|
+
.map(([state]) => `state-${state}`)
|
21
|
+
.join(' ');
|
22
|
+
}
|
@@ -1,66 +1,66 @@
|
|
1
|
-
import { getRootCssVar } from '../../css/index.js';
|
2
|
-
|
3
|
-
/**
|
4
|
-
* Cache to that ensures we parse CSS clamp parameters only once
|
5
|
-
* @type {Object.<string, {min: number, max: number}>}
|
6
|
-
*/
|
7
|
-
let clampParamCache = {};
|
8
|
-
|
9
|
-
/**
|
10
|
-
* Extract clamp parameters from a CSS variable
|
11
|
-
*
|
12
|
-
* @param {string} varName - CSS variable name without '--'
|
13
|
-
* @returns {Object} Object with min and max values
|
14
|
-
* @throws {Error} If the CSS variable doesn't exist or doesn't contain a valid clamp function
|
15
|
-
*/
|
16
|
-
export function getClampParams(varName) {
|
17
|
-
// Check cache first
|
18
|
-
if (clampParamCache[varName]) {
|
19
|
-
return clampParamCache[varName];
|
20
|
-
}
|
21
|
-
|
22
|
-
// Get the CSS variable value using the existing utility
|
23
|
-
const declaration = getRootCssVar(varName);
|
24
|
-
|
25
|
-
if (declaration === null) {
|
26
|
-
throw new Error(`CSS variable --${varName} not found`);
|
27
|
-
}
|
28
|
-
|
29
|
-
// Parse clamp() function values
|
30
|
-
const clampMatch =
|
31
|
-
typeof declaration === 'string'
|
32
|
-
? declaration.match(
|
33
|
-
/clamp\s*\(\s*([\d.]+)\s*,\s*[^,]+\s*,\s*([\d.]+)\s*\)/
|
34
|
-
)
|
35
|
-
: null;
|
36
|
-
|
37
|
-
if (!clampMatch || clampMatch.length < 3) {
|
38
|
-
// console.log(declaration);
|
39
|
-
throw new Error(
|
40
|
-
`CSS variable --${varName} does not contain a valid clamp function`
|
41
|
-
);
|
42
|
-
}
|
43
|
-
|
44
|
-
const min = parseFloat(clampMatch[1]);
|
45
|
-
const max = parseFloat(clampMatch[2]);
|
46
|
-
|
47
|
-
if (isNaN(min) || isNaN(max)) {
|
48
|
-
throw new Error(`Invalid min/max values in CSS variable --${varName}`);
|
49
|
-
}
|
50
|
-
|
51
|
-
// Cache the result
|
52
|
-
clampParamCache[varName] = { min, max };
|
53
|
-
return { min, max };
|
54
|
-
}
|
55
|
-
|
56
|
-
/**
|
57
|
-
* CSS clamp function implementation
|
58
|
-
*
|
59
|
-
* @param {number} min - Minimum value
|
60
|
-
* @param {number} value - Value to clamp
|
61
|
-
* @param {number} max - Maximum value
|
62
|
-
* @returns {number} Clamped value
|
63
|
-
*/
|
64
|
-
export function clamp(min, value, max) {
|
65
|
-
return Math.max(min, Math.min(value, max));
|
66
|
-
}
|
1
|
+
import { getRootCssVar } from '../../css/index.js';
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Cache to that ensures we parse CSS clamp parameters only once
|
5
|
+
* @type {Object.<string, {min: number, max: number}>}
|
6
|
+
*/
|
7
|
+
let clampParamCache = {};
|
8
|
+
|
9
|
+
/**
|
10
|
+
* Extract clamp parameters from a CSS variable
|
11
|
+
*
|
12
|
+
* @param {string} varName - CSS variable name without '--'
|
13
|
+
* @returns {Object} Object with min and max values
|
14
|
+
* @throws {Error} If the CSS variable doesn't exist or doesn't contain a valid clamp function
|
15
|
+
*/
|
16
|
+
export function getClampParams(varName) {
|
17
|
+
// Check cache first
|
18
|
+
if (clampParamCache[varName]) {
|
19
|
+
return clampParamCache[varName];
|
20
|
+
}
|
21
|
+
|
22
|
+
// Get the CSS variable value using the existing utility
|
23
|
+
const declaration = getRootCssVar(varName);
|
24
|
+
|
25
|
+
if (declaration === null) {
|
26
|
+
throw new Error(`CSS variable --${varName} not found`);
|
27
|
+
}
|
28
|
+
|
29
|
+
// Parse clamp() function values
|
30
|
+
const clampMatch =
|
31
|
+
typeof declaration === 'string'
|
32
|
+
? declaration.match(
|
33
|
+
/clamp\s*\(\s*([\d.]+)\s*,\s*[^,]+\s*,\s*([\d.]+)\s*\)/
|
34
|
+
)
|
35
|
+
: null;
|
36
|
+
|
37
|
+
if (!clampMatch || clampMatch.length < 3) {
|
38
|
+
// console.log(declaration);
|
39
|
+
throw new Error(
|
40
|
+
`CSS variable --${varName} does not contain a valid clamp function`
|
41
|
+
);
|
42
|
+
}
|
43
|
+
|
44
|
+
const min = parseFloat(clampMatch[1]);
|
45
|
+
const max = parseFloat(clampMatch[2]);
|
46
|
+
|
47
|
+
if (isNaN(min) || isNaN(max)) {
|
48
|
+
throw new Error(`Invalid min/max values in CSS variable --${varName}`);
|
49
|
+
}
|
50
|
+
|
51
|
+
// Cache the result
|
52
|
+
clampParamCache[varName] = { min, max };
|
53
|
+
return { min, max };
|
54
|
+
}
|
55
|
+
|
56
|
+
/**
|
57
|
+
* CSS clamp function implementation
|
58
|
+
*
|
59
|
+
* @param {number} min - Minimum value
|
60
|
+
* @param {number} value - Value to clamp
|
61
|
+
* @param {number} max - Maximum value
|
62
|
+
* @returns {number} Clamped value
|
63
|
+
*/
|
64
|
+
export function clamp(min, value, max) {
|
65
|
+
return Math.max(min, Math.min(value, max));
|
66
|
+
}
|
@@ -1,100 +1,100 @@
|
|
1
|
-
import { getRootCssVar } from '../../css/css-vars.js';
|
2
|
-
|
3
|
-
/**
|
4
|
-
* Generates a complete HTML style tag with CSS custom properties for
|
5
|
-
* the design system based on provided configuration.
|
6
|
-
*
|
7
|
-
* @param {Object} design - Design dimensions configuration
|
8
|
-
* @param {number} design.width - The design width in pixels
|
9
|
-
* @param {number} design.height - The design height in pixels
|
10
|
-
* @param {Object} clamping - Scaling configuration parameters
|
11
|
-
* @param {Object} clamping.ui - UI clamping configuration
|
12
|
-
* @param {number} clamping.ui.min - Minimum UI scaling factor
|
13
|
-
* @param {number} clamping.ui.max - Maximum UI scaling factor
|
14
|
-
* @param {Object} clamping.textBase - Base text scaling configuration
|
15
|
-
* @param {number} clamping.textBase.min - Minimum base text scaling
|
16
|
-
* @param {number} clamping.textBase.max - Maximum base text scaling
|
17
|
-
* @param {Object} clamping.textHeading - Heading text clamping configuration
|
18
|
-
* @param {number} clamping.textHeading.min - Minimum heading text scaling
|
19
|
-
* @param {number} clamping.textHeading.max - Maximum heading text scaling
|
20
|
-
* @param {Object} clamping.textUi - UI text clamping configuration
|
21
|
-
* @param {number} clamping.textUi.min - Minimum UI text scaling
|
22
|
-
* @param {number} clamping.textUi.max - Maximum UI text scaling
|
23
|
-
*
|
24
|
-
* @returns {string} Complete HTML style tag with design system CSS variables
|
25
|
-
*
|
26
|
-
* @example
|
27
|
-
* // +layout.svelte
|
28
|
-
* <script>
|
29
|
-
* import { DESIGN, CLAMPING } from '../../../tailwind/extend/clamping/config.js';
|
30
|
-
*
|
31
|
-
* import { rootDesignVarsHTML } from '../index.js';
|
32
|
-
* </script>
|
33
|
-
*
|
34
|
-
* <svelte:head>
|
35
|
-
* {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
|
36
|
-
* </svelte:head>
|
37
|
-
*
|
38
|
-
* // Generates style tag for use in svelte:head
|
39
|
-
* // <style>:root { --design-width: 1920; ... }</style>
|
40
|
-
*/
|
41
|
-
export function rootDesignVarsHTML(design, clamping) {
|
42
|
-
return `<style>:root {
|
43
|
-
/* Design dimensions */
|
44
|
-
--design-width: ${design.width};
|
45
|
-
--design-height: ${design.height};
|
46
|
-
|
47
|
-
/* Base clamping units */
|
48
|
-
--scale-w: 1;
|
49
|
-
--scale-h: 1;
|
50
|
-
--scale-viewport: min(var(--scale-w), var(--scale-h));
|
51
|
-
|
52
|
-
/* Scaling factors with configurable clamping */
|
53
|
-
--scale-ui: clamp(${clamping.ui.min}, var(--scale-viewport), ${clamping.ui.max});
|
54
|
-
--scale-text-base: clamp(${clamping.textBase.min}, var(--scale-viewport), ${clamping.textBase.max});
|
55
|
-
--scale-text-heading: clamp(${clamping.textHeading.min}, var(--scale-viewport), ${clamping.textHeading.max});
|
56
|
-
--scale-text-ui: clamp(${clamping.textUi.min}, var(--scale-viewport), ${clamping.textUi.max});
|
57
|
-
}</style>`;
|
58
|
-
}
|
59
|
-
|
60
|
-
/**
|
61
|
-
* Get design width from CSS variables
|
62
|
-
*
|
63
|
-
* @returns {number} Design width
|
64
|
-
*/
|
65
|
-
export function getRootCssDesignWidth() {
|
66
|
-
return getRootCssVar('design-width');
|
67
|
-
}
|
68
|
-
|
69
|
-
/**
|
70
|
-
* Get design height from CSS variables
|
71
|
-
*
|
72
|
-
* @returns {number} Design height
|
73
|
-
*/
|
74
|
-
export function getRootCssDesignHeight() {
|
75
|
-
return getRootCssVar('design-height');
|
76
|
-
}
|
77
|
-
|
78
|
-
/**
|
79
|
-
* Retrieves all current scaling factors from CSS variables
|
80
|
-
*
|
81
|
-
* @returns {Object} An object containing all scaling factors
|
82
|
-
*/
|
83
|
-
export function getAllRootScalingVars() {
|
84
|
-
const styles = getComputedStyle(document.documentElement);
|
85
|
-
|
86
|
-
return {
|
87
|
-
scaleW: parseFloat(styles.getPropertyValue('--scale-w').trim()) || 0,
|
88
|
-
scaleH: parseFloat(styles.getPropertyValue('--scale-h').trim()) || 0,
|
89
|
-
scaleViewport:
|
90
|
-
parseFloat(styles.getPropertyValue('--scale-viewport').trim()) || 0,
|
91
|
-
|
92
|
-
scaleUI: parseFloat(styles.getPropertyValue('--scale-ui').trim()) || 0,
|
93
|
-
scaleTextBase:
|
94
|
-
parseFloat(styles.getPropertyValue('--scale-text-base').trim()) || 0,
|
95
|
-
scaleTextHeading:
|
96
|
-
parseFloat(styles.getPropertyValue('--scale-text-heading').trim()) || 0,
|
97
|
-
scaleTextUI:
|
98
|
-
parseFloat(styles.getPropertyValue('--scale-text-ui').trim()) || 0
|
99
|
-
};
|
100
|
-
}
|
1
|
+
import { getRootCssVar } from '../../css/css-vars.js';
|
2
|
+
|
3
|
+
/**
|
4
|
+
* Generates a complete HTML style tag with CSS custom properties for
|
5
|
+
* the design system based on provided configuration.
|
6
|
+
*
|
7
|
+
* @param {Object} design - Design dimensions configuration
|
8
|
+
* @param {number} design.width - The design width in pixels
|
9
|
+
* @param {number} design.height - The design height in pixels
|
10
|
+
* @param {Object} clamping - Scaling configuration parameters
|
11
|
+
* @param {Object} clamping.ui - UI clamping configuration
|
12
|
+
* @param {number} clamping.ui.min - Minimum UI scaling factor
|
13
|
+
* @param {number} clamping.ui.max - Maximum UI scaling factor
|
14
|
+
* @param {Object} clamping.textBase - Base text scaling configuration
|
15
|
+
* @param {number} clamping.textBase.min - Minimum base text scaling
|
16
|
+
* @param {number} clamping.textBase.max - Maximum base text scaling
|
17
|
+
* @param {Object} clamping.textHeading - Heading text clamping configuration
|
18
|
+
* @param {number} clamping.textHeading.min - Minimum heading text scaling
|
19
|
+
* @param {number} clamping.textHeading.max - Maximum heading text scaling
|
20
|
+
* @param {Object} clamping.textUi - UI text clamping configuration
|
21
|
+
* @param {number} clamping.textUi.min - Minimum UI text scaling
|
22
|
+
* @param {number} clamping.textUi.max - Maximum UI text scaling
|
23
|
+
*
|
24
|
+
* @returns {string} Complete HTML style tag with design system CSS variables
|
25
|
+
*
|
26
|
+
* @example
|
27
|
+
* // +layout.svelte
|
28
|
+
* <script>
|
29
|
+
* import { DESIGN, CLAMPING } from '../../../tailwind/extend/clamping/config.js';
|
30
|
+
*
|
31
|
+
* import { rootDesignVarsHTML } from '../index.js';
|
32
|
+
* </script>
|
33
|
+
*
|
34
|
+
* <svelte:head>
|
35
|
+
* {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
|
36
|
+
* </svelte:head>
|
37
|
+
*
|
38
|
+
* // Generates style tag for use in svelte:head
|
39
|
+
* // <style>:root { --design-width: 1920; ... }</style>
|
40
|
+
*/
|
41
|
+
export function rootDesignVarsHTML(design, clamping) {
|
42
|
+
return `<style>:root {
|
43
|
+
/* Design dimensions */
|
44
|
+
--design-width: ${design.width};
|
45
|
+
--design-height: ${design.height};
|
46
|
+
|
47
|
+
/* Base clamping units */
|
48
|
+
--scale-w: 1;
|
49
|
+
--scale-h: 1;
|
50
|
+
--scale-viewport: min(var(--scale-w), var(--scale-h));
|
51
|
+
|
52
|
+
/* Scaling factors with configurable clamping */
|
53
|
+
--scale-ui: clamp(${clamping.ui.min}, var(--scale-viewport), ${clamping.ui.max});
|
54
|
+
--scale-text-base: clamp(${clamping.textBase.min}, var(--scale-viewport), ${clamping.textBase.max});
|
55
|
+
--scale-text-heading: clamp(${clamping.textHeading.min}, var(--scale-viewport), ${clamping.textHeading.max});
|
56
|
+
--scale-text-ui: clamp(${clamping.textUi.min}, var(--scale-viewport), ${clamping.textUi.max});
|
57
|
+
}</style>`;
|
58
|
+
}
|
59
|
+
|
60
|
+
/**
|
61
|
+
* Get design width from CSS variables
|
62
|
+
*
|
63
|
+
* @returns {number} Design width
|
64
|
+
*/
|
65
|
+
export function getRootCssDesignWidth() {
|
66
|
+
return getRootCssVar('design-width');
|
67
|
+
}
|
68
|
+
|
69
|
+
/**
|
70
|
+
* Get design height from CSS variables
|
71
|
+
*
|
72
|
+
* @returns {number} Design height
|
73
|
+
*/
|
74
|
+
export function getRootCssDesignHeight() {
|
75
|
+
return getRootCssVar('design-height');
|
76
|
+
}
|
77
|
+
|
78
|
+
/**
|
79
|
+
* Retrieves all current scaling factors from CSS variables
|
80
|
+
*
|
81
|
+
* @returns {Object} An object containing all scaling factors
|
82
|
+
*/
|
83
|
+
export function getAllRootScalingVars() {
|
84
|
+
const styles = getComputedStyle(document.documentElement);
|
85
|
+
|
86
|
+
return {
|
87
|
+
scaleW: parseFloat(styles.getPropertyValue('--scale-w').trim()) || 0,
|
88
|
+
scaleH: parseFloat(styles.getPropertyValue('--scale-h').trim()) || 0,
|
89
|
+
scaleViewport:
|
90
|
+
parseFloat(styles.getPropertyValue('--scale-viewport').trim()) || 0,
|
91
|
+
|
92
|
+
scaleUI: parseFloat(styles.getPropertyValue('--scale-ui').trim()) || 0,
|
93
|
+
scaleTextBase:
|
94
|
+
parseFloat(styles.getPropertyValue('--scale-text-base').trim()) || 0,
|
95
|
+
scaleTextHeading:
|
96
|
+
parseFloat(styles.getPropertyValue('--scale-text-heading').trim()) || 0,
|
97
|
+
scaleTextUI:
|
98
|
+
parseFloat(styles.getPropertyValue('--scale-text-ui').trim()) || 0
|
99
|
+
};
|
100
|
+
}
|
@@ -1,5 +1,5 @@
|
|
1
|
-
export * from './css/clamp.js';
|
2
|
-
export * from './css/root-design-vars.js';
|
3
|
-
export * from './components/states.js';
|
4
|
-
export * from './layout/scaling.js';
|
5
|
-
export * from './tailwind.js';
|
1
|
+
export * from './css/clamp.js';
|
2
|
+
export * from './css/root-design-vars.js';
|
3
|
+
export * from './components/states.js';
|
4
|
+
export * from './layout/scaling.js';
|
5
|
+
export * from './tailwind.js';
|