feat: extended support for NULL indicator

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui/assets/style.scss

@@ -294,3 +294,10 @@ a {
 .ant-select-selection-search-input:focus {
   @apply !ring-0;
 }
+
+.nc-null {
+  @apply text-gray-300 italic;
+  input::placeholder {
+    @apply text-gray-300 italic;
+  }
+}

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

@@ -81,6 +81,8 @@ onMounted(() => {
     @mousedown.stop
   />
 
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
+
   <span v-else-if="vModel">{{ currency }}</span>
 
   <span v-else />

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

@@ -71,7 +71,7 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
+const placeholder = computed(() => (modelValue === null ? 'NULL' : isDateInvalid ? 'Invalid date' : ''))
 
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
@@ -169,6 +169,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     v-model:value="localState"
     :bordered="false"
     class="!w-full !px-0 !border-none"
+    :class="{ 'nc-null': modelValue === null }"
     :format="dateFormat"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"

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

@@ -79,6 +79,8 @@ watch(
   { flush: 'post' },
 )
 
+const placeholder = computed(() => (modelValue === null ? 'NULL' : isDateInvalid ? 'Invalid date' : ''))
+
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
@@ -172,8 +174,9 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :show-time="true"
     :bordered="false"
     class="!w-full !px-0 !border-none"
+    :class="{ 'nc-null': modelValue === null }"
     :format="dateTimeFormat"
-    :placeholder="isDateInvalid ? 'Invalid date' : ''"
+    :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :dropdown-class-name="`${randomClass} nc-picker-datetime ${open ? 'active' : ''}`"

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

@@ -49,6 +49,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     @selectstart.capture.stop
     @mousedown.stop
   />
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
 

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

@@ -93,6 +93,8 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
       @mousedown.stop
     />
 
+    <span v-else-if="localState === null" class="nc-null">NULL</span>
+
     <span v-else> {{ localState }}</span>
 
     <div v-if="showWarningMessage" class="duration-warning">

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

@@ -39,6 +39,8 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     @mousedown.stop
   />
 
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
+
   <a v-else-if="validEmail" class="text-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}
   </a>

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

@@ -49,6 +49,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     @selectstart.capture.stop
     @mousedown.stop
   />
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
 

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

@@ -53,6 +53,7 @@ function onKeyDown(evt: KeyboardEvent) {
     @selectstart.capture.stop
     @mousedown.stop
   />
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
 

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

@@ -154,6 +154,8 @@ useSelectedCellKeyupListener(active, (e) => {
       </span>
     </div>
 
+    <span v-else-if="vModel === null" class="nc-null">NULL</span>
+
     <span v-else>{{ vModel }}</span>
   </component>
 </template>

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

@@ -47,5 +47,6 @@ const focus: VNodeRef = (el) => {
     @selectstart.capture.stop
     @mousedown.stop
   />
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
   <span v-else>{{ vModel }}</span>
 </template>

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

@@ -38,7 +38,7 @@ const focus: VNodeRef = (el) => {
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null" class="text-gray-300 italic">NULL</span>
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
 
   <LazyCellClampedText v-else :value="vModel" :lines="1" />
 </template>

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

@@ -55,7 +55,7 @@ const rowHeight = computed(() => {
     @mousedown.stop
   />
 
-  <span v-else-if="vModel === null" class="text-gray-300 italic">NULL</span>
+  <span v-else-if="vModel === null" class="nc-null">NULL</span>
 
   <LazyCellClampedText v-else-if="rowHeight" :value="vModel" :lines="rowHeight" />
 

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

@@ -72,6 +72,8 @@ watch(
   { flush: 'post' },
 )
 
+const placeholder = computed(() => (modelValue === null ? 'NULL' : isTimeInvalid ? 'Invalid time' : ''))
+
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
@@ -97,7 +99,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     use12-hours
     format="HH:mm"
     class="!w-full !px-0 !border-none"
-    :placeholder="isTimeInvalid ? 'Invalid time' : ''"
+    :class="{ 'nc-null': modelValue === null }"
+    :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :open="(readOnly || (localState && isPk)) && !active && !editable ? false : open"

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

@@ -88,6 +88,8 @@ watch(
       @mousedown.stop
     />
 
+    <span v-else-if="vModel === null" class="nc-null">NULL</span>
+
     <nuxt-link
       v-else-if="isValid && !cellUrlOptions?.overlay"
       no-prefetch

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

@@ -58,7 +58,7 @@ watch(
   { flush: 'post' },
 )
 
-const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
+const placeholder = computed(() => (modelValue === null ? 'NULL' : isYearInvalid ? 'Invalid year' : ''))
 
 useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
@@ -82,6 +82,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     picker="year"
     :bordered="false"
     class="!w-full !px-0 !border-none"
+    :class="{ 'nc-null': modelValue === null }"
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"