You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
30 lines
799 B
30 lines
799 B
<script setup lang="ts">
|
|
import { defineProps, watch, ref } from "vue";
|
|
|
|
const props = defineProps({
|
|
seconds: Number,
|
|
});
|
|
|
|
const getHmsFromSeconds = (d: number) => ({
|
|
hours: Math.floor(d / 3600),
|
|
minutes: Math.floor(d % 3600 / 60),
|
|
seconds: Math.floor(d % 3600 % 60),
|
|
});
|
|
|
|
const getLeadingZero = (a: number, digits: number) =>
|
|
('0'.repeat(digits) + a.toString())
|
|
.slice(- digits);
|
|
|
|
const hms = ref(getHmsFromSeconds(props.seconds as number));
|
|
|
|
watch(() => props.seconds, (to) => {
|
|
hms.value = getHmsFromSeconds(to as number);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<span v-if="hms.hours" class="hours">{{ getLeadingZero(hms.hours, 2) }}:</span>
|
|
<span class="minutes">{{ getLeadingZero(hms.minutes, 2) }}:</span>
|
|
<span class="seconds">{{ getLeadingZero(hms.seconds, 2) }}</span>
|
|
</template>
|