├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .github
    └── workflows
    │   ├── create-release.yml
    │   └── gh-pages.yml
├── .gitignore
├── .husky
    ├── commit-msg
    └── pre-commit
├── .lintstagedrc
├── .npmrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── commitlint.config.cjs
├── example
    ├── App.vue
    ├── index.html
    ├── main.ts
    ├── public
    │   └── favicon.ico
    ├── views
    │   └── example
    │   │   ├── ApiExample.vue
    │   │   ├── ComponentExample.vue
    │   │   ├── DirectiveExample.vue
    │   │   └── index.vue
    └── vite.config.ts
├── package.json
├── pnpm-lock.yaml
├── src
    ├── api.ts
    ├── component.vue
    ├── directive.ts
    ├── index.ts
    └── shims-vue.d.ts
├── tsconfig.json
├── tsconfig.node.json
├── types
    └── index.d.ts
└── vite.config.ts


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | public
4 | *.md
5 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@antfu",
 3 |   "rules": {
 4 |     "curly": "off",
 5 |     "no-console": "off",
 6 |     "no-unused-vars": "off",
 7 |     "@typescript-eslint/no-unused-vars": "off"
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/.github/workflows/create-release.yml:
--------------------------------------------------------------------------------
 1 | name: CI Create Release
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - 'v*'
 7 | jobs:
 8 |   build:
 9 |     name: Create Release
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - name: Checkout code
13 |         uses: actions/checkout@v3
14 |       - name: Create Release
15 |         id: create_release
16 |         uses: actions/create-release@v1
17 |         env:
18 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
19 |         with:
20 |           tag_name: ${{ github.ref }}
21 |           release_name: Release ${{ github.ref }}
22 |           body: |
23 |             Please refer to [CHANGELOG.md](https://github.com/mirari/v-viewer/blob/master/CHANGELOG.md) for details.
24 |           draft: false
25 |           prerelease: false
26 | 


--------------------------------------------------------------------------------
/.github/workflows/gh-pages.yml:
--------------------------------------------------------------------------------
 1 | name: Github Pages Deploy
 2 | on:
 3 |   push:
 4 |     branches:
 5 |       - master
 6 | jobs:
 7 |   build-and-deploy:
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - name: Checkout 🛎️
11 |         uses: actions/checkout@v3
12 |       - name: Install and Build
13 |         run: |
14 |           npm i pnpm -g
15 |           pnpm i
16 |           pnpm run build
17 |           pnpm run preview:build
18 |       - name: Deploy 🚀
19 |         uses: JamesIves/github-pages-deploy-action@v4
20 |         with:
21 |           branch: gh-pages
22 |           folder: example/dist
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /example/dist
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | npx --no-install commitlint --edit $1
5 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | npx lint-staged
5 | 


--------------------------------------------------------------------------------
/.lintstagedrc:
--------------------------------------------------------------------------------
1 | {
2 |   "*.ts": [
3 |     "eslint --fix"
4 |   ],
5 |   "*.vue": [
6 |     "eslint --fix"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | auto-install-peers=true
3 | strict-peer-dependencies=false
4 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
  4 | 
  5 | ### [3.0.21](https://github.com/mirari/v-viewer/compare/v3.0.20...v3.0.21) (2024-11-02)
  6 | 
  7 | 
  8 | ### Bug Fixes
  9 | 
 10 | * fix type declaration ([e16928b](https://github.com/mirari/v-viewer/commit/e16928b3badcdbc2a79f3ab2f06a7feeb0700521))
 11 | 
 12 | ### [3.0.20](https://github.com/mirari/v-viewer/compare/v3.0.19...v3.0.20) (2024-09-26)
 13 | 
 14 | 
 15 | ### Bug Fixes
 16 | 
 17 | * fix package setting mistake ([6e54d96](https://github.com/mirari/v-viewer/commit/6e54d9643bc015710ca5eb1d971569c1f1336589))
 18 | 
 19 | ### [3.0.19](https://github.com/mirari/v-viewer/compare/v3.0.18...v3.0.19) (2024-09-26)
 20 | 
 21 | 
 22 | ### Bug Fixes
 23 | 
 24 | * fix package setting mistake ([f930882](https://github.com/mirari/v-viewer/commit/f930882443b60bd23f62c88c0634692f9237bd5c))
 25 | 
 26 | ### [3.0.18](https://github.com/mirari/v-viewer/compare/v3.0.17...v3.0.18) (2024-09-26)
 27 | 
 28 | 
 29 | ### Bug Fixes
 30 | 
 31 | * support iife ([02662af](https://github.com/mirari/v-viewer/commit/02662afd89f8f307a0e825fd601a710939a463d0))
 32 | 
 33 | ### [3.0.17](https://github.com/mirari/v-viewer/compare/v3.0.16...v3.0.17) (2024-09-26)
 34 | 
 35 | 
 36 | ### Bug Fixes
 37 | 
 38 | * fix package setting mistake ([4465979](https://github.com/mirari/v-viewer/commit/4465979cc8f07d924300cc7e802f752902f637bb))
 39 | 
 40 | ### [3.0.16](https://github.com/mirari/v-viewer/compare/v3.0.15...v3.0.16) (2024-09-26)
 41 | 
 42 | ### [3.0.15](https://github.com/mirari/v-viewer/compare/v3.0.14...v3.0.15) (2024-09-26)
 43 | 
 44 | 
 45 | ### Bug Fixes
 46 | 
 47 | * fix the issue of incorrect entry reference caused by the unspecified type in package.json.[#338](https://github.com/mirari/v-viewer/issues/338) ([f493490](https://github.com/mirari/v-viewer/commit/f4934906d7c90c79571c7bf3edb160cc6b34e2f8))
 48 | 
 49 | ### [3.0.14](https://github.com/mirari/v-viewer/compare/v3.0.13...v3.0.14) (2024-01-06)
 50 | 
 51 | 
 52 | ### Bug Fixes
 53 | 
 54 | * update dependencies ([e9003e0](https://github.com/mirari/v-viewer/commit/e9003e0902f7cc8c0d03d9ed9b520580c263ade7))
 55 | 
 56 | ### [3.0.13](https://github.com/mirari/v-viewer/compare/v3.0.9...v3.0.13) (2024-01-03)
 57 | 
 58 | 
 59 | ### Bug Fixes
 60 | 
 61 | * **common:** remove unnecessary configuration to fit vite(SSR) correctly ([d8e2100](https://github.com/mirari/v-viewer/commit/d8e2100086b2058bbd8c225ddb5b990a45ea1149))
 62 | * **component:** fix the problem of not updating when changing options ([1b2e3ae](https://github.com/mirari/v-viewer/commit/1b2e3ae26b947d80cbea3f4a25ea2ccf9e59b5fd)), closes [#197](https://github.com/mirari/v-viewer/issues/197)
 63 | * modify util function ([d05dd3c](https://github.com/mirari/v-viewer/commit/d05dd3c0a5096e32fce2e4f020fe8775f3dfeb7c))
 64 | 
 65 | ### [3.0.12](https://github.com/mirari/v-viewer/compare/v3.0.11...v3.0.12) (2024-01-03)
 66 | 
 67 | ### [3.0.11](https://github.com/mirari/v-viewer/compare/v3.0.9...v3.0.11) (2022-10-25)
 68 | 
 69 | 
 70 | ### Bug Fixes
 71 | 
 72 | * **common:** remove unnecessary configuration to fit vite(SSR) correctly ([d8e2100](https://github.com/mirari/v-viewer/commit/d8e2100086b2058bbd8c225ddb5b990a45ea1149))
 73 | * **component:** fix the problem of not updating when changing options ([1b2e3ae](https://github.com/mirari/v-viewer/commit/1b2e3ae26b947d80cbea3f4a25ea2ccf9e59b5fd)), closes [#197](https://github.com/mirari/v-viewer/issues/197)
 74 | 
 75 | ### [3.0.10](https://github.com/mirari/v-viewer/compare/v3.0.9...v3.0.10) (2021-09-21)
 76 | 
 77 | 
 78 | ### Bug Fixes
 79 | 
 80 | * **component:** fix the problem of not updating when changing options ([d7afcdb](https://github.com/mirari/v-viewer/commit/d7afcdbf5d597f3971e0bea43ce36f390972e312)), closes [#197](https://github.com/mirari/v-viewer/issues/197)
 81 | 
 82 | ### [3.0.9](https://github.com/mirari/v-viewer/compare/v3.0.8...v3.0.9) (2021-06-02)
 83 | 
 84 | 
 85 | ### Bug Fixes
 86 | 
 87 | * **common:** fix dts file ([f6163ff](https://github.com/mirari/v-viewer/commit/f6163ff5b316a940d70fb842605f220b7f378416))
 88 | 
 89 | ### [3.0.8](https://github.com/mirari/v-viewer/compare/v3.0.7...v3.0.8) (2021-06-02)
 90 | 
 91 | ### [3.0.7](https://github.com/mirari/v-viewer/compare/v3.0.6...v3.0.7) (2021-06-02)
 92 | 
 93 | 
 94 | ### Bug Fixes
 95 | 
 96 | * **common:** fix tsd file; update readme ([2295dcc](https://github.com/mirari/v-viewer/commit/2295dcc338dfb296f4780542c6d38921284c6c9d))
 97 | 
 98 | ### [3.0.6](https://github.com/mirari/v-viewer/compare/v3.0.5...v3.0.6) (2021-05-31)
 99 | 
100 | ### 3.0.5 (2021-05-31)
101 | 
102 | 
103 | ### Bug Fixes
104 | 
105 | * **api:** fix type declaration ([9987966](https://github.com/mirari/v-viewer/commit/9987966db12372186adc95a5b37643c9ce1587bb))
106 | * **common:** fix api option ([f54bcb2](https://github.com/mirari/v-viewer/commit/f54bcb266c4fa83492a9dfaa2e513960727b9873))
107 | * **common:** fix umd build config ([3fc6477](https://github.com/mirari/v-viewer/commit/3fc64772fc7b7271f233b239c2c26d39f16d3396))
108 | * **directive:** fix default options ([c7ffa87](https://github.com/mirari/v-viewer/commit/c7ffa87b6d9259e2f304f85467e1d5609f53e912))
109 | 
110 | ### [3.0.4](https://github.com/mirari/v-viewer/compare/v3.0.3...v3.0.4) (2021-05-30)
111 | 
112 | 
113 | ### Bug Fixes
114 | 
115 | * **api:** fix type declaration ([9987966](https://github.com/mirari/v-viewer/commit/9987966db12372186adc95a5b37643c9ce1587bb))
116 | 
117 | ### [3.0.3](https://github.com/mirari/v-viewer/compare/v3.0.2...v3.0.3) (2021-05-30)
118 | 
119 | ### [3.0.2](https://github.com/mirari/v-viewer/compare/v3.0.1...v3.0.2) (2021-05-30)
120 | 
121 | 
122 | ### Bug Fixes
123 | 
124 | * **common:** fix api option ([f54bcb2](https://github.com/mirari/v-viewer/commit/f54bcb266c4fa83492a9dfaa2e513960727b9873))
125 | 
126 | ### [3.0.1](https://github.com/mirari/v-viewer/compare/v3.0.0...v3.0.1) (2021-05-30)
127 | 
128 | 
129 | ### Bug Fixes
130 | 
131 | * **common:** fix umd build config ([3fc6477](https://github.com/mirari/v-viewer/commit/3fc64772fc7b7271f233b239c2c26d39f16d3396))
132 | 
133 | ## 3.0.0 (2021-05-30)
134 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # v-viewer
  2 | 
  3 | Image viewer component for vue, supports rotation, scale, zoom and so on, based on [viewer.js](https://github.com/fengyuanchen/viewerjs)
  4 | 
  5 | [![npm version](https://img.shields.io/npm/v/v-viewer.svg)](https://www.npmjs.com/package/v-viewer)
  6 | [![language](https://img.shields.io/badge/language-Vue3-brightgreen.svg)](https://www.npmjs.com/package/v-viewer)
  7 | 
  8 | [![npm version](https://img.shields.io/npm/v/v-viewer/legacy.svg)](https://www.npmjs.com/package/v-viewer)
  9 | [![language](https://img.shields.io/badge/language-Vue2-brightgreen.svg)](https://www.npmjs.com/package/v-viewer)
 10 | 
 11 | [![npm download](https://img.shields.io/npm/dw/v-viewer.svg)](https://www.npmjs.com/package/v-viewer)
 12 | [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/) 
 13 | 
 14 | ## [v-viewer for vue2](https://github.com/mirari/v-viewer/tree/v2)
 15 | 
 16 | ## [Live demo](https://mirari.github.io/vue3-viewer/)
 17 | 
 18 | ## Quick Example
 19 | 
 20 | - [directive](https://codepen.io/mirari/pen/yLMPPWy)
 21 | - [component](https://codepen.io/mirari/pen/ZEeaaWZ)
 22 | - [api](https://codepen.io/mirari/pen/qBrVpNV)
 23 | - [thumbnail & source](https://codepen.io/mirari/pen/Vwpryax)
 24 | - [viewer callback](https://codepen.io/mirari/pen/eYveypz)
 25 | - [custom toolbar](https://codepen.io/mirari/pen/ZEXqyPq)
 26 | - [filter images](https://codepen.io/mirari/pen/mdWqpwa)
 27 | - [change images](https://codepen.io/mirari/pen/ExWbovw)
 28 | 
 29 | ## [中文文档](https://mirari.cc/posts/vue3-viewer)
 30 | 
 31 | ## Installation
 32 | 
 33 | Install from NPM
 34 | 
 35 | ```bash
 36 | npm install v-viewer viewerjs
 37 | ```
 38 | 
 39 | ## Usage
 40 | 
 41 | To use `v-viewer`, simply import it and the `css` file, and call `app.use()` to install.
 42 | 
 43 | The component, directive and api will be installed together in the global.
 44 | 
 45 | Two different API styles are both supported: **Options API** and **Composition API**.
 46 | 
 47 | ```ts
 48 | import { createApp } from 'vue'
 49 | import App from './App.vue'
 50 | import 'viewerjs/dist/viewer.css'
 51 | import VueViewer from 'v-viewer'
 52 | const app = createApp(App)
 53 | app.use(VueViewer)
 54 | app.mount('#app')
 55 | ```
 56 | 
 57 | ```vue
 58 | <template>
 59 |   <div>
 60 |     <!-- directive -->
 61 |     <div class="images" v-viewer>
 62 |       <img v-for="src in images" :key="src" :src="src">
 63 |     </div>
 64 |     <!-- component -->
 65 |     <viewer :images="images">
 66 |       <img v-for="src in images" :key="src" :src="src">
 67 |     </viewer>
 68 |     <!-- api -->
 69 |     <button type="button" @click="show">Click to show</button>
 70 |   </div>
 71 | </template>
 72 | <!-- Options API -->
 73 | <script lang="ts">
 74 |   import { defineComponent } from 'vue'
 75 |   export default defineComponent({
 76 |     data() {
 77 |       return {
 78 |         images: [
 79 |           "https://picsum.photos/200/200",
 80 |           "https://picsum.photos/300/200",
 81 |           "https://picsum.photos/250/200"
 82 |         ]
 83 |       }
 84 |     },
 85 |     methods: {
 86 |       show() {
 87 |         this.$viewerApi({
 88 |           images: this.images
 89 |         })
 90 |       }
 91 |     }
 92 |   })
 93 | </script>
 94 | <!-- Composition API -->
 95 | <!-- <script lang="ts" setup>
 96 |   import { api as viewerApi } from 'v-viewer'
 97 |   const images = [
 98 |     "https://picsum.photos/200/200",
 99 |     "https://picsum.photos/300/200",
100 |     "https://picsum.photos/250/200"
101 |   ]
102 |   const show = () => {
103 |     viewerApi({
104 |       images
105 |     })
106 |   }
107 | </script> -->
108 | ```
109 | 
110 | ### Support UMD
111 | 
112 | #### Browser
113 | 
114 | ```html
115 | <link href="//unpkg.com/viewerjs/dist/viewer.css" rel="stylesheet">
116 | <script src="//unpkg.com/vue"></script>
117 | <script src="//unpkg.com/viewerjs/dist/viewer.js"></script>
118 | <script src="//unpkg.com/v-viewer/dist/index.umd.js"></script>
119 | <script>
120 |   app.use(VueViewer.default)
121 | </script>
122 | ```
123 | 
124 | #### CommonJS
125 | 
126 | ```javascript
127 | var VueViewer = require('VueViewer')
128 | ```
129 | 
130 | #### AMD
131 | 
132 | ```javascript
133 | require(['VueViewer'], function (VueViewer) {});
134 | ```
135 | 
136 | ### Usage of directive
137 | 
138 | Just add the directive `v-viewer` to any element, then all `img` elements in it will be handled by `viewer`.
139 | 
140 | You can set the options like this: `v-viewer="{inline: true}"`
141 | 
142 | Get the element by selector and then use `el.$viewer` to get the `viewer` instance if you need.
143 | 
144 | ```vue
145 | <template>
146 |   <div>
147 |     <div class="images" v-viewer="{movable: false}">
148 |       <img v-for="src in images" :src="src" :key="src">
149 |     </div>
150 |     <button type="button" @click="show">Show</button>
151 |   </div>
152 | </template>
153 | <!-- Options API -->
154 | <script lang="ts">
155 |   import { defineComponent } from 'vue'
156 |   import 'viewerjs/dist/viewer.css'
157 |   import { directive as viewer } from "v-viewer"
158 |   export default defineComponent({
159 |     directives: {
160 |       viewer: viewer({
161 |         debug: true
162 |       })
163 |     },
164 |     data() {
165 |       return {
166 |         images: [
167 |           "https://picsum.photos/200/200",
168 |           "https://picsum.photos/300/200",
169 |           "https://picsum.photos/250/200"
170 |         ]
171 |       }
172 |     },
173 |     methods: {
174 |       show () {
175 |         const viewer = this.$el.querySelector('.images').$viewer
176 |         viewer.show()
177 |       }
178 |     }
179 |   })
180 | </script>
181 | <!-- Composition API -->
182 | <!-- <script lang="ts" setup>
183 |   import 'viewerjs/dist/viewer.css'
184 |   import { directive as viewer } from "v-viewer"
185 |   const vViewer = viewer({
186 |     debug: true
187 |   })
188 |   const images = [
189 |     "https://picsum.photos/200/200",
190 |     "https://picsum.photos/300/200",
191 |     "https://picsum.photos/250/200"
192 |   ]
193 |   const show = () => {
194 |     const viewer = document.querySelector('.images').$viewer
195 |     viewer.show()
196 |   }
197 | </script> -->
198 | ```
199 | 
200 | #### Directive modifiers
201 | 
202 | ##### static
203 | 
204 | The `viewer` instance will be created only once after the directive binded.
205 | 
206 | If you're sure the images inside this element won't change again, use it to avoid unnecessary re-render.
207 | 
208 | ```vue
209 | <div class="images" v-viewer.static="{inline: true}">
210 |   <img v-for="src in images" :src="src" :key="src">
211 | </div>
212 | ```
213 | 
214 | ##### rebuild
215 | 
216 | The `viewer` instance will be updated by `update` method when the source images changed (added, removed or sorted) by default.
217 | 
218 | If you encounter any display problems, try rebuilding instead of updating.
219 | 
220 | ```vue
221 | <div class="images" v-viewer.rebuild="{inline: true}">
222 |   <img v-for="src in images" :src="src" :key="src">
223 | </div>
224 | ```
225 | 
226 | ### Usage of component
227 | 
228 | You can simply import the component and register it locally too.
229 | 
230 | ```vue
231 | <template>
232 |   <div>
233 |     <viewer :images="images"
234 |             @inited="inited"
235 |             class="viewer"
236 |             ref="viewer"
237 |             >
238 |       <template #default="scope">
239 |         <img v-for="src in scope.images" :src="src" :key="src">
240 |         {{scope.options}}
241 |       </template>
242 |     </viewer>
243 |     <button type="button" @click="show">Show</button>
244 |   </div>
245 | </template>
246 | <!-- Options API -->
247 | <script lang="ts">
248 |   import { defineComponent } from 'vue'
249 |   import 'viewerjs/dist/viewer.css'
250 |   import { component as Viewer } from "v-viewer"
251 |   export default defineComponent({
252 |     components: {
253 |       Viewer,
254 |     },
255 |     data() {
256 |       return {
257 |         images: [
258 |           "https://picsum.photos/200/200",
259 |           "https://picsum.photos/300/200",
260 |           "https://picsum.photos/250/200"
261 |         ]
262 |       }
263 |     },
264 |     methods: {
265 |       inited (viewer) {
266 |         this.$viewer = viewer
267 |       },
268 |       show () {
269 |         this.$viewer.show()
270 |       }
271 |     }
272 |   })
273 | </script>
274 | <!-- Composition API -->
275 | <!-- <script lang="ts" setup>
276 |   import 'viewerjs/dist/viewer.css'
277 |   import { component as Viewer } from "v-viewer"
278 |   const images = [
279 |     "https://picsum.photos/200/200",
280 |     "https://picsum.photos/300/200",
281 |     "https://picsum.photos/250/200"
282 |   ]
283 |   let $viewer:any = null
284 |   const inited = (viewer) => {
285 |     $viewer = viewer
286 |   }
287 |   const show = () => {
288 |     $viewer.show()
289 |   }
290 | </script> -->
291 | ```
292 | 
293 | #### Component props
294 | 
295 | ##### images
296 | 
297 | - Type: `Array`
298 | 
299 | ##### trigger
300 | 
301 | - Type: `Object`
302 | 
303 | You can replace `images` with `trigger`, to accept any type of prop.
304 | when the `trigger` changes, the component will re-render the viewer.
305 | 
306 | ```vue
307 | <viewer :trigger="externallyGeneratedHtmlWithImages">
308 |   <div v-html="externallyGeneratedHtmlWithImages"/>
309 | </viewer>
310 | ```
311 | 
312 | ##### rebuild
313 | 
314 | - Type: `Boolean`
315 | - Default: `false`
316 | 
317 | The viewer instance will be updated by `update` method when the source images changed (added, removed or sorted) by default.
318 | 
319 | If you encounter any display problems, try rebuilding instead of updating.
320 | 
321 | ```vue
322 | <viewer
323 |   ref="viewer"
324 |   :options="options"
325 |   :images="images"
326 |   rebuild
327 |   class="viewer"
328 |   @inited="inited"
329 | >
330 |   <template #default="scope">
331 |     <img v-for="src in scope.images" :src="src" :key="src">
332 |     {{scope.options}}
333 |   </template>
334 | </viewer>
335 | ```
336 | 
337 | #### Component events
338 | 
339 | ##### inited
340 | 
341 | - viewer: `Viewer`
342 | 
343 | Listen for the `inited` event to get the `viewer` instance, or use `this.refs.xxx.$viewer`.
344 | 
345 | ### Usage of api
346 | 
347 | > Only available in modal mode.
348 | 
349 | You can call the function: `this.$viewerApi({options: {}, images: []})` to show gallery without rendering the `img` elements yourself.
350 | 
351 | The function returns the current viewer instance.
352 | 
353 | ```vue
354 | <template>
355 |   <div>
356 |     <button type="button" class="button" @click="previewURL">URL Array</button>
357 |     <button type="button" class="button" @click="previewImgObject">Img-Object Array</button>
358 |   </div>
359 | </template>
360 | <!-- Options API -->
361 | <script lang="ts">
362 |   import { defineComponent } from 'vue'
363 |   import 'viewerjs/dist/viewer.css'
364 |   import { api as viewerApi } from "v-viewer"
365 |   export default defineComponent({
366 |     data() {
367 |       return {
368 |         sourceImageURLs: [
369 |           'https://picsum.photos/200/200?random=1',
370 |           'https://picsum.photos/200/200?random=2'
371 |         ],
372 |         sourceImageObjects: [
373 |           {
374 |             'src': 'https://picsum.photos/200/200?random=3',
375 |             'data-source': 'https://picsum.photos/800/800?random=3'
376 |           },
377 |           {
378 |             'src': 'https://picsum.photos/200/200?random=4',
379 |             'data-source': 'https://picsum.photos/800/800?random=4'
380 |           }
381 |         ]
382 |       }
383 |     },
384 |     methods: {
385 |       previewURL () {
386 |         // If you use the `app.use` full installation, you can use `this.$viewerApi` directly like this
387 |         const $viewer = this.$viewerApi({
388 |           images: this.sourceImageURLs
389 |         })
390 |       },
391 |       previewImgObject () {
392 |         // Or you can just import the api method and call it.
393 |         const $viewer = viewerApi({
394 |           options: {
395 |             toolbar: true,
396 |             url: 'data-source',
397 |             initialViewIndex: 1
398 |           },
399 |           images: this.sourceImageObjects
400 |         })
401 |       }
402 |     }
403 |   })
404 | </script>
405 | <!-- Composition API -->
406 | <!-- <script lang="ts" setup>
407 | import 'viewerjs/dist/viewer.css'
408 | import { api as viewerApi } from 'v-viewer'
409 | const sourceImageURLs = [
410 |   'https://picsum.photos/200/200?random=1',
411 |   'https://picsum.photos/200/200?random=2'
412 | ]
413 | const sourceImageObjects = [
414 |   {
415 |     src: 'https://picsum.photos/200/200?random=3',
416 |     'data-source': 'https://picsum.photos/800/800?random=3'
417 |   },
418 |   {
419 |     src: 'https://picsum.photos/200/200?random=4',
420 |     'data-source': 'https://picsum.photos/800/800?random=4'
421 |   }
422 | ]
423 | const previewURL = () => {
424 |   // If you use the `app.use` full installation, you can use `this.$viewerApi` directly like this
425 |   const $viewer = this.$viewerApi({
426 |     images: sourceImageURLs
427 |   })
428 | }
429 | const previewImgObject = () => {
430 |   // Or you can just import the api method and call it.
431 |   const $viewer = viewerApi({
432 |     options: {
433 |       toolbar: true,
434 |       url: 'data-source',
435 |       initialViewIndex: 1
436 |     },
437 |     images: sourceImageObjects
438 |   })
439 | }
440 | </script> -->
441 | ```
442 | 
443 | ## Options & Methods of Viewer
444 | 
445 | Refer to [viewer.js](https://github.com/fengyuanchen/viewerjs).
446 | 
447 | ## Plugin options
448 | 
449 | ### name
450 | 
451 | - Type: `String`
452 | - Default: `viewer`
453 | 
454 | If you need to avoid name conflict, you can import it like this:
455 | ```ts
456 | import { createApp } from 'vue'
457 | import 'viewerjs/dist/viewer.css'
458 | import VueViewer from 'v-viewer'
459 | import App from './App.vue'
460 | 
461 | export const app = createApp(App)
462 | app.use(VueViewer, {
463 |   name: 'vuer',
464 |   debug: true,
465 | })
466 | app.mount('#app')
467 | 
468 | ```
469 | 
470 | ```vue
471 | <template>
472 | <div>
473 |   <!-- directive name -->
474 |   <div class="images" v-vuer="{movable: false}">
475 |     <img v-for="src in images" :src="src" :key="src">
476 |   </div>
477 |   <button type="button" @click="show">Show</button>
478 |   <!-- component name -->
479 |   <vuer :images="images">
480 |     <img v-for="src in images" :src="src" :key="src">
481 |   </vuer>
482 |   </div>
483 | </template>
484 | <!-- Options API -->
485 | <script lang="ts">
486 |   import { defineComponent } from 'vue'
487 |   export default defineComponent({
488 |     data() {
489 |       return {
490 |         images: [
491 |           "https://picsum.photos/200/200",
492 |           "https://picsum.photos/300/200",
493 |           "https://picsum.photos/250/200"
494 |         ]
495 |       };
496 |     },
497 |     methods: {
498 |       show () {
499 |         // viewerjs instance name
500 |         const vuer = this.$el.querySelector('.images').$vuer
501 |         vuer.show()
502 |         // api name
503 |         this.$vuerApi({
504 |           images: this.images
505 |         })
506 |       }
507 |     }
508 |   })
509 | </script>
510 | <!-- Composition API -->
511 | <script lang="ts" setup>
512 |   import { api as vuerApi } from 'v-viewer'
513 |   const images = [
514 |     "https://picsum.photos/200/200",
515 |     "https://picsum.photos/300/200",
516 |     "https://picsum.photos/250/200"
517 |   ]
518 |   const show = () => {
519 |     // viewerjs instance name
520 |     const vuer = document.querySelector('.images').$vuer
521 |     vuer.show()
522 |     // api name
523 |     vuerApi({
524 |       images
525 |     })
526 |   }
527 | </script>
528 | ```
529 | 
530 | ### defaultOptions
531 | 
532 | - Type: `Object`
533 | - Default: `undefined`
534 | 
535 | If you need to set the viewer default options, you can import it like this:
536 | 
537 | ```ts
538 | import { createApp } from 'vue'
539 | import 'viewerjs/dist/viewer.css'
540 | import VueViewer from 'v-viewer'
541 | import App from './App.vue'
542 | 
543 | export const app = createApp(App)
544 | app.use(VueViewer, {
545 |   defaultOptions: {
546 |     zIndex: 9999
547 |   }
548 | })
549 | app.mount('#app')
550 | ```
551 | 
552 | And you can reset the default options at any other time:
553 | 
554 | ```javascript
555 | import VueViewer from 'v-viewer'
556 | 
557 | VueViewer.setDefaults({
558 |   zIndexInline: 2021,
559 | })
560 | ```
561 | 


--------------------------------------------------------------------------------
/commitlint.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['@commitlint/config-conventional'],
3 | }
4 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { defineComponent } from 'vue'
 3 | import Example from './views/example/index.vue'
 4 | 
 5 | export default defineComponent({
 6 |   name: 'App',
 7 |   components: {
 8 |     Example,
 9 |   },
10 | })
11 | </script>
12 | 
13 | <template>
14 |   <a
15 |     class="github-fork-ribbon"
16 |     href="https://github.com/mirari/v-viewer"
17 |     title="Fork me on GitHub"
18 |   >Fork me on GitHub</a>
19 |   <section
20 |     class="hero is-primary"
21 |     style="margin-bottom: 2em"
22 |   >
23 |     <div class="hero-body">
24 |       <div class="container">
25 |         <div class="columns is-vcentered">
26 |           <div class="column">
27 |             <p class="title is-1">
28 |               v-viewer
29 |             </p>
30 |             <p class="subtitle is-4">
31 |               Image viewer component for vue, supports rotation, scale, zoom and so on, based on <a
32 |                 href="https://github.com/fengyuanchen/viewerjs"
33 |                 target="_blank"
34 |               >viewer.js</a>
35 |             </p>
36 |           </div>
37 |         </div>
38 |       </div>
39 |     </div>
40 |   </section>
41 |   <div
42 |     class="container"
43 |     style="margin-bottom: 30px"
44 |   >
45 |     <Example />
46 |   </div>
47 |   <footer class="footer">
48 |     <div class="container">
49 |       <div class="content has-text-centered">
50 |         <p>
51 |           <a
52 |             href="http://mirari.cc"
53 |             target="_blank"
54 |             title="mirari.cc"
55 |           >
56 |             <strong>mirari.cc</strong>
57 |           </a>
58 |           ·  GitHub
59 |           <a
60 |             href="https://github.com/mirari"
61 |             target="_blank"
62 |             title="GitHub"
63 |           >
64 |             @mirari
65 |           </a>
66 |         </p>
67 |       </div>
68 |     </div>
69 |   </footer>
70 | </template>
71 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>v-viewer</title>
 8 |     <style type="text/css">
 9 |       .github-fork-ribbon{width:12.1em;height:12.1em;position:absolute;overflow:hidden;top:0;right:0;z-index:9999;pointer-events:none;font-size:13px;text-decoration:none;text-indent:-999999px}.github-fork-ribbon.fixed{position:fixed}.github-fork-ribbon:before,.github-fork-ribbon:after{box-sizing: content-box;position:absolute;display:block;width:15.38em;height:1.54em;top:3.23em;right:-3.23em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.github-fork-ribbon:before{content:"";padding:.38em 0;background-color:#a00;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.15)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:-ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.15));-webkit-box-shadow:0 .15em .23em 0 rgba(0,0,0,0.5);-moz-box-shadow:0 .15em .23em 0 rgba(0,0,0,0.5);box-shadow:0 .15em .23em 0 rgba(0,0,0,0.5);pointer-events:auto}.github-fork-ribbon:after{content:attr(title);color:#fff;font:700 1em "Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.54em;text-decoration:none;text-shadow:0 -.08em rgba(0,0,0,0.5);text-align:center;text-indent:0;padding:.15em 0;margin:.15em 0;border-width:.08em 0;border-style:dotted;border-color:#fff;border-color:rgba(255,255,255,0.7)}.github-fork-ribbon.left-top,.github-fork-ribbon.left-bottom{right:auto;left:0}.github-fork-ribbon.left-bottom,.github-fork-ribbon.right-bottom{top:auto;bottom:0}.github-fork-ribbon.left-top:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-bottom:after{right:auto;left:-3.23em}.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.right-bottom:before,.github-fork-ribbon.right-bottom:after{top:auto;bottom:3.23em}.github-fork-ribbon.left-top:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.right-bottom:before,.github-fork-ribbon.right-bottom:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
10 |     </style>
11 |     <!--[if lt IE 9]>
12 |       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.ie.min.css" />
13 |     <![endif]-->
14 |   </head>
15 |   <body>
16 |     <div id="app"></div>
17 |     <script type="module" src="/main.ts"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/example/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import VueViewer from '../src'
 3 | import App from './App.vue'
 4 | 
 5 | import 'bulma'
 6 | import 'viewerjs/dist/viewer.css'
 7 | VueViewer.setDefaults({
 8 |   zIndexInline: 2021,
 9 |   focus: false,
10 | })
11 | export const app = createApp(App)
12 | // app.use(VueViewer, {
13 | //   debug: true,
14 | // })
15 | app.mount('#app')
16 | 


--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mirari/vue3-viewer/8fd987af20bb7964b83f44d7f48169ac295eedc9/example/public/favicon.ico


--------------------------------------------------------------------------------
/example/views/example/ApiExample.vue:
--------------------------------------------------------------------------------
  1 | <!-- Options API -->
  2 | <script lang="ts">
  3 | import {
  4 |   defineComponent,
  5 | } from 'vue'
  6 | import VueViewer, { api as viewerApi } from '../../../src'
  7 | 
  8 | VueViewer.setDefaults({
  9 |   zIndex: 2021,
 10 | })
 11 | 
 12 | const sourceImageURLs = []
 13 | const sourceImageObjects = []
 14 | const base = Math.floor(Math.random() * 60) + 10
 15 | for (let i = 0; i < 5; i++) {
 16 |   sourceImageURLs.push(`https://picsum.photos/id/${base + i}/1440/900`)
 17 |   sourceImageObjects.push({
 18 |     'data-source': `https://picsum.photos/id/${base + i}/1440/900`,
 19 |     'src': `https://picsum.photos/id/${base + i}/346/216`,
 20 |     'alt': `Image: ${base + i}`,
 21 |   })
 22 | }
 23 | 
 24 | export default defineComponent({
 25 |   name: 'ViewerExample',
 26 |   setup() {
 27 |     function previewURL() {
 28 |       const $viewer = viewerApi({
 29 |         images: sourceImageURLs,
 30 |       })
 31 |       console.log($viewer)
 32 |     }
 33 | 
 34 |     function previewImgObject() {
 35 |       const $viewer = viewerApi({
 36 |         options: {
 37 |           toolbar: true,
 38 |           url: 'data-source',
 39 |           initialViewIndex: 2,
 40 |         },
 41 |         images: sourceImageObjects,
 42 |       })
 43 |       console.log($viewer)
 44 |     }
 45 | 
 46 |     return {
 47 |       previewURL,
 48 |       previewImgObject,
 49 |     }
 50 |   },
 51 | })
 52 | </script>
 53 | <!-- Composition API -->
 54 | <!-- <script lant="ts" setup>
 55 | import VueViewer, { api as viewerApi } from '../../../src'
 56 | 
 57 | VueViewer.setDefaults({
 58 |   zIndex: 2021,
 59 | })
 60 | 
 61 | const sourceImageURLs = []
 62 | const sourceImageObjects = []
 63 | const base = Math.floor(Math.random() * 60) + 10
 64 | for (let i = 0; i < 5; i++) {
 65 |   sourceImageURLs.push(`https://picsum.photos/id/${base + i}/1440/900`)
 66 |   sourceImageObjects.push({
 67 |     'data-source': `https://picsum.photos/id/${base + i}/1440/900`,
 68 |     'src': `https://picsum.photos/id/${base + i}/346/216`,
 69 |     'alt': `Image: ${base + i}`,
 70 |   })
 71 | }
 72 | 
 73 | const previewURL = () => {
 74 |   const $viewer = viewerApi({
 75 |     images: sourceImageURLs,
 76 |   })
 77 |   console.log($viewer)
 78 | }
 79 | 
 80 | const previewImgObject = () => {
 81 |   const $viewer = viewerApi({
 82 |     options: {
 83 |       toolbar: true,
 84 |       url: 'data-source',
 85 |       initialViewIndex: 2,
 86 |     },
 87 |     images: sourceImageObjects,
 88 |   })
 89 |   console.log($viewer)
 90 | }
 91 | </script> -->
 92 | 
 93 | <template>
 94 |   <div>
 95 |     <p>
 96 |       Click to show the gallery without rendering the images yourself. <strong>Only available in modal mode.</strong>
 97 |     </p>
 98 |     <div class="control">
 99 |       <button type="button" class="button" @click="previewURL">
100 |         URL Array
101 |       </button>
102 |       <p>
103 |         ['1.png', '2.png']
104 |       </p>
105 |     </div>
106 |     <div class="control">
107 |       <button type="button" class="button" @click="previewImgObject">
108 |         Img-Object Array
109 |       </button>
110 |       <p>
111 |         [{'src':'thumbnail.png', 'data-source':'source.png'}, {'src':'thumbnail.png', 'data-source':'source.png'}]
112 |       </p>
113 |     </div>
114 |   </div>
115 | </template>
116 | 
117 | <style lang="scss" scoped>
118 |   p {
119 |     margin: 2em 0;
120 |   }
121 | </style>
122 | 


--------------------------------------------------------------------------------
/example/views/example/ComponentExample.vue:
--------------------------------------------------------------------------------
  1 | <!-- Options API -->
  2 | <script lang="ts">
  3 | import {
  4 |   defineComponent,
  5 |   reactive,
  6 |   toRefs,
  7 | } from 'vue'
  8 | import type { Viewer } from '../../../src'
  9 | import VueViewer, { component } from '../../../src'
 10 | 
 11 | VueViewer.setDefaults({
 12 |   zIndexInline: 2021,
 13 | })
 14 | 
 15 | class ImageData {
 16 |   thumbnail: string
 17 |   source: string
 18 |   title: string
 19 | 
 20 |   constructor(source: string, thumbnail: string, title: string) {
 21 |     this.source = source
 22 |     this.thumbnail = thumbnail
 23 |     this.title = title
 24 |   }
 25 | }
 26 | 
 27 | const sourceImages: ImageData[] = []
 28 | const base = Math.floor(Math.random() * 60) + 10
 29 | for (let i = 0; i < 10; i++) {
 30 |   const data = new ImageData(`https://picsum.photos/id/${base + i}/1440/900`, `https://picsum.photos/id/${base + i}/346/216`, `Image: ${base + i}`)
 31 |   sourceImages.push(data)
 32 | }
 33 | 
 34 | export default defineComponent({
 35 |   name: 'ComponentExample',
 36 |   components: {
 37 |     VViewer: component,
 38 |   },
 39 |   setup() {
 40 |     let $viewer: Viewer
 41 | 
 42 |     const state = reactive({
 43 |       form: {
 44 |         view: 2,
 45 |         zoom: -0.1,
 46 |         zoomTo: 0.8,
 47 |         rotate: 90,
 48 |         rotateTo: 180,
 49 |         scaleX: 1,
 50 |         scaleY: 1,
 51 |       },
 52 |       toggleOptions: [
 53 |         'button',
 54 |         'navbar',
 55 |         'title',
 56 |         'toolbar',
 57 |         'tooltip',
 58 |         'movable',
 59 |         'zoomable',
 60 |         'rotatable',
 61 |         'scalable',
 62 |         'transition',
 63 |         'fullscreen',
 64 |         'keyboard',
 65 |       ],
 66 |       options: {
 67 |         inline: true,
 68 |         button: true,
 69 |         navbar: true,
 70 |         title: true,
 71 |         toolbar: true,
 72 |         tooltip: true,
 73 |         movable: true,
 74 |         zoomable: true,
 75 |         rotatable: true,
 76 |         scalable: true,
 77 |         transition: true,
 78 |         fullscreen: true,
 79 |         keyboard: true,
 80 |         url: 'data-source',
 81 |       },
 82 |       images: [...sourceImages].splice(0, 5),
 83 |     })
 84 | 
 85 |     function inited(viewer: Viewer) {
 86 |       $viewer = viewer
 87 |     }
 88 | 
 89 |     function add() {
 90 |       state.images.push(sourceImages[state.images.length])
 91 |     }
 92 | 
 93 |     function remove() {
 94 |       state.images.pop()
 95 |     }
 96 | 
 97 |     function view() {
 98 |       if (state.form.view >= 0 && state.form.view < state.images.length)
 99 |         $viewer.view(state.form.view)
100 |     }
101 | 
102 |     function zoom(value: number) {
103 |       $viewer.zoom(value || state.form.zoom)
104 |     }
105 | 
106 |     function zoomTo() {
107 |       $viewer.zoomTo(state.form.zoomTo)
108 |     }
109 | 
110 |     function rotate(value: number) {
111 |       $viewer.rotate(value || state.form.rotate)
112 |     }
113 | 
114 |     function rotateTo() {
115 |       $viewer.rotateTo(state.form.rotateTo)
116 |     }
117 | 
118 |     function scaleX(value: number) {
119 |       if (value) {
120 |         $viewer.scaleX(value)
121 |       }
122 |       else {
123 |         state.form.scaleX = -state.form.scaleX
124 |         $viewer.scaleX(state.form.scaleX)
125 |       }
126 |     }
127 | 
128 |     function scaleY(value: number) {
129 |       if (value) {
130 |         $viewer.scaleY(value)
131 |       }
132 |       else {
133 |         state.form.scaleY = -state.form.scaleY
134 |         $viewer.scaleY(state.form.scaleY)
135 |       }
136 |     }
137 | 
138 |     function move(x: number, y: number) {
139 |       $viewer.move(x, y)
140 |     }
141 | 
142 |     function prev() {
143 |       $viewer.prev()
144 |     }
145 | 
146 |     function next() {
147 |       $viewer.next()
148 |     }
149 | 
150 |     function play() {
151 |       $viewer.play()
152 |     }
153 | 
154 |     function stop() {
155 |       $viewer.stop()
156 |     }
157 | 
158 |     function show() {
159 |       $viewer.show()
160 |     }
161 | 
162 |     function full() {
163 |       $viewer.full()
164 |     }
165 | 
166 |     function tooltip() {
167 |       $viewer.tooltip()
168 |     }
169 | 
170 |     function reset() {
171 |       $viewer.reset()
172 |     }
173 | 
174 |     function toggleInline(inline: boolean) {
175 |       state.options.inline = inline
176 |     }
177 | 
178 |     return {
179 |       ...toRefs(state),
180 |       inited,
181 |       add,
182 |       remove,
183 |       view,
184 |       zoom,
185 |       zoomTo,
186 |       rotate,
187 |       rotateTo,
188 |       scaleX,
189 |       scaleY,
190 |       move,
191 |       prev,
192 |       next,
193 |       play,
194 |       stop,
195 |       show,
196 |       full,
197 |       tooltip,
198 |       reset,
199 |       toggleInline,
200 |     }
201 |   },
202 | })
203 | </script>
204 | <!-- Composition API -->
205 | <!-- <script lang="ts" setup>
206 | import {
207 |   ref,
208 | } from 'vue'
209 | import type { Viewer } from '../../../src'
210 | import VueViewer, { component as vViewer } from '../../../src'
211 | 
212 | VueViewer.setDefaults({
213 |   zIndexInline: 2021,
214 | })
215 | 
216 | class ImageData {
217 |   thumbnail: string
218 |   source: string
219 |   title: string
220 | 
221 |   constructor(source: string, thumbnail: string, title: string) {
222 |     this.source = source
223 |     this.thumbnail = thumbnail
224 |     this.title = title
225 |   }
226 | }
227 | 
228 | const sourceImages: ImageData[] = []
229 | const base = Math.floor(Math.random() * 60) + 10
230 | for (let i = 0; i < 10; i++) {
231 |   const data = new ImageData(`https://picsum.photos/id/${base + i}/1440/900`, `https://picsum.photos/id/${base + i}/346/216`, `Image: ${base + i}`)
232 |   sourceImages.push(data)
233 | }
234 | 
235 | let $viewer: Viewer
236 | 
237 | const form = ref({
238 |   view: 2,
239 |     zoom: -0.1,
240 |     zoomTo: 0.8,
241 |     rotate: 90,
242 |     rotateTo: 180,
243 |     scaleX: 1,
244 |     scaleY: 1,
245 | })
246 | const toggleOptions =ref([
247 |   'button',
248 |   'navbar',
249 |   'title',
250 |   'toolbar',
251 |   'tooltip',
252 |   'movable',
253 |   'zoomable',
254 |   'rotatable',
255 |   'scalable',
256 |   'transition',
257 |   'fullscreen',
258 |   'keyboard',
259 | ])
260 | const options =ref({
261 |   inline: true,
262 |   button: true,
263 |   navbar: true,
264 |   title: true,
265 |   toolbar: true,
266 |   tooltip: true,
267 |   movable: true,
268 |   zoomable: true,
269 |   rotatable: true,
270 |   scalable: true,
271 |   transition: true,
272 |   fullscreen: true,
273 |   keyboard: true,
274 |   url: 'data-source',
275 | })
276 | const images =ref([...sourceImages].splice(0, 5))
277 | 
278 | const inited = (viewer: Viewer) => {
279 |   $viewer = viewer
280 | }
281 | 
282 | const add = () => {
283 |   images.push(sourceImages[images.length])
284 | }
285 | 
286 | const remove = () => {
287 |   images.pop()
288 | }
289 | 
290 | const view = () => {
291 |   if (form.view >= 0 && form.view < images.length)
292 |     $viewer.view(form.view)
293 | }
294 | 
295 | const zoom = (value: number) => {
296 |   $viewer.zoom(value || form.zoom)
297 | }
298 | 
299 | const zoomTo = () => {
300 |   $viewer.zoomTo(form.zoomTo)
301 | }
302 | 
303 | const rotate = (value: number) => {
304 |   $viewer.rotate(value || form.rotate)
305 | }
306 | 
307 | const rotateTo = () => {
308 |   $viewer.rotateTo(form.rotateTo)
309 | }
310 | 
311 | const scaleX = (value: number) => {
312 |   if (value) {
313 |     $viewer.scaleX(value)
314 |   }
315 |   else {
316 |     form.scaleX = -form.scaleX
317 |     $viewer.scaleX(form.scaleX)
318 |   }
319 | }
320 | 
321 | const scaleY = (value: number) => {
322 |   if (value) {
323 |     $viewer.scaleY(value)
324 |   }
325 |   else {
326 |     form.scaleY = -form.scaleY
327 |     $viewer.scaleY(form.scaleY)
328 |   }
329 | }
330 | 
331 | const move = (x: number, y: number) => {
332 |   $viewer.move(x, y)
333 | }
334 | 
335 | const prev = () => {
336 |   $viewer.prev()
337 | }
338 | 
339 | const next = () => {
340 |   $viewer.next()
341 | }
342 | 
343 | const play = () => {
344 |   $viewer.play()
345 | }
346 | 
347 | const stop = () => {
348 |   $viewer.stop()
349 | }
350 | 
351 | const show = () => {
352 |   $viewer.show()
353 | }
354 | 
355 | const full = () => {
356 |   $viewer.full()
357 | }
358 | 
359 | const tooltip = () => {
360 |   $viewer.tooltip()
361 | }
362 | 
363 | const reset = () => {
364 |   $viewer.reset()
365 | }
366 | 
367 | const toggleInline = (inline: boolean) => {
368 |   options.inline = inline
369 | }
370 | </script> -->
371 | 
372 | <template>
373 |   <div>
374 |     <div class="methods is-flex">
375 |       <div class="field has-addons">
376 |         <p class="control">
377 |           <button
378 |             type="button"
379 |             class="button is-primary"
380 |             :class="{ ' is-active': !options.inline }"
381 |             @click="toggleInline(false)"
382 |           >
383 |             Modal
384 |           </button>
385 |         </p>
386 |         <p class="control">
387 |           <button
388 |             type="button"
389 |             class="button is-primary"
390 |             :class="{ ' is-active': options.inline }"
391 |             @click="toggleInline(true)"
392 |           >
393 |             Inline
394 |           </button>
395 |         </p>
396 |       </div>
397 |       <button
398 |         type="button"
399 |         class="button"
400 |         :disabled="images.length === 9"
401 |         @click="add"
402 |       >
403 |         Add
404 |       </button>
405 |       <button
406 |         type="button"
407 |         class="button"
408 |         :disabled="images.length === 1"
409 |         @click="remove"
410 |       >
411 |         Remove
412 |       </button>
413 |       <template v-if="options.inline">
414 |         <div
415 |           class="field has-addons"
416 |           style="width: 110px"
417 |         >
418 |           <div class="control">
419 |             <span class="button is-static">View</span>
420 |           </div>
421 |           <div class="control">
422 |             <input
423 |               v-model.number="form.view"
424 |               class="input"
425 |               type="text"
426 |               @keyup="view"
427 |             >
428 |           </div>
429 |         </div>
430 |         <div
431 |           class="field has-addons"
432 |           style="width: 140px"
433 |         >
434 |           <div class="control">
435 |             <input
436 |               v-model.number="form.zoom"
437 |               class="input"
438 |               type="text"
439 |             >
440 |           </div>
441 |           <div class="control">
442 |             <span
443 |               class="button"
444 |               @click="zoom()"
445 |             >Zoom</span>
446 |           </div>
447 |         </div>
448 |         <div
449 |           class="field has-addons"
450 |           style="width: 140px"
451 |         >
452 |           <div class="control">
453 |             <input
454 |               v-model.number="form.zoomTo"
455 |               class="input"
456 |               type="text"
457 |             >
458 |           </div>
459 |           <div class="control">
460 |             <span
461 |               class="button"
462 |               @click="zoomTo"
463 |             >Zoom to</span>
464 |           </div>
465 |         </div>
466 |         <div
467 |           class="field has-addons"
468 |           style="width: 140px"
469 |         >
470 |           <div class="control">
471 |             <input
472 |               v-model.number="form.rotate"
473 |               class="input"
474 |               type="text"
475 |             >
476 |           </div>
477 |           <div class="control">
478 |             <span
479 |               class="button"
480 |               @click="rotate()"
481 |             >Rotate</span>
482 |           </div>
483 |         </div>
484 |         <div
485 |           class="field has-addons"
486 |           style="width: 160px"
487 |         >
488 |           <div class="control">
489 |             <input
490 |               v-model.number="form.rotateTo"
491 |               class="input"
492 |               type="text"
493 |             >
494 |           </div>
495 |           <div class="control">
496 |             <span
497 |               class="button"
498 |               @click="rotateTo"
499 |             >Rotate to</span>
500 |           </div>
501 |         </div>
502 |         <div class="field has-addons">
503 |           <div class="control">
504 |             <button
505 |               type="button"
506 |               class="button"
507 |               @click="zoom(0.5)"
508 |             >
509 |               Zoom In
510 |             </button>
511 |           </div>
512 |           <div class="control">
513 |             <button
514 |               type="button"
515 |               class="button"
516 |               @click="zoom(-0.5)"
517 |             >
518 |               Zoom Out
519 |             </button>
520 |           </div>
521 |         </div>
522 |         <div class="field has-addons">
523 |           <div class="control">
524 |             <button
525 |               type="button"
526 |               class="button"
527 |               @click="rotate(-90)"
528 |             >
529 |               Rotate Left
530 |             </button>
531 |           </div>
532 |           <div class="control">
533 |             <button
534 |               type="button"
535 |               class="button"
536 |               @click="rotate(90)"
537 |             >
538 |               Rotate Right
539 |             </button>
540 |           </div>
541 |         </div>
542 |         <div class="field has-addons">
543 |           <div class="control">
544 |             <button
545 |               type="button"
546 |               class="button"
547 |               @click="scaleX()"
548 |             >
549 |               Flip Horizontal
550 |             </button>
551 |           </div>
552 |           <div class="control">
553 |             <button
554 |               type="button"
555 |               class="button"
556 |               @click="scaleY()"
557 |             >
558 |               Flip Vertical
559 |             </button>
560 |           </div>
561 |         </div>
562 |         <div class="field has-addons">
563 |           <div class="control">
564 |             <button
565 |               type="button"
566 |               class="button"
567 |               @click="move(-10, 0)"
568 |             >
569 |               Left
570 |             </button>
571 |           </div>
572 |           <div class="control">
573 |             <button
574 |               type="button"
575 |               class="button"
576 |               @click="move(10, 0)"
577 |             >
578 |               Right
579 |             </button>
580 |           </div>
581 |           <div class="control">
582 |             <button
583 |               type="button"
584 |               class="button"
585 |               @click="move(0, -10)"
586 |             >
587 |               Up
588 |             </button>
589 |           </div>
590 |           <div class="control">
591 |             <button
592 |               type="button"
593 |               class="button"
594 |               @click="move(0, 10)"
595 |             >
596 |               Down
597 |             </button>
598 |           </div>
599 |         </div>
600 |         <div class="field has-addons">
601 |           <div class="control">
602 |             <button
603 |               type="button"
604 |               class="button"
605 |               @click="prev"
606 |             >
607 |               Prev
608 |             </button>
609 |           </div>
610 |           <div class="control">
611 |             <button
612 |               type="button"
613 |               class="button"
614 |               @click="next"
615 |             >
616 |               Next
617 |             </button>
618 |           </div>
619 |           <div class="control">
620 |             <button
621 |               type="button"
622 |               class="button"
623 |               @click="play"
624 |             >
625 |               Play
626 |             </button>
627 |           </div>
628 |           <div class="control">
629 |             <button
630 |               type="button"
631 |               class="button"
632 |               @click="stop"
633 |             >
634 |               Stop
635 |             </button>
636 |           </div>
637 |         </div>
638 |         <button
639 |           type="button"
640 |           class="button"
641 |           @click="full"
642 |         >
643 |           Full
644 |         </button>
645 |         <button
646 |           type="button"
647 |           class="button"
648 |           @click="tooltip"
649 |         >
650 |           Tooltip
651 |         </button>
652 |         <button
653 |           type="button"
654 |           class="button"
655 |           @click="reset"
656 |         >
657 |           Reset
658 |         </button>
659 |       </template>
660 |       <template v-else>
661 |         <button
662 |           type="button"
663 |           class="button"
664 |           @click="show"
665 |         >
666 |           Show
667 |         </button>
668 |       </template>
669 |     </div>
670 |     <div class="tile is-ancestor">
671 |       <div class="tile is-2 is-vertical is-parent">
672 |         <div class="tile is-child">
673 |           <nav class="panel options-panel">
674 |             <p class="panel-heading">
675 |               Options
676 |             </p>
677 |             <div
678 |               v-for="item of toggleOptions"
679 |               :key="item"
680 |               class="panel-block"
681 |             >
682 |               <label class="checkbox">
683 |                 <input
684 |                   v-model="options[item]"
685 |                   type="checkbox"
686 |                   name="button"
687 |                 > {{ item }}
688 |               </label>
689 |             </div>
690 |           </nav>
691 |         </div>
692 |       </div>
693 |       <div class="tile is-10 is-vertical is-parent">
694 |         <div class="viewer-wrapper">
695 |           <VViewer
696 |             ref="viewer"
697 |             :options="options"
698 |             :images="images"
699 |             rebuild
700 |             class="viewer"
701 |             @inited="inited"
702 |           >
703 |             <template #default="scope">
704 |               <figure class="images">
705 |                 <div
706 |                   v-for="{ source, thumbnail, title } in scope.images"
707 |                   :key="source"
708 |                   class="image-wrapper"
709 |                 >
710 |                   <img
711 |                     class="image"
712 |                     :src="thumbnail"
713 |                     :data-source="source"
714 |                     :alt="title"
715 |                   >
716 |                 </div>
717 |               </figure>
718 |               <p><strong>Options: </strong>{{ scope.options }}</p>
719 |             </template>
720 |           </VViewer>
721 |         </div>
722 |       </div>
723 |     </div>
724 |   </div>
725 | </template>
726 | 
727 | <style lang="scss" scoped>
728 |   .viewer-wrapper {
729 |     position: relative;
730 |     background: #333;
731 |     height: 100%;
732 |   }
733 | 
734 |   .methods {
735 |     margin-bottom: 1em;
736 |     flex-wrap: wrap;
737 | 
738 |     & > * {
739 |       margin-right: 0.75rem;
740 |     }
741 |   }
742 | 
743 |   .options-panel {
744 |     .panel-block {
745 |       padding: 0;
746 | 
747 |       .checkbox {
748 |         display: block;
749 |         width: 100%;
750 |         margin: 0;
751 |         padding: 0.5em 0.75em;
752 |       }
753 |     }
754 |   }
755 | 
756 |   .viewer {
757 |     height: 100%;
758 | 
759 |     .images {
760 |       height: 100%;
761 |       display: flex;
762 |       justify-content: center;
763 |       align-content: center;
764 |       align-items: center;
765 |       flex-wrap: wrap;
766 |       padding: 5px;
767 | 
768 |       .image-wrapper {
769 |         display: inline-block;
770 |         width: calc(33% - 20px);
771 |         margin: 5px 5px 0 5px;
772 | 
773 |         .image {
774 |           width: 100%;
775 |           cursor: pointer;
776 |           display: inline-block;
777 |         }
778 |       }
779 |     }
780 |   }
781 | </style>
782 | 


--------------------------------------------------------------------------------
/example/views/example/DirectiveExample.vue:
--------------------------------------------------------------------------------
  1 | <!-- Options API -->
  2 | <script lang="ts">
  3 | import {
  4 |   defineComponent,
  5 |   reactive,
  6 |   ref,
  7 |   toRefs,
  8 | } from 'vue'
  9 | import VueViewer, { Viewer, directive } from '../../../src'
 10 | 
 11 | VueViewer.setDefaults({
 12 |   zIndex: 2021,
 13 | })
 14 | 
 15 | class ImageData {
 16 |   thumbnail: string
 17 |   source: string
 18 |   title: string
 19 | 
 20 |   constructor(source: string, thumbnail: string, title: string) {
 21 |     this.source = source
 22 |     this.thumbnail = thumbnail
 23 |     this.title = title
 24 |   }
 25 | }
 26 | 
 27 | const sourceImages: ImageData[] = []
 28 | const base = Math.floor(Math.random() * 60) + 10
 29 | for (let i = 0; i < 10; i++) {
 30 |   const data = new ImageData(`https://picsum.photos/id/${base + i}/1440/900`, `https://picsum.photos/id/${base + i}/346/216`, `Image: ${base + i}`)
 31 |   sourceImages.push(data)
 32 | }
 33 | 
 34 | export default defineComponent({
 35 |   name: 'DirectiveExample',
 36 |   directives: {
 37 |     viewer: directive({
 38 |       debug: true,
 39 |     }),
 40 |   },
 41 |   setup() {
 42 |     const el = ref<HTMLElement | null>(null)
 43 |     const state = reactive({
 44 |       options: {
 45 |         toolbar: true,
 46 |         url: 'data-source',
 47 |       },
 48 |       images: [...sourceImages].splice(0, 5),
 49 |     })
 50 | 
 51 |     function toggleToolbar(toolbar: boolean) {
 52 |       state.options.toolbar = toolbar
 53 |     }
 54 | 
 55 |     function add() {
 56 |       state.images.push(sourceImages[state.images.length])
 57 |     }
 58 | 
 59 |     function remove() {
 60 |       state.images.pop()
 61 |     }
 62 | 
 63 |     function show() {
 64 |       el.value && el.value.$viewer.show()
 65 |     }
 66 | 
 67 |     return {
 68 |       ...toRefs(state),
 69 |       el,
 70 |       add,
 71 |       remove,
 72 |       stop,
 73 |       show,
 74 |       toggleToolbar,
 75 |     }
 76 |   },
 77 | })
 78 | </script>
 79 | <!-- Composition API -->
 80 | <!-- <script lang="ts" setup>
 81 | import {
 82 |   ref,
 83 | } from 'vue'
 84 | import VueViewer, { directive as viewer } from '../../../src'
 85 | 
 86 | VueViewer.setDefaults({
 87 |   zIndex: 2021,
 88 | })
 89 | 
 90 | class ImageData {
 91 |   thumbnail: string
 92 |   source: string
 93 |   title: string
 94 | 
 95 |   constructor(source: string, thumbnail: string, title: string) {
 96 |     this.source = source
 97 |     this.thumbnail = thumbnail
 98 |     this.title = title
 99 |   }
100 | }
101 | 
102 | const sourceImages: ImageData[] = []
103 | const base = Math.floor(Math.random() * 60) + 10
104 | for (let i = 0; i < 10; i++) {
105 |   const data = new ImageData(`https://picsum.photos/id/${base + i}/1440/900`, `https://picsum.photos/id/${base + i}/346/216`, `Image: ${base + i}`)
106 |   sourceImages.push(data)
107 | }
108 | const vViewer = viewer({
109 |   debug: true
110 | })
111 | 
112 | const el = ref<HTMLElement | null>(null)
113 | const options = ref({
114 |   toolbar: true,
115 |   url: 'data-source',
116 | })
117 | const images = ref([...sourceImages].splice(0, 5))
118 | 
119 | const toggleToolbar = (toolbar: boolean) => {
120 |   options.toolbar = toolbar
121 | }
122 | 
123 | const add = () => {
124 |   images.push(sourceImages[images.length])
125 | }
126 | 
127 | const remove = () => {
128 |   images.pop()
129 | }
130 | 
131 | const show = () => {
132 |   el.value && el.value.$viewer.show()
133 | }
134 | </script> -->
135 | 
136 | <template>
137 |   <div>
138 |     <div class="field is-grouped is-grouped-multiline">
139 |       <p class="control">
140 |         <button
141 |           type="button"
142 |           class="button"
143 |           :disabled="images.length === 10"
144 |           @click="add"
145 |         >
146 |           Add
147 |         </button>
148 |       </p>
149 |       <p class="control">
150 |         <button
151 |           type="button"
152 |           class="button"
153 |           :disabled="images.length === 0"
154 |           @click="remove"
155 |         >
156 |           Remove
157 |         </button>
158 |       </p>
159 |       <p class="control">
160 |         <button
161 |           type="button"
162 |           class="button"
163 |           @click="show"
164 |         >
165 |           Show
166 |         </button>
167 |       </p>
168 |       <div class="field has-addons">
169 |         <p class="control">
170 |           <button
171 |             type="button"
172 |             class="button is-primary"
173 |             :class="{ ' is-active': options.toolbar }"
174 |             @click="toggleToolbar(true)"
175 |           >
176 |             Show Toolbar
177 |           </button>
178 |         </p>
179 |         <p class="control">
180 |           <button
181 |             type="button"
182 |             class="button is-primary"
183 |             :class="{ ' is-active': !options.toolbar }"
184 |             @click="toggleToolbar(false)"
185 |           >
186 |             Hide Toolbar
187 |           </button>
188 |         </p>
189 |       </div>
190 |     </div>
191 |     <p>
192 |       To show the viewer, you can click these images too.
193 |     </p>
194 |     <div
195 |       ref="el"
196 |       v-viewer="options"
197 |       class="images clearfix"
198 |     >
199 |       <template v-for="{ source, thumbnail, title } in images" :key="source">
200 |         <img
201 |           class="image"
202 |           :src="thumbnail"
203 |           :data-source="source"
204 |           :alt="title"
205 |         >
206 |       </template>
207 |     </div>
208 |   </div>
209 | </template>
210 | 
211 | <style lang="scss" scoped>
212 |   .image {
213 |     width: calc(20% - 10px);
214 |     cursor: pointer;
215 |     margin: 5px;
216 |     display: inline-block;
217 |   }
218 | </style>
219 | 


--------------------------------------------------------------------------------
/example/views/example/index.vue:
--------------------------------------------------------------------------------
 1 | <!-- Options API -->
 2 | <script lang="ts">
 3 | import { defineComponent } from 'vue'
 4 | import DirectiveExample from './DirectiveExample.vue'
 5 | import ComponentExample from './ComponentExample.vue'
 6 | import ApiExample from './ApiExample.vue'
 7 | 
 8 | export default defineComponent({
 9 |   components: {
10 |     DirectiveExample,
11 |     ComponentExample,
12 |     ApiExample,
13 |   },
14 | })
15 | </script>
16 | <!-- Composition API -->
17 | <!-- <script lang="ts" setup>
18 | import DirectiveExample from './DirectiveExample.vue'
19 | import ComponentExample from './ComponentExample.vue'
20 | import ApiExample from './ApiExample.vue'
21 | </script> -->
22 | 
23 | <template>
24 |   <div>
25 |     <h1 class="title">
26 |       Demo
27 |     </h1>
28 |     <hr>
29 |     <div style="margin-bottom: 3em">
30 |       <h2 class="title is-4">
31 |         Directive
32 |       </h2>
33 |       <p class="subtitle">
34 |         <a
35 |           href="https://github.com/mirari/v-viewer/blob/v3/example/views/example/DirectiveExample.vue"
36 |           target="_blank"
37 |         >Source</a>
38 |       </p>
39 |       <DirectiveExample />
40 |     </div>
41 |     <div style="margin-bottom: 6em">
42 |       <h2 class="title is-4">
43 |         Component
44 |       </h2>
45 |       <p class="subtitle">
46 |         <a
47 |           href="https://github.com/mirari/v-viewer/blob/v3/example/views/example/ComponentExample.vue"
48 |           target="_blank"
49 |         >Source</a>
50 |       </p>
51 |       <ComponentExample />
52 |     </div>
53 |     <div>
54 |       <h2 class="title is-4">
55 |         Api
56 |       </h2>
57 |       <p class="subtitle">
58 |         <a
59 |           href="https://github.com/mirari/v-viewer/blob/v3/example/views/example/ApiExample.vue"
60 |           target="_blank"
61 |         >Source</a>
62 |       </p>
63 |       <ApiExample />
64 |     </div>
65 |   </div>
66 | </template>
67 | 


--------------------------------------------------------------------------------
/example/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import vue from '@vitejs/plugin-vue'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   base: './',
7 |   plugins: [vue()],
8 | })
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "v-viewer",
 3 |   "scope": "VueViewer",
 4 |   "version": "3.0.21",
 5 |   "description": "Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js",
 6 |   "author": "mirari",
 7 |   "license": "MIT",
 8 |   "homepage": "https://github.com/mirari/v-viewer#readme",
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/mirari/v-viewer.git"
12 |   },
13 |   "bugs": {
14 |     "url": "https://github.com/mirari/v-viewer/issues"
15 |   },
16 |   "keywords": [
17 |     "vue",
18 |     "viewer",
19 |     "gallery",
20 |     "picture",
21 |     "img",
22 |     "image"
23 |   ],
24 |   "main": "./dist/index.umd.cjs",
25 |   "module": "./dist/index.js",
26 |   "unpkg": "./dist/index.iife.js",
27 |   "types": "./types/index.d.ts",
28 |   "type": "module",
29 |   "exports": {
30 |     ".": {
31 |       "types": "./types/index.d.js",
32 |       "import": "./dist/index.js",
33 |       "require": "./dist/index.umd.cjs"
34 |     }
35 |   },
36 |   "files": [
37 |     "dist",
38 |     "types",
39 |     "README.md"
40 |   ],
41 |   "scripts": {
42 |     "prepare": "husky install",
43 |     "dev": "vite serve example --config example/vite.config.ts",
44 |     "lint": "eslint .",
45 |     "lint:fix": "eslint . --fix",
46 |     "build": "vue-tsc --noEmit && vite build",
47 |     "preview:build": "vite build example --config example/vite.config.ts",
48 |     "preview:serve": "vite preview example --config example/vite.config.ts",
49 |     "release": "standard-version",
50 |     "publish": "npm run build && npm publish",
51 |     "publish:next": "npm run build && npm publish --tag next"
52 |   },
53 |   "peerDependencies": {
54 |     "viewerjs": "^1.11.0",
55 |     "vue": "^3.0.0"
56 |   },
57 |   "dependencies": {
58 |     "viewerjs": "^1.11.6",
59 |     "lodash-es": "^4.17.21"
60 |   },
61 |   "devDependencies": {
62 |     "@antfu/eslint-config": "^0.27.0",
63 |     "@commitlint/cli": "^17.1.2",
64 |     "@commitlint/config-conventional": "^17.1.0",
65 |     "@types/lodash-es": "^4.17.6",
66 |     "@vitejs/plugin-vue": "^3.1.0",
67 |     "@vue/compiler-sfc": "^3.2.26",
68 |     "bulma": "^0.9.4",
69 |     "eslint": "^8.26.0",
70 |     "husky": "^8.0.1",
71 |     "lint-staged": "^15.2.10",
72 |     "sass": "^1.55.0",
73 |     "standard-version": "^9.5.0",
74 |     "typescript": "^4.6.4",
75 |     "vite": "^3.1.0",
76 |     "vue": "^3.2.37",
77 |     "vue-tsc": "^0.40.4"
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/api.ts:
--------------------------------------------------------------------------------
 1 | import { h, render } from 'vue'
 2 | import Viewer from 'viewerjs'
 3 | import { assign } from 'lodash-es'
 4 | 
 5 | export interface ViewerApiOptions {
 6 |   images: Array<string | object>
 7 |   options?: Viewer.Options
 8 | }
 9 | 
10 | const api = ({ images = [], options }: ViewerApiOptions) => {
11 |   options = assign(options, {
12 |     inline: false, // 只能使用modal模式
13 |   })
14 |   // 创建存放viewerjs加载所需图片的占位元素，无需实际展现
15 |   const token = document.createElement('div')
16 |   const ViewerToken = h(
17 |     'div',
18 |     {
19 |       style: {
20 |         display: 'none',
21 |       },
22 |       class: ['__viewer-token'],
23 |     },
24 |     images.map((attr) => {
25 |       return h(
26 |         'img',
27 |         typeof attr === 'string' ? { src: attr } : attr,
28 |       )
29 |     }),
30 |   )
31 | 
32 |   render(ViewerToken, token)
33 |   const tokenElement = token.firstElementChild as HTMLElement
34 |   document.body.appendChild(tokenElement)
35 | 
36 |   // init viewer
37 |   const $viewerJs = new Viewer(tokenElement, options)
38 |   const $destroy = $viewerJs.destroy.bind($viewerJs)
39 |   $viewerJs.destroy = function (): Viewer {
40 |     $destroy()
41 |     render(null, token)
42 |     return $viewerJs
43 |   }
44 |   $viewerJs.show()
45 | 
46 |   // 关闭Viewer模态窗口时，销毁token
47 |   tokenElement.addEventListener('hidden', function (this: HTMLElement) {
48 |     if (this.viewer === $viewerJs) {
49 |       $viewerJs.destroy()
50 |     }
51 |   })
52 | 
53 |   return $viewerJs
54 | }
55 | 
56 | export default api
57 | 


--------------------------------------------------------------------------------
/src/component.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | import {
  3 |   defineComponent,
  4 |   nextTick,
  5 |   onMounted,
  6 |   onUnmounted,
  7 |   ref,
  8 |   watch,
  9 | } from 'vue'
 10 | import Viewer from 'viewerjs'
 11 | import type { PropType } from 'vue'
 12 | 
 13 | export default defineComponent({
 14 |   name: 'Viewer',
 15 |   props: {
 16 |     images: {
 17 |       type: Array,
 18 |       default: () => [],
 19 |     },
 20 |     rebuild: {
 21 |       type: Boolean,
 22 |       default: false,
 23 |     },
 24 |     trigger: {
 25 |       type: Object,
 26 |       default: null,
 27 |     },
 28 |     options: {
 29 |       type: Object as PropType<Viewer.Options>,
 30 |       default: () => null,
 31 |     },
 32 |   },
 33 |   emits: ['inited'],
 34 |   setup(props, { emit }) {
 35 |     let $viewer: Viewer
 36 |     const root = ref()
 37 | 
 38 |     // create、destroy
 39 |     function createViewer() {
 40 |       $viewer = new Viewer(root.value, props.options)
 41 |       emit('inited', $viewer)
 42 |     }
 43 |     function destroyViewer() {
 44 |       $viewer && $viewer.destroy()
 45 |     }
 46 |     function rebuildViewer() {
 47 |       destroyViewer()
 48 |       createViewer()
 49 |     }
 50 | 
 51 |     // create、update
 52 |     function updateViewer() {
 53 |       if ($viewer) {
 54 |         $viewer.update()
 55 |         emit('inited', $viewer)
 56 |       }
 57 |       else {
 58 |         createViewer()
 59 |       }
 60 |     }
 61 |     function changeViewer() {
 62 |       if (props.rebuild) {
 63 |         rebuildViewer()
 64 |       }
 65 |       else {
 66 |         updateViewer()
 67 |       }
 68 |     }
 69 | 
 70 |     // watch effect
 71 |     const options = { deep: true }
 72 |     watch(() => props.images, () => {
 73 |       nextTick(() => {
 74 |         changeViewer()
 75 |       })
 76 |     }, options)
 77 |     watch(() => props.trigger, () => {
 78 |       nextTick(() => {
 79 |         changeViewer()
 80 |       })
 81 |     }, options)
 82 |     watch(() => props.options, () => {
 83 |       nextTick(() => {
 84 |         rebuildViewer()
 85 |       })
 86 |     }, options)
 87 | 
 88 |     // lifecycle hooks
 89 |     onMounted(() => createViewer())
 90 |     onUnmounted(() => destroyViewer())
 91 | 
 92 |     return {
 93 |       root,
 94 |       createViewer,
 95 |       rebuildViewer,
 96 |       updateViewer,
 97 |       destroyViewer,
 98 |     }
 99 |   },
100 | })
101 | </script>
102 | 
103 | <template>
104 |   <div ref="root">
105 |     <slot
106 |       :images="images"
107 |       :options="options"
108 |     />
109 |   </div>
110 | </template>
111 | 


--------------------------------------------------------------------------------
/src/directive.ts:
--------------------------------------------------------------------------------
  1 | import Viewer from 'viewerjs'
  2 | import { debounce } from 'lodash-es'
  3 | import { nextTick, watch } from 'vue'
  4 | import type { Directive, DirectiveBinding, VNode } from 'vue'
  5 | 
  6 | export type ICreateViewer = (el: HTMLElement, options: Viewer.Options, rebuild: boolean, observer: boolean) => void
  7 | 
  8 | const directive = ({ name = 'viewer', debug = false } = {}) => {
  9 |   async function createViewer(el: HTMLElement, options: Viewer.Options, rebuild = false, observer = false) {
 10 |     await nextTick()
 11 |     // 如果启用了元素监听，但和上次比较没有变化，就不重新初始化或更新
 12 |     if (observer && !imageDiff(el))
 13 |       return
 14 |     if (rebuild || !el[`$${name}`]) {
 15 |       destroyViewer(el)
 16 |       el[`$${name}`] = new Viewer(el, options)
 17 |       log('Viewer created')
 18 |     }
 19 |     else {
 20 |       el[`$${name}`].update()
 21 |       log('Viewer updated')
 22 |     }
 23 |   }
 24 | 
 25 |   function imageDiff(el: HTMLElement) {
 26 |     const imageContent = el.innerHTML.match(/<img([\w\W]+?)[\\/]?>/g)
 27 |     const viewerImageText = imageContent ? imageContent.join('') : undefined
 28 |     if (el.__viewerImageDiffCache === viewerImageText) {
 29 |       log('Element change detected, but image(s) has not changed')
 30 |       return false
 31 |     }
 32 |     else {
 33 |       log('Image change detected')
 34 |       el.__viewerImageDiffCache = viewerImageText
 35 |       return true
 36 |     }
 37 |   }
 38 | 
 39 |   function createObserver(el: HTMLElement, options: Viewer.Options, debouncedCreateViewer: ICreateViewer, rebuild: boolean) {
 40 |     destroyObserver(el)
 41 |     const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
 42 |     if (!MutationObserver) {
 43 |       log('Observer not supported')
 44 |       return
 45 |     }
 46 |     const observer = new MutationObserver((mutations) => {
 47 |       mutations.forEach((mutation) => {
 48 |         log(`Viewer mutation:${mutation.type}`)
 49 |         debouncedCreateViewer(el, options, rebuild, true)
 50 |       })
 51 |     })
 52 |     const config = { attributes: true, childList: true, characterData: true, subtree: true }
 53 |     observer.observe(el, config)
 54 |     el.__viewerMutationObserver = observer
 55 |     log('Observer created')
 56 |   }
 57 | 
 58 |   function createWatcher(el: HTMLElement, binding: DirectiveBinding, vnode: VNode, debouncedCreateViewer: ICreateViewer) {
 59 |     // const simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/
 60 |     // if (!binding.value || !simplePathRE.test(binding.value)) {
 61 |     //   log('Only simple dot-delimited paths can create watcher')
 62 |     //   return
 63 |     // }
 64 |     el.__viewerUnwatch = watch(() => binding.value, (newVal, oldVal) => {
 65 |       log('Change detected by watcher: ', binding.value)
 66 |       debouncedCreateViewer(el, newVal, true, false)
 67 |     }, { deep: true })
 68 |     log('Watcher created, expression: ', binding.value)
 69 |   }
 70 | 
 71 |   function destroyViewer(el: HTMLElement) {
 72 |     if (!el[`$${name}`]) {
 73 |       return
 74 |     }
 75 |     el[`$${name}`].destroy()
 76 |     delete el[`$${name}`]
 77 |     log('Viewer destroyed')
 78 |   }
 79 | 
 80 |   function destroyObserver(el: HTMLElement) {
 81 |     if (!el.__viewerMutationObserver) {
 82 |       return
 83 |     }
 84 |     el.__viewerMutationObserver.disconnect()
 85 |     delete el.__viewerMutationObserver
 86 |     log('observer destroyed')
 87 |   }
 88 | 
 89 |   function destroyWatcher(el: HTMLElement) {
 90 |     if (!el.__viewerUnwatch) {
 91 |       return
 92 |     }
 93 |     el.__viewerUnwatch()
 94 |     delete el.__viewerUnwatch
 95 |     log('Watcher destroyed')
 96 |   }
 97 | 
 98 |   function log(...args: any[]) {
 99 |     debug && console.log(...args)
100 |   }
101 | 
102 |   const directive: Directive = {
103 |     mounted(el, binding, vnode) {
104 |       log('Viewer bind')
105 |       const debouncedCreateViewer = debounce(createViewer, 50)
106 |       debouncedCreateViewer(el, binding.value)
107 |       // 创建watch监听options表达式变化
108 |       createWatcher(el, binding, vnode, debouncedCreateViewer)
109 |       // 是否监听dom变化
110 |       if (!binding.modifiers.static) {
111 |         // 增加dom变化监听
112 |         createObserver(el, binding.value, debouncedCreateViewer, binding.modifiers.rebuild)
113 |       }
114 |     },
115 |     unmounted(el) {
116 |       log('Viewer unbind')
117 |       // 销毁dom变化监听
118 |       destroyObserver(el)
119 |       // 销毁指令表达式监听
120 |       destroyWatcher(el)
121 |       // 销毁viewer
122 |       destroyViewer(el)
123 |     },
124 |   }
125 | 
126 |   return directive
127 | }
128 | 
129 | export default directive
130 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import type { App } from 'vue'
 2 | import { defaults } from 'lodash-es'
 3 | import Viewer from 'viewerjs'
 4 | import api from './api'
 5 | import directive from './directive'
 6 | import component from './component.vue'
 7 | 
 8 | export interface InstallationOptions {
 9 |   name?: string
10 |   debug?: boolean
11 |   defaultOptions?: Viewer.Options
12 | }
13 | 
14 | export {
15 |   Viewer,
16 |   api,
17 |   directive,
18 |   component,
19 | }
20 | 
21 | export default {
22 |   install(app: App, { name = 'viewer', debug = false, defaultOptions }: InstallationOptions = {}) {
23 |     if (defaultOptions) {
24 |       Viewer.setDefaults(defaultOptions)
25 |     }
26 | 
27 |     app.config.globalProperties[`$${name}Api`] = api
28 |     app.component(name, defaults(component, { name }))
29 |     app.directive(name, directive({ name, debug }))
30 |   },
31 |   setDefaults(defaultOptions: Viewer.Options) {
32 |     Viewer.setDefaults(defaultOptions)
33 |   },
34 | }
35 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
 1 | declare module '*.vue' {
 2 |   import { DefineComponent } from 'vue'
 3 |   const component: DefineComponent<{}, {}, any>
 4 |   export default component
 5 | }
 6 | 
 7 | declare interface Window {
 8 |   WebKitMutationObserver: MutationObserver
 9 |   MozMutationObserver: MutationObserver
10 | }
11 | 
12 | declare interface HTMLElement {
13 |   [key: string]: any
14 | }
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "Node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "esModuleInterop": true,
13 |     "lib": ["ESNext", "DOM"],
14 |     "skipLibCheck": true
15 |   },
16 |   "include": [
17 |     "src/**/*.ts",
18 |     "src/**/*.d.ts",
19 |     "src/**/*.tsx",
20 |     "src/**/*.vue"
21 |   ]
22 | }
23 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "resolveJsonModule": true,
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
 1 | import { App } from 'vue'
 2 | import ViewerJs from 'viewerjs'
 3 | import type { Directive, DefineComponent } from 'vue'
 4 | 
 5 | declare namespace VueViewer {
 6 |   export interface InstallationOptions {
 7 |     name?: string
 8 |     debug?: boolean
 9 |     defaultOptions?: ViewerJs.Options
10 |   }
11 | 
12 |   export interface ViewerApiOptions {
13 |     images: Array<string | object>
14 |     options?: ViewerJs.Options
15 |   }
16 | 
17 |   export function install(app: App, options?: InstallationOptions): void
18 | 
19 |   export function setDefaults(defaultOptions: ViewerJs.Options): void
20 | }
21 | 
22 | export declare const Viewer: typeof ViewerJs
23 | 
24 | export declare const api: (options: VueViewer.ViewerApiOptions) => ViewerJs
25 | 
26 | export declare const directive: (options?: VueViewer.InstallationOptions) => Directive
27 | 
28 | export declare const component: DefineComponent<{}, {}, any>
29 | 
30 | export default VueViewer
31 | 
32 | declare module 'vue' {
33 |   interface ComponentCustomProperties {
34 |     $viewerApi: typeof api
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import pkg from './package.json'
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [vue()],
 8 |   build: {
 9 |     lib: {
10 |       entry: 'src/index.ts',
11 |       name: pkg.scope,
12 |       fileName: 'index',
13 |       formats: ['es', 'umd', 'iife'],
14 |     },
15 |     rollupOptions: {
16 |       output: {
17 |         globals: {
18 |           vue: 'Vue',
19 |           viewerjs: 'Viewer',
20 |         },
21 |       },
22 |       external: ['vue', 'viewerjs'],
23 |     },
24 |   },
25 | })
26 | 


--------------------------------------------------------------------------------