Merge pull request #2986 from nocodb/feat/gui-v2-checkbox-options

feat(gui-v2): checkbox options

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>

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