63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
Vue
<template>
|
|
<span
|
|
v-if="timestamp"
|
|
class="tui-passtime-label"
|
|
:class="{ underline }"
|
|
role="button"
|
|
tabindex="0"
|
|
v-text="content"
|
|
@click="toggle"
|
|
@keydown.enter.space.prevent="toggle"
|
|
/>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { Time } from "timi-ts";
|
|
|
|
defineOptions({
|
|
name: "PassTimeLabel"
|
|
});
|
|
|
|
const props = withDefaults(defineProps<{
|
|
timestamp?: number;
|
|
onlyTime?: boolean;
|
|
onlyDate?: boolean;
|
|
underline?: boolean;
|
|
}>(), {
|
|
onlyTime: false,
|
|
onlyDate: false,
|
|
underline: false
|
|
});
|
|
|
|
const { timestamp, onlyTime, onlyDate } = toRefs(props);
|
|
const showingDetail = ref(false);
|
|
|
|
const content = computed(() => {
|
|
if (!showingDetail.value) {
|
|
return Time.toPassedDateTime(timestamp.value);
|
|
}
|
|
if (onlyTime.value) {
|
|
return Time.toTime(timestamp.value);
|
|
}
|
|
if (onlyDate.value) {
|
|
return Time.toDate(timestamp.value);
|
|
}
|
|
return Time.toDateTime(timestamp.value);
|
|
});
|
|
|
|
function toggle(): void {
|
|
showingDetail.value = !showingDetail.value;
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.tui-passtime-label {
|
|
cursor: pointer;
|
|
|
|
&.underline {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
</style>
|