@king-design/intact 2.1.1 → 3.0.0-beta.1

package/es/components/tag/tags.vdt.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc, createTextVNode as _$ct, extend as _$ex, EMPTY_OBJ as _$em, createElementVNode as _$ce } from 'intact';
+import { TransitionGroup } from 'intact';
+import { getRestProps } from '../utils';
+import { makeTagsStyles } from './styles';
+import { Tag } from './';
+import { Tooltip } from '../tooltip';
+import { Tags } from './tags';
+import { Virtual } from '../virtual';
+export default function ($props, $blocks, $__proto__) {
+  var _classNameObj;
+
+  $blocks || ($blocks = {});
+  $props || ($props = {});
+  var $this = this;
+
+  var _this$get = this.get(),
+      className = _this$get.className,
+      nowrap = _this$get.nowrap,
+      size = _this$get.size,
+      border = _this$get.border,
+      draggable = _this$get.draggable;
+
+  var classNameObj = (_classNameObj = {
+    'k-tags': true,
+    'k-nowrap': nowrap,
+    'k-draggable': draggable
+  }, _classNameObj[makeTagsStyles()] = true, _classNameObj[className] = className, _classNameObj);
+  var _this$nowrap = this.nowrap,
+      containerRef = _this$nowrap.containerRef,
+      children = _this$nowrap.children,
+      hiddenChildren = _this$nowrap.hiddenChildren;
+  var vNodes = children.value;
+  /**
+  * We should always render Tooltip in nowrap mode, otherwise it will be removed while we close one tag.
+  * Because we will render all tags to calculate the width
+  */
+
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
+    'ref': containerRef
+  }), [!nowrap ? _$cc(TransitionGroup, {
+    'name': 'k-fade',
+    'children': vNodes
+  }) : vNodes, nowrap ? _$cc(Tooltip, {
+    'key': '$tooltip',
+    'hoverable': true,
+    'theme': 'light',
+    'className': 'k-tags-tooltip',
+    'children': _$cc(Tag, {
+      'key': '$more',
+      'className': _$cn({
+        "k-tags-more": true,
+        'c-hidden': !hiddenChildren.value.length
+      }),
+      'size': size,
+      'border': border,
+      'children': [_$ct('\n            +'), hiddenChildren.value.length]
+    }, '$more'),
+    '$blocks': function ($blocks) {
+      var _$blocks = {},
+          __$blocks = _$ex({}, $blocks);
+
+      return (_$blocks['content'] = function ($super) {
+        return _$ce(2, 'div', hiddenChildren.value, 0, _$cn(classNameObj));
+      }, __$blocks['content'] = function ($super, data) {
+        var block = $blocks['content'];
+
+        var callBlock = function callBlock() {
+          return _$blocks['content'].call($this, $super, data);
+        };
+
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }), __$blocks;
+    }.call($this, _$em)
+  }, '$tooltip') : undefined]);
+}
+;

package/es/components/tag/useChildren.d.ts

@@ -0,0 +1,2 @@
+import { VNode } from 'intact';
+export declare function useChildren(): import("../../hooks/useState").State<VNode<import("intact").VNodeTag>[]>;

package/es/components/tag/useChildren.js

@@ -0,0 +1,39 @@
+import { useInstance } from 'intact';
+import { eachChildren, findChildren, isComponentVNode } from '../utils';
+import { isStringOrNumber } from 'intact-shared';
+import { useState } from '../../hooks/useState';
+import { Tag } from './';
+import { Dropdown } from '../dropdown';
+import { Tooltip } from '../tooltip';
+export function useChildren() {
+  var instance = useInstance();
+  var children = useState([]);
+  instance.watch('children', function (v) {
+    var vNodes = [];
+    eachChildren(v, function (vNode) {
+      if (isTagOrContainsTag(vNode)) {
+        vNodes.push(vNode);
+      }
+    });
+    children.set(vNodes);
+  });
+  return children;
+}
+
+function isTagOrContainsTag(vNode) {
+  if (isStringOrNumber(vNode)) return false;
+
+  if (isComponentVNode(vNode, Tag)) {
+    return true;
+  }
+
+  if (isComponentVNode(vNode, Dropdown) || isComponentVNode(vNode, Tooltip)) {
+    var _vNode$props;
+
+    return !!findChildren((_vNode$props = vNode.props) == null ? void 0 : _vNode$props.children, function (vNode) {
+      return isTagOrContainsTag(vNode);
+    });
+  }
+
+  return false;
+}

package/es/components/tag/useDraggable.d.ts

@@ -0,0 +1,3 @@
+import { VNode } from 'intact';
+import { State } from '../../hooks/useState';
+export declare function useDraggable(originVNodes: State<VNode[]>): State<VNode<import("intact").VNodeTag>[]>;

package/es/components/tag/useDraggable.js

@@ -0,0 +1,89 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import { useInstance, findDomFromVNode, createVNode as h } from 'intact';
+import { nextFrame, swap } from '../utils';
+import { useState, watchState } from '../../hooks/useState';
+import { Virtual } from '../virtual';
+import { cx } from '@emotion/css';
+export function useDraggable(originVNodes) {
+  var instance = useInstance();
+  var children = useState([]);
+  var draggingKey = useState(null);
+  var draggingIndex = -1;
+  var originIndex = -1;
+  var lastOverIndex = -1;
+  /* let the dragover event only trigger once when tags changed order */
+
+  watchState(originVNodes, render);
+  watchState(draggingKey, render);
+
+  function render() {
+    var _context;
+
+    var _instance$get = instance.get(),
+        draggable = _instance$get.draggable;
+
+    children.set(!draggable ? originVNodes.value : _mapInstanceProperty(_context = originVNodes.value).call(_context, function (vNode, index) {
+      var key = vNode.key;
+      return h(Virtual, {
+        'ev-dragstart': function evDragstart() {
+          return onStart(key, index);
+        },
+        'ev-dragover': function evDragover(e) {
+          return onOver(e, key, index);
+        },
+        'ev-dragend': function evDragend(e) {
+          return onEnd(e);
+        },
+        key: key,
+        draggable: draggable,
+        className: cx({
+          'k-dragging': key === draggingKey.value,
+          'k-draggable': draggable
+        })
+      }, vNode);
+    }));
+  }
+
+  function onStart(key, index) {
+    draggingIndex = originIndex = index;
+    nextFrame(function () {
+      draggingKey.set(key);
+    });
+    instance.trigger('dragstart', {
+      key: key,
+      from: index
+    });
+  }
+
+  function onOver(e, key, index) {
+    e.preventDefault();
+    e.stopPropagation(); // Dragging the tag of another tags drag to this tags should be ignored
+
+    if (draggingIndex === -1) return;
+    if (lastOverIndex === index) return;
+    lastOverIndex = index;
+    if (index === draggingIndex) return; // if the tag has move transition, you cannot drag over it before transition ended.
+
+    var dom = findDomFromVNode(children.value[index], true);
+    if (dom.classList.contains('k-fade-move')) return;
+    var vNodes = swap(originVNodes.value, draggingIndex, index);
+    lastOverIndex = draggingIndex;
+    draggingIndex = index;
+    originVNodes.set(vNodes);
+  }
+
+  function onEnd(e) {
+    e.preventDefault();
+    instance.trigger('dragend', {
+      key: draggingKey.value,
+      from: originIndex,
+      to: draggingIndex
+    });
+    draggingKey.set(null);
+    lastOverIndex = -1;
+    draggingIndex = -1;
+    originIndex = -1;
+  }
+
+  return children;
+}

package/es/components/tag/useNowrap.d.ts

@@ -0,0 +1,7 @@
+import { VNode } from 'intact';
+import { State } from '../../hooks/useState';
+export declare function useNowrap(originVNodes: State<VNode[]>): {
+    containerRef: import("intact").RefObject<HTMLDivElement>;
+    children: State<VNode<import("intact").VNodeTag>[]>;
+    hiddenChildren: State<VNode<import("intact").VNodeTag>[]>;
+};

package/es/components/tag/useNowrap.js

@@ -0,0 +1,115 @@
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _Map from "@babel/runtime-corejs3/core-js/map";
+import { useInstance, createRef, findDomFromVNode, onBeforeMount, nextTick } from 'intact';
+import { useState, watchState } from '../../hooks/useState';
+import { tag as tagStyles } from './styles';
+import { getLeft, getRight } from '../../styles/utils';
+import { useReceive } from '../../hooks/useReceive';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+export function useNowrap(originVNodes) {
+  var instance = useInstance();
+  var containerRef = createRef();
+  var children = useState([]);
+  var hiddenChildren = useState([]);
+  var estimateMoreElementWidth = useEstimateMoreElementWidth();
+  var offsetMap = useChildrenOffset(originVNodes);
+  watchState(originVNodes, function (v) {
+    children.set(v);
+    nextTick(refresh);
+  }); // instance.watch('children', refresh, { presented: true })
+
+  useResizeObserver(containerRef, refresh);
+
+  function refresh() {
+    if (!instance.get('nowrap')) return;
+    var container = containerRef.value;
+    var containerWidth = container.offsetWidth;
+    var vNodes = [];
+    var _originVNodes = originVNodes.value;
+    var length = _originVNodes.length;
+
+    if (_originVNodes.length > 1) {
+      _originVNodes.forEach(function (vNode, index) {
+        var offset = offsetMap.get(vNode); // estimate the "more" element's with for performance
+
+        var width = estimateMoreElementWidth(length - index - 1);
+
+        if (offset + width <= containerWidth) {
+          vNodes.push(vNode);
+        }
+      });
+    } else {
+      vNodes.push.apply(vNodes, _originVNodes);
+    }
+    /**
+     * refresh function will be called in ResizeObserver,
+     * state changed will cause container's width to change,
+     * and a error will throw (ResizeObserver loop completed with undelivered notifications)
+     * so we call setState in requestAnimationFrame
+     */
+
+
+    requestAnimationFrame(function () {
+      hiddenChildren.set(_sliceInstanceProperty(_originVNodes).call(_originVNodes, vNodes.length));
+      children.set(vNodes);
+    });
+  }
+
+  return {
+    containerRef: containerRef,
+    children: children,
+    hiddenChildren: hiddenChildren
+  };
+}
+
+function useChildrenOffset(vNodes) {
+  var instance = useInstance();
+  var map = new _Map(); // instance.watch('children', updateMap, { presented: true })
+
+  watchState(vNodes, function () {
+    return nextTick(updateMap);
+  });
+
+  function updateMap() {
+    map.clear();
+    if (!instance.get('nowrap')) return;
+    vNodes.value.forEach(function (vNode) {
+      var dom = findDomFromVNode(vNode, true);
+      if (!dom || dom.nodeType !== 1) return;
+      var offsetLeft = dom.offsetLeft,
+          offsetWidth = dom.offsetWidth;
+      map.set(vNode, offsetLeft + offsetWidth);
+    });
+  }
+
+  return map;
+}
+
+function useEstimateMoreElementWidth() {
+  var instance = useInstance();
+  var widthPerChar = 7.2;
+  var cacheWidth = 0;
+  onBeforeMount(cache);
+  useReceive(['size', 'border'], cache, true);
+
+  function cache() {
+    var _instance$get = instance.get(),
+        size = _instance$get.size,
+        border = _instance$get.border;
+
+    cacheWidth = parseInt(tagStyles.tags.gap) + widthPerChar
+    /* the "+" mark */
+    ;
+
+    if (border !== 'none') {
+      cacheWidth += 2;
+    }
+
+    var padding = size === 'default' ? tagStyles.padding : tagStyles[size].padding;
+    cacheWidth += parseInt(getLeft(padding)) + parseInt(getRight(padding));
+  }
+
+  return function (count) {
+    return Math.round(count.toString().length * widthPerChar + cacheWidth);
+  };
+}

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

@@ -100,7 +100,7 @@ describe('Timepicker', function () {
           case 45:
             expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']); // remove one value
 
-            _picker2$querySelecto = picker2.querySelectorAll('.k-select-close'), close = _picker2$querySelecto[1];
+            _picker2$querySelecto = picker2.querySelectorAll('.k-tag-close'), close = _picker2$querySelecto[1];
             close.click();
             _context2.next = 50;
             return wait();

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

@@ -55,9 +55,7 @@ export default function ($props, $blocks, $__proto__) {
         'className': 'k-tip-close',
         'children': (_$blocks['close'] = function ($super) {
           return _$cc(Icon, {
-            'className': 'ion-ios-close-empty',
-            'size': 'large',
-            'color': type,
+            'className': 'k-icon-close',
             'hoverable': !disabled
           });
         }, __$blocks['close'] = function ($super, data) {

package/es/components/tip/styles.js

@@ -5,11 +5,12 @@ import { deepDefaults } from '../../styles/utils';
 var defaults = {
   title: {
     fontSize: '14px',
-    gap: '8px'
+    gap: '8px',
+    fontWeight: '500'
   },
 
   get color() {
-    return theme.color.text;
+    return theme.color.title;
   },
 
   get padding() {
@@ -24,5 +25,5 @@ setDefault(function () {
   }).tip;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("&.k-tip{display:flex;height:auto;padding:0;color:", tip.color, "!important;align-items:flex-start;}.k-tip-wrapper{flex:1;padding:", tip.padding, ";}.k-tip-title{font-size:", tip.title.fontSize, ";margin-bottom:", tip.title.gap, ";}&.k-fade-leave-active{position:relative;}");
+  return /*#__PURE__*/css("&.k-tip{display:flex;height:auto;padding:0;color:", tip.color, "!important;align-items:flex-start;}.k-tip-wrapper{flex:1;padding:", tip.padding, ";}.k-tip-title{font-size:", tip.title.fontSize, ";margin-bottom:", tip.title.gap, ";font-weight:", tip.title.fontWeight, ";}&.k-fade-leave-active{position:relative;}.k-tip-close:hover{background:none;}");
 }

package/es/components/tooltip/content.d.ts

@@ -6,9 +6,9 @@ export interface TooltipContentEvents extends DropdownMenuEvents {
 export interface TooltipContentBlocks extends DropdownMenuBlocks {
     buttons: null;
 }
-export declare class TooltipContent extends DropdownMenu<TooltipContentProps, TooltipContentEvents, TooltipContentBlocks> {
+export declare class TooltipContent<T extends TooltipContentProps = TooltipContentProps, E extends TooltipContentEvents = TooltipContentEvents, B extends TooltipContentBlocks = TooltipContentBlocks> extends DropdownMenu<T, E, B> {
     static template: string | import("intact").Template<any>;
-    private isEmptyChildren;
+    protected isEmptyChildren: boolean;
     private arrow;
     init(): void;
     private onEnter;

package/es/components/tooltip/content.vdt.js

@@ -1,4 +1,4 @@
-import { superCall as _$su, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, createElementVNode as _$ce, createUnknownComponentVNode as _$cc, noop as _$no } from 'intact';
+import { superCall as _$su, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, noop as _$no, createElementVNode as _$ce, createUnknownComponentVNode as _$cc } from 'intact';
 import { Button } from '../button';
 import makeStyles from './styles';
 export default function ($props, $blocks, $__proto__) {
@@ -33,7 +33,7 @@ export default function ($props, $blocks, $__proto__) {
     'k-tooltip-content': true,
     'k-hoverable': hoverable || trigger === 'click',
     'k-always': always
-  }, _classNameObj["k-" + theme] = true, _classNameObj["k-" + size] = size !== 'default', _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  }, _classNameObj["k-" + theme] = true, _classNameObj["k-" + size] = size !== 'default', _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj[$props.className] = $props.className, _classNameObj);
   return _$su.call($this, {
     'value': !!value && !this.isEmptyChildren,
     'transition': {
@@ -50,28 +50,38 @@ export default function ($props, $blocks, $__proto__) {
     return (_$blocks['children'] = function ($super) {
       var _$cn2;
 
-      return [children, showArrow ? _$ce(2, 'i', null, 1, _$cn((_$cn2 = {
-        "k-tooltip-arrow": true
-      }, _$cn2["k-" + arrowType.value] = arrowType.value, _$cn2)), null, 'tooltip-arrow', arrowRef) : undefined, confirm ? _$ce(2, 'div', (_$blocks['buttons'] = function ($super) {
+      return [(_$blocks['body'] = function ($super) {
+        return children;
+      }, __$blocks['body'] = function ($super, data) {
+        var block = $blocks['body'];
+
+        var callBlock = function callBlock() {
+          return _$blocks['body'].call($this, $super, data);
+        };
+
+        return block ? block.call($this, callBlock, data) : callBlock();
+      }, __$blocks['body'](_$no)), confirm ? _$ce(2, 'div', (_$blocks['footer'] = function ($super) {
         return [_$cc(Button, {
+          'ev-click': this.cancel,
+          'size': 'small',
+          'children': cancelText
+        }), _$cc(Button, {
           'type': 'primary',
           'ev-click': this.ok,
           'size': 'small',
           'children': okText
-        }), _$cc(Button, {
-          'ev-click': this.cancel,
-          'size': 'small',
-          'children': cancelText
         })];
-      }, __$blocks['buttons'] = function ($super, data) {
-        var block = $blocks['buttons'];
+      }, __$blocks['footer'] = function ($super, data) {
+        var block = $blocks['footer'];
 
         var callBlock = function callBlock() {
-          return _$blocks['buttons'].call($this, $super, data);
+          return _$blocks['footer'].call($this, $super, data);
         };
 
         return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['buttons'](_$no)), 0, 'k-tooltip-buttons', null, 'tooltip-buttons') : undefined];
+      }, __$blocks['footer'](_$no)), 0, 'k-tooltip-footer', null, 'tooltip-footer') : undefined, showArrow ? _$ce(2, 'i', null, 1, _$cn((_$cn2 = {
+        "k-tooltip-arrow": true
+      }, _$cn2["k-" + arrowType.value] = arrowType.value, _$cn2)), null, 'tooltip-arrow', arrowRef) : undefined];
     }, __$blocks['children'] = function ($super, data) {
       var block = $blocks['children'];