stk-table-vue 1.0.0-beta.5 → 1.0.0

package/README.md

@@ -1,173 +1,173 @@
-<p align="center">
-    <a href="https://ja-plus.github.io/stk-table-vue/">
-        <img src="./docs-src/public/assets/logo.svg" width="152">
-    </a>
-    <h3 align='center'>Stk Table Vue</h3>
-    <p align="center">
-        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/v/stk-table-vue"></a>
-        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/dw/stk-table-vue"></a>
-        <a href="https://github.com/ja-plus/stk-table-vue/stargazers"><img src="https://img.shields.io/github/stars/ja-plus/stk-table-vue.svg"></a>
-        <a href="https://raw.githubusercontent.com/ja-plus/stk-table-vue/master/LICENSE"><img src="https://img.shields.io/npm/l/stk-table-vue"></a>
-        <a href="https://github.com/ja-plus/stk-table-vue"><img src="https://img.shields.io/npm/types/stk-table-vue"></a>
-    </p>
-</p>
-
-Stk Table Vue(Sticky Table) is a high-performance virtual list component based on Vue.
-
-Smooth performance with tens of thousands of rows
-
-Used for real-time data display, with data highlighting and dynamic effects.
-
-Support Vue3 and Vue2.7
-
-
-## Documentation
-### [Stk Table Vue Official](https://ja-plus.github.io/stk-table-vue/)
-
-
-## Repo: 
-- [Github](https://github.com/ja-plus/stk-table-vue)
-- [Gitee](https://gitee.com/japlus/stk-table-vue)
-
-## Demo
-[<span style="font-size: 16px;font-weight: bold;">Online Demo in stackblitz</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
-
-## Usage
-> npm install stk-table-vue
-
-```html
-<script setup>
-import { StkTable } from 'stk-table-vue'
-import { ref, useTemplateRef } from 'vue'
-const stkTableRef = ref<InstanceType<typeof StkTable>>();
-// or Vue 3.5 useTemplateRef
-const stkTableRef = useTemplateRef('stkTableRef');
-
-// highlight row
-stkTableRef.value.setHighlightDimRow([rowKey], {
-  method: 'css' | 'animation', // default animation
-  className: 'custom-class-name', // for method 'css'
-  keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
-  duration: 2000,
-});
-// highlight cell
-stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
-  method: 'css' | 'animation',
-  className: 'custom-class-name', // for method 'css'
-  keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // for method 'animation'
-  duration: 2000,
-});
-
-const columns = [
-  {title: 'name', dataIndex: 'name'},
-  {title: 'age', dataIndex: 'age'},
-  {title: 'address', dataIndex: 'address'},
-];
-
-const dataSource = [
-  {id: 1, name: 'John', age: 32, address: 'New York'},
-  {id: 2, name: 'Jim', age: 42, address: 'London'},
-  {id: 3, name: 'Joe', age: 52, address: 'Tokyo'},
-  {id: 4, name: 'Jack', age: 62, address: 'Sydney'},
-  {id: 5, name: 'Jill', age: 72, address: 'Paris'},
-]
-
-</script>
-
-<template>
-    <StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
-</template>
-
-```
-
-### Vue2.7 Usage
-[Vue2.7 Usage](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
-
-## API
-* [Props](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
-
-* [Emits](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
-
-* [Slots](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
-
-* [Expose](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
-
-* [StkTableColumn: Define column type](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
-
-* [Highlight: setHighlightDimCell & setHighlightDimRow](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
-
-
-### Example
-```vue
-<template>
- <StkTable
-    ref="stkTable"
-    row-key="name"
-    v-model:columns="columns"
-    :style="{height:props.height}"
-    theme='dark'
-    height='200px'
-    bordered="h"
-    :row-height="28"
-    :show-overflow="false"
-    :show-header-overflow="false"
-    :sort-remote="false"
-    col-resizable
-    header-drag
-    virtual
-    virtual-x
-    no-data-full
-    col-resizable
-    auto-resize
-    fixed-col-shadow
-    :col-min-width="10"
-    :headless="false"
-    :data-source="dataSource"
-    @current-change="onCurrentChange"
-    @row-menu="onRowMenu"
-    @header-row-menu="onHeaderRowMenu"
-    @row-click="onRowClick"
-    @row-dblclick="onRowDblclick"
-    @sort-change="handleSortChange"
-    @cell-click="onCellClick"
-    @header-cell-click="onHeaderCellClick"
-    @scroll="onTableScroll"
-    @scroll-x="onTableScrollX"
-    @col-order-change="onColOrderChange"
-  />
-</template>
-<script setup>
-  import { h, defineComponent } from 'vue';
-  const columns = [
-    {
-      title: 'Name',
-      dataIndex: 'name',
-      fixed: 'left',
-      width: '200px',
-      headerClassName: 'my-th',
-      className: 'my-td',
-      sorter: true,
-      customHeaderCell: function FunctionalComponent(props){
-          return h(
-              'span',
-              { style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
-              props.col.title + '(render) text-overflow,',
-          );
-      },
-      customCell: defineComponent({
-        setup(){
-          //...
-          return () => <div></div> // vue jsx
-        }
-      })
-    },
-  ]
-</script>
-```
-
-## Compare
-Compare performance with other vue table [vue-table-compare](https://github.com/ja-plus/vue-table-compare)
-
-
-## Other
-* `$*$`
+<p align="center">
+    <a href="https://ja-plus.github.io/stk-table-vue/">
+        <img src="./docs-src/public/assets/logo.svg" width="152">
+    </a>
+    <h3 align='center'>Stk Table Vue</h3>
+    <p align="center">
+        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/v/stk-table-vue"></a>
+        <a href="https://www.npmjs.com/package/stk-table-vue"><img src="https://img.shields.io/npm/dw/stk-table-vue"></a>
+        <a href="https://github.com/ja-plus/stk-table-vue/stargazers"><img src="https://img.shields.io/github/stars/ja-plus/stk-table-vue.svg"></a>
+        <a href="https://raw.githubusercontent.com/ja-plus/stk-table-vue/master/LICENSE"><img src="https://img.shields.io/npm/l/stk-table-vue"></a>
+        <a href="https://github.com/ja-plus/stk-table-vue"><img src="https://img.shields.io/npm/types/stk-table-vue"></a>
+    </p>
+</p>
+
+Stk Table Vue(Sticky Table) is a high-performance virtual list component based on Vue.
+
+Smooth performance with tens of thousands of rows
+
+Used for real-time data display, with data highlighting and dynamic effects.
+
+Support Vue3 and Vue2.7
+
+
+## Documentation
+### [Stk Table Vue Official](https://ja-plus.github.io/stk-table-vue/)
+
+
+## Repo: 
+- [Github](https://github.com/ja-plus/stk-table-vue)
+- [Gitee](https://gitee.com/japlus/stk-table-vue)
+
+## Demo
+[<span style="font-size: 16px;font-weight: bold;">Online Demo in stackblitz</span>](https://stackblitz.com/edit/vitejs-vite-ad91hh?file=src%2FDemo%2Findex.vue)
+
+## Usage
+> npm install stk-table-vue
+
+```html
+<script setup>
+import { StkTable } from 'stk-table-vue'
+import { ref, useTemplateRef } from 'vue'
+const stkTableRef = ref<InstanceType<typeof StkTable>>();
+// or Vue 3.5 useTemplateRef
+const stkTableRef = useTemplateRef('stkTableRef');
+
+// highlight row
+stkTableRef.value.setHighlightDimRow([rowKey], {
+  method: 'css' | 'animation', // default animation
+  className: 'custom-class-name', // for method 'css'
+  keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // same as https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API/Keyframe_Formats
+  duration: 2000,
+});
+// highlight cell
+stkTableRef.value.setHighlightDimCell(rowKey, colDataIndex, {
+  method: 'css' | 'animation',
+  className: 'custom-class-name', // for method 'css'
+  keyframe: [{ backgroundColor: '#aaa' }, { backgroundColor: '#222' }], // for method 'animation'
+  duration: 2000,
+});
+
+const columns = [
+  {title: 'name', dataIndex: 'name'},
+  {title: 'age', dataIndex: 'age'},
+  {title: 'address', dataIndex: 'address'},
+];
+
+const dataSource = [
+  {id: 1, name: 'John', age: 32, address: 'New York'},
+  {id: 2, name: 'Jim', age: 42, address: 'London'},
+  {id: 3, name: 'Joe', age: 52, address: 'Tokyo'},
+  {id: 4, name: 'Jack', age: 62, address: 'Sydney'},
+  {id: 5, name: 'Jill', age: 72, address: 'Paris'},
+]
+
+</script>
+
+<template>
+    <StkTable ref='stkTableRef' row-key="id" :data-source="dataSource" :columns="columns"></StkTable>
+</template>
+
+```
+
+### Vue2.7 Usage
+[Vue2.7 Usage](https://ja-plus.github.io/stk-table-vue/main/start/vue2-usage.html)
+
+## API
+* [Props](https://ja-plus.github.io/stk-table-vue/main/api/table-props.html)
+
+* [Emits](https://ja-plus.github.io/stk-table-vue/main/api/emits.html)
+
+* [Slots](https://ja-plus.github.io/stk-table-vue/main/api/slots.html)
+
+* [Expose](https://ja-plus.github.io/stk-table-vue/main/api/expose.html)
+
+* [StkTableColumn: Define column type](https://ja-plus.github.io/stk-table-vue/main/api/stk-table-column.html)
+
+* [Highlight: setHighlightDimCell & setHighlightDimRow](https://ja-plus.github.io/stk-table-vue/main/api/expose.html#sethighlightdimcell)
+
+
+### Example
+```vue
+<template>
+ <StkTable
+    ref="stkTable"
+    row-key="name"
+    v-model:columns="columns"
+    :style="{height:props.height}"
+    theme='dark'
+    height='200px'
+    bordered="h"
+    :row-height="28"
+    :show-overflow="false"
+    :show-header-overflow="false"
+    :sort-remote="false"
+    col-resizable
+    header-drag
+    virtual
+    virtual-x
+    no-data-full
+    col-resizable
+    auto-resize
+    fixed-col-shadow
+    :col-min-width="10"
+    :headless="false"
+    :data-source="dataSource"
+    @current-change="onCurrentChange"
+    @row-menu="onRowMenu"
+    @header-row-menu="onHeaderRowMenu"
+    @row-click="onRowClick"
+    @row-dblclick="onRowDblclick"
+    @sort-change="handleSortChange"
+    @cell-click="onCellClick"
+    @header-cell-click="onHeaderCellClick"
+    @scroll="onTableScroll"
+    @scroll-x="onTableScrollX"
+    @col-order-change="onColOrderChange"
+  />
+</template>
+<script setup>
+  import { h, defineComponent } from 'vue';
+  const columns = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      fixed: 'left',
+      width: '200px',
+      headerClassName: 'my-th',
+      className: 'my-td',
+      sorter: true,
+      customHeaderCell: function FunctionalComponent(props){
+          return h(
+              'span',
+              { style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
+              props.col.title + '(render) text-overflow,',
+          );
+      },
+      customCell: defineComponent({
+        setup(){
+          //...
+          return () => <div></div> // vue jsx
+        }
+      })
+    },
+  ]
+</script>
+```
+
+## Compare
+Compare performance with other vue table [vue-table-compare](https://github.com/ja-plus/vue-table-compare)
+
+
+## Other
+* `$*$`

package/lib/Dropdown-Clc70S1z.js

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0-beta.4
+ * version: v1.0.0
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/

package/lib/StkTable-QUd4TJCF.js

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0-beta.4
+ * version: v1.0.0
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/

package/lib/stk-table-vue.js

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0-beta.4
+ * version: v1.0.0
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -311,13 +311,13 @@ function createEditableCell(option) {
 	return { EditableCell: EditableCellComponent };
 }
 //#endregion
-//#region src/StkTable/custom-cells/CheckboxCell/Checkbox.vue?vue&type=script&setup=true&lang.ts
+//#region src/StkTable/custom-cells/CheckboxCell/CheckboxCell.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "stk-checkbox-cell" };
 var _hoisted_2 = ["checked", ".indeterminate"];
 //#endregion
-//#region src/StkTable/custom-cells/CheckboxCell/Checkbox.vue
-var Checkbox_default = /* @__PURE__ */ defineComponent({
-	__name: "Checkbox",
+//#region src/StkTable/custom-cells/CheckboxCell/CheckboxCell.vue
+var CheckboxCell_default = /* @__PURE__ */ defineComponent({
+	__name: "CheckboxCell",
 	props: {
 		checked: { type: Boolean },
 		indeterminate: { type: Boolean },
@@ -326,17 +326,33 @@ var Checkbox_default = /* @__PURE__ */ defineComponent({
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		/** 防重保护：部分 UI 库（Element Plus / Arco Design）会同时触发多个事件 */
+		let _lastValue;
 		function handleChange(e) {
-			emit("change", typeof e === "boolean" ? e : e.target.checked);
+			var _e$target;
+			let checked;
+			if (typeof e === "boolean") checked = e;
+			else if ((e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.checked) !== void 0) checked = e.target.checked;
+			else checked = !!e;
+			if (checked === _lastValue) return;
+			_lastValue = checked;
+			emit("change", checked);
 		}
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [__props.customComponent ? (openBlock(), createBlock(resolveDynamicComponent(__props.customComponent), {
 				key: 0,
 				"model-value": __props.checked,
+				checked: __props.checked,
 				indeterminate: __props.indeterminate,
 				"onUpdate:modelValue": handleChange,
+				"onUpdate:checked": handleChange,
+				onChange: handleChange,
 				onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
-			}, null, 8, ["model-value", "indeterminate"])) : (openBlock(), createElementBlock("input", {
+			}, null, 40, [
+				"model-value",
+				"checked",
+				"indeterminate"
+			])) : (openBlock(), createElementBlock("input", {
 				key: 1,
 				type: "checkbox",
 				checked: __props.checked,
@@ -409,7 +425,7 @@ function createCheckboxCell(options) {
 					props.row[field] = checked;
 					options === null || options === void 0 || (_options$onChange = options.onChange) === null || _options$onChange === void 0 || _options$onChange.call(options, checked, props.row);
 				}
-				return () => h(Checkbox_default, {
+				return () => h(CheckboxCell_default, {
 					checked: isChecked.value,
 					customComponent,
 					onChange: handleChange
@@ -447,7 +463,7 @@ function createCheckboxCell(options) {
 					});
 					options === null || options === void 0 || (_options$onSelectAll = options.onSelectAll) === null || _options$onSelectAll === void 0 || _options$onSelectAll.call(options, checked);
 				}
-				return () => h(Checkbox_default, {
+				return () => h(CheckboxCell_default, {
 					checked: isCheckAll.value,
 					indeterminate: isIndeterminate.value,
 					customComponent,

package/lib/style.css

@@ -1,6 +1,6 @@
 /**
  * name: stk-table-vue
- * version: v1.0.0-beta.4
+ * version: v1.0.0
  * description: High performance realtime virtual table for vue3 and vue2.7
  * author: japlus
  * homepage: https://ja-plus.github.io/stk-table-vue/
@@ -119,6 +119,7 @@
   width:100%;
   font-size:inherit;
   line-height:inherit;
+  font-family:inherit;
   box-sizing:border-box;
   outline:none;
   padding:0 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stk-table-vue",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0",
   "description": "High performance realtime virtual table for vue3 and vue2.7",
   "main": "./lib/stk-table-vue.js",
   "types": "./lib/src/StkTable/index.d.ts",
@@ -49,6 +49,7 @@
     "src"
   ],
   "devDependencies": {
+    "@arco-design/web-vue": "^2.58.0",
     "@chenglou/pretext": "^0.0.8",
     "@types/mockjs": "^1.0.10",
     "@types/node": "^22.18.10",
@@ -56,6 +57,8 @@
     "@typescript-eslint/parser": "^7.7.0",
     "@vitejs/plugin-vue": "^6.0.5",
     "@vue/test-utils": "^2.4.6",
+    "ant-design-vue": "4",
+    "element-plus": "^2.14.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-html": "^8.1.0",
@@ -66,6 +69,7 @@
     "less": "^4.2.0",
     "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
+    "naive-ui": "2",
     "postcss": "^8.4.47",
     "postcss-discard-comments": "^6.0.2",
     "postcss-preset-env": "^9.5.11",