poe-svelte-ui-lib 1.1.16 → 1.1.17

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.
@@ -24,7 +24,7 @@
24
24
  const initialType = $derived($optionsStore.ACCORDION_TYPE_OPTIONS.find((t) => t.value === component.properties.outline))
25
25
 
26
26
  const initialAlign = $derived(
27
- $optionsStore.ALIGN_OPTIONS.find((a) =>
27
+ $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
28
28
  (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
29
29
  ),
30
30
  )
@@ -57,7 +57,7 @@
57
57
  label={{ name: $t('constructor.props.align') }}
58
58
  type="buttons"
59
59
  value={initialAlign}
60
- options={$optionsStore.ALIGN_OPTIONS}
60
+ options={$optionsStore.TEXT_ALIGN_OPTIONS}
61
61
  onUpdate={(option) => updateProperty('label.class', option.value as string, component, onPropertyChange)}
62
62
  />
63
63
  </div>
@@ -12,7 +12,7 @@
12
12
  disabled = false,
13
13
  content = {
14
14
  name: '',
15
- info: '',
15
+ info: { text: '', side: 'top' },
16
16
  icon: null,
17
17
  },
18
18
  keyBind,
@@ -64,7 +64,7 @@
64
64
  })
65
65
  </script>
66
66
 
67
- <div class={twMerge(`relative flex w-full flex-col items-center`, wrapperClass)}>
67
+ <div class={twMerge(`relative flex w-full flex-col items-center `, wrapperClass)}>
68
68
  <div class="relative flex w-full grow items-center">
69
69
  <button
70
70
  {id}
@@ -79,10 +79,10 @@
79
79
  {disabled}
80
80
  aria-label={content.name}
81
81
  onmouseenter={() => {
82
- if (content.info) showInfo = true
82
+ if (content.info?.text) showInfo = true
83
83
  }}
84
84
  onmouseleave={() => {
85
- if (content.info) showInfo = false
85
+ if (content.info?.text) showInfo = false
86
86
  }}
87
87
  >
88
88
  <span class=" flex flex-row items-center justify-center gap-2">
@@ -113,16 +113,42 @@
113
113
  </span>
114
114
  </button>
115
115
 
116
- {#if showInfo}
116
+ {#if showInfo && content.info?.side === 'top'}
117
117
  <div
118
118
  transition:fly={{ y: -15, duration: 300 }}
119
- class="absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
119
+ class="absolute bottom-full left-1/2 z-50 mb-2 max-w-min min-w-fit rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
120
120
  style="transform: translateX(-50%);"
121
121
  >
122
- {content.info}
123
- <!-- Треугольная стрелка -->
122
+ {content.info?.text}
124
123
  <div class="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform bg-(--container-color)"></div>
125
124
  </div>
125
+ {:else if showInfo && content.info?.side === 'bottom'}
126
+ <div
127
+ transition:fly={{ y: 15, duration: 300 }}
128
+ class="absolute top-full left-1/2 z-50 mt-2 max-w-min min-w-fit rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
129
+ style="transform: translateX(-50%);"
130
+ >
131
+ {content.info?.text}
132
+ <div class="absolute bottom-full left-1/2 h-2 w-2 -translate-x-1/2 translate-y-1/2 rotate-45 transform bg-(--container-color)"></div>
133
+ </div>
134
+ {:else if showInfo && content.info?.side === 'left'}
135
+ <div
136
+ transition:fly={{ x: 15, duration: 300 }}
137
+ class="absolute top-1/2 right-full z-50 mr-2 max-w-min min-w-fit rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
138
+ style="transform: translateY(-50%);"
139
+ >
140
+ {content.info?.text}
141
+ <div class="absolute top-1/2 -right-2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform bg-(--container-color)"></div>
142
+ </div>
143
+ {:else if showInfo && content.info?.side === 'right'}
144
+ <div
145
+ transition:fly={{ x: -15, duration: 300 }}
146
+ class="absolute top-1/2 left-full z-50 ml-2 max-w-min min-w-fit rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
147
+ style="transform: translateY(-50%);"
148
+ >
149
+ {content.info?.text}
150
+ <div class="absolute top-1/2 -left-2 h-2 w-2 translate-x-1/2 -translate-y-1/2 -rotate-45 transform bg-(--container-color)"></div>
151
+ </div>
126
152
  {/if}
127
153
  </div>
128
154
  </div>
@@ -153,8 +153,8 @@
153
153
  />
154
154
  <UI.Input
155
155
  label={{ name: $t('constructor.props.info') }}
156
- value={component.properties.content.info}
157
- onUpdate={(value) => updateProperty('content.info', value as string, component, onPropertyChange)}
156
+ value={component.properties.content.info.text}
157
+ onUpdate={(value) => updateProperty('content.info.text', value as string, component, onPropertyChange)}
158
158
  />
159
159
  <UI.Input
160
160
  label={{ name: $t('constructor.props.svgicon') }}
@@ -20,7 +20,7 @@
20
20
  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
21
21
 
22
22
  const initialAlign = $derived(
23
- $optionsStore.ALIGN_OPTIONS.find((a) =>
23
+ $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
24
24
  (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
25
25
  ),
26
26
  )
@@ -59,7 +59,7 @@
59
59
  label={{ name: $t('constructor.props.align') }}
60
60
  type="buttons"
61
61
  value={initialAlign}
62
- options={$optionsStore.ALIGN_OPTIONS}
62
+ options={$optionsStore.TEXT_ALIGN_OPTIONS}
63
63
  onUpdate={(option) => updateProperty('label.class', option.value as string, component, onPropertyChange)}
64
64
  />
65
65
  </div>
@@ -27,7 +27,7 @@
27
27
  )
28
28
 
29
29
  const initialAlign = $derived(
30
- $optionsStore.ALIGN_OPTIONS.find((a) =>
30
+ $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
31
31
  (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
32
32
  ),
33
33
  )
@@ -178,7 +178,7 @@
178
178
  label={{ name: $t('constructor.props.align') }}
179
179
  type="buttons"
180
180
  value={initialAlign}
181
- options={$optionsStore.ALIGN_OPTIONS}
181
+ options={$optionsStore.TEXT_ALIGN_OPTIONS}
182
182
  onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value))}
183
183
  />
184
184
  <UI.Select
@@ -20,7 +20,7 @@
20
20
  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
21
21
 
22
22
  const initialAlign = $derived(
23
- $optionsStore.ALIGN_OPTIONS.find((a) =>
23
+ $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
24
24
  (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
25
25
  ),
26
26
  )
@@ -96,7 +96,7 @@
96
96
  label={{ name: $t('constructor.props.align') }}
97
97
  type="buttons"
98
98
  value={initialAlign}
99
- options={$optionsStore.ALIGN_OPTIONS}
99
+ options={$optionsStore.TEXT_ALIGN_OPTIONS}
100
100
  onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), component, onPropertyChange)}
101
101
  />
102
102
  <UI.Select
@@ -53,7 +53,7 @@
53
53
  )
54
54
 
55
55
  const initialAlign = $derived(
56
- $optionsStore.ALIGN_OPTIONS.find((a) =>
56
+ $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
57
57
  (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
58
58
  ),
59
59
  )
@@ -143,7 +143,7 @@
143
143
  label={{ name: $t('constructor.props.align') }}
144
144
  type="buttons"
145
145
  value={initialAlign}
146
- options={$optionsStore.ALIGN_OPTIONS}
146
+ options={$optionsStore.TEXT_ALIGN_OPTIONS}
147
147
  onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), component, onPropertyChange)}
148
148
  />
149
149
  </div>
@@ -20,7 +20,7 @@
20
20
  let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
21
21
 
22
22
  const initialAlign = $derived(
23
- $optionsStore.ALIGN_OPTIONS.find((a) =>
23
+ $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
24
24
  (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
25
25
  ),
26
26
  )
@@ -94,7 +94,7 @@
94
94
  label={{ name: $t('constructor.props.align') }}
95
95
  type="buttons"
96
96
  value={initialAlign}
97
- options={$optionsStore.ALIGN_OPTIONS}
97
+ options={$optionsStore.TEXT_ALIGN_OPTIONS}
98
98
  onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), component, onPropertyChange)}
99
99
  />
100
100
  <UI.Select
@@ -28,7 +28,7 @@
28
28
  )
29
29
 
30
30
  const initialAlign = $derived(
31
- $optionsStore.ALIGN_OPTIONS.find((a) =>
31
+ $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
32
32
  (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
33
33
  ),
34
34
  )
@@ -51,6 +51,19 @@
51
51
  updateProperty('body', newBody, component, onPropertyChange)
52
52
  }
53
53
 
54
+ const handleImageUpload = (columnIndex: number, event: Event) => {
55
+ const target = event.target as HTMLInputElement
56
+ const file = target.files?.[0]
57
+ if (!file) return
58
+
59
+ const reader = new FileReader()
60
+ reader.onload = () => {
61
+ const base64WithPrefix = reader.result as string
62
+ updateTableHeader(columnIndex, 'image', { ['src']: base64WithPrefix })
63
+ }
64
+ reader.readAsDataURL(file)
65
+ }
66
+
54
67
  const updateButtonProperty = (columnIndex: number, buttonIndex: number, field: string, value: any) => {
55
68
  const headers = [...component.properties.header]
56
69
  const buttons = [...headers[columnIndex].buttons]
@@ -101,7 +114,7 @@
101
114
  label={{ name: $t('constructor.props.align') }}
102
115
  type="buttons"
103
116
  value={initialAlign}
104
- options={$optionsStore.ALIGN_OPTIONS}
117
+ options={$optionsStore.TEXT_ALIGN_OPTIONS}
105
118
  onUpdate={(option) => updateProperty('label.class', twMerge(component.properties.label.class, option.value), component, onPropertyChange)}
106
119
  />
107
120
  </div>
@@ -160,6 +173,12 @@
160
173
  value={column.sortable ? 2 : 1}
161
174
  onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
162
175
  />
176
+ <UI.Switch
177
+ wrapperClass="w-2/10"
178
+ label={{ name: $t('constructor.props.copy') }}
179
+ value={column.overflow?.copy ? 2 : 1}
180
+ onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value === 2 })}
181
+ />
163
182
  <UI.Button
164
183
  wrapperClass="w-8"
165
184
  content={{ icon: ButtonAdd, info: $t('constructor.props.table.addaction') }}
@@ -307,59 +326,113 @@
307
326
  </div>
308
327
 
309
328
  {#each component.properties.header as column, columnIndex (columnIndex)}
310
- <div class="mr-2 flex items-end justify-around gap-6">
311
- <UI.Input
312
- label={{ name: $t('constructor.props.table.columns.key') }}
313
- value={column.key}
314
- help={{ regExp: /^[0-9a-zA-Z_-]{0,16}$/ }}
315
- onUpdate={(value) => {
316
- updateTableHeader(columnIndex, 'key', value)
317
- updateTableBody()
318
- }}
319
- />
320
- <UI.Input
321
- label={{ name: $t('constructor.props.table.columns.label') }}
322
- value={column.label.name}
323
- onUpdate={(value) => {
324
- updateTableHeader(columnIndex, 'label', { ['name']: value })
325
- }}
326
- />
327
- <UI.Input
328
- label={{ name: $t('constructor.props.table.columns.width') }}
329
- type="number"
330
- value={Number(column.width.replace('%', ''))}
331
- onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
332
- />
333
- <UI.Switch
334
- wrapperClass="w-2/10"
335
- label={{ name: $t('constructor.props.table.columns.sortable') }}
336
- value={column.sortable ? 2 : 1}
337
- onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
338
- />
339
- <UI.Button
340
- wrapperClass="w-8"
341
- content={{ icon: ButtonAdd, info: $t('constructor.props.table.addaction') }}
342
- onClick={() => {
343
- const newButton = {
344
- name: `button${(component.properties.header[columnIndex].buttons ? component.properties.header[columnIndex].buttons.length : 0) + 1}`,
345
- class: 'bg-blue',
346
- eventHandler: { Header: 'SET', Argument: 'Save', Variables: [] },
347
- onClick: () => {},
348
- }
349
- const buttons = [...(component.properties.header[columnIndex].buttons || []), newButton]
350
- updateTableHeader(columnIndex, 'buttons', buttons)
351
- }}
352
- />
353
- <UI.Button
354
- wrapperClass="w-8"
355
- content={{ icon: ButtonDelete }}
356
- onClick={() => {
357
- const headers = [...(component.properties.header || [])]
358
- headers.splice(columnIndex, 1)
359
- updateProperty('header', headers, component, onPropertyChange)
360
- }}
361
- />
329
+ <div class="mb-5">
330
+ <div class="mr-2 flex items-end justify-around gap-6">
331
+ <UI.Input
332
+ label={{ name: $t('constructor.props.table.columns.key') }}
333
+ value={column.key}
334
+ help={{ regExp: /^[0-9a-zA-Z_-]{0,16}$/ }}
335
+ onUpdate={(value) => {
336
+ updateTableHeader(columnIndex, 'key', value)
337
+ updateTableBody()
338
+ }}
339
+ />
340
+ <UI.Input
341
+ label={{ name: $t('constructor.props.table.columns.label') }}
342
+ value={column.label.name}
343
+ onUpdate={(value) => {
344
+ updateTableHeader(columnIndex, 'label', { ['name']: value })
345
+ }}
346
+ />
347
+ <UI.Input
348
+ label={{ name: $t('constructor.props.table.columns.width') }}
349
+ type="number"
350
+ value={Number(column.width.replace('%', ''))}
351
+ onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
352
+ />
353
+ <UI.Switch
354
+ wrapperClass="w-2/10"
355
+ label={{ name: $t('constructor.props.table.columns.sortable') }}
356
+ value={column.sortable ? 2 : 1}
357
+ onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
358
+ />
359
+ <UI.Switch
360
+ wrapperClass="w-2/10"
361
+ label={{ name: $t('constructor.props.copy') }}
362
+ value={column.overflow?.copy ? 2 : 1}
363
+ onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value === 2 })}
364
+ />
365
+ <UI.Button
366
+ wrapperClass="w-8"
367
+ content={{ icon: ButtonAdd, info: $t('constructor.props.table.addaction') }}
368
+ onClick={() => {
369
+ const newButton = {
370
+ name: `button${(component.properties.header[columnIndex].buttons ? component.properties.header[columnIndex].buttons.length : 0) + 1}`,
371
+ class: 'bg-blue',
372
+ eventHandler: { Header: 'SET', Argument: 'Save', Variables: [] },
373
+ onClick: () => {},
374
+ }
375
+ const buttons = [...(component.properties.header[columnIndex].buttons || []), newButton]
376
+ updateTableHeader(columnIndex, 'buttons', buttons)
377
+ }}
378
+ />
379
+ <UI.Button
380
+ wrapperClass="w-8"
381
+ content={{ icon: ButtonDelete }}
382
+ onClick={() => {
383
+ const headers = [...(component.properties.header || [])]
384
+ headers.splice(columnIndex, 1)
385
+ updateProperty('header', headers, component, onPropertyChange)
386
+ }}
387
+ />
388
+ </div>
389
+ <div class="mr-2 flex items-end justify-around gap-6">
390
+ <UI.Select
391
+ label={{ name: $t('constructor.props.align') }}
392
+ type="buttons"
393
+ value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align) || 'left')}
394
+ options={$optionsStore.ALIGN_OPTIONS}
395
+ onUpdate={(option) => updateTableHeader(columnIndex, 'align', option.value)}
396
+ />
397
+ <UI.Switch
398
+ wrapperClass="w-2/10"
399
+ label={{ name: $t('constructor.props.table.columns.truncated') }}
400
+ value={column.overflow?.truncated ? 2 : 1}
401
+ onChange={(value) => updateTableHeader(columnIndex, 'overflow', { ['truncated']: value === 2 })}
402
+ />
403
+ <UI.Input
404
+ label={{ name: $t('constructor.props.table.columns.alt') }}
405
+ value={column.image?.alt}
406
+ onUpdate={(value) => {
407
+ updateTableHeader(columnIndex, 'image', { ['alt']: value })
408
+ }}
409
+ />
410
+ <UI.Input
411
+ label={{ name: $t('constructor.props.table.columns.class') }}
412
+ value={column.image?.class}
413
+ onUpdate={(value) => {
414
+ updateTableHeader(columnIndex, 'image', { ['class']: value })
415
+ }}
416
+ />
417
+ <UI.Input
418
+ label={{ name: $t('constructor.props.table.columns.image.width'), class: 'px-0' }}
419
+ wrapperClass="w-150"
420
+ value={column.image?.width}
421
+ onUpdate={(value) => {
422
+ updateTableHeader(columnIndex, 'image', { ['width']: value })
423
+ }}
424
+ />
425
+ <UI.Input
426
+ label={{ name: $t('constructor.props.table.columns.image.height'), class: 'px-0' }}
427
+ wrapperClass="w-150"
428
+ value={column.image?.height}
429
+ onUpdate={(value) => {
430
+ updateTableHeader(columnIndex, 'image', { ['height']: value })
431
+ }}
432
+ />
433
+ </div>
362
434
  </div>
435
+
363
436
  {#if column.buttons && column.buttons.length > 0}
364
437
  <div class="mb-5 rounded-lg p-1">
365
438
  {#each column.buttons as button, buttonIndex (buttonIndex)}
@@ -15,7 +15,7 @@
15
15
 
16
16
  <div
17
17
  {id}
18
- class="{twMerge(`relative flex w-full flex-col items-center ${background ? 'rounded-2xl bg-(--container-color) px-6 py-2' : ''}`, wrapperClass)} "
18
+ class={twMerge(`relative flex w-full flex-col items-center ${background ? 'rounded-2xl bg-(--container-color) px-6 py-2' : ''}`, wrapperClass)}
19
19
  >
20
20
  <p class={twMerge(`w-full text-center ${textSize[content.size ?? 'base']}`, content.class)}>
21
21
  {content.name}
@@ -21,7 +21,7 @@
21
21
  let currentType = $derived($optionsStore.TEXTFIELD_SIZE_OPTIONS.find((t) => t.value === component.properties.content.size))
22
22
 
23
23
  const initialAlign = $derived(
24
- $optionsStore.ALIGN_OPTIONS.find((a) =>
24
+ $optionsStore.TEXT_ALIGN_OPTIONS.find((a) =>
25
25
  (a.value as string).includes(component.properties.content?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
26
26
  ),
27
27
  )
@@ -64,7 +64,7 @@
64
64
  label={{ name: $t('constructor.props.align') }}
65
65
  type="buttons"
66
66
  value={initialAlign}
67
- options={$optionsStore.ALIGN_OPTIONS}
67
+ options={$optionsStore.TEXT_ALIGN_OPTIONS}
68
68
  onUpdate={(option) => updateProperty('content.class', twMerge(component.properties.content.class, option.value), component, onPropertyChange)}
69
69
  />
70
70
  <UI.Select
@@ -151,7 +151,7 @@
151
151
  label={{ name: $t('constructor.props.align') }}
152
152
  type="buttons"
153
153
  value={initialAlign}
154
- options={$optionsStore.ALIGN_OPTIONS}
154
+ options={$optionsStore.TEXT_ALIGN_OPTIONS}
155
155
  onUpdate={(option) => updateProperty('content.class', twMerge(component.properties.content.class, option.value), component, onPropertyChange)}
156
156
  />
157
157
  </div>
@@ -162,7 +162,7 @@
162
162
  onChange={(value) =>
163
163
  updateProperty(
164
164
  'content.class',
165
- `${component.properties.content.class} ${value === 2 ? 'font-bold' : 'font-normal'}`,
165
+ twMerge(`${component.properties.content.class} ${value === 2 ? 'font-bold' : 'font-normal'}`),
166
166
  component,
167
167
  onPropertyChange,
168
168
  )}
@@ -173,7 +173,7 @@
173
173
  onChange={(value) =>
174
174
  updateProperty(
175
175
  'content.class',
176
- `${component.properties.content.class} ${value === 2 ? 'italic' : 'not-italic'}`,
176
+ twMerge(`${component.properties.content.class} ${value === 2 ? 'italic' : 'not-italic'}`),
177
177
  component,
178
178
  onPropertyChange,
179
179
  )}
package/dist/index.d.ts CHANGED
@@ -22,4 +22,6 @@ export { default as Table } from './Table/Table.svelte';
22
22
  export { default as TableProps } from './Table/TableProps.svelte';
23
23
  export { default as TextField } from './TextField/TextField.svelte';
24
24
  export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
25
+ export * from './locales/i18n';
26
+ export * from './locales/translations';
25
27
  export { type UIComponent, type Position, type IUIComponentHandler, type IButtonProps, type IAccordionProps, type IInputProps, type ISelectProps, type ISelectOption, type ISwitchProps, type IColorPickerProps, type ISliderProps, type ITextFieldProps, type IProgressBarProps, type IGraphProps, type IGraphDataObject, type ITableHeader, type ITableProps, } from './types';
package/dist/index.js CHANGED
@@ -23,4 +23,6 @@ export { default as Table } from './Table/Table.svelte';
23
23
  export { default as TableProps } from './Table/TableProps.svelte';
24
24
  export { default as TextField } from './TextField/TextField.svelte';
25
25
  export { default as TextFieldProps } from './TextField/TextFieldProps.svelte';
26
+ export * from './locales/i18n';
27
+ export * from './locales/translations';
26
28
  export {} from './types';
@@ -108,6 +108,11 @@ const translations = {
108
108
  'constructor.props.table.columns.label': 'Название',
109
109
  'constructor.props.table.columns.width': 'Ширина',
110
110
  'constructor.props.table.columns.sortable': 'Сортировка',
111
+ 'constructor.props.table.columns.truncated': 'Скрыть',
112
+ 'constructor.props.table.columns.alt': 'Альтернативное название иконок',
113
+ 'constructor.props.table.columns.class': 'Стили иконки',
114
+ 'constructor.props.table.columns.image.width': 'Ширина иконки',
115
+ 'constructor.props.table.columns.image.height': 'Высота иконки',
111
116
  'constructor.props.table.deletecolumn': 'Удалить колонку',
112
117
  'constructor.props.table.deletebutton': 'Удалить кнопку',
113
118
  'constructor.props.table.addaction': 'Добавить кнопку',
package/dist/options.d.ts CHANGED
@@ -55,6 +55,11 @@ export declare const optionsStore: import("svelte/store").Readable<{
55
55
  value: string;
56
56
  class: string;
57
57
  }[];
58
+ TEXT_ALIGN_OPTIONS: {
59
+ id: string;
60
+ value: string;
61
+ name: string;
62
+ }[];
58
63
  ALIGN_OPTIONS: {
59
64
  id: string;
60
65
  value: string;
package/dist/options.js CHANGED
@@ -66,11 +66,16 @@ export const optionsStore = derived(t, ($t) => {
66
66
  { id: id(), name: '', value: 'text-purple-500 dark:text-purple-400', class: 'bg-purple-500 dark:bg-purple-400' },
67
67
  { id: id(), name: '', value: 'text-gray-500 dark:text-gray-400', class: 'bg-gray-500 dark:bg-gray-400' },
68
68
  ],
69
- ALIGN_OPTIONS: [
69
+ TEXT_ALIGN_OPTIONS: [
70
70
  { id: id(), value: 'text-left', name: $t('constructor.props.align.left') },
71
71
  { id: id(), value: 'text-center', name: $t('constructor.props.align.center') },
72
72
  { id: id(), value: 'text-right', name: $t('constructor.props.align.right') },
73
73
  ],
74
+ ALIGN_OPTIONS: [
75
+ { id: id(), value: 'left', name: $t('constructor.props.align.left') },
76
+ { id: id(), value: 'center', name: $t('constructor.props.align.center') },
77
+ { id: id(), value: 'right', name: $t('constructor.props.align.right') },
78
+ ],
74
79
  HEIGHT_OPTIONS: [
75
80
  { id: id(), value: 'py-1', name: $t('constructor.props.height.small') },
76
81
  { id: id(), value: 'py-2', name: $t('constructor.props.height.medium') },
package/dist/types.d.ts CHANGED
@@ -32,7 +32,10 @@ export interface IButtonProps {
32
32
  disabled?: boolean;
33
33
  content?: {
34
34
  name?: string;
35
- info?: string;
35
+ info?: {
36
+ text: string;
37
+ side: 'top' | 'bottom' | 'left' | 'right';
38
+ };
36
39
  icon?: ConstructorOfATypedSvelteComponent | string | null;
37
40
  };
38
41
  keyBind?: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "poe-svelte-ui-lib",
3
- "version": "1.1.16",
3
+ "version": "1.1.17",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "scripts": {
@@ -43,12 +43,12 @@
43
43
  "typescript": "^5.9.3"
44
44
  },
45
45
  "devDependencies": {
46
- "@sveltejs/kit": "^2.47.2",
46
+ "@sveltejs/kit": "^2.47.3",
47
47
  "@sveltejs/package": "^2.5.4",
48
48
  "@sveltejs/vite-plugin-svelte": "^6.2.1",
49
49
  "@types/node": "^24.9.1",
50
50
  "publint": "^0.3.15",
51
- "svelte": "^5.41.1",
51
+ "svelte": "^5.41.2",
52
52
  "svelte-preprocess": "^6.0.3",
53
53
  "vite": "^7.1.11",
54
54
  "vite-plugin-compression": "^0.5.1"