Browse Source

feat(gui-v2): color picker + remove unused code

pull/2979/head
Wing-Kam Wong 2 years ago
parent
commit
911fc89c93
  1. 44
      packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue

44
packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue

@ -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' : ''"
:style="{ 'background-color': color }"
@click="select(color)"
>
{{ compare(picked, color) ? '&#10003;' : '' }}
</div> </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>

Loading…
Cancel
Save