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

package/es/components/config/index.js

@@ -0,0 +1,23 @@
+import { createContext } from '../context';
+import { EMPTY_OBJ } from 'intact';
+
+var _createContext = createContext(EMPTY_OBJ),
+    ConfigProvider = _createContext.Provider,
+    ConfigConsumer = _createContext.Consumer,
+    useContext = _createContext.useContext;
+
+function useConfigContext() {
+  var config = useContext();
+  return {
+    cls: function cls(name) {
+      return (config.value.classNamePrefix || 'k') + "-" + name;
+    },
+
+    get k() {
+      return config.value.classNamePrefix || 'k';
+    }
+
+  };
+}
+
+export { ConfigProvider, ConfigConsumer, useConfigContext };

package/es/components/config/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/es/components/config/index.spec.js

@@ -0,0 +1,71 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact';
+import { mount, wait } from '../../test/utils';
+import { ConfigProvider } from '.';
+import { Button, ButtonGroup } from '../button';
+describe('Config', function () {
+  // afterEach(async () => {
+  // unmount();
+  // });
+  it('should change classname prefix', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var Demo, _mount, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                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.ConfigProvider = ConfigProvider;
+                _this.ButtonGroup = ButtonGroup;
+                _this.Button = Button;
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  k: null
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { ConfigProvider, ButtonGroup, Button } = this;\n                <div>\n                    <ConfigProvider value={{classNamePrefix: this.get('k')}}>\n                        <ButtonGroup>\n                            <Button ev-click={() => this.set('k', 'a')}>change to a</Button>\n                            <Button type=\"primary\" ev-click={() => this.set('k', 'b')}>change to b</Button>\n                        </ButtonGroup>\n                    </ConfigProvider>\n                    <Button>should not change</Button>\n                </div>\n            ";
+            _mount = mount(Demo), instance = _mount[0], element = _mount[1];
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('k', 'a');
+            _context2.next = 7;
+            return wait();
+
+          case 7:
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('k', 'b');
+            _context2.next = 11;
+            return wait();
+
+          case 11:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 12:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/es/components/context.d.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentConstructor } from 'intact';
+import { Component, RefObject, ComponentConstructor } from 'intact';
 export interface ProviderProps<T> {
     value?: T;
 }
@@ -10,5 +10,6 @@ declare type ConsumerConstructor<T> = ComponentConstructor<Component<ConsumerPro
 export declare function createContext<T = any>(defaultValue?: T): {
     Provider: ProviderConstructor<T>;
     Consumer: ConsumerConstructor<T>;
+    useContext: () => RefObject<T | undefined>;
 };
 export {};

package/es/components/context.js

@@ -53,7 +53,7 @@ export function createContext(defaultValue) {
       }
 
       _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context2 = [this]).call(_context2, args)) || this;
-      _this2.ref = inject(injectionKey, null);
+      _this2.ref = inject(injectionKey, createRef(defaultValue));
       return _this2;
     }
 
@@ -61,9 +61,15 @@ export function createContext(defaultValue) {
   }(Component);
 
   Consumer.template = consumerTemplate;
+
+  function useContext() {
+    return inject(injectionKey, createRef(defaultValue));
+  }
+
   return {
     Provider: Provider,
-    Consumer: Consumer
+    Consumer: Consumer,
+    useContext: useContext
   };
 }
 

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

@@ -14,4 +14,5 @@ export declare class Copy extends Component<CopyProps, CopyEvents> {
     static defaults: () => Partial<CopyProps>;
     static events: Events<CopyEvents>;
     private copy;
+    private config;
 }

package/es/components/copy/index.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component } from 'intact';
 import template from './index.vdt';
 import { useCopy } from './useCopy';
+import { useConfigContext } from '../config';
 var typeDefs = {
   text: String,
   showMessage: Boolean
@@ -32,6 +33,7 @@ export var Copy = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.copy = useCopy();
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -6,12 +6,6 @@ import { Virtual } from '../virtual';
 import { Transition } from 'intact';
 import { makeStyles } from './styles';
 import { _$ } from '../../i18n';
-var _$tmp0 = {
-  'key': '2',
-  'className': 'k-icon-check',
-  'hoverable': true,
-  'color': 'success'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -26,7 +20,8 @@ export default function ($props, $blocks, $__proto__) {
   var _this$copy = this.copy,
       startCopy = _this$copy.startCopy,
       success = _this$copy.success;
-  var classNameObj = (_classNameObj = {}, _classNameObj["k-copy"] = true, _classNameObj[makeStyles()] = true, _classNameObj[className] = className, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-copy"] = true, _classNameObj[makeStyles(k)] = true, _classNameObj[className] = className, _classNameObj);
   return _$cc(Transition, {
     'name': 'k-fade',
     'children': _$cc(Virtual, _extends({
@@ -35,10 +30,15 @@ export default function ($props, $blocks, $__proto__) {
     }, getRestProps(this), {
       'children': children ? children : !success.value ? _$cc(Icon, {
         'key': '1',
-        'className': 'k-icon-clone',
+        'className': _$cn(k + "-icon-clone"),
         'hoverable': true,
         'title': _$('复制')
-      }, '1') : _$cc(Icon, _$tmp0, '2')
+      }, '1') : _$cc(Icon, {
+        'key': '2',
+        'className': _$cn(k + "-icon-check"),
+        'hoverable': true,
+        'color': 'success'
+      }, '2')
     }))
   });
 }

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

@@ -2,7 +2,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/css';
 import '../../styles/global';
-export function makeStyles() {
+export function makeStyles(k) {
   return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
     name: "t3aops",
     styles: "cursor:pointer;vertical-align:middle"

package/es/components/datepicker/calendar.d.ts

@@ -74,5 +74,6 @@ export declare class DatepickerCalendar extends Component<DatepickerCalendarProp
         }[];
         onClick: (date: Dayjs) => void;
     };
+    private config;
     triggerChange(value: Dayjs): void;
 }

package/es/components/datepicker/calendar.js

@@ -12,6 +12,7 @@ import { bind } from '../utils';
 import { useYears } from './useYears';
 import { useMonths } from './useMonths';
 import { useStatus } from './useStatus';
+import { useConfigContext } from '../config';
 
 var defaults = function defaults() {
   return {
@@ -39,6 +40,7 @@ export var DatepickerCalendar = /*#__PURE__*/function (_Component) {
     _this.days = useDays(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
     _this.years = useYears(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
     _this.months = useMonths(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/datepicker/calendar.vdt.js

@@ -5,30 +5,6 @@ import { Icon } from '../icon';
 import { _$ } from '../../i18n';
 import { makeCalendarStyles } from './styles';
 import { getNowDate } from './helpers';
-var _$tmp0 = {
-  'className': 'k-icon-left',
-  'size': 'small'
-};
-var _$tmp1 = {
-  'className': 'k-icon-left',
-  'size': 'small'
-};
-var _$tmp2 = {
-  'className': 'k-icon-left',
-  'size': 'small'
-};
-var _$tmp3 = {
-  'className': 'k-icon-right',
-  'size': 'small'
-};
-var _$tmp4 = {
-  'className': 'k-icon-right',
-  'size': 'small'
-};
-var _$tmp5 = {
-  'className': 'k-icon-right',
-  'size': 'small'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -38,9 +14,8 @@ export default function ($props, $blocks, $__proto__) {
   var type = this.type.value;
   var isYear = type === 'year';
   var isYearOrMonth = isYear || type === 'month';
-  var classNameObj = (_classNameObj = {
-    'k-datepicker-calendar': true
-  }, _classNameObj[makeCalendarStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-datepicker-calendar"] = true, _classNameObj[makeCalendarStyles(k)] = true, _classNameObj);
   var now = getNowDate();
   var _this$datepicker$focu = this.datepicker.focusDate,
       focusDate = _this$datepicker$focu.focusDate,
@@ -48,15 +23,9 @@ export default function ($props, $blocks, $__proto__) {
 
   var getItems = function getItems(data, onClick) {
     return _$ma(data, function ($value, $key) {
-      return _$ce(2, 'div', _$ce(2, 'div', $value.label, 0, 'k-value'), 2, _$cn({
-        "k-calendar-item": true,
-        "k-exceed": $value.isExceed,
-        "k-active": $value.isActive,
-        "k-today": $value.isToday,
-        "k-disabled": $value.isDisabled,
-        "k-hover": $value.isHover,
-        "k-in-range": $value.isInRange
-      }), {
+      var _$cn2;
+
+      return _$ce(2, 'div', _$ce(2, 'div', $value.label, 0, _$cn(k + "-value")), 2, _$cn((_$cn2 = {}, _$cn2[k + "-calendar-item"] = true, _$cn2[k + "-exceed"] = $value.isExceed, _$cn2[k + "-active"] = $value.isActive, _$cn2[k + "-today"] = $value.isToday, _$cn2[k + "-disabled"] = $value.isDisabled, _$cn2[k + "-hover"] = $value.isHover, _$cn2[k + "-in-range"] = $value.isInRange, _$cn2)), {
         'ev-click': !$value.isDisabled ? function (e) {
           e._ignore = true;
           onClick($value.value);
@@ -83,43 +52,61 @@ export default function ($props, $blocks, $__proto__) {
     'icon': true,
     'type': 'none',
     'size': 'small',
-    'className': 'k-prev',
+    'className': _$cn(k + "-prev"),
     'tagName': 'div',
     'ev-click': isYear ? prevTenYears : prevYear,
-    'children': [_$cc(Icon, _$tmp0), _$cc(Icon, _$tmp1)]
+    'children': [_$cc(Icon, {
+      'className': _$cn(k + "-icon-left"),
+      'size': 'small'
+    }), _$cc(Icon, {
+      'className': _$cn(k + "-icon-left"),
+      'size': 'small'
+    })]
   }), !isYearOrMonth ? _$cc(Button, {
     'icon': true,
     'type': 'none',
     'size': 'small',
-    'className': 'k-prev',
+    'className': _$cn(k + "-prev"),
     'tagName': 'div',
     'ev-click': prevMonth,
-    'children': _$cc(Icon, _$tmp2)
-  }) : undefined], 0, 'k-left-btns'), _$ce(2, 'div', !isYear ? _$ma(getDateLabel(), function ($value, $key) {
-    return _$ce(2, 'span', $value.value, 0, 'k-month-value', {
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-icon-left"),
+      'size': 'small'
+    })
+  }) : undefined], 0, _$cn(k + "-left-btns")), _$ce(2, 'div', !isYear ? _$ma(getDateLabel(), function ($value, $key) {
+    return _$ce(2, 'span', $value.value, 0, _$cn(k + "-month-value"), {
       'ev-click': $value.onClick
     });
-  }, $this) : _$ce(2, 'span', this.years.getYearLabel(), 0, 'k-month-value'), 0, 'k-month-values'), _$ce(2, 'div', [!isYearOrMonth ? _$cc(Button, {
+  }, $this) : _$ce(2, 'span', this.years.getYearLabel(), 0, _$cn(k + "-month-value")), 0, _$cn(k + "-month-values")), _$ce(2, 'div', [!isYearOrMonth ? _$cc(Button, {
     'icon': true,
     'type': 'none',
     'size': 'small',
-    'className': 'k-next',
+    'className': _$cn(k + "-next"),
     'tagName': 'div',
     'ev-click': nextMonth,
-    'children': _$cc(Icon, _$tmp3)
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-icon-right"),
+      'size': 'small'
+    })
   }) : undefined, _$cc(Button, {
     'icon': true,
     'type': 'none',
     'size': 'small',
-    'className': 'k-next',
+    'className': _$cn(k + "-next"),
     'tagName': 'div',
     'ev-click': isYear ? nextTenYears : nextYear,
-    'children': [_$cc(Icon, _$tmp4), _$cc(Icon, _$tmp5)]
-  })], 0, 'k-right-btns')], 4, 'k-datepicker-month'), !isYearOrMonth ? [_$ce(2, 'div', _$ma([_$('日'), _$('一'), _$('二'), _$('三'), _$('四'), _$('五'), _$('六')], function ($value, $key) {
-    return _$ce(2, 'div', $value, 0, 'k-weekday');
-  }, $this), 4, 'k-weekdays'), _$ce(2, 'div', getItems(getDays(now), onClickDay), 0, 'k-days', {
+    'children': [_$cc(Icon, {
+      'className': _$cn(k + "-icon-right"),
+      'size': 'small'
+    }), _$cc(Icon, {
+      'className': _$cn(k + "-icon-right"),
+      'size': 'small'
+    })]
+  })], 0, _$cn(k + "-right-btns"))], 4, _$cn(k + "-datepicker-month")), !isYearOrMonth ? [_$ce(2, 'div', _$ma([_$('日'), _$('一'), _$('二'), _$('三'), _$('四'), _$('五'), _$('六')], function ($value, $key) {
+    return _$ce(2, 'div', $value, 0, _$cn(k + "-weekday"));
+  }, $this), 4, _$cn(k + "-weekdays")), _$ce(2, 'div', getItems(getDays(now), onClickDay), 0, _$cn(k + "-days"), {
     'ev-mouseleave': resetFocusDate
-  })] : _$ce(2, 'div', isYear ? getItems(this.years.getYears(now), this.years.onClick) : getItems(this.months.getMonths(now), this.months.onClick), 0, 'k-years', {
+  })] : _$ce(2, 'div', isYear ? getItems(this.years.getYears(now), this.years.onClick) : getItems(this.months.getMonths(now), this.months.onClick), 0, _$cn(k + "-years"), {
     'ev-mouseleave': resetFocusDate
   })], 0, _$cn(classNameObj));
 }

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

@@ -1,5 +1,5 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
-import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, className as _$cn, createTextVNode as _$ct } from 'intact';
+import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, createTextVNode as _$ct } from 'intact';
 import { linkEvent } from 'intact';
 import { DropdownMenu } from '../dropdown';
 import { DatepickerCalendar } from './calendar';
@@ -11,12 +11,6 @@ import { makePanelStyles } from './styles';
 import { PanelTypes, PanelFlags } from './usePanel';
 import { isFunction } from 'intact-shared';
 import { Tabs, Tab } from '../tabs';
-var _$tmp0 = {
-  'className': 'k-datepicker'
-};
-var _$tmp1 = {
-  'className': 'k-icon-calendar'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -39,9 +33,8 @@ export default function ($props, $blocks, $__proto__) {
       onChangeTime = _this$value.onChangeTime,
       onChangeDateForRange = _this$value.onChangeDateForRange,
       getTimeValue = _this$value.getTimeValue;
-  var classNameObj = (_classNameObj = {
-    'k-datepicker-content': true
-  }, _classNameObj[className] = className, _classNameObj[makePanelStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-datepicker-content"] = true, _classNameObj[className] = className, _classNameObj[makePanelStyles(k)] = true, _classNameObj);
   var _this$disabled = this.disabled,
       isDisabledTime = _this$disabled.isDisabledTime,
       isDisabledConfirm = _this$disabled.isDisabledConfirm;
@@ -95,10 +88,12 @@ export default function ($props, $blocks, $__proto__) {
       'format': _this.formats.getValueFormat(),
       'flag': flag,
       'isDisabledTime': isDisabledTime
-    })], 0, 'k-datepicker-calendar-wrapper');
+    })], 0, _$cn(k + "-datepicker-calendar-wrapper"));
   };
 
-  return _$su.call($this, _$tmp0, function ($blocks) {
+  return _$su.call($this, {
+    'className': _$cn(k + "-datepicker")
+  }, function ($blocks) {
     var _$blocks = {},
         __$blocks = _$ex({}, $blocks);
 
@@ -109,17 +104,17 @@ export default function ($props, $blocks, $__proto__) {
         'className': _$cn(classNameObj),
         'children': [shortcuts && shortcuts.length ? _$ce(2, 'div', _mapInstanceProperty(shortcuts).call(shortcuts, function ($value) {
           var label = isFunction($value.label) ? $value.label() : $value.label;
-          return _$ce(2, 'div', label, 0, 'k-datepicker-shortcut c-ellipsis', {
+          return _$ce(2, 'div', label, 0, _$cn(k + "-datepicker-shortcut c-ellipsis"), {
             'title': label,
             'ev-click': linkEvent($value, _this2.setByShortcut)
           });
-        }), 0, 'k-datepicker-shortcuts') : undefined, _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n                    '), range ? generatePanel(PanelFlags.End) : null], 0, 'k-datepicker-calendars'), type === 'datetime' ? _$ce(2, 'div', _$cc(Button, {
+        }), 0, _$cn(k + "-datepicker-shortcuts")) : undefined, _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n                    '), range ? generatePanel(PanelFlags.End) : null], 0, _$cn(k + "-datepicker-calendars")), type === 'datetime' ? _$ce(2, 'div', _$cc(Button, {
           'type': 'primary',
           'size': 'small',
           'disabled': isDisabledConfirm(),
           'ev-click': onConfirm,
           'children': _$('确定')
-        }), 2, 'k-datepicker-footer') : undefined], 0, 'k-datepicker-wrapper')]
+        }), 2, _$cn(k + "-datepicker-footer")) : undefined], 0, _$cn(k + "-datepicker-wrapper"))]
       });
     }, __$blocks['base-menu'] = function ($super, data) {
       var block = $blocks['base-menu'];
@@ -130,7 +125,9 @@ export default function ($props, $blocks, $__proto__) {
 
       return block ? block.call($this, callBlock, data) : callBlock();
     }), (_$blocks['suffix'] = function ($super) {
-      return _$cc(Icon, _$tmp1);
+      return _$cc(Icon, {
+        'className': _$cn(k + "-icon-calendar")
+      });
     }, __$blocks['suffix'] = function ($super, data) {
       var block = $blocks['suffix'];
 

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

@@ -46,6 +46,6 @@ declare const defaults: {
 };
 declare let datepicker: typeof defaults;
 export { datepicker };
-export declare function makePanelStyles(): string;
-export declare function makeCalendarStyles(): string;
-export declare function makeTimeStyles(): string;
+export declare function makePanelStyles(k: string): string;
+export declare function makeCalendarStyles(k: string): string;
+export declare function makeTimeStyles(k: string): string;

package/es/components/datepicker/styles.js

@@ -79,12 +79,12 @@ setDefault(function () {
   }).datepicker;
 });
 export { datepicker };
-export function makePanelStyles() {
-  return /*#__PURE__*/css("display:flex;.k-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.k-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.k-datepicker-calendars{display:flex;}.k-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.k-tabs{border:none;.k-tabs-wrapper{float:none;}.k-tab{width:50%;}}}.k-datepicker-footer{border-top:", datepicker.border, ";padding:", datepicker.footer.padding, ";text-align:right;}");
+export function makePanelStyles(k) {
+  return /*#__PURE__*/css("display:flex;.", k, "-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.", k, "-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.", k, "-datepicker-calendars{display:flex;}.", k, "-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.", k, "-tabs{border:none;.", k, "-tabs-wrapper{float:none;}.", k, "-tab{width:50%;}}}.", k, "-datepicker-footer{border-top:", datepicker.border, ";padding:", datepicker.footer.padding, ";text-align:right;}");
 }
-export function makeCalendarStyles() {
-  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.k-prev .k-icon,.k-next .k-icon{margin:0 -5px!important;}.k-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.k-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.k-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.k-weekday{flex:1;text-align:center;}.k-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";.k-value{border-radius:", datepicker.item.borderRadius, ";}&.k-hover{background:", datepicker.item.hoverBgColor, ";}&.k-exceed{color:", datepicker.item.exceedColor, ";}&.k-today .k-value{border:", datepicker.item.todayBorder, ";}&.k-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.k-today .k-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.k-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.k-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.k-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.k-days{display:grid;grid-template-columns:repeat(7, 1fr);}.k-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
+export function makeCalendarStyles(k) {
+  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.", k, "-prev .", k, "-icon,.", k, "-next .", k, "-icon{margin:0 -5px!important;}.", k, "-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.", k, "-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.", k, "-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.", k, "-weekday{flex:1;text-align:center;}.", k, "-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";.", k, "-value{border-radius:", datepicker.item.borderRadius, ";}&.", k, "-hover{background:", datepicker.item.hoverBgColor, ";}&.", k, "-exceed{color:", datepicker.item.exceedColor, ";}&.", k, "-today .", k, "-value{border:", datepicker.item.todayBorder, ";}&.", k, "-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.", k, "-today .", k, "-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.", k, "-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.", k, "-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.", k, "-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.", k, "-days{display:grid;grid-template-columns:repeat(7, 1fr);}.", k, "-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
 }
-export function makeTimeStyles() {
-  return /*#__PURE__*/css("display:flex;padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.k-scroll-select{flex:1;height:305px;}");
+export function makeTimeStyles(k) {
+  return /*#__PURE__*/css("display:flex;padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-scroll-select{flex:1;height:305px;}");
 }

package/es/components/datepicker/time.d.ts

@@ -21,6 +21,7 @@ export declare class DatepickerTime extends Component<DatepickerTimeProps> {
         disableHours: import("../../hooks/useState").State<boolean>;
         disableItem: (v: number, type: keyof Value) => boolean;
     };
+    private config;
     init(): void;
     changeHour(v: number): void;
     changeMinute(v: number): void;

package/es/components/datepicker/time.js

@@ -7,6 +7,7 @@ import template from './time.vdt';
 import { useState } from '../../hooks/useState';
 import { bind } from '../utils';
 import { getNowDate } from './helpers';
+import { useConfigContext } from '../config';
 var defaultValue = {
   h: 0,
   m: 0,
@@ -27,6 +28,7 @@ export var DatepickerTime = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.value = useState(defaultValue);
     _this.disabled = useDisable(_assertThisInitialized(_this));
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/datepicker/time.vdt.js

@@ -14,9 +14,8 @@ export default function ($props, $blocks, $__proto__) {
       disableMinutes = _this$disabled.disableMinutes,
       disableSeconds = _this$disabled.disableSeconds,
       disableItem = _this$disabled.disableItem;
-  var classNameObj = (_classNameObj = {
-    'k-datepicker-time': true
-  }, _classNameObj[makeTimeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-datepicker-time"] = true, _classNameObj[makeTimeStyles(k)] = true, _classNameObj);
   return _$ce(2, 'div', [_$cc(ScrollSelect, {
     'data': hours,
     'value': value.h,

package/es/components/diagram/diagram.d.ts

@@ -18,6 +18,7 @@ export declare class Diagram extends Component<DiagramProps, DiagramEvents> {
     private lines;
     private layouts;
     private canvasRef;
+    private config;
     private isCellSelectable;
     private isCellRotatable;
     private isCellMovable;

package/es/components/diagram/diagram.js

@@ -10,6 +10,7 @@ import mx from './mxgraph';
 import { bind } from '../utils';
 import { DIAGRAM } from './constants';
 import { error, isNullOrUndefined } from 'intact-shared';
+import { useConfigContext } from '../config';
 var mxRubberband = mx.mxRubberband,
     mxEvent = mx.mxEvent;
 var events = {
@@ -35,6 +36,7 @@ export var Diagram = /*#__PURE__*/function (_Component) {
     _this.lines = new _Set();
     _this.layouts = new _Set();
     _this.canvasRef = createRef();
+    _this.config = useConfigContext();
     _this.isCellSelectable = void 0;
     _this.isCellRotatable = void 0;
     _this.isCellMovable = void 0;

package/es/components/diagram/diagram.vdt.js

@@ -13,11 +13,10 @@ export default function ($props, $blocks, $__proto__) {
       className = _this$get.className,
       children = _this$get.children;
 
-  var classNameObj = (_classNameObj = {
-    'k-diagram': true
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-diagram"] = true, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
-  }, getRestProps(this)), [_$ce(2, 'div', children, 0, 'k-diagram-scheme'), _$ce(2, 'div', null, 1, 'k-diagram-canvas', null, null, this.canvasRef)]);
+  }, getRestProps(this)), [_$ce(2, 'div', children, 0, _$cn(k + "-diagram-scheme")), _$ce(2, 'div', null, 1, _$cn(k + "-diagram-canvas"), null, null, this.canvasRef)]);
 }
 ;

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

@@ -2,7 +2,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/css';
 import '../../styles/global';
-export function makeStyles() {
+export function makeStyles(k) {
   return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
     name: "ohhwil",
     styles: "display:inline-block;overflow:auto;.mxRubberband{position:absolute;overflow:hidden;border-style:solid;border-width:1px;border-color:#0000ff;background:#0077ff;}.mxCellEditor{background:url(\"data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7\");border-color:transparent;border-style:solid;display:inline-block;position:absolute;overflow:visible;word-wrap:normal;border-width:0;min-width:1px;resize:none;padding:0;margin:0;}.mxPlainTextEditor{padding:0;margin:0;}"

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

@@ -19,9 +19,8 @@ export default function ($props, $blocks, $__proto__) {
       iconClassName = _this$get.iconClassName,
       icon = _this$get.icon;
 
-  var classNameObj = (_classNameObj = {
-    'k-alert-dialog': true
-  }, _classNameObj["k-" + type] = true, _classNameObj['k-with-title'] = title, _classNameObj[makeAlertStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-alert-dialog"] = true, _classNameObj[k + "-" + type] = true, _classNameObj[k + "-with-title"] = title, _classNameObj[makeAlertStyles(k)] = true, _classNameObj);
   return _$su.call($this, {
     'className': _$cn(classNameObj)
   }, function ($blocks) {
@@ -39,15 +38,12 @@ export default function ($props, $blocks, $__proto__) {
 
       return block ? block.call($this, callBlock, data) : callBlock();
     }), (_$blocks['body'] = function ($super) {
+      var _ref;
+
       return [_$ce(2, 'div', [!hideIcon && !icon ? _$cc(Icon, {
-        'className': _$cn(iconClassName || {
-          "k-icon-success-fill": type === 'success',
-          "k-icon-warning-fill": type === 'warning',
-          "k-icon-error-fill": type === 'error',
-          "k-icon-question-fill": type === 'confirm'
-        }),
+        'className': _$cn(iconClassName || (_ref = {}, _ref[k + "-icon-success-fill"] = type === 'success', _ref[k + "-icon-warning-fill"] = type === 'warning', _ref[k + "-icon-error-fill"] = type === 'error', _ref[k + "-icon-question-fill"] = type === 'confirm', _ref)),
         'color': type === 'error' ? 'danger' : type === 'confirm' ? 'primary' : type
-      }) : undefined, icon], 0, 'k-dialog-tip-icon'), _$ce(2, 'div', [title ? _$ce(2, 'div', title, 0, 'k-alert-dialog-title') : undefined, content], 0, 'k-alert-dialog-wrapper')];
+      }) : undefined, icon], 0, _$cn(k + "-dialog-tip-icon")), _$ce(2, 'div', [title ? _$ce(2, 'div', title, 0, _$cn(k + "-alert-dialog-title")) : undefined, content], 0, _$cn(k + "-alert-dialog-wrapper"))];
     }, __$blocks['body'] = function ($super, data) {
       var block = $blocks['body'];