From 3acc23bbce1ae3c40be6be7c6947eb6c046f17a4 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 19:43:29 +0800
Subject: [PATCH 1/2] feat(gui-v2): include SmartsheetColumnCheckboxOptions

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

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index bc88e39fbd..6f1362a539 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -90,6 +90,7 @@ watchEffect(() => {
       <SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" />
       <SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" />
       <SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" />
+      <SmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" />
 
       <div>
         <div

From 504d20cd3d01f294fcde3f8b32aa5e22b83c98be Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 19:43:40 +0800
Subject: [PATCH 2/2] feat(gui-v2): checkbox options

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

diff --git a/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
new file mode 100644
index 0000000000..dd1e2743ac
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { Sketch } from '@ckpack/vue-color'
+import { useColumnCreateStoreOrThrow } from '#imports'
+import { enumColor, getMdiIcon } from '@/utils'
+
+const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
+
+// cater existing v1 cases
+const iconList = [
+  {
+    checked: 'mdi-check-bold',
+    unchecked: 'mdi-crop-square',
+  },
+  {
+    checked: 'mdi-check-circle-outline',
+    unchecked: 'mdi-checkbox-blank-circle-outline',
+  },
+  {
+    checked: 'mdi-star',
+    unchecked: 'mdi-star-outline',
+  },
+  {
+    checked: 'mdi-heart',
+    unchecked: 'mdi-heart-outline',
+  },
+  {
+    checked: 'mdi-moon-full',
+    unchecked: 'mdi-moon-new',
+  },
+  {
+    checked: 'mdi-thumb-up',
+    unchecked: 'mdi-thumb-up-outline',
+  },
+  {
+    checked: 'mdi-flag',
+    unchecked: 'mdi-flag-outline',
+  },
+]
+
+const advanced = ref(true)
+
+const picked = ref(formState.value.meta.color || enumColor.light[0])
+
+// set default value
+formState.value.meta = {
+  icon: {
+    checked: 'mdi-check-bold',
+    unchecked: 'mdi-crop-square',
+  },
+  color: '#777',
+  ...formState.value.meta,
+}
+</script>
+
+<template>
+  <a-row>
+    <a-col :span="24">
+      <a-form-item label="Icon">
+        <a-select v-model:value="formState.meta.icon" size="small" class="w-52">
+          <!-- 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.checked)"
+              :style="{
+                color: formState.meta.color,
+              }"
+            />
+            {{ ' ' }}
+            <component
+              :is="getMdiIcon(icon.unchecked)"
+              :style="{
+                color: formState.meta.color,
+              }"
+            />
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </a-col>
+  </a-row>
+  <a-row>
+    <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>
+    </a-card>
+  </a-row>
+</template>
+
+<style scoped lang="scss">
+.color-selector:hover {
+  @apply brightness-90;
+}
+
+.color-selector.selected {
+  @apply py-[5px] px-[10px] brightness-90;
+}
+</style>