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

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,18 @@ const defaults = deepDefaults(
         // search input
         search: {
             suffixMarginRight: '15px' 
-        }
+        },
+
+        // flat
+        flat: {
+            get color() { return theme.color.lightBlack },
+            get bgColor() { return theme.color.bg },
+        },
 
+        // count
+        count: {
+            get color() { return theme.color.placeholder },
+        }
     },
     sizes.reduce((memo, size) => {
         const styles = theme[size];
@@ -62,30 +73,35 @@ export function makeStyles() {
     return css`
         display: inline-block;
         width: ${input.width};
+        color: ${input.color};
         vertical-align: middle;
         .k-input-wrapper {
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
             width: 100%;
             position: relative;
-        }
-        .k-input-inner {
-            display: inline-block;
-            width: 100%;
             border: ${input.border};
             background-color: ${input.bgColor};
             transition: border ${input.transition}, background ${input.transition}, box-shadow ${input.transition};
             border-radius: ${input.borderRadius};
-            outline: none;
-            position: relative;
-            color: ${input.color};
             &:hover {
                 border: ${input.hoverBorder};
                 z-index: 1;
             }
-            &:focus {
-                border: ${input.focusBorder};
-                z-index: 1;
-            }
+        }
+        &.k-focus .k-input-wrapper {
+            border: ${input.focusBorder};
+            z-index: 1;
+        }
+        .k-input-inner {
+            flex: 1;
+            outline: none;
+            color: inherit;
+            font-size: inherit;
+            border: none;
+            background: transparent;
+            padding: 0;
+            width: 0; // must set width to 0, otherwise it has min width
             &::placeholder {
                 color: ${input.placeholderColor};
             }
@@ -99,12 +115,17 @@ export function makeStyles() {
         // prefix & suffix
         .k-input-prefix,
         .k-input-suffix {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            z-index: 2;
+            display: flex;
+            align-items: center;
+            gap: ${input.clearIconGap};
             color: ${theme.color.lightBlack};
-            line-height: 1;
+            position: relative;
+        }
+        .k-input-prefix {
+            margin-right: ${input.clearIconGap};
+        }
+        .k-input-suffix {
+            margin-left: ${input.clearIconGap};
         }
 
         // clearable
@@ -113,27 +134,29 @@ export function makeStyles() {
             transition: opacity ${input.transition};
             pointer-events: none;
             color: ${input.clearIconColor};
-            + * {
-                margin-left: ${input.clearIconGap};
-            }
         }
         &:hover .k-input-clear.k-input-show {
             opacity: 1;
             pointer-events: all;
         }
 
+        // show password
+        .k-input-show-password {
+            color: ${input.clearIconColor};
+        }
+
         // stack clear icon
         &.k-stack-clear {
             .k-input-clear {
                 position: absolute;
                 z-index: 1;
                 right: 0;
-                &.k-input-show + i {
+                &.k-input-show + * {
                     transition: opacity ${input.transition};
                 }
             }
             &:hover {
-                .k-input-clear.k-input-show + i {
+                .k-input-clear.k-input-show + * {
                     opacity: 0;
                 }
             }
@@ -141,29 +164,23 @@ export function makeStyles() {
 
         // group
         &.k-group {
-            display: table;
-            .k-input-inner {
+            display: inline-flex;
+            .k-input-wrapper {
                 border-radius: 0;
             }
             .k-input-wrapper:first-child {
-                .k-input-inner {
-                    border-radius: ${input.borderRadius} 0 0 ${input.borderRadius};
-                }
+                border-radius: ${input.borderRadius} 0 0 ${input.borderRadius};
             }
             .k-input-wrapper:last-child {
-                .k-input-inner {
-                    border-radius: 0 ${input.borderRadius} ${input.borderRadius} 0;
-                }
+                border-radius: 0 ${input.borderRadius} ${input.borderRadius} 0;
             }
         }
         .k-input-prepend,
         .k-input-append {
-            display: table-cell;
-            width: 1px;
-            vertical-align: middle;
+            display: inline-flex;
+            align-items: center;
             background-color: ${input.groupBgColor};
             border: ${input.border};
-            text-align: center;
             white-space: nowrap;
             .k-btn {
                 margin: -1px;
@@ -203,14 +220,24 @@ export function makeStyles() {
             border-left: none;
         }
 
+        // flat
+        &.k-flat {
+            color: ${input.flat.color};
+            .k-input-wrapper {
+                border: none;
+                background: ${input.flat.bgColor};
+            }
+        }
+
         // disabled
         &.k-disabled {
             color: ${input.disabledColor};
             cursor: not-allowed;
-            .k-input-inner {
-                color: ${input.disabledColor};
+            .k-input-wrapper {
                 border-color: ${input.disabledBorderColor};
                 background: ${input.disabledBgColor};
+            }
+            .k-input-inner {
                 cursor: not-allowed;
             }
         }
@@ -220,34 +247,10 @@ export function makeStyles() {
             const styles = input[size];
             const sizeClassName = css`
                 font-size: ${styles.fontSize};
-                .k-input-inner {
+                .k-input-wrapper {
                     height: ${styles.height};
-                    line-height: ${styles.height};
-                    font-size: ${styles.fontSize};
                     padding: 0 ${styles.paddingGap};
                 }
-                .k-input-prefix {
-                    left: ${styles.paddingGap};
-                }
-                .k-input-suffix {
-                    right: ${styles.paddingGap};
-                }
-                &.k-with-prefix {
-                    .k-input-inner {
-                        padding-left: calc(${styles.paddingGap} + 1rem + ${input.clearIconGap});
-                    }
-                }
-                &.k-with-suffix,
-                &.k-clearable {
-                    .k-input-inner {
-                        padding-right: calc(${styles.paddingGap} + 1rem + ${input.clearIconGap});
-                    }
-                }
-                &:not(.k-stack-clear).k-with-suffix.k-clearable {
-                    .k-input-inner {
-                        padding-right: calc(${styles.paddingGap} + 2rem + ${input.clearIconGap} * 2);
-                    }
-                }
             `;
             
             if (size === 'default') return sizeClassName;
@@ -260,9 +263,8 @@ export function makeStyles() {
 
         // inline
         &.k-inline {
-            .k-input-inner {
+            .k-input-wrapper {
                 height: auto;
-                line-height: inherit;
                 border: none;
                 border-radius: 0;
                 padding: 0;
@@ -270,25 +272,52 @@ export function makeStyles() {
         }
 
         // textarea
-        .k-textarea {
-            padding: ${input.textareaPadding};
-            height: auto;
-            line-height: 1.5;
-            vertical-align: top;
+        &.k-type-textarea {
+            .k-input-wrapper {
+                display: inline-block;
+                padding: 0;
+                height: auto;
+            }
+            .k-textarea {
+                width: 100%;
+                padding: ${input.textareaPadding};
+                line-height: 1.5;
+                vertical-align: top;
+            }
+            .k-input-suffix {
+                margin: 0;
+                justify-content: flex-end;
+            }
         }
+        ${(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 {
+            left: 0;
+            top: 0;
+            right: 0;
             position: absolute;
+            overflow: hidden;
+            width: 100%;
             visibility: hidden;
-            top: 0;
             white-space: nowrap;
         }
         &.k-auto-width {
             width: auto;
-            .k-input-inner {
-                box-sizing: content-box;
-            }
+            max-width: 100%;
+        }
+
+        // count
+        .k-input-count {
+            color: ${input.count.color};
         }
     `
 }
@@ -306,6 +335,9 @@ export function makeSearchStyles() {
             right: 0;
             z-index: 1;
         }
+        &.k-default .k-btn:hover {
+            background: transparent;
+        }
         .k-input-suffix {
             margin-right: ${input.search.suffixMarginRight};
         }
@@ -330,13 +362,16 @@ export function makeSearchStyles() {
 
         // line
         &.k-line {
-            .k-input-inner {
+            .k-input-wrapper {
                 border-width: 0;
             }
             &.k-open {
-                .k-input-inner {
+                .k-input-wrapper {
                     border-bottom-width: 1px;
                 }
+                .k-btn:hover {
+                    background: transparent;
+                }
             }
         }
     `

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

@@ -0,0 +1,17 @@
+import {useInstance, createRef, onMounted, nextTick} from 'intact';
+import type {Input} from './';
+import {useState} from '../../hooks/useState';
+
+export function useFocus() {
+    const instance = useInstance() as Input;
+    const isFocus = useState(false);
+
+    instance.on('focus', () => isFocus.set(true));
+    instance.on('blur', () => isFocus.set(false));
+
+    function focusInputOnClick(e: MouseEvent) {
+        instance.focus();
+    }
+
+    return { isFocus, focusInputOnClick }; 
+}

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/menu/item.vdt

@@ -35,7 +35,7 @@ const title = (children) => (
     >
         <Icon class="k-menu-dot ion-record" v-if={showDot} />
         <div class="k-menu-name">{children}</div>
-        <i class="k-menu-arrow ion-ios-arrow-down" v-if={subMenuVNode}></i>
+        <Icon class="k-menu-arrow k-icon-down" v-if={subMenuVNode} />
     </div>
 );
 

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;
         }