Merge branch 'master' into next

Author: Bartosz Dominiak

CHANGELOG.md

@@ -5,6 +5,27 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+## [0.6.1] - 2020-09-24
+### Updated
+- Yarn lock file
+
+## [0.6.0] - 2020-09-24
+### Removed
+- Removed maximum node version range (#41)
+- Node version max range (#41)
+
+### Added
+- Added dynamic tag support (#41)
+- Added i18n support with proper validation (#41)
+- Reset list-style CSS (#41)
+
+## [0.5.2] - 2020-09-21
+### Updated
+- Rollup configs
+- Vue@2 and Vue@3 examples
+- Docs
+- Dependencies
+- TravisCI Config (Auto-deploy only Vue@2 version)
 
 ## [0.5.1] - 2020-09-17
 ### Updated

README.md

@@ -8,27 +8,81 @@
 </div>
 
 # vue-snap
-> Lightweight Slider/Carousel based on CSS Scroll Snap.
+> Lightweight Carousel based on CSS Scroll Snap.
+
+## Table of Contents
+- [About](#about)
+- [Storybook & Docs](#stories--docs)
+- [Installation & Usage](#installation--usage)
+  - [for Vue@2](#for-vue2-version)
+  - [for Vue@3](#for-vue3-version)
+- [Examples](#examples))
+- [Contribution](#contribution)
+- [License](#license)
 
 ## About
-Please note that this lib is on very early stage. The idea behind this plugin is that to create fully responsive and well optimised Carousel. I created this as PoC for one of my biggest client, who wants to speed up his website.
+Idea behind this plugin is that to create fully responsive and well optimised Carousel.
+We used new CSS properties [Scroll Snapping](https://developers.google.com/web/updates/2018/07/css-scroll-snap), which allows us to lock the Carousel Wrapper to certain Slides or locations after a user has finished scrolling. This helps us to minimize library size, with only critical part, and avoid any heavy JS calculations or any CSS Hacks inside.
 
-## Storybook & Docs
+## Stories & Docs
 - 📕 [Stories](https://vue-snap.surge.sh)
-- 📺 [Props/Event](https://vue-snap.surge.sh/?path=/docs/carousel--default)
+- 📺 [Props/Events](https://vue-snap.surge.sh/?path=/docs/carousel--default)
 - 📖 [Docs (Guide)](https://bartdominiak.github.io/vue-snap)
 
 ## Benefits:
 - Lightweight (5-10x times lighter than other libs)
-- There is no calculation or heavy logic inside (Performence)
-- Mostly all custamization via CSS!
-- You can set how many slides you want to display per current breakpoint (via css)
-- Fully responsive
+- There is no calculation or heavy logic inside (Performence aspect)
+- Fully responsive and mostly all customization via CSS - like how many Slides do you want to display
+- ESM Bundle with Dead Code Elimination (Tree Shaking)
+- SSR Support like Nuxt.js 🎉  (Check [examples folder](https://github.com/bartdominiak/vue-snap/tree/master/examples))
+- `Vue@3` and `Vue@2` Support 🎉  (Check [installation process](#installation--usage))
+- Support all modern/common browsers (Check [here](https://caniuse.com/css-snappoints))
+
+## Installation & Usage
+### For `Vue@3` version
+#### Installation
+
+```terminal
+  yarn add vue-snap@next // or npm install vue-snap@next
+```
+
+#### Usage - Globally
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import VueSnap from 'vue-snap'
+import 'vue-snap/dist/vue-snap.css'
+
+const myApp = createApp(App)
+
+myApp.use(VueSnap)
+myApp.mount('#app')
+```
+
+#### Usage - Locally
+
+```js
+import { Carousel, Slide } from 'vue-snap'
+import 'vue-snap/dist/vue-snap.css'
 
-## Usage
-There are two ways to use it.
+export default {
+  components: {
+    Carousel,
+    Slide
+  }
+}
+```
 
-### Globally
+### For `Vue@2` version
+#### Installation
+
+```terminal
+  yarn add vue-snap // or npm install vue-snap
+```
+
+#### Usage - Globally
 
 ```js
 import Vue from 'vue'
@@ -38,7 +92,7 @@ import 'vue-snap/dist/vue-snap.css'
 Vue.use(VueSnap)
 ```
 
-### Locally
+#### Usage - Locally
 
 ```js
 import { Carousel, Slide } from 'vue-snap'
@@ -55,21 +109,11 @@ export default {
 ### Examples
 Check out [examples](https://github.com/bartdominiak/vue-snap/tree/master/examples) folder for more details.
 
-### Unit Testing with Jest
-
-Make sure to whitelist `vue-snap` from the `transformIgnorePattern`. Add following configuation in `test/unit/jest.conf.js`:
-
-```diff
-transformIgnorePatterns: [
-  '/node_modules(?![\\\\/]vue-snap[\\\\/])/'
-],
-```
-
 ## Development
 
 Install necessary depandancies with yarn or npm
 ```
-  yarn or npm
+  yarn // or npm install
 ```
 
 Run Storybook for development mode
@@ -83,4 +127,7 @@ Release
 ```
 
 ## Contribution
-Feel free to grab an issue from the list, just remember to squash your commits before merge.
+If you have a feature request then feel free to start a new issue, or just grab existing one.
+
+## License
+MIT

config/storybook/main.js

@@ -5,10 +5,10 @@ module.exports = {
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-actions',
-    '@storybook/addon-knobs',
     '@storybook/addon-viewport',
     '@storybook/addon-storysource',
-    '@storybook/addon-docs'
+    '@storybook/addon-docs',
+    '@storybook/addon-controls'
   ],
   webpackFinal: async (config) => {
     config.module.rules.push({

dist/vue-snap.css

@@ -11,6 +11,9 @@
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: none;
+    list-style: none;
+    margin: 0;
+    padding: 0;
 }
 
 .vs-carousel__wrapper::-webkit-scrollbar {

examples/nuxt/pages/index.vue

@@ -0,0 +1,3 @@
+node_modules
+.nuxt
+dist