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

package/components/table/styles.js

@@ -101,11 +101,11 @@ setDefault(function () {
     table: defaults
   }).table;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.k-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.k-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.k-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.k-fixed-left,.k-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.k-fixed-left:after{right:-11px;}.k-fixed-right:after{left:-11px;}&.k-scroll-left .k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.k-scroll-right .k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.k-scroll-middle{.k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.k-fixed-right+.k-fixed-right:after{display:none;}.k-table-affix-header{position:sticky;top:0;left:0;.k-affix-wrapper{overflow:hidden;}&.k-fixed{position:relative;}}&.k-border,&.k-grid{.k-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.k-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.k-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.k-table-group{margin-left:", table.group.gap, ";}.k-table-check{.k-checkbox,.k-radio{position:relative;top:-1px;}}.k-column-sortable{cursor:pointer;}.k-column-sort{.k-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.k-desc .k-icon.k-desc,&.k-asc .k-icon.k-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.k-table-spin.k-overlay{z-index:2;}.k-table-empty{text-align:center;}tr.k-expand{td{padding:0;background:#fdfcff;}}&.k-with-expand{tr:not(.k-expand){td{border-bottom:none;}}}.k-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.k-selected td{background:", table.selectedBgColor, ";}.k-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.k-spreaded{.k-table-arrow{transform:rotate(90deg);}}.k-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.k-dragging{opacity:", table.draggingOpacity, ";}.k-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.k-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
-    return /*#__PURE__*/css(".k-align-", type, "{text-align:", type, ";}");
-  }), ">.k-pagination{margin:16px 0;}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:bre.", k, "-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
+    return /*#__PURE__*/css(".", k, "-align-", type, "{text-align:", type, ";}");
+  }), ">.", k, "-pagination{margin:16px 0;}");
 }
-export function makeGroupMenuStyles() {
-  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";min-width:", table.group.menuMinWidth, "!important;overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}.k-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}.k-table-group-footer{text-align:right;border-top:", table.group.headerBorder, ";padding:8px;.k-btn{margin-left:8px;}}");
+export function makeGroupMenuStyles(k) {
+  return /*#__PURE__*/css("min-width:", table.group.menuMinWidth, "!important;.", k, "-dropdown-item.", k, "-active{color:", table.group.activeColor, ";}.", k, "-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}.", k, "-table-group-body{max-height:", table.group.menuMaxHeight, ";overflow:auto;}.", k, "-table-group-footer{text-align:right;border-top:", table.group.headerBorder, ";padding:8px;.", k, "-btn{margin-left:8px;}}");
 }

package/components/table/table.d.ts

@@ -54,7 +54,7 @@ export interface TableEvents<T = any, K extends TableRowKey = number> {
     uncheckRow: [T, number, K];
     checkAll: [];
     uncheckAll: [];
-    changePage: [PaginationChangeData];
+    page: [PaginationChangeData];
 }
 export interface TableBlocks<T = unknown> {
     empty: null;
@@ -97,6 +97,7 @@ export declare class Table<T = any, RowKey extends TableRowKey = TableRowKey, Ch
     private resetRowStatus;
     private draggable;
     private stickyScrollbar;
+    private config;
     checkAll(): void;
     uncheckAll(): void;
     getCheckedData(): any[];

package/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],
@@ -87,7 +88,7 @@ var events = {
   uncheckRow: true,
   checkAll: true,
   uncheckAll: true,
-  changePage: true
+  page: true
 };
 export var Table = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Table, _Component);
@@ -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/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/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/components/table/useFixedColumns.d.ts

@@ -1,4 +1,4 @@
-import { VNodeComponentClass, Props, Key } from 'intact-react';
+import { VNodeComponentClass, Props, RefObject, Key } from 'intact-react';
 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/components/table/useGroup.d.ts

@@ -7,6 +7,7 @@ declare type ContextValue = {
 export declare const context: {
     Provider: import('intact-react').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/components/table/usePagination.js

@@ -68,7 +68,7 @@ export function usePagination() {
       }));
     }
 
-    instance.trigger('changePage', data);
+    instance.trigger('page', data);
   }
 
   return {

package/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/components/table/useSortable.d.ts

@@ -1,6 +1,7 @@
 export declare const context: {
     Provider: import('intact-react').ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
+    useContext: () => import("intact").RefObject<any>;
 };
 export declare function useSortable(): {
     onChange: (key: string, event: Event & {

package/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/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/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;
   }