feat: glider components ✨

Author: Javier Diaz

index.js

@@ -0,0 +1,22 @@
+import Glider from './packages/Glider/index';
+import GliderSlide from './packages/GliderSlide/index';
+
+const components = [
+  Glider,
+  GliderSlide,
+];
+
+const install = (Vue) => {
+  components.map(component => Vue.component(component.name, component));
+};
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+export default {
+  version: '0.1.0-beta.0',
+  install,
+  Glider,
+  GliderSlide,
+};

packages/Glider/index.js

@@ -0,0 +1,7 @@
+import Glider from './src/main.vue';
+
+Glider.install = (Vue) => {
+  Vue.component(Glider.name, Glider);
+};
+
+export default Glider;

packages/Glider/src/main.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="glider-contain">
+    <div ref="glider" class="glider">
+      <slot />
+    </div>
+    <div ref="dots" role="tablist" class="dots"></div>
+  </div>
+</template>
+<script>
+import Glider from 'glider-js';
+import 'glider-js/glider.min.css';
+
+export default {
+  name: 'Glider',
+  props: {
+    slidesToShow: {
+      type: [String, Number],
+      default: 1,
+    },
+    slidesToScroll: {
+      type: [String, Number],
+      default: 1,
+    },
+    itemWidth: {
+      type: Number,
+      default: undefined,
+    },
+    exactWidth: {
+      type: Boolean,
+      default: undefined,
+    },
+    scrollLock: {
+      type: Boolean,
+      default: false,
+    },
+    scrollLockDelay: {
+      type: Number,
+      default: 250,
+    },
+    resizeLock: {
+      type: Boolean,
+      default: true,
+    },
+    rewind: {
+      type: Boolean,
+      default: false,
+    },
+    scrollPropagate: {
+      type: Boolean,
+      default: false,
+    },
+    draggable: {
+      type: Boolean,
+      default: false,
+    },
+    dragVelocity: {
+      type: Number,
+      default: 3.3,
+    },
+    duration: {
+      type: Number,
+      default: 0.5,
+    },
+    propagateEvent: {
+      type: Boolean,
+      default: true,
+    },
+    addTrack: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data: () => ({
+    $glider: null,
+  }),
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      const settings = {
+        dots: this.$refs.dots,
+        slidesToShow: this.slidesToShow,
+        slidesToScroll: this.slidesToScroll,
+        itemWidth: this.itemWidth,
+        exactWidth: this.exactWidth,
+        scrollLock: this.scrollLock,
+        scrollLockDelay: this.scrollLockDelay,
+        resizeLock: this.resizeLock,
+        rewind: this.rewind,
+        scrollPropagate: this.scrollPropagate,
+        draggable: this.draggable,
+        dragVelocity: this.dragVelocity,
+        duration: this.duration,
+        propagateEvent: this.propagateEvent,
+        addTrack: this.addTrack,
+      };
+      this.$glider = new Glider(this.$refs.glider, settings);
+    },
+  },
+  beforeDestroy() {
+    if (this.$glider) {
+      this.$glider.destroy();
+    }
+  },
+};
+</script>

packages/GliderSlide/index.js

@@ -0,0 +1,7 @@
+import GliderSlide from './src/main.vue';
+
+GliderSlide.install = (Vue) => {
+  Vue.component(GliderSlide.name, GliderSlide);
+};
+
+export default GliderSlide;

packages/GliderSlide/src/main.vue

@@ -0,0 +1,12 @@
+<script>
+export default {
+  name: 'GliderSlide',
+  render(h) {
+    return h('div', {
+      attrs: {
+        class: 'glider--slide',
+      },
+    }, this.$slots.default);
+  },
+};
+</script>