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

package/components/input/styles.ts

@@ -69,13 +69,13 @@ setDefault(() => {
     input = deepDefaults(theme, {input: defaults}).input;
 })
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         display: inline-block;
         width: ${input.width};
         color: ${input.color};
         vertical-align: middle;
-        .k-input-wrapper {
+        .${k}-input-wrapper {
             display: inline-flex;
             align-items: center;
             width: 100%;
@@ -89,11 +89,11 @@ export function makeStyles() {
                 z-index: 1;
             }
         }
-        &.k-focus .k-input-wrapper {
+        &.${k}-focus .${k}-input-wrapper {
             border: ${input.focusBorder};
             z-index: 1;
         }
-        .k-input-inner {
+        .${k}-input-inner {
             flex: 1;
             outline: none;
             color: inherit;
@@ -108,136 +108,136 @@ export function makeStyles() {
         }
 
         // fluid
-        &.k-fluid {
+        &.${k}-fluid {
             width: 100%;
         }
 
         // prefix & suffix
-        .k-input-prefix,
-        .k-input-suffix {
+        .${k}-input-prefix,
+        .${k}-input-suffix {
             display: flex;
             align-items: center;
             gap: ${input.clearIconGap};
             color: ${theme.color.lightBlack};
             position: relative;
         }
-        .k-input-prefix {
+        .${k}-input-prefix {
             margin-right: ${input.clearIconGap};
         }
-        .k-input-suffix {
+        .${k}-input-suffix {
             margin-left: ${input.clearIconGap};
         }
 
         // clearable
-        .k-input-clear {
+        .${k}-input-clear {
             opacity: 0;
             transition: opacity ${input.transition};
             pointer-events: none;
             color: ${input.clearIconColor};
         }
-        &:hover .k-input-clear.k-input-show {
+        &:hover .${k}-input-clear.${k}-input-show {
             opacity: 1;
             pointer-events: all;
         }
 
         // show password
-        .k-input-show-password {
+        .${k}-input-show-password {
             color: ${input.clearIconColor};
         }
 
         // stack clear icon
-        &.k-stack-clear {
-            .k-input-clear {
+        &.${k}-stack-clear {
+            .${k}-input-clear {
                 position: absolute;
                 z-index: 1;
                 right: 0;
-                &.k-input-show + * {
+                &.${k}-input-show + * {
                     transition: opacity ${input.transition};
                 }
             }
             &:hover {
-                .k-input-clear.k-input-show + * {
+                .${k}-input-clear.${k}-input-show + * {
                     opacity: 0;
                 }
             }
         }
 
         // group
-        &.k-group {
+        &.${k}-group {
             display: inline-flex;
-            .k-input-wrapper {
+            .${k}-input-wrapper {
                 border-radius: 0;
             }
-            .k-input-wrapper:first-child {
+            .${k}-input-wrapper:first-child {
                 border-radius: ${input.borderRadius} 0 0 ${input.borderRadius};
             }
-            .k-input-wrapper:last-child {
+            .${k}-input-wrapper:last-child {
                 border-radius: 0 ${input.borderRadius} ${input.borderRadius} 0;
             }
         }
-        .k-input-prepend,
-        .k-input-append {
+        .${k}-input-prepend,
+        .${k}-input-append {
             display: inline-flex;
             align-items: center;
             background-color: ${input.groupBgColor};
             border: ${input.border};
             white-space: nowrap;
-            .k-btn {
+            .${k}-btn {
                 margin: -1px;
                 border: none;
-                &.k-none:hover {
+                &.${k}-none:hover {
                     background: transparent;
                 }
             }
-            .k-select {
+            .${k}-select {
                 margin: -1px;
                 text-align: left;
             }
         }
-        .k-input-prepend {
+        .${k}-input-prepend {
             &,
-            .k-btn,
-            .k-select {
+            .${k}-btn,
+            .${k}-select {
                 z-index: 1;
                 border-radius: ${input.borderRadius} 0 0 ${input.borderRadius};
             }
         }
-        .k-input-append {
+        .${k}-input-append {
             &,
-            .k-btn,
-            .k-select {
+            .${k}-btn,
+            .${k}-select {
                 z-index: 1;
                 border-radius: 0 ${input.borderRadius} ${input.borderRadius} 0;
             }
         }
-        .k-input-padding {
+        .${k}-input-padding {
             padding: 0 ${input.groupPaddingGap};
         }
-        .k-input-prepend {
+        .${k}-input-prepend {
             border-right: none;
         }
-        .k-input-append  {
+        .${k}-input-append  {
             border-left: none;
         }
 
         // flat
-        &.k-flat {
+        &.${k}-flat {
             color: ${input.flat.color};
-            .k-input-wrapper {
+            .${k}-input-wrapper {
                 border: none;
                 background: ${input.flat.bgColor};
             }
         }
 
         // disabled
-        &.k-disabled {
+        &.${k}-disabled {
             color: ${input.disabledColor};
             cursor: not-allowed;
-            .k-input-wrapper {
+            .${k}-input-wrapper {
                 border-color: ${input.disabledBorderColor};
                 background: ${input.disabledBgColor};
             }
-            .k-input-inner {
+            .${k}-input-inner {
                 cursor: not-allowed;
             }
         }
@@ -247,7 +247,7 @@ export function makeStyles() {
             const styles = input[size];
             const sizeClassName = css`
                 font-size: ${styles.fontSize};
-                .k-input-wrapper {
+                .${k}-input-wrapper {
                     height: ${styles.height};
                     padding: 0 ${styles.paddingGap};
                 }
@@ -255,15 +255,15 @@ export function makeStyles() {
             
             if (size === 'default') return sizeClassName;
             return css`
-                &.k-${size} {
+                &.${k}-${size} {
                     ${sizeClassName};
                 }
             `
         })}
 
         // inline
-        &.k-inline {
-            .k-input-wrapper {
+        &.${k}-inline {
+            .${k}-input-wrapper {
                 height: auto;
                 border: none;
                 border-radius: 0;
@@ -272,27 +272,27 @@ export function makeStyles() {
         }
 
         // textarea
-        &.k-type-textarea {
-            .k-input-wrapper {
+        &.${k}-type-textarea {
+            .${k}-input-wrapper {
                 display: inline-block;
                 padding: 0;
                 height: auto;
             }
-            .k-textarea {
+            .${k}-textarea {
                 width: 100%;
                 padding: ${input.textareaPadding};
                 line-height: 1.5;
                 vertical-align: top;
             }
-            .k-input-suffix {
+            .${k}-input-suffix {
                 margin: 0;
                 justify-content: flex-end;
             }
         }
         ${(Input.typeDefs.resize as string[]).map(type => {
             return css`
-                &.k-resize-${type} {
-                    .k-textarea {
+                &.${k}-resize-${type} {
+                    .${k}-textarea {
                         resize: ${type};
                     }
                 }
@@ -300,7 +300,7 @@ export function makeStyles() {
         })}
 
         // fake dom for get value's width
-        .k-input-fake {
+        .${k}-input-fake {
             left: 0;
             top: 0;
             right: 0;
@@ -310,50 +310,50 @@ export function makeStyles() {
             visibility: hidden;
             white-space: nowrap;
         }
-        &.k-auto-width {
+        &.${k}-auto-width {
             width: auto;
             max-width: 100%;
         }
 
         // count
-        .k-input-count {
+        .${k}-input-count {
             color: ${input.count.color};
         }
     `
 }
 
-export function makeSearchStyles() {
+export function makeSearchStyles(k: string) {
     return css`
         position: relative;
         display: inline-block;
-        .k-input {
+        .${k}-input {
             transition: width ${input.transition};
         }
-        .k-btn {
+        .${k}-btn {
             position: absolute;
             top: 0;
             right: 0;
             z-index: 1;
         }
-        &.k-default .k-btn:hover {
+        &.${k}-default .${k}-btn:hover {
             background: transparent;
         }
-        .k-input-suffix {
+        .${k}-input-suffix {
             margin-right: ${input.search.suffixMarginRight};
         }
 
         // hide
-        &.k-hide {
-            .k-input {
+        &.${k}-hide {
+            .${k}-input {
                 width: ${input.default.height};
             }
-            .k-input-inner {
+            .${k}-input-inner {
                 padding: 0 !important;
             }
             ${sizes.map(size => {
                 if (size == 'default') return;
                 return css`
-                    .k-input.k-${size} {
+                    .${k}-input.${k}-${size} {
                         width: ${input[size].height};
                     }
                 `
@@ -361,15 +361,15 @@ export function makeSearchStyles() {
         }
 
         // line
-        &.k-line {
-            .k-input-wrapper {
+        &.${k}-line {
+            .${k}-input-wrapper {
                 border-width: 0;
             }
-            &.k-open {
-                .k-input-wrapper {
+            &.${k}-open {
+                .${k}-input-wrapper {
                     border-bottom-width: 1px;
                 }
-                .k-btn:hover {
+                .${k}-btn:hover {
                     background: transparent;
                 }
             }

package/components/layout/aside.ts

@@ -5,6 +5,7 @@ import template from './aside.vdt';
 import {ROOT_LAYOUT, getStyle, defaultWidth} from './helpers';
 import type {Layout} from './layout';
 import {addStyle} from '../utils';
+import { useConfigContext } from '../config';
 
 export interface AsideProps { 
     collapse?: boolean
@@ -31,6 +32,7 @@ export class Aside extends Component<AsideProps> {
     static defaults = defaults;
 
     private rootLayout = inject<Layout>(ROOT_LAYOUT)!;
+    private config = useConfigContext();
 
     private getStyles() {
         const {fixed, width, collapse} = this.get();

package/components/layout/aside.vdt

@@ -7,26 +7,27 @@ const {
     className, children, collapse,
     fixed, theme,
 } = this.get();
+const { k } = this.config;
 
 const vNodes = mapChildren(children, vNode => {
     if (vNode.tag === Menu) {
         let vNodeClone = directClone(vNode);
         vNodeClone.props = {...vNode.props, collapse};
-        return <div class="k-layout-wrapper">{vNodeClone}</div>
+        return <div class={`${k}-layout-wrapper`}>{vNodeClone}</div>
     }
     return vNode
 });
 
 const classNameObj = {
-    'k-layout-aside': true,
-    'k-collapsed': collapse,
-    'k-fixed': fixed,
-    [`k-${theme}`]: true,
+    [`${k}-layout-aside`]: true,
+    [`${k}-collapsed`]: collapse,
+    [`${k}-fixed`]: fixed,
+    [`${k}-${theme}`]: true,
     [className]: className,
-    [makeAsideStyles()]: true,
+    [makeAsideStyles(k)]: true,
 };
 
 <div {...getRestProps(this)}
     class={classNameObj}
-    style={this.getStyles()}
+    style={this.getStyles(k)}
 >{vNodes}</div>

package/components/layout/body.ts

@@ -3,11 +3,13 @@ import template from './template.vdt';
 import {LAYOUT, getStyle, BODY} from './helpers';
 import type {Layout} from './layout';
 import {addStyle} from '../utils';
+import { useConfigContext } from '../config';
 
 export class Body extends Component {
     static template = template;
 
     private layout = inject<Layout>(LAYOUT)!;
+    private config = useConfigContext();
 
     init() {
         provide(BODY, this);
@@ -15,8 +17,9 @@ export class Body extends Component {
 
     private getClassNames() {
         const {className} = this.get();
+        const { k } = this.config;
         return {
-            'k-layout-body': true,
+            [`${k}-layout-body`]: true,
             [className as string]: className,
         };
     }

package/components/layout/footer.ts

@@ -1,13 +1,17 @@
 import {Component} from 'intact';
 import template from './template.vdt';
+import { useConfigContext } from '../config';
 
 export class Footer extends Component {
     static template = template;
 
+    private config = useConfigContext();
+
     private getClassNames() {
         const {className} = this.get();
+        const { k } = this.config;
         return {
-            'k-layout-footer': true,
+            [`${k}-layout-footer`]: true,
             [className as string]: className,
         };
     }

package/components/layout/header.ts

@@ -6,6 +6,7 @@ import {makeHeaderStyles, themes} from './styles';
 import type {MenuProps} from '../menu';
 import {defaultHeight, ROOT_LAYOUT, getStyle} from './helpers';
 import type {Layout} from './layout';
+import { useConfigContext } from '../config';
 
 export interface HeaderProps { 
     fixed?: boolean
@@ -36,17 +37,19 @@ export class Header extends Component<HeaderProps> {
     static defaults = defaults;
 
     private rootLayout = inject<Layout>(ROOT_LAYOUT)!;
+    private config = useConfigContext();
 
     private getClassNames() {
         const {className, fixed, theme, blur, boxShadow} = this.get();
+        const { k } = this.config;
         return {
-            'k-layout-header': true,
-            'k-fixed': fixed,
-            'k-blur': blur,
-            'k-box-shadow': boxShadow,
-            [`k-${theme!}`]: true,
+            [`${k}-layout-header`]: true,
+            [`${k}-fixed`]: fixed,
+            [`${k}-blur`]: blur,
+            [`${k}-box-shadow`]: boxShadow,
+            [`${k}-${theme!}`]: true,
             [className as string]: className,
-            [makeHeaderStyles()]: true,
+            [makeHeaderStyles(k)]: true,
         };
     }
 

package/components/layout/layout.ts

@@ -5,6 +5,7 @@ import {addStyle} from '../utils';
 import {ROOT_LAYOUT, LAYOUT, getStyle, BODY} from './helpers';
 import {useParse} from './useParse';
 import type { Body } from './body';
+import { useConfigContext } from '../config';
 
 export class Layout extends Component {
     static template = template;
@@ -12,6 +13,7 @@ export class Layout extends Component {
     public parse = useParse();
     public layout = inject<Layout | null>(LAYOUT, null);
     private body = inject<Body | null>(BODY, null);
+    private config = useConfigContext();
 
     init() {
         provide(LAYOUT, this);
@@ -23,10 +25,11 @@ export class Layout extends Component {
     private getClassNames() {
         const {className, children} = this.get();
         const {hasAside} = this.parse();
+        const { k } = this.config;
         return {
-            'k-layout': true,
-            [`k-has-aside`]: hasAside,
-            [makeLayoutStyles()]:  true,
+            [`${k}-layout`]: true,
+            [`${k}-has-aside`]: hasAside,
+            [makeLayoutStyles(k)]:  true,
             [className as string]: className,
         };
     }

package/components/layout/styles.ts

@@ -36,25 +36,25 @@ export function getCollapseWidth() {
     return layout.collapsedWidth;
 }
 
-export function makeLayoutStyles() {
+export function makeLayoutStyles(k: string) {
     return css`
         display: flex;
         flex-direction: column;
         flex: 1;
         transition: padding-left ${layout.transition};
-        &.k-has-aside {
+        &.${k}-has-aside {
             flex-direction: row;
         }
-        .k-layout-footer {
+        .${k}-layout-footer {
             padding: ${layout.footerPadding};
         }
-        .k-layout-body {
+        .${k}-layout-body {
             flex: 1;
         }
     `
 }
 
-export function makeHeaderStyles() {
+export function makeHeaderStyles(k: string) {
     return css`
         display: flex;
         align-items: center;
@@ -62,22 +62,22 @@ export function makeHeaderStyles() {
         background: ${layout.bgColor};
         left: 0;
         transition: left ${layout.transition};
-        &.k-fixed {
+        &.${k}-fixed {
             position: fixed;
             left: 0;
             right: 0;
             top: 0;
             z-index: ${theme.midZIndex + 1};
         }
-        > .k-menu {
+        > .${k}-menu {
             background: transparent !important;
         }
 
-        &.k-blur {
+        &.${k}-blur {
             backdrop-filter: blur(20px);
             background: ${setAlpha(layout.bgColor, 0.1)};
         }
-        &.k-box-shadow {
+        &.${k}-box-shadow {
             border-bottom: none !important;
             box-shadow: ${theme.boxShadow};
         }
@@ -86,11 +86,11 @@ export function makeHeaderStyles() {
             if (theme === 'dark') return;
             const styles = layout[theme];
             return css`
-                &.k-${theme} {
+                &.${k}-${theme} {
                     background: ${styles.bgColor};
                     color: ${styles.color};
                     border-bottom: ${styles.border};
-                    &.k-blur {
+                    &.${k}-blur {
                         background: ${setAlpha(styles.bgColor, 0.1)};
                     }
                 }
@@ -99,7 +99,7 @@ export function makeHeaderStyles() {
     `;
 }
 
-export function makeAsideStyles() {
+export function makeAsideStyles(k: string) {
     return css`
         transition: width ${layout.transition};
         display: flex;
@@ -110,14 +110,14 @@ export function makeAsideStyles() {
             if (theme === 'dark') return;
             const styles = layout[theme];
             return css`
-                &.k-${theme} {
+                &.${k}-${theme} {
                     background: ${styles.bgColor};
                     color: ${styles.color};
                     border-right: ${styles.border};
                 }
             `
         })}
-        &.k-fixed {
+        &.${k}-fixed {
             position: fixed;
             overflow: auto;
             left: 0;
@@ -125,7 +125,7 @@ export function makeAsideStyles() {
             bottom: 0;
             z-index: ${theme.midZIndex};
         }
-        .k-menu {
+        .${k}-menu {
             width: auto !important;
         }
     `

package/components/layout/template.vdt

@@ -1,8 +1,9 @@
 import {getRestProps} from '../utils';
 
 const {children, style} = this.get();
+const { k } = this.config;
 
 <div class={this.getClassNames()}
-    style={this.getStyles ? this.getStyles() : style}
+    style={this.getStyles ? this.getStyles(k) : style}
     {...getRestProps(this)}
 >{children}</div>

package/components/menu/item.ts

@@ -10,6 +10,7 @@ import {useRouter, navigate} from '../../hooks/useRouter';
 import {useRecordItem} from '../../hooks/useRecordComponent';
 import {MENU_RECORD_KEY, useHighlightItem} from './useHighlight';
 import {Events} from '../types';
+import { useConfigContext } from '../config';
 
 export interface MenuItemProps {
     key: Key 
@@ -52,6 +53,7 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
     private expanded = useExpanded(this.rootMenu, this.parentMenu);
     private dropdown = useDropdown(this.rootMenu, this.parentMenu);
     private router = useRouter();
+    private config =  useConfigContext();
 
     init() {
         provide(MENU_ITEM, this);