vanilla-jui 1.4.8 → 1.5.2

package/src/components/tabs.ts

@@ -1,27 +1,25 @@
 import {
-  bindAttr,
+  For,
   createDeepStore,
-  createRoot,
+  createEffect,
+  createMemo,
+  createSignal,
   flushSync,
   jsx,
+  onCleanup,
 } from 'vanilla-signal';
 
-import Component, {
-  type ComponentDOM,
-  type ComponentRuntime,
-} from '../core/Component.ts';
-import { createLoading } from '../primitives/loading.ts';
 import {
-  type RenderableContent,
-  normalizeContentNodes,
-  q,
-} from '../utilities/dom.ts';
+  type FunctionalComponent,
+  defineComponent,
+} from '../core/component.ts';
+import { createLoading } from '../primitives/loading.ts';
+import { joinClasses } from '../utilities/class-name.ts';
+import { type RenderableContent } from '../utilities/dom.ts';
+import { createEventManager } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
-import {
-  createStateSync,
-  getStoreVersion,
-  stateSnapshot,
-} from '../utilities/scheduler.ts';
+import { createElementRef, createKeyedElementRefs } from '../utilities/refs.ts';
+import { createScheduledTask } from '../core/scheduler.ts';
 import {
   type ResolveSchema,
   resolveProps,
@@ -39,7 +37,6 @@ export interface TabsClassNames {
   tab: string;
   panelWrap: string;
   panel: string;
-  disabled: string;
   dragging: string;
 }
 
@@ -52,12 +49,7 @@ export interface TabsPanelContext {
   name: string | number;
 }
 
-export interface TabTitleContext {
-  tabs: Tabs;
-  item: TabItem;
-}
-
-export type TabPanel =
+export type TabContent =
   | RenderableContent<TabsPanelContext>
   | ((context: TabsPanelContext) => RenderableContent<TabsPanelContext>)
   | ((
@@ -66,8 +58,8 @@ export type TabPanel =
 
 export interface TabItem extends Record<string, unknown> {
   name?: string;
-  title: RenderableContent<TabTitleContext>;
-  panel: TabPanel;
+  title: Exclude<RenderableContent, (...args: never[]) => unknown>;
+  content: TabContent;
   cache?: boolean;
   ttl?: number;
 }
@@ -103,25 +95,14 @@ interface TabsState extends Record<string, unknown> {
   data: TabItem[];
   active: TabsValue;
   disabled: TabsDisabled;
-  direction: TabsDirection;
-  current: {
-    index: number;
-    name: string | null;
-  };
-  isVertical: boolean;
   draggable: boolean;
+  dragging: boolean;
   loading: boolean;
 }
 
-interface TabsDisabledState {
-  names: string[];
-  indexes: number[];
-}
-
-interface TabsDOM extends ComponentDOM {
-  root: HTMLElement | null;
-  tabs: HTMLElement[];
-  panels: HTMLElement[];
+interface TabsCurrent {
+  index: number;
+  name: string | null;
 }
 
 interface TabsPanelCacheEntry {
@@ -129,14 +110,23 @@ interface TabsPanelCacheEntry {
   updatedAt: number;
 }
 
-interface TabsRuntime extends ComponentRuntime {
-  built: boolean;
-  cache: {
-    panels: Map<string, TabsPanelCacheEntry>;
-  };
-  panelLoadId: number;
+interface TabsActions {
+  activate(value: TabsValue): Promise<void>;
 }
 
+type TabsBase = FunctionalComponent<
+  ResolvedTabsProps,
+  TabsState,
+  HTMLElement,
+  TabsActions
+>;
+
+export type Tabs = TabsBase & {
+  readonly current: TabsCurrent;
+  readonly activeIndex: number;
+  readonly disabledNames: string[];
+};
+
 type PointerDragEvent = MouseEvent | TouchEvent;
 
 const DEFAULT_CLASS_NAMES: TabsClassNames = {
@@ -144,9 +134,8 @@ const DEFAULT_CLASS_NAMES: TabsClassNames = {
   wrap: 'tab-wrap',
   list: 'tab-list',
   tab: 'tab-item',
-  panelWrap: 'tab-panel',
+  panelWrap: 'panel-list',
   panel: 'panel-item',
-  disabled: 'is-disabled',
   dragging: 'dragging',
 };
 
@@ -155,12 +144,8 @@ const TABS_PROPS_SCHEMA = {
     default: null,
     types: ['string', 'null'],
     normalize: (value: unknown) => {
-      if (typeof value === 'string') {
-        const id = value.trim();
-        return id || randomId();
-      }
-      if (value == null) return randomId();
-      return value;
+      if (typeof value === 'string') return value.trim() || randomId();
+      return value == null ? randomId() : value;
     },
   },
   direction: {
@@ -185,796 +170,491 @@ const TABS_PROPS_SCHEMA = {
 const TAB_CONFIG_RULE = {
   type: 'plainObject',
   shape: {
+    name: ['string', 'null', 'undefined'],
     title: 'renderable',
-    panel: 'renderable',
+    content: 'renderable',
+    cache: ['boolean', 'undefined'],
+    ttl: ['number', 'undefined'],
   },
 };
 
-function cloneTabItems(tabs: unknown): TabItem[] {
-  return Array.isArray(tabs)
-    ? tabs.map((item) => {
-        const nextItem = { ...(item as TabItem) };
-        nextItem.name = nextItem.name || randomId();
-        return nextItem;
-      })
-    : [];
-}
+const TABS_STATE_SCHEMA = {
+  data: TABS_PROPS_SCHEMA.data,
+  active: TABS_PROPS_SCHEMA.active,
+  disabled: TABS_PROPS_SCHEMA.disabled,
+};
 
-function cloneDisabled(disabled: TabsDisabled): TabsDisabled {
-  return Array.isArray(disabled) ? disabled.slice() : disabled;
+function normalizeTabItem(
+  item: TabItem,
+  index: number,
+  namespace = 'Tabs.data'
+): TabItem {
+  validateParam(String(index), item, TAB_CONFIG_RULE, namespace);
+  const name = typeof item.name === 'string' ? item.name.trim() : '';
+  const resolvedName = name || randomId();
+  return { ...item, name: resolvedName };
 }
 
-function resolveDisabledState(
-  disabled: TabsDisabled,
-  data: TabItem[]
-): TabsDisabledState {
-  const toName = (val: TabsValue): string | null => {
-    if (typeof val === 'number') return data[val]?.name || null;
-    if (typeof val === 'string') return val;
-    return null;
-  };
-  const names = Array.isArray(disabled)
-    ? disabled.map(toName).filter((name): name is string => !!name)
-    : (() => {
-        const name = toName(disabled);
-        return name ? [name] : [];
-      })();
-  const uniqNames = Array.from(new Set(names));
-
-  return {
-    names: uniqNames,
-    indexes: uniqNames
-      .map((name) => data.findIndex((tab) => tab.name === name))
-      .filter((index) => index >= 0),
-  };
+function normalizeData(data: unknown, namespace = 'Tabs.data'): TabItem[] {
+  validateParam('data', data, TABS_STATE_SCHEMA.data, namespace);
+  const names = new Set<string>();
+  return (data as TabItem[]).map((item, index) => {
+    const next = normalizeTabItem(item, index, namespace);
+    const resolvedName = next.name as string;
+    if (names.has(resolvedName)) {
+      throw new Error(
+        `${namespace}: item name "${resolvedName}" must be unique.`
+      );
+    }
+    names.add(resolvedName);
+    return next;
+  });
 }
 
-function normalizeTtl(ttl: unknown): number {
-  return typeof ttl === 'number' && ttl > 0 ? ttl : 0;
+function normalizeDisabled(disabled: TabsDisabled): TabsDisabled {
+  return Array.isArray(disabled) ? [...disabled] : disabled;
 }
 
 function normalizeProps(input: TabsProps): ResolvedTabsProps {
-  const props = resolveProps(input, TABS_PROPS_SCHEMA, 'Tabs');
+  const props = resolveProps(input, TABS_PROPS_SCHEMA, 'Tabs.props');
   return {
     id: props.id as string,
     direction: props.direction as TabsDirection,
     active: props.active as TabsValue,
-    disabled: props.disabled as TabsDisabled,
+    disabled: normalizeDisabled(props.disabled as TabsDisabled),
     onChange: props.onChange as ResolvedTabsProps['onChange'],
-    data: cloneTabItems(props.data),
+    data: normalizeData(props.data, 'Tabs.props.data'),
     className: props.className as TabsClassNames,
   };
 }
 
-const TABS_STATE_SCHEMA = {
-  data: TABS_PROPS_SCHEMA.data,
-  active: TABS_PROPS_SCHEMA.active,
-  disabled: TABS_PROPS_SCHEMA.disabled,
-  direction: TABS_PROPS_SCHEMA.direction,
-};
-
-/**
- * 标签页组件，继承 Component。
- *
- * DOM 创建一次，通过 createEffect 细粒度更新 class/ARIA。
- */
-class TabsComponent extends Component<ResolvedTabsProps, TabsState, TabsDOM> {
-  declare runtime: TabsRuntime;
-  declare state: TabsState;
-  private bindingsDispose: (() => void) | null;
-  private stateDispose: (() => void) | null;
-  private isDragging: boolean;
-  private raf: number;
-  private resizeRaf: number;
-  private velocity: number;
-
-  /**
-   * @param {object} [input={}] 标签页配置。
-   */
-  constructor(input: TabsProps = {}) {
-    const props = normalizeProps(input);
-    super(props);
-
-    this.dom.tabs = [];
-    this.dom.panels = [];
-    this.bindingsDispose = null;
-    this.stateDispose = null;
-    this.isDragging = false;
-    this.raf = 0;
-    this.resizeRaf = 0;
-    this.velocity = 0;
-
-    this.state = createDeepStore({
-      data: cloneTabItems(props.data),
-      active: props.active,
-      disabled: cloneDisabled(props.disabled),
-      direction: props.direction,
-      current: {
-        index: -1,
-        name: null,
-      },
-      isVertical: props.direction === 'left' || props.direction === 'right',
-      draggable: false,
-      loading: false,
-    }) as TabsState;
-
-    this.runtime.cache = { panels: new Map() };
-    this.runtime.built = false;
-    this.runtime.panelLoadId = 0;
-  }
-
-  protected onInit(props: ResolvedTabsProps): void {
-    this.dom.root = this.buildRoot(props);
-    this.renderItems();
-    void this.activateInternal(this.state.active, false);
-    this.bindEvents();
-    this.initDrag();
-    this.bindState();
-  }
-
-  private buildRoot(props: ResolvedTabsProps): HTMLElement {
-    const { id, className } = props;
-    const nav = jsx('nav', {
-      className: className.list,
-      'data-tabs-list': '',
-    }) as HTMLElement;
-    const wrap = jsx('div', {
-      className: className.wrap,
-      'data-tabs-wrap': '',
-      children: nav,
-    }) as HTMLElement;
-    const panelWrapper = jsx('div', {
-      className: className.panelWrap,
-      'data-tabs-panel-wrap': '',
-    }) as HTMLElement;
-
-    return jsx('div', {
-      className: className.root,
-      id,
-      'data-tabs': 'root',
-      'data-tabs-direction': this.state.direction,
-      children: [wrap, panelWrapper],
-    }) as HTMLElement;
-  }
-
-  private renderItems(data: TabItem[] = this.state.data): void {
-    if (!this.dom.root) return;
-    const tabList = q<HTMLElement>('[data-tabs-list]', this.dom.root);
-    const panelWrapper = q<HTMLElement>(
-      '[data-tabs-panel-wrap]',
-      this.dom.root
-    );
-    if (!tabList || !panelWrapper) return;
-
-    tabList.textContent = '';
-    panelWrapper.textContent = '';
-
-    this.dom.tabs = [];
-    this.dom.panels = [];
-
-    const tabFragment = document.createDocumentFragment();
-    const panelFragment = document.createDocumentFragment();
-
-    data.forEach((item, index) => {
-      const name = item.name || randomId();
-
-      const tab = jsx('div', {
-        className: this.props.className.tab,
-        'data-tabs-tab': name,
-        role: 'tab',
-        children: normalizeContentNodes(item.title, { tabs: this, item }),
-      }) as HTMLElement;
-
-      this.dom.tabs.push(tab);
-      const panel = jsx('div', {
-        className: this.props.className.panel,
-        'data-tabs-panel': name,
-        role: 'tabpanel',
-      }) as HTMLElement;
-      this.dom.panels.push(panel);
-
-      if (typeof item.panel !== 'function') {
-        panel.append(
-          ...normalizeContentNodes(item.panel, {
-            tabs: this,
-            item,
-            index,
-            name,
-          })
-        );
-      }
-      tabFragment.append(tab);
-      panelFragment.append(panel);
-    });
-
-    tabList.append(tabFragment);
-    panelWrapper.append(panelFragment);
+function normalizeTtl(ttl: unknown): number {
+  return typeof ttl === 'number' && ttl > 0 ? ttl : 0;
+}
 
-    this.bindingsDispose?.();
-    this.bindingsDispose = createRoot((dispose) => {
-      this.dom.tabs.forEach((tab, index) => {
-        const name = tab.dataset.tabsTab || '';
-        bindAttr(tab, 'aria-selected', () =>
-          this.state.current.index === index ? 'true' : 'false'
-        );
-        bindAttr(tab, 'aria-disabled', () =>
-          this.isDisabledName(name) ? 'true' : 'false'
-        );
-      });
-      this.dom.panels.forEach((panel, index) => {
-        bindAttr(panel, 'aria-hidden', () =>
-          this.state.current.index !== index ? 'true' : 'false'
-        );
-      });
-      return dispose;
-    });
-  }
-
-  private bindState(): void {
-    if (this.stateDispose) return;
-
-    let previousData = this.state.data;
-    let previousDataVersion = getStoreVersion(previousData);
-    let previousDirection = this.state.direction;
-    let previousActive = this.state.active;
-
-    this.stateDispose = createStateSync(
-      () => {
-        const data = this.state.data;
-        const dataVersion = getStoreVersion(data);
-        const direction = this.state.direction;
-        const disabled = this.state.disabled;
-        const active = this.state.active;
-        const snapshot = {
-          data,
-          direction,
-          disabled,
-          active,
-          dataChanged:
-            data !== previousData || dataVersion !== previousDataVersion,
-          directionChanged: direction !== previousDirection,
-          activeChanged: active !== previousActive,
-        };
-
-        previousData = data;
-        previousDataVersion = dataVersion;
-        previousDirection = direction;
-        previousActive = active;
-
-        return snapshot;
-      },
-      (snapshot) => this.syncStateView(snapshot)
-    );
-  }
-
-  private async syncStateView({
-    data,
-    direction,
-    disabled,
-    active,
-    dataChanged,
-    directionChanged,
-    activeChanged,
-  }: {
-    data: TabItem[];
-    direction: TabsDirection;
-    disabled: TabsDisabled;
-    active: TabsValue;
-    dataChanged: boolean;
-    directionChanged: boolean;
-    activeChanged: boolean;
-  }): Promise<void> {
-    if (!this.runtime.built || !this.dom.root) return;
-    const dataSnapshot = cloneTabItems(stateSnapshot(data));
-    this.validateData(dataSnapshot);
-    validateParam(
-      'direction',
-      direction,
-      TABS_STATE_SCHEMA.direction,
-      'Tabs.state'
-    );
-    validateParam(
-      'disabled',
-      disabled,
-      TABS_STATE_SCHEMA.disabled,
-      'Tabs.state'
+export function createTabs(input: TabsProps = {}): Tabs {
+  const props = normalizeProps(input);
+  const state = createDeepStore({
+    data: props.data,
+    active: props.active,
+    disabled: props.disabled,
+    draggable: false,
+    dragging: false,
+    loading: false,
+  }) as TabsState;
+  const events = createEventManager();
+  const wrapRef = createElementRef<HTMLElement>();
+  const listRef = createElementRef<HTMLElement>();
+  const tabs = createKeyedElementRefs<string, HTMLElement>();
+  const panels = createKeyedElementRefs<string, HTMLElement>();
+  const cache = new Map<string, TabsPanelCacheEntry>();
+  const loaders = new Map<string, () => Promise<void>>();
+  let instance!: Tabs;
+  let loadId = 0;
+  let pointerDragging = false;
+  let inertiaFrame = 0;
+  let resizeFrame = 0;
+  let velocity = 0;
+
+  const getIndex = (value: TabsValue): number =>
+    typeof value === 'number'
+      ? value
+      : state.data.findIndex((item) => item.name === value);
+  const current = (): TabsCurrent => {
+    const index = getIndex(state.active);
+    const item = state.data[index];
+    return item
+      ? { index, name: item.name as string }
+      : { index: -1, name: null };
+  };
+  const activeName = (): string | null => {
+    if (typeof state.active === 'string') return state.active;
+    const item = state.data[state.active];
+    return item ? (item.name as string) : null;
+  };
+  const disabledNames = (): string[] => {
+    const values = Array.isArray(state.disabled)
+      ? state.disabled
+      : [state.disabled];
+    return Array.from(
+      new Set(
+        values
+          .map((value) =>
+            typeof value === 'number' ? state.data[value]?.name : value
+          )
+          .filter((name): name is string => typeof name === 'string')
+      )
     );
-    validateParam('active', active, TABS_STATE_SCHEMA.active, 'Tabs.state');
-
-    if (directionChanged) {
-      this.dom.root.setAttribute('data-tabs-direction', direction);
-      flushSync(() => {
-        this.state.isVertical = direction === 'left' || direction === 'right';
-      });
-    }
-
-    if (dataChanged) {
-      this.runtime.cache.panels.clear();
-      this.renderItems(dataSnapshot);
-      this.bindEvents();
+  };
+  const isDisabled = (name: string): boolean => disabledNames().includes(name);
+  const isActive = (name: string): boolean => activeName() === name;
+  const renderableData = createMemo(() => state.data);
+
+  const refreshDrag = (): void => {
+    const wrap = wrapRef.current;
+    const list = listRef.current;
+    if (!wrap || !list) return;
+    const vertical = props.direction === 'left' || props.direction === 'right';
+    const next = vertical
+      ? list.scrollHeight > wrap.clientHeight + 5
+      : list.scrollWidth > wrap.clientWidth + 5;
+    if (state.draggable !== next) {
       flushSync(() => {
-        this.syncCurrent(-1);
+        state.draggable = next;
       });
     }
+  };
+  const refreshTask = createScheduledTask(refreshDrag);
 
-    if (dataChanged || activeChanged) {
-      await this.activateInternal(active, activeChanged);
-    }
-
-    this.refreshDrag();
-  }
-
-  private get disabledState(): TabsDisabledState {
-    return resolveDisabledState(this.state.disabled, this.state.data);
-  }
-
-  private isDisabledName(name: string): boolean {
-    return this.disabledState.names.includes(name);
-  }
-
-  private syncCurrent(index: number): void {
-    this.state.current = {
-      index,
-      name:
-        index >= 0 && index < this.dom.tabs.length
-          ? this.dom.tabs[index]?.dataset.tabsTab || null
-          : null,
+  const startInertia = (): void => {
+    const wrap = wrapRef.current;
+    if (!wrap) return;
+    let speed = velocity;
+    let last = performance.now();
+    const vertical = props.direction === 'left' || props.direction === 'right';
+    const step = (now: number): void => {
+      const elapsed = now - last;
+      last = now;
+      speed *= 0.92;
+      if (Math.abs(speed) < 0.3) return;
+      if (vertical) wrap.scrollTop += speed * elapsed * 0.05;
+      else wrap.scrollLeft += speed * elapsed * 0.05;
+      inertiaFrame = requestAnimationFrame(step);
     };
-  }
-
-  private getPanelKey(item: TabItem, index: number): string {
-    return item.name || this.dom.tabs[index]?.dataset.tabsTab || String(index);
-  }
-
-  private getCachedPanel(
-    item: TabItem,
-    index: number
-  ): TabsPanelCacheEntry | null {
-    if (!item.cache) return null;
-
-    const key = this.getPanelKey(item, index);
-    const entry = this.runtime.cache.panels.get(key);
-    if (!entry) return null;
-
-    const ttl = normalizeTtl(item.ttl);
-    if (ttl && Date.now() - entry.updatedAt > ttl) {
-      this.runtime.cache.panels.delete(key);
-      return null;
-    }
-
-    return entry;
-  }
-
-  private setCachedPanel(
-    item: TabItem,
-    index: number,
-    content: RenderableContent<TabsPanelContext>
-  ): void {
-    if (!item.cache) return;
-
-    this.runtime.cache.panels.set(this.getPanelKey(item, index), {
-      content,
-      updatedAt: Date.now(),
-    });
-  }
-
-  private renderPanelContent(
-    index: number,
-    content: RenderableContent<TabsPanelContext>
-  ): void {
-    const panel = this.dom.panels[index];
-    const item = this.state.data[index];
-    if (!panel || !item) return;
-
-    panel.textContent = '';
-    panel.append(
-      ...normalizeContentNodes(content, {
-        tabs: this,
-        item,
-        index,
-        name: this.dom.tabs[index]?.dataset.tabsTab || item.name || index,
-      })
-    );
-  }
+    inertiaFrame = requestAnimationFrame(step);
+  };
 
-  private async loadPanel(index: number): Promise<void> {
-    const item = this.state.data[index];
-    const panel = this.dom.panels[index];
-    if (!item || !panel || typeof item.panel !== 'function') {
-      this.runtime.panelLoadId += 1;
+  const bindDrag = (): void => {
+    const wrap = wrapRef.current;
+    const list = listRef.current;
+    if (!wrap || !list) return;
+    let start = 0;
+    let scrollStart = 0;
+    let last = 0;
+    let pendingFrame = false;
+    let distance = 0;
+    const position = (event: PointerDragEvent): number => {
+      const vertical =
+        props.direction === 'left' || props.direction === 'right';
+      if ('touches' in event) {
+        const touch = event.touches[0] || event.changedTouches[0];
+        return vertical ? touch.pageY : touch.pageX;
+      }
+      return vertical ? event.pageY : event.pageX;
+    };
+    const startDrag = (event: Event): void => {
+      if (!state.draggable) return;
+      if (!(event instanceof MouseEvent) && !(event instanceof TouchEvent))
+        return;
+      pointerDragging = true;
       flushSync(() => {
-        this.state.loading = false;
+        state.dragging = true;
       });
-      return;
-    }
-
-    const cached = this.getCachedPanel(item, index);
-    if (cached) {
-      this.runtime.panelLoadId += 1;
+      start = position(event);
+      last = start;
+      const vertical =
+        props.direction === 'left' || props.direction === 'right';
+      scrollStart = vertical ? wrap.scrollTop : wrap.scrollLeft;
+      velocity = 0;
+      cancelAnimationFrame(inertiaFrame);
+    };
+    const moveDrag = (event: Event): void => {
+      if (!pointerDragging) return;
+      if (!(event instanceof MouseEvent) && !(event instanceof TouchEvent))
+        return;
+      event.preventDefault();
+      const next = position(event);
+      distance = start - next;
+      velocity = last - next;
+      last = next;
+      if (pendingFrame) return;
+      pendingFrame = true;
+      requestAnimationFrame(() => {
+        pendingFrame = false;
+        const vertical =
+          props.direction === 'left' || props.direction === 'right';
+        if (vertical) wrap.scrollTop = scrollStart + distance;
+        else wrap.scrollLeft = scrollStart + distance;
+      });
+    };
+    const endDrag = (): void => {
+      if (!pointerDragging) return;
+      pointerDragging = false;
       flushSync(() => {
-        this.state.loading = false;
+        state.dragging = false;
       });
-      this.renderPanelContent(index, cached.content);
-      return;
-    }
-
-    const loadId = ++this.runtime.panelLoadId;
-    flushSync(() => {
-      this.state.loading = true;
+      startInertia();
+    };
+    events.on('drag:mousedown', list, 'mousedown', startDrag);
+    events.on('drag:touchstart', list, 'touchstart', startDrag, {
+      passive: true,
     });
-    panel.setAttribute('aria-live', 'polite');
-    panel.setAttribute('aria-busy', 'true');
-    panel.textContent = '';
-    panel.appendChild(createLoading());
-
-    try {
-      const content = await Promise.resolve(
-        item.panel({
-          tabs: this,
-          item,
-          index,
-          name: this.dom.tabs[index]?.dataset.tabsTab || item.name || index,
-        })
-      );
-
-      if (this.runtime.destroyed || loadId !== this.runtime.panelLoadId) return;
-
-      this.setCachedPanel(item, index, content);
-      this.renderPanelContent(index, content);
-    } finally {
-      if (!this.runtime.destroyed && loadId === this.runtime.panelLoadId) {
-        flushSync(() => {
-          this.state.loading = false;
-        });
-        panel.setAttribute('aria-busy', 'false');
-      }
-    }
-  }
-
-  get activeIndex(): number {
-    return this.state.current.index;
-  }
-
-  get disabledNames(): string[] {
-    return this.disabledState.names;
-  }
-
-  private bindEvents(): void {
-    this.unbindEvents();
-
-    if (!this.dom.root) return;
-    const tabList = q<HTMLElement>('[data-tabs-list]', this.dom.root);
-    if (!tabList) return;
-
-    this.cleanup.events.on('tabClick', tabList, 'click', (event) => {
-      if (!(event.target instanceof Element)) return;
-      const tab = event.target.closest<HTMLElement>('[data-tabs-tab]');
-      if (!tab || !tabList.contains(tab)) return;
-      const name = tab.dataset.tabsTab;
-      if (name && !this.isDisabledName(name)) {
-        void this.activate(name);
-      }
+    events.on('drag:mousemove', window, 'mousemove', moveDrag, {
+      passive: false,
     });
-  }
-
-  private unbindEvents(): void {
-    this.cleanup.events.clear();
-  }
-
-  private assertActive(method: string): void {
-    if (this.runtime.destroyed) {
-      throw new Error(`Tabs.${method}: instance has been destroyed.`);
-    }
-    if (!this.runtime.built) {
-      throw new Error(`Tabs.${method}: call build() first.`);
-    }
-  }
-
-  private getIndex(val: TabsValue | undefined | null): number {
-    if (typeof val === 'number') return val;
-    if (typeof val === 'string') {
-      return this.dom.tabs.findIndex((tab) => tab.dataset.tabsTab === val);
-    }
-    return -1;
-  }
-
-  private async activateInternal(
-    val: TabsValue,
-    fireEvent = true
-  ): Promise<void> {
-    const index = this.getIndex(val);
-    const name = this.dom.tabs[index]?.dataset.tabsTab || '';
-    if (
-      index < 0 ||
-      index >= this.dom.tabs.length ||
-      this.isDisabledName(name) ||
-      this.state.current.index === index
-    ) {
-      return;
-    }
-
-    flushSync(() => {
-      this.syncCurrent(index);
+    events.on('drag:touchmove', window, 'touchmove', moveDrag, {
+      passive: false,
     });
+    events.on('drag:mouseup', window, 'mouseup', endDrag);
+    events.on('drag:touchend', window, 'touchend', endDrag);
+  };
 
-    await this.loadPanel(index);
-
-    if (fireEvent && this.props.onChange) {
-      const tabEl = this.dom.tabs[index];
-      const panelEl = this.dom.panels[index];
-      await Promise.resolve(
-        this.props.onChange(
-          index,
-          tabEl?.dataset.tabsTab || index,
-          tabEl,
-          panelEl
-        )
-      );
-    }
-  }
-
-  /**
-   * 激活指定标签。
-   * @param {number|string} val 标签索引或名称。
-   */
-  async activate(val: TabsValue): Promise<void> {
-    this.assertActive('activate');
-    this.state.active = val;
-    await this.activateInternal(val, true);
-  }
-
-  /**
-   * 构建 Tabs DOM。
-   */
-  build(): this {
-    if (this.runtime.destroyed) {
-      throw new Error('Tabs.build: instance has been destroyed.');
-    }
-    if (this.runtime.built) return this;
-    try {
-      this.runtime.built = true;
-      this.onInit(this.props);
-    } catch (error) {
-      this.destroy();
-      throw error;
-    }
-    this.emit('init', this.props);
-    return this;
-  }
-
-  refresh(): this {
-    this.assertActive('refresh');
-    this.refreshDrag();
-    return this;
-  }
-
-  private get dragContainer(): HTMLElement | null {
-    return this.dom.root
-      ? q<HTMLElement>('[data-tabs-wrap]', this.dom.root)
-      : null;
-  }
-
-  private get dragInner(): HTMLElement | null {
-    return this.dom.root
-      ? q<HTMLElement>('[data-tabs-list]', this.dom.root)
-      : null;
-  }
-
-  private initDrag(): void {
-    const direction = this.state.direction;
-    const container = this.dragContainer;
-    const inner = this.dragInner;
-    if (!container || !inner) return;
-
-    const isVertical = direction === 'left' || direction === 'right';
-    const draggable = isVertical
-      ? inner.scrollHeight > container.clientHeight + 5
-      : inner.scrollWidth > container.clientWidth + 5;
-
+  const activate = async (value: TabsValue): Promise<void> => {
+    if (!instance.runtime.built)
+      throw new Error('Tabs.activate: call build() first.');
+    const index = getIndex(value);
+    const item = state.data[index];
+    if (!item) return;
+    const name = item.name as string;
+    if (isDisabled(name) || isActive(name)) return;
     flushSync(() => {
-      this.state.isVertical = isVertical;
-      this.state.draggable = draggable;
+      state.active = value;
     });
+    await loaders.get(name)?.();
+    await Promise.resolve(
+      props.onChange?.(index, name, tabs.get(name), panels.get(name))
+    );
+  };
 
-    if (!draggable) {
-      this.removeDragEvents();
-      return;
-    }
-
-    this.bindDragEvents();
-
-    this.cleanup.events.on('resize', window, 'resize', () => {
-      cancelAnimationFrame(this.resizeRaf);
-      this.resizeRaf = requestAnimationFrame(() => {
-        this.refreshDrag();
-      });
+  const panelView = (item: () => TabItem, index: () => number): HTMLElement => {
+    const name = item().name as string;
+    const initial = item().content;
+    const [content, setContent] = createSignal<
+      RenderableContent<TabsPanelContext>
+    >(typeof initial === 'function' ? null : initial);
+    const [loading, setLoading] = createSignal(false);
+    let source: TabContent = initial;
+    let localLoadId = 0;
+    let pending: Promise<void> | null = null;
+
+    const context = (): TabsPanelContext => ({
+      tabs: instance,
+      item: item(),
+      index: index(),
+      name,
     });
-  }
-
-  private bindDragEvents(): void {
-    this.removeDragEvents();
-
-    const container = this.dragContainer;
-    const inner = this.dragInner;
-    if (!container || !inner) return;
-    const isVertical = this.state.isVertical;
-
-    let posStart = 0;
-    let scrollStart = 0;
-    let lastPos = 0;
-    let frameRequested = false;
-
-    const getPos = (event: PointerDragEvent): number => {
-      if ('touches' in event) {
-        const touch = event.touches[0] || event.changedTouches[0];
-        return isVertical ? touch.pageY : touch.pageX;
-      }
-      return isVertical ? event.pageY : event.pageX;
-    };
-
-    const onDragStart = (event: Event): void => {
-      if (!(event instanceof MouseEvent) && !(event instanceof TouchEvent)) {
+    const load = async (): Promise<void> => {
+      const current = item();
+      const source = current.content;
+      if (typeof source !== 'function') {
+        setContent(source);
         return;
       }
-      this.isDragging = true;
-      inner.classList.add(this.props.className.dragging);
-      posStart = getPos(event);
-      lastPos = posStart;
-      scrollStart = isVertical ? container.scrollTop : container.scrollLeft;
-      this.velocity = 0;
-      cancelAnimationFrame(this.raf);
-    };
-
-    const onDragMove = (event: Event): void => {
-      if (!this.isDragging) return;
-      if (!(event instanceof MouseEvent) && !(event instanceof TouchEvent)) {
+      const cached = current.cache ? cache.get(name) : null;
+      const ttlValue = normalizeTtl(current.ttl);
+      if (cached && (!ttlValue || Date.now() - cached.updatedAt <= ttlValue)) {
+        setContent(cached.content);
         return;
       }
-      event.preventDefault();
-      const current = getPos(event);
-      const dist = posStart - current;
-      this.velocity = lastPos - current;
-      lastPos = current;
-
-      if (!frameRequested) {
-        frameRequested = true;
-        requestAnimationFrame(() => {
-          frameRequested = false;
-          if (isVertical) container.scrollTop = scrollStart + dist;
-          else container.scrollLeft = scrollStart + dist;
+      if (pending) return pending;
+      const request = ++localLoadId;
+      loadId += 1;
+      const activeLoad = loadId;
+      setLoading(true);
+      flushSync(() => {
+        state.loading = true;
+      });
+      const task = Promise.resolve()
+        .then(() =>
+          (source as (context: TabsPanelContext) => unknown)(context())
+        )
+        .then((result) => {
+          if (request !== localLoadId || instance.runtime.destroyed) return;
+          if (item().cache) {
+            cache.set(name, {
+              content: result as RenderableContent<TabsPanelContext>,
+              updatedAt: Date.now(),
+            });
+          }
+          setContent(result as RenderableContent<TabsPanelContext>);
+        })
+        .finally(() => {
+          if (request === localLoadId) setLoading(false);
+          if (activeLoad === loadId && !instance.runtime.destroyed) {
+            flushSync(() => {
+              state.loading = false;
+            });
+          }
+          if (pending === task) pending = null;
         });
-      }
-    };
-
-    const onDragEnd = (): void => {
-      if (!this.isDragging) return;
-      this.isDragging = false;
-      inner.classList.remove(this.props.className.dragging);
-      this.startInertiaScroll();
+      pending = task;
+      return task;
     };
+    loaders.set(name, load);
+    onCleanup(() => {
+      cache.delete(name);
+      loaders.delete(name);
+    });
 
-    this.cleanup.events.on('drag:mousedown', inner, 'mousedown', onDragStart);
-    this.cleanup.events.on(
-      'drag:touchstart',
-      inner,
-      'touchstart',
-      onDragStart,
-      {
-        passive: true,
+    createEffect(() => {
+      const nextContent = item().content;
+      if (nextContent !== source) {
+        source = nextContent;
+        localLoadId += 1;
+        pending = null;
+        cache.delete(name);
+        setContent(typeof nextContent === 'function' ? null : nextContent);
       }
-    );
-    this.cleanup.events.on('drag:mousemove', window, 'mousemove', onDragMove, {
-      passive: false,
+      if (isActive(name)) void load();
     });
-    this.cleanup.events.on('drag:touchmove', window, 'touchmove', onDragMove, {
-      passive: false,
-    });
-    this.cleanup.events.on('drag:mouseup', window, 'mouseup', onDragEnd);
-    this.cleanup.events.on('drag:touchend', window, 'touchend', onDragEnd);
-  }
-
-  private startInertiaScroll(): void {
-    const container = this.dragContainer;
-    if (!container) return;
-    let v = this.velocity;
-    const isVertical = this.state.isVertical;
-    let last = performance.now();
 
-    const step = (now: number): void => {
-      const dt = now - last;
-      last = now;
-      v *= 0.92;
-      if (Math.abs(v) < 0.3) return;
-      if (isVertical) container.scrollTop += v * dt * 0.05;
-      else container.scrollLeft += v * dt * 0.05;
-      this.raf = requestAnimationFrame(step);
+    const panelContent = (): RenderableContent<TabsPanelContext> => {
+      if (loading()) return createLoading('flex-start', 'flex-start');
+      const value = content();
+      if (typeof value === 'function') return value(context());
+      return value;
     };
 
-    this.raf = requestAnimationFrame(step);
-  }
-
-  private removeDragEvents(): void {
-    this.cleanup.events.off('drag:mousedown');
-    this.cleanup.events.off('drag:touchstart');
-    this.cleanup.events.off('drag:mousemove');
-    this.cleanup.events.off('drag:touchmove');
-    this.cleanup.events.off('drag:mouseup');
-    this.cleanup.events.off('drag:touchend');
-  }
-
-  private refreshDrag(): void {
-    this.initDrag();
-  }
-
-  protected onDestroy(): void {
-    this.unbindEvents();
-    this.removeDragEvents();
-    this.bindingsDispose?.();
-    this.bindingsDispose = null;
-    this.stateDispose?.();
-    this.stateDispose = null;
-    cancelAnimationFrame(this.raf);
-    cancelAnimationFrame(this.resizeRaf);
-    this.cleanup.events.off('resize');
-
-    this.dom.root?.remove();
-    this.runtime.built = false;
-  }
-
-  private validateData(data: TabItem[]): void {
-    validateParam('data', data, TABS_STATE_SCHEMA.data, 'Tabs.state');
-    data.forEach((item, index) => {
-      validateParam(String(index), item, TAB_CONFIG_RULE, 'Tabs.state.data');
-    });
-  }
-
-  protected override normalizeStatePatch(
-    patch: Partial<TabsState>
-  ): Partial<TabsState> {
-    const nextPatch = { ...patch };
-    if (Object.hasOwn(nextPatch, 'data') && Array.isArray(nextPatch.data)) {
-      nextPatch.data = cloneTabItems(nextPatch.data);
-    }
-    if (
-      Object.hasOwn(nextPatch, 'disabled') &&
-      Array.isArray(nextPatch.disabled)
-    ) {
-      nextPatch.disabled = cloneDisabled(nextPatch.disabled);
-    }
-    return nextPatch;
-  }
-
-  protected override validateStatePatch(patch: Partial<TabsState>): void {
-    validateParam(
-      'state',
-      patch,
-      {
-        type: 'plainObject',
-      },
-      'Tabs.setState'
-    );
+    return jsx('div', {
+      className: props.className.panel,
+      'data-tabs-panel': name,
+      role: 'tabpanel',
+      'aria-hidden': () => (isActive(name) ? 'false' : 'true'),
+      'aria-live': () =>
+        typeof item().content === 'function' ? 'polite' : null,
+      'aria-busy': () => String(loading()),
+      hidden: () => !isActive(name),
+      ref: panels.bind(name),
+      children: panelContent,
+    }) as HTMLElement;
+  };
+
+  const tabView = (item: () => TabItem, _index: () => number): HTMLElement => {
+    const name = item().name as string;
+    return jsx('div', {
+      className: props.className.tab,
+      'data-tabs-tab': name,
+      role: 'tab',
+      'aria-selected': () => (isActive(name) ? 'true' : 'false'),
+      'aria-disabled': () => (isDisabled(name) ? 'true' : 'false'),
+      ref: tabs.bind(name),
+      children: item().title,
+    }) as HTMLElement;
+  };
 
-    for (const key of Object.keys(patch)) {
-      if (!Object.hasOwn(TABS_STATE_SCHEMA, key)) {
-        throw new Error(
-          `Tabs.setState: "${key}" is not a supported state key.`
+  instance = defineComponent<
+    ResolvedTabsProps,
+    TabsState,
+    HTMLElement,
+    TabsActions
+  >({
+    name: 'Tabs',
+    props,
+    state,
+    actions: {
+      activate,
+    },
+    normalizeStatePatch(patch) {
+      return {
+        ...patch,
+        ...(Object.hasOwn(patch, 'data')
+          ? { data: normalizeData(patch.data, 'Tabs.setState.data') }
+          : {}),
+        ...(Object.hasOwn(patch, 'disabled') && Array.isArray(patch.disabled)
+          ? { disabled: normalizeDisabled(patch.disabled) }
+          : {}),
+      };
+    },
+    validateStatePatch(patch) {
+      validateParam('state', patch, { type: 'plainObject' }, 'Tabs.setState');
+      for (const key of Object.keys(patch)) {
+        if (!Object.hasOwn(TABS_STATE_SCHEMA, key)) {
+          throw new Error(
+            `Tabs.setState: "${key}" is not a supported state key.`
+          );
+        }
+        const stateKey = key as keyof typeof TABS_STATE_SCHEMA;
+        validateParam(
+          key,
+          patch[key as keyof TabsState],
+          TABS_STATE_SCHEMA[stateKey],
+          'Tabs.setState'
         );
       }
-      const stateKey = key as keyof typeof TABS_STATE_SCHEMA;
-      validateParam(
-        key,
-        patch[key as keyof TabsState],
-        TABS_STATE_SCHEMA[stateKey],
-        'Tabs.setState'
-      );
-    }
-
-    if (Array.isArray(patch.data)) this.validateData(patch.data);
-  }
-}
+    },
+    view: () => {
+      createEffect(() => {
+        const dataLength = state.data.length;
+        refreshTask.schedule();
+        return dataLength;
+      });
+      return jsx('div', {
+        className: props.className.root,
+        id: props.id,
+        'data-tabs': 'root',
+        'data-tabs-direction': props.direction,
+        children: [
+          jsx('div', {
+            className: props.className.wrap,
+            'data-tabs-wrap': '',
+            ref: wrapRef.set,
+            children: jsx('nav', {
+              className: () =>
+                joinClasses(
+                  props.className.list,
+                  state.dragging && props.className.dragging
+                ),
+              'data-tabs-list': '',
+              ref: listRef.set,
+              children: For({
+                each: renderableData,
+                key: (item: TabItem) => item.name,
+                children: (item: () => TabItem, index: () => number) =>
+                  tabView(item, index),
+              }),
+            }),
+          }),
+          jsx('div', {
+            className: props.className.panelWrap,
+            'data-tabs-panel-wrap': '',
+            children: For({
+              each: renderableData,
+              key: (item: TabItem) => item.name,
+              children: (item: () => TabItem, index: () => number) =>
+                panelView(item, index),
+            }),
+          }),
+        ],
+      }) as HTMLElement;
+    },
+    onBuild(context) {
+      const root = context.element;
+      if (!root) return;
+      events.on('click', root, 'click', (event) => {
+        if (!(event.target instanceof Element)) return;
+        const tab = event.target.closest<HTMLElement>('[data-tabs-tab]');
+        const name = tab?.dataset.tabsTab;
+        if (name && !isDisabled(name)) void activate(name);
+      });
+      events.on('resize', window, 'resize', () => {
+        cancelAnimationFrame(resizeFrame);
+        resizeFrame = requestAnimationFrame(refreshDrag);
+      });
+      bindDrag();
+      context.own(() => events.clear());
+      refreshTask.schedule();
+      void loaders.get(current().name || '')?.();
+    },
+    onMount() {
+      refreshTask.schedule();
+    },
+    onDestroy() {
+      loadId += 1;
+      refreshTask.dispose();
+      cancelAnimationFrame(inertiaFrame);
+      cancelAnimationFrame(resizeFrame);
+      cache.clear();
+      loaders.clear();
+      tabs.clear();
+      panels.clear();
+    },
+  }) as Tabs;
 
-export type Tabs = TabsComponent;
+  Object.defineProperties(instance, {
+    current: { enumerable: true, get: current },
+    activeIndex: { enumerable: true, get: () => current().index },
+    disabledNames: { enumerable: true, get: disabledNames },
+  });
 
-export function createTabs(input: TabsProps = {}): Tabs {
-  return new TabsComponent(input);
+  return instance;
 }