poe-svelte-ui-lib 1.4.4 → 1.4.6
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.
|
@@ -16,76 +16,81 @@
|
|
|
16
16
|
const toggle = () => (isOpen = !isOpen)
|
|
17
17
|
</script>
|
|
18
18
|
|
|
19
|
-
<div
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
19
|
+
<div class="p-1">
|
|
20
|
+
<div
|
|
21
|
+
id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
|
|
22
|
+
class={twMerge(
|
|
23
|
+
`w-full rounded-xl bg-(--container-color) p-0
|
|
24
|
+
transition-shadow duration-250
|
|
25
|
+
shadow-[0_0_3px_rgb(0_0_0_/0.25)] hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]`,
|
|
26
|
+
wrapperClass,
|
|
27
|
+
)}
|
|
28
|
+
transition:slide={{ duration: 250 }}
|
|
29
|
+
>
|
|
30
|
+
<div>
|
|
31
|
+
<button class="flex w-full cursor-pointer items-center justify-between p-4 py-3.5 transition-shadow duration-250" onclick={toggle}>
|
|
32
|
+
<div class="flex w-full items-center">
|
|
33
|
+
<span
|
|
34
|
+
class={`flex h-7 w-7 shrink-0 items-center justify-center overflow-visible [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
|
|
35
|
+
>
|
|
36
|
+
{#if label?.icon}
|
|
37
|
+
{#if typeof label?.icon === 'string'}
|
|
38
|
+
{@html label.icon}
|
|
39
|
+
{:else}
|
|
40
|
+
{@const IconComponent = label?.icon}
|
|
41
|
+
<IconComponent />
|
|
42
|
+
{/if}
|
|
43
|
+
{/if}
|
|
44
|
+
</span>
|
|
42
45
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
46
|
+
<div
|
|
47
|
+
class="{twMerge(
|
|
48
|
+
'flex w-full justify-start',
|
|
49
|
+
label.class?.split(' ').find((cls: string) => cls.startsWith('justify-')),
|
|
50
|
+
)} "
|
|
51
|
+
>
|
|
52
|
+
<span
|
|
53
|
+
class="{twMerge(
|
|
54
|
+
`m-0 origin-top-left cursor-pointer justify-end px-3 font-semibold transition duration-200 ${isOpen ? 'scale-110' : ''}`,
|
|
55
|
+
label.class,
|
|
56
|
+
)} text-lg"
|
|
57
|
+
>
|
|
58
|
+
{label?.name}
|
|
59
|
+
</span>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
59
62
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
63
|
+
<div class="w-10 pl-4">
|
|
64
|
+
<svg
|
|
65
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
66
|
+
class="h-[1.1rem] w-[1.1rem] transition-transform duration-250"
|
|
67
|
+
style="transform: rotate({isOpen ? 180 : 0}deg)"
|
|
68
|
+
viewBox="0 0 24 24"
|
|
69
|
+
>
|
|
70
|
+
<path
|
|
71
|
+
fill="none"
|
|
72
|
+
stroke="currentColor"
|
|
73
|
+
stroke-linecap="round"
|
|
74
|
+
stroke-linejoin="round"
|
|
75
|
+
stroke-width="2"
|
|
76
|
+
d="M18 12.5s-4.419 6-6 6s-6-6-6-6m12-7s-4.419 6-6 6s-6-6-6-6"
|
|
77
|
+
color="currentColor"
|
|
78
|
+
/>
|
|
79
|
+
</svg>
|
|
80
|
+
</div>
|
|
81
|
+
</button>
|
|
79
82
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
83
|
+
{#if isOpen}
|
|
84
|
+
<div
|
|
85
|
+
class="grid w-full p-4 sm:p-3 {image ? 'gap-x-2' : 'gap-2'} inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)]"
|
|
86
|
+
transition:slide={{ duration: 250 }}
|
|
87
|
+
style="grid-template-columns: repeat({size.width || 10}, minmax(0, 1fr));
|
|
85
88
|
grid-template-rows: repeat({size.height || 2}, {image ? 'minmax(6.5rem, auto)' : 'auto'});
|
|
86
89
|
{image ? `background-image: url(${image}); background-size: cover; background-position: center;` : ''}"
|
|
87
|
-
|
|
88
|
-
|
|
90
|
+
>
|
|
91
|
+
{@render children?.()}
|
|
92
|
+
</div>
|
|
93
|
+
{/if}
|
|
89
94
|
</div>
|
|
90
|
-
|
|
95
|
+
</div>
|
|
91
96
|
</div>
|
|
@@ -70,9 +70,9 @@
|
|
|
70
70
|
id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
|
|
71
71
|
class="{twMerge(
|
|
72
72
|
`relative m-0 inline-block w-full items-center rounded-2xl px-2
|
|
73
|
-
py-1 font-semibold
|
|
74
|
-
${content.icon && !content.name ? 'bg-transparent p-0' : 'bg-blue border border-(--bg-color) '}
|
|
75
|
-
${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer
|
|
73
|
+
py-1 font-semibold transition duration-200 select-none
|
|
74
|
+
${content.icon && !content.name ? 'bg-transparent p-0' : 'bg-blue border border-(--bg-color) shadow-sm hover:shadow-md'}
|
|
75
|
+
${disabled ? 'cursor-not-allowed opacity-50 hover:shadow-none' : 'cursor-pointer active:scale-97'} `,
|
|
76
76
|
componentClass,
|
|
77
77
|
)} bg-(--bg-color)"
|
|
78
78
|
onclick={handleClick}
|
package/dist/Input/Input.svelte
CHANGED
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
}
|
|
55
55
|
</script>
|
|
56
56
|
|
|
57
|
-
<div class={twMerge(`bg-max ${type === 'text-area' ? 'h-full' : ''} relative flex w-full flex-col items-center`, wrapperClass)}>
|
|
57
|
+
<div class={twMerge(`bg-max ${type === 'text-area' ? 'h-full' : ''} relative flex w-full flex-col px-1 items-center`, wrapperClass)}>
|
|
58
58
|
{#if label.name}
|
|
59
59
|
<h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
|
|
60
60
|
{/if}
|
|
@@ -64,11 +64,11 @@
|
|
|
64
64
|
<input
|
|
65
65
|
bind:value
|
|
66
66
|
class={twMerge(
|
|
67
|
-
`w-full rounded-2xl border px-4 py-1 text-center shadow-
|
|
68
|
-
outline-none focus:border-blue-
|
|
69
|
-
${isValid ? 'border-(--
|
|
70
|
-
${disabled ? 'opacity-50' : 'hover:shadow-
|
|
71
|
-
${readonly ? '' : 'hover:shadow-
|
|
67
|
+
`w-full rounded-2xl border px-4 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
|
|
68
|
+
outline-none focus:shadow-[0_0_6px_var(--blue-color)] focus:border-(--blue-color) [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
|
|
69
|
+
${isValid ? 'border-(--bg-color)' : 'border-red-400 shadow-[0_0_6px_var(--red-color)] focus:border-red-400'}
|
|
70
|
+
${disabled ? 'opacity-50' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
|
|
71
|
+
${readonly ? '' : 'hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
|
|
72
72
|
${help?.info ? 'pl-8' : ''}
|
|
73
73
|
${help.copyButton || type === 'password' || (type === 'number' && !readonly) ? 'pr-8' : ''}`,
|
|
74
74
|
componentClass,
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
}
|
|
91
91
|
</script>
|
|
92
92
|
|
|
93
|
-
<div class={twMerge(`bg-max relative flex w-full flex-col items-center `, wrapperClass)} bind:this={dropdownElement}>
|
|
93
|
+
<div class={twMerge(`bg-max relative flex w-full flex-col items-center px-1`, wrapperClass)} bind:this={dropdownElement}>
|
|
94
94
|
{#if label.name}
|
|
95
95
|
<h5 class={twMerge(`w-full px-4`, label.class)}>{label.name}</h5>
|
|
96
96
|
{/if}
|
|
@@ -99,8 +99,8 @@
|
|
|
99
99
|
id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
|
|
100
100
|
value={value?.value ? String(value.value) : ''}
|
|
101
101
|
class={twMerge(
|
|
102
|
-
`w-full rounded-2xl border border-(--
|
|
103
|
-
${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-
|
|
102
|
+
`w-full rounded-2xl border border-(--bg-color) p-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition-shadow duration-200
|
|
103
|
+
${disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}`,
|
|
104
104
|
value?.class,
|
|
105
105
|
)}
|
|
106
106
|
style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%); "
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
|
|
115
115
|
{#if isDropdownOpen}
|
|
116
116
|
<div
|
|
117
|
-
class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl
|
|
117
|
+
class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl shadow-[0_0_3px_rgb(0_0_0_/0.25)]"
|
|
118
118
|
style="width: calc(100% - 1.8rem);"
|
|
119
119
|
transition:slide={{ duration: 250 }}
|
|
120
120
|
>
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
id={option.id}
|
|
124
124
|
value={option?.value ? String(option.value) : ''}
|
|
125
125
|
class={twMerge(
|
|
126
|
-
`flex h-full w-full cursor-pointer items-center justify-center p-1 duration-250 hover:bg-(--field-color)
|
|
126
|
+
`flex h-full w-full cursor-pointer items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] duration-250 hover:bg-(--field-color)!
|
|
127
127
|
${index === options.length - 1 ? 'rounded-b-2xl' : ''} `,
|
|
128
128
|
option.class,
|
|
129
129
|
)}
|
|
@@ -143,8 +143,8 @@
|
|
|
143
143
|
<button
|
|
144
144
|
id={option.id}
|
|
145
145
|
class="{twMerge(
|
|
146
|
-
`m-0 inline-block min-w-0 flex-1 items-center px-2 py-1 font-semibold shadow-
|
|
147
|
-
${option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-
|
|
146
|
+
`m-0 inline-block min-w-0 flex-1 items-center px-2 py-1 font-semibold shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition-all duration-300 select-none border border-(--bg-color)
|
|
147
|
+
${option.disabled || disabled ? 'opacity-50' : 'cursor-pointer hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]'}
|
|
148
148
|
${option.value === value?.value && value !== null ? 'z-10 py-1 shadow-[0_0_10px_var(--shadow-color)] hover:shadow-[0_0_15px_var(--shadow-color)]' : ''}
|
|
149
149
|
${options.length > 0 && index === 0 ? 'rounded-l-2xl' : ''} ${index === options.length - 1 ? 'rounded-r-2xl' : ''}`,
|
|
150
150
|
option.class,
|
|
@@ -165,10 +165,12 @@
|
|
|
165
165
|
{:else if type === 'input'}
|
|
166
166
|
<input
|
|
167
167
|
bind:value={searchValue}
|
|
168
|
-
class="w-full appearance-none rounded-2xl border px-4 py-1 text-center shadow-
|
|
169
|
-
transition-shadow duration-200 outline-none focus:
|
|
168
|
+
class="w-full appearance-none rounded-2xl border px-4 py-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)]
|
|
169
|
+
transition-shadow duration-200 outline-none focus:shadow-[0_0_6px_var(--blue-color)]
|
|
170
170
|
[&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
|
|
171
|
-
{disabled
|
|
171
|
+
{disabled
|
|
172
|
+
? 'cursor-not-allowed opacity-50'
|
|
173
|
+
: 'cursor-text'} border-(--bg-color) focus:border-(--blue-color) hover:shadow-[0_0_6px_rgb(0_0_0_/0.25)]"
|
|
172
174
|
style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
|
|
173
175
|
id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
|
|
174
176
|
{disabled}
|
|
@@ -183,7 +185,7 @@
|
|
|
183
185
|
|
|
184
186
|
{#if isDropdownOpen}
|
|
185
187
|
<div
|
|
186
|
-
class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl border border-t-0 border-(--
|
|
188
|
+
class="absolute top-full left-1/2 z-50 -translate-x-1/2 rounded-b-2xl border border-t-0 border-(--bg-color)"
|
|
187
189
|
style="width: calc(100% - 1.8rem);"
|
|
188
190
|
transition:slide={{ duration: 250 }}
|
|
189
191
|
>
|
|
@@ -192,7 +194,7 @@
|
|
|
192
194
|
id={option.id}
|
|
193
195
|
value={option?.value ? String(option.value) : ''}
|
|
194
196
|
class={twMerge(
|
|
195
|
-
`flex h-full w-full cursor-pointer items-center justify-center p-1 duration-250 hover:bg-(--field-color)
|
|
197
|
+
`flex h-full w-full cursor-pointer items-center justify-center p-1 inset-shadow-[0_10px_10px_-15px_rgb(0_0_0_/0.5)] duration-250 hover:bg-(--field-color)!
|
|
196
198
|
${index === filteredOptions.length - 1 ? 'rounded-b-2xl' : ''} `,
|
|
197
199
|
option.class,
|
|
198
200
|
)}
|
package/dist/Table/Table.svelte
CHANGED
|
@@ -215,7 +215,7 @@
|
|
|
215
215
|
{#each column.buttons as button (button)}
|
|
216
216
|
<button
|
|
217
217
|
class="{twMerge(`cursor-pointer rounded-full
|
|
218
|
-
px-4 py-1 font-
|
|
218
|
+
px-4 py-1 font-semibold shadow-sm transition-shadow duration-200 outline-none select-none hover:shadow-md
|
|
219
219
|
${typeof button.class === 'function' ? button.class(row) : button.class}`)} bg-(--bg-color)"
|
|
220
220
|
onclick={() => buttonClick(row, button)}
|
|
221
221
|
>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "poe-svelte-ui-lib",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@tailwindcss/vite": "^4.1.17",
|
|
36
|
-
"prettier": "^3.
|
|
36
|
+
"prettier": "^3.6.2",
|
|
37
37
|
"prettier-plugin-svelte": "^3.4.0",
|
|
38
|
-
"prettier-plugin-tailwindcss": "^0.7.
|
|
38
|
+
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
39
39
|
"svelte-maplibre-gl": "^1.0.2",
|
|
40
40
|
"tailwind-merge": "^3.4.0",
|
|
41
41
|
"tailwindcss": "^4.1.17",
|
|
@@ -49,9 +49,9 @@
|
|
|
49
49
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
50
50
|
"@types/node": "^24.10.1",
|
|
51
51
|
"publint": "^0.3.15",
|
|
52
|
-
"svelte": "^5.45.
|
|
52
|
+
"svelte": "^5.45.3",
|
|
53
53
|
"svelte-preprocess": "^6.0.3",
|
|
54
|
-
"vite": "^7.2.
|
|
54
|
+
"vite": "^7.2.6",
|
|
55
55
|
"vite-plugin-compression": "^0.5.1"
|
|
56
56
|
}
|
|
57
57
|
}
|