poe-svelte-ui-lib 1.16.3 → 1.16.5
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/Divider/Divider.svelte +4 -7
- package/dist/Divider/DividerProps.svelte +1 -14
- package/dist/Divider/README.md +14 -18
- package/dist/Input/Input.svelte +29 -5
- package/dist/types.d.ts +0 -1
- package/package.json +1 -1
|
@@ -3,16 +3,13 @@
|
|
|
3
3
|
import { twMerge } from "tailwind-merge"
|
|
4
4
|
import type { IDividerProps } from "../types"
|
|
5
5
|
|
|
6
|
-
let { id = crypto.randomUUID(), wrapperClass = "", type = "line",
|
|
6
|
+
let { id = crypto.randomUUID(), wrapperClass = "", type = "line", width = 2, color = "bg-max", anchor = "center" }: IDividerProps = $props()
|
|
7
7
|
|
|
8
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
9
|
</script>
|
|
11
10
|
|
|
12
11
|
<div id={`${id}-${crypto.randomUUID().slice(0, 6)}`} class={twMerge(`flex h-full w-full flex-col ${anchorClass[anchor]}`, wrapperClass)}>
|
|
13
|
-
|
|
14
|
-
{
|
|
15
|
-
|
|
16
|
-
{/if}
|
|
17
|
-
</div>
|
|
12
|
+
{#if type === "line"}
|
|
13
|
+
<div class="{twMerge('w-full rounded-full', color)} bg-(--bg-color)" style="height: {width}px;"></div>
|
|
14
|
+
{/if}
|
|
18
15
|
</div>
|
|
@@ -18,7 +18,6 @@
|
|
|
18
18
|
|
|
19
19
|
let currentType = $derived($optionsStore.DIVIDER_TYPE_OPTIONS.find((t) => t.value === component.properties.type))
|
|
20
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
21
|
let currentColor = $derived($optionsStore.COLOR_OPTIONS.find((c) => c.value === component.properties.color))
|
|
23
22
|
</script>
|
|
24
23
|
|
|
@@ -42,16 +41,6 @@
|
|
|
42
41
|
/>
|
|
43
42
|
{/snippet}
|
|
44
43
|
|
|
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
44
|
{#snippet DividerWidth()}
|
|
56
45
|
<UI.Input
|
|
57
46
|
label={{ name: $T("constructor.props.divider.width") }}
|
|
@@ -82,10 +71,9 @@
|
|
|
82
71
|
</div>
|
|
83
72
|
<div class="flex w-1/3 flex-col px-2">
|
|
84
73
|
{@render DividerAnchor()}
|
|
85
|
-
{@render
|
|
74
|
+
{@render DividerWidth()}
|
|
86
75
|
</div>
|
|
87
76
|
<div class="flex w-1/3 flex-col px-2">
|
|
88
|
-
{@render DividerWidth()}
|
|
89
77
|
{@render DividerColor()}
|
|
90
78
|
</div>
|
|
91
79
|
</div>
|
|
@@ -99,7 +87,6 @@
|
|
|
99
87
|
<div class="flex w-1/3 flex-col px-2">
|
|
100
88
|
{@render DividerType()}
|
|
101
89
|
{@render DividerAnchor()}
|
|
102
|
-
{@render DividerSize()}
|
|
103
90
|
</div>
|
|
104
91
|
<div class="flex w-1/3 flex-col px-2">
|
|
105
92
|
{@render DividerWidth()}
|
package/dist/Divider/README.md
CHANGED
|
@@ -2,19 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
## Описание
|
|
4
4
|
|
|
5
|
-
Разделитель — UI-компонент для визуального и/или пространственного разделения элементов, расположенных друг под другом в конструкторе интерфейса. Занимает столько места по высоте, сколько выделено ему в сетке (аналогично `Map`/`VideoViewer` — компонент реально резервирует указанную высоту, а не сжимается по контенту). Поддерживает два режима: видимая полоса или чистый отступ без линии, настраиваемую толщину и цвет полосы,
|
|
5
|
+
Разделитель — UI-компонент для визуального и/или пространственного разделения элементов, расположенных друг под другом в конструкторе интерфейса. Занимает столько места по высоте, сколько выделено ему в сетке (аналогично `Map`/`VideoViewer` — компонент реально резервирует указанную высоту, а не сжимается по контенту). Поддерживает два режима: видимая полоса или чистый отступ без линии, настраиваемую толщину и цвет полосы, и привязку полосы к верху/центру/низу выделенной области. Величина зазора вокруг полосы регулируется не отдельным пропсом, а высотой самого компонента в сетке конструктора.
|
|
6
6
|
|
|
7
7
|
## Пропсы
|
|
8
8
|
|
|
9
|
-
| Название | Тип
|
|
10
|
-
| -------------- |
|
|
11
|
-
| `id` | `string`
|
|
12
|
-
| `wrapperClass` | `string`
|
|
13
|
-
| `type` | `"line" \| "empty"`
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `anchor` | `"top" \| "center" \| "bottom"` | `"center"` | Положение полосы внутри выделенной компоненту высоты сетки |
|
|
9
|
+
| Название | Тип | По умолчанию | Описание |
|
|
10
|
+
| -------------- | ------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
11
|
+
| `id` | `string` | `crypto.randomUUID()` | Уникальный идентификатор компонента |
|
|
12
|
+
| `wrapperClass` | `string` | `""` | CSS-классы для обёртки компонента |
|
|
13
|
+
| `type` | `"line" \| "empty"` | `"line"` | `line` — видимая полоса, `empty` — чистый отступ без полосы |
|
|
14
|
+
| `width` | `number` | `2` | Толщина полосы в пикселях (применяется только при `type="line"`) |
|
|
15
|
+
| `color` | `string` | `"bg-max"` | Класс цвета полосы из общей палитры (`bg-max`, `bg-red`, `bg-yellow`, `bg-green`, `bg-blue`, `bg-purple`, `bg-gray`) — сам по себе только переопределяет `--bg-color`, красит его рядом стоящий статический класс `bg-(--bg-color)` (как в `Button.svelte`) |
|
|
16
|
+
| `anchor` | `"top" \| "center" \| "bottom"` | `"center"` | Положение полосы внутри выделенной компоненту высоты сетки |
|
|
18
17
|
|
|
19
18
|
## События
|
|
20
19
|
|
|
@@ -29,7 +28,7 @@
|
|
|
29
28
|
import * as UI from "poe-svelte-ui-lib"
|
|
30
29
|
</script>
|
|
31
30
|
|
|
32
|
-
<UI.Divider type="line"
|
|
31
|
+
<UI.Divider type="line" width={2} color="bg-max" anchor="center" />
|
|
33
32
|
```
|
|
34
33
|
|
|
35
34
|
### Толстая цветная полоса у верха области
|
|
@@ -39,7 +38,7 @@
|
|
|
39
38
|
import * as UI from "poe-svelte-ui-lib"
|
|
40
39
|
</script>
|
|
41
40
|
|
|
42
|
-
<UI.Divider type="line"
|
|
41
|
+
<UI.Divider type="line" width={4} color="bg-blue" anchor="top" />
|
|
43
42
|
```
|
|
44
43
|
|
|
45
44
|
### Чистый отступ без полосы
|
|
@@ -49,7 +48,7 @@
|
|
|
49
48
|
import * as UI from "poe-svelte-ui-lib"
|
|
50
49
|
</script>
|
|
51
50
|
|
|
52
|
-
<UI.Divider type="empty"
|
|
51
|
+
<UI.Divider type="empty" />
|
|
53
52
|
```
|
|
54
53
|
|
|
55
54
|
## Внутренняя архитектура
|
|
@@ -57,7 +56,6 @@
|
|
|
57
56
|
### Реактивность
|
|
58
57
|
|
|
59
58
|
- Объект `anchorClass` определяет CSS-классы `justify-*` для положения полосы (`top`/`center`/`bottom`)
|
|
60
|
-
- Объект `sizeIndent` определяет отступ в пикселях для каждого из пяти именованных размеров
|
|
61
59
|
|
|
62
60
|
### Сторы и зависимости
|
|
63
61
|
|
|
@@ -89,7 +87,6 @@
|
|
|
89
87
|
### Особенности конструктора
|
|
90
88
|
|
|
91
89
|
- `type`/`anchor` — выбор через кнопки (`UI.Select type="buttons"`)
|
|
92
|
-
- `size` — переиспользует набор опций `TEXTFIELD_SIZE_OPTIONS` (тот же пятиступенчатый набор, что у `TextField`)
|
|
93
90
|
- `color` — переиспользует общий сниппет `CommonSnippets snippet="Colors"`, но привязан к собственному свойству `color`, а не к `wrapperClass`
|
|
94
91
|
- `width` — числовой ввод (1-20 px)
|
|
95
92
|
|
|
@@ -97,12 +94,11 @@
|
|
|
97
94
|
|
|
98
95
|
### Адаптивность
|
|
99
96
|
|
|
100
|
-
- Ширина полосы всегда 100% ширины выделенной области, толщина
|
|
101
|
-
-
|
|
97
|
+
- Ширина полосы всегда 100% ширины выделенной области, толщина настраивается отдельно
|
|
98
|
+
- Величина зазора вокруг полосы не выделена в отдельный пропс намеренно — компонент всегда занимает полную высоту, выделенную ему в сетке конструктора (см. Ограничения), поэтому нужный зазор достигается изменением высоты самого компонента, а `anchor` определяет положение полосы внутри этой высоты
|
|
102
99
|
|
|
103
100
|
### Ограничения
|
|
104
101
|
|
|
105
|
-
- Отступ (`size`) ограничен пятью именованными вариантами, как и у `TextField`
|
|
106
102
|
- В превью (`GUIPreview.svelte`) компонент всегда получает явную высоту по размеру сетки (как `Map`/`VideoViewer`) — без этого пустая ячейка без компонента схлопывается почти в ноль, так как сетка превью не резервирует высоту неиспользуемых строк
|
|
107
103
|
|
|
108
104
|
### Производительность
|
package/dist/Input/Input.svelte
CHANGED
|
@@ -89,17 +89,17 @@
|
|
|
89
89
|
{/if}
|
|
90
90
|
|
|
91
91
|
<div class="relative flex w-full items-center {type === 'text-area' ? 'h-full' : ''}">
|
|
92
|
-
{#if type
|
|
92
|
+
{#if type === "number"}
|
|
93
93
|
<input
|
|
94
94
|
bind:value
|
|
95
95
|
class={twMerge(
|
|
96
96
|
`w-full rounded-2xl border px-4 py-1 text-center shadow-(--border-shadow-color) transition duration-200
|
|
97
97
|
outline-none focus:shadow-[0_0_6px_var(--blue-color)] focus:border-(--blue-color) [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
|
|
98
98
|
${isValid ? "border-(--bg-color)" : "border-red-400 shadow-[0_0_6px_var(--red-color)] focus:shadow-[0_0_6px_var(--red-color)] focus:border-red-400"}
|
|
99
|
-
${disabled ? "opacity-50" : "hover:shadow-(--focus-shadow-color)"}
|
|
99
|
+
${disabled ? "opacity-50" : "hover:shadow-(--focus-shadow-color)"}
|
|
100
100
|
${readonly ? "" : "hover:shadow-(--focus-shadow-color)"}
|
|
101
|
-
${help?.info ? "pl-8" : ""}
|
|
102
|
-
${help.copyButton ||
|
|
101
|
+
${help?.info ? "pl-8" : ""}
|
|
102
|
+
${help.copyButton || !readonly ? "pr-8" : ""}`,
|
|
103
103
|
componentClass,
|
|
104
104
|
)}
|
|
105
105
|
style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
|
|
@@ -109,13 +109,37 @@
|
|
|
109
109
|
autocomplete={help?.autocomplete}
|
|
110
110
|
oninput={(e) => handleInputChange((e.currentTarget as HTMLInputElement).value)}
|
|
111
111
|
onkeydown={handleKeyDown}
|
|
112
|
-
type=
|
|
112
|
+
type="number"
|
|
113
113
|
{maxlength}
|
|
114
114
|
min={number?.minNum}
|
|
115
115
|
max={number?.maxNum}
|
|
116
116
|
step={number?.step}
|
|
117
117
|
{readonly}
|
|
118
118
|
/>
|
|
119
|
+
{:else if type !== "text-area"}
|
|
120
|
+
<input
|
|
121
|
+
bind:value
|
|
122
|
+
class={twMerge(
|
|
123
|
+
`w-full rounded-2xl border px-4 py-1 text-center shadow-(--border-shadow-color) transition duration-200
|
|
124
|
+
outline-none focus:shadow-[0_0_6px_var(--blue-color)] focus:border-(--blue-color) [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden
|
|
125
|
+
${isValid ? "border-(--bg-color)" : "border-red-400 shadow-[0_0_6px_var(--red-color)] focus:shadow-[0_0_6px_var(--red-color)] focus:border-red-400"}
|
|
126
|
+
${disabled ? "opacity-50" : "hover:shadow-(--focus-shadow-color)"}
|
|
127
|
+
${readonly ? "" : "hover:shadow-(--focus-shadow-color)"}
|
|
128
|
+
${help?.info ? "pl-8" : ""}
|
|
129
|
+
${help.copyButton || type === "password" ? "pr-8" : ""}`,
|
|
130
|
+
componentClass,
|
|
131
|
+
)}
|
|
132
|
+
style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
|
|
133
|
+
id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
|
|
134
|
+
{placeholder}
|
|
135
|
+
{disabled}
|
|
136
|
+
autocomplete={help?.autocomplete}
|
|
137
|
+
oninput={(e) => handleInputChange((e.currentTarget as HTMLInputElement).value)}
|
|
138
|
+
onkeydown={handleKeyDown}
|
|
139
|
+
type={type === "password" ? (showPassword ? "text" : "password") : "text"}
|
|
140
|
+
{maxlength}
|
|
141
|
+
{readonly}
|
|
142
|
+
/>
|
|
119
143
|
{:else}
|
|
120
144
|
<textarea
|
|
121
145
|
bind:value
|
package/dist/types.d.ts
CHANGED