@hkdigital/lib-sveltekit 0.0.94 → 0.0.95
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/dist/components/icon/HkIcon.svelte +1 -1
- package/dist/components/icon/HkIcon.svelte.d.ts +1 -1
- package/dist/components/image/ImageBox.svelte +2 -2
- package/dist/components/image/ResponsiveImage.svelte +1 -2
- package/dist/components/widgets/compare-left-right/CompareLeftRight.svelte +13 -9
- package/dist/config/tailwind.extend.d.ts +49 -0
- package/dist/config/tailwind.extend.js +60 -0
- package/dist/css/tw-prose.postcss +259 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +6 -9
- package/package.json +3 -2
|
@@ -214,7 +214,7 @@
|
|
|
214
214
|
</script>
|
|
215
215
|
|
|
216
216
|
<div
|
|
217
|
-
data-image
|
|
217
|
+
data-image="box"
|
|
218
218
|
bind:this={imgBoxElem}
|
|
219
219
|
class="{base} {bg} {aspect} {overflow} {width} {height} {classes}"
|
|
220
220
|
style:--fit={fit}
|
|
@@ -230,7 +230,7 @@
|
|
|
230
230
|
</div>
|
|
231
231
|
|
|
232
232
|
<style>
|
|
233
|
-
[data-image
|
|
233
|
+
[data-image="box"] {
|
|
234
234
|
max-width: 100%;
|
|
235
235
|
max-height: 100%;
|
|
236
236
|
}
|
|
@@ -83,7 +83,6 @@
|
|
|
83
83
|
|
|
84
84
|
<div
|
|
85
85
|
bind:clientWidth={containerWidth}
|
|
86
|
-
data-hk--responsive-image-box
|
|
87
86
|
class="{boxBase} {boxClasses}"
|
|
88
87
|
{...boxAttrs}
|
|
89
88
|
>
|
|
@@ -91,7 +90,7 @@
|
|
|
91
90
|
|
|
92
91
|
{#if variant}
|
|
93
92
|
<img
|
|
94
|
-
data-responsive
|
|
93
|
+
data-image="responsive"
|
|
95
94
|
src={imageUrl ? imageUrl : ''}
|
|
96
95
|
width={variant.width}
|
|
97
96
|
height={variant.height}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
<!-- CompareLeftRight.svelte -->
|
|
2
1
|
<script>
|
|
3
2
|
/** @type {HTMLElement | null} */
|
|
4
3
|
let container = $state(null);
|
|
@@ -13,11 +12,16 @@
|
|
|
13
12
|
handleColor?: string
|
|
14
13
|
} & Record<string, any>} */
|
|
15
14
|
let {
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
width='w-[100vw]',
|
|
16
|
+
height='aspect-video',
|
|
17
|
+
border='border border-surface-500',
|
|
18
18
|
classes = '',
|
|
19
19
|
dividerColor = 'bg-surface-500',
|
|
20
20
|
handleColor = 'bg-surface-700',
|
|
21
|
+
|
|
22
|
+
// Snippets
|
|
23
|
+
leftContent,
|
|
24
|
+
rightContent,
|
|
21
25
|
...attrs
|
|
22
26
|
} = $props();
|
|
23
27
|
|
|
@@ -114,7 +118,7 @@
|
|
|
114
118
|
|
|
115
119
|
<div
|
|
116
120
|
bind:this={container}
|
|
117
|
-
class="relative
|
|
121
|
+
class="relative {width} {height} {border} {classes}"
|
|
118
122
|
role="group"
|
|
119
123
|
aria-label="Content comparison"
|
|
120
124
|
{...attrs}
|
|
@@ -140,16 +144,16 @@
|
|
|
140
144
|
|
|
141
145
|
<!-- Slider control -->
|
|
142
146
|
<div
|
|
143
|
-
class="absolute inset-y-0 z-10 flex w-1
|
|
147
|
+
class="absolute inset-y-0 z-10 flex w-1 items-center justify-center {dividerColor}"
|
|
144
148
|
style={dividerStyle}
|
|
145
149
|
>
|
|
146
150
|
<!-- Vertical separator line -->
|
|
147
|
-
<div class="absolute inset-y-0 w-0.5 bg-current opacity-50"></div>
|
|
151
|
+
<div class="absolute inset-y-0 w-0.5 bg-current opacity-50 pointer-events-none"></div>
|
|
148
152
|
|
|
149
153
|
<button
|
|
150
|
-
class="flex h-10 w-10 items-center justify-center rounded-full shadow-lg
|
|
151
|
-
|
|
152
|
-
|
|
154
|
+
class="flex h-10 w-10 items-center justify-center rounded-full shadow-lg transition-transform {handleColor}"
|
|
155
|
+
onmousedown={handleMouseDown}
|
|
156
|
+
onkeydown={handleKeyDown}
|
|
153
157
|
role="slider"
|
|
154
158
|
aria-orientation="vertical"
|
|
155
159
|
aria-valuenow={position}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
export const spacing: {
|
|
2
|
+
'5p': string;
|
|
3
|
+
'10p': string;
|
|
4
|
+
'20p': string;
|
|
5
|
+
'30p': string;
|
|
6
|
+
'40p': string;
|
|
7
|
+
'50p': string;
|
|
8
|
+
'60p': string;
|
|
9
|
+
'80p': string;
|
|
10
|
+
'100p': string;
|
|
11
|
+
'120p': string;
|
|
12
|
+
'160p': string;
|
|
13
|
+
'180p': string;
|
|
14
|
+
'4p': string;
|
|
15
|
+
'6p': string;
|
|
16
|
+
'8p': string;
|
|
17
|
+
'16p': string;
|
|
18
|
+
'24p': string;
|
|
19
|
+
};
|
|
20
|
+
export const fontSize: {
|
|
21
|
+
'16p': string;
|
|
22
|
+
'20p': string;
|
|
23
|
+
'24p': string;
|
|
24
|
+
'32p': string;
|
|
25
|
+
'50p': string;
|
|
26
|
+
sm: string;
|
|
27
|
+
base: string;
|
|
28
|
+
lg: string;
|
|
29
|
+
xl: string;
|
|
30
|
+
'2xl': string;
|
|
31
|
+
'3xl': string;
|
|
32
|
+
'4xl': string;
|
|
33
|
+
'5xl': string;
|
|
34
|
+
'6xl': string;
|
|
35
|
+
'7xl': string;
|
|
36
|
+
'8xl': string;
|
|
37
|
+
'9xl': string;
|
|
38
|
+
};
|
|
39
|
+
export namespace borderRadius {
|
|
40
|
+
let none: number;
|
|
41
|
+
let sm: string;
|
|
42
|
+
let md: string;
|
|
43
|
+
let lg: string;
|
|
44
|
+
let full: string;
|
|
45
|
+
}
|
|
46
|
+
export const borderWidth: {
|
|
47
|
+
'1p': string;
|
|
48
|
+
'2p': string;
|
|
49
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
|
|
2
|
+
export const spacing =
|
|
3
|
+
{
|
|
4
|
+
'5p': '0.3125rem',
|
|
5
|
+
'10p': '0.625rem',
|
|
6
|
+
'20p': '1.25rem',
|
|
7
|
+
'30p': '1.875rem',
|
|
8
|
+
'40p': '2.5rem',
|
|
9
|
+
'50p': '3.125rem',
|
|
10
|
+
'60p': '3.75rem',
|
|
11
|
+
'80p': '5rem',
|
|
12
|
+
'100p': '6.25rem',
|
|
13
|
+
'120p': '7.5rem',
|
|
14
|
+
'160p': '10rem',
|
|
15
|
+
'180p': '11.25rem',
|
|
16
|
+
|
|
17
|
+
'4p': '0.25rem',
|
|
18
|
+
'6p': '0.375rem',
|
|
19
|
+
'8p': '0.5rem',
|
|
20
|
+
'16p': '1rem',
|
|
21
|
+
'24p': '1.5rem'
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
export const fontSize =
|
|
26
|
+
{
|
|
27
|
+
'16p': '1rem',
|
|
28
|
+
'20p': '1.25rem',
|
|
29
|
+
'24p': '1.5rem',
|
|
30
|
+
'32p': '2rem',
|
|
31
|
+
'50p': '3.125rem',
|
|
32
|
+
|
|
33
|
+
'sm': '87.5%',
|
|
34
|
+
'base': '100%', // 16
|
|
35
|
+
'lg': '112.5%', // 18
|
|
36
|
+
'xl': '125%', // 20
|
|
37
|
+
'2xl': '150%', // 24
|
|
38
|
+
'3xl': '187.5%', // 30
|
|
39
|
+
'4xl': '250%', // 40
|
|
40
|
+
'5xl': '312.5%', // 50
|
|
41
|
+
'6xl': '375%', // 60
|
|
42
|
+
'7xl': '450%', // 72
|
|
43
|
+
'8xl': '600%', // 96
|
|
44
|
+
'9xl': '800%x' // 128
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export const borderRadius =
|
|
48
|
+
{
|
|
49
|
+
none: 0,
|
|
50
|
+
sm: '0.875rem',
|
|
51
|
+
md: '1.25rem',
|
|
52
|
+
lg: '2.5rem',
|
|
53
|
+
full: '9999px'
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export const borderWidth =
|
|
57
|
+
{
|
|
58
|
+
'1p': '0.0625rem',
|
|
59
|
+
'2p': '0.125rem'
|
|
60
|
+
};
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
/* Base prose styles */
|
|
2
|
+
.prose {
|
|
3
|
+
font-size: 1rem;
|
|
4
|
+
line-height: 1.75;
|
|
5
|
+
max-width: 65ch;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.prose > * + * {
|
|
9
|
+
margin-top: 1.25em;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* Headings */
|
|
13
|
+
.prose h1 {
|
|
14
|
+
font-size: 2.25em;
|
|
15
|
+
line-height: 1.1111111;
|
|
16
|
+
margin-top: 0;
|
|
17
|
+
margin-bottom: 0.8888889em;
|
|
18
|
+
font-weight: 800;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.prose h2 {
|
|
22
|
+
font-size: 1.5em;
|
|
23
|
+
line-height: 1.3333333;
|
|
24
|
+
margin-top: 2em;
|
|
25
|
+
margin-bottom: 1em;
|
|
26
|
+
font-weight: 700;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.prose h3 {
|
|
30
|
+
font-size: 1.25em;
|
|
31
|
+
line-height: 1.6;
|
|
32
|
+
margin-top: 1.6em;
|
|
33
|
+
margin-bottom: 0.6em;
|
|
34
|
+
font-weight: 600;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.prose h4 {
|
|
38
|
+
font-size: 1.125em;
|
|
39
|
+
line-height: 1.5;
|
|
40
|
+
margin-top: 1.5em;
|
|
41
|
+
margin-bottom: 0.5em;
|
|
42
|
+
font-weight: 600;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Paragraphs */
|
|
46
|
+
.prose p {
|
|
47
|
+
margin-top: 1.25em;
|
|
48
|
+
margin-bottom: 1.25em;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Lists */
|
|
52
|
+
.prose ul,
|
|
53
|
+
.prose ol {
|
|
54
|
+
padding-left: 1.625em;
|
|
55
|
+
margin-top: 1.25em;
|
|
56
|
+
margin-bottom: 1.25em;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.prose li {
|
|
60
|
+
margin-top: 0.5em;
|
|
61
|
+
margin-bottom: 0.5em;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.prose > ul > li p {
|
|
65
|
+
margin-top: 0.75em;
|
|
66
|
+
margin-bottom: 0.75em;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.prose > ul > li > *:first-child {
|
|
70
|
+
margin-top: 1.25em;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.prose > ul > li > *:last-child {
|
|
74
|
+
margin-bottom: 1.25em;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Nested lists */
|
|
78
|
+
.prose ul ul,
|
|
79
|
+
.prose ul ol,
|
|
80
|
+
.prose ol ul,
|
|
81
|
+
.prose ol ol {
|
|
82
|
+
margin-top: 0.75em;
|
|
83
|
+
margin-bottom: 0.75em;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Links */
|
|
87
|
+
.prose a {
|
|
88
|
+
color: #111827;
|
|
89
|
+
text-decoration: underline;
|
|
90
|
+
font-weight: 500;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.prose a:hover {
|
|
94
|
+
text-decoration-thickness: 2px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Code blocks */
|
|
98
|
+
.prose code {
|
|
99
|
+
color: #111827;
|
|
100
|
+
font-weight: 600;
|
|
101
|
+
font-size: 0.875em;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.prose pre {
|
|
105
|
+
color: #e5e7eb;
|
|
106
|
+
background-color: #1f2937;
|
|
107
|
+
overflow-x: auto;
|
|
108
|
+
font-size: 0.875em;
|
|
109
|
+
line-height: 1.7142857;
|
|
110
|
+
margin-top: 1.7142857em;
|
|
111
|
+
margin-bottom: 1.7142857em;
|
|
112
|
+
border-radius: 0.375rem;
|
|
113
|
+
padding: 0.8571429em 1.1428571em;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.prose pre code {
|
|
117
|
+
background-color: transparent;
|
|
118
|
+
border-radius: 0;
|
|
119
|
+
padding: 0;
|
|
120
|
+
font-weight: 400;
|
|
121
|
+
color: inherit;
|
|
122
|
+
font-size: inherit;
|
|
123
|
+
font-family: inherit;
|
|
124
|
+
line-height: inherit;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* Blockquotes */
|
|
128
|
+
.prose blockquote {
|
|
129
|
+
font-weight: 500;
|
|
130
|
+
font-style: italic;
|
|
131
|
+
color: #111827;
|
|
132
|
+
border-left-width: 0.25rem;
|
|
133
|
+
border-left-color: #e5e7eb;
|
|
134
|
+
margin-top: 1.6em;
|
|
135
|
+
margin-bottom: 1.6em;
|
|
136
|
+
padding-left: 1em;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* Tables */
|
|
140
|
+
.prose table {
|
|
141
|
+
width: 100%;
|
|
142
|
+
table-layout: auto;
|
|
143
|
+
text-align: left;
|
|
144
|
+
margin-top: 2em;
|
|
145
|
+
margin-bottom: 2em;
|
|
146
|
+
font-size: 0.875em;
|
|
147
|
+
line-height: 1.7142857;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.prose thead {
|
|
151
|
+
font-weight: 600;
|
|
152
|
+
border-bottom-width: 1px;
|
|
153
|
+
border-bottom-color: #d1d5db;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.prose thead th {
|
|
157
|
+
vertical-align: bottom;
|
|
158
|
+
padding-right: 0.5714286em;
|
|
159
|
+
padding-bottom: 0.5714286em;
|
|
160
|
+
padding-left: 0.5714286em;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.prose tbody tr {
|
|
164
|
+
border-bottom-width: 1px;
|
|
165
|
+
border-bottom-color: #e5e7eb;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.prose tbody td {
|
|
169
|
+
vertical-align: top;
|
|
170
|
+
padding: 0.5714286em;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* Size variations */
|
|
174
|
+
.prose-sm {
|
|
175
|
+
font-size: 0.875rem;
|
|
176
|
+
line-height: 1.7142857;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.prose-lg {
|
|
180
|
+
font-size: 1.125rem;
|
|
181
|
+
line-height: 1.7777778;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.prose-xl {
|
|
185
|
+
font-size: 1.25rem;
|
|
186
|
+
line-height: 1.8;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* Dark mode */
|
|
190
|
+
.prose-invert {
|
|
191
|
+
color: #d1d5db;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.prose-invert a {
|
|
195
|
+
color: #fff;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.prose-invert strong {
|
|
199
|
+
color: #fff;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.prose-invert code {
|
|
203
|
+
color: #fff;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.prose-invert thead {
|
|
207
|
+
border-bottom-color: #4b5563;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.prose-invert tbody tr {
|
|
211
|
+
border-bottom-color: #374151;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.prose-invert blockquote {
|
|
215
|
+
color: #9ca3af;
|
|
216
|
+
border-left-color: #4b5563;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* Images */
|
|
220
|
+
.prose img {
|
|
221
|
+
margin-top: 2em;
|
|
222
|
+
margin-bottom: 2em;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.prose figure > * {
|
|
226
|
+
margin-top: 0;
|
|
227
|
+
margin-bottom: 0;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.prose figure figcaption {
|
|
231
|
+
color: #6b7280;
|
|
232
|
+
font-size: 0.875em;
|
|
233
|
+
line-height: 1.4285714;
|
|
234
|
+
margin-top: 0.8571429em;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
/* Custom elements */
|
|
238
|
+
.prose hr {
|
|
239
|
+
border-color: #e5e7eb;
|
|
240
|
+
border-top-width: 1px;
|
|
241
|
+
margin-top: 3em;
|
|
242
|
+
margin-bottom: 3em;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.prose strong {
|
|
246
|
+
font-weight: 600;
|
|
247
|
+
color: #111827;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.prose em {
|
|
251
|
+
font-style: italic;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
/* Focus styles */
|
|
255
|
+
.prose a:focus {
|
|
256
|
+
outline: 2px solid transparent;
|
|
257
|
+
outline-offset: 2px;
|
|
258
|
+
text-decoration-thickness: 2px;
|
|
259
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
declare const jens: 12345;
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
//
|
|
2
|
-
// @
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
// import { TimeStampSource } from '@hkdigital/lib-sveltekit/classes';
|
|
8
|
-
//
|
|
9
|
-
//
|
|
1
|
+
// // @note all exports are in subfolders // // @see package.json > exports //
|
|
2
|
+
// @example // import {TimeStampSource} from '@hkdigital/lib-sveltekit/classes';
|
|
3
|
+
|
|
4
|
+
const jens = 12345;
|
|
5
|
+
|
|
6
|
+
console.log(jens);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hkdigital/lib-sveltekit",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.95",
|
|
4
4
|
"author": {
|
|
5
5
|
"name": "HKdigital",
|
|
6
6
|
"url": "https://hkdigital.nl"
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
},
|
|
58
58
|
"peerDependencies": {
|
|
59
59
|
"@sveltejs/kit": "^2.15.2",
|
|
60
|
-
"svelte": "^5.0.0",
|
|
61
60
|
"runed": "^0.23.0",
|
|
61
|
+
"svelte": "^5.0.0",
|
|
62
62
|
"valibot": "^0.42.1"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
@@ -92,6 +92,7 @@
|
|
|
92
92
|
"vitest": "^2.1.8"
|
|
93
93
|
},
|
|
94
94
|
"dependencies": {
|
|
95
|
+
"@tailwindcss/typography": "^0.5.16",
|
|
95
96
|
"zod": "^3.24.1"
|
|
96
97
|
}
|
|
97
98
|
}
|