refactor: separate components

2026-11-13 17:08:20 +00:00 · 2026-10-04 08:48:14 +05:00
parent f89811c116
commit c4eab38866
63 changed files with 529 additions and 645 deletions
@@ -0,0 +1,133 @@
+<script lang="ts">
+	import type {
+		FieldSpec,
+		FieldSpecKind,
+		ToolSchema,
+	} from "$lib/registry-schema";
+	import { resolveLayoutGroups } from "$lib/registry-schema";
+	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 Button from "$lib/components/ui/Button.svelte";
+	import DimensionField from "$lib/components/fields/schema/DimensionField.svelte";
+	import CheckboxControl from "$lib/components/fields/schema/CheckboxControl.svelte";
+	import ColorControl from "$lib/components/fields/schema/ColorControl.svelte";
+	import ColorPairControl from "$lib/components/fields/schema/ColorPairControl.svelte";
+	import ColorsControl from "$lib/components/fields/schema/ColorsControl.svelte";
+	import RangeControl from "$lib/components/fields/schema/RangeControl.svelte";
+	import SelectControl from "$lib/components/fields/schema/SelectControl.svelte";
+	import TextControl from "$lib/components/fields/schema/TextControl.svelte";
+	import OffsetControl from "$lib/components/fields/schema/OffsetControl.svelte";
+	import PositionControl from "$lib/components/fields/schema/PositionControl.svelte";
+	import FontStyleControl from "$lib/components/fields/schema/FontStyleControl.svelte";
+	import PlateControl from "$lib/components/fields/schema/PlateControl.svelte";
+	import GradientControl from "$lib/components/fields/schema/GradientControl.svelte";
+
+	interface FieldControlProps {
+		label: string;
+		value: unknown;
+		spec: FieldSpec;
+		toolId: string;
+		fieldId: string;
+		onchange?: (value: unknown) => void;
+	}
+
+	const FIELDS: Record<FieldSpecKind, Component<FieldControlProps>> = {
+		number: RangeControl,
+		slider: RangeControl,
+		color: ColorControl,
+		"color-pair": ColorPairControl,
+		colors: ColorsControl,
+		select: SelectControl,
+		checkbox: CheckboxControl,
+		text: TextControl,
+		dimension: DimensionField,
+		offset: OffsetControl,
+		position9: PositionControl,
+		"font-style": FontStyleControl,
+		plate: PlateControl,
+		gradient: GradientControl,
+	};
+
+	interface Props {
+		schema: ToolSchema<Record<string, unknown>>;
+		values: Record<string, unknown>;
+		toolId: string;
+		onchange: (id: string, value: unknown) => void;
+		onreset: () => void;
+	}
+	let { schema, values, toolId, onchange, onreset }: Props = $props();
+
+	const layoutGroups = $derived(resolveLayoutGroups(schema));
+</script>
+
+{#each layoutGroups as group (group.key)}
+	{#if group.title}
+		<span class="group-title">{groupLabel(group.title)}</span>
+	{/if}
+	<div
+		class="group-fields"
+		style:grid-template-columns={group.cols > 1
+			? `repeat(${group.cols}, minmax(0, 1fr))`
+			: undefined}
+	>
+		{#each group.fields as id (id)}
+			{@const Control = FIELDS[schema.fields[id].spec.kind]}
+			<Control
+				label={fieldLabel(schema.fields[id], id)}
+				value={values[id]}
+				spec={schema.fields[id].spec}
+				{toolId}
+				fieldId={id}
+				onchange={(v) => onchange(id, v)}
+			/>
+		{/each}
+	</div>
+{/each}
+
+<div class="panel-foot">
+	<Button
+		icon={RotateCcw}
+		label={t("ui.reset")}
+		variant="clear"
+		size="s"
+		onclick={onreset}
+	/>
+	<span class="auto-note"><i></i> {t("ui.autoUpdate")}</span>
+</div>
+
+<style>
+	.group-title {
+		display: block;
+		margin-top: var(--space-l);
+		margin-bottom: var(--space-s);
+		color: var(--color-text-muted);
+		font: var(--font-size-s) var(--font-mono);
+		letter-spacing: var(--space-text-l);
+		text-transform: uppercase;
+	}
+	.group-title:first-child {
+		margin-top: 0;
+	}
+	.group-fields {
+		display: grid;
+		grid-template-columns: 1fr;
+		column-gap: var(--space-l);
+	}
+	.panel-foot {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: var(--space-m);
+		margin-top: var(--space-xl);
+		padding-top: var(--space-l);
+		border-top: var(--size-border) solid var(--color-border);
+	}
+	.auto-note i {
+		width: var(--size-border-thick);
+		height: var(--size-border-thick);
+		border-radius: 50%;
+		background: var(--color-success);
+	}
+</style>