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

package/components/upload/styles.ts

@@ -77,83 +77,83 @@ setDefault(() => {
     upload = deepDefaults(theme, {upload: defaults}).upload;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         font-size: ${upload.fontSize};
         position: relative;
 
         // keep vertical align middle
-        .k-icon-upload {
+        .${k}-icon-upload {
             position: relative;
             top: -1px;
         }
-        .k-upload-handle {
+        .${k}-upload-handle {
             display: inline-block;
             vertical-align: middle;
             color: ${upload.color};
         }
-        .k-upload-tip {
+        .${k}-upload-tip {
             margin-top: ${upload.tip.gap};
             color: ${upload.color};
         }
 
         // filelist
-        .k-upload-files {
+        .${k}-upload-files {
             margin-top: ${upload.filesGap};
         }
-        .k-upload-file {
+        .${k}-upload-file {
             margin: ${upload.file.margin};
             padding-right: ${upload.file.delete.width};
             position: relative;
             &:hover {
-                .k-upload-close {
+                .${k}-upload-close {
                     display: inline-flex;
                     position: absolute;
                     right: ${upload.file.delete.right};
                     top: ${upload.file.delete.top};
                 } 
-                .k-upload-file-main { 
+                .${k}-upload-file-main { 
                     background: ${upload.file.bgColor};
                 }
             }
         }
-        .k-upload-file-main {
+        .${k}-upload-file-main {
             padding: ${upload.file.padding};
             border-radius: ${upload.file.borderRadius};
         }
-        .k-upload-name {
+        .${k}-upload-name {
             display: flex;
             align-items: center;
             height: ${upload.file.height};
         }
-        .k-upload-file-icon {
+        .${k}-upload-file-icon {
             margin-right: ${upload.file.fileIconGap};
         }
-        .k-upload-file-name {
+        .${k}-upload-file-name {
             flex: 1;
         }
-        .k-upload-status-icon {
+        .${k}-upload-status-icon {
             color: ${upload.file.status.color};
             margin-right: ${upload.file.status.offsetRight};
         }
-        .k-upload-close {
+        .${k}-upload-close {
             display: none;
         }
-        .k-upload-file.k-error {
+        .${k}-upload-file.${k}-error {
             color: ${upload.file.errorColor};
-            .k-upload-status-icon {
+            .${k}-upload-status-icon {
                 color: ${upload.file.status.errorColor};
             }
         }
-        .k-upload-progress {
-            .k-progress-text {
+        .${k}-upload-progress {
+            .${k}-progress-text {
                 width: auto !important;
             }
         }
 
         // drag
-        &.k-drag {
-            .k-upload-handle {
+        &.${k}-drag {
+            .${k}-upload-handle {
                 display: block;
                 border: ${upload.drag.border};
                 border-radius: ${upload.drag.borderRadius};
@@ -165,53 +165,53 @@ export function makeStyles() {
                     border-color: ${upload.drag.hoverBorderColor};
                 }
             }
-            .k-upload-area {
+            .${k}-upload-area {
                 padding: ${upload.drag.padding};
-                .k-icon {
+                .${k}-icon {
                     display: inline-block;
                     font-size: ${upload.drag.icon.fontSize};
                     margin-bottom: ${upload.drag.icon.gap};
                 }
             }
-            &.k-dragover {
-                .k-upload-handle {
+            &.${k}-dragover {
+                .${k}-upload-handle {
                     border-color: ${upload.drag.overBorderColor};
                 }
             }
         }
 
         // gallery
-        .k-upload-pictures {
+        .${k}-upload-pictures {
             display: inline-block;
             vertical-align: middle;
         }
-        .k-upload-picture {
+        .${k}-upload-picture {
             padding: ${upload.gallery.padding};
             position: relative;
             vertical-align: middle;
-            &.k-error {
+            &.${k}-error {
                 border-color: ${upload.gallery.errorBorderColor};
             }
-            .k-upload-close {
+            .${k}-upload-close {
                 display: inline-flex;
             }
             &:hover {
-                .k-upload-icons {
+                .${k}-upload-icons {
                     opacity: 1; 
                 }
             }
-            .k-upload-img {
+            .${k}-upload-img {
                 display: inline-block;
                 width: 100%;
                 height: 100%;
             }
-            .k-upload-icons {
+            .${k}-upload-icons {
                 opacity: 0;
                 transition: opacity ${upload.transition};
             }
         }
 
-        .k-upload-picture-card {
+        .${k}-upload-picture-card {
             display: inline-flex;
             width: ${upload.gallery.width};
             height: ${upload.gallery.height};
@@ -223,14 +223,14 @@ export function makeStyles() {
             justify-content: center;
             flex-direction: column;
         }
-        .k-upload-add {
+        .${k}-upload-add {
             border: ${upload.gallery.add.border};
             cursor: pointer;
             &:hover {
                 border-color: ${upload.gallery.add.hoverBorderColor};
             }
         }
-        .k-upload-overlap {
+        .${k}-upload-overlap {
             position: absolute;
             width: 100%;
             height: 100%;
@@ -242,10 +242,10 @@ export function makeStyles() {
             justify-content: center;
             gap: ${upload.overlap.iconGap};
             color: ${upload.overlap.color};
-            .k-icon:not(:hover) {
+            .${k}-icon:not(:hover) {
                 color: inherit;
             }
-            .k-upload-progress {
+            .${k}-upload-progress {
                 position: absolute;
                 width: 100%;
                 top: 50%;
@@ -256,7 +256,7 @@ export function makeStyles() {
     `;
 }
 
-export function makeUploadDialogStyles() {
+export function makeUploadDialogStyles(k: string) {
     return css`
         img {
             width: 100%;

package/components/utils.ts

@@ -1,5 +1,5 @@
 import {Component, VNode, Children, NormalizedChildren, VNodeComponentClass, ComponentConstructor, isText} from 'intact';
-import {EMPTY_OBJ, isStringOrNumber, isString, isNullOrUndefined, isInvalid} from 'intact-shared';
+import {EMPTY_OBJ, isStringOrNumber, isString, isNullOrUndefined, isInvalid, hasOwn} from 'intact-shared';
 
 // @reference https://github.com/andreypopp/autobind-decorator/blob/master/src/index.js
 // for loose mode
@@ -96,15 +96,21 @@ export function addStyle(style: string | Record<string, string | null> | undefin
 }
 
 const _cache: Record<string, string> = {};
-const uppercasePattern = /[A-Z]/g;
-export function kebabCase(word: string) {
-    if (!_cache[word]) {
-        _cache[word] = word.replace(uppercasePattern, (item) => {
-            return `-${item.toLowerCase()}`;
-        });
+export function cache(callback: (...args: string[]) => any) {
+    return function(...args: string[]) {
+        const cacheId = args.join('~');
+        if (!hasOwn.call(_cache, cacheId)) {
+            _cache[cacheId] = callback(...args); 
+        }
+        return _cache[cacheId];
     }
-    return _cache[word];
 }
+const uppercasePattern = /[A-Z]/g;
+export const kebabCase = cache((word: string) => {
+    return word.replace(uppercasePattern, (item) => {
+        return `-${item.toLowerCase()}`;
+    });
+});
 
 export function isTextChildren(o: any): boolean {
     if (isStringOrNumber(o)) return true;
@@ -291,6 +297,21 @@ export function isEqualArray(a: EqualArrayValue, b: EqualArrayValue): boolean {
     return false;
 }
 
+export function isEqualObject(a: Record<string, any>, b: Record<string, any>): boolean {
+    if (a === b) return true;
+    if (a && b) {
+        const keysA = Object.keys(a);
+        const keysB = Object.keys(b);
+        if (keysA.length !== keysB.length) return false;
+
+        return keysA.every((key) => {
+            return a[key] === b[key];
+        });
+    }
+
+    return false;
+}
+
 export function last<T>(arr: T[]): T | undefined {
     return arr[arr.length - 1];
 }

package/components/virtual.ts

@@ -64,13 +64,15 @@ export class Virtual extends Component<any> {
             return {...props, ...events, className: _props.className || _props.class /* vue-next */};
         } else if (hasOwn.call(vnode, 'componentOptions') /* vue2 vnode */) {
             const data = vnode.data;
-            const on = data && data.on || EMPTY_OBJ;
+            if (!data) return props;
+
+            const on = data.on || EMPTY_OBJ;
             const events: Record<string, Function> = {};
             for (let key in on) {
                 events[`ev-${key}`] = on[key];
             }
 
-            return {...props, ...events};
+            return {...props, ...events, className: data.staticClass};
         }
 
         return props;

package/components/wave/index.ts

@@ -3,6 +3,7 @@ import {isArray} from 'intact-shared';
 import {bind} from '../utils';
 import {makeStyles} from './styles';
 import {theme} from '../../styles/theme';
+import { useConfigContext } from '../config';
 
 export interface WaveProps {
     disabled?: boolean
@@ -37,10 +38,11 @@ export class Wave extends Component<WaveProps> {
     private instance: HTMLElement | null = null;
     private className!: string;
     private timer: number = 0;
+    private config = useConfigContext();
 
     private initClassName() {
         const {color, inset} = this.get();
-        this.className = makeStyles(color || theme.color.primary, inset!);
+        this.className = makeStyles(color || theme.color.primary, inset!, this.config.k);
     }
 
     @bind
@@ -72,7 +74,7 @@ export class Wave extends Component<WaveProps> {
 
         // 点击输入框中的icon时，此时输入框不需要动效
         const isInput = instance!.classList.contains('k-input-wrapper');
-        if (disabled || isInput && node!.classList.contains('k-icon')) return;
+        if (disabled || isInput && node!.classList.contains(this.config.cls('icon'))) return;
 
         this.resetAnimation();
       

package/components/wave/styles.ts

@@ -12,7 +12,7 @@ setDefault(() => {
     wave = deepDefaults(theme, {wave: defaults}).wave;
 });
 
-export function makeStyles(color: string, inset: string) {
+export function makeStyles(color: string, inset: string, k: string) {
     const waveEffect = keyframes`
         100% {
             top: calc(${inset} + ${wave.inset});
@@ -41,8 +41,8 @@ export function makeStyles(color: string, inset: string) {
             border: 2px solid ${color};
             pointer-events: none;
         }
-        &.k-circle,
-        &.k-radio-wrapper {
+        &.${k}-circle,
+        &.${k}-radio-wrapper {
             &:after {
                 border-radius: calc(${theme.large.height} / 2 + 4px);
             }

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

@@ -26,4 +26,5 @@ export declare class Affix extends Component<AffixProps, AffixEvents> {
     static typeDefs: Required<TypeDefs<AffixProps>>;
     private elementRef;
     private style;
+    private config;
 }

package/es/components/affix/index.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component, createRef } from 'intact';
 import template from './index.vdt';
 import { useStyle } from './useStyle';
+import { useConfigContext } from '../config';
 var typeDefs = {
   top: Number,
   bottom: Number,
@@ -24,6 +25,7 @@ export var Affix = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.elementRef = createRef();
     _this.style = useStyle(_this.elementRef);
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -17,16 +17,16 @@ export default function ($props, $blocks, $__proto__) {
   var _this$style = this.style,
       _style = _this$style.style,
       containerStyle = _this$style.containerStyle;
-  var classNameObj = (_classNameObj = {
-    'k-affix': true,
-    'k-fixed': _style.value
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var _this$config = this.config,
+      cls = _this$config.cls,
+      k = _this$config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-affix"] = true, _classNameObj[k + "-fixed"] = _style.value, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this), {
     'style': addStyle(style, containerStyle.value),
     'ref': this.elementRef
-  }), _$ce(2, 'div', children, 0, 'k-affix-wrapper', {
+  }), _$ce(2, 'div', children, 0, _$cn(cls('affix-wrapper')), {
     'style': _style.value
   }));
 }

package/es/components/affix/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/affix/styles.js

@@ -11,6 +11,6 @@ setDefault(function () {
     affix: defaults
   }).affix;
 });
-export function makeStyles() {
+export function makeStyles(k) {
   return /*#__PURE__*/css("position:relative;z-index:", affix.zIndex, ";");
 }

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

@@ -7,4 +7,5 @@ export interface BadgeProps {
 export declare class Badge extends Component<BadgeProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<BadgeProps>>;
+    private config;
 }

package/es/components/badge/index.js

@@ -1,6 +1,8 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component } from 'intact';
 import template from './index.vdt';
+import { useConfigContext } from '../config';
 var typeDefs = {
   text: [String, Number],
   max: Number,
@@ -10,7 +12,17 @@ export var Badge = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Badge, _Component);
 
   function Badge() {
-    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 Badge;

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

@@ -20,11 +20,12 @@ export default function ($props, $blocks, $__proto__) {
     text = max + "+";
   }
 
-  var classNameObj = (_classNameObj = {
-    'k-badge': true
-  }, _classNameObj[className] = className, _classNameObj['k-has-text'] = text != null, _classNameObj['k-alone'] = !children, _classNameObj[makeStyles()] = true, _classNameObj);
+  var _this$config = this.config,
+      cls = _this$config.cls,
+      k = _this$config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-badge"] = true, _classNameObj[className] = className, _classNameObj[k + "-has-text"] = text != null, _classNameObj[k + "-alone"] = !children, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
-  }), [children, !disabled ? _$ce(2, 'sup', text, 0, 'k-badge-text') : undefined]);
+  }), [children, !disabled ? _$ce(2, 'sup', text, 0, _$cn(k + "-badge-text")) : undefined]);
 }
 ;

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

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

package/es/components/badge/styles.js

@@ -21,6 +21,6 @@ setDefault(function () {
     badge: defaults
   }).badge;
 });
-export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.k-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:85%;vertical-align:baseline;}&.k-has-text>.k-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.k-alone>.k-badge-text{position:static;transform:none;}");
+export default function makeStyles(k) {
+  return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.", k, "-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:85%;vertical-align:baseline;}&.", k, "-has-text>.", k, "-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.", k, "-alone>.", k, "-badge-text{position:static;transform:none;}");
 }

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

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

package/es/components/breadcrumb/index.js

@@ -1,6 +1,8 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component } from 'intact';
 import template from './index.vdt';
+import { useConfigContext } from '../config';
 export * from './item';
 var typeDefs = {
   separator: String
@@ -16,7 +18,17 @@ export var Breadcrumb = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Breadcrumb, _Component);
 
   function Breadcrumb() {
-    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 Breadcrumb;

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
-import { createElementVNode as _$ce, noop as _$no, createVNode as _$cv, className as _$cn } from 'intact';
+import { createElementVNode as _$ce, noop as _$no, className as _$cn, createVNode as _$cv } from 'intact';
 import { getRestProps, mapChildren } from '../utils';
 import { BreadcrumbItem } from './item';
 import makeStyles from './styles';
@@ -18,9 +18,8 @@ export default function ($props, $blocks, $__proto__) {
       separator = _this$get.separator,
       className = _this$get.className;
 
-  var classNameObj = (_classNameObj = {
-    'k-breadcrumb': true
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-breadcrumb"] = true, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
 
   var separatorVNode = _$ce(2, 'span', (_$blocks['separator'] = function ($super) {
     return separator;
@@ -32,7 +31,7 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['separator'](_$no)), 0, 'k-breadcrumb-separator');
+  }, __$blocks['separator'](_$no)), 0, _$cn(k + "-breadcrumb-separator"));
 
   var vNodes = [];
   var lastIndex = -1;

package/es/components/breadcrumb/item.d.ts

@@ -6,5 +6,6 @@ export declare class BreadcrumbItem extends Component<BreadcrumbItemProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<BreadcrumbItemProps>>;
     private router;
+    private config;
     private onClick;
 }

package/es/components/breadcrumb/item.js

@@ -5,6 +5,7 @@ import { Component } from 'intact';
 import { bind } from '../utils';
 import template from './item.vdt';
 import { useRouter, navigate } from '../../hooks/useRouter';
+import { useConfigContext } from '../config';
 var typeDefs = {
   to: [String, Object]
 };
@@ -22,6 +23,7 @@ export var BreadcrumbItem = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.router = useRouter();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/breadcrumb/item.vdt.js

@@ -13,13 +13,12 @@ export default function ($props, $blocks, $__proto__) {
       children = _this$get.children,
       className = _this$get.className;
 
-  var classNameObj = (_classNameObj = {
-    'k-breadcrumb-item': true
-  }, _classNameObj[className] = className, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-breadcrumb-item"] = true, _classNameObj[className] = className, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
-  }, getRestProps(this)), to ? _$ce(2, 'a', children, 0, 'k-breadcrumb-link', {
+  }, getRestProps(this)), to ? _$ce(2, 'a', children, 0, _$cn(k + "-breadcrumb-link"), {
     'ev-click': this.onClick
-  }) : _$ce(2, 'span', children, 0, 'k-breadcrumb-link'));
+  }) : _$ce(2, 'span', children, 0, _$cn(k + "-breadcrumb-link")));
 }
 ;

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

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

package/es/components/breadcrumb/styles.js

@@ -23,6 +23,6 @@ setDefault(function () {
     breadcrumb: defaults
   }).breadcrumb;
 });
-export default function makeStyles() {
-  return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";display:flex;align-items:center;.k-breadcrumb-item{&:last-of-type .k-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.k-breadcrumb-link,.k-breadcrumb-link a{color:", breadcrumb.color, ";}a.k-breadcrumb-link,.k-breadcrumb-link a{cursor:pointer;&:hover{color:", breadcrumb.hoverColor, ";}}.k-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
+export default function makeStyles(k) {
+  return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";display:flex;align-items:center;.", k, "-breadcrumb-item{&:last-of-type .", k, "-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{color:", breadcrumb.color, ";}a.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{cursor:pointer;&:hover{color:", breadcrumb.hoverColor, ";}}.", k, "-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
 }

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

@@ -10,6 +10,7 @@ export declare class ButtonGroup extends Component<ButtonGroupProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<ButtonGroupProps>>;
     static defaults: () => Partial<ButtonGroupProps>;
+    private config;
     init(): void;
     setValue(v: any): void;
 }

package/es/components/button/group.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, provide } from 'intact';
 import template from './group.vdt';
 import { toggleArray } from '../utils';
 import { BUTTON_GROUP } from './constants';
+import { useConfigContext } from '../config';
 var typeDefs = {
   vertical: Boolean,
   value: null,
@@ -21,7 +23,17 @@ export var ButtonGroup = /*#__PURE__*/function (_Component) {
   _inheritsLoose(ButtonGroup, _Component);
 
   function ButtonGroup() {
-    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 = ButtonGroup.prototype;

package/es/components/button/group.vdt.js

@@ -16,12 +16,8 @@ export default function ($props, $blocks, $__proto__) {
       fluid = _this$get.fluid,
       seperate = _this$get.seperate;
 
-  var classNameObj = (_classNameObj = {
-    'k-btns': true,
-    'k-vertical': vertical,
-    'k-fluid': fluid,
-    'k-seperate': seperate
-  }, _classNameObj[className] = className, _classNameObj[makeButtonGroupStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-btns"] = true, _classNameObj[k + "-vertical"] = vertical, _classNameObj[k + "-fluid"] = fluid, _classNameObj[k + "-seperate"] = seperate, _classNameObj[className] = className, _classNameObj[makeButtonGroupStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), children);