poe-svelte-ui-lib 1.9.2 → 1.9.3
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/Button/ButtonProps.svelte +4 -18
- package/dist/ComponentExample.svelte +73 -48
- package/dist/ComponentExample.svelte.d.ts +1 -0
- package/dist/Input/InputProps.svelte +0 -1
- package/dist/Joystick/Joystick.svelte +47 -33
- package/dist/Joystick/JoystickProps.svelte +1 -1
- package/dist/Select/Select.svelte +5 -1
- package/dist/Table/Table.svelte +3 -6
- package/dist/Table/TableProps.svelte +5 -13
- package/dist/Tabs/Tabs.svelte +6 -16
- package/dist/locales/translations.js +3 -1
- package/dist/types.d.ts +0 -1
- package/package.json +1 -1
|
@@ -21,12 +21,7 @@
|
|
|
21
21
|
let hasValue: boolean = $derived(component.eventHandler.Value)
|
|
22
22
|
|
|
23
23
|
let Header: IOption = $derived(
|
|
24
|
-
$optionsStore.HEADER_OPTIONS.find((h) => h.value === component.eventHandler.Header) ?? {
|
|
25
|
-
id: "",
|
|
26
|
-
name: "",
|
|
27
|
-
value: "",
|
|
28
|
-
class: "!w-1/4",
|
|
29
|
-
},
|
|
24
|
+
$optionsStore.HEADER_OPTIONS.find((h) => h.value === component.eventHandler.Header) ?? { id: "", name: "", value: "", class: "!w-1/4" },
|
|
30
25
|
)
|
|
31
26
|
|
|
32
27
|
const initialColor = $derived(
|
|
@@ -48,10 +43,7 @@
|
|
|
48
43
|
type="buttons"
|
|
49
44
|
value={Header}
|
|
50
45
|
options={$optionsStore.HEADER_OPTIONS}
|
|
51
|
-
onUpdate={(option) => {
|
|
52
|
-
Header = { ...(option as IOption<string>) }
|
|
53
|
-
onPropertyChange({ eventHandler: { Header: Header.value as string } })
|
|
54
|
-
}}
|
|
46
|
+
onUpdate={(option) => onPropertyChange({ eventHandler: { Header: (option as IOption<string>).value as string } })}
|
|
55
47
|
/>
|
|
56
48
|
{#if Header.value === "SET"}
|
|
57
49
|
<UI.Select
|
|
@@ -60,9 +52,7 @@
|
|
|
60
52
|
value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.eventHandler.Argument) ??
|
|
61
53
|
$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === "")}
|
|
62
54
|
options={$optionsStore.FULL_ARGUMENT_OPTION}
|
|
63
|
-
onUpdate={(option) => {
|
|
64
|
-
onPropertyChange({ eventHandler: { Argument: (option as IOption<string>).value as string } })
|
|
65
|
-
}}
|
|
55
|
+
onUpdate={(option) => onPropertyChange({ eventHandler: { Argument: (option as IOption<string>).value as string } })}
|
|
66
56
|
/>
|
|
67
57
|
{/if}
|
|
68
58
|
<UI.Input
|
|
@@ -92,11 +82,7 @@
|
|
|
92
82
|
value={component.eventHandler.Variables.join(" ")}
|
|
93
83
|
help={{ info: $t("constructor.props.variables.info"), autocomplete: "on", regExp: /^[a-zA-Z0-9.\-_ ":{}]{0,500}$/ }}
|
|
94
84
|
maxlength={500}
|
|
95
|
-
onUpdate={(value) => {
|
|
96
|
-
const parts = (value as string).trim().split(/\s+/)
|
|
97
|
-
|
|
98
|
-
onPropertyChange({ eventHandler: { Variables: parts } })
|
|
99
|
-
}}
|
|
85
|
+
onUpdate={(value) => onPropertyChange({ eventHandler: { Variables: (value as string).trim().split(/\s+/) } })}
|
|
100
86
|
/>
|
|
101
87
|
{/snippet}
|
|
102
88
|
|
|
@@ -1,65 +1,90 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { Switch, t } from "./"
|
|
2
|
+
import { Select, Switch, t, type IOption } from "./"
|
|
3
3
|
import type { Snippet } from "svelte"
|
|
4
4
|
import { fade } from "svelte/transition"
|
|
5
5
|
|
|
6
6
|
let {
|
|
7
7
|
component,
|
|
8
8
|
componentProps,
|
|
9
|
+
examples,
|
|
9
10
|
codeText,
|
|
10
11
|
forConstructor = $bindable(),
|
|
11
|
-
}: { component: Snippet; componentProps: Snippet; codeText: string; forConstructor: boolean } = $props()
|
|
12
|
+
}: { component: Snippet; componentProps: Snippet; examples?: Snippet; codeText: string; forConstructor: boolean } = $props()
|
|
12
13
|
|
|
13
14
|
let isCopied = $state(false)
|
|
15
|
+
let snippetOptions = [
|
|
16
|
+
{ id: crypto.randomUUID(), value: "overview", name: $t("library.overview") },
|
|
17
|
+
{ id: crypto.randomUUID(), value: "examples", name: $t("library.examples") },
|
|
18
|
+
]
|
|
19
|
+
|
|
20
|
+
let mainSnippet: string | undefined = $state("overview")
|
|
21
|
+
|
|
22
|
+
const renderCurrentSnippet = () => {
|
|
23
|
+
if (mainSnippet === "examples" && examples) return examples
|
|
24
|
+
else return overview
|
|
25
|
+
}
|
|
14
26
|
</script>
|
|
15
27
|
|
|
16
|
-
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
value={forConstructor ? 1 : 0}
|
|
24
|
-
options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
|
|
25
|
-
onChange={(value) => (forConstructor = value == 0 ? false : true)}
|
|
28
|
+
{#if examples}
|
|
29
|
+
<Select
|
|
30
|
+
wrapperClass="w-1/2 mx-auto mb-3"
|
|
31
|
+
type="buttons"
|
|
32
|
+
options={snippetOptions}
|
|
33
|
+
value={snippetOptions.find((o) => o.value == mainSnippet)}
|
|
34
|
+
onUpdate={(value) => (mainSnippet = (value as IOption<string>).value)}
|
|
26
35
|
/>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
36
|
+
{/if}
|
|
37
|
+
{@render renderCurrentSnippet()()}
|
|
38
|
+
|
|
39
|
+
{#snippet overview()}
|
|
40
|
+
<div class="flex w-full h-[calc(100vh-9rem)] flex-col">
|
|
41
|
+
<div class="flex-1">
|
|
42
|
+
{@render component()}
|
|
43
|
+
</div>
|
|
44
|
+
<Switch
|
|
45
|
+
wrapperClass="w-60 self-end p-2"
|
|
46
|
+
label={{ name: $t("library.for_constructor") }}
|
|
47
|
+
value={forConstructor ? 1 : 0}
|
|
48
|
+
options={[{ id: crypto.randomUUID(), value: 0 }]}
|
|
49
|
+
onChange={(value) => (forConstructor = value == 0 ? false : true)}
|
|
50
|
+
/>
|
|
51
|
+
<div class="border-t border-gray-500"></div>
|
|
52
|
+
<div class="max-h-[70%]" transition:fade={{ duration: 200 }}>
|
|
53
|
+
{@render componentProps()}
|
|
54
|
+
<div class="relative mt-3">
|
|
55
|
+
<button
|
|
56
|
+
class="absolute top-2 right-3 flex cursor-pointer border-none bg-transparent"
|
|
57
|
+
onclick={(e) => {
|
|
58
|
+
e.preventDefault()
|
|
59
|
+
navigator.clipboard.writeText(codeText)
|
|
60
|
+
isCopied = true
|
|
61
|
+
setTimeout(() => (isCopied = false), 1000)
|
|
62
|
+
}}
|
|
63
|
+
aria-label="Копировать текст"
|
|
64
|
+
>
|
|
65
|
+
<div class=" size-6 text-sm [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
|
|
66
|
+
{#if isCopied}
|
|
67
|
+
<div
|
|
68
|
+
class="right-1..5 absolute top-1/2 -translate-y-1/2 transform rounded-md bg-(--green-color) px-1.5 py-1 shadow-lg"
|
|
69
|
+
transition:fade={{ duration: 200 }}
|
|
70
|
+
>
|
|
71
|
+
✓
|
|
72
|
+
</div>
|
|
73
|
+
{:else}
|
|
74
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
|
75
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5">
|
|
76
|
+
<path
|
|
77
|
+
d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
|
|
78
|
+
/>
|
|
79
|
+
<path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
|
|
80
|
+
</g>
|
|
81
|
+
</svg>
|
|
82
|
+
{/if}
|
|
83
|
+
</div>
|
|
84
|
+
</button>
|
|
85
|
+
<pre class="overflow-x-auto">{codeText}
|
|
62
86
|
</pre>
|
|
87
|
+
</div>
|
|
63
88
|
</div>
|
|
64
89
|
</div>
|
|
65
|
-
|
|
90
|
+
{/snippet}
|
|
@@ -134,10 +134,13 @@
|
|
|
134
134
|
<!-- Основные кнопки (оси pitch и yaw) -->
|
|
135
135
|
<div class="absolute h-full w-full overflow-hidden rounded-full">
|
|
136
136
|
{#each directions as direction, index}
|
|
137
|
-
<button
|
|
137
|
+
<button
|
|
138
|
+
class="btn-segment pointer-events-none absolute top-1/2 left-1/2 block w-1/2 -translate-y-1/2 cursor-pointer"
|
|
139
|
+
onclick={direction.onClick}
|
|
140
|
+
title=""
|
|
141
|
+
>
|
|
138
142
|
<span
|
|
139
|
-
class="relative flex w-full origin-left items-center justify-center pl-[60%] pointer-events-auto
|
|
140
|
-
{direction.mainButton ? 'bg-(--bg-color)' : ''}
|
|
143
|
+
class="relative flex w-full origin-left items-center justify-center pl-[60%] pointer-events-auto {direction.mainButton ? 'bg-(--bg-color)' : ''}
|
|
141
144
|
"
|
|
142
145
|
style=" height: {direction.mainButton
|
|
143
146
|
? 2 * 5 * Math.sin((Math.PI * 65) / 360)
|
|
@@ -148,7 +151,12 @@
|
|
|
148
151
|
onmouseenter={(e) => (e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--bg-color), var(--shadow-color) 20%)")}
|
|
149
152
|
onmouseleave={(e) => (e.currentTarget.style.backgroundColor = "var(--bg-color)")}
|
|
150
153
|
>
|
|
151
|
-
<svg
|
|
154
|
+
<svg
|
|
155
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
156
|
+
class="segment-icon"
|
|
157
|
+
width={direction.mainButton ? 32 : 16}
|
|
158
|
+
height={direction.mainButton ? 32 : 16}
|
|
159
|
+
viewBox="0 0 24 24"
|
|
152
160
|
><path
|
|
153
161
|
fill="currentColor"
|
|
154
162
|
d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z"
|
|
@@ -171,13 +179,11 @@
|
|
|
171
179
|
{/each}
|
|
172
180
|
</div>
|
|
173
181
|
<!-- Кнопка по центру -->
|
|
174
|
-
<div class="z-20 flex size-20 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_15px_rgb(0_0_0_/0.25)]
|
|
182
|
+
<div class="btn-segment z-20 flex size-20 items-center justify-center rounded-full bg-(--bg-color) shadow-[0_0_15px_rgb(0_0_0_/0.25)]">
|
|
175
183
|
<button
|
|
176
184
|
class="flex size-18 cursor-pointer items-center justify-center rounded-full p-3.5 [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
|
|
177
185
|
style="background: {value[3] == 1 ? 'color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)' : 'var(--bg-color)'}"
|
|
178
|
-
onclick={() =>
|
|
179
|
-
value[3] = value[3] == 0 ? 1 : 0
|
|
180
|
-
}}
|
|
186
|
+
onclick={() => (value[3] = value[3] == 0 ? 1 : 0)}
|
|
181
187
|
>
|
|
182
188
|
{#if buttonIcon}
|
|
183
189
|
{#if typeof buttonIcon === "string"}
|
|
@@ -187,7 +193,7 @@
|
|
|
187
193
|
<IconComponent />
|
|
188
194
|
{/if}
|
|
189
195
|
{:else}
|
|
190
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
|
|
196
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="segment-icon" width="32" height="32" viewBox="0 0 24 24"
|
|
191
197
|
><path
|
|
192
198
|
fill="currentColor"
|
|
193
199
|
d="M6 19h3v-5q0-.425.288-.712T10 13h4q.425 0 .713.288T15 14v5h3v-9l-6-4.5L6 10zm-2 0v-9q0-.475.213-.9t.587-.7l6-4.5q.525-.4 1.2-.4t1.2.4l6 4.5q.375.275.588.7T20 10v9q0 .825-.588 1.413T18 21h-4q-.425 0-.712-.288T13 20v-5h-2v5q0 .425-.288.713T10 21H6q-.825 0-1.412-.587T4 19m8-6.75"
|
|
@@ -204,7 +210,7 @@
|
|
|
204
210
|
style="background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)"
|
|
205
211
|
>
|
|
206
212
|
<button
|
|
207
|
-
class="h-full cursor-pointer rounded-l-full px-3.5
|
|
213
|
+
class="btn-segment h-full cursor-pointer rounded-l-full px-3.5"
|
|
208
214
|
title=""
|
|
209
215
|
onclick={() => {
|
|
210
216
|
if (value[0] - sensitivity <= (axes[0].minNum ?? -360)) {
|
|
@@ -218,19 +224,17 @@
|
|
|
218
224
|
onmouseenter={(e) => (e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)")}
|
|
219
225
|
onmouseleave={(e) => (e.currentTarget.style.backgroundColor = "background: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)")}
|
|
220
226
|
>
|
|
221
|
-
<
|
|
222
|
-
|
|
223
|
-
><
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
</div></button
|
|
231
|
-
>
|
|
227
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="segment-icon rotate-270" width="24" height="24" viewBox="0 0 24 24"
|
|
228
|
+
><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
|
|
229
|
+
><path
|
|
230
|
+
stroke-miterlimit="10"
|
|
231
|
+
d="M6.395 7.705A7.9 7.9 0 0 1 12 5.382a7.93 7.93 0 0 1 7.929 7.929A7.94 7.94 0 0 1 12 21.25a7.94 7.94 0 0 1-7.929-7.94"
|
|
232
|
+
/><path stroke-linejoin="round" d="m7.12 2.75l-.95 3.858a1.33 1.33 0 0 0 .97 1.609l3.869.948" /></g
|
|
233
|
+
></svg
|
|
234
|
+
>
|
|
235
|
+
</button>
|
|
232
236
|
<button
|
|
233
|
-
class="h-full cursor-pointer rounded-r-full px-3.5
|
|
237
|
+
class="btn-segment h-full cursor-pointer rounded-r-full px-3.5"
|
|
234
238
|
title=""
|
|
235
239
|
onclick={() => {
|
|
236
240
|
if (value[0] + sensitivity >= (axes[0].maxNum ?? 360)) {
|
|
@@ -244,17 +248,15 @@
|
|
|
244
248
|
onmouseenter={(e) => (e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)")}
|
|
245
249
|
onmouseleave={(e) => (e.currentTarget.style.backgroundColor = "vabackground: color-mix(in srgb, var(--bg-color), var(--shadow-color) 10%)")}
|
|
246
250
|
>
|
|
247
|
-
<
|
|
248
|
-
|
|
249
|
-
><
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
</div></button
|
|
257
|
-
>
|
|
251
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="segment-icon rotate-90" width="24" height="24" viewBox="0 0 24 24"
|
|
252
|
+
><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
|
|
253
|
+
><path
|
|
254
|
+
stroke-miterlimit="10"
|
|
255
|
+
d="M17.605 7.705A7.9 7.9 0 0 0 12 5.382a7.93 7.93 0 0 0-7.929 7.929A7.94 7.94 0 0 0 12 21.25a7.94 7.94 0 0 0 7.929-7.94"
|
|
256
|
+
/><path stroke-linejoin="round" d="m16.88 2.75l.95 3.858a1.33 1.33 0 0 1-.97 1.609l-3.869.948" /></g
|
|
257
|
+
></svg
|
|
258
|
+
>
|
|
259
|
+
</button>
|
|
258
260
|
</div>
|
|
259
261
|
{/if}
|
|
260
262
|
</div>
|
|
@@ -312,3 +314,15 @@
|
|
|
312
314
|
</div>
|
|
313
315
|
</div>
|
|
314
316
|
</div>
|
|
317
|
+
|
|
318
|
+
<style>
|
|
319
|
+
.segment-icon {
|
|
320
|
+
transition: transform 0.2s ease;
|
|
321
|
+
transform-origin: center;
|
|
322
|
+
display: block;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.btn-segment:active .segment-icon {
|
|
326
|
+
transform: scale(0.8);
|
|
327
|
+
}
|
|
328
|
+
</style>
|
|
@@ -102,9 +102,9 @@
|
|
|
102
102
|
<div class="flex w-1/3 flex-col px-2">
|
|
103
103
|
<CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
|
|
104
104
|
<CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
|
|
105
|
+
<CommonSnippets snippet="Access" {component} {onPropertyChange} />
|
|
105
106
|
</div>
|
|
106
107
|
<div class="flex w-1/3 flex-col px-2">
|
|
107
|
-
<CommonSnippets snippet="Access" {component} {onPropertyChange} />
|
|
108
108
|
<CommonSnippets snippet="Label" {component} {onPropertyChange} />
|
|
109
109
|
<CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
|
|
110
110
|
</div>
|
|
@@ -47,7 +47,11 @@
|
|
|
47
47
|
|
|
48
48
|
onMount(() => {
|
|
49
49
|
if (type === "select" || type === "input") document.addEventListener("click", handleClickOutside)
|
|
50
|
-
if (type === "input" && !Array.isArray(value))
|
|
50
|
+
if (type === "input" && !Array.isArray(value)) {
|
|
51
|
+
searchValue = value?.name ?? ""
|
|
52
|
+
handleSearch(searchValue)
|
|
53
|
+
isDropdownOpen = false
|
|
54
|
+
}
|
|
51
55
|
return () => {
|
|
52
56
|
if (type === "select" || type === "input") document.removeEventListener("click", handleClickOutside)
|
|
53
57
|
}
|
package/dist/Table/Table.svelte
CHANGED
|
@@ -301,7 +301,7 @@
|
|
|
301
301
|
{#if body || buffer}
|
|
302
302
|
{@const rows = dataBuffer.stashData ? buffer.slice(-(dataBuffer.bufferSize ?? 10)) : body.filter((row: any) => Object.entries(row).length != 0)}
|
|
303
303
|
<!-- Table Body с прокруткой -->
|
|
304
|
-
<div class="flex-1 overflow-y-auto bg-(--container-color)/50 relative"
|
|
304
|
+
<div class="flex-1 overflow-y-auto bg-(--container-color)/50 relative" bind:this={container} onscroll={handleScroll}>
|
|
305
305
|
<div class="min-w-0" style={`height: ${dataBuffer.visibleRows && tableHeight && rows.length > dataBuffer.visibleRows ? `${tableHeight}px` : ""};`}>
|
|
306
306
|
{#each rows as row, i (row.__rowId ?? row)}
|
|
307
307
|
<div
|
|
@@ -313,14 +313,11 @@
|
|
|
313
313
|
{#each header as column, j (column)}
|
|
314
314
|
{#if column.width !== "0%"}
|
|
315
315
|
{@const contentArray = typeof column.content === "function" ? column.content(row) : column.content}
|
|
316
|
-
|
|
317
316
|
<div
|
|
318
317
|
id="rowDiv{i}-{j}"
|
|
319
|
-
class="relative flex w-full min-w-0 items-center gap-x-2 px-2 py-1 wrap-break-word
|
|
318
|
+
class="relative flex w-full min-w-0 items-center gap-x-2 px-2 py-1 wrap-break-word border-t
|
|
320
319
|
{column.align === 'center' ? 'justify-center text-center' : column.align === 'right' ? 'justify-end text-right' : 'justify-start text-left'}
|
|
321
|
-
|
|
322
|
-
? 'select-none'
|
|
323
|
-
: 'select-all'}"
|
|
320
|
+
{j !== 0 ? ' border-l ' : ''} {outline ? 'border-(--border-color)' : 'border-transparent'} {column.disableSelect ? 'select-none' : 'select-all'}"
|
|
324
321
|
>
|
|
325
322
|
{#each contentArray as content, index}
|
|
326
323
|
{#if content.type === "button"}
|
|
@@ -167,13 +167,11 @@
|
|
|
167
167
|
}
|
|
168
168
|
}}
|
|
169
169
|
/>
|
|
170
|
-
<div class="py-2 pl-
|
|
170
|
+
<div class="py-2 pl-9 grid grid-cols-[1fr_minmax(5rem,10rem)_minmax(10rem,21rem)_2rem_2rem] items-end gap-2">
|
|
171
171
|
<UI.Input
|
|
172
172
|
label={{ name: $t("constructor.props.table.columns.label") }}
|
|
173
173
|
value={column.label?.name}
|
|
174
|
-
onUpdate={(value) => {
|
|
175
|
-
updateTableHeader(columnIndex, "label", { ["name"]: value })
|
|
176
|
-
}}
|
|
174
|
+
onUpdate={(value) => updateTableHeader(columnIndex, "label", { ["name"]: value })}
|
|
177
175
|
/>
|
|
178
176
|
<UI.Input
|
|
179
177
|
label={{ name: $t("constructor.props.table.columns.width"), class: "px-0" }}
|
|
@@ -365,9 +363,7 @@
|
|
|
365
363
|
(button.class ?? component.properties.wrapperClass).split(" ").find((cls: string) => cls.startsWith("bg-")),
|
|
366
364
|
),
|
|
367
365
|
)}
|
|
368
|
-
onUpdate={(value) =>
|
|
369
|
-
updateContentProperty(columnIndex, index, "class", (value as UI.IOption).value)
|
|
370
|
-
}}
|
|
366
|
+
onUpdate={(value) => updateContentProperty(columnIndex, index, "class", (value as UI.IOption).value)}
|
|
371
367
|
/>
|
|
372
368
|
|
|
373
369
|
<div class="relative mt-6 flex w-1/4 gap-2">
|
|
@@ -613,9 +609,7 @@
|
|
|
613
609
|
}}
|
|
614
610
|
value={component.properties.dataBuffer.clearButton}
|
|
615
611
|
options={[{ id: crypto.randomUUID(), value: 0, class: "", disabled: !component.properties.dataBuffer.stashData }]}
|
|
616
|
-
onChange={(value) =>
|
|
617
|
-
updateProperty("dataBuffer.clearButton", value, component, onPropertyChange)
|
|
618
|
-
}}
|
|
612
|
+
onChange={(value) => updateProperty("dataBuffer.clearButton", value, component, onPropertyChange)}
|
|
619
613
|
/>
|
|
620
614
|
{/snippet}
|
|
621
615
|
|
|
@@ -624,9 +618,7 @@
|
|
|
624
618
|
label={{ name: $t("constructor.props.table.logger"), captionLeft: $t("constructor.props.info.bottom"), captionRight: $t("constructor.props.info.top") }}
|
|
625
619
|
value={component.properties.dataBuffer.logger}
|
|
626
620
|
options={[{ id: crypto.randomUUID(), value: 0, class: "", disabled: !component.properties.dataBuffer.stashData }]}
|
|
627
|
-
onChange={(value) =>
|
|
628
|
-
updateProperty("dataBuffer.logger", value, component, onPropertyChange)
|
|
629
|
-
}}
|
|
621
|
+
onChange={(value) => updateProperty("dataBuffer.logger", value, component, onPropertyChange)}
|
|
630
622
|
/>
|
|
631
623
|
{/snippet}
|
|
632
624
|
|
package/dist/Tabs/Tabs.svelte
CHANGED
|
@@ -9,11 +9,7 @@
|
|
|
9
9
|
size = { width: 12, height: 6 },
|
|
10
10
|
activeTab = 0,
|
|
11
11
|
items = [
|
|
12
|
-
{
|
|
13
|
-
name: "tab 1",
|
|
14
|
-
icon: "",
|
|
15
|
-
class: "",
|
|
16
|
-
},
|
|
12
|
+
{ name: "tab 1", icon: "", class: "" },
|
|
17
13
|
{ name: "tab 2", icon: "", class: "" },
|
|
18
14
|
],
|
|
19
15
|
children,
|
|
@@ -26,13 +22,10 @@
|
|
|
26
22
|
let currentTabIndex: number = $derived(activeTab)
|
|
27
23
|
</script>
|
|
28
24
|
|
|
29
|
-
<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="w-full h-full rounded-xl
|
|
30
|
-
<div class="flex flex-col shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition-shadow duration-250 h-full w-full
|
|
25
|
+
<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class="w-full h-full rounded-xl p-1">
|
|
26
|
+
<div class="flex flex-col shadow-[0_0_3px_rgb(0_0_0_/0.25)] transition-shadow duration-250 h-full w-full rounded-xl bg-(--back-color)">
|
|
31
27
|
<!-- Вкладки -->
|
|
32
|
-
<div
|
|
33
|
-
class="{twMerge(`z-40 flex h-fit items-center rounded-t-xl overflow-x-auto px-1 `, wrapperClass)}
|
|
34
|
-
bg-(--bg-color)"
|
|
35
|
-
>
|
|
28
|
+
<div class="{twMerge(`z-40 flex h-fit items-center rounded-t-xl overflow-x-auto px-1 sticky top-0`, wrapperClass)} bg-(--bg-color)">
|
|
36
29
|
{#each items as item, index}
|
|
37
30
|
<button
|
|
38
31
|
class={twMerge(
|
|
@@ -81,11 +74,8 @@
|
|
|
81
74
|
{/if}
|
|
82
75
|
</button>
|
|
83
76
|
<span
|
|
84
|
-
class="{isCol && items.find((item) => item.icon) ? 'h-9' : 'h-4'} w-0 border border-l
|
|
85
|
-
index !== currentTabIndex &&
|
|
86
|
-
index !== currentTabIndex - 1
|
|
87
|
-
? 'border-gray-500'
|
|
88
|
-
: 'opacity-0'}"
|
|
77
|
+
class="{isCol && items.find((item) => item.icon) ? 'h-9' : 'h-4'} w-0 border border-l
|
|
78
|
+
{index !== items.length - 1 && index !== currentTabIndex && index !== currentTabIndex - 1 ? 'border-gray-500' : 'opacity-0'}"
|
|
89
79
|
></span>
|
|
90
80
|
{/each}
|
|
91
81
|
</div>
|
|
@@ -3,6 +3,8 @@ const translations = {
|
|
|
3
3
|
"common.select_tag": "Сделайте выбор",
|
|
4
4
|
"debug.baud_rate_data": "Данные",
|
|
5
5
|
"library.for_constructor": "Для конструктора",
|
|
6
|
+
"library.overview": "Обзор",
|
|
7
|
+
"library.examples": "Примеры",
|
|
6
8
|
/* Опции рeдактора свойств */
|
|
7
9
|
"constructor.props.action.update": "Обновить",
|
|
8
10
|
"constructor.props.action.save": "Сохранить",
|
|
@@ -172,7 +174,7 @@ const translations = {
|
|
|
172
174
|
"constructor.props.table.addaction": "Добавить действие",
|
|
173
175
|
"constructor.props.table.addbutton": "Добавить кнопку",
|
|
174
176
|
"constructor.props.table.keys": "Перечень ключей",
|
|
175
|
-
"constructor.props.table.keys.info": "Ключи колонок, значения которых будут
|
|
177
|
+
"constructor.props.table.keys.info": "Ключи колонок, значения которых будут возвращаться. Перечислить через пробел",
|
|
176
178
|
"constructor.props.table.select.keys": "Ключ строки",
|
|
177
179
|
"constructor.props.table.select.keys.info": "Ключ колонки, содержащей серийный номер модуля; если поле пустое - применяется серийный номер изделия",
|
|
178
180
|
"constructor.props.table.stashData": "Накопление данных",
|
package/dist/types.d.ts
CHANGED