@studiometa/ui 1.0.0-beta.1 → 1.0.0-rc.1

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/CircularMarquee/CircularMarquee.twig

@@ -3,14 +3,15 @@
  * @file
  * Circular Marquee
  *
- * @param {String} id - *required
- * @param {Number} outer_radius
- * @param {Number} radius
- * @param {Number} cx
- * @param {Number} cy
- * @param {String} content
- * @param {Object} content_attr
- * @param {Number} sensitivity
+ * @param {string} id - *required
+ * @param {number} outer_radius
+ * @param {number} radius
+ * @param {number} cx
+ * @param {number} cy
+ * @param {string} content
+ * @param {array} content_attr
+ * @param {number} sensitivity
+ * @param array $attr
  */
 #}
 
@@ -30,26 +31,37 @@
 {% set third = 'a ' ~ radius ~ ',' ~ radius ~ ' 0 1,1 -' ~ diameter ~ ',0' %}
 {% set d = [first, second, third]|join(' ') %}
 
-{% set default_content_attributes = { 'xlink:href': '#' ~ id } %}
+{% set attributes =
+  merge_html_attributes(
+    attr ?? null,
+    {
+      data_component: 'CircularMarquee',
+      data_option_sensitivity: sensitivity ?? null
+    },
+    {}
+  )
+%}
+
 {% set content_attributes =
-  merge_html_attributes(default_content_attributes, content_attr|default({}))
+  merge_html_attributes(
+    content_attr ?? null,
+    {},
+    {
+      'xlink:href': '#' ~ id
+    }
+  )
 %}
 
-<div data-component="CircularMarquee"
-  {{ html_attributes({ data_option_sensitivity: sensitivity ?? null }) }}>
+<div {{ html_attributes(attributes) }}>
   <svg aria-hidden="true"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 {{ outer_diameter }} {{ outer_diameter }}"
     width="{{ outer_diameter }}"
     height="{{ outer_diameter }}"
     class="z-default relative left-1/2 -translate-x-1/2">
-    <defs>
-      <path d="{{ d }}" id="{{ id }}" />
-    </defs>
+    <defs><path d="{{ d }}" id="{{ id }}" /></defs>
     <text dy="0" textLength="{{ perimeter }}">
-      <textPath {{ html_attributes(content_attributes) }}>
-        {{ content|raw }}
-      </textPath>
+      <textPath {{ html_attributes(content_attributes) }}>{{ content|raw }}</textPath>
     </text>
   </svg>
 </div>

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.js

@@ -1,5 +1,5 @@
 import { Base, withDrag } from "@studiometa/js-toolkit";
-import { matrix } from "@studiometa/js-toolkit/utils";
+import { domScheduler, transform } from "@studiometa/js-toolkit/utils";
 class Draggable extends withDrag(Base) {
   /**
    * Config.
@@ -34,7 +34,12 @@ class Draggable extends withDrag(Base) {
     }
     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 });
+    domScheduler.write(() => {
+      transform(this.$el, {
+        x: this.x,
+        y: this.y
+      });
+    });
   }
 }
 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 } 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    domScheduler.write(() => {\n      transform(this.$el, {\n        x: this.x,\n        y: this.y,\n      });\n    });\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,MAAM,gBAAgB;AAE/B,SAAS,cAAc,iBAAiB;AAKjC,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,iBAAa,MAAM,MAAM;AACvB,gBAAU,KAAK,KAAK;AAAA,QAClB,GAAG,KAAK;AAAA,QACR,GAAG,KAAK;AAAA,MACV,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;",
   "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>;
+}

package/Frame/AbstractFrameTrigger.js

@@ -0,0 +1,72 @@
+import { Base, getClosestParent } from "@studiometa/js-toolkit";
+import { EVENTS } from "./utils.js";
+import { FrameTriggerLoader } from "./FrameTriggerLoader.js";
+class AbstractFrameTrigger extends Base {
+  /**
+   * Config.
+   */
+  static config = {
+    name: "AbstractFrameTrigger",
+    emits: Object.values(EVENTS),
+    options: {
+      requestInit: Object,
+      headers: Object
+    },
+    components: {
+      FrameTriggerLoader
+    }
+  };
+  /**
+   * The URL to use for the request.
+   */
+  get url() {
+    return new URL(this.$el instanceof HTMLFormElement ? this.$el.action : this.$el.href);
+  }
+  /**
+   * Option for the fetch request.
+   */
+  get requestInit() {
+    const { requestInit, headers } = this.$options;
+    return {
+      ...requestInit,
+      // @ts-expect-error this will be right.
+      trigger: this,
+      headers: {
+        ...requestInit.headers,
+        ...headers
+      }
+    };
+  }
+  /**
+   * Trigger FrameLoaders enter.
+   */
+  onFrameFetchBefore() {
+    for (const loader of this.$children.FrameTriggerLoader) {
+      if (getClosestParent(loader, this.constructor) === this) {
+        loader.enter();
+      }
+    }
+  }
+  /**
+   * Trigger FrameLoaders leave.
+   */
+  onFrameFetchAfter() {
+    for (const loader of this.$children.FrameTriggerLoader) {
+      if (getClosestParent(loader, this.constructor) === this) {
+        loader.leave();
+      }
+    }
+  }
+  /**
+   * Trigger request.
+   */
+  async trigger() {
+    const { url, requestInit } = this;
+    this.$log("trigger", url, requestInit);
+    this.$emit(EVENTS.TRIGGER, url, requestInit);
+  }
+}
+export {
+  AbstractFrameTrigger
+};
+//# sourceMappingURL=AbstractFrameTrigger.js.map

package/Frame/AbstractFrameTrigger.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Frame/AbstractFrameTrigger.ts"],
+  "sourcesContent": ["import { Base, getClosestParent } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport type { FrameRequestInit } from './types.js';\nimport { EVENTS } from './utils.js';\nimport { FrameTriggerLoader } from './FrameTriggerLoader.js';\n\nexport interface AbstractFrameTriggerProps extends BaseProps {\n  $el: HTMLFormElement | HTMLAnchorElement;\n  $options: {\n    requestInit: RequestInit;\n    headers: Record<string, string>;\n  };\n  $children: {\n    FrameTriggerLoader: FrameTriggerLoader[];\n  };\n}\n\n/**\n * AbstractFrameTrigger class.\n */\nexport class AbstractFrameTrigger<T extends BaseProps = BaseProps> extends Base<\n  T & AbstractFrameTriggerProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AbstractFrameTrigger',\n    emits: Object.values(EVENTS),\n    options: {\n      requestInit: Object,\n      headers: Object,\n    },\n    components: {\n      FrameTriggerLoader,\n    },\n  };\n\n  /**\n   * The URL to use for the request.\n   */\n  get url(): URL {\n    return new URL(this.$el instanceof HTMLFormElement ? this.$el.action : this.$el.href);\n  }\n\n  /**\n   * Option for the fetch request.\n   */\n  get requestInit(): FrameRequestInit {\n    const { requestInit, headers } = this.$options;\n\n    return {\n      ...requestInit,\n      // @ts-expect-error this will be right.\n      trigger: this,\n      headers: {\n        ...requestInit.headers,\n        ...headers,\n      },\n    };\n  }\n\n  /**\n   * Trigger FrameLoaders enter.\n   */\n  onFrameFetchBefore() {\n    for (const loader of this.$children.FrameTriggerLoader) {\n      if (getClosestParent(loader, this.constructor) === this) {\n        loader.enter();\n      }\n    }\n  }\n\n  /**\n   * Trigger FrameLoaders leave.\n   */\n  onFrameFetchAfter() {\n    for (const loader of this.$children.FrameTriggerLoader) {\n      if (getClosestParent(loader, this.constructor) === this) {\n        loader.leave();\n      }\n    }\n  }\n\n  /**\n   * Trigger request.\n   */\n  async trigger() {\n    const { url, requestInit } = this;\n    this.$log('trigger', url, requestInit);\n    this.$emit(EVENTS.TRIGGER, url, requestInit);\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,MAAM,wBAAwB;AAGvC,SAAS,cAAc;AACvB,SAAS,0BAA0B;AAgB5B,MAAM,6BAA8D,KAEzE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO,OAAO,OAAO,MAAM;AAAA,IAC3B,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,MAAW;AACb,WAAO,IAAI,IAAI,KAAK,eAAe,kBAAkB,KAAK,IAAI,SAAS,KAAK,IAAI,IAAI;AAAA,EACtF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,cAAgC;AAClC,UAAM,EAAE,aAAa,QAAQ,IAAI,KAAK;AAEtC,WAAO;AAAA,MACL,GAAG;AAAA;AAAA,MAEH,SAAS;AAAA,MACT,SAAS;AAAA,QACP,GAAG,YAAY;AAAA,QACf,GAAG;AAAA,MACL;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,qBAAqB;AACnB,eAAW,UAAU,KAAK,UAAU,oBAAoB;AACtD,UAAI,iBAAiB,QAAQ,KAAK,WAAW,MAAM,MAAM;AACvD,eAAO,MAAM;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,oBAAoB;AAClB,eAAW,UAAU,KAAK,UAAU,oBAAoB;AACtD,UAAI,iBAAiB,QAAQ,KAAK,WAAW,MAAM,MAAM;AACvD,eAAO,MAAM;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,UAAU;AACd,UAAM,EAAE,KAAK,YAAY,IAAI;AAC7B,SAAK,KAAK,WAAW,KAAK,WAAW;AACrC,SAAK,MAAM,OAAO,SAAS,KAAK,WAAW;AAAA,EAC7C;AACF;",
+  "names": []
+}