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

package/components/steps/index.vdt

@@ -8,13 +8,15 @@ const {
     status, type, clickable, vertical,
 } = this.get();
 
+const { k } = this.config;
+
 const classNameObj = {
-    'k-steps': true,
+    [`${k}-steps`]: true,
     [className]: className,
-    [`k-${type}`]: true,
-    'k-clickable': clickable,
-    'k-vertical': vertical,
-    [makeStepsStyles()]: true,
+    [`${k}-${type}`]: true,
+    [`${k}-clickable`]: clickable,
+    [`${k}-vertical`]: vertical,
+    [makeStepsStyles(k)]: true,
 };
 
 let stepIndex = 0;

package/components/steps/step.ts

@@ -1,5 +1,6 @@
 import {Component, TypeDefs} from 'intact';
 import template from './step.vdt';
+import { useConfigContext } from '../config';
 
 export interface StepProps {
     title?: string
@@ -15,4 +16,6 @@ const typeDefs: Required<TypeDefs<StepProps>> = {
 export class Step extends Component<StepProps> {
     static template = template;
     static typeDefs = typeDefs;
+
+    private config = useConfigContext();
 }

package/components/steps/step.vdt

@@ -4,6 +4,7 @@ import {context as StepsContext} from './context';
 import {Icon} from '../icon';
 
 const {children, title, index, className, style} = this.get();
+const { k } = this.config;
 
 <StepsContext.Consumer>
     {({value, status, onChange, type}) => {
@@ -11,10 +12,10 @@ const {children, title, index, className, style} = this.get();
         const error = selected && status === 'error';
         const done = value > index;
         const classNameObj = {
-            'k-step': true,
-            'k-active': selected,
-            'k-done': done,
-            'k-error': error,
+            [`${k}-step`]: true,
+            [`${k}-active`]: selected,
+            [`${k}-done`]: done,
+            [`${k}-error`]: error,
             [className]: className,
         };
 
@@ -22,23 +23,23 @@ const {children, title, index, className, style} = this.get();
             class={classNameObj}
             style={style}
         >
-            <div class="k-step-wrapper"
+            <div class={`${k}-step-wrapper`}
                 ev-click={linkEvent(index, onChange)}
             >
-                <div class="k-step-mark">
-                    <Icon v-if={error && type !== 'simple'} class="k-icon-close-bold" color="danger" />
+                <div class={`${k}-step-mark`}>
+                    <Icon v-if={error && type !== 'simple'} class={`${k}-icon-close-bold`} color="danger" />
                     <Icon v-else-if={done && (type === 'line' || type === 'line-compact')}
-                        class="k-icon-check-bold"
+                        class={`${k}-icon-check-bold`}
                         color="primary"
                     />
                     <span v-else-if={type !== 'simple'}>{index + 1}</span>
                 </div>
-                <div class="k-step-main">
-                    <div class="k-step-title">{title}</div>
-                    <div class="k-step-content">{children}</div>
+                <div class={`${k}-step-main`}>
+                    <div class={`${k}-step-title`}>{title}</div>
+                    <div class={`${k}-step-content`}>{children}</div>
                 </div>
             </div>
-            <div class="k-step-tail"></div>
+            <div class={`${k}-step-tail`}></div>
         </div>
     }}
 </StepsContext.Consumer>

package/components/steps/styles.ts

@@ -82,45 +82,45 @@ setDefault(() => {
 
 const stepStatus = ['done', 'active', 'error'] as const; 
 
-export function makeStepsStyles() {
+export function makeStepsStyles(k: string) {
     return css`
         display: flex;
 
-        ${makeCommonStyles()};
+        ${makeCommonStyles(k)};
 
-        &.k-default {
-            ${makeDefaultStyles()};
+        &.${k}-default {
+            ${makeDefaultStyles(k)};
         }
             
-        &.k-line,
-        &.k-line-compact,
-        &.k-simple {
-            ${makeLineStyles()};
+        &.${k}-line,
+        &.${k}-line-compact,
+        &.${k}-simple {
+            ${makeLineStyles(k)};
         }
 
-        &.k-line-compact {
-            ${makeLineCompactStyles()};
+        &.${k}-line-compact {
+            ${makeLineCompactStyles(k)};
         }
 
-        &.k-simple {
-            ${makeSimpleStyles()};
+        &.${k}-simple {
+            ${makeSimpleStyles(k)};
         }
 
         // clickable
-        &.k-clickable {
-            .k-done {
+        &.${k}-clickable {
+            .${k}-done {
                 cursor: pointer;
-                .k-step-wrapper:hover .k-step-mark {
+                .${k}-step-wrapper:hover .${k}-step-mark {
                     background: ${steps.done.markHoverBgColor};
                 }
             }
         }
 
-        ${makeVerticalStyles()};
+        ${makeVerticalStyles(k)};
     `;
 }
 
-function makeDefaultStyles() {
+function makeDefaultStyles(k: string) {
     const defaults = steps.default;
 
     return css`
@@ -128,53 +128,53 @@ function makeDefaultStyles() {
         height: ${defaults.height}; 
         background: ${defaults.bgColor};
 
-        .k-step-wrapper {
+        .${k}-step-wrapper {
             ${center()};
             height: 100%;
             padding: 0 ${defaults.padding};
         }
-        .k-step-mark {
+        .${k}-step-mark {
             width: ${defaults.markWidth};
             height: ${defaults.markWidth}; 
             margin-right: ${steps.gap};
         }
-        .k-step-main {
+        .${k}-step-main {
             display: flex;
             overflow: hidden;
             white-space: nowrap;
         }
-        .k-step-title {
+        .${k}-step-title {
             padding-right: ${steps.gap};
         }
 
         // tail
-        .k-step:last-of-type {
-            .k-step-tail {
+        .${k}-step:last-of-type {
+            .${k}-step-tail {
                 display: none;
             }
         } 
-        &:not(.k-vertical) {
-            ${makeArrow(false)};
+        &:not(.${k}-vertical) {
+            ${makeArrow(false, k)};
         }
     `
 }
 
-function makeArrow(isVertical: boolean) {
+function makeArrow(isVertical: boolean, k: string) {
     const defaults = steps.default; 
     const offset = `calc(-1 * (${defaults.height} / 2 + ${steps.gap}))`;
     const size = `calc(${defaults.height} / 2 + ${steps.gap})`;
 
     return css`
-        .k-step-tail {
+        .${k}-step-tail {
             position: absolute;
             ${!isVertical 
-                ? `
+                ? css`
                     top: 0;
                     right: ${offset};
                     width: ${size};
                     height: ${defaults.height};
                 `
-                : `
+                : css`
                     left: 0;
                     bottom: ${offset};
                     height: ${size};
@@ -200,53 +200,53 @@ function makeArrow(isVertical: boolean) {
                 ${isVertical ? 'top' : 'left'}: 0;
             }
         }
-        .k-step:not(:first-of-type) {
+        .${k}-step:not(:first-of-type) {
             padding-${isVertical ? 'top' : 'left'}: calc(${defaults.height} / 2 + ${steps.gap});
         }
     `
 }
 
-function makeLineStyles() {
+function makeLineStyles(k: string) {
     const line = steps.line;
     const top = `calc(${line.markWidth} / 2 - ${line.lineWidth} / 2)`;
 
     return css`
-        .k-step {
+        .${k}-step {
             display: flex;
         }
-        .k-step-wrapper {
+        .${k}-step-wrapper {
             display: inline-block;
             text-align: center;
             position: relative;
             width: ${line.contentWidth};
         }
-        .k-step:last-of-type {
+        .${k}-step:last-of-type {
             flex: 0 0 auto;
         }
-        .k-step-mark {
+        .${k}-step-mark {
             border: ${line.markborder};
             width: ${line.markWidth};
             height: ${line.markWidth};
             position: relative;
             z-index: 1;
-            &, .k-icon {
+            &, .${k}-icon {
                 font-size: ${line.markFontSize};
             }
         }
-        .k-step-main {
+        .${k}-step-main {
             padding-top: ${line.titleGap};
         }
-        .k-step-title {
+        .${k}-step-title {
             font-size: 14px;
             color: ${theme.color.text};
         }
-        .k-step-content {
+        .${k}-step-content {
             margin-top: ${line.descGap};
             color: ${theme.color.placeholder};
         }
         
         // draw connected line
-        .k-step-wrapper {
+        .${k}-step-wrapper {
             &:before,
             &:after {
                 content: '';
@@ -261,13 +261,13 @@ function makeLineStyles() {
                 right: 0;
             }
         }
-        .k-step {
-            &:first-of-type .k-step-wrapper:before,
-            &:last-of-type .k-step-wrapper:after {
+        .${k}-step {
+            &:first-of-type .${k}-step-wrapper:before,
+            &:last-of-type .${k}-step-wrapper:after {
                 background: transparent;
             }
         }
-        .k-step-tail {
+        .${k}-step-tail {
             flex: 1;
             height: ${line.lineWidth};
             background: ${line.lineColor};
@@ -275,34 +275,34 @@ function makeLineStyles() {
         }
         
         // status
-        .k-step {
-            &.k-done {
-                .k-step-tail,
-                &:not(:last-of-type) .k-step-wrapper:after,
-                &:not(:first-of-type) .k-step-wrapper:before {
+        .${k}-step {
+            &.${k}-done {
+                .${k}-step-tail,
+                &:not(:last-of-type) .${k}-step-wrapper:after,
+                &:not(:first-of-type) .${k}-step-wrapper:before {
                     background: ${theme.color.primary};
                 }
             }
-            &:not(:first-of-type).k-active {
-                .k-step-wrapper:before {
+            &:not(:first-of-type).${k}-active {
+                .${k}-step-wrapper:before {
                     background: ${theme.color.primary};
                 }
             }
-            &.k-active .k-step-title {
+            &.${k}-active .${k}-step-title {
                 color: ${theme.color.primary};
             }
-            &.k-error .k-step-title {
+            &.${k}-error .${k}-step-title {
                 color: ${theme.color.danger};
             }
         }
     `;
 }
 
-function makeLineCompactStyles() {
+function makeLineCompactStyles(k: string) {
     const line = steps.line;
 
     return css`
-        .k-step-wrapper {
+        .${k}-step-wrapper {
             display: inline-flex;
             text-align: left;
             width: auto;
@@ -310,17 +310,17 @@ function makeLineCompactStyles() {
                 display: none;
             }
         }
-        .k-step-main {
+        .${k}-step-main {
             flex: 1;
             padding: 0 0 0 ${line.titleGap};
         }
-        .k-step-content {
+        .${k}-step-content {
             margin: 0;
         }
-        .k-step-tail {
+        .${k}-step-tail {
             margin-right: ${line.titleGap};
         }
-        .k-step-title {
+        .${k}-step-title {
             display: flex;
             align-items: center;
             height: ${line.markWidth};
@@ -333,13 +333,13 @@ function makeLineCompactStyles() {
                 margin-left: ${line.titleGap};
             }
         }
-        .k-step:last-of-type .k-step-title:after {
+        .${k}-step:last-of-type .${k}-step-title:after {
             display: none;
         }
         // status
-        .k-step {
-            &.k-done {
-                .k-step-title:after {
+        .${k}-step {
+            &.${k}-done {
+                .${k}-step-title:after {
                     background: ${theme.color.primary};
                 }
             }
@@ -347,37 +347,37 @@ function makeLineCompactStyles() {
     `;
 }
 
-function makeSimpleStyles() {
+function makeSimpleStyles(k: string) {
     const simple = steps.simple;
     const top = `calc(${simple.markWidth} / 2 - ${steps.line.lineWidth} / 2)`;
 
     return css`
-        .k-step-mark {
+        .${k}-step-mark {
             width: ${simple.markWidth};
             height: ${simple.markWidth};
             background: ${simple.markBgColor};
         } 
-        .k-step-wrapper {
+        .${k}-step-wrapper {
             font-size: 0; // eliminate the gap
             &:before,
             &:after {
                 top: ${top};
             }
         }
-        .k-step-main {
+        .${k}-step-main {
             font-size: ${theme.default.fontSize};
         }
-        .k-step-tail {
+        .${k}-step-tail {
             margin-top: ${top};
         }
-        .k-step {
-            &.k-done {
-                .k-step-mark {
+        .${k}-step {
+            &.${k}-done {
+                .${k}-step-mark {
                     background: ${simple.doneMarkBgColor};
                 }
             }
-            &.k-error {
-                .k-step-mark {
+            &.${k}-error {
+                .${k}-step-mark {
                     background: ${simple.errorMarkBgColor};
                 }
             }
@@ -393,9 +393,9 @@ function center(flex: 'flex' | 'inline-flex' = 'flex') {
     `;
 }
 
-export function makeCommonStyles() {
+export function makeCommonStyles(k: string) {
     return css`
-        .k-step {
+        .${k}-step {
             position: relative; 
             flex: 1;
 
@@ -403,20 +403,20 @@ export function makeCommonStyles() {
             ${stepStatus.map(status => {
                 const styles = steps[status];
                 return css`
-                    &.k-${status} {
-                        .k-step-mark {
+                    &.${k}-${status} {
+                        .${k}-step-mark {
                             color: ${styles.markColor};
                             border-color: ${styles.markBorderColor};
                             background: ${styles.markBgColor};
                         }
-                        .k-step-main {
+                        .${k}-step-main {
                             color: ${styles.mainColor};
                         }
                     }
                 `
             })} 
         }
-        .k-step-mark {
+        .${k}-step-mark {
             ${center('inline-flex')};
             border: ${steps.default.markborder};
             border-radius: 50%;
@@ -427,50 +427,50 @@ export function makeCommonStyles() {
     `;
 }
 
-export function makeVerticalStyles() {
+export function makeVerticalStyles(k: string) {
     const verticalLine = steps.vertical.line;
 
     return css`
-        &.k-vertical {
-            &.k-default {
+        &.${k}-vertical {
+            &.${k}-default {
                 height: auto;
                 width: ${steps.default.height};
                 writing-mode: vertical-rl;
                 letter-spacing: 1px;
-                .k-step-wrapper {
+                .${k}-step-wrapper {
                     width: 100%;
                     padding: ${steps.default.padding} 0;
                 }
-                .k-step-mark {
+                .${k}-step-mark {
                     margin-right: 0;
                     margin-bottom: ${steps.gap};
                 }
-                .k-step-title {
+                .${k}-step-title {
                     padding-right: 0;
                     padding-bottom: ${steps.gap};
                 }
 
-                ${makeArrow(true)};
+                ${makeArrow(true, k)};
             }
 
-            &.k-line,
-            &.k-line-compact,
-            &.k-simple {
+            &.${k}-line,
+            &.${k}-line-compact,
+            &.${k}-simple {
                 flex-direction: column;
-                .k-step {
+                .${k}-step {
                     flex: none;
                     min-height: ${verticalLine.minHeight};
                 }
-                .k-step-wrapper {
+                .${k}-step-wrapper {
                     display: flex;
                     width: auto;
                     text-align: left;
                 }
-                .k-step-main {
+                .${k}-step-main {
                     flex: 1;
                     padding: 0 0 ${verticalLine.padding} ${verticalLine.padding};
                 }
-                .k-step-title {
+                .${k}-step-title {
                     display: flex;
                     align-items: center;
                     height: ${steps.line.markWidth};
@@ -480,29 +480,29 @@ export function makeVerticalStyles() {
                 }
                 
                 // connected line
-                .k-step-wrapper {
+                .${k}-step-wrapper {
                     &:before, &:after {
                         display: none;
                     }
                 }
-                .k-step-tail {
+                .${k}-step-tail {
                     position: absolute;
                     left: calc(${steps.line.markWidth} / 2 - ${steps.line.lineWidth} / 2);
                     height: 100%;
                     width: ${steps.line.lineWidth};
                     background: ${steps.line.lineColor};
                 }
-                .k-step:last-of-type {
-                    .k-step-tail {
+                .${k}-step:last-of-type {
+                    .${k}-step-tail {
                         display: none;
                     }
                 }
             }
-            &.k-simple {
-                .k-step-tail {
+            &.${k}-simple {
+                .${k}-step-tail {
                     left: calc(${steps.simple.markWidth} / 2 - ${steps.line.lineWidth} / 2);
                 }
-                .k-step-title {
+                .${k}-step-title {
                     height: ${steps.simple.markWidth};
                     margin-bottom: ${steps.vertical.simple.titleGap};
                 }

package/components/switch/index.ts

@@ -4,6 +4,7 @@ import {sizes, Sizes} from '../../styles/utils';
 import {bind} from '../utils';
 import {useDraggable} from './useDraggable';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 export interface SwitchProps<True = any, False = any> {
     name?: string
@@ -65,6 +66,7 @@ export class Switch<True = true, False = false> extends Component<SwitchProps<Tr
 
     private elementRef = createRef<HTMLElement>();
     private draggable = useDraggable(this.elementRef);
+    private config = useConfigContext();
 
     @bind
     private onClick(e: MouseEventWithIgnore) {

package/components/switch/index.vdt

@@ -8,15 +8,16 @@ let {
 } = this.get();
 
 const {start, dragging, barRef, barWidth} = this.draggable;
+const { k } = this.config;
 
 const classNameObj = {
-    'k-switch': true,
+    [`${k}-switch`]: true,
     [className]: className,
-    'k-checked': value === trueValue, 
-    [`k-${size}`]: true,
-    'k-disabled': disabled,
-    'k-dragging': dragging.value,
-    [makeStyles()]: true,
+    [`${k}-checked`]: value === trueValue, 
+    [`${k}-${size}`]: true,
+    [`${k}-disabled`]: disabled,
+    [`${k}-dragging`]: dragging.value,
+    [makeStyles(k)]: true,
 };
 
 
@@ -74,15 +75,15 @@ if (barWidth.value) {
         v-model-false={falseValue}
         tabindex="-1"
     /> 
-    <div class="k-switch-off" v-if={off || $blocks.off} style={offStyle}>
+    <div class={`${k}-switch-off`} v-if={off || $blocks.off} style={offStyle}>
         <b:off>{off}</b:off>
     </div>
-    <div class="k-switch-bar" ref={barRef} style={barStyle}>
-        <div class="k-switch-on" v-if={on || $blocks.on} style={onStyle}>
+    <div class={`${k}-switch-bar`} ref={barRef} style={barStyle}>
+        <div class={`${k}-switch-on`} v-if={on || $blocks.on} style={onStyle}>
             <b:on>{on}</b:on>
         </div>
-        <div class="k-switch-wrapper">
-            <div class="k-switch-handle"
+        <div class={`${k}-switch-wrapper`}>
+            <div class={`${k}-switch-handle`}
                 ev-click={this.onClickOnHandle}
                 ev-mousedown={start}
             >