clarity-theme 0.1.0 → 0.1.1

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

package/app/components/partial/Toggle.vue

@@ -1,19 +1,19 @@
-<script setup lang="ts">
-defineProps<{
-	label?: string
-}>()
-
-const modelValue = defineModel<boolean>()
-</script>
-
-<template>
-<label class="z-toggle">
-	<input v-model="modelValue" class="input-toggle" name="toggle" type="checkbox" @keypress.enter="modelValue = !modelValue">
-	<slot><span v-if="label" v-text="label" /></slot>
-</label>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+defineProps<{
+	label?: string
+}>()
+
+const modelValue = defineModel<boolean>()
+</script>
+
+<template>
+<label class="z-toggle">
+	<input v-model="modelValue" class="input-toggle" name="toggle" type="checkbox" @keypress.enter="modelValue = !modelValue">
+	<slot><span v-if="label" v-text="label" /></slot>
+</label>
+</template>
+
+<style lang="scss" scoped>
 .z-toggle {
 	user-select: none;
 }
@@ -67,4 +67,4 @@ const modelValue = defineModel<boolean>()
 		}
 	}
 }
-</style>
+</style>

package/app/components/popover/Lightbox.vue

@@ -1,46 +1,46 @@
-<script setup lang="ts">
-import type { CSSProperties } from 'vue'
-
-defineProps<{
-	el: HTMLImageElement
-	caption?: string | Component
-	open?: boolean
-	style?: CSSProperties
-}>()
-
-defineEmits<{
-	close: []
-}>()
-</script>
-
-<template>
-<BikariyaImageViewer
-	v-bind="$attrs"
-	:target="el"
-	:open
-	:style
-	clamp
-	:rate=".8"
-	@close="$emit('close')"
-/>
-
-<Transition>
-	<div v-if="open" class="tooltip" :style="{ zIndex: style?.zIndex }">
-		<span v-if="caption" class="caption">
-			<component :is="() => toValue(caption)" />
-		</span>
-		<button
-			class="close"
-			aria-label="关闭灯箱"
-			@click="$emit('close')"
-		>
-			<Icon name="tabler:x" />
-		</button>
-	</div>
-</Transition>
-</template>
-
-<style lang="scss" scoped>
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+
+defineProps<{
+	el: HTMLImageElement
+	caption?: string | Component
+	open?: boolean
+	style?: CSSProperties
+}>()
+
+defineEmits<{
+	close: []
+}>()
+</script>
+
+<template>
+<BikariyaImageViewer
+	v-bind="$attrs"
+	:target="el"
+	:open
+	:style
+	clamp
+	:rate=".8"
+	@close="$emit('close')"
+/>
+
+<Transition>
+	<div v-if="open" class="tooltip" :style="{ zIndex: style?.zIndex }">
+		<span v-if="caption" class="caption">
+			<component :is="() => toValue(caption)" />
+		</span>
+		<button
+			class="close"
+			aria-label="关闭灯箱"
+			@click="$emit('close')"
+		>
+			<Icon name="tabler:x" />
+		</button>
+	</div>
+</Transition>
+</template>
+
+<style lang="scss" scoped>
 .tooltip {
 	display: flex;
 	align-items: center;
@@ -74,4 +74,4 @@ defineEmits<{
 		cursor: pointer;
 	}
 }
-</style>
+</style>