clarity-theme 0.1.0 → 0.1.2

package/{app → src}/components/content/ProseTable.vue

@@ -1,25 +1,25 @@
-<script setup lang="ts">
-const [scroll, toggleScroll] = useToggle(true)
-</script>
-
-<template>
-<Tooltip class="md-table" tag="figure" interactive :delay="500">
-	<template #content>
-		<Icon v-show="false" :name="scroll ? 'tabler:text-wrap-disabled' : 'tabler:text-wrap'" />
-		<ZButton
-			variant="text"
-			:icon="scroll ? 'tabler:text-wrap' : 'tabler:text-wrap-disabled'"
-			:text="scroll ? '自动换行' : '横向滚动'"
-			@click="toggleScroll()"
-		/>
-	</template>
-	<table class="scrollcheck-x" :class="{ scroll }">
-		<slot />
-	</table>
-</Tooltip>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const [scroll, toggleScroll] = useToggle(true)
+</script>
+
+<template>
+<Tooltip class="md-table" tag="figure" interactive :delay="500">
+	<template #content>
+		<Icon v-show="false" :name="scroll ? 'tabler:text-wrap-disabled' : 'tabler:text-wrap'" />
+		<ZButton
+			variant="text"
+			:icon="scroll ? 'tabler:text-wrap' : 'tabler:text-wrap-disabled'"
+			:text="scroll ? '自动换行' : '横向滚动'"
+			@click="toggleScroll()"
+		/>
+	</template>
+	<table class="scrollcheck-x" :class="{ scroll }">
+		<slot />
+	</table>
+</Tooltip>
+</template>
+
+<style lang="scss" scoped>
 .md-table {
 	position: relative;
 	margin: 1rem 0;
@@ -67,4 +67,4 @@ const [scroll, toggleScroll] = useToggle(true)
 		border: 1px solid var(--c-border);
 	}
 }
-</style>
+</style>

package/{app → src}/components/content/Quote.vue

@@ -1,23 +1,23 @@
-<script setup lang="ts">
-const props = defineProps<{
-	icon?: string
-}>()
-
-const icon = computed(() => props.icon || 'tabler:message-2')
-</script>
-
-<template>
-<div class="quote title-like">
-	<div class="icon-line">
-		<slot name="icon">
-			<Icon :name="icon" />
-		</slot>
-	</div>
-	<slot />
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const props = defineProps<{
+	icon?: string
+}>()
+
+const icon = computed(() => props.icon || 'tabler:message-2')
+</script>
+
+<template>
+<div class="quote title-like">
+	<div class="icon-line">
+		<slot name="icon">
+			<Icon :name="icon" />
+		</slot>
+	</div>
+	<slot />
+</div>
+</template>
+
+<style lang="scss" scoped>
 .quote {
 	font-size: 1.2rem;
 	line-height: 1.5;
@@ -48,4 +48,4 @@ const icon = computed(() => props.icon || 'tabler:message-2')
 		transform: translateY(-0.5rem);
 	}
 }
-</style>
+</style>

package/{app → src}/components/content/Tab.vue

@@ -1,34 +1,34 @@
-<script setup lang="ts">
-const props = defineProps<{
-	/** tab 下标从 1 开始 */
-	tabs: string[]
-	center?: boolean
-	active?: string | number
-}>()
-
-const activeTab = ref(Number(props.active) || 1)
-</script>
-
-<template>
-<!-- BUG: MDC Tab插槽块内会吞代码缩进 -->
-<div :class="{ center }">
-	<div class="tabs">
-		<button
-			v-for="(tab, tabIndex) in tabs"
-			:key="tabIndex"
-			:class="{ active: activeTab === tabIndex + 1 }"
-			@click="activeTab = tabIndex + 1"
-		>
-			{{ tab }}
-		</button>
-	</div>
-	<div v-for="tabIndex in tabs.length" v-show="activeTab === tabIndex" :key="tabIndex" class="tab-content">
-		<slot :name="`tab${tabIndex}`" />
-	</div>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const props = defineProps<{
+	/** tab 下标从 1 开始 */
+	tabs: string[]
+	center?: boolean
+	active?: string | number
+}>()
+
+const activeTab = ref(Number(props.active) || 1)
+</script>
+
+<template>
+<!-- BUG: MDC Tab插槽块内会吞代码缩进 -->
+<div :class="{ center }">
+	<div class="tabs">
+		<button
+			v-for="(tab, tabIndex) in tabs"
+			:key="tabIndex"
+			:class="{ active: activeTab === tabIndex + 1 }"
+			@click="activeTab = tabIndex + 1"
+		>
+			{{ tab }}
+		</button>
+	</div>
+	<div v-for="tabIndex in tabs.length" v-show="activeTab === tabIndex" :key="tabIndex" class="tab-content">
+		<slot :name="`tab${tabIndex}`" />
+	</div>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .float-in-leave-active {
 	/* stylelint-disable-next-line declaration-no-important */
 	position: revert !important;
@@ -97,4 +97,4 @@ button {
 .tab-content {
 	margin: 1em 0;
 }
-</style>
+</style>

package/{app → src}/components/content/Timeline.vue

@@ -1,35 +1,35 @@
-<script lang="tsx" setup>
-const slots = defineSlots<{
-	default: () => VNode[]
-}>()
-
-const timelineRegex = /^\{(?<caption>.*)\}$/
-
-function render() {
-	const slotContent = slots.default()
-	if (!slotContent)
-		return <span>时间线为空</span>
-
-	return slotContent.map((node: VNode) => {
-		// WARN: 此处使用了非标准的 v-slot:default
-		const textContent = (node.children as any)?.default?.()[0].children
-		const matchGroups = typeof textContent === 'string'
-			? textContent.match(timelineRegex)?.groups
-			: undefined
-		return matchGroups
-			? <dt class="timeline-caption">{matchGroups.caption}</dt>
-			: <dd class="timeline-body card">{node}</dd>
-	})
-}
-</script>
-
-<template>
-<dl class="timeline">
-	<render />
-</dl>
-</template>
-
-<style lang="scss" scoped>
+<script lang="tsx" setup>
+const slots = defineSlots<{
+	default: () => VNode[]
+}>()
+
+const timelineRegex = /^\{(?<caption>.*)\}$/
+
+function render() {
+	const slotContent = slots.default()
+	if (!slotContent)
+		return <span>时间线为空</span>
+
+	return slotContent.map((node: VNode) => {
+		// WARN: 此处使用了非标准的 v-slot:default
+		const textContent = (node.children as any)?.default?.()[0].children
+		const matchGroups = typeof textContent === 'string'
+			? textContent.match(timelineRegex)?.groups
+			: undefined
+		return matchGroups
+			? <dt class="timeline-caption">{matchGroups.caption}</dt>
+			: <dd class="timeline-body card">{node}</dd>
+	})
+}
+</script>
+
+<template>
+<dl class="timeline">
+	<render />
+</dl>
+</template>
+
+<style lang="scss" scoped>
 // TODO: 优化时间线样式
 .timeline {
 	position: relative;
@@ -70,4 +70,4 @@ function render() {
 		padding: 0 1em;
 	}
 }
-</style>
+</style>

package/{app → src}/components/content/Tip.vue

@@ -1,42 +1,42 @@
-<script setup lang="ts">
-import type { TippyOptions } from 'vue-tippy'
-
-const props = withDefaults(defineProps<{
-	text?: string
-	tip?: string
-	icon?: string | boolean
-	copy?: boolean
-	tipOptions?: TippyOptions
-}>(), {
-	icon: undefined,
-})
-
-const tip = computed(() => ({
-	content: props.tip || (props.copy ? '点击复制' : ''),
-	inlinePositioning: true,
-	...props.tipOptions,
-}))
-const tipSource = useTemplateRef('tip-text')
-
-const { copy, copied } = useCopy(tipSource)
-const icon = computed(() => props.icon ?? (copied.value ? 'tabler:check' : props.copy && 'tabler:copy'))
-</script>
-
-<template>
-<span
-	ref="tip-text"
-	v-tip="tip"
-	class="tip"
-	tabindex="0"
-	@keypress.enter="props.copy && copy()"
-	@click="props.copy && copy()"
->
-	<slot>{{ text }}</slot>
-	<Icon v-if="typeof icon === 'string'" :name="icon" class="tip-icon" />
-</span>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { TippyOptions } from 'vue-tippy'
+
+const props = withDefaults(defineProps<{
+	text?: string
+	tip?: string
+	icon?: string | boolean
+	copy?: boolean
+	tipOptions?: TippyOptions
+}>(), {
+	icon: undefined,
+})
+
+const tip = computed(() => ({
+	content: props.tip || (props.copy ? '点击复制' : ''),
+	inlinePositioning: true,
+	...props.tipOptions,
+}))
+const tipSource = useTemplateRef('tip-text')
+
+const { copy, copied } = useCopy(tipSource)
+const icon = computed(() => props.icon ?? (copied.value ? 'tabler:check' : props.copy && 'tabler:copy'))
+</script>
+
+<template>
+<span
+	ref="tip-text"
+	v-tip="tip"
+	class="tip"
+	tabindex="0"
+	@keypress.enter="props.copy && copy()"
+	@click="props.copy && copy()"
+>
+	<slot>{{ text }}</slot>
+	<Icon v-if="typeof icon === 'string'" :name="icon" class="tip-icon" />
+</span>
+</template>
+
+<style lang="scss" scoped>
 .tip {
 	position: relative;
 	text-decoration: underline dashed var(--c-text-3);
@@ -49,4 +49,4 @@ const icon = computed(() => props.icon ?? (copied.value ? 'tabler:check' : props
 	font-size: 1em;
 	vertical-align: top;
 }
-</style>
+</style>

package/{app → src}/components/content/VideoEmbed.vue

@@ -1,114 +1,114 @@
-<script setup lang="ts">
-const props = withDefaults(defineProps<{
-	/** 视频类型，数字过长时需通过双引号传入字符串 */
-	type?: 'raw' | 'bilibili' | 'bilibili-nano' | 'youtube' | 'douyin' | 'douyin-wide' | 'tiktok'
-	id: string
-	autoplay?: boolean
-	/** 视频宽高比，如 `16 / 9` `1.6` */
-	ratio?: string | number
-	/** 仅 type 为 `raw` 时可用 */
-	poster?: string
-	/** 视频宽度 */
-	width?: string
-	/** 视频高度 */
-	height?: string
-	/** CSS Zoom 比例 */
-	zoom?: number
-}>(), {
-	type: 'raw',
-	height: '80vh',
-})
-
-const ratio = computed(() => {
-	if (props.ratio) {
-		return props.ratio
-	}
-	switch (props.type) {
-		case 'raw':
-			return undefined
-		case 'douyin':
-			return '27 / 56'
-		case 'douyin-wide':
-			return '1198 / 731'
-		default:
-			return '16 / 9'
-	}
-})
-
-const src = computed(() => {
-	switch (props.type) {
-		case 'bilibili':
-			return `https://player.bilibili.com/player.html?bvid=${props.id}&autoplay=${props.autoplay}`
-		case 'bilibili-nano':
-			return `https://www.bilibili.com/blackboard/newplayer.html?bvid=${props.id}&autoplay=${props.autoplay}`
-		case 'youtube':
-			return `https://www.youtube.com/embed/${props.id}?rel=0&disablekb=1&playsinline=1&autoplay=${props.autoplay}`
-		case 'douyin':
-			return `https://open.douyin.com/player/video?vid=${props.id}`
-		case 'douyin-wide':
-			return `https://open.douyin.com/player/video?vid=${props.id}`
-		case 'tiktok':
-			return `https://www.tiktok.com/embed/v3/${props.id}`
-		default:
-			return props.id
-	}
-})
-
-const videoPlayer = useTemplateRef('video-player')
-
-// 抖音会预检测宽度是否小于 730px，再返回竖屏或横屏模式
-// douyin-wide 需要阻塞加载，等进入视口后通过 zoom: 0.1 触发横屏模式
-// 已优化为 loading="lazy"
-const zoom = ref<number>()
-const zoomFactorForFixed = {
-	'douyin': 0.0031,
-	'douyin-wide': 0.00134,
-}
-
-function useZoomHelper(resizeType: keyof typeof zoomFactorForFixed) {
-	useResizeObserver(videoPlayer, ([entry]) => {
-		if (!entry)
-			return
-		const { width } = entry.contentRect
-		const zoomFactor = zoomFactorForFixed[resizeType]
-		zoom.value = width * zoomFactor
-	})
-}
-
-onMounted(() => {
-	if (props.type in zoomFactorForFixed)
-		useZoomHelper(props.type as keyof typeof zoomFactorForFixed)
-})
-</script>
-
-<template>
-<div
-	ref="video-player"
-	class="video"
-	:style="{
-		aspectRatio: ratio,
-		maxWidth: width,
-		maxHeight: height,
-	}"
->
-	<video
-		v-if="type === 'raw'"
-		:poster
-		:src
-		controls
-	/>
-	<iframe
-		v-else
-		:src
-		:style="{ zoom }"
-		scrolling="no"
-		loading="lazy"
-		allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"
-	/>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+	/** 视频类型，数字过长时需通过双引号传入字符串 */
+	type?: 'raw' | 'bilibili' | 'bilibili-nano' | 'youtube' | 'douyin' | 'douyin-wide' | 'tiktok'
+	id: string
+	autoplay?: boolean
+	/** 视频宽高比，如 `16 / 9` `1.6` */
+	ratio?: string | number
+	/** 仅 type 为 `raw` 时可用 */
+	poster?: string
+	/** 视频宽度 */
+	width?: string
+	/** 视频高度 */
+	height?: string
+	/** CSS Zoom 比例 */
+	zoom?: number
+}>(), {
+	type: 'raw',
+	height: '80vh',
+})
+
+const ratio = computed(() => {
+	if (props.ratio) {
+		return props.ratio
+	}
+	switch (props.type) {
+		case 'raw':
+			return undefined
+		case 'douyin':
+			return '27 / 56'
+		case 'douyin-wide':
+			return '1198 / 731'
+		default:
+			return '16 / 9'
+	}
+})
+
+const src = computed(() => {
+	switch (props.type) {
+		case 'bilibili':
+			return `https://player.bilibili.com/player.html?bvid=${props.id}&autoplay=${props.autoplay}`
+		case 'bilibili-nano':
+			return `https://www.bilibili.com/blackboard/newplayer.html?bvid=${props.id}&autoplay=${props.autoplay}`
+		case 'youtube':
+			return `https://www.youtube.com/embed/${props.id}?rel=0&disablekb=1&playsinline=1&autoplay=${props.autoplay}`
+		case 'douyin':
+			return `https://open.douyin.com/player/video?vid=${props.id}`
+		case 'douyin-wide':
+			return `https://open.douyin.com/player/video?vid=${props.id}`
+		case 'tiktok':
+			return `https://www.tiktok.com/embed/v3/${props.id}`
+		default:
+			return props.id
+	}
+})
+
+const videoPlayer = useTemplateRef('video-player')
+
+// 抖音会预检测宽度是否小于 730px，再返回竖屏或横屏模式
+// douyin-wide 需要阻塞加载，等进入视口后通过 zoom: 0.1 触发横屏模式
+// 已优化为 loading="lazy"
+const zoom = ref<number>()
+const zoomFactorForFixed = {
+	'douyin': 0.0031,
+	'douyin-wide': 0.00134,
+}
+
+function useZoomHelper(resizeType: keyof typeof zoomFactorForFixed) {
+	useResizeObserver(videoPlayer, ([entry]) => {
+		if (!entry)
+			return
+		const { width } = entry.contentRect
+		const zoomFactor = zoomFactorForFixed[resizeType]
+		zoom.value = width * zoomFactor
+	})
+}
+
+onMounted(() => {
+	if (props.type in zoomFactorForFixed)
+		useZoomHelper(props.type as keyof typeof zoomFactorForFixed)
+})
+</script>
+
+<template>
+<div
+	ref="video-player"
+	class="video"
+	:style="{
+		aspectRatio: ratio,
+		maxWidth: width,
+		maxHeight: height,
+	}"
+>
+	<video
+		v-if="type === 'raw'"
+		:poster
+		:src
+		controls
+	/>
+	<iframe
+		v-else
+		:src
+		:style="{ zoom }"
+		scrolling="no"
+		loading="lazy"
+		allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"
+	/>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .video {
 	contain: paint;
 	border-radius: 0.8rem;
@@ -124,4 +124,4 @@ iframe, video {
 	width: 100%;
 	height: 100%;
 }
-</style>
+</style>

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

@@ -1,38 +1,38 @@
-<script setup lang="ts">
-import { UtilLink } from '#components'
-
-export interface ButtonProps {
-	variant?: 'button' | 'text'
-	icon?: string
-	text?: string
-	to?: string
-	desc?: string
-	primary?: boolean
-}
-
-withDefaults(defineProps<ButtonProps>(), {
-	variant: 'button',
-})
-</script>
-
-<template>
-<component
-	:is="to ? UtilLink : 'button'"
-	:to
-	class="z-button"
-	:class="[variant, { primary }]"
->
-	<div class="button-main">
-		<Icon v-if="icon" :name="icon" />
-		<slot>{{ text }}</slot>
-	</div>
-	<div v-if="desc" class="button-desc">
-		{{ desc }}
-	</div>
-</component>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import { UtilLink } from '#components'
+
+export interface ButtonProps {
+	variant?: 'button' | 'text'
+	icon?: string
+	text?: string
+	to?: string
+	desc?: string
+	primary?: boolean
+}
+
+withDefaults(defineProps<ButtonProps>(), {
+	variant: 'button',
+})
+</script>
+
+<template>
+<component
+	:is="to ? UtilLink : 'button'"
+	:to
+	class="z-button"
+	:class="[variant, { primary }]"
+>
+	<div class="button-main">
+		<Icon v-if="icon" :name="icon" />
+		<slot>{{ text }}</slot>
+	</div>
+	<div v-if="desc" class="button-desc">
+		{{ desc }}
+	</div>
+</component>
+</template>
+
+<style lang="scss" scoped>
 .z-button {
 	display: inline-block;
 	transition: color 0.1s, background-color 0.2s;
@@ -95,4 +95,4 @@ withDefaults(defineProps<ButtonProps>(), {
 	text-align: center;
 	color: var(--c-text-2);
 }
-</style>
+</style>