feat(gui-v2): gallery view

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

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

@@ -33,10 +33,18 @@ watch(
 </script>
 
 <template>
-  <v-container fluid>
-    <v-row class="align-stretch">
-      <v-col v-for="({ row }, rowIndex) in data" :key="rowIndex" class="col-md-4 col-lg-3 col-sm-6 col-12">
+  <v-container fluid class="nc-gallery-container">
+    <!--    <v-row class="align-stretch">
+      <v-col v-for="({ row }, rowIndex) in data" :key="rowIndex"
+             md="4"
+             lg="3"
+             sm="6"
+             xs="12"> -->
+
     <!--        <v-hover v-slot="{hover}"> -->
+
+    <div class="flex flex-wrap gap-4 justify-center">
+      <div v-for="({ row }, rowIndex) in data" :key="rowIndex" class="md:w-[300px] lg:w-[400px] xl:w-[500px]">
         <v-card class="h-100">
           <!--     :elevation="hover ? 4 : 1"
                  :ripple="!isLocked"
@@ -68,15 +76,19 @@ watch(
           <!--              v-text="row[primaryValueColumn]" -->
           <!--            /> -->
           <v-card-text>
-            <v-container>
-              <v-row class="">
-                <v-col v-for="col in meta.columns" :key="col.title" cols="3" class="col-12 mt-1 mb-2">
+            <v-container fluid>
+              <!--              <v-row class="">
+                    <v-col v-for="col in meta.columns" :key="col.title"
+                           class="col-12"> -->
+              <div v-for="col in meta.columns" :key="col.title" class="my-8">
                 <!--                <v-col v-for="col in fields" v-show="showFields[col.title]" :key="col.title" class="col-12 mt-1 mb-2"> -->
                 <!--
     todo:header cell
-
-                  <label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize caption grey&#45;&#45;text">
-                    <virtual-header-cell
+    -->
+                <label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize caption grey--text">
+                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+                  <SmartsheetHeaderCell v-else :column="col" />
+                  <!--                    <virtual-header-cell
                           v-if="isVirtualCol(col)"
                           :column="col"
                           :nodes="nodes"
@@ -88,10 +100,9 @@ todo:header cell
                           :is-form="true"
                           :value="col.title"
                           :column="col"
-                    />
-
+                        /> -->
                 </label>
--->
+                <div class="mt-2">
                   <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row[col.title]" :edit-enabled="false" :column="col" />
 
                   <SmartsheetCell
@@ -101,6 +112,7 @@ todo:header cell
                     :column="col"
                     @update:model-value="updateRowProperty(row, col.title)"
                   />
+                </div>
                 <!--                  <virtual-cell
                         v-if="isVirtualCol(col)"
                         ref="virtual"
@@ -118,14 +130,18 @@ todo:header cell
                         class="xc-input body-2"
                         :meta="meta"
                       /> -->
-                </v-col>
-              </v-row>
+                <!--                </v-col> -->
+                <!--              </v-row> -->
+              </div>
             </v-container>
           </v-card-text>
         </v-card>
+      </div>
+    </div>
+
     <!--        </v-hover> -->
-      </v-col>
-    </v-row>
+    <!--      </v-col>
+    </v-row> -->
   </v-container>
 </template>
 
@@ -223,3 +239,9 @@ export default {
 
 </style>
 -->
+<style scoped>
+.nc-gallery-container {
+  height: calc(100vh - 160px);
+  overflow: auto;
+}
+</style>

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

@@ -7,7 +7,6 @@ import useVirtualCell from '~/composables/useVirtualCell'
 interface Props {
   column: ColumnType
   modelValue: any
-  editEnabled: boolean
 }
 
 const { column, modelValue: value } = defineProps<Props>()

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

@@ -1,14 +1,15 @@
 <script setup lang="ts">
+import { ReadonlyInj } from '~/components'
 import MdiCloseThickIcon from '~icons/mdi/close-thick'
 
 interface Props {
-  value: string | number | boolean
-  active: boolean
-  item: any
-  readonly: boolean
+  value?: string | number | boolean
+  active?: boolean
+  item?: any
 }
 
-const { value, active, item, readonly } = defineProps<Props>()
+const { value, active, item } = defineProps<Props>()
+const readonly = inject(ReadonlyInj, false)
 </script>
 
 <template>