From bf0fc7966d18e3d85aa7ac4b495652b879569bc4 Mon Sep 17 00:00:00 2001
From: Hassaan Akbar <hassaan.akbar@outlook.com>
Date: Fri, 4 Aug 2023 07:43:59 +0500
Subject: [PATCH] updated readme and demos

---
 README.md                                     |  30 +-
 docs/package.json                             |   2 +-
 docs/src/.vuepress/.cache/deps/_metadata.json |  20 +-
 .../src/.vuepress/.cache/deps/vue-zoomable.js | 674 ++++++++++++++++++
 .../.vuepress/.cache/deps/vue-zoomable.js.map |   7 +
 docs/src/.vuepress/.temp/internal/siteData.js |  13 +
 .../src/.vuepress/.temp/internal/themeData.js |  13 +
 docs/src/.vuepress/.temp/pages/404.html.js    |  13 +
 .../.temp/pages/demos/html-demo.html.js       |  13 +
 .../.vuepress/.temp/pages/demos/index.html.js |  13 +
 .../.temp/pages/demos/svg-demo.html.js        |  13 +
 .../.vuepress/.temp/pages/guide/index.html.js |  13 +
 docs/src/.vuepress/.temp/pages/index.html.js  |  13 +
 docs/src/.vuepress/components/HtmlDemo.vue    | 205 +++++-
 docs/src/.vuepress/components/SvgDemo.vue     | 207 +++++-
 package.json                                  |  16 +-
 src/components/VueZoomable.vue                |   2 +-
 src/composables/useWheel.ts                   |   3 +-
 src/examples/svg_example.vue                  |   9 +-
 src/index.ts                                  |   1 -
 vite.config.ts                                |   3 +-
 21 files changed, 1176 insertions(+), 107 deletions(-)
 create mode 100644 docs/src/.vuepress/.cache/deps/vue-zoomable.js
 create mode 100644 docs/src/.vuepress/.cache/deps/vue-zoomable.js.map

diff --git a/README.md b/README.md
index a77e99d..8865ba4 100644
--- a/README.md
+++ b/README.md
@@ -1,32 +1,17 @@
-# vue-zoomable-cute
+# vue-zoomable
 
 Tiny and high performance zoom and pan library for Vue 3. It uses CSS Transforms which provides hardware acceleration.
 
 Checkout the [demos](https://hassaanakbar.github.io/vue-zoomable/demos/).
 
-## Why the fork?
-
-Because I wanna have more controll!!
-
-> _laughs in an evil manner_
-
-xD
-
-I will still make pr for changes though.
-
 ## Installation
 
-```sh
-npm install vue-zoomable-cute
-# or
-yarn add vue-zoomable-cute
-```
+`npm install vue-zoomable`
 
 ## Usage
 
 Immediate child of VueZoomable must be either svg or an html container.
 
-
 ```vue
 <template>
   <VueZoomable
@@ -44,10 +29,11 @@ Immediate child of VueZoomable must be either svg or an html container.
 </template>
 
 <script setup lang="ts">
-import VueZoomable from "vue-zoomable-cute";
-import "vue-zoomable-cute/dist/style.css";
+import VueZoomable from "vue-zoomable";
+import "vue-zoomable/dist/style.css";
 </script>
 ```
+
 ### Model
 
 - v-model:zoom
@@ -80,7 +66,9 @@ All props other than `selector` are observable and can be changed after initiali
 
 ### Document Flow
 
-If you have any document flow whatsoever on your page, it certainly won't do if you can only zoom with the mouse wheel. Because that would scroll the document at the same time. One sollution might be to do some weird stuff with prevent default or smth. But that gets messy REAAAL quickly.
+If you have any document flow whatsoever on your page, it certainly won't do if you can only zoom with the mouse wheel. Because that would scroll the document at the same time. Thanks to [Hellow2](https://github.com/HeIIow2) for document flow and control buttons features.
+
+---
 
 My sollution was inspired by [Google-Maps](https://developers.google.com/maps/documentation/javascript/examples/control-default). You can set the prop `enableWheelOnKey` to whatever key button you like. _(Every value that can be found in KeyEvents `event.key` are valid and should work)_. If `enableWheelOnKey` is set, the zoom on Wheel will only work, if simmultaniously the corresponding Button is pressed.
 
@@ -99,6 +87,8 @@ Now usually `Control` + `wheel` zooms in and out of the viewport. This... isn't
 
 Because this could be unintuitive, I implemented a message that tells you what you need to do to actually zoom, that appears after you would have zoomed without this. Just like [Google](https://developers.google.com/maps/documentation/javascript/examples/control-default) did.
 
+---
+
 ### Events
 
 - panned
diff --git a/docs/package.json b/docs/package.json
index 6237db0..e8efc36 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -22,6 +22,6 @@
     "vuepress": "2.0.0-beta.66"
   },
   "dependencies": {
-    "vue-zoomable": "^1.1.3"
+    "vue-zoomable": "^1.1"
   }
 }
\ No newline at end of file
diff --git a/docs/src/.vuepress/.cache/deps/_metadata.json b/docs/src/.vuepress/.cache/deps/_metadata.json
index 9d6d397..76e3da3 100644
--- a/docs/src/.vuepress/.cache/deps/_metadata.json
+++ b/docs/src/.vuepress/.cache/deps/_metadata.json
@@ -1,35 +1,41 @@
 {
-  "hash": "68b3f5e5",
-  "browserHash": "7290a27e",
+  "hash": "37e6c00c",
+  "browserHash": "18f6553b",
   "optimized": {
     "@vue/devtools-api": {
       "src": "../../../../node_modules/.pnpm/@vue+devtools-api@6.5.0/node_modules/@vue/devtools-api/lib/esm/index.js",
       "file": "@vue_devtools-api.js",
-      "fileHash": "0986c0db",
+      "fileHash": "89d88f26",
       "needsInterop": false
     },
     "@vuepress/shared": {
       "src": "../../../../node_modules/.pnpm/@vuepress+shared@2.0.0-beta.66/node_modules/@vuepress/shared/dist/index.js",
       "file": "@vuepress_shared.js",
-      "fileHash": "59941662",
+      "fileHash": "ba68d25d",
       "needsInterop": false
     },
     "@vueuse/core": {
       "src": "../../../../node_modules/.pnpm/@vueuse+core@10.3.0_vue@3.3.4/node_modules/@vueuse/core/index.mjs",
       "file": "@vueuse_core.js",
-      "fileHash": "1abe57d8",
+      "fileHash": "24141d58",
       "needsInterop": false
     },
     "vue": {
       "src": "../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "6b828bb5",
+      "fileHash": "b910b2bd",
       "needsInterop": false
     },
     "vue-router": {
       "src": "../../../../node_modules/.pnpm/vue-router@4.2.4_vue@3.3.4/node_modules/vue-router/dist/vue-router.esm-bundler.js",
       "file": "vue-router.js",
-      "fileHash": "bceea853",
+      "fileHash": "8b5e06f9",
+      "needsInterop": false
+    },
+    "vue-zoomable": {
+      "src": "../../../../node_modules/.pnpm/file+..+vue-zoomable-1.1.5.tgz_vue@3.3.4/node_modules/vue-zoomable/dist/vue-zoomable.mjs",
+      "file": "vue-zoomable.js",
+      "fileHash": "51206eea",
       "needsInterop": false
     }
   },
diff --git a/docs/src/.vuepress/.cache/deps/vue-zoomable.js b/docs/src/.vuepress/.cache/deps/vue-zoomable.js
new file mode 100644
index 0000000..b60dcab
--- /dev/null
+++ b/docs/src/.vuepress/.cache/deps/vue-zoomable.js
@@ -0,0 +1,674 @@
+import {
+  computed,
+  createApp,
+  createBaseVNode,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  createStaticVNode,
+  defineComponent,
+  inject,
+  onMounted,
+  openBlock,
+  popScopeId,
+  pushScopeId,
+  ref,
+  renderSlot,
+  unref,
+  watch,
+  withModifiers
+} from "./chunk-3TUUMKET.js";
+import {
+  normalizeClass,
+  toDisplayString
+} from "./chunk-L52MBEYQ.js";
+
+// node_modules/.pnpm/file+..+vue-zoomable-1.1.5.tgz_vue@3.3.4/node_modules/vue-zoomable/dist/vue-zoomable.mjs
+function q(t, a, e, o, i) {
+  let u = {
+    x: 0,
+    y: 0
+  };
+  function d(n) {
+    t.mouseEnabled && (u = {
+      x: n.clientX,
+      y: n.clientY
+    }, window.addEventListener("mousemove", m), window.addEventListener("mouseup", () => {
+      window.removeEventListener("mousemove", m);
+    }));
+  }
+  function m(n) {
+    if (!t.panEnabled)
+      return;
+    let c = {
+      x: n.clientX - u.x,
+      y: n.clientY - u.y
+    };
+    e.value = {
+      x: e.value.x + c.x,
+      y: e.value.y + c.y
+    }, u = {
+      x: n.clientX,
+      y: n.clientY
+    };
+    let v = {
+      zoom: o.value,
+      pan: {
+        x: e.value.x,
+        y: e.value.y,
+        deltaX: c.x,
+        deltaY: c.y
+      },
+      type: "mouse"
+    };
+    a("panned", v);
+  }
+  function s() {
+    if (!t.dblClickEnabled || !t.zoomEnabled)
+      return;
+    let n = o.value + t.dblClickZoomStep;
+    if (n == t.maxZoom)
+      return;
+    n > t.maxZoom ? o.value = t.maxZoom : o.value = n;
+    let c = {
+      zoom: n,
+      pan: {
+        x: e.value.x,
+        y: e.value.y,
+        deltaX: 0,
+        deltaY: 0
+      },
+      type: "dblClick"
+    };
+    a("zoom", c);
+  }
+  return {
+    onMouseDown: d,
+    onDblClick: s
+  };
+}
+function F(t, a, e, o, i) {
+  let u = {
+    x: 0,
+    y: 0
+  };
+  function d(s) {
+    if (!t.touchEnabled)
+      return;
+    let n = s.changedTouches.item(s.changedTouches.length - 1);
+    n && (u = {
+      x: n.clientX,
+      y: n.clientY
+    }, window.addEventListener("touchmove", m, { passive: false }), window.addEventListener("touchend", (c) => {
+      window.removeEventListener("touchmove", m), c.preventDefault();
+    }));
+  }
+  function m(s) {
+    if (!t.panEnabled)
+      return;
+    let n = s.changedTouches.item(s.changedTouches.length - 1);
+    if (!n)
+      return;
+    let c = {
+      x: n.clientX - u.x,
+      y: n.clientY - u.y
+    };
+    e.value = {
+      x: e.value.x + c.x,
+      y: e.value.y + c.y
+    }, u = {
+      x: n.clientX,
+      y: n.clientY
+    };
+    let v = {
+      zoom: o.value,
+      pan: {
+        x: e.value.x,
+        y: e.value.y,
+        deltaX: c.x,
+        deltaY: c.y
+      },
+      type: "touch"
+    };
+    a("panned", v), s.preventDefault();
+  }
+  return {
+    onTouchStart: d
+  };
+}
+function U(t, a, e, o, i, u) {
+  function d(m) {
+    if (!t.wheelEnabled || !t.zoomEnabled)
+      return;
+    let s = o.value + t.dblClickZoomStep * m.deltaY / Math.abs(m.deltaY);
+    if (t.enableWheelOnKey !== void 0 && !i.value.has(t.enableWheelOnKey)) {
+      u();
+      return;
+    }
+    if (s > t.maxZoom)
+      o.value = t.maxZoom;
+    else {
+      if (s == t.maxZoom || s == t.minZoom || isNaN(s))
+        return;
+      s < t.minZoom ? o.value = t.minZoom : o.value = s;
+    }
+    console.log("Wheel: ", s, m);
+    let n = {
+      zoom: o.value,
+      pan: {
+        x: e.value.x,
+        y: e.value.y,
+        deltaX: 0,
+        deltaY: 0
+      },
+      type: "wheel"
+    };
+    a("zoom", n);
+  }
+  return {
+    onWheel: d
+  };
+}
+function G(t, a, e, o) {
+  const i = "controll_button", u = {
+    up: { x: 0, y: t.buttonPanStep },
+    right: { x: -t.buttonPanStep, y: 0 },
+    down: { x: 0, y: -t.buttonPanStep },
+    left: { x: t.buttonPanStep, y: 0 }
+  }, d = {
+    in: t.buttonZoomStep,
+    out: -t.buttonZoomStep
+  };
+  let m = function(v) {
+    const y = v.currentTarget;
+    return y ? y.getAttribute("data-direction") : (console.warn("The target of the event is null, which shouldn't be the case."), null);
+  };
+  function s(v) {
+    const y = m(v);
+    if (!y)
+      return;
+    if (!(y in u)) {
+      console.error("The direction " + y + " doesn't exist, and this really should not happen.");
+      return;
+    }
+    const h = u[y];
+    e.value = {
+      x: e.value.x + h.x,
+      y: e.value.y + h.y
+    };
+    let x = {
+      zoom: o.value,
+      pan: {
+        x: e.value.x,
+        y: e.value.y,
+        deltaX: h.x,
+        deltaY: h.y
+      },
+      type: i
+    };
+    a("panned", x);
+  }
+  function n(v) {
+    const y = m(v);
+    if (!y)
+      return;
+    if (!(y in d)) {
+      console.error("The direction " + y + " doesn't exist, and this really should not happen.");
+      return;
+    }
+    const h = d[y];
+    let x = o.value + h;
+    if (x == t.maxZoom || x == t.minZoom)
+      return;
+    x > t.maxZoom ? o.value = t.maxZoom : x < t.minZoom ? o.value = t.minZoom : o.value = x;
+    let k = {
+      zoom: o.value,
+      pan: {
+        x: e.value.x,
+        y: e.value.y,
+        deltaX: 0,
+        deltaY: 0
+      },
+      type: i
+    };
+    a("zoom", k);
+  }
+  function c() {
+    o.value = t.initialZoom, a("zoom", {
+      zoom: o.value,
+      pan: {
+        x: e.value.x,
+        y: e.value.y,
+        deltaX: 0,
+        deltaY: 0
+      },
+      type: i
+    });
+    let v = {
+      x: t.initialPanX - e.value.x,
+      y: t.initialPanY - e.value.y
+    };
+    e.value = {
+      x: t.initialPanX,
+      y: t.initialPanY
+    }, a("panned", {
+      zoom: o.value,
+      pan: {
+        x: e.value.x,
+        y: e.value.y,
+        deltaX: v.x,
+        deltaY: v.y
+      },
+      type: i
+    });
+  }
+  return {
+    onPan: s,
+    onZoom: n,
+    onHome: c
+  };
+}
+var b = (t) => (pushScopeId("data-v-6c8f1aa4"), t = t(), popScopeId(), t);
+var J = { class: "controll" };
+var Q = { class: "controll__item controll__item--circle" };
+var R = { class: "controll__pan controll__item--circle__inner" };
+var ee = { class: "controll__pan__up controll__item--circle__inner__up" };
+var te = b(() => createBaseVNode("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "feather feather-chevron-up"
+}, [
+  createBaseVNode("polyline", { points: "18 15 12 9 6 15" })
+], -1));
+var oe = [
+  te
+];
+var ne = { class: "controll__pan__right controll__item--circle__inner__right" };
+var le = b(() => createBaseVNode("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "feather feather-chevron-right"
+}, [
+  createBaseVNode("polyline", { points: "9 18 15 12 9 6" })
+], -1));
+var ie = [
+  le
+];
+var ae = { class: "controll__pan__down controll__item--circle__inner__down" };
+var re = b(() => createBaseVNode("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "feather feather-chevron-down"
+}, [
+  createBaseVNode("polyline", { points: "6 9 12 15 18 9" })
+], -1));
+var ue = [
+  re
+];
+var se = { class: "controll__pan__left controll__item--circle__inner__left" };
+var ce = b(() => createBaseVNode("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "feather feather-chevron-left"
+}, [
+  createBaseVNode("polyline", { points: "15 18 9 12 15 6" })
+], -1));
+var de = [
+  ce
+];
+var me = { class: "controll__home controll__item controll__item--list-item" };
+var ve = createStaticVNode('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize-2" data-v-6c8f1aa4><polyline points="4 14 10 14 10 20" data-v-6c8f1aa4></polyline><polyline points="20 10 14 10 14 4" data-v-6c8f1aa4></polyline><line x1="14" y1="10" x2="21" y2="3" data-v-6c8f1aa4></line><line x1="3" y1="21" x2="10" y2="14" data-v-6c8f1aa4></line></svg>', 1);
+var ye = [
+  ve
+];
+var _e = { class: "controll__zoom-in controll__item controll__item--list-item" };
+var fe = createStaticVNode('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zoom-in" data-v-6c8f1aa4><circle cx="11" cy="11" r="8" data-v-6c8f1aa4></circle><line x1="21" y1="21" x2="16.65" y2="16.65" data-v-6c8f1aa4></line><line x1="11" y1="8" x2="11" y2="14" data-v-6c8f1aa4></line><line x1="8" y1="11" x2="14" y2="11" data-v-6c8f1aa4></line></svg>', 1);
+var he = [
+  fe
+];
+var xe = { class: "controll__zoom-in controll__item controll__item--list-item" };
+var we = b(() => createBaseVNode("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  class: "feather feather-zoom-out"
+}, [
+  createBaseVNode("circle", {
+    cx: "11",
+    cy: "11",
+    r: "8"
+  }),
+  createBaseVNode("line", {
+    x1: "21",
+    y1: "21",
+    x2: "16.65",
+    y2: "16.65"
+  }),
+  createBaseVNode("line", {
+    x1: "8",
+    y1: "11",
+    x2: "14",
+    y2: "11"
+  })
+], -1));
+var pe = [
+  we
+];
+var be = defineComponent({
+  __name: "ControllButtons",
+  emits: ["button-pan", "button-zoom", "button-home"],
+  setup(t, { emit: a }) {
+    return (e, o) => (openBlock(), createElementBlock("div", {
+      class: "controll__buttons",
+      onDblclick: o[7] || (o[7] = withModifiers(() => {
+      }, ["stop"])),
+      onMousedown: o[8] || (o[8] = withModifiers(() => {
+      }, ["stop"]))
+    }, [
+      createBaseVNode("ul", J, [
+        createBaseVNode("li", Q, [
+          createBaseVNode("ul", R, [
+            createBaseVNode("li", ee, [
+              createBaseVNode("a", {
+                onClick: o[0] || (o[0] = (i) => a("button-pan", i)),
+                "data-direction": "up"
+              }, oe)
+            ]),
+            createBaseVNode("li", ne, [
+              createBaseVNode("a", {
+                onClick: o[1] || (o[1] = (i) => a("button-pan", i)),
+                "data-direction": "right"
+              }, ie)
+            ]),
+            createBaseVNode("li", ae, [
+              createBaseVNode("a", {
+                onClick: o[2] || (o[2] = (i) => a("button-pan", i)),
+                "data-direction": "down"
+              }, ue)
+            ]),
+            createBaseVNode("li", se, [
+              createBaseVNode("a", {
+                onClick: o[3] || (o[3] = (i) => a("button-pan", i)),
+                "data-direction": "left"
+              }, de)
+            ])
+          ])
+        ]),
+        createBaseVNode("li", me, [
+          createBaseVNode("a", {
+            onClick: o[4] || (o[4] = (i) => {
+              a("button-home");
+            })
+          }, ye)
+        ]),
+        createBaseVNode("li", _e, [
+          createBaseVNode("a", {
+            onClick: o[5] || (o[5] = (i) => {
+              a("button-zoom", i);
+            }),
+            "data-direction": "in"
+          }, he)
+        ]),
+        createBaseVNode("li", xe, [
+          createBaseVNode("a", {
+            onClick: o[6] || (o[6] = (i) => {
+              a("button-zoom", i);
+            }),
+            "data-direction": "out"
+          }, pe)
+        ])
+      ])
+    ], 32));
+  }
+});
+var z = (t, a) => {
+  const e = t.__vccOpts || t;
+  for (const [o, i] of a)
+    e[o] = i;
+  return e;
+};
+var ge = z(be, [["__scopeId", "data-v-6c8f1aa4"]]);
+var ke = defineComponent({
+  __name: "ScrollOverlay",
+  props: {
+    enableWheelOnKey: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(t) {
+    const a = t, { hideOverlay: e } = inject("hideOverlay");
+    return (o, i) => (openBlock(), createElementBlock("div", {
+      class: normalizeClass(["overlay", { hidden: unref(e) }])
+    }, [
+      createBaseVNode("p", null, "Use '" + toDisplayString(a.enableWheelOnKey) + "' + 'scroll' to zoom", 1)
+    ], 2));
+  }
+});
+var Ze = z(ke, [["__scopeId", "data-v-49742904"]]);
+var Ce = defineComponent({
+  __name: "VueZoomable",
+  props: {
+    zoom: {
+      type: Number,
+      default: null
+    },
+    pan: {
+      type: Object,
+      default: null
+    },
+    selector: {
+      type: String,
+      default: "* > *"
+    },
+    maxZoom: {
+      type: Number,
+      default: 3
+    },
+    minZoom: {
+      type: Number,
+      default: 0.5
+    },
+    initialPanX: {
+      type: Number,
+      default: 0
+    },
+    initialPanY: {
+      type: Number,
+      default: 0
+    },
+    initialZoom: {
+      type: Number,
+      default: 0.5
+    },
+    dblClickZoomStep: {
+      type: Number,
+      default: 0.4
+    },
+    wheelZoomStep: {
+      type: Number,
+      default: 0.05
+    },
+    panEnabled: {
+      type: Boolean,
+      default: true
+    },
+    zoomEnabled: {
+      type: Boolean,
+      default: true
+    },
+    mouseEnabled: {
+      type: Boolean,
+      default: true
+    },
+    touchEnabled: {
+      type: Boolean,
+      default: true
+    },
+    dblClickEnabled: {
+      type: Boolean,
+      default: true
+    },
+    wheelEnabled: {
+      type: Boolean,
+      default: true
+    },
+    enableControllButton: {
+      type: Boolean,
+      default: false
+    },
+    buttonPanStep: {
+      type: Number,
+      default: 15
+    },
+    buttonZoomStep: {
+      type: Number,
+      default: 0.1
+    },
+    enableWheelOnKey: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["panned", "zoom", "update:zoom", "update:pan"],
+  setup(t, { emit: a }) {
+    const e = t, o = ref(true);
+    let i = ref(), u = ref(e.minZoom);
+    e.initialZoom >= e.minZoom && e.initialZoom <= e.maxZoom && (u.value = e.initialZoom), e.zoom && (u.value = e.zoom);
+    let d = ref({
+      x: e.pan != null ? e.pan.x : e.initialPanX,
+      y: e.pan != null ? e.pan.y : e.initialPanY
+    });
+    watch(
+      () => e.zoom,
+      () => {
+        isNaN(e.zoom) || (u.value = e.zoom);
+      }
+    ), watch(
+      () => e.pan,
+      () => {
+        e.pan && (d.value.x = e.pan.x, d.value.x = e.pan.y);
+      }
+    );
+    function m(r, _) {
+      r === "zoom" ? a("update:zoom", _.zoom) : r === "panned" && a("update:pan", _.pan), a(r, _);
+    }
+    let s = computed(() => `translate(${d.value.x}px, ${d.value.y}px) scale(${u.value})`), n = null;
+    function c() {
+      var r;
+      n || (n = (r = i.value) == null ? void 0 : r.querySelector(e.selector)), n && (n.style.transform = s.value);
+    }
+    watch(
+      s,
+      () => {
+        c();
+      },
+      {
+        flush: "post"
+      }
+    ), onMounted(() => {
+      const r = document.createElement("div"), _ = createApp(Ze, { enableWheelOnKey: e.enableWheelOnKey });
+      _.provide("hideOverlay", { hideOverlay: o }), _.mount(r), i.value.appendChild(r), c();
+    });
+    const v = ref(/* @__PURE__ */ new Set());
+    window.addEventListener(
+      "wheel",
+      (r) => {
+        !y.value || e.enableWheelOnKey !== "Control" || r.ctrlKey && r.preventDefault();
+      },
+      { passive: false }
+    ), document.addEventListener("keydown", (r) => {
+      v.value.add(r.key), r.key === e.enableWheelOnKey && (o.value = true);
+    }), document.addEventListener("keyup", (r) => {
+      v.value.delete(r.key);
+    });
+    const y = ref(false);
+    function h() {
+      y.value = true;
+    }
+    function x() {
+      o.value = true, y.value = false;
+    }
+    function k() {
+      o.value = false;
+    }
+    function O(r) {
+      o.value = r;
+    }
+    let Z = q(e, m, d, u), Y = F(e, m, d, u), M = U(e, m, d, u, v, k), C = G(e, m, d, u);
+    function N(r) {
+      O(true), Z.onMouseDown(r);
+    }
+    return (r, _) => (openBlock(), createElementBlock("div", {
+      ref_key: "container",
+      ref: i,
+      class: normalizeClass(["container", r.$style.container]),
+      onMousedown: N,
+      onDblclick: _[1] || (_[1] = //@ts-ignore
+      (...w) => unref(Z).onDblClick && unref(Z).onDblClick(...w)),
+      onTouchstart: _[2] || (_[2] = //@ts-ignore
+      (...w) => unref(Y).onTouchStart && unref(Y).onTouchStart(...w)),
+      onWheel: _[3] || (_[3] = //@ts-ignore
+      (...w) => unref(M).onWheel && unref(M).onWheel(...w)),
+      onMouseleave: x,
+      onMouseenter: h
+    }, [
+      renderSlot(r.$slots, "default"),
+      unref(e).enableControllButton ? (openBlock(), createBlock(ge, {
+        key: 0,
+        onButtonHome: unref(C).onHome,
+        onButtonPan: unref(C).onPan,
+        onButtonZoom: unref(C).onZoom,
+        onMousedown: _[0] || (_[0] = (w) => {
+          O(true);
+        })
+      }, null, 8, ["onButtonHome", "onButtonPan", "onButtonZoom"])) : createCommentVNode("", true)
+    ], 34));
+  }
+});
+var Se = "_container_15bed_3";
+var Be = {
+  container: Se
+};
+var Ee = {
+  $style: Be
+};
+var Oe = z(Ce, [["__cssModules", Ee]]);
+export {
+  Oe as default
+};
+//# sourceMappingURL=vue-zoomable.js.map
diff --git a/docs/src/.vuepress/.cache/deps/vue-zoomable.js.map b/docs/src/.vuepress/.cache/deps/vue-zoomable.js.map
new file mode 100644
index 0000000..88feeb3
--- /dev/null
+++ b/docs/src/.vuepress/.cache/deps/vue-zoomable.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../node_modules/.pnpm/file+..+vue-zoomable-1.1.5.tgz_vue@3.3.4/node_modules/vue-zoomable/dist/vue-zoomable.mjs"],
+  "sourcesContent": ["import { defineComponent as B, openBlock as g, createElementBlock as E, withModifiers as X, createElementVNode as l, createStaticVNode as P, pushScopeId as W, popScopeId as D, inject as K, normalizeClass as T, unref as f, toDisplayString as L, ref as p, watch as S, computed as $, onMounted as j, createApp as I, renderSlot as H, createBlock as V, createCommentVNode as A } from \"vue\";\nfunction q(t, a, e, o, i) {\n  let u = {\n    x: 0,\n    y: 0\n  };\n  function d(n) {\n    t.mouseEnabled && (u = {\n      x: n.clientX,\n      y: n.clientY\n    }, window.addEventListener(\"mousemove\", m), window.addEventListener(\"mouseup\", () => {\n      window.removeEventListener(\"mousemove\", m);\n    }));\n  }\n  function m(n) {\n    if (!t.panEnabled)\n      return;\n    let c = {\n      x: n.clientX - u.x,\n      y: n.clientY - u.y\n    };\n    e.value = {\n      x: e.value.x + c.x,\n      y: e.value.y + c.y\n    }, u = {\n      x: n.clientX,\n      y: n.clientY\n    };\n    let v = {\n      zoom: o.value,\n      pan: {\n        x: e.value.x,\n        y: e.value.y,\n        deltaX: c.x,\n        deltaY: c.y\n      },\n      type: \"mouse\"\n    };\n    a(\"panned\", v);\n  }\n  function s() {\n    if (!t.dblClickEnabled || !t.zoomEnabled)\n      return;\n    let n = o.value + t.dblClickZoomStep;\n    if (n == t.maxZoom)\n      return;\n    n > t.maxZoom ? o.value = t.maxZoom : o.value = n;\n    let c = {\n      zoom: n,\n      pan: {\n        x: e.value.x,\n        y: e.value.y,\n        deltaX: 0,\n        deltaY: 0\n      },\n      type: \"dblClick\"\n    };\n    a(\"zoom\", c);\n  }\n  return {\n    onMouseDown: d,\n    onDblClick: s\n  };\n}\nfunction F(t, a, e, o, i) {\n  let u = {\n    x: 0,\n    y: 0\n  };\n  function d(s) {\n    if (!t.touchEnabled)\n      return;\n    let n = s.changedTouches.item(s.changedTouches.length - 1);\n    n && (u = {\n      x: n.clientX,\n      y: n.clientY\n    }, window.addEventListener(\"touchmove\", m, { passive: !1 }), window.addEventListener(\"touchend\", (c) => {\n      window.removeEventListener(\"touchmove\", m), c.preventDefault();\n    }));\n  }\n  function m(s) {\n    if (!t.panEnabled)\n      return;\n    let n = s.changedTouches.item(s.changedTouches.length - 1);\n    if (!n)\n      return;\n    let c = {\n      x: n.clientX - u.x,\n      y: n.clientY - u.y\n    };\n    e.value = {\n      x: e.value.x + c.x,\n      y: e.value.y + c.y\n    }, u = {\n      x: n.clientX,\n      y: n.clientY\n    };\n    let v = {\n      zoom: o.value,\n      pan: {\n        x: e.value.x,\n        y: e.value.y,\n        deltaX: c.x,\n        deltaY: c.y\n      },\n      type: \"touch\"\n    };\n    a(\"panned\", v), s.preventDefault();\n  }\n  return {\n    onTouchStart: d\n  };\n}\nfunction U(t, a, e, o, i, u) {\n  function d(m) {\n    if (!t.wheelEnabled || !t.zoomEnabled)\n      return;\n    let s = o.value + t.dblClickZoomStep * m.deltaY / Math.abs(m.deltaY);\n    if (t.enableWheelOnKey !== void 0 && !i.value.has(t.enableWheelOnKey)) {\n      u();\n      return;\n    }\n    if (s > t.maxZoom)\n      o.value = t.maxZoom;\n    else {\n      if (s == t.maxZoom || s == t.minZoom || isNaN(s))\n        return;\n      s < t.minZoom ? o.value = t.minZoom : o.value = s;\n    }\n    console.log(\"Wheel: \", s, m);\n    let n = {\n      zoom: o.value,\n      pan: {\n        x: e.value.x,\n        y: e.value.y,\n        deltaX: 0,\n        deltaY: 0\n      },\n      type: \"wheel\"\n    };\n    a(\"zoom\", n);\n  }\n  return {\n    onWheel: d\n  };\n}\nfunction G(t, a, e, o) {\n  const i = \"controll_button\", u = {\n    up: { x: 0, y: t.buttonPanStep },\n    right: { x: -t.buttonPanStep, y: 0 },\n    down: { x: 0, y: -t.buttonPanStep },\n    left: { x: t.buttonPanStep, y: 0 }\n  }, d = {\n    in: t.buttonZoomStep,\n    out: -t.buttonZoomStep\n  };\n  let m = function(v) {\n    const y = v.currentTarget;\n    return y ? y.getAttribute(\"data-direction\") : (console.warn(\"The target of the event is null, which shouldn't be the case.\"), null);\n  };\n  function s(v) {\n    const y = m(v);\n    if (!y)\n      return;\n    if (!(y in u)) {\n      console.error(\"The direction \" + y + \" doesn't exist, and this really should not happen.\");\n      return;\n    }\n    const h = u[y];\n    e.value = {\n      x: e.value.x + h.x,\n      y: e.value.y + h.y\n    };\n    let x = {\n      zoom: o.value,\n      pan: {\n        x: e.value.x,\n        y: e.value.y,\n        deltaX: h.x,\n        deltaY: h.y\n      },\n      type: i\n    };\n    a(\"panned\", x);\n  }\n  function n(v) {\n    const y = m(v);\n    if (!y)\n      return;\n    if (!(y in d)) {\n      console.error(\"The direction \" + y + \" doesn't exist, and this really should not happen.\");\n      return;\n    }\n    const h = d[y];\n    let x = o.value + h;\n    if (x == t.maxZoom || x == t.minZoom)\n      return;\n    x > t.maxZoom ? o.value = t.maxZoom : x < t.minZoom ? o.value = t.minZoom : o.value = x;\n    let k = {\n      zoom: o.value,\n      pan: {\n        x: e.value.x,\n        y: e.value.y,\n        deltaX: 0,\n        deltaY: 0\n      },\n      type: i\n    };\n    a(\"zoom\", k);\n  }\n  function c() {\n    o.value = t.initialZoom, a(\"zoom\", {\n      zoom: o.value,\n      pan: {\n        x: e.value.x,\n        y: e.value.y,\n        deltaX: 0,\n        deltaY: 0\n      },\n      type: i\n    });\n    let v = {\n      x: t.initialPanX - e.value.x,\n      y: t.initialPanY - e.value.y\n    };\n    e.value = {\n      x: t.initialPanX,\n      y: t.initialPanY\n    }, a(\"panned\", {\n      zoom: o.value,\n      pan: {\n        x: e.value.x,\n        y: e.value.y,\n        deltaX: v.x,\n        deltaY: v.y\n      },\n      type: i\n    });\n  }\n  return {\n    onPan: s,\n    onZoom: n,\n    onHome: c\n  };\n}\nconst b = (t) => (W(\"data-v-6c8f1aa4\"), t = t(), D(), t), J = { class: \"controll\" }, Q = { class: \"controll__item controll__item--circle\" }, R = { class: \"controll__pan controll__item--circle__inner\" }, ee = { class: \"controll__pan__up controll__item--circle__inner__up\" }, te = /* @__PURE__ */ b(() => /* @__PURE__ */ l(\"svg\", {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  width: \"24\",\n  height: \"24\",\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  \"stroke-width\": \"2\",\n  \"stroke-linecap\": \"round\",\n  \"stroke-linejoin\": \"round\",\n  class: \"feather feather-chevron-up\"\n}, [\n  /* @__PURE__ */ l(\"polyline\", { points: \"18 15 12 9 6 15\" })\n], -1)), oe = [\n  te\n], ne = { class: \"controll__pan__right controll__item--circle__inner__right\" }, le = /* @__PURE__ */ b(() => /* @__PURE__ */ l(\"svg\", {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  width: \"24\",\n  height: \"24\",\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  \"stroke-width\": \"2\",\n  \"stroke-linecap\": \"round\",\n  \"stroke-linejoin\": \"round\",\n  class: \"feather feather-chevron-right\"\n}, [\n  /* @__PURE__ */ l(\"polyline\", { points: \"9 18 15 12 9 6\" })\n], -1)), ie = [\n  le\n], ae = { class: \"controll__pan__down controll__item--circle__inner__down\" }, re = /* @__PURE__ */ b(() => /* @__PURE__ */ l(\"svg\", {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  width: \"24\",\n  height: \"24\",\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  \"stroke-width\": \"2\",\n  \"stroke-linecap\": \"round\",\n  \"stroke-linejoin\": \"round\",\n  class: \"feather feather-chevron-down\"\n}, [\n  /* @__PURE__ */ l(\"polyline\", { points: \"6 9 12 15 18 9\" })\n], -1)), ue = [\n  re\n], se = { class: \"controll__pan__left controll__item--circle__inner__left\" }, ce = /* @__PURE__ */ b(() => /* @__PURE__ */ l(\"svg\", {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  width: \"24\",\n  height: \"24\",\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  \"stroke-width\": \"2\",\n  \"stroke-linecap\": \"round\",\n  \"stroke-linejoin\": \"round\",\n  class: \"feather feather-chevron-left\"\n}, [\n  /* @__PURE__ */ l(\"polyline\", { points: \"15 18 9 12 15 6\" })\n], -1)), de = [\n  ce\n], me = { class: \"controll__home controll__item controll__item--list-item\" }, ve = /* @__PURE__ */ P('<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-minimize-2\" data-v-6c8f1aa4><polyline points=\"4 14 10 14 10 20\" data-v-6c8f1aa4></polyline><polyline points=\"20 10 14 10 14 4\" data-v-6c8f1aa4></polyline><line x1=\"14\" y1=\"10\" x2=\"21\" y2=\"3\" data-v-6c8f1aa4></line><line x1=\"3\" y1=\"21\" x2=\"10\" y2=\"14\" data-v-6c8f1aa4></line></svg>', 1), ye = [\n  ve\n], _e = { class: \"controll__zoom-in controll__item controll__item--list-item\" }, fe = /* @__PURE__ */ P('<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-zoom-in\" data-v-6c8f1aa4><circle cx=\"11\" cy=\"11\" r=\"8\" data-v-6c8f1aa4></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" data-v-6c8f1aa4></line><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\" data-v-6c8f1aa4></line><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" data-v-6c8f1aa4></line></svg>', 1), he = [\n  fe\n], xe = { class: \"controll__zoom-in controll__item controll__item--list-item\" }, we = /* @__PURE__ */ b(() => /* @__PURE__ */ l(\"svg\", {\n  xmlns: \"http://www.w3.org/2000/svg\",\n  width: \"24\",\n  height: \"24\",\n  viewBox: \"0 0 24 24\",\n  fill: \"none\",\n  stroke: \"currentColor\",\n  \"stroke-width\": \"2\",\n  \"stroke-linecap\": \"round\",\n  \"stroke-linejoin\": \"round\",\n  class: \"feather feather-zoom-out\"\n}, [\n  /* @__PURE__ */ l(\"circle\", {\n    cx: \"11\",\n    cy: \"11\",\n    r: \"8\"\n  }),\n  /* @__PURE__ */ l(\"line\", {\n    x1: \"21\",\n    y1: \"21\",\n    x2: \"16.65\",\n    y2: \"16.65\"\n  }),\n  /* @__PURE__ */ l(\"line\", {\n    x1: \"8\",\n    y1: \"11\",\n    x2: \"14\",\n    y2: \"11\"\n  })\n], -1)), pe = [\n  we\n], be = /* @__PURE__ */ B({\n  __name: \"ControllButtons\",\n  emits: [\"button-pan\", \"button-zoom\", \"button-home\"],\n  setup(t, { emit: a }) {\n    return (e, o) => (g(), E(\"div\", {\n      class: \"controll__buttons\",\n      onDblclick: o[7] || (o[7] = X(() => {\n      }, [\"stop\"])),\n      onMousedown: o[8] || (o[8] = X(() => {\n      }, [\"stop\"]))\n    }, [\n      l(\"ul\", J, [\n        l(\"li\", Q, [\n          l(\"ul\", R, [\n            l(\"li\", ee, [\n              l(\"a\", {\n                onClick: o[0] || (o[0] = (i) => a(\"button-pan\", i)),\n                \"data-direction\": \"up\"\n              }, oe)\n            ]),\n            l(\"li\", ne, [\n              l(\"a\", {\n                onClick: o[1] || (o[1] = (i) => a(\"button-pan\", i)),\n                \"data-direction\": \"right\"\n              }, ie)\n            ]),\n            l(\"li\", ae, [\n              l(\"a\", {\n                onClick: o[2] || (o[2] = (i) => a(\"button-pan\", i)),\n                \"data-direction\": \"down\"\n              }, ue)\n            ]),\n            l(\"li\", se, [\n              l(\"a\", {\n                onClick: o[3] || (o[3] = (i) => a(\"button-pan\", i)),\n                \"data-direction\": \"left\"\n              }, de)\n            ])\n          ])\n        ]),\n        l(\"li\", me, [\n          l(\"a\", {\n            onClick: o[4] || (o[4] = (i) => {\n              a(\"button-home\");\n            })\n          }, ye)\n        ]),\n        l(\"li\", _e, [\n          l(\"a\", {\n            onClick: o[5] || (o[5] = (i) => {\n              a(\"button-zoom\", i);\n            }),\n            \"data-direction\": \"in\"\n          }, he)\n        ]),\n        l(\"li\", xe, [\n          l(\"a\", {\n            onClick: o[6] || (o[6] = (i) => {\n              a(\"button-zoom\", i);\n            }),\n            \"data-direction\": \"out\"\n          }, pe)\n        ])\n      ])\n    ], 32));\n  }\n});\nconst z = (t, a) => {\n  const e = t.__vccOpts || t;\n  for (const [o, i] of a)\n    e[o] = i;\n  return e;\n}, ge = /* @__PURE__ */ z(be, [[\"__scopeId\", \"data-v-6c8f1aa4\"]]), ke = /* @__PURE__ */ B({\n  __name: \"ScrollOverlay\",\n  props: {\n    enableWheelOnKey: {\n      type: String,\n      default: void 0\n    }\n  },\n  setup(t) {\n    const a = t, { hideOverlay: e } = K(\"hideOverlay\");\n    return (o, i) => (g(), E(\"div\", {\n      class: T([\"overlay\", { hidden: f(e) }])\n    }, [\n      l(\"p\", null, \"Use '\" + L(a.enableWheelOnKey) + \"' + 'scroll' to zoom\", 1)\n    ], 2));\n  }\n});\nconst Ze = /* @__PURE__ */ z(ke, [[\"__scopeId\", \"data-v-49742904\"]]), Ce = /* @__PURE__ */ B({\n  __name: \"VueZoomable\",\n  props: {\n    zoom: {\n      type: Number,\n      default: null\n    },\n    pan: {\n      type: Object,\n      default: null\n    },\n    selector: {\n      type: String,\n      default: \"* > *\"\n    },\n    maxZoom: {\n      type: Number,\n      default: 3\n    },\n    minZoom: {\n      type: Number,\n      default: 0.5\n    },\n    initialPanX: {\n      type: Number,\n      default: 0\n    },\n    initialPanY: {\n      type: Number,\n      default: 0\n    },\n    initialZoom: {\n      type: Number,\n      default: 0.5\n    },\n    dblClickZoomStep: {\n      type: Number,\n      default: 0.4\n    },\n    wheelZoomStep: {\n      type: Number,\n      default: 0.05\n    },\n    panEnabled: {\n      type: Boolean,\n      default: !0\n    },\n    zoomEnabled: {\n      type: Boolean,\n      default: !0\n    },\n    mouseEnabled: {\n      type: Boolean,\n      default: !0\n    },\n    touchEnabled: {\n      type: Boolean,\n      default: !0\n    },\n    dblClickEnabled: {\n      type: Boolean,\n      default: !0\n    },\n    wheelEnabled: {\n      type: Boolean,\n      default: !0\n    },\n    enableControllButton: {\n      type: Boolean,\n      default: !1\n    },\n    buttonPanStep: {\n      type: Number,\n      default: 15\n    },\n    buttonZoomStep: {\n      type: Number,\n      default: 0.1\n    },\n    enableWheelOnKey: {\n      type: String,\n      default: void 0\n    }\n  },\n  emits: [\"panned\", \"zoom\", \"update:zoom\", \"update:pan\"],\n  setup(t, { emit: a }) {\n    const e = t, o = p(!0);\n    let i = p(), u = p(e.minZoom);\n    e.initialZoom >= e.minZoom && e.initialZoom <= e.maxZoom && (u.value = e.initialZoom), e.zoom && (u.value = e.zoom);\n    let d = p({\n      x: e.pan != null ? e.pan.x : e.initialPanX,\n      y: e.pan != null ? e.pan.y : e.initialPanY\n    });\n    S(\n      () => e.zoom,\n      () => {\n        isNaN(e.zoom) || (u.value = e.zoom);\n      }\n    ), S(\n      () => e.pan,\n      () => {\n        e.pan && (d.value.x = e.pan.x, d.value.x = e.pan.y);\n      }\n    );\n    function m(r, _) {\n      r === \"zoom\" ? a(\"update:zoom\", _.zoom) : r === \"panned\" && a(\"update:pan\", _.pan), a(r, _);\n    }\n    let s = $(() => `translate(${d.value.x}px, ${d.value.y}px) scale(${u.value})`), n = null;\n    function c() {\n      var r;\n      n || (n = (r = i.value) == null ? void 0 : r.querySelector(e.selector)), n && (n.style.transform = s.value);\n    }\n    S(\n      s,\n      () => {\n        c();\n      },\n      {\n        flush: \"post\"\n      }\n    ), j(() => {\n      const r = document.createElement(\"div\"), _ = I(Ze, { enableWheelOnKey: e.enableWheelOnKey });\n      _.provide(\"hideOverlay\", { hideOverlay: o }), _.mount(r), i.value.appendChild(r), c();\n    });\n    const v = p(/* @__PURE__ */ new Set());\n    window.addEventListener(\n      \"wheel\",\n      (r) => {\n        !y.value || e.enableWheelOnKey !== \"Control\" || r.ctrlKey && r.preventDefault();\n      },\n      { passive: !1 }\n    ), document.addEventListener(\"keydown\", (r) => {\n      v.value.add(r.key), r.key === e.enableWheelOnKey && (o.value = !0);\n    }), document.addEventListener(\"keyup\", (r) => {\n      v.value.delete(r.key);\n    });\n    const y = p(!1);\n    function h() {\n      y.value = !0;\n    }\n    function x() {\n      o.value = !0, y.value = !1;\n    }\n    function k() {\n      o.value = !1;\n    }\n    function O(r) {\n      o.value = r;\n    }\n    let Z = q(e, m, d, u), Y = F(e, m, d, u), M = U(e, m, d, u, v, k), C = G(e, m, d, u);\n    function N(r) {\n      O(!0), Z.onMouseDown(r);\n    }\n    return (r, _) => (g(), E(\"div\", {\n      ref_key: \"container\",\n      ref: i,\n      class: T([\"container\", r.$style.container]),\n      onMousedown: N,\n      onDblclick: _[1] || (_[1] = //@ts-ignore\n      (...w) => f(Z).onDblClick && f(Z).onDblClick(...w)),\n      onTouchstart: _[2] || (_[2] = //@ts-ignore\n      (...w) => f(Y).onTouchStart && f(Y).onTouchStart(...w)),\n      onWheel: _[3] || (_[3] = //@ts-ignore\n      (...w) => f(M).onWheel && f(M).onWheel(...w)),\n      onMouseleave: x,\n      onMouseenter: h\n    }, [\n      H(r.$slots, \"default\"),\n      f(e).enableControllButton ? (g(), V(ge, {\n        key: 0,\n        onButtonHome: f(C).onHome,\n        onButtonPan: f(C).onPan,\n        onButtonZoom: f(C).onZoom,\n        onMousedown: _[0] || (_[0] = (w) => {\n          O(!0);\n        })\n      }, null, 8, [\"onButtonHome\", \"onButtonPan\", \"onButtonZoom\"])) : A(\"\", !0)\n    ], 34));\n  }\n}), Se = \"_container_15bed_3\", Be = {\n  container: Se\n}, Ee = {\n  $style: Be\n}, Oe = /* @__PURE__ */ z(Ce, [[\"__cssModules\", Ee]]);\nexport {\n  Oe as default\n};\n"],
+  "mappings": "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",
+  "names": []
+}
diff --git a/docs/src/.vuepress/.temp/internal/siteData.js b/docs/src/.vuepress/.temp/internal/siteData.js
index bb2942d..12b4e6a 100644
--- a/docs/src/.vuepress/.temp/internal/siteData.js
+++ b/docs/src/.vuepress/.temp/internal/siteData.js
@@ -1 +1,14 @@
 export const siteData = JSON.parse("{\"base\":\"/vue-zoomable/\",\"lang\":\"en-US\",\"title\":\"vue-zoomable\",\"description\":\"Tiny and high performance pan and zoom library for Vue 3 written in Typescript.\",\"head\":[[\"meta\",{\"name\":\"theme-color\",\"content\":\"#3eaf7c\"}],[\"meta\",{\"name\":\"apple-mobile-web-app-capable\",\"content\":\"yes\"}],[\"meta\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"black\"}]],\"locales\":{}}")
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updateSiteData) {
+    __VUE_HMR_RUNTIME__.updateSiteData(siteData)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ siteData }) => {
+    __VUE_HMR_RUNTIME__.updateSiteData(siteData)
+  })
+}
diff --git a/docs/src/.vuepress/.temp/internal/themeData.js b/docs/src/.vuepress/.temp/internal/themeData.js
index f23b207..528edad 100644
--- a/docs/src/.vuepress/.temp/internal/themeData.js
+++ b/docs/src/.vuepress/.temp/internal/themeData.js
@@ -1 +1,14 @@
 export const themeData = JSON.parse("{\"sidebar\":\"auto\",\"navbar\":[{\"text\":\"Guide\",\"link\":\"/guide/\"},{\"text\":\"Demos\",\"link\":\"/demos/\"},{\"text\":\"vue-zoomable\",\"link\":\"https://github.com/HassaanAkbar/vue-zoomable\"}],\"locales\":{\"/\":{\"selectLanguageName\":\"English\"}},\"colorMode\":\"auto\",\"colorModeSwitch\":true,\"logo\":null,\"repo\":null,\"selectLanguageText\":\"Languages\",\"selectLanguageAriaLabel\":\"Select language\",\"sidebarDepth\":2,\"editLink\":true,\"editLinkText\":\"Edit this page\",\"lastUpdated\":true,\"lastUpdatedText\":\"Last Updated\",\"contributors\":true,\"contributorsText\":\"Contributors\",\"notFound\":[\"There's nothing here.\",\"How did we get here?\",\"That's a Four-Oh-Four.\",\"Looks like we've got some broken links.\"],\"backToHome\":\"Take me home\",\"openInNewWindow\":\"open in new window\",\"toggleColorMode\":\"toggle color mode\",\"toggleSidebar\":\"toggle sidebar\"}")
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updateThemeData) {
+    __VUE_HMR_RUNTIME__.updateThemeData(themeData)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ themeData }) => {
+    __VUE_HMR_RUNTIME__.updateThemeData(themeData)
+  })
+}
diff --git a/docs/src/.vuepress/.temp/pages/404.html.js b/docs/src/.vuepress/.temp/pages/404.html.js
index 10c4ebe..ca2ba9c 100644
--- a/docs/src/.vuepress/.temp/pages/404.html.js
+++ b/docs/src/.vuepress/.temp/pages/404.html.js
@@ -1 +1,14 @@
 export const data = JSON.parse("{\"key\":\"v-3706649a\",\"path\":\"/404.html\",\"title\":\"\",\"lang\":\"en-US\",\"frontmatter\":{\"layout\":\"NotFound\"},\"headers\":[],\"git\":{},\"filePathRelative\":null}")
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}
diff --git a/docs/src/.vuepress/.temp/pages/demos/html-demo.html.js b/docs/src/.vuepress/.temp/pages/demos/html-demo.html.js
index 23b4d64..5d91ceb 100644
--- a/docs/src/.vuepress/.temp/pages/demos/html-demo.html.js
+++ b/docs/src/.vuepress/.temp/pages/demos/html-demo.html.js
@@ -1 +1,14 @@
 export const data = JSON.parse("{\"key\":\"v-fb746aa8\",\"path\":\"/demos/html-demo.html\",\"title\":\"\",\"lang\":\"en-US\",\"frontmatter\":{\"sidebar\":[{\"text\":\"SVG Content\",\"link\":\"./svg-demo\"},{\"text\":\"HTML Content\",\"link\":\"./html-demo\"}]},\"headers\":[],\"git\":{\"updatedTime\":1663439391000,\"contributors\":[{\"name\":\"Hassaan Akbar\",\"email\":\"hassaan.akbar@outlook.com\",\"commits\":3}]},\"filePathRelative\":\"demos/html-demo.md\"}")
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}
diff --git a/docs/src/.vuepress/.temp/pages/demos/index.html.js b/docs/src/.vuepress/.temp/pages/demos/index.html.js
index abfee6a..b200edf 100644
--- a/docs/src/.vuepress/.temp/pages/demos/index.html.js
+++ b/docs/src/.vuepress/.temp/pages/demos/index.html.js
@@ -1 +1,14 @@
 export const data = JSON.parse("{\"key\":\"v-7a043378\",\"path\":\"/demos/\",\"title\":\"Demos\",\"lang\":\"en-US\",\"frontmatter\":{\"sidebar\":[{\"text\":\"SVG Content\",\"link\":\"/demos/svg-demo\"},{\"text\":\"HTML Content\",\"link\":\"/demos/html-demo\"}]},\"headers\":[],\"git\":{\"updatedTime\":1657770800000,\"contributors\":[{\"name\":\"Hassaan Akbar\",\"email\":\"hassaan.akbar@outlook.com\",\"commits\":2}]},\"filePathRelative\":\"demos/index.md\"}")
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}
diff --git a/docs/src/.vuepress/.temp/pages/demos/svg-demo.html.js b/docs/src/.vuepress/.temp/pages/demos/svg-demo.html.js
index 110ecd1..f73b30f 100644
--- a/docs/src/.vuepress/.temp/pages/demos/svg-demo.html.js
+++ b/docs/src/.vuepress/.temp/pages/demos/svg-demo.html.js
@@ -1 +1,14 @@
 export const data = JSON.parse("{\"key\":\"v-9bf6c796\",\"path\":\"/demos/svg-demo.html\",\"title\":\"\",\"lang\":\"en-US\",\"frontmatter\":{\"sidebar\":[{\"text\":\"SVG Content\",\"link\":\"./svg-demo\"},{\"text\":\"HTML Content\",\"link\":\"./html-demo\"}]},\"headers\":[],\"git\":{\"updatedTime\":1657770800000,\"contributors\":[{\"name\":\"Hassaan Akbar\",\"email\":\"hassaan.akbar@outlook.com\",\"commits\":2}]},\"filePathRelative\":\"demos/svg-demo.md\"}")
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}
diff --git a/docs/src/.vuepress/.temp/pages/guide/index.html.js b/docs/src/.vuepress/.temp/pages/guide/index.html.js
index 199ad1a..1ab4a88 100644
--- a/docs/src/.vuepress/.temp/pages/guide/index.html.js
+++ b/docs/src/.vuepress/.temp/pages/guide/index.html.js
@@ -1 +1,14 @@
 export const data = JSON.parse("{\"key\":\"v-fffb8e28\",\"path\":\"/guide/\",\"title\":\"Getting Started\",\"lang\":\"en-US\",\"frontmatter\":{\"lang\":\"en-US\",\"title\":\"Getting Started\",\"description\":\"Getting Started\"},\"headers\":[{\"level\":2,\"title\":\"Introduction\",\"slug\":\"introduction\",\"link\":\"#introduction\",\"children\":[]},{\"level\":2,\"title\":\"Installation\",\"slug\":\"installation\",\"link\":\"#installation\",\"children\":[]},{\"level\":2,\"title\":\"Usage\",\"slug\":\"usage\",\"link\":\"#usage\",\"children\":[{\"level\":3,\"title\":\"Model\",\"slug\":\"model\",\"link\":\"#model\",\"children\":[]},{\"level\":3,\"title\":\"Props\",\"slug\":\"props\",\"link\":\"#props\",\"children\":[]},{\"level\":3,\"title\":\"Events\",\"slug\":\"events\",\"link\":\"#events\",\"children\":[]},{\"level\":3,\"title\":\"ZoomableEvent\",\"slug\":\"zoomableevent\",\"link\":\"#zoomableevent\",\"children\":[]}]},{\"level\":2,\"title\":\"Contribute\",\"slug\":\"contribute\",\"link\":\"#contribute\",\"children\":[{\"level\":3,\"title\":\"If you add new feature\",\"slug\":\"if-you-add-new-feature\",\"link\":\"#if-you-add-new-feature\",\"children\":[]},{\"level\":3,\"title\":\"If you fix a bug\",\"slug\":\"if-you-fix-a-bug\",\"link\":\"#if-you-fix-a-bug\",\"children\":[]},{\"level\":3,\"title\":\"Setup\",\"slug\":\"setup\",\"link\":\"#setup\",\"children\":[]},{\"level\":3,\"title\":\"Where should I start?\",\"slug\":\"where-should-i-start\",\"link\":\"#where-should-i-start\",\"children\":[]}]},{\"level\":2,\"title\":\"Acknowledgements\",\"slug\":\"acknowledgements\",\"link\":\"#acknowledgements\",\"children\":[]}],\"git\":{\"updatedTime\":1691030914000,\"contributors\":[{\"name\":\"Hassaan Akbar\",\"email\":\"hassaan.akbar@outlook.com\",\"commits\":2},{\"name\":\"Hassan Akbar\",\"email\":\"hassan.akbar@systemsltd.com\",\"commits\":1}]},\"filePathRelative\":\"guide/index.md\"}")
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}
diff --git a/docs/src/.vuepress/.temp/pages/index.html.js b/docs/src/.vuepress/.temp/pages/index.html.js
index 74bc26e..e9820d9 100644
--- a/docs/src/.vuepress/.temp/pages/index.html.js
+++ b/docs/src/.vuepress/.temp/pages/index.html.js
@@ -1 +1,14 @@
 export const data = JSON.parse("{\"key\":\"v-8daa1a0e\",\"path\":\"/\",\"title\":\"\",\"lang\":\"en-US\",\"frontmatter\":{\"home\":true,\"heroImage\":\"/logo.png\",\"tagline\":\"Tiny and high performance pan and zoom library for Vue 3 written in Typescript.\",\"actionText\":\"Quick Start →\",\"actionLink\":\"/guide/\",\"features\":[{\"title\":\"Tiny & High Performance\",\"details\":\"Uses CSS transforms which utilizes hardware acceleration where available.\"},{\"title\":\"Typescript Support\",\"details\":\"Written using Typescript providing first class Typescript support.\"},{\"title\":\"Easy to use\",\"details\":\"Just put your code in <vue-zoomable> component to make it zoomable and pan-able.\"}],\"footer\":\"Made by Hassaan Akbar\"},\"headers\":[],\"git\":{\"updatedTime\":1691059501000,\"contributors\":[{\"name\":\"Hassaan Akbar\",\"email\":\"hassaan.akbar@outlook.com\",\"commits\":3},{\"name\":\"Hassan Akbar\",\"email\":\"hassan.akbar@systemsltd.com\",\"commits\":1}]},\"filePathRelative\":\"index.md\"}")
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}
diff --git a/docs/src/.vuepress/components/HtmlDemo.vue b/docs/src/.vuepress/components/HtmlDemo.vue
index 8a363f8..4a852ca 100644
--- a/docs/src/.vuepress/components/HtmlDemo.vue
+++ b/docs/src/.vuepress/components/HtmlDemo.vue
@@ -1,4 +1,3 @@
-
 <template>
   <form>
     <input type="checkbox" v-model="zoomEnabled" />zoomEnabled
@@ -6,23 +5,47 @@
     <input type="checkbox" v-model="dbClickEnabled" />dblClickEnabled
     <input type="checkbox" v-model="touchEnabled" />touchEnabled
     <input type="checkbox" v-model="mouseWheelZoomEnabled" />wheelEnabled
+    <input type="checkbox" v-model="visible" />Slot Content
+    <input type="checkbox" v-model="documentFlow" />DocumentFlow
+    <input type="checkbox" v-model="enableControllButton" />Controll Button Enabled
   </form>
 
-  <VueZoomable
-    style="width: 500px; height: 500px; border: 1px solid black"
-    selector="#boxes"
-    :zoomEnabled="zoomEnabled"
-    :panEnabled="panEnabled"
-    :dblClickEnabled="dbClickEnabled"
-    :wheelEnabled="mouseWheelZoomEnabled"
-    :touchEnabled="touchEnabled"
-    :minZoom="0.3"
-    :maxZoom="2"
-    :dblClickZoomStep="0.4"
-    :wheelZoomStep="0.01"
-    @zoom="onZoom"
-    @panned="onPan"
-  >
+  <section v-if="documentFlow">
+    <h1>Chapter 1</h1>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ultrices mi, nec cursus justo. Ut efficitur, dui
+      nec consectetur consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus. Proin in eros non nisi
+      venenatis bibendum. Integer nec neque sit amet velit varius tempus. Integer viverra ligula nec nunc egestas, non
+      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices enim. Aenean non nisl auctor, vulputate
+      quam sit amet, tincidunt lectus. Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci dapibus,
+      hendrerit nulla in, vehicula libero.
+    </p>
+    <p>
+      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit quam. Vestibulum consectetur vehicula
+      facilisis. Nunc egestas et enim ut facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam elit.
+      Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
+    </p>
+    <h2>Section 1.1</h2>
+    <p>
+      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec. Duis eleifend, erat quis maximus ultrices,
+      elit arcu congue nibh, nec elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in sodales lectus
+      fringilla. Maecenas et purus et erat pulvinar interdum vel sit amet quam. Vestibulum facilisis turpis nec metus
+      congue posuere.
+    </p>
+    <h2>Section 1.2</h2>
+    <p>
+      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget magna ac eros viverra mattis ac sit amet
+      nulla. Pellentesque venenatis risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper risus, a dapibus
+      turpis luctus a. Nullam nec tincidunt sapien. Vivamus gravida ultricies lacus, in eleifend nunc cursus ut. In hac
+      habitasse platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu erat.
+    </p>
+  </section>
+
+  <VueZoomable style="width: 500px; height: 500px; border: 1px solid black" :zoomEnabled="zoomEnabled"
+    :panEnabled="panEnabled" selector="#boxes" :dblClickEnabled="dbClickEnabled" :wheelEnabled="mouseWheelZoomEnabled"
+    :touchEnabled="touchEnabled" :minZoom="0.3" :maxZoom="2" :dblClickZoomStep="0.4" :wheelZoomStep="0.01"
+    :enableControllButton="enableControllButton" :enableWheelOnKey="documentFlow ? 'Control' : undefined"
+    @zoom="showEvent" @panned="showEvent">
     <div id="boxes">
       <div>
         <div></div>
@@ -34,12 +57,139 @@
       </div>
     </div>
   </VueZoomable>
+
+  <div>
+    zoom: {{ zoom }}
+  </div>
+  <div>
+    pan: {{ pan }}
+  </div>
+
+  <section v-if="documentFlow">
+    <h1>Chapter 1</h1>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ultrices mi, nec cursus justo. Ut efficitur, dui
+      nec consectetur consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus. Proin in eros non nisi
+      venenatis bibendum. Integer nec neque sit amet velit varius tempus. Integer viverra ligula nec nunc egestas, non
+      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices enim. Aenean non nisl auctor, vulputate
+      quam sit amet, tincidunt lectus. Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci dapibus,
+      hendrerit nulla in, vehicula libero.
+    </p>
+    <p>
+      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit quam. Vestibulum consectetur vehicula
+      facilisis. Nunc egestas et enim ut facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam elit.
+      Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
+    </p>
+    <h2>Section 1.1</h2>
+    <p>
+      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec. Duis eleifend, erat quis maximus ultrices,
+      elit arcu congue nibh, nec elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in sodales lectus
+      fringilla. Maecenas et purus et erat pulvinar interdum vel sit amet quam. Vestibulum facilisis turpis nec metus
+      congue posuere.
+    </p>
+    <h2>Section 1.2</h2>
+    <p>
+      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget magna ac eros viverra mattis ac sit amet
+      nulla. Pellentesque venenatis risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper risus, a dapibus
+      turpis luctus a. Nullam nec tincidunt sapien. Vivamus gravida ultricies lacus, in eleifend nunc cursus ut. In hac
+      habitasse platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu erat.
+    </p>
+    <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
+
+    <h1>Chapter 2</h1>
+    <p>
+      Phasellus blandit velit at eros efficitur, in mollis dui feugiat. Fusce euismod mauris nec varius volutpat. Quisque
+      dapibus augue et ex ultricies, ac vestibulum dolor facilisis. Sed mattis est sed ipsum feugiat, ut blandit nunc
+      tristique. Aliquam et volutpat nulla, vel ullamcorper purus. Proin condimentum lacus ac congue varius. Maecenas a
+      cursus elit. Nulla facilisi. Integer eu quam eget arcu laoreet vehicula.
+    </p>
+    <h2>Section 2.1</h2>
+    <p>
+      Nunc rhoncus, risus nec euismod porttitor, urna nisi accumsan turpis, vitae euismod turpis arcu eget velit. Nulla a
+      elit vel enim accumsan egestas. Nulla facilisi. Duis nec magna risus. Etiam euismod hendrerit dolor. Integer vel est
+      vitae purus auctor vehicula. Vivamus feugiat felis id tortor hendrerit blandit. Nullam nec tortor eu neque tincidunt
+      mollis. Aenean tincidunt sit amet lacus eu suscipit. Fusce vitae nulla ultrices, convallis odio non, accumsan justo.
+    </p>
+    <h2>Section 2.2</h2>
+    <p>
+      Aenean in nibh eget velit aliquet iaculis. Donec et purus ut lectus hendrerit efficitur. Maecenas vulputate justo
+      nec enim ullamcorper luctus. Integer varius nisi eu massa iaculis, vel auctor erat blandit. Nulla facilisi. Praesent
+      eget bibendum lectus. Donec dignissim velit id nisl feugiat, a vestibulum felis consequat. Pellentesque habitant
+      morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+    </p>
+    <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
+    <h1>Chapter 1</h1>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ultrices mi, nec cursus justo. Ut efficitur, dui
+      nec consectetur consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus. Proin in eros non nisi
+      venenatis bibendum. Integer nec neque sit amet velit varius tempus. Integer viverra ligula nec nunc egestas, non
+      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices enim. Aenean non nisl auctor, vulputate
+      quam sit amet, tincidunt lectus. Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci dapibus,
+      hendrerit nulla in, vehicula libero.
+    </p>
+    <p>
+      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit quam. Vestibulum consectetur vehicula
+      facilisis. Nunc egestas et enim ut facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam elit.
+      Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
+    </p>
+    <h2>Section 1.1</h2>
+    <p>
+      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec. Duis eleifend, erat quis maximus ultrices,
+      elit arcu congue nibh, nec elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in sodales lectus
+      fringilla. Maecenas et purus et erat pulvinar interdum vel sit amet quam. Vestibulum facilisis turpis nec metus
+      congue posuere.
+    </p>
+    <h2>Section 1.2</h2>
+    <p>
+      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget magna ac eros viverra mattis ac sit amet
+      nulla. Pellentesque venenatis risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper risus, a dapibus
+      turpis luctus a. Nullam nec tincidunt sapien. Vivamus gravida ultricies lacus, in eleifend nunc cursus ut. In hac
+      habitasse platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu erat.
+    </p>
+    <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
+
+    <h1>Chapter 2</h1>
+    <p>
+      Phasellus blandit velit at eros efficitur, in mollis dui feugiat. Fusce euismod mauris nec varius volutpat. Quisque
+      dapibus augue et ex ultricies, ac vestibulum dolor facilisis. Sed mattis est sed ipsum feugiat, ut blandit nunc
+      tristique. Aliquam et volutpat nulla, vel ullamcorper purus. Proin condimentum lacus ac congue varius. Maecenas a
+      cursus elit. Nulla facilisi. Integer eu quam eget arcu laoreet vehicula.
+    </p>
+    <h2>Section 2.1</h2>
+    <p>
+      Nunc rhoncus, risus nec euismod porttitor, urna nisi accumsan turpis, vitae euismod turpis arcu eget velit. Nulla a
+      elit vel enim accumsan egestas. Nulla facilisi. Duis nec magna risus. Etiam euismod hendrerit dolor. Integer vel est
+      vitae purus auctor vehicula. Vivamus feugiat felis id tortor hendrerit blandit. Nullam nec tortor eu neque tincidunt
+      mollis. Aenean tincidunt sit amet lacus eu suscipit. Fusce vitae nulla ultrices, convallis odio non, accumsan justo.
+    </p>
+    <h2>Section 2.2</h2>
+    <p>
+      Aenean in nibh eget velit aliquet iaculis. Donec et purus ut lectus hendrerit efficitur. Maecenas vulputate justo
+      nec enim ullamcorper luctus. Integer varius nisi eu massa iaculis, vel auctor erat blandit. Nulla facilisi. Praesent
+      eget bibendum lectus. Donec dignissim velit id nisl feugiat, a vestibulum felis consequat. Pellentesque habitant
+      morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+    </p>
+    <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
+  </section>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import "vue-zoomable/dist/style.css";
 import VueZoomable from "vue-zoomable";
-import "../../../node_modules/vue-zoomable/dist/style.css";
+
+const zoom = ref(0.2);
+const pan = ref({ x: 0, y: 100 });
+
+function showEvent(ev: any) {
+  console.log(ev)
+
+  zoom.value = ev.zoom;
+  pan.value = {
+    x: ev.pan.x,
+    y: ev.pan.y,
+  };
+}
 
 let zoomEnabled = ref(true);
 let panEnabled = ref(true);
@@ -47,34 +197,25 @@ let dbClickEnabled = ref(true);
 let touchEnabled = ref(true);
 let mouseWheelZoomEnabled = ref(true);
 let visible = ref(true);
-
-let onPan = (ev: any) => {
-  console.log(ev);
-};
-
-let onZoom = (ev: any) => {
-  console.log(ev);
-};
-
-
+let documentFlow = ref(false)
+let enableControllButton = ref(true);
 </script>
-<style>
 
+<style>
 #boxes {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
 }
 
-#boxes > div {
+#boxes>div {
   display: flex;
   flex-direction: row;
 }
 
-#boxes > div > div {
+#boxes>div>div {
   margin: 50px;
   background-color: blue;
   height: 100px;
   width: 100px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/src/.vuepress/components/SvgDemo.vue b/docs/src/.vuepress/components/SvgDemo.vue
index 2245f64..da61800 100644
--- a/docs/src/.vuepress/components/SvgDemo.vue
+++ b/docs/src/.vuepress/components/SvgDemo.vue
@@ -1,65 +1,208 @@
+
 <template>
   <form>
-    <!-- <button @click="() => visible = !visible">{{ visible ? 'Show' : 'Hide' }}</button> -->
     <input type="checkbox" v-model="zoomEnabled" />zoomEnabled
     <input type="checkbox" v-model="panEnabled" />panEnabled
     <input type="checkbox" v-model="dbClickEnabled" />dblClickEnabled
     <input type="checkbox" v-model="touchEnabled" />touchEnabled
     <input type="checkbox" v-model="mouseWheelZoomEnabled" />wheelEnabled
+    <input type="checkbox" v-model="visible" />Slot Content
+    <input type="checkbox" v-model="documentFlow" />DocumentFlow
+    <input type="checkbox" v-model="enableControllButton" />Controll Button Enabled
   </form>
+
+  <section v-if="documentFlow">
+    <h1>Chapter 1</h1>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ultrices mi, nec cursus justo. Ut efficitur, dui
+      nec consectetur consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus. Proin in eros non nisi
+      venenatis bibendum. Integer nec neque sit amet velit varius tempus. Integer viverra ligula nec nunc egestas, non
+      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices enim. Aenean non nisl auctor, vulputate
+      quam sit amet, tincidunt lectus. Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci dapibus,
+      hendrerit nulla in, vehicula libero.
+    </p>
+    <p>
+      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit quam. Vestibulum consectetur vehicula
+      facilisis. Nunc egestas et enim ut facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam elit.
+      Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
+    </p>
+    <h2>Section 1.1</h2>
+    <p>
+      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec. Duis eleifend, erat quis maximus ultrices,
+      elit arcu congue nibh, nec elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in sodales lectus
+      fringilla. Maecenas et purus et erat pulvinar interdum vel sit amet quam. Vestibulum facilisis turpis nec metus
+      congue posuere.
+    </p>
+    <h2>Section 1.2</h2>
+    <p>
+      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget magna ac eros viverra mattis ac sit amet
+      nulla. Pellentesque venenatis risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper risus, a dapibus
+      turpis luctus a. Nullam nec tincidunt sapien. Vivamus gravida ultricies lacus, in eleifend nunc cursus ut. In hac
+      habitasse platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu erat.
+    </p>
+  </section>
   <!-- :eventsListenerElement="listener" -->
 
-  <VueZoomable
-    style="width: 500px; height: 500px; border: 1px solid black"
-    selector="#container1"
-    :zoomEnabled="zoomEnabled"
-    :panEnabled="panEnabled"
-    :initialPanX="100"
-    :initialPanY="120"
-    :initialZoom="1.5"
-    :svgChild="true"
-    :dblClickEnabled="dbClickEnabled"
-    :wheelEnabled="mouseWheelZoomEnabled"
-    :touchEnabled="touchEnabled"
-    :minZoom="0.3"
-    :maxZoom="2"
-    :dblClickZoomStep="0.4"
-    :wheelZoomStep="0.01"
-    @zoom="onZoom"
-    @panned="onPan"
-    >
+  <VueZoomable style="width: 500px; height: 500px; border: 1px solid black" selector="#container1"
+    :zoomEnabled="zoomEnabled" :panEnabled="panEnabled" :initialPanX="100" :initialPanY="120" :initialZoom="1.5"
+    :svgChild="true" :dblClickEnabled="dbClickEnabled" :wheelEnabled="mouseWheelZoomEnabled" :touchEnabled="touchEnabled"
+    :minZoom="0.3" :maxZoom="2" :dblClickZoomStep="0.4" :wheelZoomStep="0.01"
+    :enableWheelOnKey="documentFlow ? 'Control' : undefined" :enableControllButton="enableControllButton"
+    @zoom="showEvent" @panned="showEvent">
     <svg class="mysvg" v-if="visible">
       <g id="container1">
         <circle x="10" y="10" r="50" />
       </g>
     </svg>
   </VueZoomable>
+
+  <div>
+    zoom: {{ zoom }}
+  </div>
+  <div>
+    pan: {{ pan }}
+  </div>
+
+  <section v-if="documentFlow">
+    <h1>Chapter 1</h1>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ultrices mi, nec cursus justo. Ut efficitur, dui
+      nec consectetur consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus. Proin in eros non nisi
+      venenatis bibendum. Integer nec neque sit amet velit varius tempus. Integer viverra ligula nec nunc egestas, non
+      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices enim. Aenean non nisl auctor, vulputate
+      quam sit amet, tincidunt lectus. Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci dapibus,
+      hendrerit nulla in, vehicula libero.
+    </p>
+    <p>
+      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit quam. Vestibulum consectetur vehicula
+      facilisis. Nunc egestas et enim ut facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam elit.
+      Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
+    </p>
+    <h2>Section 1.1</h2>
+    <p>
+      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec. Duis eleifend, erat quis maximus ultrices,
+      elit arcu congue nibh, nec elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in sodales lectus
+      fringilla. Maecenas et purus et erat pulvinar interdum vel sit amet quam. Vestibulum facilisis turpis nec metus
+      congue posuere.
+    </p>
+    <h2>Section 1.2</h2>
+    <p>
+      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget magna ac eros viverra mattis ac sit amet
+      nulla. Pellentesque venenatis risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper risus, a dapibus
+      turpis luctus a. Nullam nec tincidunt sapien. Vivamus gravida ultricies lacus, in eleifend nunc cursus ut. In hac
+      habitasse platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu erat.
+    </p>
+    <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
+
+    <h1>Chapter 2</h1>
+    <p>
+      Phasellus blandit velit at eros efficitur, in mollis dui feugiat. Fusce euismod mauris nec varius volutpat. Quisque
+      dapibus augue et ex ultricies, ac vestibulum dolor facilisis. Sed mattis est sed ipsum feugiat, ut blandit nunc
+      tristique. Aliquam et volutpat nulla, vel ullamcorper purus. Proin condimentum lacus ac congue varius. Maecenas a
+      cursus elit. Nulla facilisi. Integer eu quam eget arcu laoreet vehicula.
+    </p>
+    <h2>Section 2.1</h2>
+    <p>
+      Nunc rhoncus, risus nec euismod porttitor, urna nisi accumsan turpis, vitae euismod turpis arcu eget velit. Nulla a
+      elit vel enim accumsan egestas. Nulla facilisi. Duis nec magna risus. Etiam euismod hendrerit dolor. Integer vel est
+      vitae purus auctor vehicula. Vivamus feugiat felis id tortor hendrerit blandit. Nullam nec tortor eu neque tincidunt
+      mollis. Aenean tincidunt sit amet lacus eu suscipit. Fusce vitae nulla ultrices, convallis odio non, accumsan justo.
+    </p>
+    <h2>Section 2.2</h2>
+    <p>
+      Aenean in nibh eget velit aliquet iaculis. Donec et purus ut lectus hendrerit efficitur. Maecenas vulputate justo
+      nec enim ullamcorper luctus. Integer varius nisi eu massa iaculis, vel auctor erat blandit. Nulla facilisi. Praesent
+      eget bibendum lectus. Donec dignissim velit id nisl feugiat, a vestibulum felis consequat. Pellentesque habitant
+      morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+    </p>
+    <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
+    <h1>Chapter 1</h1>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ultrices mi, nec cursus justo. Ut efficitur, dui
+      nec consectetur consequat, lorem elit tincidunt metus, vel ultrices elit velit ac lectus. Proin in eros non nisi
+      venenatis bibendum. Integer nec neque sit amet velit varius tempus. Integer viverra ligula nec nunc egestas, non
+      ullamcorper mauris venenatis. Nullam sit amet pharetra odio, eget ultrices enim. Aenean non nisl auctor, vulputate
+      quam sit amet, tincidunt lectus. Duis vitae elit sed justo tincidunt sodales id ac est. Vivamus eu orci dapibus,
+      hendrerit nulla in, vehicula libero.
+    </p>
+    <p>
+      Sed pulvinar bibendum metus, quis lacinia urna varius non. Duis eget velit quam. Vestibulum consectetur vehicula
+      facilisis. Nunc egestas et enim ut facilisis. In volutpat augue eget risus faucibus malesuada. Ut et quam elit.
+      Fusce quis tincidunt elit. Nullam gravida justo ut feugiat mollis.
+    </p>
+    <h2>Section 1.1</h2>
+    <p>
+      Vivamus maximus scelerisque ligula, vel fringilla odio consectetur nec. Duis eleifend, erat quis maximus ultrices,
+      elit arcu congue nibh, nec elementum eros purus nec nulla. Fusce aliquet lacus id ligula rhoncus, in sodales lectus
+      fringilla. Maecenas et purus et erat pulvinar interdum vel sit amet quam. Vestibulum facilisis turpis nec metus
+      congue posuere.
+    </p>
+    <h2>Section 1.2</h2>
+    <p>
+      Nulla vehicula lectus felis, in feugiat massa dignissim id. Vivamus eget magna ac eros viverra mattis ac sit amet
+      nulla. Pellentesque venenatis risus ut ex suscipit, in auctor nulla consequat. Proin rhoncus semper risus, a dapibus
+      turpis luctus a. Nullam nec tincidunt sapien. Vivamus gravida ultricies lacus, in eleifend nunc cursus ut. In hac
+      habitasse platea dictumst. Duis ut purus nec sapien convallis pellentesque vel eu erat.
+    </p>
+    <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
+
+    <h1>Chapter 2</h1>
+    <p>
+      Phasellus blandit velit at eros efficitur, in mollis dui feugiat. Fusce euismod mauris nec varius volutpat. Quisque
+      dapibus augue et ex ultricies, ac vestibulum dolor facilisis. Sed mattis est sed ipsum feugiat, ut blandit nunc
+      tristique. Aliquam et volutpat nulla, vel ullamcorper purus. Proin condimentum lacus ac congue varius. Maecenas a
+      cursus elit. Nulla facilisi. Integer eu quam eget arcu laoreet vehicula.
+    </p>
+    <h2>Section 2.1</h2>
+    <p>
+      Nunc rhoncus, risus nec euismod porttitor, urna nisi accumsan turpis, vitae euismod turpis arcu eget velit. Nulla a
+      elit vel enim accumsan egestas. Nulla facilisi. Duis nec magna risus. Etiam euismod hendrerit dolor. Integer vel est
+      vitae purus auctor vehicula. Vivamus feugiat felis id tortor hendrerit blandit. Nullam nec tortor eu neque tincidunt
+      mollis. Aenean tincidunt sit amet lacus eu suscipit. Fusce vitae nulla ultrices, convallis odio non, accumsan justo.
+    </p>
+    <h2>Section 2.2</h2>
+    <p>
+      Aenean in nibh eget velit aliquet iaculis. Donec et purus ut lectus hendrerit efficitur. Maecenas vulputate justo
+      nec enim ullamcorper luctus. Integer varius nisi eu massa iaculis, vel auctor erat blandit. Nulla facilisi. Praesent
+      eget bibendum lectus. Donec dignissim velit id nisl feugiat, a vestibulum felis consequat. Pellentesque habitant
+      morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+    </p>
+    <!-- Continue with more paragraphs, sections, and chapters as needed to fill a couple of pages -->
+  </section>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-import "../../../node_modules/vue-zoomable/dist/style.css";
+import "vue-zoomable/dist/style.css";
 import VueZoomable from "vue-zoomable";
 
+
+const zoom = ref(0.2);
+const pan = ref({ x: 0, y: 100 });
+
+function showEvent(ev: any) {
+  console.log(ev)
+
+  zoom.value = ev.zoom;
+  pan.value = {
+    x: ev.pan.x,
+    y: ev.pan.y,
+  };
+}
+
 let zoomEnabled = ref(true);
 let panEnabled = ref(true);
 let dbClickEnabled = ref(true);
 let touchEnabled = ref(true);
 let mouseWheelZoomEnabled = ref(true);
 let visible = ref(true);
-
-let onPan = (ev: any) => {
-  console.log(ev);
-};
-
-let onZoom = (ev: any) => {
-  console.log(ev);
-};
-
+let documentFlow = ref(false)
+let enableControllButton = ref(true);
 </script>
+
 <style>
 .mysvg {
-    height: 100%;
-    width: 100%;
+  height: 100%;
+  width: 100%;
 }
 </style>
diff --git a/package.json b/package.json
index 3d43bd2..5a722bb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-zoomable",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
@@ -9,20 +9,18 @@
   "files": [
     "dist"
   ],
+  "license": "MIT",
   "main": "./dist/vue-zoomable.umd.js",
-  "module": "./dist/vue-zoomable.es.js",
+  "module": "./dist/vue-zoomable.mjs",
   "types": "./dist/types/index.d.ts",
   "website": "https://hassaanakbar.github.io/vue-zoomable/",
-  "repository": "https://github.com/HeIIow2/vue-zoomable/tree/fork/selfMaintained",
+  "repository": "https://github.com/HassaanAkbar/vue-zoomable",
   "exports": {
     ".": {
-      "import": "./dist/vue-zoomable.es.js",
+      "import": "./dist/vue-zoomable.mjs",
       "require": "./dist/vue-zoomable.umd.js"
     },
-    "./dist/style.css": {
-      "import": "./dist/style.css",
-      "require": "./dist/style.css"
-    }
+    "./dist/style.css": "./dist/style.css"
   },
   "devDependencies": {
     "@types/node": "^18.0",
@@ -45,4 +43,4 @@
   "dependencies": {
     "@babel/types": "^7.22.5"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/VueZoomable.vue b/src/components/VueZoomable.vue
index 93fa513..1f1d75d 100644
--- a/src/components/VueZoomable.vue
+++ b/src/components/VueZoomable.vue
@@ -182,7 +182,7 @@ onMounted(() => {
 });
 
 
-const pressedKeys: Ref<Set<String>> = ref(new Set());
+const pressedKeys: Ref<Set<String>> = ref(new Set<String>());
 
 window.addEventListener(
   'wheel',
diff --git a/src/composables/useWheel.ts b/src/composables/useWheel.ts
index 18013e6..1ec3490 100644
--- a/src/composables/useWheel.ts
+++ b/src/composables/useWheel.ts
@@ -18,9 +18,10 @@ export function useWheel(
 
         // it would zoom, if the "zoom bounds" aren't exeded
         if (newZoom > props.maxZoom) zoom.value = props.maxZoom;
-        else if (newZoom == props.maxZoom || newZoom == props.minZoom) return;
+        else if (newZoom == props.maxZoom || newZoom == props.minZoom || isNaN(newZoom)) return;
         else if (newZoom < props.minZoom) zoom.value = props.minZoom;
         else zoom.value = newZoom;
+        console.log("Wheel: ", newZoom, ev);
 
         let event: ZoomableEvent = {
             zoom: zoom.value,
diff --git a/src/examples/svg_example.vue b/src/examples/svg_example.vue
index 21cc38e..f9b66bf 100644
--- a/src/examples/svg_example.vue
+++ b/src/examples/svg_example.vue
@@ -49,7 +49,7 @@
     :minZoom="0.3" :maxZoom="2" :dblClickZoomStep="0.4" :wheelZoomStep="0.01"
     :enableWheelOnKey="documentFlow ? 'Control' : undefined" :enableControllButton="enableControllButton"
     @zoom="showEvent" @panned="showEvent">
-    <svg v-if="visible">
+    <svg class="mysvg" v-if="visible">
       <g id="container1">
         <circle x="10" y="10" r="50" />
       </g>
@@ -198,4 +198,9 @@ let documentFlow = ref(true)
 let enableControllButton = ref(true);
 </script>
 
-<style></style>
+<style>
+.mysvg {
+  height: 100%;
+  width: 100%;
+}
+</style>
diff --git a/src/index.ts b/src/index.ts
index 5415138..1d9bc3d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,4 @@
 // for library build
 import VueZoomable from "./components/VueZoomable.vue";
 
-// export { VueZoomable };
 export default VueZoomable;
diff --git a/vite.config.ts b/vite.config.ts
index b2650de..8a389c7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,9 +8,10 @@ export default defineConfig({
   plugins: [
     vue(),
     dts({
-      outputDir: 'dist/types',
+      outDir: 'dist/types',
       staticImport: true,
       insertTypesEntry: true,
+      logLevel: "info",
       copyDtsFiles: false
     })
   ],