Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 13x 3x 52x 26x 26x 348x | <template>
<div class="d-flex ga-2 flex-nowrap overflow-x-auto">
<template v-for="colour in colours">
<v-btn
rounded
:size="size"
variant="text"
:style="{ 'background-color': colour }"
@click="modelValue = colour"
>
<v-icon
v-if="matches(colour)"
color="white"
icon="check"
/>
</v-btn>
</template>
<v-menu :close-on-content-click="false">
<template #activator="{ props: menu }">
<v-tooltip
location="bottom"
open-delay="1000"
>
<template #activator="{ props: tooltip }">
<v-btn
v-bind="mergeProps(menu, tooltip)"
data-testid="menu"
:icon="true"
:size="size"
variant="outlined"
style="color: gray"
>
<v-icon
icon="colorize"
size="16"
color="shark_400"
/>
</v-btn>
</template>
<span>{{ t('labels.customColour') }}</span>
</v-tooltip>
</template>
<v-color-picker
v-model="modelValue"
mode="rgba"
variant="outlined"
class="new-style pb-0"
style="background-color: white"
/>
</v-menu>
</div>
</template>
<script setup lang="ts">
import { mergeProps } from 'vue';
import { useI18n } from 'vue-i18n';
interface Props {
colours?: string[];
size?: number | string;
}
withDefaults(defineProps<Props>(), {
colours: () => [
'#C9D7FC',
'#8599F4',
'#4C4FDF',
'#34359F',
'#C3DEF4',
'#50A5DE',
'#1C6EAD',
'#184B74',
'#F8D3D4',
'#EB818A',
'#CA344A',
'#8E2338',
],
size: 24,
});
const { t } = useI18n();
const modelValue = defineModel<string>({ default: '' });
function matches(value: string): boolean {
return modelValue.value.toLowerCase() === value.toLowerCase();
}
</script>
|