Timer
시작·일시 정지·초기화 동작으로 경과 시간이나 남은 시간을 잽니다.
용법
스톱워치
현재 상태에 맞는 시작, 일시 정지, 계속, 초기화 동작으로 경과 시간을 잽니다.
Elapsed timeSession timer
Ready00:00
<!-- Timer / Stopwatch -->
<script setup lang="ts">
import { TimerActionTrigger, TimerArea, TimerItem, TimerRoot, TimerSeparator } from '@sectile/vue/timer'
</script>
<template>
<TimerRoot v-slot="{ running, valueMs }">
<TimerArea><TimerItem type="minutes" /><TimerSeparator>:</TimerSeparator><TimerItem type="seconds" /></TimerArea>
<TimerActionTrigger v-if="running" action="pause">Pause</TimerActionTrigger>
<TimerActionTrigger v-else-if="valueMs > 0" action="resume">Resume</TimerActionTrigger>
<TimerActionTrigger v-else action="start">Start timer</TimerActionTrigger>
<TimerActionTrigger v-if="valueMs > 0" action="reset">Reset</TimerActionTrigger>
</TimerRoot>
</template>남은 시간
시간을 설정하고 남은 시간과 완료 피드백을 확인합니다.
Focus sessionDuration 00:10
Ready00:10
<!-- Timer / Countdown -->
<script setup lang="ts">
import { computed, ref } from 'vue'
import { NumberField } from '@sectile/vue/number-field'
import { TimerActionTrigger, TimerArea, TimerItem, TimerRoot, TimerSeparator } from '@sectile/vue/timer'
const seconds = ref('10')
const durationMs = computed(() => Math.max(1, Number(seconds.value)) * 1_000)
const timerKey = ref(0)
const autoStart = ref(false)
function applyDuration() { autoStart.value = true; timerKey.value += 1 }
</script>
<template>
<label>Seconds <NumberField v-model="seconds" :policies="{ min: '1' }" /></label>
<button @click="applyDuration">Apply & start</button>
<TimerRoot :key="timerKey" countdown :start-ms="durationMs" :auto-start="autoStart"
v-slot="{ running, completed, progress, valueMs }">
<TimerArea><TimerItem type="minutes" /><TimerSeparator>:</TimerSeparator><TimerItem type="seconds" /></TimerArea>
<progress :value="progress ?? 0" max="100" />
<p v-if="completed" role="status">Focus session finished.</p>
<TimerActionTrigger v-if="running" action="pause">Pause</TimerActionTrigger>
<TimerActionTrigger v-else-if="valueMs < durationMs" action="resume">Resume</TimerActionTrigger>
<TimerActionTrigger v-else action="start">Start</TimerActionTrigger>
<TimerActionTrigger action="reset">Reset</TimerActionTrigger>
</TimerRoot>
</template>목표 시간
경과 시간 목표를 설정하고 완료될 때까지 진행 상태를 확인합니다.
Target timerGoal 00:15
Ready00:00
<!-- Timer / Target -->
<script setup lang="ts">
import { computed, ref } from 'vue'
import { NumberField } from '@sectile/vue/number-field'
import { TimerActionTrigger, TimerArea, TimerItem, TimerRoot, TimerSeparator } from '@sectile/vue/timer'
const targetSeconds = ref('15')
const targetMs = computed(() => Math.max(1, Number(targetSeconds.value)) * 1_000)
const timerKey = ref(0)
function applyTarget() { timerKey.value += 1 }
</script>
<template>
<label>Target seconds <NumberField v-model="targetSeconds" :policies="{ min: '1' }" /></label>
<button @click="applyTarget">Apply target</button>
<TimerRoot :key="timerKey" :target-ms="targetMs" v-slot="{ running, completed, progress, valueMs }">
<TimerArea><TimerItem type="minutes" /><TimerSeparator>:</TimerSeparator><TimerItem type="seconds" /></TimerArea>
<progress :value="progress ?? 0" max="100" />
<p v-if="completed" role="status">Target reached.</p>
<TimerActionTrigger v-if="running" action="pause">Pause</TimerActionTrigger>
<TimerActionTrigger v-else-if="valueMs > 0" action="resume">Resume</TimerActionTrigger>
<TimerActionTrigger v-else action="start">Start</TimerActionTrigger>
<TimerActionTrigger action="reset">Reset</TimerActionTrigger>
</TimerRoot>
</template>API
Vue 패키지: @sectile/vue/timer
컴포넌트
TimerRootTimerAreaTimerSeparatorTimerControlTimerItemTimerActionTrigger
Props
TimerRootProps
as이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
autoStart마운트 직후 타이머를 시작할지 여부입니다.
countdown남은 시간을 세는 방식으로 동작할지 여부입니다.
intervalMs자동 갱신 사이의 밀리초 단위 간격입니다.
startMs밀리초 단위의 초기 경과 시간입니다.
targetMs밀리초 단위의 경과 시간 목표입니다.
TimerPartProps
as이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
슬롯
TimerSlotProps
completed타이머가 목표에 도달했는지 여부입니다.
parts현재 값을 나눈 표시 단위입니다.
pause타이머 갱신을 멈추는 함수입니다.
progress0부터 1까지의 완료 진행률입니다.
reset초깃값과 조작 상태로 되돌리는 함수입니다.
restart설정한 초깃값에서 타이머를 다시 시작하는 함수입니다.
resume멈춘 타이머를 다시 시작하는 함수입니다.
running타이머가 작동 중인지 여부입니다.
start타이머 갱신을 시작하는 함수입니다.
valueMs밀리초 단위의 현재 타이머 값입니다.
이벤트
TimerRoot
complete필요한 모든 입력 칸이 채워질 때 발생합니다.
tick타이머 간격마다 새 값이 만들어질 때 발생합니다.
기타 타입
TimerTickHandler
ts
type TimerTickHandler = (valueMs: number) => voidTimerCompleteHandler
ts
type TimerCompleteHandler = (valueMs: number) => void파트
공통 범위: [data-scope="timer"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.
| 파트 | 선택자 | 역할 | 추가 속성 |
|---|---|---|---|
root | [data-part="root"] | 컴포넌트 경계와 내부 파트를 묶습니다. | — |
area | [data-part="area"] | 2차원 조작 영역을 제공합니다. | — |
item | [data-part="item"] | 선택하거나 실행할 수 있는 항목 하나입니다. | — |
separator | [data-part="separator"] | 관련 그룹 사이에 의미 구분선을 표시합니다. | — |
control | [data-part="control"] | 주요 조작부를 묶습니다. | — |
action-trigger | [data-part="action-trigger"] | 타이머 동작을 실행합니다. | — |
키보드 동작
| 키 | 동작 |
|---|---|
| Tab | 컴포넌트의 기본 작업 컨트롤 사이를 이동합니다. |
| Enter / Space | 포커스된 작업을 실행합니다. |
접근성
형식화된 시간 조각을 하나의 값으로 묶고 시작·일시 정지·초기화·재시작을 이름이 있는 작업으로 유지합니다.