clarity-theme 0.1.0 → 0.1.2

package/{app → src}/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 → src}/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 → src}/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 → src}/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 → src}/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>

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

@@ -1,64 +1,64 @@
-<script setup lang="ts">
-const props = defineProps<{
-	totalPages: number
-	expandPages?: number
-	sticky?: boolean
-	avoid?: boolean
-}>()
-
-const page = defineModel<number>({ required: true })
-const pageArr = computed(() => getPaginationIndicator(page.value, props.totalPages, props.expandPages ?? 2))
-
-const paginationEl = useTemplateRef('pagination')
-const anchorEl = useTemplateRef('pagination-anchor')
-const expand = useElementVisibility(anchorEl)
-
-if (props.avoid) {
-	useAvoidTarget(paginationEl, toRef(props, 'avoid'))
-}
-</script>
-
-<template>
-<nav
-	ref="pagination"
-	class="pagination"
-	:class="{ sticky, expand }"
-	:aria-label="`第${page}页，共${totalPages}页`"
-	:style="{ '--collapsed-width': `${pageArr.length * 2 + 6}em` }"
->
-	<ZButton
-		:disabled="page <= 1"
-		class="pagination-button rtl-flip"
-		icon="tabler:arrow-left"
-		aria-label="上一页"
-		@click="page--"
-	/>
-	<template v-for="i in pageArr" :key="i">
-		<button
-			v-if="Number.isFinite(i)"
-			class="pagination-num"
-			:class="{ active: i === page }"
-			:aria-label="`第${i}页`"
-			@click="page = i"
-			v-text="i"
-		/>
-		<!-- TODO: 点击后自主选择目标页面 -->
-		<button v-else disabled class="pagination-num">
-			…
-		</button>
-	</template>
-	<ZButton
-		:disabled="page >= totalPages"
-		class="pagination-button rtl-flip"
-		icon="tabler:arrow-right"
-		aria-label="下一页"
-		@click="page++"
-	/>
-</nav>
-<div ref="pagination-anchor" />
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const props = defineProps<{
+	totalPages: number
+	expandPages?: number
+	sticky?: boolean
+	avoid?: boolean
+}>()
+
+const page = defineModel<number>({ required: true })
+const pageArr = computed(() => getPaginationIndicator(page.value, props.totalPages, props.expandPages ?? 2))
+
+const paginationEl = useTemplateRef('pagination')
+const anchorEl = useTemplateRef('pagination-anchor')
+const expand = useElementVisibility(anchorEl)
+
+if (props.avoid) {
+	useAvoidTarget(paginationEl, toRef(props, 'avoid'))
+}
+</script>
+
+<template>
+<nav
+	ref="pagination"
+	class="pagination"
+	:class="{ sticky, expand }"
+	:aria-label="`第${page}页，共${totalPages}页`"
+	:style="{ '--collapsed-width': `${pageArr.length * 2 + 6}em` }"
+>
+	<ZButton
+		:disabled="page <= 1"
+		class="pagination-button rtl-flip"
+		icon="tabler:arrow-left"
+		aria-label="上一页"
+		@click="page--"
+	/>
+	<template v-for="i in pageArr" :key="i">
+		<button
+			v-if="Number.isFinite(i)"
+			class="pagination-num"
+			:class="{ active: i === page }"
+			:aria-label="`第${i}页`"
+			@click="page = i"
+			v-text="i"
+		/>
+		<!-- TODO: 点击后自主选择目标页面 -->
+		<button v-else disabled class="pagination-num">
+			…
+		</button>
+	</template>
+	<ZButton
+		:disabled="page >= totalPages"
+		class="pagination-button rtl-flip"
+		icon="tabler:arrow-right"
+		aria-label="下一页"
+		@click="page++"
+	/>
+</nav>
+<div ref="pagination-anchor" />
+</template>
+
+<style lang="scss" scoped>
 .pagination {
 	display: flex;
 	max-width: calc(100vw);
@@ -110,4 +110,4 @@ if (props.avoid) {
 		}
 	}
 }
-</style>
+</style>

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

@@ -1,32 +1,32 @@
-<script setup lang="ts" generic="T">
-interface RadioItem {
-	label?: string
-	value: T
-}
-
-defineProps<{
-	items: RadioItem[]
-}>()
-
-const modelValue = defineModel<T>()
-</script>
-
-<template>
-<div class="z-radio-group">
-	<button
-		v-for="{ label, value }, i in items"
-		:key="i"
-		type="button"
-		class="radio-item"
-		:class="{ active: value === modelValue }"
-		@click="modelValue = value"
-	>
-		{{ label || value }}
-	</button>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts" generic="T">
+interface RadioItem {
+	label?: string
+	value: T
+}
+
+defineProps<{
+	items: RadioItem[]
+}>()
+
+const modelValue = defineModel<T>()
+</script>
+
+<template>
+<div class="z-radio-group">
+	<button
+		v-for="{ label, value }, i in items"
+		:key="i"
+		type="button"
+		class="radio-item"
+		:class="{ active: value === modelValue }"
+		@click="modelValue = value"
+	>
+		{{ label || value }}
+	</button>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .z-radio-group {
 	display: flex;
 	margin: 1em 0;
@@ -74,4 +74,4 @@ const modelValue = defineModel<T>()
 		border-inline-start: 1px solid var(--c-bg-soft);
 	}
 }
-</style>
+</style>

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

@@ -1,13 +1,13 @@
-<template>
-<!-- 外层元素用于占位 -->
-<div class="secret-container">
-	<div class="secret">
-		<slot />
-	</div>
-</div>
-</template>
-
-<style lang="scss" scoped>
+<template>
+<!-- 外层元素用于占位 -->
+<div class="secret-container">
+	<div class="secret">
+		<slot />
+	</div>
+</div>
+</template>
+
+<style lang="scss" scoped>
 .secret {
 	position: relative;
 	opacity: 0;
@@ -20,4 +20,4 @@
 		z-index: 0;
 	}
 }
-</style>
+</style>

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

@@ -1,50 +1,50 @@
-<script setup lang="ts">
-const props = defineProps<{
-	label?: string
-	springMin?: number
-	springMax?: number
-	list?: (string | { value: string, label?: string })[]
-}>()
-
-const modelValue = defineModel<number>({ required: true })
-const initialValue = modelValue.value
-const id = useId()
-const list = computed(() => props.list?.map(v => typeof v === 'string' ? { value: v } : v))
-
-function spring() {
-	if (props.springMin !== undefined && modelValue.value < props.springMin) {
-		modelValue.value = props.springMin
-	}
-	if (props.springMax !== undefined && modelValue.value > props.springMax) {
-		modelValue.value = props.springMax
-	}
-}
-const debounceSpring = useDebounceFn(spring, 500)
-</script>
-
-<template>
-<label class="z-slider">
-	<slot><span v-if="label" v-text="label" /></slot>
-
-	<input
-		v-bind="$attrs"
-		v-model.number="modelValue"
-		class="input-slider"
-		type="range"
-		:list="id"
-		@change="debounceSpring"
-		@dblclick="modelValue = initialValue"
-	>
-
-	<data class="data-value" :value="modelValue" v-text="modelValue" />
-
-	<datalist v-if="list" :id="id">
-		<option v-for="{ value, label: text } in list" :key="value" :value :label="text" />
-	</datalist>
-</label>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+const props = defineProps<{
+	label?: string
+	springMin?: number
+	springMax?: number
+	list?: (string | { value: string, label?: string })[]
+}>()
+
+const modelValue = defineModel<number>({ required: true })
+const initialValue = modelValue.value
+const id = useId()
+const list = computed(() => props.list?.map(v => typeof v === 'string' ? { value: v } : v))
+
+function spring() {
+	if (props.springMin !== undefined && modelValue.value < props.springMin) {
+		modelValue.value = props.springMin
+	}
+	if (props.springMax !== undefined && modelValue.value > props.springMax) {
+		modelValue.value = props.springMax
+	}
+}
+const debounceSpring = useDebounceFn(spring, 500)
+</script>
+
+<template>
+<label class="z-slider">
+	<slot><span v-if="label" v-text="label" /></slot>
+
+	<input
+		v-bind="$attrs"
+		v-model.number="modelValue"
+		class="input-slider"
+		type="range"
+		:list="id"
+		@change="debounceSpring"
+		@dblclick="modelValue = initialValue"
+	>
+
+	<data class="data-value" :value="modelValue" v-text="modelValue" />
+
+	<datalist v-if="list" :id="id">
+		<option v-for="{ value, label: text } in list" :key="value" :value :label="text" />
+	</datalist>
+</label>
+</template>
+
+<style lang="scss" scoped>
 .z-slider {
 	display: flex;
 	align-items: center;
@@ -93,4 +93,4 @@ const debounceSpring = useDebounceFn(spring, 500)
 	min-width: var(--slider-value, 3ch);
 	text-align: right;
 }
-</style>
+</style>