poe-svelte-ui-lib 1.6.5 → 1.6.7
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/Carousel/Carousel.svelte +3 -3
- package/dist/Table/Table.svelte +23 -65
- package/package.json +3 -3
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
{#if !isAtStart}
|
|
48
48
|
<button
|
|
49
49
|
transition:slide={{ axis: "x" }}
|
|
50
|
-
class="absolute z-10 size-10 translate-y-1/2 cursor-pointer left-1 p-2 rounded-full bg-(--field-color) [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full shadow-[0_0_6px_var(--shadow-color)] rotate-180"
|
|
50
|
+
class="absolute z-10 size-10 -translate-y-1/2 cursor-pointer top-1/2 left-1 p-2 rounded-full bg-(--field-color) [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full shadow-[0_0_6px_var(--shadow-color)] rotate-180"
|
|
51
51
|
onclick={() => scrollCarousel(-scrollValue)}>
|
|
52
52
|
<ArrowIcon />
|
|
53
53
|
</button>
|
|
@@ -55,13 +55,13 @@
|
|
|
55
55
|
{#if !isAtEnd}
|
|
56
56
|
<button
|
|
57
57
|
transition:slide={{ axis: "x" }}
|
|
58
|
-
class="absolute z-10 size-10 translate-y-1/2 cursor-pointer right-1 p-2 rounded-full bg-(--field-color) [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full shadow-[0_0_6px_var(--shadow-color)]"
|
|
58
|
+
class="absolute z-10 size-10 -translate-y-1/2 cursor-pointer top-1/2 right-1 p-2 rounded-full bg-(--field-color) [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full shadow-[0_0_6px_var(--shadow-color)]"
|
|
59
59
|
onclick={() => scrollCarousel(scrollValue)}>
|
|
60
60
|
<ArrowIcon />
|
|
61
61
|
</button>
|
|
62
62
|
{/if}
|
|
63
63
|
|
|
64
|
-
<div {id} bind:this={carouselRef} class="flex overflow-
|
|
64
|
+
<div {id} bind:this={carouselRef} class="flex overflow-hidden gap-2 p-2">
|
|
65
65
|
{@render children?.()}
|
|
66
66
|
</div>
|
|
67
67
|
</div>
|
package/dist/Table/Table.svelte
CHANGED
|
@@ -32,13 +32,7 @@
|
|
|
32
32
|
buffer = []
|
|
33
33
|
}
|
|
34
34
|
/* Сортировка */
|
|
35
|
-
let sortState: {
|
|
36
|
-
key: string | null
|
|
37
|
-
direction: "asc" | "desc" | null
|
|
38
|
-
} = {
|
|
39
|
-
key: null,
|
|
40
|
-
direction: null,
|
|
41
|
-
}
|
|
35
|
+
let sortState: { key: string | null; direction: "asc" | "desc" | null } = { key: null, direction: null }
|
|
42
36
|
|
|
43
37
|
let isAutoscroll = $state(false)
|
|
44
38
|
|
|
@@ -73,9 +67,7 @@
|
|
|
73
67
|
const numB = strB.match(/\d+/g)?.[0] || ""
|
|
74
68
|
if (numA && numB) {
|
|
75
69
|
const numCompare = parseInt(numA, 10) - parseInt(numB, 10)
|
|
76
|
-
if (numCompare !== 0)
|
|
77
|
-
return sortState.direction === "asc" ? numCompare : -numCompare
|
|
78
|
-
}
|
|
70
|
+
if (numCompare !== 0) return sortState.direction === "asc" ? numCompare : -numCompare
|
|
79
71
|
}
|
|
80
72
|
const stringCompare = strA.localeCompare(strB)
|
|
81
73
|
return sortState.direction === "asc" ? stringCompare : -stringCompare
|
|
@@ -95,55 +87,42 @@
|
|
|
95
87
|
/* Обработчик автоскролла */
|
|
96
88
|
const handleAutoScroll = () => {
|
|
97
89
|
if (!container) return
|
|
98
|
-
|
|
99
90
|
isAutoscroll = !(container.scrollHeight - container.scrollTop <= container.clientHeight + 50)
|
|
100
91
|
}
|
|
101
92
|
const scrollToBottom = () => {
|
|
102
|
-
if (!isAutoscroll && container)
|
|
103
|
-
container.scrollTop = container.scrollHeight
|
|
104
|
-
}
|
|
93
|
+
if (!isAutoscroll && container) container.scrollTop = container.scrollHeight
|
|
105
94
|
}
|
|
106
95
|
|
|
107
96
|
$effect(() => {
|
|
108
|
-
if (autoscroll && buffer && buffer.length > 0)
|
|
109
|
-
scrollToBottom()
|
|
110
|
-
}
|
|
97
|
+
if (autoscroll && buffer && buffer.length > 0) scrollToBottom()
|
|
111
98
|
})
|
|
112
99
|
|
|
113
100
|
function buttonClick(row: any, button: any) {
|
|
114
101
|
if (button.onClick) button.onClick(row)
|
|
115
102
|
else if (button.eventHandler && onClick) {
|
|
116
103
|
let value: Record<string, boolean | string | number | number[] | object | null> = {}
|
|
117
|
-
button.eventHandler.Variables.forEach((v: string) =>
|
|
104
|
+
button.eventHandler.Variables.forEach((v: string) => {
|
|
105
|
+
if (header.some(h => h.key === v && h.action?.type === "select")) value[v] = row[v][0]
|
|
106
|
+
else value[v] = row[v]
|
|
107
|
+
})
|
|
118
108
|
button.eventHandler.Value = JSON.stringify(value)
|
|
119
109
|
onClick(button.eventHandler)
|
|
120
110
|
}
|
|
121
111
|
}
|
|
122
112
|
|
|
123
113
|
let isDropdownOpen: number | null = $state(null)
|
|
124
|
-
let changedOptions: { index: number; options: ISelectOption<string | number>[] | null }[] = $state([])
|
|
125
114
|
|
|
126
|
-
const selectOption = (index: number,
|
|
115
|
+
const selectOption = (index: number, key: any, option: ISelectOption<string | number>, event: MouseEvent) => {
|
|
127
116
|
event.stopPropagation()
|
|
128
117
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
if (existingItem) {
|
|
132
|
-
existingItem.options = [option, ...options.filter(opt => opt.id !== option.id)]
|
|
133
|
-
} else {
|
|
134
|
-
changedOptions = [...changedOptions, { index, options: [option, ...options.filter(opt => opt.id !== option.id)] }]
|
|
135
|
-
}
|
|
136
|
-
|
|
118
|
+
let existingItem = body[index][key]
|
|
137
119
|
isDropdownOpen = null
|
|
120
|
+
|
|
121
|
+
if (existingItem) body[index][key] = [option.value, ...existingItem.filter((opt: string | number) => opt !== option.value)]
|
|
138
122
|
}
|
|
139
123
|
|
|
140
124
|
let copiedCell = $state({ x: "", y: -1 })
|
|
141
|
-
let tooltip = $state({
|
|
142
|
-
show: false,
|
|
143
|
-
text: "",
|
|
144
|
-
x: 0,
|
|
145
|
-
y: 0,
|
|
146
|
-
})
|
|
125
|
+
let tooltip = $state({ show: false, text: "", x: 0, y: 0 })
|
|
147
126
|
|
|
148
127
|
const showModal = async (text: string, formatting?: (text: string) => string) => {
|
|
149
128
|
modalData = {
|
|
@@ -177,21 +156,11 @@
|
|
|
177
156
|
const currentType = type
|
|
178
157
|
if (currentType === "logger") {
|
|
179
158
|
header = [
|
|
180
|
-
{
|
|
181
|
-
|
|
182
|
-
label: { name: "Type" },
|
|
183
|
-
width: "3rem",
|
|
184
|
-
} as ITableHeader<any>,
|
|
185
|
-
{
|
|
186
|
-
key: "data",
|
|
187
|
-
label: { name: "Data" },
|
|
188
|
-
width: "calc(100% - 3rem)",
|
|
189
|
-
} as ITableHeader<any>,
|
|
159
|
+
{ key: "color", label: { name: "Type" }, width: "3rem" } as ITableHeader<any>,
|
|
160
|
+
{ key: "data", label: { name: "Data" }, width: "calc(100% - 3rem)" } as ITableHeader<any>,
|
|
190
161
|
]
|
|
191
162
|
}
|
|
192
|
-
return () =>
|
|
193
|
-
buffer = []
|
|
194
|
-
}
|
|
163
|
+
return () => (buffer = [])
|
|
195
164
|
})
|
|
196
165
|
|
|
197
166
|
$effect(() => {
|
|
@@ -249,23 +218,13 @@
|
|
|
249
218
|
|
|
250
219
|
if (type === "logger") {
|
|
251
220
|
header = [
|
|
252
|
-
{
|
|
253
|
-
|
|
254
|
-
label: { name: "Type" },
|
|
255
|
-
width: "3rem",
|
|
256
|
-
} as ITableHeader<any>,
|
|
257
|
-
{
|
|
258
|
-
key: "data",
|
|
259
|
-
label: { name: "Data" },
|
|
260
|
-
width: "calc(100% - 3rem)",
|
|
261
|
-
} as ITableHeader<any>,
|
|
221
|
+
{ key: "color", label: { name: "Type" }, width: "3rem" } as ITableHeader<any>,
|
|
222
|
+
{ key: "data", label: { name: "Data" }, width: "calc(100% - 3rem)" } as ITableHeader<any>,
|
|
262
223
|
]
|
|
263
224
|
}
|
|
264
225
|
|
|
265
226
|
return () => {
|
|
266
|
-
if (autoscroll)
|
|
267
|
-
container?.removeEventListener("scroll", handleAutoScroll)
|
|
268
|
-
}
|
|
227
|
+
if (autoscroll) container?.removeEventListener("scroll", handleAutoScroll)
|
|
269
228
|
}
|
|
270
229
|
})
|
|
271
230
|
</script>
|
|
@@ -350,7 +309,7 @@
|
|
|
350
309
|
{/if}
|
|
351
310
|
|
|
352
311
|
{#if body || buffer}
|
|
353
|
-
{@const isSliced = buffer.length - (dataBuffer.rowsAmmount ?? 10) > 0 ? buffer.length - ((dataBuffer.rowsAmmount ?? 10) % 2) !== 0 : false}
|
|
312
|
+
<!-- {@const isSliced = buffer.length - (dataBuffer.rowsAmmount ?? 10) > 0 ? buffer.length - ((dataBuffer.rowsAmmount ?? 10) % 2) !== 0 : false} -->
|
|
354
313
|
{@const rows =
|
|
355
314
|
type == "logger"
|
|
356
315
|
? buffer.filter(str => logType.includes(str.type)).slice(-(dataBuffer.rowsAmmount ?? 10))
|
|
@@ -386,8 +345,7 @@
|
|
|
386
345
|
{/each}
|
|
387
346
|
</div>
|
|
388
347
|
{:else if column.action?.type == "select" && column.action?.select}
|
|
389
|
-
{@const
|
|
390
|
-
{@const defaultOptions = Array.isArray(row[column.key])
|
|
348
|
+
{@const options = Array.isArray(row[column.key])
|
|
391
349
|
? row[column.key].map((option: string | number) => ({
|
|
392
350
|
id: crypto.randomUUID(),
|
|
393
351
|
value: option,
|
|
@@ -396,7 +354,7 @@
|
|
|
396
354
|
disabled: false,
|
|
397
355
|
}))
|
|
398
356
|
: []}
|
|
399
|
-
|
|
357
|
+
|
|
400
358
|
<div class="relative w-full">
|
|
401
359
|
<button
|
|
402
360
|
class={`w-full rounded-2xl border border-(--blue-color) bg-(--back-color) p-1 text-center shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition duration-200
|
|
@@ -419,7 +377,7 @@
|
|
|
419
377
|
${option_index === options.length - 1 ? "rounded-b-2xl" : ""} `,
|
|
420
378
|
option.class,
|
|
421
379
|
)}
|
|
422
|
-
onclick={e => selectOption(index,
|
|
380
|
+
onclick={e => selectOption(index, column.key, option, e)}>
|
|
423
381
|
{option.name}
|
|
424
382
|
</button>
|
|
425
383
|
{/each}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "poe-svelte-ui-lib",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.7",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -46,12 +46,12 @@
|
|
|
46
46
|
"@sveltejs/adapter-static": "^3.0.10",
|
|
47
47
|
"@sveltejs/kit": "^2.49.3",
|
|
48
48
|
"@sveltejs/package": "^2.5.7",
|
|
49
|
-
"@sveltejs/vite-plugin-svelte": "^6.2.
|
|
49
|
+
"@sveltejs/vite-plugin-svelte": "^6.2.3",
|
|
50
50
|
"@types/node": "^25.0.3",
|
|
51
51
|
"publint": "^0.3.16",
|
|
52
52
|
"svelte": "^5.46.1",
|
|
53
53
|
"svelte-preprocess": "^6.0.3",
|
|
54
|
-
"vite": "^7.3.
|
|
54
|
+
"vite": "^7.3.1",
|
|
55
55
|
"vite-plugin-compression": "^0.5.1"
|
|
56
56
|
}
|
|
57
57
|
}
|