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

package/components/progress/index.vdt.js

@@ -14,14 +14,8 @@ var _$tmp0 = {
 var _$tmp1 = {
   'viewBox': '0 0 120 120'
 };
-var _$tmp2 = {
-  'className': 'k-progress-icon k-icon-truth'
-};
-var _$tmp3 = {
-  'className': 'k-progress-icon k-icon-fault'
-};
 export default function ($props, $blocks, $__proto__) {
-  var _classNameObj, r, circumference;
+  var _classNameObj, r, circumference, icon, _$cn2;
 
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -75,6 +69,50 @@ export default function ($props, $blocks, $__proto__) {
     'stroke-width': strokeWidth,
     'stroke-dasharray': circumference,
     'stroke-dashoffset': circumference
-  }) : undefined]), 0, 'k-progress-canvas', _$tmp1) : undefined, children ? _$ce(2, 'div', children, 0, 'k-progress-text') : showOuterText ? _$ce(2, 'div', status !== 'success' && status !== 'error' ? _$ce(2, 'span', [percent, _$ct('%')], 0) : status === 'success' ? _$ce(2, 'span', _$cc(Icon, _$tmp2), 2) : status === 'error' ? _$ce(2, 'span', _$cc(Icon, _$tmp3), 2) : undefined, 0, 'k-progress-text') : undefined]);
+  }) : undefined]), 0, 'k-progress-canvas', _$tmp1) : undefined, children ? _$ce(2, 'div', children, 0, 'k-progress-text') : showOuterText ? _$ce(2, 'div', function () {
+    if (type !== 'circle') {
+      switch (status) {
+        case 'success':
+          icon = 'k-icon-success-fill';
+          break;
+
+        case 'error':
+          icon = 'k-icon-error-fill';
+          break;
+
+        case 'warning':
+          icon = 'k-icon-warning-fill';
+          break;
+
+        default:
+          break;
+      }
+    } else {
+      switch (status) {
+        case 'success':
+          icon = 'k-icon-truth';
+          break;
+
+        case 'error':
+        case 'warning':
+          icon = 'k-icon-close';
+          break;
+
+        default:
+          break;
+      }
+    }
+
+    if (icon) {
+      return _$cc(Icon, {
+        'className': _$cn((_$cn2 = {
+          "k-progress-icon": true
+        }, _$cn2[icon] = true, _$cn2)),
+        'color': status === 'error' ? 'danger' : status
+      });
+    } else {
+      return _$ce(2, 'span', [percent, _$ct('%')], 0);
+    }
+  }(), 0, 'k-progress-text') : undefined]);
 }
 ;

package/components/progress/styles.js

@@ -9,11 +9,11 @@ import '../../styles/global';
 export var types = ['active', 'normal', 'error', 'success', 'warning'];
 var sizes = ['small', 'mini'];
 var progressBarAnimation = /*#__PURE__*/keyframes(process.env.NODE_ENV === "production" ? {
-  name: "ecxna4",
-  styles: "from{opacity:0.2;width:14px;margin-left:14px;}to{opacity:0;width:100%;}"
+  name: "sckwkj",
+  styles: "from{opacity:0.2;width:0;}to{opacity:0;width:100%;}"
 } : {
-  name: "ecxna4",
-  styles: "from{opacity:0.2;width:14px;margin-left:14px;}to{opacity:0;width:100%;}",
+  name: "sckwkj",
+  styles: "from{opacity:0.2;width:0;}to{opacity:0;width:100%;}",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 var defaults = {
@@ -41,15 +41,18 @@ var defaults = {
   },
   bar: {
     fontColor: '#404040',
-    height: '16px',
+    height: '8px',
     textWidth: '40px',
     textMarginLeft: '16px',
     innerText: {
       fontSize: '12px',
       padding: "0 10px 0 3px"
     },
+    outerText: {
+      height: '16px'
+    },
     small: {
-      height: '10px',
+      height: '6px',
       fontSize: '12px'
     },
     mini: {
@@ -60,13 +63,16 @@ var defaults = {
   circle: {
     width: '104px',
     fontSize: '16px',
+    iconFontSize: '50px',
     small: {
       width: '80px',
-      fontSize: '14px'
+      fontSize: '14px',
+      iconFontSize: '30px'
     },
     mini: {
-      width: '40px',
-      fontSize: '12px'
+      width: '24px',
+      fontSize: '10px',
+      iconFontSize: '14px'
     }
   }
 };
@@ -77,10 +83,10 @@ setDefault(function () {
   }).progress;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("position:relative;line-height:1;&.k-bar{display:flex;align-items:center;.k-progress-container{height:", progress.bar.height, ";border-radius:", progress.bar.height, ";background-color:", progress.stokeColor.color, ";overflow:hidden;position:relative;vertical-align:middle;font-size:", progress.bar.innerText.fontSize, ";flex:1;}.k-progress-content{position:relative;left:0;top:0;white-space:nowrap;width:100%;height:100%;border-radius:", progress.bar.height, ";}.k-progress-bg{background-color:", progress.stokeColor.normal, ";height:100%;border-radius:", progress.bar.height, ";transition:", progress.animation.transition, ";position:relative;}.k-progress-inner-text{display:inline-block;vertical-align:middle;color:#ffffff;line-height:", progress.bar.height, ";width:100%;text-align:right;padding:", progress.bar.innerText.padding, ";}&.k-success{.k-progress-bg{background:", progress.stokeColor.success, ";}.k-progress-icon{color:", progress.stokeColor.success, ";}}&.k-error{.k-progress-bg{background:", progress.stokeColor.error, ";}.k-progress-icon{color:", progress.stokeColor.error, ";}}&.k-warning{.k-progress-bg{background:", progress.stokeColor.warning, ";}}&.k-active{.k-progress-bg{&:before{content:\"\";position:absolute;top:0;bottom:0;right:0;left:0;background-color:#fff;animation:", progressBarAnimation, " 2s ease infinite;border-radius:", progress.bar.height, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("position:relative;line-height:1;&.k-bar{display:flex;align-items:center;.k-progress-container{height:", progress.bar.height, ";border-radius:", progress.bar.height, ";background-color:", progress.stokeColor.color, ";overflow:hidden;position:relative;vertical-align:middle;font-size:", progress.bar.innerText.fontSize, ";flex:1;}.k-progress-content{position:relative;left:0;top:0;white-space:nowrap;width:100%;height:100%;border-radius:", progress.bar.height, ";}.k-progress-bg{background-color:", progress.stokeColor.normal, ";height:100%;border-radius:", progress.bar.height, ";transition:", progress.animation.transition, ";position:relative;}.k-progress-inner-text{display:inline-block;vertical-align:top;color:#ffffff;line-height:", progress.bar.height, ";width:100%;text-align:right;padding:", progress.bar.innerText.padding, ";}&.k-success{.k-progress-bg{background:", progress.stokeColor.success, ";}}&.k-error{.k-progress-bg{background:", progress.stokeColor.error, ";}}&.k-warning{.k-progress-bg{background:", progress.stokeColor.warning, ";}}&.k-active{.k-progress-bg{&:before{content:\"\";position:absolute;top:0;bottom:0;right:0;left:0;background-color:#fff;animation:", progressBarAnimation, " 2s ease infinite;border-radius:", progress.bar.height, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     return /*#__PURE__*/css("&.k-", size, "{font-size:", progress.bar[size].fontSize, ";.k-progress-container{height:", progress.bar[size].height, ";}}");
-  }), " .k-progress-text{margin-left:", progress.bar.textMarginLeft, ";width:", progress.bar.textWidth, ";}}&.k-circle{width:", progress.circle.width, ";height:", progress.circle.width, ";font-size:", progress.circle.fontSize, ";", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  }), " .k-progress-text{margin-left:", progress.bar.textMarginLeft, ";width:", progress.bar.textWidth, ";line-height:", progress.bar.outerText.height, ";height:", progress.bar.outerText.height, ";}}&.k-circle{width:", progress.circle.width, ";height:", progress.circle.width, ";font-size:", progress.circle.fontSize, ";", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = progress.circle[size];
-    return /*#__PURE__*/css("&.k-", size, "{width:", styles.width, ";height:", styles.width, ";font-size:", styles.fontSize, ";}");
-  }), ";.k-progress-canvas{transform:rotate(-90deg);}.k-progress-meter,.k-progress-value,.k-progress-animate{fill:none;}.k-progress-meter{stroke:", progress.stokeColor.color, ";}.k-progress-value{stroke:", progress.stokeColor.normal, ";stroke-linecap:round;transition:", progress.animation.transition, ";}.k-progress-animate{stroke:#fff;stroke-linecap:round;}.k-progress-text{position:absolute;top:50%;text-align:center;width:100%;transform:translateY(-50%);}&.k-success{.k-progress-value{stroke:", progress.stokeColor.success, ";}}&.k-error{.k-progress-value{stroke:", progress.stokeColor.error, ";}}}");
+    return /*#__PURE__*/css("&.k-", size, "{width:", styles.width, ";height:", styles.width, ";font-size:", styles.fontSize, ";.k-progress-icon{font-size:", styles.iconFontSize, ";}}");
+  }), ";.k-progress-canvas{transform:rotate(-90deg);}.k-progress-meter,.k-progress-value,.k-progress-animate{fill:none;}.k-progress-meter{stroke:", progress.stokeColor.color, ";}.k-progress-value{stroke:", progress.stokeColor.normal, ";stroke-linecap:round;transition:", progress.animation.transition, ";}.k-progress-animate{stroke:#fff;stroke-linecap:round;}.k-progress-text{position:absolute;top:50%;text-align:center;width:100%;transform:translateY(-50%);}.k-progress-icon{font-size:", progress.circle.iconFontSize, ";}&.k-success{.k-progress-value{stroke:", progress.stokeColor.success, ";}}&.k-error{.k-progress-value{stroke:", progress.stokeColor.error, ";}}&.k-warning{.k-progress-value{stroke:", progress.stokeColor.warning, ";}}}");
 }

package/components/radio/styles.js

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
-import { deepDefaults } from '../../styles/utils';
+import { deepDefaults, palette } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
 var defaults = {
-  width: '14px',
+  width: '16px',
 
   get transition() {
     return theme.transition.small;
@@ -38,10 +38,20 @@ var defaults = {
       return theme.color.disabledBg;
     },
 
-    get innerColor() {
-      return theme.color.disabledBorder;
-    }
+    checked: {
+      get borderColor() {
+        return palette(theme.color.primary, -2);
+      },
+
+      get bgColor() {
+        return palette(theme.color.primary, -4);
+      },
 
+      get innerColor() {
+        return palette(theme.color.primary, -3);
+      }
+
+    }
   }
 };
 var radio;
@@ -51,5 +61,5 @@ setDefault(function () {
   }).radio;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";&:before{background:", radio.disabled.innerColor, ";}}input{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}&:hover{border:1px solid ", radio.hoverBorderColor, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";}input{cursor:not-allowed;}&.k-checked{.k-radio-wrapper{border-color:", radio.disabled.checked.borderColor, ";background:", radio.disabled.checked.bgColor, ";&:before{background:", radio.disabled.checked.innerColor, ";}}}}");
 }

package/components/rate/styles.js

@@ -26,5 +26,5 @@ setDefault(function () {
   }).rate;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;.k-rate-item{display:inline-block;margin-right:", rate.item.gap, ";cursor:pointer;position:relative;color:", rate.color, ";transition:all ", rate.transition, ";&:hover{transform:", rate.item.hoverTransform, ";}&.k-full{color:", rate.activeColor, ";}&.k-half{.k-rate-first{color:", rate.activeColor, ";}}}.k-rate-first{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;}.k-icon{font-size:", rate.iconFontSize, ";}&.k-disabled{.k-rate-item{cursor:default;&:hover{transform:none;}}}");
+  return /*#__PURE__*/css("display:inline-block;.k-rate-item{display:inline-block;margin-right:", rate.item.gap, ";cursor:pointer;position:relative;color:", rate.color, ";transition:all ", rate.transition, ";&:hover{transform:", rate.item.hoverTransform, ";}&.k-full{color:", rate.activeColor, ";}&.k-half{.k-rate-first{color:", rate.activeColor, ";}}}.k-rate-first{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;}.k-icon{font-size:", rate.iconFontSize, ";color:inherit;}&.k-disabled{.k-rate-item{cursor:default;&:hover{transform:none;}}}");
 }

package/components/select/base.d.ts

@@ -1,6 +1,5 @@
 import { Component, Children, TypeDefs, RefObject } from 'intact-react';
 import { Sizes } from '../../styles/utils';
-import type { Input } from '../input';
 import { Dropdown, DropdownProps } from '../dropdown';
 import { State } from '../../hooks/useState';
 import { Container } from '../portal';
@@ -22,6 +21,9 @@ export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach =
     width?: string | number;
     show?: boolean;
     position?: DropdownProps['position'];
+    flat?: boolean;
+    nowrap?: boolean;
+    draggable?: boolean;
 }
 export interface BaseSelectEvents {
     keydown: [KeyboardEvent];
@@ -45,9 +47,10 @@ export declare abstract class BaseSelect<T extends BaseSelectProps<any> = BaseSe
     input: {
         onInput: (value: string) => void;
         keywords: State<string>;
-        inputRef: RefObject<Input<string | number>>;
+        inputRef: RefObject<import("../input").Input<string | number>>;
     };
     private focusout;
+    private draggable;
     init(): void;
     protected abstract getPlaceholder(): Children;
     protected abstract getLabel(): Children;

package/components/select/base.js

@@ -13,6 +13,7 @@ import { Dropdown } from '../dropdown';
 import { useInput } from './useInput';
 import { useFocusout } from './useFocusout';
 import { isNullOrUndefined } from 'intact-shared';
+import { useDraggable } from './useDraggble';
 var typeDefs = {
   value: null,
   multiple: Boolean,
@@ -29,7 +30,10 @@ var typeDefs = {
   container: [Function, String],
   width: [String, Number],
   show: Boolean,
-  position: Dropdown.typeDefs.position
+  position: Dropdown.typeDefs.position,
+  flat: Boolean,
+  nowrap: Boolean,
+  draggable: Boolean
 };
 
 var defaults = function defaults() {
@@ -60,6 +64,7 @@ export var BaseSelect = /*#__PURE__*/function (_Component) {
     _this.dropdownRef = createRef();
     _this.input = useInput(_this.resetKeywords);
     _this.focusout = useFocusout();
+    _this.draggable = useDraggable();
     return _this;
   }
 
@@ -67,8 +72,7 @@ export var BaseSelect = /*#__PURE__*/function (_Component) {
 
   _proto.init = function init() {
     provide(SELECT, this);
-    useShowHideEvents('show'); // this.input = useInput();
-
+    useShowHideEvents('show');
     this.watch('value', this.position, {
       presented: true
     });

package/components/select/base.vdt.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
 import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/values";
 import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, map as _$ma } from 'intact-react';
 import { TransitionGroup, Transition } from 'intact';
@@ -10,6 +11,7 @@ import { Dropdown } from '../dropdown';
 import { getRestProps, addStyle } from '../utils';
 import { Wave } from '../wave';
 import { context as ErrorContext } from '../form/useError';
+import { Tags, Tag } from '../tag';
 var _$tmp0 = {
   'className': 'ion-load-c',
   'rotate': true
@@ -41,12 +43,15 @@ export default function ($props, $blocks, $__proto__) {
       style = _this$get.style,
       width = _this$get.width,
       show = _this$get.show,
-      position = _this$get.position;
+      position = _this$get.position,
+      flat = _flatInstanceProperty(_this$get),
+      nowrap = _this$get.nowrap,
+      draggable = _this$get.draggable;
 
   var classNameObj = (_classNameObj = {
     'k-select': true,
     'k-disabled': disabled
-  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-fluid'] = fluid, _classNameObj['k-inline'] = inline, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[makeStyles()] = true, _classNameObj);
+  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-fluid'] = fluid, _classNameObj['k-inline'] = inline, _classNameObj['k-flat'] = flat, _classNameObj['k-nowrap'] = nowrap, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[makeStyles()] = true, _classNameObj);
   var placeholder = this.getPlaceholder();
   var label = this.getLabel();
   var hasValue = this.hasValue();
@@ -106,7 +111,8 @@ export default function ($props, $blocks, $__proto__) {
               'inline': true,
               'key': 'input',
               'readonly': !show,
-              'waveDisabled': true
+              'waveDisabled': true,
+              'flat': flat
             }, 'input', inputRef) : !filterable && !hasValue ? _$ce(2, 'div', placeholder, 0, 'k-select-placeholder c-ellipsis', null, 'placeholder') : !multiple ? _$ce(2, 'div', (_$blocks['value'] = function ($super) {
               return label;
             }, __$blocks['value'] = function ($super, data) {
@@ -117,36 +123,42 @@ export default function ($props, $blocks, $__proto__) {
               };
 
               return block ? block.call($this, callBlock, data) : callBlock();
-            }, __$blocks['value'](_$no, [value, label])), 0, 'k-select-value c-ellipsis', null, 'value') : _$ce(2, 'div', [_$cc(TransitionGroup, {
-              'name': 'k-fade',
-              'children': (_$blocks['values'] = function ($super) {
-                return _$ma(label, function ($label, $key) {
-                  return _$ce(2, 'div', [_$ce(2, 'span', (_$blocks['value'] = function ($super) {
-                    return $label;
-                  }, __$blocks['value'] = function ($super, data) {
-                    var block = $blocks['value'];
+            }, __$blocks['value'](_$no, [value, label])), 0, 'k-select-value c-ellipsis', null, 'value') : _$ce(2, 'div', [(_$blocks['values'] = function ($super) {
+              return label && label.length ? _$cc(Tags, {
+                'nowrap': nowrap,
+                'size': size,
+                'draggable': draggable,
+                'ev-dragend': this.draggable,
+                'children': _$ma(label, function ($label, $key) {
+                  return _$cc(Tag, {
+                    'key': isStringOrNumber($label) ? $label : isStringOrNumber(value[$key]) ? value[$key] : $key,
+                    'closable': true,
+                    'ev-close': this.delete.bind(this, $key),
+                    'disabled': disabled,
+                    'size': size,
+                    'children': (_$blocks['value'] = function ($super) {
+                      return $label;
+                    }, __$blocks['value'] = function ($super, data) {
+                      var block = $blocks['value'];
 
-                    var callBlock = function callBlock() {
-                      return _$blocks['value'].call($this, $super, data);
-                    };
+                      var callBlock = function callBlock() {
+                        return _$blocks['value'].call($this, $super, data);
+                      };
 
-                    return block ? block.call($this, callBlock, data) : callBlock();
-                  }, __$blocks['value'](_$no, [value[$key], $label])), 0, 'k-select-text'), _$cc(Icon, {
-                    'className': 'ion-ios-close k-select-close',
-                    'ev-click': this.delete.bind(this, $key),
-                    'hoverable': !disabled
-                  })], 4, 'k-select-tag', null, isStringOrNumber($label) ? $label : isStringOrNumber(value[$key]) ? value[$key] : undefined);
-                }, $this);
-              }, __$blocks['values'] = function ($super, data) {
-                var block = _valuesInstanceProperty($blocks);
+                      return block ? block.call($this, callBlock, data) : callBlock();
+                    }, __$blocks['value'](_$no, [value[$key], $label]))
+                  }, isStringOrNumber($label) ? $label : isStringOrNumber(value[$key]) ? value[$key] : $key);
+                }, $this)
+              }) : undefined;
+            }, __$blocks['values'] = function ($super, data) {
+              var block = _valuesInstanceProperty($blocks);
 
-                var callBlock = function callBlock() {
-                  return _valuesInstanceProperty(_$blocks).call($this, $super, data);
-                };
+              var callBlock = function callBlock() {
+                return _valuesInstanceProperty(_$blocks).call($this, $super, data);
+              };
 
-                return block ? block.call($this, callBlock, data) : callBlock();
-              }, _valuesInstanceProperty(__$blocks).call(__$blocks, _$no, [value, label]))
-            }), filterable ? _$cc(Input, {
+              return block ? block.call($this, callBlock, data) : callBlock();
+            }, _valuesInstanceProperty(__$blocks).call(__$blocks, _$no, [value, label])), filterable ? _$cc(Input, {
               'className': 'k-select-input',
               'value': keywords,
               'ev-$change:value': onInput,
@@ -158,11 +170,9 @@ export default function ($props, $blocks, $__proto__) {
               'size': size,
               'key': 'filter',
               'readonly': !show,
-              'waveDisabled': true
-            }, 'filter', inputRef) : undefined], 0, _$cn({
-              "k-select-values": true,
-              "k-with-values": _valuesInstanceProperty($blocks)
-            }), null, 'values')
+              'waveDisabled': true,
+              'flat': flat
+            }, 'filter', inputRef) : undefined], 0, 'k-select-values', null, 'values')
           })], 0, 'k-select-main'), !hideIcon || clearable || loading || $blocks.suffix ? _$ce(2, 'span', [clearable && !disabled ? _$cc(Icon, {
             'className': _$cn({
               "k-select-clear ion-ios-close": true,
@@ -172,10 +182,8 @@ export default function ($props, $blocks, $__proto__) {
             'hoverable': true
           }) : undefined, _$ce(2, 'span', (_$blocks['suffix'] = function ($super) {
             return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? _$cc(Icon, {
-              'className': _$cn({
-                "k-select-arrow ion-ios-arrow-down": true,
-                'k-disabled': $props.isDisableArrow
-              })
+              'className': 'k-select-arrow ion-ios-arrow-down',
+              'disabled': $props.isDisableArrow
             }) : undefined;
           }, __$blocks['suffix'] = function ($super, data) {
             var block = $blocks['suffix'];

package/components/select/index.spec.js

@@ -73,7 +73,7 @@ describe('Select', function () {
           case 5:
             dropdown = getElement('.k-select-menu');
             expect(dropdown.innerHTML).to.matchSnapshot();
-            close = element.querySelector('.k-select-close');
+            close = element.querySelector('.k-tag-close');
             close.click();
             _context2.next = 11;
             return wait();
@@ -180,7 +180,7 @@ describe('Select', function () {
             expect(dropdown.innerHTML).to.matchSnapshot();
             expect(instance.get('days')).to.eql(['Monday', 'Tuesday']); // delete
 
-            deleteBtn = element.querySelector('.k-select-close');
+            deleteBtn = element.querySelector('.k-tag-close');
             deleteBtn.click();
             _context5.next = 17;
             return wait();

package/components/select/menu.vdt.js

@@ -46,7 +46,7 @@ export default function ($props, $blocks, $__proto__) {
 
     children = [_$cc(Tabs, {
       'vertical': true,
-      'type': 'border-card',
+      'type': 'card',
       'value': activeIndex.value,
       'ev-$change:value': activeIndex.set,
       'children': _$ma(labels, function ($value, $key) {

package/components/select/styles.js

@@ -1,4 +1,5 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, sizes, getRight, getLeft } from '../../styles/utils';
@@ -33,10 +34,6 @@ var defaults = deepDefaults({
     return "1px solid " + theme.color.primary;
   },
 
-  get iconColor() {
-    return theme.color.placeholder;
-  },
-
   get activeColor() {
     return theme.color.primary;
   },
@@ -46,7 +43,6 @@ var defaults = deepDefaults({
   },
 
   suffixGap: '10px',
-  disabledArrowColor: '#e5e5e5',
   clearGap: "8px",
 
   get placeholderColor() {
@@ -94,7 +90,7 @@ var defaults = deepDefaults({
   },
   tag: {
     margin: "3px 8px 3px 0",
-    padding: "3px 8px",
+    padding: "1px 8px",
 
     get borderRadius() {
       return theme.borderRadius;
@@ -104,13 +100,13 @@ var defaults = deepDefaults({
       return theme.color.bg;
     },
 
-    disabledBgColor: '#eee',
+    disabledBgColor: '#f8f9fa',
     delete: {
       gap: "8px",
       fontSize: '14px',
 
       get color() {
-        return theme.color.placeholder;
+        return theme.color.lightBlack;
       }
 
     }
@@ -146,6 +142,13 @@ var defaults = deepDefaults({
       gap: "8px",
       btnGap: "8px"
     }
+  },
+  // flat
+  flat: {
+    get color() {
+      return theme.color.lightBlack;
+    }
+
   }
 }, sizes.reduce(function (memo, size) {
   memo[size] = {
@@ -159,26 +162,9 @@ var defaults = deepDefaults({
 
     get fontSize() {
       return theme[size].fontSize;
-    },
+    }
 
-    multipleGap: "1px",
-    multipleMargin: "0 2px 1px 0"
   };
-
-  if (size === 'large') {
-    // use default padding for large size
-    Object.defineProperty(memo.large, 'padding', {
-      get: function get() {
-        return "0 " + theme.default.padding;
-      }
-    });
-    Object.defineProperty(memo.large, 'fontSize', {
-      get: function get() {
-        return theme.default.fontSize;
-      }
-    });
-  }
-
   return memo;
 }, {}));
 var select;
@@ -188,12 +174,12 @@ setDefault(function () {
   }).select;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";width:100%;&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}.k-select-text{max-width:calc(100% - 18px);word-break:break-word;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";color:", select.tag.delete.color, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}.k-input .k-input-inner{background:transparent;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}.k-tags{padding:3px 0;}.k-tag{word-break:break-word;height:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];
     var className = /*#__PURE__*/css("font-size:", styles.fontSize, ";min-height:", styles.height, ";padding:", styles.padding, ";");
     if (size === 'default') return className;
     return /*#__PURE__*/css("&.k-", size, "{", className, ";}");
-  }), "&.k-inline{width:auto;border:none;min-height:0;background:transparent;.k-select-placeholder,.k-select-value{line-height:inherit;}}");
+  }), "&.k-inline{width:auto;border:none;min-height:0;background:transparent;.k-select-placeholder,.k-select-value{line-height:inherit;}}&.k-flat{border:none;background:", theme.color.bg, ";color:", _flatInstanceProperty(defaults).color, ";.k-tag{background:", select.tag.disabledBgColor, ";}}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-tag{background:", select.tag.disabledBgColor, ";}}&.k-nowrap{.k-select-values{display:flex;align-items:center;}.k-tags{flex:1;}.k-select-text{white-space:nowrap;overflow:hidden;text-overlay:ellipsis;}}");
 }
 export function makeMenuStyles() {
   var searchable = select.searchable;

package/components/select/useDraggble.d.ts

@@ -0,0 +1,2 @@
+import type { TagsDragEndParam } from '../tag';
+export declare function useDraggable(): ({ key, from, to }: TagsDragEndParam) => void;

package/components/select/useDraggble.js

@@ -0,0 +1,11 @@
+import { useInstance } from 'intact-react';
+import { swap } from '../utils';
+export function useDraggable() {
+  var instance = useInstance();
+  return function onEnd(_ref) {
+    var key = _ref.key,
+        from = _ref.from,
+        to = _ref.to;
+    instance.set('value', swap(instance.get('value'), from, to));
+  };
+}

package/components/select/useNowrap.d.ts

@@ -0,0 +1,3 @@
+export declare function useNowrap(): {
+    containerRef: import('intact-react').RefObject<HTMLDivElement>;
+};

package/components/select/useNowrap.js

@@ -0,0 +1,19 @@
+import { useInstance, createRef } from 'intact-react';
+export function useNowrap() {
+  var instance = useInstance();
+  var containerRef = createRef();
+  instance.watch('value', refresh, {
+    presented: true
+  });
+
+  function refresh() {
+    if (!instance.get('multiple')) return;
+    var container = containerRef.value;
+    var width = container.getBoundingClientRect().width;
+    console.log('aaa', width);
+  }
+
+  return {
+    containerRef: containerRef
+  };
+}