@king-design/vue 3.1.4-beta.2 → 3.1.4

package/components/tree/index.vdt.js

@@ -10,39 +10,34 @@ import { Icon } from '../icon';
 import { Mode } from './useDraggable';
 export default function ($props, $blocks, $__proto__) {
   var _this = this,
-      _classNameObj2;
-
+    _classNameObj2;
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
   var _$blocks = {};
   var __$blocks = {};
-
   var _this$get = this.get(),
-      className = _this$get.className,
-      checkbox = _this$get.checkbox,
-      showLine = _this$get.showLine,
-      selectable = _this$get.selectable,
-      draggable = _this$get.draggable;
-
+    className = _this$get.className,
+    checkbox = _this$get.checkbox,
+    showLine = _this$get.showLine,
+    selectable = _this$get.selectable,
+    draggable = _this$get.draggable;
   var expandedKeys = this.expanded.get();
   var toggleExpanded = this.expanded.toggle;
   var toggleChecked = this.checked.toggle;
   var selectedKeys = this.selected.get();
   var toggleSelected = this.selected.toggle;
   var _this$draggable = this.draggable,
-      onDragStart = _this$draggable.onDragStart,
-      onDragOver = _this$draggable.onDragOver,
-      onDragEnd = _this$draggable.onDragEnd,
-      draggingKey = _this$draggable.draggingKey,
-      overKey = _this$draggable.overKey,
-      mode = _this$draggable.mode;
+    onDragStart = _this$draggable.onDragStart,
+    onDragOver = _this$draggable.onDragOver,
+    onDragEnd = _this$draggable.onDragEnd,
+    draggingKey = _this$draggable.draggingKey,
+    overKey = _this$draggable.overKey,
+    mode = _this$draggable.mode;
   var k = this.config.k;
-
   var treeNodes = function treeNodes(nodes) {
     return _mapInstanceProperty(nodes).call(nodes, function (node, index) {
       var _classNameObj, _labelClassNameObj;
-
       if (!_filterInstanceProperty(node)) return;
       var key = node.key;
       var expanded = expandedKeys.has(key);
@@ -51,23 +46,19 @@ export default function ($props, $blocks, $__proto__) {
       var selected = selectable && selectedKeys.has(key);
       var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tree-node"] = true, _classNameObj[k + "-expanded"] = expanded, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-selected"] = selected, _classNameObj[k + "-dragging"] = key === draggingKey.value, _classNameObj);
       var labelClassNameObj = (_labelClassNameObj = {}, _labelClassNameObj[k + "-tree-label"] = true, _labelClassNameObj[k + "-tree-leaf"] = !node.children, _labelClassNameObj);
-
       if (key === overKey.value) {
         switch (mode.value) {
           case Mode.Before:
             labelClassNameObj[[k + "-before"]] = true;
             break;
-
           case Mode.After:
             labelClassNameObj[[k + "-after"]] = true;
             break;
-
           case Mode.Inner:
             labelClassNameObj[[k + "-inner"]] = true;
             break;
         }
       }
-
       return _$ce(2, 'div', [_$ce(2, 'div', [node.children && node.loaded !== false ? _$cc(Icon, {
         'className': _$cn(k + "-tree-icon ion-android-arrow-dropdown"),
         'hoverable': true,
@@ -91,11 +82,9 @@ export default function ($props, $blocks, $__proto__) {
         return data.label;
       }, __$blocks['label'] = function ($super, data) {
         var block = $blocks['label'];
-
         var callBlock = function callBlock() {
           return _$blocks['label'].call($this, $super, data);
         };
-
         return block ? block.call($this, callBlock, data) : callBlock();
       }, __$blocks['label'](_$no, [data, node, index])), 0, _$cn(k + "-tree-text c-ellipsis"), {
         'ev-click': linkEvent(node, _this.onClick)
@@ -111,7 +100,6 @@ export default function ($props, $blocks, $__proto__) {
       }, key);
     });
   };
-
   var classNameObj = (_classNameObj2 = {}, _classNameObj2[k + "-tree"] = true, _classNameObj2[k + "-line"] = showLine, _classNameObj2[k + "-selectable"] = selectable, _classNameObj2[className] = className, _classNameObj2[makeStyles(k)] = true, _classNameObj2);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)

package/components/tree/styles.js

@@ -7,68 +7,54 @@ var defaults = {
   get transition() {
     return theme.transition.middle;
   },
-
   fontSize: '12px',
   lineHeight: '24px',
-
   get hoverColor() {
     return theme.color.primary;
   },
-
   get disabledColor() {
     return theme.color.disabled;
   },
-
   textPadding: "0 3px",
   marginLeft: '10px',
   paddingLeft: '6px',
   iconWidth: '21px',
-
   get iconColor() {
     return theme.color.placeholder;
   },
-
   checkboxGap: "8px",
-
   get leafIndent() {
     return tree.iconWidth;
   },
-
   get borderRadius() {
     return theme.borderRadius;
   },
-
   // selected
   selected: {
     get bgColor() {
       return palette(theme.color.primary, -4);
     }
-
   },
   // draggable
   dragging: {
     get border() {
       return "1px solid " + theme.color.primary;
     },
-
     get bgColor() {
       return theme.color.bg;
-    } // get bgColor() { return palette(theme.color.warning, -4) },
-
-
+    }
+    // get bgColor() { return palette(theme.color.warning, -4) },
   },
-
   get line() {
     return "1px dashed " + theme.color.border;
   }
-
 };
 var tree;
 setDefault(function () {
   tree = deepDefaults(theme, {
     tree: defaults
   }).tree;
-  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makeStyles == null || makeStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("font-size:", tree.fontSize, ";line-height:", tree.lineHeight, ";position:relative;.", k, "-tree-label{position:relative;display:flex;align-items:center;&.", k, "-before,&.", k, "-after{&:before{position:absolute;content:'';display:block;border-top:", tree.dragging.border, ";width:100%;left:0;}}&.", k, "-before:before{top:0;}&.", k, "-after:before{bottom:0;}&.", k, "-inner{background:", tree.selected.bgColor, ";}}.", k, "-tree-icon,.", k, "-tree-text{cursor:pointer;}.", k, "-tree-text{padding:", tree.textPadding, ";border-radius:", tree.borderRadius, ";flex:1;display:flex;align-items:center;}.", k, "-tree-leaf{padding-left:", tree.leafIndent, ";}.", k, "-tree-icon{width:", tree.iconWidth, ";text-align:center;color:", tree.iconColor, ";&:before{transform:rotate(-90deg);transition:transform ", tree.transition, ";}}.", k, "-tree-checkbox{margin-right:", tree.checkboxGap, ";}&.", k, "-selectable{.", k, "-tree-node{&.", k, "-selected{>.", k, "-tree-label .", k, "-tree-text{background:", tree.selected.bgColor, "!important;}}}}.", k, "-tree-node{background:#fff;&:not(.", k, "-disabled){>.", k, "-tree-label .", k, "-tree-text:hover{background:", theme.color.bg, ";}}&.", k, "-expanded{>.", k, "-tree-label .", k, "-tree-icon:before{transform:rotate(0);}}&.", k, "-disabled{>.", k, "-tree-label{color:", tree.disabledColor, ";.", k, "-tree-text{cursor:not-allowed;}}}&.", k, "-dragging{background:", tree.dragging.bgColor, ";.", k, "-tree-node{background:", tree.dragging.bgColor, ";}}}.", k, "-tree{margin-left:", tree.marginLeft, ";padding-left:", tree.paddingLeft, ";}&.", k, "-line .", k, "-tree{border-left:", tree.line, ";}");

package/components/tree/useChecked.js

@@ -9,54 +9,45 @@ export function useChecked(getNodes) {
     checkedKeys = new _Set(v);
   });
   useReceive(['data', 'checkedKeys'], refresh);
-
   function refresh() {
     var nodes = getNodes();
     var uncorrelated = instance.get('uncorrelated');
     var needRecheckNodes = new _Set();
-
     var loop = function loop(nodes) {
       nodes.forEach(function (node) {
         var key = node.key,
-            parent = node.parent;
+          parent = node.parent;
         var checked = checkedKeys.has(key);
         var shouldUpdateCheckedKeys = false;
-
         if (parent && !uncorrelated) {
           if (checked && !parent.checked) {
             // need look back
             needRecheckNodes.add(parent);
           } else if (!node.data.disabled) {
             if (checked !== parent.checked) {
-              checked = parent.checked; // if we use the parent checked status, we should update checkedKeys
-
+              checked = parent.checked;
+              // if we use the parent checked status, we should update checkedKeys
               shouldUpdateCheckedKeys = true;
             }
           }
         }
-
         node.checked = checked;
-
         if (checked) {
           node.indeterminate = false;
         }
-
         if (shouldUpdateCheckedKeys) {
           updateCheckedKeys(node);
         }
-
         if (node.children) {
           loop(node.children);
         }
       });
     };
-
     loop(nodes);
     needRecheckNodes.forEach(function (node) {
       updateUpward(node);
     });
   }
-
   function updateCheckedKeys(node) {
     if (node.checked) {
       checkedKeys.add(node.key);
@@ -64,21 +55,18 @@ export function useChecked(getNodes) {
       checkedKeys.delete(node.key);
     }
   }
-
   function toggle(node) {
     var uncorrelated = instance.get('uncorrelated');
     updateDownward(node, !node.checked);
     updateUpward(node.parent);
     instance.set('checkedKeys', _Array$from(checkedKeys));
   }
-
   function updateDownward(node, checked) {
     node.checked = checked;
     node.indeterminate = false;
     updateCheckedKeys(node);
     if (instance.get('uncorrelated')) return;
     var children = node.children;
-
     if (children) {
       for (var i = 0; i < children.length; i++) {
         var child = children[i];
@@ -87,58 +75,46 @@ export function useChecked(getNodes) {
       }
     }
   }
-
   function updateUpward(node) {
     if (instance.get('uncorrelated') || !node) return;
     var checkedCount = 0;
     var count = 0;
     var indeterminate;
     var children = node.children;
-
     for (var i = 0; i < children.length; i++) {
       var child = children[i];
       if (child.data.disabled) continue;
-
       if (child.checked) {
         checkedCount++;
       } else if (child.indeterminate) {
         indeterminate = true;
       }
-
       count++;
     }
-
     if (!indeterminate) {
       indeterminate = !!(checkedCount && checkedCount < count);
     }
-
     node.checked = !!(checkedCount && checkedCount === count);
     node.indeterminate = indeterminate;
     updateCheckedKeys(node);
     updateUpward(node.parent);
   }
-
   function getCheckedData(leafOnly) {
     var data = [];
-
     var loop = function loop(nodes) {
       for (var i = 0; i < nodes.length; i++) {
         var node = nodes[i];
-
         if (node.checked && (!leafOnly || !node.children)) {
           data.push(node.data);
         }
-
         if (node.children) {
           loop(node.children);
         }
       }
     };
-
     loop(getNodes());
     return data;
   }
-
   return {
     toggle: toggle,
     getCheckedData: getCheckedData

package/components/tree/useDraggable.js

@@ -4,13 +4,11 @@ import { useInstance } from 'intact-vue-next';
 import { containsOrEqual } from '../../hooks/useDocumentClick';
 import { useState } from '../../hooks/useState';
 export var Mode;
-
 (function (Mode) {
   Mode[Mode["Before"] = 0] = "Before";
   Mode[Mode["After"] = 1] = "After";
   Mode[Mode["Inner"] = 2] = "Inner";
 })(Mode || (Mode = {}));
-
 export var RANGE = 0.25;
 export function useDraggable() {
   var instance = useInstance();
@@ -23,74 +21,61 @@ export function useDraggable() {
   var clientX = null;
   var clientY = null;
   var valid = false;
-
   function onDragStart(node, e) {
     e.stopPropagation();
-
     var _instance$get = instance.get(),
-        allowDrag = _instance$get.allowDrag;
-
+      allowDrag = _instance$get.allowDrag;
     if (node.data.disabled || allowDrag && !allowDrag(node)) {
       instance.trigger('denydrag', node);
       e.preventDefault();
       return;
     }
-
     draggingDom = e.target;
     draggingNode = node;
     draggingKey.set(node.key);
   }
-
   function onDragOver(node, e) {
     e.stopPropagation();
     e.preventDefault();
     var overDom = e.target;
-    if (containsOrEqual(draggingDom, overDom)) return; // ignore the over event, it the mouse does not move
-
+    if (containsOrEqual(draggingDom, overDom)) return;
+    // ignore the over event, it the mouse does not move
     var newClientX = e.clientX,
-        newClientY = e.clientY;
+      newClientY = e.clientY;
     if (clientX === newClientX && clientY === newClientY) return;
     clientX = newClientX;
     clientY = newClientY;
     var newMode = calcInserMode(e, overDom);
-
     if (node !== overNode || newMode !== mode.value) {
       overNode = node;
       mode.set(newMode);
-      overKey.set(node.key); // if the node does not allow drop, prevent the dragging node from inserting to it
+      overKey.set(node.key);
+      // if the node does not allow drop, prevent the dragging node from inserting to it
       // if (mode.value === Mode.Inner) {
-
       var _instance$get2 = instance.get(),
-          allowDrop = _instance$get2.allowDrop;
-
+        allowDrop = _instance$get2.allowDrop;
       if (node.data.disabled || allowDrop && !allowDrop(node, draggingNode, newMode)) {
         instance.trigger('denydrop', node, draggingNode, newMode);
         valid = false;
         return;
-      } // }
-
-
+      }
+      // }
       valid = true;
     }
   }
-
   function calcInserMode(e, dom) {
     var clientY = e.clientY;
-
     var _dom$getBoundingClien = dom.getBoundingClientRect(),
-        top = _dom$getBoundingClien.top,
-        bottom = _dom$getBoundingClien.bottom,
-        height = _dom$getBoundingClien.height;
-
+      top = _dom$getBoundingClien.top,
+      bottom = _dom$getBoundingClien.bottom,
+      height = _dom$getBoundingClien.height;
     var des = height * RANGE;
     if (clientY <= top + des) return Mode.Before;else if (clientY >= bottom - des) return Mode.After;
     return Mode.Inner;
   }
-
   function onDragEnd(e) {
     e.stopPropagation();
     e.preventDefault();
-
     if (valid) {
       handleData();
       instance.trigger('dragend', {
@@ -99,7 +84,6 @@ export function useDraggable() {
         mode: mode.value
       });
     }
-
     draggingKey.set(null);
     mode.set(null);
     draggingDom = null;
@@ -109,34 +93,26 @@ export function useDraggable() {
     clientY = null;
     valid = false;
   }
-
   function handleData() {
     var _context;
-
     var _instance$get3 = instance.get(),
-        data = _instance$get3.data; // remove node firstly
-
-
+      data = _instance$get3.data;
+    // remove node firstly
     remove(draggingNode, data);
-
     switch (mode.value) {
       case Mode.Before:
         insert(overNode, draggingNode, data, 0);
         break;
-
       case Mode.After:
         insert(overNode, draggingNode, data, 1);
         break;
-
       case Mode.Inner:
         append(overNode, draggingNode);
         instance.expand(overNode.key);
         break;
     }
-
     instance.set('data', _concatInstanceProperty(_context = []).call(_context, data));
   }
-
   return {
     onDragStart: onDragStart,
     onDragOver: onDragOver,
@@ -146,26 +122,20 @@ export function useDraggable() {
     mode: mode
   };
 }
-
 function remove(node, data) {
   var siblings = getNodeSiblings(node, data);
   var index = siblings.indexOf(node.data);
-
   _spliceInstanceProperty(siblings).call(siblings, index, 1);
 }
-
 function insert(node, newNode, data, offset) {
   var siblings = getNodeSiblings(node, data);
   var index = siblings.indexOf(node.data);
-
   _spliceInstanceProperty(siblings).call(siblings, index + offset, 0, newNode.data);
 }
-
 function append(node, newNode) {
   var children = node.data.children || (node.data.children = []);
   children.push(newNode.data);
 }
-
 function getNodeSiblings(node, data) {
   var parent = node.parent;
   return parent ? parent.data.children : data;

package/components/tree/useExpanded.js

@@ -15,9 +15,8 @@ export function useExpanded(getNodes) {
      * if the data is undefined, we expand all keys after we received data
      */
     var _instance$get = instance.get(),
-        defaultExpandAll = _instance$get.defaultExpandAll,
-        data = _instance$get.data;
-
+      defaultExpandAll = _instance$get.defaultExpandAll,
+      data = _instance$get.data;
     if (defaultExpandAll) {
       if (data && data.length) {
         expandAll();
@@ -29,77 +28,60 @@ export function useExpanded(getNodes) {
       }
     }
   });
-
   function toggle(_x) {
     return _toggle.apply(this, arguments);
   }
-
   function _toggle() {
     _toggle = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(node) {
       var _instance$get3, load, key, expanded;
-
       return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _instance$get3 = instance.get(), load = _instance$get3.load;
-              key = node.key;
-              expanded = expandedKeys.has(key);
-
-              if (!(load && !expanded && !node.loaded)) {
-                _context.next = 9;
-                break;
-              }
-
-              node.loaded = false;
-              instance.forceUpdate();
-              _context.next = 8;
-              return load(node);
-
-            case 8:
-              node.loaded = true;
-
-            case 9:
-              if (expanded) {
-                expandedKeys.delete(node.key);
-              } else {
-                expandedKeys.add(node.key);
-              }
-
-              instance.set('expandedKeys', _Array$from(expandedKeys));
-
-            case 11:
-            case "end":
-              return _context.stop();
-          }
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _instance$get3 = instance.get(), load = _instance$get3.load;
+            key = node.key;
+            expanded = expandedKeys.has(key);
+            if (!(load && !expanded && !node.loaded)) {
+              _context.next = 9;
+              break;
+            }
+            node.loaded = false;
+            instance.forceUpdate();
+            _context.next = 8;
+            return load(node);
+          case 8:
+            node.loaded = true;
+          case 9:
+            if (expanded) {
+              expandedKeys.delete(node.key);
+            } else {
+              expandedKeys.add(node.key);
+            }
+            instance.set('expandedKeys', _Array$from(expandedKeys));
+          case 11:
+          case "end":
+            return _context.stop();
         }
       }, _callee);
     }));
     return _toggle.apply(this, arguments);
   }
-
   function expandAll() {
     var _instance$get2 = instance.get(),
-        load = _instance$get2.load;
-
+      load = _instance$get2.load;
     var loop = function loop(nodes) {
       for (var i = 0; i < nodes.length; i++) {
         var node = nodes[i];
-
         if (!load || node.loaded) {
           expandedKeys.add(node.key);
         }
-
         if (node.children) {
           loop(node.children);
         }
       }
     };
-
     loop(getNodes());
     instance.set('expandedKeys', _Array$from(expandedKeys));
   }
-
   return {
     get: function get() {
       return expandedKeys;

package/components/tree/useFilter.js

@@ -8,18 +8,14 @@ export function useFilter(getNodes, getExpandedKeys) {
     var lastProps = lastVNode.props || EMPTY_OBJ;
     var nextProps = nextVNode.props || EMPTY_OBJ;
     if (lastProps === nextProps || isNullOrUndefined(_filterInstanceProperty(lastProps)) && isNullOrUndefined(_filterInstanceProperty(nextProps))) return;
-
     if (_filterInstanceProperty(lastProps) === _filterInstanceProperty(nextProps)) {
       refresh();
     }
   });
-
   function refresh() {
     var nodes = getNodes();
-
     var _instance$get = instance.get(),
-        filter = _filterInstanceProperty(_instance$get);
-
+      filter = _filterInstanceProperty(_instance$get);
     var loop = function loop(nodes) {
       nodes.forEach(function (node) {
         if (filter) {
@@ -32,19 +28,16 @@ export function useFilter(getNodes, getExpandedKeys) {
         } else {
           node.filter = true;
         }
-
         if (node.children) {
           loop(node.children);
         }
       });
     };
-
     loop(getNodes());
   }
-
   function updateFilterUpward(node) {
-    if (!node || _filterInstanceProperty(node)) return; // should expand the node 
-
+    if (!node || _filterInstanceProperty(node)) return;
+    // should expand the node 
     getExpandedKeys().add(node.key);
     node.filter = true;
     updateFilterUpward(node.parent);

package/components/tree/useNodes.d.ts

@@ -1,6 +1,6 @@
-import { Children, Key } from 'intact-vue-next';
-export declare type DataItem<K extends Key> = {
-    label?: Children;
+import { Key } from 'intact-vue-next';
+export type DataItem<K extends Key> = {
+    label?: any;
     key?: K;
     disabled?: boolean;
     loaded?: boolean;

package/components/tree/useNodes.js

@@ -28,19 +28,15 @@ export var Node = function Node(data, parent, key) {
   this.key = key;
   this.loaded = isNullOrUndefined(data.loaded) && data.children && data.children.length ? true : data.loaded;
 };
-
 function createNode(data, parent, prefix, reference) {
   var key = isNullOrUndefined(data.key) ? "" + prefix + reference.index++ : data.key;
   var node = new Node(data, parent, key);
-
   if (data.children) {
     var subPrefix = isNullOrUndefined(data.key) ? key + "." : "" + prefix + reference.index + ".";
     node.children = createNodes(data.children, node, subPrefix);
   }
-
   return node;
 }
-
 function createNodes(data, parent, prefix) {
   if (isNullOrUndefined(data)) return [];
   var reference = {