kytta · kytta · Feb 2, 2023 · Feb 2, 2023 · Feb 2, 2023 · Feb 2, 2023
diff --git a/.browserslistrc b/.browserslistrc
diff --git 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
@@ -1,3 +1,3 @@
-github: NickKaramoff
-liberapay: NickKaramoff
+github: kytta
+liberapay: kytta
 custom: paypal.me/NickKaramoff
diff --git 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
@@ -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
@@ -2,62 +2,109 @@
 
 <img src="https://raw.githubusercontent.com/googlefonts/noto-emoji/master/png/128/emoji_u1f30c.png" align="right" alt="Milky Way emoji" width="96" height="96">
 
-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.
 - **Adaptive.** Works on computers. Works on tablets. Works on phones.
 
 ## 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
-<Tinybox v-model="index" :images="images" loop no-thumbs />
+<TinyboxGallery v-model:index="index" :images="images" loop no-thumbs />
 ```
 
 ## 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 `<head>` alongside Vue.js:
+  ```html
+  <script type="module">
+  	import { createApp } from "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js";
+  	import TinyboxGallery from "https://cdn.jsdelivr.net/npm/vue-tinybox@2/dist/vue-tinybox.js";
 
-   ```html
-   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-   <script src="https://cdn.jsdelivr.net/npm/vue-tinybox"></script>
-   ```
+  	// ...
+  </script>
+  ```
 
-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
+  <link
+  	href="https://cdn.jsdelivr.net/npm/vue-tinybox@2/dist/vue-tinybox.css"
+  	rel="stylesheet"
+  />
+  ```
 
-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);
+```
+
+<details>
+<summary>For older browsers</summary>
+
+If you need to use the component in a browser without ESM support, include the
+IIFE version:
+
+```html
+<link
+	href="https://cdn.jsdelivr.net/npm/vue-tinybox@2/dist/vue-tinybox.css"
+	rel="stylesheet"
+/>
+<script src="https://cdn.jsdelivr.net/npm/vue-tinybox@2/dist/vue-tinybox.iife.js"></script>
+```
+
+This exposes the `TinyboxGallery` component in the global scope. Include it in your app:
+
+```html
+<script>
+	app = createApp({
+		// ...
+	});
+
+	app.component("TinyboxGallery", TinyboxGallery);
+</script>
+```
+
+</details>
 
 ## API
 
@@ -89,11 +136,15 @@ becomes `null`.
 Instead of `v-model` you can use the `index` prop and `change` event:
 
 ```html
-<Tinybox v-model="index" :images="images" />
+<TinyboxGallery v-model:index="index" :images="images" />
 
 <!-- is equivalent to -->
 
-<Tinybox :images="images" :index="index" @change="(i) => {index = i}" />
+<TinyboxGallery
+	:images="images"
+	:index="index"
+	@update: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
-<Tinybox
+<TinyboxGallery
 	:images="images"
-	v-model="index"
-	@change="onChange"
+	v-model:index="index"
+	@update:index="onChange"
 	@prev="onPrevious"
 	@next="onNext"
 	@close="onClose"
@@ -139,12 +190,11 @@ export default {
 
 ## Browser support
 
-| ![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
diff --git a/demo/DemoApp.vue b/demo/DemoApp.vue
@@ -0,0 +1,70 @@
+<script setup>
+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",
+	);
+}
+</script>
+
+<template>
+	<TinyboxGallery
+		v-model:index="index"
+		:images="images"
+		:loop="loopCheckbox"
+		:no-thumbs="!thumbsCheckbox"
+	></TinyboxGallery>
+
+	<img
+		v-for="(img, idx) in images"
+		:key="idx"
+		:src="img.thumbnail || img"
+		:alt="img.alt"
+		class="open-tinybox"
+		@click="index = idx"
+	/>
+	<div v-if="isDev">
+		<input id="loop" v-model="loopCheckbox" type="checkbox" />
+		<label for="loop">Loop</label>
+		<br />
+		<input id="thumbs" v-model="thumbsCheckbox" type="checkbox" />
+		<label for="thumbs">Thumbnails</label>
+	</div>
+</template>
diff --git a/docs/awsm.opt.min.css → demo/awsm.opt.min.css b/docs/awsm.opt.min.css → demo/awsm.opt.min.css