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

package/components/dropdown/menu.ts

@@ -35,8 +35,8 @@ export class DropdownMenu<
     @bind
     protected onMouseEnter(e: MouseEvent) {
         const dropdown = this.dropdown!; 
-        dropdown!.show();
-        dropdown!.trigger('mouseenter', e);
+        dropdown.show();
+        dropdown.trigger('mouseenter', e);
     }
 
     @bind
@@ -63,7 +63,7 @@ function useKeyboardForDropdownMenu(dropdown: Dropdown) {
     const focus = () => focusByIndex(0);
 
     // In Cascader the menu may have been replaced by another menu, in this case,
-    // if the dropdown has showed on mount the menu, add keydown listener
+    // if the dropdown has showed while we mounted the menu, add keydown listener
     if (dropdown.get('value')) {
         onShow();
     }
@@ -78,4 +78,4 @@ function useKeyboardForDropdownMenu(dropdown: Dropdown) {
     });
 
     return {lock};
-}
+}

package/components/dropdown/usePosition.ts

@@ -2,6 +2,7 @@ import {useInstance, findDomFromVNode} from 'intact';
 import type {Dropdown} from './';
 import {Options, position, Feedback} from '../position';
 import {noop} from 'intact-shared';
+import {isObject} from 'intact-shared';
 
 export type FeedbackCallback = (feedback: Feedback) => void;
 
@@ -16,7 +17,16 @@ export function usePosition() {
     });
 
     (['of', 'position'] as const).forEach(item => {
-        instance.watch(item, () => {
+        instance.watch(item, (newValue, oldValue) => {
+            // return if object is the same
+            if (
+                isObject(newValue) && isObject(oldValue) &&
+                // is not event object
+                !(newValue instanceof Event) &&
+                JSON.stringify(newValue) === JSON.stringify(oldValue)
+            )  {
+                return;
+            }
             if (instance.get('value')) {
                 handle(noop);
             }
@@ -48,6 +58,7 @@ export function usePosition() {
         position(findDomFromVNode(instance.menuVNode!, true) as HTMLElement, {
             my: 'left top+8',
             at: 'left bottom',
+            collision: instance.get('collison'),
             ...pos,
             of: ofElement,
             using: _feedback => {

package/components/editable/index.ts

@@ -58,9 +58,23 @@ export class Editable<
     @bind
     private edit() {
         this.set('editing', true);
-        nextTick(() => {
-            this.inputRef.value!.select();
-        });
+        /**
+         * Intact will update in nextTick, but Vue will call
+         * call updated method in nextTick of this nextTick
+         * so we should do it after two nextTicks
+         * https://github.com/ksc-fe/kpc/issues/847
+         *
+         * use binding this.select to Input $mounted event instead
+         */
+        // nextTick(() => {
+            // nextTick(() => {
+                // this.inputRef.value!.select();
+            // });
+        // });
+    }
+
+    @bind select() {
+        this.inputRef.value!.select();
     }
 
     @bind

package/components/editable/index.vdt

@@ -33,6 +33,7 @@ const classNameObj = {
             ev-keydown={this.onKeydown}
             ref={this.inputRef}
             frozenOnInput
+            ev-$mounted={this.select}
         />
     </div>
 </div>

package/components/form/demos/basic.md

@@ -110,7 +110,7 @@ import {
     </FormItem>
     <FormItem>
         <Button type="primary" htmlType="submit" ev-click={this.handleSubmit}>提交</Button>
-        <Button style="margin-left: 20px" ev-click={this.reset}>重置</Button>
+        <Button style="margin-left: 8px" ev-click={this.reset}>重置</Button>
     </FormItem>
 </Form>
 ```
@@ -121,7 +121,7 @@ import {
     width 300px
 .k-radio
 .k-checkbox
-    margin-right 10px
+    margin-right 24px
 
 @media (max-width: 768px) 
     .k-form-item

package/components/form/demos/custom.md

@@ -36,16 +36,14 @@ import {Form, FormItem, Input, Button} from 'kpc';
                 <Button ev-click={this.remove.bind(self, $key)}>删除</Button>
             </b:append>
         </FormItem>
+    </FormItem>
+    <FormItem>
         <Button ev-click={this.add}>添加</Button>
     </FormItem>
 </Form>
 ```
 
 ```styl
-.k-form-item
-    .k-form-item
-        margin-bottom 20px
-
 @media (max-width: 768px)
     .k-form-item
         width 100%

package/components/form/index.spec.ts

@@ -21,7 +21,7 @@ RemoteDemo.prototype.validateUserName = function(value) {
 };
 
 describe('Form', () => {
-    // afterEach(() => unmount());
+    afterEach(() => unmount());
 
     it('validate', async () => {
         const [instance, element] = mount(BasicDemo, null, basicDemoData);

package/components/form/item.vdt

@@ -68,7 +68,7 @@ const {ellipsis, message, errorRef} = this.error;
                     {message.value}
                 </div>
                 <Tooltip hoverable position="bottom">
-                    <Icon class="ion-ios-information-outline k-form-error-more" size="small" />
+                    <Icon class="ion-ios-information-outline k-form-error-more" size="small" color="inherit" />
                     <b:content>
                         {message.value}
                     </b:content>

package/components/form/styles.ts

@@ -7,9 +7,9 @@ const defaults = {
     item: {
         gap: `24px`,
         labelWidth: `80px`,
-        get labelLineHeight() { return theme.default.height },
+        get labelHeight() { return theme.default.height },
         labelTextAlign: 'right',
-        labelGap: '10px',
+        labelGap: '16px',
         get starColor() { return theme.color.danger },
         starGap: '3px',
 
@@ -40,29 +40,27 @@ setDefault(() => {
 
 export function makeItemStyles() {
     return css`
-        display: table;
+        display: flex;
         position: relative;
-        table-layout: fixed;
         &:not(:last-of-type) {
             margin-bottom: ${form.item.gap};
         }
-        &.k-fluid {
-            width: 100%;
+        &.k-fluid > .k-form-content {
+            flex: 1;
         }
         .k-form-label {
-            display: table-cell;
+            display: flex;
+            align-items: center;
+            justify-content: ${form.item.labelTextAlign === 'right' ? 'end' : 'start'};
             width: ${form.item.labelWidth};
-            text-align: ${form.item.labelTextAlign};
             padding-right: ${form.item.labelGap};
-            line-height: ${form.item.labelLineHeight};
+            max-height: ${form.item.labelHeight};
         }
         .k-form-star {
             color: ${form.item.starColor};
             margin-right: ${form.item.starGap};
         }
         .k-form-content {
-            display: table-cell;
-            vertical-align: middle;
             position: relative;
         }
 
@@ -88,7 +86,7 @@ export function makeItemStyles() {
         &.k-invalid {
             // input
             .k-input {
-                .k-input-inner {
+                .k-input-wrapper {
                     border: ${form.item.invalidBorder};
                     position: relative;
                     z-index: 1
@@ -100,23 +98,21 @@ export function makeItemStyles() {
             .k-radio-wrapper {
                 border: ${form.item.invalidBorder} !important;
             }
-            .k-select .k-input .k-input-inner {
+            .k-select .k-input .k-input-wrapper {
                 border: none;
             }
         }
 
         // nested
-        .k-form-item {
-            &,
-            .k-form-content {
-                display: block;
-                width: auto;
-            }
-        }
+        // .k-form-item {
+            // &,
+            // .k-form-content {
+                // width: auto;
+            // }
+        // }
 
         // append
         .k-form-append {
-            display: table-cell;
             padding: ${form.item.appendPadding};
             vertical-align: middle;
         }
@@ -128,7 +124,7 @@ export function makeFormStyles() {
         // layout
         &.k-inline {
             .k-form-item {
-                display: inline-block;
+                display: inline-flex;
                 vertical-align: top;
                 margin-right: ${form.item.inlineGap};
             }
@@ -137,15 +133,14 @@ export function makeFormStyles() {
             }
         }
         &.k-vertical {
-            .k-form-item,
-            .k-form-label,
-            .k-form-content {
-                display: block;
+            .k-form-item {
+                flex-direction: column;
             }
             .k-form-label {
                 width: auto;
                 text-align: left;
-                line-height: inherit;
+                padding: 0;
+                justify-content: start;
                 margin-bottom: ${form.item.verticalLabelGap};
             }
         }

package/components/grid/useGutter.ts

@@ -1,15 +1,16 @@
 import {useInstance} from 'intact';
 import {createContext} from '../context';
 import {hasDocumentAvailable, isObject, isNullOrUndefined} from 'intact-shared';
-import type * as EnquireJs from 'enquire.js';
+// import type * as EnquireJs from 'enquire.js';
+import enquire from 'enquire.js';
 import type {Row} from './row';
 import {useState} from '../../hooks/useState';
 import {Breakpoint, responsiveMap} from './constants';
 
-let enquire: typeof EnquireJs;
-if (hasDocumentAvailable) {
-    enquire = require('enquire.js');
-}
+// let enquire: typeof EnquireJs;
+// if (hasDocumentAvailable) {
+    // enquire = require('enquire.js');
+// }
 
 export const context = createContext<number>(0);
 
@@ -24,7 +25,7 @@ export function useGutter() {
         xs: false,
     });
 
-    if (enquire) {
+    if (hasDocumentAvailable) {
         for (const key in responsiveMap) {
             enquire.register(responsiveMap[key as Breakpoint], {
                 match() {

package/components/icon/demos/icons.md

@@ -6,20 +6,25 @@ order: 3
 
 
 ```vdt
-import {Icon} from 'kpc';
+import {Icon, Input} 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>
+    <Input v-model="keywords" placeholder="Search icon" clearable />
+    <div class="icons">
+        <div class="icon" v-for={this.filter()}>
+            <Icon 
+                class={'k-icon-' + $value[0]}
+                size="large"
+            />
+            <div>{'k-icon-' + $value[0]}</div>
+        </div>
     </div>
 </div>
 ```
 
 ```styl
+.k-input
+    margin-bottom 16px
 .icons
     display flex
     flex-wrap wrap
@@ -30,100 +35,128 @@ import {Icon} from 'kpc';
 ```
 
 ```ts
-export default class extends Component {
+interface Props {
+    keywords?: string
+    fonts: string[][]
+}
+
+export default class extends Component<Props> {
     static template = template;
 
     static defaults() {
         return {
+            keywords: '',
             fonts: [
-                "tag",
-                "clone",
-                "information-fill",
-                "warning-fill",
-                "success-fill",
-                "error-fill",
-                "question-fill",
-                "information", 
-                "cloud", 
-                "pin", 
-                "home", 
-                "cut", 
-                "servers", 
-                "internet", 
-                "mail", 
-                "paper", 
-                "phone", 
-                "panel", 
-                "alarm", 
-                "notification-outline", 
-                "earphone", 
-                "settings-horizontal", 
-                "message", 
-                "heart-outline", 
-                "return-right", 
-                "picture", 
-                "logout", 
-                "all", 
-                "drag", 
-                "settings-vertical", 
-                "more", 
-                "more-circled", 
-                "folder", 
-                "unlock", 
-                "user", 
-                "folder-open", 
-                "lock", 
-                "users", 
-                "edit", 
-                "location", 
-                "delete", 
-                "edit2", 
-                "settings", 
-                "calendar", 
-                "search", 
-                "alert", 
-                "question", 
-                "zoom-in", 
-                "zoom-out",
-                "fault-outline", 
-                "truth-circled", 
-                "hide", 
-                "visible", 
-                "time", 
-                "refresh", 
-                "batchsearch", 
-                "refresh2", 
-                "upload", 
-                "download", 
-                "left-squared", 
-                "right-squared", 
-                "down-squared", 
-                "up-squared", 
-                "arrow-right-circled", 
-                "arrow-down-circled", 
-                "arrow-left-circled", 
-                "arrow-up-circled", 
-                "arrow-up-big", 
-                "arrow-left-big", 
-                "arrow-down", 
-                "arrow-right-big", 
-                "arrow-right", 
-                "sortfill", 
-                "arrow-left", 
-                "arrow-up", 
-                "arrow-down-big", 
-                "sort", 
-                "sortbig", 
-                "truth", 
-                "check", 
-                "close-big", 
-                "add-small",
-                "minus", 
-                "close", 
-                "minuss-mall", 
-                "add-big"
-            ]
-        }
+                ["information-fill"],
+                ["warning-fill"],
+                ["success-fill"],
+                ["error-fill"],
+                ["question-fill"],
+                ["heart-fill"],
+                ['heart'],
+                ['notification-fill'],
+                ['notification'],
+                ["information"], 
+                ["alert"],
+                ["question"],
+                ["zoom-in"],
+                ["zoom-out"],
+                ["close-outline"],
+                ["check-outline"],
+                ["time"],
+                ['right-circled', 'arrow'],
+                ['down-circled', 'arrow'],
+                ['right-circled', 'arrow'],
+                ['up-circled', 'arrow'],
+                ['right-squared', 'arrow'],
+                ['down-squared', 'arrow'],
+                ['left-squared', 'arrow'],
+                ['up-squared', 'arrow'],
+                ['right', 'arrow'],
+                ['down', 'arrow'],
+                ['left', 'arrow'],
+                ['up', 'arrow'],
+                ['right-bold', 'arrow'],
+                ['down-bold', 'arrow'],
+                ['left-bold', 'arrow'],
+                ['up-bold', 'arrow'],
+                ['sort'],
+                ['sort-bold'],
+                ['close'],
+                ['close-bold'],
+                ['check'],
+                ['check-bold'],
+                ['add'],
+                ['add-bold'],
+                ['minus'],
+                ['minus-bold'],
+                ['share'],
+                ['tag'],
+                ['clone'],
+                ['cloud'],
+                ['pin'],
+                ['home'],
+                ['cut'],
+                ['server'],
+                ['internet'],
+                ['mail'],
+                ['paper'],
+                ['phone'],
+                ['panel'],
+                ['alarm'],
+                ['earphone'],
+                ['settings-horizontal'],
+                ['settings-vertical'],
+                ['settings'],
+                ['message'],
+                ['return-right'],
+                ['picture'],
+                ['logout'],
+                ['all'],
+                ['drag'],
+                ['more'],
+                ['more-circled'],
+                ['folder'],
+                ['folder-open'],
+                ['lock'],
+                ['unlock'],
+                ['user'],
+                ['users'],
+                ['edit'],
+                ['location'],
+                ['delete'],
+                ['calendar'],
+                ['search'],
+                ['batchsearch'],
+                ['hidden'],
+                ['visible'],
+                ['refresh'],
+                ['upload'],
+                ['download'],
+            ],
+        } as Props
+    }
+
+    init() {
+        const fonts = this.get('fonts');
+        const map: Record<string, boolean> = {};
+        fonts.forEach(([font]) => {
+            if (map[font]) {
+                console.log('duplicated', font);
+            }
+            map[font] = true;
+        })
+    }
+
+    filter() {
+        const keywords = this.get('keywords')!.trim().toLowerCase();
+        const fonts = this.get('fonts');
+
+        if (!keywords) return fonts;
+
+        return fonts.filter((font) => {
+            return font[0].includes(keywords) || font[1] && font[1].includes(keywords);
+        });
     }
 }
 ```

package/components/icon/styles.ts

@@ -57,9 +57,13 @@ export default function makeStyles(color?: string) {
             animation: ${rotate} 1s infinite linear;
         }
         &:before {
-            position: relative;
             font-size: inherit;
-            z-index: 1;
+            /**
+             * FIXME: Why add bellow two styles?
+             * https://github.com/ksc-fe/kpc/issues/876
+             */
+            // position: relative;
+            // z-index: 1;
         }
 
         // hoverable

package/components/input/demos/autoRows.md

@@ -0,0 +1,44 @@
+---
+title: 文本框自适应高度
+order: 3.1
+---
+
+当`textarea`组件`rows`属性设置成`'auto'`时，组件的高度将会自适应，此时组件从1行高度开始，根据内容自动调整高度。
+你也可以通过对象`{min, max}`来设置文本框最小和最大的自动调整行数。
+
+> 自适应高度，文本框将禁用鼠标拖拽调整大小
+
+```vdt
+import {Input} from 'kpc';
+
+<div>
+    <Input
+        v-model="value1"
+        type="textarea"
+        placeholder="please enter"
+        fluid
+        rows="auto"
+    />
+    <br />
+    <br />
+    <Input
+        v-model="value2"
+        type="textarea"
+        placeholder="please enter"
+        fluid
+        rows={{min: 3, max: 5}}
+    />
+</div>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            value1: '',
+            value2: '',
+        }
+    }
+}
+```

package/components/input/demos/blocks.md

@@ -13,6 +13,7 @@ import {Input, Button, Icon} from 'kpc';
         <b:prepend>http://</b:prepend>
         <b:append>.com</b:append>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:append>
             <Button icon type="none">
@@ -20,6 +21,7 @@ import {Input, Button, Icon} from 'kpc';
             </Button>
         </b:append>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:append>
             <Button icon type="primary">
@@ -27,18 +29,21 @@ import {Input, Button, Icon} from 'kpc';
             </Button>
         </b:append>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:append><Button type="primary">搜索</Button></b:append>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:prefix><Icon class="k-icon-internet" /></b:prefix>
-        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
+        <b:suffix><Icon class="k-icon-search" hoverable /></b:suffix>
     </Input>
+    <br />
     <Input placeholder="please enter">
         <b:prepend>http://</b:prepend>
         <b:append>.com</b:append>
         <b:prefix><Icon class="k-icon-internet" /></b:prefix>
-        <b:suffix><Icon class="ion-ios-search" hoverable /></b:suffix>
+        <b:suffix><Icon class="k-icon-search" hoverable /></b:suffix>
     </Input>
 </div>
 ```