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

package/components/table/useTree.ts

@@ -2,8 +2,9 @@ import {useInstance} from 'intact';
 import type {Table, TableRowKey} from './table';
 import {inArray} from './useChecked';
 import {toggleArray} from '../utils';
+import { State } from '../../hooks/useState';
 
-export function useTree() {
+export function useTree(data: State<any[] | undefined>) {
     const instance = useInstance() as Table;
 
     function isSpreaded(key: TableRowKey) {
@@ -18,8 +19,8 @@ export function useTree() {
         cb: (value: any, index: number, level: number, meta: T | null) => T,
         shouldBreak: boolean = false,
     ) {
-        const {childrenKey, data} = instance.get();
-        loopDataWithChildrenKey(data, childrenKey, cb, shouldBreak);
+        const {childrenKey} = instance.get();
+        loopDataWithChildrenKey(data.value, childrenKey, cb, shouldBreak);
     }
 
     return {isSpreaded, toggleSpreadRow, loopData};

package/components/table/useWidth.ts

@@ -3,7 +3,7 @@ import type {Table, TableRowKey} from './table';
 import type {TableColumn} from './column';
 import {useState} from '../../hooks/useState';
 import {scrollbarWidth} from '../position';
-import {useResizeObserver} from './useResizeObserver';
+import {useResizeObserver} from '../../hooks/useResizeObserver';
 
 const hasLocalStorage = typeof localStorage !== 'undefined';
 
@@ -19,7 +19,7 @@ export function useWidth(
     initWidthFromStore();
 
     onMounted(() => checkTableWidth(true));
-    useResizeObserver(scrollRef, () => checkTableWidth(false));
+    useResizeObserver(scrollRef, () => checkTableWidth(false), true);
 
     // if exist widthStoreKey, we get the default width from localStorage
     function initWidthFromStore() {

package/components/tabs/demos/beforeChange.md

@@ -1,6 +1,6 @@
 ---
 title: 定义卡片切换前的拦截函数
-order: 7
+order: 8
 ---
 
 给`Tabs`添加`beforeChange`函数，来定义卡片切换之前的逻辑，如果该函数返回`true`则成功切换，否则忽略本次切换
@@ -22,7 +22,7 @@ import {Tabs, Tab} from 'kpc';
     <div class="content">
         <div v-if={this.get('tab') === 'rulein'}>入站规则</div>
         <div v-else-if={this.get('tab') === 'ruleout'}>出站规则</div>
-        <div v-else>关联云主机</div> 
+        <div v-else>关联云主机</div>
     </div>
 </div>
 ```

package/components/tabs/demos/card.md

@@ -3,8 +3,7 @@ title: 卡片样式
 order: 5
 ---
 
-改变`type`属性，可以呈现不同的样式，可选取值为：`default` `card` `border-card` `no-border-card`。
-其中`no-border-card`适用于具有背景色的场景
+改变`type`属性，可以呈现不同的样式，可选取值为：`default` `card` `flat-card`。
 
 ```vdt
 import {Tabs, Tab} from 'kpc';
@@ -15,12 +14,7 @@ import {Tabs, Tab} from 'kpc';
         <Tab value="ruleout">出站规则</Tab>
         <Tab value="relatedVM">关联云主机</Tab>
     </Tabs>
-    <Tabs type="border-card" v-model="tab">
-        <Tab value="rulein">入站规则</Tab>
-        <Tab value="ruleout">出站规则</Tab>
-        <Tab value="relatedVM">关联云主机</Tab>
-    </Tabs>
-    <Tabs type="no-border-card" v-model="tab">
+    <Tabs type="flat-card" v-model="tab">
         <Tab value="rulein">入站规则</Tab>
         <Tab value="ruleout">出站规则</Tab>
         <Tab value="relatedVM">关联云主机</Tab>
@@ -31,9 +25,6 @@ import {Tabs, Tab} from 'kpc';
 ```styl
 .k-tabs
     margin-bottom 16px
-.k-no-border-card
-    padding 10px
-    background #f1f1f5
 ```
 
 ```ts

package/components/tabs/demos/closable.md

@@ -8,7 +8,7 @@ order: 6
 作为参数传给事件回调函数
 
 ```vdt
-import {Tabs, Tab, Button, ButtonGroup} from 'kpc';
+import {Tabs, Tab, Button, ButtonGroup, Icon} from 'kpc';
 
 <div>
     <ButtonGroup v-model="size" checkType="radio">
@@ -29,7 +29,10 @@ import {Tabs, Tab, Button, ButtonGroup} from 'kpc';
             value={$value.value}
             key={$value.value}
             closable={$value.value !== 10}
-        >{$value.label}</Tab>
+        >
+            <Icon class="k-icon-paper" size={this.get('size')} style="margin-right: 8px;" />
+            {$value.label}
+        </Tab>
     </Tabs>
 </div>
 ```
@@ -37,8 +40,6 @@ import {Tabs, Tab, Button, ButtonGroup} from 'kpc';
 ```styl
 .k-tabs
     margin 16px 0
-.k-no-border-card
-    background #f1f1f5
 ```
 
 ```ts
@@ -47,7 +48,7 @@ import {bind, TabsProps} from 'kpc';
 interface Props {
     tab?: number
     tabs: TabItem[]
-    size: TabsProps['size'] 
+    size: TabsProps['size']
     types: TabsProps['type'][]
 }
 
@@ -69,7 +70,7 @@ export default class extends Component<Props> {
                 {value: 3, label: 'Tab 3'},
             ],
             size: 'large',
-            types: ['default', 'card', 'border-card', 'no-border-card']
+            types: ['default', 'card', 'flat-card']
         } as Props;
     }
 

package/components/tabs/demos/scroll.md

@@ -0,0 +1,104 @@
+---
+title: 可滚动
+order: 7
+---
+
+当选项卡过多时可滚动
+
+```vdt
+import {Tabs, Tab, Button, ButtonGroup} from 'kpc';
+
+<div style="width: 600px;">
+    <ButtonGroup v-model="size" checkType="radio">
+        <Button v-for={['large', 'default', 'small', 'mini']}
+            value={$value}
+        >{$value}</Button>
+    </ButtonGroup>
+    <br /><br />
+    <Tabs v-model="tab"
+        v-for={this.get('types')}
+        type={$value}
+        size={this.get('size')}
+    >
+        <Tab v-for={this.get('tabs')}
+            value={$value.value}
+            key={$value.value}
+        >{$value.label}</Tab>
+    </Tabs>
+
+    <br /><br />
+
+    <div style="display: flex">
+        <div v-for={this.get('types')} key={$value} style={{height: '200px'}}>
+            <Tabs v-model="tab"
+                type={$value}
+                size={this.get('size')}
+                vertical
+            >
+                <Tab v-for={this.get('tabs')}
+                    value={$value.value}
+                    key={$value.value}
+                >{$value.label}</Tab>
+            </Tabs>
+        </div>
+    </div>
+</div>
+```
+
+```styl
+.k-tabs
+    margin 16px 0
+
+.k-tabs.k-vertical
+    margin 0 16px
+```
+
+```ts
+import {bind, TabsProps} from 'kpc';
+
+interface Props {
+    tab?: number
+    tabs: TabItem[]
+    size: TabsProps['size']
+    types: TabsProps['type'][]
+}
+
+type TabItem = {
+    value: number
+    label: string
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            tab: 1,
+            tabs: [
+                { value: 1, label: 'Table 1'},
+                { value: 2, label: 'Table 2'},
+                { value: 3, label: 'Table 3'},
+                { value: 4, label: 'Table 4'},
+                { value: 5, label: 'Table 5'},
+                { value: 6, label: 'Table 6'},
+                { value: 7, label: 'Table 7'},
+                { value: 8, label: 'Table 8'},
+                { value: 9, label: 'Table 9'},
+                { value: 10, label: 'Table 10'},
+                { value: 11, label: 'Table 11'},
+                { value: 12, label: 'Table 12'},
+                { value: 13, label: 'Table 13'},
+                { value: 14, label: 'Table 14'},
+                { value: 15, label: 'Table 15'},
+                { value: 16, label: 'Table 16'},
+                { value: 17, label: 'Table 17'},
+                { value: 18, label: 'Table 18'},
+                { value: 19, label: 'Table 19'},
+                { value: 20, label: 'Table 20'},
+            ],
+            size: 'default',
+            types: ['default', 'card', 'flat-card']
+        } as Props;
+    }
+}
+```

package/components/tabs/demos/vertical.md

@@ -19,12 +19,7 @@ import {Tabs, Tab} from 'kpc';
         <Tab value="ruleout">出站规则</Tab>
         <Tab value="relatedVM">关联云主机</Tab>
     </Tabs>
-    <Tabs v-model="tab" vertical type="border-card">
-        <Tab value="rulein">入站规则</Tab>
-        <Tab value="ruleout">出站规则</Tab>
-        <Tab value="relatedVM">关联云主机</Tab>
-    </Tabs>
-    <Tabs v-model="tab" vertical type="no-border-card">
+    <Tabs v-model="tab" vertical type="flat-card">
         <Tab value="rulein">入站规则</Tab>
         <Tab value="ruleout">出站规则</Tab>
         <Tab value="relatedVM">关联云主机</Tab>
@@ -35,9 +30,6 @@ import {Tabs, Tab} from 'kpc';
 ```styl
 .k-tabs
     margin-right 16px
-.k-no-border-card
-    padding 10px
-    background #f1f1f5
 ```
 
 ```ts

package/components/tabs/index.md

@@ -17,7 +17,7 @@ sidebar: doc
 | value | 被选中的选项卡,使用`v-model`进行双向绑定 | `T = any` | `undefined`|
 | vertical | 垂直排列 | `boolean` | `undefined` |
 | size | 选项卡尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
-| type | 选项卡类型 | `"default"` | `"card"` | `"border-card"` | `"no-border-card"` | `"default"` |
+| type | 选项卡类型 | `"default"` | `"card"` | `"flat-card"` | `"default"` |
 | closable | 是否展示选项卡关闭按钮 | `boolean` | `false` |
 | beforeChange | 切换选项卡之前的拦截函数，如果该函数返回`false`则阻止本次切换，支持异步函数，参数为当前`Tab` `value` | <code>(value: T) => boolean &#124; Promise&lt;boolean&gt;</code> | `undefined` |
 

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' | 'flat-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','flat-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,14 +4,13 @@ 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}`]: size,
     'k-vertical': vertical,
-    /* 'k-tabs-card': type === 'no-border-card', */
     [`k-type-${type}`]: true,
     [`k-is-scroll`]: isScroll.value,
     [className]: className,
@@ -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>