@king-design/intact 2.0.15 → 3.0.0-beta.0

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'
   },
@@ -53,6 +58,12 @@ var defaults = {
 
     get activeColor() {
       return theme.color.primary;
+    },
+
+    headerPadding: "8px",
+
+    get headerBorder() {
+      return "1px solid " + theme.color.bg;
     }
 
   },
@@ -60,7 +71,7 @@ var defaults = {
   sort: {
     iconHeight: "7px",
     gap: "10px",
-    color: "#a6a6a6",
+    color: "#d0d5d9",
     disabledColor: "#ddd"
   },
   expandBgColor: '#fdfcff',
@@ -84,10 +95,10 @@ 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, ";}");
   }), ";");
 }
 export function makeGroupMenuStyles() {
-  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}");
+  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}.k-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}");
 }

package/es/components/table/useGroup.d.ts

@@ -1,3 +1,4 @@
+import type { TableColumnGroupItem } from './column';
 declare type ContextValue = {
     groupValue: any;
     onChange: (key: string, groupValue: any) => void;
@@ -10,5 +11,7 @@ export declare function useGroup(): {
     onSelect: (value: any, groupValue: any, onChange: ContextValue['onChange']) => void;
     isChecked: (value: any, groupValue: any) => any;
     getGroupText: (groupValue: any) => string | null;
+    keywords: import("../../hooks/useState").State<string>;
+    filteredGroup: import("../../hooks/useState").State<TableColumnGroupItem[] | undefined>;
 };
 export {};

package/es/components/table/useGroup.js

@@ -1,13 +1,17 @@
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
 import { useInstance } from 'intact';
 import { isNullOrUndefined } from 'intact-shared';
 import { toggleArray } from '../utils';
 import { createContext } from '../context';
+import { useState, watchState } from '../../hooks/useState';
 export var context = createContext();
 export function useGroup() {
   var instance = useInstance();
+  var keywords = useState('');
+  var filteredGroup = useState(instance.get('group'));
 
   function onSelect(value, groupValue, onChange) {
     var _instance$get = instance.get(),
@@ -60,9 +64,28 @@ export function useGroup() {
     return null;
   }
 
+  watchState(keywords, function (v) {
+    var _instance$get4 = instance.get(),
+        _instance$get4$group = _instance$get4.group,
+        group = _instance$get4$group === void 0 ? [] : _instance$get4$group;
+
+    v = _trimInstanceProperty(v).call(v);
+
+    if (!v) {
+      filteredGroup.set(group);
+    } else {
+      filteredGroup.set(_filterInstanceProperty(group).call(group, function (item) {
+        var _context2, _context3;
+
+        return _includesInstanceProperty(_context2 = String(item.label)).call(_context2, v) || _includesInstanceProperty(_context3 = String(item.value)).call(_context3, v);
+      }));
+    }
+  });
   return {
     onSelect: onSelect,
     isChecked: isChecked,
-    getGroupText: getGroupText
+    getGroupText: getGroupText,
+    keywords: keywords,
+    filteredGroup: filteredGroup
   };
 }

package/es/components/table/useSortable.d.ts

@@ -3,5 +3,7 @@ export declare const context: {
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
 };
 export declare function useSortable(): {
-    onChange: (key: string) => void;
+    onChange: (key: string, event: Event & {
+        _ignoreSortable?: boolean;
+    }) => void;
 };

package/es/components/table/useSortable.js

@@ -8,7 +8,10 @@ export function useSortable() {
 
   var count = 0;
 
-  function onChange(key) {
+  function onChange(key, event) {
+    // ignore when click group dropdown menu
+    if (event._ignoreSortable) return;
+
     var sort = _extends({}, instance.get('sort'));
 
     if (sort.key === key) {

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' | 'border-card' | 'no-border-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', 'border-card', 'no-border-card', 'flat-card'],
   closable: Boolean,
   beforeChange: Function
 };

package/es/components/tabs/index.vdt.js

@@ -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, {

package/es/components/tabs/styles.js

@@ -1,4 +1,7 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, sizes } from '../../styles/utils';
@@ -24,32 +27,28 @@ 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",
+  // scroll
+  navigatorWidth: "20px",
   //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: {
     get bgColor() {
@@ -61,9 +60,17 @@ var defaults = deepDefaults({
   noBorderCard: {
     get bgColor() {
       return theme.color.bg;
-    },
+    }
 
-    gutter: "4px"
+  },
+  // define size
+  size: {
+    large: {
+      padding: '24px'
+    },
+    default: {
+      padding: '16px'
+    }
   }
 }, sizes.reduce(function (memo, size) {
   memo[size] = {
@@ -76,7 +83,9 @@ 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() {
@@ -93,8 +102,45 @@ 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{", makeDefaultStyles(), " ", makeCardStyles(), ";}&.k-type-border-card{", makeBorderCardStyles(), ";}&.k-type-no-border-card{", makeNoBorderCardStyles(), ";}");
+}
+
+function makeCommonStyles() {
+  var active = tabs.active;
+  var bar = active.bar;
+  return /*#__PURE__*/css("position:relative;.k-tab{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:", active.color, ";}&.k-disabled{color:", theme.color.disabled, ";cursor:not-allowed;}}.k-tab-close{margin-right:-", tabs.closeGap, ";margin-left:", tabs.closeGap, ";position:relative;top:-1px;color:", theme.color.lightBlack, ";}.k-tabs-active-bar{transition:all ", tabs.transition, ";position:absolute;left:0;height:", bar.height, ";background:", bar.bgColor, ";bottom:calc(-", bar.height, " / 2);}&.k-vertical{display:inline-block;.k-tab{display:block;}.k-tabs-active-bar{left:auto;top:0;right:calc(-", bar.height, " / 2);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                }\n            ";
   }), ";");
+}
+
+function makeScrollStyles() {
+  return /*#__PURE__*/css("&: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, ";}}");
+}
+
+function makeDefaultStyles() {
+  return /*#__PURE__*/css("border-bottom:", tabs.border, ";&.k-vertical{border-bottom:none;border-right:", tabs.border, ";}");
+}
+
+function makeCardActiveBarCommonStyles() {
+  return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+    name: "1c3pzdg",
+    styles: "background:#fff;top:0;height:auto;z-index:-1"
+  } : {
+    name: "1c3pzdg",
+    styles: "background:#fff;top:0;height:auto;z-index:-1",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  });
+}
+
+function makeCardStyles() {
+  return /*#__PURE__*/css(".k-tab{margin:0;}.k-tabs-active-bar{", makeCardActiveBarCommonStyles(), ";border-left:", tabs.border, ";border-right:", tabs.border, ";&:before{content:'';display:block;position:absolute;height:", tabs.active.bar.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.active.bar.height, ";left:0;right:auto;bottom:0;height:auto;}}}");
+}
+
+function makeBorderCardStyles() {
+  return /*#__PURE__*/css("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;}}");
+}
+
+function makeNoBorderCardStyles() {
+  return /*#__PURE__*/css("border-radius:", theme.borderRadius, ";.k-tab{&:before{content:'';display:block;position:absolute;background:", tabs.noBorderCard.bgColor, ";top:0;bottom:0;left:0;right:0;z-index:-1;}}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;box-shadow:0px 0px 5px rgba(0, 0, 0, 0.08);border-radius:4px 4px 0px 0px;}&.k-vertical{border-right:none;.k-tabs-active-bar{width:auto;height:0;left:0;bottom:0;right:0;}}");
 }

package/es/components/tag/base.js

@@ -17,7 +17,7 @@ var defaults = function defaults() {
   return {
     type: 'default',
     size: 'default',
-    border: 'solid'
+    border: 'none'
   };
 };
 

package/es/components/tag/styles.js

@@ -5,8 +5,8 @@ import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
 var types = ['primary', 'warning', 'danger', 'success', 'disabled'];
 var defaults = deepDefaults({
-  get borderColor() {
-    return theme.color.border;
+  get border() {
+    return "1px solid " + theme.color.border;
   },
 
   get borderRadius() {
@@ -19,6 +19,11 @@ var defaults = deepDefaults({
 
   padding: "0 8px",
   height: '20px',
+
+  get bgColor() {
+    return theme.color.bg;
+  },
+
   close: {
     fontSize: '20px',
     gap: '8px'
@@ -38,26 +43,26 @@ var defaults = deepDefaults({
 
   },
   large: {
-    padding: "0px 16px",
-    height: '32px',
+    padding: "0px 8px",
+    height: '24px',
     close: {
-      fontSize: '24px',
+      fontSize: '20px',
       gap: '12px'
     }
   },
   small: {
     padding: "0 4px",
-    height: '18px',
+    height: '16px',
     close: {
-      fontSize: '18px',
+      fontSize: '12px',
       gap: '4px'
     }
   },
   mini: {
-    padding: "0 1px",
+    padding: "0 2px",
     height: '14px',
     close: {
-      fontSize: '16px',
+      fontSize: '12px',
       gap: '2px'
     }
   },
@@ -88,7 +93,7 @@ setDefault(function () {
   }).tag;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:1px solid ", tag.borderColor, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.k-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";}&.k-none{border:none;background:", tag.none.bgColor, ";}", _mapInstanceProperty(types).call(types, function (t) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:", tag.border, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.k-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";}&.k-none{border:none;background:", tag.none.bgColor, ";}", _mapInstanceProperty(types).call(types, function (t) {
     var styles = tag[t];
     return /*#__PURE__*/css("&.k-", t, "{color:", styles.color, ";border-color:", styles.color, ";background:", styles.bgColor, ";}");
   }), " ", _mapInstanceProperty(sizes).call(sizes, function (s) {

package/es/components/tip/index.vdt.js

@@ -55,9 +55,7 @@ export default function ($props, $blocks, $__proto__) {
         'className': 'k-tip-close',
         'children': (_$blocks['close'] = function ($super) {
           return _$cc(Icon, {
-            'className': 'ion-ios-close-empty',
-            'size': 'large',
-            'color': type,
+            'className': 'k-icon-close',
             'hoverable': !disabled
           });
         }, __$blocks['close'] = function ($super, data) {

package/es/components/tip/styles.js

@@ -5,11 +5,12 @@ import { deepDefaults } from '../../styles/utils';
 var defaults = {
   title: {
     fontSize: '14px',
-    gap: '8px'
+    gap: '8px',
+    fontWeight: '500'
   },
 
   get color() {
-    return theme.color.text;
+    return theme.color.title;
   },
 
   get padding() {
@@ -24,5 +25,5 @@ setDefault(function () {
   }).tip;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("&.k-tip{display:flex;height:auto;padding:0;color:", tip.color, "!important;align-items:flex-start;}.k-tip-wrapper{flex:1;padding:", tip.padding, ";}.k-tip-title{font-size:", tip.title.fontSize, ";margin-bottom:", tip.title.gap, ";}&.k-fade-leave-active{position:relative;}");
+  return /*#__PURE__*/css("&.k-tip{display:flex;height:auto;padding:0;color:", tip.color, "!important;align-items:flex-start;}.k-tip-wrapper{flex:1;padding:", tip.padding, ";}.k-tip-title{font-size:", tip.title.fontSize, ";margin-bottom:", tip.title.gap, ";font-weight:", tip.title.fontWeight, ";}&.k-fade-leave-active{position:relative;}.k-tip-close:hover{background:none;}");
 }

package/es/components/tooltip/content.vdt.js

@@ -52,14 +52,14 @@ export default function ($props, $blocks, $__proto__) {
         "k-tooltip-arrow": true
       }, _$cn2["k-" + arrowType.value] = arrowType.value, _$cn2)), null, 'tooltip-arrow', arrowRef) : undefined, confirm ? _$ce(2, 'div', (_$blocks['buttons'] = function ($super) {
         return [_$cc(Button, {
+          'ev-click': this.cancel,
+          'size': 'small',
+          'children': cancelText
+        }), _$cc(Button, {
           'type': 'primary',
           'ev-click': this.ok,
           'size': 'small',
           'children': okText
-        }), _$cc(Button, {
-          'ev-click': this.cancel,
-          'size': 'small',
-          'children': cancelText
         })];
       }, __$blocks['buttons'] = function ($super, data) {
         var block = $blocks['buttons'];

package/es/components/tooltip/styles.js

@@ -13,11 +13,16 @@ var defaults = {
 
   bgColor: '#fff',
   lineHeight: 1.4,
-  maxWidth: '300px',
+  maxWidth: '312px',
+
+  get boxShadow() {
+    return theme.middleBoxShadow;
+  },
+
   // arrow
   arrow: {
-    borderColor: 'rgba(191, 191, 191, .5)',
-    width: '8px'
+    borderColor: 'rgba(221, 221, 221, .5)',
+    width: '6px'
   },
   // confirm
   confirm: {
@@ -26,13 +31,13 @@ var defaults = {
   // dark
   dark: {
     get bgColor() {
-      return theme.color.text;
+      return theme.color.title;
     },
 
     color: '#fff',
 
     get arrowBorderColor() {
-      return theme.color.text;
+      return theme.color.title;
     }
 
   },
@@ -53,9 +58,9 @@ var directionMap = {
 };
 export default function makeStyles() {
   var arrowLong = tooltip.arrow.width;
-  var arrowShort = "calc(" + arrowLong + " - 2px)"; // use &.k-tooltip-content to override css in dropdown menu
+  var arrowShort = "calc(" + arrowLong + " - 1px)"; // use &.k-tooltip-content to override css in dropdown menu
 
-  return /*#__PURE__*/css("&.k-tooltip-content{max-width:", tooltip.maxWidth, ";min-width:0;padding:", tooltip.padding, ";line-height:", tooltip.lineHeight, ";word-wrap:break-word;pointer-events:none;&.k-hoverable,&.k-always{pointer-events:all;}.k-tooltip-arrow{pointer-events:none;&:before,&{position:absolute;display:block;border-style:solid;border-color:transparent;}&:before{content:' ';}&.k-top,&.k-bottom{&:before,&{border-width:", arrowLong, " ", arrowShort, ";}&:before{left:calc(-1 * ", arrowShort, ");}}&.k-top{top:calc(-2 * ", arrowLong, ");&:before{top:calc(-", arrowLong, " + 1px);}}&.k-bottom{bottom:calc(-2 * ", arrowLong, ");&:before{bottom:calc(-", arrowLong, " + 1px);}}&.k-left,&.k-right{&:before,&{border-width:", arrowShort, " ", arrowLong, ";}&:before{top:calc(-1 * ", arrowShort, ");}}&.k-left{left:calc(-2 * ", arrowLong, ");&:before{left:calc(-", arrowLong, " + 1px);}}&.k-right{right:calc(-2 * ", arrowLong, ");&:before{right:calc(-", arrowLong, " + 1px);}}}", _mapInstanceProperty(themes).call(themes, function (theme) {
+  return /*#__PURE__*/css("&.k-tooltip-content{max-width:", tooltip.maxWidth, ";min-width:0;padding:", tooltip.padding, ";line-height:", tooltip.lineHeight, ";word-wrap:break-word;pointer-events:none;box-shadow:", tooltip.boxShadow, ";&.k-hoverable,&.k-always{pointer-events:all;}.k-tooltip-arrow{pointer-events:none;&:before,&{position:absolute;display:block;border-style:solid;border-color:transparent;}&:before{content:' ';}&.k-top,&.k-bottom{&:before,&{border-width:", arrowLong, " ", arrowShort, ";}&:before{left:calc(-1 * ", arrowShort, ");}}&.k-top{top:calc(-2 * ", arrowLong, ");&:before{top:calc(-", arrowLong, " + 1px);}}&.k-bottom{bottom:calc(-2 * ", arrowLong, ");&:before{bottom:calc(-", arrowLong, " + 1px);}}&.k-left,&.k-right{&:before,&{border-width:", arrowShort, " ", arrowLong, ";}&:before{top:calc(-1 * ", arrowShort, ");}}&.k-left{left:calc(-2 * ", arrowLong, ");&:before{left:calc(-", arrowLong, " + 1px);}}&.k-right{right:calc(-2 * ", arrowLong, ");&:before{right:calc(-", arrowLong, " + 1px);}}}", _mapInstanceProperty(themes).call(themes, function (theme) {
     var _context;
 
     var borderColor;

package/es/components/transfer/index.vdt.js

@@ -37,7 +37,8 @@ export default function ($props, $blocks, $__proto__) {
   var _this$check = this.check,
       isCheckAll = _this$check.isCheckAll,
       toggleCheckAll = _this$check.toggleCheckAll,
-      onCheckboxChange = _this$check.onCheckboxChange;
+      onCheckboxChange = _this$check.onCheckboxChange,
+      isIndeterminate = _this$check.isIndeterminate;
   var classNameObj = (_classNameObj = {
     'k-transfer': true
   }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
@@ -50,6 +51,7 @@ export default function ($props, $blocks, $__proto__) {
       return [_$ce(2, 'div', [this.get(model + "CheckedKeys.length"), _$ct(' /\n                    '), data.length], 0, 'k-transfer-count'), _$cc(Checkbox, {
         'className': 'c-ellipsis',
         'value': isCheckAll(model),
+        'indeterminate': isIndeterminate(model),
         'ev-click': toggleCheckAll.bind(null, model),
         'children': title
       })];

package/es/components/transfer/styles.js

@@ -63,5 +63,5 @@ setDefault(function () {
   }).transfer;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", transfer.fontSize, ";.k-transfer-panel,.k-transfer-arrows{display:inline-block;vertical-align:middle;}.k-transfer-panel{width:", transfer.panel.width, ";border:", transfer.panel.border, ";border-radius:", transfer.panel.borderRadius, ";height:", transfer.panel.height, ";display:inline-flex;flex-direction:column;}.k-transfer-title{line-height:", transfer.title.lineHeight, ";background:", transfer.title.bgColor, ";padding:", transfer.title.padding, ";.k-checkbox{color:", transfer.title.color, ";font-size:", transfer.title.fontSize, ";}}.k-transfer-count{float:right;margin-left:", transfer.title.countGap, ";}.k-transfer-list{overflow:auto;position:relative;flex:1;}.k-transfer-item{color:", transfer.item.color, ";background:", transfer.item.bgColor, ";user-select:none;width:100%;&:not(.k-disabled):hover{background:", transfer.item.hoverBgColor, ";color:", transfer.item.hoverColor, ";p{color:", transfer.item.hoverColor, ";}}.k-checkbox{padding:", transfer.item.padding, ";display:flex;}p{margin:0;color:", transfer.item.descColor, ";}&.k-disabled{p{color:", theme.color.disabled, ";}}}.k-input{width:auto;margin:", transfer.searchGap, ";}.k-transfer-arrows{.k-btn{display:flex;margin:", transfer.arrow.gap, ";}}");
+  return /*#__PURE__*/css("font-size:", transfer.fontSize, ";.k-transfer-panel,.k-transfer-arrows{display:inline-block;vertical-align:middle;}.k-transfer-panel{width:", transfer.panel.width, ";border:", transfer.panel.border, ";border-radius:", transfer.panel.borderRadius, ";height:", transfer.panel.height, ";display:inline-flex;flex-direction:column;overflow:auto;}.k-transfer-title{line-height:", transfer.title.lineHeight, ";background:", transfer.title.bgColor, ";padding:", transfer.title.padding, ";.k-checkbox{color:", transfer.title.color, ";font-size:", transfer.title.fontSize, ";}}.k-transfer-count{float:right;margin-left:", transfer.title.countGap, ";}.k-transfer-list{overflow:auto;position:relative;flex:1;}.k-transfer-item{color:", transfer.item.color, ";background:", transfer.item.bgColor, ";user-select:none;width:100%;&:not(.k-disabled):hover{background:", transfer.item.hoverBgColor, ";color:", transfer.item.hoverColor, ";p{color:", transfer.item.hoverColor, ";}}.k-checkbox{padding:", transfer.item.padding, ";display:flex;}p{margin:0;color:", transfer.item.descColor, ";}&.k-disabled{p{color:", theme.color.disabled, ";}}}.k-input{width:auto;margin:", transfer.searchGap, ";}.k-transfer-arrows{.k-btn{display:flex;margin:", transfer.arrow.gap, ";}}");
 }

package/es/components/transfer/useCheck.d.ts

@@ -4,4 +4,5 @@ export declare function useCheck({ getEnabledData, getShowedData }: ReturnType<t
     isCheckAll: (model: Model) => boolean | 0;
     toggleCheckAll: (model: Model, e: MouseEvent) => void;
     onCheckboxChange: (model: Model, index: number, e: MouseEvent) => void;
+    isIndeterminate: (model: Model) => boolean;
 };

package/es/components/transfer/useCheck.js

@@ -33,6 +33,12 @@ export function useCheck(_ref) {
     }
   }
 
+  function isIndeterminate(model) {
+    var checked = instance.get(model + "CheckedKeys");
+    var data = getEnabledData(model);
+    return checked.length > 0 && checked.length < data.length;
+  }
+
   function onCheckboxChange(model, index, e) {
     if (startIndex === undefined || !e.shiftKey) {
       startIndex = index;
@@ -84,6 +90,7 @@ export function useCheck(_ref) {
   return {
     isCheckAll: isCheckAll,
     toggleCheckAll: toggleCheckAll,
-    onCheckboxChange: onCheckboxChange
+    onCheckboxChange: onCheckboxChange,
+    isIndeterminate: isIndeterminate
   };
 }