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

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>

package/components/pagination/styles.ts

@@ -57,7 +57,7 @@ setDefault(() => {
     pagination = deepDefaults(theme, {pagination: defaults}).pagination;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         font-size: ${pagination.fontSize};
         > * {   
@@ -67,13 +67,13 @@ export function makeStyles() {
                 margin-left: ${pagination.gap};
             }
         }
-        .k-pagination-ellipsis {
+        .${k}-pagination-ellipsis {
             background-color: transparent;
             border-color: transparent;
         }
 
-        .k-btns {
-            .k-btn {
+        .${k}-btns {
+            .${k}-btn {
                 width: auto !important;
                 min-width: ${button.height};
                 padding: ${pagination.btn.padding};
@@ -83,23 +83,23 @@ export function makeStyles() {
                     margin: 0 !important;
                 }
             }
-            .k-icon {
+            .${k}-icon {
                 font-size: 18px;
             }
         }
         // goto   
-        .k-pagination-goto {
-            .k-input {
+        .${k}-pagination-goto {
+            .${k}-input {
                 font-size: inherit;
                 width: ${pagination.goto.width};
                 margin: ${pagination.goto.gap};
             }
-            .k-input-inner {
+            .${k}-input-inner {
                 text-align: center;
             }
         }
             
-        .k-select {
+        .${k}-select {
             width: auto;
         }
 
@@ -108,12 +108,12 @@ export function makeStyles() {
             const styles = pagination[size];
             const btnStyles = button[size];
             return css`
-                &.k-${size} {
+                &.${k}-${size} {
                     font-size: ${styles.fontSize};
-                    .k-btn {
+                    .${k}-btn {
                         margin-right: ${styles.btnGap};
                         min-width: ${btnStyles.height};
-                        .k-icon {
+                        .${k}-icon {
                             font-size: ${styles.iconFontSize}; 
                         }
                     }
@@ -122,25 +122,25 @@ export function makeStyles() {
         })}
 
         // flat 
-        &.k-flat {
-            .k-select {
+        &.${k}-flat {
+            .${k}-select {
                 &,
                 &:hover,
-                &.k-show {
+                &.${k}-show {
                     border-color: transparent;
                 }
             }
         }
             
         // simple
-        &.k-simple {
-            .k-btn {
+        &.${k}-simple {
+            .${k}-btn {
                 margin: 0;
             }
-            .k-input-inner {
+            .${k}-input-inner {
                 text-align: center;
             }
-            .k-pagination-text {
+            .${k}-pagination-text {
                 vertical-align: middle;
             }
         }

package/components/popover/content.vdt

@@ -2,6 +2,7 @@ import {Icon} from '../icon';
 import makeStyles from "./styles";
 
 const { type, title, content } = this.get();
+const { k } = this.config;
 
 const iconMap = {
     info: 'information-fill',
@@ -11,20 +12,20 @@ const iconMap = {
 };
 
 const classNameObj = {
-    [makeStyles()]: true,
-    'k-popover': true,
+    [makeStyles(k)]: true,
+    [`${k}-popover`]: true,
 }
 
 <t:super class={classNameObj}>
     <b:body>
-        <div class="k-popover-title" v-if={title || $blocks.title}>
-            <Icon v-if={type} class={`k-icon-${iconMap[type]} k-popover-icon`}
+        <div class={`${k}-popover-title`} v-if={title || $blocks.title}>
+            <Icon v-if={type} class={`${k}-icon-${iconMap[type]} ${k}-popover-icon`}
                 color={type === 'error' ? 'danger' : type}
                 size="large"
             />
             <b:title>{title}</b:title>
         </div>
-        <div v-if={content || $blocks.content} class="k-popover-content">
+        <div v-if={content || $blocks.content} class={`${k}-popover-content`}>
             <b:content>{content}</b:content>
         </div>
     </b:body>

package/components/popover/styles.ts

@@ -19,26 +19,26 @@ setDefault(() => {
 });
 
 
-export default function makeStyles() {
+export default function makeStyles(k: string) {
     return css`
         // increase priority
-        &.k-tooltip-content.k-popover {
+        &.${k}-tooltip-content.${k}-popover {
             width: ${popover.width};
             padding: ${popover.padding};
-            .k-popover-title {
+            .${k}-popover-title {
                 display: flex;
                 align-items: center;
                 font-size: ${popover.title.fontSize};
                 line-height: ${popover.title.lineHeight};
                 font-weight: ${popover.title.fontWeight};
             }
-            .k-popover-icon {
+            .${k}-popover-icon {
                 margin-right: ${popover.gap};
             }
-            .k-popover-content {
+            .${k}-popover-content {
                 margin-top: ${popover.gap};
             }
-            .k-tooltip-footer {
+            .${k}-tooltip-footer {
                 text-align: right;
             }
     `;

package/components/portal.ts

@@ -15,6 +15,7 @@ import {isString} from 'intact-shared';
 import {DIALOG} from './dialog/constants';
 import type {Dialog} from './dialog';
 import {BaseDialog} from './dialog/base';
+import { useConfigContext } from './config';
 
 export interface PortalProps {
     container?: Container
@@ -40,6 +41,7 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
     public mountedQueue?: Function[];
     public mountedDone?: boolean;
     public $isPortal = true;
+    private config = useConfigContext();
 
     $render(
         lastVNode: VNodeComponentClass<this> | null,
@@ -147,7 +149,7 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
                 this.container = document.body;
             } else {
                 // find the closest dialog if exists
-                this.container = parentDom.closest('.k-dialog') || document.body;
+                this.container = parentDom.closest(`${this.config.k}-dialog`) || document.body;
             }
 
             /**

package/components/progress/index.ts

@@ -2,6 +2,7 @@ import {Component, TypeDefs} from 'intact';
 import template from './index.vdt';
 import {useStatus} from './useStatus';
 import {useColor} from './useColor';
+import { useConfigContext } from '../config';
 
 type Sizes = 'default' | 'small' | 'mini';
 type Type = 'bar' | 'circle';
@@ -50,6 +51,7 @@ export class Progress extends Component<ProgressProps> {
 
     public status = useStatus();
     public color = useColor();
+    private config = useConfigContext();
 
     init() {
         this.on('$receive:percent', percent => {

package/components/progress/index.vdt

@@ -8,43 +8,44 @@ const {
     children
 } = this.get();
 
+const { k } = this.config;
 const status = this.status.value;
 const background = this.color.value || '';
 
 const classNameObj = {
-    'k-progress' : true,
-    [`k-${type}`]: type,
+    [`${k}-progress`] : true,
+    [`${k}-${type}`]: type,
     [className]: className,
-    [`k-${status}`]: status !== 'normal',
-    [`k-${size}`]: size !== 'default',
-    [makeStyles()]: true,
+    [`${k}-${status}`]: status !== 'normal',
+    [`${k}-${size}`]: size !== 'default',
+    [makeStyles(k)]: true,
 }
 
 <div class={classNameObj} {...getRestProps(this)}>
-    <div class="k-progress-container" v-if={type === 'bar'}>
-        <div class="k-progress-content">
-            <div class="k-progress-bg" style={{width: percent + '%', background}}>
-                <div class="k-progress-inner-text" v-if={showInnerText}>
+    <div class={`${k}-progress-container`} v-if={type === 'bar'}>
+        <div class={`${k}-progress-content`}>
+            <div class={`${k}-progress-bg`} style={{width: percent + '%', background}}>
+                <div class={`${k}-progress-inner-text`} v-if={showInnerText}>
                     {percent} %
                 </div>
             </div>
         </div>
     </div>
-    <svg class="k-progress-canvas" viewBox="0 0 120 120" v-if={type === 'circle'}>
+    <svg class={`${k}-progress-canvas`} viewBox="0 0 120 120" v-if={type === 'circle'}>
         { do {
             const r = (120 - strokeWidth) / 2;
             const circumference = 2 * Math.PI * r;
 
             [
-                <circle class="k-progress-meter" cx="60" cy="60" r={r}
+                <circle class={`${k}-progress-meter`} cx="60" cy="60" r={r}
                     stroke-width={strokeWidth}
                 />,
-                <circle class="k-progress-value" cx="60" cy="60" r={r}
+                <circle class={`${k}-progress-value`} cx="60" cy="60" r={r}
                     stroke-dashoffset={circumference * (1 - percent / 100)}
                     stroke-dasharray={circumference}
                     stroke-width={strokeWidth}
                 />,
-                <circle class="k-progress-animate" cx="60" cy="60" r={r}
+                <circle class={`${k}-progress-animate`} cx="60" cy="60" r={r}
                     stroke-width={strokeWidth}
                     stroke-dasharray={circumference}
                     stroke-dashoffset={circumference}
@@ -69,20 +70,20 @@ const classNameObj = {
             ]
         } }
     </svg>
-    <div class="k-progress-text" v-if={children}>{children}</div>
-    <div class="k-progress-text" v-else-if={showOuterText}>
+    <div class={`${k}-progress-text`} v-if={children}>{children}</div>
+    <div class={`${k}-progress-text`} v-else-if={showOuterText}>
         { do {
             let icon;
             if (type !== 'circle') {
                 switch (status) {
                     case 'success':
-                        icon = 'k-icon-success-fill';
+                        icon = [`${k}-icon-success-fill`];
                         break;
                     case 'error':
-                        icon = 'k-icon-error-fill';
+                        icon = [`${k}-icon-error-fill`];
                         break;
                     case 'warning':
-                        icon = 'k-icon-warning-fill';
+                        icon = [`${k}-icon-warning-fill`];
                         break;
                     default:
                         break;
@@ -90,11 +91,11 @@ const classNameObj = {
             } else {
                 switch (status) {
                     case 'success':
-                        icon = 'k-icon-check';
+                        icon = [`${k}-icon-check`];
                         break;
                     case 'error':
                     case 'warning':
-                        icon = 'k-icon-close';
+                        icon = [`${k}-icon-close`];
                         break;
                     default:
                         break;
@@ -102,7 +103,7 @@ const classNameObj = {
             }
 
             if (icon) {
-                <Icon class={{"k-progress-icon": true, [icon]: true}} color={status === 'error' ? 'danger' : status} />
+                <Icon class={{[`${k}-progress-icon`]: true, [icon]: true}} color={status === 'error' ? 'danger' : status} />
             } else {
                 <span>{percent}%</span>
             }

package/components/progress/styles.ts

@@ -72,16 +72,16 @@ setDefault(() => {
     progress = deepDefaults(theme, {progress: defaults}).progress;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         position: relative;
         line-height: 1;
 
         // bar
-        &.k-bar {
+        &.${k}-bar {
             display: flex;
             align-items: center;
-            .k-progress-container {
+            .${k}-progress-container {
                 height: ${progress.bar.height};
                 border-radius: ${progress.bar.height};
                 background-color: ${progress.stokeColor.color};
@@ -91,7 +91,7 @@ export function makeStyles() {
                 font-size: ${progress.bar.innerText.fontSize};
                 flex: 1;
             }
-            .k-progress-content {
+            .${k}-progress-content {
                 position: relative;
                 left: 0;
                 top: 0;
@@ -100,14 +100,14 @@ export function makeStyles() {
                 height: 100%;
                 border-radius: ${progress.bar.height};
             }
-            .k-progress-bg {
+            .${k}-progress-bg {
                 background-color: ${progress.stokeColor.normal};
                 height: 100%;
                 border-radius: ${progress.bar.height};
                 transition: ${progress.animation.transition};
                 position: relative;
             }
-            .k-progress-inner-text {
+            .${k}-progress-inner-text {
                 display: inline-block;
                 vertical-align: top;
                 color: #ffffff;
@@ -118,23 +118,23 @@ export function makeStyles() {
             }
             
             // status
-            &.k-success {
-                .k-progress-bg {
+            &.${k}-success {
+                .${k}-progress-bg {
                     background: ${progress.stokeColor.success};
                 }
             }
-            &.k-error {
-                .k-progress-bg {
+            &.${k}-error {
+                .${k}-progress-bg {
                     background: ${progress.stokeColor.error};
                 }
             }
-            &.k-warning {
-                .k-progress-bg {
+            &.${k}-warning {
+                .${k}-progress-bg {
                     background: ${progress.stokeColor.warning};
                 }
             }
-            &.k-active {
-                .k-progress-bg {
+            &.${k}-active {
+                .${k}-progress-bg {
                     &:before {
                         content: "";
                         position: absolute;
@@ -150,15 +150,15 @@ export function makeStyles() {
             }
             ${sizes.map(size => {
                 return css`
-                    &.k-${size} {
+                    &.${k}-${size} {
                         font-size: ${progress.bar[size].fontSize};
-                        .k-progress-container {
+                        .${k}-progress-container {
                             height: ${progress.bar[size].height};
                         }
                     }
                 `
             })}
-            .k-progress-text {
+            .${k}-progress-text {
                 margin-left: ${progress.bar.textMarginLeft};
                 width: ${progress.bar.textWidth};
                 line-height: ${progress.bar.outerText.height};
@@ -167,54 +167,54 @@ export function makeStyles() {
         };
 
         // circle
-        &.k-circle {
+        &.${k}-circle {
             width: ${progress.circle.width};
             height: ${progress.circle.width};
             font-size: ${progress.circle.fontSize};
-            .k-progress-canvas {
+            .${k}-progress-canvas {
                 transform: rotate(-90deg);
             }
-            .k-progress-meter,
-            .k-progress-value,
-            .k-progress-animate {
+            .${k}-progress-meter,
+            .${k}-progress-value,
+            .${k}-progress-animate {
                 fill: none;
             }
-            .k-progress-meter {
+            .${k}-progress-meter {
                 stroke: ${progress.stokeColor.color};
             }
-            .k-progress-value {
+            .${k}-progress-value {
                 stroke: ${progress.stokeColor.normal};
                 stroke-linecap: round;
                 transition: ${progress.animation.transition};
             }
-            .k-progress-animate {
+            .${k}-progress-animate {
                 stroke: #fff;
                 stroke-linecap: round;
             }
-            .k-progress-text {
+            .${k}-progress-text {
                 position: absolute;
                 top: 50%;
                 text-align: center;
                 width: 100%;
                 transform: translateY(-50%); 
             }
-            .k-progress-icon {
+            .${k}-progress-icon {
                 font-size: ${progress.circle.iconFontSize};
             }
 
             // status 
-            &.k-success {
-                .k-progress-value {
+            &.${k}-success {
+                .${k}-progress-value {
                     stroke: ${progress.stokeColor.success};
                 }
             }
-            &.k-error {
-                .k-progress-value {
+            &.${k}-error {
+                .${k}-progress-value {
                     stroke: ${progress.stokeColor.error};
                 }
             }
-            &.k-warning {
-                .k-progress-value {
+            &.${k}-warning {
+                .${k}-progress-value {
                     stroke: ${progress.stokeColor.warning};
                 }
             };
@@ -222,11 +222,11 @@ export function makeStyles() {
             ${sizes.map(size => {
                 const styles = progress.circle[size];
                 return css`
-                    &.k-${size} {
+                    &.${k}-${size} {
                         width: ${styles.width};
                         height: ${styles.width};
                         font-size: ${styles.fontSize};
-                        .k-progress-icon {
+                        .${k}-progress-icon {
                             font-size: ${styles.iconFontSize};
                         }
                     }