v-viewer - npm Package Compare versions

Comparing version 1.5.1 to 1.6.0

package.json

 {
   "name": "v-viewer",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js",
@@ -9,6 +9,7 @@ "main": "dist/v-viewer.js",
     "dev": "cross-env NODE_ENV=development node build/dev-server.js",
-    "release": "webpack --progress --hide-modules --config  ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js",
+    "build": "webpack --progress --hide-modules --config  ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js",
     "example": "cross-env NODE_ENV=production node build/build.js",
     "gh": "node build/deploy",
-    "publish": "npm publish"
+    "publish": "npm run build && npm publish",
+    "publish:beta": "npm run build && npm publish --tag beta"
   },
@@ -71,3 +72,3 @@ "repository": {
     "imports-loader": "^0.7.0",
-    "node-sass": "^4.1.1",
+    "node-sass": "^4.13.1",
     "opn": "^4.0.2",
@@ -74,0 +75,0 @@ "ora": "^1.1.0",

README.md

@@ -5,4 +5,13 @@ # v-viewer
 
-[![npm version](https://badge.fury.io/js/v-viewer.svg)](https://badge.fury.io/js/v-viewer)
+[![npm version](https://img.shields.io/npm/v/v-viewer.svg)](https://www.npmjs.com/package/v-viewer)
+[![language](https://img.shields.io/badge/language-Vue2-brightgreen.svg)](https://www.npmjs.com/package/v-viewer)
 
+[![npm version](https://img.shields.io/npm/v/v-viewer/next.svg)](https://www.npmjs.com/package/v-viewer)
+[![language](https://img.shields.io/badge/language-Vue3-brightgreen.svg)](https://www.npmjs.com/package/v-viewer)
+
+[![npm download](https://img.shields.io/npm/dw/v-viewer.svg)](https://www.npmjs.com/package/v-viewer)
+[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/)
+
+## [v-viewer for vue3](https://github.com/mirari/v-viewer/tree/v3)
+
 ## [Live demo](https://mirari.github.io/v-viewer/)
@@ -13,7 +22,7 @@
 - [component](https://codepen.io/mirari/pen/PowNyEY)
+- [api](https://codepen.io/mirari/pen/NWpwVdd)
 - [thumbnail & source](https://codepen.io/mirari/pen/LYENgMM)
 - [viewer callback](https://codepen.io/mirari/pen/ZwpGBO)
-- [hide img tags](https://codepen.io/mirari/pen/vjjXwj)
-- [filtered images](https://codepen.io/mirari/pen/vvPoQb)
-- [**click buttons to show different images**](https://codesandbox.io/s/v-viewer-zhezr)
+- [filter images](https://codepen.io/mirari/pen/vvPoQb)
+- [change images](https://codepen.io/mirari/pen/ZdMbOK)
 
@@ -23,3 +32,5 @@ ## [中文文档](https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/)
 ## Migration from 0.x
+
 - The only change you have to make is to manually import the `.css` file:
+
 ```
@@ -69,6 +80,6 @@ import 'viewerjs/dist/viewer.css'
 
-
 ### Support UMD
 
 #### Browser
+
 ```html
@@ -86,2 +97,3 @@ <link href="//path/viewer.css" rel="stylesheet">
 #### CommonJS
+
 ```javascript
@@ -92,2 +104,3 @@ var VueViewer = require('VueViewer')
 #### AMD
+
 ```javascript
@@ -98,2 +111,3 @@ require(['VueViewer'], function (VueViewer) {});
 ### Usage of directive
+
 Just add the directive `v-viewer` to any element, then all `img` elements in it will be handled by `viewer`.
@@ -133,5 +147,6 @@
 
-#### Direcitve modifiers
+#### Directive modifiers
 
 ##### static
+
 The `viewer` instance will be created only once after the directive binded.
@@ -254,2 +269,48 @@
 
+### Usage of api
+
+> Only available in modal mode.
+
+You can call the function: `this.$viewerApi({options: {}, images: []})` to show gallery without rendering the `img` elements yourself.
+
+The function returns the current viewer instance.
+
+```html
+<template>
+  <div id="app">
+    <button type="button" class="button" @click="previewURL">URL Array</button>
+    <button type="button" class="button" @click="previewImgObject">Img-Object Array</button>
+  </div>
+</template>
+<script>
+  import 'viewerjs/dist/viewer.css'
+  import { api as viewerApi } from "v-viewer"
+  export default {
+    data() {
+      sourceImageURLs: ['1.png', '2.png'],
+      sourceImageObjects: [{'src':'thumbnail.png', 'data-source':'source.png'}]
+    },
+    methods: {
+      previewURL () {
+        // If you use the `app.use` full installation, you can use `this.$viewerApi` directly like this
+        const $viewer = this.$viewerApi({
+          images: this.sourceImageURLs
+        })
+      },
+      previewImgObject () {
+        // Or you can just import the api method and call it.
+        const $viewer = viewerApi({
+          options: {
+            toolbar: true,
+            url: 'data-source',
+            initialViewIndex: 2
+          },
+          images: this.sourceImageObjects
+        })
+      }
+    }
+  }
+</script>
+```
+
 ## Options & Methods of Viewer
@@ -271,2 +332,3 @@
   <div id="app">
+    <!-- directive name -->
     <div class="images" v-vuer="{movable: false}">
@@ -276,2 +338,6 @@ <img v-for="src in images" :src="src" :key="src">
     <button type="button" @click="show">Show</button>
+    <!-- component name -->
+    <vuer :images="images">
+      <img v-for="src in images" :src="src" :key="src">
+    </vuer>
   </div>
@@ -290,4 +356,9 @@ </template>
       show () {
+        // viewerjs instance name
         const vuer = this.$el.querySelector('.images').$vuer
         vuer.show()
+        // api name
+        this.$vuerApi({
+          images: this.images
+        })
       }
@@ -305,2 +376,3 @@ }
 If you need to set the viewer default options, you can import it like this:
+
 ```javascript
@@ -317,2 +389,3 @@ import Viewer from 'v-viewer'
 And you can reset the default options at any other time:
+
 ```javascript
@@ -319,0 +392,0 @@ import Viewer from 'v-viewer'

src/directive.js

 import Viewer from 'viewerjs'
 import { debounce } from 'throttle-debounce'
+import Vue from 'vue'
 
-const install = (Vue, {name = 'viewer', debug = false}) => {
-  function createViewer (el, options, rebuild = false) {
+const directive = ({name = 'viewer', debug = false} = {}) => {
+  function createViewer (el, options, rebuild = false, observer = false) {
     // nextTick执行，否则可能漏掉未渲染完的子元素
     Vue.nextTick(() => {
+      // 如果无图片或者和上次比较没有变化，那么就没有必要重新初始化或更新
+      if (observer && !imageDiff(el)) return
       if (rebuild || !el[`$${name}`]) {
         destroyViewer(el)
         el[`$${name}`] = new Viewer(el, options)
-        log('viewer created')
+        log('Viewer created')
       } else {
         el[`$${name}`].update()
-        log('viewer updated')
+        log('Viewer updated')
       }
@@ -19,2 +22,15 @@ })
 
+  function imageDiff (el) {
+    const imageContent = el.innerHTML.match(/<img([\w\W]+?)[\\/]?>/g)
+    const viewerImageText = imageContent ? imageContent.join('') : undefined
+    if (el.__viewerImageDiffCache === viewerImageText) {
+      log('Element change detected, but image(s) has not changed')
+      return false
+    } else {
+      log('Image change detected')
+      el.__viewerImageDiffCache = viewerImageText
+      return true
+    }
+  }
+
   function createObserver (el, options, debouncedCreateViewer, rebuild) {
@@ -24,3 +40,3 @@ destroyObserver(el)
     if (!MutationObserver) {
-      log('observer not supported')
+      log('Observer not supported')
       return
@@ -30,4 +46,4 @@ }
       mutations.forEach(function (mutation) {
-        log('viewer mutation:' + mutation.type)
-        debouncedCreateViewer(el, options, rebuild)
+        log('Viewer mutation:' + mutation.type)
+        debouncedCreateViewer(el, options, rebuild, true)
       })
@@ -37,4 +53,4 @@ })
     observer.observe(el, config)
-    el['$viewerMutationObserver'] = observer
-    log('observer created')
+    el.__viewerMutationObserver = observer
+    log('Observer created')
   }
@@ -45,7 +61,7 @@
     if (!expression || !simplePathRE.test(expression)) {
-      log('only simple dot-delimited paths can create watcher')
+      log('Only simple dot-delimited paths can create watcher')
       return
     }
-    el['$viewerUnwatch'] = vnode.context.$watch(expression, function (newVal, oldVal) {
-      log('change detected by watcher: ', expression)
+    el.__viewerUnwatch = vnode.context.$watch(expression, function (newVal, oldVal) {
+      log('Change detected by watcher: ', expression)
       debouncedCreateViewer(el, newVal, true)
@@ -55,3 +71,3 @@ }, {
     })
-    log('watcher created, expression: ', expression)
+    log('Watcher created, expression: ', expression)
   }
@@ -65,21 +81,21 @@
     delete el[`$${name}`]
-    log('viewer destroyed')
+    log('Viewer destroyed')
   }
 
   function destroyObserver (el) {
-    if (!el['$viewerMutationObserver']) {
+    if (!el.__viewerMutationObserver) {
       return
     }
-    el['$viewerMutationObserver'].disconnect()
-    delete el['$viewerMutationObserver']
-    log('observer destroyed')
+    el.__viewerMutationObserver.disconnect()
+    delete el.__viewerMutationObserver
+    log('Observer destroyed')
   }
 
   function destroyWatcher (el) {
-    if (!el['$viewerUnwatch']) {
+    if (!el.__viewerUnwatch) {
       return
     }
-    el['$viewerUnwatch']()
-    delete el['$viewerUnwatch']
-    log('watcher destroyed')
+    el.__viewerUnwatch()
+    delete el.__viewerUnwatch
+    log('Watcher destroyed')
   }
@@ -91,5 +107,5 @@
 
-  Vue.directive('viewer', {
+  const directive = {
     bind (el, binding, vnode) {
-      log('viewer bind')
+      log('Viewer bind')
       const debouncedCreateViewer = debounce(50, createViewer)
@@ -108,3 +124,3 @@ debouncedCreateViewer(el, binding.value)
     unbind (el, binding) {
-      log('viewer unbind')
+      log('Viewer unbind')
       // 销毁dom变化监听
@@ -117,7 +133,7 @@ destroyObserver(el)
     }
-  })
+  }
+
+  return directive
 }
 
-export default {
-  install
-}
+export default directive

src/index.js

@@ -1,6 +0,14 @@
-import {extend} from './utils'
-import Component from './component.vue'
+import { extend } from './utils'
+import Viewer from 'viewerjs'
+import component from './component.vue'
 import directive from './directive'
-import Viewer from 'viewerjs'
+import api from './api'
 
+export {
+  component,
+  directive,
+  api,
+  Viewer
+}
+
 export default {
@@ -10,4 +18,5 @@ install (Vue, {name = 'viewer', debug = false, defaultOptions} = {}) {
 
-    Vue.component(name, extend(Component, { name }))
-    Vue.use(directive, {name, debug})
+    Vue.component(name, extend(component, { name }))
+    Vue.directive(name, directive({ name, debug }))
+    Vue.prototype[`$${name}Api`] = api(Vue)
   },
@@ -14,0 +23,0 @@ setDefaults (defaultOptions) {

types/index.d.ts

@@ -1,16 +0,30 @@
-import Vue from "vue";
-import ViewerJS from "viewerjs";
+import { App } from 'vue'
+import type ViewerType from 'viewerjs'
+import type { DirectiveOptions, Component } from 'vue'
 
-declare namespace Viewer {
+declare namespace VueViewer {
   export interface InstallationOptions {
-    name: string;
-    debug: boolean;
-    defaultOptions: ViewerJS.Options;
+    name?: string
+    debug?: boolean
+    defaultOptions?: ViewerType.Options
   }
 
-  export function install(vue: typeof Vue, options?: InstallationOptions): void;
+  export interface ViewerApiOptions {
+    images: Array<string | object>
+    options?: ViewerType.Options
+  }
 
-  export function setDefaults(defaultOptions: ViewerJS.Options): void;
+  export function install(app: App, options?: InstallationOptions): void
+
+  export function setDefaults(defaultOptions: ViewerType.Options): void
 }
 
-export default Viewer;
+export type Viewer = ViewerType
+
+export type api = (options: VueViewer.ViewerApiOptions) => ViewerType
+
+export type directive = (options?: VueViewer.InstallationOptions) => DirectiveOptions
+
+export type component = Component
+
+export default VueViewer

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

310365

increased by578.79%

Number of package files

13

increased by8.33%

Lines of code

6813

increased by946.54%

Number of lines in readme file

385

increased by23.4%

Worsened metrics

Number of low supply chain risk alerts

89

increased byInfinity%

Number of medium supply chain risk alerts

7

increased by75%

No dependency changes