poe-svelte-ui-lib 1.32.0 → 1.32.1
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.
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
{#if isDirty}
|
|
124
124
|
<span class="text-[12px] text-(--muted-color)" transition:slide={{ duration: 100 }}>Есть несохранённые изменения</span>
|
|
125
125
|
{/if}
|
|
126
|
-
<UI.Button wrapperClass="w-40" componentClass="bg-
|
|
126
|
+
<UI.Button wrapperClass="w-40" componentClass="bg-accent" content={{ name: "Сохранить" }} disabled={!isDirty} onClick={save} />
|
|
127
127
|
</div>
|
|
128
128
|
</div>
|
|
129
129
|
{/if}
|
|
@@ -54,8 +54,8 @@
|
|
|
54
54
|
let free = $derived(value?.FSFree ?? Math.max(total - used, 0))
|
|
55
55
|
let files = $derived(value?.FSList ?? [])
|
|
56
56
|
let usedPercent = $derived(total > 0 ? Math.min(100, Math.round((used / total) * 100)) : 0)
|
|
57
|
-
/*
|
|
58
|
-
let
|
|
57
|
+
/* Полоса — мастер-цвет виджета; почти заполненную ФС (закачка скоро начнёт падать) выдаёт только процент */
|
|
58
|
+
let percentColor = $derived(usedPercent >= 90 ? "var(--red-color)" : usedPercent >= 75 ? "var(--orange-color)" : "var(--muted-color)")
|
|
59
59
|
|
|
60
60
|
/* Таблица файлов: путь обрезается «…», размер — уже отформатирован, удаление — с подтверждением */
|
|
61
61
|
type FileRow = IWidgetFileSystemFile & { SizeText: string }
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
? [
|
|
68
68
|
{
|
|
69
69
|
label: { name: "" },
|
|
70
|
-
content: [{ type: "button", data: { name: "Удалить", class: "bg-
|
|
70
|
+
content: [{ type: "button", data: { name: "Удалить", class: "bg-accent", onClick: (row: FileRow) => (pendingDelete = row.Name) } }],
|
|
71
71
|
width: "6.5rem",
|
|
72
72
|
align: "center",
|
|
73
73
|
} as ITableHeader<FileRow>,
|
|
@@ -126,10 +126,10 @@
|
|
|
126
126
|
<div class="flex flex-col gap-2 rounded-[10px] border border-(--hairline-color) bg-(--back-color) p-3">
|
|
127
127
|
<div class="flex items-baseline justify-between gap-2 text-[13px]">
|
|
128
128
|
<span class="font-semibold">Занято {formatBytes(used)} из {formatBytes(total)}</span>
|
|
129
|
-
<span class="font-semibold tabular-nums" style="color: {
|
|
129
|
+
<span class="font-semibold tabular-nums" style="color: {percentColor}">{usedPercent}%</span>
|
|
130
130
|
</div>
|
|
131
131
|
<div class="h-2 w-full overflow-hidden rounded-full bg-(--container-color)">
|
|
132
|
-
<div class="h-full rounded-full transition-[width] duration-300" style="width: {usedPercent}%; background:
|
|
132
|
+
<div class="h-full rounded-full transition-[width] duration-300" style="width: {usedPercent}%; background: var(--accent-color)"></div>
|
|
133
133
|
</div>
|
|
134
134
|
<div class="flex justify-between gap-2 text-[12px] text-(--muted-color)">
|
|
135
135
|
<span>Свободно {formatBytes(free)}</span>
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
|
|
34
34
|
/* "Мастер-цвет" виджета — переопределяет --accent-color/--accent-soft на корне, дальше это
|
|
35
35
|
штатный каскад переменных, на котором и так построены компоненты библиотеки: значок, режимы
|
|
36
|
-
STA/AP, фокус-кольцо у полей
|
|
37
|
-
|
|
36
|
+
STA/AP, фокус-кольцо у полей и кнопка "Сохранить" (маркер bg-accent) перекрашиваются вместе,
|
|
37
|
+
одним источником истины; красной остаётся только кнопка подтверждения режима AP. */
|
|
38
38
|
let accentStyle = $derived(widgetAccentStyle(componentClass ?? ""))
|
|
39
39
|
|
|
40
40
|
let cfg: IWidgetWiFiConfig = $state(
|
|
@@ -220,7 +220,7 @@
|
|
|
220
220
|
{#if isDirty}
|
|
221
221
|
<span class="text-[12px] text-(--muted-color)" transition:slide={{ duration: 100 }}>Есть несохранённые изменения</span>
|
|
222
222
|
{/if}
|
|
223
|
-
<UI.Button wrapperClass="w-40" componentClass="bg-
|
|
223
|
+
<UI.Button wrapperClass="w-40" componentClass="bg-accent" content={{ name: "Сохранить" }} disabled={!isDirty} onClick={save} />
|
|
224
224
|
</div>
|
|
225
225
|
</div>
|
|
226
226
|
{/if}
|
package/dist/widgetAccent.js
CHANGED
|
@@ -6,9 +6,13 @@
|
|
|
6
6
|
/* componentClass — значение вида "bg-red" из optionsStore.COLOR_OPTIONS (или "" — без роли,
|
|
7
7
|
обычный акцент темы). Возвращает inline-style для корня виджета; пустая строка ничего не переопределяет. */
|
|
8
8
|
export const widgetAccentStyle = (componentClass) => {
|
|
9
|
+
/* --bg-color = акцент: кнопки виджета с маркером "bg-accent" (класса в теме нет — только роль "залитая")
|
|
10
|
+
заливаются им по наследованию, поэтому "Сохранить"/"Удалить" перекрашиваются вместе со всем виджетом */
|
|
11
|
+
const fill = "--bg-color: var(--accent-color);";
|
|
9
12
|
const role = componentClass.match(/(?:^|\s)bg-(\w+)/)?.[1];
|
|
10
13
|
if (!role || role === "max")
|
|
11
|
-
return
|
|
14
|
+
return fill;
|
|
12
15
|
return (`--accent-color: var(--${role}-color); --accent-soft: var(--${role}-soft); --accent-hover: var(--${role}-color);` +
|
|
13
|
-
`--focus-shadow-color: 0 0 0 3px color-mix(in srgb, var(--${role}-color) 18%, transparent);`
|
|
16
|
+
`--focus-shadow-color: 0 0 0 3px color-mix(in srgb, var(--${role}-color) 18%, transparent);` +
|
|
17
|
+
fill);
|
|
14
18
|
};
|