@king-design/intact 3.1.6 → 3.2.1

package/components/config/index.spec.ts

@@ -4,9 +4,9 @@ import { ConfigProvider } from '.';
 import { Button, ButtonGroup } from '../button';
 
 describe('Config', () => {
-    // afterEach(async () => {
-        // unmount();
-    // });
+    afterEach(async () => {
+        unmount();
+    });
 
     it('should change classname prefix', async function() {
         class Demo extends Component<{k: string}> {

package/components/layout/aside.vdt

@@ -22,7 +22,7 @@ const classNameObj = {
     [`${k}-layout-aside`]: true,
     [`${k}-collapsed`]: collapse,
     [`${k}-fixed`]: fixed,
-    [`${k}-${theme}`]: true,
+    [`${k}-${theme === 'dark' ? 'dark' : 'light'}`]: true,
     [className]: className,
     [makeAsideStyles(k)]: true,
 };

package/components/layout/demos/basic.md

@@ -62,7 +62,7 @@ import {Breadcrumb, BreadcrumbItem} from 'kpc';
                 </MenuItem>
                 <MenuItem key="2" disabled><Icon class="ion-star" />menu 2</MenuItem>
                 <MenuItem key="3">
-                    <i class="k-icon ion-heart"></i>menu 3
+                    <Icon class="ion-heart" />menu 3
                     <Menu>
                         <MenuItem key="3-1">sub menu 1</MenuItem>
                         <MenuItem key="3-2">sub menu 2</MenuItem>

package/components/layout/demos/fix.md

@@ -57,7 +57,7 @@ import {
                 </MenuItem>
                 <MenuItem key="2" disabled><Icon class="ion-star" />menu 2</MenuItem>
                 <MenuItem key="3">
-                    <i class="k-icon ion-heart"></i>menu 3
+                    <Icon class="ion-heart" />menu 3
                     <Menu>
                         <MenuItem key="3-1">sub menu 1</MenuItem>
                         <MenuItem key="3-2">sub menu 2</MenuItem>

package/components/layout/demos/theme.md

@@ -57,7 +57,7 @@ import {
                 </MenuItem>
                 <MenuItem key="2" disabled><Icon class="ion-star" />menu 2</MenuItem>
                 <MenuItem key="3">
-                    <i class="k-icon ion-heart"></i>menu 3
+                    <Icon class="ion-heart" />menu 3
                     <Menu>
                         <MenuItem key="3-1">sub menu 1</MenuItem>
                         <MenuItem key="3-2">sub menu 2</MenuItem>
@@ -76,7 +76,6 @@ import {
             切换主题：<ButtonGroup checkType="radio" v-model="theme">
                 <Button value="light">light</Button>
                 <Button value="dark">dark</Button>
-                <Button value="white">white</Button>
             </ButtonGroup>
         </Body>
     </Layout>
@@ -105,7 +104,7 @@ export default class extends Component {
         return {
             expandedKeys: [],
             selectedKey: '3-1',
-            theme: 'white' as MenuProps['theme'],
+            theme: 'light' as MenuProps['theme'],
         };
     }
 }

package/components/layout/index.md

@@ -12,7 +12,7 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | fixed | 是否固定头部 | `boolean` | `false` |
-| theme | 主题颜色 | `"dark"` | `"light"` | `"white"` | `"dark"` |
+| theme | 主题颜色 | `"dark"` | `"light"` | `"white@deprecated"` | `"dark"` |
 | height | 高度 | `string` | `number` | `"64px"` |
 | blur | 是否高斯模糊背景 | `boolean` | `false` |
 | boxShadow | 是否展示阴影 | `boolean` | `false` |

package/components/layout/styles.ts

@@ -19,11 +19,6 @@ const defaults = {
         get bgColor() { return menu.light.bgColor },
         get border() { return menu.light.border },
     },
-    white: {
-        get color() { return menu.white.item.color },
-        get bgColor() { return menu.white.bgColor },
-        get border() { return menu.white.border },
-    },
 
     get collapsedWidth() { return `calc(${getLeft(menu.item.padding)} * 2 + ${menu.icon.width})` },
     footerPadding: '24px 50px',
@@ -89,20 +84,14 @@ export const makeHeaderStyles = cache(function makeHeaderStyles(k: string) {
             box-shadow: ${theme.boxShadow};
         }
 
-        ${themes.map(theme => {
-            if (theme === 'dark') return;
-            const styles = layout[theme];
-            return css`
-                &.${k}-${theme} {
-                    background: ${styles.bgColor};
-                    color: ${styles.color};
-                    border-bottom: ${styles.border};
-                    &.${k}-blur {
-                        background: ${setAlpha(styles.bgColor, 0.1)};
-                    }
-                }
-            `
-        })}
+        &.${k}-light {
+            background: ${layout.light.bgColor};
+            color: ${layout.light.color};
+            border-bottom: ${layout.light.border};
+            &.${k}-blur {
+                background: ${setAlpha(layout.light.bgColor, 0.1)};
+            }
+        }
     `;
 });
 
@@ -115,7 +104,7 @@ export const makeAsideStyles = cache(function makeAsideStyles(k: string) {
         color: ${layout.color};
         ${themes.map(theme => {
             if (theme === 'dark') return;
-            const styles = layout[theme];
+            const styles = layout.light;
             return css`
                 &.${k}-${theme} {
                     background: ${styles.bgColor};

package/components/menu/demos/collapse.md

@@ -6,7 +6,7 @@ order: 2
 添加`collapse`属性，可以使菜单呈现折叠状态
 
 ```vdt
-import {Menu, MenuItem, Switch, Icon} from 'kpc';
+import {Menu, MenuItem, MenuTitle, Switch, Icon} from 'kpc';
 
 <div>
     <Switch v-model="collapse"
@@ -48,6 +48,9 @@ import {Menu, MenuItem, Switch, Icon} from 'kpc';
             </Menu>
         </MenuItem>
         <MenuItem key="4" to="/"><Icon class="ion-gear-b" />menu 4</MenuItem>
+        <MenuTitle><Icon class="ion-cloud" />menu 5</MenuTitle>
+        <MenuItem key="5-1"><Icon class="ion-stats-bars" />sub menu 1</MenuItem>
+        <MenuItem key="5-2"><Icon class="ion-upload" />sub menu 2</MenuItem>
     </Menu>
 </div>
 ```

package/components/menu/demos/showCollapseArrow.md

@@ -0,0 +1,93 @@
+---
+title: 折叠按钮
+order: 6
+---
+
+`showCollapseArrow`定义是否展示折叠按钮，`MenuTitle`定义菜单标题项。
+
+```vdt
+import {Menu, MenuItem, Icon, MenuTitle, Switch, ButtonGroup, Button} from 'kpc';
+<div>
+    <ButtonGroup checkType="radio"
+        v-model="theme"
+    >
+        <Button value="light">light</Button>
+        <Button value="dark">dark</Button>
+    </ButtonGroup>
+    <Switch v-model="showCollapseArrow"
+        on="展示折叠按钮"
+        off="隐藏折叠按钮" 
+        width="110"
+        trueValue={true}
+        falseValue={false}
+    />
+    <ButtonGroup v-model="size"
+        checkType="radio"
+    >
+        <Button value="large">large</Button>
+        <Button value="default">default</Button>
+        <Button value="small">small</Button>
+    </ButtonGroup>
+    <br /><br />
+    <Menu
+        v-model:expandedKeys="expandedKeys"
+        v-model:selectedKey="selectedKey"
+        theme={this.get('theme')}
+        size={this.get('size')}
+        showCollapseArrow={this.get('showCollapseArrow')}
+    >
+        <b:header>
+            自定义Header
+        </b:header>
+        <MenuItem key="0">menu 0</MenuItem>
+        <MenuTitle>title 1</MenuTitle>
+        <MenuItem key="1">menu 1</MenuItem>
+        <MenuItem key="2">menu 2</MenuItem>
+        <MenuItem key="3">menu 3</MenuItem>
+        <MenuTitle>title 2</MenuTitle>
+        <MenuItem key="4">menu 1</MenuItem>
+        <MenuItem key="5" disabled>menu 2</MenuItem>
+        <MenuItem key="6">
+            sub menu 6
+            <Menu>
+                <MenuItem key="6-1">sub menu 1</MenuItem>
+                <MenuItem key="6-2">sub menu 2</MenuItem>
+                <MenuItem key="6-3" disabled>sub menu 3</MenuItem>
+                <MenuItem key="6-4">
+                    sub menu 7
+                    <Menu>
+                        <MenuItem key="6-7-1">Option 1</MenuItem>
+                        <MenuItem key="6-7-2">Option 2</MenuItem>
+                    </Menu>
+                </MenuItem>
+            </Menu>
+        </MenuItem>
+        <MenuItem key="8" to="/">menu 8</MenuItem>
+    </Menu>
+</div>
+```
+
+```styl
+.k-switch
+    margin 0 16px
+```
+
+```ts
+import type {MenuProps} from 'kpc';
+
+interface Props extends MenuProps { }
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            expandedKeys: [],
+            selectedKey: '2',
+            size: 'default',
+            theme: 'light',
+            showCollapseArrow: false
+        } as MenuProps;
+    }
+}
+```

package/components/menu/demos/size.md

@@ -21,7 +21,6 @@ import {Menu, MenuItem, Switch, ButtonGroup, Button, Icon} from 'kpc';
     >
         <Button value="light">light</Button>
         <Button value="dark">dark</Button>
-        <Button value="white">white</Button>
     </ButtonGroup>
     <Switch v-model="type"
         on="horizontal" off="vertical"

package/components/menu/demos/theme.md

@@ -12,7 +12,6 @@ import {ButtonGroup, Button, Menu, MenuItem, Icon} from 'kpc';
     <ButtonGroup checkType="radio" v-model="theme">
         <Button value="light">light</Button>
         <Button value="dark">dark</Button>
-        <Button value="white">white</Button>
     </ButtonGroup>
     <br /><br />
     <Menu v-model:expandedKeys="expandedKeys" theme={this.get('theme')}>

package/components/menu/index.md

@@ -13,12 +13,13 @@ sidebar: doc
 | --- | --- | --- | --- |
 | expandedKeys | 定义菜单展开项 | <code>(string &#124; number)[]</code> | `[]` |
 | selectedKey | 定义菜单选中项 | <code>string &#124; number</code> | `undefined` |
-| theme | 定义菜单主题 | `"light"` &#124; `"dark"` &#124; `"white"` | `"dark"` |
+| theme | 定义菜单主题 | `"light"` &#124; `"dark"` &#124; `"white@deprecated"` | `"dark"` |
 | collapse | 菜单是否折叠 | `boolean` | `false` |
 | type | 定义菜单排列方式：垂直，水平 | `"vertical"` &#124; `"horizontal"` | `"vertical"` |
 | size | 定义菜单尺寸 | `"large"` &#124; `"default"` &#124; `"small"` | `"default"` |
 | accordion | 是否每次只能展开一项 | `boolean` | `false` |
 | dot | 是否给菜单项前面添加圆点 | `boolean` | `false` |
+| showCollapseArrow | 是否展示折叠按钮 | `boolean` | `false` |
 
 ## MenuItem
 

package/components/menu/index.spec.ts

@@ -2,6 +2,7 @@ import {Component} from 'intact';
 import BasicDemo from '~/components/menu/demos/basic';
 import CollapseDemo from '~/components/menu/demos/collapse';
 import AccordionDemo from '~/components/menu/demos/accordion';
+import CollapseArrowDemo from '~/components/menu/demos/showCollapseArrow';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
 import {Menu, MenuItem} from './';
 
@@ -14,7 +15,7 @@ describe('Menu', () => {
         await wait();
 
         // shrink
-        const title = element.querySelector('.k-expanded .k-menu-title') as HTMLElement;
+        const title = element.querySelector('.k-expanded .k-menu-item-title') as HTMLElement;
         title.click();
         await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
@@ -34,7 +35,7 @@ describe('Menu', () => {
 
         expect(element.innerHTML).to.matchSnapshot();
 
-        const [title, disabledTitle] = element.querySelectorAll<HTMLElement>('.k-menu-title');
+        const [title, disabledTitle] = element.querySelectorAll<HTMLElement>('.k-menu-body .k-menu-item-title');
         title.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
@@ -44,7 +45,7 @@ describe('Menu', () => {
         expect(element.outerHTML).to.matchSnapshot();
         expect(instance.get('selectedKey')).to.eql('1');
 
-        const subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title') as HTMLElement;
+        const subTitle = element.querySelector('.k-expanded .k-menu .k-menu-body .k-menu-item-title') as HTMLElement;
         subTitle.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
@@ -64,13 +65,13 @@ describe('Menu', () => {
         expect(element.outerHTML).to.matchSnapshot();
 
         // show sub menu
-        const title = element.querySelector('.k-menu-item:nth-child(3) .k-menu-title') as HTMLElement;
+        const title = element.querySelector('.k-menu-body .k-menu-item:nth-child(3) .k-menu-item-title') as HTMLElement;
         dispatchEvent(title, 'mouseenter');
         await wait();
         const dropdown = getElement('.k-dropdown-menu.k-menu')!;
         expect(dropdown.innerHTML).to.matchSnapshot();
 
-        dispatchEvent(dropdown.querySelector<HTMLElement>('.k-menu-item:nth-child(4) .k-menu-title')!, 'mouseenter');
+        dispatchEvent(dropdown.querySelector<HTMLElement>('.k-menu-body .k-menu-item:nth-child(4) .k-menu-item-title')!, 'mouseenter');
         await wait();
         expect(getElement('.k-dropdown-menu.k-menu')!.innerHTML).to.matchSnapshot();
 
@@ -84,16 +85,16 @@ describe('Menu', () => {
         const [instance, element] = mount(CollapseDemo);
 
         instance.set('collapse', true);
-        let title = element.querySelector('.k-menu-title') as HTMLElement;
+        let title = element.querySelector('.k-menu-body .k-menu-item-title') as HTMLElement;
         title.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
 
-        title = element.querySelector('.k-menu-item:nth-child(3) .k-menu-title') as HTMLElement;
+        title = element.querySelector('.k-menu-body .k-menu-item:nth-child(3) .k-menu-item-title') as HTMLElement;
         dispatchEvent(title, 'mouseenter');
         await wait();
         const dropdown = getElement('.k-dropdown-menu.k-menu')!;
-        dropdown.querySelector<HTMLElement>('.k-menu-title')!.click();
+        dropdown.querySelector<HTMLElement>('.k-menu-body .k-menu-item-title')!.click();
         await wait();
         expect(dropdown.innerHTML).to.matchSnapshot();
 
@@ -104,29 +105,31 @@ describe('Menu', () => {
 
     it('accordion', async () => {
         const [instance, element] = mount(AccordionDemo);
-
-        const menu3 = element.children[2] as HTMLElement;
-        const subMenu1 = menu3.querySelector<HTMLElement>('.k-menu')!.firstElementChild!.querySelector('.k-menu-title') as HTMLElement;
+        
+        // const menu3 = element.children[2] as HTMLElement;
+        const rootElement = element.firstElementChild!;
+        const menu3 = rootElement.children[2] as HTMLElement;
+        const subMenu1 = menu3.querySelector<HTMLElement>('.k-menu .k-menu-body')!.firstElementChild!.querySelector('.k-menu-item-title') as HTMLElement;
         subMenu1.click();
         await wait();
-        expect(element.innerHTML).to.matchSnapshot();
+        expect(rootElement.innerHTML).to.matchSnapshot();
         expect(instance.get('expandedKeys')).to.eql(['3', '3-1']);
 
-        const subMenu4 = menu3.querySelector<HTMLElement>('.k-menu')!.lastElementChild!.querySelector('.k-menu-title') as HTMLElement;
+        const subMenu4 = menu3.querySelector<HTMLElement>('.k-menu .k-menu-body')!.lastElementChild!.querySelector('.k-menu-item-title') as HTMLElement;
         subMenu4.click();
         await wait();
-        expect(element.innerHTML).to.matchSnapshot();
+        expect(rootElement.innerHTML).to.matchSnapshot();
         expect(instance.get('expandedKeys')).to.eql(['3', '3-4']);
-
-        const menu1 = element.firstElementChild!.querySelector('.k-menu-title') as HTMLElement;
+        
+        const menu1 = rootElement.firstElementChild!.querySelector('.k-menu-item-title') as HTMLElement;
         menu1.click();
         await wait();
-        expect(element.innerHTML).to.matchSnapshot();
+        expect(rootElement.innerHTML).to.matchSnapshot();
         expect(instance.get('expandedKeys')).to.eql(['3-4', '1']);
 
-        menu3.querySelector<HTMLElement>('.k-menu-title')!.click();
+        menu3.querySelector<HTMLElement>('.k-menu-item-title')!.click();
         await wait();
-        expect(element.innerHTML).to.matchSnapshot();
+        expect(rootElement.innerHTML).to.matchSnapshot();
         expect(instance.get('expandedKeys')).to.eql(['3-4', '3']);
     });
 
@@ -168,5 +171,23 @@ describe('Menu', () => {
         const expandedKeys = instance.get('expandedKeys') as Array<string>;
         expect(expandedKeys.includes('1')).to.be.true;
 
-    })
+    });
+
+    it('collapsed arrow', async () => {
+        const [instance, element] = mount(CollapseArrowDemo);
+
+        instance.set('showCollapseArrow', true);
+        await wait();
+        expect(element.outerHTML).to.matchSnapshot();
+
+        let arrow = element.querySelector('.k-menu .k-menu-arrow-box') as HTMLElement;
+        arrow.click();
+        await wait(500);
+        expect(element.outerHTML).to.matchSnapshot();
+
+        instance.set('showCollapseArrow', false);
+        await wait();
+        expect(element.outerHTML).to.matchSnapshot();
+        expect(getElement('.k-menu-arrow-box')).to.be.undefined;
+    });
 });

package/components/menu/index.ts

@@ -1,2 +1,3 @@
 export * from './menu';
-export * from './item';
+export * from './item';
+export * from './title';

package/components/menu/item.vdt

@@ -32,12 +32,12 @@ const classNameObj = {
 
 const showDot = isTopItem && !iconVNode && isNullOrUndefined(dot) ? rootDot : dot;
 const title = (children) => (
-    <div class={{[`${k}-menu-title`]: true, [makeTitleStyles(k)]: true}}
+    <div class={{[`${k}-menu-item-title`]: true, [makeTitleStyles(k)]: true}}
         ev-click={this.onClick.bind(this, subMenuVNode)}
     >
         <Icon class={`${k}-menu-dot ion-record`} v-if={showDot} />
         <div class={`${k}-menu-name`}>{children}</div>
-        <Icon class={`${k}-menu-arrow ${k}-icon-down`} v-if={subMenuVNode} />
+        <Icon class={`${k}-menu-item-arrow ion-arrow-down-b`} v-if={subMenuVNode} />
     </div>
 );
 
@@ -56,6 +56,7 @@ const title = (children) => (
                     const className = _$cn({
                         [_classname]: true,
                         [subMenuVNode.className]: subMenuVNode.className,
+                        [`${k}-sub-menu`]: true,
                     });
                     const clonedVNode = directClone(subMenuVNode);
                     clonedVNode.props = { ...clonedVNode.props, className, _paddingLeft };

package/components/menu/menu.ts

@@ -2,12 +2,14 @@ import {Component, TypeDefs, provide, inject, Key} from 'intact';
 import template from './menu.vdt';
 import {useHighlight} from './useHighlight';
 import { useConfigContext } from '../config';
+import {bind} from '../utils';
 
 export interface MenuProps<K extends Key = Key> {
     expandedKeys?: K[]
     selectedKey?: K 
     theme?: 'light' | 'dark' | 'white'
     collapse?: boolean
+    showCollapseArrow?: boolean
     type?: 'vertical' | 'horizontal'
     size?: 'large' | 'default' | 'small' 
     accordion?: boolean
@@ -27,6 +29,7 @@ const typeDefs: Required<TypeDefs<MenuProps>> = {
     selectedKey: [String, Number],
     theme: ['light', 'dark', 'white'],
     collapse: Boolean,
+    showCollapseArrow: Boolean,
     type: ['vertical', 'horizontal'],
     size: ['large', 'default', 'small'],
     accordion: Boolean,
@@ -65,4 +68,11 @@ export class Menu<K extends Key = Key> extends Component<MenuProps<K>, MenuEvent
             this.highlight = useHighlight();
         }
     }
+
+    @bind
+    public onClick(e: MouseEvent) {
+        const {collapse} = this.get();
+        this.set({collapse: !collapse});
+    }
+    
 }

package/components/menu/menu.vdt

@@ -5,16 +5,17 @@ import {makeMenuStyles, makeTitleStyles} from './styles';
 import {Icon} from '../icon';
 
 const {children, className} = this.get();
-const {collapse, theme, type, size} = (this.rootMenu || this).get();
+const {collapse, theme, type, size, showCollapseArrow} = (this.rootMenu || this).get();
 const isRootMenu = !this.rootMenu;
 const isDropdownMenu = !isRootMenu && isDropdown(this.rootMenu);
 const { k } = this.config;
 const classNameObj = {
     [`${k}-menu`]: true,
     [className]: className,
-    [`${k}-${theme}`]: (isRootMenu || isDropdownMenu) && theme,
+    [`${k}-${theme === 'dark' ? 'dark' : 'light'}`]: (isRootMenu || isDropdownMenu) && theme,
     [`${k}-${size}`]: isRootMenu && size !== 'default',
     [`${k}-collapsed`]: isRootMenu && collapse,
+    [`${k}-collapsed-arrow`]: isRootMenu && showCollapseArrow && collapse,
     [`${k}-${type}`]: isRootMenu && type,
     [makeMenuStyles(k)]: true,
 };
@@ -33,7 +34,15 @@ const content = (
                 {findChildren(header, vNode => isComponentVNode(vNode, Icon))}
             </template>
         </div>
-        {children}
+        <div v-if={isRootMenu && showCollapseArrow && type !== 'horizontal'}
+            class={`${k}-menu-arrow-box`}
+            ev-click={this.onClick.bind(this)}
+        >
+            <Icon class={`${k}-menu-arrow ion-arrow-left-b`} />
+        </div>
+        <div class={`${k}-menu-body`}>
+            {children}
+        </div>
     </template>
 );