@studiometa/ui 0.2.52 → 1.0.0-alpha.0

package/atoms/Action/Action.cjs

@@ -23,7 +23,8 @@ __export(Action_exports, {
 });
 module.exports = __toCommonJS(Action_exports);
 var import_js_toolkit = require("@studiometa/js-toolkit");
-var import_utils = require("@studiometa/js-toolkit/utils");
+var TARGET_REGEX = /([a-zA-Z]+)(\((.*)\))?/;
+var effectCache = /* @__PURE__ */ new Map();
 var Action = class extends import_js_toolkit.Base {
   static config = {
     name: "Action",
@@ -33,46 +34,75 @@ var Action = class extends import_js_toolkit.Base {
         default: "click"
       },
       target: String,
-      method: String,
-      selector: 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", `return ${effect}`));
+    }
+    return effectCache.get(effect);
+  }
+  get targets() {
+    const { target } = this.$options;
+    const parts = target.split(" ").map((part) => {
+      const [, name, , selector] = part.match(TARGET_REGEX) ?? [];
+      return [name, selector];
+    });
+    const targets = [];
+    for (const instance of (0, import_js_toolkit.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
    */
-  handleEvent() {
-    const { target: componentNames, method, selector } = this.$options;
-    let targets = componentNames.includes(" ") ? componentNames.split(" ").flatMap((componentName) => this.$root.$children?.[componentName]) : this.$root.$children?.[componentNames];
-    if (!targets || !targets.length) {
-      this.$warn("Target not found.");
-      return;
-    }
-    if (selector || selector.length > 0) {
-      targets = targets.filter((target) => target.$el.matches(selector));
+  handleEvent(event) {
+    const { targets, effect, modifiers } = this;
+    if (modifiers.includes("prevent")) {
+      event.preventDefault();
     }
-    if (!targets || !targets.length) {
-      this.$warn(`Target with selector "${selector}" not found.`);
-      return;
+    if (modifiers.includes("stop")) {
+      event.stopPropagation();
     }
-    targets.forEach((target) => {
-      if (!(0, import_utils.isFunction)(target[method])) {
-        this.$warn(`Method "${method}()" not found on target.`, target);
-        return;
+    for (const target of targets) {
+      try {
+        const [name, currentTarget] = Object.entries(target).flat();
+        const value = effect(target, event, currentTarget);
+        if (typeof value === "function") {
+          value(target, event, currentTarget);
+        }
+      } catch (err) {
+        this.$warn(err);
       }
-      target[method]();
-    });
+    }
   }
   /**
    * Mounted
    */
   mounted() {
-    const { on: eventName, target, method } = this.$options;
-    if (!target || !method || target.length <= 0 || method.length <= 0) {
-      this.$warn("No target or method specified.");
-      this.$terminate();
-      return;
-    }
-    this.$el.addEventListener(eventName, this);
+    const { event, modifiers } = this;
+    this.$el.addEventListener(event, this, {
+      capture: modifiers.includes("capture"),
+      once: modifiers.includes("once"),
+      passive: modifiers.includes("passive")
+    });
   }
   /**
    * Destroyed

package/atoms/Action/Action.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/Action/Action.ts"],
-  "sourcesContent": ["import { Base } 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    method: string;\n    selector: 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      method: String,\n      selector: String,\n    },\n  };\n\n  /**\n   * Run method on targeted components\n   */\n  handleEvent() {\n    const { target: componentNames, method, selector } = this.$options;\n\n    let targets = componentNames.includes(' ')\n      ? componentNames\n          .split(' ')\n          .flatMap((componentName) => this.$root.$children?.[componentName] as Base[])\n      : (this.$root.$children?.[componentNames] as Base[]);\n\n    if (!targets || !targets.length) {\n      this.$warn('Target not found.');\n      return;\n    }\n\n    if (selector || selector.length > 0) {\n      targets = targets.filter((target) => target.$el.matches(selector));\n    }\n\n    if (!targets || !targets.length) {\n      this.$warn(`Target with selector \"${selector}\" not found.`);\n      return;\n    }\n\n    targets.forEach((target) => {\n      if (!isFunction(target[method])) {\n        this.$warn(`Method \"${method}()\" not found on target.`, target);\n        return;\n      }\n\n      target[method]();\n    });\n  }\n\n  /**\n   * Mounted\n   */\n  mounted() {\n    const { on: eventName, target, method } = this.$options;\n\n    if (!target || !method || target.length <= 0 || method.length <= 0) {\n      this.$warn('No target or method specified.');\n      this.$terminate();\n      return;\n    }\n\n    this.$el.addEventListener(eventName, this);\n  }\n\n  /**\n   * Destroyed\n   */\n  destroyed() {\n    this.$el.removeEventListener(this.$options.on, this);\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AACrB,mBAA2B;AAepB,IAAM,SAAN,cAAsD,uBAAsB;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,MACR,UAAU;AAAA,IACZ;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,UAAM,EAAE,QAAQ,gBAAgB,QAAQ,SAAS,IAAI,KAAK;AAE1D,QAAI,UAAU,eAAe,SAAS,GAAG,IACrC,eACG,MAAM,GAAG,EACT,QAAQ,CAAC,kBAAkB,KAAK,MAAM,YAAY,aAAa,CAAW,IAC5E,KAAK,MAAM,YAAY,cAAc;AAE1C,QAAI,CAAC,WAAW,CAAC,QAAQ,QAAQ;AAC/B,WAAK,MAAM,mBAAmB;AAC9B;AAAA,IACF;AAEA,QAAI,YAAY,SAAS,SAAS,GAAG;AACnC,gBAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,IAAI,QAAQ,QAAQ,CAAC;AAAA,IACnE;AAEA,QAAI,CAAC,WAAW,CAAC,QAAQ,QAAQ;AAC/B,WAAK,MAAM,yBAAyB,QAAQ,cAAc;AAC1D;AAAA,IACF;AAEA,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,KAAC,yBAAW,OAAO,MAAM,CAAC,GAAG;AAC/B,aAAK,MAAM,WAAW,MAAM,4BAA4B,MAAM;AAC9D;AAAA,MACF;AAEA,aAAO,MAAM,EAAE;AAAA,IACjB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,UAAM,EAAE,IAAI,WAAW,QAAQ,OAAO,IAAI,KAAK;AAE/C,QAAI,CAAC,UAAU,CAAC,UAAU,OAAO,UAAU,KAAK,OAAO,UAAU,GAAG;AAClE,WAAK,MAAM,gCAAgC;AAC3C,WAAK,WAAW;AAChB;AAAA,IACF;AAEA,SAAK,IAAI,iBAAiB,WAAW,IAAI;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,IAAI,oBAAoB,KAAK,SAAS,IAAI,IAAI;AAAA,EACrD;AACF;",
+  "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', `return ${effect}`));\n    }\n    return effectCache.get(effect);\n  }\n\n  get targets() {\n    const { target } = this.$options;\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 [name, currentTarget] = Object.entries(target).flat();\n        const value = effect(target, event, currentTarget);\n        if (typeof value === 'function') {\n          value(target, event, currentTarget);\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": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAmC;AAiBnC,IAAM,eAAe;AAErB,IAAM,cAAc,oBAAI,IAAsB;AAKvC,IAAM,SAAN,cAAsD,uBAAsB;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,UAAU;AAAA,MACV,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,IAAI,QAAQ;AACV,UAAM,CAAC,KAAK,IAAI,KAAK,SAAS,GAAG,MAAM,KAAK,CAAC;AAC7C,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,YAAY;AACd,WAAO,KAAK,SAAS,GAAG,MAAM,GAAG,EAAE,MAAM,CAAC;AAAA,EAC5C;AAAA,EAEA,IAAI,SAAS;AACX,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,QAAI,CAAC,YAAY,IAAI,MAAM,GAAG;AAC5B,kBAAY,IAAI,QAAQ,IAAI,SAAS,OAAO,SAAS,UAAU,UAAU,MAAM,EAAE,CAAC;AAAA,IACpF;AACA,WAAO,YAAY,IAAI,MAAM;AAAA,EAC/B;AAAA,EAEA,IAAI,UAAU;AACZ,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,UAAM,QAAQ,OAAO,MAAM,GAAG,EAAE,IAAI,CAAC,SAAS;AAC5C,YAAM,CAAC,EAAE,MAAM,EAAE,QAAQ,IAAI,KAAK,MAAM,YAAY,KAAK,CAAC;AAC1D,aAAO,CAAC,MAAM,QAAQ;AAAA,IACxB,CAAC;AAED,UAAM,UAAU,CAAC;AAEjB,eAAW,gBAAY,gCAAa,GAAG;AACrC,YAAM,EAAE,KAAK,IAAI,SAAS;AAE1B,iBAAW,QAAQ,OAAO;AACxB,cAAM,aACJ,KAAK,CAAC,MAAM,SAAS,CAAC,KAAK,CAAC,KAAM,KAAK,CAAC,KAAK,SAAS,IAAI,QAAQ,KAAK,CAAC,CAAC;AAC3E,YAAI,YAAY;AACd,kBAAQ,KAAK,EAAE,CAAC,SAAS,SAAS,IAAI,GAAG,SAAS,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,OAAc;AACxB,UAAM,EAAE,SAAS,QAAQ,UAAU,IAAI;AAEvC,QAAI,UAAU,SAAS,SAAS,GAAG;AACjC,YAAM,eAAe;AAAA,IACvB;AAEA,QAAI,UAAU,SAAS,MAAM,GAAG;AAC9B,YAAM,gBAAgB;AAAA,IACxB;AAEA,eAAW,UAAU,SAAS;AAC5B,UAAI;AACF,cAAM,CAAC,MAAM,aAAa,IAAI,OAAO,QAAQ,MAAM,EAAE,KAAK;AAC1D,cAAM,QAAQ,OAAO,QAAQ,OAAO,aAAa;AACjD,YAAI,OAAO,UAAU,YAAY;AAC/B,gBAAM,QAAQ,OAAO,aAAa;AAAA,QACpC;AAAA,MACF,SAAS,KAAK;AACZ,aAAK,MAAM,GAAG;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,SAAK,IAAI,iBAAiB,OAAO,MAAM;AAAA,MACrC,SAAS,UAAU,SAAS,SAAS;AAAA,MACrC,MAAM,UAAU,SAAS,MAAM;AAAA,MAC/B,SAAS,UAAU,SAAS,SAAS;AAAA,IACvC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,IAAI,oBAAoB,KAAK,SAAS,IAAI,IAAI;AAAA,EACrD;AACF;",
   "names": []
 }

package/atoms/Action/Action.d.ts

@@ -4,8 +4,8 @@ export interface ActionProps extends BaseProps {
     $options: {
         on: string;
         target: string;
-        method: string;
         selector: string;
+        effect: string;
     };
 }
 /**
@@ -13,10 +13,14 @@ 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(): Record<string, Base<BaseProps>>[];
     /**
      * Run method on targeted components
      */
-    handleEvent(): void;
+    handleEvent(event: Event): void;
     /**
      * Mounted
      */

package/atoms/Action/Action.js

@@ -1,5 +1,6 @@
-import { Base } from "@studiometa/js-toolkit";
-import { isFunction } from "@studiometa/js-toolkit/utils";
+import { Base, getInstances } from "@studiometa/js-toolkit";
+const TARGET_REGEX = /([a-zA-Z]+)(\((.*)\))?/;
+const effectCache = /* @__PURE__ */ new Map();
 class Action extends Base {
   static config = {
     name: "Action",
@@ -9,46 +10,75 @@ class Action extends Base {
         default: "click"
       },
       target: String,
-      method: String,
-      selector: 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", `return ${effect}`));
+    }
+    return effectCache.get(effect);
+  }
+  get targets() {
+    const { target } = this.$options;
+    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
    */
-  handleEvent() {
-    const { target: componentNames, method, selector } = this.$options;
-    let targets = componentNames.includes(" ") ? componentNames.split(" ").flatMap((componentName) => this.$root.$children?.[componentName]) : this.$root.$children?.[componentNames];
-    if (!targets || !targets.length) {
-      this.$warn("Target not found.");
-      return;
-    }
-    if (selector || selector.length > 0) {
-      targets = targets.filter((target) => target.$el.matches(selector));
+  handleEvent(event) {
+    const { targets, effect, modifiers } = this;
+    if (modifiers.includes("prevent")) {
+      event.preventDefault();
     }
-    if (!targets || !targets.length) {
-      this.$warn(`Target with selector "${selector}" not found.`);
-      return;
+    if (modifiers.includes("stop")) {
+      event.stopPropagation();
     }
-    targets.forEach((target) => {
-      if (!isFunction(target[method])) {
-        this.$warn(`Method "${method}()" not found on target.`, target);
-        return;
+    for (const target of targets) {
+      try {
+        const [name, currentTarget] = Object.entries(target).flat();
+        const value = effect(target, event, currentTarget);
+        if (typeof value === "function") {
+          value(target, event, currentTarget);
+        }
+      } catch (err) {
+        this.$warn(err);
       }
-      target[method]();
-    });
+    }
   }
   /**
    * Mounted
    */
   mounted() {
-    const { on: eventName, target, method } = this.$options;
-    if (!target || !method || target.length <= 0 || method.length <= 0) {
-      this.$warn("No target or method specified.");
-      this.$terminate();
-      return;
-    }
-    this.$el.addEventListener(eventName, this);
+    const { event, modifiers } = this;
+    this.$el.addEventListener(event, this, {
+      capture: modifiers.includes("capture"),
+      once: modifiers.includes("once"),
+      passive: modifiers.includes("passive")
+    });
   }
   /**
    * Destroyed

package/atoms/Action/Action.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/Action/Action.ts"],
-  "sourcesContent": ["import { Base } 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    method: string;\n    selector: 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      method: String,\n      selector: String,\n    },\n  };\n\n  /**\n   * Run method on targeted components\n   */\n  handleEvent() {\n    const { target: componentNames, method, selector } = this.$options;\n\n    let targets = componentNames.includes(' ')\n      ? componentNames\n          .split(' ')\n          .flatMap((componentName) => this.$root.$children?.[componentName] as Base[])\n      : (this.$root.$children?.[componentNames] as Base[]);\n\n    if (!targets || !targets.length) {\n      this.$warn('Target not found.');\n      return;\n    }\n\n    if (selector || selector.length > 0) {\n      targets = targets.filter((target) => target.$el.matches(selector));\n    }\n\n    if (!targets || !targets.length) {\n      this.$warn(`Target with selector \"${selector}\" not found.`);\n      return;\n    }\n\n    targets.forEach((target) => {\n      if (!isFunction(target[method])) {\n        this.$warn(`Method \"${method}()\" not found on target.`, target);\n        return;\n      }\n\n      target[method]();\n    });\n  }\n\n  /**\n   * Mounted\n   */\n  mounted() {\n    const { on: eventName, target, method } = this.$options;\n\n    if (!target || !method || target.length <= 0 || method.length <= 0) {\n      this.$warn('No target or method specified.');\n      this.$terminate();\n      return;\n    }\n\n    this.$el.addEventListener(eventName, this);\n  }\n\n  /**\n   * Destroyed\n   */\n  destroyed() {\n    this.$el.removeEventListener(this.$options.on, this);\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAepB,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,MACR,UAAU;AAAA,IACZ;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,UAAM,EAAE,QAAQ,gBAAgB,QAAQ,SAAS,IAAI,KAAK;AAE1D,QAAI,UAAU,eAAe,SAAS,GAAG,IACrC,eACG,MAAM,GAAG,EACT,QAAQ,CAAC,kBAAkB,KAAK,MAAM,YAAY,aAAa,CAAW,IAC5E,KAAK,MAAM,YAAY,cAAc;AAE1C,QAAI,CAAC,WAAW,CAAC,QAAQ,QAAQ;AAC/B,WAAK,MAAM,mBAAmB;AAC9B;AAAA,IACF;AAEA,QAAI,YAAY,SAAS,SAAS,GAAG;AACnC,gBAAU,QAAQ,OAAO,CAAC,WAAW,OAAO,IAAI,QAAQ,QAAQ,CAAC;AAAA,IACnE;AAEA,QAAI,CAAC,WAAW,CAAC,QAAQ,QAAQ;AAC/B,WAAK,MAAM,yBAAyB,QAAQ,cAAc;AAC1D;AAAA,IACF;AAEA,YAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAI,CAAC,WAAW,OAAO,MAAM,CAAC,GAAG;AAC/B,aAAK,MAAM,WAAW,MAAM,4BAA4B,MAAM;AAC9D;AAAA,MACF;AAEA,aAAO,MAAM,EAAE;AAAA,IACjB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,UAAM,EAAE,IAAI,WAAW,QAAQ,OAAO,IAAI,KAAK;AAE/C,QAAI,CAAC,UAAU,CAAC,UAAU,OAAO,UAAU,KAAK,OAAO,UAAU,GAAG;AAClE,WAAK,MAAM,gCAAgC;AAC3C,WAAK,WAAW;AAChB;AAAA,IACF;AAEA,SAAK,IAAI,iBAAiB,WAAW,IAAI;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,IAAI,oBAAoB,KAAK,SAAS,IAAI,IAAI;AAAA,EACrD;AACF;",
+  "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', `return ${effect}`));\n    }\n    return effectCache.get(effect);\n  }\n\n  get targets() {\n    const { target } = this.$options;\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 [name, currentTarget] = Object.entries(target).flat();\n        const value = effect(target, event, currentTarget);\n        if (typeof value === 'function') {\n          value(target, event, currentTarget);\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": "AAAA,SAAS,MAAM,oBAAoB;AAiBnC,MAAM,eAAe;AAErB,MAAM,cAAc,oBAAI,IAAsB;AAKvC,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,UAAU;AAAA,MACV,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,IAAI,QAAQ;AACV,UAAM,CAAC,KAAK,IAAI,KAAK,SAAS,GAAG,MAAM,KAAK,CAAC;AAC7C,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,YAAY;AACd,WAAO,KAAK,SAAS,GAAG,MAAM,GAAG,EAAE,MAAM,CAAC;AAAA,EAC5C;AAAA,EAEA,IAAI,SAAS;AACX,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,QAAI,CAAC,YAAY,IAAI,MAAM,GAAG;AAC5B,kBAAY,IAAI,QAAQ,IAAI,SAAS,OAAO,SAAS,UAAU,UAAU,MAAM,EAAE,CAAC;AAAA,IACpF;AACA,WAAO,YAAY,IAAI,MAAM;AAAA,EAC/B;AAAA,EAEA,IAAI,UAAU;AACZ,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,UAAM,QAAQ,OAAO,MAAM,GAAG,EAAE,IAAI,CAAC,SAAS;AAC5C,YAAM,CAAC,EAAE,MAAM,EAAE,QAAQ,IAAI,KAAK,MAAM,YAAY,KAAK,CAAC;AAC1D,aAAO,CAAC,MAAM,QAAQ;AAAA,IACxB,CAAC;AAED,UAAM,UAAU,CAAC;AAEjB,eAAW,YAAY,aAAa,GAAG;AACrC,YAAM,EAAE,KAAK,IAAI,SAAS;AAE1B,iBAAW,QAAQ,OAAO;AACxB,cAAM,aACJ,KAAK,CAAC,MAAM,SAAS,CAAC,KAAK,CAAC,KAAM,KAAK,CAAC,KAAK,SAAS,IAAI,QAAQ,KAAK,CAAC,CAAC;AAC3E,YAAI,YAAY;AACd,kBAAQ,KAAK,EAAE,CAAC,SAAS,SAAS,IAAI,GAAG,SAAS,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,OAAc;AACxB,UAAM,EAAE,SAAS,QAAQ,UAAU,IAAI;AAEvC,QAAI,UAAU,SAAS,SAAS,GAAG;AACjC,YAAM,eAAe;AAAA,IACvB;AAEA,QAAI,UAAU,SAAS,MAAM,GAAG;AAC9B,YAAM,gBAAgB;AAAA,IACxB;AAEA,eAAW,UAAU,SAAS;AAC5B,UAAI;AACF,cAAM,CAAC,MAAM,aAAa,IAAI,OAAO,QAAQ,MAAM,EAAE,KAAK;AAC1D,cAAM,QAAQ,OAAO,QAAQ,OAAO,aAAa;AACjD,YAAI,OAAO,UAAU,YAAY;AAC/B,gBAAM,QAAQ,OAAO,aAAa;AAAA,QACpC;AAAA,MACF,SAAS,KAAK;AACZ,aAAK,MAAM,GAAG;AAAA,MAChB;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,SAAK,IAAI,iBAAiB,OAAO,MAAM;AAAA,MACrC,SAAS,UAAU,SAAS,SAAS;AAAA,MACrC,MAAM,UAAU,SAAS,MAAM;AAAA,MAC/B,SAAS,UAAU,SAAS,SAAS;AAAA,IACvC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,IAAI,oBAAoB,KAAK,SAAS,IAAI,IAAI;AAAA,EACrD;AACF;",
   "names": []
 }

package/atoms/Action/Target.cjs

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/atoms/Action/Target.ts
+var Target_exports = {};
+__export(Target_exports, {
+  Target: () => Target
+});
+module.exports = __toCommonJS(Target_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var Target = class extends import_js_toolkit.Base {
+  /**
+   * Config.
+   */
+  static config = {
+    name: "Target"
+  };
+};
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=Target.cjs.map

package/atoms/Action/Target.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/Action/Target.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\n\nexport interface TargetProps extends BaseProps {}\n\n/**\n * Target class.\n */\nexport class Target extends Base<TargetProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Target',\n  };\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAQd,IAAM,SAAN,cAAqB,uBAAkB;AAAA;AAAA;AAAA;AAAA,EAI5C,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;",
+  "names": []
+}

package/atoms/Action/Target.d.ts

@@ -0,0 +1,13 @@
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+export interface TargetProps extends BaseProps {
+}
+/**
+ * Target class.
+ */
+export declare class Target extends Base<TargetProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+}

package/atoms/Action/Target.js

@@ -0,0 +1,13 @@
+import { Base } from "@studiometa/js-toolkit";
+class Target extends Base {
+  /**
+   * Config.
+   */
+  static config = {
+    name: "Target"
+  };
+}
+export {
+  Target
+};
+//# sourceMappingURL=Target.js.map

package/atoms/Action/Target.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/ui/atoms/Action/Target.ts"],
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\n\nexport interface TargetProps extends BaseProps {}\n\n/**\n * Target class.\n */\nexport class Target extends Base<TargetProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Target',\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAQd,MAAM,eAAe,KAAkB;AAAA;AAAA;AAAA;AAAA,EAI5C,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;",
+  "names": []
+}

package/atoms/Action/index.cjs

@@ -17,5 +17,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var Action_exports = {};
 module.exports = __toCommonJS(Action_exports);
 __reExport(Action_exports, require("./Action.cjs"), module.exports);
+__reExport(Action_exports, require("./Target.cjs"), module.exports);
 if (module.exports.default) module.exports = module.exports.default;
 //# sourceMappingURL=index.cjs.map

package/atoms/Action/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/ui/atoms/Action/index.ts"],
-  "sourcesContent": ["export * from './Action.js';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,yBAAd;",
+  "sourcesContent": ["export * from './Action.js';\nexport * from './Target.js';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,yBAAd;AACA,2BAAc,yBADd;",
   "names": []
 }

package/atoms/Action/index.d.ts

@@ -1 +1,2 @@
 export * from './Action.js';
+export * from './Target.js';

package/atoms/Action/index.js

@@ -1,2 +1,3 @@
 export * from "./Action.js";
+export * from "./Target.js";
 //# sourceMappingURL=index.js.map

package/atoms/Action/index.js.map

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

package/atoms/Button/Button.twig

@@ -52,7 +52,7 @@
           }
         },
         {
-          class: icon_classes,
+          class: icon_classes ?? '',
         },
       )
     } %}

package/atoms/Data/DataBind.cjs

@@ -0,0 +1,124 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/ui/atoms/Data/DataBind.ts
+var DataBind_exports = {};
+__export(DataBind_exports, {
+  DataBind: () => DataBind
+});
+module.exports = __toCommonJS(DataBind_exports);
+var import_js_toolkit = require("@studiometa/js-toolkit");
+var import_utils = require("@studiometa/js-toolkit/utils");
+var import_utils2 = require("./utils.cjs");
+var instances = /* @__PURE__ */ new Map();
+var DataBind = class extends import_js_toolkit.Base {
+  static config = {
+    name: "DataBind",
+    options: {
+      prop: String,
+      name: String
+    }
+  };
+  get relatedInstances() {
+    const { name } = this.$options;
+    if (!instances.has(name)) {
+      instances.set(name, /* @__PURE__ */ new Set());
+    }
+    return instances.get(name);
+  }
+  get multiple() {
+    return this.$options.name.endsWith("[]");
+  }
+  get target() {
+    return this.$el;
+  }
+  get prop() {
+    if (this.$options.prop) {
+      return this.$options.prop;
+    }
+    const { target } = this;
+    if (target instanceof HTMLInputElement) {
+      return "value";
+    }
+    return "textContent";
+  }
+  get value() {
+    return this.get();
+  }
+  set value(value) {
+    this.set(value);
+  }
+  get() {
+    const { target, multiple } = this;
+    if ((0, import_utils2.isSelect)(target)) {
+      if (multiple) {
+        const values = [];
+        for (const option2 of target.options) {
+          if (option2.selected) {
+            values.push(option2.value);
+          }
+        }
+        return values;
+      }
+      const option = target.options.item(target.selectedIndex);
+      return option.value;
+    }
+    if ((0, import_utils2.isCheckbox)(target)) {
+      if (multiple) {
+        const values = [];
+        for (const instance of this.relatedInstances) {
+          if ((0, import_utils2.isCheckbox)(instance.target) && instance.target.checked) {
+            values.push(instance.target.value);
+          }
+        }
+        return values;
+      } else {
+        return target.checked;
+      }
+    }
+    return target[this.prop];
+  }
+  set(value) {
+    const { target, multiple } = this;
+    if ((0, import_utils2.isSelect)(target)) {
+      for (const option of target.options) {
+        option.selected = multiple && (0, import_utils.isArray)(value) ? value.includes(option.value) : option.value === value;
+      }
+      return;
+    }
+    if ((0, import_utils2.isInput)(target)) {
+      switch (target.type) {
+        case "radio":
+          target.checked = target.value === value;
+          return;
+        case "checkbox":
+          target.checked = multiple && (0, import_utils.isArray)(value) ? value.includes(target.value) : Boolean(value);
+          return;
+      }
+    }
+    target[this.prop] = value;
+  }
+  mounted() {
+    this.relatedInstances.add(this);
+  }
+  destroyed() {
+    this.relatedInstances.delete(this);
+  }
+};
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=DataBind.cjs.map

package/atoms/Data/DataBind.cjs.map

@@ -0,0 +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 instances = 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    if (!instances.has(name)) {\n      instances.set(name, new Set());\n    }\n\n    return instances.get(name);\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        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 = [];\n        for (const instance of this.relatedInstances) {\n          if (isCheckbox(instance.target) && instance.target.checked) {\n            values.push(instance.target.value);\n          }\n        }\n        return values;\n      } else {\n        return target.checked;\n      }\n    }\n\n    return target[this.prop];\n  }\n\n  set(value: boolean | string | string[]) {\n    const { target, multiple } = this;\n\n    if (isSelect(target)) {\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": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAqB;AAErB,mBAAwB;AACxB,IAAAA,gBAA8C;AAE9C,IAAM,YAAY,oBAAI,IAA2B;AAS1C,IAAM,WAAN,cAAwD,uBAAwB;AAAA,EACrF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EAEA,IAAI,mBAAmB;AACrB,UAAM,EAAE,KAAK,IAAI,KAAK;AAEtB,QAAI,CAAC,UAAU,IAAI,IAAI,GAAG;AACxB,gBAAU,IAAI,MAAM,oBAAI,IAAI,CAAC;AAAA,IAC/B;AAEA,WAAO,UAAU,IAAI,IAAI;AAAA,EAC3B;AAAA,EAEA,IAAI,WAAW;AACb,WAAO,KAAK,SAAS,KAAK,SAAS,IAAI;AAAA,EACzC;AAAA,EAEA,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,OAAO;AACT,QAAI,KAAK,SAAS,MAAM;AACtB,aAAO,KAAK,SAAS;AAAA,IACvB;AAEA,UAAM,EAAE,OAAO,IAAI;AACnB,QAAI,kBAAkB,kBAAkB;AACtC,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,IAAI,QAAQ;AACV,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA,EAEA,IAAI,MAAM,OAAO;AACf,SAAK,IAAI,KAAK;AAAA,EAChB;AAAA,EAEA,MAAM;AACJ,UAAM,EAAE,QAAQ,SAAS,IAAI;AAE7B,YAAI,wBAAS,MAAM,GAAG;AACpB,UAAI,UAAU;AACZ,cAAM,SAAS,CAAC;AAChB,mBAAWC,WAAU,OAAO,SAAS;AACnC,cAAIA,QAAO,UAAU;AACnB,mBAAO,KAAKA,QAAO,KAAK;AAAA,UAC1B;AAAA,QACF;AAEA,eAAO;AAAA,MACT;AAEA,YAAM,SAAS,OAAO,QAAQ,KAAK,OAAO,aAAa;AACvD,aAAO,OAAO;AAAA,IAChB;AAEA,YAAI,0BAAW,MAAM,GAAG;AACtB,UAAI,UAAU;AACZ,cAAM,SAAS,CAAC;AAChB,mBAAW,YAAY,KAAK,kBAAkB;AAC5C,kBAAI,0BAAW,SAAS,MAAM,KAAK,SAAS,OAAO,SAAS;AAC1D,mBAAO,KAAK,SAAS,OAAO,KAAK;AAAA,UACnC;AAAA,QACF;AACA,eAAO;AAAA,MACT,OAAO;AACL,eAAO,OAAO;AAAA,MAChB;AAAA,IACF;AAEA,WAAO,OAAO,KAAK,IAAI;AAAA,EACzB;AAAA,EAEA,IAAI,OAAoC;AACtC,UAAM,EAAE,QAAQ,SAAS,IAAI;AAE7B,YAAI,wBAAS,MAAM,GAAG;AACpB,iBAAW,UAAU,OAAO,SAAS;AACnC,eAAO,WACL,gBAAY,sBAAQ,KAAK,IAAI,MAAM,SAAS,OAAO,KAAK,IAAI,OAAO,UAAU;AAAA,MACjF;AACA;AAAA,IACF;AAEA,YAAI,uBAAQ,MAAM,GAAG;AACnB,cAAQ,OAAO,MAAM;AAAA,QACnB,KAAK;AACH,iBAAO,UAAU,OAAO,UAAU;AAClC;AAAA,QACF,KAAK;AACH,iBAAO,UACL,gBAAY,sBAAQ,KAAK,IAAI,MAAM,SAAS,OAAO,KAAK,IAAI,QAAQ,KAAK;AAC3E;AAAA,MACJ;AAAA,IACF;AAEA,WAAO,KAAK,IAAI,IAAI;AAAA,EACtB;AAAA,EAEA,UAAU;AACR,SAAK,iBAAiB,IAAI,IAAI;AAAA,EAChC;AAAA,EAEA,YAAY;AACV,SAAK,iBAAiB,OAAO,IAAI;AAAA,EACnC;AACF;",
+  "names": ["import_utils", "option"]
+}

package/atoms/Data/DataBind.d.ts

@@ -0,0 +1,23 @@
+import { Base } from '@studiometa/js-toolkit';
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+export interface DataBindProps extends BaseProps {
+    $options: {
+        prop: string;
+        name: string;
+    };
+}
+export declare class DataBind<T extends BaseProps = BaseProps> extends Base<DataBindProps & T> {
+    static config: BaseConfig;
+    get relatedInstances(): Set<DataBind<BaseProps>>;
+    get multiple(): boolean;
+    get target(): (DataBindProps & T)["$el"] & HTMLElement & {
+        __base__?: WeakMap<import("@studiometa/js-toolkit").BaseConstructor, Base | "terminated">;
+    };
+    get prop(): string;
+    get value(): any;
+    set value(value: any);
+    get(): any;
+    set(value: boolean | string | string[]): void;
+    mounted(): void;
+    destroyed(): void;
+}