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

package/components/switch/demos/basic.md

@@ -3,14 +3,13 @@ title: 基础用法
 order: 0
 ---
 
-通过`disabled`禁用组件，`v-model`进行数据双向绑定。
+通过`v-model`进行数据双向绑定。
 
 ```vdt
 import {Switch} from 'kpc';
 
 <div>
     <Switch v-model="value" />
-    <Switch disabled />
 </div>
 ```
 

package/components/switch/demos/disabled.md

@@ -0,0 +1,20 @@
+---
+title: 禁用状态
+order: 0.1
+---
+
+添加`disabled`属性
+
+```vdt
+import {Switch} from 'kpc';
+
+<div>
+    <Switch disabled />
+    <Switch value={true} disabled />
+</div>
+```
+
+```styl
+.k-switch
+    margin-right 20px
+```

package/components/switch/demos/onOff.md

@@ -16,6 +16,11 @@ import {Switch} from 'kpc';
         <b:on><i class="ion-ios-checkmark-empty"></i></b:on>
         <b:off><i class="ion-ios-close-empty"></i></b:off>
     </Switch>
+     <Switch on="开" off="关" />
+    <Switch value={true}>
+        <b:on><i class="ion-ios-checkmark-empty"></i></b:on>
+        <b:off><i class="ion-ios-close-empty"></i></b:off>
+    </Switch>
 </div>
 ```
 

package/components/switch/index.spec.ts

@@ -1,4 +1,5 @@
 import BasicDemo from '~/components/switch/demos/basic';
+import DisabledDemo from '~/components/switch/demos/disabled';
 import ValueDemo from '~/components/switch/demos/value';
 import WidthHeightDemo from '~/components/switch/demos/widthHeight';
 import {mount, unmount, dispatchEvent, wait} from '../../test/utils';
@@ -9,7 +10,7 @@ describe('Switch', () => {
     it('change value by clicking', async () => {
         const [instance, element] = mount(BasicDemo);
 
-        const [el, disabledEl] = element.querySelectorAll<HTMLElement>('.k-switch');
+        const [el] = element.querySelectorAll<HTMLElement>('.k-switch');
         el.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
@@ -23,8 +24,19 @@ describe('Switch', () => {
         handle.click();
         await wait();
         expect(instance.get('value')).to.be.false;
+    });
+
+    it('disabled', async () => {
+        const [instance, element] = mount(DisabledDemo);
 
-        disabledEl.click();
+        const el = element.querySelector<HTMLDivElement>('.k-switch')!;
+        el.click();
+        await wait();
+        expect(element.outerHTML).to.matchSnapshot();
+
+        dispatchEvent(el, 'mousedown', {which: 1, clientX: 0});
+        dispatchEvent(document, 'mousemove', {clientX: 30});
+        dispatchEvent(document, 'mouseup', {clientX: 30});
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
     });
@@ -32,7 +44,7 @@ describe('Switch', () => {
     it('change value by draging', async () => {
         const [instance, element] = mount(BasicDemo);
 
-        const [el, disabledEl] = element.querySelectorAll<HTMLElement>('.k-switch-handle');
+        const [el] = element.querySelectorAll<HTMLElement>('.k-switch-handle');
         dispatchEvent(el, 'mousedown', {which: 1, clientX: 0});
         dispatchEvent(document, 'mousemove', {clientX: 1});
         await wait();
@@ -62,13 +74,6 @@ describe('Switch', () => {
         dispatchEvent(document, 'mouseup', {clientX: 0});
         await wait();
         expect(instance.get('value')).to.be.true;
-
-        // disabled
-        dispatchEvent(disabledEl, 'mousedown', {which: 1, clientX: 0});
-        dispatchEvent(document, 'mousemove', {clientX: 30});
-        dispatchEvent(document, 'mouseup', {clientX: 30});
-        await wait();
-        expect(element.outerHTML).to.matchSnapshot();
     });
 
     it('drag switch which has custom width and height', async () => {

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/table/useDraggable.ts

@@ -2,6 +2,7 @@ import {useInstance, nextTick} from 'intact';
 import type {Table, TableRowKey} from './table';
 import {useState, State} from '../../hooks/useState';
 import type {TableRow} from './row';
+import {swap} from '../utils';
 
 export function useDraggable(data: State<unknown[] | undefined>) {
     const instance = useInstance() as Table<any, TableRowKey>;
@@ -29,13 +30,13 @@ export function useDraggable(data: State<unknown[] | undefined>) {
         e.preventDefault();
         e.stopPropagation();
 
+        if (draggingKey.value === null) return;
+
         const newIndex = tableRow.get('index');
         if (newIndex === draggingIndex) return;
 
         // swap data
-        const newData = data.value!.slice();
-        const item = newData.splice(draggingIndex, 1)[0];
-        newData.splice(newIndex, 0, item);
+        const newData = swap(data.value!, draggingIndex, newIndex);
 
         draggingIndex = newIndex;
 

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/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/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/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` |