webcake-ui-kit 1.1.28 → 1.1.29

package/src/components/table/Table.vue

@@ -1,22 +1,40 @@
 <template>
   <div
-    :class="['ui-table', bordered && 'ui-table--bordered', hasVerticalScroll && 'ui-table--scroll-y']"
+    :class="[
+      'ui-table',
+      bordered && 'ui-table--bordered',
+      isFixedLayout && 'ui-table--scroll-y',
+      resizeState && 'ui-table--resizing'
+    ]"
     :style="containerStyle"
   >
     <table class="ui-table__table" :style="tableStyle">
       <colgroup>
+        <col v-if="hasDrag" class="ui-table__col ui-table__col--drag" />
         <col v-if="hasSelection" class="ui-table__col ui-table__col--selection" />
         <col v-for="col in normalizedColumns" :key="col._key" :style="col._style" />
       </colgroup>
-      <thead class="ui-table__head">
+      <thead ref="tableHead" class="ui-table__head">
         <tr
           :class="['ui-table__row', 'ui-table__row--head', scrollbarWidth > 0 && 'ui-table__row--has-scrollbar']"
-          :style="{ height: toCssSize(headerHeight) }"
+          :style="[{ height: toCssSize(headerHeight) }, rowScrollStyle]"
         >
+          <th
+            v-if="hasDrag"
+            :class="['ui-table__cell', 'ui-table__th', 'ui-table__cell--drag', 'ui-table__cell--fixed-left']"
+            :style="[headCellStyle(0), { left: '0px' }]"
+            aria-hidden="true"
+          />
           <th
             v-if="hasSelection"
-            class="ui-table__cell ui-table__th ui-table__cell--selection"
-            :style="headCellStyle(0)"
+            :class="[
+              'ui-table__cell',
+              'ui-table__th',
+              'ui-table__cell--selection',
+              'ui-table__cell--fixed-left',
+              !prefixStickyLeft && 'ui-table__cell--fixed-left-last'
+            ]"
+            :style="[headCellStyle(hasDrag ? 1 : 0), { left: selectionStickyOffset + 'px' }]"
           >
             <WkCheckbox :checked="allSelected" :disabled="!rows.length" @change="onToggleAll" />
           </th>
@@ -26,40 +44,55 @@
             :class="[
               'ui-table__cell',
               'ui-table__th',
+              'ui-table__th-flex',
               `ui-table__cell--${col._align}`,
-              col._isSortable && 'ui-table__th--sortable'
+              col._isSortable && 'ui-table__th--sortable',
+              col._fixed && `ui-table__cell--fixed-${col._fixed}`,
+              col._isLastFixedLeft && 'ui-table__cell--fixed-left-last',
+              col._isFirstFixedRight && 'ui-table__cell--fixed-right-first'
+            ]"
+            :style="[
+              headCellStyle((hasDrag ? 1 : 0) + (hasSelection ? 1 : 0) + i, col),
+              col._fixed === 'left' ? { [col._fixed]: col._stickyOffset + 'px' } : {},
+              col._fixed === 'right' ? { [col._fixed]: col._stickyOffset + 'px' } : {}
             ]"
-            :style="headCellStyle(hasSelection ? i + 1 : i, col)"
             :tabindex="col._isSortable ? 0 : undefined"
             :aria-sort="col._ariaSort"
             @click="onHeaderClick(col)"
             @keydown.enter.prevent="onHeaderClick(col)"
             @keydown.space.prevent="onHeaderClick(col)"
-            v-bind="customHeaderAttrs(col, i)"
-            v-on="customHeaderListeners(col, i)"
+            v-bind="col._headerAttrs"
+            v-on="col._headerListeners"
           >
-            <span class="ui-table__th-inner">
-              <slot name="headerCell" :column="col">{{ col.title }}</slot>
-              <span
-                v-if="col._isSortable"
-                :class="['ui-table__sort', col._sortState ? 'ui-table__sort--active' : 'ui-table__sort--inactive']"
-                aria-hidden="true"
-              >
-                <WkiArrowUp v-if="col._sortState === 'ascend'" :size="16" />
-                <WkiArrowDown v-else-if="col._sortState === 'descend'" :size="16" />
-                <WkiArrowDownUp v-else :size="16" />
+            <div class="ui-table__th-inner-wrap">
+              <span class="ui-table__th-inner">
+                <slot name="headerCell" :column="col">{{ col.title }}</slot>
+                <span
+                  v-if="col._isSortable"
+                  :class="['ui-table__sort', col._sortState ? 'ui-table__sort--active' : 'ui-table__sort--inactive']"
+                  aria-hidden="true"
+                >
+                  <WkiArrowUp v-if="col._sortState === 'ascend'" :size="16" />
+                  <WkiArrowDown v-else-if="col._sortState === 'descend'" :size="16" />
+                  <WkiArrowDownUp v-else :size="16" />
+                </span>
               </span>
-            </span>
+              <div
+                v-if="col._resizable"
+                :class="['ui-table__resize-handle', col._fixed === 'right' && 'ui-table__resize-handle--left']"
+                @pointerdown.stop.prevent="onResizeStart($event, col, i)"
+              />
+            </div>
           </th>
           <th
             v-if="scrollbarWidth > 0"
             class="ui-table__th--scrollbar"
-            :style="{ width: scrollbarWidth + 'px' }"
+            :style="{ width: scrollbarWidth + 'px', position: 'sticky', right: '0px' }"
             aria-hidden="true"
           />
         </tr>
       </thead>
-      <tbody class="ui-table__body" :style="bodyStyle" @scroll="onBodyScroll">
+      <tbody ref="tableBody" class="ui-table__body" :style="bodyStyle" @scroll="onBodyScroll" @dragleave="onDragLeave">
         <tr v-if="!rows.length" class="ui-table__row ui-table__row--empty">
           <td class="ui-table__cell ui-table__empty-cell" :colspan="totalColumns">
             <slot name="emptyText">
@@ -73,24 +106,51 @@
             <td class="ui-table__spacer-cell" :colspan="totalColumns" />
           </tr>
           <tr
-            v-for="(record, i) in renderRows"
-            :key="getRowKey(record, rowIndex(i))"
+            v-for="row in mappedRenderRows"
+            :key="row._key"
+            :ref="'row-' + row._key"
             :class="[
               'ui-table__row',
               'ui-table__row--body',
-              isSelected(record, rowIndex(i)) && 'ui-table__row--selected'
+              row._selected && 'ui-table__row--selected',
+              hasDrag && dragState && row._index === dragState.fromIndex && 'ui-table__row--dragging',
+              hasDrag &&
+                row._index === dragOverIndex &&
+                dragState &&
+                row._index !== dragState.fromIndex &&
+                'ui-table__row--drag-over'
             ]"
-            :style="{ height: toCssSize(rowHeight) }"
-            v-bind="customRowAttrs(record, rowIndex(i))"
-            v-on="customRowListeners(record, rowIndex(i))"
-            @click="hasSelection ? onRowClick(record, rowIndex(i), $event) : undefined"
+            :style="[{ height: toCssSize(rowHeight) }, rowScrollStyle]"
+            v-bind="row._attrs"
+            v-on="row._listeners"
+            @click="hasSelection ? onRowClick(row._record, row._index, $event) : undefined"
+            @dragover.prevent="onDragOver($event, row._index)"
+            @drop.prevent="onDrop($event, row._index)"
           >
+            <td
+              v-if="hasDrag"
+              :class="['ui-table__cell', 'ui-table__td', 'ui-table__cell--drag', 'ui-table__cell--fixed-left']"
+              :style="[{ left: '0px' }]"
+              draggable="true"
+              @dragstart.stop="onDragStart($event, row)"
+              @dragend="onDragEnd"
+              @click.stop
+            >
+              <WkiGripVertical :size="16" />
+            </td>
             <td
               v-if="hasSelection"
-              class="ui-table__cell ui-table__td ui-table__cell--selection"
-              @click.stop="onSelectionCellClick(record, rowIndex(i), $event)"
+              :class="[
+                'ui-table__cell',
+                'ui-table__td',
+                'ui-table__cell--selection',
+                'ui-table__cell--fixed-left',
+                !prefixStickyLeft && 'ui-table__cell--fixed-left-last'
+              ]"
+              :style="[{ left: selectionStickyOffset + 'px' }]"
+              @click.stop="onSelectionCellClick(row._record, row._index, $event)"
             >
-              <WkCheckbox :checked="isSelected(record, rowIndex(i))" />
+              <WkCheckbox :checked="row._selected" />
             </td>
             <td
               v-for="col in normalizedColumns"
@@ -99,13 +159,26 @@
                 'ui-table__cell',
                 'ui-table__td',
                 `ui-table__cell--${col._align}`,
-                col.ellipsis && 'ui-table__cell--ellipsis'
+                col.ellipsis && 'ui-table__cell--ellipsis',
+                col._fixed && `ui-table__cell--fixed-${col._fixed}`,
+                col._isLastFixedLeft && 'ui-table__cell--fixed-left-last',
+                col._isFirstFixedRight && 'ui-table__cell--fixed-right-first'
+              ]"
+              :style="[
+                col._style,
+                col._fixed
+                  ? { [col._fixed]: col._stickyOffset - (col._fixed === 'right' ? scrollbarWidth : 0) + 'px' }
+                  : {}
               ]"
-              :style="col._style"
             >
-              <slot name="bodyCell" :column="col" :record="record" :text="cellText(col, record)" :index="rowIndex(i)">{{
-                cellText(col, record)
-              }}</slot>
+              <slot
+                name="bodyCell"
+                :column="col"
+                :record="row._record"
+                :text="cellText(col, row._record)"
+                :index="row._index"
+                >{{ cellText(col, row._record) }}</slot
+              >
             </td>
           </tr>
           <!-- Bottom spacer reserves the height of the rows below the window. -->
@@ -126,9 +199,7 @@
 <script>
 import WkCheckbox from '../checkbox/Checkbox.vue'
 import WkEmpty from '../empty/Empty.vue'
-import WkiArrowUp from '../../icons/ArrowUp.vue'
-import WkiArrowDown from '../../icons/ArrowDown.vue'
-import WkiArrowDownUp from '../../icons/ArrowDownUp.vue'
+import { WkiGripVertical, WkiArrowDown, WkiArrowDownUp, WkiArrowUp } from '../../icons'
 import { toCssSize } from '../../utils/common'
 import { computeVirtualWindow } from '../../utils/virtualScroll'
 
@@ -140,9 +211,11 @@ function defaultCompare(a, b) {
   return String(a).localeCompare(String(b))
 }
 
+const EMPTY_BINDINGS = Object.freeze({ attrs: {}, on: {} })
+
 export default {
   name: 'Table',
-  components: { WkCheckbox, WkEmpty, WkiArrowUp, WkiArrowDown, WkiArrowDownUp },
+  components: { WkCheckbox, WkEmpty, WkiGripVertical, WkiArrowDown, WkiArrowDownUp, WkiArrowUp },
   props: {
     // Column descriptors: { title, dataIndex, key?, width?, align?, sorter?, ellipsis? }
     columns: { type: Array, default: () => [] },
@@ -154,6 +227,7 @@ export default {
     bordered: { type: Boolean, default: false },
     // Render a leading checkbox column for row selection.
     rowSelection: { type: Boolean, default: false },
+    isDrag: { type: Boolean, default: false },
     // Controlled selection — array of selected row keys.
     selectedRowKeys: { type: Array, default: () => [] },
     // Placeholder shown when dataSource is empty.
@@ -173,7 +247,7 @@ export default {
     // Extra rows rendered above and below the viewport to cushion fast scrolling.
     overscan: { type: Number, default: 8 }
   },
-  emits: ['change', 'sort-change', 'update:selectedRowKeys', 'selection-change'],
+  emits: ['change', 'sort-change', 'update:selectedRowKeys', 'selection-change', 'drag-record'],
   data() {
     return {
       sortField: null,
@@ -185,7 +259,11 @@ export default {
       scrollTop: 0,
       containerHeight: 0,
       rafId: null,
-      toCssSize
+      toCssSize,
+      resizeState: null,
+      columnWidths: {},
+      dragState: null,
+      dragOverIndex: null
     }
   },
   computed: {
@@ -193,11 +271,31 @@ export default {
       return new Set(this.internalSelected)
     },
     normalizedColumns() {
-      return this.columns.map(col => {
+      const prefixDomCount = (this.hasDrag ? 1 : 0) + (this.hasSelection ? 1 : 0)
+
+      const domWidth = domIdx => {
+        const dataIdx = domIdx - prefixDomCount
+        if (dataIdx >= 0 && dataIdx < this.columns.length) {
+          const col = this.columns[dataIdx]
+          const key = col.key != null ? col.key : col.dataIndex
+          // resize override > DOM measurement > width prop
+          if (key != null && this.columnWidths[key] != null) return this.columnWidths[key]
+          if (this.colWidths[domIdx] != null) return this.colWidths[domIdx]
+          const w = col.width
+          return w != null ? (typeof w === 'number' ? w : parseFloat(w) || 0) : 0
+        }
+        // prefix columns (drag, selection) — DOM only, no prop fallback
+        return this.colWidths[domIdx] != null ? this.colWidths[domIdx] : 0
+      }
+
+      const cols = this.columns.map((col, i) => {
         const _key = col.key != null ? col.key : col.dataIndex
         const _align = ['left', 'right', 'center'].includes(col.align) ? col.align : 'left'
+        const overrideW = this.columnWidths[_key]
         let _style = {}
-        if (col.width != null) {
+        if (overrideW != null) {
+          _style = { width: `${overrideW}px` }
+        } else if (col.width != null) {
           _style = { width: typeof col.width === 'number' ? `${col.width}px` : col.width }
         }
         const _isSortable = !!col.sorter
@@ -212,6 +310,10 @@ export default {
         if (_sortState === 'ascend') _ariaSort = 'ascending'
         else if (_sortState === 'descend') _ariaSort = 'descending'
 
+        // Pre-compute header bindings once per column instead of calling
+        // customHeaderAttrs / customHeaderListeners every render.
+        const _headerBindings = this.customHeader ? this.splitBindings(this.customHeader(col, i)) : EMPTY_BINDINGS
+        const _fixed = col.fixed === 'left' ? 'left' : col.fixed === 'right' ? 'right' : null
         return {
           ...col,
           _key,
@@ -220,15 +322,62 @@ export default {
           _isSortable,
           _field,
           _sortState,
-          _ariaSort
+          _ariaSort,
+          _headerAttrs: _headerBindings.attrs,
+          _headerListeners: _headerBindings.on,
+          _fixed,
+          _isLastFixedLeft: false,
+          _isLastFixedRight: false,
+          _resizable: col.resizable != null ? col.resizable : false
         }
       })
+
+      let leftAccum = 0
+      for (let i = 0; i < prefixDomCount; i++) leftAccum += domWidth(i)
+      for (let i = 0; i < cols.length; i++) {
+        cols[i]._stickyOffset = leftAccum
+        leftAccum += domWidth(prefixDomCount + i)
+      }
+
+      let rightAccum = this.scrollbarWidth
+      for (let i = cols.length - 1; i >= 0; i--) {
+        if (cols[i]._fixed === 'right') {
+          cols[i]._stickyOffset = rightAccum
+          rightAccum += domWidth(prefixDomCount + i)
+        }
+      }
+
+      let lastLeftIdx,
+        firstRightIdx = -1
+      for (let i = 0; i < cols.length; i++) {
+        if (cols[i]._fixed === 'left') lastLeftIdx = i
+        if (cols[i]._fixed === 'right' && firstRightIdx === -1) firstRightIdx = i
+      }
+
+      if (lastLeftIdx >= 0) cols[lastLeftIdx]._isLastFixedLeft = true
+      if (firstRightIdx >= 0) cols[firstRightIdx]._isFirstFixedRight = true
+
+      return cols
     },
     hasSelection() {
       return !!this.rowSelection
     },
+    hasDrag() {
+      return !!this.isDrag
+    },
+    // True when any data column is fixed-left — prefix columns must also become sticky.
+    prefixStickyLeft() {
+      return this.normalizedColumns.some(c => c._fixed === 'left')
+    },
+    hasStickyRight() {
+      return this.normalizedColumns.some(c => c._fixed === 'right')
+    },
+    // Pixel offset of the selection column when sticky (sits after the drag column).
+    selectionStickyOffset() {
+      return this.hasDrag ? (this.colWidths[0] != null ? this.colWidths[0] : 44) : 0
+    },
     totalColumns() {
-      return this.columns.length + (this.hasSelection ? 1 : 0)
+      return this.columns.length + (this.hasDrag ? 1 : 0) + (this.hasSelection ? 1 : 0)
     },
     rows() {
       const data = this.dataSource.slice()
@@ -245,22 +394,33 @@ export default {
       if (!this.rows.length) return false
       return this.rows.every((record, index) => this.selectedKeysSet.has(this.getRowKey(record, index)))
     },
-    hasVerticalScroll() {
-      return this.height != null || !!(this.scroll && this.scroll.y != null)
-    },
-    containerStyle() {
+    isFixedLayout() {
       const scroll = this.scroll || {}
-      return scroll.x != null ? { overflowX: 'auto' } : {}
+      return this.height != null || scroll.y != null || scroll.x != null
     },
-    bodyStyle() {
-      const scroll = this.scroll || {}
-      if (this.height != null) return { height: toCssSize(this.height) }
-      if (scroll.y != null) return { maxHeight: toCssSize(scroll.y) }
+    containerStyle() {
       return {}
     },
     tableStyle() {
+      return {}
+    },
+    rowScrollStyle() {
       const scroll = this.scroll || {}
-      return scroll.x != null ? { minWidth: toCssSize(scroll.x) } : {}
+      return scroll.x != null && this.isFixedLayout ? { minWidth: toCssSize(scroll.x) } : {}
+    },
+    bodyStyle() {
+      const scroll = this.scroll || {}
+      const style = {}
+      if (this.height != null) {
+        style.height = toCssSize(this.height)
+      } else if (scroll.y != null) {
+        style.maxHeight = toCssSize(scroll.y)
+      }
+      if (this.isFixedLayout) {
+        style.overflowY = scroll.y != null || this.height != null ? 'auto' : 'visible'
+        style.overflowX = scroll.x != null ? 'auto' : 'hidden'
+      }
+      return style
     },
     // Numeric row height — virtualization needs a fixed px value. String sizes are
     // parsed (e.g. '40px' -> 40); anything unparseable falls back to the prop default.
@@ -271,7 +431,8 @@ export default {
     },
     // Virtualization is only meaningful inside a bounded, scrollable viewport.
     isVirtual() {
-      return this.virtual && this.hasVerticalScroll && this.rows.length > 0
+      // Virtualization is only meaningful inside a bounded vertical viewport.
+      return this.virtual && (this.height != null || (this.scroll && this.scroll.y != null)) && this.rows.length > 0
     },
     virtualWindow() {
       return computeVirtualWindow({
@@ -283,16 +444,41 @@ export default {
       })
     },
     // Rows actually committed to the DOM: a slice when virtual, otherwise everything.
-    renderRows() {
+    slicedRenderRows() {
       if (!this.isVirtual) return this.rows
       return this.rows.slice(this.virtualWindow.startIndex, this.virtualWindow.endIndex)
     },
+    // Pre-compute key, index, selected state, and customRow bindings for each row.
+    // This eliminates repeated method calls (getRowKey, rowIndex, isSelected,
+    // customRowAttrs, customRowListeners) inside the v-for template.
+    mappedRenderRows() {
+      const startIndex = this.isVirtual ? this.virtualWindow.startIndex : 0
+      const hasCustomRow = !!this.customRow
+      return this.slicedRenderRows.map((record, i) => {
+        const index = startIndex + i
+        const key = this.getRowKey(record, index)
+        const selected = this.selectedKeysSet.has(key)
+        const bindings = hasCustomRow ? this.splitBindings(this.customRow(record, index)) : EMPTY_BINDINGS
+        return {
+          _record: record,
+          _index: index,
+          _key: key,
+          _selected: selected,
+          _attrs: bindings.attrs,
+          _listeners: bindings.on
+        }
+      })
+    },
+    // Kept as aliases so template references (renderRows) don't break if used externally.
+    renderRows() {
+      return this.mappedRenderRows
+    },
     topSpacerHeight() {
       return this.isVirtual ? this.virtualWindow.offsetY : 0
     },
     bottomSpacerHeight() {
       if (!this.isVirtual) return 0
-      const rendered = this.renderRows.length * this.rowHeightPx
+      const rendered = this.slicedRenderRows.length * this.rowHeightPx
       return Math.max(0, this.virtualWindow.totalHeight - this.virtualWindow.offsetY - rendered)
     }
   },
@@ -302,11 +488,7 @@ export default {
     }
   },
   mounted() {
-    this.$nextTick(this.syncScrollbarGutter)
-    window.addEventListener('resize', this.onResize)
-  },
-  updated() {
-    this.$nextTick(this.syncScrollbarGutter)
+    this.initResizeObserver()
   },
   // Declare both teardown hooks: Vue 2.7 fires beforeDestroy, Vue 3.4 fires beforeUnmount.
   // The runtime that doesn't recognize a hook simply ignores it.
@@ -334,52 +516,56 @@ export default {
       }
       return { attrs, on }
     },
-    customRowAttrs(record, index) {
-      return this.customRow ? this.splitBindings(this.customRow(record, index)).attrs : {}
-    },
-    customRowListeners(record, index) {
-      return this.customRow ? this.splitBindings(this.customRow(record, index)).on : {}
-    },
-    customHeaderAttrs(col, index) {
-      return this.customHeader ? this.splitBindings(this.customHeader(col, index)).attrs : {}
-    },
-    customHeaderListeners(col, index) {
-      return this.customHeader ? this.splitBindings(this.customHeader(col, index)).on : {}
-    },
     teardown() {
-      window.removeEventListener('resize', this.onResize)
+      if (this._resizeObserver) {
+        this._resizeObserver.disconnect()
+        this._resizeObserver = null
+      }
       if (this.rafId != null) {
         cancelAnimationFrame(this.rafId)
         this.rafId = null
       }
     },
-    onResize() {
-      this.syncScrollbarGutter()
+    // Use ResizeObserver instead of updated() + window resize to measure scrollbar
+    // gutter and container height. This avoids triggering a second render cycle
+    // every time Vue updates the DOM.
+    initResizeObserver() {
+      const body = this.$refs.tableBody
+      if (!body) return
+      this._resizeObserver = new ResizeObserver(() => {
+        this.syncScrollbarGutter()
+      })
+      this._resizeObserver.observe(body)
+      // Initial measurement.
+      this.$nextTick(this.syncScrollbarGutter)
     },
     onBodyScroll(e) {
       const top = e.target.scrollTop
+      const left = e.target.scrollLeft
       // Coalesce bursts of scroll events into a single state update per frame so we
       // re-slice at most once per repaint — keeps 10k+ rows smooth.
       if (this.rafId != null) return
       this.rafId = requestAnimationFrame(() => {
         this.rafId = null
         this.scrollTop = top
+        // Sync horizontal scroll to keep the header aligned with the body.
+        const head = this.$refs.tableHead
+        if (head) head.scrollLeft = left
       })
     },
-    // Absolute index of a rendered row within the full (sorted) dataset.
-    rowIndex(i) {
-      return this.isVirtual ? this.virtualWindow.startIndex + i : i
-    },
     syncScrollbarGutter() {
-      if (!this.$el) return
-      const body = this.$el.querySelector('.ui-table__body')
-      this.scrollbarWidth = body && this.hasVerticalScroll ? body.offsetWidth - body.clientWidth : 0
-      if (body && this.hasVerticalScroll) {
+      const body = this.$refs.tableBody
+      if (!body) return
+
+      const hasY = this.height != null || (this.scroll && this.scroll.y != null)
+      this.scrollbarWidth = hasY ? body.offsetWidth - body.clientWidth : 0
+
+      if (hasY) {
         this.containerHeight = body.clientHeight
       }
 
-      if (this.hasVerticalScroll) {
-        const firstRow = this.$el.querySelector('.ui-table__row--body')
+      if (this.isFixedLayout) {
+        const firstRow = body.querySelector('.ui-table__row--body')
         if (firstRow) {
           const cells = Array.from(firstRow.children)
           const widths = cells.map(c => c.getBoundingClientRect().width)
@@ -397,7 +583,7 @@ export default {
       }
     },
     headCellStyle(index, col = null) {
-      if (this.hasVerticalScroll && this.colWidths[index] !== undefined) {
+      if (this.isFixedLayout && this.colWidths[index] !== undefined) {
         return { width: `${this.colWidths[index]}px` }
       }
       return col ? col._style : {}
@@ -477,6 +663,153 @@ export default {
     onToggleAll(checked) {
       this.internalSelected = checked ? this.rows.map((record, index) => this.getRowKey(record, index)) : []
       this.emitSelection()
+    },
+    onDragStart(e, row) {
+      this.dragState = { fromIndex: row._index, record: row._record }
+      e.dataTransfer.effectAllowed = 'move'
+
+      const tr = e.currentTarget.closest('tr')
+      const rect = tr.getBoundingClientRect()
+      const tableEl = this.$el.querySelector('.ui-table__table')
+
+      // Shallow-clone the full ancestor chain so scoped CSS selectors
+      // (e.g. .ui-table--scroll-y .ui-table__row[data-v-xxx]) still match.
+      const wrapper = this.$el.cloneNode(false)
+      wrapper.style.position = 'fixed'
+      wrapper.style.top = '-9999px'
+      wrapper.style.left = '-9999px'
+      wrapper.style.width = rect.width + 'px'
+      wrapper.style.pointerEvents = 'none'
+
+      const table = tableEl.cloneNode(false)
+      const colgroup = tableEl.querySelector('colgroup')
+      if (colgroup) table.appendChild(colgroup.cloneNode(true))
+
+      const tbody = this.$refs.tableBody.cloneNode(false)
+      tbody.style.overflow = 'visible'
+      tbody.style.maxHeight = 'none'
+      tbody.style.height = 'auto'
+
+      const clonedRow = tr.cloneNode(true)
+      clonedRow.classList.remove('ui-table__row--dragging')
+      clonedRow.classList.add('ui-table__row--drag-preview')
+
+      tbody.appendChild(clonedRow)
+      table.appendChild(tbody)
+      wrapper.appendChild(table)
+      document.body.appendChild(wrapper)
+
+      e.dataTransfer.setDragImage(wrapper, e.clientX - rect.left, e.clientY - rect.top)
+      requestAnimationFrame(() => document.body.removeChild(wrapper))
+    },
+    onDragOver(e, index) {
+      if (!this.dragState) return
+      this.dragOverIndex = index
+    },
+    onDragLeave(e) {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        this.dragOverIndex = null
+      }
+    },
+    onDrop(e, toIndex) {
+      if (!this.dragState) return
+      const { fromIndex, record } = this.dragState
+      if (fromIndex === toIndex) {
+        this.dragState = null
+        this.dragOverIndex = null
+        return
+      }
+      // FLIP — snapshot "First" positions before the data changes.
+      const firstRects = this.snapshotRowRects()
+      this.$emit('drag-record', { record, fromIndex, toIndex }, e)
+      this.dragState = null
+      this.dragOverIndex = null
+      // After Vue re-renders with the new order, run the Invert+Play phase.
+      this.$nextTick(() => this.flipAnimateRows(firstRects))
+    },
+    onDragEnd() {
+      this.dragState = null
+      this.dragOverIndex = null
+    },
+    // FLIP helpers -------------------------------------------------------
+    snapshotRowRects() {
+      const rects = {}
+      this.mappedRenderRows.forEach(row => {
+        const refName = 'row-' + row._key
+        // Vue 2: $refs for v-for are arrays; Vue 3: also arrays
+        const els = this.$refs[refName]
+        const el = Array.isArray(els) ? els[0] : els
+        if (el) {
+          // In Vue 2, el is the DOM node. In Vue 3 with <tr>, el is also the DOM node.
+          const dom = el.$el || el
+          rects[row._key] = dom.getBoundingClientRect()
+        }
+      })
+      return rects
+    },
+    flipAnimateRows(firstRects) {
+      this.mappedRenderRows.forEach(row => {
+        const refName = 'row-' + row._key
+        const els = this.$refs[refName]
+        const el = Array.isArray(els) ? els[0] : els
+        if (!el) return
+        const dom = el.$el || el
+        const first = firstRects[row._key]
+        if (!first) return
+        const last = dom.getBoundingClientRect()
+        const deltaY = first.top - last.top
+        if (Math.abs(deltaY) < 1) return
+        // Invert: jump the row back to its old position.
+        dom.style.transition = 'none'
+        dom.style.transform = `translateY(${deltaY}px)`
+        // Play: animate from inverted position to final position.
+        requestAnimationFrame(() => {
+          dom.style.transition = 'transform 0.25s cubic-bezier(0.22, 1, 0.36, 1)'
+          dom.style.transform = ''
+          const onEnd = () => {
+            dom.style.transition = ''
+            dom.style.transform = ''
+            dom.removeEventListener('transitionend', onEnd)
+          }
+          dom.addEventListener('transitionend', onEnd, { once: true })
+        })
+      })
+    },
+    onResizeStart(e, col, colIndex) {
+      const th = e.currentTarget.closest('th')
+      this.resizeState = {
+        colKey: col._key,
+        domIdx: (this.hasDrag ? 1 : 0) + (this.hasSelection ? 1 : 0) + colIndex,
+        startX: e.clientX,
+        startWidth: th.getBoundingClientRect().width,
+        minWidth: typeof col.minWidth === 'number' ? col.minWidth : 40,
+        reverse: col._fixed === 'right'
+      }
+      e.currentTarget.setPointerCapture(e.pointerId)
+      document.addEventListener('pointermove', this.onResizeMove)
+      document.addEventListener('pointerup', this.onResizeEnd, { once: true })
+    },
+    onResizeMove(e) {
+      if (!this.resizeState) return
+      const { colKey, startX, startWidth, minWidth, reverse } = this.resizeState
+      const delta = reverse ? startX - e.clientX : e.clientX - startX
+      const newWidth = Math.max(minWidth, startWidth + delta)
+      // Spread into a new object so Vue detects the change (direct property
+      this.columnWidths = { ...this.columnWidths, [colKey]: newWidth }
+
+      // colWidths is stale during drag — patch the domIdx slot so sticky
+      // offsets for columns AFTER this one are also correct immediately.
+      const domIdx = this.resizeState.domIdx
+      const next = this.colWidths.slice()
+      next[domIdx] = newWidth
+      this.colWidths = next
+      // Re-measure so colWidths reflects the final DOM state.
+      this.$nextTick(this.syncScrollbarGutter)
+    },
+
+    onResizeEnd() {
+      document.removeEventListener('pointermove', this.onResizeMove)
+      this.resizeState = null
     }
   }
 }