Merge pull request #4203 from nocodb/fix/type-issues

fix(nc-gui): type issues

packages/nc-gui/components/cell/attachment/Modal.vue

@@ -10,7 +10,7 @@ const {
   open,
   isLoading,
   isPublic,
-  isReadonly,
+  isReadonly: readOnly,
   visibleItems,
   modalVisible,
   column,
@@ -29,7 +29,7 @@ const dropZoneRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
+const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, readOnly)
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
@@ -68,7 +68,7 @@ function onClick(item: Record<string, any>) {
     <template #title>
       <div class="flex gap-4">
         <div
-          v-if="isSharedForm || (!isReadonly && isUIAllowed('tableAttachment') && !isPublic && !isLocked)"
+          v-if="isSharedForm || (!readOnly && isUIAllowed('tableAttachment') && !isPublic && !isLocked)"
           class="nc-attach-file group"
           @click="open"
         >
@@ -77,15 +77,15 @@ function onClick(item: Record<string, any>) {
         </div>
 
         <div class="flex items-center gap-2">
-          <div v-if="isReadonly" class="text-gray-400">[Readonly]</div>
+          <div v-if="readOnly" class="text-gray-400">[Readonly]</div>
           Viewing Attachments of
-          <div class="font-semibold underline">{{ column.title }}</div>
+          <div class="font-semibold underline">{{ column?.title }}</div>
         </div>
       </div>
     </template>
 
     <div ref="dropZoneRef">
-      <template v-if="isSharedForm || (!isReadonly && !dragging)">
+      <template v-if="isSharedForm || (!readOnly && !dragging)">
         <general-overlay
           v-model="isOverDropZone"
           inline
@@ -99,10 +99,10 @@ function onClick(item: Record<string, any>) {
       <div ref="sortableRef" :class="{ dragging }" class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 relative p-6">
         <div v-for="(item, i) of visibleItems" :key="`${item.title}-${i}`" class="flex flex-col gap-1">
           <a-card class="nc-attachment-item group">
-            <a-tooltip v-if="!isReadonly">
+            <a-tooltip v-if="!readOnly">
               <template #title> Remove File </template>
               <MdiCloseCircle
-                v-if="isSharedForm || (isUIAllowed('tableAttachment') && !isPublicGrid && !isLocked)"
+                v-if="isSharedForm || (isUIAllowed('tableAttachment') && !isPublic && !isLocked)"
                 class="nc-attachment-remove"
                 @click.stop="removeFile(i)"
               />

packages/nc-gui/components/erd/ConfigPanel.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Panel } from '@vue-flow/additional-components'
+import { Panel, PanelPosition } from '@vue-flow/additional-components'
 import type { ERDConfig } from './utils'
 import { ref, useGlobal, useVModel } from '#imports'
 
@@ -15,7 +15,10 @@ const showAdvancedOptions = ref(false)
 </script>
 
 <template>
-  <Panel class="flex flex-col bg-white border-1 rounded border-gray-200 z-50 px-3 py-1 nc-erd-context-menu" position="top-right">
+  <Panel
+    class="flex flex-col bg-white border-1 rounded border-gray-200 z-50 px-3 py-1 nc-erd-context-menu"
+    :position="PanelPosition.TopRight"
+  >
     <div class="flex items-center gap-2">
       <a-checkbox v-model:checked="config.showAllColumns" v-e="['c:erd:showAllColumns']" class="nc-erd-showColumns-checkbox" />
       <span class="select-none nc-erd-showColumns-label" style="font-size: 0.65rem" @dblclick="showAdvancedOptions = true">

packages/nc-gui/components/erd/Flow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Background, Controls, Panel } from '@vue-flow/additional-components'
+import { Background, Controls, Panel, PanelPosition } from '@vue-flow/additional-components'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import type { TableType } from 'nocodb-sdk'
 import type { ERDConfig } from './utils'
@@ -65,7 +65,7 @@ onScopeDispose($destroy)
 
 <template>
   <VueFlow v-model="elements">
-    <Controls class="rounded" position="bottom-left" :show-fit-view="false" :show-interactive="false" />
+    <Controls class="rounded" :position="PanelPosition.BottomLeft" :show-fit-view="false" :show-interactive="false" />
 
     <template #node-custom="{ data, dragging }">
       <ErdTableNode :data="data" :dragging="dragging" :show-skeleton="showSkeleton" />
@@ -80,7 +80,7 @@ onScopeDispose($destroy)
     <Transition name="layout">
       <Panel
         v-if="showSkeleton && config.showAllColumns"
-        position="bottom-center"
+        :position="PanelPosition.BottomCenter"
         class="color-transition z-5 cursor-pointer rounded shadow-sm text-slate-400 font-semibold px-4 py-2 bg-slate-100/50 hover:(text-slate-900 ring ring-accent ring-opacity-100 bg-slate-100/90)"
         @click="zoomIn"
       >

packages/nc-gui/components/erd/HistogramPanel.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { Panel } from '@vue-flow/additional-components'
+import { Panel, PanelPosition } from '@vue-flow/additional-components'
 </script>
 
 <template>
-  <Panel class="text-xs bg-white border-1 rounded border-gray-200 z-50 nc-erd-histogram" position="bottom-right">
+  <Panel class="text-xs bg-white border-1 rounded border-gray-200 z-50 nc-erd-histogram" :position="PanelPosition.BottomRight">
     <div class="flex flex-col divide-y-1">
       <div class="flex items-center gap-1 p-2">
         <MdiTableLarge class="text-primary" />

packages/nc-gui/components/erd/RelationEdge.vue

@@ -36,7 +36,7 @@ const edgePath = computed(() => {
     const { sourceX, sourceY, targetX, targetY } = props
     const radiusX = (sourceX - targetX) * 0.6
     const radiusY = 50
-    return [`M ${sourceX} ${sourceY} A ${radiusX} ${radiusY} 0 1 0 ${targetX} ${targetY}`]
+    return [`M ${sourceX} ${sourceY} A ${radiusX} ${radiusY} 0 1 0 ${targetX} ${targetY}`, NaN, NaN] as const
   }
 
   return getBezierPath({ ...props })
@@ -94,7 +94,7 @@ export default {
 
   <Transition name="layout">
     <EdgeText
-      v-if="data.label?.length > 0"
+      v-if="data.label?.length && data.label.length > 0"
       :key="`edge-text-${id}.${showSkeleton}`"
       class="color-transition"
       :class="[

packages/nc-gui/components/erd/TableNode.vue

@@ -6,7 +6,7 @@ import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { NodeData } from './utils'
 import { MetaInj, computed, provide, refAutoReset, toRef, useNuxtApp, watch } from '#imports'
 
-interface Props extends NodeProps<NodeData> {
+interface Props extends Pick<NodeProps<NodeData>, 'data' | 'dragging'> {
   data: NodeData
   showSkeleton: boolean
   dragging: boolean

packages/nc-gui/components/general/Overlay.vue

@@ -11,7 +11,7 @@ interface Props {
   target?: TeleportProps['to']
   teleportDisabled?: TeleportProps['disabled']
   transition?: boolean
-  zIndex?: string | number
+  zIndex?: number
 }
 
 interface Emits {

packages/nc-gui/components/general/language/Menu.vue

@@ -9,7 +9,7 @@ const { lang: currentLang } = useGlobal()
 
 const { locale } = useI18n()
 
-const languages = $computed(() => Object.entries(Language).sort())
+const languages = $computed(() => Object.entries(Language).sort() as [keyof typeof Language, Language][])
 
 const isRtlLang = $computed(() => ['fa', 'ar'].includes(currentLang.value))
 

packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue

@@ -224,11 +224,11 @@ function openDeleteDialog(view: ViewType) {
       :key="view.id"
       :view="view"
       :on-validate="validate"
-      class="transition-all ease-in duration-300"
+      class="nc-view-item transition-all ease-in duration-300"
       :class="{
         'bg-gray-100': isMarked === view.id,
-        'active': activeView.id === view.id,
-        [`nc-view-item nc-${viewTypeAlias[view.type] || view.type}-view-item`]: true,
+        'active': activeView?.id === view.id,
+        [`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true,
       }"
       @change-view="changeView"
       @open-modal="$emit('openModal', $event)"

packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue

@@ -3,6 +3,7 @@ import type { KanbanType, ViewType, ViewTypes } from 'nocodb-sdk'
 import type { WritableComputedRef } from '@vue/reactivity'
 import {
   IsLockedInj,
+  computed,
   inject,
   message,
   onKeyStroke,
@@ -47,6 +48,8 @@ let isStopped = $ref(false)
 /** Original view title when editing the view name */
 let originalTitle = $ref<string | undefined>()
 
+const viewType = computed(() => vModel.value.type as number)
+
 /** Debounce click handler, so we can potentially enable editing view name {@see onDblClick} */
 const onClick = useDebounceFn(() => {
   if (isEditing || isStopped) return
@@ -175,9 +178,9 @@ function onStopEdit() {
         />
 
         <component
-          :is="viewIcons[vModel.type].icon"
+          :is="viewIcons[viewType].icon"
           class="nc-view-icon group-hover:hidden"
-          :style="{ color: viewIcons[vModel.type].color }"
+          :style="{ color: viewIcons[viewType].color }"
         />
       </div>
 

packages/nc-gui/composables/useSharedFormViewStore.ts

@@ -45,7 +45,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
 
   const { t } = useI18n()
 
-  const formState = ref({})
+  const formState = ref<Record<string, any>>({})
 
   const { state: additionalState } = useProvideSmartsheetRowStore(
     meta as Ref<TableType>,

packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@@ -224,7 +224,7 @@ onMounted(() => {
       <Transition :name="`slide-${transitionName}`" :duration="transitionDuration" mode="out-in">
         <div
           ref="el"
-          :key="field.title"
+          :key="field?.title"
           class="color-transition h-full flex flex-col mt-6 gap-4 w-full max-w-[max(33%,600px)] m-auto"
         >
           <div v-if="field && !submitted" class="flex flex-col gap-2">
@@ -239,16 +239,18 @@ onMounted(() => {
               <LazySmartsheetHeaderCell
                 v-else
                 :class="field.uidt === UITypes.Checkbox ? 'nc-form-column-label__checkbox' : ''"
-                :column="{ ...field, title: field.label || field.title }"
+                :column="{ meta: {}, ...field, title: field.label || field.title }"
                 :required="isRequired(field, field.required)"
                 :hide-menu="true"
               />
             </div>
 
-            <div>
+            <div v-if="field.title">
               <LazySmartsheetVirtualCell
                 v-if="isVirtualCol(field)"
+                v-model="formState[field.title]"
                 class="mt-0 nc-input"
+                :row="{ row: {}, oldRow: {}, rowMeta: {} }"
                 :data-cy="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`"
                 :column="field"
               />
@@ -316,7 +318,7 @@ onMounted(() => {
                         ? 'transform translate-y-[2px] translate-x-[2px] after:(!ring !ring-accent !ring-opacity-100)'
                         : '',
                     ]"
-                    @click="goNext"
+                    @click="goNext()"
                   >
                     <Transition name="fade">
                       <span v-if="!v$.localState[field.title]?.$error" class="uppercase text-white">Ok</span>
@@ -396,7 +398,7 @@ onMounted(() => {
               "
               class="p-0.5 flex items-center group color-transition"
               data-cy="nc-survey-form__icon-prev"
-              @click="goPrevious"
+              @click="goPrevious()"
             >
               <MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
             </button>
@@ -415,7 +417,7 @@ onMounted(() => {
               "
               class="p-0.5 flex items-center group color-transition"
               data-cy="nc-survey-form__icon-next"
-              @click="goNext"
+              @click="goNext()"
             >
               <MdiChevronRight
                 :class="[isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent']"

packages/nc-gui/pages/index/index/user.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { RuleObject } from 'ant-design-vue/es/form'
 import { message, navigateTo, reactive, ref, useApi, useGlobal, useI18n, useRouter } from '#imports'
 
 const router = useRouter()
@@ -17,7 +18,7 @@ const form = reactive({
   passwordRepeat: '',
 })
 
-const formRules = {
+const formRules: Record<string, RuleObject[]> = {
   currentPassword: [
     // Current password is required
     { required: true, message: t('msg.error.signUpRules.passwdRequired') },
@@ -34,7 +35,7 @@ const formRules = {
     {
       validator: (_: unknown, _v: string) => {
         return new Promise((resolve, reject) => {
-          if (form.password === form.passwordRepeat) return resolve(true)
+          if (form.password === form.passwordRepeat) return resolve()
           reject(new Error(t('msg.error.signUpRules.passwdMismatch')))
         })
       },

packages/nc-gui/utils/viewUtils.ts

@@ -17,7 +17,7 @@ export const viewIcons: Record<number | string, { icon: any; color: string }> =
   view: { icon: MdiEyeIcon, color: 'blue' },
 }
 
-export const viewTypeAlias = {
+export const viewTypeAlias: Record<number, string> = {
   [ViewTypes.GRID]: 'grid',
   [ViewTypes.FORM]: 'form',
   [ViewTypes.GALLERY]: 'gallery',