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

package/components/grid/styles.ts

@@ -11,71 +11,70 @@ setDefault(() => {
     grid = deepDefaults(theme, {grid: defaults}).grid;
 });
 
-export function makeRowStyles() {
+export function makeRowStyles(k: string) {
     return css`
         position: relative;
         display: flex;
         flex-wrap: wrap;
         // justify
-        &.k-justify-start {
+        &.${k}-justify-start {
             justify-content: flex-start;
         }
-        &.k-justify-end {
+        &.${k}-justify-end {
             justify-content: flex-end;
         }
-        &.k-justify-center {
+        &.${k}-justify-center {
             justify-content: center;
         }
-        &.k-justify-between {
+        &.${k}-justify-between {
             justify-content: space-between;
         }
-        &.k-justify-around {
+        &.${k}-justify-around {
             justify-content: space-around;
         }
-        &.k-justify-evenly {
+        &.${k}-justify-evenly {
             justify-content: space-evenly;
         }
         // align
-        &.k-align-top {
+        &.${k}-align-top {
             align-items: flex-start;
         }
-        &.k-align-bottom {
+        &.${k}-align-bottom {
             align-items: flex-end;
         }
-        &.k-align-middle {
+        &.${k}-align-middle {
             align-items: center;
         }
-        &.k-align-stretch {
+        &.${k}-align-stretch {
             align-items: stretch;
         }
-        &.k-align-baseline {
+        &.${k}-align-baseline {
             align-items: baseline;
         }
     `;
 }
 
-const colsStyles = makeBreakpointsCols();
-export function makeColStyles() {
+export function makeColStyles(k: string) {
     return css`
         position: relative;
         width: 100%;
-        .k-col-wrapper {
+        .${k}-col-wrapper {
             height: 100%;
         }
-        ${colsStyles}
+        ${makeBreakpointsCols(k)}
     `;
 }
 
-function makeBreakpointsCols() {
+function makeBreakpointsCols(k: string) {
     const styles: string[] = [];
-    styles.push(makeCols(''));
+    styles.push(makeCols(k));
 
     for (let i = breakpoints.length - 1; i >= 0; i--) {
         const breakpoint = breakpoints[i];
         if (breakpoint === 'xs') continue;
 
         styles.push(`@media ${responsiveMap[breakpoint]} {`);
-        styles.push(makeCols(`-${breakpoint}`));
+        styles.push(makeCols(`${k}-${breakpoint}`));
         styles.push('}');
     }
 
@@ -87,19 +86,19 @@ function makeCols(prefix: string) {
     for (let i = 0; i < 24; i++) {
         const percentage = String((i / 24) * 100) + '%';
         colsStyles.push(`
-            &.k${prefix}-${i} {
+            &.${prefix}-${i} {
                 width: ${percentage};
             }
-            &.k${prefix}-offset-${i} {
+            &.${prefix}-offset-${i} {
                 margin-left: ${percentage};
             }
-            &.k${prefix}-order-${i} {
+            &.${prefix}-order-${i} {
                 order: ${i};
             }
-            &.k${prefix}-push-${i} {
+            &.${prefix}-push-${i} {
                 left: ${percentage};
             }
-            &.k${prefix}-pull-${i} {
+            &.${prefix}-pull-${i} {
                 right: ${percentage};
             }
         `);

package/components/grid/useBreakpoints.ts

@@ -24,13 +24,13 @@ export function useBreakpoints() {
         });
     });
 
-    function getBreakpointsClassName() {
+    function getBreakpointsClassName(k: string) {
         const classNameObj: Record<string, true> = {};
         breakpoints.forEach(breakpoint => {
             const value = breakpointsValue[breakpoint];
             if (isNullOrUndefined(value)) return;
 
-            const prefix = breakpoint === 'xs' ? 'k-' : `k-${breakpoint}-`;
+            const prefix = breakpoint === 'xs' ? `${k}-` : `${k}-${breakpoint}-`;
             if (!isNullOrUndefined(value.span)) {
                 classNameObj[`${prefix}${value.span}`]  = true;
             }

package/components/icon/demos/icons.md

@@ -13,10 +13,10 @@ import {Icon, Input} from 'kpc';
     <div class="icons">
         <div class="icon" v-for={this.filter()}>
             <Icon 
-                class={'k-icon-' + $value[0]}
+                class={this.config.k + '-icon-' + $value[0]}
                 size="large"
             />
-            <div>{'k-icon-' + $value[0]}</div>
+            <div>{this.config.k + '-icon-' + $value[0]}</div>
         </div>
     </div>
 </div>
@@ -35,6 +35,7 @@ import {Icon, Input} from 'kpc';
 ```
 
 ```ts
+import { useConfigContext } from 'kpc';
 interface Props {
     keywords?: string
     fonts: string[][]
@@ -137,6 +138,8 @@ export default class extends Component<Props> {
         } as Props
     }
 
+    private config = useConfigContext();
+
     init() {
         const fonts = this.get('fonts');
         const map: Record<string, boolean> = {};
@@ -145,7 +148,7 @@ export default class extends Component<Props> {
                 console.log('duplicated', font);
             }
             map[font] = true;
-        })
+        });
     }
 
     filter() {

package/components/icon/index.ts

@@ -2,6 +2,7 @@ import {Component, TypeDefs} from 'intact';
 import template from './index.vdt';
 import {colors, sizes} from './styles';
 import {Sizes} from '../types';
+import { useConfigContext } from '../config';
 
 export interface IconProps {
     size?:  Sizes | string | number
@@ -32,4 +33,5 @@ export class Icon extends Component<IconProps> {
     static defaults = defaults;
 
     private colors = defaultColors;
+    private config = useConfigContext();
 }

package/components/icon/index.vdt

@@ -5,28 +5,29 @@ const {
     className, style, size, color,
     rotate, hoverable, children, disabled
 } = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-icon': true,
-    'k-rotate': rotate,
-    'k-hoverable': !disabled && hoverable,
-    'k-disabled': disabled,
+    [`${k}-icon`]: true,
+    [`${k}-rotate`]: rotate,
+    [`${k}-hoverable`]: !disabled && hoverable,
+    [`${k}-disabled`]: disabled,
     [className]: className,
 };
 const _style = {};
 if (/^\d+$/.test(size)) {
     _style.fontSize = size + 'px'; 
 } else if (size !== 'default') {
-    classNameObj[`k-${size}`] = true;
+    classNameObj[`${k}-${size}`] = true;
 }
 if (this.colors.indexOf(color) > -1) {
-    classNameObj[`k-${color}`] = color !== 'default';
-    classNameObj[makeStyles()] = true;
+    classNameObj[`${k}-${color}`] = color !== 'default';
+    classNameObj[makeStyles(k)] = true;
 } else if (color) {
     _style.color = color;
-    classNameObj[makeStyles(color)] = true;
+    classNameObj[makeStyles(k, color)] = true;
 } else {
-    classNameObj[makeStyles()] = true;
+    classNameObj[makeStyles(k)] = true;
 }
 
 <i class={classNameObj}

package/components/icon/styles.ts

@@ -1,10 +1,8 @@
 import {css, cx} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette}  from '../../styles/utils';
-import {IconProps} from './index';
-import {Sizes, Colors} from '../types';
 import {rotate} from '../../styles/keyframes';
-import '../../styles/fonts/iconfont';
+import {makeIconStyles} from '../../styles/fonts/iconfont';
 import '../../styles/fonts/ionicons';
 import '../../styles/global';
 
@@ -28,7 +26,10 @@ setDefault(() => {
 export const colors = ['primary', 'warning', 'danger', 'success'] as const;
 export const sizes = ['large', 'small', 'mini'] as const;
 
-export default function makeStyles(color?: string) {
+export default function makeStyles(k: string, color?: string) {
+    // create the global icon styles
+    makeIconStyles(k);
+
     return css`
         color: ${icon.color};
         font-size: ${icon.fontSize.default};
@@ -37,7 +38,7 @@ export default function makeStyles(color?: string) {
         ${sizes.map(size => {
             const fontSize = icon.fontSize[size];
             return css`
-                &.k-${size} {
+                &.${k}-${size} {
                     font-size: ${fontSize};
                 }
             `
@@ -45,15 +46,15 @@ export default function makeStyles(color?: string) {
         ${colors.map(color => {
             const _color = theme.color[color];
             return css`
-                &.k-${color} {
+                &.${k}-${color} {
                     color: ${_color};
-                    &.k-hoverable:hover {
+                    &.${k}-hoverable:hover {
                         color: ${palette(_color, -2)};
                     }
                 }
             ` 
         })}
-        &.k-rotate:before {
+        &.${k}-rotate:before {
             animation: ${rotate} 1s infinite linear;
         }
         &:before {
@@ -67,20 +68,20 @@ export default function makeStyles(color?: string) {
         }
 
         // hoverable
-        &.k-hoverable {
+        &.${k}-hoverable {
             cursor: pointer;
             transition: color ${icon.transition};
             &:hover {
                 color: ${theme.color.primary};
             }
-            ${color && `
+            ${color && css`
                 &:hover {
                     color: ${palette(color, -2)} !important;
                 }
             `}
         }
         // disabled
-        &.k-disabled {
+        &.${k}-disabled {
             cursor: not-allowed;
             color: ${icon.disabledColor} !important;
         }

package/components/input/index.ts

@@ -8,6 +8,8 @@ import {CommonInputHTMLAttributes, Events} from '../types';
 import {useAutoRows} from './useAutoRows';
 import { useShowPassword } from './useShowPassword';
 import { useFocus } from './useFocus';
+import { useConfigContext } from '../config';
+
 export * from './search';
 
 export type HTMLInputTypes =
@@ -141,6 +143,7 @@ export class Input<V extends Value = Value> extends Component<InputProps<V>, Inp
     private autoRows = useAutoRows(this.inputRef);
     private showPassword = useShowPassword();
     private focusHook = useFocus();
+    private config = useConfigContext();
 
     focus() {
         this.inputRef.value!.focus();

package/components/input/index.vdt

@@ -26,24 +26,25 @@ const {
 const { isFocus, focusInputOnClick }= this.focusHook;
 
 const isNotAutoRows = isStringOrNumber(rows) && rows !== 'auto';
+const { k } = this.config;
 
 const classNameObj = {
-    'k-input': true,
-    [`k-${size}`]: size !== 'default',
-    'k-group': $blocks.prepend || $blocks.append,
-    'k-disabled': disabled,
-    'k-clearable': clearable,
-    'k-auto-width': autoWidth,
-    'k-fluid': fluid,
-    'k-stack-clear': stackClearIcon,
-    'k-inline': inline,
-    'k-flat': flat,
-    'k-type-textarea': type === 'textarea',
-    'k-focus': isFocus.value,
-    [`k-resize-${resize}`]: type === 'textarea' && isNotAutoRows,
-    [`k-resize-none`]: type === 'textarea' && !isNotAutoRows,
+    [`${k}-input`]: true,
+    [`${k}-${size}`]: size !== 'default',
+    [`${k}-group`]: $blocks.prepend || $blocks.append,
+    [`${k}-disabled`]: disabled,
+    [`${k}-clearable`]: clearable,
+    [`${k}-auto-width`]: autoWidth,
+    [`${k}-fluid`]: fluid,
+    [`${k}-stack-clear`]: stackClearIcon,
+    [`${k}-inline`]: inline,
+    [`${k}-flat`]: flat,
+    [`${k}-type-textarea`]: type === 'textarea',
+    [`${k}-focus`]: isFocus.value,
+    [`${k}-resize-${resize}`]: type === 'textarea' && isNotAutoRows,
+    [`${k}-resize-none`]: type === 'textarea' && !isNotAutoRows,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 }
 
 const {
@@ -90,58 +91,58 @@ if (hasInputValue) {
             // so we handle this block manually
             const children = $blocks.prepend(noop);
             <div class={{
-                "k-input-prepend": true, 
-                "k-input-padding": isTextBlock(children)
+                [`${k}-input-prepend`]: true, 
+                [`${k}-input-padding`]: isTextBlock(children)
         }}>{children}</div>
         }
     }}
     <ErrorContext.Consumer defaultValue={false}>
         {isInvalid => {
             return <Wave disabled={waveDisabled || disabled || isInvalid} inset="-2px">
-                <div class="k-input-wrapper" ev-click={focusInputOnClick}>
-                    <div class="k-input-prefix" v-if={$blocks.prefix}>
+                <div class={`${k}-input-wrapper`} ev-click={focusInputOnClick}>
+                    <div class={`${k}-input-prefix`} v-if={$blocks.prefix}>
                         <b:prefix />
                     </div>
                     <input v-if={type !== 'textarea'}
                         {...inputProps}
-                        class="k-input-inner" 
+                        class={`${k}-input-inner`} 
                         type={showPasswordType.value}
                     />
                     <textarea v-else 
                         {...inputProps}
-                        class="k-input-inner k-textarea"
+                        class={`${k}-input-inner ${k}-textarea`}
                         rows={isNotAutoRows ? rows : 1}
                         style={height.value ? addStyle(inputProps.style, { height: height.value + 'px' }) : inputProps.style}
                     ></textarea>
-                    <div class="k-input-suffix"
+                    <div class={`${k}-input-suffix`}
                         v-if={$blocks.suffix || clearable && !disabled || showPasswordIcon.value || showCount}
                         ev-click={stopPropagation}
                     >
                         <template v-if={showPasswordIcon.value}>
                             <Icon hoverable
                                 class={{
-                                    "k-input-show-password": true,
-                                    "k-icon-hidden": !isShowPassword.value,
-                                    "k-icon-visible": isShowPassword.value,
+                                    [`${k}-input-show-password`]: true,
+                                    [`${k}-icon-hidden`]: !isShowPassword.value,
+                                    [`${k}-icon-visible`]: isShowPassword.value,
                                 }}
                                 ev-click={toggleShowPassword}
                             />{' '}
                         </template>
                         <Icon v-if={clearable && !disabled}
                             class={{
-                                "k-input-clear k-icon-error-fill": true, 
-                                "k-input-show": hasValue,
+                                [`${k}-input-clear ${k}-icon-error-fill`]: true, 
+                                [`${k}-input-show`]: hasValue,
                             }}
                             ev-click={this.clear}
                             hoverable
                         />{' '}
-                        <span class="k-input-count" v-if={showCount}>
+                        <span class={`${k}-input-count`} v-if={showCount}>
                             {hasValue ? value.length : 0}
                             <span v-if={maxlength}> / {maxlength}</span>
                         </span>
                         <b:suffix />
                     </div>
-                    <div class="k-input-fake" v-if={autoWidth}>
+                    <div class={`${k}-input-fake`} v-if={autoWidth}>
                         <span ref={fakeRef}>{!hasValue ? placeholder : inputValue}</span>
                     </div>
                 </div>
@@ -152,8 +153,8 @@ if (hasInputValue) {
         if ($blocks.append) {
             const children = $blocks.append(noop);
             <div class={{
-                "k-input-append": true, 
-                "k-input-padding": isTextBlock(children)
+                [`${k}-input-append`]: true, 
+                [`${k}-input-padding`]: isTextBlock(children)
             }}>{children}</div> 
         }
     }}

package/components/input/search.ts

@@ -4,6 +4,7 @@ import {Sizes, sizes} from '../../styles/utils';
 import {_$} from '../../i18n';
 import {bind} from '../utils';
 import {useDocumentClick} from '../../hooks/useDocumentClick';
+import { useConfigContext } from '../config';
 
 export interface SearchProps {
     placeholder?: string
@@ -40,6 +41,7 @@ export class Search extends Component<SearchProps, SearchEvents> {
 
     private elementRef = createRef<HTMLDivElement>();
     private inputRef = createRef<HTMLInputElement>();
+    private config = useConfigContext();
 
     init() {
         useDocumentClick(this.elementRef, this.hide.bind(this));

package/components/input/search.vdt

@@ -9,13 +9,14 @@ const {
     type, size, open, 
 } = this.get();
 
+const { k } = this.config;
 const classNameObj = {
-    'k-search': true,
+    [`${k}-search`]: true,
     [className]: className,
-    'k-open': open,
-    'k-hide': !open,
-    [`k-${type}`]: type,
-    [makeSearchStyles()]: true,
+    [`${k}-open`]: open,
+    [`${k}-hide`]: !open,
+    [`${k}-${type}`]: type,
+    [makeSearchStyles(k)]: true,
 };
 
 <form {...getRestProps(this)} 
@@ -33,6 +34,6 @@ const classNameObj = {
         waveDisabled={type !== 'default'}
     />
     <Button icon type="none" ev-click={this.onClickBtn} size={size}>
-        <Icon class="k-icon-search k-search-icon" />
+        <Icon class={`${k}-icon-search ${k}-search-icon`} />
     </Button>
 </form>