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

package/Frame/FrameAnchor.js

@@ -1,5 +1,5 @@
-import { Base } from "@studiometa/js-toolkit";
-class FrameAnchor extends Base {
+import { AbstractFrameTrigger } from "./AbstractFrameTrigger.js";
+class FrameAnchor extends AbstractFrameTrigger {
   /**
    * Config.
    */
@@ -7,10 +7,13 @@ class FrameAnchor extends Base {
     name: "FrameAnchor"
   };
   /**
-   * Get the URL.
+   * Prevent click.
    */
-  get href() {
-    return this.$el.href;
+  onClick({ event }) {
+    if (!event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey && event.button === 0 && this.$el.target !== "_blank") {
+      event.preventDefault();
+      this.trigger();
+    }
   }
 }
 export {

package/Frame/FrameAnchor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Frame/FrameAnchor.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\n\nexport interface FrameAnchorProps extends BaseProps {\n  $el: HTMLAnchorElement;\n}\n\n/**\n * FrameAnchor class.\n */\nexport class FrameAnchor<T extends BaseProps = BaseProps> extends Base<T & FrameAnchorProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameAnchor',\n  };\n\n  /**\n   * Get the URL.\n   */\n  get href(): string {\n    return this.$el.href;\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAUd,MAAM,oBAAqD,KAA2B;AAAA;AAAA;AAAA;AAAA,EAI3F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,OAAe;AACjB,WAAO,KAAK,IAAI;AAAA,EAClB;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { AbstractFrameTrigger } from './AbstractFrameTrigger.js';\n\nexport interface FrameAnchorProps extends BaseProps {\n  $el: HTMLAnchorElement;\n}\n\n/**\n * FrameAnchor class.\n */\nexport class FrameAnchor<T extends BaseProps = BaseProps> extends AbstractFrameTrigger<\n  T & FrameAnchorProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameAnchor',\n  };\n\n  /**\n   * Prevent click.\n   */\n  onClick({ event }: { event: MouseEvent; target: FrameAnchor }) {\n    if (\n      !event.ctrlKey &&\n      !event.shiftKey &&\n      !event.altKey &&\n      !event.metaKey &&\n      event.button === 0 &&\n      this.$el.target !== '_blank'\n    ) {\n      event.preventDefault();\n      this.trigger();\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,4BAA4B;AAS9B,MAAM,oBAAqD,qBAEhE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,EAAE,MAAM,GAA+C;AAC7D,QACE,CAAC,MAAM,WACP,CAAC,MAAM,YACP,CAAC,MAAM,UACP,CAAC,MAAM,WACP,MAAM,WAAW,KACjB,KAAK,IAAI,WAAW,UACpB;AACA,YAAM,eAAe;AACrB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AACF;",
   "names": []
 }

package/Frame/FrameForm.d.ts

@@ -1,18 +1,36 @@
-import { Base } from '@studiometa/js-toolkit';
 import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { AbstractFrameTrigger } from './AbstractFrameTrigger.js';
 export interface FrameFormProps extends BaseProps {
     $el: HTMLFormElement;
+    $refs: {
+        headers: HTMLInputElement[];
+    };
 }
 /**
  * FrameForm class.
  */
-export declare class FrameForm<T extends BaseProps = BaseProps> extends Base<T & FrameFormProps> {
+export declare class FrameForm<T extends BaseProps = BaseProps> extends AbstractFrameTrigger<T & FrameFormProps> {
     /**
      * Config.
      */
     static config: BaseConfig;
     /**
-     * Get the form action.
+     * Form submission method.
      */
-    get action(): string;
+    get method(): "post" | "get";
+    /**
+     * Add params to the requested URL for GET submissions.
+     */
+    get url(): URL;
+    /**
+     * Add body to the request for POST submissions.
+     */
+    get requestInit(): RequestInit;
+    /**
+     * Prevent submit on forms.
+     */
+    onSubmit({ event }: {
+        event: SubmitEvent;
+        target: FrameForm;
+    }): void;
 }

package/Frame/FrameForm.js

@@ -1,16 +1,55 @@
-import { Base } from "@studiometa/js-toolkit";
-class FrameForm extends Base {
+import { AbstractFrameTrigger } from "./AbstractFrameTrigger.js";
+class FrameForm extends AbstractFrameTrigger {
   /**
    * Config.
    */
   static config = {
-    name: "FrameForm"
+    name: "FrameForm",
+    refs: ["headers[]"]
   };
   /**
-   * Get the form action.
+   * Form submission method.
    */
-  get action() {
-    return this.$el.action;
+  get method() {
+    return this.$el.method.toLowerCase();
+  }
+  /**
+   * Add params to the requested URL for GET submissions.
+   */
+  get url() {
+    const url = new URL(this.$el.action);
+    if (this.method === "get") {
+      url.search = new URLSearchParams(new FormData(this.$el)).toString();
+    }
+    return url;
+  }
+  /**
+   * Add body to the request for POST submissions.
+   */
+  get requestInit() {
+    const requestInit = { ...super.requestInit };
+    requestInit.headers ??= {};
+    if (this.$refs.headers) {
+      for (const header of this.$refs.headers) {
+        if (header.dataset.name && header.value) {
+          requestInit.headers[header.dataset.name] = header.value;
+        }
+      }
+    }
+    if (this.method === "post") {
+      requestInit.method = this.method;
+      requestInit.body = new FormData(this.$el);
+    }
+    return requestInit;
+  }
+  /**
+   * Prevent submit on forms.
+   */
+  onSubmit({ event }) {
+    if (this.$el.target !== "_blank") {
+      event.preventDefault();
+      this.trigger();
+    }
   }
 }
 export {

package/Frame/FrameForm.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Frame/FrameForm.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface FrameFormProps extends BaseProps {\n  $el: HTMLFormElement;\n}\n\n/**\n * FrameForm class.\n */\nexport class FrameForm<T extends BaseProps = BaseProps> extends Base<T & FrameFormProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameForm',\n  };\n\n  /**\n   * Get the form action.\n   */\n  get action(): string {\n    return this.$el.action;\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAUd,MAAM,kBAAmD,KAAyB;AAAA;AAAA;AAAA;AAAA,EAIvF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAiB;AACnB,WAAO,KAAK,IAAI;AAAA,EAClB;AACF;",
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractFrameTrigger } from './AbstractFrameTrigger.js';\n\nexport interface FrameFormProps extends BaseProps {\n  $el: HTMLFormElement;\n  $refs: {\n    headers: HTMLInputElement[];\n  };\n}\n\n/**\n * FrameForm class.\n */\nexport class FrameForm<T extends BaseProps = BaseProps> extends AbstractFrameTrigger<\n  T & FrameFormProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameForm',\n    refs: ['headers[]'],\n  };\n\n  /**\n   * Form submission method.\n   */\n  get method() {\n    return this.$el.method.toLowerCase() as 'post' | 'get';\n  }\n\n  /**\n   * Add params to the requested URL for GET submissions.\n   */\n  get url(): URL {\n    const url = new URL(this.$el.action);\n\n    if (this.method === 'get') {\n      // @ts-expect-error URLSearchParams accepts FormData as parameter in the browser.\n      url.search = new URLSearchParams(new FormData(this.$el)).toString();\n    }\n\n    return url;\n  }\n\n  /**\n   * Add body to the request for POST submissions.\n   */\n  get requestInit(): RequestInit {\n    const requestInit = { ...super.requestInit };\n    requestInit.headers ??= {};\n\n    if (this.$refs.headers) {\n      for (const header of this.$refs.headers) {\n        if (header.dataset.name && header.value) {\n          requestInit.headers[header.dataset.name] = header.value;\n        }\n      }\n    }\n\n    if (this.method === 'post') {\n      requestInit.method = this.method;\n      requestInit.body = new FormData(this.$el);\n    }\n\n    return requestInit;\n  }\n\n  /**\n   * Prevent submit on forms.\n   */\n  onSubmit({ event }: { event: SubmitEvent; target: FrameForm }) {\n    if (this.$el.target !== '_blank') {\n      event.preventDefault();\n      this.trigger();\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,4BAA4B;AAY9B,MAAM,kBAAmD,qBAE9D;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,MAAM,CAAC,WAAW;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,IAAI,OAAO,YAAY;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,MAAW;AACb,UAAM,MAAM,IAAI,IAAI,KAAK,IAAI,MAAM;AAEnC,QAAI,KAAK,WAAW,OAAO;AAEzB,UAAI,SAAS,IAAI,gBAAgB,IAAI,SAAS,KAAK,GAAG,CAAC,EAAE,SAAS;AAAA,IACpE;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,cAA2B;AAC7B,UAAM,cAAc,EAAE,GAAG,MAAM,YAAY;AAC3C,gBAAY,YAAY,CAAC;AAEzB,QAAI,KAAK,MAAM,SAAS;AACtB,iBAAW,UAAU,KAAK,MAAM,SAAS;AACvC,YAAI,OAAO,QAAQ,QAAQ,OAAO,OAAO;AACvC,sBAAY,QAAQ,OAAO,QAAQ,IAAI,IAAI,OAAO;AAAA,QACpD;AAAA,MACF;AAAA,IACF;AAEA,QAAI,KAAK,WAAW,QAAQ;AAC1B,kBAAY,SAAS,KAAK;AAC1B,kBAAY,OAAO,IAAI,SAAS,KAAK,GAAG;AAAA,IAC1C;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS,EAAE,MAAM,GAA8C;AAC7D,QAAI,KAAK,IAAI,WAAW,UAAU;AAChC,YAAM,eAAe;AACrB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AACF;",
   "names": []
 }

package/Frame/FrameLoader.d.ts

@@ -0,0 +1,22 @@
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import { Transition } from '../Transition/index.js';
+import type { TransitionProps } from '../decorators/withTransition.js';
+export interface FrameLoaderProps extends BaseProps {
+    $options: TransitionProps['$options'] & {
+        enterKeep: true;
+        leaveKeep: true;
+    };
+}
+/**
+ * Class.
+ */
+export declare class FrameLoader<T extends BaseProps = BaseProps> extends Transition<T & FrameLoaderProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+    get $options(): import("@studiometa/js-toolkit").BaseOptions & (T & FrameLoaderProps & TransitionProps)["$options"] & {
+        enterKeep: boolean;
+        leaveKeep: boolean;
+    };
+}

package/Frame/FrameLoader.js

@@ -0,0 +1,22 @@
+import { Transition } from "../Transition/index.js";
+class FrameLoader extends Transition {
+  /**
+   * Config.
+   */
+  static config = {
+    name: "FrameLoader"
+  };
+  // @ts-expect-error this is fine.
+  get $options() {
+    const options = super.$options;
+    return {
+      ...options,
+      enterKeep: true,
+      leaveKeep: true
+    };
+  }
+}
+export {
+  FrameLoader
+};
+//# sourceMappingURL=FrameLoader.js.map

package/Frame/FrameLoader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Frame/FrameLoader.ts"],
+  "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Transition } from '../Transition/index.js';\nimport type { TransitionProps } from '../decorators/withTransition.js';\n\nexport interface FrameLoaderProps extends BaseProps {\n  $options: TransitionProps['$options'] & {\n    enterKeep: true;\n    leaveKeep: true;\n  };\n}\n\n/**\n * Class.\n */\nexport class FrameLoader<T extends BaseProps = BaseProps> extends Transition<T & FrameLoaderProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameLoader',\n  };\n\n  // @ts-expect-error this is fine.\n  get $options() {\n    const options = super.$options;\n\n    return {\n      ...options,\n      enterKeep: true,\n      leaveKeep: true,\n    };\n  }\n}\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAapB,MAAM,oBAAqD,WAAiC;AAAA;AAAA;AAAA;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA,EAGA,IAAI,WAAW;AACb,UAAM,UAAU,MAAM;AAEtB,WAAO;AAAA,MACL,GAAG;AAAA,MACH,WAAW;AAAA,MACX,WAAW;AAAA,IACb;AAAA,EACF;AACF;",
+  "names": []
+}

package/Frame/FrameTarget.d.ts

@@ -3,8 +3,6 @@ import { Transition } from '../Transition/index.js';
 export interface FrameTargetProps extends BaseProps {
     $options: {
         mode: 'replace' | 'prepend' | 'append';
-        id: string;
-        leaveKeep: true;
     };
 }
 /**
@@ -16,28 +14,19 @@ export declare class FrameTarget<T extends BaseProps = BaseProps> extends Transi
      */
     static config: BaseConfig;
     /**
-     * Insert modes.
+     * Different mode of content insertion.
      */
-    static __INSERT_MODES: {
-        readonly prepend: "afterbegin";
-        readonly append: "beforeend";
+    modes: {
+        readonly APPEND: "append";
+        readonly PREPEND: "prepend";
+        readonly REPLACE: "replace";
     };
-    /**
-     * Override options.
-     */
-    get $options(): import("@studiometa/js-toolkit").BaseOptions & (T & FrameTargetProps & import("../index.js").TransitionProps)["$options"];
     /**
      * Get uniq ID.
      */
     get id(): string;
-    /**
-     * Enter transition.
-     */
-    enter(): Promise<void>;
     /**
      * Update the content from the new target.
-     * @param   {FrameTarget} newTarget The instance of the new target.
-     * @returns {void}
      */
-    updateContent(newTarget: FrameTarget): void;
+    updateContent(content?: Element): Promise<void>;
 }

package/Frame/FrameTarget.js

@@ -1,88 +1,53 @@
-import { addClass, transition } from "@studiometa/js-toolkit/utils";
 import { Transition } from "../Transition/index.js";
+import morphdom from "morphdom";
 class FrameTarget extends Transition {
   /**
    * Config.
    */
   static config = {
-    ...Transition.config,
     name: "FrameTarget",
-    log: true,
     options: {
-      ...Transition.config.options,
       mode: {
         type: String,
         default: "replace"
         // or 'prepend' or 'append'
-      },
-      id: String
+      }
     }
   };
   /**
-   * Insert modes.
+   * Different mode of content insertion.
    */
-  static __INSERT_MODES = {
-    prepend: "afterbegin",
-    append: "beforeend"
+  modes = {
+    APPEND: "append",
+    PREPEND: "prepend",
+    REPLACE: "replace"
   };
-  /**
-   * Override options.
-   */
-  // @ts-ignore
-  get $options() {
-    const options = super.$options;
-    options.leaveKeep = true;
-    return options;
-  }
   /**
    * Get uniq ID.
    */
   get id() {
-    return this.$options.id ?? this.$el.id;
-  }
-  /**
-   * Enter transition.
-   */
-  async enter() {
-    this.$log("enter");
-    const { enterFrom: from, enterActive: active, enterTo: to, leaveTo, enterKeep } = this.$options;
-    const transitionStyles = { from, active, to };
-    switch (this.$options.mode) {
-      case "append":
-      case "prepend":
-        await Promise.all(
-          Array.from(this.$el.children).filter(
-            (child) => from.split(" ").every((className) => child.classList.contains(className))
-          ).map(
-            (child) => transition(child, transitionStyles, enterKeep ? "keep" : void 0)
-          )
-        );
-        break;
-      case "replace":
-      default:
-        transitionStyles.from = Array.from(new Set([from, leaveTo].flat())).join(" ");
-        await transition(this.$el, transitionStyles, enterKeep ? "keep" : void 0);
-    }
+    return this.$el.id;
   }
   /**
    * Update the content from the new target.
-   * @param   {FrameTarget} newTarget The instance of the new target.
-   * @returns {void}
    */
-  updateContent(newTarget) {
-    switch (this.$options.mode) {
-      case "prepend":
-      case "append":
-        addClass(Array.from(newTarget.$el.children), this.$options.enterFrom.split(" "));
-        this.$el.insertAdjacentHTML(
-          FrameTarget.__INSERT_MODES[this.$options.mode],
-          newTarget.$el.innerHTML
-        );
-        break;
-      case "replace":
-      default:
-        this.$el.innerHTML = newTarget.$el.innerHTML;
-        break;
+  async updateContent(content = null) {
+    if (!content) {
+      return;
+    }
+    const { mode } = this.$options;
+    if (mode === this.modes.APPEND || mode === this.modes.PREPEND) {
+      const leaveTargets = Array.from(this.$el.children);
+      const enterTargets = Array.from(content.children);
+      this.$el[mode](...Array.from(content.childNodes));
+      await Promise.all([
+        this.leave(leaveTargets),
+        this.enter(enterTargets)
+      ]);
+    } else {
+      await this.leave();
+      morphdom(this.$el, content);
+      await this.enter();
     }
   }
 }

package/Frame/FrameTarget.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Frame/FrameTarget.ts"],
-  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { addClass, transition } from '@studiometa/js-toolkit/utils';\nimport { Transition } from '../Transition/index.js';\n\nexport interface FrameTargetProps extends BaseProps {\n  $options: {\n    mode: 'replace' | 'prepend' | 'append';\n    id: string;\n    leaveKeep: true;\n  };\n}\n\n/**\n * FrameTarget class.\n */\nexport class FrameTarget<T extends BaseProps = BaseProps> extends Transition<T & FrameTargetProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'FrameTarget',\n    log: true,\n    options: {\n      ...Transition.config.options,\n      mode: {\n        type: String,\n        default: 'replace', // or 'prepend' or 'append'\n      },\n      id: String,\n    },\n  };\n\n  /**\n   * Insert modes.\n   */\n  static __INSERT_MODES = {\n    prepend: 'afterbegin',\n    append: 'beforeend',\n  } as const;\n\n  /**\n   * Override options.\n   */\n  // @ts-ignore\n  get $options() {\n    const options = super.$options;\n\n    options.leaveKeep = true;\n\n    return options;\n  }\n\n  /**\n   * Get uniq ID.\n   */\n  get id(): string {\n    return this.$options.id ?? this.$el.id;\n  }\n\n  /**\n   * Enter transition.\n   */\n  async enter() {\n    this.$log('enter');\n\n    const { enterFrom: from, enterActive: active, enterTo: to, leaveTo, enterKeep } = this.$options;\n    const transitionStyles = { from, active, to };\n\n    switch (this.$options.mode) {\n      case 'append':\n      case 'prepend':\n        await Promise.all(\n          Array.from(this.$el.children)\n            .filter((child) =>\n              from.split(' ').every((className) => child.classList.contains(className)),\n            )\n            .map((child) =>\n              transition(child as HTMLElement, transitionStyles, enterKeep ? 'keep' : undefined),\n            ),\n        );\n        break;\n      case 'replace':\n      default:\n        transitionStyles.from = Array.from(new Set([from, leaveTo].flat())).join(' ');\n        await transition(this.$el, transitionStyles, enterKeep ? 'keep' : undefined);\n    }\n  }\n\n  /**\n   * Update the content from the new target.\n   * @param   {FrameTarget} newTarget The instance of the new target.\n   * @returns {void}\n   */\n  updateContent(newTarget: FrameTarget) {\n    // @todo manage 'prepend' and 'append' transition\n    // only the new content should have the transition\n    // - add the leaveTo and enterFrom classes to all `newTarget.children`\n    // - or wrap the new content in a custom div ?\n    switch (this.$options.mode) {\n      case 'prepend':\n      case 'append':\n        addClass(Array.from(newTarget.$el.children), this.$options.enterFrom.split(' '));\n        this.$el.insertAdjacentHTML(\n          FrameTarget.__INSERT_MODES[this.$options.mode],\n          newTarget.$el.innerHTML,\n        );\n        break;\n      case 'replace':\n      default:\n        this.$el.innerHTML = newTarget.$el.innerHTML;\n        break;\n    }\n  }\n}\n"],
-  "mappings": "AACA,SAAS,UAAU,kBAAkB;AACrC,SAAS,kBAAkB;AAapB,MAAM,oBAAqD,WAAiC;AAAA;AAAA;AAAA;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA;AAAA,MACX;AAAA,MACA,IAAI;AAAA,IACN;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,iBAAiB;AAAA,IACtB,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACb,UAAM,UAAU,MAAM;AAEtB,YAAQ,YAAY;AAEpB,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAa;AACf,WAAO,KAAK,SAAS,MAAM,KAAK,IAAI;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,QAAQ;AACZ,SAAK,KAAK,OAAO;AAEjB,UAAM,EAAE,WAAW,MAAM,aAAa,QAAQ,SAAS,IAAI,SAAS,UAAU,IAAI,KAAK;AACvF,UAAM,mBAAmB,EAAE,MAAM,QAAQ,GAAG;AAE5C,YAAQ,KAAK,SAAS,MAAM;AAAA,MAC1B,KAAK;AAAA,MACL,KAAK;AACH,cAAM,QAAQ;AAAA,UACZ,MAAM,KAAK,KAAK,IAAI,QAAQ,EACzB;AAAA,YAAO,CAAC,UACP,KAAK,MAAM,GAAG,EAAE,MAAM,CAAC,cAAc,MAAM,UAAU,SAAS,SAAS,CAAC;AAAA,UAC1E,EACC;AAAA,YAAI,CAAC,UACJ,WAAW,OAAsB,kBAAkB,YAAY,SAAS,MAAS;AAAA,UACnF;AAAA,QACJ;AACA;AAAA,MACF,KAAK;AAAA,MACL;AACE,yBAAiB,OAAO,MAAM,KAAK,IAAI,IAAI,CAAC,MAAM,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG;AAC5E,cAAM,WAAW,KAAK,KAAK,kBAAkB,YAAY,SAAS,MAAS;AAAA,IAC/E;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,cAAc,WAAwB;AAKpC,YAAQ,KAAK,SAAS,MAAM;AAAA,MAC1B,KAAK;AAAA,MACL,KAAK;AACH,iBAAS,MAAM,KAAK,UAAU,IAAI,QAAQ,GAAG,KAAK,SAAS,UAAU,MAAM,GAAG,CAAC;AAC/E,aAAK,IAAI;AAAA,UACP,YAAY,eAAe,KAAK,SAAS,IAAI;AAAA,UAC7C,UAAU,IAAI;AAAA,QAChB;AACA;AAAA,MACF,KAAK;AAAA,MACL;AACE,aAAK,IAAI,YAAY,UAAU,IAAI;AACnC;AAAA,IACJ;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../Transition/index.js';\nimport morphdom from 'morphdom';\n\nexport interface FrameTargetProps extends BaseProps {\n  $options: {\n    mode: 'replace' | 'prepend' | 'append';\n  };\n}\n\n/**\n * FrameTarget class.\n */\nexport class FrameTarget<T extends BaseProps = BaseProps> extends Transition<T & FrameTargetProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameTarget',\n    options: {\n      mode: {\n        type: String,\n        default: 'replace', // or 'prepend' or 'append'\n      },\n    },\n  };\n\n  /**\n   * Different mode of content insertion.\n   */\n  modes = {\n    APPEND: 'append',\n    PREPEND: 'prepend',\n    REPLACE: 'replace',\n  } as const;\n\n  /**\n   * Get uniq ID.\n   */\n  get id(): string {\n    return this.$el.id;\n  }\n\n  /**\n   * Update the content from the new target.\n   */\n  async updateContent(content: Element = null) {\n    if (!content) {\n      return;\n    }\n\n    const { mode } = this.$options;\n\n    // In append or prepend mode, the leave transition can be used to\n    // move the exisiting children of the root element, with the leave\n    // transition being applied in parallel of the enter transition.\n    if (mode === this.modes.APPEND || mode === this.modes.PREPEND) {\n      const leaveTargets = Array.from(this.$el.children) as HTMLElement[];\n      const enterTargets = Array.from(content.children) as HTMLElement[];\n\n      this.$el[mode](...Array.from(content.childNodes));\n\n      await Promise.all([\n        this.leave(leaveTargets),\n        this.enter(enterTargets),\n      ]);\n    } else {\n      await this.leave();\n      morphdom(this.$el, content);\n      await this.enter();\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,kBAAkB;AAC3B,OAAO,cAAc;AAWd,MAAM,oBAAqD,WAAiC;AAAA;AAAA;AAAA;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAa;AACf,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,cAAc,UAAmB,MAAM;AAC3C,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,UAAM,EAAE,KAAK,IAAI,KAAK;AAKtB,QAAI,SAAS,KAAK,MAAM,UAAU,SAAS,KAAK,MAAM,SAAS;AAC7D,YAAM,eAAe,MAAM,KAAK,KAAK,IAAI,QAAQ;AACjD,YAAM,eAAe,MAAM,KAAK,QAAQ,QAAQ;AAEhD,WAAK,IAAI,IAAI,EAAE,GAAG,MAAM,KAAK,QAAQ,UAAU,CAAC;AAEhD,YAAM,QAAQ,IAAI;AAAA,QAChB,KAAK,MAAM,YAAY;AAAA,QACvB,KAAK,MAAM,YAAY;AAAA,MACzB,CAAC;AAAA,IACH,OAAO;AACL,YAAM,KAAK,MAAM;AACjB,eAAS,KAAK,KAAK,OAAO;AAC1B,YAAM,KAAK,MAAM;AAAA,IACnB;AAAA,EACF;AACF;",
   "names": []
 }

package/Frame/FrameTriggerLoader.d.ts

@@ -0,0 +1,13 @@
+import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
+import { FrameLoader } from './FrameLoader.js';
+import type { FrameLoaderProps } from './FrameLoader.js';
+export type FrameTriggerLoaderProps = FrameLoaderProps;
+/**
+ * FrameTriggerLoader class.
+ */
+export declare class FrameTriggerLoader<T extends BaseProps = BaseProps> extends FrameLoader<T & FrameTriggerLoaderProps> {
+    /**
+     * Config.
+     */
+    static config: BaseConfig;
+}

package/Frame/FrameTriggerLoader.js

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

package/Frame/FrameTriggerLoader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Frame/FrameTriggerLoader.ts"],
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { FrameLoader } from './FrameLoader.js';\nimport type { FrameLoaderProps } from './FrameLoader.js';\n\nexport type FrameTriggerLoaderProps = FrameLoaderProps;\n\n/**\n * FrameTriggerLoader class.\n */\nexport class FrameTriggerLoader<T extends BaseProps = BaseProps> extends FrameLoader<\n  T & FrameTriggerLoaderProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameTriggerLoader',\n  }\n}\n"],
+  "mappings": "AACA,SAAS,mBAAmB;AAQrB,MAAM,2BAA4D,YAEvE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AACF;",
+  "names": []
+}

package/Frame/index.d.ts

@@ -1,4 +1,8 @@
 export * from './Frame.js';
 export * from './FrameAnchor.js';
 export * from './FrameForm.js';
+export * from './FrameLoader.js';
+export * from './FrameTriggerLoader.js';
 export * from './FrameTarget.js';
+export * from './AbstractFrameTrigger.js';
+export * from './types.js';

package/Frame/index.js

@@ -1,5 +1,9 @@
 export * from "./Frame.js";
 export * from "./FrameAnchor.js";
 export * from "./FrameForm.js";
+export * from "./FrameLoader.js";
+export * from "./FrameTriggerLoader.js";
 export * from "./FrameTarget.js";
+export * from "./AbstractFrameTrigger.js";
+export * from "./types.js";
 //# sourceMappingURL=index.js.map

package/Frame/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Frame/index.ts"],
-  "sourcesContent": ["export * from './Frame.js';\nexport * from './FrameAnchor.js';\nexport * from './FrameForm.js';\nexport * from './FrameTarget.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './Frame.js';\nexport * from './FrameAnchor.js';\nexport * from './FrameForm.js';\nexport * from './FrameLoader.js';\nexport * from './FrameTriggerLoader.js';\nexport * from './FrameTarget.js';\nexport * from './AbstractFrameTrigger.js';\nexport * from './types.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/Frame/types.d.ts

@@ -0,0 +1,12 @@
+import type { FrameAnchor } from './FrameAnchor.js';
+import type { FrameForm } from './FrameForm.js';
+export type FrameRequestInit = RequestInit & {
+    trigger?: FrameAnchor | FrameForm;
+};
+export type FrameTriggerEvent = CustomEvent<[URL, FrameRequestInit]>;
+export type FrameFetchEvent = CustomEvent<[URL, FrameRequestInit]>;
+export type FrameFetchBeforeEvent = FrameFetchEvent;
+export type FrameFetchAfterEvent = CustomEvent<[URL, FrameRequestInit, string | Error]>;
+export type FrameErrorEvent = CustomEvent<[URL, FrameRequestInit, Error]>;
+export type FrameContentEvent = CustomEvent<[URL, FrameRequestInit, string]>;
+export type FrameContentAfterEvent = CustomEvent<[URL, FrameRequestInit, string]>;

package/Frame/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/Frame/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/Frame/utils.d.ts

@@ -0,0 +1,9 @@
+export declare const EVENTS: {
+    FETCH_BEFORE: string;
+    FETCH: string;
+    FETCH_AFTER: string;
+    ERROR: string;
+    CONTENT: string;
+    CONTENT_AFTER: string;
+    TRIGGER: string;
+};

package/Frame/utils.js

@@ -0,0 +1,13 @@
+const EVENTS = {
+  FETCH_BEFORE: "frame-fetch-before",
+  FETCH: "frame-fetch",
+  FETCH_AFTER: "frame-fetch-after",
+  ERROR: "frame-error",
+  CONTENT: "frame-content",
+  CONTENT_AFTER: "frame-content-after",
+  TRIGGER: "frame-trigger"
+};
+export {
+  EVENTS
+};
+//# sourceMappingURL=utils.js.map

package/Frame/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Frame/utils.ts"],
+  "sourcesContent": ["export const EVENTS = {\n  FETCH_BEFORE: 'frame-fetch-before',\n  FETCH: 'frame-fetch',\n  FETCH_AFTER: 'frame-fetch-after',\n  ERROR: 'frame-error',\n  CONTENT: 'frame-content',\n  CONTENT_AFTER: 'frame-content-after',\n  TRIGGER: 'frame-trigger',\n};\n"],
+  "mappings": "AAAO,MAAM,SAAS;AAAA,EACpB,cAAc;AAAA,EACd,OAAO;AAAA,EACP,aAAa;AAAA,EACb,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,SAAS;AACX;",
+  "names": []
+}

package/README.md

@@ -4,10 +4,10 @@
 [![NPM Next Version](https://img.shields.io/npm/v/@studiometa/ui/next?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/ui/v/next)
 [![Downloads](https://img.shields.io/npm/dm/@studiometa/ui?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/ui/)
 [![Size](https://img.shields.io/bundlephobia/minzip/@studiometa/ui?style=flat&colorB=3e63dd&colorA=414853&label=size)](https://bundlephobia.com/package/@studiometa/ui)
-[![Dependency Status](https://img.shields.io/librariesio/release/npm/@studiometa/ui?style=flat&colorB=3e63dd&colorA=414853)](https://david-dm.org/studiometa/js-toolkit)
 ![Codecov](https://img.shields.io/codecov/c/github/studiometa/ui?style=flat&colorB=3e63dd&colorA=414853)
 
-> 📦 A set of opiniated, unstyled and accessible components based on [@studiometa/js-toolkit](https://github.com/studiometa/js-toolkit)
+> A set of JS and Twig components powered by [@studiometa/js-toolkit](https://github.com/studiometa/js-toolkit), [Tailwind CSS](https://tailwindcss.com/) and
+[studiometa/twig-toolkit](https://github.com/studiometa/twig-toolkit).
 
 ## Installation
 
@@ -17,7 +17,7 @@ Install the latest version via NPM:
 npm install @studiometa/ui
 ```
 
-If you need the Twig template as well, install the Twig extension via Composer and load it in your application:
+If you need the Twig templates as well, install the Twig extension via Composer and load it in your application:
 
 ```bash
 composer require studiometa/ui
@@ -29,18 +29,23 @@ Import the components from the package as needed:
 
 ```js
 import { Base, createApp } from '@studiometa/js-toolkit';
-import { Modal } from '@studiometa/ui';
+import { Action, Frame, Modal, ScrollAnimation, ScrollReveal, Slider } from '@studiometa/ui';
 
 class App extends Base {
   static config = {
     name: 'App',
     components: {
+      Action,
+      Frame,
       Modal,
-    }
-  }
+      ScrollAnimation,
+      ScrollReveal,
+      Slider,
+    },
+  };
 }
 
-export default createApp(App, document.body);
+export default createApp(App);
 ```
 
 Heads up to [ui.studiometa.dev](https://ui.studiometa.dev) for more informations.

package/Slider/AbstractSliderChild.d.ts

@@ -1,13 +1,13 @@
 import { Base } from '@studiometa/js-toolkit';
-import type { BaseProps, BaseConfig, BaseInterface } from '@studiometa/js-toolkit';
-import { Slider } from './Slider.js';
+import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';
+import type { Slider } from './Slider.js';
 export interface AbstractSliderChildProps extends BaseProps {
     $parent: Slider;
 }
 /**
  * AbstractSliderChild class.
  */
-export declare class AbstractSliderChild<T extends BaseProps = BaseProps> extends Base<T & AbstractSliderChildProps> implements BaseInterface {
+export declare class AbstractSliderChild<T extends BaseProps = BaseProps> extends Base<T & AbstractSliderChildProps> {
     /**
      * Config.
      */
@@ -26,14 +26,10 @@ export declare class AbstractSliderChild<T extends BaseProps = BaseProps> extend
     destroyed(): void;
     /**
      * Dispatch event.
-     * @param   {CustomEvent} event
-     * @returns {void}
      */
-    handleEvent(event: any): void;
+    handleEvent(event: CustomEvent): void;
     /**
      * Update the child component with the given index.
-     * @param   {number} index The new active index.
-     * @returns {void|(()=>void)}
      */
-    update(index: any): void | (() => void);
+    update(index: number): void | (() => void);
 }