@will-ui/vue 1.0.0

package/dist/components/picture/Picture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Picture.js","names":["Teleport","computed","defineComponent","mergeProps","nextTick","onBeforeUnmount","ref","watch","Fragment","_Fragment","createVNode","_createVNode","propSizeToCssVars","toCssVarsStyle","useComponentConfig","useEscStack","useGlobalZIndex","useUII18n","createPictureViewport","Close","Icon","Image","Mask","Toggle","normalizePictureImages","PICTURE_FALLBACK","runPictureImgEnter","PictureToolbar","PictureViewport","INTERACT_SAFE","PictureImpl","name","inheritAttrs","components","props","images","type","String","Array","default","undefined","size","Number","round","Boolean","cssVars","Object","emits","_v","show","_index","hide","setup","attrs","emit","cfg","t","zIndex","add","curIndex","alwaysOneWay","fromRect","interact","viewportApi","viewportController","stopFlip","list","v","value","reset","prepareImageChange","enableInteract","fit","playEnterFlip","Promise","r","requestAnimationFrame","el","getFlipEl","from","onEnd","openAt","i","e","target","currentTarget","getBoundingClientRect","close","onViewerClick","closest","onThumbClick","goPrev","prev","goNext","next","bindViewport","length","rootProps","class","style","multi","map","src","stopPropagation","item","use","index","onClick"],"sources":["../../../components/picture/Picture.tsx"],"sourcesContent":["import {\r\n  Teleport,\r\n  computed,\r\n  defineComponent,\r\n  mergeProps,\r\n  nextTick,\r\n  onBeforeUnmount,\r\n  ref,\r\n  watch,\r\n  type PropType,\r\n} from 'vue'\r\nimport {\r\n  propSizeToCssVars,\r\n  toCssVarsStyle,\r\n  type CssVars,\r\n} from '../../util'\r\nimport useComponentConfig from '../../use/useComponentConfig'\r\nimport useEscStack from '../../use/useEscStack'\r\nimport useGlobalZIndex from '../../use/useGlobalZIndex'\r\nimport { useUII18n } from '../../use/useUII18n'\r\nimport { createPictureViewport } from '../../use/usePictureViewport'\r\nimport Close from '../close/index'\r\nimport Icon from '../icon/index'\r\nimport Image from '../image/index'\r\nimport Mask from '../mask/index'\r\nimport Toggle from '../toggle/index'\r\nimport {\r\n  normalizePictureImages,\r\n  PICTURE_FALLBACK,\r\n} from './config'\r\nimport { runPictureImgEnter } from './pictureFlip'\r\nimport PictureToolbar from './PictureToolbar'\r\nimport PictureViewport, {\r\n  type PictureViewportMethods,\r\n} from './PictureViewport'\r\n\r\nexport type { PictureGlobalConfig } from './config'\r\nexport { PICTURE_FALLBACK, normalizePictureImages } from './config'\r\n\r\nexport type PictureProps = {\r\n  /** 图片地址：逗号分隔字符串或数组 */\r\n  images?: string | string[]\r\n  size?: number\r\n  round?: boolean | string\r\n  cssVars?: CssVars\r\n}\r\n\r\nexport type PictureJSXProps = PictureProps &\r\n  Omit<JSX.IntrinsicElements['div'], keyof PictureProps | 'ref'>\r\n\r\nexport type PictureComponent = {\r\n  new (): {\r\n    $props: PictureJSXProps\r\n  }\r\n}\r\n\r\nconst INTERACT_SAFE =\r\n  '.w-picture-viewer__viewport, .w-picture-viewer__img-wrap, .w-picture-viewer__img, .w-picture-viewer__thumb, .w-picture-viewer__nav, .w-picture-viewer__close, .w-picture-viewer__thumbs, .w-picture-viewer__toolbar'\r\n\r\nconst PictureImpl = defineComponent({\r\n  name: 'Picture',\r\n  inheritAttrs: false,\r\n  components: {\r\n    Image,\r\n    Mask,\r\n    Toggle,\r\n    Close,\r\n    Icon,\r\n    PictureViewport,\r\n    PictureToolbar,\r\n  },\r\n  props: {\r\n    images: {\r\n      type: [String, Array] as PropType<string | string[]>,\r\n      default: undefined,\r\n    },\r\n    size: { type: Number, default: undefined },\r\n    round: {\r\n      type: [Boolean, String] as PropType<boolean | string>,\r\n      default: undefined,\r\n    },\r\n    cssVars: { type: Object as PropType<CssVars>, default: undefined },\r\n  },\r\n  emits: {\r\n    'update:show': (_v: boolean) => true,\r\n    show: (_index: number) => true,\r\n    hide: () => true,\r\n  },\r\n  setup(props, { attrs, emit }) {\r\n    const cfg = useComponentConfig('Picture', props, PICTURE_FALLBACK)\r\n    const { t } = useUII18n()\r\n    const { zIndex, add } = useGlobalZIndex()\r\n    const show = ref(false)\r\n    const curIndex = ref(0)\r\n    const alwaysOneWay = ref(false)\r\n    const fromRect = ref<DOMRect | null>(null)\r\n    const interact = ref(false)\r\n    const viewportApi = ref<PictureViewportMethods | null>(null)\r\n    const viewportController = createPictureViewport()\r\n    let stopFlip: (() => void) | undefined\r\n\r\n    const list = computed(() => normalizePictureImages(props.images))\r\n\r\n    watch(show, (v) => {\r\n      emit('update:show', v)\r\n      if (!v) {\r\n        emit('hide')\r\n        stopFlip?.()\r\n        stopFlip = undefined\r\n        fromRect.value = null\r\n        interact.value = false\r\n        viewportApi.value = null\r\n        viewportController.reset()\r\n      }\r\n    })\r\n\r\n    watch(curIndex, () => {\r\n      if (!show.value || !interact.value) return\r\n      // 切图：保留相对缩放，仅清平移（具体落点在新图 onLoad）\r\n      viewportController.prepareImageChange()\r\n    })\r\n\r\n    useEscStack(\r\n      show,\r\n      () => {\r\n        show.value = false\r\n      },\r\n      () => zIndex.value,\r\n    )\r\n\r\n    function enableInteract() {\r\n      // 仅打开进场结束后校准一次适应；切图不走这里\r\n      viewportApi.value?.fit(false)\r\n      interact.value = true\r\n    }\r\n\r\n    async function playEnterFlip() {\r\n      stopFlip?.()\r\n      stopFlip = undefined\r\n      interact.value = false\r\n      await nextTick()\r\n      await new Promise<void>((r) => requestAnimationFrame(() => r()))\r\n      const el = viewportApi.value?.getFlipEl()\r\n      const from = fromRect.value\r\n      if (!el || !from) {\r\n        fromRect.value = null\r\n        enableInteract()\r\n        return\r\n      }\r\n      fromRect.value = null\r\n      stopFlip = runPictureImgEnter(el, from, {\r\n        onEnd: () => {\r\n          enableInteract()\r\n        },\r\n      })\r\n    }\r\n\r\n    function openAt(i: number, e?: MouseEvent) {\r\n      const target = (e?.currentTarget as HTMLElement | null) ?? null\r\n      fromRect.value = target?.getBoundingClientRect() ?? null\r\n      viewportController.reset()\r\n      curIndex.value = i\r\n      alwaysOneWay.value = false\r\n      interact.value = false\r\n      add()\r\n      show.value = true\r\n      emit('show', i)\r\n      void playEnterFlip()\r\n    }\r\n\r\n    function close() {\r\n      show.value = false\r\n    }\r\n\r\n    function onViewerClick(e: MouseEvent) {\r\n      const el = e.target as HTMLElement | null\r\n      if (el?.closest(INTERACT_SAFE)) return\r\n      close()\r\n    }\r\n\r\n    function onThumbClick(i: number) {\r\n      curIndex.value = i\r\n      alwaysOneWay.value = false\r\n    }\r\n\r\n    function goPrev(prev: () => void) {\r\n      alwaysOneWay.value = true\r\n      prev()\r\n    }\r\n\r\n    function goNext(next: () => void) {\r\n      alwaysOneWay.value = true\r\n      next()\r\n    }\r\n\r\n    function bindViewport(el: unknown) {\r\n      // Toggle 切图时旧实例可能后触发 null，勿清掉新实例\r\n      if (el) viewportApi.value = el as PictureViewportMethods\r\n    }\r\n\r\n    onBeforeUnmount(() => {\r\n      stopFlip?.()\r\n    })\r\n\r\n    return () => {\r\n      const images = list.value\r\n      if (!images.length) return null\r\n\r\n      const rootProps = mergeProps(\r\n        {\r\n          class: 'w-picture',\r\n          style: toCssVarsStyle({\r\n            ...propSizeToCssVars('picture', cfg.value.size),\r\n            ...props.cssVars,\r\n          }),\r\n        },\r\n        attrs,\r\n      )\r\n\r\n      const multi = images.length > 1\r\n\r\n      return (\r\n        <>\r\n          <div {...rootProps}>\r\n            {images.map((src, i) => (\r\n              <Image\r\n                key={`${src}-${i}`}\r\n                class={[\r\n                  'w-picture__thumb',\r\n                  { 'is-previewing': show.value && curIndex.value === i },\r\n                ]}\r\n                src={src}\r\n                round={cfg.value.round}\r\n                onClick={(e: MouseEvent) => openAt(i, e)}\r\n              />\r\n            ))}\r\n          </div>\r\n\r\n          <Mask\r\n            show={show.value}\r\n            zIndex={zIndex.value}\r\n            class=\"w-picture-mask\"\r\n            canCloseByClickSelf\r\n            onUpdate:show={(v: boolean) => {\r\n              show.value = v\r\n            }}\r\n          />\r\n\r\n          <Teleport to=\"body\">\r\n            {show.value ? (\r\n              <div\r\n                class=\"w-picture-viewer\"\r\n                style={{\r\n                  /* 高于 Mask，避免同层 portal 重排后盖住操作控件 */\r\n                  ['--__w-picture-viewer-z-index' as string]: zIndex.value + 1,\r\n                }}\r\n                onClick={onViewerClick}>\r\n                <Close\r\n                  class=\"w-picture-viewer__close\"\r\n                  size={24}\r\n                  ariaLabel={t('picture.close')}\r\n                  title={t('picture.close')}\r\n                  onClick={(e: MouseEvent) => {\r\n                    e.stopPropagation()\r\n                    close()\r\n                  }}\r\n                />\r\n\r\n                <Toggle\r\n                  class=\"w-picture-viewer__stage\"\r\n                  wheel={false}\r\n                  index={curIndex.value}\r\n                  data={images}\r\n                  itemClass=\"w-picture-viewer__item\"\r\n                  transform=\"translate\"\r\n                  alwaysOneWay={alwaysOneWay.value}\r\n                  onUpdate:index={(i: number) => {\r\n                    curIndex.value = i\r\n                  }}\r\n                  v-slots={{\r\n                    default: ({ item }: { item: string }) => (\r\n                      <PictureViewport\r\n                        key={`${item}-${curIndex.value}`}\r\n                        ref={bindViewport}\r\n                        src={item}\r\n                        interact={interact.value}\r\n                        controller={viewportController}\r\n                      />\r\n                    ),\r\n                    use: ({\r\n                      index,\r\n                      prev,\r\n                      next,\r\n                    }: {\r\n                      index: number\r\n                      prev: () => void\r\n                      next: () => void\r\n                    }) => (\r\n                      <>\r\n                        <PictureToolbar\r\n                          viewport={viewportApi.value}\r\n                          disabled={!interact.value}\r\n                        />\r\n                        {multi ? (\r\n                          <div class=\"w-picture-viewer__thumbs\">\r\n                            {images.map((src, i) => (\r\n                              <img\r\n                                key={`${src}-t-${i}`}\r\n                                class={[\r\n                                  'w-picture-viewer__thumb',\r\n                                  { 'is-active': i === index },\r\n                                ]}\r\n                                src={src}\r\n                                alt=\"\"\r\n                                draggable={false}\r\n                                onClick={() => onThumbClick(i)}\r\n                              />\r\n                            ))}\r\n                          </div>\r\n                        ) : null}\r\n                        {multi ? (\r\n                          <>\r\n                            <Icon\r\n                              class=\"w-picture-viewer__nav w-picture-viewer__nav--prev\"\r\n                              name=\"w-icon-arrow-down\"\r\n                              rotate\r\n                              direction=\"z\"\r\n                              deg={90}\r\n                              size=\"var(--w-picture-viewer-nav-size)\"\r\n                              ariaLabel={t('picture.prev')}\r\n                              title={t('picture.prev')}\r\n                              onClick={(e: MouseEvent) => {\r\n                                e.stopPropagation()\r\n                                goPrev(prev)\r\n                              }}\r\n                            />\r\n                            <Icon\r\n                              class=\"w-picture-viewer__nav w-picture-viewer__nav--next\"\r\n                              name=\"w-icon-arrow-down\"\r\n                              rotate\r\n                              direction=\"z\"\r\n                              deg={-90}\r\n                              size=\"var(--w-picture-viewer-nav-size)\"\r\n                              ariaLabel={t('picture.next')}\r\n                              title={t('picture.next')}\r\n                              onClick={(e: MouseEvent) => {\r\n                                e.stopPropagation()\r\n                                goNext(next)\r\n                              }}\r\n                            />\r\n                          </>\r\n                        ) : null}\r\n                      </>\r\n                    ),\r\n                  }}\r\n                />\r\n              </div>\r\n            ) : null}\r\n          </Teleport>\r\n        </>\r\n      )\r\n    }\r\n  },\r\n})\r\n\r\nexport default PictureImpl as unknown as PictureComponent\r\n"],"mappings":"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"}

package/dist/components/picture/PictureToolbar.d.ts

@@ -0,0 +1,29 @@
+import { PropType } from 'vue';
+import { PictureViewportMethods } from './PictureViewport';
+export type PictureToolbarProps = {
+    viewport?: PictureViewportMethods | null;
+    disabled?: boolean;
+};
+declare const PictureToolbar: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    viewport: {
+        type: PropType<PictureViewportMethods | null | undefined>;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    viewport: {
+        type: PropType<PictureViewportMethods | null | undefined>;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    viewport: PictureViewportMethods;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default PictureToolbar;

package/dist/components/picture/PictureToolbar.js

@@ -0,0 +1,97 @@
+import { useUII18n } from "../../use/useUII18n.js";
+import { PICTURE_VIEWPORT_ZOOM_STEP } from "../../use/usePictureViewport.js";
+import SvgIcon from "../svgIcon/SvgIcon.js";
+import { createTextVNode, createVNode, defineComponent } from "vue";
+//#region components/picture/PictureToolbar.tsx
+var PictureToolbar = /* @__PURE__ */ defineComponent({
+	name: "PictureToolbar",
+	props: {
+		viewport: {
+			type: Object,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props) {
+		const { t } = useUII18n();
+		const iconSize = "var(--w-picture-toolbar-icon-size)";
+		function run(fn) {
+			if (props.disabled) return;
+			fn?.();
+		}
+		function btn(key, title, onClick, child) {
+			return createVNode("button", {
+				"key": key,
+				"type": "button",
+				"class": "w-picture-viewer__toolbar-btn",
+				"title": title,
+				"aria-label": title,
+				"disabled": props.disabled,
+				"onClick": (e) => {
+					e.stopPropagation();
+					run(onClick);
+				}
+			}, [child]);
+		}
+		return () => {
+			const vp = props.viewport;
+			return createVNode("div", {
+				"class": "w-picture-viewer__toolbar",
+				"onClick": (e) => e.stopPropagation()
+			}, [
+				btn("rl", t("picture.rotateLeft"), () => vp?.rotateBy(-90), createVNode(SvgIcon, {
+					"name": "rotate-left",
+					"size": iconSize
+				}, null)),
+				btn("rr", t("picture.rotateRight"), () => vp?.rotateBy(90), createVNode(SvgIcon, {
+					"name": "rotate-right",
+					"size": iconSize
+				}, null)),
+				createVNode("span", {
+					"class": "w-picture-viewer__toolbar-divider",
+					"aria-hidden": "true"
+				}, null),
+				btn("fx", t("picture.flipX"), () => vp?.flip("x"), createVNode(SvgIcon, {
+					"name": "flip-x",
+					"size": iconSize
+				}, null)),
+				btn("fy", t("picture.flipY"), () => vp?.flip("y"), createVNode(SvgIcon, {
+					"name": "flip-y",
+					"size": iconSize
+				}, null)),
+				createVNode("span", {
+					"class": "w-picture-viewer__toolbar-divider",
+					"aria-hidden": "true"
+				}, null),
+				btn("zo", t("picture.zoomOut"), () => vp?.zoomBy(1 / PICTURE_VIEWPORT_ZOOM_STEP), createVNode(SvgIcon, {
+					"name": "zoom-out",
+					"size": iconSize
+				}, null)),
+				btn("zi", t("picture.zoomIn"), () => vp?.zoomBy(PICTURE_VIEWPORT_ZOOM_STEP), createVNode(SvgIcon, {
+					"name": "zoom-in",
+					"size": iconSize
+				}, null)),
+				createVNode("span", {
+					"class": "w-picture-viewer__toolbar-divider",
+					"aria-hidden": "true"
+				}, null),
+				btn("one", t("picture.oneToOne"), () => vp?.oneToOne(), createVNode("span", { "class": "w-picture-viewer__toolbar-label" }, [createTextVNode("1:1")])),
+				btn("fit", t("picture.fit"), () => vp?.fit(true), createVNode(SvgIcon, {
+					"name": "fit",
+					"size": iconSize
+				}, null)),
+				btn("reset", t("picture.reset"), () => vp?.reset(), createVNode(SvgIcon, {
+					"name": "reset",
+					"size": iconSize
+				}, null))
+			]);
+		};
+	}
+});
+//#endregion
+export { PictureToolbar as default };
+
+//# sourceMappingURL=PictureToolbar.js.map

package/dist/components/picture/PictureToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictureToolbar.js","names":["defineComponent","createVNode","_createVNode","createTextVNode","_createTextVNode","useUII18n","SvgIcon","PICTURE_VIEWPORT_ZOOM_STEP","PictureToolbar","name","props","viewport","type","Object","default","undefined","disabled","Boolean","setup","t","iconSize","run","fn","btn","key","title","onClick","child","e","stopPropagation","vp","rotateBy","flip","zoomBy","oneToOne","fit","reset"],"sources":["../../../components/picture/PictureToolbar.tsx"],"sourcesContent":["import { defineComponent, type PropType } from 'vue'\r\nimport { useUII18n } from '../../use/useUII18n'\r\nimport SvgIcon from '../svgIcon/index'\r\nimport { PICTURE_VIEWPORT_ZOOM_STEP } from '../../use/usePictureViewport'\r\nimport type { PictureViewportMethods } from './PictureViewport'\r\n\r\nexport type PictureToolbarProps = {\r\n  viewport?: PictureViewportMethods | null\r\n  disabled?: boolean\r\n}\r\n\r\nconst PictureToolbar = defineComponent({\r\n  name: 'PictureToolbar',\r\n  props: {\r\n    viewport: {\r\n      type: Object as PropType<PictureViewportMethods | null | undefined>,\r\n      default: undefined,\r\n    },\r\n    disabled: { type: Boolean, default: false },\r\n  },\r\n  setup(props) {\r\n    const { t } = useUII18n()\r\n    const iconSize = 'var(--w-picture-toolbar-icon-size)'\r\n\r\n    function run(fn?: () => void) {\r\n      if (props.disabled) return\r\n      fn?.()\r\n    }\r\n\r\n    function btn(\r\n      key: string,\r\n      title: string,\r\n      onClick: () => void,\r\n      child: unknown,\r\n    ) {\r\n      return (\r\n        <button\r\n          key={key}\r\n          type=\"button\"\r\n          class=\"w-picture-viewer__toolbar-btn\"\r\n          title={title}\r\n          aria-label={title}\r\n          disabled={props.disabled}\r\n          onClick={(e: MouseEvent) => {\r\n            e.stopPropagation()\r\n            run(onClick)\r\n          }}>\r\n          {child}\r\n        </button>\r\n      )\r\n    }\r\n\r\n    return () => {\r\n      const vp = props.viewport\r\n      return (\r\n        <div\r\n          class=\"w-picture-viewer__toolbar\"\r\n          onClick={(e: MouseEvent) => e.stopPropagation()}>\r\n          {btn(\r\n            'rl',\r\n            t('picture.rotateLeft'),\r\n            () => vp?.rotateBy(-90),\r\n            <SvgIcon name=\"rotate-left\" size={iconSize} />,\r\n          )}\r\n          {btn(\r\n            'rr',\r\n            t('picture.rotateRight'),\r\n            () => vp?.rotateBy(90),\r\n            <SvgIcon name=\"rotate-right\" size={iconSize} />,\r\n          )}\r\n          <span class=\"w-picture-viewer__toolbar-divider\" aria-hidden=\"true\" />\r\n          {btn(\r\n            'fx',\r\n            t('picture.flipX'),\r\n            () => vp?.flip('x'),\r\n            <SvgIcon name=\"flip-x\" size={iconSize} />,\r\n          )}\r\n          {btn(\r\n            'fy',\r\n            t('picture.flipY'),\r\n            () => vp?.flip('y'),\r\n            <SvgIcon name=\"flip-y\" size={iconSize} />,\r\n          )}\r\n          <span class=\"w-picture-viewer__toolbar-divider\" aria-hidden=\"true\" />\r\n          {btn(\r\n            'zo',\r\n            t('picture.zoomOut'),\r\n            () => vp?.zoomBy(1 / PICTURE_VIEWPORT_ZOOM_STEP),\r\n            <SvgIcon name=\"zoom-out\" size={iconSize} />,\r\n          )}\r\n          {btn(\r\n            'zi',\r\n            t('picture.zoomIn'),\r\n            () => vp?.zoomBy(PICTURE_VIEWPORT_ZOOM_STEP),\r\n            <SvgIcon name=\"zoom-in\" size={iconSize} />,\r\n          )}\r\n          <span class=\"w-picture-viewer__toolbar-divider\" aria-hidden=\"true\" />\r\n          {btn(\r\n            'one',\r\n            t('picture.oneToOne'),\r\n            () => vp?.oneToOne(),\r\n            <span class=\"w-picture-viewer__toolbar-label\">1:1</span>,\r\n          )}\r\n          {btn(\r\n            'fit',\r\n            t('picture.fit'),\r\n            () => vp?.fit(true),\r\n            <SvgIcon name=\"fit\" size={iconSize} />,\r\n          )}\r\n          {btn(\r\n            'reset',\r\n            t('picture.reset'),\r\n            () => vp?.reset(),\r\n            <SvgIcon name=\"reset\" size={iconSize} />,\r\n          )}\r\n        </div>\r\n      )\r\n    }\r\n  },\r\n})\r\n\r\nexport default PictureToolbar\r\n"],"mappings":";;;;;AAWA,IAAMQ,iBAAiBR,gCAAgB;CACrCS,MAAM;CACNC,OAAO;EACLC,UAAU;GACRC,MAAMC;GACNC,SAASC,KAAAA;EACX;EACAC,UAAU;GAAEJ,MAAMK;GAASH,SAAS;EAAM;CAC5C;CACAI,MAAMR,OAAO;EACX,MAAM,EAAES,MAAMd,UAAU;EACxB,MAAMe,WAAW;EAEjB,SAASC,IAAIC,IAAiB;GAC5B,IAAIZ,MAAMM,UAAU;GACpBM,KAAK;EACP;EAEA,SAASC,IACPC,KACAC,OACAC,SACAC,OACA;GACA,OAAAzB,YAAA,UAAA;IAAA,OAESsB;IAAG,QAAA;IAAA,SAAA;IAAA,SAGDC;IAAK,cACAA;IAAK,YACPf,MAAMM;IAAQ,YACdY,MAAkB;KAC1BA,EAAEC,gBAAgB;KAClBR,IAAIK,OAAO;IACb;GAAC,GAAA,CACAC,KAAK,CAAA;EAGZ;EAEA,aAAa;GACX,MAAMG,KAAKpB,MAAMC;GACjB,OAAAT,YAAA,OAAA;IAAA,SAAA;IAAA,YAGc0B,MAAkBA,EAAEC,gBAAgB;GAAC,GAAA;IAC9CN,IACC,MACAJ,EAAE,oBAAoB,SAChBW,IAAIC,SAAS,GAAG,GAAC7B,YAAAI,SAAA;KAAA,QAAA;KAAA,QACWc;IAAQ,GAAA,IAAA,CAC5C;IACCG,IACC,MACAJ,EAAE,qBAAqB,SACjBW,IAAIC,SAAS,EAAE,GAAC7B,YAAAI,SAAA;KAAA,QAAA;KAAA,QACac;IAAQ,GAAA,IAAA,CAC7C;IAAClB,YAAA,QAAA;KAAA,SAAA;KAAA,eAAA;IAAA,GAAA,IAAA;IAEAqB,IACC,MACAJ,EAAE,eAAe,SACXW,IAAIE,KAAK,GAAG,GAAC9B,YAAAI,SAAA;KAAA,QAAA;KAAA,QACUc;IAAQ,GAAA,IAAA,CACvC;IACCG,IACC,MACAJ,EAAE,eAAe,SACXW,IAAIE,KAAK,GAAG,GAAC9B,YAAAI,SAAA;KAAA,QAAA;KAAA,QACUc;IAAQ,GAAA,IAAA,CACvC;IAAClB,YAAA,QAAA;KAAA,SAAA;KAAA,eAAA;IAAA,GAAA,IAAA;IAEAqB,IACC,MACAJ,EAAE,iBAAiB,SACbW,IAAIG,OAAO,IAAI1B,0BAA0B,GAACL,YAAAI,SAAA;KAAA,QAAA;KAAA,QACjBc;IAAQ,GAAA,IAAA,CACzC;IACCG,IACC,MACAJ,EAAE,gBAAgB,SACZW,IAAIG,OAAO1B,0BAA0B,GAACL,YAAAI,SAAA;KAAA,QAAA;KAAA,QACdc;IAAQ,GAAA,IAAA,CACxC;IAAClB,YAAA,QAAA;KAAA,SAAA;KAAA,eAAA;IAAA,GAAA,IAAA;IAEAqB,IACC,OACAJ,EAAE,kBAAkB,SACdW,IAAII,SAAS,GAAChC,YAAA,QAAA,EAAA,SAAA,kCAAA,GAAA,CAAAE,gBAAA,KAAA,CAAA,CAAA,CAEtB;IACCmB,IACC,OACAJ,EAAE,aAAa,SACTW,IAAIK,IAAI,IAAI,GAACjC,YAAAI,SAAA;KAAA,QAAA;KAAA,QACOc;IAAQ,GAAA,IAAA,CACpC;IACCG,IACC,SACAJ,EAAE,eAAe,SACXW,IAAIM,MAAM,GAAClC,YAAAI,SAAA;KAAA,QAAA;KAAA,QACWc;IAAQ,GAAA,IAAA,CACtC;GAAC,CAAA;EAGP;CACF;AACF,CAAC"}

package/dist/components/picture/PictureViewport.d.ts

@@ -0,0 +1,47 @@
+import { PropType } from 'vue';
+import { UsePictureViewport } from '../../use/usePictureViewport';
+export type PictureViewportMethods = {
+    reset: () => void;
+    fit: (withTransition?: boolean) => void;
+    oneToOne: () => void;
+    zoomBy: (factor: number) => void;
+    rotateBy: (delta: number) => void;
+    flip: (axis: 'x' | 'y') => void;
+    getFlipEl: () => HTMLElement | undefined;
+    getApi: () => UsePictureViewport;
+};
+declare const PictureViewport: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** FLIP 结束后才为 true */
+    interact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 与 Picture 共享，切图时保留缩放/旋转/翻转 */
+    controller: {
+        type: PropType<UsePictureViewport>;
+        default: any;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** FLIP 结束后才为 true */
+    interact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 与 Picture 共享，切图时保留缩放/旋转/翻转 */
+    controller: {
+        type: PropType<UsePictureViewport>;
+        default: any;
+    };
+}>> & Readonly<{}>, {
+    interact: boolean;
+    controller: UsePictureViewport;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default PictureViewport;

package/dist/components/picture/PictureViewport.js

@@ -0,0 +1,203 @@
+import useVisibleResize from "../../use/useVisibleResize.js";
+import { PICTURE_VIEWPORT_ZOOM_STEP, createPictureViewport } from "../../use/usePictureViewport.js";
+import { computed, createVNode, defineComponent, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue";
+//#region components/picture/PictureViewport.tsx
+var PictureViewport = /* @__PURE__ */ defineComponent({
+	name: "PictureViewport",
+	props: {
+		src: {
+			type: String,
+			required: true
+		},
+		/** FLIP 结束后才为 true */
+		interact: {
+			type: Boolean,
+			default: false
+		},
+		/** 与 Picture 共享，切图时保留缩放/旋转/翻转 */
+		controller: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(props, { expose }) {
+		const rootRef = ref();
+		const wrapRef = ref();
+		const imgRef = ref();
+		const transformCss = ref("translate(0px, 0px) rotate(0deg) scale(1, 1)");
+		const useTransition = ref(false);
+		const ready = ref(false);
+		const dragging = ref(false);
+		const canPan = ref(false);
+		const natural = shallowRef({
+			w: 0,
+			h: 0
+		});
+		const localApi = createPictureViewport();
+		const api = () => props.controller ?? localApi;
+		let dragLast = null;
+		let unsub;
+		const syncFromApi = () => {
+			const a = api();
+			useTransition.value = a.consumeTransition();
+			transformCss.value = a.getTransform();
+			canPan.value = a.canPan();
+		};
+		function bindSubscribe() {
+			unsub?.();
+			unsub = api().subscribe(syncFromApi);
+			syncFromApi();
+		}
+		bindSubscribe();
+		watch(() => props.controller, () => bindSubscribe());
+		function measureViewport() {
+			const el = rootRef.value;
+			if (!el) return;
+			const { width, height } = el.getBoundingClientRect();
+			if (width < 1 || height < 1) return;
+			api().setViewportSize(width, height);
+			syncFromApi();
+		}
+		useVisibleResize(rootRef, () => {
+			measureViewport();
+		});
+		function onImgLoad() {
+			const img = imgRef.value;
+			if (!img) return;
+			const w = img.naturalWidth;
+			const h = img.naturalHeight;
+			if (w < 1 || h < 1) return;
+			natural.value = {
+				w,
+				h
+			};
+			measureViewport();
+			api().setNaturalSize(w, h);
+			ready.value = true;
+			syncFromApi();
+		}
+		watch(() => props.src, (src, prev) => {
+			if (prev == null || prev === src) return;
+			ready.value = false;
+			api().prepareImageChange();
+			syncFromApi();
+		});
+		function pointerFromCenter(clientX, clientY) {
+			const el = rootRef.value;
+			if (!el) return {
+				x: 0,
+				y: 0
+			};
+			const r = el.getBoundingClientRect();
+			return {
+				x: clientX - (r.left + r.width / 2),
+				y: clientY - (r.top + r.height / 2)
+			};
+		}
+		function onWheel(e) {
+			if (!props.interact || !ready.value) return;
+			e.preventDefault();
+			e.stopPropagation();
+			const factor = e.deltaY < 0 ? PICTURE_VIEWPORT_ZOOM_STEP : 1 / PICTURE_VIEWPORT_ZOOM_STEP;
+			const p = pointerFromCenter(e.clientX, e.clientY);
+			api().zoomAt(p.x, p.y, factor);
+		}
+		function onPointerDown(e) {
+			if (!props.interact || !ready.value) return;
+			if (e.button !== 0) return;
+			if (!api().canPan()) return;
+			e.preventDefault();
+			dragging.value = true;
+			dragLast = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			e.currentTarget.setPointerCapture?.(e.pointerId);
+		}
+		function onPointerMove(e) {
+			if (!dragging.value || !dragLast) return;
+			const dx = e.clientX - dragLast.x;
+			const dy = e.clientY - dragLast.y;
+			dragLast = {
+				x: e.clientX,
+				y: e.clientY
+			};
+			api().panBy(dx, dy);
+		}
+		function onPointerUp(e) {
+			if (!dragging.value) return;
+			dragging.value = false;
+			dragLast = null;
+			try {
+				e.currentTarget.releasePointerCapture?.(e.pointerId);
+			} catch {}
+		}
+		onMounted(() => {
+			measureViewport();
+			if (imgRef.value?.complete) onImgLoad();
+		});
+		onBeforeUnmount(() => {
+			unsub?.();
+		});
+		expose({
+			reset: () => {
+				api().reset();
+				syncFromApi();
+			},
+			fit: (withTransition = true) => {
+				api().fit(withTransition);
+				syncFromApi();
+			},
+			oneToOne: () => {
+				api().oneToOne(true);
+				syncFromApi();
+			},
+			zoomBy: (factor) => {
+				api().zoomBy(factor);
+				syncFromApi();
+			},
+			rotateBy: (delta) => {
+				api().rotateBy(delta);
+				syncFromApi();
+			},
+			flip: (axis) => {
+				api().flip(axis);
+				syncFromApi();
+			},
+			getFlipEl: () => wrapRef.value,
+			getApi: () => api()
+		});
+		const rootClass = computed(() => ["w-picture-viewer__viewport", {
+			"is-panning": props.interact && canPan.value,
+			"is-dragging": dragging.value
+		}]);
+		return () => createVNode("div", {
+			"ref": rootRef,
+			"class": rootClass.value,
+			"onWheel": onWheel,
+			"onPointerdown": onPointerDown,
+			"onPointermove": onPointerMove,
+			"onPointerup": onPointerUp,
+			"onPointercancel": onPointerUp
+		}, [createVNode("div", {
+			"ref": wrapRef,
+			"class": "w-picture-viewer__img-wrap"
+		}, [createVNode("div", {
+			"class": ["w-picture-viewer__transform", { "is-transition": useTransition.value }],
+			"style": ready.value ? { transform: transformCss.value } : void 0
+		}, [createVNode("img", {
+			"ref": imgRef,
+			"class": ["w-picture-viewer__img", { "is-fit-css": !ready.value }],
+			"src": props.src,
+			"alt": "",
+			"draggable": false,
+			"width": ready.value && natural.value.w ? natural.value.w : void 0,
+			"height": ready.value && natural.value.h ? natural.value.h : void 0,
+			"onLoad": onImgLoad
+		}, null)])])]);
+	}
+});
+//#endregion
+export { PictureViewport as default };
+
+//# sourceMappingURL=PictureViewport.js.map

package/dist/components/picture/PictureViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictureViewport.js","names":["computed","defineComponent","onBeforeUnmount","onMounted","ref","shallowRef","watch","createVNode","_createVNode","createPictureViewport","PICTURE_VIEWPORT_ZOOM_STEP","useVisibleResize","PictureViewport","name","props","src","type","String","required","interact","Boolean","default","controller","Object","undefined","setup","expose","rootRef","wrapRef","imgRef","transformCss","useTransition","ready","dragging","canPan","natural","w","h","localApi","api","dragLast","unsub","syncFromApi","a","value","consumeTransition","getTransform","bindSubscribe","subscribe","measureViewport","el","width","height","getBoundingClientRect","setViewportSize","onImgLoad","img","naturalWidth","naturalHeight","setNaturalSize","prev","prepareImageChange","pointerFromCenter","clientX","clientY","x","y","r","left","top","onWheel","e","preventDefault","stopPropagation","factor","deltaY","p","zoomAt","onPointerDown","button","currentTarget","setPointerCapture","pointerId","onPointerMove","dx","dy","panBy","onPointerUp","releasePointerCapture","complete","methods","reset","fit","withTransition","oneToOne","zoomBy","rotateBy","delta","flip","axis","getFlipEl","getApi","rootClass","transform"],"sources":["../../../components/picture/PictureViewport.tsx"],"sourcesContent":["import {\r\n  computed,\r\n  defineComponent,\r\n  onBeforeUnmount,\r\n  onMounted,\r\n  ref,\r\n  shallowRef,\r\n  watch,\r\n  type PropType,\r\n} from 'vue'\r\nimport {\r\n  createPictureViewport,\r\n  PICTURE_VIEWPORT_ZOOM_STEP,\r\n  type UsePictureViewport,\r\n} from '../../use/usePictureViewport'\r\nimport useVisibleResize from '../../use/useVisibleResize'\r\n\r\nexport type PictureViewportMethods = {\r\n  reset: () => void\r\n  fit: (withTransition?: boolean) => void\r\n  oneToOne: () => void\r\n  zoomBy: (factor: number) => void\r\n  rotateBy: (delta: number) => void\r\n  flip: (axis: 'x' | 'y') => void\r\n  getFlipEl: () => HTMLElement | undefined\r\n  getApi: () => UsePictureViewport\r\n}\r\n\r\nconst PictureViewport = defineComponent({\r\n  name: 'PictureViewport',\r\n  props: {\r\n    src: { type: String, required: true },\r\n    /** FLIP 结束后才为 true */\r\n    interact: { type: Boolean, default: false },\r\n    /** 与 Picture 共享，切图时保留缩放/旋转/翻转 */\r\n    controller: {\r\n      type: Object as PropType<UsePictureViewport>,\r\n      default: undefined,\r\n    },\r\n  },\r\n  setup(props, { expose }) {\r\n    const rootRef = ref<HTMLElement>()\r\n    const wrapRef = ref<HTMLElement>()\r\n    const imgRef = ref<HTMLImageElement>()\r\n    const transformCss = ref('translate(0px, 0px) rotate(0deg) scale(1, 1)')\r\n    const useTransition = ref(false)\r\n    const ready = ref(false)\r\n    const dragging = ref(false)\r\n    const canPan = ref(false)\r\n    const natural = shallowRef({ w: 0, h: 0 })\r\n\r\n    const localApi = createPictureViewport()\r\n    const api = () => props.controller ?? localApi\r\n    let dragLast: { x: number; y: number } | null = null\r\n    let unsub: (() => void) | undefined\r\n\r\n    const syncFromApi = () => {\r\n      const a = api()\r\n      useTransition.value = a.consumeTransition()\r\n      transformCss.value = a.getTransform()\r\n      canPan.value = a.canPan()\r\n    }\r\n\r\n    function bindSubscribe() {\r\n      unsub?.()\r\n      unsub = api().subscribe(syncFromApi)\r\n      syncFromApi()\r\n    }\r\n\r\n    bindSubscribe()\r\n    watch(\r\n      () => props.controller,\r\n      () => bindSubscribe(),\r\n    )\r\n\r\n    function measureViewport() {\r\n      const el = rootRef.value\r\n      if (!el) return\r\n      const { width, height } = el.getBoundingClientRect()\r\n      if (width < 1 || height < 1) return\r\n      api().setViewportSize(width, height)\r\n      syncFromApi()\r\n    }\r\n\r\n    useVisibleResize(rootRef, () => {\r\n      measureViewport()\r\n    })\r\n\r\n    function onImgLoad() {\r\n      const img = imgRef.value\r\n      if (!img) return\r\n      const w = img.naturalWidth\r\n      const h = img.naturalHeight\r\n      if (w < 1 || h < 1) return\r\n      natural.value = { w, h }\r\n      measureViewport()\r\n      api().setNaturalSize(w, h)\r\n      ready.value = true\r\n      syncFromApi()\r\n    }\r\n\r\n    watch(\r\n      () => props.src,\r\n      (src, prev) => {\r\n        if (prev == null || prev === src) return\r\n        ready.value = false\r\n        api().prepareImageChange()\r\n        syncFromApi()\r\n      },\r\n    )\r\n\r\n    function pointerFromCenter(clientX: number, clientY: number) {\r\n      const el = rootRef.value\r\n      if (!el) return { x: 0, y: 0 }\r\n      const r = el.getBoundingClientRect()\r\n      return {\r\n        x: clientX - (r.left + r.width / 2),\r\n        y: clientY - (r.top + r.height / 2),\r\n      }\r\n    }\r\n\r\n    function onWheel(e: WheelEvent) {\r\n      if (!props.interact || !ready.value) return\r\n      e.preventDefault()\r\n      e.stopPropagation()\r\n      const factor =\r\n        e.deltaY < 0\r\n          ? PICTURE_VIEWPORT_ZOOM_STEP\r\n          : 1 / PICTURE_VIEWPORT_ZOOM_STEP\r\n      const p = pointerFromCenter(e.clientX, e.clientY)\r\n      api().zoomAt(p.x, p.y, factor)\r\n    }\r\n\r\n    function onPointerDown(e: PointerEvent) {\r\n      if (!props.interact || !ready.value) return\r\n      if (e.button !== 0) return\r\n      if (!api().canPan()) return\r\n      e.preventDefault()\r\n      dragging.value = true\r\n      dragLast = { x: e.clientX, y: e.clientY }\r\n      ;(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId)\r\n    }\r\n\r\n    function onPointerMove(e: PointerEvent) {\r\n      if (!dragging.value || !dragLast) return\r\n      const dx = e.clientX - dragLast.x\r\n      const dy = e.clientY - dragLast.y\r\n      dragLast = { x: e.clientX, y: e.clientY }\r\n      api().panBy(dx, dy)\r\n    }\r\n\r\n    function onPointerUp(e: PointerEvent) {\r\n      if (!dragging.value) return\r\n      dragging.value = false\r\n      dragLast = null\r\n      try {\r\n        ;(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId)\r\n      } catch {\r\n        /* ignore */\r\n      }\r\n    }\r\n\r\n    onMounted(() => {\r\n      measureViewport()\r\n      if (imgRef.value?.complete) onImgLoad()\r\n    })\r\n\r\n    onBeforeUnmount(() => {\r\n      unsub?.()\r\n    })\r\n\r\n    const methods: PictureViewportMethods = {\r\n      reset: () => {\r\n        api().reset()\r\n        syncFromApi()\r\n      },\r\n      fit: (withTransition = true) => {\r\n        api().fit(withTransition)\r\n        syncFromApi()\r\n      },\r\n      oneToOne: () => {\r\n        api().oneToOne(true)\r\n        syncFromApi()\r\n      },\r\n      zoomBy: (factor) => {\r\n        api().zoomBy(factor)\r\n        syncFromApi()\r\n      },\r\n      rotateBy: (delta) => {\r\n        api().rotateBy(delta)\r\n        syncFromApi()\r\n      },\r\n      flip: (axis) => {\r\n        api().flip(axis)\r\n        syncFromApi()\r\n      },\r\n      getFlipEl: () => wrapRef.value,\r\n      getApi: () => api(),\r\n    }\r\n\r\n    expose(methods)\r\n\r\n    const rootClass = computed(() => [\r\n      'w-picture-viewer__viewport',\r\n      {\r\n        'is-panning': props.interact && canPan.value,\r\n        'is-dragging': dragging.value,\r\n      },\r\n    ])\r\n\r\n    return () => (\r\n      <div\r\n        ref={rootRef}\r\n        class={rootClass.value}\r\n        onWheel={onWheel}\r\n        onPointerdown={onPointerDown}\r\n        onPointermove={onPointerMove}\r\n        onPointerup={onPointerUp}\r\n        onPointercancel={onPointerUp}>\r\n        <div ref={wrapRef} class=\"w-picture-viewer__img-wrap\">\r\n          <div\r\n            class={[\r\n              'w-picture-viewer__transform',\r\n              { 'is-transition': useTransition.value },\r\n            ]}\r\n            style={\r\n              ready.value ? { transform: transformCss.value } : undefined\r\n            }>\r\n            <img\r\n              ref={imgRef}\r\n              class={[\r\n                'w-picture-viewer__img',\r\n                { 'is-fit-css': !ready.value },\r\n              ]}\r\n              src={props.src}\r\n              alt=\"\"\r\n              draggable={false}\r\n              width={ready.value && natural.value.w ? natural.value.w : undefined}\r\n              height={\r\n                ready.value && natural.value.h ? natural.value.h : undefined\r\n              }\r\n              onLoad={onImgLoad}\r\n            />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    )\r\n  },\r\n})\r\n\r\nexport default PictureViewport\r\n"],"mappings":"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"}

package/dist/components/picture/config.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 可通过 `app.use(UI, { components: { Picture: {...} } })` 配置的项。
+ * 不宜全局配置：images（实例资源列表）。
+ */
+export type PictureGlobalConfig = Partial<{
+    /** 缩略图尺度核（px）→ `--w-prop-picture-size`，并桥接 Image */
+    size: number;
+    /** 透传 Image：true → 圆形；string → 自定义圆角 */
+    round: boolean | string;
+}>;
+export declare const PICTURE_FALLBACK: {
+    size: number | undefined;
+    round: boolean | string | undefined;
+};
+/** 规范化图片列表：支持逗号分隔字符串或数组 */
+export declare function normalizePictureImages(images?: string | string[] | null): string[];

package/dist/components/picture/config.js

@@ -0,0 +1,16 @@
+//#region components/picture/config.ts
+var PICTURE_FALLBACK = {
+	size: void 0,
+	round: false
+};
+/** 规范化图片列表：支持逗号分隔字符串或数组 */
+function normalizePictureImages(images) {
+	if (!images) return [];
+	if (typeof images === "string") return images.split(",").map((s) => s.trim()).filter(Boolean);
+	if (Array.isArray(images)) return images.filter((m) => typeof m === "string" && !!m);
+	return [];
+}
+//#endregion
+export { PICTURE_FALLBACK, normalizePictureImages };
+
+//# sourceMappingURL=config.js.map

package/dist/components/picture/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":[],"sources":["../../../components/picture/config.ts"],"sourcesContent":["/**\r\n * 可通过 `app.use(UI, { components: { Picture: {...} } })` 配置的项。\r\n * 不宜全局配置：images（实例资源列表）。\r\n */\r\nexport type PictureGlobalConfig = Partial<{\r\n  /** 缩略图尺度核（px）→ `--w-prop-picture-size`，并桥接 Image */\r\n  size: number\r\n  /** 透传 Image：true → 圆形；string → 自定义圆角 */\r\n  round: boolean | string\r\n}>\r\n\r\nexport const PICTURE_FALLBACK = {\r\n  size: undefined as number | undefined,\r\n  round: false as boolean | string | undefined,\r\n}\r\n\r\n/** 规范化图片列表：支持逗号分隔字符串或数组 */\r\nexport function normalizePictureImages(\r\n  images?: string | string[] | null,\r\n): string[] {\r\n  if (!images) return []\r\n  if (typeof images === 'string') {\r\n    return images\r\n      .split(',')\r\n      .map((s) => s.trim())\r\n      .filter(Boolean)\r\n  }\r\n  if (Array.isArray(images)) {\r\n    return images.filter((m): m is string => typeof m === 'string' && !!m)\r\n  }\r\n  return []\r\n}\r\n"],"mappings":";AAWA,IAAa,mBAAmB;CAC9B,MAAM,KAAA;CACN,OAAO;AACT;;AAGA,SAAgB,uBACd,QACU;CACV,IAAI,CAAC,QAAQ,OAAO,CAAC;CACrB,IAAI,OAAO,WAAW,UACpB,OAAO,OACJ,MAAM,GAAG,CAAC,CACV,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,CACpB,OAAO,OAAO;CAEnB,IAAI,MAAM,QAAQ,MAAM,GACtB,OAAO,OAAO,QAAQ,MAAmB,OAAO,MAAM,YAAY,CAAC,CAAC,CAAC;CAEvE,OAAO,CAAC;AACV"}

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

@@ -0,0 +1,5 @@
+export { default } from './Picture';
+export type * from './Picture';
+export type * from './config';
+export { PICTURE_FALLBACK, normalizePictureImages } from './config';
+export { runPictureImgEnter, computePictureFlipTransform } from './pictureFlip';

package/dist/components/picture/pictureFlip.d.ts

@@ -0,0 +1,16 @@
+/** 缩略图矩形 → 大图矩形的 FLIP（分轴缩放，避免收尾宽高比突变） */
+export declare function computePictureFlipTransform(from: DOMRectReadOnly, to: DOMRectReadOnly): {
+    dx: number;
+    dy: number;
+    scaleX: number;
+    scaleY: number;
+} | null;
+export type PictureFlipEnterOptions = {
+    /** FLIP 结束（含取消/失败）后回调一次 */
+    onEnd?: () => void;
+};
+/**
+ * 将元素从 fromRect 视觉位置 FLIP 到当前布局（仅执行一次进场）。
+ * 优先 WAAPI，收尾更顺；返回清理函数。
+ */
+export declare function runPictureImgEnter(el: HTMLElement, from: DOMRectReadOnly, options?: PictureFlipEnterOptions): () => void;

package/dist/components/picture/pictureFlip.js

@@ -0,0 +1,103 @@
+//#region components/picture/pictureFlip.ts
+/** 缩略图矩形 → 大图矩形的 FLIP（分轴缩放，避免收尾宽高比突变） */
+function computePictureFlipTransform(from, to) {
+	if (from.width < 1 || from.height < 1 || to.width < 1 || to.height < 1) return null;
+	const scaleX = from.width / to.width;
+	const scaleY = from.height / to.height;
+	return {
+		dx: from.left + from.width / 2 - (to.left + to.width / 2),
+		dy: from.top + from.height / 2 - (to.top + to.height / 2),
+		scaleX,
+		scaleY
+	};
+}
+function readCssTimeMs(raw, fallbackMs) {
+	const v = raw.trim();
+	if (!v) return fallbackMs;
+	if (v.endsWith("ms")) {
+		const n = Number.parseFloat(v);
+		return Number.isFinite(n) ? n : fallbackMs;
+	}
+	if (v.endsWith("s")) {
+		const n = Number.parseFloat(v);
+		return Number.isFinite(n) ? n * 1e3 : fallbackMs;
+	}
+	const n = Number.parseFloat(v);
+	return Number.isFinite(n) ? n : fallbackMs;
+}
+/**
+* 将元素从 fromRect 视觉位置 FLIP 到当前布局（仅执行一次进场）。
+* 优先 WAAPI，收尾更顺；返回清理函数。
+*/
+function runPictureImgEnter(el, from, options) {
+	const flip = computePictureFlipTransform(from, el.getBoundingClientRect());
+	if (!flip) {
+		options?.onEnd?.();
+		return () => {};
+	}
+	const cs = getComputedStyle(el);
+	const durationMs = readCssTimeMs(cs.getPropertyValue("--w-picture-img-enter-duration"), 520);
+	const easing = cs.getPropertyValue("--w-picture-img-enter-ease").trim() || "cubic-bezier(0.33, 1, 0.68, 1)";
+	const fromTransform = `translate(${flip.dx}px, ${flip.dy}px) scale(${flip.scaleX}, ${flip.scaleY})`;
+	const toTransform = "translate(0px, 0px) scale(1, 1)";
+	let done = false;
+	let ended = false;
+	const emitEnd = () => {
+		if (ended) return;
+		ended = true;
+		options?.onEnd?.();
+	};
+	const finish = () => {
+		if (done) return;
+		done = true;
+		el.style.transition = "";
+		el.style.transform = "";
+		emitEnd();
+	};
+	if (typeof el.animate === "function") {
+		const anim = el.animate([{ transform: fromTransform }, { transform: toTransform }], {
+			duration: durationMs,
+			easing,
+			fill: "forwards"
+		});
+		anim.finished.then(() => {
+			try {
+				anim.commitStyles();
+			} catch {}
+			anim.cancel();
+			el.style.transform = "";
+			emitEnd();
+		}).catch(() => {
+			finish();
+		});
+		return () => {
+			anim.cancel();
+			finish();
+		};
+	}
+	el.style.transition = "none";
+	el.style.transform = fromTransform;
+	el.offsetWidth;
+	const onEnd = (e) => {
+		if (e.target !== el) return;
+		if (e.propertyName && e.propertyName !== "transform") return;
+		el.removeEventListener("transitionend", onEnd);
+		finish();
+	};
+	el.addEventListener("transitionend", onEnd);
+	el.style.transition = `transform ${durationMs}ms ${easing}`;
+	el.style.transform = toTransform;
+	const timer = window.setTimeout(() => {
+		el.removeEventListener("transitionend", onEnd);
+		finish();
+	}, durationMs + 80);
+	return () => {
+		window.clearTimeout(timer);
+		el.removeEventListener("transitionend", onEnd);
+		finish();
+	};
+}
+//#endregion
+export { computePictureFlipTransform, runPictureImgEnter };
+
+//# sourceMappingURL=pictureFlip.js.map

package/dist/components/picture/pictureFlip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pictureFlip.js","names":[],"sources":["../../../components/picture/pictureFlip.ts"],"sourcesContent":["/** 缩略图矩形 → 大图矩形的 FLIP（分轴缩放，避免收尾宽高比突变） */\r\nexport function computePictureFlipTransform(\r\n  from: DOMRectReadOnly,\r\n  to: DOMRectReadOnly,\r\n): { dx: number; dy: number; scaleX: number; scaleY: number } | null {\r\n  if (from.width < 1 || from.height < 1 || to.width < 1 || to.height < 1) {\r\n    return null\r\n  }\r\n  const scaleX = from.width / to.width\r\n  const scaleY = from.height / to.height\r\n  const dx = from.left + from.width / 2 - (to.left + to.width / 2)\r\n  const dy = from.top + from.height / 2 - (to.top + to.height / 2)\r\n  return { dx, dy, scaleX, scaleY }\r\n}\r\n\r\nfunction readCssTimeMs(raw: string, fallbackMs: number): number {\r\n  const v = raw.trim()\r\n  if (!v) return fallbackMs\r\n  if (v.endsWith('ms')) {\r\n    const n = Number.parseFloat(v)\r\n    return Number.isFinite(n) ? n : fallbackMs\r\n  }\r\n  if (v.endsWith('s')) {\r\n    const n = Number.parseFloat(v)\r\n    return Number.isFinite(n) ? n * 1000 : fallbackMs\r\n  }\r\n  const n = Number.parseFloat(v)\r\n  return Number.isFinite(n) ? n : fallbackMs\r\n}\r\n\r\nexport type PictureFlipEnterOptions = {\r\n  /** FLIP 结束（含取消/失败）后回调一次 */\r\n  onEnd?: () => void\r\n}\r\n\r\n/**\r\n * 将元素从 fromRect 视觉位置 FLIP 到当前布局（仅执行一次进场）。\r\n * 优先 WAAPI，收尾更顺；返回清理函数。\r\n */\r\nexport function runPictureImgEnter(\r\n  el: HTMLElement,\r\n  from: DOMRectReadOnly,\r\n  options?: PictureFlipEnterOptions,\r\n): () => void {\r\n  const to = el.getBoundingClientRect()\r\n  const flip = computePictureFlipTransform(from, to)\r\n  if (!flip) {\r\n    options?.onEnd?.()\r\n    return () => {}\r\n  }\r\n\r\n  const cs = getComputedStyle(el)\r\n  const durationMs = readCssTimeMs(\r\n    cs.getPropertyValue('--w-picture-img-enter-duration'),\r\n    520,\r\n  )\r\n  const easing =\r\n    cs.getPropertyValue('--w-picture-img-enter-ease').trim() ||\r\n    'cubic-bezier(0.33, 1, 0.68, 1)'\r\n\r\n  const fromTransform = `translate(${flip.dx}px, ${flip.dy}px) scale(${flip.scaleX}, ${flip.scaleY})`\r\n  const toTransform = 'translate(0px, 0px) scale(1, 1)'\r\n\r\n  let done = false\r\n  let ended = false\r\n  const emitEnd = () => {\r\n    if (ended) return\r\n    ended = true\r\n    options?.onEnd?.()\r\n  }\r\n  const finish = () => {\r\n    if (done) return\r\n    done = true\r\n    // 动画已到 identity，只清内联，避免打断最后一帧\r\n    el.style.transition = ''\r\n    el.style.transform = ''\r\n    emitEnd()\r\n  }\r\n\r\n  if (typeof el.animate === 'function') {\r\n    const anim = el.animate(\r\n      [{ transform: fromTransform }, { transform: toTransform }],\r\n      {\r\n        duration: durationMs,\r\n        easing,\r\n        fill: 'forwards',\r\n      },\r\n    )\r\n    anim.finished\r\n      .then(() => {\r\n        try {\r\n          anim.commitStyles()\r\n        } catch {\r\n          /* ignore */\r\n        }\r\n        anim.cancel()\r\n        // commit 后已是终点；去掉内联 transform，回到 stylesheet\r\n        el.style.transform = ''\r\n        emitEnd()\r\n      })\r\n      .catch(() => {\r\n        finish()\r\n      })\r\n    return () => {\r\n      anim.cancel()\r\n      finish()\r\n    }\r\n  }\r\n\r\n  // fallback：CSS transition\r\n  el.style.transition = 'none'\r\n  el.style.transform = fromTransform\r\n  void el.offsetWidth\r\n  const onEnd = (e: TransitionEvent) => {\r\n    if (e.target !== el) return\r\n    if (e.propertyName && e.propertyName !== 'transform') return\r\n    el.removeEventListener('transitionend', onEnd)\r\n    finish()\r\n  }\r\n  el.addEventListener('transitionend', onEnd)\r\n  el.style.transition = `transform ${durationMs}ms ${easing}`\r\n  el.style.transform = toTransform\r\n  const timer = window.setTimeout(() => {\r\n    el.removeEventListener('transitionend', onEnd)\r\n    finish()\r\n  }, durationMs + 80)\r\n\r\n  return () => {\r\n    window.clearTimeout(timer)\r\n    el.removeEventListener('transitionend', onEnd)\r\n    finish()\r\n  }\r\n}\r\n"],"mappings":"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"}