fix: select mode via segmented button in split by parts

This commit is contained in:
2026-10-07 14:47:50 +05:00
parent 32cb369ca9
commit 676be383d9
6 changed files with 55 additions and 2 deletions
+2
View File
@@ -135,6 +135,8 @@
## UI и качество
- [ ] split to parts - посмотреть вариант с toggle component - может будет
удобнее чем sectioned buttons
- [ ] неудобно настраивать ползунками, некоторые инструменты удобнее настроить
через drag-n-drop. звучит сложно, но надо придумать процесс
- [ ] просмотр картинки в оригинальном размере, и возможно с зумом отдельных
@@ -0,0 +1,33 @@
<script lang="ts">
import Control from "./Control.svelte";
import Segmented from "$lib/components/ui/Segmented.svelte";
import { optionLabel } from "$lib/i18n/schema-tool-strings";
import type { FieldSpec, SegmentedSpec } from "$lib/registry-schema";
interface Props {
label: string;
value: unknown;
spec: FieldSpec;
toolId: string;
fieldId: string;
onchange?: (value: string) => void;
}
let { label, value, spec, toolId, fieldId, onchange }: Props = $props();
const sp = $derived(spec as SegmentedSpec);
const current = $derived(
typeof value === "string" && sp.options.some((o) => o.value === value)
? value
: sp.default,
);
const options = $derived(
sp.options.map((o) => ({
value: o.value,
label: optionLabel(toolId, fieldId, o.value, o.label),
})),
);
</script>
<Control {label}>
<Segmented {options} value={current} onchange={(v) => onchange?.(v)} />
</Control>
@@ -18,6 +18,7 @@
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 SegmentedControl from "$lib/components/fields/schema/SegmentedControl.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";
@@ -42,6 +43,7 @@
"color-pair": ColorPairControl,
colors: ColorsControl,
select: SelectControl,
segmented: SegmentedControl,
checkbox: CheckboxControl,
text: TextControl,
dimension: DimensionField,
+1 -1
View File
@@ -25,7 +25,7 @@ function selectOptions(
const spec = (
field as { spec?: { kind?: string; options?: SelectOption[] } }
).spec;
if (spec?.kind !== "select") continue;
if (spec?.kind !== "select" && spec?.kind !== "segmented") continue;
for (const option of spec.options ?? []) result.push({ fieldId, option });
}
return result;
+16
View File
@@ -50,6 +50,15 @@ export interface SelectSpec<V extends string = string> extends FieldSpecBase {
options: { value: V; label: string }[];
}
/** То же, что select, но рендерится кнопками-сегментами (выбор в 1 клик). */
export interface SegmentedSpec<
V extends string = string,
> extends FieldSpecBase {
kind: "segmented";
default: V;
options: { value: V; label: string }[];
}
export interface TextSpec extends FieldSpecBase {
kind: "text";
default: string;
@@ -214,6 +223,7 @@ export const fieldSpecs = {
slider: {} as SliderSpec,
color: {} as ColorSpec,
select: {} as SelectSpec,
segmented: {} as SegmentedSpec,
text: {} as TextSpec,
checkbox: {} as CheckboxSpec,
dimension: {} as DimensionSpec,
@@ -277,6 +287,11 @@ export const field = {
select: <V extends string>(s: Omit<SelectSpec<V>, "kind">): Field<V> => ({
spec: { kind: "select", ...s },
}),
segmented: <V extends string>(
s: Omit<SegmentedSpec<V>, "kind">,
): Field<V> => ({
spec: { kind: "segmented", ...s },
}),
text: (s: Omit<TextSpec, "kind">): Field<string> => ({
spec: { kind: "text", ...s },
}),
@@ -576,6 +591,7 @@ export function sanitizeSchemaParams<P>(
break;
}
case "select":
case "segmented":
out[key] =
typeof raw === "string" && spec.options.some((o) => o.value === raw)
? raw
+1 -1
View File
@@ -446,7 +446,7 @@ interface SplitPartsParams {
export const splitPartsSchema = toolSchema<SplitPartsParams>(
{
mode: field.select({
mode: field.segmented({
label: "fields.splitMode",
default: "grid",
options: [