18 lines
989 B
Vue
18 lines
989 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
export type MemoListItem = { id: string; title: string; excerpt: string; version: number; created_at: string; updated_at: string; deleted_at: string | null }
|
|
const props = defineProps<{ memo: MemoListItem; active?: boolean }>()
|
|
const emit = defineEmits<{ select: [id: string, opener: EventTarget | null] }>()
|
|
const excerpt = computed(() => props.memo.excerpt.replace(/\s+/g, ' ').trim())
|
|
const updated = computed(() => new Intl.DateTimeFormat('zh-CN', { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' }).format(new Date(props.memo.updated_at)))
|
|
</script>
|
|
|
|
<template>
|
|
<button class="memo-row" :class="{ active }" :aria-current="active ? 'true' : undefined" @click="emit('select', memo.id, $event.currentTarget)">
|
|
<strong>{{ memo.title }}</strong>
|
|
<span class="memo-row__excerpt">{{ excerpt || '暂无正文' }}</span>
|
|
<time :datetime="memo.updated_at">{{ updated }}</time>
|
|
</button>
|
|
</template>
|