@king-design/intact 2.0.14 → 2.0.16

package/components/colorpicker/index.md

@@ -13,3 +13,4 @@ sidebar: doc
 | presets | 预选颜色 | `string[]` | `['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']` |
 | size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
 | disabled | 是否禁用 | `boolean` | `false` |
+| show | 是否展示颜色选择面板 | `boolean` | `false` |

package/components/colorpicker/index.ts

@@ -9,6 +9,7 @@ export interface ColorpickerProps {
     size?: Sizes
     disabled?: boolean
     container?: Container
+    show?: boolean
 }
 
 export interface ColorpickerEvents { }
@@ -22,6 +23,7 @@ const typeDefs: Required<TypeDefs<ColorpickerProps>> = {
     size: sizes,
     disabled: Boolean,
     container: [Function, String],
+    show: Boolean,
 };
 
 const defaults = (): Partial<ColorpickerProps> => ({

package/components/colorpicker/index.vdt

@@ -23,6 +23,7 @@ const classNameObj = {
         trigger="click"
         disabled={disabled}
         container={container}
+        v-model:value="show"
     >
         <div class="k-colorpicker-color">
             <div class="k-colorpicker-inner" style={{backgroundColor: value}}></div>

package/components/dialog/alert.vdt

@@ -4,7 +4,8 @@ import {makeAlertStyles} from './styles';
 
 const {
     type, content, hideIcon, 
-    hideFooter, hideClose, title
+    hideFooter, hideClose, title,
+    iconClassName, icon
 } = this.get();
 
 const classNameObj = {
@@ -18,12 +19,13 @@ const classNameObj = {
     <b:header />
     <b:body>
         <div class="k-dialog-tip-icon">
-            <Icon class={{
+            <Icon class={iconClassName || {
                 "ion-ios-checkmark": type === 'success',
                 "ion-ios-information": type === 'warning',
                 "ion-ios-close": type === 'error',
                 "ion-ios-help": type === 'confirm',
-            }} v-if={!hideIcon} />
+            }} v-if={!hideIcon && !icon} />
+            {icon}
         </div>
         <div class="k-alert-dialog-wrapper">
             <div class="k-alert-dialog-title" v-if={title}>{title}</div>

package/components/dialog/index.md

@@ -103,6 +103,9 @@ export type Container = string | ((parentDom: Element, anchor: Node | null) => E
 | hideIcon | 是否隐藏提示图标 | `boolean` | `false` |
 | hideFooter | 是否隐藏底部按钮 | `boolean` | `false` |
 | ref | 传入一个函数，组件会调用该函数，将当前`Dialog`实例传入 | `(i: Dialog) => void` | `undefined` |
+| className | 样式类名 | `string` | `undefined` |
+| iconClassName | 指定icon样式名 | `string` | `undefined` |
+| icon | 自定义icon内容 | `VNode` | `undefined` |
 
 其中`Promise`对象会在点击“确定”按钮时`resolve()`，在点击“取消”按钮时`reject()`，你可以在`then()`
 中书写用户点击不同按钮的逻辑

package/components/dialog/index.spec.ts

@@ -1,5 +1,6 @@
 import {Component} from 'intact';
 import {Dialog, BaseDialog, DialogProps} from './';
+import {bind} from '../utils';
 import {getElement, mount, unmount, dispatchEvent, wait} from '../../test/utils';
 import BasicDemo from '~/components/dialog/demos/basic';
 import AsyncCloseDemo from '~/components/dialog/demos/asyncClose';
@@ -263,6 +264,40 @@ describe('Dialog', () => {
         expectDialog();
     });
 
+    it('should remove body style when destroy', async () => {
+        class Demo extends Component<{content: string, show: boolean, onClose: Function}> {
+            static template = `
+                var Dialog = this.Dialog;
+                <div>
+                    <Dialog v-if={this.get('show')}
+                        value={this.get('show')}
+                        ev-close={this.onClose}
+                        ref="dialog"
+                    >test</Dialog>
+                </div>
+            `;
+
+            private Dialog = Dialog;
+
+            static defaults() {
+                return {
+                    show: true,
+                };
+            }
+
+            @bind
+            onClose() {
+                this.set('show', false);
+            }
+        }
+
+        const [instance, element] = mount(Demo);
+        instance.refs.dialog.close();
+
+        await wait();
+        expect(document.body.getAttribute('style')).to.be.null;
+    });
+
     // it('should handle v-if and v-model at the same time correctly in Vue', async () => {
         // const Test = {
             // template: `<Dialog v-model="show" v-if="show" ref="dialog">test</Dialog>`,

package/components/dialog/staticMethods.ts

@@ -3,11 +3,14 @@ import type {Dialog, DialogProps} from './';
 import template from './alert.vdt';
 
 export interface AlertDialogProps extends DialogProps {
-    content?: string | VNode
+    content?: string | object 
     type?: 'success' | 'warning' | 'error' | 'confirm' 
     hideIcon?: boolean
     hideFooter?: boolean
     ref?: (i: Dialog) => void
+    className?: string
+    iconClassName?: string
+    icon?: object 
 }
 
 export type StaticMethod = (options?: AlertDialogProps) => Promise<void>
@@ -25,6 +28,16 @@ export function addStaticMethods(Component: typeof Dialog) {
     }
 
     function show(options: AlertDialogProps = {}) {
+        const normalize = (Component as any).normalize;
+        if (normalize) {
+            if (options.content) {
+                options = {...options, content: normalize(options.content)};
+            }
+            if (options.icon) {
+                options = {...options, icon: normalize(options.icon)};
+            }
+        }
+
         const dialog = new AlertDialog(options);
         dialog.show();
 

package/components/dialog/useFixBody.ts

@@ -21,7 +21,9 @@ export function useFixBody(elementRef: RefObject<HTMLDivElement>) {
     instance.on('afterClose', onAfterLeave);
     
     onBeforeUnmount(() => {
-        if (fixedBody && instance.get('value')) {
+        // should also remove body style when dialog is removed, #805
+        // if (fixedBody && instance.get('value')) {
+        if (fixedBody) {
             // maybe HIDE event has not triggered
             onClosed(instance);
         }

package/components/icon/demos/icons.md

@@ -0,0 +1,158 @@
+---
+title: King-Design Icons
+order: 1
+---
+
+
+
+```vdt
+import {Icon} from 'kpc';
+
+<div class="icons">
+    <div class="icon" v-for={this.get('fonts')}>
+        <Icon 
+            class={'k-icon-' + $value}
+            size="large"
+        />
+        <div>{'k-icon-' + $value}</div>
+    </div>
+</div>
+```
+
+```styl
+.icons
+    display flex
+    flex-wrap wrap
+    gap 10px
+    text-align center
+.icon
+    width 100px
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            fonts: [
+                'alert',
+                'alarm',
+                'calendar',
+                'application',
+                'arrow-right',
+                'arrow-up',
+                'arrow-left',
+                'arrow-down',
+                'arrow-expand',
+                'arrow-left-circled',
+                'arrow-right-circled',
+                'close',
+                'bill',
+                'change',
+                'cloud-download',
+                'content-squared',
+                'cloud',
+                'arrow-move',
+                'code-download',
+                'cloud-server',
+                'arrow-shrink',
+                'clone',
+                'cloud-servers',
+                'cart',
+                'delete',
+                'fault-outline',
+                'calculate',
+                'arrow-swap',
+                'download',
+                'information',
+                'internet',
+                'edit',
+                'search',
+                'code-working',
+                'heart',
+                'content',
+                'cut',
+                'money-square',
+                'logout',
+                'cloud-upload',
+                'lock',
+                'corporate',
+                'truth-none',
+                'resize',
+                'protect',
+                'time',
+                'date',
+                'document-change',
+                'scanner',
+                'notification',
+                'notification-outline',
+                'silent',
+                'heart-outline',
+                'share',
+                'pay',
+                'picture',
+                'desktop',
+                'earphone',
+                'cube',
+                'user-verify',
+                'fault',
+                'location',
+                'down-squared',
+                'pay-dollar',
+                'paperclip',
+                'settings',
+                'home',
+                'more',
+                'phonecall',
+                'tag',
+                'truth-circled',
+                'refresh',
+                'watch',
+                'images',
+                'sort',
+                'money-circled',
+                'trade',
+                'star-outline',
+                'minus-circled',
+                'right',
+                'left',
+                'up',
+                'down',
+                'upward',
+                'up-circled',
+                'pin',
+                'hide',
+                'users',
+                'user',
+                'return-right',
+                'message',
+                'paper',
+                'phonecall-prohibit',
+                'speedometer',
+                'settings-horizontal',
+                'phone',
+                'star',
+                'play',
+                'refresh-lock',
+                'shield',
+                'panel',
+                'structure',
+                'settings-vertical',
+                'printer',
+                'stop',
+                'return-left',
+                'question',
+                'unlock',
+                'sound-off',
+                'up-squared',
+                'sound-on',
+                'upload',
+                'tool',
+                'visible',
+                'truth',
+            ]
+        }
+    }
+}
+```

package/components/pagination/demos/disable.md

@@ -0,0 +1,51 @@
+---
+title: 禁用某些按钮和页码
+order: 7
+---
+
+禁用按钮和页码有两种方式
+
+1. `disableBtn`只禁用页码按钮，“上一页”“下一页”按钮依然可点
+2. `disablePage`同时禁用页码按钮和“上一页”“下一页”按钮
+
+两个属性类型为：`(page: number, limit: number) => boolean`，返回`true`则禁用
+
+```vdt
+import {Pagination} from 'kpc';
+
+<div>
+    <Pagination v-model="value1" total={200} disableBtn={this.disableBtn} />
+    <Pagination v-model="value2" total={200} showGoto disablePage={this.disablePage} />
+</div>
+```
+
+```styl
+.k-pagination
+    margin-bottom 20px 
+```
+
+```ts
+interface Props {
+    value1?: number
+    value2?: number
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            value1: 10,
+            value2: 10,
+        };
+    }
+
+    disableBtn(page: number, limit: number) {
+        return page > 10;
+    }
+
+    disablePage(page: number, limit: number) {
+        return page > 10;
+    }
+}
+```

package/components/pagination/index.md

@@ -20,6 +20,8 @@ sidebar: doc
 | showTotal | 显示总条数 | `boolean` | `true` |
 | showGoto | 显示快速跳转框 | `boolean` | `false` |
 | showLimits | 是否显示每页条数选择框 | `boolean` | `true` |
+| disableBtn | 只禁用页码按钮，“上一页”“下一页”按钮依然可点 | `(page: number, limit: number) => boolean` | `undefined` |
+| disablePage | 同时禁用页码按钮和“上一页”“下一页”按钮 | `(page: number, limit: number) => boolean` | `undefined` |
 
 # 事件
 

package/components/pagination/index.spec.ts

@@ -1,6 +1,7 @@
 import BasicDemo from '~/components/pagination/demos/basic';
 import GotoDemo from '~/components/pagination/demos/goto';
 import CurrentDemo from '~/components/pagination/demos/current';
+import DisableDemo from '~/components/pagination/demos/disable';
 import {mount, unmount, dispatchEvent, wait} from '../../test/utils';
 
 describe('Pagination', () => {
@@ -75,4 +76,17 @@ describe('Pagination', () => {
         expect(fn.callCount).to.eql(2);
         expect(fn.lastCall.lastArg).to.eql({value: 1, limit: 50});
     });
+
+    it('should not goto disabled page', async () => {
+        const [instance, element] = mount(DisableDemo);
+
+        const input = element.querySelector('.k-input-inner') as HTMLInputElement;
+        dispatchEvent(input, 'focus');
+        input.value = '11';
+        dispatchEvent(input, 'change');
+        dispatchEvent(input, 'blur');
+        await wait();
+        expect(input.value).to.eql('10');
+        expect(instance.get('value2')).to.eql(10);
+    });
 });

package/components/pagination/index.ts

@@ -16,6 +16,8 @@ export interface PaginationProps {
     showTotal?: boolean,
     showGoto?: boolean,
     showLimits?: boolean,
+    disableBtn?: (page: number, limit: number) => boolean,
+    disablePage?: (page: number, limit: number) => boolean,
 }
 
 export interface PaginationEvents {
@@ -39,6 +41,8 @@ const typeDefs: Required<TypeDefs<PaginationProps>> = {
     showTotal: Boolean,
     showGoto: Boolean,
     showLimits: Boolean,
+    disableBtn: Function,
+    disablePage: Function,
 };
 
 const defaults = (): Partial<PaginationProps> => ({
@@ -132,7 +136,11 @@ export class Pagination extends Component<PaginationProps, PaginationEvents> {
 
     @bind
     private goto(e: InputEvent) {
+        const {disablePage, limit} = this.get();
         const value = parseInt((e.target as HTMLInputElement).value) || 1;
+        if (disablePage && disablePage(value, limit!)) {
+            return;
+        }
         this.changePage(value);
     }
 }

package/components/pagination/index.vdt

@@ -10,7 +10,7 @@ const {
     total, size, noBorder, simple, 
     className, showTotal, showGoto,
     counts, value, limit, limits,
-    showLimits
+    showLimits, disableBtn, disablePage
 } = this.get();
 
 if (!total) return <!-- pagination -->
@@ -32,11 +32,21 @@ if (noBorder || simple) {
 const totalPages = (Math.ceil(total / limit)) || 0;
 
 const paginationButton = function(page) {
+    let disabled = false;
+    if (page !== value) {
+        if (disablePage) {
+            disabled ||= !!disablePage(page, limit);
+        }
+        if (disableBtn) {
+            disabled ||= !!disableBtn(page, limit);
+        }
+    }
     return (
         <Button type={type}
             size={size}
             icon
             value={page}
+            disabled={disabled}
         >{page}</Button>
     );
 };
@@ -108,13 +118,13 @@ let nextPage = value + 1;
     <ButtonGroup checkType="radio" v-model="value">
         <Button icon size={size}
             type={type}
-            disabled={value <= 1}
+            disabled={value <= 1 || !!(disablePage && disablePage(value - 1, limit))}
             ev-click={this.prev}
         ><Icon class="ion-ios-arrow-left" /></Button>
         <template>{paginationItems}</template>
         <Button icon size={size}
             type={type}
-            disabled={value >= totalPages}
+            disabled={value >= totalPages || !!(disablePage && disablePage(value + 1, limit))}
             ev-click={this.next}
         ><Icon class="ion-ios-arrow-right" /></Button>
     </ButtonGroup>

package/components/pagination/styles.ts

@@ -93,6 +93,9 @@ export function makeStyles() {
                 width: ${pagination.goto.width};
                 margin: ${pagination.goto.gap};
             }
+            .k-input-inner {
+                text-align: center;
+            }
         }
             
         .k-select {

package/components/portal.ts

@@ -85,36 +85,46 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         // update container if it has changed
         const lastProps = lastVNode.props!;
         const nextProps = nextVNode.props!;
-        const lastContainer = this.container!;
-        if (lastProps.container !== nextProps.container) {
-            this.initContainer(nextProps.container, parentDom, anchor);
-        }
-        const nextContainer = this.container!;
-
-        if (lastContainer === nextContainer) {
-            patch(
-                lastProps.children as VNode,
-                nextProps.children as VNode,
-                nextContainer,
-                this,
-                this.$SVG,
-                anchor,
-                mountedQueue,
-                false,
-            );
+        const update = () => {
+            const lastContainer = this.container!;
+
+            if (lastProps.container !== nextProps.container) {
+                this.initContainer(nextProps.container, parentDom, anchor);
+            }
+            const nextContainer = this.container!;
+
+            if (lastContainer === nextContainer) {
+                patch(
+                    lastProps.children as VNode,
+                    nextProps.children as VNode,
+                    nextContainer,
+                    this,
+                    this.$SVG,
+                    anchor,
+                    mountedQueue,
+                    false,
+                );
+            } else {
+                remove(lastProps.children as VNode, lastContainer, false);
+                mount(
+                    nextProps.children as VNode,
+                    nextContainer,
+                    this,
+                    this.$SVG,
+                    anchor,
+                    mountedQueue,
+                );
+            }
+            
+            super.$update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
+        };
+
+        if (!this.container) {
+            // in react, sometimes $update will be called before mountedQueue in $render
+            mountedQueue.push(update);
         } else {
-            remove(lastProps.children as VNode, lastContainer, false);
-            mount(
-                nextProps.children as VNode,
-                nextContainer,
-                this,
-                this.$SVG,
-                anchor,
-                mountedQueue,
-            );
+            update();
         }
-        
-        super.$update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
     }
 
     $unmount(vNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this> | null) {

package/components/select/demos/basic.md

@@ -11,7 +11,7 @@ import {Select, Option} from 'kpc';
 
 <div>
     <div style="margin-bottom: 16px;">
-        <Select v-model="day" show={true}>
+        <Select v-model="day">
             <Option value="Monday">星期一</Option>
             <Option value="Tuesday">星期二</Option>
             <Option value="Wednesday">星期三</Option>

package/components/table/column.vdt

@@ -12,9 +12,11 @@ import {context as TableContext} from './useColumns';
 import {context as ResizableContext} from './useResizable';
 import {context as FixedColumnsContext} from './useFixedColumns';
 import {stopPropagation} from '../utils';
+import {Input} from '../input';
+import {_$} from '../../i18n';
 
 const {title, fixed, group, multiple, key, sortable, cols, rows} = this.get();
-const {onSelect, isChecked, getGroupText} = this.group;
+const {onSelect, isChecked, getGroupText, keywords, filteredGroup} = this.group;
 
 <TableContext.Consumer>
     {checkType => {
@@ -61,21 +63,35 @@ const {onSelect, isChecked, getGroupText} = this.group;
                                                 <Dropdown v-if={group}
                                                     position={{my: 'center top', at: 'center bottom+5', collision: 'flipfit'}}
                                                     key="dropdown"
+                                                    trigger="click"
+                                                    ev-show={() => keywords.set('')}
                                                 >
                                                     <Button icon size="mini" class="k-table-group"
-                                                        ev-click={stopPropagation}
+                                                        ev-click={e => e._ignoreSortable = true}
                                                     >
                                                         <Icon class="ion-android-arrow-dropdown" />
                                                     </Button>
                                                     <DropdownMenu class={{"k-table-group-dropdown": true, [makeGroupMenuStyles()]: true}}>
-                                                        <DropdownItem v-for={group}
-                                                            ev-select={() => onSelect($value.value, groupValue, onChange)}
-                                                            hideOnSelect={!multiple}
-                                                            class={{'k-active': (checked = isChecked($value.value, groupValue))}}
-                                                        >
-                                                            <Checkbox v-if={multiple} value={checked}>{$value.label}</Checkbox>
-                                                            <span v-else>{$value.label}</span>
-                                                        </DropdownItem>
+                                                        <div class="k-table-group-header">
+                                                            <Input size="small" fluid
+                                                                placeholder={_$('请输入关键字')}
+                                                                value={keywords.value}
+                                                                ev-$change:value={keywords.set}
+                                                                clearable
+                                                            >
+                                                                <b:suffix><Icon class="ion-ios-search" /></b:suffix>
+                                                            </Input>
+                                                        </div>
+                                                        <div class="k-table-group-body">
+                                                            <DropdownItem v-for={filteredGroup.value}
+                                                                ev-select={() => onSelect($value.value, groupValue, onChange)}
+                                                                hideOnSelect={!multiple}
+                                                                class={{'k-active': (checked = isChecked($value.value, groupValue))}}
+                                                            >
+                                                                <Checkbox v-if={multiple} value={checked}>{$value.label}</Checkbox>
+                                                                <span v-else>{$value.label}</span>
+                                                            </DropdownItem>
+                                                        </div>
                                                     </DropdownMenu>
                                                 </Dropdown>
                                                 <div v-if={sortable}

package/components/table/demos/rowExpandable.md

@@ -5,7 +5,7 @@ order: 8
 
 通过`expand`扩展点指定行展开后的模板内容。是否支持点击该行任何区域都展开内容，
 是由`rowExpandable`控制的，默认情况下它为`true`。你也可以将它设为`false`，来自定义展开逻辑。例如：
-点击某个`icon`后展开改行，而点击其它元素无效。自定义展开逻辑，修改`expandedKeys`属性值，来指定哪些`key`对应的行展开。
+点击某个`icon`后展开该行，而点击其它元素无效。自定义展开逻辑，修改`expandedKeys`属性值，来指定哪些`key`对应的行展开。
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/demos/selectedKeys.md

@@ -3,7 +3,7 @@ title: 行高亮
 order: 5
 ---
 
-给`Table`添加`rowSelectable`属性，可以让表格点击行时高亮改行，你可以指定值为`multiple`来支持多行
+给`Table`添加`rowSelectable`属性，可以让表格点击行时高亮该行，你可以指定值为`multiple`来支持多行
 高亮。类似`checkedKeys`，我们可以通过`selectedKeys`来绑定高亮行的`key`，当高亮的行改变时，组件也会
 抛出`$change:selectedKeys`事件，我们可以通过`getSelectedData`来获取高亮行的数据