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

package/components/steps/styles.ts

@@ -1,6 +1,6 @@
 import {css, cx} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
-import {deepDefaults}  from '../../styles/utils';
+import {deepDefaults, palette}  from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
@@ -8,19 +8,21 @@ const defaults = {
     get titleColor() { return theme.color.title },
     get desColor() { return theme.color.lightBlack },
     get markColor() { return theme.color.placeholder },
-    get markborder() { return `1px solid ${theme.color.placeholder}` },
     markBgColor: '#fff',
 
     default: {
         get height() { return theme.default.height }, 
         get bgColor() { return theme.color.bg },
+        get markborder() { return `1px solid ${theme.color.placeholder}` },
         markWidth: '16px',
+        padding: '16px',
     },
 
     // done
     done: {
         get markColor() { return theme.color.primary }, 
         get markBorderColor() { return theme.color.primary },
+        get markHoverBgColor() { return palette(theme.color.primary, -4) },
         markBgColor: '#fff',
         get mainColor() { return theme.color.primary },
     },
@@ -43,12 +45,14 @@ const defaults = {
 
     // line
     line: {
+        get markborder() { return `2px solid ${theme.color.placeholder}` },
         markWidth: '32px',
-        markFontSize: '24px',
+        markFontSize: '18px',
         get lineColor() { return theme.color.border},
+        lineWidth: '2px',
         titleGap: '16px',
         descGap: '4px',
-        contentMaxWidth: '200px',
+        contentWidth: '200px',
     },
 
     // simple
@@ -57,6 +61,17 @@ const defaults = {
         get markBgColor() { return theme.color.placeholder },
         get doneMarkBgColor() { return theme.color.primary },
         get errorMarkBgColor() { return theme.color.danger },
+    },
+
+    // vertical
+    vertical: {
+        line: {
+            minHeight: '100px',
+            padding: '16px',
+        },
+        simple: {
+            titleGap: '8px',
+        }
     }
 };
 
@@ -95,8 +110,13 @@ export function makeStepsStyles() {
         &.k-clickable {
             .k-done {
                 cursor: pointer;
+                .k-step-wrapper:hover .k-step-mark {
+                    background: ${steps.done.markHoverBgColor};
+                }
             }
         }
+
+        ${makeVerticalStyles()};
     `;
 }
 
@@ -111,6 +131,7 @@ function makeDefaultStyles() {
         .k-step-wrapper {
             ${center()};
             height: 100%;
+            padding: 0 ${defaults.padding};
         }
         .k-step-mark {
             width: ${defaults.markWidth};
@@ -132,12 +153,34 @@ function makeDefaultStyles() {
                 display: none;
             }
         } 
+        &:not(.k-vertical) {
+            ${makeArrow(false)};
+        }
+    `
+}
+
+function makeArrow(isVertical: boolean) {
+    const defaults = steps.default; 
+    const offset = `calc(-1 * (${defaults.height} / 2 + ${steps.gap}))`;
+    const size = `calc(${defaults.height} / 2 + ${steps.gap})`;
+
+    return css`
         .k-step-tail {
             position: absolute;
-            top: 0;
-            right: calc(-1 * (${defaults.height} / 2 + ${steps.gap}));
-            width: calc(${defaults.height} / 2 + ${steps.gap});
-            height: ${defaults.height}; 
+            ${!isVertical 
+                ? `
+                    top: 0;
+                    right: ${offset};
+                    width: ${size};
+                    height: ${defaults.height};
+                `
+                : `
+                    left: 0;
+                    bottom: ${offset};
+                    height: ${size};
+                    width: ${defaults.height};
+                `
+            }
             overflow: hidden;
             z-index: 1;
             &:after, &:before {
@@ -146,25 +189,27 @@ function makeDefaultStyles() {
                 border-style: solid;
                 border-color: transparent;
                 position: absolute;
-                top: calc(-1 * ${steps.gap});
+                ${isVertical ? 'left' : 'top'}: calc(-1 * ${steps.gap});
             }
             &:after {
-                border-left-color: ${defaults.bgColor};
-                left: calc(-1 * ${steps.gap});
+                border-${isVertical ? 'top' : 'left'}-color: ${defaults.bgColor};
+                ${isVertical ? 'top' : 'left'}: calc(-1 * ${steps.gap});
             }
             &:before {
-                border-left-color: #fff;
-                left: 0;
+                border-${isVertical ? 'top' : 'left'}-color: #fff;
+                ${isVertical ? 'top' : 'left'}: 0;
             }
         }
         .k-step:not(:first-of-type) {
-            padding-left: calc(${defaults.height} / 2 + ${steps.gap});
+            padding-${isVertical ? 'top' : 'left'}: calc(${defaults.height} / 2 + ${steps.gap});
         }
     `
 }
 
 function makeLineStyles() {
-    const line = defaults.line;
+    const line = steps.line;
+    const top = `calc(${line.markWidth} / 2 - ${line.lineWidth} / 2)`;
+
     return css`
         .k-step {
             display: flex;
@@ -173,11 +218,13 @@ function makeLineStyles() {
             display: inline-block;
             text-align: center;
             position: relative;
+            width: ${line.contentWidth};
         }
         .k-step:last-of-type {
             flex: 0 0 auto;
         }
         .k-step-mark {
+            border: ${line.markborder};
             width: ${line.markWidth};
             height: ${line.markWidth};
             position: relative;
@@ -196,7 +243,6 @@ function makeLineStyles() {
         .k-step-content {
             margin-top: ${line.descGap};
             color: ${theme.color.placeholder};
-            max-width: ${line.contentMaxWidth};
         }
         
         // draw connected line
@@ -205,11 +251,11 @@ function makeLineStyles() {
             &:after {
                 content: '';
                 display: block;
-                height: 1px;
+                height: ${line.lineWidth};
                 background: ${line.lineColor};
                 width: 50%;
                 position: absolute;
-                top: calc(${line.markWidth} / 2);
+                top: ${top};
             }
             &:after {
                 right: 0;
@@ -223,9 +269,9 @@ function makeLineStyles() {
         }
         .k-step-tail {
             flex: 1;
-            height: 1px;
+            height: ${line.lineWidth};
             background: ${line.lineColor};
-            margin-top: calc(${line.markWidth} / 2);
+            margin-top: ${top};
         }
         
         // status
@@ -253,12 +299,13 @@ function makeLineStyles() {
 }
 
 function makeLineCompactStyles() {
-    const line = defaults.line;
+    const line = steps.line;
 
     return css`
         .k-step-wrapper {
             display: inline-flex;
             text-align: left;
+            width: auto;
             &:before, &:after {
                 display: none;
             }
@@ -281,7 +328,7 @@ function makeLineCompactStyles() {
                 content: '';
                 display: block;
                 flex: 1;
-                height: 1px;
+                height: ${line.lineWidth};
                 background: ${line.lineColor};
                 margin-left: ${line.titleGap};
             }
@@ -301,7 +348,9 @@ function makeLineCompactStyles() {
 }
 
 function makeSimpleStyles() {
-    const simple = defaults.simple;
+    const simple = steps.simple;
+    const top = `calc(${simple.markWidth} / 2 - ${steps.line.lineWidth} / 2)`;
+
     return css`
         .k-step-mark {
             width: ${simple.markWidth};
@@ -312,14 +361,14 @@ function makeSimpleStyles() {
             font-size: 0; // eliminate the gap
             &:before,
             &:after {
-                top: calc(${simple.markWidth} / 2);
+                top: ${top};
             }
         }
         .k-step-main {
             font-size: ${theme.default.fontSize};
         }
         .k-step-tail {
-            margin-top: calc(${simple.markWidth} / 2);
+            margin-top: ${top};
         }
         .k-step {
             &.k-done {
@@ -369,7 +418,7 @@ export function makeCommonStyles() {
         }
         .k-step-mark {
             ${center('inline-flex')};
-            border: ${steps.markborder};
+            border: ${steps.default.markborder};
             border-radius: 50%;
             vertical-align: top;
             color: ${steps.markColor};
@@ -377,3 +426,87 @@ export function makeCommonStyles() {
         }
     `;
 }
+
+export function makeVerticalStyles() {
+    const verticalLine = steps.vertical.line;
+
+    return css`
+        &.k-vertical {
+            &.k-default {
+                height: auto;
+                width: ${steps.default.height};
+                writing-mode: vertical-rl;
+                letter-spacing: 1px;
+                .k-step-wrapper {
+                    width: 100%;
+                    padding: ${steps.default.padding} 0;
+                }
+                .k-step-mark {
+                    margin-right: 0;
+                    margin-bottom: ${steps.gap};
+                }
+                .k-step-title {
+                    padding-right: 0;
+                    padding-bottom: ${steps.gap};
+                }
+
+                ${makeArrow(true)};
+            }
+
+            &.k-line,
+            &.k-line-compact,
+            &.k-simple {
+                flex-direction: column;
+                .k-step {
+                    flex: none;
+                    min-height: ${verticalLine.minHeight};
+                }
+                .k-step-wrapper {
+                    display: flex;
+                    width: auto;
+                    text-align: left;
+                }
+                .k-step-main {
+                    flex: 1;
+                    padding: 0 0 ${verticalLine.padding} ${verticalLine.padding};
+                }
+                .k-step-title {
+                    display: flex;
+                    align-items: center;
+                    height: ${steps.line.markWidth};
+                    &:after {
+                        display: none;
+                    }
+                }
+                
+                // connected line
+                .k-step-wrapper {
+                    &:before, &:after {
+                        display: none;
+                    }
+                }
+                .k-step-tail {
+                    position: absolute;
+                    left: calc(${steps.line.markWidth} / 2 - ${steps.line.lineWidth} / 2);
+                    height: 100%;
+                    width: ${steps.line.lineWidth};
+                    background: ${steps.line.lineColor};
+                }
+                .k-step:last-of-type {
+                    .k-step-tail {
+                        display: none;
+                    }
+                }
+            }
+            &.k-simple {
+                .k-step-tail {
+                    left: calc(${steps.simple.markWidth} / 2 - ${steps.line.lineWidth} / 2);
+                }
+                .k-step-title {
+                    height: ${steps.simple.markWidth};
+                    margin-bottom: ${steps.vertical.simple.titleGap};
+                }
+            }
+        }
+    `
+}

package/components/switch/demos/onOff.md

@@ -16,8 +16,8 @@ import {Switch} from 'kpc';
         <b:on><i class="ion-ios-checkmark-empty"></i></b:on>
         <b:off><i class="ion-ios-close-empty"></i></b:off>
     </Switch>
-     <Switch on="开" off="关" flat/>
-    <Switch value={true} flat>
+     <Switch on="开" off="关" />
+    <Switch value={true}>
         <b:on><i class="ion-ios-checkmark-empty"></i></b:on>
         <b:off><i class="ion-ios-close-empty"></i></b:off>
     </Switch>

package/components/switch/index.spec.ts

@@ -1,4 +1,5 @@
 import BasicDemo from '~/components/switch/demos/basic';
+import DisabledDemo from '~/components/switch/demos/disabled';
 import ValueDemo from '~/components/switch/demos/value';
 import WidthHeightDemo from '~/components/switch/demos/widthHeight';
 import {mount, unmount, dispatchEvent, wait} from '../../test/utils';
@@ -9,7 +10,7 @@ describe('Switch', () => {
     it('change value by clicking', async () => {
         const [instance, element] = mount(BasicDemo);
 
-        const [el, disabledEl] = element.querySelectorAll<HTMLElement>('.k-switch');
+        const [el] = element.querySelectorAll<HTMLElement>('.k-switch');
         el.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
@@ -23,8 +24,19 @@ describe('Switch', () => {
         handle.click();
         await wait();
         expect(instance.get('value')).to.be.false;
+    });
+
+    it('disabled', async () => {
+        const [instance, element] = mount(DisabledDemo);
 
-        disabledEl.click();
+        const el = element.querySelector<HTMLDivElement>('.k-switch')!;
+        el.click();
+        await wait();
+        expect(element.outerHTML).to.matchSnapshot();
+
+        dispatchEvent(el, 'mousedown', {which: 1, clientX: 0});
+        dispatchEvent(document, 'mousemove', {clientX: 30});
+        dispatchEvent(document, 'mouseup', {clientX: 30});
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
     });
@@ -32,7 +44,7 @@ describe('Switch', () => {
     it('change value by draging', async () => {
         const [instance, element] = mount(BasicDemo);
 
-        const [el, disabledEl] = element.querySelectorAll<HTMLElement>('.k-switch-handle');
+        const [el] = element.querySelectorAll<HTMLElement>('.k-switch-handle');
         dispatchEvent(el, 'mousedown', {which: 1, clientX: 0});
         dispatchEvent(document, 'mousemove', {clientX: 1});
         await wait();
@@ -62,13 +74,6 @@ describe('Switch', () => {
         dispatchEvent(document, 'mouseup', {clientX: 0});
         await wait();
         expect(instance.get('value')).to.be.true;
-
-        // disabled
-        dispatchEvent(disabledEl, 'mousedown', {which: 1, clientX: 0});
-        dispatchEvent(document, 'mousemove', {clientX: 30});
-        dispatchEvent(document, 'mouseup', {clientX: 30});
-        await wait();
-        expect(element.outerHTML).to.matchSnapshot();
     });
 
     it('drag switch which has custom width and height', async () => {

package/components/table/cell.ts

@@ -35,11 +35,10 @@ export class TableCell extends Component<TableCellProps> {
 
         let isSame = true;
         for (const key in lastProps) {
-            if (lastProps[key] !== nextProps[key]) {
-                isSame = false;
-                break;
-            }
-            if (key === 'props' && nextProps.props.$blocks) {
+            if (
+                lastProps[key] !== nextProps[key] ||
+                key === 'props' && nextProps.props.$blocks
+            ) {
                 isSame = false;
                 break;
             }

package/components/table/cell.vdt

@@ -36,7 +36,7 @@ if (columnIndex === 0 && indent) {
         class="k-table-arrow"
         ev-click={onClickArrow}
     >
-        <Icon class="ion-ios-arrow-right" size="small" />
+        <Icon class="k-icon-right" size="small" />
     </Button>
     {children}
 </td>

package/components/table/column.vdt

@@ -4,7 +4,7 @@ import {Button} from '../button';
 import {Icon} from '../icon';
 import {Checkbox} from '../checkbox';
 import {makeGroupMenuStyles} from './styles';
-import {isStringOrNumber, get} from 'intact-shared';
+import {isStringOrNumber, get, isArray} from 'intact-shared';
 import {context as GroupContext} from './useGroup';
 import {context as SortableContext} from './useSortable';
 import {linkEvent} from 'intact';
@@ -16,7 +16,11 @@ import {Input} from '../input';
 import {_$} from '../../i18n';
 
 const {title, fixed, group, multiple, key, sortable, cols, rows} = this.get();
-const {onSelect, isChecked, getGroupText, keywords, filteredGroup} = this.group;
+const {
+    onSelect, isChecked, keywords, filteredGroup,
+    onShow, reset, confirm, dropdownRef,
+    localGroupValue, isEmptyValue,
+} = this.group;
 
 <TableContext.Consumer>
     {checkType => {
@@ -35,14 +39,12 @@ const {onSelect, isChecked, getGroupText, keywords, filteredGroup} = this.group;
                                         }
 
                                         const groupValue = currentGroup && currentGroup[key];
-                                        const groupText = getGroupText(groupValue);
-
                                         const type = sort && sort.key === key && sort.type;
 
                                         let checked;
                                         return <th className={classNameObj}
                                             style={style}
-                                            title={isStringOrNumber(title) ? title + (groupText || '') : null}
+                                            title={isStringOrNumber(title) ? title : null}
                                             ev-click={sortable ? linkEvent(key, onChangeSort) : null}
                                             colspan={cols}
                                             rowspan={rows}
@@ -58,19 +60,19 @@ const {onSelect, isChecked, getGroupText, keywords, filteredGroup} = this.group;
                                             <div class="k-table-title">
                                                 <div class="k-table-title-text c-ellipsis">
                                                     <b:title>{title}</b:title>
-                                                    {groupText}
                                                 </div>
                                                 <Dropdown v-if={group}
                                                     position={{my: 'center top', at: 'center bottom+5', collision: 'flipfit'}}
                                                     key="dropdown"
                                                     trigger="click"
-                                                    ev-show={() => keywords.set('')}
+                                                    ev-show={() => onShow(groupValue)}
+                                                    ref={dropdownRef}
                                                 >
-                                                    <Button icon size="mini" class="k-table-group"
+                                                    <Icon class="k-icon-down-squared k-table-group"
                                                         ev-click={e => e._ignoreSortable = true}
-                                                    >
-                                                        <Icon class="ion-android-arrow-dropdown" />
-                                                    </Button>
+                                                        hoverable
+                                                        color={isEmptyValue(groupValue) ? null : 'primary'}
+                                                    />
                                                     <DropdownMenu class={{"k-table-group-dropdown": true, [makeGroupMenuStyles()]: true}}>
                                                         <div class="k-table-group-header">
                                                             <Input size="small" fluid
@@ -79,26 +81,35 @@ const {onSelect, isChecked, getGroupText, keywords, filteredGroup} = this.group;
                                                                 ev-$change:value={keywords.set}
                                                                 clearable
                                                             >
-                                                                <b:suffix><Icon class="ion-ios-search" /></b:suffix>
+                                                                <b:suffix><Icon class="k-icon-search" /></b:suffix>
                                                             </Input>
                                                         </div>
                                                         <div class="k-table-group-body">
                                                             <DropdownItem v-for={filteredGroup.value}
-                                                                ev-select={() => onSelect($value.value, groupValue, onChange)}
+                                                                ev-select={() => onSelect($value.value, onChange)}
                                                                 hideOnSelect={!multiple}
-                                                                class={{'k-active': (checked = isChecked($value.value, groupValue))}}
+                                                                class={{'k-active': (checked = isChecked($value.value))}}
                                                             >
                                                                 <Checkbox v-if={multiple} value={checked}>{$value.label}</Checkbox>
                                                                 <span v-else>{$value.label}</span>
                                                             </DropdownItem>
                                                         </div>
+                                                        <div class="k-table-group-footer" v-if={multiple}>
+                                                            <Button type="none" size="small"
+                                                                disabled={isEmptyValue(localGroupValue.value)}
+                                                                ev-click={reset}
+                                                            >重置</Button>
+                                                            <Button type="primary" size="small"
+                                                                ev-click={() => confirm(onChange)}
+                                                            >确定</Button>
+                                                        </div>
                                                     </DropdownMenu>
                                                 </Dropdown>
                                                 <div v-if={sortable}
                                                     class={{'k-column-sort': true, [`k-${type}`]: type}}
                                                 >
-                                                    <Icon class="ion-android-arrow-dropup k-asc" />
-                                                    <Icon class="ion-android-arrow-dropdown k-desc" />
+                                                    <Icon class="k-icon-up k-asc" size="mini" />
+                                                    <Icon class="k-icon-down k-desc" size="mini" />
                                                 </div>
                                             </div>
                                         </th>

package/components/table/demos/group.md

@@ -5,9 +5,10 @@ order: 18
 
 分组需要两个`group`来指定：
 
-1. 第一个是`Table`上的`group`属性，该属性指定当前分组的方式，形式为：`{key: ["分组的列的key"], value: ["当前列选择的分组的值"]}`
-2. 第二个是`TableColumn`的`group`属性，该属性指定当前列有哪些可选的分组方式，
-如果该列支持多选，还可以添加`multiple`属性，默认为单选。形式为：`[{label: "分组展示文案", value: "选择后的值"}]`
+1. 第一个是`Table`上的`group`属性，该属性指定当前分组的方式，形式为：`{key: ["分组的列的key"], value: ["当前列选择的分组的值"]}`。
+对于“全部”选项，`value`需要设为空字符串`""`，这样才能在选择“全部”的时候，不高亮筛选按钮
+2. 第二个是`TableColumn`的`group`属性，该属性指定当前列有哪些可选的分组方式，形式为：`[{label: "分组展示文案", value: "选择后的值"}]`。
+如果该列支持多选，还可以添加`multiple`属性，默认为单选
 
 当分组方式改变时，可以监听默认事件`$change:group`来执行自定义分组逻辑
 

package/components/table/demos/hideHeader.md

@@ -0,0 +1,33 @@
+---
+title: 隐藏表头
+order: 29
+---
+
+添加`hideHeader`属性，即可隐藏表头
+
+```vdt
+import {Table, TableColumn, Switch} from 'kpc';
+
+<div>
+    <p>hideHeader: <Switch v-model="hideHeader" /></p>
+    <Table data={this.get('data')} resizable hideHeader={this.get('hideHeader')}>
+        <TableColumn key="a" title="Title 1" />
+        <TableColumn key="b" title="Title 2" />
+    </Table>
+</div>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            data: [
+                {a: 'Cell 1-1', b: 'Cell 1-2'},
+                {a: 'Cell 2-1', b: 'Cell 2-2'}
+            ],
+            hideHeader: true,
+        };
+    }
+}
+```

package/components/table/demos/pagination.md

@@ -0,0 +1,53 @@
+---
+title: 表格分页
+order: 30
+---
+
+给组件添加`pagination`属性即可开启分页功能，`pagination`支持`Pagination`组件的全部属性，当分页信息改变时
+会触发`changePage`事件
+
+> 需要给Table设置rowKey属性，否则选择的行翻页后依然会保留选中状态，因为不设置key，则使用索引当key，
+> 只要当前选中的索引在下一页存在，则会依然选中
+
+```vdt
+import {Table, TableColumn, Switch} from 'kpc';
+
+<Table data={this.get('data')}
+    pagination
+    ref="table"
+    draggable
+    rowKey={item => item.name}
+>
+    <TableColumn title="Name" key="name" />
+    <TableColumn title="IP" key="ip" />
+</Table>
+```
+
+```ts
+import {range, bind} from 'kpc/components/utils';
+
+interface Props {
+    data: DataItem[]
+}
+
+type DataItem = {
+    name: string
+    ip: string
+}
+
+const data: DataItem[] = range(1, 20).map(item => {
+    return {
+        name: 'name ' + item,
+        ip: '127.0.0.' + item
+    };
+});
+
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            data, 
+        };
+    }
+}
+```