vanilla-jui 1.4.7 → 1.5.1

package/src/primitives/tooltip.ts

@@ -23,13 +23,9 @@ interface DropDelay {
   hide?: number;
 }
 
-interface TooltipDom {
-  root: HTMLElement | null;
-}
-
-interface TooltipInstance {
-  dom: TooltipDom;
-  drop: DropInstance | null;
+export interface TooltipInstance {
+  readonly element: HTMLElement | null;
+  readonly drop: DropInstance | null;
   show(useDelay?: boolean): void;
   hide(useDelay?: boolean): void;
   toggle(): void;
@@ -68,6 +64,8 @@ interface TooltipProps extends Record<string, unknown> {
   offset?: number;
   message?: string;
   theme?: TooltipTheme;
+  cache?: boolean;
+  ttl?: number;
   className?: TooltipClassNameConfig;
   id?: string | null;
   delay?: number | DropDelay;
@@ -83,6 +81,8 @@ interface ResolvedTooltipProps extends Record<string, unknown> {
   offset: number;
   message: string;
   theme: TooltipTheme;
+  cache: boolean;
+  ttl: number;
   className: TooltipClassNames;
   id: string | null;
   delay: number | DropDelay;
@@ -148,6 +148,12 @@ const TOOLTIP_OPTIONS_SCHEMA = {
     types: ['string', 'boolean'],
     enum: [false, 'reverse', 'primary', 'success', 'warning', 'error'],
   },
+  cache: { default: false, type: 'boolean' },
+  ttl: {
+    default: 0,
+    type: 'number',
+    min: 0,
+  },
   className: {
     default: DEFAULT_CLASS_NAMES,
     type: 'object',
@@ -169,6 +175,8 @@ function normalizeProps(input: TooltipProps): ResolvedTooltipProps {
     offset: props.offset as number,
     message: props.message as string,
     theme: props.theme as TooltipTheme,
+    cache: props.cache as boolean,
+    ttl: props.ttl as number,
     className: props.className as TooltipClassNames,
     id: props.id as string | null,
     delay: props.delay as number | DropDelay,
@@ -183,66 +191,57 @@ function normalizeProps(input: TooltipProps): ResolvedTooltipProps {
  *
  * 基于 Drop 实现，提供更轻量的文本提示封装。
  */
-class Tooltip implements TooltipInstance {
-  dom: TooltipDom;
-  drop: DropInstance | null;
-  props: ResolvedTooltipProps | null;
-
-  constructor(element: DOMReference, props: TooltipProps = {}) {
-    const settings = normalizeProps(props);
-    this.props = settings;
-    this.drop = createDrop(element, {
-      name: settings.name,
-      mode: settings.mode,
-      position: settings.position,
-      offset: settings.offset,
-      id: settings.id,
-      delay: settings.delay,
-      hoverIntent: settings.hoverIntent,
-      onShown: settings.onShown,
-      onHidden: settings.onHidden,
-      content: this.buildContent(settings),
-    });
-    this.dom = this.drop.dom;
-  }
-
-  private buildContent(settings: ResolvedTooltipProps): HTMLElement {
-    return jsx('div', {
-      className: joinClasses(
-        settings.className.container,
-        settings.theme && settings.className.ui[settings.theme]
-      ),
-      'data-tooltip': settings.name || settings.id || '',
-      children: jsx('div', {
-        className: settings.className.message,
-        'data-tooltip-message': '',
-        children: settings.message,
-      }),
-    }) as HTMLElement;
-  }
-
-  show(useDelay = true): void {
-    this.drop?.show(useDelay);
-  }
-
-  hide(useDelay = true): void {
-    this.drop?.hide(useDelay);
-  }
-
-  toggle(): void {
-    this.drop?.toggle();
-  }
-
-  destroy(): void {
-    this.drop?.destroy();
-    this.drop = null;
-    this.props = null;
-  }
-}
-
 export function createTooltip(
   element: DOMReference,
-  props: TooltipProps = {}
+  input: TooltipProps = {}
 ): TooltipInstance {
-  return new Tooltip(element, props);
+  const props = normalizeProps(input);
+  const content = jsx('div', {
+    className: joinClasses(
+      props.className.container,
+      props.theme && props.className.ui[props.theme]
+    ),
+    'data-tooltip': props.name || props.id || '',
+    children: jsx('div', {
+      className: props.className.message,
+      'data-tooltip-message': '',
+      children: props.message,
+    }),
+  }) as HTMLElement;
+  let drop: DropInstance | null = createDrop(element, {
+    name: props.name,
+    mode: props.mode,
+    position: props.position,
+    offset: props.offset,
+    cache: props.cache,
+    ttl: props.ttl,
+    id: props.id,
+    delay: props.delay,
+    hoverIntent: props.hoverIntent,
+    onShown: props.onShown,
+    onHidden: props.onHidden,
+    content,
+  });
+  const tooltip: TooltipInstance = {
+    get element() {
+      return drop?.element || null;
+    },
+    get drop() {
+      return drop;
+    },
+    show(useDelay = true) {
+      drop?.show(useDelay);
+    },
+    hide(useDelay = true) {
+      drop?.hide(useDelay);
+    },
+    toggle() {
+      drop?.toggle();
+    },
+    destroy() {
+      drop?.destroy();
+      drop = null;
+    },
+  };
+  return tooltip;
 }

package/src/utilities/browser.ts

@@ -1,3 +1,7 @@
+import { t } from 'vanilla-signal-i18n';
+import { Toast } from '../primitives/toast';
+import locales from '../locales';
+
 declare global {
   interface Navigator {
     userAgentData?: {
@@ -103,3 +107,37 @@ function fallbackCopy(text: string): boolean {
     }
   }
 }
+
+export type SupportES2022 = boolean;
+export function isModernBrowser(): SupportES2022 {
+  try {
+    // Object.hasOwn()
+    if (typeof Object.hasOwn !== 'function') return false;
+    // Array.prototype.at()
+    if (typeof [].at !== 'function') return false;
+
+    // new Function('class Test { #x = 1; getX() { return this.#x; } }');
+    // new Function('const re = /a/d; return re.hasIndices;');
+    // const err = new Error('test', { cause: 'reason' });
+    // if (err.cause !== 'reason') return false;
+
+    return true;
+  } catch {
+    return false;
+  }
+}
+export function checkModernBrowser(): SupportES2022 {
+  if (!isModernBrowser()) {
+    Toast.action(t('wn', locales), {
+      type: 'error',
+      onAction: () => {
+        window.open('https://www.google.cn/chrome/fallback/', '_blank');
+      },
+      className: {
+        actionBtn: 'j-button is-sm is-danger',
+      },
+    });
+    return false;
+  }
+  return true;
+}

package/src/utilities/dom.ts

@@ -104,52 +104,6 @@ function flattenNodeArray(
   return out;
 }
 
-/**
- * 将可渲染内容归一化为 DOM 节点数组。
- *
- * 支持的输入类型：
- * - **Node/Element**: 包装为单元素数组
- * - **string**: 按 HTML 片段解析为节点数组
- * - **number/boolean**: 转换为文本节点
- * - **Array**: 递归扁平化处理
- * - **Function**: 调用后递归处理返回值
- * - **null/undefined/false/true**: 返回空数组
- *
- * @param {RenderableContent<TContext>} content 可渲染内容。
- * @param {TContext} [context] 传递给函数类型内容的上下文。
- * @returns {Node[]} 归一化后的节点数组。
- */
-export function normalizeContentNodes<TContext = unknown>(
-  content: RenderableContent<TContext>,
-  context?: TContext
-): Node[] {
-  if (typeof content === 'function') {
-    return normalizeContentNodes(content(context as TContext), context);
-  }
-
-  const value = content;
-
-  if (value == null || value === false || value === true) return [];
-
-  if (Array.isArray(value)) {
-    return value.flatMap((item) => normalizeContentNodes(item, context));
-  }
-
-  if (isNode(value)) return [value];
-
-  if (typeof value === 'string') {
-    const template = document.createElement('template');
-    template.innerHTML = value;
-    return Array.from(template.content.childNodes);
-  }
-
-  return [
-    document.createTextNode(
-      String(value as string | number | boolean | bigint | symbol)
-    ),
-  ];
-}
-
 /**
  * 将 DOM 引用解析为节点列表。
  *
@@ -299,14 +253,6 @@ export function isRenderableContent(
   return isRenderableValue(value);
 }
 
-export function normalizeRenderableContentNodes<TContext>(
-  content: unknown,
-  context: TContext
-): Node[] | null {
-  if (!isRenderableContent(content)) return null;
-  return normalizeContentNodes(content, context);
-}
-
 /**
  * 根据 CSS 选择器获取第一个匹配的元素。
  * @param {string} selector CSS 选择器。

package/src/utilities/refs.ts

@@ -0,0 +1,61 @@
+import { onCleanup } from 'vanilla-signal';
+
+export interface ElementRef<TElement extends Element> {
+  readonly current: TElement | null;
+  set: (element: TElement) => void;
+  clear: () => void;
+}
+
+export function createElementRef<
+  TElement extends Element,
+>(): ElementRef<TElement> {
+  let current: TElement | null = null;
+
+  return {
+    get current() {
+      return current;
+    },
+    set(element) {
+      current = element;
+    },
+    clear() {
+      current = null;
+    },
+  };
+}
+
+export interface KeyedElementRefs<TKey, TElement extends Element> {
+  readonly elements: ReadonlyMap<TKey, TElement>;
+  get: (key: TKey) => TElement | undefined;
+  bind: (key: TKey) => (element: TElement) => void;
+  delete: (key: TKey) => void;
+  clear: () => void;
+}
+
+export function createKeyedElementRefs<
+  TKey,
+  TElement extends Element,
+>(): KeyedElementRefs<TKey, TElement> {
+  const elements = new Map<TKey, TElement>();
+
+  return {
+    elements,
+    get(key) {
+      return elements.get(key);
+    },
+    bind(key) {
+      return (element) => {
+        elements.set(key, element);
+        onCleanup(() => {
+          if (elements.get(key) === element) elements.delete(key);
+        });
+      };
+    },
+    delete(key) {
+      elements.delete(key);
+    },
+    clear() {
+      elements.clear();
+    },
+  };
+}

package/src/utilities/state.ts

@@ -0,0 +1,73 @@
+import { createWatch, untrack, unwrap } from 'vanilla-signal';
+
+import { createScheduledTask } from '../core/scheduler.ts';
+
+export interface StateSyncOptions {
+  deferInitial?: boolean;
+  flushInitial?: boolean;
+  flush?: 'microtask' | 'sync';
+}
+
+export function getStoreVersion(value: unknown): number {
+  if (value && typeof value === 'object') {
+    const version = (value as { __version__?: unknown }).__version__;
+    return typeof version === 'number' ? version : 0;
+  }
+  return 0;
+}
+
+export function trackStoreVersion<T>(value: T): T {
+  getStoreVersion(value);
+  return value;
+}
+
+export function stateSnapshot<T>(value: T): T {
+  return unwrap(value) as T;
+}
+
+/**
+ * Bridges reactive state to an expensive imperative effect. Declarative view
+ * bindings should depend on state directly instead of using this helper.
+ */
+export function createStateSync<TSnapshot>(
+  read: () => TSnapshot,
+  sync: (snapshot: TSnapshot) => void | Promise<void>,
+  {
+    deferInitial = true,
+    flushInitial = false,
+    flush = 'microtask',
+  }: StateSyncOptions = {}
+): () => void {
+  let initialized = false;
+  let hasSnapshot = false;
+  let latestSnapshot: TSnapshot;
+
+  const task = createScheduledTask(() => {
+    if (!hasSnapshot) return;
+    hasSnapshot = false;
+    void untrack(() => sync(latestSnapshot));
+  });
+
+  const watcher = createWatch(
+    read,
+    (snapshot) => {
+      const isInitial = !initialized;
+      initialized = true;
+      latestSnapshot = snapshot as TSnapshot;
+      hasSnapshot = true;
+
+      if ((isInitial && flushInitial) || flush === 'sync') {
+        task.flush();
+        return;
+      }
+
+      task.schedule();
+    },
+    { defer: deferInitial }
+  );
+
+  return () => {
+    task.dispose();
+    watcher.dispose();
+  };
+}

package/src/utilities/timer.ts

@@ -1,38 +1,18 @@
-/**
- * 定时器管理器
- */
-export const timer = {
-  // 存储定时器 { key: timerId }
-  timers: {} as Record<string, ReturnType<typeof setTimeout>>,
+const timers: Record<string, ReturnType<typeof setTimeout>> = {};
 
-  /**
-   * 注册并开始一个定时器
-   * @param {string} key - 定时器的唯一标识
-   * @param {number} duration - 延迟执行的时间（毫秒）
-   * @param {function} callback - 延迟执行的回调函数
-   */
-  start(key: string, duration: number, callback: () => void) {
-    // 1. 如果该 key 已经存在，先清除旧的定时器，防止重复触发
-    if (this.timers[key]) {
-      clearTimeout(this.timers[key]);
-    }
-    // 2. 设置新的定时器，并保存其 ID
-    this.timers[key] = setTimeout(() => {
+export const timer = {
+  timers,
+  start(key: string, duration: number, callback: () => void): void {
+    if (timers[key]) clearTimeout(timers[key]);
+    timers[key] = setTimeout(() => {
       callback();
-      // 3. 执行完毕后，自动从管理器中注销该定时器
-      delete this.timers[key];
+      delete timers[key];
     }, duration);
   },
-
-  /**
-   * 明确注销一个定时器
-   * @param {string} key - 需要取消的定时器唯一标识
-   */
-  cancel(key: string) {
-    if (this.timers[key]) {
-      clearTimeout(this.timers[key]);
-      // 从管理器中移除该记录
-      delete this.timers[key];
+  cancel(key: string): void {
+    if (timers[key]) {
+      clearTimeout(timers[key]);
+      delete timers[key];
     }
   },
 };