feat: add support for null value, update theme and update placeholder data

Author: francisashley

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-screener",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "type": "module",
   "description": "Easily search and filter data in Vue3.",
   "author": "Francis Ashley",

src/components/renderers/VueScreenerBooleanRenderer.vue

@@ -2,7 +2,7 @@
   <div
     :class="[
       twMerge(
-        'vsc-relative vsc-inset-0 vsc-break-words vsc-py-2 vsc-px-2 vsc-text-[#2196f3]',
+        'vsc-relative vsc-inset-0 vsc-break-words vsc-py-2 vsc-px-2 vsc-text-[#569cd6]',
         truncate && 'vsc-whitespace-nowrap vsc-text-ellipsis vsc-overflow-hidden',
         props.class,
       ),

src/components/renderers/VueScreenerNullRenderer.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    :class="[
+      twMerge(
+        'vsc-relative vsc-inset-0 vsc-break-words vsc-py-2 vsc-px-2 vsc-text-[#569cd6]',
+        truncate && 'vsc-whitespace-nowrap vsc-text-ellipsis vsc-overflow-hidden',
+        props.class,
+      ),
+    ]"
+    :title="text"
+  >
+    <slot>
+      <span v-html="text" />
+      <div v-if="isSearchMatch" class="vsc-absolute vsc-inset-0 vsc-bg-yellow-400/5" />
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, HTMLAttributes } from 'vue'
+import { twMerge } from '../../utils/tailwind-merge.utils'
+
+const props = defineProps<{
+  truncate?: boolean
+  text?: string
+  isSearchMatch?: boolean
+  class?: HTMLAttributes['class']
+}>()
+</script>

src/components/renderers/VueScreenerNumberRenderer.vue

@@ -2,7 +2,7 @@
   <div
     :class="[
       twMerge(
-        'vsc-relative vsc-inset-0 vsc-break-words vsc-py-2 vsc-px-2 vsc-text-[#d81b60]',
+        'vsc-relative vsc-inset-0 vsc-break-words vsc-py-2 vsc-px-2 vsc-text-[#b5cea8]',
         truncate && 'vsc-whitespace-nowrap vsc-text-ellipsis vsc-overflow-hidden',
         props.class,
       ),

src/components/renderers/VueScreenerStringRenderer.vue

@@ -2,7 +2,7 @@
   <div
     :class="[
       twMerge(
-        'vsc-relative vsc-inset-0 vsc-break-words vsc-py-2 vsc-px-2 vsc-text-[#4caf50]',
+        'vsc-relative vsc-inset-0 vsc-break-words vsc-py-2 vsc-px-2 vsc-text-[#cb9077]',
         truncate && 'vsc-whitespace-nowrap vsc-text-ellipsis vsc-overflow-hidden',
         props.class,
       ),

src/components/table/VueScreenerTableCell.vue

@@ -30,6 +30,12 @@
         :text="text"
         :is-search-match="isSearchMatch"
       />
+      <VueScreenerNullRenderer
+        v-else-if="!disableDataTypeHighlight && type === 'null'"
+        :truncate="column.truncate"
+        :text="text"
+        :is-search-match="isSearchMatch"
+      />
       <VueScreenerDefaultRenderer v-else :truncate="column.truncate" :text="text" :is-search-match="isSearchMatch" />
     </slot>
   </div>
@@ -43,6 +49,7 @@ import VueScreenerDefaultRenderer from '../renderers/VueScreenerDefaultRenderer.
 import VueScreenerStringRenderer from '../renderers/VueScreenerStringRenderer.vue'
 import VueScreenerNumberRenderer from '../renderers/VueScreenerNumberRenderer.vue'
 import VueScreenerBooleanRenderer from '../renderers/VueScreenerBooleanRenderer.vue'
+import VueScreenerNullRenderer from '../renderers/VueScreenerNullRenderer.vue'
 
 const props = defineProps<{
   column: Column