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

package/components/badge/styles.js

@@ -22,5 +22,5 @@ setDefault(function () {
   }).badge;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.k-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:75%;vertical-align:baseline;}&.k-has-text>.k-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.k-alone>.k-badge-text{position:static;transform:none;}");
+  return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.k-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:85%;vertical-align:baseline;}&.k-has-text>.k-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.k-alone>.k-badge-text{position:static;transform:none;}");
 }

package/components/button/group.d.ts

@@ -4,6 +4,7 @@ export interface ButtonGroupProps {
     value?: any;
     checkType?: 'none' | 'radio' | 'checkbox';
     fluid?: boolean;
+    seperate?: boolean;
 }
 export declare class ButtonGroup extends Component<ButtonGroupProps> {
     static template: string | import("intact").Template<any>;

package/components/button/group.js

@@ -7,7 +7,8 @@ var typeDefs = {
   vertical: Boolean,
   value: null,
   fluid: Boolean,
-  checkType: ['none', 'radio', 'checkbox']
+  checkType: ['none', 'radio', 'checkbox'],
+  seperate: Boolean
 };
 
 var defaults = function defaults() {

package/components/button/group.vdt.js

@@ -13,12 +13,14 @@ export default function ($props, $blocks, $__proto__) {
       className = _this$get.className,
       vertical = _this$get.vertical,
       children = _this$get.children,
-      fluid = _this$get.fluid;
+      fluid = _this$get.fluid,
+      seperate = _this$get.seperate;
 
   var classNameObj = (_classNameObj = {
     'k-btns': true,
     'k-vertical': vertical,
-    'k-fluid': fluid
+    'k-fluid': fluid,
+    'k-seperate': seperate
   }, _classNameObj[className] = className, _classNameObj[makeButtonGroupStyles()] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)

package/components/button/index.vdt.js

@@ -78,7 +78,7 @@ export default function ($props, $blocks, $__proto__) {
   var waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
   return _$cc(Wave, {
     'disabled': loading || disabled || type === 'none' || type === 'link',
-    'inset': '-2px',
+    'inset': type === 'flat' ? '-1px' : '-2px',
     'color': waveColor,
     'children': _$cc(DynamicButton, _extends({
       'className': _$cn(classNameObj),

package/components/button/styles.d.ts

@@ -24,7 +24,7 @@ declare const defaults: {
     link: {
         readonly color: string;
         readonly hoverColor: string;
-        readonly hoverBgColor: string;
+        hoverBgColor: string;
     };
     none: {
         readonly hoverBgColor: string;

package/components/button/styles.js

@@ -7,14 +7,14 @@ export var types = ['primary', 'warning', 'danger', 'active', 'success'];
 var sizes = ['large', 'small', 'mini'];
 var btnStyles = {
   get color() {
-    return theme.color.lightBlack;
+    return theme.color.text;
   },
 
   bgColor: '#fff',
   lineHeight: '1.15',
 
   get padding() {
-    return "0 " + theme.default.padding;
+    return "0 16px";
   },
 
   get borderColor() {
@@ -146,6 +146,13 @@ var btnSizeStyles = sizes.reduce(function (memo, size) {
     }
 
   };
+
+  if (size === 'large') {
+    Object.defineProperty(memo[size], 'padding', {
+      value: "0 24px"
+    });
+  }
+
   return memo;
 }, {});
 var defaults = deepDefaults({
@@ -181,9 +188,7 @@ var defaults = deepDefaults({
       return theme.color.linkHover;
     },
 
-    get hoverBgColor() {
-      return theme.color.hoverBg;
-    }
+    hoverBgColor: 'transparent' // get hoverBgColor() { return theme.color.hoverBg },
 
   },
   none: {
@@ -238,7 +243,7 @@ export function makeButtonStyles(_ref) {
   css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";.k-icon{color:inherit;}&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.k-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
     var typeStyles = button[type];
     return /*#__PURE__*/css("&.k-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}}");
-  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none,&.k-link,&.k-flat{background:transparent;&,&:hover{border:none;}&.k-active{color:", theme.color.primary, ";}}&.k-none:hover{background:", button.none.hoverBgColor, ";}&.k-flat{background:", button.none.hoverBgColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.k-none,&.k-link,&.k-flat{background:transparent;&,&:hover{border:none;}&.k-active{color:", theme.color.primary, ";}}&.k-none:hover{background:", button.none.hoverBgColor, ";}&.k-flat{background:", button.none.hoverBgColor, ";}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none.k-disabled,&.k-link.k-disabled{&,&:hover{background:transparent;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = button[size];
     return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";height:", styles.height, ";padding:", styles.padding, ";&.k-btn-icon{width:", styles.height, ";}}");
   }), "&.k-btn-icon{width:", button.height, ";padding:0;.k-icon{margin:0;}}&.k-fluid{width:100%;padding:0;}&.k-circle{border-radius:calc(", button.large.height, " / 2);}&.k-loading{", _mapInstanceProperty(types).call(types, function (type) {
@@ -257,13 +262,13 @@ export function makeButtonStyles(_ref) {
   }) + "\n                    }\n                }\n            ", ";"));
 }
 export function makeButtonGroupStyles() {
-  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;.k-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.k-active{z-index:1;position:relative;}}&.k-fluid{width:100%;}&:not(.k-vertical){>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;flex-wrap:wrap;vertical-align:middle;.k-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.k-active{z-index:1;position:relative;}}&.k-fluid{width:100%;}&:not(.k-vertical){>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.k-", type, ":not(:first-child){border-left-color:", borderColor, ";}&.k-", type, ":not(:last-child){border-right-color:", borderColor, ";}");
-  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.k-fluid{display:flex;>.k-btn{flex:1;}}}&.k-vertical{>.k-btn{display:block;", _mapInstanceProperty(types).call(types, function (type) {
+  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.k-fluid{display:flex;>.k-btn{flex:1;}}}&.k-vertical{flex-direction:column;>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.k-", type, ":not(:first-child){border-top-color:", borderColor, ";}&.k-", type, ":not(:last-child){border-bottom-color:", borderColor, ";}");
-  }), ";&:not(.k-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}");
+  }), ";&:not(.k-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}&.k-seperate{gap:8px;>.k-btn{border-radius:", button.borderRadius, "!important;}}");
 }

package/components/carousel/index.vdt.js

@@ -7,10 +7,10 @@ import { Icon } from '../icon';
 import { makeStyles } from './styles';
 import { linkEvent } from 'intact';
 var _$tmp0 = {
-  'className': 'ion-ios-arrow-left'
+  'className': 'k-icon-left'
 };
 var _$tmp1 = {
-  'className': 'ion-ios-arrow-right'
+  'className': 'k-icon-right'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;

package/components/cascader/index.vdt.js

@@ -11,7 +11,7 @@ var _$tmp0 = {
   'rotate': true
 };
 var _$tmp1 = {
-  'className': 'k-cascader-arrow ion-ios-arrow-right'
+  'className': 'k-cascader-arrow k-icon-right'
 };
 var _$tmp2 = {
   'className': 'k-cascader'

package/components/checkbox/styles.js

@@ -38,11 +38,11 @@ var defaults = {
 
   },
   inner: {
-    width: '5px',
+    width: '6px',
     height: '10px',
     top: '0px',
-    left: '5px',
-    border: '1px solid #fff'
+    left: '4px',
+    border: '2px solid #fff'
   },
   // disabled
   disabled: {
@@ -69,10 +69,6 @@ var defaults = {
       }
 
     }
-  },
-  // indeterminate
-  indeterminate: {
-    innerLeft: '4px'
   }
 };
 var checkbox;
@@ -82,5 +78,5 @@ setDefault(function () {
   }).checkbox;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}&:hover{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;left:", checkbox.indeterminate.innerLeft, ";}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}&:hover{.k-checkbox-wrapper{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
 }

package/components/collapse/item.vdt.js

@@ -39,7 +39,7 @@ export default function ($props, $blocks, $__proto__) {
 
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['title'](_$no)), _$cc(Icon, {
-    'className': _$cn((_$cn2 = {}, _$cn2[kls('arrow')] = true, _$cn2['ion-ios-arrow-right'] = true, _$cn2)),
+    'className': _$cn((_$cn2 = {}, _$cn2[kls('arrow')] = true, _$cn2['k-icon-right'] = true, _$cn2)),
     'hoverable': !disabled
   })], 0, _$cn(kls('title')), {
     'ev-click': this.toggle

package/components/collapse/styles.js

@@ -32,9 +32,9 @@ setDefault(function () {
   }).collapse;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.k-left{.", kls('arrow'), "{float:left;margin-right:", collapse.titleMarginRight, ";transform-origin:center center 0;}}&.k-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
+  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.k-left{.", kls('arrow'), "{float:left;margin-right:", collapse.titleMarginRight, ";}}&.k-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
 }
 export function makeItemStyles() {
   var collapseItem = collapse.item;
-  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}.", kls('title'), "{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";}.", kls('arrow'), "{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";transform-origin:left center 0;}&:not(.k-disabled){.", kls('title'), "{&:hover{color:", theme.color.primary, ";}}}.", kls('content'), "{overflow:hidden;.", kls('wrapper'), "{overflow:hidden;padding:", collapseItem.contentPadding, ";}}&.k-active{.", kls('arrow'), "{transform:rotate(90deg);}}&.k-disabled{color:", theme.color.disabledBorder, ";.", kls('title'), "{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}.", kls('title'), "{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";}.", kls('arrow'), "{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}&:not(.k-disabled){.", kls('title'), "{&:hover{color:", theme.color.primary, ";}}}.", kls('content'), "{overflow:hidden;.", kls('wrapper'), "{overflow:hidden;padding:", collapseItem.contentPadding, ";}}&.k-active{.", kls('arrow'), "{transform:rotate(90deg);}}&.k-disabled{color:", theme.color.disabledBorder, ";.", kls('title'), "{cursor:not-allowed;}}");
 }

package/components/copy/index.vdt.js

@@ -8,7 +8,7 @@ import { makeStyles } from './styles';
 import { _$ } from '../../i18n';
 var _$tmp0 = {
   'key': '2',
-  'className': 'k-icon-truth',
+  'className': 'k-icon-check',
   'hoverable': true,
   'color': 'success'
 };

package/components/datepicker/calendar.vdt.js

@@ -6,27 +6,27 @@ import { _$ } from '../../i18n';
 import { makeCalendarStyles } from './styles';
 import { getNowDate } from './helpers';
 var _$tmp0 = {
-  'className': 'ion-ios-arrow-left',
+  'className': 'k-icon-left',
   'size': 'small'
 };
 var _$tmp1 = {
-  'className': 'ion-ios-arrow-left',
+  'className': 'k-icon-left',
   'size': 'small'
 };
 var _$tmp2 = {
-  'className': 'ion-ios-arrow-left',
+  'className': 'k-icon-left',
   'size': 'small'
 };
 var _$tmp3 = {
-  'className': 'ion-ios-arrow-right',
+  'className': 'k-icon-right',
   'size': 'small'
 };
 var _$tmp4 = {
-  'className': 'ion-ios-arrow-right',
+  'className': 'k-icon-right',
   'size': 'small'
 };
 var _$tmp5 = {
-  'className': 'ion-ios-arrow-right',
+  'className': 'k-icon-right',
   'size': 'small'
 };
 export default function ($props, $blocks, $__proto__) {