poe-svelte-ui-lib 1.26.0 → 1.26.2
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.
|
@@ -77,68 +77,72 @@
|
|
|
77
77
|
|
|
78
78
|
<div bind:this={itemsContainer} class="flex flex-col gap-2">
|
|
79
79
|
{#each component.properties.levels || [] as level, index}
|
|
80
|
-
<div id="item-{index}" class="flex
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
80
|
+
<div id="item-{index}" class="flex flex-col gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
|
|
81
|
+
<div class="flex items-center gap-2">
|
|
82
|
+
<UI.Dragging
|
|
83
|
+
wrapperClass="shrink-0"
|
|
84
|
+
container={itemsContainer}
|
|
85
|
+
array={component.properties.levels}
|
|
86
|
+
elementIndex={index}
|
|
87
|
+
onUpdate={(updatedArray) => updateLevels(updatedArray)}
|
|
88
|
+
/>
|
|
89
|
+
<span class="flex-1"></span>
|
|
90
|
+
{#if (component.properties.levels?.length ?? 0) > 1}
|
|
91
|
+
<UI.Button
|
|
92
|
+
wrapperClass="w-8 shrink-0"
|
|
93
|
+
content={{ icon: ButtonDelete }}
|
|
94
|
+
onClick={() => {
|
|
95
|
+
const levels = [...(component.properties?.levels || [])]
|
|
96
|
+
levels.splice(index, 1)
|
|
97
|
+
updateLevels(levels)
|
|
98
|
+
}}
|
|
99
|
+
/>
|
|
100
|
+
{/if}
|
|
101
|
+
</div>
|
|
102
|
+
<div class="flex flex-wrap items-end gap-2">
|
|
103
|
+
<UI.Input
|
|
104
|
+
label={{ name: $T("constructor.props.optionname") }}
|
|
105
|
+
wrapperClass="min-w-28 flex-1"
|
|
106
|
+
value={level.name}
|
|
107
|
+
onUpdate={(value) => {
|
|
108
|
+
const levels = [...(component.properties?.levels || [])]
|
|
109
|
+
levels[index] = { ...levels[index], name: value as string }
|
|
110
|
+
updateLevels(levels)
|
|
111
|
+
}}
|
|
112
|
+
/>
|
|
113
|
+
<UI.Select
|
|
114
|
+
label={{ name: $T("constructor.props.variable") }}
|
|
115
|
+
wrapperClass="min-w-32 flex-1"
|
|
116
|
+
type="input"
|
|
117
|
+
options={VARIABLE_OPTIONS}
|
|
118
|
+
value={VARIABLE_OPTIONS.find((opt) => opt.value === level.variable)}
|
|
119
|
+
onUpdate={(value) => {
|
|
120
|
+
const levels = [...(component.properties?.levels || [])]
|
|
121
|
+
levels[index] = { ...levels[index], variable: (value as IOption).value as string }
|
|
122
|
+
updateLevels(levels)
|
|
123
|
+
}}
|
|
124
|
+
/>
|
|
125
|
+
<UI.Input
|
|
126
|
+
label={{ name: $T("constructor.props.periodchart.data") }}
|
|
127
|
+
wrapperClass="min-w-32 flex-1"
|
|
128
|
+
value={formatNumbers(level.data)}
|
|
129
|
+
onUpdate={(value) => {
|
|
130
|
+
const levels = [...(component.properties?.levels || [])]
|
|
131
|
+
levels[index] = { ...levels[index], data: parseNumbers(value as string) }
|
|
132
|
+
updateLevels(levels)
|
|
133
|
+
}}
|
|
134
|
+
/>
|
|
135
|
+
<UI.Input
|
|
136
|
+
label={{ name: $T("constructor.props.periodchart.labels") }}
|
|
137
|
+
wrapperClass="min-w-32 flex-1"
|
|
138
|
+
value={formatStrings(level.labels)}
|
|
139
|
+
onUpdate={(value) => {
|
|
136
140
|
const levels = [...(component.properties?.levels || [])]
|
|
137
|
-
levels
|
|
141
|
+
levels[index] = { ...levels[index], labels: parseStrings(value as string) }
|
|
138
142
|
updateLevels(levels)
|
|
139
143
|
}}
|
|
140
144
|
/>
|
|
141
|
-
|
|
145
|
+
</div>
|
|
142
146
|
</div>
|
|
143
147
|
{/each}
|
|
144
148
|
<div id="item-{component.properties.levels?.length ?? 0}" class="min-h-4"></div>
|
package/dist/PropsGroup.svelte
CHANGED
|
@@ -24,12 +24,14 @@
|
|
|
24
24
|
|
|
25
25
|
<div class={twMerge("flex flex-col gap-1.5 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-2", wrapperClass)}>
|
|
26
26
|
{#if label || headerActions}
|
|
27
|
-
<div class="flex items-center
|
|
27
|
+
<div class="flex items-center gap-2">
|
|
28
28
|
{#if label}
|
|
29
29
|
<span class="text-[11px] font-semibold text-(--muted-color)">{label}</span>
|
|
30
30
|
{/if}
|
|
31
31
|
{#if headerActions}
|
|
32
|
-
|
|
32
|
+
<span class="ml-auto flex items-center gap-2">
|
|
33
|
+
{@render headerActions()}
|
|
34
|
+
</span>
|
|
33
35
|
{/if}
|
|
34
36
|
</div>
|
|
35
37
|
{/if}
|
|
@@ -174,7 +174,7 @@
|
|
|
174
174
|
}}
|
|
175
175
|
/>
|
|
176
176
|
<div
|
|
177
|
-
class="py-1.5 pl-9 grid grid-cols-[minmax(
|
|
177
|
+
class="py-1.5 pl-9 grid grid-cols-[minmax(9rem,14rem)_minmax(5rem,7rem)_minmax(18rem,22rem)_2rem_2rem_1fr] items-end gap-1.5"
|
|
178
178
|
>
|
|
179
179
|
<UI.Input
|
|
180
180
|
label={{ name: $T("constructor.props.table.columns.label") }}
|