53 lines
2.2 KiB
Svelte
53 lines
2.2 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import * as Item from '$shared/shadcn/ui/item';
|
||
|
|
import { Separator } from '$shared/shadcn/ui/separator/index';
|
||
|
|
import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
|
||
|
|
import ComboControl from '$shared/ui/ComboControl/ComboControl.svelte';
|
||
|
|
import { fontSizeStore } from '../model/stores/fontSizeStore';
|
||
|
|
import { fontWeightStore } from '../model/stores/fontWeightStore';
|
||
|
|
import { lineHeightStore } from '../model/stores/lineHeightStore';
|
||
|
|
|
||
|
|
const fontSize = $derived($fontSizeStore);
|
||
|
|
const fontWeight = $derived($fontWeightStore);
|
||
|
|
const lineHeight = $derived($lineHeightStore);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="w-full p-2">
|
||
|
|
<Item.Root variant="outline" class="w-full p-2.5">
|
||
|
|
<Item.Content class="flex flex-row items-center">
|
||
|
|
<Sidebar.Trigger />
|
||
|
|
<Separator orientation="vertical" class="h-full" />
|
||
|
|
<ComboControl
|
||
|
|
value={fontSize.value}
|
||
|
|
onChange={fontSizeStore.setValue}
|
||
|
|
onIncrease={fontSizeStore.increase}
|
||
|
|
onDecrease={fontSizeStore.decrease}
|
||
|
|
increaseDisabled={fontSizeStore.isAtMax()}
|
||
|
|
decreaseDisabled={fontSizeStore.isAtMin()}
|
||
|
|
increaseLabel="Increase Font Size"
|
||
|
|
decreaseLabel="Decrease Font Size"
|
||
|
|
/>
|
||
|
|
<ComboControl
|
||
|
|
value={fontWeight.value}
|
||
|
|
onChange={fontWeightStore.setValue}
|
||
|
|
onIncrease={fontWeightStore.increase}
|
||
|
|
onDecrease={fontWeightStore.decrease}
|
||
|
|
increaseDisabled={fontWeightStore.isAtMax()}
|
||
|
|
decreaseDisabled={fontWeightStore.isAtMin()}
|
||
|
|
increaseLabel="Increase Font Weight"
|
||
|
|
decreaseLabel="Decrease Font Weight"
|
||
|
|
/>
|
||
|
|
<ComboControl
|
||
|
|
value={lineHeight.value}
|
||
|
|
onChange={lineHeightStore.setValue}
|
||
|
|
onIncrease={lineHeightStore.increase}
|
||
|
|
onDecrease={lineHeightStore.decrease}
|
||
|
|
increaseDisabled={lineHeightStore.isAtMax()}
|
||
|
|
decreaseDisabled={lineHeightStore.isAtMin()}
|
||
|
|
increaseLabel="Increase Line Height"
|
||
|
|
decreaseLabel="Decrease Line Height"
|
||
|
|
/>
|
||
|
|
</Item.Content>
|
||
|
|
</Item.Root>
|
||
|
|
</div>
|