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

package/es/components/tabs/useScroll.js

@@ -6,7 +6,7 @@ export function useScroll() {
   var scrollRef = createRef();
   var wrapperRef = createRef();
   var isScroll = useState(false);
-  var left = useState(0);
+  var offset = useState(0);
   var enablePrev = useState(false);
   var enableNext = useState(false);
   onMounted(refresh);
@@ -16,94 +16,121 @@ export function useScroll() {
     presented: true
   });
 
-  function refresh() {
+  function getLength() {
     var _instance$get = instance.get(),
         vertical = _instance$get.vertical;
 
-    if (vertical) return;
-    var scrollWidth = scrollRef.value.offsetWidth;
-    var wrapperWidth = wrapperRef.value.offsetWidth;
-    isScroll.set(scrollWidth < wrapperWidth);
-    updateTransition(left.value, scrollWidth, wrapperWidth);
-  }
-
-  function updateTransition(_left, scrollWidth, wrapperWidth) {
-    if (_left === void 0) {
-      _left = left.value;
+    if (vertical) {
+      return {
+        scrollLength: scrollRef.value.offsetHeight,
+        wrapperLength: wrapperRef.value.offsetHeight
+      };
     }
 
-    if (scrollWidth === void 0) {
-      scrollWidth = scrollRef.value.offsetWidth;
-    }
+    return {
+      scrollLength: scrollRef.value.offsetWidth,
+      wrapperLength: wrapperRef.value.offsetWidth
+    };
+  }
 
-    if (wrapperWidth === void 0) {
-      wrapperWidth = wrapperRef.value.offsetWidth;
-    }
+  function refresh() {
+    var _getLength = getLength(),
+        scrollLength = _getLength.scrollLength,
+        wrapperLength = _getLength.wrapperLength;
 
+    isScroll.set(scrollLength < wrapperLength);
+    updateTransition(offset.value, scrollLength, wrapperLength);
+  }
+
+  function updateTransition(_offset, scrollLength, wrapperLength) {
     var prev = true;
     var next = true;
 
-    if (_left >= 0) {
-      _left = 0;
+    if (_offset >= 0) {
+      _offset = 0;
       prev = false;
-    } else if (_left <= scrollWidth - wrapperWidth) {
-      _left = scrollWidth - wrapperWidth;
+    } else if (_offset <= scrollLength - wrapperLength) {
+      _offset = scrollLength - wrapperLength;
       next = false;
     }
 
-    left.set(_left);
+    offset.set(_offset);
     enablePrev.set(prev);
     enableNext.set(next);
   }
 
   function prev() {
-    var scrollWidth = scrollRef.value.offsetWidth;
-    updateTransition(left.value + scrollWidth);
+    var _getLength2 = getLength(),
+        scrollLength = _getLength2.scrollLength,
+        wrapperLength = _getLength2.wrapperLength;
+
+    updateTransition(offset.value + scrollLength, scrollLength, wrapperLength);
   }
 
   function next() {
-    var scrollWidth = scrollRef.value.offsetWidth;
-    updateTransition(left.value - scrollWidth);
+    var _getLength3 = getLength(),
+        scrollLength = _getLength3.scrollLength,
+        wrapperLength = _getLength3.wrapperLength;
+
+    updateTransition(offset.value - scrollLength, scrollLength, wrapperLength);
   }
 
   function scrollActiveToView() {
     var _instance$get2 = instance.get(),
         vertical = _instance$get2.vertical;
 
-    if (vertical) return;
     var activeTab = scrollRef.value.querySelector('.k-tab.k-active');
 
     if (activeTab) {
-      var _left = left.value; // don't use getBoundingClientRect, it has transform and will return digital number
+      var _offset = offset.value; // don't use getBoundingClientRect, it has transform and will return digital number
+
+      var activeRect;
+      var scrollRect;
+      var wrapperRect;
+
+      if (vertical) {
+        activeRect = {
+          offset: activeTab.offsetTop,
+          length: activeTab.offsetHeight
+        };
+        scrollRect = {
+          length: scrollRef.value.offsetHeight
+        };
+        wrapperRect = {
+          offset: wrapperRef.value.offsetTop,
+          length: wrapperRef.value.offsetHeight
+        };
+      } else {
+        activeRect = {
+          offset: activeTab.offsetLeft,
+          length: activeTab.offsetWidth
+        };
+        scrollRect = {
+          length: scrollRef.value.offsetWidth
+        };
+        wrapperRect = {
+          offset: wrapperRef.value.offsetLeft,
+          length: wrapperRef.value.offsetWidth
+        };
+      }
 
-      var activeRect = {
-        left: activeTab.offsetLeft,
-        width: activeTab.offsetWidth
-      };
-      var scrollRect = {
-        width: scrollRef.value.offsetWidth
-      };
-      var wrapperRect = {
-        left: wrapperRef.value.offsetLeft,
-        width: wrapperRef.value.offsetWidth
-      };
-      var x = activeRect.left - wrapperRect.left;
+      var offsetDelta = activeRect.offset - wrapperRect.offset;
 
-      if (_left + x <= 0) {
-        _left = -x;
-      } else if (x + activeRect.width + _left > scrollRect.width) {
-        _left = -x - activeRect.width + scrollRect.width;
+      if (_offset + offsetDelta <= 0) {
+        _offset = -offsetDelta;
+      } else if (offsetDelta + activeRect.length + _offset > scrollRect.length) {
+        _offset = -offsetDelta - activeRect.length + scrollRect.length;
       }
 
-      left.set(_left);
+      offset.set(_offset);
     } else {
-      left.set(0);
+      offset.set(0);
     }
   }
 
   return {
     isScroll: isScroll,
-    left: left,
+    offset: offset,
     enablePrev: enablePrev,
     enableNext: enableNext,
     prev: prev,

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

@@ -14,6 +14,7 @@ export interface TagEvents {
 }
 export interface TagBlocks {
 }
+export declare const typeDefs: Required<TypeDefs<TagProps>>;
 export declare class Tag<T extends TagProps = TagProps, E extends TagEvents = TagEvents, B extends TagBlocks = TagBlocks> extends Component<T, E, B> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<TagProps>>;

package/es/components/tag/base.js

@@ -4,7 +4,7 @@ import { Component } from 'intact';
 import { bind } from '../utils';
 import template from './index.vdt';
 import { sizes } from '../../styles/utils';
-var typeDefs = {
+export var typeDefs = {
   type: ['default', 'primary', 'danger', 'success', 'warning'],
   closable: Boolean,
   closed: Boolean,
@@ -17,7 +17,7 @@ var defaults = function defaults() {
   return {
     type: 'default',
     size: 'default',
-    border: 'solid'
+    border: 'none'
   };
 };
 

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

@@ -1,4 +1,5 @@
 import { TagProps, TagEvents, TagBlocks, Tag as BaseTag } from './base';
+export * from './tags';
 export type { TagProps, TagEvents, TagBlocks };
 export declare class Tag extends BaseTag<TagProps, TagEvents, TagBlocks> {
 }

package/es/components/tag/index.js

@@ -1,5 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
-import { Tag as BaseTag } from './base'; // export declare class _Tag extends BaseTag<
+import { Tag as BaseTag } from './base';
+export * from './tags'; // export declare class _Tag extends BaseTag<
 // TagProps,
 // TagEvents,
 // TagBlocks

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

@@ -1,11 +1,11 @@
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import ClosableDemo from '~/components/tag/demos/closable';
-import { mount, unmount, wait } from '../../test/utils';
+import { mount, wait, dispatchEvent, getElement } from '../../test/utils';
+import TagsDemo from '~/components/tag/demos/tags';
+import DraggableDemo from '~/components/tag/demos/draggable';
 describe('Tag', function () {
-  afterEach(function () {
-    return unmount();
-  });
+  // afterEach(() => unmount());
   it('should not close tag if we has prevented default', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, btns, preventDefaultBtn, commonBtn;
 
@@ -37,4 +37,147 @@ describe('Tag', function () {
       }
     }, _callee);
   })));
+  it('should hide tags that overflow', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, lastPanel, more, tooltip, tags;
+
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(TagsDemo), instance = _mount2[0], element = _mount2[1];
+            lastPanel = element.querySelector('.k-split-last');
+            _context2.next = 4;
+            return wait(0);
+
+          case 4:
+            expect(lastPanel.innerHTML).to.matchSnapshot(); // show tooltip
+
+            more = lastPanel.querySelector('.k-tags-more');
+            dispatchEvent(more, 'mouseenter');
+            _context2.next = 9;
+            return wait();
+
+          case 9:
+            tooltip = getElement('.k-tags-tooltip');
+            expect(tooltip.querySelectorAll('.k-tag').length).to.eql(3); // remove one tag
+
+            dispatchEvent(lastPanel.querySelector('.k-tag-close'), 'click');
+            _context2.next = 14;
+            return wait(0);
+
+          case 14:
+            expect(lastPanel.innerHTML).to.matchSnapshot(); // resize
+
+            tags = lastPanel.querySelector('.k-tags');
+            tags.style.width = '200px';
+            _context2.next = 19;
+            return wait(200);
+
+          case 19:
+            expect(lastPanel.innerHTML).to.matchSnapshot(); // show tooltip again (the "more" element will be removed and created again)
+
+            more = lastPanel.querySelector('.k-tags-more');
+            dispatchEvent(more, 'mouseenter');
+            _context2.next = 24;
+            return wait();
+
+          case 24:
+            tooltip = getElement('.k-tags-tooltip');
+            expect(tooltip.querySelectorAll('.k-tag').length).to.eql(3);
+
+          case 26:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('should support drag tags', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount3, instance, element, test, _test, _element$querySelecto, tag1, tag2, tag6, _element$querySelecto2, tag11, tag22, more, dropdown, _dropdown$querySelect, tag55, tag66;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _test = function _test3() {
+              _test = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(from, to) {
+                return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+                  while (1) {
+                    switch (_context3.prev = _context3.next) {
+                      case 0:
+                        dispatchEvent(from, 'dragstart');
+                        _context3.next = 3;
+                        return wait();
+
+                      case 3:
+                        dispatchEvent(to, 'dragover');
+                        _context3.next = 6;
+                        return wait(500);
+
+                      case 6:
+                        expect(element.innerHTML).to.matchSnapshot();
+                        dispatchEvent(from, 'dragend');
+                        _context3.next = 10;
+                        return wait();
+
+                      case 10:
+                        expect(element.innerHTML).to.matchSnapshot();
+
+                      case 11:
+                      case "end":
+                        return _context3.stop();
+                    }
+                  }
+                }, _callee3);
+              }));
+              return _test.apply(this, arguments);
+            };
+
+            test = function _test2(_x, _x2) {
+              return _test.apply(this, arguments);
+            };
+
+            _mount3 = mount(DraggableDemo), instance = _mount3[0], element = _mount3[1];
+            _element$querySelecto = element.querySelectorAll('.k-tag'), tag1 = _element$querySelecto[0], tag2 = _element$querySelecto[1], tag6 = _element$querySelecto[5];
+            _context4.next = 6;
+            return test(tag1, tag2);
+
+          case 6:
+            _context4.next = 8;
+            return test(tag1, tag6);
+
+          case 8:
+            // with more tooltip
+            _element$querySelecto2 = element.querySelectorAll('.k-tags:last-of-type .k-tag'), tag11 = _element$querySelecto2[0], tag22 = _element$querySelecto2[1], more = _element$querySelecto2[4];
+            _context4.next = 11;
+            return test(tag11, tag22);
+
+          case 11:
+            _context4.next = 13;
+            return wait(0);
+
+          case 13:
+            dispatchEvent(more, 'mouseenter');
+            _context4.next = 16;
+            return wait();
+
+          case 16:
+            dropdown = getElement('.k-tags-tooltip');
+            _dropdown$querySelect = dropdown.querySelectorAll('.k-tag'), tag55 = _dropdown$querySelect[0], tag66 = _dropdown$querySelect[1];
+            _context4.next = 20;
+            return test(tag55, tag11);
+
+          case 20:
+            expect(dropdown.innerText).to.eql('warning\nwith tooltip'); // should not drag to other tags
+
+            _context4.next = 23;
+            return test(tag11, tag2);
+
+          case 23:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
 });

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

@@ -1,2 +1,69 @@
 import '../../styles/global';
+declare type TypeStyles = {
+    color: string;
+    bgColor: string;
+};
+declare const defaults: {
+    readonly border: string;
+    readonly borderRadius: string;
+    readonly fontSize: string;
+    padding: string;
+    height: string;
+    readonly bgColor: string;
+    close: {
+        fontSize: string;
+        gap: string;
+        /**
+         * fix the width to calculate the width for nowrap tags,
+         * otherwise the width will be decided by font font-icons loaded
+         */
+        width: string;
+    };
+    disabled: {
+        readonly color: string;
+        readonly borderColor: string;
+        readonly bgColor: string;
+    };
+    large: {
+        padding: string;
+        height: string;
+        readonly fontSize: string;
+        close: {
+            fontSize: string;
+            gap: string;
+        };
+    };
+    small: {
+        padding: string;
+        height: string;
+        readonly fontSize: string;
+        close: {
+            fontSize: string;
+            gap: string;
+        };
+    };
+    mini: {
+        padding: string;
+        height: string;
+        fontSize: string;
+        close: {
+            fontSize: string;
+            gap: string;
+        };
+    };
+    none: {
+        readonly bgColor: string;
+    };
+    tags: {
+        gap: string;
+    };
+} & {
+    primary: TypeStyles;
+    warning: TypeStyles;
+    danger: TypeStyles;
+    success: TypeStyles;
+};
+declare let tag: typeof defaults;
+export { tag };
 export declare function makeStyles(): string;
+export declare function makeTagsStyles(): string;

package/es/components/tag/styles.js

@@ -5,8 +5,8 @@ import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
 var types = ['primary', 'warning', 'danger', 'success', 'disabled'];
 var defaults = deepDefaults({
-  get borderColor() {
-    return theme.color.border;
+  get border() {
+    return "1px solid " + theme.color.border;
   },
 
   get borderRadius() {
@@ -19,9 +19,20 @@ var defaults = deepDefaults({
 
   padding: "0 8px",
   height: '20px',
+
+  get bgColor() {
+    return theme.color.bg;
+  },
+
   close: {
     fontSize: '20px',
-    gap: '8px'
+    gap: '8px',
+
+    /**
+     * fix the width to calculate the width for nowrap tags,
+     * otherwise the width will be decided by font font-icons loaded
+     */
+    width: '7px'
   },
   disabled: {
     get color() {
@@ -38,24 +49,36 @@ var defaults = deepDefaults({
 
   },
   large: {
-    padding: "0px 16px",
-    height: '32px',
+    padding: "0px 8px",
+    height: '24px',
+
+    get fontSize() {
+      return theme.large.fontSize;
+    },
+
     close: {
-      fontSize: '24px',
-      gap: '12px'
+      fontSize: '22px',
+      gap: '6px'
     }
   },
   small: {
     padding: "0 4px",
-    height: '18px',
+    height: '16px',
+
+    get fontSize() {
+      return theme.small.fontSize;
+    },
+
     close: {
       fontSize: '18px',
       gap: '4px'
     }
   },
   mini: {
-    padding: "0 1px",
+    padding: "0 2px",
     height: '14px',
+    // get fontSize() { return theme.mini.fontSize },
+    fontSize: '11px',
     close: {
       fontSize: '16px',
       gap: '2px'
@@ -66,6 +89,9 @@ var defaults = deepDefaults({
       return theme.color.bg;
     }
 
+  },
+  tags: {
+    gap: '8px'
   }
 }, types.reduce(function (memo, type) {
   if (type === 'disabled') return memo;
@@ -87,13 +113,17 @@ setDefault(function () {
     tag: defaults
   }).tag;
 });
+export { tag };
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:1px solid ", tag.borderColor, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.k-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";}&.k-none{border:none;background:", tag.none.bgColor, ";}", _mapInstanceProperty(types).call(types, function (t) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:", tag.border, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.k-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";width:", tag.close.width, ";}&.k-none{border:none;background:", tag.none.bgColor, ";}", _mapInstanceProperty(types).call(types, function (t) {
     var styles = tag[t];
     return /*#__PURE__*/css("&.k-", t, "{color:", styles.color, ";border-color:", styles.color, ";background:", styles.bgColor, ";}");
   }), " ", _mapInstanceProperty(sizes).call(sizes, function (s) {
     if (s === 'default') return;
     var styles = tag[s];
-    return /*#__PURE__*/css("&.k-", s, "{padding:", styles.padding, ";height:", styles.height, ";.k-tag-close{font-size:", styles.close.fontSize, ";margin-left:", styles.close.gap, ";}}");
-  }), "&.k-dashed{border-style:dashed;}");
+    return /*#__PURE__*/css("&.k-", s, "{padding:", styles.padding, ";height:", styles.height, ";font-size:", styles.fontSize, ";.k-tag-close{font-size:", styles.close.fontSize, ";margin-left:", styles.close.gap, ";}}");
+  }), "&.k-dashed{border-style:dashed;}&.k-dragging{opacity:0;}");
+}
+export function makeTagsStyles() {
+  return /*#__PURE__*/css("display:flex;flex-wrap:wrap;gap:", defaults.tags.gap, ";position:relative;overflow:hidden;&.k-nowrap{flex-wrap:nowrap;}.k-tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;}.k-tags-more{cursor:default;font-family:monospace;}.k-tag.k-draggable{cursor:move;}");
 }

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

@@ -0,0 +1,27 @@
+import { Component, TypeDefs, Key } from 'intact';
+import { TagProps } from './base';
+import type { Events } from '../types';
+export interface TagsProps extends Pick<TagProps, 'size' | 'border'> {
+    nowrap?: boolean;
+    draggable?: boolean;
+}
+export declare type TagsDragStartParam = {
+    key: Key;
+    from: number;
+};
+export declare type TagsDragEndParam = TagsDragStartParam & {
+    to: number;
+};
+export interface TagsEvents {
+    dragstart: [TagsDragStartParam];
+    dragend: [TagsDragEndParam];
+}
+export declare class Tags extends Component<TagsProps, TagsEvents> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<TagsProps>>;
+    static defaults: () => Partial<TagsProps>;
+    static events: Events<TagsEvents>;
+    private children;
+    private draggable;
+    private nowrap;
+}

package/es/components/tag/tags.js

@@ -0,0 +1,51 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact';
+import template from './tags.vdt';
+import { useNowrap } from './useNowrap';
+import { typeDefs as tagTypeDefs } from './base';
+import { useChildren } from './useChildren';
+import { useDraggable } from './useDraggable';
+var typeDefs = {
+  nowrap: Boolean,
+  draggable: Boolean,
+  size: tagTypeDefs.size,
+  border: tagTypeDefs.border
+};
+
+var defaults = function defaults() {
+  return {
+    size: 'default',
+    border: 'none'
+  };
+};
+
+var events = {
+  dragstart: true,
+  dragend: true
+};
+export var Tags = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(Tags, _Component);
+
+  function Tags() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.children = useChildren();
+    _this.draggable = useDraggable(_this.children);
+    _this.nowrap = useNowrap(_this.draggable);
+    return _this;
+  }
+
+  return Tags;
+}(Component);
+Tags.template = template;
+Tags.typeDefs = typeDefs;
+Tags.defaults = defaults;
+Tags.events = events;