@king-design/intact 3.1.3 → 3.1.4-beta.1

package/components/button/demos/disabled.md

@@ -6,12 +6,12 @@ order: 5
 添加`disabled`属性，可以禁用按钮
 
 ```vdt
-import {Button} from 'kpc';
+import {Button, Icon} from 'kpc';
 
 <div>
     <Button disabled>disabled</Button>
     <Button disabled type="none">disabled text</Button>
-    <Button disabled icon circle><i class="k-icon k-icon-search"></i></Button>
+    <Button disabled icon circle><Icon class="k-icon-search" /></Button>
     <Button disabled type="link">link</Button>
     <Button disabled type="flat">flat</Button>
 </div>

package/components/button/demos/ghost.md

@@ -6,11 +6,11 @@ order: 6
 给组件添加`ghost`属性，可以展示透明背景的按钮，常用于深色背景下
 
 ```vdt
-import {Button} from 'kpc';
+import {Button, Icon} from 'kpc';
 
 <div class="wrapper">
-    <Button ghost>default</Button>
-    <Button type="primary" ghost>primay</Button>
+    <Button ghost><Icon class="k-icon-left" />default</Button>
+    <Button type="primary" ghost>primay<Icon class="k-icon-right" /></Button>
     <Button type="warning" ghost>warning</Button>
     <Button type="danger" ghost>danger</Button>
     <Button type="success" ghost>success</Button>

package/components/button/demos/group.md

@@ -7,7 +7,7 @@ order: 1
 可以是按钮组纵向排列。给`ButtonGroup`添加`checkType`属性，可以使按钮组拥有单选或复选能力。
 
 ```vdt
-import {Button, ButtonGroup} from 'kpc';
+import {Button, ButtonGroup, Icon} from 'kpc';
 
 <div>
     <ButtonGroup>
@@ -27,10 +27,10 @@ import {Button, ButtonGroup} from 'kpc';
     </ButtonGroup>
     <ButtonGroup>
         <Button type="primary">
-            <i class="k-icon k-icon-left"></i>上一页
+            <Icon class="k-icon-left" />上一页
         </Button>
         <Button type="primary">
-            下一页<i class="k-icon k-icon-right"></i>
+            下一页<Icon class="k-icon-right" />
         </Button>
     </ButtonGroup>
     <br /><br />
@@ -68,6 +68,12 @@ import {Button, ButtonGroup} from 'kpc';
         <Button value="guangzhou">广州</Button>
         <Button value="shenzhen">深圳</Button>
     </ButtonGroup>
+    <ButtonGroup seperate>
+        <Button value="beijing" type="primary" disabled>北京</Button>
+        <Button value="shanghai">上海</Button>
+        <Button value="guangzhou">广州</Button>
+        <Button value="shenzhen">深圳</Button>
+    </ButtonGroup>
 </div>
 ```
 

package/components/button/index.vdt

@@ -8,13 +8,13 @@ import {button as theme} from './styles';
 let {
     type, className, size, icon, circle, ref, key, tabindex,
     tagName, htmlType, fluid, children, loading, disabled,
-    name, ghost
+    name, ghost,
 } = this.get();
 
-const checked = this.isChecked();
-if (!this.config) debugger;
 const { cls, k } = this.config;
 
+const checked = this.isChecked();
+
 const isIcon = child => (
     child.tag === Icon ||
     child.className && child.className.indexOf('icon') > -1
@@ -41,8 +41,8 @@ if (!icon && Array.isArray(children)) {
 
 const classNameObj = {
     [cls('btn')]: true,
-    [cls(type)]: type !== 'default',
     [cls(size)]: size !== 'default',
+    [cls(type)]: true,
     [cls(`btn-icon`)]: icon,
     [className]: className, 
     [cls('circle')]: circle,

package/components/button/styles.ts

@@ -182,6 +182,19 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
             .${k}-icon {
                 color: inherit;
             }
+            &.${k}-default,
+            &.${k}-none,
+            &.${k}-flat {
+                .${k}-icon {
+                    color: ${theme.color.lightBlack}; 
+                }
+                &:hover {
+                    .${k}-icon {
+                        color: inherit;
+                    }
+                }
+            }
+
             &:hover,
             &:focus {
                 border-color: ${button.hoverBorderColor};
@@ -262,6 +275,9 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
 
             // disabled
             &.${k}-disabled {
+                .${k}-icon {
+                    color: inherit;
+                }
                 &, &:hover {
                     color: ${button.disabled.color};
                     background: ${button.disabled.bgColor};
@@ -347,6 +363,9 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
                 background: transparent;
                 color: ${button.ghost.color};
                 border-color: ${button.ghost.borderColor};
+                .${k}-icon {
+                    color: inherit;
+                }
                 &:hover,
                 &:active {
                     background: transparent;
@@ -440,7 +459,7 @@ export const makeButtonGroupStyles = cache(function makeButtonGroupStyles(k: str
         }
 
         // horizontal
-        &:not(.${k}-vertical) {
+        &:not(.${k}-vertical):not(.${k}-seperate) {
             > .${k}-btn {
                 &:not(:first-child) {
                     margin-left: -1px;
@@ -478,7 +497,7 @@ export const makeButtonGroupStyles = cache(function makeButtonGroupStyles(k: str
         }
             
         // vertical
-        &.${k}-vertical {
+        &.${k}-vertical:not(.${k}-seperate) {
             flex-direction: column;
             > .${k}-btn {
                 &:not(.${k}-btn-icon) {
@@ -516,9 +535,6 @@ export const makeButtonGroupStyles = cache(function makeButtonGroupStyles(k: str
         // seperate
         &.${k}-seperate {
             gap: 8px;
-            > .${k}-btn {
-                border-radius: ${button.borderRadius} !important;
-            }
         }
     `;
 });

package/components/card/demos/size.md

@@ -0,0 +1,34 @@
+---
+title: 尺寸
+order: 4
+---
+
+通过`size`属性可以指定组件的尺寸（主要改变padding）：`large`, `default`,`small`, `mini`。
+
+```vdt
+import {Card} from 'kpc';
+
+<div>
+    <Card title="用户信息" type="border" size="large">
+        <div>卡片内容</div>
+        <div>卡片内容</div>
+    </Card>
+    <Card title="用户信息" type="border">
+        <div>卡片内容</div>
+        <div>卡片内容</div>
+    </Card>
+    <Card title="用户信息" type="border" size="small">
+        <div>卡片内容</div>
+        <div>卡片内容</div>
+    </Card>
+    <Card title="用户信息" type="border" size="mini">
+        <div>卡片内容</div>
+        <div>卡片内容</div>
+    </Card>
+</div>
+```
+
+```styl
+.k-card
+    margin-bottom 16px
+```

package/components/card/index.md

@@ -13,6 +13,7 @@ sidebar: doc
 | --- | --- | --- | --- |
 | title | 卡片标题 | `string` | `VNode` | `undefined` | 
 | type | 卡片类型 | `"shadow"` | `"border"` | `"none"` | `"shadow"` |
+| size | 卡片尺寸 | `"default"` | `"small"` | `"mini"` | `"default"` |
 
 ## CardColumn
 

package/components/card/index.ts

@@ -2,10 +2,12 @@ import {Component, VNode, TypeDefs} from 'intact';
 import template from './index.vdt';
 export * from './column';
 import { useConfigContext } from '../config';
+import {Sizes} from '../types';
 
 export interface CardProps {
     title?: string | VNode
     type?: 'shadow' | 'border' | 'none',
+    size?: Sizes,
 }
 
 export interface CardEvents { }
@@ -19,10 +21,12 @@ export interface CardBlocks {
 const typeDefs: Required<TypeDefs<CardProps>> = {
     title: [String, VNode],
     type: ['shadow', 'border', 'none'],
+    size: String,
 };
 
 const defaults = (): Partial<CardProps> => ({
-    type: 'shadow'
+    type: 'shadow',
+    size: 'default',
 });
 
 export class Card extends Component<CardProps, CardEvents, CardBlocks> {

package/components/card/index.vdt

@@ -3,7 +3,7 @@ import {CardColumn} from './column';
 import {makeStyles} from './styles';
 
 const {
-    children, className, title, type
+    children, className, title, type, size,
 } = this.get();
 const { k } = this.config;
 
@@ -25,6 +25,7 @@ const classNameObj = {
     [`${k}-none`]: type === 'none',
     [`${k}-no-header`]: !hasHeader,
     [`${k}-card-grid`]: hasColumn,
+    [`${k}-${size}`]: size !== 'default',
     [className]: className,
     [makeStyles(k)]: true,
 };

package/components/card/styles.ts

@@ -6,12 +6,24 @@ import { cache } from '../utils';
 
 const defaults = {
     border: '1px solid #e5e5e5',
-    padding: '16px',
+    padding: '24px',
     get boxShadow() { return theme.boxShadow },
     get borderRadius() {return theme.largeBorderRadius},
     headerHeight: '48px',
     headerFontSize: '14px',
     bgColor: '#fff',
+    large: {
+        padding: '32px',
+        headerHeight: '48px',
+    },
+    small: {
+        padding: '16px',
+        headerHeight: '48px',
+    },
+    mini: {
+        padding: '8px',
+        headerHeight: '32px',
+    }
 };
 
 let card: typeof defaults;
@@ -20,22 +32,23 @@ setDefault(() => {
     makeStyles?.clearCache();
 });
 
+const sizes = ['large', 'small', 'mini'] as const;
+
 export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         border-radius: ${card.borderRadius};
         background: ${card.bgColor};
         .${k}-card-header {
             height: ${card.headerHeight};
-            line-height: ${card.headerHeight};
             padding: 0 ${card.padding};
+            display: flex;
+            align-items: center;
         }
         .${k}-card-title {
             font-size: ${card.headerFontSize};
-            display: inline-block;
+            flex: 1;
         }
         .${k}-card-extra {
-            float: right;
-            height: 100%;
             display: flex;
             align-items: center;
         }
@@ -90,5 +103,30 @@ export const makeStyles = cache(function makeStyles(k: string) {
                 justify-content: center;
             }
         }
+
+        // size
+        ${sizes.map(size => {
+            const { padding, headerHeight } = card[size];
+            return css`
+                &.${k}-${size} {
+                    .${k}-card-header {
+                        padding: 0 ${padding};
+                        height: ${headerHeight};
+                    }
+                    .${k}-card-body {
+                        padding: 0 ${padding} ${padding};
+                    }
+                    &.${k}-border,
+                    &.${k}-no-header {
+                        .${k}-card-body {
+                            padding-top: ${padding};
+                        }
+                    }
+                    .${k}-card-column {
+                        padding: ${padding};
+                    }
+                }
+            `
+        })} 
     `;
 });

package/components/carousel/useAutoplay.ts

@@ -4,7 +4,7 @@ import type {Carousel} from './';
 export function useAutoplay(next: () => void) {
     const instance = useInstance() as Carousel;
 
-    let timer: number;
+    let timer: number | null = null;
     let ms: number;
 
     instance.on('$receive:autoplay', v => {
@@ -28,7 +28,10 @@ export function useAutoplay(next: () => void) {
     }
 
     function stop() {
-        window.clearTimeout(timer);
+        if (timer) {
+            window.clearTimeout(timer);
+            timer = null;
+        }
     }
 
     onBeforeUnmount(stop);

package/components/config/demos/basic.md

@@ -7,13 +7,29 @@ order: 0
 
 > 本例中，我们将前缀设为`kd`，可以打开调试工具查看
 
+> 对于`Message`组件，由于它是静态方法调用，我们可以通过`Message.classNamePrefix`设置样式名前缀
+
 ```vdt
 import {ConfigProvider, Button, Input} from 'kpc';
 
 <ConfigProvider value={{classNamePrefix: 'kd'}}>
-    <Button>Button</Button>
+    <Button ev-click={this.showMessage}>Button</Button>
     <div style="margin-top: 8px;">
         <Input />
     </div>
 </ConfigProvider>
 ```
+
+```ts
+import {Message} from 'kpc';
+
+Message.classNamePrefix = 'kd';
+
+export default class extends Component {
+    static template = template;
+
+    showMessage() {
+        Message.info('Message with classNamePrefix');
+    }
+}
+```

package/components/dropdown/usePosition.ts

@@ -53,18 +53,17 @@ export function usePosition() {
         let pos = instance.get('position');
         switch (pos) {
             case 'left':
-                case 'left':
-                    pos = {my: 'right-10 center', at: 'left center'};
-                    break;
-                case 'bottom':
-                    pos = {my: 'center top+10', at: 'center bottom'};
-                    break;
-                case 'right':
-                    pos = {my: 'left+10 center', at: 'right center'};
-                    break;
-                case 'top':
-                    pos = {my: 'center bottom-10', at: 'center top'};
-                    break;
+                pos = {my: 'right-10 center', at: 'left center'};
+                break;
+            case 'bottom':
+                pos = {my: 'center top+10', at: 'center bottom'};
+                break;
+            case 'right':
+                pos = {my: 'left+10 center', at: 'right center'};
+                break;
+            case 'top':
+                pos = {my: 'center bottom-10', at: 'center top'};
+                break;
         }
         position(findDomFromVNode(instance.menuVNode!, true) as HTMLElement, {
             my: 'left top+8',

package/components/editable/styles.ts

@@ -31,7 +31,7 @@ export const makeStyles = cache(function makeStyles(k: string) {
 
         // invalid
         &.${k}-invalid {
-            .${k}-input-inner {
+            .${k}-input-wrapper {
                 border: ${editable.invalid.border} !important;
             }
         }

package/components/icon/styles.ts

@@ -37,6 +37,7 @@ export const makeStyles = cache(function makeStyles(k: string, color?: string) {
         font-size: ${icon.fontSize.default};
         line-height: 1;
         // display: inline-block;
+        font-weight: normal;
         ${sizes.map(size => {
             const fontSize = icon.fontSize[size];
             return css`

package/components/input/styles.ts

@@ -105,6 +105,7 @@ export const makeStyles = cache(function makeStyles(k: string) {
             background: transparent;
             padding: 0;
             width: 0; // must set width to 0, otherwise it has min width
+            max-width: 100%;
             &::placeholder {
                 color: ${input.placeholderColor};
             }

package/components/message/message.ts

@@ -43,24 +43,28 @@ export class Message extends Component<MessageProps> {
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
+    static classNamePrefix: string;
 
     static notice(
         content: Children | Partial<MessageProps>,
         duration: number = 3000,
         type: MessageProps['type'] ='info'
     ) {
-        if (!messages) {
-            const container = document.createElement('div');
-            document.body.append(container);
-            render(h(Messages, {ref: i => messages = i}), container); 
-        }
-
         if (isObject(content) && !(content as any).tag) {
             content = {...content, type, key: id++} as Partial<Props<MessageProps>>;
         } else {
             content = {content, duration, type, key: id++} as Partial<Props<MessageProps>>;
         }
 
+        if (!messages) {
+            const container = document.createElement('div');
+            document.body.append(container);
+            render(h(Messages, {
+                ref: (i: Messages | null) => messages = i,
+                classNamePrefix: Message.classNamePrefix,
+            } as any), container); 
+        }
+
         messages!.notice(h(Message, content));
     }
     static info(content: Children | Partial<MessageProps>, duration?: number) {

package/components/message/message.vdt

@@ -3,7 +3,7 @@ import {Icon} from '../icon';
 import {getRestProps} from '../utils';
 import {makeMessageStyles} from './styles';
 
-const {type, content, children, closable, hideIcon} = this.get();
+const {type, content, children, closable, hideIcon, classNamePrefix} = this.get();
 const { k } = this.config;
 
 const classNameObj = {

package/components/message/messages.ts

@@ -1,10 +1,19 @@
-import {Component, VNodeComponentClass} from 'intact';
+import {Component, VNodeComponentClass, TypeDefs} from 'intact';
 import template from './messages.vdt';
 import type {Message} from './message';
 import { useConfigContext } from '../config';
 
+export interface MessagesProps {
+    classNamePrefix?: string
+}
+
+const typeDefs: Required<TypeDefs<MessagesProps>> = {
+    classNamePrefix: String,
+};
+
 export class Messages extends Component {
     static template = template;
+    static typeDefs = typeDefs;
 
     private messages: VNodeComponentClass<Message>[] = [];
     private config = useConfigContext();

package/components/message/messages.vdt

@@ -1,12 +1,15 @@
 import {TransitionGroup, Transition} from 'intact';
 import {makeMessagesStyles} from './styles';
+import { ConfigProvider } from '../config';
 
-const { k } = this.config;
+const k =  this.get('classNamePrefix') || this.config.k;
 
-<div class={{[`${k}-messages`]: true, [makeMessagesStyles(k)]: true}}>
-    <TransitionGroup>
-        <template v-for={this.messages} key={$value.key}>
-            {$value}
-        </template>
-    </TransitionGroup>
-</div>
+<ConfigProvider value={{classNamePrefix: k}}>
+    <div class={{[`${k}-messages`]: true, [makeMessagesStyles(k)]: true}}>
+        <TransitionGroup>
+            <template v-for={this.messages} key={$value.key}>
+                {$value}
+            </template>
+        </TransitionGroup>
+    </div>
+</ConfigProvider>

package/components/table/table.ts

@@ -12,7 +12,7 @@ import {useExpandable} from './useExpandable';
 import {useSelected} from './useSelected';
 import {useTree} from './useTree';
 import {TooltipProps, Tooltip} from '../tooltip/tooltip';
-import {useRestRowStatus} from './useRestRowStatus';
+import {useResetRowStatus} from './useResetRowStatus';
 import {exportTable} from './exportTable';
 import {useResizable} from './useResizable';
 import {useDraggable} from './useDraggable';
@@ -208,7 +208,7 @@ export class Table<
     private sortable = useSortable();
     private expandable = useExpandable();
     private selected = useSelected();
-    private resetRowStatus = useRestRowStatus(this.disableRow.getAllKeys);
+    private resetRowStatus = useResetRowStatus(this.disableRow.getAllKeys);
     private draggable = useDraggable(this.pagination.data);
     private stickyScrollbar = useStickyScrollbar(
         this.stickyHeader.elementRef,

package/components/table/useFixedColumns.ts

@@ -107,7 +107,7 @@ export function useFixedColumns(
 
     function updateScrollPositionOnResize() {
         const scrollDom = scrollRef.value!;     
-        if (scrollDom.scrollWidth - scrollDom.offsetWidth <= 0) {
+        if (!hasFixed.value || scrollDom.scrollWidth - scrollDom.offsetWidth <= 0) {
             scrollPosition.set(null);
         } else {
             setScrollPosition(scrollRef.value!.scrollLeft);

package/components/table/{useRestRowStatus.ts → useResetRowStatus.ts}

@@ -2,7 +2,7 @@ import {useInstance, onBeforeUnmount, onUpdated} from 'intact';
 import type {Table, TableRowKey} from './table';
 import {addOrRemove} from './useChecked';
 
-export function useRestRowStatus(
+export function useResetRowStatus(
     getAllKeys: () => TableRowKey[]
 ) {
     const instance = useInstance() as Table;

package/components/tabs/tab.ts

@@ -25,6 +25,7 @@ const typeDefs: Required<TypeDefs<TabProps>> = {
 
 export class Tab extends Component<TabProps, TabEvents> {
     static template = template;
+    static typeDefs = typeDefs;
 
     private tabs = inject<Tabs>(TABS)!;
     private config = useConfigContext();

package/components/wave/index.ts

@@ -37,7 +37,7 @@ export class Wave extends Component<WaveProps> {
 
     private instance: HTMLElement | null = null;
     private className!: string;
-    private timer: number = 0;
+    private timer: number | null = null;
     private config = useConfigContext();
 
     private initClassName() {
@@ -91,6 +91,9 @@ export class Wave extends Component<WaveProps> {
 
         node.classList.remove(this.className);
         node.removeEventListener('animationend', this.resetAnimation);
-        clearTimeout(this.timer);
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
     }
 }

package/es/components/button/index.vdt.js

@@ -31,11 +31,10 @@ export default function ($props, $blocks, $__proto__) {
       name = _this$get.name,
       ghost = _this$get.ghost;
 
-  var checked = this.isChecked();
-  if (!this.config) debugger;
   var _this$config = this.config,
       cls = _this$config.cls,
       k = _this$config.k;
+  var checked = this.isChecked();
 
   var isIcon = function isIcon(child) {
     return child.tag === Icon || child.className && child.className.indexOf('icon') > -1;
@@ -60,7 +59,7 @@ export default function ($props, $blocks, $__proto__) {
     });
   }
 
-  var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(type)] = type !== 'default', _classNameObj[cls(size)] = size !== 'default', _classNameObj[cls("btn-icon")] = icon, _classNameObj[className] = className, _classNameObj[cls('circle')] = circle, _classNameObj[cls('loading')] = loading, _classNameObj[cls('fluid')] = fluid, _classNameObj[cls('active')] = checked, _classNameObj[cls('disabled')] = disabled || loading, _classNameObj[cls('ghost')] = ghost, _classNameObj[makeButtonStyles(k, iconSide)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(size)] = size !== 'default', _classNameObj[cls(type)] = true, _classNameObj[cls("btn-icon")] = icon, _classNameObj[className] = className, _classNameObj[cls('circle')] = circle, _classNameObj[cls('loading')] = loading, _classNameObj[cls('fluid')] = fluid, _classNameObj[cls('active')] = checked, _classNameObj[cls('disabled')] = disabled || loading, _classNameObj[cls('ghost')] = ghost, _classNameObj[makeButtonStyles(k, iconSide)] = true, _classNameObj);
 
   var loadingIcon = _$cc(Icon, {
     'className': _$cn("ion-load-c " + k + "-icon-loading"),