af5f10a4ec
- shift+click now only sets fromUnitId; inputValue is unchanged so all outputs recalculate correctly from the original user input - Ctrl+click is a new gesture that sets both fromUnitId and inputValue to the tile's displayed converted value (the "pivot" action) - highlighted-result block always renders with min-height:8rem so the page below it never jumps when a highlight is added or cleared - hotkey hint updated to document all three click gestures Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
65 lines
1.9 KiB
Svelte
65 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import type { Unit, ResultItem } from '$lib/types';
|
|
import type { Big } from 'big.js';
|
|
import { MIN_COLUMN_WIDTH, GRID_GAP } from '$lib/config';
|
|
import UnitInput from './UnitInput.svelte';
|
|
import UnitDropdown from './UnitDropdown.svelte';
|
|
import ConversionResult from './ConversionResult.svelte';
|
|
|
|
/**
|
|
* ConverterCard — groups UnitInput + UnitDropdown + results grid + hotkey hint.
|
|
* Emits events upward; does NOT contain NL input (Phase 3).
|
|
*/
|
|
|
|
let {
|
|
units,
|
|
inputValue,
|
|
fromUnitId,
|
|
highlightedUnitId,
|
|
results,
|
|
oninputchange,
|
|
onunitchange,
|
|
onhighlight,
|
|
onsetinput,
|
|
onctrlclick
|
|
}: {
|
|
units: Unit[];
|
|
inputValue: number;
|
|
fromUnitId: string;
|
|
highlightedUnitId: string | null;
|
|
results: ResultItem[];
|
|
oninputchange: (v: number) => void;
|
|
onunitchange: (id: string) => void;
|
|
onhighlight: (id: string) => void;
|
|
onsetinput: (id: string) => void;
|
|
onctrlclick: (id: string, value: Big) => void;
|
|
} = $props();
|
|
|
|
const gridStyle = `--min-col-width: ${MIN_COLUMN_WIDTH}; --grid-gap: ${GRID_GAP};`;
|
|
</script>
|
|
|
|
<article>
|
|
<div class="converter-controls">
|
|
<UnitInput value={inputValue} onchange={oninputchange} />
|
|
<UnitDropdown {units} value={fromUnitId} onchange={onunitchange} />
|
|
</div>
|
|
|
|
<div class="results-grid" style={gridStyle}>
|
|
{#each results as item (item.unit.id)}
|
|
<ConversionResult
|
|
value={item.convertedValue}
|
|
unit={item.unit}
|
|
highlighted={item.unit.id === highlightedUnitId}
|
|
isInputUnit={item.unit.id === fromUnitId}
|
|
onclick={() => onhighlight(item.unit.id)}
|
|
onshiftclick={() => onsetinput(item.unit.id)}
|
|
onctrlclick={() => onctrlclick(item.unit.id, item.convertedValue)}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
|
|
<p class="hotkey-hint">
|
|
<small>Click to highlight · Shift+click to change input unit · Ctrl+click to adopt value as input</small>
|
|
</p>
|
|
</article>
|