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

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/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);
 }

package/Slider/AbstractSliderChild.js

@@ -1,6 +1,5 @@
 import { Base } from "@studiometa/js-toolkit";
 import { nextFrame, domScheduler, isFunction } from "@studiometa/js-toolkit/utils";
-import { Slider } from "./Slider.js";
 class AbstractSliderChild extends Base {
   /**
    * Config.
@@ -12,11 +11,6 @@ class AbstractSliderChild extends Base {
    * Listen to the `goto` event of the parent on mount.
    */
   mounted() {
-    if (!(this.$parent instanceof Slider)) {
-      throw new Error(
-        `The \`${this.$options.name}\` component must be a direct child of a \`Slider\` component.`
-      );
-    }
     this.$parent.$on("index", this);
   }
   /**
@@ -35,8 +29,6 @@ class AbstractSliderChild extends Base {
   }
   /**
    * Dispatch event.
-   * @param   {CustomEvent} event
-   * @returns {void}
    */
   handleEvent(event) {
     if (event.type === "index") {
@@ -50,11 +42,8 @@ class AbstractSliderChild extends Base {
       });
     }
   }
-  // eslint-disable-next-line jsdoc/require-returns-check
   /**
    * Update the child component with the given index.
-   * @param   {number} index The new active index.
-   * @returns {void|(()=>void)}
    */
   update(index) {
     throw new Error(`The \`AbstractSliderChild.update(${index})\` method must be implemented.`);

package/Slider/AbstractSliderChild.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/ui/Slider/AbstractSliderChild.ts"],
-  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, BaseInterface } from '@studiometa/js-toolkit';\nimport { nextFrame, domScheduler, isFunction } from '@studiometa/js-toolkit/utils';\nimport { Slider } from './Slider.js';\n\nexport interface AbstractSliderChildProps extends BaseProps {\n  $parent: Slider;\n}\n\n/**\n * AbstractSliderChild class.\n */\nexport class AbstractSliderChild<T extends BaseProps = BaseProps>\n  extends Base<T & AbstractSliderChildProps>\n  implements BaseInterface\n{\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AbstractSliderChild',\n  };\n\n  /**\n   * Listen to the `goto` event of the parent on mount.\n   */\n  mounted() {\n    if (!(this.$parent instanceof Slider)) {\n      throw new Error(\n        `The \\`${this.$options.name}\\` component must be a direct child of a \\`Slider\\` component.`,\n      );\n    }\n\n    this.$parent.$on('index', this);\n  }\n\n  /**\n   * Trigger update on resize.\n   */\n  resized() {\n    nextFrame(() => {\n      this.update(this.$parent.currentIndex);\n    });\n  }\n\n  /**\n   * Remove the event listener.\n   */\n  destroyed() {\n    this.$parent.$off('index', this);\n  }\n\n  /**\n   * Dispatch event.\n   * @param   {CustomEvent} event\n   * @returns {void}\n   */\n  handleEvent(event) {\n    if (event.type === 'index') {\n      domScheduler.read(() => {\n        const callback = this.update(event.detail[0]);\n        if (isFunction(callback)) {\n          domScheduler.write(() => {\n            // @ts-ignore\n            callback();\n          });\n        }\n      });\n    }\n  }\n\n  // eslint-disable-next-line jsdoc/require-returns-check\n  /**\n   * Update the child component with the given index.\n   * @param   {number} index The new active index.\n   * @returns {void|(()=>void)}\n   */\n  update(index): void | (() => void) {\n    throw new Error(`The \\`AbstractSliderChild.update(${index})\\` method must be implemented.`);\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,WAAW,cAAc,kBAAkB;AACpD,SAAS,cAAc;AAShB,MAAM,4BACH,KAEV;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,EAAE,KAAK,mBAAmB,SAAS;AACrC,YAAM,IAAI;AAAA,QACR,SAAS,KAAK,SAAS,IAAI;AAAA,MAC7B;AAAA,IACF;AAEA,SAAK,QAAQ,IAAI,SAAS,IAAI;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,cAAU,MAAM;AACd,WAAK,OAAO,KAAK,QAAQ,YAAY;AAAA,IACvC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,QAAQ,KAAK,SAAS,IAAI;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,OAAO;AACjB,QAAI,MAAM,SAAS,SAAS;AAC1B,mBAAa,KAAK,MAAM;AACtB,cAAM,WAAW,KAAK,OAAO,MAAM,OAAO,CAAC,CAAC;AAC5C,YAAI,WAAW,QAAQ,GAAG;AACxB,uBAAa,MAAM,MAAM;AAEvB,qBAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAO,OAA4B;AACjC,UAAM,IAAI,MAAM,oCAAoC,KAAK,iCAAiC;AAAA,EAC5F;AACF;",
+  "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { nextFrame, domScheduler, isFunction } from '@studiometa/js-toolkit/utils';\nimport type { Slider } from './Slider.js';\n\nexport interface AbstractSliderChildProps extends BaseProps {\n  $parent: Slider;\n}\n\n/**\n * AbstractSliderChild class.\n */\nexport class AbstractSliderChild<T extends BaseProps = BaseProps> extends Base<\n  T & AbstractSliderChildProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AbstractSliderChild',\n  };\n\n  /**\n   * Listen to the `goto` event of the parent on mount.\n   */\n  mounted() {\n    this.$parent.$on('index', this);\n  }\n\n  /**\n   * Trigger update on resize.\n   */\n  resized() {\n    nextFrame(() => {\n      this.update(this.$parent.currentIndex);\n    });\n  }\n\n  /**\n   * Remove the event listener.\n   */\n  destroyed() {\n    this.$parent.$off('index', this);\n  }\n\n  /**\n   * Dispatch event.\n   */\n  handleEvent(event: CustomEvent) {\n    if (event.type === 'index') {\n      domScheduler.read(() => {\n        const callback = this.update(event.detail[0]);\n        if (isFunction(callback)) {\n          domScheduler.write(() => {\n            // @ts-ignore\n            callback();\n          });\n        }\n      });\n    }\n  }\n\n  /**\n   * Update the child component with the given index.\n   */\n  update(index: number): void | (() => void) {\n    throw new Error(`The \\`AbstractSliderChild.update(${index})\\` method must be implemented.`);\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AAErB,SAAS,WAAW,cAAc,kBAAkB;AAU7C,MAAM,4BAA6D,KAExE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,QAAQ,IAAI,SAAS,IAAI;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,cAAU,MAAM;AACd,WAAK,OAAO,KAAK,QAAQ,YAAY;AAAA,IACvC,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACV,SAAK,QAAQ,KAAK,SAAS,IAAI;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,OAAoB;AAC9B,QAAI,MAAM,SAAS,SAAS;AAC1B,mBAAa,KAAK,MAAM;AACtB,cAAM,WAAW,KAAK,OAAO,MAAM,OAAO,CAAC,CAAC;AAC5C,YAAI,WAAW,QAAQ,GAAG;AACxB,uBAAa,MAAM,MAAM;AAEvB,qBAAS;AAAA,UACX,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,OAAoC;AACzC,UAAM,IAAI,MAAM,oCAAoC,KAAK,iCAAiC;AAAA,EAC5F;AACF;",
   "names": []
 }

package/Slider/Slider.d.ts

@@ -23,7 +23,8 @@ export interface SliderProps extends BaseProps {
     };
 }
 /**
- * Orchestrate the slider items state transition.
+ * Slider class.
+ * @see https://ui.studiometa.dev/-/components/Slider/
  * @todo a11y
  */
 export declare class Slider<T extends BaseProps = BaseProps> extends Base<T & SliderProps> {
@@ -31,21 +32,26 @@ export declare class Slider<T extends BaseProps = BaseProps> extends Base<T & Sl
      * Config.
      */
     static config: BaseConfig;
+    /**
+     * Distance on the x axis.
+     * @private
+     */
     __distanceX: number;
+    /**
+     * Initial x position.
+     * @private
+     */
     __initialX: number;
     /**
      * Index of the current active slide.
+     * @private
      */
     __currentIndex: number;
-    __isDragging: boolean;
     /**
-     * Get the current index.
+     * Drag state.
+     * @private
      */
-    get currentIndex(): number;
-    /**
-     * Set the current index and emit the `index` event.
-     */
-    set currentIndex(value: number);
+    __isDragging: boolean;
     /**
      * Store all the states.
      */
@@ -56,9 +62,16 @@ export declare class Slider<T extends BaseProps = BaseProps> extends Base<T & Sl
     origins: Record<SliderModes, number>;
     /**
      * Wether or not the wrapper is focused.
-     * @type {boolean}
      */
     hasFocus: boolean;
+    /**
+     * Get the current index.
+     */
+    get currentIndex(): number;
+    /**
+     * Set the current index and emit the `index` event.
+     */
+    set currentIndex(value: number);
     /**
      * Get the current state.
      */
@@ -122,9 +135,7 @@ export declare class Slider<T extends BaseProps = BaseProps> extends Base<T & Sl
     /**
      * Go to the given index.
      */
-    goTo(index: number, { withInstantMove }?: {
-        withInstantMove?: boolean;
-    }): void;
+    goTo(index: number): void;
     /**
      * Listen to the Draggable `start` event.
      */
@@ -153,23 +164,5 @@ export declare class Slider<T extends BaseProps = BaseProps> extends Base<T & Sl
      * Go prev or next when focus is on the wrapper and pressing arrow keys.
      */
     keyed({ LEFT, RIGHT, isDown }: KeyServiceProps): void;
-    /**
-     * Prepare invisible items.
-     */
-    prepareInvisibleItems(): void;
-    /**
-     * Get the state where the given item will be visible.
-     */
-    getStateWhereItemWillBeInvisible(item: SliderItem, { reversed }?: {
-        reversed?: boolean;
-    }): SliderState;
-    /**
-     * Get the visible slides for the given position.
-     */
-    getVisibleItems(target: number): SliderItem<BaseProps>[];
-    /**
-     * Get the invisible slides for the given position.
-     */
-    getInvisibleItems(target: number): SliderItem<BaseProps>[];
 }
 export {};