fix: update i18n - fields components

This commit is contained in:
2026-09-13 06:25:53 +05:00
parent 6c88a23e48
commit 4b44bc439c
7 changed files with 33 additions and 22 deletions
+6 -4
View File
@@ -4,7 +4,8 @@
FieldSpecKind,
ToolSchema,
} from "$lib/registry-schema";
import { fieldLabel } from "$lib/i18n/schema-tool-strings";
import { fieldLabel, groupLabel } from "$lib/i18n/schema-tool-strings";
import { t } from "$lib/i18n/t";
import { RotateCcw } from "@lucide/svelte";
import type { Component } from "svelte";
import DimensionField from "./fields/DimensionField.svelte";
@@ -89,7 +90,7 @@
{#each layoutGroups as group (group.key)}
{#if group.title}
<span class="group-title">{group.title}</span>
<span class="group-title">{groupLabel(group.title)}</span>
{/if}
<div
class="group-fields"
@@ -111,9 +112,10 @@
<div class="panel-foot">
<button class="reset-btn" onclick={onreset}>
<RotateCcw size={14} /> Reset
<RotateCcw size={14} />
{t("ui.reset")}
</button>
<span class="auto-note"><i></i> updates automatically</span>
<span class="auto-note"><i></i> {t("ui.autoUpdate")}</span>
</div>
<style>
@@ -1,4 +1,5 @@
<script lang="ts">
import { t } from "$lib/i18n/t";
import type {
Dimension,
DimensionSpec,
@@ -37,7 +38,7 @@
<span class="dimension-label">{label}</span>
<div class="dimension-field">
<label class="dimension-axis">
<span>Width</span>
<span>{t("ui.width")}</span>
<input
type="number"
min={sp.min}
@@ -48,7 +49,7 @@
/>
</label>
<label class="dimension-axis">
<span>Height</span>
<span>{t("ui.height")}</span>
<input
type="number"
min={sp.min}
@@ -1,4 +1,6 @@
<script lang="ts">
import { t } from "$lib/i18n/t";
interface Preset {
value: number;
label: string;
@@ -15,7 +17,7 @@
}
let {
label = "Angle",
label = t("ui.angle"),
value,
min = 0,
max = 360,
@@ -1,4 +1,5 @@
<script lang="ts">
import { t } from "$lib/i18n/t";
import type {
ColorList,
ColorListSpec,
@@ -59,14 +60,16 @@
class="remove"
onclick={() => removeColor(i)}
disabled={current.length <= 1}
aria-label="Remove color"
aria-label={t("ui.removeColor")}
>
×
</button>
</div>
{/each}
</div>
<button type="button" class="add" onclick={addColor}>+ Add color</button>
<button type="button" class="add" onclick={addColor}
>{t("ui.addColor")}</button
>
</div>
<style>
@@ -1,4 +1,5 @@
<script lang="ts">
import { t } from "$lib/i18n/t";
import type { TextFont } from "$lib/core/domText";
import type {
FieldSpec,
@@ -35,10 +36,10 @@
onchange?.({ ...current, [key]: val });
}
const FONTS: { value: TextFont; label: string }[] = [
{ value: "sans", label: "Sans" },
{ value: "serif", label: "Serif" },
{ value: "mono", label: "Mono" },
const FONTS: { value: TextFont; labelKey: string }[] = [
{ value: "sans", labelKey: "ui.fontSans" },
{ value: "serif", labelKey: "ui.fontSerif" },
{ value: "mono", labelKey: "ui.fontMono" },
];
</script>
@@ -46,7 +47,7 @@
<span class="fs-label">{label}</span>
<div class="fs-grid">
<label class="fs-cell">
<span class="fs-sub">Font</span>
<span class="fs-sub">{t("ui.font")}</span>
<select
class="fs-select"
value={current.font}
@@ -54,12 +55,12 @@
set("font", (e.target as HTMLSelectElement).value as TextFont)}
>
{#each FONTS as option (option.value)}
<option value={option.value}>{option.label}</option>
<option value={option.value}>{t(option.labelKey)}</option>
{/each}
</select>
</label>
<label class="fs-cell">
<span class="fs-sub">Size</span>
<span class="fs-sub">{t("ui.size")}</span>
<input
class="fs-input"
type="number"
@@ -71,7 +72,7 @@
/>
</label>
<label class="fs-cell">
<span class="fs-sub">Color</span>
<span class="fs-sub">{t("ui.color")}</span>
<span class="fs-color">
<span class="swatch" style="background:{current.color}"></span>
<input
@@ -83,7 +84,7 @@
</span>
</label>
<label class="fs-cell fs-bold">
<span class="fs-sub">Bold</span>
<span class="fs-sub">{t("ui.bold")}</span>
<input
type="checkbox"
checked={current.bold}
@@ -1,5 +1,6 @@
<script lang="ts">
import AngleControl from "./AngleControl.svelte";
import { t } from "$lib/i18n/t";
import type { FieldSpec, Gradient, GradientSpec } from "$lib/registry-schema";
interface Props {
@@ -32,7 +33,7 @@
<span class="gradient-label">{label}</span>
<div class="gradient-colors">
<label class="color-field">
<span>From</span>
<span>{t("ui.from")}</span>
<span class="swatch" style="background:{current.from}"></span>
<input
type="color"
@@ -41,7 +42,7 @@
/>
</label>
<label class="color-field">
<span>To</span>
<span>{t("ui.to")}</span>
<span class="swatch" style="background:{current.to}"></span>
<input
type="color"
@@ -1,4 +1,5 @@
<script lang="ts">
import { t } from "$lib/i18n/t";
import type { FieldSpec, Plate, PlateSpec } from "$lib/registry-schema";
interface Props {
@@ -31,7 +32,7 @@
<span class="plate-label">{label}</span>
<div class="plate-row {current.enabled ? '' : 'off'}">
<label class="plate-enabled">
<span>Backing plate</span>
<span>{t("ui.backingPlate")}</span>
<input
type="checkbox"
checked={current.enabled}
@@ -49,7 +50,7 @@
</label>
<label class="plate-opacity">
<span>
Opacity
{t("ui.opacity")}
<output>{current.opacity}%</output>
</span>
<input