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

package/es/components/switch/styles.js

@@ -1,68 +1,54 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
-import { deepDefaults, sizes } from '../../styles/utils';
+import { deepDefaults, sizes, palette } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
   get transition() {
     return theme.transition.middle;
   },
 
-  bgColor: "#fff",
-  fontSize: "12px",
-
-  get color() {
-    return theme.color.text;
-  },
-
-  checkedBgColor: "#fff",
-  handleBorderRadius: "100%",
-
-  get handleBgColor() {
+  get bgColor() {
     return theme.color.border;
   },
 
-  get border() {
-    return "1px solid " + theme.color.border;
-  },
-
+  fontSize: "12px",
+  color: '#fff',
+  handleBorderRadius: "100%",
+  handleBgColor: '#fff',
   // checked
   checked: {
-    get borderColor() {
-      return theme.color.primary;
-    },
-
-    get color() {
+    get bgColor() {
       return theme.color.primary;
     },
 
-    get bgColor() {
-      return theme.color.primary;
+    get disabledBgColor() {
+      return palette(theme.color.primary, -3);
     }
 
   },
   // default
   default: {
-    width: "36px",
-    height: "18px",
-    padding: "2px"
+    width: "45px",
+    height: "24px",
+    padding: "3px"
   },
   // large
   large: {
-    width: "52px",
-    height: "26px",
-    padding: "2px"
+    width: "58px",
+    height: "30px",
+    padding: "3px"
   },
   // small
   small: {
-    width: "32px",
+    width: "30px",
     height: "16px",
     padding: "2px"
   },
   // mini
   mini: {
-    width: "24px",
-    height: "12px",
+    width: "18px",
+    height: "10px",
     padding: "1px"
   },
 
@@ -79,11 +65,11 @@ setDefault(function () {
   }).switch;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;background:", kswitch.bgColor, ";position:relative;cursor:pointer;user-select:none;overflow:hidden;border:", kswitch.border, ";box-sizing:content-box;input{opacity:0;position:absolute;}.k-switch-bar,.k-switch-off{box-sizing:border-box;}.k-switch-bar{position:absolute;text-align:right;overflow:hidden;}.k-switch-wrapper{display:inline-block;position:relative;z-index:1;border-radius:", kswitch.handleBorderRadius, ";}.k-switch-bar,.k-switch-wrapper{height:100%;background:", kswitch.bgColor, ";transition:all ", kswitch.transition, ";}.k-switch-handle{border-radius:", kswitch.handleBorderRadius, ";background:", kswitch.handleBgColor, ";height:100%;cursor:pointer;transition:left ", kswitch.transition, ";display:inline-block;img{height:100%;visibility:hidden;}}.k-switch-on,.k-switch-off{position:absolute;font-size:", kswitch.fontSize, ";color:", kswitch.color, ";text-align:center;}&.k-dragging{.k-switch-bar,.k-switch-wrapper{background:", kswitch.checkedBgColor, ";transition:background ", kswitch.transition, ";}}&:focus{outline:none;border-color:", kswitch.checked.borderColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;background:", kswitch.bgColor, ";position:relative;cursor:pointer;user-select:none;overflow:hidden;box-sizing:content-box;input{opacity:0;position:absolute;}.k-switch-bar,.k-switch-off{box-sizing:border-box;}.k-switch-bar{position:absolute;text-align:right;overflow:hidden;}.k-switch-wrapper{display:inline-block;position:relative;z-index:1;border-radius:", kswitch.handleBorderRadius, ";}.k-switch-bar,.k-switch-wrapper{height:100%;background:", kswitch.bgColor, ";transition:all ", kswitch.transition, ";}.k-switch-handle{border-radius:", kswitch.handleBorderRadius, ";background:", kswitch.handleBgColor, ";height:100%;cursor:pointer;transition:left ", kswitch.transition, ";display:inline-block;img{height:100%;visibility:hidden;}}.k-switch-on,.k-switch-off{position:absolute;font-size:", kswitch.fontSize, ";color:", kswitch.color, ";text-align:center;}&.k-dragging{.k-switch-bar,.k-switch-wrapper{background:", kswitch.checked.bgColor, ";transition:background ", kswitch.transition, ";}}&:focus{outline:none;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var _kswitch$size = kswitch[size],
         width = _kswitch$size.width,
         height = _kswitch$size.height,
         padding = _kswitch$size.padding;
     return /*#__PURE__*/css("&.k-", size, ",&.k-", size, " .k-switch-on,&.k-", size, " .k-switch-off{width:", width, ";height:", height, ";}&.k-", size, "{border-radius:", height, ";.k-switch-bar{width:", height, ";border-radius:", height, ";}.k-switch-wrapper{padding:", padding, ";}.k-switch-on,.k-switch-off{line-height:", height, ";left:0;}.k-switch-on{padding:0 ", height, " 0 calc(", height, " / 3);}.k-switch-off{padding:0 calc(", height, " / 3) 0 ", height, ";}}");
-  }), "&.k-checked{border-color:", kswitch.checked.borderColor, ";.k-switch-on{color:", kswitch.checked.color, ";}.k-switch-handle{background:", kswitch.checked.bgColor, ";}.k-switch-bar,.k-switch-wrapper{background:", kswitch.checkedBgColor, ";}.k-switch-bar{width:100%;}}&.k-disabled{background:", kswitch.disabledBgColor, ";cursor:not-allowed;.k-switch-bar,.k-switch-wrapper{background:", kswitch.disabledBgColor, ";}}&:not(.k-checked){.k-switch-bar,.k-switch-wrapper{border-top-right-radius:0;border-bottom-right-radius:0;}}");
+  }), "&.k-checked{.k-switch-bar,.k-switch-wrapper{background:", kswitch.checked.bgColor, ";}.k-switch-bar{width:100%;}}&.k-disabled{&,.k-switch-handle{cursor:not-allowed;}&,.k-switch-bar,.k-switch-wrapper{background:", kswitch.disabledBgColor, ";}&.k-checked{&,.k-switch-bar,.k-switch-wrapper{background:", kswitch.checked.disabledBgColor, ";}}}");
 }

package/es/components/table/styles.js

@@ -10,7 +10,12 @@ var defaults = {
   },
 
   // transition: '15000s',
-  border: "1px solid #e5e5e5",
+  border: "1px solid #e2e5e8",
+
+  get borderRadius() {
+    return theme.borderRadius;
+  },
+
   fontSize: "12px",
   bgColor: "#fff",
 
@@ -30,7 +35,7 @@ var defaults = {
     fontSize: "12px",
     fontWeight: "bold",
     textAlign: 'left',
-    height: "30px",
+    height: "40px",
     delimiterHeight: '12px',
     delimiterColor: '#bfbfbf'
   },
@@ -66,7 +71,7 @@ var defaults = {
   sort: {
     iconHeight: "7px",
     gap: "10px",
-    color: "#a6a6a6",
+    color: "#d0d5d9",
     disabledColor: "#ddd"
   },
   expandBgColor: '#fdfcff',
@@ -90,7 +95,7 @@ setDefault(function () {
   }).table;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";border-top:", table.border, ";position:relative;z-index:0;.k-table-wrapper{border-bottom:", table.border, ";overflow:auto;}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";border-bottom:", table.border, ";&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.k-table-title{display:inline-flex;align-items:center;max-width:100%;}.k-table-title-text{flex:1;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.k-fixed-left,.k-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.k-fixed-left:after{right:-11px;}.k-fixed-right:after{left:-11px;}&.k-scroll-left .k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.k-scroll-right .k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.k-scroll-middle{.k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.k-fixed-right+.k-fixed-right:after{display:none;}.k-table-affix-header{position:sticky;top:0;left:0;.k-affix-wrapper{overflow:hidden;}&.k-fixed{position:relative;}}&.k-border,&.k-grid{.k-table-wrapper{border-left:", table.border, ";border-right:", table.border, ";}}&.k-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.k-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.k-table-group{width:", table.group.width, "!important;height:", table.group.width, "!important;margin-left:", table.group.gap, ";position:relative;color:", table.group.color, ";&:hover{color:", theme.color.primary, ";}.k-icon{transition:transform ", table.transition, ";}&.k-dropdown-open .k-icon{transform:rotate(180deg);}}.k-table-check{.k-checkbox,.k-radio{position:relative;top:-1px;}}.k-column-sortable{cursor:pointer;}.k-column-sort{.k-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin-left:", _sortInstanceProperty(table).gap, ";color:", _sortInstanceProperty(table).color, ";}&.k-asc .k-icon.k-desc,&.k-desc .k-icon.k-asc{color:", _sortInstanceProperty(table).disabledColor, ";}}.k-table-spin.k-overlay{z-index:2;}.k-table-empty{text-align:center;}tr.k-expand{td{padding:0;background:#fdfcff;}}&.k-with-expand{tr:not(.k-expand){td{border-bottom:none;}}}.k-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.k-selected td{background:", table.selectedBgColor, ";}.k-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.k-spreaded{.k-table-arrow{transform:rotate(90deg);}}.k-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.k-dragging{opacity:", table.draggingOpacity, ";}.k-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.k-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.k-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.k-table-title{display:inline-flex;align-items:center;max-width:100%;color:", theme.color.lightBlack, ";}.k-table-title-text{flex:1;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.k-fixed-left,.k-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.k-fixed-left:after{right:-11px;}.k-fixed-right:after{left:-11px;}&.k-scroll-left .k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.k-scroll-right .k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.k-scroll-middle{.k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.k-fixed-right+.k-fixed-right:after{display:none;}.k-table-affix-header{position:sticky;top:0;left:0;.k-affix-wrapper{overflow:hidden;}&.k-fixed{position:relative;}}&.k-border,&.k-grid{.k-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.k-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.k-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.k-table-group{width:", table.group.width, "!important;height:", table.group.width, "!important;margin-left:", table.group.gap, ";position:relative;color:", table.group.color, ";&:hover{color:", theme.color.primary, ";}.k-icon{transition:transform ", table.transition, ";}&.k-dropdown-open .k-icon{transform:rotate(180deg);}}.k-table-check{.k-checkbox,.k-radio{position:relative;top:-1px;}}.k-column-sortable{cursor:pointer;}.k-column-sort{.k-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin-left:", _sortInstanceProperty(table).gap, ";color:", _sortInstanceProperty(table).color, ";}&.k-asc .k-icon.k-desc,&.k-desc .k-icon.k-asc{color:", _sortInstanceProperty(table).disabledColor, ";}}.k-table-spin.k-overlay{z-index:2;}.k-table-empty{text-align:center;}tr.k-expand{td{padding:0;background:#fdfcff;}}&.k-with-expand{tr:not(.k-expand){td{border-bottom:none;}}}.k-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.k-selected td{background:", table.selectedBgColor, ";}.k-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.k-spreaded{.k-table-arrow{transform:rotate(90deg);}}.k-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.k-dragging{opacity:", table.draggingOpacity, ";}.k-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.k-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
     return /*#__PURE__*/css(".k-align-", type, "{text-align:", type, ";}");
   }), ">.k-pagination{margin:16px 0;}");
 }

package/es/components/table/useDraggable.js

@@ -1,7 +1,6 @@
-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';
 import { useState } from '../../hooks/useState';
+import { swap } from '../utils';
 export function useDraggable(data) {
   var instance = useInstance();
   var draggingKey = useState(null);
@@ -21,19 +20,13 @@ export function useDraggable(data) {
   }
 
   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 newData = _sliceInstanceProperty(_context = data.value).call(_context);
-
-    var item = _spliceInstanceProperty(newData).call(newData, draggingIndex, 1)[0];
-
-    _spliceInstanceProperty(newData).call(newData, newIndex, 0, item);
-
+    var newData = swap(data.value, draggingIndex, newIndex);
     draggingIndex = newIndex;
     data.set(newData);
   }

package/es/components/table/useStickyScrollbar.js

@@ -2,7 +2,7 @@ import { createRef, useInstance, onMounted, nextTick } from 'intact';
 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/es/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';
 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/es/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';
+    type?: 'default' | 'card' | 'flat-card';
     closable?: boolean;
     beforeChange?: (value: T) => boolean | Promise<boolean>;
 }

package/es/components/tabs/index.js

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

package/es/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';
 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/es/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,
@@ -28,7 +28,7 @@ export default function ($props, $blocks, $__proto__) {
       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);
+  }, _classNameObj["k-size-" + size] = size, _classNameObj['k-vertical'] = vertical, _classNameObj["k-type-" + type] = true, _classNameObj["k-is-scroll"] = isScroll.value, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), [isScroll.value ? _$cc(Button, {
@@ -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]);
 }
 ;

package/es/components/tabs/styles.js

@@ -9,13 +9,19 @@ var closeFontSizeMap = {
   small: '18px',
   mini: '16px'
 };
+var navigatorWidthMap = {
+  large: theme.large.height,
+  default: theme.default.height,
+  small: theme.small.height,
+  mini: theme.mini.height
+};
 var defaults = deepDefaults({
   get transition() {
     return theme.transition.middle;
   },
 
   get borderColor() {
-    return theme.color.border;
+    return '#f0f2f4';
   },
 
   borderWidth: '1px',
@@ -24,46 +30,49 @@ var defaults = deepDefaults({
     return tabs.borderWidth + " solid " + tabs.borderColor;
   },
 
-  margin: "0 10px",
-
   get color() {
     return theme.color.text;
   },
 
-  closeGutter: "8px",
-  // vertical
-  verticalPadding: "0 25px",
-
+  closeGap: "8px",
   //active
-  get activeColor() {
-    return theme.color.primary;
-  },
+  active: {
+    get color() {
+      return theme.color.primary;
+    },
 
-  highlight: {
-    height: "2px",
+    bar: {
+      height: '2px',
 
-    // get bottom() { return `calc(-${tabs.highlight.height} / 2)` },
-    get bgColor() {
-      return theme.color.primary;
-    }
+      get bgColor() {
+        return theme.color.primary;
+      }
 
+    }
   },
-  // scroll
-  navigatorWidth: "20px",
-  // border-card
-  borderCard: {
+  card: {
     get bgColor() {
       return theme.color.bg;
+    },
+
+    get borderRadius() {
+      return theme.borderRadius;
     }
 
   },
-  // no-border-card
-  noBorderCard: {
-    get bgColor() {
-      return theme.color.bg;
+  flatCard: {
+    // get bgColor() { return theme.color.bg },
+    // get borderRadius() { return theme.borderRadius },
+    padding: '2px'
+  },
+  // define size
+  size: {
+    large: {
+      padding: '24px'
     },
-
-    gutter: "4px"
+    default: {
+      padding: '16px'
+    }
   }
 }, sizes.reduce(function (memo, size) {
   memo[size] = {
@@ -76,11 +85,18 @@ var defaults = deepDefaults({
     },
 
     get padding() {
-      return "0 " + theme[size].padding;
+      var _tabs$size$size;
+
+      return "0 " + (((_tabs$size$size = tabs.size[size]) == null ? void 0 : _tabs$size$size.padding) || theme[size].padding);
     },
 
     get closeFontSize() {
       return closeFontSizeMap[size];
+    },
+
+    // scroll
+    get navigatorWidth() {
+      return navigatorWidthMap[size];
     }
 
   };
@@ -93,8 +109,36 @@ setDefault(function () {
   }).tabs;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("border-bottom:", tabs.border, ";position:relative;line-height:1;.k-tab{margin:", tabs.margin, ";cursor:pointer;display:inline-block;text-align:center;color:", tabs.color, ";position:relative;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&:hover,&.k-active{color:", tabs.activeColor, ";}&.k-disabled{color:", theme.color.disabled, ";cursor:not-allowed;}}.k-tab-close{margin-right:-", tabs.closeGutter, ";margin-left:", tabs.closeGutter, ";position:relative;top:-1px;}.k-tabs-active-bar{transition:all ", tabs.transition, ";position:absolute;left:0;height:", tabs.highlight.height, ";background:", tabs.highlight.bgColor, ";bottom:calc(-", tabs.highlight.height, " / 2);}&.k-vertical{display:inline-block;border-bottom:none;border-right:", tabs.border, ";.k-tab{display:block;margin:0;padding:", tabs.verticalPadding, ";}.k-tabs-active-bar{left:auto;top:0;right:calc(-", tabs.highlight.height, " / 2);width:", tabs.highlight.height, ";height:auto;}}&.k-tabs-card{.k-tab{margin:0;}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;border-left:", tabs.border, ";border-right:", tabs.border, ";&:before{content:'';display:block;position:absolute;height:", tabs.highlight.height, ";background:", theme.color.primary, ";top:0;left:-", tabs.borderWidth, ";right:-", tabs.borderWidth, ";}}&.k-vertical{.k-tabs-active-bar{left:0;width:auto;border-left:none;border-right:none;border-top:", tabs.border, ";border-bottom:", tabs.border, ";&:before{width:", tabs.highlight.height, ";left:0;right:auto;bottom:0;height:auto;}}}}&.k-tabs-border-card{border:", tabs.border, ";border-bottom:none;background:", tabs.borderCard.bgColor, ";.k-tab{margin:0;}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;}&.k-vertical{border-right:none;border-bottom:", tabs.border, ";.k-tabs-active-bar{width:auto;height:0;left:0;bottom:0;right:0;}}}&.k-tabs-no-border-card{border-bottom:none;.k-tab{margin-right:", tabs.noBorderCard.gutter, ";&:before{content:'';display:block;position:absolute;background:", tabs.noBorderCard.bgColor, ";top:0;bottom:0;left:0;right:0;z-index:-1;}}.k-tabs-acitve-bar{border:none;&:before{left:0;right:0;}}&.k-vertical{border-right:none;.k-tab:not(:first-of-type){margin:", tabs.noBorderCard.gutter, " 0 0;}.k-tabs-active-bar{border:none;}}}&:not(.k-vertical){.k-tabs-scroll{overflow:hidden;position:relative;padding-bottom:1px;margin-bottom:-1px;}&.k-tabs-border-card,&.k-tabs-no-border-card{.k-tabs-scroll{padding-bottom:0;margin-bottom:0;}}.k-tabs-wrapper{white-space:nowrap;float:left;transition:transform ", tabs.transition, ";}.k-tabs-prev,.k-tabs-next{position:absolute;top:0;width:", tabs.navigatorWidth, "!important;}.k-tabs-prev{left:0;}.k-tabs-next{right:0;}&.k-is-scroll{padding:0 ", tabs.navigatorWidth, ";}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css(makeCommonStyles(), ";", makeScrollStyles(), ";&.k-type-default{", makeDefaultStyles(), ";}&.k-type-card{", makeCardStyles(), ";}&.k-type-flat-card{", makeFlatCardStyles(), ";}");
+}
+
+function makeCommonStyles() {
+  var active = tabs.active;
+  var bar = active.bar;
+  return /*#__PURE__*/css("position:relative;.k-tab{display:inline-flex;cursor:pointer;text-align:center;align-items:center;color:", tabs.color, ";white-space:nowrap;text-overflow:ellipsis;&:hover,&.k-active{color:", active.color, ";}&.k-disabled{color:", theme.color.disabled, ";cursor:not-allowed;}}.k-tab-close{margin-right:-", tabs.closeGap, ";margin-left:", tabs.closeGap, ";color:", theme.color.lightBlack, ";}.k-tabs-active-bar{transition:all ", tabs.transition, ";position:absolute;left:0;height:", bar.height, ";background:", bar.bgColor, ";bottom:0;}&.k-vertical{display:inline-block;.k-tab{display:block;}.k-tabs-active-bar{left:auto;top:0;right:0;width:", bar.height, ";height:auto;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = tabs[size];
-    return "\n                &.k-" + size + " {\n                    .k-tab {\n                        font-size: " + styles.fontSize + ";\n                        height: " + styles.height + ";\n                        line-height: " + styles.height + ";\n                        padding: " + styles.padding + ";\n                    }\n                    .k-tab-close .k-icon {\n                        font-size: " + styles.closeFontSize + ";\n                    }\n                }\n            ";
+    return "\n                &.k-size-" + size + " {\n                    .k-tab {\n                        font-size: " + styles.fontSize + ";\n                        height: " + styles.height + ";\n                        line-height: " + styles.height + ";\n                        padding: " + styles.padding + ";\n                    }\n                    .k-tab-close .k-icon {\n                        font-size: " + styles.closeFontSize + ";\n                    }\n                    &:not(.k-vertical).k-is-scroll {\n                        padding: 0 " + styles.navigatorWidth + ";\n                    }\n                    &.k-vertical.k-is-scroll {\n                        padding: " + styles.navigatorWidth + " 0;\n                    }\n                }\n            ";
   }), ";");
+}
+
+function makeScrollStyles() {
+  return /*#__PURE__*/css("overflow:hidden;.k-tabs-scroll{overflow:hidden;position:relative;padding-bottom:1px;margin-bottom:-1px;}&.k-type-card,&.k-type-flat-card{.k-tabs-scroll{padding-bottom:0;margin-bottom:0;}}.k-tabs-wrapper{white-space:nowrap;transition:transform ", tabs.transition, ";}.k-tabs-prev,.k-tabs-next{position:absolute;&:not(.k-disabled){box-shadow:", theme.boxShadow, ";}}&:not(.k-vertical){.k-tabs-wrapper{float:left;}.k-tabs-prev,.k-tabs-next{top:0;}.k-tabs-prev{left:0;}.k-tabs-next{right:0;}}&.k-vertical{&,.k-tabs-scroll{height:100%;}.k-tabs-prev,.k-tabs-next{width:100%!important;left:0;}.k-tabs-prev{top:0;}.k-tabs-next{bottom:0;}}");
+}
+
+function makeDefaultStyles() {
+  return /*#__PURE__*/css("border-bottom:", tabs.border, ";&.k-vertical{border-bottom:none;border-right:", tabs.border, ";}");
+}
+
+function makeCardCommonStyles() {
+  return /*#__PURE__*/css("border-radius:", tabs.card.borderRadius, ";background-color:", tabs.card.bgColor, ";.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;}");
+}
+
+function makeCardStyles() {
+  var borderRadius = tabs.card.borderRadius;
+  return /*#__PURE__*/css(makeCardCommonStyles(), ";.k-tabs-active-bar{border-radius:", borderRadius, " ", borderRadius, " 0px 0px;box-shadow:", theme.boxShadow, ";}&.k-vertical{.k-tabs-active-bar{width:100%;left:0;border-radius:", borderRadius, " 0px 0px ", borderRadius, ";}}");
+}
+
+function makeFlatCardStyles() {
+  var padding = tabs.flatCard.padding;
+  return /*#__PURE__*/css(makeCardCommonStyles(), ";padding:0 ", padding, ";.k-tabs-active-bar{top:", padding, ";height:calc(100% - ", padding, " * 2);border-radius:", tabs.card.borderRadius, ";}&.k-vertical{padding:", padding, " 0;.k-tabs-active-bar{left:", padding, ";width:calc(100% - ", padding, " * 2);}}");
 }

package/es/components/tabs/useScroll.d.ts

@@ -1,6 +1,6 @@
 export declare function useScroll(): {
     isScroll: import("../../hooks/useState").State<boolean>;
-    left: import("../../hooks/useState").State<number>;
+    offset: import("../../hooks/useState").State<number>;
     enablePrev: import("../../hooks/useState").State<boolean>;
     enableNext: import("../../hooks/useState").State<boolean>;
     prev: () => void;