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

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-truth';
+                        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/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,
@@ -43,6 +48,7 @@ const {onFocusout, triggerRef} = this.focusout;
                 disabled={disabled}
                 container={container}
                 v-model="show"
+                position={position}
             >
                 <div {...getRestProps(this)} 
                     class={classNameObj}
@@ -71,6 +77,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,41 +88,37 @@ 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>
+                            <div v-else key="values" class="k-select-values">
+                                <b:values params={[value, label]}>
+                                    <Tags v-if={label && label.length}
+                                        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>
+                                    </Tags>
+                                </b:values>
                                 <Input v-if={filterable}
                                     class="k-select-input"
                                     value={keywords}
@@ -129,6 +132,7 @@ const {onFocusout, triggerRef} = this.focusout;
                                     key="filter"
                                     readonly={!show}
                                     waveDisabled={true}
+                                    flat={flat}
                                 />
                             </div>
                         </TransitionGroup>

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/draggable.md

@@ -0,0 +1,55 @@
+---
+title: 多选值拖动排序
+order: 13 
+---
+
+`Select`添加`draggable`属性，多选时，可以拖动值进行排序
+
+```vdt
+import {Select, Option} from 'kpc';
+
+<div>
+    <Select multiple draggable 
+        v-model="days1"
+    >
+        <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>
+    {JSON.stringify(this.get('days1'))}
+    <br /><br />
+    <Select multiple draggable nowrap
+        v-model="days2"
+    >
+        <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>
+    {JSON.stringify(this.get('days2'))}
+</div>
+```
+
+```ts
+interface Props {
+   days1?: string[]
+   days2?: string[]
+}
+
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            days1: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],
+            days2: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],
+        } as Props;
+    }
+}
+```

package/components/select/demos/flat.md

@@ -0,0 +1,42 @@
+---
+title: 扁平化样式 
+order: 11 
+---
+
+`Select`添加`flat`属性，展示扁平化样式
+
+```vdt
+import {Select, Option} from 'kpc';
+
+<div>
+    <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>
+    <br /><br />
+    <Select flat multiple>
+        <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>
+    <br /><br />
+    <Select flat disabled multiple value={['Monday', 'Tuesday']}>
+        <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/nowrap.md

@@ -0,0 +1,24 @@
+---
+title: 单行展示多选的值
+order: 12 
+---
+
+`Select`添加`nowrap`属性，多选时，所有值仅展示单行
+
+```vdt
+import {Select, Option} from 'kpc';
+
+<div>
+    <Select multiple filterable clearable nowrap
+        value={['Monday', 'Tuesday', 'Wednesday', 'Thursday']}
+    >
+        <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/size.md

@@ -45,6 +45,44 @@ import {Select, Option} from 'kpc';
         <Option value="Saturday">星期六</Option>
         <Option value="Sunday">星期天</Option>
     </Select>
+    <br /><br />
+    <Select v-model="days" size="large" multiple>
+        <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>
+    <Select v-model="days" multiple>
+        <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>
+    <Select v-model="days" size="small" multiple>
+        <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>
+    <Select v-model="days" size="mini" multiple>
+        <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>
 ```
 
@@ -56,13 +94,15 @@ import {Select, Option} from 'kpc';
 ```ts
 interface Props {
    day?: string | null
+   days?: string[]
 }
 
 export default class extends Component {
     static template = template;
     static defaults() {
         return {
-            day: null
+            day: null,
+            days: [],
         } as Props;
     }
 }

package/components/select/index.md

@@ -32,8 +32,20 @@ sidebar: doc
 | card | 是否展示`card`模式 | `boolean` | `false` |
 | autoDisableArrow | 是否在没有更多可选项时，给箭头一个`disabled`状态来提示用户 | `boolean` | `false` |
 | show | 是否展示菜单项 | `boolean` | `false` |
+| position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |
+| flat | 是否展示扁平样式 | `boolean` | `false` |
+| draggable | 多选值是否支持拖动排序 | `boolean` | `false` |
 
 ```ts
+type Position = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+    collisionDirection?: ['left'] | ['top'] | ['left', 'top']
+}
+
+type Collision = 'fit' | 'flip' | 'flipfit' | 'none'
+
 export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
 ```
 

package/components/select/index.spec.ts

@@ -46,7 +46,7 @@ describe('Select', () => {
         const dropdown = getElement('.k-select-menu')!;
         expect(dropdown.innerHTML).to.matchSnapshot();
 
-        const close = element.querySelector('.k-select-close') as HTMLElement;
+        const close = element.querySelector('.k-tag-close') as HTMLElement;
         close.click();
         await wait();
         expect(instance.get('days')!.length).to.eql(2);
@@ -108,7 +108,7 @@ describe('Select', () => {
         expect(dropdown.innerHTML).to.matchSnapshot();
         expect(instance.get('days')).to.eql(['Monday', 'Tuesday']);
         // delete
-        const deleteBtn = element.querySelector('.k-select-close') as HTMLElement;
+        const deleteBtn = element.querySelector('.k-tag-close') as HTMLElement;
         deleteBtn.click();
         await wait();
         expect(instance.get('days')).to.eql(['Tuesday']);