From f2f8172d86d039645da6fbec02ceafee217ba863 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 13:51:04 +0800
Subject: [PATCH 01/13] feat(gui-v2): include SmartsheetColumnRatingOptions

---
 packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 1481f6294a..b7c917ce3d 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -2,6 +2,7 @@
 import { computed, inject, useColumnCreateStoreOrThrow, useMetas, watchEffect } from '#imports'
 import { MetaInj } from '~/context'
 import { uiTypes } from '~/utils/columnUtils'
+import { UITypes } from 'nocodb-sdk'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 
@@ -84,6 +85,8 @@ watchEffect(() => {
         </a-select>
       </a-form-item>
 
+      <SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" />
+
       <div>
         <div
           class="text-xs cursor-pointer text-grey nc-more-options my-2 flex align-center gap-1 justify-end"

From 4ea314c4bfca369ca300d08b2fc467e41827323f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 13:56:50 +0800
Subject: [PATCH 02/13] feat(gui-v2): export icon utils

---
 packages/nc-gui-v2/utils/iconUtils.ts | 47 +++++++++++++++++++++++++++
 packages/nc-gui-v2/utils/index.ts     |  1 +
 2 files changed, 48 insertions(+)
 create mode 100644 packages/nc-gui-v2/utils/iconUtils.ts

diff --git a/packages/nc-gui-v2/utils/iconUtils.ts b/packages/nc-gui-v2/utils/iconUtils.ts
new file mode 100644
index 0000000000..b21a3b9398
--- /dev/null
+++ b/packages/nc-gui-v2/utils/iconUtils.ts
@@ -0,0 +1,47 @@
+import MdiCheckBold from '~icons/mdi/check-bold'
+import MdiCropSquare from '~icons/mdi/crop-square'
+import MdiCheckCircleOutline from '~icons/mdi/check-circle-outline'
+import MdiCheckboxBlankCircleOutline from '~icons/mdi/checkbox-blank-circle-outline'
+import MdiStar from '~icons/mdi/star'
+import MdiStarOutline from '~icons/mdi/star-outline'
+import MdiHeart from '~icons/mdi/heart'
+import MdiHeartOutline from '~icons/mdi/heart-outline'
+import MdiMoonFull from '~icons/mdi/moon-full'
+import MdiMoonNew from '~icons/mdi/moon-new'
+import MdiThumbUp from '~icons/mdi/thumb-up'
+import MdiThumbUpOutline from '~icons/mdi/thumb-up-outline'
+import MdiFlag from '~icons/mdi/flag'
+import MdiFlagOutline from '~icons/mdi/flag-outline'
+
+export function getMdiIcon(type: string) {
+  switch (type) {
+    case 'mdi-check-bold':
+      return MdiCheckBold
+    case 'mdi-crop-square':
+      return MdiCropSquare
+    case 'mdi-check-circle-outline':
+      return MdiCheckCircleOutline
+    case 'mdi-checkbox-blank-circle-outline':
+      return MdiCheckboxBlankCircleOutline
+    case 'mdi-star':
+      return MdiStar
+    case 'mdi-star-outline':
+      return MdiStarOutline
+    case 'mdi-heart':
+      return MdiHeart
+    case 'mdi-heart-outline':
+      return MdiHeartOutline
+    case 'mdi-moon-full':
+      return MdiMoonFull
+    case 'mdi-moon-new':
+      return MdiMoonNew
+    case 'mdi-thumb-up':
+      return MdiThumbUp
+    case 'mdi-thumb-up-outline':
+      return MdiThumbUpOutline
+    case 'mdi-flag':
+      return MdiFlag
+    case 'mdi-flag-outline':
+      return MdiFlagOutline
+  }
+}
diff --git a/packages/nc-gui-v2/utils/index.ts b/packages/nc-gui-v2/utils/index.ts
index 670b4eda04..e6850a4566 100644
--- a/packages/nc-gui-v2/utils/index.ts
+++ b/packages/nc-gui-v2/utils/index.ts
@@ -4,6 +4,7 @@ export * from './deepCompare'
 export * from './durationHelper'
 export * from './errorUtils'
 export * from './fileUtils'
+export * from './iconUtils'
 export * from './filterUtils'
 export * from './generateName'
 export * from './projectCreateUtils'

From 3d315c33b77eb03c613ebfa3b4cdaa3f1e92f8fa Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 14:02:49 +0800
Subject: [PATCH 03/13] wip(gui-v2): Rating Options

---
 .../smartsheet-column/RatingOptions.vue       | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue

diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
new file mode 100644
index 0000000000..d85c6b8cd4
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useColumnCreateStoreOrThrow } from '#imports'
+import { getMdiIcon } from '@/utils'
+
+const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
+
+// cater existing v1 cases
+const iconList = ref([
+  {
+    full: 'mdi-star',
+    empty: 'mdi-star-outline',
+  },
+  {
+    full: 'mdi-heart',
+    empty: 'mdi-heart-outline',
+  },
+  {
+    full: 'mdi-moon-full',
+    empty: 'mdi-moon-new',
+  },
+  {
+    full: 'mdi-thumb-up',
+    empty: 'mdi-thumb-up-outline',
+  },
+  {
+    full: 'mdi-flag',
+    empty: 'mdi-flag-outline',
+  },
+])
+</script>
+
+<template>
+  <a-row>
+    <a-col :span="12">
+      <a-form-item label="Icon">
+        <a-select v-model:value="formState.meta.icon" size="small" class="w-52">
+          <!-- TODO: handle value -->
+          <!-- TODO: handle color -->
+          <a-select-option v-for="(icon, i) in iconList ?? []" :key="i" :value="icon.full">
+            <component :is="getMdiIcon(icon.full)" />
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </a-col>
+    <a-col :span="12">
+      <a-form-item label="Max">
+        <a-select v-model:value="formState.meta.max" class="w-52" show-search :filter-option="filterOption" size="small">
+          <a-select-option v-for="(v, i) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="i" :value="v">
+            {{ v }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </a-col>
+  </a-row>
+  <!-- TODO: add color picker -->
+</template>

From d8200b663e7b8eac118ae94d3585fc3c29babd67 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 14:03:29 +0800
Subject: [PATCH 04/13] chore(gui-v2): lint

---
 packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index b7c917ce3d..84863d8d50 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import { UITypes } from 'nocodb-sdk'
 import { computed, inject, useColumnCreateStoreOrThrow, useMetas, watchEffect } from '#imports'
 import { MetaInj } from '~/context'
 import { uiTypes } from '~/utils/columnUtils'
-import { UITypes } from 'nocodb-sdk'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 

From 70da4b3354107a6300b94cfdacfc2877507bff61 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 15:35:29 +0800
Subject: [PATCH 05/13] feat(gui-v2): handle color

---
 .../smartsheet-column/RatingOptions.vue         | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
index d85c6b8cd4..4927187156 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -35,9 +35,20 @@ const iconList = ref([
       <a-form-item label="Icon">
         <a-select v-model:value="formState.meta.icon" size="small" class="w-52">
           <!-- TODO: handle value -->
-          <!-- TODO: handle color -->
-          <a-select-option v-for="(icon, i) in iconList ?? []" :key="i" :value="icon.full">
-            <component :is="getMdiIcon(icon.full)" />
+          <a-select-option v-for="(icon, i) in iconList ?? []" :key="i" :value="icon">
+            <component
+              :is="getMdiIcon(icon.full)"
+              :style="{
+                color: formState.meta.color,
+              }"
+            />
+            {{ ' ' }}
+            <component
+              :is="getMdiIcon(icon.empty)"
+              :style="{
+                color: formState.meta.color,
+              }"
+            />
           </a-select-option>
         </a-select>
       </a-form-item>

From 46c4240ee9591038e89517dffcc7b1e56a8a4797 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 15:36:05 +0800
Subject: [PATCH 06/13] chore(gui-v2): remove show-search & filter-option

---
 .../nc-gui-v2/components/smartsheet-column/RatingOptions.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
index 4927187156..1045ffd52e 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -55,7 +55,7 @@ const iconList = ref([
     </a-col>
     <a-col :span="12">
       <a-form-item label="Max">
-        <a-select v-model:value="formState.meta.max" class="w-52" show-search :filter-option="filterOption" size="small">
+        <a-select v-model:value="formState.meta.max" class="w-52" size="small">
           <a-select-option v-for="(v, i) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="i" :value="v">
             {{ v }}
           </a-select-option>

From c0d46963b38ffb9ceb64579213d8f22076c6fbb0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 16:16:44 +0800
Subject: [PATCH 07/13] fix(gui-v2): export const getMdiIcon

---
 packages/nc-gui-v2/utils/iconUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/utils/iconUtils.ts b/packages/nc-gui-v2/utils/iconUtils.ts
index b21a3b9398..2b3f0daa0f 100644
--- a/packages/nc-gui-v2/utils/iconUtils.ts
+++ b/packages/nc-gui-v2/utils/iconUtils.ts
@@ -13,7 +13,7 @@ import MdiThumbUpOutline from '~icons/mdi/thumb-up-outline'
 import MdiFlag from '~icons/mdi/flag'
 import MdiFlagOutline from '~icons/mdi/flag-outline'
 
-export function getMdiIcon(type: string) {
+export const getMdiIcon = (type: string) => {
   switch (type) {
     case 'mdi-check-bold':
       return MdiCheckBold

From bf71618ce9917fd902481e0ec5ffe859fc15e036 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 16:17:13 +0800
Subject: [PATCH 08/13] wip(gui-v2): color picker

---
 .../smartsheet-column/RatingOptions.vue       | 44 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
index 1045ffd52e..5c8a65f2eb 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useColumnCreateStoreOrThrow } from '#imports'
-import { getMdiIcon } from '@/utils'
+import { getMdiIcon, enumColor } from '@/utils'
 
 const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
 
@@ -27,6 +27,19 @@ const iconList = ref([
     empty: 'mdi-flag-outline',
   },
 ])
+
+const rowSize = ref(10)
+
+const advanced = ref(true)
+
+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
+}
 </script>
 
 <template>
@@ -64,4 +77,31 @@ const iconList = ref([
     </a-col>
   </a-row>
   <!-- TODO: add color picker -->
-</template>
+  <a-row>
+    <div class="color-picker">
+      <div v-for="colId in Math.ceil(colors.length / rowSize)" :key="colId" class="color-picker-row">
+        <button
+          v-for="(color, i) in colors.slice((colId - 1) * rowSize, colId * rowSize)"
+          :key="`color-${colId}-${i}`"
+          class="color-selector"
+          :class="compare(picked, color) ? 'selected' : ''"
+          :style="{ 'background-color': color }"
+          @click="select(color)"
+        >
+          {{ compare(picked, color) ? '&#10003;' : '' }}
+        </button>
+      </div>
+      <v-expansion-panels v-if="advanced">
+        <v-expansion-panel>
+          <v-expansion-panel-header>Advanced</v-expansion-panel-header>
+          <v-expansion-panel-content>
+            <v-container class="d-flex flex-column">
+              <v-btn class="primary lighten-2" @click="select(picked)"> Pick Color </v-btn>
+              <v-color-picker v-model="picked" class="align-self-center ma-2" canvas-height="100px" mode="hexa" />
+            </v-container>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </div>
+  </a-row>
+</template>
\ No newline at end of file

From 1a7f4d732c7ec5f35ba3b3356fd084d3f85bc4e0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 16:17:54 +0800
Subject: [PATCH 09/13] refactor(gui-v2): remove unnecessary ref & use for of

---
 .../components/smartsheet-column/RatingOptions.vue          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
index 5c8a65f2eb..483fbd8962 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -5,7 +5,7 @@ import { getMdiIcon, enumColor } from '@/utils'
 const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
 
 // cater existing v1 cases
-const iconList = ref([
+const iconList = [
   {
     full: 'mdi-star',
     empty: 'mdi-star-outline',
@@ -26,7 +26,7 @@ const iconList = ref([
     full: 'mdi-flag',
     empty: 'mdi-flag-outline',
   },
-])
+]
 
 const rowSize = ref(10)
 
@@ -48,7 +48,7 @@ function compare(colorA: any, colorB: any) {
       <a-form-item label="Icon">
         <a-select v-model:value="formState.meta.icon" size="small" class="w-52">
           <!-- TODO: handle value -->
-          <a-select-option v-for="(icon, i) in iconList ?? []" :key="i" :value="icon">
+          <a-select-option v-for="(icon, i) of iconList" :key="i" :value="icon">
             <component
               :is="getMdiIcon(icon.full)"
               :style="{

From c828098442540e104623ce7766f47e69816455df Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 17:05:54 +0800
Subject: [PATCH 10/13] feat(gui-v2): color buttons

---
 .../smartsheet-column/RatingOptions.vue       | 48 +++++++++++--------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
index 483fbd8962..2569863fd9 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useColumnCreateStoreOrThrow } from '#imports'
-import { getMdiIcon, enumColor } from '@/utils'
+import { enumColor, getMdiIcon } from '@/utils'
 
 const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
 
@@ -32,6 +32,8 @@ const rowSize = ref(10)
 
 const advanced = ref(true)
 
+const picked = ref(enumColor.light[0])
+
 const colors = ref(['#fcb401', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208', '#777'])
 
 function compare(colorA: any, colorB: any) {
@@ -40,6 +42,10 @@ function compare(colorA: any, colorB: any) {
   }
   return false
 }
+
+function select(color: string) {
+  picked.value = color
+}
 </script>
 
 <template>
@@ -76,32 +82,36 @@ function compare(colorA: any, colorB: any) {
       </a-form-item>
     </a-col>
   </a-row>
-  <!-- TODO: add color picker -->
   <a-row>
-    <div class="color-picker">
-      <div v-for="colId in Math.ceil(colors.length / rowSize)" :key="colId" class="color-picker-row">
-        <button
+    <div class="flex self-center justify-center flex-col pa-[10px]">
+      <div v-for="colId in Math.ceil(colors.length / rowSize)" :key="colId" class="flex row">
+        <div
           v-for="(color, i) in colors.slice((colId - 1) * rowSize, colId * rowSize)"
           :key="`color-${colId}-${i}`"
-          class="color-selector"
+          class="color-selector h-[32px] w-[32px] rounded-[5px] my-[10px] mx-[5px] cursor-pointer relative"
           :class="compare(picked, color) ? 'selected' : ''"
           :style="{ 'background-color': color }"
           @click="select(color)"
         >
           {{ compare(picked, color) ? '&#10003;' : '' }}
-        </button>
+        </div>
       </div>
-      <v-expansion-panels v-if="advanced">
-        <v-expansion-panel>
-          <v-expansion-panel-header>Advanced</v-expansion-panel-header>
-          <v-expansion-panel-content>
-            <v-container class="d-flex flex-column">
-              <v-btn class="primary lighten-2" @click="select(picked)"> Pick Color </v-btn>
-              <v-color-picker v-model="picked" class="align-self-center ma-2" canvas-height="100px" mode="hexa" />
-            </v-container>
-          </v-expansion-panel-content>
-        </v-expansion-panel>
-      </v-expansion-panels>
+      <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>
     </div>
   </a-row>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped lang="scss">
+.color-selector:hover {
+  @apply brightness-90;
+}
+
+.color-selector.selected {
+  @apply py-[5px] px-[10px] brightness-90;
+}
+</style>

From 9fd510ab78ba518ad223f6226138b5f4ba64cf76 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 18:02:43 +0800
Subject: [PATCH 11/13] feat(gui-v2): add @ckpack/vue-color

---
 packages/nc-gui-v2/package-lock.json | 37 ++++++++++++++++++++++++++++
 packages/nc-gui-v2/package.json      |  1 +
 2 files changed, 38 insertions(+)

diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 33942a1dde..c4bf6ed57a 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -5,6 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
+        "@ckpack/vue-color": "^1.2.0",
         "@vueuse/core": "^8.7.5",
         "@vueuse/integrations": "^8.9.1",
         "ant-design-vue": "^3.1.0-rc.6",
@@ -857,6 +858,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ckpack/vue-color": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.2.0.tgz",
+      "integrity": "sha512-c9X82nppYjSxjlITO6jdLLdt9HoyZzqEWpqDL2V6NJd859d6GCh/2AHeRXk+37uRJ1UdTkCuty93WOEqja8quw==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.0",
+        "lodash-es": "^4.17.21",
+        "material-colors": "^1.2.6"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@cloudflare/kv-asset-handler": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.2.0.tgz",
@@ -9249,6 +9266,11 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
@@ -15052,6 +15074,16 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@ckpack/vue-color": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.2.0.tgz",
+      "integrity": "sha512-c9X82nppYjSxjlITO6jdLLdt9HoyZzqEWpqDL2V6NJd859d6GCh/2AHeRXk+37uRJ1UdTkCuty93WOEqja8quw==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.4.0",
+        "lodash-es": "^4.17.21",
+        "material-colors": "^1.2.6"
+      }
+    },
     "@cloudflare/kv-asset-handler": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.2.0.tgz",
@@ -21297,6 +21329,11 @@
         }
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "mdast-util-from-markdown": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index d954b68033..2d692891f0 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -11,6 +11,7 @@
     "coverage": "vitest -c test/vite.config.ts run --coverage"
   },
   "dependencies": {
+    "@ckpack/vue-color": "^1.2.0",
     "@vueuse/core": "^8.7.5",
     "@vueuse/integrations": "^8.9.1",
     "ant-design-vue": "^3.1.0-rc.6",

From 911fc89c93e4647fc576f44856b68bb78ef5da4d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 18:04:14 +0800
Subject: [PATCH 12/13] feat(gui-v2): color picker + remove unused code

---
 .../smartsheet-column/RatingOptions.vue       | 46 +++++--------------
 1 file changed, 11 insertions(+), 35 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
index 2569863fd9..b54495321f 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Sketch } from '@ckpack/vue-color'
 import { useColumnCreateStoreOrThrow } from '#imports'
 import { enumColor, getMdiIcon } from '@/utils'
 
@@ -28,24 +29,9 @@ const iconList = [
   },
 ]
 
-const rowSize = ref(10)
-
 const advanced = ref(true)
 
-const picked = ref(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
-}
+const picked = ref(formState.value.meta.color || enumColor.light[0])
 </script>
 
 <template>
@@ -53,7 +39,7 @@ function select(color: string) {
     <a-col :span="12">
       <a-form-item label="Icon">
         <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">
             <component
               :is="getMdiIcon(icon.full)"
@@ -83,26 +69,16 @@ function select(color: string) {
     </a-col>
   </a-row>
   <a-row>
-    <div class="flex self-center justify-center flex-col pa-[10px]">
-      <div v-for="colId in Math.ceil(colors.length / rowSize)" :key="colId" class="flex row">
-        <div
-          v-for="(color, i) in colors.slice((colId - 1) * rowSize, colId * rowSize)"
-          :key="`color-${colId}-${i}`"
-          class="color-selector h-[32px] w-[32px] rounded-[5px] my-[10px] mx-[5px] cursor-pointer relative"
-          :class="compare(picked, color) ? 'selected' : ''"
-          :style="{ 'background-color': color }"
-          @click="select(color)"
-        >
-          {{ compare(picked, color) ? '&#10003;' : '' }}
-        </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-card class="w-full shadow-lg mt-2" body-style="padding: 0px">
+      <a-collapse v-model:activeKey="advanced" accordion ghost expand-icon-position="right">
+        <a-collapse-panel key="1" header="Advanced" class="">
+          <a-button class="!bg-primary text-white w-full" @click="formState.meta.color = picked.hex"> Pick Color </a-button>
+          <div class="px-7 py-3">
+            <Sketch v-model="picked" />
+          </div>
         </a-collapse-panel>
       </a-collapse>
-    </div>
+    </a-card>
   </a-row>
 </template>
 

From deab4f62dc459eb2d1b217109c749f07ece1a5f3 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 18:28:40 +0800
Subject: [PATCH 13/13] refactor(gui-v2): move to getMdiIcon

---
 .../nc-gui-v2/components/cell/Checkbox.vue    | 50 +------------------
 1 file changed, 2 insertions(+), 48 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Checkbox.vue b/packages/nc-gui-v2/components/cell/Checkbox.vue
index 5bb5d77197..ec6fb56386 100644
--- a/packages/nc-gui-v2/components/cell/Checkbox.vue
+++ b/packages/nc-gui-v2/components/cell/Checkbox.vue
@@ -1,20 +1,7 @@
 <script setup lang="ts">
 import { inject } from '#imports'
 import { ColumnInj, IsFormInj } from '~/context'
-import MdiCheckBold from '~icons/mdi/check-bold'
-import MdiCropSquare from '~icons/mdi/crop-square'
-import MdiCheckCircleOutline from '~icons/mdi/check-circle-outline'
-import MdiCheckboxBlankCircleOutline from '~icons/mdi/checkbox-blank-circle-outline'
-import MdiStar from '~icons/mdi/star'
-import MdiStarOutline from '~icons/mdi/star-outline'
-import MdiHeart from '~icons/mdi/heart'
-import MdiHeartOutline from '~icons/mdi/heart-outline'
-import MdiMoonFull from '~icons/mdi/moon-full'
-import MdiMoonNew from '~icons/mdi/moon-new'
-import MdiThumbUp from '~icons/mdi/thumb-up'
-import MdiThumbUpOutline from '~icons/mdi/thumb-up-outline'
-import MdiFlag from '~icons/mdi/flag'
-import MdiFlagOutline from '~icons/mdi/flag-outline'
+import { getMdiIcon } from '@/utils'
 
 interface Props {
   modelValue?: boolean | undefined | number
@@ -42,46 +29,13 @@ const checkboxMeta = $computed(() => {
     ...(column?.meta || {}),
   }
 })
-
-const icon = (type: string) => {
-  switch (type) {
-    case 'mdi-check-bold':
-      return MdiCheckBold
-    case 'mdi-crop-square':
-      return MdiCropSquare
-    case 'mdi-check-circle-outline':
-      return MdiCheckCircleOutline
-    case 'mdi-checkbox-blank-circle-outline':
-      return MdiCheckboxBlankCircleOutline
-    case 'mdi-star':
-      return MdiStar
-    case 'mdi-star-outline':
-      return MdiStarOutline
-    case 'mdi-heart':
-      return MdiHeart
-    case 'mdi-heart-outline':
-      return MdiHeartOutline
-    case 'mdi-moon-full':
-      return MdiMoonFull
-    case 'mdi-moon-new':
-      return MdiMoonNew
-    case 'mdi-thumb-up':
-      return MdiThumbUp
-    case 'mdi-thumb-up-outline':
-      return MdiThumbUpOutline
-    case 'mdi-flag':
-      return MdiFlag
-    case 'mdi-flag-outline':
-      return MdiFlagOutline
-  }
-}
 </script>
 
 <template>
   <div class="flex" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel }">
     <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="vModel = !vModel">
       <component
-        :is="icon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
+        :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
         :style="{
           color: checkboxMeta.color,
         }"