chore(nc-gui): lint

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onUnmounted } from '@vue/runtime-core'
 import tinycolor from 'tinycolor2'
-import { CheckboxGroup, Checkbox, RadioGroup, Radio } from 'ant-design-vue'
+import { Checkbox, CheckboxGroup, Radio, RadioGroup } from 'ant-design-vue'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { UserFieldRecordType } from 'nocodb-sdk'
 import type { FormFieldsLimitOptionsType } from '~/lib'
@@ -333,8 +333,8 @@ const filterOption = (input: string, option: any) => {
       >
         <template v-for="op of options" :key="op.id || op.email">
           <component
-            v-if="!op.deleted"
             :is="isMultiple ? Checkbox : Radio"
+            v-if="!op.deleted"
             :key="op.id || op.email"
             :value="op.id"
             :data-testid="`select-option-${column.title}-${location === 'filter' ? 'filter' : rowIndex}`"

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { VNodeRef } from '@vue/runtime-core'
 import Draggable from 'vuedraggable'
 import tinycolor from 'tinycolor2'
 import { Pane, Splitpanes } from 'splitpanes'
@@ -11,8 +10,8 @@ import {
   ViewTypes,
   getSystemColumns,
   isLinksOrLTAR,
-  isVirtualCol,
   isSelectTypeCol,
+  isVirtualCol,
 } from 'nocodb-sdk'
 import type { Permission } from '#imports'
 import {
@@ -815,6 +814,9 @@ useEventListener(
                       {
                         'hover:bg-gray-50': activeRow !== 'nc-form-heading' && isEditable,
                       },
+                      {
+                        'bg-gray-50': activeRow === 'nc-form-heading' && isEditable,
+                      },
                       {
                         '!hover:bg-white !ring-0 !cursor-auto': isLocked,
                       },
@@ -862,6 +864,9 @@ useEventListener(
                       {
                         'hover:bg-gray-50': activeRow !== 'nc-form-sub-heading' && isEditable,
                       },
+                      {
+                        'bg-gray-50': activeRow === 'nc-form-sub-heading' && isEditable,
+                      },
                       {
                         '!hover:bg-white !ring-0 !cursor-auto': isLocked,
                       },
@@ -1144,9 +1149,9 @@ useEventListener(
                             <div class="text-gray-500">{{ $t('labels.limitOptionsSubtext') }}.</div>
                             <div v-if="element.meta.isLimitOption" class="mt-5 max-w-[80%]">
                               <LazySmartsheetFormLimitOptions
-                                v-model:modelValue="element.meta.limitOptions"
+                                v-model:model-value="element.meta.limitOptions"
                                 :column="element"
-                                @update:modelValue="updateColMeta(element)"
+                                @update:model-value="updateColMeta(element)"
                               ></LazySmartsheetFormLimitOptions>
                             </div>
                           </div>

packages/nc-gui/components/smartsheet/form/LimitOptions.vue

@@ -4,7 +4,7 @@ import tinycolor from 'tinycolor2'
 import type { ColumnType, SelectOptionType, SelectOptionsType, UserFieldRecordType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { FormFieldsLimitOptionsType } from '~/lib'
-import { iconMap, MetaInj } from '#imports'
+import { MetaInj, iconMap } from '#imports'
 
 const props = defineProps<{
   modelValue: FormFieldsLimitOptionsType[]
@@ -27,8 +27,6 @@ const searchQuery = ref('')
 
 const drag = ref(false)
 
-const { t } = useI18n()
-
 const vModel = computed({
   get: () => {
     let order = 1
@@ -51,12 +49,7 @@ const vModel = computed({
           email: user.email,
           display_name: user.display_name,
           order: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.order ?? c.order : order++,
-          show:
-            user.id && limitOptionsById[user.id]
-              ? limitOptionsById[user.id]?.show
-              : !(props.modelValue || []).length
-              ? true
-              : false,
+          show: user.id && limitOptionsById[user.id] ? limitOptionsById[user.id]?.show : !(props.modelValue || []).length,
         }))
         .sort((a, b) => a.order - b.order)
 
@@ -73,7 +66,7 @@ const vModel = computed({
           return {
             ...c,
             order: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.order ?? c.order : order++,
-            show: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.show : !(props.modelValue || []).length ? true : false,
+            show: c.id && limitOptionsById[c.id] ? limitOptionsById[c.id]?.show : !(props.modelValue || []).length,
           } as SelectOptionType & { show?: boolean }
         })
         .sort((a, b) => {
@@ -136,7 +129,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
 
   element.order = _nextOrder
 
-  vModel.value = vModel.value
+  vModel.value = [...vModel.value]
 }
 </script>
 
@@ -146,7 +139,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
       <a-input
         v-model:value="searchQuery"
         class="!h-9 !px-3 !py-1 !rounded-lg mb-2"
-        :placeholder="`Search option...`"
+        :placeholder="`${$t('placeholder.searchOptions')}...`"
         name="nc-form-field-limit-option-search-input"
         data-testid="nc-form-field-limit-option-search-input"
       >
@@ -195,7 +188,7 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
             @click="
               () => {
                 element.show = !element.show
-                vModel = vModel
+                vModel = [...vModel]
               }
             "
           >
@@ -268,7 +261,9 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
           </a-tag>
         </div>
       </template>
-      <template v-if="!vModel.length" #footer><div class="px-0.5 py-2 text-gray-500 text-center">No options found</div></template>
+      <template v-if="!vModel.length" #footer
+        ><div class="px-0.5 py-2 text-gray-500 text-center">{{ $t('title.noOptionsFound') }}</div></template
+      >
       <template
         v-else-if="
           vModel.length &&
@@ -281,13 +276,13 @@ async function onMove(_event: { moved: { newIndex: number; oldIndex: number; ele
         "
         #footer
       >
-        <div class="px-0.5 py-2 text-gray-500 text-center">No options found with title `{{ searchQuery }}`</div>
+        <div class="px-0.5 py-2 text-gray-500 text-center">{{ $t('title.noOptionsFound') }} with title `{{ searchQuery }}`</div>
       </template>
     </Draggable>
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .nc-form-scrollbar {
   @apply scrollbar scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent;
   &::-webkit-scrollbar-thumb:hover {

packages/nc-gui/lang/en.json

@@ -425,7 +425,9 @@
       "setNull": "Set NULL",
       "setDefault": "Set Default"
     },
-    "selectFieldsFromRightPannelToAddHere": "Select fields from right panel to add here"
+    "selectFieldsFromRightPannelToAddHere": "Select fields from right panel to add here",
+    "noOptionsFound": "No options found"
+
   },
   "labels": {
     "selectYear": "Select Year",
@@ -1005,7 +1007,8 @@
     "noTokenCreated": "No API Tokens created",
     "noTokenCreatedLabel": "Looks like you haven’t generated any API tokens yet.",
     "inviteYourTeam": "Invite your team",
-    "inviteYourTeamLabel": "Fast track your projects by collaborating on them with your team!"
+    "inviteYourTeamLabel": "Fast track your projects by collaborating on them with your team!",
+    "searchOptions": "Search options"
   },
   "msg": {
     "clickToCopyFieldId": "Click to copy Field Id",