@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/notification/NotificationContainer.svelte

@@ -1,26 +1,27 @@
 <!--
-  NotificationContainer — 单例容器，订阅 store 渲染全部通知。
-  由 store.ts 惰性 mount 到 body（或 getPopupContainer）下的宿主节点；仅此一个实例。
-  按 6 placement（topLeft/top/topRight/bottomLeft/bottom/bottomRight）分组渲染独立堆叠列。
-  RTL：item.direction==='rtl' 时左右方位互换（topRight→topLeft 视觉镜像），堆叠列写 dir=rtl
-  令卡片整体镜像（关闭按钮、图标、文案方向、内边距均经逻辑属性自动翻转）；进出场水平偏移随之取反。
-  Esc 关闭（红线 #3）：$effect 命令式挂 window keydown，按 Esc 关闭最近一条通知；cleanup 移除监听。
-  进出场用 svelte/transition fly（运行时驱动，退场后 DOM 正常卸载，不卡 from 帧）；
-  重排用 animate:flip。reduced-motion 时 fly duration 降为 0。
+  NotificationContainer — 单例容器，订阅 store 渲染全部通知，严格对齐 Semi Design
+  （semi-ui/notification/index.tsx 的 NotificationList + notification.scss 的 list 定位/动画）。
+  DOM 结构镜像 Semi：
+    div.cd-notification-list[placement]        ← 每方位一个 list（fixed 定位，六方位）
+      NotificationItem × N
+  定位对齐 Semi scss：list margin/padding=0，卡片自带 margin(base-loose=20px) 形成边缘间距；
+  六方位 fixed：topRight(top/right:0)、top(top:0 居中)、topLeft(top/left:0)、
+  bottom(bottom:0 居中)、bottomRight(bottom/right:0)、bottomLeft(bottom/left:0)。
+  进/退场动画对齐 Semi animation.scss：opacity 0↔1 + translateX/Y(±100%)↔0，
+  300ms cubic-bezier(0.62,0.63,0,1.13)（Semi 组件级动画常量，非全局 token，故字面直连）。
+  堆叠顺序对齐 Semi：store 新通知置于队首（[opts,...notices]），list 为普通 flex column，新的在上。
+  位置偏移：notification.config({ top/bottom/left/right/zIndex }) 经 getPositionOffsets 注入 list inline style。
   红线：render 不读 effect 写的状态——items 初始同步读一次（拿到惰性挂载前已入队的首条），
-  $effect 仅做订阅 + cleanup 退订 / keydown 监听 + cleanup。
+  $effect 仅做订阅 + cleanup 退订。
 -->
 <script lang="ts">
-  import { fly } from 'svelte/transition';
-  import { flip } from 'svelte/animate';
-  import { prefersReducedMotion } from 'svelte/motion';
   import type {
     NotificationStore,
     NotificationItem,
-    NotificationPlacement,
+    NotificationPosition,
   } from '@chenzy-design/core';
   import NotificationItemView from './NotificationItem.svelte';
-  import { onCloseClickMap } from './store.js';
+  import { getPositionOffsets } from './store.js';
 
   interface Props {
     store: NotificationStore;
@@ -29,7 +30,6 @@
   let { store }: Props = $props();
 
   // 初始同步读一次：捕获惰性挂载前已入队的首条通知。
-  // 用函数包裹读取，避免 state 初始化器直接引用 prop 触发 state_referenced_locally。
   // core 的 subscribe 不会立即回放当前值，因此必须在此先读一次。
   function readInitial(): NotificationItem[] {
     return store.getItems();
@@ -37,7 +37,6 @@
   let items = $state<NotificationItem[]>(readInitial());
 
   // 桥接外部（非 Svelte runes）store：订阅写入本地 state，cleanup 退订。
-  // 这是 store->state 的单向桥，无法用 $derived 表达（外部 store 非响应式源）。
   $effect(() => {
     const unsub = store.subscribe((v) => {
       items = v;
@@ -45,91 +44,117 @@
     return unsub;
   });
 
-  // Esc 关闭（红线 #3）：命令式挂 window keydown，关闭最近一条（最后入队）通知；cleanup 移除。
-  // 直接读 store.getItems()（快照），不读 effect 写的 items state，避免 effect 自依赖重订阅。
-  $effect(() => {
-    function onKeydown(e: KeyboardEvent): void {
-      if (e.key !== 'Escape') return;
-      const current = store.getItems();
-      const last = current[current.length - 1];
-      if (last) store.close(last.id, 'manual');
-    }
-    window.addEventListener('keydown', onKeydown);
-    return () => window.removeEventListener('keydown', onKeydown);
-  });
-
-  const placements: NotificationPlacement[] = [
-    'topLeft',
+  const positions: NotificationPosition[] = [
     'top',
+    'topLeft',
     'topRight',
-    'bottomLeft',
     'bottom',
+    'bottomLeft',
     'bottomRight',
   ];
 
-  // RTL 方位镜像：rtl 通知的左右方位视觉互换（topRight→topLeft 等），居中不变。
-  const RTL_SWAP: Record<NotificationPlacement, NotificationPlacement> = {
-    topLeft: 'topRight',
-    topRight: 'topLeft',
-    bottomLeft: 'bottomRight',
-    bottomRight: 'bottomLeft',
-    top: 'top',
-    bottom: 'bottom',
-  };
-  function effectivePlacement(item: NotificationItem): NotificationPlacement {
-    return item.direction === 'rtl' ? RTL_SWAP[item.placement] : item.placement;
-  }
-
-  const flyDuration = $derived(prefersReducedMotion.current ? 0 : 220);
-  const flipDuration = $derived(prefersReducedMotion.current ? 0 : 200);
-
   const grouped = $derived(
-    placements.map((p) => ({
-      placement: p,
-      items: items.filter((i) => effectivePlacement(i) === p),
+    positions.map((p) => ({
+      position: p,
+      items: items.filter((i) => i.position === p),
     })),
   );
 
-  // 每个方位的进出场水平/垂直偏移：左侧从左滑入、右侧从右滑入、居中走垂直。
-  function flyParams(placement: NotificationPlacement): { x: number; y: number } {
-    if (placement === 'topLeft' || placement === 'bottomLeft') return { x: -24, y: 0 };
-    if (placement === 'topRight' || placement === 'bottomRight') return { x: 24, y: 0 };
-    return { x: 0, y: placement === 'top' ? -16 : 16 };
-  }
-
-  function handleClose(id: string) {
-    store.close(id, 'manual');
-  }
-
-  function handleCloseClick(id: string) {
-    onCloseClickMap.get(id)?.(id);
-    store.close(id, 'manual');
-  }
-  function handlePause(id: string) {
-    store.pause(id);
-  }
-  function handleResume(id: string) {
-    store.resume(id);
+  // 位置偏移 + zIndex 注入 list inline style（对齐 Semi setPosInStyle + wrapper zIndex）。
+  const offsets = getPositionOffsets();
+  function listStyle(position: NotificationPosition): string {
+    const parts: string[] = [];
+    if (offsets.zIndex !== undefined) parts.push(`z-index:${offsets.zIndex}`);
+    const wants = (side: 'top' | 'bottom' | 'left' | 'right') => {
+      const v = offsets[side];
+      if (v === undefined) return;
+      parts.push(`${side}:${typeof v === 'number' ? `${v}px` : v}`);
+    };
+    if (position === 'top' || position === 'topLeft' || position === 'topRight') wants('top');
+    if (position === 'bottom' || position === 'bottomLeft' || position === 'bottomRight') wants('bottom');
+    if (position === 'topLeft' || position === 'bottomLeft') wants('left');
+    if (position === 'topRight' || position === 'bottomRight') wants('right');
+    return parts.join(';');
+  }
+
+  // Semi 动画：进场 slideShow_{pos} / 退场 slideHide_{pos}，300ms cubic-bezier(0.62,0.63,0,1.13)。
+  // 用自定义 css transition 表达：css() 内按进度线性给出 transform+opacity，缓动曲线经 easing 注入
+  // Semi 的 cubic-bezier（下方 bezier() 采样求值）。
+  const SEMI_DURATION = 300;
+  // Semi 缓动曲线 cubic-bezier(0.62, 0.63, 0, 1.13) 的求值函数（用于 transition easing）。
+  const semiEase = bezier(0.62, 0.63, 0, 1.13);
+
+  function slide(_node: Element, { position }: { position: NotificationPosition }) {
+    // 平移轴与起点方向（对齐 Semi keyframes）。
+    let axis: 'X' | 'Y' = 'X';
+    let sign = 1; // 正=从正方向(+100%)进入
+    if (position === 'top') {
+      axis = 'Y';
+      sign = -1;
+    } else if (position === 'bottom') {
+      axis = 'Y';
+      sign = 1;
+    } else if (position === 'topLeft' || position === 'bottomLeft') {
+      axis = 'X';
+      sign = -1;
+    } else {
+      axis = 'X';
+      sign = 1;
+    }
+    return {
+      duration: SEMI_DURATION,
+      easing: semiEase,
+      // t: 0→1（进场时正向，退场时反向），u = 1 - t。
+      css: (t: number, u: number) =>
+        `opacity:${t};transform:translate${axis}(${sign * 100 * u}%);`,
+    };
+  }
+
+  // 三次贝塞尔 (x1,y1,x2,y2) 求值：给定时间进度 x∈[0,1] 返回缓动后的 y。
+  // 牛顿迭代求参数 t 使 bezierX(t)=x，再算 bezierY(t)。用于对齐 Semi 的 cubic-bezier。
+  function bezier(x1: number, y1: number, x2: number, y2: number): (x: number) => number {
+    const cx = 3 * x1;
+    const bx = 3 * (x2 - x1) - cx;
+    const ax = 1 - cx - bx;
+    const cy = 3 * y1;
+    const by = 3 * (y2 - y1) - cy;
+    const ay = 1 - cy - by;
+    const sampleX = (t: number) => ((ax * t + bx) * t + cx) * t;
+    const sampleY = (t: number) => ((ay * t + by) * t + cy) * t;
+    const sampleDX = (t: number) => (3 * ax * t + 2 * bx) * t + cx;
+    return (x: number) => {
+      if (x <= 0) return 0;
+      if (x >= 1) return 1;
+      let t = x;
+      for (let i = 0; i < 8; i++) {
+        const dx = sampleX(t) - x;
+        if (Math.abs(dx) < 1e-5) break;
+        const d = sampleDX(t);
+        if (Math.abs(d) < 1e-6) break;
+        t -= dx / d;
+      }
+      return sampleY(t);
+    };
   }
 </script>
 
-{#each grouped as group (group.placement)}
+{#each grouped as group (group.position)}
   {#if group.items.length > 0}
-    <div class="cd-notification-stack cd-notification-stack--{group.placement}">
+    <div
+      class="cd-notification-list cd-notification-list-{group.position}"
+      style={listStyle(group.position)}
+    >
       {#each group.items as item (item.id)}
         <div
-          class="cd-notification-stack__item"
-          dir={item.direction}
-          in:fly={{ ...flyParams(group.placement), duration: flyDuration }}
-          out:fly={{ ...flyParams(group.placement), duration: flyDuration }}
-          animate:flip={{ duration: flipDuration }}
+          class="cd-notification-list__item"
+          in:slide={{ position: group.position }}
+          out:slide={{ position: group.position }}
         >
           <NotificationItemView
             {item}
-            onClose={handleClose}
-            onCloseClick={handleCloseClick}
-            onPause={handlePause}
-            onResume={handleResume}
+            onClose={(id) => store.close(id)}
+            onPause={(id) => store.pause(id)}
+            onResume={(id) => store.resume(id)}
           />
         </div>
       {/each}
@@ -138,55 +163,42 @@
 {/each}
 
 <style>
-  .cd-notification-stack {
+  /* —— 通知列表（对齐 Semi .semi-notification-list）——
+     margin/padding=0（Semi list-margin/list-padding token 值均为 0），
+     卡片自带 margin(base-loose) 形成与视口边缘的间距。 */
+  .cd-notification-list {
     position: fixed;
-    z-index: var(--cd-notification-z);
-    display: flex;
-    flex-direction: column;
-    gap: var(--cd-notification-gap);
-    inline-size: max-content;
-    max-inline-size: calc(100vw - 2 * var(--cd-notification-offset));
+    box-sizing: border-box;
+    margin: var(--cd-spacing-notification-list-margin);
+    padding: var(--cd-spacing-notification-list-padding);
+    z-index: var(--cd-z-notification);
     pointer-events: none;
   }
 
-  .cd-notification-stack--topLeft {
-    top: var(--cd-notification-offset);
-    left: var(--cd-notification-offset);
+  .cd-notification-list-topRight {
+    right: 0;
+    top: 0;
   }
-
-  .cd-notification-stack--top {
-    top: var(--cd-notification-offset);
+  .cd-notification-list-top {
+    top: 0;
     left: 50%;
     transform: translateX(-50%);
   }
-
-  .cd-notification-stack--topRight {
-    top: var(--cd-notification-offset);
-    right: var(--cd-notification-offset);
+  .cd-notification-list-topLeft {
+    left: 0;
+    top: 0;
   }
-
-  .cd-notification-stack--bottomLeft {
-    bottom: var(--cd-notification-offset);
-    left: var(--cd-notification-offset);
-    flex-direction: column-reverse;
-  }
-
-  .cd-notification-stack--bottom {
-    bottom: var(--cd-notification-offset);
+  .cd-notification-list-bottom {
+    bottom: 0;
     left: 50%;
     transform: translateX(-50%);
-    flex-direction: column-reverse;
   }
-
-  .cd-notification-stack--bottomRight {
-    bottom: var(--cd-notification-offset);
-    right: var(--cd-notification-offset);
-    flex-direction: column-reverse;
+  .cd-notification-list-bottomRight {
+    bottom: 0;
+    right: 0;
   }
-
-  .cd-notification-stack__item {
-    inline-size: auto;
-    max-inline-size: 100%;
-    pointer-events: none;
+  .cd-notification-list-bottomLeft {
+    bottom: 0;
+    left: 0;
   }
 </style>

package/dist/notification/NotificationContainer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationContainer.svelte.d.ts","sourceRoot":"","sources":["../../src/notification/NotificationContainer.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACR,iBAAiB,EAGlB,MAAM,qBAAqB,CAAC;AAK7B,UAAU,KAAK;IACb,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAkHH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"NotificationContainer.svelte.d.ts","sourceRoot":"","sources":["../../src/notification/NotificationContainer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACR,iBAAiB,EAGlB,MAAM,qBAAqB,CAAC;AAK7B,UAAU,KAAK;IACb,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAuIH,QAAA,MAAM,qBAAqB,2CAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/notification/NotificationHolder.svelte

@@ -0,0 +1,18 @@
+<!--
+  NotificationHolder — useNotification Hook 的 contextHolder（对齐 Semi useNotification 返回的
+  contextHolder 元素）。渲染在组件树内（<NotificationHolder store={holderStore} />），
+  内部复用 NotificationContainer 渲染局部 store 的通知，使这些通知继承 holder 所在位置的上下文
+  （如 LocaleProvider）。lists 仍为 position:fixed（对齐 Semi：Hook 通知照样定位到视口方位）。
+-->
+<script lang="ts">
+  import type { NotificationStore } from '@chenzy-design/core';
+  import NotificationContainer from './NotificationContainer.svelte';
+
+  interface Props {
+    store: NotificationStore;
+  }
+
+  let { store }: Props = $props();
+</script>
+
+<NotificationContainer {store} />

package/dist/notification/NotificationHolder.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { NotificationStore } from '@chenzy-design/core';
+interface Props {
+    store: NotificationStore;
+}
+declare const NotificationHolder: import("svelte").Component<Props, {}, "">;
+type NotificationHolder = ReturnType<typeof NotificationHolder>;
+export default NotificationHolder;
+//# sourceMappingURL=NotificationHolder.svelte.d.ts.map

package/dist/notification/NotificationHolder.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationHolder.svelte.d.ts","sourceRoot":"","sources":["../../src/notification/NotificationHolder.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAI3D,UAAU,KAAK;IACb,KAAK,EAAE,iBAAiB,CAAC;CAC1B;AAcH,QAAA,MAAM,kBAAkB,2CAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}