vanilla-jui 1.5.19 → 1.5.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.5.19",
+  "version": "1.5.21",
   "private": false,
   "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
   "keywords": [

package/src/components/form.ts

@@ -13,8 +13,12 @@ import {
   type FunctionalComponent,
   defineComponent,
 } from '../core/component.ts';
-import { joinClasses } from '../utilities/class-name.ts';
-import { asRenderable, type RenderableContent, all } from '../utilities/dom.ts';
+import {
+  all,
+  asRenderable,
+  joinClasses,
+  type RenderableContent,
+} from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
 import { isPlainObject } from '../utilities/object.ts';
 import {

package/src/components/menu.ts

@@ -16,7 +16,7 @@ import {
 } from '../core/component.ts';
 import locales from '../locales/index.ts';
 import { icon } from '../primitives/icons.ts';
-import { joinClasses } from '../utilities/class-name.ts';
+import { joinClasses } from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
 import {

package/src/components/modal.ts

@@ -16,10 +16,10 @@ import locales from '../locales/index.ts';
 import { icon } from '../primitives/icons.ts';
 import { createLoading } from '../primitives/loading.ts';
 import { createPopup } from '../primitives/popup.ts';
-import { joinClasses } from '../utilities/class-name.ts';
 import {
   all,
   asRenderable,
+  joinClasses,
   q,
   type RenderableContent,
 } from '../utilities/dom.ts';

package/src/components/pagination.ts

@@ -12,7 +12,7 @@ import {
   defineComponent,
 } from '../core/component.ts';
 import { icon } from '../primitives/icons.ts';
-import { joinClasses } from '../utilities/class-name.ts';
+import { joinClasses } from '../utilities/dom.ts';
 import { isPlainObject } from '../utilities/object.ts';
 import {
   type ResolveSchema,

package/src/components/swiper.ts

@@ -13,10 +13,10 @@ import {
 } from '../core/component.ts';
 import { icon } from '../primitives/icons.ts';
 import { createLoading } from '../primitives/loading.ts';
-import { joinClasses } from '../utilities/class-name.ts';
 import {
   all,
   asRenderable,
+  joinClasses,
   q,
   type RenderableContent,
 } from '../utilities/dom.ts';

package/src/components/tabs.ts

@@ -14,8 +14,11 @@ import {
   defineComponent,
 } from '../core/component.ts';
 import { createLoading } from '../primitives/loading.ts';
-import { joinClasses } from '../utilities/class-name.ts';
-import { asRenderable, type RenderableContent } from '../utilities/dom.ts';
+import {
+  asRenderable,
+  joinClasses,
+  type RenderableContent,
+} from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
 import { createElementRef, createKeyedElementRefs } from '../utilities/refs.ts';
@@ -58,7 +61,7 @@ export type TabContent =
 
 export interface TabItem extends Record<string, unknown> {
   name?: string;
-  title: Exclude<RenderableContent, (...args: never[]) => unknown>;
+  title: RenderableContent<TabsPanelContext>;
   content: TabContent;
   cache?: boolean;
   ttl?: number;
@@ -123,8 +126,6 @@ type TabsBase = FunctionalComponent<
 
 export type Tabs = TabsBase & {
   readonly current: TabsCurrent;
-  readonly activeIndex: number;
-  readonly disabledNames: string[];
 };
 
 type PointerDragEvent = MouseEvent | TouchEvent;
@@ -519,8 +520,18 @@ export function createTabs(input: TabsProps = {}): Tabs {
     }) as HTMLElement;
   };
 
-  const tabView = (item: () => TabItem, _index: () => number): HTMLElement => {
+  const tabView = (item: () => TabItem, index: () => number): HTMLElement => {
     const name = item().name as string;
+    const title = (): RenderableContent<TabsPanelContext> => {
+      const value = item().title;
+      const context: TabsPanelContext = {
+        tabs: instance,
+        item: item(),
+        index: index(),
+        name,
+      };
+      return typeof value === 'function' ? value(context) : value;
+    };
     return jsx('div', {
       className: props.className.tab,
       'data-tabs-tab': name,
@@ -528,7 +539,7 @@ export function createTabs(input: TabsProps = {}): Tabs {
       'aria-selected': () => (isActive(name) ? 'true' : 'false'),
       'aria-disabled': () => (isDisabled(name) ? 'true' : 'false'),
       ref: tabs.bind(name),
-      children: () => asRenderable(item().title),
+      children: () => asRenderable(title()),
     }) as HTMLElement;
   };
 
@@ -652,8 +663,6 @@ export function createTabs(input: TabsProps = {}): Tabs {
 
   Object.defineProperties(instance, {
     current: { enumerable: true, get: current },
-    activeIndex: { enumerable: true, get: () => current().index },
-    disabledNames: { enumerable: true, get: disabledNames },
   });
 
   return instance;

package/src/components/toc.ts

@@ -1,7 +1,7 @@
 import {
   For,
-  createMemo,
   createDeepStore,
+  createMemo,
   flushSync,
   jsx,
 } from 'vanilla-signal';
@@ -10,8 +10,12 @@ import {
   type FunctionalComponent,
   defineComponent,
 } from '../core/component.ts';
-import { joinClasses } from '../utilities/class-name.ts';
-import { type DOMReference, all, requireContainer } from '../utilities/dom.ts';
+import {
+  type DOMReference,
+  all,
+  joinClasses,
+  requireContainer,
+} from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
 import { type ResolveSchema, resolveProps } from '../utilities/types.ts';

package/src/css/accordion.css

@@ -28,10 +28,6 @@
     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;
@@ -41,10 +37,6 @@
     --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;
@@ -99,6 +91,9 @@
     flex: 1;
   }
 
+  .j-accordion .accordion-header[aria-expanded='true'],
+  .j-accordion .accordion-header[aria-expanded='false']:nth-last-child(2),
+  .j-accordion .accordion-panel[aria-hidden='true'],
   .j-accordion .accordion-panel:last-child {
     border-bottom: 0;
   }

package/src/css/content.css

@@ -341,7 +341,7 @@
     position: relative;
     margin-block: 1rem;
     border-radius: var(--radius-md);
-    border: 1px solid var(--content-border);
+    border: 1px solid var(--content-border-subtle);
     overflow: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--ui-border) transparent;
@@ -356,10 +356,9 @@
   .j-code-editor .code-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 12px;
+    gap: 40px;
     padding: 0.5rem 1rem 0;
-    font-size: 0.78rem;
+    font-size: 12px;
     color: var(--ui-fg-soft);
   }
 

package/src/css/layout.css

@@ -159,6 +159,12 @@
     height: fit-content;
   }
 
+  .group {
+    display: flex;
+    gap: var(--group-gap, 0.5rem);
+    flex-wrap: wrap;
+  }
+
   /* 行容器 */
   .flex-container {
     display: flex;

package/src/css/tabs.css

@@ -56,7 +56,7 @@
     display: none;
     margin: var(--panel-list-item-margin);
     position: relative;
-    min-height: inherit;
+    min-height: 22px;
   }
 
   .j-tabs .panel-list .panel-item[aria-hidden='false'] {

package/src/css/themes/default/tabs.css

@@ -4,7 +4,7 @@
     --tab-list-item-margin: 0;
     --tab-list-font-weight: var(--font-medium);
     --tab-wrap-border: 1px solid var(--ui-border-subtle);
-    --panel-list-padding: var(--s2) var(--s3);
+    --panel-list-padding: var(--s3);
     --panel-list-margin: 0;
     --panel-list-item-margin: 0;
   }

package/src/css/themes/default/tag.css

@@ -1,7 +1,7 @@
 @layer themes {
   .j-tag {
     --tag-gap: var(--space);
-    --tag-fg: var(--ui-fg);
+    --tag-fg: var(--ui-fg-muted);
     --tag-bg: var(--ui-bg);
     --tag-font-size: var(--font-size-sm);
     --tag-font-weight: var(--font-normal);
@@ -19,7 +19,7 @@
     --tag-padding: 0 var(--s2);
   }
 
-  .j-tag.is-contrast {
+  .j-tag.is-reverse {
     --tag-fg: var(--ui-bg);
     --tag-bg: var(--ui-fg);
   }
@@ -73,7 +73,7 @@
     color: var(--ui-bg-subtle);
   }
 
-  .j-tag.is-contrast .el-icon[data-action='close']:hover {
+  .j-tag.is-reverse .el-icon[data-action='close']:hover {
     color: var(--ui-fg);
     background: var(--ui-bg);
   }

package/src/primitives/parabola.ts

@@ -153,14 +153,14 @@ export function createParabola(input: ParabolaProps = {}): ParabolaInstance {
     insert(document.body, root);
   };
   const removeRootIfIdle = (): void => {
-    if (!runtime.destroyed || balls.size > 0) return;
+    if (balls.size > 0) return;
     root?.remove();
     root = null;
   };
   const removeBall = (ball: HTMLElement, notify: boolean): void => {
     if (!balls.has(ball)) return;
     const frame = frames.get(ball);
-    if (frame) cancelAnimationFrame(frame);
+    if (frame !== undefined) cancelAnimationFrame(frame);
     frames.delete(ball);
     ball.remove();
     balls.delete(ball);
@@ -342,6 +342,5 @@ export function createParabola(input: ParabolaProps = {}): ParabolaInstance {
       removeRootIfIdle();
     },
   };
-  createRoot();
   return parabola;
 }

package/src/primitives/theme.ts

@@ -10,8 +10,7 @@ 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 { all, joinClasses } from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
 import { isPlainObject } from '../utilities/object.ts';
 

package/src/primitives/toast.ts

@@ -11,8 +11,7 @@ import { t } from 'vanilla-signal-i18n';
 import locales from '../locales/index.ts';
 import { icon } from '../primitives/icons.ts';
 import { createLoading } from '../primitives/loading.ts';
-import { joinClasses } from '../utilities/class-name.ts';
-import { q } from '../utilities/dom.ts';
+import { joinClasses, q } from '../utilities/dom.ts';
 import { listen } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
 import { timer } from '../utilities/timer.ts';
@@ -52,6 +51,7 @@ export interface ToastThemeOptions extends ToastClassNameOptions {
 
 export interface ToastOptions extends ToastThemeOptions {
   duration?: number;
+  once?: boolean;
   loading?: MaybeAccessor<boolean>;
   text?: {
     loading?: string;
@@ -61,6 +61,7 @@ export interface ToastOptions extends ToastThemeOptions {
 }
 
 export interface ToastConfirmProps extends ToastThemeOptions {
+  once?: boolean;
   text?: {
     close?: string;
     confirm?: string;
@@ -98,6 +99,7 @@ const timers = new Set<string>();
 const disposers = new Map<HTMLElement, () => void>();
 const animations = new Map<HTMLElement, Animation>();
 const operations = new Map<HTMLElement, number>();
+const singletonToasts = new Map<'show' | 'confirm', HTMLElement>();
 let classNames = DEFAULT_CLASS_NAMES;
 
 function mergeClassNames(value?: ToastClassNameConfig): ToastClassNames {
@@ -116,6 +118,30 @@ function addToastDisposer(element: HTMLElement, dispose: () => void): void {
   });
 }
 
+function getSingletonToast(kind: 'show' | 'confirm'): HTMLElement | null {
+  const toast = singletonToasts.get(kind);
+  if (!toast) return null;
+  if (!toast.isConnected || toast.getAttribute('data-mount') === 'false') {
+    singletonToasts.delete(kind);
+    return null;
+  }
+  return toast;
+}
+
+function setSingletonToast(
+  kind: 'show' | 'confirm',
+  toast: HTMLElement,
+  once: boolean
+): void {
+  if (once) singletonToasts.set(kind, toast);
+}
+
+function clearSingletonToast(toast: HTMLElement): void {
+  for (const [kind, current] of singletonToasts) {
+    if (current === toast) singletonToasts.delete(kind);
+  }
+}
+
 function isToastLoading(options: ToastOptions): boolean {
   return !!access(options.loading ?? false);
 }
@@ -230,6 +256,7 @@ function removeToastElement(element: HTMLElement): void {
   element.remove();
   disposers.get(element)?.();
   disposers.delete(element);
+  clearSingletonToast(element);
   const container = q<HTMLElement>('[data-toast-container]');
   if (container && container.children.length === 0) container.remove();
 }
@@ -343,9 +370,15 @@ function hide(toast: HTMLElement | null | undefined): void {
 }
 
 function show(message = '', options: ToastOptions = {}): HTMLElement {
+  const once = options.once ?? false;
+  if (once) {
+    const toast = getSingletonToast('show');
+    if (toast) return toast;
+  }
   validateParam('message', message, 'string', 'Toast.show');
   const duration = options.duration ?? 3000;
   const theme = options.theme || 'info';
+  validateParam('once', once, 'boolean', 'Toast.show');
   validateParam('duration', duration, TOAST_DURATION_RULE, 'Toast.show');
   validateParam('theme', theme, TOAST_THEME_RULE, 'Toast.show');
 
@@ -381,6 +414,7 @@ function show(message = '', options: ToastOptions = {}): HTMLElement {
     () => insert(getOrCreateContainer(names), toast),
     theme === 'error' ? 'assertive' : 'polite'
   );
+  setSingletonToast('show', toast, once);
   addToastDisposer(
     toast,
     listen(toast, 'click', () => void closeByUser(toast, options))
@@ -416,10 +450,16 @@ function lite(
 }
 
 function confirm(message = '', props: ToastConfirmProps = {}): HTMLElement {
+  const once = props.once ?? true;
+  if (once) {
+    const toast = getSingletonToast('confirm');
+    if (toast) return toast;
+  }
   validateParam('message', message, 'string', 'Toast.confirm');
   const closeText = props.text?.close || s('Close');
   const confirmText = props.text?.confirm || s('Confirm');
   const theme = props.theme || 'info';
+  validateParam('once', once, 'boolean', 'Toast.confirm');
   validateParam('theme', theme, TOAST_THEME_RULE, 'Toast.confirm');
   const names = resolveClassNames(props);
   const id = randomId();
@@ -469,6 +509,7 @@ function confirm(message = '', props: ToastConfirmProps = {}): HTMLElement {
       q<HTMLButtonElement>('[data-toast-button="confirm"]', element)?.focus();
     }
   );
+  setSingletonToast('confirm', element, once);
   return element;
 }
 
@@ -480,6 +521,7 @@ function clearAll(): void {
   for (const animation of animations.values()) animation.cancel();
   animations.clear();
   operations.clear();
+  singletonToasts.clear();
   q<HTMLElement>('[data-toast-container]')?.remove();
   q<HTMLElement>('[data-toast-lite]')?.remove();
 }

package/src/primitives/tooltip.ts

@@ -1,7 +1,6 @@
 import { jsx } from 'vanilla-signal';
 
-import { joinClasses } from '../utilities/class-name.ts';
-import { type DOMReference } from '../utilities/dom.ts';
+import { type DOMReference, joinClasses } from '../utilities/dom.ts';
 import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
 import { createDrop } from './drop.ts';
 

package/src/utilities/dom.ts

@@ -23,6 +23,7 @@ export type QueryContext = Document | DocumentFragment | Element;
 export type CleanupFunction = () => void;
 export type LazyRenderTarget = string | Element;
 export type LazyRenderCallback = () => void;
+export type ClassNameToken = string | false | null | undefined;
 export type RenderableContent<TContext = unknown> =
   | Node
   | string
@@ -39,6 +40,10 @@ export function asRenderable<TContext>(
   return value as Renderable;
 }
 
+export function joinClasses(...tokens: ClassNameToken[]): string {
+  return tokens.filter(Boolean).join(' ');
+}
+
 export interface LazyRenderOptions {
   threshold?: number | number[];
   rootMargin?: string;
@@ -299,11 +304,6 @@ export function all<TElement extends Element = Element>(
 export function lazyRender(
   target: LazyRenderTarget,
   renderCallback: LazyRenderCallback,
-  options?: LazyRenderOptions
-): CleanupFunction;
-export function lazyRender(
-  target: unknown,
-  renderCallback: LazyRenderCallback,
   options: LazyRenderOptions = {}
 ): CleanupFunction {
   if (typeof renderCallback !== 'function') {

package/src/validation/validator.ts

@@ -1,7 +1,11 @@
 import { jsx } from 'vanilla-signal';
 
-import { joinClasses } from '../utilities/class-name.ts';
-import { type DOMReference, all, resolveElement } from '../utilities/dom.ts';
+import {
+  type DOMReference,
+  all,
+  joinClasses,
+  resolveElement,
+} from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
 import { isPlainObject } from '../utilities/object.ts';
 import {

package/src/utilities/class-name.ts

@@ -1,5 +0,0 @@
-export type ClassNameToken = string | false | null | undefined;
-
-export function joinClasses(...tokens: ClassNameToken[]): string {
-  return tokens.filter(Boolean).join(' ');
-}