v-viewer - npm Package Compare versions

Comparing version 1.5.1 to 3.0.0

package.json

 {
   "name": "v-viewer",
-  "version": "1.5.1",
+  "scope": "VueViewer",
+  "version": "3.0.0",
   "description": "Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js",
-  "main": "dist/v-viewer.js",
-  "types": "types/index.d.ts",
+  "main": "./dist/index.umd.js",
+  "unpkg": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
   "scripts": {
-    "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",
-    "example": "cross-env NODE_ENV=production node build/build.js",
-    "gh": "node build/deploy",
-    "publish": "npm publish"
+    "prepare": "husky install",
+    "dev": "npm -C example run dev",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview:build": "npm -C example run build",
+    "preview:serve": "npm -C example run serve",
+    "commit": "npx git-cz",
+    "release": "standard-version"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/mirari/v-viewer.git"
-  },
+  "files": [
+    "dist",
+    "types"
+  ],
   "keywords": [
@@ -26,72 +37,43 @@ "vue",
   ],
+  "license": "MIT",
   "author": "mirari",
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/mirari/v-viewer/issues"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mirari/v-viewer.git"
+  },
   "homepage": "https://github.com/mirari/v-viewer#readme",
-  "engines": {
-    "node": ">=4",
-    "npm": ">=3"
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "viewerjs": "^1.9.0",
+    "vue": "^3.0.5"
   },
   "devDependencies": {
-    "autoprefixer": "^6.7.7",
-    "babel-core": "^6.22.1",
-    "babel-eslint": "^7.1.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.2",
-    "babel-loader": "^6.2.10",
-    "babel-plugin-component": "^0.9.1",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-export-extensions": "^6.8.0",
-    "babel-plugin-transform-vue-jsx": "^3.4.2",
-    "babel-polyfill": "^6.22.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-2": "^6.22.0",
-    "bulma": "^0.5.1",
-    "connect-history-api-fallback": "^1.3.0",
-    "cross-env": "^3.1.3",
-    "css-loader": "^0.27.1",
-    "electron-devtools-installer": "^2.0.1",
-    "eslint": "^4.18.2",
-    "eslint-config-standard": "^7.0.1",
-    "eslint-friendly-formatter": "^2.0.7",
-    "eslint-loader": "^1.6.1",
-    "eslint-plugin-html": "^3.2.2",
-    "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-standard": "^2.1.1",
-    "eventsource-polyfill": "^0.9.6",
-    "express": "^4.15.2",
-    "extract-text-webpack-plugin": "^2.0.0-beta.4",
-    "file-loader": "^0.10.1",
-    "gh-pages": "^1.1.0",
-    "github-markdown-css": "^2.8.0",
-    "html-webpack-plugin": "^2.25.0",
-    "http-proxy-middleware": "^0.17.4",
-    "imports-loader": "^0.7.0",
-    "node-sass": "^4.1.1",
-    "opn": "^4.0.2",
-    "ora": "^1.1.0",
-    "postcss-loader": "^1.3.3",
-    "progress-bar-webpack-plugin": "^1.9.1",
-    "sass-loader": "^6.0.3",
-    "serve-favicon": "^2.4.1",
-    "shelljs": "^0.8.3",
-    "style-loader": "^0.13.1",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.1",
-    "url-loader": "^0.5.7",
-    "vue": "^2.5.6",
-    "vue-html-loader": "^1.2.3",
-    "vue-loader": "^11.1.4",
-    "vue-markdown-loader": "2.1.0",
-    "vue-template-compiler": "^2.5.6",
-    "webpack": "^2.2.1",
-    "webpack-dev-middleware": "^1.9.0",
-    "webpack-hot-middleware": "^2.14.0",
-    "webpack-merge": "^4.0.0"
+    "@antfu/eslint-config": "^0.6.4",
+    "@commitlint/cli": "^12.1.1",
+    "@commitlint/config-conventional": "^12.1.1",
+    "@types/lodash-es": "^4.17.4",
+    "@typescript-eslint/eslint-plugin": "^4.22.1",
+    "@vitejs/plugin-vue": "^1.2.2",
+    "@vue/compiler-sfc": "^3.0.5",
+    "bulma": "^0.9.2",
+    "commitizen": "^4.2.3",
+    "create-banner": "^2.0.0",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^7.25.0",
+    "husky": "^6.0.0",
+    "lint-staged": "^11.0.0",
+    "sass": "^1.32.13",
+    "standard-version": "^9.3.0",
+    "typescript": "^4.1.3",
+    "vite": "^2.2.3",
+    "vue-tsc": "^0.0.24"
   },
-  "dependencies": {
-    "throttle-debounce": "^2.0.1",
-    "viewerjs": "^1.5.0"
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
   }
 }

README.md

@@ -5,7 +5,11 @@ # 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)
+[![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/) 
+[![language](https://img.shields.io/badge/language-Vue2-brightgreen.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)
 
 ## [Live demo](https://mirari.github.io/v-viewer/)
 
-## Examples
+## Quick Example
 - [directive](https://codepen.io/mirari/pen/PePrVq)
@@ -16,3 +20,4 @@ - [component](https://codepen.io/mirari/pen/PowNyEY)
 - [hide img tags](https://codepen.io/mirari/pen/vjjXwj)
-- [filtered images](https://codepen.io/mirari/pen/vvPoQb)
+- [filter images](https://codepen.io/mirari/pen/vvPoQb)
+- [change images](https://codepen.io/mirari/pen/ZdMbOK)
 - [**click buttons to show different images**](https://codesandbox.io/s/v-viewer-zhezr)
@@ -68,3 +73,2 @@
 
-
 ### Support UMD
@@ -129,3 +133,3 @@
 
-#### Direcitve modifiers
+#### Directive modifiers
 
@@ -250,2 +254,48 @@ ##### static
 
+### 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 `this.$viewer` 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 Viewer from 'v-viewer'
+  import Vue from 'vue'
+  Vue.use(Viewer)
+  export default {
+    data() {
+      sourceImageURLs: ['1.png', '2.png'],
+      sourceImageObjects: [{'src':'thumbnail.png', 'data-source':'source.png'}]
+    },
+    methods: {
+      previewURL () {
+        const $viewer = this.$viewerApi({
+          images: this.sourceImageURLs
+        })
+      },
+      previewImgObject () {
+        const $viewer = this.$viewerApi({
+          options: {
+            toolbar: true,
+            url: 'data-source',
+            initialViewIndex: 2
+          },
+          images: this.sourceImageObjects
+        })
+      }
+    }
+  }
+</script>
+```
+
 ## Options & Methods of Viewer
@@ -267,2 +317,3 @@
   <div id="app">
+    <!-- directive name -->
     <div class="images" v-vuer="{movable: false}">
@@ -272,2 +323,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>
@@ -286,4 +341,9 @@ </template>
       show () {
+        // viewerjs instance name
         const vuer = this.$el.querySelector('.images').$vuer
         vuer.show()
+        // api name
+        this.$vuerApi({
+          images: this.images
+        })
       }
@@ -317,4 +377,4 @@ }
 Viewer.setDefaults({
-  zIndexInline: 2017
+  zIndexInline: 2021
 })
 ```

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 { Directive, DefineComponent } 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 ViewerJs = ViewerType
+
+export type viewerApi = (options: VueViewer.ViewerApiOptions) => ViewerType
+
+export type directive = (options?: VueViewer.InstallationOptions) => Directive
+
+export type component = DefineComponent<{}, {}, any>
+
+export default VueViewer

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

19

decreased by-64.81%

Number of lines in readme file

372

increased by19.23%

Number of medium supply chain risk alerts

3

decreased by-25%

Worsened metrics

Total package byte prevSize

37597

decreased by-17.77%

Dependency count

3

increased by50%

Number of package files

7

decreased by-41.67%

Lines of code

131

decreased by-79.88%

Dependency changes

• + Addedlodash@^4.17.21

• + Addedvue@^3.0.5

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@vue/compiler-core@3.5.13(transitive)

• + Added@vue/compiler-dom@3.5.13(transitive)

• + Added@vue/compiler-sfc@3.5.13(transitive)

• + Added@vue/compiler-ssr@3.5.13(transitive)

• + Added@vue/reactivity@3.5.13(transitive)

• + Added@vue/runtime-core@3.5.13(transitive)

• + Added@vue/runtime-dom@3.5.13(transitive)

• + Added@vue/server-renderer@3.5.13(transitive)

• + Added@vue/shared@3.5.13(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedentities@4.5.0(transitive)

• + Addedestree-walker@2.0.2(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedmagic-string@0.30.13(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.49(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedvue@3.5.13(transitive)

• - Removedthrottle-debounce@^2.0.1

• - Removedthrottle-debounce@2.3.0(transitive)

• Updatedviewerjs@^1.9.0