wip(gui-v2): color picker

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 -->
+  <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>