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.
- package/README.md +1 -0
- package/dist/Button/Button.svelte +5 -38
- package/dist/Button/Button.svelte.d.ts +1 -34
- package/dist/ColorPicker/ColorPicker.svelte +1 -3
- package/dist/FileAttach/FileAttach.svelte +3 -3
- package/dist/Input/Input.svelte +21 -20
- package/dist/Select/Select.svelte +4 -6
- package/dist/Switch/Switch.svelte +3 -2
- package/dist/Table/Table.svelte +5 -6
- package/dist/index.d.ts +0 -11
- package/dist/index.js +0 -11
- package/dist/options.d.ts +11 -11
- package/dist/options.js +27 -27
- package/dist/types.d.ts +1 -1
- package/package.json +8 -9
- package/dist/Accordion/AccordionProps.svelte +0 -70
- package/dist/Accordion/AccordionProps.svelte.d.ts +0 -10
- package/dist/Button/ButtonProps.svelte +0 -200
- package/dist/Button/ButtonProps.svelte.d.ts +0 -10
- package/dist/ColorPicker/ColorPickerProps.svelte +0 -100
- package/dist/ColorPicker/ColorPickerProps.svelte.d.ts +0 -10
- package/dist/Graph/GraphProps.svelte +0 -56
- package/dist/Graph/GraphProps.svelte.d.ts +0 -10
- package/dist/Input/InputProps.svelte +0 -221
- package/dist/Input/InputProps.svelte.d.ts +0 -10
- package/dist/ProgressBar/ProgressBarProps.svelte +0 -145
- package/dist/ProgressBar/ProgressBarProps.svelte.d.ts +0 -10
- package/dist/Select/SelectProps.svelte +0 -260
- package/dist/Select/SelectProps.svelte.d.ts +0 -10
- package/dist/Slider/SliderProps.svelte +0 -161
- package/dist/Slider/SliderProps.svelte.d.ts +0 -10
- package/dist/Switch/SwitchProps.svelte +0 -144
- package/dist/Switch/SwitchProps.svelte.d.ts +0 -10
- package/dist/Table/TableProps.svelte +0 -286
- package/dist/Table/TableProps.svelte.d.ts +0 -10
- package/dist/TextField/TextFieldProps.svelte +0 -92
- package/dist/TextField/TextFieldProps.svelte.d.ts +0 -10
- package/dist/locales/CircleFlagsEn.svelte +0 -14
- package/dist/locales/CircleFlagsEn.svelte.d.ts +0 -26
- package/dist/locales/CircleFlagsRu.svelte +0 -8
- package/dist/locales/CircleFlagsRu.svelte.d.ts +0 -26
- package/dist/locales/CircleFlagsZh.svelte +0 -8
- package/dist/locales/CircleFlagsZh.svelte.d.ts +0 -26
- package/dist/locales/i18n.d.ts +0 -10
- package/dist/locales/i18n.js +0 -36
- package/dist/locales/translations.d.ts +0 -7
- 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;
|