From 50088b6729c11e78f18b96f1494c362753b10b30 Mon Sep 17 00:00:00 2001 From: Nam Nguyen Date: Thu, 4 May 2023 10:47:41 -0300 Subject: [PATCH] docs: finalize documentation --- docs/.vitepress/config.ts | 5 ++- docs/api/createZoomImageHover.md | 37 ++++++++++++++++ docs/api/createZoomImageWheel.md | 28 +++++++++++++ docs/api/index.md | 4 ++ docs/api/zoomOnHover.md | 1 - docs/api/zoomOnWheel.md | 1 - docs/examples/preact.md | 2 + docs/examples/react.md | 2 + docs/examples/svelte.md | 2 + docs/examples/vanilla.md | 2 + docs/examples/vue.md | 2 + docs/guide.md | 72 ++++++++++++++++++++++++++++++-- examples/preact-ts/package.json | 1 + packages/core/package.json | 2 + pnpm-lock.yaml | 3 ++ tsup.config.ts | 5 ++- 16 files changed, 160 insertions(+), 9 deletions(-) create mode 100644 docs/api/createZoomImageHover.md create mode 100644 docs/api/createZoomImageWheel.md create mode 100644 docs/api/index.md delete mode 100644 docs/api/zoomOnHover.md delete mode 100644 docs/api/zoomOnWheel.md diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 66fea333..5f29e814 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -52,9 +52,10 @@ export default defineConfig({ }, { text: "API", + link: "/api/", items: [ - { text: "createZoomImageHover", link: "/api/zoomOnHover" }, - { text: "createZoomImageWheel", link: "/api/zoomOnWheel" }, + { text: "createZoomImageHover", link: "/api/createZoomImageHover" }, + { text: "createZoomImageWheel", link: "/api/createZoomImageWheel" }, ], }, ], diff --git a/docs/api/createZoomImageHover.md b/docs/api/createZoomImageHover.md new file mode 100644 index 00000000..23d1d302 --- /dev/null +++ b/docs/api/createZoomImageHover.md @@ -0,0 +1,37 @@ +# With zoomOnHover + +### Basic Usage + +```ts +const { cleanup } = createZoomImageHover(container) + +// Call cleanup when you don't need it anymore +cleanup() +``` + +### Type Declaration + +```ts +type ZoomImageHoverOptions = { + // The size of zoomed window where zoomed image will be displayed + customZoom?: { width: number; height: number } + // The source of zoomed image + zoomImageSource?: string + // The css class will be added to zoom lens element + zoomLensClass?: string + // The css class will be added to zoomed image element + zoomImageClass?: string + // The container of zoomed image + zoomTarget?: HTMLElement + // By default, zoomed image will have a scale of 1 + // The smaller the value, the bigger zoomed image and smaller zoom lens + scaleFactor?: number +} + +function createZoomImageHover( + container: HTMLElement, + options?: ZoomImageHoverOptions, +): { + cleanup: () => void +} +``` diff --git a/docs/api/createZoomImageWheel.md b/docs/api/createZoomImageWheel.md new file mode 100644 index 00000000..72e959db --- /dev/null +++ b/docs/api/createZoomImageWheel.md @@ -0,0 +1,28 @@ +# With zoomOnWheel + +### Basic Usage + +```ts +const { cleanup } = createZoomImageWheel(container) + +// Call cleanup when you don't need it anymore +cleanup() +``` + +### Type Declaration + +```ts +type ZoomImageWheelProps = { + // Maximum zoom scale, default is 4 + maxZoom?: number + // Zoom ratio when scrolling, default is 0.1 + wheelZoomRatio?: number +} + +function createZoomImageWheel( + container: HTMLElement, + options?: ZoomImageWheelProps, +): { + cleanup: () => void +} +``` diff --git a/docs/api/index.md b/docs/api/index.md new file mode 100644 index 00000000..4f37d1b5 --- /dev/null +++ b/docs/api/index.md @@ -0,0 +1,4 @@ +# API Reference + +- [createZoomImageWheel](/api/createZoomImageWheel) +- [createZoomImageHover](/api/createZoomImageHover) diff --git a/docs/api/zoomOnHover.md b/docs/api/zoomOnHover.md deleted file mode 100644 index e421847f..00000000 --- a/docs/api/zoomOnHover.md +++ /dev/null @@ -1 +0,0 @@ -# With zoomOnHover diff --git a/docs/api/zoomOnWheel.md b/docs/api/zoomOnWheel.md deleted file mode 100644 index 34e64188..00000000 --- a/docs/api/zoomOnWheel.md +++ /dev/null @@ -1 +0,0 @@ -# With zoomOnWheel diff --git a/docs/examples/preact.md b/docs/examples/preact.md index 05e85339..f3787f12 100644 --- a/docs/examples/preact.md +++ b/docs/examples/preact.md @@ -2,6 +2,8 @@ aside: false --- +# Preact Example + diff --git a/docs/examples/react.md b/docs/examples/react.md index b319f596..20556ccf 100644 --- a/docs/examples/react.md +++ b/docs/examples/react.md @@ -2,6 +2,8 @@ aside: false --- +# React Example + diff --git a/docs/examples/svelte.md b/docs/examples/svelte.md index 07786ccf..f24e4a00 100644 --- a/docs/examples/svelte.md +++ b/docs/examples/svelte.md @@ -2,6 +2,8 @@ aside: false --- +# Svelte Example + diff --git a/docs/examples/vanilla.md b/docs/examples/vanilla.md index a2568323..17db1560 100644 --- a/docs/examples/vanilla.md +++ b/docs/examples/vanilla.md @@ -2,6 +2,8 @@ aside: false --- +# Vanilla JS Example + diff --git a/docs/examples/vue.md b/docs/examples/vue.md index c981d95f..8633e4dc 100644 --- a/docs/examples/vue.md +++ b/docs/examples/vue.md @@ -2,6 +2,8 @@ aside: false --- +# Vue Example + diff --git a/docs/guide.md b/docs/guide.md index df84760c..37860a85 100644 --- a/docs/guide.md +++ b/docs/guide.md @@ -1,7 +1,71 @@ # Get Started -Learn VueUse with video +Zoom Image is a small collection of utilities for zooming image on the web. It is written in pure TypeScript and has no +dependencies. The library is built with framework agnostic in mind, so it can be used with any framework or even without -VueUse is a collection of utility functions based on -[Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html). We assume you are already familiar with -the basic ideas of [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) before you continue. +## Installation + +::: code-group + +```sh [npm] +$ npm install @zoom-image/core +``` + +```sh [pnpm] +$ pnpm add @zoom-image/core +``` + +```sh [yarn] +$ yarn add @zoom-image/core +``` + +::: + +### CDN + +```html + + +``` + +It will be exposed to global as `window.ZoomImage` + +## Usage Example + +Simply importing the utilities you need from `@zoom-image/core` + +```html +
+ Large Pic +
+``` + +```css +.container { + width: 300px; + height: 300px; + cursor: crosshair; +} + +.image { + width: 100%; + height: 100%; +} +``` + +```js +import { createZoomImageWheel } from "@zoom-image/core" + +const container = document.getElementById("container") +createZoomImageWheel(container) +``` + +Refer to [API section](/api/) for more details. + +## Demos + +- [Vanilla JS](/examples/vanilla) +- [Vue](/examples/vue) +- [React](/examples/react) +- [Preact](/examples/preact) +- [Svelte](/examples/svelte) diff --git a/examples/preact-ts/package.json b/examples/preact-ts/package.json index 531beecc..45793821 100644 --- a/examples/preact-ts/package.json +++ b/examples/preact-ts/package.json @@ -15,6 +15,7 @@ "devDependencies": { "@preact/preset-vite": "^2.5.0", "typescript": "^5.0.4", + "unocss": "^0.51.8", "vite": "^4.3.4" } } diff --git a/packages/core/package.json b/packages/core/package.json index 0afad0c8..3fa6ba78 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -15,6 +15,8 @@ "types": "dist/index.d.ts", "main": "dist/index.js", "module": "dist/index.mjs", + "unpkg": "dist/index.global.js", + "jsdelivr": "dist/index.global.js", "files": [ "dist", "src" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 67e34dfe..59ed32ee 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -62,6 +62,9 @@ importers: typescript: specifier: ^5.0.4 version: 5.0.4 + unocss: + specifier: ^0.51.8 + version: 0.51.8(postcss@8.4.23)(vite@4.3.4) vite: specifier: ^4.3.4 version: 4.3.4(@types/node@18.16.3) diff --git a/tsup.config.ts b/tsup.config.ts index 9ceb6005..9e8e7b44 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -3,6 +3,9 @@ import { defineConfig } from "tsup" export default defineConfig({ clean: true, target: "esnext", - format: ["esm", "cjs"], + format: ["esm", "cjs", "iife"], sourcemap: true, + minify: true, + globalName: "ZoomImage", + name: "zoom-image", })