@king-design/intact 2.0.17-beta.0 → 2.1.1

package/es/components/cascader/index.vdt.js

@@ -27,12 +27,14 @@ export default function ($props, $blocks, $__proto__) {
   var _this$get = this.get(),
       data = _this$get.data,
       trigger = _this$get.trigger,
-      filterable = _this$get.filterable;
+      filterable = _this$get.filterable,
+      fields = _this$get.fields;
 
   var baseMenuStyles = makeMenuStyles();
   var classNameObj = (_classNameObj = {
     'k-cascader-menu': true
   }, _classNameObj[baseMenuStyles] = true, _classNameObj);
+  var getField = this.fields;
 
   var _this$value = this.value,
       values = _valuesInstanceProperty(_this$value),
@@ -51,31 +53,31 @@ export default function ($props, $blocks, $__proto__) {
     }
 
     return _mapInstanceProperty(data).call(data, function (item, index) {
-      var value = item.value;
+      var value = getField(item, 'value');
       var showed = isShowed(value, level);
       var selected = parentSelected && isSelected(value, level);
-      var children = item.children;
+      var children = getField(item, 'children');
 
       var Item = function Item() {
         return _$cc(DropdownItem, {
-          'disabled': item.disabled,
+          'disabled': getField(item, 'disabled'),
           'className': _$cn({
             'k-cascader-option': true,
             'k-active': showed,
             'k-selected': selected
           }),
           'ev-select': onSelect.bind(null, value, level),
-          'children': [item.label, children ? _$cc(Icon, _$tmp1) : undefined]
+          'children': [getField(item, 'label'), children ? _$cc(Icon, _$tmp1) : undefined]
         });
       };
 
       return children ? _$cc(Dropdown, {
         'position': _this.positionObj,
         'of': 'parent',
-        'disabled': item.disabled,
+        'disabled': getField(item, 'disabled'),
         'trigger': trigger,
         'value': showed,
-        'ev-$changed:value': toggleShowedValue.bind(null, value, level),
+        'ev-$change:value': toggleShowedValue.bind(null, value, level),
         'ev-show': _this.load.bind(null, item),
         'children': [Item(), _$cc(DropdownMenu, {
           'className': _$cn(classNameObj),
@@ -116,7 +118,7 @@ export default function ($props, $blocks, $__proto__) {
               'children': function () {
                 // highlight keywords
                 var label = _mapInstanceProperty($value).call($value, function (item) {
-                  return item.label;
+                  return getField(item, 'label');
                 }).join(' / ');
 
                 var labels = label.split(keywords);

package/es/components/cascader/useFields.d.ts

@@ -0,0 +1,2 @@
+import type { CascaderData, BaseCascaderData } from './';
+export declare function useFields(): <Data extends BaseCascaderData = CascaderData<unknown>, Key extends keyof Data = keyof Data>(data: Data, key: Key) => Data[Key];

package/es/components/cascader/useFields.js

@@ -0,0 +1,18 @@
+import { useInstance } from 'intact';
+export function useFields() {
+  var instance = useInstance();
+  return function getField(data, key) {
+    var _instance$get = instance.get(),
+        fields = _instance$get.fields;
+
+    if (fields) {
+      var field = fields[key];
+
+      if (field) {
+        return data[field];
+      }
+    }
+
+    return data[key];
+  };
+}

package/es/components/cascader/useFilterable.d.ts

@@ -1,7 +1,8 @@
 import type { CascaderData } from './';
 import { State } from '../../hooks/useState';
 import type { Value } from './useValue';
-export declare function useFilterable(keywords: State<string>, setValue: (value: Value) => void): {
+import type { useFields } from './useFields';
+export declare function useFilterable(keywords: State<string>, setValue: (value: Value) => void, getField: ReturnType<typeof useFields>): {
     filter: () => CascaderData<any>[][];
     selectByFilter: (data: CascaderData<any>[]) => void;
     keywords: State<string>;

package/es/components/cascader/useFilterable.js

@@ -1,16 +1,25 @@
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { useInstance } from 'intact';
-export function useFilterable(keywords, setValue) {
+export function useFilterable(keywords, setValue, getField) {
   var instance = useInstance();
 
   function filter() {
+    var ret = [];
+
     var _instance$get = instance.get(),
         data = _instance$get.data,
         filter = _filterInstanceProperty(_instance$get);
 
-    var ret = [];
+    if (!filter) {
+      filter = function filter(keywords, data) {
+        var _context;
+
+        return _includesInstanceProperty(_context = getField(data, 'label')).call(_context, keywords);
+      };
+    }
 
     var loop = function loop(data, prefix, valid, disabled) {
       if (prefix === void 0) {
@@ -28,14 +37,16 @@ export function useFilterable(keywords, setValue) {
       data.forEach(function (item) {
         var _valid = valid || filter(keywords.value, item);
 
-        var _disabled = disabled || item.disabled;
+        var _disabled = disabled || getField(item, 'disabled');
 
         var _prefix = _sliceInstanceProperty(prefix).call(prefix, 0);
 
         _prefix.push(item);
 
-        if (item.children) {
-          loop(item.children, _prefix, _valid, _disabled);
+        var children = getField(item, 'children');
+
+        if (children) {
+          loop(children, _prefix, _valid, _disabled);
         } else if (_valid) {
           _prefix.disabled = _disabled;
           ret.push(_prefix);
@@ -49,7 +60,7 @@ export function useFilterable(keywords, setValue) {
 
   function selectByFilter(data) {
     var value = _mapInstanceProperty(data).call(data, function (item) {
-      return item.value;
+      return getField(item, 'value');
     });
 
     setValue(value);

package/es/components/cascader/useLabel.d.ts

@@ -1,3 +1,4 @@
-export declare function useLabel(): {
+import type { useFields } from './useFields';
+export declare function useLabel(getField: ReturnType<typeof useFields>): {
     getLabel: () => import("intact").Children;
 };

package/es/components/cascader/useLabel.js

@@ -1,6 +1,6 @@
 import { useInstance } from 'intact';
 import { useBaseLabel } from '../select/useBaseLabel';
-export function useLabel() {
+export function useLabel(getField) {
   var instance = useInstance();
 
   function findLabel(data, value) {
@@ -16,9 +16,9 @@ export function useLabel() {
       for (var i = 0; i < data.length; i++) {
         var item = data[i];
 
-        if (item.value === value[level]) {
-          labels.push(item.label);
-          var children = item.children;
+        if (getField(item, 'value') === value[level]) {
+          labels.push(getField(item, 'label'));
+          var children = getField(item, 'children');
 
           if (children) {
             loop(children, level + 1);

package/es/components/cascader/useLoad.d.ts

@@ -1,2 +1,3 @@
 import type { CascaderData } from './';
-export declare function useLoad(): (item: CascaderData<any>) => Promise<void>;
+import type { useFields } from './useFields';
+export declare function useLoad(getField: ReturnType<typeof useFields>): (item: CascaderData<any>) => Promise<void>;

package/es/components/cascader/useLoad.js

@@ -1,7 +1,7 @@
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import { useInstance } from 'intact';
-export function useLoad() {
+export function useLoad(getField) {
   var instance = useInstance();
 
   function loadData(_x) {
@@ -10,7 +10,7 @@ export function useLoad() {
 
   function _loadData() {
     _loadData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item) {
-      var _instance$get, loadData;
+      var _instance$get, loadData, children;
 
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -26,19 +26,21 @@ export function useLoad() {
               return _context.abrupt("return");
 
             case 3:
-              if (!(item.children && !item.children.length && !item.loaded)) {
-                _context.next = 8;
+              children = getField(item, 'children');
+
+              if (!(children && !children.length && !item.loaded)) {
+                _context.next = 9;
                 break;
               }
 
-              _context.next = 6;
+              _context.next = 7;
               return loadData(item);
 
-            case 6:
+            case 7:
               item.loaded = true;
               instance.forceUpdate();
 
-            case 8:
+            case 9:
             case "end":
               return _context.stop();
           }

package/es/components/colorpicker/index.d.ts

@@ -1,6 +1,7 @@
 import { Component, TypeDefs } from 'intact';
 import { Sizes } from '../../styles/utils';
 import { Container } from '../portal';
+import { DropdownProps } from '../dropdown';
 export interface ColorpickerProps {
     value: string;
     presets?: string[];
@@ -8,6 +9,7 @@ export interface ColorpickerProps {
     disabled?: boolean;
     container?: Container;
     show?: boolean;
+    position?: DropdownProps['position'];
 }
 export interface ColorpickerEvents {
 }

package/es/components/colorpicker/index.js

@@ -2,6 +2,7 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import { Component } from 'intact';
 import template from './index.vdt';
 import { sizes } from '../../styles/utils';
+import { Dropdown } from '../dropdown';
 var typeDefs = {
   value: {
     type: String,
@@ -11,13 +12,17 @@ var typeDefs = {
   size: sizes,
   disabled: Boolean,
   container: [Function, String],
-  show: Boolean
+  show: Boolean,
+  position: Dropdown.typeDefs.position
 };
 
 var defaults = function defaults() {
   return {
     presets: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'],
-    size: 'default'
+    size: 'default',
+    position: {
+      collision: 'fit'
+    }
   };
 };
 

package/es/components/colorpicker/index.vdt.js

@@ -19,7 +19,8 @@ export default function ($props, $blocks, $__proto__) {
       value = _this$get.value,
       size = _this$get.size,
       disabled = _this$get.disabled,
-      container = _this$get.container;
+      container = _this$get.container,
+      position = _this$get.position;
 
   var classNameObj = (_classNameObj = {
     'k-colorpicker': true
@@ -27,11 +28,7 @@ export default function ($props, $blocks, $__proto__) {
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), _$cc(Dropdown, {
-    'position': {
-      my: 'left top+8',
-      at: 'left bottom',
-      collision: 'flip'
-    },
+    'position': position,
     'trigger': 'click',
     'disabled': disabled,
     'container': container,

package/es/components/dialog/index.spec.js

@@ -243,7 +243,7 @@ describe('Dialog', function () {
             return wait(500);
 
           case 20:
-            expect(document.body.getAttribute('style')).to.be.null;
+            expect(!!document.body.getAttribute('style')).to.be.false;
 
           case 21:
           case "end":
@@ -347,7 +347,7 @@ describe('Dialog', function () {
             return wait(500);
 
           case 18:
-            expect(document.body.getAttribute('style')).to.be.null;
+            expect(!!document.body.getAttribute('style')).to.be.false;
 
           case 19:
           case "end":

package/es/components/dropdown/dropdown.d.ts

@@ -3,6 +3,7 @@ import { Options, Feedback } from '../position';
 import { Portal, PortalProps } from '../portal';
 import { FeedbackCallback } from './usePosition';
 import type { Events } from '../types';
+import { Virtual } from '../virtual';
 export declare type Position = Options;
 export declare type PositionShorthand = 'left' | 'bottom' | 'right' | 'top';
 export declare const DROPDOWN = "Dropdown";
@@ -12,6 +13,7 @@ export interface DropdownProps {
     disabled?: boolean;
     value?: boolean;
     position?: Position | 'left' | 'bottom' | 'right' | 'top';
+    collison?: Position['collision'];
     of?: 'self' | 'parent' | Event;
     container?: PortalProps['container'];
 }
@@ -21,6 +23,8 @@ export interface DropdownEvents {
     hide: [];
     mouseenter: [MouseEvent];
     mouseleave: [MouseEvent];
+    click: [MouseEvent];
+    contextmenu: [MouseEvent];
     positioned: [Feedback];
 }
 export interface DropdownBlocks {
@@ -30,7 +34,7 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
     static typeDefs: Required<TypeDefs<DropdownProps>>;
     static defaults: () => Partial<DropdownProps>;
     static events: Events<DropdownEvents>;
-    static template: (this: Dropdown) => (VNode<import("intact").VNodeTag> | VNode<typeof Portal>)[];
+    static template: (this: Dropdown) => (VNode<typeof Virtual> | VNode<typeof Portal>)[];
     menuVNode: VNode | null;
     dropdown: Dropdown | null;
     rootDropdown: Dropdown | null;
@@ -41,8 +45,7 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
             value: boolean;
         };
     };
-    private timer;
-    private triggerProps;
+    protected timer: number | undefined;
     init(): void;
     show(shouldFocus?: boolean): void;
     hide(immediately?: boolean): void;
@@ -52,6 +55,4 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
     private onContextMenu;
     private onLeave;
     private initEventCallbacks;
-    private callOriginalCallback;
-    private normalizeTriggerProps;
 }

package/es/components/dropdown/dropdown.js

@@ -3,14 +3,15 @@ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
 import { __decorate } from "tslib";
-import { Component, createVNode as h, directClone, provide, inject, findDomFromVNode, createVNode, nextTick } from 'intact';
-import { bind, isTextChildren } from '../utils';
-import { EMPTY_OBJ, isFunction, noop } from 'intact-shared';
+import { Component, createVNode as h, provide, inject, findDomFromVNode, nextTick } from 'intact';
+import { bind, getRestProps } from '../utils';
+import { noop } from 'intact-shared';
 import { cx } from '@emotion/css';
 import { useDocumentClick, containsOrEqual } from '../../hooks/useDocumentClick';
 import { Portal } from '../portal';
 import { useShowHideEvents } from '../../hooks/useShowHideEvents';
 import { usePosition } from './usePosition';
+import { Virtual } from '../virtual';
 export var DROPDOWN = 'Dropdown';
 export var ROOT_DROPDOWN = 'RootDropdown';
 var typeDefs = {
@@ -20,13 +21,13 @@ var typeDefs = {
   position: [Object, 'left', 'bottom', 'right', 'top'],
   // Event is undefined in NodeJs
   of: ['self', 'parent', typeof Event === 'undefined' ? undefined : Event],
-  container: [String, Function]
+  container: [String, Function],
+  collison: ['none', 'fit', 'flip', 'flipfit', Array]
 };
 
 var defaults = function defaults() {
   return {
     trigger: 'hover',
-    position: {},
     of: 'self'
   };
 };
@@ -37,6 +38,8 @@ var events = {
   hide: true,
   mouseenter: true,
   mouseleave: true,
+  click: true,
+  contextmenu: true,
   positioned: true
 };
 export var Dropdown = /*#__PURE__*/function (_Component) {
@@ -58,7 +61,6 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     _this.showedDropdown = null;
     _this.positionHook = usePosition();
     _this.timer = undefined;
-    _this.triggerProps = null;
     return _this;
   }
 
@@ -96,7 +98,13 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
 
     if (this.get('disabled')) return;
     clearTimeout(this.timer);
-    this.set('value', true);
+    this.set('value', true); // should show parent dropdown
+
+    var parentDropdown = this.dropdown;
+
+    if (parentDropdown) {
+      parentDropdown.show();
+    }
 
     if (shouldFocus) {
       nextTick(function () {
@@ -114,10 +122,16 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
 
     if (this.get('disabled')) return;
     if (!this.get('value')) return;
+    var showedDropdown = this.showedDropdown;
+
+    if (showedDropdown) {
+      showedDropdown.hide(immediately);
+    }
 
     if (immediately) {
       this.set('value', false);
     } else {
+      clearTimeout(this.timer);
       this.timer = window.setTimeout(function () {
         _this4.set('value', false);
       }, 200);
@@ -137,23 +151,24 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
   };
 
   _proto.onEnter = function onEnter(e) {
-    this.callOriginalCallback(e.type === 'click' ? 'ev-click' : 'ev-mouseenter', e);
     this.show();
+    this.trigger(e.type, e);
   };
 
   _proto.onContextMenu = function onContextMenu(e) {
-    this.callOriginalCallback('ev-contextmenu', e);
     e.preventDefault();
     this.set('of', e);
     this.show();
+    this.trigger('contextmenu', e);
   };
 
   _proto.onLeave = function onLeave(e) {
-    this.callOriginalCallback('ev-mouseleave', e);
     this.hide();
+    this.trigger(e.type, e);
   };
 
-  _proto.initEventCallbacks = function initEventCallbacks(trigger) {
+  _proto.initEventCallbacks = function initEventCallbacks() {
+    var trigger = this.get('trigger');
     var props = {};
 
     switch (trigger) {
@@ -180,51 +195,6 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     return props;
   };
 
-  _proto.callOriginalCallback = function callOriginalCallback(name, e) {
-    var callback = this.triggerProps[name];
-    var callbackOnDropdown = this.get(name);
-    if (isFunction(callback)) callback(e);
-    if (isFunction(callbackOnDropdown)) callbackOnDropdown(e);
-  };
-
-  _proto.normalizeTriggerProps = function normalizeTriggerProps(props) {
-    // if use kpc in react or vue, normalize props by Wrapper.props.vnode;
-    var vnode = props.vnode;
-    if (!vnode) return props; // maybe we render the intact component in react slot property, in this case
-    // the $isReact is false. so use the vnode $$typeof field as gauge
-
-    if (vnode.$$typeof || this.$isVueNext) {
-      var _props = vnode.props;
-      if (!_props) return props;
-      return {
-        vnode: vnode,
-        'ev-click': _props.onClick,
-        'ev-mouseenter': _props.onMouseEnter,
-        'ev-mouseleave': _props.onMouseLeave,
-        'ev-contextmenu': _props.onContextMenu,
-        className: _props.className || _props.class
-        /* vue-next */
-
-      };
-    } else if (this.$isVue) {
-      var data = vnode.data;
-      var on = data && data.on || EMPTY_OBJ;
-      var ret = {
-        vnode: vnode
-      };
-      ['click', 'mouseenter', 'mouseleave', 'contextmenu'].forEach(function (event) {
-        var method = on[event];
-
-        if (method) {
-          ret["ev-" + event] = method;
-        }
-      });
-      return ret;
-    }
-
-    return props;
-  };
-
   return Dropdown;
 }(Component);
 Dropdown.$doubleVNodes = true;
@@ -254,21 +224,22 @@ Dropdown.template = function () {
   var _children = children,
       trigger = _children[0],
       menu = _children[1];
-  var triggerType = this.get('trigger');
-  var props = this.initEventCallbacks(triggerType);
-  var clonedTrigger = isTextChildren(trigger) ? createVNode('span', null, trigger) : directClone(trigger);
-  var triggerProps = this.triggerProps = this.normalizeTriggerProps(trigger.props || EMPTY_OBJ); // add a className for opening status
-
-  var className = trigger.className || triggerProps.className;
-  className = cx((_cx = {}, _cx[className] = className, _cx['k-dropdown-open'] = this.get('value'), _cx));
-  clonedTrigger.props = _extends({}, triggerProps, props, {
-    className: className
-  });
-  clonedTrigger.className = className;
+  var props = this.initEventCallbacks();
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      value = _this$get.value,
+      container = _this$get.container;
+
+  className = cx((_cx = {
+    'k-dropdown-open': value
+  }, _cx[className] = !!className, _cx));
   this.menuVNode = menu;
-  return [clonedTrigger, h(Portal, {
+  return [h(Virtual, _extends({}, props, getRestProps(this), {
+    className: className
+  }), trigger), h(Portal, {
     children: menu,
-    container: this.get('container')
+    container: container
   })];
 };