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

package/components/tabs/index.vdt

@@ -1,17 +1,17 @@
 import {Button} from '../button';
 import {getRestProps} from '../utils';
 import {makeStyles} from './styles';
+import {Icon} from '../icon';
 
 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}`]: size,
     'k-vertical': vertical,
-    /* 'k-tabs-card': type === 'no-border-card', */
     [`k-type-${type}`]: true,
     [`k-is-scroll`]: isScroll.value,
     [className]: className,
@@ -21,17 +21,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>
+        <Icon class={vertical ? "k-icon-up" : "k-icon-left"} />
     </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 +39,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>
+        <Icon class={vertical ? "k-icon-down" : "k-icon-right"} />
     </Button>
 </div>

package/components/tabs/styles.ts

@@ -4,31 +4,36 @@ 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}` },
         get color() { return theme.color.text },
         closeGap: `8px`,
 
-        // scroll
-        navigatorWidth: `20px`,
-
         //active
         active: {
             get color() { return theme.color.primary },
@@ -38,14 +43,15 @@ const defaults = deepDefaults(
             }
         },
 
-        // 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 },
+        flatCard: {
+            // get bgColor() { return theme.color.bg },
+            // get borderRadius() { return theme.borderRadius },
+            padding: '2px',
         },
 
         // define size
@@ -64,6 +70,8 @@ const defaults = deepDefaults(
             get height() { return theme[size].height },
             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;
@@ -85,18 +93,12 @@ export function makeStyles() {
         }
 
         &.k-type-card {
-            ${makeDefaultStyles()}
             ${makeCardStyles()};
         }
 
-        &.k-type-border-card {
-            ${makeBorderCardStyles()};
+        &.k-type-flat-card {
+            ${makeFlatCardStyles()};
         }
-
-        &.k-type-no-border-card {
-            ${makeNoBorderCardStyles()};
-        }
-        
     `;
 }
 
@@ -106,14 +108,12 @@ function makeCommonStyles() {
     return css`
         position: relative;
         .k-tab {
+            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 {
@@ -127,9 +127,7 @@ function makeCommonStyles() {
         .k-tab-close {
             margin-right: -${tabs.closeGap};
             margin-left: ${tabs.closeGap};
-            position: relative;
-            top: -1px;
-            color:${theme.color.lightBlack};
+            color: ${theme.color.lightBlack};
         }
 
         // active-bar
@@ -139,7 +137,7 @@ function makeCommonStyles() {
             left: 0;
             height: ${bar.height};
             background: ${bar.bgColor};
-            bottom: calc(-${bar.height} / 2); 
+            bottom: 0;
         }
 
         // vertical
@@ -151,7 +149,7 @@ function makeCommonStyles() {
             .k-tabs-active-bar {
                 left: auto;
                 top: 0;
-                right: calc(-${bar.height} / 2); 
+                right: 0;
                 width: ${bar.height};
                 height: auto;
             }
@@ -171,39 +169,54 @@ function makeCommonStyles() {
                     .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;
+                    }
                 }
-            `
+            `;
         })}
-    `
+    `;
 }
 
 function makeScrollStyles() {
     return css`
-        &:not(.k-vertical) {
+        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;
+        }
+        &.k-type-card,
+        &.k-type-flat-card {
             .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;
+                padding-bottom: 0;
+                margin-bottom: 0;
             }
-            &.k-tabs-border-card,
-            &.k-tabs-no-border-card {
-                .k-tabs-scroll {
-                    padding-bottom: 0;
-                    margin-bottom: 0;
-                }
+        }
+        .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};
             }
+        }
+
+        &:not(.k-vertical) {
             .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;
@@ -211,11 +224,28 @@ function makeScrollStyles() {
             .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;
             }
         }
-    `
+    `;
 }
 
 function makeDefaultStyles() {
@@ -225,122 +255,61 @@ function makeDefaultStyles() {
             border-bottom: none;
             border-right: ${tabs.border};
         }
-    `
+    `;
 }
 
-function makeCardActiveBarCommonStyles() {
+function makeCardCommonStyles() {
     return css`
-        background: #fff;
-        top: 0;
-        height: auto;
-        z-index: -1;
+        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`
-        .k-tab {
-            margin: 0;
-        }
+        ${makeCardCommonStyles()};
         .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};
-            }
+            border-radius: ${borderRadius} ${borderRadius} 0px 0px;
+            box-shadow: ${theme.boxShadow};
         }
 
         // vertical card
         &.k-vertical {
             .k-tabs-active-bar {
+                width: 100%;
                 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;
-                }
+                border-radius: ${borderRadius} 0px 0px ${borderRadius};
             }
         }
-    `
+    `;
 }
 
-function makeBorderCardStyles() {
+function makeFlatCardStyles() {
+    const padding = tabs.flatCard.padding;
     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;
-            }
-        }
-    `
-}
+        ${makeCardCommonStyles()};
+        padding: 0 ${padding};
 
-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;
+            top: ${padding};
+            height: calc(100% - ${padding} * 2);
+            border-radius: ${tabs.card.borderRadius};
         }
+
+        // vertical card
         &.k-vertical {
-            border-right: none;
+            padding: ${padding} 0;
             .k-tabs-active-bar {
-                width: auto;
-                height: 0;
-                left: 0;
-                bottom: 0;
-                right: 0;
+                left: ${padding};
+                width: calc(100% - ${padding} * 2);
             }
         }
-    `
+    `;
 }

package/components/tabs/useScroll.ts

@@ -1,4 +1,10 @@
-import {useInstance, createRef, onMounted, onUpdated, onUnmounted} from 'intact';
+import {
+    useInstance,
+    createRef,
+    onMounted,
+    onUpdated,
+    onUnmounted,
+} from 'intact';
 import {useState} from '../../hooks/useState';
 import type {Tabs} from './';
 import {useResizeObserver} from '../../hooks/useResizeObserver';
@@ -8,7 +14,7 @@ export function useScroll() {
     const scrollRef = createRef<HTMLElement>();
     const wrapperRef = createRef<HTMLElement>();
     const isScroll = useState<boolean>(false);
-    const left = useState<number>(0);
+    const offset = useState<number>(0);
     const enablePrev = useState<boolean>(false);
     const enableNext = useState<boolean>(false);
 
@@ -18,77 +24,130 @@ export function useScroll() {
 
     instance.watch('value', scrollActiveToView, {presented: true});
 
-    function refresh() {
+    function getLength() {
         const {vertical} = instance.get();
-        if (vertical) return;
 
-        const scrollWidth = scrollRef.value!.offsetWidth;
-        const wrapperWidth = wrapperRef.value!.offsetWidth;
+        if (vertical) {
+            return {
+                scrollLength: scrollRef.value!.offsetHeight,
+                wrapperLength: wrapperRef.value!.offsetHeight,
+            };
+        }
+
+        return {
+            scrollLength: scrollRef.value!.offsetWidth,
+            wrapperLength: wrapperRef.value!.offsetWidth,
+        };
+    }
+
+    function refresh() {
+        const {scrollLength, wrapperLength} = getLength();
 
-        isScroll.set(scrollWidth < wrapperWidth);
-        updateTransition(left.value, scrollWidth, wrapperWidth);
+        isScroll.set(scrollLength < wrapperLength);
+        updateTransition(offset.value, scrollLength, wrapperLength);
     }
 
     function updateTransition(
-        _left = left.value,
-        scrollWidth = scrollRef.value!.offsetWidth,
-        wrapperWidth = wrapperRef.value!.offsetWidth,
+        _offset: number,
+        scrollLength: number,
+        wrapperLength: number
     ) {
         let prev = true;
         let next = true;
-        if (_left >= 0) {
-            _left = 0;
+        if (_offset >= 0) {
+            _offset = 0;
             prev = false;
-        } else if (_left <= scrollWidth - wrapperWidth) {
-            _left = scrollWidth - wrapperWidth;
+        } else if (_offset <= scrollLength - wrapperLength) {
+            _offset = scrollLength - wrapperLength;
             next = false;
         }
 
-        left.set(_left);
+        offset.set(_offset);
         enablePrev.set(prev);
         enableNext.set(next);
     }
 
     function prev() {
-        const scrollWidth = scrollRef.value!.offsetWidth;
-        updateTransition(left.value + scrollWidth);
+        const {scrollLength, wrapperLength} = getLength();
+
+        updateTransition(
+            offset.value + scrollLength,
+            scrollLength,
+            wrapperLength
+        );
     }
 
     function next() {
-        const scrollWidth = scrollRef.value!.offsetWidth;
-        updateTransition(left.value - scrollWidth);
+        const {scrollLength, wrapperLength} = getLength();
+
+        updateTransition(
+            offset.value - scrollLength,
+            scrollLength,
+            wrapperLength
+        );
     }
 
     function scrollActiveToView() {
         const {vertical} = instance.get();
-        if (vertical) return;
 
-        const activeTab = scrollRef.value!.querySelector('.k-tab.k-active') as HTMLElement;
+        const activeTab = scrollRef.value!.querySelector(
+            '.k-tab.k-active'
+        ) as HTMLElement;
         if (activeTab) {
-            let _left = left.value;
+            let _offset = offset.value;
             // don't use getBoundingClientRect, it has transform and will return digital number
-            const activeRect = {
-                left: activeTab.offsetLeft,
-                width: activeTab.offsetWidth
-            };
-            const scrollRect = {
-                width: scrollRef.value!.offsetWidth
-            };
-            const wrapperRect = {
-                left: wrapperRef.value!.offsetLeft,
-                width: wrapperRef.value!.offsetWidth
-            };
-            const x = activeRect.left - wrapperRect.left;
-            if (_left + x <= 0) {
-                _left = -x;
-            } else if (x + activeRect.width + _left > scrollRect.width) {
-                _left = -x - activeRect.width + scrollRect.width;
+            let activeRect: {offset: number; length: number};
+            let scrollRect: {length: number};
+            let wrapperRect: {offset: number; length: number};
+
+            if (vertical) {
+                activeRect = {
+                    offset: activeTab.offsetTop,
+                    length: activeTab.offsetHeight,
+                };
+                scrollRect = {
+                    length: scrollRef.value!.offsetHeight,
+                };
+                wrapperRect = {
+                    offset: wrapperRef.value!.offsetTop,
+                    length: wrapperRef.value!.offsetHeight,
+                };
+            } else {
+                activeRect = {
+                    offset: activeTab.offsetLeft,
+                    length: activeTab.offsetWidth,
+                };
+                scrollRect = {
+                    length: scrollRef.value!.offsetWidth,
+                };
+                wrapperRect = {
+                    offset: wrapperRef.value!.offsetLeft,
+                    length: wrapperRef.value!.offsetWidth,
+                };
+            }
+            const offsetDelta = activeRect.offset - wrapperRect.offset;
+            if (_offset + offsetDelta <= 0) {
+                _offset = -offsetDelta;
+            } else if (
+                offsetDelta + activeRect.length + _offset >
+                scrollRect.length
+            ) {
+                _offset = -offsetDelta - activeRect.length + scrollRect.length;
             }
-            left.set(_left);
+            offset.set(_offset);
         } else {
-            left.set(0);
+            offset.set(0);
         }
     }
 
-    return {isScroll, left, enablePrev, enableNext, prev, next, scrollRef, wrapperRef};
+    return {
+        isScroll,
+        offset,
+        enablePrev,
+        enableNext,
+        prev,
+        next,
+        scrollRef,
+        wrapperRef,
+    };
 }

package/components/tag/base.ts

@@ -19,7 +19,7 @@ export interface TagEvents {
 
 export interface TagBlocks { }
 
-const typeDefs: Required<TypeDefs<TagProps>> = {
+export const typeDefs: Required<TypeDefs<TagProps>> = {
     type: ['default', 'primary', 'danger', 'success', 'warning'],
     closable: Boolean,
     closed: Boolean,