stk-table-vue 0.2.8 → 0.3.0

package/lib/stk-table-vue.js

@@ -1,15 +1,17 @@
-import { onMounted, onBeforeUnmount, watch, ref, shallowRef, computed, defineComponent, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withDirectives, createElementVNode, vShow, Fragment, renderList, createCommentVNode, createBlock, resolveDynamicComponent, renderSlot, toDisplayString, createTextVNode } from "vue";
+import { onMounted, onBeforeUnmount, watch, ref, shallowRef, computed, defineComponent, toRaw, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, resolveDynamicComponent, toDisplayString, renderSlot, createTextVNode } from "vue";
 import { interpolateRgb } from "d3-interpolate";
-const Default_Col_Width = "100";
-const Default_Table_Height = 100;
-const Default_Table_Width = 200;
-const Default_Row_Height = 28;
-const Highlight_Color = {
+const DEFAULT_COL_WIDTH = "100";
+const DEFAULT_TABLE_HEIGHT = 100;
+const DEFAULT_TABLE_WIDTH = 200;
+const DEFAULT_ROW_HEIGHT = 28;
+const HIGHLIGHT_COLOR = {
   light: { from: "#71a2fd", to: "#fff" },
   dark: { from: "#1e4c99", to: "#181c21" }
 };
-const Highlight_Duration = 2e3;
-const Highlight_Color_Change_Freq = 100;
+const HIGHLIGHT_DURATION = 2e3;
+const HIGHLIGHT_FREQ = 1e3 / 30;
+const HIGHLIGHT_ROW_CLASS = "highlight-row";
+const HIGHLIGHT_CELL_CLASS = "highlight-cell";
 let _chromeVersion = 0;
 try {
   const userAgent = navigator.userAgent.match(/chrome\/\d+/i);
@@ -19,13 +21,14 @@ try {
 } catch (e) {
   console.error("Cannot get Chrome version", e);
 }
-const Is_Legacy_Mode = _chromeVersion < 56;
+const IS_LEGACY_MODE = _chromeVersion < 56;
+const STK_ID_PREFIX = "stk";
 var TagType = /* @__PURE__ */ ((TagType2) => {
   TagType2[TagType2["TH"] = 0] = "TH";
   TagType2[TagType2["TD"] = 1] = "TD";
   return TagType2;
 })(TagType || {});
-function useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs }) {
+function useAutoResize({ tableContainerRef, initVirtualScroll, props, debounceMs }) {
   let resizeObserver = null;
   onMounted(() => {
     initResizeObserver();
@@ -35,9 +38,9 @@ function useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs })
   });
   function initResizeObserver() {
     if (window.ResizeObserver) {
-      if (!tableContainer.value) {
+      if (!tableContainerRef.value) {
         const watchDom = watch(
-          () => tableContainer,
+          () => tableContainerRef,
           () => {
             initResizeObserver();
             watchDom();
@@ -46,7 +49,7 @@ function useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs })
         return;
       }
       resizeObserver = new ResizeObserver(resizeCallback);
-      resizeObserver.observe(tableContainer.value);
+      resizeObserver.observe(tableContainerRef.value);
     } else {
       window.addEventListener("resize", resizeCallback);
     }
@@ -197,23 +200,32 @@ function howDeepTheHeader(arr, level = 1) {
   return Math.max(...levels);
 }
 function getColWidth(col) {
-  const val = (col == null ? void 0 : col.width) ?? Default_Col_Width;
+  const val = (col == null ? void 0 : col.minWidth) ?? (col == null ? void 0 : col.width) ?? DEFAULT_COL_WIDTH;
   if (typeof val === "number") {
     return Math.floor(val);
   }
   return parseInt(val);
 }
-function getColWidthStr(col, key = "width") {
-  const val = col == null ? void 0 : col[key];
-  if (typeof val === "number") {
-    return val + "px";
+function getCalculatedColWidth(col) {
+  return (col == null ? void 0 : col.__WIDTH__) ?? +DEFAULT_COL_WIDTH;
+}
+function transformWidthToStr(width) {
+  if (typeof width === "number") {
+    return width + "px";
+  }
+  return width;
+}
+function createStkTableId() {
+  if (!window.__STK_TB_ID_COUNT__) {
+    window.__STK_TB_ID_COUNT__ = 0;
   }
-  return val;
+  window.__STK_TB_ID_COUNT__ += 1;
+  return STK_ID_PREFIX + window.__STK_TB_ID_COUNT__.toString(36);
 }
 function useColResize({
-  tableContainer,
+  tableContainerRef,
   tableHeaderLast,
-  colResizeIndicator,
+  colResizeIndicatorRef,
   props,
   emits,
   colKeyGen
@@ -241,13 +253,13 @@ function useColResize({
     window.removeEventListener("mouseup", onThResizeMouseUp);
   }
   function onThResizeMouseDown(e, col, isPrev = false) {
-    if (!tableContainer.value)
+    if (!tableContainerRef.value)
       return;
     e.stopPropagation();
     e.preventDefault();
     const { clientX } = e;
-    const { scrollLeft, scrollTop } = tableContainer.value;
-    const { left } = tableContainer.value.getBoundingClientRect();
+    const { scrollLeft, scrollTop } = tableContainerRef.value;
+    const { left } = tableContainerRef.value.getBoundingClientRect();
     let colIndex = tableHeaderLast.value.findIndex((it) => colKeyGen(it) === colKeyGen(col));
     if (isPrev) {
       colIndex -= 1;
@@ -262,8 +274,8 @@ function useColResize({
       startX: clientX,
       startOffsetTableX: offsetTableX
     });
-    if (colResizeIndicator.value) {
-      const style = colResizeIndicator.value.style;
+    if (colResizeIndicatorRef.value) {
+      const style = colResizeIndicatorRef.value.style;
       style.display = "block";
       style.left = offsetTableX + "px";
       style.top = scrollTop + "px";
@@ -277,14 +289,14 @@ function useColResize({
     const { lastCol, startX, startOffsetTableX } = colResizeState;
     const { clientX } = e;
     let moveX = clientX - startX;
-    const currentColWidth = getColWidth(lastCol);
+    const currentColWidth = getCalculatedColWidth(lastCol);
     if (currentColWidth + moveX < props.colMinWidth) {
       moveX = -currentColWidth;
     }
     const offsetTableX = startOffsetTableX + moveX;
-    if (!colResizeIndicator.value)
+    if (!colResizeIndicatorRef.value)
       return;
-    colResizeIndicator.value.style.left = offsetTableX + "px";
+    colResizeIndicatorRef.value.style.left = offsetTableX + "px";
   }
   function onThResizeMouseUp(e) {
     if (!isColResizing.value)
@@ -292,7 +304,7 @@ function useColResize({
     const { startX, lastCol } = colResizeState;
     const { clientX } = e;
     const moveX = clientX - startX;
-    let width = getColWidth(lastCol) + moveX;
+    let width = getCalculatedColWidth(lastCol) + moveX;
     if (width < props.colMinWidth)
       width = props.colMinWidth;
     const curCol = tableHeaderLast.value.find((it) => colKeyGen(it) === colKeyGen(lastCol));
@@ -300,8 +312,8 @@ function useColResize({
       return;
     curCol.width = width + "px";
     emits("update:columns", [...props.columns]);
-    if (colResizeIndicator.value) {
-      const style = colResizeIndicator.value.style;
+    if (colResizeIndicatorRef.value) {
+      const style = colResizeIndicatorRef.value.style;
       style.display = "none";
       style.left = "0";
       style.top = "0";
@@ -330,7 +342,7 @@ function useColResize({
     onThResizeMouseUp
   };
 }
-function useFixedCol({ props, colKeyGen, tableHeaders, tableHeaderLast, tableContainer }) {
+function useFixedCol({ props, colKeyGen, tableHeaders, tableHeaderLast, tableContainerRef }) {
   const fixedShadow = ref({
     showL: false,
     showR: false
@@ -381,7 +393,7 @@ function useFixedCol({ props, colKeyGen, tableHeaders, tableHeaderLast, tableCon
   function updateFixedShadow() {
     if (!props.fixedColShadow)
       return;
-    const { clientWidth, scrollWidth, scrollLeft } = tableContainer.value;
+    const { clientWidth, scrollWidth, scrollLeft } = tableContainerRef.value;
     fixedShadow.value.showL = Boolean(scrollLeft);
     fixedShadow.value.showR = Math.abs(scrollWidth - scrollLeft - clientWidth) > 0.5;
   }
@@ -416,7 +428,7 @@ function useFixedStyle({
           } else {
             refStore.set(item, left);
           }
-          left += getColWidth(item);
+          left += getCalculatedColWidth(item);
         }
         if (!rightStartIndex && item.fixed === "right") {
           rightStartIndex = i;
@@ -431,7 +443,7 @@ function useFixedStyle({
           } else {
             refStore.set(item, right);
           }
-          right += getColWidth(item);
+          right += getCalculatedColWidth(item);
         }
       }
     });
@@ -439,26 +451,28 @@ function useFixedStyle({
   });
   function getFixedStyle(tagType, col, depth = 0) {
     const { fixed } = col;
+    if (tagType === TagType.TD && !fixed)
+      return null;
     const isFixedLeft = fixed === "left";
     const style = {};
     const { colKeyStore, refStore } = fixedColumnsPositionStore.value;
-    if (Is_Legacy_Mode) {
+    if (IS_LEGACY_MODE) {
       style.position = "relative";
     } else {
       style.position = "sticky";
     }
     if (tagType === TagType.TH) {
-      if (Is_Legacy_Mode) {
+      if (IS_LEGACY_MODE) {
         style.top = virtualScroll.value.scrollTop + depth * props.rowHeight + "px";
       } else {
         style.top = depth * props.rowHeight + "px";
       }
-      style.zIndex = isFixedLeft ? "5" : "4";
-    } else {
       style.zIndex = isFixedLeft ? "3" : "2";
+    } else {
+      style.zIndex = isFixedLeft ? "2" : "1";
     }
     if (fixed === "left" || fixed === "right") {
-      if (Is_Legacy_Mode) {
+      if (IS_LEGACY_MODE) {
         if (isFixedLeft) {
           if (virtualX_on.value)
             style.left = virtualScrollX.value.scrollLeft - virtualScrollX.value.offsetLeft + "px";
@@ -482,130 +496,240 @@ function useFixedStyle({
     getFixedStyle
   };
 }
-const HIGHLIGHT_ROW_CLASS = "highlight-row";
-const HIGHLIGHT_CELL_CLASS = "highlight-cell";
-function useHighlight({ props, tableContainer }) {
-  const highlightRowStore = ref({});
-  const highlightFrom = computed(() => Highlight_Color[props.theme].from);
-  const highlightTo = computed(() => Highlight_Color[props.theme].to);
+function useHighlight({ props, stkTableId, tableContainerRef }) {
+  const config = props.highlightConfig;
+  const highlightDuration = config.duration ? config.duration * 1e3 : HIGHLIGHT_DURATION;
+  const highlightFrequency = config.fps ? 1e3 / config.fps : HIGHLIGHT_FREQ;
+  const highlightColor = {
+    light: HIGHLIGHT_COLOR.light,
+    dark: HIGHLIGHT_COLOR.dark
+  };
+  const highlightSteps = highlightDuration / highlightFrequency;
+  const highlightFrom = computed(() => highlightColor[props.theme].from);
+  const highlightTo = computed(() => highlightColor[props.theme].to);
   const highlightInter = computed(() => interpolateRgb(highlightFrom.value, highlightTo.value));
-  const highlightDimRowKeys = /* @__PURE__ */ new Set();
+  const highlightDimRowsJs = /* @__PURE__ */ new Map();
+  let calcHighlightDimLoopJs = false;
+  const highlightDimRowsAnimation = /* @__PURE__ */ new Map();
+  let calcHighlightDimLoopAnimation = false;
   const highlightDimRowsTimeout = /* @__PURE__ */ new Map();
   const highlightDimCellsTimeout = /* @__PURE__ */ new Map();
-  let calcHighlightDimLoop = false;
-  function calcHighlightLoop() {
-    if (calcHighlightDimLoop)
+  function calcRowHighlightLoop() {
+    if (calcHighlightDimLoopAnimation)
       return;
-    calcHighlightDimLoop = true;
+    calcHighlightDimLoopAnimation = true;
+    const recursion = () => {
+      window.requestAnimationFrame(
+        () => {
+          const nowTs = Date.now();
+          highlightDimRowsAnimation.forEach((store, rowKeyValue) => {
+            const { ts, duration } = store;
+            const timeOffset = nowTs - ts;
+            if (nowTs - ts < duration) {
+              updateRowBgc(rowKeyValue, store, timeOffset);
+            } else {
+              highlightDimRowsAnimation.delete(rowKeyValue);
+            }
+          });
+          if (highlightDimRowsAnimation.size > 0) {
+            recursion();
+          } else {
+            calcHighlightDimLoopAnimation = false;
+            highlightDimRowsAnimation.clear();
+          }
+        }
+      );
+    };
+    recursion();
+  }
+  function calcRowHighlightLoopJs() {
+    if (calcHighlightDimLoopJs)
+      return;
+    calcHighlightDimLoopJs = true;
     const recursion = () => {
       window.setTimeout(() => {
         const nowTs = Date.now();
-        highlightDimRowKeys.forEach((rowKeyValue) => {
-          const highlightItem = highlightRowStore.value[rowKeyValue];
-          const progress = (nowTs - highlightItem.bgc_progress_ms) / Highlight_Duration;
+        highlightDimRowsJs.forEach((highlightStart, rowKeyValue) => {
+          const progress = (nowTs - highlightStart) / highlightDuration;
+          let bgc = "";
           if (0 < progress && progress < 1) {
-            highlightItem.bgc = highlightInter.value(progress);
+            bgc = highlightInter.value(progress);
           } else {
-            highlightItem.bgc = "";
-            highlightDimRowKeys.delete(rowKeyValue);
+            highlightDimRowsJs.delete(rowKeyValue);
           }
+          updateRowBgcJs(rowKeyValue, bgc);
         });
-        highlightRowStore.value = { ...highlightRowStore.value };
-        if (highlightDimRowKeys.size > 0) {
+        if (highlightDimRowsJs.size > 0) {
           recursion();
         } else {
-          calcHighlightDimLoop = false;
+          calcHighlightDimLoopJs = false;
+          highlightDimRowsJs.clear();
         }
-      }, Highlight_Color_Change_Freq);
+      }, highlightFrequency);
     };
     recursion();
   }
-  function setHighlightDimCell(rowKeyValue, dataIndex) {
+  const defaultHighlightDimOption = {
+    keyframe: [{ backgroundColor: highlightFrom.value }, { backgroundColor: highlightTo.value }],
+    duration: highlightDuration
+  };
+  function setHighlightDimCell(rowKeyValue, dataIndex, option = {}) {
     var _a;
-    const cellEl = (_a = tableContainer.value) == null ? void 0 : _a.querySelector(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
+    const cellEl = (_a = tableContainerRef.value) == null ? void 0 : _a.querySelector(`[data-row-key="${rowKeyValue}"]>[data-index="${dataIndex}"]`);
+    const { className, method, duration, keyframe } = {
+      className: HIGHLIGHT_CELL_CLASS,
+      method: "css",
+      ...defaultHighlightDimOption,
+      ...option
+    };
     if (!cellEl)
       return;
-    if (cellEl.classList.contains(HIGHLIGHT_CELL_CLASS)) {
-      cellEl.classList.remove(HIGHLIGHT_CELL_CLASS);
-      void cellEl.offsetHeight;
+    if (method === "animation") {
+      cellEl.animate(keyframe, duration);
+    } else {
+      highlightCellsInCssKeyFrame(cellEl, rowKeyValue, className, duration);
     }
-    cellEl.classList.add(HIGHLIGHT_CELL_CLASS);
-    window.clearTimeout(highlightDimCellsTimeout.get(rowKeyValue));
-    highlightDimCellsTimeout.set(
-      rowKeyValue,
-      window.setTimeout(() => {
-        cellEl.classList.remove(HIGHLIGHT_CELL_CLASS);
-        highlightDimCellsTimeout.delete(rowKeyValue);
-      }, Highlight_Duration)
-    );
   }
   function setHighlightDimRow(rowKeyValues, option = {}) {
-    var _a, _b;
     if (!Array.isArray(rowKeyValues))
       rowKeyValues = [rowKeyValues];
-    if (props.virtual && !option.useCss) {
-      const nowTs = Date.now();
-      for (let i = 0; i < rowKeyValues.length; i++) {
-        const rowKeyValue = rowKeyValues[i];
-        highlightRowStore.value[rowKeyValue] = {
-          bgc: highlightFrom.value,
-          bgc_progress: 0,
-          bgc_progress_ms: nowTs
-        };
-        highlightDimRowKeys.add(rowKeyValue);
+    const { className, method, useCss, keyframe, duration } = {
+      className: HIGHLIGHT_ROW_CLASS,
+      method: props.virtual ? "js" : "css",
+      ...defaultHighlightDimOption,
+      ...option
+    };
+    const nowTs = Date.now();
+    if (method === "css" || useCss) {
+      highlightRowsInCssKeyframe(rowKeyValues, className, duration);
+    } else if (method === "animation") {
+      if (props.virtual) {
+        for (let i = 0; i < rowKeyValues.length; i++) {
+          const rowKeyValue = rowKeyValues[i];
+          const store = { ts: nowTs, visible: false, keyframe, duration };
+          highlightDimRowsAnimation.set(rowKeyValue, store);
+          updateRowBgc(rowKeyValue, store, 0);
+        }
+        calcRowHighlightLoop();
+      } else {
+        for (let i = 0; i < rowKeyValues.length; i++) {
+          const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValues[i]));
+          if (!rowEl)
+            continue;
+          rowEl.animate(keyframe, duration);
+        }
       }
-      calcHighlightLoop();
-    } else {
-      let needRepaint = false;
-      const rowElTemp = [];
+    } else if (method === "js") {
       for (let i = 0; i < rowKeyValues.length; i++) {
         const rowKeyValue = rowKeyValues[i];
-        const rowEl = (_a = tableContainer.value) == null ? void 0 : _a.querySelector(`[data-row-key="${rowKeyValue}"]`);
-        if (!rowEl)
-          continue;
-        if (rowEl.classList.contains(HIGHLIGHT_ROW_CLASS)) {
-          rowEl.classList.remove(HIGHLIGHT_ROW_CLASS);
-          needRepaint = true;
-        }
-        rowElTemp.push(rowEl);
-        window.clearTimeout(highlightDimRowsTimeout.get(rowKeyValue));
-        highlightDimRowsTimeout.set(
-          rowKeyValue,
-          window.setTimeout(() => {
-            rowEl.classList.remove(HIGHLIGHT_ROW_CLASS);
-            highlightDimRowsTimeout.delete(rowKeyValue);
-          }, Highlight_Duration)
-        );
+        highlightDimRowsJs.set(rowKeyValue, nowTs);
+        updateRowBgcJs(rowKeyValue, highlightFrom.value);
+      }
+      calcRowHighlightLoopJs();
+    }
+  }
+  function highlightRowsInCssKeyframe(rowKeyValues, className, duration) {
+    var _a;
+    let needRepaint = false;
+    const rowElTemp = [];
+    for (let i = 0; i < rowKeyValues.length; i++) {
+      const rowKeyValue = rowKeyValues[i];
+      const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValue));
+      if (!rowEl)
+        continue;
+      if (rowEl.classList.contains(className)) {
+        rowEl.classList.remove(className);
+        needRepaint = true;
       }
-      if (needRepaint) {
-        void ((_b = tableContainer.value) == null ? void 0 : _b.offsetWidth);
+      rowElTemp.push(rowEl);
+      window.clearTimeout(highlightDimRowsTimeout.get(rowKeyValue));
+      highlightDimRowsTimeout.set(
+        rowKeyValue,
+        window.setTimeout(() => {
+          rowEl.classList.remove(className);
+          highlightDimRowsTimeout.delete(rowKeyValue);
+        }, duration)
+      );
+    }
+    if (needRepaint) {
+      void ((_a = tableContainerRef.value) == null ? void 0 : _a.offsetWidth);
+    }
+    rowElTemp.forEach((el) => el.classList.add(className));
+  }
+  function highlightCellsInCssKeyFrame(cellEl, rowKeyValue, className, duration) {
+    if (cellEl.classList.contains(className)) {
+      cellEl.classList.remove(className);
+      void cellEl.offsetHeight;
+    }
+    cellEl.classList.add(className);
+    window.clearTimeout(highlightDimCellsTimeout.get(rowKeyValue));
+    highlightDimCellsTimeout.set(
+      rowKeyValue,
+      window.setTimeout(() => {
+        cellEl.classList.remove(className);
+        highlightDimCellsTimeout.delete(rowKeyValue);
+      }, duration)
+    );
+  }
+  function updateRowBgc(rowKeyValue, store, timeOffset) {
+    const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValue));
+    const { visible, keyframe, duration: initialDuration } = store;
+    if (!rowEl) {
+      if (visible) {
+        store.visible = false;
       }
-      rowElTemp.forEach((el) => el.classList.add(HIGHLIGHT_ROW_CLASS));
+      return;
     }
+    if (!visible) {
+      store.visible = true;
+      const iterationStart = timeOffset / initialDuration;
+      rowEl.animate(keyframe, {
+        duration: initialDuration - timeOffset,
+        /** 从什么时候开始，0-1 */
+        iterationStart,
+        /** 持续多久 0-1 */
+        iterations: 1 - iterationStart
+      });
+    }
+  }
+  function updateRowBgcJs(rowKeyValue, color) {
+    const rowEl = document.getElementById(stkTableId + "-" + String(rowKeyValue));
+    if (!rowEl)
+      return;
+    rowEl.style.backgroundColor = color;
   }
   return {
-    highlightRowStore,
+    highlightSteps,
     setHighlightDimRow,
     setHighlightDimCell
   };
 }
 const SCROLL_CODES = ["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft", "PageUp", "PageDown"];
-function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders }) {
+function useKeyboardArrowScroll(targetElement, { props, scrollTo, virtualScroll, virtualScrollX, tableHeaders, virtual_on }) {
   let isMouseOver = false;
-  onMounted(() => {
+  watch(virtual_on, (val) => {
+    if (!val) {
+      removeListeners();
+    } else {
+      addEventListeners();
+    }
+  });
+  onMounted(addEventListeners);
+  onBeforeUnmount(removeListeners);
+  function addEventListeners() {
     var _a, _b, _c;
     window.addEventListener("keydown", handleKeydown);
     (_a = targetElement.value) == null ? void 0 : _a.addEventListener("mouseenter", handleMouseEnter);
     (_b = targetElement.value) == null ? void 0 : _b.addEventListener("mouseleave", handleMouseLeave);
     (_c = targetElement.value) == null ? void 0 : _c.addEventListener("mousedown", handleMouseDown);
-  });
-  onBeforeUnmount(() => {
+  }
+  function removeListeners() {
     var _a, _b, _c;
     window.removeEventListener("keydown", handleKeydown);
     (_a = targetElement.value) == null ? void 0 : _a.removeEventListener("mouseenter", handleMouseEnter);
     (_b = targetElement.value) == null ? void 0 : _b.removeEventListener("mouseleave", handleMouseLeave);
     (_c = targetElement.value) == null ? void 0 : _c.removeEventListener("mousedown", handleMouseDown);
-  });
+  }
   function handleKeydown(e) {
     if (!SCROLL_CODES.includes(e.code))
       return;
@@ -696,7 +820,7 @@ function useThDrag({ props, emits }) {
 const VUE2_SCROLL_TIMEOUT_MS = 200;
 function useVirtualScroll({
   props,
-  tableContainer,
+  tableContainerRef,
   dataSourceCopy,
   tableHeaderLast,
   tableHeaders
@@ -733,7 +857,7 @@ function useVirtualScroll({
     return (dataSourceCopy.value.length - startIndex - virtual_dataSourcePart.value.length) * rowHeight;
   });
   const virtualX_on = computed(() => {
-    return props.virtualX && tableHeaderLast.value.reduce((sum, col) => sum += getColWidth(col), 0) > virtualScrollX.value.containerWidth + 100;
+    return props.virtualX && tableHeaderLast.value.reduce((sum, col) => sum += getCalculatedColWidth(col), 0) > virtualScrollX.value.containerWidth + 100;
   });
   const virtualX_columnPart = computed(() => {
     if (virtualX_on.value) {
@@ -762,7 +886,7 @@ function useVirtualScroll({
     for (let i = virtualScrollX.value.endIndex; i < tableHeaderLast.value.length; i++) {
       const col = tableHeaderLast.value[i];
       if (col.fixed !== "right") {
-        width += getColWidth(col);
+        width += getCalculatedColWidth(col);
       }
     }
     return width;
@@ -770,13 +894,13 @@ function useVirtualScroll({
   function initVirtualScrollY(height) {
     if (!virtual_on.value)
       return;
-    const { offsetHeight, scrollTop } = tableContainer.value || {};
+    const { offsetHeight, scrollTop } = tableContainerRef.value || {};
     const { rowHeight } = virtualScroll.value;
     let containerHeight;
     if (typeof height === "number") {
       containerHeight = height;
     } else {
-      containerHeight = offsetHeight || Default_Table_Height;
+      containerHeight = offsetHeight || DEFAULT_TABLE_HEIGHT;
     }
     const { headless, headerRowHeight } = props;
     let pageSize = Math.ceil(containerHeight / rowHeight);
@@ -790,8 +914,8 @@ function useVirtualScroll({
   function initVirtualScrollX() {
     if (!props.virtualX)
       return;
-    const { offsetWidth, scrollLeft } = tableContainer.value || {};
-    virtualScrollX.value.containerWidth = offsetWidth || Default_Table_Width;
+    const { offsetWidth, scrollLeft } = tableContainerRef.value || {};
+    virtualScrollX.value.containerWidth = offsetWidth || DEFAULT_TABLE_WIDTH;
     updateVirtualScrollX(scrollLeft);
   }
   function initVirtualScroll(height) {
@@ -851,12 +975,15 @@ function useVirtualScroll({
     let startIndex = 0;
     let offsetLeft = 0;
     let colWidthSum = 0;
+    let leftColWidthSum = 0;
     for (let colIndex = 0; colIndex < headerLength; colIndex++) {
       startIndex++;
       const col = tableHeaderLast.value[colIndex];
-      if (col.fixed === "left")
+      const colWidth = getCalculatedColWidth(col);
+      if (col.fixed === "left") {
+        leftColWidthSum += colWidth;
         continue;
-      const colWidth = getColWidth(col);
+      }
       colWidthSum += colWidth;
       if (colWidthSum >= sLeft) {
         offsetLeft = colWidthSum - colWidth;
@@ -865,11 +992,12 @@ function useVirtualScroll({
       }
     }
     colWidthSum = 0;
+    const containerWidth = virtualScrollX.value.containerWidth - leftColWidthSum;
     let endIndex = headerLength;
     for (let colIndex = startIndex + 1; colIndex < headerLength; colIndex++) {
       const col = tableHeaderLast.value[colIndex];
-      colWidthSum += getColWidth(col);
-      if (colWidthSum >= virtualScrollX.value.containerWidth) {
+      colWidthSum += getCalculatedColWidth(col);
+      if (colWidthSum >= containerWidth) {
         endIndex = colIndex + 1;
         break;
       }
@@ -908,12 +1036,16 @@ function useVirtualScroll({
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
 const _hoisted_3 = { class: "table-header-cell-wrapper" };
-const _hoisted_4 = { class: "table-header-title" };
-const _hoisted_5 = {
-  key: 2,
+const _hoisted_4 = {
+  key: 1,
+  class: "table-header-title"
+};
+const _hoisted_5 = { class: "table-header-title" };
+const _hoisted_6 = {
+  key: 3,
   class: "table-header-sorter"
 };
-const _hoisted_6 = /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_7 = /* @__PURE__ */ createElementVNode("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "16px",
   height: "16px",
@@ -930,24 +1062,24 @@ const _hoisted_6 = /* @__PURE__ */ createElementVNode("svg", {
     points: "8 10 4.8 14 11.2 14"
   })
 ], -1);
-const _hoisted_7 = [
-  _hoisted_6
+const _hoisted_8 = [
+  _hoisted_7
 ];
-const _hoisted_8 = ["onMousedown"];
 const _hoisted_9 = ["onMousedown"];
-const _hoisted_10 = {
+const _hoisted_10 = ["onMousedown"];
+const _hoisted_11 = {
   key: 0,
   class: "virtual-x-left",
   style: { "padding": "0" }
 };
-const _hoisted_11 = ["data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
-const _hoisted_12 = {
+const _hoisted_12 = ["id", "data-row-key", "onClick", "onDblclick", "onContextmenu", "onMouseover"];
+const _hoisted_13 = {
   key: 0,
   class: "virtual-x-left",
   style: { "padding": "0" }
 };
-const _hoisted_13 = ["data-index", "onClick"];
-const _hoisted_14 = ["title"];
+const _hoisted_14 = ["data-index", "onClick"];
+const _hoisted_15 = ["title"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "StkTable",
   props: {
@@ -958,7 +1090,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     fixedMode: { type: Boolean, default: false },
     headless: { type: Boolean, default: false },
     theme: { default: "light" },
-    rowHeight: { default: Default_Row_Height },
+    rowHeight: { default: DEFAULT_ROW_HEIGHT },
     headerRowHeight: { default: null },
     virtual: { type: Boolean, default: false },
     virtualX: { type: Boolean, default: false },
@@ -985,22 +1117,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emptyToBottom: false,
       stringLocaleCompare: true
     }) },
-    hideHeaderTitle: { type: [Boolean, Array], default: false }
+    hideHeaderTitle: { type: [Boolean, Array], default: false },
+    highlightConfig: { default: () => ({}) },
+    seqConfig: { default: () => ({}) }
   },
   emits: ["sort-change", "row-click", "current-change", "row-dblclick", "header-row-menu", "row-menu", "cell-click", "header-cell-click", "scroll", "scroll-x", "col-order-change", "th-drag-start", "th-drop", "update:columns"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const stkTableId = createStkTableId();
     const props = __props;
     const emits = __emit;
-    const tableContainer = ref();
-    const colResizeIndicator = ref();
+    const tableContainerRef = ref();
+    const colResizeIndicatorRef = ref();
     const currentItem = ref(null);
     const currentItemKey = ref(null);
     const currentHover = ref(null);
     let sortCol = ref();
     let sortOrderIndex = ref(0);
     const sortSwitchOrder = [null, "desc", "asc"];
-    const tableHeaders = ref([]);
-    const tableHeaderLast = ref([]);
+    const tableHeaders = shallowRef([]);
+    const tableHeaderLast = shallowRef([]);
     const dataSourceCopy = shallowRef([...props.dataSource]);
     const getEmptyCellText = computed(() => {
       if (typeof props.emptyCellText === "string") {
@@ -1014,8 +1149,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       props,
       emits,
       colKeyGen,
-      colResizeIndicator,
-      tableContainer,
+      colResizeIndicatorRef,
+      tableContainerRef,
       tableHeaderLast
     });
     const { onThDragStart, onThDragOver, onThDrop, isHeaderDraggable } = useThDrag({ props, emits });
@@ -1033,7 +1168,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       initVirtualScrollX,
       updateVirtualScrollY,
       updateVirtualScrollX
-    } = useVirtualScroll({ tableContainer, props, dataSourceCopy, tableHeaderLast, tableHeaders });
+    } = useVirtualScroll({ tableContainerRef, props, dataSourceCopy, tableHeaderLast, tableHeaders });
     const { getFixedStyle } = useFixedStyle({
       props,
       tableHeaders,
@@ -1042,21 +1177,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       virtualX_on,
       virtualX_offsetRight
     });
-    const { highlightRowStore, setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, tableContainer });
+    const { highlightSteps, setHighlightDimCell, setHighlightDimRow } = useHighlight({ props, stkTableId, tableContainerRef });
     if (props.autoResize) {
-      useAutoResize({ tableContainer, initVirtualScroll, props, debounceMs: 200 });
+      useAutoResize({ tableContainerRef, initVirtualScroll, props, debounceMs: 200 });
     }
-    useKeyboardArrowScroll(tableContainer, {
+    useKeyboardArrowScroll(tableContainerRef, {
       props,
       scrollTo,
       virtualScroll,
       virtualScrollX,
-      tableHeaders
+      tableHeaders,
+      virtual_on
     });
     const { fixedColClassMap, dealFixedColShadow, updateFixedShadow } = useFixedCol({
       props,
       colKeyGen,
-      tableContainer,
+      tableContainerRef,
       tableHeaders,
       tableHeaderLast
     });
@@ -1067,6 +1203,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         initVirtualScrollX();
       }
     );
+    watch(
+      () => props.virtualX,
+      () => dealColumns()
+    );
     dealColumns();
     watch(
       () => props.dataSource,
@@ -1106,7 +1246,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function dealColumns() {
       tableHeaders.value = [];
-      tableHeaderLast.value = [];
       const copyColumn = props.columns;
       const deep = howDeepTheHeader(copyColumn);
       const tempHeaderLast = [];
@@ -1145,9 +1284,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           if (colSpan !== 1) {
             col.colSpan = colSpan;
           }
-          if (!props.fixedMode && col.width === void 0) {
-            col.width = colWidth + "px";
-          }
+          col.__WIDTH__ = colWidth;
           allChildrenLen += colChildrenLen;
           allChildrenWidthSum += colWidth;
         });
@@ -1176,7 +1313,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       tableHeaders.value.forEach((cols, depth) => {
         cols.forEach((col) => {
           const colKey = colKeyGen(col);
-          const width = getColWidthStr(col);
+          const width = props.virtualX ? getCalculatedColWidth(col) + "px" : transformWidthToStr(col.width);
           const style = {
             width
           };
@@ -1184,8 +1321,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             style.minWidth = width;
             style.maxWidth = width;
           } else {
-            style.minWidth = getColWidthStr(col, "minWidth") ?? width;
-            style.maxWidth = getColWidthStr(col, "maxWidth") ?? width;
+            style.minWidth = transformWidthToStr(col.minWidth) ?? width;
+            style.maxWidth = transformWidthToStr(col.maxWidth) ?? width;
           }
           const thStyle = {
             ...style,
@@ -1330,12 +1467,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       dataSourceCopy.value = [...props.dataSource];
     }
     function scrollTo(top = 0, left = 0) {
-      if (!tableContainer.value)
+      if (!tableContainerRef.value)
         return;
       if (top !== null)
-        tableContainer.value.scrollTop = top;
+        tableContainerRef.value.scrollTop = top;
       if (left !== null)
-        tableContainer.value.scrollLeft = left;
+        tableContainerRef.value.scrollLeft = left;
     }
     function getTableData() {
       return toRaw(dataSourceCopy.value);
@@ -1374,8 +1511,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        ref_key: "tableContainer",
-        ref: tableContainer,
+        ref_key: "tableContainerRef",
+        ref: tableContainerRef,
         class: normalizeClass(["stk-table", {
           virtual: _ctx.virtual,
           "virtual-x": _ctx.virtualX,
@@ -1389,22 +1526,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "border-body-v": props.bordered === "body-v",
           stripe: props.stripe
         }]),
-        style: normalizeStyle(
+        style: normalizeStyle([
           _ctx.virtual && {
             "--row-height": unref(virtualScroll).rowHeight + "px",
             "--header-row-height": (props.headerRowHeight || props.rowHeight) + "px"
+          },
+          {
+            "--highlight-duration": props.highlightConfig.duration && props.highlightConfig.duration + "s",
+            "--highlight-easing": unref(highlightSteps) ? `steps(${unref(highlightSteps)})` : ""
           }
-        ),
+        ]),
         onScroll: onTableScroll,
         onWheel: onTableWheel
       }, [
-        withDirectives(createElementVNode("div", {
-          ref_key: "colResizeIndicator",
-          ref: colResizeIndicator,
+        _ctx.colResizable ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "colResizeIndicatorRef",
+          ref: colResizeIndicatorRef,
           class: "column-resize-indicator"
-        }, null, 512), [
-          [vShow, _ctx.colResizable]
-        ]),
+        }, null, 512)) : createCommentVNode("", true),
         createElementVNode("table", {
           class: normalizeClass(["stk-table-main", {
             "fixed-mode": props.fixedMode
@@ -1456,23 +1596,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       col.customHeaderCell ? (openBlock(), createBlock(resolveDynamicComponent(col.customHeaderCell), {
                         key: 0,
                         col
-                      }, null, 8, ["col"])) : renderSlot(_ctx.$slots, "tableHeader", {
-                        key: 1,
+                      }, null, 8, ["col"])) : col.type === "seq" ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(col.title), 1)) : renderSlot(_ctx.$slots, "tableHeader", {
+                        key: 2,
                         col
                       }, () => [
-                        createElementVNode("span", _hoisted_4, toDisplayString(col.title), 1)
+                        createElementVNode("span", _hoisted_5, toDisplayString(col.title), 1)
                       ]),
-                      col.sorter ? (openBlock(), createElementBlock("span", _hoisted_5, _hoisted_7)) : createCommentVNode("", true),
+                      col.sorter ? (openBlock(), createElementBlock("span", _hoisted_6, _hoisted_8)) : createCommentVNode("", true),
                       _ctx.colResizable && colIndex > 0 ? (openBlock(), createElementBlock("div", {
-                        key: 3,
+                        key: 4,
                         class: "table-header-resizer left",
                         onMousedown: (e) => unref(onThResizeMouseDown)(e, col, true)
-                      }, null, 40, _hoisted_8)) : createCommentVNode("", true),
+                      }, null, 40, _hoisted_9)) : createCommentVNode("", true),
                       _ctx.colResizable ? (openBlock(), createElementBlock("div", {
-                        key: 4,
+                        key: 5,
                         class: "table-header-resizer right",
                         onMousedown: (e) => unref(onThResizeMouseDown)(e, col)
-                      }, null, 40, _hoisted_9)) : createCommentVNode("", true)
+                      }, null, 40, _hoisted_10)) : createCommentVNode("", true)
                     ])
                   ], 46, _hoisted_2);
                 }), 128)),
@@ -1493,7 +1633,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               style: normalizeStyle({ height: `${unref(virtualScroll).offsetTop}px` }),
               class: "padding-top-tr"
             }, [
-              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_10)) : createCommentVNode("", true),
+              unref(virtualX_on) && _ctx.fixedMode && _ctx.headless ? (openBlock(), createElementBlock("td", _hoisted_11)) : createCommentVNode("", true),
               _ctx.fixedMode && _ctx.headless ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(virtualX_columnPart), (col) => {
                 return openBlock(), createElementBlock("td", {
                   key: col.dataIndex,
@@ -1501,30 +1641,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, null, 4);
               }), 128)) : createCommentVNode("", true)
             ], 4)) : createCommentVNode("", true),
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, i) => {
-              var _a;
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtual_dataSourcePart), (row, rowIndex) => {
               return openBlock(), createElementBlock("tr", {
-                key: _ctx.rowKey ? rowKeyGen(row) : i,
-                "data-row-key": _ctx.rowKey ? rowKeyGen(row) : i,
+                id: unref(stkTableId) + "-" + (_ctx.rowKey ? rowKeyGen(row) : rowIndex),
+                key: _ctx.rowKey ? rowKeyGen(row) : rowIndex,
+                "data-row-key": _ctx.rowKey ? rowKeyGen(row) : rowIndex,
                 class: normalizeClass({
                   active: _ctx.rowKey ? rowKeyGen(row) === rowKeyGen(currentItem.value) : row === currentItem.value,
                   hover: _ctx.rowKey ? rowKeyGen(row) === currentHover.value : row === currentHover.value,
-                  [_ctx.rowClassName(row, i)]: true
-                }),
-                style: normalizeStyle({
-                  backgroundColor: (_a = unref(highlightRowStore)[rowKeyGen(row)]) == null ? void 0 : _a.bgc
+                  [_ctx.rowClassName(row, rowIndex)]: true
                 }),
                 onClick: (e) => onRowClick(e, row),
                 onDblclick: (e) => onRowDblclick(e, row),
                 onContextmenu: (e) => onRowMenu(e, row),
                 onMouseover: (e) => onTrMouseOver(e, row)
               }, [
-                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_12)) : createCommentVNode("", true),
-                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col) => {
+                unref(virtualX_on) ? (openBlock(), createElementBlock("td", _hoisted_13)) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(virtualX_columnPart), (col, colIndex) => {
                   return openBlock(), createElementBlock("td", {
                     key: col.dataIndex,
                     "data-index": col.dataIndex,
-                    class: normalizeClass([col.className, _ctx.showOverflow ? "text-overflow" : "", unref(fixedColClassMap).get(colKeyGen(col))]),
+                    class: normalizeClass([
+                      col.className,
+                      unref(fixedColClassMap).get(colKeyGen(col)),
+                      _ctx.showOverflow ? "text-overflow" : "",
+                      col.type === "seq" ? "seq-column" : ""
+                    ]),
                     style: normalizeStyle(cellStyleMap.value[unref(TagType).TD].get(colKeyGen(col))),
                     onClick: (e) => onCellClick(e, row, col)
                   }, [
@@ -1532,15 +1674,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       key: 0,
                       col,
                       row,
+                      "row-index": rowIndex,
+                      "col-index": colIndex,
                       "cell-value": row[col.dataIndex]
-                    }, null, 8, ["col", "row", "cell-value"])) : (openBlock(), createElementBlock("div", {
+                    }, null, 8, ["col", "row", "row-index", "col-index", "cell-value"])) : (openBlock(), createElementBlock("div", {
                       key: 1,
                       class: "table-cell-wrapper",
-                      title: row[col.dataIndex]
-                    }, toDisplayString(row[col.dataIndex] ?? getEmptyCellText.value(col, row)), 9, _hoisted_14))
-                  ], 14, _hoisted_13);
+                      title: !col.type ? row[col.dataIndex] : ""
+                    }, [
+                      col.type === "seq" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                        createTextVNode(toDisplayString((props.seqConfig.startIndex || 0) + rowIndex + 1), 1)
+                      ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        createTextVNode(toDisplayString(row[col.dataIndex] ?? getEmptyCellText.value(col, row)), 1)
+                      ], 64))
+                    ], 8, _hoisted_15))
+                  ], 14, _hoisted_14);
                 }), 128))
-              ], 46, _hoisted_11);
+              ], 42, _hoisted_12);
             }), 128)),
             unref(virtual_on) ? (openBlock(), createElementBlock("tr", {
               key: 1,
@@ -1549,7 +1699,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])
         ], 6),
         (!dataSourceCopy.value || !dataSourceCopy.value.length) && _ctx.showNoData ? (openBlock(), createElementBlock("div", {
-          key: 0,
+          key: 1,
           class: normalizeClass(["stk-table-no-data", { "no-data-full": _ctx.noDataFull }])
         }, [
           renderSlot(_ctx.$slots, "empty", {}, () => [