@studiometa/ui 0.2.1 → 0.2.4

package/atoms/AnchorScrollTo/AnchorScrollTo.cjs

@@ -0,0 +1,47 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/AnchorScrollTo/AnchorScrollTo.js
+var AnchorScrollTo_exports = {};
+__export(AnchorScrollTo_exports, {
+  default: () => AnchorScrollTo
+});
+module.exports = __toCommonJS(AnchorScrollTo_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var AnchorScrollTo = class extends import_js_toolkit.Base {
+  get targetSelector() {
+    return this.$el.hash;
+  }
+  onClick(event) {
+    try {
+      (0, import_utils.scrollTo)(this.targetSelector);
+      event.preventDefault();
+    } catch (err) {
+    }
+  }
+};
+__publicField(AnchorScrollTo, "config", {
+  name: "AnchorScrollTo"
+});
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/AnchorScrollTo/AnchorScrollTo.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @typedef {AnchorScrollTo & {
+ *   $el: HTMLAnchorElement
+ * }} AnchorScrollToInterface
+ */
+/**
+ * AncorScrollTo class.
+ */
+export default class AnchorScrollTo extends Base {
+    static config: {
+        name: string;
+    };
+    /**
+     * Get the target selector.
+     *
+     * @this    {AnchorScrollToInterface}
+     * @returns {string}
+     */
+    get targetSelector(): string;
+    /**
+     * Scroll to the target selector on click.
+     *
+     * @param   {MouseEvent} event
+     * @returns {void}
+     */
+    onClick(event: MouseEvent): void;
+}
+export type AnchorScrollToInterface = AnchorScrollTo & {
+    $el: HTMLAnchorElement;
+};
+import { Base } from "@studiometa/js-toolkit";

package/atoms/AnchorScrollTo/AnchorScrollTo.js

@@ -0,0 +1 @@
+import{Base as r}from"@studiometa/js-toolkit";import{scrollTo as e}from"@studiometa/js-toolkit/utils";class o extends r{static config={name:"AnchorScrollTo"};get targetSelector(){return this.$el.hash}onClick(t){try{e(this.targetSelector),t.preventDefault()}catch{}}}export{o as default};

package/atoms/Cursor/Cursor.cjs

@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -31,18 +26,16 @@ var Cursor_exports = {};
 __export(Cursor_exports, {
   default: () => Cursor
 });
+module.exports = __toCommonJS(Cursor_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var import_utils = require("@studiometa/js-toolkit/utils");
 var Cursor = class extends import_js_toolkit.Base {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "x", 0);
-    __publicField(this, "y", 0);
-    __publicField(this, "scale", 0);
-    __publicField(this, "pointerX", 0);
-    __publicField(this, "pointerY", 0);
-    __publicField(this, "pointerScale", 0);
-  }
+  x = 0;
+  y = 0;
+  scale = 0;
+  pointerX = 0;
+  pointerY = 0;
+  pointerScale = 0;
   mounted() {
     this.x = 0;
     this.y = 0;
@@ -125,5 +118,4 @@ __publicField(Cursor, "config", {
     }
   }
 });
-module.exports = __toCommonJS(Cursor_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/atoms/Cursor/Cursor.d.ts

@@ -96,7 +96,7 @@ export default class Cursor extends Base {
      * @param {PointerServiceProps} options
      * @return {void}
      */
-    moved({ event, x, y, isDown }: PointerServiceProps): void;
+    moved(this: CursorInterface, { event, x, y, isDown }: PointerServiceProps): void;
     /**
      * RequestAnimationFrame hook.
      *
@@ -104,7 +104,7 @@ export default class Cursor extends Base {
      *
      * @return {void}
      */
-    ticked(): void;
+    ticked(this: CursorInterface): void;
     /**
      * Render the cursor.
      *

package/atoms/Cursor/Cursor.js

@@ -1,103 +1 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { Base } from "@studiometa/js-toolkit";
-import { damp, matrix } from "@studiometa/js-toolkit/utils";
-class Cursor extends Base {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "x", 0);
-    __publicField(this, "y", 0);
-    __publicField(this, "scale", 0);
-    __publicField(this, "pointerX", 0);
-    __publicField(this, "pointerY", 0);
-    __publicField(this, "pointerScale", 0);
-  }
-  mounted() {
-    this.x = 0;
-    this.y = 0;
-    this.scale = 0;
-    this.pointerX = 0;
-    this.pointerY = 0;
-    this.pointerScale = 0;
-    this.render({ x: this.x, y: this.y, scale: this.scale });
-  }
-  moved({ event, x, y, isDown }) {
-    if (!this.$services.has("ticked")) {
-      this.$services.enable("ticked");
-    }
-    this.pointerX = x;
-    this.pointerY = y;
-    let scale = 1;
-    if (!event) {
-      this.pointerScale = scale;
-      return;
-    }
-    const shouldGrow = event.target instanceof Element && event.target.matches(this.$options.growSelectors) || false;
-    const shouldReduce = isDown || event.target instanceof Element && event.target.matches(this.$options.shrinkSelectors) || false;
-    if (shouldGrow) {
-      scale = this.$options.growTo;
-    }
-    if (shouldReduce) {
-      scale = this.$options.shrinkTo;
-    }
-    this.pointerScale = scale;
-  }
-  ticked() {
-    this.x = damp(this.pointerX, this.x, this.$options.translateDampFactor);
-    this.y = damp(this.pointerY, this.y, this.$options.translateDampFactor);
-    this.scale = damp(this.pointerScale, this.scale, this.pointerScale < this.scale ? this.$options.shrinkDampFactor : this.$options.growDampFactor);
-    this.render({ x: this.x, y: this.y, scale: this.scale });
-    if (this.x === this.pointerX && this.y === this.pointerY && this.scale === this.pointerScale) {
-      this.$services.disable("ticked");
-    }
-  }
-  render({ x, y, scale }) {
-    const transform = matrix({
-      translateX: x,
-      translateY: y,
-      scaleX: scale,
-      scaleY: scale
-    });
-    this.$el.style.transform = `translateZ(0) ${transform}`;
-  }
-}
-__publicField(Cursor, "config", {
-  name: "Cursor",
-  options: {
-    growSelectors: {
-      type: String,
-      default: "a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"
-    },
-    shrinkSelectors: {
-      type: String,
-      default: "[data-cursor-shrink], [data-cursor-shrink] *"
-    },
-    growTo: {
-      type: Number,
-      default: 2
-    },
-    shrinkTo: {
-      type: Number,
-      default: 0.5
-    },
-    translateDampFactor: {
-      type: Number,
-      default: 0.25
-    },
-    growDampFactor: {
-      type: Number,
-      default: 0.25
-    },
-    shrinkDampFactor: {
-      type: Number,
-      default: 0.25
-    }
-  }
-});
-export {
-  Cursor as default
-};
+import{Base as n}from"@studiometa/js-toolkit";import{damp as a,matrix as c}from"@studiometa/js-toolkit/utils";class l extends n{static config={name:"Cursor",options:{growSelectors:{type:String,default:"a, a *, button, button *, [data-cursor-grow], [data-cursor-grow] *"},shrinkSelectors:{type:String,default:"[data-cursor-shrink], [data-cursor-shrink] *"},growTo:{type:Number,default:2},shrinkTo:{type:Number,default:.5},translateDampFactor:{type:Number,default:.25},growDampFactor:{type:Number,default:.25},shrinkDampFactor:{type:Number,default:.25}}};x=0;y=0;scale=0;pointerX=0;pointerY=0;pointerScale=0;mounted(){this.x=0,this.y=0,this.scale=0,this.pointerX=0,this.pointerY=0,this.pointerScale=0,this.render({x:this.x,y:this.y,scale:this.scale})}moved({event:t,x:i,y:s,isDown:r}){this.$services.has("ticked")||this.$services.enable("ticked"),this.pointerX=i,this.pointerY=s;let e=1;if(!t){this.pointerScale=e;return}const o=t.target instanceof Element&&t.target.matches(this.$options.growSelectors)||!1,h=r||t.target instanceof Element&&t.target.matches(this.$options.shrinkSelectors)||!1;o&&(e=this.$options.growTo),h&&(e=this.$options.shrinkTo),this.pointerScale=e}ticked(){this.x=a(this.pointerX,this.x,this.$options.translateDampFactor),this.y=a(this.pointerY,this.y,this.$options.translateDampFactor),this.scale=a(this.pointerScale,this.scale,this.pointerScale<this.scale?this.$options.shrinkDampFactor:this.$options.growDampFactor),this.render({x:this.x,y:this.y,scale:this.scale}),this.x===this.pointerX&&this.y===this.pointerY&&this.scale===this.pointerScale&&this.$services.disable("ticked")}render({x:t,y:i,scale:s}){const r=c({translateX:t,translateY:i,scaleX:s,scaleY:s});this.$el.style.transform=`translateZ(0) ${r}`}}export{l as default};

package/atoms/Figure/Figure.cjs

@@ -3,24 +3,19 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
@@ -31,6 +26,7 @@ var Figure_exports = {};
 __export(Figure_exports, {
   default: () => Figure
 });
+module.exports = __toCommonJS(Figure_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
 var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { threshold: [0, 1] }) {
   mounted() {
@@ -40,7 +36,7 @@ var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_
     if (!(this.$refs.img instanceof HTMLImageElement)) {
       throw new Error("[Figure] The `img` ref must be an `<img>` element.");
     }
-    if (this.$refs.img.hasAttribute("data-src")) {
+    if (this.$refs.img.hasAttribute("data-src") && this.$refs.img.getAttribute("data-src") !== this.$refs.img.src) {
       this.$refs.img.src = this.$refs.img.getAttribute("data-src");
     }
   }
@@ -49,5 +45,4 @@ __publicField(Figure, "config", {
   name: "Figure",
   refs: ["img"]
 });
-module.exports = __toCommonJS(Figure_exports);
 if (module.exports.default) module.exports = module.exports.default;

package/atoms/Figure/Figure.d.ts

@@ -20,7 +20,7 @@ export default class Figure extends Base {
      * Load on mount.
      * @this {Figure & FigureInterface}
      */
-    mounted(): void;
+    mounted(this: Figure & FigureInterface): void;
 }
 export type FigureRefs = {
     img: HTMLImageElement;

package/atoms/Figure/Figure.js

@@ -1,27 +1 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { Base, withMountWhenInView } from "@studiometa/js-toolkit";
-class Figure extends withMountWhenInView(Base, { threshold: [0, 1] }) {
-  mounted() {
-    if (!this.$refs.img) {
-      throw new Error("[Figure] The `img` ref is required.");
-    }
-    if (!(this.$refs.img instanceof HTMLImageElement)) {
-      throw new Error("[Figure] The `img` ref must be an `<img>` element.");
-    }
-    if (this.$refs.img.hasAttribute("data-src")) {
-      this.$refs.img.src = this.$refs.img.getAttribute("data-src");
-    }
-  }
-}
-__publicField(Figure, "config", {
-  name: "Figure",
-  refs: ["img"]
-});
-export {
-  Figure as default
-};
+import{Base as e,withMountWhenInView as t}from"@studiometa/js-toolkit";class i extends t(e,{threshold:[0,1]}){static config={name:"Figure",refs:["img"]};mounted(){if(!this.$refs.img)throw new Error("[Figure] The `img` ref is required.");if(!(this.$refs.img instanceof HTMLImageElement))throw new Error("[Figure] The `img` ref must be an `<img>` element.");this.$refs.img.hasAttribute("data-src")&&this.$refs.img.getAttribute("data-src")!==this.$refs.img.src&&(this.$refs.img.src=this.$refs.img.getAttribute("data-src"))}}export{i as default};

package/atoms/LargeText/LargeText.cjs

@@ -0,0 +1,82 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/LargeText/LargeText.js
+var LargeText_exports = {};
+__export(LargeText_exports, {
+  default: () => LargeText
+});
+module.exports = __toCommonJS(LargeText_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var LargeText = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { rootMargin: "50%" }) {
+  translateX = 0;
+  deltaY = 0;
+  transform = {
+    skewX: 0,
+    translateX: 0
+  };
+  width = 0;
+  mounted() {
+    this.width = this.$refs.target.clientWidth;
+  }
+  resized() {
+    this.width = this.$refs.target.clientWidth;
+  }
+  scrolled(props) {
+    this.deltaY = props.delta.y;
+  }
+  ticked() {
+    this.translateX -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;
+    this.transform.translateX = (0, import_utils.damp)(this.translateX, this.transform.translateX, 0.25);
+    if (this.$options.skew) {
+      this.transform.skewX = (0, import_utils.damp)((0, import_utils.clamp)(this.deltaY / 20 * -1, -0.5, 0.5) * this.$options.skewSensitivity, this.transform.skewX, 0.25);
+    }
+    if (this.translateX <= this.width * -1) {
+      this.translateX = 0;
+      this.transform.translateX += this.width;
+    } else if (this.$options.sensitivity < 0 && this.translateX >= this.width) {
+      this.translateX = 0;
+      this.transform.translateX -= this.width;
+    }
+    (0, import_utils.nextFrame)(() => {
+      this.$refs.target.style.transform = (0, import_utils.matrix)(this.transform) + " translateZ(0px)";
+    });
+  }
+};
+__publicField(LargeText, "config", {
+  name: "LargeText",
+  refs: ["target"],
+  options: {
+    skew: Boolean,
+    sensitivity: {
+      type: Number,
+      default: 1
+    },
+    skewSensitivity: {
+      type: Number,
+      default: 1
+    }
+  }
+});
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/LargeText/LargeText.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @typedef {LargeText & {
+ *   $refs: { target: HTMLElement },
+ *   $options: {
+ *     skew: boolean,
+ *     sensitivity: number,
+ *     skewSensitivity: number,
+ *   }
+ * }} LargeTextInterface
+ */
+/**
+ * Large text class.
+ */
+export default class LargeText extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        refs: string[];
+        options: {
+            skew: BooleanConstructor;
+            sensitivity: {
+                type: NumberConstructor;
+                default: number;
+            };
+            skewSensitivity: {
+                type: NumberConstructor;
+                default: number;
+            };
+        };
+    };
+    /**
+     * Translate X.
+     * @type {number}
+     */
+    translateX: number;
+    /**
+     * Scroll delta Y.
+     * @type {number}
+     */
+    deltaY: number;
+    /**
+     * Transform values.
+     */
+    transform: {
+        skewX: number;
+        translateX: number;
+    };
+    /**
+     * Target width.
+     * @type {number}
+     */
+    width: number;
+    /**
+     * Set width on mount.
+     *
+     * @this    {LargeTextInterface}
+     * @returns {void}
+     */
+    mounted(this: LargeTextInterface): void;
+    /**
+     * Set width on resize.
+     *
+     * @this    {LargeTextInterface}
+     * @returns {void}
+     */
+    resized(this: LargeTextInterface): void;
+    /**
+     * Update delta scroll on scroll.
+     *
+     * @param   {import('@studiometa/js-toolkit/services/scroll').ScrollServiceProps} props
+     * @returns {void}
+     */
+    scrolled(props: import('@studiometa/js-toolkit/services/scroll').ScrollServiceProps): void;
+    /**
+     * Update values on raf.
+     *
+     * @this    {LargeTextInterface}
+     * @returns {void}
+     */
+    ticked(this: LargeTextInterface): void;
+}
+export type LargeTextInterface = LargeText & {
+    $refs: {
+        target: HTMLElement;
+    };
+    $options: {
+        skew: boolean;
+        sensitivity: number;
+        skewSensitivity: number;
+    };
+};
+import { Base } from "@studiometa/js-toolkit";

package/atoms/LargeText/LargeText.js

@@ -0,0 +1 @@
+import{Base as i,withMountWhenInView as e}from"@studiometa/js-toolkit";import{damp as t,matrix as a,clamp as r,nextFrame as n}from"@studiometa/js-toolkit/utils";class h extends e(i,{rootMargin:"50%"}){static config={name:"LargeText",refs:["target"],options:{skew:Boolean,sensitivity:{type:Number,default:1},skewSensitivity:{type:Number,default:1}}};translateX=0;deltaY=0;transform={skewX:0,translateX:0};width=0;mounted(){this.width=this.$refs.target.clientWidth}resized(){this.width=this.$refs.target.clientWidth}scrolled(s){this.deltaY=s.delta.y}ticked(){this.translateX-=(Math.abs(this.deltaY)+1)*this.$options.sensitivity,this.transform.translateX=t(this.translateX,this.transform.translateX,.25),this.$options.skew&&(this.transform.skewX=t(r(this.deltaY/20*-1,-.5,.5)*this.$options.skewSensitivity,this.transform.skewX,.25)),this.translateX<=this.width*-1?(this.translateX=0,this.transform.translateX+=this.width):this.$options.sensitivity<0&&this.translateX>=this.width&&(this.translateX=0,this.transform.translateX-=this.width),n(()=>{this.$refs.target.style.transform=a(this.transform)+" translateZ(0px)"})}}export{h as default};

package/atoms/LazyInclude/LazyInclude.cjs

@@ -0,0 +1,67 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/ui/atoms/LazyInclude/LazyInclude.js
+var LazyInclude_exports = {};
+__export(LazyInclude_exports, {
+  default: () => LazyInclude
+});
+module.exports = __toCommonJS(LazyInclude_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var LazyInclude = class extends import_js_toolkit.Base {
+  mounted() {
+    if (!this.$options.src) {
+      this.$log("The `src` option is missing. Define it with the `data-option-src` attribute");
+      return;
+    }
+    fetch(this.$options.src).then((response) => response.text()).then((content) => {
+      this.$emit("content", content);
+    }).catch((error) => {
+      this.$emit("error", error);
+    }).finally(() => {
+      this.$emit("always");
+    });
+  }
+  onContent(content) {
+    this.$refs.loading.style.display = "none";
+    this.$el.innerHTML = content;
+  }
+  onError() {
+    this.$refs.error.style.display = "block";
+  }
+  onAlways() {
+    if (this.$options.terminateOnLoad) {
+      this.$terminate();
+    }
+  }
+};
+__publicField(LazyInclude, "config", {
+  name: "LazyInclude",
+  refs: ["loading", "error"],
+  emits: ["content", "error", "always"],
+  options: {
+    src: String,
+    terminateOnLoad: Boolean
+  }
+});
+if (module.exports.default) module.exports = module.exports.default;

package/atoms/LazyInclude/LazyInclude.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @typedef {{ src: string, terminateOnLoad: boolean }} LazyIncludeOptions
+ * @typedef {{ loading: HTMLElement, error: HTMLElement }} LazyIncludeRefs
+ * @typedef {LazyInclude & { $refs: LazyIncludeRefs, $options: LazyIncludeOptions }} LazyIncludeInterface
+ */
+/**
+ * LazyInclude class.
+ */
+export default class LazyInclude extends Base {
+    /**
+     * Config.
+     */
+    static config: {
+        name: string;
+        refs: string[];
+        emits: string[];
+        options: {
+            src: StringConstructor;
+            terminateOnLoad: BooleanConstructor;
+        };
+    };
+    /**
+     * Load the lazy content on mount.
+     *
+     * @this {LazyIncludeInterface}
+     * @returns {void}
+     */
+    mounted(this: LazyIncludeInterface): void;
+    /**
+     * Set content.
+     *
+     * @this {LazyIncludeInterface}
+     * @param   {string} content
+     * @returns {void}
+     */
+    onContent(this: LazyIncludeInterface, content: string): void;
+    /**
+     * Set error.
+     *
+     * @this {LazyIncludeInterface}
+     * @returns {void}
+     */
+    onError(this: LazyIncludeInterface): void;
+    /**
+     * Always.
+     *
+     * @this {LazyIncludeInterface}
+     * @returns {void}
+     */
+    onAlways(this: LazyIncludeInterface): void;
+}
+export type LazyIncludeOptions = {
+    src: string;
+    terminateOnLoad: boolean;
+};
+export type LazyIncludeRefs = {
+    loading: HTMLElement;
+    error: HTMLElement;
+};
+export type LazyIncludeInterface = LazyInclude & {
+    $refs: LazyIncludeRefs;
+    $options: LazyIncludeOptions;
+};
+import { Base } from "@studiometa/js-toolkit";