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

package/AnchorScrollTo/AnchorScrollTo.d.ts

@@ -1,5 +1,6 @@
 import { Base } from '@studiometa/js-toolkit';
 import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { scrollTo } from '@studiometa/js-toolkit/utils';
 export interface AnchorScrollToProps extends BaseProps {
     $el: HTMLAnchorElement;
 }
@@ -10,9 +11,8 @@ export declare class AnchorScrollTo<T extends BaseProps = BaseProps> extends Bas
     static config: BaseConfig;
     /**
      * Get the target selector.
-     * @returns {string}
      */
-    get targetSelector(): string;
+    get targetSelector(): Parameters<typeof scrollTo>[0];
     /**
      * Scroll to the target selector on click.
      */

package/AnchorScrollTo/AnchorScrollTo.js

@@ -6,7 +6,6 @@ class AnchorScrollTo extends Base {
   };
   /**
    * Get the target selector.
-   * @returns {string}
    */
   get targetSelector() {
     return this.$el.hash;

package/AnchorScrollTo/AnchorScrollTo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/AnchorScrollTo/AnchorScrollTo.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { scrollTo } from '@studiometa/js-toolkit/utils';\n\nexport interface AnchorScrollToProps extends BaseProps {\n  $el: HTMLAnchorElement;\n}\n\n/**\n * AncorScrollTo class.\n */\nexport class AnchorScrollTo<T extends BaseProps = BaseProps> extends Base<AnchorScrollToProps & T> {\n  static config: BaseConfig = {\n    name: 'AnchorScrollTo',\n  };\n\n  /**\n   * Get the target selector.\n   * @returns {string}\n   */\n  get targetSelector() {\n    return this.$el.hash;\n  }\n\n  /**\n   * Scroll to the target selector on click.\n   */\n  onClick({ event }: { event: MouseEvent }) {\n    try {\n      scrollTo(this.targetSelector);\n      event.preventDefault();\n    } catch {\n      // Silence is golden.\n    }\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,gBAAgB;AASlB,MAAM,uBAAwD,KAA8B;AAAA,EACjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,iBAAiB;AACnB,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,EAAE,MAAM,GAA0B;AACxC,QAAI;AACF,eAAS,KAAK,cAAc;AAC5B,YAAM,eAAe;AAAA,IACvB,QAAQ;AAAA,IAER;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { scrollTo } from '@studiometa/js-toolkit/utils';\n\nexport interface AnchorScrollToProps extends BaseProps {\n  $el: HTMLAnchorElement;\n}\n\n/**\n * AncorScrollTo class.\n */\nexport class AnchorScrollTo<T extends BaseProps = BaseProps> extends Base<AnchorScrollToProps & T> {\n  static config: BaseConfig = {\n    name: 'AnchorScrollTo',\n  };\n\n  /**\n   * Get the target selector.\n   */\n  get targetSelector(): Parameters<typeof scrollTo>[0] {\n    return this.$el.hash;\n  }\n\n  /**\n   * Scroll to the target selector on click.\n   */\n  onClick({ event }: { event: MouseEvent }) {\n    try {\n      scrollTo(this.targetSelector);\n      event.preventDefault();\n    } catch {\n      // Silence is golden.\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,gBAAgB;AASlB,MAAM,uBAAwD,KAA8B;AAAA,EACjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,iBAAiD;AACnD,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,EAAE,MAAM,GAA0B;AACxC,QAAI;AACF,eAAS,KAAK,cAAc;AAC5B,YAAM,eAAe;AAAA,IACvB,QAAQ;AAAA,IAER;AAAA,EACF;AACF;",
   "names": []
 }

package/Button/Button.twig

@@ -9,7 +9,6 @@
  * @param array $attr
  * @param string $icon
  * @param array  $icon_attr
- * @param array|string $icon_classes
  * @param 'start'|'end' $icon_position
  * @param boolean $icon_only
  */
@@ -34,26 +33,30 @@
       href: tag == 'a' and href is defined ? href : false,
       aria_label: icon_only ? label : false
     },
-    { class: ['btn'] }
+    {
+      class: ['btn']
+    }
   )
 %}
 
 {% set rendered_icon %}
   {% block icon %}
-    {# @TODO: Breaking change -> Delete icon_classes to use only icon_attr #}
     {% include '@ui/Icon/Icon.twig' with {
       name: icon ?? '',
       attr: merge_html_attributes(
         icon_attr ?? null,
         {
-          class: {
-            'mr-3': not icon_only and icon_position == 'start',
-            'ml-3': not icon_only and icon_position == 'end',
-          }
+          class: [
+            'h-[0.75lh]',
+            {
+              'mr-3': not icon_only and icon_position == 'start',
+              'ml-3': not icon_only and icon_position == 'end'
+            }
+          ]
         },
         {
-          class: icon_classes ?? '',
-        },
+          class: '[&>svg]:w-full [&>svg]:h-full'
+        }
       )
     } %}
   {% endblock %}

package/Button/StyledButton.twig

@@ -4,30 +4,46 @@
  *   Styled button.
  *
  * @param 'primary'|'secondary'|'tertiary' $theme
+ * @param boolean $icon_only
+ * @param 's'|'m'|'l' $size
  */
 #}
 
 {% extends '@ui/Button/Button.twig' %}
 
-{% set icon_only = icon_only|default(false) %}
+{% set icon_position = icon_position ?? 'start' %}
+{% set icon_only = icon_only ?? false %}
 
 {% set theme = theme|default('primary') %}
 
+{% set size = size ?? 'm' %}
+{% if size not in ['s', 'm', 'l'] %}
+  {% set size = 'm' %}
+{% endif %}
+
 {% set theme_shared = [
   'rounded cursor-pointer transition',
   'disabled:cursor-not-allowed',
   {
     'inline-block': icon is not defined,
     'inline-flex items-center': icon is defined,
-    'px-6 py-4': not icon_only,
-    'p-4': icon_only
+    'px-6 py-4': size == 'l' and not icon_only,
+    'px-3 py-2': size == 'm' and not icon_only,
+    'px-2.5 py-1.5': size == 's' and not icon_only,
+    'p-4': size == 'l' and icon_only,
+    'p-3': size == 'm' and icon_only,
+    'p-2': size == 's' and icon_only,
+    'text-sm': size == 's'
   }
 ] %}
 
-{% set theme_primary = ['text-white bg-black', 'hover:bg-opacity-75 disabled:bg-opacity-50'] %}
+{% set theme_primary = [
+  'text-white bg-black dark:text-black dark:bg-white',
+  'hover:bg-opacity-75 disabled:bg-opacity-50'
+] %}
 
 {% set theme_secondary = [
-  'ring ring-inset ring-2 ring-black ring-opacity-25',
+  'ring ring-inset ring-2 ring-black dark:ring-white ring-opacity-25 dark:ring-opacity-25',
   {
     'hover:ring-opacity-100': (attr is defined and attr.disabled is not defined)
       or attr is not defined
@@ -47,3 +63,22 @@
     }
   )
 %}
+
+{% set icon_attr =
+  merge_html_attributes(
+    icon_attr ?? null,
+    {
+      class: 'h-[0.75lh]'
+    },
+    {
+      class: {
+        'mr-3': size == 'l' and not icon_only and icon_position == 'start',
+        'ml-3': size == 'l' and not icon_only and icon_position == 'end',
+        'mr-2': size == 'm' and not icon_only and icon_position == 'start',
+        'ml-2': size == 'm' and not icon_only and icon_position == 'end',
+        'mr-1': size == 's' and not icon_only and icon_position == 'start',
+        'ml-1': size == 's' and not icon_only and icon_position == 'end'
+      }
+    }
+  )
+%}

package/Button/StyledButtonRounded.twig

@@ -8,58 +8,28 @@
  */
 #}
 
-{% extends '@ui/Button/Button.twig' %}
+{% extends '@ui/Button/StyledButton.twig' %}
 
-{% set icon_only = icon_only|default(false) %}
-
-{% set theme = theme|default('primary') %}
-
-{% set theme_shared = [
-  'rounded-full cursor-pointer transition',
-  'disabled:cursor-not-allowed leading-6',
-  {
-    'inline-block': icon is not defined,
-    'inline-flex items-center': icon is defined,
-    'px-6 py-4': not icon_only,
-    'w-14 relative p-4': icon_only
-  }
-] %}
-
-{% set theme_primary = ['text-white bg-black', 'hover:bg-opacity-75 disabled:bg-opacity-50'] %}
-
-{% set theme_secondary = [
-  'ring ring-inset ring-2 ring-black ring-opacity-25',
-  {
-    'hover:ring-opacity-100': (attr is defined and attr.disabled is not defined)
-      or attr is not defined
-  }
-] %}
+{% set icon_only = icon_only ?? null %}
 
 {% set attr =
   merge_html_attributes(
     attr ?? null,
     null,
     {
-      class: [
-        theme_shared,
-        theme == 'primary' ? theme_primary : '',
-        theme == 'secondary' ? theme_secondary : ''
-      ]
+      class: ['rounded-full']
     }
   )
 %}
-{% set icon_class = icon_class|default({}) %}
+
 {% if icon_only %}
-  {% set icon_classes =
-    icon_classes
-      |default(['absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2'])
-      |merge(icon_class)
+  {% set icon_attr =
+    merge_html_attributes(
+      icon_attr ?? null,
+      {
+        class: 'h-[0.75lh] aspect-square'
+      },
+      null
+    )
   %}
 {% endif %}
-
-{% block icon %}
-  {{ parent() }}
-  {% if icon_only %}
-     
-  {% endif %}
-{% endblock %}

package/Data/DataBind.js

@@ -31,7 +31,7 @@ class DataBind extends Base {
       return this.$options.prop;
     }
     const { target } = this;
-    if (target instanceof HTMLInputElement) {
+    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
       return "value";
     }
     return "textContent";

package/Data/DataBind.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Data/DataBind.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isArray } from '@studiometa/js-toolkit/utils';\nimport { isInput, isCheckbox, isSelect } from './utils.js';\n\nconst groups = new Map<string, Set<DataBind>>();\n\nexport interface DataBindProps extends BaseProps {\n  $options: {\n    prop: string;\n    group: string;\n  };\n}\n\nexport class DataBind<T extends BaseProps = BaseProps> extends Base<DataBindProps & T> {\n  static config: BaseConfig = {\n    name: 'DataBind',\n    options: {\n      prop: String,\n      group: String,\n    },\n  };\n\n  get relatedInstances() {\n    const { group } = this.$options;\n\n    const instances = groups.get(group) ?? groups.set(group, new Set()).get(group);\n\n    for (const instance of instances) {\n      if (!instance.$el.isConnected) {\n        instances.delete(instance);\n      }\n    }\n\n    return instances;\n  }\n\n  get multiple() {\n    return this.$options.group.endsWith('[]');\n  }\n\n  get target() {\n    return this.$el;\n  }\n\n  get prop() {\n    if (this.$options.prop) {\n      return this.$options.prop;\n    }\n\n    const { target } = this;\n    if (target instanceof HTMLInputElement) {\n      return 'value';\n    }\n\n    return 'textContent';\n  }\n\n  get value() {\n    return this.get();\n  }\n\n  set value(value) {\n    this.set(value);\n  }\n\n  get() {\n    const { target, multiple } = this;\n\n    if (isSelect(target)) {\n      if (multiple) {\n        const values = [];\n        // @ts-ignore\n        for (const option of target.options) {\n          if (option.selected) {\n            values.push(option.value);\n          }\n        }\n\n        return values;\n      }\n\n      const option = target.options.item(target.selectedIndex);\n      return option.value;\n    }\n\n    if (isCheckbox(target)) {\n      if (multiple) {\n        const values = new Set();\n        for (const instance of this.relatedInstances) {\n          if (isCheckbox(instance.target) && instance.target.checked) {\n            values.add(instance.target.value);\n          }\n        }\n        return Array.from(values);\n      } else {\n        return target.checked;\n      }\n    }\n\n    return target[this.prop];\n  }\n\n  set(value: boolean | string | string[], dispatch = true) {\n    const { target, multiple, relatedInstances } = this;\n\n    if (dispatch) {\n      for (const instance of relatedInstances) {\n        if (instance !== this && instance.value !== value) {\n          instance.set(value, false);\n        }\n      }\n    }\n\n    if (isSelect(target)) {\n      // @ts-ignore\n      for (const option of target.options) {\n        option.selected =\n          multiple && isArray(value) ? value.includes(option.value) : option.value === value;\n      }\n      return;\n    }\n\n    if (isInput(target)) {\n      switch (target.type) {\n        case 'radio':\n          target.checked = target.value === value;\n          return;\n        case 'checkbox':\n          target.checked =\n            multiple && isArray(value) ? value.includes(target.value) : Boolean(value);\n          return;\n      }\n    }\n\n    target[this.prop] = value;\n  }\n\n  mounted() {\n    this.relatedInstances.add(this);\n  }\n\n  destroyed() {\n    this.relatedInstances.delete(this);\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isArray } from '@studiometa/js-toolkit/utils';\nimport { isInput, isCheckbox, isSelect } from './utils.js';\n\nconst groups = new Map<string, Set<DataBind>>();\n\nexport interface DataBindProps extends BaseProps {\n  $options: {\n    prop: string;\n    group: string;\n  };\n}\n\nexport class DataBind<T extends BaseProps = BaseProps> extends Base<DataBindProps & T> {\n  static config: BaseConfig = {\n    name: 'DataBind',\n    options: {\n      prop: String,\n      group: String,\n    },\n  };\n\n  get relatedInstances() {\n    const { group } = this.$options;\n\n    const instances = groups.get(group) ?? groups.set(group, new Set()).get(group);\n\n    for (const instance of instances) {\n      if (!instance.$el.isConnected) {\n        instances.delete(instance);\n      }\n    }\n\n    return instances;\n  }\n\n  get multiple() {\n    return this.$options.group.endsWith('[]');\n  }\n\n  get target() {\n    return this.$el;\n  }\n\n  get prop() {\n    if (this.$options.prop) {\n      return this.$options.prop;\n    }\n\n    const { target } = this;\n    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {\n      return 'value';\n    }\n\n    return 'textContent';\n  }\n\n  get value() {\n    return this.get();\n  }\n\n  set value(value) {\n    this.set(value);\n  }\n\n  get() {\n    const { target, multiple } = this;\n\n    if (isSelect(target)) {\n      if (multiple) {\n        const values = [];\n        // @ts-ignore\n        for (const option of target.options) {\n          if (option.selected) {\n            values.push(option.value);\n          }\n        }\n\n        return values;\n      }\n\n      const option = target.options.item(target.selectedIndex);\n      return option.value;\n    }\n\n    if (isCheckbox(target)) {\n      if (multiple) {\n        const values = new Set();\n        for (const instance of this.relatedInstances) {\n          if (isCheckbox(instance.target) && instance.target.checked) {\n            values.add(instance.target.value);\n          }\n        }\n        return Array.from(values);\n      } else {\n        return target.checked;\n      }\n    }\n\n    return target[this.prop];\n  }\n\n  set(value: boolean | string | string[], dispatch = true) {\n    const { target, multiple, relatedInstances } = this;\n\n    if (dispatch) {\n      for (const instance of relatedInstances) {\n        if (instance !== this && instance.value !== value) {\n          instance.set(value, false);\n        }\n      }\n    }\n\n    if (isSelect(target)) {\n      // @ts-ignore\n      for (const option of target.options) {\n        option.selected =\n          multiple && isArray(value) ? value.includes(option.value) : option.value === value;\n      }\n      return;\n    }\n\n    if (isInput(target)) {\n      switch (target.type) {\n        case 'radio':\n          target.checked = target.value === value;\n          return;\n        case 'checkbox':\n          target.checked =\n            multiple && isArray(value) ? value.includes(target.value) : Boolean(value);\n          return;\n      }\n    }\n\n    target[this.prop] = value;\n  }\n\n  mounted() {\n    this.relatedInstances.add(this);\n  }\n\n  destroyed() {\n    this.relatedInstances.delete(this);\n  }\n}\n"],
+  "mappings": "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",
   "names": ["option"]
 }

package/Draggable/Draggable.d.ts

@@ -1,33 +1,63 @@
 import { Base } from '@studiometa/js-toolkit';
 import type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';
+export interface DraggableProps extends BaseProps {
+    $refs: {
+        target: HTMLElement;
+    };
+    $options: {
+        x: boolean;
+        y: boolean;
+        fitBounds: boolean;
+        sensitivity: number;
+        dropSensitivity: number;
+    };
+}
 declare const Draggable_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").BaseInterface, Base<BaseProps>>;
 /**
  * Draggable class.
  */
-export declare class Draggable<T extends BaseProps = BaseProps> extends Draggable_base<T> {
+export declare class Draggable<T extends BaseProps = BaseProps> extends Draggable_base<T & DraggableProps> {
     /**
      * Config.
      */
     static config: BaseConfig;
     /**
-     * Horizontal transformation.
+     * Props for the target position.
+     */
+    props: {
+        x: number;
+        y: number;
+        originX: number;
+        originY: number;
+        dampedX: number;
+        dampedY: number;
+    };
+    /**
+     * Smooth factor.
      */
-    x: number;
+    dampFactor: number;
     /**
-     * Vertical transformation.
+     * The draggable element, defaults to `this.$refs.target`.
      */
-    y: number;
+    get target(): HTMLElement;
     /**
-     * Horizontal position origin.
+     * The bouding element, defaults to `this.$el`.
      */
-    originX: number;
+    get parent(): HTMLElement;
     /**
-     * Vertical position origin.
+     * The bounds values.
      */
-    originY: number;
+    get bounds(): {
+        yMin: number;
+        yMax: number;
+        xMin: number;
+        xMax: number;
+    };
     /**
      * Drag service hook.
      */
     dragged(props: DragServiceProps): void;
+    ticked(): void;
+    render(): void;
 }
 export {};

package/Draggable/Draggable.js

@@ -1,40 +1,124 @@
 import { Base, withDrag } from "@studiometa/js-toolkit";
-import { matrix } from "@studiometa/js-toolkit/utils";
-class Draggable extends withDrag(Base) {
+import { domScheduler, transform, damp, clamp, getOffsetSizes } from "@studiometa/js-toolkit/utils";
+class Draggable extends withDrag(Base, {
+  // @ts-expect-error draggable is instance of Draggable.
+  target: (draggable) => draggable.target
+}) {
   /**
    * Config.
    */
   static config = {
-    name: "DraggableElement"
+    name: "DraggableElement",
+    refs: ["target"],
+    emits: ["drag-start", "drag-drag", "drag-drop", "drag-inertia", "drag-stop", "drag-fit"],
+    options: {
+      x: {
+        type: Boolean,
+        default: true
+      },
+      y: {
+        type: Boolean,
+        default: true
+      },
+      fitBounds: Boolean,
+      sensitivity: { type: Number, default: 0.5 },
+      dropSensitivity: { type: Number, default: 0.1 }
+    }
   };
   /**
-   * Horizontal transformation.
+   * Props for the target position.
    */
-  x = 0;
+  props = {
+    x: 0,
+    y: 0,
+    originX: 0,
+    originY: 0,
+    dampedX: 0,
+    dampedY: 0
+  };
   /**
-   * Vertical transformation.
+   * Smooth factor.
    */
-  y = 0;
+  dampFactor = 0.5;
+  /**
+   * The draggable element, defaults to `this.$refs.target`.
+   */
+  get target() {
+    return this.$refs.target;
+  }
   /**
-   * Horizontal position origin.
+   * The bouding element, defaults to `this.$el`.
    */
-  originX = 0;
+  get parent() {
+    return this.$el;
+  }
   /**
-   * Vertical position origin.
+   * The bounds values.
    */
-  originY = 0;
+  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
+    };
+  }
   /**
    * Drag service hook.
    */
   dragged(props) {
-    if (props.mode === "start") {
-      this.originX = this.x;
-      this.originY = this.y;
-      return;
+    this.$emit(`drag-${props.mode}`, this.props);
+    if (props.mode === props.MODES.START) {
+      this.props.originX = this.props.x;
+      this.props.originY = this.props.y;
+      this.dampFactor = this.$options.sensitivity;
+      this.render();
+    } else if (props.mode === props.MODES.DRAG || props.mode === props.MODES.INERTIA && !this.$options.fitBounds) {
+      this.props.x = this.props.originX + props.x - props.origin.x;
+      this.props.y = this.props.originY + props.y - props.origin.y;
+      this.render();
+    } else if (props.mode === props.MODES.DROP && this.$options.fitBounds) {
+      const { bounds } = this;
+      this.props.x = clamp(
+        this.props.originX + props.final.x - props.origin.x,
+        bounds.xMin,
+        bounds.xMax
+      );
+      this.props.y = clamp(
+        this.props.originY + props.final.y - props.origin.y,
+        bounds.yMin,
+        bounds.yMax
+      );
+      this.dampFactor = this.$options.dropSensitivity;
+      this.$services.enable("ticked");
     }
-    this.x = this.originX + props.x - props.origin.x;
-    this.y = this.originY + props.y - props.origin.y;
-    this.$el.style.transform = matrix({ translateX: this.x, translateY: this.y });
+  }
+  ticked() {
+    this.$emit(`drag-inertia`, this.props);
+    this.render();
+    if (this.props.dampedX === this.props.x && this.props.dampedY === this.props.y) {
+      this.$services.disable("ticked");
+      this.$emit("drag-fit", this.props);
+    }
+  }
+  render() {
+    this.props.dampedX = damp(this.props.x, this.props.dampedX, this.dampFactor);
+    this.props.dampedY = damp(this.props.y, this.props.dampedY, this.dampFactor);
+    domScheduler.read(() => {
+      const { x, y } = this.$options;
+      domScheduler.write(() => {
+        transform(this.target, {
+          x: x ? this.props.dampedX : 0,
+          y: y ? this.props.dampedY : 0
+        });
+      });
+    });
   }
 }
 export {

package/Draggable/Draggable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Draggable/Draggable.ts"],
-  "sourcesContent": ["import { Base, withDrag } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { matrix } from '@studiometa/js-toolkit/utils';\n\n/**\n * Draggable class.\n */\nexport class Draggable<T extends BaseProps = BaseProps> extends withDrag(Base)<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'DraggableElement',\n  };\n\n  /**\n   * Horizontal transformation.\n   */\n  x = 0;\n\n  /**\n   * Vertical transformation.\n   */\n  y = 0;\n\n  /**\n   * Horizontal position origin.\n   */\n  originX = 0;\n\n  /**\n   * Vertical position origin.\n   */\n  originY = 0;\n\n  /**\n   * Drag service hook.\n   */\n  dragged(props: DragServiceProps) {\n    if (props.mode === 'start') {\n      this.originX = this.x;\n      this.originY = this.y;\n      return;\n    }\n\n    this.x = this.originX + props.x - props.origin.x;\n    this.y = this.originY + props.y - props.origin.y;\n\n    this.$el.style.transform = matrix({ translateX: this.x, translateY: this.y });\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,MAAM,gBAAgB;AAE/B,SAAS,cAAc;AAKhB,MAAM,kBAAmD,SAAS,IAAI,EAAK;AAAA;AAAA;AAAA;AAAA,EAIhF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI;AAAA;AAAA;AAAA;AAAA,EAKJ,IAAI;AAAA;AAAA;AAAA;AAAA,EAKJ,UAAU;AAAA;AAAA;AAAA;AAAA,EAKV,UAAU;AAAA;AAAA;AAAA;AAAA,EAKV,QAAQ,OAAyB;AAC/B,QAAI,MAAM,SAAS,SAAS;AAC1B,WAAK,UAAU,KAAK;AACpB,WAAK,UAAU,KAAK;AACpB;AAAA,IACF;AAEA,SAAK,IAAI,KAAK,UAAU,MAAM,IAAI,MAAM,OAAO;AAC/C,SAAK,IAAI,KAAK,UAAU,MAAM,IAAI,MAAM,OAAO;AAE/C,SAAK,IAAI,MAAM,YAAY,OAAO,EAAE,YAAY,KAAK,GAAG,YAAY,KAAK,EAAE,CAAC;AAAA,EAC9E;AACF;",
+  "sourcesContent": ["import { Base, withDrag } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { domScheduler, transform, damp, clamp, getOffsetSizes } from '@studiometa/js-toolkit/utils';\n\nexport interface DraggableProps extends BaseProps {\n  $refs: {\n    target: HTMLElement;\n  };\n  $options: {\n    x: boolean;\n    y: boolean;\n    fitBounds: boolean;\n    sensitivity: number;\n    dropSensitivity: number;\n  };\n}\n\n/**\n * Draggable class.\n */\nexport class Draggable<T extends BaseProps = BaseProps> extends withDrag(Base, {\n  // @ts-expect-error draggable is instance of Draggable.\n  target: (draggable) => draggable.target,\n})<T & DraggableProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'DraggableElement',\n    refs: ['target'],\n    emits: ['drag-start', 'drag-drag', 'drag-drop', 'drag-inertia', 'drag-stop', 'drag-fit'],\n    options: {\n      x: {\n        type: Boolean,\n        default: true,\n      },\n      y: {\n        type: Boolean,\n        default: true,\n      },\n      fitBounds: Boolean,\n      sensitivity: { type: Number, default: 0.5 },\n      dropSensitivity: { type: Number, default: 0.1 },\n    },\n  };\n\n  /**\n   * Props for the target position.\n   */\n  props = {\n    x: 0,\n    y: 0,\n    originX: 0,\n    originY: 0,\n    dampedX: 0,\n    dampedY: 0,\n  };\n\n  /**\n   * Smooth factor.\n   */\n  dampFactor = 0.5;\n\n  /**\n   * The draggable 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.\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   * Drag service hook.\n   */\n  dragged(props: DragServiceProps) {\n    this.$emit(`drag-${props.mode}`, this.props);\n\n    if (props.mode === props.MODES.START) {\n      this.props.originX = this.props.x;\n      this.props.originY = this.props.y;\n      this.dampFactor = this.$options.sensitivity;\n      this.render();\n    } else if (\n      props.mode === props.MODES.DRAG ||\n      (props.mode === props.MODES.INERTIA && !this.$options.fitBounds)\n    ) {\n      this.props.x = this.props.originX + props.x - props.origin.x;\n      this.props.y = this.props.originY + props.y - props.origin.y;\n      this.render();\n    } else if (props.mode === props.MODES.DROP && this.$options.fitBounds) {\n      const { bounds } = this;\n      this.props.x = clamp(\n        this.props.originX + props.final.x - props.origin.x,\n        bounds.xMin,\n        bounds.xMax,\n      );\n      this.props.y = clamp(\n        this.props.originY + props.final.y - props.origin.y,\n        bounds.yMin,\n        bounds.yMax,\n      );\n      this.dampFactor = this.$options.dropSensitivity;\n      this.$services.enable('ticked');\n    }\n  }\n\n  ticked() {\n    this.$emit(`drag-inertia`, this.props);\n    this.render();\n    if (this.props.dampedX === this.props.x && this.props.dampedY === this.props.y) {\n      this.$services.disable('ticked');\n      this.$emit('drag-fit', this.props);\n    }\n  }\n\n  render() {\n    this.props.dampedX = damp(this.props.x, this.props.dampedX, this.dampFactor);\n    this.props.dampedY = damp(this.props.y, this.props.dampedY, this.dampFactor);\n\n    domScheduler.read(() => {\n      const { x, y } = this.$options;\n      domScheduler.write(() => {\n        transform(this.target, {\n          x: x ? this.props.dampedX : 0,\n          y: y ? this.props.dampedY : 0,\n        });\n      });\n    });\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/Figure/Figure.d.ts

@@ -5,6 +5,7 @@ export interface FigureProps extends AbstractFigureProps {
 }
 /**
  * Figure class.
+ * @see https://ui.studiometa.dev/-/components/Figure/
  */
 export declare class Figure<T extends BaseProps = BaseProps> extends AbstractFigure<T> {
     /**

package/Figure/Figure.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Figure/Figure.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { AbstractFigure } from './AbstractFigure.js';\nimport type { AbstractFigureProps } from './AbstractFigure.js';\n\nexport interface FigureProps extends AbstractFigureProps {}\n\n/**\n * Figure class.\n */\nexport class Figure<T extends BaseProps = BaseProps> extends AbstractFigure<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractFigure.config,\n    name: 'Figure',\n  };\n\n  /**\n   * Terminate the component on load.\n   */\n  onLoad() {\n    this.$terminate();\n  }\n}\n"],
-  "mappings": "AACA,SAAS,sBAAsB;AAQxB,MAAM,eAAgD,eAAkB;AAAA;AAAA;AAAA;AAAA,EAI7E,OAAO,SAAqB;AAAA,IAC1B,GAAG,eAAe;AAAA,IAClB,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,SAAK,WAAW;AAAA,EAClB;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { AbstractFigure } from './AbstractFigure.js';\nimport type { AbstractFigureProps } from './AbstractFigure.js';\n\nexport interface FigureProps extends AbstractFigureProps {}\n\n/**\n * Figure class.\n * @see https://ui.studiometa.dev/-/components/Figure/\n */\nexport class Figure<T extends BaseProps = BaseProps> extends AbstractFigure<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractFigure.config,\n    name: 'Figure',\n  };\n\n  /**\n   * Terminate the component on load.\n   */\n  onLoad() {\n    this.$terminate();\n  }\n}\n"],
+  "mappings": "AACA,SAAS,sBAAsB;AASxB,MAAM,eAAgD,eAAkB;AAAA;AAAA;AAAA;AAAA,EAI7E,OAAO,SAAqB;AAAA,IAC1B,GAAG,eAAe;AAAA,IAClB,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,SAAK,WAAW;AAAA,EAClB;AACF;",
   "names": []
 }

package/Frame/AbstractFrameTrigger.d.ts

@@ -0,0 +1,43 @@
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import type { FrameRequestInit } from './types.js';
+import { FrameTriggerLoader } from './FrameTriggerLoader.js';
+export interface AbstractFrameTriggerProps extends BaseProps {
+    $el: HTMLFormElement | HTMLAnchorElement;
+    $options: {
+        requestInit: RequestInit;
+        headers: Record<string, string>;
+    };
+    $children: {
+        FrameTriggerLoader: FrameTriggerLoader[];
+    };
+}
+/**
+ * AbstractFrameTrigger class.
+ */
+export declare class AbstractFrameTrigger<T extends BaseProps = BaseProps> extends Base<T & AbstractFrameTriggerProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    /**
+     * The URL to use for the request.
+     */
+    get url(): URL;
+    /**
+     * Option for the fetch request.
+     */
+    get requestInit(): FrameRequestInit;
+    /**
+     * Trigger FrameLoaders enter.
+     */
+    onFrameFetchBefore(): void;
+    /**
+     * Trigger FrameLoaders leave.
+     */
+    onFrameFetchAfter(): void;
+    /**
+     * Trigger request.
+     */
+    trigger(): Promise<void>;
+}