@king-design/intact 2.1.1 → 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/radio/styles.ts

@@ -1,10 +1,10 @@
 import {css} from '@emotion/css';
-import {deepDefaults, darken} from '../../styles/utils';
+import {deepDefaults, darken, palette} from '../../styles/utils';
 import {theme, setDefault} from '../../styles/theme';
 import '../../styles/global';
 
 const defaults = {
-    width: '14px',
+    width: '16px',
     get transition() { return theme.transition.small },
     get borderColor() { return theme.color.darkBorder; },
     get hoverBorderColor() { return theme.color.primary; },
@@ -17,7 +17,17 @@ const defaults = {
         get color() { return theme.color.disabled },
         get borderColor() { return theme.color.disabledBorder },
         get bgColor() { return theme.color.disabledBg },
-        get innerColor() { return theme.color.disabledBorder },
+        checked: {
+            get borderColor() {
+                return palette(theme.color.primary, -2)
+            },
+            get bgColor() {
+                return palette(theme.color.primary, -4)
+            },
+            get innerColor() {
+                return palette(theme.color.primary, -3)
+            }
+        }
     }
 };
 
@@ -56,7 +66,10 @@ export function makeStyles() {
                 background-color: ${radio.checkedColor};
                 transform: scale(0);
                 transition: all ${radio.transition};
-            }    
+            }
+            &:hover {
+                border: 1px solid ${radio.hoverBorderColor};
+            }
         }
         input {
             width: 100%;
@@ -77,7 +90,7 @@ export function makeStyles() {
                 &:before {
                     transform: scale(1);
                 }    
-            }        
+            }           
         }            
 
         // focus
@@ -94,14 +107,20 @@ export function makeStyles() {
             cursor: not-allowed;
             .k-radio-wrapper {
                 border-color: ${radio.disabled.borderColor};
-                background: ${radio.disabled.bgColor};
-                &:before {
-                    background: ${radio.disabled.innerColor};
-                }    
+                background: ${radio.disabled.bgColor};   
             }
             input {
                 cursor: not-allowed;
             }
+            &.k-checked {
+                .k-radio-wrapper {
+                    border-color: ${radio.disabled.checked.borderColor};
+                    background: ${radio.disabled.checked.bgColor};
+                    &:before {
+                        background: ${radio.disabled.checked.innerColor};
+                    }    
+                }
+            }
         }            
     `;
 }

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,7 +9,6 @@ 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, DropdownProps} from '../dropdown';
@@ -19,6 +18,7 @@ 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
@@ -37,6 +37,9 @@ export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach =
     width?: string | number
     show?: boolean
     position?: DropdownProps['position']
+    flat?: boolean
+    nowrap?: boolean
+    draggable?: boolean
 }
 
 export interface BaseSelectEvents {
@@ -70,6 +73,9 @@ const typeDefs: Required<TypeDefs<BaseSelectProps<any>>> = {
     width: [String, Number],
     show: Boolean,
     position: Dropdown.typeDefs.position,
+    flat: Boolean,
+    nowrap: Boolean,
+    draggable: Boolean,
 };
 
 const defaults = (): Partial<BaseSelectProps<any>> => ({
@@ -99,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,7 +16,8 @@ const {
     clearable, filterable,
     className, container,
     inline, style, width, show,
-    position,
+    position, flat, nowrap,
+    draggable,
 } = this.get();
 
 const classNameObj = {
@@ -24,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,
@@ -73,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}
@@ -83,40 +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="ion-ios-close k-select-close"
-                                                    ev-click={this.delete.bind(this, $key)}
-                                                    hoverable={!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}
@@ -130,6 +132,7 @@ const {onFocusout, triggerRef} = this.focusout;
                                     key="filter"
                                     readonly={!show}
                                     waveDisabled={true}
+                                    flat={flat}
                                 />
                             </div>
                         </TransitionGroup>
@@ -144,10 +147,8 @@ 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": true,
-                                        'k-disabled': $props.isDisableArrow 
-                                    }}
+                                    class="k-select-arrow ion-ios-arrow-down"
+                                    disabled={$props.isDisableArrow}
                                 />
                             </b:suffix>
                         </span>

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>
+```