Merge branch 'release/0.1.0-beta.3'

CHANGELOG.md

@@ -6,6 +6,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.1.0-beta.3] - 2020-07-12
+### Added
+- non-regular slide widths Support (#16)
+- SSR Support (#13)
+- Event optimisation with debounce
+- Reorganize methods, and load only on need (like Events: Scroll, Resize, or on init)
+
+### Updated
+- docs with new installation proccess
+
+### Moved
+- rollup configs to seperate folders
+
 ## [0.1.0-beta.2] - 2020-06-24
 ### Added
 - Rollup init

README.md

@@ -24,11 +24,6 @@ Please note that this lib is on very early stage. The idea behind this plugin is
 - You can set how many slides you want to display per current breakpoint (via css)
 - Fully responsive
 
-## Know issues / limitless
-- Partially not supported in IE
-- Carousel not working properly with unknown slides width
-- Touch/Drag is supported only on Mobiles/Tablets.
-
 ## Usage
 There are two ways to use it.
 
@@ -37,6 +32,7 @@ There are two ways to use it.
 ```js
 import Vue from 'vue'
 import VueSnap from 'vue-snap'
+import 'vue-snap/dist/vue-snap.css'
 
 Vue.use(VueSnap)
 ```
@@ -45,6 +41,7 @@ Vue.use(VueSnap)
 
 ```js
 import { Carousel, Slide } from 'vue-snap'
+import 'vue-snap/dist/vue-snap.css'
 
 export default {
   components: {

build/rollup.config.base.js

@@ -0,0 +1,14 @@
+import vue from 'rollup-plugin-vue'
+import babel from '@rollup/plugin-babel'
+import cjs from '@rollup/plugin-commonjs'
+import { terser } from 'rollup-plugin-terser'
+
+export default {
+  input: 'src/entry.js',
+  plugins: [
+    vue(),
+    babel({ babelHelpers: 'bundled', exclude: 'node_modules/**', }),
+    cjs(),
+    terser()
+  ]
+}

build/rollup.config.browser.js

@@ -0,0 +1,16 @@
+import base from './rollup.config.base'
+import resolve from '@rollup/plugin-node-resolve'
+
+const config = Object.assign({}, base, {
+  output: {
+    exports: 'named',
+    name: 'VueSnap',
+    file: 'dist/vue-snap.js',
+    format: 'iife'
+  },
+  external: [ 'vue' ]
+})
+
+config.plugins.push(resolve())
+
+export default config

build/rollup.config.es.js

@@ -0,0 +1,19 @@
+import base from './rollup.config.base'
+
+const config = Object.assign({}, base, {
+  output: {
+    exports: 'named',
+    name: 'VueSnap',
+    file: 'dist/vue-snap.esm.js',
+    format: 'esm',
+    globals: {
+      'seamless-scroll-polyfill/dist/esm/Element.scrollBy': 'Element_scrollBy'
+    }
+  },
+  external: [
+    'vue',
+    'seamless-scroll-polyfill'
+  ]
+})
+
+export default config

build/rollup.config.umd.js

@@ -0,0 +1,19 @@
+import base from './rollup.config.base'
+
+const config = Object.assign({}, base, {
+  output: {
+    exports: 'named',
+    name: 'VueSnap',
+    file: 'dist/vue-snap.umd.js',
+    format: 'umd',
+    globals: {
+      'seamless-scroll-polyfill/dist/esm/Element.scrollBy': 'Element_scrollBy'
+    }
+  },
+  external: [
+    'vue',
+    'seamless-scroll-polyfill'
+  ]
+})
+
+export default config

config/storybook/preview.js

@@ -1,8 +1,3 @@
 // Polyfill: Intersection observer (This is not a part of vue-snap)
 import 'intersection-observer'
 
-// Common
-import Vue from 'vue'
-import VueSnap from '../../dist/vue-snap.min'
-
-Vue.use(VueSnap)

src/assets/base.css → dist/vue-snap.css

@@ -16,9 +16,8 @@
     overflow-y: hidden;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
     scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
     -ms-overflow-style: none;
 }
 
@@ -38,27 +37,18 @@
 
 .vs-carousel__navigation {
     position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 48px;
-    min-height: 48px;
-    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3L6 10L14 17' stroke='%232F2F2F' stroke-width='1'/%3E%3C/svg%3E%0A");
-    background-repeat: no-repeat;
-    background-size: 20px 20px;
-    background-position: center;
-    background-color: rgba(255, 255, 255, 0.8);
-    border: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    width: 48px;
+    height: 48px;
     padding: 0;
-    outline: none;
     cursor: pointer;
 }
 
 .vs-carousel__navigation:hover,
 .vs-carousel__navigation:focus {
-    background-color: white;
+    border: none;
 }
 
 .vs-carousel__navigation--left {
@@ -67,5 +57,4 @@
 
 .vs-carousel__navigation--right {
     right: 0;
-    transform: rotate(180deg) translateY(50%);
 }