vanilla-jui 1.4.5 → 1.4.7

package/src/primitives/popup.ts

@@ -0,0 +1,61 @@
+import { jsx } from 'vanilla-signal';
+
+import { type RenderableContent } from '../utilities/dom.ts';
+import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
+
+export interface PopupProps extends Record<string, unknown> {
+  className?: string;
+  position?: string;
+  component?: string;
+  labelledby?: string;
+  content?: RenderableContent;
+}
+
+interface ResolvedPopupProps extends Record<string, unknown> {
+  className?: string;
+  position: string;
+  component: string;
+  labelledby: string;
+  content: RenderableContent;
+}
+
+const POPUP_PROPS_SCHEMA = {
+  className: { default: 'j-popup-layout', type: 'string' },
+  position: { default: 'center', type: 'string' },
+  component: { default: '', type: 'string' },
+  labelledby: { default: '', type: 'string' },
+  content: {
+    default: '',
+    type: 'renderable',
+  },
+} satisfies ResolveSchema<PopupProps>;
+
+function normalizeProps(input: PopupProps): ResolvedPopupProps {
+  const props = resolveProps(input, POPUP_PROPS_SCHEMA, 'Popup');
+
+  return {
+    className: props.className as string,
+    position: props.position as string,
+    component: props.component as string,
+    labelledby: props.labelledby as string,
+    content: props.content as RenderableContent,
+  };
+}
+
+export function createPopup(props: PopupProps = {}): HTMLElement {
+  const { className, position, component, labelledby, content } =
+    normalizeProps(props);
+  const attrs: Record<string, unknown> = {
+    className: `${className} is-${position}`,
+    role: 'dialog',
+    children: content,
+  };
+
+  if (component) {
+    attrs[`data-${component}`] = 'root';
+    attrs[`aria-${component}`] = 'true';
+  }
+  if (labelledby) attrs['aria-labelledby'] = labelledby;
+
+  return jsx('div', attrs) as HTMLElement;
+}

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

@@ -1,3 +1,4 @@
+import { createStorage, type Storage } from 'vanilla-create-storage';
 import {
   bindAttr,
   bindClass,
@@ -9,18 +10,16 @@ import {
 import { t } from 'vanilla-signal-i18n';
 
 import locales from '../locales/index.ts';
+import { joinClasses } from '../utilities/class-name.ts';
 import { all } from '../utilities/dom.ts';
 import { createEventManager, type IEventManager } from '../utilities/events.ts';
-import { getCookie, setCookie } from '../utilities/storage.ts';
+import { isPlainObject } from '../utilities/object.ts';
 
 export type ThemeConfigKey = 'mode' | 'theme' | 'radius' | 'shadow' | 'font';
 
 export interface ThemeClassNames {
   panel: string;
-  closeWrap: string;
-  closeButton: string;
   title: string;
-  description: string;
   container: string;
   item: string;
   itemTitle: string;
@@ -50,7 +49,7 @@ export interface ThemePanelGroup {
   buttons: Array<[string, string]>;
 }
 
-interface ResolvedThemeOptions {
+export interface ThemeResolvedOptions {
   mode: string;
   theme: string;
   radius: string;
@@ -65,12 +64,23 @@ interface ThemeCleanup {
   events: IEventManager;
 }
 
+export interface ThemeInstance {
+  props: ThemeResolvedOptions;
+  createPanel(
+    containerClass?: string | null,
+    panelConfig?: ThemePanelGroup[] | null
+  ): HTMLElement;
+  setConfig(newConfig: ThemeOptions): void;
+  destroy(): void;
+}
+
+type ThemeStoredConfig = Partial<Record<ThemeConfigKey, string>> & {
+  render?: string;
+};
+
 const DEFAULT_CLASS_NAMES: ThemeClassNames = {
   panel: 'j-theme-palette',
-  closeWrap: 'theme-palette-close',
-  closeButton: 'j-button is-text',
   title: 'theme-palette-title',
-  description: 'theme-palette-description',
   container: 'palette-container',
   item: 'palette-item',
   itemTitle: 'item-title',
@@ -82,7 +92,7 @@ const DEFAULT_CLASS_NAMES: ThemeClassNames = {
   buttonText: 'button-text',
 };
 
-const DEFAULT_OPTIONS: ResolvedThemeOptions = {
+const DEFAULT_OPTIONS: ThemeResolvedOptions = {
   mode: 'dark',
   theme: 'indigo',
   radius: 'sm',
@@ -103,7 +113,7 @@ function mergeClassNames(className?: ThemeClassNameConfig): ThemeClassNames {
   return { ...DEFAULT_CLASS_NAMES, ...className };
 }
 
-function normalizeOptions(options: ThemeOptions = {}): ResolvedThemeOptions {
+function normalizeOptions(options: ThemeOptions = {}): ThemeResolvedOptions {
   return {
     ...DEFAULT_OPTIONS,
     ...options,
@@ -121,29 +131,53 @@ function isThemeConfigKey(value: string | undefined): value is ThemeConfigKey {
   );
 }
 
-function joinClasses(
-  ...classes: Array<string | null | undefined | false>
-): string {
-  return classes.filter(Boolean).join(' ');
+function createThemeStorage(): Storage {
+  return createStorage({
+    driver: 'cookie',
+    codec: 'json',
+    driverOptions: {
+      path: '/',
+      sameSite: 'Lax',
+      secure: typeof location !== 'undefined' && location.protocol === 'https:',
+    },
+    ttl: 864e5,
+  });
+}
+
+function normalizeStoredConfig(value: unknown): Partial<ThemeOptions> | null {
+  if (!isPlainObject(value)) return null;
+
+  const source = value as Record<string, unknown>;
+  const config: Partial<ThemeOptions> = {};
+  const keys: ThemeConfigKey[] = ['mode', 'theme', 'radius', 'shadow', 'font'];
+
+  for (const key of keys) {
+    const item = source[key];
+    if (typeof item === 'string') config[key] = item;
+  }
+
+  return Object.keys(config).length ? config : null;
 }
 
 /**
  * 主题管理组件。
  *
- * 负责主题配置的实例化、主题面板交互和 Cookie 读写。实例初始化不修改 html
- * 类名，仅在面板点击交互时同步当前点击项对应的 html class。
+ * 负责主题配置的实例化、主题面板交互和 createStorage 持久化。实例初始化不修改
+ * html 类名，仅在面板点击交互时同步当前点击项对应的 html class。
  */
-export class Theme {
-  props: ResolvedThemeOptions;
+class Theme implements ThemeInstance {
+  props: ThemeResolvedOptions;
   languages: typeof locales;
   cleanup: ThemeCleanup | null;
-  runtime: { destroyed: boolean };
+  runtime: { configVersion: number; destroyed: boolean };
+  storage: Storage;
 
   constructor(options: ThemeOptions = {}) {
     this.props = createDeepStore(normalizeOptions(options));
     this.languages = locales;
     this.cleanup = null;
-    this.runtime = { destroyed: false };
+    this.runtime = { configVersion: 0, destroyed: false };
+    this.storage = createThemeStorage();
 
     this.init();
   }
@@ -159,26 +193,39 @@ export class Theme {
   }
 
   private loadConfig(): void {
-    try {
-      const result = getCookie(this.props.key);
-      if (!result?.trim()) return;
-      const parsed = JSON.parse(result) as Partial<ThemeOptions>;
-      Object.assign(this.props, parsed, {
-        className: mergeClassNames({
-          ...this.props.className,
-          ...parsed.className,
-        }),
-      });
-    } catch {}
+    const configVersion = this.runtime.configVersion;
+    void this.storage
+      .get<unknown>(this.props.key)
+      .then((result) => {
+        if (
+          this.runtime.destroyed ||
+          this.runtime.configVersion !== configVersion
+        )
+          return;
+
+        const config = normalizeStoredConfig(result);
+        if (!config) return;
+
+        flushSync(() => {
+          Object.assign(this.props, config);
+        });
+      })
+      .catch(() => {});
   }
 
   private saveConfig(): void {
     const { mode, theme, radius, shadow, font } = this.props;
     const render = mode === 'auto' ? this.scheme() : mode;
-    setCookie(
-      this.props.key,
-      JSON.stringify({ mode, theme, radius, shadow, font, render })
-    );
+    const config: ThemeStoredConfig = {
+      mode,
+      theme,
+      radius,
+      shadow,
+      font,
+      render,
+    };
+
+    void this.storage.set(this.props.key, config).catch(() => {});
   }
 
   private scheme(): string {
@@ -224,6 +271,7 @@ export class Theme {
       if (button.classList.contains(this.props.className.active)) return;
 
       const previous = this.props[type];
+      this.runtime.configVersion += 1;
       flushSync(() => {
         this.props[type] = value;
       });
@@ -260,19 +308,6 @@ export class Theme {
       className: containerClass || className.panel,
       'data-theme-palette': 'root',
       children: [
-        // jsx('div', {
-        //   className: className.closeWrap,
-        //   'data-theme-close-wrap': '',
-        //   style: {
-        //     display: 'flex',
-        //     justifyContent: 'center',
-        //   },
-        //   children: jsx('button', {
-        //     className: className.closeButton,
-        //     'data-action': 'close',
-        //     children: this.translate('b'),
-        //   }),
-        // }),
         jsx('h3', {
           className: className.title,
           'data-theme-title': '',
@@ -281,15 +316,6 @@ export class Theme {
           },
           children: this.translate('t'),
         }),
-        // jsx('p', {
-        //   className: className.description,
-        //   'data-theme-description': '',
-        //   style: {
-        //     marginTop: 0,
-        //     fontSize: 'var(--text-sm, 0.875rem)',
-        //   },
-        //   children: this.translate('d'),
-        // }),
         jsx('div', {
           className: className.container,
           'data-theme-container': '',
@@ -353,6 +379,7 @@ export class Theme {
   }
 
   setConfig(newConfig: ThemeOptions): void {
+    this.runtime.configVersion += 1;
     flushSync(() => {
       Object.assign(this.props, newConfig, {
         className: mergeClassNames({
@@ -371,6 +398,7 @@ export class Theme {
     this.cleanup?.bindings.forEach((dispose) => dispose());
     this.cleanup?.bindings.clear();
     this.cleanup = null;
+    void this.storage.close().catch(() => {});
   }
 
   private defaultPanelConfig(): ThemePanelGroup[] {
@@ -438,3 +466,7 @@ export class Theme {
     ];
   }
 }
+
+export function createTheme(options: ThemeOptions = {}): ThemeInstance {
+  return new Theme(options);
+}

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

@@ -2,10 +2,13 @@ import { jsx } from 'vanilla-signal';
 import { t } from 'vanilla-signal-i18n';
 
 import locales from '../locales/index.ts';
-import { randomId, timer, validateParam } from '../utilities/core.ts';
+import { icon } from '../primitives/icons.ts';
+import { joinClasses } from '../utilities/class-name.ts';
 import { q } from '../utilities/dom.ts';
 import { listen } from '../utilities/events.ts';
-import { icon } from './icons.ts';
+import { randomId } from '../utilities/id.ts';
+import { timer } from '../utilities/timer.ts';
+import { validateParam } from '../utilities/types.ts';
 
 export type ToastType = 'info' | 'success' | 'warning' | 'error' | 'primary';
 
@@ -14,13 +17,12 @@ export interface ToastClassNames {
   toast: string;
   icon: string;
   message: string;
-  hidden: string;
   lite: string;
   action: string;
   actions: string;
   button: string;
-  closeButton: string;
-  actionButton: string;
+  closeBtn: string;
+  actionBtn: string;
   info: string;
   success: string;
   warning: string;
@@ -50,20 +52,19 @@ interface ResolvedToastOptions {
 const DEFAULT_CLASS_NAMES: ToastClassNames = {
   container: 'j-toast-container',
   toast: 'j-toast',
-  icon: 'toast-icon',
-  message: 'toast-message',
-  hidden: 'is-hidden',
+  icon: 'el-icon',
+  message: 'el-text',
   lite: 'j-toast-lite',
-  action: 'is-action',
+  action: 'j-toast is-action',
   actions: 'toast-actions',
   button: 'j-button is-sm',
-  closeButton: 'is-ghost',
-  actionButton: 'is-outline',
+  closeBtn: 'is-ghost',
+  actionBtn: 'is-outline',
   info: 'is-info',
+  primary: 'is-primary',
   success: 'is-success',
   warning: 'is-warning',
   error: 'is-error',
-  primary: 'is-primary',
 };
 
 const TOAST_TYPE_RULE = {
@@ -73,26 +74,18 @@ const TOAST_TYPE_RULE = {
 
 const TOAST_DURATION_RULE = {
   type: 'number',
-  validate: (value: unknown) => typeof value === 'number' && value >= 0,
-  message: 'expects a positive number or 0.',
+  min: 0,
 };
 
 const LITE_DURATION_RULE = {
   type: 'number',
-  validate: (value: unknown) => typeof value === 'number' && value > 0,
-  message: 'expects a number greater than 0.',
+  greaterThan: 0,
 };
 
 function mergeClassNames(className?: ToastClassNameConfig): ToastClassNames {
   return { ...DEFAULT_CLASS_NAMES, ...className };
 }
 
-function joinClasses(
-  ...classes: Array<string | null | undefined | false>
-): string {
-  return classes.filter(Boolean).join(' ');
-}
-
 /**
  * Toast 消息提示工具。
  *
@@ -284,7 +277,7 @@ export class Toast {
     const toastContainer = Toast.getOrCreateContainer(className);
     const id = randomId();
     const action = jsx('div', {
-      className: joinClasses(className.toast, className.action),
+      className: className.action,
       'data-toast': id,
       'data-toast-action': '',
       children: [
@@ -298,7 +291,7 @@ export class Toast {
           'data-toast-actions': id,
           children: [
             jsx('button', {
-              className: joinClasses(className.button, className.closeButton),
+              className: joinClasses(className.button, className.closeBtn),
               children: props.text?.close || c,
               'data-action': 'close',
               'aria-label': props.text?.close || c,
@@ -308,7 +301,7 @@ export class Toast {
               },
             }),
             jsx('button', {
-              className: joinClasses(className.button, className.actionButton),
+              className: joinClasses(className.button, className.actionBtn),
               children: props.text?.action || a,
               'data-action': 'toast-action',
               'aria-label': props.text?.action || a,

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

@@ -1,33 +1,79 @@
 import { jsx } from 'vanilla-signal';
 
-import { type ResolveSchema, resolveProps } from '../utilities/core.ts';
+import { joinClasses } from '../utilities/class-name.ts';
 import { type DOMReference } from '../utilities/dom.ts';
-import {
-  Drop,
-  type DropDelay,
-  type DropMode,
-  type DropPosition,
-} from './drop.ts';
-
-export interface TooltipClassNames {
+import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
+import { createDrop } from './drop.ts';
+
+type DropInstance = ReturnType<typeof createDrop>;
+type DropMode = 'hover' | 'click';
+type DropPosition =
+  | 'auto'
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'left'
+  | 'right';
+
+interface DropDelay {
+  show?: number;
+  hide?: number;
+}
+
+interface TooltipDom {
+  root: HTMLElement | null;
+}
+
+interface TooltipInstance {
+  dom: TooltipDom;
+  drop: DropInstance | null;
+  show(useDelay?: boolean): void;
+  hide(useDelay?: boolean): void;
+  toggle(): void;
+  destroy(): void;
+}
+
+interface TooltipClassNames {
   container: string;
   message: string;
+  ui: TooltipThemeClassNames;
 }
 
-export type TooltipClassNameConfig = Partial<TooltipClassNames>;
+interface TooltipThemeClassNames {
+  reverse: string;
+  primary: string;
+  success: string;
+  warning: string;
+  error: string;
+}
 
-export interface TooltipProps extends Record<string, unknown> {
+type TooltipTheme =
+  | false
+  | 'reverse'
+  | 'primary'
+  | 'success'
+  | 'warning'
+  | 'error';
+type TooltipClassNameConfig = Partial<Omit<TooltipClassNames, 'ui'>> & {
+  ui?: Partial<TooltipThemeClassNames>;
+};
+
+interface TooltipProps extends Record<string, unknown> {
   name?: string | null;
   mode?: DropMode;
   position?: DropPosition;
   offset?: number;
   message?: string;
+  theme?: TooltipTheme;
   className?: TooltipClassNameConfig;
   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 ResolvedTooltipProps extends Record<string, unknown> {
@@ -36,6 +82,7 @@ interface ResolvedTooltipProps extends Record<string, unknown> {
   position: DropPosition;
   offset: number;
   message: string;
+  theme: TooltipTheme;
   className: TooltipClassNames;
   id: string | null;
   delay: number | DropDelay;
@@ -46,9 +93,30 @@ interface ResolvedTooltipProps extends Record<string, unknown> {
 
 const DEFAULT_CLASS_NAMES: TooltipClassNames = {
   container: 'j-tooltip',
-  message: 'tooltip-message',
+  message: 'el-text',
+  ui: {
+    reverse: 'is-reverse',
+    primary: 'is-primary',
+    success: 'is-success',
+    warning: 'is-warning',
+    error: 'is-error',
+  },
 };
 
+function normalizeClassNames(value: unknown): TooltipClassNames {
+  const input = value && typeof value === 'object' ? value : {};
+  const ui =
+    'ui' in input && input.ui && typeof input.ui === 'object' ? input.ui : {};
+  return {
+    ...DEFAULT_CLASS_NAMES,
+    ...input,
+    ui: {
+      ...DEFAULT_CLASS_NAMES.ui,
+      ...ui,
+    },
+  };
+}
+
 const TOOLTIP_OPTIONS_SCHEMA = {
   name: { default: null, types: ['string', 'null'] },
   mode: { default: 'hover', type: 'string', enum: ['hover', 'click'] },
@@ -73,16 +141,17 @@ const TOOLTIP_OPTIONS_SCHEMA = {
     type: 'string',
     normalize: (value: unknown) =>
       typeof value === 'string' ? value.trim() : value,
-    validate: (value: unknown) => typeof value === 'string' && value.length > 0,
-    message: 'expects a non-empty string.',
+    nonEmpty: true,
+  },
+  theme: {
+    default: false,
+    types: ['string', 'boolean'],
+    enum: [false, 'reverse', 'primary', 'success', 'warning', 'error'],
   },
   className: {
     default: DEFAULT_CLASS_NAMES,
     type: 'object',
-    normalize: (value: unknown) => ({
-      ...DEFAULT_CLASS_NAMES,
-      ...(value && typeof value === 'object' ? value : {}),
-    }),
+    normalize: normalizeClassNames,
   },
   id: { default: null, types: ['string', 'null'] },
   delay: { default: 100, types: ['number', 'object'] },
@@ -99,6 +168,7 @@ function normalizeProps(input: TooltipProps): ResolvedTooltipProps {
     position: props.position as DropPosition,
     offset: props.offset as number,
     message: props.message as string,
+    theme: props.theme as TooltipTheme,
     className: props.className as TooltipClassNames,
     id: props.id as string | null,
     delay: props.delay as number | DropDelay,
@@ -113,14 +183,15 @@ function normalizeProps(input: TooltipProps): ResolvedTooltipProps {
  *
  * 基于 Drop 实现，提供更轻量的文本提示封装。
  */
-export class Tooltip {
-  drop: Drop | null;
+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 = new Drop(element, {
+    this.drop = createDrop(element, {
       name: settings.name,
       mode: settings.mode,
       position: settings.position,
@@ -132,11 +203,15 @@ export class Tooltip {
       onHidden: settings.onHidden,
       content: this.buildContent(settings),
     });
+    this.dom = this.drop.dom;
   }
 
   private buildContent(settings: ResolvedTooltipProps): HTMLElement {
     return jsx('div', {
-      className: settings.className.container,
+      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,
@@ -168,6 +243,6 @@ export class Tooltip {
 export function createTooltip(
   element: DOMReference,
   props: TooltipProps = {}
-): Tooltip {
+): TooltipInstance {
   return new Tooltip(element, props);
 }