stk-table-vue 0.0.1-beta.3 → 0.0.1-beta.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 JA+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -151,6 +151,12 @@ export type StkTableColumn<T extends Record<string, any>> = {
     customHeaderCell?: Component | VNode | CustomHeaderCellFunc<T>;
     /** 二级表头 */
     children?: StkTableColumn<T>[];
+    /**
+     * 单元格分割线。
+     * 默认横竖都有
+     * horizontal - 仅展示横线
+     */
+    border: boolean | 'horizontal';
 };
 ```
 

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

@@ -62,7 +62,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: (row: any, i: number) => string;
     colResizable: boolean;
     colMinWidth: number;
-    border: boolean | "horizontal";
+    bordered: boolean | "h" | "v" | "body-v";
 }>>, {
     width: string;
     fixedMode: boolean;
@@ -87,7 +87,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: () => "";
     colResizable: boolean;
     colMinWidth: number;
-    border: boolean;
+    bordered: boolean;
 }>, {
     setCurrentRow: typeof setCurrentRow;
     setHighlightDimCell: (rowKeyValue: string, dataIndex: string) => void;
@@ -134,7 +134,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: (row: any, i: number) => string;
     colResizable: boolean;
     colMinWidth: number;
-    border: boolean | "horizontal";
+    bordered: boolean | "h" | "v" | "body-v";
 }>>, {
     width: string;
     fixedMode: boolean;
@@ -159,7 +159,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: () => "";
     colResizable: boolean;
     colMinWidth: number;
-    border: boolean;
+    bordered: boolean;
 }>>> & {
     onScroll?: ((...args: any[]) => any) | undefined;
     "onTh-drag-start"?: ((...args: any[]) => any) | undefined;
@@ -198,7 +198,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     rowClassName: (row: any, i: number) => string;
     colResizable: boolean;
     colMinWidth: number;
-    border: boolean | "horizontal";
+    bordered: boolean | "h" | "v" | "body-v";
 }, {}>, {
     tableHeader?(_: {
         column: StkTableColumn<any>;

package/lib/src/StkTable/types/index.d.ts

@@ -113,8 +113,10 @@ export type StkProps = Partial<{
     /**
      * 单元格分割线。
      * 默认横竖都有
-     * horizontal - 仅展示横线
+     * "h" - 仅展示横线
+     * "v" - 仅展示竖线
+     * "body-v" - 仅表体展示竖线
      */
-    border: boolean | 'horizontal';
+    bordered: boolean | 'h' | 'v' | 'body-v';
 }>;
 export {};

package/lib/stk-table-vue.js

@@ -492,7 +492,7 @@ function howDeepTheColumn(arr, level = 1) {
   });
   return Math.max(...levels);
 }
-const _withScopeId = (n) => (pushScopeId("data-v-a99d823a"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-0aa41491"), n = n(), popScopeId(), n);
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = ["data-col-key", "draggable", "rowspan", "colspan", "title", "onClick"];
 const _hoisted_3 = { class: "table-header-cell-wrapper" };
@@ -564,7 +564,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     rowClassName: { type: Function, default: () => "" },
     colResizable: { type: Boolean, default: false },
     colMinWidth: { default: 10 },
-    border: { type: [Boolean, String], default: true }
+    bordered: { type: [Boolean, String], default: true }
   },
   emits: [
     "sort-change",
@@ -922,8 +922,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           dark: _ctx.theme === "dark",
           headless: _ctx.headless,
           "is-col-resizing": unref(isColResizing),
-          border: props.border,
-          "border-horizontal": props.border === "horizontal"
+          border: props.bordered,
+          "border-h": props.bordered === "h",
+          "border-v": props.bordered === "v",
+          "border-body-v": props.bordered === "body-v"
         }]),
         style: normalizeStyle(_ctx.virtual && { "--row-height": unref(virtualScroll).rowHeight + "px" }),
         onScroll: onTableScroll,
@@ -1096,7 +1098,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const StkTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a99d823a"]]);
+const StkTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0aa41491"]]);
 export {
   StkTable,
   insertToOrderedArray,

package/lib/style.css

@@ -1,4 +1,4 @@
-.stk-table[data-v-a99d823a] {
+.stk-table[data-v-0aa41491] {
   --row-height: 28px;
   --cell-padding-x: 8px;
   --resize-handle-width: 4px;
@@ -28,7 +28,7 @@
   /** 列宽调整指示器 */
   /**虚拟滚动模式 */
 }
-.stk-table.dark[data-v-a99d823a] {
+.stk-table.dark[data-v-0aa41491] {
   --th-bgc: #181c21;
   --td-bgc: #181c21;
   --border-color: #26292e;
@@ -43,39 +43,45 @@
   --col-resize-indicator-color: #5d6064;
   color: #d0d1d2;
 }
-.stk-table.headless[data-v-a99d823a] {
+.stk-table.headless[data-v-0aa41491] {
   border-top: 1px solid var(--border-color);
 }
-.stk-table.is-col-resizing th[data-v-a99d823a] {
+.stk-table.is-col-resizing th[data-v-0aa41491] {
   pointer-events: none;
 }
-.stk-table.border-horizontal[data-v-a99d823a] {
+.stk-table.border-h[data-v-0aa41491] {
   --bg-border-right: linear-gradient(transparent, transparent);
   --bg-border-left: linear-gradient(transparent, transparent);
 }
-.stk-table.border .stk-table-main th[data-v-a99d823a],
-.stk-table.border .stk-table-main td[data-v-a99d823a] {
+.stk-table.border-v[data-v-0aa41491] {
+  --bg-border-bottom: linear-gradient(transparent, transparent);
+}
+.stk-table.border .stk-table-main th[data-v-0aa41491],
+.stk-table.border .stk-table-main td[data-v-0aa41491] {
   background-image: var(--bg-border-right), var(--bg-border-bottom);
 }
-.stk-table.border .stk-table-main thead tr:first-child th[data-v-a99d823a] {
+.stk-table.border .stk-table-main thead tr:first-child th[data-v-0aa41491] {
   background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
 }
-.stk-table.border .stk-table-main thead tr:first-child th[data-v-a99d823a]:first-child {
+.stk-table.border .stk-table-main thead tr:first-child th[data-v-0aa41491]:first-child {
   background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table.border .stk-table-main thead tr th[data-v-a99d823a]:first-child {
+.stk-table.border .stk-table-main thead tr th[data-v-0aa41491]:first-child {
   background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table.border .stk-table-main tbody td[data-v-a99d823a]:first-child {
+.stk-table.border .stk-table-main tbody td[data-v-0aa41491]:first-child {
   background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table.border.virtual-x .stk-table-main thead tr:first-child .virtual-x-left + th[data-v-a99d823a] {
+.stk-table.border.virtual-x .stk-table-main thead tr:first-child .virtual-x-left + th[data-v-0aa41491] {
   background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table.border.virtual-x .stk-table-main tr .virtual-x-left + th[data-v-a99d823a] {
+.stk-table.border.virtual-x .stk-table-main tr .virtual-x-left + th[data-v-0aa41491] {
   background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
 }
-.stk-table .column-resize-indicator[data-v-a99d823a] {
+.stk-table.border-body-v .stk-table-main tbody[data-v-0aa41491] {
+  --bg-border-bottom: linear-gradient(transparent, transparent);
+}
+.stk-table .column-resize-indicator[data-v-0aa41491] {
   width: 0;
   height: 100%;
   border-left: 1px dashed var(--col-resize-indicator-color);
@@ -84,122 +90,122 @@
   display: none;
   pointer-events: none;
 }
-.stk-table .stk-table-main[data-v-a99d823a] {
+.stk-table .stk-table-main[data-v-0aa41491] {
   border-spacing: 0;
   border-collapse: separate;
 }
-.stk-table .stk-table-main.fixed-mode[data-v-a99d823a] {
+.stk-table .stk-table-main.fixed-mode[data-v-0aa41491] {
   table-layout: fixed;
 }
-.stk-table .stk-table-main th[data-v-a99d823a],
-.stk-table .stk-table-main td[data-v-a99d823a] {
+.stk-table .stk-table-main th[data-v-0aa41491],
+.stk-table .stk-table-main td[data-v-0aa41491] {
   z-index: 1;
   height: var(--row-height);
   font-size: 14px;
   box-sizing: border-box;
   padding: 0 var(--cell-padding-x);
 }
-.stk-table .stk-table-main thead tr:first-child th[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr:first-child th[data-v-0aa41491] {
   position: sticky;
   top: 0;
 }
-.stk-table .stk-table-main thead tr th[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th[data-v-0aa41491] {
   background-color: var(--th-bgc);
 }
-.stk-table .stk-table-main thead tr th.sortable[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.sortable[data-v-0aa41491] {
   cursor: pointer;
 }
-.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper[data-v-0aa41491] {
   white-space: nowrap;
   overflow: hidden;
 }
-.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper .table-header-title[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper .table-header-title[data-v-0aa41491] {
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491] {
   fill: var(--sort-arrow-hover-color);
 }
-.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
   fill: var(--sort-arrow-hover-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491] {
   fill: var(--sort-arrow-active-sub-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
   fill: var(--sort-arrow-active-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491] {
   fill: var(--sort-arrow-active-color);
 }
-.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
   fill: var(--sort-arrow-active-sub-color);
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper[data-v-0aa41491] {
   max-width: 100%;
   display: inline-flex;
   align-items: center;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-title[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-title[data-v-0aa41491] {
   overflow: hidden;
   align-self: flex-start;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter[data-v-0aa41491] {
   flex-shrink: 0;
   margin-left: 4px;
   width: 16px;
   height: 16px;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-a99d823a],
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-up[data-v-0aa41491],
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down[data-v-0aa41491] {
   fill: var(--sort-arrow-color);
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer[data-v-0aa41491] {
   position: absolute;
   top: 0;
   bottom: 0;
   cursor: col-resize;
   width: var(--resize-handle-width);
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.left[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.left[data-v-0aa41491] {
   left: 0;
 }
-.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.right[data-v-a99d823a] {
+.stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.right[data-v-0aa41491] {
   right: 0;
 }
-.stk-table .stk-table-main tbody[data-v-a99d823a] {
+.stk-table .stk-table-main tbody[data-v-0aa41491] {
   /**高亮渐暗 */
 }
-@keyframes dim-a99d823a {
+@keyframes dim-0aa41491 {
 from {
     background-color: var(--highlight-color);
 }
 }
-.stk-table .stk-table-main tbody tr[data-v-a99d823a] {
+.stk-table .stk-table-main tbody tr[data-v-0aa41491] {
   background-color: var(--td-bgc);
 }
-.stk-table .stk-table-main tbody tr.highlight-row[data-v-a99d823a] {
-  animation: dim-a99d823a 2s linear;
+.stk-table .stk-table-main tbody tr.highlight-row[data-v-0aa41491] {
+  animation: dim-0aa41491 2s linear;
 }
-.stk-table .stk-table-main tbody tr.hover[data-v-a99d823a],
-.stk-table .stk-table-main tbody tr[data-v-a99d823a]:hover {
+.stk-table .stk-table-main tbody tr.hover[data-v-0aa41491],
+.stk-table .stk-table-main tbody tr[data-v-0aa41491]:hover {
   background-color: var(--tr-hover-bgc);
 }
-.stk-table .stk-table-main tbody tr.active[data-v-a99d823a] {
+.stk-table .stk-table-main tbody tr.active[data-v-0aa41491] {
   background-color: var(--tr-active-bgc);
 }
-.stk-table .stk-table-main tbody tr td.fixed-cell[data-v-a99d823a] {
+.stk-table .stk-table-main tbody tr td.fixed-cell[data-v-0aa41491] {
   background-color: inherit;
 }
-.stk-table .stk-table-main tbody tr td.highlight-cell[data-v-a99d823a] {
-  animation: dim-a99d823a 2s linear;
+.stk-table .stk-table-main tbody tr td.highlight-cell[data-v-0aa41491] {
+  animation: dim-0aa41491 2s linear;
 }
-.stk-table .stk-table-main tbody tr td.text-overflow .table-cell-wrapper[data-v-a99d823a] {
+.stk-table .stk-table-main tbody tr td.text-overflow .table-cell-wrapper[data-v-0aa41491] {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.stk-table .stk-table-no-data[data-v-a99d823a] {
+.stk-table .stk-table-no-data[data-v-0aa41491] {
   background-color: var(--table-bgc);
   line-height: var(--row-height);
   text-align: center;
@@ -214,27 +220,27 @@ from {
   align-items: center;
   justify-content: center;
 }
-.stk-table .stk-table-no-data.no-data-full[data-v-a99d823a] {
+.stk-table .stk-table-no-data.no-data-full[data-v-0aa41491] {
   flex: 1;
 }
-.stk-table.virtual .stk-table-main thead tr th .table-header-cell-wrapper[data-v-a99d823a] {
+.stk-table.virtual .stk-table-main thead tr th .table-header-cell-wrapper[data-v-0aa41491] {
   overflow: hidden;
   max-height: var(--row-height);
 }
-.stk-table.virtual .stk-table-main tbody[data-v-a99d823a] {
+.stk-table.virtual .stk-table-main tbody[data-v-0aa41491] {
   position: relative;
 }
-.stk-table.virtual .stk-table-main tbody tr.padding-top-tr td[data-v-a99d823a] {
+.stk-table.virtual .stk-table-main tbody tr.padding-top-tr td[data-v-0aa41491] {
   height: 0;
 }
-.stk-table.virtual .stk-table-main tbody tr td[data-v-a99d823a] {
+.stk-table.virtual .stk-table-main tbody tr td[data-v-0aa41491] {
   height: var(--row-height);
   line-height: 1;
 }
-.stk-table.virtual .stk-table-main tbody tr td .table-cell-wrapper[data-v-a99d823a] {
+.stk-table.virtual .stk-table-main tbody tr td .table-cell-wrapper[data-v-0aa41491] {
   max-height: var(--row-height);
   overflow: hidden;
 }
-.stk-table.virtual-x .stk-table-main .virtual-x-left[data-v-a99d823a] {
+.stk-table.virtual-x .stk-table-main .virtual-x-left[data-v-0aa41491] {
   padding: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stk-table-vue",
-    "version": "0.0.1-beta.3",
+    "version": "0.0.1-beta.4",
     "description": "simple realtime virtual table for vue3",
     "main": "./lib/stk-table-vue.js",
     "types": "./lib/StkTable/index.d.ts",

package/src/StkTable/StkTable.vue

@@ -8,8 +8,10 @@
             dark: theme === 'dark',
             headless,
             'is-col-resizing': isColResizing,
-            border: props.border,
-            'border-horizontal': props.border === 'horizontal',
+            border: props.bordered,
+            'border-h': props.bordered === 'h',
+            'border-v': props.bordered === 'v',
+            'border-body-v': props.bordered === 'body-v',
         }"
         :style="virtual && { '--row-height': virtualScroll.rowHeight + 'px' }"
         @scroll="onTableScroll"
@@ -220,7 +222,7 @@ const props = withDefaults(defineProps<StkProps>(), {
     rowClassName: () => '',
     colResizable: false,
     colMinWidth: 10,
-    border: true,
+    bordered: true,
 });
 
 const emit = defineEmits([
@@ -770,10 +772,13 @@ defineExpose({
     &.is-col-resizing th {
         pointer-events: none;
     }
-    &.border-horizontal {
+    &.border-h {
         --bg-border-right: linear-gradient(transparent, transparent);
         --bg-border-left: linear-gradient(transparent, transparent);
     }
+    &.border-v {
+        --bg-border-bottom: linear-gradient(transparent, transparent);
+    }
 
     &.border {
         .stk-table-main {
@@ -819,6 +824,13 @@ defineExpose({
             }
         }
     }
+    &.border-body-v {
+        .stk-table-main {
+            tbody {
+                --bg-border-bottom: linear-gradient(transparent, transparent);
+            }
+        }
+    }
 
     /** 列宽调整指示器 */
     .column-resize-indicator {

package/src/StkTable/types/index.ts

@@ -135,7 +135,9 @@ export type StkProps = Partial<{
     /**
      * 单元格分割线。
      * 默认横竖都有
-     * horizontal - 仅展示横线
+     * "h" - 仅展示横线
+     * "v" - 仅展示竖线
+     * "body-v" - 仅表体展示竖线
      */
-    border: boolean | 'horizontal';
+    bordered: boolean | 'h' | 'v' | 'body-v';
 }>;