init

2026-07-27 00:56:18 +03:30
commit 1c75afe0fd
244 changed files with 27710 additions and 0 deletions
@@ -0,0 +1,38 @@
+{
+  "name": "@ohmycv/vue-zoom",
+  "version": "0.1.1",
+  "description": "Vue 3 component for zooming content.",
+  "homepage": "https://github.com/Renovamen/oh-my-cv/tree/main/packages/vue-zoom",
+  "bugs": {
+    "url": "https://github.com/Renovamen/oh-my-cv"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Renovamen/oh-my-cv.git",
+    "directory": "packages/vue-zoom"
+  },
+  "license": "MIT",
+  "author": "Renovamen <renovamenzxh@gmail.com>",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "require": "./dist/index.js",
+    "import": "./dist/index.mjs"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build-fast:pkg": "tsup src/index.ts --format cjs,esm",
+    "build:pkg": "pnpm run build-fast:pkg --dts"
+  },
+  "dependencies": {
+    "@vueuse/core": "^10.11.0",
+    "vue": "^3.4.31"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
@@ -0,0 +1,54 @@
+import { defineComponent, ref, computed, h } from "vue";
+import { useElementSize } from "@vueuse/core";
+import type { VNode } from "vue";
+
+export default defineComponent({
+  name: "Zoom",
+
+  props: {
+    scale: {
+      type: Number,
+      required: true
+    }
+  },
+
+  setup(props, { slots }) {
+    const container = ref<HTMLElement>();
+    const zoom = ref<HTMLElement>();
+
+    const sizeC = useElementSize(container);
+    const sizeZ = useElementSize(zoom);
+
+    const left = computed(() =>
+      Math.max(0, (sizeC.width.value - props.scale * sizeZ.width.value) / 2)
+    );
+
+    return (): VNode =>
+      h(
+        "div",
+        {
+          class: "vue-zoom-container",
+          ref: container,
+          style: {
+            height: "100%"
+          }
+        },
+        [
+          h(
+            "div",
+            {
+              class: "vue-zoom",
+              ref: zoom,
+              style: {
+                width: "fit-content",
+                transformOrigin: "top left",
+                transform: `scale(${props.scale})`,
+                marginLeft: `${left.value}px`
+              }
+            },
+            [slots.default!()]
+          )
+        ]
+      );
+  }
+});
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["./src"]
+}