fix: NULL display in cell isn't uniform nocodb/nocodb/issues/7344

packages/nc-gui/components/cell/DatePicker.vue

@@ -104,7 +104,7 @@ const placeholder = computed(() => {
   if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
     return t('labels.optional')
   } else if (modelValue === null && showNull.value) {
-    return t('general.null')
+    return t('general.null').toUpperCase()
   } else if (isDateInvalid.value) {
     return t('msg.invalidDate')
   } else {

packages/nc-gui/components/cell/DateTimePicker.vue

@@ -157,7 +157,7 @@ const placeholder = computed(() => {
   if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
     return t('labels.optional')
   } else if (modelValue === null && showNull.value) {
-    return t('general.null')
+    return t('general.null').toUpperCase()
   } else if (isDateInvalid.value) {
     return t('msg.invalidDate')
   } else {

packages/nc-gui/components/cell/Decimal.vue

@@ -112,7 +112,7 @@ watch(isExpandedFormOpen, () => {
     @selectstart.capture.stop
     @mousedown.stop
   />
-  <span v-else-if="vModel === null && showNull" class="nc-null capitalize">{{ $t('general.null') }}</span>
+  <span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
   <span v-else class="text-sm">{{ displayValue }}</span>
 </template>
 

packages/nc-gui/components/cell/Duration.vue

@@ -111,7 +111,7 @@ const focus: VNodeRef = (el) =>
       @mousedown.stop
     />
 
-    <span v-else-if="modelValue === null && showNull" class="nc-null capitalize">{{ $t('general.null') }}</span>
+    <span v-else-if="modelValue === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
 
     <span v-else> {{ localState }}</span>
 

packages/nc-gui/components/cell/Percent.vue

@@ -143,7 +143,7 @@ const onTabPress = (e: KeyboardEvent) => {
       @selectstart.capture.stop
       @mousedown.stop
     />
-    <span v-else-if="vModel === null && showNull" class="nc-null capitalize">{{ $t('general.null') }}</span>
+    <span v-else-if="vModel === null && showNull" class="nc-null uppercase">{{ $t('general.null') }}</span>
     <div v-else-if="percentMeta.is_progress === true && vModel !== null && vModel !== undefined" class="px-2">
       <a-progress
         :percent="Number(parseFloat(vModel.toString()).toFixed(2))"

packages/nc-gui/components/cell/TimePicker.vue

@@ -96,7 +96,7 @@ const placeholder = computed(() => {
   if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
     return t('labels.optional')
   } else if (modelValue === null && showNull.value) {
-    return t('general.null')
+    return t('general.null').toUpperCase()
   } else if (isTimeInvalid.value) {
     return t('msg.invalidTime')
   } else {

packages/nc-gui/components/cell/Url.vue

@@ -108,7 +108,7 @@ watch(
       @mousedown.stop
     />
 
-    <span v-else-if="vModel === null && showNull" class="nc-null uppercase"> $t('general.null')</span>
+    <span v-else-if="vModel === null && showNull" class="nc-null uppercase"> {{$t('general.null')}}</span>
 
     <nuxt-link
       v-else-if="isValid && !cellUrlOptions?.overlay"

packages/nc-gui/components/cell/YearPicker.vue

@@ -83,7 +83,7 @@ const placeholder = computed(() => {
   if (isEditColumn.value && (modelValue === '' || modelValue === null)) {
     return t('labels.optional')
   } else if (modelValue === null && showNull.value) {
-    return t('general.null')
+    return t('general.null').toUpperCase()
   } else if (isYearInvalid.value) {
     return t('msg.invalidTime')
   } else {