@king-design/intact 3.0.0-beta.1 → 3.0.0

package/components/select/base.vdt

@@ -38,6 +38,21 @@ const label = this.getLabel();
 const hasValue = this.hasValue();
 const {onInput, inputRef, keywords: {value: keywords}} = this.input;
 const {onFocusout, triggerRef} = this.focusout;
+const filterInput = <Input v-if={filterable}
+    class="k-select-input"
+    value={keywords}
+    ev-$change:value={onInput}
+    disabled={disabled}
+    placeholder={!hasValue ? placeholder : ''}
+    ref={inputRef}
+    autoWidth
+    inline
+    size={size}
+    key="filter"
+    readonly={!show}
+    waveDisabled={true}
+    flat={flat}
+/>
 
 <ErrorContext.Consumer defaultValue={false}>
     {isInvalid => {
@@ -90,7 +105,7 @@ const {onFocusout, triggerRef} = this.focusout;
                             </div>
                             <div v-else key="values" class="k-select-values">
                                 <b:values params={[value, label]}>
-                                    <Tags v-if={label && label.length}
+                                    <Tags v-if={label && label.length || filterable}
                                         nowrap={nowrap}
                                         size={size}
                                         draggable={draggable}
@@ -117,23 +132,10 @@ const {onFocusout, triggerRef} = this.focusout;
                                                 </b:value>
                                             </template>
                                         </Tag>
+                                        <b:append>{filterInput}</b:append>
                                     </Tags>
                                 </b:values>
-                                <Input v-if={filterable}
-                                    class="k-select-input"
-                                    value={keywords}
-                                    ev-$change:value={onInput}
-                                    disabled={disabled}
-                                    placeholder={!hasValue ? placeholder : ''}
-                                    ref={inputRef}
-                                    autoWidth
-                                    inline
-                                    size={size}
-                                    key="filter"
-                                    readonly={!show}
-                                    waveDisabled={true}
-                                    flat={flat}
-                                />
+                                <template v-if={$blocks && $blocks.values}>{filterInput}</template>
                             </div>
                         </TransitionGroup>
                     </div>
@@ -146,10 +148,13 @@ const {onFocusout, triggerRef} = this.focusout;
                         <span class="k-select-suffix-icon">
                             <b:suffix>
                                 <Icon class="ion-load-c" rotate v-if={loading} />
-                                <Icon v-else-if={!hideIcon}
-                                    class="k-select-arrow ion-ios-arrow-down"
-                                    disabled={$props.isDisableArrow}
-                                />
+                                <template v-else-if={!hideIcon}>
+                                    <Icon class="k-icon-search" v-if={filterable && show} />
+                                    <Icon v-else
+                                        class="k-select-arrow k-icon-down"
+                                        disabled={$props.isDisableArrow}
+                                    />
+                                </template>
                             </b:suffix>
                         </span>
                     </span>

package/components/select/demos/customMenu.md

@@ -14,7 +14,7 @@ import {Select, Table, TableColumn, Input, Button, Icon} from 'kpc';
 >
     <b:menu>
         <Input placeholder="请输入关键字" size="small" fluid v-model="keywords" waveDisabled={true}>
-            <b:suffix><Icon class="ion-ios-search" /></b:suffix>
+            <b:suffix><Icon class="k-icon-search" /></b:suffix>
         </Input>
         <Table data={this.filter()}
             type="border"
@@ -27,8 +27,8 @@ import {Select, Table, TableColumn, Input, Button, Icon} from 'kpc';
             <TableColumn title="Domain" key="domain" />
         </Table>
         <div class="footer">
-            <Button type="primary" size="small" ev-click={this.confirm}>确定</Button>
             <Button size="small" ev-click={this.hide}>取消</Button>
+            <Button type="primary" size="small" ev-click={this.confirm}>确定</Button>
         </div>
     </b:menu>
 </Select>

package/components/select/index.spec.ts

@@ -256,11 +256,12 @@ describe('Select', () => {
         await wait();
         const dropdown = getElement('.k-select-menu')!;
         const [selectAll, toggleSelect, unselectAll] = dropdown.querySelectorAll<HTMLElement>('.k-select-op .k-btn');
-        const [confirm, cancel] = dropdown.querySelectorAll<HTMLElement>('.k-select-footer .k-btn');
+        const [cancel, confirm] = dropdown.querySelectorAll<HTMLElement>('.k-select-footer .k-btn');
 
         // select all
         selectAll.click();
         confirm.click();
+        await wait();
         expect(instance.get('days')).have.length(7);
 
         // unselect all
@@ -268,6 +269,7 @@ describe('Select', () => {
         await wait();
         unselectAll.click();
         confirm.click();
+        await wait();
         expect(instance.get('days')).have.length(0);
 
         // toggle select
@@ -281,6 +283,7 @@ describe('Select', () => {
         await wait();
         toggleSelect.click();
         confirm.click();
+        await wait();
         expect(instance.get('days')).have.length(5);
         expect(instance.get('days')).include('Monday')
     });

package/components/select/menu.vdt

@@ -61,7 +61,7 @@ if (searchable) {
                     clearable
                     waveDisabled={true}
                 >
-                    <b:suffix><Icon class="ion-ios-search" /></b:suffix>
+                    <b:suffix><Icon class="k-icon-search" /></b:suffix>
                 </Input>
                 <div class="k-select-op" v-if={multiple}>
                     <Button type="link" size="small"
@@ -79,8 +79,8 @@ if (searchable) {
                 {children}
             </div>
             <div class="k-select-footer" v-if={multiple}>
-                <Button type="primary" size="small" ev-click={confirm}>{_$('确定')}</Button>
                 <Button size="small" ev-click={this.select.hide}>{_$('取消')}</Button>
+                <Button type="primary" size="small" ev-click={confirm}>{_$('确定')}</Button>
             </div>
         </Provider>
     );

package/components/select/option.vdt

@@ -43,6 +43,7 @@ if (searchable && multiple) {
     <Transition name="k-scale" v-if={!searchable}>
         <Icon v-if={multiple && isActive}
             class="k-select-checkmark ion-ios-checkmark-empty"
+            color="primary"
         />
     </Transition>
 </DropdownItem>

package/components/select/styles.ts

@@ -11,7 +11,7 @@ type SizeStyles = {
 
 const defaults = deepDefaults(
     {
-        get transition() { return theme.transition.middle },
+        get transition() { return theme.transition.large },
         width: `300px`,
         get height() { return theme.default.height },
         bgColor: '#fff',
@@ -133,6 +133,8 @@ export default function makeStyles() {
         }
         .k-select-prefix,
         .k-select-suffix {
+            display: flex;
+            align-items: center;
             position: relative;
         }
         .k-select-suffix {
@@ -176,7 +178,8 @@ export default function makeStyles() {
             }
         }
         .k-select-suffix-icon {
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
             transition: opacity ${select.transition};
         }
 
@@ -204,6 +207,7 @@ export default function makeStyles() {
         .k-tag {
             word-break: break-word;
             height: auto;
+            max-width: calc(100% - ${getRight(select.tag.margin)} - 1px);
         }
 
         // size

package/components/spinner/index.vdt

@@ -24,8 +24,8 @@ const {showValue, onInput} = this.value;
         type="none"
         tabindex="-1"
     >
-        <Icon v-if={!vertical} class="k-spinner-icon k-icon-minus-small" />
-        <Icon v-else class="k-spinner-icon k-icon-arrow-down" />
+        <Icon v-if={!vertical} class="k-spinner-icon k-icon-minus" />
+        <Icon v-else class="k-spinner-icon k-icon-down" />
     </Button>
     <Input
         class="k-spinner-input"
@@ -44,7 +44,7 @@ const {showValue, onInput} = this.value;
         type="none"
         tabindex="-1"
     >
-        <Icon v-if={!vertical} class="k-spinner-icon k-icon-add-small" />
-        <Icon v-else class="k-spinner-icon k-icon-arrow-up" />
+        <Icon v-if={!vertical} class="k-spinner-icon k-icon-add" />
+        <Icon v-else class="k-spinner-icon k-icon-up" />
     </Button>
 </div>

package/components/spinner/styles.ts

@@ -71,15 +71,19 @@ export function makeStyles() {
         }
         .k-spinner-input {
             width: ${spinner.default.inputWidth};
-            .k-input-inner {
-                text-align: center;
+            .k-input-wrapper {
                 border:none;
                 border-radius: 0;
-                &:hover,
-                &:focus {
+                &:hover{
                     border: none
                 }
             }
+            &.k-focus .k-input-wrapper {
+                border: none;
+            }
+            .k-input-inner {
+                text-align: center;
+            }
         }
         .k-spinner-icon {
             font-size: ${spinner.default.iconFontSize};
@@ -106,8 +110,7 @@ export function makeStyles() {
                 border-radius: 0 ${spinner.borderRadius} 0 0;
             }
             .k-spinner-input {
-                font-size: 0;
-                .k-input-inner {
+                .k-input-wrapper {
                     border-radius: ${spinner.borderRadius} 0 0 ${spinner.borderRadius};
                 }
             }

package/components/steps/step.vdt

@@ -26,9 +26,9 @@ const {children, title, index, className, style} = this.get();
                 ev-click={linkEvent(index, onChange)}
             >
                 <div class="k-step-mark">
-                    <Icon v-if={error && type !== 'simple'} class="k-icon-close-big" color="danger" />
+                    <Icon v-if={error && type !== 'simple'} class="k-icon-close-bold" color="danger" />
                     <Icon v-else-if={done && (type === 'line' || type === 'line-compact')}
-                        class="k-icon-check"
+                        class="k-icon-check-bold"
                         color="primary"
                     />
                     <span v-else-if={type !== 'simple'}>{index + 1}</span>

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 = {
@@ -22,6 +22,7 @@ const defaults = {
     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 },
     },
@@ -109,6 +110,9 @@ export function makeStepsStyles() {
         &.k-clickable {
             .k-done {
                 cursor: pointer;
+                .k-step-wrapper:hover .k-step-mark {
+                    background: ${steps.done.markHoverBgColor};
+                }
             }
         }
 

package/components/switch/styles.ts

@@ -6,6 +6,7 @@ import '../../styles/global';
 const defaults = {
     get transition() { return theme.transition.middle },
     get bgColor() { return theme.color.border },
+    get hoverBgColor() { return theme.color.placeholder },
     fontSize: `12px`,
     color: '#fff',
     handleBorderRadius: `100%`,
@@ -16,7 +17,8 @@ const defaults = {
         get bgColor() { return theme.color.primary },
         get disabledBgColor() {
             return palette(theme.color.primary, -3);
-        }
+        },
+        get hoverBgColor() { return theme.color.linkHover },
     },
 
     // default
@@ -66,6 +68,7 @@ export function makeStyles() {
         user-select: none;
         overflow: hidden;
         box-sizing: content-box;
+        transition: background ${kswitch.transition};
         input {
             opacity: 0;
             position: absolute;
@@ -91,6 +94,13 @@ export function makeStyles() {
             background: ${kswitch.bgColor};
             transition: all ${kswitch.transition};
         }
+        &:hover {
+            &,
+            .k-switch-bar,
+            .k-switch-wrapper {
+                background: ${kswitch.hoverBgColor};
+            }
+        }
         .k-switch-handle {
             border-radius: ${kswitch.handleBorderRadius};
             background: ${kswitch.handleBgColor};
@@ -168,6 +178,12 @@ export function makeStyles() {
             .k-switch-bar {
                 width: 100%;
             }
+            &:hover {
+                .k-switch-bar,
+                .k-switch-wrapper {
+                    background: ${kswitch.checked.hoverBgColor};
+                }
+            }
         }
 
         // disabled

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,36 @@ 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 size="small"
+                                                                disabled={isEmptyValue(localGroupValue.value)}
+                                                                type="secondary"
+                                                                ev-click={() => reset(onChange)}
+                                                            >重置</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/showIndeterminate.md

@@ -1,5 +1,5 @@
 ---
-title: 半选中状态
+title: 取消表头半选中状态
 order: 28
 ---
 
@@ -13,7 +13,7 @@ import {Table, TableColumn} from 'kpc';
         data={this.get('data')} 
         resizable 
         ref="__test" 
-        showIndeterminate={true}
+        showIndeterminate={false}
         checkedKeys={[0]}
     >
         <TableColumn key="a" title="表头1" />

package/components/table/demos/title.md

@@ -6,7 +6,7 @@ order: 2
 给表格定义复杂的表头内容，只需要通过`TableColumn` `title`扩展点传入自定义内容即可
 
 ```vdt
-import {Table, TableColumn, Tooltip} from 'kpc';
+import {Table, TableColumn, Tooltip, Icon} from 'kpc';
 
 <Table data={this.get('data')}>
     <TableColumn key="a"
@@ -14,9 +14,9 @@ import {Table, TableColumn, Tooltip} from 'kpc';
         sortable
     >
         <b:title>
-            <span title="自定义表头内容" class="middle title">自定义表头内容</span>
+            <span title="自定义表头内容" class="title">自定义表头内容</span>
             <Tooltip content="tooltip content">
-                <i class="ion-ios-help-outline middle"></i>
+                <Icon class="k-icon-question" />
             </Tooltip>
         </b:title>
     </TableColumn>
@@ -26,8 +26,6 @@ import {Table, TableColumn, Tooltip} from 'kpc';
 
 ```styl
 .k-table
-    .middle
-        vertical-align middle
     .title
         margin-right 8px
 ```

package/components/table/index.md

@@ -37,7 +37,7 @@ sidebar: doc
 | tooltipPosition | 行提示的位置 | `"left"` | `"bottom"` | `"right"` | `"top"` | `Position` | `"top"` |
 | tooltipContainer | 指定行提示弹层追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
 | keepStatus | 是否在行销毁的时候，保持该行在`checkedKeys` | `selectedKeys` | `spreadKeys` | `expandedKeys`中的`key`值，默认会同步删除（仅在销毁行的时候有效，如果整个`Table`被销毁，则不会执行该逻辑） | `boolean` | `false` |
-| showIndeterminate | 表头的`Checkbox`是否支持展示半选中状态 | `boolean` | `false` |
+| showIndeterminate | 表头的`Checkbox`是否支持展示半选中状态 | `boolean` | `true` |
 | resizable | 是否可以表头拖动 | `boolean` | `false` |
 | minColWidth | 指定所有列拖动时的最小宽度 | `number` | `40` |
 | widthStoreKey | 如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到`localStorage`中的`key` | `string` | `undefined` |

package/components/table/index.spec.ts

@@ -230,13 +230,30 @@ describe('Table', () => {
         const [item1, item2] = dropdown2.querySelectorAll<HTMLElement>('.k-checkbox');
         item1.click();
         await wait();
-        expect(instance.get('multipleGroup')).to.eql({status: ['active']});
+        expect(instance.get('multipleGroup')).to.eql({status: []});
         expect(table2.innerHTML).to.matchSnapshot();
         item2.click();
         await wait();
+        expect(instance.get('multipleGroup')).to.eql({status: []});
+
+        // click confirm
+        const [reset, confirm] = dropdown2.querySelectorAll<HTMLElement>('.k-table-group-footer .k-btn');
+        confirm.click();
+        await wait();
         expect(instance.get('multipleGroup')).to.eql({status: ['active', 'stopped']});
         expect(table2.innerHTML).to.matchSnapshot();
 
+        // click reset
+        dispatchEvent(icon2, 'click');
+        await wait();
+        expect(dropdown2.innerHTML).to.matchSnapshot();
+        reset.click();
+        await wait();
+        expect(dropdown2.innerHTML).to.matchSnapshot();
+        confirm.click();
+        await wait();
+        expect(instance.get('multipleGroup')).to.eql({status: []});
+
         // update group
         instance.set('statusGroup', [{label: 'label', value: 'value'}]);
         dispatchEvent(icon, 'click');