@king-design/intact 3.0.0-beta.2 → 3.0.1

package/components/badge/styles.ts

@@ -34,7 +34,7 @@ export default function makeStyles() {
             right: 0;
             transform: translate(50%, -50%);
             background: ${badge.bgColor};
-            font-size: 75%;
+            font-size: 85%;
             vertical-align: baseline;
         }
             

package/components/breadcrumb/demos/separator.md

@@ -26,7 +26,7 @@ import {Breadcrumb, BreadcrumbItem, Icon} from 'kpc';
 
 ```styl
 .separator
-    color #ffa133
+    color #0091ea
     vertical-align middle
 i
     margin-right 3px

package/components/button/demos/group.md

@@ -61,6 +61,13 @@ import {Button, ButtonGroup} from 'kpc';
         <Button value="guangzhou" size="small">广州</Button>
         <Button value="shenzhen" size="small">深圳</Button>
     </ButtonGroup>
+    <p>有间隔的按钮组</p>
+    <ButtonGroup checkType="radio" v-model="city" seperate>
+        <Button value="beijing">北京</Button>
+        <Button value="shanghai">上海</Button>
+        <Button value="guangzhou">广州</Button>
+        <Button value="shenzhen">深圳</Button>
+    </ButtonGroup>
 </div>
 ```
 

package/components/button/group.ts

@@ -8,13 +8,15 @@ export interface ButtonGroupProps {
     value?: any
     checkType?: 'none' | 'radio' | 'checkbox' 
     fluid?: boolean
+    seperate?: boolean
 }
 
 const typeDefs: Required<TypeDefs<ButtonGroupProps>> = {
     vertical: Boolean,
     value: null,
     fluid: Boolean,
-    checkType: ['none', 'radio', 'checkbox']
+    checkType: ['none', 'radio', 'checkbox'],
+    seperate: Boolean,
 };
 
 const defaults = (): Partial<ButtonGroupProps> => ({

package/components/button/group.vdt

@@ -1,12 +1,13 @@
 import {getRestProps} from '../utils';
 import {makeButtonGroupStyles} from './styles';
 
-const {className, vertical, children, fluid} = this.get();
+const {className, vertical, children, fluid, seperate} = this.get();
 
 const classNameObj = {
     'k-btns': true,
     'k-vertical': vertical,
     'k-fluid': fluid,
+    'k-seperate': seperate,
     [className]: className,
     [makeButtonGroupStyles()]: true,
 };

package/components/button/index.md

@@ -32,6 +32,7 @@ sidebar: doc
 | checkType | 指定按钮组为单选或复选类型，此时需要给每个按钮指定`value`来作为选中的值 | `"radio"` | `"checkbox"` | `"none"` | `"none"` |
 | value | 对于`radio`和`checkbox`类型按钮组，该值表示选中的按钮的值，可以使用`v-model`进行双向绑定 | `*` | `undefined` |
 | fluid | 是否宽度100% | `boolean` | `false` |
+| seperate | 是否展示间隔 | `boolean` | `false` |
 
 # 方法
 

package/components/button/index.vdt

@@ -67,7 +67,7 @@ const typeStyles = theme[type];
 const waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
 
 <Wave disabled={loading || disabled || type === 'none' || type === 'link'}
-    inset="-2px"
+    inset={type === 'flat' ? '-1px' : '-2px'}
     color={waveColor}
 >
     <DynamicButton 

package/components/button/styles.ts

@@ -32,7 +32,7 @@ const btnStyles = {
     get color() { return theme.color.text },
     bgColor: '#fff',
     lineHeight: '1.15',
-    get padding() { return `0 ${theme.default.padding}` },
+    get padding() { return `0 16px` },
     get borderColor() { return theme.color.border },
     get borderRadius() { return theme.borderRadius },
     get fontSize() { return theme.default.fontSize },
@@ -97,6 +97,11 @@ const btnSizeStyles = sizes.reduce((memo, size) => {
         get height() { return theme[size].height },
         get padding() { return `0 ${theme[size].padding}` },
     };
+    if (size === 'large') {
+        Object.defineProperty(memo[size], 'padding', {
+            value: `0 24px`,
+        });
+    }
 
     return memo; 
 }, {} as {[key in Sizes]: SizeStyles});
@@ -412,7 +417,9 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
 
 export function makeButtonGroupStyles() {
     return css`
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
+        flex-wrap: wrap;
         vertical-align: middle;
         .k-btn {
             margin: 0;
@@ -470,8 +477,8 @@ export function makeButtonGroupStyles() {
             
         // vertical
         &.k-vertical {
+            flex-direction: column;
             > .k-btn {
-                display: block;
                 &:not(.k-btn-icon) {
                     width: 100%;
                 }
@@ -503,5 +510,13 @@ export function makeButtonGroupStyles() {
                 })}
             }
         }
+
+        // seperate
+        &.k-seperate {
+            gap: 8px;
+            > .k-btn {
+                border-radius: ${button.borderRadius} !important;
+            }
+        }
     `;
 }

package/components/checkbox/styles.ts

@@ -26,11 +26,11 @@ const defaults = {
 
     
     inner: {
-        width: '5px',
+        width: '6px',
         height: '10px',
         top: '0px',
-        left: '5px',
-        border: '1px solid #fff',
+        left: '4px',
+        border: '2px solid #fff',
     },
 
     // disabled
@@ -48,11 +48,6 @@ const defaults = {
             },
         } 
     },
-
-    // indeterminate
-    indeterminate: {
-        innerLeft: '4px',
-    }
 };
 
 let checkbox: typeof defaults;
@@ -91,7 +86,9 @@ export default function makeStyles() {
                 transform: rotate(45deg) scale(0);
                 transition: all ${checkbox.transition};
             }
-            &:hover {
+        }
+        &:hover {
+            .k-checkbox-wrapper {
                 border: ${checkbox.hoverBorder}
             }
         }
@@ -125,7 +122,6 @@ export default function makeStyles() {
                 &:before {
                     transform: rotate(90deg) scale(1);
                     border-bottom: 0;
-                    left: ${checkbox.indeterminate.innerLeft};
                 }
             }
       

package/components/collapse/styles.ts

@@ -35,7 +35,6 @@ export function makeStyles() {
             .${kls('arrow')} {
                 float: left;
                 margin-right: ${collapse.titleMarginRight};
-                transform-origin: center center 0;
             }
         }
 
@@ -69,7 +68,6 @@ export function makeItemStyles() {
             transition: transform ${collapse.transition};
             line-height: ${collapseItem.titleHeight};
             height: ${collapseItem.titleHeight};
-            transform-origin: left center 0;
         }
 
         &:not(.k-disabled) {

package/components/dropdown/dropdown.ts

@@ -68,6 +68,7 @@ const typeDefs: Required<TypeDefs<DropdownProps>> = {
 const defaults = (): Partial<DropdownProps> => ({
     trigger: 'hover',
     of: 'self',
+    value: false,
 });
 
 const events: Events<DropdownEvents> = {

package/components/dropdown/usePosition.ts

@@ -3,6 +3,7 @@ import type {Dropdown} from './';
 import {Options, position, Feedback} from '../position';
 import {noop} from 'intact-shared';
 import {isObject} from 'intact-shared';
+import { isEqualObject } from '../utils';
 
 export type FeedbackCallback = (feedback: Feedback) => void;
 
@@ -23,7 +24,7 @@ export function usePosition() {
                 isObject(newValue) && isObject(oldValue) &&
                 // is not event object
                 !(newValue instanceof Event) &&
-                JSON.stringify(newValue) === JSON.stringify(oldValue)
+                isEqualObject(newValue, oldValue)
             )  {
                 return;
             }

package/components/form/index.spec.ts

@@ -6,6 +6,7 @@ import {mount, unmount, dispatchEvent, wait} from '../../test/utils';
 import {Component, findDomFromVNode} from 'intact';
 import {Form, FormItem} from './';
 import {Input} from '../input';
+import { Select } from '../select';
 
 RemoteDemo.prototype.validateUserName = function(value) {
     // mock api
@@ -440,4 +441,24 @@ describe('Form', () => {
         await wait();
         expect(classList.contains('k-ellipsis')).to.be.true;
     });
+
+    it('should not validate when select is disabled on init', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Form, FormItem, Select} = this;
+                <Form ref="form">
+                    <FormItem rules={{required: true}}>
+                        <Select disabled />
+                    </FormItem>
+                </Form>
+            `;
+            Form = Form;
+            FormItem = FormItem;
+            Select = Select;
+        }
+        const [instance, element] = mount(Demo);
+
+        await wait(500);
+        expect(element.querySelector('.k-form-error')).to.be.null;
+    });
 });

package/components/form/styles.ts

@@ -55,6 +55,7 @@ export function makeItemStyles() {
             width: ${form.item.labelWidth};
             padding-right: ${form.item.labelGap};
             max-height: ${form.item.labelHeight};
+            flex-shrink: 0;
         }
         .k-form-star {
             color: ${form.item.starColor};

package/components/icon/index.vdt

@@ -30,6 +30,6 @@ if (this.colors.indexOf(color) > -1) {
 }
 
 <i class={classNameObj}
-    style={addStyle(style, _style)}
     {...getRestProps(this)}
+    style={addStyle(style, _style)}
 >{children}</i>

package/components/layout/body.ts

@@ -1,6 +1,6 @@
-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';
 
@@ -9,6 +9,10 @@ export class Body extends Component {
 
     private layout = inject<Layout>(LAYOUT)!;
 
+    init() {
+        provide(BODY, this);
+    }
+
     private getClassNames() {
         const {className} = this.get();
         return {
@@ -24,6 +28,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/header.ts

@@ -12,6 +12,8 @@ export interface HeaderProps {
     height?: number | string
     style?: string | Record<string, string>
     theme?: MenuProps['theme']
+    blur?: boolean
+    boxShadow?: boolean
 }
 
 const typeDefs: Required<TypeDefs<HeaderProps>> = {
@@ -19,6 +21,8 @@ const typeDefs: Required<TypeDefs<HeaderProps>> = {
     height: [Number, String],
     style: [String, Object],
     theme: themes,
+    blur: Boolean,
+    boxShadow: Boolean,
 };
 
 const defaults = (): Partial<HeaderProps> => ({
@@ -34,10 +38,12 @@ export class Header extends Component<HeaderProps> {
     private rootLayout = inject<Layout>(ROOT_LAYOUT)!;
 
     private getClassNames() {
-        const {className, fixed, theme} = this.get();
+        const {className, fixed, theme, blur, boxShadow} = this.get();
         return {
             'k-layout-header': true,
             'k-fixed': fixed,
+            'k-blur': blur,
+            'k-box-shadow': boxShadow,
             [`k-${theme!}`]: true,
             [className as string]: className,
             [makeHeaderStyles()]: 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();
+    });
+});

package/components/layout/layout.ts

@@ -2,14 +2,16 @@ import {Component, TypeDefs, inject, provide} from 'intact';
 import template from './template.vdt';
 import {makeLayoutStyles} from './styles';
 import {addStyle} from '../utils';
-import {ROOT_LAYOUT, LAYOUT, getStyle} from './helpers';
+import {ROOT_LAYOUT, LAYOUT, getStyle, BODY} from './helpers';
 import {useParse} from './useParse';
+import type { Body } from './body';
 
 export class Layout extends Component {
     static template = template;
 
     public parse = useParse();
     public layout = inject<Layout | null>(LAYOUT, null);
+    private body = inject<Body | null>(BODY, null);
 
     init() {
         provide(LAYOUT, this);
@@ -32,7 +34,7 @@ export class Layout extends Component {
     private getStyles() {
         const style = this.get<string>('style');
         const layout = this.layout;
-        if (!layout) return style;
+        if (!layout || this.body) return style;
 
         const {hasFixedHeader, headerHeight, hasFixedAside, asideWidth} = layout.parse();
         if (!hasFixedHeader && !hasFixedAside) return style;

package/components/layout/styles.ts

@@ -1,6 +1,6 @@
 import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
-import {deepDefaults, getLeft} from '../../styles/utils';
+import {deepDefaults, getLeft, setAlpha} from '../../styles/utils';
 import '../../styles/global';
 import {menu} from '../menu/styles';
 
@@ -12,12 +12,12 @@ const defaults = {
     get color() { return menu.item.color },
     get bgColor() { return menu.bgColor },
     light: {
-        get color() { return menu.light.bgColor },
+        get color() { return menu.light.item.color },
         get bgColor() { return menu.light.bgColor },
         get border() { return menu.light.border },
     },
     white: {
-        get color() { return menu.white.bgColor },
+        get color() { return menu.white.item.color },
         get bgColor() { return menu.white.bgColor },
         get border() { return menu.white.border },
     },
@@ -69,6 +69,19 @@ export function makeHeaderStyles() {
             top: 0;
             z-index: ${theme.midZIndex + 1};
         }
+        > .k-menu {
+            background: transparent !important;
+        }
+
+        &.k-blur {
+            backdrop-filter: blur(20px);
+            background: ${setAlpha(layout.bgColor, 0.1)};
+        }
+        &.k-box-shadow {
+            border-bottom: none !important;
+            box-shadow: ${theme.boxShadow};
+        }
+
         ${themes.map(theme => {
             if (theme === 'dark') return;
             const styles = layout[theme];
@@ -77,6 +90,9 @@ export function makeHeaderStyles() {
                     background: ${styles.bgColor};
                     color: ${styles.color};
                     border-bottom: ${styles.border};
+                    &.k-blur {
+                        background: ${setAlpha(styles.bgColor, 0.1)};
+                    }
                 }
             `
         })}

package/components/menu/styles.ts

@@ -230,8 +230,8 @@ export function makeTitleStyles() {
     return css`
         display: flex;
         align-items: center;
-        padding: ${menu.item.padding};
-        color: ${menu.item.color};
+        padding: ${item.padding};
+        color: ${item.color};
         white-space: nowrap;
         overflow: hidden;
         flex-wrap: nowrap;
@@ -253,6 +253,12 @@ export function makeItemStyles() {
             flex: 1;
             display: flex;
             align-items: center;
+            min-width: 0;
+            span {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                min-width: 0;
+            }
         }
         .k-menu-arrow {
             transition: transform ${menu.transition};

package/components/menu/useDropdown.ts

@@ -1,4 +1,4 @@
-import {useInstance, VNodeComponentClass, onBeforeMount, onBeforeUpdate, inject} from 'intact';
+import {useInstance, VNodeComponentClass, onBeforeMount, onBeforeUpdate, inject, createVNode} from 'intact';
 import {Menu, MenuItem, MenuProps} from './';
 import {Icon} from '../icon';
 import {
@@ -52,6 +52,10 @@ export function useDropdown(rootMenu: Menu, parentMenu: Menu) {
                     iconVNode = vNode;
                 }
             } else {
+                if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
+                    // wrap with span for showing text ellipsis
+                    vNode = createVNode('span', null, vNode);
+                }
                 titleVNodes.push(vNode);
             }
         });

package/components/message/demos/config.md

@@ -1,5 +1,5 @@
 ---
-title: 隐藏Icon或关闭按钮
+title: 隐藏Icon或展示关闭按钮
 order: 1.1
 ---
 
@@ -32,7 +32,7 @@ export default class extends Component {
         Message[type]({
             content: type,
             duration: 3000,
-            closable: false,
+            closable: true,
             hideIcon: true,
         });
     }

package/components/message/index.md

@@ -15,7 +15,7 @@ sidebar: doc
 | content | 提示内容 | `string` | `VNode` | `undefined` |
 | duration | 提示展示多长时间后自动关闭，当传入0时，提示将会一直展示。单位ms | `number` | `5000` |
 | type | 提示类型 | `"info"` | `"error"` | `"success"` | `"warning"`|
-| closable | 是否展示关闭按钮 | `boolean` | `true` |
+| closable | 是否展示关闭按钮 | `boolean` | `false` |
 | hideIcon | 是否隐藏文字前面的icon | `boolean` | `false` |
 
 # 静态方法

package/components/message/message.ts

@@ -33,7 +33,7 @@ let id = 0;
 const defaults = (): Partial<MessageProps> => ({
     duration: 5000,
     type: 'info',
-    closable: true,
+    closable: false,
 });
 
 let messages: Messages | null = null;

package/components/pagination/styles.ts

@@ -32,7 +32,7 @@ const defaults = deepDefaults(
             gap: '6px',
             padding: '0 3px',
             get borderRadius() { return theme.borderRadius },
-            get hoverBgColor() { return theme.color.hoverBg }
+            // get hoverBgColor() { return theme.color.hoverBg }
         },
         // goto
         goto: {
@@ -82,9 +82,6 @@ export function makeStyles() {
                 &:last-of-type {
                     margin: 0 !important;
                 }
-                &:hover {
-                    background: ${pagination.btn.hoverBgColor};
-                }
             }
             .k-icon {
                 font-size: 18px;

package/components/popover/styles.ts

@@ -3,7 +3,7 @@ import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 
 const defaults = {
-    width: '240px',
+    width: '320px',
     padding: '8px 16px',
     gap: '8px',
     title: {