@king-design/intact 3.5.1 → 3.6.0-beta.0

package/components/tour/tour.ts

@@ -0,0 +1,107 @@
+import {
+    Component,
+    TypeDefs,
+    VNode,
+    createRef,
+    onMounted,
+    onUpdated,
+    nextTick
+} from "intact";
+import template from "./tour.vdt";
+import { useConfigContext } from '../config';
+import { TourStepProps } from './step';
+import type {Events} from '../types';
+import { createContext } from '../context';
+import { usePosition } from './usePosition';
+import { Feedback } from '../position';
+import { useSteps } from './useSteps';
+import { useArrow } from './useArrow';
+import { useHighlight } from './useHighlight';
+import { useNavigation } from './useNavigation';
+import { useFixBody } from './useFixBody';
+import { useMaskClosable } from './useMaskClosable';
+import {Theme, themes} from './styles';
+
+export interface TourProps {
+    value?: number;
+    theme?: Theme
+    data?: TourStepProps[];
+    beforeChange?: (current: number) => boolean | Promise<boolean>;
+    maskClosable?: boolean;
+    closable?: boolean;
+    doneText?: string;
+    showArrow?: boolean;
+    visible?: boolean;
+}
+
+export interface TourEvents {
+    finish: [];
+    prev: [number];
+    next: [number];
+    positioned: [Feedback];
+}
+
+export interface TourBlocks {
+    default: null;
+}
+
+export interface TourContextValue {
+    value: number;
+    total: number;
+    doneText: string;
+    closable: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+    onFinish: () => void;
+}
+
+export const TourContext = createContext<TourContextValue>();
+
+const typeDefs: Required<TypeDefs<TourProps>> = {
+    value: Number,
+    theme: themes,
+    data: Array,
+    beforeChange: Function,
+    maskClosable: Boolean,
+    closable: Boolean,
+    doneText: String,
+    showArrow: Boolean,
+    visible: Boolean,
+};
+
+const defaults = (): Partial<TourProps> => ({
+    value: 0,
+    theme: 'light',
+    data: [],
+    maskClosable: true,
+    closable: true,
+    doneText: '完成',
+    showArrow: true,
+    visible: true,
+});
+
+const events: Events<TourEvents> = {
+    finish: true,
+    prev: true,
+    next: true,
+    positioned: true,
+};
+
+export class Tour extends Component<TourProps, TourEvents, TourBlocks> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+    static events = events;
+
+    public config = useConfigContext();
+    public tourRef = createRef<HTMLDivElement>();
+    
+    public steps = useSteps();
+    public arrow = useArrow();
+    public highlight = useHighlight(this.steps.getTargetElement);
+    private position = usePosition(this.tourRef, this.steps.getTargetElement);
+    public navigation = useNavigation(this.steps.getTotalSteps);
+    private fixBody = useFixBody();
+    private useMaskClosable = useMaskClosable();
+    
+} 

package/components/tour/tour.vdt

@@ -0,0 +1,83 @@
+import {makeStyles} from './styles';
+import {TourStep} from './step';
+import {TourContext} from './tour';
+import {getRestProps, stopPropagation} from '../utils';
+import {mapChildren, isComponentVNode} from '../utils';
+
+const { className, data, children, value, hoverable,
+    showArrow, theme, visible, maskClosable,
+    doneText, closable,
+} = this.get();
+const { k } = this.config;
+
+const currentValue = value !== undefined ? value : 0;
+const {arrowType, arrowRef} = this.arrow;
+const {highlightRef} = this.highlight;
+const {prev, next, finish} = this.navigation;
+const {getTotalSteps} = this.steps;
+
+const contextValue = {
+    value: value || 0,
+    total: getTotalSteps(),
+    doneText: doneText,
+    closable: closable,
+    onPrev: prev,
+    onNext: next,
+    onFinish: finish
+}
+
+const classNameObj = {
+    [`${k}-tour`]: true,
+    [`${k}-${theme}`]: true,
+    [className]: className,
+    [makeStyles(k)]: true,
+};
+
+<div class={classNameObj} {...getRestProps(this)} v-if={visible}>
+    <TourContext.Provider value={contextValue}>
+        {/* 高亮目标元素 */}
+        <div 
+            class={{
+                [`${k}-tour-target-highlight`]: true,
+                [`${k}-hoverable`]: hoverable
+            }}
+            v-if={currentValue !== undefined} 
+            ref={highlightRef}
+        ></div>
+        
+        {/* 步骤内容 */}
+        <div
+            class={`${k}-tour-step-wrapper`} 
+            ref={this.tourRef}
+            ev-click={stopPropagation}
+        >
+            <template v-if={!children}>
+                <TourStep 
+                    v-for={data} 
+                    v-if={$key === currentValue}
+                    key={$key}
+                    {...$value}
+                />
+            </template>
+            <template v-else>
+                {mapChildren(children, (vNode, index) => {
+                    if (isComponentVNode(vNode, TourStep)) {
+                        if (index === currentValue) {
+                            return vNode;
+                        }
+                    }
+                    return null;
+                })}
+            </template>
+            
+            {/* 箭头 */}
+            <i v-if={showArrow && arrowType.value}
+                class={{
+                    [`${k}-tour-arrow`]: true,
+                    [`${k}-${arrowType.value}`]: arrowType.value,
+                }}
+                ref={arrowRef}
+            ></i>
+        </div>
+    </TourContext.Provider>
+</div>

package/components/tour/useArrow.ts

@@ -0,0 +1,46 @@
+import {useInstance, createRef, nextTick} from 'intact';
+import { Tour } from './tour';
+import {Feedback} from '../position';
+import {useState} from '../../hooks/useState';
+import {clamp} from '../utils';
+
+export function useArrow() {
+    const instance = useInstance() as Tour;
+    const arrowType = useState<string | null>(null);
+    const arrowRef = createRef<HTMLElement>();
+
+    // 监听positioned事件
+    instance.on('positioned', (feedback: Feedback) => {
+        updateArrow(feedback);
+    });
+
+    // update arrow position and type
+    function updateArrow(feedback: Feedback) {
+        if (!instance.get('showArrow')) return;
+
+        arrowType.set(feedback[feedback.important]);
+        
+        nextTick(() => {
+            if (instance.$unmounted) return;
+
+            const arrow = arrowRef.value!;
+            const {target, element} = feedback;
+            
+            if (feedback.important === 'vertical') {
+                // vertical important, adjust horizontal position
+                const arrowWidth = arrow.offsetWidth;
+                let left = target.left - element.left + (target.width - arrowWidth) / 2;
+                left = clamp(left, 1, element.width - 1 - arrowWidth);
+                arrow.setAttribute('style', `left: ${left}px`);
+            } else {
+                // horizontal important, adjust vertical position
+                const arrowHeight = arrow.offsetHeight;
+                let top = target.top - element.top + target.height / 2 - arrowHeight / 2;
+                top = clamp(top, 1, element.height - 1 - arrowHeight);
+                arrow.setAttribute('style', `top: ${top}px`);
+            }
+        });
+    }
+
+    return {arrowType, arrowRef};
+} 

package/components/tour/useFixBody.ts

@@ -0,0 +1,22 @@
+import {useInstance} from 'intact';
+import type {Tour} from './tour';
+import {useFixBody as useFixBodyHook} from '../../hooks/useFixBody';
+
+export function useFixBody() {
+    const instance = useInstance() as Tour;
+    
+    const fixBodyHook = useFixBodyHook();
+
+    instance.watch('visible', (visible) => {
+        if (visible) {
+            fixBodyHook.onOpen();
+        } else {
+            fixBodyHook.onClose();
+        }
+    });
+
+    return {
+        onOpen: fixBodyHook.onOpen,
+        onClosed: fixBodyHook.onClose
+    };
+}

package/components/tour/useHighlight.ts

@@ -0,0 +1,36 @@
+import {useInstance, createRef, nextTick} from 'intact';
+import { Tour } from './tour';
+
+export function useHighlight(getTargetElement: (index?: number) => HTMLElement | null,) {
+    const instance = useInstance() as Tour;
+    const highlightRef = createRef<HTMLElement>();
+
+    instance.on('$updated' as any, updateHighlight);
+        
+    instance.watch('visible', (visible) => {
+        if (visible) {
+            nextTick(() => {
+                updateHighlight();
+            });
+        }
+    });
+    
+    // update highlight element position and size
+    function updateHighlight() {
+        const highlightElem = highlightRef.value;
+        const targetElem = getTargetElement();
+        
+        if (highlightElem && targetElem) {
+            const rect = targetElem.getBoundingClientRect();
+            const padding = 8;
+            
+            highlightElem.style.width = `${rect.width + padding * 2}px`;
+            highlightElem.style.height = `${rect.height + padding * 2}px`;
+            highlightElem.style.position = 'fixed';
+            highlightElem.style.left = `${rect.left - padding}px`;
+            highlightElem.style.top = `${rect.top - padding}px`;
+        }
+    }
+
+    return {highlightRef, updateHighlight};
+} 

package/components/tour/useMaskClosable.ts

@@ -0,0 +1,26 @@
+import { useInstance } from "intact";
+import { useDocumentClick } from "../../hooks/useDocumentClick";
+import type {Tour} from './tour';
+
+export function useMaskClosable() {
+    const tour = useInstance() as Tour;
+    const [addDocumentClick, removeDocumentClick] = useDocumentClick(tour.tourRef, (e) => {
+        const maskClosable = tour.get('maskClosable');
+        if (maskClosable) {
+            // 检查点击的是否是当前目标元素或其子元素
+            const targetElement = tour.steps.getTargetElement();
+            if (targetElement && (e.target === targetElement || targetElement.contains(e.target as Node))) {
+                return; // 点击的是目标元素，不关闭
+            }
+            tour.navigation.finish();
+        }
+    }, true);
+
+    tour.watch('visible', (visible: boolean | undefined) => {
+        if (visible) {
+            addDocumentClick();
+        } else {
+            removeDocumentClick();
+        }
+    });
+}

package/components/tour/useNavigation.ts

@@ -0,0 +1,46 @@
+import {useInstance, createRef, nextTick} from 'intact';
+import { Tour } from './tour';
+
+export function useNavigation(getTotalSteps: () => number) {
+    const instance = useInstance() as Tour;
+    
+    async function prev() {
+        const { value, beforeChange } = instance.get();
+        if (value === undefined || value <= 0) return;
+
+        if (beforeChange) {
+            const canChange = await beforeChange(value - 1);
+            if (canChange === false) return;
+        }
+
+        instance.set('value', value - 1);
+        instance.trigger('prev', value - 1);
+    }
+
+    async function next() {
+        const { value, beforeChange } = instance.get();
+        if (value === undefined) return;
+
+        const steps = getTotalSteps();
+        
+        if (value >= steps - 1) {
+            finish();
+            return;
+        }
+
+        if (beforeChange) {
+            const canChange = await beforeChange(value + 1);
+            if (canChange === false) return;
+        }
+
+        instance.set('value', value + 1);
+        instance.trigger('next', value + 1);
+    }
+
+    function finish() {
+        instance.trigger('finish');
+        instance.set('visible', false);
+    }
+
+    return {prev, next, finish};
+} 

package/components/tour/usePosition.ts

@@ -0,0 +1,91 @@
+import { useInstance, RefObject, onMounted, nextTick } from 'intact';
+import type { Tour } from './tour';
+import { Options as PositionOptions, position, Feedback } from '../position';
+
+const CENTER_POSITION_OPTIONS: PositionOptions = {
+    my: 'center center',
+    at: 'center center',
+    collision: 'none'
+};
+
+export function usePosition(
+    stepRef: RefObject<HTMLDivElement>, 
+    getTargetElement: (index?: number) => HTMLElement | null
+) {
+    const instance = useInstance() as Tour;
+
+    instance.watch('value', (value) => {
+        if (value !== undefined && value >= 0) {
+            nextTick(() => updatePosition());
+        }
+    });
+
+    instance.watch('visible', (visible) => {
+        if (visible) {
+            updatePosition();
+        }
+    }, {presented: true});
+
+    onMounted(() => {
+        updatePosition();
+    });
+
+    // get position options
+    function getPositionOptions(index?: number): PositionOptions {
+        const currentIndex = index !== undefined ? index : (instance.get('value') || 0);
+        let positionConfig: PositionOptions | string | undefined;
+        
+        const { data } = instance.get();
+        if (data && data[currentIndex]) {
+            positionConfig = data[currentIndex].position;
+        }
+        
+        if (!positionConfig && instance.steps.steps[currentIndex]) {
+            positionConfig = instance.steps.steps[currentIndex].props?.position;
+        }
+
+        if (!positionConfig) {
+            positionConfig = 'bottom';
+        }
+
+        if (typeof positionConfig === 'string') {
+            switch (positionConfig) {
+                case 'left':
+                    return {my: 'right-20 center', at: 'left center', collision: 'flipfit'};
+                case 'bottom':
+                    return {my: 'center top+20', at: 'center bottom', collision: 'flipfit'};
+                case 'right':
+                    return {my: 'left+20 center', at: 'right center', collision: 'flipfit'};
+                case 'top':
+                default:
+                    return {my: 'center bottom-20', at: 'center top', collision: 'flipfit'};
+            }
+        }
+
+        return positionConfig;
+    }
+
+    // update position
+    function updatePosition() {
+        const stepElement = stepRef.value;
+        if (!stepElement) return;
+
+        const targetElement = getTargetElement();
+        
+        const positionOptions = targetElement ? getPositionOptions() : CENTER_POSITION_OPTIONS;
+        const ofElement = targetElement || window;
+        
+        position(stepElement, {
+            ...positionOptions,
+            of: ofElement,
+            using: (feedback, pos) => {
+                instance.trigger('positioned', feedback);
+            }
+        });
+    }
+
+    return {
+        getPositionOptions,
+        updatePosition
+    };
+} 

package/components/tour/useSteps.ts

@@ -0,0 +1,80 @@
+import { useInstance, onMounted } from 'intact';
+import type { Tour } from './tour';
+import type { TourStepProps } from './step';
+import { TourStep } from './step';
+import { isComponentVNode } from '../utils';
+
+export function useSteps() {
+    const instance = useInstance() as Tour;
+    const steps: any[] = [];
+    const targetElements = new Map<number, HTMLElement | null>();
+
+    instance.on('$receive:children' as any, collectSteps);
+
+    instance.watch('data', () => {
+        targetElements.clear();
+    });
+
+    /**
+     * 收集子组件步骤
+     */
+    function collectSteps(children: any) {
+        steps.length = 0;
+        if (!children) return;
+
+        const childrenArray = Array.isArray(children) ? children : [children];
+        childrenArray.forEach(child => {
+            if (child && isComponentVNode(child, TourStep)) {
+                steps.push(child);
+            }
+        });
+    }
+
+    function getTotalSteps(): number {
+        const { data, children } = instance.get();
+        if (children) {
+            return steps.length;
+        }
+        return (data || []).length;
+    }
+
+    // get current step target element
+    function getTargetElement(index?: number): HTMLElement | null {
+        const currentIndex = index !== undefined ? index : (instance.get('value') || 0);
+        if (targetElements.has(currentIndex)) {
+            return targetElements.get(currentIndex) || null;
+        }
+
+        let target: string | HTMLElement | undefined;
+        
+        // get target from data
+        const data = instance.get('data');
+        if (data && data[currentIndex]) {
+            target = data[currentIndex].target;
+        }
+        
+        // get target from children
+        if (!target && steps[currentIndex]) {
+            target = steps[currentIndex].props?.target;
+        }
+
+        if (!target) return null;
+
+        let element: HTMLElement | null = null;
+        if (typeof target === 'string') {
+            element = document.querySelector(target);
+        } else {
+            element = target;
+        }
+
+        targetElements.set(currentIndex, element);
+        return element;
+    }
+
+    return {
+        steps,
+        collectSteps,
+        getTotalSteps,
+        getTargetElement
+    };
+} 

package/components/tree/useChecked.ts

@@ -56,10 +56,12 @@ export function useChecked(getNodes: () => Node<Key>[]) {
             updateUpward(node);
         });
         
-        const oldCheckedKeys = instance.get('checkedKeys');
-        const newCheckedKeys = Array.from(checkedKeys);
-        if (!isEqualArray(oldCheckedKeys, newCheckedKeys)) {
-            instance.set('checkedKeys', newCheckedKeys);
+        if (instance.get('checkbox')) {
+            const oldCheckedKeys = instance.get('checkedKeys');
+            const newCheckedKeys = Array.from(checkedKeys);
+            if (!isEqualArray(oldCheckedKeys, newCheckedKeys)) {
+                instance.set('checkedKeys', newCheckedKeys);
+            }
         }
     }
 

package/components/treeSelect/index.spec.ts

@@ -18,10 +18,22 @@ describe('TreeSelect', () => {
         const dropdown = getElement('.k-tree-select-menu')!;
         expect(dropdown.innerHTML).to.matchSnapshot();
 
-        (dropdown.querySelector('.k-tree-text') as HTMLElement).click();
+        const texts = dropdown.querySelectorAll('.k-tree-text');
+        const text1 = texts[0] as HTMLElement;
+        const text111 = texts[2] as HTMLElement;
+        text1.click();
+        await wait();
         expect(instance.get('value')).to.eql('1');
 
         await wait(500);
+
+        element.click();
+        text111.click();
+        await wait();
+        expect(instance.get('value')).to.eql('1.1.1');
+
+        await wait(500);
+
         expect(getElement('.k-tree-select-menu')).to.be.undefined;
     });
 

package/components/virtualList/useVirtualRows.ts

@@ -76,7 +76,7 @@ export function useVirtualRows() {
             const key = row.key!;
             if (!rowsHeightMap.has(key)) {
                 const rowDom = findDomFromVNode(row, true) as HTMLElement;
-                const height = rowDom.offsetHeight;
+                const height = rowDom.offsetHeight || rowAvgHeight;
                 rowsHeightMap.set(key, height); 
                 calculatedHeight += height;
             }

package/es/components/breadcrumb/index.vdt.js

@@ -6,7 +6,8 @@ import { BreadcrumbItem } from './item';
 import { makeStyles } from './styles';
 import { Icon } from '../icon';
 var _$tmp0 = {
-  'className': 'k-icon-right'
+  'className': 'k-icon-right',
+  'size': 'small'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;

package/es/components/breadcrumb/styles.js

@@ -4,7 +4,7 @@ import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
 import { cache } from '../utils';
 var defaults = {
-  fontSize: '14px',
+  fontSize: '12px',
   get color() {
     return theme.color.lightBlack;
   },
@@ -13,7 +13,9 @@ var defaults = {
   },
   gap: '6px',
   activeFontWeight: 'normal',
-  activeColor: "#262626"
+  get activeColor() {
+    return theme.color.title;
+  }
 };
 var breadcrumb;
 setDefault(function () {
@@ -23,5 +25,5 @@ setDefault(function () {
   makeStyles == null || makeStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";display:flex;align-items:center;.", k, "-breadcrumb-item{&:last-of-type .", k, "-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{color:", breadcrumb.color, ";}a.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{cursor:pointer;&:hover{color:", breadcrumb.hoverColor, ";}}.", k, "-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
+  return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";line-height:12px;display:flex;align-items:center;.", k, "-breadcrumb-item{&:last-of-type .", k, "-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{color:", breadcrumb.color, ";}a.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{cursor:pointer;&:hover{color:", breadcrumb.hoverColor, ";}}.", k, "-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
 });

package/es/components/datepicker/basepicker.d.ts

@@ -3,7 +3,7 @@
  */
 import { TypeDefs } from 'intact';
 import { State } from '../../hooks/useState';
-import { Dayjs, OpUnitType } from './dayjs';
+import { Dayjs, OpUnitType, QUnitType } from './dayjs';
 import type { useFormats } from './useFormats';
 import type { useDisabled } from './useDisabled';
 import { PanelFlags, usePanel } from './usePanel';
@@ -34,6 +34,7 @@ export interface BasePickerProps<V extends Value = Value, Multipe extends boolea
 }
 export interface BasePickerEvents extends BaseSelectEvents {
     selecting: [StateValueRange];
+    togglePosition: [];
 }
 export interface BasePickerBlocks<V extends Value = Value, R extends boolean = boolean> extends BaseSelectBlocks<R extends true ? [Value, Value] : Value> {
 }
@@ -47,7 +48,7 @@ export declare abstract class BasePicker<T extends BasePickerProps = BasePickerP
     abstract panel: ReturnType<typeof usePanel>;
     resetKeywords(keywords: State<string>): void;
 }
-export declare function useValue({ createDateByValueFormat, createDateByShowFormat, getShowString, getValueString, }: ReturnType<typeof useFormats>, { isDisabled, minDate }: ReturnType<typeof useDisabled>, panel: ReturnType<typeof usePanel>, shouldUpdateValue: (v: StateValueItem) => boolean, updateValueOnInput: (v: DayjsValueItem) => void, getEqualType: () => OpUnitType, updateStateValue: (v: DayjsValue, value: State<StateValue>) => void): {
+export declare function useValue({ createDateByValueFormat, createDateByShowFormat, getShowString, getValueString, }: ReturnType<typeof useFormats>, { isDisabled, minDate }: ReturnType<typeof useDisabled>, panel: ReturnType<typeof usePanel>, shouldUpdateValue: (v: StateValueItem) => boolean, updateValueOnInput: (v: DayjsValueItem) => void, getEqualType: () => OpUnitType | QUnitType, updateStateValue: (v: DayjsValue, value: State<StateValue>) => void): {
     value: State<StateValue>;
     format: () => string | string[];
     onConfirm: () => void;
@@ -56,4 +57,5 @@ export declare function useValue({ createDateByValueFormat, createDateByShowForm
     setValue: (v: StateValueItem, fromInput: boolean) => void;
     convertToDayjs: (v: BasePickerProps<Value>['value']) => DayjsValue;
     getDayjsValue: () => DayjsValue;
+    setMoment: () => void;
 };