Timer

#Basic usage

min

sec

timer/basic.vue

<script setup lang="ts">
import { pause, play, rotate_ccw } from "@bysages/icons";
import { Icon, Timer } from "@bysages/vue";

const units = [
  { type: "minutes", label: "min" },
  { type: "seconds", label: "sec" },
];
</script>

<template>
  <Timer.Root :start-ms="18 * 60 * 1000 + 42 * 1000">
    <Timer.Area>
      <template v-for="(unit, index) in units" :key="unit.type">
        <Timer.Separator v-if="index > 0">:</Timer.Separator>
        <div class="grid justify-items-center gap-[0.125rem]">
          <Timer.Item :type="unit.type" />
          <span class="text-xs text-tertiary">{{ unit.label }}</span>
        </div>
      </template>
    </Timer.Area>
    <Timer.Control>
      <Timer.ActionTrigger action="start">
        <Icon :glyph="play" />
        Start
      </Timer.ActionTrigger>
      <Timer.ActionTrigger action="pause">
        <Icon :glyph="pause" />
        Pause
      </Timer.ActionTrigger>
      <Timer.ActionTrigger action="resume">Resume</Timer.ActionTrigger>
      <Timer.ActionTrigger action="reset">
        <Icon :glyph="rotate_ccw" />
        Reset
      </Timer.ActionTrigger>
    </Timer.Control>
  </Timer.Root>
</template>

#Props

#ActionTrigger

Prop	Type	Default	Description
`action`	`TimerAction`		—

#Area

A styled part — no props of its own; it takes the anatomy's shared styling.

#Control

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Default	Description
`type`	`TimePart`		—

#Root

Prop	Type	Default	Description
`autoStart`	`boolean`		Whether the timer should start automatically
`countdown`	`boolean`		Whether the timer should countdown, decrementing the timer on each tick.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; area: string; }>`		The ids of the timer parts
`interval`	`number`	`250`	The interval in milliseconds to update the timer count.
`startMs`	`number`		The total duration of the timer in milliseconds.
`targetMs`	`number`		The minimum count of the timer in milliseconds.
`translations`	`timer.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states

#Separator

A styled part — no props of its own; it takes the anatomy's shared styling.