Merge branch 'release/1.0.0-alpha.13' into master

Author: titouanmathis

.eslintrc.js

@@ -10,14 +10,15 @@ module.exports = {
   },
   rules: {
     'class-methods-use-this': 'off',
-    'no-underscore-dangle': ['error', { allow: ['__base__', '__isChild__', '__isBase__'] }],
+    'no-underscore-dangle': [
+      'error',
+      { allow: ['__base__', '__isChild__', '__isBase__', '__isAsync__', '_excludeFromAutoBind'] },
+    ],
   },
   settings: {
     'import/resolver': {
-      alias: [
-        ['~', './src'],
-      ],
-    }
+      alias: [['~', './src']],
+    },
   },
   overrides: [
     {

demo/src/index.html

@@ -50,8 +50,9 @@
       <!-- END BreakpointObserverDemo -->
 
       <div
+        data-ref="modal"
         data-component="Modal"
-        data-options='{ "activeBreakpoints": "m l", "debug": true, "styles": { "modal": { "active": "transition-all duration-500" } } }'
+        data-options='{ "activeBreakpoints": "m l", "styles": { "modal": { "active": "transition-all duration-500" } } }'
         class="text-center"
       >
         <!--
@@ -243,28 +244,28 @@ <h2 id="components-tabs" class="text-lg mb-4">Tabs</h2>
         data-options='{ "styles": { "btn": { "open": { "borderBottomColor": "#fff" } } } }'
       >
         <div class="flex px-4 border-b">
-          <button data-ref="btn" class="-mb-px -ml-px p-4 border">Tab #1</button>
-          <button data-ref="btn" class="-mb-px -ml-px p-4 border">Tab #2</button>
-          <button data-ref="btn" class="-mb-px -ml-px p-4 border">Tab #3</button>
+          <button data-ref="btn[]" class="-mb-px -ml-px p-4 border">Tab #1</button>
+          <button data-ref="btn[]" class="-mb-px -ml-px p-4 border">Tab #2</button>
+          <button data-ref="btn[]" class="-mb-px -ml-px p-4 border">Tab #3</button>
         </div>
         <div class="p-4">
-          <div data-ref="content" aria-hidden="false">
+          <div data-ref="content[]" aria-hidden="false">
             Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci nemo quod nobis
             laudantium iusto maiores molestias animi quos error quo consequatur, eum veniam sequi
             repellat placeat rerum a labore. Sit.
           </div>
-          <div data-ref="content" aria-hidden="true">
+          <div data-ref="content[]" aria-hidden="true">
             Nunc ultrices arcu quis mollis mollis. Duis at turpis et nibh pellentesque dapibus.
             Quisque luctus neque a placerat sodales. Sed a mauris efficitur eros fringilla viverra.
             Donec eleifend risus ligula. Donec non tellus lacinia, tempus enim id, lacinia arcu.
             Phasellus sit amet mollis nibh, at porta nunc. Fusce faucibus erat quis risus molestie,
             ac aliquam purus finibus. Pellentesque aliquet augue non sollicitudin semper. Vivamus
             est odio, efficitur vitae lacus id, eleifend maximus felis.
           </div>
-          <div data-ref="content" aria-hidden="true" style="display: none;">
+          <div data-ref="content[]" aria-hidden="true">
             <img
               data-src="https://placekitten.com/299/299"
-              data-options='{ "log": true }'
+              data-options='{ "debug": true }'
               src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
               width="300"
               height="300"

demo/src/js/app.js

@@ -1,12 +1,13 @@
-import { Base, Modal, Tabs, Accordion } from '../../../src';
-import { withBreakpointObserver } from '../../../src/decorators';
+import { Base, Modal, Tabs, Accordion } from '~/src';
+import { withBreakpointObserver } from '~/src/decorators';
 import BreakpointManagerDemo from './components/BreakPointManagerDemo';
 import BreakpointObserverDemo from './components/BreakpointObserverDemo';
 
 class App extends Base {
   get config() {
     return {
       name: 'App',
+      log: true,
       components: {
         Accordion,
         BreakpointManagerDemo,
@@ -24,6 +25,10 @@ class App extends Base {
     this.$log('Mounted 🎉');
   }
 
+  onModalOpen(...args) {
+    this.$log('onModalOpen', ...args);
+  }
+
   loaded() {
     this.$log('Loaded');
   }

demo/src/js/components/BreakPointManagerDemo/BreakpointManagerDemoBase.js

@@ -1,4 +1,4 @@
-import { Base } from '../../../../../src';
+import { Base } from '~/src';
 
 export default class BreakpointManagerDemoBase extends Base {
   get config() {

demo/src/js/components/BreakPointManagerDemo/index.js

@@ -1,5 +1,5 @@
-import { Base } from '../../../../../src/abstracts';
-import { withBreakpointManager } from '../../../../../src/decorators';
+import { Base } from '~/src/abstracts';
+import { withBreakpointManager } from '~/src/decorators';
 import BreakpointManagerDemoMobile from './BreakpointManagerDemoMobile';
 import BreakpointManagerDemoTablet from './BreakpointManagerDemoTablet';
 import BreakpointManagerDemoDesktop from './BreakpointManagerDemoDesktop';

demo/src/js/components/BreakpointObserverDemo.js

@@ -1,5 +1,5 @@
-import { Base } from '../../../../src/abstracts';
-import { withBreakpointObserver } from '../../../../src/decorators';
+import { Base } from '~/src/abstracts';
+import { withBreakpointObserver } from '~/src/decorators';
 
 export default class BreakpointObserverDemo extends withBreakpointObserver(Base) {
   get config() {

demo/src/js/components/Cursor.js

@@ -1,4 +1,4 @@
-import { Base } from '../../../../src';
+import { Base } from '~/src';
 
 export default class Cursor extends Base {
   get config() {

demo/src/js/components/Lazyload.js

@@ -1,10 +1,12 @@
-import { Base } from '../../../../src';
-import transition, { setClassesOrStyles } from '../../../../src/utils/css/transition';
+import { Base } from '~/src';
+import { withIntersectionObserver } from '~/src/decorators';
+import transition, { setClassesOrStyles } from '~/src/utils/css/transition';
 
-export default class Lazyload extends Base {
+export default class Lazyload extends withIntersectionObserver(Base) {
   get config() {
     return {
       name: 'Lazyload',
+      log: true,
       styles: {
         unloaded: { opacity: 0 },
         active: { transition: 'opacity 0.5s' },
@@ -15,34 +17,28 @@ export default class Lazyload extends Base {
 
   mounted() {
     setClassesOrStyles(this.$el, this.$options.styles.unloaded);
-
-    this.observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          window.requestIdleCallback(this.load);
-        }
-      },
-      {
-        threshold: 1.0,
-      }
-    );
-  }
-
-  loaded() {
-    this.observer.observe(this.$el);
   }
 
-  destroyed() {
-    this.observer.disconnect();
+  intersected([entry]) {
+    if (entry.isIntersecting) {
+      window.requestIdleCallback(this.load);
+    }
   }
 
   load() {
     const { unloaded, active, loaded } = this.$options.styles;
     const src = this.$el.getAttribute('data-src');
+
+    if (!src || this.isLoaded) {
+      this.$destroy();
+      return;
+    }
+
     const img = new Image();
     img.onload = () => {
       this.$el.setAttribute('src', src);
       this.$el.removeAttribute('data-src');
+      this.isLoaded = true;
       transition(this.$el, {
         from: unloaded,
         active,

demo/src/js/components/Skew.js

@@ -1,6 +1,7 @@
-import { Base } from '../../../../src';
+import { Base } from '~/src';
+import { withIntersectionObserver } from '~/src/decorators';
 
-export default class Skew extends Base {
+export default class Skew extends withIntersectionObserver(Base) {
   get config() {
     return {
       name: 'Skew',
@@ -9,15 +10,10 @@ export default class Skew extends Base {
 
   mounted() {
     this.isVisible = false;
-    this.observer = new IntersectionObserver(([entry]) => {
-      this.isVisible = entry.intersectionRatio > 0;
-    });
-
-    this.observer.observe(this.$el);
   }
 
-  destroyed() {
-    this.observer.disconnect();
+  intersected([entry]) {
+    this.isVisible = entry.intersectionRatio > 0;
   }
 
   scrolled({ delta }) {