poe-svelte-ui-lib 1.0.2 → 1.0.4

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 (47) hide show
  1. package/README.md +1 -0
  2. package/dist/Button/Button.svelte +5 -38
  3. package/dist/Button/Button.svelte.d.ts +1 -34
  4. package/dist/ColorPicker/ColorPicker.svelte +1 -3
  5. package/dist/FileAttach/FileAttach.svelte +3 -3
  6. package/dist/Input/Input.svelte +21 -20
  7. package/dist/Select/Select.svelte +4 -6
  8. package/dist/Switch/Switch.svelte +3 -2
  9. package/dist/Table/Table.svelte +5 -6
  10. package/dist/index.d.ts +0 -11
  11. package/dist/index.js +0 -11
  12. package/dist/options.d.ts +11 -11
  13. package/dist/options.js +27 -27
  14. package/dist/types.d.ts +1 -1
  15. package/package.json +8 -9
  16. package/dist/Accordion/AccordionProps.svelte +0 -70
  17. package/dist/Accordion/AccordionProps.svelte.d.ts +0 -10
  18. package/dist/Button/ButtonProps.svelte +0 -200
  19. package/dist/Button/ButtonProps.svelte.d.ts +0 -10
  20. package/dist/ColorPicker/ColorPickerProps.svelte +0 -100
  21. package/dist/ColorPicker/ColorPickerProps.svelte.d.ts +0 -10
  22. package/dist/Graph/GraphProps.svelte +0 -56
  23. package/dist/Graph/GraphProps.svelte.d.ts +0 -10
  24. package/dist/Input/InputProps.svelte +0 -221
  25. package/dist/Input/InputProps.svelte.d.ts +0 -10
  26. package/dist/ProgressBar/ProgressBarProps.svelte +0 -145
  27. package/dist/ProgressBar/ProgressBarProps.svelte.d.ts +0 -10
  28. package/dist/Select/SelectProps.svelte +0 -260
  29. package/dist/Select/SelectProps.svelte.d.ts +0 -10
  30. package/dist/Slider/SliderProps.svelte +0 -161
  31. package/dist/Slider/SliderProps.svelte.d.ts +0 -10
  32. package/dist/Switch/SwitchProps.svelte +0 -144
  33. package/dist/Switch/SwitchProps.svelte.d.ts +0 -10
  34. package/dist/Table/TableProps.svelte +0 -286
  35. package/dist/Table/TableProps.svelte.d.ts +0 -10
  36. package/dist/TextField/TextFieldProps.svelte +0 -92
  37. package/dist/TextField/TextFieldProps.svelte.d.ts +0 -10
  38. package/dist/locales/CircleFlagsEn.svelte +0 -14
  39. package/dist/locales/CircleFlagsEn.svelte.d.ts +0 -26
  40. package/dist/locales/CircleFlagsRu.svelte +0 -8
  41. package/dist/locales/CircleFlagsRu.svelte.d.ts +0 -26
  42. package/dist/locales/CircleFlagsZh.svelte +0 -8
  43. package/dist/locales/CircleFlagsZh.svelte.d.ts +0 -26
  44. package/dist/locales/i18n.d.ts +0 -10
  45. package/dist/locales/i18n.js +0 -36
  46. package/dist/locales/translations.d.ts +0 -7
  47. package/dist/locales/translations.js +0 -450
@@ -1,221 +0,0 @@
1
- <!-- $lib/ElementsUI/InputProps.svelte -->
2
- <script lang="ts">
3
- import { getContext } from 'svelte'
4
- import { t } from '../locales/i18n'
5
- import type { IInputProps, UIComponent, ISelectOption } from '../types'
6
- import * as UI from '../index'
7
- import { optionsStore } from '../options'
8
-
9
- const { component, onPropertyChange } = $props<{
10
- component: UIComponent & { properties: Partial<IInputProps> }
11
- onPropertyChange: (value: string | object) => void
12
- }>()
13
-
14
- let isValidRegExp = $state(true)
15
- const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
16
- let VARIABLE_OPTIONS: ISelectOption<string>[] = $derived(
17
- DeviceVariables.map((variable: { value: string; name: string }) => ({
18
- id: variable.name,
19
- value: variable.value,
20
- name: `${variable.value} | ${variable.name}`,
21
- })),
22
- )
23
-
24
- const initialColor = $derived(
25
- $optionsStore.COLOR_OPTIONS.find((c) =>
26
- (c.value as string).includes(component.properties.componentClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
27
- ),
28
- )
29
-
30
- const initialAlign = $derived(
31
- $optionsStore.ALIGN_OPTIONS.find((a) =>
32
- (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
33
- ),
34
- )
35
-
36
- /* Обновление свойства */
37
- const updateProperty = (path: string, value: string | object | boolean | number | RegExp) => {
38
- const newProperties = JSON.parse(JSON.stringify(component.properties))
39
- if (path === 'regExp') {
40
- try {
41
- let regex: RegExp
42
- if (typeof value === 'string') {
43
- const pattern = value.match(/^\/(.*)\/([gimsuy]*)$/)
44
-
45
- regex = pattern ? new RegExp(pattern[1], pattern[2]) : new RegExp(value)
46
- if (pattern === null) return
47
- regex.test('')
48
- } else {
49
- throw new Error('Invalid RegExp type')
50
- }
51
-
52
- newProperties.regExp = regex
53
- isValidRegExp = true
54
- } catch (error) {
55
- console.warn('Invalid RegExp:', error)
56
- newProperties.regExp = typeof value === 'string' ? value : String(value)
57
- isValidRegExp = false
58
- return
59
- }
60
- }
61
-
62
- const parts = path.split('.')
63
- let obj = newProperties
64
-
65
- for (let i = 0; i < parts.length - 1; i++) {
66
- const part = parts[i]
67
- if (!obj[part]) obj[part] = {}
68
- obj = obj[part]
69
- }
70
-
71
- obj[parts[parts.length - 1]] = value
72
- onPropertyChange(newProperties)
73
- }
74
-
75
- const handleOptionColorChange = (color: string) => {
76
- let componentClass = component.properties.componentClass || ''
77
-
78
- componentClass = componentClass
79
- .split(' ')
80
- .filter((cls: string) => !cls.startsWith('bg-'))
81
- .join(' ')
82
-
83
- if (color) {
84
- componentClass += ` ${color}`
85
- }
86
-
87
- updateProperty('componentClass', componentClass)
88
- }
89
-
90
- const handleLabelAlign = (align: string) => {
91
- let labelClass = component.properties.label.class || ''
92
-
93
- labelClass = labelClass
94
- .split(' ')
95
- .filter((cls: string) => !cls.startsWith('text-'))
96
- .join(' ')
97
- if (align) {
98
- labelClass += ` ${align}`
99
- }
100
- updateProperty('label.class', labelClass)
101
- }
102
- </script>
103
-
104
- {#if component && component.properties}
105
- <div class="relative flex flex-row items-start justify-center">
106
- <!-- Сообщение для отправки в ws по нажатию кнопки -->
107
- <div class="flex w-1/3 flex-col items-center px-2">
108
- <UI.Select
109
- label={{ name: $t('service.constructor.props.variable') }}
110
- options={VARIABLE_OPTIONS}
111
- value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
112
- onUpdate={(selectedOption) => {
113
- if (selectedOption && selectedOption.name) {
114
- updateProperty('id.name', selectedOption.name.split('|')[1].trim())
115
- updateProperty('id.value', selectedOption.value as string)
116
- updateProperty('eventHandler.Variables', selectedOption.value as string)
117
- }
118
- }}
119
- />
120
- <UI.Select
121
- label={{ name: $t('service.constructor.props.type') }}
122
- options={$optionsStore.INPUT_TYPE_OPTIONS}
123
- value={$optionsStore.INPUT_TYPE_OPTIONS.find((opt) => opt.value === (component.properties.type || 'text'))}
124
- onUpdate={(selectedOption) => updateProperty('type', selectedOption.value as string)}
125
- />
126
- {#if component.properties.type === 'text' || component.properties.type === 'password'}
127
- <UI.Input
128
- label={{ name: $t('service.constructor.props.maxlenght') }}
129
- value={component.properties.maxlength}
130
- type="text"
131
- onUpdate={(value) => updateProperty('maxlength', value as string)}
132
- />
133
- <UI.Input
134
- label={{ name: $t('service.constructor.props.regexp') }}
135
- value={component.properties.regExp}
136
- type="text"
137
- maxlength={150}
138
- help={{ info: $t('service.constructor.props.regexp_info') }}
139
- componentClass={isValidRegExp === false ? '!border-2 !border-red-400' : ''}
140
- onUpdate={(value) => updateProperty('regExp', value)}
141
- />
142
- {:else if component.properties.type === 'number' && !component.properties.readonly && !component.properties.disabled}
143
- <UI.Input
144
- label={{ name: $t('service.constructor.props.minnum') }}
145
- value={component.properties.number.minNum as number}
146
- type="number"
147
- onUpdate={(value) => updateProperty('number.minNum', Number(value))}
148
- />
149
- <UI.Input
150
- label={{ name: $t('service.constructor.props.maxnum') }}
151
- value={component.properties.number.maxNum as number}
152
- type="number"
153
- onUpdate={(value) => updateProperty('number.maxNum', Number(value))}
154
- />
155
- <UI.Input
156
- label={{ name: $t('service.constructor.props.step') }}
157
- value={component.properties.number.step as number}
158
- type="number"
159
- onUpdate={(value) => updateProperty('number.step', Number(value))}
160
- />
161
- {:else if component.properties.type === 'text-area'}
162
- <UI.Input
163
- label={{ name: $t('service.constructor.props.regexp') }}
164
- value={component.properties.regExp}
165
- type="text"
166
- maxlength={150}
167
- help={{ info: $t('service.constructor.props.regexp_info') }}
168
- componentClass={isValidRegExp === false ? '!border-2 !border-red-400' : ''}
169
- onUpdate={(value) => updateProperty('regExp', value)}
170
- />
171
- {/if}
172
- </div>
173
- <div class="flex w-1/3 flex-col px-2">
174
- <UI.Input
175
- label={{ name: $t('service.constructor.props.placeholder') }}
176
- value={component.properties.help.placeholder as string}
177
- type="text"
178
- onUpdate={(value) => updateProperty('help.placeholder', value)}
179
- />
180
- <UI.Input
181
- label={{ name: $t('service.constructor.props.info') }}
182
- value={component.properties.help.info as string}
183
- type="text"
184
- onUpdate={(value) => updateProperty('help.info', value)}
185
- />
186
- <UI.Switch
187
- label={{ name: $t('service.constructor.props.readonly') }}
188
- value={component.properties.readonly ? 2 : 1}
189
- onChange={(value) => updateProperty('readonly', value === 2)}
190
- />
191
- <UI.Switch
192
- label={{ name: $t('service.constructor.props.copy') }}
193
- value={component.properties.copyButton ? 2 : 1}
194
- onChange={(value) => updateProperty('copyButton', value === 2)}
195
- />
196
- </div>
197
- <div class="flex w-1/3 flex-col px-2">
198
- <UI.Input
199
- label={{ name: $t('service.constructor.props.label') }}
200
- value={component.properties.label.name}
201
- type="text"
202
- onUpdate={(value) => updateProperty('label.name', value as string)}
203
- />
204
- <UI.Select
205
- label={{ name: $t('service.constructor.props.align') }}
206
- type="buttons"
207
- value={initialAlign}
208
- options={$optionsStore.ALIGN_OPTIONS}
209
- onUpdate={(option) => handleLabelAlign(option.value as string)}
210
- />
211
- <UI.Select
212
- wrapperClass="h-14"
213
- label={{ name: $t('service.constructor.props.colors') }}
214
- type="buttons"
215
- options={$optionsStore.COLOR_OPTIONS}
216
- value={initialColor}
217
- onUpdate={(option) => handleOptionColorChange(option.value as string)}
218
- />
219
- </div>
220
- </div>
221
- {/if}
@@ -1,10 +0,0 @@
1
- import type { IInputProps, UIComponent } from '../types';
2
- type $$ComponentProps = {
3
- component: UIComponent & {
4
- properties: Partial<IInputProps>;
5
- };
6
- onPropertyChange: (value: string | object) => void;
7
- };
8
- declare const InputProps: import("svelte").Component<$$ComponentProps, {}, "">;
9
- type InputProps = ReturnType<typeof InputProps>;
10
- export default InputProps;
@@ -1,145 +0,0 @@
1
- <!-- $lib/ElementsUI/SwitchProps.svelte -->
2
- <script lang="ts">
3
- import { getContext } from 'svelte'
4
- import { t } from '../locales/i18n'
5
- import type { UIComponent, IProgressBarProps } from '../types'
6
- import * as UI from '../index'
7
- import { optionsStore } from '../options'
8
-
9
- const { component, onPropertyChange } = $props<{
10
- component: UIComponent & { properties: Partial<IProgressBarProps> }
11
- onPropertyChange: (value: string | object) => void
12
- }>()
13
-
14
- const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
15
- let VARIABLE_OPTIONS = $derived(
16
- DeviceVariables.map((variable: { value: string; name: string }) => ({
17
- id: variable.name,
18
- value: variable.value,
19
- name: `${variable.value} | ${variable.name}`,
20
- })),
21
- )
22
-
23
- const initialAlign = $derived(
24
- $optionsStore.ALIGN_OPTIONS.find((a) =>
25
- (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
26
- ),
27
- )
28
-
29
- const initialColor = $derived(
30
- $optionsStore.COLOR_OPTIONS.find((c) =>
31
- (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
32
- ),
33
- )
34
-
35
- const handleLabelAlign = (align: string) => {
36
- let labelClass = component.properties.label.class || ''
37
- labelClass = labelClass
38
- .split(' ')
39
- .filter((cls: string) => !cls.startsWith('text-'))
40
- .join(' ')
41
- if (align) {
42
- labelClass += ` ${align}`
43
- }
44
- updateProperty('label.class', labelClass)
45
- }
46
-
47
- const handleOptionColorChange = (color: string) => {
48
- let wrapperClass = component.properties.wrapperClass || ''
49
- wrapperClass = wrapperClass
50
- .split(' ')
51
- .filter((cls: string) => !cls.startsWith('bg-'))
52
- .join(' ')
53
- if (color) {
54
- wrapperClass += ` ${color}`
55
- }
56
- updateProperty('wrapperClass', wrapperClass)
57
- }
58
-
59
- /* Обновление свойства */
60
- const updateProperty = (path: string, value: number | string | object) => {
61
- const newProperties = JSON.parse(JSON.stringify(component.properties))
62
- const parts = path.split('.')
63
- let obj = newProperties
64
-
65
- for (let i = 0; i < parts.length - 1; i++) {
66
- const part = parts[i]
67
- if (!obj[part]) obj[part] = {}
68
- obj = obj[part]
69
- }
70
-
71
- obj[parts[parts.length - 1]] = value
72
- onPropertyChange(newProperties)
73
- }
74
- </script>
75
-
76
- {#if component && component.properties}
77
- <div class="relative flex flex-row items-start justify-center">
78
- <div class="flex w-1/3 flex-col items-center px-2">
79
- <UI.Select
80
- label={{ name: $t('service.constructor.props.variable') }}
81
- options={VARIABLE_OPTIONS}
82
- value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
83
- onUpdate={(value) => {
84
- updateProperty('id.name', (value.name as string).split('|')[1].trim())
85
- updateProperty('id.value', value.value as string)
86
- }}
87
- />
88
- </div>
89
- <div class="flex w-1/3 flex-col px-2">
90
- <UI.Input
91
- wrapperClass="w-full"
92
- label={{ name: $t('service.constructor.props.min') }}
93
- value={component.properties.range.min as number}
94
- type="number"
95
- onUpdate={(value) => {
96
- updateProperty('range.min', Number(value))
97
- updateProperty('value', component.properties.range.min + (component.properties.range.max - component.properties.range.min) / 3)
98
- }}
99
- />
100
- <UI.Input
101
- wrapperClass="w-full"
102
- label={{ name: $t('service.constructor.props.max') }}
103
- value={component.properties.range.max as number}
104
- type="number"
105
- onUpdate={(value) => {
106
- updateProperty('range.max', Number(value))
107
- updateProperty('value', component.properties.range.min + (component.properties.range.max - component.properties.range.min) / 3)
108
- }}
109
- />
110
- <UI.Input
111
- wrapperClass="w-full"
112
- label={{ name: $t('service.constructor.props.units') }}
113
- value={component.properties.range.units}
114
- type="text"
115
- onUpdate={(value) => updateProperty('range.units', value)}
116
- />
117
- </div>
118
- <div class="flex w-1/3 flex-col px-2">
119
- <UI.Input
120
- wrapperClass="w-full"
121
- label={{ name: $t('service.constructor.props.label') }}
122
- value={component.properties.label.name}
123
- type="text"
124
- componentClass="w-full"
125
- onUpdate={(value) => updateProperty('label.name', value as string)}
126
- />
127
- <UI.Select
128
- wrapperClass="w-full"
129
- label={{ name: $t('service.constructor.props.align') }}
130
- type="buttons"
131
- value={initialAlign}
132
- options={$optionsStore.ALIGN_OPTIONS}
133
- onUpdate={(option) => handleLabelAlign(option.value as string)}
134
- />
135
- <UI.Select
136
- wrapperClass="!h-14"
137
- label={{ name: $t('service.constructor.props.colors') }}
138
- type="buttons"
139
- options={$optionsStore.COLOR_OPTIONS}
140
- value={initialColor}
141
- onUpdate={(option) => handleOptionColorChange(option.value as string)}
142
- />
143
- </div>
144
- </div>
145
- {/if}
@@ -1,10 +0,0 @@
1
- import type { UIComponent, IProgressBarProps } from '../types';
2
- type $$ComponentProps = {
3
- component: UIComponent & {
4
- properties: Partial<IProgressBarProps>;
5
- };
6
- onPropertyChange: (value: string | object) => void;
7
- };
8
- declare const ProgressBarProps: import("svelte").Component<$$ComponentProps, {}, "">;
9
- type ProgressBarProps = ReturnType<typeof ProgressBarProps>;
10
- export default ProgressBarProps;
@@ -1,260 +0,0 @@
1
- <!-- $lib/ElementsUI/SelectProps.svelte -->
2
- <script lang="ts">
3
- import { getContext } from 'svelte'
4
- import { t } from '../locales/i18n'
5
- import type { UIComponent, ISelectProps, ISelectOption } from '../types.js'
6
- import * as UI from '../index'
7
- import ButtonDelete from '../libIcons/ButtonDelete.svelte'
8
- import ButtonAdd from '../libIcons/ButtonAdd.svelte'
9
-
10
- import { optionsStore } from '../options.js'
11
-
12
- const { component, onPropertyChange } = $props<{
13
- component: UIComponent & { properties: Partial<ISelectProps> }
14
- onPropertyChange: (path: string, value: string | object) => void
15
- }>()
16
-
17
- const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
18
- let VARIABLE_OPTIONS = $derived(
19
- DeviceVariables.map((variable: { value: string; name: string }) => ({
20
- id: variable.name,
21
- value: variable.value,
22
- name: `${variable.value} | ${variable.name}`,
23
- })),
24
- )
25
-
26
- type ValueTypeOption = {
27
- id: string
28
- value: 'text' | 'number'
29
- name: string
30
- class: string
31
- }
32
- let currentValueType = $derived(
33
- !component.properties.options[0]
34
- ? ($optionsStore.SELECT_VALUE_TYPE_OPTIONS[0] as ValueTypeOption)
35
- : typeof component.properties.options[0].value === 'number'
36
- ? $optionsStore.SELECT_VALUE_TYPE_OPTIONS[1]
37
- : ($optionsStore.SELECT_VALUE_TYPE_OPTIONS[0] as ValueTypeOption),
38
- )
39
-
40
- let Header: ISelectOption = $derived(
41
- $optionsStore.HEADER_OPTIONS.find((h) => h.value === component.properties.eventHandler.Header) ?? { id: '', name: '', value: '', class: '!w-1/4' },
42
- )
43
-
44
- let currentType = $derived($optionsStore.SELECT_TYPE_OPTIONS.find((t) => t.value === component.properties.type))
45
-
46
- const initialColor = $derived(
47
- $optionsStore.COLOR_OPTIONS.find((c) =>
48
- (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
49
- ),
50
- )
51
-
52
- const initialAlign = $derived(
53
- $optionsStore.ALIGN_OPTIONS.find((a) =>
54
- (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
55
- ),
56
- )
57
-
58
- const handleLabelAlign = (align: string) => {
59
- let labelClass = component.properties.label.class || ''
60
- labelClass = labelClass
61
- .split(' ')
62
- .filter((cls: string) => !cls.startsWith('text-'))
63
- .join(' ')
64
- if (align) {
65
- labelClass += ` ${align}`
66
- }
67
- updateProperty('label.class', labelClass)
68
- }
69
-
70
- const handleOptionColorChange = (color: string) => {
71
- let wrapperClass = component.properties.wrapperClass || ''
72
- wrapperClass = wrapperClass
73
- .split(' ')
74
- .filter((cls: string) => !cls.startsWith('bg-'))
75
- .join(' ')
76
- if (color) {
77
- wrapperClass += ` ${color}`
78
- }
79
- updateProperty('wrapperClass', wrapperClass)
80
- }
81
-
82
- /* Обновление свойства */
83
- const updateProperty = (path: string, value: string | object) => {
84
- const newProperties = JSON.parse(JSON.stringify(component.properties))
85
- const parts = path.split('.')
86
- let obj = newProperties
87
-
88
- for (let i = 0; i < parts.length - 1; i++) {
89
- const part = parts[i]
90
- if (!obj[part]) obj[part] = {}
91
- obj = obj[part]
92
- }
93
-
94
- obj[parts[parts.length - 1]] = value
95
- onPropertyChange(newProperties)
96
- }
97
- </script>
98
-
99
- {#if component && component.properties}
100
- <div class="relative mb-4 flex flex-row items-start justify-center">
101
- <div class="flex w-1/3 flex-col items-center px-2">
102
- <UI.Select
103
- wrapperClass="w-full"
104
- label={{ name: $t('service.constructor.props.argument') }}
105
- type="buttons"
106
- value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument)}
107
- options={$optionsStore.FULL_ARGUMENT_OPTION}
108
- onUpdate={(option) => {
109
- updateProperty('eventHandler.Argument', option.value as string)
110
- }}
111
- />
112
- {#if component.properties.eventHandler.Argument !== 'Save' && component.properties.eventHandler.Argument !== 'NoSave'}
113
- <UI.Input
114
- wrapperClass="w-full {Header.value === 'SET' ? 'mt-1' : ''} "
115
- label={{ name: $t('service.constructor.props.argument') }}
116
- value={component.properties.eventHandler.Argument}
117
- type="text"
118
- autocomplete="on"
119
- componentClass="w-full"
120
- maxlength={32}
121
- regExp={/^[a-zA-Z0-9\-_]{0,32}$/}
122
- help={{ info: $t('service.constructor.props.argument.info') }}
123
- onUpdate={(value) => updateProperty('eventHandler.Argument', value as string)}
124
- />
125
- {/if}
126
- <UI.Select
127
- label={{ name: $t('service.constructor.props.variable') }}
128
- options={VARIABLE_OPTIONS}
129
- value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
130
- onUpdate={(value) => {
131
- updateProperty('id.name', (value.name as string).split('|')[1].trim())
132
- updateProperty('id.value', value.value as string)
133
- updateProperty('eventHandler.Variables', value.value as string)
134
- }}
135
- />
136
- <UI.Select
137
- label={{ name: $t('service.constructor.props.type') }}
138
- type="buttons"
139
- value={currentType}
140
- options={$optionsStore.SELECT_TYPE_OPTIONS}
141
- onUpdate={(item) => updateProperty('type', item.value as string)}
142
- />
143
- </div>
144
- <div class="flex w-1/3 flex-col items-center px-2">
145
- <UI.Select
146
- wrapperClass="w-full h-14"
147
- label={{ name: $t('service.constructor.props.valuetype') }}
148
- type="buttons"
149
- options={$optionsStore.SELECT_VALUE_TYPE_OPTIONS}
150
- value={currentValueType}
151
- onUpdate={(value) => {
152
- currentValueType = value as ValueTypeOption
153
- const options = [...(component.properties?.options || [])]
154
- const newType = value.value
155
- options.forEach((option) => {
156
- if (newType === 'number') option.value = option.value !== undefined ? Number(option.value) : 0
157
- else option.value = option.value !== undefined ? String(option.value) : ''
158
- })
159
- updateProperty('options', options)
160
- }}
161
- />
162
- <UI.Select
163
- wrapperClass="w-full h-14"
164
- label={{ name: $t('service.constructor.props.colors') }}
165
- type="buttons"
166
- options={$optionsStore.COLOR_OPTIONS}
167
- value={initialColor}
168
- onUpdate={(option) => handleOptionColorChange(option.value as string)}
169
- />
170
- </div>
171
- <div class="flex w-1/3 flex-col items-center px-2">
172
- <UI.Input
173
- label={{ name: $t('service.constructor.props.label') }}
174
- value={component.properties.label.name}
175
- type="text"
176
- componentClass="w-full"
177
- onUpdate={(value) => updateProperty('label.name', value as string)}
178
- />
179
- <UI.Select
180
- wrapperClass="w-full"
181
- label={{ name: $t('service.constructor.props.align') }}
182
- type="buttons"
183
- value={initialAlign}
184
- options={$optionsStore.ALIGN_OPTIONS}
185
- onUpdate={(option) => handleLabelAlign(option.value as string)}
186
- />
187
- </div>
188
- </div>
189
-
190
- <hr class="border-gray-400" />
191
-
192
- <!-- Настройки опций -->
193
- <div class="space-y-4">
194
- <div class="m-0 flex items-center justify-center gap-2">
195
- <h4>{$t('service.constructor.props.options.title')}</h4>
196
- <UI.Button
197
- wrapperClass="!w-10"
198
- icon={{ component: ButtonAdd, properties: { height: '1.5rem', width: '1.5rem' } }}
199
- componentClass="h-10 border-none hover:shadow-none"
200
- onClick={() => {
201
- const newOption: ISelectOption = {
202
- id: crypto.randomUUID(),
203
- name: 'New Button',
204
- class: '',
205
- }
206
- const options = [...(component.properties?.options || []), newOption]
207
- updateProperty('options', options)
208
- }}
209
- />
210
- </div>
211
-
212
- {#each component.properties.options || [] as option, index (option.id)}
213
- <div class="m-0 flex items-end justify-around gap-2 border-gray-400">
214
- <UI.Input
215
- label={{ name: $t('service.constructor.props.optionname') }}
216
- wrapperClass="!w-3/10"
217
- value={option.name}
218
- type="text"
219
- onUpdate={(value) => {
220
- const options = [...(component.properties?.options || [])]
221
- options[index]['name'] = value
222
- updateProperty('options', options)
223
- }}
224
- />
225
- <UI.Input
226
- label={{ name: $t('service.constructor.props.optionvalue') }}
227
- wrapperClass="!w-3/10"
228
- value={option.value}
229
- type={currentValueType.value}
230
- onUpdate={(value) => {
231
- const options = [...(component.properties?.options || [])]
232
- options[index]['value'] = value
233
- updateProperty('options', options)
234
- }}
235
- />
236
- <UI.Input
237
- label={{ name: $t('service.constructor.props.optionclass') }}
238
- wrapperClass="!w-3/10"
239
- value={option.class}
240
- type="text"
241
- onUpdate={(value) => {
242
- const options = [...(component.properties?.options || [])]
243
- options[index]['class'] = value
244
- updateProperty('options', options)
245
- }}
246
- />
247
- <UI.Button
248
- wrapperClass="!w-1/10"
249
- icon={{ component: ButtonDelete, properties: { height: '1.5rem', width: '1.5rem' } }}
250
- componentClass="h-10 w-10 border-none hover:shadow-none"
251
- onClick={() => {
252
- const options = [...(component.properties?.options || [])]
253
- options.splice(index, 1)
254
- updateProperty('options', options)
255
- }}
256
- />
257
- </div>
258
- {/each}
259
- </div>
260
- {/if}
@@ -1,10 +0,0 @@
1
- import type { UIComponent, ISelectProps } from '../types.js';
2
- type $$ComponentProps = {
3
- component: UIComponent & {
4
- properties: Partial<ISelectProps>;
5
- };
6
- onPropertyChange: (path: string, value: string | object) => void;
7
- };
8
- declare const SelectProps: import("svelte").Component<$$ComponentProps, {}, "">;
9
- type SelectProps = ReturnType<typeof SelectProps>;
10
- export default SelectProps;