nuxt-image-viewer 0.0.0-stage → 1.0.0

package/dist/runtime/components/ImageViewer.vue

@@ -0,0 +1,681 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, reactive, ref, useTemplateRef, watch } from "vue";
+const props = defineProps({
+  items: { type: Array, required: true },
+  index: { type: Number, required: true },
+  options: { type: Object, required: true }
+});
+const emit = defineEmits(["change", "close", "closed"]);
+const EASE = "cubic-bezier(.4, 0, .22, 1)";
+const DURATION = 333;
+const VERTICAL_DRAG_FRICTION = 0.6;
+const EDGE_FRICTION = 0.35;
+const MIN_RATIO_TO_CLOSE = 0.4;
+const MIN_NEXT_SLIDE_SPEED = 0.5;
+const DECELERATION = 0.995;
+const { items, options } = props;
+const animated = !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const stage = useTemplateRef("stage");
+const backdrop = useTemplateRef("backdrop");
+const ui = useTemplateRef("ui");
+const W = ref(window.innerWidth);
+const H = ref(window.innerHeight);
+function onResize() {
+  W.value = window.innerWidth;
+  H.value = window.innerHeight;
+}
+const canFullscreen = document.fullscreenEnabled;
+const isFullscreen = ref(false);
+function onFullscreenChange() {
+  isFullscreen.value = !!stage.value && document.fullscreenElement === stage.value;
+}
+function toggleFullscreen() {
+  if (isFullscreen.value)
+    void document.exitFullscreen();
+  else
+    void stage.value?.requestFullscreen().catch(() => {
+    });
+}
+const index = ref(props.index);
+const current = computed(() => items[index.value]);
+const total = items.length;
+const slideWidth = computed(() => W.value * (1 + options.spacing));
+function fit(item) {
+  const mx = W.value < 768 || !options.ui.arrows ? 0 : 80;
+  const my = W.value < 768 ? 56 : 64;
+  const s = Math.min((W.value - mx * 2) / item.width, (H.value - my * 2) / item.height, 1);
+  return { w: item.width * s, h: item.height * s, s };
+}
+function frameBox(item) {
+  const { w, h } = fit(item);
+  return { left: (W.value - w) / 2, top: (H.value - h) / 2, w, h };
+}
+function zoomLimit(item) {
+  return Math.min(Math.max(2, 1 / fit(item).s), options.maxZoom);
+}
+function spring(from, to, velocity2, onUpdate, { frequency = 12, damping = 1 } = {}) {
+  if (!animated) {
+    onUpdate(to);
+    return () => {
+    };
+  }
+  const damped = damping < 1 ? frequency * Math.sqrt(1 - damping * damping) : frequency;
+  let delta = from - to;
+  let speed = velocity2;
+  let prev = performance.now();
+  let raf = 0;
+  const frame = (now) => {
+    const dt = (now - prev) / 1e3;
+    prev = now;
+    const decay = Math.exp(-damping * frequency * dt);
+    if (damping === 1) {
+      const coeff = speed + frequency * delta;
+      delta = (delta + coeff * dt) * decay;
+      speed = delta * -frequency + coeff * decay;
+    } else {
+      const coeff = (damping * frequency * delta + speed) / damped;
+      const cos = Math.cos(damped * dt);
+      const sin = Math.sin(damped * dt);
+      const next = decay * (delta * cos + coeff * sin);
+      speed = next * -frequency * damping + decay * (-damped * delta * sin + damped * coeff * cos);
+      delta = next;
+    }
+    if (Math.abs(delta) < 1 && Math.abs(speed) < 50) {
+      onUpdate(to);
+      return;
+    }
+    onUpdate(to + delta);
+    raf = requestAnimationFrame(frame);
+  };
+  raf = requestAnimationFrame(frame);
+  return () => cancelAnimationFrame(raf);
+}
+function project(velocity2) {
+  return velocity2 * DECELERATION / (1 - DECELERATION);
+}
+const phase = ref("open");
+const gesture = ref("none");
+const trackX = ref(0);
+const closeY = ref(0);
+const scale = ref(1);
+const pan = reactive({ x: 0, y: 0 });
+const panSprings = ref(0);
+const loaded = reactive(/* @__PURE__ */ new Set());
+let stopTrack = () => {
+};
+let stopClose = () => {
+};
+let stopPan = [];
+function stopMotion() {
+  stopTrack();
+  stopClose();
+  stopPan.forEach((stop) => stop());
+  stopPan = [];
+  panSprings.value = 0;
+}
+const bgOpacity = computed(() => options.bgOpacity * Math.max(0, 1 - Math.abs(closeY.value) / (H.value / 3)));
+const trackStyle = computed(() => ({ transform: `translate3d(${trackX.value}px, 0, 0)` }));
+const closeStyle = computed(() => ({ transform: closeY.value ? `translate3d(0, ${closeY.value}px, 0)` : "" }));
+const zoomStyle = computed(() => ({
+  transform: `translate3d(${pan.x}px, ${pan.y}px, 0) scale(${scale.value})`,
+  transition: gesture.value === "pan" || gesture.value === "pinch" || panSprings.value || !animated ? "none" : `transform ${DURATION}ms ${EASE}`
+}));
+const zoomed = computed(() => scale.value > 1.01);
+function panBounds(s = scale.value) {
+  const item = current.value;
+  if (!item)
+    return { x: 0, y: 0 };
+  const { w, h } = fit(item);
+  return { x: Math.max(0, (w * s - W.value) / 2), y: Math.max(0, (h * s - H.value) / 2) };
+}
+function clampPan() {
+  const b = panBounds();
+  pan.x = Math.min(b.x, Math.max(-b.x, pan.x));
+  pan.y = Math.min(b.y, Math.max(-b.y, pan.y));
+}
+function zoomTo(next, point = { x: W.value / 2, y: H.value / 2 }) {
+  const item = current.value;
+  if (!item)
+    return;
+  const target = Math.min(Math.max(next, 1), zoomLimit(item));
+  const px = point.x - W.value / 2;
+  const py = point.y - H.value / 2;
+  pan.x = px - (px - pan.x) * (target / scale.value);
+  pan.y = py - (py - pan.y) * (target / scale.value);
+  scale.value = target;
+  if (target === 1) {
+    pan.x = 0;
+    pan.y = 0;
+  }
+  clampPan();
+}
+function toggleZoom(point) {
+  const item = current.value;
+  if (item)
+    zoomTo(zoomed.value ? 1 : zoomLimit(item), point);
+}
+const loop = options.loop && total >= 3;
+const pos = ref(index.value);
+function slot(i) {
+  return loop ? i + total * Math.round((pos.value - i) / total) : i;
+}
+function near(i) {
+  return Math.abs(slot(i) - pos.value) <= 1;
+}
+function settleTrack(velocity2 = 0) {
+  stopTrack();
+  stopTrack = spring(trackX.value, -pos.value * slideWidth.value, velocity2, (x) => trackX.value = x, { frequency: 30 });
+}
+function step(delta, velocity2 = 0) {
+  const target = loop ? pos.value + delta : Math.min(Math.max(pos.value + delta, 0), total - 1);
+  if (target !== pos.value) {
+    scale.value = 1;
+    pan.x = 0;
+    pan.y = 0;
+    pos.value = target;
+    index.value = (target % total + total) % total;
+  }
+  settleTrack(velocity2);
+}
+function goTo(i) {
+  if (phase.value !== "open" || !items[i])
+    return;
+  let delta = i - index.value;
+  if (loop && Math.abs(delta) > total / 2)
+    delta -= Math.sign(delta) * total;
+  step(delta);
+}
+watch(index, (next, prev) => {
+  const prevItem = items[prev];
+  const nextItem = items[next];
+  if (prevItem?.element)
+    prevItem.element.style.visibility = "";
+  if (nextItem?.element)
+    nextItem.element.style.visibility = "hidden";
+  emit("change", next);
+});
+watch(slideWidth, () => {
+  stopTrack();
+  trackX.value = -pos.value * slideWidth.value;
+});
+function frameEl() {
+  return stage.value?.querySelector(`[data-frame="${index.value}"]`) ?? null;
+}
+function flip(rect, box) {
+  return `translate(${rect.left - box.left}px, ${rect.top - box.top}px) scale(${rect.width / box.w}, ${rect.height / box.h})`;
+}
+function onScreen(rect) {
+  return rect.width > 0 && rect.bottom > 0 && rect.top < H.value && rect.right > 0 && rect.left < W.value;
+}
+function pageShape(item, box) {
+  const el = item.element;
+  const r = el?.getBoundingClientRect();
+  if (!el || !r?.width || !r.height)
+    return null;
+  const style = getComputedStyle(el);
+  const fit2 = style.objectFit;
+  const s = fit2 === "cover" ? Math.max(r.width / item.width, r.height / item.height) : fit2 === "contain" || fit2 === "scale-down" ? Math.min(r.width / item.width, r.height / item.height) : 0;
+  const w = s ? item.width * s : r.width;
+  const h = s ? item.height * s : r.height;
+  const [px = 0.5, py = 0.5] = style.objectPosition.split(" ").map((v) => v.endsWith("%") ? Number.parseFloat(v) / 100 : 0.5);
+  const rect = { left: r.left + (r.width - w) * px, top: r.top + (r.height - h) * py, width: w, height: h };
+  const k = box.w / w;
+  const top = Math.max(0, r.top - rect.top) * k;
+  const right = Math.max(0, rect.left + w - r.right) * k;
+  const bottom = Math.max(0, rect.top + h - r.bottom) * k;
+  const left = Math.max(0, r.left - rect.left) * k;
+  const radius = (Number.parseFloat(style.borderTopLeftRadius) || 0) * k;
+  return { rect, visible: r, clip: `inset(${top}px ${right}px ${bottom}px ${left}px round ${radius}px)` };
+}
+const NO_CLIP = "inset(0px 0px 0px 0px round 0px)";
+function fade(el, from, to) {
+  return el?.animate([{ opacity: from }, { opacity: to }], { duration: DURATION, easing: EASE, fill: "forwards" }).finished;
+}
+const root = document.documentElement;
+const restore = { overflow: root.style.overflow, paddingRight: document.body.style.paddingRight };
+function lockScroll() {
+  const bar = window.innerWidth - root.clientWidth;
+  if (bar > 0 && !getComputedStyle(root).scrollbarGutter?.startsWith("stable"))
+    document.body.style.paddingRight = `${Number.parseFloat(getComputedStyle(document.body).paddingRight) + bar}px`;
+  root.style.overflow = "hidden";
+}
+function unlockScroll() {
+  root.style.overflow = restore.overflow;
+  document.body.style.paddingRight = restore.paddingRight;
+}
+const returnFocus = document.activeElement;
+onMounted(() => {
+  trackX.value = -pos.value * slideWidth.value;
+  lockScroll();
+  root.classList.add(options.openClass);
+  window.addEventListener("resize", onResize);
+  document.addEventListener("keydown", onKeydown);
+  document.addEventListener("fullscreenchange", onFullscreenChange);
+  const item = current.value;
+  if (item?.element)
+    item.element.style.visibility = "hidden";
+  stage.value?.focus({ preventScroll: true });
+  const frame = frameEl();
+  if (!item || !frame || !animated)
+    return;
+  const box = frameBox(item);
+  const shape = pageShape(item, box);
+  if (shape && onScreen(shape.visible)) {
+    frame.animate([
+      { transform: flip(shape.rect, box), transformOrigin: "0 0", clipPath: shape.clip },
+      { transform: "none", transformOrigin: "0 0", clipPath: NO_CLIP }
+    ], { duration: DURATION, easing: EASE });
+  } else {
+    frame.animate([{ opacity: 0 }, { opacity: 1 }], { duration: DURATION, easing: EASE });
+  }
+  backdrop.value?.animate([{ opacity: 0 }, { opacity: options.bgOpacity }], { duration: DURATION, easing: EASE });
+  ui.value?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: DURATION, easing: EASE });
+});
+onBeforeUnmount(() => {
+  stopMotion();
+  unlockScroll();
+  root.classList.remove(options.openClass);
+  window.removeEventListener("resize", onResize);
+  document.removeEventListener("keydown", onKeydown);
+  document.removeEventListener("fullscreenchange", onFullscreenChange);
+});
+async function close() {
+  if (phase.value === "closing")
+    return;
+  phase.value = "closing";
+  gesture.value = "none";
+  emit("close");
+  stopMotion();
+  if (isFullscreen.value)
+    void document.exitFullscreen();
+  const item = current.value;
+  const frame = frameEl();
+  if (item && frame && animated) {
+    const box = frameBox(item);
+    const now = frame.getBoundingClientRect();
+    const shape = pageShape(item, box);
+    const zoomer = frame.firstElementChild;
+    if (zoomer)
+      zoomer.style.transform = "";
+    const flight = shape ? frame.animate([
+      { transform: flip(now, box), transformOrigin: "0 0", clipPath: NO_CLIP },
+      { transform: flip(shape.rect, box), transformOrigin: "0 0", clipPath: shape.clip }
+    ], { duration: DURATION, easing: EASE, fill: "forwards" }) : frame.animate([
+      { transform: flip(now, box), transformOrigin: "0 0", opacity: 1 },
+      { transform: flip(now, box), transformOrigin: "0 0", opacity: 0 }
+    ], { duration: DURATION, easing: EASE, fill: "forwards" });
+    await Promise.all([flight.finished, fade(backdrop.value, bgOpacity.value, 0), fade(ui.value, 1, 0)]);
+  }
+  if (item?.element) {
+    item.element.style.visibility = "";
+    item.element.focus({ preventScroll: true });
+  } else {
+    returnFocus?.focus({ preventScroll: true });
+  }
+  emit("closed");
+}
+function onKeydown(event) {
+  if (event.key === "Escape")
+    void close();
+  else if (event.key === "ArrowLeft")
+    step(-1);
+  else if (event.key === "ArrowRight")
+    step(1);
+  else if (event.key === "Tab")
+    trapFocus(event);
+  else
+    return;
+  event.preventDefault();
+}
+function trapFocus(event) {
+  const buttons = [...stage.value?.querySelectorAll("button:not(:disabled)") ?? []].filter((button) => button.offsetParent);
+  if (!buttons.length)
+    return;
+  const at = buttons.indexOf(document.activeElement);
+  const next = event.shiftKey ? at <= 0 ? buttons.length - 1 : at - 1 : (at + 1) % buttons.length;
+  buttons[next].focus();
+}
+const pointers = /* @__PURE__ */ new Map();
+let start = { x: 0, y: 0, panX: 0, panY: 0, scale: 1, dist: 1, cx: 0, cy: 0, trackX: 0, closeY: 0 };
+let last = { x: 0, y: 0, t: 0 };
+let velocity = { x: 0, y: 0 };
+let moved = false;
+let lastTap = { t: 0, x: 0, y: 0 };
+let downOnImage = false;
+function withFriction(value, bound) {
+  if (value > bound)
+    return bound + (value - bound) * EDGE_FRICTION;
+  if (value < -bound)
+    return -bound + (value + bound) * EDGE_FRICTION;
+  return value;
+}
+function beginSingle(x, y) {
+  start = { ...start, x, y, panX: pan.x, panY: pan.y, scale: scale.value, trackX: trackX.value, closeY: closeY.value };
+  last = { x, y, t: performance.now() };
+  velocity = { x: 0, y: 0 };
+}
+function onPointerDown(event) {
+  if (phase.value !== "open" || event.target.closest("button"))
+    return;
+  stage.value?.setPointerCapture(event.pointerId);
+  pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+  stopMotion();
+  if (pointers.size === 1) {
+    beginSingle(event.clientX, event.clientY);
+    downOnImage = !!event.target.closest(".image-viewer__zoom");
+    moved = false;
+    gesture.value = "none";
+  } else if (pointers.size === 2) {
+    const [a, b] = [...pointers.values()];
+    start = { ...start, panX: pan.x, panY: pan.y, scale: scale.value, dist: Math.hypot(a.x - b.x, a.y - b.y) || 1, cx: (a.x + b.x) / 2, cy: (a.y + b.y) / 2 };
+    moved = true;
+    settleTrack();
+    closeY.value = 0;
+    gesture.value = "pinch";
+  }
+}
+function onPointerMove(event) {
+  if (!pointers.has(event.pointerId))
+    return;
+  pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+  if (gesture.value === "pinch") {
+    const [a, b] = [...pointers.values()];
+    if (!b)
+      return;
+    const item = current.value;
+    const next = Math.min(Math.max(start.scale * Math.hypot(a.x - b.x, a.y - b.y) / start.dist, 0.7), (item ? zoomLimit(item) : 2) * 1.3);
+    const cx = (a.x + b.x) / 2 - W.value / 2;
+    const cy = (a.y + b.y) / 2 - H.value / 2;
+    const sx = start.cx - W.value / 2;
+    const sy = start.cy - H.value / 2;
+    pan.x = cx - (sx - start.panX) * (next / start.scale);
+    pan.y = cy - (sy - start.panY) * (next / start.scale);
+    scale.value = next;
+    return;
+  }
+  const dx = event.clientX - start.x;
+  const dy = event.clientY - start.y;
+  if (gesture.value === "none") {
+    if (Math.hypot(dx, dy) < 6)
+      return;
+    moved = true;
+    gesture.value = zoomed.value ? "pan" : Math.abs(dx) > Math.abs(dy) || !options.closeOnVerticalDrag ? "swipe" : "close";
+  }
+  const now = performance.now();
+  const dt = Math.max(1, now - last.t);
+  velocity = { x: (event.clientX - last.x) / dt * 0.8 + velocity.x * 0.2, y: (event.clientY - last.y) / dt * 0.8 + velocity.y * 0.2 };
+  last = { x: event.clientX, y: event.clientY, t: now };
+  if (gesture.value === "pan") {
+    const bounds = panBounds();
+    pan.x = withFriction(start.panX + dx, bounds.x);
+    pan.y = withFriction(start.panY + dy, bounds.y);
+  } else if (gesture.value === "swipe") {
+    const base = -pos.value * slideWidth.value;
+    const shift = start.trackX - base + dx;
+    const atEdge = !loop && (pos.value === 0 && shift > 0 || pos.value === total - 1 && shift < 0);
+    trackX.value = base + (atEdge ? shift * EDGE_FRICTION : shift);
+  } else if (gesture.value === "close") {
+    closeY.value = start.closeY + dy * VERTICAL_DRAG_FRICTION;
+  }
+}
+function onPointerUp(event) {
+  if (!pointers.delete(event.pointerId))
+    return;
+  if (gesture.value === "pinch") {
+    const rest = [...pointers.values()][0];
+    if (rest) {
+      beginSingle(rest.x, rest.y);
+      gesture.value = zoomed.value ? "pan" : "none";
+      return;
+    }
+    gesture.value = "none";
+    zoomTo(scale.value);
+    return;
+  }
+  if (pointers.size)
+    return;
+  const finished = gesture.value;
+  gesture.value = "none";
+  if (performance.now() - last.t > 80)
+    velocity = { x: 0, y: 0 };
+  if (finished === "swipe") {
+    const ratio = (trackX.value + pos.value * slideWidth.value) / W.value;
+    const v = velocity.x;
+    const dx = last.x - start.x;
+    let delta = 0;
+    if (v < -MIN_NEXT_SLIDE_SPEED && dx < 0 || v < 0.1 && ratio < -0.5)
+      delta = 1;
+    else if (v > MIN_NEXT_SLIDE_SPEED && dx > 0 || v > -0.1 && ratio > 0.5)
+      delta = -1;
+    step(delta, delta > 0 ? Math.min(v, 0) : delta < 0 ? Math.max(v, 0) : v);
+  } else if (finished === "close") {
+    const third = H.value / 3;
+    const ratio = closeY.value / third;
+    const projected = (closeY.value + project(velocity.y)) / third;
+    if (ratio > 0 && projected > MIN_RATIO_TO_CLOSE || ratio < 0 && projected < -MIN_RATIO_TO_CLOSE) {
+      void close();
+    } else {
+      stopClose();
+      stopClose = spring(closeY.value, 0, velocity.y, (y) => closeY.value = y);
+    }
+  } else if (finished === "pan") {
+    const bounds = panBounds();
+    for (const axis of ["x", "y"]) {
+      const projected = pan[axis] + project(velocity[axis]);
+      const corrected = Math.min(bounds[axis], Math.max(-bounds[axis], projected));
+      if (corrected === pan[axis])
+        continue;
+      panSprings.value++;
+      stopPan.push(spring(pan[axis], corrected, velocity[axis], (value) => {
+        pan[axis] = value;
+        if (value === corrected)
+          panSprings.value = Math.max(0, panSprings.value - 1);
+      }, { damping: corrected === projected ? 1 : 0.82 }));
+    }
+  } else if (!moved) {
+    tap(event);
+  }
+}
+function tap(event) {
+  if (!downOnImage) {
+    if (options.closeOnBackdropClick)
+      void close();
+    return;
+  }
+  const point = { x: event.clientX, y: event.clientY };
+  if (event.pointerType === "mouse") {
+    toggleZoom(point);
+    return;
+  }
+  const now = performance.now();
+  if (now - lastTap.t < 300 && Math.hypot(point.x - lastTap.x, point.y - lastTap.y) < 30) {
+    toggleZoom(point);
+    lastTap = { t: 0, x: 0, y: 0 };
+  } else {
+    lastTap = { t: now, ...point };
+  }
+}
+function onWheel(event) {
+  if (phase.value === "open")
+    zoomTo(scale.value * Math.exp(-event.deltaY * 2e-3), { x: event.clientX, y: event.clientY });
+}
+defineExpose({ close, next: () => step(1), prev: () => step(-1), goTo });
+</script>
+
+<template>
+  <div
+    ref="stage"
+    role="dialog"
+    aria-modal="true"
+    :aria-label="options.labels.dialog"
+    tabindex="-1"
+    class="image-viewer"
+    :class="{ 'image-viewer--zoomed': zoomed, 'image-viewer--closing': phase === 'closing' }"
+    :style="{ zIndex: options.zIndex }"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+    @wheel.prevent="onWheel"
+  >
+    <div
+      ref="backdrop"
+      class="image-viewer__backdrop"
+      :style="{ opacity: bgOpacity }"
+    />
+
+    <div
+      class="image-viewer__track"
+      :style="trackStyle"
+    >
+      <div
+        v-for="(item, i) in items"
+        :key="i"
+        class="image-viewer__slide"
+        :class="{ 'image-viewer__slide--current': i === index }"
+        :aria-hidden="i !== index"
+        :style="{ left: `${slot(i) * slideWidth}px`, width: `${W}px` }"
+      >
+        <div
+          :data-frame="i"
+          class="image-viewer__frame"
+          :style="{
+  left: `${frameBox(item).left}px`,
+  top: `${frameBox(item).top}px`,
+  width: `${frameBox(item).w}px`,
+  height: `${frameBox(item).h}px`,
+  ...i === index ? closeStyle : {}
+}"
+        >
+          <div
+            class="image-viewer__zoom"
+            :style="i === index ? zoomStyle : void 0"
+          >
+            <img
+              :src="item.thumb"
+              :alt="item.alt"
+              draggable="false"
+              class="image-viewer__img image-viewer__img--thumb"
+            >
+
+            <img
+              v-if="item.src !== item.thumb && (near(i) || loaded.has(i))"
+              :src="item.src"
+              alt=""
+              draggable="false"
+              class="image-viewer__img image-viewer__img--full"
+              :class="{ 'image-viewer__img--loaded': loaded.has(i) }"
+              @load="loaded.add(i)"
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      ref="ui"
+      class="image-viewer__ui"
+    >
+      <div class="image-viewer__toolbar">
+        <span
+          v-if="options.ui.counter && total > 1"
+          class="image-viewer__counter"
+          aria-live="polite"
+        >
+          {{ index + 1 }} / {{ total }}
+        </span>
+
+        <div class="image-viewer__buttons">
+          <button
+            v-if="options.ui.zoom"
+            type="button"
+            class="image-viewer__button image-viewer__button--zoom"
+            :aria-label="zoomed ? options.labels.zoomOut : options.labels.zoomIn"
+            @click="toggleZoom()"
+          >
+            <svg
+              class="image-viewer__icon"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path :d="zoomed ? 'M15 15L21 21M8 11H14M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z' : 'M15 15L21 21M11 8V14M8 11H14M18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11Z'" />
+            </svg>
+          </button>
+
+          <button
+            v-if="options.ui.fullscreen && canFullscreen"
+            type="button"
+            class="image-viewer__button image-viewer__button--fullscreen"
+            :aria-label="isFullscreen ? options.labels.exitFullscreen : options.labels.fullscreen"
+            @click="toggleFullscreen()"
+          >
+            <svg
+              class="image-viewer__icon"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path :d="isFullscreen ? 'M9 4V9H4M20 9H15V4M15 20V15H20M4 15H9V20' : 'M4 9V4H9M15 4H20V9M20 15V20H15M9 20H4V15'" />
+            </svg>
+          </button>
+
+          <button
+            v-if="options.ui.close"
+            type="button"
+            class="image-viewer__button image-viewer__button--close"
+            :aria-label="options.labels.close"
+            @click="close()"
+          >
+            <svg
+              class="image-viewer__icon"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <template v-if="options.ui.arrows && total > 1">
+        <button
+          type="button"
+          class="image-viewer__button image-viewer__arrow image-viewer__arrow--prev"
+          :aria-label="options.labels.prev"
+          :disabled="!loop && pos === 0"
+          @click="step(-1)"
+        >
+          <svg
+            class="image-viewer__icon"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path d="M15 19L8 12L15 5" />
+          </svg>
+        </button>
+
+        <button
+          type="button"
+          class="image-viewer__button image-viewer__arrow image-viewer__arrow--next"
+          :aria-label="options.labels.next"
+          :disabled="!loop && pos === total - 1"
+          @click="step(1)"
+        >
+          <svg
+            class="image-viewer__icon"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path d="M9 5L16 12L9 19" />
+          </svg>
+        </button>
+      </template>
+
+      <div
+        v-if="options.ui.caption && current?.caption"
+        class="image-viewer__caption"
+      >
+        <span class="image-viewer__caption-text">{{ current.caption }}</span>
+      </div>
+    </div>
+  </div>
+</template>