fix(nc-gui): field customizations

packages/nc-gui/components/smartsheet/calendar/Cell.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import {
+  type BoolType,
   type ColumnType,
   type LookupType,
   type RollupType,
@@ -26,9 +27,9 @@ import {
 interface Props {
   column: ColumnType
   modelValue: any
-  bold?: boolean
+  bold?: BoolType
-  italic?: boolean
+  italic?: BoolType
-  underline?: boolean
+  underline?: BoolType
 }
 
 const props = defineProps<Props>()

packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue

@@ -215,10 +215,10 @@ const dropEvent = (event: DragEvent) => {
             <LazySmartsheetCalendarCell
               v-if="!isRowEmpty(record, displayField!)"
               v-model="record.row[displayField!.title!]"
-              :bold="getFieldStyle(displayField).bold"
+              :bold="getFieldStyle(displayField!).bold"
-              :column="displayField"
+              :column="displayField!"
-              :italic="getFieldStyle(displayField).italic"
+              :italic="getFieldStyle(displayField!).italic"
-              :underline="getFieldStyle(displayField).underline"
+              :underline="getFieldStyle(displayField!).underline"
             />
           </template>
           <template v-for="(field, id) in fieldsWithoutDisplay">

packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue

@@ -7,6 +7,7 @@ import { generateRandomNumber, isRowEmpty } from '~/utils'
 const emit = defineEmits(['expandRecord', 'new-record'])
 
 const {
+  activeCalendarView,
   selectedDate,
   selectedTime,
   formattedData,
@@ -29,16 +30,17 @@ const fields = inject(FieldsInj, ref())
 const { fields: _fields } = useViewColumnsOrThrow()
 
 const getFieldStyle = (field: ColumnType) => {
+  if (!_fields.value) return { underline: false, bold: false, italic: false }
   const fi = _fields.value.find((f) => f.title === field.title)
 
   return {
-    underline: fi.underline,
+    underline: fi?.underline,
-    bold: fi.bold,
+    bold: fi?.bold,
-    italic: fi.italic,
+    italic: fi?.italic,
   }
 }
 
-const fieldsWithoutDisplay = computed(() => fields.value.filter((f) => !isPrimary(f)))
+const fieldsWithoutDisplay = computed(() => fields.value?.filter((f) => !isPrimary(f)))
 
 const hours = computed(() => {
   const hours: Array<dayjs.Dayjs> = []
@@ -707,6 +709,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
         >
           <LazySmartsheetRow :row="record">
             <LazySmartsheetCalendarVRecordCard
+              :view="activeCalendarView"
               :hover="hoverRecord === record.rowMeta.id"
               :position="record.rowMeta!.position"
               :record="record"
@@ -718,10 +721,10 @@ const viewMore = (hour: dayjs.Dayjs) => {
                 <LazySmartsheetCalendarCell
                   v-if="!isRowEmpty(record, displayField!)"
                   v-model="record.row[displayField!.title!]"
-                  :bold="getFieldStyle(displayField).bold"
+                  :bold="getFieldStyle(displayField!).bold"
                   :column="displayField"
-                  :italic="getFieldStyle(displayField).italic"
+                  :italic="getFieldStyle(displayField!).italic"
-                  :underline="getFieldStyle(displayField).underline"
+                  :underline="getFieldStyle(displayField!).underline"
                 />
               </template>
               <template v-for="(field, id) in fieldsWithoutDisplay">

packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 interface Props {
   record: Record<string, string>
+
   color?: string
   resize?: boolean
   selected?: boolean
@@ -26,14 +27,14 @@ const emit = defineEmits(['resize-start'])
   >
     <NcButton
       :class="{
-        '!flex border-1 rounded-lg border-brand-500': selected || hover,
+        '!flex rounded-lg border-brand-500': selected || hover,
       }"
-      class="!group-hover:(border-brand-500) !border-1 cursor-ns-resize"
+      class="!group-hover:(border-brand-500) !border-1 text-gray-400 cursor-ns-resize"
       size="xsmall"
       type="secondary"
       @mousedown.stop="emit('resize-start', 'left', $event, record)"
     >
-      <component :is="iconMap.drag" class="text-gray-400"></component>
+      <component :is="iconMap.drag" class="mt-0.5" />
     </NcButton>
   </div>
   <div
@@ -70,10 +71,7 @@ const emit = defineEmits(['resize-start'])
     <div v-if="position === 'bottomRounded' || position === 'none'" class="ml-3">....</div>
 
     <span
-      :class="{
+      class="mt-1.5 pl-4 pr-1 text-sm h-[100%] text-gray-800 leading-7 space-x-2 break-all whitespace-normal truncate w-full overflow-y-hidden absolute"
-        '!h-[40%]': position === 'none',
-      }"
-      class="mt-1.5 pl-4 pr-1 text-sm h-[70%] text-gray-800 leading-7 space-x-2 break-all whitespace-normal truncate w-full overflow-y-hidden absolute"
     >
       <slot />
     </span>
@@ -87,12 +85,12 @@ const emit = defineEmits(['resize-start'])
       :class="{
         '!flex border-1 rounded-lg z-1 cursor-ns-resize	border-brand-500': selected || hover,
       }"
-      class="!group-hover:(border-brand-500) !border-1"
+      class="!group-hover:(border-brand-500) text-gray-400 !border-1"
       size="xsmall"
       type="secondary"
       @mousedown.stop="emit('resize-start', 'right', $event, record)"
     >
-      <component :is="iconMap.drag" class="text-gray-400"></component>
+      <component :is="iconMap.drag" class="mt-0.5" />
     </NcButton>
   </div>
 </template>

packages/nc-gui/components/smartsheet/calendar/index.vue

@@ -41,6 +41,7 @@ provide(IsKanbanInj, ref(false))
 provide(IsCalendarInj, ref(true))
 
 const {
+  activeCalendarView,
   calendarRange,
   calDataType,
   loadCalendarMeta,
@@ -53,7 +54,6 @@ const {
   pageDate,
   showSideMenu,
   selectedDateRange,
-  activeCalendarView,
   paginateCalendarView,
 } = useCalendarViewStoreOrThrow()