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

package/components/input/styles.ts

@@ -45,6 +45,11 @@ const defaults = deepDefaults(
         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) => {
@@ -68,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};
             }
@@ -105,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
@@ -119,9 +134,6 @@ 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;
@@ -139,12 +151,12 @@ export function makeStyles() {
                 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;
                 }
             }
@@ -152,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;
@@ -216,10 +222,10 @@ export function makeStyles() {
 
         // flat
         &.k-flat {
-            .k-input-inner {
+            color: ${input.flat.color};
+            .k-input-wrapper {
                 border: none;
                 background: ${input.flat.bgColor};
-                color: ${input.flat.color};
             }
         }
 
@@ -227,10 +233,11 @@ export function makeStyles() {
         &.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;
             }
         }
@@ -240,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;
@@ -280,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;
@@ -290,11 +272,22 @@ 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`
@@ -308,18 +301,23 @@ export function makeStyles() {
 
         // 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;
             max-width: 100%;
-            .k-input-inner {
-                max-width: 100%;
-                box-sizing: content-box;
-            }
+        }
+
+        // count
+        .k-input-count {
+            color: ${input.count.color};
         }
     `
 }
@@ -337,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};
         }
@@ -361,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/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/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/index.vdt

@@ -121,13 +121,13 @@ let nextPage = value + 1;
             type="none"
             disabled={value <= 1 || !!(disablePage && disablePage(value - 1, limit))}
             ev-click={this.prev}
-        ><Icon class="k-icon-arrow-left" /></Button>
+        ><Icon class="k-icon-left" /></Button>
         <template>{paginationItems}</template>
         <Button icon size={size}
             type="none"
             disabled={value >= totalPages || !!(disablePage && disablePage(value + 1, limit))}
             ev-click={this.next}
-        ><Icon class="k-icon-arrow-right" /></Button>
+        ><Icon class="k-icon-right" /></Button>
     </ButtonGroup>
 
     <template v-if={!simple}>

package/components/progress/index.vdt

@@ -90,7 +90,7 @@ const classNameObj = {
             } else {
                 switch (status) {
                     case 'success':
-                        icon = 'k-icon-truth';
+                        icon = 'k-icon-check';
                         break;
                     case 'error':
                     case 'warning':

package/components/radio/demos/basic.md

@@ -20,7 +20,7 @@ import {Radio} from 'kpc';
 
 ```styl
 .k-radio
-    margin-right 20px
+    margin-right 24px
 ```
 
 ```ts

package/components/radio/demos/group.md

@@ -18,7 +18,7 @@ import {Radio} from 'kpc';
 
 ```styl
 .k-radio
-    margin-right 20px
+    margin-right 24px
 ```
 
 ```ts

package/components/radio/demos/value.md

@@ -23,7 +23,7 @@ import {Radio} from 'kpc';
 
 ```styl
 .k-radio
-    margin-right 20px
+    margin-right 24px
 ```
 
 ```ts

package/components/select/base.vdt

@@ -38,6 +38,21 @@ const label = this.getLabel();
 const hasValue = this.hasValue();
 const {onInput, inputRef, keywords: {value: keywords}} = this.input;
 const {onFocusout, triggerRef} = this.focusout;
+const filterInput = <Input v-if={filterable}
+    class="k-select-input"
+    value={keywords}
+    ev-$change:value={onInput}
+    disabled={disabled}
+    placeholder={!hasValue ? placeholder : ''}
+    ref={inputRef}
+    autoWidth
+    inline
+    size={size}
+    key="filter"
+    readonly={!show}
+    waveDisabled={true}
+    flat={flat}
+/>
 
 <ErrorContext.Consumer defaultValue={false}>
     {isInvalid => {
@@ -90,7 +105,7 @@ const {onFocusout, triggerRef} = this.focusout;
                             </div>
                             <div v-else key="values" class="k-select-values">
                                 <b:values params={[value, label]}>
-                                    <Tags v-if={label && label.length}
+                                    <Tags v-if={label && label.length || filterable}
                                         nowrap={nowrap}
                                         size={size}
                                         draggable={draggable}
@@ -117,23 +132,10 @@ const {onFocusout, triggerRef} = this.focusout;
                                                 </b:value>
                                             </template>
                                         </Tag>
+                                        <b:append>{filterInput}</b:append>
                                     </Tags>
                                 </b:values>
-                                <Input v-if={filterable}
-                                    class="k-select-input"
-                                    value={keywords}
-                                    ev-$change:value={onInput}
-                                    disabled={disabled}
-                                    placeholder={!hasValue ? placeholder : ''}
-                                    ref={inputRef}
-                                    autoWidth
-                                    inline
-                                    size={size}
-                                    key="filter"
-                                    readonly={!show}
-                                    waveDisabled={true}
-                                    flat={flat}
-                                />
+                                <template v-if={$blocks && $blocks.values}>{filterInput}</template>
                             </div>
                         </TransitionGroup>
                     </div>
@@ -147,7 +149,7 @@ const {onFocusout, triggerRef} = this.focusout;
                             <b:suffix>
                                 <Icon class="ion-load-c" rotate v-if={loading} />
                                 <Icon v-else-if={!hideIcon}
-                                    class="k-select-arrow ion-ios-arrow-down"
+                                    class="k-select-arrow k-icon-down"
                                     disabled={$props.isDisableArrow}
                                 />
                             </b:suffix>

package/components/select/demos/customMenu.md

@@ -14,7 +14,7 @@ import {Select, Table, TableColumn, Input, Button, Icon} from 'kpc';
 >
     <b:menu>
         <Input placeholder="请输入关键字" size="small" fluid v-model="keywords" waveDisabled={true}>
-            <b:suffix><Icon class="ion-ios-search" /></b:suffix>
+            <b:suffix><Icon class="k-icon-search" /></b:suffix>
         </Input>
         <Table data={this.filter()}
             type="border"
@@ -27,8 +27,8 @@ import {Select, Table, TableColumn, Input, Button, Icon} from 'kpc';
             <TableColumn title="Domain" key="domain" />
         </Table>
         <div class="footer">
-            <Button type="primary" size="small" ev-click={this.confirm}>确定</Button>
             <Button size="small" ev-click={this.hide}>取消</Button>
+            <Button type="primary" size="small" ev-click={this.confirm}>确定</Button>
         </div>
     </b:menu>
 </Select>

package/components/select/index.spec.ts

@@ -256,11 +256,12 @@ describe('Select', () => {
         await wait();
         const dropdown = getElement('.k-select-menu')!;
         const [selectAll, toggleSelect, unselectAll] = dropdown.querySelectorAll<HTMLElement>('.k-select-op .k-btn');
-        const [confirm, cancel] = dropdown.querySelectorAll<HTMLElement>('.k-select-footer .k-btn');
+        const [cancel, confirm] = dropdown.querySelectorAll<HTMLElement>('.k-select-footer .k-btn');
 
         // select all
         selectAll.click();
         confirm.click();
+        await wait();
         expect(instance.get('days')).have.length(7);
 
         // unselect all
@@ -268,6 +269,7 @@ describe('Select', () => {
         await wait();
         unselectAll.click();
         confirm.click();
+        await wait();
         expect(instance.get('days')).have.length(0);
 
         // toggle select
@@ -281,6 +283,7 @@ describe('Select', () => {
         await wait();
         toggleSelect.click();
         confirm.click();
+        await wait();
         expect(instance.get('days')).have.length(5);
         expect(instance.get('days')).include('Monday')
     });

package/components/select/menu.vdt

@@ -61,7 +61,7 @@ if (searchable) {
                     clearable
                     waveDisabled={true}
                 >
-                    <b:suffix><Icon class="ion-ios-search" /></b:suffix>
+                    <b:suffix><Icon class="k-icon-search" /></b:suffix>
                 </Input>
                 <div class="k-select-op" v-if={multiple}>
                     <Button type="link" size="small"
@@ -79,8 +79,8 @@ if (searchable) {
                 {children}
             </div>
             <div class="k-select-footer" v-if={multiple}>
-                <Button type="primary" size="small" ev-click={confirm}>{_$('确定')}</Button>
                 <Button size="small" ev-click={this.select.hide}>{_$('取消')}</Button>
+                <Button type="primary" size="small" ev-click={confirm}>{_$('确定')}</Button>
             </div>
         </Provider>
     );

package/components/select/option.vdt

@@ -43,6 +43,7 @@ if (searchable && multiple) {
     <Transition name="k-scale" v-if={!searchable}>
         <Icon v-if={multiple && isActive}
             class="k-select-checkmark ion-ios-checkmark-empty"
+            color="primary"
         />
     </Transition>
 </DropdownItem>

package/components/select/styles.ts

@@ -133,6 +133,8 @@ export default function makeStyles() {
         }
         .k-select-prefix,
         .k-select-suffix {
+            display: flex;
+            align-items: center;
             position: relative;
         }
         .k-select-suffix {
@@ -176,7 +178,8 @@ export default function makeStyles() {
             }
         }
         .k-select-suffix-icon {
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
             transition: opacity ${select.transition};
         }
 
@@ -204,6 +207,7 @@ export default function makeStyles() {
         .k-tag {
             word-break: break-word;
             height: auto;
+            max-width: calc(100% - ${getRight(select.tag.margin)} - 1px);
         }
 
         // size

package/components/spinner/index.vdt

@@ -24,8 +24,8 @@ const {showValue, onInput} = this.value;
         type="none"
         tabindex="-1"
     >
-        <Icon v-if={!vertical} class="k-spinner-icon k-icon-minus-small" />
-        <Icon v-else class="k-spinner-icon k-icon-arrow-down" />
+        <Icon v-if={!vertical} class="k-spinner-icon k-icon-minus" />
+        <Icon v-else class="k-spinner-icon k-icon-down" />
     </Button>
     <Input
         class="k-spinner-input"
@@ -44,7 +44,7 @@ const {showValue, onInput} = this.value;
         type="none"
         tabindex="-1"
     >
-        <Icon v-if={!vertical} class="k-spinner-icon k-icon-add-small" />
-        <Icon v-else class="k-spinner-icon k-icon-arrow-up" />
+        <Icon v-if={!vertical} class="k-spinner-icon k-icon-add" />
+        <Icon v-else class="k-spinner-icon k-icon-up" />
     </Button>
 </div>

package/components/spinner/styles.ts

@@ -71,15 +71,19 @@ export function makeStyles() {
         }
         .k-spinner-input {
             width: ${spinner.default.inputWidth};
-            .k-input-inner {
-                text-align: center;
+            .k-input-wrapper {
                 border:none;
                 border-radius: 0;
-                &:hover,
-                &:focus {
+                &:hover{
                     border: none
                 }
             }
+            &.k-focus .k-input-wrapper {
+                border: none;
+            }
+            .k-input-inner {
+                text-align: center;
+            }
         }
         .k-spinner-icon {
             font-size: ${spinner.default.iconFontSize};
@@ -106,8 +110,7 @@ export function makeStyles() {
                 border-radius: 0 ${spinner.borderRadius} 0 0;
             }
             .k-spinner-input {
-                font-size: 0;
-                .k-input-inner {
+                .k-input-wrapper {
                     border-radius: ${spinner.borderRadius} 0 0 ${spinner.borderRadius};
                 }
             }

package/components/steps/step.vdt

@@ -26,9 +26,9 @@ const {children, title, index, className, style} = this.get();
                 ev-click={linkEvent(index, onChange)}
             >
                 <div class="k-step-mark">
-                    <Icon v-if={error && type !== 'simple'} class="k-icon-close-big" color="danger" />
+                    <Icon v-if={error && type !== 'simple'} class="k-icon-close-bold" color="danger" />
                     <Icon v-else-if={done && (type === 'line' || type === 'line-compact')}
-                        class="k-icon-check"
+                        class="k-icon-check-bold"
                         color="primary"
                     />
                     <span v-else-if={type !== 'simple'}>{index + 1}</span>

package/components/steps/styles.ts

@@ -1,6 +1,6 @@
 import {css, cx} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
-import {deepDefaults}  from '../../styles/utils';
+import {deepDefaults, palette}  from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
@@ -22,6 +22,7 @@ const defaults = {
     done: {
         get markColor() { return theme.color.primary }, 
         get markBorderColor() { return theme.color.primary },
+        get markHoverBgColor() { return palette(theme.color.primary, -4) },
         markBgColor: '#fff',
         get mainColor() { return theme.color.primary },
     },
@@ -109,6 +110,9 @@ export function makeStepsStyles() {
         &.k-clickable {
             .k-done {
                 cursor: pointer;
+                .k-step-wrapper:hover .k-step-mark {
+                    background: ${steps.done.markHoverBgColor};
+                }
             }
         }
 

package/components/table/cell.vdt

@@ -36,7 +36,7 @@ if (columnIndex === 0 && indent) {
         class="k-table-arrow"
         ev-click={onClickArrow}
     >
-        <Icon class="ion-ios-arrow-right" size="small" />
+        <Icon class="k-icon-right" size="small" />
     </Button>
     {children}
 </td>