add pass-time-label

src/components/passtime-label/index.vue

@@ -0,0 +1,63 @@
+<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 "../../utils/Time";
+
+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;
+		text-underline-offset: .16rem;
+	}
+}
+</style>