poe-svelte-ui-lib 1.9.7 → 1.9.8

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 (14) hide show
  1. package/dist/Accordion/AccordionProps.svelte +6 -7
  2. package/dist/Button/ButtonProps.svelte +21 -21
  3. package/dist/CommonSnippets.svelte +3 -3
  4. package/dist/Input/InputProps.svelte +3 -4
  5. package/dist/Joystick/JoystickProps.svelte +1 -1
  6. package/dist/Map/MapProps.svelte +2 -7
  7. package/dist/ProgressBar/ProgressBarProps.svelte +2 -0
  8. package/dist/Select/SelectProps.svelte +1 -1
  9. package/dist/Slider/Slider.svelte +7 -0
  10. package/dist/Slider/SliderProps.svelte +3 -3
  11. package/dist/Switch/SwitchProps.svelte +14 -22
  12. package/dist/Table/TableProps.svelte +38 -144
  13. package/dist/Widget/WidgetProps.svelte +1 -1
  14. package/package.json +4 -4
package/dist/Accordion/AccordionProps.svelte CHANGED
@@ -95,10 +95,10 @@
95
95
  <div class="flex items-start justify-center gap-8">
96
96
  <div class="flex w-1/3 flex-col px-2">
97
97
  <CommonSnippets snippet="Access" {component} {onPropertyChange} />
98
- <CommonSnippets snippet="Label" {component} {onPropertyChange} />
99
- <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
100
98
  </div>
101
99
  <div class="flex w-1/3 flex-col px-2">
100
+ <CommonSnippets snippet="Label" {component} {onPropertyChange} />
101
+ <CommonSnippets snippet="LabelAlign" initialValue={initialAlign} {component} {onPropertyChange} />
102
102
  <CommonSnippets
103
103
  snippet="IconsLib"
104
104
  initialValue={{
@@ -120,12 +120,12 @@
120
120
  <div class="flex w-1/3 flex-col px-2">
121
121
  <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
122
122
  <CommonSnippets snippet="Access" {component} {onPropertyChange} />
123
-
123
+ <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
124
124
  {@render AccordionSize()}
125
- {@render AccordionIsOpen()}
126
125
  </div>
127
126
  <div class="flex w-1/3 flex-col px-2">
128
- <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
127
+ <CommonSnippets snippet="Label" {component} {onPropertyChange} />
128
+ <CommonSnippets snippet="LabelClass" initialValue={initialAlign} {component} {onPropertyChange} />
129
129
  <CommonSnippets
130
130
  snippet="IconsLib"
131
131
  initialValue={{
@@ -137,8 +137,7 @@
137
137
  {component}
138
138
  {onPropertyChange}
139
139
  />
140
- <CommonSnippets snippet="Label" {component} {onPropertyChange} />
141
- <CommonSnippets snippet="LabelClass" initialValue={initialAlign} {component} {onPropertyChange} />
140
+ {@render AccordionIsOpen()}
142
141
  </div>
143
142
  <div class="flex w-1/3 flex-col items-center gap-2 px-2">
144
143
  {@render AccordionBackgroundImage()}
package/dist/Button/ButtonProps.svelte CHANGED
@@ -152,27 +152,6 @@
152
152
  </div>
153
153
  <div class="flex w-1/3 flex-col px-2">
154
154
  {@render ButtonVariables()}
155
- <CommonSnippets
156
- snippet="IconsLib"
157
- initialValue={{
158
- name: $t("constructor.props.buttonIcon"),
159
- icon: component.properties.content.icon,
160
- updateProperty: (icon: string) => {
161
- updateProperty("content.icon", icon as string, component, onPropertyChange)
162
- if (component.properties.content.icon && !component.properties.content.name?.trim())
163
- updateProperty("componentClass", twMerge((component.properties as UI.IButtonProps).componentClass, "w-fit"), component, onPropertyChange)
164
- else if (!component.properties.content.icon && !component.properties.content.name?.trim())
165
- updateProperty("componentClass", twMerge((component.properties as UI.IButtonProps).componentClass, "w-full"), component, onPropertyChange)
166
- },
167
- icons: { array: ICONS },
168
- }}
169
- {component}
170
- {onPropertyChange}
171
- />
172
- </div>
173
- <div class="flex w-1/3 flex-col px-2">
174
- {@render ButtonName()}
175
- {@render ButtonHeight()}
176
155
  <CommonSnippets
177
156
  snippet="Colors"
178
157
  initialValue={{
@@ -201,6 +180,27 @@
201
180
  {onPropertyChange}
202
181
  />
203
182
  </div>
183
+ <div class="flex w-1/3 flex-col px-2">
184
+ {@render ButtonName()}
185
+ <CommonSnippets
186
+ snippet="IconsLib"
187
+ initialValue={{
188
+ name: $t("constructor.props.buttonIcon"),
189
+ icon: component.properties.content.icon,
190
+ updateProperty: (icon: string) => {
191
+ updateProperty("content.icon", icon as string, component, onPropertyChange)
192
+ if (component.properties.content.icon && !component.properties.content.name?.trim())
193
+ updateProperty("componentClass", twMerge((component.properties as UI.IButtonProps).componentClass, "w-fit"), component, onPropertyChange)
194
+ else if (!component.properties.content.icon && !component.properties.content.name?.trim())
195
+ updateProperty("componentClass", twMerge((component.properties as UI.IButtonProps).componentClass, "w-full"), component, onPropertyChange)
196
+ },
197
+ icons: { array: ICONS },
198
+ }}
199
+ {component}
200
+ {onPropertyChange}
201
+ />
202
+ {@render ButtonHeight()}
203
+ </div>
204
204
  </div>
205
205
  {:else}
206
206
  <div class="relative flex flex-row items-start justify-center">
package/dist/CommonSnippets.svelte CHANGED
@@ -212,14 +212,14 @@
212
212
  <div class="flex">
213
213
  <UI.Input
214
214
  label={{ name: $t("constructor.props.min") }}
215
- value={initialValue.number.minNum}
215
+ value={initialValue.number?.minNum}
216
216
  type="number"
217
217
  readonly={initialValue.bitMode}
218
218
  onUpdate={(value) => initialValue.updateProperty(value as number, "number.minNum")}
219
219
  />
220
220
  <UI.Input
221
221
  label={{ name: $t("constructor.props.max") }}
222
- value={initialValue.number.maxNum}
222
+ value={initialValue.number?.maxNum}
223
223
  type="number"
224
224
  readonly={initialValue.bitMode}
225
225
  onUpdate={(value) => initialValue.updateProperty(value as number, "number.maxNum")}
@@ -227,7 +227,7 @@
227
227
  {#if component.type !== "ProgressBar"}
228
228
  <UI.Input
229
229
  label={{ name: $t("constructor.props.step") }}
230
- value={initialValue.number.step}
230
+ value={initialValue.number?.step}
231
231
  type="number"
232
232
  readonly={initialValue.bitMode}
233
233
  onUpdate={(value) => initialValue.updateProperty(value as number, "number.step")}
package/dist/Input/InputProps.svelte CHANGED
@@ -18,7 +18,7 @@
18
18
  }>()
19
19
 
20
20
  let isValidRegExp = $state(true)
21
- let showRegExpLibrary = $state(true)
21
+ let showRegExpLibrary = $state(false)
22
22
  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
23
23
  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
24
24
 
@@ -153,7 +153,6 @@
153
153
  label={{ name: $t("constructor.props.regexp") }}
154
154
  value={component.properties.help.regExp}
155
155
  maxlength={150}
156
- help={{ info: $t("constructor.props.regexp.info") }}
157
156
  componentClass={isValidRegExp === false ? "!border-2 !border-red-400" : ""}
158
157
  onUpdate={(value) => updateProperty("help.regExp", value as string)}
159
158
  />
@@ -240,7 +239,7 @@
240
239
 
241
240
  {#snippet InputSettings()}
242
241
  <UI.Select
243
- label={{ name: $t("constructor.props.type") }}
242
+ wrapperClass="mt-5"
244
243
  options={$optionsStore.INPUT_SETTING_OPTIONS.map((o) =>
245
244
  (component.properties.type === "password" || component.properties.type === "number") && o.value == "help.copyButton" ? { ...o, disabled: true } : o,
246
245
  )}
@@ -364,8 +363,8 @@
364
363
  {#if forConstructor}
365
364
  <div class="relative flex flex-row items-start justify-center">
366
365
  <div class="flex w-1/3 flex-col px-2">
367
- {@render InputVariable()}
368
366
  {@render InputAccess()}
367
+ {@render InputVariable()}
369
368
  {@render InputType()}
370
369
  </div>
371
370
  <div class="flex w-1/3 flex-col px-2">
package/dist/Joystick/JoystickProps.svelte CHANGED
@@ -91,9 +91,9 @@
91
91
  <div>
92
92
  <div class="relative flex flex-row items-start justify-center">
93
93
  <div class="flex w-1/3 flex-col px-2">
94
+ <CommonSnippets snippet="Access" {component} {onPropertyChange} />
94
95
  <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
95
96
  <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
96
- <CommonSnippets snippet="Access" {component} {onPropertyChange} />
97
97
  </div>
98
98
  <div class="flex w-1/3 flex-col px-2">
99
99
  <CommonSnippets snippet="Label" {component} {onPropertyChange} />
package/dist/Map/MapProps.svelte CHANGED
@@ -1,13 +1,8 @@
1
1
  <script lang="ts">
2
2
  import { t } from "../locales/i18n"
3
3
  import { type UIComponent, type IGraphProps, updateProperty, type IUIComponentHandler } from "../types"
4
- import * as UI from ".."
5
- import Modal from "../Modal.svelte"
6
4
  import { ICONS } from "../icons"
7
- import Button from "../Button/Button.svelte"
8
- import CrossIcon from "../libIcons/CrossIcon.svelte"
9
5
  import { optionsStore } from "../options"
10
- import { twMerge } from "tailwind-merge"
11
6
  import { getContext } from "svelte"
12
7
  import CommonSnippets from "../CommonSnippets.svelte"
13
8
 
@@ -21,8 +16,6 @@
21
16
  forConstructor?: boolean
22
17
  }>()
23
18
 
24
- let showIconLib = $state(false)
25
-
26
19
  const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
27
20
  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
28
21
 
@@ -36,6 +29,7 @@
36
29
  {#if forConstructor}
37
30
  <div class="relative flex flex-row items-start justify-center">
38
31
  <div class="flex w-1/3 flex-col px-2">
32
+ <CommonSnippets snippet="Access" {component} {onPropertyChange} />
39
33
  <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
40
34
  </div>
41
35
  <div class="flex w-1/3 flex-col px-2">
@@ -59,6 +53,7 @@
59
53
  {:else}
60
54
  <div class="relative mb-2 flex flex-row items-start justify-center">
61
55
  <div class="flex w-1/3 flex-col px-2">
56
+ <CommonSnippets snippet="Access" {component} {onPropertyChange} />
62
57
  <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
63
58
  </div>
64
59
  <div class="flex w-1/3 flex-col px-2">
package/dist/ProgressBar/ProgressBarProps.svelte CHANGED
@@ -155,6 +155,7 @@
155
155
  {#if forConstructor}
156
156
  <div class="relative flex flex-row items-start justify-center">
157
157
  <div class="flex w-1/3 flex-col px-2">
158
+ <CommonSnippets snippet="Access" {component} {onPropertyChange} />
158
159
  <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
159
160
  {@render ProgressBarType()}
160
161
  </div>
@@ -184,6 +185,7 @@
184
185
  {:else}
185
186
  <div class="relative flex flex-row items-start justify-center">
186
187
  <div class="flex w-1/3 flex-col px-2">
188
+ <CommonSnippets snippet="Access" {component} {onPropertyChange} />
187
189
  <CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
188
190
  {@render ProgressBarType()}
189
191
  </div>
package/dist/Select/SelectProps.svelte CHANGED
@@ -252,11 +252,11 @@
252
252
  {#if forConstructor}
253
253
  <div class="relative mb-4 flex flex-row items-start justify-center">
254
254
  <div class="flex w-1/3 flex-col px-2">
255
+ <CommonSnippets snippet="Access" {component} {onPropertyChange} />
255
256
  <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
256
257
  {@render SelectArgument()}
257
258
  </div>
258
259
  <div class="flex w-1/3 flex-col px-2">
259
- <CommonSnippets snippet="Access" {component} {onPropertyChange} />
260
260
  {@render SelectType()}
261
261
  {@render SelectValueType()}
262
262
  </div>
package/dist/Slider/Slider.svelte CHANGED
@@ -113,6 +113,7 @@
113
113
  [&::-webkit-slider-thumb]:relative
114
114
  [&::-webkit-slider-thumb]:size-4
115
115
  [&::-webkit-slider-thumb]:cursor-pointer
116
+ ${disabled ? "[&::-webkit-slider-thumb]:cursor-not-allowed" : ""}
116
117
  [&::-webkit-slider-thumb]:rounded-full
117
118
  [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
118
119
  ${
@@ -124,6 +125,7 @@
124
125
  [&::-moz-range-thumb]:ml-[-0.4rem]
125
126
  [&::-moz-range-thumb]:size-4
126
127
  [&::-moz-range-thumb]:cursor-pointer
128
+ ${disabled ? "[&::-moz-range-thumb]:cursor-not-allowed" : ""}
127
129
  [&::-moz-range-thumb]:rounded-full
128
130
  [&::-moz-range-thumb]:shadow-[var(--focus-shadow),]
129
131
  [&::-moz-range-thumb]:ring-[6px]
@@ -160,6 +162,7 @@
160
162
  [&::-webkit-slider-thumb]:relative
161
163
  [&::-webkit-slider-thumb]:size-4
162
164
  [&::-webkit-slider-thumb]:cursor-pointer
165
+ ${disabled ? "[&::-webkit-slider-thumb]:cursor-not-allowed" : ""}
163
166
  [&::-webkit-slider-thumb]:rounded-full
164
167
  [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
165
168
  ${
@@ -171,6 +174,7 @@
171
174
  [&::-moz-range-thumb]:ml-[-0.4rem]
172
175
  [&::-moz-range-thumb]:size-4
173
176
  [&::-moz-range-thumb]:cursor-pointer
177
+ ${disabled ? "[&::-moz-range-thumb]:cursor-not-allowed" : ""}
174
178
  [&::-moz-range-thumb]:rounded-full
175
179
  [&::-moz-range-thumb]:shadow-[var(--focus-shadow),]
176
180
  [&::-moz-range-thumb]:ring-[6px]
@@ -193,6 +197,7 @@
193
197
  max={number.maxNum}
194
198
  step={number.step}
195
199
  bind:value={singleValue}
200
+ {disabled}
196
201
  oninput={() => onUpdate(singleValue)}
197
202
  class={twMerge(
198
203
  `h-8 w-full appearance-none overflow-hidden rounded-full accent-(--back-color)
@@ -205,6 +210,7 @@
205
210
  [&::-webkit-slider-thumb]:h-4
206
211
  [&::-webkit-slider-thumb]:w-4
207
212
  [&::-webkit-slider-thumb]:cursor-pointer
213
+ ${disabled ? "[&::-webkit-slider-thumb]:cursor-not-allowed" : ""}
208
214
  [&::-webkit-slider-thumb]:rounded-full
209
215
  [&::-webkit-slider-thumb]:shadow-[var(--focus-shadow),]
210
216
  ${
@@ -216,6 +222,7 @@
216
222
  [&::-moz-range-thumb]:ml-[-0.4rem]
217
223
  [&::-moz-range-thumb]:size-4
218
224
  [&::-moz-range-thumb]:cursor-pointer
225
+ ${disabled ? "[&::-moz-range-thumb]:cursor-not-allowed" : ""}
219
226
  [&::-moz-range-thumb]:rounded-full
220
227
  [&::-moz-range-thumb]:shadow-[var(--focus-shadow),]
221
228
  [&::-moz-range-thumb]:ring-[6px]
package/dist/Slider/SliderProps.svelte CHANGED
@@ -56,21 +56,21 @@
56
56
  {#if forConstructor}
57
57
  <div class="relative flex flex-row items-start justify-center">
58
58
  <div class="flex w-1/3 flex-col px-2">
59
+ <CommonSnippets snippet="Access" {component} {onPropertyChange} />
59
60
  <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
60
61
  <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
61
- <CommonSnippets snippet="Access" {component} {onPropertyChange} />
62
62
  </div>
63
63
  <div class="flex w-1/3 flex-col px-2">
64
64
  {@render SliderType()}
65
65
  <CommonSnippets
66
66
  snippet="MinMaxStep"
67
- initialValue="{{
67
+ initialValue={{
68
68
  number: component.properties.number,
69
69
  bitMode: component.properties.bitMode,
70
70
  updateProperty: (value: number, property: string) => {
71
71
  updateProperty(property, Number(value), component, onPropertyChange)
72
72
  },
73
- }}}"
73
+ }}
74
74
  {component}
75
75
  {onPropertyChange}
76
76
  />
package/dist/Switch/SwitchProps.svelte CHANGED
@@ -36,16 +36,18 @@
36
36
  {/snippet}
37
37
 
38
38
  {#snippet SwitchCaptions()}
39
- <UI.Input
40
- label={{ name: $t("constructor.props.caption.left") }}
41
- value={component.properties.label.captionLeft}
42
- onUpdate={(value) => updateProperty("label.captionLeft", value as string, component, onPropertyChange)}
43
- />
44
- <UI.Input
45
- label={{ name: $t("constructor.props.caption.right") }}
46
- value={component.properties.label.captionRight}
47
- onUpdate={(value) => updateProperty("label.captionRight", value as string, component, onPropertyChange)}
48
- />
39
+ {#if component.properties.type == "horizontal"}
40
+ <UI.Input
41
+ label={{ name: $t("constructor.props.caption.left") }}
42
+ value={component.properties.label.captionLeft}
43
+ onUpdate={(value) => updateProperty("label.captionLeft", value as string, component, onPropertyChange)}
44
+ />
45
+ <UI.Input
46
+ label={{ name: $t("constructor.props.caption.right") }}
47
+ value={component.properties.label.captionRight}
48
+ onUpdate={(value) => updateProperty("label.captionRight", value as string, component, onPropertyChange)}
49
+ />
50
+ {/if}
49
51
  {/snippet}
50
52
 
51
53
  {#snippet SwitchDisabled()}
@@ -62,15 +64,6 @@
62
64
  />
63
65
  {/snippet}
64
66
 
65
- {#snippet SwitchColors()}
66
- <UI.Select
67
- wrapperClass="!h-14"
68
- label={{ name: $t("constructor.props.colors") }}
69
- type="buttons"
70
- options={$optionsStore.COLOR_OPTIONS.filter((option) => option.value !== "bg-max" && option.value !== "bg-gray")}
71
- />
72
- {/snippet}
73
-
74
67
  {#snippet SwitchBitmode()}
75
68
  <UI.Switch
76
69
  wrapperClass="bg-blue"
@@ -193,9 +186,9 @@
193
186
  {#if forConstructor}
194
187
  <div class="relative flex flex-row items-start justify-center">
195
188
  <div class="flex w-1/3 flex-col px-2">
189
+ <CommonSnippets snippet="Access" {component} {onPropertyChange} />
196
190
  <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
197
191
  <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
198
- <CommonSnippets snippet="Access" {component} {onPropertyChange} />
199
192
  </div>
200
193
 
201
194
  <div class="flex w-1/3 flex-col px-2">
@@ -258,11 +251,10 @@
258
251
  </div>
259
252
  <div class="flex w-1/3 flex-col px-2">
260
253
  <CommonSnippets snippet="Label" {component} {onPropertyChange} />
261
-
254
+ {@render SwitchType()}
262
255
  {#if !component.properties.bitMode}
263
256
  {@render SwitchCaptions()}
264
257
  {/if}
265
- {@render SwitchType()}
266
258
  </div>
267
259
  <div class="flex w-1/3 flex-col px-2">
268
260
  {@render SwitchHeight()}
package/dist/Table/TableProps.svelte CHANGED
@@ -230,9 +230,9 @@
230
230
  <div class="flex flex-col gap-2" bind:this={settingsContainer[columnIndex]}>
231
231
  {#if typeof column.content !== "function"}
232
232
  {#each column.content as content, index}
233
- {#if content.type == "text"}
234
- {@const text = content.data}
235
- <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
233
+ <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
234
+ {#if content.type == "text"}
235
+ {@const text = content.data}
236
236
  <div class="flex gap-2 mx-auto items-end" style="width: {forConstructor ? '65%' : '90%'}; ">
237
237
  <UI.Input
238
238
  wrapperClass="w-1/4"
@@ -245,7 +245,6 @@
245
245
  "content",
246
246
  column.content.map((textItem: any, i: number) => (i == index ? { ...textItem, data: { ...textItem.data, key: value } } : textItem)),
247
247
  )
248
- // updateTableBody()
249
248
  }}
250
249
  />
251
250
  <UI.Select
@@ -259,35 +258,8 @@
259
258
  onUpdate={(value) => changeColumnSettings(value, columnIndex, index)}
260
259
  />
261
260
  </div>
262
-
263
- <Dragging
264
- wrapperClass="absolute left-2 bottom-2"
265
- container={settingsContainer[columnIndex]}
266
- array={column.content}
267
- elementIndex={index}
268
- containerIndex={columnIndex}
269
- onUpdate={(updatedArray, index) => {
270
- if (index === columnIndex) {
271
- const headers = [...component.properties.header]
272
- headers[columnIndex].content = updatedArray
273
- updateProperty("header", headers, component, onPropertyChange)
274
- }
275
- }}
276
- />
277
-
278
- <UI.Button
279
- wrapperClass="absolute right-2 bottom-2 w-8"
280
- content={{ icon: ButtonDelete }}
281
- onClick={() => {
282
- const headers = [...(component.properties.header || [])]
283
- ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
284
- updateProperty("header", headers, component, onPropertyChange)
285
- }}
286
- />
287
- </div>
288
- {:else if content.type == "select"}
289
- {@const select = content.data}
290
- <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
261
+ {:else if content.type == "select"}
262
+ {@const select = content.data}
291
263
  <div class="flex w-1/3 mx-auto gap-2">
292
264
  <UI.Input
293
265
  wrapperClass="w-1/2"
@@ -316,35 +288,8 @@
316
288
  }}
317
289
  />
318
290
  </div>
319
-
320
- <Dragging
321
- wrapperClass="absolute left-2 bottom-2"
322
- container={settingsContainer[columnIndex]}
323
- array={column.content}
324
- elementIndex={index}
325
- containerIndex={columnIndex}
326
- onUpdate={(updatedArray, index) => {
327
- if (index === columnIndex) {
328
- const headers = [...component.properties.header]
329
- headers[columnIndex].content = updatedArray
330
- updateProperty("header", headers, component, onPropertyChange)
331
- }
332
- }}
333
- />
334
-
335
- <UI.Button
336
- wrapperClass="absolute right-2 bottom-2 w-8"
337
- content={{ icon: ButtonDelete }}
338
- onClick={() => {
339
- const headers = [...(component.properties.header || [])]
340
- ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
341
- updateProperty("header", headers, component, onPropertyChange)
342
- }}
343
- />
344
- </div>
345
- {:else if content.type == "button"}
346
- {@const button = content.data}
347
- <div id={`item-${index}-${columnIndex}`} class="relative w-full bg-(--container-color)/50 rounded-2xl p-2">
291
+ {:else if content.type == "button"}
292
+ {@const button = content.data}
348
293
  <div class="flex w-[95%] mx-auto items-end justify-between gap-2">
349
294
  <UI.Input
350
295
  label={{ name: $t("constructor.props.name") }}
@@ -415,34 +360,8 @@
415
360
  }}
416
361
  />
417
362
  </div>
418
-
419
- <UI.Button
420
- wrapperClass="absolute right-2 bottom-2 w-8"
421
- content={{ icon: ButtonDelete }}
422
- onClick={() => {
423
- const headers = [...(component.properties.header || [])]
424
- ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
425
- updateProperty("header", headers, component, onPropertyChange)
426
- }}
427
- />
428
- <Dragging
429
- wrapperClass="absolute left-2 bottom-2"
430
- container={settingsContainer[columnIndex]}
431
- array={column.content}
432
- elementIndex={index}
433
- containerIndex={columnIndex}
434
- onUpdate={(updatedArray, index) => {
435
- if (index === columnIndex) {
436
- const headers = [...component.properties.header]
437
- headers[columnIndex].content = updatedArray
438
- updateProperty("header", headers, component, onPropertyChange)
439
- }
440
- }}
441
- />
442
- </div>
443
- {:else if content.type == "progressBar"}
444
- {@const progressBar = content.data}
445
- <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
363
+ {:else if content.type == "progressBar"}
364
+ {@const progressBar = content.data}
446
365
  <div class="w-3/5 flex mx-auto items-end gap-2">
447
366
  <UI.Input
448
367
  label={{ name: $t("constructor.props.table.progressBar.key") }}
@@ -477,34 +396,8 @@
477
396
  onUpdate={(value) => updateContentProperty(columnIndex, index, "units", value as string)}
478
397
  />
479
398
  </div>
480
-
481
- <Dragging
482
- wrapperClass="absolute left-2 bottom-2"
483
- container={settingsContainer[columnIndex]}
484
- array={column.content}
485
- elementIndex={index}
486
- containerIndex={columnIndex}
487
- onUpdate={(updatedArray, index) => {
488
- if (index === columnIndex) {
489
- const headers = [...component.properties.header]
490
- headers[columnIndex].content = updatedArray
491
- updateProperty("header", headers, component, onPropertyChange)
492
- }
493
- }}
494
- />
495
- <UI.Button
496
- wrapperClass="absolute right-2 bottom-2 w-8"
497
- content={{ icon: ButtonDelete }}
498
- onClick={() => {
499
- const headers = [...(component.properties.header || [])]
500
- ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
501
- updateProperty("header", headers, component, onPropertyChange)
502
- }}
503
- />
504
- </div>
505
- {:else if !forConstructor && content.type == "image"}
506
- {@const image = content.data}
507
- <div id={`item-${index}-${columnIndex}`} class="relative bg-(--container-color)/50 rounded-2xl p-2">
399
+ {:else if !forConstructor && content.type == "image"}
400
+ {@const image = content.data}
508
401
  <div class="flex items-end gap-2 w-[80%] mx-auto">
509
402
  <CommonSnippets
510
403
  snippet="IconsLib"
@@ -544,35 +437,36 @@
544
437
  onUpdate={(value) => updateContentProperty(columnIndex, index, "height", `${value ?? 0}rem`)}
545
438
  />
546
439
  </div>
547
- <Dragging
548
- wrapperClass="absolute left-2 bottom-2"
549
- container={settingsContainer[columnIndex]}
550
- array={column.content}
551
- elementIndex={index}
552
- containerIndex={columnIndex}
553
- onUpdate={(updatedArray, index) => {
554
- if (index === columnIndex) {
555
- const headers = [...component.properties.header]
556
- headers[columnIndex].content = updatedArray
557
- updateProperty("header", headers, component, onPropertyChange)
558
- }
559
- }}
560
- />
561
- <UI.Button
562
- wrapperClass="absolute right-2 bottom-2 w-8"
563
- content={{ icon: ButtonDelete }}
564
- onClick={() => {
565
- const headers = [...(component.properties.header || [])]
566
- ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
440
+ {/if}
441
+ <Dragging
442
+ wrapperClass="absolute left-2 bottom-2"
443
+ container={settingsContainer[columnIndex]}
444
+ array={column.content}
445
+ elementIndex={index}
446
+ containerIndex={columnIndex}
447
+ onUpdate={(updatedArray, index) => {
448
+ if (index === columnIndex) {
449
+ const headers = [...component.properties.header]
450
+ headers[columnIndex].content = updatedArray
567
451
  updateProperty("header", headers, component, onPropertyChange)
568
- }}
569
- />
570
- </div>
571
- {/if}
452
+ }
453
+ }}
454
+ />
455
+
456
+ <UI.Button
457
+ wrapperClass="absolute right-2 bottom-2 w-8"
458
+ content={{ icon: ButtonDelete }}
459
+ onClick={() => {
460
+ const headers = [...(component.properties.header || [])]
461
+ ;((headers as ITableHeader<object>[])[columnIndex].content as ITableContent<object>[]).splice(index, 1)
462
+ updateProperty("header", headers, component, onPropertyChange)
463
+ }}
464
+ />
465
+ </div>
572
466
  {/each}
573
467
  {/if}
574
- <div id={`item-${column.content.length}-${columnIndex}`} class="min-h-2"></div>
575
468
  </div>
469
+ <div id={`item-${column.content.length}-${columnIndex}`} class="min-h-2"></div>
576
470
  </div>
577
471
  {/each}
578
472
  <div id={`column-${component.properties.header.length}`} class="min-h-4"></div>
@@ -625,8 +519,8 @@
625
519
  {#if forConstructor}
626
520
  <div class="relative flex flex-row items-start justify-center pb-4">
627
521
  <div class="flex w-1/3 flex-col px-2">
628
- <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
629
522
  <CommonSnippets snippet="Access" {component} {onPropertyChange} />
523
+ <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
630
524
  {@render TableStashData()}
631
525
  {#if component.properties.dataBuffer.stashData}
632
526
  <div class="flex items-end">
package/dist/Widget/WidgetProps.svelte CHANGED
@@ -161,9 +161,9 @@
161
161
  {#if forConstructor}
162
162
  <div class="flex mb-4 items-start justify-center gap-8">
163
163
  <div class="flex w-1/3 flex-col px-2">
164
+ <CommonSnippets snippet="Access" {component} {onPropertyChange} />
164
165
  <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
165
166
  <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
166
- <CommonSnippets snippet="Access" {component} {onPropertyChange} />
167
167
  </div>
168
168
  <div class="flex w-1/3 flex-col px-2">
169
169
  <CommonSnippets snippet="Label" {component} {onPropertyChange} />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "poe-svelte-ui-lib",
3
- "version": "1.9.7",
3
+ "version": "1.9.8",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "scripts": {
@@ -37,13 +37,13 @@
37
37
  },
38
38
  "devDependencies": {
39
39
  "@sveltejs/adapter-static": "^3.0.10",
40
- "@sveltejs/kit": "^2.57.0",
40
+ "@sveltejs/kit": "^2.57.1",
41
41
  "@sveltejs/package": "^2.5.7",
42
42
  "@sveltejs/vite-plugin-svelte": "^7.0.0",
43
43
  "@tailwindcss/vite": "^4.2.2",
44
44
  "@types/maplibre-gl": "^1.14.0",
45
- "@types/node": "^25.5.2",
46
- "prettier": "^3.8.1",
45
+ "@types/node": "^25.6.0",
46
+ "prettier": "^3.8.2",
47
47
  "prettier-plugin-svelte": "^3.5.1",
48
48
  "prettier-plugin-tailwindcss": "^0.7.2",
49
49
  "publint": "^0.3.18",