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

package/components/tabs/styles.ts

@@ -23,24 +23,21 @@ const defaults = deepDefaults(
         get borderColor() { return theme.color.border },
         borderWidth: '1px',
         get border() { return `${tabs.borderWidth} solid ${tabs.borderColor}` },
-        margin: `0 10px`,
         get color() { return theme.color.text },
-        closeGutter: `8px`,
+        closeGap: `8px`,
 
-        // vertical
-        verticalPadding: `0 25px`,
+        // scroll
+        navigatorWidth: `20px`,
 
         //active
-        get activeColor() { return theme.color.primary },
-        highlight: {
-            height: `2px`,
-            // get bottom() { return `calc(-${tabs.highlight.height} / 2)` },
-            get bgColor() { return theme.color.primary },
+        active: {
+            get color() { return theme.color.primary },
+            bar: {
+                height: '2px',
+                get bgColor() { return theme.color.primary },
+            }
         },
 
-        // scroll
-        navigatorWidth: `20px`,
-
         // border-card
         borderCard: {
             get bgColor() { return theme.color.bg },
@@ -49,14 +46,23 @@ const defaults = deepDefaults(
         // no-border-card
         noBorderCard: {
             get bgColor() { return theme.color.bg },
-            gutter: `4px`,
-        }
+        },
+
+        // define size
+        size: {
+            large: {
+                padding: '24px',
+            },
+            default: {
+                padding: '16px',
+            },
+        },
     },
     sizes.reduce((memo, size) => {
         memo[size] = {
             get fontSize() { return theme[size].fontSize },
             get height() { return theme[size].height },
-            get padding() { return `0 ${theme[size].padding}` },
+            get padding() { return `0 ${tabs.size[size as keyof typeof tabs.size]?.padding || theme[size].padding}` },
             get closeFontSize() { return closeFontSizeMap[size] },
         };
 
@@ -71,11 +77,35 @@ setDefault(() => {
 
 export function makeStyles() {
     return css`
-        border-bottom: ${tabs.border};
+        ${makeCommonStyles()};
+        ${makeScrollStyles()};
+
+        &.k-type-default {
+            ${makeDefaultStyles()}
+        }
+
+        &.k-type-card {
+            ${makeDefaultStyles()}
+            ${makeCardStyles()};
+        }
+
+        &.k-type-border-card {
+            ${makeBorderCardStyles()};
+        }
+
+        &.k-type-no-border-card {
+            ${makeNoBorderCardStyles()};
+        }
+        
+    `;
+}
+
+function makeCommonStyles() {
+    const active = tabs.active;
+    const bar = active.bar;
+    return css`
         position: relative;
-        line-height: 1;
         .k-tab {
-            margin: ${tabs.margin};
             cursor: pointer;
             display: inline-block;
             text-align: center;
@@ -87,7 +117,7 @@ export function makeStyles() {
             text-overflow: ellipsis;
             &:hover,
             &.k-active {
-                color: ${tabs.activeColor};
+                color: ${active.color};
             }
             &.k-disabled {
                 color: ${theme.color.disabled};
@@ -95,10 +125,11 @@ export function makeStyles() {
             }
         }
         .k-tab-close {
-            margin-right: -${tabs.closeGutter};
-            margin-left: ${tabs.closeGutter};
+            margin-right: -${tabs.closeGap};
+            margin-left: ${tabs.closeGap};
             position: relative;
             top: -1px;
+            color:${theme.color.lightBlack};
         }
 
         // active-bar
@@ -106,138 +137,48 @@ export function makeStyles() {
             transition: all ${tabs.transition};
             position: absolute;
             left: 0;
-            height: ${tabs.highlight.height};
-            background: ${tabs.highlight.bgColor};
-            bottom: calc(-${tabs.highlight.height} / 2); 
+            height: ${bar.height};
+            background: ${bar.bgColor};
+            bottom: calc(-${bar.height} / 2); 
         }
 
         // vertical
         &.k-vertical {
             display: inline-block;
-            border-bottom: none;
-            border-right: ${tabs.border};
             .k-tab {
                 display: block;
-                margin: 0;
-                padding: ${tabs.verticalPadding};
             }
             .k-tabs-active-bar {
                 left: auto;
                 top: 0;
-                right: calc(-${tabs.highlight.height} / 2); 
-                width: ${tabs.highlight.height};
+                right: calc(-${bar.height} / 2); 
+                width: ${bar.height};
                 height: auto;
             }
         }
 
-        // card
-        &.k-tabs-card {
-            .k-tab {
-                margin: 0;
-            }
-            .k-tabs-active-bar {
-                background: #fff;
-                top: 0;
-                height: auto;
-                z-index: -1;
-                border-left: ${tabs.border};
-                border-right: ${tabs.border};
-                &:before {
-                    content: '';
-                    display: block;
-                    position: absolute;
-                    height: ${tabs.highlight.height};
-                    background: ${theme.color.primary};
-                    top: 0;
-                    left: -${tabs.borderWidth};
-                    right: -${tabs.borderWidth};
-                }
-            }
-
-            // vertical card
-            &.k-vertical {
-                .k-tabs-active-bar {
-                    left: 0;
-                    width: auto;
-                    border-left: none;
-                    border-right: none;
-                    border-top: ${tabs.border};
-                    border-bottom: ${tabs.border};
-                    &:before {
-                        width: ${tabs.highlight.height};
-                        left: 0;
-                        right: auto;
-                        bottom: 0;
-                        height: auto;
+        // size
+        ${sizes.map(size => {
+            const styles = tabs[size];
+            return `
+                &.k-size-${size} {
+                    .k-tab {
+                        font-size: ${styles.fontSize};
+                        height: ${styles.height};
+                        line-height: ${styles.height};
+                        padding: ${styles.padding};
+                    }
+                    .k-tab-close .k-icon {
+                        font-size: ${styles.closeFontSize};
                     }
                 }
-            }
-        }
-
-        // border-card
-        &.k-tabs-border-card {
-            border: ${tabs.border};
-            border-bottom: none;
-            background: ${tabs.borderCard.bgColor};
-            .k-tab {
-                margin: 0;
-            }
-            .k-tabs-active-bar {
-                background: #fff;
-                top: 0;
-                height: auto;
-                z-index: -1;
-            }
-
-            &.k-vertical {
-                border-right: none;
-                border-bottom: ${tabs.border};
-                .k-tabs-active-bar {
-                    width: auto;
-                    height: 0;
-                    left: 0;
-                    bottom: 0;
-                    right: 0;
-                }
-            }
-        }
-
-        // no-border-card
-        &.k-tabs-no-border-card {
-            border-bottom: none;
-            .k-tab {
-                margin-right: ${tabs.noBorderCard.gutter};
-                &:before {
-                    content: '';
-                    display: block;
-                    position: absolute;
-                    background: ${tabs.noBorderCard.bgColor};
-                    top: 0;
-                    bottom: 0;
-                    left: 0;
-                    right: 0;
-                    z-index: -1;
-                }
-            }
-            .k-tabs-acitve-bar {
-                border: none;
-                &:before {
-                    left: 0;
-                    right: 0;
-                }
-            }
-            &.k-vertical {
-                border-right: none;
-                .k-tab:not(:first-of-type) {
-                    margin: ${tabs.noBorderCard.gutter} 0 0;
-                }
-                .k-tabs-active-bar {
-                    border: none;
-                }
-            }
-        }
+            `
+        })}
+    `
+}
 
-        // scroll
+function makeScrollStyles() {
+    return css`
         &:not(.k-vertical) {
             .k-tabs-scroll {
                 overflow: hidden;
@@ -274,23 +215,132 @@ export function makeStyles() {
                 padding: 0 ${tabs.navigatorWidth};
             }
         }
+    `
+}
 
-        // size
-        ${sizes.map(size => {
-            const styles = tabs[size];
-            return `
-                &.k-${size} {
-                    .k-tab {
-                        font-size: ${styles.fontSize};
-                        height: ${styles.height};
-                        line-height: ${styles.height};
-                        padding: ${styles.padding};
-                    }
-                    .k-tab-close .k-icon {
-                        font-size: ${styles.closeFontSize};
-                    }
+function makeDefaultStyles() {
+    return css`
+        border-bottom: ${tabs.border};
+        &.k-vertical {
+            border-bottom: none;
+            border-right: ${tabs.border};
+        }
+    `
+}
+
+function makeCardActiveBarCommonStyles() {
+    return css`
+        background: #fff;
+        top: 0;
+        height: auto;
+        z-index: -1;
+    `
+}
+
+function makeCardStyles() {
+    return css`
+        .k-tab {
+            margin: 0;
+        }
+        .k-tabs-active-bar {
+            ${makeCardActiveBarCommonStyles()};
+            border-left: ${tabs.border};
+            border-right: ${tabs.border};
+            &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                height: ${tabs.active.bar.height};
+                background: ${theme.color.primary};
+                top: 0;
+                left: -${tabs.borderWidth};
+                right: -${tabs.borderWidth};
+            }
+        }
+
+        // vertical card
+        &.k-vertical {
+            .k-tabs-active-bar {
+                left: 0;
+                width: auto;
+                border-left: none;
+                border-right: none;
+                border-top: ${tabs.border};
+                border-bottom: ${tabs.border};
+                &:before {
+                    width: ${tabs.active.bar.height};
+                    left: 0;
+                    right: auto;
+                    bottom: 0;
+                    height: auto;
                 }
-            `
-        })}
-    `;
+            }
+        }
+    `
+}
+
+function makeBorderCardStyles() {
+    return css`
+        border: ${tabs.border};
+        border-bottom: none;
+        background: ${tabs.borderCard.bgColor};
+        .k-tab {
+            margin: 0;
+        }
+        .k-tabs-active-bar {
+            background: #fff;
+            top: 0;
+            height: auto;
+            z-index: -1;
+        }
+
+        &.k-vertical {
+            border-right: none;
+            border-bottom: ${tabs.border};
+            .k-tabs-active-bar {
+                width: auto;
+                height: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+            }
+        }
+    `
+}
+
+function makeNoBorderCardStyles() {
+    return css`
+        border-radius: ${theme.borderRadius};
+        .k-tab {
+            &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                background: ${tabs.noBorderCard.bgColor};
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                z-index: -1;
+            }
+        }
+        .k-tabs-active-bar {
+            background: #fff;
+            top: 0;
+            height: auto;
+            z-index: -1;
+            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.08);
+            border-radius: 4px 4px 0px 0px;
+        }
+        &.k-vertical {
+            border-right: none;
+            .k-tabs-active-bar {
+                width: auto;
+                height: 0;
+                left: 0;
+                bottom: 0;
+                right: 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 {