56 lines
1.2 KiB
Svelte
56 lines
1.2 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import QuickAddButton from '$lib/components/QuickAddButton.svelte';
|
||
|
|
import type { ExerciseConfig } from './workoutData';
|
||
|
|
|
||
|
|
interface Props extends ExerciseConfig {
|
||
|
|
label: string;
|
||
|
|
value: number;
|
||
|
|
onchange: (value: number) => void;
|
||
|
|
defaultValue: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
let {
|
||
|
|
label,
|
||
|
|
icon,
|
||
|
|
name,
|
||
|
|
value = $bindable(),
|
||
|
|
onchange,
|
||
|
|
min = 0,
|
||
|
|
max = 9999,
|
||
|
|
step = 1,
|
||
|
|
quickAddOptions,
|
||
|
|
defaultValue,
|
||
|
|
color = 'blue'
|
||
|
|
}: Props = $props();
|
||
|
|
|
||
|
|
function quickAdd(amount: number) {
|
||
|
|
const newValue = Math.max(min, value + amount);
|
||
|
|
value = step < 1 ? Number(newValue.toFixed(2)) : newValue;
|
||
|
|
onchange(value);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="mb-6">
|
||
|
|
<label for={name} class="mb-2 block text-sm font-medium text-gray-700">
|
||
|
|
{icon}
|
||
|
|
{label}
|
||
|
|
</label>
|
||
|
|
<div class="flex items-center space-x-2">
|
||
|
|
<input
|
||
|
|
id={name}
|
||
|
|
{name}
|
||
|
|
type="number"
|
||
|
|
bind:value
|
||
|
|
{min}
|
||
|
|
{max}
|
||
|
|
{step}
|
||
|
|
{defaultValue}
|
||
|
|
required={true}
|
||
|
|
class="flex-1 rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
|
||
|
|
/>
|
||
|
|
{#each quickAddOptions as option}
|
||
|
|
<QuickAddButton label={option.label} onclick={() => quickAdd(option.value)} {color} />
|
||
|
|
{/each}
|
||
|
|
</div>
|
||
|
|
</div>
|