Countdown

Do something when you arrive at the appointed time.

Default

00:00:05

<script setup>
import { ref } from 'vue'

const active = ref(false)
const durations = ref(5000)

function resetStatus() {
  active.value = false
}
</script>

<template>
  <PStack direction="vertical">
    <PToggle v-model="active" label="Active" />

    <PCountdown :active="active" :durations="durations" @finish="resetStatus" />
  </PStack>
</template>

Format

01 00:00:00

01 00:00:00.0

01 00:00:00.00

01 00:00:00.000

<script setup>
import { ref } from 'vue'

const active = ref(false)
const durations = ref(86400000)

function resetStatus() {
  active.value = false
}
</script>

<template>
  <PStack direction="vertical">
    <PToggle v-model="active" label="Active" />

    <PCountdown
      :active="active"
      format="DD HH:mm:ss"
      :durations="durations"
      @finish="resetStatus"
    />

    <PCountdown
      :active="active"
      format="DD HH:mm:ss.S"
      :durations="durations"
      @finish="resetStatus"
    />

    <PCountdown
      :active="active"
      format="DD HH:mm:ss.SS"
      :durations="durations"
      @finish="resetStatus"
    />

    <PCountdown
      :active="active"
      format="DD HH:mm:ss.SSS"
      :durations="durations"
      @finish="resetStatus"
    />
  </PStack>
</template>

Intuitive

By default, because the time is less than one second, it will be displayed as 0.123 at the end, and it will be displayed as a time more in line with human intuition after setting.

The millisecond will always be 0 after turning on.

00:00:05.000

<script setup>
import { shallowRef } from 'vue'

const active = shallowRef(false)

function resetStatus() {
  active.value = false
}
</script>

<template>
  <PStack direction="vertical">
    <PToggle v-model="active" label="Active" />

    <PCountdown
      ref="countdownRef"
      intuitive
      :active="active"
      :durations="5000"
      format="HH:mm:ss.SSS"
      @finish="resetStatus"
    />
  </PStack>
</template>

Reset

00:00:10

<script setup>
import { shallowRef } from 'vue'

const active = shallowRef(false)
const countdownRef = shallowRef()

function reset() {
  countdownRef.value.reset()
}

function resetStatus() {
  active.value = false
}
</script>

<template>
  <PStack direction="vertical">
    <PToggle v-model="active" label="Active" />

    <PButton @click="reset">Reset</PButton>

    <PCountdown ref="countdownRef" :active="active" :durations="10000" @finish="resetStatus" />
  </PStack>
</template>

EndTime

Passing in a target time will automatically calculate the remaining time.

00:59:59

<script setup>
import { shallowRef } from 'vue'

const active = shallowRef(false)

const endTime = Date.now() + 3600000 // 1 hour later

function resetStatus() {
  active.value = false
}
</script>

<template>
  <PStack direction="vertical">
    <PToggle v-model="active" label="Active" />

    <PCountdown :active="active" :endTime="endTime" @finish="resetStatus" />
  </PStack>
</template>

Seconds timestamp

Passing in a target time will automatically calculate the remaining time.

01:00:00

<script setup>
import { shallowRef } from 'vue'

const active = shallowRef(false)

const endTime = 3600 // 3600 seconds(1 hour)

function resetStatus() {
  active.value = false
}
</script>

<template>
  <PStack direction="vertical">
    <PToggle v-model="active" label="Active" />

    <PCountdown :active="active" :millisecond="false" :durations="endTime" @finish="resetStatus" />
  </PStack>
</template>

StartAt

Specifies when to start, and is often used to resume timing from an interrupted timer.

00:00:07.000

00:00:03.000

<script setup>
import { ref } from 'vue'

const active = ref(false)

function resetStatus() {
  active.value = false
}
</script>

<template>
  <PStack direction="vertical">
    <PToggle v-model="active" label="Active" />

    <PCountdown
      :active="active"
      :start-at="3000"
      format="HH:mm:ss.SSS"
      :durations="10000"
      @finish="resetStatus"
    />

    <PCountdown
      invert
      :active="active"
      :start-at="3000"
      format="HH:mm:ss.SSS"
      :durations="10000"
      @finish="resetStatus"
    />
  </PStack>
</template>

Invert

Setting the invert property can be converted into positive timing, and the durations passed in is the end time. If it is not set, it will not stop automatically.

00:00:00

00:00:03

<script setup>
import { ref } from 'vue'

const active = ref(false)

function resetStatus() {
  active.value = false
}
</script>

<template>
  <PStack direction="vertical">
    <PToggle v-model="active" label="Active" />

    <PCountdown invert :active="active" :durations="5000" @finish="resetStatus" />

    <!-- timers without durations will not stop voluntarily -->
    <PCountdown invert :active="active" :start-at="3000" />
  </PStack>
</template>

Customize

00:05

<script setup>
import PlayCircleIcon from '@gdsicon/vue/play-circle'
import PauseCircleIcon from '@gdsicon/vue/pause-circle'

import { ref } from 'vue'

const active = ref(false)
</script>

<template>
  <div class="h-16">
    <PCountdown intuitive :active="active" :durations="5000" @finish="active = false">
      <template #default="{ times }">
        <PButton variant="primary" class="relative z-10 font-mono" @click="active = !active">
          <template #prefix>
            <Component :is="active ? PauseCircleIcon : PlayCircleIcon" />
          </template>

          {{ active ? 'Pause' : 'Start' }}
        </PButton>

        <div
          class="absolute bg-red-200 left-0 top-0 flex gap-1.5 items-center justify-center pt-0.5 text-sm px-2 w-full h-full rounded-bl-lg rounded-br-lg transition-all opacity-0 z-1"
          :class="{ 'translate-y-[90%] opacity-100': active }"
        >
          <i class="size-2 rounded-full bg-red-800" />
          {{ times.mm }}:{{ times.ss }}
        </div>
      </template>
    </PCountdown>
  </div>
</template>

Events

Name	Type	Description
change	`(active: boolean) => void`	Emitted when the `active` prop changes.
reset	`() => void`	Emitted when the countdown is restarted from its initial time.
finish	`() => void`	Emitted when the countdown reaches its end.

Slots

Name	Description
default	Default slot

Methods

Name	Type	Description
reset	`() => void`	Restart the countdown from its initial time.
times	`{ dd: string, hh: string, mm: string, ss: string, ms: string }`	Read the remaining time broken down into days, hours, minutes, seconds and milliseconds.

PXD