feat(nc-gui): render virtual and normal cell using cell components

packages/nc-gui/components/virtual-cell/components/ItemChip.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import {
   ActiveCellInj,
   IsFormInj,
@@ -6,6 +7,7 @@ import {
   ReadonlyInj,
   iconMap,
   inject,
+  isAttachment,
   ref,
   useExpandedFormDetached,
   useLTARStoreOrThrow,
@@ -15,9 +17,10 @@ import {
 interface Props {
   value?: string | number | boolean
   item?: any
+  column: any
 }
 
-const { value, item } = defineProps<Props>()
+const { value, item, column } = defineProps<Props>()
 
 const emit = defineEmits(['unlink'])
 
@@ -60,7 +63,36 @@ export default {
     :class="{ active }"
     @click="openExpandedForm"
   >
-    <span class="name">{{ value }}</span>
+    <span class="name">
+      <!-- Render virtual cell -->
+      <div v-if="isVirtualCol(column)">
+        <template v-if="column.uidt === UITypes.LinkToAnotherRecord">
+          <LazySmartsheetVirtualCell :edit-enabled="false" :model-value="value" :column="column" :read-only="true" />
+        </template>
+
+        <LazySmartsheetVirtualCell v-else :edit-enabled="false" :read-only="true" :model-value="value" :column="column" />
+      </div>
+      <!-- Render normal cell -->
+      <template v-else>
+        <div v-if="isAttachment(column) && value && !Array.isArray(value) && typeof value === 'object'">
+          <LazySmartsheetCell :model-value="value" :column="column" :edit-enabled="false" :read-only="true" />
+        </div>
+        <!-- For attachment cell avoid adding chip style -->
+        <template v-else>
+          <div
+            class="min-w-max"
+            :class="{
+              'bg-gray-100 px-1 rounded-full flex-1': !isAttachment(column),
+              'border-gray-200 rounded border-1': ![UITypes.Attachment, UITypes.MultiSelect, UITypes.SingleSelect].includes(
+                column.uidt,
+              ),
+            }"
+          >
+            <LazySmartsheetCell :model-value="value" :column="column" :edit-enabled="false" :virtual="true" :read-only="true" />
+          </div>
+        </template>
+      </template>
+    </span>
 
     <div v-show="active || isForm" v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')" class="flex items-center">
       <component