clarity-theme 0.1.0 → 0.1.1

package/app/components/content/ProsePre.vue

@@ -1,119 +1,119 @@
-<script setup lang="ts">
-import { escape } from 'es-toolkit/string'
-
-const props = withDefaults(defineProps<{
-	code?: string
-	language?: string
-	filename?: string
-	/** @deprecated Use `transformerNotationHighlight` instead */
-	highlights?: number[]
-	meta?: string
-	class?: string
-}>(), {
-	code: '',
-	meta: '',
-	language: 'text', // Nuxt Content 已经做了此处理
-})
-
-interface CodeblockMeta {
-	icon?: string
-	wrap?: boolean
-	[meta: string]: string | boolean | undefined
-}
-
-const meta = computed(() => props.meta.split(' ').reduce((acc: CodeblockMeta, item) => {
-	const [key, value] = item.split('=')
-	acc[key!] = value ?? true
-	return acc
-}, {}))
-
-const clarity = useClarityConfig()
-const compConf = computed(() => clarity.component.codeblock)
-
-const rows = computed(() => props.code.split('\n').length - 1)
-const collapsible = computed(() => !meta.value.expand && rows.value > compConf.value.triggerRows)
-const [isCollapsed, toggleCollapsed] = useToggle(collapsible.value)
-
-const icon = computed(() => meta.value.icon || getFileIcon(props.filename) || getLangIcon(props.language))
-const isWrap = ref(meta.value.wrap)
-const byteSize = computed(() => formatBytes(new TextEncoder().encode(props.code).length))
-
-const codeblock = useTemplateRef('codeblock')
-const { copy, copied } = useCopy(codeblock)
-const shiki = useShiki()
-const rawHtml = ref(escape(props.code))
-
-function getIndent() {
-	if (meta.value.indent)
-		return meta.value.indent
-
-	if (['md', 'mdc', 'json', 'jsonc', 'yaml', 'yml'].includes(props.language))
-		return 2
-
-	return compConf.value.indent
-}
-
-onMounted(async () => {
-	rawHtml.value = await shiki.codeToHtml(props.code.trimEnd(), {
-		language: props.language,
-		transformerOptions: [compConf.value.enableIndentGuide ? 'ignoreRenderWhitespace' : 'ignoreRenderIndentGuides'],
-		shikiOptions: { meta: { indent: getIndent() } },
-		embeddedLanguages: true,
-	})
-})
-</script>
-
-<template>
-<figure
-	class="z-codeblock"
-	:class="{ collapsed: collapsible && isCollapsed, collapsible }"
-	:style="{
-		'--collapsed-rows': compConf.collapsedRows,
-		'--tab-size': meta.indent as string || compConf.tabSize,
-	}"
->
-	<figcaption>
-		<span v-if="filename" class="filename">
-			<Icon :name="icon" /> {{ filename }}
-		</span>
-		<span v-else />
-		<!-- 语言不采用绝对定位，因为和文件名占据互斥空间 -->
-		<span v-if="language" class="language">{{ language }}</span>
-		<div class="operations">
-			<button @click="isWrap = !isWrap">
-				{{ isWrap ? '横向滚动' : '自动换行' }}
-			</button>
-			<button @click="copy()">
-				{{ copied ? '已复制' : '复制' }}
-			</button>
-		</div>
-	</figcaption>
-
-	<!-- 嘿嘿，不要换行 -->
-	<pre
-		ref="codeblock"
-		class="shiki scrollcheck-x"
-		:class="[props.class, { wrap: isWrap }]"
-		v-html="rawHtml"
-	/>
-
-	<button
-		v-if="collapsible"
-		class="toggle-btn"
-		:aria-label="isCollapsed ? '展开代码块' : '折叠代码块'"
-		@click="toggleCollapsed()"
-	>
-		<Icon
-			class="toggle-icon"
-			:class="{ 'is-collapsed': isCollapsed }"
-			name="tabler:chevrons-up"
-		/>
-		<span>{{ rows }} lines, {{ props.code.length }} chars, {{ byteSize }}</span>
-	</button>
-</figure>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import { escape } from 'es-toolkit/string'
+
+const props = withDefaults(defineProps<{
+	code?: string
+	language?: string
+	filename?: string
+	/** @deprecated Use `transformerNotationHighlight` instead */
+	highlights?: number[]
+	meta?: string
+	class?: string
+}>(), {
+	code: '',
+	meta: '',
+	language: 'text', // Nuxt Content 已经做了此处理
+})
+
+interface CodeblockMeta {
+	icon?: string
+	wrap?: boolean
+	[meta: string]: string | boolean | undefined
+}
+
+const meta = computed(() => props.meta.split(' ').reduce((acc: CodeblockMeta, item) => {
+	const [key, value] = item.split('=')
+	acc[key!] = value ?? true
+	return acc
+}, {}))
+
+const clarity = useClarityConfig()
+const compConf = computed(() => clarity.component.codeblock)
+
+const rows = computed(() => props.code.split('\n').length - 1)
+const collapsible = computed(() => !meta.value.expand && rows.value > compConf.value.triggerRows)
+const [isCollapsed, toggleCollapsed] = useToggle(collapsible.value)
+
+const icon = computed(() => meta.value.icon || getFileIcon(props.filename) || getLangIcon(props.language))
+const isWrap = ref(meta.value.wrap)
+const byteSize = computed(() => formatBytes(new TextEncoder().encode(props.code).length))
+
+const codeblock = useTemplateRef('codeblock')
+const { copy, copied } = useCopy(codeblock)
+const shiki = useShiki()
+const rawHtml = ref(escape(props.code))
+
+function getIndent() {
+	if (meta.value.indent)
+		return meta.value.indent
+
+	if (['md', 'mdc', 'json', 'jsonc', 'yaml', 'yml'].includes(props.language))
+		return 2
+
+	return compConf.value.indent
+}
+
+onMounted(async () => {
+	rawHtml.value = await shiki.codeToHtml(props.code.trimEnd(), {
+		language: props.language,
+		transformerOptions: [compConf.value.enableIndentGuide ? 'ignoreRenderWhitespace' : 'ignoreRenderIndentGuides'],
+		shikiOptions: { meta: { indent: getIndent() } },
+		embeddedLanguages: true,
+	})
+})
+</script>
+
+<template>
+<figure
+	class="z-codeblock"
+	:class="{ collapsed: collapsible && isCollapsed, collapsible }"
+	:style="{
+		'--collapsed-rows': compConf.collapsedRows,
+		'--tab-size': meta.indent as string || compConf.tabSize,
+	}"
+>
+	<figcaption>
+		<span v-if="filename" class="filename">
+			<Icon :name="icon" /> {{ filename }}
+		</span>
+		<span v-else />
+		<!-- 语言不采用绝对定位，因为和文件名占据互斥空间 -->
+		<span v-if="language" class="language">{{ language }}</span>
+		<div class="operations">
+			<button @click="isWrap = !isWrap">
+				{{ isWrap ? '横向滚动' : '自动换行' }}
+			</button>
+			<button @click="copy()">
+				{{ copied ? '已复制' : '复制' }}
+			</button>
+		</div>
+	</figcaption>
+
+	<!-- 嘿嘿，不要换行 -->
+	<pre
+		ref="codeblock"
+		class="shiki scrollcheck-x"
+		:class="[props.class, { wrap: isWrap }]"
+		v-html="rawHtml"
+	/>
+
+	<button
+		v-if="collapsible"
+		class="toggle-btn"
+		:aria-label="isCollapsed ? '展开代码块' : '折叠代码块'"
+		@click="toggleCollapsed()"
+	>
+		<Icon
+			class="toggle-icon"
+			:class="{ 'is-collapsed': isCollapsed }"
+			name="tabler:chevrons-up"
+		/>
+		<span>{{ rows }} lines, {{ props.code.length }} chars, {{ byteSize }}</span>
+	</button>
+</figure>
+</template>
+
+<style lang="scss" scoped>
 .z-codeblock {
 	--line-height: 1.4;
 
@@ -288,4 +288,4 @@ pre {
 		transform: rotate(180deg);
 	}
 }
-</style>
+</style>

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