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

package/components/menu/item.vdt

@@ -18,24 +18,25 @@ const {
     tooltipContents, iconVNode, titleVNodes,
     position, isCollapse,
 } = this.dropdown();
+const { k } = this.config;
 const classNameObj = {
-    'k-menu-item': true,
+    [`${k}-menu-item`]: true,
     [className]: className,
-    'k-expanded': isExpanded, 
-    'k-disabled': disabled,
-    'k-active':  isSelected(key), 
-    'k-highlighted': isHighlighted(key),
-    [makeItemStyles()]: true,
+    [`${k}-expanded`]: isExpanded, 
+    [`${k}-disabled`]: disabled,
+    [`${k}-active`]:  isSelected(key), 
+    [`${k}-highlighted`]: isHighlighted(key),
+    [makeItemStyles(k)]: true,
 };
 
 const showDot = isTopItem && !iconVNode && isNullOrUndefined(dot) ? rootDot : dot;
 const title = (children) => (
-    <div class={{'k-menu-title': true, [makeTitleStyles()]: true}}
+    <div class={{[`${k}-menu-title`]: true, [makeTitleStyles(k)]: true}}
         ev-click={this.onClick.bind(this, subMenuVNode)}
     >
-        <Icon class="k-menu-dot ion-record" v-if={showDot} />
-        <div class="k-menu-name">{children}</div>
-        <Icon class="k-menu-arrow k-icon-down" v-if={subMenuVNode} />
+        <Icon class={`${k}-menu-dot ion-record`} v-if={showDot} />
+        <div class={`${k}-menu-name`}>{children}</div>
+        <Icon class={`${k}-menu-arrow ${k}-icon-down`} v-if={subMenuVNode} />
     </div>
 );
 

package/components/menu/menu.ts

@@ -1,6 +1,7 @@
 import {Component, TypeDefs, provide, inject, Key} from 'intact';
 import template from './menu.vdt';
 import {useHighlight} from './useHighlight';
+import { useConfigContext } from '../config';
 
 export interface MenuProps<K extends Key = Key> {
     expandedKeys?: K[]
@@ -49,6 +50,7 @@ export class Menu<K extends Key = Key> extends Component<MenuProps<K>, MenuEvent
     public parentMenu = inject<Menu | null>(MENU, null);
     public subExpandedKeys?: Set<K>;
     public highlight?: ReturnType<typeof useHighlight>;
+    private config = useConfigContext();
 
     init() {
         provide(MENU, this);

package/components/menu/menu.vdt

@@ -8,14 +8,15 @@ const {children, className} = this.get();
 const {collapse, theme, type, size} = (this.rootMenu || this).get();
 const isRootMenu = !this.rootMenu;
 const isDropdownMenu = !isRootMenu && isDropdown(this.rootMenu);
+const { k } = this.config;
 const classNameObj = {
-    'k-menu': true,
+    [`${k}-menu`]: true,
     [className]: className,
-    [`k-${theme}`]: (isRootMenu || isDropdownMenu) && theme,
-    [`k-${size}`]: isRootMenu && size !== 'default',
-    'k-collapsed': isRootMenu && collapse,
-    [`k-${type}`]: isRootMenu && type,
-    [makeMenuStyles()]: true,
+    [`${k}-${theme}`]: (isRootMenu || isDropdownMenu) && theme,
+    [`${k}-${size}`]: isRootMenu && size !== 'default',
+    [`${k}-collapsed`]: isRootMenu && collapse,
+    [`${k}-${type}`]: isRootMenu && type,
+    [makeMenuStyles(k)]: true,
 };
 
 const header = <b:header />
@@ -23,8 +24,8 @@ const content = (
     <template>
         <div v-if={$blocks.header}
             class={{
-                'k-menu-header': true,
-                [makeTitleStyles()]: true
+                [`${k}-menu-header`]: true,
+                [makeTitleStyles(k)]: true
             }}
         >
             <template v-if={!collapse}>{header}</template>

package/components/menu/styles.ts

@@ -85,11 +85,11 @@ setDefault(() => {
 
 export {menu};
 
-export function makeMenuStyles() {
-    // we must increase the priority by adding &.k-menu
+export function makeMenuStyles(k: string) {
+    // we must increase the priority by adding &.${k}-menu
     // to override the css of dropdownMenu
     return css`
-        &.k-menu {
+        &.${k}-menu {
             width: ${menu.width};
             transition: width ${menu.transition};
             background: ${menu.bgColor};
@@ -97,20 +97,20 @@ export function makeMenuStyles() {
         }
 
         // nested menu
-        &:not(.k-dropdown-menu) &:not(.k-dropdown-menu) {
+        &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) {
             width: auto;
             background: ${menu.subBgColor};
-            .k-menu-title {
+            .${k}-menu-title {
                 padding-left: calc(${getLeft(menu.item.padding)} + ${menu.icon.width} + ${menu.icon.gap});
             }
         }
-        &:not(.k-dropdown-menu) &:not(.k-dropdown-menu) &:not(.k-dropdown-menu) {
-            .k-menu-title {
+        &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) {
+            .${k}-menu-title {
                 padding-left: calc(${getLeft(menu.item.padding)} + ${menu.icon.width} * 2 + ${menu.icon.gap});
             }
         }
 
-        .k-icon {
+        .${k}-icon {
             width: ${menu.icon.width};
             margin-right: ${menu.icon.gap};
             text-align: center;
@@ -119,7 +119,7 @@ export function makeMenuStyles() {
 
 
         // header
-        .k-menu-header {
+        .${k}-menu-header {
             height: ${menu.header.height};
             font-size: ${menu.header.fontSize};
             font-weight: bold;
@@ -130,36 +130,36 @@ export function makeMenuStyles() {
         ${(['light', 'white'] as const).map(theme => {
             const styles = menu[theme];
             return css`
-                &.k-${theme} {
+                &.${k}-${theme} {
                     background: ${styles.bgColor};
-                    .k-menu-header {
+                    .${k}-menu-header {
                         color: ${styles.item.color};
                         border-bottom: ${styles.border};
                     }
-                    .k-menu-item {
-                        .k-menu-title {
+                    .${k}-menu-item {
+                        .${k}-menu-title {
                             color: ${styles.item.color};
                             &:hover {
                                 color: ${styles.item.hoverColor};
                             }
                         }
-                        &.k-highlighted {
-                            > .k-menu-title {
+                        &.${k}-highlighted {
+                            > .${k}-menu-title {
                                 color: ${styles.item.hoverColor};
                             }
                         }
-                        &.k-disabled {
-                            > .k-menu-title {
+                        &.${k}-disabled {
+                            > .${k}-menu-title {
                                 color: ${styles.item.disabledColor} !important;
                             }
                         }
                     }
-                    .k-menu:not(.k-dropdown-menu) {
+                    .${k}-menu:not(.${k}-dropdown-menu) {
                         background: ${styles.subBgColor};
                     }
 
-                    &.k-horizontal {
-                        .k-menu-header {
+                    &.${k}-horizontal {
+                        .${k}-menu-header {
                             border-right: ${styles.border};
                         }
                     }
@@ -167,10 +167,10 @@ export function makeMenuStyles() {
             `;
         })}
 
-        &.k-white {
+        &.${k}-white {
             // active
-            .k-menu-item.k-active {
-                > .k-menu-title {
+            .${k}-menu-item.${k}-active {
+                > .${k}-menu-title {
                     color: ${menu.white.active.color } !important;
                     background: ${menu.white.active.bgColor};
                 }
@@ -182,10 +182,10 @@ export function makeMenuStyles() {
             const styles = menu[size];
 
             return css`
-                &.k-${size} {
+                &.${k}-${size} {
                     width: ${styles.width};
                     font-size: ${styles.fontSize};
-                    .k-menu {
+                    .${k}-menu {
                         font-size: ${styles.fontSize}; 
                     }
                 }
@@ -193,31 +193,31 @@ export function makeMenuStyles() {
         })}
 
         // collapse
-        &.k-collapsed {
+        &.${k}-collapsed {
             width: calc(${menu.icon.width} + ${getLeft(menu.item.padding)} * 2);
-            .k-icon {
+            .${k}-icon {
                 margin-right: 0;
             }
-            .k-menu-arrow {
+            .${k}-menu-arrow {
                 display: none;
             }
         }
 
         // dropdown
-        &.k-dropdown-menu {
+        &.${k}-dropdown-menu {
             width: auto;
             min-width: ${menu.dropdown.minWidth};
-            .k-menu-arrow {
+            .${k}-menu-arrow {
                 transform: rotate(-90deg)
             }
         }
 
         // horizontal
-        &.k-horizontal {
+        &.${k}-horizontal {
             width: auto;
             display: flex;
             align-items: center;
-            .k-menu-header {
+            .${k}-menu-header {
                 border-bottom: none;
                 border-right: ${menu.header.borderBottom};
             }
@@ -225,7 +225,7 @@ export function makeMenuStyles() {
     `
 }
 
-export function makeTitleStyles() {
+export function makeTitleStyles(k: string) {
     const item = menu.item;
     return css`
         display: flex;
@@ -238,10 +238,10 @@ export function makeTitleStyles() {
     `;
 }
 
-export function makeItemStyles() {
+export function makeItemStyles(k: string) {
     const item = menu.item;
     return css`
-        .k-menu-title {
+        .${k}-menu-title {
             cursor: pointer;
             height: ${menu.item.height};
             transition: all ${menu.transition};
@@ -249,7 +249,7 @@ export function makeItemStyles() {
                 color: ${menu.item.hoverColor};
             }
         }
-        .k-menu-name {
+        .${k}-menu-name {
             flex: 1;
             display: flex;
             align-items: center;
@@ -260,46 +260,46 @@ export function makeItemStyles() {
                 min-width: 0;
             }
         }
-        .k-menu-arrow {
+        .${k}-menu-arrow {
             transition: transform ${menu.transition};
             margin-left: ${menu.icon.gap};
         }
 
         // expanded
-        &.k-expanded {
-            > .k-menu-title {
+        &.${k}-expanded {
+            > .${k}-menu-title {
                 color: ${menu.item.hoverColor};
-                .k-menu-arrow {
+                .${k}-menu-arrow {
                     transform: rotateX(180deg);
                 }
             }
         }
 
         // highlighted
-        &.k-highlighted {
-            > .k-menu-title {
+        &.${k}-highlighted {
+            > .${k}-menu-title {
                 color: ${menu.item.hoverColor};
             }
         }
 
         // active
-        &.k-active {
-            > .k-menu-title {
+        &.${k}-active {
+            > .${k}-menu-title {
                 color: ${menu.item.hoverColor} !important;
                 background: ${menu.item.activeBgColor};
             }
         }
 
         // disabled
-        &.k-disabled {
-            > .k-menu-title {
+        &.${k}-disabled {
+            > .${k}-menu-title {
                 color: ${menu.item.disabledColor} !important;
                 cursor: not-allowed;
             }
         }
 
         // dot
-        .k-menu-dot {
+        .${k}-menu-dot {
             font-size: ${menu.item.dotFontSize};
             transform: scale(.4);
         }

package/components/message/message.ts

@@ -12,6 +12,7 @@ import {Messages} from './messages';
 import {useDelayClose} from '../../hooks/useDelayClose';
 import {isObject} from 'intact-shared';
 import {bind} from '../utils';
+import { useConfigContext } from '../config';
 
 export interface MessageProps {
     content?: Children
@@ -79,6 +80,7 @@ export class Message extends Component<MessageProps> {
         this.close,
         this.get('duration')!
     );
+    private config = useConfigContext();
 
     @bind
     close() {

package/components/message/message.vdt

@@ -4,11 +4,12 @@ import {getRestProps} from '../utils';
 import {makeMessageStyles} from './styles';
 
 const {type, content, children, closable, hideIcon} = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    "k-message": true,
-    [`k-${type}`]: type,
-    [makeMessageStyles()]: true,
+    [`${k}-message`]: true,
+    [`${k}-${type}`]: type,
+    [makeMessageStyles(k)]: true,
 };
 
 const iconMap = {
@@ -23,27 +24,27 @@ const iconMap = {
     ev-mouseenter={this.delayClose.onMouseEnter}
     ev-mouseleave={this.delayClose.onMouseLeave}
 >
-    <div class="k-message-container">
-        <div class={{"k-message-wrapper": true, "k-with-icon": !hideIcon}}>
+    <div class={`${k}-message-container`}>
+        <div class={{[`${k}-message-wrapper`]: true, [`${k}-with-icon`]: !hideIcon}}>
             <Icon v-if={!hideIcon} 
                 class={{
-                    [`k-icon-${iconMap[type] || iconMap.info}`]: true,
-                    "k-message-icon": true,
+                    [`${k}-icon-${iconMap[type] || iconMap.info}`]: true,
+                    [`${k}-message-icon`]: true,
                 }}
             />
             <div v-if={typeof content === 'string' || typeof content === 'number'}
-                class="k-message-content" innerHTML={content}
+                class={`${k}-message-content`} innerHTML={content}
             ></div>
-            <div v-else class="k-message-content">{children}</div>
+            <div v-else class={`${k}-message-content`}>{children}</div>
         </div>
         <Button 
             v-if={closable}
             type="none"
             icon
-            class="k-message-close"
+            class={`${k}-message-close`}
             ev-click={this.close}
         >
-            <Icon class="k-icon-close" hoverable />
+            <Icon class={`${k}-icon-close`} hoverable />
         </Button>
     </div>
 </div>

package/components/message/messages.ts

@@ -1,11 +1,13 @@
 import {Component, VNodeComponentClass} from 'intact';
 import template from './messages.vdt';
 import type {Message} from './message';
+import { useConfigContext } from '../config';
 
 export class Messages extends Component {
     static template = template;
 
     private messages: VNodeComponentClass<Message>[] = [];
+    private config = useConfigContext();
 
     notice(message: VNodeComponentClass<Message>) {
         this.messages.push(message);

package/components/message/messages.vdt

@@ -1,7 +1,9 @@
 import {TransitionGroup, Transition} from 'intact';
 import {makeMessagesStyles} from './styles';
 
-<div class={{"k-messages": true, [makeMessagesStyles()]: true}}>
+const { k } = this.config;
+
+<div class={{[`${k}-messages`]: true, [makeMessagesStyles(k)]: true}}>
     <TransitionGroup>
         <template v-for={this.messages} key={$value.key}>
             {$value}

package/components/message/styles.ts

@@ -34,7 +34,7 @@ setDefault(() => {
     message = deepDefaults(theme, {message: defaults}).message;
 });
 
-export function makeMessagesStyles() {
+export function makeMessagesStyles(k: string) {
     return css`
         position: fixed;
         top: ${message.top};
@@ -45,13 +45,13 @@ export function makeMessagesStyles() {
     `;
 }
 
-export function makeMessageStyles() {
+export function makeMessageStyles(k: string) {
     return css`
         text-align: center;
         width: 100%;
         font-size: ${message.fontSize};
         color: ${message.color};
-        .k-message-container {
+        .${k}-message-container {
             display: inline-block;
             box-shadow: ${message.boxShadow};
             border-radius: ${message.borderRadius};
@@ -63,21 +63,21 @@ export function makeMessageStyles() {
             text-align: ${message.textAlign};
             min-height: ${message.minHeight};
         }
-        .k-message-wrapper {
+        .${k}-message-wrapper {
             position: relative;
             display: inline-block;
-            &.k-with-icon {
+            &.${k}-with-icon {
                 padding-left: calc(${message.icon.left} + 14px);
             }
         }
-        .k-message-content {
+        .${k}-message-content {
             display: inline-block;
             padding: ${message.padding};
             vertical-align: middle;
-            word-break: break-word;
-            word-wrap: break-word;
+            word-break: bre.${k}-word;
+            word-wrap: bre.${k}-word;
         }
-        .k-message-close {
+        .${k}-message-close {
             vertical-align: middle;
             position: absolute;
             right: 0;
@@ -86,7 +86,7 @@ export function makeMessageStyles() {
                 background: none;
             }
         }
-        .k-message-icon {
+        .${k}-message-icon {
             position: absolute;
             left: ${message.icon.left};
             top: ${message.icon.top};
@@ -96,11 +96,11 @@ export function makeMessageStyles() {
         ${(['info', 'error', 'success', 'warning'] as const).map(type => {
             const color = theme.color[type === 'error' ? 'danger' : type];
             return css`
-                &.k-${type} {
-                    .k-message-container {
+                &.${k}-${type} {
+                    .${k}-message-container {
                         background: ${palette(color, -4)};
                     }
-                    .k-message-icon {
+                    .${k}-message-icon {
                         color: ${color};
                     }
                 }

package/components/pagination/index.ts

@@ -3,6 +3,7 @@ import template from './index.vdt';
 import {Sizes, sizes} from '../../styles/utils';
 import {bind} from '../utils';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 export interface PaginationProps {
     size?: Sizes,
@@ -67,6 +68,7 @@ export class Pagination extends Component<PaginationProps, PaginationEvents> {
     static events = events;
 
     private ignore = false;
+    private config = useConfigContext();
 
     init() {
         // avoid setting incorrect value

package/components/pagination/index.vdt

@@ -15,13 +15,15 @@ const {
 
 if (!total) return <!-- pagination -->
 
+const { k } = this.config;
+
 const classNameObj = {
-    'k-pagination': true,
+    [`${k}-pagination`]: true,
     [className]: className,
-    [`k-${size}`]: size !== 'default',
-    ['k-flat']: flat,
-    ['k-simple']: simple,
-    [makeStyles()]: true,
+    [`${k}-${size}`]: size !== 'default',
+    [`${k}-flat`]: flat,
+    [`${k}-simple`]: simple,
+    [makeStyles(k)]: true,
 };
 
 const type = flat ? 'flat' : simple ? 'none' : 'default';
@@ -52,7 +54,7 @@ const paginationDot = function(callback) {
     return <Button type={type}
         size={size}
         icon
-        class="k-pagination-ellipsis"
+        class={`${k}-pagination-ellipsis`}
         ev-click={callback}
     >...</Button>
 };
@@ -107,12 +109,12 @@ let nextPage = value + 1;
             value={value}
             ev-change={this.goto}
         />,
-        <span class="k-pagination-text"> / {totalPages}</span>,
+        <span class={`${k}-pagination-text`}> / {totalPages}</span>,
     ];
 }
 
 <div class={classNameObj} {...getRestProps(this)}>
-    <div v-if={showTotal && !simple} class="k-pagination-total">
+    <div v-if={showTotal && !simple} class={`${k}-pagination-total`}>
         {_$('共 {n} 条', {n: total})}
     </div>
 
@@ -121,17 +123,17 @@ let nextPage = value + 1;
             type="none"
             disabled={value <= 1 || !!(disablePage && disablePage(value - 1, limit))}
             ev-click={this.prev}
-        ><Icon class="k-icon-left" /></Button>
+        ><Icon class={`${k}-icon-left`} /></Button>
         <template>{paginationItems}</template>
         <Button icon size={size}
             type="none"
             disabled={value >= totalPages || !!(disablePage && disablePage(value + 1, limit))}
             ev-click={this.next}
-        ><Icon class="k-icon-right" /></Button>
+        ><Icon class={`${k}-icon-right`} /></Button>
     </ButtonGroup>
 
     <template v-if={!simple}>
-        <div class="k-pagination-limits" v-if={showLimits}>
+        <div class={`${k}-pagination-limits`} v-if={showLimits}>
             <Select v-model="limit" size={size} flat={flat}>
                 <Option v-for={limits} value={$value}>
                     {_$('{n} 条 / 页', {n: $value})}
@@ -139,7 +141,7 @@ let nextPage = value + 1;
             </Select>
         </div>
 
-        <div class="k-pagination-goto" v-if={showGoto}>
+        <div class={`${k}-pagination-goto`} v-if={showGoto}>
             <span class="c-middle">{_$('前往')}</span>
             <Input size={size} value={value} ev-change={this.goto} flat={flat} />
             <span class="c-middle">{_$('页')}</span>