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

package/components/table/useGroup.ts

@@ -1,9 +1,10 @@
-import {useInstance} from 'intact';
+import {useInstance, createRef} from 'intact';
 import type {TableColumn, TableColumnGroupItem} from './column';
-import {isNullOrUndefined} from 'intact-shared';
+import {isArray} from 'intact-shared';
 import {toggleArray} from  '../utils';
 import {createContext} from '../context';
 import {useState, watchState} from '../../hooks/useState';
+import type { Dropdown } from '../dropdown';
 
 type ContextValue = {
     groupValue: any
@@ -16,42 +17,50 @@ export function useGroup() {
     const instance = useInstance() as TableColumn;
     const keywords = useState<string>('');
     const filteredGroup = useState<TableColumnGroupItem[] | undefined>(instance.get('group'));
+    const localGroupValue = useState<any>(null); 
+    const dropdownRef = createRef<Dropdown>();
 
-    function onSelect(value: any, groupValue: any, onChange: ContextValue['onChange']) {
+    instance.on('$receive:group', (group) => filteredGroup.set(group));
+
+    function onShow(groupValue: any) {
+        keywords.set('');
+        localGroupValue.set(groupValue);
+    }
+
+    function onSelect(value: any, onChange: ContextValue['onChange']) {
         const {multiple, key} = instance.get();
 
         if (multiple) {
-            value = toggleArray(groupValue, value);
+            // should click confirm button when it is multiple selection
+            localGroupValue.set(toggleArray(localGroupValue.value, value));
+        } else {
+            // change immediately when it is single selection
+            onChange(key, value);
         }
-        onChange(key, value);
     }
 
-    function isChecked(value: any, groupValue: any) {
+    function isChecked(value: any) {
         const {multiple} = instance.get();
+        const groupValue = localGroupValue.value;
         if (multiple) {
             return groupValue && groupValue.includes(value);
         }
         return groupValue === value;
     }
 
-    function getGroupText(groupValue: any) {
-        let {multiple, group} = instance.get();
-
-        if (isNullOrUndefined(groupValue)) return null;
-        if (!multiple) {
-            groupValue = [groupValue];
-        }
+    function confirm(onChange: ContextValue['onChange']) {
+        const {key} = instance.get();
+        onChange(key, localGroupValue.value);
+        dropdownRef.value!.hide(true);
+    }
 
-        if (group) {
-            const ret = group.filter(item => groupValue.includes(item.value))
-                .map(item => item.label)
-                .join(', ');
-            if (ret) {
-                return `(${ret})`;
-            }
-        }
+    function reset() {
+        localGroupValue.set([]);
+    }
 
-        return null;
+    function isEmptyValue(groupValue: any) {
+        const {multiple} = instance.get();
+        return !groupValue || multiple && (!isArray(groupValue) || groupValue.every(value => !value));
     }
 
     watchState(keywords, (v) => {
@@ -67,5 +76,16 @@ export function useGroup() {
         }
     });
 
-    return {onSelect, isChecked, getGroupText, keywords, filteredGroup};
+    return {
+        onSelect,
+        isChecked,
+        keywords,
+        filteredGroup,
+        onShow,
+        reset,
+        confirm,
+        dropdownRef,
+        localGroupValue,
+        isEmptyValue,
+    };
 }

package/components/table/useMerge.ts

@@ -1,6 +1,7 @@
 import {useInstance, Props} from 'intact';
 import type {Table, TableRowKey, TableCheckType} from './table';
 import type {TableColumnProps} from './column';
+import { State, watchState } from '../../hooks/useState';
 
 export type TableMerge<T = any, CheckType = 'checkbox'> = (
     row: T,
@@ -23,6 +24,7 @@ export type TableGrid = TableGridItem[][];
 
 export function useMerge(
     getCols: () => Props<TableColumnProps>[],
+    data: State<unknown[] | undefined>,
 ) {
     const instance = useInstance() as Table<any, TableRowKey, TableCheckType>;
     let grid: TableGrid = [];
@@ -30,11 +32,11 @@ export function useMerge(
     function handleSpans() {
         grid = [];
 
-        const {merge, data, checkType} = instance.get();
-        if (!data || !data.length || !merge) return;
+        const {merge, checkType} = instance.get();
+        if (!data.value || !data.value.length || !merge) return;
 
         const cols = getCols();
-        data.forEach((data, rowIndex) => {
+        data.value.forEach((data, rowIndex) => {
             const currentRow: TableGridItem[] = [];
             grid.push(currentRow);
 
@@ -99,6 +101,7 @@ export function useMerge(
     }
 
     instance.on('$receive:children', handleSpans);
+    watchState(data, handleSpans);
 
     return {getGrid};
 }

package/components/table/usePagination.ts

@@ -0,0 +1,71 @@
+import {useInstance, createRef} from 'intact';
+import type {Table, TableRowKey, TableCheckType} from './table';
+import {useState} from '../../hooks/useState';
+import {Pagination, PaginationChangeData} from '../pagination';
+import {isObject} from 'intact-shared';
+import { useReceive } from '../../hooks/useReceive';
+
+const defaultPagination = Pagination.defaults();
+
+export function usePagination() {
+    const instance = useInstance() as Table<any, TableRowKey, TableCheckType>
+    const data = useState<any[] | undefined>(instance.get('data'));   
+    const value = useState<number>(defaultPagination.value!);
+    const limit = useState<number>(defaultPagination.limit!);
+    const paginationRef =  createRef<Pagination>(); // for unit test
+
+    useReceive<Table>(['data', 'pagination'], () => {
+        handleData();
+    });
+
+    function handleData() {
+        let { data: _data, pagination } = instance.get();
+
+        if (!_data) {
+            data.set(undefined);
+            return;
+        }
+
+        if (!pagination) {
+            data.set(_data);
+            return;
+        }
+
+        if (isObject(pagination)) {
+            if (pagination.value) {
+                value.set(pagination.value);
+            }
+            if (pagination.limit) {
+                limit.set(pagination.limit);
+            }
+        }
+
+        updateDataByPage();
+    }
+
+    function updateDataByPage() {
+        const { data: _data } = instance.get();
+        const index = (value.value - 1) * limit.value; 
+        data.set(_data!.slice(index,  index + limit.value));
+    }
+
+    function onChange(data: PaginationChangeData) {
+        const { pagination } = instance.get();
+
+        value.set(data.value);
+        limit.set(data.limit);
+        updateDataByPage();
+
+        if (isObject(pagination)) {
+            instance.set('pagination', {
+                ...pagination,
+                value: value.value,
+                limit: limit.value,
+            });
+        }
+
+        instance.trigger('changePage', data);
+    }
+
+    return { data, value, limit, onChange, paginationRef };
+}

package/components/table/useRestRowStatus.ts

@@ -29,7 +29,10 @@ export function useRestRowStatus(
         }
     }
 
-    function omit(type: 'checkedKeys' | 'selectedKeys' | 'spreadKeys' | 'expandedKeys', keys: TableRowKey[]) {
+    function omit(
+        type: 'checkedKeys' | 'selectedKeys' | 'spreadKeys' | 'expandedKeys',
+        keys: TableRowKey[]
+    ) {
         let originKeys = instance.get(type);
         if (!originKeys) return;
 

package/components/table/useStickyScrollbar.ts

@@ -5,7 +5,7 @@ import type {Table} from './';
 import {isStringOrNumber, isNull} from 'intact-shared';
 import {debounce} from '../utils';
 import type {useScroll} from './useScroll';
-import {useResizeObserver} from './useResizeObserver';
+import {useResizeObserver} from '../../hooks/useResizeObserver';
 
 export function useStickyScrollbar(
     elementRef: RefObject<HTMLElement>,
@@ -23,7 +23,7 @@ export function useStickyScrollbar(
         stick.set(v === true ? 0 : isStringOrNumber(v) ? +v : null);
     });
 
-    useResizeObserver(scrollRef, setTableActualWidth);
+    useResizeObserver(scrollRef, setTableActualWidth, true);
 
     onMounted(() => {
         setTableActualWidth();

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);
     }
 }
-