apptify 0.6.1 → 0.7.0

package/dist/core/scrollbar.d.ts

@@ -0,0 +1,14 @@
+export type ScrollBarAxis = 'both' | 'horizontal' | 'vertical';
+interface ScrollBarOptions {
+    axis?: ScrollBarAxis;
+    label?: string;
+    controls?: string;
+    host?: HTMLElement;
+    interaction?: () => void;
+}
+export declare function attachScrollBar(target: HTMLElement, options?: ScrollBarOptions): {
+    refresh: () => void;
+    dispose(): void;
+};
+export declare function installScrollBars(host: HTMLElement): () => void;
+export {};

package/dist/core/speed-dial.d.ts

@@ -0,0 +1,21 @@
+export interface SpeedDialEntry {
+    id: string;
+    kind: 'directory' | 'action';
+    label: string;
+    target: HTMLElement;
+}
+export declare function createSpeedDialRegistry(): import("vue").Raw<{
+    entries: import("vue").ShallowRef<SpeedDialEntry[], SpeedDialEntry[]>;
+    host: import("vue").Ref<string | undefined, string | undefined>;
+    hostDepth: import("vue").Ref<number, number>;
+    mobile: import("vue").Ref<boolean, boolean>;
+    open: import("vue").Ref<boolean, boolean>;
+    activeDirectory: import("vue").Ref<string | undefined, string | undefined>;
+    register(entry: SpeedDialEntry): void;
+    unregister(id: string): void;
+}>;
+export declare function useSpeedDialEntry(kind: SpeedDialEntry['kind'], label: () => string, enabled?: () => boolean): {
+    target: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+    hosted: import("vue").ComputedRef<boolean>;
+    close: () => void;
+};

package/dist/index.d.ts

@@ -7,11 +7,14 @@ import './styles/date-picker.css';
 import './styles/content.css';
 import './styles/navibar.css';
 import './styles/overlays.css';
+import './styles/scrollbar.css';
 export * from './core/context';
-export { isTouchDevice } from './core/device';
+export { isTouchDevice, isVerticalScreen } from './core/device';
 export * from './components/foundation';
 export * from './components/forms';
 export * from './components/content';
+export * from './components/speed-dial';
+export * from './components/scrollbar';
 export { AppleDialog, AppleDrawer, AppleSheet, AppleSnackbar, AppleOverlayHost, ApplePopover, AppleTooltip, AppleMenu, AppleActionSheet } from './components/overlays';
 export type { AppleMenuItem, AppleViewerImage } from './components/overlays';
 export * from './components/motion';
@@ -19,6 +22,125 @@ export * from './components/navibar';
 export * from './core/motion';
 export { overlayComponents };
 export declare const components: {
+    AppleScrollBar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        target: {
+            type: import("vue").PropType<string | HTMLElement | (() => HTMLElement | undefined)>;
+            default: string;
+        };
+        axis: {
+            type: import("vue").PropType<import("./core/scrollbar").ScrollBarAxis>;
+            default: string;
+        };
+        label: {
+            type: StringConstructor;
+            default: string;
+        };
+        controls: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, () => null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "interaction"[], "interaction", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        target: {
+            type: import("vue").PropType<string | HTMLElement | (() => HTMLElement | undefined)>;
+            default: string;
+        };
+        axis: {
+            type: import("vue").PropType<import("./core/scrollbar").ScrollBarAxis>;
+            default: string;
+        };
+        label: {
+            type: StringConstructor;
+            default: string;
+        };
+        controls: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{
+        onInteraction?: ((...args: any[]) => any) | undefined;
+    }>, {
+        label: string;
+        target: string | HTMLElement | (() => HTMLElement | undefined);
+        axis: import("./core/scrollbar").ScrollBarAxis;
+        controls: string;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    AppleSpeedDial: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        backTop: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        target: {
+            type: StringConstructor;
+            default: string;
+        };
+        threshold: {
+            type: NumberConstructor;
+            default: number;
+        };
+        label: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, () => import("vue").VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        backTop: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        target: {
+            type: StringConstructor;
+            default: string;
+        };
+        threshold: {
+            type: NumberConstructor;
+            default: number;
+        };
+        label: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        label: string;
+        target: string;
+        threshold: number;
+        backTop: boolean;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    AppleSpeedDialItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        label: {
+            type: StringConstructor;
+            required: true;
+        };
+        icon: import("vue").PropType<import("vue").Component>;
+        disabled: BooleanConstructor;
+        visible: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        variant: {
+            type: import("vue").PropType<"primary" | "secondary" | "outline" | "danger">;
+            default: string;
+        };
+    }>, () => import("vue").VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        label: {
+            type: StringConstructor;
+            required: true;
+        };
+        icon: import("vue").PropType<import("vue").Component>;
+        disabled: BooleanConstructor;
+        visible: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        variant: {
+            type: import("vue").PropType<"primary" | "secondary" | "outline" | "danger">;
+            default: string;
+        };
+    }>> & Readonly<{
+        onClick?: ((...args: any[]) => any) | undefined;
+    }>, {
+        disabled: boolean;
+        variant: "secondary" | "danger" | "primary" | "outline";
+        visible: boolean;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     AppleNavibar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         items: {
             type: import("vue").PropType<import(".").AppleItem[]>;
@@ -115,8 +237,8 @@ export declare const components: {
         onToggle?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     }>, {
-        fixed: boolean;
         label: string;
+        fixed: boolean;
         motion: import(".").ComponentMotion;
         items: import(".").AppleItem[];
         brand: string;
@@ -687,9 +809,7 @@ export declare const components: {
             type: import("vue").PropType<"auto" | "full" | "reduced" | "none" | "inherit">;
             default: "auto" | "full" | "reduced" | "none" | "inherit";
         };
-    }>, {
-        isTouchDevice: Readonly<import("vue").Ref<boolean, boolean>>;
-    }, {
+    }>, {}, {
         timer: ReturnType<typeof setTimeout> | null;
         remaining: number;
         started: number;
@@ -701,7 +821,7 @@ export declare const components: {
         pause(): void;
         resume(): void;
         close(reason?: string): void;
-    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "after-close" | "action")[], "close" | "update:modelValue" | "after-close" | "action", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "action" | "update:modelValue" | "after-close")[], "close" | "action" | "update:modelValue" | "after-close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
             type: BooleanConstructor;
             default: boolean;
@@ -741,13 +861,13 @@ export declare const components: {
         onAction?: ((...args: any[]) => any) | undefined;
     }>, {
         message: string;
+        action: string;
         title: string;
         tone: "error" | "danger" | "success" | "warning" | "default" | "info";
         duration: number;
         motion: "auto" | "full" | "reduced" | "none" | "inherit";
         modelValue: boolean;
         closable: boolean;
-        action: string;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     AppleOverlayHost: import("vue").DefineComponent<{}, {}, {
         present: Array<{
@@ -863,9 +983,9 @@ export declare const components: {
         "onAfter-close"?: ((...args: any[]) => any) | undefined;
         onOpen?: ((...args: any[]) => any) | undefined;
     }>, {
+        label: string;
         width: string | number;
         placement: "top" | "bottom" | "left" | "right";
-        label: string;
         disabled: boolean;
         motion: "auto" | "full" | "reduced" | "none" | "inherit";
         role: string;
@@ -1475,8 +1595,8 @@ export declare const components: {
         "onRow-click"?: ((...args: any[]) => any) | undefined;
         "onColumn-resize"?: ((...args: any[]) => any) | undefined;
     }>, {
-        height: number;
         label: string;
+        height: number;
         disabled: boolean;
         loading: boolean;
         motion: "auto" | "full" | "reduced" | "none" | "inherit";
@@ -1515,15 +1635,31 @@ export declare const components: {
             type: StringConstructor;
             default: string;
         };
+        searchable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        mobileDirectory: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         motion: {
             type: import("vue").PropType<"auto" | "full" | "reduced" | "none" | "inherit">;
             default: string;
         };
-    }>, {}, {
+    }>, {
+        directoryTarget: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+        inMobileDirectory: import("vue").ComputedRef<boolean>;
+        closeDirectory: () => void;
+    }, {
+        search: string;
+        searchCollapsed: import(".").AppleValue[];
         internalExpanded: import(".").AppleValue[];
         internalValue: import(".").AppleValue | undefined;
         focusValue: import(".").AppleValue | undefined;
     }, {
+        query(): string;
+        filteredItems(): import(".").AppleTreeItem[];
         expandedValues(): import(".").AppleValue[];
         selectedValue(): import(".").AppleValue | undefined;
         visibleItems(): {
@@ -1555,6 +1691,14 @@ export declare const components: {
             type: StringConstructor;
             default: string;
         };
+        searchable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        mobileDirectory: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         motion: {
             type: import("vue").PropType<"auto" | "full" | "reduced" | "none" | "inherit">;
             default: string;
@@ -1570,6 +1714,8 @@ export declare const components: {
         modelValue: import(".").AppleValue;
         expanded: import(".").AppleValue[];
         items: import(".").AppleTreeItem[];
+        searchable: boolean;
+        mobileDirectory: boolean;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     AppleList: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         modelValue: {
@@ -1975,7 +2121,7 @@ export declare const components: {
         };
     }>> & Readonly<{}>, {
         label: string;
-        variant: "text" | "table" | "image" | "avatar" | "card" | "list";
+        variant: "table" | "text" | "image" | "avatar" | "card" | "list";
         motion: "auto" | "full" | "reduced" | "none" | "inherit";
         rows: number;
         columns: number;
@@ -2179,7 +2325,7 @@ export declare const components: {
     AppleInfiniteScroll: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         loading: BooleanConstructor;
         error: {
-            type: (StringConstructor | BooleanConstructor)[];
+            type: (BooleanConstructor | StringConstructor)[];
             default: boolean;
         };
         finished: BooleanConstructor;
@@ -2208,7 +2354,7 @@ export declare const components: {
     }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("load" | "retry")[], "load" | "retry", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         loading: BooleanConstructor;
         error: {
-            type: (StringConstructor | BooleanConstructor)[];
+            type: (BooleanConstructor | StringConstructor)[];
             default: boolean;
         };
         finished: BooleanConstructor;
@@ -2233,8 +2379,8 @@ export declare const components: {
         disabled: boolean;
         loading: boolean;
         motion: "auto" | "full" | "reduced" | "none" | "inherit";
-        distance: number;
         finished: boolean;
+        distance: number;
         finishedText: string;
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     AppleBackTop: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -2264,14 +2410,13 @@ export declare const components: {
     }, {
         visible: boolean;
         scrollTarget: HTMLElement | Window | undefined;
-        scrollFrame: number;
+        scrollRun: import(".").MotionScroll | undefined;
     }, {
         motionMode(): "full" | "reduced" | "none";
     }, {
         bindTarget(): void;
         scrollPosition(): number;
         onScroll(): void;
-        interruptScroll(event: Event): void;
         cancelScroll(): void;
         go(event: Event): void;
     }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -2299,8 +2444,8 @@ export declare const components: {
     }>> & Readonly<{
         onClick?: ((...args: any[]) => any) | undefined;
     }>, {
-        fixed: boolean;
         label: string;
+        fixed: boolean;
         disabled: boolean;
         motion: "auto" | "full" | "reduced" | "none" | "inherit";
         target: string;
@@ -2327,7 +2472,12 @@ export declare const components: {
             type: import("vue").PropType<"auto" | "full" | "reduced" | "none" | "inherit">;
             default: string;
         };
-    }>, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }>, {
+        previewRoot: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+        previewActive: import("vue").Ref<boolean, boolean>;
+    }, {}, {
+        motionMode(): "full" | "reduced" | "none";
+    }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         backTop: {
             type: BooleanConstructor;
             default: boolean;
@@ -3639,8 +3789,8 @@ export declare const components: {
     }>, {
         error: string;
         label: string;
-        disabled: boolean;
         capture: "user" | "environment";
+        disabled: boolean;
         loading: boolean;
         motion: "auto" | "full" | "reduced" | "none" | "inherit";
         modelValue: File[];
@@ -4360,7 +4510,18 @@ export declare const components: {
                 clear(): void;
             };
             portalTarget: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            speedDial: import("vue").Raw<{
+                entries: import("vue").ShallowRef<import("./core/speed-dial").SpeedDialEntry[], import("./core/speed-dial").SpeedDialEntry[]>;
+                host: import("vue").Ref<string | undefined, string | undefined>;
+                hostDepth: import("vue").Ref<number, number>;
+                mobile: import("vue").Ref<boolean, boolean>;
+                open: import("vue").Ref<boolean, boolean>;
+                activeDirectory: import("vue").Ref<string | undefined, string | undefined>;
+                register(entry: import("./core/speed-dial").SpeedDialEntry): void;
+                unregister(id: string): void;
+            }>;
             isTouchDevice: Readonly<import("vue").Ref<boolean, boolean>>;
+            isVerticalScreen: Readonly<import("vue").Ref<boolean, boolean>>;
             dialog: <T = unknown>(settings: Omit<import(".").OverlayOptions, "kind">) => import(".").OverlayHandle<T>;
             notify: (message: string, settings?: Omit<import(".").OverlayOptions, "kind" | "message">) => import(".").OverlayHandle<unknown>;
             sendMessage: <T = unknown>(channel: string, payload?: T) => unknown[];
@@ -4707,7 +4868,18 @@ export declare const components: {
                 clear(): void;
             };
             portalTarget: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            speedDial: import("vue").Raw<{
+                entries: import("vue").ShallowRef<import("./core/speed-dial").SpeedDialEntry[], import("./core/speed-dial").SpeedDialEntry[]>;
+                host: import("vue").Ref<string | undefined, string | undefined>;
+                hostDepth: import("vue").Ref<number, number>;
+                mobile: import("vue").Ref<boolean, boolean>;
+                open: import("vue").Ref<boolean, boolean>;
+                activeDirectory: import("vue").Ref<string | undefined, string | undefined>;
+                register(entry: import("./core/speed-dial").SpeedDialEntry): void;
+                unregister(id: string): void;
+            }>;
             isTouchDevice: Readonly<import("vue").Ref<boolean, boolean>>;
+            isVerticalScreen: Readonly<import("vue").Ref<boolean, boolean>>;
             dialog: <T = unknown>(settings: Omit<import(".").OverlayOptions, "kind">) => import(".").OverlayHandle<T>;
             notify: (message: string, settings?: Omit<import(".").OverlayOptions, "kind" | "message">) => import(".").OverlayHandle<unknown>;
             sendMessage: <T = unknown>(channel: string, payload?: T) => unknown[];
@@ -4716,6 +4888,7 @@ export declare const components: {
             detach(): void;
             dispose(): void;
         }>>;
+        disposeScrollBars: (() => void) | null;
     }, {
         inheritedTheme(): string | undefined;
         inheritedMotion(): import(".").Motion | undefined;
@@ -5062,7 +5235,18 @@ export declare const components: {
                 clear(): void;
             };
             portalTarget: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+            speedDial: import("vue").Raw<{
+                entries: import("vue").ShallowRef<import("./core/speed-dial").SpeedDialEntry[], import("./core/speed-dial").SpeedDialEntry[]>;
+                host: import("vue").Ref<string | undefined, string | undefined>;
+                hostDepth: import("vue").Ref<number, number>;
+                mobile: import("vue").Ref<boolean, boolean>;
+                open: import("vue").Ref<boolean, boolean>;
+                activeDirectory: import("vue").Ref<string | undefined, string | undefined>;
+                register(entry: import("./core/speed-dial").SpeedDialEntry): void;
+                unregister(id: string): void;
+            }>;
             isTouchDevice: Readonly<import("vue").Ref<boolean, boolean>>;
+            isVerticalScreen: Readonly<import("vue").Ref<boolean, boolean>>;
             dialog: <T = unknown>(settings: Omit<import(".").OverlayOptions, "kind">) => import(".").OverlayHandle<T>;
             notify: (message: string, settings?: Omit<import(".").OverlayOptions, "kind" | "message">) => import(".").OverlayHandle<unknown>;
             sendMessage: <T = unknown>(channel: string, payload?: T) => unknown[];
@@ -5197,7 +5381,7 @@ export declare const components: {
         }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
             shadow: "none" | "static" | "normal" | "focused";
             motion: import(".").ComponentMotion;
-            zoom: "none" | "big" | "small";
+            zoom: "none" | "small" | "big";
             imageAlt: string;
         }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
             P: {};
@@ -5234,7 +5418,7 @@ export declare const components: {
         }>> & Readonly<{}>, {}, {}, {}, {}, {
             shadow: "none" | "static" | "normal" | "focused";
             motion: import(".").ComponentMotion;
-            zoom: "none" | "big" | "small";
+            zoom: "none" | "small" | "big";
             imageAlt: string;
         }>;
         __isFragment?: never;
@@ -5268,7 +5452,7 @@ export declare const components: {
     }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
         shadow: "none" | "static" | "normal" | "focused";
         motion: import(".").ComponentMotion;
-        zoom: "none" | "big" | "small";
+        zoom: "none" | "small" | "big";
         imageAlt: string;
     }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
@@ -5298,6 +5482,14 @@ export declare const components: {
             type: StringConstructor;
             default: string;
         };
+        autoplay: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        interval: {
+            type: NumberConstructor;
+            default: number;
+        };
         galleryLayout: {
             type: import("vue").PropType<"compact" | "tiled" | "tiled-wrap">;
             default: string;
@@ -5325,15 +5517,19 @@ export declare const components: {
         };
     }>, {
         uid: string;
+        isVerticalScreen: Readonly<import("vue").Ref<boolean, boolean>>;
     }, {
         open: boolean;
         previewing: boolean;
         failed: boolean;
         loaded: boolean;
         previewIndex: number;
-        mobile: boolean;
-        viewportQuery: MediaQueryList | null;
         thumbnails: import("vue").Raw<Map<number, HTMLImageElement>>;
+        autoplayTimer: ReturnType<typeof setTimeout> | null;
+        hovered: boolean;
+        focused: boolean;
+        pageHidden: boolean;
+        arrowCenter: number | null;
         galleryLoaded: Record<number, boolean>;
         galleryFailed: Record<number, boolean>;
         gallerySizes: Record<string, import("./core/image-geometry").PhotoSize>;
@@ -5354,16 +5550,21 @@ export declare const components: {
         images(): import(".").AppleViewerImage[];
         grouped(): boolean;
         layout(): "compact" | "tiled" | "tiled-wrap";
+        canAutoplay(): boolean;
     }, {
+        stopAutoplay(): void;
+        restartAutoplay(): void;
+        syncVisibility(): void;
+        measureArrows(): void;
+        stepImage(direction: number): void;
         normalizeIndex(value: number): number;
         observeGallery(): void;
         cancelGalleryScroll(): void;
         interruptGalleryScroll(): void;
         galleryWheel(event: WheelEvent): void;
-        syncViewport(): void;
         afterPreview(): void;
         origin(index: number, reveal?: boolean): HTMLImageElement | null;
-        showImage(index: number): void;
+        showImage(index: number, snap?: string): void;
         scrolled(): void;
         galleryPointerDown(event: PointerEvent): void;
         galleryPointerMove(event: PointerEvent): void;
@@ -5393,6 +5594,14 @@ export declare const components: {
             type: StringConstructor;
             default: string;
         };
+        autoplay: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        interval: {
+            type: NumberConstructor;
+            default: number;
+        };
         galleryLayout: {
             type: import("vue").PropType<"compact" | "tiled" | "tiled-wrap">;
             default: string;
@@ -5430,6 +5639,8 @@ export declare const components: {
         squared: boolean;
         preview: boolean;
         gallery: import(".").AppleImageItem | (string | import(".").AppleImageItem)[];
+        autoplay: boolean;
+        interval: number;
         galleryLayout: "compact" | "tiled" | "tiled-wrap";
         galleryShape: "square" | "natural";
         aspectRatio: string | number;

package/docs/COMPONENTS.md

@@ -1,6 +1,6 @@
 # 组件 API 参考
 
-本页按 `src/index.ts` 合并的组件注册表列出当前 **66 个导出组件**，不是未来功能清单。组件名均可换成 kebab-case 模板标签，例如 `AppleOtpInput` 对应 `<apple-otp-input>`。
+本页按 `src/index.ts` 合并的组件注册表列出当前 **65 个导出组件**，不是未来功能清单。组件名均可换成 kebab-case 模板标签，例如 `AppleOtpInput` 对应 `<apple-otp-input>`。
 
 ## 公共约定
 
@@ -46,7 +46,7 @@ Tabs、TabBar、SegmentedControl、DatePicker 日期/时间页签均不使用 Ri
 | `AppleButton` | M；`variant=primary`（primary/secondary/outline/danger）、`size=medium`（small/medium/large）、`icon: Component`、`iconOnly`、`label`、`disabled`、`loading`、`ripple=true`、`href`、`type=button` | `click(event)`；default slot；图标位于文字右侧。纯图标按钮须提供 label。关闭动效时禁用 Ripple，其余模式遵循全局波纹开关。 |
 | `AppleLink` | `as=a`（a/button）、`href`、`external`、`disabled`、`icon`、`iconOnly`、`label` | default slot；文字操作使用 as=button；external 使用新窗口并设置 `noopener noreferrer`。 |
 | `AppleCard` | M；`title`、`subtitle`、`text`、`eyebrow`、`icon: Component 或图片 URL`、`iconColor`、`image`、`imageAlt`、`href`、`zoom=none`（big/small/none）、`shadow=normal`（normal/static/focused/none） | default、media、icon、title、actions slots；href 为标题链接，不会把所有嵌套控件变成一个大按钮。 |
-| `AppleImage` | M；`gallery: AppleImageItem | (string/AppleImageItem)[]`（唯一来源，默认空数组，单图可传对象）；`preview=true`、`carousel=false`、`disabled=false`、`label`、`galleryLayout=compact`（compact/tiled/tiled-wrap，所有设备）、`galleryShape=natural`（natural/square）、`index=0`、`squared`、`aspectRatio='4/3'`、`fit=cover`（cover/contain） | caption 与 item({item,index,active}) slots；carousel 强制 compact、常显控件且保留自由滚动；默认点击预览；统一入口，按触屏能力选择预览交互；完整渲染图片组，compact 在固定框内横滑，桌面触控板支持自由连续横滑、一次手势可跨越多张，快速点击翻页延续当前位置和速度；hover 不缩放，多图显示左右翻页按钮（单图小窗与全屏均无翻页箭头），跨多张点击小点时直接衔接当前画面与目标图并支持连续改选，tiled 等高横向平铺，溢出时底部常显自定义滚动条，支持拖动、点击轨道与键盘，滑块比例随内容和容器尺寸同步，tiled-wrap 等宽保留图片比例，按列从上往下紧密堆叠，避免按行对齐产生空白；平铺 hover 只缩放当前图片；galleryShape=square 强制 1:1 并居中裁剪（覆盖 fit），squared 同样作用于图片组；`update:index`、`change(index)`；图片错误状态；squared 覆盖 aspectRatio。 |
+| `AppleImage` | M；`gallery: AppleImageItem | (string/AppleImageItem)[]`（唯一来源，默认空数组，单图可传对象）；`preview=true`、`carousel=false`、`autoplay=true`、`interval=5000`（毫秒，仅 carousel）、`disabled=false`、`label`、`galleryLayout=compact`（compact/tiled/tiled-wrap，所有设备）、`galleryShape=natural`（natural/square）、`index=0`、`squared`、`aspectRatio='4/3'`、`fit=cover`（cover/contain） | caption 与 item({item,index,active}) slots；carousel 强制 compact、默认每 5 秒循环播放，悬停、聚焦、预览、拖动、页面隐藏或禁用时暂停，保留自由滚动；默认点击预览；统一预览交互，支持拖动、双击、捏合、平滑滚轮及键盘；连续滚轮累积目标并保持位置与速度，缩放、旋转、翻页与进退场分通道，可在动画途中继续操作；翻页按距离与速度使用 360–720ms 动画，放大图片随各自画布裁剪离场；底部单一胶囊按左旋转、缩小、可选名称、放大、右旋转排列，每次旋转 90°，旋转状态按图片保存；竖屏隐藏箭头、关闭及缩放按钮；完整渲染图片组，compact 在固定框内横滑，桌面横向滚轮或 Shift+滚轮平滑横滑，连续事件保留累计目标，停止后平滑吸附；一次手势可跨越多张，快速点击翻页延续当前位置和速度；hover 放大并使用 AppleCard 的悬停阴影，横屏多图的缩略图左右按钮仅在悬浮时淡入、移开时淡出，遵循 --apple-fast 与 --apple-ease 并对齐图片中间（单图小窗与全屏均无翻页箭头），跨多张点击小点时直接衔接当前画面与目标图并支持连续改选，tiled 等高横向平铺，溢出时底部常显自定义滚动条，支持拖动、点击轨道与键盘，滑块比例随内容和容器尺寸同步，tiled-wrap 等宽保留图片比例，按列从上往下紧密堆叠，避免按行对齐产生空白；平铺 hover 只缩放当前图片；galleryShape=square 强制 1:1 并居中裁剪（覆盖 fit），squared 同样作用于图片组；`update:index`、`change(index)`；图片错误状态；squared 覆盖 aspectRatio。 |
 | `AppleSearch` | `v-model: string`、`placeholder='搜索'`、`label='搜索'`、`disabled` | `search(value)` 在 Enter 时发出；清空更新 model。 |
 | `AppleContainer` | `width=1200`（number/string） | default slot；数字宽度按 px，宽度不会超过可用空间。 |
 | `AppleStack` | `direction=column`、`gap=16`、`align=stretch`、`wrap=true` | default slot；Flex 布局；数字 gap 按 px。 |
@@ -99,7 +99,7 @@ validator 返回 `true` 才通过；字符串作为错误信息，`false` 显示
 
 | 组件 | 主要 Props | Events / Slots / 说明 |
 | --- | --- | --- |
-| `AppleNavibar` | `v-model: string/number`、`items: AppleItem[]`、`brand`、`brandHref='/'`、`label='主导航'`、`fixed=true`、`breakpoint=640`、`hideOnPreview`（默认跟随 fixed） | `change(value,item)`、`toggle(open)`；brand、item `{item,active}`、actions `{close}` slots。固定模式自带占位；栏宽不超过 breakpoint 时折叠为三横杠菜单；选择、Escape、外部点击或焦点移出后收起。`fixed=false` 可嵌入容器。参与预览时保留占位并隐藏，退出开始时与黑色背景淡出同步淡入。 |
+| `AppleNavibar` | `v-model: string/number`、`items: AppleItem[]`、`brand`、`brandHref='/'`、`label='主导航'`、`fixed=true`、`breakpoint=640`、`hideOnPreview`（默认跟随 fixed） | `change(value,item)`、`toggle(open)`；brand、item `{item,active}`、actions `{close}` slots。固定模式自带占位；栏宽不超过 breakpoint 时折叠为三横杠菜单；选择、Escape、外部点击或焦点移出后收起。`fixed=false` 可嵌入容器。参与预览时保留占位并隐藏，退出开始时与黑色背景淡出同步执行 300ms 淡入与向下滑入。 |
 | `AppleAside` | M；`hideOnPreview=true` | 原生 aside 容器，布局由调用方提供；图片预览期间保留尺寸、隐藏并禁用交互，退出开始时 140ms 淡入。正常文档流侧栏可设 `hideOnPreview=false`。 |
 | `AppleTabs` | `v-model: string/number`、`items`、`label`、`disabled` | `change(value)`；`panel-${value}` slot `{item}` 或 default `{item,value}`；可非受控；方向键/Home/End。 |
 | `AppleTabBar` | 与 AppleTabs 相同 | 顶角圆角页签，移动选中背景与内容滑动。 |
@@ -107,7 +107,7 @@ validator 返回 `true` 才通过；字符串作为错误信息，`false` 显示
 | `ApplePagination` | `v-model: number=1`、`total=0`、`pageSize=10`、`disabled`、`label` | `change(page)`；页码从 1 开始，total 是总条目数。 |
 | `AppleAccordion` | `v-model: string/number/array`、`items`、`multiple`、`disabled` | `change(value)`；`item-${value}` 或 item slot `{item,open}`；默认内容使用 item.content；multiple 时模型为数组。 |
 | `AppleTable` | `columns: AppleColumn[]`、`rows: Record[]`、`rowKey=id`、`label`、`selectable`、`v-model:selected`、`v-model:sort-by`、`v-model:sort-direction`、`v-model:page`、`pageSize=0`、`loading`、`disabled`、`emptyText` | `sort({key,direction})`、`row-click(row)`；`cell-${key}` slot `{row,value,index}`、empty slot；本地排序/分页；pageSize=0 不分页。 |
-| `AppleTree` | `items: AppleTreeItem[]`、`v-model`、`v-model:expanded`、`disabled`、`label` | `select(item)`；item slot `{item,expanded,selected}`；递归 children；单选与键盘树导航，不含勾选联动。 |
+| `AppleTree` | `items: AppleTreeItem[]`、`v-model`、`v-model:expanded`、`disabled`、`label`、`searchable=true`、`mobileDirectory=true` | 默认顶部搜索；宽度 ≤900px 自动进入全局 SpeedDial 目录，无宿主保留原位。`select(item)`；item slot `{item,expanded,selected}`；递归 children；单选与键盘树导航，不含勾选联动。 |
 | `AppleList` | `items`、`v-model`、`selectable`、`disabled`、`label` | `select(item)`；item slot `{item,selected}`；selectable 时更新模型，否则 href 生成链接。 |
 | `AppleAvatar` | `src`、`name='用户'`、`size=40`、`square` | `error(event)`；default slot；图片失败回退到姓名前两个字符。 |
 | `AppleAvatarGroup` | `items: {name,src?,value?}[]`、`max=4`、`size=36`、`label` | default slot 可替换头像集合；超出数量显示 +N。 |
@@ -123,8 +123,11 @@ validator 返回 `true` 才通过；字符串作为错误信息，`false` 显示
 | `AppleTimeline` | `items: AppleTimelineItem[]`、`orientation=vertical`（horizontal/vertical）、`label` | item slot `{item}`；选项增加 `time?` 和 `tone?: default/success/danger`。 |
 | `ApplePullRefresh` | `v-model: boolean`、`disabled`、`threshold=72`、`label` | `refresh(done)`；default slot `{refresh,refreshing}`；在滚动顶部下拉，也提供刷新按钮；完成必须调用 done 或将 model 设为 false。 |
 | `AppleInfiniteScroll` | `loading`、`error: boolean/string`、`finished`、`disabled`、`distance=120`、`finishedText` | `load(done)`、`retry(done)`；default slot；IntersectionObserver 及手动加载按钮；完成后调用 done，或令 loading 从 true 回到 false。 |
+| `AppleScrollBar` | `target: string/HTMLElement/()=>HTMLElement`、`axis='both'`、`label`、`controls` | `interaction()`；`refresh()`；fixed 悬浮滚动条，不占空间，支持横向/纵向、拖动、轨道点击、键盘及 RTL。AppleProvider 自动接管文档滚动容器，原本隐藏滚动条的控件除外；`data-apple-scrollbar-ignore` 可排除容器。 |
 | `AppleBackTop` | `target: CSS selector=''`、`threshold=300`、`label`、`disabled` | `click(event)`；default slot；空 target 使用 window，达到滚动阈值才显示。 |
-| `AppleFloatingGroup` | `backTop=true`、`threshold=300`、`target`、`label` | default slot 放附加操作，回顶按钮始终排最下；默认固定右下并考虑安全区。 |
+| `AppleFloatingGroup` | `backTop=true`、`threshold=300`、`target`、`label` | default slot 放附加操作，回顶按钮始终排最下；默认固定右下并考虑安全区，与 Navibar 同为 z-index 70；图片预览时隐藏，退出开始时执行 300ms FadeInLeft，尊重 reduced/none 动效。 |
+| `AppleSpeedDial` | `backTop=true`、`threshold=300`、`target`、`label` | App.vue 全局唯一宿主，嵌套 Provider 共享注册表；BackTop 排第一，操作按注册顺序排列，primary 目录按钮排最后。移动目录弹窗保持高高度，多目录用 AppleTabBar 切换。 |
+| `AppleSpeedDialItem` | `label`、`icon`、`disabled`、`visible=true`、`variant='primary'` | `click(event)`；default slot 可放按钮文字；页面声明后自动注册全局宿主，卸载或 KeepAlive 停用时注销；无需父子通信。 |
 | `AppleStatistic` | 必填 `label`；`value: string/number`、`prefix`、`suffix`、`precision=0`、`locale=zh-CN`、`description` | default slot；数值本地化格式，不会自动请求统计数据。 |
 
 `AppleColumn = { key: string; label: string; sortable?: boolean; align?: 'left'|'center'|'right'; width?: number|string; minWidth?: number; maxWidth?: number; resizable?: boolean }`。表格 rows 应提供稳定唯一的 `rowKey`。
@@ -189,7 +192,7 @@ Modal slots：`title`、default `{close}`、footer `{close,confirm,cancel}`。
 
 `AppleMenuItem = { label; value: string|number; disabled?; danger?; description?; icon?: Component }`。
 
-`AppleViewerImage = { src: string; alt?: string; title?: string; width?: number; height?: number }` 仍是 `AppleImage` 可用的公共图片类型。图片数组字符串是 URL；需要可访问描述或标题时传对象。`AppleImageItem` 扩展该类型，`src` 可选以支持 carousel 的自定义内容，另有 `label`、`value`、`description`。顶层不接受 src/alt；index 从 0 开始、默认 0，支持 `v-model:index`，非有限值归零、越界值截取到有效范围。普通图片忽略无效空项；空列表显示占位且不打开预览。点击放大由 `AppleImage` 内部管理，不另行注册独立查看器。
+`AppleViewerImage = { src: string; alt?: string; title?: string; width?: number; height?: number }` 仍是 `AppleImage` 可用的公共图片类型。图片数组字符串是 URL；需要可访问描述或标题时传对象。预览名称可选，使用 title（未提供时使用 label），不以 alt 或编号填充名称。`AppleImageItem` 扩展该类型，`src` 可选以支持 carousel 的自定义内容，另有 `label`、`value`、`description`。顶层不接受 src/alt；index 从 0 开始、默认 0，支持 `v-model:index`，非有限值归零、越界值截取到有效范围。普通图片忽略无效空项；空列表显示占位且不打开预览。点击放大由 `AppleImage` 内部管理，不另行注册独立查看器。
 
 ## 上下文与服务
 
@@ -201,6 +204,7 @@ Modal slots：`title`、default `{close}`、footer `{close,confirm,cancel}`。
 | `theme.value.register(name,tokens,scheme='light')` | 注册自定义主题并补齐基础 token。 |
 | `theme.value.name / resolved / current / themes` | 当前配置名、解析后名称、主题内容、主题注册表。 |
 | `overlays.entries.value` | 当前弹层列表，`Ref<OverlayEntry[]>`。 |
+| `isVerticalScreen.value` | 全局只读 ref，当前视口高度大于宽度时为 true，随 resize/orientationchange 更新；也可独立导入。 |
 | `portalTarget.value` | 弹层挂载 DOM 元素。 |
 | `motion.value.set(mode)` | 即时修改全局动效策略。 |
 | `ripple.value.enabled / set(enabled)` | 全局点击波纹开关，默认 true；也可传入 `createAppleUI({ ripple: false })`。切换到减弱动效或系统开启减少动态效果时自动关闭，可手动开启；只有关闭动效时禁止开启。开启 persist 时保存偏好，嵌套 Provider 共享此开关。 |