@king-design/react 3.3.2 → 3.4.0-beta.0

package/components/table/styles.js

@@ -90,7 +90,7 @@ setDefault(function () {
   makeGroupMenuStyles == null || makeGroupMenuStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&.", k, "-fixed-right:before{left:-2px;}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&.", k, "-fixed-right:before{left:-2px;}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-hidden{display:none;}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
     return /*#__PURE__*/css(".", k, "-align-", type, "{text-align:", type, ";}");
   }), ">.", k, "-pagination{margin:16px 0;}&.", k, "-fix-header{min-height:0;.", k, "-table-wrapper{height:100%;}}");
 });

package/components/table/table.vdt.js

@@ -84,7 +84,7 @@ export default function ($props, $blocks, $__proto__) {
   var onStart = this.resizable.start;
   var colgroup = _$ce(2, 'colgroup', [checkType !== 'none' ? _$ce(2, 'col', null, 1, null, _$tmp0) : undefined, _$ma(cols, function ($value, $key) {
     var _$cn2;
-    return _$ce(2, 'col', null, 1, _$cn((_$cn2 = {}, _$cn2[$value.className] = $value.className, _$cn2)), {
+    return _$ce(2, 'col', null, 1, _$cn((_$cn2 = {}, _$cn2[k + "-hidden"] = $value.hidden, _$cn2[$value.className] = $value.className, _$cn2)), {
       'width': $value.width,
       'style': {
         width: getWidth($value.key)

package/components/table/useChecked.js

@@ -4,6 +4,7 @@ import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/spl
 import { useInstance } from 'intact-react';
 import { watchState } from '../../hooks/useState';
 import { toggleArray } from '../utils';
+import { useReceive } from '../../hooks/useReceive';
 export var AllCheckedStatus;
 (function (AllCheckedStatus) {
   AllCheckedStatus[AllCheckedStatus["All"] = 0] = "All";
@@ -176,7 +177,8 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
   function triggerEvent(isChecked, key, rowIndex) {
     instance.trigger(isChecked ? 'checkRow' : 'uncheckRow', data.value[rowIndex], rowIndex, key);
   }
-  instance.on('$receive:children', updateAllCheckedStatus);
+  // instance.on('$receive:children', updateAllCheckedStatus);
+  useReceive(['children'], updateAllCheckedStatus);
   instance.on('$change:checkedKeys', updateAllCheckedStatus);
   // for draggable
   watchState(data, updateAllCheckedStatus);

package/components/table/useColumns.js

@@ -61,7 +61,7 @@ export function useColumns() {
       props.children = null;
       props.cols = 1;
       cols.push(props);
-      maxCols++;
+      if (!props.hidden) maxCols++;
       Object.defineProperty(props, 'rows', {
         get: function get() {
           return maxRows - row;

package/components/table/useDisableRow.js

@@ -1,5 +1,6 @@
 import { useInstance } from 'intact-react';
 import { watchState } from '../../hooks/useState';
+import { useReceive } from '../../hooks/useReceive';
 export function useDisableRow(loopData, data) {
   var instance = useInstance();
   var enabledKeys = [];
@@ -36,7 +37,8 @@ export function useDisableRow(loopData, data) {
   function getAllKeys() {
     return allKeys;
   }
-  instance.on('$receive:children', setDisabledKeys);
+  // instance.on('$receive:children', setDisabledKeys);
+  useReceive(['children'], setDisabledKeys);
   watchState(data, setDisabledKeys);
   return {
     isDisabled: isDisabled,

package/components/table/useMerge.js

@@ -1,5 +1,6 @@
 import { useInstance } from 'intact-react';
 import { watchState } from '../../hooks/useState';
+import { useReceive } from '../../hooks/useReceive';
 export function useMerge(getCols, data) {
   var instance = useInstance();
   var grid = [];
@@ -58,7 +59,11 @@ export function useMerge(getCols, data) {
   function getGrid() {
     return grid;
   }
-  instance.on('$receive:children', handleSpans);
+  /**
+   * https://github.com/ksc-fe/kpc/issues/1008
+   */
+  // instance.on('$receive:children', handleSpans);
+  useReceive(['children'], handleSpans);
   watchState(data, handleSpans);
   return {
     getGrid: getGrid

package/components/utils.js

@@ -263,7 +263,24 @@ export function strPad(str, length, pad) {
   }
   return str;
 }
+/**
+ * 在vue3.0中，数组会转成Proxy对象，需要获取原始数据比较
+ * https://github.com/ksc-fe/kpc/issues/985
+ * https://github.com/vuejs/core/blob/main/packages/reactivity/src/reactive.ts
+ */
+var RAW = '__v_raw';
+function isProxy(value) {
+  return value ? !!value[RAW] : false;
+}
+function toRaw(observed) {
+  var raw = observed && observed[RAW];
+  return raw ? toRaw(raw) : observed;
+}
 export function isEqualArray(a, b) {
+  if (a === b) return true;
+  // for vue3.0 Proxy object
+  if (isProxy(a)) a = toRaw(a);
+  if (isProxy(b)) b = toRaw(b);
   if (a === b) return true;
   if (Array.isArray(a) && Array.isArray(b)) {
     if (a.length !== b.length) return false;

package/i18n/en-US.js

@@ -1,3 +1,4 @@
+import _globalThis from "@babel/runtime-corejs3/core-js/global-this";
 var i18n = {
   // datepicker
   'yearMonthFormat': 'MM YYYY',
@@ -107,6 +108,9 @@ var i18n = {
   '复制': 'Copy'
 };
 export default i18n;
-if (typeof global.Kpc !== 'undefined') {
-  global.Kpc.localize(i18n);
+/**
+ * global does not exist in Vite, use standard object globalThis
+ */
+if (typeof _globalThis.Kpc !== 'undefined') {
+  _globalThis.Kpc.localize(i18n);
 }

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.3.2
+ * @king-design v3.4.0-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -63,7 +63,7 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/view';
 export * from './components/wave';
-export declare const version = "3.3.2";
+export declare const version = "3.4.0-beta.0";
 
 
 export {normalize} from 'intact-react';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.3.2
+ * @king-design v3.4.0-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -64,7 +64,7 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/view';
 export * from './components/wave';
-export var version = '3.3.2';
+export var version = '3.4.0-beta.0';
 /* generate end */
 
 export {normalize} from 'intact-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/react",
-  "version": "3.3.2",
+  "version": "3.4.0-beta.0",
   "description": "King-Design UI components for React.",
   "keywords": [
     "component",
@@ -36,7 +36,7 @@
     "@emotion/css": "^11.5.0",
     "dayjs": "^1.10.7",
     "enquire.js": "^2.1.6",
-    "intact-react": "3.0.34",
+    "intact-react": "3.0.37",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",