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

package/components/datepicker/styles.ts

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

package/components/datepicker/time.ts

@@ -7,6 +7,7 @@ import {getNowDate} from './helpers';
 import {DATEPICKER} from './constants';
 import type {Datepicker} from './index';
 import {PanelFlags} from './usePanel';
+import { useConfigContext } from '../config';
 
 export interface DatepickerTimeProps {
     value: Dayjs | undefined 
@@ -32,6 +33,7 @@ export class DatepickerTime extends Component<DatepickerTimeProps> {
 
     public value = useState<Value>(defaultValue);
     public disabled = useDisable(this);
+    private config = useConfigContext();
 
     init() {
         this.watch('value', v => {

package/components/datepicker/time.vdt

@@ -4,9 +4,10 @@ import {makeTimeStyles} from './styles';
 
 const value = this.value.value;
 const {disableHours, disableMinutes, disableSeconds, disableItem} = this.disabled;
+const { k } = this.config;
 const classNameObj = {
-    'k-datepicker-time': true,
-    [makeTimeStyles()]: true,
+    [`${k}-datepicker-time`]: true,
+    [makeTimeStyles(k)]: true,
 }
 
 <div class={classNameObj}>

package/components/diagram/diagram.ts

@@ -9,6 +9,7 @@ import type {DLine} from './shapes/line';
 import type {DLayout} from './layouts/layout';
 import {error, isNullOrUndefined} from 'intact-shared';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 const {mxRubberband, mxEvent} = mx;
 
@@ -36,6 +37,7 @@ export class Diagram extends Component<DiagramProps, DiagramEvents> {
     private lines: Set<DLine> = new Set(); 
     private layouts: Set<DLayout> = new Set();
     private canvasRef = createRef<HTMLDivElement>();
+    private config = useConfigContext();
 
     // save the orignal function, because we will change them
     private isCellSelectable!: StateCallback;

package/components/diagram/diagram.vdt

@@ -2,15 +2,16 @@ import {getRestProps} from '../utils';
 import {makeStyles} from './styles';
 
 const {className, children} = this.get();
+const { k } = this.config;
 const classNameObj = {
-    'k-diagram': true,
+    [`${k}-diagram`]: true,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 <div class={classNameObj} {...getRestProps(this)}>
-    <div class="k-diagram-scheme">
+    <div class={`${k}-diagram-scheme`}>
         {children}
     </div>
-    <div class="k-diagram-canvas" ref={this.canvasRef}></div>
+    <div class={`${k}-diagram-canvas`} ref={this.canvasRef}></div>
 </div>

package/components/diagram/styles.ts

@@ -1,7 +1,7 @@
 import {css} from '@emotion/css';
 import '../../styles/global';
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         display: inline-block;
         overflow: auto;

package/components/dialog/alert.vdt

@@ -7,32 +7,33 @@ const {
     hideFooter, hideClose, title,
     iconClassName, icon
 } = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-alert-dialog': true,
-    [`k-${type}`]: true,
-    'k-with-title': title,
-    [makeAlertStyles()]: true,
+    [`${k}-alert-dialog`]: true,
+    [`${k}-${type}`]: true,
+    [`${k}-with-title`]: title,
+    [makeAlertStyles(k)]: true,
 };
 
 <t:super class={classNameObj}>
     <b:header />
     <b:body>
-        <div class="k-dialog-tip-icon">
+        <div class={`${k}-dialog-tip-icon`}>
             <Icon 
                 v-if={!hideIcon && !icon}
                 class={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',
+                    [`${k}-icon-success-fill`]: type === 'success',
+                    [`${k}-icon-warning-fill`]: type === 'warning',
+                    [`${k}-icon-error-fill`]: type === 'error',
+                    [`${k}-icon-question-fill`]: type === 'confirm',
                 }}
                 color={type === 'error' ? 'danger' : type === 'confirm' ? 'primary' : type}
             />
             {icon}
         </div>
-        <div class="k-alert-dialog-wrapper">
-            <div class="k-alert-dialog-title" v-if={title}>{title}</div>
+        <div class={`${k}-alert-dialog-wrapper`}>
+            <div class={`${k}-alert-dialog-title`} v-if={title}>{title}</div>
             {content}
         </div>
     </b:body>

package/components/dialog/base.ts

@@ -12,6 +12,7 @@ import {useEscClosable} from './useEscClosable';
 import {SHOW, HIDE, DIALOG} from './constants';
 import {useFixBody, setHooks} from './useFixBody';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 export interface BaseDialogProps {
     title?: string
@@ -113,6 +114,7 @@ export class BaseDialog<
         this.overlayRef,
     );
     private mouseOutsidable = useMouseOutsidable(this.dialogRef, false);
+    protected config = useConfigContext();
 
     init() {
         useShowHideEvents('value', SHOW, HIDE);

package/components/dialog/base.vdt

@@ -15,13 +15,14 @@ const {
 } = this.get();
 
 const isHide = mode === 'hide';
+const { k } = this.config;
 const classNameObj = {
-    'k-dialog': true, 
-    'k-dragging': this.drag.dragging.value,
+    [`${k}-dialog`]: true, 
+    [`${k}-dragging`]: this.drag.dragging.value,
     [className]: className,
     [$props.className]: $props.className,
-    [`k-${size}`]: size !== 'default',
-    [makeDialogStyles()]: true,
+    [`${k}-${size}`]: size !== 'default',
+    [makeDialogStyles(k)]: true,
 };
 const dialog = (
     <Transition
@@ -37,28 +38,28 @@ const dialog = (
             ev-mousedown={this.mouseOutsidable.onMouseDown}
         >
             <b:content>
-                <div class="k-dialog-header"
+                <div class={`${k}-dialog-header`}
                     ev-mousedown={this.drag.start}
                 >
                     <b:header>
-                        <span class="k-dialog-title">{title}</span>
+                        <span class={`${k}-dialog-title`}>{title}</span>
                     </b:header>
-                    <Button type="none" icon title={_$("关闭")} class="k-dialog-close"
+                    <Button type="none" icon title={_$("关闭")} class={`${k}-dialog-close`}
                         ev-click={this.terminate}
                         v-if={!hideClose && !$props.hideClose}
                         ev-mousedown={stopPropagation}
                     >
-                        <Icon class="k-icon-close" />
+                        <Icon class={`${k}-icon-close`} />
                     </Button>
                 </div>
-                <div class="k-dialog-body"><b:body>{children}</b:body></div>
+                <div class={`${k}-dialog-body`}><b:body>{children}</b:body></div>
                 <b:footer-wrapper>
-                    <div class="k-dialog-footer">
+                    <div class={`${k}-dialog-footer`}>
                         <b:footer>
-                            <Button class="k-dialog-cancel" 
+                            <Button class={`${k}-dialog-cancel`} 
                                 ev-click={this.cancel}
                             >{cancelText}</Button>
-                            <Button class="k-dialog-ok" 
+                            <Button class={`${k}-dialog-ok`} 
                                 type="primary"
                                 ev-click={this.ok} 
                                 loading={loading}
@@ -74,9 +75,9 @@ const dialog = (
 
 <Portal container={container}>
     <div class={{
-        'k-dialog-wrapper': true,
-        'k-open': value,
-        [makeWrapperStyles()]: true,
+        [`${k}-dialog-wrapper`]: true,
+        [`${k}-open`]: value,
+        [makeWrapperStyles(k)]: true,
     }}>
         <Transition 
             key="overlay" 
@@ -87,7 +88,7 @@ const dialog = (
         >
             <div
                 ev-click={this.onClickWrapper}
-                class="k-dialog-overlay"
+                class={`${k}-dialog-overlay`}
                 ref={this.overlayRef}
             ></div>
         </Transition>

package/components/dialog/index.ts

@@ -2,6 +2,7 @@ import {BaseDialog as _BaseDialog, BaseDialogProps, BaseDialogEvents, BaseDialog
 import {createVNode, VNodeComponentClass, callAll, Props, ComponentClass} from 'intact';
 import {addStaticMethods, StaticMethod} from './staticMethods';
 import {usePosition} from './usePosition';
+import { useConfigContext } from '../config';
 
 export interface DialogProps extends BaseDialogProps { }
 export interface DialogEvents extends BaseDialogEvents { }
@@ -11,7 +12,7 @@ export class BaseDialog<
     P extends DialogProps = DialogProps,
     E extends DialogEvents = DialogEvents,
     B extends DialogBlocks = DialogBlocks,
-> extends _BaseDialog<P, E> {
+> extends _BaseDialog<P, E, B> {
     public useAsComponent = false;
 
     constructor(

package/components/dialog/staticMethods.ts

@@ -1,4 +1,3 @@
-import {VNode, VNodeComponentClass} from 'intact';
 import type {Dialog, DialogProps} from './';
 import template from './alert.vdt';
 

package/components/dialog/styles.ts

@@ -68,7 +68,7 @@ setDefault(() => {
     dialog = deepDefaults(theme, {dialog: defaults}).dialog;
 });
 
-export function makeDialogStyles() {
+export function makeDialogStyles(k: string) {
     return css`
         position: absolute;
         width: ${dialog.width};
@@ -81,7 +81,7 @@ export function makeDialogStyles() {
         z-index: ${theme.maxZIndex};
 
         // drag
-        &.k-dragging {
+        &.${k}-dragging {
             cursor: move;
             user-select: none;
         }
@@ -103,14 +103,14 @@ export function makeDialogStyles() {
         // size
         ${(['large', 'small', 'mini'] as const).map(size => {
             return css`
-                &.k-${size} {
+                &.${k}-${size} {
                     width: ${dialog[`${size}Width` as const]}
                 }
             `
         })}
 
         // header
-        .k-dialog-header {
+        .${k}-dialog-header {
             padding: 0 ${dialog.padding};
             margin: ${dialog.margin};
             border-bottom: ${dialog.header.border} ;
@@ -121,47 +121,47 @@ export function makeDialogStyles() {
             position: relative;
             font-weight: ${dialog.header.fontWeight};
         }
-        .k-dialog-title {
+        .${k}-dialog-title {
             display: inline-block;
         }
-        .k-dialog-close {
+        .${k}-dialog-close {
             position: absolute;
             right: ${dialog.header.closeRight};
             top: ${dialog.header.closeTop};
-            .k-icon {
+            .${k}-icon {
                 font-size: ${dialog.header.closeIconFontSize};
             }
 
         }
 
         // body
-        .k-dialog-body {
+        .${k}-dialog-body {
             padding: ${dialog.body.padding};
         }
 
         // footer
-        .k-dialog-footer {
+        .${k}-dialog-footer {
             text-align: right;
             padding: ${dialog.footer.padding};
             margin: ${dialog.margin};
             border-top: ${dialog.footer.border};
-            .k-btn {
+            .${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
+export function makeWrapperStyles(k: string) {
+    //.${k}-fade-leave-active will add position absolute to the styles
+    // so we must set fixed with important to .${k}-dialog-overlay
     return css`
         position: absolute;
         z-index: ${theme.maxZIndex};
         top: 0;
         left: 0;
         width: 100%;
-        .k-dialog-overlay {
+        .${k}-dialog-overlay {
             position: fixed !important;
             top: 0;
             left: 0;
@@ -172,23 +172,23 @@ export function makeWrapperStyles() {
     `;
 }
 
-export function makeAlertStyles() {
+export function makeAlertStyles(k: string) {
     return css`
-        &.k-alert-dialog {
-            .k-dialog-body {
+        &.${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 {
+            .${k}-dialog-header,
+            .${k}-dialog-footer {
                 border: none;
             }
-            .k-dialog-tip-icon {
+            .${k}-dialog-tip-icon {
                 margin-bottom: ${dialog.alert.tipIconMarginBottom};
-                .k-icon {
+                .${k}-icon {
                     font-size: ${dialog.alert.tipIconFontSize};
                     line-height: ${dialog.alert.tipIconLineHeight};
                 }
@@ -200,36 +200,36 @@ export function makeAlertStyles() {
                             theme.color.primary :
                             theme.color[type];
                 return css`
-                    &.k-${type} {
-                        .k-dialog-tip-icon {
+                    &.${k}-${type} {
+                        .${k}-dialog-tip-icon {
                             color: ${color};
                         }
                     }
                 `
             })}
-            &:not(.k-confirm) {
-                .k-dialog-cancel {
+            &:not(.${k}-confirm) {
+                .${k}-dialog-cancel {
                     display: none;
                 }
             }
 
             // with title
-            &.k-with-title {
-                .k-dialog-body {
+            &.${k}-with-title {
+                .${k}-dialog-body {
                     margin-top: ${dialog.alert.titleBodyMarginTop};
                     text-align: left;
                 }
-                .k-dialog-tip-icon {
+                .${k}-dialog-tip-icon {
                     float: left;
-                    .k-icon {
+                    .${k}-icon {
                         font-size: ${dialog.alert.titleTipIconFontSize};
                     }
                 }
-                .k-alert-dialog-wrapper {
+                .${k}-alert-dialog-wrapper {
                     overflow: hidden;
                     padding-left: ${dialog.alert.wrapperPaddingLeft};
                 }
-                .k-alert-dialog-title {
+                .${k}-alert-dialog-title {
                     line-height: ${dialog.alert.tipIconLineHeight};
                     font-size: ${dialog.alert.titleFontSize};
                     font-weight: ${dialog.alert.titleFontWeight};

package/components/drawer/index.vdt

@@ -1,15 +1,16 @@
 import {makeStyles} from './styles';
 
 const {placement, overlay} = this.get();
+const { k } = this.config;
 const classNameObj = {
-    'k-drawer': true,
-    [`k-${placement}`]: true,
-    [makeStyles(overlay)]: true
+    [`${k}-drawer`]: true,
+    [`${k}-${placement}`]: true,
+    [makeStyles(overlay, k)]: true
 };
 
 <t:super class={classNameObj}>
     <b:content>
-        <div class='k-drawer-content'>
+        <div class={`${k}-drawer-content`}>
             {$super()}
         </div>
     </b:content>

package/components/drawer/styles.ts

@@ -19,7 +19,7 @@ setDefault(() => {
     drawer = deepDefaults(theme, {drawer: defaults}).drawer;
 });
 
-export function makeStyles(overlay: boolean) {
+export function makeStyles(overlay: boolean, k: string) {
     return css`
         position: fixed !important;
         background: transparent !important;
@@ -30,19 +30,19 @@ export function makeStyles(overlay: boolean) {
         &.transition-appear-active {
             transition: opacity ${drawer.transition} !important;
             overflow: hidden;
-            .k-drawer-content {
+            .${k}-drawer-content {
                 transition: transform ${drawer.transition};
             }
         }
 
-        .k-drawer-content {
+        .${k}-drawer-content {
             height: 100%;
             display: flex;
             background: #fff;
             flex-direction: column;
             transform: translateX(0);
             box-shadow: ${drawer.boxShadow};
-            .k-dialog-body {
+            .${k}-dialog-body {
                 flex-grow: 1;
                 overflow: auto;
             }
@@ -82,18 +82,18 @@ export function makeStyles(overlay: boolean) {
                 }
             }
 
-            return `
-                &.k-${placement} {
+            return css`
+                &.${k}-${placement} {
                     ${positionValue}
                     &.transition-enter-from,
                     &.transition-leave-to,
                     &.transition-appear-from {
                         transform: none !important;
-                        .k-drawer-content {
+                        .${k}-drawer-content {
                             transform: ${transformValue};
                         }
                     }
-                    .k-drawer-content {
+                    .${k}-drawer-content {
                         border-radius: ${borderRadius};
                     }
                 }