@studiometa/ui 1.0.0-alpha.7 → 1.0.0-alpha.9

package/atoms/Action/Action.d.ts

@@ -1,5 +1,6 @@
 import { Base } from '@studiometa/js-toolkit';
 import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { ActionEvent } from './ActionEvent.js';
 export interface ActionProps extends BaseProps {
     $options: {
         on: string;
@@ -13,14 +14,11 @@ export interface ActionProps extends BaseProps {
  */
 export declare class Action<T extends BaseProps = BaseProps> extends Base<ActionProps & T> {
     static config: BaseConfig;
-    get event(): string;
-    get modifiers(): string[];
-    get effect(): Function;
-    get targets(): Array<Record<string, Base>>;
     /**
-     * Run method on targeted components
+     * @private
      */
-    handleEvent(event: Event): void;
+    __actionEvents: Set<ActionEvent<Action>>;
+    get actionEvents(): Set<ActionEvent<Action<BaseProps>>>;
     /**
      * Mounted
      */

package/atoms/Action/Action.js

@@ -1,6 +1,5 @@
-import { Base, getInstances } from "@studiometa/js-toolkit";
-const TARGET_REGEX = /([a-zA-Z]+)(\((.*)\))?/;
-const effectCache = /* @__PURE__ */ new Map();
+import { Base } from "@studiometa/js-toolkit";
+import { ActionEvent } from "./ActionEvent.js";
 class Action extends Base {
   static config = {
     name: "Action",
@@ -10,84 +9,47 @@ class Action extends Base {
         default: "click"
       },
       target: String,
-      selector: String,
       effect: String
     }
   };
-  get event() {
-    const [event] = this.$options.on.split(".", 1);
-    return event;
-  }
-  get modifiers() {
-    return this.$options.on.split(".").slice(1);
-  }
-  get effect() {
-    const { effect } = this.$options;
-    if (!effectCache.has(effect)) {
-      effectCache.set(effect, new Function("ctx", "event", "target", "action", `return ${effect}`));
-    }
-    return effectCache.get(effect);
-  }
-  get targets() {
-    const { target } = this.$options;
-    if (!target) {
-      return [{ [this.__config.name]: this }];
-    }
-    const parts = target.split(" ").map((part) => {
-      const [, name, , selector] = part.match(TARGET_REGEX) ?? [];
-      return [name, selector];
-    });
-    const targets = [];
-    for (const instance of getInstances()) {
-      const { name } = instance.__config;
-      for (const part of parts) {
-        const shouldPush = part[0] === name && (!part[1] || part[1] && instance.$el.matches(part[1]));
-        if (shouldPush) {
-          targets.push({ [instance.$options.name]: instance });
-        }
-      }
-    }
-    return targets;
-  }
   /**
-   * Run method on targeted components
+   * @private
    */
-  handleEvent(event) {
-    const { targets, effect, modifiers } = this;
-    if (modifiers.includes("prevent")) {
-      event.preventDefault();
-    }
-    if (modifiers.includes("stop")) {
-      event.stopPropagation();
+  __actionEvents;
+  get actionEvents() {
+    if (this.__actionEvents) {
+      return this.__actionEvents;
     }
-    for (const target of targets) {
-      try {
-        const [currentTarget] = Object.values(target).flat();
-        const value = effect(target, event, currentTarget, this);
-        if (typeof value === "function") {
-          value(target, event, currentTarget, this);
-        }
-      } catch (err) {
-        this.$warn(err);
+    const { on } = this.$options;
+    this.__actionEvents = /* @__PURE__ */ new Set();
+    for (const attribute of this.$el.attributes) {
+      if (attribute.name.includes("on:")) {
+        const name = attribute.name.split("on:").pop();
+        this.__actionEvents.add(new ActionEvent(this, name, attribute.value));
       }
     }
+    if (on) {
+      const { target, effect } = this.$options;
+      const effectDefinition = target ? `${target}${ActionEvent.effectSeparator}${effect}` : effect;
+      this.__actionEvents.add(new ActionEvent(this, on, effectDefinition));
+    }
+    return this.__actionEvents;
   }
   /**
    * Mounted
    */
   mounted() {
-    const { event, modifiers } = this;
-    this.$el.addEventListener(event, this, {
-      capture: modifiers.includes("capture"),
-      once: modifiers.includes("once"),
-      passive: modifiers.includes("passive")
-    });
+    for (const actionEvent of this.actionEvents) {
+      actionEvent.attachEvent();
+    }
   }
   /**
    * Destroyed
    */
   destroyed() {
-    this.$el.removeEventListener(this.$options.on, this);
+    for (const actionEvent of this.actionEvents) {
+      actionEvent.detachEvent();
+    }
   }
 }
 export {

package/atoms/Action/Action.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/Action/Action.ts"],
-  "sourcesContent": ["import { Base, getInstances } from '@studiometa/js-toolkit';\nimport { isFunction } from '@studiometa/js-toolkit/utils';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface ActionProps extends BaseProps {\n  $options: {\n    on: string;\n    target: string;\n    selector: string;\n    effect: string;\n  };\n}\n\n/**\n * Extract component name and an optional additional selector from a string.\n * @type {RegExp}\n */\nconst TARGET_REGEX = /([a-zA-Z]+)(\\((.*)\\))?/;\n\nconst effectCache = new Map<string, Function>();\n\n/**\n * Action class.\n */\nexport class Action<T extends BaseProps = BaseProps> extends Base<ActionProps & T> {\n  static config: BaseConfig = {\n    name: 'Action',\n    options: {\n      on: {\n        type: String,\n        default: 'click',\n      },\n      target: String,\n      selector: String,\n      effect: String,\n    },\n  };\n\n  get event() {\n    const [event] = this.$options.on.split('.', 1);\n    return event;\n  }\n\n  get modifiers() {\n    return this.$options.on.split('.').slice(1);\n  }\n\n  get effect() {\n    const { effect } = this.$options;\n    if (!effectCache.has(effect)) {\n      effectCache.set(effect, new Function('ctx', 'event', 'target', 'action', `return ${effect}`));\n    }\n    return effectCache.get(effect);\n  }\n\n  get targets(): Array<Record<string, Base>> {\n    const { target } = this.$options;\n\n    if (!target) {\n      return [{ [this.__config.name]: this }];\n    }\n\n    const parts = target.split(' ').map((part) => {\n      const [, name, , selector] = part.match(TARGET_REGEX) ?? [];\n      return [name, selector];\n    });\n\n    const targets = [] as Array<Record<string, Base>>;\n\n    for (const instance of getInstances()) {\n      const { name } = instance.__config;\n\n      for (const part of parts) {\n        const shouldPush =\n          part[0] === name && (!part[1] || (part[1] && instance.$el.matches(part[1])));\n        if (shouldPush) {\n          targets.push({ [instance.$options.name]: instance });\n        }\n      }\n    }\n\n    return targets;\n  }\n\n  /**\n   * Run method on targeted components\n   */\n  handleEvent(event: Event) {\n    const { targets, effect, modifiers } = this;\n\n    if (modifiers.includes('prevent')) {\n      event.preventDefault();\n    }\n\n    if (modifiers.includes('stop')) {\n      event.stopPropagation();\n    }\n\n    for (const target of targets) {\n      try {\n        const [currentTarget] = Object.values(target).flat();\n        const value = effect(target, event, currentTarget, this);\n        if (typeof value === 'function') {\n          value(target, event, currentTarget, this);\n        }\n      } catch (err) {\n        this.$warn(err);\n      }\n    }\n  }\n\n  /**\n   * Mounted\n   */\n  mounted() {\n    const { event, modifiers } = this;\n\n    this.$el.addEventListener(event, this, {\n      capture: modifiers.includes('capture'),\n      once: modifiers.includes('once'),\n      passive: modifiers.includes('passive'),\n    });\n  }\n\n  /**\n   * Destroyed\n   */\n  destroyed() {\n    this.$el.removeEventListener(this.$options.on, this);\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { ActionEvent } from './ActionEvent.js';\n\nexport interface ActionProps extends BaseProps {\n  $options: {\n    on: string;\n    target: string;\n    selector: string;\n    effect: string;\n  };\n}\n\n/**\n * Action class.\n */\nexport class Action<T extends BaseProps = BaseProps> extends Base<ActionProps & T> {\n  static config: BaseConfig = {\n    name: 'Action',\n    options: {\n      on: {\n        type: String,\n        default: 'click',\n      },\n      target: String,\n      effect: String,\n    },\n  };\n\n  /**\n   * @private\n   */\n  __actionEvents: Set<ActionEvent<Action>>;\n\n  get actionEvents() {\n    if (this.__actionEvents) {\n      return this.__actionEvents;\n    }\n\n    const { on } = this.$options;\n    this.__actionEvents = new Set();\n\n    // @ts-ignore\n    for (const attribute of this.$el.attributes) {\n      if (attribute.name.includes('on:')) {\n        const name = attribute.name.split('on:').pop();\n        this.__actionEvents.add(new ActionEvent(this, name, attribute.value));\n      }\n    }\n\n    if (on) {\n      const { target, effect } = this.$options;\n      const effectDefinition = target ? `${target}${ActionEvent.effectSeparator}${effect}` : effect;\n      this.__actionEvents.add(new ActionEvent(this, on, effectDefinition));\n    }\n\n    return this.__actionEvents;\n  }\n\n  /**\n   * Mounted\n   */\n  mounted() {\n    for (const actionEvent of this.actionEvents) {\n      actionEvent.attachEvent();\n    }\n  }\n\n  /**\n   * Destroyed\n   */\n  destroyed() {\n    for (const actionEvent of this.actionEvents) {\n      actionEvent.detachEvent();\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,mBAAmB;AAcrB,MAAM,eAAgD,KAAsB;AAAA,EACjF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA;AAAA,EAEA,IAAI,eAAe;AACjB,QAAI,KAAK,gBAAgB;AACvB,aAAO,KAAK;AAAA,IACd;AAEA,UAAM,EAAE,GAAG,IAAI,KAAK;AACpB,SAAK,iBAAiB,oBAAI,IAAI;AAG9B,eAAW,aAAa,KAAK,IAAI,YAAY;AAC3C,UAAI,UAAU,KAAK,SAAS,KAAK,GAAG;AAClC,cAAM,OAAO,UAAU,KAAK,MAAM,KAAK,EAAE,IAAI;AAC7C,aAAK,eAAe,IAAI,IAAI,YAAY,MAAM,MAAM,UAAU,KAAK,CAAC;AAAA,MACtE;AAAA,IACF;AAEA,QAAI,IAAI;AACN,YAAM,EAAE,QAAQ,OAAO,IAAI,KAAK;AAChC,YAAM,mBAAmB,SAAS,GAAG,MAAM,GAAG,YAAY,eAAe,GAAG,MAAM,KAAK;AACvF,WAAK,eAAe,IAAI,IAAI,YAAY,MAAM,IAAI,gBAAgB,CAAC;AAAA,IACrE;AAEA,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,eAAW,eAAe,KAAK,cAAc;AAC3C,kBAAY,YAAY;AAAA,IAC1B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,eAAW,eAAe,KAAK,cAAc;AAC3C,kBAAY,YAAY;AAAA,IAC1B;AAAA,EACF;AACF;",
   "names": []
 }

package/atoms/Action/ActionEvent.d.ts

@@ -0,0 +1,55 @@
+import type { Base } from '@studiometa/js-toolkit';
+export type Modifiers = 'prevent' | 'stop' | 'once' | 'passive' | 'capture';
+export declare class ActionEvent<T extends Base> {
+    static modifierSeparator: string;
+    static targetSeparator: string;
+    static effectSeparator: string;
+    /**
+     * The Action instance.
+     */
+    action: T;
+    /**
+     * The event to listen to.
+     */
+    event: string;
+    /**
+     * The modifiers to apply to the event.
+     */
+    modifiers: Modifiers[];
+    /**
+     * Target definition.
+     * Ex: `Target Target(.selector)`.
+     */
+    targetDefinition: string;
+    /**
+     * The content of the effect callback function.
+     */
+    effectDefinition: string;
+    /**
+     * Class constructor.
+     * @param {T}      action The parent Action instance.
+     * @param {string} eventDefinition  The event with its modifiers: `click.prevent.stop`
+     * @param {string} effectDefinition The target and effect definition: `Target(.selector)->target.$destroy()`
+     */
+    constructor(action: T, eventDefinition: string, effectDefinition: string);
+    /**
+     * Get the generated function for the defined effect.
+     */
+    get effect(): Function;
+    /**
+     * Get the targets object for the defined targets string.
+     */
+    get targets(): Record<string, Base<import("@studiometa/js-toolkit").BaseProps>>[];
+    /**
+     * Handle the defined event and trigger the effect for each defined target.
+     */
+    handleEvent(event: Event): void;
+    /**
+     * Bind the defined event to the given Action instance root element.
+     */
+    attachEvent(): void;
+    /**
+     * Unbind the event from the given Action instance root element.
+     */
+    detachEvent(): void;
+}

package/atoms/Action/ActionEvent.js

@@ -0,0 +1,130 @@
+import { getInstances } from "@studiometa/js-toolkit";
+import { isFunction } from "@studiometa/js-toolkit/utils";
+const TARGET_REGEX = /([a-zA-Z]+)(\((.*)\))?/;
+const effectCache = /* @__PURE__ */ new Map();
+class ActionEvent {
+  static modifierSeparator = ".";
+  static targetSeparator = " ";
+  static effectSeparator = "->";
+  /**
+   * The Action instance.
+   */
+  action;
+  /**
+   * The event to listen to.
+   */
+  event;
+  /**
+   * The modifiers to apply to the event.
+   */
+  modifiers;
+  /**
+   * Target definition.
+   * Ex: `Target Target(.selector)`.
+   */
+  targetDefinition;
+  /**
+   * The content of the effect callback function.
+   */
+  effectDefinition;
+  /**
+   * Class constructor.
+   * @param {T}      action The parent Action instance.
+   * @param {string} eventDefinition  The event with its modifiers: `click.prevent.stop`
+   * @param {string} effectDefinition The target and effect definition: `Target(.selector)->target.$destroy()`
+   */
+  constructor(action, eventDefinition, effectDefinition) {
+    this.action = action;
+    const [event, ...modifiers] = eventDefinition.split(ActionEvent.modifierSeparator);
+    this.event = event;
+    this.modifiers = modifiers;
+    let effect = effectDefinition;
+    let targetDefinition = "";
+    if (effect.includes(ActionEvent.effectSeparator)) {
+      [targetDefinition, effect] = effect.split(ActionEvent.effectSeparator);
+    }
+    this.targetDefinition = targetDefinition.trim();
+    this.effectDefinition = effect.trim();
+  }
+  /**
+   * Get the generated function for the defined effect.
+   */
+  get effect() {
+    const { effectDefinition } = this;
+    if (!effectCache.has(effectDefinition)) {
+      effectCache.set(
+        effectDefinition,
+        new Function("ctx", "event", "target", "action", "self", `return ${effectDefinition}`)
+      );
+    }
+    return effectCache.get(effectDefinition);
+  }
+  /**
+   * Get the targets object for the defined targets string.
+   */
+  get targets() {
+    const { targetDefinition } = this;
+    if (!targetDefinition) {
+      return [{ Action: this.action }];
+    }
+    const parts = targetDefinition.split(ActionEvent.targetSeparator).map((part) => {
+      const [, name, , selector] = part.match(TARGET_REGEX) ?? [];
+      return [name, selector];
+    });
+    const targets = [];
+    for (const instance of getInstances()) {
+      const { name } = instance.__config;
+      for (const part of parts) {
+        const shouldPush = part[0] === name && (!part[1] || part[1] && instance.$el.matches(part[1]));
+        if (shouldPush) {
+          targets.push({ [instance.__config.name]: instance });
+        }
+      }
+    }
+    return targets;
+  }
+  /**
+   * Handle the defined event and trigger the effect for each defined target.
+   */
+  handleEvent(event) {
+    const { targets, effect, modifiers } = this;
+    if (modifiers.includes("prevent")) {
+      event.preventDefault();
+    }
+    if (modifiers.includes("stop")) {
+      event.stopPropagation();
+    }
+    for (const target of targets) {
+      try {
+        const [currentTarget] = Object.values(target).flat();
+        const value = effect(target, event, currentTarget, this.action, this.action);
+        if (isFunction(value)) {
+          value(target, event, currentTarget, this.action, this.action);
+        }
+      } catch (err) {
+        this.action.$warn(err);
+      }
+    }
+  }
+  /**
+   * Bind the defined event to the given Action instance root element.
+   */
+  attachEvent() {
+    const { event, modifiers } = this;
+    this.action.$el.addEventListener(event, this, {
+      capture: modifiers.includes("capture"),
+      once: modifiers.includes("once"),
+      passive: modifiers.includes("passive")
+    });
+  }
+  /**
+   * Unbind the event from the given Action instance root element.
+   */
+  detachEvent() {
+    this.action.$el.removeEventListener(this.event, this);
+  }
+}
+export {
+  ActionEvent
+};
+//# sourceMappingURL=ActionEvent.js.map

package/atoms/Action/ActionEvent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/Action/ActionEvent.ts"],
+  "sourcesContent": ["import { getInstances } from '@studiometa/js-toolkit';\nimport type { Base } from '@studiometa/js-toolkit';\nimport { isFunction } from '@studiometa/js-toolkit/utils';\n\n/**\n * Extract component name and an optional additional selector from a string.\n * @type {RegExp}\n */\nconst TARGET_REGEX = /([a-zA-Z]+)(\\((.*)\\))?/;\n\nconst effectCache = new Map<string, Function>();\n\nexport type Modifiers = 'prevent' | 'stop' | 'once' | 'passive' | 'capture';\n\nexport class ActionEvent<T extends Base> {\n  static modifierSeparator = '.';\n  static targetSeparator = ' ';\n  static effectSeparator = '->';\n\n  /**\n   * The Action instance.\n   */\n  action: T;\n\n  /**\n   * The event to listen to.\n   */\n  event: string;\n\n  /**\n   * The modifiers to apply to the event.\n   */\n  modifiers: Modifiers[];\n\n  /**\n   * Target definition.\n   * Ex: `Target Target(.selector)`.\n   */\n  targetDefinition: string;\n\n  /**\n   * The content of the effect callback function.\n   */\n  effectDefinition: string;\n\n  /**\n   * Class constructor.\n   * @param {T}      action The parent Action instance.\n   * @param {string} eventDefinition  The event with its modifiers: `click.prevent.stop`\n   * @param {string} effectDefinition The target and effect definition: `Target(.selector)->target.$destroy()`\n   */\n  constructor(action: T, eventDefinition: string, effectDefinition: string) {\n    this.action = action;\n    const [event, ...modifiers] = eventDefinition.split(ActionEvent.modifierSeparator);\n    this.event = event;\n    this.modifiers = modifiers as Modifiers[];\n\n    let effect = effectDefinition;\n    let targetDefinition = '';\n\n    if (effect.includes(ActionEvent.effectSeparator)) {\n      [targetDefinition, effect] = effect.split(ActionEvent.effectSeparator);\n    }\n\n    this.targetDefinition = targetDefinition.trim();\n    this.effectDefinition = effect.trim();\n  }\n\n  /**\n   * Get the generated function for the defined effect.\n   */\n  get effect() {\n    const { effectDefinition } = this;\n\n    if (!effectCache.has(effectDefinition)) {\n      effectCache.set(\n        effectDefinition,\n        new Function('ctx', 'event', 'target', 'action', 'self', `return ${effectDefinition}`),\n      );\n    }\n\n    return effectCache.get(effectDefinition) as Function;\n  }\n\n  /**\n   * Get the targets object for the defined targets string.\n   */\n  get targets() {\n    const { targetDefinition } = this;\n\n    if (!targetDefinition) {\n      return [{ Action: this.action }];\n    }\n\n    // Extract component's names and selectors.\n    const parts = targetDefinition.split(ActionEvent.targetSeparator).map((part) => {\n      const [, name, , selector] = part.match(TARGET_REGEX) ?? [];\n      return [name, selector];\n    });\n\n    const targets = [] as Array<Record<string, Base>>;\n\n    for (const instance of getInstances()) {\n      const { name } = instance.__config;\n\n      for (const part of parts) {\n        const shouldPush =\n          part[0] === name && (!part[1] || (part[1] && instance.$el.matches(part[1])));\n        if (shouldPush) {\n          targets.push({ [instance.__config.name]: instance });\n        }\n      }\n    }\n\n    return targets;\n  }\n\n  /**\n   * Handle the defined event and trigger the effect for each defined target.\n   */\n  handleEvent(event: Event) {\n    const { targets, effect, modifiers } = this;\n\n    if (modifiers.includes('prevent')) {\n      event.preventDefault();\n    }\n\n    if (modifiers.includes('stop')) {\n      event.stopPropagation();\n    }\n\n    for (const target of targets) {\n      try {\n        const [currentTarget] = Object.values(target).flat();\n        const value = effect(target, event, currentTarget, this.action, this.action);\n        if (isFunction(value)) {\n          value(target, event, currentTarget, this.action, this.action);\n        }\n      } catch (err) {\n        this.action.$warn(err);\n      }\n    }\n  }\n\n  /**\n   * Bind the defined event to the given Action instance root element.\n   */\n  attachEvent() {\n    const { event, modifiers } = this;\n    this.action.$el.addEventListener(event, this, {\n      capture: modifiers.includes('capture'),\n      once: modifiers.includes('once'),\n      passive: modifiers.includes('passive'),\n    });\n  }\n\n  /**\n   * Unbind the event from the given Action instance root element.\n   */\n  detachEvent() {\n    this.action.$el.removeEventListener(this.event, this);\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/atoms/Data/DataBind.d.ts

@@ -3,7 +3,7 @@ import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
 export interface DataBindProps extends BaseProps {
     $options: {
         prop: string;
-        name: string;
+        group: string;
     };
 }
 export declare class DataBind<T extends BaseProps = BaseProps> extends Base<DataBindProps & T> {

package/atoms/Data/DataBind.js

@@ -7,12 +7,12 @@ class DataBind extends Base {
     name: "DataBind",
     options: {
       prop: String,
-      name: String
+      group: String
     }
   };
   get relatedInstances() {
-    const { name } = this.$options;
-    const instances = groups.get(name) ?? groups.set(name, /* @__PURE__ */ new Set()).get(name);
+    const { group } = this.$options;
+    const instances = groups.get(group) ?? groups.set(group, /* @__PURE__ */ new Set()).get(group);
     for (const instance of instances) {
       if (!instance.$el.isConnected) {
         instances.delete(instance);
@@ -21,7 +21,7 @@ class DataBind extends Base {
     return instances;
   }
   get multiple() {
-    return this.$options.name.endsWith("[]");
+    return this.$options.group.endsWith("[]");
   }
   get target() {
     return this.$el;

package/atoms/Data/DataBind.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/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    name: 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      name: String,\n    },\n  };\n\n  get relatedInstances() {\n    const { name } = this.$options;\n\n    const instances = groups.get(name) ?? groups.set(name, new Set()).get(name);\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.name.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) {\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/atoms/Data/DataComputed.js

@@ -9,8 +9,8 @@ class DataComputed extends DataBind {
     }
   };
   get compute() {
-    const { name, compute } = this.$options;
-    return getCallback(name, `return ${compute};`);
+    const { group, compute } = this.$options;
+    return getCallback(group, `return ${compute};`);
   }
   set(value) {
     let newValue = value;

package/atoms/Data/DataComputed.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/Data/DataComputed.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDefined } from '@studiometa/js-toolkit/utils';\nimport { DataBind } from './DataBind.js';\nimport type { DataBindProps } from './DataBind.js';\nimport { getCallback } from './utils.js';\n\nexport interface DataComputedProps extends DataBindProps {\n  $options: {\n    compute: string;\n  } & DataBindProps['$options'];\n}\n\nconst callbacks = new Map<string, Function>();\n\nexport class DataComputed<T extends BaseProps = BaseProps> extends DataBind<DataComputedProps & T> {\n  static config: BaseConfig = {\n    name: 'DataComputed',\n    options: {\n      compute: String,\n    },\n  };\n\n  get compute() {\n    const { name, compute } = this.$options;\n    return getCallback(name, `return ${compute};`);\n  }\n\n  set(value: boolean | string | string[]) {\n    let newValue = value;\n\n    try {\n      newValue = this.compute(value, this.target);\n    } catch (error) {\n      // @todo better handling of errors?\n      console.error('Failed', error);\n    }\n\n    super.set(newValue, false);\n  }\n}\n"],
-  "mappings": "AAEA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAQ5B,MAAM,YAAY,oBAAI,IAAsB;AAErC,MAAM,qBAAsD,SAAgC;AAAA,EACjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,IAAI,UAAU;AACZ,UAAM,EAAE,MAAM,QAAQ,IAAI,KAAK;AAC/B,WAAO,YAAY,MAAM,UAAU,OAAO,GAAG;AAAA,EAC/C;AAAA,EAEA,IAAI,OAAoC;AACtC,QAAI,WAAW;AAEf,QAAI;AACF,iBAAW,KAAK,QAAQ,OAAO,KAAK,MAAM;AAAA,IAC5C,SAAS,OAAO;AAEd,cAAQ,MAAM,UAAU,KAAK;AAAA,IAC/B;AAEA,UAAM,IAAI,UAAU,KAAK;AAAA,EAC3B;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDefined } from '@studiometa/js-toolkit/utils';\nimport { DataBind } from './DataBind.js';\nimport type { DataBindProps } from './DataBind.js';\nimport { getCallback } from './utils.js';\n\nexport interface DataComputedProps extends DataBindProps {\n  $options: {\n    compute: string;\n  } & DataBindProps['$options'];\n}\n\nconst callbacks = new Map<string, Function>();\n\nexport class DataComputed<T extends BaseProps = BaseProps> extends DataBind<DataComputedProps & T> {\n  static config: BaseConfig = {\n    name: 'DataComputed',\n    options: {\n      compute: String,\n    },\n  };\n\n  get compute() {\n    const { group, compute } = this.$options;\n    return getCallback(group, `return ${compute};`);\n  }\n\n  set(value: boolean | string | string[]) {\n    let newValue = value;\n\n    try {\n      newValue = this.compute(value, this.target);\n    } catch (error) {\n      // @todo better handling of errors?\n      console.error('Failed', error);\n    }\n\n    super.set(newValue, false);\n  }\n}\n"],
+  "mappings": "AAEA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAQ5B,MAAM,YAAY,oBAAI,IAAsB;AAErC,MAAM,qBAAsD,SAAgC;AAAA,EACjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EAEA,IAAI,UAAU;AACZ,UAAM,EAAE,OAAO,QAAQ,IAAI,KAAK;AAChC,WAAO,YAAY,OAAO,UAAU,OAAO,GAAG;AAAA,EAChD;AAAA,EAEA,IAAI,OAAoC;AACtC,QAAI,WAAW;AAEf,QAAI;AACF,iBAAW,KAAK,QAAQ,OAAO,KAAK,MAAM;AAAA,IAC5C,SAAS,OAAO;AAEd,cAAQ,MAAM,UAAU,KAAK;AAAA,IAC/B;AAEA,UAAM,IAAI,UAAU,KAAK;AAAA,EAC3B;AACF;",
   "names": []
 }

package/atoms/Data/DataEffect.js

@@ -8,8 +8,8 @@ class DataEffect extends DataBind {
     }
   };
   get effect() {
-    const { name, effect } = this.$options;
-    return getCallback(name, effect);
+    const { group, effect } = this.$options;
+    return getCallback(group, effect);
   }
   set(value) {
     try {

package/atoms/Data/DataEffect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/Data/DataEffect.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDefined } from '@studiometa/js-toolkit/utils';\nimport { DataBind } from './DataBind.js';\nimport type { DataBindProps } from './DataBind.js';\nimport { getCallback } from './utils.js';\n\nexport interface DataEffectProps extends DataBindProps {\n  $options: {\n    effect: string;\n  } & DataBindProps['$options'];\n}\n\nexport class DataEffect<T extends BaseProps = BaseProps> extends DataBind<DataEffectProps & T> {\n  static config: BaseConfig = {\n    name: 'DataEffect',\n    options: {\n      effect: String,\n    },\n  };\n\n  get effect() {\n    const { name, effect } = this.$options;\n    return getCallback(name, effect);\n  }\n\n  set(value: boolean | string | string[]) {\n    try {\n      this.effect(value, this.target);\n    } catch (error) {\n      // @todo better handling of errors?\n      console.error('Failed', error);\n    }\n  }\n}\n"],
-  "mappings": "AAEA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAQrB,MAAM,mBAAoD,SAA8B;AAAA,EAC7F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,IAAI,SAAS;AACX,UAAM,EAAE,MAAM,OAAO,IAAI,KAAK;AAC9B,WAAO,YAAY,MAAM,MAAM;AAAA,EACjC;AAAA,EAEA,IAAI,OAAoC;AACtC,QAAI;AACF,WAAK,OAAO,OAAO,KAAK,MAAM;AAAA,IAChC,SAAS,OAAO;AAEd,cAAQ,MAAM,UAAU,KAAK;AAAA,IAC/B;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { isDefined } from '@studiometa/js-toolkit/utils';\nimport { DataBind } from './DataBind.js';\nimport type { DataBindProps } from './DataBind.js';\nimport { getCallback } from './utils.js';\n\nexport interface DataEffectProps extends DataBindProps {\n  $options: {\n    effect: string;\n  } & DataBindProps['$options'];\n}\n\nexport class DataEffect<T extends BaseProps = BaseProps> extends DataBind<DataEffectProps & T> {\n  static config: BaseConfig = {\n    name: 'DataEffect',\n    options: {\n      effect: String,\n    },\n  };\n\n  get effect() {\n    const { group, effect } = this.$options;\n    return getCallback(group, effect);\n  }\n\n  set(value: boolean | string | string[]) {\n    try {\n      this.effect(value, this.target);\n    } catch (error) {\n      // @todo better handling of errors?\n      console.error('Failed', error);\n    }\n  }\n}\n"],
+  "mappings": "AAEA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAQrB,MAAM,mBAAoD,SAA8B;AAAA,EAC7F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,IAAI,SAAS;AACX,UAAM,EAAE,OAAO,OAAO,IAAI,KAAK;AAC/B,WAAO,YAAY,OAAO,MAAM;AAAA,EAClC;AAAA,EAEA,IAAI,OAAoC;AACtC,QAAI;AACF,WAAK,OAAO,OAAO,KAAK,MAAM;AAAA,IAChC,SAAS,OAAO;AAEd,cAAQ,MAAM,UAAU,KAAK;AAAA,IAC/B;AAAA,EACF;AACF;",
   "names": []
 }

package/atoms/Figure/AbstractFigure.d.ts

@@ -0,0 +1,41 @@
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { Transition } from '../../primitives/index.js';
+export interface AbstractFigureProps extends BaseProps {
+    $refs: {
+        img: HTMLImageElement;
+    };
+    $options: {
+        lazy: boolean;
+    };
+}
+declare const AbstractFigure_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithMountWhenInViewInterface, Transition<BaseProps>, import("@studiometa/js-toolkit").WithMountWhenInViewProps>;
+/**
+ * Figure class.
+ */
+export declare class AbstractFigure<T extends BaseProps = BaseProps> extends AbstractFigure_base<T & AbstractFigureProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    /**
+     * Get the transition target.
+     */
+    get target(): HTMLImageElement;
+    /**
+     * Get the image source.
+     */
+    get src(): string;
+    /**
+     * Set the image source.
+     */
+    set src(value: string);
+    /**
+     * Get the original source.
+     */
+    get original(): string;
+    /**
+     * Load on mount.
+     */
+    mounted(): Promise<void>;
+}
+export {};

package/atoms/Figure/AbstractFigure.js

@@ -0,0 +1,65 @@
+import { withMountWhenInView } from "@studiometa/js-toolkit";
+import { Transition } from "../../primitives/index.js";
+import { loadImage } from "./utils.js";
+class AbstractFigure extends withMountWhenInView(Transition, {
+  threshold: [0, 1]
+}) {
+  /**
+   * Config.
+   */
+  static config = {
+    ...Transition.config,
+    name: "AbstractFigure",
+    emits: ["load"],
+    refs: ["img"],
+    options: {
+      ...Transition.config.options,
+      lazy: Boolean
+    }
+  };
+  /**
+   * Get the transition target.
+   */
+  get target() {
+    return this.$refs.img;
+  }
+  /**
+   * Get the image source.
+   */
+  get src() {
+    return this.$refs.img.src;
+  }
+  /**
+   * Set the image source.
+   */
+  set src(value) {
+    this.$refs.img.src = value;
+  }
+  /**
+   * Get the original source.
+   */
+  get original() {
+    return this.$refs.img.dataset.src;
+  }
+  /**
+   * Load on mount.
+   */
+  async mounted() {
+    const { img } = this.$refs;
+    if (!img || !(img instanceof HTMLImageElement)) {
+      this.$warn("The `img` refs is missing or not an `<img>` element.");
+      return;
+    }
+    const src = this.original;
+    if (this.$options.lazy && src && src !== this.src) {
+      await loadImage(src);
+      this.src = src;
+      this.enter();
+      this.$emit("load");
+    }
+  }
+}
+export {
+  AbstractFigure
+};
+//# sourceMappingURL=AbstractFigure.js.map

package/atoms/Figure/AbstractFigure.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/Figure/AbstractFigure.ts"],
+  "sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\nimport { loadImage } from './utils.js';\n\nexport interface AbstractFigureProps extends BaseProps {\n  $refs: {\n    img: HTMLImageElement;\n  };\n  $options: {\n    lazy: boolean;\n  };\n}\n\n/**\n * Figure class.\n */\nexport class AbstractFigure<\n  T extends BaseProps = BaseProps,\n> extends withMountWhenInView<Transition>(Transition, {\n  threshold: [0, 1],\n})<T & AbstractFigureProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'AbstractFigure',\n    emits: ['load'],\n    refs: ['img'],\n    options: {\n      ...Transition.config.options,\n      lazy: Boolean,\n    },\n  };\n\n  /**\n   * Get the transition target.\n   */\n  get target() {\n    return this.$refs.img;\n  }\n\n  /**\n   * Get the image source.\n   */\n  get src() {\n    return this.$refs.img.src;\n  }\n\n  /**\n   * Set the image source.\n   */\n  set src(value: string) {\n    this.$refs.img.src = value;\n  }\n\n  /**\n   * Get the original source.\n   */\n  get original() {\n    return this.$refs.img.dataset.src;\n  }\n\n  /**\n   * Load on mount.\n   */\n  async mounted() {\n    const { img } = this.$refs;\n\n    if (!img || !(img instanceof HTMLImageElement)) {\n      this.$warn('The `img` refs is missing or not an `<img>` element.');\n      return;\n    }\n\n    const src = this.original;\n\n    if (this.$options.lazy && src && src !== this.src) {\n      await loadImage(src);\n      this.src = src;\n      this.enter();\n      this.$emit('load');\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,2BAA2B;AAEpC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAcnB,MAAM,uBAEH,oBAAgC,YAAY;AAAA,EACpD,WAAW,CAAC,GAAG,CAAC;AAClB,CAAC,EAA2B;AAAA;AAAA;AAAA;AAAA,EAI1B,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,OAAO,CAAC,MAAM;AAAA,IACd,MAAM,CAAC,KAAK;AAAA,IACZ,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,IACR;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,IAAI,OAAe;AACrB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,WAAW;AACb,WAAO,KAAK,MAAM,IAAI,QAAQ;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,UAAU;AACd,UAAM,EAAE,IAAI,IAAI,KAAK;AAErB,QAAI,CAAC,OAAO,EAAE,eAAe,mBAAmB;AAC9C,WAAK,MAAM,sDAAsD;AACjE;AAAA,IACF;AAEA,UAAM,MAAM,KAAK;AAEjB,QAAI,KAAK,SAAS,QAAQ,OAAO,QAAQ,KAAK,KAAK;AACjD,YAAM,UAAU,GAAG;AACnB,WAAK,MAAM;AACX,WAAK,MAAM;AACX,WAAK,MAAM,MAAM;AAAA,IACnB;AAAA,EACF;AACF;",
+  "names": []
+}