@king-design/intact 3.6.2-beta.1 → 3.7.0

package/components/anchor/index.ts

@@ -0,0 +1,159 @@
+import {Component, TypeDefs, provide, Children} from 'intact';
+import template from './index.vdt';
+import {ANCHOR} from './constants';
+import {Sizes, sizes} from '../../styles/utils';
+import {useScroll} from './useScroll';
+import type {Events} from '../types';
+import { useConfigContext } from '../config';
+import {AnchorLink} from './link';
+import {eachChildren, isComponentVNode} from '../utils';
+import type { AnchorLinkProps } from './link';
+
+export * from './link';
+
+export interface AnchorProps {
+    value?: string;
+    offset?: number;
+    container?: string | HTMLElement;
+    threshold?: number;
+    vertical?: boolean;
+    size?: Sizes;
+    duration?: number;
+}
+
+export interface AnchorEvents {
+    change: [string];
+    click: [MouseEvent, AnchorLinkProps];
+}
+
+const typeDefs: Required<TypeDefs<AnchorProps>> = {
+    value: String,
+    offset: Number,
+    container: [String, Object],
+    threshold: Number,
+    vertical: Boolean,
+    size: sizes,
+    duration: Number,
+};
+
+const defaults = (): Partial<AnchorProps> => ({
+    offset: 0,
+    threshold: 50,
+    vertical: true,
+    size: 'default',
+    duration: 700,
+});
+
+const events: Events<AnchorEvents> = {
+    change: true,
+    click: true,
+};
+
+export class Anchor extends Component<AnchorProps, AnchorEvents> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+    static events = events;
+
+    private scroll = useScroll();
+    public config = useConfigContext();
+    private links: string[] = [];
+    private cleanup?: () => void;
+    // 标记是否是滚动触发的 value 变化
+    private isSettingFromScroll = false;
+    // 元素引用缓存，避免重复的 getElementById 调用
+    private elementCache = new Map<string, HTMLElement | null>();
+
+    init() {
+        provide(ANCHOR, this);
+
+        this.scroll.setIsSettingFromScroll = (value: boolean) => {
+            this.isSettingFromScroll = value;
+        };
+        
+        this.watch('value', (newValue, oldValue) => {
+            if (newValue !== oldValue && newValue !== undefined && newValue !== null) {
+                this.trigger('change', newValue as string);
+                // 只有非滚动触发的 value 变化才 scrollTo
+                // 即：用户点击 tab 或外部 set 时才会 scrollTo
+                if (!this.isSettingFromScroll) {
+                    const element = this.getTargetElement(newValue);
+                    // 元素存在且可见
+                    if (element && element.getClientRects().length > 0) {
+                        this.scroll.scrollTo(element);
+                    }
+                }
+            }
+        }, {inited: true});
+    }
+
+    mounted() {
+        this.updateLinks();
+        this.cleanup = this.scroll.init();
+    }
+
+    beforeUnmount() {
+        if (this.cleanup) {
+            this.cleanup();
+        }
+        // 清理元素缓存
+        this.elementCache.clear();
+    }
+
+    updated() {
+        this.updateLinks();
+    }
+
+    private updateLinks() {
+        const links: string[] = [];
+        const children = this.get('children') as Children;
+        
+        // 递归收集所有层级的 AnchorLink 的 href
+        const collectLinks = (children: Children) => {
+            if (!children) return;
+            
+            eachChildren(children, (vNode) => {
+                if (isComponentVNode(vNode, AnchorLink)) {
+                    const props = vNode.props || {};
+                    if (props.href) {
+                        links.push(props.href);
+                    }
+                    if (vNode.props && vNode.props.children) {
+                        collectLinks(vNode.props.children);
+                    }
+                }
+            });
+        };
+        
+        collectLinks(children);
+        this.links = links;
+        
+        // 清理不在当前链接列表中的缓存
+        this.elementCache.forEach((_, href) => {
+            if (!links.includes(href)) {
+                this.elementCache.delete(href);
+            }
+        });
+    }
+
+    public getLinks(): string[] {
+        return this.links;
+    }
+
+    public getTargetElement(href: string): HTMLElement | null {
+        if (!href) return null;
+        
+        if (this.elementCache.has(href)) {
+            return this.elementCache.get(href)!;
+        }
+        
+        const id = href.startsWith('#') ? href.slice(1) : href;
+        const element = document.getElementById(id);
+        
+        this.elementCache.set(href, element);
+        
+        return element;
+    }
+
+}
+

package/components/anchor/index.vdt

@@ -0,0 +1,24 @@
+import {Tabs} from '../tabs';
+import {getRestProps} from '../utils';
+import {makeStyles} from './styles';
+
+const {className, children, vertical, size, value} = this.get();
+const { k } = this.config;
+
+const classNameObj = {
+    [`${k}-anchor`]: true,
+    [className]: className,
+    [`${k}-anchor-vertical`]: vertical,
+    [makeStyles(k, vertical)]: true,
+};
+
+<div class={classNameObj} {...getRestProps(this)}>
+    <Tabs 
+        v-model="value"
+        vertical={vertical}
+        size={size}
+    >
+        {children}
+    </Tabs>
+</div>
+

package/components/anchor/link.ts

@@ -0,0 +1,44 @@
+import {Component, TypeDefs, inject, provide, VNode} from 'intact';
+import template from './link.vdt';
+import {ANCHOR, ANCHOR_LINK_LEVEL} from './constants';
+import type {Anchor} from './';
+import {bind} from '../utils';
+import { useConfigContext } from '../config';
+
+export interface AnchorLinkProps {
+    href?: string;
+    title?: string | VNode;
+    disabled?: boolean;
+}
+
+const typeDefs: Required<TypeDefs<AnchorLinkProps>> = {
+    href: String,
+    title: [String, VNode],
+    disabled: Boolean,
+};
+
+export class AnchorLink extends Component<AnchorLinkProps> {
+    static template = template;
+    static typeDefs = typeDefs;
+
+    private anchor = inject<Anchor>(ANCHOR)!;
+    private config = useConfigContext();
+    private level = inject<number>(ANCHOR_LINK_LEVEL, 0);
+
+    init() {
+        provide(ANCHOR_LINK_LEVEL, this.level + 1);
+    }
+
+    @bind
+    private onClick(e: MouseEvent) {
+        const { title, href, disabled } = this.get();
+        if (href) {
+            this.anchor.trigger('click', e, { title, href, disabled });
+        }
+    }
+
+    public getLevel(): number {
+        return this.level;
+    }
+}
+

package/components/anchor/link.vdt

@@ -0,0 +1,49 @@
+import {Tab} from '../tabs';
+import {getRestProps, eachChildren, isComponentVNode} from '../utils';
+import {isNullOrUndefined} from 'intact-shared';
+import {AnchorLink} from './link';
+
+const {href, title, children, className, disabled} = this.get();
+const {value: currentValue, vertical} = this.anchor.get();
+const { k } = this.config;
+const level = this.level;
+const verticalMode = vertical !== false; // 默认为 true
+
+// 检查是否有嵌套的 AnchorLink 仅在 vertical 模式下支持嵌套
+const nestedLinks = [];
+const otherChildren = [];
+
+if (children) {
+    eachChildren(children, (vNode) => {
+        if (isComponentVNode(vNode, AnchorLink)) {
+            nestedLinks.push(vNode);
+        } else {
+            otherChildren.push(vNode);
+        }
+    });
+}
+
+const hasNestedLinks = nestedLinks.length > 0 && verticalMode;
+// 如果有嵌套的 AnchorLink，显示 title；否则显示 title 或 children
+const displayTitle = title || (hasNestedLinks ? null : (otherChildren.length > 0 ? otherChildren : null));
+
+const classNameObj = {
+    [`${k}-anchor-link`]: true,
+    [`${k}-anchor-link-nested`]: hasNestedLinks,
+    [`${k}-anchor-link-level-${level}`]: level > 0 && verticalMode,
+    [className]: className,
+};
+
+<template>
+    <Tab 
+        {...getRestProps(this)}
+        class={classNameObj}
+        value={href}
+        disabled={disabled}
+        ev-click={this.onClick}
+    >
+        {displayTitle}
+    </Tab>
+    {hasNestedLinks ? nestedLinks : null}
+</template>
+

package/components/anchor/styles.ts

@@ -0,0 +1,50 @@
+import {css} from '@emotion/css';
+import {theme, setDefault} from '../../styles/theme';
+import {deepDefaults} from '../../styles/utils';
+import '../../styles/global';
+import { cache } from '../utils';
+
+const defaults = {
+    get transition() { return theme.transition.middle },
+    link: {
+        padding: 16,
+    },
+};
+
+let anchor: typeof defaults;
+setDefault(() => {
+    anchor = deepDefaults(theme, {anchor: defaults}).anchor;
+    makeStyles?.clearCache();
+});
+
+export const makeStyles = cache(function makeStyles(k: string, vertical?: boolean) {
+    return css`
+        &.${k}-anchor-vertical {
+            .${k}-tabs.${k}-vertical {
+                border-right: none;
+                border-left: 1px solid ${theme.color.border};
+                .${k}-tabs-active-bar {
+                    left: 0;
+                    right: auto;
+                }
+            }
+        }
+        .${k}-anchor-link {
+            &.${k}-tab {
+                transition: color ${anchor.transition};
+                text-align: ${vertical ? 'left' : 'center'};
+            }
+            
+            ${Array.from({ length: 10 }, (_, i) => {
+                const level = i + 1;
+                const paddingLeft = anchor.link.padding + anchor.link.padding * level;
+                return css`
+                    &.${k}-anchor-link-level-${level}.${k}-tab {
+                        padding-left: ${paddingLeft}px;
+                    }
+                `;
+            })}
+        }
+    `;
+});
+

package/components/anchor/useScroll.ts

@@ -0,0 +1,221 @@
+import {useInstance, nextTick} from 'intact';
+import {useState} from '../../hooks/useState';
+import type {Anchor} from './';
+
+export function useScroll() {
+    const instance = useInstance() as Anchor;
+    const isScrolling = useState(false);
+
+    let scrollTimer: number | null = null;
+    let rafId: number | null = null;
+    let scrollContainer: HTMLElement | Window = window;
+    // 回调函数，用于通知外部这是滚动触发的 value 变化
+    let setIsSettingFromScroll: ((value: boolean) => void) | null = null;
+
+    function getScrollContainer() {
+        const {container} = instance.get();
+        if (!container) {
+            return window;
+        }
+        if (typeof container === 'string') {
+            const el = document.querySelector(container) as HTMLElement;
+            return el || window;
+        }
+        return container;
+    }
+
+    // 获取当前滚动距离
+    function getScrollTop(): number {
+        if (scrollContainer === window) {
+            return window.scrollY || document.documentElement.scrollTop;
+        }
+        return (scrollContainer as HTMLElement).scrollTop;
+    }
+
+    // 获取滚动容器的高度
+    function getScrollHeight(): number {
+        if (scrollContainer === window) {
+            return document.documentElement.scrollHeight;
+        }
+        return (scrollContainer as HTMLElement).scrollHeight;
+    }
+
+    // 获取视口高度
+    function getViewportHeight(): number {
+        if (scrollContainer === window) {
+            return window.innerHeight;
+        }
+        return (scrollContainer as HTMLElement).clientHeight;
+    }
+
+    function getElementTop(element: HTMLElement, container: HTMLElement | Window): number {
+        if (container === window) {
+            // window: 累加 offsetTop
+            let offsetTop = 0;
+            let currentElement: HTMLElement | null = element;
+            while (currentElement && currentElement !== document.body) {
+                offsetTop += currentElement.offsetTop;
+                currentElement = currentElement.offsetParent as HTMLElement | null;
+            }
+            return offsetTop;
+        }
+        
+        // 自定义容器: 使用 getBoundingClientRect
+        const containerEl = container as HTMLElement;
+        const elementRect = element.getBoundingClientRect();
+        const containerRect = containerEl.getBoundingClientRect();
+        
+        // 元素相对于容器内容区的位置 = 
+        // (元素到视口顶部的距离 - 容器到视口顶部的距离) + 容器已滚动的距离
+        return elementRect.top - containerRect.top + containerEl.scrollTop;
+    }
+
+    function scrollTo(target: HTMLElement) {
+        const {offset = 0, duration = 700} = instance.get();
+        
+        // 目标位置
+        const targetTop = getElementTop(target, scrollContainer) - offset;
+        // 当前位置
+        const currentTop = getScrollTop();
+        if (Math.abs(currentTop - targetTop) < 1) return;
+
+        if (scrollTimer) {
+            clearTimeout(scrollTimer);
+        }
+        isScrolling.set(true);
+
+        if (scrollContainer === window) {
+            window.scrollTo({
+                top: targetTop,
+                behavior: 'smooth'
+            });
+        } else {
+            (scrollContainer as HTMLElement).scrollTo({
+                top: targetTop,
+                behavior: 'smooth'
+            });
+        }
+
+        scrollTimer = window.setTimeout(() => {
+            isScrolling.set(false);
+        }, duration);
+    }
+
+    // 滚动触发的 value 更新
+    function setValueFromScroll(href: string) {
+        if (setIsSettingFromScroll) {
+            setIsSettingFromScroll(true);
+        }
+        try {
+            instance.set('value', href);
+        } finally {
+            if (setIsSettingFromScroll) {
+                setIsSettingFromScroll(false);
+            }
+        }
+    }
+
+    // 更新当前激活的锚点
+    function updateActive() {
+        if (isScrolling.value) return;
+        
+        const {offset = 0, threshold = 50} = instance.get();
+        const links = instance.getLinks();
+        
+        // 只处理当前存在且可见的锚点
+        const candidates = [];
+        for (const href of links) {
+            const element = instance.getTargetElement(href);
+            if (element && element.getClientRects().length > 0) {
+                candidates.push({ href, element });
+            }
+        }
+
+        if (candidates.length === 0) return;
+
+        const scrollTop = getScrollTop();
+        const viewportHeight = getViewportHeight();
+        const totalHeight = getScrollHeight();
+        
+        let activeHref: string = candidates[0].href;
+
+        if (scrollTop + viewportHeight >= totalHeight - 10) {
+            // 接近底部，激活最后一个可见锚点
+            activeHref = candidates[candidates.length - 1].href;
+        } else if (scrollTop <= threshold) {
+            // 接近顶部，激活第一个可见锚点
+            activeHref = candidates[0].href;
+        } else {
+            // 正常滚动，寻找最后一个被“滚到”的锚点
+            for (const { href, element } of candidates) {
+                const sectionTop = getElementTop(element, scrollContainer) - offset - threshold;
+                if (scrollTop >= sectionTop) {
+                    activeHref = href;
+                } else {
+                    break;
+                }
+            }
+        }
+
+        if (activeHref !== instance.get('value')) {
+            setValueFromScroll(activeHref);
+        }
+    }
+
+    // 滚动事件处理
+    function onScroll() {
+        if (isScrolling.value) return;
+
+        if (rafId) {
+            cancelAnimationFrame(rafId);
+        }
+        // 使用 requestAnimationFrame 优化滚动性能
+        rafId = requestAnimationFrame(updateActive);
+    }
+
+    // 挂载后的初始化
+    function init() {
+        setTimeout(() => {
+            scrollContainer = getScrollContainer();
+            
+            if (scrollContainer === window) {
+                window.addEventListener('scroll', onScroll, {passive: true});
+            } else {
+                (scrollContainer as HTMLElement).addEventListener('scroll', onScroll, {passive: true});
+            }
+            const initialValue = instance.get('value');
+            if (initialValue) {
+                const element = instance.getTargetElement(initialValue);
+                if (element) {
+                    scrollTo(element);
+                    return;
+                }
+            }
+        }, 100);
+
+        return () => {
+            if (scrollTimer) {
+                clearTimeout(scrollTimer);
+            }
+            if (rafId) {
+                cancelAnimationFrame(rafId);
+            }
+            const currentContainer = scrollContainer;
+            if (currentContainer === window) {
+                window.removeEventListener('scroll', onScroll);
+            } else {
+                (currentContainer as HTMLElement).removeEventListener('scroll', onScroll);
+            }
+        };
+    }
+
+    return {
+        scrollTo,
+        updateActive,
+        init,
+        isScrolling,
+        set setIsSettingFromScroll(fn: (value: boolean) => void) {
+            setIsSettingFromScroll = fn;
+        },
+    };
+}

package/components/config/demos/basic.md

@@ -7,13 +7,14 @@ order: 0
 
 > 本例中，我们将前缀设为`kd`，可以打开调试工具查看
 
-> 对于`Message`组件，由于它是静态方法调用，我们可以通过`Message.classNamePrefix`设置样式名前缀
+> 对于`Message` 和 `Notification` 组件，由于它是静态方法调用，我们可以通过`Message.classNamePrefix` 、 `Notification.classNamePrefix` 设置样式名前缀
 
 ```vdt
 import {ConfigProvider, Button, Input} from 'kpc';
 
 <ConfigProvider value={{classNamePrefix: 'kd'}}>
-    <Button ev-click={this.showMessage}>Button</Button>
+    <Button ev-click={this.showMessage} style="margin-right: 16px;">Show Message</Button>
+    <Button ev-click={this.showNotification}>Show Notification</Button>
     <div style="margin-top: 8px;">
         <Input />
     </div>
@@ -21,7 +22,7 @@ import {ConfigProvider, Button, Input} from 'kpc';
 ```
 
 ```ts
-import {Message} from 'kpc';
+import {Message, Notification} from 'kpc';
 
 export default class extends Component {
     static template = template;
@@ -30,5 +31,12 @@ export default class extends Component {
         Message.classNamePrefix = 'kd';
         Message.info('Message with classNamePrefix');
     }
+    showNotification() {
+        Notification.classNamePrefix = 'kd';
+        Notification.info({
+            title: 'Notification',
+            content: 'Notification with classNamePrefix'
+        });
+    }
 }
 ```

package/components/dialog/base.vdt

@@ -8,12 +8,14 @@ import {makeDialogStyles, makeWrapperStyles} from './styles';
 
 const {
     size, container, hideClose,
-    overlay, value, width,
+    overlay, value,
     mode, className, cancelText,
     okText, loading, disabledOk,
     title, children,
 } = this.get();
 
+const width = $props.width !== undefined ? $props.width : this.get('width');
+
 const isHide = mode === 'hide';
 const { k } = this.config;
 const classNameObj = {

package/components/drawer/demos/resizable.md

@@ -0,0 +1,67 @@
+---
+title: 可调整大小
+order: 0.3
+---
+
+添加`resizable`属性，可以通过拖拽边缘来调整 drawer 的大小。
+
+```vdt
+import {Drawer, Button, ButtonGroup} from 'kpc';
+
+<div>
+    <ButtonGroup checkType="radio" v-model="placement">
+        <Button value="top">top</Button>
+        <Button value="bottom">bottom</Button>
+        <Button value="left">left</Button>
+        <Button value="right">right</Button>
+    </ButtonGroup>
+    <br /><br />
+    <Button ev-click={this.showDrawer}>打开 Drawer</Button>
+
+    <Drawer v-model='show'
+        title='可调整大小的 Drawer' 
+        placement={this.get('placement')}
+        resizable={true}
+    >
+        <div>
+            <p>可以通过拖拽边缘来调整 drawer 的大小：</p>
+            <ul>
+                <li><strong>top/bottom</strong>：
+                    <ul>
+                        <li>宽度：可以通过拖拽右侧边缘来调整宽度，调整时会自动保持居中</li>
+                        <li>高度：可以通过拖拽底部（top）或顶部（bottom）边缘来调整高度</li>
+                    </ul>
+                </li>
+                <li><strong>left</strong>：可以通过拖拽右侧边缘来调整宽度</li>
+                <li><strong>right</strong>：可以通过拖拽左侧边缘来调整宽度</li>
+            </ul>
+            <p>当前 placement: {this.get('placement')}</p>
+        </div>
+    </Drawer>
+</div>
+```
+
+```ts
+import {bind, DrawerProps} from 'kpc';
+
+interface Props {
+    show?: boolean
+    placement: DrawerProps['placement']
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            show: false,
+            placement: 'right' as Props['placement'],
+        };
+    }
+
+    @bind
+    showDrawer() {
+        this.set('show', true);
+    }
+}
+```

package/components/drawer/index.md

@@ -27,6 +27,7 @@ sidebar: doc
 | width | 指定弹窗宽度，`number`类型时，单位为`px`；`string`类型时，需要指定单位 | `number` | `string` | `undefined` |
 | mode | 指定主体元素在关闭状态下的渲染方式，`"destroy"`代表直接销毁，`"hide"`代表只是隐藏 | `"destroy"` | `"hide"` | `"hide"` |
 | placement | 自定义位置 | `"top"` | `"bottom"` |`"left"` |`"right"`|`"right"`|
+| resizable | 是否可调整大小。 | `boolean` | `false` |
 
 # 扩展点