add pass-time-label

src/components/index.ts

@@ -9,6 +9,7 @@ import EmptyTips from "./empty-tips";
 import MarkdownView from "./markdown-view";
 import BEFlowerFall from "./background-effect/flower-fall";
 import MarkdownEditor from "./markdown-editor";
+import PassTimeLabel from "./passtime-label";
 
 export default [
 	Icon,
@@ -20,7 +21,8 @@ export default [
 	EmptyTips,
 	MarkdownView,
 	BEFlowerFall,
-	MarkdownEditor
+	MarkdownEditor,
+	PassTimeLabel
 ];
 
 export {
@@ -33,5 +35,6 @@ export {
 	EmptyTips,
 	MarkdownView,
 	BEFlowerFall,
-	MarkdownEditor
+	MarkdownEditor,
+	PassTimeLabel
 };

src/components/passtime-label/index.ts

@@ -0,0 +1,5 @@
+import view from "./index.vue";
+import Toolkit from "../../utils/Toolkit";
+
+export const PassTimeLabel = Toolkit.withInstall(view);
+export default PassTimeLabel;

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>