vue-tinybox
Advanced tools
Comparing version 2.0.0-alpha.1 to 2.0.0-alpha.2
| { | ||
| "name": "vue-tinybox", | ||
| "version": "2.0.0-alpha.1", | ||
| "version": "2.0.0-alpha.2", | ||
| "description": "A slick, yet tiny lightbox gallery for Vue.js", | ||
@@ -42,14 +42,17 @@ "license": "MIT", | ||
| ], | ||
| "peerDependencies": { | ||
| "vue": "^3" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.10.3", | ||
| "@babel/preset-env": "^7.10.3", | ||
| "@rushstack/eslint-patch": "^1.2.0", | ||
| "@size-limit/preset-small-lib": "^4.5.2", | ||
| "@vitejs/plugin-vue2": "^2.2.0", | ||
| "@vitejs/plugin-vue": "^4.0.0", | ||
| "@vue/compiler-sfc": "^3.1", | ||
| "@vue/eslint-config-prettier": "^7.0.0", | ||
| "autoprefixer": "^9.8.4", | ||
| "eslint": "^7.3.1", | ||
| "eslint-config-airbnb-base": "^14.2.0", | ||
| "eslint-plugin-import": "^2.21.2", | ||
| "eslint-plugin-vue": "^6.2.2", | ||
| "npm-run-all": "^4.1.5", | ||
| "eslint": "^8.33.0", | ||
| "eslint-config-xo": "^0.43.1", | ||
| "eslint-plugin-vue": "^9.9.0", | ||
| "postcss": "^7.0.32", | ||
| "prettier": "^2.8.3", | ||
| "size-limit": "^4.5.2", | ||
@@ -59,5 +62,4 @@ "terser": "^5.16.2", | ||
| "vite-plugin-css-injected-by-js": "^2.4.0", | ||
| "vue": "^2", | ||
| "vue-eslint-parser": "^7.1.0", | ||
| "vue-template-compiler": "^2.7.14" | ||
| "vue": "^3.1", | ||
| "vue-eslint-parser": "^9.1.0" | ||
| }, | ||
@@ -81,7 +83,8 @@ "size-limit": [ | ||
| "dev": "vite", | ||
| "test:lint": "eslint .", | ||
| "test:size": "size-limit", | ||
| "pretest": "run-s build", | ||
| "test": "run-p --aggregate-output test:*" | ||
| "fmt": "prettier --write .", | ||
| "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path .gitignore", | ||
| "size": "size-limit", | ||
| "pretest": "pnpm run build", | ||
| "test": "pnpm run lint && pnpm run size" | ||
| } | ||
| } |
177
README.md
@@ -5,3 +5,3 @@ # vue-tinybox | ||
| A slick, yet tiny lightbox gallery for Vue.js | ||
| A slick, yet tiny lightbox gallery for Vue 3. | ||
@@ -19,8 +19,3 @@ - **Slick.** No excessive design. Pictures, thumbnails, controls. | ||
| ```html | ||
| <Tinybox | ||
| v-model="index" | ||
| :images="images" | ||
| loop | ||
| no-thumbs | ||
| /> | ||
| <Tinybox v-model:index="index" :images="images" loop no-thumbs /> | ||
| ``` | ||
@@ -30,42 +25,74 @@ | ||
| ### Browsers | ||
| - **In modern browsers**, you can import Tinybox from a CDN URL along with the | ||
| Vue import: | ||
| 1. Include the link to Tinybox in `<head>` alongside Vue.js: | ||
| ```html | ||
| <script type="module"> | ||
| import { createApp } from "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js"; | ||
| import Tinybox from "https://cdn.jsdelivr.net/npm/vue-tinybox@2/dist/vue-tinybox.es.js"; | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/vue"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vue-tinybox"></script> | ||
| ``` | ||
| 2. Tinybox will auto-install upon detecting the global Vue instance. You can use | ||
| it right away. | ||
| // ... | ||
| </script> | ||
| ``` | ||
| ### Node environment | ||
| - **In Node**, install the `vue-tinybox` package: | ||
| 1. Install the Tinybox package: | ||
| ```sh | ||
| pnpm add vue-tinybox | ||
| ``` | ||
| ```sh | ||
| npm install vue-tinybox | ||
| # or | ||
| yarn add vue-tinybox | ||
| ``` | ||
| ```sh | ||
| npm install vue-tinybox | ||
| ``` | ||
| 2. Register it as you usually would: | ||
| ```sh | ||
| yarn add vue-tinybox | ||
| ``` | ||
| ```js | ||
| import Tinybox from "vue-tinybox"; | ||
| // or | ||
| const Tinybox = require('vue-tinybox'); | ||
| ...and then import Tinybox like you usually would: | ||
| ```js | ||
| import Tinybox from "vue-tinybox"; | ||
| // or const Tinybox = require("vue-tinybox"); | ||
| ``` | ||
| Vue.component('Tinybox', Tinybox); | ||
| //or | ||
| Vue.use(Tinybox); | ||
| //or | ||
| new Vue({ | ||
| components: { Tinybox }, | ||
| // ... | ||
| }); | ||
| ``` | ||
| After you have imported Tinybox, you can bind it to your application instance | ||
| like you usually do: | ||
| ```js | ||
| const app = createApp({ | ||
| components: { | ||
| Tinybox, | ||
| }, | ||
| }); | ||
| // or app.component("Tinybox", Tinybox); | ||
| // or app.use(Tinybox); | ||
| ``` | ||
| <details> | ||
| <summary>For older browsers</summary> | ||
| If you need to use the component in a browser without ESM support, include the | ||
| IIFE version: | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/vue-tinybox@2/dist/vue-tinybox.iife.js"></script> | ||
| ``` | ||
| This exposes the `Tinybox` component in the global scope. Include it in your app: | ||
| ```html | ||
| <script> | ||
| app = createApp({ | ||
| // ... | ||
| }); | ||
| app.component("Tinybox", Tinybox); | ||
| </script> | ||
| ``` | ||
| </details> | ||
| ## API | ||
@@ -78,3 +105,3 @@ | ||
| | Field name | Type | Description | | ||
| |-------------|----------|------------------------------------------------------------------| | ||
| | ----------- | -------- | ---------------------------------------------------------------- | | ||
| | `src` | `String` | Image URL | | ||
@@ -88,3 +115,3 @@ | `thumbnail` | `String` | (optional) Thumbnail URL. If omitted, the image URL will be used | | ||
| | Prop name | Type | Default | Description | | ||
| |-------------|-----------|---------|---------------------------------------------------------------| | ||
| | ----------- | --------- | ------- | ------------------------------------------------------------- | | ||
| | `images` | `Array` | `[]` | List of either image URLs or [`Image`](#image-object) objects | | ||
@@ -103,14 +130,7 @@ | `loop` | `Boolean` | `false` | Indicates whether the images should loop | | ||
| ```html | ||
| <Tinybox | ||
| v-model="index" | ||
| :images="images" | ||
| /> | ||
| <Tinybox v-model:index="index" :images="images" /> | ||
| <!-- is equivalent to --> | ||
| <Tinybox | ||
| :images="images" | ||
| :index="index" | ||
| @change="(i) => {index = i}" | ||
| /> | ||
| <Tinybox :images="images" :index="index" @update:index="(i) => {index = i}" /> | ||
| ``` | ||
@@ -121,3 +141,3 @@ | ||
| | Event name | Payload | Description | | ||
| |---------------|------------------------------------------|--------------------------------------------------------------------------------------------| | ||
| | ------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------ | | ||
| | `change` | index of the image changed to | Is emitted on any image change (thumbnail navigation, prev/next, close) | | ||
@@ -131,8 +151,8 @@ | `prev`/`next` | index of the image changed to | Is emitted specifically when the user clicks "Prev"/"Next" or presses Left/Right arrow key | | ||
| <Tinybox | ||
| :images="images" | ||
| v-model="index" | ||
| @change="onChange" | ||
| @prev="onPrevious" | ||
| @next="onNext" | ||
| @close="onClose" | ||
| :images="images" | ||
| v-model:index="index" | ||
| @update:index="onChange" | ||
| @prev="onPrevious" | ||
| @next="onNext" | ||
| @close="onClose" | ||
| /> | ||
@@ -143,18 +163,18 @@ ``` | ||
| export default { | ||
| // ... | ||
| methods: { | ||
| onChange(index) { | ||
| console.log("User navigated to the photo: ", index); | ||
| }, | ||
| onPrevious(index) { | ||
| console.log("User clicked 'previous' to switch to: ", index); | ||
| }, | ||
| onNext(index) { | ||
| console.log("User clicked 'previous' to switch to: ", index); | ||
| }, | ||
| onClose(index) { | ||
| console.log("User closed TinyBox on this photo: ", index); | ||
| } | ||
| }, | ||
| } | ||
| // ... | ||
| methods: { | ||
| onChange(index) { | ||
| console.log("User navigated to the photo: ", index); | ||
| }, | ||
| onPrevious(index) { | ||
| console.log("User clicked 'previous' to switch to: ", index); | ||
| }, | ||
| onNext(index) { | ||
| console.log("User clicked 'previous' to switch to: ", index); | ||
| }, | ||
| onClose(index) { | ||
| console.log("User closed TinyBox on this photo: ", index); | ||
| }, | ||
| }, | ||
| }; | ||
| ``` | ||
@@ -164,10 +184,9 @@ | ||
| | ![Chrome][chrome] | ![Firefox][firefox] | ![Safari][safari] | ![MS Edge][edge] | ![Internet Explorer][ie] | | ||
| |:-----------------:|:-------------------:|:-----------------:|:----------------:|:------------------------:| | ||
| | **21+** | **28+** | **7+** | **16+** | **11** | | ||
| | ![Chrome][chrome] | ![Firefox][firefox] | ![Safari][safari] | ![Edge][edge] | | ||
| | :---------------: | :-----------------: | :---------------: | :-----------: | | ||
| | **51+** | **28+** | **10+** | **16+** | | ||
| [chrome]: https://github.com/alrra/browser-logos/raw/master/src/chrome/chrome_48x48.png | ||
| [firefox]: https://github.com/alrra/browser-logos/raw/master/src/firefox/firefox_48x48.png | ||
| [safari]: https://github.com/alrra/browser-logos/raw/master/src/safari/safari_48x48.png | ||
| [edge]: https://github.com/alrra/browser-logos/raw/master/src/edge/edge_48x48.png | ||
| [ie]: https://github.com/alrra/browser-logos/raw/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png | ||
| [chrome]: https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png | ||
| [firefox]: https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png | ||
| [safari]: https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_48x48.png | ||
| [edge]: https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png |
Sorry, the diff of this file is not supported yet
New alerts
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
Fixed alerts
Major refactor
Supply chain riskPackage 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
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-5.56%
17
- Number of lines in readme file
- increased by11.59%
183
Worsened metrics
- Total package byte prevSize
- decreased by-70.22%
18808
- Dependency count
- increased byInfinity%
1
- Number of package files
- decreased by-42.86%
4
- Lines of code
- decreased by-100%
0
No dependency changes