feat: CustomSelectOptions error messages

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

packages/nc-gui/components/project/spreadsheet/components/editColumn/CustomSelectOptions.vue

@@ -1,7 +1,12 @@
 <template>
+  <v-form v-model="isValid">
     <v-container fluid class="wrapper">
       <draggable v-model="options" handle=".nc-child-draggable-icon">
-      <div v-for="(op,i) in options" :key="`${op.color}-${i}`" class="d-flex py-1">
+        <div
+          v-for="(op,i) in options"
+          :key="`${op.color}-${i}`"
+          class="d-flex py-1"
+        >
           <v-icon
             small
             class="nc-child-draggable-icon handle"
@@ -27,6 +32,11 @@
             </template>
             <color-picker v-model="op.color" @input="colorMenus[i] = false;" />
           </v-menu>
+          <div
+            class="input-wrapper"
+            @mouseover="disabledError = (op.id && isMigrated)"
+            @mouseleave="disabledError = false"
+          >
             <v-text-field
               v-model="op.title"
               :autofocus="true"
@@ -34,8 +44,10 @@
               :rules="[enumNotNull, enumNoDuplicate]"
               dense
               outlined
+              hide-details
               :disabled="op.id && isMigrated"
             />
+          </div>
           <v-icon class="ml-2" color="error lighten-2" size="13" @click="removeOption(op, i)">
             mdi-close
           </v-icon>
@@ -54,7 +66,14 @@
           Add option
         </v-btn>
       </draggable>
+      <div v-if="!isValid" class="pt-3 text-center caption error--text">
+        Migrated options can't have duplicates or null
+      </div>
+      <div v-if="disabledError" class="pt-3 text-center caption error--text">
+        Edits not allowed for migrated options
+      </div>
     </v-container>
+  </v-form>
 </template>
 
 <script>
@@ -72,7 +91,9 @@ export default {
   data: () => ({
     options: [],
     colorMenus: {},
-    colors: enumColor.light
+    colors: enumColor.light,
+    isValid: true,
+    disabledError: false
   }),
   computed: {
     alias() {
@@ -182,9 +203,8 @@ export default {
   cursor: pointer;
 }
 
-/deep/ .v-text-field__details {
-  position: absolute;
-  margin-top: 10px;
-  margin-left: 25px;
+.input-wrapper {
+  width: 100%;
+  height: auto;
 }
 </style>