@studiometa/js-toolkit 2.6.5 → 2.7.0

package/Base/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/utils.ts"],
-  "sourcesContent": ["import { isArray, isDefined, isDev } from '../utils/index.js';\nimport type { Base, BaseConfig } from './index.js';\n\n/**\n * Get a list of elements based on the name of a component.\n *\n * @param {string} nameOrSelector\n *   The name or selector to used for this component.\n * @param {HTMLElement|Document} element\n *   The root element on which to query the selector, defaults to `document`.\n * @returns {Array<HTMLElement>}\n *   A list of elements on which the component should be mounted.\n */\nexport function getComponentElements(nameOrSelector:string, element:HTMLElement | Document = document):HTMLElement[] {\n  const selector = `[data-component=\"${nameOrSelector}\"]`;\n  let elements = [];\n\n  try {\n    elements = Array.from(element.querySelectorAll(selector));\n    // eslint-disable-next-line no-empty\n  } catch {}\n\n  // If no child component found with the default selector, try a classic DOM selector\n  if (elements.length === 0) {\n    elements = Array.from(element.querySelectorAll(nameOrSelector));\n  }\n\n  return elements;\n}\n\n/**\n * Test if an event is defined in the given config.\n */\nexport function eventIsDefinedInConfig(event:string, config: BaseConfig):boolean {\n  return isArray(config.emits) && config.emits.includes(event);\n}\n\n/**\n * Test if an event can be used on the given element.\n */\nexport function eventIsNative(event:string, element:HTMLElement):boolean {\n  return isDefined(element[`on${event}`]);\n}\n\n/**\n * Get the target of a given event.\n */\nexport function getEventTarget(instance:Base, event:string, config:BaseConfig):Base | Base['$el'] {\n  if (eventIsDefinedInConfig(event, config)) {\n    return instance;\n  }\n\n  if (eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n\n  if (isDev) {\n    console.warn(\n      `[${config.name}]`,\n      `The \"${event}\" event is missing from the configuration and is not a native`,\n      `event for the root element of type \\`${instance.$el.constructor.name}\\`.`,\n    );\n  }\n\n  return instance;\n}\n"],
-  "mappings": "AAAA,SAAS,SAAS,WAAW,aAAa;AAanC,SAAS,qBAAqB,gBAAuB,UAAiC,UAAwB;AACnH,QAAM,WAAW,oBAAoB;AACrC,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAE;AAAA,EAAO;AAGT,MAAI,SAAS,WAAW,GAAG;AACzB,eAAW,MAAM,KAAK,QAAQ,iBAAiB,cAAc,CAAC;AAAA,EAChE;AAEA,SAAO;AACT;AAKO,SAAS,uBAAuB,OAAc,QAA4B;AAC/E,SAAO,QAAQ,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,KAAK;AAC7D;AAKO,SAAS,cAAc,OAAc,SAA6B;AACvE,SAAO,UAAU,QAAQ,KAAK,QAAQ;AACxC;AAKO,SAAS,eAAe,UAAe,OAAc,QAAsC;AAChG,MAAI,uBAAuB,OAAO,MAAM,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,SAAS,GAAG,GAAG;AACtC,WAAO,SAAS;AAAA,EAClB;AAEA,MAAI,OAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO;AAAA,MACX,QAAQ;AAAA,MACR,wCAAwC,SAAS,IAAI,YAAY;AAAA,IACnE;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { isArray, isDefined, isDev } from '../utils/index.js';\nimport type { Base, BaseConfig } from './index.js';\n\n/**\n * Get a list of elements based on the name of a component.\n *\n * @param {string} nameOrSelector\n *   The name or selector to used for this component.\n * @param {HTMLElement|Document} element\n *   The root element on which to query the selector, defaults to `document`.\n * @returns {Array<HTMLElement>}\n *   A list of elements on which the component should be mounted.\n */\nexport function getComponentElements(\n  nameOrSelector: string,\n  element: HTMLElement | Document = document,\n): HTMLElement[] {\n  const selector = `[data-component=\"${nameOrSelector}\"]`;\n  let elements = [];\n\n  try {\n    elements = Array.from(element.querySelectorAll(selector));\n    // eslint-disable-next-line no-empty\n  } catch {}\n\n  // If no child component found with the default selector, try a classic DOM selector\n  if (elements.length === 0) {\n    elements = Array.from(element.querySelectorAll(nameOrSelector));\n  }\n\n  return elements;\n}\n\n/**\n * Test if an event is defined in the given config.\n */\nexport function eventIsDefinedInConfig(event: string, config: BaseConfig): boolean {\n  return isArray(config.emits) && config.emits.includes(event);\n}\n\n/**\n * Test if an event can be used on the given element.\n */\nexport function eventIsNative(event: string, element: HTMLElement): boolean {\n  return isDefined(element[`on${event}`]);\n}\n\n/**\n * Get the target of a given event.\n * @todo Return false in v3 if event is not defined or not native to prevent adding a listener.\n */\nexport function getEventTarget(\n  instance: Base,\n  event: string,\n  config: BaseConfig,\n): Base | Base['$el'] {\n  if (eventIsDefinedInConfig(event, config)) {\n    return instance;\n  }\n\n  if (eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n\n  if (isDev) {\n    console.warn(\n      `[${config.name}]`,\n      `The \"${event}\" event is missing from the configuration and is not a native`,\n      `event for the root element of type \\`${instance.$el.constructor.name}\\`.`,\n    );\n  }\n\n  // @todo v3 return false or null\n  return instance;\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS,WAAW,aAAa;AAanC,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,oBAAoB;AACrC,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAE;AAAA,EAAO;AAGT,MAAI,SAAS,WAAW,GAAG;AACzB,eAAW,MAAM,KAAK,QAAQ,iBAAiB,cAAc,CAAC;AAAA,EAChE;AAEA,SAAO;AACT;AAKO,SAAS,uBAAuB,OAAe,QAA6B;AACjF,SAAO,QAAQ,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS,KAAK;AAC7D;AAKO,SAAS,cAAc,OAAe,SAA+B;AAC1E,SAAO,UAAU,QAAQ,KAAK,QAAQ;AACxC;AAMO,SAAS,eACd,UACA,OACA,QACoB;AACpB,MAAI,uBAAuB,OAAO,MAAM,GAAG;AACzC,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,SAAS,GAAG,GAAG;AACtC,WAAO,SAAS;AAAA,EAClB;AAEA,MAAI,OAAO;AACT,YAAQ;AAAA,MACN,IAAI,OAAO;AAAA,MACX,QAAQ;AAAA,MACR,wCAAwC,SAAS,IAAI,YAAY;AAAA,IACnE;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withBreakpointManager.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withBreakpointManager.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev, isArray } from '../utils/index.js';\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n */\nfunction testBreakpoints(breakpoints: Array<[string[], Base]>) {\n  const { breakpoint } = useResize().props();\n  breakpoints.forEach(([breakpointKeys, instance]) => {\n    if (breakpointKeys.includes(breakpoint) && !instance.$isMounted) {\n      setTimeout(() => instance.$mount(), 0);\n    } else if (!breakpointKeys.includes(breakpoint) && instance.$isMounted) {\n      instance.$destroy();\n    }\n  });\n}\n\n/**\n * Prepare the components.\n */\nfunction mountComponents(\n  instance: Base,\n  breakpoints: Array<[string, BaseConstructor]>,\n): Array<[string[], Base]> {\n  return breakpoints.map(([bk, ComponentClass]) => {\n    const child = new ComponentClass(instance.$el);\n    Object.defineProperty(child, '$parent', { get: () => instance.$parent });\n    return [bk.split(' '), child];\n  });\n}\n\n/**\n * A cache object to hold each Base sub-instances.\n */\nconst instances:WeakMap<Base, Array<[string[], Base]>> = new WeakMap();\n\n/**\n * BreakpointManager class.\n */\nexport function withBreakpointManager<S extends Base>(\n  BaseClass: typeof Base,\n  breakpoints: Array<[string, BaseConstructor<Base>]>,\n): BaseDecorator<BaseInterface, S> {\n  if (!isArray(breakpoints)) {\n    if (isDev) {\n      throw new Error('[withBreakpointManager] The `breakpoints` parameter must be an array.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  if (breakpoints.length < 2) {\n    if (isDev) {\n      throw new Error('[withBreakpointManager] You must define at least 2 breakpoints.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  const { add, props } = useResize();\n\n  // Do nothing if no breakpoint has been defined.\n  // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n  if (!props().breakpoint) {\n    if (isDev) {\n      throw new Error('The `BreakpointManager` class requires breakpoints to be defined.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  /**\n   * Class.\n   */\n  class WithBreakpointManager<\n    T extends BaseProps = BaseProps,\n  > extends BaseClass<T> {\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      if (!instances.has(this)) {\n        instances.set(this, mountComponents(this, breakpoints));\n      }\n\n      add(`BreakpointManager-${this.$id}`, () => {\n        testBreakpoints(instances.get(this));\n      });\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    $mount(): this {\n      super.$mount();\n\n      testBreakpoints(instances.get(this));\n\n      return this;\n    }\n\n    /**\n     * Destroy all instances when the main one is destroyed.\n     */\n    $destroy():this {\n      if (isArray(instances.get(this))) {\n        instances.get(this).forEach(([, instance]) => {\n          instance.$destroy();\n        });\n      }\n\n      return super.$destroy();\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointManager;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAA0B;AAC1B,mBAA+B;AAK/B,SAAS,gBAAgB,aAAsC;AAC7D,QAAM,EAAE,WAAW,QAAI,2BAAU,EAAE,MAAM;AACzC,cAAY,QAAQ,CAAC,CAAC,gBAAgB,QAAQ,MAAM;AAClD,QAAI,eAAe,SAAS,UAAU,KAAK,CAAC,SAAS,YAAY;AAC/D,iBAAW,MAAM,SAAS,OAAO,GAAG,CAAC;AAAA,IACvC,WAAW,CAAC,eAAe,SAAS,UAAU,KAAK,SAAS,YAAY;AACtE,eAAS,SAAS;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAKA,SAAS,gBACP,UACA,aACyB;AACzB,SAAO,YAAY,IAAI,CAAC,CAAC,IAAI,cAAc,MAAM;AAC/C,UAAM,QAAQ,IAAI,eAAe,SAAS,GAAG;AAC7C,WAAO,eAAe,OAAO,WAAW,EAAE,KAAK,MAAM,SAAS,QAAQ,CAAC;AACvE,WAAO,CAAC,GAAG,MAAM,GAAG,GAAG,KAAK;AAAA,EAC9B,CAAC;AACH;AAKA,IAAM,YAAmD,oBAAI,QAAQ;AAK9D,SAAS,sBACd,WACA,aACiC;AACjC,MAAI,KAAC,sBAAQ,WAAW,GAAG;AACzB,QAAI,oBAAO;AACT,YAAM,IAAI,MAAM,uEAAuE;AAAA,IACzF;AAGA,WAAO;AAAA,EACT;AAEA,MAAI,YAAY,SAAS,GAAG;AAC1B,QAAI,oBAAO;AACT,YAAM,IAAI,MAAM,iEAAiE;AAAA,IACnF;AAGA,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,KAAK,MAAM,QAAI,2BAAU;AAIjC,MAAI,CAAC,MAAM,EAAE,YAAY;AACvB,QAAI,oBAAO;AACT,YAAM,IAAI,MAAM,mEAAmE;AAAA,IACrF;AAGA,WAAO;AAAA,EACT;AAKA,QAAM,8BAEI,UAAa;AAAA,IAIrB,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,CAAC,UAAU,IAAI,IAAI,GAAG;AACxB,kBAAU,IAAI,MAAM,gBAAgB,MAAM,WAAW,CAAC;AAAA,MACxD;AAEA,UAAI,qBAAqB,KAAK,OAAO,MAAM;AACzC,wBAAgB,UAAU,IAAI,IAAI,CAAC;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,IAMA,SAAe;AACb,YAAM,OAAO;AAEb,sBAAgB,UAAU,IAAI,IAAI,CAAC;AAEnC,aAAO;AAAA,IACT;AAAA,IAKA,WAAgB;AACd,cAAI,sBAAQ,UAAU,IAAI,IAAI,CAAC,GAAG;AAChC,kBAAU,IAAI,IAAI,EAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,MAAM;AAC5C,mBAAS,SAAS;AAAA,QACpB,CAAC;AAAA,MACH;AAEA,aAAO,MAAM,SAAS;AAAA,IACxB;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev, isArray } from '../utils/index.js';\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n */\nfunction testBreakpoints(breakpoints: Array<[string[], Base]>) {\n  const { breakpoint } = useResize().props();\n  breakpoints.forEach(([breakpointKeys, instance]) => {\n    if (breakpointKeys.includes(breakpoint) && !instance.$isMounted) {\n      setTimeout(() => instance.$mount(), 0);\n    } else if (!breakpointKeys.includes(breakpoint) && instance.$isMounted) {\n      instance.$destroy();\n    }\n  });\n}\n\n/**\n * Prepare the components.\n */\nfunction mountComponents(\n  instance: Base,\n  breakpoints: Array<[string, BaseConstructor]>,\n): Array<[string[], Base]> {\n  return breakpoints.map(([bk, ComponentClass]) => {\n    const child = new ComponentClass(instance.$el);\n    Object.defineProperty(child, '$parent', { get: () => instance.$parent });\n    return [bk.split(' '), child];\n  });\n}\n\n/**\n * A cache object to hold each Base sub-instances.\n */\nconst instances: WeakMap<Base, Array<[string[], Base]>> = new WeakMap();\n\n/**\n * BreakpointManager class.\n */\nexport function withBreakpointManager<S extends Base>(\n  BaseClass: typeof Base,\n  breakpoints: Array<[string, BaseConstructor<Base>]>,\n): BaseDecorator<BaseInterface, S> {\n  if (!isArray(breakpoints)) {\n    if (isDev) {\n      throw new Error('[withBreakpointManager] The `breakpoints` parameter must be an array.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  if (breakpoints.length < 2) {\n    if (isDev) {\n      throw new Error('[withBreakpointManager] You must define at least 2 breakpoints.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  const { add, props } = useResize();\n\n  // Do nothing if no breakpoint has been defined.\n  // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n  if (!props().breakpoint) {\n    if (isDev) {\n      throw new Error('The `BreakpointManager` class requires breakpoints to be defined.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  /**\n   * Class.\n   */\n  class WithBreakpointManager<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      if (!instances.has(this)) {\n        instances.set(this, mountComponents(this, breakpoints));\n      }\n\n      add(`BreakpointManager-${this.$id}`, () => {\n        testBreakpoints(instances.get(this));\n      });\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    $mount(): this {\n      super.$mount();\n\n      testBreakpoints(instances.get(this));\n\n      return this;\n    }\n\n    /**\n     * Destroy all instances when the main one is destroyed.\n     */\n    $destroy(): this {\n      if (isArray(instances.get(this))) {\n        instances.get(this).forEach(([, instance]) => {\n          instance.$destroy();\n        });\n      }\n\n      return super.$destroy();\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointManager;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAA0B;AAC1B,mBAA+B;AAK/B,SAAS,gBAAgB,aAAsC;AAC7D,QAAM,EAAE,WAAW,QAAI,2BAAU,EAAE,MAAM;AACzC,cAAY,QAAQ,CAAC,CAAC,gBAAgB,QAAQ,MAAM;AAClD,QAAI,eAAe,SAAS,UAAU,KAAK,CAAC,SAAS,YAAY;AAC/D,iBAAW,MAAM,SAAS,OAAO,GAAG,CAAC;AAAA,IACvC,WAAW,CAAC,eAAe,SAAS,UAAU,KAAK,SAAS,YAAY;AACtE,eAAS,SAAS;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAKA,SAAS,gBACP,UACA,aACyB;AACzB,SAAO,YAAY,IAAI,CAAC,CAAC,IAAI,cAAc,MAAM;AAC/C,UAAM,QAAQ,IAAI,eAAe,SAAS,GAAG;AAC7C,WAAO,eAAe,OAAO,WAAW,EAAE,KAAK,MAAM,SAAS,QAAQ,CAAC;AACvE,WAAO,CAAC,GAAG,MAAM,GAAG,GAAG,KAAK;AAAA,EAC9B,CAAC;AACH;AAKA,IAAM,YAAoD,oBAAI,QAAQ;AAK/D,SAAS,sBACd,WACA,aACiC;AACjC,MAAI,KAAC,sBAAQ,WAAW,GAAG;AACzB,QAAI,oBAAO;AACT,YAAM,IAAI,MAAM,uEAAuE;AAAA,IACzF;AAGA,WAAO;AAAA,EACT;AAEA,MAAI,YAAY,SAAS,GAAG;AAC1B,QAAI,oBAAO;AACT,YAAM,IAAI,MAAM,iEAAiE;AAAA,IACnF;AAGA,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,KAAK,MAAM,QAAI,2BAAU;AAIjC,MAAI,CAAC,MAAM,EAAE,YAAY;AACvB,QAAI,oBAAO;AACT,YAAM,IAAI,MAAM,mEAAmE;AAAA,IACrF;AAGA,WAAO;AAAA,EACT;AAKA,QAAM,8BAA+D,UAAa;AAAA,IAIhF,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,CAAC,UAAU,IAAI,IAAI,GAAG;AACxB,kBAAU,IAAI,MAAM,gBAAgB,MAAM,WAAW,CAAC;AAAA,MACxD;AAEA,UAAI,qBAAqB,KAAK,OAAO,MAAM;AACzC,wBAAgB,UAAU,IAAI,IAAI,CAAC;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,IAMA,SAAe;AACb,YAAM,OAAO;AAEb,sBAAgB,UAAU,IAAI,IAAI,CAAC;AAEnC,aAAO;AAAA,IACT;AAAA,IAKA,WAAiB;AACf,cAAI,sBAAQ,UAAU,IAAI,IAAI,CAAC,GAAG;AAChC,kBAAU,IAAI,IAAI,EAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,MAAM;AAC5C,mBAAS,SAAS;AAAA,QACpB,CAAC;AAAA,MACH;AAEA,aAAO,MAAM,SAAS;AAAA,IACxB;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withBreakpointManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withBreakpointManager.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev, isArray } from '../utils/index.js';\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n */\nfunction testBreakpoints(breakpoints: Array<[string[], Base]>) {\n  const { breakpoint } = useResize().props();\n  breakpoints.forEach(([breakpointKeys, instance]) => {\n    if (breakpointKeys.includes(breakpoint) && !instance.$isMounted) {\n      setTimeout(() => instance.$mount(), 0);\n    } else if (!breakpointKeys.includes(breakpoint) && instance.$isMounted) {\n      instance.$destroy();\n    }\n  });\n}\n\n/**\n * Prepare the components.\n */\nfunction mountComponents(\n  instance: Base,\n  breakpoints: Array<[string, BaseConstructor]>,\n): Array<[string[], Base]> {\n  return breakpoints.map(([bk, ComponentClass]) => {\n    const child = new ComponentClass(instance.$el);\n    Object.defineProperty(child, '$parent', { get: () => instance.$parent });\n    return [bk.split(' '), child];\n  });\n}\n\n/**\n * A cache object to hold each Base sub-instances.\n */\nconst instances:WeakMap<Base, Array<[string[], Base]>> = new WeakMap();\n\n/**\n * BreakpointManager class.\n */\nexport function withBreakpointManager<S extends Base>(\n  BaseClass: typeof Base,\n  breakpoints: Array<[string, BaseConstructor<Base>]>,\n): BaseDecorator<BaseInterface, S> {\n  if (!isArray(breakpoints)) {\n    if (isDev) {\n      throw new Error('[withBreakpointManager] The `breakpoints` parameter must be an array.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  if (breakpoints.length < 2) {\n    if (isDev) {\n      throw new Error('[withBreakpointManager] You must define at least 2 breakpoints.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  const { add, props } = useResize();\n\n  // Do nothing if no breakpoint has been defined.\n  // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n  if (!props().breakpoint) {\n    if (isDev) {\n      throw new Error('The `BreakpointManager` class requires breakpoints to be defined.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  /**\n   * Class.\n   */\n  class WithBreakpointManager<\n    T extends BaseProps = BaseProps,\n  > extends BaseClass<T> {\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      if (!instances.has(this)) {\n        instances.set(this, mountComponents(this, breakpoints));\n      }\n\n      add(`BreakpointManager-${this.$id}`, () => {\n        testBreakpoints(instances.get(this));\n      });\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    $mount(): this {\n      super.$mount();\n\n      testBreakpoints(instances.get(this));\n\n      return this;\n    }\n\n    /**\n     * Destroy all instances when the main one is destroyed.\n     */\n    $destroy():this {\n      if (isArray(instances.get(this))) {\n        instances.get(this).forEach(([, instance]) => {\n          instance.$destroy();\n        });\n      }\n\n      return super.$destroy();\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointManager;\n}\n"],
-  "mappings": "AAEA,SAAS,iBAAiB;AAC1B,SAAS,OAAO,eAAe;AAK/B,SAAS,gBAAgB,aAAsC;AAC7D,QAAM,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM;AACzC,cAAY,QAAQ,CAAC,CAAC,gBAAgB,QAAQ,MAAM;AAClD,QAAI,eAAe,SAAS,UAAU,KAAK,CAAC,SAAS,YAAY;AAC/D,iBAAW,MAAM,SAAS,OAAO,GAAG,CAAC;AAAA,IACvC,WAAW,CAAC,eAAe,SAAS,UAAU,KAAK,SAAS,YAAY;AACtE,eAAS,SAAS;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAKA,SAAS,gBACP,UACA,aACyB;AACzB,SAAO,YAAY,IAAI,CAAC,CAAC,IAAI,cAAc,MAAM;AAC/C,UAAM,QAAQ,IAAI,eAAe,SAAS,GAAG;AAC7C,WAAO,eAAe,OAAO,WAAW,EAAE,KAAK,MAAM,SAAS,QAAQ,CAAC;AACvE,WAAO,CAAC,GAAG,MAAM,GAAG,GAAG,KAAK;AAAA,EAC9B,CAAC;AACH;AAKA,MAAM,YAAmD,oBAAI,QAAQ;AAK9D,SAAS,sBACd,WACA,aACiC;AACjC,MAAI,CAAC,QAAQ,WAAW,GAAG;AACzB,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,uEAAuE;AAAA,IACzF;AAGA,WAAO;AAAA,EACT;AAEA,MAAI,YAAY,SAAS,GAAG;AAC1B,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,iEAAiE;AAAA,IACnF;AAGA,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,KAAK,MAAM,IAAI,UAAU;AAIjC,MAAI,CAAC,MAAM,EAAE,YAAY;AACvB,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,mEAAmE;AAAA,IACrF;AAGA,WAAO;AAAA,EACT;AAKA,QAAM,8BAEI,UAAa;AAAA,IAIrB,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,CAAC,UAAU,IAAI,IAAI,GAAG;AACxB,kBAAU,IAAI,MAAM,gBAAgB,MAAM,WAAW,CAAC;AAAA,MACxD;AAEA,UAAI,qBAAqB,KAAK,OAAO,MAAM;AACzC,wBAAgB,UAAU,IAAI,IAAI,CAAC;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,IAMA,SAAe;AACb,YAAM,OAAO;AAEb,sBAAgB,UAAU,IAAI,IAAI,CAAC;AAEnC,aAAO;AAAA,IACT;AAAA,IAKA,WAAgB;AACd,UAAI,QAAQ,UAAU,IAAI,IAAI,CAAC,GAAG;AAChC,kBAAU,IAAI,IAAI,EAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,MAAM;AAC5C,mBAAS,SAAS;AAAA,QACpB,CAAC;AAAA,MACH;AAEA,aAAO,MAAM,SAAS;AAAA,IACxB;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev, isArray } from '../utils/index.js';\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n */\nfunction testBreakpoints(breakpoints: Array<[string[], Base]>) {\n  const { breakpoint } = useResize().props();\n  breakpoints.forEach(([breakpointKeys, instance]) => {\n    if (breakpointKeys.includes(breakpoint) && !instance.$isMounted) {\n      setTimeout(() => instance.$mount(), 0);\n    } else if (!breakpointKeys.includes(breakpoint) && instance.$isMounted) {\n      instance.$destroy();\n    }\n  });\n}\n\n/**\n * Prepare the components.\n */\nfunction mountComponents(\n  instance: Base,\n  breakpoints: Array<[string, BaseConstructor]>,\n): Array<[string[], Base]> {\n  return breakpoints.map(([bk, ComponentClass]) => {\n    const child = new ComponentClass(instance.$el);\n    Object.defineProperty(child, '$parent', { get: () => instance.$parent });\n    return [bk.split(' '), child];\n  });\n}\n\n/**\n * A cache object to hold each Base sub-instances.\n */\nconst instances: WeakMap<Base, Array<[string[], Base]>> = new WeakMap();\n\n/**\n * BreakpointManager class.\n */\nexport function withBreakpointManager<S extends Base>(\n  BaseClass: typeof Base,\n  breakpoints: Array<[string, BaseConstructor<Base>]>,\n): BaseDecorator<BaseInterface, S> {\n  if (!isArray(breakpoints)) {\n    if (isDev) {\n      throw new Error('[withBreakpointManager] The `breakpoints` parameter must be an array.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  if (breakpoints.length < 2) {\n    if (isDev) {\n      throw new Error('[withBreakpointManager] You must define at least 2 breakpoints.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  const { add, props } = useResize();\n\n  // Do nothing if no breakpoint has been defined.\n  // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n  if (!props().breakpoint) {\n    if (isDev) {\n      throw new Error('The `BreakpointManager` class requires breakpoints to be defined.');\n    }\n\n    // @ts-ignore\n    return BaseClass;\n  }\n\n  /**\n   * Class.\n   */\n  class WithBreakpointManager<T extends BaseProps = BaseProps> extends BaseClass<T> {\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      if (!instances.has(this)) {\n        instances.set(this, mountComponents(this, breakpoints));\n      }\n\n      add(`BreakpointManager-${this.$id}`, () => {\n        testBreakpoints(instances.get(this));\n      });\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    $mount(): this {\n      super.$mount();\n\n      testBreakpoints(instances.get(this));\n\n      return this;\n    }\n\n    /**\n     * Destroy all instances when the main one is destroyed.\n     */\n    $destroy(): this {\n      if (isArray(instances.get(this))) {\n        instances.get(this).forEach(([, instance]) => {\n          instance.$destroy();\n        });\n      }\n\n      return super.$destroy();\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointManager;\n}\n"],
+  "mappings": "AAEA,SAAS,iBAAiB;AAC1B,SAAS,OAAO,eAAe;AAK/B,SAAS,gBAAgB,aAAsC;AAC7D,QAAM,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM;AACzC,cAAY,QAAQ,CAAC,CAAC,gBAAgB,QAAQ,MAAM;AAClD,QAAI,eAAe,SAAS,UAAU,KAAK,CAAC,SAAS,YAAY;AAC/D,iBAAW,MAAM,SAAS,OAAO,GAAG,CAAC;AAAA,IACvC,WAAW,CAAC,eAAe,SAAS,UAAU,KAAK,SAAS,YAAY;AACtE,eAAS,SAAS;AAAA,IACpB;AAAA,EACF,CAAC;AACH;AAKA,SAAS,gBACP,UACA,aACyB;AACzB,SAAO,YAAY,IAAI,CAAC,CAAC,IAAI,cAAc,MAAM;AAC/C,UAAM,QAAQ,IAAI,eAAe,SAAS,GAAG;AAC7C,WAAO,eAAe,OAAO,WAAW,EAAE,KAAK,MAAM,SAAS,QAAQ,CAAC;AACvE,WAAO,CAAC,GAAG,MAAM,GAAG,GAAG,KAAK;AAAA,EAC9B,CAAC;AACH;AAKA,MAAM,YAAoD,oBAAI,QAAQ;AAK/D,SAAS,sBACd,WACA,aACiC;AACjC,MAAI,CAAC,QAAQ,WAAW,GAAG;AACzB,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,uEAAuE;AAAA,IACzF;AAGA,WAAO;AAAA,EACT;AAEA,MAAI,YAAY,SAAS,GAAG;AAC1B,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,iEAAiE;AAAA,IACnF;AAGA,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,KAAK,MAAM,IAAI,UAAU;AAIjC,MAAI,CAAC,MAAM,EAAE,YAAY;AACvB,QAAI,OAAO;AACT,YAAM,IAAI,MAAM,mEAAmE;AAAA,IACrF;AAGA,WAAO;AAAA,EACT;AAKA,QAAM,8BAA+D,UAAa;AAAA,IAIhF,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,UAAI,CAAC,UAAU,IAAI,IAAI,GAAG;AACxB,kBAAU,IAAI,MAAM,gBAAgB,MAAM,WAAW,CAAC;AAAA,MACxD;AAEA,UAAI,qBAAqB,KAAK,OAAO,MAAM;AACzC,wBAAgB,UAAU,IAAI,IAAI,CAAC;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,IAMA,SAAe;AACb,YAAM,OAAO;AAEb,sBAAgB,UAAU,IAAI,IAAI,CAAC;AAEnC,aAAO;AAAA,IACT;AAAA,IAKA,WAAiB;AACf,UAAI,QAAQ,UAAU,IAAI,IAAI,CAAC,GAAG;AAChC,kBAAU,IAAI,IAAI,EAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,MAAM;AAC5C,mBAAS,SAAS;AAAA,QACpB,CAAC;AAAA,MACH;AAEA,aAAO,MAAM,SAAS;AAAA,IACxB;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withBreakpointObserver.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withBreakpointObserver.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev } from '../utils/index.js';\n\nexport interface WithBreakpointObserverProps extends BaseProps {\n  $options: {\n    activeBreakpoints?: string;\n    inactiveBreakpoints?: string;\n  };\n}\n\nexport interface WithBreakpointObserverInterface extends BaseInterface {\n  $mount():this;\n}\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n *\n * @param   {Base<WithBreakpointObserverProps>} instance The component's instance.\n * @param   {string} [breakpoint] The breakpoint to test.\n * @returns {string} The action to trigger.\n */\nfunction testBreakpoints(\n  instance: Base<WithBreakpointObserverProps>,\n  breakpoint: string = useResize().props().breakpoint,\n): string {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  const isInActiveBreakpoint =\n    activeBreakpoints && activeBreakpoints.split(' ').includes(breakpoint);\n  const isInInactiveBreakpoint =\n    inactiveBreakpoints && inactiveBreakpoints.split(' ').includes(breakpoint);\n\n  if (\n    (activeBreakpoints && isInActiveBreakpoint) ||\n    (inactiveBreakpoints && !isInInactiveBreakpoint)\n  ) {\n    return '$mount';\n  }\n\n  return '$destroy';\n}\n\n/**\n * Test if the given instance is configured for breakpoints.\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {boolean} True if configured correctly, false otherwise.\n */\nfunction hasBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): boolean {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  return Boolean(activeBreakpoints || inactiveBreakpoints);\n}\n\n/**\n * Test if the given instance has a conflicting configuration for breakpoints.\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {void}\n */\nfunction testConflictingBreakpointConfiguration(\n  instance: Base<WithBreakpointObserverProps>,\n): void {\n  const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;\n  if (activeBreakpoints && inactiveBreakpoints) {\n    throw new Error(\n      `[${name}] Incorrect configuration: the \\`activeBreakpoints\\` and \\`inactiveBreakpoints\\` are not compatible.`,\n    );\n  }\n}\n\n/**\n * Add the current instance to the resize service.\n * @param {string} key      The key for the resize service callback.\n * @param {Base}   instance The instance to observe.\n */\nfunction addToResize(key, instance) {\n  if (isDev) {\n    testConflictingBreakpointConfiguration(instance);\n  }\n\n  const { add, has } = useResize();\n\n  if (!has(key)) {\n    add(key, ({ breakpoint }) => {\n      const action = testBreakpoints(instance, breakpoint);\n\n      // Always destroy before mounting\n      if (action === '$destroy' && instance.$isMounted) {\n        instance[action]();\n      } else if (action === '$mount' && !instance.$isMounted) {\n        setTimeout(() => instance[action](), 0);\n      }\n    });\n  }\n}\n\n/**\n * BreakpointObserver class.\n */\nexport function withBreakpointObserver<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithBreakpointObserverInterface, S, WithBreakpointObserverProps> {\n  /**\n   * Class.\n   */\n  class WithBreakpointObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithBreakpointObserverProps\n  > {\n    /**\n     * Config.\n     */\n    static config:BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithBreakpointObserver`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        activeBreakpoints: String,\n        inactiveBreakpoints: String,\n      },\n    };\n\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element:HTMLElement) {\n      super(element);\n\n      const { remove, props } = useResize();\n      const { name } = this.$options;\n\n      // Do nothing if no breakpoint has been defined.\n      // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n      if (!props().breakpoint) {\n        if (isDev) {\n          throw new Error(\n            `[${name}] The \\`BreakpointObserver\\` class requires breakpoints to be defined.`,\n          );\n        }\n        return;\n      }\n\n      const key = `BreakpointObserver-${this.$id}`;\n\n      // Watch change on the `data-options` attribute to emit the `set:options` event.\n      const mutationObserver = new MutationObserver(([mutation]) => {\n        if (\n          mutation.type === 'attributes' &&\n          (mutation.attributeName === 'data-options' ||\n            mutation.attributeName.startsWith('data-option-'))\n        ) {\n          // Stop here silently when no breakpoint configuration given.\n          if (!hasBreakpointConfiguration(this)) {\n            this.$mount();\n            remove(key);\n            return;\n          }\n\n          addToResize(key, this);\n        }\n      });\n      mutationObserver.observe(this.$el, { attributes: true });\n\n      // Stop here silently when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return;\n      }\n\n      addToResize(key, this);\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    $mount():this {\n      // Execute normal behavior when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return super.$mount();\n      }\n\n      const action = testBreakpoints(this);\n      if (action === '$mount') {\n        return super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointObserver;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev } from '../utils/index.js';\n\nexport interface WithBreakpointObserverProps extends BaseProps {\n  $options: {\n    activeBreakpoints?: string;\n    inactiveBreakpoints?: string;\n  };\n}\n\nexport interface WithBreakpointObserverInterface extends BaseInterface {\n  $mount(): this;\n}\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n *\n * @param   {Base<WithBreakpointObserverProps>} instance The component's instance.\n * @param   {string} [breakpoint] The breakpoint to test.\n * @returns {string} The action to trigger.\n */\nfunction testBreakpoints(\n  instance: Base<WithBreakpointObserverProps>,\n  breakpoint: string = useResize().props().breakpoint,\n): string {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  const isInActiveBreakpoint =\n    activeBreakpoints && activeBreakpoints.split(' ').includes(breakpoint);\n  const isInInactiveBreakpoint =\n    inactiveBreakpoints && inactiveBreakpoints.split(' ').includes(breakpoint);\n\n  if (\n    (activeBreakpoints && isInActiveBreakpoint) ||\n    (inactiveBreakpoints && !isInInactiveBreakpoint)\n  ) {\n    return '$mount';\n  }\n\n  return '$destroy';\n}\n\n/**\n * Test if the given instance is configured for breakpoints.\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {boolean} True if configured correctly, false otherwise.\n */\nfunction hasBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): boolean {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  return Boolean(activeBreakpoints || inactiveBreakpoints);\n}\n\n/**\n * Test if the given instance has a conflicting configuration for breakpoints.\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {void}\n */\nfunction testConflictingBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): void {\n  const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;\n  if (activeBreakpoints && inactiveBreakpoints) {\n    throw new Error(\n      `[${name}] Incorrect configuration: the \\`activeBreakpoints\\` and \\`inactiveBreakpoints\\` are not compatible.`,\n    );\n  }\n}\n\n/**\n * Add the current instance to the resize service.\n * @param {string} key      The key for the resize service callback.\n * @param {Base}   instance The instance to observe.\n */\nfunction addToResize(key, instance) {\n  if (isDev) {\n    testConflictingBreakpointConfiguration(instance);\n  }\n\n  const { add, has } = useResize();\n\n  if (!has(key)) {\n    add(key, ({ breakpoint }) => {\n      const action = testBreakpoints(instance, breakpoint);\n\n      // Always destroy before mounting\n      if (action === '$destroy' && instance.$isMounted) {\n        instance[action]();\n      } else if (action === '$mount' && !instance.$isMounted) {\n        setTimeout(() => instance[action](), 0);\n      }\n    });\n  }\n}\n\n/**\n * BreakpointObserver class.\n */\nexport function withBreakpointObserver<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithBreakpointObserverInterface, S, WithBreakpointObserverProps> {\n  /**\n   * Class.\n   */\n  class WithBreakpointObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithBreakpointObserverProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithBreakpointObserver`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        activeBreakpoints: String,\n        inactiveBreakpoints: String,\n      },\n    };\n\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const { remove, props } = useResize();\n      const { name } = this.$options;\n\n      // Do nothing if no breakpoint has been defined.\n      // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n      if (!props().breakpoint) {\n        if (isDev) {\n          throw new Error(\n            `[${name}] The \\`BreakpointObserver\\` class requires breakpoints to be defined.`,\n          );\n        }\n        return;\n      }\n\n      const key = `BreakpointObserver-${this.$id}`;\n\n      // Watch change on the `data-options` attribute to emit the `set:options` event.\n      const mutationObserver = new MutationObserver(([mutation]) => {\n        if (\n          mutation.type === 'attributes' &&\n          (mutation.attributeName === 'data-options' ||\n            mutation.attributeName.startsWith('data-option-'))\n        ) {\n          // Stop here silently when no breakpoint configuration given.\n          if (!hasBreakpointConfiguration(this)) {\n            this.$mount();\n            remove(key);\n            return;\n          }\n\n          addToResize(key, this);\n        }\n      });\n      mutationObserver.observe(this.$el, { attributes: true });\n\n      // Stop here silently when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return;\n      }\n\n      addToResize(key, this);\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    $mount(): this {\n      // Execute normal behavior when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return super.$mount();\n      }\n\n      const action = testBreakpoints(this);\n      if (action === '$mount') {\n        return super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointObserver;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/decorators/withBreakpointObserver.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withBreakpointObserver.ts"],
-  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev } from '../utils/index.js';\n\nexport interface WithBreakpointObserverProps extends BaseProps {\n  $options: {\n    activeBreakpoints?: string;\n    inactiveBreakpoints?: string;\n  };\n}\n\nexport interface WithBreakpointObserverInterface extends BaseInterface {\n  $mount():this;\n}\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n *\n * @param   {Base<WithBreakpointObserverProps>} instance The component's instance.\n * @param   {string} [breakpoint] The breakpoint to test.\n * @returns {string} The action to trigger.\n */\nfunction testBreakpoints(\n  instance: Base<WithBreakpointObserverProps>,\n  breakpoint: string = useResize().props().breakpoint,\n): string {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  const isInActiveBreakpoint =\n    activeBreakpoints && activeBreakpoints.split(' ').includes(breakpoint);\n  const isInInactiveBreakpoint =\n    inactiveBreakpoints && inactiveBreakpoints.split(' ').includes(breakpoint);\n\n  if (\n    (activeBreakpoints && isInActiveBreakpoint) ||\n    (inactiveBreakpoints && !isInInactiveBreakpoint)\n  ) {\n    return '$mount';\n  }\n\n  return '$destroy';\n}\n\n/**\n * Test if the given instance is configured for breakpoints.\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {boolean} True if configured correctly, false otherwise.\n */\nfunction hasBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): boolean {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  return Boolean(activeBreakpoints || inactiveBreakpoints);\n}\n\n/**\n * Test if the given instance has a conflicting configuration for breakpoints.\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {void}\n */\nfunction testConflictingBreakpointConfiguration(\n  instance: Base<WithBreakpointObserverProps>,\n): void {\n  const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;\n  if (activeBreakpoints && inactiveBreakpoints) {\n    throw new Error(\n      `[${name}] Incorrect configuration: the \\`activeBreakpoints\\` and \\`inactiveBreakpoints\\` are not compatible.`,\n    );\n  }\n}\n\n/**\n * Add the current instance to the resize service.\n * @param {string} key      The key for the resize service callback.\n * @param {Base}   instance The instance to observe.\n */\nfunction addToResize(key, instance) {\n  if (isDev) {\n    testConflictingBreakpointConfiguration(instance);\n  }\n\n  const { add, has } = useResize();\n\n  if (!has(key)) {\n    add(key, ({ breakpoint }) => {\n      const action = testBreakpoints(instance, breakpoint);\n\n      // Always destroy before mounting\n      if (action === '$destroy' && instance.$isMounted) {\n        instance[action]();\n      } else if (action === '$mount' && !instance.$isMounted) {\n        setTimeout(() => instance[action](), 0);\n      }\n    });\n  }\n}\n\n/**\n * BreakpointObserver class.\n */\nexport function withBreakpointObserver<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithBreakpointObserverInterface, S, WithBreakpointObserverProps> {\n  /**\n   * Class.\n   */\n  class WithBreakpointObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithBreakpointObserverProps\n  > {\n    /**\n     * Config.\n     */\n    static config:BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithBreakpointObserver`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        activeBreakpoints: String,\n        inactiveBreakpoints: String,\n      },\n    };\n\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element:HTMLElement) {\n      super(element);\n\n      const { remove, props } = useResize();\n      const { name } = this.$options;\n\n      // Do nothing if no breakpoint has been defined.\n      // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n      if (!props().breakpoint) {\n        if (isDev) {\n          throw new Error(\n            `[${name}] The \\`BreakpointObserver\\` class requires breakpoints to be defined.`,\n          );\n        }\n        return;\n      }\n\n      const key = `BreakpointObserver-${this.$id}`;\n\n      // Watch change on the `data-options` attribute to emit the `set:options` event.\n      const mutationObserver = new MutationObserver(([mutation]) => {\n        if (\n          mutation.type === 'attributes' &&\n          (mutation.attributeName === 'data-options' ||\n            mutation.attributeName.startsWith('data-option-'))\n        ) {\n          // Stop here silently when no breakpoint configuration given.\n          if (!hasBreakpointConfiguration(this)) {\n            this.$mount();\n            remove(key);\n            return;\n          }\n\n          addToResize(key, this);\n        }\n      });\n      mutationObserver.observe(this.$el, { attributes: true });\n\n      // Stop here silently when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return;\n      }\n\n      addToResize(key, this);\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    $mount():this {\n      // Execute normal behavior when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return super.$mount();\n      }\n\n      const action = testBreakpoints(this);\n      if (action === '$mount') {\n        return super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointObserver;\n}\n"],
-  "mappings": "AAEA,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AAoBtB,SAAS,gBACP,UACA,aAAqB,UAAU,EAAE,MAAM,EAAE,YACjC;AACR,QAAM,EAAE,mBAAmB,oBAAoB,IAAI,SAAS;AAC5D,QAAM,uBACJ,qBAAqB,kBAAkB,MAAM,GAAG,EAAE,SAAS,UAAU;AACvE,QAAM,yBACJ,uBAAuB,oBAAoB,MAAM,GAAG,EAAE,SAAS,UAAU;AAE3E,MACG,qBAAqB,wBACrB,uBAAuB,CAAC,wBACzB;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAOA,SAAS,2BAA2B,UAAsD;AACxF,QAAM,EAAE,mBAAmB,oBAAoB,IAAI,SAAS;AAC5D,SAAO,QAAQ,qBAAqB,mBAAmB;AACzD;AAOA,SAAS,uCACP,UACM;AACN,QAAM,EAAE,mBAAmB,qBAAqB,KAAK,IAAI,SAAS;AAClE,MAAI,qBAAqB,qBAAqB;AAC5C,UAAM,IAAI;AAAA,MACR,IAAI;AAAA,IACN;AAAA,EACF;AACF;AAOA,SAAS,YAAY,KAAK,UAAU;AAClC,MAAI,OAAO;AACT,2CAAuC,QAAQ;AAAA,EACjD;AAEA,QAAM,EAAE,KAAK,IAAI,IAAI,UAAU;AAE/B,MAAI,CAAC,IAAI,GAAG,GAAG;AACb,QAAI,KAAK,CAAC,EAAE,WAAW,MAAM;AAC3B,YAAM,SAAS,gBAAgB,UAAU,UAAU;AAGnD,UAAI,WAAW,cAAc,SAAS,YAAY;AAChD,iBAAS,QAAQ;AAAA,MACnB,WAAW,WAAW,YAAY,CAAC,SAAS,YAAY;AACtD,mBAAW,MAAM,SAAS,QAAQ,GAAG,CAAC;AAAA,MACxC;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAKO,SAAS,uBACd,WACgF;AAIhF,QAAM,+BAAgE,UAEpE;AAAA,IAIA,OAAO,SAAoB;AAAA,MACzB,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,mBAAmB;AAAA,QACnB,qBAAqB;AAAA,MACvB;AAAA,IACF;AAAA,IAKA,YAAY,SAAqB;AAC/B,YAAM,OAAO;AAEb,YAAM,EAAE,QAAQ,MAAM,IAAI,UAAU;AACpC,YAAM,EAAE,KAAK,IAAI,KAAK;AAItB,UAAI,CAAC,MAAM,EAAE,YAAY;AACvB,YAAI,OAAO;AACT,gBAAM,IAAI;AAAA,YACR,IAAI;AAAA,UACN;AAAA,QACF;AACA;AAAA,MACF;AAEA,YAAM,MAAM,sBAAsB,KAAK;AAGvC,YAAM,mBAAmB,IAAI,iBAAiB,CAAC,CAAC,QAAQ,MAAM;AAC5D,YACE,SAAS,SAAS,iBACjB,SAAS,kBAAkB,kBAC1B,SAAS,cAAc,WAAW,cAAc,IAClD;AAEA,cAAI,CAAC,2BAA2B,IAAI,GAAG;AACrC,iBAAK,OAAO;AACZ,mBAAO,GAAG;AACV;AAAA,UACF;AAEA,sBAAY,KAAK,IAAI;AAAA,QACvB;AAAA,MACF,CAAC;AACD,uBAAiB,QAAQ,KAAK,KAAK,EAAE,YAAY,KAAK,CAAC;AAGvD,UAAI,CAAC,2BAA2B,IAAI,GAAG;AACrC;AAAA,MACF;AAEA,kBAAY,KAAK,IAAI;AAAA,IACvB;AAAA,IAMA,SAAc;AAEZ,UAAI,CAAC,2BAA2B,IAAI,GAAG;AACrC,eAAO,MAAM,OAAO;AAAA,MACtB;AAEA,YAAM,SAAS,gBAAgB,IAAI;AACnC,UAAI,WAAW,UAAU;AACvB,eAAO,MAAM,OAAO;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport { useResize } from '../services/index.js';\nimport { isDev } from '../utils/index.js';\n\nexport interface WithBreakpointObserverProps extends BaseProps {\n  $options: {\n    activeBreakpoints?: string;\n    inactiveBreakpoints?: string;\n  };\n}\n\nexport interface WithBreakpointObserverInterface extends BaseInterface {\n  $mount(): this;\n}\n\n/**\n * Test the breakpoins of the given Base instance and return the hook to call.\n *\n * @param   {Base<WithBreakpointObserverProps>} instance The component's instance.\n * @param   {string} [breakpoint] The breakpoint to test.\n * @returns {string} The action to trigger.\n */\nfunction testBreakpoints(\n  instance: Base<WithBreakpointObserverProps>,\n  breakpoint: string = useResize().props().breakpoint,\n): string {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  const isInActiveBreakpoint =\n    activeBreakpoints && activeBreakpoints.split(' ').includes(breakpoint);\n  const isInInactiveBreakpoint =\n    inactiveBreakpoints && inactiveBreakpoints.split(' ').includes(breakpoint);\n\n  if (\n    (activeBreakpoints && isInActiveBreakpoint) ||\n    (inactiveBreakpoints && !isInInactiveBreakpoint)\n  ) {\n    return '$mount';\n  }\n\n  return '$destroy';\n}\n\n/**\n * Test if the given instance is configured for breakpoints.\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {boolean} True if configured correctly, false otherwise.\n */\nfunction hasBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): boolean {\n  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;\n  return Boolean(activeBreakpoints || inactiveBreakpoints);\n}\n\n/**\n * Test if the given instance has a conflicting configuration for breakpoints.\n * @param  {Base<WithBreakpointObserverProps>} instance A Base class instance.\n * @returns {void}\n */\nfunction testConflictingBreakpointConfiguration(instance: Base<WithBreakpointObserverProps>): void {\n  const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;\n  if (activeBreakpoints && inactiveBreakpoints) {\n    throw new Error(\n      `[${name}] Incorrect configuration: the \\`activeBreakpoints\\` and \\`inactiveBreakpoints\\` are not compatible.`,\n    );\n  }\n}\n\n/**\n * Add the current instance to the resize service.\n * @param {string} key      The key for the resize service callback.\n * @param {Base}   instance The instance to observe.\n */\nfunction addToResize(key, instance) {\n  if (isDev) {\n    testConflictingBreakpointConfiguration(instance);\n  }\n\n  const { add, has } = useResize();\n\n  if (!has(key)) {\n    add(key, ({ breakpoint }) => {\n      const action = testBreakpoints(instance, breakpoint);\n\n      // Always destroy before mounting\n      if (action === '$destroy' && instance.$isMounted) {\n        instance[action]();\n      } else if (action === '$mount' && !instance.$isMounted) {\n        setTimeout(() => instance[action](), 0);\n      }\n    });\n  }\n}\n\n/**\n * BreakpointObserver class.\n */\nexport function withBreakpointObserver<S extends Base>(\n  BaseClass: typeof Base,\n): BaseDecorator<WithBreakpointObserverInterface, S, WithBreakpointObserverProps> {\n  /**\n   * Class.\n   */\n  class WithBreakpointObserver<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithBreakpointObserverProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithBreakpointObserver`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        activeBreakpoints: String,\n        inactiveBreakpoints: String,\n      },\n    };\n\n    /**\n     * Watch for the document resize to test the breakpoints.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const { remove, props } = useResize();\n      const { name } = this.$options;\n\n      // Do nothing if no breakpoint has been defined.\n      // @see https://js-toolkit.meta.fr/services/resize.html#breakpoint\n      if (!props().breakpoint) {\n        if (isDev) {\n          throw new Error(\n            `[${name}] The \\`BreakpointObserver\\` class requires breakpoints to be defined.`,\n          );\n        }\n        return;\n      }\n\n      const key = `BreakpointObserver-${this.$id}`;\n\n      // Watch change on the `data-options` attribute to emit the `set:options` event.\n      const mutationObserver = new MutationObserver(([mutation]) => {\n        if (\n          mutation.type === 'attributes' &&\n          (mutation.attributeName === 'data-options' ||\n            mutation.attributeName.startsWith('data-option-'))\n        ) {\n          // Stop here silently when no breakpoint configuration given.\n          if (!hasBreakpointConfiguration(this)) {\n            this.$mount();\n            remove(key);\n            return;\n          }\n\n          addToResize(key, this);\n        }\n      });\n      mutationObserver.observe(this.$el, { attributes: true });\n\n      // Stop here silently when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return;\n      }\n\n      addToResize(key, this);\n    }\n\n    /**\n     * Override the default $mount method to prevent component's from being\n     * mounted when they should not.\n     */\n    $mount(): this {\n      // Execute normal behavior when no breakpoint configuration given.\n      if (!hasBreakpointConfiguration(this)) {\n        return super.$mount();\n      }\n\n      const action = testBreakpoints(this);\n      if (action === '$mount') {\n        return super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithBreakpointObserver;\n}\n"],
+  "mappings": "AAEA,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AAoBtB,SAAS,gBACP,UACA,aAAqB,UAAU,EAAE,MAAM,EAAE,YACjC;AACR,QAAM,EAAE,mBAAmB,oBAAoB,IAAI,SAAS;AAC5D,QAAM,uBACJ,qBAAqB,kBAAkB,MAAM,GAAG,EAAE,SAAS,UAAU;AACvE,QAAM,yBACJ,uBAAuB,oBAAoB,MAAM,GAAG,EAAE,SAAS,UAAU;AAE3E,MACG,qBAAqB,wBACrB,uBAAuB,CAAC,wBACzB;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAOA,SAAS,2BAA2B,UAAsD;AACxF,QAAM,EAAE,mBAAmB,oBAAoB,IAAI,SAAS;AAC5D,SAAO,QAAQ,qBAAqB,mBAAmB;AACzD;AAOA,SAAS,uCAAuC,UAAmD;AACjG,QAAM,EAAE,mBAAmB,qBAAqB,KAAK,IAAI,SAAS;AAClE,MAAI,qBAAqB,qBAAqB;AAC5C,UAAM,IAAI;AAAA,MACR,IAAI;AAAA,IACN;AAAA,EACF;AACF;AAOA,SAAS,YAAY,KAAK,UAAU;AAClC,MAAI,OAAO;AACT,2CAAuC,QAAQ;AAAA,EACjD;AAEA,QAAM,EAAE,KAAK,IAAI,IAAI,UAAU;AAE/B,MAAI,CAAC,IAAI,GAAG,GAAG;AACb,QAAI,KAAK,CAAC,EAAE,WAAW,MAAM;AAC3B,YAAM,SAAS,gBAAgB,UAAU,UAAU;AAGnD,UAAI,WAAW,cAAc,SAAS,YAAY;AAChD,iBAAS,QAAQ;AAAA,MACnB,WAAW,WAAW,YAAY,CAAC,SAAS,YAAY;AACtD,mBAAW,MAAM,SAAS,QAAQ,GAAG,CAAC;AAAA,MACxC;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAKO,SAAS,uBACd,WACgF;AAIhF,QAAM,+BAAgE,UAEpE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,mBAAmB;AAAA,QACnB,qBAAqB;AAAA,MACvB;AAAA,IACF;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,YAAM,EAAE,QAAQ,MAAM,IAAI,UAAU;AACpC,YAAM,EAAE,KAAK,IAAI,KAAK;AAItB,UAAI,CAAC,MAAM,EAAE,YAAY;AACvB,YAAI,OAAO;AACT,gBAAM,IAAI;AAAA,YACR,IAAI;AAAA,UACN;AAAA,QACF;AACA;AAAA,MACF;AAEA,YAAM,MAAM,sBAAsB,KAAK;AAGvC,YAAM,mBAAmB,IAAI,iBAAiB,CAAC,CAAC,QAAQ,MAAM;AAC5D,YACE,SAAS,SAAS,iBACjB,SAAS,kBAAkB,kBAC1B,SAAS,cAAc,WAAW,cAAc,IAClD;AAEA,cAAI,CAAC,2BAA2B,IAAI,GAAG;AACrC,iBAAK,OAAO;AACZ,mBAAO,GAAG;AACV;AAAA,UACF;AAEA,sBAAY,KAAK,IAAI;AAAA,QACvB;AAAA,MACF,CAAC;AACD,uBAAiB,QAAQ,KAAK,KAAK,EAAE,YAAY,KAAK,CAAC;AAGvD,UAAI,CAAC,2BAA2B,IAAI,GAAG;AACrC;AAAA,MACF;AAEA,kBAAY,KAAK,IAAI;AAAA,IACvB;AAAA,IAMA,SAAe;AAEb,UAAI,CAAC,2BAA2B,IAAI,GAAG;AACrC,eAAO,MAAM,OAAO;AAAA,MACtB;AAEA,YAAM,SAAS,gBAAgB,IAAI;AACnC,UAAI,WAAW,UAAU;AACvB,eAAO,MAAM,OAAO;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withDrag.cjs.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"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,sBAAwB;AAajB,SAAS,SACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,QAAQ,QAAQ,IAA0B,CAAC,GAC5C;AAIjC,QAAM,iBAAkD,UAAiC;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,OAAO,CAAC,SAAS;AAAA,IACnB;AAAA,IAKA,YAAY,SAAqB;AAC/B,YAAM,OAAO;AAEb,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU;AAAA,UACb;AAAA,UACA,wBAAQ,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;",
+  "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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,sBAAwB;AAajB,SAAS,SACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,QAAQ,QAAQ,IAA0B,CAAC,GAC5C;AAIjC,QAAM,iBAAkD,UAAiC;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,OAAO,CAAC,SAAS;AAAA,IACnB;AAAA,IAKA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,UAAU;AAAA,UACb;AAAA,UACA,wBAAQ,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/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"],
-  "mappings": "AAGA,SAAS,eAAe;AAajB,SAAS,SACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,QAAQ,QAAQ,IAA0B,CAAC,GAC5C;AAIjC,QAAM,iBAAkD,UAAiC;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,OAAO,CAAC,SAAS;AAAA,IACnB;AAAA,IAKA,YAAY,SAAqB;AAC/B,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;",
+  "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"],
+  "mappings": "AAGA,SAAS,eAAe;AAajB,SAAS,SACd,WACA,EAAE,SAAS,CAAC,aAAa,SAAS,QAAQ,QAAQ,IAA0B,CAAC,GAC5C;AAIjC,QAAM,iBAAkD,UAAiC;AAAA,IAIvF,OAAO,SAAqB;AAAA,MAC1B,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,OAAO,CAAC,SAAS;AAAA,IACnB;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/withMountWhenInView.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withMountWhenInView.ts"],
-  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithMountWhenInViewProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n}\n\nexport interface WithMountWhenInViewInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __isVisible: boolean;\n  /**\n   * @private\n   */\n  __observer: IntersectionObserver;\n  $mount():this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountWhenInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: [0, 1] },\n):BaseDecorator<WithMountWhenInViewInterface, S, WithMountWhenInViewProps> {\n  /**\n   * Class.\n   */\n  class WithMountWhenInView<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithMountWhenInViewProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        intersectionObserver: Object,\n      },\n    };\n\n    /**\n     * Is the component visible?\n     * @private\n     */\n    __isVisible = false;\n\n    /**\n     * The component's observer.\n     * @private\n     */\n    __observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.__observer = new IntersectionObserver(\n        (entries) => {\n          const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);\n          if (this.__isVisible !== isVisible) {\n            this.__isVisible = isVisible;\n\n            if (isVisible) {\n              this.$mount();\n            } else {\n              setTimeout(() => this.$destroy());\n            }\n          }\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options as typeof this.$options & WithMountWhenInViewProps['$options'])\n            .intersectionObserver,\n        },\n      );\n\n      this.__observer.observe(this.$el);\n\n      this.$on('terminated', () => {\n        this.__observer.disconnect();\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    $mount() {\n      if (this.__isVisible) {\n        super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountWhenInView;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBO,SAAS,oBACd,WAEA,iBAA2C,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,GACU;AAIzE,QAAM,4BAA6D,UAEjE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,sBAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IAMA,cAAc;AAAA,IAMd;AAAA,IAOA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,aAAa,IAAI;AAAA,QACpB,CAAC,YAAY;AACX,gBAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,UAAU,OAAO,MAAM,gBAAgB,KAAK;AACnF,cAAI,KAAK,gBAAgB,WAAW;AAClC,iBAAK,cAAc;AAEnB,gBAAI,WAAW;AACb,mBAAK,OAAO;AAAA,YACd,OAAO;AACL,yBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SACN;AAAA,QACL;AAAA,MACF;AAEA,WAAK,WAAW,QAAQ,KAAK,GAAG;AAEhC,WAAK,IAAI,cAAc,MAAM;AAC3B,aAAK,WAAW,WAAW;AAAA,MAC7B,CAAC;AAAA,IACH;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,aAAa;AACpB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithMountWhenInViewProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n}\n\nexport interface WithMountWhenInViewInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __isVisible: boolean;\n  /**\n   * @private\n   */\n  __observer: IntersectionObserver;\n  $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountWhenInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: [0, 1] },\n): BaseDecorator<WithMountWhenInViewInterface, S, WithMountWhenInViewProps> {\n  /**\n   * Class.\n   */\n  class WithMountWhenInView<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithMountWhenInViewProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        intersectionObserver: Object,\n      },\n    };\n\n    /**\n     * Is the component visible?\n     * @private\n     */\n    __isVisible = false;\n\n    /**\n     * The component's observer.\n     * @private\n     */\n    __observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.__observer = new IntersectionObserver(\n        (entries) => {\n          const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);\n          if (this.__isVisible !== isVisible) {\n            this.__isVisible = isVisible;\n\n            if (isVisible) {\n              this.$mount();\n            } else {\n              setTimeout(() => this.$destroy());\n            }\n          }\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options as typeof this.$options & WithMountWhenInViewProps['$options'])\n            .intersectionObserver,\n        },\n      );\n\n      this.__observer.observe(this.$el);\n\n      this.$on('terminated', () => {\n        this.__observer.disconnect();\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    $mount() {\n      if (this.__isVisible) {\n        super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountWhenInView;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBO,SAAS,oBACd,WAEA,iBAA2C,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,GACW;AAI1E,QAAM,4BAA6D,UAEjE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,sBAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IAMA,cAAc;AAAA,IAMd;AAAA,IAOA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,aAAa,IAAI;AAAA,QACpB,CAAC,YAAY;AACX,gBAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,UAAU,OAAO,MAAM,gBAAgB,KAAK;AACnF,cAAI,KAAK,gBAAgB,WAAW;AAClC,iBAAK,cAAc;AAEnB,gBAAI,WAAW;AACb,mBAAK,OAAO;AAAA,YACd,OAAO;AACL,yBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SACN;AAAA,QACL;AAAA,MACF;AAEA,WAAK,WAAW,QAAQ,KAAK,GAAG;AAEhC,WAAK,IAAI,cAAc,MAAM;AAC3B,aAAK,WAAW,WAAW;AAAA,MAC7B,CAAC;AAAA,IACH;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,aAAa;AACpB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withMountWhenInView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withMountWhenInView.ts"],
-  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithMountWhenInViewProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n}\n\nexport interface WithMountWhenInViewInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __isVisible: boolean;\n  /**\n   * @private\n   */\n  __observer: IntersectionObserver;\n  $mount():this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountWhenInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: [0, 1] },\n):BaseDecorator<WithMountWhenInViewInterface, S, WithMountWhenInViewProps> {\n  /**\n   * Class.\n   */\n  class WithMountWhenInView<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithMountWhenInViewProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        intersectionObserver: Object,\n      },\n    };\n\n    /**\n     * Is the component visible?\n     * @private\n     */\n    __isVisible = false;\n\n    /**\n     * The component's observer.\n     * @private\n     */\n    __observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.__observer = new IntersectionObserver(\n        (entries) => {\n          const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);\n          if (this.__isVisible !== isVisible) {\n            this.__isVisible = isVisible;\n\n            if (isVisible) {\n              this.$mount();\n            } else {\n              setTimeout(() => this.$destroy());\n            }\n          }\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options as typeof this.$options & WithMountWhenInViewProps['$options'])\n            .intersectionObserver,\n        },\n      );\n\n      this.__observer.observe(this.$el);\n\n      this.$on('terminated', () => {\n        this.__observer.disconnect();\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    $mount() {\n      if (this.__isVisible) {\n        super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountWhenInView;\n}\n"],
-  "mappings": "AAwBO,SAAS,oBACd,WAEA,iBAA2C,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,GACU;AAIzE,QAAM,4BAA6D,UAEjE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,sBAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IAMA,cAAc;AAAA,IAMd;AAAA,IAOA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,aAAa,IAAI;AAAA,QACpB,CAAC,YAAY;AACX,gBAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,UAAU,OAAO,MAAM,gBAAgB,KAAK;AACnF,cAAI,KAAK,gBAAgB,WAAW;AAClC,iBAAK,cAAc;AAEnB,gBAAI,WAAW;AACb,mBAAK,OAAO;AAAA,YACd,OAAO;AACL,yBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SACN;AAAA,QACL;AAAA,MACF;AAEA,WAAK,WAAW,QAAQ,KAAK,GAAG;AAEhC,WAAK,IAAI,cAAc,MAAM;AAC3B,aAAK,WAAW,WAAW;AAAA,MAC7B,CAAC;AAAA,IACH;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,aAAa;AACpB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\n\nexport interface WithMountWhenInViewProps extends BaseProps {\n  $options: {\n    intersectionObserver: IntersectionObserverInit;\n  };\n}\n\nexport interface WithMountWhenInViewInterface extends BaseInterface {\n  /**\n   * @private\n   */\n  __isVisible: boolean;\n  /**\n   * @private\n   */\n  __observer: IntersectionObserver;\n  $mount(): this;\n}\n\n/**\n * IntersectionObserver decoration.\n */\nexport function withMountWhenInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  // eslint-disable-next-line unicorn/no-object-as-default-parameter\n  defaultOptions: IntersectionObserverInit = { threshold: [0, 1] },\n): BaseDecorator<WithMountWhenInViewInterface, S, WithMountWhenInViewProps> {\n  /**\n   * Class.\n   */\n  class WithMountWhenInView<T extends BaseProps = BaseProps> extends BaseClass<\n    T & WithMountWhenInViewProps\n  > {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      options: {\n        ...(BaseClass.config?.options || {}),\n        intersectionObserver: Object,\n      },\n    };\n\n    /**\n     * Is the component visible?\n     * @private\n     */\n    __isVisible = false;\n\n    /**\n     * The component's observer.\n     * @private\n     */\n    __observer: IntersectionObserver;\n\n    /**\n     * Create an observer when the class in instantiated.\n     *\n     * @param {HTMLElement} element The component's root element.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      this.__observer = new IntersectionObserver(\n        (entries) => {\n          const isVisible = entries.reduce((acc, entry) => acc || entry.isIntersecting, false);\n          if (this.__isVisible !== isVisible) {\n            this.__isVisible = isVisible;\n\n            if (isVisible) {\n              this.$mount();\n            } else {\n              setTimeout(() => this.$destroy());\n            }\n          }\n        },\n        {\n          ...defaultOptions,\n          ...(this.$options as typeof this.$options & WithMountWhenInViewProps['$options'])\n            .intersectionObserver,\n        },\n      );\n\n      this.__observer.observe(this.$el);\n\n      this.$on('terminated', () => {\n        this.__observer.disconnect();\n      });\n    }\n\n    /**\n     * Override the mounting of the component.\n     */\n    $mount() {\n      if (this.__isVisible) {\n        super.$mount();\n      }\n\n      return this;\n    }\n  }\n\n  // @ts-ignore\n  return WithMountWhenInView;\n}\n"],
+  "mappings": "AAwBO,SAAS,oBACd,WAEA,iBAA2C,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,GACW;AAI1E,QAAM,4BAA6D,UAEjE;AAAA,IAIA,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,SAAS;AAAA,QACP,GAAI,UAAU,QAAQ,WAAW,CAAC;AAAA,QAClC,sBAAsB;AAAA,MACxB;AAAA,IACF;AAAA,IAMA,cAAc;AAAA,IAMd;AAAA,IAOA,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,WAAK,aAAa,IAAI;AAAA,QACpB,CAAC,YAAY;AACX,gBAAM,YAAY,QAAQ,OAAO,CAAC,KAAK,UAAU,OAAO,MAAM,gBAAgB,KAAK;AACnF,cAAI,KAAK,gBAAgB,WAAW;AAClC,iBAAK,cAAc;AAEnB,gBAAI,WAAW;AACb,mBAAK,OAAO;AAAA,YACd,OAAO;AACL,yBAAW,MAAM,KAAK,SAAS,CAAC;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,GAAI,KAAK,SACN;AAAA,QACL;AAAA,MACF;AAEA,WAAK,WAAW,QAAQ,KAAK,GAAG;AAEhC,WAAK,IAAI,cAAc,MAAM;AAC3B,aAAK,WAAW,WAAW;AAAA,MAC7B,CAAC;AAAA,IACH;AAAA,IAKA,SAAS;AACP,UAAI,KAAK,aAAa;AACpB,cAAM,OAAO;AAAA,MACf;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withResponsiveOptions.cjs.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<\n    T extends BaseProps = BaseProps,\n  > 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": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sCAAyC;AAKlC,SAAS,sBACd,WACiC;AAIjC,QAAM,8BAEI,UAAa;AAAA,IAIrB,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 { 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": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sCAAyC;AAKlC,SAAS,sBACd,WACiC;AAIjC,QAAM,8BAA+D,UAAa;AAAA,IAIhF,IAAI,aAA6E;AAC/E,aAAO;AAAA,QACL,GAAG,MAAM;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

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<\n    T extends BaseProps = BaseProps,\n  > 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;AAIjC,QAAM,8BAEI,UAAa;AAAA,IAIrB,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 { 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;AAIjC,QAAM,8BAA+D,UAAa;AAAA,IAIhF,IAAI,aAA6E;AAC/E,aAAO;AAAA,QACL,GAAG,MAAM;AAAA,QACT,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withScrolledInView.cjs

@@ -45,7 +45,10 @@ function updateProps(props, dampFactor, dampPrecision, axis = "x") {
   );
 }
 function withScrolledInView(BaseClass, options = {}) {
-  class WithScrolledInView extends (0, import_withMountWhenInView.withMountWhenInView)(BaseClass, options) {
+  class WithScrolledInView extends (0, import_withMountWhenInView.withMountWhenInView)(
+    BaseClass,
+    options
+  ) {
     static config = {
       name: `${BaseClass.config.name}WithMountWhenInView`,
       emits: ["scrolledInView"],

package/decorators/withScrolledInView.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withScrolledInView.ts"],
-  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { RafServiceProps, ScrollServiceProps, ResizeServiceProps } from '../services/index.js';\nimport { withMountWhenInView } from './withMountWhenInView.js';\nimport { damp, clamp, clamp01, getOffsetSizes, isFunction, useScheduler } from '../utils/index.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport interface WithScrolledInViewProps extends BaseProps {\n  $options: {\n    dampFactor: number;\n    dampPrecision: number;\n  };\n}\n\nexport type ScrollInViewProps = {\n  start: {\n    x: number;\n    y: number;\n  };\n  end: {\n    x: number;\n    y: number;\n  };\n  current: {\n    x: number;\n    y: number;\n  };\n  dampedCurrent: {\n    x: number;\n    y: number;\n  };\n  progress: {\n    x: number;\n    y: number;\n  };\n  dampedProgress: {\n    x: number;\n    y: number;\n  };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n  useOffsetSizes?: boolean;\n};\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n): void {\n  props.current[axis] = clamp(\n    axis === 'x' ? window.pageXOffset : window.pageYOffset,\n    props.start[axis],\n    props.end[axis],\n  );\n  props.dampedCurrent[axis] = damp(\n    props.current[axis],\n    props.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  props.progress[axis] = clamp01(\n    (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n  props.dampedProgress[axis] = clamp01(\n    (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n  /**\n   * @private\n   * @type {ScrollInViewProps}\n   */\n  __props: ScrollInViewProps;\n  dampFactor?: number;\n  dampPrecision?: number;\n  mounted(): void;\n  resized(props: ResizeServiceProps): void;\n  scrolled(props: ScrollServiceProps): void;\n  ticked(props: RafServiceProps): void;\n  destroyed(): void;\n  /**\n   * @private\n   */\n  __setProps(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n  /**\n   * Class.\n   */\n  class WithScrolledInView<\n    T extends BaseProps = BaseProps,\n  > extends withMountWhenInView(BaseClass, options)<T & WithScrolledInViewProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      emits: ['scrolledInView'],\n      options: {\n        dampFactor: {\n          type: Number,\n          default: 0.1,\n        },\n        dampPrecision: {\n          type: Number,\n          default: 0.001,\n        },\n      },\n    };\n\n    __props: ScrollInViewProps = {\n      start: {\n        x: 0,\n        y: 0,\n      },\n      end: {\n        x: 0,\n        y: 0,\n      },\n      current: {\n        x: 0,\n        y: 0,\n      },\n      dampedCurrent: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      dampedProgress: {\n        x: 0,\n        y: 0,\n      },\n    };\n\n    /**\n     * Factor used for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampFactor?: number = null;\n\n    /**\n     * Precision for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampPrecision?: number = null;\n\n    /**\n     * Bind listeners.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const render = () => {\n        scheduler.update(() => {\n          // @ts-ignore\n          const renderFn = this.__callMethod('scrolledInView', this.__props);\n          if (isFunction(renderFn)) {\n            scheduler.render(() => {\n              renderFn(this.__props);\n            });\n          }\n        });\n      };\n\n      const delegate = {\n        handleEvent(event) {\n          delegate[event.type](event.detail[0]);\n        },\n        resized: () => {\n          this.__setProps();\n        },\n        scrolled: (props) => {\n          if ((!this.$services.has('ticked') && props.changed.y) || props.changed.x) {\n            this.$services.enable('ticked');\n          }\n        },\n        ticked: () => {\n          const dampFactor = this.dampFactor ?? this.$options.dampFactor;\n          const dampPrecision = this.dampFactor ?? this.$options.dampFactor;\n\n          updateProps(this.__props, dampFactor, dampPrecision, 'x');\n          updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n          if (\n            this.__props.dampedCurrent.x === this.__props.current.x &&\n            this.__props.dampedCurrent.y === this.__props.current.y\n          ) {\n            this.$services.disable('ticked');\n          }\n\n          render();\n        },\n      };\n\n      this.$on('before-mounted', () => {\n        this.$on('resized', delegate);\n        this.$on('scrolled', delegate);\n        this.$on('ticked', delegate);\n      });\n\n      this.$on('mounted', () => {\n        this.__setProps();\n      });\n\n      this.$on('destroyed', () => {\n        this.$off('resized', delegate);\n        this.$off('scrolled', delegate);\n        this.$off('ticked', delegate);\n\n        // Clamp damped values to their final value and trigger one last render on destroy\n        this.__props.dampedCurrent.x = this.__props.current.x;\n        this.__props.dampedCurrent.y = this.__props.current.y;\n        this.__props.dampedProgress.x = this.__props.progress.x;\n        this.__props.dampedProgress.y = this.__props.progress.y;\n        render();\n      });\n    }\n\n    /**\n     * Mounted hook.\n     */\n    mounted() {\n      // @ts-ignore\n      if (isFunction(super.mounted)) {\n        // @ts-ignore\n        super.mounted();\n      }\n    }\n\n    /**\n     * Resized hook.\n     */\n    resized(props: ResizeServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.resized)) {\n        // @ts-ignore\n        super.resized(props);\n      }\n    }\n\n    /**\n     * Scrolled hook.\n     */\n    scrolled(props: ScrollServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.scrolled)) {\n        // @ts-ignore\n        super.scrolled(props);\n      }\n    }\n\n    /**\n     * Ticked hook.\n     */\n    ticked(props: RafServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.ticked)) {\n        // @ts-ignore\n        super.ticked(props);\n      }\n    }\n\n    /**\n     * Destroyed hook.\n     */\n    destroyed() {\n      // @ts-ignore\n      if (isFunction(super.destroyed)) {\n        // @ts-ignore\n        super.destroyed();\n      }\n    }\n\n    /**\n     * Set the decorator props.\n     */\n    __setProps() {\n      const sizes = options.useOffsetSizes\n        ? getOffsetSizes(this.$el)\n        : this.$el.getBoundingClientRect();\n\n      // Y axis\n      const yEnd = sizes.y + window.pageYOffset + sizes.height;\n      const yStart = yEnd - window.innerHeight - sizes.height;\n      const yCurrent = clamp(window.pageYOffset, yStart, yEnd);\n      const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));\n\n      // X axis\n      const xEnd = sizes.x + window.pageXOffset + sizes.width;\n      const xStart = xEnd - window.innerWidth - sizes.width;\n      const xCurrent = clamp(window.pageXOffset, xStart, xEnd);\n      const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n      this.__props.start.x = xStart;\n      this.__props.start.y = yStart;\n      this.__props.end.x = xEnd;\n      this.__props.end.y = yEnd;\n      this.__props.current.x = xCurrent;\n      this.__props.current.y = yCurrent;\n      this.__props.dampedCurrent.x = damp(\n        xCurrent,\n        this.__props.dampedCurrent.x,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.dampedCurrent.y = damp(\n        yCurrent,\n        this.__props.dampedCurrent.y,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.progress.x = xProgress;\n      this.__props.progress.y = yProgress;\n      this.__props.dampedProgress.x = clamp01(\n        (this.__props.dampedCurrent.x - xStart) / (xEnd - xStart),\n      );\n      this.__props.dampedProgress.y = clamp01(\n        (this.__props.dampedCurrent.y - yStart) / (yEnd - yStart),\n      );\n    }\n  }\n\n  // @ts-ignore\n  return WithScrolledInView;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { RafServiceProps, ScrollServiceProps, ResizeServiceProps } from '../services/index.js';\nimport { withMountWhenInView } from './withMountWhenInView.js';\nimport { damp, clamp, clamp01, getOffsetSizes, isFunction, useScheduler } from '../utils/index.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport interface WithScrolledInViewProps extends BaseProps {\n  $options: {\n    dampFactor: number;\n    dampPrecision: number;\n  };\n}\n\nexport type ScrollInViewProps = {\n  start: {\n    x: number;\n    y: number;\n  };\n  end: {\n    x: number;\n    y: number;\n  };\n  current: {\n    x: number;\n    y: number;\n  };\n  dampedCurrent: {\n    x: number;\n    y: number;\n  };\n  progress: {\n    x: number;\n    y: number;\n  };\n  dampedProgress: {\n    x: number;\n    y: number;\n  };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n  useOffsetSizes?: boolean;\n};\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n): void {\n  props.current[axis] = clamp(\n    axis === 'x' ? window.pageXOffset : window.pageYOffset,\n    props.start[axis],\n    props.end[axis],\n  );\n  props.dampedCurrent[axis] = damp(\n    props.current[axis],\n    props.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  props.progress[axis] = clamp01(\n    (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n  props.dampedProgress[axis] = clamp01(\n    (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n  /**\n   * @private\n   * @type {ScrollInViewProps}\n   */\n  __props: ScrollInViewProps;\n  dampFactor?: number;\n  dampPrecision?: number;\n  mounted(): void;\n  resized(props: ResizeServiceProps): void;\n  scrolled(props: ScrollServiceProps): void;\n  ticked(props: RafServiceProps): void;\n  destroyed(): void;\n  /**\n   * @private\n   */\n  __setProps(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n  /**\n   * Class.\n   */\n  class WithScrolledInView<T extends BaseProps = BaseProps> extends withMountWhenInView(\n    BaseClass,\n    options,\n  )<T & WithScrolledInViewProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      emits: ['scrolledInView'],\n      options: {\n        dampFactor: {\n          type: Number,\n          default: 0.1,\n        },\n        dampPrecision: {\n          type: Number,\n          default: 0.001,\n        },\n      },\n    };\n\n    __props: ScrollInViewProps = {\n      start: {\n        x: 0,\n        y: 0,\n      },\n      end: {\n        x: 0,\n        y: 0,\n      },\n      current: {\n        x: 0,\n        y: 0,\n      },\n      dampedCurrent: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      dampedProgress: {\n        x: 0,\n        y: 0,\n      },\n    };\n\n    /**\n     * Factor used for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampFactor?: number = null;\n\n    /**\n     * Precision for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampPrecision?: number = null;\n\n    /**\n     * Bind listeners.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const render = () => {\n        scheduler.update(() => {\n          // @ts-ignore\n          const renderFn = this.__callMethod('scrolledInView', this.__props);\n          if (isFunction(renderFn)) {\n            scheduler.render(() => {\n              renderFn(this.__props);\n            });\n          }\n        });\n      };\n\n      const delegate = {\n        handleEvent(event) {\n          delegate[event.type](event.detail[0]);\n        },\n        resized: () => {\n          this.__setProps();\n        },\n        scrolled: (props) => {\n          if ((!this.$services.has('ticked') && props.changed.y) || props.changed.x) {\n            this.$services.enable('ticked');\n          }\n        },\n        ticked: () => {\n          const dampFactor = this.dampFactor ?? this.$options.dampFactor;\n          const dampPrecision = this.dampFactor ?? this.$options.dampFactor;\n\n          updateProps(this.__props, dampFactor, dampPrecision, 'x');\n          updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n          if (\n            this.__props.dampedCurrent.x === this.__props.current.x &&\n            this.__props.dampedCurrent.y === this.__props.current.y\n          ) {\n            this.$services.disable('ticked');\n          }\n\n          render();\n        },\n      };\n\n      this.$on('before-mounted', () => {\n        this.$on('resized', delegate);\n        this.$on('scrolled', delegate);\n        this.$on('ticked', delegate);\n      });\n\n      this.$on('mounted', () => {\n        this.__setProps();\n      });\n\n      this.$on('destroyed', () => {\n        this.$off('resized', delegate);\n        this.$off('scrolled', delegate);\n        this.$off('ticked', delegate);\n\n        // Clamp damped values to their final value and trigger one last render on destroy\n        this.__props.dampedCurrent.x = this.__props.current.x;\n        this.__props.dampedCurrent.y = this.__props.current.y;\n        this.__props.dampedProgress.x = this.__props.progress.x;\n        this.__props.dampedProgress.y = this.__props.progress.y;\n        render();\n      });\n    }\n\n    /**\n     * Mounted hook.\n     */\n    mounted() {\n      // @ts-ignore\n      if (isFunction(super.mounted)) {\n        // @ts-ignore\n        super.mounted();\n      }\n    }\n\n    /**\n     * Resized hook.\n     */\n    resized(props: ResizeServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.resized)) {\n        // @ts-ignore\n        super.resized(props);\n      }\n    }\n\n    /**\n     * Scrolled hook.\n     */\n    scrolled(props: ScrollServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.scrolled)) {\n        // @ts-ignore\n        super.scrolled(props);\n      }\n    }\n\n    /**\n     * Ticked hook.\n     */\n    ticked(props: RafServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.ticked)) {\n        // @ts-ignore\n        super.ticked(props);\n      }\n    }\n\n    /**\n     * Destroyed hook.\n     */\n    destroyed() {\n      // @ts-ignore\n      if (isFunction(super.destroyed)) {\n        // @ts-ignore\n        super.destroyed();\n      }\n    }\n\n    /**\n     * Set the decorator props.\n     */\n    __setProps() {\n      const sizes = options.useOffsetSizes\n        ? getOffsetSizes(this.$el)\n        : this.$el.getBoundingClientRect();\n\n      // Y axis\n      const yEnd = sizes.y + window.pageYOffset + sizes.height;\n      const yStart = yEnd - window.innerHeight - sizes.height;\n      const yCurrent = clamp(window.pageYOffset, yStart, yEnd);\n      const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));\n\n      // X axis\n      const xEnd = sizes.x + window.pageXOffset + sizes.width;\n      const xStart = xEnd - window.innerWidth - sizes.width;\n      const xCurrent = clamp(window.pageXOffset, xStart, xEnd);\n      const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n      this.__props.start.x = xStart;\n      this.__props.start.y = yStart;\n      this.__props.end.x = xEnd;\n      this.__props.end.y = yEnd;\n      this.__props.current.x = xCurrent;\n      this.__props.current.y = yCurrent;\n      this.__props.dampedCurrent.x = damp(\n        xCurrent,\n        this.__props.dampedCurrent.x,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.dampedCurrent.y = damp(\n        yCurrent,\n        this.__props.dampedCurrent.y,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.progress.x = xProgress;\n      this.__props.progress.y = yProgress;\n      this.__props.dampedProgress.x = clamp01(\n        (this.__props.dampedCurrent.x - xStart) / (xEnd - xStart),\n      );\n      this.__props.dampedProgress.y = clamp01(\n        (this.__props.dampedCurrent.y - yStart) / (yEnd - yStart),\n      );\n    }\n  }\n\n  // @ts-ignore\n  return WithScrolledInView;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/decorators/withScrolledInView.js

@@ -21,7 +21,10 @@ function updateProps(props, dampFactor, dampPrecision, axis = "x") {
   );
 }
 function withScrolledInView(BaseClass, options = {}) {
-  class WithScrolledInView extends withMountWhenInView(BaseClass, options) {
+  class WithScrolledInView extends withMountWhenInView(
+    BaseClass,
+    options
+  ) {
     static config = {
       name: `${BaseClass.config.name}WithMountWhenInView`,
       emits: ["scrolledInView"],

package/decorators/withScrolledInView.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withScrolledInView.ts"],
-  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { RafServiceProps, ScrollServiceProps, ResizeServiceProps } from '../services/index.js';\nimport { withMountWhenInView } from './withMountWhenInView.js';\nimport { damp, clamp, clamp01, getOffsetSizes, isFunction, useScheduler } from '../utils/index.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport interface WithScrolledInViewProps extends BaseProps {\n  $options: {\n    dampFactor: number;\n    dampPrecision: number;\n  };\n}\n\nexport type ScrollInViewProps = {\n  start: {\n    x: number;\n    y: number;\n  };\n  end: {\n    x: number;\n    y: number;\n  };\n  current: {\n    x: number;\n    y: number;\n  };\n  dampedCurrent: {\n    x: number;\n    y: number;\n  };\n  progress: {\n    x: number;\n    y: number;\n  };\n  dampedProgress: {\n    x: number;\n    y: number;\n  };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n  useOffsetSizes?: boolean;\n};\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n): void {\n  props.current[axis] = clamp(\n    axis === 'x' ? window.pageXOffset : window.pageYOffset,\n    props.start[axis],\n    props.end[axis],\n  );\n  props.dampedCurrent[axis] = damp(\n    props.current[axis],\n    props.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  props.progress[axis] = clamp01(\n    (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n  props.dampedProgress[axis] = clamp01(\n    (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n  /**\n   * @private\n   * @type {ScrollInViewProps}\n   */\n  __props: ScrollInViewProps;\n  dampFactor?: number;\n  dampPrecision?: number;\n  mounted(): void;\n  resized(props: ResizeServiceProps): void;\n  scrolled(props: ScrollServiceProps): void;\n  ticked(props: RafServiceProps): void;\n  destroyed(): void;\n  /**\n   * @private\n   */\n  __setProps(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n  /**\n   * Class.\n   */\n  class WithScrolledInView<\n    T extends BaseProps = BaseProps,\n  > extends withMountWhenInView(BaseClass, options)<T & WithScrolledInViewProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      emits: ['scrolledInView'],\n      options: {\n        dampFactor: {\n          type: Number,\n          default: 0.1,\n        },\n        dampPrecision: {\n          type: Number,\n          default: 0.001,\n        },\n      },\n    };\n\n    __props: ScrollInViewProps = {\n      start: {\n        x: 0,\n        y: 0,\n      },\n      end: {\n        x: 0,\n        y: 0,\n      },\n      current: {\n        x: 0,\n        y: 0,\n      },\n      dampedCurrent: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      dampedProgress: {\n        x: 0,\n        y: 0,\n      },\n    };\n\n    /**\n     * Factor used for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampFactor?: number = null;\n\n    /**\n     * Precision for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampPrecision?: number = null;\n\n    /**\n     * Bind listeners.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const render = () => {\n        scheduler.update(() => {\n          // @ts-ignore\n          const renderFn = this.__callMethod('scrolledInView', this.__props);\n          if (isFunction(renderFn)) {\n            scheduler.render(() => {\n              renderFn(this.__props);\n            });\n          }\n        });\n      };\n\n      const delegate = {\n        handleEvent(event) {\n          delegate[event.type](event.detail[0]);\n        },\n        resized: () => {\n          this.__setProps();\n        },\n        scrolled: (props) => {\n          if ((!this.$services.has('ticked') && props.changed.y) || props.changed.x) {\n            this.$services.enable('ticked');\n          }\n        },\n        ticked: () => {\n          const dampFactor = this.dampFactor ?? this.$options.dampFactor;\n          const dampPrecision = this.dampFactor ?? this.$options.dampFactor;\n\n          updateProps(this.__props, dampFactor, dampPrecision, 'x');\n          updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n          if (\n            this.__props.dampedCurrent.x === this.__props.current.x &&\n            this.__props.dampedCurrent.y === this.__props.current.y\n          ) {\n            this.$services.disable('ticked');\n          }\n\n          render();\n        },\n      };\n\n      this.$on('before-mounted', () => {\n        this.$on('resized', delegate);\n        this.$on('scrolled', delegate);\n        this.$on('ticked', delegate);\n      });\n\n      this.$on('mounted', () => {\n        this.__setProps();\n      });\n\n      this.$on('destroyed', () => {\n        this.$off('resized', delegate);\n        this.$off('scrolled', delegate);\n        this.$off('ticked', delegate);\n\n        // Clamp damped values to their final value and trigger one last render on destroy\n        this.__props.dampedCurrent.x = this.__props.current.x;\n        this.__props.dampedCurrent.y = this.__props.current.y;\n        this.__props.dampedProgress.x = this.__props.progress.x;\n        this.__props.dampedProgress.y = this.__props.progress.y;\n        render();\n      });\n    }\n\n    /**\n     * Mounted hook.\n     */\n    mounted() {\n      // @ts-ignore\n      if (isFunction(super.mounted)) {\n        // @ts-ignore\n        super.mounted();\n      }\n    }\n\n    /**\n     * Resized hook.\n     */\n    resized(props: ResizeServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.resized)) {\n        // @ts-ignore\n        super.resized(props);\n      }\n    }\n\n    /**\n     * Scrolled hook.\n     */\n    scrolled(props: ScrollServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.scrolled)) {\n        // @ts-ignore\n        super.scrolled(props);\n      }\n    }\n\n    /**\n     * Ticked hook.\n     */\n    ticked(props: RafServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.ticked)) {\n        // @ts-ignore\n        super.ticked(props);\n      }\n    }\n\n    /**\n     * Destroyed hook.\n     */\n    destroyed() {\n      // @ts-ignore\n      if (isFunction(super.destroyed)) {\n        // @ts-ignore\n        super.destroyed();\n      }\n    }\n\n    /**\n     * Set the decorator props.\n     */\n    __setProps() {\n      const sizes = options.useOffsetSizes\n        ? getOffsetSizes(this.$el)\n        : this.$el.getBoundingClientRect();\n\n      // Y axis\n      const yEnd = sizes.y + window.pageYOffset + sizes.height;\n      const yStart = yEnd - window.innerHeight - sizes.height;\n      const yCurrent = clamp(window.pageYOffset, yStart, yEnd);\n      const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));\n\n      // X axis\n      const xEnd = sizes.x + window.pageXOffset + sizes.width;\n      const xStart = xEnd - window.innerWidth - sizes.width;\n      const xCurrent = clamp(window.pageXOffset, xStart, xEnd);\n      const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n      this.__props.start.x = xStart;\n      this.__props.start.y = yStart;\n      this.__props.end.x = xEnd;\n      this.__props.end.y = yEnd;\n      this.__props.current.x = xCurrent;\n      this.__props.current.y = yCurrent;\n      this.__props.dampedCurrent.x = damp(\n        xCurrent,\n        this.__props.dampedCurrent.x,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.dampedCurrent.y = damp(\n        yCurrent,\n        this.__props.dampedCurrent.y,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.progress.x = xProgress;\n      this.__props.progress.y = yProgress;\n      this.__props.dampedProgress.x = clamp01(\n        (this.__props.dampedCurrent.x - xStart) / (xEnd - xStart),\n      );\n      this.__props.dampedProgress.y = clamp01(\n        (this.__props.dampedCurrent.y - yStart) / (yEnd - yStart),\n      );\n    }\n  }\n\n  // @ts-ignore\n  return WithScrolledInView;\n}\n"],
-  "mappings": "AAGA,SAAS,2BAA2B;AACpC,SAAS,MAAM,OAAO,SAAS,gBAAgB,YAAY,oBAAoB;AAE/E,MAAM,YAAY,aAAa,CAAC,UAAU,QAAQ,CAAC;AA2CnD,SAAS,YACP,OACA,YACA,eACA,OAAkB,KACZ;AACN,QAAM,QAAQ,QAAQ;AAAA,IACpB,SAAS,MAAM,OAAO,cAAc,OAAO;AAAA,IAC3C,MAAM,MAAM;AAAA,IACZ,MAAM,IAAI;AAAA,EACZ;AACA,QAAM,cAAc,QAAQ;AAAA,IAC1B,MAAM,QAAQ;AAAA,IACd,MAAM,cAAc;AAAA,IACpB;AAAA,IACA;AAAA,EACF;AACA,QAAM,SAAS,QAAQ;AAAA,KACpB,MAAM,QAAQ,QAAQ,MAAM,MAAM,UAAU,MAAM,IAAI,QAAQ,MAAM,MAAM;AAAA,EAC7E;AACA,QAAM,eAAe,QAAQ;AAAA,KAC1B,MAAM,cAAc,QAAQ,MAAM,MAAM,UAAU,MAAM,IAAI,QAAQ,MAAM,MAAM;AAAA,EACnF;AACF;AAwBO,SAAS,mBACd,WACA,UAAqC,CAAC,GACkC;AAIxE,QAAM,2BAEI,oBAAoB,WAAW,OAAO,EAA+B;AAAA,IAI7E,OAAO,SAAqB;AAAA,MAC1B,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,OAAO,CAAC,gBAAgB;AAAA,MACxB,SAAS;AAAA,QACP,YAAY;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QACX;AAAA,QACA,eAAe;AAAA,UACb,MAAM;AAAA,UACN,SAAS;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,IAEA,UAA6B;AAAA,MAC3B,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,KAAK;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,eAAe;AAAA,QACb,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,UAAU;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,gBAAgB;AAAA,QACd,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IAOA,aAAsB;AAAA,IAOtB,gBAAyB;AAAA,IAKzB,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,YAAM,SAAS,MAAM;AACnB,kBAAU,OAAO,MAAM;AAErB,gBAAM,WAAW,KAAK,aAAa,kBAAkB,KAAK,OAAO;AACjE,cAAI,WAAW,QAAQ,GAAG;AACxB,sBAAU,OAAO,MAAM;AACrB,uBAAS,KAAK,OAAO;AAAA,YACvB,CAAC;AAAA,UACH;AAAA,QACF,CAAC;AAAA,MACH;AAEA,YAAM,WAAW;AAAA,QACf,YAAY,OAAO;AACjB,mBAAS,MAAM,MAAM,MAAM,OAAO,EAAE;AAAA,QACtC;AAAA,QACA,SAAS,MAAM;AACb,eAAK,WAAW;AAAA,QAClB;AAAA,QACA,UAAU,CAAC,UAAU;AACnB,cAAK,CAAC,KAAK,UAAU,IAAI,QAAQ,KAAK,MAAM,QAAQ,KAAM,MAAM,QAAQ,GAAG;AACzE,iBAAK,UAAU,OAAO,QAAQ;AAAA,UAChC;AAAA,QACF;AAAA,QACA,QAAQ,MAAM;AACZ,gBAAM,aAAa,KAAK,cAAc,KAAK,SAAS;AACpD,gBAAM,gBAAgB,KAAK,cAAc,KAAK,SAAS;AAEvD,sBAAY,KAAK,SAAS,YAAY,eAAe,GAAG;AACxD,sBAAY,KAAK,SAAS,YAAY,eAAe,GAAG;AAExD,cACE,KAAK,QAAQ,cAAc,MAAM,KAAK,QAAQ,QAAQ,KACtD,KAAK,QAAQ,cAAc,MAAM,KAAK,QAAQ,QAAQ,GACtD;AACA,iBAAK,UAAU,QAAQ,QAAQ;AAAA,UACjC;AAEA,iBAAO;AAAA,QACT;AAAA,MACF;AAEA,WAAK,IAAI,kBAAkB,MAAM;AAC/B,aAAK,IAAI,WAAW,QAAQ;AAC5B,aAAK,IAAI,YAAY,QAAQ;AAC7B,aAAK,IAAI,UAAU,QAAQ;AAAA,MAC7B,CAAC;AAED,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,WAAW;AAAA,MAClB,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,KAAK,WAAW,QAAQ;AAC7B,aAAK,KAAK,YAAY,QAAQ;AAC9B,aAAK,KAAK,UAAU,QAAQ;AAG5B,aAAK,QAAQ,cAAc,IAAI,KAAK,QAAQ,QAAQ;AACpD,aAAK,QAAQ,cAAc,IAAI,KAAK,QAAQ,QAAQ;AACpD,aAAK,QAAQ,eAAe,IAAI,KAAK,QAAQ,SAAS;AACtD,aAAK,QAAQ,eAAe,IAAI,KAAK,QAAQ,SAAS;AACtD,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IAKA,UAAU;AAER,UAAI,WAAW,MAAM,OAAO,GAAG;AAE7B,cAAM,QAAQ;AAAA,MAChB;AAAA,IACF;AAAA,IAKA,QAAQ,OAA2B;AAEjC,UAAI,WAAW,MAAM,OAAO,GAAG;AAE7B,cAAM,QAAQ,KAAK;AAAA,MACrB;AAAA,IACF;AAAA,IAKA,SAAS,OAA2B;AAElC,UAAI,WAAW,MAAM,QAAQ,GAAG;AAE9B,cAAM,SAAS,KAAK;AAAA,MACtB;AAAA,IACF;AAAA,IAKA,OAAO,OAAwB;AAE7B,UAAI,WAAW,MAAM,MAAM,GAAG;AAE5B,cAAM,OAAO,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,IAKA,YAAY;AAEV,UAAI,WAAW,MAAM,SAAS,GAAG;AAE/B,cAAM,UAAU;AAAA,MAClB;AAAA,IACF;AAAA,IAKA,aAAa;AACX,YAAM,QAAQ,QAAQ,iBAClB,eAAe,KAAK,GAAG,IACvB,KAAK,IAAI,sBAAsB;AAGnC,YAAM,OAAO,MAAM,IAAI,OAAO,cAAc,MAAM;AAClD,YAAM,SAAS,OAAO,OAAO,cAAc,MAAM;AACjD,YAAM,WAAW,MAAM,OAAO,aAAa,QAAQ,IAAI;AACvD,YAAM,YAAY,SAAS,WAAW,WAAW,OAAO,OAAO;AAG/D,YAAM,OAAO,MAAM,IAAI,OAAO,cAAc,MAAM;AAClD,YAAM,SAAS,OAAO,OAAO,aAAa,MAAM;AAChD,YAAM,WAAW,MAAM,OAAO,aAAa,QAAQ,IAAI;AACvD,YAAM,YAAY,SAAS,WAAW,WAAW,OAAO,OAAO;AAE/D,WAAK,QAAQ,MAAM,IAAI;AACvB,WAAK,QAAQ,MAAM,IAAI;AACvB,WAAK,QAAQ,IAAI,IAAI;AACrB,WAAK,QAAQ,IAAI,IAAI;AACrB,WAAK,QAAQ,QAAQ,IAAI;AACzB,WAAK,QAAQ,QAAQ,IAAI;AACzB,WAAK,QAAQ,cAAc,IAAI;AAAA,QAC7B;AAAA,QACA,KAAK,QAAQ,cAAc;AAAA,QAC3B,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AACA,WAAK,QAAQ,cAAc,IAAI;AAAA,QAC7B;AAAA,QACA,KAAK,QAAQ,cAAc;AAAA,QAC3B,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AACA,WAAK,QAAQ,SAAS,IAAI;AAC1B,WAAK,QAAQ,SAAS,IAAI;AAC1B,WAAK,QAAQ,eAAe,IAAI;AAAA,SAC7B,KAAK,QAAQ,cAAc,IAAI,WAAW,OAAO;AAAA,MACpD;AACA,WAAK,QAAQ,eAAe,IAAI;AAAA,SAC7B,KAAK,QAAQ,cAAc,IAAI,WAAW,OAAO;AAAA,MACpD;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { RafServiceProps, ScrollServiceProps, ResizeServiceProps } from '../services/index.js';\nimport { withMountWhenInView } from './withMountWhenInView.js';\nimport { damp, clamp, clamp01, getOffsetSizes, isFunction, useScheduler } from '../utils/index.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport interface WithScrolledInViewProps extends BaseProps {\n  $options: {\n    dampFactor: number;\n    dampPrecision: number;\n  };\n}\n\nexport type ScrollInViewProps = {\n  start: {\n    x: number;\n    y: number;\n  };\n  end: {\n    x: number;\n    y: number;\n  };\n  current: {\n    x: number;\n    y: number;\n  };\n  dampedCurrent: {\n    x: number;\n    y: number;\n  };\n  progress: {\n    x: number;\n    y: number;\n  };\n  dampedProgress: {\n    x: number;\n    y: number;\n  };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n  useOffsetSizes?: boolean;\n};\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n  props: ScrollInViewProps,\n  dampFactor: number,\n  dampPrecision: number,\n  axis: 'x' | 'y' = 'x',\n): void {\n  props.current[axis] = clamp(\n    axis === 'x' ? window.pageXOffset : window.pageYOffset,\n    props.start[axis],\n    props.end[axis],\n  );\n  props.dampedCurrent[axis] = damp(\n    props.current[axis],\n    props.dampedCurrent[axis],\n    dampFactor,\n    dampPrecision,\n  );\n  props.progress[axis] = clamp01(\n    (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n  props.dampedProgress[axis] = clamp01(\n    (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n  );\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n  /**\n   * @private\n   * @type {ScrollInViewProps}\n   */\n  __props: ScrollInViewProps;\n  dampFactor?: number;\n  dampPrecision?: number;\n  mounted(): void;\n  resized(props: ResizeServiceProps): void;\n  scrolled(props: ScrollServiceProps): void;\n  ticked(props: RafServiceProps): void;\n  destroyed(): void;\n  /**\n   * @private\n   */\n  __setProps(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n  BaseClass: typeof Base,\n  options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n  /**\n   * Class.\n   */\n  class WithScrolledInView<T extends BaseProps = BaseProps> extends withMountWhenInView(\n    BaseClass,\n    options,\n  )<T & WithScrolledInViewProps> {\n    /**\n     * Config.\n     */\n    static config: BaseConfig = {\n      name: `${BaseClass.config.name}WithMountWhenInView`,\n      emits: ['scrolledInView'],\n      options: {\n        dampFactor: {\n          type: Number,\n          default: 0.1,\n        },\n        dampPrecision: {\n          type: Number,\n          default: 0.001,\n        },\n      },\n    };\n\n    __props: ScrollInViewProps = {\n      start: {\n        x: 0,\n        y: 0,\n      },\n      end: {\n        x: 0,\n        y: 0,\n      },\n      current: {\n        x: 0,\n        y: 0,\n      },\n      dampedCurrent: {\n        x: 0,\n        y: 0,\n      },\n      progress: {\n        x: 0,\n        y: 0,\n      },\n      dampedProgress: {\n        x: 0,\n        y: 0,\n      },\n    };\n\n    /**\n     * Factor used for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampFactor?: number = null;\n\n    /**\n     * Precision for the `dampedProgress` props.\n     * @deprecated\n     * @todo v3 delete in favor of option API\n     */\n    dampPrecision?: number = null;\n\n    /**\n     * Bind listeners.\n     */\n    constructor(element: HTMLElement) {\n      super(element);\n\n      const render = () => {\n        scheduler.update(() => {\n          // @ts-ignore\n          const renderFn = this.__callMethod('scrolledInView', this.__props);\n          if (isFunction(renderFn)) {\n            scheduler.render(() => {\n              renderFn(this.__props);\n            });\n          }\n        });\n      };\n\n      const delegate = {\n        handleEvent(event) {\n          delegate[event.type](event.detail[0]);\n        },\n        resized: () => {\n          this.__setProps();\n        },\n        scrolled: (props) => {\n          if ((!this.$services.has('ticked') && props.changed.y) || props.changed.x) {\n            this.$services.enable('ticked');\n          }\n        },\n        ticked: () => {\n          const dampFactor = this.dampFactor ?? this.$options.dampFactor;\n          const dampPrecision = this.dampFactor ?? this.$options.dampFactor;\n\n          updateProps(this.__props, dampFactor, dampPrecision, 'x');\n          updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n          if (\n            this.__props.dampedCurrent.x === this.__props.current.x &&\n            this.__props.dampedCurrent.y === this.__props.current.y\n          ) {\n            this.$services.disable('ticked');\n          }\n\n          render();\n        },\n      };\n\n      this.$on('before-mounted', () => {\n        this.$on('resized', delegate);\n        this.$on('scrolled', delegate);\n        this.$on('ticked', delegate);\n      });\n\n      this.$on('mounted', () => {\n        this.__setProps();\n      });\n\n      this.$on('destroyed', () => {\n        this.$off('resized', delegate);\n        this.$off('scrolled', delegate);\n        this.$off('ticked', delegate);\n\n        // Clamp damped values to their final value and trigger one last render on destroy\n        this.__props.dampedCurrent.x = this.__props.current.x;\n        this.__props.dampedCurrent.y = this.__props.current.y;\n        this.__props.dampedProgress.x = this.__props.progress.x;\n        this.__props.dampedProgress.y = this.__props.progress.y;\n        render();\n      });\n    }\n\n    /**\n     * Mounted hook.\n     */\n    mounted() {\n      // @ts-ignore\n      if (isFunction(super.mounted)) {\n        // @ts-ignore\n        super.mounted();\n      }\n    }\n\n    /**\n     * Resized hook.\n     */\n    resized(props: ResizeServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.resized)) {\n        // @ts-ignore\n        super.resized(props);\n      }\n    }\n\n    /**\n     * Scrolled hook.\n     */\n    scrolled(props: ScrollServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.scrolled)) {\n        // @ts-ignore\n        super.scrolled(props);\n      }\n    }\n\n    /**\n     * Ticked hook.\n     */\n    ticked(props: RafServiceProps) {\n      // @ts-ignore\n      if (isFunction(super.ticked)) {\n        // @ts-ignore\n        super.ticked(props);\n      }\n    }\n\n    /**\n     * Destroyed hook.\n     */\n    destroyed() {\n      // @ts-ignore\n      if (isFunction(super.destroyed)) {\n        // @ts-ignore\n        super.destroyed();\n      }\n    }\n\n    /**\n     * Set the decorator props.\n     */\n    __setProps() {\n      const sizes = options.useOffsetSizes\n        ? getOffsetSizes(this.$el)\n        : this.$el.getBoundingClientRect();\n\n      // Y axis\n      const yEnd = sizes.y + window.pageYOffset + sizes.height;\n      const yStart = yEnd - window.innerHeight - sizes.height;\n      const yCurrent = clamp(window.pageYOffset, yStart, yEnd);\n      const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));\n\n      // X axis\n      const xEnd = sizes.x + window.pageXOffset + sizes.width;\n      const xStart = xEnd - window.innerWidth - sizes.width;\n      const xCurrent = clamp(window.pageXOffset, xStart, xEnd);\n      const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n      this.__props.start.x = xStart;\n      this.__props.start.y = yStart;\n      this.__props.end.x = xEnd;\n      this.__props.end.y = yEnd;\n      this.__props.current.x = xCurrent;\n      this.__props.current.y = yCurrent;\n      this.__props.dampedCurrent.x = damp(\n        xCurrent,\n        this.__props.dampedCurrent.x,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.dampedCurrent.y = damp(\n        yCurrent,\n        this.__props.dampedCurrent.y,\n        this.dampFactor,\n        this.dampPrecision,\n      );\n      this.__props.progress.x = xProgress;\n      this.__props.progress.y = yProgress;\n      this.__props.dampedProgress.x = clamp01(\n        (this.__props.dampedCurrent.x - xStart) / (xEnd - xStart),\n      );\n      this.__props.dampedProgress.y = clamp01(\n        (this.__props.dampedCurrent.y - yStart) / (yEnd - yStart),\n      );\n    }\n  }\n\n  // @ts-ignore\n  return WithScrolledInView;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/decorators/withVue2.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withVue2.ts"],
-  "sourcesContent": ["import type Vue from 'vue';\nimport type { ComponentOptions, VueConstructor } from 'vue';\nimport type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConfig, BaseProps } from '../Base/index.js';\nimport { isDev, isFunction } from '../utils/index.js';\n\nexport interface WithVue2Props extends BaseProps {\n  $refs: {\n    vue: HTMLElement;\n  };\n}\n\nexport interface WithVue2Interface extends BaseInterface {\n  $vue: Vue;\n}\n\n/**\n * withVue decorator.\n */\nexport function withVue2<S extends Base, T extends Vue = Vue>(\n  BaseClass: typeof Base,\n  VueCtor: VueConstructor,\n): BaseDecorator<WithVue2Interface, S, WithVue2Props> {\n  type VueConfig = ComponentOptions<T> & {\n    render: ComponentOptions<T>['render'];\n  };\n\n  /**\n   * Class.\n   */\n  class WithVue2 extends BaseClass {\n    static config:BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithVue`,\n      refs: [...(BaseClass.config?.refs ?? []), 'vue'],\n    };\n\n    $vue: Vue;\n\n    /**\n     * Vue app configuration.\n     */\n    static vueConfig: VueConfig;\n\n    constructor(element: HTMLElement) {\n      super(element);\n\n      // @ts-ignore\n      const vueConfig: VueConfig = this.vueConfig ?? this.constructor.vueConfig;\n\n      if (!vueConfig) {\n        if (isDev) {\n          throw new Error('[withVue] You must define a `vueConfig` object.');\n        }\n        return;\n      }\n\n      if (!isFunction(vueConfig.render)) {\n        if (isDev) {\n          throw new Error('[withVue] You must define a `render` function in vueConfig.');\n        }\n        return;\n      }\n\n      this.$vue = new VueCtor(vueConfig);\n\n      this.$on('mounted', () => {\n        if (!(this.$refs.vue instanceof HTMLElement)) {\n          throw new Error('[withVue] The `vue` refs must be a single HTMLElement.');\n        }\n\n        this.$vue.$mount(this.$refs.vue);\n      });\n\n      this.$on('destroyed', () => {\n        this.$vue.$destroy();\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithVue2;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAkC;AAe3B,SAAS,SACd,WACA,SACoD;AAQpD,QAAM,iBAAiB,UAAU;AAAA,IAC/B,OAAO,SAAoB;AAAA,MACzB,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,MAAM,CAAC,GAAI,UAAU,QAAQ,QAAQ,CAAC,GAAI,KAAK;AAAA,IACjD;AAAA,IAEA;AAAA,IAKA,OAAO;AAAA,IAEP,YAAY,SAAsB;AAChC,YAAM,OAAO;AAGb,YAAM,YAAuB,KAAK,aAAa,KAAK,YAAY;AAEhE,UAAI,CAAC,WAAW;AACd,YAAI,oBAAO;AACT,gBAAM,IAAI,MAAM,iDAAiD;AAAA,QACnE;AACA;AAAA,MACF;AAEA,UAAI,KAAC,yBAAW,UAAU,MAAM,GAAG;AACjC,YAAI,oBAAO;AACT,gBAAM,IAAI,MAAM,6DAA6D;AAAA,QAC/E;AACA;AAAA,MACF;AAEA,WAAK,OAAO,IAAI,QAAQ,SAAS;AAEjC,WAAK,IAAI,WAAW,MAAM;AACxB,YAAI,EAAE,KAAK,MAAM,eAAe,cAAc;AAC5C,gBAAM,IAAI,MAAM,wDAAwD;AAAA,QAC1E;AAEA,aAAK,KAAK,OAAO,KAAK,MAAM,GAAG;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,KAAK,SAAS;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type Vue from 'vue';\nimport type { ComponentOptions, VueConstructor } from 'vue';\nimport type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConfig, BaseProps } from '../Base/index.js';\nimport { isDev, isFunction } from '../utils/index.js';\n\nexport interface WithVue2Props extends BaseProps {\n  $refs: {\n    vue: HTMLElement;\n  };\n}\n\nexport interface WithVue2Interface extends BaseInterface {\n  $vue: Vue;\n}\n\n/**\n * withVue decorator.\n */\nexport function withVue2<S extends Base, T extends Vue = Vue>(\n  BaseClass: typeof Base,\n  VueCtor: VueConstructor,\n): BaseDecorator<WithVue2Interface, S, WithVue2Props> {\n  type VueConfig = ComponentOptions<T> & {\n    render: ComponentOptions<T>['render'];\n  };\n\n  /**\n   * Class.\n   */\n  class WithVue2 extends BaseClass {\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithVue`,\n      refs: [...(BaseClass.config?.refs ?? []), 'vue'],\n    };\n\n    $vue: Vue;\n\n    /**\n     * Vue app configuration.\n     */\n    static vueConfig: VueConfig;\n\n    constructor(element: HTMLElement) {\n      super(element);\n\n      // @ts-ignore\n      const vueConfig: VueConfig = this.vueConfig ?? this.constructor.vueConfig;\n\n      if (!vueConfig) {\n        if (isDev) {\n          throw new Error('[withVue] You must define a `vueConfig` object.');\n        }\n        return;\n      }\n\n      if (!isFunction(vueConfig.render)) {\n        if (isDev) {\n          throw new Error('[withVue] You must define a `render` function in vueConfig.');\n        }\n        return;\n      }\n\n      this.$vue = new VueCtor(vueConfig);\n\n      this.$on('mounted', () => {\n        if (!(this.$refs.vue instanceof HTMLElement)) {\n          throw new Error('[withVue] The `vue` refs must be a single HTMLElement.');\n        }\n\n        this.$vue.$mount(this.$refs.vue);\n      });\n\n      this.$on('destroyed', () => {\n        this.$vue.$destroy();\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithVue2;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAkC;AAe3B,SAAS,SACd,WACA,SACoD;AAQpD,QAAM,iBAAiB,UAAU;AAAA,IAC/B,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,MAAM,CAAC,GAAI,UAAU,QAAQ,QAAQ,CAAC,GAAI,KAAK;AAAA,IACjD;AAAA,IAEA;AAAA,IAKA,OAAO;AAAA,IAEP,YAAY,SAAsB;AAChC,YAAM,OAAO;AAGb,YAAM,YAAuB,KAAK,aAAa,KAAK,YAAY;AAEhE,UAAI,CAAC,WAAW;AACd,YAAI,oBAAO;AACT,gBAAM,IAAI,MAAM,iDAAiD;AAAA,QACnE;AACA;AAAA,MACF;AAEA,UAAI,KAAC,yBAAW,UAAU,MAAM,GAAG;AACjC,YAAI,oBAAO;AACT,gBAAM,IAAI,MAAM,6DAA6D;AAAA,QAC/E;AACA;AAAA,MACF;AAEA,WAAK,OAAO,IAAI,QAAQ,SAAS;AAEjC,WAAK,IAAI,WAAW,MAAM;AACxB,YAAI,EAAE,KAAK,MAAM,eAAe,cAAc;AAC5C,gBAAM,IAAI,MAAM,wDAAwD;AAAA,QAC1E;AAEA,aAAK,KAAK,OAAO,KAAK,MAAM,GAAG;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,KAAK,SAAS;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withVue2.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/withVue2.ts"],
-  "sourcesContent": ["import type Vue from 'vue';\nimport type { ComponentOptions, VueConstructor } from 'vue';\nimport type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConfig, BaseProps } from '../Base/index.js';\nimport { isDev, isFunction } from '../utils/index.js';\n\nexport interface WithVue2Props extends BaseProps {\n  $refs: {\n    vue: HTMLElement;\n  };\n}\n\nexport interface WithVue2Interface extends BaseInterface {\n  $vue: Vue;\n}\n\n/**\n * withVue decorator.\n */\nexport function withVue2<S extends Base, T extends Vue = Vue>(\n  BaseClass: typeof Base,\n  VueCtor: VueConstructor,\n): BaseDecorator<WithVue2Interface, S, WithVue2Props> {\n  type VueConfig = ComponentOptions<T> & {\n    render: ComponentOptions<T>['render'];\n  };\n\n  /**\n   * Class.\n   */\n  class WithVue2 extends BaseClass {\n    static config:BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithVue`,\n      refs: [...(BaseClass.config?.refs ?? []), 'vue'],\n    };\n\n    $vue: Vue;\n\n    /**\n     * Vue app configuration.\n     */\n    static vueConfig: VueConfig;\n\n    constructor(element: HTMLElement) {\n      super(element);\n\n      // @ts-ignore\n      const vueConfig: VueConfig = this.vueConfig ?? this.constructor.vueConfig;\n\n      if (!vueConfig) {\n        if (isDev) {\n          throw new Error('[withVue] You must define a `vueConfig` object.');\n        }\n        return;\n      }\n\n      if (!isFunction(vueConfig.render)) {\n        if (isDev) {\n          throw new Error('[withVue] You must define a `render` function in vueConfig.');\n        }\n        return;\n      }\n\n      this.$vue = new VueCtor(vueConfig);\n\n      this.$on('mounted', () => {\n        if (!(this.$refs.vue instanceof HTMLElement)) {\n          throw new Error('[withVue] The `vue` refs must be a single HTMLElement.');\n        }\n\n        this.$vue.$mount(this.$refs.vue);\n      });\n\n      this.$on('destroyed', () => {\n        this.$vue.$destroy();\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithVue2;\n}\n"],
-  "mappings": "AAIA,SAAS,OAAO,kBAAkB;AAe3B,SAAS,SACd,WACA,SACoD;AAQpD,QAAM,iBAAiB,UAAU;AAAA,IAC/B,OAAO,SAAoB;AAAA,MACzB,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,MAAM,CAAC,GAAI,UAAU,QAAQ,QAAQ,CAAC,GAAI,KAAK;AAAA,IACjD;AAAA,IAEA;AAAA,IAKA,OAAO;AAAA,IAEP,YAAY,SAAsB;AAChC,YAAM,OAAO;AAGb,YAAM,YAAuB,KAAK,aAAa,KAAK,YAAY;AAEhE,UAAI,CAAC,WAAW;AACd,YAAI,OAAO;AACT,gBAAM,IAAI,MAAM,iDAAiD;AAAA,QACnE;AACA;AAAA,MACF;AAEA,UAAI,CAAC,WAAW,UAAU,MAAM,GAAG;AACjC,YAAI,OAAO;AACT,gBAAM,IAAI,MAAM,6DAA6D;AAAA,QAC/E;AACA;AAAA,MACF;AAEA,WAAK,OAAO,IAAI,QAAQ,SAAS;AAEjC,WAAK,IAAI,WAAW,MAAM;AACxB,YAAI,EAAE,KAAK,MAAM,eAAe,cAAc;AAC5C,gBAAM,IAAI,MAAM,wDAAwD;AAAA,QAC1E;AAEA,aAAK,KAAK,OAAO,KAAK,MAAM,GAAG;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,KAAK,SAAS;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import type Vue from 'vue';\nimport type { ComponentOptions, VueConstructor } from 'vue';\nimport type { BaseDecorator, BaseInterface } from '../Base/types.js';\nimport type { Base, BaseConfig, BaseProps } from '../Base/index.js';\nimport { isDev, isFunction } from '../utils/index.js';\n\nexport interface WithVue2Props extends BaseProps {\n  $refs: {\n    vue: HTMLElement;\n  };\n}\n\nexport interface WithVue2Interface extends BaseInterface {\n  $vue: Vue;\n}\n\n/**\n * withVue decorator.\n */\nexport function withVue2<S extends Base, T extends Vue = Vue>(\n  BaseClass: typeof Base,\n  VueCtor: VueConstructor,\n): BaseDecorator<WithVue2Interface, S, WithVue2Props> {\n  type VueConfig = ComponentOptions<T> & {\n    render: ComponentOptions<T>['render'];\n  };\n\n  /**\n   * Class.\n   */\n  class WithVue2 extends BaseClass {\n    static config: BaseConfig = {\n      ...BaseClass.config,\n      name: `${BaseClass.config.name}WithVue`,\n      refs: [...(BaseClass.config?.refs ?? []), 'vue'],\n    };\n\n    $vue: Vue;\n\n    /**\n     * Vue app configuration.\n     */\n    static vueConfig: VueConfig;\n\n    constructor(element: HTMLElement) {\n      super(element);\n\n      // @ts-ignore\n      const vueConfig: VueConfig = this.vueConfig ?? this.constructor.vueConfig;\n\n      if (!vueConfig) {\n        if (isDev) {\n          throw new Error('[withVue] You must define a `vueConfig` object.');\n        }\n        return;\n      }\n\n      if (!isFunction(vueConfig.render)) {\n        if (isDev) {\n          throw new Error('[withVue] You must define a `render` function in vueConfig.');\n        }\n        return;\n      }\n\n      this.$vue = new VueCtor(vueConfig);\n\n      this.$on('mounted', () => {\n        if (!(this.$refs.vue instanceof HTMLElement)) {\n          throw new Error('[withVue] The `vue` refs must be a single HTMLElement.');\n        }\n\n        this.$vue.$mount(this.$refs.vue);\n      });\n\n      this.$on('destroyed', () => {\n        this.$vue.$destroy();\n      });\n    }\n  }\n\n  // @ts-ignore\n  return WithVue2;\n}\n"],
+  "mappings": "AAIA,SAAS,OAAO,kBAAkB;AAe3B,SAAS,SACd,WACA,SACoD;AAQpD,QAAM,iBAAiB,UAAU;AAAA,IAC/B,OAAO,SAAqB;AAAA,MAC1B,GAAG,UAAU;AAAA,MACb,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,MAAM,CAAC,GAAI,UAAU,QAAQ,QAAQ,CAAC,GAAI,KAAK;AAAA,IACjD;AAAA,IAEA;AAAA,IAKA,OAAO;AAAA,IAEP,YAAY,SAAsB;AAChC,YAAM,OAAO;AAGb,YAAM,YAAuB,KAAK,aAAa,KAAK,YAAY;AAEhE,UAAI,CAAC,WAAW;AACd,YAAI,OAAO;AACT,gBAAM,IAAI,MAAM,iDAAiD;AAAA,QACnE;AACA;AAAA,MACF;AAEA,UAAI,CAAC,WAAW,UAAU,MAAM,GAAG;AACjC,YAAI,OAAO;AACT,gBAAM,IAAI,MAAM,6DAA6D;AAAA,QAC/E;AACA;AAAA,MACF;AAEA,WAAK,OAAO,IAAI,QAAQ,SAAS;AAEjC,WAAK,IAAI,WAAW,MAAM;AACxB,YAAI,EAAE,KAAK,MAAM,eAAe,cAAc;AAC5C,gBAAM,IAAI,MAAM,wDAAwD;AAAA,QAC1E;AAEA,aAAK,KAAK,OAAO,KAAK,MAAM,GAAG;AAAA,MACjC,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,KAAK,SAAS;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/helpers/createApp.cjs

@@ -22,31 +22,35 @@ __export(createApp_exports, {
   default: () => createApp
 });
 module.exports = __toCommonJS(createApp_exports);
+var import_features = require("../Base/features.cjs");
+var import_utils = require("../utils/index.cjs");
 function createApp(App, rootElement = document.body) {
-  let isLoaded = document.readyState === "complete";
   let app;
-  if (!isLoaded) {
-    document.addEventListener("readystatechange", () => {
-      if (document.readyState === "complete") {
-        app = new App(rootElement).$mount();
-        isLoaded = true;
-      }
+  const options = rootElement instanceof HTMLElement ? { root: rootElement, features: void 0 } : { root: document.body, ...rootElement };
+  if ((0, import_utils.isDefined)(options.features)) {
+    Object.entries(options.features).forEach(([feature, value]) => {
+      import_features.features.set(feature, value);
     });
-  } else {
-    app = new App(rootElement).$mount();
   }
-  const promise = new Promise((resolve) => {
-    document.addEventListener("readystatechange", () => {
-      if (document.readyState === "complete") {
-        setTimeout(() => resolve(app), 0);
-      }
-    });
+  const p = new Promise((resolve) => {
+    const callback = () => {
+      setTimeout(() => {
+        app = new App(options.root).$mount();
+        resolve(app);
+      }, 0);
+    };
+    if (import_features.features.get("asyncChildren") || document.readyState === "complete") {
+      callback();
+    } else {
+      document.addEventListener("readystatechange", () => {
+        if (document.readyState === "complete") {
+          callback();
+        }
+      });
+    }
   });
   return function useApp() {
-    if (isLoaded) {
-      return Promise.resolve(app);
-    }
-    return promise;
+    return p;
   };
 }
 if (module.exports.default) module.exports = module.exports.default;