@king-design/vue 2.1.4 → 2.1.6

package/components/table/useStickyScrollbar.js

@@ -5,7 +5,7 @@ import { debounce } from '../utils';
 import { useResizeObserver } from './useResizeObserver';
 export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll) {
   var scrollRef = _ref.scrollRef,
-    callbacks = _ref.callbacks;
+      callbacks = _ref.callbacks;
   var instance = useInstance();
   var stick = useState(null);
   var style = useState(null);
@@ -20,16 +20,20 @@ export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll) {
   });
   callbacks.push(onTableScroll);
   var scrollLeft = 0;
+
   function shouldStickScrollbar(_ref2) {
     var offsetBottom = _ref2.offsetBottom,
-      viewportHeight = _ref2.viewportHeight;
+        viewportHeight = _ref2.viewportHeight;
+
     var _elementRef$value$get = elementRef.value.getBoundingClientRect(),
-      top = _elementRef$value$get.top,
-      bottom = _elementRef$value$get.bottom;
+        top = _elementRef$value$get.top,
+        bottom = _elementRef$value$get.bottom;
+
     var p = viewportHeight - offsetBottom;
+
     if (bottom >= p && top < p) {
-      style.set(null);
-      // update scrollLeft, because it can not be updated when it is hidden
+      style.set(null); // update scrollLeft, because it can not be updated when it is hidden
+
       nextTick(function () {
         scrollbarRef.value.scrollLeft = scrollLeft;
       });
@@ -41,23 +45,29 @@ export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll) {
       return false;
     }
   }
+
   var lock = false;
+
   function onTableScroll(_scrollLeft) {
     if (isNull(stick.value) || lock) return;
     scrollbarRef.value.scrollLeft = scrollLeft = _scrollLeft;
   }
+
   var unlock = debounce(function () {
     return lock = false;
   }, 100);
+
   function onScroll(e) {
     lock = true;
     scrollRef.value.scrollLeft = scrollLeft = scrollbarRef.value.scrollLeft;
     unlock();
     tableScroll(scrollLeft);
   }
+
   function setTableActualWidth() {
     tableActualWidth.set(tableRef.value.offsetWidth + 'px');
   }
+
   return {
     shouldStickScrollbar: shouldStickScrollbar,
     stick: stick,

package/components/table/useTree.js

@@ -3,20 +3,26 @@ import { inArray } from './useChecked';
 import { toggleArray } from '../utils';
 export function useTree(data) {
   var instance = useInstance();
+
   function isSpreaded(key) {
     return inArray(instance.get('spreadKeys'), key);
   }
+
   function toggleSpreadRow(key) {
     instance.set('spreadKeys', toggleArray(instance.get('spreadKeys'), key));
   }
+
   function loopData(cb, shouldBreak) {
     if (shouldBreak === void 0) {
       shouldBreak = false;
     }
+
     var _instance$get = instance.get(),
-      childrenKey = _instance$get.childrenKey;
+        childrenKey = _instance$get.childrenKey;
+
     loopDataWithChildrenKey(data.value, childrenKey, cb, shouldBreak);
   }
+
   return {
     isSpreaded: isSpreaded,
     toggleSpreadRow: toggleSpreadRow,
@@ -26,14 +32,17 @@ export function useTree(data) {
 export function loopDataWithChildrenKey(data, childrenKey, cb, shouldBreak) {
   if (!data) return;
   var index = -1;
+
   var loop = function loop(data, level, meta) {
     for (var i = 0; i < data.length; i++) {
       index++;
       var value = data[i];
       var ret = cb(value, index, level, meta);
       if (shouldBreak && ret) return true;
+
       if (childrenKey) {
         var children = value[childrenKey];
+
         if (Array.isArray(children)) {
           if (loop(children, level + 1, ret)) {
             return true;
@@ -41,7 +50,9 @@ export function loopDataWithChildrenKey(data, childrenKey, cb, shouldBreak) {
         }
       }
     }
+
     return false;
   };
+
   loop(data, 0, null);
 }

package/components/table/useWidth.js

@@ -16,21 +16,25 @@ export function useWidth(scrollRef, getColumns) {
   });
   useResizeObserver(scrollRef, function () {
     return checkTableWidth(false);
-  });
-  // if exist widthStoreKey, we get the default width from localStorage
+  }); // if exist widthStoreKey, we get the default width from localStorage
+
   function initWidthFromStore() {
     var _instance$get = instance.get(),
-      widthStoreKey = _instance$get.widthStoreKey;
+        widthStoreKey = _instance$get.widthStoreKey;
+
     if (widthStoreKey && hasLocalStorage) {
       var data = localStorage.getItem(widthStoreKey);
+
       if (data) {
         try {
           var _JSON$parse = JSON.parse(data),
-            map = _mapInstanceProperty(_JSON$parse),
-            width = _JSON$parse.width;
+              map = _mapInstanceProperty(_JSON$parse),
+              width = _JSON$parse.width;
+
           if (map) {
             widthMap.set(map);
           }
+
           if (width) {
             tableWidth.set(width);
           }
@@ -38,10 +42,12 @@ export function useWidth(scrollRef, getColumns) {
       }
     }
   }
+
   function storeWidth() {
     // store width if has widthStoreKey
     var _instance$get2 = instance.get(),
-      widthStoreKey = _instance$get2.widthStoreKey;
+        widthStoreKey = _instance$get2.widthStoreKey;
+
     if (widthStoreKey) {
       localStorage.setItem(widthStoreKey, _JSON$stringify({
         map: widthMap.value,
@@ -49,35 +55,42 @@ export function useWidth(scrollRef, getColumns) {
       }));
     }
   }
+
   function checkTableWidth(isMount) {
     checkColumnMinWidth(false);
+
     var _instance$get3 = instance.get(),
-      resizable = _instance$get3.resizable,
-      type = _instance$get3.type;
+        resizable = _instance$get3.resizable,
+        type = _instance$get3.type;
+
     if (resizable) {
       var hasBorder = type === 'grid' || type === 'border';
       var _tableWidth = tableRef.value.offsetWidth;
       var container = scrollRef.value;
-      var containerWidth = container.offsetWidth + (hasBorder ? -2 : 0);
-      // detect whether the table has vertical scrollbar or not
+      var containerWidth = container.offsetWidth + (hasBorder ? -2 : 0); // detect whether the table has vertical scrollbar or not
+
       if (container.scrollHeight > container.clientHeight) {
         containerWidth = containerWidth - scrollbarWidth();
       }
+
       if (_tableWidth < containerWidth) {
         tableWidth.set(isMount ? null : containerWidth);
         storeWidth();
       }
     }
   }
+
   function checkColumnMinWidth(isStop) {
     var shouldUpdate = false;
     getColumns().forEach(function (rowColumns) {
       rowColumns.forEach(function (column) {
         var _column$props = column.props,
-          key = _column$props.key,
-          minWidth = _column$props.minWidth;
+            key = _column$props.key,
+            minWidth = _column$props.minWidth;
+
         if (minWidth) {
           var width = column.children.elementRef.value.offsetWidth;
+
           if (width < minWidth) {
             widthMap.value[key] = minWidth;
             shouldUpdate = true;
@@ -85,6 +98,7 @@ export function useWidth(scrollRef, getColumns) {
         }
       });
     });
+
     if (shouldUpdate) {
       instance.forceUpdate(function () {
         // check again because it may affect other columns
@@ -96,12 +110,14 @@ export function useWidth(scrollRef, getColumns) {
       });
     }
   }
+
   function getWidth(key) {
-    var width = widthMap.value[key];
-    // if (width === 'auto') return width;
+    var width = widthMap.value[key]; // if (width === 'auto') return width;
+
     if (width) return width + "px";
     return null;
   }
+
   return {
     tableRef: tableRef,
     tableWidth: tableWidth,

package/components/tabs/index.js

@@ -17,76 +17,98 @@ var typeDefs = {
   closable: Boolean,
   beforeChange: Function
 };
+
 var defaults = function defaults() {
   return {
     size: 'default',
     type: 'default'
   };
 };
+
 var events = {
   remove: true
 };
 export var Tabs = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Tabs, _Component);
+
   function Tabs() {
     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.activeBar = useActiveBar();
     _this.scroll = useScroll();
     return _this;
   }
+
   var _proto = Tabs.prototype;
+
   _proto.init = function init() {
     provide(TABS, this);
   };
+
   _proto.changeTab = /*#__PURE__*/function () {
     var _changeTab = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(tabProps) {
       var _this$get, beforeChange, ret;
+
       return _regeneratorRuntime.wrap(function _callee$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            _this$get = this.get(), beforeChange = _this$get.beforeChange;
-            if (!beforeChange) {
-              _context2.next = 7;
-              break;
-            }
-            _context2.next = 4;
-            return beforeChange(tabProps.value);
-          case 4:
-            ret = _context2.sent;
-            if (ret) {
-              _context2.next = 7;
-              break;
-            }
-            return _context2.abrupt("return");
-          case 7:
-            // if exits 'to', we don't change the value,
-            // but let the page to change it by passing the value prop
-            if (!tabProps.to) {
-              this.set('value', tabProps.value);
-              // } else if (this.$router) {
-              // this.$router.push(item.to);
-            } else {
-              window.location.href = tabProps.to;
-            }
-          case 8:
-          case "end":
-            return _context2.stop();
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _this$get = this.get(), beforeChange = _this$get.beforeChange;
+
+              if (!beforeChange) {
+                _context2.next = 7;
+                break;
+              }
+
+              _context2.next = 4;
+              return beforeChange(tabProps.value);
+
+            case 4:
+              ret = _context2.sent;
+
+              if (ret) {
+                _context2.next = 7;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 7:
+              // if exits 'to', we don't change the value,
+              // but let the page to change it by passing the value prop
+              if (!tabProps.to) {
+                this.set('value', tabProps.value); // } else if (this.$router) {
+                // this.$router.push(item.to);
+              } else {
+                window.location.href = tabProps.to;
+              }
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
         }
       }, _callee, this);
     }));
+
     function changeTab(_x) {
       return _changeTab.apply(this, arguments);
     }
+
     return changeTab;
   }();
+
   _proto.remove = function remove(value) {
     this.trigger('remove', value);
   };
+
   return Tabs;
 }(Component);
 Tabs.template = template;

package/components/tabs/index.spec.js

@@ -9,69 +9,87 @@ describe('Tabs', function () {
   });
   it('closable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, tabs, prev, next, icon;
+
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          this.timeout(0);
-          _mount = mount(ClosableDemo), instance = _mount[0], element = _mount[1];
-          element.style.width = '400px';
-          tabs = element.querySelector('.k-tabs'); // add tab
-          instance._add();
-          _context.next = 7;
-          return wait(500);
-        case 7:
-          expect(tabs.outerHTML).to.matchSnapshot();
-          // prev & next
-          prev = tabs.querySelector('.k-tabs-prev');
-          next = tabs.querySelector('.k-tabs-next');
-          prev.click();
-          _context.next = 13;
-          return wait();
-        case 13:
-          expect(tabs.outerHTML).to.matchSnapshot();
-          next.click();
-          _context.next = 17;
-          return wait();
-        case 17:
-          expect(tabs.outerHTML).to.matchSnapshot();
-          // close
-          icon = tabs.querySelector('.k-tab-close');
-          icon.click();
-          _context.next = 22;
-          return wait();
-        case 22:
-          expect(tabs.outerHTML).to.matchSnapshot();
-        case 23:
-        case "end":
-          return _context.stop();
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            this.timeout(0);
+            _mount = mount(ClosableDemo), instance = _mount[0], element = _mount[1];
+            element.style.width = '400px';
+            tabs = element.querySelector('.k-tabs'); // add tab
+
+            instance._add();
+
+            _context.next = 7;
+            return wait(500);
+
+          case 7:
+            expect(tabs.outerHTML).to.matchSnapshot(); // prev & next
+
+            prev = tabs.querySelector('.k-tabs-prev');
+            next = tabs.querySelector('.k-tabs-next');
+            prev.click();
+            _context.next = 13;
+            return wait();
+
+          case 13:
+            expect(tabs.outerHTML).to.matchSnapshot();
+            next.click();
+            _context.next = 17;
+            return wait();
+
+          case 17:
+            expect(tabs.outerHTML).to.matchSnapshot(); // close
+
+            icon = tabs.querySelector('.k-tab-close');
+            icon.click();
+            _context.next = 22;
+            return wait();
+
+          case 22:
+            expect(tabs.outerHTML).to.matchSnapshot();
+
+          case 23:
+          case "end":
+            return _context.stop();
+        }
       }
     }, _callee, this);
   })));
   it('beforeChange', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var ret, _mount2, instance, element, tab;
+
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          ret = false;
-          BeforeChangeDemo.prototype.beforeChange = function () {
-            return ret;
-          };
-          _mount2 = mount(BeforeChangeDemo), instance = _mount2[0], element = _mount2[1];
-          tab = element.querySelector('.k-tab');
-          tab.click();
-          _context2.next = 7;
-          return wait(50);
-        case 7:
-          expect(instance.get('tab')).to.eql('ruleout');
-          ret = true;
-          tab.click();
-          _context2.next = 12;
-          return wait(50);
-        case 12:
-          expect(instance.get('tab')).to.eql('rulein');
-        case 13:
-        case "end":
-          return _context2.stop();
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            ret = false;
+
+            BeforeChangeDemo.prototype.beforeChange = function () {
+              return ret;
+            };
+
+            _mount2 = mount(BeforeChangeDemo), instance = _mount2[0], element = _mount2[1];
+            tab = element.querySelector('.k-tab');
+            tab.click();
+            _context2.next = 7;
+            return wait(50);
+
+          case 7:
+            expect(instance.get('tab')).to.eql('ruleout');
+            ret = true;
+            tab.click();
+            _context2.next = 12;
+            return wait(50);
+
+          case 12:
+            expect(instance.get('tab')).to.eql('rulein');
+
+          case 13:
+          case "end":
+            return _context2.stop();
+        }
       }
     }, _callee2);
   })));

package/components/tabs/index.vdt.js

@@ -5,24 +5,27 @@ import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
+
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
+
   var _this$get = this.get(),
-    className = _this$get.className,
-    children = _this$get.children,
-    vertical = _this$get.vertical,
-    size = _this$get.size,
-    type = _this$get.type;
+      className = _this$get.className,
+      children = _this$get.children,
+      vertical = _this$get.vertical,
+      size = _this$get.size,
+      type = _this$get.type;
+
   var _this$scroll = this.scroll,
-    isScroll = _this$scroll.isScroll,
-    left = _this$scroll.left,
-    enablePrev = _this$scroll.enablePrev,
-    enableNext = _this$scroll.enableNext,
-    prev = _this$scroll.prev,
-    next = _this$scroll.next,
-    scrollRef = _this$scroll.scrollRef,
-    wrapperRef = _this$scroll.wrapperRef;
+      isScroll = _this$scroll.isScroll,
+      left = _this$scroll.left,
+      enablePrev = _this$scroll.enablePrev,
+      enableNext = _this$scroll.enableNext,
+      prev = _this$scroll.prev,
+      next = _this$scroll.next,
+      scrollRef = _this$scroll.scrollRef,
+      wrapperRef = _this$scroll.wrapperRef;
   var classNameObj = (_classNameObj = {
     'k-tabs': true
   }, _classNameObj["k-" + size] = size, _classNameObj['k-vertical'] = vertical, _classNameObj['k-tabs-card'] = type === 'no-border-card', _classNameObj["k-tabs-" + type] = type !== 'default', _classNameObj["k-is-scroll"] = isScroll.value, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);

package/components/tabs/styles.js

@@ -13,30 +13,40 @@ var defaults = deepDefaults({
   get transition() {
     return theme.transition.middle;
   },
+
   get borderColor() {
     return theme.color.border;
   },
+
   borderWidth: '1px',
+
   get border() {
     return tabs.borderWidth + " solid " + tabs.borderColor;
   },
+
   margin: "0 10px",
+
   get color() {
     return theme.color.text;
   },
+
   closeGutter: "8px",
   // vertical
   verticalPadding: "0 25px",
+
   //active
   get activeColor() {
     return theme.color.primary;
   },
+
   highlight: {
     height: "2px",
+
     // get bottom() { return `calc(-${tabs.highlight.height} / 2)` },
     get bgColor() {
       return theme.color.primary;
     }
+
   },
   // scroll
   navigatorWidth: "20px",
@@ -45,12 +55,14 @@ var defaults = deepDefaults({
     get bgColor() {
       return theme.color.bg;
     }
+
   },
   // no-border-card
   noBorderCard: {
     get bgColor() {
       return theme.color.bg;
     },
+
     gutter: "4px"
   }
 }, sizes.reduce(function (memo, size) {
@@ -58,15 +70,19 @@ var defaults = deepDefaults({
     get fontSize() {
       return theme[size].fontSize;
     },
+
     get height() {
       return theme[size].height;
     },
+
     get padding() {
       return "0 " + theme[size].padding;
     },
+
     get closeFontSize() {
       return closeFontSizeMap[size];
     }
+
   };
   return memo;
 }, {}));

package/components/tabs/tab.js

@@ -13,17 +13,23 @@ var typeDefs = {
 };
 export var Tab = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Tab, _Component);
+
   function Tab() {
     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.tabs = inject(TABS);
     return _this;
   }
+
   var _proto = Tab.prototype;
+
   _proto.onClick = function onClick(e) {
     if (this.get('disabled')) {
       e.preventDefault();
@@ -32,12 +38,16 @@ export var Tab = /*#__PURE__*/function (_Component) {
       this.trigger('click', e);
     }
   };
+
   _proto.remove = function remove(e) {
     e.stopPropagation();
     this.tabs.remove(this.get('value'));
   };
+
   return Tab;
 }(Component);
 Tab.template = template;
+
 __decorate([bind], Tab.prototype, "onClick", null);
+
 __decorate([bind], Tab.prototype, "remove", null);