Sélecteur d'heure

<script setup lang="ts">
import { ref } from 'vue'
import { VTimePicker } from 'vectis-ui'

const time = ref<string | null>('09:30')
</script>

<template>
  <VTimePicker v-model="time" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VTimePicker, VTypography } from 'vectis-ui'

const anyMinute = ref<string | null>('09:37')
const quarters = ref<string | null>('09:45')
</script>

<template>
  <div class="row">
    <div class="group">
      <VTypography variant="overline" tone="muted">Every minute, the default</VTypography>
      <VTimePicker v-model="anyMinute" />
    </div>

    <div class="group">
      <VTypography variant="overline" tone="muted">Quarter hours</VTypography>
      <VTimePicker v-model="quarters" :minute-step="15" />
    </div>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--vectis-space-6);
}
.group {
  display: grid;
  gap: var(--vectis-space-2);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VTimePicker, VTypography } from 'vectis-ui'

const office = ref<string | null>('09:30')
const booking = ref<string | null>('14:15')
</script>

<template>
  <div class="row">
    <div class="group">
      <VTypography variant="overline" tone="muted">Between 09:30 and 17:00</VTypography>
      <VTimePicker v-model="office" format="24h" min="09:30" max="17:00" />
      <VTypography variant="caption" tone="muted">
        Nine o'clock stays open, and it is its first thirty minutes that go
      </VTypography>
    </div>

    <div class="group">
      <VTypography variant="overline" tone="muted">Quarter hours, on three hours</VTypography>
      <VTimePicker
        v-model="booking"
        format="24h"
        :minute-step="5"
        :allowed-hours="[9, 14, 16]"
        :allowed-minutes="(minute) => minute % 15 === 0"
      />
      <VTypography variant="caption" tone="muted">
        The face keeps only the five minute marks a rule leaves standing
      </VTypography>
    </div>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--vectis-space-6);
}
.group {
  display: grid;
  gap: var(--vectis-space-2);
  max-inline-size: 20rem;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VTimePicker, VTypography } from 'vectis-ui'

/* Two faces, one value: half past seven in the evening is 19:30 on either of them. */
const twelve = ref<string | null>('19:30')
const twentyFour = ref<string | null>('19:30')
</script>

<template>
  <div class="row">
    <div class="group">
      <VTypography variant="overline" tone="muted">format 12h</VTypography>
      <VTimePicker v-model="twelve" format="12h" />
    </div>

    <div class="group">
      <VTypography variant="overline" tone="muted">format 24h</VTypography>
      <VTimePicker v-model="twentyFour" format="24h" />
    </div>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--vectis-space-6);
}
.group {
  display: grid;
  gap: var(--vectis-space-2);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VTimePicker, VTypography } from 'vectis-ui'

/* Each keeps its own value, so adjusting one does not disturb the others. en-US and en-GB
   are the sharp pair: the same words, and only the clock between them. */
const locales = ref<{ tag: string; caption: string; time: string | null }[]>([
  { tag: 'en-US', caption: 'en-US, twelve hours', time: '19:30' },
  { tag: 'en-GB', caption: 'en-GB, twenty-four', time: '19:30' },
  { tag: 'ja-JP', caption: 'ja-JP', time: '19:30' },
])
</script>

<template>
  <div class="row">
    <div v-for="locale in locales" :key="locale.tag" class="group">
      <VTypography variant="overline" tone="muted">{{ locale.caption }}</VTypography>
      <VTimePicker v-model="locale.time" :locale="locale.tag" />
    </div>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--vectis-space-6);
}
.group {
  display: grid;
  gap: var(--vectis-space-2);
}
</style>