feat(gui-v2): ux improvements for select cells

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui-v2/components/cell/MultiSelect.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js'
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ActiveCellInj, ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | string[] | undefined
@@ -16,6 +16,8 @@ const { isMysql } = useProject()
 const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm', false)
 const editEnabled = inject(EditModeInj, ref(false))
+const active = inject(ActiveCellInj, ref(false))
+
 const selectedIds = ref<string[]>([])
 
 const options = computed(() => {
@@ -31,7 +33,7 @@ const options = computed(() => {
 
 const vModel = computed({
   get: () => selectedIds.value.map((el) => options.value.find((op: SelectOptionType) => op.id === el).title),
-  set: (val) => emit('update:modelValue', val.join(',')),
+  set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
 })
 
 const selectedTitles = computed(() =>
@@ -59,7 +61,7 @@ onMounted(() => {
 
 watch(
   () => modelValue,
-  (n, _o) => {
+  (_n, _o) => {
     selectedIds.value = selectedTitles.value.map((el) => {
       return options.value.find((op: SelectOptionType) => op.title === el).id
     })
@@ -87,7 +89,7 @@ watch(
         v-if="options.find((el: SelectOptionType) => el.title === val)"
         class="rounded-tag"
         :color="options.find((el: SelectOptionType) => el.title === val).color"
-        :closable="editEnabled"
+        :closable="active && (vModel.length > 1 || !column?.rqd)"
         @close="onClose"
       >
         <span class="text-slate-500">{{ val }}</span>

packages/nc-gui-v2/components/cell/SingleSelect.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js'
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ActiveCellInj, ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | undefined
@@ -11,11 +11,14 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const column = inject(ColumnInj)!
+const column = inject(ColumnInj)
+const isForm = inject<boolean>('isForm', false)
+const editEnabled = inject(EditModeInj, ref(false))
+const active = inject(ActiveCellInj, ref(false))
 
 const vModel = computed({
   get: () => modelValue,
-  set: (val) => emit('update:modelValue', val),
+  set: (val) => emit('update:modelValue', val || null),
 })
 
 const options = computed(() => {
@@ -31,7 +34,13 @@ const options = computed(() => {
 </script>
 
 <template>
-  <a-select v-model:value="vModel" class="w-full" :allow-clear="!column.rqd" placeholder="Select an option" :bordered="false">
+  <a-select
+    v-model:value="vModel"
+    class="w-full"
+    :allow-clear="!column.rqd && active"
+    placeholder="Select an option"
+    :bordered="false"
+  >
     <a-select-option v-for="op of options" :key="op.title">
       <a-tag class="rounded-tag" :color="op.color">
         <span class="text-slate-500">{{ op.title }}</span>
@@ -48,6 +57,9 @@ const options = computed(() => {
 :deep(.ant-tag) {
   @apply "rounded-tag";
 }
+:deep(.ant-select-clear) {
+  opacity: 1;
+}
 </style>
 <!--
 /**

packages/nc-gui-v2/components/smartsheet/Cell.vue

@@ -3,7 +3,7 @@ import { UITypes } from 'nocodb-sdk'
 import type { ColumnType } from 'nocodb-sdk'
 import { provide, toRef } from 'vue'
 import { computed, useColumn, useDebounceFn, useVModel } from '#imports'
-import { ColumnInj, EditModeInj } from '~/context'
+import { ActiveCellInj, ColumnInj, EditModeInj } from '~/context'
 import { NavigateDir } from '~/lib'
 
 interface Props {
@@ -11,6 +11,7 @@ interface Props {
   modelValue: any
   editEnabled: boolean
   rowIndex: number
+  active?: boolean
 }
 
 const props = defineProps<Props>()
@@ -19,10 +20,14 @@ const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'update:editE
 
 const column = toRef(props, 'column')
 
+const active = toRef(props, 'active', false)
+
 provide(ColumnInj, column)
 
 provide(EditModeInj, useVModel(props, 'editEnabled', emit))
 
+provide(ActiveCellInj, active)
+
 let changed = $ref(false)
 
 const syncValue = useDebounceFn(function () {

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -350,6 +350,7 @@ const onNavigate = (dir: NavigateDir) => {
                     :column="columnObj"
                     :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
                     :row-index="rowIndex"
+                    :active="selected.col === colIndex && selected.row === rowIndex"
                     @update:edit-enabled="editEnabled = false"
                     @save="updateOrSaveRow(row, columnObj.title)"
                     @navigate="onNavigate"