poe-svelte-ui-lib 1.59.0 → 1.60.0
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/Select/README.md +16 -15
- package/dist/Select/Select.svelte +7 -3
- package/dist/types.d.ts +1 -0
- package/package.json +1 -1
package/dist/Select/README.md
CHANGED
|
@@ -37,21 +37,22 @@
|
|
|
37
37
|
|
|
38
38
|
## Пропсы
|
|
39
39
|
|
|
40
|
-
| Название | Тип | По умолчанию | Описание
|
|
41
|
-
| ---------------- | --------------------------------------------- | --------------------- |
|
|
42
|
-
| `id` | `string` | `crypto.randomUUID()` | Уникальный идентификатор компонента
|
|
43
|
-
| `wrapperClass` | `string` | `""` | Дополнительные CSS-классы для обертки компонента
|
|
44
|
-
| `componentClass` | `string` | `""` | Дополнительные CSS-классы для самого поля/кнопок выбора
|
|
45
|
-
| `disabled` | `boolean` | `false` | Состояние отключения компонента
|
|
46
|
-
| `label` | `object` | `-` | Настройки заголовка компонента
|
|
47
|
-
| `label.name` | `string` | `""` | Текст заголовка компонента
|
|
48
|
-
| `label.class` | `string` | `""` | CSS-классы для стилизации текста заголовка
|
|
49
|
-
| `type` | `"select" \| "buttons" \| "input"` | `"select"` | Тип отображения: `select` — выпадающий список с кнопкой, `buttons` — горизонтальный ряд кнопок, `input` — поле ввода с автодополнением и поиском
|
|
50
|
-
| `multiSelect` | `boolean` | `false` | Режим множественного выбора: работает только с `type: "buttons"`; при `true` позволяет выбирать несколько опций, значение передаётся как массив
|
|
51
|
-
| `
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
40
|
+
| Название | Тип | По умолчанию | Описание |
|
|
41
|
+
| ---------------- | --------------------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
42
|
+
| `id` | `string` | `crypto.randomUUID()` | Уникальный идентификатор компонента |
|
|
43
|
+
| `wrapperClass` | `string` | `""` | Дополнительные CSS-классы для обертки компонента |
|
|
44
|
+
| `componentClass` | `string` | `""` | Дополнительные CSS-классы для самого поля/кнопок выбора |
|
|
45
|
+
| `disabled` | `boolean` | `false` | Состояние отключения компонента |
|
|
46
|
+
| `label` | `object` | `-` | Настройки заголовка компонента |
|
|
47
|
+
| `label.name` | `string` | `""` | Текст заголовка компонента |
|
|
48
|
+
| `label.class` | `string` | `""` | CSS-классы для стилизации текста заголовка |
|
|
49
|
+
| `type` | `"select" \| "buttons" \| "input"` | `"select"` | Тип отображения: `select` — выпадающий список с кнопкой, `buttons` — горизонтальный ряд кнопок, `input` — поле ввода с автодополнением и поиском |
|
|
50
|
+
| `multiSelect` | `boolean` | `false` | Режим множественного выбора: работает только с `type: "buttons"`; при `true` позволяет выбирать несколько опций, значение передаётся как массив |
|
|
51
|
+
| `fitContent` | `boolean` | `false` | Для `type="buttons"`: группа по ширине содержимого — все кнопки одинаковой ширины по самой длинной подписи, текст без переноса и обрезки (шапки, переключатели режимов) |
|
|
52
|
+
| `listHeight` | `string` | `"16rem"` | Максимальная высота выпадающего списка опций (для типов `select`/`input`) |
|
|
53
|
+
| `value` | `IOption<T> \| IOption<T>[] \| undefined` | `undefined` | Текущее выбранное значение(я); поддерживает двустороннее связывание (`$bindable`) |
|
|
54
|
+
| `options` | `IOption<T>[]` | `[]` | Массив доступных опций |
|
|
55
|
+
| `onUpdate` | `(value: IOption<T> \| IOption<T>[]) => void` | `undefined` | Обработчик изменения значения |
|
|
55
56
|
|
|
56
57
|
> **`bitMode`/`range`**: эти поля объявлены в типе `ISelectProps` и настраиваются в конструкторской панели (`SelectProps.svelte`), но сам `Select.svelte` их не читает и не использует — они не оказывают никакого эффекта на голый `<UI.Select>`. Если нужен битовый выбор в реальном рантайме, интерпретируйте маску на стороне вызывающего кода и передавайте уже готовый `value`/`options`.
|
|
57
58
|
|
|
@@ -55,6 +55,7 @@
|
|
|
55
55
|
disabled = false,
|
|
56
56
|
label = { name: "", class: "" },
|
|
57
57
|
multiSelect = false,
|
|
58
|
+
fitContent = false,
|
|
58
59
|
listHeight = "16rem",
|
|
59
60
|
type = "select",
|
|
60
61
|
value = $bindable(),
|
|
@@ -206,7 +207,9 @@
|
|
|
206
207
|
<!-- Сплошная группа: общий контур, разделители внутри, без зазоров и теней -->
|
|
207
208
|
<div
|
|
208
209
|
id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
|
|
209
|
-
class="flex w-full rounded-[10px] border border-(--border-color) {disabled
|
|
210
|
+
class="{fitContent ? 'grid w-max auto-cols-fr grid-flow-col' : 'flex w-full'} rounded-[10px] border border-(--border-color) {disabled
|
|
211
|
+
? 'opacity-45'
|
|
212
|
+
: ''}"
|
|
210
213
|
role="group"
|
|
211
214
|
>
|
|
212
215
|
{#each options as option, index (option.id)}
|
|
@@ -221,7 +224,7 @@
|
|
|
221
224
|
для обычного сегмент-контрола без своего цвета (Access, Header и т.п.) поведение
|
|
222
225
|
прежнее — акцентная заливка только у выбранного пункта. -->
|
|
223
226
|
<!-- Обёртка — позиционирующий предок подсказки; overflow-hidden у группы убран, иначе подсказка обрезается -->
|
|
224
|
-
<div class="relative flex min-w-0 flex-1">
|
|
227
|
+
<div class="relative flex {fitContent ? '' : 'min-w-0 flex-1'}">
|
|
225
228
|
<button
|
|
226
229
|
id={option.id}
|
|
227
230
|
class="{twMerge(
|
|
@@ -237,7 +240,8 @@
|
|
|
237
240
|
? 'text-(--on-accent)'
|
|
238
241
|
: 'text-(--font-color) hover:bg-(--container-color)'
|
|
239
242
|
}
|
|
240
|
-
${option.disabled || disabled ? 'cursor-not-allowed text-(--faint-color)' : 'cursor-pointer'}
|
|
243
|
+
${option.disabled || disabled ? 'cursor-not-allowed text-(--faint-color)' : 'cursor-pointer'}
|
|
244
|
+
${fitContent ? 'px-3 whitespace-nowrap' : ''}`,
|
|
241
245
|
option.class,
|
|
242
246
|
)} {hasOwnColor ? 'bg-(--bg-color)' : selected ? 'bg-(--bg-color,var(--accent-color))' : 'bg-(--back-color)'}"
|
|
243
247
|
onclick={(e) => selectOption(option, e)}
|
package/dist/types.d.ts
CHANGED