You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
30 KiB
1 line
30 KiB
{"ast":null,"code":"import { defineComponent, markRaw, ref, effectScope, shallowRef, computed, watch, nextTick, onMounted, openBlock, createBlock, unref, withCtx, createVNode, Transition, createElementVNode, normalizeClass, normalizeStyle, withModifiers, createCommentVNode, createElementBlock, Fragment, resolveDynamicComponent, renderList, withDirectives, vShow, renderSlot } from 'vue';\nimport { useEventListener } from '@vueuse/core';\nimport { throttle } from 'lodash-unified';\nimport '../../../hooks/index.mjs';\nimport '../../../constants/index.mjs';\nimport '../../../utils/index.mjs';\nimport { ElTeleport } from '../../teleport/index.mjs';\nimport { ElIcon } from '../../icon/index.mjs';\nimport { FullScreen, ScaleToOriginal, Close, ArrowLeft, ArrowRight, ZoomOut, ZoomIn, RefreshLeft, RefreshRight } from '@element-plus/icons-vue';\nimport { imageViewerProps, imageViewerEmits } from './image-viewer.mjs';\nimport _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';\nimport { useLocale } from '../../../hooks/use-locale/index.mjs';\nimport { useNamespace } from '../../../hooks/use-namespace/index.mjs';\nimport { useZIndex } from '../../../hooks/use-z-index/index.mjs';\nimport { EVENT_CODE } from '../../../constants/aria.mjs';\nimport { keysOf } from '../../../utils/objects.mjs';\nconst __default__ = defineComponent({\n name: \"ElImageViewer\"\n});\nconst _sfc_main = /* @__PURE__ */defineComponent({\n ...__default__,\n props: imageViewerProps,\n emits: imageViewerEmits,\n setup(__props, {\n expose,\n emit\n }) {\n var _a;\n const props = __props;\n const modes = {\n CONTAIN: {\n name: \"contain\",\n icon: markRaw(FullScreen)\n },\n ORIGINAL: {\n name: \"original\",\n icon: markRaw(ScaleToOriginal)\n }\n };\n const {\n t\n } = useLocale();\n const ns = useNamespace(\"image-viewer\");\n const {\n nextZIndex\n } = useZIndex();\n const wrapper = ref();\n const imgRefs = ref([]);\n const scopeEventListener = effectScope();\n const loading = ref(true);\n const activeIndex = ref(props.initialIndex);\n const mode = shallowRef(modes.CONTAIN);\n const transform = ref({\n scale: 1,\n deg: 0,\n offsetX: 0,\n offsetY: 0,\n enableTransition: false\n });\n const zIndex = ref((_a = props.zIndex) != null ? _a : nextZIndex());\n const isSingle = computed(() => {\n const {\n urlList\n } = props;\n return urlList.length <= 1;\n });\n const isFirst = computed(() => {\n return activeIndex.value === 0;\n });\n const isLast = computed(() => {\n return activeIndex.value === props.urlList.length - 1;\n });\n const currentImg = computed(() => {\n return props.urlList[activeIndex.value];\n });\n const arrowPrevKls = computed(() => [ns.e(\"btn\"), ns.e(\"prev\"), ns.is(\"disabled\", !props.infinite && isFirst.value)]);\n const arrowNextKls = computed(() => [ns.e(\"btn\"), ns.e(\"next\"), ns.is(\"disabled\", !props.infinite && isLast.value)]);\n const imgStyle = computed(() => {\n const {\n scale,\n deg,\n offsetX,\n offsetY,\n enableTransition\n } = transform.value;\n let translateX = offsetX / scale;\n let translateY = offsetY / scale;\n const radian = deg * Math.PI / 180;\n const cosRadian = Math.cos(radian);\n const sinRadian = Math.sin(radian);\n translateX = translateX * cosRadian + translateY * sinRadian;\n translateY = translateY * cosRadian - offsetX / scale * sinRadian;\n const style = {\n transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,\n transition: enableTransition ? \"transform .3s\" : \"\"\n };\n if (mode.value.name === modes.CONTAIN.name) {\n style.maxWidth = style.maxHeight = \"100%\";\n }\n return style;\n });\n function hide() {\n unregisterEventListener();\n emit(\"close\");\n }\n function registerEventListener() {\n const keydownHandler = throttle(e => {\n switch (e.code) {\n case EVENT_CODE.esc:\n props.closeOnPressEscape && hide();\n break;\n case EVENT_CODE.space:\n toggleMode();\n break;\n case EVENT_CODE.left:\n prev();\n break;\n case EVENT_CODE.up:\n handleActions(\"zoomIn\");\n break;\n case EVENT_CODE.right:\n next();\n break;\n case EVENT_CODE.down:\n handleActions(\"zoomOut\");\n break;\n }\n });\n const mousewheelHandler = throttle(e => {\n const delta = e.deltaY || e.deltaX;\n handleActions(delta < 0 ? \"zoomIn\" : \"zoomOut\", {\n zoomRate: props.zoomRate,\n enableTransition: false\n });\n });\n scopeEventListener.run(() => {\n useEventListener(document, \"keydown\", keydownHandler);\n useEventListener(document, \"wheel\", mousewheelHandler);\n });\n }\n function unregisterEventListener() {\n scopeEventListener.stop();\n }\n function handleImgLoad() {\n loading.value = false;\n }\n function handleImgError(e) {\n loading.value = false;\n e.target.alt = t(\"el.image.error\");\n }\n function handleMouseDown(e) {\n if (loading.value || e.button !== 0 || !wrapper.value) return;\n transform.value.enableTransition = false;\n const {\n offsetX,\n offsetY\n } = transform.value;\n const startX = e.pageX;\n const startY = e.pageY;\n const dragHandler = throttle(ev => {\n transform.value = {\n ...transform.value,\n offsetX: offsetX + ev.pageX - startX,\n offsetY: offsetY + ev.pageY - startY\n };\n });\n const removeMousemove = useEventListener(document, \"mousemove\", dragHandler);\n useEventListener(document, \"mouseup\", () => {\n removeMousemove();\n });\n e.preventDefault();\n }\n function reset() {\n transform.value = {\n scale: 1,\n deg: 0,\n offsetX: 0,\n offsetY: 0,\n enableTransition: false\n };\n }\n function toggleMode() {\n if (loading.value) return;\n const modeNames = keysOf(modes);\n const modeValues = Object.values(modes);\n const currentMode = mode.value.name;\n const index = modeValues.findIndex(i => i.name === currentMode);\n const nextIndex = (index + 1) % modeNames.length;\n mode.value = modes[modeNames[nextIndex]];\n reset();\n }\n function setActiveItem(index) {\n const len = props.urlList.length;\n activeIndex.value = (index + len) % len;\n }\n function prev() {\n if (isFirst.value && !props.infinite) return;\n setActiveItem(activeIndex.value - 1);\n }\n function next() {\n if (isLast.value && !props.infinite) return;\n setActiveItem(activeIndex.value + 1);\n }\n function handleActions(action, options = {}) {\n if (loading.value) return;\n const {\n minScale,\n maxScale\n } = props;\n const {\n zoomRate,\n rotateDeg,\n enableTransition\n } = {\n zoomRate: props.zoomRate,\n rotateDeg: 90,\n enableTransition: true,\n ...options\n };\n switch (action) {\n case \"zoomOut\":\n if (transform.value.scale > minScale) {\n transform.value.scale = Number.parseFloat((transform.value.scale / zoomRate).toFixed(3));\n }\n break;\n case \"zoomIn\":\n if (transform.value.scale < maxScale) {\n transform.value.scale = Number.parseFloat((transform.value.scale * zoomRate).toFixed(3));\n }\n break;\n case \"clockwise\":\n transform.value.deg += rotateDeg;\n emit(\"rotate\", transform.value.deg);\n break;\n case \"anticlockwise\":\n transform.value.deg -= rotateDeg;\n emit(\"rotate\", transform.value.deg);\n break;\n }\n transform.value.enableTransition = enableTransition;\n }\n watch(currentImg, () => {\n nextTick(() => {\n const $img = imgRefs.value[0];\n if (!($img == null ? void 0 : $img.complete)) {\n loading.value = true;\n }\n });\n });\n watch(activeIndex, val => {\n reset();\n emit(\"switch\", val);\n });\n onMounted(() => {\n var _a2, _b;\n registerEventListener();\n (_b = (_a2 = wrapper.value) == null ? void 0 : _a2.focus) == null ? void 0 : _b.call(_a2);\n });\n expose({\n setActiveItem\n });\n return (_ctx, _cache) => {\n return openBlock(), createBlock(unref(ElTeleport), {\n to: \"body\",\n disabled: !_ctx.teleported\n }, {\n default: withCtx(() => [createVNode(Transition, {\n name: \"viewer-fade\",\n appear: \"\"\n }, {\n default: withCtx(() => [createElementVNode(\"div\", {\n ref_key: \"wrapper\",\n ref: wrapper,\n tabindex: -1,\n class: normalizeClass(unref(ns).e(\"wrapper\")),\n style: normalizeStyle({\n zIndex: zIndex.value\n })\n }, [createElementVNode(\"div\", {\n class: normalizeClass(unref(ns).e(\"mask\")),\n onClick: withModifiers($event => _ctx.hideOnClickModal && hide(), [\"self\"])\n }, null, 10, [\"onClick\"]), createCommentVNode(\" CLOSE \"), createElementVNode(\"span\", {\n class: normalizeClass([unref(ns).e(\"btn\"), unref(ns).e(\"close\")]),\n onClick: hide\n }, [createVNode(unref(ElIcon), null, {\n default: withCtx(() => [createVNode(unref(Close))]),\n _: 1\n })], 2), createCommentVNode(\" ARROW \"), !unref(isSingle) ? (openBlock(), createElementBlock(Fragment, {\n key: 0\n }, [createElementVNode(\"span\", {\n class: normalizeClass(unref(arrowPrevKls)),\n onClick: prev\n }, [createVNode(unref(ElIcon), null, {\n default: withCtx(() => [createVNode(unref(ArrowLeft))]),\n _: 1\n })], 2), createElementVNode(\"span\", {\n class: normalizeClass(unref(arrowNextKls)),\n onClick: next\n }, [createVNode(unref(ElIcon), null, {\n default: withCtx(() => [createVNode(unref(ArrowRight))]),\n _: 1\n })], 2)], 64)) : createCommentVNode(\"v-if\", true), createCommentVNode(\" ACTIONS \"), createElementVNode(\"div\", {\n class: normalizeClass([unref(ns).e(\"btn\"), unref(ns).e(\"actions\")])\n }, [createElementVNode(\"div\", {\n class: normalizeClass(unref(ns).e(\"actions__inner\"))\n }, [createVNode(unref(ElIcon), {\n onClick: $event => handleActions(\"zoomOut\")\n }, {\n default: withCtx(() => [createVNode(unref(ZoomOut))]),\n _: 1\n }, 8, [\"onClick\"]), createVNode(unref(ElIcon), {\n onClick: $event => handleActions(\"zoomIn\")\n }, {\n default: withCtx(() => [createVNode(unref(ZoomIn))]),\n _: 1\n }, 8, [\"onClick\"]), createElementVNode(\"i\", {\n class: normalizeClass(unref(ns).e(\"actions__divider\"))\n }, null, 2), createVNode(unref(ElIcon), {\n onClick: toggleMode\n }, {\n default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(mode).icon)))]),\n _: 1\n }), createElementVNode(\"i\", {\n class: normalizeClass(unref(ns).e(\"actions__divider\"))\n }, null, 2), createVNode(unref(ElIcon), {\n onClick: $event => handleActions(\"anticlockwise\")\n }, {\n default: withCtx(() => [createVNode(unref(RefreshLeft))]),\n _: 1\n }, 8, [\"onClick\"]), createVNode(unref(ElIcon), {\n onClick: $event => handleActions(\"clockwise\")\n }, {\n default: withCtx(() => [createVNode(unref(RefreshRight))]),\n _: 1\n }, 8, [\"onClick\"])], 2)], 2), createCommentVNode(\" CANVAS \"), createElementVNode(\"div\", {\n class: normalizeClass(unref(ns).e(\"canvas\"))\n }, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.urlList, (url, i) => {\n return withDirectives((openBlock(), createElementBlock(\"img\", {\n ref_for: true,\n ref: el => imgRefs.value[i] = el,\n key: url,\n src: url,\n style: normalizeStyle(unref(imgStyle)),\n class: normalizeClass(unref(ns).e(\"img\")),\n crossorigin: _ctx.crossorigin,\n onLoad: handleImgLoad,\n onError: handleImgError,\n onMousedown: handleMouseDown\n }, null, 46, [\"src\", \"crossorigin\"])), [[vShow, i === activeIndex.value]]);\n }), 128))], 2), renderSlot(_ctx.$slots, \"default\")], 6)]),\n _: 3\n })]),\n _: 3\n }, 8, [\"disabled\"]);\n };\n }\n});\nvar ImageViewer = /* @__PURE__ */_export_sfc(_sfc_main, [[\"__file\", \"image-viewer.vue\"]]);\nexport { ImageViewer as default };","map":{"version":3,"names":["name","props","__props","modes","CONTAIN","icon","markRaw","FullScreen","ORIGINAL","ScaleToOriginal","t","useLocale","ns","useNamespace","nextZIndex","useZIndex","wrapper","ref","imgRefs","scopeEventListener","effectScope","loading","activeIndex","initialIndex","mode","shallowRef","transform","scale","deg","offsetX","offsetY","enableTransition","zIndex","_a","isSingle","computed","urlList","length","isFirst","value","isLast","currentImg","arrowPrevKls","e","is","infinite","arrowNextKls","imgStyle","translateX","translateY","radian","Math","PI","cosRadian","cos","sinRadian","sin","style","transition","maxWidth","maxHeight","hide","unregisterEventListener","emit","registerEventListener","keydownHandler","throttle","code","EVENT_CODE","esc","closeOnPressEscape","space","toggleMode","left","prev","up","handleActions","right","next","down","mousewheelHandler","delta","deltaY","deltaX","zoomRate","run","useEventListener","document","stop","handleImgLoad","handleImgError","target","alt","handleMouseDown","button","startX","pageX","startY","pageY","dragHandler","ev","removeMousemove","preventDefault","reset","modeNames","keysOf","modeValues","Object","values","currentMode","index","findIndex","i","nextIndex","setActiveItem","len","action","options","minScale","maxScale","rotateDeg","Number","parseFloat","toFixed","watch","nextTick","$img","complete","val","onMounted","_a2","_b","focus","call","expose"],"sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n <el-teleport to=\"body\" :disabled=\"!teleported\">\n <transition name=\"viewer-fade\" appear>\n <div\n ref=\"wrapper\"\n :tabindex=\"-1\"\n :class=\"ns.e('wrapper')\"\n :style=\"{ zIndex }\"\n >\n <div :class=\"ns.e('mask')\" @click.self=\"hideOnClickModal && hide()\" />\n\n <!-- CLOSE -->\n <span :class=\"[ns.e('btn'), ns.e('close')]\" @click=\"hide\">\n <el-icon>\n <Close />\n </el-icon>\n </span>\n\n <!-- ARROW -->\n <template v-if=\"!isSingle\">\n <span :class=\"arrowPrevKls\" @click=\"prev\">\n <el-icon>\n <ArrowLeft />\n </el-icon>\n </span>\n <span :class=\"arrowNextKls\" @click=\"next\">\n <el-icon>\n <ArrowRight />\n </el-icon>\n </span>\n </template>\n <!-- ACTIONS -->\n <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n <div :class=\"ns.e('actions__inner')\">\n <el-icon @click=\"handleActions('zoomOut')\">\n <ZoomOut />\n </el-icon>\n <el-icon @click=\"handleActions('zoomIn')\">\n <ZoomIn />\n </el-icon>\n <i :class=\"ns.e('actions__divider')\" />\n <el-icon @click=\"toggleMode\">\n <component :is=\"mode.icon\" />\n </el-icon>\n <i :class=\"ns.e('actions__divider')\" />\n <el-icon @click=\"handleActions('anticlockwise')\">\n <RefreshLeft />\n </el-icon>\n <el-icon @click=\"handleActions('clockwise')\">\n <RefreshRight />\n </el-icon>\n </div>\n </div>\n <!-- CANVAS -->\n <div :class=\"ns.e('canvas')\">\n <img\n v-for=\"(url, i) in urlList\"\n v-show=\"i === activeIndex\"\n :ref=\"(el) => (imgRefs[i] = el as HTMLImageElement)\"\n :key=\"url\"\n :src=\"url\"\n :style=\"imgStyle\"\n :class=\"ns.e('img')\"\n :crossorigin=\"crossorigin\"\n @load=\"handleImgLoad\"\n @error=\"handleImgError\"\n @mousedown=\"handleMouseDown\"\n />\n </div>\n <slot />\n </div>\n </transition>\n </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n effectScope,\n markRaw,\n nextTick,\n onMounted,\n ref,\n shallowRef,\n watch,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { keysOf } from '@element-plus/utils'\nimport ElTeleport from '@element-plus/components/teleport'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n ArrowLeft,\n ArrowRight,\n Close,\n FullScreen,\n RefreshLeft,\n RefreshRight,\n ScaleToOriginal,\n ZoomIn,\n ZoomOut,\n} from '@element-plus/icons-vue'\nimport { imageViewerEmits, imageViewerProps } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\nimport type { ImageViewerAction, ImageViewerMode } from './image-viewer'\n\nconst modes: Record<'CONTAIN' | 'ORIGINAL', ImageViewerMode> = {\n CONTAIN: {\n name: 'contain',\n icon: markRaw(FullScreen),\n },\n ORIGINAL: {\n name: 'original',\n icon: markRaw(ScaleToOriginal),\n },\n}\n\ndefineOptions({\n name: 'ElImageViewer',\n})\n\nconst props = defineProps(imageViewerProps)\nconst emit = defineEmits(imageViewerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image-viewer')\nconst { nextZIndex } = useZIndex()\nconst wrapper = ref<HTMLDivElement>()\nconst imgRefs = ref<HTMLImageElement[]>([])\n\nconst scopeEventListener = effectScope()\n\nconst loading = ref(true)\nconst activeIndex = ref(props.initialIndex)\nconst mode = shallowRef<ImageViewerMode>(modes.CONTAIN)\nconst transform = ref({\n scale: 1,\n deg: 0,\n offsetX: 0,\n offsetY: 0,\n enableTransition: false,\n})\nconst zIndex = ref(props.zIndex ?? nextZIndex())\n\nconst isSingle = computed(() => {\n const { urlList } = props\n return urlList.length <= 1\n})\n\nconst isFirst = computed(() => {\n return activeIndex.value === 0\n})\n\nconst isLast = computed(() => {\n return activeIndex.value === props.urlList.length - 1\n})\n\nconst currentImg = computed(() => {\n return props.urlList[activeIndex.value]\n})\n\nconst arrowPrevKls = computed(() => [\n ns.e('btn'),\n ns.e('prev'),\n ns.is('disabled', !props.infinite && isFirst.value),\n])\n\nconst arrowNextKls = computed(() => [\n ns.e('btn'),\n ns.e('next'),\n ns.is('disabled', !props.infinite && isLast.value),\n])\n\nconst imgStyle = computed(() => {\n const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n let translateX = offsetX / scale\n let translateY = offsetY / scale\n\n const radian = (deg * Math.PI) / 180\n const cosRadian = Math.cos(radian)\n const sinRadian = Math.sin(radian)\n translateX = translateX * cosRadian + translateY * sinRadian\n translateY = translateY * cosRadian - (offsetX / scale) * sinRadian\n\n const style: CSSProperties = {\n transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,\n transition: enableTransition ? 'transform .3s' : '',\n }\n if (mode.value.name === modes.CONTAIN.name) {\n style.maxWidth = style.maxHeight = '100%'\n }\n return style\n})\n\nfunction hide() {\n unregisterEventListener()\n emit('close')\n}\n\nfunction registerEventListener() {\n const keydownHandler = throttle((e: KeyboardEvent) => {\n switch (e.code) {\n // ESC\n case EVENT_CODE.esc:\n props.closeOnPressEscape && hide()\n break\n // SPACE\n case EVENT_CODE.space:\n toggleMode()\n break\n // LEFT_ARROW\n case EVENT_CODE.left:\n prev()\n break\n // UP_ARROW\n case EVENT_CODE.up:\n handleActions('zoomIn')\n break\n // RIGHT_ARROW\n case EVENT_CODE.right:\n next()\n break\n // DOWN_ARROW\n case EVENT_CODE.down:\n handleActions('zoomOut')\n break\n }\n })\n const mousewheelHandler = throttle((e: WheelEvent) => {\n const delta = e.deltaY || e.deltaX\n handleActions(delta < 0 ? 'zoomIn' : 'zoomOut', {\n zoomRate: props.zoomRate,\n enableTransition: false,\n })\n })\n\n scopeEventListener.run(() => {\n useEventListener(document, 'keydown', keydownHandler)\n useEventListener(document, 'wheel', mousewheelHandler)\n })\n}\n\nfunction unregisterEventListener() {\n scopeEventListener.stop()\n}\n\nfunction handleImgLoad() {\n loading.value = false\n}\n\nfunction handleImgError(e: Event) {\n loading.value = false\n ;(e.target as HTMLImageElement).alt = t('el.image.error')\n}\n\nfunction handleMouseDown(e: MouseEvent) {\n if (loading.value || e.button !== 0 || !wrapper.value) return\n transform.value.enableTransition = false\n\n const { offsetX, offsetY } = transform.value\n const startX = e.pageX\n const startY = e.pageY\n\n const dragHandler = throttle((ev: MouseEvent) => {\n transform.value = {\n ...transform.value,\n offsetX: offsetX + ev.pageX - startX,\n offsetY: offsetY + ev.pageY - startY,\n }\n })\n const removeMousemove = useEventListener(document, 'mousemove', dragHandler)\n useEventListener(document, 'mouseup', () => {\n removeMousemove()\n })\n\n e.preventDefault()\n}\n\nfunction reset() {\n transform.value = {\n scale: 1,\n deg: 0,\n offsetX: 0,\n offsetY: 0,\n enableTransition: false,\n }\n}\n\nfunction toggleMode() {\n if (loading.value) return\n\n const modeNames = keysOf(modes)\n const modeValues = Object.values(modes)\n const currentMode = mode.value.name\n const index = modeValues.findIndex((i) => i.name === currentMode)\n const nextIndex = (index + 1) % modeNames.length\n mode.value = modes[modeNames[nextIndex]]\n reset()\n}\n\nfunction setActiveItem(index: number) {\n const len = props.urlList.length\n activeIndex.value = (index + len) % len\n}\n\nfunction prev() {\n if (isFirst.value && !props.infinite) return\n setActiveItem(activeIndex.value - 1)\n}\n\nfunction next() {\n if (isLast.value && !props.infinite) return\n setActiveItem(activeIndex.value + 1)\n}\n\nfunction handleActions(action: ImageViewerAction, options = {}) {\n if (loading.value) return\n const { minScale, maxScale } = props\n const { zoomRate, rotateDeg, enableTransition } = {\n zoomRate: props.zoomRate,\n rotateDeg: 90,\n enableTransition: true,\n ...options,\n }\n switch (action) {\n case 'zoomOut':\n if (transform.value.scale > minScale) {\n transform.value.scale = Number.parseFloat(\n (transform.value.scale / zoomRate).toFixed(3)\n )\n }\n break\n case 'zoomIn':\n if (transform.value.scale < maxScale) {\n transform.value.scale = Number.parseFloat(\n (transform.value.scale * zoomRate).toFixed(3)\n )\n }\n break\n case 'clockwise':\n transform.value.deg += rotateDeg\n emit('rotate', transform.value.deg)\n break\n case 'anticlockwise':\n transform.value.deg -= rotateDeg\n emit('rotate', transform.value.deg)\n break\n }\n transform.value.enableTransition = enableTransition\n}\n\nwatch(currentImg, () => {\n nextTick(() => {\n const $img = imgRefs.value[0]\n if (!$img?.complete) {\n loading.value = true\n }\n })\n})\n\nwatch(activeIndex, (val) => {\n reset()\n emit('switch', val)\n})\n\nonMounted(() => {\n registerEventListener()\n // add tabindex then wrapper can be focusable via Javascript\n // focus wrapper so arrow key can't cause inner scroll behavior underneath\n wrapper.value?.focus?.()\n})\n\ndefineExpose({\n /**\n * @description manually switch image\n */\n setActiveItem,\n})\n</script>\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |