@king-design/react 3.0.0-beta.0 → 3.0.0-beta.1

package/components/table/table.vdt.js

@@ -3,7 +3,7 @@ import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort"
 import { createElementVNode as _$ce, map as _$ma, className as _$cn, createUnknownComponentVNode as _$cc, createVNode as _$cv, noop as _$no, extend as _$ex, EMPTY_OBJ as _$em } from 'intact-react';
 import { eachChildren } from '../utils';
 import { makeStyles } from './styles';
-import { isStringOrNumber, isNull } from 'intact-shared';
+import { isStringOrNumber, isNull, isObject, EMPTY_OBJ } from 'intact-shared';
 import { getClassAndStyleForFixed } from './useFixedColumns';
 import { Affix } from '../affix';
 import { TableRow } from './row';
@@ -19,6 +19,7 @@ import { Tooltip } from '../tooltip';
 import { AllCheckedStatus } from './useChecked';
 import { context as ResizableContext } from './useResizable';
 import { context as FixedColumnsContext } from './useFixedColumns';
+import { Pagination } from '../pagination';
 var _$tmp0 = {
   'width': '40'
 };
@@ -58,7 +59,9 @@ export default function ($props, $blocks, $__proto__) {
       showIndeterminate = _this$get.showIndeterminate,
       resizable = _this$get.resizable,
       draggable = _this$get.draggable,
-      _animation = _this$get.animation;
+      _animation = _this$get.animation,
+      hideHeader = _this$get.hideHeader,
+      pagination = _this$get.pagination;
 
   var animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
 
@@ -112,8 +115,7 @@ export default function ($props, $blocks, $__proto__) {
       onChangeChecked = _this$checked.onChangeChecked;
   var allCheckedStatus = getAllCheckedStatus();
   var offsetMap = getOffsetMap();
-
-  var thead = _$cc(TableContext.Provider, {
+  var thead = hideHeader ? null : _$cc(TableContext.Provider, {
     'value': checkType,
     'children': _$cc(GroupContext.Provider, {
       'value': {
@@ -157,7 +159,6 @@ export default function ($props, $blocks, $__proto__) {
       })
     })
   });
-
   var getAllKeys = this.disableRow.getAllKeys;
   var getGrid = this.merge.getGrid;
   var allStatus = getAllStatus();
@@ -306,6 +307,11 @@ export default function ($props, $blocks, $__proto__) {
       scrollbarRef = _this$stickyScrollbar.scrollbarRef,
       onScrollbarScroll = _this$stickyScrollbar.onScroll,
       tableActualWidth = _this$stickyScrollbar.tableActualWidth;
+  var _this$pagination = this.pagination,
+      pageValue = _this$pagination.value,
+      pageLimit = _this$pagination.limit,
+      onPageChange = _this$pagination.onChange,
+      paginationRef = _this$pagination.paginationRef;
   return _$ce(2, 'div', [_$ce(2, 'div', [!isNull(stickHeader.value) ? _$cc(Affix, {
     'top': stickHeader.value,
     'exclude': excludeStickHeader,
@@ -321,7 +327,15 @@ export default function ($props, $blocks, $__proto__) {
     }
   }, null, tableRef)], 0, 'k-table-wrapper', {
     'style': style
-  }, null, scrollRef), _$cc(Transition, {
+  }, null, scrollRef), pagination ? _$cc(Pagination, _extends({
+    'ref': paginationRef,
+    'total': data ? data.length : 0,
+    'size': 'small'
+  }, isObject(pagination) ? pagination : EMPTY_OBJ, {
+    'value': pageValue.value,
+    'limit': pageLimit.value,
+    'ev-change': onPageChange
+  }), null, paginationRef) : undefined, _$cc(Transition, {
     'name': 'k-fade',
     'children': loading ? _$cc(Spin, _$tmp1) : undefined
   }), !isNull(stickScrollbar.value) ? _$cc(Affix, {

package/components/table/useChecked.d.ts

@@ -1,3 +1,4 @@
+import { State } from '../../hooks/useState';
 import type { TableRowKey } from './';
 import type { TableGrid } from './useMerge';
 import type { useTree } from './useTree';
@@ -12,12 +13,12 @@ export declare enum AllCheckedStatus {
     Indeterminate = 1,
     None = 2
 }
-export declare function useChecked(getEnableKeys: () => TableRowKey[], getAllKeys: () => TableRowKey[], isDisabledKey: (key: TableRowKey) => boolean, getGrid: () => TableGrid, loopData: ReturnType<typeof useTree>['loopData']): {
+export declare function useChecked(getEnableKeys: () => TableRowKey[], getAllKeys: () => TableRowKey[], isDisabledKey: (key: TableRowKey) => boolean, getGrid: () => TableGrid, loopData: ReturnType<typeof useTree>['loopData'], data: State<any[] | undefined>): {
     isChecked: (key: TableRowKey) => boolean;
     getAllCheckedStatus: () => AllCheckedStatus;
     toggleCheckedAll: (v: boolean) => void;
     getAllStatus: () => RowStatus[];
-    onChangeChecked: (rowIndex: number, v: boolean) => void;
+    onChangeChecked: (rowIndex: number, v: boolean, key: TableRowKey) => void;
 };
 export declare function inArray<T>(arr: T[] | undefined, v: T): boolean;
 export declare function addOrRemove(keys: TableRowKey[], key: TableRowKey, isAdd: boolean): void;

package/components/table/useChecked.js

@@ -2,6 +2,7 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/i
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
 import { useInstance } from 'intact-react';
+import { watchState } from '../../hooks/useState';
 import { toggleArray } from '../utils';
 export var AllCheckedStatus;
 
@@ -11,7 +12,7 @@ export var AllCheckedStatus;
   AllCheckedStatus[AllCheckedStatus["None"] = 2] = "None";
 })(AllCheckedStatus || (AllCheckedStatus = {}));
 
-export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, loopData) {
+export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, loopData, data) {
   var instance = useInstance();
   var allStatus = [];
 
@@ -21,7 +22,10 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
 
   function toggleChecked(key, rowIndex) {
     if (instance.get('checkType') === 'checkbox') {
-      instance.set('checkedKeys', toggleArray(instance.get('checkedKeys'), key));
+      instance.set('checkedKeys', toggleArray(instance.get('checkedKeys'), key)); // trigger check event for checkbox,
+      // radio check event trigger in onChangeChecked function
+
+      triggerEvent(isChecked(key), key, rowIndex);
     } else {
       if (isChecked(key)) return;
       var grid = getGrid();
@@ -34,7 +38,7 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
         }
       }
 
-      onChangeChecked(rowIndex, true);
+      onChangeChecked(rowIndex, true, key);
     }
   }
 
@@ -61,6 +65,7 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
 
   function toggleCheckedAll(v) {
     instance.set('checkedKeys', getCheckedAllOrUncheckedAllKeys(v));
+    instance.trigger(v ? 'checkAll' : 'uncheckAll');
   }
   /**
    * keep the original keys which don't exist in the enableKeys,
@@ -92,12 +97,11 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
     allStatus = [];
 
     var _instance$get2 = instance.get(),
-        data = _instance$get2.data,
         rowKey = _instance$get2.rowKey,
         checkType = _instance$get2.checkType,
         merge = _instance$get2.merge;
 
-    if (!data || !data.length) return;
+    if (!data.value || !data.value.length) return;
     var allKeys = getAllKeys();
     allKeys.forEach(function (key) {
       var disabled = isDisabledKey(key);
@@ -161,7 +165,7 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
     }
   }
 
-  function onChangeChecked(rowIndex, v) {
+  function onChangeChecked(rowIndex, v, key) {
     var _context;
 
     // should check or uncheck all grouped rows
@@ -172,9 +176,9 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
 
     if (checkType === 'radio') {
       for (var i = 0; i < checkedKeys.length; i++) {
-        var key = checkedKeys[i]; // FIXME: should ignore the disabled status, if we remove the radio keys
+        var _key = checkedKeys[i]; // FIXME: should ignore the disabled status, if we remove the radio keys
 
-        if (isDisabledKey(key)) continue;
+        if (isDisabledKey(_key)) continue;
 
         _spliceInstanceProperty(checkedKeys).call(checkedKeys, i, 1);
 
@@ -189,27 +193,34 @@ export function useChecked(getEnableKeys, getAllKeys, isDisabledKey, getGrid, lo
     if ((rowspan = grid[rowIndex]) && (rowspan = rowspan[0]) && (rowspan = rowspan.spans) && (rowspan = rowspan.rowspan) && rowspan > 1) {
       for (var _i = rowIndex; _i < rowspan + rowIndex; _i++) {
         var status = allStatus[_i];
-        var _key = allKeys[_i];
+        var _key2 = allKeys[_i];
 
         if (!status.disabled) {
-          addOrRemove(checkedKeys, _key, v);
+          addOrRemove(checkedKeys, _key2, v);
         }
       }
     } else {
       addOrRemove(checkedKeys, allKeys[rowIndex], v);
     }
 
-    instance.set('checkedKeys', checkedKeys);
+    instance.set('checkedKeys', checkedKeys); // onChangeChecked will be called in clickRow and check in Row component
+
+    triggerEvent(v, key, rowIndex);
   }
 
   function getAllStatus() {
     return allStatus;
   }
 
+  function triggerEvent(isChecked, key, rowIndex) {
+    instance.trigger(isChecked ? 'checkRow' : 'uncheckRow', data.value[rowIndex], rowIndex, key);
+  }
+
   instance.on('$receive:children', updateAllCheckedStatus);
   instance.on('$change:checkedKeys', updateAllCheckedStatus); // for draggable
 
-  instance.on('$change:data', updateAllCheckedStatus);
+  watchState(data, updateAllCheckedStatus); // instance.on('$change:data', updateAllCheckedStatus);
+
   instance.on('clickRow', function (data, index, key) {
     if (instance.get('rowCheckable') && instance.get('checkType') !== 'none') {
       toggleChecked(key, index);

package/components/table/useDisableRow.d.ts

@@ -1,6 +1,7 @@
 import type { TableRowKey } from './table';
 import type { useTree } from './useTree';
-export declare function useDisableRow(loopData: ReturnType<typeof useTree>['loopData']): {
+import { State } from '../../hooks/useState';
+export declare function useDisableRow(loopData: ReturnType<typeof useTree>['loopData'], data: State<any[] | undefined>): {
     isDisabled: (data: any, index: number, key: TableRowKey) => boolean;
     getEnableKeys: () => TableRowKey[];
     isDisabledKey: (key: TableRowKey) => boolean;

package/components/table/useDisableRow.js

@@ -1,5 +1,6 @@
 import { useInstance } from 'intact-react';
-export function useDisableRow(loopData) {
+import { watchState } from '../../hooks/useState';
+export function useDisableRow(loopData, data) {
   var instance = useInstance();
   var enabledKeys = [];
   var disabledKeys = [];
@@ -45,9 +46,8 @@ export function useDisableRow(loopData) {
     return allKeys;
   }
 
-  instance.on('$receive:children', setDisabledKeys); // for draggable
-
-  instance.on('$change:data', setDisabledKeys);
+  instance.on('$receive:children', setDisabledKeys);
+  watchState(data, setDisabledKeys);
   return {
     isDisabled: isDisabled,
     getEnableKeys: getEnableKeys,

package/components/table/useDraggable.d.ts

@@ -1,8 +1,9 @@
 import type { TableRowKey } from './table';
+import { State } from '../../hooks/useState';
 import type { TableRow } from './row';
-export declare function useDraggable(): {
+export declare function useDraggable(data: State<unknown[] | undefined>): {
     onRowDragStart: (e: MouseEvent, tableRow: TableRow) => void;
     onRowDragOver: (e: MouseEvent, tableRow: TableRow) => void;
     onRowDragEnd: (e: MouseEvent, tableRow: TableRow) => void;
-    draggingKey: import("../../hooks/useState").State<TableRowKey | null>;
+    draggingKey: State<TableRowKey | null>;
 };

package/components/table/useDraggable.js

@@ -1,8 +1,7 @@
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
-import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
 import { useInstance, nextTick } from 'intact-react';
 import { useState } from '../../hooks/useState';
-export function useDraggable() {
+import { swap } from '../utils';
+export function useDraggable(data) {
   var instance = useInstance();
   var draggingKey = useState(null);
   var originIndex;
@@ -13,7 +12,7 @@ export function useDraggable() {
     draggingIndex = originIndex = tableRow.get('index');
     var key = tableRow.get('key');
     draggingKey.set(key);
-    originData = instance.get('data');
+    originData = data.value;
     instance.trigger('dragstart', {
       key: key,
       from: draggingIndex
@@ -21,27 +20,24 @@ export function useDraggable() {
   }
 
   function onRowDragOver(e, tableRow) {
-    var _context;
-
     e.preventDefault();
     e.stopPropagation();
+    if (draggingKey.value === null) return;
     var newIndex = tableRow.get('index');
     if (newIndex === draggingIndex) return; // swap data
 
-    var data = _sliceInstanceProperty(_context = instance.get('data')).call(_context);
-
-    var item = _spliceInstanceProperty(data).call(data, draggingIndex, 1)[0];
-
-    _spliceInstanceProperty(data).call(data, newIndex, 0, item);
-
+    var newData = swap(data.value, draggingIndex, newIndex);
     draggingIndex = newIndex;
-    instance.set('data', data);
+    data.set(newData);
   }
 
   function onRowDragEnd(e, tableRow) {
-    e.preventDefault();
-    instance.set('data', originData);
+    e.preventDefault(); // revert to origin data, then set to new data to trigger animation
+
+    var newData = data.value;
+    data.set(originData);
     nextTick(function () {
+      data.set(newData);
       draggingKey.set(null);
       instance.trigger('dragend', {
         key: tableRow.get('key'),

package/components/table/useGroup.js

@@ -12,6 +12,9 @@ export function useGroup() {
   var instance = useInstance();
   var keywords = useState('');
   var filteredGroup = useState(instance.get('group'));
+  instance.on('$receive:group', function (group) {
+    return filteredGroup.set(group);
+  });
 
   function onSelect(value, groupValue, onChange) {
     var _instance$get = instance.get(),

package/components/table/useMerge.d.ts

@@ -1,5 +1,6 @@
 import { Props } from 'intact-react';
 import type { TableColumnProps } from './column';
+import { State } from '../../hooks/useState';
 export declare type TableMerge<T = any, CheckType = 'checkbox'> = (row: T, column: CheckType extends 'none' ? Props<TableColumnProps> : Props<TableColumnProps> | null, rowIndex: number, columnIndex: number) => TableMergeConfig | undefined;
 export declare type TableMergeConfig = {
     colspan?: number;
@@ -10,6 +11,6 @@ export declare type TableGridItem = {
     spans: TableMergeConfig | undefined;
 };
 export declare type TableGrid = TableGridItem[][];
-export declare function useMerge(getCols: () => Props<TableColumnProps>[]): {
+export declare function useMerge(getCols: () => Props<TableColumnProps>[], data: State<unknown[] | undefined>): {
     getGrid: () => TableGrid;
 };

package/components/table/useMerge.js

@@ -1,5 +1,6 @@
 import { useInstance } from 'intact-react';
-export function useMerge(getCols) {
+import { watchState } from '../../hooks/useState';
+export function useMerge(getCols, data) {
   var instance = useInstance();
   var grid = [];
 
@@ -8,12 +9,11 @@ export function useMerge(getCols) {
 
     var _instance$get = instance.get(),
         merge = _instance$get.merge,
-        data = _instance$get.data,
         checkType = _instance$get.checkType;
 
-    if (!data || !data.length || !merge) return;
+    if (!data.value || !data.value.length || !merge) return;
     var cols = getCols();
-    data.forEach(function (data, rowIndex) {
+    data.value.forEach(function (data, rowIndex) {
       var currentRow = [];
       grid.push(currentRow);
       var columnIndexOffset = 0;
@@ -71,6 +71,7 @@ export function useMerge(getCols) {
   }
 
   instance.on('$receive:children', handleSpans);
+  watchState(data, handleSpans);
   return {
     getGrid: getGrid
   };

package/components/table/usePagination.d.ts

@@ -0,0 +1,8 @@
+import { Pagination, PaginationChangeData } from '../pagination';
+export declare function usePagination(): {
+    data: import("../../hooks/useState").State<any[] | undefined>;
+    value: import("../../hooks/useState").State<number>;
+    limit: import("../../hooks/useState").State<number>;
+    onChange: (data: PaginationChangeData) => void;
+    paginationRef: import('intact-react').RefObject<Pagination>;
+};

package/components/table/usePagination.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import { useInstance, createRef } from 'intact-react';
+import { useState } from '../../hooks/useState';
+import { Pagination } from '../pagination';
+import { isObject } from 'intact-shared';
+import { useReceive } from '../../hooks/useReceive';
+var defaultPagination = Pagination.defaults();
+export function usePagination() {
+  var instance = useInstance();
+  var data = useState(instance.get('data'));
+  var value = useState(defaultPagination.value);
+  var limit = useState(defaultPagination.limit);
+  var paginationRef = createRef(); // for unit test
+
+  useReceive(['data', 'pagination'], function () {
+    handleData();
+  });
+
+  function handleData() {
+    var _instance$get = instance.get(),
+        _data = _instance$get.data,
+        pagination = _instance$get.pagination;
+
+    if (!_data) {
+      data.set(undefined);
+      return;
+    }
+
+    if (!pagination) {
+      data.set(_data);
+      return;
+    }
+
+    if (isObject(pagination)) {
+      if (pagination.value) {
+        value.set(pagination.value);
+      }
+
+      if (pagination.limit) {
+        limit.set(pagination.limit);
+      }
+    }
+
+    updateDataByPage();
+  }
+
+  function updateDataByPage() {
+    var _instance$get2 = instance.get(),
+        _data = _instance$get2.data;
+
+    var index = (value.value - 1) * limit.value;
+    data.set(_sliceInstanceProperty(_data).call(_data, index, index + limit.value));
+  }
+
+  function onChange(data) {
+    var _instance$get3 = instance.get(),
+        pagination = _instance$get3.pagination;
+
+    value.set(data.value);
+    limit.set(data.limit);
+    updateDataByPage();
+
+    if (isObject(pagination)) {
+      instance.set('pagination', _extends({}, pagination, {
+        value: value.value,
+        limit: limit.value
+      }));
+    }
+
+    instance.trigger('changePage', data);
+  }
+
+  return {
+    data: data,
+    value: value,
+    limit: limit,
+    onChange: onChange,
+    paginationRef: paginationRef
+  };
+}

package/components/table/useStickyScrollbar.js

@@ -2,7 +2,7 @@ import { createRef, useInstance, onMounted, nextTick } from 'intact-react';
 import { useState } from '../../hooks/useState';
 import { isStringOrNumber, isNull } from 'intact-shared';
 import { debounce } from '../utils';
-import { useResizeObserver } from './useResizeObserver';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll) {
   var scrollRef = _ref.scrollRef,
       callbacks = _ref.callbacks;
@@ -14,7 +14,7 @@ export function useStickyScrollbar(elementRef, _ref, tableRef, tableScroll) {
   instance.on('$receive:stickScrollbar', function (v) {
     stick.set(v === true ? 0 : isStringOrNumber(v) ? +v : null);
   });
-  useResizeObserver(scrollRef, setTableActualWidth);
+  useResizeObserver(scrollRef, setTableActualWidth, true);
   onMounted(function () {
     setTableActualWidth();
   });

package/components/table/useTree.d.ts

@@ -1,5 +1,6 @@
 import type { TableRowKey } from './table';
-export declare function useTree(): {
+import { State } from '../../hooks/useState';
+export declare function useTree(data: State<any[] | undefined>): {
     isSpreaded: (key: TableRowKey) => boolean;
     toggleSpreadRow: (key: TableRowKey) => void;
     loopData: <T>(cb: (value: any, index: number, level: number, meta: T | null) => T, shouldBreak?: boolean) => void;

package/components/table/useTree.js

@@ -1,7 +1,7 @@
 import { useInstance } from 'intact-react';
 import { inArray } from './useChecked';
 import { toggleArray } from '../utils';
-export function useTree() {
+export function useTree(data) {
   var instance = useInstance();
 
   function isSpreaded(key) {
@@ -18,10 +18,9 @@ export function useTree() {
     }
 
     var _instance$get = instance.get(),
-        childrenKey = _instance$get.childrenKey,
-        data = _instance$get.data;
+        childrenKey = _instance$get.childrenKey;
 
-    loopDataWithChildrenKey(data, childrenKey, cb, shouldBreak);
+    loopDataWithChildrenKey(data.value, childrenKey, cb, shouldBreak);
   }
 
   return {

package/components/table/useWidth.js

@@ -3,7 +3,7 @@ import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
 import { useInstance, onMounted, createRef } from 'intact-react';
 import { useState } from '../../hooks/useState';
 import { scrollbarWidth } from '../position';
-import { useResizeObserver } from './useResizeObserver';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 var hasLocalStorage = typeof localStorage !== 'undefined';
 export function useWidth(scrollRef, getColumns) {
   var instance = useInstance();
@@ -16,7 +16,7 @@ export function useWidth(scrollRef, getColumns) {
   });
   useResizeObserver(scrollRef, function () {
     return checkTableWidth(false);
-  }); // if exist widthStoreKey, we get the default width from localStorage
+  }, true); // if exist widthStoreKey, we get the default width from localStorage
 
   function initWidthFromStore() {
     var _instance$get = instance.get(),

package/components/tabs/index.d.ts

@@ -7,7 +7,7 @@ export interface TabsProps<T = any> {
     value?: T;
     vertical?: boolean;
     size?: Sizes;
-    type?: 'default' | 'card' | 'border-card' | 'no-border-card' | 'flat-card';
+    type?: 'default' | 'card' | 'flat-card';
     closable?: boolean;
     beforeChange?: (value: T) => boolean | Promise<boolean>;
 }

package/components/tabs/index.js

@@ -13,7 +13,7 @@ var typeDefs = {
   value: null,
   vertical: Boolean,
   size: sizes,
-  type: ['default', 'card', 'border-card', 'no-border-card', 'flat-card'],
+  type: ['default', 'card', 'flat-card'],
   closable: Boolean,
   beforeChange: Function
 };

package/components/tabs/index.spec.js

@@ -1,8 +1,12 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import ClosableDemo from '~/components/tabs/demos/closable';
 import BeforeChangeDemo from '~/components/tabs/demos/beforeChange';
 import { mount, unmount, wait } from '../../test/utils';
+import { Tabs, Tab } from './';
+import { Component } from 'intact-react';
 describe('Tabs', function () {
   afterEach(function () {
     return unmount();
@@ -93,4 +97,67 @@ describe('Tabs', function () {
       }
     }, _callee2);
   })));
+  it('vertical scroll', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount3, instance, element, prev, next;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context3;
+
+                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(_context3 = [this]).call(_context3, args)) || this;
+                _this.Tabs = Tabs;
+                _this.Tab = Tab;
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  tab: 0
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { Tabs, Tab } = this;\n                <Tabs v-model=\"tab\" vertical style=\"height: 200px;\">\n                    <Tab v-for={new Array(10).fill(0)} value={$key}>\n                        {$key}\n                    </Tab>\n                </Tabs>\n            ";
+            _mount3 = mount(Demo), instance = _mount3[0], element = _mount3[1];
+            _context4.next = 5;
+            return wait(100);
+
+          case 5:
+            expect(element.innerHTML).to.matchSnapshot();
+            prev = element.querySelector('.k-tabs-prev');
+            next = element.querySelector('.k-tabs-next');
+            next.click();
+            _context4.next = 11;
+            return wait();
+
+          case 11:
+            expect(element.innerHTML).to.matchSnapshot();
+            prev.click();
+            _context4.next = 15;
+            return wait();
+
+          case 15:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 16:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee3);
+  })));
 });

package/components/tabs/index.vdt.js

@@ -19,7 +19,7 @@ export default function ($props, $blocks, $__proto__) {
 
   var _this$scroll = this.scroll,
       isScroll = _this$scroll.isScroll,
-      left = _this$scroll.left,
+      offset = _this$scroll.offset,
       enablePrev = _this$scroll.enablePrev,
       enableNext = _this$scroll.enableNext,
       prev = _this$scroll.prev,
@@ -39,12 +39,12 @@ export default function ($props, $blocks, $__proto__) {
     'size': size,
     'disabled': !enablePrev.value,
     'ev-click': prev,
-    'children': _$ce(2, 'i', null, 1, 'ion-ios-arrow-left')
+    'children': _$ce(2, 'i', null, 1, _$cn(vertical ? "ion-ios-arrow-up" : "ion-ios-arrow-left"))
   }, 'prev') : undefined, _$ce(2, 'div', _$ce(2, 'div', [children, _$ce(2, 'div', null, 1, 'k-tabs-active-bar', {
     'style': this.activeBar.value
   })], 0, 'k-tabs-wrapper', {
     'style': {
-      transform: "translateX(" + left.value + "px)"
+      transform: vertical ? "translateY(" + offset.value + "px)" : "translateX(" + offset.value + "px)"
     }
   }, null, wrapperRef), 2, 'k-tabs-scroll c-clearfix', null, null, scrollRef), isScroll.value ? _$cc(Button, {
     'className': 'k-tabs-next',
@@ -54,7 +54,7 @@ export default function ($props, $blocks, $__proto__) {
     'size': size,
     'disabled': !enableNext.value,
     'ev-click': next,
-    'children': _$ce(2, 'i', null, 1, 'ion-ios-arrow-right')
+    'children': _$ce(2, 'i', null, 1, _$cn(vertical ? "ion-ios-arrow-down" : "ion-ios-arrow-right"))
   }, 'next') : undefined]);
 }
 ;