poe-svelte-ui-lib 1.31.1 → 1.31.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.
|
@@ -80,23 +80,25 @@
|
|
|
80
80
|
<h5 class={twMerge("w-full text-[13px] font-semibold text-(--muted-color)", label.class)}>{label.name}</h5>
|
|
81
81
|
{/if}
|
|
82
82
|
|
|
83
|
-
<!-- Сегментированный переключатель
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
83
|
+
<!-- Сегментированный переключатель уровней: при одном уровне переключать нечего -->
|
|
84
|
+
{#if levels.length > 1}
|
|
85
|
+
<div class="flex w-full items-center gap-0.5 rounded-[10px] bg-(--container-color) p-[3px]">
|
|
86
|
+
{#each levels as level, index (level.name)}
|
|
87
|
+
<button
|
|
88
|
+
type="button"
|
|
89
|
+
class={twMerge(
|
|
90
|
+
"flex-1 cursor-pointer rounded-[7px] px-3 py-1.5 text-[13px] transition-colors duration-150",
|
|
91
|
+
index === currentLevelIndex
|
|
92
|
+
? "bg-(--back-color) font-semibold text-(--font-color) shadow-(--elevation-1)"
|
|
93
|
+
: "font-medium text-(--muted-color) hover:text-(--font-color)",
|
|
94
|
+
)}
|
|
95
|
+
onclick={() => selectLevel(index)}
|
|
96
|
+
>
|
|
97
|
+
{level.name}
|
|
98
|
+
</button>
|
|
99
|
+
{/each}
|
|
100
|
+
</div>
|
|
101
|
+
{/if}
|
|
100
102
|
|
|
101
103
|
<!-- Столбчатый график -->
|
|
102
104
|
<div class="relative flex w-full flex-col gap-1.5 rounded-[12px] border border-(--hairline-color) bg-(--back-color) p-3.5">
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
| Название | Тип | По умолчанию | Описание |
|
|
14
14
|
| ------------------- | --------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
15
15
|
| `id` | `string` | `crypto.randomUUID()` | Уникальный идентификатор компонента |
|
|
16
|
-
| `wrapperClass` | `string` | `""`
|
|
16
|
+
| `wrapperClass` | `string` | `""` | CSS-классы обёртки — через `bg-*` задаёт цвет переключателя и столбиков (по умолчанию нейтрально, без декоративной заливки) |
|
|
17
17
|
| `label` | `{ name?: string; class?: string }` | `{ name: "", class: "" }` | Заголовок над графиком |
|
|
18
|
-
| `levels` | `IPeriodChartLevel[]` | 4 демо-уровня со случайными данными | Уровни детализации, порядок = порядок вкладок переключателя; открывается всегда на первом (индекс 0)
|
|
18
|
+
| `levels` | `IPeriodChartLevel[]` | 4 демо-уровня со случайными данными | Уровни детализации, порядок = порядок вкладок переключателя; открывается всегда на первом (индекс 0); при одном уровне переключатель не показывается |
|
|
19
19
|
| `levels[].name` | `string` | `-` | Подпись вкладки, напр. `"Час"` |
|
|
20
20
|
| `levels[].variable` | `string` | `undefined` | Имя переменной устройства, откуда берутся `data` этого уровня, напр. `"PWR.EHour"` — используется конструктором для подписки, сам компонент по нему ничего не запрашивает |
|
|
21
21
|
| `levels[].data` | `number[]` | `-` | Значения — длина массива = число столбиков, ничем не ограничена |
|