clarity-theme 0.1.0 → 0.1.1

package/app/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/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>

package/app/components/partial/DlGroup.vue

@@ -1,33 +1,33 @@
-<script setup lang="ts">
-import type { VNodeChild } from 'vue'
-
-interface DlItem {
-	label: string
-	value: MaybeRefOrGetter<VNodeChild>
-	tip?: MaybeRefOrGetter<string>
-}
-
-withDefaults(defineProps<{
-	items: DlItem[]
-	size?: 'small' | 'medium' | 'large'
-}>(), {
-	size: 'medium',
-})
-</script>
-
-<template>
-<dl class="dl-group" :class="size">
-	<div v-for="{ label, value, tip } in items" :key="label">
-		<dt>{{ label }}</dt>
-		<dd :title="toValue(tip)">
-			<!-- 支持 string, Ref<String>, VNode, () => VNode -->
-			<component :is="() => toValue(value)" />
-		</dd>
-	</div>
-</dl>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { VNodeChild } from 'vue'
+
+interface DlItem {
+	label: string
+	value: MaybeRefOrGetter<VNodeChild>
+	tip?: MaybeRefOrGetter<string>
+}
+
+withDefaults(defineProps<{
+	items: DlItem[]
+	size?: 'small' | 'medium' | 'large'
+}>(), {
+	size: 'medium',
+})
+</script>
+
+<template>
+<dl class="dl-group" :class="size">
+	<div v-for="{ label, value, tip } in items" :key="label">
+		<dt>{{ label }}</dt>
+		<dd :title="toValue(tip)">
+			<!-- 支持 string, Ref<String>, VNode, () => VNode -->
+			<component :is="() => toValue(value)" />
+		</dd>
+	</div>
+</dl>
+</template>
+
+<style lang="scss" scoped>
 .dl-group {
 	> div {
 		padding: 0.2em 0;
@@ -66,4 +66,4 @@ withDefaults(defineProps<{
 		}
 	}
 }
-</style>
+</style>

package/app/components/partial/Dropdown.vue

@@ -1,23 +1,23 @@
-<!-- https://vue-tippy.netlify.app/props/ -->
-<!-- 如果要点击触发，请使用 trigger="focusin" 并添加 tabindex="0" -->
-
-<template>
-<Tooltip
-	class="dropdown"
-	interactive
-	placement="bottom"
-	:arrow="false"
-	:hide-on-click="false"
-	:offset="[0, 0]"
->
-	<slot />
-	<template #content="{ hide }">
-		<slot name="content" :hide />
-	</template>
-</Tooltip>
-</template>
-
-<style lang="scss" scoped>
+<!-- https://vue-tippy.netlify.app/props/ -->
+<!-- 如果要点击触发，请使用 trigger="focusin" 并添加 tabindex="0" -->
+
+<template>
+<Tooltip
+	class="dropdown"
+	interactive
+	placement="bottom"
+	:arrow="false"
+	:hide-on-click="false"
+	:offset="[0, 0]"
+>
+	<slot />
+	<template #content="{ hide }">
+		<slot name="content" :hide />
+	</template>
+</Tooltip>
+</template>
+
+<style lang="scss" scoped>
 // https://vue-tippy.netlify.app/props#appendto
 // Tooltip 位于组件根部时，interactive tippy 会插入到父组件
 :deep() ~ [data-tippy-root] > .tippy-box {
@@ -51,4 +51,4 @@
 		}
 	}
 }
-</style>
+</style>

package/app/components/partial/Error.vue

@@ -1,41 +1,41 @@
-<script setup lang="ts">
-import type { BundledLanguage } from 'shiki'
-
-withDefaults(defineProps<{
-	icon?: string
-	title?: string
-	message?: string
-	code?: string
-	language?: BundledLanguage
-}>(), {
-	icon: 'line-md:cloud-alt-print-twotone-loop',
-	language: 'log',
-})
-</script>
-
-<template>
-<div class="error proper-height">
-	<div />
-	<Icon class="error-icon" :name="icon" />
-	<div class="error-title" v-html="title" />
-
-	<div class="operation">
-		<slot name="operation" />
-	</div>
-
-	<ProsePre
-		v-if="code"
-		:filename="message"
-		:language
-		:code
-		meta="wrap"
-	/>
-
-	<slot />
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { BundledLanguage } from 'shiki'
+
+withDefaults(defineProps<{
+	icon?: string
+	title?: string
+	message?: string
+	code?: string
+	language?: BundledLanguage
+}>(), {
+	icon: 'line-md:cloud-alt-print-twotone-loop',
+	language: 'log',
+})
+</script>
+
+<template>
+<div class="error proper-height">
+	<div />
+	<Icon class="error-icon" :name="icon" />
+	<div class="error-title" v-html="title" />
+
+	<div class="operation">
+		<slot name="operation" />
+	</div>
+
+	<ProsePre
+		v-if="code"
+		:filename="message"
+		:language
+		:code
+		meta="wrap"
+	/>
+
+	<slot />
+</div>
+</template>
+
+<style lang="scss" scoped>
 .error {
 	display: flex;
 	flex-direction: column;
@@ -67,4 +67,4 @@ withDefaults(defineProps<{
 		}
 	}
 }
-</style>
+</style>

package/app/components/partial/Expand.vue

@@ -1,28 +1,28 @@
-<script setup lang="ts">
-defineProps<{
-	name?: string
-	inPlace?: boolean
-}>()
-
-const expand = defineModel<boolean>()
-</script>
-
-<template>
-<div class="z-expand">
-	<Transition name="collapse">
-		<div v-show="expand" class="expand-content">
-			<slot />
-		</div>
-	</Transition>
-
-	<button class="toggle-btn" :class="{ 'in-place': inPlace }" @click="expand = !expand">
-		<Icon class="toggle-icon" :class="{ expand }" name="tabler:chevrons-down" />
-		<span>{{ `${expand ? '收起' : '展开'}${name}` }}</span>
-	</button>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	name?: string
+	inPlace?: boolean
+}>()
+
+const expand = defineModel<boolean>()
+</script>
+
+<template>
+<div class="z-expand">
+	<Transition name="collapse">
+		<div v-show="expand" class="expand-content">
+			<slot />
+		</div>
+	</Transition>
+
+	<button class="toggle-btn" :class="{ 'in-place': inPlace }" @click="expand = !expand">
+		<Icon class="toggle-icon" :class="{ expand }" name="tabler:chevrons-down" />
+		<span>{{ `${expand ? '收起' : '展开'}${name}` }}</span>
+	</button>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .z-expand {
 	display: flex;
 	flex-direction: column;
@@ -48,4 +48,4 @@ const expand = defineModel<boolean>()
 		transform: scaleY(-1);
 	}
 }
-</style>
+</style>

package/app/components/partial/IconNavList.vue

@@ -1,26 +1,26 @@
-<script setup lang="ts">
-import type { NavItem } from '../../types/nav'
-
-defineProps<{
-	list: NavItem[]
-}>()
-</script>
-
-<template>
-<menu>
-	<UtilLink
-		v-for="{ text, icon, url } in list"
-		:key="text"
-		v-tip="text"
-		:to="url"
-		:aria-label="text"
-	>
-		<Icon :name="icon" />
-	</UtilLink>
-</menu>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { NavItem } from '../../types/nav'
+
+defineProps<{
+	list: NavItem[]
+}>()
+</script>
+
+<template>
+<menu>
+	<UtilLink
+		v-for="{ text, icon, url } in list"
+		:key="text"
+		v-tip="text"
+		:to="url"
+		:aria-label="text"
+	>
+		<Icon :name="icon" />
+	</UtilLink>
+</menu>
+</template>
+
+<style lang="scss" scoped>
 menu {
 	display: flex;
 	justify-content: center;
@@ -39,4 +39,4 @@ menu {
 		}
 	}
 }
-</style>
+</style>