@king-design/intact 3.5.0-beta.0 → 3.5.0

package/components/affix/index.md

@@ -13,6 +13,7 @@ sidebar: doc
 | bottom | 指定元素固定距离底部的位置 | `number` | `undefined` |
 | shouldFix | 自定义元素固定规则 | `Function` | `undefined` |
 | exclude | 排除某些固定的情况 | `Function` | `undefined` |
+| disabled | 是否禁用 | `Boolean` | `false` |
 
 # 事件
 

package/components/affix/index.ts

@@ -8,6 +8,7 @@ export interface AffixProps {
     bottom?: number
     exclude?: (data: ExcludeParam) => boolean
     shouldFix?: (data: ShouldFixParam) => boolean
+    disabled?: boolean
 }
 
 export interface AffixEvents {
@@ -34,6 +35,7 @@ const typeDefs: Required<TypeDefs<AffixProps>> = {
     bottom: Number,
     exclude: Function,
     shouldFix: Function,
+    disabled: Boolean,
 };
 
 export class Affix extends Component<AffixProps, AffixEvents> {

package/components/affix/useStyle.ts

@@ -12,44 +12,47 @@ export function useStyle(elementRef: RefObject<HTMLElement>) {
     let ro: ResizeObserver | null = null;
 
     function genStyle() {
-        let {top: offsetTop, bottom: offsetBottom, exclude, shouldFix} = instance.get();
-        const {top, bottom, width, height} = elementRef.value!.getBoundingClientRect(); 
-        
-        const setStyle = (styles: Record<string, string>) => {
-            if (!exclude || exclude && !exclude({
-                offsetTop, offsetBottom, top, bottom, width, height
-            })) {
-                style.set({
-                    position: 'fixed',
-                    width: `${width}px`,
-                    ...styles,
-                });
-                containerStyle.set({
-                    height: `${height}px`,
-                });
-            } else {
-                resetStyle();
-            }
-        };
+        let {top: offsetTop, bottom: offsetBottom, exclude, shouldFix, disabled} = instance.get();
 
-        if (isNullOrUndefined(offsetTop) && isNullOrUndefined(offsetBottom)) {
-            offsetTop = 0;
-        }
+        if (!disabled) {
+            const {top, bottom, width, height} = elementRef.value!.getBoundingClientRect(); 
+            
+            const setStyle = (styles: Record<string, string>) => {
+                if (!exclude || exclude && !exclude({
+                    offsetTop, offsetBottom, top, bottom, width, height
+                })) {
+                    style.set({
+                        position: 'fixed',
+                        width: `${width}px`,
+                        ...styles,
+                    });
+                    containerStyle.set({
+                        height: `${height}px`,
+                    });
+                } else {
+                    resetStyle();
+                }
+            };
 
-        if (!isNullOrUndefined(offsetTop)) {
-            if (
-                shouldFix && shouldFix({offsetTop, offsetBottom}) ||
-                !shouldFix && top < offsetTop
-            ) {
-                return setStyle({top: `${offsetTop}px`});
+            if (isNullOrUndefined(offsetTop) && isNullOrUndefined(offsetBottom)) {
+                offsetTop = 0;
             }
-        } else {
-            const viewportHeight = document.documentElement.clientHeight;
-            if (
-                shouldFix && shouldFix({offsetTop, offsetBottom, viewportHeight}) || 
-                !shouldFix && !isNullOrUndefined(offsetBottom) && viewportHeight - bottom <= offsetBottom
-            ) {
-                return setStyle({bottom: `${offsetBottom}px`});
+
+            if (!isNullOrUndefined(offsetTop)) {
+                if (
+                    shouldFix && shouldFix({offsetTop, offsetBottom}) ||
+                    !shouldFix && top < offsetTop
+                ) {
+                    return setStyle({top: `${offsetTop}px`});
+                }
+            } else {
+                const viewportHeight = document.documentElement.clientHeight;
+                if (
+                    shouldFix && shouldFix({offsetTop, offsetBottom, viewportHeight}) || 
+                    !shouldFix && !isNullOrUndefined(offsetBottom) && viewportHeight - bottom <= offsetBottom
+                ) {
+                    return setStyle({bottom: `${offsetBottom}px`});
+                }
             }
         }
 

package/components/datepicker/basepicker.ts

@@ -56,13 +56,13 @@ export type Value = string | Date | number | Dayjs;
 
 const typeDefs: Required<TypeDefs<BasePickerProps<Value>>> = {
     ...BaseSelect.typeDefs,
-    value: [String, Array, Date, Number, dayjs.Dayjs],
+    value: [String, Array, Date, Number, dayjs],
     range: Boolean,
     format: String,
     valueFormat: String,
     showFormat: String,
-    min: [String, Date, Number, dayjs.Dayjs],
-    max: [String, Date, Number, dayjs.Dayjs],
+    min: [String, Date, Number, dayjs],
+    max: [String, Date, Number, dayjs],
     disabledDate: Function,
 };
 

package/components/dialog/styles.ts

@@ -52,8 +52,8 @@ const defaults = {
         padding: `0 24px`,
         bodyMarginTop: `-25px`,
         tipIconMarginBottom: '10px',
-        tipIconFontSize: '24px',
-        tipIconLineHeight: '24px',
+        tipIconFontSize: '40px',
+        tipIconLineHeight: '40px',
 
         // with title
         titleFontWeight: '500',

package/components/dropdown/useKeyboard.ts

@@ -140,6 +140,7 @@ export function useMenuKeyboard() {
         const item = items[focusIndex];
 
         if (focusIndex > -1 && item) {
+            // TODO(find bug)
             itemEvents.get(item)!.onFocusout();
             focusIndex = -1;
         }
@@ -203,6 +204,8 @@ export function useItemKeyboard(itemEvents: Omit<ItemEvents, 'onFocusin' | 'onFo
         onMouseLeave(e: MouseEvent) {
             instance.trigger('mouseleave', e);
             keyboard.reset();
+            // If it is a virtual item, it needs to be reset manually because the DOM is reused.
+            isFocus.set(false);
         },
 
         isFocus,

package/components/layout/styles.ts

@@ -123,6 +123,7 @@ export const makeAsideStyles = cache(function makeAsideStyles(k: string) {
         }
         .${k}-menu {
             width: auto !important;
+            border-right: none !important;
         }
     `
 });

package/components/select/base.ts

@@ -42,6 +42,7 @@ export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach =
     flat?: boolean
     nowrap?: boolean
     draggable?: boolean
+    virtual?: boolean
 }
 
 export interface BaseSelectEvents {
@@ -78,6 +79,7 @@ const typeDefs: Required<TypeDefs<BaseSelectProps<any>>> = {
     flat: Boolean,
     nowrap: Boolean,
     draggable: Boolean,
+    virtual: Boolean,
 };
 
 const defaults = (): Partial<BaseSelectProps<any>> => ({

package/components/select/base.vdt

@@ -54,7 +54,6 @@ const filterInput = <Input v-if={filterable}
     readonly={!show}
     waveDisabled={true}
     flat={flat}
-    frozenOnInput
 />
 
 <ErrorContext.Consumer defaultValue={false}>
@@ -96,7 +95,6 @@ const filterInput = <Input v-if={filterable}
                                 readonly={!show}
                                 waveDisabled={true}
                                 flat={flat}
-                                frozenOnInput
                             />
                             <div class={`${k}-select-placeholder c-ellipsis`}
                                 v-else-if={!filterable && !hasValue}

package/components/select/demos/group.md

@@ -29,7 +29,7 @@ import {Select, Option, OptionGroup} from 'kpc';
             <Option value="Tuesday">星期二</Option>
             <Option value="Wednesday">星期三</Option>
             <Option value="Thursday">星期四</Option>
-            <Option value="Friday">星期五</Option>
+            <Option value="Friday">星期五</Option> 
         </OptionGroup>
         <OptionGroup>
             <b:label><i class="ion-wineglass"></i>休息日</b:label>

package/components/select/demos/virtual.md

@@ -0,0 +1,47 @@
+---
+title: 虚拟列表
+order: 14
+---
+
+`virtual`属性开启虚拟列表
+
+```vdt
+import {Select, Option} from 'kpc';
+
+<div>
+    <Select v-model="day" virtual>
+        <Option v-for={this.get('data')} value={$value.value}>
+            {$value.label}
+        </Option>
+    </Select>
+</div>
+```
+
+```ts
+interface Props {
+    day?: string | null
+    data: any[]
+}
+
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            day: null,
+            data: []
+        } as Props;
+    }
+
+    init() {
+        const arr = [];
+        for (let index = 0; index < 10000; index++) {
+            arr.push({
+                value: index,
+                label: `测试${index}`
+            });
+        }
+        this.set({data: arr});
+    }
+}
+```

package/components/select/group.vdt

@@ -1,8 +1,9 @@
 import {makeGroupStyles} from './styles';
 import {getRestProps} from '../utils';
+import { VirtualList } from '../virtualList';
 
 const {children, label, className} = this.get();
-const {card} = this.select.get();
+const {card, virtual} = this.select.get();
 const { k } = this.config;
 
 const classNameObj = {
@@ -15,5 +16,5 @@ const classNameObj = {
     <div class={`${k}-select-group-label`} v-if={!card}>
         <b:label>{label}</b:label>
     </div>
-    {children}
+    <VirtualList disabled={!virtual}>{children}</VirtualList>
 </div>

package/components/select/index.md

@@ -35,6 +35,7 @@ sidebar: doc
 | position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |
 | flat | 是否展示扁平样式 | `boolean` | `false` |
 | draggable | 多选值是否支持拖动排序 | `boolean` | `false` |
+| virtual | 是否开启虚拟列表 | `boolean` | `false` |
 
 ```ts
 type Position = {

package/components/select/menu.vdt

@@ -9,9 +9,10 @@ import {Button} from '../button';
 import {Icon} from '../icon';
 import {context} from './useSearchable';
 import {Tabs, Tab} from '../tabs';
+import { VirtualList } from '../virtualList';
 
 let {children, className} = this.get();
-const {card, searchable, multiple} = this.select.get();
+const {card, searchable, multiple, virtual} = this.select.get();
 const { k } = this.config;
 
 const classNameObj = {
@@ -38,14 +39,14 @@ if (card) {
             {group}
         </template>
     );
-}
-
-if (isEmptyChildren(children)) {
+} else if (isEmptyChildren(children)) {
     children = (
         <div v-else class={`${k}-select-empty`}>
             {_$('无数据')}
         </div>
     );
+} else {
+    children = <VirtualList style={{maxHeight: '200px'}} disabled={!virtual}>{children}</VirtualList>
 }
 
 if (searchable) {

package/components/select/select.vdt

@@ -1,7 +1,7 @@
 import {SelectMenu} from './menu';
 import {isEmptyChildren} from '../utils';
 
-const {className, children, autoDisableArrow, disabled, multiple, value} = this.get();
+const {className, children, autoDisableArrow, disabled, multiple, value, virtual} = this.get();
 const {getCreatedVNode, filter} = this.filterable;
 const options = filter(children);
 const allShowedValues = this.getAllShowedValues(options);

package/components/select/useFilterable.ts

@@ -22,7 +22,7 @@ export function useFilterable(keywords: State<string>) {
 
     function getCreatedVNode(children: (VNode | string | number)[]) {
         const {creatable, filterable} = component.get();
-        const _keywords = keywords.value;
+        const _keywords = keywords.value.trim();
         if (creatable && filterable && _keywords) {
             if (!children.find(vNode => {
                 // TODO: create Option for OptionGroup
@@ -66,7 +66,7 @@ export function useFilterable(keywords: State<string>) {
                         vNode.key = value;
                     }
 
-                    if (filter!(keywords.value, vNode.props)) {
+                    if (filter!(keywords.value.trim(), vNode.props)) {
                         _children.push(vNode);
                     }
                 } else if (isComponentVNode(vNode, OptionGroup)) {

package/components/select/useInput.ts

@@ -23,7 +23,12 @@ export function useInput(resetKeywords: (keywords: State<string>) => void) {
     const inputRef = createRef<Input>();
 
     function onInput(value: string) {
-        keywords.set(value.trim());
+        /**
+         * can not trim the keywords, otherwise we can not input spaces
+         * https://github.com/ksc-fe/kpc/issues/1047
+         */
+        // keywords.set(value.trim());
+        keywords.set(value);
 
         const dropdown = component.dropdownRef.value!;
         // the position may be flip, and the select input height may change height too,

package/components/table/demos/fixHeader.md

@@ -18,11 +18,9 @@ import {Table, TableColumn} from 'kpc';
     >
         <TableColumn key="a" title="100px" />
     </Table>
-    <Table
-        data={[{a: '表头固定啦'}, {a: '下拉'}, {a: 'yeah!'}]}
-        fixHeader="100" 
-    >
-        <TableColumn key="a" title="100px" />
+    <Table data={this.get('data')} fixHeader="300">
+        <TableColumn title="Name" key="name" fixed="left" />
+        <TableColumn title="IP" key="ip" />
     </Table>
 </div>
 ```
@@ -30,7 +28,29 @@ import {Table, TableColumn} from 'kpc';
 ```styl
 .wrapper
     display flex
+    align-items flex-start
 .k-table
     margin-left: 20px
     flex: 1
 ```
+
+```ts
+import {range, bind} from 'kpc/components/utils';
+
+const data =  range(1, 100).map(item => {
+    return {
+        name: 'name ' + item,
+        ip: '127.0.0.' + item
+    };
+});
+
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: data
+        }
+    }
+}
+```

package/components/table/demos/virtual.md

@@ -0,0 +1,105 @@
+---
+title: 虚拟表格
+order: 36
+---
+
+添加`virtual`属性，并且指定滚动元素的高度（通过`fixHeader`指定）即可开启虚拟滚动模式
+
+> 虚拟列表内部需要根据rowKey做缓存，不指定rowKey可能存在奇怪问题（默认rowKey为索引值）
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<div>
+    <h4>表格</h4>
+    <Table data={this.get('data')} virtual fixHeader="400">
+        <TableColumn key="a" title="Title 1" minWidth={200}/>
+        <TableColumn key="b" title="Title 2" minWidth={300} />
+    </Table>
+    <h4>树形表格</h4>
+    <Table ref="table" data={this.get('variableHeightData')} virtual rowKey={data => data.name} fixHeader="400">
+        <TableColumn key="name" title="Title 1" minWidth={200}/>
+        <TableColumn key="size" title="Title 2" minWidth={300} />
+    </Table>
+</div>
+```
+
+```styl
+.no-data-template
+    display: flex
+    gap: 10px
+.icon
+    vertical-align middle
+    margin-right 10px
+    cursor pointer
+.name
+    vertical-align middle
+.expand
+    padding 16px
+```
+```ts
+interface Props {
+    data: any[]
+    variableHeightData: any[]
+}
+import {range, bind} from 'kpc/components/utils';
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            data: [],
+            variableHeightData: []
+        } as Props;
+    }
+    init() {
+        const arr = [];
+        for (let index = 0; index < 10000; index++) {
+            arr.push({
+                a: `Cell ${index}-1`,
+                b: `Cell ${index}-2`
+            });
+        }
+        this.set({data: arr});
+
+        const generateTreeData = (count: number) => {
+            const result = [];
+            
+            for (let i = 0; i < count; i++) {
+                const hasChildren = Math.random() > 0.5;
+                const node: any = {
+                    name: `Node-${i}`,
+                    key: `node-${i}`,
+                    size: Math.floor(Math.random() * 100),
+                };
+
+                if (hasChildren) {
+                    node.children = Array.from({ length: 2 }, (_, j) => ({
+                        name: `Node-${i}-${j}`,
+                        key: `node-${i}-${j}`,
+                        size: Math.floor(Math.random() * 100),
+                        children: Math.random() > 0.5 ? [
+                            {
+                                name: `Node-${i}-${j}-0`,
+                                key: `node-${i}-${j}-0`,
+                                size: Math.floor(Math.random() * 100),
+                            }
+                        ] : undefined
+                    }));
+                }
+
+                result.push(node);
+            }
+
+            return result;
+        };
+
+        const data = generateTreeData(10000);
+        this.set({ variableHeightData: data });
+    }
+
+    @bind
+    scrollToRowByKey() {
+        this.refs.table.scrollToRowByKey('Node-400');
+    }
+}
+```

package/components/table/index.md

@@ -48,6 +48,7 @@ sidebar: doc
 | fixFooter | `table`给定需要固定高度时，自定义footer固定 | `boolean` | `false` |
 | load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | <code>(node: any) => Promise<void> &#124; void</code> | `undefined` |
 | spreadArrowIndex | 指定树形表格展开Icon的所在列，默认在第一列 | `number` | `0` |
+| virtual | 是否开启虚拟列表 | `boolean` | `false` |
 
 ```ts
 import {Props} from 'intact';

package/components/table/index.spec.ts

@@ -489,13 +489,14 @@ describe('Table', () => {
 
     it('tree', async () => {
         const [instance, element] = mount(TreeDemo);
-        const table = instance.$lastInput!.children as Table;
+        const table = (instance.$lastInput!.children as any)[0].children as Table;
 
         // check all
         const checkbox = element.querySelector('.k-checkbox') as HTMLElement;
         checkbox.click();
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
+        debugger;
         expect(table.getCheckedData()).to.have.lengthOf(8);
 
         const arrow = element.querySelector('.k-table-arrow') as HTMLElement;

package/components/table/row.ts

@@ -5,7 +5,8 @@ import {
     VNodeComponentClass,
     Props,
     Key,
-    IntactDom
+    IntactDom,
+    RefObject
 } from 'intact';
 import template from './row.vdt';
 import type {TableColumnProps} from './column';

package/components/table/styles.ts

@@ -401,6 +401,10 @@ export const makeStyles = cache(function makeStyles(k: string) {
                 bottom: 0;
             }
         }
+
+        .${k}-table-phantom {
+            position: static;
+        }
     `;
 });
 

package/components/table/table.ts

@@ -65,8 +65,9 @@ export interface TableProps<
     animation?: boolean | [boolean, boolean]
     hideHeader?: boolean
     pagination?: boolean | PaginationProps
-    fixFooter?: boolean
-    spreadArrowIndex?: number
+    fixFooter?: boolean 
+    virtual?: boolean
+    spreadArrowIndex?: number;
     load?: (value: T) => Promise<void> | void
 }
 
@@ -135,6 +136,7 @@ const typeDefs: Required<TypeDefs<TableProps<unknown>>> = {
     hideHeader: Boolean,
     pagination: [Boolean, Object],
     fixFooter: Boolean,
+    virtual: Boolean,
     spreadArrowIndex: Number,
     load: Function,
 };
@@ -254,9 +256,9 @@ export class Table<
             // we can not use scrollIntoView with smooth, because it can only operate one element
             // at the same time
             // elem.scrollIntoView({behavior: 'smooth'});
-            const headerHeight = (scrollElement.querySelector('thead') as HTMLElement).offsetHeight;
+            // const headerHeight = (scrollElement.querySelector('thead') as HTMLElement).offsetHeight;
             let scrollTop = scrollElement.scrollTop;
-            const offsetTop = tr.offsetTop - headerHeight;
+            const offsetTop = tr.offsetTop;
             const top = offsetTop - scrollTop;
             const topOneFrame = top / 60 / (100 / 1000);
             const step = () => {