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

package/components/checkbox/styles.ts

@@ -55,13 +55,13 @@ setDefault(() => {
     checkbox = deepDefaults(theme, {checkbox: defaults}).checkbox;
 });
 
-export default function makeStyles() {
+export default function makeStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
         cursor: pointer;
         vertical-align: middle;
-        .k-checkbox-wrapper {
+        .${k}-checkbox-wrapper {
             width: ${checkbox.width};
             height: ${checkbox.width}; 
             border: 1px solid ${checkbox.borderColor}; 
@@ -88,7 +88,7 @@ export default function makeStyles() {
             }
         }
         &:hover {
-            .k-checkbox-wrapper {
+            .${k}-checkbox-wrapper {
                 border: ${checkbox.hoverBorder}
             }
         }
@@ -103,22 +103,22 @@ export default function makeStyles() {
             top: 0;
             margin: 0;
         }
-        .k-checkbox-text {
+        .${k}-checkbox-text {
             margin-left: ${checkbox.text.gap};
             flex: 0 1 auto;
         }
 
         // indeterminate
         // checked
-        &.k-checked,
-        &.k-indeterminate {
-            .k-checkbox-wrapper {
+        &.${k}-checked,
+        &.${k}-indeterminate {
+            .${k}-checkbox-wrapper {
                 border-color: ${checkbox.checked.borderColor};
                 background: ${checkbox.checked.bgColor};
             }
         }
-        &.k-indeterminate {
-            .k-checkbox-wrapper {
+        &.${k}-indeterminate {
+            .${k}-checkbox-wrapper {
                 &:before {
                     transform: rotate(90deg) scale(1);
                     border-bottom: 0;
@@ -126,8 +126,8 @@ export default function makeStyles() {
             }
       
         }
-        &.k-checked {
-            .k-checkbox-wrapper {
+        &.${k}-checked {
+            .${k}-checkbox-wrapper {
                 &:before {
                     transform: rotate(45deg) scale(1);
                 }
@@ -138,17 +138,17 @@ export default function makeStyles() {
         // focus
         &:focus {
             outline: none;
-            .k-checkbox-wrapper {
+            .${k}-checkbox-wrapper {
                 border-color: ${checkbox.checked.borderColor};
             }
         }
       
     
         // disabled
-        &.k-disabled {
+        &.${k}-disabled {
             color: ${checkbox.disabled.color};
             cursor: not-allowed;
-            .k-checkbox-wrapper {
+            .${k}-checkbox-wrapper {
                 border-color: ${checkbox.disabled.borderColor};
                 background: ${checkbox.disabled.bgColor};
                 // checked
@@ -159,9 +159,9 @@ export default function makeStyles() {
             input {
                 cursor: not-allowed;
             }
-            &.k-checked,
-            &.k-indeterminate {
-              .k-checkbox-wrapper {
+            &.${k}-checked,
+            &.${k}-indeterminate {
+              .${k}-checkbox-wrapper {
                   border-color: ${checkbox.disabled.checked.borderColor};
                   background: ${checkbox.disabled.checked.bgColor};
               }

package/components/code/index.ts

@@ -3,6 +3,7 @@ import template from './index.vdt';
 import type {editor, default as monaco} from 'monaco-editor';
 import {useEditor} from './useEditor';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 export interface CodeProps {
     value?: string
@@ -46,6 +47,7 @@ export class Code extends Component<CodeProps, CodeEvents> {
     static events = events;
 
     private editor = useEditor();
+    private config = useConfigContext();
 
     public getEditor() {
         return this.editor.getEditor();

package/components/code/index.vdt

@@ -3,11 +3,12 @@ import {Spin} from '../spin';
 import {makeStyles} from './styles';
 
 let {width, height, className, style} = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-code': true,
+    [`${k}-code`]: true,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 if (width || height) {

package/components/code/styles.ts

@@ -1,7 +1,7 @@
 import {css} from '@emotion/css';
 import '../../styles/global';
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         position: relative;
         height: 100%;

package/components/collapse/index.ts

@@ -3,6 +3,7 @@ import template from './index.vdt';
 import {CollapseItem} from './item';
 import {toggleArray} from '../utils';
 export * from './item';
+import { useConfigContext } from '../config';
 
 type ArrowType = 'left' | 'right'
 
@@ -33,6 +34,8 @@ export class Collapse extends Component<CollapseProps, CollapseEvents> {
     static typeDefs = typeDefs;
     static defaults = defaults;
 
+    private config = useConfigContext();
+
     init() {
         provide<Collapse>(COLLAPSE, this);
     }

package/components/collapse/index.vdt

@@ -5,13 +5,14 @@ import {isNullOrUndefined} from 'intact-shared';
 import {directClone} from 'intact';
 
 const {children, className, arrow, noBorder} = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-collapse': true,
-    [makeStyles()]: true,
+    [`${k}-collapse`]: true,
+    [makeStyles(k)]: true,
     [className]: className,
-    'k-left': arrow === 'left',
-    'k-border': !noBorder,
+    [`${k}-left`]: arrow === 'left',
+    [`${k}-border`]: !noBorder,
 };
 
 const _children = mapChildren(children, (vNode, index) => {

package/components/collapse/item.ts

@@ -2,6 +2,7 @@ import {Component, TypeDefs, VNode, inject} from 'intact';
 import {Collapse, COLLAPSE} from './index'
 import template from './item.vdt';
 import {bind} from '../utils';
+import { useConfigContext } from '../config';
 
 export interface CollapseItemProps {
     value?: string
@@ -29,6 +30,7 @@ export class CollapseItem extends Component<CollapseItemProps, CollapseItemEvent
     static typeDefs = typeDefs;
 
     private collapse = inject<Collapse>(COLLAPSE)!;
+    private config = useConfigContext();
 
     @bind
     toggle() {

package/components/collapse/item.vdt

@@ -1,6 +1,6 @@
 import {Transition} from 'intact';
 import {expandAnimationCallbacks, getRestProps} from '../utils';
-import {kls, makeItemStyles} from './styles';
+import {makeItemStyles} from './styles';
 import {Icon} from '../icon';
 
 const {
@@ -9,24 +9,24 @@ const {
 } = this.get();
 
 const isActive = this.collapse.isActive(value);
+const { k } = this.config;
 
 const classNameObj = {
-    'k-collapse-item': true,
-    [makeItemStyles()]: true,
+    [`${k}-collapse-item`]: true,
+    [makeItemStyles(k)]: true,
     [className]: className,
-    'k-active': isActive,
-    'k-disabled': disabled
+    [`${k}-active`]: isActive,
+    [`${k}-disabled`]: disabled
 };
 
 <div class={classNameObj} {...getRestProps(this)}>
-    <div class={kls('title')} ev-click={this.toggle}>
+    <div class={`${k}-collapse-title`} ev-click={this.toggle}>
         <b:title>{title}</b:title>
-        <Icon class={{[kls('arrow')]: true, 'k-icon-right': true}} hoverable={!disabled}></Icon>
+        <Icon class={{[`${k}-collapse-arrow`]: true, [`${k}-icon-right`]: true}} hoverable={!disabled}></Icon>
     </div>
     <Transition
         show={isActive}
         {...expandAnimationCallbacks}
-        class={kls('content')}
         onEnter={
             el => {
                 expandAnimationCallbacks.onEnter(el);
@@ -40,6 +40,6 @@ const classNameObj = {
             }
         }
     >
-        <div class={kls('wrapper')}>{children}</div>
+        <div class={`${k}-collapse-wrapper`}>{children}</div>
     </Transition>
 </div>

package/components/collapse/styles.ts

@@ -3,8 +3,6 @@ import {theme, setDefault} from '../../styles/theme';
 import {css} from '@emotion/css';
 import '../../styles/global';
 
-export const kls = (className: string) => `k-collapse-${className}`;
-
 const defaults = {
     get transition() { return theme.transition.large },
     fontSize: '12px',
@@ -18,7 +16,6 @@ const defaults = {
     item: {
         borderBottom: '1px solid #e5e5e5',
         titleHeight: '40px',
-        contentPadding: '0 16px 16px'
     }
 };
 
@@ -27,18 +24,18 @@ setDefault(() => {
     collapse = deepDefaults(theme, {collapse: defaults}).collapse;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         font-size: ${collapse.fontSize};
         
-        &.k-left {
-            .${kls('arrow')} {
+        &.${k}-left {
+            .${k}-collapse-arrow {
                 float: left;
                 margin-right: ${collapse.titleMarginRight};
             }
         }
 
-        &.k-border {
+        &.${k}-border {
             border-radius: ${collapse.borderRadius};
             padding: ${collapse.borderPadding};
             border: ${collapse.collBorder};
@@ -46,7 +43,7 @@ export function makeStyles() {
     `;
 }
 
-export function makeItemStyles() {
+export function makeItemStyles(k: string) {
     const collapseItem = collapse.item;
     return css`
         border-bottom: ${collapseItem.borderBottom};
@@ -54,7 +51,7 @@ export function makeItemStyles() {
             border-bottom-color: transparent;
         }
 
-        .${kls('title')} {
+        .${k}-collapse-title {
             cursor: pointer;
             font-weight: bold;
             height: ${collapseItem.titleHeight};
@@ -63,38 +60,30 @@ export function makeItemStyles() {
             
         }
         
-        .${kls('arrow')} {
+        .${k}-collapse-arrow {
             float: right;
             transition: transform ${collapse.transition};
             line-height: ${collapseItem.titleHeight};
             height: ${collapseItem.titleHeight};
         }
 
-        &:not(.k-disabled) {
-            .${kls('title')} {
+        &:not(.${k}-disabled) {
+            .${k}-collapse-title {
                 &:hover {
                     color: ${theme.color.primary};
                 }
             }
         }
 
-        .${kls('content')} {
-            overflow: hidden;
-            .${kls('wrapper')} {
-                overflow: hidden;
-                padding: ${collapseItem.contentPadding};
-            }
-        }
-
-        &.k-active {
-            .${kls('arrow')} {
+        &.${k}-active {
+            .${k}-collapse-arrow  {
                 transform: rotate(90deg);
             }
         }
 
-        &.k-disabled {
+        &.${k}-disabled {
             color: ${theme.color.disabledBorder};
-            .${kls('title')} {
+            .${k}-collapse-title  {
                 cursor: not-allowed;
             }
         }

package/components/colorpicker/drag.ts

@@ -1,6 +1,7 @@
 import {Component} from 'intact';
 import template from './drag.vdt';
 import {useDrag} from './useDrag';
+import { useConfigContext } from '../config';
 
 interface ColorpickerDragProps {
     value: number
@@ -17,4 +18,5 @@ export class ColorpickerDrag extends Component<ColorpickerDragProps, Colorpicker
     static template = template;
 
     private drag = useDrag();
+    private config = useConfigContext();
 }

package/components/colorpicker/drag.vdt

@@ -1,3 +1,5 @@
-<div class="k-colorpicker-drag k-colorpicker-text"
+const { k } = this.config;
+
+<div class={`${k}-colorpicker-drag ${k}-colorpicker-text`}
     ev-mousedown={this.drag.start}
 >{this.get('children')}</div>

package/components/colorpicker/index.ts

@@ -3,6 +3,7 @@ import template from './index.vdt';
 import {sizes, Sizes} from '../../styles/utils';
 import {Container} from '../portal';
 import {Dropdown, DropdownProps} from '../dropdown';
+import { useConfigContext } from '../config';
 
 export interface ColorpickerProps {
     value: string
@@ -43,4 +44,6 @@ export class Colorpicker extends Component<ColorpickerProps, ColorpickerEvents>
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
+
+    private config = useConfigContext();
 }

package/components/colorpicker/index.vdt

@@ -9,13 +9,14 @@ const {
     value, size, disabled, container,
     position,
 } = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-colorpicker': true,
+    [`${k}-colorpicker`]: true,
     [className]: className,
-    [`k-${size}`]: size !== 'default',
-    'k-disabled': disabled,
-    [makeStyles()]: true,
+    [`${k}-${size}`]: size !== 'default',
+    [`${k}-disabled`]: disabled,
+    [makeStyles(k)]: true,
 };
 
 <div class={classNameObj} {...getRestProps(this)}>
@@ -26,10 +27,10 @@ const classNameObj = {
         container={container}
         v-model:value="show"
     >
-        <div class="k-colorpicker-color">
-            <div class="k-colorpicker-inner" style={{backgroundColor: value}}></div>
+        <div class={`${k}-colorpicker-color`}>
+            <div class={`${k}-colorpicker-inner`} style={{backgroundColor: value}}></div>
         </div>
-        <DropdownMenu class="k-colorpicker-content">
+        <DropdownMenu class={`${k}-colorpicker-content`}>
             <ColorpickerPanel v-model="value" presets={presets} />
         </DropdownMenu>
     </Dropdown>

package/components/colorpicker/panel.ts

@@ -3,6 +3,7 @@ import template from './panel.vdt';
 import {useValue} from './useValue';
 import {usePointer} from './usePointer';
 import {useInput} from './useInput';
+import { useConfigContext } from '../config';
 
 export interface ColorpickerPanelProps {
     value: string
@@ -22,4 +23,5 @@ export class ColorpickerPanel extends Component<ColorpickerPanelProps> {
         this.value.rgb,
         this.value.hsl,
     );
+    private config = useConfigContext();
 }

package/components/colorpicker/panel.vdt

@@ -7,9 +7,10 @@ import {Mode} from './useInput';
 import {ColorpickerDrag as Drag} from './drag';
 
 const {value, presets} = this.get();
+const { k } = this.config;
 const classNameObj = {
-    'k-colorpicker-panel': true,
-    [makePanelStyles()]: true,
+    [`${k}-colorpicker-panel`]: true,
+    [makePanelStyles(k)]: true,
 }
 const {
     hex: {value: hex},
@@ -28,25 +29,25 @@ const {
 const alpha = Math.round(rgb.a * 100);
 
 <div class={classNameObj}>
-    <div class="k-colorpicker-saturation"
+    <div class={`${k}-colorpicker-saturation`}
         style={{backgroundColor: `hsl(${hsv.h}, 100%, 50%)`}}
         ev-mousedown={start}
         ref={areaRef}
     >
-        <div class="k-colorpicker-white"></div>
-        <div class="k-colorpicker-black"></div>
-        <div class="k-colorpicker-pointer"
+        <div class={`${k}-colorpicker-white`}></div>
+        <div class={`${k}-colorpicker-black`}></div>
+        <div class={`${k}-colorpicker-pointer`}
             style={{
                 left: `${hsv.s * 100}%`,
                 top: `${-hsv.v * 100 + 100}%`,
             }}
         >
-            <div class="k-colorpicker-circle"></div>
+            <div class={`${k}-colorpicker-circle`}></div>
         </div>
     </div>
-    <div class="k-colorpicker-controls">
-        <div class="k-colorpicker-sliders">
-            <Slider class="k-colorpicker-hue"
+    <div class={`${k}-colorpicker-controls`}>
+        <div class={`${k}-colorpicker-sliders`}>
+            <Slider class={`${k}-colorpicker-hue`}
                 showInput={false}
                 showEnd={false}
                 step={0}
@@ -57,8 +58,8 @@ const alpha = Math.round(rgb.a * 100);
             />
             <Slider 
                 class={{
-                    "k-colorpicker-alpha k-colorpicker-alpha-bg": true,
-                    [makeAlphaBgColor(rgb)]: true,
+                    [`${k}-colorpicker-alpha ${k}-colorpicker-alpha-bg`]: true,
+                    [makeAlphaBgColor(rgb, k)]: true,
                 }}
                 showInput={false}
                 showEnd={false}
@@ -69,19 +70,19 @@ const alpha = Math.round(rgb.a * 100);
                 animate={!dragging.value}
             />
         </div>
-        <div class="k-colorpicker-color-wrapper k-colorpicker-alpha-bg">
-            <div class="k-colorpicker-color" style={{backgroundColor: value}}></div>
+        <div class={`${k}-colorpicker-color-wrapper ${k}-colorpicker-alpha-bg`}>
+            <div class={`${k}-colorpicker-color`} style={{backgroundColor: value}}></div>
         </div>
     </div>
     <Row gutter="6">
         <Col span="8">
             <Input fluid size="small"
                 frozenOnInput
-                class="k-colorpicker-input" 
+                class={`${k}-colorpicker-input`} 
                 value={hex}
                 ev-input={onInputHex}
             />
-            <div class="k-colorpicker-text">Hex</div>
+            <div class={`${k}-colorpicker-text`}>Hex</div>
         </Col>
         {(() => {
             let params;
@@ -106,7 +107,7 @@ const alpha = Math.round(rgb.a * 100);
                     <Col span="4">
                         <Input fluid size="small"
                             value={v} 
-                            class="k-colorpicker-input" 
+                            class={`${k}-colorpicker-input`} 
                             ev-input={setInputValue.bind(null, value, realMax)}
                         />
                         <Drag value={v}
@@ -126,7 +127,7 @@ const alpha = Math.round(rgb.a * 100);
         <Col span="4">
             <Input fluid size="small"
                 value={alpha} 
-                class="k-colorpicker-input" 
+                class={`${k}-colorpicker-input`} 
                 ev-input={setInputValue.bind(null, 'a', 100)}
             />
             <Drag value={alpha}
@@ -137,13 +138,13 @@ const alpha = Math.round(rgb.a * 100);
             >A</Drag>
         </Col>
     </Row>
-    <div class="k-colorpicker-presets" v-if={presets && presets.length}>
-        <div class="k-colorpicker-preset-color-wrapper k-colorpicker-alpha-bg"
+    <div class={`${k}-colorpicker-presets`} v-if={presets && presets.length}>
+        <div class={`${k}-colorpicker-preset-color-wrapper ${k}-colorpicker-alpha-bg`}
             v-for={presets}
             ev-click={linkEvent($value, setValue)}
         >
             <div style={{backgroundColor: $value}} 
-                class="k-colorpicker-preset-color"
+                class={`${k}-colorpicker-preset-color`}
             ></div>
         </div>
     </div>