@king-design/intact 3.1.4-beta.0 → 3.1.4-beta.2

package/components/button/demos/group.md

@@ -68,6 +68,12 @@ import {Button, ButtonGroup, Icon} 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

package/components/button/styles.ts

@@ -459,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;
@@ -497,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) {
@@ -535,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/dropdown/dropdown.ts

@@ -112,7 +112,13 @@ export class Dropdown<
             }
         }
 
-        const [trigger, menu] = children as DropdownChildren;
+        let [trigger, menu] = children as DropdownChildren;
+        /**
+         * In vue-legacy, if the menu is TooltipContent, the menu will be InUsed when update,
+         * so we clone it here, #954
+         */
+        menu = directClone(menu);
+
         const props = this.initEventCallbacks(); 
         let {className, value, container} = this.get();
         const { k } = this.config;

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/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/table/exportTable.ts

@@ -70,12 +70,15 @@ function pushTextContext(rows: string[], dom: HTMLElement, content: string | und
 
 export function download(content: string, filename: string) {
     if ((navigator as any).msSaveBlob) { // IE10+
-        const blob = new Blob([content], { type: 'text/csv;charset=utf-8' });
+        const blob = new Blob(['\uFEFF' + content], { type: 'text/csv;charset=utf-8' });
         (navigator as any).msSaveBlob(blob, filename);
     } else {
         const link = document.createElement('a');
         if ('download' in link) {
-            const blob = new Blob([content], { type: 'text/csv;charset=utf-8' });
+            /**
+             * should add \uFEFF, otherwise it will be error codes in MSExcel
+             */
+            const blob = new Blob(['\uFEFF' + content], { type: 'text/csv;charset=utf-8' });
             const url = URL.createObjectURL(blob);
             link.setAttribute('href', url);
             link.setAttribute('download', filename);

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;
+        }
     }
 }