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

package/components/tabs/index.vdt.js

@@ -27,13 +27,12 @@ export default function ($props, $blocks, $__proto__) {
       next = _this$scroll.next,
       scrollRef = _this$scroll.scrollRef,
       wrapperRef = _this$scroll.wrapperRef;
-  var classNameObj = (_classNameObj = {
-    'k-tabs': true
-  }, _classNameObj["k-size-" + size] = size, _classNameObj['k-vertical'] = vertical, _classNameObj["k-type-" + type] = true, _classNameObj["k-is-scroll"] = isScroll.value, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tabs"] = true, _classNameObj[k + "-size-" + size] = size, _classNameObj[k + "-vertical"] = vertical, _classNameObj[k + "-type-" + type] = true, _classNameObj[k + "-is-scroll"] = isScroll.value, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), [isScroll.value ? _$cc(Button, {
-    'className': 'k-tabs-prev',
+    'className': _$cn(k + "-tabs-prev"),
     'type': 'none',
     'icon': true,
     'key': 'prev',
@@ -41,16 +40,16 @@ export default function ($props, $blocks, $__proto__) {
     'disabled': !enablePrev.value,
     'ev-click': prev,
     'children': _$cc(Icon, {
-      'className': _$cn(vertical ? "k-icon-up" : "k-icon-left")
+      'className': _$cn(vertical ? k + "-icon-up" : k + "-icon-left")
     })
-  }, 'prev') : undefined, _$ce(2, 'div', _$ce(2, 'div', [children, _$ce(2, 'div', null, 1, 'k-tabs-active-bar', {
+  }, 'prev') : undefined, _$ce(2, 'div', _$ce(2, 'div', [children, _$ce(2, 'div', null, 1, _$cn(k + "-tabs-active-bar"), {
     'style': this.activeBar.value
-  })], 0, 'k-tabs-wrapper', {
+  })], 0, _$cn(k + "-tabs-wrapper"), {
     'style': {
       transform: vertical ? "translateY(" + offset.value + "px)" : "translateX(" + offset.value + "px)"
     }
-  }, null, wrapperRef), 2, 'k-tabs-scroll c-clearfix', null, null, scrollRef), isScroll.value ? _$cc(Button, {
-    'className': 'k-tabs-next',
+  }, null, wrapperRef), 2, _$cn(k + "-tabs-scroll c-clearfix"), null, null, scrollRef), isScroll.value ? _$cc(Button, {
+    'className': _$cn(k + "-tabs-next"),
     'type': 'none',
     'icon': true,
     'key': 'next',
@@ -58,7 +57,7 @@ export default function ($props, $blocks, $__proto__) {
     'disabled': !enableNext.value,
     'ev-click': next,
     'children': _$cc(Icon, {
-      'className': _$cn(vertical ? "k-icon-down" : "k-icon-right")
+      'className': _$cn(vertical ? k + "-icon-down" : k + "-icon-right")
     })
   }, 'next') : undefined]);
 }

package/components/tabs/styles.d.ts

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

package/components/tabs/styles.js

@@ -108,37 +108,37 @@ setDefault(function () {
     tabs: defaults
   }).tabs;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css(makeCommonStyles(), ";", makeScrollStyles(), ";&.k-type-default{", makeDefaultStyles(), ";}&.k-type-card{", makeCardStyles(), ";}&.k-type-flat-card{", makeFlatCardStyles(), ";}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css(makeCommonStyles(k), ";", makeScrollStyles(k), ";&.", k, "-type-default{", makeDefaultStyles(k), ";}&.", k, "-type-card{", makeCardStyles(k), ";}&.", k, "-type-flat-card{", makeFlatCardStyles(k), ";}");
 }
 
-function makeCommonStyles() {
+function makeCommonStyles(k) {
   var active = tabs.active;
   var bar = active.bar;
-  return /*#__PURE__*/css("position:relative;.k-tab{display:inline-flex;cursor:pointer;text-align:center;align-items:center;color:", tabs.color, ";white-space:nowrap;text-overflow:ellipsis;&:hover,&.k-active{color:", active.color, ";}&.k-disabled{color:", theme.color.disabled, ";cursor:not-allowed;}}.k-tab-close{margin-right:-", tabs.closeGap, ";margin-left:", tabs.closeGap, ";color:", theme.color.lightBlack, ";}.k-tabs-active-bar{transition:all ", tabs.transition, ";position:absolute;left:0;height:", bar.height, ";background:", bar.bgColor, ";bottom:0;}&.k-vertical{display:inline-block;.k-tab{display:block;}.k-tabs-active-bar{left:auto;top:0;right:0;width:", bar.height, ";height:auto;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("position:relative;.", k, "-tab{display:inline-flex;cursor:pointer;text-align:center;align-items:center;color:", tabs.color, ";white-space:nowrap;text-overflow:ellipsis;&:hover,&.", k, "-active{color:", active.color, ";}&.", k, "-disabled{color:", theme.color.disabled, ";cursor:not-allowed;}}.", k, "-tab-close{margin-right:-", tabs.closeGap, ";margin-left:", tabs.closeGap, ";color:", theme.color.lightBlack, ";}.", k, "-tabs-active-bar{transition:all ", tabs.transition, ";position:absolute;left:0;height:", bar.height, ";background:", bar.bgColor, ";bottom:0;}&.", k, "-vertical{display:inline-block;.", k, "-tab{display:block;}.", k, "-tabs-active-bar{left:auto;top:0;right:0;width:", bar.height, ";height:auto;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = tabs[size];
-    return "\n                &.k-size-" + size + " {\n                    .k-tab {\n                        font-size: " + styles.fontSize + ";\n                        height: " + styles.height + ";\n                        line-height: " + styles.height + ";\n                        padding: " + styles.padding + ";\n                    }\n                    .k-tab-close .k-icon {\n                        font-size: " + styles.closeFontSize + ";\n                    }\n                    &:not(.k-vertical).k-is-scroll {\n                        padding: 0 " + styles.navigatorWidth + ";\n                    }\n                    &.k-vertical.k-is-scroll {\n                        padding: " + styles.navigatorWidth + " 0;\n                    }\n                }\n            ";
+    return /*#__PURE__*/css("&.", k, "-size-", size, "{.", k, "-tab{font-size:", styles.fontSize, ";height:", styles.height, ";line-height:", styles.height, ";padding:", styles.padding, ";}.", k, "-tab-close .", k, "-icon{font-size:", styles.closeFontSize, ";}&:not(.", k, "-vertical).", k, "-is-scroll{padding:0 ", styles.navigatorWidth, ";}&.", k, "-vertical.", k, "-is-scroll{padding:", styles.navigatorWidth, " 0;}}");
   }), ";");
 }
 
-function makeScrollStyles() {
-  return /*#__PURE__*/css("overflow:hidden;.k-tabs-scroll{overflow:hidden;position:relative;padding-bottom:1px;margin-bottom:-1px;}&.k-type-card,&.k-type-flat-card{.k-tabs-scroll{padding-bottom:0;margin-bottom:0;}}.k-tabs-wrapper{white-space:nowrap;transition:transform ", tabs.transition, ";}.k-tabs-prev,.k-tabs-next{position:absolute;&:not(.k-disabled){box-shadow:", theme.boxShadow, ";}}&:not(.k-vertical){.k-tabs-wrapper{float:left;}.k-tabs-prev,.k-tabs-next{top:0;}.k-tabs-prev{left:0;}.k-tabs-next{right:0;}}&.k-vertical{&,.k-tabs-scroll{height:100%;}.k-tabs-prev,.k-tabs-next{width:100%!important;left:0;}.k-tabs-prev{top:0;}.k-tabs-next{bottom:0;}}");
+function makeScrollStyles(k) {
+  return /*#__PURE__*/css("overflow:hidden;.", k, "-tabs-scroll{overflow:hidden;position:relative;padding-bottom:1px;margin-bottom:-1px;}&.", k, "-type-card,&.", k, "-type-flat-card{.", k, "-tabs-scroll{padding-bottom:0;margin-bottom:0;}}.", k, "-tabs-wrapper{white-space:nowrap;transition:transform ", tabs.transition, ";}.", k, "-tabs-prev,.", k, "-tabs-next{position:absolute;&:not(.", k, "-disabled){box-shadow:", theme.boxShadow, ";}}&:not(.", k, "-vertical){.", k, "-tabs-wrapper{float:left;}.", k, "-tabs-prev,.", k, "-tabs-next{top:0;}.", k, "-tabs-prev{left:0;}.", k, "-tabs-next{right:0;}}&.", k, "-vertical{&,.", k, "-tabs-scroll{height:100%;}.", k, "-tabs-prev,.", k, "-tabs-next{width:100%!important;left:0;}.", k, "-tabs-prev{top:0;}.", k, "-tabs-next{bottom:0;}}");
 }
 
-function makeDefaultStyles() {
-  return /*#__PURE__*/css("border-bottom:", tabs.border, ";&.k-vertical{border-bottom:none;border-right:", tabs.border, ";}");
+function makeDefaultStyles(k) {
+  return /*#__PURE__*/css("border-bottom:", tabs.border, ";&.", k, "-vertical{border-bottom:none;border-right:", tabs.border, ";}");
 }
 
-function makeCardCommonStyles() {
-  return /*#__PURE__*/css("border-radius:", tabs.card.borderRadius, ";background-color:", tabs.card.bgColor, ";.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;}");
+function makeCardCommonStyles(k) {
+  return /*#__PURE__*/css("border-radius:", tabs.card.borderRadius, ";background-color:", tabs.card.bgColor, ";.", k, "-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;}");
 }
 
-function makeCardStyles() {
+function makeCardStyles(k) {
   var borderRadius = tabs.card.borderRadius;
-  return /*#__PURE__*/css(makeCardCommonStyles(), ";.k-tabs-active-bar{border-radius:", borderRadius, " ", borderRadius, " 0px 0px;box-shadow:", theme.boxShadow, ";}&.k-vertical{.k-tabs-active-bar{width:100%;left:0;border-radius:", borderRadius, " 0px 0px ", borderRadius, ";}}");
+  return /*#__PURE__*/css(makeCardCommonStyles(k), ";.", k, "-tabs-active-bar{border-radius:", borderRadius, " ", borderRadius, " 0px 0px;box-shadow:", theme.boxShadow, ";}&.", k, "-vertical{.", k, "-tabs-active-bar{width:100%;left:0;border-radius:", borderRadius, " 0px 0px ", borderRadius, ";}}");
 }
 
-function makeFlatCardStyles() {
+function makeFlatCardStyles(k) {
   var padding = tabs.flatCard.padding;
-  return /*#__PURE__*/css(makeCardCommonStyles(), ";padding:0 ", padding, ";.k-tabs-active-bar{top:", padding, ";height:calc(100% - ", padding, " * 2);border-radius:", tabs.card.borderRadius, ";}&.k-vertical{padding:", padding, " 0;.k-tabs-active-bar{left:", padding, ";width:calc(100% - ", padding, " * 2);}}");
+  return /*#__PURE__*/css(makeCardCommonStyles(k), ";padding:0 ", padding, ";.", k, "-tabs-active-bar{top:", padding, ";height:calc(100% - ", padding, " * 2);border-radius:", tabs.card.borderRadius, ";}&.", k, "-vertical{padding:", padding, " 0;.", k, "-tabs-active-bar{left:", padding, ";width:calc(100% - ", padding, " * 2);}}");
 }

package/components/tabs/tab.d.ts

@@ -11,6 +11,7 @@ export interface TabEvents {
 export declare class Tab extends Component<TabProps, TabEvents> {
     static template: string | import("intact").Template<any>;
     private tabs;
+    private config;
     private onClick;
     private remove;
 }

package/components/tabs/tab.js

@@ -5,6 +5,7 @@ import { Component, inject } from 'intact-react';
 import template from './tab.vdt';
 import { TABS } from './constants';
 import { bind } from '../utils';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: null,
   disabled: Boolean,
@@ -25,6 +26,7 @@ export var Tab = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.tabs = inject(TABS);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/tabs/tab.vdt.js

@@ -25,10 +25,8 @@ export default function ($props, $blocks, $__proto__) {
   var _this$tabs$get = this.tabs.get(),
       currentValue = _this$tabs$get.value;
 
-  var classNameObj = (_classNameObj = {
-    'k-tab': true,
-    'k-active': !isNullOrUndefined(value) && value === currentValue
-  }, _classNameObj[className] = className, _classNameObj['k-disabled'] = disabled, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tab"] = true, _classNameObj[k + "-active"] = !isNullOrUndefined(value) && value === currentValue, _classNameObj[className] = className, _classNameObj[k + "-disabled"] = disabled, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj),
     'ev-click': this.onClick
@@ -37,7 +35,7 @@ export default function ($props, $blocks, $__proto__) {
     'icon': true,
     'disabled': disabled,
     'size': 'mini',
-    'className': 'k-tab-close',
+    'className': _$cn(k + "-tab-close"),
     'ev-click': this.remove,
     'children': _$cc(Icon, _$tmp0)
   }) : undefined]);

package/components/tabs/useActiveBar.js

@@ -14,7 +14,8 @@ export function useActiveBar() {
 
   function generateStyle() {
     var element = findDomFromVNode(instance.$lastInput, true);
-    var activeTab = element.querySelector('.k-tab.k-active');
+    var k = instance.config.k;
+    var activeTab = element.querySelector("." + k + "-tab." + k + "-active");
 
     if (!activeTab) {
       var oldStyles = styles.value;

package/components/tabs/useScroll.js

@@ -79,7 +79,8 @@ export function useScroll() {
     var _instance$get2 = instance.get(),
         vertical = _instance$get2.vertical;
 
-    var activeTab = scrollRef.value.querySelector('.k-tab.k-active');
+    var k = instance.config.k;
+    var activeTab = scrollRef.value.querySelector("." + k + "-tab." + k + "-active");
 
     if (activeTab) {
       var _offset = offset.value; // don't use getBoundingClientRect, it has transform and will return digital number

package/components/tag/base.d.ts

@@ -20,5 +20,6 @@ export declare class Tag<T extends TagProps = TagProps, E extends TagEvents = Ta
     static typeDefs: Required<TypeDefs<TagProps>>;
     static defaults: () => Partial<TagProps>;
     static events: Events<TagEvents>;
+    private config;
     private onClose;
 }

package/components/tag/base.js

@@ -1,9 +1,11 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { __decorate } from "tslib";
 import { Component } from 'intact-react';
 import { bind } from '../utils';
 import template from './index.vdt';
 import { sizes } from '../../styles/utils';
+import { useConfigContext } from '../config';
 export var typeDefs = {
   type: ['default', 'primary', 'danger', 'success', 'warning'],
   closable: Boolean,
@@ -28,7 +30,17 @@ export var Tag = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Tag, _Component);
 
   function Tag() {
-    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;
   }
 
   var _proto = Tag.prototype;

package/components/tag/index.vdt.js

@@ -23,11 +23,10 @@ export default function ($props, $blocks, $__proto__) {
       closed = _this$get.closed,
       size = _this$get.size;
 
-  var classNameObj = (_classNameObj = {
-    'k-tag': !$props.className
-  }, _classNameObj[className] = className, _classNameObj["k-" + type] = type !== 'default', _classNameObj["k-" + size] = size !== 'default', _classNameObj["k-" + border] = border, _classNameObj['k-disabled'] = disabled, _classNameObj['k-closable'] = closable, _classNameObj[makeStyles()] = true, _classNameObj[$props.className] = $props.className, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tag"] = !$props.className, _classNameObj[className] = className, _classNameObj[k + "-" + type] = type !== 'default', _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-" + border] = border, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-closable"] = closable, _classNameObj[makeStyles(k)] = true, _classNameObj[$props.className] = $props.className, _classNameObj);
   return _$cc(Transition, {
-    'name': $props.name || 'k-scale',
+    'name': $props.name || k + "-scale",
     'children': !closed ? _$cv('div', _extends({
       'className': _$cn(classNameObj)
     }, getRestProps(this)), [(_$blocks['body'] = function ($super) {
@@ -42,7 +41,7 @@ export default function ($props, $blocks, $__proto__) {
       return block ? block.call($this, callBlock, data) : callBlock();
     }, __$blocks['body'](_$no)), (_$blocks['_close'] = function ($super) {
       return closable ? _$cc(Icon, {
-        'className': 'k-tag-close ion-ios-close-empty',
+        'className': _$cn(k + "-tag-close ion-ios-close-empty"),
         'color': type,
         'hoverable': !disabled,
         'ev-click': this.onClose

package/components/tag/styles.d.ts

@@ -65,5 +65,5 @@ declare const defaults: {
 };
 declare let tag: typeof defaults;
 export { tag };
-export declare function makeStyles(): string;
-export declare function makeTagsStyles(): string;
+export declare function makeStyles(k: string): string;
+export declare function makeTagsStyles(k: string): string;

package/components/tag/styles.js

@@ -114,16 +114,16 @@ setDefault(function () {
   }).tag;
 });
 export { tag };
-export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:", tag.border, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.k-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";width:", tag.close.width, ";}&.k-none{border:none;background:", tag.none.bgColor, ";}", _mapInstanceProperty(types).call(types, function (t) {
+export function makeStyles(k) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:", tag.border, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.", k, "-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";width:", tag.close.width, ";}&.", k, "-none{border:none;background:", tag.none.bgColor, ";}", _mapInstanceProperty(types).call(types, function (t) {
     var styles = tag[t];
-    return /*#__PURE__*/css("&.k-", t, "{color:", styles.color, ";border-color:", styles.color, ";background:", styles.bgColor, ";}");
+    return /*#__PURE__*/css("&.", k, "-", t, "{color:", styles.color, ";border-color:", styles.color, ";background:", styles.bgColor, ";}");
   }), " ", _mapInstanceProperty(sizes).call(sizes, function (s) {
     if (s === 'default') return;
     var styles = tag[s];
-    return /*#__PURE__*/css("&.k-", s, "{padding:", styles.padding, ";height:", styles.height, ";font-size:", styles.fontSize, ";.k-tag-close{font-size:", styles.close.fontSize, ";margin-left:", styles.close.gap, ";}}");
-  }), "&.k-dashed{border-style:dashed;}&.k-dragging{opacity:0;}");
+    return /*#__PURE__*/css("&.", k, "-", s, "{padding:", styles.padding, ";height:", styles.height, ";font-size:", styles.fontSize, ";.", k, "-tag-close{font-size:", styles.close.fontSize, ";margin-left:", styles.close.gap, ";}}");
+  }), "&.", k, "-dashed{border-style:dashed;}&.", k, "-dragging{opacity:0;}");
 }
-export function makeTagsStyles() {
-  return /*#__PURE__*/css("display:flex;flex-wrap:wrap;gap:", defaults.tags.gap, ";position:relative;overflow:hidden;&.k-nowrap{flex-wrap:nowrap;.k-tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;}}.k-tags-more{cursor:default;font-family:monospace;}.k-tag.k-draggable{cursor:move;}");
+export function makeTagsStyles(k) {
+  return /*#__PURE__*/css("display:flex;flex-wrap:wrap;gap:", defaults.tags.gap, ";position:relative;overflow:hidden;&.", k, "-nowrap{flex-wrap:nowrap;.", k, "-tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;}}.", k, "-tags-more{cursor:default;font-family:monospace;}.", k, "-tag.", k, "-draggable{cursor:move;}");
 }

package/components/tag/tags.d.ts

@@ -24,4 +24,5 @@ export declare class Tags extends Component<TagsProps, TagsEvents> {
     private children;
     private draggable;
     private nowrap;
+    private config;
 }

package/components/tag/tags.js

@@ -6,6 +6,7 @@ import { useNowrap } from './useNowrap';
 import { typeDefs as tagTypeDefs } from './base';
 import { useChildren } from './useChildren';
 import { useDraggable } from './useDraggable';
+import { useConfigContext } from '../config';
 var typeDefs = {
   nowrap: Boolean,
   draggable: Boolean,
@@ -40,6 +41,7 @@ export var Tags = /*#__PURE__*/function (_Component) {
     _this.children = useChildren();
     _this.draggable = useDraggable(_this.children);
     _this.nowrap = useNowrap(_this.draggable);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/tag/tags.vdt.js

@@ -8,7 +8,7 @@ import { Tooltip } from '../tooltip';
 import { Tags } from './tags';
 import { Virtual } from '../virtual';
 export default function ($props, $blocks, $__proto__) {
-  var _classNameObj;
+  var _classNameObj, _$cn2;
 
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -23,11 +23,8 @@ export default function ($props, $blocks, $__proto__) {
       border = _this$get.border,
       draggable = _this$get.draggable;
 
-  var classNameObj = (_classNameObj = {
-    'k-tags': true,
-    'k-nowrap': nowrap,
-    'k-draggable': draggable
-  }, _classNameObj[makeTagsStyles()] = true, _classNameObj[className] = className, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tags"] = true, _classNameObj[k + "-nowrap"] = nowrap, _classNameObj[k + "-draggable"] = draggable, _classNameObj[makeTagsStyles(k)] = true, _classNameObj[className] = className, _classNameObj);
   var _this$nowrap = this.nowrap,
       containerRef = _this$nowrap.containerRef,
       children = _this$nowrap.children,
@@ -49,13 +46,10 @@ export default function ($props, $blocks, $__proto__) {
     'key': '$tooltip',
     'hoverable': true,
     'theme': 'light',
-    'className': 'k-tags-tooltip',
+    'className': _$cn(k + "-tags-tooltip"),
     'children': _$cc(Tag, {
       'key': '$more',
-      'className': _$cn({
-        "k-tags-more": true,
-        'c-hidden': !hiddenChildren.value.length
-      }),
+      'className': _$cn((_$cn2 = {}, _$cn2[k + "-tags-more"] = true, _$cn2['c-hidden'] = !hiddenChildren.value.length, _$cn2)),
       'size': size,
       'border': border,
       'children': [_$ct('\n            +'), hiddenChildren.value.length]

package/components/timeline/item.d.ts

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

package/components/timeline/item.js

@@ -1,8 +1,10 @@
 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 { sizes } from '../../styles/utils';
 import { types } from './styles';
+import { useConfigContext } from '../config';
 var typeDefs = {
   type: types,
   size: sizes
@@ -19,7 +21,17 @@ export var TimelineItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(TimelineItem, _Component);
 
   function TimelineItem() {
-    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 TimelineItem;

package/components/timeline/item.vdt.js

@@ -17,13 +17,12 @@ export default function ($props, $blocks, $__proto__) {
       type = _this$get.type,
       size = _this$get.size;
 
-  var classNameObj = (_classNameObj = {
-    'k-timeline-item': true
-  }, _classNameObj[className] = className, _classNameObj["k-" + type] = true, _classNameObj["k-" + size] = size !== 'default', _classNameObj[makeItemStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-timeline-item"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + type] = true, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[makeItemStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), [_$ce(2, 'div', [_$ce(2, 'div', (_$blocks['dot'] = function ($super) {
-    return _$ce(2, 'div', null, 1, 'k-timeline-circle');
+    return _$ce(2, 'div', null, 1, _$cn(k + "-timeline-circle"));
   }, __$blocks['dot'] = function ($super, data) {
     var block = $blocks['dot'];
 
@@ -32,6 +31,6 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['dot'](_$no)), 0, 'k-timeline-dot'), _$ce(2, 'div', null, 1, 'k-timeline-line')], 4, 'k-timeline-indicator'), _$ce(2, 'div', children, 0, 'k-timeline-content')]);
+  }, __$blocks['dot'](_$no)), 0, _$cn(k + "-timeline-dot")), _$ce(2, 'div', null, 1, _$cn(k + "-timeline-line"))], 4, _$cn(k + "-timeline-indicator")), _$ce(2, 'div', children, 0, _$cn(k + "-timeline-content"))]);
 }
 ;

package/components/timeline/styles.d.ts

@@ -2,6 +2,6 @@ import '../../styles/global';
 declare type ValueOf<T extends readonly any[]> = T[number];
 export declare type Types = ValueOf<typeof types>;
 export declare const types: readonly ["primary", "warning", "danger", "success"];
-export declare function makeStyles(): string;
-export declare function makeItemStyles(): string;
+export declare function makeStyles(k: string): string;
+export declare function makeItemStyles(k: string): string;
 export {};

package/components/timeline/styles.js

@@ -48,18 +48,18 @@ setDefault(function () {
     timeline: defaults
   }).timeline;
 });
-export function makeStyles() {
+export function makeStyles(k) {
   return /*#__PURE__*/css("font-size:", timeline.fontSize, ";padding-top:calc(", theme.lineHeight, "em / 2);");
 }
-export function makeItemStyles() {
-  return /*#__PURE__*/css("position:relative;padding:", timeline.padding, ";.k-timeline-indicator{width:", timeline.indicator.width, ";position:absolute;left:0;top:0;height:100%;text-align:center;}.k-timeline-dot{position:relative;z-index:1;transform:translateY(-50%);}.k-timeline-circle{position:relative;background:", theme.color.primary, ";border-radius:50%;left:50%;}.k-timeline-line{position:absolute;height:100%;border-left:", timeline.lineBorder, ";top:0;left:50%;}.k-timeline-content{position:relative;top:calc(-0.5 * ", theme.lineHeight, "em);}&:last-of-type{.k-timeline-line{display:none;}}", _mapInstanceProperty(types).call(types, function (type) {
+export function makeItemStyles(k) {
+  return /*#__PURE__*/css("position:relative;padding:", timeline.padding, ";.", k, "-timeline-indicator{width:", timeline.indicator.width, ";position:absolute;left:0;top:0;height:100%;text-align:center;}.", k, "-timeline-dot{position:relative;z-index:1;transform:translateY(-50%);}.", k, "-timeline-circle{position:relative;background:", theme.color.primary, ";border-radius:50%;left:50%;}.", k, "-timeline-line{position:absolute;height:100%;border-left:", timeline.lineBorder, ";top:0;left:50%;}.", k, "-timeline-content{position:relative;top:calc(-0.5 * ", theme.lineHeight, "em);}&:last-of-type{.", k, "-timeline-line{display:none;}}", _mapInstanceProperty(types).call(types, function (type) {
     var typeStyles = timeline[type];
-    return /*#__PURE__*/css("&.k-", type, "{.k-timeline-indicator{color:", typeStyles.color, ";}.k-timeline-circle{background:", typeStyles.color, ";}}");
+    return /*#__PURE__*/css("&.", k, "-", type, "{.", k, "-timeline-indicator{color:", typeStyles.color, ";}.", k, "-timeline-circle{background:", typeStyles.color, ";}}");
   }), _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = timeline[size];
-    var sizeClassName = /*#__PURE__*/css(".k-timeline-circle{width:", styles.width, ";height:", styles.width, ";margin-left:calc(-0.5 * ", styles.width, ");}");
+    var sizeClassName = /*#__PURE__*/css(".", k, "-timeline-circle{width:", styles.width, ";height:", styles.width, ";margin-left:calc(-0.5 * ", styles.width, ");}");
     if (size === 'default') return sizeClassName;
-    return /*#__PURE__*/css("&.k-", size, "{", sizeClassName, ";}");
+    return /*#__PURE__*/css("&.", k, "-", size, "{", sizeClassName, ";}");
   }), ";");
 }
 ;

package/components/timeline/timeline.d.ts

@@ -3,4 +3,5 @@ export interface TimelineProps {
 }
 export declare class Timeline extends Component<TimelineProps> {
     static template: string | import("intact").Template<any>;
+    private config;
 }

package/components/timeline/timeline.js

@@ -1,11 +1,23 @@
 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 './timeline.vdt';
+import { useConfigContext } from '../config';
 export var Timeline = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Timeline, _Component);
 
   function Timeline() {
-    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 Timeline;

package/components/timeline/timeline.vdt.js

@@ -13,9 +13,8 @@ export default function ($props, $blocks, $__proto__) {
       className = _this$get.className,
       children = _this$get.children;
 
-  var classNameObj = (_classNameObj = {
-    'k-timeline': true
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-timeline"] = true, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), children);

package/components/timepicker/index.d.ts

@@ -1,9 +1,10 @@
 import { Component } from 'intact-react';
 import { TimepickerProps, TimepickerEvents, TimepickerBlocks } from './constants';
+import { PanelPicker } from './panelPicker';
 import { SelectPicker } from './selectPicker';
 export type { TimepickerProps, TimepickerEvents, TimepickerBlocks };
 export declare class Timepicker<Multipe extends boolean = false, Range extends boolean = false> extends Component<TimepickerProps<Multipe, Range>, TimepickerEvents, TimepickerBlocks<Range>> {
     static $doubleVNodes: boolean;
-    static template(this: Timepicker): import("intact").VNode<typeof SelectPicker>;
+    static template(this: Timepicker): import("intact").VNode<typeof SelectPicker> | import("intact").VNode<typeof PanelPicker>;
     static typeDefs: Required<import("intact").TypeDefs<TimepickerProps<boolean, boolean>>>;
 }

package/components/timepicker/panelPicker.vdt.js

@@ -1,4 +1,4 @@
-import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, className as _$cn, createTextVNode as _$ct } from 'intact-react';
+import { createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, createTextVNode as _$ct } from 'intact-react';
 import { Icon } from '../icon';
 import { DropdownMenu } from '../dropdown';
 import { makePanelStyles } from './styles';
@@ -8,12 +8,6 @@ import { Button } from '../button';
 import { PanelFlags } from '../datepicker/usePanel';
 import { last } from '../datepicker/helpers';
 import { ScrollSelect } from '../scrollSelect';
-var _$tmp0 = {
-  'className': 'k-timepicker'
-};
-var _$tmp1 = {
-  'className': 'k-icon-time'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -33,10 +27,8 @@ export default function ($props, $blocks, $__proto__) {
       onChangeTimeByStep = _this$value.onChangeTimeByStep,
       getTimeValue = _this$value.getTimeValue;
   var lastValue = last(value);
-  var classNameObj = (_classNameObj = {
-    'k-time-content': true,
-    'k-range': range
-  }, _classNameObj[className] = className, _classNameObj[makePanelStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-time-content"] = true, _classNameObj[k + "-range"] = range, _classNameObj[className] = className, _classNameObj[makePanelStyles(k)] = true, _classNameObj);
   var options = this.step.options.value;
   var _this$disabled = this.disabled,
       isDisabledTime = _this$disabled.isDisabledTime,
@@ -48,7 +40,7 @@ export default function ($props, $blocks, $__proto__) {
 
   var generatePanel = function generatePanel(flag) {
     var timeValue = getTimeValue(flag);
-    return _$ce(2, 'div', [range ? _$ce(2, 'div', flag === PanelFlags.Start ? _$('开始时间') : _$('结束时间'), 0, 'k-timepicker-title') : undefined, !options ? _$cc(DatepickerTime, {
+    return _$ce(2, 'div', [range ? _$ce(2, 'div', flag === PanelFlags.Start ? _$('开始时间') : _$('结束时间'), 0, _$cn(k + "-timepicker-title")) : undefined, !options ? _$cc(DatepickerTime, {
       'value': timeValue,
       'ev-$change:value': function ev$changeValue(v) {
         return onChangeTime(v, flag);
@@ -65,23 +57,25 @@ export default function ($props, $blocks, $__proto__) {
       'disable': function disable(v) {
         return isDisabledTimeByStep(v, flag);
       }
-    }), 2, 'k-datepicker-time')], 0, 'k-datepicker-calendar-wrapper');
+    }), 2, _$cn(k + "-datepicker-time"))], 0, _$cn(k + "-datepicker-calendar-wrapper"));
   };
 
-  return _$su.call($this, _$tmp0, function ($blocks) {
+  return _$su.call($this, {
+    'className': _$cn(k + "-timepicker")
+  }, function ($blocks) {
     var _$blocks = {},
         __$blocks = _$ex({}, $blocks);
 
     return (_$blocks['base-menu'] = function ($super) {
       return _$cc(DropdownMenu, {
         'className': _$cn(classNameObj),
-        'children': _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n                    '), range ? generatePanel(PanelFlags.End) : null], 0, 'k-datepicker-calendars'), _$ce(2, 'div', _$cc(Button, {
+        'children': _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n                    '), range ? generatePanel(PanelFlags.End) : null], 0, _$cn(k + "-datepicker-calendars")), _$ce(2, 'div', _$cc(Button, {
           'type': 'primary',
           'size': 'small',
           'disabled': isDisabledConfirm(),
           'ev-click': onConfirm,
           'children': _$('确定')
-        }), 2, 'k-datepicker-footer')], 4, 'k-datepicker-wrapper')
+        }), 2, _$cn(k + "-datepicker-footer"))], 4, _$cn(k + "-datepicker-wrapper"))
       });
     }, __$blocks['base-menu'] = function ($super, data) {
       var block = $blocks['base-menu'];
@@ -92,7 +86,9 @@ export default function ($props, $blocks, $__proto__) {
 
       return block ? block.call($this, callBlock, data) : callBlock();
     }), (_$blocks['suffix'] = function ($super) {
-      return _$cc(Icon, _$tmp1);
+      return _$cc(Icon, {
+        'className': _$cn(k + "-icon-time")
+      });
     }, __$blocks['suffix'] = function ($super, data) {
       var block = $blocks['suffix'];
 

package/components/timepicker/selectPicker.d.ts

@@ -24,4 +24,5 @@ export declare class SelectPicker extends Component<TimepickerProps, TimepickerE
             label: string;
         }[] | null>;
     };
+    private config;
 }