chore(gui-v2): fix eslint issues

# What's changed?

* transform some components to script setup
* fix linting issues

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

@@ -66,7 +66,7 @@ const submitDuration = () => {
       @keypress="checkDurationFormat($event)"
       @keydown.enter="submitDuration"
     />
-    <div v-if="showWarningMessage == true" class="duration-warning">
+    <div v-if="showWarningMessage" class="duration-warning">
       <!-- TODO: i18n -->
       Please enter a number
     </div>

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

@@ -1,66 +1,47 @@
-<script>
-import MonacoJsonObjectEditor from '@/components/monaco/MonacoJsonObjectEditor'
-const editEnabled = inject < boolean > 'editEnabled'
+<script lang="ts" setup>
+import MonacoJsonObjectEditor from '@/components/monaco/Editor.vue'
+import { inject } from '#imports'
 
-export default {
-  name: 'JsonEditableCell',
-  components: { MonacoJsonObjectEditor },
-  props: {
-    value: [String, Object],
-    isForm: Boolean,
-  },
-  data: () => ({
-    localState: '',
-    expand: false,
-    isValid: true,
-    error: undefined,
-  }),
-  computed: {
-    parentListeners() {
-      const $listeners = {}
+interface Props {
+  modelValue: string | Record<string, any>
+  isForm: boolean
+}
 
-      if (this.$listeners.blur) {
-        $listeners.blur = this.$listeners.blur
-      }
-      if (this.$listeners.focus) {
-        $listeners.focus = this.$listeners.focus
-      }
+const props = defineProps<Props>()
 
-      return $listeners
-    },
-  },
-  watch: {
-    value(val) {
-      try {
-        this.localState = typeof val === 'string' ? JSON.parse(val) : val
-      } catch (e) {
-        // ignore parse error for invalid JSON
-      }
-    },
-    localState(val) {
-      if (this.isForm) {
-        this.$emit('input', JSON.stringify(val))
-      }
-    },
-  },
-  created() {
-    try {
-      this.localState = typeof this.value === 'string' ? JSON.parse(this.value) : this.value
-    } catch (e) {
-      // ignore parse error for invalid JSON
+const emits = defineEmits(['update:modelValue', 'cancel'])
+
+const editEnabled = inject('editEnabled')
+
+let expand = $ref(false)
+
+let isValid = $ref(true)
+
+let error = $ref()
+
+const localState = computed({
+  get: () => (typeof props.modelValue === 'string' ? JSON.parse(props.modelValue) : props.modelValue),
+  set: (val) => {
+    if (props.isForm) {
+      emits('update:modelValue', JSON.stringify(val))
     }
   },
-  mounted() {},
-  methods: {
-    save() {
-      this.expand = false
-      this.$emit('input', JSON.stringify(this.localState))
-    },
-    validate(n, e) {
-      this.isValid = n
-      this.error = e
-    },
-  },
+})
+
+function save() {
+  expand = false
+  emits('update:modelValue', JSON.stringify(props.modelValue))
+}
+
+function validate(n: boolean, e: any) {
+  isValid = n
+  error = e
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'JsonEditableCell',
 }
 </script>
 

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

@@ -1,17 +1,27 @@
 <script setup lang="ts">
 import { inject } from 'vue'
 
+interface Props {
+  modelValue: any
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits(['update:modelValue', 'save'])
+
+const vModel = useVModel(props, 'modelValue', emits)
+
 const editEnabled = inject<boolean>('editEnabled')
 </script>
 
 <template>
   <v-menu>
-    <template #activator="{ on }">
-      <input v-model="localState" class="value" v-on="on" />
+    <template #activator="{ props: menuProps }">
+      <input v-model="vModel" class="value" v-bind="menuProps.onClick" />
     </template>
     <div class="d-flex flex-column justify-center" @click.stop>
-      <v-time-picker v-model="localState" v-on="parentListeners" />
-      <v-btn small color="primary" @click="$emit('save')">
+      <v-time-picker v-model="vModel" />
+      <v-btn small color="primary" @click="emits('save')">
         <!-- Save -->
         {{ $t('general.save') }}
       </v-btn>

packages/nc-gui-v2/components/dlg/TableCreate.vue

@@ -1,34 +1,34 @@
 <script setup lang="ts">
-import { onMounted } from '@vue/runtime-core'
-import { useProject, useTableCreate, useTabs } from '#imports'
+import type { ComponentPublicInstance } from '@vue/runtime-core'
+import { onMounted, useProject, useTableCreate, useTabs } from '#imports'
 import { validateTableName } from '~/utils/validation'
 
-const { modelValue = false } = defineProps<{ modelValue?: boolean }>()
+interface Props {
+  modelValue?: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue', 'create'])
 
-const emit = defineEmits(['update:modelValue'])
+const dialogShow = useVModel(props, 'modelValue', emit)
 
 const idTypes = [
   { value: 'AI', text: 'Auto increment number' },
   { value: 'AG', text: 'Auto generated string' },
 ]
 
-const dialogShow = computed({
-  get() {
-    return modelValue
-  },
-  set(v) {
-    emit('update:modelValue', v)
-  },
-})
-
 const valid = ref(false)
 const isIdToggleAllowed = ref(false)
 const isAdvanceOptVisible = ref(false)
 
 const { addTab } = useTabs()
+
 const { loadTables } = useProject()
+
 const { table, createTable, generateUniqueTitle, tables, project } = useTableCreate(async (table) => {
   await loadTables()
+
   addTab({
     id: table.id as string,
     title: table.title,
@@ -49,12 +49,13 @@ const validateDuplicate = (v: string) => {
   return (tables?.value || []).every((t) => t.table_name.toLowerCase() !== (v || '').toLowerCase()) || 'Duplicate table name'
 }
 
-const inputEl = ref<any>()
+const inputEl = ref<ComponentPublicInstance>()
 
 onMounted(() => {
   generateUniqueTitle()
+
   nextTick(() => {
-    const el = inputEl?.value?.$el
+    const el = inputEl.value?.$el
     el?.querySelector('input')?.focus()
     el?.querySelector('input')?.select()
   })

packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { LinkToAnotherRecordType, RelationTypes, UITypes } from "nocodb-sdk";
+import type { LinkToAnotherRecordType } from 'nocodb-sdk'
+import { RelationTypes, UITypes } from 'nocodb-sdk'
 import { ColumnInj } from '~/context'
 import GenericIcon from '~icons/mdi/square-rounded'
 import HMIcon from '~icons/mdi/table-arrow-right'
@@ -13,7 +14,7 @@ const column = inject(ColumnInj)
 const icon = computed(() => {
   switch (column?.uidt) {
     case UITypes.LinkToAnotherRecord:
-      switch ((<LinkToAnotherRecordType>column?.colOptions)?.type) {
+      switch ((column?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
           return MMIcon
         case RelationTypes.HAS_MANY:

packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue

@@ -1,32 +1,60 @@
-<script>
+<script lang="ts" setup>
+import { useToast } from 'vue-toastification'
+
+interface Props {
+  modelValue?: LockType
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits(['update:modelValue'])
+
+enum LockType {
+  Personal = 'personal',
+  Locked = 'locked',
+  Collaborative = 'collaborative',
+}
+
+const vModel = useVModel(props, 'modelValue', emits)
+
+const { $e } = useNuxtApp()
+
+const toast = useToast()
+
+function changeLockType(type: LockType) {
+  $e('a:grid:lockmenu', { lockType: type })
+
+  if (type === 'personal') {
+    return toast.info('Coming soon', { timeout: 3000 })
+  }
+
+  vModel.value = type
+
+  toast.success(`Successfully Switched to ${type} view`, { timeout: 3000 })
+}
+</script>
+
+<script lang="ts">
 export default {
   name: 'LockMenu',
-  props: ['value'],
-  data: () => ({}),
-  methods: {
-    changeLockType(type) {
-      this.$e('a:grid:lockmenu', { lockType: type })
-      if (type === 'personal') {
-        return this.$toast.info('Coming soon').goAway(3000)
-      }
-      this.$emit('input', type)
-      this.$toast.success(`Successfully Switched to ${type} view`).goAway(3000)
-    },
-  },
 }
 </script>
 
 <template>
   <v-menu offset-y max-width="350">
-    <template #activator="{ on }">
-      <v-icon v-if="value === 'locked'" small class="mx-1 nc-view-lock-menu" v-on="on"> mdi-lock-outline </v-icon>
-      <v-icon v-else-if="value === 'personal'" small class="mx-1 nc-view-lock-menu" v-on="on"> mdi-account </v-icon>
-      <v-icon v-else small class="mx-1 nc-view-lock-menu" v-on="on"> mdi-account-group-outline </v-icon>
+    <template #activator="{ props: menuProps }">
+      <v-icon v-if="vModel === LockType.Locked" small class="mx-1 nc-view-lock-menu" v-bind="menuProps.onClick">
+        mdi-lock-outline
+      </v-icon>
+      <v-icon v-else-if="vModel === LockType.Personal" small class="mx-1 nc-view-lock-menu" v-bind="menuProps.onClick">
+        mdi-account
+      </v-icon>
+      <v-icon v-else small class="mx-1 nc-view-lock-menu" v-bind="menuProps.onClick"> mdi-account-group-outline </v-icon>
     </template>
     <v-list maxc-width="350">
-      <v-list-item two-line class="pb-4" @click="changeLockType('collaborative')">
+      <v-list-item two-line class="pb-4" @click="changeLockType(LockType.Collaborative)">
         <v-list-item-icon class="mr-1 align-self-center">
-          <v-icon v-if="!value || value === 'collaborative'" small> mdi-check-bold </v-icon>
+          <v-icon v-if="!vModel || vModel === LockType.Collaborative" small> mdi-check-bold </v-icon>
         </v-list-item-icon>
         <v-list-item-content class="pb-1">
           <v-list-item-title>
@@ -39,9 +67,9 @@ export default {
           </v-list-item-subtitle>
         </v-list-item-content>
       </v-list-item>
-      <v-list-item two-line class="pb-4" @click="changeLockType('locked')">
+      <v-list-item two-line class="pb-4" @click="changeLockType(LockType.Locked)">
         <v-list-item-icon class="mr-1 align-self-center">
-          <v-icon v-if="value === 'locked'" small> mdi-check-bold </v-icon>
+          <v-icon v-if="vModel === LockType.Locked" small> mdi-check-bold </v-icon>
         </v-list-item-icon>
 
         <v-list-item-content class="pb-1">
@@ -56,9 +84,9 @@ export default {
           <span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Locked view.</span>
         </v-list-item-content>
       </v-list-item>
-      <v-list-item three-line @click="changeLockType('personal')">
+      <v-list-item three-line @click="changeLockType(LockType.Personal)">
         <v-list-item-icon class="mr-1 align-self-center">
-          <v-icon v-if="value === 'personal'" small> mdi-check-bold </v-icon>
+          <v-icon v-if="vModel === LockType.Personal" small> mdi-check-bold </v-icon>
         </v-list-item-icon>
 
         <v-list-item-content>

packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue

@@ -13,7 +13,6 @@ export default {
   name: 'ExportImport',
   components: {
     WebhookSlider,
-    WebhookModal,
     ColumnMappingModal,
     DropOrSelectFileModal,
   },
@@ -26,6 +25,7 @@ export default {
     isView: Boolean,
     reqPayload: Object,
   },
+  emits: ['reload', 'showAdditionalFeatOverlay'],
   data() {
     return {
       importModal: false,
@@ -206,19 +206,19 @@ export default {
                 const v = this.meta && this.meta.columns.find((c) => c.title === col.destCn)
                 let input = row[col.sourceCn]
                 // parse potential boolean values
-                if (v.uidt == UITypes.Checkbox) {
+                if (v.uidt === UITypes.Checkbox) {
                   input = input.replace(/["']/g, '').toLowerCase().trim()
-                  if (input == 'false' || input == 'no' || input == 'n') {
+                  if (input === 'false' || input === 'no' || input === 'n') {
                     input = '0'
-                  } else if (input == 'true' || input == 'yes' || input == 'y') {
+                  } else if (input === 'true' || input === 'yes' || input === 'y') {
                     input = '1'
                   }
                 } else if (v.uidt === UITypes.Number) {
-                  if (input == '') {
+                  if (input === '') {
                     input = null
                   }
                 } else if (v.uidt === UITypes.SingleSelect || v.uidt === UITypes.MultiSelect) {
-                  if (input == '') {
+                  if (input === '') {
                     input = null
                   }
                 }

packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue

@@ -62,7 +62,7 @@ watch(
             class="caption nc-sort-field-select"
             :columns="columns"
             @click.stop
-            @update:modelValue="saveOrUpdate(sort, i)"
+            @update:model-value="saveOrUpdate(sort, i)"
           />
           <v-select
             v-model="sort.direction"
@@ -73,7 +73,7 @@ watch(
             variant="solo"
             hide-details
             @click.stop
-            @update:modelValue="saveOrUpdate(sort, i)"
+            @update:model-value="saveOrUpdate(sort, i)"
           />
           <!--            <template #item="{ item }"> -->
           <!--              <span class="caption font-weight-regular">{{ item.text }}</span> -->

packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue

@@ -36,6 +36,7 @@ export default {
     type: String,
     password: String,
   },
+  emits: ['input', 'edit', 'delete', 'unlink', 'newRecord'],
   data: () => ({
     RelationTypes,
     data: null,
@@ -121,7 +122,7 @@ export default {
         small
         class="caption"
         color="primary"
-        @click="$emit('new-record')"
+        @click="$emit('newRecord')"
       >
         <v-icon small> mdi-link </v-icon>&nbsp; Link to '{{ meta.title }}'
       </v-btn>
@@ -129,7 +130,7 @@ export default {
     <v-card-text>
       <div class="items-container pt-2 mb-n4" :class="{ 'mx-n2': isForm }">
         <div v-if="!readOnly && (isPublic || _isUIAllowed('xcDatatableEditable'))" class="text-right mb-2 mt-n2 mx-2">
-          <v-btn v-if="isForm" x-small class="caption" color="primary" outlined @click="$emit('new-record')">
+          <v-btn v-if="isForm" x-small class="caption" color="primary" outlined @click="$emit('newRecord')">
             <v-icon x-small> mdi-link </v-icon>&nbsp; Link to '{{ meta.title }}'
           </v-btn>
         </div>

packages/nc-gui-v2/components/virtual-cell/components/ListChildItemsModal.vue

@@ -1,5 +1,5 @@
 <script>
-import ListChildItems from '~/components/project/spreadsheet/components/virtualCell/components/ListChildItems'
+import ListChildItems from './ListChildItems.vue'
 
 export default {
   name: 'ListChildItemsModal',
@@ -32,6 +32,7 @@ export default {
     rowId: [String, Number],
     column: Object,
   },
+  emits: ['input'],
   data: () => ({
     data: null,
     page: 1,
@@ -50,7 +51,7 @@ export default {
   methods: {
     async loadData() {
       if (this.$refs && this.$refs.child) {
-        this.$refs.child.loadData()
+        await this.$refs.child.loadData()
       }
     },
   },
@@ -79,7 +80,6 @@ export default {
       :read-only="readOnly"
       :is-public="isPublic"
       :column="column"
-      v-on="$listeners"
     />
   </v-dialog>
 </template>

packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue

@@ -32,6 +32,7 @@ export default {
     column: Object,
     rowId: [Number, String],
   },
+  emits: ['input', 'add', 'addNewRecord'],
   data: () => ({
     data: null,
     page: 1,
@@ -127,7 +128,7 @@ export default {
         <v-spacer />
 
         <v-icon small class="mr-1" @click="loadData()"> mdi-reload </v-icon>
-        <v-btn v-if="!isPublic" small class="caption mr-2" color="primary" @click="$emit('add-new-record')">
+        <v-btn v-if="!isPublic" small class="caption mr-2" color="primary" @click="$emit('addNewRecord')">
           <v-icon small> mdi-plus </v-icon>&nbsp; New Record
         </v-btn>
       </v-card-title>

packages/nc-gui-v2/composables/useViewCreate.ts

@@ -3,7 +3,7 @@ import { ViewTypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useToast } from 'vue-toastification'
 import { useNuxtApp } from '#app'
-import useMetas from '~/composables/useMetas'
+// import useMetas from '~/composables/useMetas'
 
 export default (meta: Ref<TableType>, onViewCreate?: (viewMeta: any) => void) => {
   const view = reactive<{ title: string; type?: ViewTypes }>({
@@ -14,7 +14,8 @@ export default (meta: Ref<TableType>, onViewCreate?: (viewMeta: any) => void) =>
 
   const { $api } = useNuxtApp()
   const toast = useToast()
-  const { metas } = useMetas()
+  // unused
+  // const { metas } = useMetas()
 
   const createView = async (viewType: ViewTypes, selectedViewId = null) => {
     loading.value = true
@@ -53,7 +54,7 @@ export default (meta: Ref<TableType>, onViewCreate?: (viewMeta: any) => void) =>
       }
       toast.success('View created successfully')
       onViewCreate?.(data)
-    } catch (e) {
+    } catch (e: any) {
       toast.error(e.message)
     }
 

packages/nc-gui-v2/plugins/i18n.ts

@@ -1,10 +1,10 @@
 import { defineNuxtPlugin } from 'nuxt/app'
 import { createI18n } from 'vue-i18n'
 
-import type en from '~/lang/en.json'
+// import type en from '~/lang/en.json'
 
-// Type-define 'en' as the master schema for the resource
-type MessageSchema = typeof en
+// todo: Type-define 'en' as the master schema for the resource
+// type MessageSchema = typeof en
 
 export const createI18nPlugin = async () =>
   createI18n({