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

package/components/tabs/index.spec.ts

@@ -1,6 +1,8 @@
 import ClosableDemo from '~/components/tabs/demos/closable';
 import BeforeChangeDemo from '~/components/tabs/demos/beforeChange';
 import {mount, unmount, dispatchEvent, wait} from '../../test/utils';
+import { Tabs, Tab } from './';
+import { Component } from 'intact';
 
 describe('Tabs', () => {
     afterEach(() => unmount());
@@ -49,4 +51,38 @@ describe('Tabs', () => {
         await wait(50);
         expect(instance.get('tab')).to.eql('rulein');
     });
+
+    it('vertical scroll', async () => {
+        class Demo extends Component {
+            static template = `
+                const { Tabs, Tab } = this;
+                <Tabs v-model="tab" vertical style="height: 200px;">
+                    <Tab v-for={new Array(10).fill(0)} value={$key}>
+                        {$key}
+                    </Tab>
+                </Tabs>
+            `
+            Tabs = Tabs
+            Tab = Tab
+
+            static defaults() {
+                return {
+                    tab: 0
+                }
+            }
+        }
+
+        const [instance, element] = mount(Demo);
+        await wait(100);
+        expect(element.innerHTML).to.matchSnapshot();
+
+        const prev = element.querySelector('.k-tabs-prev') as HTMLElement;
+        const next = element.querySelector('.k-tabs-next') as HTMLElement;
+        next.click();
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+        prev.click();
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+    });
 });

package/components/tabs/index.ts

@@ -9,23 +9,23 @@ import type {Events} from '../types';
 export * from './tab';
 
 export interface TabsProps<T = any> {
-    value?: T
-    vertical?: boolean
-    size?: Sizes
-    type?: 'default' | 'card' | 'border-card' | 'no-border-card'
-    closable?: boolean
-    beforeChange?: (value: T) => boolean | Promise<boolean>
+    value?: T;
+    vertical?: boolean;
+    size?: Sizes;
+    type?: 'default' | 'card' | 'flat-card';
+    closable?: boolean;
+    beforeChange?: (value: T) => boolean | Promise<boolean>;
 }
 
 export interface TabsEvents<T = any> {
-    remove: [T]
+    remove: [T];
 }
 
 const typeDefs: Required<TypeDefs<TabsProps>> = {
     value: null,
     vertical: Boolean,
     size: sizes,
-    type: ['default', 'card', 'border-card', 'no-border-card'],
+    type: ['default', 'card', 'flat-card'],
     closable: Boolean,
     beforeChange: Function,
 };
@@ -37,7 +37,7 @@ const defaults = (): Partial<TabsProps> => ({
 
 const events: Events<TabsEvents> = {
     remove: true,
-}
+};
 
 export class Tabs<T = any> extends Component<TabsProps<T>, TabsEvents<T>> {
     static template = template;
@@ -62,15 +62,14 @@ export class Tabs<T = any> extends Component<TabsProps<T>, TabsEvents<T>> {
         // but let the page to change it by passing the value prop
         if (!tabProps.to) {
             this.set('value', tabProps.value);
-        // } else if (this.$router) {
+            // } else if (this.$router) {
             // this.$router.push(item.to);
         } else {
             window.location.href = tabProps.to as string;
         }
     }
-    
+
     public remove(value: T) {
         this.trigger('remove', value);
     }
 }
-

package/components/tabs/index.vdt

@@ -4,15 +4,14 @@ import {makeStyles} from './styles';
 
 const {className, children, vertical, size, type} = this.get();
 const {
-    isScroll, left, enablePrev, enableNext,
+    isScroll, offset, enablePrev, enableNext,
     prev, next, scrollRef, wrapperRef
 } = 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-type-${type}`]: true,
     [`k-is-scroll`]: isScroll.value,
     [className]: className,
     [makeStyles()]: true,
@@ -21,17 +20,17 @@ const classNameObj = {
 <div class={classNameObj} {...getRestProps(this)}>
     <Button class="k-tabs-prev" type="none" icon
         v-if={isScroll.value}
-        key="prev" 
+        key="prev"
         size={size}
         disabled={!enablePrev.value}
         ev-click={prev}
     >
-        <i class="ion-ios-arrow-left"></i>
+        <i class={vertical ? "ion-ios-arrow-up" : "ion-ios-arrow-left"}></i>
     </Button>
     <div class="k-tabs-scroll c-clearfix" ref={scrollRef}>
         <div class="k-tabs-wrapper"
             ref={wrapperRef}
-            style={{transform: `translateX(${left.value}px)`}}
+            style={{transform: vertical ? `translateY(${offset.value}px)` : `translateX(${offset.value}px)`}}
         >
             {children}
             <div class="k-tabs-active-bar" style={this.activeBar.value}></div>
@@ -39,11 +38,11 @@ const classNameObj = {
     </div>
     <Button class="k-tabs-next" type="none" icon
         v-if={isScroll.value}
-        key="next" 
+        key="next"
         size={size}
         disabled={!enableNext.value}
         ev-click={next}
     >
-        <i class="ion-ios-arrow-right"></i>
+        <i class={vertical ? "ion-ios-arrow-down" : "ion-ios-arrow-right"}></i>
     </Button>
 </div>

package/components/tabs/styles.ts

@@ -4,60 +4,74 @@ import {deepDefaults, sizes, Sizes} from '../../styles/utils';
 import '../../styles/global';
 
 type SizeStyles = {
-    fontSize: string,
-    height: string,
-    padding: string,
-    closeFontSize: string,
-}
+    fontSize: string;
+    height: string;
+    padding: string;
+    closeFontSize: string;
+    navigatorWidth: string;
+};
 
 const closeFontSizeMap: Record<Sizes, string> = {
     large: '24px',
     default: '20px',
     small: '18px',
     mini: '16px',
-}
+};
+
+const navigatorWidthMap: Record<Sizes, string> = {
+    large: theme.large.height,
+    default: theme.default.height,
+    small: theme.small.height,
+    mini: theme.mini.height,
+};
 
 const defaults = deepDefaults(
     {
         get transition() { return theme.transition.middle },
-        get borderColor() { return theme.color.border },
+        get borderColor() { return '#f0f2f4' },
         borderWidth: '1px',
         get border() { return `${tabs.borderWidth} solid ${tabs.borderColor}` },
-        margin: `0 10px`,
         get color() { return theme.color.text },
-        closeGutter: `8px`,
-
-        // vertical
-        verticalPadding: `0 25px`,
+        closeGap: `8px`,
 
         //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: {
+        card: {
             get bgColor() { return theme.color.bg },
+            get borderRadius() { return theme.borderRadius },
         },
 
-        // no-border-card
-        noBorderCard: {
-            get bgColor() { return theme.color.bg },
-            gutter: `4px`,
-        }
+        flatCard: {
+            // get bgColor() { return theme.color.bg },
+            // get borderRadius() { return theme.borderRadius },
+            padding: '2px',
+        },
+
+        // 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] },
+            // scroll
+            get navigatorWidth() { return navigatorWidthMap[size] },
         };
 
         return memo;
@@ -71,23 +85,39 @@ setDefault(() => {
 
 export function makeStyles() {
     return css`
-        border-bottom: ${tabs.border};
+        ${makeCommonStyles()};
+        ${makeScrollStyles()};
+
+        &.k-type-default {
+            ${makeDefaultStyles()}
+        }
+
+        &.k-type-card {
+            ${makeCardStyles()};
+        }
+
+        &.k-type-flat-card {
+            ${makeFlatCardStyles()};
+        }
+    `;
+}
+
+function makeCommonStyles() {
+    const active = tabs.active;
+    const bar = active.bar;
+    return css`
         position: relative;
-        line-height: 1;
         .k-tab {
-            margin: ${tabs.margin};
+            display: inline-flex;
             cursor: pointer;
-            display: inline-block;
             text-align: center;
+            align-items: center;
             color: ${tabs.color};
-            position: relative;
-            vertical-align: middle;
             white-space: nowrap;
-            overflow: hidden;
             text-overflow: ellipsis;
             &:hover,
             &.k-active {
-                color: ${tabs.activeColor};
+                color: ${active.color};
             }
             &.k-disabled {
                 color: ${theme.color.disabled};
@@ -95,10 +125,9 @@ export function makeStyles() {
             }
         }
         .k-tab-close {
-            margin-right: -${tabs.closeGutter};
-            margin-left: ${tabs.closeGutter};
-            position: relative;
-            top: -1px;
+            margin-right: -${tabs.closeGap};
+            margin-left: ${tabs.closeGap};
+            color: ${theme.color.lightBlack};
         }
 
         // active-bar
@@ -106,163 +135,88 @@ 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: 0;
         }
 
         // 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: 0;
+                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};
+                    }
+                    &:not(.k-vertical).k-is-scroll {
+                        padding: 0 ${styles.navigatorWidth};
+                    }
+                    &.k-vertical.k-is-scroll {
+                        padding: ${styles.navigatorWidth} 0;
                     }
                 }
-            }
-        }
-
-        // 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;
-                }
-            }
+function makeScrollStyles() {
+    return css`
+        overflow: hidden;
+        .k-tabs-scroll {
+            overflow: hidden;
+            position: relative;
+            // @referece https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
+            padding-bottom: 1px;
+            margin-bottom: -1px;
         }
-
-        // 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-type-card,
+        &.k-type-flat-card {
+            .k-tabs-scroll {
+                padding-bottom: 0;
+                margin-bottom: 0;
             }
-            &.k-vertical {
-                border-right: none;
-                .k-tab:not(:first-of-type) {
-                    margin: ${tabs.noBorderCard.gutter} 0 0;
-                }
-                .k-tabs-active-bar {
-                    border: none;
-                }
+        }
+        .k-tabs-wrapper {
+            white-space: nowrap;
+            transition: transform ${tabs.transition};
+        }
+        .k-tabs-prev,
+        .k-tabs-next {
+            position: absolute;
+            &:not(.k-disabled) {
+                box-shadow: ${theme.boxShadow};
             }
         }
 
-        // scroll
         &:not(.k-vertical) {
-            .k-tabs-scroll {
-                overflow: hidden;
-                position: relative;
-                // @referece https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
-                padding-bottom: 1px;
-                margin-bottom: -1px;
-            }
-            &.k-tabs-border-card,
-            &.k-tabs-no-border-card {
-                .k-tabs-scroll {
-                    padding-bottom: 0;
-                    margin-bottom: 0;
-                }
-            }
             .k-tabs-wrapper {
-                white-space: nowrap;
                 float: left;
-                transition: transform ${tabs.transition};
             }
             .k-tabs-prev,
             .k-tabs-next {
-                position: absolute;
                 top: 0;
-                width: ${tabs.navigatorWidth} !important;
             }
             .k-tabs-prev {
                 left: 0;
@@ -270,27 +224,92 @@ export function makeStyles() {
             .k-tabs-next {
                 right: 0;
             }
-            &.k-is-scroll {
-                padding: 0 ${tabs.navigatorWidth};
+        }
+
+        &.k-vertical {
+            &,
+            .k-tabs-scroll {
+                height: 100%
+            }
+
+            /* increase specificity, making sure the width is working */
+            .k-tabs-prev,
+            .k-tabs-next {
+                width: 100% !important;
+                left: 0;
+            }
+            .k-tabs-prev {
+                top: 0;
+            }
+            .k-tabs-next {
+                bottom: 0;
             }
         }
+    `;
+}
 
-        // 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 makeCardCommonStyles() {
+    return css`
+        border-radius: ${tabs.card.borderRadius};
+        background-color: ${tabs.card.bgColor};
+        .k-tabs-active-bar {
+            background: #fff;
+            top: 0;
+            height: auto;
+            z-index: -1;
+        }
+    `
+}
+
+function makeCardStyles() {
+    const borderRadius = tabs.card.borderRadius;
+    return css`
+        ${makeCardCommonStyles()};
+        .k-tabs-active-bar {
+            border-radius: ${borderRadius} ${borderRadius} 0px 0px;
+            box-shadow: ${theme.boxShadow};
+        }
+
+        // vertical card
+        &.k-vertical {
+            .k-tabs-active-bar {
+                width: 100%;
+                left: 0;
+                border-radius: ${borderRadius} 0px 0px ${borderRadius};
+            }
+        }
+    `;
+}
+
+function makeFlatCardStyles() {
+    const padding = tabs.flatCard.padding;
+    return css`
+        ${makeCardCommonStyles()};
+        padding: 0 ${padding};
+
+        .k-tabs-active-bar {
+            top: ${padding};
+            height: calc(100% - ${padding} * 2);
+            border-radius: ${tabs.card.borderRadius};
+        }
+
+        // vertical card
+        &.k-vertical {
+            padding: ${padding} 0;
+            .k-tabs-active-bar {
+                left: ${padding};
+                width: calc(100% - ${padding} * 2);
+            }
+        }
     `;
 }