Vitral 0.2
Formulário

TimePicker

Uma hora do dia, digitada livremente ou escolhida numa lista, e guardada como minutos desde a meia-noite, e não como um Date.

Testado com WAI-ARIA

Importação

main.ts
import { TimePicker } from '@vitral/vue';

Padrão

De meia em meia hora por padrão. A caixa mostra o horário do jeito que o locale o escreve; o valor por baixo é um número.

540 minutes past midnight
<script setup lang="ts">import { StackPanel, TimePicker } from '@vitral/vue';import { computed, ref } from 'vue'; const start = ref<number | null>(540);const nights = computed(() => (start.value === null ? '' : `${start.value} minutes past midnight`));</script> <template>    <StackPanel spacing="1rem">        <TimePicker v-model="start" aria-label="Start time" />        <small style="color: var(--vt-text-muted-color)">{{ nights }}</small>    </StackPanel></template>

Digitado, não escolhido

Uma caixa de horário é um lugar onde as pessoas digitam. Experimente `9`, `930`, `9:30`, `9h30`, `21:30` ou `9 pm` — e depois saia da caixa. Algo que não indica horário nenhum a esvazia, em vez de tentar adivinhar.

Reads as nothing
<script setup lang="ts">import { formatMinutes } from '@vitral/core';import { StackPanel, TimePicker } from '@vitral/vue';import { ref } from 'vue'; const typed = ref<number | null>(null);const show = (minutes: number | null) => (minutes === null ? 'nothing' : formatMinutes(minutes, { hour12: false }));</script> <template>    <StackPanel spacing="1rem">        <TimePicker v-model="typed" placeholder="Type a time" aria-label="Any time" />        <small style="color: var(--vt-text-muted-color)">Reads as {{ show(typed) }}</small>    </StackPanel></template>

Com limites e com passo

`min-time` e `max-time` decidem o que a lista oferece e limitam o que é digitado; `step` decide o quão próximos ficam os horários. Page Up e Page Down movem o próprio valor em uma hora.

<script setup lang="ts">import { TimePicker } from '@vitral/vue';import { ref } from 'vue'; const office = ref<number | null>(null);</script> <template>    <TimePicker v-model="office" :step="15" min-time="09:00" max-time="17:00" show-clear-button aria-label="Office hours" /></template>

Doze ou vinte e quatro

`hour12` sobrescreve o que o locale teria escrito. A lista e a caixa sempre concordam, porque as duas são feitas do mesmo número.

<script setup lang="ts">import { TimePicker } from '@vitral/vue';import { ref } from 'vue'; const twelve = ref<number | null>(1290);</script> <template>    <div style="display: flex; gap: 1rem; flex-wrap: wrap">        <TimePicker v-model="twelve" :hour12="true" aria-label="Twelve hour" />        <TimePicker v-model="twelve" :hour12="false" aria-label="Twenty-four hour" />    </div></template>

Inline

Sem a caixa de texto nem o popup.

  • 00:00
  • 01:00
  • 02:00
  • 03:00
  • 04:00
  • 05:00
  • 06:00
  • 07:00
  • 08:00
  • 09:00
  • 10:00
  • 11:00
  • 12:00
  • 13:00
  • 14:00
  • 15:00
  • 16:00
  • 17:00
  • 18:00
  • 19:00
  • 20:00
  • 21:00
  • 22:00
  • 23:00
<script setup lang="ts">import { TimePicker } from '@vitral/vue';import { ref } from 'vue'; const inline = ref<number | null>(600);</script> <template>    <TimePicker v-model="inline" :step="60" inline aria-label="Pick an hour" /></template>

API

Lido de packages/vue/src/components/TimePicker/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
stepnumberMinutos entre os horários que a lista oferece. O padrão é 30.
minTimenumber | string | nullO horário mais cedo, em minutos depois da meia-noite ou `'09:00'`.
maxTimenumber | string | nullO mais tarde, do mesmo jeito.
hour12booleanForça doze ou vinte e quatro horas; o padrão é o que o locale usa.
secondsbooleanMostra os segundos no que é escrito; a lista continua sendo montada a partir de `step`.
placeholderstring—
inlinebooleanMostra a lista no lugar, sem caixa de texto nem popup.
showClearButtonbooleanUm botão no rodapé que esvazia o valor.
sizeSize—
variantInputVariantO padrão é o `inputVariant` do plugin.
invalidboolean—
disabledboolean—
readonlyboolean—
fluidboolean—
placementOverlayPlacement—
appendTostring`'body'` (o padrão), `'self'` para renderizar no lugar, ou um seletor.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
timeSelectminutes: numberUm horário foi escolhido na lista, ou digitado e confirmado.
clear——
show——
hide——
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NomeProps do slotDescrição
dropdownicon—O ícone do botão que abre a lista.
option(props: { minutes: number; label: string; selected: boolean })Um horário da lista.
footer(props: { minutes: number | null; clear: () => void })Abaixo da lista: uma nota, um par de botões.