@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/image/Image.svelte.d.ts

@@ -1,31 +1,30 @@
 import type { Snippet } from 'svelte';
-type ImageFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
-type LazyMode = 'native' | 'observer';
+import type { PreviewProps } from './types.js';
 interface Props {
-    src: string;
-    alt?: string;
+    src?: string;
     width?: number | string;
     height?: number | string;
-    fit?: ImageFit;
-    position?: string;
+    alt?: string;
+    /** 加载中占位内容（对齐 Semi placeholder: ReactNode）。 */
+    placeholder?: Snippet;
+    /** 加载失败：string=降级图 src；Snippet=自定义内容；不传=默认破图。 */
+    fallback?: string | Snippet;
+    /** 预览：false 禁用；true 默认开启；对象=预览参数（含 src 覆盖预览图）。 */
+    preview?: boolean | PreviewProps;
     crossorigin?: 'anonymous' | 'use-credentials';
-    srcset?: string;
-    sizes?: string;
-    lazy?: boolean;
-    lazyMode?: LazyMode;
-    rootMargin?: string;
-    placeholder?: string | boolean;
-    fallback?: string | boolean;
-    preview?: boolean;
-    /** 自定义预览图 URL，不传时用 src。 */
-    previewSrc?: string;
-    /** img 加载失败回调。 */
+    /** 透传到 img 的自定义类名（对齐 Semi imgCls）。 */
+    imgCls?: string;
+    /** 透传到 img 的自定义内联样式（对齐 Semi imgStyle）。 */
+    imgStyle?: string;
+    /** 预览下载自定义文件名（对齐 Semi setDownloadName）。 */
+    setDownloadName?: (src: string) => string;
+    class?: string;
+    style?: string;
+    /** 组内稳定索引，由 ImagePreview 组注入（对齐 Semi imageID）。 */
+    imageID?: number;
     onError?: (e: Event) => void;
-    /** img 加载成功回调。 */
     onLoad?: (e: Event) => void;
-    class?: string;
-    errorSlot?: Snippet;
-    placeholderSlot?: Snippet;
+    onClick?: (e: MouseEvent) => void;
 }
 declare const Image: import("svelte").Component<Props, {}, "">;
 type Image = ReturnType<typeof Image>;

package/dist/image/Image.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.svelte.d.ts","sourceRoot":"","sources":["../../src/image/Image.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOpC,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAAC;AAErE,KAAK,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEtC,UAAU,KAAK;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,kBAAkB;IAClB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAgOH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Image.svelte.d.ts","sourceRoot":"","sources":["../../src/image/Image.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAK7C,UAAU,KAAK;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IACjC,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,CAAC;IAC9C,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACnC;AAgNH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/image/ImagePreview.svelte

@@ -1,309 +1,213 @@
 <!--
-  ImagePreview — 预览浮层（portal 到 body）。
-  被 Image（单图）与 ImagePreviewGroup（多图）共享，统一缩放/旋转/键盘/导航逻辑。
-  红线 #3：portal、keydown 监听、focus 命令式 + cleanup；当前索引由父级以 $state 传入。
-  红线 #2：变换/导航可用性派生纯函数。
+  ImagePreview — 图片预览组 / 独立可编程预览（对齐 Semi image/preview.tsx）。
+  两种用法：
+    1) 包裹多个 <Image>：子图注册进组，点任一图进组预览可左右切换（PreviewContext）。
+    2) 独立：直接传 src=string|string[] + visible/onVisibleChange 编程式控制，无需 children。
+  受控 currentIndex/visible 不回写，仅经 onChange/onVisibleChange（红线 #1）。
+  lazyLoad 时对组内子 .cd-image-img 做 IntersectionObserver 懒设真实 src（命令式 + cleanup，红线 #3）。
 -->
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import { untrack } from 'svelte';
-  import { useFocusTrap, useLiveAnnouncer } from '@chenzy-design/core';
-  import { useLocale } from '../locale-provider/index.js';
-
-  interface PreviewImage {
-    src: string;
-    alt: string;
-  }
-
-  interface Props {
-    images: PreviewImage[];
-    /** 当前展示的图片索引（受控，由父级 $state 维护）。 */
-    current: number;
-    onClose: () => void;
-    onChange: (index: number) => void;
-  }
-
-  let { images, current, onClose, onChange }: Props = $props();
-
-  const loc = useLocale();
-  // 单例 live region（polite）：灯箱翻页时播报「第 m 张，共 n 张」（红线 #3：命令式，在切换 effect 内）。
-  const announcer = useLiveAnnouncer();
-
-  const count = $derived(images.length);
-  const safeIndex = $derived(Math.min(Math.max(current, 0), Math.max(count - 1, 0)));
-  const active = $derived(images[safeIndex]);
-  const showNav = $derived(count > 1);
-  const canPrev = $derived(safeIndex > 0);
-  const canNext = $derived(safeIndex < count - 1);
-
-  // 预览变换状态：缩放倍数 + 旋转角度。切换图片时重置（见下方 $effect）。
-  let scale = $state(1);
-  let rotate = $state(0);
-  const SCALE_STEP = 0.25;
-  const SCALE_MIN = 0.25;
-  const SCALE_MAX = 4;
-  const transform = $derived(`scale(${scale}) rotate(${rotate}deg)`);
-
-  function resetTransform() {
-    scale = 1;
-    rotate = 0;
-  }
-  function zoomIn() {
-    scale = Math.min(SCALE_MAX, scale + SCALE_STEP);
-  }
-  function zoomOut() {
-    scale = Math.max(SCALE_MIN, scale - SCALE_STEP);
-  }
-  function rotateLeft() {
-    rotate -= 90;
-  }
-  function rotateRight() {
-    rotate += 90;
-  }
-
-  function goPrev() {
-    if (canPrev) onChange(safeIndex - 1);
-  }
-  function goNext() {
-    if (canNext) onChange(safeIndex + 1);
-  }
-
-  // 切换到不同图片时把变换复位（每张图从 1x/0° 开始）。
-  let lastIndex = $state(untrack(() => safeIndex));
-  $effect(() => {
-    if (safeIndex !== lastIndex) {
-      lastIndex = safeIndex;
-      resetTransform();
-      // 翻页（上一张/下一张）后 polite 播报当前序号；多图时才有意义。
-      if (count > 1) {
-        announcer.announce(
-          loc().t('Image.previewCount', { index: safeIndex + 1, total: count }),
-        );
-      }
-    }
-  });
-
-  // 浮层根节点：portal 到 body + focus trap（焦点锁定灯箱内 + 关闭归还触发元素），
-  // 命令式 + cleanup。复用 core useFocusTrap（与 Modal/Drawer 同一原语，不重造）。
-  // activate() 会记下打开前的触发元素并聚焦灯箱内首个可聚焦项（关闭按钮）；
-  // deactivate() 拦截 Tab 循环、归还焦点给触发元素。
-  let overlay = $state<HTMLDivElement | null>(null);
-  $effect(() => {
-    const node = overlay;
-    if (!node) return;
-    const body = document.body;
-    body.appendChild(node);
-    const trap = useFocusTrap(node);
-    trap.activate();
-    return () => {
-      trap.deactivate();
-      if (node.parentNode === body) body.removeChild(node);
-    };
-  });
-
-  // 全局键盘：Esc 关闭、左右切换。命令式绑定 + cleanup 解绑。
-  $effect(() => {
-    function onKeydown(e: KeyboardEvent) {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        onClose();
-      } else if (e.key === 'ArrowLeft') {
-        e.preventDefault();
-        goPrev();
-      } else if (e.key === 'ArrowRight') {
-        e.preventDefault();
-        goNext();
+  import PreviewInner from './PreviewInner.svelte';
+  import { setImagePreviewGroupContext } from './previewContext.js';
+  import type { PreviewProps, MenuProps } from './types.js';
+
+  type RatioType = 'adaptation' | 'realSize';
+
+  interface Props extends Omit<PreviewProps, 'src' | 'previewTitle'> {
+    src?: string | string[];
+    class?: string;
+    style?: string;
+    children?: Snippet;
+  }
+
+  let {
+    src,
+    visible,
+    defaultVisible,
+    currentIndex,
+    defaultCurrentIndex,
+    maskClosable,
+    closable,
+    closeOnEsc,
+    zoomStep,
+    infinite,
+    showTooltip,
+    prevTip,
+    nextTip,
+    zoomInTip,
+    zoomOutTip,
+    rotateTip,
+    downloadTip,
+    adaptiveTip,
+    originTip,
+    lazyLoad = true,
+    lazyLoadMargin = '0px 100px 100px 0px',
+    preLoad,
+    preLoadGap,
+    viewerVisibleDelay,
+    disableDownload,
+    zIndex,
+    crossOrigin,
+    maxZoom,
+    minZoom,
+    initialZoom,
+    previewCls,
+    previewStyle,
+    getPopupContainer,
+    setDownloadName,
+    renderHeader,
+    renderPreviewMenu,
+    renderCloseIcon,
+    renderLeftIcon,
+    renderRightIcon,
+    onVisibleChange,
+    onChange,
+    onClose,
+    onZoomIn,
+    onZoomOut,
+    onPrev,
+    onNext,
+    onRotateLeft,
+    onRatioChange,
+    onDownload,
+    onDownloadError,
+    class: className = '',
+    style = '',
+    children,
+  }: Props = $props();
+
+  // 已注册子图（注册顺序即索引）；卸载置 null 避免索引漂移。
+  let items = $state<
+    ({ getSrc: () => string; getTitle: () => string | Snippet | undefined } | null)[]
+  >([]);
+
+  // 非受控本地态（初始读一次 default*，untrack 避免 state_referenced_locally 警告）。
+  let innerCurrent = $state(untrack(() => defaultCurrentIndex) ?? 0);
+  let innerVisible = $state(untrack(() => defaultVisible) ?? false);
+
+  const isCurrentControlled = $derived(currentIndex !== undefined);
+  const isVisibleControlled = $derived(visible !== undefined);
+  const activeCurrent = $derived(isCurrentControlled ? (currentIndex as number) : innerCurrent);
+  const activeVisible = $derived(isVisibleControlled ? (visible as boolean) : innerVisible);
+
+  // props.src 展平为数组。
+  const propsSrcArr = $derived(
+    Array.isArray(src) ? src : typeof src === 'string' ? [src] : [],
+  );
+  // 组内子图紧凑列表（过滤已卸载槽位）。
+  const childList = $derived(
+    items.filter(
+      (it): it is { getSrc: () => string; getTitle: () => string | Snippet | undefined } =>
+        it !== null,
+    ),
+  );
+  const childSrc = $derived(childList.map((it) => it.getSrc()));
+  const childTitles = $derived(childList.map((it) => it.getTitle()));
+  const finalSrcList = $derived([...propsSrcArr, ...childSrc]);
+  const finalTitles = $derived<(string | Snippet | undefined)[]>([
+    ...propsSrcArr.map(() => undefined),
+    ...childTitles,
+  ]);
+
+  function setCurrent(index: number) {
+    if (!isCurrentControlled) innerCurrent = index;
+    onChange?.(index);
+  }
+  function setVisible(next: boolean) {
+    if (!isVisibleControlled) innerVisible = next;
+    onVisibleChange?.(next);
+  }
+
+  setImagePreviewGroupContext({
+    isGroup: true,
+    // context 仅 setup 时构建一次；lazyLoad/lazyLoadMargin/setDownloadName 取初始值（运行期不变），untrack 消警告。
+    lazyLoad: untrack(() => lazyLoad),
+    lazyLoadMargin: untrack(() => lazyLoadMargin),
+    register(item) {
+      const slot = items.length;
+      items = [...items, item];
+      return slot;
+    },
+    unregister(slot) {
+      if (slot < items.length) {
+        const next = items.slice();
+        next[slot] = null;
+        items = next;
       }
-    }
-    window.addEventListener('keydown', onKeydown);
-    return () => window.removeEventListener('keydown', onKeydown);
+    },
+    setCurrentIndex(index) {
+      // 子图 imageID 是「所有可预览子图」中的序号，需叠加 propsSrc 偏移。
+      setCurrent(propsSrcArr.length + index);
+    },
+    handleVisibleChange(v) {
+      setVisible(v);
+    },
+    setDownloadName: untrack(() => setDownloadName),
   });
 
-  // 仅点击遮罩自身（非内部图片/按钮）才关闭。
-  function onOverlayClick(e: MouseEvent) {
-    if (e.target === e.currentTarget) onClose();
-  }
+  // lazyLoad：每个子 Image 自管 IntersectionObserver（见 Image.svelte），进视口才设真实 src。
+  // 此处仅提供组根容器引用（布局/样式用）。lazyLoad 经 context 下发给子图。
+  let rootEl = $state<HTMLDivElement | null>(null);
 
-  // 遮罩获得焦点时的键盘兜底（a11y：与 click 配对）；全局键盘在上方 $effect 内统一处理。
-  function onOverlayKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      onClose();
-    }
-  }
+  const groupCls = $derived(
+    ['cd-image-preview-group', className].filter(Boolean).join(' '),
+  );
 </script>
 
-<div
-  bind:this={overlay}
-  class="cd-image__preview"
-  role="dialog"
-  aria-modal="true"
-  aria-label={active?.alt || loc().t('Image.previewAlt')}
-  tabindex="-1"
-  onclick={onOverlayClick}
-  onkeydown={onOverlayKeydown}
->
-  <button
-    type="button"
-    class="cd-image__preview-close"
-    aria-label={loc().t('Image.closePreview')}
-    onclick={onClose}
-  >
-    ×
-  </button>
-
-  {#if showNav}
-    <button
-      type="button"
-      class="cd-image__preview-nav cd-image__preview-nav--prev"
-      aria-label={loc().t('Image.prev')}
-      disabled={!canPrev}
-      onclick={goPrev}
-    >
-      ‹
-    </button>
-    <button
-      type="button"
-      class="cd-image__preview-nav cd-image__preview-nav--next"
-      aria-label={loc().t('Image.next')}
-      disabled={!canNext}
-      onclick={goNext}
-    >
-      ›
-    </button>
-  {/if}
-
-  <img
-    class="cd-image__preview-img"
-    src={active?.src}
-    alt={active?.alt}
-    style="transform:{transform}"
-  />
-
-  <div class="cd-image__preview-toolbar">
-    {#if showNav}
-      <span class="cd-image__preview-counter" aria-hidden="true">{safeIndex + 1} / {count}</span>
-    {/if}
-    <button type="button" class="cd-image__preview-tool" aria-label={loc().t('Image.zoomOut')} onclick={zoomOut}>−</button>
-    <button type="button" class="cd-image__preview-tool" aria-label={loc().t('Image.zoomIn')} onclick={zoomIn}>+</button>
-    <button type="button" class="cd-image__preview-tool" aria-label={loc().t('Image.rotateLeft')} onclick={rotateLeft}>⟲</button>
-    <button type="button" class="cd-image__preview-tool" aria-label={loc().t('Image.rotateRight')} onclick={rotateRight}>⟳</button>
-    <button type="button" class="cd-image__preview-tool" aria-label={loc().t('Image.reset')} onclick={resetTransform}>⤢</button>
-  </div>
+<div bind:this={rootEl} class={groupCls} {style}>
+  {@render children?.()}
 </div>
 
-<style>
-  .cd-image__preview {
-    position: fixed;
-    inset: 0;
-    z-index: var(--cd-image-preview-z);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--cd-image-preview-overlay);
-    line-height: normal;
-  }
-  .cd-image__preview-img {
-    max-inline-size: 90vw;
-    max-block-size: 90vh;
-    object-fit: contain;
-    transition: transform var(--cd-motion-duration-mid, 0.2s) var(--cd-motion-ease-standard);
-  }
-  .cd-image__preview-close {
-    position: absolute;
-    inset-block-start: 16px;
-    inset-inline-end: 16px;
-    inline-size: 36px;
-    block-size: 36px;
-    padding: 0;
-    border: 0;
-    border-radius: var(--cd-border-radius-full);
-    background: var(--cd-image-mask-bg);
-    color: var(--cd-image-mask-color);
-    font-size: 24px;
-    cursor: pointer;
-  }
-  .cd-image__preview-close:focus-visible {
-    outline: var(--cd-focus-ring);
-  }
-
-  .cd-image__preview-nav {
-    position: absolute;
-    inset-block-start: 50%;
-    transform: translateY(-50%);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: 44px;
-    block-size: 44px;
-    padding: 0;
-    border: 0;
-    border-radius: var(--cd-border-radius-full);
-    background: var(--cd-image-mask-bg);
-    color: var(--cd-image-mask-color);
-    font-size: 28px;
-    line-height: 1;
-    cursor: pointer;
-  }
-  .cd-image__preview-nav--prev {
-    inset-inline-start: 16px;
-  }
-  .cd-image__preview-nav--next {
-    inset-inline-end: 16px;
-  }
-  .cd-image__preview-nav:hover:not(:disabled) {
-    background: rgb(255 255 255 / 0.15);
-  }
-  .cd-image__preview-nav:disabled {
-    opacity: 0.35;
-    cursor: not-allowed;
-  }
-  .cd-image__preview-nav:focus-visible {
-    outline: var(--cd-focus-ring);
-  }
-
-  .cd-image__preview-toolbar {
-    position: absolute;
-    inset-block-end: 24px;
-    inset-inline-start: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    align-items: center;
-    gap: var(--cd-spacing-tight);
-    padding: var(--cd-spacing-tight);
-    border-radius: var(--cd-border-radius-full);
-    background: var(--cd-image-mask-bg);
-  }
-  .cd-image__preview-counter {
-    padding-inline: var(--cd-spacing-tight);
-    color: var(--cd-image-mask-color);
-    font-size: 13px;
-    line-height: 1;
-  }
-  .cd-image__preview-tool {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: 32px;
-    block-size: 32px;
-    padding: 0;
-    border: 0;
-    border-radius: var(--cd-border-radius-full);
-    background: transparent;
-    color: var(--cd-image-mask-color);
-    font-size: 18px;
-    line-height: 1;
-    cursor: pointer;
-  }
-  .cd-image__preview-tool:hover {
-    background: rgb(255 255 255 / 0.15);
-  }
-  .cd-image__preview-tool:focus-visible {
-    outline: var(--cd-focus-ring);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cd-image__preview-img {
-      transition: none;
-    }
-  }
-</style>
+{#if finalSrcList.length > 0}
+  <PreviewInner
+    src={finalSrcList}
+    titles={finalTitles}
+    visible={activeVisible}
+    currentIndex={activeCurrent}
+    onVisibleChange={setVisible}
+    onChange={setCurrent}
+    {maskClosable}
+    {closable}
+    {closeOnEsc}
+    {infinite}
+    {zoomStep}
+    {maxZoom}
+    {minZoom}
+    {initialZoom}
+    {preLoad}
+    {preLoadGap}
+    {disableDownload}
+    {showTooltip}
+    {viewerVisibleDelay}
+    {zIndex}
+    {crossOrigin}
+    {prevTip}
+    {nextTip}
+    {zoomInTip}
+    {zoomOutTip}
+    {rotateTip}
+    {downloadTip}
+    {adaptiveTip}
+    {originTip}
+    className={previewCls ?? ''}
+    style={previewStyle ?? ''}
+    {getPopupContainer}
+    {setDownloadName}
+    {renderHeader}
+    {renderPreviewMenu}
+    {renderCloseIcon}
+    {renderLeftIcon}
+    {renderRightIcon}
+    {onClose}
+    {onZoomIn}
+    {onZoomOut}
+    {onPrev}
+    {onNext}
+    {onRotateLeft}
+    {onRatioChange}
+    {onDownload}
+    {onDownloadError}
+  />
+{/if}

package/dist/image/ImagePreview.svelte.d.ts

@@ -1,13 +1,10 @@
-interface PreviewImage {
-    src: string;
-    alt: string;
-}
-interface Props {
-    images: PreviewImage[];
-    /** 当前展示的图片索引（受控，由父级 $state 维护）。 */
-    current: number;
-    onClose: () => void;
-    onChange: (index: number) => void;
+import type { Snippet } from 'svelte';
+import type { PreviewProps } from './types.js';
+interface Props extends Omit<PreviewProps, 'src' | 'previewTitle'> {
+    src?: string | string[];
+    class?: string;
+    style?: string;
+    children?: Snippet;
 }
 declare const ImagePreview: import("svelte").Component<Props, {}, "">;
 type ImagePreview = ReturnType<typeof ImagePreview>;

package/dist/image/ImagePreview.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePreview.svelte.d.ts","sourceRoot":"","sources":["../../src/image/ImagePreview.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,YAAY;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,UAAU,KAAK;IACb,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,mCAAmC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAuJH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ImagePreview.svelte.d.ts","sourceRoot":"","sources":["../../src/image/ImagePreview.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,OAAO,KAAK,EAAE,YAAY,EAAa,MAAM,YAAY,CAAC;AAKxD,UAAU,KAAM,SAAQ,IAAI,CAAC,YAAY,EAAE,KAAK,GAAG,cAAc,CAAC;IAChE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2JH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}