@king-design/intact 3.0.0 → 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

@@ -1,18 +1,25 @@
-import {Component, inject} from 'intact';
+import {Component, inject, provide} from 'intact';
 import template from './template.vdt';
-import {LAYOUT, getStyle} from './helpers';
+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);
+    }
 
     private getClassNames() {
         const {className} = this.get();
+        const { k } = this.config;
         return {
-            'k-layout-body': true,
+            [`${k}-layout-body`]: true,
             [className as string]: className,
         };
     }
@@ -24,6 +31,7 @@ export class Body extends Component {
         if (!hasFixedAside && !hasFixedHeader) return style;
 
         return addStyle(style, {
+            // FIXME: we must use padding instead of margin, otherwise the table's width is wired
             paddingLeft: hasFixedAside ? getStyle(asideWidth) : null, 
             marginTop: hasFixedHeader ? getStyle(headerHeight) : null,
         });

package/components/layout/demos/aside.md

@@ -47,7 +47,7 @@ import {
     </Aside>
     <Layout>
         <Header>
-            <Button type="none" size="large" style="height: 64px" ev-click={this.toggle}>
+            <Button type="none" size="large" style="height: 64px" ev-click={this.toggle} ghost>
                 <Icon class="ion-navicon" size="30"/>
             </Button>
         </Header>

package/components/layout/demos/basic.md

@@ -21,9 +21,9 @@ import {Icon} from 'kpc';
 import {Breadcrumb, BreadcrumbItem} from 'kpc';
 
 <Layout class="layout">
-    <Header class="header">
+    <Header class="header" blur boxShadow theme="white" height="54px" fixed>
         <div class="logo">LOGO</div>
-        <Menu type="horizontal">
+        <Menu type="horizontal" theme="white">
             <MenuItem key="1">menu 1</MenuItem>
             <MenuItem key="2" disabled>menu 2</MenuItem>
             <MenuItem key="3">
@@ -45,7 +45,7 @@ import {Breadcrumb, BreadcrumbItem} from 'kpc';
         </Menu>
     </Header>
     <Layout>
-        <Aside theme="light">
+        <Aside theme="light" fixed>
             <Menu
                 v-model:expandedKeys="expandedKeys" 
                 v-model:selectedKey="selectedKey"
@@ -74,11 +74,29 @@ import {Breadcrumb, BreadcrumbItem} from 'kpc';
             </Menu>
         </Aside>
         <Body>
-            <Breadcrumb>
-                <BreadcrumbItem>Home</BreadcrumbItem>
-                <BreadcrumbItem>Detail</BreadcrumbItem>
-            </Breadcrumb>
-            <div>content</div>
+            <div class="content">
+                <Breadcrumb>
+                    <BreadcrumbItem>Home</BreadcrumbItem>
+                    <BreadcrumbItem>Detail</BreadcrumbItem>
+                </Breadcrumb>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+                <div>content</div>
+            </div>
         </Body>
     </Layout>
 </Layout>
@@ -92,8 +110,10 @@ import {Breadcrumb, BreadcrumbItem} from 'kpc';
     text-align center
     background gray
     margin 0 20px
+.content
+    padding: 20px
 .k-breadcrumb
-    margin 20px 0
+    margin-bottom 20px
 ```
 
 ```ts

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,12 +6,15 @@ 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
     height?: number | string
     style?: string | Record<string, string>
     theme?: MenuProps['theme']
+    blur?: boolean
+    boxShadow?: boolean
 }
 
 const typeDefs: Required<TypeDefs<HeaderProps>> = {
@@ -19,6 +22,8 @@ const typeDefs: Required<TypeDefs<HeaderProps>> = {
     height: [Number, String],
     style: [String, Object],
     theme: themes,
+    blur: Boolean,
+    boxShadow: Boolean,
 };
 
 const defaults = (): Partial<HeaderProps> => ({
@@ -32,15 +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} = this.get();
+        const {className, fixed, theme, blur, boxShadow} = this.get();
+        const { k } = this.config;
         return {
-            'k-layout-header': true,
-            'k-fixed': fixed,
-            [`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/helpers.ts

@@ -2,6 +2,7 @@ import {isNumber} from 'intact-shared';
 
 export const ROOT_LAYOUT = 'RootLayout';
 export const LAYOUT = 'Layout';
+export const BODY = 'LayoutBody';
 export const defaultHeight = `64px`;
 export const defaultWidth = `200px`;
 

package/components/layout/index.md

@@ -14,6 +14,8 @@ sidebar: doc
 | fixed | 是否固定头部 | `boolean` | `false` |
 | theme | 主题颜色 | `"dark"` | `"light"` | `"white"` | `"dark"` |
 | height | 高度 | `string` | `number` | `"64px"` |
+| blur | 是否高斯模糊背景 | `boolean` | `false` |
+| boxShadow | 是否展示阴影 | `boolean` | `false` |
 
 ## Aside
 

package/components/layout/index.spec.ts

@@ -0,0 +1,32 @@
+import {mount, unmount, dispatchEvent, wait, getElement} from '../../test/utils';
+import { Component } from 'intact';
+import { Layout, Header, Aside, Body } from './';
+
+describe('Layout', () => {
+    afterEach(() => {unmount()});
+
+    it('nest Layout in Body with fixed header', async () => {
+        class Demo extends Component {
+            static template = `
+                const { Layout, Header, Aside, Body } = this;
+                <Layout>
+                    <Header fixed />
+                    <Body>
+                        <Layout>
+                            <Aside fixed />
+                            <Body>body</Body>
+                        </Layout>
+                    </Body>
+                </Layout>
+            `;
+
+            Layout = Layout;
+            Header = Header;
+            Aside = Aside;
+            Body = Body;
+        }
+
+        const [instance, element] = mount(Demo);
+        expect(element.innerHTML).to.matchSnapshot();
+    });
+});