@king-design/react 3.0.1 → 3.1.0-beta.0

package/components/select/menu.vdt.js

@@ -1,4 +1,4 @@
-import { createUnknownComponentVNode as _$cc, map as _$ma, createElementVNode as _$ce, extend as _$ex, EMPTY_OBJ as _$em, className as _$cn } from 'intact-react';
+import { createUnknownComponentVNode as _$cc, map as _$ma, createElementVNode as _$ce, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em } from 'intact-react';
 import { DropdownMenu } from '../dropdown';
 import { _$ } from '../../i18n';
 import { makeMenuStyles } from './styles';
@@ -10,9 +10,6 @@ import { Button } from '../button';
 import { Icon } from '../icon';
 import { context } from './useSearchable';
 import { Tabs, Tab } from '../tabs';
-var _$tmp0 = {
-  'className': 'k-icon-search'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -29,11 +26,8 @@ export default function ($props, $blocks, $__proto__) {
       searchable = _this$select$get.searchable,
       multiple = _this$select$get.multiple;
 
-  var classNameObj = (_classNameObj = {
-    'k-select-menu': true,
-    'k-card': card,
-    'k-searchable': searchable
-  }, _classNameObj[className] = className, _classNameObj[makeMenuStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-select-menu"] = true, _classNameObj[k + "-card"] = card, _classNameObj[k + "-searchable"] = searchable, _classNameObj[className] = className, _classNameObj[makeMenuStyles(k)] = true, _classNameObj);
 
   if (card) {
     var _this$card = this.card,
@@ -61,7 +55,7 @@ export default function ($props, $blocks, $__proto__) {
   }
 
   if (isEmptyChildren(children)) {
-    children = _$ce(2, 'div', _$('无数据'), 0, 'k-select-empty');
+    children = _$ce(2, 'div', _$('无数据'), 0, _$cn(k + "-select-empty"));
   }
 
   if (searchable) {
@@ -90,7 +84,9 @@ export default function ($props, $blocks, $__proto__) {
               __$blocks = _$ex({}, $blocks);
 
           return (_$blocks['suffix'] = function ($super) {
-            return _$cc(Icon, _$tmp0);
+            return _$cc(Icon, {
+              'className': _$cn(k + "-icon-search")
+            });
           }, __$blocks['suffix'] = function ($super, data) {
             var block = $blocks['suffix'];
 
@@ -116,7 +112,7 @@ export default function ($props, $blocks, $__proto__) {
         'size': 'small',
         'ev-click': unselectAll,
         'children': _$('清空')
-      })], 4, 'k-select-op') : undefined], 0, 'k-select-header'), _$ce(2, 'div', children, 0, 'k-select-body'), multiple ? _$ce(2, 'div', [_$cc(Button, {
+      })], 4, _$cn(k + "-select-op")) : undefined], 0, _$cn(k + "-select-header")), _$ce(2, 'div', children, 0, _$cn(k + "-select-body")), multiple ? _$ce(2, 'div', [_$cc(Button, {
         'size': 'small',
         'ev-click': this.select.hide,
         'children': _$('取消')
@@ -125,7 +121,7 @@ export default function ($props, $blocks, $__proto__) {
         'size': 'small',
         'ev-click': confirm,
         'children': _$('确定')
-      })], 4, 'k-select-footer') : undefined]
+      })], 4, _$cn(k + "-select-footer")) : undefined]
     });
   }
 

package/components/select/option.d.ts

@@ -8,6 +8,7 @@ export declare class Option extends Component<OptionProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<OptionProps>>;
     private select;
+    private config;
     private onSelect;
     private isActive;
 }

package/components/select/option.js

@@ -6,6 +6,7 @@ import { Component, inject } from 'intact-react';
 import template from './option.vdt';
 import { bind, toggleArray } from '../utils';
 import { SELECT } from './constants';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: {
     required: true
@@ -27,6 +28,7 @@ export var Option = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.select = inject(SELECT);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/select/option.vdt.js

@@ -6,10 +6,6 @@ import { isEmptyChildren } from '../utils';
 import { Icon } from '../icon';
 import { Checkbox } from '../checkbox';
 import { context } from './useSearchable';
-var _$tmp0 = {
-  'className': 'k-select-checkmark ion-ios-checkmark-empty',
-  'color': 'primary'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -28,10 +24,9 @@ export default function ($props, $blocks, $__proto__) {
       multiple = _this$select$get.multiple,
       searchable = _this$select$get.searchable;
 
+  var k = this.config.k;
   var isActive = this.isActive();
-  var classNameObj = (_classNameObj = {
-    'k-select-option': true
-  }, _classNameObj[className] = className, _classNameObj['k-active'] = isActive, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-select-option"] = true, _classNameObj[className] = className, _classNameObj[k + "-active"] = isActive, _classNameObj);
 
   var _children = isEmptyChildren(children) ? label : children;
 
@@ -57,7 +52,10 @@ export default function ($props, $blocks, $__proto__) {
     'hideOnSelect': !multiple,
     'children': [_children, !searchable ? _$cc(Transition, {
       'name': 'k-scale',
-      'children': multiple && isActive ? _$cc(Icon, _$tmp0) : undefined
+      'children': multiple && isActive ? _$cc(Icon, {
+        'className': _$cn(k + "-select-checkmark ion-ios-checkmark-empty"),
+        'color': 'primary'
+      }) : undefined
     }) : undefined]
   });
 }

package/components/select/styles.d.ts

@@ -1,4 +1,4 @@
 import '../../styles/global';
-export default function makeStyles(): string;
-export declare function makeMenuStyles(): string;
-export declare function makeGroupStyles(): string;
+export default function makeStyles(k: string): string;
+export declare function makeMenuStyles(k: string): string;
+export declare function makeGroupStyles(k: string): string;

package/components/select/styles.js

@@ -173,18 +173,18 @@ setDefault(function () {
     select: defaults
   }).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{display:flex;align-items:center;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-flex;align-items:center;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;max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+export default function makeStyles(k) {
+  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{display:flex;align-items:center;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-flex;align-items:center;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:bre.", k, "-word;height:auto;max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}", _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-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;}}");
+    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, "-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() {
+export function makeMenuStyles(k) {
   var searchable = select.searchable;
-  return /*#__PURE__*/css("min-width:auto;max-height:", select.menuMaxHeight, ";overflow:auto;&:not([class*=\"-active\"]){transition:left ", select.transition, ",top ", select.transition, ";}.k-select-empty{padding:", select.empty.padding, ";color:", select.empty.color, ";text-align:center;}.k-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&.k-active{color:", select.activeColor, ";}}&.k-card{display:flex;height:", select.card.height, ";.k-tabs{border:none;overflow:auto;}.k-select-group{flex:1;overflow:auto;}.k-select-option.k-hover{background:", select.card.itemHoverBgColor, ";color:", select.card.itemHoverColor, ";}}&.k-searchable{max-height:none;padding:", searchable.padding, ";.k-select-option{padding:", searchable.optionPadding, ";}}.k-select-header{display:flex;padding:", searchable.header.padding, ";border-bottom:", searchable.border, ";margin-bottom:", searchable.header.gap, ";}.k-select-op{white-space:nowrap;.k-btn{padding:", searchable.header.btnPadding, ";margin-left:", searchable.header.btnGap, ";}}.k-select-body{max-height:", select.menuMaxHeight, ";overflow:auto;}.k-select-footer{border-top:", searchable.border, ";padding:", searchable.footer.padding, ";text-align:right;margin-top:", searchable.footer.gap, ";.k-btn{margin-left:", searchable.footer.btnGap, ";}}.k-select-option{.k-checkbox{margin:0 -", getRight(searchable.optionPadding), " 0 -", getLeft(searchable.optionPadding), ";padding:", searchable.optionPadding, ";}}.k-select-checkmark{float:right;height:100%;font-size:", select.multiple.checkmark.fontSize, ";}");
+  return /*#__PURE__*/css("min-width:auto;max-height:", select.menuMaxHeight, ";overflow:auto;&:not([class*=\"-active\"]){transition:left ", select.transition, ",top ", select.transition, ";}.", k, "-select-empty{padding:", select.empty.padding, ";color:", select.empty.color, ";text-align:center;}.", k, "-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&.", k, "-active{color:", select.activeColor, ";}}&.", k, "-card{display:flex;height:", select.card.height, ";.", k, "-tabs{border:none;overflow:auto;}.", k, "-select-group{flex:1;overflow:auto;}.", k, "-select-option.", k, "-hover{background:", select.card.itemHoverBgColor, ";color:", select.card.itemHoverColor, ";}}&.", k, "-searchable{max-height:none;padding:", searchable.padding, ";.", k, "-select-option{padding:", searchable.optionPadding, ";}}.", k, "-select-header{display:flex;padding:", searchable.header.padding, ";border-bottom:", searchable.border, ";margin-bottom:", searchable.header.gap, ";}.", k, "-select-op{white-space:nowrap;.", k, "-btn{padding:", searchable.header.btnPadding, ";margin-left:", searchable.header.btnGap, ";}}.", k, "-select-body{max-height:", select.menuMaxHeight, ";overflow:auto;}.", k, "-select-footer{border-top:", searchable.border, ";padding:", searchable.footer.padding, ";text-align:right;margin-top:", searchable.footer.gap, ";.", k, "-btn{margin-left:", searchable.footer.btnGap, ";}}.", k, "-select-option{.", k, "-checkbox{margin:0 -", getRight(searchable.optionPadding), " 0 -", getLeft(searchable.optionPadding), ";padding:", searchable.optionPadding, ";}}.", k, "-select-checkmark{float:right;height:100%;font-size:", select.multiple.checkmark.fontSize, ";}");
 }
-export function makeGroupStyles() {
-  return /*#__PURE__*/css(".k-select-group-label{color:", select.group.labelColor, ";padding:", select.group.labelPadding, ";}");
+export function makeGroupStyles(k) {
+  return /*#__PURE__*/css(".", k, "-select-group-label{color:", select.group.labelColor, ";padding:", select.group.labelPadding, ";}");
 }

package/components/select/useSearchable.d.ts

@@ -1,6 +1,7 @@
 export declare const context: {
     Provider: import('intact-react').ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
+    useContext: () => import("intact").RefObject<any>;
 };
 export declare function useSearchable(): {
     checkedKeys: import("../../hooks/useState").State<any[]>;

package/components/skeleton/item.d.ts

@@ -12,5 +12,6 @@ export declare class SkeletonItem extends Component<SkeletonItemProps, SkeletonI
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<SkeletonItemProps>>;
     static defaults: () => Partial<SkeletonItemProps>;
+    private config;
 }
 export {};

package/components/skeleton/item.js

@@ -1,6 +1,8 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component } from 'intact-react';
 import template from './item.vdt';
+import { useConfigContext } from '../config';
 export var ItemTypeMap = ['text', 'avator', 'image', 'button', 'input'];
 var typeDefs = {
   type: ItemTypeMap
@@ -16,7 +18,17 @@ export var SkeletonItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(SkeletonItem, _Component);
 
   function SkeletonItem() {
-    return _Component.apply(this, arguments) || this;
+    var _context;
+
+    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(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    return _this;
   }
 
   return SkeletonItem;

package/components/skeleton/item.vdt.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact-react';
-import { makeItemStyles } from './style';
+import { makeItemStyles } from './styles';
 import { getRestProps } from '../utils';
 var _$tmp0 = {
   'd': 'M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z'
@@ -19,12 +19,9 @@ export default function ($props, $blocks, $__proto__) {
   var _this$get = this.get(),
       type = _this$get.type;
 
-  var classNameObj = (_classNameObj = {
-    'k-skeleton-item': true
-  }, _classNameObj[makeItemStyles()] = true, _classNameObj);
-  var ItemklsObj = (_ItemklsObj = {
-    'k-skeleton-item-box': true
-  }, _ItemklsObj["skeleton-item-" + type] = true, _ItemklsObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-skeleton-item"] = true, _classNameObj[makeItemStyles(k)] = true, _classNameObj);
+  var ItemklsObj = (_ItemklsObj = {}, _ItemklsObj[k + "-skeleton-item-box"] = true, _ItemklsObj[k + "-skeleton-item-" + type] = true, _ItemklsObj);
 
   var skeletonItem = _$cv('div', _extends({
     'className': _$cn(ItemklsObj)

package/components/skeleton/skeleton.d.ts

@@ -14,4 +14,5 @@ export declare class Skeleton extends Component<SkeletonProps, SkeletonEvents, S
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<SkeletonProps>>;
     static defaults: () => Partial<SkeletonProps>;
+    private config;
 }

package/components/skeleton/skeleton.js

@@ -1,6 +1,8 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component } from 'intact-react';
 import template from './skeleton.vdt';
+import { useConfigContext } from '../config';
 var typeDefs = {
   loading: Boolean,
   animated: Boolean,
@@ -20,7 +22,17 @@ export var Skeleton = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Skeleton, _Component);
 
   function Skeleton() {
-    return _Component.apply(this, arguments) || this;
+    var _context;
+
+    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(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    return _this;
   }
 
   return Skeleton;

package/components/skeleton/skeleton.vdt.js

@@ -1,7 +1,7 @@
 import _fillInstanceProperty from "@babel/runtime-corejs3/core-js/instance/fill";
 import { map as _$ma, createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn } from 'intact-react';
 import { SkeletonItem } from './item';
-import { makeStyles, kls } from './style';
+import { makeStyles, kls } from './styles';
 var _$tmp0 = {
   'type': 'avator'
 };
@@ -20,6 +20,7 @@ export default function ($props, $blocks, $__proto__) {
       loading = _this$get.loading,
       size = _this$get.size;
 
+  var k = this.config.k;
   var targetRows = typeof rows !== 'number' ? 3 : rows < 1 ? 1 : parseInt(rows);
 
   var skeletonList = _fillInstanceProperty(_context = Array(targetRows + 2)).call(_context);
@@ -28,10 +29,7 @@ export default function ($props, $blocks, $__proto__) {
     return _$cc(SkeletonItem);
   }, $this);
 
-  var classNameObj = (_classNameObj = {
-    'k-skeleton': true,
-    'k-animated': animated
-  }, _classNameObj[makeStyles(size)] = true, _classNameObj);
-  return loading ? _$ce(2, 'div', children ? _$ce(2, 'div', children, 0) : avator ? _$ce(2, 'div', [_$cc(SkeletonItem, _$tmp0), _$ce(2, 'div', skeletonItems, 0, 'k-skeleton-items')], 4, _$cn(kls('avator-box'))) : _$ce(2, 'div', skeletonItems, 0, 'k-skeleton-items'), 2, _$cn(classNameObj)) : undefined;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-skeleton"] = true, _classNameObj[k + "-animated"] = animated, _classNameObj[makeStyles(k, size)] = true, _classNameObj);
+  return loading ? _$ce(2, 'div', children ? _$ce(2, 'div', children, 0) : avator ? _$ce(2, 'div', [_$cc(SkeletonItem, _$tmp0), _$ce(2, 'div', skeletonItems, 0, _$cn(k + "-skeleton-items"))], 4, _$cn(kls('avator-box', k))) : _$ce(2, 'div', skeletonItems, 0, _$cn(k + "-skeleton-items")), 2, _$cn(classNameObj)) : undefined;
 }
 ;

package/components/skeleton/styles.d.ts

@@ -0,0 +1,6 @@
+import '../../styles/global';
+export declare const kls: (className: string, k: string) => string;
+declare type ItemSize = 'default' | 'large' | 'small' | 'mini';
+export declare function makeStyles(k: string, size: ItemSize): string;
+export declare function makeItemStyles(k: string): string;
+export {};

package/components/skeleton/styles.js

@@ -0,0 +1,35 @@
+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 { deepDefaults } from '../../styles/utils';
+import { theme, setDefault } from '../../styles/theme';
+import { css, keyframes } from '@emotion/css';
+import '../../styles/global';
+export var kls = function kls(className, k) {
+  return k + "-skeleton-" + className;
+};
+var defaults = {
+  item: {
+    bgColor: '#dcdde0'
+  }
+};
+var skeleton;
+setDefault(function () {
+  skeleton = deepDefaults(theme, {
+    skeleton: defaults
+  }).skeleton;
+});
+export function makeStyles(k, size) {
+  return /*#__PURE__*/css("&.", k, "-animated{.", kls('item', k), "{&>.", k, "-skeleton-item-box{background:linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);background-size:400% 100%;animation:", skeletonLoading, " 1.4s ease infinite;}}}.", k, "-skeleton-items{.", kls('item', k), ":first-child{.", k, "-skeleton-item-text{width:33%;}}.", kls('item', k), ":last-child{.", k, "-skeleton-item-text{width:61%;}}}.", kls('avator-box', k), "{display:flex;&>div:last-child{flex-grow:1;padding-left:20px;}}.", k, "-skeleton-item-button,.", k, "-skeleton-item-input{height:", theme[size].height, ";}");
+}
+var skeletonLoading = /*#__PURE__*/keyframes(process.env.NODE_ENV === "production" ? {
+  name: "1jmexzm",
+  styles: "0%{background-position:100% 50%;}to{background-position:0 50%;}"
+} : {
+  name: "1jmexzm",
+  styles: "0%{background-position:100% 50%;}to{background-position:0 50%;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+export function makeItemStyles(k) {
+  var skeletonItem = skeleton.item;
+  return /*#__PURE__*/css("&>div{background:", skeletonItem.bgColor, ";}.", k, "-skeleton-item-text{width:100%;height:16px;border-radius:4px;margin-top:16px;}.", k, "-skeleton-item-avator{width:40px;height:40px;border-radius:50%;}.", k, "-skeleton-item-image{display:flex;justify-content:center;align-items:center;width:200px;height:200px;&>svg{width:48px;height:48px;fill:", skeletonItem.bgColor, ";}}.", k, "-skeleton-item-button{width:64px;background:", skeletonItem.bgColor, ";}.", k, "-skeleton-item-input{width:160px;background:", skeletonItem.bgColor, ";}");
+}

package/components/slider/index.d.ts

@@ -44,4 +44,5 @@ export declare class Slider<Range extends boolean = false> extends Component<Sli
     private click;
     private points;
     private marks;
+    private config;
 }

package/components/slider/index.js

@@ -11,6 +11,7 @@ import { useClick } from './useClick';
 import { usePoints } from './usePoints';
 import { useMarks } from './useMarks';
 import { useTooltip } from './useTooltip';
+import { useConfigContext } from '../config';
 var typeDefs = {
   max: Number,
   min: Number,
@@ -73,6 +74,7 @@ export var Slider = /*#__PURE__*/function (_Component) {
     _this.click = useClick(_this.draggable.getSlidingValue, _this.value.fixValue, _this.value.showValue, _this.value.setValue);
     _this.points = usePoints(_this.value.showValue, _this.step);
     _this.marks = useMarks();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/slider/index.vdt.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { noop as _$no, createElementVNode as _$ce, createUnknownComponentVNode as _$cc, extend as _$ex, EMPTY_OBJ as _$em, createVNode as _$cv, className as _$cn, map as _$ma } from 'intact-react';
+import { noop as _$no, createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, createVNode as _$cv, map as _$ma } from 'intact-react';
 import { linkEvent } from 'intact';
 import { Spinner } from '../spinner';
 import { Tooltip } from '../tooltip';
@@ -37,11 +37,8 @@ export default function ($props, $blocks, $__proto__) {
       firstThumbRef = _this$draggable.firstThumbRef,
       secondThumbRef = _this$draggable.secondThumbRef,
       onFocusin = _this$draggable.onFocusin;
-  var classNameObj = (_classNameObj = {
-    'k-slider': true,
-    'k-disabled': disabled,
-    'k-dragging': dragging.value || !animate
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-slider"] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-dragging"] = dragging.value || !animate, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
 
   var _this$styles = this.styles(),
       barStyle = _this$styles.barStyle,
@@ -81,8 +78,8 @@ export default function ($props, $blocks, $__proto__) {
       'disabled': !showTooltip,
       'ref': tooltipRef
     }, tooltipProps, {
-      'className': 'k-slider-tooltip',
-      'children': _$ce(2, 'div', null, 1, 'k-slider-thumb', {
+      'className': _$cn(k + "-slider-tooltip"),
+      'children': _$ce(2, 'div', null, 1, _$cn(k + "-slider-thumb"), {
         'tabindex': disabled ? '-1' : '0',
         'ev-mousedown': onStart,
         'ev-focusin': linkEvent(isFirst, onFocusin),
@@ -106,7 +103,7 @@ export default function ($props, $blocks, $__proto__) {
           return block ? block.call($this, callBlock, data) : callBlock();
         }), __$blocks;
       }.call($this, _$em)
-    }), null, tooltipRef), 2, 'k-slider-thumb-wrapper', {
+    }), null, tooltipRef), 2, _$cn(k + "-slider-thumb-wrapper"), {
       'style': thumbStyle
     });
   };
@@ -118,29 +115,28 @@ export default function ($props, $blocks, $__proto__) {
   var marks = this.marks();
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
-  }, getRestProps(this)), [_$ce(2, 'div', [_$ce(2, 'div', _$ce(2, 'div', [_$ce(2, 'div', null, 1, 'k-slider-bar', {
+  }, getRestProps(this)), [_$ce(2, 'div', [_$ce(2, 'div', _$ce(2, 'div', [_$ce(2, 'div', null, 1, _$cn(k + "-slider-bar"), {
     'style': barStyle
   }), createThumb(thumbFirstStyle, true, firstThumbRef, range ? value[0] : value, firstTooltipRef), range ? createThumb(thumbSecondStyle, false, secondThumbRef, value[1], secondTooltipRef) : undefined, _$ma(points, function ($value, $key) {
-    return _$ce(2, 'i', null, 1, _$cn({
-      'k-slider-point': true,
-      'k-active': $value.active
-    }), {
+    var _$cn2;
+
+    return _$ce(2, 'i', null, 1, _$cn((_$cn2 = {}, _$cn2[k + "-slider-point"] = true, _$cn2[k + "-active"] = $value.active, _$cn2)), {
       'style': $value.style
     });
-  }, $this)], 0, 'k-slider-track', null, null, trackRef), 2, 'k-slider-track-wrapper', {
+  }, $this)], 0, _$cn(k + "-slider-track"), null, null, trackRef), 2, _$cn(k + "-slider-track-wrapper"), {
     'ev-click': onClickTrack
   }), marks.length ? _$ce(2, 'div', _$ma(marks, function ($value, $key) {
-    return _$ce(2, 'span', $value.text, 0, _$cn({
-      'k-active': $value.active
-    }), {
+    var _$cn3;
+
+    return _$ce(2, 'span', $value.text, 0, _$cn((_$cn3 = {}, _$cn3[k + "-active"] = $value.active, _$cn3)), {
       'style': $value.style,
       'ev-click': linkEvent($value.value, setOneValue)
     });
-  }, $this), 4, 'k-slider-marks') : showEnd ? _$ce(2, 'div', [_$ce(2, 'span', min + unit, 0, null, {
+  }, $this), 4, _$cn(k + "-slider-marks")) : showEnd ? _$ce(2, 'div', [_$ce(2, 'span', min + unit, 0, null, {
     'ev-click': linkEvent(min, setOneValue)
   }), _$ce(2, 'span', max + unit, 0, null, {
     'ev-click': linkEvent(max, setOneValue)
-  })], 4, 'k-slider-ends') : undefined], 0, 'k-slider-main'), showInput ? _$ce(2, 'div', function () {
+  })], 4, _$cn(k + "-slider-ends")) : undefined], 0, _$cn(k + "-slider-main")), showInput ? _$ce(2, 'div', function () {
     var props = {
       disabled: disabled,
       min: min,
@@ -153,11 +149,11 @@ export default function ($props, $blocks, $__proto__) {
     return [_$cc(Spinner, _extends({}, props, {
       'value': range ? value[0] : value,
       'ev-$change:value': range ? onLeftSpinnerChange : onSpinnerChange
-    }, spinnerProps)), range ? [_$ce(2, 'span', '-', 16, 'k-slider-spinner-sep'), _$cc(Spinner, _extends({}, props, {
+    }, spinnerProps)), range ? [_$ce(2, 'span', '-', 16, _$cn(k + "-slider-spinner-sep")), _$cc(Spinner, _extends({}, props, {
       'min': value[0],
       'value': range ? value[1] : value,
       'ev-$change:value': onRightSpinnerChange
     }, spinnerProps))] : undefined];
-  }(), 0, 'k-slider-spinner') : undefined]);
+  }(), 0, _$cn(k + "-slider-spinner")) : undefined]);
 }
 ;

package/components/slider/styles.d.ts

@@ -1,2 +1,2 @@
 import '../../styles/global';
-export declare function makeStyles(): string;
+export declare function makeStyles(k: string): string;

package/components/slider/styles.js

@@ -85,6 +85,6 @@ setDefault(function () {
     slider: defaults
   }).slider;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("position:relative;outline:none;display:flex;.k-slider-main{flex:1;}.k-slider-track-wrapper{cursor:pointer;height:32px;display:flex;align-items:center;}.k-slider-track{flex:1;height:", slider.height, ";background-color:", slider.bgColor, ";border-radius:", slider.borderRadius, ";position:relative;user-select:none;}.k-slider-bar{background-color:", slider.barColor, ";position:absolute;height:100%;border-radius:", slider.borderRadius, ";transition:all ", slider.transition, ";}.k-slider-thumb-wrapper{position:absolute;top:50%;transform:translate(-50%, -50%);transition:left ", slider.transition, ";z-index:1;}.k-slider-thumb{box-sizing:content-box;height:", slider.thumb.height, ";width:", slider.thumb.width, ";transition:all ", slider.transition, ";border:", slider.thumb.border, ";border-radius:", slider.thumb.borderRadius, ";background-color:", slider.thumb.bgColor, ";box-shadow:", slider.thumb.boxShadow, ";outline:none;&:hover,&:focus{transform:", slider.thumb.hoverTransform, ";cursor:grab;background-color:", slider.thumb.hoverBgColor, ";}}.k-slider-ends{display:flex;justify-content:space-between;span{cursor:pointer;}}.k-slider-spinner{margin-left:", slider.spinnerGap, ";}.k-slider-spinner-sep{display:inline-block;margin:auto 8px;}&.k-dragging{.k-slider-bar{transition:none;}.k-slider-thumb-wrapper{transition:none;}}&.k-disabled{color:", slider.disabled.color, ";.k-slider-track-wrapper{cursor:not-allowed;}.k-slider-bar{background-color:", slider.disabled.bgColor, ";}.k-slider-thumb{border-color:#fff;background-color:", slider.disabled.bgColor, ";&:hover,&:focus{background-color:", slider.disabled.bgColor, ";cursor:not-allowed;transform:none;}}.k-slider-ends{span{cursor:not-allowed;}}}.k-slider-point{position:absolute;top:calc((", slider.height, " - ", slider.point.height, ") / 2 );width:", slider.point.width, ";height:", slider.point.height, ";background:", slider.point.bgColor, ";transform:translateX(-50%);border-radius:", slider.point.borderRadius, ";border:", slider.point.border, ";&.k-active{border-color:", slider.point.activeBorderColor, ";}}.k-slider-marks{position:relative;height:", slider.marks.height, ";>span{position:absolute;transform:translateX(-50%);white-space:nowrap;cursor:pointer;&:first-child{transform:none;}&:last-child{transform:translateX(-100%);}&.k-active{color:", slider.marks.activeColor, ";}}}.k-slider-tooltip{white-space:nowrap;}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("position:relative;outline:none;display:flex;.", k, "-slider-main{flex:1;}.", k, "-slider-track-wrapper{cursor:pointer;height:32px;display:flex;align-items:center;}.", k, "-slider-track{flex:1;height:", slider.height, ";background-color:", slider.bgColor, ";border-radius:", slider.borderRadius, ";position:relative;user-select:none;}.", k, "-slider-bar{background-color:", slider.barColor, ";position:absolute;height:100%;border-radius:", slider.borderRadius, ";transition:all ", slider.transition, ";}.", k, "-slider-thumb-wrapper{position:absolute;top:50%;transform:translate(-50%, -50%);transition:left ", slider.transition, ";z-index:1;}.", k, "-slider-thumb{box-sizing:content-box;height:", slider.thumb.height, ";width:", slider.thumb.width, ";transition:all ", slider.transition, ";border:", slider.thumb.border, ";border-radius:", slider.thumb.borderRadius, ";background-color:", slider.thumb.bgColor, ";box-shadow:", slider.thumb.boxShadow, ";outline:none;&:hover,&:focus{transform:", slider.thumb.hoverTransform, ";cursor:grab;background-color:", slider.thumb.hoverBgColor, ";}}.", k, "-slider-ends{display:flex;justify-content:space-between;span{cursor:pointer;}}.", k, "-slider-spinner{margin-left:", slider.spinnerGap, ";}.", k, "-slider-spinner-sep{display:inline-block;margin:auto 8px;}&.", k, "-dragging{.", k, "-slider-bar{transition:none;}.", k, "-slider-thumb-wrapper{transition:none;}}&.", k, "-disabled{color:", slider.disabled.color, ";.", k, "-slider-track-wrapper{cursor:not-allowed;}.", k, "-slider-bar{background-color:", slider.disabled.bgColor, ";}.", k, "-slider-thumb{border-color:#fff;background-color:", slider.disabled.bgColor, ";&:hover,&:focus{background-color:", slider.disabled.bgColor, ";cursor:not-allowed;transform:none;}}.", k, "-slider-ends{span{cursor:not-allowed;}}}.", k, "-slider-point{position:absolute;top:calc((", slider.height, " - ", slider.point.height, ") / 2 );width:", slider.point.width, ";height:", slider.point.height, ";background:", slider.point.bgColor, ";transform:translateX(-50%);border-radius:", slider.point.borderRadius, ";border:", slider.point.border, ";&.", k, "-active{border-color:", slider.point.activeBorderColor, ";}}.", k, "-slider-marks{position:relative;height:", slider.marks.height, ";>span{position:absolute;transform:translateX(-50%);white-space:nowrap;cursor:pointer;&:first-child{transform:none;}&:last-child{transform:translateX(-100%);}&.", k, "-active{color:", slider.marks.activeColor, ";}}}.", k, "-slider-tooltip{white-space:nowrap;}");
 }

package/components/spin/index.d.ts

@@ -14,4 +14,5 @@ export declare class Spin extends Component<SpinProps, SpinEvents, SpinBlocks> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<SpinProps>>;
     static defaults: () => Partial<SpinProps>;
+    private config;
 }

package/components/spin/index.js

@@ -1,7 +1,9 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component } from 'intact-react';
 import template from './index.vdt';
 import { sizes } from '../../styles/utils';
+import { useConfigContext } from '../config';
 var typeDefs = {
   size: sizes,
   center: Boolean,
@@ -18,7 +20,17 @@ export var Spin = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Spin, _Component);
 
   function Spin() {
-    return _Component.apply(this, arguments) || this;
+    var _context;
+
+    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(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    return _this;
   }
 
   return Spin;

package/components/spin/index.vdt.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { createElementVNode as _$ce, noop as _$no, createVNode as _$cv, className as _$cn } from 'intact-react';
+import { createElementVNode as _$ce, className as _$cn, noop as _$no, createVNode as _$cv } from 'intact-react';
 import { Transition } from 'intact';
 import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
@@ -26,12 +26,11 @@ export default function ($props, $blocks, $__proto__) {
       className = _this$get.className,
       overlay = _this$get.overlay;
 
-  var classNameObj = (_classNameObj = {
-    'k-spin': true
-  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-center'] = !overlay && center, _classNameObj['k-overlay'] = overlay, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-spin"] = true, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-center"] = !overlay && center, _classNameObj[k + "-overlay"] = overlay, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
 
   var canvas = _$ce(2, 'div', (_$blocks['canvas'] = function ($super) {
-    return _$ce(512, 'svg', _$ce(2, 'circle', null, 1, 'k-spin-circle', _$tmp0), 2, null, _$tmp1);
+    return _$ce(512, 'svg', _$ce(2, 'circle', null, 1, _$cn(k + "-spin-circle"), _$tmp0), 2, null, _$tmp1);
   }, __$blocks['canvas'] = function ($super, data) {
     var block = $blocks['canvas'];
 
@@ -40,10 +39,10 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['canvas'](_$no)), 0, 'k-spin-canvas');
+  }, __$blocks['canvas'](_$no)), 0, _$cn(k + "-spin-canvas"));
 
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
-  }, getRestProps(this)), overlay ? _$ce(2, 'div', canvas, 0, 'k-spin-wrapper') : canvas);
+  }, getRestProps(this)), overlay ? _$ce(2, 'div', canvas, 0, _$cn(k + "-spin-wrapper")) : canvas);
 }
 ;

package/components/spin/styles.d.ts

@@ -1,2 +1,2 @@
 import '../../styles/global';
-export declare function makeStyles(): string;
+export declare function makeStyles(k: string): string;

package/components/spin/styles.js

@@ -21,14 +21,14 @@ setDefault(function () {
     spin: defaults
   }).spin;
 });
-export function makeStyles() {
+export function makeStyles(k) {
   var width = spin.strokeWidth;
   var r = 120 - 60 - width / 2;
   var c = Math.round(2 * 3.14 * r);
   var spinDash = /*#__PURE__*/keyframes("0%{stroke-dasharray:1,", c, ";stroke-dashoffset:0;}50%{stroke-dasharray:", Math.round(c * 0.75), ",", c, ";stroke-dashoffset:", -c * 0.25, ";}to{stroke-dasharray:", Math.round(c * 0.75), ",", c, ";stroke-dashoffset:", -c, ";}");
-  return /*#__PURE__*/css("display:inline-block;.k-spin-canvas{width:", spin.width, ";height:", spin.width, ";animation:k-rotate 2s linear infinite;}.k-spin-circle{stroke-dasharray:", Math.round(c * 0.75), ",", c, ";stroke-dashoffset:0;fill:none;stroke-width:", width, ";stroke:", spin.color, ";r:", r, ";animation:", spinDash, " 1.5s ease-in-out infinite;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-block;.", k, "-spin-canvas{width:", spin.width, ";height:", spin.width, ";animation:.", k, "-rotate 2s linear infinite;}.", k, "-spin-circle{stroke-dasharray:", Math.round(c * 0.75), ",", c, ";stroke-dashoffset:0;fill:none;stroke-width:", width, ";stroke:", spin.color, ";r:", r, ";animation:", spinDash, " 1.5s ease-in-out infinite;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     if (size === 'default') return;
     var width = spin[size + "Width"];
-    return /*#__PURE__*/css("&.k-", size, "{.k-spin-canvas{width:", width, ";height:", width, ";}}");
-  }), " &.k-center,&.k-overlay .k-spin-wrapper{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&.k-overlay{position:absolute;z-index:", theme.midZIndex, ";top:0;bottom:0;left:0;right:0;background:rgba(255, 255, 255, .5);}");
+    return /*#__PURE__*/css("&.", k, "-", size, "{.", k, "-spin-canvas{width:", width, ";height:", width, ";}}");
+  }), " &.", k, "-center,&.", k, "-overlay .", k, "-spin-wrapper{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&.", k, "-overlay{position:absolute;z-index:", theme.midZIndex, ";top:0;bottom:0;left:0;right:0;background:rgba(255, 255, 255, .5);}");
 }

package/components/spinner/index.d.ts

@@ -37,6 +37,7 @@ export declare class Spinner extends Component<SpinnerProps, SpinnerEvents> {
     private formatter;
     private value;
     private change;
+    private config;
     private isDisabledDecrease;
     private isDisabledIncrease;
 }