clarity-theme 0.1.0 → 0.1.1

package/app/components/content/Folding.vue

@@ -1,21 +1,21 @@
-<script setup lang="ts">
-defineProps<{
-	title?: string
-}>()
-</script>
-
-<template>
-<details>
-	<summary>
-		<slot name="title">
-			{{ title }}
-		</slot>
-	</summary>
-	<slot />
-</details>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	title?: string
+}>()
+</script>
+
+<template>
+<details>
+	<summary>
+		<slot name="title">
+			{{ title }}
+		</slot>
+	</summary>
+	<slot />
+</details>
+</template>
+
+<style lang="scss" scoped>
 details {
 	margin: 1em 0;
 	padding: 0.5em 0.8em;
@@ -66,4 +66,4 @@ details {
 		margin: 0 -0.8em -0.5em;
 	}
 }
-</style>
+</style>

package/app/components/content/Key.vue

@@ -1,145 +1,145 @@
-<script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
-import { computed, ref } from 'vue'
-
-const props = withDefaults(defineProps<{
-	text?: string
-	/** https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key */
-	code?: string
-	/** 仅 macOS 默认显示图标 */
-	icon?: boolean
-	ctrl?: boolean
-	shift?: boolean
-	alt?: boolean
-	meta?: boolean
-	win?: boolean
-	/** 智能适配：Windows用Ctrl，macOS用Cmd */
-	cmd?: boolean
-	prevent?: boolean
-}>(), {
-	icon: undefined,
-})
-
-const emit = defineEmits<{
-	press: []
-}>()
-
-const mounted = useMounted()
-const isMac = computed(() => mounted.value && /mac ?os/i.test(navigator?.userAgent))
-const useSymbol = computed(() => isMac.value ? props.icon !== false : props.icon)
-const keyJoiner = computed(() => useSymbol.value ? '' : '+')
-
-// @keep-sorted
-const displayMap = {
-	' ': 'Space',
-	'ArrowDown': '↓',
-	'ArrowLeft': '←',
-	'ArrowRight': '→',
-	'ArrowUp': '↑',
-	'Control': 'Ctrl',
-	'Delete': 'Del',
-	'Escape': 'Esc',
-	get 'Meta'() { return isMac.value ? 'Cmd' : 'Win' },
-}
-
-// @keep-sorted
-const symbolMap = {
-	' ': '␣',
-	'Alt': '⌥',
-	'Backspace': '⌫',
-	'Control': '⌃',
-	'Delete': '⌦',
-	'Enter': '↵',
-	'Escape': '⎋',
-	get 'Meta'() { return isMac.value ? '⌘' : '⊞' },
-	'Shift': '⇧',
-	'Tab': '⇥',
-	'Win': '⊞',
-}
-
-function normalizeCodeDisplay(code?: string) {
-	if (!code)
-		return ''
-	if (useSymbol.value && code in symbolMap)
-		return symbolMap[code as keyof typeof symbolMap]
-	if (code in displayMap)
-		return displayMap[code as keyof typeof displayMap]
-	return code
-}
-
-const codeDisplay = computed(() => {
-	if (props.text)
-		return props.text
-
-	const keyConfigs = [
-		{ condition: props.cmd, code: isMac.value ? 'Meta' : 'Control' },
-		{ condition: props.ctrl && !props.cmd, code: 'Control' },
-		{ condition: props.shift, code: 'Shift' },
-		{ condition: props.alt, code: 'Alt' },
-		{ condition: props.meta && !props.cmd, code: 'Meta' },
-		{ condition: props.win && !props.meta, code: 'Win' },
-		{ condition: props.code, code: props.code },
-	]
-
-	return keyConfigs
-		.filter(config => config.condition)
-		.map(config => normalizeCodeDisplay(config.code))
-		.join(keyJoiner.value)
-})
-
-const active = ref(false)
-
-const ctrlState = useKeyModifier('Control')
-const shiftState = useKeyModifier('Shift')
-const altState = useKeyModifier('Alt')
-const metaState = useKeyModifier('Meta')
-
-/** 检查当前修饰键状态是否匹配 props */
-function modifiersMatch() {
-	const cmdMatch = props.cmd
-		? (isMac.value ? metaState.value : ctrlState.value)
-		: true
-
-	return cmdMatch
-		&& (!props.ctrl || (!props.cmd && ctrlState.value))
-		&& (!props.shift || shiftState.value)
-		&& (!props.alt || altState.value)
-		&& (!props.meta || (!props.cmd && metaState.value))
-}
-
-function matchKeyEvent(e: KeyboardEvent, expectedCode?: string) {
-	if (expectedCode && e.key?.toLowerCase() !== expectedCode.toLowerCase())
-		return false
-	return modifiersMatch()
-}
-
-useEventListener('keydown', (e) => {
-	if (matchKeyEvent(e, props.code)) {
-		emit('press')
-		active.value = true
-		props.prevent && e.preventDefault()
-	}
-})
-
-useEventListener('keyup', (e) => {
-	if (matchKeyEvent(e, props.code) || !modifiersMatch())
-		active.value = false
-})
-
-useEventListener('blur', () => {
-	active.value = false
-})
-</script>
-
-<template>
-<UtilHydrateSafe>
-	<kbd :class="{ active }" @click.stop="emit('press')">
-		<slot>{{ codeDisplay }}</slot>
-	</kbd>
-</UtilHydrateSafe>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+const props = withDefaults(defineProps<{
+	text?: string
+	/** https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key */
+	code?: string
+	/** 仅 macOS 默认显示图标 */
+	icon?: boolean
+	ctrl?: boolean
+	shift?: boolean
+	alt?: boolean
+	meta?: boolean
+	win?: boolean
+	/** 智能适配：Windows用Ctrl，macOS用Cmd */
+	cmd?: boolean
+	prevent?: boolean
+}>(), {
+	icon: undefined,
+})
+
+const emit = defineEmits<{
+	press: []
+}>()
+
+const mounted = useMounted()
+const isMac = computed(() => mounted.value && /mac ?os/i.test(navigator?.userAgent))
+const useSymbol = computed(() => isMac.value ? props.icon !== false : props.icon)
+const keyJoiner = computed(() => useSymbol.value ? '' : '+')
+
+// @keep-sorted
+const displayMap = {
+	' ': 'Space',
+	'ArrowDown': '↓',
+	'ArrowLeft': '←',
+	'ArrowRight': '→',
+	'ArrowUp': '↑',
+	'Control': 'Ctrl',
+	'Delete': 'Del',
+	'Escape': 'Esc',
+	get 'Meta'() { return isMac.value ? 'Cmd' : 'Win' },
+}
+
+// @keep-sorted
+const symbolMap = {
+	' ': '␣',
+	'Alt': '⌥',
+	'Backspace': '⌫',
+	'Control': '⌃',
+	'Delete': '⌦',
+	'Enter': '↵',
+	'Escape': '⎋',
+	get 'Meta'() { return isMac.value ? '⌘' : '⊞' },
+	'Shift': '⇧',
+	'Tab': '⇥',
+	'Win': '⊞',
+}
+
+function normalizeCodeDisplay(code?: string) {
+	if (!code)
+		return ''
+	if (useSymbol.value && code in symbolMap)
+		return symbolMap[code as keyof typeof symbolMap]
+	if (code in displayMap)
+		return displayMap[code as keyof typeof displayMap]
+	return code
+}
+
+const codeDisplay = computed(() => {
+	if (props.text)
+		return props.text
+
+	const keyConfigs = [
+		{ condition: props.cmd, code: isMac.value ? 'Meta' : 'Control' },
+		{ condition: props.ctrl && !props.cmd, code: 'Control' },
+		{ condition: props.shift, code: 'Shift' },
+		{ condition: props.alt, code: 'Alt' },
+		{ condition: props.meta && !props.cmd, code: 'Meta' },
+		{ condition: props.win && !props.meta, code: 'Win' },
+		{ condition: props.code, code: props.code },
+	]
+
+	return keyConfigs
+		.filter(config => config.condition)
+		.map(config => normalizeCodeDisplay(config.code))
+		.join(keyJoiner.value)
+})
+
+const active = ref(false)
+
+const ctrlState = useKeyModifier('Control')
+const shiftState = useKeyModifier('Shift')
+const altState = useKeyModifier('Alt')
+const metaState = useKeyModifier('Meta')
+
+/** 检查当前修饰键状态是否匹配 props */
+function modifiersMatch() {
+	const cmdMatch = props.cmd
+		? (isMac.value ? metaState.value : ctrlState.value)
+		: true
+
+	return cmdMatch
+		&& (!props.ctrl || (!props.cmd && ctrlState.value))
+		&& (!props.shift || shiftState.value)
+		&& (!props.alt || altState.value)
+		&& (!props.meta || (!props.cmd && metaState.value))
+}
+
+function matchKeyEvent(e: KeyboardEvent, expectedCode?: string) {
+	if (expectedCode && e.key?.toLowerCase() !== expectedCode.toLowerCase())
+		return false
+	return modifiersMatch()
+}
+
+useEventListener('keydown', (e) => {
+	if (matchKeyEvent(e, props.code)) {
+		emit('press')
+		active.value = true
+		props.prevent && e.preventDefault()
+	}
+})
+
+useEventListener('keyup', (e) => {
+	if (matchKeyEvent(e, props.code) || !modifiersMatch())
+		active.value = false
+})
+
+useEventListener('blur', () => {
+	active.value = false
+})
+</script>
+
+<template>
+<UtilHydrateSafe>
+	<kbd :class="{ active }" @click.stop="emit('press')">
+		<slot>{{ codeDisplay }}</slot>
+	</kbd>
+</UtilHydrateSafe>
+</template>
+
+<style lang="scss" scoped>
 kbd {
 	display: inline-block;
 	margin: 0.1em;
@@ -161,4 +161,4 @@ kbd {
 		transform: translateY(0.05em);
 	}
 }
-</style>
+</style>

package/app/components/content/LinkBanner.vue

@@ -1,29 +1,29 @@
-<script setup lang="ts">
-defineProps<{
-	banner?: string
-	mirror?: ImgService
-	title: string
-	description?: string
-	link: string
-}>()
-</script>
-
-<template>
-<UtilLink :to="link" class="link-banner card" :title="joinWith([title, description, link])">
-	<UtilImg v-if="banner" class="link-banner-bg" :src="banner" :mirror />
-	<div class="link-banner-header" />
-	<div class="link-banner-info">
-		<div class="link-banner-title">
-			{{ title }}
-		</div>
-		<div class="link-banner-desc">
-			{{ description ?? getDomain(link) }}
-		</div>
-	</div>
-</UtilLink>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	banner?: string
+	mirror?: ImgService
+	title: string
+	description?: string
+	link: string
+}>()
+</script>
+
+<template>
+<UtilLink :to="link" class="link-banner card" :title="joinWith([title, description, link])">
+	<UtilImg v-if="banner" class="link-banner-bg" :src="banner" :mirror />
+	<div class="link-banner-header" />
+	<div class="link-banner-info">
+		<div class="link-banner-title">
+			{{ title }}
+		</div>
+		<div class="link-banner-desc">
+			{{ description ?? getDomain(link) }}
+		</div>
+	</div>
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
 .link-banner {
 	line-height: 1.4;
 
@@ -56,4 +56,4 @@ defineProps<{
 		color: var(--c-text-2);
 	}
 }
-</style>
+</style>

package/app/components/content/LinkCard.vue

@@ -1,30 +1,30 @@
-<script setup lang="ts">
-defineProps<{
-	link: string
-	title: string
-	description?: string
-	icon?: string
-	mirror?: ImgService
-}>()
-</script>
-
-<template>
-<UtilLink :to="link" class="link-card card" :title="joinWith([title, description, link])">
-	<div class="link-card-info">
-		<div class="link-card-title">
-			{{ title }}
-		</div>
-		<div class="link-card-description">
-			{{ description ?? getDomain(link) }}
-		</div>
-	</div>
-	<slot name="icon" class="link-card-icon-slot">
-		<UtilImg v-if="icon" class="link-card-icon" :src="icon" :mirror />
-	</slot>
-</UtilLink>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	link: string
+	title: string
+	description?: string
+	icon?: string
+	mirror?: ImgService
+}>()
+</script>
+
+<template>
+<UtilLink :to="link" class="link-card card" :title="joinWith([title, description, link])">
+	<div class="link-card-info">
+		<div class="link-card-title">
+			{{ title }}
+		</div>
+		<div class="link-card-description">
+			{{ description ?? getDomain(link) }}
+		</div>
+	</div>
+	<slot name="icon" class="link-card-icon-slot">
+		<UtilImg v-if="icon" class="link-card-icon" :src="icon" :mirror />
+	</slot>
+</UtilLink>
+</template>
+
+<style lang="scss" scoped>
 .link-card {
 	display: flex;
 	align-items: center;
@@ -71,4 +71,4 @@ defineProps<{
 		object-fit: cover;
 	}
 }
-</style>
+</style>

package/app/components/content/MdTitle.vue

@@ -1,10 +1,10 @@
-<template>
-<div class="md-title">
-	<slot />
-</div>
-</template>
-
-<style lang="scss" scoped>
+<template>
+<div class="md-title">
+	<slot />
+</div>
+</template>
+
+<style lang="scss" scoped>
 .md-title {
 	margin: 0.5em 0;
 	font-size: 1.1em;
@@ -23,4 +23,4 @@
 		opacity: 0.5;
 	}
 }
-</style>
+</style>