init project

2026-08-01 18:01:23 +08:00
parent 286fa1ba56
commit 11c48bf00c
107 changed files with 19350 additions and 1 deletions
@@ -0,0 +1,186 @@
+<template>
+	<div ref="sliderRef" class="segmented-slider" :style="sliderStyle">
+		<span class="thumb" />
+		<button
+			v-for="(item, index) in options"
+			:key="item.value"
+			:ref="element => setOptionRef(element, index)"
+			class="option"
+			:class="{ active: item.value === modelValue }"
+			type="button"
+			@click="selectOption(item.value)"
+		>
+			<span v-text="item.label" />
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { ComponentPublicInstance } from "vue";
+
+interface SegmentedSliderOption {
+	label: string;
+	value: string;
+}
+
+const props = defineProps<{
+	modelValue: string;
+	options: SegmentedSliderOption[];
+}>();
+
+const emit = defineEmits<{
+	"update:modelValue": [value: string];
+	change: [value: string];
+}>();
+
+const sliderRef = ref<HTMLElement>();
+const optionRefs = ref<HTMLElement[]>([]);
+const activeMetrics = reactive({
+	left: 0,
+	width: 0
+});
+let sliderResizeObserver: ResizeObserver | undefined;
+
+const activeIndex = computed(() => {
+	const index = props.options.findIndex(item => item.value === props.modelValue);
+	return 0 < index ? index : 0;
+});
+const sliderStyle = computed(() => ({
+	"--thumb-left": `${activeMetrics.left}px`,
+	"--thumb-width": `${activeMetrics.width}px`
+}));
+
+function setOptionRef(element: Element | ComponentPublicInstance | null, index: number): void {
+	if (element instanceof HTMLElement) {
+		optionRefs.value[index] = element;
+	}
+}
+
+async function updateThumbMetrics(): Promise<void> {
+	await nextTick();
+	const activeElement = optionRefs.value[activeIndex.value];
+	if (!activeElement) {
+		return;
+	}
+
+	activeMetrics.left = activeElement.offsetLeft;
+	activeMetrics.width = activeElement.offsetWidth;
+}
+
+function selectOption(value: string): void {
+	emit("update:modelValue", value);
+	emit("change", value);
+}
+
+watch(() => [
+	props.modelValue,
+	...props.options.map(item => `${item.value}:${item.label}`)
+], async () => {
+	await updateThumbMetrics();
+});
+
+onBeforeUpdate(() => {
+	optionRefs.value = [];
+});
+
+onMounted(async () => {
+	await updateThumbMetrics();
+	if (!sliderRef.value) {
+		return;
+	}
+
+	sliderResizeObserver = new ResizeObserver(() => {
+		void updateThumbMetrics();
+	});
+	sliderResizeObserver.observe(sliderRef.value);
+});
+
+onBeforeUnmount(() => {
+	sliderResizeObserver?.disconnect();
+});
+</script>
+
+<style scoped lang="less">
+.segmented-slider {
+	gap: 0;
+	padding: .25rem;
+	display: inline-flex;
+	position: relative;
+	background: #e5e7eb;
+	border-radius: .875rem;
+
+	.thumb {
+		top: .25rem;
+		left: 0;
+		bottom: .25rem;
+		width: var(--thumb-width);
+		z-index: 0;
+		position: absolute;
+		transform: translateX(var(--thumb-left));
+		background: #fff;
+		transition: width .22s ease, transform .22s ease;
+		border-radius: .625rem;
+	}
+
+	.option {
+		flex: 0 0 auto;
+		color: #52607a;
+		border: 0;
+		margin: 0;
+		height: 2rem;
+		cursor: pointer;
+		z-index: 1;
+		padding: 0 .75rem;
+		display: flex;
+		outline: none;
+		position: relative;
+		font-size: .875rem;
+		min-width: 2.75rem;
+		appearance: none;
+		background: transparent;
+		align-items: center;
+		justify-content: center;
+		-webkit-appearance: none;
+		-webkit-tap-highlight-color: transparent;
+
+		&:active {
+			background: transparent;
+		}
+
+		&:focus {
+			outline: none;
+		}
+
+		&:focus-visible {
+			box-shadow: inset 0 0 0 .0625rem rgba(15, 118, 110, .48);
+		}
+
+		span {
+			white-space: nowrap;
+		}
+
+		&.active {
+			color: #0f172a;
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.segmented-slider {
+		background: rgba(30, 41, 59, .9);
+
+		.thumb {
+			background: rgba(15, 23, 42, .95);
+			box-shadow: 0 .25rem .75rem rgba(2, 6, 23, .36);
+		}
+
+		.option {
+			color: #94a3b8;
+
+			&.active {
+				color: #e2e8f0;
+			}
+		}
+	}
+}
+</style>