poe-svelte-ui-lib 1.25.3 → 1.26.0
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/CommonSnippets.svelte +1 -1
- package/dist/ProgressBar/ProgressBarProps.svelte +70 -66
- package/dist/Select/Select.svelte +1 -1
- package/dist/Select/SelectProps.svelte +65 -61
- package/dist/Switch/SwitchProps.svelte +63 -58
- package/dist/Table/TableProps.svelte +90 -78
- package/dist/Tabs/TabsProps.svelte +60 -56
- package/package.json +1 -1
|
@@ -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="bg-blue" onClick={() => (showIconLib = true)} />
|
|
260
|
+
<UI.Button content={{ name: initialValue.name }} componentClass="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()}
|
|
@@ -74,82 +74,86 @@
|
|
|
74
74
|
|
|
75
75
|
<div bind:this={itemsContainer} class="flex flex-col gap-2">
|
|
76
76
|
{#each component.properties.items || [] as progress, index}
|
|
77
|
-
<div id="item-{index}" class="flex
|
|
78
|
-
<
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
/>
|
|
87
|
-
<UI.Input
|
|
88
|
-
label={{ name: $T("constructor.props.optionname") }}
|
|
89
|
-
wrapperClass="w-1/4"
|
|
90
|
-
value={progress.name}
|
|
91
|
-
onUpdate={(value) => {
|
|
92
|
-
const progresses = [...(component.properties?.items || [])]
|
|
93
|
-
progresses[index]["name"] = value
|
|
94
|
-
updateProperty("items", progresses, component, onPropertyChange)
|
|
95
|
-
}}
|
|
96
|
-
/>
|
|
97
|
-
{#if forConstructor}
|
|
98
|
-
<UI.Select
|
|
99
|
-
label={{ name: $T("constructor.props.colors") }}
|
|
100
|
-
wrapperClass="w-1/2 h-14.5"
|
|
101
|
-
type="buttons"
|
|
102
|
-
options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
|
|
103
|
-
value={$optionsStore.COLOR_OPTIONS.find((c) =>
|
|
104
|
-
(c.value as string).includes(progress.class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
|
|
105
|
-
)}
|
|
106
|
-
onUpdate={(value) => {
|
|
107
|
-
const progresses = [...(component.properties?.items || [])]
|
|
108
|
-
progresses[index]["class"] = (value as UI.IOption).value
|
|
109
|
-
updateProperty("items", progresses, component, onPropertyChange)
|
|
77
|
+
<div id="item-{index}" class="flex flex-col gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
|
|
78
|
+
<div class="flex items-center gap-2">
|
|
79
|
+
<UI.Dragging
|
|
80
|
+
wrapperClass="shrink-0"
|
|
81
|
+
container={itemsContainer}
|
|
82
|
+
array={component.properties.items}
|
|
83
|
+
elementIndex={index}
|
|
84
|
+
onUpdate={(updatedArray) => {
|
|
85
|
+
updateProperty("items", updatedArray, component, onPropertyChange)
|
|
110
86
|
}}
|
|
111
87
|
/>
|
|
112
|
-
|
|
113
|
-
<UI.
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
...(component.properties?.value ||
|
|
121
|
-
component.properties?.items.map((item: { name?: string; class?: string }, i: number) => {
|
|
122
|
-
return {
|
|
123
|
-
Name: item.name,
|
|
124
|
-
Value: i == index ? value : 0,
|
|
125
|
-
}
|
|
126
|
-
})),
|
|
127
|
-
]
|
|
128
|
-
progresses[index].Value = value
|
|
129
|
-
updateProperty("value", progresses, component, onPropertyChange)
|
|
88
|
+
<span class="flex-1"></span>
|
|
89
|
+
<UI.Button
|
|
90
|
+
wrapperClass="w-8 shrink-0"
|
|
91
|
+
content={{ icon: ButtonDelete }}
|
|
92
|
+
onClick={() => {
|
|
93
|
+
const progresses = [...(component.properties?.items || [])]
|
|
94
|
+
progresses.splice(index, 1)
|
|
95
|
+
updateProperty("items", progresses, component, onPropertyChange)
|
|
130
96
|
}}
|
|
131
97
|
/>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="flex flex-wrap items-end gap-2">
|
|
132
100
|
<UI.Input
|
|
133
|
-
label={{ name: $T("constructor.props.
|
|
134
|
-
wrapperClass="w-1
|
|
135
|
-
value={progress.
|
|
101
|
+
label={{ name: $T("constructor.props.optionname") }}
|
|
102
|
+
wrapperClass="min-w-28 flex-1"
|
|
103
|
+
value={progress.name}
|
|
136
104
|
onUpdate={(value) => {
|
|
137
105
|
const progresses = [...(component.properties?.items || [])]
|
|
138
|
-
progresses[index]["
|
|
106
|
+
progresses[index]["name"] = value
|
|
139
107
|
updateProperty("items", progresses, component, onPropertyChange)
|
|
140
108
|
}}
|
|
141
109
|
/>
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
110
|
+
{#if forConstructor}
|
|
111
|
+
<UI.Select
|
|
112
|
+
label={{ name: $T("constructor.props.colors") }}
|
|
113
|
+
wrapperClass="min-w-56 flex-[2] h-13.5"
|
|
114
|
+
type="buttons"
|
|
115
|
+
options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
|
|
116
|
+
value={$optionsStore.COLOR_OPTIONS.find((c) =>
|
|
117
|
+
(c.value as string).includes(progress.class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
|
|
118
|
+
)}
|
|
119
|
+
onUpdate={(value) => {
|
|
120
|
+
const progresses = [...(component.properties?.items || [])]
|
|
121
|
+
progresses[index]["class"] = (value as UI.IOption).value
|
|
122
|
+
updateProperty("items", progresses, component, onPropertyChange)
|
|
123
|
+
}}
|
|
124
|
+
/>
|
|
125
|
+
{:else}
|
|
126
|
+
<UI.Input
|
|
127
|
+
label={{ name: $T("constructor.props.optionvalue") }}
|
|
128
|
+
wrapperClass="min-w-24 flex-1"
|
|
129
|
+
value={(component.properties.value || [])[index]?.Value}
|
|
130
|
+
type="number"
|
|
131
|
+
onUpdate={(value) => {
|
|
132
|
+
const progresses = [
|
|
133
|
+
...(component.properties?.value ||
|
|
134
|
+
component.properties?.items.map((item: { name?: string; class?: string }, i: number) => {
|
|
135
|
+
return {
|
|
136
|
+
Name: item.name,
|
|
137
|
+
Value: i == index ? value : 0,
|
|
138
|
+
}
|
|
139
|
+
})),
|
|
140
|
+
]
|
|
141
|
+
progresses[index].Value = value
|
|
142
|
+
updateProperty("value", progresses, component, onPropertyChange)
|
|
143
|
+
}}
|
|
144
|
+
/>
|
|
145
|
+
<UI.Input
|
|
146
|
+
label={{ name: $T("constructor.props.optionclass") }}
|
|
147
|
+
wrapperClass="min-w-32 flex-[2]"
|
|
148
|
+
value={progress.class}
|
|
149
|
+
onUpdate={(value) => {
|
|
150
|
+
const progresses = [...(component.properties?.items || [])]
|
|
151
|
+
progresses[index]["class"] = value
|
|
152
|
+
updateProperty("items", progresses, component, onPropertyChange)
|
|
153
|
+
}}
|
|
154
|
+
/>
|
|
155
|
+
{/if}
|
|
156
|
+
</div>
|
|
153
157
|
</div>
|
|
154
158
|
{/each}
|
|
155
159
|
<div id="item-{component.properties.items.length}" class="min-h-4"></div>
|
|
@@ -222,7 +222,7 @@
|
|
|
222
222
|
<button
|
|
223
223
|
id={option.id}
|
|
224
224
|
class="{twMerge(
|
|
225
|
-
`min-w-0 flex-1 px-3 py-2 text-[13px] font-semibold transition-colors duration-150
|
|
225
|
+
`min-h-8 min-w-0 flex-1 px-3 py-2 text-[13px] font-semibold transition-colors duration-150
|
|
226
226
|
${index === 0 ? 'rounded-l-[9px]' : ''} ${index === options.length - 1 ? 'rounded-r-[9px]' : ''}
|
|
227
227
|
${index > 0 ? 'border-l border-(--border-color)' : ''}
|
|
228
228
|
${
|
|
@@ -191,77 +191,81 @@
|
|
|
191
191
|
|
|
192
192
|
<div bind:this={itemsContainer} class="flex flex-col gap-2">
|
|
193
193
|
{#each component.properties.options || [] as option, index (option.id)}
|
|
194
|
-
<div id="item-{index}" class="flex
|
|
195
|
-
<
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
options[index]["name"] = value
|
|
211
|
-
updateProperty("options", options, component, onPropertyChange)
|
|
212
|
-
}}
|
|
213
|
-
/>
|
|
214
|
-
<UI.Input
|
|
215
|
-
label={{ name: $T("constructor.props.optionvalue") }}
|
|
216
|
-
wrapperClass="w-3/10"
|
|
217
|
-
value={option.value}
|
|
218
|
-
type={currentValueType.value}
|
|
219
|
-
number={component.properties.bitMode
|
|
220
|
-
? { minNum: 0, maxNum: Math.pow(2, component.properties.range.end - component.properties.range.start + 1) - 1, step: 1 }
|
|
221
|
-
: { minNum: -1000000, maxNum: 1000000, step: 1 }}
|
|
222
|
-
onUpdate={(value) => {
|
|
223
|
-
const options = [...(component.properties?.options || [])]
|
|
224
|
-
options[index]["value"] = value
|
|
225
|
-
updateProperty("options", options, component, onPropertyChange)
|
|
226
|
-
}}
|
|
227
|
-
/>
|
|
228
|
-
{#if forConstructor}
|
|
229
|
-
<UI.Select
|
|
230
|
-
wrapperClass="w-80 h-14.5"
|
|
231
|
-
label={{ name: $T("constructor.props.colors") }}
|
|
232
|
-
type="buttons"
|
|
233
|
-
options={$optionsStore.COLOR_OPTIONS}
|
|
234
|
-
value={$optionsStore.COLOR_OPTIONS.find((c) =>
|
|
235
|
-
(c.value as string).includes(option.class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
|
|
236
|
-
)}
|
|
237
|
-
onUpdate={(option) => {
|
|
194
|
+
<div id="item-{index}" class="flex flex-col gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
|
|
195
|
+
<div class="flex items-center gap-2">
|
|
196
|
+
<UI.Dragging
|
|
197
|
+
wrapperClass="shrink-0"
|
|
198
|
+
container={itemsContainer}
|
|
199
|
+
array={component.properties.options}
|
|
200
|
+
elementIndex={index}
|
|
201
|
+
onUpdate={(updatedArray) => {
|
|
202
|
+
updateProperty("options", updatedArray, component, onPropertyChange)
|
|
203
|
+
}}
|
|
204
|
+
/>
|
|
205
|
+
<span class="flex-1"></span>
|
|
206
|
+
<UI.Button
|
|
207
|
+
wrapperClass="w-8 shrink-0"
|
|
208
|
+
content={{ icon: ButtonDelete }}
|
|
209
|
+
onClick={() => {
|
|
238
210
|
const options = [...(component.properties?.options || [])]
|
|
239
|
-
options
|
|
211
|
+
options.splice(index, 1)
|
|
240
212
|
updateProperty("options", options, component, onPropertyChange)
|
|
241
213
|
}}
|
|
242
214
|
/>
|
|
243
|
-
|
|
215
|
+
</div>
|
|
216
|
+
<div class="flex flex-wrap items-end gap-2">
|
|
244
217
|
<UI.Input
|
|
245
|
-
label={{ name: $T("constructor.props.
|
|
246
|
-
wrapperClass="w-
|
|
247
|
-
value={option.
|
|
218
|
+
label={{ name: $T("constructor.props.optionname") }}
|
|
219
|
+
wrapperClass="min-w-28 flex-1"
|
|
220
|
+
value={option.name}
|
|
248
221
|
onUpdate={(value) => {
|
|
249
222
|
const options = [...(component.properties?.options || [])]
|
|
250
|
-
options[index]["
|
|
223
|
+
options[index]["name"] = value
|
|
251
224
|
updateProperty("options", options, component, onPropertyChange)
|
|
252
225
|
}}
|
|
253
226
|
/>
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
227
|
+
<UI.Input
|
|
228
|
+
label={{ name: $T("constructor.props.optionvalue") }}
|
|
229
|
+
wrapperClass="min-w-28 flex-1"
|
|
230
|
+
value={option.value}
|
|
231
|
+
type={currentValueType.value}
|
|
232
|
+
number={component.properties.bitMode
|
|
233
|
+
? { minNum: 0, maxNum: Math.pow(2, component.properties.range.end - component.properties.range.start + 1) - 1, step: 1 }
|
|
234
|
+
: { minNum: -1000000, maxNum: 1000000, step: 1 }}
|
|
235
|
+
onUpdate={(value) => {
|
|
236
|
+
const options = [...(component.properties?.options || [])]
|
|
237
|
+
options[index]["value"] = value
|
|
238
|
+
updateProperty("options", options, component, onPropertyChange)
|
|
239
|
+
}}
|
|
240
|
+
/>
|
|
241
|
+
{#if forConstructor}
|
|
242
|
+
<UI.Select
|
|
243
|
+
wrapperClass="min-w-56 flex-[2] h-13.5"
|
|
244
|
+
label={{ name: $T("constructor.props.colors") }}
|
|
245
|
+
type="buttons"
|
|
246
|
+
options={$optionsStore.COLOR_OPTIONS}
|
|
247
|
+
value={$optionsStore.COLOR_OPTIONS.find((c) =>
|
|
248
|
+
(c.value as string).includes(option.class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
|
|
249
|
+
)}
|
|
250
|
+
onUpdate={(option) => {
|
|
251
|
+
const options = [...(component.properties?.options || [])]
|
|
252
|
+
options[index]["class"] = (option as UI.IOption).value
|
|
253
|
+
updateProperty("options", options, component, onPropertyChange)
|
|
254
|
+
}}
|
|
255
|
+
/>
|
|
256
|
+
{:else}
|
|
257
|
+
<UI.Input
|
|
258
|
+
label={{ name: $T("constructor.props.optionclass") }}
|
|
259
|
+
wrapperClass="min-w-32 flex-[2]"
|
|
260
|
+
value={option.class}
|
|
261
|
+
onUpdate={(value) => {
|
|
262
|
+
const options = [...(component.properties?.options || [])]
|
|
263
|
+
options[index]["class"] = value as string
|
|
264
|
+
updateProperty("options", options, component, onPropertyChange)
|
|
265
|
+
}}
|
|
266
|
+
/>
|
|
267
|
+
{/if}
|
|
268
|
+
</div>
|
|
265
269
|
</div>
|
|
266
270
|
{/each}
|
|
267
271
|
<div id="item-{component.properties.options.length}" class="min-h-4"></div>
|
|
@@ -109,64 +109,69 @@
|
|
|
109
109
|
{/snippet}
|
|
110
110
|
|
|
111
111
|
{#each component.properties.options || [] as option, index (option.id)}
|
|
112
|
-
<div class="flex
|
|
113
|
-
<
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
112
|
+
<div class="flex flex-col gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
|
|
113
|
+
<div class="flex items-center gap-2">
|
|
114
|
+
<span class="flex-1"></span>
|
|
115
|
+
<UI.Button
|
|
116
|
+
wrapperClass="w-8 shrink-0"
|
|
117
|
+
content={{ icon: ButtonDelete }}
|
|
118
|
+
onClick={() => {
|
|
119
|
+
const options = [...(component.properties?.options || [])]
|
|
120
|
+
options.splice(index, 1)
|
|
121
|
+
updateProperty("options", options, component, onPropertyChange)
|
|
122
|
+
}}
|
|
123
|
+
/>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="flex flex-wrap items-end gap-2">
|
|
126
|
+
<UI.Input
|
|
127
|
+
label={{ name: $T("constructor.props.optionname") }}
|
|
128
|
+
wrapperClass="min-w-24 flex-1"
|
|
129
|
+
value={option.name}
|
|
130
|
+
maxlength={4}
|
|
131
|
+
onUpdate={(value) => {
|
|
132
|
+
const options = [...(component.properties?.options || [])]
|
|
133
|
+
options[index]["name"] = value
|
|
134
|
+
updateProperty("options", options, component, onPropertyChange)
|
|
135
|
+
}}
|
|
136
|
+
/>
|
|
137
|
+
<UI.Input
|
|
138
|
+
label={{ name: $T("constructor.props.optionposition") }}
|
|
139
|
+
wrapperClass="min-w-24 flex-1"
|
|
140
|
+
value={option.value}
|
|
141
|
+
type="number"
|
|
142
|
+
number={{ minNum: 0, maxNum: 31, step: 1 }}
|
|
143
|
+
onUpdate={(value) => {
|
|
144
|
+
const options = [...(component.properties?.options || [])]
|
|
145
|
+
options[index]["value"] = value
|
|
146
|
+
updateProperty("options", options, component, onPropertyChange)
|
|
147
|
+
}}
|
|
148
|
+
/>
|
|
149
|
+
<UI.Select
|
|
150
|
+
wrapperClass="min-w-56 flex-[2] h-13.5"
|
|
151
|
+
label={{ name: $T("constructor.props.colors") }}
|
|
152
|
+
type="buttons"
|
|
153
|
+
options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max" && option.value !== "bg-gray")}
|
|
154
|
+
value={$optionsStore.COLOR_OPTIONS.find((c) =>
|
|
155
|
+
(c.value as string).includes(option.class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
|
|
156
|
+
)}
|
|
157
|
+
onUpdate={(option) => {
|
|
158
|
+
const options = [...(component.properties?.options || [])]
|
|
159
|
+
options[index]["class"] = (option as UI.IOption).value
|
|
160
|
+
updateProperty("options", options, component, onPropertyChange)
|
|
161
|
+
}}
|
|
162
|
+
/>
|
|
163
|
+
<UI.Switch
|
|
164
|
+
wrapperClass="min-w-24 bg-blue"
|
|
165
|
+
label={{ name: $T("constructor.props.disabled") }}
|
|
166
|
+
value={option.disabled}
|
|
167
|
+
options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
|
|
168
|
+
onChange={(value) => {
|
|
169
|
+
const options = [...(component.properties?.options || [])]
|
|
170
|
+
options[index]["disabled"] = value
|
|
171
|
+
updateProperty("options", options, component, onPropertyChange)
|
|
172
|
+
}}
|
|
173
|
+
/>
|
|
174
|
+
</div>
|
|
170
175
|
</div>
|
|
171
176
|
{/each}
|
|
172
177
|
</PropsGroup>
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
{/snippet}
|
|
134
134
|
|
|
135
135
|
{#snippet TableColumnSettings(forConstructor: boolean)}
|
|
136
|
-
<PropsListModal label={$T("constructor.props.table.columns")} count={component.properties.header?.length ?? 0} wrapperClass="w-
|
|
136
|
+
<PropsListModal label={$T("constructor.props.table.columns")} count={component.properties.header?.length ?? 0} wrapperClass="w-300 h-[85%]">
|
|
137
137
|
{#snippet main()}
|
|
138
138
|
<PropsGroup>
|
|
139
139
|
{#snippet headerActions()}
|
|
@@ -173,7 +173,9 @@
|
|
|
173
173
|
}
|
|
174
174
|
}}
|
|
175
175
|
/>
|
|
176
|
-
<div
|
|
176
|
+
<div
|
|
177
|
+
class="py-1.5 pl-9 grid grid-cols-[minmax(10rem,16rem)_minmax(5rem,7rem)_minmax(14rem,18rem)_2rem_2rem_1fr] items-end gap-1.5"
|
|
178
|
+
>
|
|
177
179
|
<UI.Input
|
|
178
180
|
label={{ name: $T("constructor.props.table.columns.label") }}
|
|
179
181
|
value={column.label?.name}
|
|
@@ -236,12 +238,41 @@
|
|
|
236
238
|
<div class="flex flex-col gap-2" bind:this={settingsContainer[columnIndex]}>
|
|
237
239
|
{#if typeof column.content !== "function"}
|
|
238
240
|
{#each column.content as content, index}
|
|
239
|
-
<div id={`item-${index}-${columnIndex}`} class="
|
|
241
|
+
<div id={`item-${index}-${columnIndex}`} class="flex flex-col gap-2 rounded-lg border border-(--hairline-color) bg-(--back-color)/60 p-2">
|
|
242
|
+
<!-- Тулбар карточки: перетаскивание слева, удаление справа — поля контента никогда
|
|
243
|
+
не переносятся поверх этих кнопок, в отличие от прежней абсолютной раскладки -->
|
|
244
|
+
<div class="flex items-center gap-2">
|
|
245
|
+
<Dragging
|
|
246
|
+
wrapperClass="shrink-0"
|
|
247
|
+
container={settingsContainer[columnIndex]}
|
|
248
|
+
array={column.content}
|
|
249
|
+
elementIndex={index}
|
|
250
|
+
containerIndex={columnIndex}
|
|
251
|
+
onUpdate={(updatedArray, index) => {
|
|
252
|
+
if (index === columnIndex) {
|
|
253
|
+
const headers = [...component.properties.header]
|
|
254
|
+
headers[columnIndex].content = updatedArray
|
|
255
|
+
updateProperty("header", headers, component, onPropertyChange)
|
|
256
|
+
}
|
|
257
|
+
}}
|
|
258
|
+
/>
|
|
259
|
+
<span class="flex-1"></span>
|
|
260
|
+
<UI.Button
|
|
261
|
+
wrapperClass="w-8 shrink-0"
|
|
262
|
+
content={{ icon: ButtonDelete }}
|
|
263
|
+
onClick={() => {
|
|
264
|
+
const headers = [...(component.properties.header || [])]
|
|
265
|
+
;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
|
|
266
|
+
updateProperty("header", headers, component, onPropertyChange)
|
|
267
|
+
}}
|
|
268
|
+
/>
|
|
269
|
+
</div>
|
|
270
|
+
|
|
240
271
|
{#if content.type == "text"}
|
|
241
272
|
{@const text = content.data}
|
|
242
|
-
<div class="flex
|
|
273
|
+
<div class="flex flex-wrap items-end gap-2">
|
|
243
274
|
<UI.Input
|
|
244
|
-
wrapperClass="w-1
|
|
275
|
+
wrapperClass="min-w-32 flex-1"
|
|
245
276
|
label={{ name: $T("constructor.props.table.text.key") }}
|
|
246
277
|
value={text.key}
|
|
247
278
|
help={{ regExp: /^[0-9a-zA-Z_.-]{0,16}$/ }}
|
|
@@ -256,6 +287,7 @@
|
|
|
256
287
|
}}
|
|
257
288
|
/>
|
|
258
289
|
<UI.Select
|
|
290
|
+
wrapperClass="min-w-60 flex-[2]"
|
|
259
291
|
label={{ name: $T("constructor.props.tablecolumn.settings") }}
|
|
260
292
|
type="buttons"
|
|
261
293
|
multiSelect={true}
|
|
@@ -268,9 +300,9 @@
|
|
|
268
300
|
</div>
|
|
269
301
|
{:else if content.type == "select"}
|
|
270
302
|
{@const select = content.data}
|
|
271
|
-
<div class="flex
|
|
303
|
+
<div class="flex flex-wrap items-end gap-2">
|
|
272
304
|
<UI.Input
|
|
273
|
-
wrapperClass="w-1
|
|
305
|
+
wrapperClass="min-w-32 flex-1"
|
|
274
306
|
label={{ name: $T("constructor.props.table.select.key") }}
|
|
275
307
|
value={select.key}
|
|
276
308
|
help={{ regExp: /^[0-9a-zA-Z_.-]{0,16}$/ }}
|
|
@@ -286,7 +318,7 @@
|
|
|
286
318
|
}}
|
|
287
319
|
/>
|
|
288
320
|
<UI.Input
|
|
289
|
-
wrapperClass="w-1
|
|
321
|
+
wrapperClass="min-w-40 flex-1"
|
|
290
322
|
label={{ name: $T("constructor.props.table.select.keys") }}
|
|
291
323
|
value={select?.keyCol ?? ""}
|
|
292
324
|
maxlength={500}
|
|
@@ -300,21 +332,34 @@
|
|
|
300
332
|
</div>
|
|
301
333
|
{:else if content.type == "button"}
|
|
302
334
|
{@const button = content.data}
|
|
303
|
-
|
|
335
|
+
<!-- Строка 1 — как выглядит кнопка, строка 2 — какую команду она шлёт -->
|
|
336
|
+
<div class="flex flex-wrap items-end gap-2">
|
|
304
337
|
<UI.Input
|
|
338
|
+
wrapperClass="min-w-28 flex-1"
|
|
305
339
|
label={{ name: $T("constructor.props.name") }}
|
|
306
|
-
wrapperClass="w-1/10"
|
|
307
340
|
value={button.name}
|
|
308
341
|
onUpdate={(value) => updateContentProperty(columnIndex, index, "name", value)}
|
|
309
342
|
/>
|
|
310
|
-
|
|
311
|
-
|
|
343
|
+
<div class="relative min-w-32 flex-1">
|
|
344
|
+
<CommonSnippets
|
|
345
|
+
snippet="IconsLib"
|
|
346
|
+
initialValue={{
|
|
347
|
+
name: $T("constructor.props.table.type.icon"),
|
|
348
|
+
icon: column.content[index].data.icon,
|
|
349
|
+
updateProperty: (icon: string) => updateContentProperty(columnIndex, index, "icon", icon),
|
|
350
|
+
icons: { array: ICONS },
|
|
351
|
+
}}
|
|
352
|
+
{component}
|
|
353
|
+
{onPropertyChange}
|
|
354
|
+
/>
|
|
355
|
+
</div>
|
|
356
|
+
<div class="flex min-w-72 flex-[2] items-end gap-1">
|
|
312
357
|
<UI.Button
|
|
313
|
-
wrapperClass="w-8"
|
|
358
|
+
wrapperClass="w-8 shrink-0"
|
|
314
359
|
content={{ icon: InfoIcon, info: { text: $T("constructor.props.button.colors.hint"), side: "right" } }}
|
|
315
360
|
/>
|
|
316
361
|
<UI.Select
|
|
317
|
-
wrapperClass="w-
|
|
362
|
+
wrapperClass="min-w-0 flex-1 h-13.5"
|
|
318
363
|
label={{ name: $T("constructor.props.colors") }}
|
|
319
364
|
type="buttons"
|
|
320
365
|
options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max")}
|
|
@@ -329,23 +374,10 @@
|
|
|
329
374
|
}}
|
|
330
375
|
/>
|
|
331
376
|
</div>
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
<CommonSnippets
|
|
335
|
-
snippet="IconsLib"
|
|
336
|
-
initialValue={{
|
|
337
|
-
name: $T("constructor.props.table.type.icon"),
|
|
338
|
-
icon: column.content[index].data.icon,
|
|
339
|
-
updateProperty: (icon: string) => updateContentProperty(columnIndex, index, "icon", icon),
|
|
340
|
-
icons: { array: ICONS },
|
|
341
|
-
}}
|
|
342
|
-
{component}
|
|
343
|
-
{onPropertyChange}
|
|
344
|
-
/>
|
|
345
|
-
</div>
|
|
346
|
-
|
|
377
|
+
</div>
|
|
378
|
+
<div class="flex flex-wrap items-end gap-2">
|
|
347
379
|
<UI.Select
|
|
348
|
-
wrapperClass="w-1
|
|
380
|
+
wrapperClass="min-w-56 flex-1"
|
|
349
381
|
label={{ name: $T("constructor.props.header") }}
|
|
350
382
|
type="buttons"
|
|
351
383
|
value={$optionsStore.HEADER_OPTIONS.find((h) => h.value === button.eventHandler?.Header)}
|
|
@@ -357,7 +389,7 @@
|
|
|
357
389
|
}}
|
|
358
390
|
/>
|
|
359
391
|
<UI.Input
|
|
360
|
-
wrapperClass="w-1
|
|
392
|
+
wrapperClass="min-w-28 flex-1"
|
|
361
393
|
label={{ name: $T("constructor.props.argument") }}
|
|
362
394
|
value={button.eventHandler?.Argument}
|
|
363
395
|
onUpdate={(value) => {
|
|
@@ -367,7 +399,7 @@
|
|
|
367
399
|
}}
|
|
368
400
|
/>
|
|
369
401
|
<UI.Input
|
|
370
|
-
wrapperClass="w-2
|
|
402
|
+
wrapperClass="min-w-40 flex-[2]"
|
|
371
403
|
label={{ name: $T("constructor.props.table.keys") }}
|
|
372
404
|
value={button.eventHandler?.Variables.join(" ")}
|
|
373
405
|
maxlength={500}
|
|
@@ -381,8 +413,9 @@
|
|
|
381
413
|
</div>
|
|
382
414
|
{:else if content.type == "progressBar"}
|
|
383
415
|
{@const progressBar = content.data}
|
|
384
|
-
<div class="
|
|
416
|
+
<div class="flex flex-wrap items-end gap-2">
|
|
385
417
|
<UI.Input
|
|
418
|
+
wrapperClass="min-w-28 flex-1"
|
|
386
419
|
label={{ name: $T("constructor.props.table.progressBar.key") }}
|
|
387
420
|
value={progressBar.key}
|
|
388
421
|
help={{ regExp: /^[0-9a-zA-Z_.-]{0,16}$/ }}
|
|
@@ -398,20 +431,21 @@
|
|
|
398
431
|
}}
|
|
399
432
|
/>
|
|
400
433
|
<UI.Input
|
|
401
|
-
wrapperClass="w-1
|
|
434
|
+
wrapperClass="min-w-20 flex-1"
|
|
402
435
|
label={{ name: $T("constructor.props.min") }}
|
|
403
436
|
value={(progressBar?.minNum as number) ?? 0}
|
|
404
437
|
type="number"
|
|
405
438
|
onUpdate={(value) => updateContentProperty(columnIndex, index, "minNum", value as string)}
|
|
406
439
|
/>
|
|
407
440
|
<UI.Input
|
|
408
|
-
wrapperClass="w-1
|
|
441
|
+
wrapperClass="min-w-20 flex-1"
|
|
409
442
|
label={{ name: $T("constructor.props.max") }}
|
|
410
443
|
value={(progressBar?.maxNum as number) ?? 100}
|
|
411
444
|
type="number"
|
|
412
445
|
onUpdate={(value) => updateContentProperty(columnIndex, index, "maxNum", value as string)}
|
|
413
446
|
/>
|
|
414
447
|
<UI.Input
|
|
448
|
+
wrapperClass="min-w-24 flex-1"
|
|
415
449
|
label={{ name: $T("constructor.props.units") }}
|
|
416
450
|
value={progressBar?.units}
|
|
417
451
|
onUpdate={(value) => updateContentProperty(columnIndex, index, "units", value as string)}
|
|
@@ -419,30 +453,32 @@
|
|
|
419
453
|
</div>
|
|
420
454
|
{:else if !forConstructor && content.type == "image"}
|
|
421
455
|
{@const image = content.data}
|
|
422
|
-
<div class="flex items-end gap-2
|
|
423
|
-
<
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
456
|
+
<div class="flex flex-wrap items-end gap-2">
|
|
457
|
+
<div class="relative min-w-32">
|
|
458
|
+
<CommonSnippets
|
|
459
|
+
snippet="IconsLib"
|
|
460
|
+
initialValue={{
|
|
461
|
+
name: $T("constructor.props.table.columns.defaultIcon"),
|
|
462
|
+
icon: image?.defaultIcon ?? "",
|
|
463
|
+
updateProperty: (icon: string) => {
|
|
464
|
+
updateContentProperty(columnIndex, index, "defaultIcon", icon)
|
|
465
|
+
if (!image?.width || image?.width === "0rem") updateContentProperty(columnIndex, index, "width", "1rem")
|
|
466
|
+
if (!image?.width || image?.height === "0rem") updateContentProperty(columnIndex, index, "height", "1rem")
|
|
467
|
+
},
|
|
468
|
+
icons: { array: ICONS },
|
|
469
|
+
}}
|
|
470
|
+
{component}
|
|
471
|
+
{onPropertyChange}
|
|
472
|
+
/>
|
|
473
|
+
</div>
|
|
439
474
|
<UI.Input
|
|
475
|
+
wrapperClass="min-w-32 flex-1"
|
|
440
476
|
label={{ name: $T("constructor.props.table.columns.class") }}
|
|
441
477
|
value={image?.class}
|
|
442
478
|
onUpdate={(value) => updateContentProperty(columnIndex, index, "class", value)}
|
|
443
479
|
/>
|
|
444
480
|
<UI.Input
|
|
445
|
-
wrapperClass="w-
|
|
481
|
+
wrapperClass="min-w-20 flex-1"
|
|
446
482
|
label={{ name: $T("constructor.props.table.columns.image.width"), class: "px-0" }}
|
|
447
483
|
type="number"
|
|
448
484
|
number={{ minNum: 0, maxNum: 1000, step: 1 }}
|
|
@@ -450,7 +486,7 @@
|
|
|
450
486
|
onUpdate={(value) => updateContentProperty(columnIndex, index, "width", `${value ?? 0}rem`)}
|
|
451
487
|
/>
|
|
452
488
|
<UI.Input
|
|
453
|
-
wrapperClass="w-
|
|
489
|
+
wrapperClass="min-w-20 flex-1"
|
|
454
490
|
label={{ name: $T("constructor.props.table.columns.image.height"), class: "px-0" }}
|
|
455
491
|
type="number"
|
|
456
492
|
number={{ minNum: 0, maxNum: 1000, step: 1 }}
|
|
@@ -459,30 +495,6 @@
|
|
|
459
495
|
/>
|
|
460
496
|
</div>
|
|
461
497
|
{/if}
|
|
462
|
-
<Dragging
|
|
463
|
-
wrapperClass="absolute left-2 bottom-2"
|
|
464
|
-
container={settingsContainer[columnIndex]}
|
|
465
|
-
array={column.content}
|
|
466
|
-
elementIndex={index}
|
|
467
|
-
containerIndex={columnIndex}
|
|
468
|
-
onUpdate={(updatedArray, index) => {
|
|
469
|
-
if (index === columnIndex) {
|
|
470
|
-
const headers = [...component.properties.header]
|
|
471
|
-
headers[columnIndex].content = updatedArray
|
|
472
|
-
updateProperty("header", headers, component, onPropertyChange)
|
|
473
|
-
}
|
|
474
|
-
}}
|
|
475
|
-
/>
|
|
476
|
-
|
|
477
|
-
<UI.Button
|
|
478
|
-
wrapperClass="absolute right-2 bottom-2 w-8"
|
|
479
|
-
content={{ icon: ButtonDelete }}
|
|
480
|
-
onClick={() => {
|
|
481
|
-
const headers = [...(component.properties.header || [])]
|
|
482
|
-
;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
|
|
483
|
-
updateProperty("header", headers, component, onPropertyChange)
|
|
484
|
-
}}
|
|
485
|
-
/>
|
|
486
498
|
</div>
|
|
487
499
|
{/each}
|
|
488
500
|
{/if}
|
|
@@ -112,71 +112,75 @@
|
|
|
112
112
|
|
|
113
113
|
<div bind:this={itemsContainer} class="flex flex-col gap-2">
|
|
114
114
|
{#each component.properties.items || [] as tab, index}
|
|
115
|
-
<div id="item-{index}" class="flex
|
|
116
|
-
<
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
updateProperty("items", items, component, onPropertyChange)
|
|
133
|
-
}}
|
|
134
|
-
/>
|
|
135
|
-
<div class="relative flex w-40 gap-2">
|
|
136
|
-
<CommonSnippets
|
|
137
|
-
snippet="IconsLib"
|
|
138
|
-
initialValue={{
|
|
139
|
-
name: $T("constructor.props.table.type.icon"),
|
|
140
|
-
icon: component.properties.items[index].icon,
|
|
141
|
-
updateProperty: (icon: string) => {
|
|
115
|
+
<div id="item-{index}" class="flex flex-col gap-2 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-2">
|
|
116
|
+
<div class="flex items-center gap-2">
|
|
117
|
+
<UI.Dragging
|
|
118
|
+
wrapperClass="shrink-0"
|
|
119
|
+
container={itemsContainer}
|
|
120
|
+
array={component.properties.items}
|
|
121
|
+
elementIndex={index}
|
|
122
|
+
onUpdate={(updatedArray) => {
|
|
123
|
+
updateProperty("items", updatedArray, component, onPropertyChange)
|
|
124
|
+
}}
|
|
125
|
+
/>
|
|
126
|
+
<span class="flex-1"></span>
|
|
127
|
+
{#if component.properties.items.length > 1}
|
|
128
|
+
<UI.Button
|
|
129
|
+
wrapperClass="w-8 shrink-0"
|
|
130
|
+
content={{ icon: ButtonDelete }}
|
|
131
|
+
onClick={() => {
|
|
142
132
|
const items = [...(component.properties?.items || [])]
|
|
143
|
-
items
|
|
133
|
+
items.splice(index, 1)
|
|
134
|
+
items.forEach((_item: any, index: number) => {
|
|
135
|
+
items[index]["class"] = twMerge(items[index].class, initialWidth() ? `w-[${(1 / items.length) * 100}%]` : "w-auto")
|
|
136
|
+
updateProperty("items", items, component, onPropertyChange)
|
|
137
|
+
})
|
|
144
138
|
updateProperty("items", items, component, onPropertyChange)
|
|
145
|
-
}
|
|
146
|
-
|
|
139
|
+
}}
|
|
140
|
+
/>
|
|
141
|
+
{/if}
|
|
142
|
+
</div>
|
|
143
|
+
<div class="flex flex-wrap items-end gap-2">
|
|
144
|
+
<UI.Input
|
|
145
|
+
label={{ name: $T("constructor.props.optionname") }}
|
|
146
|
+
wrapperClass="min-w-32 flex-1"
|
|
147
|
+
value={tab.name}
|
|
148
|
+
onUpdate={(value) => {
|
|
149
|
+
const items = [...(component.properties?.items || [])]
|
|
150
|
+
items[index]["name"] = value
|
|
151
|
+
updateProperty("items", items, component, onPropertyChange)
|
|
147
152
|
}}
|
|
148
|
-
{component}
|
|
149
|
-
{onPropertyChange}
|
|
150
153
|
/>
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
154
|
+
<div class="relative min-w-32">
|
|
155
|
+
<CommonSnippets
|
|
156
|
+
snippet="IconsLib"
|
|
157
|
+
initialValue={{
|
|
158
|
+
name: $T("constructor.props.table.type.icon"),
|
|
159
|
+
icon: component.properties.items[index].icon,
|
|
160
|
+
updateProperty: (icon: string) => {
|
|
161
|
+
const items = [...(component.properties?.items || [])]
|
|
162
|
+
items[index]["icon"] = icon as string
|
|
163
|
+
updateProperty("items", items, component, onPropertyChange)
|
|
164
|
+
},
|
|
165
|
+
icons: { array: ICONS },
|
|
166
|
+
}}
|
|
167
|
+
{component}
|
|
168
|
+
{onPropertyChange}
|
|
169
|
+
/>
|
|
170
|
+
</div>
|
|
164
171
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
172
|
+
<UI.Switch
|
|
173
|
+
wrapperClass="min-w-24"
|
|
174
|
+
label={{ name: $T("constructor.props.disabled") }}
|
|
175
|
+
value={tab?.disabled ? 1 : 0}
|
|
176
|
+
options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
|
|
177
|
+
onChange={(value) => {
|
|
170
178
|
const items = [...(component.properties?.items || [])]
|
|
171
|
-
items
|
|
172
|
-
items.forEach((_item: any, index: number) => {
|
|
173
|
-
items[index]["class"] = twMerge(items[index].class, initialWidth() ? `w-[${(1 / items.length) * 100}%]` : "w-auto")
|
|
174
|
-
updateProperty("items", items, component, onPropertyChange)
|
|
175
|
-
})
|
|
179
|
+
items[index]["disabled"] = value
|
|
176
180
|
updateProperty("items", items, component, onPropertyChange)
|
|
177
181
|
}}
|
|
178
182
|
/>
|
|
179
|
-
|
|
183
|
+
</div>
|
|
180
184
|
</div>
|
|
181
185
|
{/each}
|
|
182
186
|
<div id="item-{component.properties.items.length}" class="min-h-4"></div>
|