table improved for dark theme

richardhulbert · richardhulbert · commit 3d625c05a1bb · 2024-05-29T17:59:57.000+01:00
diff --git a/demo/assets/index-fb2f02ba.js b/demo/assets/index-fb2f02ba.js
diff --git a/demo/index.html b/demo/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Vue 3 Tailwind Components</title>
-    <script type="module" crossorigin src="./assets/index-50296fb8.js"></script>
+    <script type="module" crossorigin src="./assets/index-fb2f02ba.js"></script>
     <link rel="stylesheet" href="./assets/index-869e2aea.css">
   </head>
   <body class="">
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue3-tailwind-components",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "A library of Vue 3 components that use Tailwind",
   "keywords": [
     "vue3",
diff --git a/src/components/collapse/TwCollapse.vue b/src/components/collapse/TwCollapse.vue
@@ -18,7 +18,7 @@
   </div>
   <!-- Panel -->
   <div v-if="open"
-       class="z-50 bg-white mt-1 animate-in slide-in-from-top-16 fade-in-20 text-left text-sm ">
+       class="z-50 mt-1 animate-in slide-in-from-top-16 fade-in-20 text-left text-sm ">
     <slot>
 
     </slot>
diff --git a/src/components/table/TwTable.vue b/src/components/table/TwTable.vue
@@ -1,13 +1,13 @@
 <template>
-  <table  class="border-collapse table-auto w-full text-sm">
-    <thead :class="headingClass" class=" text-gray-800 ">
+  <table  class="border-collapse table-auto w-full text-sm bo">
+    <thead :class="headingClass" class=" text-primary-800 ">
     <tr>
       <th class="p-2 font-normal" v-for="h in headings">{{ h.label }}</th>
     </tr>
     </thead>
-    <tbody class="text-gray-600">
+    <tbody class="text-primary-600 dark:text-primary-100">
     <tr v-for="(item,index) in items" :key="index" :class="rowClass(index)" class="transition-colors" >
-      <td :class="boarderClass" class=" p-2" v-for="cell in headings">
+      <td :class="boarderClass"  class="p-2 text-primary-600 dark:text-primary-100" v-for="cell in headings">
         <slot :name="cell.field" :item="item">
           {{ item[cell.field] }}
         </slot>
@@ -69,17 +69,17 @@ export default {
   },
   computed: {
     headingClass() {
-      return 'bg-'+this.headingColor+'-200 dark:bg-'+this.headingColor+'-900 dark:text-'+this.headingColor+'-200'
+      return 'bg-'+this.headingColor+'-200 dark:bg-'+this.headingColor+'-700 dark:text-'+this.headingColor+'-200'
     },
     boarderClass() {
-      return this.border ? 'border border-' + this.borderColor+'-200 dark:border-'+this.borderColor+'-900': '';
+      return this.border ? 'border border-' + this.borderColor+'-200 dark:border-'+this.borderColor+'-700': '';
     },
   },
   methods: {
     rowClass(ndx) {
       let h = this.hover ?' hover:bg-'+this.hoverColor+'-300 dark:hover:bg-'+this.hoverColor+'-700 dark:hover:text-white':''
       if(this.selectedIndex === ndx) h = ' bg-'+this.selectColor+'-300 dark:bg-'+this.selectColor+'-400'
-      if(this.striped && this.selectedIndex !== ndx) return ndx % 2 !== 0 ? 'bg-'+this.stripeColor+'-100 dark:bg-'+this.stripeColor+'-800 dark:text-gray-200'+h: ' dark:text-gray-700 '+h;
+      if(this.striped && this.selectedIndex !== ndx) return ndx % 2 !== 0 ? 'bg-'+this.stripeColor+'-100 dark:bg-'+this.stripeColor+'-800 dark:text-primary-200'+h: ' dark:text-primary-700 '+h;
 
       return h+' dark:text-gray-700'
     }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue3-tailwind-components",`
`3`		`- "version": "0.3.1",`
	`3`	`+ "version": "0.3.2",`
`4`	`4`	`"description": "A library of Vue 3 components that use Tailwind",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"vue3",`