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

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

@@ -1,4 +1,4 @@
-import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, noop as _$no, className as _$cn } from 'intact';
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn, noop as _$no } from 'intact';
 import { Button } from '../button';
 import { Icon } from '../icon';
 import { Portal } from '../portal';
@@ -6,9 +6,6 @@ import { _$ } from '../../i18n';
 import { Transition } from 'intact';
 import { getRestProps, stopPropagation } from '../utils';
 import { makeDialogStyles, makeWrapperStyles } from './styles';
-var _$tmp0 = {
-  'className': 'k-icon-close'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj, _$cn2;
 
@@ -35,10 +32,8 @@ export default function ($props, $blocks, $__proto__) {
       children = _this$get.children;
 
   var isHide = mode === 'hide';
-  var classNameObj = (_classNameObj = {
-    'k-dialog': true,
-    'k-dragging': this.drag.dragging.value
-  }, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj["k-" + size] = size !== 'default', _classNameObj[makeDialogStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-dialog"] = true, _classNameObj[k + "-dragging"] = this.drag.dragging.value, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[makeDialogStyles(k)] = true, _classNameObj);
 
   var dialog = _$cc(Transition, {
     'show': value,
@@ -47,7 +42,7 @@ export default function ($props, $blocks, $__proto__) {
     'onAfterLeave': this.onAfterLeave,
     'children': (isHide ? true : value) ? _$ce(2, 'div', (_$blocks['content'] = function ($super) {
       return [_$ce(2, 'div', [(_$blocks['header'] = function ($super) {
-        return _$ce(2, 'span', title, 0, 'k-dialog-title');
+        return _$ce(2, 'span', title, 0, _$cn(k + "-dialog-title"));
       }, __$blocks['header'] = function ($super, data) {
         var block = $blocks['header'];
 
@@ -60,11 +55,13 @@ export default function ($props, $blocks, $__proto__) {
         'type': 'none',
         'icon': true,
         'title': _$("关闭"),
-        'className': 'k-dialog-close',
+        'className': _$cn(k + "-dialog-close"),
         'ev-click': this.terminate,
         'ev-mousedown': stopPropagation,
-        'children': _$cc(Icon, _$tmp0)
-      }) : undefined], 0, 'k-dialog-header', {
+        'children': _$cc(Icon, {
+          'className': _$cn(k + "-icon-close")
+        })
+      }) : undefined], 0, _$cn(k + "-dialog-header"), {
         'ev-mousedown': this.drag.start
       }), _$ce(2, 'div', (_$blocks['body'] = function ($super) {
         return children;
@@ -76,14 +73,14 @@ export default function ($props, $blocks, $__proto__) {
         };
 
         return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['body'](_$no)), 0, 'k-dialog-body'), (_$blocks['footer-wrapper'] = function ($super) {
+      }, __$blocks['body'](_$no)), 0, _$cn(k + "-dialog-body")), (_$blocks['footer-wrapper'] = function ($super) {
         return _$ce(2, 'div', (_$blocks['footer'] = function ($super) {
           return [_$cc(Button, {
-            'className': 'k-dialog-cancel',
+            'className': _$cn(k + "-dialog-cancel"),
             'ev-click': this.cancel,
             'children': cancelText
           }), _$cc(Button, {
-            'className': 'k-dialog-ok',
+            'className': _$cn(k + "-dialog-ok"),
             'type': 'primary',
             'ev-click': this.ok,
             'loading': loading,
@@ -98,7 +95,7 @@ export default function ($props, $blocks, $__proto__) {
           };
 
           return block ? block.call($this, callBlock, data) : callBlock();
-        }, __$blocks['footer'](_$no)), 0, 'k-dialog-footer');
+        }, __$blocks['footer'](_$no)), 0, _$cn(k + "-dialog-footer"));
       }, __$blocks['footer-wrapper'] = function ($super, data) {
         var block = $blocks['footer-wrapper'];
 
@@ -131,13 +128,10 @@ export default function ($props, $blocks, $__proto__) {
       'show': overlay ? value : false,
       'appear': value,
       'name': 'k-fade',
-      'children': _$ce(2, 'div', null, 1, 'k-dialog-overlay', {
+      'children': _$ce(2, 'div', null, 1, _$cn(k + "-dialog-overlay"), {
         'ev-click': this.onClickWrapper
       }, null, this.overlayRef)
-    }, 'overlay') : undefined, dialog], 0, _$cn((_$cn2 = {
-      'k-dialog-wrapper': true,
-      'k-open': value
-    }, _$cn2[makeWrapperStyles()] = true, _$cn2)))
+    }, 'overlay') : undefined, dialog], 0, _$cn((_$cn2 = {}, _$cn2[k + "-dialog-wrapper"] = true, _$cn2[k + "-open"] = value, _$cn2[makeWrapperStyles(k)] = true, _$cn2)))
   });
 }
 ;

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

@@ -7,7 +7,7 @@ export interface DialogEvents extends BaseDialogEvents {
 }
 export interface DialogBlocks extends BaseDialogBlocks {
 }
-export declare class BaseDialog<P extends DialogProps = DialogProps, E extends DialogEvents = DialogEvents, B extends DialogBlocks = DialogBlocks> extends _BaseDialog<P, E> {
+export declare class BaseDialog<P extends DialogProps = DialogProps, E extends DialogEvents = DialogEvents, B extends DialogBlocks = DialogBlocks> extends _BaseDialog<P, E, B> {
     useAsComponent: boolean;
     constructor(props?: Props<P, BaseDialog> | null | undefined, $vNode?: VNodeComponentClass, $SVG?: boolean, $mountedQueue?: Function[], $senior?: ComponentClass | null);
     init(): void;

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

@@ -1,4 +1,4 @@
 import '../../styles/global';
-export declare function makeDialogStyles(): string;
-export declare function makeWrapperStyles(): string;
-export declare function makeAlertStyles(): string;
+export declare function makeDialogStyles(k: string): string;
+export declare function makeWrapperStyles(k: string): string;
+export declare function makeAlertStyles(k: string): string;

package/es/components/dialog/styles.js

@@ -82,23 +82,23 @@ setDefault(function () {
     dialog: defaults
   }).dialog;
 });
-export function makeDialogStyles() {
+export function makeDialogStyles(k) {
   var _context;
 
-  return /*#__PURE__*/css("position:absolute;width:", dialog.width, ";border-radius:", dialog.borderRadius, ";background:", dialog.bgColor, ";font-size:", dialog.fontSize, ";color:", dialog.color, ";box-shadow:", dialog.boxShadow, ";max-width:100%;z-index:", theme.maxZIndex, ";&.k-dragging{cursor:move;user-select:none;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:all ", dialog.transition, ";}&.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:", dialog.transform, ";opacity:0;}", _mapInstanceProperty(_context = ['large', 'small', 'mini']).call(_context, function (size) {
-    return /*#__PURE__*/css("&.k-", size, "{width:", dialog[size + "Width"], ";}");
-  }), ".k-dialog-header{padding:0 ", dialog.padding, ";margin:", dialog.margin, ";border-bottom:", dialog.header.border, ";height:", dialog.header.height, ";line-height:", dialog.header.height, ";font-size:", dialog.header.fontSize, ";color:", dialog.header.color, ";position:relative;font-weight:", dialog.header.fontWeight, ";}.k-dialog-title{display:inline-block;}.k-dialog-close{position:absolute;right:", dialog.header.closeRight, ";top:", dialog.header.closeTop, ";.k-icon{font-size:", dialog.header.closeIconFontSize, ";}}.k-dialog-body{padding:", dialog.body.padding, ";}.k-dialog-footer{text-align:right;padding:", dialog.footer.padding, ";margin:", dialog.margin, ";border-top:", dialog.footer.border, ";.k-btn{margin-left:", dialog.footer.btnGap, ";}}");
+  return /*#__PURE__*/css("position:absolute;width:", dialog.width, ";border-radius:", dialog.borderRadius, ";background:", dialog.bgColor, ";font-size:", dialog.fontSize, ";color:", dialog.color, ";box-shadow:", dialog.boxShadow, ";max-width:100%;z-index:", theme.maxZIndex, ";&.", k, "-dragging{cursor:move;user-select:none;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:all ", dialog.transition, ";}&.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:", dialog.transform, ";opacity:0;}", _mapInstanceProperty(_context = ['large', 'small', 'mini']).call(_context, function (size) {
+    return /*#__PURE__*/css("&.", k, "-", size, "{width:", dialog[size + "Width"], ";}");
+  }), ".", k, "-dialog-header{padding:0 ", dialog.padding, ";margin:", dialog.margin, ";border-bottom:", dialog.header.border, ";height:", dialog.header.height, ";line-height:", dialog.header.height, ";font-size:", dialog.header.fontSize, ";color:", dialog.header.color, ";position:relative;font-weight:", dialog.header.fontWeight, ";}.", k, "-dialog-title{display:inline-block;}.", k, "-dialog-close{position:absolute;right:", dialog.header.closeRight, ";top:", dialog.header.closeTop, ";.", k, "-icon{font-size:", dialog.header.closeIconFontSize, ";}}.", k, "-dialog-body{padding:", dialog.body.padding, ";}.", k, "-dialog-footer{text-align:right;padding:", dialog.footer.padding, ";margin:", dialog.margin, ";border-top:", dialog.footer.border, ";.", k, "-btn{margin-left:", dialog.footer.btnGap, ";}}");
 }
-export function makeWrapperStyles() {
-  // k-fade-leave-active will add position absolute to the styles
-  // so we must set fixed with important to .k-dialog-overlay
-  return /*#__PURE__*/css("position:absolute;z-index:", theme.maxZIndex, ";top:0;left:0;width:100%;.k-dialog-overlay{position:fixed!important;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);}");
+export function makeWrapperStyles(k) {
+  //.${k}-fade-leave-active will add position absolute to the styles
+  // so we must set fixed with important to .${k}-dialog-overlay
+  return /*#__PURE__*/css("position:absolute;z-index:", theme.maxZIndex, ";top:0;left:0;width:100%;.", k, "-dialog-overlay{position:fixed!important;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);}");
 }
-export function makeAlertStyles() {
+export function makeAlertStyles(k) {
   var _context2;
 
-  return /*#__PURE__*/css("&.k-alert-dialog{.k-dialog-body{margin-top:", dialog.alert.bodyMarginTop, ";padding:", dialog.alert.padding, ";text-align:center;position:relative;z-index:1;}.k-dialog-header,.k-dialog-footer{border:none;}.k-dialog-tip-icon{margin-bottom:", dialog.alert.tipIconMarginBottom, ";.k-icon{font-size:", dialog.alert.tipIconFontSize, ";line-height:", dialog.alert.tipIconLineHeight, ";}}", _mapInstanceProperty(_context2 = ['success', 'warning', 'error', 'confirm']).call(_context2, function (type) {
+  return /*#__PURE__*/css("&.", k, "-alert-dialog{.", k, "-dialog-body{margin-top:", dialog.alert.bodyMarginTop, ";padding:", dialog.alert.padding, ";text-align:center;position:relative;z-index:1;}.", k, "-dialog-header,.", k, "-dialog-footer{border:none;}.", k, "-dialog-tip-icon{margin-bottom:", dialog.alert.tipIconMarginBottom, ";.", k, "-icon{font-size:", dialog.alert.tipIconFontSize, ";line-height:", dialog.alert.tipIconLineHeight, ";}}", _mapInstanceProperty(_context2 = ['success', 'warning', 'error', 'confirm']).call(_context2, function (type) {
     var color = type === 'error' ? theme.color.danger : type === 'confirm' ? theme.color.primary : theme.color[type];
-    return /*#__PURE__*/css("&.k-", type, "{.k-dialog-tip-icon{color:", color, ";}}");
-  }), " &:not(.k-confirm){.k-dialog-cancel{display:none;}}&.k-with-title{.k-dialog-body{margin-top:", dialog.alert.titleBodyMarginTop, ";text-align:left;}.k-dialog-tip-icon{float:left;.k-icon{font-size:", dialog.alert.titleTipIconFontSize, ";}}.k-alert-dialog-wrapper{overflow:hidden;padding-left:", dialog.alert.wrapperPaddingLeft, ";}.k-alert-dialog-title{line-height:", dialog.alert.tipIconLineHeight, ";font-size:", dialog.alert.titleFontSize, ";font-weight:", dialog.alert.titleFontWeight, ";}}}");
+    return /*#__PURE__*/css("&.", k, "-", type, "{.", k, "-dialog-tip-icon{color:", color, ";}}");
+  }), " &:not(.", k, "-confirm){.", k, "-dialog-cancel{display:none;}}&.", k, "-with-title{.", k, "-dialog-body{margin-top:", dialog.alert.titleBodyMarginTop, ";text-align:left;}.", k, "-dialog-tip-icon{float:left;.", k, "-icon{font-size:", dialog.alert.titleTipIconFontSize, ";}}.", k, "-alert-dialog-wrapper{overflow:hidden;padding-left:", dialog.alert.wrapperPaddingLeft, ";}.", k, "-alert-dialog-title{line-height:", dialog.alert.tipIconLineHeight, ";font-size:", dialog.alert.titleFontSize, ";font-weight:", dialog.alert.titleFontWeight, ";}}}");
 }

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

@@ -11,9 +11,8 @@ export default function ($props, $blocks, $__proto__) {
       placement = _this$get.placement,
       overlay = _this$get.overlay;
 
-  var classNameObj = (_classNameObj = {
-    'k-drawer': true
-  }, _classNameObj["k-" + placement] = true, _classNameObj[makeStyles(overlay)] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-drawer"] = true, _classNameObj[k + "-" + placement] = true, _classNameObj[makeStyles(overlay, k)] = true, _classNameObj);
   return _$su.call($this, {
     'className': _$cn(classNameObj)
   }, function ($blocks) {
@@ -21,7 +20,7 @@ export default function ($props, $blocks, $__proto__) {
         __$blocks = _$ex({}, $blocks);
 
     return (_$blocks['content'] = function ($super) {
-      return _$ce(2, 'div', $super(), 0, 'k-drawer-content');
+      return _$ce(2, 'div', $super(), 0, _$cn(k + "-drawer-content"));
     }, __$blocks['content'] = function ($super, data) {
       var block = $blocks['content'];
 

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

@@ -2,5 +2,5 @@ import '../../styles/global';
 declare type ValueOf<T extends readonly any[]> = T[number];
 export declare type Placement = ValueOf<typeof placements>;
 export declare const placements: readonly ["top", "right", "bottom", "left"];
-export declare function makeStyles(overlay: boolean): string;
+export declare function makeStyles(overlay: boolean, k: string): string;
 export {};

package/es/components/drawer/styles.js

@@ -20,8 +20,8 @@ setDefault(function () {
     drawer: defaults
   }).drawer;
 });
-export function makeStyles(overlay) {
-  return /*#__PURE__*/css("position:fixed!important;background:transparent!important;box-shadow:none!important;&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.k-drawer-content{transition:transform ", drawer.transition, ";}}.k-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.k-dialog-body{flex-grow:1;overflow:auto;}}", _mapInstanceProperty(placements).call(placements, function (placement) {
+export function makeStyles(overlay, k) {
+  return /*#__PURE__*/css("position:fixed!important;background:transparent!important;box-shadow:none!important;&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.", k, "-drawer-content{transition:transform ", drawer.transition, ";}}.", k, "-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.", k, "-dialog-body{flex-grow:1;overflow:auto;}}", _mapInstanceProperty(placements).call(placements, function (placement) {
     var positionValue = '';
     var transformValue = '';
     var borderRadius = '';
@@ -53,6 +53,6 @@ export function makeStyles(overlay) {
       }
     }
 
-    return "\n                &.k-" + placement + " {\n                    " + positionValue + "\n                    &.transition-enter-from,\n                    &.transition-leave-to,\n                    &.transition-appear-from {\n                        transform: none !important;\n                        .k-drawer-content {\n                            transform: " + transformValue + ";\n                        }\n                    }\n                    .k-drawer-content {\n                        border-radius: " + borderRadius + ";\n                    }\n                }\n            ";
+    return /*#__PURE__*/css("&.", k, "-", placement, "{", positionValue, " &.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:none!important;.", k, "-drawer-content{transform:", transformValue, ";}}.", k, "-drawer-content{border-radius:", borderRadius, ";}}");
   }), ";");
 }

package/es/components/dropdown/dropdown.d.ts

@@ -45,6 +45,7 @@ export declare class Dropdown<T extends DropdownProps = DropdownProps, E extends
             value: boolean;
         };
     };
+    private config;
     protected timer: number | undefined;
     init(): void;
     show(shouldFocus?: boolean): void;

package/es/components/dropdown/dropdown.js

@@ -12,6 +12,7 @@ import { Portal } from '../portal';
 import { useShowHideEvents } from '../../hooks/useShowHideEvents';
 import { usePosition } from './usePosition';
 import { Virtual } from '../virtual';
+import { useConfigContext } from '../config';
 export var DROPDOWN = 'Dropdown';
 export var ROOT_DROPDOWN = 'RootDropdown';
 var typeDefs = {
@@ -61,6 +62,7 @@ export var Dropdown = /*#__PURE__*/function (_Component) {
     _this.rootDropdown = null;
     _this.showedDropdown = null;
     _this.positionHook = usePosition();
+    _this.config = useConfigContext();
     _this.timer = undefined;
     return _this;
   }
@@ -232,9 +234,8 @@ Dropdown.template = function () {
       value = _this$get.value,
       container = _this$get.container;
 
-  className = cx((_cx = {
-    'k-dropdown-open': value
-  }, _cx[className] = !!className, _cx));
+  var k = this.config.k;
+  className = cx((_cx = {}, _cx[k + "-dropdown-open"] = value, _cx[className] = !!className, _cx));
   this.menuVNode = menu;
   return [h(Virtual, _extends({}, props, getRestProps(this), {
     className: className

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

@@ -19,6 +19,7 @@ export declare class DropdownItem extends Component<DropdownItemProps, DropdownI
     private dropdown;
     private keyboard;
     private dropdownMenu;
+    private config;
     init(): void;
     select(): void;
     hasSubMenu(): undefined;

package/es/components/dropdown/item.js

@@ -8,6 +8,7 @@ import { useItemKeyboard } from './useKeyboard';
 import { DROPDOWN } from './dropdown';
 import { DROPDOWN_MENU } from './menu';
 import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';
+import { useConfigContext } from '../config';
 var typeDefs = {
   disabled: Boolean,
   hideOnSelect: Boolean,
@@ -37,6 +38,7 @@ export var DropdownItem = /*#__PURE__*/function (_Component) {
     _this.dropdown = null;
     _this.keyboard = null;
     _this.dropdownMenu = null;
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -16,10 +16,8 @@ export default function ($props, $blocks, $__proto__) {
       hideOnSelect = _this$get.hideOnSelect,
       _isFocus = _this$get._isFocus;
 
-  var classNameObj = (_classNameObj = {
-    'k-dropdown-item': true,
-    'k-disabled': disabled
-  }, _classNameObj[className] = className, _classNameObj['k-hover'] = this.keyboard.isFocus.value, _classNameObj[makeItemStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-dropdown-item"] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[className] = className, _classNameObj[k + "-hover"] = this.keyboard.isFocus.value, _classNameObj[makeItemStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj),
     'ev-click': this.onClick,

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

@@ -15,6 +15,7 @@ export declare class DropdownMenu<T extends DropdownMenuProps = DropdownMenuProp
         lock: (v: boolean) => boolean;
     };
     private transition;
+    private config;
     init(): void;
     protected onMouseEnter(e: MouseEvent): void;
     private onMouseLeave;

package/es/components/dropdown/menu.js

@@ -8,6 +8,7 @@ import { DROPDOWN } from './dropdown';
 import { useTransition } from './useTransition';
 import { useMenuKeyboard } from './useKeyboard';
 import { useMouseOutsidable } from '../../hooks/useMouseOutsidable';
+import { useConfigContext } from '../config';
 export var DROPDOWN_MENU = 'DropdownMenu';
 export var DropdownMenu = /*#__PURE__*/function (_Component) {
   _inheritsLoose(DropdownMenu, _Component);
@@ -28,6 +29,7 @@ export var DropdownMenu = /*#__PURE__*/function (_Component) {
     _this.transition = useTransition(function (callback) {
       return _this.dropdown.position(callback);
     });
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/dropdown/menu.vdt.js

@@ -20,9 +20,8 @@ export default function ($props, $blocks, $__proto__) {
       children = _this$get.children,
       className = _this$get.className;
 
-  var classNameObj = (_classNameObj = {
-    'k-dropdown-menu': true
-  }, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[makeMenuStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-dropdown-menu"] = true, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[makeMenuStyles(k)] = true, _classNameObj);
 
   var transition = $props.transition || _extends({
     css: false

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

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

package/es/components/dropdown/styles.js

@@ -48,9 +48,9 @@ setDefault(function () {
     dropdown: defaults
   }).dropdown;
 });
-export function makeMenuStyles() {
-  return /*#__PURE__*/css("position:absolute;min-width:", dropdown.menu.minWidth, ";background:", dropdown.menu.bgColor, ";border-radius:", dropdown.menu.borderRadius, ";box-shadow:", theme.middleBoxShadow, ";font-size:", dropdown.menu.fontSize, ";z-index:", dropdown.menu.zIndex, ";top:0;left:0;.k-dropdown{display:block;}");
+export function makeMenuStyles(k) {
+  return /*#__PURE__*/css("position:absolute;min-width:", dropdown.menu.minWidth, ";background:", dropdown.menu.bgColor, ";border-radius:", dropdown.menu.borderRadius, ";box-shadow:", theme.middleBoxShadow, ";font-size:", dropdown.menu.fontSize, ";z-index:", dropdown.menu.zIndex, ";top:0;left:0;.", k, "-dropdown{display:block;}");
 }
-export function makeItemStyles() {
-  return /*#__PURE__*/css("padding:", dropdown.item.padding, ";cursor:pointer;white-space:nowrap;height:", dropdown.item.height, ";line-height:", dropdown.item.height, ";&.k-hover{background:", dropdown.item.hoverBgColor, ";}&:first-of-type{border-radius:", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, " 0 0;}&:last-of-type{border-radius:0 0 ", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, ";}&.k-disabled{background:", dropdown.item.disabledBgColor, ";color:", dropdown.item.disabledColor, ";cursor:not-allowed;}.k-checkbox,.k-radio{display:flex;margin:0 -", getRight(dropdown.item.padding), " 0 -", getLeft(dropdown.item.padding), ";padding:", dropdown.item.padding, ";}.k-checkbox-wrapper,.k-radio-wrapper{vertical-align:text-bottom;}.k-checkbox-text,.k-radio-text{vertical-align:baseline;}");
+export function makeItemStyles(k) {
+  return /*#__PURE__*/css("padding:", dropdown.item.padding, ";cursor:pointer;white-space:nowrap;height:", dropdown.item.height, ";line-height:", dropdown.item.height, ";&.", k, "-hover{background:", dropdown.item.hoverBgColor, ";}&:first-of-type{border-radius:", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, " 0 0;}&:last-of-type{border-radius:0 0 ", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, ";}&.", k, "-disabled{background:", dropdown.item.disabledBgColor, ";color:", dropdown.item.disabledColor, ";cursor:not-allowed;}.", k, "-checkbox,.", k, "-radio{display:flex;margin:0 -", getRight(dropdown.item.padding), " 0 -", getLeft(dropdown.item.padding), ";padding:", dropdown.item.padding, ";}.", k, "-checkbox-wrapper,.", k, "-radio-wrapper{vertical-align:text-bottom;}.", k, "-checkbox-text,.", k, "-radio-text{vertical-align:baseline;}");
 }

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

@@ -21,6 +21,7 @@ export declare class Editable<V extends Value = Value> extends Component<Editabl
     static defaults: () => Partial<EditableProps<Value>>;
     static events: Events<EditableEvents<Value>>;
     private inputRef;
+    private config;
     private edit;
     select(): void;
     private onBlur;

package/es/components/editable/index.js

@@ -6,6 +6,7 @@ import { Component, createRef } from 'intact';
 import template from './index.vdt';
 import { _$ } from '../../i18n';
 import { bind } from '../utils';
+import { useConfigContext } from '../config';
 var typeDefs = {
   editing: Boolean,
   value: [String, Number],
@@ -43,6 +44,7 @@ export var Editable = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.inputRef = createRef();
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -21,16 +21,12 @@ export default function ($props, $blocks, $__proto__) {
       tip = _this$get.tip,
       invalid = _this$get.invalid;
 
-  var classNameObj = (_classNameObj = {
-    'k-editable': true,
-    'k-editing': editing,
-    'k-disabled': disabled,
-    'k-invalid': invalid
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-editable"] = true, _classNameObj[k + "-editing"] = editing, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-invalid"] = invalid, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
   }), [!disabled && !editing ? _$cc(Icon, {
-    'className': 'k-icon-edit k-editable-icon',
+    'className': _$cn(k + "-icon-edit " + k + "-editable-icon"),
     'title': tip,
     'ev-click': this.edit,
     'hoverable': true

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

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

package/es/components/editable/styles.js

@@ -20,6 +20,6 @@ setDefault(function () {
   }).editable;
 });
 export { editable };
-export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;line-height:", editable.lineHeight, ";.k-editable-icon{float:right;cursor:pointer;margin:", editable.iconGap, ";line-height:unset;}&.k-invalid{.k-input-inner{border:", editable.invalid.border, "!important;}}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("display:inline-block;line-height:", editable.lineHeight, ";.", k, "-editable-icon{float:right;cursor:pointer;margin:", editable.iconGap, ";line-height:unset;}&.", k, "-invalid{.", k, "-input-inner{border:", editable.invalid.border, "!important;}}");
 }

package/es/components/form/form.d.ts

@@ -28,6 +28,7 @@ export declare class Form extends Component<FormProps, FormEvents> {
     static defaults: () => Partial<FormProps>;
     static addMethod: (name: string, method: import("./methods").Method, message?: import("./methods").Message | undefined, className?: import("./methods").ClassName | undefined) => void;
     private items;
+    private config;
     init(): void;
     validate(): Promise<boolean>;
     getFirstInvalidFormItem(): FormItem | undefined;

package/es/components/form/form.js

@@ -9,6 +9,7 @@ import template from './form.vdt';
 import { useRecordParent } from '../../hooks/useRecordComponent';
 import { addMethod } from './methods';
 import { bind } from '../utils';
+import { useConfigContext } from '../config';
 var typeDefs = {
   labelWidth: [String, Number],
   layout: ['horizontal', 'vertical', 'inline'],
@@ -39,6 +40,7 @@ export var Form = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.items = useRecordParent(RECORD_KEY);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/form/form.vdt.js

@@ -15,9 +15,8 @@ export default function ($props, $blocks, $__proto__) {
       layout = _this$get.layout,
       size = _this$get.size;
 
-  var classNameObj = (_classNameObj = {
-    'k-form': true
-  }, _classNameObj[className] = className, _classNameObj["k-" + layout] = layout, _classNameObj["k-" + size] = size !== 'default', _classNameObj[makeFormStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-form"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + layout] = layout, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[makeFormStyles(k)] = true, _classNameObj);
   return _$cv('form', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj),
     'ev-submit': this.onSubmit,

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

@@ -28,6 +28,7 @@ export declare class FormItem extends Component<FormItemProps, FormItemEvents, F
     private error;
     private dirty;
     private validateHook;
+    private config;
     init(): void;
     validate(): boolean | (Promise<boolean> & {
         cancelled: boolean;

package/es/components/form/item.js

@@ -7,6 +7,7 @@ import { useRecordItem } from '../../hooks/useRecordComponent';
 import { useError } from './useError';
 import { useValidate } from './useValidate';
 import { useDirty } from './useDirty';
+import { useConfigContext } from '../config';
 var MessageOrClassname;
 
 (function (MessageOrClassname) {
@@ -44,6 +45,7 @@ export var FormItem = /*#__PURE__*/function (_Component) {
       return _this.validateHook.validate;
     });
     _this.validateHook = useValidate(_this.error.getErrorMessage, _this.error.getErrorClassName, _this.error.message, _this.dirty.isDirty);
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -6,11 +6,6 @@ import { Icon } from '../icon';
 import { Transition } from 'intact';
 import { makeItemStyles } from './styles';
 import { context as ErrorContext } from './useError';
-var _$tmp0 = {
-  'className': 'ion-ios-information-outline k-form-error-more',
-  'size': 'small',
-  'color': 'inherit'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj, _$cn2;
 
@@ -37,11 +32,8 @@ export default function ($props, $blocks, $__proto__) {
   var _this$validateHook = this.validateHook,
       isValid = _this$validateHook.isValid.value,
       customErrorClassName = _this$validateHook.errorClassName.value;
-  var classNameObj = (_classNameObj = {
-    'k-form-item': true,
-    'k-invalid': isDirty && !isValid,
-    'k-valid': isDirty && isValid
-  }, _classNameObj[className] = className, _classNameObj['k-fluid'] = fluid, _classNameObj[makeItemStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-form-item"] = true, _classNameObj[k + "-invalid"] = isDirty && !isValid, _classNameObj[k + "-valid"] = isDirty && isValid, _classNameObj[className] = className, _classNameObj[k + "-fluid"] = fluid, _classNameObj[makeItemStyles(k)] = true, _classNameObj);
   var starOnRequired = this.form && this.form.get('starOnRequired');
   var labelWidth = this.form && this.form.get('labelWidth');
   var labelStyle;
@@ -66,7 +58,7 @@ export default function ($props, $blocks, $__proto__) {
     'className': _$cn(classNameObj),
     'ev-change': onChange,
     'ev-focusout': onFocusout
-  }), [!hideLabel ? _$ce(2, 'label', [starOnRequired && rules && rules.required ? _$ce(2, 'span', '*', 16, 'k-form-star') : undefined, (_$blocks['label'] = function ($super) {
+  }), [!hideLabel ? _$ce(2, 'label', [starOnRequired && rules && rules.required ? _$ce(2, 'span', '*', 16, _$cn(k + "-form-star")) : undefined, (_$blocks['label'] = function ($super) {
     return label;
   }, __$blocks['label'] = function ($super, data) {
     var block = $blocks['label'];
@@ -76,7 +68,7 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['label'](_$no))], 0, 'k-form-label', {
+  }, __$blocks['label'](_$no))], 0, _$cn(k + "-form-label"), {
     'htmlFor': htmlFor,
     'style': labelStyle
   }) : undefined, _$ce(2, 'div', [_$cc(ErrorContext.Provider, {
@@ -95,10 +87,14 @@ export default function ($props, $blocks, $__proto__) {
   }), _$cc(Transition, {
     'key': 'error',
     'name': 'k-fade',
-    'children': isDirty && !isValid ? _$ce(2, 'div', [_$ce(2, 'div', message.value, 0, 'k-error-message c-ellipsis', null, null, errorRef), _$cc(Tooltip, {
+    'children': isDirty && !isValid ? _$ce(2, 'div', [_$ce(2, 'div', message.value, 0, _$cn(k + "-error-message c-ellipsis"), null, null, errorRef), _$cc(Tooltip, {
       'hoverable': true,
       'position': 'bottom',
-      'children': _$cc(Icon, _$tmp0),
+      'children': _$cc(Icon, {
+        'className': _$cn("ion-ios-information-outline " + k + "-form-error-more"),
+        'size': 'small',
+        'color': 'inherit'
+      }),
       '$blocks': function ($blocks) {
         var _$blocks = {},
             __$blocks = _$ex({}, $blocks);
@@ -115,10 +111,8 @@ export default function ($props, $blocks, $__proto__) {
           return block ? block.call($this, callBlock, data) : callBlock();
         }), __$blocks;
       }.call($this, _$em)
-    })], 4, _$cn((_$cn2 = {
-      "k-form-error": true
-    }, _$cn2[errorClassName] = errorClassName, _$cn2[customErrorClassName] = customErrorClassName, _$cn2['k-ellipsis'] = ellipsis.value, _$cn2))) : undefined
-  }, 'error')], 0, 'k-form-content'), $blocks.append ? _$ce(2, 'div', (_$blocks['append'] = function ($super) {
+    })], 4, _$cn((_$cn2 = {}, _$cn2[k + "-form-error"] = true, _$cn2[errorClassName] = errorClassName, _$cn2[customErrorClassName] = customErrorClassName, _$cn2[k + "-ellipsis"] = ellipsis.value, _$cn2))) : undefined
+  }, 'error')], 0, _$cn(k + "-form-content")), $blocks.append ? _$ce(2, 'div', (_$blocks['append'] = function ($super) {
     return null;
   }, __$blocks['append'] = function ($super, data) {
     var block = $blocks['append'];
@@ -128,6 +122,6 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['append'](_$no)), 0, 'k-form-append') : undefined]);
+  }, __$blocks['append'](_$no)), 0, _$cn(k + "-form-append")) : undefined]);
 }
 ;

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

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

package/es/components/form/styles.js

@@ -49,13 +49,13 @@ setDefault(function () {
     form: defaults
   }).form;
 });
-export function makeItemStyles() {
-  return /*#__PURE__*/css("display:flex;position:relative;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.k-fluid>.k-form-content{flex:1;}.k-form-label{display:flex;align-items:center;justify-content:", form.item.labelTextAlign === 'right' ? 'end' : 'start', ";width:", form.item.labelWidth, ";padding-right:", form.item.labelGap, ";max-height:", form.item.labelHeight, ";flex-shrink:0;}.k-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.k-form-content{position:relative;}.k-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.k-ellipsis{.k-form-error-more{display:inline-block;}}}.k-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.k-invalid{.k-input{.k-input-wrapper{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.k-select,.k-checkbox-wrapper,.k-radio-wrapper{border:", form.item.invalidBorder, "!important;}.k-select .k-input .k-input-wrapper{border:none;}}.k-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
+export function makeItemStyles(k) {
+  return /*#__PURE__*/css("display:flex;position:relative;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.", k, "-fluid>.", k, "-form-content{flex:1;}.", k, "-form-label{display:flex;align-items:center;justify-content:", form.item.labelTextAlign === 'right' ? 'end' : 'start', ";width:", form.item.labelWidth, ";padding-right:", form.item.labelGap, ";max-height:", form.item.labelHeight, ";flex-shrink:0;}.", k, "-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.", k, "-form-content{position:relative;}.", k, "-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.", k, "-ellipsis{.", k, "-form-error-more{display:inline-block;}}}.", k, "-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.", k, "-invalid{.", k, "-input{.", k, "-input-wrapper{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.", k, "-select,.", k, "-checkbox-wrapper,.", k, "-radio-wrapper{border:", form.item.invalidBorder, "!important;}.", k, "-select .", k, "-input .", k, "-input-wrapper{border:none;}}.", k, "-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
 }
-export function makeFormStyles() {
+export function makeFormStyles(k) {
   var _context;
 
-  return /*#__PURE__*/css("&.k-inline{.k-form-item{display:inline-flex;vertical-align:top;margin-right:", form.item.inlineGap, ";}.k-form-label{width:auto;}}&.k-vertical{.k-form-item{flex-direction:column;}.k-form-label{width:auto;text-align:left;padding:0;justify-content:start;margin-bottom:", form.item.verticalLabelGap, ";}}", _mapInstanceProperty(_context = ['small', 'mini']).call(_context, function (size) {
-    return /*#__PURE__*/css("&.k-", size, "{.k-form-item:not(:last-of-type){margin-bottom:", form.item[size + "Gap"], ";}&.k-inline{.k-form-item{margin-right:", form.item[size + "InlineGap"], ";}}}");
+  return /*#__PURE__*/css("&.", k, "-inline{.", k, "-form-item{display:inline-flex;vertical-align:top;margin-right:", form.item.inlineGap, ";}.", k, "-form-label{width:auto;}}&.", k, "-vertical{.", k, "-form-item{flex-direction:column;}.", k, "-form-label{width:auto;text-align:left;padding:0;justify-content:start;margin-bottom:", form.item.verticalLabelGap, ";}}", _mapInstanceProperty(_context = ['small', 'mini']).call(_context, function (size) {
+    return /*#__PURE__*/css("&.", k, "-", size, "{.", k, "-form-item:not(:last-of-type){margin-bottom:", form.item[size + "Gap"], ";}&.", k, "-inline{.", k, "-form-item{margin-right:", form.item[size + "InlineGap"], ";}}}");
   }), ";");
 }

package/es/components/form/useError.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 useError(): {
     ellipsis: import("../../hooks/useState").State<boolean>;