poe-svelte-ui-lib 1.90.0 → 1.91.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/README.md +1 -1
- package/dist/Accordion/Accordion.svelte +35 -28
- package/dist/types.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
**Компоненты.** Каждый привязывается к одной переменной устройства: `Input`, `Select`, `Switch`, `Slider`, `Button`, `Joystick`, `ProgressBar`, `Graph`, `PeriodChart`, `Table`, `FileAttach`, `VideoViewer`, `TextField`, `Widget`.
|
|
26
26
|
|
|
27
|
-
**Раскладка.** `Accordion`, `Tabs`, `Divider`, `Carousel`, `Modal`.
|
|
27
|
+
**Раскладка.** `Accordion`, `Tabs`, `Divider`, `Carousel`, `Modal`. У `Accordion` есть необязательный слот `actions` - кнопки справа в заголовке, нажатие на них блок не сворачивает.
|
|
28
28
|
|
|
29
29
|
**Ядро протоколов** (`poe-svelte-ui-lib/protocols`). Кодирование и разбор пакетов для всех каналов связи с устройством. Работает без Svelte, в том числе под Node.
|
|
30
30
|
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
size = { width: 1, height: 1 },
|
|
14
14
|
label = { name: "", class: "text-left", icon: null },
|
|
15
15
|
children,
|
|
16
|
+
actions,
|
|
16
17
|
image = "",
|
|
17
18
|
}: IAccordionProps = $props()
|
|
18
19
|
|
|
@@ -27,35 +28,41 @@
|
|
|
27
28
|
>
|
|
28
29
|
<div class="overflow-hidden rounded-[14px] border border-(--hairline-color) bg-(--back-color)">
|
|
29
30
|
<!-- Фон заголовка - мягкий оттенок мастер-цвета (светлый в светлой теме, тёмный в тёмной), текст - мастер-цвет с цветом шрифта 60/40, раскрытое содержимое остаётся на чистом фоне (--back-color). -->
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
{#if label?.icon}
|
|
36
|
-
<span
|
|
37
|
-
class="flex h-[18px] w-[18px] shrink-0 items-center justify-center text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] [&_svg]:h-full [&_svg]:w-full"
|
|
38
|
-
>
|
|
39
|
-
{#if typeof label?.icon === "string"}
|
|
40
|
-
{@html label.icon}
|
|
41
|
-
{:else}
|
|
42
|
-
{@const IconComponent = label?.icon}
|
|
43
|
-
<IconComponent />
|
|
44
|
-
{/if}
|
|
45
|
-
</span>
|
|
46
|
-
{/if}
|
|
47
|
-
<span class={twMerge(`min-w-0 truncate text-[14px] font-semibold`, label.class)}>{label?.name}</span>
|
|
48
|
-
</div>
|
|
49
|
-
|
|
50
|
-
<svg
|
|
51
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
52
|
-
class="h-[14px] w-[14px] shrink-0 text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] transition-transform duration-200"
|
|
53
|
-
style="transform: rotate({isOpen ? 180 : 0}deg)"
|
|
54
|
-
viewBox="0 0 24 24"
|
|
31
|
+
<!-- Заголовок: кнопка сворачивания на всю ширину и необязательные кнопки справа (actions) - вне неё, чтобы не сворачивать блок -->
|
|
32
|
+
<div class="flex w-full items-center bg-(--accent-soft)">
|
|
33
|
+
<button
|
|
34
|
+
class="flex min-w-0 flex-1 cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] transition-colors duration-150 hover:bg-[color-mix(in_srgb,var(--accent-color)_12%,var(--accent-soft))]"
|
|
35
|
+
onclick={toggle}
|
|
55
36
|
>
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
37
|
+
<div class="flex min-w-0 flex-1 items-center gap-3">
|
|
38
|
+
{#if label?.icon}
|
|
39
|
+
<span
|
|
40
|
+
class="flex h-[18px] w-[18px] shrink-0 items-center justify-center text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] [&_svg]:h-full [&_svg]:w-full"
|
|
41
|
+
>
|
|
42
|
+
{#if typeof label?.icon === "string"}
|
|
43
|
+
{@html label.icon}
|
|
44
|
+
{:else}
|
|
45
|
+
{@const IconComponent = label?.icon}
|
|
46
|
+
<IconComponent />
|
|
47
|
+
{/if}
|
|
48
|
+
</span>
|
|
49
|
+
{/if}
|
|
50
|
+
<span class={twMerge(`min-w-0 truncate text-[14px] font-semibold`, label.class)}>{label?.name}</span>
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<svg
|
|
54
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
55
|
+
class="h-[14px] w-[14px] shrink-0 text-[color-mix(in_srgb,var(--accent-color)_60%,var(--font-color))] transition-transform duration-200"
|
|
56
|
+
style="transform: rotate({isOpen ? 180 : 0}deg)"
|
|
57
|
+
viewBox="0 0 24 24"
|
|
58
|
+
>
|
|
59
|
+
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9l6 6 6-6" />
|
|
60
|
+
</svg>
|
|
61
|
+
</button>
|
|
62
|
+
{#if actions}
|
|
63
|
+
<div class="flex shrink-0 items-center gap-1 pr-3">{@render actions()}</div>
|
|
64
|
+
{/if}
|
|
65
|
+
</div>
|
|
59
66
|
|
|
60
67
|
{#if isOpen}
|
|
61
68
|
<div
|
package/dist/types.d.ts
CHANGED