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

package/components/input/index.ts

@@ -1,14 +1,15 @@
 import {Component, TypeDefs, createRef, watch, nextTick, onMounted, RefObject} from 'intact';
 import {Sizes, sizes} from '../../styles/utils';
 import template from './index.vdt';
-import {bind} from '../utils';
-import {isNullOrUndefined, EMPTY_OBJ} from 'intact-shared';
+import {bind, selectValue} from '../utils';
 import {useAutoWidth} from './useAutoWidth';
 import {useFrozen} from './useFrozen';
 import {CommonInputHTMLAttributes, Events} from '../types';
+import {useAutoRows} from './useAutoRows';
+import { useShowPassword } from './useShowPassword';
 export * from './search';
 
-type HTMLInputTypes =
+export type HTMLInputTypes =
     | 'textarea' // for textarea
     | 'button'
     | 'checkbox'
@@ -56,7 +57,7 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     clearable?: boolean
     disabled?: boolean
     size?: Sizes
-    rows?: string | number
+    rows?: string | number | 'auto' | AutoRows
     autoWidth?: boolean
     fluid?: boolean
     width?: number | string
@@ -64,8 +65,16 @@ export interface InputProps<V extends Value = Value> extends InputHTMLAttributes
     frozenOnInput?: boolean
     inline?: boolean
     waveDisabled?: boolean
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both'
+    showPassword?: boolean
+    flat?: boolean
 }
 
+export type AutoRows = {
+    min?: number
+    max?: number
+} 
+
 export interface InputEvents {
     clear: [MouseEvent]
     focus: [FocusEvent]
@@ -89,7 +98,7 @@ const typeDefs: Required<TypeDefs<Omit<InputProps, keyof InputHTMLAttributes>>>
     clearable: Boolean,
     disabled: Boolean,
     size: sizes,
-    rows: [String, Number],
+    rows: [String, Number, 'auto', Object],
     autoWidth: Boolean,
     fluid: Boolean,
     width: [Number, String],
@@ -97,12 +106,16 @@ const typeDefs: Required<TypeDefs<Omit<InputProps, keyof InputHTMLAttributes>>>
     frozenOnInput: Boolean,
     inline: Boolean,
     waveDisabled: Boolean,
+    resize: ['none', 'vertical', 'horizontal', 'both'],
+    showPassword: Boolean,
+    flat: Boolean,
 }
 
 const defaults = (): Partial<InputProps> => ({
     type: 'text', // text | textarea
     size: 'default',
     rows: 2,
+    resize: 'vertical',
 });
 
 const events: Events<InputEvents> = {
@@ -121,6 +134,8 @@ export class Input<V extends Value = Value> extends Component<InputProps<V>, Inp
     private inputRef = createRef<HTMLInputElement>();
     private autoWidth = useAutoWidth();
     private frozen = useFrozen();
+    private autoRows = useAutoRows(this.inputRef);
+    private showPassword = useShowPassword();
 
     focus() {
         this.inputRef.value!.focus();
@@ -131,14 +146,7 @@ export class Input<V extends Value = Value> extends Component<InputProps<V>, Inp
     }
 
     select() {
-        const input = this.inputRef.value!;
-        if (input.select) {
-            input.select();
-        } else if (input.setSelectionRange) {
-            // mobile safari
-            input.focus();
-            input.setSelectionRange(0, input.value.length);
-        }
+        selectValue(this.inputRef.value!);
     }
 
     @bind

package/components/input/index.vdt

@@ -1,7 +1,7 @@
 import {Icon} from '../icon';
 import {addStyle, isTextBlock, getRestProps} from '../utils';
 import {makeStyles} from './styles';
-import {noop, isNullOrUndefined} from 'intact-shared';
+import {noop, isNullOrUndefined, isStringOrNumber} from 'intact-shared';
 import {Wave} from '../wave';
 import {context as ErrorContext} from '../form/useError';
 
@@ -9,7 +9,7 @@ const {
     className, style, type, value, defaultValue, placeholder,
     clearable, disabled, size, rows, autoWidth, fluid,
     width, stackClearIcon, frozenOnInput, readonly, inline,
-    waveDisabled,
+    waveDisabled, resize, flat,
     
     'ev-click': click,
     'ev-mounseenter': mouseenter,
@@ -24,6 +24,8 @@ const {
     startInput, onInput, endInput
 } = this.frozen;
 
+const isNotAutoRows = isStringOrNumber(rows) && rows !== 'auto';
+
 const classNameObj = {
     'k-input': true,
     [`k-${size}`]: size !== 'default',
@@ -36,11 +38,22 @@ const classNameObj = {
     'k-fluid': fluid,
     'k-stack-clear': stackClearIcon,
     'k-inline': inline,
+    'k-flat': flat,
+    [`k-resize-${resize}`]: type === 'textarea' && isNotAutoRows,
+    [`k-resize-none`]: type === 'textarea' && !isNotAutoRows,
     [className]: className,
     [makeStyles()]: true,
 }
 
+const {
+    isShow: isShowPassword,
+    toggleShow: toggleShowPassword,
+    type: showPasswordType,
+    showIcon: showPasswordIcon,
+} = this.showPassword;
+
 const {fakeRef, width: {value: fakeWidth}} = this.autoWidth;
+const height = this.autoRows;
 
 const inputValue = frozenOnInput && inputing ? originalValue : value;
 const hasInputValue = !isNullOrUndefined(inputValue);
@@ -55,7 +68,7 @@ const inputProps = {
     placeholder,
     disabled,
     ref: this.inputRef,
-    style: autoWidth ? {width: fakeWidth + 'px'} : undefined,
+    style: autoWidth && fakeWidth ? {width: fakeWidth + 'px'} : undefined,
 };
 // if we pass value to input element, the input is controlled and the
 // defaultValue does not work
@@ -90,14 +103,25 @@ if (hasInputValue) {
                     <input v-if={type !== 'textarea'}
                         {...inputProps}
                         class="k-input-inner" 
-                        type={type}
+                        type={showPasswordType.value}
                     />
                     <textarea v-else 
                         {...inputProps}
                         class="k-input-inner k-textarea"
-                        rows={rows}
+                        rows={isNotAutoRows ? rows : 1}
+                        style={height.value ? addStyle(inputProps.style, { height: height.value + 'px' }) : inputProps.style}
                     ></textarea>
-                    <div class="k-input-suffix" v-if={$blocks.suffix || clearable && !disabled}>
+                    <div class="k-input-suffix" v-if={$blocks.suffix || clearable && !disabled || showPasswordIcon.value}>
+                        <template v-if={showPasswordIcon.value}>
+                            <Icon hoverable
+                                class={{
+                                    "k-input-show-password": true,
+                                    "ion-eye-disabled": !isShowPassword.value,
+                                    "ion-eye": isShowPassword.value,
+                                }}
+                                ev-click={toggleShowPassword}
+                            />{' '}
+                        </template>
                         <Icon v-if={clearable && !disabled}
                             class={{
                                 "k-input-clear ion-ios-close": true, 

package/components/input/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes} from '../../styles/utils';
 import '../../styles/global';
+import {Input} from './';
 
 const defaults = deepDefaults(
     {
@@ -24,7 +25,7 @@ const defaults = deepDefaults(
         clearIconGap: '3px',
         
         // textarea
-        get textareaPadding() { return `5px ${input.paddingGap}` },
+        get textareaPadding() { return `6px ${input.paddingGap}` },
 
         // group
         get groupBgColor() { return theme.color.bg },
@@ -38,8 +39,13 @@ const defaults = deepDefaults(
         // search input
         search: {
             suffixMarginRight: '15px' 
-        }
+        },
 
+        // flat
+        flat: {
+            get color() { return theme.color.lightBlack },
+            get bgColor() { return theme.color.bg },
+        }
     },
     sizes.reduce((memo, size) => {
         const styles = theme[size];
@@ -122,6 +128,11 @@ export function makeStyles() {
             pointer-events: all;
         }
 
+        // show password
+        .k-input-show-password {
+            color: ${input.clearIconColor};
+        }
+
         // stack clear icon
         &.k-stack-clear {
             .k-input-clear {
@@ -203,6 +214,15 @@ export function makeStyles() {
             border-left: none;
         }
 
+        // flat
+        &.k-flat {
+            .k-input-inner {
+                border: none;
+                background: ${input.flat.bgColor};
+                color: ${input.flat.color};
+            }
+        }
+
         // disabled
         &.k-disabled {
             color: ${input.disabledColor};
@@ -276,6 +296,15 @@ export function makeStyles() {
             line-height: 1.5;
             vertical-align: top;
         }
+        ${(Input.typeDefs.resize as string[]).map(type => {
+            return css`
+                &.k-resize-${type} {
+                    .k-textarea {
+                        resize: ${type};
+                    }
+                }
+            `
+        })}
 
         // fake dom for get value's width
         .k-input-fake {
@@ -286,7 +315,9 @@ export function makeStyles() {
         }
         &.k-auto-width {
             width: auto;
+            max-width: 100%;
             .k-input-inner {
+                max-width: 100%;
                 box-sizing: content-box;
             }
         }

package/components/input/useAutoRows.ts

@@ -0,0 +1,65 @@
+import {useInstance, createRef, onMounted, RefObject, watch} from 'intact';
+import type {Input} from './';
+import {useState} from '../../hooks/useState';
+import { isObject } from 'intact-shared';
+
+export function useAutoRows(inputRef: RefObject<HTMLInputElement>) {
+    const instance = useInstance() as Input;
+    const height = useState<number>(0);
+
+    let lineHeight: number;
+    let paddingTop: number;
+    let paddingBottom: number;
+    let isBorderBox: boolean;
+
+    function getStyles() {
+        if (instance.get('type') === 'textarea') {
+            const styles = getComputedStyle(inputRef.value!);
+
+            lineHeight = parseInt(styles.lineHeight); 
+            paddingTop = parseInt(styles.paddingTop); 
+            paddingBottom = parseInt(styles.paddingBottom); 
+            isBorderBox = styles.boxSizing === 'border-box';
+        }
+    }
+
+    onMounted(getStyles);
+    instance.watch('type', getStyles, { presented: true });
+
+    instance.watch('value', adjust, {inited: true, presented: true});
+    instance.watch('placeholder', adjust, {inited: true, presented: true});
+    instance.watch('rows', adjust, {inited: true, presented: true});
+    onMounted(adjust);
+    
+    function adjust() {
+        const { rows, type } = instance.get();
+        if (type === 'textarea' && (rows === 'auto' || isObject(rows))) {
+            const textarea = inputRef.value!;
+            const originheight = textarea.style.height; 
+            // we shuold remove height before get scrollHeight,
+            // otherwise we cannot shrink the height when we remove the text
+            textarea.style.height = '';
+            const scrollHeight = textarea.scrollHeight;
+            const lines = (scrollHeight - paddingTop - paddingBottom) / lineHeight;
+            textarea.style.height = originheight;
+
+            let actualLines = lines;
+            if (rows !== 'auto') {
+                const { min, max } = rows;
+                if (min && lines <= min) {
+                    actualLines = min;
+                }
+                if (max && lines >= max) {
+                    actualLines = max;
+                }
+            }
+            height.set(lineHeight * actualLines + (isBorderBox ? paddingTop + paddingBottom + 2 /* border */ : 0));
+
+            return;
+        }
+
+        height.set(0);
+    }
+
+    return height;
+}

package/components/input/useAutoWidth.ts

@@ -1,4 +1,4 @@
-import {useInstance, createRef, onMounted} from 'intact';
+import {useInstance, createRef, onMounted, nextTick} from 'intact';
 import type {Input} from './';
 import {useState} from '../../hooks/useState';
 
@@ -13,10 +13,19 @@ export function useAutoWidth() {
 
     function adjustWidth() {
         if (instance.get('autoWidth')) {
-            const _width = fakeRef.value!.offsetWidth || 1;
-            width.set(_width);
+            nextTick(() => {
+                const fakeElem = fakeRef.value;
+                if (isVisible(fakeElem)) {
+                    const _width = fakeElem!.offsetWidth || 1;
+                    width.set(_width);
+                }
+            });
         }
     }
 
     return {fakeRef, width};
 }
+
+function isVisible(elem: HTMLDivElement | null) {
+    return elem && (elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
+}

package/components/input/useShowPassword.ts

@@ -0,0 +1,27 @@
+import {useInstance, createRef, onMounted, RefObject, watch} from 'intact';
+import type {Input, HTMLInputTypes} from './';
+import {useState} from '../../hooks/useState';
+import { useReceive } from '../../hooks/useReceive';
+
+export function useShowPassword() {
+    const instance = useInstance() as Input;
+    const isShow = useState(false);
+    const type = useState<HTMLInputTypes | undefined>(undefined);
+    const showIcon = useState(false);
+
+    instance.on('$receive:type', (_type) => {
+        type.set(_type);
+    });
+
+    useReceive<Input>(['type', 'showPassword'], () => {
+        const { showPassword, type } = instance.get();
+        showIcon.set(type === 'password' && !!showPassword);
+    });
+
+    function toggleShow() {
+        isShow.set(!isShow.value);
+        type.set(isShow.value ? 'text' : 'password');
+    }
+
+    return { isShow, type, toggleShow, showIcon };
+}

package/components/menu/demos/collapse.md

@@ -64,7 +64,7 @@ export default class extends Component<Props> {
         return {
             expandedKeys: ['3'],
             selectedKey: '3-2',
-            collapse: false,
+            collapse: true,
             theme: 'dark'
         } as MenuProps;
     }

package/components/menu/index.spec.ts

@@ -1,4 +1,5 @@
 import {Component} from 'intact';
+import BasicDemo from '~/components/menu/demos/basic';
 import CollapseDemo from '~/components/menu/demos/collapse';
 import AccordionDemo from '~/components/menu/demos/accordion';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
@@ -8,13 +9,17 @@ describe('Menu', () => {
     afterEach(() => unmount());
 
     it('expand and shrink sub menu', async () => {
-        const [instance, element] = mount(CollapseDemo);
+        const [instance, element] = mount(BasicDemo);
+
+        await wait();
 
+        // shrink
         const title = element.querySelector('.k-expanded .k-menu-title') as HTMLElement;
         title.click();
         await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
         expect(instance.get('expandedKeys')).to.eql([]);
+
         title.click();
         await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
@@ -24,6 +29,9 @@ describe('Menu', () => {
     it('select', async () => {
         const [instance, element] = mount(CollapseDemo);
 
+        instance.set('collapse', false);
+        await wait();
+
         expect(element.innerHTML).to.matchSnapshot();
 
         const [title, disabledTitle] = element.querySelectorAll<HTMLElement>('.k-menu-title');

package/components/menu/item.ts

@@ -9,6 +9,7 @@ import {useDropdown} from './useDropdown';
 import {useRouter, navigate} from '../../hooks/useRouter';
 import {useRecordItem} from '../../hooks/useRecordComponent';
 import {MENU_RECORD_KEY, useHighlightItem} from './useHighlight';
+import {Events} from '../types';
 
 export interface MenuItemProps {
     key: Key 
@@ -32,11 +33,17 @@ const typeDefs: Required<TypeDefs<MenuItemProps>> = {
     disabled: Boolean,
 };
 
+const events: Events<MenuItemEvents> = {
+    click: true,
+    select: true,
+};
+
 export const MENU_ITEM = 'MenuItem';
 
 export class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
     static template = template;
     static typeDefs = typeDefs;
+    static events = events;
 
     public rootMenu = inject<Menu>(ROOT_MENU)!;
     public parentMenu = inject<Menu>(MENU)!;

package/components/pagination/demos/flat.md

@@ -0,0 +1,22 @@
+---
+title: 无边框样式
+order: 1.1
+---
+
+添加`flat`属性，可以展示无边框的样式效果
+
+```vdt
+import {Pagination} from 'kpc';
+
+<div>
+    <Pagination flat total={200} size="large" showGoto />
+    <Pagination flat total={200} showGoto />
+    <Pagination flat total={200} size="small" showGoto />
+    <Pagination flat total={200} size="mini" showGoto />
+</div>
+```
+
+```styl
+.k-pagination
+    margin-bottom 20px
+```

package/components/pagination/index.md

@@ -15,7 +15,7 @@ sidebar: doc
 | value | 当前页码 | `number` | `1` |
 | limit | 页面条数 | `number` | `10` |
 | limits | 页面条数 | `Array<number>` | `[10, 20, 50]` |
-| noBorder | 是否展示无边框样式，默认有边框 | `boolean` | `false` |
+| flat | 是否展示无边框样式，默认有边框 | `boolean` | `false` |
 | simple | 是否展示简洁样式 | `boolean` | `false` |
 | showTotal | 显示总条数 | `boolean` | `true` |
 | showGoto | 显示快速跳转框 | `boolean` | `false` |

package/components/pagination/index.spec.ts

@@ -3,6 +3,8 @@ 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';
+import { Component } from 'intact';
+import { Pagination } from '.';
 
 describe('Pagination', () => {
     afterEach(() => unmount());
@@ -89,4 +91,25 @@ describe('Pagination', () => {
         expect(input.value).to.eql('10');
         expect(instance.get('value2')).to.eql(10);
     });
+
+    it('should not set value to 0 when total is 0 on intialization', async () => {
+        class Demo extends Component {
+            static template = `
+                const { Pagination } = this;
+                <Pagination total={0} v-model="page" />
+            `;
+
+            static defaults() {
+                return {
+                    page: 1,
+                }
+            }
+
+            private Pagination = Pagination;
+        }
+
+        const [instance] = mount(Demo);
+        // await wait();
+        expect(instance.get('page')).to.eql(1);
+    });
 });

package/components/pagination/index.ts

@@ -11,7 +11,7 @@ export interface PaginationProps {
     value?: number,
     limit?: number,
     limits?: number[],
-    noBorder?: boolean,
+    flat?: boolean,
     simple?: boolean,
     showTotal?: boolean,
     showGoto?: boolean,
@@ -36,7 +36,7 @@ const typeDefs: Required<TypeDefs<PaginationProps>> = {
     value: Number,
     limit: Number,
     limits: Array,
-    noBorder: Boolean,
+    flat: Boolean,
     simple: Boolean,
     showTotal: Boolean,
     showGoto: Boolean,
@@ -100,7 +100,8 @@ export class Pagination extends Component<PaginationProps, PaginationEvents> {
         
         if (page > totalPages) {
             page = totalPages;
-        }
+        } 
+        // perhaps totalPages is 0
         if (page < 1) {
             page = 1;
         }

package/components/pagination/index.vdt

@@ -7,7 +7,7 @@ import {_$} from '../../i18n';
 import {makeStyles} from './styles';
 
 const {
-    total, size, noBorder, simple, 
+    total, size, flat, simple, 
     className, showTotal, showGoto,
     counts, value, limit, limits,
     showLimits, disableBtn, disablePage
@@ -19,15 +19,12 @@ const classNameObj = {
     'k-pagination': true,
     [className]: className,
     [`k-${size}`]: size !== 'default',
-    ['k-no-border']: noBorder,
+    ['k-flat']: flat,
     ['k-simple']: simple,
     [makeStyles()]: true,
 };
 
-let type = 'default';
-if (noBorder || simple) {
-    type = 'none';
-}
+const type = flat ? 'flat' : simple ? 'none' : 'default';
 
 const totalPages = (Math.ceil(total / limit)) || 0;
 
@@ -135,7 +132,7 @@ let nextPage = value + 1;
 
     <template v-if={!simple}>
         <div class="k-pagination-limits" v-if={showLimits}>
-            <Select v-model="limit" size={size}>
+            <Select v-model="limit" size={size} flat={flat}>
                 <Option v-for={limits} value={$value}>
                     {_$('{n} 条 / 页', {n: $value})}
                 </Option>
@@ -143,8 +140,8 @@ let nextPage = value + 1;
         </div>
 
         <div class="k-pagination-goto" v-if={showGoto}>
-            <span class="c-middle">{_$('跳至')}</span>
-            <Input size={size} value={value} ev-change={this.goto}/>
+            <span class="c-middle">{_$('前往')}</span>
+            <Input size={size} value={value} ev-change={this.goto} flat={flat} />
             <span class="c-middle">{_$('页')}</span>
         </div>       
     </template>

package/components/pagination/styles.ts

@@ -124,8 +124,8 @@ export function makeStyles() {
             `
         })}
 
-        // noBorder
-        &.k-no-border {
+        // flat 
+        &.k-flat {
             .k-select {
                 &,
                 &:hover,

package/components/popover/content.ts

@@ -0,0 +1,40 @@
+import {
+    TooltipContent,
+    TooltipContentProps,
+    TooltipContentEvents,
+    TooltipContentBlocks,
+} from "../tooltip/content";
+import { Component, TypeDefs, Children, VNode } from "intact";
+import template from "./content.vdt";
+
+export interface PopoverContentProps extends TooltipContentProps {
+    type?: 'info' | 'success' | 'warning' | 'error'
+    title?: Children;
+    content?: Children;
+}
+
+export interface PopoverContentEvents extends TooltipContentEvents { }
+
+export interface PopoverContentBlocks extends TooltipContentBlocks {
+    title: null;
+    content: null;
+    footer: null;
+}
+
+const typeDefs: Required<TypeDefs<PopoverContentProps>> = {
+    type: ['info', 'error', 'success', 'warning'],
+    title: [String, Number, VNode, Array],
+    content: [String, Number, VNode, Array],
+};
+
+export class PopoverContent extends TooltipContent<
+    PopoverContentProps,
+    PopoverContentEvents,
+    PopoverContentBlocks
+> {
+    static template = template;
+    static typeDefs = typeDefs;
+
+    // don't check children
+    protected isEmptyChildren: boolean = false;
+}