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

package/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/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-react';
+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-react';
 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/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/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/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/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/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/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/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/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/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/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/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'];
 

package/components/dialog/base.d.ts

@@ -49,6 +49,10 @@ export declare class BaseDialog<T extends BaseDialogProps = BaseDialogProps, E e
     private overlayRef;
     private drag;
     private mouseOutsidable;
+    protected config: {
+        cls: (name: string) => string;
+        readonly k: string;
+    };
     init(): void;
     show(props?: T): void;
     close(): void;

package/components/dialog/base.js

@@ -13,6 +13,7 @@ import { useDraggable } from './useDraggable';
 import { useEscClosable } from './useEscClosable';
 import { SHOW, HIDE, DIALOG } from './constants';
 import { useFixBody, setHooks } from './useFixBody';
+import { useConfigContext } from '../config';
 var typeDefs = {
   title: String,
   value: Boolean,
@@ -74,6 +75,7 @@ export var BaseDialog = /*#__PURE__*/function (_Component) {
     _this.overlayRef = createRef();
     _this.drag = useDraggable(_this.dialogRef, _this.overlayRef);
     _this.mouseOutsidable = useMouseOutsidable(_this.dialogRef, false);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/dialog/base.vdt.js

@@ -1,4 +1,4 @@
-import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, noop as _$no, className as _$cn } from 'intact-react';
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn, noop as _$no } from 'intact-react';
 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/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/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/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/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/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 {};