From c9b18ee3ac75e46fb7166e62c40027278c027a09 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 11 Oct 2022 10:58:25 +0300
Subject: [PATCH 1/4] fix: type errors for select cells

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue  | 13 +++++++------
 packages/nc-gui/components/cell/SingleSelect.vue |  6 +++---
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 09f3efd4d2..cb6bdc776e 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
+import { SelectOptionType } from 'nocodb-sdk'
 import type { SelectOptionsType } from 'nocodb-sdk'
 import {
   ActiveCellInj,
@@ -41,13 +42,13 @@ const isOpen = ref(false)
 
 const isKanban = inject(IsKanbanInj, ref(false))
 
-const options = computed<SelectOptionsType[]>(() => {
+const options = computed<SelectOptionType[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
-      ? (column.value.colOptions as any).options.filter((el: any) => el.title !== '') || []
+      ? (column.value.colOptions as SelectOptionsType).options.filter((el: SelectOptionType) => el.title !== '') || []
       : []
-    for (const op of opts.filter((el: any) => el.order === null)) {
-      op.title = op.title.replace(/^'/, '').replace(/'$/, '')
+    for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
+      op.title = op.title?.replace(/^'/, '').replace(/'$/, '')
     }
     return opts
   }
@@ -55,7 +56,7 @@ const options = computed<SelectOptionsType[]>(() => {
 })
 
 const vModel = computed({
-  get: () => selectedIds.value.map((el) => options.value.find((op) => op.id === el)?.title),
+  get: () => selectedIds.value.map((el) => options.value.find((op) => op.id === el)?.title) as string[],
   set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
 })
 
@@ -153,7 +154,7 @@ watch(isOpen, (n, _o) => {
         v-if="options.find((el) => el.title === val)"
         class="rounded-tag"
         :style="{ display: 'flex', alignItems: 'center' }"
-        :color="options.find((el) => el.title === val).color"
+        :color="(options.find((el) => el.title === val) as SelectOptionType).color"
         :closable="active && (vModel.length > 1 || !column?.rqd)"
         :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
         @close="onClose"
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 4cd20ec087..a8b9d41fbe 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
-import type { SelectOptionsType } from 'nocodb-sdk'
+import type { SelectOptionType } from 'nocodb-sdk'
 import { ActiveCellInj, ColumnInj, IsKanbanInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
 
 interface Props {
@@ -28,11 +28,11 @@ const vModel = computed({
   set: (val) => emit('update:modelValue', val || null),
 })
 
-const options = computed<SelectOptionsType[]>(() => {
+const options = computed<SelectOptionType[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
       ? // todo: fix colOptions type, options does not exist as a property
-        (column.value.colOptions as any).options.filter((el: SelectOptionsType) => el.title !== '') || []
+        (column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
       : []
     for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')

From 81715174e2dbdb2bb77e2a13a593ea61b3db0396 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 11 Oct 2022 11:17:48 +0300
Subject: [PATCH 2/4] feat: dynamic select chip font color based on readability

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue  | 13 +++++++++++--
 packages/nc-gui/components/cell/SingleSelect.vue |  7 ++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index cb6bdc776e..bc8c89bde9 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import { SelectOptionType } from 'nocodb-sdk'
 import type { SelectOptionsType } from 'nocodb-sdk'
@@ -145,7 +146,11 @@ watch(isOpen, (n, _o) => {
   >
     <a-select-option v-for="op of options" :key="op.id" :value="op.title" @click.stop>
       <a-tag class="rounded-tag" :color="op.color">
-        <span class="text-slate-500" :class="{ 'text-sm': isKanban }">{{ op.title }}</span>
+        <span
+          :style="{ color: tinycolor.mostReadable(op.color || '#ccc', ['#64748b', '#f0f0f0']).toHex8String() }"
+          :class="{ 'text-sm': isKanban }"
+          >{{ op.title }}</span
+        >
       </a-tag>
     </a-select-option>
 
@@ -159,7 +164,11 @@ watch(isOpen, (n, _o) => {
         :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
         @close="onClose"
       >
-        <span class="w-full text-slate-500" :class="{ 'text-sm': isKanban }">{{ val }}</span>
+        <span
+          :style="{ color: tinycolor.mostReadable((options.find((el) => el.title === val) as SelectOptionType).color || '#ccc', ['#64748b', '#f0f0f0']).toHex8String() }"
+          :class="{ 'text-sm': isKanban }"
+          >{{ val }}</span
+        >
       </a-tag>
     </template>
   </a-select>
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index a8b9d41fbe..f707277a28 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
 import { ActiveCellInj, ColumnInj, IsKanbanInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
@@ -82,7 +83,11 @@ watch(isOpen, (n, _o) => {
   >
     <a-select-option v-for="op of options" :key="op.title" :value="op.title" @click.stop>
       <a-tag class="rounded-tag" :color="op.color">
-        <span class="text-slate-500" :class="{ 'text-sm': isKanban }">{{ op.title }}</span>
+        <span
+          :style="{ color: tinycolor.mostReadable(op.color || '#ccc', ['#64748b', '#f0f0f0']).toHex8String() }"
+          :class="{ 'text-sm': isKanban }"
+          >{{ op.title }}</span
+        >
       </a-tag>
     </a-select-option>
   </a-select>

From 940478ae545bde375436a8757a673ac15aa34f04 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 11 Oct 2022 11:33:44 +0300
Subject: [PATCH 3/4] fix: PR requested changes

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue  | 8 +++++---
 packages/nc-gui/components/cell/SingleSelect.vue | 3 ++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index bc8c89bde9..aec566eca1 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -149,8 +149,9 @@ watch(isOpen, (n, _o) => {
         <span
           :style="{ color: tinycolor.mostReadable(op.color || '#ccc', ['#64748b', '#f0f0f0']).toHex8String() }"
           :class="{ 'text-sm': isKanban }"
-          >{{ op.title }}</span
         >
+          {{ op.title }}
+        </span>
       </a-tag>
     </a-select-option>
 
@@ -159,7 +160,7 @@ watch(isOpen, (n, _o) => {
         v-if="options.find((el) => el.title === val)"
         class="rounded-tag"
         :style="{ display: 'flex', alignItems: 'center' }"
-        :color="(options.find((el) => el.title === val) as SelectOptionType).color"
+        :color="options.find((el) => el.title === val)?.color"
         :closable="active && (vModel.length > 1 || !column?.rqd)"
         :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
         @close="onClose"
@@ -167,8 +168,9 @@ watch(isOpen, (n, _o) => {
         <span
           :style="{ color: tinycolor.mostReadable((options.find((el) => el.title === val) as SelectOptionType).color || '#ccc', ['#64748b', '#f0f0f0']).toHex8String() }"
           :class="{ 'text-sm': isKanban }"
-          >{{ val }}</span
         >
+          {{ val }}
+        </span>
       </a-tag>
     </template>
   </a-select>
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index f707277a28..aca6af09ee 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -86,8 +86,9 @@ watch(isOpen, (n, _o) => {
         <span
           :style="{ color: tinycolor.mostReadable(op.color || '#ccc', ['#64748b', '#f0f0f0']).toHex8String() }"
           :class="{ 'text-sm': isKanban }"
-          >{{ op.title }}</span
         >
+          {{ op.title }}
+        </span>
       </a-tag>
     </a-select-option>
   </a-select>

From 34779578fc14b9b4600d1ee6469c762e394ecf01 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 12 Oct 2022 01:29:25 +0300
Subject: [PATCH 4/4] fix: refine font colors for select options

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 22 +++++++++++++++----
 .../nc-gui/components/cell/SingleSelect.vue   |  7 +++++-
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index aec566eca1..9c832e9fd3 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -147,7 +147,12 @@ watch(isOpen, (n, _o) => {
     <a-select-option v-for="op of options" :key="op.id" :value="op.title" @click.stop>
       <a-tag class="rounded-tag" :color="op.color">
         <span
-          :style="{ color: tinycolor.mostReadable(op.color || '#ccc', ['#64748b', '#f0f0f0']).toHex8String() }"
+          :style="{
+            'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+              ? '#fff'
+              : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+            'font-size': '13px',
+          }"
           :class="{ 'text-sm': isKanban }"
         >
           {{ op.title }}
@@ -166,7 +171,17 @@ watch(isOpen, (n, _o) => {
         @close="onClose"
       >
         <span
-          :style="{ color: tinycolor.mostReadable((options.find((el) => el.title === val) as SelectOptionType).color || '#ccc', ['#64748b', '#f0f0f0']).toHex8String() }"
+          :style="{
+            'color': tinycolor.isReadable(options.find((el) => el.title === val)?.color || '#ccc', '#fff', {
+              level: 'AA',
+              size: 'large',
+            })
+              ? '#fff'
+              : tinycolor
+                  .mostReadable(options.find((el) => el.title === val)?.color || '#ccc', ['#0b1d05', '#fff'])
+                  .toHex8String(),
+            'font-size': '13px',
+          }"
           :class="{ 'text-sm': isKanban }"
         >
           {{ val }}
@@ -200,8 +215,7 @@ watch(isOpen, (n, _o) => {
   color: rgba(0, 0, 0, 0.45);
 }
 .rounded-tag {
-  padding: 0px 12px;
-  border-radius: 12px;
+  @apply py-0 px-[12px] rounded-[12px];
 }
 :deep(.ant-tag) {
   @apply "rounded-tag" my-[2px];
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index aca6af09ee..07a5e119a3 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -84,7 +84,12 @@ watch(isOpen, (n, _o) => {
     <a-select-option v-for="op of options" :key="op.title" :value="op.title" @click.stop>
       <a-tag class="rounded-tag" :color="op.color">
         <span
-          :style="{ color: tinycolor.mostReadable(op.color || '#ccc', ['#64748b', '#f0f0f0']).toHex8String() }"
+          :style="{
+            'color': tinycolor.isReadable(op.color || '#ccc', '#fff', { level: 'AA', size: 'large' })
+              ? '#fff'
+              : tinycolor.mostReadable(op.color || '#ccc', ['#0b1d05', '#fff']).toHex8String(),
+            'font-size': '13px',
+          }"
           :class="{ 'text-sm': isKanban }"
         >
           {{ op.title }}