Fix all examples and demo site 💞

willnguyen1312 · Nov 14, 2023 · d76e504 · d76e504
1 parent 471c8b3
commit d76e504
Show file tree

Hide file tree

Showing 24 changed files with 164 additions and 285 deletions.
diff --git a/examples/with-angular/src/app/app.component.html b/examples/with-angular/src/app/app.component.html
@@ -21,7 +21,7 @@
     <p>Current zoom: {{ getCurrentZoomImageValue() }}</p>
     <div class="mt-1 flex space-x-2">
       <div #imageWheelContainer class="h-[300px] w-[200px] cursor-crosshair">
-        <img class="h-full w-full" alt="Large Pic" src="../assets/sample.avif" />
+        <img class="h-full w-full" alt="Large Pic" src="/assets/sample.avif" />
       </div>
       <img [src]="croppedImage" *ngIf="!!croppedImage" class="h-[300px] w-[200px]" alt="Cropped placeholder" />
     </div>
@@ -37,22 +37,22 @@
   <div class="space-y-4" *ngIf="zoomType === 'hover'">
     <p>Hover inside the image to see zoom effect</p>
     <div #imageHoverContainer class="relative mt-1 flex h-[300px] w-[200px] items-start">
-      <img class="h-full w-full" alt="Small Pic" src="/sample.avif" />
+      <img class="h-full w-full" alt="Small Pic" src="../assets/sample.avif" />
       <div #zoomTarget class="absolute left-[350px]"></div>
     </div>
   </div>
 
   <div class="space-y-4" *ngIf="zoomType === 'move'">
     <p>Move mouse inside the image to see zoom effect</p>
     <div #imageMoveContainer class="relative mt-1 h-[300px] w-[200px] cursor-crosshair overflow-hidden">
-      <img class="h-full w-full" alt="Large Pic" src="/sample.avif" />
+      <img class="h-full w-full" alt="Large Pic" src="../assets/sample.avif" />
     </div>
   </div>
 
   <div class="space-y-4" *ngIf="zoomType === 'click'">
     <p>Click inside the image to see zoom effect</p>
     <div #imageClickContainer class="relative mt-1 h-[300px] w-[200px] cursor-crosshair overflow-hidden">
-      <img class="h-full w-full" alt="Large Pic" src="/sample.avif" />
+      <img class="h-full w-full" alt="Large Pic" src="../assets/sample.avif" />
     </div>
   </div>
 </div>
diff --git a/examples/with-angular/src/app/app.component.ts b/examples/with-angular/src/app/app.component.ts
@@ -89,12 +89,11 @@ export class AppComponent implements AfterViewInit {
         this.zoomImageWheelService.createZoomImage(this.imageWheelContainerRef?.nativeElement as HTMLDivElement)
         this.zoomImageWheelService.zoomImageState$.subscribe((state) => {
           this.zoomImageWheelState = state
-          this.handleCropWheelZoomImage()
         })
       },
       hover: () => {
         this.zoomImageHoverService.createZoomImage(this.imageHoverContainerRef?.nativeElement as HTMLDivElement, {
-          zoomImageSource: "/sample.avif",
+          zoomImageSource: "/assets/sample.avif",
           customZoom: { width: 300, height: 500 },
           zoomTarget: this.zoomTargetRef?.nativeElement as HTMLDivElement,
           scale: 2,
@@ -105,15 +104,15 @@ export class AppComponent implements AfterViewInit {
       },
       move: () => {
         this.zoomImageMoveService.createZoomImage(this.imageMoveContainerRef?.nativeElement as HTMLDivElement, {
-          zoomImageSource: "/sample.avif",
+          zoomImageSource: "/assets/sample.avif",
         })
         this.zoomImageMoveService.zoomImageState$.subscribe((state) => {
           this.zoomImageMoveState = state
         })
       },
       click: () => {
         this.zoomImageClickService.createZoomImage(this.imageClickContainerRef?.nativeElement as HTMLDivElement, {
-          zoomImageSource: "/sample.avif",
+          zoomImageSource: "/assets/sample.avif",
         })
         this.zoomImageClickService.zoomImageState$.subscribe((state) => {
           this.zoomImageClickState = state
@@ -132,8 +131,8 @@ export class AppComponent implements AfterViewInit {
     this.zoomImageWheelService.setZoomImageState({ currentZoom: this.zoomImageWheelState.currentZoom - 0.5 })
   }
 
-  handleCropWheelZoomImage() {
-    this.croppedImage = cropImage({
+  async handleCropWheelZoomImage() {
+    this.croppedImage = await cropImage({
       currentZoom: this.zoomImageWheelState.currentZoom,
       image: (this.imageWheelContainerRef?.nativeElement as HTMLDivElement).querySelector("img") as HTMLImageElement,
       positionX: this.zoomImageWheelState.currentPositionX,

diff --git a/examples/with-next/src/app/page.tsx b/examples/with-next/src/app/page.tsx
@@ -36,9 +36,9 @@ export default function Home() {
   const { createZoomImage: createZoomImageMove } = useZoomImageMove()
   const { createZoomImage: createZoomImageClick } = useZoomImageClick()
 
-  function handleCropImage() {
+  async function handleCropImage() {
     setCroppedImage(
-      cropImage({
+      await cropImage({
         currentZoom: zoomImageWheelState.currentZoom,
         image: imageWheelContainerRef.current?.querySelector("img") as HTMLImageElement,
         positionX: zoomImageWheelState.currentPositionX,
@@ -153,9 +153,9 @@ export default function Home() {
       {zoomType === "hover" && (
         <>
           <p>Hover inside the image to see zoom effect</p>
-          <div ref={imageHoverContainerRef} className="relative flex h-[250px] w-[250px] items-start">
+          <div ref={imageHoverContainerRef} className="relative flex h-[300px] w-[200px] items-start">
             <img className="h-full w-full" alt="Small Pic" src="/sample.avif" />
-            <div ref={zoomTargetRef} className="absolute left-[300px]"></div>
+            <div ref={zoomTargetRef} className="absolute left-[350px]"></div>
           </div>
         </>
       )}

diff --git a/examples/with-preact/package.json b/examples/with-preact/package.json
@@ -14,6 +14,6 @@
     "@unocss/reset": "^0.54.3",
     "typescript": "^5.1.6",
     "unocss": "^0.54.3",
-    "vite": "^4.4.9"
+    "vite": "^4.5.0"
   }
 }
diff --git a/examples/with-preact/src/app.tsx b/examples/with-preact/src/app.tsx
@@ -34,9 +34,9 @@ function App() {
   const { createZoomImage: createZoomImageMove } = useZoomImageMove()
   const { createZoomImage: createZoomImageClick } = useZoomImageClick()
 
-  function handleCropImage() {
+  async function handleCropImage() {
     setCroppedImage(
-      cropImage({
+      await cropImage({
         currentZoom: zoomImageWheelState.currentZoom,
         image: imageWheelContainerRef.current?.querySelector("img") as HTMLImageElement,
         positionX: zoomImageWheelState.currentPositionX,
@@ -151,9 +151,9 @@ function App() {
       {zoomType === "hover" && (
         <>
           <p>Hover inside the image to see zoom effect</p>
-          <div ref={imageHoverContainerRef} class="relative flex h-[250px] w-[250px] items-start">
+          <div ref={imageHoverContainerRef} class="relative flex h-[300px] w-[200px] items-start">
             <img class="h-full w-full" alt="Small Pic" src="/sample.avif" />
-            <div ref={zoomTargetRef} class="absolute left-[300px]"></div>
+            <div ref={zoomTargetRef} class="absolute left-[350px]"></div>
           </div>
         </>
       )}

diff --git a/examples/with-qwik/package.json b/examples/with-qwik/package.json
@@ -13,7 +13,7 @@
     "typescript": "5.1.6",
     "undici": "^5.23.0",
     "unocss": "^0.54.3",
-    "vite": "4.4.8",
+    "vite": "^4.5.0",
     "vite-tsconfig-paths": "4.2.0"
   },
   "dependencies": {

diff --git a/examples/with-qwik/src/routes/index.tsx b/examples/with-qwik/src/routes/index.tsx
@@ -47,7 +47,7 @@ export default component$(() => {
 
     if (zoomType.value === "hover" && imageHoverContainerRef.value) {
       const imageContainer = imageHoverContainerRef.value
-      const zoomTarget = zoomTargetRef.value
+      const zoomTarget = zoomTargetRef.value as HTMLDivElement
       createZoomImageHover(imageContainer, {
         zoomImageSource: "/sample.avif",
         customZoom: { width: 300, height: 500 },
@@ -137,8 +137,8 @@ export default component$(() => {
             </button>
             <button
               class="text-dark-500 rounded bg-gray-100 p-2 text-sm font-medium"
-              onClick$={() => {
-                croppedImage.value = cropImage({
+              onClick$={async () => {
+                croppedImage.value = await cropImage({
                   currentZoom: zoomImageWheelState.currentZoom,
                   image: imageWheelContainerRef.value?.querySelector("img") as HTMLImageElement,
                   positionX: zoomImageWheelState.currentPositionX,
@@ -155,9 +155,9 @@ export default component$(() => {
       {zoomType.value === "hover" && (
         <>
           <p>Hover inside the image to see zoom effect</p>
-          <div ref={imageHoverContainerRef} class="relative flex h-[250px] w-[250px] items-start">
+          <div ref={imageHoverContainerRef} class="relative flex h-[300px] w-[200px] items-start">
             <img class="h-full w-full" alt="Small Pic" src="/sample.avif" />
-            <div ref={zoomTargetRef} class="absolute left-[300px]"></div>
+            <div ref={zoomTargetRef} class="absolute left-[350px]"></div>
           </div>
         </>
       )}

diff --git a/examples/with-react/package.json b/examples/with-react/package.json
@@ -17,6 +17,6 @@
     "@vitejs/plugin-react": "^4.0.4",
     "typescript": "^5.1.6",
     "unocss": "^0.54.3",
-    "vite": "^4.4.9"
+    "vite": "^4.5.0"
   }
 }
diff --git a/examples/with-react/src/App.tsx b/examples/with-react/src/App.tsx
@@ -154,7 +154,7 @@ function App() {
           <p>Hover inside the image to see zoom effect</p>
           <div ref={imageHoverContainerRef} className="relative flex h-[250px] w-[166.66px] items-start">
             <img className="h-full w-full" alt="Small Pic" src="/sample.avif" />
-            <div ref={zoomTargetRef} className="absolute left-[300px]"></div>
+            <div ref={zoomTargetRef} className="absolute left-[350px]"></div>
           </div>
         </>
       )}

diff --git a/examples/with-remix/app/routes/_index.tsx b/examples/with-remix/app/routes/_index.tsx
@@ -39,9 +39,9 @@ export default function Index() {
   const { createZoomImage: createZoomImageMove } = useZoomImageMove()
   const { createZoomImage: createZoomImageClick } = useZoomImageClick()
 
-  function handleCropImage() {
+  async function handleCropImage() {
     setCroppedImage(
-      cropImage({
+      await cropImage({
         currentZoom: zoomImageWheelState.currentZoom,
         image: imageWheelContainerRef.current?.querySelector("img") as HTMLImageElement,
         positionX: zoomImageWheelState.currentPositionX,
@@ -157,9 +157,9 @@ export default function Index() {
       {zoomType === "hover" && (
         <>
           <p>Hover inside the image to see zoom effect</p>
-          <div ref={imageHoverContainerRef} className="relative flex h-[250px] w-[250px] items-start">
+          <div ref={imageHoverContainerRef} className="relative flex h-[300px] w-[200px] items-start">
             <img className="h-full w-full" alt="Small Pic" src="/sample.avif" />
-            <div ref={zoomTargetRef} className="absolute left-[300px]"></div>
+            <div ref={zoomTargetRef} className="absolute left-[350px]"></div>
           </div>
         </>
       )}

diff --git a/examples/with-solid/package.json b/examples/with-solid/package.json
@@ -10,7 +10,7 @@
     "@unocss/reset": "^0.54.3",
     "typescript": "^5.1.6",
     "unocss": "^0.54.3",
-    "vite": "^4.4.9",
+    "vite": "^4.5.0",
     "vite-plugin-solid": "^2.7.0"
   },
   "dependencies": {

diff --git a/examples/with-solid/src/App.tsx b/examples/with-solid/src/App.tsx
@@ -47,9 +47,9 @@ const App: Component = () => {
     )
   }
 
-  function handleCropImage() {
+  async function handleCropImage() {
     setCroppedImage(
-      cropImage({
+      await cropImage({
         currentZoom: zoomImageWheelState.currentZoom,
         image: imageWheelContainer.querySelector("img") as HTMLImageElement,
         positionX: zoomImageWheelState.currentPositionX,
@@ -146,9 +146,9 @@ const App: Component = () => {
       {zoomType() === "hover" && (
         <>
           <p>Hover inside the image to see zoom effect</p>
-          <div ref={imageHoverContainer} class="relative flex h-[250px] w-[250px] items-start">
+          <div ref={imageHoverContainer} class="relative flex h-[300px] w-[200px] items-start">
             <img class="h-full w-full" alt="Small Pic" src="/sample.avif" />
-            <div ref={zoomTarget} class="absolute left-[300px]"></div>
+            <div ref={zoomTarget} class="absolute left-[350px]"></div>
           </div>
         </>
       )}

diff --git a/examples/with-svelte/package.json b/examples/with-svelte/package.json
@@ -17,6 +17,6 @@
     "tslib": "^2.6.1",
     "typescript": "^5.1.6",
     "unocss": "^0.54.3",
-    "vite": "^4.4.9"
+    "vite": "^4.5.0"
   }
 }
diff --git a/examples/with-svelte/src/App.svelte b/examples/with-svelte/src/App.svelte
@@ -119,8 +119,8 @@
         </button>
         <button
           class="text-dark-500 rounded bg-gray-100 p-2 text-sm font-medium"
-          on:click={() => {
-            croppedImage = cropImage({
+          on:click={async () => {
+            croppedImage = await cropImage({
               currentZoom: $zoomImageWheelState.currentZoom,
               image: imageWheelContainer.querySelector("img"),
               positionX: $zoomImageWheelState.currentPositionX,
@@ -135,9 +135,9 @@
   {/if}
 
   {#if zoomType === "hover"}
-    <div bind:this={imageHoverContainer} class="relative flex h-[250px] w-[250px] items-start">
+    <div bind:this={imageHoverContainer} class="relative flex h-[300px] w-[200px] items-start">
       <img class="h-full w-full" alt="Small Pic" src="/sample.avif" />
-      <div bind:this={zoomTarget} class="absolute left-[300px]" />
+      <div bind:this={zoomTarget} class="absolute left-[350px]" />
     </div>
   {/if}
 

diff --git a/examples/with-vanilla/index.html b/examples/with-vanilla/index.html
@@ -54,9 +54,9 @@
     </template>
 
     <template id="image-hover">
-      <div id="image-hover-container" class="relative flex h-[250px] w-[250px] items-start">
+      <div id="image-hover-container" class="relative flex h-[300px] w-[200px] items-start">
         <img class="h-full w-full" alt="Small Pic" src="/sample.avif" />
-        <div id="zoom-hover-target" class="absolute left-[300px]"></div>
+        <div id="zoom-hover-target" class="absolute left-[350px]"></div>
       </div>
     </template>
 

diff --git a/examples/with-vanilla/package.json b/examples/with-vanilla/package.json
@@ -9,7 +9,7 @@
     "@unocss/reset": "^0.54.3",
     "typescript": "^5.1.6",
     "unocss": "^0.54.3",
-    "vite": "^4.4.9"
+    "vite": "^4.5.0"
   },
   "dependencies": {
     "@zoom-image/core": "latest"

diff --git a/examples/with-vanilla/src/main.ts b/examples/with-vanilla/src/main.ts
@@ -97,9 +97,9 @@ const makeUpdateUIFunc = () => {
 
       cropImgBtn.addEventListener(
         "click",
-        () => {
+        async () => {
           const currentState = result.getState()
-          const croppedImage = cropImage({
+          const croppedImage = await cropImage({
             image: container.querySelector("img") as HTMLImageElement,
             currentZoom: currentState.currentZoom,
             positionX: currentState.currentPositionX,

diff --git a/examples/with-vue/package.json b/examples/with-vue/package.json
@@ -17,7 +17,7 @@
     "npm-run-all": "^4.1.5",
     "typescript": "~5.1.6",
     "unocss": "^0.54.3",
-    "vite": "^4.4.9",
+    "vite": "^4.5.0",
     "vue-tsc": "^1.8.8"
   }
 }
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -64,7 +64,7 @@
     "tsconfig": "workspace:*",
     "tsup": "7.2.0",
     "typescript": "^5.1.6",
-    "vite": "^4.4.9",
+    "vite": "^4.5.0",
     "vitest": "^0.34.1",
     "vitest-dom": "^0.1.0",
     "vue": "^3.3.4"

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -16,6 +16,7 @@
     "@zoom-image/vue": "workspace:*",
     "eslint-config-custom": "workspace:*",
     "eslint-plugin-vue": "^9.18.1",
+    "vite": "^4.5.0",
     "vitepress": "1.0.0-rc.25",
     "vue": "^3.3.8"
   }

diff --git a/packages/docs/src/.vitepress/config.mts b/packages/docs/src/.vitepress/config.mts
@@ -1,5 +1,6 @@
 import { createRequire } from "node:module"
 import Unocss from "unocss/vite"
+import { PluginOption } from "vite"
 import { defineConfig } from "vitepress"
 const require = createRequire(import.meta.url)
 const pkg = require("@zoom-image/core/package.json")
@@ -144,6 +145,6 @@ export default defineConfig({
           },
         },
       }),
-    ],
+    ] as PluginOption[],
   },
 })