clarity-theme 0.1.0 → 0.1.2

package/{app → src}/components/post/Article.vue

@@ -1,51 +1,51 @@
-<script setup lang="ts">
-import type { ArticleProps } from '../../types/article'
-
-const props = defineProps<{ useUpdated?: boolean } & ArticleProps>()
-const showAllDate = isTimeDiffSignificant(props.date, props.updated)
-</script>
-
-<template>
-<UtilLink class="article-card card upraise">
-	<NuxtImg v-if="image" class="article-cover" :src="image" :alt="title" />
-	<article>
-		<h2 class="article-title text-creative">
-			{{ title }}
-		</h2>
-
-		<p v-if="description" class="article-description">
-			{{ description }}
-		</p>
-
-		<div class="article-info">
-			<UtilDate
-				v-if="date && (showAllDate || !useUpdated)"
-				:date
-				icon="tabler:pencil-minus"
-			/>
-
-			<UtilDate
-				v-if="updated && (showAllDate || useUpdated)"
-				:class="{ 'use-updated': useUpdated }"
-				:date="updated"
-				icon="tabler:clock-edit"
-			/>
-
-			<span v-if="categories" :style="{ color: getCategoryColor(categories[0]) }">
-				<Icon :name="getCategoryIcon(categories[0])" />
-				{{ categories[0] }}
-			</span>
-
-			<span v-if="readingTime?.words" class="article-words">
-				<Icon name="tabler:pilcrow" />
-				{{ formatNumber(readingTime?.words) }}字
-			</span>
-		</div>
-	</article>
-</UtilLink>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { ArticleProps } from '../../types/article'
+
+const props = defineProps<{ useUpdated?: boolean } & ArticleProps>()
+const showAllDate = isTimeDiffSignificant(props.date, props.updated)
+</script>
+
+<template>
+<UtilLink class="article-card card upraise">
+	<NuxtImg v-if="image" class="article-cover" :src="image" :alt="title" />
+	<article>
+		<h2 class="article-title text-creative">
+			{{ title }}
+		</h2>
+
+		<p v-if="description" class="article-description">
+			{{ description }}
+		</p>
+
+		<div class="article-info">
+			<UtilDate
+				v-if="date && (showAllDate || !useUpdated)"
+				:date
+				icon="tabler:pencil-minus"
+			/>
+
+			<UtilDate
+				v-if="updated && (showAllDate || useUpdated)"
+				:class="{ 'use-updated': useUpdated }"
+				:date="updated"
+				icon="tabler:clock-edit"
+			/>
+
+			<span v-if="categories" :style="{ color: getCategoryColor(categories[0]) }">
+				<Icon :name="getCategoryIcon(categories[0])" />
+				{{ categories[0] }}
+			</span>
+
+			<span v-if="readingTime?.words" class="article-words">
+				<Icon name="tabler:pilcrow" />
+				{{ formatNumber(readingTime?.words) }}字
+			</span>
+		</div>
+	</article>
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
 .article-card {
 	container-type: inline-size;
 	position: relative;
@@ -135,4 +135,4 @@ const showAllDate = isTimeDiffSignificant(props.date, props.updated)
 		@include cover-narrow;
 	}
 }
-</style>
+</style>

package/{app → src}/components/post/Comment.vue

@@ -1,123 +1,123 @@
-<script setup lang="tsx">
-import type { TippyComponent } from 'vue-tippy'
-
-const clarity = useClarityConfig()
-const enabled = computed(() => !!clarity.integrations.twikoo?.envId)
-
-const commentEl = useTemplateRef('comment')
-const popoverEl = useTemplateRef<TippyComponent>('popover')
-const popoverJumpTo = ref('')
-const popoverInputEl = useTemplateRef('popover-input')
-const showUndo = ref(false)
-
-const popoverBind = ref<TippyComponent['$props']>({})
-
-/** 评论区链接守卫 */
-useEventListener(commentEl, 'click', (e) => {
-	if (!(e.target instanceof Element))
-		return
-
-	if (e.target.matches('.tk-avatar-img'))
-		e.stopPropagation()
-
-	const popoverTarget = e.target.closest('a[target="_blank"]')
-	if (!(popoverTarget instanceof HTMLAnchorElement))
-		return
-
-	e.preventDefault()
-	popoverEl.value?.hide()
-
-	popoverJumpTo.value = safelyDecodeUriComponent(popoverTarget.href)
-	popoverBind.value = {
-		getReferenceClientRect: () => popoverTarget.getBoundingClientRect(),
-		triggerTarget: popoverTarget,
-	}
-
-	nextTick(checkUndoable)
-	popoverEl.value?.show()
-}, { capture: true })
-
-function checkUndoable() {
-	showUndo.value = popoverInputEl.value?.textContent !== popoverJumpTo.value
-}
-
-function undo() {
-	if (!popoverInputEl.value)
-		return
-	popoverInputEl.value.textContent = popoverJumpTo.value
-	checkUndoable()
-}
-
-function confirmOpen() {
-	window.open(popoverInputEl.value?.textContent, '_blank')
-}
-
-onMounted(() => {
-	if (!enabled.value)
-		return
-
+<script setup lang="tsx">
+import type { TippyComponent } from 'vue-tippy'
+
+const clarity = useClarityConfig()
+const enabled = computed(() => !!clarity.integrations.twikoo?.envId)
+
+const commentEl = useTemplateRef('comment')
+const popoverEl = useTemplateRef<TippyComponent>('popover')
+const popoverJumpTo = ref('')
+const popoverInputEl = useTemplateRef('popover-input')
+const showUndo = ref(false)
+
+const popoverBind = ref<TippyComponent['$props']>({})
+
+/** 评论区链接守卫 */
+useEventListener(commentEl, 'click', (e) => {
+	if (!(e.target instanceof Element))
+		return
+
+	if (e.target.matches('.tk-avatar-img'))
+		e.stopPropagation()
+
+	const popoverTarget = e.target.closest('a[target="_blank"]')
+	if (!(popoverTarget instanceof HTMLAnchorElement))
+		return
+
+	e.preventDefault()
+	popoverEl.value?.hide()
+
+	popoverJumpTo.value = safelyDecodeUriComponent(popoverTarget.href)
+	popoverBind.value = {
+		getReferenceClientRect: () => popoverTarget.getBoundingClientRect(),
+		triggerTarget: popoverTarget,
+	}
+
+	nextTick(checkUndoable)
+	popoverEl.value?.show()
+}, { capture: true })
+
+function checkUndoable() {
+	showUndo.value = popoverInputEl.value?.textContent !== popoverJumpTo.value
+}
+
+function undo() {
+	if (!popoverInputEl.value)
+		return
+	popoverInputEl.value.textContent = popoverJumpTo.value
+	checkUndoable()
+}
+
+function confirmOpen() {
+	window.open(popoverInputEl.value?.textContent, '_blank')
+}
+
+onMounted(() => {
+	if (!enabled.value)
+		return
+
 	window.twikoo?.init?.({
 		envId: clarity.integrations.twikoo?.envId ?? '',
-		// twikoo 会把挂载后的元素变为 #twikoo
-		el: '#twikoo',
-	})
-})
-</script>
-
-<template>
-<section ref="comment" class="z-comment">
-	<h3 class="text-creative">
-		评论区
-	</h3>
-
-	<!-- interactive 默认会把气泡移动到 triggerTarget 的父元素上 -->
-	<Tooltip
-		ref="popover"
-		v-bind="popoverBind"
-		:append-to="() => commentEl!"
-		interactive
-		:aria="{ expanded: false }"
-		trigger="focusin"
-	>
-		<template #content>
-			<div class="popover-confirm">
-				<span
-					ref="popover-input"
-					class="input"
-					contenteditable="plaintext-only"
-					spellcheck="false"
-					@input="checkUndoable"
-					@keydown.enter.prevent="confirmOpen"
-					v-text="popoverJumpTo"
-				/>
-
-				<button
-					v-if="showUndo"
-					aria-label="恢复原始内容"
-					@click="undo()"
-				>
-					<Icon name="tabler:arrow-back-up" />
-				</button>
-
-				<ZButton
-					primary
-					text="访问"
-					@click="confirmOpen"
-				/>
-			</div>
-		</template>
-	</Tooltip>
-
-	<div v-if="enabled" id="twikoo">
-		<p>评论加载中...</p>
-	</div>
-	<p v-else class="no-comment">
-		本文暂未开启评论
-	</p>
-</section>
-</template>
-
-<style lang="scss" scoped>
+		// twikoo 会把挂载后的元素变为 #twikoo
+		el: '#twikoo',
+	})
+})
+</script>
+
+<template>
+<section ref="comment" class="z-comment">
+	<h3 class="text-creative">
+		评论区
+	</h3>
+
+	<!-- interactive 默认会把气泡移动到 triggerTarget 的父元素上 -->
+	<Tooltip
+		ref="popover"
+		v-bind="popoverBind"
+		:append-to="() => commentEl!"
+		interactive
+		:aria="{ expanded: false }"
+		trigger="focusin"
+	>
+		<template #content>
+			<div class="popover-confirm">
+				<span
+					ref="popover-input"
+					class="input"
+					contenteditable="plaintext-only"
+					spellcheck="false"
+					@input="checkUndoable"
+					@keydown.enter.prevent="confirmOpen"
+					v-text="popoverJumpTo"
+				/>
+
+				<button
+					v-if="showUndo"
+					aria-label="恢复原始内容"
+					@click="undo()"
+				>
+					<Icon name="tabler:arrow-back-up" />
+				</button>
+
+				<ZButton
+					primary
+					text="访问"
+					@click="confirmOpen"
+				/>
+			</div>
+		</template>
+	</Tooltip>
+
+	<div v-if="enabled" id="twikoo">
+		<p>评论加载中...</p>
+	</div>
+	<p v-else class="no-comment">
+		本文暂未开启评论
+	</p>
+</section>
+</template>
+
+<style lang="scss" scoped>
 .z-comment {
 	margin: 3rem 1rem;
 
@@ -272,4 +272,4 @@ onMounted(() => {
 		font-size: 0.9em;
 	}
 }
-</style>
+</style>

package/{app → src}/components/post/Excerpt.vue

@@ -1,42 +1,42 @@
-<script setup lang="ts">
-import { delay } from 'es-toolkit/promise'
-
-const props = defineProps<{
-	excerpt: string
-}>()
-
-const clarity = useClarityConfig()
-
-const excerpt = ref(props.excerpt)
-const caret = ref('')
-
-if (clarity.component.excerpt?.animation !== false) {
-	excerpt.value = ''
-	onMounted(async () => {
-		caret.value = clarity.component.excerpt?.caret ?? '_'
-		for (const char of props.excerpt) {
-			excerpt.value += char
-			await delay(50)
-		}
-		caret.value = ''
-	})
-}
-
-if (import.meta.dev) {
-	watch(() => props.excerpt, (newExcerpt) => {
-		excerpt.value = newExcerpt
-	})
-}
-</script>
-
-<template>
-<div class="md-excerpt gradient-card">
-	<span class="dynamic"><Icon name="tabler:sparkles-2" />{{ excerpt }}{{ caret }}</span>
-	<span class="static"><Icon name="tabler:sparkles-2" />{{ props.excerpt }}</span>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import { delay } from 'es-toolkit/promise'
+
+const props = defineProps<{
+	excerpt: string
+}>()
+
+const clarity = useClarityConfig()
+
+const excerpt = ref(props.excerpt)
+const caret = ref('')
+
+if (clarity.component.excerpt?.animation !== false) {
+	excerpt.value = ''
+	onMounted(async () => {
+		caret.value = clarity.component.excerpt?.caret ?? '_'
+		for (const char of props.excerpt) {
+			excerpt.value += char
+			await delay(50)
+		}
+		caret.value = ''
+	})
+}
+
+if (import.meta.dev) {
+	watch(() => props.excerpt, (newExcerpt) => {
+		excerpt.value = newExcerpt
+	})
+}
+</script>
+
+<template>
+<div class="md-excerpt gradient-card">
+	<span class="dynamic"><Icon name="tabler:sparkles-2" />{{ excerpt }}{{ caret }}</span>
+	<span class="static"><Icon name="tabler:sparkles-2" />{{ props.excerpt }}</span>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .md-excerpt {
 	opacity: 0.6;
 	margin: 1rem 0.5rem;
@@ -63,4 +63,4 @@ if (import.meta.dev) {
 		opacity: 1;
 	}
 }
-</style>
+</style>

package/{app → src}/components/post/OrderToggle.vue

@@ -1,72 +1,72 @@
-<script setup lang="ts">
-import type { ArticleOrderType } from '../../types/article'
-
-const props = defineProps<{
-	// 强制允许或禁止升序
-	enableAscending?: boolean
-	disableAscending?: boolean
-	categories?: (string | undefined)[]
-	secretDelay?: string
-}>()
-
-const clarity = useClarityConfig()
-const orderMap = computed(() => clarity.article.order)
-// 配置文件中允许升序时，且未明确禁用升序时，允许升序
-const allowAscending = computed(() => clarity.pagination.allowAscending ? !props.disableAscending : props.enableAscending)
-
-const category = defineModel<string>('category')
-const sortOrder = defineModel<ArticleOrderType>('sortOrder', { default: 'date' })
-const isAscending = defineModel<boolean>('isAscending')
-
-function toggleOrder() {
-	const orderKeys = Object.keys(orderMap.value) as (ArticleOrderType)[]
-	sortOrder.value = orderKeys[(orderKeys.indexOf(sortOrder.value) + 1) % orderKeys.length] || 'date'
-}
-
-function toggleDirection() {
-	if (!allowAscending.value)
-		return
-	isAscending.value = !isAscending.value
-}
-</script>
-
-<template>
-<div class="order-toggle" :style="{ '--secret-delay': secretDelay }">
-	<slot />
-
-	<ZDropdown trigger="focusin" tabindex="0">
-		<button :disabled="!categories">
-			<Icon :name="getCategoryIcon(category)" />
-			<span class="order-text">{{ category ?? '全部分类' }}</span>
-		</button>
-
-		<template #content="{ hide }">
-			<button :class="{ active: !category }" @click="hide(), category = undefined">
-				<Icon :name="getCategoryIcon()" />
-				<span>全部分类</span>
-			</button>
-
-			<button v-for="item in categories" :key="item" :class="{ active: item === category }" @click="hide(), category = item">
-				<Icon :name="getCategoryIcon(item)" />
-				<span>{{ item }}</span>
-			</button>
-		</template>
-	</ZDropdown>
-
-	<span>
-		<button v-if="allowAscending" aria-label="切换排序方向" @click="toggleDirection">
-			<Icon name="tabler:sort-descending" class="toggle-direction" :class="{ ascending: isAscending }" />
-		</button>
-
-		<button @click="toggleOrder">
-			<Icon v-if="!allowAscending" name="tabler:sort-descending" />
-			<span class="order-text">{{ orderMap[sortOrder] || sortOrder }}</span>
-		</button>
-	</span>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { ArticleOrderType } from '../../types/article'
+
+const props = defineProps<{
+	// 强制允许或禁止升序
+	enableAscending?: boolean
+	disableAscending?: boolean
+	categories?: (string | undefined)[]
+	secretDelay?: string
+}>()
+
+const clarity = useClarityConfig()
+const orderMap = computed(() => clarity.article.order)
+// 配置文件中允许升序时，且未明确禁用升序时，允许升序
+const allowAscending = computed(() => clarity.pagination.allowAscending ? !props.disableAscending : props.enableAscending)
+
+const category = defineModel<string>('category')
+const sortOrder = defineModel<ArticleOrderType>('sortOrder', { default: 'date' })
+const isAscending = defineModel<boolean>('isAscending')
+
+function toggleOrder() {
+	const orderKeys = Object.keys(orderMap.value) as (ArticleOrderType)[]
+	sortOrder.value = orderKeys[(orderKeys.indexOf(sortOrder.value) + 1) % orderKeys.length] || 'date'
+}
+
+function toggleDirection() {
+	if (!allowAscending.value)
+		return
+	isAscending.value = !isAscending.value
+}
+</script>
+
+<template>
+<div class="order-toggle" :style="{ '--secret-delay': secretDelay }">
+	<slot />
+
+	<ZDropdown trigger="focusin" tabindex="0">
+		<button :disabled="!categories">
+			<Icon :name="getCategoryIcon(category)" />
+			<span class="order-text">{{ category ?? '全部分类' }}</span>
+		</button>
+
+		<template #content="{ hide }">
+			<button :class="{ active: !category }" @click="hide(), category = undefined">
+				<Icon :name="getCategoryIcon()" />
+				<span>全部分类</span>
+			</button>
+
+			<button v-for="item in categories" :key="item" :class="{ active: item === category }" @click="hide(), category = item">
+				<Icon :name="getCategoryIcon(item)" />
+				<span>{{ item }}</span>
+			</button>
+		</template>
+	</ZDropdown>
+
+	<span>
+		<button v-if="allowAscending" aria-label="切换排序方向" @click="toggleDirection">
+			<Icon name="tabler:sort-descending" class="toggle-direction" :class="{ ascending: isAscending }" />
+		</button>
+
+		<button @click="toggleOrder">
+			<Icon v-if="!allowAscending" name="tabler:sort-descending" />
+			<span class="order-text">{{ orderMap[sortOrder] || sortOrder }}</span>
+		</button>
+	</span>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .order-toggle {
 	display: flex;
 	gap: 1rem;
@@ -98,4 +98,4 @@ function toggleDirection() {
 .iconify + span {
 	margin-inline-start: 0.2em;
 }
-</style>
+</style>