poe-svelte-ui-lib 1.25.3 → 1.26.1

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.
Files changed (8) hide show
  1. package/dist/CommonSnippets.svelte +1 -1
  2. package/dist/ProgressBar/ProgressBarProps.svelte +70 -66
  3. package/dist/Select/Select.svelte +1 -1
  4. package/dist/Select/SelectProps.svelte +65 -61
  5. package/dist/Switch/SwitchProps.svelte +63 -58
  6. package/dist/Table/TableProps.svelte +90 -78
  7. package/dist/Tabs/TabsProps.svelte +60 -56
  8. package/package.json +1 -1
package/dist/CommonSnippets.svelte CHANGED
@@ -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()}
package/dist/ProgressBar/ProgressBarProps.svelte CHANGED
@@ -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 items-end gap-1 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-1.5">
78
- <UI.Dragging
79
- wrapperClass="w-9"
80
- container={itemsContainer}
81
- array={component.properties.items}
82
- elementIndex={index}
83
- onUpdate={(updatedArray) => {
84
- updateProperty("items", updatedArray, component, onPropertyChange)
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
- {:else}
113
- <UI.Input
114
- label={{ name: $T("constructor.props.optionvalue") }}
115
- wrapperClass="w-1/4"
116
- value={(component.properties.value || [])[index]?.Value}
117
- type="number"
118
- onUpdate={(value) => {
119
- const progresses = [
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.optionclass") }}
134
- wrapperClass="w-1/3"
135
- value={progress.class}
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]["class"] = value
106
+ progresses[index]["name"] = value
139
107
  updateProperty("items", progresses, component, onPropertyChange)
140
108
  }}
141
109
  />
142
- {/if}
143
-
144
- <UI.Button
145
- wrapperClass="w-8"
146
- content={{ icon: ButtonDelete }}
147
- onClick={() => {
148
- const progresses = [...(component.properties?.items || [])]
149
- progresses.splice(index, 1)
150
- updateProperty("items", progresses, component, onPropertyChange)
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>
package/dist/Select/Select.svelte CHANGED
@@ -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
  ${
package/dist/Select/SelectProps.svelte CHANGED
@@ -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 items-end justify-around gap-1.5 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-1.5">
195
- <UI.Dragging
196
- wrapperClass="w-9"
197
- container={itemsContainer}
198
- array={component.properties.options}
199
- elementIndex={index}
200
- onUpdate={(updatedArray) => {
201
- updateProperty("options", updatedArray, component, onPropertyChange)
202
- }}
203
- />
204
- <UI.Input
205
- label={{ name: $T("constructor.props.optionname") }}
206
- wrapperClass="w-3/10"
207
- value={option.name}
208
- onUpdate={(value) => {
209
- const options = [...(component.properties?.options || [])]
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[index]["class"] = (option as UI.IOption).value
211
+ options.splice(index, 1)
240
212
  updateProperty("options", options, component, onPropertyChange)
241
213
  }}
242
214
  />
243
- {:else}
215
+ </div>
216
+ <div class="flex flex-wrap items-end gap-2">
244
217
  <UI.Input
245
- label={{ name: $T("constructor.props.optionclass") }}
246
- wrapperClass="w-3/10"
247
- value={option.class}
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]["class"] = value as string
223
+ options[index]["name"] = value
251
224
  updateProperty("options", options, component, onPropertyChange)
252
225
  }}
253
226
  />
254
- {/if}
255
-
256
- <UI.Button
257
- wrapperClass="w-8"
258
- content={{ icon: ButtonDelete }}
259
- onClick={() => {
260
- const options = [...(component.properties?.options || [])]
261
- options.splice(index, 1)
262
- updateProperty("options", options, component, onPropertyChange)
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>
package/dist/Switch/SwitchProps.svelte CHANGED
@@ -109,64 +109,69 @@
109
109
  {/snippet}
110
110
 
111
111
  {#each component.properties.options || [] as option, index (option.id)}
112
- <div class="flex items-end justify-around gap-1.5 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-1.5">
113
- <UI.Input
114
- label={{ name: $T("constructor.props.optionname") }}
115
- wrapperClass="!w-3/10"
116
- value={option.name}
117
- maxlength={4}
118
- onUpdate={(value) => {
119
- const options = [...(component.properties?.options || [])]
120
- options[index]["name"] = value
121
- updateProperty("options", options, component, onPropertyChange)
122
- }}
123
- />
124
- <UI.Input
125
- label={{ name: $T("constructor.props.optionposition") }}
126
- wrapperClass="!w-3/10"
127
- value={option.value}
128
- type="number"
129
- number={{ minNum: 0, maxNum: 31, step: 1 }}
130
- onUpdate={(value) => {
131
- const options = [...(component.properties?.options || [])]
132
- options[index]["value"] = value
133
- updateProperty("options", options, component, onPropertyChange)
134
- }}
135
- />
136
- <UI.Select
137
- wrapperClass="w-80 h-14.5"
138
- label={{ name: $T("constructor.props.colors") }}
139
- type="buttons"
140
- options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max" && option.value !== "bg-gray")}
141
- value={$optionsStore.COLOR_OPTIONS.find((c) =>
142
- (c.value as string).includes(option.class.split(" ").find((cls: string) => cls.startsWith("bg-"))),
143
- )}
144
- onUpdate={(option) => {
145
- const options = [...(component.properties?.options || [])]
146
- options[index]["class"] = (option as UI.IOption).value
147
- updateProperty("options", options, component, onPropertyChange)
148
- }}
149
- />
150
- <UI.Switch
151
- wrapperClass=" w-1/10 bg-blue"
152
- label={{ name: $T("constructor.props.disabled") }}
153
- value={option.disabled}
154
- options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
155
- onChange={(value) => {
156
- const options = [...(component.properties?.options || [])]
157
- options[index]["disabled"] = value
158
- updateProperty("options", options, component, onPropertyChange)
159
- }}
160
- />
161
- <UI.Button
162
- wrapperClass="w-8"
163
- content={{ icon: ButtonDelete }}
164
- onClick={() => {
165
- const options = [...(component.properties?.options || [])]
166
- options.splice(index, 1)
167
- updateProperty("options", options, component, onPropertyChange)
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>
package/dist/Table/TableProps.svelte CHANGED
@@ -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-380 h-[85%]">
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 class="py-1.5 pl-9 grid grid-cols-[1fr_minmax(5rem,10rem)_minmax(10rem,21rem)_2rem_2rem] items-end gap-1.5">
176
+ <div
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
+ >
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="relative rounded-lg border border-(--hairline-color) bg-(--back-color)/60 p-1.5">
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 gap-2 mx-auto items-end" style="width: {forConstructor ? '65%' : '90%'}; ">
273
+ <div class="flex flex-wrap items-end gap-2">
243
274
  <UI.Input
244
- wrapperClass="w-1/4"
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 w-1/3 mx-auto gap-2">
303
+ <div class="flex flex-wrap items-end gap-2">
272
304
  <UI.Input
273
- wrapperClass="w-1/2"
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/2"
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
- <div class="flex w-[95%] mx-auto flex-wrap items-end justify-between gap-2">
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
- <div class="flex items-end gap-1">
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-80 h-14.5"
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
- <div class="relative mt-6 flex w-1/4 gap-2">
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/4"
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/10"
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/10"
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="w-3/5 flex mx-auto items-end gap-2">
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/2"
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/2"
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 w-[80%] mx-auto">
423
- <CommonSnippets
424
- snippet="IconsLib"
425
- initialValue={{
426
- name: $T("constructor.props.table.columns.defaultIcon"),
427
- icon: image?.defaultIcon ?? "",
428
- updateProperty: (icon: string) => {
429
- updateContentProperty(columnIndex, index, "defaultIcon", icon)
430
- if (!image?.width || image?.width === "0rem") updateContentProperty(columnIndex, index, "width", "1rem")
431
- if (!image?.width || image?.height === "0rem") updateContentProperty(columnIndex, index, "height", "1rem")
432
- },
433
- icons: { array: ICONS },
434
- }}
435
- {component}
436
- {onPropertyChange}
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-4/10"
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-4/10"
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}
package/dist/Tabs/TabsProps.svelte CHANGED
@@ -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 items-end justify-around gap-1.5 rounded-lg border border-(--hairline-color) bg-(--container-color)/60 p-1.5">
116
- <UI.Dragging
117
- wrapperClass="w-10"
118
- container={itemsContainer}
119
- array={component.properties.items}
120
- elementIndex={index}
121
- onUpdate={(updatedArray) => {
122
- updateProperty("items", updatedArray, component, onPropertyChange)
123
- }}
124
- />
125
- <UI.Input
126
- label={{ name: $T("constructor.props.optionname") }}
127
- wrapperClass="w-1/3"
128
- value={tab.name}
129
- onUpdate={(value) => {
130
- const items = [...(component.properties?.items || [])]
131
- items[index]["name"] = value
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[index]["icon"] = icon as string
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
- icons: { array: ICONS },
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
- </div>
152
-
153
- <UI.Switch
154
- wrapperClass="w-30"
155
- label={{ name: $T("constructor.props.disabled") }}
156
- value={tab?.disabled ? 1 : 0}
157
- options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
158
- onChange={(value) => {
159
- const items = [...(component.properties?.items || [])]
160
- items[index]["disabled"] = value
161
- updateProperty("items", items, component, onPropertyChange)
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
- {#if component.properties.items.length > 1}
166
- <UI.Button
167
- wrapperClass="w-8"
168
- content={{ icon: ButtonDelete }}
169
- onClick={() => {
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.splice(index, 1)
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
- {/if}
183
+ </div>
180
184
  </div>
181
185
  {/each}
182
186
  <div id="item-{component.properties.items.length}" class="min-h-4"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "poe-svelte-ui-lib",
3
- "version": "1.25.3",
3
+ "version": "1.26.1",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "scripts": {