@king-design/vue 2.1.3 → 2.1.4

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,20 +20,16 @@ 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;
       });
@@ -45,29 +41,23 @@ 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,26 +3,20 @@ 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,
@@ -32,17 +26,14 @@ 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;
@@ -50,9 +41,7 @@ export function loopDataWithChildrenKey(data, childrenKey, cb, shouldBreak) {
         }
       }
     }
-
     return false;
   };
-
   loop(data, 0, null);
 }

package/components/table/useWidth.js

@@ -16,25 +16,21 @@ 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);
           }
@@ -42,12 +38,10 @@ 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,
@@ -55,42 +49,35 @@ 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;
@@ -98,7 +85,6 @@ export function useWidth(scrollRef, getColumns) {
         }
       });
     });
-
     if (shouldUpdate) {
       instance.forceUpdate(function () {
         // check again because it may affect other columns
@@ -110,14 +96,12 @@ 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,98 +17,76 @@ 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,87 +9,69 @@ 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,27 +5,24 @@ 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,40 +13,30 @@ 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",
@@ -55,14 +45,12 @@ 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) {
@@ -70,19 +58,15 @@ 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,23 +13,17 @@ 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();
@@ -38,16 +32,12 @@ 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);