poe-svelte-ui-lib 1.15.5 → 1.16.2
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 -19
- package/dist/Button/README.md +28 -28
- package/dist/Carousel/README.md +9 -9
- package/dist/ColorPicker/README.md +17 -17
- package/dist/Divider/Divider.svelte +18 -0
- package/dist/Divider/Divider.svelte.d.ts +4 -0
- package/dist/Divider/DividerProps.svelte +109 -0
- package/dist/Divider/DividerProps.svelte.d.ts +16 -0
- package/dist/Divider/README.md +110 -0
- package/dist/FileAttach/README.md +24 -24
- package/dist/Graph/README.md +23 -23
- package/dist/Input/README.md +36 -36
- package/dist/Joystick/README.md +20 -20
- package/dist/Map/README.md +23 -23
- package/dist/ProgressBar/README.md +22 -22
- package/dist/Select/README.md +32 -32
- package/dist/Slider/README.md +22 -22
- package/dist/Switch/README.md +31 -31
- package/dist/Table/README.md +83 -85
- package/dist/Tabs/README.md +23 -23
- package/dist/TextField/README.md +15 -15
- package/dist/VideoViewer/README.md +21 -21
- package/dist/Widget/README.md +33 -33
- package/dist/index.d.ts +3 -1
- package/dist/index.js +2 -0
- package/dist/locales/translations.js +11 -15
- package/dist/options.d.ts +10 -0
- package/dist/options.js +9 -0
- package/dist/types.d.ts +13 -4
- package/package.json +2 -2
package/dist/Accordion/README.md
CHANGED
|
@@ -6,20 +6,20 @@
|
|
|
6
6
|
|
|
7
7
|
## Пропсы
|
|
8
8
|
|
|
9
|
-
| Название
|
|
10
|
-
|
|
|
11
|
-
| `id`
|
|
12
|
-
| `isOpen`
|
|
13
|
-
| `wrapperClass` | `string`
|
|
14
|
-
| `size`
|
|
15
|
-
| `size.height`
|
|
16
|
-
| `size.width`
|
|
17
|
-
| `label`
|
|
18
|
-
| `label.name`
|
|
19
|
-
| `label.class`
|
|
20
|
-
| `label.icon`
|
|
21
|
-
| `children`
|
|
22
|
-
| `image`
|
|
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 изображения для фона содержимого аккордеона |
|
|
23
23
|
|
|
24
24
|
## События
|
|
25
25
|
|
|
@@ -105,11 +105,11 @@
|
|
|
105
105
|
|
|
106
106
|
### Пропсы конструктора
|
|
107
107
|
|
|
108
|
-
| Название
|
|
109
|
-
|
|
|
110
|
-
| `component`
|
|
111
|
-
| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-`
|
|
112
|
-
| `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` | Режим отображения (для конструктора или редактирования) |
|
|
113
113
|
|
|
114
114
|
### Особенности конструктора
|
|
115
115
|
|
package/dist/Button/README.md
CHANGED
|
@@ -6,32 +6,32 @@
|
|
|
6
6
|
|
|
7
7
|
## Пропсы
|
|
8
8
|
|
|
9
|
-
| Название
|
|
10
|
-
|
|
|
11
|
-
| `id`
|
|
12
|
-
| `wrapperClass`
|
|
13
|
-
| `componentClass`
|
|
14
|
-
| `disabled`
|
|
15
|
-
| `content`
|
|
16
|
-
| `content.name`
|
|
17
|
-
| `content.info`
|
|
18
|
-
| `content.info.text` | `string`
|
|
19
|
-
| `content.info.side` | `"top" \| "bottom" \| "left" \| "right"`
|
|
20
|
-
| `content.icon`
|
|
21
|
-
| `keyBind`
|
|
22
|
-
| `keyBind.key`
|
|
23
|
-
| `keyBind.ctrlKey`
|
|
24
|
-
| `keyBind.shiftKey`
|
|
25
|
-
| `keyBind.altKey`
|
|
26
|
-
| `keyBind.metaKey`
|
|
27
|
-
| `keyBind.showHint`
|
|
28
|
-
| `onClick`
|
|
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` | Обработчик клика по кнопке |
|
|
29
29
|
|
|
30
30
|
## События
|
|
31
31
|
|
|
32
|
-
| Название | Тип
|
|
33
|
-
|
|
|
34
|
-
| onClick
|
|
32
|
+
| Название | Тип | Описание |
|
|
33
|
+
| -------- | ---------- | ----------------------------------------------------------------------- |
|
|
34
|
+
| onClick | () => void | Срабатывает при клике по кнопке или при активации через горячую клавишу |
|
|
35
35
|
|
|
36
36
|
## Примеры
|
|
37
37
|
|
|
@@ -131,11 +131,11 @@
|
|
|
131
131
|
|
|
132
132
|
### Пропсы конструктора
|
|
133
133
|
|
|
134
|
-
| Название
|
|
135
|
-
|
|
|
136
|
-
| `component`
|
|
137
|
-
| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-`
|
|
138
|
-
| `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` | Режим отображения (для конструктора или редактирования) |
|
|
139
139
|
|
|
140
140
|
### Особенности конструктора
|
|
141
141
|
|
package/dist/Carousel/README.md
CHANGED
|
@@ -6,15 +6,15 @@
|
|
|
6
6
|
|
|
7
7
|
## Пропсы
|
|
8
8
|
|
|
9
|
-
| Название
|
|
10
|
-
|
|
|
11
|
-
| `id`
|
|
12
|
-
| `wrapperClass` | `string`
|
|
13
|
-
| `label`
|
|
14
|
-
| `label.name`
|
|
15
|
-
| `label.class`
|
|
16
|
-
| `scrollValue`
|
|
17
|
-
| `children`
|
|
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` | Слот для содержимого, которое будет отображаться в карусели |
|
|
18
18
|
|
|
19
19
|
## События
|
|
20
20
|
|
|
@@ -6,21 +6,21 @@
|
|
|
6
6
|
|
|
7
7
|
## Пропсы
|
|
8
8
|
|
|
9
|
-
| Название
|
|
10
|
-
|
|
|
11
|
-
| `id`
|
|
12
|
-
| `wrapperClass` | `string`
|
|
13
|
-
| `label`
|
|
14
|
-
| `label.name`
|
|
15
|
-
| `label.class`
|
|
16
|
-
| `value`
|
|
17
|
-
| `readonly`
|
|
18
|
-
| `onChange`
|
|
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` | `() => {}` | Обработчик изменения цвета |
|
|
19
19
|
|
|
20
20
|
## События
|
|
21
21
|
|
|
22
|
-
| Название | Тип
|
|
23
|
-
|
|
|
22
|
+
| Название | Тип | Описание |
|
|
23
|
+
| -------- | ---------------------------------- | ------------------------------------------------------------- |
|
|
24
24
|
| onChange | ([number, number, number]) => void | Срабатывает при изменении цвета, передает массив RGB значений |
|
|
25
25
|
|
|
26
26
|
## Примеры
|
|
@@ -99,11 +99,11 @@
|
|
|
99
99
|
|
|
100
100
|
### Пропсы конструктора
|
|
101
101
|
|
|
102
|
-
| Название
|
|
103
|
-
|
|
|
104
|
-
| `component`
|
|
105
|
-
| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-`
|
|
106
|
-
| `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` | Режим отображения (для конструктора или редактирования) |
|
|
107
107
|
|
|
108
108
|
### Особенности конструктора
|
|
109
109
|
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<!-- $lib/ElementsUI/Divider.svelte -->
|
|
2
|
+
<script lang="ts">
|
|
3
|
+
import { twMerge } from "tailwind-merge"
|
|
4
|
+
import type { IDividerProps } from "../types"
|
|
5
|
+
|
|
6
|
+
let { id = crypto.randomUUID(), wrapperClass = "", type = "line", size = "base", width = 2, color = "bg-max", anchor = "center" }: IDividerProps = $props()
|
|
7
|
+
|
|
8
|
+
const anchorClass = { top: "justify-start", center: "justify-center", bottom: "justify-end" } as const
|
|
9
|
+
const sizeIndent = { small: 4, base: 8, large: 16, huge: 24, massive: 32 } as const
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`flex h-full w-full flex-col ${anchorClass[anchor]}`, wrapperClass)}>
|
|
13
|
+
<div class="w-full" style="padding-block: {sizeIndent[size]}px;">
|
|
14
|
+
{#if type === "line"}
|
|
15
|
+
<div class={twMerge("w-full rounded-full", color)} style="height: {width}px;"></div>
|
|
16
|
+
{/if}
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
<!-- $lib/ElementsUI/DividerProps.svelte -->
|
|
2
|
+
<script lang="ts">
|
|
3
|
+
import { T } from "../locales/i18n"
|
|
4
|
+
import { updateProperty, type IDividerProps, type IUIComponentHandler, type UIComponent } from "../types"
|
|
5
|
+
import * as UI from ".."
|
|
6
|
+
import { optionsStore } from "../options"
|
|
7
|
+
import CommonSnippets from "../CommonSnippets.svelte"
|
|
8
|
+
|
|
9
|
+
const {
|
|
10
|
+
component,
|
|
11
|
+
onPropertyChange,
|
|
12
|
+
forConstructor = true,
|
|
13
|
+
} = $props<{
|
|
14
|
+
component: UIComponent & { properties: Partial<IDividerProps> }
|
|
15
|
+
onPropertyChange: (updates: Partial<{ properties?: string | object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void
|
|
16
|
+
forConstructor?: boolean
|
|
17
|
+
}>()
|
|
18
|
+
|
|
19
|
+
let currentType = $derived($optionsStore.DIVIDER_TYPE_OPTIONS.find((t) => t.value === component.properties.type))
|
|
20
|
+
let currentAnchor = $derived($optionsStore.DIVIDER_ANCHOR_OPTIONS.find((a) => a.value === component.properties.anchor))
|
|
21
|
+
let currentSize = $derived($optionsStore.TEXTFIELD_SIZE_OPTIONS.find((s) => s.value === component.properties.size))
|
|
22
|
+
let currentColor = $derived($optionsStore.COLOR_OPTIONS.find((c) => c.value === component.properties.color))
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
{#snippet DividerType()}
|
|
26
|
+
<UI.Select
|
|
27
|
+
label={{ name: $T("constructor.props.divider.type") }}
|
|
28
|
+
type="buttons"
|
|
29
|
+
value={currentType}
|
|
30
|
+
options={$optionsStore.DIVIDER_TYPE_OPTIONS}
|
|
31
|
+
onUpdate={(item) => updateProperty("type", (item as UI.IOption).value as string, component, onPropertyChange)}
|
|
32
|
+
/>
|
|
33
|
+
{/snippet}
|
|
34
|
+
|
|
35
|
+
{#snippet DividerAnchor()}
|
|
36
|
+
<UI.Select
|
|
37
|
+
label={{ name: $T("constructor.props.divider.anchor") }}
|
|
38
|
+
type="buttons"
|
|
39
|
+
value={currentAnchor}
|
|
40
|
+
options={$optionsStore.DIVIDER_ANCHOR_OPTIONS}
|
|
41
|
+
onUpdate={(item) => updateProperty("anchor", (item as UI.IOption).value as string, component, onPropertyChange)}
|
|
42
|
+
/>
|
|
43
|
+
{/snippet}
|
|
44
|
+
|
|
45
|
+
{#snippet DividerSize()}
|
|
46
|
+
<UI.Select
|
|
47
|
+
label={{ name: $T("constructor.props.size") }}
|
|
48
|
+
type="buttons"
|
|
49
|
+
value={currentSize}
|
|
50
|
+
options={$optionsStore.TEXTFIELD_SIZE_OPTIONS}
|
|
51
|
+
onUpdate={(item) => updateProperty("size", (item as UI.IOption).value as string, component, onPropertyChange)}
|
|
52
|
+
/>
|
|
53
|
+
{/snippet}
|
|
54
|
+
|
|
55
|
+
{#snippet DividerWidth()}
|
|
56
|
+
<UI.Input
|
|
57
|
+
label={{ name: $T("constructor.props.divider.width") }}
|
|
58
|
+
value={component.properties.width}
|
|
59
|
+
onUpdate={(value) => updateProperty("width", value as number, component, onPropertyChange)}
|
|
60
|
+
number={{ minNum: 1, maxNum: 20, step: 1 }}
|
|
61
|
+
type="number"
|
|
62
|
+
/>
|
|
63
|
+
{/snippet}
|
|
64
|
+
|
|
65
|
+
{#snippet DividerColor()}
|
|
66
|
+
<CommonSnippets
|
|
67
|
+
snippet="Colors"
|
|
68
|
+
initialValue={{
|
|
69
|
+
color: currentColor,
|
|
70
|
+
updateProperty: (option: UI.IOption) => updateProperty("color", option.value as string, component, onPropertyChange),
|
|
71
|
+
}}
|
|
72
|
+
{component}
|
|
73
|
+
{onPropertyChange}
|
|
74
|
+
/>
|
|
75
|
+
{/snippet}
|
|
76
|
+
|
|
77
|
+
{#if forConstructor}
|
|
78
|
+
<div class="flex items-start justify-center gap-8">
|
|
79
|
+
<div class="flex w-1/3 flex-col px-2">
|
|
80
|
+
<CommonSnippets snippet="Access" {component} {onPropertyChange} />
|
|
81
|
+
{@render DividerType()}
|
|
82
|
+
</div>
|
|
83
|
+
<div class="flex w-1/3 flex-col px-2">
|
|
84
|
+
{@render DividerAnchor()}
|
|
85
|
+
{@render DividerSize()}
|
|
86
|
+
</div>
|
|
87
|
+
<div class="flex w-1/3 flex-col px-2">
|
|
88
|
+
{@render DividerWidth()}
|
|
89
|
+
{@render DividerColor()}
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
{:else}
|
|
93
|
+
<div class="flex items-start justify-center gap-8">
|
|
94
|
+
<div class="flex w-1/3 flex-col px-2">
|
|
95
|
+
<CommonSnippets snippet="Identificator" {component} {onPropertyChange} />
|
|
96
|
+
<CommonSnippets snippet="Access" {component} {onPropertyChange} />
|
|
97
|
+
<CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
|
|
98
|
+
</div>
|
|
99
|
+
<div class="flex w-1/3 flex-col px-2">
|
|
100
|
+
{@render DividerType()}
|
|
101
|
+
{@render DividerAnchor()}
|
|
102
|
+
{@render DividerSize()}
|
|
103
|
+
</div>
|
|
104
|
+
<div class="flex w-1/3 flex-col px-2">
|
|
105
|
+
{@render DividerWidth()}
|
|
106
|
+
{@render DividerColor()}
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
{/if}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type IDividerProps, type IUIComponentHandler, type UIComponent } from "../types";
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
component: UIComponent & {
|
|
4
|
+
properties: Partial<IDividerProps>;
|
|
5
|
+
};
|
|
6
|
+
onPropertyChange: (updates: Partial<{
|
|
7
|
+
properties?: string | object;
|
|
8
|
+
name?: string;
|
|
9
|
+
access?: string;
|
|
10
|
+
eventHandler?: IUIComponentHandler;
|
|
11
|
+
}>) => void;
|
|
12
|
+
forConstructor?: boolean;
|
|
13
|
+
};
|
|
14
|
+
declare const DividerProps: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
15
|
+
type DividerProps = ReturnType<typeof DividerProps>;
|
|
16
|
+
export default DividerProps;
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
# Divider Component
|
|
2
|
+
|
|
3
|
+
## Описание
|
|
4
|
+
|
|
5
|
+
Разделитель — UI-компонент для визуального и/или пространственного разделения элементов, расположенных друг под другом в конструкторе интерфейса. Занимает столько места по высоте, сколько выделено ему в сетке (аналогично `Map`/`VideoViewer` — компонент реально резервирует указанную высоту, а не сжимается по контенту). Поддерживает два режима: видимая полоса или чистый отступ без линии, настраиваемую толщину и цвет полосы, размер внутреннего отступа и привязку полосы к верху/центру/низу выделенной области.
|
|
6
|
+
|
|
7
|
+
## Пропсы
|
|
8
|
+
|
|
9
|
+
| Название | Тип | По умолчанию | Описание |
|
|
10
|
+
| -------------- | ----------------------------------------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------- |
|
|
11
|
+
| `id` | `string` | `crypto.randomUUID()` | Уникальный идентификатор компонента |
|
|
12
|
+
| `wrapperClass` | `string` | `""` | CSS-классы для обёртки компонента |
|
|
13
|
+
| `type` | `"line" \| "empty"` | `"line"` | `line` — видимая полоса, `empty` — чистый отступ без полосы |
|
|
14
|
+
| `size` | `"small" \| "base" \| "large" \| "huge" \| "massive"` | `"base"` | Величина внутреннего отступа вокруг полосы (`small`=4px, `base`=8px, `large`=16px, `huge`=24px, `massive`=32px) |
|
|
15
|
+
| `width` | `number` | `2` | Толщина полосы в пикселях (применяется только при `type="line"`) |
|
|
16
|
+
| `color` | `string` | `"bg-max"` | Класс цвета полосы из общей палитры (`bg-max`, `bg-red`, `bg-yellow`, `bg-green`, `bg-blue`, `bg-purple`, `bg-gray`) |
|
|
17
|
+
| `anchor` | `"top" \| "center" \| "bottom"` | `"center"` | Положение полосы внутри выделенной компоненту высоты сетки |
|
|
18
|
+
|
|
19
|
+
## События
|
|
20
|
+
|
|
21
|
+
Компонент не генерирует специфические события.
|
|
22
|
+
|
|
23
|
+
## Примеры
|
|
24
|
+
|
|
25
|
+
### Полоса по центру
|
|
26
|
+
|
|
27
|
+
```svelte
|
|
28
|
+
<script>
|
|
29
|
+
import * as UI from "poe-svelte-ui-lib"
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<UI.Divider type="line" size="base" width={2} color="bg-max" anchor="center" />
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Толстая цветная полоса у верха области
|
|
36
|
+
|
|
37
|
+
```svelte
|
|
38
|
+
<script>
|
|
39
|
+
import * as UI from "poe-svelte-ui-lib"
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<UI.Divider type="line" size="large" width={4} color="bg-blue" anchor="top" />
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Чистый отступ без полосы
|
|
46
|
+
|
|
47
|
+
```svelte
|
|
48
|
+
<script>
|
|
49
|
+
import * as UI from "poe-svelte-ui-lib"
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<UI.Divider type="empty" size="massive" />
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Внутренняя архитектура
|
|
56
|
+
|
|
57
|
+
### Реактивность
|
|
58
|
+
|
|
59
|
+
- Объект `anchorClass` определяет CSS-классы `justify-*` для положения полосы (`top`/`center`/`bottom`)
|
|
60
|
+
- Объект `sizeIndent` определяет отступ в пикселях для каждого из пяти именованных размеров
|
|
61
|
+
|
|
62
|
+
### Сторы и зависимости
|
|
63
|
+
|
|
64
|
+
- Используется `twMerge` для объединения Tailwind CSS классов
|
|
65
|
+
|
|
66
|
+
### Директивы
|
|
67
|
+
|
|
68
|
+
- `twMerge` для объединения классов обёртки и полосы
|
|
69
|
+
- `$props()` для получения пропсов компонента
|
|
70
|
+
|
|
71
|
+
### Слоты
|
|
72
|
+
|
|
73
|
+
- Компонент не использует внешних слотов
|
|
74
|
+
|
|
75
|
+
## Конструктор свойств (DividerProps.svelte)
|
|
76
|
+
|
|
77
|
+
### Описание
|
|
78
|
+
|
|
79
|
+
Компонент `DividerProps.svelte` предоставляет визуальный интерфейс для редактирования свойств разделителя. Поддерживает два режима отображения: для конструктора и для редактирования.
|
|
80
|
+
|
|
81
|
+
### Пропсы конструктора
|
|
82
|
+
|
|
83
|
+
| Название | Тип | По умолчанию | Описание |
|
|
84
|
+
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------- |
|
|
85
|
+
| `component` | `UIComponent & { properties: Partial<IDividerProps> }` | `-` | Объект компонента с его свойствами |
|
|
86
|
+
| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-` | Коллбэк для обновления свойств компонента |
|
|
87
|
+
| `forConstructor` | `boolean` | `true` | Режим отображения (для конструктора или редактирования) |
|
|
88
|
+
|
|
89
|
+
### Особенности конструктора
|
|
90
|
+
|
|
91
|
+
- `type`/`anchor` — выбор через кнопки (`UI.Select type="buttons"`)
|
|
92
|
+
- `size` — переиспользует набор опций `TEXTFIELD_SIZE_OPTIONS` (тот же пятиступенчатый набор, что у `TextField`)
|
|
93
|
+
- `color` — переиспользует общий сниппет `CommonSnippets snippet="Colors"`, но привязан к собственному свойству `color`, а не к `wrapperClass`
|
|
94
|
+
- `width` — числовой ввод (1-20 px)
|
|
95
|
+
|
|
96
|
+
## Заметки
|
|
97
|
+
|
|
98
|
+
### Адаптивность
|
|
99
|
+
|
|
100
|
+
- Ширина полосы всегда 100% ширины выделенной области, толщина и отступ настраиваются отдельно
|
|
101
|
+
- Используется Tailwind CSS, относительные единицы для отступа заданы в px намеренно — величина отступа не должна зависеть от корневого размера шрифта потребляющего приложения
|
|
102
|
+
|
|
103
|
+
### Ограничения
|
|
104
|
+
|
|
105
|
+
- Отступ (`size`) ограничен пятью именованными вариантами, как и у `TextField`
|
|
106
|
+
- В превью (`GUIPreview.svelte`) компонент всегда получает явную высоту по размеру сетки (как `Map`/`VideoViewer`) — без этого пустая ячейка без компонента схлопывается почти в ноль, так как сетка превью не резервирует высоту неиспользуемых строк
|
|
107
|
+
|
|
108
|
+
### Производительность
|
|
109
|
+
|
|
110
|
+
- Компонент не содержит состояния и внутренних эффектов, перерисовывается только при изменении пропсов
|
|
@@ -6,28 +6,28 @@
|
|
|
6
6
|
|
|
7
7
|
## Пропсы
|
|
8
8
|
|
|
9
|
-
| Название
|
|
10
|
-
|
|
|
11
|
-
| `id`
|
|
12
|
-
| `wrapperClass`
|
|
13
|
-
| `label`
|
|
14
|
-
| `label.name`
|
|
15
|
-
| `label.class`
|
|
16
|
-
| `type`
|
|
17
|
-
| `accept`
|
|
18
|
-
| `imageSize`
|
|
19
|
-
| `imageSize.height`
|
|
20
|
-
| `imageSize.width`
|
|
21
|
-
| `imageSize.fitMode` | `"cover" \| "contain"`
|
|
22
|
-
| `imageSize.form`
|
|
23
|
-
| `disabled`
|
|
24
|
-
| `currentImage`
|
|
25
|
-
| `onChange`
|
|
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` | `() => {}` | Обработчик изменения файла |
|
|
26
26
|
|
|
27
27
|
## События
|
|
28
28
|
|
|
29
|
-
| Название | Тип
|
|
30
|
-
|
|
|
29
|
+
| Название | Тип | Описание |
|
|
30
|
+
| -------- | ------------------------------------------ | ------------------------------------------------------------------------------------------- |
|
|
31
31
|
| onChange | (event: Event, file: File \| null) => void | Срабатывает при выборе файла, передает событие и выбранный файл (или null если файл удален) |
|
|
32
32
|
|
|
33
33
|
## Примеры
|
|
@@ -125,11 +125,11 @@
|
|
|
125
125
|
|
|
126
126
|
### Пропсы конструктора
|
|
127
127
|
|
|
128
|
-
| Название
|
|
129
|
-
|
|
|
130
|
-
| `component`
|
|
131
|
-
| `onPropertyChange` | `(updates: Partial<{ properties?: string \| object; name?: string; access?: string; eventHandler?: IUIComponentHandler }>) => void` | `-`
|
|
132
|
-
| `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` | Режим отображения (для конструктора или редактирования) |
|
|
133
133
|
|
|
134
134
|
### Особенности конструктора
|
|
135
135
|
|