vs-datatable 1.2.0 → 1.2.2

package/plugins/export/VsDataTableExportDropdown.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="export-dropdown">
-    <button class="export-btn" ref="toggleBtn" @click.stop="toggleMenu">Export ▾</button>
+    <button class="export-btn" ref="toggleBtn" @click.stop="toggleMenu">
+      Export ▾
+    </button>
     <ul class="export-menu" ref="menu" :class="{ active: isOpen }">
       <li><button @click="exportToCSV()">Export CSV</button></li>
       <li><button @click="exportToExcel()">Export Excel</button></li>
-      <li><button @click="exportToPDF()">Export PDF</button></li>
+      <li><button>Export PDF</button></li>
     </ul>
   </div>
 </template>
@@ -12,7 +14,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 import type { Column, Row } from '@/types'
-import { useDataTableExport } from './useDataTableExport'
+import { useDataTableExport } from './useDataTableExport';
 
 const props = defineProps<{
   rows: Row[]
@@ -30,10 +32,7 @@ function closeMenu() {
   isOpen.value = false
 }
 
-const { exportToCSV, exportToExcel, exportToPDF } = useDataTableExport(
-  ref(props.rows),
-  props.columns
-)
+const { exportToCSV, exportToExcel } = useDataTableExport(ref(props.rows), props.columns)
 
 onMounted(() => {
   document.addEventListener('click', closeMenu)
@@ -44,4 +43,6 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style scoped></style>
+<style scoped>
+
+</style>

package/plugins/export/useDataTableExport.ts

@@ -4,11 +4,6 @@ import type { Ref } from 'vue'
 export function useDataTableExport<T extends Record<string, any>>(rows: Ref<T[]>, columns: any[]) {
   /** Export as CSV */
   const exportToCSV = (filename = 'table.csv') => {
-    if (!Array.isArray(columns) || !Array.isArray(rows.value) || !rows.value.length) {
-      console.warn('[VsDataTableExport] No data available for CSV export.')
-      return
-    }
-
     const headers = columns.map(col => col.label)
     const data = rows.value.map(row => 
       columns.map(col => JSON.stringify(row[col.field] ?? '')).join(',')
@@ -28,12 +23,7 @@ export function useDataTableExport<T extends Record<string, any>>(rows: Ref<T[]>
 
   /** Export as Excel */
   const exportToExcel = async (filename = 'table.xlsx') => {
-    if (!Array.isArray(columns) || !Array.isArray(rows.value) || !rows.value.length) {
-      console.warn('[VsDataTableExport] No data available for Excel export.')
-      return
-    }
-
-    const { utils, writeFile } = await import('xlsx')
+    const { utils, writeFile } = await import('xlsx') // lazy import (only loads if used)
     const data = rows.value.map(row =>
       Object.fromEntries(columns.map(col => [col.label, row[col.field]]))
     )
@@ -43,44 +33,5 @@ export function useDataTableExport<T extends Record<string, any>>(rows: Ref<T[]>
     writeFile(workbook, filename)
   }
 
-  /** Export as PDF */
-  async function exportToPDF(filename = 'data-export.pdf') {
-    if (!Array.isArray(columns) || !Array.isArray(rows.value) || !rows.value.length) {
-      console.warn('[VsDataTableExport] No data available for PDF export.')
-      return
-    }
-
-    const [{ default: jsPDF }, autoTable] = await Promise.all([
-      import('jspdf'),
-      import('jspdf-autotable'),
-    ])
-
-    const doc = new jsPDF()
-    const headers = columns.map(c => c.label || c.field)
-    const data = rows.value.map(row => columns.map(c => row[c.field] ?? ''))
-
-    autoTable.default(doc, {
-      head: [headers],
-      body: data,
-      styles: {
-        fontSize: 10,
-        cellPadding: 4,
-      },
-      headStyles: {
-        fillColor: [45, 108, 223],
-        textColor: [255, 255, 255],
-      },
-      startY: 20,
-      margin: { top: 20 },
-      theme: 'grid',
-    })
-
-    doc.save(filename)
-  }
-
-  return { 
-    exportToCSV, 
-    exportToExcel,
-    exportToPDF
-  }
+  return { exportToCSV, exportToExcel }
 }

package/src/styles/base.scss

@@ -399,6 +399,137 @@
 .vs-transition-fast { transition: var(--vs-transition-fast) !important; }
 .vs-transition-none { transition: none !important; }
 
+/* Utility Classes */
+.vs-text-center {
+  text-align: center;
+}
+.vs-text-left {
+  text-align: left;
+}
+.vs-text-right {
+  text-align: right;
+}
+.vs-text-muted {
+  color: var(--vs-secondary);
+}
+.vs-text-primary {
+  color: var(--vs-primary);
+}
+.vs-text-success {
+  color: var(--vs-success);
+}
+.vs-text-danger {
+  color: var(--vs-danger);
+}
+.vs-text-warning {
+  color: var(--vs-warning);
+}
+
+.vs-bg-primary {
+  background-color: var(--vs-primary);
+}
+.vs-bg-success {
+  background-color: var(--vs-success);
+}
+.vs-bg-danger {
+  background-color: var(--vs-danger);
+}
+.vs-bg-warning {
+  background-color: var(--vs-warning);
+}
+.vs-bg-light {
+  background-color: var(--vs-light);
+}
+
+.vs-border {
+  border: 1px solid var(--vs-table-border);
+}
+.vs-border-top {
+  border-top: 1px solid var(--vs-table-border);
+}
+.vs-border-bottom {
+  border-bottom: 1px solid var(--vs-table-border);
+}
+.vs-border-left {
+  border-left: 1px solid var(--vs-table-border);
+}
+.vs-border-right {
+  border-right: 1px solid var(--vs-table-border);
+}
+
+.vs-rounded {
+  border-radius: var(--vs-border-radius);
+}
+.vs-rounded-sm {
+  border-radius: var(--vs-border-radius-sm);
+}
+.vs-rounded-lg {
+  border-radius: var(--vs-border-radius-lg);
+}
+
+.vs-shadow {
+  box-shadow: var(--vs-shadow);
+}
+.vs-shadow-sm {
+  box-shadow: var(--vs-shadow-sm);
+}
+.vs-shadow-lg {
+  box-shadow: var(--vs-shadow-lg);
+}
+
+/* Animation Classes */
+.vs-fade-in {
+  animation: vs-fade-in 0.3s ease-in-out;
+}
+
+@keyframes vs-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.vs-slide-in {
+  animation: vs-slide-in 0.3s ease-in-out;
+}
+
+@keyframes vs-slide-in {
+  from {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* VS Button */
+.vs-btn {
+  padding: 0.35rem 0.75rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.vs-btn-primary {
+  background: #2d6cdf;
+  color: #fff;
+  border: none;
+}
+.vs-btn-secondary {
+  background: #f5f5f5;
+  border: 1px solid #ccc;
+}
+
+/**
+*-------------------------------------------
+* Custom CSS
+*--------------------------------------------
+*/
+
 /* Reset and Base Styles */
 .vs-datatable {
   font-family: var(--vs-font-family);
@@ -434,7 +565,7 @@
   background-color: var(--vs-table-bg);
 
   thead {
-    background-color: var(--vs-table-header-bg);
+    background-color: var(--vs-table-bg); // Changed from "--vs-table-header-bg"
 
     th {
       padding: var(--vs-spacing-md);
@@ -454,6 +585,17 @@
         border-top-right-radius: var(--vs-border-radius);
       }
     }
+
+    th::after {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 25%;
+      bottom: 25%;
+      width: 1px;
+      opacity: 0.6; 
+      pointer-events: none;
+    }
   }
 
   tbody {
@@ -484,8 +626,52 @@
       }
     }
   }
+
+  .vs-expand-column {
+    width: 2px;
+    border-right: 1px solid var(--vs-border-color, #e5e7eb);
+  }
+  
+  /* Column Grouping */
+  .vs-group-header {
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    position: relative;
+    z-index: 2;
+  }
+
+  .vs-group-header::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 30%;
+    bottom: 30%;
+    width: 2px;
+    background-color: var(--vs-border-color, #d1d5db);
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .vs-header-cell {
+    background: var(--vs-table-header-bg, #fff);
+    font-weight: 500;
+    white-space: nowrap;
+    text-align: left;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid var(--vs-border-color, #e5e7eb);
+  }
 }
 
+/* Remove double line on last column */
+.vs-table th:last-child,
+.vs-table .vs-group-header:last-child {
+  border-right: none;
+}
+
+// .vs-table th:last-child::after {
+//   display: none;
+// }
+
 /* Sortable Headers */
 .vs-sortable {
   cursor: pointer;
@@ -957,28 +1143,6 @@
   stroke-width: 2.5;
 }
 
-/* VS Button */
-.vs-btn {
-  padding: 0.35rem 0.75rem;
-  border-radius: 4px;
-  cursor: pointer;
-}
-.vs-btn-primary {
-  background: #2d6cdf;
-  color: #fff;
-  border: none;
-}
-.vs-btn-secondary {
-  background: #f5f5f5;
-  border: 1px solid #ccc;
-}
-// .vs-filter-range,
-// .vs-filter-date {
-//   display: flex;
-//   gap: 0.5rem;
-//   align-items: center;
-// }
-
 .vs-column-filter {
   display: inline-flex;
   align-items: center;
@@ -1023,111 +1187,69 @@
   }
 }
 
-/* Utility Classes */
-.vs-text-center {
-  text-align: center;
-}
-.vs-text-left {
-  text-align: left;
-}
-.vs-text-right {
-  text-align: right;
-}
-.vs-text-muted {
-  color: var(--vs-secondary);
-}
-.vs-text-primary {
-  color: var(--vs-primary);
-}
-.vs-text-success {
-  color: var(--vs-success);
-}
-.vs-text-danger {
-  color: var(--vs-danger);
-}
-.vs-text-warning {
-  color: var(--vs-warning);
+.vs-sticky-left {
+  position: sticky;
+  background: white;
+  z-index: 3;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
 }
 
-.vs-bg-primary {
-  background-color: var(--vs-primary);
-}
-.vs-bg-success {
-  background-color: var(--vs-success);
-}
-.vs-bg-danger {
-  background-color: var(--vs-danger);
-}
-.vs-bg-warning {
-  background-color: var(--vs-warning);
-}
-.vs-bg-light {
-  background-color: var(--vs-light);
+.vs-sticky-right {
+  position: sticky;
+  background: white;
+  z-index: 3;
+  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.05);
 }
 
-.vs-border {
-  border: 1px solid var(--vs-table-border);
-}
-.vs-border-top {
-  border-top: 1px solid var(--vs-table-border);
-}
-.vs-border-bottom {
-  border-bottom: 1px solid var(--vs-table-border);
-}
-.vs-border-left {
-  border-left: 1px solid var(--vs-table-border);
-}
-.vs-border-right {
-  border-right: 1px solid var(--vs-table-border);
+/* Dynamic shadow indicator */
+.vs-table-container.has-left-shadow::before,
+.vs-table-container.has-right-shadow::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 12px;
+  pointer-events: none;
+  z-index: 3;
 }
 
-.vs-rounded {
-  border-radius: var(--vs-border-radius);
-}
-.vs-rounded-sm {
-  border-radius: var(--vs-border-radius-sm);
-}
-.vs-rounded-lg {
-  border-radius: var(--vs-border-radius-lg);
+.vs-table-container.has-left-shadow::before {
+  left: 0;
+  box-shadow: inset 6px 0 6px -6px rgba(0, 0, 0, 0.1);
 }
 
-.vs-shadow {
-  box-shadow: var(--vs-shadow);
-}
-.vs-shadow-sm {
-  box-shadow: var(--vs-shadow-sm);
-}
-.vs-shadow-lg {
-  box-shadow: var(--vs-shadow-lg);
+.vs-table-container.has-right-shadow::after {
+  right: 0;
+  box-shadow: inset -6px 0 6px -6px rgba(0, 0, 0, 0.1);
 }
 
-/* Animation Classes */
-.vs-fade-in {
-  animation: vs-fade-in 0.3s ease-in-out;
+/* Sticky Header */
+.vs-sticky-header-wrapper {
+  overflow-y: auto;
+  overflow-x: auto;
+  position: relative;
+  max-height: calc(100vh - 250px);
+  scrollbar-gutter: stable;
+  background-color: white;
 }
 
-@keyframes vs-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.vs-sticky-header-wrapper thead {
+  background: var(--vs-table-bg, #fff);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  transition: transform 0.1s ease-out;
 }
 
-.vs-slide-in {
-  animation: vs-slide-in 0.3s ease-in-out;
+.vs-sticky-header-wrapper thead th {
+  background: var(--vs-table-bg, #fff);
+  position: sticky;
+  top: 0;
+  // z-index: 2;
 }
 
-@keyframes vs-slide-in {
-  from {
-    transform: translateX(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
+.vs-group-header.vs-sticky-left,
+.vs-group-header.vs-sticky-right {
+  background: var(--vs-table-bg, #fff);
+  // z-index: 5 !important;
+}

package/plugins/export/shims-jspdf-autotable.d.ts

@@ -1 +0,0 @@
-declare module 'jspdf-autotable';

package/plugins/export/shims-jspdf.d.ts

@@ -1 +0,0 @@
-declare module 'jspdf';