stk-table-vue 0.4.2 → 0.4.3

package/README.md

@@ -86,11 +86,11 @@ vue2.7 支持引入源码使用。依赖`less`。
 Use `css`
 ```html
 <script>
-  import { StkTable } from 'stk-table-vue/src/StkTable/StkTable.vue';
+  import StkTable from 'stk-table-vue/src/StkTable/StkTable.vue';
   import 'stk-table-vue/lib/style.css';
 </script>
 ```
-#### webpack TS 配置参考
+#### webpack TS
 ##### webpack.config.js
 ```js
  rules:[{ 
@@ -134,6 +134,12 @@ export type StkProps = {
   theme?: 'light' | 'dark';
   /** 行高 */
   rowHeight?: number;
+  /** 是否高亮鼠标悬浮的行 */
+  rowHover?: boolean;
+  /** 是否高亮选中的行 */
+  rowActive?: boolean;
+  /** 当前行再次点击否可以取消 */
+  rowCurrentRevokable?: boolean;
   /** 表头行高。default = rowHeight */
   headerRowHeight?: number | null;
   /** 虚拟滚动 */
@@ -162,6 +168,7 @@ export type StkProps = {
   showOverflow?: boolean;
   /** 是否增加行hover class */
   showTrHoverClass?: boolean;
+ 
   /** 是否高亮鼠标悬浮的单元格 */
   cellHover?: boolean;
   /** 表头是否可拖动。支持回调函数。 */
@@ -436,7 +443,7 @@ export type SortConfig<T extends Record<string, any>> = {
     rowKeyValues: UniqKey[],
       option: {
         method?: 'css' | 'animation' | 'js';
-        /** @deprecated 请使用method */
+        /** @deprecated use method */
         useCss?: boolean;
         className?: string;
         keyframe?: Parameters<Animatable['animate']>['0'];
@@ -450,7 +457,7 @@ export type SortConfig<T extends Record<string, any>> = {
     rowKeyValues: UniqKey[],
       option: {
         method?: 'css' | 'animation' | 'js';  
-        /** @deprecated 请使用method */
+        /** @deprecated use method */
         useCss?: boolean;
         className?: string;
         keyframe?: Parameters<Animatable['animate']>['0'];

package/lib/src/StkTable/StkTable.vue.d.ts

@@ -53,6 +53,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     theme?: "light" | "dark" | undefined;
     /** 行高 */
     rowHeight?: number | undefined;
+    /** 是否高亮鼠标悬浮的行 */
+    rowHover?: boolean | undefined;
+    /** 是否高亮选中的行 */
+    rowActive?: boolean | undefined;
+    /** 当前行再次点击否可以取消 */
+    rowCurrentRevokable?: boolean | undefined;
     /** 表头行高。default = rowHeight */
     headerRowHeight?: number | null | undefined;
     /** 虚拟滚动 */
@@ -82,7 +88,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     showHeaderOverflow?: boolean | undefined;
     /** 表体溢出是否展示... */
     showOverflow?: boolean | undefined;
-    /** 是否增加行hover class */
+    /** 是否增加行hover class $*$ rename*/
     showTrHoverClass?: boolean | undefined;
     /** 是否高亮鼠标悬浮的单元格 */
     cellHover?: boolean | undefined;
@@ -146,6 +152,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     headless: boolean;
     theme: string;
     rowHeight: number;
+    rowHover: boolean;
+    rowActive: boolean;
+    rowCurrentRevokable: boolean;
     headerRowHeight: null;
     virtual: boolean;
     virtualX: boolean;
@@ -190,10 +199,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string, option?: {
         className?: string | undefined;
         method?: "animation" | "css" | undefined;
-        keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined; /**
-         * 选中一行触发。ev返回null表示不是点击事件触发的
-         * ```(ev: MouseEvent | null, row: DT | undefined, data: { select: boolean })```
-         */
+        keyframe?: Keyframe[] | PropertyIndexedKeyframes | null | undefined;
         duration?: number | undefined;
     }) => void;
     /** 设置高亮渐暗行 */
@@ -255,6 +261,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     theme?: "light" | "dark" | undefined;
     /** 行高 */
     rowHeight?: number | undefined;
+    /** 是否高亮鼠标悬浮的行 */
+    rowHover?: boolean | undefined;
+    /** 是否高亮选中的行 */
+    rowActive?: boolean | undefined;
+    /** 当前行再次点击否可以取消 */
+    rowCurrentRevokable?: boolean | undefined;
     /** 表头行高。default = rowHeight */
     headerRowHeight?: number | null | undefined;
     /** 虚拟滚动 */
@@ -284,7 +296,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     showHeaderOverflow?: boolean | undefined;
     /** 表体溢出是否展示... */
     showOverflow?: boolean | undefined;
-    /** 是否增加行hover class */
+    /** 是否增加行hover class $*$ rename*/
     showTrHoverClass?: boolean | undefined;
     /** 是否高亮鼠标悬浮的单元格 */
     cellHover?: boolean | undefined;
@@ -348,6 +360,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     headless: boolean;
     theme: string;
     rowHeight: number;
+    rowHover: boolean;
+    rowActive: boolean;
+    rowCurrentRevokable: boolean;
     headerRowHeight: null;
     virtual: boolean;
     virtualX: boolean;
@@ -412,6 +427,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     stripe: boolean;
     fixedMode: boolean;
     theme: "light" | "dark";
+    rowHover: boolean;
+    rowActive: boolean;
+    rowCurrentRevokable: boolean;
     virtual: boolean;
     virtualX: boolean;
     columns: StkTableColumn<DT>[];

package/lib/stk-table-vue.js

@@ -1153,6 +1153,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     headless: { type: Boolean, default: false },
     theme: { default: "light" },
     rowHeight: { default: DEFAULT_ROW_HEIGHT },
+    rowHover: { type: Boolean, default: true },
+    rowActive: { type: Boolean, default: true },
+    rowCurrentRevokable: { type: Boolean, default: true },
     headerRowHeight: { default: null },
     virtual: { type: Boolean, default: false },
     virtualX: { type: Boolean, default: false },
@@ -1479,7 +1482,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function onRowClick(e, row) {
       emits("row-click", e, row);
-      if (props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row) {
+      const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
+      if (isCurrentRow) {
+        if (!props.rowCurrentRevokable) {
+          return;
+        }
         currentRow.value = void 0;
         currentRowKey.value = void 0;
         emits("current-change", e, row, { select: false });
@@ -1667,6 +1674,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "border-body-v": props.bordered === "body-v",
           stripe: props.stripe,
           "cell-hover": props.cellHover,
+          "row-hover": props.rowHover,
+          "row-active": props.rowActive,
           "text-overflow": props.showOverflow,
           "header-text-overflow": props.showHeaderOverflow,
           "fixed-relative-mode": isRelativeMode.value

package/lib/style.css

@@ -94,6 +94,12 @@
 .stk-table.stripe tbody tr:nth-child(even){
   background-color:var(--stripe-bgc);
 }
+.stk-table.row-hover tbody tr:hover{
+  background-color:var(--tr-hover-bgc);
+}
+.stk-table.row-active tbody tr.active{
+  background-color:var(--tr-active-bgc);
+}
 .stk-table.cell-hover tbody td:hover{
   box-shadow:inset 0 0 0 2px var(--td-hover-color);
 }
@@ -177,16 +183,10 @@
   background-color:var(--th-bgc);
   height:var(--header-row-height);
 }
-.stk-table .stk-table-main tbody tr{
+.stk-table tbody tr{
   background-color:var(--td-bgc);
   height:var(--row-height);
 }
-.stk-table .stk-table-main tbody tr:hover{
-  background-color:var(--tr-hover-bgc);
-}
-.stk-table .stk-table-main tbody tr.active{
-  background-color:var(--tr-active-bgc);
-}
 .stk-table .virtual-x-left,
 .stk-table .virtual-x-right{
   padding:0;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.4.2",
+    "version": "0.4.3",
     "description": "Simple realtime virtual table for vue3 and vue2.7",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/src/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -15,6 +15,8 @@
             'border-body-v': props.bordered === 'body-v',
             stripe: props.stripe,
             'cell-hover': props.cellHover,
+            'row-hover': props.rowHover,
+            'row-active': props.rowActive,
             'text-overflow': props.showOverflow,
             'header-text-overflow': props.showHeaderOverflow,
             'fixed-relative-mode': isRelativeMode,
@@ -249,6 +251,12 @@ const props = withDefaults(
         theme?: 'light' | 'dark';
         /** 行高 */
         rowHeight?: number;
+        /** 是否高亮鼠标悬浮的行 */
+        rowHover?: boolean;
+        /** 是否高亮选中的行 */
+        rowActive?: boolean;
+        /** 当前行再次点击否可以取消 */
+        rowCurrentRevokable?: boolean;
         /** 表头行高。default = rowHeight */
         headerRowHeight?: number | null;
         /** 虚拟滚动 */
@@ -275,7 +283,7 @@ const props = withDefaults(
         showHeaderOverflow?: boolean;
         /** 表体溢出是否展示... */
         showOverflow?: boolean;
-        /** 是否增加行hover class */
+        /** 是否增加行hover class $*$ rename*/
         showTrHoverClass?: boolean;
         /** 是否高亮鼠标悬浮的单元格 */
         cellHover?: boolean;
@@ -340,6 +348,9 @@ const props = withDefaults(
         headless: false,
         theme: 'light',
         rowHeight: DEFAULT_ROW_HEIGHT,
+        rowHover: true,
+        rowActive: true,
+        rowCurrentRevokable: true,
         headerRowHeight: null,
         virtual: false,
         virtualX: false,
@@ -874,8 +885,13 @@ function onColumnSort(col?: StkTableColumn<DT>, click = true, options: { force?:
 
 function onRowClick(e: MouseEvent, row: DT) {
     emits('row-click', e, row);
-    // 选中同一行，取消当前选中行。
-    if (props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row) {
+    const isCurrentRow = props.rowKey ? currentRowKey.value === rowKeyGen(row) : currentRow.value === row;
+    if (isCurrentRow) {
+        if (!props.rowCurrentRevokable) {
+            // 不可取消
+            return;
+        }
+        // 点击同一行，取消当前选中行。
         currentRow.value = void 0;
         currentRowKey.value = void 0;
         emits('current-change', e, row, { select: false });

package/src/StkTable/style.less

@@ -141,6 +141,15 @@
         }
     }
 
+    &.row-hover tbody tr:hover {
+        background-color: var(--tr-hover-bgc);
+    }
+
+
+    &.row-active tbody tr.active {
+        background-color: var(--tr-active-bgc);
+    }
+
     /* 单元格悬浮 */
     &.cell-hover tbody td:hover {
         box-shadow: inset 0 0 0 2px var(--td-hover-color);
@@ -258,29 +267,18 @@
 
     }
 
-    thead {
-        tr {
-            background-color: var(--th-bgc);
-            height: var(--header-row-height);
-        }
+    thead tr {
+        background-color: var(--th-bgc);
+        height: var(--header-row-height);
     }
 
-    /* stk-table-main 这层为了增加选择器优先级，防止被斑马纹颜色覆盖*/
-    .stk-table-main tbody tr {
+
+    tbody tr {
         background-color: var(--td-bgc);
         height: var(--row-height);
-        /** 一行分层，有利于高亮行重绘
-        transform: translateZ(0);*/
-
-        &:hover {
-            background-color: var(--tr-hover-bgc);
-        }
-
-        &.active {
-            background-color: var(--tr-active-bgc);
-        }
     }
 
+
     .virtual-x-left,
     .virtual-x-right {
         padding: 0;