vxe-table 4.2.8 → 4.3.0-beta.10

package/README.en.md

@@ -23,7 +23,7 @@ A [vue](https://www.npmjs.com/package/vue) based PC form component, support add,
   * [x] v1.0 Based on vue2.6+, Support for all major browsers.
   * [x] v2.0 Based on vue2.6+, Support for all major browsers.
   * [x] v3.0 Support modern browser and keep IE11 compatible to improve rendering performance.
-  * [x] v4.0 Based on vue3.0+, Only support modern browser, not IE.
+  * [x] v4.0 Based on vue3.2+, Only support modern browser, not IE.
 
 ## Browser Support
 

package/README.md

@@ -23,7 +23,7 @@
   * [x] v1.0 基于 vue2.6+，支持所有主流的浏览器，实现表格的一切实用的功能
   * [x] v2.0 基于 vue2.6+，支持所有主流的浏览器，同时兼具功能与性能
   * [x] v3.0 基于 vue2.6+，支持现代浏览器并保留兼容 IE11，提升渲染性能
-  * [x] v4.0 基于 vue3.0+，只支持现代浏览器，不支持 IE
+  * [x] v4.0 基于 vue3.2+，只支持现代浏览器，不支持 IE
   * [ ] 下一阶段：sticky 渲染模式、css 变量主题、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化
 
 ## QQ 交流群

package/README.zh-TW.md

@@ -23,7 +23,7 @@
   * [x] v1.0 基於 vue2.6+，支持所有主流的瀏覽器，實現表格的一切實用的功能
   * [x] v2.0 基於 vue2.6+，支持所有主流的瀏覽器，同時兼具功能與效能
   * [x] v3.0 基於 vue2.6+，支持現代瀏覽器並保留相容IE11，提升渲染效能
-  * [x] v4.0 基于 vue3.0+，只支持現代瀏覽器，不支持IE
+  * [x] v4.0 基于 vue3.2+，只支持現代瀏覽器，不支持IE
 
 ## 瀏覽器支持
 

package/es/all.js

@@ -1,77 +1,75 @@
 import XEUtils from 'xe-utils';
 import { setup } from './v-x-e-table';
-import { Icon } from './icon';
-import { Filter } from './filter';
-import { Menu } from './menu';
-import { Edit } from './edit';
-import { Export } from './export';
-import { Keyboard } from './keyboard';
-import { Validator } from './validator';
-import { Footer } from './footer';
-import { Column } from './column';
-import { Colgroup } from './colgroup';
-import { Grid } from './grid';
-import { Toolbar } from './toolbar';
-import { Pager } from './pager';
-import { Checkbox } from './checkbox';
-import { CheckboxGroup } from './checkbox-group';
-import { Radio } from './radio';
-import { RadioGroup } from './radio-group';
-import { RadioButton } from './radio-button';
-import { Input } from './input';
-import { Textarea } from './textarea';
-import { Button } from './button';
-import { Modal } from './modal';
-import { Tooltip } from './tooltip';
-import { Form } from './form';
-import { FormItem } from './form-item';
-import { FormGather } from './form-gather';
-import { Select } from './select';
-import { Optgroup } from './optgroup';
-import { Option } from './option';
-import { Switch } from './switch';
-import { List } from './list';
-import { Pulldown } from './pulldown';
-import { Table } from './table';
+import { VxeModuleFilter } from './filter';
+import { VxeModuleMenu } from './menu';
+import { VxeModuleEdit } from './edit';
+import { VxeModuleExport } from './export';
+import { VxeModuleKeyboard } from './keyboard';
+import { VxeModuleValidator } from './validator';
+import { VxeIcon } from './icon';
+import { VxeColumn } from './column';
+import { VxeColgroup } from './colgroup';
+import { VxeGrid } from './grid';
+import { VxeToolbar } from './toolbar';
+import { VxePager } from './pager';
+import { VxeCheckbox } from './checkbox';
+import { VxeCheckboxGroup } from './checkbox-group';
+import { VxeRadio } from './radio';
+import { VxeRadioGroup } from './radio-group';
+import { VxeRadioButton } from './radio-button';
+import { VxeInput } from './input';
+import { VxeTextarea } from './textarea';
+import { VxeButton } from './button';
+import { VxeModal } from './modal';
+import { VxeTooltip } from './tooltip';
+import { VxeForm } from './form';
+import { VxeFormItem } from './form-item';
+import { VxeFormGather } from './form-gather';
+import { VxeSelect } from './select';
+import { VxeOptgroup } from './optgroup';
+import { VxeOption } from './option';
+import { VxeSwitch } from './switch';
+import { VxeList } from './list';
+import { VxePulldown } from './pulldown';
+import { VxeTable } from './table';
 import zhCN from './locale/lang/zh-CN';
 // 按需加载的组件
 var components = [
     // 功能模块
-    Footer,
-    Icon,
-    Filter,
-    Menu,
-    Edit,
-    Export,
-    Keyboard,
-    Validator,
+    VxeModuleFilter,
+    VxeModuleMenu,
+    VxeModuleEdit,
+    VxeModuleExport,
+    VxeModuleKeyboard,
+    VxeModuleValidator,
     // 可选组件
-    Column,
-    Colgroup,
-    Grid,
-    Toolbar,
-    Pager,
-    Checkbox,
-    CheckboxGroup,
-    Radio,
-    RadioGroup,
-    RadioButton,
-    Input,
-    Textarea,
-    Button,
-    Modal,
-    Tooltip,
-    Form,
-    FormItem,
-    FormGather,
-    Select,
-    Optgroup,
-    Option,
-    Switch,
-    List,
-    Pulldown,
+    VxeIcon,
+    VxeColumn,
+    VxeColgroup,
+    VxeGrid,
+    VxeToolbar,
+    VxePager,
+    VxeCheckbox,
+    VxeCheckboxGroup,
+    VxeRadio,
+    VxeRadioGroup,
+    VxeRadioButton,
+    VxeInput,
+    VxeTextarea,
+    VxeButton,
+    VxeModal,
+    VxeTooltip,
+    VxeForm,
+    VxeFormItem,
+    VxeFormGather,
+    VxeSelect,
+    VxeOptgroup,
+    VxeOption,
+    VxeSwitch,
+    VxeList,
+    VxePulldown,
     // 核心
-    Table
+    VxeTable
 ];
 // 默认中文
 setup({
@@ -92,7 +90,6 @@ export * from './export';
 export * from './keyboard';
 export * from './validator';
 export * from './header';
-export * from './footer';
 export * from './column';
 export * from './colgroup';
 export * from './grid';

package/es/button/index.d.ts

@@ -1,4 +1,4 @@
-import { Button } from '../../types/button'
+import { VxeButton } from '../../types/button'
 
 export * from '../../types/button'
-export default Button
+export default VxeButton

package/es/button/index.js

@@ -1,9 +1,10 @@
 import VxeButtonComponent from './src/button';
 import { dynamicApp } from '../dynamics';
-export var Button = Object.assign(VxeButtonComponent, {
+export var VxeButton = Object.assign(VxeButtonComponent, {
     install: function (app) {
         app.component(VxeButtonComponent.name, VxeButtonComponent);
     }
 });
+export var Button = VxeButton;
 dynamicApp.component(VxeButtonComponent.name, VxeButtonComponent);
-export default Button;
+export default VxeButton;

package/es/button/src/button.js

@@ -157,16 +157,16 @@ export default defineComponent({
                             btnLeft = marginSize;
                         }
                         Object.assign(panelStyle, {
-                            left: btnLeft + "px",
+                            left: "".concat(btnLeft, "px"),
                             right: 'auto',
-                            top: btnTop + "px",
-                            minWidth: targetWidth + "px"
+                            top: "".concat(btnTop, "px"),
+                            minWidth: "".concat(targetWidth, "px")
                         });
                     }
                     else {
                         if (placement === 'top') {
                             panelPlacement = 'top';
-                            panelStyle.bottom = targetHeight + "px";
+                            panelStyle.bottom = "".concat(targetHeight, "px");
                         }
                         else if (!placement) {
                             // 如果下面不够放，则向上
@@ -174,7 +174,7 @@ export default defineComponent({
                                 // 如果上面不够放，则向下（优先）
                                 if (boundingTop - targetHeight - panelHeight > marginSize) {
                                     panelPlacement = 'top';
-                                    panelStyle.bottom = targetHeight + "px";
+                                    panelStyle.bottom = "".concat(targetHeight, "px");
                                 }
                             }
                         }
@@ -339,15 +339,15 @@ export default defineComponent({
                 return h('div', {
                     ref: refElem,
                     class: ['vxe-button--dropdown', className, (_a = {},
-                            _a["size--" + vSize] = vSize,
+                            _a["size--".concat(vSize)] = vSize,
                             _a['is--active'] = showPanel,
                             _a)]
                 }, [
                     h('button', {
                         ref: refButton,
-                        class: ['vxe-button', "type--" + btnType, (_b = {},
-                                _b["size--" + vSize] = vSize,
-                                _b["theme--" + status] = status,
+                        class: ['vxe-button', "type--".concat(btnType), (_b = {},
+                                _b["size--".concat(vSize)] = vSize,
+                                _b["theme--".concat(status)] = status,
                                 _b['is--round'] = round,
                                 _b['is--circle'] = circle,
                                 _b['is--disabled'] = disabled || loading,
@@ -361,7 +361,7 @@ export default defineComponent({
                         onClick: clickEvent
                     }, renderContent().concat([
                         h('i', {
-                            class: "vxe-button--dropdown-arrow " + GlobalConfig.icon.BUTTON_DROPDOWN
+                            class: "vxe-button--dropdown-arrow ".concat(GlobalConfig.icon.BUTTON_DROPDOWN)
                         })
                     ])),
                     h(Teleport, {
@@ -371,7 +371,7 @@ export default defineComponent({
                         h('div', {
                             ref: refBtnPanel,
                             class: ['vxe-button--dropdown-panel', (_c = {},
-                                    _c["size--" + vSize] = vSize,
+                                    _c["size--".concat(vSize)] = vSize,
                                     _c['animat--leave'] = reactData.animatVisible,
                                     _c['animat--enter'] = showPanel,
                                     _c)],
@@ -391,9 +391,9 @@ export default defineComponent({
             }
             return h('button', {
                 ref: refButton,
-                class: ['vxe-button', "type--" + btnType, (_d = {},
-                        _d["size--" + vSize] = vSize,
-                        _d["theme--" + status] = status,
+                class: ['vxe-button', "type--".concat(btnType), (_d = {},
+                        _d["size--".concat(vSize)] = vSize,
+                        _d["theme--".concat(status)] = status,
                         _d['is--round'] = round,
                         _d['is--circle'] = circle,
                         _d['is--disabled'] = disabled || loading,

package/es/button/style.css

@@ -46,8 +46,6 @@
   .vxe-button:not(.is--disabled) {
     color: #606266;
     cursor: pointer; }
-    .vxe-button:not(.is--disabled) .vxe-button--icon.vxe-icon--zoomin {
-      border-color: #606266; }
   .vxe-button.is--loading {
     cursor: progress; }
     .vxe-button.is--loading:before {
@@ -62,8 +60,6 @@
       pointer-events: none; }
   .vxe-button.is--disabled {
     color: #BFBFBF; }
-    .vxe-button.is--disabled .vxe-button--icon.vxe-icon--zoomin {
-      border-color: #BFBFBF; }
     .vxe-button.is--disabled:not(.is--loading) {
       cursor: no-drop; }
   .vxe-button.type--text {
@@ -72,41 +68,53 @@
     padding: 0.1em 0.5em;
     background-color: transparent; }
     .vxe-button.type--text:not(.is--disabled):focus {
-      box-shadow: 0 0 0.25em 0 #409eff; }
+      color: #2f3031; }
     .vxe-button.type--text:not(.is--disabled):hover {
       color: #73b8ff; }
     .vxe-button.type--text.theme--primary {
       color: #409eff; }
+      .vxe-button.type--text.theme--primary:not(.is--disabled):focus {
+        color: #0d84ff; }
       .vxe-button.type--text.theme--primary:not(.is--disabled):hover {
         color: #73b8ff; }
       .vxe-button.type--text.theme--primary.is--disabled {
         color: #a6d2ff; }
     .vxe-button.type--text.theme--success {
       color: #67c23a; }
+      .vxe-button.type--text.theme--success:not(.is--disabled):focus {
+        color: #529b2e; }
       .vxe-button.type--text.theme--success:not(.is--disabled):hover {
         color: #85cf60; }
       .vxe-button.type--text.theme--success.is--disabled {
         color: #a3db87; }
     .vxe-button.type--text.theme--info {
       color: #909399; }
+      .vxe-button.type--text.theme--info:not(.is--disabled):focus {
+        color: #767980; }
       .vxe-button.type--text.theme--info:not(.is--disabled):hover {
         color: #abadb1; }
       .vxe-button.type--text.theme--info.is--disabled {
         color: #c5c7ca; }
     .vxe-button.type--text.theme--warning {
       color: #e6a23c; }
+      .vxe-button.type--text.theme--warning:not(.is--disabled):focus {
+        color: #d48a1b; }
       .vxe-button.type--text.theme--warning:not(.is--disabled):hover {
         color: #ecb869; }
       .vxe-button.type--text.theme--warning.is--disabled {
         color: #f2cd96; }
     .vxe-button.type--text.theme--danger {
       color: #f56c6c; }
+      .vxe-button.type--text.theme--danger:not(.is--disabled):focus {
+        color: #f23c3c; }
       .vxe-button.type--text.theme--danger:not(.is--disabled):hover {
         color: #f89c9c; }
       .vxe-button.type--text.theme--danger.is--disabled {
         color: #fbcccc; }
     .vxe-button.type--text.theme--perfect {
       color: #f8f8f9; }
+      .vxe-button.type--text.theme--perfect:not(.is--disabled):focus {
+        color: #dddde1; }
       .vxe-button.type--text.theme--perfect:not(.is--disabled):hover {
         color: white; }
       .vxe-button.type--text.theme--perfect.is--disabled {
@@ -128,23 +136,14 @@
       padding: 0 1em; }
     .vxe-button.type--button:not(.is--disabled):hover {
       color: #5faeff; }
-      .vxe-button.type--button:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
-        border-color: #5faeff; }
     .vxe-button.type--button:not(.is--disabled):focus {
-      border-color: #409eff;
-      box-shadow: 0 0 0.25em 0 #409eff; }
+      border-color: #409eff; }
     .vxe-button.type--button:not(.is--disabled):active {
       color: #3196ff;
       border-color: #3196ff;
       background-color: #f7f7f7; }
-      .vxe-button.type--button:not(.is--disabled):active .vxe-button--icon.vxe-icon--zoomin {
-        background-color: #f7f7f7; }
-      .vxe-button.type--button:not(.is--disabled):active .vxe-button--icon.vxe-icon--zoomout:after {
-        background-color: #f7f7f7; }
     .vxe-button.type--button.theme--primary {
       color: #fff; }
-      .vxe-button.type--button.theme--primary .vxe-button--icon.vxe-icon--zoomin {
-        border-color: #fff; }
       .vxe-button.type--button.theme--primary:not(.is--disabled) {
         border-color: #409eff;
         background-color: #409eff; }
@@ -152,16 +151,10 @@
           color: #fff;
           background-color: #5faeff;
           border-color: #5faeff; }
-          .vxe-button.type--button.theme--primary:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
-            border-color: #5faeff; }
         .vxe-button.type--button.theme--primary:not(.is--disabled):active {
           color: #fff;
           background-color: #3196ff;
           border-color: #3196ff; }
-          .vxe-button.type--button.theme--primary:not(.is--disabled):active.vxe-icon--zoomin {
-            background-color: #3196ff; }
-          .vxe-button.type--button.theme--primary:not(.is--disabled):active.vxe-icon--zoomout:after {
-            background-color: #3196ff; }
       .vxe-button.type--button.theme--primary.is--disabled {
         border-color: #a6d2ff;
         background-color: #a6d2ff; }
@@ -170,8 +163,6 @@
         background-color: #409eff; }
     .vxe-button.type--button.theme--success {
       color: #fff; }
-      .vxe-button.type--button.theme--success .vxe-button--icon.vxe-icon--zoomin {
-        border-color: #fff; }
       .vxe-button.type--button.theme--success:not(.is--disabled) {
         border-color: #67c23a;
         background-color: #67c23a; }
@@ -179,16 +170,10 @@
           color: #fff;
           background-color: #79cb50;
           border-color: #79cb50; }
-          .vxe-button.type--button.theme--success:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
-            border-color: #79cb50; }
         .vxe-button.type--button.theme--success:not(.is--disabled):active {
           color: #fff;
           background-color: #61b636;
           border-color: #61b636; }
-          .vxe-button.type--button.theme--success:not(.is--disabled):active.vxe-icon--zoomin {
-            background-color: #61b636; }
-          .vxe-button.type--button.theme--success:not(.is--disabled):active.vxe-icon--zoomout:after {
-            background-color: #61b636; }
       .vxe-button.type--button.theme--success.is--disabled {
         border-color: #a3db87;
         background-color: #a3db87; }
@@ -197,8 +182,6 @@
         background-color: #67c23a; }
     .vxe-button.type--button.theme--info {
       color: #fff; }
-      .vxe-button.type--button.theme--info .vxe-button--icon.vxe-icon--zoomin {
-        border-color: #fff; }
       .vxe-button.type--button.theme--info:not(.is--disabled) {
         border-color: #909399;
         background-color: #909399; }
@@ -206,16 +189,10 @@
           color: #fff;
           background-color: #a0a3a8;
           border-color: #a0a3a8; }
-          .vxe-button.type--button.theme--info:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
-            border-color: #a0a3a8; }
         .vxe-button.type--button.theme--info:not(.is--disabled):active {
           color: #fff;
           background-color: #888b92;
           border-color: #888b92; }
-          .vxe-button.type--button.theme--info:not(.is--disabled):active.vxe-icon--zoomin {
-            background-color: #888b92; }
-          .vxe-button.type--button.theme--info:not(.is--disabled):active.vxe-icon--zoomout:after {
-            background-color: #888b92; }
       .vxe-button.type--button.theme--info.is--disabled {
         border-color: #c5c7ca;
         background-color: #c5c7ca; }
@@ -224,8 +201,6 @@
         background-color: #909399; }
     .vxe-button.type--button.theme--warning {
       color: #fff; }
-      .vxe-button.type--button.theme--warning .vxe-button--icon.vxe-icon--zoomin {
-        border-color: #fff; }
       .vxe-button.type--button.theme--warning:not(.is--disabled) {
         border-color: #e6a23c;
         background-color: #e6a23c; }
@@ -233,16 +208,10 @@
           color: #fff;
           background-color: #e9af57;
           border-color: #e9af57; }
-          .vxe-button.type--button.theme--warning:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
-            border-color: #e9af57; }
         .vxe-button.type--button.theme--warning:not(.is--disabled):active {
           color: #fff;
           background-color: #e49c2e;
           border-color: #e49c2e; }
-          .vxe-button.type--button.theme--warning:not(.is--disabled):active.vxe-icon--zoomin {
-            background-color: #e49c2e; }
-          .vxe-button.type--button.theme--warning:not(.is--disabled):active.vxe-icon--zoomout:after {
-            background-color: #e49c2e; }
       .vxe-button.type--button.theme--warning.is--disabled {
         border-color: #f2cd96;
         background-color: #f2cd96; }
@@ -251,8 +220,6 @@
         background-color: #e6a23c; }
     .vxe-button.type--button.theme--danger {
       color: #fff; }
-      .vxe-button.type--button.theme--danger .vxe-button--icon.vxe-icon--zoomin {
-        border-color: #fff; }
       .vxe-button.type--button.theme--danger:not(.is--disabled) {
         border-color: #f56c6c;
         background-color: #f56c6c; }
@@ -260,16 +227,10 @@
           color: #fff;
           background-color: #f78989;
           border-color: #f78989; }
-          .vxe-button.type--button.theme--danger:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
-            border-color: #f78989; }
         .vxe-button.type--button.theme--danger:not(.is--disabled):active {
           color: #fff;
           background-color: #f45e5e;
           border-color: #f45e5e; }
-          .vxe-button.type--button.theme--danger:not(.is--disabled):active.vxe-icon--zoomin {
-            background-color: #f45e5e; }
-          .vxe-button.type--button.theme--danger:not(.is--disabled):active.vxe-icon--zoomout:after {
-            background-color: #f45e5e; }
       .vxe-button.type--button.theme--danger.is--disabled {
         border-color: #fbcccc;
         background-color: #fbcccc; }
@@ -278,8 +239,6 @@
         background-color: #f56c6c; }
     .vxe-button.type--button.theme--perfect {
       color: #606266; }
-      .vxe-button.type--button.theme--perfect .vxe-button--icon.vxe-icon--zoomin {
-        border-color: #606266; }
       .vxe-button.type--button.theme--perfect:not(.is--disabled) {
         border-color: #f8f8f9;
         background-color: #f8f8f9; }
@@ -287,16 +246,10 @@
           color: #606266;
           background-color: white;
           border-color: white; }
-          .vxe-button.type--button.theme--perfect:not(.is--disabled):hover .vxe-button--icon.vxe-icon--zoomin {
-            border-color: white; }
         .vxe-button.type--button.theme--perfect:not(.is--disabled):active {
           color: #606266;
           background-color: #f0f0f2;
           border-color: #f0f0f2; }
-          .vxe-button.type--button.theme--perfect:not(.is--disabled):active.vxe-icon--zoomin {
-            background-color: #f0f0f2; }
-          .vxe-button.type--button.theme--perfect:not(.is--disabled):active.vxe-icon--zoomout:after {
-            background-color: #f0f0f2; }
       .vxe-button.type--button.theme--perfect.is--disabled {
         border-color: white;
         background-color: white; }
@@ -413,6 +366,7 @@
     transform: rotate(180deg); }
 
 .vxe-button--dropdown-arrow {
+  display: inline-block;
   font-size: 12px;
   margin-left: 4px;
   transition: transform 0.2s ease-in-out; }

package/es/checkbox/index.d.ts

@@ -1,4 +1,4 @@
-import { Checkbox } from '../../types/checkbox'
+import { VxeCheckbox } from '../../types/checkbox'
 
 export * from '../../types/checkbox'
-export default Checkbox
+export default VxeCheckbox

package/es/checkbox/index.js

@@ -1,9 +1,10 @@
 import VxeCheckboxComponent from './src/checkbox';
 import { dynamicApp } from '../dynamics';
-export var Checkbox = Object.assign(VxeCheckboxComponent, {
+export var VxeCheckbox = Object.assign(VxeCheckboxComponent, {
     install: function (app) {
         app.component(VxeCheckboxComponent.name, VxeCheckboxComponent);
     }
 });
+export var Checkbox = VxeCheckbox;
 dynamicApp.component(VxeCheckboxComponent.name, VxeCheckboxComponent);
-export default Checkbox;
+export default VxeCheckbox;

package/es/checkbox/src/checkbox.js

@@ -69,11 +69,14 @@ export default defineComponent({
             var _a;
             var vSize = computeSize.value;
             var isDisabled = computeDisabled.value;
+            var isChecked = computeChecked.value;
+            var indeterminate = props.indeterminate;
             return h('label', {
                 class: ['vxe-checkbox', (_a = {},
-                        _a["size--" + vSize] = vSize,
-                        _a['is--indeterminate'] = props.indeterminate,
+                        _a["size--".concat(vSize)] = vSize,
+                        _a['is--indeterminate'] = indeterminate,
                         _a['is--disabled'] = isDisabled,
+                        _a['is--checked'] = isChecked,
                         _a)],
                 title: props.title
             }, [
@@ -81,11 +84,11 @@ export default defineComponent({
                     class: 'vxe-checkbox--input',
                     type: 'checkbox',
                     disabled: isDisabled,
-                    checked: computeChecked.value,
+                    checked: isChecked,
                     onChange: changeEvent
                 }),
                 h('span', {
-                    class: 'vxe-checkbox--icon'
+                    class: ['vxe-checkbox--icon', indeterminate ? 'vxe-icon-checkbox-indeterminate' : (isChecked ? 'vxe-icon-checkbox-checked' : 'vxe-icon-checkbox-unchecked')]
                 }),
                 h('span', {
                     class: 'vxe-checkbox--label'