vanilla-jui 1.4.8 → 1.5.1

package/src/core/presence.ts

@@ -0,0 +1,233 @@
+import { flushSync } from 'vanilla-signal';
+
+import { type MotionController } from './motion.ts';
+
+export type PresencePhase = 'hidden' | 'entering' | 'visible' | 'leaving';
+
+export interface PresenceOptions {
+  elements: () => readonly (Element | null | undefined)[];
+  mount: () => void;
+  activate: () => void;
+  deactivate: () => void;
+  unmount: () => void;
+  motion?: MotionController;
+}
+
+export interface PresenceController {
+  readonly phase: PresencePhase;
+  enter: () => Promise<boolean>;
+  leave: () => Promise<boolean>;
+  cancel: () => void;
+}
+
+function connectedElements(
+  values: readonly (Element | null | undefined)[]
+): Element[] {
+  return values.filter(
+    (value): value is Element => value != null && value.isConnected
+  );
+}
+
+function commitInitialStyles(elements: readonly Element[]): void {
+  elements[0]?.getBoundingClientRect();
+}
+
+function timeList(value: string): number[] {
+  return value.split(',').map((part) => {
+    const time = part.trim();
+    if (time.endsWith('ms')) return Number.parseFloat(time) || 0;
+    if (time.endsWith('s')) return (Number.parseFloat(time) || 0) * 1000;
+    return 0;
+  });
+}
+
+function numberList(value: string): number[] {
+  return value.split(',').map((part) => {
+    const count = Number.parseFloat(part);
+    return Number.isFinite(count) ? count : 0;
+  });
+}
+
+function timelineDuration(
+  durations: number[],
+  delays: number[],
+  iterations: number[] = [1],
+  enabled: boolean[] = [true]
+): number {
+  const count = Math.max(
+    durations.length,
+    delays.length,
+    iterations.length,
+    enabled.length
+  );
+  let duration = 0;
+  for (let index = 0; index < count; index += 1) {
+    if (!enabled[index % enabled.length]) continue;
+    const active =
+      (durations[index % durations.length] || 0) *
+        (iterations[index % iterations.length] || 0) +
+      (delays[index % delays.length] || 0);
+    duration = Math.max(duration, active);
+  }
+  return Math.max(0, duration);
+}
+
+function computedMotionDuration(element: Element): number {
+  const view = element.ownerDocument.defaultView;
+  if (!view) return 0;
+  const style = view.getComputedStyle(element);
+  const transition = timelineDuration(
+    timeList(style.transitionDuration),
+    timeList(style.transitionDelay),
+    [1],
+    style.transitionProperty
+      .split(',')
+      .map((property) => property.trim() !== 'none')
+  );
+  const animation = timelineDuration(
+    timeList(style.animationDuration),
+    timeList(style.animationDelay),
+    numberList(style.animationIterationCount),
+    style.animationName.split(',').map((name) => name.trim() !== 'none')
+  );
+  return Math.max(transition, animation);
+}
+
+function waitForDuration(
+  duration: number,
+  signal?: AbortSignal
+): Promise<void> {
+  return new Promise((resolve) => {
+    if (signal?.aborted) {
+      resolve();
+      return;
+    }
+    const finish = (): void => {
+      clearTimeout(timeout);
+      signal?.removeEventListener('abort', finish);
+      resolve();
+    };
+    const timeout = setTimeout(finish, duration);
+    signal?.addEventListener('abort', finish, { once: true });
+  });
+}
+
+export async function waitForMotion(
+  elements: readonly Element[],
+  signal?: AbortSignal
+): Promise<void> {
+  const animations = new Set<Animation>();
+  let fallbackDuration = 0;
+  for (const element of elements) {
+    if (typeof element.getAnimations !== 'function') {
+      fallbackDuration = Math.max(
+        fallbackDuration,
+        computedMotionDuration(element)
+      );
+      continue;
+    }
+    for (const animation of element.getAnimations()) {
+      const endTime = animation.effect?.getComputedTiming().endTime;
+      if (typeof endTime !== 'number' || Number.isFinite(endTime)) {
+        animations.add(animation);
+      }
+    }
+  }
+  const pending = Array.from(
+    animations,
+    (animation) => animation.finished as Promise<unknown>
+  );
+  if (fallbackDuration > 0) {
+    pending.push(waitForDuration(fallbackDuration, signal));
+  }
+  if (pending.length === 0) return;
+  const settled = Promise.allSettled(pending);
+  if (!signal) {
+    await settled;
+    return;
+  }
+  await new Promise<void>((resolve) => {
+    const finish = (): void => {
+      signal.removeEventListener('abort', finish);
+      resolve();
+    };
+    if (signal.aborted) {
+      finish();
+      return;
+    }
+    signal.addEventListener('abort', finish, { once: true });
+    void settled.then(finish);
+  });
+}
+
+export function createPresence(options: PresenceOptions): PresenceController {
+  let phase: PresencePhase = 'hidden';
+  let operation = 0;
+  let entering: Promise<boolean> | null = null;
+  let leaving: Promise<boolean> | null = null;
+  let motionController: AbortController | null = null;
+
+  const nextMotion = (): AbortSignal => {
+    motionController?.abort();
+    motionController = new AbortController();
+    return motionController.signal;
+  };
+
+  const enter = (): Promise<boolean> => {
+    if (phase === 'visible') return Promise.resolve(false);
+    if (phase === 'entering' && entering) return entering;
+
+    const currentOperation = ++operation;
+    const signal = nextMotion();
+    phase = 'entering';
+    entering = (async () => {
+      options.mount();
+      const elements = connectedElements(options.elements());
+      commitInitialStyles(elements);
+      flushSync(options.activate);
+      if (options.motion) await options.motion.enter(signal);
+      else await waitForMotion(elements, signal);
+      if (currentOperation !== operation) return false;
+      phase = 'visible';
+      return true;
+    })();
+    return entering;
+  };
+
+  const leave = (): Promise<boolean> => {
+    if (phase === 'hidden') return Promise.resolve(false);
+    if (phase === 'leaving' && leaving) return leaving;
+
+    const currentOperation = ++operation;
+    const signal = nextMotion();
+    phase = 'leaving';
+    leaving = (async () => {
+      flushSync(options.deactivate);
+      const elements = connectedElements(options.elements());
+      if (options.motion) await options.motion.leave(signal);
+      else await waitForMotion(elements, signal);
+      if (currentOperation !== operation) return false;
+      options.unmount();
+      phase = 'hidden';
+      return true;
+    })();
+    return leaving;
+  };
+
+  return {
+    get phase() {
+      return phase;
+    },
+    enter,
+    leave,
+    cancel() {
+      operation += 1;
+      motionController?.abort();
+      motionController = null;
+      options.motion?.cancel();
+      phase = 'hidden';
+      entering = null;
+      leaving = null;
+    },
+  };
+}

package/src/core/scheduler.ts

@@ -0,0 +1,91 @@
+interface QueueNode {
+  queued: boolean;
+  enqueued: boolean;
+  disposed: boolean;
+  next: QueueNode | null;
+  run: () => void;
+}
+
+interface ScheduledTask {
+  schedule: () => void;
+  flush: () => void;
+  cancel: () => void;
+  dispose: () => void;
+}
+
+let head: QueueNode | null = null;
+let tail: QueueNode | null = null;
+let pending = false;
+
+function queueTask(callback: () => void): void {
+  if (typeof queueMicrotask === 'function') {
+    queueMicrotask(callback);
+    return;
+  }
+  void Promise.resolve().then(callback);
+}
+
+function requestFlush(): void {
+  if (pending) return;
+  pending = true;
+  queueTask(flushQueue);
+}
+
+function enqueue(node: QueueNode): void {
+  node.enqueued = true;
+  if (tail) tail.next = node;
+  else head = node;
+  tail = node;
+  requestFlush();
+}
+
+function flushQueue(): void {
+  pending = false;
+  const start = head;
+  head = null;
+  tail = null;
+
+  let node = start;
+  while (node) {
+    const next = node.next;
+    node.next = null;
+    node.enqueued = false;
+
+    if (!node.disposed && node.queued) {
+      node.queued = false;
+      node.run();
+    }
+
+    node = next;
+  }
+}
+
+export function createScheduledTask(run: () => void): ScheduledTask {
+  const node: QueueNode = {
+    queued: false,
+    enqueued: false,
+    disposed: false,
+    next: null,
+    run,
+  };
+
+  return {
+    schedule() {
+      if (node.disposed || node.queued) return;
+      node.queued = true;
+      if (!node.enqueued) enqueue(node);
+    },
+    flush() {
+      if (node.disposed) return;
+      node.queued = false;
+      node.run();
+    },
+    cancel() {
+      node.queued = false;
+    },
+    dispose() {
+      node.disposed = true;
+      node.queued = false;
+    },
+  };
+}

package/src/core/view.ts

@@ -0,0 +1,31 @@
+import { createRoot, onCleanup, untrack } from 'vanilla-signal';
+
+export interface OwnedView<TElement extends Element> {
+  element: TElement;
+  dispose: () => void;
+}
+
+export interface OwnedViewOptions {
+  removeOnDispose?: boolean;
+}
+
+/**
+ * Creates one stable view inside a vanilla-signal owner.
+ * Reactive accessors declared by the factory retain the owner, while the
+ * factory itself is not turned into a replaceable dynamic region.
+ */
+export function createOwnedView<TElement extends Element>(
+  factory: () => TElement,
+  options: OwnedViewOptions = {}
+): OwnedView<TElement> {
+  let element!: TElement;
+  const removeOnDispose = options.removeOnDispose !== false;
+
+  const dispose = createRoot((disposeRoot) => {
+    element = untrack(factory);
+    if (removeOnDispose) onCleanup(() => element.remove());
+    return disposeRoot;
+  }) as () => void;
+
+  return { element, dispose };
+}

package/src/css/accordion.css

@@ -1,9 +1,51 @@
 @layer components {
+  .j-accordion {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .j-accordion[data-direction='horizontal'] {
+    flex-direction: row;
+  }
+
   .j-accordion .accordion-header {
     display: flex;
     align-items: center;
     cursor: pointer;
     user-select: none;
+
+    padding: var(--accordion-header-padding);
+    margin: var(--accordion-header-margin);
+    font-weight: var(--accordion-font-weight);
+    font-size: var(--accordion-header-font-size);
+    background: var(--accordion-bg);
+    border-bottom: var(--accordion-border);
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-header {
+    gap: var(--space);
+    border-bottom: 0;
+    border-right: var(--accordion-border);
+  }
+
+  .j-accordion .accordion-header[aria-expanded='true'] {
+    border-bottom: 0;
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-header[aria-expanded='true'] {
+    border-right: 0;
+  }
+
+  .j-accordion .accordion-header[aria-expanded='false']:hover {
+    --accordion-bg: var(--ui-surface-hover);
+  }
+
+  .j-accordion .accordion-header[aria-expanded='false']:nth-last-child(2) {
+    border-bottom: 0;
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-header[aria-expanded='false']:nth-last-child(2) {
+    border-right: 0;
   }
 
   .j-accordion .accordion-header .header-title {
@@ -11,17 +53,66 @@
     text-align: left;
   }
 
+  .j-accordion .accordion-header[aria-expanded='true'] .header-title {
+    --accordion-font-weight: var(--font-bold);
+  }
+
   .j-accordion .accordion-header .header-arrow {
     display: flex;
     justify-content: center;
     align-items: center;
+    transition: transform 0.3s ease-out;
+    transform: var(--accordion-icon-transform);
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-header .header-arrow {
+    --accordion-icon-transform: rotate(-90deg);
+  }
+
+  .j-accordion .accordion-header[aria-expanded='true'] .header-arrow {
+    --accordion-icon-transform: rotate(180deg);
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-header[aria-expanded='true'] .header-arrow {
+    --accordion-icon-transform: rotate(90deg);
   }
 
   .j-accordion .accordion-panel {
-    display: none;
+    margin: var(--accordion-panel-margin);
+    font-size: var(--accordion-font-size);
+    border-bottom: var(--accordion-border);
+    position: relative;
   }
 
   .j-accordion .accordion-panel[aria-hidden='false'] {
-    display: block;
+    min-height: 2rem;
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-panel[aria-hidden='false'] {
+    border-right: var(--accordion-border);
+    border-bottom: 0;
+    flex: 1;
+  }
+
+  .j-accordion .accordion-panel:last-child {
+    border-bottom: 0;
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-panel:last-child {
+    border-right: 0;
+  }
+
+  .j-accordion .accordion-panel .panel-content {
+    margin: var(--accordion-panel-content-margin);
+    padding: var(--accordion-panel-content-padding);
+    position: relative;
+    min-height: inherit;
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-panel[aria-hidden='false'] .panel-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
   }
-}
+}

package/src/css/content.css

@@ -1,4 +1,5 @@
 @layer content {
+
   /* ============================================
     Content - 文章阅读/编辑器预览样式
   ============================================ */
@@ -18,12 +19,6 @@
   /* ============================================
     Typography - 段落与标题
   ============================================ */
-  .j-content *,
-  .j-content *::before,
-  .j-content *::after {
-    box-sizing: border-box;
-  }
-
   .j-content p {
     margin: 0 0 var(--content-paragraph-space);
   }
@@ -34,8 +29,7 @@
   .j-content h4,
   .j-content h5,
   .j-content h6 {
-    margin: var(--content-heading-space) 0
-      calc(var(--content-heading-space) * 0.75);
+    margin: var(--content-heading-space) 0 calc(var(--content-heading-space) * 0.75);
     font-weight: 600;
     line-height: 1.3;
     color: var(--content-heading-fg);
@@ -70,12 +64,12 @@
   }
 
   /* 标题后的段落减少间距 */
-  .j-content h1 + p,
-  .j-content h2 + p,
-  .j-content h3 + p,
-  .j-content h4 + p,
-  .j-content h5 + p,
-  .j-content h6 + p {
+  .j-content h1+p,
+  .j-content h2+p,
+  .j-content h3+p,
+  .j-content h4+p,
+  .j-content h5+p,
+  .j-content h6+p {
     margin-top: calc(var(--content-paragraph-space) * -0.5);
   }
 
@@ -255,7 +249,7 @@
     color: var(--tone-body);
   }
 
-  .j-content dd + dt {
+  .j-content dd+dt {
     margin-top: 1em;
   }
 
@@ -283,7 +277,7 @@
     margin: 0;
   }
 
-  .j-content blockquote p + p {
+  .j-content blockquote p+p {
     margin-top: 0.75em;
   }
 
@@ -399,7 +393,7 @@
     padding: 1.25em 1.5em;
   }
 
-  .j-content pre.j-code-editor .code-header + code[class*='language-'] {
+  .j-content pre.j-code-editor .code-header+code[class*='language-'] {
     padding: 0.5rem 1rem 1rem;
   }
 
@@ -647,14 +641,14 @@
     transition: transform 0.2s ease;
   }
 
-  .j-content details[open] > summary::before {
+  .j-content details[open]>summary::before {
     transform: rotate(90deg);
   }
 
   .j-content details[open] p,
   .j-content details[open] ul,
   .j-content details[open] ol,
-  .j-content details[open] > * {
+  .j-content details[open]>* {
     margin-bottom: 1em;
   }
 
@@ -662,11 +656,11 @@
     margin-bottom: 0.75em;
   } */
 
-  .j-content details[open] > summary + * {
+  .j-content details[open]>summary+* {
     margin-top: 0;
   }
 
-  .j-content details[open] > *:last-child {
+  .j-content details[open]>*:last-child {
     margin-bottom: 0;
   }
 
@@ -711,11 +705,11 @@
   }
 
   /* First/Last child margin reset */
-  .j-content > *:first-child {
+  .j-content>*:first-child {
     margin-top: 0;
   }
 
-  .j-content > *:last-child {
+  .j-content>*:last-child {
     margin-bottom: 0;
   }
-}
+}

package/src/css/drop.css

@@ -24,5 +24,8 @@
     background: var(--drop-bg);
     color: var(--drop-fg);
     box-shadow: var(--drop-box-shadow);
+    position: relative;
+    min-width: 64px;
+    min-height: 32px;
   }
-}
+}

package/src/css/form.css

@@ -67,6 +67,14 @@
   .j-form .form-buttons {
     display: flex;
     gap: var(--form-buttons-gap, var(--s2));
+    margin-top: 1rem;
+  }
+
+  .j-form [data-form-buttons] button {
+    position: relative;
+  }
+
+  .j-form.is-horizontal .form-buttons {
     margin: 0;
   }
 

package/src/css/menu.css

@@ -77,7 +77,10 @@
     height: var(--menu-item-icon-size);
   }
 
-  .j-menu .menu .menu-item.menu-item-has-children > a {
+  .j-menu:not([data-menu-type='mobile']):not([data-menu-type='bottom'])
+    .menu
+    .menu-item.menu-item-has-children
+    > a {
     pointer-events: none;
   }
 
@@ -413,14 +416,13 @@
     width: 100%;
     visibility: hidden;
     opacity: 0;
-    transform: translateX(100%);
+    transform: translateX(80%);
     transition:
+      transform 0.3s ease-in-out,
       opacity 0.3s ease-in-out,
       visibility 0.3s ease-in-out;
-
     max-width: 100%;
     background: var(--ui-bg);
-    z-index: -1;
   }
 
   .j-menu[data-menu-type='mobile'] .menu .sub-menu .menu-item:hover a {
@@ -520,11 +522,13 @@
     min-width: var(--columns-6xs);
     max-width: var(--columns-2xs);
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateX(-50%) translateY(100%);
     bottom: calc(100% + var(--space));
     transition:
+      transform 0.3s ease-in-out,
       visibility 0.3s ease-in-out,
       opacity 0.3s ease-in-out;
+    z-index: -1;
   }
 
   .j-menu[data-menu-type='bottom']
@@ -533,6 +537,7 @@
     > .sub-menu {
     opacity: 1;
     visibility: visible;
+    transform: translateX(-50%) translateY(0%);
   }
 
   .j-menu[data-menu-type='bottom']

package/src/css/modal.css

@@ -11,7 +11,6 @@
     max-width: var(--modal-max-width);
     max-height: var(--modal-max-height);
     overflow: hidden;
-    animation: animate-fade-in 0.35s ease-in-out;
     display: flex;
     flex-direction: column;
     position: relative;
@@ -48,6 +47,8 @@
     overflow-y: auto;
     overflow-wrap: break-word;
     flex: 1;
+    position: relative;
+    min-height: 32px;
   }
 
   .j-modal .modal-body p {