|
|
@ -1,4 +1,5 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
<script setup lang="ts"> |
|
|
|
|
|
|
|
import { Sketch } from '@ckpack/vue-color' |
|
|
|
import { useColumnCreateStoreOrThrow } from '#imports' |
|
|
|
import { useColumnCreateStoreOrThrow } from '#imports' |
|
|
|
import { enumColor, getMdiIcon } from '@/utils' |
|
|
|
import { enumColor, getMdiIcon } from '@/utils' |
|
|
|
|
|
|
|
|
|
|
@ -28,24 +29,9 @@ const iconList = [ |
|
|
|
}, |
|
|
|
}, |
|
|
|
] |
|
|
|
] |
|
|
|
|
|
|
|
|
|
|
|
const rowSize = ref(10) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const advanced = ref(true) |
|
|
|
const advanced = ref(true) |
|
|
|
|
|
|
|
|
|
|
|
const picked = ref(enumColor.light[0]) |
|
|
|
const picked = ref(formState.value.meta.color || enumColor.light[0]) |
|
|
|
|
|
|
|
|
|
|
|
const colors = ref(['#fcb401', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208', '#777']) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function compare(colorA: any, colorB: any) { |
|
|
|
|
|
|
|
if ((typeof colorA === 'string' || colorA instanceof String) && (typeof colorB === 'string' || colorB instanceof String)) { |
|
|
|
|
|
|
|
return colorA.toLowerCase() === colorB.toLowerCase() |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return false |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function select(color: string) { |
|
|
|
|
|
|
|
picked.value = color |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
<template> |
|
|
@ -53,7 +39,7 @@ function select(color: string) { |
|
|
|
<a-col :span="12"> |
|
|
|
<a-col :span="12"> |
|
|
|
<a-form-item label="Icon"> |
|
|
|
<a-form-item label="Icon"> |
|
|
|
<a-select v-model:value="formState.meta.icon" size="small" class="w-52"> |
|
|
|
<a-select v-model:value="formState.meta.icon" size="small" class="w-52"> |
|
|
|
<!-- TODO: handle value --> |
|
|
|
<!-- FIXME: antdv doesn't support object as value --> |
|
|
|
<a-select-option v-for="(icon, i) of iconList" :key="i" :value="icon"> |
|
|
|
<a-select-option v-for="(icon, i) of iconList" :key="i" :value="icon"> |
|
|
|
<component |
|
|
|
<component |
|
|
|
:is="getMdiIcon(icon.full)" |
|
|
|
:is="getMdiIcon(icon.full)" |
|
|
@ -83,26 +69,16 @@ function select(color: string) { |
|
|
|
</a-col> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
</a-row> |
|
|
|
<a-row> |
|
|
|
<a-row> |
|
|
|
<div class="flex self-center justify-center flex-col pa-[10px]"> |
|
|
|
<a-card class="w-full shadow-lg mt-2" body-style="padding: 0px"> |
|
|
|
<div v-for="colId in Math.ceil(colors.length / rowSize)" :key="colId" class="flex row"> |
|
|
|
<a-collapse v-model:activeKey="advanced" accordion ghost expand-icon-position="right"> |
|
|
|
<div |
|
|
|
<a-collapse-panel key="1" header="Advanced" class=""> |
|
|
|
v-for="(color, i) in colors.slice((colId - 1) * rowSize, colId * rowSize)" |
|
|
|
<a-button class="!bg-primary text-white w-full" @click="formState.meta.color = picked.hex"> Pick Color </a-button> |
|
|
|
:key="`color-${colId}-${i}`" |
|
|
|
<div class="px-7 py-3"> |
|
|
|
class="color-selector h-[32px] w-[32px] rounded-[5px] my-[10px] mx-[5px] cursor-pointer relative" |
|
|
|
<Sketch v-model="picked" /> |
|
|
|
:class="compare(picked, color) ? 'selected' : ''" |
|
|
|
</div> |
|
|
|
:style="{ 'background-color': color }" |
|
|
|
|
|
|
|
@click="select(color)" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
{{ compare(picked, color) ? '✓' : '' }} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<a-collapse v-model:activeKey="advanced" ghost> |
|
|
|
|
|
|
|
<a-collapse-panel key="1" header="Advanced"> |
|
|
|
|
|
|
|
<a-button class="lighten-2 w-full" @click="select(picked)"> Pick Color </a-button> |
|
|
|
|
|
|
|
<v-color-picker v-model="picked" class="align-self-center ma-2" canvas-height="100px" mode="hexa" /> |
|
|
|
|
|
|
|
</a-collapse-panel> |
|
|
|
</a-collapse-panel> |
|
|
|
</a-collapse> |
|
|
|
</a-collapse> |
|
|
|
</div> |
|
|
|
</a-card> |
|
|
|
</a-row> |
|
|
|
</a-row> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|