chore(gui-v2): linting and other corrections

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components.d.ts

@@ -74,21 +74,14 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsChevronLeftRounded: typeof import('~icons/material-symbols/chevron-left-rounded')['default']
     MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
-    CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
-    CilFullscreenExit: typeof import('~icons/cil/fullscreen-exit')['default']
-    IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
-    IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']
-    MaterialSymbolsAttachFile: typeof import('~icons/material-symbols/attach-file')['default']
-    MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
     MaterialSymbolsMenu: typeof import('~icons/material-symbols/menu')['default']
     MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
+    MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
-    MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
-    MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
-    MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowExpandIcon: typeof import('~icons/mdi/arrow-expand-icon')['default']
+    MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
     MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']
@@ -103,10 +96,6 @@ declare module '@vue/runtime-core' {
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
     MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
-    MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
-    MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
-    MdiContentSave: typeof import('~icons/mdi/content-save')['default']
-    MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiDownload: typeof import('~icons/mdi/download')['default']
     MdiDrag: typeof import('~icons/mdi/drag')['default']
@@ -119,15 +108,9 @@ declare module '@vue/runtime-core' {
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
+    MdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     MdiLink: typeof import('~icons/mdi/link')['default']
     MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
-    MdiDownload: typeof import('~icons/mdi/download')['default']
-    MdiDrag: typeof import('~icons/mdi/drag')['default']
-    MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
-    MdiFlag: typeof import('~icons/mdi/flag')['default']
-    MdiHeart: typeof import('~icons/mdi/heart')['default']
-    MdiHook: typeof import('~icons/mdi/hook')['default']
-    MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']
     MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
@@ -138,26 +121,18 @@ declare module '@vue/runtime-core' {
     MdiOperator: typeof import('~icons/mdi/operator')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
-    MdiMagnify: typeof import('~icons/mdi/magnify')['default']
-    MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
-    MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
-    MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
-    MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
     MdiStore: typeof import('~icons/mdi/store')['default']
+    MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
     MdiTableBorder: typeof import('~icons/mdi/table-border')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
-    MdiStar: typeof import('~icons/mdi/star')['default']
-    MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
-    MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
-    MdiXml: typeof import('~icons/mdi/xml')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue

@@ -659,7 +659,7 @@ onMounted(() => {
                       </div>
                     </div>
                     <div v-if="item.type === 'column'" class="float-right mr-5 -mt-2">
-                      <a-badge-ribbon :text="item.uidt" color="gray"/>
+                      <a-badge-ribbon :text="item.uidt" color="gray" />
                     </div>
                   </a-col>
                 </div>

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

@@ -86,7 +86,7 @@ watch(inputs, () => {
 
 <template>
   <div class="w-full">
-    <draggable :list="options" item-key="id" handle=".nc-child-draggable-icon">
+    <Draggable :list="options" item-key="id" handle=".nc-child-draggable-icon">
       <template #item="{ element, index }">
         <div class="flex py-1 align-center">
           <MdiDragIcon small class="nc-child-draggable-icon handle" />
@@ -105,7 +105,7 @@ watch(inputs, () => {
           <div class="flex align-center"><MdiPlusIcon /><span class="flex-auto">Add option</span></div>
         </a-button>
       </template>
-    </draggable>
+    </Draggable>
   </div>
 </template>
 

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

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { onClickOutside } from '@vueuse/core'
 import { Modal } from 'ant-design-vue'
 import { inject } from 'vue'
 import { useI18n } from 'vue-i18n'

packages/nc-gui-v2/components/smartsheet/Grid.vue

@@ -337,7 +337,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
           <tbody>
             <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
               <template #default="{ state }">
-                <tr class="nc-grid-row">
+                <tr class="nc-grid-row group">
                   <td key="row-index" class="caption nc-grid-cell">
                     <div class="align-center flex w-[80px]">
                       <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
@@ -352,7 +352,8 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                           class="py-1 px-3 rounded-full text-[11px]"
                           :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
                           @click="expandForm(row, state)"
-                        >{{ row.rowMeta.commentCount }}</span>
+                          >{{ row.rowMeta.commentCount }}</span
+                        >
                         <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
                           <MdiArrowExpand
                             class="select-none transform hover:(text-pink-500 scale-120)"
@@ -361,48 +362,47 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                         </div>
                       </div>
                     </div>
-                  </div>
+                  </td>
-                </td>
+                  <td
-                <td
+                    v-for="(columnObj, colIndex) of fields"
-                  v-for="(columnObj, colIndex) of fields"
+                    :ref="cellRefs.set"
-                  :ref="cellRefs.set"
+                    :key="columnObj.id"
-                  :key="columnObj.id"
+                    class="cell relative cursor-pointer nc-grid-cell"
-                  class="cell relative cursor-pointer nc-grid-cell"
+                    :class="{
-                  :class="{
+                      active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
-                  active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
+                    }"
-                }"
+                    :data-key="rowIndex + columnObj.id"
-                  :data-key="rowIndex + columnObj.id"
+                    :data-col="columnObj.id"
-                  :data-col="columnObj.id"
+                    :data-title="columnObj.title"
-                  :data-title="columnObj.title"
+                    @click="selectCell(rowIndex, colIndex)"
-                  @click="selectCell(rowIndex, colIndex)"
+                    @dblclick="makeEditable(row, columnObj)"
-                  @dblclick="makeEditable(row, columnObj)"
+                    @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
-                  @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
+                  >
-                >
+                    <div class="w-full h-full">
-                  <div class="w-full h-full">
+                      <SmartsheetVirtualCell
-                    <SmartsheetVirtualCell
+                        v-if="isVirtualCol(columnObj)"
-                      v-if="isVirtualCol(columnObj)"
+                        v-model="row.row[columnObj.title]"
-                      v-model="row.row[columnObj.title]"
+                        :column="columnObj"
-                      :column="columnObj"
+                        :active="selected.col === colIndex && selected.row === rowIndex"
-                      :active="selected.col === colIndex && selected.row === rowIndex"
+                        :row="row"
-                      :row="row"
+                        @navigate="onNavigate"
-                      @navigate="onNavigate"
+                      />
-                    />
+
-
+                      <SmartsheetCell
-                    <SmartsheetCell
+                        v-else
-                      v-else
+                        v-model="row.row[columnObj.title]"
-                      v-model="row.row[columnObj.title]"
+                        :column="columnObj"
-                      :column="columnObj"
+                        :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
-                      :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                        :row-index="rowIndex"
-                      :row-index="rowIndex"
+                        :active="selected.col === colIndex && selected.row === rowIndex"
-                      :active="selected.col === colIndex && selected.row === rowIndex"
+                        @update:edit-enabled="editEnabled = false"
-                      @update:edit-enabled="editEnabled = false"
+                        @save="updateOrSaveRow(row, columnObj.title)"
-                      @save="updateOrSaveRow(row, columnObj.title)"
+                        @navigate="onNavigate"
-                      @navigate="onNavigate"
+                        @cancel="editEnabled = false"
-                      @cancel="editEnabled = false"
+                      />
-                    />
+                    </div>
-                  </div>
+                  </td>
-                </td>
+                </tr>
-              </tr>
               </template>
             </SmartsheetRow>
 
@@ -442,6 +442,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
     </div>
 
     <SmartsheetPagination />
+
     <SmartsheetExpandedForm
       v-if="expandedFormRow && expandedFormDlg"
       v-model="expandedFormDlg"

packages/nc-gui-v2/components/smartsheet/Row.vue

@@ -8,7 +8,6 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-const emit = defineEmits(['expandForm', 'selectCell', 'updateOrSaveRow', 'navigate'])
 const row = toRef(props, 'row')
 
 const { meta } = useSmartsheetStoreOrThrow()

packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue

@@ -3,7 +3,7 @@ import { nextTick, useExpandedFormStoreOrThrow } from '#imports'
 import { enumColor, timeAgo } from '~/utils'
 import MdiAccountIcon from '~icons/mdi/account-circle'
 
-const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment, row } =
+const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } =
   useExpandedFormStoreOrThrow()
 
 const commentsWrapperEl = ref<HTMLDivElement>()

packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

@@ -7,7 +7,7 @@ import MdiDoorClosed from '~icons/mdi/door-closed'
 
 const emit = defineEmits(['cancel'])
 const { meta } = useSmartsheetStoreOrThrow()
-const { commentsDrawer, row, primaryValue, save: _save } = useExpandedFormStoreOrThrow()
+const { commentsDrawer, primaryValue, save: _save } = useExpandedFormStoreOrThrow()
 const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow()
 const { isUIAllowed } = useUIPermission()
 

packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue

@@ -8,7 +8,7 @@ import Header from './Header.vue'
 import { NOCO } from '~/lib'
 import { extractPkFromRow } from '~/utils'
 import { useNuxtApp } from '#app'
-import { useProvideSmartsheetStore, useSmartsheetStoreOrThrow } from '~/composables'
+import { useProvideSmartsheetStore } from '~/composables'
 import type { Row } from '~/composables'
 import { useProvideExpandedFormStore } from '~/composables/useExpandedFormStore'
 import { FieldsInj, IsFormInj, MetaInj } from '~/context'

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

@@ -4,10 +4,8 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
 import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
-import { useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import { inject, ref, useProvideLTARStore } from '#imports'
-import { CellValueInj,IsFormInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)
 
@@ -21,10 +19,8 @@ const active = false
 
 const listItemsDlg = ref(false)
 
-const isForm = inject(IsFormInj)
-
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
-const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
   isNew,

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

@@ -7,8 +7,6 @@ import ListItems from './components/ListItems.vue'
 import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
 import { computed, inject, ref, useProvideLTARStore } from '#imports'
 import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
-import { useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -20,14 +18,12 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
-const isForm = inject(IsFormInj)
-
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
 
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
-const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
   isNew,
@@ -56,7 +52,6 @@ const cells = computed(() =>
   }, [] as any[]),
 )
 
-
 const unlinkRef = async (rec: Record<string, any>) => {
   if (isNew.value) {
     removeLTARRef(rec, column?.value as ColumnType)
@@ -71,12 +66,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip
+          <ItemChip v-for="(cell, i) of cells" :key="i" :item="ch" :value="cell.value" @unlink="unlinkRef(cell.item)" />
-            v-for="(cell, i) of cells"
-            :key="i"
-            :item="ch"
-            :value="cell.value"
-            @unlink="unlinkRef(cell.item)" />
           <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true"
             >more...
           </span>
@@ -87,14 +77,19 @@ const unlinkRef = async (rec: Record<string, any>) => {
           class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
           @click="childListDlg = true"
         />
-        <MdiPlus
+        <MdiPlus class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
-          class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
-          @click="listItemsDlg = true"
-        />
       </div>
     </template>
     <ListItems v-model="listItemsDlg" />
-    <ListChildItems v-model="childListDlg" @attach-record="() => { childListDlg = false; listItemsDlg = true }" />
+    <ListChildItems
+      v-model="childListDlg"
+      @attach-record="
+        () => {
+          childListDlg = false
+          listItemsDlg = true
+        }
+      "
+    />
   </div>
 </template>
 

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

@@ -5,10 +5,8 @@ import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
 import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
-import { useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import { computed, inject, ref, useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, ReloadViewDataHookInj,IsFormInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -55,8 +53,6 @@ const cells = computed(() =>
   }, [] as any[]),
 )
 
-
-
 const unlinkRef = async (rec: Record<string, any>) => {
   if (isNew.value) {
     removeLTARRef(rec, column?.value as ColumnType)
@@ -71,13 +67,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip
+          <ItemChip v-for="(cell, i) of cells" :key="i" :item="ch" :value="cell.value" @unlink="unlinkRef(cell.item)" />
-            v-for="(cell, i) of cells"
-            :key="i"
-            :item="ch"
-            :value="cell.value"
-            @unlink="unlinkRef(cell.item)"
-          />
 
           <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
         </template>
@@ -92,7 +82,15 @@ const unlinkRef = async (rec: Record<string, any>) => {
 
     <ListItems v-model="listItemsDlg" />
 
-    <ListChildItems v-model="childListDlg" @attach-record="() => { childListDlg = false; listItemsDlg = true; }" />
+    <ListChildItems
+      v-model="childListDlg"
+      @attach-record="
+        () => {
+          childListDlg = false
+          listItemsDlg = true
+        }
+      "
+    />
   </div>
 </template>
 

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

@@ -1,12 +1,9 @@
 <script lang="ts" setup>
-import { watchEffect } from '@vue/runtime-core'
 import { Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
-import { useLTARStoreOrThrow, useVModel } from '#imports'
+import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
 import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
 import { ColumnInj, IsFormInj } from '~/context'
-import { IsFormInj } from '~/context'
-import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
 
 const props = defineProps<{ modelValue?: boolean }>()
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
@@ -62,7 +59,7 @@ const expandedFormRow = ref()
       <div class="flex mb-4 align-center gap-2">
         <div class="flex-1" />
 
-        <MdiReload  v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
+        <MdiReload v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
 
         <a-button type="primary" class="!text-xs" size="small" @click="emit('attachRecord')">
           <div class="flex align-center gap-1">
@@ -91,7 +88,10 @@ const expandedFormRow = ref()
               </div>
               <div class="flex-1"></div>
               <div class="flex gap-2">
-                <MdiLinkVariantRemove class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click.stop="unlinkRow(row)" />
+                <MdiLinkVariantRemove
+                  class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
+                  @click.stop="unlinkRow(row)"
+                />
                 <MdiDeleteOutline
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
                   @click.stop="deleteRelatedRow(row)"

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

@@ -13,7 +13,7 @@ interface DataApiResponse {
 
 /** Store for managing Link to another cells */
 const [useProvideLTARStore, useLTARStore] = useInjectionState(
-  (column: Ref<Required<ColumnType>>, row?: Ref<Row>, isNewRow: ComputedRef<boolean>, reloadData = () => {}) => {
+  (column: Ref<Required<ColumnType>>, row?: Ref<Row>, isNewRow: ComputedRef<boolean> | Ref<boolean>, reloadData = () => {}) => {
     // state
     const { metas, getMeta } = useMetas()
     const { project } = useProject()

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

@@ -20,7 +20,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
   const state = ref<Record<string, Record<string, any> | Record<string, any>[] | null>>({})
 
   // getters
-  const isNew = computed(() => row.value?.rowMeta?.new)
+  const isNew = computed(() => row.value?.rowMeta?.new ?? false)
 
   // actions
   const addLTARRef = async (value: Record<string, any>, column: ColumnType) => {
@@ -54,7 +54,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
         column.title as string,
         relatedRowId,
       )
-    } catch (e) {
+    } catch (e: any) {
       notification.error({
         message: 'Linking failed',
         description: await extractSdkResponseErrorMsg(e),
@@ -77,10 +77,10 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
         for (const relatedRow of relatedRows) {
           await linkRecord(id, extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]), column, colOptions.type)
         }
-      } else if (isBt && state.value?.[column.title!]) {
+      } else if (isBt && state?.value?.[column.title!]) {
         await linkRecord(
           id,
-          extractPkFromRow(state.value?.[column.title!], relatedTableMeta.columns as ColumnType[]),
+          extractPkFromRow(state.value?.[column.title!] as Record<string, any>, relatedTableMeta.columns as ColumnType[]),
           column,
           colOptions.type,
         )

packages/nc-gui-v2/package-lock.json

@@ -22,6 +22,7 @@
         "unique-names-generator": "^4.7.1",
         "url": "^0.11.0",
         "util": "^0.12.4",
+        "vue-dompurify-html": "^3.0.0",
         "vue-i18n": "^9.1.10",
         "vue-toastification": "^2.0.0-rc.5",
         "vuedraggable": "^4.1.0",
@@ -5389,6 +5390,11 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.10.tgz",
+      "integrity": "sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g=="
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -14534,6 +14540,17 @@
         "bundle-runner": "^0.0.1"
       }
     },
+    "node_modules/vue-dompurify-html": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-3.0.0.tgz",
+      "integrity": "sha512-S6PMeJU7S3w0TnxMWWd4iydc7oPdOER1GmW9rsgiRwHvcw+nUi2v6BgERcFBULlM+x6PXsfu5P/Rm4reVvWH5A==",
+      "dependencies": {
+        "dompurify": "^2.3.4"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz",
@@ -19300,6 +19317,11 @@
         "domelementtype": "^2.2.0"
       }
     },
+    "dompurify": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.10.tgz",
+      "integrity": "sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g=="
+    },
     "domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -26034,6 +26056,14 @@
         "bundle-runner": "^0.0.1"
       }
     },
+    "vue-dompurify-html": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-3.0.0.tgz",
+      "integrity": "sha512-S6PMeJU7S3w0TnxMWWd4iydc7oPdOER1GmW9rsgiRwHvcw+nUi2v6BgERcFBULlM+x6PXsfu5P/Rm4reVvWH5A==",
+      "requires": {
+        "dompurify": "^2.3.4"
+      }
+    },
     "vue-eslint-parser": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz",

packages/nc-gui-v2/utils/dataUtils.ts

@@ -1,8 +1,11 @@
 import type { ColumnType } from 'nocodb-sdk'
 
 export const extractPkFromRow = (row: Record<string, any>, columns: ColumnType[]) => {
-  return columns
+  return (
-    ?.filter((c) => c.pk)
+    row &&
-    .map((c) => row?.[c.title as string])
+    columns
-    .join('___')
+      ?.filter((c) => c.pk)
+      .map((c) => row?.[c.title as string])
+      .join('___')
+  )
 }