/
ScreenshotPalette.vue
70 lines (59 loc) · 1.48 KB
/
ScreenshotPalette.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<template>
<div class="screenshot-palette">
<div
v-for="(i, index) in palette"
:key="index"
class="item"
:class="{ 'is-selected': index === selected }"
:style="{ backgroundImage: `linear-gradient(45deg, ${i[0]}, ${i[1]})` }"
@click="onSelect(i)"
/>
</div>
</template>
<script setup lang="ts">
import { useAppStore } from '@/store/app'
import { computed } from 'vue'
interface Props {
modelValue: [string, string]
}
interface Emits {
(e: 'update:modelValue', value: [string, string]): void
}
const emit = defineEmits<Emits>()
const props = defineProps<Props>()
const appStore = useAppStore()
const palette: [string, string][] = [
['#D02F98', '#9439CA'],
['#A58EFB', '#CEABF9'],
['#FFE623', '#FFE623'],
['#4169E1', '#4169E1'],
['#FC3CAD', '#FC3CAD'],
['#8E00A7', '#8E00A7']
]
const selected = computed(() =>
palette.findIndex(i => i.every((c, idx) => c === props.modelValue[idx]))
)
const onSelect = (value: [string, string]) => {
emit('update:modelValue', value)
}
const itemBorderColor = computed(() =>
appStore.isLightTheme ? '#fff' : 'var(--color-contrast-high'
)
</script>
<style lang="scss" scoped>
.screenshot-palette {
display: flex;
gap: var(--spacing-xs);
.item {
padding: 2px;
border: 2px solid v-bind(itemBorderColor);
width: 18px;
height: 18px;
border-radius: 4px;
outline: 1px solid var(--color-border);
&.is-selected {
outline-color: var(--color-primary);
}
}
}
</style>