@bikariya/image-viewer 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2025-present KazariEX
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/module.d.mts

@@ -0,0 +1,5 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "@bikariya/image-viewer",
+  "configKey": "image-viewer",
+  "version": "0.0.1",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,24 @@
+import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit';
+
+const name = "@bikariya/image-viewer";
+const packageJson = {
+	name: name};
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: packageJson.name,
+    configKey: "image-viewer"
+  },
+  moduleDependencies: {
+    "@bikariya/modals": {}
+  },
+  setup() {
+    const resolver = createResolver(import.meta.url);
+    addComponent({
+      name: "BikariyaImageViewer",
+      filePath: resolver.resolve("runtime/image-viewer.vue")
+    });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/image-viewer.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    target: HTMLImageElement;
+    duration?: number;
+    isOpening?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/image-viewer.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { computed, ref, useEventListener, usePointer, useTemplateRef } from "#imports";
+const props = defineProps({
+  target: { type: null, required: true },
+  duration: { type: Number, required: false },
+  isOpening: { type: Boolean, required: false }
+});
+const emit = defineEmits(["close"]);
+const rootEl = useTemplateRef("root");
+const rate = 0.9;
+const options = computed(() => {
+  return {
+    duration: props.duration ?? 400,
+    easing: "ease",
+    fill: "forwards"
+  };
+});
+let startRect;
+let startCenter;
+let startDistance;
+const pointers = ref({});
+const fingers = computed(() => {
+  return Object.values(pointers.value).slice(0, 2);
+});
+const center = computed(() => getCenter("current"));
+const distance = computed(() => getDistance("current"));
+function getCenter(mode) {
+  return {
+    x: fingers.value.reduce((sum, finger) => sum + finger[`${mode}X`], 0) / fingers.value.length,
+    y: fingers.value.reduce((sum, finger) => sum + finger[`${mode}Y`], 0) / fingers.value.length
+  };
+}
+function getDistance(mode) {
+  const [finger1, finger2] = fingers.value;
+  return finger1 && finger2 ? Math.hypot(
+    finger1[`${mode}X`] - finger2[`${mode}X`],
+    finger1[`${mode}Y`] - finger2[`${mode}Y`]
+  ) : 0;
+}
+function initialize() {
+  for (const pointer of Object.values(pointers.value)) {
+    pointer.startX = pointer.currentX;
+    pointer.startY = pointer.currentY;
+  }
+  startRect = rootEl.value.getBoundingClientRect();
+  startCenter = getCenter("start");
+  startDistance = getDistance("start");
+}
+const { isHolding } = usePointer(rootEl, {
+  onPointerdown(event) {
+    pointers.value[event.pointerId] = {
+      startX: event.screenX,
+      startY: event.screenY,
+      currentX: event.screenX,
+      currentY: event.screenY
+    };
+    initialize();
+  },
+  onPointermove(event) {
+    const pointer = pointers.value[event.pointerId];
+    if (!pointer) {
+      return;
+    }
+    pointer.currentX = event.screenX;
+    pointer.currentY = event.screenY;
+    const rate2 = distance.value / startDistance || 1;
+    const left = startRect.left + center.value.x - startCenter.x;
+    const top = startRect.top + center.value.y - startCenter.y;
+    const finalLeft = left - (center.value.x - left) * (rate2 - 1);
+    const finalTop = top - (center.value.y - top) * (rate2 - 1);
+    rootEl.value.animate({
+      left: finalLeft + "px",
+      top: finalTop + "px",
+      width: startRect.width * rate2 + "px",
+      height: startRect.height * rate2 + "px"
+    }, {
+      duration: 0,
+      fill: "forwards"
+    });
+  },
+  onPointerup(event) {
+    delete pointers.value[event.pointerId];
+    if (Object.keys(pointers.value).length) {
+      initialize();
+      return false;
+    }
+  }
+});
+function onWheel(event) {
+  if (isHolding.value) {
+    return;
+  }
+  let rate2 = 1 + Math.abs(event.deltaY) / (event.ctrlKey ? 20 : 200);
+  if (event.deltaY > 0) {
+    rate2 = 1 / rate2;
+  }
+  const { left, top, width, height } = rootEl.value.getBoundingClientRect();
+  const finalLeft = left - (event.clientX - left) * (rate2 - 1);
+  const finalTop = top - (event.clientY - top) * (rate2 - 1);
+  rootEl.value.animate({
+    left: finalLeft + "px",
+    top: finalTop + "px",
+    width: width * rate2 + "px",
+    height: height * rate2 + "px"
+  }, options.value);
+}
+useEventListener("keydown", (event) => {
+  if (event.key === "Escape") {
+    emit("close");
+  }
+});
+const onEnter = (el) => {
+  const fixedWidth = window.innerWidth * rate;
+  const fixedHeight = window.innerHeight * rate;
+  const naturalRatio = props.target.naturalWidth / props.target.naturalHeight;
+  const [finalWidth, finalHeight] = fixedWidth / fixedHeight > naturalRatio ? [fixedHeight * naturalRatio, fixedHeight] : [fixedWidth, fixedWidth / naturalRatio];
+  el.animate([getOriginalKeyframe(), {
+    top: `calc(50% - ${Math.floor(finalHeight / 2)}px)`,
+    left: `calc(50% - ${Math.floor(finalWidth / 2)}px)`,
+    width: Math.floor(finalWidth) + "px",
+    height: Math.floor(finalHeight) + "px",
+    clipPath: "inset(0)"
+  }], options.value);
+};
+const onLeave = (el, done) => {
+  const { left: elLeft, top: elTop } = el.getBoundingClientRect();
+  const { scrollX: x, scrollY: y } = window;
+  const animation = el.animate([{
+    top: 2 * y + elTop + "px",
+    left: 2 * x + elLeft + "px",
+    clipPath: "inset(0)"
+  }, getOriginalKeyframe(x, y)], options.value);
+  animation.addEventListener("finish", done);
+};
+function getOriginalKeyframe(x = 0, y = 0) {
+  const { left, top, width, height } = props.target.getBoundingClientRect();
+  const { naturalWidth, naturalHeight } = props.target;
+  const { objectPosition } = getComputedStyle(props.target);
+  const [horizontal, vertical] = objectPosition.split(" ").map((pos) => Number(pos.slice(0, -1)) / 100);
+  const ratio = width / height;
+  const naturalRatio = naturalWidth / naturalHeight;
+  let clipTop = 0;
+  let clipBottom = 0;
+  let clipLeft = 0;
+  let clipRight = 0;
+  if (ratio > naturalRatio) {
+    const fullHeight = naturalHeight * width / naturalWidth;
+    clipTop = (fullHeight - height) * vertical;
+    clipBottom = fullHeight - height - clipTop;
+  } else {
+    const fullWidth = naturalWidth * height / naturalHeight;
+    clipLeft = (fullWidth - width) * horizontal;
+    clipRight = fullWidth - width - clipLeft;
+  }
+  return {
+    top: y + top - clipTop + "px",
+    left: x + left - clipLeft + "px",
+    width: width + clipLeft + clipRight + "px",
+    height: height + clipTop + clipBottom + "px",
+    clipPath: `inset(${clipTop}px ${clipRight}px ${clipBottom}px ${clipLeft}px)`
+  };
+}
+</script>
+
+<template>
+    <transition @enter="onEnter" @leave="onLeave">
+        <img
+            v-if="isOpening"
+            ref="root"
+            class="bikariya-image-viewer"
+            :src="target.src"
+            :draggable="false"
+            @wheel.prevent="onWheel"
+        />
+    </transition>
+</template>
+
+<style>
+.bikariya-image-viewer{position:fixed;touch-action:none}.bikariya-image-viewer.v-leave-active{pointer-events:none;position:absolute}
+</style>

package/dist/runtime/image-viewer.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    target: HTMLImageElement;
+    duration?: number;
+    isOpening?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.mjs'

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@bikariya/image-viewer",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "",
+  "author": "KazariEX",
+  "license": "MIT",
+  "repository": "KazariEX/bikariya",
+  "keywords": [],
+  "exports": {
+    ".": "./dist/module.mjs"
+  },
+  "main": "./dist/module.mjs",
+  "types": "./dist/module.d.mts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@bikariya/modals": "",
+    "@nuxt/kit": "^4.2.2"
+  },
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "dev": "nuxt-module-build build --stub",
+    "dev:prepare": "nuxt-module-build prepare"
+  }
+}