@studiometa/js-toolkit 3.0.0-alpha.9 → 3.0.0-beta.0

package/decorators/withDrag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withDrag.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { DragServiceOptions, DragServiceProps } from '../services/drag.js';\nimport { useDrag } from '../services/index.js';\n\nexport type DragDecoratorOptions = DragServiceOptions & {\n  target?: (this: Base, instance: Base) => HTMLElement;\n};\n\nexport interface WithDragInterface extends BaseInterface {\n  dragged?(props: DragServiceProps): void;\n}\n\n/**\n * Add dragging capabilities to a component.\n */\nexport function withDrag<S extends Base>(\n  BaseClass: typeof Base,\n  { target = (instance) => instance.$el, ...options }: DragDecoratorOptions = {},\n): BaseDecorator<BaseInterface, S> {\n  /**\n   * Class.\n   */\n  class WithDrag<T extends BaseProps = BaseProps> extends BaseClass<T & WithDragInterface> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithDrag`,\n      emits: ['dragged'],\n    };\n\n    /**\n     * Class constructor.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$on('mounted', () => {\n        this.$services.register(\n          'dragged',\n          useDrag.bind(undefined, target.call(this, this), options),\n        );\n        this.$services.enable('dragged');\n      });\n\n      this.$on('destroyed', () => {\n        this.$services.disable('dragged');\n        this.$services.unregister('dragged');\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithDrag;\n}\n"],
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { DragServiceOptions, DragServiceProps } from '../services/index.js';\nimport { useDrag } from '../services/index.js';\n\nexport type DragDecoratorOptions = DragServiceOptions & {\n  target?: (this: Base, instance: Base) => HTMLElement;\n};\n\nexport interface WithDragInterface extends BaseInterface {\n  dragged?(props: DragServiceProps): void;\n}\n\n/**\n * Add dragging capabilities to a component.\n */\nexport function withDrag<S extends Base>(\n  BaseClass: typeof Base,\n  { target = (instance) => instance.$el, ...options }: DragDecoratorOptions = {},\n): BaseDecorator<BaseInterface, S> {\n  /**\n   * Class.\n   */\n  class WithDrag<T extends BaseProps = BaseProps> extends BaseClass<T & WithDragInterface> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithDrag`,\n      emits: ['dragged'],\n    };\n\n    /**\n     * Class constructor.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$on('mounted', () => {\n        this.$services.register(\n          'dragged',\n          useDrag.bind(undefined, target.call(this, this), options),\n        );\n        this.$services.enable('dragged');\n      });\n\n      this.$on('destroyed', () => {\n        this.$services.disable('dragged');\n        this.$services.unregister('dragged');\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithDrag;\n}\n"],
   "mappings": "AAGA,SAAS,eAAe;AAajB,SAAS,SACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,KAAK,GAAG,QAAQ,IAA0B,CAAC,GAC5C;AAAA,EAIjC,MAAM,iBAAkD,UAAiC;AAAA;AAAA;AAAA;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,OAAO,CAAC,SAAS;AAAA,IACnB;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU;AAAA,UACb;AAAA,UACA,QAAQ,KAAK,QAAW,OAAO,KAAK,MAAM,IAAI,GAAG,OAAO;AAAA,QAC1D;AACA,aAAK,UAAU,OAAO,SAAS;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,QAAQ,SAAS;AAChC,aAAK,UAAU,WAAW,SAAS;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withRelativePointer.d.ts

@@ -1,6 +1,6 @@
 import type { BaseDecorator, BaseInterface } from '../Base/types.js';
 import type { Base } from '../Base/index.js';
-import type { PointerServiceProps } from '../services/pointer.js';
+import type { PointerServiceProps } from '../services/index.js';
 export type RelativePointerDecoratorOptions = {
     target?: (this: Base, instance: Base) => HTMLElement;
 };

package/decorators/withRelativePointer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withRelativePointer.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { PointerServiceProps } from '../services/pointer.js';\nimport { usePointer } from '../services/index.js';\n\nexport type RelativePointerDecoratorOptions = {\n  target?: (this: Base, instance: Base) => HTMLElement;\n};\n\nexport interface RelativePointerInterface extends BaseInterface {\n  movedrelative?(props: PointerServiceProps): void;\n}\n\n/**\n * Add dragging capabilities to a component.\n */\nexport function withRelativePointer<S extends Base>(\n  BaseClass: typeof Base,\n  { target = (instance) => instance.$el }: RelativePointerDecoratorOptions = {},\n): BaseDecorator<RelativePointerInterface, S> {\n  /**\n   * Class.\n   */\n  class WithRelativePointer<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithRelativePointer`,\n      emits: ['movedrelative'],\n    };\n\n    /**\n     * Class constructor.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$on('mounted', () => {\n        this.$services.register(\n          'movedrelative',\n          usePointer.bind(undefined, target.call(this, this)),\n        );\n        this.$services.enable('movedrelative');\n      });\n\n      this.$on('destroyed', () => {\n        this.$services.disable('movedrelative');\n        this.$services.unregister('movedrelative');\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithRelativePointer;\n}\n"],
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { PointerServiceProps } from '../services/index.js';\nimport { usePointer } from '../services/index.js';\n\nexport type RelativePointerDecoratorOptions = {\n  target?: (this: Base, instance: Base) => HTMLElement;\n};\n\nexport interface RelativePointerInterface extends BaseInterface {\n  movedrelative?(props: PointerServiceProps): void;\n}\n\n/**\n * Add dragging capabilities to a component.\n */\nexport function withRelativePointer<S extends Base>(\n  BaseClass: typeof Base,\n  { target = (instance) => instance.$el }: RelativePointerDecoratorOptions = {},\n): BaseDecorator<RelativePointerInterface, S> {\n  /**\n   * Class.\n   */\n  class WithRelativePointer<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithRelativePointer`,\n      emits: ['movedrelative'],\n    };\n\n    /**\n     * Class constructor.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.$on('mounted', () => {\n        this.$services.register(\n          'movedrelative',\n          usePointer.bind(undefined, target.call(this, this)),\n        );\n        this.$services.enable('movedrelative');\n      });\n\n      this.$on('destroyed', () => {\n        this.$services.disable('movedrelative');\n        this.$services.unregister('movedrelative');\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithRelativePointer;\n}\n"],
   "mappings": "AAGA,SAAS,kBAAkB;AAapB,SAAS,oBACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,IAAI,IAAqC,CAAC,GAChC;AAAA,EAI5C,MAAM,4BAA6D,UAAa;AAAA;AAAA;AAAA;AAAA,IAI9E,OAAO,SAAqB;AAAA,MAC1B,MAAM,GAAG,UAAU,OAAO,IAAI;AAAA,MAC9B,OAAO,CAAC,eAAe;AAAA,IACzB;AAAA;AAAA;AAAA;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU;AAAA,UACb;AAAA,UACA,WAAW,KAAK,QAAW,OAAO,KAAK,MAAM,IAAI,CAAC;AAAA,QACpD;AACA,aAAK,UAAU,OAAO,eAAe;AAAA,MACvC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,UAAU,QAAQ,eAAe;AACtC,aAAK,UAAU,WAAW,eAAe;AAAA,MAC3C,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withResponsiveOptions.d.ts

@@ -3,4 +3,6 @@ import type { Base } from '../Base/index.js';
 /**
  * Extends the configuration of an existing class.
  */
-export declare function withResponsiveOptions<S extends Base>(BaseClass: typeof Base): BaseDecorator<BaseInterface, S>;
+export declare function withResponsiveOptions<S extends Base>(BaseClass: typeof Base, { responsiveOptions }?: {
+    responsiveOptions?: any[];
+}): BaseDecorator<BaseInterface, S>;

package/decorators/withResponsiveOptions.js

@@ -1,6 +1,26 @@
-import { ResponsiveOptionsManager } from "../Base/managers/ResponsiveOptionsManager.js";
-function withResponsiveOptions(BaseClass) {
+import {
+  ResponsiveOptionsManager
+} from "../Base/managers/ResponsiveOptionsManager.js";
+import { isDefined, isObject } from "../utils/index.js";
+function withResponsiveOptions(BaseClass, { responsiveOptions = [] } = {}) {
   class WithResponsiveOptions extends BaseClass {
+    /**
+     * Configure responsive options.
+     */
+    get __config() {
+      const config = super.__config;
+      const options = config.options;
+      for (const option of responsiveOptions) {
+        if (isDefined(options[option])) {
+          const oldOption = options[option];
+          options[option] = {
+            type: isObject(oldOption) ? oldOption.type : oldOption,
+            responsive: true
+          };
+        }
+      }
+      return config;
+    }
     /**
      * Get managers.
      */

package/decorators/withResponsiveOptions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withResponsiveOptions.ts"],
-  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, Managers } from '../Base/index.js';\nimport { ResponsiveOptionsManager } from '../Base/managers/ResponsiveOptionsManager.js';\n\n/**\n * Extends the configuration of an existing class.\n */\nexport function withResponsiveOptions<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<BaseInterface, S> {\n  /**\n   * Class.\n   */\n  class WithResponsiveOptions<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Get managers.\n     */\n    get __managers(): Managers & { OptionsManager: typeof ResponsiveOptionsManager } {\n      return {\n        ...super.__managers,\n        OptionsManager: ResponsiveOptionsManager,\n      };\n    }\n  }\n\n  // @ts-ignore\n  return WithResponsiveOptions;\n}\n"],
-  "mappings": "AAEA,SAAS,gCAAgC;AAKlC,SAAS,sBACd,WACiC;AAAA,EAIjC,MAAM,8BAA+D,UAAa;AAAA;AAAA;AAAA;AAAA,IAIhF,IAAI,aAA6E;AAC/E,aAAO;AAAA,QACL,GAAG,MAAM;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, Managers } from '../Base/index.js';\nimport type { OptionObject, OptionType } from '../Base/managers/OptionsManager.js';\nimport {\n  ResponsiveOptionsManager,\n  ResponsiveOptionObject,\n} from '../Base/managers/ResponsiveOptionsManager.js';\nimport { isDefined, isObject } from '../utils/index.js';\n\n/**\n * Extends the configuration of an existing class.\n */\nexport function withResponsiveOptions<S extends Base>(\n  BaseClass: typeof Base,\n  { responsiveOptions = [] } = {},\n): BaseDecorator<BaseInterface, S> {\n  /**\n   * Class.\n   */\n  class WithResponsiveOptions<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Configure responsive options.\n     */\n    get __config() {\n      const config = super.__config;\n      const options = config.options;\n\n      for (const option of responsiveOptions) {\n        if (isDefined(options[option])) {\n          const oldOption = options[option];\n          options[option] = {\n            type: isObject(oldOption)\n              ? (oldOption as OptionObject).type\n              : (oldOption as OptionType),\n            responsive: true,\n          } as ResponsiveOptionObject;\n        }\n      }\n\n      return config;\n    }\n\n    /**\n     * Get managers.\n     */\n    get __managers(): Managers & { OptionsManager: typeof ResponsiveOptionsManager } {\n      return {\n        ...super.__managers,\n        OptionsManager: ResponsiveOptionsManager,\n      };\n    }\n  }\n\n  // @ts-ignore\n  return WithResponsiveOptions;\n}\n"],
+  "mappings": "AAGA;AAAA,EACE;AAAA,OAEK;AACP,SAAS,WAAW,gBAAgB;AAK7B,SAAS,sBACd,WACA,EAAE,oBAAoB,CAAC,EAAE,IAAI,CAAC,GACG;AAAA,EAIjC,MAAM,8BAA+D,UAAa;AAAA;AAAA;AAAA;AAAA,IAIhF,IAAI,WAAW;AACb,YAAM,SAAS,MAAM;AACrB,YAAM,UAAU,OAAO;AAEvB,iBAAW,UAAU,mBAAmB;AACtC,YAAI,UAAU,QAAQ,MAAM,CAAC,GAAG;AAC9B,gBAAM,YAAY,QAAQ,MAAM;AAChC,kBAAQ,MAAM,IAAI;AAAA,YAChB,MAAM,SAAS,SAAS,IACnB,UAA2B,OAC3B;AAAA,YACL,YAAY;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKA,IAAI,aAA6E;AAC/E,aAAO;AAAA,QACL,GAAG,MAAM;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/helpers/createApp.js

@@ -1,11 +1,12 @@
 import { features } from "../Base/features.js";
-import { isBoolean, isObject } from "../utils/index.js";
+import { isBoolean, isObject, isString } from "../utils/index.js";
 function createApp(App, options = {}) {
   let app;
   const {
     root = document.body,
     breakpoints = null,
     blocking = null,
+    prefix = null,
     attributes = null
   } = options instanceof HTMLElement ? { root: options } : options;
   if (isObject(breakpoints)) {
@@ -14,6 +15,9 @@ function createApp(App, options = {}) {
   if (isBoolean(blocking)) {
     features.set("blocking", blocking);
   }
+  if (isString(prefix)) {
+    features.set("prefix", prefix);
+  }
   if (isObject(attributes)) {
     features.set("attributes", attributes);
   }

package/helpers/createApp.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/createApp.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { isBoolean, isObject } from '../utils/index.js';\n\nexport type CreateAppOptions = Partial<Features> & {\n  root?: HTMLElement;\n};\n\n/**\n * Instantiate and mount the given component on the given root element when the page has been loaded\n * and return a function to use the app instance when it is ready.\n */\nexport default function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(\n  App: S,\n  options: HTMLElement | CreateAppOptions = {},\n): () => Promise<S & Base<T>> {\n  let app: S & Base<T>;\n  const {\n    root = document.body,\n    breakpoints = null,\n    blocking = null,\n    attributes = null,\n  } = options instanceof HTMLElement ? { root: options } : options;\n\n  if (isObject(breakpoints)) {\n    features.set('breakpoints', breakpoints);\n  }\n\n  if (isBoolean(blocking)) {\n    features.set('blocking', blocking);\n  }\n\n  if (isObject(attributes)) {\n    features.set('attributes', attributes);\n  }\n\n  async function init() {\n    app = (new App(root) as S & Base<T>)\n    await app.$mount();\n    return app;\n  }\n\n  let p: Promise<S & Base<T>>;\n\n  if (features.get('blocking')) {\n    p = init();\n  } else {\n    p = new Promise<S & Base<T>>((resolve) => {\n      if (document.readyState === 'complete') {\n        resolve(init());\n      } else {\n        document.addEventListener('readystatechange', () => {\n          if (document.readyState === 'complete') {\n            resolve(init());\n          }\n        });\n      }\n    });\n  }\n\n  return () => p;\n}\n"],
-  "mappings": "AAEA,SAAS,gBAAgB;AACzB,SAAS,WAAW,gBAAgB;AAUrB,SAAR,UACL,KACA,UAA0C,CAAC,GACf;AAC5B,MAAI;AACJ,QAAM;AAAA,IACJ,OAAO,SAAS;AAAA,IAChB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,aAAa;AAAA,EACf,IAAI,mBAAmB,cAAc,EAAE,MAAM,QAAQ,IAAI;AAEzD,MAAI,SAAS,WAAW,GAAG;AACzB,aAAS,IAAI,eAAe,WAAW;AAAA,EACzC;AAEA,MAAI,UAAU,QAAQ,GAAG;AACvB,aAAS,IAAI,YAAY,QAAQ;AAAA,EACnC;AAEA,MAAI,SAAS,UAAU,GAAG;AACxB,aAAS,IAAI,cAAc,UAAU;AAAA,EACvC;AAEA,iBAAe,OAAO;AACpB,UAAO,IAAI,IAAI,IAAI;AACnB,UAAM,IAAI,OAAO;AACjB,WAAO;AAAA,EACT;AAEA,MAAI;AAEJ,MAAI,SAAS,IAAI,UAAU,GAAG;AAC5B,QAAI,KAAK;AAAA,EACX,OAAO;AACL,QAAI,IAAI,QAAqB,CAAC,YAAY;AACxC,UAAI,SAAS,eAAe,YAAY;AACtC,gBAAQ,KAAK,CAAC;AAAA,MAChB,OAAO;AACL,iBAAS,iBAAiB,oBAAoB,MAAM;AAClD,cAAI,SAAS,eAAe,YAAY;AACtC,oBAAQ,KAAK,CAAC;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,MAAM;AACf;",
+  "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { isBoolean, isObject, isString } from '../utils/index.js';\n\nexport type CreateAppOptions = Partial<Features> & {\n  root?: HTMLElement;\n};\n\n/**\n * Instantiate and mount the given component on the given root element when the page has been loaded\n * and return a function to use the app instance when it is ready.\n */\nexport default function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(\n  App: S,\n  options: HTMLElement | CreateAppOptions = {},\n): () => Promise<S & Base<T>> {\n  let app: S & Base<T>;\n  const {\n    root = document.body,\n    breakpoints = null,\n    blocking = null,\n    prefix = null,\n    attributes = null,\n  } = options instanceof HTMLElement ? { root: options } : options;\n\n  if (isObject(breakpoints)) {\n    features.set('breakpoints', breakpoints);\n  }\n\n  if (isBoolean(blocking)) {\n    features.set('blocking', blocking);\n  }\n\n  if (isString(prefix)) {\n    features.set('prefix', prefix);\n  }\n\n  if (isObject(attributes)) {\n    features.set('attributes', attributes);\n  }\n\n  async function init() {\n    app = new App(root) as S & Base<T>;\n    await app.$mount();\n    return app;\n  }\n\n  let p: Promise<S & Base<T>>;\n\n  if (features.get('blocking')) {\n    p = init();\n  } else {\n    p = new Promise<S & Base<T>>((resolve) => {\n      if (document.readyState === 'complete') {\n        resolve(init());\n      } else {\n        document.addEventListener('readystatechange', () => {\n          if (document.readyState === 'complete') {\n            resolve(init());\n          }\n        });\n      }\n    });\n  }\n\n  return () => p;\n}\n"],
+  "mappings": "AAEA,SAAS,gBAAgB;AACzB,SAAS,WAAW,UAAU,gBAAgB;AAU/B,SAAR,UACL,KACA,UAA0C,CAAC,GACf;AAC5B,MAAI;AACJ,QAAM;AAAA,IACJ,OAAO,SAAS;AAAA,IAChB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,SAAS;AAAA,IACT,aAAa;AAAA,EACf,IAAI,mBAAmB,cAAc,EAAE,MAAM,QAAQ,IAAI;AAEzD,MAAI,SAAS,WAAW,GAAG;AACzB,aAAS,IAAI,eAAe,WAAW;AAAA,EACzC;AAEA,MAAI,UAAU,QAAQ,GAAG;AACvB,aAAS,IAAI,YAAY,QAAQ;AAAA,EACnC;AAEA,MAAI,SAAS,MAAM,GAAG;AACpB,aAAS,IAAI,UAAU,MAAM;AAAA,EAC/B;AAEA,MAAI,SAAS,UAAU,GAAG;AACxB,aAAS,IAAI,cAAc,UAAU;AAAA,EACvC;AAEA,iBAAe,OAAO;AACpB,UAAM,IAAI,IAAI,IAAI;AAClB,UAAM,IAAI,OAAO;AACjB,WAAO;AAAA,EACT;AAEA,MAAI;AAEJ,MAAI,SAAS,IAAI,UAAU,GAAG;AAC5B,QAAI,KAAK;AAAA,EACX,OAAO;AACL,QAAI,IAAI,QAAqB,CAAC,YAAY;AACxC,UAAI,SAAS,eAAe,YAAY;AACtC,gBAAQ,KAAK,CAAC;AAAA,MAChB,OAAO;AACL,iBAAS,iBAAiB,oBAAoB,MAAM;AAClD,cAAI,SAAS,eAAe,YAAY;AACtC,oBAAQ,KAAK,CAAC;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,MAAM;AACf;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "3.0.0-alpha.9",
+  "version": "3.0.0-beta.0",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"

package/services/AbstractService.d.ts

@@ -0,0 +1,98 @@
+export interface ServiceInterface<T> {
+    /**
+     * Remove a function from the resize service by its key.
+     */
+    remove(key: string): void;
+    /**
+     * Add a callback to the service. The callback will receive the current service props as parameter.
+     */
+    add(key: string, callback: (props: T) => void): void;
+    /**
+     * Test if the service has alreaydy a callback for the given key.
+     */
+    has(key: string): boolean;
+    /**
+     * Get the service's props.
+     */
+    props(): T;
+}
+/**
+ * Service configuration of events to be attached to targets.
+ */
+export type ServiceConfig = [
+    EventTarget | ((instance: AbstractService) => EventTarget),
+    [
+        string,
+        AddEventListenerOptions?
+    ][]
+][];
+/**
+ * AbstractService class.
+ */
+export declare class AbstractService<PropsType = any> {
+    /**
+     * Used to type `this.constructor` correctly
+     * @see https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311
+     */
+    ['constructor']: typeof AbstractService;
+    /**
+     * Service configuration.
+     */
+    static config: ServiceConfig;
+    /**
+     * Cache for the created instances.
+     */
+    static __instances: Map<any, any>;
+    /**
+     * Get a service instance as a singleton based on the given key.
+     */
+    static getInstance<T extends ServiceInterface<any>>(key?: any, ...args: any[]): any;
+    /**
+     * Is the service active or not?
+     */
+    __isInit: boolean;
+    /**
+     * Props for the service.
+     */
+    props: {};
+    /**
+     * Holds all the callbacks that will be triggered.
+     */
+    callbacks: Map<string, (props: PropsType) => unknown>;
+    /**
+     * Does the service has the given key?
+     */
+    has(key: string): boolean;
+    /**
+     * Get a service callback by its key.
+     */
+    get(key: string): (props: PropsType) => unknown;
+    /**
+     * Add a callback to the service.
+     */
+    add(key: string, callback: (props: PropsType) => unknown): void;
+    /**
+     * Remove a callback from the service by its key.
+     */
+    remove(key: string): void;
+    /**
+     * Trigger all service callbacks with service props.
+     */
+    trigger(props: PropsType): void;
+    /**
+     * Implements the EventListenerObject interface.
+     */
+    handleEvent(event: Event): void;
+    /**
+     * Add or remove event listeners based on the static `config` property.
+     */
+    __manageEvents(mode: 'add' | 'remove'): void;
+    /**
+     * Triggered when the service is initialized.
+     */
+    init(): void;
+    /**
+     * Triggered when the service is killed.
+     */
+    kill(): void;
+}

package/services/AbstractService.js

@@ -0,0 +1,115 @@
+import { isFunction } from "../utils/index.js";
+class AbstractService {
+  /**
+   * Service configuration.
+   */
+  static config = [];
+  /**
+   * Cache for the created instances.
+   */
+  static __instances = /* @__PURE__ */ new Map();
+  /**
+   * Get a service instance as a singleton based on the given key.
+   */
+  static getInstance(key = this, ...args) {
+    if (!this.__instances.has(key)) {
+      const instance = new this(...args);
+      this.__instances.set(key, {
+        add: (key2, callback) => instance.add(key2, callback),
+        remove: (key2) => instance.remove(key2),
+        has: (key2) => instance.has(key2),
+        props: () => instance.props
+      });
+    }
+    return this.__instances.get(key);
+  }
+  /**
+   * Is the service active or not?
+   */
+  __isInit = false;
+  /**
+   * Props for the service.
+   */
+  props = {};
+  /**
+   * Holds all the callbacks that will be triggered.
+   */
+  callbacks = /* @__PURE__ */ new Map();
+  /**
+   * Does the service has the given key?
+   */
+  has(key) {
+    return this.callbacks.has(key);
+  }
+  /**
+   * Get a service callback by its key.
+   */
+  get(key) {
+    return this.callbacks.get(key);
+  }
+  /**
+   * Add a callback to the service.
+   */
+  add(key, callback) {
+    if (this.has(key)) {
+      console.warn(`The key \`${key}\` has already been added.`);
+      return;
+    }
+    if (this.callbacks.size === 0 && !this.__isInit) {
+      this.init();
+      this.__isInit = true;
+    }
+    this.callbacks.set(key, callback);
+  }
+  /**
+   * Remove a callback from the service by its key.
+   */
+  remove(key) {
+    this.callbacks.delete(key);
+    if (this.callbacks.size === 0 && this.__isInit) {
+      this.kill();
+      this.__isInit = false;
+    }
+  }
+  /**
+   * Trigger all service callbacks with service props.
+   */
+  trigger(props) {
+    for (const callback of this.callbacks.values()) {
+      callback(props);
+    }
+  }
+  /* v8 ignore next 6 */
+  /**
+   * Implements the EventListenerObject interface.
+   */
+  handleEvent(event) {
+  }
+  /**
+   * Add or remove event listeners based on the static `config` property.
+   */
+  __manageEvents(mode) {
+    for (const [target, events] of this.constructor.config) {
+      const resolvedTarget = isFunction(target) ? target(this) : target;
+      for (const [type, options] of events) {
+        resolvedTarget[`${mode}EventListener`](type, this, options);
+      }
+    }
+  }
+  /**
+   * Triggered when the service is initialized.
+   */
+  init() {
+    this.__manageEvents("add");
+  }
+  /**
+   * Triggered when the service is killed.
+   */
+  kill() {
+    this.__manageEvents("remove");
+  }
+}
+export {
+  AbstractService
+};
+//# sourceMappingURL=AbstractService.js.map

package/services/AbstractService.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/services/AbstractService.ts"],
+  "sourcesContent": ["import { isFunction } from '../utils/index.js';\n\nexport interface ServiceInterface<T> {\n  /**\n   * Remove a function from the resize service by its key.\n   */\n  remove(key: string): void;\n  /**\n   * Add a callback to the service. The callback will receive the current service props as parameter.\n   */\n  add(key: string, callback: (props: T) => void): void;\n  /**\n   * Test if the service has alreaydy a callback for the given key.\n   */\n  has(key: string): boolean;\n  /**\n   * Get the service's props.\n   */\n  props(): T;\n}\n\n/**\n * Service configuration of events to be attached to targets.\n */\nexport type ServiceConfig = [\n  EventTarget | ((instance: AbstractService) => EventTarget),\n  [string, AddEventListenerOptions?][],\n][];\n\n/**\n * AbstractService class.\n */\nexport class AbstractService<PropsType = any> {\n  /**\n   * Used to type `this.constructor` correctly\n   * @see https://github.com/microsoft/TypeScript/issues/3841#issuecomment-2381594311\n   */\n  declare ['constructor']: typeof AbstractService;\n\n  /**\n   * Service configuration.\n   */\n  static config: ServiceConfig = [];\n\n  /**\n   * Cache for the created instances.\n   */\n  static __instances = new Map();\n\n  /**\n   * Get a service instance as a singleton based on the given key.\n   */\n  static getInstance<T extends ServiceInterface<any>>(key: any = this, ...args: any[]) {\n    if (!this.__instances.has(key)) {\n      // @ts-ignore\n      const instance = new this(...args);\n      this.__instances.set(key, {\n        add: (key, callback) => instance.add(key, callback),\n        remove: (key) => instance.remove(key),\n        has: (key) => instance.has(key),\n        props: () => instance.props,\n      } as T);\n    }\n\n    return this.__instances.get(key);\n  }\n\n  /**\n   * Is the service active or not?\n   */\n  __isInit = false;\n\n  /**\n   * Props for the service.\n   */\n  props = {};\n\n  /**\n   * Holds all the callbacks that will be triggered.\n   */\n  callbacks: Map<string, (props: PropsType) => unknown> = new Map();\n\n  /**\n   * Does the service has the given key?\n   */\n  has(key: string): boolean {\n    return this.callbacks.has(key);\n  }\n\n  /**\n   * Get a service callback by its key.\n   */\n  get(key: string): (props: PropsType) => unknown {\n    return this.callbacks.get(key);\n  }\n\n  /**\n   * Add a callback to the service.\n   */\n  add(key: string, callback: (props: PropsType) => unknown) {\n    if (this.has(key)) {\n      console.warn(`The key \\`${key}\\` has already been added.`);\n      return;\n    }\n\n    // Initialize the service when we add the first callback\n    if (this.callbacks.size === 0 && !this.__isInit) {\n      this.init();\n      this.__isInit = true;\n    }\n\n    this.callbacks.set(key, callback);\n  }\n\n  /**\n   * Remove a callback from the service by its key.\n   */\n  remove(key: string) {\n    this.callbacks.delete(key);\n\n    // Kill the service when we remove the last callback\n    if (this.callbacks.size === 0 && this.__isInit) {\n      this.kill();\n      this.__isInit = false;\n    }\n  }\n\n  /**\n   * Trigger all service callbacks with service props.\n   */\n  trigger(props: PropsType) {\n    for (const callback of this.callbacks.values()) {\n      callback(props);\n    }\n  }\n\n  /* v8 ignore next 6 */\n  /**\n   * Implements the EventListenerObject interface.\n   */\n  handleEvent(event: Event) {\n    // Should be implemented.\n  }\n\n  /**\n   * Add or remove event listeners based on the static `config` property.\n   */\n  __manageEvents(mode: 'add' | 'remove') {\n    for (const [target, events] of this.constructor.config) {\n      const resolvedTarget = isFunction(target) ? target(this) : target;\n      for (const [type, options] of events) {\n        resolvedTarget[`${mode}EventListener`](type, this, options);\n      }\n    }\n  }\n\n  /**\n   * Triggered when the service is initialized.\n   */\n  init() {\n    this.__manageEvents('add');\n  }\n\n  /**\n   * Triggered when the service is killed.\n   */\n  kill() {\n    this.__manageEvents('remove');\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAgCpB,MAAM,gBAAiC;AAAA;AAAA;AAAA;AAAA,EAU5C,OAAO,SAAwB,CAAC;AAAA;AAAA;AAAA;AAAA,EAKhC,OAAO,cAAc,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAK7B,OAAO,YAA6C,MAAW,SAAS,MAAa;AACnF,QAAI,CAAC,KAAK,YAAY,IAAI,GAAG,GAAG;AAE9B,YAAM,WAAW,IAAI,KAAK,GAAG,IAAI;AACjC,WAAK,YAAY,IAAI,KAAK;AAAA,QACxB,KAAK,CAACA,MAAK,aAAa,SAAS,IAAIA,MAAK,QAAQ;AAAA,QAClD,QAAQ,CAACA,SAAQ,SAAS,OAAOA,IAAG;AAAA,QACpC,KAAK,CAACA,SAAQ,SAAS,IAAIA,IAAG;AAAA,QAC9B,OAAO,MAAM,SAAS;AAAA,MACxB,CAAM;AAAA,IACR;AAEA,WAAO,KAAK,YAAY,IAAI,GAAG;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AAAA;AAAA;AAAA;AAAA,EAKX,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,EAKT,YAAwD,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAKhE,IAAI,KAAsB;AACxB,WAAO,KAAK,UAAU,IAAI,GAAG;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAA4C;AAC9C,WAAO,KAAK,UAAU,IAAI,GAAG;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAa,UAAyC;AACxD,QAAI,KAAK,IAAI,GAAG,GAAG;AACjB,cAAQ,KAAK,aAAa,GAAG,4BAA4B;AACzD;AAAA,IACF;AAGA,QAAI,KAAK,UAAU,SAAS,KAAK,CAAC,KAAK,UAAU;AAC/C,WAAK,KAAK;AACV,WAAK,WAAW;AAAA,IAClB;AAEA,SAAK,UAAU,IAAI,KAAK,QAAQ;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,KAAa;AAClB,SAAK,UAAU,OAAO,GAAG;AAGzB,QAAI,KAAK,UAAU,SAAS,KAAK,KAAK,UAAU;AAC9C,WAAK,KAAK;AACV,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ,OAAkB;AACxB,eAAW,YAAY,KAAK,UAAU,OAAO,GAAG;AAC9C,eAAS,KAAK;AAAA,IAChB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAAY,OAAc;AAAA,EAE1B;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe,MAAwB;AACrC,eAAW,CAAC,QAAQ,MAAM,KAAK,KAAK,YAAY,QAAQ;AACtD,YAAM,iBAAiB,WAAW,MAAM,IAAI,OAAO,IAAI,IAAI;AAC3D,iBAAW,CAAC,MAAM,OAAO,KAAK,QAAQ;AACpC,uBAAe,GAAG,IAAI,eAAe,EAAE,MAAM,MAAM,OAAO;AAAA,MAC5D;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,eAAe,KAAK;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,eAAe,QAAQ;AAAA,EAC9B;AACF;",
+  "names": ["key"]
+}

package/services/DragService.d.ts

@@ -0,0 +1,124 @@
+import type { ServiceConfig, ServiceInterface } from './AbstractService.js';
+import { AbstractService } from './AbstractService.js';
+type DragLifecycle = 'start' | 'drag' | 'drop' | 'inertia' | 'stop';
+export interface DragServiceProps {
+    /**
+     * The current mode of the dragging logic.
+     */
+    mode: DragLifecycle;
+    /**
+     * The target element of the drag.
+     */
+    target: HTMLElement;
+    /**
+     * Whether the user is currently grabbing the targeted element or not.
+     */
+    isGrabbing: boolean;
+    /**
+     * Whether the drag currently has inertia or not.
+     */
+    hasInertia: boolean;
+    /**
+     * The current horizontal position in the viewport.
+     */
+    x: number;
+    /**
+     * The current vertical position in the viewport.
+     */
+    y: number;
+    /**
+     * The delta between the current position and the last.
+     */
+    delta: {
+        x: number;
+        y: number;
+    };
+    /**
+     * The initial position where the dragging started.
+     */
+    origin: {
+        x: number;
+        y: number;
+    };
+    /**
+     * The distance from the current position to the origin.
+     */
+    distance: {
+        x: number;
+        y: number;
+    };
+    /**
+     * The final position that will be reached at the end of the inertia.
+     */
+    final: {
+        x: number;
+        y: number;
+    };
+}
+export type DragServiceInterface = ServiceInterface<DragServiceProps>;
+export interface DragServiceOptions {
+    dampFactor?: number;
+    dragTreshold?: number;
+}
+export declare class DragService extends AbstractService<DragServiceProps> {
+    static MODES: Record<Uppercase<DragLifecycle>, DragLifecycle>;
+    static config: ServiceConfig;
+    id: string;
+    dampFactor: number;
+    dragTreshold: number;
+    previousEvent: TouchEvent | MouseEvent;
+    props: DragServiceProps;
+    /**
+     * Test if we should allow click on links and buttons.
+     */
+    get shouldPreventClick(): boolean;
+    constructor(target: HTMLElement, { dampFactor, dragTreshold }?: DragServiceOptions);
+    /**
+     * Get the client value for the given axis.
+     */
+    getEventPosition(event: MouseEvent | TouchEvent): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Start the drag.
+     *
+     * @param {number} x The initial horizontal position.
+     * @param {number} y The initial vertical position.
+     */
+    start(x: number, y: number): void;
+    /**
+     * Stop the drag, or drop.
+     */
+    drop(): void;
+    /**
+     * Stop the drag.
+     */
+    stop(): void;
+    /**
+     * Raf service handler.
+     */
+    rafHandler(): void;
+    /**
+     * Pointer service handler.
+     */
+    drag(event: TouchEvent | MouseEvent): void;
+    /**
+     * Handle any event.
+     */
+    handleEvent(event: MouseEvent | PointerEvent | DragEvent): void;
+}
+/**
+ * Use the drag service.
+ *
+ * ```js
+ * import { useDrag } from '@studiometa/js-toolkit/services';
+ * const element = document.querySelector('.draggable');
+ * const { add, remove, props } = useDrag(element, { dampFactor: 0.5 });
+ * add('key', (props) => console.log(props));
+ * remove('key');
+ * props();
+ * ```
+ */
+export declare function useDrag(target: HTMLElement, options: DragServiceOptions): DragServiceInterface;
+export {};