poe-svelte-ui-lib 1.4.5 → 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>
|
|
@@ -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
|
>
|
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
|
}
|