@groundbrick/svelte-ui 0.1.1

package/dist/components/DurationInput.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { minutesToHoursAndMinutes, hoursAndMinutesToMinutes } from "../utils/duration.js";
+    import "../styles/forms.css";
+
+    interface DurationInputProps {
+        /** ID base do campo (usado em horas/minutos e no label) */
+        id: string;
+        /** Valor total em minutos (bindable). null = vazio */
+        value?: number | null;
+        /** Label opcional (omitir quando usado inline, ex.: célula de tabela) */
+        label?: string;
+        /** Texto de ajuda; se omitido, mostra a duração formatada (ex.: "= 1h 20min") */
+        helpText?: string;
+        /** Campo obrigatório (marca o label) */
+        required?: boolean;
+        /** Campo desabilitado */
+        disabled?: boolean;
+        /** Tamanho: 'sm' para células de tabela / ajustes inline */
+        size?: "sm" | "md";
+        /** Callback com o total em minutos (null quando vazio) */
+        onchange?: (minutes: number | null) => void;
+        /** Classes CSS adicionais no contentor */
+        class?: string;
+        /** Ícone exibido no label */
+        icon?: Snippet;
+    }
+
+    let {
+        id,
+        value = $bindable<number | null>(null),
+        label,
+        helpText,
+        required = false,
+        disabled = false,
+        size = "md",
+        onchange,
+        class: additionalClasses = "",
+        icon,
+    }: DurationInputProps = $props();
+
+    // Local field state, kept in sync with `value`.
+    let hours = $state<number | null>(null);
+    let minutes = $state<number | null>(null);
+
+    // Sync local fields whenever `value` changes from the outside (parent reset,
+    // async load). The guard avoids clobbering the user's input with our own
+    // round-tripped value while typing.
+    $effect(() => {
+        const combined = hoursAndMinutesToMinutes(hours, minutes);
+        if (combined !== (value ?? null)) {
+            const parts = minutesToHoursAndMinutes(value);
+            hours = parts.hours;
+            minutes = parts.minutes;
+        }
+    });
+
+    function emit() {
+        const total = hoursAndMinutesToMinutes(hours, minutes);
+        value = total;
+        onchange?.(total);
+    }
+
+    function onHoursInput(event: Event) {
+        const raw = (event.target as HTMLInputElement).value;
+        hours = raw === "" ? null : Math.max(0, Math.floor(Number(raw)));
+        emit();
+    }
+
+    function onMinutesInput(event: Event) {
+        const raw = (event.target as HTMLInputElement).value;
+        minutes = raw === "" ? null : Math.max(0, Math.min(59, Math.floor(Number(raw))));
+        emit();
+    }
+
+    const containerClass = $derived(["ap-form-field", additionalClasses].filter(Boolean).join(" "));
+</script>
+
+<div class={containerClass}>
+    {#if label}
+        <label for={`${id}-hours`} class="ap-form-label">
+            {#if icon}
+                <span class="ap-form-label-icon">{@render icon()}</span>
+            {/if}
+            {label}
+            {#if required}
+                <span class="ap-form-required" aria-label="obrigatório">*</span>
+            {/if}
+        </label>
+    {/if}
+
+    <div class="duration-input" class:duration-input-sm={size === "sm"}>
+        <div class="duration-field">
+            <input
+                id={`${id}-hours`}
+                type="number"
+                class="ap-form-control"
+                min="0"
+                step="1"
+                inputmode="numeric"
+                placeholder="0"
+                value={hours ?? ""}
+                oninput={onHoursInput}
+                {disabled}
+                aria-label="horas"
+            />
+            <span class="duration-unit">h</span>
+        </div>
+        <div class="duration-field">
+            <input
+                id={`${id}-minutes`}
+                type="number"
+                class="ap-form-control"
+                min="0"
+                max="59"
+                step="5"
+                inputmode="numeric"
+                placeholder="00"
+                value={minutes ?? ""}
+                oninput={onMinutesInput}
+                {disabled}
+                aria-label="minutos"
+            />
+            <span class="duration-unit">min</span>
+        </div>
+    </div>
+
+    {#if helpText}
+        <div class="ap-form-help"><i class="bi bi-info-circle"></i> {helpText}</div>
+    {/if}
+</div>
+
+<style>
+    .duration-input {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .duration-field {
+        display: flex;
+        align-items: center;
+        gap: 0.35rem;
+    }
+
+    .duration-field :global(.ap-form-control) {
+        width: 5rem;
+        text-align: center;
+    }
+
+    .duration-unit {
+        color: var(--ap-text-muted, #6c757d);
+        font-size: 0.9rem;
+    }
+
+    .duration-input-sm {
+        gap: 0.5rem;
+    }
+
+    .duration-input-sm .duration-field :global(.ap-form-control) {
+        width: 3.75rem;
+        padding-top: 0.25rem;
+        padding-bottom: 0.25rem;
+        font-size: 0.85rem;
+    }
+
+    .duration-input-sm .duration-unit {
+        font-size: 0.8rem;
+    }
+</style>

package/dist/components/DurationInput.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from "svelte";
+import "../styles/forms.css";
+interface DurationInputProps {
+    /** ID base do campo (usado em horas/minutos e no label) */
+    id: string;
+    /** Valor total em minutos (bindable). null = vazio */
+    value?: number | null;
+    /** Label opcional (omitir quando usado inline, ex.: célula de tabela) */
+    label?: string;
+    /** Texto de ajuda; se omitido, mostra a duração formatada (ex.: "= 1h 20min") */
+    helpText?: string;
+    /** Campo obrigatório (marca o label) */
+    required?: boolean;
+    /** Campo desabilitado */
+    disabled?: boolean;
+    /** Tamanho: 'sm' para células de tabela / ajustes inline */
+    size?: "sm" | "md";
+    /** Callback com o total em minutos (null quando vazio) */
+    onchange?: (minutes: number | null) => void;
+    /** Classes CSS adicionais no contentor */
+    class?: string;
+    /** Ícone exibido no label */
+    icon?: Snippet;
+}
+declare const DurationInput: import("svelte").Component<DurationInputProps, {}, "value">;
+type DurationInput = ReturnType<typeof DurationInput>;
+export default DurationInput;