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

package/components/switch/styles.ts

@@ -58,7 +58,7 @@ setDefault(() => {
     kswitch = deepDefaults(theme, {switch: defaults}).switch;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         display: inline-block;
         vertical-align: middle;
@@ -73,35 +73,35 @@ export function makeStyles() {
             opacity: 0;
             position: absolute;
         }
-        .k-switch-bar,
-        .k-switch-off {
+        .${k}-switch-bar,
+        .${k}-switch-off {
             box-sizing: border-box;
         }
-        .k-switch-bar {
+        .${k}-switch-bar {
             position: absolute;
             text-align: right;
             overflow: hidden;
         }
-        .k-switch-wrapper {
+        .${k}-switch-wrapper {
             display: inline-block;
             position: relative;
             z-index: 1;
             border-radius: ${kswitch.handleBorderRadius};
         }
-        .k-switch-bar,
-        .k-switch-wrapper {
+        .${k}-switch-bar,
+        .${k}-switch-wrapper {
             height: 100%;
             background: ${kswitch.bgColor};
             transition: all ${kswitch.transition};
         }
         &:hover {
             &,
-            .k-switch-bar,
-            .k-switch-wrapper {
+            .${k}-switch-bar,
+            .${k}-switch-wrapper {
                 background: ${kswitch.hoverBgColor};
             }
         }
-        .k-switch-handle {
+        .${k}-switch-handle {
             border-radius: ${kswitch.handleBorderRadius};
             background: ${kswitch.handleBgColor};
             height: 100%;
@@ -115,8 +115,8 @@ export function makeStyles() {
         }
 
         // text
-        .k-switch-on,
-        .k-switch-off {
+        .${k}-switch-on,
+        .${k}-switch-off {
             position: absolute;
             font-size: ${kswitch.fontSize};
             color: ${kswitch.color};
@@ -124,9 +124,9 @@ export function makeStyles() {
         }
 
         // dragging
-        &.k-dragging {
-            .k-switch-bar,
-            .k-switch-wrapper {
+        &.${k}-dragging {
+            .${k}-switch-bar,
+            .${k}-switch-wrapper {
                 background: ${kswitch.checked.bgColor};
                 transition: background ${kswitch.transition};
             }
@@ -139,30 +139,30 @@ export function makeStyles() {
         ${sizes.map(size => {
             const {width, height, padding} = kswitch[size];
             return css`
-               &.k-${size},
-               &.k-${size} .k-switch-on,
-               &.k-${size} .k-switch-off {
+               &.${k}-${size},
+               &.${k}-${size} .${k}-switch-on,
+               &.${k}-${size} .${k}-switch-off {
                    width: ${width};
                    height: ${height};
                }
-               &.k-${size} {
+               &.${k}-${size} {
                    border-radius: ${height};
-                   .k-switch-bar {
+                   .${k}-switch-bar {
                        width: ${height};
                        border-radius: ${height};
                    }
-                   .k-switch-wrapper {
+                   .${k}-switch-wrapper {
                        padding: ${padding};
                    }
-                   .k-switch-on,
-                   .k-switch-off {
+                   .${k}-switch-on,
+                   .${k}-switch-off {
                        line-height: ${height};
                        left: 0;
                    }
-                   .k-switch-on {
+                   .${k}-switch-on {
                        padding: 0 ${height} 0 calc(${height} / 3);
                    }
-                   .k-switch-off {
+                   .${k}-switch-off {
                        padding: 0 calc(${height} / 3) 0 ${height};
                    }
                }
@@ -170,37 +170,37 @@ export function makeStyles() {
         })}
 
         // checked
-        &.k-checked {
-            .k-switch-bar,
-            .k-switch-wrapper {
+        &.${k}-checked {
+            .${k}-switch-bar,
+            .${k}-switch-wrapper {
                 background: ${kswitch.checked.bgColor};
             }
-            .k-switch-bar {
+            .${k}-switch-bar {
                 width: 100%;
             }
             &:hover {
-                .k-switch-bar,
-                .k-switch-wrapper {
+                .${k}-switch-bar,
+                .${k}-switch-wrapper {
                     background: ${kswitch.checked.hoverBgColor};
                 }
             }
         }
 
         // disabled
-        &.k-disabled {
+        &.${k}-disabled {
             &,
-            .k-switch-handle {
+            .${k}-switch-handle {
                 cursor: not-allowed;
             }
             &,
-            .k-switch-bar,
-            .k-switch-wrapper {
+            .${k}-switch-bar,
+            .${k}-switch-wrapper {
                 background: ${kswitch.disabledBgColor};
             }
-            &.k-checked {
+            &.${k}-checked {
                 &,
-                .k-switch-bar,
-                .k-switch-wrapper {
+                .${k}-switch-bar,
+                .${k}-switch-wrapper {
                     background: ${kswitch.checked.disabledBgColor};
                 }
             }

package/components/table/cell.ts

@@ -3,6 +3,7 @@ import template from './cell.vdt';
 import type {TableColumnProps} from './column';
 import type {TableProps} from './table';
 import type {TableGrid} from './useMerge';
+import { useConfigContext } from '../config';
 
 export interface TableCellProps {
     props: Props<TableColumnProps>
@@ -22,6 +23,8 @@ export interface TableCellProps {
 export class TableCell extends Component<TableCellProps> {
     static template = template;
 
+    private config = useConfigContext();
+
     $update(
         lastVNode: VNodeComponentClass<this>,
         nextVNode: VNodeComponentClass<this>,

package/components/table/cell.vdt

@@ -9,6 +9,7 @@ const {
     data, checkType, indent, grid,
     colspan, rowspan, onClickArrow, hasChildren,
 } = this.get();
+const { k } = this.config;
 
 const blocks = props.$blocks; 
 let children = get(data, props.key);
@@ -33,10 +34,10 @@ if (columnIndex === 0 && indent) {
 >
     <Button v-if={columnIndex === 0 && hasChildren}
         type="none" icon circle size="mini"
-        class="k-table-arrow"
+        class={`${k}-table-arrow`}
         ev-click={onClickArrow}
     >
-        <Icon class="k-icon-right" size="small" />
+        <Icon class={`${k}-icon-right`} size="small" />
     </Button>
     {children}
 </td>

package/components/table/column.ts

@@ -1,6 +1,7 @@
 import {Component, TypeDefs, Children, VNodeComponentClass, VNode, createRef} from 'intact';
 import template from './column.vdt';
 import {useGroup} from './useGroup';
+import { useConfigContext } from '../config';
 
 export interface TableColumnProps {
     key: string
@@ -66,4 +67,5 @@ export class TableColumn<T = any> extends Component<TableColumnProps, TableColum
     public elementRef = createRef<HTMLElement>();
 
     private group = useGroup();
+    private config = useConfigContext();
 }

package/components/table/column.vdt

@@ -21,6 +21,7 @@ const {
     onShow, reset, confirm, dropdownRef,
     localGroupValue, isEmptyValue,
 } = this.group;
+const { k } = this.config;
 
 <TableContext.Consumer>
     {checkType => {
@@ -34,7 +35,7 @@ const {
                                     {(offsetMap) => {
                                         const {className, style} = getClassAndStyleForFixed(this.get(), offsetMap[key], checkType);
                                         const classNameObj = {
-                                            'k-column-sortable': sortable,
+                                            [`${k}-column-sortable`]: sortable,
                                             [className]: className,
                                         }
 
@@ -51,14 +52,14 @@ const {
                                             ref={this.elementRef}
                                         >
                                             <div v-if={resizable && this.$vNode.props.prevVNode}
-                                                class="k-table-resize"
+                                                class={`${k}-table-resize`}
                                                 ev-mousedown={e => {
                                                     e._vNode = this.$vNode;
                                                     onStart(e);
                                                 }} 
                                             />
-                                            <div class="k-table-title">
-                                                <div class="k-table-title-text c-ellipsis">
+                                            <div class={`${k}-table-title`}>
+                                                <div class={`${k}-table-title-text c-ellipsis`}>
                                                     <b:title>{title}</b:title>
                                                 </div>
                                                 <Dropdown v-if={group}
@@ -68,33 +69,33 @@ const {
                                                     ev-show={() => onShow(groupValue)}
                                                     ref={dropdownRef}
                                                 >
-                                                    <Icon class="k-icon-down-squared k-table-group"
+                                                    <Icon class={`${k}-icon-down-squared ${k}-table-group`}
                                                         ev-click={e => e._ignoreSortable = true}
                                                         hoverable
                                                         color={isEmptyValue(groupValue) ? null : 'primary'}
                                                     />
-                                                    <DropdownMenu class={{"k-table-group-dropdown": true, [makeGroupMenuStyles()]: true}}>
-                                                        <div class="k-table-group-header">
+                                                    <DropdownMenu class={{[`${k}-table-group-dropdown`]: true, [makeGroupMenuStyles(k)]: true}}>
+                                                        <div class={`${k}-table-group-header`}>
                                                             <Input size="small" fluid
                                                                 placeholder={_$('请输入关键字')}
                                                                 value={keywords.value}
                                                                 ev-$change:value={keywords.set}
                                                                 clearable
                                                             >
-                                                                <b:suffix><Icon class="k-icon-search" /></b:suffix>
+                                                                <b:suffix><Icon class={`${k}-icon-search`} /></b:suffix>
                                                             </Input>
                                                         </div>
-                                                        <div class="k-table-group-body">
+                                                        <div class={`${k}-table-group-body`}>
                                                             <DropdownItem v-for={filteredGroup.value}
                                                                 ev-select={() => onSelect($value.value, onChange)}
                                                                 hideOnSelect={!multiple}
-                                                                class={{'k-active': (checked = isChecked($value.value))}}
+                                                                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}>
+                                                        <div class={`${k}-table-group-footer`} v-if={multiple}>
                                                             <Button size="small"
                                                                 disabled={isEmptyValue(localGroupValue.value)}
                                                                 type="secondary"
@@ -107,10 +108,10 @@ const {
                                                     </DropdownMenu>
                                                 </Dropdown>
                                                 <div v-if={sortable}
-                                                    class={{'k-column-sort': true, [`k-${type}`]: type}}
+                                                    class={{[`${k}-column-sort`]: true, [`${k}-${type}`]: type}}
                                                 >
-                                                    <Icon class="k-icon-up k-asc" size="mini" />
-                                                    <Icon class="k-icon-down k-desc" size="mini" />
+                                                    <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/pagination.md

@@ -17,6 +17,7 @@ import {Table, TableColumn, Switch} from 'kpc';
     ref="table"
     draggable
     rowKey={item => item.name}
+    ev-page={this.onChangePage}
 >
     <TableColumn title="Name" key="name" />
     <TableColumn title="IP" key="ip" />
@@ -49,5 +50,10 @@ export default class extends Component {
             data, 
         };
     }
+
+    @bind
+    onChangePage(data: { value: number, limit: number }) {
+        console.log(data);
+    }
 }
 ```

package/components/table/index.md

@@ -167,3 +167,4 @@ export type TableColumnGroupItem = {
 | uncheckRow | 手动取消选中某行触发 | `(data: T, index: number, key: TableRowKey) => void` |
 | checkAll | 手动全选触发 | `() => void` |
 | uncheckAll | 手动取消全选触发 | `() => void` |
+| page | 当内置翻页改变页码或每页数量时触发 | `({value: number, limit: number}) => void` |

package/components/table/index.spec.ts

@@ -606,7 +606,7 @@ describe('Table', () => {
         const pagination = table.pagination.paginationRef;
         const spy = sinon.spy();
 
-        table.on('changePage', spy);
+        table.on('page', spy);
 
         // check all
         table.checkAll(); 

package/components/table/row.ts

@@ -12,6 +12,8 @@ import type {TableColumnProps} from './column';
 import type {TableProps, TableRowKey} from './table';
 import {bind} from '../utils';
 import type {TableGrid} from './useMerge';
+import { isEqualObject } from '../utils';
+import { useConfigContext } from '../config';
 
 export interface TableRowProps {
     key: TableRowKey
@@ -49,6 +51,8 @@ type DragCallback = (e: MouseEvent, tableRow: TableRow) => void
 export class TableRow extends Component<TableRowProps> {
     static template = template;
 
+    private config = useConfigContext();
+
     $update(
         lastVNode: VNodeComponentClass<this>,
         nextVNode: VNodeComponentClass<this>,
@@ -65,7 +69,14 @@ export class TableRow extends Component<TableRowProps> {
         for (key in lastProps) {
             // ignore index
             if (key === 'index') continue;
-            if (lastProps[key] !== nextProps[key]) {
+            const lastValue = lastProps[key];
+            const nextValue = nextProps[key];
+            // deeply compare for offsetMap
+            if (key === 'offsetMap' && isEqualObject(lastValue, nextValue)) {
+                continue;
+            }
+
+            if (lastValue !== nextValue) {
                 isSame = false;
                 break;
             }

package/components/table/row.vdt

@@ -13,13 +13,15 @@ const {
     hasChildren, indent, key, offsetMap,
     draggable, draggingKey, animation,
 } = this.get();
+const { k } = this.config;
+
 const classNameObj = {
-    'k-disabled': disabled,
-    'k-checked': checked,
-    'k-selected': selected,
-    /* 'k-hidden': hidden, */
-    'k-spreaded': spreaded,
-    'k-dragging': draggingKey === key,
+    [`${k}-disabled`]: disabled,
+    [`${k}-checked`]: checked,
+    [`${k}-selected`]: selected,
+    /* [`${k}-hidden`]: hidden, */
+    [`${k}-spreaded`]: spreaded,
+    [`${k}-dragging`]: draggingKey === key,
     [className]: className,
 };
 
@@ -37,7 +39,7 @@ const pushCheckTypeVNode = (children) => {
         <td key="$checktype"
             {...getClassAndStyleForFixed({
                 fixed: hasFixedLeft ? 'left' : false,
-                className: 'k-table-check'
+                className: [`${k}-table-check`]
             }, 0)}
             {...spans}
         >{children}</td>