FiDA_Front/src/views/home/components/input/SettingPopover.vue

<template>
	<el-popover
		v-model:visible="settingPopupVisible"
		placement="top"
		:width="342"
		:show-arrow="false"
		trigger="click"
		popper-class="fida-setting-popover"
	>
		<template #reference>
			<img src="@/assets/images/setting.png" class="setting-icon" />
		</template>
		<div class="fida-setting-popover-content flex flex-col">
			<div class="fida-setting-popover-header">
				{{ title }}
			</div>
			<div class="fida-setting-slider-list">
				<div
					v-for="(item, index) in options"
					:key="item.label"
					class="fida-setting-slider-item"
				>
					<div class="fida-slider-label">{{ translate(item.label) }}</div>
					<div class="fida-slider-row flex align-center">
						<el-slider
							class="setting-popover-slider"
							:model-value="item.value"
							:show-tooltip="false"
							@update:model-value="updateOptionValue(index, $event)"
						/>
						<span class="fida-slider-value">{{ item.value }}%</span>
					</div>
				</div>
			</div>
		</div>
	</el-popover>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import type { SettingOption } from './types'

	const props = defineProps<{
		options: SettingOption[]
		title: string
		translate: (key: string) => string
	}>()

	const emit = defineEmits<{
		(e: 'update:options', value: SettingOption[]): void
	}>()

	const settingPopupVisible = ref(false)

	const updateOptionValue = (index: number, value: number | number[]) => {
		const nextValue = Array.isArray(value) ? value[0] : value
		const nextOptions = props.options.map((item, itemIndex) =>
			itemIndex === index ? { ...item, value: nextValue } : item
		)
		emit('update:options', nextOptions)
	}
</script>

<style lang="less" scoped>
	.setting-icon {
		width: 2.4rem;
		height: 2.4rem;
		cursor: pointer;
	}
</style>

<style lang="less">
	.fida-setting-popover {
		padding: 0 !important;
		border-radius: 0.6rem !important;
		background-color: #fff !important;
		border: none !important;
		width: 25.6rem;
		height: 23.9rem;
		box-shadow: 0px 11px 20px 0px #0000001a;
	}

	.fida-setting-popover-header {
		font-weight: 400;
		font-size: 1.4rem;
		color: #000;
		margin-bottom: 2rem !important;
	}

	.fida-setting-popover-content {
		padding: 1.6rem 1.4rem 2.2rem !important;
	}

	.fida-setting-slider-list {
		display: flex;
		flex-direction: column;
		row-gap: 1rem;
	}

	.fida-setting-slider-item {
		.fida-slider-label {
			font-weight: 400;
			font-size: 1.2rem;
			color: #000;
			margin-bottom: 1rem;
		}

		.fida-slider-row {
			column-gap: 2.6rem;

			.el-slider {
				flex: 1;
			}

			.fida-slider-value {
				font-weight: 400;
				font-size: 1.4rem;
				color: #000;
			}
		}
	}

	.setting-popover-slider {
		--el-slider-height: 0.4rem;
		height: fit-content;

		.el-slider__runway {
			height: var(--el-slider-height);
			background-color: #e8e8e8;
			border-radius: 0.2rem;
		}

		.el-slider__bar {
			height: var(--el-slider-height);
			background-color: #000;
			border-radius: 0.2rem;
		}

		.el-slider__button-wrapper {
			width: fit-content;
			height: fit-content;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			align-items: center;
		}

		.el-slider__button {
			width: 1rem;
			height: 1rem;
			background-color: #000;
			border-radius: 50%;
			border: none;
		}

		.el-slider__stop {
			display: none;
		}
	}
</style>