46 lines
1.1 KiB
Vue
46 lines
1.1 KiB
Vue
<template>
|
|
<div class="flex font-heading">
|
|
<button
|
|
v-for="(option, key) in options" :key="key"
|
|
class="flex-1 pt-2 items-center text-center"
|
|
:class="currentOption!==key ? 'hover:bg-zinc-800 text-zinc-200' : 'text-black bg-zinc-200 hover:bg-zinc-100'"
|
|
@click="currentOption = key">
|
|
{{ $t(option.key) }}
|
|
<span class="flex h-4 w-full mt-2" :style="{background: option.color.hex()}" />
|
|
</button>
|
|
</div>
|
|
<HSVInput v-model="options[currentOption].color" class="relative z-20" />
|
|
</template>
|
|
<script setup>
|
|
import HSVInput from '@/components/config/HSVInput.vue'
|
|
import Color from 'color'
|
|
import { onBeforeMount, reactive, ref } from 'vue'
|
|
|
|
const currentOption = ref(null)
|
|
|
|
const model = defineModel({
|
|
type: Object,
|
|
default: () => ({
|
|
one: {
|
|
key: 'One',
|
|
color: Color('#ff0000'),
|
|
},
|
|
two: {
|
|
key: 'Two',
|
|
color: Color('#00ff00'),
|
|
},
|
|
three: {
|
|
key: 'Three',
|
|
color: Color('#0000ff'),
|
|
},
|
|
}),
|
|
})
|
|
|
|
const options = reactive(model.value)
|
|
|
|
onBeforeMount(() => {
|
|
if (currentOption.value === null)
|
|
currentOption.value = Object.keys(options)[0]
|
|
})
|
|
|
|
</script> |