vanilla-jui 1.4.8 → 1.5.1

package/src/primitives/drop.ts

@@ -1,15 +1,14 @@
-import { jsx } from 'vanilla-signal';
+import { createRoot, createSignal, insert, jsx } from 'vanilla-signal';
 
 import {
   type DOMReference,
   type RenderableContent,
-  isNode,
-  normalizeContentNodes,
   resolveElement,
 } from '../utilities/dom.ts';
-import { createEventManager, type IEventManager } from '../utilities/events.ts';
+import { createEventManager } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
 import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
+import { createLoading } from './loading.ts';
 
 type DropMode = 'hover' | 'click';
 type DropPosition =
@@ -35,12 +34,22 @@ interface DropDelay {
   hide?: number;
 }
 
+type DropContent =
+  | RenderableContent<DropInstance>
+  | ((
+      drop: DropInstance
+    ) =>
+      | RenderableContent<DropInstance>
+      | Promise<RenderableContent<DropInstance>>);
+
 interface DropProps extends Record<string, unknown> {
   name?: string | null;
   mode?: DropMode;
   position?: DropPosition;
   offset?: number;
-  content?: RenderableContent<DropInstance>;
+  content?: DropContent;
+  cache?: boolean;
+  ttl?: number;
   className?: DropClassNameConfig;
   id?: string | null;
   delay?: number | DropDelay;
@@ -54,7 +63,9 @@ interface ResolvedDropProps extends Record<string, unknown> {
   mode: DropMode;
   position: DropPosition;
   offset: number;
-  content: RenderableContent<DropInstance>;
+  content: DropContent;
+  cache: boolean;
+  ttl: number;
   className: DropClassNames;
   id: string;
   delay: number | DropDelay;
@@ -68,21 +79,18 @@ interface DropTimer {
   hide: ReturnType<typeof setTimeout> | null;
 }
 
-interface DropCleanup {
-  events: IEventManager;
-}
-
-interface DropDom {
-  root: HTMLElement | null;
+interface DropContentCacheEntry {
+  content: RenderableContent<DropInstance>;
+  updatedAt: number;
 }
 
-interface DropInstance {
-  target: Element | null;
-  props: Record<string, unknown> | null;
-  dom: DropDom;
-  isVisible: boolean;
-  delayShow: number;
-  delayHide: number;
+export interface DropInstance {
+  readonly target: Element | null;
+  readonly props: ResolvedDropProps;
+  readonly element: HTMLElement | null;
+  readonly isVisible: boolean;
+  readonly delayShow: number;
+  readonly delayHide: number;
   show(useDelay?: boolean): void;
   hide(useDelay?: boolean): void;
   toggle(): void;
@@ -127,6 +135,12 @@ const DROP_PROPS_SCHEMA = {
     default: '',
     type: 'renderable',
   },
+  cache: { default: false, type: 'boolean' },
+  ttl: {
+    default: 0,
+    type: 'number',
+    min: 0,
+  },
   className: {
     default: DEFAULT_CLASS_NAMES,
     type: 'object',
@@ -160,7 +174,9 @@ function normalizeProps(input: DropProps): ResolvedDropProps {
     mode: props.mode as DropMode,
     position: props.position as DropPosition,
     offset: props.offset as number,
-    content: props.content as RenderableContent<DropInstance>,
+    content: props.content as DropContent,
+    cache: props.cache as boolean,
+    ttl: props.ttl as number,
     className: props.className as DropClassNames,
     id: props.id as string,
     delay: props.delay as number | DropDelay,
@@ -183,171 +199,117 @@ function normalizeDelay(delay: number | DropDelay): Required<DropDelay> {
   return { show: 0, hide: 0 };
 }
 
+function normalizeTtl(ttl: number | undefined): number {
+  return typeof ttl === 'number' && ttl > 0 ? ttl : 0;
+}
+
 /**
  * 通用浮层组件。
  *
  * 可用于菜单、提示、下拉面板等场景，支持点击或 hover 触发，并自动计算视口内位置。
  */
-class Drop implements DropInstance {
-  target: Element | null;
-  props: ResolvedDropProps | null;
-  dom: DropDom;
-  isVisible: boolean;
-  cleanup: DropCleanup | null;
-  delayShow: number;
-  delayHide: number;
-  private timer: DropTimer;
-  private hoverIntentData: HoverIntentData;
-  private lastX: number;
-  private lastY: number;
-
-  constructor(element: DOMReference, options: DropProps = {}) {
-    this.target = resolveElement(element);
-    this.props = normalizeProps(options);
-    this.dom = { root: null };
-    this.isVisible = false;
-    this.cleanup = null;
-    this.delayShow = 0;
-    this.delayHide = 0;
-    this.timer = { show: null, hide: null };
-    this.hoverIntentData = { x: 0, y: 0, lastMoveTime: 0 };
-    this.lastX = 0;
-    this.lastY = 0;
-
-    this.init(this.props);
-  }
-
-  private init(props: ResolvedDropProps): void {
-    this.cleanup = {
-      events: createEventManager(),
+export function createDrop(
+  reference: DOMReference,
+  input: DropProps = {}
+): DropInstance {
+  let target = resolveElement(reference);
+  const props = normalizeProps(input);
+  const events = createEventManager();
+  const delay = normalizeDelay(props.delay);
+  const timer: DropTimer = { show: null, hide: null };
+  const hoverIntentData: HoverIntentData = { x: 0, y: 0, lastMoveTime: 0 };
+  let lastX = 0;
+  let lastY = 0;
+  let visible = false;
+  let destroyed = false;
+  let drop!: DropInstance;
+  let contentCache: DropContentCacheEntry | null = null;
+  let pending: Promise<void> | null = null;
+  let loadId = 0;
+  let disposeView = (): void => {};
+  const [content, setContent] = createSignal<RenderableContent<DropInstance>>(
+    typeof props.content === 'function' ? null : props.content
+  );
+  const [loading, setLoading] = createSignal(false);
+  const renderContent = (): RenderableContent<DropInstance> => {
+    if (loading()) return createLoading();
+    const value = content();
+    if (typeof value === 'function') return value(drop);
+    return value;
+  };
+  const { root } = createRoot((dispose) => {
+    disposeView = dispose;
+    const wrapper = jsx('div', {
+      className: props.className.container,
+      'data-drop-container': props.name || props.id,
+      'aria-live': () =>
+        typeof props.content === 'function' ? 'polite' : null,
+      'aria-busy': () => String(loading()),
+      children: renderContent,
+    });
+    return {
+      root: jsx('div', {
+        className: props.className.root,
+        id: props.id,
+        'data-drop': props.name || randomId(),
+        'aria-expanded': 'false',
+        children: wrapper,
+      }) as HTMLElement,
     };
+  });
 
-    const delay = normalizeDelay(props.delay);
-    this.delayShow = delay.show;
-    this.delayHide = delay.hide;
-
-    this.buildDrop(props);
-    this.bindEvents(props);
-  }
-
-  private buildDrop(props: ResolvedDropProps): void {
-    const { className, content, id, name } = props;
-    const wrapper =
-      isNode(content) && content.nodeType === Node.ELEMENT_NODE
-        ? content
-        : jsx('div', {
-            className: className.container,
-            'data-drop-container': name || id,
-            children: normalizeContentNodes(content, this),
-          });
-
-    this.dom.root = jsx('div', {
-      className: className.root,
-      id,
-      'data-drop': name || randomId(),
-      children: wrapper,
-    }) as HTMLElement;
-  }
-
-  private bindEvents(props: ResolvedDropProps): void {
-    const { mode, hoverIntent } = props;
-    this.unbindEvents();
-
-    if (!this.target || !this.cleanup) return;
-
-    if (mode === 'hover') {
-      if (hoverIntent) {
-        this.cleanup.events.on('target:enter', this.target, 'mouseenter', () =>
-          this.startHoverIntent()
-        );
-        this.cleanup.events.on('target:leave', this.target, 'mouseleave', () =>
-          this.cancelHoverIntent()
-        );
-      } else {
-        this.cleanup.events.on('target:enter', this.target, 'mouseenter', () =>
-          this.show()
-        );
-        this.cleanup.events.on('target:leave', this.target, 'mouseleave', () =>
-          this.hide()
-        );
-      }
-    } else {
-      this.cleanup.events.on('target:click', this.target, 'click', () =>
-        this.toggle()
-      );
-      this.cleanup.events.on('document:click', document, 'click', (event) =>
-        this.docClick(event)
-      );
+  const cancelTimer = (key: keyof DropTimer): void => {
+    if (timer[key]) clearTimeout(timer[key]);
+    timer[key] = null;
+  };
+  const loadContent = async (): Promise<void> => {
+    const source = props.content;
+    if (typeof source !== 'function') {
+      setContent(source);
+      return;
     }
-  }
-
-  private bindRootEvents(): void {
-    const { root } = this.dom;
-    if (!root || this.props?.mode !== 'hover' || !this.cleanup) return;
-    this.cleanup.events.on('root:enter', root, 'mouseenter', () => this.show());
-    this.cleanup.events.on('root:leave', root, 'mouseleave', () => this.hide());
-  }
-
-  private unbindRootEvents(): void {
-    this.cleanup?.events.off('root:enter');
-    this.cleanup?.events.off('root:leave');
-  }
-
-  private unbindEvents(): void {
-    this.cleanup?.events.clear();
-  }
-
-  private startHoverIntent(): void {
-    if (!this.cleanup) return;
-
-    this.cleanup.events.on(
-      'document:mousemove',
-      document,
-      'mousemove',
-      (event) => this.onMouseMove(event)
-    );
 
-    if (this.timer.show) clearTimeout(this.timer.show);
-    this.timer.show = setTimeout(() => {
-      const now = Date.now();
-      const dt = now - this.hoverIntentData.lastMoveTime;
-      const dx = Math.abs(this.hoverIntentData.x - this.lastX);
-      const dy = Math.abs(this.hoverIntentData.y - this.lastY);
-      const dist = dx + dy;
-      if (dist < 5 || dt > 100) {
-        this.show();
-        this.cleanup?.events.off('document:mousemove');
-      } else {
-        this.startHoverIntent();
-      }
-    }, this.delayShow);
-  }
-
-  private cancelHoverIntent(): void {
-    if (this.timer.show) clearTimeout(this.timer.show);
-    this.cleanup?.events.off('document:mousemove');
-    this.hide();
-  }
-
-  private onMouseMove(event: Event): void {
-    if (!(event instanceof MouseEvent)) return;
-    this.lastX = event.clientX;
-    this.lastY = event.clientY;
-    this.hoverIntentData.lastMoveTime = Date.now();
-    this.hoverIntentData.x = event.clientX;
-    this.hoverIntentData.y = event.clientY;
-  }
-
-  private setPosition(): void {
-    if (!this.target || !this.dom.root || !this.props) return;
-
-    const rect = this.target.getBoundingClientRect();
-    const drop = this.dom.root;
-    const { offset, position } = this.props;
+    const ttl = normalizeTtl(props.ttl);
+    if (
+      props.cache &&
+      contentCache &&
+      (!ttl || Date.now() - contentCache.updatedAt <= ttl)
+    ) {
+      setContent(contentCache.content);
+      return;
+    }
 
-    drop.style.visibility = 'hidden';
-    drop.style.display = 'block';
-    const dropRect = drop.getBoundingClientRect();
+    if (pending) return pending;
+
+    const request = ++loadId;
+    setLoading(true);
+    const task = Promise.resolve()
+      .then(() => source(drop))
+      .then((result) => {
+        if (destroyed || request !== loadId) return;
+        if (props.cache) {
+          contentCache = {
+            content: result,
+            updatedAt: Date.now(),
+          };
+        }
+        setContent(result);
+      })
+      .finally(() => {
+        if (request === loadId && !destroyed) setLoading(false);
+        if (pending === task) pending = null;
+      });
+    pending = task;
+    return task;
+  };
+  const setPosition = (): void => {
+    if (!target) return;
+    const rect = target.getBoundingClientRect();
+    const { offset, position } = props;
+
+    root.style.visibility = 'hidden';
+    root.style.display = 'block';
+    const dropRect = root.getBoundingClientRect();
     let top = 0;
     let left = 0;
     let pos = position;
@@ -355,7 +317,7 @@ class Drop implements DropInstance {
     if (pos === 'auto') {
       const spaceBelow = window.innerHeight - rect.bottom;
       pos =
-        spaceBelow > dropRect.height + offset ? 'top-center' : 'bottom-center';
+        spaceBelow > dropRect.height + offset ? 'bottom-center' : 'top-center';
     }
 
     switch (pos) {
@@ -398,99 +360,128 @@ class Drop implements DropInstance {
     top = Math.max(8, Math.min(top, window.innerHeight - dropRect.height - 8));
     left = Math.max(8, Math.min(left, window.innerWidth - dropRect.width - 8));
 
-    drop.style.top = `${top + window.scrollY}px`;
-    drop.style.left = `${left + window.scrollX}px`;
-    drop.style.visibility = '';
-    drop.style.display = '';
-  }
-
-  private docClick(event: Event): void {
-    if (!(event.target instanceof Node)) return;
-    if (!this.dom.root || !this.target) return;
-    if (
-      !this.dom.root.contains(event.target) &&
-      !this.target.contains(event.target)
-    ) {
-      this.hide();
-    }
-  }
-
-  private exec(visible: boolean): void {
-    const { root } = this.dom;
-    if (!root || !this.props) return;
-
-    if (visible) {
-      if (!root.parentNode) document.body.appendChild(root);
-      this.bindRootEvents();
-      this.setPosition();
+    root.style.top = `${top + window.scrollY}px`;
+    root.style.left = `${left + window.scrollX}px`;
+    root.style.visibility = '';
+    root.style.display = '';
+  };
+  const applyVisible = (next: boolean): void => {
+    if (destroyed || visible === next) return;
+    if (next) {
+      if (!root.parentNode) insert(document.body, root);
+      setPosition();
+      void loadContent().then(() => {
+        if (visible && !destroyed) setPosition();
+      });
     } else {
-      this.unbindRootEvents();
+      loadId += 1;
+      pending = null;
+      setLoading(false);
       root.style.top = '';
       root.style.left = '';
       root.remove();
     }
-
-    root.setAttribute('aria-hidden', visible ? 'false' : 'true');
-    root.setAttribute('aria-expanded', visible ? 'true' : 'false');
-
-    this.isVisible = visible;
-  }
-
-  show(useDelay = true): void {
-    if (this.timer.hide) clearTimeout(this.timer.hide);
-    if (this.isVisible) return;
-
-    if (useDelay && this.delayShow > 0) {
-      if (this.timer.show) clearTimeout(this.timer.show);
-      this.timer.show = setTimeout(() => this.exec(true), this.delayShow);
-    } else {
-      this.exec(true);
+    root.setAttribute('aria-expanded', next ? 'true' : 'false');
+    visible = next;
+    void (next ? props.onShown?.(drop) : props.onHidden?.(drop));
+  };
+  const docClick = (event: Event): void => {
+    if (!(event.target instanceof Node)) return;
+    if (!target) return;
+    if (!root.contains(event.target) && !target.contains(event.target)) {
+      drop.hide();
     }
-
-    void this.props?.onShown?.(this);
-  }
-
-  hide(useDelay = true): void {
-    if (this.timer.show) clearTimeout(this.timer.show);
-    if (!this.isVisible) return;
-
-    if (useDelay && this.delayHide > 0) {
-      if (this.timer.hide) clearTimeout(this.timer.hide);
-      this.timer.hide = setTimeout(() => this.exec(false), this.delayHide);
+  };
+  const onMouseMove = (event: Event): void => {
+    if (!(event instanceof MouseEvent)) return;
+    lastX = event.clientX;
+    lastY = event.clientY;
+    hoverIntentData.lastMoveTime = Date.now();
+    hoverIntentData.x = event.clientX;
+    hoverIntentData.y = event.clientY;
+  };
+  const startHoverIntent = (): void => {
+    events.on('document:mousemove', document, 'mousemove', onMouseMove);
+    cancelTimer('show');
+    timer.show = setTimeout(() => {
+      const elapsed = Date.now() - hoverIntentData.lastMoveTime;
+      const distance =
+        Math.abs(hoverIntentData.x - lastX) +
+        Math.abs(hoverIntentData.y - lastY);
+      if (distance < 5 || elapsed > 100) {
+        drop.show(false);
+        events.off('document:mousemove');
+      } else startHoverIntent();
+    }, delay.show);
+  };
+  const bindEvents = (): void => {
+    if (!target) return;
+    if (props.mode === 'hover') {
+      events.on('target:enter', target, 'mouseenter', () => {
+        if (props.hoverIntent) startHoverIntent();
+        else drop.show();
+      });
+      events.on('target:leave', target, 'mouseleave', () => {
+        cancelTimer('show');
+        events.off('document:mousemove');
+        drop.hide();
+      });
+      events.on('root:enter', root, 'mouseenter', () => drop.show());
+      events.on('root:leave', root, 'mouseleave', () => drop.hide());
     } else {
-      this.exec(false);
+      events.on('target:click', target, 'click', () => drop.toggle());
+      events.on('document:click', document, 'click', docClick);
     }
+  };
 
-    void this.props?.onHidden?.(this);
-  }
-
-  toggle(): void {
-    if (this.isVisible) this.hide();
-    else this.show();
-  }
-
-  destroy(): void {
-    if (!this.props) return;
-
-    if (this.timer.show) clearTimeout(this.timer.show);
-    if (this.timer.hide) clearTimeout(this.timer.hide);
-
-    this.unbindEvents();
-    this.dom.root?.remove();
-
-    this.props = null;
-    this.dom.root = null;
-    this.target = null;
-    this.timer = { show: null, hide: null };
-    this.cleanup?.events.clear();
-    this.cleanup = null;
-    this.isVisible = false;
-  }
-}
-
-export function createDrop(
-  element: DOMReference,
-  props: DropProps = {}
-): DropInstance {
-  return new Drop(element, props);
+  drop = {
+    get target() {
+      return target;
+    },
+    props,
+    get element() {
+      return destroyed ? null : root;
+    },
+    get isVisible() {
+      return visible;
+    },
+    delayShow: delay.show,
+    delayHide: delay.hide,
+    show(useDelay = true) {
+      cancelTimer('hide');
+      if (visible || destroyed) return;
+      if (useDelay && delay.show > 0) {
+        cancelTimer('show');
+        timer.show = setTimeout(() => applyVisible(true), delay.show);
+      } else applyVisible(true);
+    },
+    hide(useDelay = true) {
+      cancelTimer('show');
+      if (!visible || destroyed) return;
+      if (useDelay && delay.hide > 0) {
+        cancelTimer('hide');
+        timer.hide = setTimeout(() => applyVisible(false), delay.hide);
+      } else applyVisible(false);
+    },
+    toggle() {
+      if (visible) drop.hide();
+      else drop.show();
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      cancelTimer('show');
+      cancelTimer('hide');
+      events.clear();
+      loadId += 1;
+      pending = null;
+      setLoading(false);
+      root.remove();
+      disposeView();
+      target = null;
+      visible = false;
+    },
+  };
+  bindEvents();
+  return drop;
 }

package/src/primitives/loading.ts

@@ -1,23 +1,41 @@
 import { jsx } from 'vanilla-signal';
 
 import { icon } from './icons.ts';
+
+export type flexPosition = 'center' | 'flex-start' | 'flex-end';
 /**
  * 创建通用加载状态节点
  * 定位 absolute 撑满父元素 居中 背景模糊滤镜
  * @returns {HTMLElement}
  */
-export function createLoading(): HTMLDivElement {
+export function createLoading(
+  xDirection: flexPosition = 'center',
+  yDirection: flexPosition = 'center'
+): HTMLDivElement {
+  const i = icon('loader', { width: 24 });
+  requestAnimationFrame(() => {
+    if (typeof i.animate !== 'function') return;
+    i.animate(
+      [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
+      {
+        duration: 1000,
+        iterations: Infinity,
+        easing: 'linear',
+      }
+    );
+  });
   return jsx('div', {
     'aria-live': 'polite',
     style: {
       display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
+      justifyContent: xDirection,
+      alignItems: yDirection,
       position: 'absolute',
       width: '100%',
       height: '100%',
+      borderRadius: 'inherit',
       backdropFilter: 'blur(4px)',
     },
-    children: icon('loader', { width: 24, className: 'animate-spin' }),
+    children: i,
   });
 }