@wishbone-media/spark 0.46.0 → 0.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/assets/css/spark-table.css

@@ -37,7 +37,8 @@
     }
 
     td {
-      @apply px-6 py-4 whitespace-nowrap text-gray-500 text-sm align-middle h-auto;
+      @apply whitespace-nowrap text-gray-500 text-sm align-middle h-auto;
+      padding: var(--spark-table-cell-py, 16px) var(--spark-table-cell-px, 24px);
       @apply !border-l-0 !border-r-0 !border-gray-200;
 
       &:not(.read-only) {
@@ -48,6 +49,18 @@
     td:not(:last-child) {
       @apply !border-r-0;
     }
+
+    td.spark-table-word-wrap {
+      @apply whitespace-normal break-words;
+    }
+
+    td.spark-table-align-center {
+      @apply text-center;
+    }
+
+    td.spark-table-align-right {
+      @apply text-right;
+    }
   }
 }
 
@@ -66,7 +79,7 @@
     @apply text-left text-xs font-semibold bg-gray-50 text-gray-800 whitespace-normal
         tracking-wider focus:outline-hidden filter flex items-center;
 
-    @apply !px-5 !py-3;
+    padding: var(--spark-table-header-py, 12px) var(--spark-table-header-px, 20px) !important;
 
     .fa-sort-up,
     .fa-sort-down {
@@ -119,7 +132,8 @@
 }
 
 .spark-table-head-sorting {
-  @apply absolute right-5 w-5 h-5 border border-gray-200 rounded-md grid place-items-center;
+  @apply absolute w-5 h-5 border border-gray-200 rounded-md grid place-items-center;
+  right: var(--spark-table-header-px, 20px);
 }
 
 .spark-table-head-title-wrapper {

package/src/components/SparkTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="spark-table">
+  <div class="spark-table" :style="spacingStyles">
     <!-- Header Toolbar: All plugins flow left to right -->
     <SparkTableToolbar
       v-if="sparkTable.computed.ready && headerPlugins && headerPlugins.length"
@@ -75,6 +75,12 @@ const defaultTableSettings = {
   readOnlyCellClassName: 'read-only',
   licenseKey: 'non-commercial-and-evaluation',
 }
+
+const spacingPresets = {
+  sm: { cellPx: 12, cellPy: 8, headerPx: 12, headerPy: 12 },
+  base: { cellPx: 24, cellPy: 16, headerPx: 20, headerPy: 12 },
+  lg: { cellPx: 32, cellPy: 20, headerPx: 24, headerPy: 16 },
+}
 </script>
 <script setup>
 import { computed, onMounted, onUnmounted, ref, reactive, inject, watch } from 'vue'
@@ -178,6 +184,23 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+
+  spacing: {
+    type: [String, Object],
+    default: null,
+  },
+})
+
+const spacingStyles = computed(() => {
+  if (!props.spacing) return {}
+  const values = typeof props.spacing === 'string' ? spacingPresets[props.spacing] : props.spacing
+  if (!values) return {}
+  const styles = {}
+  if (values.cellPx !== undefined) styles['--spark-table-cell-px'] = `${values.cellPx}px`
+  if (values.cellPy !== undefined) styles['--spark-table-cell-py'] = `${values.cellPy}px`
+  if (values.headerPx !== undefined) styles['--spark-table-header-px'] = `${values.headerPx}px`
+  if (values.headerPy !== undefined) styles['--spark-table-header-py'] = `${values.headerPy}px`
+  return styles
 })
 
 registerAllCellTypes()
@@ -356,40 +379,76 @@ const sparkTable = reactive({
     ...props.options,
   })),
 
-  tableSettings: computed(() => ({
-    ...defaultTableSettings,
-    nestedHeaders: get(props.settings, 'nestedHeaders', []),
-    ...(!get(props.settings, 'nestedHeaders') && {
-      afterGetColHeader: (col, th) => customiseHeader(col, th, sparkTable),
-    }),
-    afterChange: (changes, source) => updateRow(changes, source, sparkTable),
-    afterRender: () => syncSortClasses(sparkTable),
-    beforeStretchingColumnWidth: (stretchedWidth, column) => {
-      const columns = get(props.settings, 'columns', [])
-      const columnSettings = columns[column]
-      if (columnSettings && columnSettings.width !== undefined) {
-        return columnSettings.width
-      }
-      return stretchedWidth
-    },
-    beforeCopy: (data, coords) => {
-      const hot = table.value?.hotInstance
-      if (!hot) return
-      coords.forEach((range) => {
-        for (let row = range.startRow; row <= range.endRow; row++) {
-          for (let col = range.startCol; col <= range.endCol; col++) {
-            const td = hot.getCell(row, col)
-            if (td) {
-              const dataRow = row - coords[0].startRow
-              const dataCol = col - coords[0].startCol
-              data[dataRow][dataCol] = td.dataset.copyValue ?? td.textContent ?? ''
+  tableSettings: computed(() => {
+    const columns = get(props.settings, 'columns', [])
+
+    const transformedColumns = columns.map((col) => {
+      if (!col.wordWrap && !col.align) return col
+      const classes = [col.className]
+      if (col.wordWrap) classes.push('spark-table-word-wrap')
+      if (col.align === 'center') classes.push('spark-table-align-center')
+      if (col.align === 'right') classes.push('spark-table-align-right')
+      return { ...col, className: classes.filter(Boolean).join(' ') }
+    })
+
+    const hasClampedColumns = columns.some(
+      (col) => typeof col.wordWrap === 'object' && col.wordWrap?.maxLines,
+    )
+
+    const userAfterRenderer = props.settings.afterRenderer
+
+    return {
+      ...defaultTableSettings,
+      nestedHeaders: get(props.settings, 'nestedHeaders', []),
+      ...(!get(props.settings, 'nestedHeaders') && {
+        afterGetColHeader: (col, th) => customiseHeader(col, th, sparkTable),
+      }),
+      afterChange: (changes, source) => updateRow(changes, source, sparkTable),
+      afterRender: () => syncSortClasses(sparkTable),
+      beforeStretchingColumnWidth: (stretchedWidth, column) => {
+        const columnSettings = columns[column]
+        if (columnSettings && columnSettings.width !== undefined) {
+          return columnSettings.width
+        }
+        return stretchedWidth
+      },
+      beforeCopy: (data, coords) => {
+        const hot = table.value?.hotInstance
+        if (!hot) return
+        coords.forEach((range) => {
+          for (let row = range.startRow; row <= range.endRow; row++) {
+            for (let col = range.startCol; col <= range.endCol; col++) {
+              const td = hot.getCell(row, col)
+              if (td) {
+                const dataRow = row - coords[0].startRow
+                const dataCol = col - coords[0].startCol
+                data[dataRow][dataCol] = td.dataset.copyValue ?? td.textContent ?? ''
+              }
             }
           }
-        }
-      })
-    },
-    ...props.settings,
-  })),
+        })
+      },
+      ...props.settings,
+      columns: transformedColumns,
+      ...(hasClampedColumns && {
+        afterRenderer: (td, row, col) => {
+          userAfterRenderer?.(td, row, col)
+          const colConfig = columns[col]
+          const wordWrap = colConfig?.wordWrap
+          if (!wordWrap || wordWrap === true || !wordWrap.maxLines) return
+
+          const wrapper = document.createElement('div')
+          wrapper.style.display = '-webkit-box'
+          wrapper.style.webkitBoxOrient = 'vertical'
+          wrapper.style.webkitLineClamp = wordWrap.maxLines
+          wrapper.style.overflow = 'hidden'
+
+          while (td.firstChild) wrapper.appendChild(td.firstChild)
+          td.appendChild(wrapper)
+        },
+      }),
+    }
+  }),
 })
 
 // Empty state detection - true when data has loaded but contains no records