poe-svelte-ui-lib 1.9.21 → 1.9.23
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/dist/Accordion/AccordionProps.svelte +7 -7
- package/dist/Accordion/README.md +1 -1
- package/dist/Button/ButtonProps.svelte +17 -17
- package/dist/Button/README.md +1 -1
- package/dist/ColorPicker/ColorPickerProps.svelte +2 -2
- package/dist/ColorPicker/README.md +1 -1
- package/dist/CommonSnippets.svelte +31 -16
- package/dist/CommonSnippets.svelte.d.ts +1 -1
- package/dist/ComponentExample.svelte +5 -5
- package/dist/FileAttach/FileAttach.svelte +3 -3
- package/dist/FileAttach/FileAttachProps.svelte +8 -8
- package/dist/FileAttach/README.md +1 -1
- package/dist/Graph/GraphProps.svelte +2 -2
- package/dist/Graph/README.md +1 -1
- package/dist/Input/InputProps.svelte +36 -28
- package/dist/Joystick/JoystickProps.svelte +6 -6
- package/dist/Joystick/README.md +1 -1
- package/dist/Map/Map.svelte +2 -2
- package/dist/Map/MapProps.svelte +3 -3
- package/dist/Map/README.md +1 -1
- package/dist/Map/mapWrapper/MapLibre.svelte +2 -2
- package/dist/ModalStackStore.d.ts +0 -2
- package/dist/ModalStackStore.js +1 -9
- package/dist/ProgressBar/ProgressBarProps.svelte +8 -8
- package/dist/ProgressBar/README.md +1 -1
- package/dist/Select/README.md +1 -1
- package/dist/Select/Select.svelte +2 -2
- package/dist/Select/SelectProps.svelte +15 -14
- package/dist/Slider/README.md +1 -1
- package/dist/Slider/SliderProps.svelte +3 -3
- package/dist/Switch/README.md +1 -1
- package/dist/Switch/SwitchProps.svelte +13 -13
- package/dist/Table/README.md +1 -1
- package/dist/Table/Table.svelte +6 -6
- package/dist/Table/TableProps.svelte +33 -33
- package/dist/Tabs/README.md +1 -1
- package/dist/Tabs/TabsProps.svelte +11 -11
- package/dist/TextField/README.md +1 -1
- package/dist/TextField/TextField.svelte +1 -1
- package/dist/TextField/TextFieldProps.svelte +6 -6
- package/dist/VideoViewer/VideoViewer.svelte +147 -0
- package/dist/VideoViewer/VideoViewer.svelte.d.ts +4 -0
- package/dist/Widget/README.md +1 -1
- package/dist/Widget/WidgetProps.svelte +10 -10
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -0
- package/dist/libIcons/Error.svelte +8 -0
- package/dist/libIcons/Error.svelte.d.ts +18 -0
- package/dist/locales/i18n.d.ts +1 -1
- package/dist/locales/i18n.js +1 -1
- package/dist/locales/translations.js +5 -0
- package/dist/options.js +161 -161
- package/dist/types.d.ts +8 -2
- package/package.json +9 -9
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!-- $lib/ElementsUI/AccordionProps.svelte -->
|
|
2
2
|
<script lang="ts">
|
|
3
|
-
import {
|
|
3
|
+
import { T } from "../locales/i18n"
|
|
4
4
|
import { updateProperty, type IAccordionProps, type IUIComponentHandler, type UIComponent } from "../types"
|
|
5
5
|
import * as UI from ".."
|
|
6
6
|
import { optionsStore } from "../options"
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
<div class="flex items-center">
|
|
46
46
|
<UI.FileAttach
|
|
47
47
|
type="image"
|
|
48
|
-
label={{ name: $
|
|
48
|
+
label={{ name: $T("constructor.props.image") }}
|
|
49
49
|
accept="image/png, image/jpeg, image/webp"
|
|
50
50
|
bind:currentImage
|
|
51
51
|
onChange={handleImageUpload}
|
|
@@ -66,14 +66,14 @@
|
|
|
66
66
|
{#snippet AccordionSize()}
|
|
67
67
|
<div class="flex w-full gap-4">
|
|
68
68
|
<UI.Input
|
|
69
|
-
label={{ name: $
|
|
69
|
+
label={{ name: $T("constructor.props.size.height") }}
|
|
70
70
|
value={component.properties.size.height}
|
|
71
71
|
onUpdate={(value) => updateProperty("size.height", value as number, component, onPropertyChange)}
|
|
72
72
|
number={{ minNum: 1, maxNum: 1000, step: 1 }}
|
|
73
73
|
type="number"
|
|
74
74
|
/>
|
|
75
75
|
<UI.Input
|
|
76
|
-
label={{ name: $
|
|
76
|
+
label={{ name: $T("constructor.props.size.width") }}
|
|
77
77
|
value={component.properties.size.width}
|
|
78
78
|
onUpdate={(value) => updateProperty("size.width", value as number, component, onPropertyChange)}
|
|
79
79
|
number={{ minNum: 1, maxNum: 1000, step: 1 }}
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
|
|
85
85
|
{#snippet AccordionIsOpen()}
|
|
86
86
|
<UI.Switch
|
|
87
|
-
label={{ name: $
|
|
87
|
+
label={{ name: $T("constructor.props.open") }}
|
|
88
88
|
value={component.properties.isOpen}
|
|
89
89
|
options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
|
|
90
90
|
onChange={(value) => updateProperty("isOpen", value, component, onPropertyChange)}
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
<CommonSnippets
|
|
103
103
|
snippet="IconsLib"
|
|
104
104
|
initialValue={{
|
|
105
|
-
name: $
|
|
105
|
+
name: $T("constructor.props.labelicon"),
|
|
106
106
|
icon: component.properties.label.icon,
|
|
107
107
|
updateProperty: (icon: string) => updateProperty("label.icon", icon as string, component, onPropertyChange),
|
|
108
108
|
icons: { array: ICONS },
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
<CommonSnippets
|
|
130
130
|
snippet="IconsLib"
|
|
131
131
|
initialValue={{
|
|
132
|
-
name: $
|
|
132
|
+
name: $T("constructor.props.labelicon"),
|
|
133
133
|
icons: { array: ICONS },
|
|
134
134
|
icon: component.properties.label.icon,
|
|
135
135
|
updateProperty: (icon: string) => updateProperty("label.icon", icon as string, component, onPropertyChange),
|
package/dist/Accordion/README.md
CHANGED
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
- Включает модальное окно для выбора иконок из библиотеки
|
|
130
130
|
- Поддерживает загрузку изображений для фона
|
|
131
131
|
- Имеет различные наборы полей в зависимости от режима (`forConstructor`)
|
|
132
|
-
- Использует систему локализации через `$
|
|
132
|
+
- Использует систему локализации через `$T('constructor.props.*')`
|
|
133
133
|
- Поддерживает валидацию числовых значений (min/max) для размеров
|
|
134
134
|
|
|
135
135
|
## Заметки
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!-- $lib/ElementsUI/ButtonProps.svelte -->
|
|
2
2
|
<script lang="ts">
|
|
3
|
-
import {
|
|
3
|
+
import { T } from "../locales/i18n"
|
|
4
4
|
import { type UIComponent, type IButtonProps, type IOption, updateProperty, type IUIComponentHandler } from "../types"
|
|
5
5
|
import * as UI from ".."
|
|
6
6
|
import { optionsStore } from "../options"
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
|
|
63
63
|
{#snippet ButtonHeaderArgument()}
|
|
64
64
|
<UI.Select
|
|
65
|
-
label={{ name: $
|
|
65
|
+
label={{ name: $T("constructor.props.header") }}
|
|
66
66
|
type="buttons"
|
|
67
67
|
value={Header}
|
|
68
68
|
options={$optionsStore.HEADER_OPTIONS}
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
/>
|
|
71
71
|
{#if Header.value === "SET"}
|
|
72
72
|
<UI.Select
|
|
73
|
-
label={{ name: $
|
|
73
|
+
label={{ name: $T("constructor.props.argument") }}
|
|
74
74
|
type="buttons"
|
|
75
75
|
value={$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === component.eventHandler.Argument) ??
|
|
76
76
|
$optionsStore.FULL_ARGUMENT_OPTION.find((h) => h.value === "")}
|
|
@@ -79,12 +79,12 @@
|
|
|
79
79
|
/>
|
|
80
80
|
{/if}
|
|
81
81
|
<UI.Input
|
|
82
|
-
label={{ name: Header.value !== "SET" ? $
|
|
82
|
+
label={{ name: Header.value !== "SET" ? $T("constructor.props.argument") : "" }}
|
|
83
83
|
wrapperClass="{Header.value === 'SET' ? 'mt-1' : ''} "
|
|
84
84
|
value={component.eventHandler.Argument}
|
|
85
85
|
maxlength={32}
|
|
86
86
|
disabled={Header.value === "SET" && (component.eventHandler.Argument == "Save" || component.eventHandler.Argument == "NoSave")}
|
|
87
|
-
help={{ info: $
|
|
87
|
+
help={{ info: $T("constructor.props.argument.info"), autocomplete: "on", regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
|
|
88
88
|
onUpdate={(value) => onPropertyChange({ eventHandler: { Argument: value as string } })}
|
|
89
89
|
/>
|
|
90
90
|
{/snippet}
|
|
@@ -92,18 +92,18 @@
|
|
|
92
92
|
{#snippet ButtonVariables()}
|
|
93
93
|
{#if (component.eventHandler.Argument !== "Save" && component.eventHandler.Argument !== "NoSave") || Header.value === "SET"}
|
|
94
94
|
<UI.Input
|
|
95
|
-
label={{ name: $
|
|
95
|
+
label={{ name: $T("constructor.props.value") }}
|
|
96
96
|
value={component.eventHandler.Value}
|
|
97
|
-
help={{ info: $
|
|
97
|
+
help={{ info: $T("constructor.props.value.info") }}
|
|
98
98
|
maxlength={500}
|
|
99
99
|
onUpdate={(value) => onPropertyChange({ eventHandler: { Value: value as string } })}
|
|
100
100
|
/>
|
|
101
101
|
{/if}
|
|
102
102
|
<UI.Input
|
|
103
|
-
label={{ name: $
|
|
103
|
+
label={{ name: $T("constructor.props.variables") }}
|
|
104
104
|
disabled={hasValue}
|
|
105
105
|
value={component.eventHandler.Variables.join(" ")}
|
|
106
|
-
help={{ info: $
|
|
106
|
+
help={{ info: $T("constructor.props.variables.info"), autocomplete: "on", regExp: /^[a-zA-Z0-9.\-_ ":{}]{0,500}$/ }}
|
|
107
107
|
maxlength={500}
|
|
108
108
|
onUpdate={(value) => onPropertyChange({ eventHandler: { Variables: (value as string).trim().split(/\s+/) } })}
|
|
109
109
|
/>
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
|
|
112
112
|
{#snippet ButtonName()}
|
|
113
113
|
<UI.Input
|
|
114
|
-
label={{ name: $
|
|
114
|
+
label={{ name: $T("constructor.props.name") }}
|
|
115
115
|
value={component.properties.content.name}
|
|
116
116
|
onUpdate={(value) => updateIconProperty("content.name", value as string)}
|
|
117
117
|
/>
|
|
@@ -120,7 +120,7 @@
|
|
|
120
120
|
{#snippet ButtonHeight()}
|
|
121
121
|
{#if !(!component.properties.content.name?.trim() && component.properties.content.icon)}
|
|
122
122
|
<UI.Select
|
|
123
|
-
label={{ name: $
|
|
123
|
+
label={{ name: $T("constructor.props.height") }}
|
|
124
124
|
type="buttons"
|
|
125
125
|
options={$optionsStore.HEIGHT_OPTIONS}
|
|
126
126
|
value={initialHeight}
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
|
|
133
133
|
{#snippet ButtonInfo()}
|
|
134
134
|
<UI.Input
|
|
135
|
-
label={{ name: $
|
|
135
|
+
label={{ name: $T("constructor.props.info") }}
|
|
136
136
|
value={component.properties.content.info.text}
|
|
137
137
|
onUpdate={(value) => updateProperty("content.info.text", value as string, component, onPropertyChange)}
|
|
138
138
|
/>
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
|
|
141
141
|
{#snippet ButtonInfoSide()}
|
|
142
142
|
<UI.Select
|
|
143
|
-
label={{ name: $
|
|
143
|
+
label={{ name: $T("constructor.props.info.side") }}
|
|
144
144
|
type="buttons"
|
|
145
145
|
options={$optionsStore.INFO_SIDE_OPTIONS}
|
|
146
146
|
value={$optionsStore.INFO_SIDE_OPTIONS.find((h) => h.value === component.properties.content.info.side)}
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
|
|
151
151
|
{#snippet ButtonComponentClass()}
|
|
152
152
|
<UI.Input
|
|
153
|
-
label={{ name: $
|
|
153
|
+
label={{ name: $T("constructor.props.componentclass") }}
|
|
154
154
|
value={component.properties.componentClass}
|
|
155
155
|
onUpdate={(value) => updateProperty("componentClass", value as string, component, onPropertyChange)}
|
|
156
156
|
/>
|
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
|
|
159
159
|
{#snippet ButtonColors()}
|
|
160
160
|
<div class="flex items-end gap-2">
|
|
161
|
-
<UI.Button wrapperClass="w-8" content={{ icon: InfoIcon, info: { text: $
|
|
161
|
+
<UI.Button wrapperClass="w-8" content={{ icon: InfoIcon, info: { text: $T("constructor.props.button.colors.hint"), side: "right" } }} />
|
|
162
162
|
<CommonSnippets
|
|
163
163
|
snippet="Colors"
|
|
164
164
|
initialValue={{
|
|
@@ -187,7 +187,7 @@
|
|
|
187
187
|
<CommonSnippets
|
|
188
188
|
snippet="IconsLib"
|
|
189
189
|
initialValue={{
|
|
190
|
-
name: $
|
|
190
|
+
name: $T("constructor.props.buttonIcon"),
|
|
191
191
|
icon: component.properties.content.icon,
|
|
192
192
|
updateProperty: (icon: string) => updateIconProperty("content.icon", icon as string),
|
|
193
193
|
icons: { array: ICONS },
|
|
@@ -217,7 +217,7 @@
|
|
|
217
217
|
<CommonSnippets
|
|
218
218
|
snippet="IconsLib"
|
|
219
219
|
initialValue={{
|
|
220
|
-
name: $
|
|
220
|
+
name: $T("constructor.props.buttonIcon"),
|
|
221
221
|
icon: component.properties.content.icon,
|
|
222
222
|
updateProperty: (icon: string) => updateIconProperty("content.icon", icon as string),
|
|
223
223
|
icons: { array: ICONS },
|
package/dist/Button/README.md
CHANGED
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
- Включает модальное окно для выбора иконок из библиотеки
|
|
161
161
|
- Поддерживает настройку обработчика событий и аргументов
|
|
162
162
|
- Имеет различные наборы полей в зависимости от режима (`forConstructor`)
|
|
163
|
-
- Использует систему локализации через `$
|
|
163
|
+
- Использует систему локализации через `$T('constructor.props.*')`
|
|
164
164
|
- Поддерживает валидацию вводимых данных через регулярные выражения
|
|
165
165
|
|
|
166
166
|
## Заметки
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!-- $lib/ElementsUI/ButtonProps.svelte -->
|
|
2
2
|
<script lang="ts">
|
|
3
|
-
import {
|
|
3
|
+
import { T } from "../locales/i18n"
|
|
4
4
|
import { type UIComponent, type IColorPickerProps, updateProperty, type IUIComponentHandler } from "../types"
|
|
5
5
|
import * as UI from ".."
|
|
6
6
|
import { getContext } from "svelte"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
</script>
|
|
29
29
|
|
|
30
30
|
{#snippet ColorPickerDefaultColor()}
|
|
31
|
-
<UI.TextField content={{ name: $
|
|
31
|
+
<UI.TextField content={{ name: $T("constructor.props.defaultcolor"), class: "font-bold" }} />
|
|
32
32
|
<div class="flex items-center gap-3">
|
|
33
33
|
<UI.TextField wrapperClass="w-4" content={{ name: "R", class: "font-bold" }} />
|
|
34
34
|
<UI.Input
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
- Поддерживает настройку начального цвета через три числовых поля (RGB)
|
|
119
119
|
- Использует общие сниппеты для настройки различных параметров
|
|
120
120
|
- Имеет различные наборы полей в зависимости от режима (`forConstructor`)
|
|
121
|
-
- Использует систему локализации через `$
|
|
121
|
+
- Использует систему локализации через `$T('constructor.props.*')`
|
|
122
122
|
|
|
123
123
|
## Заметки
|
|
124
124
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import * as UI from "./"
|
|
3
|
-
import {
|
|
3
|
+
import { T } from "./locales/i18n"
|
|
4
4
|
import CrossIcon from "./libIcons/CrossIcon.svelte"
|
|
5
5
|
import { optionsStore } from "./options"
|
|
6
6
|
import { updateProperty } from "./types"
|
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
| "EventHandlerArgument"
|
|
34
34
|
| "IconsLib"
|
|
35
35
|
| "Readonly"
|
|
36
|
+
| "BitModeInfo"
|
|
36
37
|
| "MinMaxStep"
|
|
37
38
|
| ""
|
|
38
39
|
|
|
@@ -41,7 +42,7 @@
|
|
|
41
42
|
|
|
42
43
|
{#snippet Variable()}
|
|
43
44
|
<UI.Select
|
|
44
|
-
label={{ name: $
|
|
45
|
+
label={{ name: $T("constructor.props.variable") }}
|
|
45
46
|
type="input"
|
|
46
47
|
options={VARIABLE_OPTIONS}
|
|
47
48
|
value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id)}
|
|
@@ -57,7 +58,7 @@
|
|
|
57
58
|
|
|
58
59
|
{#snippet Access()}
|
|
59
60
|
<UI.Select
|
|
60
|
-
label={{ name: $
|
|
61
|
+
label={{ name: $T("constructor.props.access") }}
|
|
61
62
|
type="buttons"
|
|
62
63
|
options={component.type === "Accordion" ||
|
|
63
64
|
component.type === "Tabs" ||
|
|
@@ -74,7 +75,7 @@
|
|
|
74
75
|
|
|
75
76
|
{#snippet Colors(initialValue: { color: UI.IOption<string>; uselessColors?: string[]; updateProperty?: (option: UI.IOption | UI.IOption[]) => {} })}
|
|
76
77
|
<UI.Select
|
|
77
|
-
label={{ name: $
|
|
78
|
+
label={{ name: $T("constructor.props.colors") }}
|
|
78
79
|
type="buttons"
|
|
79
80
|
options={$optionsStore.COLOR_OPTIONS.filter((o) => !initialValue.uselessColors?.includes(o.value))}
|
|
80
81
|
value={initialValue.color}
|
|
@@ -87,7 +88,7 @@
|
|
|
87
88
|
|
|
88
89
|
{#snippet Label()}
|
|
89
90
|
<UI.Input
|
|
90
|
-
label={{ name: $
|
|
91
|
+
label={{ name: $T("constructor.props.label") }}
|
|
91
92
|
value={(
|
|
92
93
|
component.properties as
|
|
93
94
|
| UI.IAccordionProps
|
|
@@ -107,7 +108,7 @@
|
|
|
107
108
|
|
|
108
109
|
{#snippet LabelAlign(initialAlign: UI.IOption<string>)}
|
|
109
110
|
<UI.Select
|
|
110
|
-
label={{ name: $
|
|
111
|
+
label={{ name: $T("constructor.props.align") }}
|
|
111
112
|
type="buttons"
|
|
112
113
|
value={initialAlign}
|
|
113
114
|
options={component.type == "Accordion" ? $optionsStore.JUSTIFY_ALIGN_OPTIONS : $optionsStore.TEXT_ALIGN_OPTIONS.slice(0, -1)}
|
|
@@ -138,7 +139,7 @@
|
|
|
138
139
|
|
|
139
140
|
{#snippet LabelClass()}
|
|
140
141
|
<UI.Input
|
|
141
|
-
label={{ name: $
|
|
142
|
+
label={{ name: $T("constructor.props.label.class") }}
|
|
142
143
|
value={(
|
|
143
144
|
component.properties as
|
|
144
145
|
| UI.IAccordionProps
|
|
@@ -158,7 +159,7 @@
|
|
|
158
159
|
|
|
159
160
|
{#snippet Identificator()}
|
|
160
161
|
<UI.Input
|
|
161
|
-
label={{ name: $
|
|
162
|
+
label={{ name: $T("constructor.props.id") }}
|
|
162
163
|
value={component.properties.id}
|
|
163
164
|
onUpdate={(value) => updateProperty("id", value as string, component, onPropertyChange)}
|
|
164
165
|
/>
|
|
@@ -166,7 +167,7 @@
|
|
|
166
167
|
|
|
167
168
|
{#snippet WrapperClass()}
|
|
168
169
|
<UI.Input
|
|
169
|
-
label={{ name: $
|
|
170
|
+
label={{ name: $T("constructor.props.wrapperclass") }}
|
|
170
171
|
value={component.properties.wrapperClass}
|
|
171
172
|
onUpdate={(value) => updateProperty("wrapperClass", value as string, component, onPropertyChange)}
|
|
172
173
|
/>
|
|
@@ -174,7 +175,7 @@
|
|
|
174
175
|
|
|
175
176
|
{#snippet Disabled()}
|
|
176
177
|
<UI.Switch
|
|
177
|
-
label={{ name: $
|
|
178
|
+
label={{ name: $T("constructor.props.disabled") }}
|
|
178
179
|
value={(component.properties as UI.IInputProps | UI.ISwitchProps | UI.ISliderProps | UI.IFileAttachProps)?.disabled ? 1 : 0}
|
|
179
180
|
options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
|
|
180
181
|
onChange={(value) => updateProperty("disabled", value, component, onPropertyChange)}
|
|
@@ -183,7 +184,7 @@
|
|
|
183
184
|
|
|
184
185
|
{#snippet EventHandlerArgument()}
|
|
185
186
|
<UI.Select
|
|
186
|
-
label={{ name: $
|
|
187
|
+
label={{ name: $T("constructor.props.action") }}
|
|
187
188
|
type="buttons"
|
|
188
189
|
value={$optionsStore.SHORT_ARGUMENT_OPTION.find((h) => h.value === component.eventHandler?.Argument)}
|
|
189
190
|
options={$optionsStore.SHORT_ARGUMENT_OPTION}
|
|
@@ -196,13 +197,25 @@
|
|
|
196
197
|
|
|
197
198
|
{#snippet Readonly()}
|
|
198
199
|
<UI.Switch
|
|
199
|
-
label={{ name: $
|
|
200
|
+
label={{ name: $T("constructor.props.readonly") }}
|
|
200
201
|
value={Number((component.properties as UI.IColorPickerProps | UI.IInputProps | UI.IJoystickProps | UI.IWidgetProps).readonly)}
|
|
201
202
|
options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
|
|
202
203
|
onChange={(value) => updateProperty("readonly", value, component, onPropertyChange)}
|
|
203
204
|
/>
|
|
204
205
|
{/snippet}
|
|
205
206
|
|
|
207
|
+
{#snippet BitModeInfo()}
|
|
208
|
+
{#if (component.properties as UI.IInputProps).type === "bitMode" || (component.properties as UI.ISelectProps).bitMode || (component.properties as UI.ISwitchProps).bitMode}
|
|
209
|
+
<UI.TextField
|
|
210
|
+
wrapperClass="mt-5 shadow-(--border-shadow-color) bg-(--blue-color)/20"
|
|
211
|
+
content={{
|
|
212
|
+
name: "Выберите битовый диапазон в рамках глобальной переменной для данного компонента.",
|
|
213
|
+
}}
|
|
214
|
+
background
|
|
215
|
+
/>
|
|
216
|
+
{/if}
|
|
217
|
+
{/snippet}
|
|
218
|
+
|
|
206
219
|
{#snippet MinMaxStep(initialValue: {
|
|
207
220
|
number: { minNum: number; maxNum: number; step?: number }
|
|
208
221
|
bitMode?: boolean
|
|
@@ -210,14 +223,14 @@
|
|
|
210
223
|
})}
|
|
211
224
|
<div class="flex">
|
|
212
225
|
<UI.Input
|
|
213
|
-
label={{ name: $
|
|
226
|
+
label={{ name: $T("constructor.props.min") }}
|
|
214
227
|
value={initialValue.number?.minNum}
|
|
215
228
|
type="number"
|
|
216
229
|
readonly={initialValue.bitMode}
|
|
217
230
|
onUpdate={(value) => initialValue.updateProperty(value as number, "number.minNum")}
|
|
218
231
|
/>
|
|
219
232
|
<UI.Input
|
|
220
|
-
label={{ name: $
|
|
233
|
+
label={{ name: $T("constructor.props.max") }}
|
|
221
234
|
value={initialValue.number?.maxNum}
|
|
222
235
|
type="number"
|
|
223
236
|
readonly={initialValue.bitMode}
|
|
@@ -225,7 +238,7 @@
|
|
|
225
238
|
/>
|
|
226
239
|
{#if component.type !== "ProgressBar" && component.type !== "Joystick"}
|
|
227
240
|
<UI.Input
|
|
228
|
-
label={{ name: $
|
|
241
|
+
label={{ name: $T("constructor.props.step") }}
|
|
229
242
|
value={initialValue.number?.step}
|
|
230
243
|
type="number"
|
|
231
244
|
number={{ minNum: 0, maxNum: 1000000, step: 1 }}
|
|
@@ -256,7 +269,7 @@
|
|
|
256
269
|
onkeydown={null}
|
|
257
270
|
onclick={() => (initialValue.icons.selectArray ? initialValue.updateProperty(category[1]) : {})}
|
|
258
271
|
>
|
|
259
|
-
<div class="absolute -top-3.5 bg-(--back-color) px-1">{$
|
|
272
|
+
<div class="absolute -top-3.5 bg-(--back-color) px-1">{$T(`constructor.props.icon.${category[0]}`)}</div>
|
|
260
273
|
<div class="grid place-items-center gap-2" style="grid-template-columns: repeat({initialValue.icons.selectArray ? 9 : 3}, minmax(0, 1fr));">
|
|
261
274
|
{#each category[1] as icon}
|
|
262
275
|
<button
|
|
@@ -301,6 +314,8 @@
|
|
|
301
314
|
{@render EventHandlerArgument()}
|
|
302
315
|
{:else if snippet === "Readonly"}
|
|
303
316
|
{@render Readonly()}
|
|
317
|
+
{:else if snippet === "BitModeInfo"}
|
|
318
|
+
{@render BitModeInfo()}
|
|
304
319
|
{:else if snippet === "IconsLib"}
|
|
305
320
|
{@render IconsLib(initialValue)}
|
|
306
321
|
{:else if snippet === "MinMaxStep"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as UI from "./";
|
|
2
|
-
type snippetNames = "Variable" | "Access" | "Colors" | "Label" | "LabelAlign" | "LabelClass" | "Identificator" | "WrapperClass" | "Disabled" | "EventHandlerArgument" | "IconsLib" | "Readonly" | "MinMaxStep" | "";
|
|
2
|
+
type snippetNames = "Variable" | "Access" | "Colors" | "Label" | "LabelAlign" | "LabelClass" | "Identificator" | "WrapperClass" | "Disabled" | "EventHandlerArgument" | "IconsLib" | "Readonly" | "BitModeInfo" | "MinMaxStep" | "";
|
|
3
3
|
type $$ComponentProps = {
|
|
4
4
|
snippet: snippetNames;
|
|
5
5
|
component: UI.UIComponent;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { Select, Switch,
|
|
2
|
+
import { Select, Switch, T, type IOption } from "./"
|
|
3
3
|
import type { Snippet } from "svelte"
|
|
4
4
|
import { fade } from "svelte/transition"
|
|
5
5
|
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
|
|
15
15
|
let isCopied = $state(false)
|
|
16
16
|
let snippetOptions = [
|
|
17
|
-
{ id: crypto.randomUUID(), value: "overview", name: $
|
|
18
|
-
{ id: crypto.randomUUID(), value: "examples", name: $
|
|
19
|
-
{ id: crypto.randomUUID(), value: "props", name: $
|
|
17
|
+
{ id: crypto.randomUUID(), value: "overview", name: $T("library.overview") },
|
|
18
|
+
{ id: crypto.randomUUID(), value: "examples", name: $T("library.examples") },
|
|
19
|
+
{ id: crypto.randomUUID(), value: "props", name: $T("library.props") },
|
|
20
20
|
]
|
|
21
21
|
|
|
22
22
|
let mainSnippet: string | undefined = $state("overview")
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
</div>
|
|
49
49
|
<Switch
|
|
50
50
|
wrapperClass="w-60 self-end p-2"
|
|
51
|
-
label={{ name: $
|
|
51
|
+
label={{ name: $T("library.for_constructor") }}
|
|
52
52
|
value={forConstructor ? 1 : 0}
|
|
53
53
|
options={[{ id: crypto.randomUUID(), value: 0 }]}
|
|
54
54
|
onChange={(value) => (forConstructor = value == 0 ? false : true)}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import {
|
|
2
|
+
import { T } from "../locales/i18n"
|
|
3
3
|
import type { IFileAttachProps } from "../types"
|
|
4
4
|
import { twMerge } from "tailwind-merge"
|
|
5
5
|
|
|
@@ -87,10 +87,10 @@
|
|
|
87
87
|
"
|
|
88
88
|
>
|
|
89
89
|
<div class="flex w-1/3 items-center justify-center bg-(--blue-color) p-2 py-1 {disabled ? 'opacity-50' : ''}">
|
|
90
|
-
{$
|
|
90
|
+
{$T("constructor.props.file.select")}
|
|
91
91
|
</div>
|
|
92
92
|
<div class="flex flex-1 items-center justify-start truncate bg-(--back-color) px-2 {disabled ? 'opacity-50' : ''}">
|
|
93
|
-
<p class="truncate">{fileName || $
|
|
93
|
+
<p class="truncate">{fileName || $T("constructor.props.file.notselected")}</p>
|
|
94
94
|
</div>
|
|
95
95
|
</div>
|
|
96
96
|
</label>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!-- $lib/ElementsUI/ButtonProps.svelte -->
|
|
2
2
|
<script lang="ts">
|
|
3
|
-
import {
|
|
3
|
+
import { T } from "../locales/i18n"
|
|
4
4
|
import { type IFileAttachProps, type IUIComponentHandler, type UIComponent, updateProperty } from "../types"
|
|
5
5
|
import * as UI from ".."
|
|
6
6
|
import { optionsStore } from "../options"
|
|
@@ -30,16 +30,16 @@
|
|
|
30
30
|
|
|
31
31
|
{#snippet FileAccept()}
|
|
32
32
|
<UI.Input
|
|
33
|
-
label={{ name: $
|
|
33
|
+
label={{ name: $T("constructor.props.file.accept") }}
|
|
34
34
|
value={component.properties.accept}
|
|
35
|
-
help={{ info: $
|
|
35
|
+
help={{ info: $T("constructor.props.file.accept.help") }}
|
|
36
36
|
onUpdate={(value) => updateProperty("accept", value as string, component, onPropertyChange)}
|
|
37
37
|
/>
|
|
38
38
|
{/snippet}
|
|
39
39
|
|
|
40
40
|
{#snippet FileType()}
|
|
41
41
|
<UI.Select
|
|
42
|
-
label={{ name: $
|
|
42
|
+
label={{ name: $T("constructor.props.type") }}
|
|
43
43
|
type="buttons"
|
|
44
44
|
value={$optionsStore.FILE_ATTACH_TYPE_OPTIONS.find((c) => (c.value as string).includes(component.properties.type))}
|
|
45
45
|
options={$optionsStore.FILE_ATTACH_TYPE_OPTIONS}
|
|
@@ -49,13 +49,13 @@
|
|
|
49
49
|
{#if component.properties.type === "image"}
|
|
50
50
|
<div class="flex gap-4">
|
|
51
51
|
<UI.Input
|
|
52
|
-
label={{ name: $
|
|
52
|
+
label={{ name: $T("constructor.props.imageSize.height") }}
|
|
53
53
|
type="number"
|
|
54
54
|
value={component.properties.imageSize.height.replace("rem", "")}
|
|
55
55
|
onUpdate={(value) => updateProperty("imageSize.height", `${value as string}rem`, component, onPropertyChange)}
|
|
56
56
|
/>
|
|
57
57
|
<UI.Input
|
|
58
|
-
label={{ name: $
|
|
58
|
+
label={{ name: $T("constructor.props.imageSize.width") }}
|
|
59
59
|
type="number"
|
|
60
60
|
value={component.properties.imageSize.width.replace("rem", "")}
|
|
61
61
|
onUpdate={(value) => updateProperty("imageSize.width", `${value as string}rem`, component, onPropertyChange)}
|
|
@@ -63,14 +63,14 @@
|
|
|
63
63
|
</div>
|
|
64
64
|
<div class="flex gap-4">
|
|
65
65
|
<UI.Select
|
|
66
|
-
label={{ name: $
|
|
66
|
+
label={{ name: $T("constructor.props.fitmode") }}
|
|
67
67
|
type="buttons"
|
|
68
68
|
value={$optionsStore.FITMODE_OPTIONS.find((c) => (c.value as string).includes(component.properties.imageSize.fitMode))}
|
|
69
69
|
options={$optionsStore.FITMODE_OPTIONS}
|
|
70
70
|
onUpdate={(option) => updateProperty("imageSize.fitMode", (option as UI.IOption).value as string, component, onPropertyChange)}
|
|
71
71
|
/>
|
|
72
72
|
<UI.Select
|
|
73
|
-
label={{ name: $
|
|
73
|
+
label={{ name: $T("constructor.props.form") }}
|
|
74
74
|
type="buttons"
|
|
75
75
|
value={$optionsStore.FORM_OPTIONS.find((c) => (c.value as string).includes(component.properties.imageSize.form))}
|
|
76
76
|
options={$optionsStore.FORM_OPTIONS}
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
- Поддерживает настройку типа компонента (файл или изображение)
|
|
150
150
|
- Включает настройки размеров и режима отображения для изображений
|
|
151
151
|
- Имеет различные наборы полей в зависимости от режима (`forConstructor`)
|
|
152
|
-
- Использует систему локализации через `$
|
|
152
|
+
- Использует систему локализации через `$T('constructor.props.*')`
|
|
153
153
|
|
|
154
154
|
## Заметки
|
|
155
155
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { getContext } from "svelte"
|
|
3
|
-
import {
|
|
3
|
+
import { T } from "../locales/i18n"
|
|
4
4
|
import { type UIComponent, type IGraphProps, updateProperty, type IUIComponentHandler } from "../types"
|
|
5
5
|
import * as UI from ".."
|
|
6
6
|
import { optionsStore } from "../options"
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
{#snippet GraphIsTest()}
|
|
31
31
|
<UI.Switch
|
|
32
32
|
wrapperClass="bg-blue"
|
|
33
|
-
label={{ name: $
|
|
33
|
+
label={{ name: $T("constructor.props.istest") }}
|
|
34
34
|
value={component.properties.isTest}
|
|
35
35
|
options={[{ id: crypto.randomUUID(), value: 0, class: "" }]}
|
|
36
36
|
onChange={(value) => updateProperty("isTest", value, component, onPropertyChange)}
|
package/dist/Graph/README.md
CHANGED
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
- Поддерживает настройку переменной для отображения
|
|
129
129
|
- Включает переключатель для режима тестирования
|
|
130
130
|
- Имеет различные наборы полей в зависимости от режима (`forConstructor`)
|
|
131
|
-
- Использует систему локализации через `$
|
|
131
|
+
- Использует систему локализации через `$T('constructor.props.*')`
|
|
132
132
|
|
|
133
133
|
## Заметки
|
|
134
134
|
|