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

package/components/affix/index.ts

@@ -1,6 +1,7 @@
 import {Component, TypeDefs, createRef} from 'intact';
 import template from './index.vdt';
 import {useStyle} from './useStyle';
+import { useConfigContext } from '../config';
 
 export interface AffixProps {
     top?: number
@@ -41,4 +42,5 @@ export class Affix extends Component<AffixProps, AffixEvents> {
 
     private elementRef = createRef<HTMLElement>();
     private style = useStyle(this.elementRef);
+    private config = useConfigContext();
 }

package/components/affix/index.vdt

@@ -3,12 +3,13 @@ import {makeStyles} from './styles';
 
 const {children, className, style} = this.get();
 const {style: _style, containerStyle} = this.style;
+const { cls, k } = this.config;
 
 const classNameObj = {
-    'k-affix': true,
-    'k-fixed': _style.value,
+    [`${k}-affix`]: true,
+    [`${k}-fixed`]: _style.value,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 <div class={classNameObj}
@@ -16,7 +17,7 @@ const classNameObj = {
     style={addStyle(style, containerStyle.value)}
     ref={this.elementRef}
 >
-    <div style={_style.value} class="k-affix-wrapper">
+    <div style={_style.value} class={cls('affix-wrapper')}>
         {children}
     </div>
 </div>

package/components/affix/styles.ts

@@ -12,7 +12,7 @@ setDefault(() => {
     affix = deepDefaults(theme, {affix: defaults}).affix;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         position: relative;
         z-index: ${affix.zIndex};

package/components/badge/index.ts

@@ -1,5 +1,6 @@
 import {Component, TypeDefs} from 'intact';
 import template from './index.vdt';
+import { useConfigContext } from '../config';
 
 export interface BadgeProps {
     text?: string | number
@@ -16,5 +17,7 @@ const typeDefs: Required<TypeDefs<BadgeProps>> = {
 export class Badge extends Component<BadgeProps> {
     static template = template;
     static typeDefs = typeDefs;
+
+    private config = useConfigContext();
 }
 

package/components/badge/index.vdt

@@ -9,15 +9,17 @@ if (typeof text === 'number' && max && text > max) {
     text = `${max}+`;
 }
 
+const { cls, k } = this.config;
+
 const classNameObj = {
-    'k-badge': true,
+    [`${k}-badge`]: true,
     [className]: className,
-    'k-has-text': text != null,
-    'k-alone': !children,
-    [makeStyles()]: true,
+    [`${k}-has-text`]: text != null,
+    [`${k}-alone`]: !children,
+    [makeStyles(k)]: true,
 };
 
 <div {...getRestProps(this)} class={classNameObj}>
     {children}
-    <sup class="k-badge-text" v-if={!disabled}>{text}</sup>
+    <sup class={`${k}-badge-text`} v-if={!disabled}>{text}</sup>
 </div>

package/components/badge/styles.ts

@@ -19,12 +19,12 @@ setDefault(() => {
     badge = deepDefaults(theme, {badge: defaults}).badge;
 });
 
-export default function makeStyles() {
+export default function makeStyles(k: string) {
     return css`
         display: inline-block;
         position: relative;
         vertical-align: middle;
-        > .k-badge-text {
+        > .${k}-badge-text {
             display: inline-block;
             position: absolute;
             width: ${badge.width};
@@ -39,8 +39,8 @@ export default function makeStyles() {
         }
             
         // has-text
-        &.k-has-text
-            > .k-badge-text {
+        &.${k}-has-text
+            > .${k}-badge-text {
                 width: auto;
                 height: ${badge.textHeight};
                 line-height: ${badge.textHeight};
@@ -50,8 +50,8 @@ export default function makeStyles() {
             }
                 
         // alone
-        &.k-alone
-            > .k-badge-text {
+        &.${k}-alone
+            > .${k}-badge-text {
                 position: static;
                 transform: none;
             }            

package/components/breadcrumb/index.ts

@@ -1,5 +1,7 @@
 import {Component, TypeDefs} from 'intact';
 import template from './index.vdt';
+import { useConfigContext } from '../config';
+
 export * from './item';
 
 export interface BreadcrumbProps {
@@ -24,4 +26,6 @@ export class Breadcrumb extends Component<BreadcrumbProps, BreadcrumbEvents, Bre
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
+
+    private config = useConfigContext();
 }

package/components/breadcrumb/index.vdt

@@ -3,15 +3,16 @@ import {BreadcrumbItem} from './item';
 import makeStyles from './styles';
 
 const {children, separator, className} = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-breadcrumb': true,
+    [`${k}-breadcrumb`]: true,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 const separatorVNode = (
-    <span class="k-breadcrumb-separator">
+    <span class={`${k}-breadcrumb-separator`}>
         <b:separator>{separator}</b:separator>
     </span>
 );

package/components/breadcrumb/item.ts

@@ -2,6 +2,7 @@ import {Component, TypeDefs, VNode} from 'intact';
 import {bind} from '../utils';
 import template from './item.vdt';
 import {useRouter, navigate} from '../../hooks/useRouter';
+import { useConfigContext } from '../config';
 
 export interface BreadcrumbItemProps {
     to?: string | object,
@@ -16,6 +17,7 @@ export class BreadcrumbItem extends Component<BreadcrumbItemProps> {
     static typeDefs = typeDefs;
 
     private router = useRouter();
+    private config = useConfigContext();
 
     @bind
     private onClick(): void  {

package/components/breadcrumb/item.vdt

@@ -1,12 +1,14 @@
 import {getRestProps} from '../utils';
 
 const {to, children, className} = this.get();
+const { k } = this.config;
+
 const classNameObj = {
-    'k-breadcrumb-item': true,
+    [`${k}-breadcrumb-item`]: true,
     [className]: className,
 };
 
 <div class={classNameObj} {...getRestProps(this)}>
-    <a v-if={to} ev-click={this.onClick} class="k-breadcrumb-link">{children}</a>
-    <span v-else class="k-breadcrumb-link">{children}</span>
+    <a v-if={to} ev-click={this.onClick} class={`${k}-breadcrumb-link`}>{children}</a>
+    <span v-else class={`${k}-breadcrumb-link`}>{children}</span>
 </div>

package/components/breadcrumb/styles.ts

@@ -17,29 +17,29 @@ setDefault(() => {
     breadcrumb = deepDefaults(theme, {breadcrumb: defaults}).breadcrumb;
 });
 
-export default function makeStyles() {
+export default function makeStyles(k: string) {
     return css`
         font-size: ${breadcrumb.fontSize};
         display: flex;
         align-items: center;
-        .k-breadcrumb-item {
-            &:last-of-type .k-breadcrumb-link {
+        .${k}-breadcrumb-item {
+            &:last-of-type .${k}-breadcrumb-link {
                 font-weight: ${breadcrumb.activeFontWeight};
                 color: ${breadcrumb.activeColor};
             }
         }
-        .k-breadcrumb-link,
-        .k-breadcrumb-link a {
+        .${k}-breadcrumb-link,
+        .${k}-breadcrumb-link a {
             color: ${breadcrumb.color};
         }
-        a.k-breadcrumb-link,
-        .k-breadcrumb-link a {
+        a.${k}-breadcrumb-link,
+        .${k}-breadcrumb-link a {
             cursor: pointer;
             &:hover {
                 color: ${breadcrumb.hoverColor};
             }
         }
-        .k-breadcrumb-separator {
+        .${k}-breadcrumb-separator {
             margin: 0 ${breadcrumb.gap};
         }
     `

package/components/button/group.ts

@@ -2,6 +2,7 @@ import {Component, provide, TypeDefs} from 'intact';
 import template from './group.vdt';
 import {toggleArray} from '../utils';
 import {BUTTON_GROUP} from './constants';
+import { useConfigContext } from '../config';
 
 export interface ButtonGroupProps {
     vertical?: boolean
@@ -28,6 +29,8 @@ export class ButtonGroup extends Component<ButtonGroupProps> {
     static typeDefs = typeDefs;
     static defaults = defaults;
 
+    private config = useConfigContext();
+
     init() {
         provide(BUTTON_GROUP, this); 
     }

package/components/button/group.vdt

@@ -2,14 +2,15 @@ import {getRestProps} from '../utils';
 import {makeButtonGroupStyles} from './styles';
 
 const {className, vertical, children, fluid, seperate} = this.get();
+const {k} = this.config;
 
 const classNameObj = {
-    'k-btns': true,
-    'k-vertical': vertical,
-    'k-fluid': fluid,
-    'k-seperate': seperate,
+    [`${k}-btns`]: true,
+    [`${k}-vertical`]: vertical,
+    [`${k}-fluid`]: fluid,
+    [`${k}-seperate`]: seperate,
     [className]: className,
-    [makeButtonGroupStyles()]: true,
+    [makeButtonGroupStyles(k)]: true,
 };
 
 <div class={classNameObj} {...getRestProps(this)}>{children}</div>

package/components/button/index.ts

@@ -4,6 +4,7 @@ import {ButtonGroup} from './group';
 import {bind} from '../utils';
 import {Sizes, Colors} from '../types';
 import {BUTTON_GROUP} from './constants';
+import { useConfigContext } from '../config';
 export * from './group';
 
 interface ButtonHTMLAttributes {
@@ -73,6 +74,7 @@ export class Button extends Component<ButtonProps, ButtonEvents> {
 
     private buttonGroup = inject<ButtonGroup | null>(BUTTON_GROUP, null);
     private elementRef = createRef<HTMLButtonElement>();
+    private config = useConfigContext();
 
     showLoading() {
         this.set('loading', true);

package/components/button/index.vdt

@@ -12,6 +12,8 @@ let {
 } = this.get();
 
 const checked = this.isChecked();
+if (!this.config) debugger;
+const { cls, k } = this.config;
 
 const isIcon = child => (
     child.tag === Icon ||
@@ -38,22 +40,22 @@ if (!icon && Array.isArray(children)) {
 }
 
 const classNameObj = {
-    'k-btn': true,
-    [`k-${type}`]: type !== 'default',
-    [`k-${size}`]: size !== 'default',
-    'k-btn-icon': icon,
+    [cls('btn')]: true,
+    [cls(type)]: type !== 'default',
+    [cls(size)]: size !== 'default',
+    [cls(`btn-icon`)]: icon,
     [className]: className, 
-    'k-circle': circle,
-    'k-loading': loading,
-    'k-fluid': fluid,
-    'k-active': checked,
-    'k-disabled': disabled || loading,
-    'k-ghost': ghost,
-    [makeButtonStyles({iconSide})]: true,
+    [cls('circle')]: circle,
+    [cls('loading')]: loading,
+    [cls('fluid')]: fluid,
+    [cls('active')]: checked,
+    [cls('disabled')]: disabled || loading,
+    [cls('ghost')]: ghost,
+    [makeButtonStyles(k, iconSide)]: true,
 };
 
 const loadingIcon = (
-    <Icon class="ion-load-c k-icon-loading" 
+    <Icon class={`ion-load-c ${k}-icon-loading`}
         size={size /*loadingSizeMap[size]*/}
         key="k-loading"
         rotate
@@ -88,7 +90,7 @@ const waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderCo
             children 
         }
         <input type={checkType} v-if={isCheckType}
-            class="k-button-input"
+            class={`${k}-button-input`}
             name={name} 
             checked={checked}
             tabindex="-1"

package/components/button/styles.ts

@@ -155,7 +155,7 @@ setDefault(() => {
 
 export {button};
 
-export function makeButtonStyles({iconSide}: {iconSide?: string}) {
+export function makeButtonStyles(k: string, iconSide?: string) {
     const {secondary, link} = button;
 
     return cx(
@@ -177,7 +177,7 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
             white-space: nowrap;
             transition: all ${button.transition};
             line-height: ${button.lineHeight};
-            .k-icon {
+            .${k}-icon {
                 color: inherit;
             }
             &:hover,
@@ -189,7 +189,7 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                 background: ${palette(theme.color.primary, -4)};
             }
 
-            .k-button-input {
+            .${k}-button-input {
                 position: absolute;
                 opacity: 0;
                 width: 0;
@@ -201,7 +201,7 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                 const typeStyles = button[type];
 
                 return css`
-                    &.k-${type} {
+                    &.${k}-${type} {
                         background: ${typeStyles.bgColor};
                         color: ${typeStyles.color};
                         border-color: ${typeStyles.borderColor};
@@ -220,7 +220,7 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
             })}
 
             // secondary type
-            &.k-secondary {
+            &.${k}-secondary {
                 color: ${secondary.color};
                 border-color: ${secondary.borderColor};
                 &:hover,
@@ -232,7 +232,7 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                 }
             }
 
-            &.k-link {
+            &.${k}-link {
                 color: ${link.color};
                 &:hover {
                     color: ${link.hoverColor};
@@ -240,26 +240,26 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                 }
             }
 
-            &.k-none,
-            &.k-link,
-            &.k-flat {
+            &.${k}-none,
+            &.${k}-link,
+            &.${k}-flat {
                 background: transparent;
                 &, &:hover {
                     border: none;
                 }
-                &.k-active {
+                &.${k}-active {
                     color: ${theme.color.primary};
                 }
             }
-            &.k-none:hover {
+            &.${k}-none:hover {
                 background: ${button.none.hoverBgColor};
             }
-            &.k-flat {
+            &.${k}-flat {
                 background: ${button.none.hoverBgColor};
             }
 
             // disabled
-            &.k-disabled {
+            &.${k}-disabled {
                 &, &:hover {
                     color: ${button.disabled.color};
                     background: ${button.disabled.bgColor};
@@ -267,8 +267,8 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                     cursor: not-allowed
                 }
             }
-            &.k-none.k-disabled,
-            &.k-link.k-disabled {
+            &.${k}-none.${k}-disabled,
+            &.${k}-link.${k}-disabled {
                 &, &:hover {
                     background: transparent;
                 }
@@ -278,11 +278,11 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                 const styles = button[size];
 
                 return css`
-                    &.k-${size} {
+                    &.${k}-${size} {
                         font-size: ${styles.fontSize};
                         height: ${styles.height};
                         padding: ${styles.padding};
-                        &.k-btn-icon {
+                        &.${k}-btn-icon {
                             width: ${styles.height};
                         }
                     }
@@ -290,39 +290,39 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
             })}
 
             // icon
-            &.k-btn-icon {
+            &.${k}-btn-icon {
                 width: ${button.height};
                 padding: 0;
-                .k-icon {
+                .${k}-icon {
                     margin: 0
                 }
             }
 
             // fluid
-            &.k-fluid {
+            &.${k}-fluid {
                 width: 100%;
                 padding: 0;
             }
 
             // shape
-            &.k-circle {
+            &.${k}-circle {
                 border-radius: calc(${button.large.height} / 2);
             }
 
             // loading
-            &.k-loading {
+            &.${k}-loading {
                 &, &:hover {
                     background: ${palette(button.bgColor, -2)};
                     color: ${palette(button.color, -2)};
                     border-color: ${palette(button.borderColor, -2)};
                 }
-                .k-icon:not(.k-icon-loading) {
+                .${k}-icon:not(.${k}-icon-loading) {
                     display: none;
                 }
                 ${types.map(type => {
                     const styles = button[type];
                     return css`
-                        &.k-${type} {
+                        &.${k}-${type} {
                             &, &:hover {
                                 background: ${palette(styles.bgColor, -2)};
                                 color: ${palette(styles.color, -2)};
@@ -341,7 +341,7 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
             }
 
             // ghost
-            &.k-ghost {
+            &.${k}-ghost {
                 background: transparent;
                 color: ${button.ghost.color};
                 border-color: ${button.ghost.borderColor};
@@ -360,7 +360,7 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                 ${types.map(type => {
                     const {ghostColor, borderColor} = button[type];
                     return css`
-                        &.k-${type} {
+                        &.${k}-${type} {
                             color: ${ghostColor};
                             border-color: ${borderColor};
                             &:hover {
@@ -375,7 +375,7 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                     `
                 })}
                 // disabled
-                &.k-disabled {
+                &.${k}-disabled {
                     &, &:hover {
                         color: ${button.disabled.color};
                         border-color: ${button.disabled.ghostBorderColor};
@@ -387,23 +387,23 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
 
         // dynamic styles
         css`
-            .k-icon {
+            .${k}-icon {
                 ${iconSide === 'right' ? 
                     `margin-left: ${button.icon.gap};` :
                     `margin-right: ${button.icon.gap};`
                 }
             } 
 
-            ${!iconSide && `
-                &.k-loading {
-                    &:not(.k-btn-icon) {
+            ${!iconSide && css`
+                &.${k}-loading {
+                    &:not(.${k}-btn-icon) {
                         padding-left: calc(${getLeft(button.padding)} + 1em);
-                        .k-icon-loading {
+                        .${k}-icon-loading {
                             margin-left: -1em;
                         }
                         ${sizes.map(size => {
                             return css`
-                                &.k-${size} {
+                                &.${k}-${size} {
                                     padding-left: calc(${getLeft(button[size].padding)} + 1em);
                                 }
                             `
@@ -415,31 +415,31 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
     );
 }
 
-export function makeButtonGroupStyles() {
+export function makeButtonGroupStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
         flex-wrap: wrap;
         vertical-align: middle;
-        .k-btn {
+        .${k}-btn {
             margin: 0;
             vertical-align: middle;
             &:hover,
             &:focus,
-            &.k-active {
+            &.${k}-active {
                 z-index: 1;
                 position: relative;
             }
         }
 
         // fluid
-        &.k-fluid {
+        &.${k}-fluid {
             width: 100%;
         }
 
         // horizontal
-        &:not(.k-vertical) {
-            > .k-btn {
+        &:not(.${k}-vertical) {
+            > .${k}-btn {
                 &:not(:first-child) {
                     margin-left: -1px;
                     &:not(:last-child) {
@@ -458,28 +458,28 @@ export function makeButtonGroupStyles() {
                     if (type === 'active') return;
                     const {borderColor} = button.group[type];
                     return css`
-                        &.k-${type}:not(:first-child) {
+                        &.${k}-${type}:not(:first-child) {
                             border-left-color: ${borderColor};
                         }
-                        &.k-${type}:not(:last-child) {
+                        &.${k}-${type}:not(:last-child) {
                             border-right-color: ${borderColor};
                         }
                     `;
                 })}
             }
-            &.k-fluid {
+            &.${k}-fluid {
                 display: flex;
-                > .k-btn {
+                > .${k}-btn {
                     flex: 1;
                 }
             }
         }
             
         // vertical
-        &.k-vertical {
+        &.${k}-vertical {
             flex-direction: column;
-            > .k-btn {
-                &:not(.k-btn-icon) {
+            > .${k}-btn {
+                &:not(.${k}-btn-icon) {
                     width: 100%;
                 }
                 &:not(:first-child) {
@@ -500,10 +500,10 @@ export function makeButtonGroupStyles() {
                     if (type === 'active') return;
                     const {borderColor} = button.group[type];
                     return css`
-                        &.k-${type}:not(:first-child) {
+                        &.${k}-${type}:not(:first-child) {
                             border-top-color: ${borderColor};
                         }
-                        &.k-${type}:not(:last-child) {
+                        &.${k}-${type}:not(:last-child) {
                             border-bottom-color: ${borderColor};
                         }
                     `;
@@ -512,9 +512,9 @@ export function makeButtonGroupStyles() {
         }
 
         // seperate
-        &.k-seperate {
+        &.${k}-seperate {
             gap: 8px;
-            > .k-btn {
+            > .${k}-btn {
                 border-radius: ${button.borderRadius} !important;
             }
         }

package/components/card/column.ts

@@ -1,5 +1,6 @@
 import {Component, TypeDefs} from 'intact';
 import template from './column.vdt';
+import { useConfigContext } from '../config';
 
 export interface CardColumnProps {
     width?: string
@@ -14,5 +15,7 @@ const typeDefs: Required<TypeDefs<CardColumnProps>> = {
 export class CardColumn extends Component<CardColumnProps> {
     static template = template;
     static typeDefs = typeDefs;
+
+    private config = useConfigContext();
 }