vanilla-jui 1.4.5 → 1.4.7

package/src/{components → primitives}/drop.ts

@@ -1,22 +1,18 @@
 import { jsx } from 'vanilla-signal';
 
-import {
-  type ResolveSchema,
-  randomId,
-  resolveProps,
-} from '../utilities/core.ts';
 import {
   type DOMReference,
   type RenderableContent,
   isNode,
-  isRenderableContent,
   normalizeContentNodes,
   resolveElement,
 } from '../utilities/dom.ts';
 import { createEventManager, type IEventManager } from '../utilities/events.ts';
+import { randomId } from '../utilities/id.ts';
+import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
 
-export type DropMode = 'hover' | 'click';
-export type DropPosition =
+type DropMode = 'hover' | 'click';
+type DropPosition =
   | 'auto'
   | 'top-left'
   | 'top-center'
@@ -27,30 +23,30 @@ export type DropPosition =
   | 'left'
   | 'right';
 
-export interface DropClassNames {
+interface DropClassNames {
   root: string;
   container: string;
 }
 
-export type DropClassNameConfig = Partial<DropClassNames>;
+type DropClassNameConfig = Partial<DropClassNames>;
 
-export interface DropDelay {
+interface DropDelay {
   show?: number;
   hide?: number;
 }
 
-export interface DropProps extends Record<string, unknown> {
+interface DropProps extends Record<string, unknown> {
   name?: string | null;
   mode?: DropMode;
   position?: DropPosition;
   offset?: number;
-  content?: RenderableContent<Drop>;
+  content?: RenderableContent<DropInstance>;
   className?: DropClassNameConfig;
   id?: string | null;
   delay?: number | DropDelay;
   hoverIntent?: boolean;
-  onShown?: ((drop: Drop) => void | Promise<void>) | null;
-  onHidden?: ((drop: Drop) => void | Promise<void>) | null;
+  onShown?: ((drop: DropInstance) => void | Promise<void>) | null;
+  onHidden?: ((drop: DropInstance) => void | Promise<void>) | null;
 }
 
 interface ResolvedDropProps extends Record<string, unknown> {
@@ -58,7 +54,7 @@ interface ResolvedDropProps extends Record<string, unknown> {
   mode: DropMode;
   position: DropPosition;
   offset: number;
-  content: RenderableContent<Drop>;
+  content: RenderableContent<DropInstance>;
   className: DropClassNames;
   id: string;
   delay: number | DropDelay;
@@ -76,6 +72,23 @@ interface DropCleanup {
   events: IEventManager;
 }
 
+interface DropDom {
+  root: HTMLElement | null;
+}
+
+interface DropInstance {
+  target: Element | null;
+  props: Record<string, unknown> | null;
+  dom: DropDom;
+  isVisible: boolean;
+  delayShow: number;
+  delayHide: number;
+  show(useDelay?: boolean): void;
+  hide(useDelay?: boolean): void;
+  toggle(): void;
+  destroy(): void;
+}
+
 interface HoverIntentData {
   x: number;
   y: number;
@@ -108,13 +121,11 @@ const DROP_PROPS_SCHEMA = {
   offset: {
     default: 10,
     type: 'number',
-    validate: (value: unknown) => typeof value === 'number' && value >= 0,
-    message: 'expects a positive number or 0.',
+    min: 0,
   },
   content: {
     default: '',
-    validate: isRenderableContent,
-    message: 'expects string, Node, array, function or null.',
+    type: 'renderable',
   },
   className: {
     default: DEFAULT_CLASS_NAMES,
@@ -149,7 +160,7 @@ 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<Drop>,
+    content: props.content as RenderableContent<DropInstance>,
     className: props.className as DropClassNames,
     id: props.id as string,
     delay: props.delay as number | DropDelay,
@@ -177,10 +188,10 @@ function normalizeDelay(delay: number | DropDelay): Required<DropDelay> {
  *
  * 可用于菜单、提示、下拉面板等场景，支持点击或 hover 触发，并自动计算视口内位置。
  */
-export class Drop {
+class Drop implements DropInstance {
   target: Element | null;
   props: ResolvedDropProps | null;
-  root: HTMLElement | null;
+  dom: DropDom;
   isVisible: boolean;
   cleanup: DropCleanup | null;
   delayShow: number;
@@ -193,7 +204,7 @@ export class Drop {
   constructor(element: DOMReference, options: DropProps = {}) {
     this.target = resolveElement(element);
     this.props = normalizeProps(options);
-    this.root = null;
+    this.dom = { root: null };
     this.isVisible = false;
     this.cleanup = null;
     this.delayShow = 0;
@@ -230,7 +241,7 @@ export class Drop {
             children: normalizeContentNodes(content, this),
           });
 
-    this.root = jsx('div', {
+    this.dom.root = jsx('div', {
       className: className.root,
       id,
       'data-drop': name || randomId(),
@@ -271,13 +282,10 @@ export class Drop {
   }
 
   private bindRootEvents(): void {
-    if (!this.root || this.props?.mode !== 'hover' || !this.cleanup) return;
-    this.cleanup.events.on('root:enter', this.root, 'mouseenter', () =>
-      this.show()
-    );
-    this.cleanup.events.on('root:leave', this.root, 'mouseleave', () =>
-      this.hide()
-    );
+    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 {
@@ -331,10 +339,10 @@ export class Drop {
   }
 
   private setPosition(): void {
-    if (!this.target || !this.root || !this.props) return;
+    if (!this.target || !this.dom.root || !this.props) return;
 
     const rect = this.target.getBoundingClientRect();
-    const drop = this.root;
+    const drop = this.dom.root;
     const { offset, position } = this.props;
 
     drop.style.visibility = 'hidden';
@@ -398,9 +406,9 @@ export class Drop {
 
   private docClick(event: Event): void {
     if (!(event.target instanceof Node)) return;
-    if (!this.root || !this.target) return;
+    if (!this.dom.root || !this.target) return;
     if (
-      !this.root.contains(event.target) &&
+      !this.dom.root.contains(event.target) &&
       !this.target.contains(event.target)
     ) {
       this.hide();
@@ -408,21 +416,22 @@ export class Drop {
   }
 
   private exec(visible: boolean): void {
-    if (!this.root || !this.props) return;
+    const { root } = this.dom;
+    if (!root || !this.props) return;
 
     if (visible) {
-      if (!this.root.parentNode) document.body.appendChild(this.root);
+      if (!root.parentNode) document.body.appendChild(root);
       this.bindRootEvents();
       this.setPosition();
     } else {
       this.unbindRootEvents();
-      this.root.style.top = '';
-      this.root.style.left = '';
-      this.root.remove();
+      root.style.top = '';
+      root.style.left = '';
+      root.remove();
     }
 
-    this.root.setAttribute('aria-hidden', visible ? 'false' : 'true');
-    this.root.setAttribute('aria-expanded', visible ? 'true' : 'false');
+    root.setAttribute('aria-hidden', visible ? 'false' : 'true');
+    root.setAttribute('aria-expanded', visible ? 'true' : 'false');
 
     this.isVisible = visible;
   }
@@ -467,10 +476,10 @@ export class Drop {
     if (this.timer.hide) clearTimeout(this.timer.hide);
 
     this.unbindEvents();
-    this.root?.remove();
+    this.dom.root?.remove();
 
     this.props = null;
-    this.root = null;
+    this.dom.root = null;
     this.target = null;
     this.timer = { show: null, hide: null };
     this.cleanup?.events.clear();
@@ -480,8 +489,8 @@ export class Drop {
 }
 
 export function createDrop(
-  container: DOMReference,
-  input: DropProps = {}
-): Drop {
-  return new Drop(container, input);
+  element: DOMReference,
+  props: DropProps = {}
+): DropInstance {
+  return new Drop(element, props);
 }

package/src/{components → primitives}/icons.ts

@@ -20,7 +20,7 @@ function assertIconName(name: IconName): void {
 
 function svgMarkup(name: IconName): string {
   assertIconName(name);
-  return `<svg xmlns="${SVG_NS}" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">${defaultSvgObjects[name]}</svg>`;
+  return `<svg xmlns="${SVG_NS}" viewBox="0 0 24 24" fill="currentColor">${defaultSvgObjects[name]}</svg>`;
 }
 
 function isSVGElement(value: Element | null): value is SVGElement {

package/src/primitives/loading.ts

@@ -0,0 +1,23 @@
+import { jsx } from 'vanilla-signal';
+
+import { icon } from './icons.ts';
+/**
+ * 创建通用加载状态节点
+ * 定位 absolute 撑满父元素 居中 背景模糊滤镜
+ * @returns {HTMLElement}
+ */
+export function createLoading(): HTMLDivElement {
+  return jsx('div', {
+    'aria-live': 'polite',
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      backdropFilter: 'blur(4px)',
+    },
+    children: icon('loader', { width: 24, className: 'animate-spin' }),
+  });
+}

package/src/primitives/parabola.ts

@@ -0,0 +1,388 @@
+import { jsx } from 'vanilla-signal';
+
+import { type DOMReference, resolveElement } from '../utilities/dom.ts';
+import { randomId } from '../utilities/id.ts';
+import { timer } from '../utilities/timer.ts';
+import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
+
+type ParabolaDirection =
+  | 'center'
+  | 'top-right'
+  | 'top-left'
+  | 'bottom-right'
+  | 'bottom-left';
+
+interface ParabolaBallProps {
+  color: string;
+  size: string;
+}
+
+interface ParabolaClassNames {
+  ball: string;
+}
+
+type ParabolaClassNameConfig = Partial<ParabolaClassNames>;
+
+interface ParabolaProps extends Record<string, unknown> {
+  ball?: ParabolaBallProps;
+  className?: ParabolaClassNameConfig;
+  from?: DOMReference;
+  to?: DOMReference;
+  direction?: ParabolaDirection;
+  showDelay?: number;
+  onShow?: ((parabola: ParabolaInstance) => void) | null;
+  onHidden?: ((parabola: ParabolaInstance) => void) | null;
+}
+
+interface ResolvedParabolaProps extends Record<string, unknown> {
+  ball: ParabolaBallProps;
+  className: ParabolaClassNames;
+  from: DOMReference;
+  to: DOMReference;
+  direction: ParabolaDirection;
+  showDelay: number;
+  onShow: ((parabola: ParabolaInstance) => void) | null;
+  onHidden: ((parabola: ParabolaInstance) => void) | null;
+}
+
+interface ParabolaDOM {
+  root: HTMLElement | null;
+  from: Element | null;
+  to: Element | null;
+  balls: Set<HTMLElement>;
+}
+
+interface ParabolaRuntime {
+  destroyed: boolean;
+}
+
+interface ParabolaCache {
+  delays: Map<string, () => void>;
+}
+
+interface ParabolaPath {
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+}
+
+interface ParabolaInstance {
+  props: ResolvedParabolaProps;
+  dom: ParabolaDOM;
+  runtime: ParabolaRuntime;
+  show(): Promise<boolean>;
+  destroy(): void;
+}
+
+const DEFAULT_BALL: ParabolaBallProps = {
+  color: 'var(--tone-solid)',
+  size: '12px',
+};
+
+const DEFAULT_CLASS_NAMES: ParabolaClassNames = {
+  ball: 'parabola-ball',
+};
+
+const ELEMENT_REF_RULE = {
+  types: ['string', 'Node', 'array', 'null', 'undefined'],
+};
+
+const PARABOLA_PROPS_SCHEMA = {
+  ball: {
+    default: DEFAULT_BALL,
+    type: 'plainObject',
+    normalize: (value: unknown) => ({
+      ...DEFAULT_BALL,
+      ...(value && typeof value === 'object' ? value : {}),
+    }),
+    shape: {
+      color: 'string',
+      size: 'string',
+    },
+  },
+  className: {
+    default: DEFAULT_CLASS_NAMES,
+    type: 'object',
+    normalize: (value: unknown) => ({
+      ...DEFAULT_CLASS_NAMES,
+      ...(value && typeof value === 'object' ? value : {}),
+    }),
+  },
+  from: { default: null, ...ELEMENT_REF_RULE },
+  to: { default: null, ...ELEMENT_REF_RULE },
+  direction: {
+    default: 'center',
+    type: 'string',
+    enum: ['center', 'top-right', 'top-left', 'bottom-right', 'bottom-left'],
+  },
+  showDelay: { default: 0, type: 'number' },
+  onShow: { default: null, types: ['function', 'null'] },
+  onHidden: { default: null, types: ['function', 'null'] },
+} satisfies ResolveSchema<ParabolaProps>;
+
+function normalizeProps(input: ParabolaProps): ResolvedParabolaProps {
+  const props = resolveProps(input, PARABOLA_PROPS_SCHEMA, 'Parabola.props');
+  return {
+    ball: props.ball as ParabolaBallProps,
+    className: props.className as ParabolaClassNames,
+    from: props.from as DOMReference,
+    to: props.to as DOMReference,
+    direction: props.direction as ParabolaDirection,
+    showDelay: props.showDelay as number,
+    onShow: props.onShow as ResolvedParabolaProps['onShow'],
+    onHidden: props.onHidden as ResolvedParabolaProps['onHidden'],
+  };
+}
+
+class Parabola implements ParabolaInstance {
+  props: ResolvedParabolaProps;
+  dom: ParabolaDOM;
+  runtime: ParabolaRuntime;
+  cache: ParabolaCache;
+
+  constructor(props: ParabolaProps = {}) {
+    this.props = normalizeProps(props);
+    this.dom = {
+      root: null,
+      from: resolveElement(this.props.from),
+      to: resolveElement(this.props.to),
+      balls: new Set(),
+    };
+    this.runtime = {
+      destroyed: false,
+    };
+    this.cache = {
+      delays: new Map(),
+    };
+
+    this.createRoot();
+  }
+
+  private createRoot(): void {
+    if (this.runtime.destroyed) return;
+
+    if (this.dom.root) {
+      if (!this.dom.root.isConnected) document.body.appendChild(this.dom.root);
+      return;
+    }
+
+    this.dom.root = jsx('div', {
+      'data-parabola': 'root',
+      style: {
+        position: 'fixed',
+        inset: '0',
+        pointerEvents: 'none',
+        zIndex: '9999',
+      },
+    }) as HTMLElement;
+    document.body.appendChild(this.dom.root);
+  }
+
+  private createBall(path: ParabolaPath): HTMLElement | null {
+    if (this.runtime.destroyed) return null;
+
+    this.createRoot();
+    if (!this.dom.root) return null;
+
+    const { color, size } = this.props.ball;
+
+    const ball = jsx('div', {
+      className: this.props.className.ball,
+      'data-parabola': 'ball',
+      style: {
+        backgroundColor: color,
+        width: size,
+        height: size,
+        position: 'fixed',
+        borderRadius: '50%',
+        transform: 'translate(-50%, -50%)',
+        pointerEvents: 'none',
+        zIndex: '9999',
+        opacity: '1',
+        left: `${path.startX}px`,
+        top: `${path.startY}px`,
+      },
+    }) as HTMLElement;
+    this.dom.root.appendChild(ball);
+    this.dom.balls.add(ball);
+
+    return ball;
+  }
+
+  private resolveTargets(): void {
+    this.dom.from = resolveElement(this.props.from);
+    this.dom.to = resolveElement(this.props.to);
+  }
+
+  private calculatePath(): ParabolaPath | null {
+    const fromRect = this.dom.from?.getBoundingClientRect();
+    const toRect = this.dom.to?.getBoundingClientRect();
+
+    if (!fromRect || !toRect) return null;
+
+    const { left: fL, top: fT, width: fW, height: fH } = fromRect;
+    const { left: tL, top: tT, width: tW, height: tH } = toRect;
+
+    let startX: number;
+    let startY: number;
+    switch (this.props.direction) {
+      case 'top-left':
+        startX = fL + fW * 0.2;
+        startY = fT + fH * 0.2;
+        break;
+      case 'top-right':
+        startX = fL + fW * 0.8;
+        startY = fT + fH * 0.2;
+        break;
+      case 'bottom-left':
+        startX = fL + fW * 0.2;
+        startY = fT + fH * 0.8;
+        break;
+      case 'bottom-right':
+        startX = fL + fW * 0.8;
+        startY = fT + fH * 0.8;
+        break;
+      default:
+        startX = fL + fW / 2;
+        startY = fT + fH / 2;
+    }
+
+    const endX = tL + tW / 2;
+    const endY = tT + tH / 2;
+
+    return { startX, startY, endX, endY };
+  }
+
+  private easeOutCubic(t: number): number {
+    return 1 - (1 - t) ** 3;
+  }
+
+  private animate(
+    ball: HTMLElement,
+    startX: number,
+    startY: number,
+    endX: number,
+    endY: number,
+    duration = 800
+  ): void {
+    if (!ball.isConnected) return;
+
+    const startTime = performance.now();
+    const deltaX = endX - startX;
+    const deltaY = endY - startY;
+    const peakOffset = -100;
+
+    const step = (currentTime: number): void => {
+      if (!ball.isConnected) return;
+
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = this.easeOutCubic(progress);
+
+      const currentX = startX + deltaX * eased;
+      const currentY =
+        startY + peakOffset * Math.sin(Math.PI * eased) + deltaY * eased;
+
+      const opacity = 1 - progress;
+
+      ball.style.left = `${currentX}px`;
+      ball.style.top = `${currentY}px`;
+      ball.style.opacity = `${opacity}`;
+      ball.style.transform = `translate(-50%, -50%) scale(${1 - eased * 0.3})`;
+
+      if (progress < 1) {
+        requestAnimationFrame(step);
+      } else {
+        this.removeBall(ball, true);
+      }
+    };
+
+    requestAnimationFrame(step);
+  }
+
+  private startDelay(callback: () => void, onCancel: () => void): void {
+    const key = `parabola-show-${randomId()}`;
+    this.cache.delays.set(key, onCancel);
+
+    timer.start(key, this.props.showDelay, () => {
+      this.cache.delays.delete(key);
+      callback();
+    });
+  }
+
+  private cancelDelays(): void {
+    for (const [key, onCancel] of this.cache.delays) {
+      timer.cancel(key);
+      onCancel();
+    }
+    this.cache.delays.clear();
+  }
+
+  private removeBall(ball: HTMLElement, notify: boolean): void {
+    if (!this.dom.balls.has(ball)) return;
+
+    ball.remove();
+    this.dom.balls.delete(ball);
+
+    if (notify) this.props.onHidden?.(this);
+    this.removeRootIfIdle();
+  }
+
+  private removeRootIfIdle(): void {
+    if (!this.runtime.destroyed || this.dom.balls.size > 0) return;
+
+    this.dom.root?.remove();
+    this.dom.root = null;
+  }
+
+  show(): Promise<boolean> {
+    if (this.runtime.destroyed) return Promise.resolve(false);
+
+    return new Promise((resolve) => {
+      this.startDelay(
+        () => {
+          if (this.runtime.destroyed) {
+            resolve(false);
+            return;
+          }
+
+          this.resolveTargets();
+
+          const path = this.calculatePath();
+          if (!path) {
+            resolve(false);
+            return;
+          }
+
+          const ball = this.createBall(path);
+          if (!ball) {
+            resolve(false);
+            return;
+          }
+
+          this.props.onShow?.(this);
+
+          this.animate(ball, path.startX, path.startY, path.endX, path.endY);
+          resolve(true);
+        },
+        () => resolve(false)
+      );
+    });
+  }
+
+  destroy(): void {
+    if (this.runtime.destroyed) return;
+
+    this.cancelDelays();
+
+    this.dom.from = null;
+    this.dom.to = null;
+    this.runtime.destroyed = true;
+    this.removeRootIfIdle();
+  }
+}
+
+export function createParabola(props: ParabolaProps = {}): ParabolaInstance {
+  return new Parabola(props);
+}