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

package/es/components/table/table.js

@@ -26,6 +26,7 @@ import { useStickyScrollbar } from './useStickyScrollbar';
 import { useWidth } from './useWidth';
 import { useScroll } from './useScroll';
 import { usePagination } from './usePagination';
+import { useConfigContext } from '../config';
 var typeDefs = {
   data: Array,
   fixHeader: [Boolean, String, Number],
@@ -119,6 +120,7 @@ export var Table = /*#__PURE__*/function (_Component) {
     _this.resetRowStatus = useRestRowStatus(_this.disableRow.getAllKeys);
     _this.draggable = useDraggable(_this.pagination.data);
     _this.stickyScrollbar = useStickyScrollbar(_this.stickyHeader.elementRef, _this.scroll, _this.width.tableRef, _this.fixedColumns.setScrollPosition);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/table/table.vdt.js

@@ -23,11 +23,6 @@ import { Pagination } from '../pagination';
 var _$tmp0 = {
   'width': '40'
 };
-var _$tmp1 = {
-  'overlay': true,
-  'size': 'small',
-  'className': 'k-table-spin'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -82,10 +77,8 @@ export default function ($props, $blocks, $__proto__) {
       excludeStickHeader = _this$stickyHeader.excludeStickHeader,
       elementRef = _this$stickyHeader.elementRef,
       headRef = _this$stickyHeader.headRef;
-  var classNameObj = (_classNameObj = {
-    'k-table': true,
-    'k-fix-header': fixHeader
-  }, _classNameObj["k-scroll-" + scrollPosition.value] = scrollPosition.value, _classNameObj['k-fix-columns'] = hasFixed.value, _classNameObj["k-" + type] = type && type !== 'default', _classNameObj['k-stripe'] = stripe, _classNameObj['k-with-expand'] = $blocks.expand, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-table"] = true, _classNameObj[k + "-fix-header"] = fixHeader, _classNameObj[k + "-scroll-" + scrollPosition.value] = scrollPosition.value, _classNameObj[k + "-fix-columns"] = hasFixed.value, _classNameObj[k + "-" + type] = type && type !== 'default', _classNameObj[k + "-stripe"] = stripe, _classNameObj[k + "-with-expand"] = $blocks.expand, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var style = isStringOrNumber(fixHeader) ? {
     maxHeight: fixHeader + "px"
   } : null;
@@ -186,7 +179,7 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['empty'](_$no)), 0, 'k-table-empty', {
+  }, __$blocks['empty'](_$no)), 0, _$cn(k + "-table-empty"), {
     'colspan': colCount
   }), 2, null, null, 'table-empty') : function () {
     var rows = [];
@@ -269,6 +262,8 @@ export default function ($props, $blocks, $__proto__) {
       rows.push(row);
 
       if ($blocks.expand) {
+        var _$cn3;
+
         var expanded = isExpanded(key);
         rows.push(_$ce(2, 'tr', _$ce(2, 'td', _$cc(Transition, _extends({}, expandAnimationCallbacks, {
           'children': expanded ? _$ce(2, 'div', (_$blocks['expand'] = function ($super) {
@@ -281,13 +276,10 @@ export default function ($props, $blocks, $__proto__) {
             };
 
             return block ? block.call($this, callBlock, data) : callBlock();
-          }, __$blocks['expand'](_$no, [value, index])), 0, 'k-table-expand') : undefined
+          }, __$blocks['expand'](_$no, [value, index])), 0, _$cn(k + "-table-expand")) : undefined
         })), 2, null, {
           'colspan': colCount
-        }), 2, _$cn({
-          "k-expand": true,
-          'k-expanded': expanded
-        }), null, key + ".$expand"));
+        }), 2, _$cn((_$cn3 = {}, _$cn3[k + "-expand"] = true, _$cn3[k + "-expanded"] = expanded, _$cn3)), null, key + ".$expand"));
       }
 
       return hidden || !spreaded;
@@ -315,7 +307,7 @@ export default function ($props, $blocks, $__proto__) {
   return _$ce(2, 'div', [_$ce(2, 'div', [!isNull(stickHeader.value) ? _$cc(Affix, {
     'top': stickHeader.value,
     'exclude': excludeStickHeader,
-    'className': 'k-table-affix-header',
+    'className': _$cn(k + "-table-affix-header"),
     'children': _$ce(2, 'table', [colgroup, thead], 0, null, {
       'style': {
         width: tableWidthPx
@@ -325,7 +317,7 @@ export default function ($props, $blocks, $__proto__) {
     'style': {
       width: tableWidthPx
     }
-  }, null, tableRef)], 0, 'k-table-wrapper', {
+  }, null, tableRef)], 0, _$cn(k + "-table-wrapper"), {
     'style': style
   }, null, scrollRef), pagination ? _$cc(Pagination, _extends({
     'ref': paginationRef,
@@ -337,16 +329,20 @@ export default function ($props, $blocks, $__proto__) {
     'ev-change': onPageChange
   }), null, paginationRef) : undefined, _$cc(Transition, {
     'name': 'k-fade',
-    'children': loading ? _$cc(Spin, _$tmp1) : undefined
+    'children': loading ? _$cc(Spin, {
+      'overlay': true,
+      'size': 'small',
+      'className': _$cn(k + "-table-spin")
+    }) : undefined
   }), !isNull(stickScrollbar.value) ? _$cc(Affix, {
     'bottom': stickScrollbar.value,
     'shouldFix': shouldStickScrollbar,
     'style': stickScrollbarStyle.value,
-    'children': _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-table-scrollbar-inner', {
+    'children': _$ce(2, 'div', _$ce(2, 'div', null, 1, _$cn(k + "-table-scrollbar-inner"), {
       'style': {
         width: tableActualWidth.value
       }
-    }), 2, 'k-table-scrollbar', {
+    }), 2, _$cn(k + "-table-scrollbar"), {
       'ev-scroll': onScrollbarScroll
     }, null, scrollbarRef)
   }) : undefined], 0, _$cn(classNameObj), null, null, elementRef);

package/es/components/table/useColumns.d.ts

@@ -3,6 +3,7 @@ import { TableColumn, TableColumnProps } from './column';
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<("none" | "radio" | "checkbox") | undefined>, {}, {}, {}>>;
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<("none" | "radio" | "checkbox") | undefined>, {}, {}, {}>>;
+    useContext: () => import("intact").RefObject<("none" | "radio" | "checkbox") | undefined>;
 };
 export declare function useColumns(): {
     getColumns: () => VNodeComponentClass<TableColumn<any>>[][];

package/es/components/table/useFixedColumns.d.ts

@@ -1,4 +1,4 @@
-import { VNodeComponentClass, Props, Key } from 'intact';
+import { VNodeComponentClass, Props, RefObject, Key } from 'intact';
 import { TableColumn, TableColumnProps } from './column';
 import type { TableProps, TableRowKey } from './table';
 import { State } from '../../hooks/useState';
@@ -7,6 +7,7 @@ declare type ScrollPosition = 'left' | 'middle' | 'right';
 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: () => RefObject<any>;
 };
 export declare function useFixedColumns(getColumns: () => VNodeComponentClass<TableColumn>[][], { scrollRef, callbacks }: ReturnType<typeof useScroll>, widthMap: State<Record<TableRowKey, number>>): {
     scrollPosition: State<ScrollPosition | null>;

package/es/components/table/useGroup.d.ts

@@ -7,6 +7,7 @@ declare type ContextValue = {
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<ContextValue>, {}, {}, {}>>;
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<ContextValue>, {}, {}, {}>>;
+    useContext: () => import("intact").RefObject<ContextValue | undefined>;
 };
 export declare function useGroup(): {
     onSelect: (value: any, onChange: ContextValue['onChange']) => void;

package/es/components/table/useResizable.d.ts

@@ -4,6 +4,7 @@ import { State } from '../../hooks/useState';
 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: () => RefObject<any>;
 };
 export declare function useResizable(scrollRef: RefObject<HTMLElement>, tableRef: RefObject<HTMLElement>, tableWidth: State<number | null>, widthMap: State<Record<TableRowKey, number>>, storeWidth: () => void): {
     start: (e: MouseEvent) => void;

package/es/components/table/useSortable.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 useSortable(): {
     onChange: (key: string, event: Event & {

package/es/components/tabs/index.d.ts

@@ -21,6 +21,10 @@ export declare class Tabs<T = any> extends Component<TabsProps<T>, TabsEvents<T>
     static events: Events<TabsEvents<any>>;
     private activeBar;
     private scroll;
+    config: {
+        cls: (name: string) => string;
+        readonly k: string;
+    };
     init(): void;
     changeTab(tabProps: TabProps): Promise<void>;
     remove(value: T): void;

package/es/components/tabs/index.js

@@ -8,6 +8,7 @@ import { TABS } from './constants';
 import { sizes } from '../../styles/utils';
 import { useActiveBar } from './useActiveBar';
 import { useScroll } from './useScroll';
+import { useConfigContext } from '../config';
 export * from './tab';
 var typeDefs = {
   value: null,
@@ -43,6 +44,7 @@ export var Tabs = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.activeBar = useActiveBar();
     _this.scroll = useScroll();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/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/es/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/es/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/es/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/es/components/tabs/tab.js

@@ -5,6 +5,7 @@ import { Component, inject } from 'intact';
 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/es/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/es/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/es/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/es/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/es/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';
 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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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';
 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/es/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"))]);
 }
 ;