niuma-ui 2.0.3 → 2.0.9

package/dist/components/toaster/src/RsToaster.css

@@ -1,141 +1,150 @@
 
-[data-sonner-toaster].rs-toaster {
-  --rs-toast-radius: 1rem;
-  --rs-toast-bg: color-mix(in srgb, var(--rs-surface-elevated) 86%, transparent);
-  --rs-toast-border: color-mix(in srgb, var(--rs-border) 72%, rgb(255 255 255 / 0.08));
-  --rs-toast-shadow:
-    0 16px 40px -20px rgb(0 0 0 / 0.3),
-    0 8px 18px -14px rgb(0 0 0 / 0.18),
-    0 0 0 0.5px rgb(255 255 255 / 0.08);
-  --rs-toast-tint: color-mix(in srgb, var(--rs-info) 7%, transparent);
-  --rs-toast-highlight: rgb(255 255 255 / 0.08);
+.rs-toaster {
+  --rs-toaster-offset: var(--rs-space-lg);
+  --rs-toaster-gap: var(--rs-space-xs);
+  --rs-toast-radius: var(--rs-radius-lg, 1rem);
+  --rs-toast-bg: color-mix(in srgb, var(--rs-surface-elevated) 88%, transparent);
+  --rs-toast-border: color-mix(in srgb, var(--rs-border) 72%, transparent);
+  --rs-toast-shadow: var(--rs-shadow-lg);
+  position: fixed;
   z-index: var(--rs-z-toast);
+  pointer-events: none;
   font-family: inherit;
+  color: var(--rs-text);
 }
-[data-rs-theme='light'] [data-sonner-toaster].rs-toaster {
-  --rs-toast-bg: color-mix(in srgb, var(--rs-surface-elevated) 94%, rgb(255 255 255 / 0.8));
-  --rs-toast-border: color-mix(in srgb, var(--rs-border) 84%, rgb(255 255 255 / 0.9));
-  --rs-toast-shadow:
-    0 18px 42px -24px rgb(15 23 42 / 0.2),
-    0 8px 18px -14px rgb(15 23 42 / 0.12),
-    0 0 0 0.5px rgb(255 255 255 / 0.86);
-  --rs-toast-tint: color-mix(in srgb, var(--rs-info) 4%, #ffffff);
-  --rs-toast-highlight: rgb(255 255 255 / 0.72);
-}
-[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast {
-  position: absolute;
+.rs-toaster__viewport {
+  position: fixed;
+  z-index: var(--rs-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--rs-toaster-gap);
+  width: max-content;
+  max-width: calc(100vw - 1.5rem);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  pointer-events: none;
+}
+.rs-toaster__viewport--top-left {
+  top: max(var(--rs-toaster-offset), env(safe-area-inset-top));
+  left: max(var(--rs-toaster-offset), env(safe-area-inset-left));
 }
-[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-y-position='top'] {
-  top: 0;
+.rs-toaster__viewport--top-right {
+  top: max(var(--rs-toaster-offset), env(safe-area-inset-top));
+  right: max(var(--rs-toaster-offset), env(safe-area-inset-right));
 }
-[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-y-position='bottom'] {
-  top: auto;
-  bottom: 0;
+.rs-toaster__viewport--top-center {
+  top: max(var(--rs-toaster-offset), env(safe-area-inset-top));
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.rs-toaster__viewport--bottom-left {
+  bottom: max(var(--rs-toaster-offset), env(safe-area-inset-bottom));
+  left: max(var(--rs-toaster-offset), env(safe-area-inset-left));
+  flex-direction: column-reverse;
+}
+.rs-toaster__viewport--bottom-right {
+  bottom: max(var(--rs-toaster-offset), env(safe-area-inset-bottom));
+  right: max(var(--rs-toaster-offset), env(safe-area-inset-right));
+  flex-direction: column-reverse;
+}
+.rs-toaster__viewport--bottom-center {
+  bottom: max(var(--rs-toaster-offset), env(safe-area-inset-bottom));
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column-reverse;
+  align-items: center;
 }
-[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-x-position='left'] {
-  left: 0;
+.rs-toaster__viewport--collapsed {
+  display: grid;
 }
-[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-x-position='right'] {
-  right: 0;
+.rs-toaster__viewport--collapsed .rs-toast {
+  grid-area: 1 / 1;
 }
-[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-x-position='center'] {
-  inset-inline: 0;
+.rs-toaster__viewport--collapsed .rs-toast:not(.rs-toast--front) {
+  pointer-events: none;
+  transform: translateY(calc(var(--rs-toast-index) * 0.45rem)) scale(calc(1 - var(--rs-toast-index) * 0.04));
+}
+.rs-toaster__viewport--bottom-left.rs-toaster__viewport--collapsed .rs-toast:not(.rs-toast--front),
+.rs-toaster__viewport--bottom-right.rs-toaster__viewport--collapsed .rs-toast:not(.rs-toast--front),
+.rs-toaster__viewport--bottom-center.rs-toaster__viewport--collapsed .rs-toast:not(.rs-toast--front) {
+  transform: translateY(calc(var(--rs-toast-index) * -0.45rem)) scale(calc(1 - var(--rs-toast-index) * 0.04));
 }
 .rs-toast {
   --rs-toast-accent: color-mix(in srgb, var(--rs-info) 68%, transparent);
-  overflow: hidden;
+  --rs-toast-tint: color-mix(in srgb, var(--rs-info) 7%, transparent);
+  position: relative;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
-  column-gap: 0.625rem;
-  row-gap: 0.5rem;
-  width: var(--width, auto);
-  min-width: 19rem;
+  column-gap: var(--rs-space-sm);
+  row-gap: var(--rs-space-xs);
+  width: max-content;
+  min-width: min(19rem, calc(100vw - 1.5rem));
   max-width: min(29rem, calc(100vw - 1.5rem));
-  padding: 0.8125rem 2.25rem 0.8125rem 0.875rem;
+  margin: 0;
+  padding-block: var(--rs-space-md);
+  padding-inline: var(--rs-space-md) 2.25rem;
   border: 1px solid var(--rs-toast-border);
   border-radius: var(--rs-toast-radius);
   background:
-    linear-gradient(
-      180deg,
-      transparent 0.5rem,
-      var(--rs-toast-accent) 0.5rem calc(100% - 0.5rem),
-      transparent calc(100% - 0.5rem)
-    )
-    0.5rem 0 / 2px 100% no-repeat,
-    linear-gradient(180deg, var(--rs-toast-highlight), transparent 38%),
+    linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent 38%),
     linear-gradient(135deg, var(--rs-toast-tint), transparent 34%),
     var(--rs-toast-bg);
   color: var(--rs-text);
-  box-shadow:
-    var(--rs-toast-shadow),
-    inset 0 1px 0 rgb(255 255 255 / 0.08);
+  box-shadow: var(--rs-toast-shadow);
   backdrop-filter: blur(20px) saturate(150%);
   -webkit-backdrop-filter: blur(20px) saturate(150%);
+  pointer-events: auto;
+  list-style: none;
   transition:
-    box-shadow var(--rs-transition-normal),
-    border-color var(--rs-transition-fast),
-    background var(--rs-transition-fast);
+    opacity var(--rs-transition-fast),
+    transform var(--rs-transition-fast),
+    box-shadow var(--rs-transition-normal);
+}
+.rs-toast::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: var(--rs-space-sm);
+  inset-block: var(--rs-space-sm);
+  width: 2px;
+  border-radius: var(--rs-radius-full);
+  background: var(--rs-toast-accent);
+  pointer-events: none;
 }
-
-/* 带描述时顶对齐，图标与标题第一行光学对齐 */
 .rs-toast:has([data-description]) {
   align-items: start;
-  padding-top: 0.875rem;
-  padding-bottom: 0.875rem;
-}
-.rs-toast:hover {
-  box-shadow:
-    0 18px 42px -20px rgb(0 0 0 / 0.34),
-    0 10px 24px -16px rgb(0 0 0 / 0.22),
-    0 0 0 0.5px rgb(255 255 255 / 0.1),
-    inset 0 1px 0 rgb(255 255 255 / 0.08);
 }
-.rs-toast[data-styled='true'] {
-  gap: 0;
+.rs-toast--leaving {
+  opacity: 0;
 }
-.rs-toast [data-icon] {
-  position: relative;
-  z-index: 1;
+.rs-toast__icon {
   grid-column: 1;
   grid-row: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  align-self: center;
   width: 1.25rem;
   height: 1.25rem;
-  margin: 0;
-  border-radius: 999px;
-  background: transparent;
   color: var(--rs-info);
-  box-shadow: none;
 }
-.rs-toast [data-icon] svg {
-  width: 1.25rem;
-  height: 1.25rem;
-  flex-shrink: 0;
-}
-
-/* 多行内容时，图标略下移以对齐标题字面中线 */
-.rs-toast:has([data-description]) [data-icon] {
+.rs-toast:has([data-description]) .rs-toast__icon {
   align-self: start;
   margin-top: 0.125rem;
 }
-.rs-toast [data-content] {
-  position: relative;
-  z-index: 1;
+.rs-toast__body {
   grid-column: 2;
   grid-row: 1;
   display: grid;
   gap: 0.1875rem;
   min-width: 0;
 }
-.rs-toast [data-button] {
-  position: relative;
-  z-index: 1;
+.rs-toast__actions {
   grid-column: 2;
-  margin-top: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rs-space-xs);
 }
 .rs-toast__title {
   margin: 0;
@@ -143,21 +152,17 @@
   font-size: var(--rs-font-size-sm);
   font-weight: var(--rs-font-weight-semibold);
   line-height: var(--rs-line-height-tight);
-  letter-spacing: -0.012em;
 }
 .rs-toast__description {
   margin: 0;
-  color: color-mix(in srgb, var(--rs-muted) 94%, var(--rs-text) 6%);
+  color: var(--rs-text-secondary, var(--rs-muted));
   font-size: var(--rs-font-size-xs);
   line-height: var(--rs-line-height-normal);
 }
-.rs-toast [data-close-button].rs-toast__close {
+.rs-toast__close {
   position: absolute;
   top: 50%;
-  inset-inline-end: 0.625rem;
-  inset-inline-start: auto;
-  bottom: auto;
-  z-index: 2;
+  inset-inline-end: var(--rs-space-sm);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -165,165 +170,113 @@
   height: 1.25rem;
   padding: 0;
   border: 1px solid transparent;
-  border-radius: 999px;
+  border-radius: var(--rs-radius-full);
   background: transparent;
   color: var(--rs-muted);
-  box-shadow: none;
   cursor: pointer;
   transform: translateY(-50%);
-  opacity: 0.72;
-  transition:
-    opacity var(--rs-transition-fast),
-    color var(--rs-transition-fast),
-    border-color var(--rs-transition-fast),
-    background var(--rs-transition-fast),
-    box-shadow var(--rs-transition-fast);
 }
-.rs-toast:has([data-description]) [data-close-button].rs-toast__close {
-  top: 0.75rem;
+.rs-toast:has([data-description]) .rs-toast__close {
+  top: var(--rs-space-sm);
   transform: none;
 }
-.rs-toast [data-close-button].rs-toast__close svg {
-  width: 0.75rem;
-  height: 0.75rem;
-  flex-shrink: 0;
-}
-.rs-toast [data-close-button].rs-toast__close:hover {
-  opacity: 0.96;
+.rs-toast__close:hover {
   color: var(--rs-text);
   border-color: color-mix(in srgb, var(--rs-border) 68%, transparent);
-  background: color-mix(in srgb, var(--rs-surface-hover) 70%, transparent);
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.08),
-    0 1px 4px rgb(0 0 0 / 0.08);
+  background: color-mix(in srgb, var(--rs-surface-hover, var(--rs-item-hover)) 70%, transparent);
 }
-.rs-toast [data-close-button].rs-toast__close:focus-visible {
+.rs-toast__close:focus-visible,
+.rs-toast__action:focus-visible,
+.rs-toaster:focus-visible {
   outline: none;
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.08),
-    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
 .rs-toast__action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 4.5rem;
-  min-height: 2rem;
-  padding: 0 0.75rem;
+  min-height: var(--rs-control-height-sm);
+  padding-inline: var(--rs-space-sm);
   border: 1px solid transparent;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--rs-primary) 92%, white 8%);
+  border-radius: var(--rs-radius-full);
+  background: var(--rs-primary);
   color: var(--rs-primary-foreground);
   font-size: var(--rs-font-size-xs);
   font-weight: var(--rs-font-weight-semibold);
   line-height: 1;
-  letter-spacing: 0.01em;
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.16),
-    0 1px 2px rgb(0 0 0 / 0.08);
   cursor: pointer;
-  transition:
-    transform var(--rs-transition-fast),
-    background var(--rs-transition-fast),
-    border-color var(--rs-transition-fast),
-    box-shadow var(--rs-transition-fast),
-    color var(--rs-transition-fast);
-}
-.rs-toast__action:hover {
-  transform: translateY(-0.5px);
-  background: color-mix(in srgb, var(--rs-primary-hover) 94%, white 6%);
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.18),
-    0 4px 10px rgb(0 0 0 / 0.12);
-}
-.rs-toast__action:active {
-  transform: translateY(0);
-  box-shadow:
-    inset 0 1px 1px rgb(0 0 0 / 0.08),
-    0 1px 3px rgb(0 0 0 / 0.08);
-}
-.rs-toast__action:focus-visible {
-  outline: none;
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.18),
-    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
 .rs-toast__action--secondary {
   border-color: color-mix(in srgb, var(--rs-border) 72%, transparent);
   background: color-mix(in srgb, var(--rs-surface) 82%, transparent);
   color: var(--rs-text);
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.08),
-    0 1px 2px rgb(0 0 0 / 0.04);
-}
-.rs-toast__action--secondary:hover {
-  background: color-mix(in srgb, var(--rs-surface-hover) 82%, transparent);
-  border-color: color-mix(in srgb, var(--rs-border) 88%, transparent);
-  box-shadow:
-    inset 0 1px 0 rgb(255 255 255 / 0.1),
-    0 3px 8px rgb(0 0 0 / 0.08);
-}
-.rs-toast[data-type='success'] {
+}
+.rs-toast--success {
   --rs-toast-accent: color-mix(in srgb, var(--rs-success) 68%, transparent);
-  --rs-toast-tint: color-mix(in srgb, var(--rs-success) 7%, transparent);
+  --rs-toast-tint: color-mix(in srgb, var(--rs-success) 8%, transparent);
 }
-.rs-toast[data-type='success'] [data-icon] {
+.rs-toast--success .rs-toast__icon {
   color: var(--rs-success);
 }
-.rs-toast[data-type='error'] {
+.rs-toast--error {
   --rs-toast-accent: color-mix(in srgb, var(--rs-danger) 68%, transparent);
-  --rs-toast-tint: color-mix(in srgb, var(--rs-danger) 7%, transparent);
+  --rs-toast-tint: color-mix(in srgb, var(--rs-danger) 8%, transparent);
 }
-.rs-toast[data-type='error'] [data-icon] {
+.rs-toast--error .rs-toast__icon {
   color: var(--rs-danger);
 }
-.rs-toast[data-type='warning'] {
+.rs-toast--warning {
   --rs-toast-accent: color-mix(in srgb, var(--rs-warning) 72%, transparent);
   --rs-toast-tint: color-mix(in srgb, var(--rs-warning) 8%, transparent);
 }
-.rs-toast[data-type='warning'] [data-icon] {
+.rs-toast--warning .rs-toast__icon {
   color: var(--rs-warning);
 }
-.rs-toast[data-type='info'],
-.rs-toast[data-type='default'] {
-  --rs-toast-accent: color-mix(in srgb, var(--rs-info) 68%, transparent);
-  --rs-toast-tint: color-mix(in srgb, var(--rs-info) 7%, transparent);
-}
-.rs-toast[data-type='loading'] {
+.rs-toast--loading {
   --rs-toast-accent: color-mix(in srgb, var(--rs-primary) 68%, transparent);
-  --rs-toast-tint: color-mix(in srgb, var(--rs-primary) 7%, transparent);
+  --rs-toast-tint: color-mix(in srgb, var(--rs-primary) 8%, transparent);
 }
-.rs-toast[data-type='loading'] [data-icon] {
+.rs-toast--loading .rs-toast__icon {
   color: var(--rs-primary);
 }
-@media (max-width: 640px) {
-.rs-toast {
-    min-width: min(100%, 18.5rem);
-    max-width: calc(100vw - 1rem);
-    padding-block: 0.75rem;
-    padding-inline: 0.8125rem 2.125rem;
-    border-radius: 0.9375rem;
+.rs-toast--rich.rs-toast--success {
+  background: color-mix(in srgb, var(--rs-success) 16%, var(--rs-surface-elevated));
+  border-color: color-mix(in srgb, var(--rs-success) 42%, var(--rs-border));
 }
-.rs-toast:has([data-description]) {
-    padding-top: 0.8125rem;
-    padding-bottom: 0.8125rem;
+.rs-toast--rich.rs-toast--error {
+  background: color-mix(in srgb, var(--rs-danger) 16%, var(--rs-surface-elevated));
+  border-color: color-mix(in srgb, var(--rs-danger) 42%, var(--rs-border));
 }
-.rs-toast [data-close-button].rs-toast__close {
-    inset-inline-end: 0.5rem;
-    width: 1.25rem;
-    height: 1.25rem;
+.rs-toast--rich.rs-toast--warning {
+  background: color-mix(in srgb, var(--rs-warning) 18%, var(--rs-surface-elevated));
+  border-color: color-mix(in srgb, var(--rs-warning) 46%, var(--rs-border));
 }
-.rs-toast:has([data-description]) [data-close-button].rs-toast__close {
-    top: 0.625rem;
+.rs-toast--rich.rs-toast--info,
+.rs-toast--rich.rs-toast--default {
+  background: color-mix(in srgb, var(--rs-info) 14%, var(--rs-surface-elevated));
+  border-color: color-mix(in srgb, var(--rs-info) 40%, var(--rs-border));
 }
-.rs-toast__action {
-    min-height: 1.875rem;
-    padding: 0 0.6875rem;
+@media (max-width: 640px) {
+.rs-toast {
+    min-width: min(100%, 18.5rem);
+    max-width: calc(100vw - 1rem);
 }
 }
 @media (prefers-reduced-motion: reduce) {
 .rs-toast,
-  .rs-toast__action {
+  .rs-toast__action,
+  .rs-toast__close {
     transition: none;
 }
+.rs-toast {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+}
+@media (prefers-reduced-transparency: reduce) {
+.rs-toast {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    background: var(--rs-surface-elevated);
+}
 }

package/dist/components/toaster/src/RsToaster.d.ts

@@ -1,17 +1,47 @@
-import type { RsToastPosition } from '../../_shared/src/overlay-utils';
+import { type RsToastPosition } from '../../_shared/src/overlay-utils';
 type __VLS_Props = {
+    /** 渠道。同一页面只挂一个同 id 的宿主。 */
+    toasterId?: string;
     position?: RsToastPosition;
     closeButton?: boolean;
     richColors?: boolean;
+    /** 为 false 时叠成一摞，悬停、焦点或快捷键展开。 */
     expand?: boolean;
+    /** 条间距（px）。 */
     gap?: number;
+    /** 未在单条上指定时的自动关闭毫秒。0 表示不自动关闭。 */
+    duration?: number;
+    /** 同一方位最多同时显示几条。 */
+    visibleToasts?: number;
+    /** 离视口边缘的距离（px）。未传走 --rs-space-lg，并让出安全区。 */
+    offset?: number;
+    /** 滑动关闭。 */
+    swipe?: boolean;
+    /** 悬停或焦点暂停倒计时。 */
+    pauseOnHover?: boolean;
+    /** 例如 alt+t。空字符串关闭。按下后展开并聚焦通知区。 */
+    hotkey?: string;
+    /** 覆盖 toaster.region。 */
+    ariaLabel?: string;
+    teleportTo?: string | HTMLElement;
+    id?: string;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    /** 供模板 ref 关闭。业务侧通常用 useRsToast().dismiss。 */
+    dismiss: (id?: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    teleportTo: string | HTMLElement;
     gap: number;
-    position: RsToastPosition;
     expand: boolean;
+    position: RsToastPosition;
+    toasterId: string;
+    duration: number;
     closeButton: boolean;
     richColors: boolean;
+    visibleToasts: number;
+    swipe: boolean;
+    pauseOnHover: boolean;
+    hotkey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;