niuma-ui 2.0.4 → 2.1.0

package/dist/components/toaster/src/toast-utils.d.ts

@@ -0,0 +1,60 @@
+import type { RsToastPosition, RsToastType } from '../../_shared/src/overlay-utils';
+/** 未传 duration 时的自动关闭（ms）。 */
+export declare const RS_TOAST_DEFAULT_DURATION = 4000;
+/** 同一方位同时画在页面上的条数。 */
+export declare const RS_TOAST_DEFAULT_VISIBLE = 3;
+/** 每个宿主在内存里最多保留的条数，防止循环调用把队列撑满。 */
+export declare const RS_TOAST_MAX = 24;
+/** 离场过渡。减少动态时为 0，节点马上卸掉。 */
+export declare const RS_TOAST_LEAVE_MS = 180;
+/** 滑动超过该距离才关闭。 */
+export declare const RS_TOAST_SWIPE_PX = 72;
+export type RsToastKind = RsToastType | 'loading' | 'default';
+export interface RsToastAction {
+    label: string;
+    onClick?: (event: MouseEvent) => void;
+}
+export interface RsToastOptions {
+    title: string;
+    description?: string;
+    position?: RsToastPosition;
+    /** 毫秒。0 或 Infinity 表示不自动关闭。未传则用宿主默认。 */
+    duration?: number;
+    id?: string;
+    toasterId?: string;
+    dismissible?: boolean;
+    closeButton?: boolean;
+    richColors?: boolean;
+    action?: RsToastAction;
+    cancel?: RsToastAction;
+    onDismiss?: (id: string) => void;
+    onAutoClose?: (id: string) => void;
+}
+export type RsToastInput = string | RsToastOptions;
+export type RsToastPromiseMessage<T> = string | RsToastOptions | ((value: T) => string | RsToastOptions);
+export interface RsToastPromiseMessages<T> {
+    loading: string | RsToastOptions;
+    success?: RsToastPromiseMessage<T>;
+    error?: RsToastPromiseMessage<unknown>;
+    id?: string;
+    toasterId?: string;
+}
+export declare function normalizeRsToastInput(input: RsToastInput): RsToastOptions;
+export declare function normalizePromiseMessage<T>(message: RsToastPromiseMessage<T> | undefined, value: T): RsToastOptions | null;
+/** 未传走 fallback；≤0 或非有限数表示常驻。 */
+export declare function resolveRsToastDuration(duration: number | undefined, fallback: number): number;
+export declare function shouldArmToastTimer(duration: number, hasWindow: boolean): boolean;
+export declare function clampVisibleToasts(value: number | undefined): number;
+export declare function clampToastGap(value: number | undefined): number;
+/** 最新在前。超出上限时丢掉队尾。 */
+export declare function trimToastList<T>(items: T[], max: number): T[];
+export declare function resolveToastPosition(item: RsToastPosition | undefined, host: RsToastPosition): RsToastPosition;
+export declare function toastLiveRole(type: RsToastKind): 'alert' | 'status';
+export declare function toastAriaLive(type: RsToastKind): 'assertive' | 'polite';
+export declare function toastIconName(type: RsToastKind): string;
+export declare function prefersReducedToastMotion(): boolean;
+export declare function toastLeaveDelay(): number;
+export declare function isToastTypingTarget(target: EventTarget | null): boolean;
+/** `alt+t` 这种写法。空字符串表示不注册快捷键。 */
+export declare function matchToastHotkey(event: KeyboardEvent, spec: string | undefined): boolean;
+export declare function errorToastText(error: unknown): string;

package/dist/components/toaster/src/toast-utils.js

@@ -0,0 +1,86 @@
+//#region src/components/toaster/src/toast-utils.ts
+/** 未传 duration 时的自动关闭（ms）。 */
+var RS_TOAST_DEFAULT_DURATION = 4e3;
+function normalizeRsToastInput(input) {
+	if (typeof input === "string") return { title: input };
+	return input;
+}
+function normalizePromiseMessage(message, value) {
+	if (message == null) return null;
+	const resolved = typeof message === "function" ? message(value) : message;
+	if (typeof resolved === "string") return { title: resolved };
+	return resolved;
+}
+/** 未传走 fallback；≤0 或非有限数表示常驻。 */
+function resolveRsToastDuration(duration, fallback) {
+	if (duration == null || Number.isNaN(duration)) return resolveRsToastDuration(fallback, RS_TOAST_DEFAULT_DURATION);
+	if (duration <= 0 || !Number.isFinite(duration)) return Number.POSITIVE_INFINITY;
+	return duration;
+}
+function shouldArmToastTimer(duration, hasWindow) {
+	return hasWindow && Number.isFinite(duration) && duration > 0;
+}
+function clampVisibleToasts(value) {
+	if (value == null || !Number.isFinite(value) || value < 1) return 3;
+	return Math.min(24, Math.floor(value));
+}
+function clampToastGap(value) {
+	if (value == null || !Number.isFinite(value) || value < 0) return 4;
+	return value;
+}
+/** 最新在前。超出上限时丢掉队尾。 */
+function trimToastList(items, max) {
+	if (items.length <= max) return items;
+	return items.slice(0, max);
+}
+function resolveToastPosition(item, host) {
+	return item ?? host;
+}
+function toastLiveRole(type) {
+	return type === "error" ? "alert" : "status";
+}
+function toastAriaLive(type) {
+	return type === "error" ? "assertive" : "polite";
+}
+function toastIconName(type) {
+	switch (type) {
+		case "success": return "circle-check";
+		case "error": return "circle-alert";
+		case "warning": return "triangle-alert";
+		case "loading": return "loader-circle";
+		default: return "info";
+	}
+}
+function prefersReducedToastMotion() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+	return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function toastLeaveDelay() {
+	return prefersReducedToastMotion() ? 0 : 180;
+}
+function isToastTypingTarget(target) {
+	if (typeof HTMLElement === "undefined" || !(target instanceof HTMLElement)) return false;
+	const tag = target.tagName;
+	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable;
+}
+/** `alt+t` 这种写法。空字符串表示不注册快捷键。 */
+function matchToastHotkey(event, spec) {
+	if (!spec || event.repeat) return false;
+	const parts = spec.toLowerCase().split("+").map((part) => part.trim()).filter(Boolean);
+	if (parts.length === 0) return false;
+	const key = parts[parts.length - 1];
+	const needAlt = parts.includes("alt");
+	const needCtrl = parts.includes("ctrl") || parts.includes("control");
+	const needShift = parts.includes("shift");
+	const needMeta = parts.includes("meta");
+	if (event.altKey !== needAlt || event.ctrlKey !== needCtrl) return false;
+	if (event.shiftKey !== needShift || event.metaKey !== needMeta) return false;
+	return event.key.toLowerCase() === key;
+}
+function errorToastText(error) {
+	if (typeof error === "string") return error;
+	if (error instanceof Error && error.message) return error.message;
+	return "";
+}
+//#endregion
+export { RS_TOAST_DEFAULT_DURATION, clampToastGap, clampVisibleToasts, errorToastText, isToastTypingTarget, matchToastHotkey, normalizePromiseMessage, normalizeRsToastInput, prefersReducedToastMotion, resolveRsToastDuration, resolveToastPosition, shouldArmToastTimer, toastAriaLive, toastIconName, toastLeaveDelay, toastLiveRole, trimToastList };

package/dist/components/toolbar/index.d.ts

@@ -1,2 +1,2 @@
 export { default as RsToolbar } from './src/RsToolbar.js';
-export type { RsToolbarBorder, RsToolbarSize } from './src/RsToolbar.js';
+export type { RsToolbarBorder, RsToolbarExpose, RsToolbarInstance, RsToolbarOrientation, RsToolbarSize, } from './src/toolbar-utils';

package/dist/components/toolbar/src/RsToolbar.css

@@ -1,61 +1,235 @@
 
-.rs-toolbar {
+.rs-toolbar[data-v-7b347879] {
+  --rs-toolbar-bg: var(--rs-surface);
+  --rs-toolbar-fg: var(--rs-text-primary);
+  --rs-toolbar-border: var(--rs-border-subtle);
+  --rs-toolbar-gap: var(--rs-space-md);
+  --rs-toolbar-item-gap: var(--rs-space-xs);
+  --rs-toolbar-pad-block: 0px;
+  --rs-toolbar-pad-inline: var(--rs-space-md);
+  --rs-toolbar-height: var(--rs-control-height-lg);
+  --rs-toolbar-font-size: var(--rs-font-size-sm);
+  --rs-toolbar-rail-min: 0px;
+  --rs-toolbar-blur: 16px;
+  --rs-toolbar-sticky-offset: 0px;
+  --rs-toolbar-disabled-opacity: 0.5;
+  --rs-toolbar-z: 1;
   display: flex;
   align-items: center;
-  gap: var(--rs-space-sm);
+  gap: var(--rs-toolbar-gap);
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
   flex-shrink: 0;
-  padding: 0 var(--rs-space-sm);
-  background: var(--rs-surface);
-  color: var(--rs-text);
+  white-space: nowrap;
+  padding-block: var(--rs-toolbar-pad-block);
+  padding-inline: var(--rs-toolbar-pad-inline);
+  min-height: var(--rs-toolbar-height);
+  background: var(--rs-toolbar-bg);
+  color: var(--rs-toolbar-fg);
+  font-size: var(--rs-toolbar-font-size);
+  font-weight: var(--rs-font-weight-regular);
+  line-height: var(--rs-line-height-tight);
 }
-.rs-toolbar--compact {
-  padding-inline: var(--rs-space-xs);
-  gap: var(--rs-space-xs);
+.rs-toolbar--has-center[data-v-7b347879]:not(.rs-toolbar--wrap):not(.rs-toolbar--vertical) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
 }
-.rs-toolbar--elevated {
-  background: var(--rs-surface-elevated);
+.rs-toolbar--compact[data-v-7b347879] {
+  --rs-toolbar-pad-inline: var(--rs-space-sm);
+  --rs-toolbar-gap: var(--rs-space-sm);
 }
-.rs-toolbar--sm {
-  height: 2rem;
+.rs-toolbar--elevated[data-v-7b347879] {
+  --rs-toolbar-bg: var(--rs-surface-elevated);
 }
-.rs-toolbar--md {
-  height: 2.25rem;
+.rs-toolbar--ssm[data-v-7b347879] {
+  --rs-toolbar-height: calc(var(--rs-control-height-sm) + var(--rs-space-xs));
+  --rs-toolbar-font-size: var(--rs-font-size-xs);
+  --rs-toolbar-pad-inline: var(--rs-space-sm);
+  --rs-toolbar-gap: var(--rs-space-sm);
 }
-.rs-toolbar--lg {
-  height: 2.75rem;
+.rs-toolbar--sm[data-v-7b347879] {
+  --rs-toolbar-height: var(--rs-control-height-md);
+  --rs-toolbar-font-size: var(--rs-font-size-xs);
 }
-.rs-toolbar--border-bottom {
-  border-bottom: 1px solid var(--rs-border-subtle);
+.rs-toolbar--md[data-v-7b347879] {
+  --rs-toolbar-height: var(--rs-control-height-lg);
 }
-.rs-toolbar--border-top {
-  border-top: 1px solid var(--rs-border-subtle);
+.rs-toolbar--lg[data-v-7b347879] {
+  --rs-toolbar-height: calc(var(--rs-control-height-lg) + var(--rs-space-sm));
+  --rs-toolbar-pad-inline: var(--rs-space-lg);
 }
-.rs-toolbar--border-both {
-  border-top: 1px solid var(--rs-border-subtle);
-  border-bottom: 1px solid var(--rs-border-subtle);
+.rs-toolbar--border-bottom[data-v-7b347879] {
+  border-block-end: 1px solid var(--rs-toolbar-border);
 }
-.rs-toolbar--border-none {
+.rs-toolbar--border-top[data-v-7b347879] {
+  border-block-start: 1px solid var(--rs-toolbar-border);
+}
+.rs-toolbar--border-both[data-v-7b347879] {
+  border-block-start: 1px solid var(--rs-toolbar-border);
+  border-block-end: 1px solid var(--rs-toolbar-border);
+}
+.rs-toolbar--border-none[data-v-7b347879] {
   border: none;
 }
-.rs-toolbar__start,
-.rs-toolbar__center,
-.rs-toolbar__end {
+.rs-toolbar--vertical[data-v-7b347879] {
+  flex-direction: column;
+  align-items: stretch;
+  align-self: stretch;
+  width: max-content;
+  max-width: 100%;
+  min-width: var(--rs-toolbar-rail-min);
+  min-height: 0;
+  height: auto;
+  padding-block: var(--rs-toolbar-pad-inline);
+  padding-inline: var(--rs-toolbar-pad-block);
+}
+.rs-toolbar--vertical.rs-toolbar--has-center[data-v-7b347879]:not(.rs-toolbar--wrap) {
+  display: grid;
+  grid-template-columns: minmax(0, max-content);
+  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
+  justify-items: stretch;
+}
+.rs-toolbar--vertical.rs-toolbar--border-bottom[data-v-7b347879] {
+  border-block-end: none;
+  border-inline-end: 1px solid var(--rs-toolbar-border);
+}
+.rs-toolbar--vertical.rs-toolbar--border-top[data-v-7b347879] {
+  border-block-start: none;
+  border-inline-start: 1px solid var(--rs-toolbar-border);
+}
+.rs-toolbar--vertical.rs-toolbar--border-both[data-v-7b347879] {
+  border-block-start: none;
+  border-block-end: none;
+  border-inline-start: 1px solid var(--rs-toolbar-border);
+  border-inline-end: 1px solid var(--rs-toolbar-border);
+}
+.rs-toolbar--wrap[data-v-7b347879] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  align-content: center;
+  height: auto;
+  white-space: normal;
+  gap: var(--rs-toolbar-item-gap) var(--rs-toolbar-gap);
+}
+.rs-toolbar--sticky[data-v-7b347879] {
+  position: sticky;
+  inset-block-start: var(--rs-toolbar-sticky-offset);
+  z-index: var(--rs-toolbar-z);
+  background: color-mix(in srgb, var(--rs-toolbar-bg) 78%, transparent);
+  backdrop-filter: saturate(1.2) blur(var(--rs-toolbar-blur));
+  -webkit-backdrop-filter: saturate(1.2) blur(var(--rs-toolbar-blur));
+}
+.rs-toolbar--disabled[data-v-7b347879] {
+  opacity: var(--rs-toolbar-disabled-opacity);
+}
+.rs-toolbar__start[data-v-7b347879],
+.rs-toolbar__center[data-v-7b347879],
+.rs-toolbar__end[data-v-7b347879] {
   display: flex;
   align-items: center;
-  gap: var(--rs-space-xs);
+  gap: var(--rs-toolbar-item-gap);
   min-width: 0;
+  max-width: 100%;
 }
-.rs-toolbar__start {
+.rs-toolbar__start[data-v-7b347879] {
   flex: 1 1 auto;
-  overflow: hidden;
+  justify-content: flex-start;
+  overflow: clip;
+  overflow-clip-margin: var(--rs-focus-ring-width, 2px);
 }
-.rs-toolbar__center {
+.rs-toolbar__center[data-v-7b347879] {
   flex: 0 0 auto;
+  justify-content: center;
+  min-width: max-content;
+}
+.rs-toolbar__end[data-v-7b347879] {
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+.rs-toolbar--has-center:not(.rs-toolbar--wrap):not(.rs-toolbar--vertical) .rs-toolbar__start[data-v-7b347879],
+.rs-toolbar--has-center:not(.rs-toolbar--wrap):not(.rs-toolbar--vertical) .rs-toolbar__end[data-v-7b347879] {
+  width: 100%;
+  overflow: clip;
+  overflow-clip-margin: var(--rs-focus-ring-width, 2px);
+}
+.rs-toolbar--has-center:not(.rs-toolbar--wrap):not(.rs-toolbar--vertical) .rs-toolbar__start[data-v-7b347879] {
+  grid-column: 1;
+  justify-self: stretch;
+  margin-inline-start: 0;
+}
+.rs-toolbar--has-center:not(.rs-toolbar--wrap):not(.rs-toolbar--vertical) .rs-toolbar__center[data-v-7b347879] {
+  grid-column: 2;
+  justify-self: center;
+}
+.rs-toolbar--has-center:not(.rs-toolbar--wrap):not(.rs-toolbar--vertical) .rs-toolbar__end[data-v-7b347879] {
+  grid-column: 3;
+  justify-self: stretch;
+  margin-inline-start: 0;
 }
-.rs-toolbar__end {
+.rs-toolbar--vertical .rs-toolbar__start[data-v-7b347879],
+.rs-toolbar--vertical .rs-toolbar__center[data-v-7b347879],
+.rs-toolbar--vertical .rs-toolbar__end[data-v-7b347879] {
   flex: 0 0 auto;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  width: 100%;
+  max-width: none;
+  margin-inline-start: 0;
+  overflow: visible;
+}
+.rs-toolbar--vertical .rs-toolbar__end[data-v-7b347879] {
+  margin-block-start: auto;
+}
+.rs-toolbar--vertical.rs-toolbar--has-center:not(.rs-toolbar--wrap) .rs-toolbar__start[data-v-7b347879] {
+  grid-column: 1;
+  grid-row: 1;
+  justify-self: stretch;
+  align-self: start;
+  margin: 0;
+}
+.rs-toolbar--vertical.rs-toolbar--has-center:not(.rs-toolbar--wrap) .rs-toolbar__center[data-v-7b347879] {
+  grid-column: 1;
+  grid-row: 2;
+  justify-self: stretch;
+  align-self: center;
+  margin: 0;
+}
+.rs-toolbar--vertical.rs-toolbar--has-center:not(.rs-toolbar--wrap) .rs-toolbar__end[data-v-7b347879] {
+  grid-column: 1;
+  grid-row: 3;
+  justify-self: stretch;
+  align-self: end;
+  margin: 0;
+}
+.rs-toolbar--wrap .rs-toolbar__start[data-v-7b347879] {
+  flex-wrap: wrap;
+  overflow: visible;
+}
+.rs-toolbar--wrap:not(.rs-toolbar--vertical) .rs-toolbar__end[data-v-7b347879] {
   margin-inline-start: auto;
 }
+@media (prefers-reduced-transparency: reduce) {
+.rs-toolbar--sticky[data-v-7b347879] {
+    background: var(--rs-toolbar-bg);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+}
+@media (forced-colors: active) {
+.rs-toolbar[data-v-7b347879] {
+    --rs-toolbar-bg: Canvas;
+    --rs-toolbar-fg: CanvasText;
+    --rs-toolbar-border: CanvasText;
+}
+.rs-toolbar--elevated[data-v-7b347879],
+  .rs-toolbar--sticky[data-v-7b347879] {
+    --rs-toolbar-bg: Canvas;
+    background: Canvas;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+}

package/dist/components/toolbar/src/RsToolbar.d.ts

@@ -1,37 +1,62 @@
-/** 工具栏高度密度，对应常见面板顶栏。 */
-export type RsToolbarSize = 'sm' | 'md' | 'lg';
-/** 分割线位置。 */
-export type RsToolbarBorder = 'bottom' | 'top' | 'both' | 'none';
+import type { RsComponentSize } from '../../../theme/types';
+import { type RsToolbarBorder, type RsToolbarExpose, type RsToolbarOrientation } from './toolbar-utils';
+export type { RsToolbarBorder, RsToolbarExpose, RsToolbarOrientation };
+export type { RsToolbarSize } from './toolbar-utils';
 type __VLS_Props = {
     /** 根元素标签名。 */
     tag?: string;
-    /** 高度密度：sm≈32px / md≈36px / lg≈44px。 */
-    size?: RsToolbarSize;
-    /** 分割线位置。 */
+    /** 高度密度。未传跟 ConfigProvider，再回退 md。 */
+    size?: RsComponentSize;
+    /** 分割线位置。竖排时映射到逻辑 inline 边。 */
     border?: RsToolbarBorder;
-    /** 使用抬升底色（`--rs-surface-elevated`）。 */
+    orientation?: RsToolbarOrientation;
+    /** 使用抬升底色（`--rs-toolbar-bg` → `--rs-surface-elevated`）。 */
     elevated?: boolean;
     /** 收紧水平内边距。 */
     compact?: boolean;
-    /** 无障碍标签（`role="toolbar"`）。 */
+    /** 允许换行，不再裁切 start 区。 */
+    wrap?: boolean;
+    /** sticky 吸附。偏移写入 `--rs-toolbar-sticky-offset`。 */
+    sticky?: boolean;
+    stickyOffset?: number;
+    disabled?: boolean;
+    /**
+     * APG 键盘：方向键 / Home / End 在命令控件间移动。
+     * 输入框不拦截。false 时不改 tabindex，每项仍是独立 Tab 停。
+     */
+    keyboard?: boolean;
+    /** 方向键在首尾循环。 */
+    loop?: boolean;
+    ariaLabel?: string;
+    /** 兼容旧名，等同 ariaLabel。 */
     label?: string;
+    id?: string;
 };
-declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
+declare var __VLS_12: {}, __VLS_14: {}, __VLS_16: {}, __VLS_18: {}, __VLS_20: {}, __VLS_22: {};
 type __VLS_Slots = {} & {
-    left?: (props: typeof __VLS_8) => any;
+    start?: (props: typeof __VLS_12) => any;
 } & {
-    default?: (props: typeof __VLS_10) => any;
+    left?: (props: typeof __VLS_14) => any;
 } & {
-    center?: (props: typeof __VLS_12) => any;
+    default?: (props: typeof __VLS_16) => any;
 } & {
-    right?: (props: typeof __VLS_14) => any;
+    center?: (props: typeof __VLS_18) => any;
+} & {
+    end?: (props: typeof __VLS_20) => any;
+} & {
+    right?: (props: typeof __VLS_22) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, RsToolbarExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     tag: string;
-    size: RsToolbarSize;
+    disabled: boolean;
     border: RsToolbarBorder;
+    orientation: RsToolbarOrientation;
     elevated: boolean;
     compact: boolean;
+    wrap: boolean;
+    sticky: boolean;
+    keyboard: boolean;
+    loop: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;