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

package/components/slider/styles.ts

@@ -53,21 +53,21 @@ setDefault(() => {
     slider = deepDefaults(theme, {slider: defaults}).slider;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         position: relative;
         outline: none;
         display: flex;
-        .k-slider-main {
+        .${k}-slider-main {
             flex: 1;
         }
-        .k-slider-track-wrapper {
+        .${k}-slider-track-wrapper {
             cursor: pointer;
             height: 32px;
             display: flex;
             align-items: center;
         }
-        .k-slider-track {
+        .${k}-slider-track {
             flex: 1;
             height: ${slider.height};
             background-color: ${slider.bgColor};
@@ -75,21 +75,21 @@ export function makeStyles() {
             position: relative;
             user-select: none;
         }
-        .k-slider-bar {
+        .${k}-slider-bar {
             background-color: ${slider.barColor};
             position: absolute;
             height: 100%;
             border-radius: ${slider.borderRadius};
             transition: all ${slider.transition};
         }
-        .k-slider-thumb-wrapper {
+        .${k}-slider-thumb-wrapper {
             position: absolute;
             top: 50%;
             transform: translate(-50%, -50%);
             transition: left ${slider.transition};
             z-index: 1;
         }
-        .k-slider-thumb {
+        .${k}-slider-thumb {
             box-sizing: content-box;
             height: ${slider.thumb.height};
             width: ${slider.thumb.width};
@@ -106,41 +106,41 @@ export function makeStyles() {
                 background-color: ${slider.thumb.hoverBgColor};
             }
         }
-        .k-slider-ends {
+        .${k}-slider-ends {
             display: flex;
             justify-content: space-between;
             span {
                 cursor: pointer;
             }
         }
-        .k-slider-spinner {
+        .${k}-slider-spinner {
             margin-left: ${slider.spinnerGap};
         }
-        .k-slider-spinner-sep {
+        .${k}-slider-spinner-sep {
             display: inline-block;
             margin: auto 8px;
         }
 
         // dragging
-        &.k-dragging {
-            .k-slider-bar {
+        &.${k}-dragging {
+            .${k}-slider-bar {
                 transition: none;
             }
-            .k-slider-thumb-wrapper {
+            .${k}-slider-thumb-wrapper {
                 transition: none;
             }
         }
 
         // disabled
-        &.k-disabled {
+        &.${k}-disabled {
             color: ${slider.disabled.color};
-            .k-slider-track-wrapper {
+            .${k}-slider-track-wrapper {
                 cursor: not-allowed;
             }
-            .k-slider-bar {
+            .${k}-slider-bar {
                 background-color: ${slider.disabled.bgColor};
             }
-            .k-slider-thumb {
+            .${k}-slider-thumb {
                 border-color: #fff;
                 background-color: ${slider.disabled.bgColor};
                 &:hover,
@@ -150,7 +150,7 @@ export function makeStyles() {
                     transform: none;
                 }
             }
-            .k-slider-ends {
+            .${k}-slider-ends {
                 span {
                     cursor: not-allowed;
                 }
@@ -158,7 +158,7 @@ export function makeStyles() {
         }
 
         // stop point
-        .k-slider-point {
+        .${k}-slider-point {
             position: absolute;
             top: calc((${slider.height} - ${slider.point.height}) / 2 );
             width: ${slider.point.width};
@@ -167,13 +167,13 @@ export function makeStyles() {
             transform: translateX(-50%);
             border-radius: ${slider.point.borderRadius};
             border: ${slider.point.border};
-            &.k-active {
+            &.${k}-active {
                 border-color: ${slider.point.activeBorderColor};
             }
         }
 
         // marks
-        .k-slider-marks {
+        .${k}-slider-marks {
             position: relative;
             height: ${slider.marks.height};
             > span {
@@ -187,13 +187,13 @@ export function makeStyles() {
                 &:last-child {
                     transform: translateX(-100%);
                 }
-                &.k-active {
+                &.${k}-active {
                     color: ${slider.marks.activeColor};
                 }
             }
         }
 
-        .k-slider-tooltip {
+        .${k}-slider-tooltip {
             white-space: nowrap;
         }
     `;

package/components/spin/index.ts

@@ -1,6 +1,7 @@
 import {Component, TypeDefs} from 'intact';
 import template from './index.vdt';
 import {sizes, Sizes} from '../../styles/utils';
+import { useConfigContext } from '../config';
 
 export interface SpinProps {
     size?: Sizes
@@ -28,4 +29,6 @@ export class Spin extends Component<SpinProps, SpinEvents, SpinBlocks> {
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
+
+    private config = useConfigContext();
 }

package/components/spin/index.vdt

@@ -3,27 +3,28 @@ import {getRestProps} from '../utils';
 import {makeStyles} from './styles';
 
 const {size, center, className, overlay} = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-spin': true,
-    [`k-${size}`]: size !== 'default',
-    'k-center': !overlay && center,
-    'k-overlay': overlay,
+    [`${k}-spin`]: true,
+    [`${k}-${size}`]: size !== 'default',
+    [`${k}-center`]: !overlay && center,
+    [`${k}-overlay`]: overlay,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 const canvas = (
-    <div class="k-spin-canvas">
+    <div class={`${k}-spin-canvas`}>
         <b:canvas>
             <svg viewBox="0 0 120 120">
-                <circle cx="60" cy="60" class="k-spin-circle" r="57"></circle>
+                <circle cx="60" cy="60" class={`${k}-spin-circle`} r="57"></circle>
             </svg>
         </b:canvas>
     </div>
 );
 
 <div class={classNameObj} {...getRestProps(this)}>
-    <div class="k-spin-wrapper" v-if={overlay}>{canvas}</div>
+    <div class={`${k}-spin-wrapper`} v-if={overlay}>{canvas}</div>
     <template v-else>{canvas}</template>
 </div>

package/components/spin/styles.ts

@@ -18,7 +18,7 @@ setDefault(() => {
     spin = deepDefaults(theme, {spin: defaults}).spin;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     const width = spin.strokeWidth;
     const r = 120 - 60 - (width / 2);
     const c = Math.round(2 * 3.14 * r);
@@ -41,12 +41,12 @@ export function makeStyles() {
 
     return css`
         display: inline-block;
-        .k-spin-canvas {
+        .${k}-spin-canvas {
             width: ${spin.width};
             height: ${spin.width};
-            animation: k-rotate 2s linear infinite;
+            animation:.${k}-rotate 2s linear infinite;
         }
-        .k-spin-circle {
+        .${k}-spin-circle {
             stroke-dasharray: ${Math.round(c * 0.75)}, ${c};
             stroke-dashoffset: 0;
             fill: none;
@@ -61,8 +61,8 @@ export function makeStyles() {
             if (size === 'default') return;
             const width = spin[`${size}Width` as const];
             return css`
-                &.k-${size} {
-                    .k-spin-canvas {
+                &.${k}-${size} {
+                    .${k}-spin-canvas {
                         width: ${width};
                         height: ${width};
                     }
@@ -70,8 +70,8 @@ export function makeStyles() {
             `;
         })}
 
-        &.k-center,
-        &.k-overlay .k-spin-wrapper {
+        &.${k}-center,
+        &.${k}-overlay .${k}-spin-wrapper {
             position: absolute;
             z-index: 1;
             top: 50%;
@@ -79,7 +79,7 @@ export function makeStyles() {
             transform: translate(-50%, -50%);
         }
 
-        &.k-overlay {
+        &.${k}-overlay {
             position: absolute;
             z-index: ${theme.midZIndex};
             top: 0;

package/components/spinner/index.ts

@@ -7,6 +7,7 @@ import {useFormatter} from './useFormatter';
 import {useValue} from'./useValue';
 import {useChange} from './useChange';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 export interface SpinnerProps {
     value?: number,
@@ -78,6 +79,7 @@ export class Spinner extends Component<SpinnerProps, SpinnerEvents> {
     private formatter = useFormatter();
     private value = useValue(this.step, this.formatter);
     private change = useChange(this.step, this.value.fixValue);
+    private config = useConfigContext();
 
     private isDisabledDecrease(): boolean {
         const {value, min, disabled} = this.get();

package/components/spinner/index.vdt

@@ -5,13 +5,14 @@ import {getRestProps} from '../utils';
 import {makeStyles} from './styles';
 
 const {className, disabled, size, vertical, value, width} = this.get();
+const { k } = this.config;
 const classNameObj = {
-    'k-spinner': true,
-    'k-disabled': disabled,
-    [`k-${size}`]: size !== 'default',
+    [`${k}-spinner`]: true,
+    [`${k}-disabled`]: disabled,
+    [`${k}-${size}`]: size !== 'default',
     [className]: className,
-    'k-vertical': vertical,
-    [makeStyles()]: true,
+    [`${k}-vertical`]: vertical,
+    [makeStyles(k)]: true,
 };
 const {decrease, increase, onChangeValue, onFocusin} = this.change;
 const {showValue, onInput} = this.value;
@@ -19,16 +20,16 @@ const {showValue, onInput} = this.value;
 <div class={classNameObj} {...getRestProps(this)}>
     <Button icon ev-click={decrease}
         disabled={this.isDisabledDecrease()}
-        class="k-spinner-btn k-left"
+        class={`${k}-spinner-btn ${k}-left`}
         size={size}
         type="none"
         tabindex="-1"
     >
-        <Icon v-if={!vertical} class="k-spinner-icon k-icon-minus" />
-        <Icon v-else class="k-spinner-icon k-icon-down" />
+        <Icon v-if={!vertical} class={`${k}-spinner-icon ${k}-icon-minus`} />
+        <Icon v-else class={`${k}-spinner-icon ${k}-icon-down`} />
     </Button>
     <Input
-        class="k-spinner-input"
+        class={`${k}-spinner-input`}
         disabled={disabled} 
         ev-change={onChangeValue}
         ev-focusin={onFocusin}
@@ -39,12 +40,12 @@ const {showValue, onInput} = this.value;
     />
     <Button icon ev-click={increase}
         disabled={this.isDisabledIncrease()}
-        class="k-spinner-btn k-right"
+        class={`${k}-spinner-btn ${k}-right`}
         size={size}
         type="none"
         tabindex="-1"
     >
-        <Icon v-if={!vertical} class="k-spinner-icon k-icon-add" />
-        <Icon v-else class="k-spinner-icon k-icon-up" />
+        <Icon v-if={!vertical} class={`${k}-spinner-icon ${k}-icon-add`} />
+        <Icon v-else class={`${k}-spinner-icon ${k}-icon-up`} />
     </Button>
 </div>

package/components/spinner/styles.ts

@@ -51,7 +51,7 @@ setDefault(() => {
     spinner = deepDefaults(theme, {spinner: defaults}).spinner;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         display: inline-block;
         vertical-align: middle;
@@ -59,64 +59,64 @@ export function makeStyles() {
         border-radius: ${spinner.borderRadius};
         &:hover {
             border-color: ${spinner.hoverBorderColor};
-            .k-spinner-btn {
+            .${k}-spinner-btn {
                 background: ${spinner.hoverBtnBg};
             }
-            .k-left {
+            .${k}-left {
                 border-radius: ${spinner.borderRadius} 0 0 ${spinner.borderRadius};
             }
-            .k-right {
+            .${k}-right {
                 border-radius: 0 ${spinner.borderRadius} ${spinner.borderRadius} 0;
             }
         }
-        .k-spinner-input {
+        .${k}-spinner-input {
             width: ${spinner.default.inputWidth};
-            .k-input-wrapper {
+            .${k}-input-wrapper {
                 border:none;
                 border-radius: 0;
                 &:hover{
                     border: none
                 }
             }
-            &.k-focus .k-input-wrapper {
+            &.${k}-focus .${k}-input-wrapper {
                 border: none;
             }
-            .k-input-inner {
+            .${k}-input-inner {
                 text-align: center;
             }
         }
-        .k-spinner-icon {
+        .${k}-spinner-icon {
             font-size: ${spinner.default.iconFontSize};
         }
-        &.k-vertical {
+        &.${k}-vertical {
             position: relative;
             font-size: 0;
-            .k-spinner-btn {
+            .${k}-spinner-btn {
                 position: absolute;
                 right: 0;
                 margin: 0;
                 height: calc(50% - 2px);
                 line-height: 50%;
             }
-            .k-spinner-icon {
+            .${k}-spinner-icon {
                 font-size: inherit !important;
             }
-            .k-spinner-btn.k-left {
+            .${k}-spinner-btn.${k}-left {
                 bottom: 1px;
                 border-radius: 0 0 ${spinner.borderRadius} 0;
             }
-            .k-spinner-btn.k-right {
+            .${k}-spinner-btn.${k}-right {
                 top: 1px;
                 border-radius: 0 ${spinner.borderRadius} 0 0;
             }
-            .k-spinner-input {
-                .k-input-wrapper {
+            .${k}-spinner-input {
+                .${k}-input-wrapper {
                     border-radius: ${spinner.borderRadius} 0 0 ${spinner.borderRadius};
                 }
             }
             ${sizes.map(size => {
-                const generate = () => `
-                    .k-spinner-input {
+                const generate = () => css`
+                    .${k}-spinner-input {
                         padding-right: ${theme[size].height};
                         width: ${spinner.vertical[size].width};
                     }
@@ -124,8 +124,8 @@ export function makeStyles() {
                 if (size === 'default') {
                     return generate();
                 } else {
-                    return `
-                        &.k-${size} {
+                    return css`
+                        &.${k}-${size} {
                             ${generate()}
                         }
                     `;
@@ -133,26 +133,26 @@ export function makeStyles() {
             })}
         }
             
-        &.k-disabled {
+        &.${k}-disabled {
             border-color: ${spinner.disabledBorderColor};
             background: ${spinner.disabledBg};
         }
 
         ${sizes.map(size => {
             const styles = spinner[size];
-            const generate = () => `
-                .k-spinner-icon {
+            const generate = () => css`
+                .${k}-spinner-icon {
                     font-size: ${styles.iconFontSize};
                 }
-                .k-spinner-input {
+                .${k}-spinner-input {
                     width: ${styles.inputWidth};
                 }
             `;
             if (size === 'default') {
                 return generate();
             } else {
-                return `
-                    &.k-${size} {
+                return css`
+                    &.${k}-${size} {
                         ${generate()}
                     }
                 `;

package/components/split/index.ts

@@ -2,8 +2,9 @@ import {Component, TypeDefs, createRef} from 'intact';
 import template from './index.vdt';
 import {useSize} from './useSize';
 import {useDraggable} from './useDraggable';
-import {Mode} from './style';
+import {Mode} from './styles';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 export interface SplitProps {
     mode?: Mode
@@ -58,4 +59,5 @@ export class Split extends Component<SplitProps, SplitEvents, SplitBlocks> {
         this.size.firstSize,
         this.size.lastSize,
     );
+    private config = useConfigContext();
 }

package/components/split/index.vdt

@@ -1,24 +1,24 @@
-import {makeStyles} from './style';
-import {kls} from './style';
+import {makeStyles, kls} from './styles';
 import { MemoBlock } from './memo';
 import { getRestProps } from '../utils';
 
 const {mode} = this.get();
 const {firstSize, lastSize} = this.size;
 const {firstRef, lastRef, elementRef, start, dragging} = this.drag;
+const { k } = this.config;
 const classNameObj = {
-    'k-split': true,
-    [`k-${mode}`]: true,
-    [makeStyles()]: true,
-    ['k-first-auto']: firstSize.value === 'auto',
-    ['k-last-auto']: lastSize.value === 'auto',
-    ['k-resizing']: dragging.value,
+    [`${k}-split`]: true,
+    [`${k}-${mode}`]: true,
+    [makeStyles(k)]: true,
+    [[`${k}-first-auto`]]: firstSize.value === 'auto',
+    [[`${k}-last-auto`]]: lastSize.value === 'auto',
+    [[`${k}-resizing`]]: dragging.value,
 };
 
 const stylePropName = mode === 'horizontal' ? 'width' : 'height';
 
 <div class={classNameObj} ref={elementRef} {...getRestProps(this)}>
-    <div class={kls('first')}
+    <div class={kls('first', k)}
         ref={firstRef}
         style={{[stylePropName]: firstSize.value}}
     >
@@ -28,14 +28,14 @@ const stylePropName = mode === 'horizontal' ? 'width' : 'height';
             </template>
         </MemoBlock>
     </div>
-    <div class={kls('line-wrapper')} ev-mousedown={start}>
+    <div class={kls('line-wrapper', k)} ev-mousedown={start}>
         <b:drag>
-            <div class={kls('line')}>
-                <div class={kls('drag-lines')}></div>
+            <div class={kls('line', k)}>
+                <div class={kls('drag-lines', k)}></div>
             </div>
         </b:drag>
     </div>
-    <div class={kls('last')}
+    <div class={kls('last', k)}
         style={{[stylePropName]: lastSize.value}}
         ref={lastRef}
     >

package/components/split/{style.ts → styles.ts}

@@ -5,7 +5,7 @@ import {deepDefaults}  from '../../styles/utils';
 
 export type Mode = 'horizontal' | 'vertical';
 
-export const kls = (className: string): string => `k-split-${className}`;
+export const kls = (className: string, k: string): string => `${k}-split-${className}`;
 
 const defaults = {
     splitLineSize: '6px',
@@ -39,65 +39,65 @@ setDefault(() => {
     split = deepDefaults(theme, {split: defaults}).split;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         display: flex;
         height: 100%;
 
-        & > .${kls('first')},
-        & > .${kls('last')} {
+        & > .${kls('first', k)},
+        & > .${kls('last', k)} {
             overflow: auto;
             position: relative;
         }
 
-        & > .${kls('first')} {
+        & > .${kls('first', k)} {
             flex: 0 0 auto;
         }
 
-        & > .${kls('last')} {
+        & > .${kls('last', k)} {
             flex: auto;
         }
 
-        &.k-first-auto {
-            & > .${kls('first')} {
+        &.${k}-first-auto {
+            & > .${kls('first', k)} {
                 flex: auto;
             }
-            & > .${kls('last')} {
+            & > .${kls('last', k)} {
                 flex: 0 0 auto;
             }
         }
 
-        &:not(.k-resizing) {
-            & > .${kls('first')},
-            & > .${kls('last')} {
+        &:not(.${k}-resizing) {
+            & > .${kls('first', k)},
+            & > .${kls('last', k)} {
                 transition: all ${split.transition};
             }
         }
 
-        & > .${kls('line-wrapper')} {
+        & > .${kls('line-wrapper', k)} {
             flex: 0 0 auto;
             text-align: center;
             overflow: hidden;
-            .${kls('line')} {
+            .${kls('line', k)} {
                 height: 100%;
                 background: ${split.bgColor};
                 position: relative;
             }
-            .${kls('drag-lines')} {
+            .${kls('drag-lines', k)} {
                 background: ${split.boderColor};
                 position: absolute;
             }
         }
 
-        &.k-horizontal {
-            & > .${kls('line-wrapper')} {
+        &.${k}-horizontal {
+            & > .${kls('line-wrapper', k)} {
                 cursor: col-resize;
                 width: ${split.splitLineSize};
-                .${kls('line')} {
+                .${kls('line', k)} {
                     border-left: ${split.baseBorder};
                     border-right: ${split.baseBorder};
                 }
-                .${kls('drag-lines')} {
+                .${kls('drag-lines', k)} {
                     height: ${split.dragLinesSize};
                     width: 100%;
                     top: 50%;
@@ -107,16 +107,16 @@ export function makeStyles() {
             }
         }
 
-        &.k-vertical {
+        &.${k}-vertical {
             flex-direction: column;
-            & > .${kls('line-wrapper')} {
+            & > .${kls('line-wrapper', k)} {
                 cursor: row-resize;
                 height: ${split.splitLineSize};
-                .${kls('line')} {
+                .${kls('line', k)} {
                     border-top: ${split.baseBorder};
                     border-bottom: ${split.baseBorder};
                 }
-                .${kls('drag-lines')} {
+                .${kls('drag-lines', k)} {
                     width: ${split.dragLinesSize};
                     height: 100%;
                     left: 50%;

package/components/steps/index.ts

@@ -1,6 +1,8 @@
 import {Component, TypeDefs} from 'intact';
 import template from './index.vdt';
 import {bind} from '../utils';
+import { useConfigContext } from '../config';
+
 export * from './step';
 
 export interface StepsProps {
@@ -30,6 +32,8 @@ export class Steps extends Component<StepsProps> {
     static typeDefs = typeDefs;
     static defaults = defaults;
 
+    private config = useConfigContext();
+
     @bind
     private changeIndex(index: number) {
         const {value, clickable} = this.get();