refactor(shared): ComboControl owns its NumericControl + ControlLabels contract
This commit is contained in:
@@ -4,7 +4,6 @@
|
|||||||
that opens a vertical slider popover.
|
that opens a vertical slider popover.
|
||||||
-->
|
-->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { TypographyControl } from '$shared/lib';
|
|
||||||
import { cn } from '$shared/lib';
|
import { cn } from '$shared/lib';
|
||||||
import { Slider } from '$shared/ui';
|
import { Slider } from '$shared/ui';
|
||||||
import { Button } from '$shared/ui/Button';
|
import { Button } from '$shared/ui/Button';
|
||||||
@@ -12,12 +11,16 @@ import MinusIcon from '@lucide/svelte/icons/minus';
|
|||||||
import PlusIcon from '@lucide/svelte/icons/plus';
|
import PlusIcon from '@lucide/svelte/icons/plus';
|
||||||
import { Popover } from 'bits-ui';
|
import { Popover } from 'bits-ui';
|
||||||
import TechText from '../TechText/TechText.svelte';
|
import TechText from '../TechText/TechText.svelte';
|
||||||
|
import type {
|
||||||
|
ControlLabels,
|
||||||
|
NumericControl,
|
||||||
|
} from './types';
|
||||||
|
|
||||||
interface Props {
|
interface Props extends ControlLabels {
|
||||||
/**
|
/**
|
||||||
* Typography control
|
* Bounded numeric control to render
|
||||||
*/
|
*/
|
||||||
control: TypographyControl;
|
control: NumericControl;
|
||||||
/**
|
/**
|
||||||
* Control label
|
* Control label
|
||||||
*/
|
*/
|
||||||
@@ -31,20 +34,6 @@ interface Props {
|
|||||||
* @default false
|
* @default false
|
||||||
*/
|
*/
|
||||||
reduced?: boolean;
|
reduced?: boolean;
|
||||||
/**
|
|
||||||
* Increase button label
|
|
||||||
* @default 'Increase'
|
|
||||||
*/
|
|
||||||
increaseLabel?: string;
|
|
||||||
/**
|
|
||||||
* Decrease button label
|
|
||||||
* @default 'Decrease'
|
|
||||||
*/
|
|
||||||
decreaseLabel?: string;
|
|
||||||
/**
|
|
||||||
* Control aria label
|
|
||||||
*/
|
|
||||||
controlLabel?: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let {
|
let {
|
||||||
|
|||||||
@@ -0,0 +1,60 @@
|
|||||||
|
/**
|
||||||
|
* Structural contract for the bounded numeric control ComboControl renders.
|
||||||
|
*
|
||||||
|
* ComboControl depends only on this shape — never on a concrete factory.
|
||||||
|
* The typography control factory in features/AdjustTypography produces a value
|
||||||
|
* conforming to it; any other conforming object works equally well.
|
||||||
|
*/
|
||||||
|
export interface NumericControl {
|
||||||
|
/**
|
||||||
|
* Current value. The setter is expected to clamp to [min, max] and round to step.
|
||||||
|
*/
|
||||||
|
value: number;
|
||||||
|
/**
|
||||||
|
* Lower inclusive bound
|
||||||
|
*/
|
||||||
|
readonly min: number;
|
||||||
|
/**
|
||||||
|
* Upper inclusive bound
|
||||||
|
*/
|
||||||
|
readonly max: number;
|
||||||
|
/**
|
||||||
|
* Increment/decrement precision
|
||||||
|
*/
|
||||||
|
readonly step: number;
|
||||||
|
/**
|
||||||
|
* True when the value is at or below min
|
||||||
|
*/
|
||||||
|
readonly isAtMin: boolean;
|
||||||
|
/**
|
||||||
|
* True when the value is at or above max
|
||||||
|
*/
|
||||||
|
readonly isAtMax: boolean;
|
||||||
|
/**
|
||||||
|
* Increase the value by one step (clamped to max)
|
||||||
|
*/
|
||||||
|
increase(): void;
|
||||||
|
/**
|
||||||
|
* Decrease the value by one step (clamped to min)
|
||||||
|
*/
|
||||||
|
decrease(): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Accessibility label fields. Single source of truth — composed by both
|
||||||
|
* ComboControl.Props and the typography ControlModel so they never drift.
|
||||||
|
*/
|
||||||
|
export interface ControlLabels {
|
||||||
|
/**
|
||||||
|
* Screen-reader label for the increase button
|
||||||
|
*/
|
||||||
|
increaseLabel?: string;
|
||||||
|
/**
|
||||||
|
* Screen-reader label for the decrease button
|
||||||
|
*/
|
||||||
|
decreaseLabel?: string;
|
||||||
|
/**
|
||||||
|
* Overall label describing the control's purpose (also the aria fallback)
|
||||||
|
*/
|
||||||
|
controlLabel?: string;
|
||||||
|
}
|
||||||
@@ -28,6 +28,16 @@ export {
|
|||||||
*/
|
*/
|
||||||
default as ComboControl,
|
default as ComboControl,
|
||||||
} from './ComboControl/ComboControl.svelte';
|
} from './ComboControl/ComboControl.svelte';
|
||||||
|
export type {
|
||||||
|
/**
|
||||||
|
* Accessibility label fields shared by ComboControl and control models
|
||||||
|
*/
|
||||||
|
ControlLabels,
|
||||||
|
/**
|
||||||
|
* Structural contract for the bounded numeric control ComboControl renders
|
||||||
|
*/
|
||||||
|
NumericControl,
|
||||||
|
} from './ComboControl/types';
|
||||||
export {
|
export {
|
||||||
/**
|
/**
|
||||||
* Rich text input using contenteditable attribute
|
* Rich text input using contenteditable attribute
|
||||||
|
|||||||
Reference in New Issue
Block a user