vxe-table 4.3.0-beta.6 → 4.3.0

package/README.en.md

@@ -12,18 +12,18 @@
 [![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed)
 [![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
 
-A [vue](https://www.npmjs.com/package/vue) based PC form component, support add, delete, change, virtual list, virtual tree, lazy load, shortcut menu, data validation, print export, form rendering, data paging, modal window, custom template, renderer, flexible configuration items, extension interface, etc...
+A [vue](https://www.npmjs.com/package/vue) based PC form component, support add, delete, change, virtual list, virtual tree, lazy load, shortcut menu, data validation, print export, form rendering, data paging, modal window, custom template, renderer, flexible configuration items, etc...
 
 * Design concept
   * Efficient and concise API design for modern browsers.
-  * Modular tables, on-demand loading, extended interfaces.
+  * Modular tables, on-demand loading.
   * Designed for single row table editing, supports addition, deletion, modification and query as well as more expansion, with powerful functions and performance at the same time.
 
 * Plan
   * [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

@@ -12,18 +12,18 @@
 [![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed)
 [![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
 
-一个基于 [vue](https://www.npmjs.com/package/vue) 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...  
+一个基于 [vue](https://www.npmjs.com/package/vue) 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项等...  
 
 * 设计理念
   * 面向现代浏览器，高效的简洁 API 设计
-  * 模块化表格、按需加载、扩展接口
+  * 模块化表格、按需加载
   * 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能
 
 * 计划
   * [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

@@ -12,18 +12,18 @@
 [![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed)
 [![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
 
-一個基於 [vue](https://www.npmjs.com/package/vue) 的PC端表格組件，支持增删改查、虛擬清單、虛擬樹、懶加載、快捷選單、數據校驗、列印匯出、表單渲染、數據分頁、彈窗、自定義範本、渲染器、賊靈活的配寘項、擴展接口等…
+一個基於 [vue](https://www.npmjs.com/package/vue) 的PC端表格組件，支持增删改查、虛擬清單、虛擬樹、懶加載、快捷選單、數據校驗、列印匯出、表單渲染、數據分頁、彈窗、自定義範本、渲染器、賊靈活的配寘項等…
 
 * 設計理念
   * 面向現代瀏覽器，高效的簡潔 API 設計
-  * 模組化表格、按需加載、擴展介面
+  * 模組化表格、按需加載
   * 為單行編輯表格而設計，支持增删改查及更多擴展，强大的功能的同時兼具效能
 
 * 計劃
   * [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/checkbox/src/checkbox.js

@@ -33,15 +33,28 @@ export default defineComponent({
         var checkboxMethods = {};
         var computeSize = useSize(props);
         var $xecheckboxgroup = inject('$xecheckboxgroup', null);
-        var computeDisabled = computed(function () {
-            return props.disabled || ($xecheckboxgroup && $xecheckboxgroup.props.disabled);
+        var computeIsChecked = computed(function () {
+            if ($xecheckboxgroup) {
+                return XEUtils.includes($xecheckboxgroup.props.modelValue, props.label);
+            }
+            return props.modelValue === props.checkedValue;
         });
-        var computeChecked = computed(function () {
-            return $xecheckboxgroup ? XEUtils.includes($xecheckboxgroup.props.modelValue, props.label) : props.modelValue === props.checkedValue;
+        var computeIsDisabled = computed(function () {
+            if (props.disabled) {
+                return true;
+            }
+            if ($xecheckboxgroup) {
+                var groupProps = $xecheckboxgroup.props;
+                var computeIsMaximize = $xecheckboxgroup.getComputeMaps().computeIsMaximize;
+                var isMaximize = computeIsMaximize.value;
+                var isChecked = computeIsChecked.value;
+                return groupProps.disabled || (isMaximize && !isChecked);
+            }
+            return false;
         });
         var changeEvent = function (evnt) {
             var checkedValue = props.checkedValue, uncheckedValue = props.uncheckedValue;
-            var isDisabled = computeDisabled.value;
+            var isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 var checked = evnt.target.checked;
                 var value = checked ? checkedValue : uncheckedValue;
@@ -68,8 +81,8 @@ export default defineComponent({
         var renderVN = function () {
             var _a;
             var vSize = computeSize.value;
-            var isDisabled = computeDisabled.value;
-            var isChecked = computeChecked.value;
+            var isDisabled = computeIsDisabled.value;
+            var isChecked = computeIsChecked.value;
             var indeterminate = props.indeterminate;
             return h('label', {
                 class: ['vxe-checkbox', (_a = {},

package/es/checkbox/src/group.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, provide, inject } from 'vue';
+import { defineComponent, h, provide, computed, inject } from 'vue';
 import GlobalConfig from '../../v-x-e-table/src/conf';
 import XEUtils from 'xe-utils';
 import { useSize } from '../../hooks/size';
@@ -7,6 +7,7 @@ export default defineComponent({
     props: {
         modelValue: Array,
         disabled: Boolean,
+        max: { type: [String, Number], default: null },
         size: { type: String, default: function () { return GlobalConfig.checkbox.size || GlobalConfig.size; } }
     },
     emits: [
@@ -18,10 +19,21 @@ export default defineComponent({
         var $xeform = inject('$xeform', null);
         var $xeformiteminfo = inject('$xeformiteminfo', null);
         var xID = XEUtils.uniqueId();
+        var computeIsMaximize = computed(function () {
+            var modelValue = props.modelValue, max = props.max;
+            if (max) {
+                return (modelValue ? modelValue.length : 0) >= XEUtils.toNumber(max);
+            }
+            return false;
+        });
+        var computeMaps = {
+            computeIsMaximize: computeIsMaximize
+        };
         var $xecheckboxgroup = {
             xID: xID,
             props: props,
-            context: context
+            context: context,
+            getComputeMaps: function () { return computeMaps; }
         };
         useSize(props);
         var checkboxGroupMethods = {

package/es/checkbox/style.css

@@ -178,7 +178,7 @@
   transition: background-color 0.1s ease-in-out; }
 
 .vxe-checkbox .vxe-checkbox--icon {
-  font-size: 1.16em; }
+  font-size: 1.34em; }
 
 .vxe-checkbox .vxe-checkbox--icon {
   color: #dcdfe6;

package/es/export/style.css

@@ -24,7 +24,7 @@
 /*switch*/
 /*pulldown*/
 .vxe-export--panel-column-option .vxe-checkbox--icon {
-  font-size: 1.16em; }
+  font-size: 1.34em; }
 
 .vxe-export--panel-column-option .vxe-checkbox--icon {
   color: #dcdfe6;
@@ -182,15 +182,3 @@
 .vxe-export--panel .vxe-export--panel-btns {
   text-align: right;
   padding: 0.25em; }
-
-.vxe-modal--wrapper .vxe-export--panel-column-option > .vxe-checkbox--icon {
-  font-size: 15px; }
-
-.vxe-modal--wrapper.size--medium .vxe-export--panel-column-option > .vxe-checkbox--icon {
-  font-size: 14px; }
-
-.vxe-modal--wrapper.size--small .vxe-export--panel-column-option > .vxe-checkbox--icon {
-  font-size: 13px; }
-
-.vxe-modal--wrapper.size--mini .vxe-export--panel-column-option > .vxe-checkbox--icon {
-  font-size: 12px; }

package/es/filter/style.css

@@ -25,7 +25,7 @@
 /*switch*/
 /*pulldown*/
 .vxe-table--filter-option .vxe-checkbox--icon {
-  font-size: 1.16em; }
+  font-size: 1.34em; }
 
 .vxe-table--filter-option .vxe-checkbox--icon {
   color: #dcdfe6;
@@ -139,15 +139,3 @@
       .vxe-table--filter-wrapper .vxe-table--filter-footer button.is--disabled {
         color: #BFBFBF;
         cursor: not-allowed; }
-
-.vxe-table .vxe-table--filter-option > .vxe-checkbox--icon {
-  font-size: 15px; }
-
-.vxe-table.size--medium .vxe-table--filter-option > .vxe-checkbox--icon {
-  font-size: 14px; }
-
-.vxe-table.size--small .vxe-table--filter-option > .vxe-checkbox--icon {
-  font-size: 13px; }
-
-.vxe-table.size--mini .vxe-table--filter-option > .vxe-checkbox--icon {
-  font-size: 12px; }

package/es/form/src/form.js

@@ -575,7 +575,7 @@ export default defineComponent({
                  */
                 h(VxeLoading, {
                     class: 'vxe-form--loading',
-                    loading: loading
+                    modelValue: loading
                 }),
                 /**
                  * 工具提示

package/es/grid/style.css

@@ -37,7 +37,7 @@
        -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;
-    background-color: rgba(0, 0, 0, 0.2); }
+    background-color: rgba(255, 255, 255, 0.5); }
   .vxe-grid.is--loading > .vxe-table .vxe-loading {
     background-color: transparent; }
   .vxe-grid.is--maximize {

package/es/icon/index.js

@@ -1,6 +1,10 @@
-export var VxeIcon = {
-    /* eslint-disable @typescript-eslint/no-empty-function */
-    install: function () { }
-};
+import VxeIconComponent from './src/icon';
+import { dynamicApp } from '../dynamics';
+export var VxeIcon = Object.assign(VxeIconComponent, {
+    install: function (app) {
+        app.component(VxeIconComponent.name, VxeIconComponent);
+    }
+});
 export var Icon = VxeIcon;
+dynamicApp.component(VxeIcon.name, VxeIcon);
 export default VxeIcon;

package/es/icon/src/icon.js

@@ -0,0 +1,23 @@
+import { defineComponent, h } from 'vue';
+export default defineComponent({
+    name: 'VxeIcon',
+    props: {
+        name: String,
+        roll: Boolean
+    },
+    emits: [
+        'click'
+    ],
+    setup: function (props, _a) {
+        var emit = _a.emit;
+        var clickEvent = function (evnt) {
+            emit('click', { $event: evnt });
+        };
+        return function () {
+            return h('i', {
+                class: ["vxe-icon-".concat(props.name), props.roll ? 'roll' : ''],
+                onClick: clickEvent
+            });
+        };
+    }
+});