Nc fix(nc-gui): ui break on toggle between select based field type (#8001)

* fix(nc-gui): ui break on toggle field type

* chore(nc-gui): remove console

* chore(nc-gui): lint

packages/nc-gui/components/cell/Rating.vue

@@ -73,12 +73,12 @@ watch(rateDomRef, () => {
 <template>
   <a-rate
     ref="rateDomRef"
+    :key="ratingMeta.icon.full"
     v-model:value="vModel"
     :disabled="readOnly"
     :count="ratingMeta.max"
     :class="readOnly ? 'pointer-events-none' : ''"
     :style="`color: ${ratingMeta.color}; padding: ${isExpandedFormOpen ? '0px 8px' : '0px 2px'};`"
-    :key="ratingMeta.icon.full"
     @keydown="onKeyPress"
   >
     <template #character>

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

@@ -195,7 +195,8 @@ onUnmounted(() => {
       `nc-cell-${(column?.uidt || 'default').toLowerCase()}`,
       {
         'text-brand-500': isPrimary(column) && !props.virtual && !isForm && !isCalendar,
-        'nc-grid-numeric-cell-right': isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen && !isRating(column),
+        'nc-grid-numeric-cell-right':
+          isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen && !isRating(column),
         'h-10': !isEditColumnMenu && isForm && !isAttachment(column) && !isTextArea(column) && !isJSON(column) && !props.virtual,
         'nc-grid-numeric-cell-left': (isForm && isNumericField && isExpandedFormOpen) || isEditColumnMenu,
         '!min-h-30': isTextArea(column) && (isForm || isSurveyForm),

packages/nc-gui/components/smartsheet/Form.vue

@@ -786,7 +786,6 @@ useEventListener(
   document,
   'mousedown',
   (e: MouseEvent) => {
-    console.log('e.target', e.target)
     if (
       (draggableRef.value?.targetDomElement && draggableRef.value?.targetDomElement.contains(e.target)) ||
       (e.target as HTMLElement)?.closest(

packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue

@@ -12,8 +12,7 @@ const container = ref()
 
 const { isUIAllowed } = useRoles()
 
-const { selectedDate, formattedData, formattedSideBarData, calendarRange, updateRowProperty } =
-  useCalendarViewStoreOrThrow()
+const { selectedDate, formattedData, formattedSideBarData, calendarRange, updateRowProperty } = useCalendarViewStoreOrThrow()
 
 const fields = inject(FieldsInj, ref())
 

packages/nc-gui/components/smartsheet/column/SelectOptions.vue

@@ -277,7 +277,7 @@ const undoRemoveRenderedOption = (index: number) => {
 watch(vModel, (next) => {
   const cdfs = (next.cdf ?? '').toString().split(',')
 
-  const valuesMap = (next.colOptions.options ?? []).reduce((acc, c) => {
+  const valuesMap = (next.colOptions?.options ?? []).reduce((acc, c) => {
     acc[c.title.replace(/^'|'$/g, '')] = c
     return acc
   }, {})