poe-svelte-ui-lib 1.11.3 → 1.13.1
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/README.md +19 -31
- package/dist/Button/README.md +28 -45
- package/dist/Carousel/README.md +10 -17
- package/dist/ColorPicker/README.md +17 -24
- package/dist/ComponentExample.svelte +64 -64
- package/dist/ComponentExample.svelte.d.ts +1 -1
- package/dist/FileAttach/README.md +24 -36
- package/dist/Graph/README.md +23 -40
- package/dist/Input/README.md +180 -0
- package/dist/Joystick/README.md +20 -33
- package/dist/Map/Map.svelte +71 -15
- package/dist/Map/Map.svelte.d.ts +1 -1
- package/dist/Map/MapProps.svelte +35 -2
- package/dist/Map/MapProps.svelte.d.ts +2 -2
- package/dist/Map/README.md +23 -32
- package/dist/Map/mapWrapper/Line.svelte +59 -0
- package/dist/Map/mapWrapper/Line.svelte.d.ts +10 -0
- package/dist/Map/mapWrapper/index.d.ts +1 -0
- package/dist/Map/mapWrapper/index.js +1 -0
- package/dist/ProgressBar/README.md +22 -38
- package/dist/Select/README.md +32 -32
- package/dist/Slider/README.md +22 -34
- package/dist/Switch/README.md +31 -35
- package/dist/Table/README.md +103 -55
- package/dist/Tabs/README.md +23 -35
- package/dist/TextField/README.md +15 -21
- package/dist/VideoViewer/README.md +149 -0
- package/dist/Widget/README.md +34 -44
- package/dist/locales/i18n.js +3 -1
- package/dist/locales/translations.d.ts +8 -6
- package/dist/locales/translations.js +356 -315
- package/dist/types.d.ts +2 -0
- package/package.json +1 -1
package/dist/Accordion/README.md
CHANGED
|
@@ -6,32 +6,20 @@
|
|
|
6
6
|
|
|
7
7
|
## Пропсы
|
|
8
8
|
|
|
9
|
-
| Название
|
|
10
|
-
|
|
|
11
|
-
| id
|
|
12
|
-
| isOpen
|
|
13
|
-
| wrapperClass | string
|
|
14
|
-
| size
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
| Название | Тип | По умолчанию | Описание |
|
|
24
|
-
| -------- | ---------------------------------------------------- | ------------ | ----------------------------------------------------------- |
|
|
25
|
-
| name | string | "" | Текст заголовка аккордеона |
|
|
26
|
-
| class | string | "text-left" | CSS-классы для стилизации текста заголовка |
|
|
27
|
-
| icon | ConstructorOfATypedSvelteComponent \| string \| null | null | Иконка, отображаемая в заголовке (SVG строка или компонент) |
|
|
28
|
-
|
|
29
|
-
#### Size
|
|
30
|
-
|
|
31
|
-
| Название | Тип | По умолчанию | Описание |
|
|
32
|
-
| -------- | ------ | ------------ | -------------------------------------- |
|
|
33
|
-
| height | number | 1 | Количество строк в сетке содержимого |
|
|
34
|
-
| width | number | 1 | Количество колонок в сетке содержимого |
|
|
9
|
+
| Название | Тип | По умолчанию | Описание |
|
|
10
|
+
| --- | --- | --- | --- |
|
|
11
|
+
| `id` | `string` | `crypto.randomUUID()` | Уникальный идентификатор компонента |
|
|
12
|
+
| `isOpen` | `boolean` | `false` | Состояние открытия/закрытия аккордеона |
|
|
13
|
+
| `wrapperClass` | `string` | `""` | Дополнительные CSS-классы для обертки компонента |
|
|
14
|
+
| `size` | `object` | `-` | Размеры сетки содержимого (количество колонок и строк) |
|
|
15
|
+
| `size.height` | `number` | `1` | Количество строк в сетке содержимого |
|
|
16
|
+
| `size.width` | `number` | `1` | Количество колонок в сетке содержимого |
|
|
17
|
+
| `label` | `object` | `-` | Настройки заголовка аккордеона |
|
|
18
|
+
| `label.name` | `string` | `""` | Текст заголовка аккордеона |
|
|
19
|
+
| `label.class` | `string` | `"text-left"` | CSS-классы для стилизации текста заголовка |
|
|
20
|
+
| `label.icon` | `ConstructorOfATypedSvelteComponent \| string \| null` | `null` | Иконка, отображаемая в заголовке (SVG строка или компонент) |
|
|
21
|
+
| `children` | `Snippet` | `undefined` | Слот для содержимого, которое будет отображаться при открытии |
|
|
22
|
+
| `image` | `string` | `""` | URL изображения для фона содержимого аккордеона |
|
|
35
23
|
|
|
36
24
|
## События
|
|
37
25
|
|
|
@@ -117,11 +105,11 @@
|
|
|
117
105
|
|
|
118
106
|
### Пропсы конструктора
|
|
119
107
|
|
|
120
|
-
| Название
|
|
121
|
-
|
|
|
122
|
-
| component
|
|
123
|
-
| onPropertyChange | (updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void |
|
|
124
|
-
| forConstructor
|
|
108
|
+
| Название | Тип | По умолчанию | Описание |
|
|
109
|
+
| --- | --- | --- | --- |
|
|
110
|
+
| `component` | `UIComponent & { properties: Partial<IAccordionProps> }` | `-` | Объект компонента с его свойствами |
|
|
111
|
+
| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-` | Коллбэк для обновления свойств компонента |
|
|
112
|
+
| `forConstructor` | `boolean` | `true` | Режим отображения (для конструктора или редактирования) |
|
|
125
113
|
|
|
126
114
|
### Особенности конструктора
|
|
127
115
|
|
package/dist/Button/README.md
CHANGED
|
@@ -6,49 +6,32 @@
|
|
|
6
6
|
|
|
7
7
|
## Пропсы
|
|
8
8
|
|
|
9
|
-
| Название
|
|
10
|
-
|
|
|
11
|
-
| id
|
|
12
|
-
| wrapperClass
|
|
13
|
-
| componentClass | string
|
|
14
|
-
| disabled
|
|
15
|
-
| content
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
29
|
-
#### Info
|
|
30
|
-
|
|
31
|
-
| Название | Тип | По умолчанию | Описание |
|
|
32
|
-
| -------- | -------------------------------------- | ------------ | ------------------------------ |
|
|
33
|
-
| text | string | "" | Текст информационной подсказки |
|
|
34
|
-
| side | "top" \| "bottom" \| "left" \| "right" | "top" | Сторона отображения подсказки |
|
|
35
|
-
|
|
36
|
-
#### KeyBind
|
|
37
|
-
|
|
38
|
-
| Название | Тип | По умолчанию | Описание |
|
|
39
|
-
| -------- | ------- | ------------ | ------------------------------------------ |
|
|
40
|
-
| key | string | undefined | Клавиша для активации |
|
|
41
|
-
| ctrlKey | boolean | undefined | Требование нажатия Ctrl |
|
|
42
|
-
| shiftKey | boolean | undefined | Требование нажатия Shift |
|
|
43
|
-
| altKey | boolean | undefined | Требование нажатия Alt |
|
|
44
|
-
| metaKey | boolean | undefined | Требование нажатия Meta (Cmd на Mac) |
|
|
45
|
-
| showHint | boolean | true | Показывать ли подсказку о горячих клавишах |
|
|
9
|
+
| Название | Тип | По умолчанию | Описание |
|
|
10
|
+
| --- | --- | --- | --- |
|
|
11
|
+
| `id` | `string` | `crypto.randomUUID()` | Уникальный идентификатор компонента |
|
|
12
|
+
| `wrapperClass` | `string` | `""` | Дополнительные CSS-классы для обертки компонента |
|
|
13
|
+
| `componentClass` | `string` | `""` | CSS-классы для стилизации самой кнопки |
|
|
14
|
+
| `disabled` | `boolean` | `false` | Состояние отключения кнопки |
|
|
15
|
+
| `content` | `object` | `undefined` | Настройки содержимого кнопки |
|
|
16
|
+
| `content.name` | `string` | `""` | Текст кнопки |
|
|
17
|
+
| `content.info` | `object` | `undefined` | Информационная подсказка |
|
|
18
|
+
| `content.info.text` | `string` | `""` | Текст информационной подсказки |
|
|
19
|
+
| `content.info.side` | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | Сторона отображения подсказки |
|
|
20
|
+
| `content.icon` | `ConstructorOfATypedSvelteComponent \| string \| null` | `null` | Иконка, отображаемая в кнопке (SVG строка или Svelte-компонент); без `content.name` и с заданной иконкой кнопка рендерится как круглая без фона |
|
|
21
|
+
| `keyBind` | `object` | `{ showHint: true }` | Настройки горячих клавиш для активации кнопки |
|
|
22
|
+
| `keyBind.key` | `string` | `undefined` | Клавиша для активации |
|
|
23
|
+
| `keyBind.ctrlKey` | `boolean` | `undefined` | Требование нажатия Ctrl |
|
|
24
|
+
| `keyBind.shiftKey` | `boolean` | `undefined` | Требование нажатия Shift |
|
|
25
|
+
| `keyBind.altKey` | `boolean` | `undefined` | Требование нажатия Alt |
|
|
26
|
+
| `keyBind.metaKey` | `boolean` | `undefined` | Требование нажатия Meta (Cmd на Mac) |
|
|
27
|
+
| `keyBind.showHint` | `boolean` | `true` | Показывать ли подсказку о горячих клавишах |
|
|
28
|
+
| `onClick` | `() => void` | `undefined` | Обработчик клика по кнопке |
|
|
46
29
|
|
|
47
30
|
## События
|
|
48
31
|
|
|
49
|
-
| Название | Тип
|
|
50
|
-
|
|
|
51
|
-
| onClick
|
|
32
|
+
| Название | Тип | Описание |
|
|
33
|
+
| --- | --- | --- |
|
|
34
|
+
| onClick | () => void | Срабатывает при клике по кнопке или при активации через горячую клавишу |
|
|
52
35
|
|
|
53
36
|
## Примеры
|
|
54
37
|
|
|
@@ -148,11 +131,11 @@
|
|
|
148
131
|
|
|
149
132
|
### Пропсы конструктора
|
|
150
133
|
|
|
151
|
-
| Название
|
|
152
|
-
|
|
|
153
|
-
| component
|
|
154
|
-
| onPropertyChange | (updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void |
|
|
155
|
-
| forConstructor
|
|
134
|
+
| Название | Тип | По умолчанию | Описание |
|
|
135
|
+
| --- | --- | --- | --- |
|
|
136
|
+
| `component` | `UIComponent & { properties: Partial<IButtonProps> }` | `-` | Объект компонента с его свойствами |
|
|
137
|
+
| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-` | Коллбэк для обновления свойств компонента |
|
|
138
|
+
| `forConstructor` | `boolean` | `true` | Режим отображения (для конструктора или редактирования) |
|
|
156
139
|
|
|
157
140
|
### Особенности конструктора
|
|
158
141
|
|
package/dist/Carousel/README.md
CHANGED
|
@@ -6,26 +6,19 @@
|
|
|
6
6
|
|
|
7
7
|
## Пропсы
|
|
8
8
|
|
|
9
|
-
| Название
|
|
10
|
-
|
|
|
11
|
-
| id
|
|
12
|
-
| wrapperClass | string
|
|
13
|
-
| label
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
#### Label
|
|
20
|
-
|
|
21
|
-
| Название | Тип | По умолчанию | Описание |
|
|
22
|
-
| -------- | ------ | ------------ | ------------------------------------------ |
|
|
23
|
-
| name | string | "" | Текст заголовка карусели |
|
|
24
|
-
| class | string | "text-left" | CSS-классы для стилизации текста заголовка |
|
|
9
|
+
| Название | Тип | По умолчанию | Описание |
|
|
10
|
+
| --- | --- | --- | --- |
|
|
11
|
+
| `id` | `string` | `crypto.randomUUID()` | Уникальный идентификатор компонента |
|
|
12
|
+
| `wrapperClass` | `string` | `""` | Дополнительные CSS-классы для обертки компонента |
|
|
13
|
+
| `label` | `object` | `-` | Настройки заголовка карусели |
|
|
14
|
+
| `label.name` | `string` | `""` | Текст заголовка карусели |
|
|
15
|
+
| `label.class` | `string` | `"text-left"` | CSS-классы для стилизации текста заголовка |
|
|
16
|
+
| `scrollValue` | `number` | `200` | Значение прокрутки при нажатии на стрелки (в пикселях) |
|
|
17
|
+
| `children` | `Snippet` | `undefined` | Слот для содержимого, которое будет отображаться в карусели |
|
|
25
18
|
|
|
26
19
|
## События
|
|
27
20
|
|
|
28
|
-
Компонент не генерирует
|
|
21
|
+
Компонент не принимает коллбэк-пропсы и не генерирует событий.
|
|
29
22
|
|
|
30
23
|
## Примеры
|
|
31
24
|
|
|
@@ -6,28 +6,21 @@
|
|
|
6
6
|
|
|
7
7
|
## Пропсы
|
|
8
8
|
|
|
9
|
-
| Название
|
|
10
|
-
|
|
|
11
|
-
| id
|
|
12
|
-
|
|
|
13
|
-
|
|
|
14
|
-
| label
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
#### Label
|
|
21
|
-
|
|
22
|
-
| Название | Тип | По умолчанию | Описание |
|
|
23
|
-
| -------- | ------ | ------------ | ------------------------------------------ |
|
|
24
|
-
| name | string | "" | Текст заголовка компонента |
|
|
25
|
-
| class | string | "" | CSS-классы для стилизации текста заголовка |
|
|
9
|
+
| Название | Тип | По умолчанию | Описание |
|
|
10
|
+
| --- | --- | --- | --- |
|
|
11
|
+
| `id` | `string` | `crypto.randomUUID()` | Уникальный идентификатор компонента |
|
|
12
|
+
| `wrapperClass` | `string` | `""` | Дополнительные CSS-классы для обертки компонента |
|
|
13
|
+
| `label` | `object` | `-` | Настройки заголовка компонента |
|
|
14
|
+
| `label.name` | `string` | `""` | Текст заголовка компонента |
|
|
15
|
+
| `label.class` | `string` | `""` | CSS-классы для стилизации текста заголовка |
|
|
16
|
+
| `value` | `number[]` | `[0, 0, 0]` | Текущее значение цвета в формате RGB-массива (3 числа 0-255) |
|
|
17
|
+
| `readonly` | `boolean` | `false` | Режим только для чтения (без возможности изменения цвета) |
|
|
18
|
+
| `onChange` | `(value: number[]) => void` | `() => {}` | Обработчик изменения цвета |
|
|
26
19
|
|
|
27
20
|
## События
|
|
28
21
|
|
|
29
|
-
| Название | Тип
|
|
30
|
-
|
|
|
22
|
+
| Название | Тип | Описание |
|
|
23
|
+
| --- | --- | --- |
|
|
31
24
|
| onChange | ([number, number, number]) => void | Срабатывает при изменении цвета, передает массив RGB значений |
|
|
32
25
|
|
|
33
26
|
## Примеры
|
|
@@ -106,11 +99,11 @@
|
|
|
106
99
|
|
|
107
100
|
### Пропсы конструктора
|
|
108
101
|
|
|
109
|
-
| Название
|
|
110
|
-
|
|
|
111
|
-
| component
|
|
112
|
-
| onPropertyChange | (updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void |
|
|
113
|
-
| forConstructor
|
|
102
|
+
| Название | Тип | По умолчанию | Описание |
|
|
103
|
+
| --- | --- | --- | --- |
|
|
104
|
+
| `component` | `UIComponent & { properties: Partial<IColorPickerProps> }` | `-` | Объект компонента с его свойствами |
|
|
105
|
+
| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-` | Коллбэк для обновления свойств компонента |
|
|
106
|
+
| `forConstructor` | `boolean` | `true` | Режим отображения (для конструктора или редактирования) |
|
|
114
107
|
|
|
115
108
|
### Особенности конструктора
|
|
116
109
|
|
|
@@ -7,88 +7,88 @@
|
|
|
7
7
|
component,
|
|
8
8
|
componentProps,
|
|
9
9
|
examples,
|
|
10
|
-
|
|
10
|
+
readmeHtml,
|
|
11
11
|
codeText,
|
|
12
12
|
forConstructor = $bindable(),
|
|
13
|
-
}: { component: Snippet; componentProps: Snippet; examples?: Snippet;
|
|
13
|
+
}: { component: Snippet; componentProps: Snippet; examples?: Snippet; readmeHtml: string; codeText: string; forConstructor: boolean } = $props()
|
|
14
14
|
|
|
15
15
|
let isCopied = $state(false)
|
|
16
16
|
let snippetOptions = [
|
|
17
17
|
{ id: crypto.randomUUID(), value: "overview", name: $T("library.overview") },
|
|
18
18
|
{ id: crypto.randomUUID(), value: "examples", name: $T("library.examples") },
|
|
19
|
-
{ id: crypto.randomUUID(), value: "
|
|
19
|
+
{ id: crypto.randomUUID(), value: "info", name: $T("library.info") },
|
|
20
20
|
]
|
|
21
21
|
|
|
22
22
|
let mainSnippet: string | undefined = $state("overview")
|
|
23
|
-
|
|
24
|
-
const renderCurrentSnippet = () => {
|
|
25
|
-
if (mainSnippet === "examples" && examples) return examples
|
|
26
|
-
if (mainSnippet === "props" && props) return props
|
|
27
|
-
else return overview
|
|
28
|
-
}
|
|
29
23
|
</script>
|
|
30
24
|
|
|
31
|
-
<div class="flex flex-col">
|
|
25
|
+
<div class="flex h-full flex-col">
|
|
32
26
|
<Select
|
|
33
|
-
wrapperClass="w-1/2 mx-auto mb-3"
|
|
27
|
+
wrapperClass="w-1/2 mx-auto mb-3 shrink-0"
|
|
34
28
|
type="buttons"
|
|
35
29
|
options={snippetOptions}
|
|
36
30
|
value={snippetOptions.find((o) => o.value == mainSnippet)}
|
|
37
31
|
onUpdate={(value) => (mainSnippet = (value as IOption<string>).value)}
|
|
38
32
|
/>
|
|
39
|
-
<div class="flex-1">
|
|
40
|
-
{
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
{
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<div
|
|
73
|
-
class="right-1..5 absolute top-1/2 -translate-y-1/2 transform rounded-md bg-(--green-color) px-1.5 py-1 shadow-lg"
|
|
74
|
-
transition:fade={{ duration: 200 }}
|
|
33
|
+
<div class="min-h-0 flex-1">
|
|
34
|
+
{#key mainSnippet}
|
|
35
|
+
{#if mainSnippet === "examples" && examples}
|
|
36
|
+
{@render examples()}
|
|
37
|
+
{:else if mainSnippet === "info"}
|
|
38
|
+
<div class="h-full overflow-y-auto text-left">
|
|
39
|
+
{@html readmeHtml}
|
|
40
|
+
</div>
|
|
41
|
+
{:else}
|
|
42
|
+
<div class="flex h-full w-full flex-col">
|
|
43
|
+
<div class="min-h-40 flex-[1]">
|
|
44
|
+
{@render component()}
|
|
45
|
+
</div>
|
|
46
|
+
<Switch
|
|
47
|
+
wrapperClass="w-60 self-end p-2 shrink-0"
|
|
48
|
+
label={{ name: $T("library.for_constructor") }}
|
|
49
|
+
value={forConstructor ? 1 : 0}
|
|
50
|
+
options={[{ id: crypto.randomUUID(), value: 0 }]}
|
|
51
|
+
onChange={(value) => (forConstructor = value == 0 ? false : true)}
|
|
52
|
+
/>
|
|
53
|
+
<div class="border-t border-gray-500 shrink-0"></div>
|
|
54
|
+
<div class="min-h-0 flex-[2] overflow-y-auto" transition:fade={{ duration: 200 }}>
|
|
55
|
+
{@render componentProps()}
|
|
56
|
+
<div class="relative mt-3">
|
|
57
|
+
<button
|
|
58
|
+
class="absolute top-2 right-3 flex cursor-pointer border-none bg-transparent"
|
|
59
|
+
onclick={(e) => {
|
|
60
|
+
e.preventDefault()
|
|
61
|
+
navigator.clipboard.writeText(codeText)
|
|
62
|
+
isCopied = true
|
|
63
|
+
setTimeout(() => (isCopied = false), 1000)
|
|
64
|
+
}}
|
|
65
|
+
aria-label="Копировать текст"
|
|
75
66
|
>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
67
|
+
<div class="size-6 text-sm [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full">
|
|
68
|
+
{#if isCopied}
|
|
69
|
+
<div
|
|
70
|
+
class="right-1..5 absolute top-1/2 -translate-y-1/2 transform rounded-md bg-(--green-color) px-1.5 py-1 shadow-lg"
|
|
71
|
+
transition:fade={{ duration: 200 }}
|
|
72
|
+
>
|
|
73
|
+
✓
|
|
74
|
+
</div>
|
|
75
|
+
{:else}
|
|
76
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
|
|
77
|
+
<g fill="none" stroke="currentColor" stroke-width="1.5">
|
|
78
|
+
<path
|
|
79
|
+
d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"
|
|
80
|
+
/>
|
|
81
|
+
<path d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3" />
|
|
82
|
+
</g>
|
|
83
|
+
</svg>
|
|
84
|
+
{/if}
|
|
85
|
+
</div>
|
|
86
|
+
</button>
|
|
87
|
+
<pre class="overflow-x-auto">{codeText}</pre>
|
|
88
|
+
</div>
|
|
88
89
|
</div>
|
|
89
|
-
</
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
</div>
|
|
90
|
+
</div>
|
|
91
|
+
{/if}
|
|
92
|
+
{/key}
|
|
93
93
|
</div>
|
|
94
|
-
|
|
94
|
+
</div>
|
|
@@ -6,40 +6,28 @@
|
|
|
6
6
|
|
|
7
7
|
## Пропсы
|
|
8
8
|
|
|
9
|
-
| Название
|
|
10
|
-
|
|
|
11
|
-
| id
|
|
12
|
-
| wrapperClass | string
|
|
13
|
-
| label
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
|
26
|
-
| -------- | ------ | ------------ | ------------------------------------------ |
|
|
27
|
-
| name | string | "" | Текст заголовка компонента |
|
|
28
|
-
| class | string | "" | CSS-классы для стилизации текста заголовка |
|
|
29
|
-
|
|
30
|
-
#### ImageSize
|
|
31
|
-
|
|
32
|
-
| Название | Тип | По умолчанию | Описание |
|
|
33
|
-
| -------- | -------------------- | ------------ | -------------------------------------- |
|
|
34
|
-
| height | string | "10rem" | Высота области отображения изображения |
|
|
35
|
-
| width | string | "10rem" | Ширина области отображения изображения |
|
|
36
|
-
| fitMode | "cover" \| "contain" | "cover" | Режим масштабирования изображения |
|
|
37
|
-
| form | "square" \| "circle" | "square" | Форма области отображения изображения |
|
|
9
|
+
| Название | Тип | По умолчанию | Описание |
|
|
10
|
+
| --- | --- | --- | --- |
|
|
11
|
+
| `id` | `string` | `crypto.randomUUID()` | Уникальный идентификатор компонента |
|
|
12
|
+
| `wrapperClass` | `string` | `""` | Дополнительные CSS-классы для обертки компонента |
|
|
13
|
+
| `label` | `object` | `-` | Настройки заголовка компонента |
|
|
14
|
+
| `label.name` | `string` | `""` | Текст заголовка компонента |
|
|
15
|
+
| `label.class` | `string` | `""` | CSS-классы для стилизации текста заголовка |
|
|
16
|
+
| `type` | `"file" \| "image"` | `"file"` | Тип компонента (файл или изображение) |
|
|
17
|
+
| `accept` | `string` | `"*/*"` | MIME-типы файлов, которые можно выбрать |
|
|
18
|
+
| `imageSize` | `object` | `-` | Настройки отображения изображения |
|
|
19
|
+
| `imageSize.height` | `string` | `"10rem"` | Высота области отображения изображения |
|
|
20
|
+
| `imageSize.width` | `string` | `"10rem"` | Ширина области отображения изображения |
|
|
21
|
+
| `imageSize.fitMode` | `"cover" \| "contain"` | `"cover"` | Режим масштабирования изображения |
|
|
22
|
+
| `imageSize.form` | `"square" \| "circle"` | `"square"` | Форма области отображения изображения |
|
|
23
|
+
| `disabled` | `boolean` | `false` | Состояние отключения компонента |
|
|
24
|
+
| `currentImage` | `string \| null` | `""` | Текущее изображение (для связывания) |
|
|
25
|
+
| `onChange` | `(event: Event, file: File \| null) => void` | `() => {}` | Обработчик изменения файла |
|
|
38
26
|
|
|
39
27
|
## События
|
|
40
28
|
|
|
41
|
-
| Название | Тип
|
|
42
|
-
|
|
|
29
|
+
| Название | Тип | Описание |
|
|
30
|
+
| --- | --- | --- |
|
|
43
31
|
| onChange | (event: Event, file: File \| null) => void | Срабатывает при выборе файла, передает событие и выбранный файл (или null если файл удален) |
|
|
44
32
|
|
|
45
33
|
## Примеры
|
|
@@ -137,11 +125,11 @@
|
|
|
137
125
|
|
|
138
126
|
### Пропсы конструктора
|
|
139
127
|
|
|
140
|
-
| Название
|
|
141
|
-
|
|
|
142
|
-
| component
|
|
143
|
-
| onPropertyChange | (updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void |
|
|
144
|
-
| forConstructor
|
|
128
|
+
| Название | Тип | По умолчанию | Описание |
|
|
129
|
+
| --- | --- | --- | --- |
|
|
130
|
+
| `component` | `UIComponent & { properties: Partial<IFileAttachProps> }` | `-` | Объект компонента с его свойствами |
|
|
131
|
+
| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-` | Коллбэк для обновления свойств компонента |
|
|
132
|
+
| `forConstructor` | `boolean` | `true` | Режим отображения (для конструктора или редактирования) |
|
|
145
133
|
|
|
146
134
|
### Особенности конструктора
|
|
147
135
|
|