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

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};
                         }
                     }

package/components/radio/index.ts

@@ -2,6 +2,7 @@ import {Component, ComponentConstructor, TypeDefs, inject, createRef} from 'inta
 import {bind} from '../utils';
 import template from './index.vdt';
 import type {CommonInputHTMLAttributes, Events} from '../types';
+import { useConfigContext } from '../config';
 
 export interface RadioProps<Value = false, True = true> extends CommonInputHTMLAttributes {
     disabled?: boolean
@@ -40,6 +41,7 @@ export class Radio<
     static events = events;
 
     private elementRef = createRef<HTMLInputElement>();
+    private config = useConfigContext();
 
     @bind
     private onKeypress(e: KeyboardEvent): void {

package/components/radio/index.vdt

@@ -7,13 +7,14 @@ const {
     children, value, ref, key, title, ...rest
 } = this.get();
 const isChecked = value === trueValue;
+const { k } = this.config;
 
 const classNameObj = {
-    'k-radio': true,
-    'k-disabled': disabled,
-    'k-checked': isChecked,
+    [`${k}-radio`]: true,
+    [`${k}-disabled`]: disabled,
+    [`${k}-checked`]: isChecked,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 // let evClick;
@@ -43,7 +44,7 @@ const events = [
     ev-click={this.fixClick}
 >
     <Wave disabled={disabled} inset="-2px">
-        <span class="k-radio-wrapper">
+        <span class={`${k}-radio-wrapper`}>
             <input
                 { ...getRestProps(this, rest) }
                 type="radio"
@@ -56,5 +57,5 @@ const events = [
             />
         </span>
     </Wave>
-    <span class="k-radio-text" v-if={children}>{children}</span>
+    <span class={`${k}-radio-text`} v-if={children}>{children}</span>
 </label>

package/components/radio/styles.ts

@@ -36,13 +36,13 @@ setDefault(() => {
     radio = deepDefaults(theme, {radio: defaults}).radio;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
         cursor: pointer;
         vertical-align: middle;
-        .k-radio-wrapper {
+        .${k}-radio-wrapper {
             width: ${radio.width};
             height: ${radio.width};
             border: 1px solid ${radio.borderColor};
@@ -69,7 +69,7 @@ export function makeStyles() {
             }
         }
         &:hover {
-            .k-radio-wrapper {
+            .${k}-radio-wrapper {
                 border: 1px solid ${radio.hoverBorderColor};
             }
         }
@@ -81,14 +81,14 @@ export function makeStyles() {
             cursor: pointer;
             position: absolute;
         }    
-        .k-radio-text {
+        .${k}-radio-text {
             margin-left: ${radio.textGap};
             flex: 0 1 auto;
         }
 
         // checked
-        &.k-checked {
-            .k-radio-wrapper {
+        &.${k}-checked {
+            .${k}-radio-wrapper {
                 border-color: ${radio.checkedColor};
                 &:before {
                     transform: scale(1);
@@ -99,24 +99,24 @@ export function makeStyles() {
         // focus
         &:focus {
             outline: none;
-            .k-radio-wrapper {
+            .${k}-radio-wrapper {
                 border-color: ${radio.checkedColor};
             }    
         }    
 
         // disabled
-        &.k-disabled {
+        &.${k}-disabled {
             color: ${radio.disabled.color};
             cursor: not-allowed;
-            .k-radio-wrapper {
+            .${k}-radio-wrapper {
                 border-color: ${radio.disabled.borderColor};
                 background: ${radio.disabled.bgColor};   
             }
             input {
                 cursor: not-allowed;
             }
-            &.k-checked {
-                .k-radio-wrapper {
+            &.${k}-checked {
+                .${k}-radio-wrapper {
                     border-color: ${radio.disabled.checked.borderColor};
                     background: ${radio.disabled.checked.bgColor};
                     &:before {

package/components/rate/index.ts

@@ -2,6 +2,7 @@ import {Component, TypeDefs} from 'intact';
 import template from './index.vdt';
 import {useActiveValue} from './useActiveValue';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 export interface RateProps {
     value?: number,
@@ -43,4 +44,5 @@ export class Rate extends Component<RateProps, RateEvents, RateBlocks> {
     static events = events;
 
     private activeValue = useActiveValue();
+    private config = useConfigContext();
 }