@king-design/vue 2.0.15 → 2.0.17-beta.0

package/__tests__/__snapshots__/Vue Next Demos.md

@@ -964,7 +964,7 @@
 ####   `Select basic`
 
 ```
-"<div><div style=\"margin-bottom: 16px;\"><div class=\"k-select css-1k3uw7s k-dropdown-open\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-select-placeholder c-ellipsis\">请选择</div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-select-arrow ion-ios-arrow-down css-x0ey6t\"></i></span></span></div><!--portal--> You selected: </div><div class=\"k-select css-1k3uw7s\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-select-placeholder c-ellipsis\">请选择</div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-rotate ion-load-c css-x0ey6t\"></i></span></span></div><!--portal--></div>"
+"<div><div style=\"margin-bottom: 16px;\"><div class=\"k-select css-1k3uw7s\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-select-placeholder c-ellipsis\">请选择</div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-select-arrow ion-ios-arrow-down css-x0ey6t\"></i></span></span></div><!--portal--> You selected: </div><div class=\"k-select css-1k3uw7s\" tabindex=\"0\"><div class=\"k-select-main\"><input type=\"hidden\"><div class=\"k-select-placeholder c-ellipsis\">请选择</div></div><span class=\"k-select-suffix\"><span class=\"k-select-suffix-icon\"><i class=\"k-icon k-rotate ion-load-c css-x0ey6t\"></i></span></span></div><!--portal--></div>"
 ```
 
 ####   `Select clearable`

package/components/cascader/styles.js

@@ -43,7 +43,7 @@ setDefault(function () {
   }).cascader;
 });
 export function makeMenuStyles() {
-  return /*#__PURE__*/css("min-width:", cascader.width, "!important;min-height:", cascader.height, ";.k-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.k-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.k-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.k-cascader-option{&.k-selected{color:", cascader.selectedColor, ";}&.k-active{background:", cascader.activeBgColor, ";}}");
+  return /*#__PURE__*/css("min-width:", cascader.width, "!important;height:", cascader.height, ";overflow:auto;.k-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.k-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.k-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.k-cascader-option{&.k-selected{color:", cascader.selectedColor, ";}&.k-active{background:", cascader.activeBgColor, ";}}");
 }
 export function makeFilterMenuStyles() {
   return /*#__PURE__*/css("min-width:", _filterInstanceProperty(cascader).minWidth, "!important;height:auto;max-height:", _filterInstanceProperty(cascader).maxHeight, ";em{font-style:normal;color:", _filterInstanceProperty(cascader).highlightColor, ";}");

package/components/dropdown/dropdown.d.ts

@@ -41,7 +41,6 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
             value: boolean;
         };
     };
-    protected alwaysPortal: boolean;
     private timer;
     private triggerProps;
     init(): void;

package/components/dropdown/dropdown.js

@@ -57,7 +57,6 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     _this.rootDropdown = null;
     _this.showedDropdown = null;
     _this.positionHook = usePosition();
-    _this.alwaysPortal = false;
     _this.timer = undefined;
     _this.triggerProps = null;
     return _this;
@@ -267,11 +266,10 @@ Dropdown.template = function () {
   });
   clonedTrigger.className = className;
   this.menuVNode = menu;
-  return [clonedTrigger, // wrap the root dropdown menu to Portal to render into body
-  this.alwaysPortal || !this.rootDropdown ? h(Portal, {
+  return [clonedTrigger, h(Portal, {
     children: menu,
     container: this.get('container')
-  }) : menu];
+  })];
 };
 
 __decorate([bind], Dropdown.prototype, "position", null);
@@ -288,9 +286,10 @@ function useDocumentClickForDropdown(dropdown) {
   };
 
   var _useDocumentClick = useDocumentClick(elementRef, function (e) {
-    // case 1: if click an trigger and the trigger type is hover, ignore it
-    // case 2: if right click on trigger and the trigger type is contextmenu, ignore it
-    // case 3: if click on trigger and the trigger type is focus, do nothing 
+    // case 1: if click a trigger and its trigger type is hover, ignore it
+    // case 2: if right click on a trigger and its trigger type is contextmenu, ignore it
+    // case 3: if click on a trigger and its trigger type is focus, do nothing 
+    // case 3: if click on sub-dropdown, we should also show the parent dropdown, so ignore it
     var trigger = dropdown.get('trigger');
     if (trigger === 'focus') return;
     var isHover = trigger === 'hover';
@@ -305,6 +304,7 @@ function useDocumentClickForDropdown(dropdown) {
       }
     }
 
+    if (isSubDropdownElement(e.target, dropdown)) return;
     dropdown.hide(true);
   }, true),
       addDocumentClick = _useDocumentClick[0],
@@ -314,6 +314,18 @@ function useDocumentClickForDropdown(dropdown) {
   dropdown.on('hide', removeDocumentClick);
 }
 
+function isSubDropdownElement(elem, dropdown) {
+  var showedDropdown = dropdown.showedDropdown;
+  if (!showedDropdown) return false;
+  var subMenuElement = findDomFromVNode(showedDropdown.menuVNode, true);
+
+  if (containsOrEqual(subMenuElement, elem)) {
+    return true;
+  }
+
+  return isSubDropdownElement(elem, showedDropdown);
+}
+
 function useHideLastMenuOnShow(dropdown) {
   var parentDropdown = dropdown.dropdown;
   dropdown.on('show', function () {

package/components/dropdown/menu.js

@@ -85,7 +85,7 @@ function useKeyboardForDropdownMenu(dropdown) {
   var focus = function focus() {
     return focusByIndex(0);
   }; // In Cascader the menu may have been replaced by another menu, in this case,
-  // if the dropdown has showed on mount the menu, add keydown listener
+  // if the dropdown has showed while we mounted the menu, add keydown listener
 
 
   if (dropdown.get('value')) {

package/components/table/column.vdt.js

@@ -1,5 +1,5 @@
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
-import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, noop as _$no, className as _$cn, map as _$ma } from 'intact-vue-next';
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, noop as _$no, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, map as _$ma } from 'intact-vue-next';
 import { getClassAndStyleForFixed } from './useFixedColumns';
 import { Dropdown, DropdownMenu, DropdownItem } from '../dropdown';
 import { Button } from '../button';
@@ -14,13 +14,18 @@ import { context as TableContext } from './useColumns';
 import { context as ResizableContext } from './useResizable';
 import { context as FixedColumnsContext } from './useFixedColumns';
 import { stopPropagation } from '../utils';
+import { Input } from '../input';
+import { _$ } from '../../i18n';
 var _$tmp0 = {
   'className': 'ion-android-arrow-dropdown'
 };
 var _$tmp1 = {
-  'className': 'ion-android-arrow-dropup k-asc'
+  'className': 'ion-ios-search'
 };
 var _$tmp2 = {
+  'className': 'ion-android-arrow-dropup k-asc'
+};
+var _$tmp3 = {
   'className': 'ion-android-arrow-dropdown k-desc'
 };
 export default function ($props, $blocks, $__proto__) {
@@ -45,7 +50,9 @@ export default function ($props, $blocks, $__proto__) {
   var _this$group = this.group,
       onSelect = _this$group.onSelect,
       isChecked = _this$group.isChecked,
-      getGroupText = _this$group.getGroupText;
+      getGroupText = _this$group.getGroupText,
+      keywords = _this$group.keywords,
+      filteredGroup = _this$group.filteredGroup;
   return _$cc(TableContext.Consumer, {
     'children': function children(checkType) {
       return _$cc(GroupContext.Consumer, {
@@ -98,17 +105,46 @@ export default function ($props, $blocks, $__proto__) {
                           collision: 'flipfit'
                         },
                         'key': 'dropdown',
+                        'trigger': 'click',
+                        'ev-show': function evShow() {
+                          return keywords.set('');
+                        },
                         'children': [_$cc(Button, {
                           'icon': true,
                           'size': 'mini',
                           'className': 'k-table-group',
-                          'ev-click': stopPropagation,
+                          'ev-click': function evClick(e) {
+                            return e._ignoreSortable = true;
+                          },
                           'children': _$cc(Icon, _$tmp0)
                         }), _$cc(DropdownMenu, {
                           'className': _$cn((_$cn2 = {
                             "k-table-group-dropdown": true
                           }, _$cn2[makeGroupMenuStyles()] = true, _$cn2)),
-                          'children': _$ma(group, function ($value, $key) {
+                          'children': [_$ce(2, 'div', _$cc(Input, {
+                            'size': 'small',
+                            'fluid': true,
+                            'placeholder': _$('请输入关键字'),
+                            'value': keywords.value,
+                            'ev-$change:value': keywords.set,
+                            'clearable': true,
+                            '$blocks': function ($blocks) {
+                              var _$blocks = {},
+                                  __$blocks = _$ex({}, $blocks);
+
+                              return (_$blocks['suffix'] = function ($super) {
+                                return _$cc(Icon, _$tmp1);
+                              }, __$blocks['suffix'] = function ($super, data) {
+                                var block = $blocks['suffix'];
+
+                                var callBlock = function callBlock() {
+                                  return _$blocks['suffix'].call($this, $super, data);
+                                };
+
+                                return block ? block.call($this, callBlock, data) : callBlock();
+                              }), __$blocks;
+                            }.call($this, _$em)
+                          }), 2, 'k-table-group-header'), _$ce(2, 'div', _$ma(filteredGroup.value, function ($value, $key) {
                             return _$cc(DropdownItem, {
                               'ev-select': function evSelect() {
                                 return onSelect($value.value, groupValue, onChange);
@@ -122,9 +158,9 @@ export default function ($props, $blocks, $__proto__) {
                                 'children': $value.label
                               }) : _$ce(2, 'span', $value.label, 0)
                             });
-                          }, $this)
+                          }, $this), 4, 'k-table-group-body')]
                         })]
-                      }, 'dropdown') : undefined, sortable ? _$ce(2, 'div', [_$cc(Icon, _$tmp1), _$cc(Icon, _$tmp2)], 4, _$cn((_$cn3 = {
+                      }, 'dropdown') : undefined, sortable ? _$ce(2, 'div', [_$cc(Icon, _$tmp2), _$cc(Icon, _$tmp3)], 4, _$cn((_$cn3 = {
                         'k-column-sort': true
                       }, _$cn3["k-" + type] = type, _$cn3))) : undefined], 0, 'k-table-title')], 0, _$cn(classNameObj), {
                         'style': style,

package/components/table/index.spec.js

@@ -352,7 +352,7 @@ describe('Table', function () {
             _instance$refs4 = instance.refs, __test1 = _instance$refs4.__test1, __test2 = _instance$refs4.__test2;
             _element$querySelecto8 = element.querySelectorAll('.k-table'), table1 = _element$querySelecto8[0], table2 = _element$querySelecto8[1];
             icon = table1.querySelector('.k-table-group');
-            dispatchEvent(icon, 'mouseenter');
+            dispatchEvent(icon, 'click');
             _context7.next = 7;
             return wait();
 
@@ -370,7 +370,7 @@ describe('Table', function () {
             });
             expect(table1.innerHTML).to.matchSnapshot();
             icon2 = table2.querySelector('.k-table-group');
-            dispatchEvent(icon2, 'mouseenter');
+            dispatchEvent(icon2, 'click');
             _context7.next = 19;
             return wait();
 

package/components/table/styles.js

@@ -53,6 +53,12 @@ var defaults = {
 
     get activeColor() {
       return theme.color.primary;
+    },
+
+    headerPadding: "8px",
+
+    get headerBorder() {
+      return "1px solid " + theme.color.bg;
     }
 
   },
@@ -89,5 +95,5 @@ export function makeStyles() {
   }), ";");
 }
 export function makeGroupMenuStyles() {
-  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}");
+  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}.k-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}");
 }

package/components/table/useGroup.d.ts

@@ -1,3 +1,4 @@
+import type { TableColumnGroupItem } from './column';
 declare type ContextValue = {
     groupValue: any;
     onChange: (key: string, groupValue: any) => void;
@@ -10,5 +11,7 @@ export declare function useGroup(): {
     onSelect: (value: any, groupValue: any, onChange: ContextValue['onChange']) => void;
     isChecked: (value: any, groupValue: any) => any;
     getGroupText: (groupValue: any) => string | null;
+    keywords: import("../../hooks/useState").State<string>;
+    filteredGroup: import("../../hooks/useState").State<TableColumnGroupItem[] | undefined>;
 };
 export {};

package/components/table/useGroup.js

@@ -1,13 +1,17 @@
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
 import { useInstance } from 'intact-vue-next';
 import { isNullOrUndefined } from 'intact-shared';
 import { toggleArray } from '../utils';
 import { createContext } from '../context';
+import { useState, watchState } from '../../hooks/useState';
 export var context = createContext();
 export function useGroup() {
   var instance = useInstance();
+  var keywords = useState('');
+  var filteredGroup = useState(instance.get('group'));
 
   function onSelect(value, groupValue, onChange) {
     var _instance$get = instance.get(),
@@ -60,9 +64,28 @@ export function useGroup() {
     return null;
   }
 
+  watchState(keywords, function (v) {
+    var _instance$get4 = instance.get(),
+        _instance$get4$group = _instance$get4.group,
+        group = _instance$get4$group === void 0 ? [] : _instance$get4$group;
+
+    v = _trimInstanceProperty(v).call(v);
+
+    if (!v) {
+      filteredGroup.set(group);
+    } else {
+      filteredGroup.set(_filterInstanceProperty(group).call(group, function (item) {
+        var _context2, _context3;
+
+        return _includesInstanceProperty(_context2 = String(item.label)).call(_context2, v) || _includesInstanceProperty(_context3 = String(item.value)).call(_context3, v);
+      }));
+    }
+  });
   return {
     onSelect: onSelect,
     isChecked: isChecked,
-    getGroupText: getGroupText
+    getGroupText: getGroupText,
+    keywords: keywords,
+    filteredGroup: filteredGroup
   };
 }

package/components/table/useSortable.d.ts

@@ -3,5 +3,7 @@ export declare const context: {
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
 };
 export declare function useSortable(): {
-    onChange: (key: string) => void;
+    onChange: (key: string, event: Event & {
+        _ignoreSortable?: boolean;
+    }) => void;
 };

package/components/table/useSortable.js

@@ -8,7 +8,10 @@ export function useSortable() {
 
   var count = 0;
 
-  function onChange(key) {
+  function onChange(key, event) {
+    // ignore when click group dropdown menu
+    if (event._ignoreSortable) return;
+
     var sort = _extends({}, instance.get('sort'));
 
     if (sort.key === key) {

package/components/tooltip/tooltip.d.ts

@@ -23,6 +23,5 @@ export declare class Tooltip<T extends TooltipProps = TooltipProps, E extends To
     static typeDefs: Required<TypeDefs<TooltipProps>>;
     static defaults: () => Partial<TooltipProps>;
     static events: Events<TooltipEvents>;
-    protected alwaysPortal: boolean;
     hide(immediately: boolean): void;
 }

package/components/tooltip/tooltip.js

@@ -1,6 +1,5 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Dropdown } from '../dropdown/dropdown';
 import { _$ } from '../../i18n';
 import { themes } from './styles';
@@ -44,17 +43,7 @@ export var Tooltip = /*#__PURE__*/function (_Dropdown) {
   _inheritsLoose(Tooltip, _Dropdown);
 
   function Tooltip() {
-    var _context;
-
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _Dropdown.call.apply(_Dropdown, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
-    _this.alwaysPortal = true;
-    return _this;
+    return _Dropdown.apply(this, arguments) || this;
   }
 
   var _proto = Tooltip.prototype;

package/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.15
+ * @king-design v2.0.17-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -57,7 +57,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "2.0.15";
+export declare const version = "2.0.17-beta.0";
 
 
 export {normalize} from 'intact-vue-next';

package/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.15
+ * @king-design v2.0.17-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -59,7 +59,7 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '2.0.15';
+export var version = '2.0.17-beta.0';
 /* generate end */
 
 export {normalize} from 'intact-vue-next';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/vue",
-  "version": "2.0.15",
+  "version": "2.0.17-beta.0",
   "description": "King-Design UI components for Vue3.0.",
   "keywords": [
     "component",
@@ -38,7 +38,7 @@
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
-    "intact-vue-next": "^3.0.15",
+    "intact-vue-next": "^3.0.16",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",