fix: form view for select column

Re #2767

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

packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue

@@ -83,6 +83,7 @@
       v-else-if="isSet && (active || isForm) && !isLocked && !(isPublic && !isForm) && _isUIAllowed('tableRowUpdate')"
       v-model="localState"
       :column="column"
+      :is-form="isForm"
       v-on="parentListeners"
     />
     <set-list-cell v-else-if="isSet" v-model="localState" :column="column" v-on="parentListeners" />

packages/nc-gui/components/project/spreadsheet/components/editableCell/EnumListEditableCell.vue

@@ -1,47 +1,45 @@
 <template>
-  <v-select
+  <div>
-    v-model="localState"
+    <v-select
-    :items="enumValues"
+      v-model="localState"
-    :menu-props="{ bottom: true, offsetY: true }"
+      :items="enumValues"
-    item-value="title"
+      :menu-props="{ bottom: true, offsetY: true }"
-    solo
+      item-value="title"
-    dense
+      solo
-    flat
+      dense
-    hide-details
+      flat
-    class="mt-0"
+      hide-details
-    :clearable="!column.rqd"
+      :class="`mt-0 ${isForm ? 'form-select': ''}`"
-    v-on="parentListeners"
+      :clearable="!column.rqd"
-  >
+      v-on="parentListeners"
-    <template #selection="{ item }">
+    >
-      <div
+      <template #selection="{ item }">
-        class="d-100"
+        <div
-        :class="{
+          class="d-100"
-          'text-center': !isForm,
+          :class="{
-        }"
+            'text-center': !isForm,
-      >
+          }"
-        <v-chip small :color="item.color" class="ma-1">
+        >
+          <v-chip small :color="item.color" class="ma-1">
+            {{ item.title }}
+          </v-chip>
+        </div>
+      </template>
+      <template #item="{ item }">
+        <v-chip small :color="item.color">
           {{ item.title }}
         </v-chip>
-      </div>
+      </template>
-    </template>
+      <template #append>
-    <template #item="{ item }">
+        <v-icon small class="mt-1"> mdi-menu-down </v-icon>
-      <v-chip small :color="item.color">
+      </template>
-        {{ item.title }}
+    </v-select>
-      </v-chip>
+  </div>
-    </template>
-    <template #append>
-      <v-icon small class="mt-1"> mdi-menu-down </v-icon>
-    </template>
-  </v-select>
 </template>
 
 <script>
-import colors from '@/mixins/colors';
-
 export default {
   name: 'EnumListEditableCell',
-  mixins: [colors],
-
   props: {
     value: String,
     column: Object,
@@ -103,6 +101,14 @@ export default {
       font-size: 13px !important;
     }
   }
+  .form-select {
+    .v-select__selections {
+      border: 1px solid rgba(127,130,139,0.2);
+    }
+    input {
+      z-index: -1;
+    }
+  }
 }
 </style>
 <!--

packages/nc-gui/components/project/spreadsheet/components/editableCell/SetListEditableCell.vue

@@ -12,7 +12,7 @@
       solo
       hide-details
       deletable-chips
-      class="text-center mt-0"
+      :class="`text-center mt-0 ${isForm ? 'form-select': ''}`"
     >
       <template #selection="data">
         <v-chip
@@ -47,6 +47,7 @@ export default {
   props: {
     value: String,
     column: Object,
+    isForm: Boolean,
   },
   computed: {
     localState: {
@@ -109,6 +110,14 @@ export default {
     font-size: 12px !important;
     color: gray !important;
   }
+  .form-select {
+    .v-select__selections {
+      border: 1px solid rgba(127,130,139,0.2);
+    }
+    input {
+      z-index: -1;
+    }
+  }
 }
 
 </style>