clarity-theme 0.1.0 → 0.1.2

package/{app → src}/components/partial/Toggle.vue

@@ -1,19 +1,19 @@
-<script setup lang="ts">
-defineProps<{
-	label?: string
-}>()
-
-const modelValue = defineModel<boolean>()
-</script>
-
-<template>
-<label class="z-toggle">
-	<input v-model="modelValue" class="input-toggle" name="toggle" type="checkbox" @keypress.enter="modelValue = !modelValue">
-	<slot><span v-if="label" v-text="label" /></slot>
-</label>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	label?: string
+}>()
+
+const modelValue = defineModel<boolean>()
+</script>
+
+<template>
+<label class="z-toggle">
+	<input v-model="modelValue" class="input-toggle" name="toggle" type="checkbox" @keypress.enter="modelValue = !modelValue">
+	<slot><span v-if="label" v-text="label" /></slot>
+</label>
+</template>
+
+<style lang="scss" scoped>
 .z-toggle {
 	user-select: none;
 }
@@ -67,4 +67,4 @@ const modelValue = defineModel<boolean>()
 		}
 	}
 }
-</style>
+</style>

package/{app → src}/components/popover/Lightbox.vue

@@ -1,46 +1,46 @@
-<script setup lang="ts">
-import type { CSSProperties } from 'vue'
-
-defineProps<{
-	el: HTMLImageElement
-	caption?: string | Component
-	open?: boolean
-	style?: CSSProperties
-}>()
-
-defineEmits<{
-	close: []
-}>()
-</script>
-
-<template>
-<BikariyaImageViewer
-	v-bind="$attrs"
-	:target="el"
-	:open
-	:style
-	clamp
-	:rate=".8"
-	@close="$emit('close')"
-/>
-
-<Transition>
-	<div v-if="open" class="tooltip" :style="{ zIndex: style?.zIndex }">
-		<span v-if="caption" class="caption">
-			<component :is="() => toValue(caption)" />
-		</span>
-		<button
-			class="close"
-			aria-label="关闭灯箱"
-			@click="$emit('close')"
-		>
-			<Icon name="tabler:x" />
-		</button>
-	</div>
-</Transition>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+
+defineProps<{
+	el: HTMLImageElement
+	caption?: string | Component
+	open?: boolean
+	style?: CSSProperties
+}>()
+
+defineEmits<{
+	close: []
+}>()
+</script>
+
+<template>
+<BikariyaImageViewer
+	v-bind="$attrs"
+	:target="el"
+	:open
+	:style
+	clamp
+	:rate=".8"
+	@close="$emit('close')"
+/>
+
+<Transition>
+	<div v-if="open" class="tooltip" :style="{ zIndex: style?.zIndex }">
+		<span v-if="caption" class="caption">
+			<component :is="() => toValue(caption)" />
+		</span>
+		<button
+			class="close"
+			aria-label="关闭灯箱"
+			@click="$emit('close')"
+		>
+			<Icon name="tabler:x" />
+		</button>
+	</div>
+</Transition>
+</template>
+
+<style lang="scss" scoped>
 .tooltip {
 	display: flex;
 	align-items: center;
@@ -74,4 +74,4 @@ defineEmits<{
 		cursor: pointer;
 	}
 }
-</style>
+</style>

package/{app → src}/components/popover/Search.vue

@@ -1,146 +1,146 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import type { ModalEmits, ModalProps } from '../../types/modal'
-import MiniSearch from 'minisearch'
-
-const props = defineProps<ModalProps>()
-
-defineEmits<ModalEmits>()
-
-const clarity = useClarityConfig()
-const segmenter = Intl.Segmenter && new Intl.Segmenter(clarity.site.language, { granularity: 'word' })
-
-// await useAsyncData() 会阻塞渲染
-const { data, status } = await useLazyAsyncData(
-	'search',
-	() => queryCollectionSearchSections('content', {
-		ignoredTags: ['pre'],
-	}),
-)
-
-const miniSearch = new MiniSearch({
-	fields: ['title', 'content'],
-	storeFields: ['title', 'titles', 'content', 'level'],
-	searchOptions: {
-		prefix: true,
-		fuzzy: 0.2,
-		combineWith: 'AND',
-		boost: { title: 3, titles: 2 },
-	},
-	processTerm: segmenter
-		? term => Array.from(segmenter.segment(term), seg => seg.segment.toLowerCase())
-		: undefined,
-})
-
-const searchStore = useSearchStore()
-const searchInput = ref<HTMLInputElement>()
-
-const { word, debouncedWord } = storeToRefs(searchStore)
-const result = computed(() => {
-	void data.value
-	return miniSearch.search(debouncedWord.value)
-})
-
-const isKeyboardMode = ref(false)
-const listResult = useTemplateRef('list-result')
-
-const activeIndex = ref(0)
-const activeItem = computed(() => listResult.value?.children[activeIndex.value] as HTMLLinkElement | undefined)
-
-whenever(() => props.open, focusInput)
-
-watch(status, (newStatus) => {
-	if (newStatus === 'success' && data.value) {
-		miniSearch.addAll(data.value)
-	}
-})
-
-watch(debouncedWord, () => {
-	activeIndex.value = 0
-})
-
-useEventListener('mousemove', () => isKeyboardMode.value = false)
-useEventListener('keydown', () => isKeyboardMode.value = true)
-
-async function focusInput(allSelect = false) {
-	await nextTick()
-	searchInput.value?.focus()
-	if (allSelect)
-		searchInput.value?.select()
-}
-
-function updateActiveIndex(index: number, isKeyboard = false) {
-	focusInput()
-	if (index < 0 || index >= result.value?.length)
-		return
-	activeIndex.value = index
-	if (isKeyboard)
-		isKeyboardMode.value = true
-	if (activeItem.value && isKeyboardMode.value) {
-		activeItem.value.scrollIntoView({ block: 'nearest' })
-	}
-}
-
-function openActiveItem() {
-	// 触发 vue-router 点击事件
-	activeItem.value?.click()
-}
-</script>
-
-<template>
-<Transition name="float-in">
-	<div v-if="open" class="blog-search">
-		<form class="input" @submit.prevent>
-			<Icon v-show="false" name="line-md:loading-alt-loop" />
-			<Icon :name="status === 'pending' ? 'line-md:loading-alt-loop' : 'tabler:search'" />
-
-			<!-- 方向键切换搜索结果不应只在搜索框内触发 -->
-			<input
-				ref="searchInput"
-				v-model="word"
-				type="search"
-				incremental
-				class="search-input"
-				placeholder="键入开始搜索"
-				@keydown.up.prevent
-				@keydown.down.prevent
-			>
-		</form>
-
-		<TransitionGroup name="expand">
-			<div v-if="debouncedWord && status === 'success' && !result.length" class="no-result">
-				无结果
-			</div>
-
-			<menu
-				v-if="result.length"
-				ref="list-result"
-				:key="result.length < 5 ? result.length : result[0]?.id"
-				class="scrollcheck-y search-result"
-			>
-				<PopoverSearchItem
-					v-for="(item, itemIndex) in result"
-					:key="item.id"
-					v-bind="item"
-					:class="{ active: activeIndex === itemIndex }"
-					@mousemove="updateActiveIndex(itemIndex)"
-				/>
-			</menu>
-
-			<div v-if="result.length" class="tip" @click="searchInput?.focus()">
-				<Key code="ArrowUp" prevent @press="updateActiveIndex(activeIndex - 1, true)" />
-				<Key code="ArrowDown" prevent @press="updateActiveIndex(activeIndex + 1, true)" />
-				切换&emsp;
-				<Key code="Enter" icon @press="openActiveItem" />
-				选择&emsp;
-				<Key code="Escape" :icon="false" @press="$emit('close')" />
-				关闭
-			</div>
-		</TransitionGroup>
-	</div>
-</Transition>
-</template>
-
-<style lang="scss" scoped>
+import MiniSearch from 'minisearch'
+
+const props = defineProps<ModalProps>()
+
+defineEmits<ModalEmits>()
+
+const clarity = useClarityConfig()
+const segmenter = Intl.Segmenter && new Intl.Segmenter(clarity.site.language, { granularity: 'word' })
+
+// await useAsyncData() 会阻塞渲染
+const { data, status } = await useLazyAsyncData(
+	'search',
+	() => queryCollectionSearchSections('content', {
+		ignoredTags: ['pre'],
+	}),
+)
+
+const miniSearch = new MiniSearch({
+	fields: ['title', 'content'],
+	storeFields: ['title', 'titles', 'content', 'level'],
+	searchOptions: {
+		prefix: true,
+		fuzzy: 0.2,
+		combineWith: 'AND',
+		boost: { title: 3, titles: 2 },
+	},
+	processTerm: segmenter
+		? term => Array.from(segmenter.segment(term), seg => seg.segment.toLowerCase())
+		: undefined,
+})
+
+const searchStore = useSearchStore()
+const searchInput = ref<HTMLInputElement>()
+
+const { word, debouncedWord } = storeToRefs(searchStore)
+const result = computed(() => {
+	void data.value
+	return miniSearch.search(debouncedWord.value)
+})
+
+const isKeyboardMode = ref(false)
+const listResult = useTemplateRef('list-result')
+
+const activeIndex = ref(0)
+const activeItem = computed(() => listResult.value?.children[activeIndex.value] as HTMLLinkElement | undefined)
+
+whenever(() => props.open, focusInput)
+
+watch(status, (newStatus) => {
+	if (newStatus === 'success' && data.value) {
+		miniSearch.addAll(data.value)
+	}
+})
+
+watch(debouncedWord, () => {
+	activeIndex.value = 0
+})
+
+useEventListener('mousemove', () => isKeyboardMode.value = false)
+useEventListener('keydown', () => isKeyboardMode.value = true)
+
+async function focusInput(allSelect = false) {
+	await nextTick()
+	searchInput.value?.focus()
+	if (allSelect)
+		searchInput.value?.select()
+}
+
+function updateActiveIndex(index: number, isKeyboard = false) {
+	focusInput()
+	if (index < 0 || index >= result.value?.length)
+		return
+	activeIndex.value = index
+	if (isKeyboard)
+		isKeyboardMode.value = true
+	if (activeItem.value && isKeyboardMode.value) {
+		activeItem.value.scrollIntoView({ block: 'nearest' })
+	}
+}
+
+function openActiveItem() {
+	// 触发 vue-router 点击事件
+	activeItem.value?.click()
+}
+</script>
+
+<template>
+<Transition name="float-in">
+	<div v-if="open" class="blog-search">
+		<form class="input" @submit.prevent>
+			<Icon v-show="false" name="line-md:loading-alt-loop" />
+			<Icon :name="status === 'pending' ? 'line-md:loading-alt-loop' : 'tabler:search'" />
+
+			<!-- 方向键切换搜索结果不应只在搜索框内触发 -->
+			<input
+				ref="searchInput"
+				v-model="word"
+				type="search"
+				incremental
+				class="search-input"
+				placeholder="键入开始搜索"
+				@keydown.up.prevent
+				@keydown.down.prevent
+			>
+		</form>
+
+		<TransitionGroup name="expand">
+			<div v-if="debouncedWord && status === 'success' && !result.length" class="no-result">
+				无结果
+			</div>
+
+			<menu
+				v-if="result.length"
+				ref="list-result"
+				:key="result.length < 5 ? result.length : result[0]?.id"
+				class="scrollcheck-y search-result"
+			>
+				<PopoverSearchItem
+					v-for="(item, itemIndex) in result"
+					:key="item.id"
+					v-bind="item"
+					:class="{ active: activeIndex === itemIndex }"
+					@mousemove="updateActiveIndex(itemIndex)"
+				/>
+			</menu>
+
+			<div v-if="result.length" class="tip" @click="searchInput?.focus()">
+				<Key code="ArrowUp" prevent @press="updateActiveIndex(activeIndex - 1, true)" />
+				<Key code="ArrowDown" prevent @press="updateActiveIndex(activeIndex + 1, true)" />
+				切换&emsp;
+				<Key code="Enter" icon @press="openActiveItem" />
+				选择&emsp;
+				<Key code="Escape" :icon="false" @press="$emit('close')" />
+				关闭
+			</div>
+		</TransitionGroup>
+	</div>
+</Transition>
+</template>
+
+<style lang="scss" scoped>
 .blog-search {
 	--float-distance: 20vh;
 
@@ -211,4 +211,4 @@ function openActiveItem() {
 	opacity: 0;
 	max-height: 0;
 }
-</style>
+</style>

package/{app → src}/components/popover/SearchItem.vue

@@ -1,30 +1,30 @@
-<script setup lang="ts">
-import type { SearchResult } from 'minisearch'
-
-interface SearchItem extends SearchResult {
-	title: string
-	content: string
-	titles: string[]
-	level: number
-}
-
-withDefaults(defineProps<Partial<SearchItem>>(), {
-	titles: () => [],
-	title: '',
-})
-</script>
-
-<template>
-<UtilLink :to="id" class="search-item">
-	<hgroup class="text-creative">
-		<span v-for="heading in [...titles, title]" :key="heading" class="title" v-html="highlightHtml(heading, queryTerms)" />
-		<Icon v-if="level === 1" name="tabler:file-text" />
-	</hgroup>
-	<p v-if="content" class="content" v-html="highlightHtml(content, queryTerms)" />
-</UtilLink>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { SearchResult } from 'minisearch'
+
+interface SearchItem extends SearchResult {
+	title: string
+	content: string
+	titles: string[]
+	level: number
+}
+
+withDefaults(defineProps<Partial<SearchItem>>(), {
+	titles: () => [],
+	title: '',
+})
+</script>
+
+<template>
+<UtilLink :to="id" class="search-item">
+	<hgroup class="text-creative">
+		<span v-for="heading in [...titles, title]" :key="heading" class="title" v-html="highlightHtml(heading, queryTerms)" />
+		<Icon v-if="level === 1" name="tabler:file-text" />
+	</hgroup>
+	<p v-if="content" class="content" v-html="highlightHtml(content, queryTerms)" />
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
 .search-item {
 	display: block;
 	margin: 0.5em;
@@ -61,4 +61,4 @@ withDefaults(defineProps<Partial<SearchItem>>(), {
 	white-space: pre-wrap;
 	color: var(--c-text-2);
 }
-</style>
+</style>

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

@@ -1,42 +1,42 @@
-<script setup lang="ts">
-import type { ArticleProps } from '../../types/article'
-
-const props = defineProps<{
-	to?: string
-	useUpdated?: boolean
-	showCategory?: boolean
-} & ArticleProps>()
-
-const mainDate = computed(() => props.useUpdated ? props.updated : props.date)
-</script>
-
-<template>
-<li class="article-item">
-	<UtilDate class="dim-hover" :date="mainDate" format="monthDay" />
-
-	<div class="gradient-card" :style="{ '--c-accent': getCategoryColor(categories?.[0]) }">
-		<UtilLink class="article-link scrollbar-hidden scrollcheck-x" :to :title="description">
-			<span class="article-title">
-				<Icon v-if="showCategory" :name="getCategoryIcon(categories?.[0])" />
-				{{ title }}
-			</span>
-
-			<UtilDate
-				v-if="date && useUpdated && isTimeDiffSignificant(date, updated)"
-				class="dim-hover info"
-				:date="date"
-				:format="updated && isSameUnit(date, updated, 'year') ? 'monthDay' : 'date'"
-			/>
-
-			<ul v-if="tags?.length" class="dim-hover info tag-list">
-				<li v-for="tag in tags" :key="tag" v-text="tag" />
-			</ul>
-		</UtilLink>
-	</div>
-</li>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { ArticleProps } from '../../types/article'
+
+const props = defineProps<{
+	to?: string
+	useUpdated?: boolean
+	showCategory?: boolean
+} & ArticleProps>()
+
+const mainDate = computed(() => props.useUpdated ? props.updated : props.date)
+</script>
+
+<template>
+<li class="article-item">
+	<UtilDate class="dim-hover" :date="mainDate" format="monthDay" />
+
+	<div class="gradient-card" :style="{ '--c-accent': getCategoryColor(categories?.[0]) }">
+		<UtilLink class="article-link scrollbar-hidden scrollcheck-x" :to :title="description">
+			<span class="article-title">
+				<Icon v-if="showCategory" :name="getCategoryIcon(categories?.[0])" />
+				{{ title }}
+			</span>
+
+			<UtilDate
+				v-if="date && useUpdated && isTimeDiffSignificant(date, updated)"
+				class="dim-hover info"
+				:date="date"
+				:format="updated && isSameUnit(date, updated, 'year') ? 'monthDay' : 'date'"
+			/>
+
+			<ul v-if="tags?.length" class="dim-hover info tag-list">
+				<li v-for="tag in tags" :key="tag" v-text="tag" />
+			</ul>
+		</UtilLink>
+	</div>
+</li>
+</template>
+
+<style lang="scss" scoped>
 .article-item {
 	display: flex;
 	align-items: center;
@@ -101,4 +101,4 @@ const mainDate = computed(() => props.useUpdated ? props.updated : props.date)
 		}
 	}
 }
-</style>
+</style>