feat(table): auto resize actions column

lib/components/STable.vue

@@ -12,6 +12,7 @@
   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 @@
 
 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(({ icon, label }) => {
+    // has only icon
+    if (icon && !label) {
+      return 1 /* border */ + 5 /* padding */ + 16 /* icon */ + 5 /* padding */ + 1 /* border */
+    }
+
+    // has only label
+    if (label && !icon) {
+      return 1 /* border */ + 12 /* padding */ + getTextWidth(label, font) + 12 /* padding */ + 1 /* border */
+    }
+
+    // has both icon and label
+    if (icon && label) {
+      return 1 /* border */ + 8 /* padding */ + 16 /* icon */ + 4 /* padding */ + getTextWidth(label, font) + 10 /* padding */ + 1 /* border */
+    }
+
+    return 0
+  })
+
+  return 8 /* padding */ + widths.reduce((a, b) => a + b, 0) + 8 /* padding */
+})
+
+watch(actionsColumnWidth, (newValue) => {
+  if (newValue) {
+    updateColWidth('actions', `${newValue}px`)
+  }
+}, { immediate: true, flush: 'post' })
+
 function stopObserving() {
   const orders = ordersToShow.value
   const lastOrder

lib/components/STableCellActions.vue

@@ -31,8 +31,8 @@ defineProps<{
   min-height: 40px;
   display: flex;
   align-items: center;
-  justify-content: center;
   flex-wrap: nowrap;
   flex-direction: row;
+  padding: 0 8px;
 }
 </style>

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}`
+}

lib/types/shims.d.ts

@@ -1,3 +1,7 @@
-declare module 'v-calendar' {
-  export const DatePicker: any
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }

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;