diff --git a/.browserslistrc b/.browserslistrc
deleted file mode 100644
index 24577d8..0000000
--- a/.browserslistrc
+++ /dev/null
@@ -1,11 +0,0 @@
->=.5%
-last 2 versions
-not dead
-
-# Browsers minimal version for critical features
-not chrome < 21 # flexbox
-not edge < 16 # svg-css
-not firefox < 28 # flexbox
-not ie < 11 # flexbox
-not op_mini all # css-fixed
-not safari < 7 # flexbox
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 8b8659a..d487372 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -6,7 +6,7 @@ module.exports = {
extends: [
"eslint:recommended",
"xo/browser",
- "plugin:vue/recommended",
+ "plugin:vue/vue3-recommended",
"@vue/eslint-config-prettier",
],
parserOptions: {
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index 518ebd5..82b6bc6 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,3 +1,3 @@
-github: NickKaramoff
-liberapay: NickKaramoff
+github: kytta
+liberapay: kytta
custom: paypal.me/NickKaramoff
diff --git a/.gitignore b/.gitignore
index a9737ee..217ccfd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,6 @@
-.cache
-/dev/**/*.js*
-/dev/nuxt/.nuxt/
-dist
-.idea
-node_modules
+/dist/
+/_site/
+
+.idea/
+.vscode/
+node_modules/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index c18e984..01017b1 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -15,7 +15,7 @@ Thank you for deciding to contribute to vue-tinybox! There are some things you n
## I want to propose a feature or file a bug without writing code
-If you want to ask a question, propose a new feature or tell us about a bug, you should [create a new issue](https://github.com/NickKaramoff/vue-tinybox/issues/new/choose) on the matter. Please make sure to pick the appropriate template and add as much information as you can. The more you tell me, the quicker can I resolve your issue :)
+If you want to ask a question, propose a new feature or tell us about a bug, you should [create a new issue](https://github.com/kytta/vue-tinybox/issues/new/) on the matter. Please make sure to add as much information as you can. The more you tell me, the quicker can I resolve your issue :)
## I want to implement a feature or fix a bug myself
@@ -61,7 +61,7 @@ After your work is done, you can submit a pull request. There are some automated
After you submitted your issue or pull request, I will reach out to you and get the needed things done. Don't hesitate commenting on my decisions if you find them incorrect or unclear.
-If you have any questions, you can always contact me at [github@karamoff.dev](mailto:github@karamoff.dev)
+If you have any questions, you can always contact me at [me@kytta.dev](mailto:me@kytta.dev)
Thank you once again for participating in the life of vue-tinybox!
diff --git a/README.md b/README.md
index e5fabf8..68bc06b 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
-A slick, yet tiny lightbox gallery for Vue.js
+A slick, yet tiny lightbox gallery for Vue 3.
- **Slick.** No excessive design. Pictures, thumbnails, controls.
- **Tiny.** Dependency-free. 3 KB minified and gzipped.
@@ -10,54 +10,101 @@ A slick, yet tiny lightbox gallery for Vue.js
## Demo
-Observe the live demo here: [os.karamoff.dev/vue-tinybox](https://os.karamoff.dev/vue-tinybox)
+Observe the live demo here: [os.kytta.dev/vue-tinybox](https://os.kytta.dev/vue-tinybox)
## Basic usage
```html
-
+
```
## Install
-### Browsers
+- **In modern browsers**, you can import Tinybox from a CDN URL along with the
+ Vue import:
-1. Include the link to Tinybox in `
` alongside Vue.js:
+ ```html
+
-
- ```
+ // ...
+
+ ```
-2. Tinybox will auto-install upon detecting the global Vue instance. You can use
- it right away.
+ You'll also need the CSS file:
-### Node environment
+ ```html
+
+ ```
-1. Install the Tinybox package:
+- **In Node**, install the `vue-tinybox` package:
- ```sh
- npm install vue-tinybox
- # or
- yarn add vue-tinybox
- ```
+ ```sh
+ pnpm add vue-tinybox
+ ```
-2. Register it as you usually would:
+ ```sh
+ npm install vue-tinybox
+ ```
- ```js
- import Tinybox from "vue-tinybox";
- // or
- const Tinybox = require("vue-tinybox");
+ ```sh
+ yarn add vue-tinybox
+ ```
- Vue.component("Tinybox", Tinybox);
- //or
- Vue.use(Tinybox);
- //or
- new Vue({
- components: { Tinybox },
- // ...
- });
- ```
+ ...and then import Tinybox like you usually would:
+
+ ```js
+ import TinyboxGallery from "vue-tinybox";
+ import "vue-tinybox/css";
+ // or const TinyboxGallery = require("vue-tinybox");
+ ```
+
+After you have imported Tinybox, you can bind it to your application instance
+like you usually do:
+
+```js
+const app = createApp({
+ components: {
+ TinyboxGallery,
+ },
+});
+
+// or app.component("TinyboxGallery", TinyboxGallery);
+
+// or app.use(TinyboxGallery);
+```
+
+
+For older browsers
+
+If you need to use the component in a browser without ESM support, include the
+IIFE version:
+
+```html
+
+
+```
+
+This exposes the `TinyboxGallery` component in the global scope. Include it in your app:
+
+```html
+
+```
+
+
## API
@@ -89,11 +136,15 @@ becomes `null`.
Instead of `v-model` you can use the `index` prop and `change` event:
```html
-
+
- {index = i}" />
+ {index = i}"
+/>
```
### Events
@@ -107,10 +158,10 @@ Instead of `v-model` you can use the `index` prop and `change` event:
Events can come in handy for business logic cases:
```html
-
+import { ref } from "vue";
+import TinyboxGallery from "../src";
+
+const isDev = import.meta.env.DEV;
+
+const images = [
+ {
+ src: "https://picsum.photos/id/13/600/1000",
+ alt: "Empty beach",
+ caption: "Beach",
+ thumbnail: "https://picsum.photos/id/13/200",
+ },
+ {
+ src: "https://picsum.photos/id/42/800/600",
+ alt: "Desk in a café",
+ caption: "Café",
+ thumbnail: "https://picsum.photos/id/42/200",
+ },
+ {
+ src: "https://picsum.photos/id/256/1500/600",
+ alt: "Mountains range",
+ caption: "Mountains",
+ thumbnail: "https://picsum.photos/id/256/200",
+ },
+ {
+ src: "https://picsum.photos/id/666/800/600",
+ alt: "Green trees in forest",
+ caption: "Forest",
+ thumbnail: "https://picsum.photos/id/666/200",
+ },
+];
+
+const index = ref(null);
+
+const loopCheckbox = ref(false);
+const thumbsCheckbox = ref(true);
+
+if (isDev) {
+ images.push(
+ "https://picsum.photos/id/69/800/600",
+ "https://picsum.photos/id/420/800/600",
+ );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/awsm.opt.min.css b/demo/awsm.opt.min.css
similarity index 98%
rename from docs/awsm.opt.min.css
rename to demo/awsm.opt.min.css
index a847b1d..991660e 100644
--- a/docs/awsm.opt.min.css
+++ b/demo/awsm.opt.min.css
@@ -2,7 +2,7 @@
/*!
* awsm.css v3.0.4 (https://igoradamenko.github.io/awsm.css/)
- * Optimized for https://os.karamoff.dev/vue-tinybox
+ * Optimized for https://os.kytta.dev/vue-tinybox
* (c) 2015 Igor Adamenko
* MIT License
*/html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif;font-size:100%;line-height:1.4;background:#fff;color:#000;-webkit-overflow-scrolling:touch}body{margin:1.2em;font-size:1rem}@media (min-width:20rem){body{font-size:calc(.875rem + .625vw)}}@media (min-width:40rem){body{font-size:1.125rem}}body article,body footer,body header,body main{position:relative;max-width:40rem;margin:0 auto}body>header{margin-bottom:3.5em}body>header h1{margin:0;font-size:1.5em}body>header p{margin:0;font-size:.85em}body>footer{margin-top:6em;padding-bottom:1.5em;text-align:center;font-size:.8rem;color:#aaa}nav{margin:1em 0}nav ul{list-style:none;margin:0;padding:0}nav li{display:inline-block;margin-right:1em;margin-bottom:.25em}nav a:visited{color:#0064c1}nav a:hover{color:#f00000}ul{margin-top:0;padding-top:0;padding-left:2.5em}ul li+li{margin-top:.25em}p{margin:1em 0;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}p:first-child{margin-top:0}p:last-child{margin-bottom:0}p img{float:right;margin-bottom:.5em;margin-left:.5em}aside{margin:.5em 0;font-style:italic;color:#aaa}@media (min-width:65rem){aside{position:absolute;right:-12.5rem;width:9.375rem;max-width:9.375rem;margin:0;padding-left:.5em;font-size:.8em;border-left:1px solid #f2f2f2}}h1,h2,h3{margin:1.25em 0 0;line-height:1.2}h2:focus>a[href^="#"][id]:empty,h2:hover>a[href^="#"][id]:empty{opacity:1}h1+p,h2+p,h3+p{margin-top:.5em}h2>a[href^="#"][id]:empty{position:absolute;left:-.65em;opacity:0;text-decoration:none;font-weight:400;line-height:1;color:#aaa}@media (min-width:40rem){h2>a[href^="#"][id]:empty{left:-.8em}}h2>a[href^="#"][id]:empty:focus,h2>a[href^="#"][id]:empty:hover,h2>a[href^="#"][id]:empty:target{opacity:1;box-shadow:none;color:#000}h2>a[href^="#"][id]:empty:target:focus{outline:none}h2>a[href^="#"][id]:empty:before{content:"§ "}h1{font-size:2.5em}h2{font-size:1.75em}h3{font-size:1.25em}article+article{margin-top:4em}a{color:#0064c1}a:visited{color:#8d39d0}a:active,a:hover{outline-width:0}a:hover{color:#f00000}img{display:block;max-width:100%;margin:0 auto}code{font-family:Consolas,Lucida Console,Monaco,monospace;font-style:normal}pre{overflow-x:auto;font-size:.8em;background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)) 0 0,linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)) 100% 0;background-attachment:scroll,scroll;background-size:1px 100%,1px 100%;background-repeat:no-repeat,no-repeat}pre>code{display:inline-block;overflow-x:visible;box-sizing:border-box;min-width:100%;border-right:3px solid #fff;border-left:1px solid #fff}::selection{background:rgba(0,100,193,.25)}
diff --git a/docs/index.html b/demo/index.html
similarity index 64%
rename from docs/index.html
rename to demo/index.html
index d5e94a6..adec95c 100644
--- a/docs/index.html
+++ b/demo/index.html
@@ -28,18 +28,13 @@
-
+