Merge branch 'release/1.1.0'

Author: titouanmathis

.gitignore

@@ -22,10 +22,7 @@ yarn-error.log*
 *.sublime-*
 
 # Build files
-dist/*.html
-dist/package.json
-dist/LICENSE
-dist/README.md
+dist/
 demo/dist/
 docs/.vuepress/dist/
 coverage/

Slider.rfc.md

@@ -75,7 +75,7 @@
           role="dialog"
           aria-modal="true"
           aria-hidden="true"
-          style="opacity: 0; pointer-events: none; visibility: hidden;"
+          style="opacity: 0; pointer-events: none; visibility: hidden"
           class="z-goku fixed inset-0"
         >
           <!--
@@ -268,7 +268,6 @@ <h2 id="components-tabs" class="text-lg mb-4">Tabs</h2>
           <div data-ref="content[]" aria-hidden="true">
             <img
               data-src="https://placekitten.com/299/299"
-              data-option-debug
               src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
               width="300"
               height="300"
@@ -407,18 +406,16 @@ <h2 id="components-tabs" class="text-lg mb-4">Tabs</h2>
 
       <hr class="my-10" />
 
-      <div class="absolute left-0 right-0 bottom-0 p-10 bg-gray-200">
-        Bottom
-      </div>
+      <div class="absolute left-0 right-0 bottom-0 p-10 bg-gray-200">Bottom</div>
     </main>
     <!-- BEGIN Cursor component -->
     <div
       data-component="Cursor"
-      class="z-goku fixed top-0 left-0 w-2 h-2 -mt-1 -ml-1 bg-black rounded-full pointer-events-none transform transition duration-200 ease-out-expo"
+      class="z-goku fixed top-0 left-0 flex items-center justify-center w-8 h-8 -mt-4 -ml-4 rounded-full border pointer-events-none"
     >
       <div
         data-ref="inner"
-        class="absolute top-0 left-0 w-8 h-8 -mt-3 -ml-3 rounded-full border transition duration-300 ease-out-expo"
+        class="w-2 h-2 rounded-full bg-black"
       ></div>
     </div>
     <!-- END Cursor component -->

demo/src/index.html

@@ -1,5 +1,7 @@
+/* eslint-disable max-classes-per-file */
 import Base from '../../../src';
-import { Modal, Tabs, Accordion } from '../../../src/components';
+import { Modal, Tabs, Accordion, Cursor } from '../../../src/components';
+import { matrix } from '../../../src/utils/css';
 import withBreakpointObserver from '../../../src/decorators/withBreakpointObserver';
 import BreakpointManagerDemo from './components/BreakPointManagerDemo';
 import BreakpointObserverDemo from './components/BreakpointObserverDemo';
@@ -13,12 +15,24 @@ class App extends Base {
     name: 'App',
     refs: ['modal'],
     log: true,
-    foo: 'dede',
     components: {
       Accordion,
       BreakpointManagerDemo,
       BreakpointObserverDemo,
-      Cursor: () => import(/* webpackChunkName: "Cursor" */ './components/Cursor'),
+      Cursor: class extends Cursor {
+        static config = {
+          ...Cursor.config,
+          refs: ['inner'],
+        };
+
+        render({ x, y, scale }) {
+          this.$el.style.transform = `translateZ(0) ${matrix({ translateX: x, translateY: y })}`;
+          this.$refs.inner.style.transform = `translateZ(0) ${matrix({
+            scaleX: scale,
+            scaleY: scale,
+          })}`;
+        }
+      },
       Skew: () => import(/* webpackChunkName: "Skew" */ './components/Skew'),
       '[data-src]': () => import(/* webpackChunkName: "Lazyload" */ './components/Lazyload'),
       Modal: withBreakpointObserver(Modal),

demo/src/js/app.js

@@ -1,25 +1,47 @@
 import Base from '../../../../src';
-import { withIntersectionObserver } from '../../../../src/decorators';
+import { matrix } from '../../../../src/utils/css';
+import { damp } from '../../../../src/utils/math';
+import { withMountWhenInView } from '../../../../src/decorators';
 
-export default class Skew extends withIntersectionObserver(Base) {
+function clamp(value, min, max) {
+  /* eslint-disable no-nested-ternary */
+  return min < max
+    ? value < min
+      ? min
+      : value > max
+      ? max
+      : value
+    : value < max
+    ? max
+    : value > min
+    ? min
+    : value;
+  /* eslint-enable no-nested-ternary */
+}
+
+export default class Skew extends withMountWhenInView(Base) {
   static config = {
     name: 'Skew',
   };
 
-  mounted() {
-    this.isVisible = false;
-  }
+  skewY = 0;
 
-  intersected([entry]) {
-    this.isVisible = entry.intersectionRatio > 0;
-  }
+  dampedSkewY = 0;
 
-  scrolled({ delta }) {
-    if (!this.isVisible) {
-      return;
+  scrolled({ delta, changed }) {
+    if (changed.y && !this.$services.has('ticked')) {
+      this.$services.enable('ticked');
     }
 
-    const skewY = delta.y * -0.05;
-    this.$el.style.transform = `skewY(${skewY}deg)`;
+    this.skewY = clamp(delta.y * -0.005, -0.1, 0.1);
+  }
+
+  ticked() {
+    this.dampedSkewY = damp(this.skewY, this.dampedSkewY, 0.1);
+    this.$el.style.transform = matrix({ skewY: this.dampedSkewY });
+
+    if (Math.abs(this.dampedSkewY - this.skewY) < 0.01) {
+      this.$services.disable('ticked');
+    }
   }
 }