feat: auto adjust actions column

lib/components/STable.vue

@@ -12,6 +12,7 @@ import {
   watch
 } from 'vue'
 import { type Table } from '../composables/Table'
+import { getTextWidth } from '../support/Text'
 import SInputCheckbox from './SInputCheckbox.vue'
 import SSpinner from './SSpinner.vue'
 import STableCell from './STableCell.vue'
@@ -204,6 +205,52 @@ useResizeObserver(block, ([entry]) => {
 
 const resizeObserver = useResizeObserver(head, handleResize)
 
+const font = typeof document !== 'undefined'
+  ? `500 12px ${getComputedStyle(document.body).fontFamily}`
+  : '500 12px Inter'
+
+const actionsColumnWidth = computed(() => {
+  const { cell } = unref(props.options.columns).actions
+
+  if (
+    typeof document === 'undefined'
+    || !cell
+    || typeof cell === 'function'
+    || cell.type !== 'actions'
+  ) {
+    return undefined
+  }
+
+  const { actions } = cell
+
+  const widths = actions.map((action) => {
+    // has only icon
+    if (action.icon && !action.label) {
+      return 1 /* border */ + 5 /* padding */ + 16 /* icon */ + 5 /* padding */ + 1 /* border */
+    }
+
+    // has only label
+    if (action.label && !action.icon) {
+      return 1 /* border */ + 12 /* padding */ + getTextWidth(action.label, font) + 12 /* padding */ + 1 /* border */
+    }
+
+    // has both icon and label
+    if (action.icon && action.label) {
+      return 1 /* border */ + 8 /* padding */ + 16 /* icon */ + 4 /* padding */ + getTextWidth(action.label, font) + 10 /* padding */ + 1 /* border */
+    }
+
+    return 0
+  })
+
+  return (widths.reduce((a, b) => a + b, 0) + 16).toFixed(2)
+})
+
+watch(actionsColumnWidth, (newValue) => {
+  if (newValue) {
+    updateColWidth('actions', `${newValue}px`)
+  }
+}, { immediate: true, flush: 'post' })
+
 function stopObserving() {
   const orders = ordersToShow.value
   const lastOrder

lib/support/Text.ts

@@ -0,0 +1,25 @@
+// Adapted from https://stackoverflow.com/a/21015393/11613622
+
+let _canvas: HTMLCanvasElement
+
+export function getTextWidth(text: string, font: string): number
+export function getTextWidth(text: string, el: HTMLElement): number
+
+export function getTextWidth(text: string, fontOrEl: string | HTMLElement): number {
+  const canvas = _canvas || (_canvas = document.createElement('canvas'))
+  const context = canvas.getContext('2d')!
+  context.font = typeof fontOrEl === 'string' ? fontOrEl : getCanvasFont(fontOrEl)
+  const metrics = context.measureText(text)
+
+  return metrics.width
+}
+
+function getCanvasFont(el: HTMLElement) {
+  const {
+    fontWeight = 'normal',
+    fontSize = '16px',
+    fontFamily = 'Times New Roman'
+  } = getComputedStyle(el)
+
+  return `${fontWeight} ${fontSize} ${fontFamily}`
+}

stories/components/STable.01_Playground.story.vue

@@ -371,7 +371,6 @@ function updateTagsFilter(value: string) {
 .table :deep(.col-width)     { --table-col-width: 128px; }
 .table :deep(.col-tags)      { --table-col-width: 192px; }
 .table :deep(.col-createdAt) { --table-col-width: 192px; }
-.table :deep(.col-actions)   { --table-col-width: 100px; }
 
 .table {
   margin-bottom: 16px;