poe-svelte-ui-lib 1.16.4 → 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/README.md +7 -7
- package/dist/Input/Input.svelte +29 -5
- package/package.json +1 -1
package/dist/Divider/README.md
CHANGED
|
@@ -6,14 +6,14 @@
|
|
|
6
6
|
|
|
7
7
|
## Пропсы
|
|
8
8
|
|
|
9
|
-
| Название | Тип | По умолчанию | Описание
|
|
10
|
-
| -------------- |
|
|
11
|
-
| `id` | `string` | `crypto.randomUUID()` | Уникальный идентификатор компонента
|
|
12
|
-
| `wrapperClass` | `string` | `""` | CSS-классы для обёртки компонента
|
|
13
|
-
| `type` | `"line" \| "empty"` | `"line"` | `line` — видимая полоса, `empty` — чистый отступ без полосы
|
|
14
|
-
| `width` | `number` | `2` | Толщина полосы в пикселях (применяется только при `type="line"`)
|
|
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
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"` | Положение полосы внутри выделенной компоненту высоты сетки
|
|
16
|
+
| `anchor` | `"top" \| "center" \| "bottom"` | `"center"` | Положение полосы внутри выделенной компоненту высоты сетки |
|
|
17
17
|
|
|
18
18
|
## События
|
|
19
19
|
|
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
|