@studiometa/ui 1.0.0-rc.2 → 1.0.0-rc.3

package/Hoverable/Hoverable.d.ts

@@ -0,0 +1,67 @@
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseConfig, BaseProps, PointerServiceProps } from '@studiometa/js-toolkit';
+export interface HoverableProps extends BaseProps {
+    $refs: {
+        /**
+         * Target element that will be moved on hover.
+         */
+        target: HTMLElement;
+    };
+    $options: {
+        /**
+         * A number between in the range `0–1` used to smoothen the transition between each position.
+         */
+        sensitivity: number;
+        /**
+         * Wether to reverse the movement of the target or not.
+         */
+        reversed: boolean;
+        /**
+         * Wether to stop moving the target when the mouse is not over the root element or not.
+         */
+        contained: boolean;
+    };
+}
+declare const Hoverable_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").RelativePointerInterface, Base<BaseProps>>;
+/**
+ * Hoverable class.
+ * @see https://ui.studiometa.dev/-/components/Hoverable/
+ */
+export declare class Hoverable<T extends BaseProps = BaseProps> extends Hoverable_base<T & HoverableProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    props: {
+        x: number;
+        y: number;
+        dampedX: number;
+        dampedY: number;
+    };
+    /**
+     * The hoverable element, defaults to `this.$refs.target`.
+     */
+    get target(): HTMLElement;
+    /**
+     * The bouding element, defaults to `this.$el`.
+     */
+    get parent(): HTMLElement;
+    /**
+     * The bounds values in which the target can move.
+     */
+    get bounds(): {
+        yMin: number;
+        yMax: number;
+        xMin: number;
+        xMax: number;
+    };
+    /**
+     * Update props when the mouse moves.
+     */
+    movedrelative({ progress }: PointerServiceProps): void;
+    /**
+     * Update target position on each frame.
+     */
+    ticked(): () => void;
+}
+export {};

package/Hoverable/Hoverable.js

@@ -0,0 +1,88 @@
+import { Base, withRelativePointer } from "@studiometa/js-toolkit";
+import { map, transform, damp, getOffsetSizes, clamp01 } from "@studiometa/js-toolkit/utils";
+class Hoverable extends withRelativePointer(Base) {
+  /**
+   * Config.
+   */
+  static config = {
+    name: "Hoverable",
+    refs: ["target"],
+    options: {
+      sensitivity: {
+        type: Number,
+        default: 0.1
+      },
+      reversed: Boolean,
+      contained: Boolean
+    }
+  };
+  props = {
+    x: 0,
+    y: 0,
+    dampedX: 0,
+    dampedY: 0
+  };
+  /**
+   * The hoverable element, defaults to `this.$refs.target`.
+   */
+  get target() {
+    return this.$refs.target;
+  }
+  /**
+   * The bouding element, defaults to `this.$el`.
+   */
+  get parent() {
+    return this.$el;
+  }
+  /**
+   * The bounds values in which the target can move.
+   */
+  get bounds() {
+    const targetSizes = getOffsetSizes(this.target);
+    const parentSizes = getOffsetSizes(this.parent);
+    const xMin = targetSizes.x - parentSizes.x;
+    const yMin = targetSizes.y - parentSizes.y;
+    const xMax = xMin + targetSizes.width - parentSizes.width;
+    const yMax = yMin + targetSizes.height - parentSizes.height;
+    return {
+      yMin: yMin * -1,
+      yMax: yMax * -1,
+      xMin: xMin * -1,
+      xMax: xMax * -1
+    };
+  }
+  /**
+   * Update props when the mouse moves.
+   */
+  movedrelative({ progress }) {
+    const { bounds, props } = this;
+    const { reversed, contained } = this.$options;
+    const { x, y } = progress;
+    if (contained && (y < 0 || x < 0 || y > 1 || x > 1)) {
+      return;
+    }
+    const from = reversed ? 1 : 0;
+    const to = reversed ? 0 : 1;
+    props.y = map(clamp01(y), from, to, bounds.yMin, bounds.yMax);
+    props.x = map(clamp01(x), from, to, bounds.xMin, bounds.xMax);
+  }
+  /**
+   * Update target position on each frame.
+   */
+  ticked() {
+    const { props, target } = this;
+    const { sensitivity } = this.$options;
+    props.dampedY = damp(props.y, props.dampedY, sensitivity);
+    props.dampedX = damp(props.x, props.dampedX, sensitivity);
+    return () => {
+      transform(target, {
+        y: props.dampedY,
+        x: props.dampedX
+      });
+    };
+  }
+}
+export {
+  Hoverable
+};
+//# sourceMappingURL=Hoverable.js.map

package/Hoverable/Hoverable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Hoverable/Hoverable.ts"],
+  "sourcesContent": ["import { Base, withRelativePointer } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps, PointerServiceProps } from '@studiometa/js-toolkit';\nimport { map, transform, damp, getOffsetSizes, clamp01 } from '@studiometa/js-toolkit/utils';\n\nexport interface HoverableProps extends BaseProps {\n  $refs: {\n    /**\n     * Target element that will be moved on hover.\n     */\n    target: HTMLElement;\n  };\n  $options: {\n    /**\n     * A number between in the range `0\u20131` used to smoothen the transition between each position.\n     */\n    sensitivity: number;\n    /**\n     * Wether to reverse the movement of the target or not.\n     */\n    reversed: boolean;\n    /**\n     * Wether to stop moving the target when the mouse is not over the root element or not.\n     */\n    contained: boolean;\n  };\n}\n\n/**\n * Hoverable class.\n * @see https://ui.studiometa.dev/-/components/Hoverable/\n */\nexport class Hoverable<T extends BaseProps = BaseProps> extends withRelativePointer(Base)<\n  T & HoverableProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Hoverable',\n    refs: ['target'],\n    options: {\n      sensitivity: {\n        type: Number,\n        default: 0.1,\n      },\n      reversed: Boolean,\n      contained: Boolean,\n    },\n  };\n\n  props = {\n    x: 0,\n    y: 0,\n    dampedX: 0,\n    dampedY: 0,\n  };\n\n  /**\n   * The hoverable element, defaults to `this.$refs.target`.\n   */\n  get target(): HTMLElement {\n    return this.$refs.target;\n  }\n\n  /**\n   * The bouding element, defaults to `this.$el`.\n   */\n  get parent(): HTMLElement {\n    return this.$el;\n  }\n\n  /**\n   * The bounds values in which the target can move.\n   */\n  get bounds() {\n    const targetSizes = getOffsetSizes(this.target);\n    const parentSizes = getOffsetSizes(this.parent);\n    const xMin = targetSizes.x - parentSizes.x;\n    const yMin = targetSizes.y - parentSizes.y;\n    const xMax = xMin + targetSizes.width - parentSizes.width;\n    const yMax = yMin + targetSizes.height - parentSizes.height;\n\n    return {\n      yMin: yMin * -1,\n      yMax: yMax * -1,\n      xMin: xMin * -1,\n      xMax: xMax * -1,\n    };\n  }\n\n  /**\n   * Update props when the mouse moves.\n   */\n  movedrelative({ progress }: PointerServiceProps) {\n    const { bounds, props } = this;\n    const { reversed, contained } = this.$options;\n    const { x, y } = progress;\n\n    // Stop updating when pointer is outside of the parent bounds\n    if (contained && (y < 0 || x < 0 || y > 1 || x > 1)) {\n      return;\n    }\n\n    const from = reversed ? 1 : 0;\n    const to = reversed ? 0 : 1;\n\n    props.y = map(clamp01(y), from, to, bounds.yMin, bounds.yMax);\n    props.x = map(clamp01(x), from, to, bounds.xMin, bounds.xMax);\n  }\n\n  /**\n   * Update target position on each frame.\n   */\n  ticked() {\n    const { props, target } = this;\n    const { sensitivity } = this.$options;\n    props.dampedY = damp(props.y, props.dampedY, sensitivity);\n    props.dampedX = damp(props.x, props.dampedX, sensitivity);\n\n    return () => {\n      transform(target, {\n        y: props.dampedY,\n        x: props.dampedX,\n      });\n    };\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,MAAM,2BAA2B;AAE1C,SAAS,KAAK,WAAW,MAAM,gBAAgB,eAAe;AA6BvD,MAAM,kBAAmD,oBAAoB,IAAI,EAEtF;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA,MACP,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EAEA,QAAQ;AAAA,IACN,GAAG;AAAA,IACH,GAAG;AAAA,IACH,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAsB;AACxB,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAsB;AACxB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,UAAM,cAAc,eAAe,KAAK,MAAM;AAC9C,UAAM,cAAc,eAAe,KAAK,MAAM;AAC9C,UAAM,OAAO,YAAY,IAAI,YAAY;AACzC,UAAM,OAAO,YAAY,IAAI,YAAY;AACzC,UAAM,OAAO,OAAO,YAAY,QAAQ,YAAY;AACpD,UAAM,OAAO,OAAO,YAAY,SAAS,YAAY;AAErD,WAAO;AAAA,MACL,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,IACf;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc,EAAE,SAAS,GAAwB;AAC/C,UAAM,EAAE,QAAQ,MAAM,IAAI;AAC1B,UAAM,EAAE,UAAU,UAAU,IAAI,KAAK;AACrC,UAAM,EAAE,GAAG,EAAE,IAAI;AAGjB,QAAI,cAAc,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI;AACnD;AAAA,IACF;AAEA,UAAM,OAAO,WAAW,IAAI;AAC5B,UAAM,KAAK,WAAW,IAAI;AAE1B,UAAM,IAAI,IAAI,QAAQ,CAAC,GAAG,MAAM,IAAI,OAAO,MAAM,OAAO,IAAI;AAC5D,UAAM,IAAI,IAAI,QAAQ,CAAC,GAAG,MAAM,IAAI,OAAO,MAAM,OAAO,IAAI;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,UAAM,EAAE,OAAO,OAAO,IAAI;AAC1B,UAAM,EAAE,YAAY,IAAI,KAAK;AAC7B,UAAM,UAAU,KAAK,MAAM,GAAG,MAAM,SAAS,WAAW;AACxD,UAAM,UAAU,KAAK,MAAM,GAAG,MAAM,SAAS,WAAW;AAExD,WAAO,MAAM;AACX,gBAAU,QAAQ;AAAA,QAChB,GAAG,MAAM;AAAA,QACT,GAAG,MAAM;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;",
+  "names": []
+}

package/Hoverable/index.d.ts

@@ -0,0 +1 @@
+export * from './Hoverable.js';

package/Hoverable/index.js

@@ -0,0 +1,2 @@
+export * from "./Hoverable.js";
+//# sourceMappingURL=index.js.map

package/Hoverable/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Hoverable/index.ts"],
+  "sourcesContent": ["export * from './Hoverable.js';\n"],
+  "mappings": "AAAA,cAAc;",
+  "names": []
+}

package/index.d.ts

@@ -10,6 +10,7 @@ export * from './Draggable/index.js';
 export * from './Figure/index.js';
 export * from './FigureVideo/index.js';
 export * from './Frame/index.js';
+export * from './Hoverable/index.js';
 export * from './LargeText/index.js';
 export * from './LazyInclude/index.js';
 export * from './Menu/index.js';

package/index.js

@@ -10,6 +10,7 @@ export * from "./Draggable/index.js";
 export * from "./Figure/index.js";
 export * from "./FigureVideo/index.js";
 export * from "./Frame/index.js";
+export * from "./Hoverable/index.js";
 export * from "./LargeText/index.js";
 export * from "./LazyInclude/index.js";
 export * from "./Menu/index.js";

package/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../packages/ui/index.ts"],
-  "sourcesContent": ["export * from './Accordion/index.js';\nexport * from './Action/index.js';\nexport * from './AnchorNav/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Data/index.js';\nexport * from './decorators/index.js';\nexport * from './Draggable/index.js';\nexport * from './Figure/index.js';\nexport * from './FigureVideo/index.js';\nexport * from './Frame/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Menu/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\nexport * from './Sentinel/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/index.js';\nexport * from './Tabs/index.js';\nexport * from './Transition/index.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './Accordion/index.js';\nexport * from './Action/index.js';\nexport * from './AnchorNav/index.js';\nexport * from './AnchorScrollTo/index.js';\nexport * from './CircularMarquee/index.js';\nexport * from './Cursor/index.js';\nexport * from './Data/index.js';\nexport * from './decorators/index.js';\nexport * from './Draggable/index.js';\nexport * from './Figure/index.js';\nexport * from './FigureVideo/index.js';\nexport * from './Frame/index.js';\nexport * from './Hoverable/index.js';\nexport * from './LargeText/index.js';\nexport * from './LazyInclude/index.js';\nexport * from './Menu/index.js';\nexport * from './Modal/index.js';\nexport * from './Panel/index.js';\nexport * from './Prefetch/index.js';\nexport * from './ScrollAnimation/index.js';\nexport * from './ScrollReveal/index.js';\nexport * from './Sentinel/index.js';\nexport * from './Slider/index.js';\nexport * from './Sticky/index.js';\nexport * from './Tabs/index.js';\nexport * from './Transition/index.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/ui",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "description": "A set of opiniated, unstyled and accessible components",
   "publishConfig": {
     "access": "public"