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

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/column.vdt

@@ -12,9 +12,11 @@ import {context as TableContext} from './useColumns';
 import {context as ResizableContext} from './useResizable';
 import {context as FixedColumnsContext} from './useFixedColumns';
 import {stopPropagation} from '../utils';
+import {Input} from '../input';
+import {_$} from '../../i18n';
 
 const {title, fixed, group, multiple, key, sortable, cols, rows} = this.get();
-const {onSelect, isChecked, getGroupText} = this.group;
+const {onSelect, isChecked, getGroupText, keywords, filteredGroup} = this.group;
 
 <TableContext.Consumer>
     {checkType => {
@@ -61,21 +63,35 @@ const {onSelect, isChecked, getGroupText} = this.group;
                                                 <Dropdown v-if={group}
                                                     position={{my: 'center top', at: 'center bottom+5', collision: 'flipfit'}}
                                                     key="dropdown"
+                                                    trigger="click"
+                                                    ev-show={() => keywords.set('')}
                                                 >
                                                     <Button icon size="mini" class="k-table-group"
-                                                        ev-click={stopPropagation}
+                                                        ev-click={e => e._ignoreSortable = true}
                                                     >
                                                         <Icon class="ion-android-arrow-dropdown" />
                                                     </Button>
                                                     <DropdownMenu class={{"k-table-group-dropdown": true, [makeGroupMenuStyles()]: true}}>
-                                                        <DropdownItem v-for={group}
-                                                            ev-select={() => onSelect($value.value, groupValue, onChange)}
-                                                            hideOnSelect={!multiple}
-                                                            class={{'k-active': (checked = isChecked($value.value, groupValue))}}
-                                                        >
-                                                            <Checkbox v-if={multiple} value={checked}>{$value.label}</Checkbox>
-                                                            <span v-else>{$value.label}</span>
-                                                        </DropdownItem>
+                                                        <div class="k-table-group-header">
+                                                            <Input size="small" fluid
+                                                                placeholder={_$('请输入关键字')}
+                                                                value={keywords.value}
+                                                                ev-$change:value={keywords.set}
+                                                                clearable
+                                                            >
+                                                                <b:suffix><Icon class="ion-ios-search" /></b:suffix>
+                                                            </Input>
+                                                        </div>
+                                                        <div class="k-table-group-body">
+                                                            <DropdownItem v-for={filteredGroup.value}
+                                                                ev-select={() => onSelect($value.value, groupValue, onChange)}
+                                                                hideOnSelect={!multiple}
+                                                                class={{'k-active': (checked = isChecked($value.value, groupValue))}}
+                                                            >
+                                                                <Checkbox v-if={multiple} value={checked}>{$value.label}</Checkbox>
+                                                                <span v-else>{$value.label}</span>
+                                                            </DropdownItem>
+                                                        </div>
                                                     </DropdownMenu>
                                                 </Dropdown>
                                                 <div v-if={sortable}

package/components/table/demos/rowExpandable.md

@@ -5,7 +5,7 @@ order: 8
 
 通过`expand`扩展点指定行展开后的模板内容。是否支持点击该行任何区域都展开内容，
 是由`rowExpandable`控制的，默认情况下它为`true`。你也可以将它设为`false`，来自定义展开逻辑。例如：
-点击某个`icon`后展开改行，而点击其它元素无效。自定义展开逻辑，修改`expandedKeys`属性值，来指定哪些`key`对应的行展开。
+点击某个`icon`后展开该行，而点击其它元素无效。自定义展开逻辑，修改`expandedKeys`属性值，来指定哪些`key`对应的行展开。
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/demos/selectedKeys.md

@@ -3,7 +3,7 @@ title: 行高亮
 order: 5
 ---
 
-给`Table`添加`rowSelectable`属性，可以让表格点击行时高亮改行，你可以指定值为`multiple`来支持多行
+给`Table`添加`rowSelectable`属性，可以让表格点击行时高亮该行，你可以指定值为`multiple`来支持多行
 高亮。类似`checkedKeys`，我们可以通过`selectedKeys`来绑定高亮行的`key`，当高亮的行改变时，组件也会
 抛出`$change:selectedKeys`事件，我们可以通过`getSelectedData`来获取高亮行的数据
 

package/components/table/index.md

@@ -19,7 +19,7 @@ sidebar: doc
 | checkedKeys | 通过`key`数组来指定哪些行被选中 | `TableRowKey[]` | `[]` |
 | rowKey | 设置每行的key | `(value: T, index: number) => TableRowKey` | `(value: T, index: number) => index` |
 | rowCheckable | 当行可选时，是否点击该行任意区域都可选中 | `boolean` | `true` |
-| disableRow | 定义行禁用可选的逻辑，返回`true`，则改行被禁用选择 | `(value: T, index: number, key: TableRowKey) => boolean` | `undefined` |
+| disableRow | 定义行禁用可选的逻辑，返回`true`，则该行被禁用选择 | `(value: T, index: number, key: TableRowKey) => boolean` | `undefined` |
 | type | 表格类型，默认左右无边框，`"border"`类型会添加边框, `"grid"`类型会展示栅格边框 | `"default"` | `"border"` | `"grid"` | `"default"` |
 | stripe | 相邻行是否展示不同的背景色 | `boolean` | `false` |
 | rowClassName | 通过一个函数定义行的`className`，该函数会传入该行数据，索引和`key`当做参数，返回的字符串将被设为该行的`className` | <code>(value: T, index: number, key: TableRowKey) => string &#124; undefined</code> | `undefined` |
@@ -28,9 +28,9 @@ sidebar: doc
 | loading | 是否展示加载状态 | `boolean` | `false` |
 | merge | 指定表格单元格合并逻辑 | `TableMerge` | `undefined` |
 | expandedKeys | 通过`key`来指定哪些行展开 | `TableRowKey[]` | `undefined` |
-| rowExpandable | 是否点击改行任意区域即展开 | `boolean` | `true` |
+| rowExpandable | 是否点击该行任意区域即展开 | `boolean` | `true` |
 | selectedKeys | 当`rowSelectable`取值为非`false`时，指定哪些行高亮 | `TableRowKey[]` | `undefined` |
-| rowSelectable | 是否点击行时高亮改行，取值为`multiple`时，可以同时高亮多行 | `boolean` &#124; `"single"` &#124; `"multiple"` | `false` |
+| rowSelectable | 是否点击行时高亮该行，取值为`multiple`时，可以同时高亮多行 | `boolean` &#124; `"single"` &#124; `"multiple"` | `false` |
 | childrenKey | 树形表格指定子元素键名 | `string` | `"children"` |
 | indent | 树形表格指定子元素缩进宽度 | `number` | `32` |
 | spreadKeys | 树形表格指定展开的行 | `TableRowKey[]` | `undefined` |

package/components/table/index.spec.ts

@@ -194,7 +194,7 @@ describe('Table', () => {
         const [table1, table2] = element.querySelectorAll<HTMLElement>('.k-table');
 
         const icon = table1.querySelector('.k-table-group') as HTMLElement;
-        dispatchEvent(icon, 'mouseenter');
+        dispatchEvent(icon, 'click');
         await wait();
         const dropdown = getElement('.k-table-group-dropdown')!;
         expect(dropdown.innerHTML).to.matchSnapshot();
@@ -206,7 +206,7 @@ describe('Table', () => {
         expect(table1.innerHTML).to.matchSnapshot();
 
         const icon2 = table2.querySelector('.k-table-group') as HTMLElement;
-        dispatchEvent(icon2, 'mouseenter');
+        dispatchEvent(icon2, 'click');
         await wait();
         const dropdown2 = getElement('.k-table-group-dropdown')!;
         expect(dropdown2.innerHTML).to.matchSnapshot();

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',
     },
@@ -41,13 +42,15 @@ const defaults = {
         color: `#a6a6a6`,
         menuMaxHeight: '200px',
         get activeColor() { return theme.color.primary },
+        headerPadding: `8px`,
+        get headerBorder() { return `1px solid ${theme.color.bg}` },
     },
 
     // sort
     sort: {
         iconHeight: `7px`,
         gap: `10px`,
-        color: `#a6a6a6`,
+        color: `#d0d5d9`,
         disabledColor: `#ddd`,
     },
 
@@ -74,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};  
@@ -103,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};
@@ -122,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;
@@ -211,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};
             }
@@ -371,5 +378,9 @@ export function makeGroupMenuStyles() {
         .k-dropdown-item.k-active {
             color: ${table.group.activeColor};
         }
+        .k-table-group-header {
+            padding: ${table.group.headerPadding};
+            border-bottom: ${table.group.headerBorder};
+        }
     `
 }

package/components/table/useGroup.ts

@@ -1,8 +1,9 @@
 import {useInstance} from 'intact';
-import type {TableColumn} from './column';
+import type {TableColumn, TableColumnGroupItem} from './column';
 import {isNullOrUndefined} from 'intact-shared';
 import {toggleArray} from  '../utils';
 import {createContext} from '../context';
+import {useState, watchState} from '../../hooks/useState';
 
 type ContextValue = {
     groupValue: any
@@ -13,6 +14,8 @@ export const context = createContext<ContextValue>();
 
 export function useGroup() {
     const instance = useInstance() as TableColumn;
+    const keywords = useState<string>('');
+    const filteredGroup = useState<TableColumnGroupItem[] | undefined>(instance.get('group'));
 
     function onSelect(value: any, groupValue: any, onChange: ContextValue['onChange']) {
         const {multiple, key} = instance.get();
@@ -51,5 +54,18 @@ export function useGroup() {
         return null;
     }
 
-    return {onSelect, isChecked, getGroupText};
+    watchState(keywords, (v) => {
+        const {group = []} = instance.get();
+        v = v.trim();
+        
+        if (!v) {
+            filteredGroup.set(group);
+        } else {
+            filteredGroup.set(group.filter(item => {
+                return String(item.label).includes(v) || String(item.value).includes(v);
+            }));
+        }
+    });
+
+    return {onSelect, isChecked, getGroupText, keywords, filteredGroup};
 }

package/components/table/useSortable.ts

@@ -10,7 +10,10 @@ export function useSortable() {
     // if the same column has been clicked three times consecutively,
     // then let the third click to reset the sort
     let count = 0;
-    function onChange(key: string) {
+    function onChange(key: string, event: Event & {_ignoreSortable?: boolean}) {
+        // ignore when click group dropdown menu
+        if (event._ignoreSortable) return;
+
         let sort = {...instance.get('sort')} as TableSortValue;
         if (sort.key === key) {
             count++;

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/index.ts

@@ -12,7 +12,7 @@ export interface TabsProps<T = any> {
     value?: T
     vertical?: boolean
     size?: Sizes
-    type?: 'default' | 'card' | 'border-card' | 'no-border-card'
+    type?: 'default' | 'card' | 'border-card' | 'no-border-card' | 'flat-card'
     closable?: boolean
     beforeChange?: (value: T) => boolean | Promise<boolean>
 }
@@ -25,7 +25,7 @@ const typeDefs: Required<TypeDefs<TabsProps>> = {
     value: null,
     vertical: Boolean,
     size: sizes,
-    type: ['default', 'card', 'border-card', 'no-border-card'],
+    type: ['default', 'card', 'border-card', 'no-border-card','flat-card'],
     closable: Boolean,
     beforeChange: Function,
 };

package/components/tabs/index.vdt

@@ -9,10 +9,10 @@ const {
 } = 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-tabs-card': type === 'no-border-card', */
+    [`k-type-${type}`]: true,
     [`k-is-scroll`]: isScroll.value,
     [className]: className,
     [makeStyles()]: true,