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

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

@@ -27,10 +27,8 @@ export default function ($props, $blocks, $__proto__) {
       onClick = _this$activeValue.onClick,
       onMouseEnter = _this$activeValue.onMouseEnter,
       onMouseLeaveComponent = _this$activeValue.onMouseLeaveComponent;
-  var classNameObj = (_classNameObj = {
-    'k-rate': true,
-    'k-disabled': disabled
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-rate"] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var icon = (_$blocks['icon'] = function ($super) {
     return _$cc(Icon, _$tmp0);
   }, __$blocks['icon'] = function ($super, data) {
@@ -55,13 +53,11 @@ export default function ($props, $blocks, $__proto__) {
   for (var i = 0; i < count; i++) {
     var _$cn2;
 
-    var _className = activeValue.value >= i + 1 ? 'k-full' : activeValue.value === i + 0.5 ? 'k-half' : null;
+    var _className = activeValue.value >= i + 1 ? [k + "-full"] : activeValue.value === i + 0.5 ? [k + "-half"] : null;
 
     var halfStep = half ? i + 0.5 : i + 1;
 
-    var item = _$ce(2, 'div', [rateIcon("k-rate-first", halfStep), _$ct('\n            '), rateIcon("k-rate-second", i + 1)], 0, _$cn((_$cn2 = {
-      "k-rate-item": true
-    }, _$cn2[_className] = _className, _$cn2)));
+    var item = _$ce(2, 'div', [rateIcon(k + "-rate-first", halfStep), _$ct('\n            '), rateIcon(k + "-rate-second", i + 1)], 0, _$cn((_$cn2 = {}, _$cn2[k + "-rate-item"] = true, _$cn2[_className] = _className, _$cn2)));
 
     items.push(item);
   }

package/es/components/rate/styles.d.ts

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

package/es/components/rate/styles.js

@@ -25,6 +25,6 @@ setDefault(function () {
     rate: defaults
   }).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, ";color:inherit;}&.k-disabled{.k-rate-item{cursor:default;&:hover{transform:none;}}}");
+export function makeStyles(k) {
+  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/es/components/scrollSelect/index.d.ts

@@ -23,5 +23,6 @@ export declare class ScrollSelect<T = any> extends Component<ScrollSelectProps<T
     private list;
     private translate;
     private mouseEvents;
+    private config;
 }
 export {};

package/es/components/scrollSelect/index.js

@@ -5,6 +5,7 @@ import template from './index.vdt';
 import { useList } from './useList';
 import { useTranslate } from './useTranslate';
 import { useMouseEvents } from './useMouseEvents';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: null,
   count: Number,
@@ -36,6 +37,7 @@ export var ScrollSelect = /*#__PURE__*/function (_Component) {
     _this.list = useList();
     _this.translate = useTranslate();
     _this.mouseEvents = useMouseEvents(_this.translate.translate, _this.list);
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -16,11 +16,8 @@ export default function ($props, $blocks, $__proto__) {
       disabled = _this$get.disabled,
       disable = _this$get.disable;
 
-  var classNameObj = (_classNameObj = {
-    'k-scroll-select': true,
-    'k-dragging': this.mouseEvents.dragging.value,
-    'k-disabled': disabled
-  }, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-scroll-select"] = true, _classNameObj[k + "-dragging"] = this.mouseEvents.dragging.value, _classNameObj[k + "-disabled"] = disabled, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var _this$mouseEvents = this.mouseEvents,
       onStart = _this$mouseEvents.onStart,
       onWheel = _this$mouseEvents.onWheel,
@@ -28,14 +25,12 @@ export default function ($props, $blocks, $__proto__) {
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
   }), [_$ce(2, 'div', _$ma(this.list.data.value, function ($value, $key) {
-    return _$ce(2, 'div', $value.label, 0, _$cn({
-      "k-scroll-select-item": true,
-      "k-active": $value.value === value,
-      "k-disabled": disabled || disable && disable.call(this, $value.value)
-    }), {
+    var _$cn2;
+
+    return _$ce(2, 'div', $value.label, 0, _$cn((_$cn2 = {}, _$cn2[k + "-scroll-select-item"] = true, _$cn2[k + "-active"] = $value.value === value, _$cn2[k + "-disabled"] = disabled || disable && disable.call(this, $value.value), _$cn2)), {
       'ev-click': !disabled ? onClick.bind(this, $value, $key) : null
     });
-  }, $this), 4, 'k-scroll-select-wrapper', {
+  }, $this), 4, _$cn(k + "-scroll-select-wrapper"), {
     'style': {
       transform: "translateY(" + this.translate.translate.value + "px)",
       marginTop: this.mouseEvents.marginTop.value + "px"
@@ -52,6 +47,6 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['append'](_$no)), 0, 'k-scroll-select-append') : undefined, _$ce(2, 'div', null, 1, 'k-scroll-select-border')]);
+  }, __$blocks['append'](_$no)), 0, _$cn(k + "-scroll-select-append")) : undefined, _$ce(2, 'div', null, 1, _$cn(k + "-scroll-select-border"))]);
 }
 ;

package/es/components/scrollSelect/styles.d.ts

@@ -14,4 +14,4 @@ declare const defaults: {
 };
 declare let scrollSelect: typeof defaults;
 export { scrollSelect };
-export declare function makeStyles(): string;
+export declare function makeStyles(k: string): string;

package/es/components/scrollSelect/styles.js

@@ -39,6 +39,6 @@ setDefault(function () {
   }).scrollSelect;
 });
 export { scrollSelect };
-export function makeStyles() {
-  return /*#__PURE__*/css("text-align:center;overflow:hidden;max-height:100%;height:", scrollSelect.height, ";user-select:none;position:relative;.k-scroll-select-wrapper{transition:transform ", scrollSelect.transition, ";}&.k-dragging{.k-scroll-select-wrapper{transition:none;}}&.k-disabled{.k-scroll-select-item{cursor:not-allowed;color:", scrollSelect.item.disabledColor, ";}}.k-scroll-select-item{line-height:", scrollSelect.item.height, ";color:", scrollSelect.item.color, ";cursor:pointer;white-space:nowrap;&:hover{background:", scrollSelect.item.hoverBgColor, ";}&.k-active{color:", scrollSelect.item.activeColor, ";font-size:", scrollSelect.item.activeFontSize, ";}&.k-disabled{color:", scrollSelect.item.disabledColor, ";}}.k-scroll-select-append{position:absolute;top:50%;right:0;transform:translateY(-50%);}.k-scroll-select-border{position:absolute;width:100%;top:50%;margin-top:calc(-", scrollSelect.item.height, " / 2);height:", scrollSelect.item.height, ";border-top:", scrollSelect.item.border, ";border-bottom:", scrollSelect.item.border, ";pointer-events:none;}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("text-align:center;overflow:hidden;max-height:100%;height:", scrollSelect.height, ";user-select:none;position:relative;.", k, "-scroll-select-wrapper{transition:transform ", scrollSelect.transition, ";}&.", k, "-dragging{.", k, "-scroll-select-wrapper{transition:none;}}&.", k, "-disabled{.", k, "-scroll-select-item{cursor:not-allowed;color:", scrollSelect.item.disabledColor, ";}}.", k, "-scroll-select-item{line-height:", scrollSelect.item.height, ";color:", scrollSelect.item.color, ";cursor:pointer;white-space:nowrap;&:hover{background:", scrollSelect.item.hoverBgColor, ";}&.", k, "-active{color:", scrollSelect.item.activeColor, ";font-size:", scrollSelect.item.activeFontSize, ";}&.", k, "-disabled{color:", scrollSelect.item.disabledColor, ";}}.", k, "-scroll-select-append{position:absolute;top:50%;right:0;transform:translateY(-50%);}.", k, "-scroll-select-border{position:absolute;width:100%;top:50%;margin-top:calc(-", scrollSelect.item.height, " / 2);height:", scrollSelect.item.height, ";border-top:", scrollSelect.item.border, ";border-bottom:", scrollSelect.item.border, ";pointer-events:none;}");
 }

package/es/components/select/base.d.ts

@@ -51,6 +51,10 @@ export declare abstract class BaseSelect<T extends BaseSelectProps<any> = BaseSe
     };
     private focusout;
     private draggable;
+    protected config: {
+        cls: (name: string) => string;
+        readonly k: string;
+    };
     init(): void;
     protected abstract getPlaceholder(): Children;
     protected abstract getLabel(): Children;

package/es/components/select/base.js

@@ -14,6 +14,7 @@ import { useInput } from './useInput';
 import { useFocusout } from './useFocusout';
 import { isNullOrUndefined } from 'intact-shared';
 import { useDraggable } from './useDraggble';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: null,
   multiple: Boolean,
@@ -65,6 +66,7 @@ export var BaseSelect = /*#__PURE__*/function (_Component) {
     _this.input = useInput(_this.resetKeywords);
     _this.focusout = useFocusout();
     _this.draggable = useDraggable();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/select/base.vdt.js

@@ -1,7 +1,7 @@
 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, extend as _$ex, EMPTY_OBJ as _$em } from 'intact';
+import { createUnknownComponentVNode as _$cc, className as _$cn, createVNode as _$cv, createElementVNode as _$ce, noop as _$no, map as _$ma, extend as _$ex, EMPTY_OBJ as _$em } from 'intact';
 import { TransitionGroup, Transition } from 'intact';
 import { Input } from '../input';
 import { Icon } from '../icon';
@@ -16,9 +16,6 @@ var _$tmp0 = {
   'className': 'ion-load-c',
   'rotate': true
 };
-var _$tmp1 = {
-  'className': 'k-icon-search'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -51,10 +48,8 @@ export default function ($props, $blocks, $__proto__) {
       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['k-flat'] = flat, _classNameObj['k-nowrap'] = nowrap, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-select"] = true, _classNameObj[k + "-disabled"] = disabled, _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(k)] = true, _classNameObj);
   var placeholder = this.getPlaceholder();
   var label = this.getLabel();
   var hasValue = this.hasValue();
@@ -66,7 +61,7 @@ export default function ($props, $blocks, $__proto__) {
       onFocusout = _this$focusout.onFocusout,
       triggerRef = _this$focusout.triggerRef;
   var filterInput = filterable ? _$cc(Input, {
-    'className': 'k-select-input',
+    'className': _$cn(k + "-select-input"),
     'value': keywords,
     'ev-$change:value': onInput,
     'disabled': disabled,
@@ -83,6 +78,8 @@ export default function ($props, $blocks, $__proto__) {
   return _$cc(ErrorContext.Consumer, {
     'defaultValue': false,
     'children': function children(isInvalid) {
+      var _$cn2;
+
       return _$cc(Wave, {
         'disabled': disabled || isInvalid || inline,
         'inset': '-2px',
@@ -111,7 +108,7 @@ export default function ($props, $blocks, $__proto__) {
             };
 
             return block ? block.call($this, callBlock, data) : callBlock();
-          }, __$blocks['prefix'](_$no)), 0, 'k-select-prefix') : undefined, _$ce(2, 'div', [_$ce(64, 'input', null, 1, null, {
+          }, __$blocks['prefix'](_$no)), 0, _$cn(k + "-select-prefix")) : undefined, _$ce(2, 'div', [_$ce(64, 'input', null, 1, null, {
             'type': 'hidden',
             'value': value,
             'name': name
@@ -131,7 +128,7 @@ export default function ($props, $blocks, $__proto__) {
               'readonly': !show,
               '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) {
+            }, 'input', inputRef) : !filterable && !hasValue ? _$ce(2, 'div', placeholder, 0, _$cn(k + "-select-placeholder c-ellipsis"), null, 'placeholder') : !multiple ? _$ce(2, 'div', (_$blocks['value'] = function ($super) {
               return label;
             }, __$blocks['value'] = function ($super, data) {
               var block = $blocks['value'];
@@ -141,7 +138,7 @@ 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', [(_$blocks['values'] = function ($super) {
+            }, __$blocks['value'](_$no, [value, label])), 0, _$cn(k + "-select-value c-ellipsis"), null, 'value') : _$ce(2, 'div', [(_$blocks['values'] = function ($super) {
               return label && label.length || filterable ? _$cc(Tags, {
                 'nowrap': nowrap,
                 'size': size,
@@ -192,17 +189,16 @@ export default function ($props, $blocks, $__proto__) {
               };
 
               return block ? block.call($this, callBlock, data) : callBlock();
-            }, _valuesInstanceProperty(__$blocks).call(__$blocks, _$no, [value, label])), $blocks && _valuesInstanceProperty($blocks) ? filterInput : 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,
-              "k-show": hasValue
-            }),
+            }, _valuesInstanceProperty(__$blocks).call(__$blocks, _$no, [value, label])), $blocks && _valuesInstanceProperty($blocks) ? filterInput : undefined], 0, _$cn(k + "-select-values"), null, 'values')
+          })], 0, _$cn(k + "-select-main")), !hideIcon || clearable || loading || $blocks.suffix ? _$ce(2, 'span', [clearable && !disabled ? _$cc(Icon, {
+            'className': _$cn((_$cn2 = {}, _$cn2[k + "-select-clear ion-ios-close"] = true, _$cn2[k + "-show"] = hasValue, _$cn2)),
             'ev-click': _this.clear,
             'hoverable': true
           }) : undefined, _$ce(2, 'span', (_$blocks['suffix'] = function ($super) {
-            return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? filterable && show ? _$cc(Icon, _$tmp1) : _$cc(Icon, {
-              'className': 'k-select-arrow k-icon-down',
+            return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? filterable && show ? _$cc(Icon, {
+              'className': _$cn(k + "-icon-search")
+            }) : _$cc(Icon, {
+              'className': _$cn(k + "-select-arrow " + k + "-icon-down"),
               'disabled': $props.isDisableArrow
             }) : undefined;
           }, __$blocks['suffix'] = function ($super, data) {
@@ -213,7 +209,7 @@ export default function ($props, $blocks, $__proto__) {
             };
 
             return block ? block.call($this, callBlock, data) : callBlock();
-          }, __$blocks['suffix'](_$no)), 0, 'k-select-suffix-icon')], 0, 'k-select-suffix') : undefined]), (_$blocks['base-menu'] = function ($super) {
+          }, __$blocks['suffix'](_$no)), 0, _$cn(k + "-select-suffix-icon"))], 0, _$cn(k + "-select-suffix")) : undefined]), (_$blocks['base-menu'] = function ($super) {
             return _$ce(2, 'div', 'should be implemeted', 16);
           }, __$blocks['base-menu'] = function ($super, data) {
             var block = $blocks['base-menu'];

package/es/components/select/group.d.ts

@@ -11,4 +11,5 @@ export declare class OptionGroup extends Component<OptionGroupProps, OptionGroup
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<OptionGroupProps>>;
     private select;
+    private config;
 }

package/es/components/select/group.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component, inject, VNode } from 'intact';
 import template from './group.vdt';
 import { SELECT } from './constants';
+import { useConfigContext } from '../config';
 var typeDefs = {
   label: [String, Number, VNode]
 };
@@ -20,6 +21,7 @@ export var OptionGroup = /*#__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/es/components/select/group.vdt.js

@@ -19,9 +19,8 @@ export default function ($props, $blocks, $__proto__) {
   var _this$select$get = this.select.get(),
       card = _this$select$get.card;
 
-  var classNameObj = (_classNameObj = {
-    "k-select-group": true
-  }, _classNameObj[className] = className, _classNameObj[makeGroupStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-select-group"] = true, _classNameObj[className] = className, _classNameObj[makeGroupStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
   }), [!card ? _$ce(2, 'div', (_$blocks['label'] = function ($super) {
@@ -34,6 +33,6 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['label'](_$no)), 0, 'k-select-group-label') : undefined, children]);
+  }, __$blocks['label'](_$no)), 0, _$cn(k + "-select-group-label")) : undefined, children]);
 }
 ;

package/es/components/select/menu.d.ts

@@ -7,4 +7,5 @@ export declare class SelectMenu extends Component<{
     select: Select<any, boolean>;
     private card;
     private searchable;
+    private config;
 }

package/es/components/select/menu.js

@@ -5,6 +5,7 @@ import template from './menu.vdt';
 import { SELECT } from './constants';
 import { useCard } from './useCard';
 import { useSearchable } from './useSearchable';
+import { useConfigContext } from '../config';
 export var SelectMenu = /*#__PURE__*/function (_Component) {
   _inheritsLoose(SelectMenu, _Component);
 
@@ -21,6 +22,7 @@ export var SelectMenu = /*#__PURE__*/function (_Component) {
     _this.select = inject(SELECT);
     _this.card = useCard(_this.select.label.activeIndices);
     _this.searchable = useSearchable();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/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';
+import { createUnknownComponentVNode as _$cc, map as _$ma, createElementVNode as _$ce, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em } from 'intact';
 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/es/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/es/components/select/option.js

@@ -6,6 +6,7 @@ import { Component, inject } from 'intact';
 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/es/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/es/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/es/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/es/components/select/useSearchable.d.ts

@@ -1,6 +1,7 @@
 export declare const context: {
     Provider: import("intact").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/es/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/es/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';
 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/es/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';
-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/es/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;
 }