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

package/components/tag/tags.vdt

@@ -0,0 +1,49 @@
+import { TransitionGroup } from 'intact';
+import { getRestProps } from '../utils';
+import { makeTagsStyles } from './styles';
+import { Tag } from './';
+import { Tooltip } from '../tooltip';
+import { Tags } from './tags';
+import { Virtual } from '../virtual';
+
+const { className, nowrap, size, border, draggable } = this.get();
+
+const classNameObj = {
+    'k-tags': true,
+    'k-nowrap': nowrap,
+    'k-draggable': draggable,
+    [makeTagsStyles()]: true,
+    [className]: className,
+}
+
+const { containerRef, children, hiddenChildren } = this.nowrap;
+const vNodes = children.value;
+
+/**
+ * We should always render Tooltip in nowrap mode, otherwise it will be removed while we close one tag.
+ * Because we will render all tags to calculate the width
+ */
+<div class={classNameObj} {...getRestProps(this)} ref={containerRef}>
+    <TransitionGroup name="k-fade" v-if={!nowrap}>
+        {vNodes}
+    </TransitionGroup>
+    <template v-else>{vNodes}</template>
+    <Tooltip
+        v-if={nowrap}
+        key="$tooltip"
+        hoverable
+        theme="light"
+        class="k-tags-tooltip"
+    >
+        <Tag key="$more"
+            class={{"k-tags-more": true, 'c-hidden': !hiddenChildren.value.length}}
+            size={size}
+            border={border}
+        >
+            +{hiddenChildren.value.length}
+        </Tag>
+        <b:content>
+            <div class={classNameObj}>{hiddenChildren.value}</div>
+        </b:content>
+    </Tooltip>
+</div>

package/components/tag/useChildren.ts

@@ -0,0 +1,42 @@
+import { VNode, useInstance } from 'intact';
+import type { Tags } from './tags';
+import { eachChildren, findChildren, isComponentVNode, ValidVNode } from '../utils';
+import { isStringOrNumber } from 'intact-shared';
+import { useState } from '../../hooks/useState';
+import { Tag } from './';
+import { Dropdown } from '../dropdown';
+import { Tooltip } from '../tooltip';
+
+export function useChildren() {
+    const instance = useInstance() as Tags;
+    const children = useState<VNode[]>([]);
+
+    instance.watch('children', (v) => {
+        const vNodes: VNode[] = [];
+        eachChildren(v, (vNode) => {
+            if (isTagOrContainsTag(vNode)) {
+                vNodes.push(vNode);
+            }
+        })
+        children.set(vNodes);
+    });
+
+    return children;
+}
+
+function isTagOrContainsTag(vNode: ValidVNode): vNode is VNode {
+    if (isStringOrNumber(vNode)) return false;
+
+    if (isComponentVNode(vNode, Tag)) {
+        return true;
+    }
+
+    if (isComponentVNode(vNode, Dropdown) || isComponentVNode(vNode, Tooltip)) {
+        return !!findChildren(vNode.props?.children, (vNode) => {
+            return isTagOrContainsTag(vNode);
+        });
+    }
+
+    return false;
+}
+

package/components/tag/useDraggable.ts

@@ -0,0 +1,97 @@
+import {
+    VNode,
+    useInstance,
+    findDomFromVNode,
+    createVNode as h,
+    Key,
+} from 'intact';
+import type { Tags } from './tags';
+import { nextFrame, debounce, swap } from '../utils';
+import { useState, watchState, State } from '../../hooks/useState';
+import { Virtual } from '../virtual';
+import { cx } from '@emotion/css';
+
+export function useDraggable(originVNodes: State<VNode[]>) {
+    const instance = useInstance() as Tags;
+    const children = useState<VNode[]>([]);
+    const draggingKey = useState<Key | null>(null);
+
+    let draggingIndex: number = -1;
+    let originIndex: number = -1;
+    let lastOverIndex: number = -1; /* let the dragover event only trigger once when tags changed order */
+
+    watchState(originVNodes, render);
+    watchState(draggingKey, render);
+
+    function render() {
+        const { draggable } = instance.get();
+        children.set(!draggable ? originVNodes.value : originVNodes.value.map((vNode, index) => {
+            const key = vNode.key!;
+            return h(Virtual, {
+                'ev-dragstart': () => onStart(key, index),
+                'ev-dragover': (e: MouseEvent) => onOver(e, key, index),
+                'ev-dragend': (e: MouseEvent) => onEnd(e),
+                key,
+                draggable, 
+                className: cx({
+                    'k-dragging': key === draggingKey.value, 
+                    'k-draggable': draggable,
+                })
+            }, vNode); 
+        }));
+
+    }
+
+    function onStart(key: Key, index: number) {
+        draggingIndex = originIndex = index;
+        nextFrame(() => {
+            draggingKey.set(key); 
+        });
+
+        instance.trigger('dragstart', {
+            key,
+            from: index,
+        });
+    }
+
+    function onOver(e: MouseEvent, key: Key, index: number) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Dragging the tag of another tags drag to this tags should be ignored
+        if (draggingIndex === -1) return;
+
+        if (lastOverIndex === index) return;
+        lastOverIndex = index;
+
+        if (index === draggingIndex) return;
+
+        // if the tag has move transition, you cannot drag over it before transition ended.
+        const dom = findDomFromVNode(children.value[index], true) as HTMLElement;
+        if (dom.classList.contains('k-fade-move')) return;
+
+        const vNodes = swap(originVNodes.value, draggingIndex, index);
+
+        lastOverIndex = draggingIndex;
+        draggingIndex = index;
+
+        originVNodes.set(vNodes);
+    }
+
+    function onEnd(e: MouseEvent) {
+        e.preventDefault();
+
+        instance.trigger('dragend', {
+            key: draggingKey.value!,
+            from: originIndex,
+            to: draggingIndex,
+        });
+
+        draggingKey.set(null);
+        lastOverIndex = -1;
+        draggingIndex = -1;
+        originIndex = -1;
+    }
+
+    return children;
+}

package/components/tag/useNowrap.ts

@@ -0,0 +1,117 @@
+import {
+    NonNullableRefObject,
+    VNodeComponentClass,
+    VNode,
+    useInstance,
+    createRef,
+    findDomFromVNode,
+    onBeforeMount,
+    nextTick,
+} from 'intact';
+import type { Tags } from './tags';
+import { useState, State, watchState } from '../../hooks/useState';
+import { tag as tagStyles } from './styles';
+import { getLeft, getRight } from '../../styles/utils';
+import { useReceive } from '../../hooks/useReceive';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+
+export function useNowrap(originVNodes: State<VNode[]>) {
+    const instance = useInstance() as Tags;
+    const containerRef = createRef<HTMLDivElement>();
+    const children = useState<VNode[]>([]);
+    const hiddenChildren = useState<VNode[]>([]);
+    const estimateMoreElementWidth = useEstimateMoreElementWidth();
+    const offsetMap = useChildrenOffset(originVNodes);
+
+    watchState(originVNodes, (v) => {
+        children.set(v);
+        nextTick(refresh);
+    });
+
+    // instance.watch('children', refresh, { presented: true })
+    useResizeObserver(containerRef, refresh);
+
+    function refresh() {
+        if (!instance.get('nowrap')) return;
+
+        const container = containerRef.value!;
+        const containerWidth = container.offsetWidth;
+        const vNodes: VNode[] = [];
+        const _originVNodes = originVNodes.value;
+        const length = _originVNodes.length;
+
+        if (_originVNodes.length > 1) {
+            _originVNodes.forEach((vNode, index) => {
+                const offset = offsetMap.get(vNode)!;
+                // estimate the "more" element's with for performance
+                const width = estimateMoreElementWidth(length - index - 1);
+
+                if (offset + width <= containerWidth) {
+                    vNodes.push(vNode);
+                }
+            });
+        } else {
+            vNodes.push(..._originVNodes);
+        }
+
+        /**
+         * refresh function will be called in ResizeObserver,
+         * state changed will cause container's width to change,
+         * and a error will throw (ResizeObserver loop completed with undelivered notifications)
+         * so we call setState in requestAnimationFrame
+         */
+        requestAnimationFrame(() => {
+            hiddenChildren.set(_originVNodes.slice(vNodes.length))
+            children.set(vNodes);
+        });
+    }
+
+    return { containerRef, children, hiddenChildren }
+}
+
+function useChildrenOffset(vNodes: State<VNode[]>) {
+    const instance = useInstance() as Tags;
+    const map: Map<VNode, number> = new Map();
+
+    // instance.watch('children', updateMap, { presented: true })
+    watchState(vNodes, () => nextTick(updateMap));
+
+    function updateMap() {
+        map.clear();
+
+        if (!instance.get('nowrap')) return;
+
+        vNodes.value.forEach((vNode) => {
+            const dom = findDomFromVNode(vNode, true);
+            if (!dom || dom.nodeType !== 1) return;
+
+            const { offsetLeft, offsetWidth } = dom as HTMLElement;
+
+            map.set(vNode, offsetLeft + offsetWidth);
+        });
+    }
+
+    return map;
+}
+
+function useEstimateMoreElementWidth() {
+    const instance = useInstance() as Tags;
+    const widthPerChar = 7.2;
+    let cacheWidth = 0;
+
+    onBeforeMount(cache);
+    useReceive<Tags>(['size', 'border'], cache, true);
+
+    function cache() {
+        const { size, border } = instance.get();
+
+        cacheWidth = parseInt(tagStyles.tags.gap) + widthPerChar /* the "+" mark */;
+        if (border !== 'none') {
+            cacheWidth += 2;
+        }
+        const padding = size === 'default' ? tagStyles.padding : tagStyles[size!].padding;
+        cacheWidth += parseInt(getLeft(padding)) + parseInt(getRight(padding));
+    }
+
+    return (count: number) => Math.round(count.toString().length * widthPerChar + cacheWidth);
+}

package/components/timepicker/index.md

@@ -30,6 +30,8 @@ sidebar: doc
 | disabledDate | 该属性值是一个函数，用于定义那些日期被禁止选择，函数参数为日期字符串，返回`true`则表示禁用该日期 | `(v: Dayjs) => boolean` | `undefined` |
 | step | 固定时间点的步长 | `string` | `undefined` |
 | position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |
+| flat | 是否展示扁平样式 | `boolean` | `false` |
+| draggable | 多选值是否支持拖动排序 | `boolean` | `false` |
 
 ```ts
 import {Dayjs} from 'dayjs';

package/components/timepicker/index.spec.ts

@@ -59,7 +59,7 @@ describe('Timepicker', () => {
         await wait();
         expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']);
         // remove one value
-        const [, close] = picker2.querySelectorAll<HTMLElement>('.k-select-close');
+        const [, close] = picker2.querySelectorAll<HTMLElement>('.k-tag-close');
         close.click();
         await wait();
         expect(instance.get('timeArray')).to.eql(['01:00:00']);

package/components/tip/index.vdt

@@ -26,9 +26,7 @@ const classNameObj = {
         >
             <template>
                 <b:close>
-                    <Icon class="ion-ios-close-empty"
-                        size="large"
-                        color={type}
+                    <Icon class="k-icon-close"
                         hoverable={!disabled}
                     />
                 </b:close>

package/components/tip/styles.ts

@@ -6,9 +6,10 @@ import {deepDefaults}  from '../../styles/utils';
 const defaults = {
     title: {
         fontSize: '14px',
-        gap: '8px'
+        gap: '8px',
+        fontWeight: '500'
     },
-    get color() { return theme.color.text },
+    get color() { return theme.color.title },
     get padding() { return `6px ${theme.default.padding}` },
 };
 
@@ -35,10 +36,15 @@ export function makeStyles() {
         .k-tip-title {
             font-size: ${tip.title.fontSize};
             margin-bottom: ${tip.title.gap};
+            font-weight: ${tip.title.fontWeight}
         }
 
         &.k-fade-leave-active {
             position: relative;
         }
+
+        .k-tip-close:hover {
+            background: none;
+        }
     `;
 }

package/components/tooltip/content.ts

@@ -17,14 +17,14 @@ export interface TooltipContentBlocks extends DropdownMenuBlocks {
     buttons: null
 }
 
-export class TooltipContent extends DropdownMenu<
-    TooltipContentProps,
-    TooltipContentEvents,
-    TooltipContentBlocks
-> {
+export class TooltipContent<
+    T extends TooltipContentProps = TooltipContentProps,
+    E extends TooltipContentEvents = TooltipContentEvents,
+    B extends TooltipContentBlocks = TooltipContentBlocks,
+> extends DropdownMenu<T, E, B> {
     static template = template;
 
-    private isEmptyChildren: boolean = true;
+    protected isEmptyChildren: boolean = true;
     private arrow = useArrow();
 
     init() {

package/components/tooltip/content.vdt

@@ -18,6 +18,7 @@ const classNameObj = {
     [`k-${size}`]: size !== 'default',
     [className]: className,
     [makeStyles()]: true,
+    [$props.className]: $props.className,
 };
 
 <t:super
@@ -31,7 +32,13 @@ const classNameObj = {
     class={classNameObj}
 >
     <b:children>
-        {children}
+        <b:body>{children}</b:body>
+        <div class="k-tooltip-footer" v-if={confirm} key="tooltip-footer">
+            <b:footer>
+                <Button ev-click={this.cancel} size="small">{cancelText}</Button>
+                <Button type="primary" ev-click={this.ok} size="small">{okText}</Button>
+            </b:footer>
+        </div>
         <i v-if={showArrow}
             key="tooltip-arrow"
             class={{
@@ -40,11 +47,5 @@ const classNameObj = {
             }}
             ref={arrowRef}
         ></i>
-        <div class="k-tooltip-buttons" v-if={confirm} key="tooltip-buttons">
-            <b:buttons>
-                <Button type="primary" ev-click={this.ok} size="small">{okText}</Button>
-                <Button ev-click={this.cancel} size="small">{cancelText}</Button>
-            </b:buttons>
-        </div>
     </b:children>
 </t:super>

package/components/tooltip/index.md

@@ -10,26 +10,23 @@ sidebar: doc
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"focus"` | `"hover"` |
-| disabled | 是否禁用整个菜单 | `boolean` | `false` |
+| disabled | 是否禁用提示 | `boolean` | `false` |
 | value | 是否将弹出菜单展示出来，可通过`v-model`双向绑定 | `boolean` | `false` |
 | position | 菜单弹出的位置，默认在触发器正上方向上偏移`10px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` |
 | of | 弹出菜单的位置是相对当前触发元素，还是触发元素所在的菜单元素，这在嵌套菜单中可能会用到，可以使所有子菜单保持统一的对齐方式，例如：级联选择（Cascader）组件 | `"self"` | `"parent"` | `Event` | `"self"` |
-| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个 DOM 用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
 | showArrow | 弹层是否展示箭头 | `boolean` | `true` |
 | theme | 指定主题 | `"dark"` | `"light"` | `"dark"` |
 | hoverable | 对于悬浮触发`hover`的方式，提示内容弹层是否在鼠标悬浮时仍然展示，默认鼠标离开触发元素弹层就会关闭 | `boolean` | `false` |
 | always | 是否一直保持当前展示/隐藏状态 | `boolean` | `false` |
 | size | 弹层尺寸 | `"default"` | `"small"` | `"default"` |
-| confirm | 带“确认”和“取消”按钮的确认弹层 | `boolean` | `false` |
-| okText | `confirm`模式下的“确认”按钮文案 | `string` | `"确认"` |
-| cancelText | `confirm`模式下的“取消”按钮文案 | `string` | `"取消"` |
 | content | 指定提示的内容，当然你也可以用`content`扩展点指定 | `string` | `VNode` | `undefined` |
 
 ```ts
 type Position = {
     my?: string | [string, string]
     at?: string | [string, string]
-    collision?: Collision | [Collision, Collision] 
+    collision?: Collision | [Collision, Collision]
     collisionDirection?: ['left'] | ['top'] | ['left', 'top']
 }
 

package/components/tooltip/index.spec.ts

@@ -3,7 +3,6 @@ import BasicDemo from '~/components/tooltip/demos/basic';
 import PositionDemo from '~/components/tooltip/demos/position';
 import TriggerDemo from '~/components/tooltip/demos/trigger';
 import ContentDemo from '~/components/tooltip/demos/content';
-import ConfirmDemo from '~/components/tooltip/demos/confirm';
 import AlwaysDemo from '~/components/tooltip/demos/always';
 import {Tooltip} from './';
 import {Dialog} from '../dialog';
@@ -58,7 +57,7 @@ describe('Tooltip', () => {
             expect(a >= b - 1 && a <= b + 1).to.be.true;
         };
 
-        
+
         instance.set('position', 'left');
         await wait();
         contains('k-right');
@@ -137,7 +136,7 @@ describe('Tooltip', () => {
         await wait(500);
         const content1 = getElement('.k-tooltip-content');
 
-        //  should not hide when move mouse from button to tooltip content    
+        //  should not hide when move mouse from button to tooltip content
         expect(content1).eql(content);
 
         dispatchEvent(canHover, 'mouseleave');
@@ -156,35 +155,6 @@ describe('Tooltip', () => {
         expect(content.querySelector<HTMLElement>('.k-slider')!.outerHTML).to.matchSnapshot();
     });
 
-    it('should handle confirm tooltip corectly', async () => {
-        const [instance, element] = mount(ConfirmDemo);
-
-        const cancelCb = sinon.spy();
-        const okCb = sinon.spy();
-
-        instance.refs.__test.on('cancel', cancelCb);
-        instance.refs.__test.on('ok', okCb);
-
-        dispatchEvent(element.children[0], 'click');
-        await wait();
-        let content = getElement('.k-tooltip-content')!;
-        expect((content.querySelector('.k-tooltip-buttons') as HTMLElement).outerHTML).to.matchSnapshot();
-
-        (content.querySelector('.k-btn') as HTMLElement).click();
-        await wait(500);
-        expect(content.style.display).eql('none');
-
-        dispatchEvent(element.firstElementChild!, 'click');
-        await wait();
-        content = getElement('.k-tooltip-content')!;
-        const [, btn] = Array.from<HTMLElement>(content.querySelectorAll('.k-btn'));
-        btn.click();
-
-        await wait(500);
-        expect(content.style.display).eql('none');
-        expect(cancelCb.callCount).eql(1);
-        expect(okCb.callCount).eql(1);
-    });
 
     it('should always show tooltip', async () => {
         const [, element] = mount(AlwaysDemo);
@@ -230,7 +200,7 @@ describe('Tooltip', () => {
 
     //     const app = new Vue({
     //         render: h => h(
-    //             'Test', 
+    //             'Test',
     //             {ref: 'test'}),
     //         components: {Test},
     //     }).$mount(container);
@@ -265,7 +235,7 @@ describe('Tooltip', () => {
     //             </div>
     //         `,
     //         components: {
-    //             Tooltip:  Tooltip as any, 
+    //             Tooltip:  Tooltip as any,
     //             Radio: Radio as any,
     //         },
     //         data: {
@@ -381,8 +351,8 @@ describe('Tooltip', () => {
         class Demo extends Component {
             static template = `
                 const {Tooltip, Dialog} = this;
-                <div style="text-align: right; position: relative; width: 300px;">
-                    <Tooltip content="这是一段很长的描述文字，这是一段很长的描述文字" container={dom => dom}>
+                <div style="text-align: right; position: relative; width: 350px;">
+                    <Tooltip content="这是一段很长的描述文字，这是一段很长的描述文字，这是一段很长的描述文字" container={dom => dom}>
                         <span class="trigger">test</span>
                     </Tooltip>
                 </div>

package/components/tooltip/styles.ts

@@ -8,12 +8,13 @@ const defaults = {
     get color() { return theme.color.text },
     bgColor: '#fff',
     lineHeight: 1.4,
-    maxWidth: '300px',
+    maxWidth: '312px',
+    get boxShadow() { return theme.middleBoxShadow },
 
     // arrow
     arrow: {
-        borderColor: 'rgba(191, 191, 191, .5)',
-        width: '8px',
+        borderColor: 'rgba(221, 221, 221, .5)',
+        width: '6px',
     },
 
     // confirm
@@ -23,9 +24,9 @@ const defaults = {
 
     // dark
     dark: {
-        get bgColor() { return theme.color.text },
+        get bgColor() { return theme.color.title },
         color: '#fff',
-        get arrowBorderColor() { return theme.color.text },
+        get arrowBorderColor() { return theme.color.title },
     },
 
     smallPadding: '4px',
@@ -48,7 +49,7 @@ const directionMap = {
 
 export default function makeStyles() {
     const arrowLong = tooltip.arrow.width;
-    const arrowShort = `calc(${arrowLong} - 2px)`;
+    const arrowShort = `calc(${arrowLong} - 1px)`;
 
     // use &.k-tooltip-content to override css in dropdown menu
     return css`
@@ -59,6 +60,7 @@ export default function makeStyles() {
             line-height: ${tooltip.lineHeight};
             word-wrap: break-word;
             pointer-events: none;
+            box-shadow: ${tooltip.boxShadow};
 
             // hoverable
             &.k-hoverable,
@@ -159,9 +161,9 @@ export default function makeStyles() {
             })}
 
             // confirm
-            .k-tooltip-buttons {
+            .k-tooltip-footer {
                 padding-top: ${tooltip.confirm.gaps};
-                .k-btn:last-of-type {
+                .k-btn:not(:first-of-type) {
                     margin-left: ${tooltip.confirm.gaps};
                 }
             }

package/components/transfer/index.vdt

@@ -12,7 +12,7 @@ const {
 } = this.get();
 const {getShowedData} = this.filter;
 const {enableAdd, enableRemove, add, remove} = this.transfer;
-const {isCheckAll, toggleCheckAll, onCheckboxChange} = this.check;
+const {isCheckAll, toggleCheckAll, onCheckboxChange, isIndeterminate} = this.check;
 
 const classNameObj = {
     'k-transfer': true,
@@ -33,6 +33,7 @@ const Panel = (model) => {
                 </div>
                 <Checkbox class="c-ellipsis" 
                     value={isCheckAll(model)}
+                    indeterminate={isIndeterminate(model)}
                     ev-click={toggleCheckAll.bind(null, model)}
                 >{title}</Checkbox>
             </b:header>
@@ -94,4 +95,4 @@ const Panel = (model) => {
         </Button>
     </div>
     {Panel('right')}
-</div>
+</div>

package/components/transfer/styles.ts

@@ -58,6 +58,7 @@ export function makeStyles() {
             height: ${transfer.panel.height};
             display: inline-flex;
             flex-direction: column;
+            overflow: auto;
         }
 
         .k-transfer-title {

package/components/transfer/useCheck.ts

@@ -25,7 +25,6 @@ export function useCheck({getEnabledData, getShowedData}: ReturnType<typeof useF
 
         return data.length && checked.length >= data.length;
     }
-
     function toggleCheckAll(model: Model, e: MouseEvent) {
         if ((e.target as HTMLInputElement).checked) {
             selectAll(model);
@@ -34,6 +33,13 @@ export function useCheck({getEnabledData, getShowedData}: ReturnType<typeof useF
         }
     }
 
+    function isIndeterminate(model: Model) {
+      const checked = instance.get(`${model}CheckedKeys` as CheckedKeys)!;
+      const data = getEnabledData(model);
+      
+      return checked.length > 0 && checked.length < data.length;
+    }
+
     function onCheckboxChange(model: Model, index: number, e: MouseEvent) {
         if (startIndex === undefined || !e.shiftKey) {
             startIndex = index;
@@ -91,6 +97,7 @@ export function useCheck({getEnabledData, getShowedData}: ReturnType<typeof useF
     return {
         isCheckAll,
         toggleCheckAll,
-        onCheckboxChange
+        onCheckboxChange,
+        isIndeterminate
     };
 }

package/components/treeSelect/index.md

@@ -34,6 +34,8 @@ sidebar: doc
 | filter | 当支持筛选时，可以自定义筛选规则 | `(keywords: string, data: TreeDataItem<K>) => boolean` | `undefined` |
 | show | 是否展示菜单项 | `boolean` | `false` |
 | position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` &#124; `"left"` &#124; `"bottom"` &#124; `"right"` &#124; `"top"` | `{my: 'left top+8', 'left bottom'}` |
+| flat | 是否展示扁平样式 | `boolean` | `false` |
+| draggable | 多选值是否支持拖动排序 | `boolean` | `false` |
 
 ```ts
 import {Key, Children} from 'intact';