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

package/components/switch/styles.ts

@@ -1,50 +1,49 @@
 import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
-import {deepDefaults, sizes} from '../../styles/utils';
+import {deepDefaults, sizes, palette} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
     get transition() { return theme.transition.middle },
-    bgColor: `#fff`,
+    get bgColor() { return theme.color.border },
     fontSize: `12px`,
-    get color() { return theme.color.text },
-    checkedBgColor: `#fff`,
+    color: '#fff',
     handleBorderRadius: `100%`,
-    get handleBgColor() { return theme.color.border },
-    get border() { return `1px solid ${theme.color.border}` },
+    handleBgColor: '#fff',
 
     // checked
     checked: {
-        get borderColor() { return theme.color.primary },
-        get color() { return theme.color.primary },
         get bgColor() { return theme.color.primary },
+        get disabledBgColor() {
+            return palette(theme.color.primary, -3);
+        }
     },
 
     // default
     default: {
-        width: `36px`,
-        height: `18px`,
-        padding: `2px`,
+        width: `45px`,
+        height: `24px`,
+        padding: `3px`,
     },
 
     // large
     large: {
-        width: `52px`,
-        height: `26px`,
-        padding: `2px`,
+        width: `58px`,
+        height: `30px`,
+        padding: `3px`,
     },
 
     // small
     small: {
-        width: `32px`,
+        width: `30px`,
         height: `16px`,
         padding: `2px`,
     },
 
     // mini
     mini: {
-        width: `24px`,
-        height: `12px`,
+        width: `18px`,
+        height: `10px`,
         padding: `1px`,
     },
 
@@ -66,7 +65,6 @@ export function makeStyles() {
         cursor: pointer;
         user-select: none;
         overflow: hidden;
-        border: ${kswitch.border};
         box-sizing: content-box;
         input {
             opacity: 0;
@@ -119,13 +117,12 @@ export function makeStyles() {
         &.k-dragging {
             .k-switch-bar,
             .k-switch-wrapper {
-                background: ${kswitch.checkedBgColor};
+                background: ${kswitch.checked.bgColor};
                 transition: background ${kswitch.transition};
             }
         }
         &:focus {
             outline: none;
-            border-color: ${kswitch.checked.borderColor};
         }
 
         // size
@@ -164,16 +161,9 @@ export function makeStyles() {
 
         // checked
         &.k-checked {
-            border-color: ${kswitch.checked.borderColor};
-            .k-switch-on {
-                color: ${kswitch.checked.color};
-            }
-            .k-switch-handle {
-                background: ${kswitch.checked.bgColor};
-            }
             .k-switch-bar,
             .k-switch-wrapper {
-                background: ${kswitch.checkedBgColor};
+                background: ${kswitch.checked.bgColor};
             }
             .k-switch-bar {
                 width: 100%;
@@ -182,19 +172,21 @@ export function makeStyles() {
 
         // disabled
         &.k-disabled {
-            background: ${kswitch.disabledBgColor};
-            cursor: not-allowed;
+            &,
+            .k-switch-handle {
+                cursor: not-allowed;
+            }
+            &,
             .k-switch-bar,
             .k-switch-wrapper {
                 background: ${kswitch.disabledBgColor};
             }
-        }
-
-        &:not(.k-checked) {
-            .k-switch-bar,
-            .k-switch-wrapper {
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
+            &.k-checked {
+                &,
+                .k-switch-bar,
+                .k-switch-wrapper {
+                    background: ${kswitch.checked.disabledBgColor};
+                }
             }
         }
     `;    

package/components/table/styles.ts

@@ -6,7 +6,8 @@ import '../../styles/global';
 const defaults = {
     get transition() { return theme.transition.large },
     // transition: '15000s',
-    border: `1px solid #e5e5e5`,
+    border: `1px solid #e2e5e8`,
+    get borderRadius() { return theme.borderRadius },
     fontSize: `12px`,
     bgColor: `#fff`,
     get color() { return theme.color.text },
@@ -20,7 +21,7 @@ const defaults = {
         fontSize: `12px`,
         fontWeight: `bold`,
         textAlign: 'left',
-        height: `30px`,
+        height: `40px`,
         delimiterHeight: '12px',
         delimiterColor: '#bfbfbf',
     },
@@ -49,7 +50,7 @@ const defaults = {
     sort: {
         iconHeight: `7px`,
         gap: `10px`,
-        color: `#a6a6a6`,
+        color: `#d0d5d9`,
         disabledColor: `#ddd`,
     },
 
@@ -76,19 +77,18 @@ export function makeStyles() {
     return css`
         font-size: ${table.fontSize};
         color: ${table.color};
-        border-top: ${table.border};
         position: relative;
         z-index: 0;
         .k-table-wrapper {
             border-bottom: ${table.border};
             overflow: auto;
+            border-radius: ${table.borderRadius};
         }
         table {
             width: 100%;
             // border-collapse: collapse;
             border-spacing: 0;
             table-layout: fixed;
-            
             td, 
             th{
                 transition: all ${table.transition};  
@@ -105,12 +105,16 @@ export function makeStyles() {
             z-index: 2;
             tr {
                 height: ${table.thead.height};
+                &:not(:last-of-type) th {
+                    border-bottom: ${table.border};
+                }
             }
         }
         th {
             padding: ${table.thead.padding};
             position: relative;
             background: ${table.thead.bgColor};
+            line-height: normal;
             &:before {
                 content: '';
                 height: ${table.thead.delimiterHeight};
@@ -124,12 +128,12 @@ export function makeStyles() {
             &:first-of-type:before {
                 display: none;
             }
-            border-bottom: ${table.border};
         }
         .k-table-title {
             display: inline-flex;
             align-items: center;
             max-width: 100%;
+            color: ${theme.color.lightBlack};
         }
         .k-table-title-text {
             flex: 1;
@@ -213,6 +217,7 @@ export function makeStyles() {
         &.k-border,
         &.k-grid {
             .k-table-wrapper {
+                border-top: ${table.border};
                 border-left: ${table.border};
                 border-right: ${table.border};
             }

package/components/tabs/demos/basic.md

@@ -14,7 +14,6 @@ import {Tabs, Tab} from 'kpc';
         <Tab value="ruleout">出站规则</Tab>
         <Tab value="relatedVM">关联云主机</Tab>
     </Tabs>
-
     <div class="content">
         <div v-if={this.get('tab') === 'rulein'}>入站规则</div>
         <div v-else-if={this.get('tab') === 'ruleout'}>出站规则</div>

package/components/tabs/index.ts

@@ -12,7 +12,7 @@ export interface TabsProps<T = any> {
     value?: T
     vertical?: boolean
     size?: Sizes
-    type?: 'default' | 'card' | 'border-card' | 'no-border-card'
+    type?: 'default' | 'card' | 'border-card' | 'no-border-card' | 'flat-card'
     closable?: boolean
     beforeChange?: (value: T) => boolean | Promise<boolean>
 }
@@ -25,7 +25,7 @@ const typeDefs: Required<TypeDefs<TabsProps>> = {
     value: null,
     vertical: Boolean,
     size: sizes,
-    type: ['default', 'card', 'border-card', 'no-border-card'],
+    type: ['default', 'card', 'border-card', 'no-border-card','flat-card'],
     closable: Boolean,
     beforeChange: Function,
 };

package/components/tabs/index.vdt

@@ -9,10 +9,10 @@ const {
 } = this.scroll;
 const classNameObj = {
     'k-tabs': true,
-    [`k-${size}`]: size,
+    [`k-size-${size}`]: size,
     'k-vertical': vertical,
-    'k-tabs-card': type === 'no-border-card',
-    [`k-tabs-${type}`]: type !== 'default',
+    /* 'k-tabs-card': type === 'no-border-card', */
+    [`k-type-${type}`]: true,
     [`k-is-scroll`]: isScroll.value,
     [className]: className,
     [makeStyles()]: true,

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