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

package/components/tag/base.ts

@@ -31,7 +31,7 @@ const typeDefs: Required<TypeDefs<TagProps>> = {
 const defaults = (): Partial<TagProps> => ({
     type: 'default',
     size: 'default',
-    border: 'solid',
+    border: 'none',
 });
 
 const events: Events<TagEvents> = {

package/components/tag/demos/border.md

@@ -3,7 +3,7 @@ title: 边框
 order: 3
 ---
 
-通过`border`可以定义边框样式: `solid`(默认) `dashed` `none`
+通过`border`可以定义边框样式: `solid` `dashed` `none`(默认) 
 
 ```vdt
 import {Tag} from 'kpc';
@@ -40,7 +40,7 @@ export default class extends Component {
     static defaults() {
         return {
             types: ['default', 'primary', 'success', 'warning', 'danger'],
-            borders: ['dashed', 'none'],
+            borders: ['solid', 'dashed', 'none'],
         } as Props;
     }
 }

package/components/tag/index.md

@@ -14,7 +14,7 @@ sidebar: doc
 | closed | 是否已关闭 | `boolean` | `false` |
 | disabled | 是否展示禁用状态 | `boolean` | `false` |
 | size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
-| border | 定义边框样式 | `"solid"` | `"dashed"` | `"none"` | `"solid"` |
+| border | 定义边框样式 | `"solid"` | `"dashed"` | `"none"` | `"none"` |
 
 # 事件
 

package/components/tag/styles.ts

@@ -14,11 +14,12 @@ const types = ['primary', 'warning', 'danger', 'success', 'disabled'] as const;
 
 const defaults = deepDefaults(
     {
-        get borderColor() { return theme.color.border },
+        get border() { return `1px solid ${theme.color.border}` },
         get borderRadius() { return theme.borderRadius },
         get fontSize() { return theme.default.fontSize },
         padding: `0 8px`,
         height: '20px',
+        get bgColor() { return theme.color.bg },
         close: {
             fontSize: '20px',
             gap: '8px',
@@ -29,32 +30,33 @@ const defaults = deepDefaults(
             get bgColor() { return theme.color.disabledBg },
         },
         large: {
-            padding: `0px 16px`,
-            height: '32px',
+            padding: `0px 8px`,
+            height: '24px',
             close: {
-                fontSize: '24px',
+                fontSize: '20px',
                 gap: '12px',
             }
         },
         small: {
             padding: `0 4px`,
-            height: '18px',
+            height: '16px',
             close: {
-                fontSize: '18px',
+                fontSize: '12px',
                 gap: '4px'
             }
         },
         mini: {
-            padding: `0 1px`,
+            padding: `0 2px`,
             height: '14px',
             close: {
-                fontSize: '16px',
+                fontSize: '12px',
                 gap: '2px'
             }
         },
         none: {
             get bgColor() { return theme.color.bg },
-        }
+        },
+
     },
     types.reduce((memo, type) => {
         if (type === 'disabled') return memo;
@@ -76,11 +78,10 @@ export function makeStyles() {
         display: inline-flex;
         align-items: center;
         padding: ${tag.padding};
-        border: 1px solid ${tag.borderColor};
+        border: ${tag.border};
         border-radius: ${tag.borderRadius};
         font-size: ${tag.fontSize};
         height: ${tag.height};
-
         .k-tag-close {
             font-size: ${tag.close.fontSize};
             margin-left: ${tag.close.gap};

package/components/tip/index.vdt

@@ -26,9 +26,7 @@ const classNameObj = {
         >
             <template>
                 <b:close>
-                    <Icon class="ion-ios-close-empty"
-                        size="large"
-                        color={type}
+                    <Icon class="k-icon-close"
                         hoverable={!disabled}
                     />
                 </b:close>

package/components/tip/styles.ts

@@ -6,9 +6,10 @@ import {deepDefaults}  from '../../styles/utils';
 const defaults = {
     title: {
         fontSize: '14px',
-        gap: '8px'
+        gap: '8px',
+        fontWeight: '500'
     },
-    get color() { return theme.color.text },
+    get color() { return theme.color.title },
     get padding() { return `6px ${theme.default.padding}` },
 };
 
@@ -35,10 +36,15 @@ export function makeStyles() {
         .k-tip-title {
             font-size: ${tip.title.fontSize};
             margin-bottom: ${tip.title.gap};
+            font-weight: ${tip.title.fontWeight}
         }
 
         &.k-fade-leave-active {
             position: relative;
         }
+
+        .k-tip-close:hover {
+            background: none;
+        }
     `;
 }

package/components/tooltip/content.vdt

@@ -37,8 +37,8 @@ const classNameObj = {
         ></i>
         <div class="k-tooltip-buttons" v-if={confirm} key="tooltip-buttons">
             <b:buttons>
-                <Button type="primary" ev-click={this.ok} size="small">{okText}</Button>
                 <Button ev-click={this.cancel} size="small">{cancelText}</Button>
+                <Button type="primary" ev-click={this.ok} size="small">{okText}</Button>
             </b:buttons>
         </div>
     </b:children>

package/components/tooltip/styles.ts

@@ -8,12 +8,13 @@ const defaults = {
     get color() { return theme.color.text },
     bgColor: '#fff',
     lineHeight: 1.4,
-    maxWidth: '300px',
+    maxWidth: '312px',
+    get boxShadow() { return theme.middleBoxShadow },
 
     // arrow
     arrow: {
-        borderColor: 'rgba(191, 191, 191, .5)',
-        width: '8px',
+        borderColor: 'rgba(221, 221, 221, .5)',
+        width: '6px',
     },
 
     // confirm
@@ -23,9 +24,9 @@ const defaults = {
 
     // dark
     dark: {
-        get bgColor() { return theme.color.text },
+        get bgColor() { return theme.color.title },
         color: '#fff',
-        get arrowBorderColor() { return theme.color.text },
+        get arrowBorderColor() { return theme.color.title },
     },
 
     smallPadding: '4px',
@@ -48,7 +49,7 @@ const directionMap = {
 
 export default function makeStyles() {
     const arrowLong = tooltip.arrow.width;
-    const arrowShort = `calc(${arrowLong} - 2px)`;
+    const arrowShort = `calc(${arrowLong} - 1px)`;
 
     // use &.k-tooltip-content to override css in dropdown menu
     return css`
@@ -59,6 +60,7 @@ export default function makeStyles() {
             line-height: ${tooltip.lineHeight};
             word-wrap: break-word;
             pointer-events: none;
+            box-shadow: ${tooltip.boxShadow};
 
             // hoverable
             &.k-hoverable,

package/components/transfer/index.vdt

@@ -12,7 +12,7 @@ const {
 } = this.get();
 const {getShowedData} = this.filter;
 const {enableAdd, enableRemove, add, remove} = this.transfer;
-const {isCheckAll, toggleCheckAll, onCheckboxChange} = this.check;
+const {isCheckAll, toggleCheckAll, onCheckboxChange, isIndeterminate} = this.check;
 
 const classNameObj = {
     'k-transfer': true,
@@ -33,6 +33,7 @@ const Panel = (model) => {
                 </div>
                 <Checkbox class="c-ellipsis" 
                     value={isCheckAll(model)}
+                    indeterminate={isIndeterminate(model)}
                     ev-click={toggleCheckAll.bind(null, model)}
                 >{title}</Checkbox>
             </b:header>
@@ -94,4 +95,4 @@ const Panel = (model) => {
         </Button>
     </div>
     {Panel('right')}
-</div>
+</div>

package/components/transfer/styles.ts

@@ -58,6 +58,7 @@ export function makeStyles() {
             height: ${transfer.panel.height};
             display: inline-flex;
             flex-direction: column;
+            overflow: auto;
         }
 
         .k-transfer-title {

package/components/transfer/useCheck.ts

@@ -25,7 +25,6 @@ export function useCheck({getEnabledData, getShowedData}: ReturnType<typeof useF
 
         return data.length && checked.length >= data.length;
     }
-
     function toggleCheckAll(model: Model, e: MouseEvent) {
         if ((e.target as HTMLInputElement).checked) {
             selectAll(model);
@@ -34,6 +33,13 @@ export function useCheck({getEnabledData, getShowedData}: ReturnType<typeof useF
         }
     }
 
+    function isIndeterminate(model: Model) {
+      const checked = instance.get(`${model}CheckedKeys` as CheckedKeys)!;
+      const data = getEnabledData(model);
+      
+      return checked.length > 0 && checked.length < data.length;
+    }
+
     function onCheckboxChange(model: Model, index: number, e: MouseEvent) {
         if (startIndex === undefined || !e.shiftKey) {
             startIndex = index;
@@ -91,6 +97,7 @@ export function useCheck({getEnabledData, getShowedData}: ReturnType<typeof useF
     return {
         isCheckAll,
         toggleCheckAll,
-        onCheckboxChange
+        onCheckboxChange,
+        isIndeterminate
     };
 }

package/components/upload/demos/manually.md

@@ -6,20 +6,19 @@ order: 4
 手动上传需要通过指定`autoUpload`为`false`来关闭自动上传，然后调用组件的`submit`方法来手动上传
 
 ```vdt
-import {Upload} from 'kpc';
-import {Button} from 'kpc';
+import {Upload, Button} from 'kpc';
 
-<Upload 
-    ref="instance"
-    multiple 
-    action="//fakestoreapi.com/products"
-    autoUpload={false}
->
-    <Button type="primary">选择文件</Button>
-    <b:tip>
-        <Button ev-click={this.upload}>开始上传</Button>
-    </b:tip>
-</Upload>
+<div>
+    <Upload 
+        ref="instance"
+        multiple 
+        action="//fakestoreapi.com/products"
+        autoUpload={false}
+    >
+        <Button type="primary">选择文件</Button>
+    </Upload>
+    <Button ev-click={this.upload}>开始上传</Button>
+</div>
 ```
 
 ```styl

package/components/upload/index.vdt

@@ -38,22 +38,26 @@ const handle = (
         <b:content>
             <b:children v-if={children}>{children}</b:children>
             <template v-else-if={type !== 'gallery'}>
-                <Button type="primary" v-if={type === 'select'}>{_$('点击上传')}</Button>
+                <Button v-if={type === 'select'}>
+                    <Icon class="k-icon-upload" />
+                    {_$('点击上传')}
+                </Button>
                 <div class="k-upload-area" v-else>
-                    <Icon class="ion-upload" />
-                    <div>{_$('将文件拖到此处，或点击上传')}</div>
+                    <Icon class="k-icon-add-big" />
+                    <div innerHTML={_$('将文件拖到此处，或<a>点击上传</a>')}></div>
                 </div>
             </template>
-            <template v-else>
-                <Icon class="k-upload-picture-card k-upload-add ion-ios-plus-empty" />
-            </template>
+            <div v-else class="k-upload-picture-card k-upload-add">
+                <Icon class="k-icon-add-big" size="large" />
+                <div>{_$('上传图片')}</div>
+            </div>
         </b:content>
     </div>
 );
 
 const {removeFile} = this.files;
-const closeBtn = (value, index, icon) => (
-    <Icon class={{"k-upload-close": true, [icon]: true}}
+const closeBtn = (value, index) => (
+    <Icon class="k-upload-close k-icon-delete"
         ev-click={() => removeFile(value, index)}
         hoverable
     />
@@ -94,13 +98,14 @@ const {show, close, image, isShow} = this.showImage;
                             class="k-upload-progress"
                         />
                     </div>
-                    <div class="k-upload-overlap k-upload-icons" v-else 
-                        ev-click={linkEvent($value, show)}
-                    >
-                        <Icon class="k-upload-zoom ion-ios-eye-outline" />
+                    <div class="k-upload-overlap k-upload-icons" v-else>
+                        <Icon class="k-upload-zoom ion-ios-eye-outline" size="large"
+                            hoverable
+                            ev-click={linkEvent($value, show)}
+                        />
+                        {closeBtn($value, $key)}
                     </div>
                 </Transition>
-                {closeBtn($value, $key, 'ion-ios-close')}
             </div>
             <div key="handle" class="c-middle" v-if={!limit || files.length < limit}>
                 {handle}
@@ -120,28 +125,29 @@ const {show, close, image, isShow} = this.showImage;
                 }}
                 key={$value.uid}
             >
-                <div class="k-upload-name c-ellipsis">
-                    <Icon class="k-upload-file-icon ion-document" />
-                    <span class="k-upload-file-name">{$value.name}</span>
-                    {closeBtn($value, $key, 'ion-ios-close-empty')}
-                    <Icon class="k-upload-status-icon ion-ios-checkmark-outline" 
-                        v-if={$value.status === UploadFileStatus.Done}
-                    />
-                    <Icon class="k-upload-status-icon ion-ios-close-outline"
-                        v-else-if={$value.status === UploadFileStatus.Error}
-                    />
+                <div class="k-upload-file-main">
+                    <div class="k-upload-name c-ellipsis">
+                        <Icon class="k-upload-file-icon ion-document" />
+                        <span class="k-upload-file-name">{$value.name}</span>
+                        <Icon class="k-upload-status-icon ion-ios-checkmark-outline" 
+                            v-if={$value.status === UploadFileStatus.Done}
+                        />
+                        <Icon class="k-upload-status-icon ion-ios-close-outline"
+                            v-else-if={$value.status === UploadFileStatus.Error}
+                        />
+                    </div>
+                    <Transition {...expandAnimationCallbacks}>
+                        <Progress percent={$value.percent}
+                            size="mini"
+                            class="k-upload-progress"
+                            v-if={
+                                $value.status === UploadFileStatus.Ready || 
+                                $value.status === UploadFileStatus.Uploading
+                            }
+                        />
+                    </Transition>
                 </div>
-                <Transition {...expandAnimationCallbacks}>
-                    <Progress percent={$value.percent}
-                        size="mini"
-                        class="k-upload-progress"
-                        v-if={
-                            $value.status === UploadFileStatus.Ready || 
-                            $value.status === UploadFileStatus.Uploading
-                        }
-
-                    />
-                </Transition>
+                {closeBtn($value, $key)}
             </div>
         </TransitionGroup>
     </div>

package/components/upload/styles.ts

@@ -6,11 +6,10 @@ import '../../styles/global';
 const defaults = {
     get transition() { return theme.transition.middle },
     fontSize: '12px',
+    get color() { return theme.color.lightBlack },
     tip: {
-        gap: '16px',
-        get color() { return theme.color.lightBlack }
+        gap: '8px',
     },
-    closeFontSize: '24px',
 
     // files list
     filesGap: '16px',
@@ -24,22 +23,27 @@ const defaults = {
         status: {
             // width: '16px',
             get color() { return theme.color.success },
-            gap: '8px',
             get errorColor() { return theme.color.danger },
+            offsetRight: '2px',
+        },
+        delete: {
+            width: '20px',
+            top: '7px',
+            right: '2px',
         },
         get errorColor() { return theme.color.danger },
     },
 
     // drag
     drag: {
-        get color() { return theme.color.lightBlack },
         get border() { return `1px dashed ${theme.color.border}` },
         get borderRadius() { return theme.borderRadius },
         get hoverBorderColor() { return theme.color.primary },
-        padding: `20px 0 40px 0`,
+        get bgColor() { return theme.color.bg },
+        padding: `42px 0`,
         icon: {
-            fontSize: '80px',
-            get color() { return theme.color.placeholder },
+            fontSize: '40px',
+            gap: '16px',
         },
         get overBorderColor() { return theme.color.primary },
     },
@@ -54,23 +58,17 @@ const defaults = {
         padding: '8px',
         bgColor: '#fff',
         get errorBorderColor() { return theme.color.danger },
-        close: {
-            top: '-8px',
-            right: '-8px',
-            fontSize: '18px',
-        },
         add: {
             get border() { return `1px dashed ${theme.color.border}` },
-            fontSize: '44px',
             get hoverBorderColor() { return theme.color.primary },
         }
     },
 
     // overlap
     overlap: {
-        bgColor: 'rgba(0, 0, 0, .35)',
+        bgColor: 'rgba(21, 27, 30, .5)',
         color: '#fff',
-        zoomFontSize: '24px',
+        iconGap: '16px',
     }
 };
 
@@ -83,14 +81,20 @@ export function makeStyles() {
     return css`
         font-size: ${upload.fontSize};
         position: relative;
-        .k-upload-handle,
-        .k-upload-tip {
+
+        // keep vertical align middle
+        .k-icon-upload {
+            position: relative;
+            top: -1px;
+        }
+        .k-upload-handle {
             display: inline-block;
             vertical-align: middle;
+            color: ${upload.color};
         }
         .k-upload-tip {
-            margin-left: ${upload.tip.gap};
-            color: ${upload.tip.color};
+            margin-top: ${upload.tip.gap};
+            color: ${upload.color};
         }
 
         // filelist
@@ -99,15 +103,24 @@ export function makeStyles() {
         }
         .k-upload-file {
             margin: ${upload.file.margin};
-            padding: ${upload.file.padding};
-            border-radius: ${upload.file.borderRadius};
+            padding-right: ${upload.file.delete.width};
+            position: relative;
             &:hover {
-                background: ${upload.file.bgColor};
                 .k-upload-close {
                     display: inline-flex;
+                    position: absolute;
+                    right: ${upload.file.delete.right};
+                    top: ${upload.file.delete.top};
                 } 
+                .k-upload-file-main { 
+                    background: ${upload.file.bgColor};
+                }
             }
         }
+        .k-upload-file-main {
+            padding: ${upload.file.padding};
+            border-radius: ${upload.file.borderRadius};
+        }
         .k-upload-name {
             display: flex;
             align-items: center;
@@ -121,13 +134,10 @@ export function makeStyles() {
         }
         .k-upload-status-icon {
             color: ${upload.file.status.color};
-            margin-left: ${upload.file.status.gap};
+            margin-right: ${upload.file.status.offsetRight};
         }
         .k-upload-close {
             display: none;
-            .k-icon {
-                font-size: ${upload.closeFontSize};
-            }
         }
         .k-upload-file.k-error {
             color: ${upload.file.errorColor};
@@ -144,13 +154,13 @@ export function makeStyles() {
         // drag
         &.k-drag {
             .k-upload-handle {
-                color: ${upload.drag.color};
                 display: block;
                 border: ${upload.drag.border};
                 border-radius: ${upload.drag.borderRadius};
                 cursor: pointer;
                 text-align: center;
                 transition: border-color ${upload.transition};
+                background: ${upload.drag.bgColor};
                 &:hover {
                     border-color: ${upload.drag.hoverBorderColor};
                 }
@@ -158,9 +168,9 @@ export function makeStyles() {
             .k-upload-area {
                 padding: ${upload.drag.padding};
                 .k-icon {
+                    display: inline-block;
                     font-size: ${upload.drag.icon.fontSize};
-                    color: ${upload.drag.icon.color};
-                    line-height: 1;
+                    margin-bottom: ${upload.drag.icon.gap};
                 }
             }
             &.k-dragover {
@@ -182,10 +192,12 @@ export function makeStyles() {
             &.k-error {
                 border-color: ${upload.gallery.errorBorderColor};
             }
+            .k-upload-close {
+                display: inline-flex;
+            }
             &:hover {
-                .k-upload-close {
-                    opacity: 1;
-                    pointer-events: all;
+                .k-upload-icons {
+                    opacity: 1; 
                 }
             }
             .k-upload-img {
@@ -193,57 +205,48 @@ export function makeStyles() {
                 width: 100%;
                 height: 100%;
             }
-            .k-upload-close {
-                position: absolute;
-                top: ${upload.gallery.close.top};
-                right: ${upload.gallery.close.right};
-                display: inline-block;
-                opacity: 0;
-                transition: opacity ${upload.transition};
-                pointer-events: none;
-                .k-icon {
-                    font-size: ${upload.gallery.close.fontSize};
-                }
-            }
             .k-upload-icons {
                 opacity: 0;
                 transition: opacity ${upload.transition};
             }
-            &:hover {
-                .k-upload-icons {
-                    opacity: 1; 
-                }
-            }
         }
 
         .k-upload-picture-card {
-            display: inline-block;
+            display: inline-flex;
             width: ${upload.gallery.width};
             height: ${upload.gallery.height};
             border-radius: ${upload.gallery.borderRadius};
             border: ${upload.gallery.border};
-            text-align: center;
-            cursor: pointer;
             margin: ${upload.gallery.margin};
             background: ${upload.gallery.bgColor};
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
         }
         .k-upload-add {
             border: ${upload.gallery.add.border};
-            font-size: ${upload.gallery.add.fontSize};
-            line-height: calc(${upload.gallery.height} - 2px);
+            // font-size: ${upload.gallery.add.fontSize};
+            // line-height: calc(${upload.gallery.height} - 2px);
+            cursor: pointer;
             &:hover {
                 border-color: ${upload.gallery.add.hoverBorderColor};
             }
         }
-
         .k-upload-overlap {
             position: absolute;
             width: 100%;
             height: 100%;
             left: 0;
             top: 0;
-            color: ${upload.overlap.color};
             background: ${upload.overlap.bgColor};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: ${upload.overlap.iconGap};
+            color: ${upload.overlap.color};
+            .k-icon:not(:hover) {
+                color: inherit;
+            }
             .k-upload-progress {
                 position: absolute;
                 width: 100%;
@@ -252,13 +255,6 @@ export function makeStyles() {
                 transform: translateY(-50%);
             }
         }
-        .k-upload-zoom {
-            display: inline-block;
-            position: relative;
-            top: 50%;
-            transform: translateY(-50%);
-            font-size: ${upload.overlap.zoomFontSize};
-        }
     `;
 }