poe-svelte-ui-lib 1.26.1 → 1.26.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.
|
@@ -257,7 +257,7 @@
|
|
|
257
257
|
updateProperty: (icon: string | string[]) => {}
|
|
258
258
|
})}
|
|
259
259
|
<div class="relative mt-6 flex w-full gap-2">
|
|
260
|
-
<UI.Button content={{ name: initialValue.name }} componentClass="min-h-8 bg-blue" onClick={() => (showIconLib = true)} />
|
|
260
|
+
<UI.Button content={{ name: initialValue.name }} componentClass="h-8 min-h-8 bg-blue" onClick={() => (showIconLib = true)} />
|
|
261
261
|
{#if showIconLib}
|
|
262
262
|
<UI.Modal bind:isOpen={showIconLib} wrapperClass="w-130">
|
|
263
263
|
{#snippet main()}
|
|
@@ -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}
|