@studiometa/js-toolkit 2.4.4-alpha.1 → 2.4.4-alpha.4

package/Base/types.d.ts

@@ -0,0 +1,43 @@
+import { KeyServiceProps, LoadServiceProps, PointerServiceProps, RafServiceProps, ResizeServiceProps, ScrollServiceProps } from '../services/index.js';
+export interface BaseInterface {
+    /**
+     * Mounted hook.
+     */
+    mounted?(): void;
+    /**
+     * Updated hook.
+     */
+    updated?(): void;
+    /**
+     * Destroyed hook.
+     */
+    destroyed?(): void;
+    /**
+     * Terminated hook.
+     */
+    terminated?(): void;
+    /**
+     * Key service, executed when a keyboard key is pressed or released.
+     */
+    keyed?(props: KeyServiceProps): void;
+    /**
+     * Load service, executed when the window `load` event is fired.
+     */
+    loaded?(props: LoadServiceProps): void;
+    /**
+     * Pointer service, executed when the pointer is moving, pressed or released.
+     */
+    moved?(props: PointerServiceProps): void;
+    /**
+     * Raf service, executed on each rendered frame.
+     */
+    ticked?(props: RafServiceProps): void;
+    /**
+     * Resize service, executed when the window is resized.
+     */
+    resized?(props: ResizeServiceProps): void;
+    /**
+     * Scroll service, executed when the document is scrolled.
+     */
+    scrolled?(props: ScrollServiceProps): void;
+}

package/Base/utils.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/js-toolkit/Base/utils.js
+// packages/js-toolkit/Base/utils.ts
 var utils_exports = {};
 __export(utils_exports, {
   eventIsDefinedInConfig: () => eventIsDefinedInConfig,

package/Base/utils.d.ts

@@ -1,6 +1,4 @@
-/**
- * @typedef {import('./index.js').default} Base
- */
+import type { Base, BaseConfig } from './index.js';
 /**
  * Get a list of elements based on the name of a component.
  *
@@ -11,30 +9,16 @@
  * @returns {Array<HTMLElement>}
  *   A list of elements on which the component should be mounted.
  */
-export function getComponentElements(nameOrSelector: string, element?: HTMLElement | Document): Array<HTMLElement>;
+export declare function getComponentElements(nameOrSelector: string, element?: HTMLElement | Document): HTMLElement[];
 /**
  * Test if an event is defined in the given config.
- *
- * @param   {string} event
- * @param   {import('./index.js').BaseConfig} config
- * @returns {boolean}
  */
-export function eventIsDefinedInConfig(event: string, config: import('./index.js').BaseConfig): boolean;
+export declare function eventIsDefinedInConfig(event: string, config: BaseConfig): boolean;
 /**
  * Test if an event can be used on the given element.
- *
- * @param   {string} event
- * @param   {HTMLElement} element
- * @returns {boolean}
  */
-export function eventIsNative(event: string, element: HTMLElement): boolean;
+export declare function eventIsNative(event: string, element: HTMLElement): boolean;
 /**
  * Get the target of a given event.
- *
- * @param   {Base} instance
- * @param   {string} event
- * @param   {import('./index.js').BaseConfig} config
- * @returns {Base|Base['$el']}
  */
-export function getEventTarget(instance: Base, event: string, config: import('./index.js').BaseConfig): Base | Base['$el'];
-export type Base = import('./index.js').default;
+export declare function getEventTarget(instance: Base, event: string, config: BaseConfig): Base | Base['$el'];

package/decorators/index.cjs

@@ -34,6 +34,7 @@ __export(decorators_exports, {
   withMountWhenInView: () => import_withMountWhenInView.default,
   withResponsiveOptions: () => import_withResponsiveOptions.default,
   withScrolledInView: () => import_withScrolledInView.default,
+  withType: () => import_withType.default,
   withVue2: () => import_withVue2.default
 });
 module.exports = __toCommonJS(decorators_exports);
@@ -46,5 +47,6 @@ var import_withIntersectionObserver = __toESM(require("./withIntersectionObserve
 var import_withMountWhenInView = __toESM(require("./withMountWhenInView.cjs"), 1);
 var import_withResponsiveOptions = __toESM(require("./withResponsiveOptions.cjs"), 1);
 var import_withScrolledInView = __toESM(require("./withScrolledInView.cjs"), 1);
+var import_withType = __toESM(require("./withType.cjs"), 1);
 var import_withVue2 = __toESM(require("./withVue2.cjs"), 1);
 if (module.exports.default) module.exports = module.exports.default;

package/decorators/index.d.ts

@@ -7,4 +7,5 @@ export { default as withIntersectionObserver } from './withIntersectionObserver.
 export { default as withMountWhenInView } from './withMountWhenInView.js';
 export { default as withResponsiveOptions } from './withResponsiveOptions.js';
 export { default as withScrolledInView } from './withScrolledInView.js';
+export { default as withType } from './withType.js';
 export { default as withVue2 } from './withVue2.js';

package/decorators/index.js

@@ -7,7 +7,8 @@ import { default as default7 } from "./withIntersectionObserver.js";
 import { default as default8 } from "./withMountWhenInView.js";
 import { default as default9 } from "./withResponsiveOptions.js";
 import { default as default10 } from "./withScrolledInView.js";
-import { default as default11 } from "./withVue2.js";
+import { default as default11 } from "./withType.js";
+import { default as default12 } from "./withVue2.js";
 export {
   default2 as withBreakpointManager,
   default3 as withBreakpointObserver,
@@ -18,5 +19,6 @@ export {
   default8 as withMountWhenInView,
   default9 as withResponsiveOptions,
   default10 as withScrolledInView,
-  default11 as withVue2
+  default11 as withType,
+  default12 as withVue2
 };

package/decorators/withBreakpointManager.cjs

@@ -68,7 +68,7 @@ function withBreakpointManager(BaseClass, breakpoints) {
     }
     return BaseClass;
   }
-  return class WithBreakpointManager extends BaseClass {
+  class WithBreakpointManager extends BaseClass {
     constructor(element) {
       super(element);
       if (!instances.has(this)) {
@@ -91,6 +91,7 @@ function withBreakpointManager(BaseClass, breakpoints) {
       }
       return super.$destroy();
     }
-  };
+  }
+  return WithBreakpointManager;
 }
 if (module.exports.default) module.exports = module.exports.default;

package/decorators/withBreakpointManager.d.ts

@@ -1,87 +1,5 @@
-import type Base from '../Base/index.js';
-import type { BaseConstructor, BaseTypeParameter } from '../Base/index.js';
+import type { Base, BaseConstructor, BaseTypeParameter } from '../Base/index.js';
 /**
  * BreakpointManager class.
  */
-export default function withBreakpointManager<T extends BaseTypeParameter = BaseTypeParameter>(BaseClass: BaseConstructor, breakpoints: Array<[string, BaseConstructor]>): typeof Base | {
-    new <U extends BaseTypeParameter = BaseTypeParameter>(element: any): {
-        /**
-         * Override the default $mount method to prevent component's from being
-         * mounted when they should not.
-         *
-         * @returns {this}
-         */
-        $mount(): any;
-        /**
-         * Destroy all instances when the main one is destroyed.
-         *
-         * @returns {this}
-         */
-        $destroy(): any;
-        $parent: Base<{
-            $el: HTMLElement;
-            $options: import("../Base/index.js").BaseOptions;
-            $refs: import("../Base/index.js").BaseRefs;
-            $children: {
-                [name: string]: Base<any> | Promise<Base<any>>;
-            };
-        }>;
-        $id: string;
-        $el: (T & U)["$el"] & HTMLElement & {
-            __base__?: WeakMap<typeof Base, Base<{
-                $el: HTMLElement;
-                $options: import("../Base/index.js").BaseOptions;
-                $refs: import("../Base/index.js").BaseRefs;
-                $children: {
-                    [name: string]: Base<any> | Promise<Base<any>>;
-                };
-            }> | "terminated">;
-        };
-        $isMounted: boolean;
-        __eventHandlers: Map<string, Set<EventListenerOrEventListenerObject>>;
-        readonly $root: Base<{
-            $el: HTMLElement;
-            $options: import("../Base/index.js").BaseOptions;
-            $refs: import("../Base/index.js").BaseRefs;
-            $children: {
-                [name: string]: Base<any> | Promise<Base<any>>;
-            };
-        }>;
-        readonly __config: import("../Base/index.js").BaseConfig;
-        __services: import("../Base/managers/ServicesManager.js").default;
-        readonly $services: import("../Base/managers/ServicesManager.js").default;
-        __refs: import("../Base/managers/RefsManager.js").default & (T & U)["$refs"] & import("../Base/index.js").BaseRefs;
-        readonly $refs: import("../Base/managers/RefsManager.js").default & (T & U)["$refs"] & import("../Base/index.js").BaseRefs;
-        __options: import("../Base/managers/OptionsManager.js").default & (T & U)["$options"] & import("../Base/index.js").BaseOptions;
-        readonly $options: import("../Base/managers/OptionsManager.js").default & (T & U)["$options"] & import("../Base/index.js").BaseOptions;
-        __children: import("../Base/managers/ChildrenManager.js").default & ((T & U)["$children"] extends infer T_1 ? { [key in keyof T_1]: (T & U)["$children"][key][]; } : never) & import("../Base/index.js").BaseChildren;
-        readonly $children: import("../Base/managers/ChildrenManager.js").default & ((T & U)["$children"] extends infer T_2 ? { [key_1 in keyof T_2]: (T & U)["$children"][key_1][]; } : never) & import("../Base/index.js").BaseChildren;
-        __events: import("../Base/managers/EventsManager.js").default;
-        readonly $log: (...args: any) => void;
-        readonly __debug: (...args: any) => void;
-        readonly __managers: import("../Base/index.js").Managers;
-        __callMethod(method: string, ...args: any[]): any;
-        __hasEvent(event: string): boolean;
-        $update(): any;
-        $terminate(): void;
-        __addEmits(event: string): void;
-        __removeEmits(event: string): void;
-        readonly __ctor: typeof Base;
-        $on(event: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): () => void;
-        $off(event: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-        $emit(event: string, ...args: any[]): void;
-        addEventListener(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        dispatchEvent(event: Event): boolean;
-        removeEventListener(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    };
-    readonly $isBase: boolean;
-    config: import("../Base/index.js").BaseConfig;
-    $factory(nameOrSelector: string): Base<{
-        $el: HTMLElement;
-        $options: import("../Base/index.js").BaseOptions;
-        $refs: import("../Base/index.js").BaseRefs;
-        $children: {
-            [name: string]: Base<any> | Promise<Base<any>>;
-        };
-    }>[];
-};
+export default function withBreakpointManager<S extends BaseConstructor<Base>, T extends BaseTypeParameter = BaseTypeParameter>(BaseClass: S, breakpoints: Array<[string, BaseConstructor<Base>]>): S;

package/decorators/withBreakpointManager.js

@@ -38,7 +38,7 @@ function withBreakpointManager(BaseClass, breakpoints) {
     }
     return BaseClass;
   }
-  return class WithBreakpointManager extends BaseClass {
+  class WithBreakpointManager extends BaseClass {
     constructor(element) {
       super(element);
       if (!instances.has(this)) {
@@ -61,7 +61,8 @@ function withBreakpointManager(BaseClass, breakpoints) {
       }
       return super.$destroy();
     }
-  };
+  }
+  return WithBreakpointManager;
 }
 export {
   withBreakpointManager as default

package/decorators/withBreakpointObserver.cjs

@@ -73,8 +73,8 @@ function addToResize(key, instance) {
   }
 }
 function withBreakpointObserver(BaseClass) {
-  var _a, _b;
-  return _b = class extends BaseClass {
+  var _a;
+  class WithBreakpointObserver extends BaseClass {
     constructor(element) {
       super(element);
       const { remove, props } = (0, import_resize.default)();
@@ -114,7 +114,8 @@ function withBreakpointObserver(BaseClass) {
       }
       return this;
     }
-  }, __publicField(_b, "config", {
+  }
+  __publicField(WithBreakpointObserver, "config", {
     ...BaseClass.config,
     name: `${BaseClass.config.name}WithBreakpointObserver`,
     options: {
@@ -122,6 +123,7 @@ function withBreakpointObserver(BaseClass) {
       activeBreakpoints: String,
       inactiveBreakpoints: String
     }
-  }), _b;
+  });
+  return WithBreakpointObserver;
 }
 if (module.exports.default) module.exports = module.exports.default;

package/decorators/withBreakpointObserver.d.ts

@@ -1,10 +1,61 @@
-import type Base from '../Base/index.js';
-import type { BaseConstructor, BaseTypeParameter } from '../Base/index.js';
+import type { Base, BaseConstructor, BaseTypeParameter } from '../Base/index.js';
+interface WithBreakpointObserverInterface {
+    $options: {
+        activeBreakpoints?: string;
+        inactiveBreakpoints?: string;
+    };
+}
 /**
  * BreakpointObserver class.
  */
-export default function withBreakpointObserver<T extends BaseTypeParameter = BaseTypeParameter>(BaseClass: BaseConstructor): {
-    new <U extends BaseTypeParameter = BaseTypeParameter>(element: any): {
+export default function withBreakpointObserver<S extends BaseConstructor<Base>, T extends BaseTypeParameter = BaseTypeParameter>(BaseClass: S): {
+    new (...args: any[]): {
+        /**
+         * Override the default $mount method to prevent component's from being
+         * mounted when they should not.
+         *
+         * @returns {this}
+         */
+        $mount(): any;
+        $parent: Base<BaseTypeParameter>;
+        $id: string;
+        $el: HTMLElement & {
+            __base__?: WeakMap<BaseConstructor<Base<BaseTypeParameter>>, Base<BaseTypeParameter> | "terminated">;
+        };
+        $isMounted: boolean;
+        __eventHandlers: Map<string, Set<EventListenerOrEventListenerObject>>;
+        readonly $root: Base<BaseTypeParameter>;
+        readonly __config: import("../Base/index.js").BaseConfig;
+        __services: import("../Base/managers/ServicesManager.js").default;
+        readonly $services: import("../Base/managers/ServicesManager.js").default;
+        __refs: import("../Base/managers/RefsManager.js").default & import("../Base/index.js").BaseRefs;
+        readonly $refs: import("../Base/managers/RefsManager.js").default & import("../Base/index.js").BaseRefs;
+        __options: import("../Base/managers/OptionsManager.js").default & import("../Base/index.js").BaseOptions;
+        readonly $options: import("../Base/managers/OptionsManager.js").default & import("../Base/index.js").BaseOptions;
+        __children: import("../Base/managers/ChildrenManager.js").default & import("../Base/index.js").BaseChildren;
+        readonly $children: import("../Base/managers/ChildrenManager.js").default & import("../Base/index.js").BaseChildren;
+        __events: import("../Base/managers/EventsManager.js").default;
+        readonly $log: (...args: unknown[]) => void;
+        readonly __debug: (...args: unknown[]) => void;
+        readonly __managers: import("../Base/index.js").Managers;
+        __callMethod(method: string, ...args: unknown[]): unknown;
+        __hasEvent(event: string): boolean;
+        $update(): any;
+        $destroy(): any;
+        $terminate(): void;
+        __addEmits(event: string): void;
+        __removeEmits(event: string): void;
+        readonly __ctor: BaseConstructor<Base<BaseTypeParameter>>;
+        $on(event: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): () => void;
+        $off(event: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+        $emit(event: string, ...args: unknown[]): void;
+        addEventListener(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        dispatchEvent(event: Event): boolean;
+        removeEventListener(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    };
+    prototype: Base<BaseTypeParameter>;
+} & Pick<typeof Base, "prototype" | "$isBase" | "config" | "$factory"> & Pick<{
+    new (element: any): {
         /**
          * Override the default $mount method to prevent component's from being
          * mounted when they should not.
@@ -12,59 +63,38 @@ export default function withBreakpointObserver<T extends BaseTypeParameter = Bas
          * @returns {this}
          */
         $mount(): any;
-        $parent: Base<{
-            $el: HTMLElement;
-            $options: import("../Base/index.js").BaseOptions;
-            $refs: import("../Base/index.js").BaseRefs;
-            $children: {
-                [name: string]: Base<any> | Promise<Base<any>>;
-            };
-        }>;
+        $parent: Base<BaseTypeParameter>;
         $id: string;
-        $el: (T & U)["$el"] & HTMLElement & {
-            __base__?: WeakMap<typeof Base, Base<{
-                $el: HTMLElement;
-                $options: import("../Base/index.js").BaseOptions;
-                $refs: import("../Base/index.js").BaseRefs;
-                $children: {
-                    [name: string]: Base<any> | Promise<Base<any>>;
-                };
-            }> | "terminated">;
+        $el: HTMLElement & {
+            __base__?: WeakMap<BaseConstructor<Base<BaseTypeParameter>>, Base<BaseTypeParameter> | "terminated">;
         };
         $isMounted: boolean;
         __eventHandlers: Map<string, Set<EventListenerOrEventListenerObject>>;
-        readonly $root: Base<{
-            $el: HTMLElement;
-            $options: import("../Base/index.js").BaseOptions;
-            $refs: import("../Base/index.js").BaseRefs;
-            $children: {
-                [name: string]: Base<any> | Promise<Base<any>>;
-            };
-        }>;
+        readonly $root: Base<BaseTypeParameter>;
         readonly __config: import("../Base/index.js").BaseConfig;
         __services: import("../Base/managers/ServicesManager.js").default;
         readonly $services: import("../Base/managers/ServicesManager.js").default;
-        __refs: import("../Base/managers/RefsManager.js").default & (T & U)["$refs"] & import("../Base/index.js").BaseRefs;
-        readonly $refs: import("../Base/managers/RefsManager.js").default & (T & U)["$refs"] & import("../Base/index.js").BaseRefs;
-        __options: import("../Base/managers/OptionsManager.js").default & (T & U)["$options"] & import("../Base/index.js").BaseOptions;
-        readonly $options: import("../Base/managers/OptionsManager.js").default & (T & U)["$options"] & import("../Base/index.js").BaseOptions;
-        __children: import("../Base/managers/ChildrenManager.js").default & ((T & U)["$children"] extends infer T_1 ? { [key in keyof T_1]: (T & U)["$children"][key][]; } : never) & import("../Base/index.js").BaseChildren;
-        readonly $children: import("../Base/managers/ChildrenManager.js").default & ((T & U)["$children"] extends infer T_2 ? { [key_1 in keyof T_2]: (T & U)["$children"][key_1][]; } : never) & import("../Base/index.js").BaseChildren;
+        __refs: import("../Base/managers/RefsManager.js").default & import("../Base/index.js").BaseRefs;
+        readonly $refs: import("../Base/managers/RefsManager.js").default & import("../Base/index.js").BaseRefs;
+        __options: import("../Base/managers/OptionsManager.js").default & import("../Base/index.js").BaseOptions;
+        readonly $options: import("../Base/managers/OptionsManager.js").default & import("../Base/index.js").BaseOptions;
+        __children: import("../Base/managers/ChildrenManager.js").default & import("../Base/index.js").BaseChildren;
+        readonly $children: import("../Base/managers/ChildrenManager.js").default & import("../Base/index.js").BaseChildren;
         __events: import("../Base/managers/EventsManager.js").default;
-        readonly $log: (...args: any) => void;
-        readonly __debug: (...args: any) => void;
+        readonly $log: (...args: unknown[]) => void;
+        readonly __debug: (...args: unknown[]) => void;
         readonly __managers: import("../Base/index.js").Managers;
-        __callMethod(method: string, ...args: any[]): any;
+        __callMethod(method: string, ...args: unknown[]): unknown;
         __hasEvent(event: string): boolean;
         $update(): any;
         $destroy(): any;
         $terminate(): void;
         __addEmits(event: string): void;
         __removeEmits(event: string): void;
-        readonly __ctor: typeof Base;
+        readonly __ctor: BaseConstructor<Base<BaseTypeParameter>>;
         $on(event: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): () => void;
         $off(event: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-        $emit(event: string, ...args: any[]): void;
+        $emit(event: string, ...args: unknown[]): void;
         addEventListener(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
         dispatchEvent(event: Event): boolean;
         removeEventListener(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
@@ -81,13 +111,10 @@ export default function withBreakpointObserver<T extends BaseTypeParameter = Bas
         emits?: string[];
         components?: import("../Base/index.js").BaseConfigComponents;
     };
-    readonly $isBase: boolean;
-    $factory(nameOrSelector: string): Base<{
-        $el: HTMLElement;
-        $options: import("../Base/index.js").BaseOptions;
-        $refs: import("../Base/index.js").BaseRefs;
-        $children: {
-            [name: string]: Base<any> | Promise<Base<any>>;
-        };
-    }>[];
+    readonly $isBase: true;
+    $factory: typeof Base.$factory;
+} & S, "prototype" | "$isBase" | "config" | "$factory" | keyof S> & S & {
+    new (...args: any[]): Base<T & WithBreakpointObserverInterface>;
+    prototype: Base<BaseTypeParameter>;
 };
+export {};

package/decorators/withBreakpointObserver.js

@@ -44,8 +44,8 @@ function addToResize(key, instance) {
   }
 }
 function withBreakpointObserver(BaseClass) {
-  var _a, _b;
-  return _b = class extends BaseClass {
+  var _a;
+  class WithBreakpointObserver extends BaseClass {
     constructor(element) {
       super(element);
       const { remove, props } = useResize();
@@ -85,7 +85,8 @@ function withBreakpointObserver(BaseClass) {
       }
       return this;
     }
-  }, __publicField(_b, "config", {
+  }
+  __publicField(WithBreakpointObserver, "config", {
     ...BaseClass.config,
     name: `${BaseClass.config.name}WithBreakpointObserver`,
     options: {
@@ -93,7 +94,8 @@ function withBreakpointObserver(BaseClass) {
       activeBreakpoints: String,
       inactiveBreakpoints: String
     }
-  }), _b;
+  });
+  return WithBreakpointObserver;
 }
 export {
   withBreakpointObserver as default

package/decorators/withDrag.cjs

@@ -35,8 +35,7 @@ __export(withDrag_exports, {
 module.exports = __toCommonJS(withDrag_exports);
 var import_drag = __toESM(require("../services/drag.cjs"), 1);
 function withDrag(BaseClass, { target = (instance) => instance.$el, ...options } = {}) {
-  var _a;
-  return _a = class extends BaseClass {
+  class WithDrag extends BaseClass {
     constructor(el) {
       super(el);
       this.$on("mounted", () => {
@@ -51,9 +50,11 @@ function withDrag(BaseClass, { target = (instance) => instance.$el, ...options }
         this.$services.unregister("dragged");
       });
     }
-  }, __publicField(_a, "config", {
+  }
+  __publicField(WithDrag, "config", {
     name: `${BaseClass.config.name}WithDrag`,
     emits: ["dragged"]
-  }), _a;
+  });
+  return WithDrag;
 }
 if (module.exports.default) module.exports = module.exports.default;