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

package/components/progress/demos/circleSize.md

@@ -0,0 +1,84 @@
+---
+title: 圆形进度尺寸
+order: 6
+---
+
+通过`size`来指定尺寸：`default` `small` `mini`
+
+```vdt
+import {Progress, ButtonGroup, Button} from 'kpc';
+
+<div>
+    状态：
+    <ButtonGroup v-model="status" checkType="radio">
+        <Button value="active">active</Button>
+        <Button value="success">success</Button>
+        <Button value="error">error</Button>
+        <Button value="normal">normal</Button>
+        <Button value="warning">warning</Button>
+    </ButtonGroup>
+
+    进度：
+    <ButtonGroup>
+        <Button size="mini" icon ev-click={this.minus}>-</Button>
+        <Button size="mini" icon ev-click={this.add}>+</Button>
+    </ButtonGroup>
+    <br /> <br />
+
+    <Progress type="circle" percent={this.get('percent')} status={this.get('status')} />
+    <Progress type="circle" percent={this.get('percent')} status={this.get('status')} size="small" />
+    <Progress type="circle" percent={this.get('percent')} status={this.get('status')} size="mini" />
+</div>
+```
+
+```styl
+.k-progress
+    display inline-block
+    margin 0 10px
+```
+
+```ts
+import {bind, ProgressProps} from 'kpc';
+
+interface Props {
+    percent: number
+    status: ProgressProps['status'] 
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            percent: 40,
+            status: 'active',
+        } as Props;
+    }
+
+    @bind
+    add() {
+        if (this.get('percent') >= 100) return;
+
+        this.set('percent', this.get('percent') + 10);
+    }
+
+    @bind
+    minus() {
+        if (this.get('percent') <= 0) return;
+
+        this.set('percent', this.get('percent') - 10);
+    }
+}
+```
+
+```vue-methods
+add() {
+    if (this.percent >= 100) return;
+    this.percent += 10;
+}
+
+minus() {
+    if (this.percent <= 0) return;
+    this.percent -= 10;
+}
+```

package/components/progress/demos/customColor.md

@@ -17,8 +17,8 @@ import {Progress, Button, ButtonGroup} from 'kpc';
     <Progress percent={this.get('percent')} color={this.get('colors')}/>
     <Progress percent={this.get('percent')} color={this.setColor}/>
     <ButtonGroup>
-        <Button size="mini" icon ev-click={this.add}>+</Button>
         <Button size="mini" icon ev-click={this.minus}>-</Button>
+        <Button size="mini" icon ev-click={this.add}>+</Button>
     </ButtonGroup>
 </div>
 ```
@@ -26,8 +26,6 @@ import {Progress, Button, ButtonGroup} from 'kpc';
 ```styl
 .k-progress
     margin 10px 0
-.k-btn
-    margin-right 5px
 ```
 
 ```ts

package/components/progress/index.ts

@@ -40,7 +40,7 @@ const defaults = (): Partial<ProgressProps> => ({
     size: 'default',
     showOuterText: true,
     status: 'active',
-    strokeWidth: 4,
+    strokeWidth: 6,
 });
 
 export class Progress extends Component<ProgressProps> {

package/components/progress/index.vdt

@@ -71,12 +71,41 @@ const classNameObj = {
     </svg>
     <div class="k-progress-text" v-if={children}>{children}</div>
     <div class="k-progress-text" v-else-if={showOuterText}>
-        <span v-if={status !== 'success' && status !== 'error'}>{percent}%</span>
-        <span v-else-if={status === 'success'}>
-            <Icon class="k-progress-icon k-icon-truth" />
-        </span>
-        <span v-else-if={status === 'error'}>
-            <Icon class="k-progress-icon k-icon-fault" />
-        </span>
+        { do {
+            let icon;
+            if (type !== 'circle') {
+                switch (status) {
+                    case 'success':
+                        icon = 'k-icon-success-fill';
+                        break;
+                    case 'error':
+                        icon = 'k-icon-error-fill';
+                        break;
+                    case 'warning':
+                        icon = 'k-icon-warning-fill';
+                        break;
+                    default:
+                        break;
+                }
+            } else {
+                switch (status) {
+                    case 'success':
+                        icon = 'k-icon-check';
+                        break;
+                    case 'error':
+                    case 'warning':
+                        icon = 'k-icon-close';
+                        break;
+                    default:
+                        break;
+                }
+            }
+
+            if (icon) {
+                <Icon class={{"k-progress-icon": true, [icon]: true}} color={status === 'error' ? 'danger' : status} />
+            } else {
+                <span>{percent}%</span>
+            }
+        } } 
     </div>
 </div>

package/components/progress/styles.ts

@@ -10,8 +10,7 @@ const sizes = ['small', 'mini'] as const;
 const progressBarAnimation = keyframes`
     from {
         opacity: 0.2;
-        width: 14px;
-        margin-left: 14px;
+        width: 0;
     }
     to {
         opacity: 0;
@@ -32,15 +31,18 @@ const defaults = {
     },
     bar: {
         fontColor: '#404040',
-        height: '16px',
+        height: '8px',
         textWidth: '40px',
         textMarginLeft: '16px',
         innerText: {
             fontSize: '12px',
             padding: `0 10px 0 3px`,
         },
+        outerText: {
+            height: '16px',
+        },
         small: {
-            height: '10px',
+            height: '6px',
             fontSize: '12px'
         },
         mini: {
@@ -51,13 +53,16 @@ const defaults = {
     circle: {
         width: '104px',
         fontSize: '16px',
+        iconFontSize: '50px',
         small: {
             width: '80px',
-            fontSize: '14px'
+            fontSize: '14px',
+            iconFontSize: '30px',
         },
         mini: {
-            width: '40px',
-            fontSize: '12px'
+            width: '24px',
+            fontSize: '10px',
+            iconFontSize: '14px',
         }
     }
 };
@@ -104,7 +109,7 @@ export function makeStyles() {
             }
             .k-progress-inner-text {
                 display: inline-block;
-                vertical-align: middle;
+                vertical-align: top;
                 color: #ffffff;
                 line-height: ${progress.bar.height};
                 width: 100%;
@@ -117,17 +122,11 @@ export function makeStyles() {
                 .k-progress-bg {
                     background: ${progress.stokeColor.success};
                 }
-                .k-progress-icon {
-                    color: ${progress.stokeColor.success};
-                }
             }
             &.k-error {
                 .k-progress-bg {
                     background: ${progress.stokeColor.error};
                 }
-                .k-progress-icon {
-                    color: ${progress.stokeColor.error};
-                }
             }
             &.k-warning {
                 .k-progress-bg {
@@ -162,6 +161,8 @@ export function makeStyles() {
             .k-progress-text {
                 margin-left: ${progress.bar.textMarginLeft};
                 width: ${progress.bar.textWidth};
+                line-height: ${progress.bar.outerText.height};
+                height: ${progress.bar.outerText.height};
             }
         };
 
@@ -172,43 +173,52 @@ export function makeStyles() {
             font-size: ${progress.circle.fontSize};
             .k-progress-canvas {
                 transform: rotate(-90deg);
-            };
+            }
             .k-progress-meter,
             .k-progress-value,
             .k-progress-animate {
                 fill: none;
-            };
+            }
             .k-progress-meter {
                 stroke: ${progress.stokeColor.color};
-            };
+            }
             .k-progress-value {
                 stroke: ${progress.stokeColor.normal};
                 stroke-linecap: round;
                 transition: ${progress.animation.transition};
-            };
+            }
             .k-progress-animate {
                 stroke: #fff;
                 stroke-linecap: round;
-            };
+            }
             .k-progress-text {
                 position: absolute;
                 top: 50%;
                 text-align: center;
                 width: 100%;
                 transform: translateY(-50%); 
-            };
+            }
+            .k-progress-icon {
+                font-size: ${progress.circle.iconFontSize};
+            }
 
             // status 
             &.k-success {
                 .k-progress-value {
                     stroke: ${progress.stokeColor.success};
                 }
-            };
+            }
             &.k-error {
                 .k-progress-value {
                     stroke: ${progress.stokeColor.error};
                 }
+            }
+            &.k-warning {
+                .k-progress-value {
+                    stroke: ${progress.stokeColor.warning};
+                }
             };
+
             ${sizes.map(size => {
                 const styles = progress.circle[size];
                 return css`
@@ -216,6 +226,9 @@ export function makeStyles() {
                         width: ${styles.width};
                         height: ${styles.width};
                         font-size: ${styles.fontSize};
+                        .k-progress-icon {
+                            font-size: ${styles.iconFontSize};
+                        }
                     }
                 `
             })}

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

@@ -52,6 +52,7 @@ export function makeStyles() {
         }
         .k-icon {
             font-size: ${rate.iconFontSize};
+            color: inherit;
         }
             
         // disabled

package/components/select/base.ts

@@ -9,16 +9,16 @@ import {
 import template from './base.vdt';
 import {Sizes, sizes} from '../../styles/utils';
 import {SELECT} from './constants';
-import type {Input} from '../input';
 import {useShowHideEvents} from '../../hooks/useShowHideEvents';
 import {bind} from '../utils';
-import {Dropdown} from '../dropdown';
+import {Dropdown, DropdownProps} from '../dropdown';
 import {State} from '../../hooks/useState';
 import {useInput} from './useInput';
 import {Container} from '../portal';
 import {useFocusout} from './useFocusout';
 import type {Events} from '../types';
 import {isNullOrUndefined} from 'intact-shared';
+import { useDraggable } from './useDraggble';
 
 export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach = V | null> {
     value?: Multipe extends true ? V[] : Attach
@@ -36,6 +36,10 @@ export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach =
     container?: Container
     width?: string | number
     show?: boolean
+    position?: DropdownProps['position']
+    flat?: boolean
+    nowrap?: boolean
+    draggable?: boolean
 }
 
 export interface BaseSelectEvents {
@@ -68,6 +72,10 @@ const typeDefs: Required<TypeDefs<BaseSelectProps<any>>> = {
     container: [Function, String],
     width: [String, Number],
     show: Boolean,
+    position: Dropdown.typeDefs.position,
+    flat: Boolean,
+    nowrap: Boolean,
+    draggable: Boolean,
 };
 
 const defaults = (): Partial<BaseSelectProps<any>> => ({
@@ -97,11 +105,11 @@ export abstract class BaseSelect<
     public dropdownRef = createRef<Dropdown>(); 
     public input = useInput(this.resetKeywords);
     private focusout = useFocusout();
+    private draggable = useDraggable();
 
     init() {
         provide(SELECT, this);
         useShowHideEvents('show');
-        // this.input = useInput();
 
         this.watch('value', this.position, {presented: true});
     }

package/components/select/base.vdt

@@ -7,6 +7,7 @@ import {Dropdown} from '../dropdown';
 import {getRestProps, addStyle} from '../utils';
 import {Wave} from '../wave';
 import {context as ErrorContext} from '../form/useError';
+import {Tags, Tag} from '../tag';
 
 const {
     value, multiple,
@@ -15,6 +16,8 @@ const {
     clearable, filterable,
     className, container,
     inline, style, width, show,
+    position, flat, nowrap,
+    draggable,
 } = this.get();
 
 const classNameObj = {
@@ -23,6 +26,8 @@ const classNameObj = {
     [`k-${size}`]: size !== 'default',
     'k-fluid': fluid,
     'k-inline': inline,
+    'k-flat': flat,
+    'k-nowrap': nowrap,
     [className]: className,
     [$props.className]: $props.className,
     [makeStyles()]: true,
@@ -33,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 => {
@@ -43,6 +63,7 @@ const {onFocusout, triggerRef} = this.focusout;
                 disabled={disabled}
                 container={container}
                 v-model="show"
+                position={position}
             >
                 <div {...getRestProps(this)} 
                     class={classNameObj}
@@ -71,6 +92,7 @@ const {onFocusout, triggerRef} = this.focusout;
                                 key="input"
                                 readonly={!show}
                                 waveDisabled={true}
+                                flat={flat}
                             />
                             <div class="k-select-placeholder c-ellipsis"
                                 v-else-if={!filterable && !hasValue}
@@ -81,55 +103,39 @@ const {onFocusout, triggerRef} = this.focusout;
                                     {label}
                                 </b:value>
                             </div>
-                            <div v-else
-                                class={{
-                                    "k-select-values": true,
-                                    "k-with-values": $blocks.values,
-                                }}
-                                key="values"
-                            >
-                                <TransitionGroup name="k-fade">
-                                    <template>
-                                        <b:values params={[value, label]}>
-                                            <div class="k-select-tag"
-                                                v-for={label}
-                                                v-for-value="$label"
-                                                key={
-                                                    isStringOrNumber($label) ? 
-                                                        $label :
-                                                        isStringOrNumber(value[$key]) ?
-                                                            value[$key] :
-                                                            undefined
-                                                }
-                                            >
-                                                <span class="k-select-text">
-                                                    <b:value params={[value[$key], $label]}>
-                                                        {$label}
-                                                    </b:value>
-                                                </span>
-                                                <Icon class="k-icon-close k-select-close"
-                                                    ev-click={this.delete.bind(this, $key)}
-                                                    hoverable={!disabled}
-                                                    disabled={disabled}
-                                                />
-                                            </div>
-                                        </b:values>
-                                    </template>
-                                </TransitionGroup>
-                                <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}
-                                />
+                            <div v-else key="values" class="k-select-values">
+                                <b:values params={[value, label]}>
+                                    <Tags v-if={label && label.length || filterable}
+                                        nowrap={nowrap}
+                                        size={size}
+                                        draggable={draggable}
+                                        ev-dragend={this.draggable}
+                                    >
+                                        <Tag
+                                            v-for={label}
+                                            v-for-value="$label"
+                                            key={
+                                                isStringOrNumber($label) ? 
+                                                    $label :
+                                                    isStringOrNumber(value[$key]) ?
+                                                        value[$key] :
+                                                        $key
+                                            }
+                                            closable
+                                            ev-close={this.delete.bind(this, $key)}
+                                            disabled={disabled}
+                                            size={size}
+                                        >
+                                            <template>
+                                                <b:value params={[value[$key], $label]}>
+                                                    {$label}
+                                                </b:value>
+                                            </template>
+                                        </Tag>
+                                        <b:append>{filterInput}</b:append>
+                                    </Tags>
+                                </b:values>
+                                <template v-if={$blocks && $blocks.values}>{filterInput}</template>
                             </div>
                         </TransitionGroup>
                     </div>
@@ -143,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/basic.md

@@ -10,19 +10,28 @@ order: 0
 import {Select, Option} from 'kpc';
 
 <div>
-    <div style="margin-bottom: 16px;">
-        <Select v-model="day">
-            <Option value="Monday">星期一</Option>
-            <Option value="Tuesday">星期二</Option>
-            <Option value="Wednesday">星期三</Option>
-            <Option value="Thursday">星期四</Option>
-            <Option value="Friday">星期五</Option>
-            <Option value="Saturday">星期六</Option>
-            <Option value="Sunday">星期天</Option>
-        </Select>
-        You selected: {this.get('day')}
-    </div>
+    <Select v-model="day">
+        <Option value="Monday">星期一</Option>
+        <Option value="Tuesday">星期二</Option>
+        <Option value="Wednesday">星期三</Option>
+        <Option value="Thursday">星期四</Option>
+        <Option value="Friday">星期五</Option>
+        <Option value="Saturday">星期六</Option>
+        <Option value="Sunday">星期天</Option>
+    </Select>
+    You selected: {this.get('day')}
+    <br /><br />
     <Select loading></Select>
+    <br /><br />
+    <Select flat>
+        <Option value="Monday">星期一</Option>
+        <Option value="Tuesday">星期二</Option>
+        <Option value="Wednesday">星期三</Option>
+        <Option value="Thursday">星期四</Option>
+        <Option value="Friday">星期五</Option>
+        <Option value="Saturday">星期六</Option>
+        <Option value="Sunday">星期天</Option>
+    </Select>
 </div>
 ```
 

package/components/select/demos/creatable.md

@@ -20,7 +20,7 @@ import {Select, Option} from 'kpc';
     </Select>
     Day: {this.get('day')}
     <br /><br />
-    <Select v-model="days" filterable multiple creatable style="margin-right: 10px">
+    <Select v-model="days" filterable multiple creatable style="margin-right: 10px" nowrap>
         <Option value="Monday">星期一</Option>
         <Option value="Tuesday">星期二</Option>
         <Option value="Wednesday">星期三</Option>

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>