@king-design/intact 2.0.13 → 2.0.15

package/components/cascader/index.md

@@ -29,6 +29,7 @@ sidebar: doc
 | format | 自定义结果显示，组件会将当前选择的所有数据项以数组的格式作为参数传入 | `Function` | `(values: string[]) => values.map(value => value.label).join(' / ')` |
 | loadData | 如果`data`中的`children`属性值为空数组`[]`，则可以使用该属性定义动态加载逻辑，组件会将当前选中的数据项作为参数传入 | `(data: CascaderData<V>) => any` | `undefined` |
 | filter | 如果可搜索，你可以传入`filter`改变搜索逻辑，组件会将搜索关键词和数据项作为参数传入 | `(keywords: string, data: CascaderData<V>) => boolean` | `(keywords: string, data: CascaderData<V>) => data.label.includes(keywords)` |
+| show | 是否展示菜单项 | `boolean` | `false` |
 
 ```ts
 export type CascaderData<V> = {

package/components/cascader/useValue.ts

@@ -36,7 +36,7 @@ export function useValue() {
         }
     });
 
-    instance.watch('_show', value => {
+    instance.watch('show', value => {
         if (value) {
             showedValue.set(last(values.value) || []);
         }

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/datepicker/index.md

@@ -30,6 +30,7 @@ sidebar: doc
 | disabledDate | 该属性值是一个函数，用于定义那些日期被禁止选择，函数参数为日期字符串，返回`true`则表示禁用该日期 | `(v: Dayjs) => boolean` | `undefined` |
 | type | 组件类型：`"date"` 只选择日期；`"datetime"` 选择日期和时间；`"year"` 选择年份；`"month"` 选择月份 | `"date"` | `"datetime"` | `"year"` | `"month"` | `"date"` |
 | shortcuts | 指定快捷方式 | `Shortcut[]` | `undefined` |
+| show | 是否展示菜单项 | `boolean` | `false` |
 
 ```ts
 import {Dayjs} from 'dayjs';

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/form/styles.ts

@@ -107,8 +107,11 @@ export function makeItemStyles() {
 
         // nested
         .k-form-item {
-            display: block;
-            width: auto;
+            &,
+            .k-form-content {
+                display: block;
+                width: auto;
+            }
         }
 
         // append

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/base.ts

@@ -35,8 +35,7 @@ export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach =
     placeholder?: Children
     container?: Container
     width?: string | number
-
-    _show?: boolean
+    show?: boolean
 }
 
 export interface BaseSelectEvents {
@@ -68,8 +67,7 @@ const typeDefs: Required<TypeDefs<BaseSelectProps<any>>> = {
     placeholder: [String, Number],
     container: [Function, String],
     width: [String, Number],
-
-    _show: Boolean,
+    show: Boolean,
 };
 
 const defaults = (): Partial<BaseSelectProps<any>> => ({
@@ -102,7 +100,7 @@ export abstract class BaseSelect<
 
     init() {
         provide(SELECT, this);
-        useShowHideEvents('_show');
+        useShowHideEvents('show');
         // this.input = useInput();
 
         this.watch('value', this.position, {presented: true});
@@ -121,12 +119,12 @@ export abstract class BaseSelect<
 
     @bind
     show() {
-        this.set('_show', true);
+        this.set('show', true);
     }
 
     @bind
     hide() {
-        this.set('_show', false);
+        this.set('show', false);
     }
 
     public resetKeywords(keywords: State<string>) {