@studiometa/js-toolkit 3.0.0-alpha.1 → 3.0.0-alpha.10

package/Base/managers/RefsManager.js

@@ -2,18 +2,16 @@ import { AbstractManager } from "./AbstractManager.js";
 import {
   isDev,
   isArray,
-  isDefined,
   getAncestorWhereUntil,
   endsWith,
-  startsWith
+  startsWith,
+  memo,
+  camelCase
 } from "../../utils/index.js";
+import { features } from "../features.js";
 const NORMALIZE_REF_NAME_REGEX = /\[\]$/;
 const NAMESPACED_REF_REGEX = /^(.*\.)/;
-const normalizedRefNamesCache = /* @__PURE__ */ new Map();
-function normalizeRefName(name) {
-  if (normalizedRefNamesCache.has(name)) {
-    return normalizedRefNamesCache.get(name);
-  }
+const normalizeRefName = memo(function normalizeRefName2(name) {
   let normalizedName = name;
   if (endsWith(name, "[]")) {
     normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, "");
@@ -21,14 +19,14 @@ function normalizeRefName(name) {
   if (normalizedName.includes(".")) {
     return normalizedName.replace(NAMESPACED_REF_REGEX, "");
   }
-  normalizedRefNamesCache.set(name, normalizedName);
   return normalizedName;
-}
+});
 function refBelongToInstance(ref, rootElement, name) {
-  const isPrefixed = startsWith(ref.dataset.ref, name);
+  const attributes = features.get("attributes");
+  const isPrefixed = startsWith(ref.getAttribute(attributes.ref), name);
   const firstComponentAncestor = getAncestorWhereUntil(
     ref,
-    (el) => el && (isPrefixed ? el.dataset.component === name && el : isDefined(el.dataset.component)) && el !== rootElement,
+    (el) => el && (isPrefixed ? el.getAttribute(attributes.component) === name && el : el.getAttribute(attributes.component)) && el !== rootElement,
     (el) => el === rootElement
   );
   return firstComponentAncestor === rootElement;
@@ -37,32 +35,25 @@ function __register(that, refName) {
   const isMultiple = endsWith(refName, "[]");
   const propName = normalizeRefName(refName);
   const { name } = that.__base.$options;
-  const refs = Array.from(
-    that.__element.querySelectorAll(
-      `[data-ref="${refName}"],[data-ref="${name}.${refName}"]`
-    )
-  ).filter((ref) => refBelongToInstance(ref, that.__element, name));
+  const attributes = features.get("attributes");
+  const refs = [];
+  const selector = `[${attributes.ref}="${refName}"],[${attributes.ref}="${name}.${refName}"]`;
+  for (const ref of that.__element.querySelectorAll(selector)) {
+    if (refBelongToInstance(ref, that.__element, name)) {
+      refs.push(ref);
+    }
+  }
   if (isDev && !isMultiple && refs.length > 1) {
     console.warn(
-      // @ts-ignore
-      `[${that.__base.$options.name}]`,
+      `[${that.__base.$id}]`,
       `The "${refName}" ref has been found multiple times.`,
       "Did you forgot to add the `[]` suffix to its name?"
     );
   }
-  if (!isMultiple && refs.length <= 1 && !isDefined(refs[0])) {
-    if (isDev) {
-      console.warn(
-        // @ts-ignore
-        `[${that.__base.$options.name}]`,
-        `The "${refName}" ref is missing.`,
-        `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`
-      );
-    }
-    return;
+  if (refs.length) {
+    that.__eventsManager.bindRef(refName, refs);
   }
-  that.__eventsManager.bindRef(refName, refs);
-  Object.defineProperty(that, propName, {
+  Object.defineProperty(that, camelCase(propName), {
     // @todo remove usage of non-multiple refs as array
     value: isMultiple || refs.length > 1 ? refs : refs[0],
     enumerable: true,
@@ -85,15 +76,13 @@ class RefsManager extends AbstractManager {
    * Register all refs.
    */
   registerAll() {
-    for (const refName of this.__refs)
-      __register(this, refName);
+    for (const refName of this.__refs) __register(this, refName);
   }
   /**
    * Unregister all refs.
    */
   unregisterAll() {
-    for (const refName of this.__refs)
-      __unregister(this, refName);
+    for (const refName of this.__refs) __unregister(this, refName);
   }
 }
 export {

package/Base/managers/RefsManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/RefsManager.ts"],
-  "sourcesContent": ["import { AbstractManager } from './AbstractManager.js';\nimport {\n  isDev,\n  isArray,\n  isDefined,\n  getAncestorWhereUntil,\n  endsWith,\n  startsWith,\n} from '../../utils/index.js';\n\nconst NORMALIZE_REF_NAME_REGEX = /\\[\\]$/;\nconst NAMESPACED_REF_REGEX = /^(.*\\.)/;\nconst normalizedRefNamesCache = new Map();\n\n/**\n * Normalize the name of ref.\n */\nexport function normalizeRefName(name: string) {\n  if (normalizedRefNamesCache.has(name)) {\n    return normalizedRefNamesCache.get(name);\n  }\n\n  let normalizedName = name;\n\n  if (endsWith(name, '[]')) {\n    normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, '');\n  }\n\n  if (normalizedName.includes('.')) {\n    return normalizedName.replace(NAMESPACED_REF_REGEX, '');\n  }\n\n  normalizedRefNamesCache.set(name, normalizedName);\n  return normalizedName;\n}\n\n/**\n * Filter refs belonging to the related Base instance.\n */\nfunction refBelongToInstance(ref: HTMLElement, rootElement: HTMLElement, name: string) {\n  const isPrefixed = startsWith(ref.dataset.ref, name);\n  const firstComponentAncestor = getAncestorWhereUntil(\n    ref,\n    (el) =>\n      el &&\n      (isPrefixed ? el.dataset.component === name && el : isDefined(el.dataset.component)) &&\n      el !== rootElement,\n    (el) => el === rootElement,\n  );\n\n  return firstComponentAncestor === rootElement;\n}\n\n/**\n * Register one ref.\n *\n * @param {RefsManager} that\n * @param {string} refName The ref name.\n * @private\n */\nfunction __register(that: RefsManager, refName: string) {\n  const isMultiple = endsWith(refName, '[]');\n  const propName = normalizeRefName(refName);\n  const { name } = that.__base.$options;\n\n  const refs = Array.from(\n    that.__element.querySelectorAll<HTMLElement>(\n      `[data-ref=\"${refName}\"],[data-ref=\"${name}.${refName}\"]`,\n    ),\n  ).filter((ref) => refBelongToInstance(ref, that.__element, name));\n\n  if (isDev && !isMultiple && refs.length > 1) {\n    console.warn(\n      // @ts-ignore\n      `[${that.__base.$options.name}]`,\n      `The \"${refName}\" ref has been found multiple times.`,\n      'Did you forgot to add the `[]` suffix to its name?',\n    );\n  }\n\n  if (!isMultiple && refs.length <= 1 && !isDefined(refs[0])) {\n    if (isDev) {\n      console.warn(\n        // @ts-ignore\n        `[${that.__base.$options.name}]`,\n        `The \"${refName}\" ref is missing.`,\n        `Is there an \\`[data-ref=\"${refName}\"]\\` element in the component's scope?`,\n      );\n    }\n\n    return;\n  }\n\n  that.__eventsManager.bindRef(refName, refs);\n\n  Object.defineProperty(that, propName, {\n    // @todo remove usage of non-multiple refs as array\n    value: isMultiple || refs.length > 1 ? refs : refs[0],\n    enumerable: true,\n    configurable: true,\n  });\n}\n\n/**\n * Unregister one ref.\n */\nfunction __unregister(that: RefsManager, refName: string) {\n  const propName = normalizeRefName(refName);\n  const refs = isArray(that[propName]) ? that[propName] : [that[propName]];\n  that.__eventsManager.unbindRef(refName, refs);\n}\n\n/**\n * Refs Manager\n *\n * @todo Use `MutationObserver` to automatically update refs?\n */\nexport class RefsManager extends AbstractManager {\n  /**\n   * Get refs configuration.\n   */\n  get __refs() {\n    return this.__config.refs ?? [];\n  }\n\n  /**\n   * Register all refs.\n   */\n  registerAll() {\n    for (const refName of this.__refs) __register(this, refName);\n  }\n\n  /**\n   * Unregister all refs.\n   */\n  unregisterAll() {\n    for (const refName of this.__refs) __unregister(this, refName);\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B,oBAAI,IAAI;AAKjC,SAAS,iBAAiB,MAAc;AAC7C,MAAI,wBAAwB,IAAI,IAAI,GAAG;AACrC,WAAO,wBAAwB,IAAI,IAAI;AAAA,EACzC;AAEA,MAAI,iBAAiB;AAErB,MAAI,SAAS,MAAM,IAAI,GAAG;AACxB,qBAAiB,eAAe,QAAQ,0BAA0B,EAAE;AAAA,EACtE;AAEA,MAAI,eAAe,SAAS,GAAG,GAAG;AAChC,WAAO,eAAe,QAAQ,sBAAsB,EAAE;AAAA,EACxD;AAEA,0BAAwB,IAAI,MAAM,cAAc;AAChD,SAAO;AACT;AAKA,SAAS,oBAAoB,KAAkB,aAA0B,MAAc;AACrF,QAAM,aAAa,WAAW,IAAI,QAAQ,KAAK,IAAI;AACnD,QAAM,yBAAyB;AAAA,IAC7B;AAAA,IACA,CAAC,OACC,OACC,aAAa,GAAG,QAAQ,cAAc,QAAQ,KAAK,UAAU,GAAG,QAAQ,SAAS,MAClF,OAAO;AAAA,IACT,CAAC,OAAO,OAAO;AAAA,EACjB;AAEA,SAAO,2BAA2B;AACpC;AASA,SAAS,WAAW,MAAmB,SAAiB;AACtD,QAAM,aAAa,SAAS,SAAS,IAAI;AACzC,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,EAAE,KAAK,IAAI,KAAK,OAAO;AAE7B,QAAM,OAAO,MAAM;AAAA,IACjB,KAAK,UAAU;AAAA,MACb,cAAc,OAAO,iBAAiB,IAAI,IAAI,OAAO;AAAA,IACvD;AAAA,EACF,EAAE,OAAO,CAAC,QAAQ,oBAAoB,KAAK,KAAK,WAAW,IAAI,CAAC;AAEhE,MAAI,SAAS,CAAC,cAAc,KAAK,SAAS,GAAG;AAC3C,YAAQ;AAAA;AAAA,MAEN,IAAI,KAAK,OAAO,SAAS,IAAI;AAAA,MAC7B,QAAQ,OAAO;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAEA,MAAI,CAAC,cAAc,KAAK,UAAU,KAAK,CAAC,UAAU,KAAK,CAAC,CAAC,GAAG;AAC1D,QAAI,OAAO;AACT,cAAQ;AAAA;AAAA,QAEN,IAAI,KAAK,OAAO,SAAS,IAAI;AAAA,QAC7B,QAAQ,OAAO;AAAA,QACf,4BAA4B,OAAO;AAAA,MACrC;AAAA,IACF;AAEA;AAAA,EACF;AAEA,OAAK,gBAAgB,QAAQ,SAAS,IAAI;AAE1C,SAAO,eAAe,MAAM,UAAU;AAAA;AAAA,IAEpC,OAAO,cAAc,KAAK,SAAS,IAAI,OAAO,KAAK,CAAC;AAAA,IACpD,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB,CAAC;AACH;AAKA,SAAS,aAAa,MAAmB,SAAiB;AACxD,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,OAAO,QAAQ,KAAK,QAAQ,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,KAAK,QAAQ,CAAC;AACvE,OAAK,gBAAgB,UAAU,SAAS,IAAI;AAC9C;AAOO,MAAM,oBAAoB,gBAAgB;AAAA;AAAA;AAAA;AAAA,EAI/C,IAAI,SAAS;AACX,WAAO,KAAK,SAAS,QAAQ,CAAC;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,eAAW,WAAW,KAAK;AAAQ,iBAAW,MAAM,OAAO;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB;AACd,eAAW,WAAW,KAAK;AAAQ,mBAAa,MAAM,OAAO;AAAA,EAC/D;AACF;",
-  "names": []
+  "sourcesContent": ["import { AbstractManager } from './AbstractManager.js';\nimport {\n  isDev,\n  isArray,\n  isDefined,\n  getAncestorWhereUntil,\n  endsWith,\n  startsWith,\n  memo,\n  camelCase,\n} from '../../utils/index.js';\nimport { features } from '../features.js';\n\nconst NORMALIZE_REF_NAME_REGEX = /\\[\\]$/;\nconst NAMESPACED_REF_REGEX = /^(.*\\.)/;\n\n/**\n * Normalize the name of ref.\n */\nexport const normalizeRefName = memo(function normalizeRefName(name: string) {\n  let normalizedName = name;\n\n  if (endsWith(name, '[]')) {\n    normalizedName = normalizedName.replace(NORMALIZE_REF_NAME_REGEX, '');\n  }\n\n  if (normalizedName.includes('.')) {\n    return normalizedName.replace(NAMESPACED_REF_REGEX, '');\n  }\n\n  return normalizedName;\n});\n\n/**\n * Filter refs belonging to the related Base instance.\n */\nfunction refBelongToInstance(ref: HTMLElement, rootElement: HTMLElement, name: string) {\n  const attributes = features.get('attributes');\n  const isPrefixed = startsWith(ref.getAttribute(attributes.ref), name);\n  const firstComponentAncestor = getAncestorWhereUntil(\n    ref,\n    (el) =>\n      el &&\n      (isPrefixed\n        ? el.getAttribute(attributes.component) === name && el\n        : el.getAttribute(attributes.component)) &&\n      el !== rootElement,\n    (el) => el === rootElement,\n  );\n\n  return firstComponentAncestor === rootElement;\n}\n\n/**\n * Register one ref.\n *\n * @param {RefsManager} that\n * @param {string} refName The ref name.\n * @private\n */\nfunction __register(that: RefsManager, refName: string) {\n  const isMultiple = endsWith(refName, '[]');\n  const propName = normalizeRefName(refName);\n  const { name } = that.__base.$options;\n  const attributes = features.get('attributes');\n  const refs = [] as HTMLElement[];\n  const selector = `[${attributes.ref}=\"${refName}\"],[${attributes.ref}=\"${name}.${refName}\"]`;\n\n  for (const ref of that.__element.querySelectorAll<HTMLElement>(selector)) {\n    if (refBelongToInstance(ref, that.__element, name)) {\n      refs.push(ref);\n    }\n  }\n\n  /* v8 ignore next 7 */\n  if (isDev && !isMultiple && refs.length > 1) {\n    console.warn(\n      `[${that.__base.$id}]`,\n      `The \"${refName}\" ref has been found multiple times.`,\n      'Did you forgot to add the `[]` suffix to its name?',\n    );\n  }\n\n  if (refs.length) {\n    that.__eventsManager.bindRef(refName, refs);\n  }\n\n  Object.defineProperty(that, camelCase(propName), {\n    // @todo remove usage of non-multiple refs as array\n    value: isMultiple || refs.length > 1 ? refs : refs[0],\n    enumerable: true,\n    configurable: true,\n  });\n}\n\n/**\n * Unregister one ref.\n */\nfunction __unregister(that: RefsManager, refName: string) {\n  const propName = normalizeRefName(refName);\n  const refs = isArray(that[propName]) ? that[propName] : [that[propName]];\n  that.__eventsManager.unbindRef(refName, refs);\n}\n\n/**\n * Refs Manager\n *\n * @todo Use `MutationObserver` to automatically update refs?\n */\nexport class RefsManager extends AbstractManager {\n  /**\n   * Get refs configuration.\n   */\n  get __refs() {\n    return this.__config.refs ?? [];\n  }\n\n  /**\n   * Register all refs.\n   */\n  registerAll() {\n    for (const refName of this.__refs) __register(this, refName);\n  }\n\n  /**\n   * Unregister all refs.\n   */\n  unregisterAll() {\n    for (const refName of this.__refs) __unregister(this, refName);\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AAEzB,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAKtB,MAAM,mBAAmB,KAAK,SAASA,kBAAiB,MAAc;AAC3E,MAAI,iBAAiB;AAErB,MAAI,SAAS,MAAM,IAAI,GAAG;AACxB,qBAAiB,eAAe,QAAQ,0BAA0B,EAAE;AAAA,EACtE;AAEA,MAAI,eAAe,SAAS,GAAG,GAAG;AAChC,WAAO,eAAe,QAAQ,sBAAsB,EAAE;AAAA,EACxD;AAEA,SAAO;AACT,CAAC;AAKD,SAAS,oBAAoB,KAAkB,aAA0B,MAAc;AACrF,QAAM,aAAa,SAAS,IAAI,YAAY;AAC5C,QAAM,aAAa,WAAW,IAAI,aAAa,WAAW,GAAG,GAAG,IAAI;AACpE,QAAM,yBAAyB;AAAA,IAC7B;AAAA,IACA,CAAC,OACC,OACC,aACG,GAAG,aAAa,WAAW,SAAS,MAAM,QAAQ,KAClD,GAAG,aAAa,WAAW,SAAS,MACxC,OAAO;AAAA,IACT,CAAC,OAAO,OAAO;AAAA,EACjB;AAEA,SAAO,2BAA2B;AACpC;AASA,SAAS,WAAW,MAAmB,SAAiB;AACtD,QAAM,aAAa,SAAS,SAAS,IAAI;AACzC,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,EAAE,KAAK,IAAI,KAAK,OAAO;AAC7B,QAAM,aAAa,SAAS,IAAI,YAAY;AAC5C,QAAM,OAAO,CAAC;AACd,QAAM,WAAW,IAAI,WAAW,GAAG,KAAK,OAAO,OAAO,WAAW,GAAG,KAAK,IAAI,IAAI,OAAO;AAExF,aAAW,OAAO,KAAK,UAAU,iBAA8B,QAAQ,GAAG;AACxE,QAAI,oBAAoB,KAAK,KAAK,WAAW,IAAI,GAAG;AAClD,WAAK,KAAK,GAAG;AAAA,IACf;AAAA,EACF;AAGA,MAAI,SAAS,CAAC,cAAc,KAAK,SAAS,GAAG;AAC3C,YAAQ;AAAA,MACN,IAAI,KAAK,OAAO,GAAG;AAAA,MACnB,QAAQ,OAAO;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAEA,MAAI,KAAK,QAAQ;AACf,SAAK,gBAAgB,QAAQ,SAAS,IAAI;AAAA,EAC5C;AAEA,SAAO,eAAe,MAAM,UAAU,QAAQ,GAAG;AAAA;AAAA,IAE/C,OAAO,cAAc,KAAK,SAAS,IAAI,OAAO,KAAK,CAAC;AAAA,IACpD,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB,CAAC;AACH;AAKA,SAAS,aAAa,MAAmB,SAAiB;AACxD,QAAM,WAAW,iBAAiB,OAAO;AACzC,QAAM,OAAO,QAAQ,KAAK,QAAQ,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,KAAK,QAAQ,CAAC;AACvE,OAAK,gBAAgB,UAAU,SAAS,IAAI;AAC9C;AAOO,MAAM,oBAAoB,gBAAgB;AAAA;AAAA;AAAA;AAAA,EAI/C,IAAI,SAAS;AACX,WAAO,KAAK,SAAS,QAAQ,CAAC;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,eAAW,WAAW,KAAK,OAAQ,YAAW,MAAM,OAAO;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA,EAKA,gBAAgB;AACd,eAAW,WAAW,KAAK,OAAQ,cAAa,MAAM,OAAO;AAAA,EAC/D;AACF;",
+  "names": ["normalizeRefName"]
 }

package/Base/managers/ResponsiveOptionsManager.js

@@ -1,20 +1,23 @@
 import { OptionsManager, __getPropertyName } from "./OptionsManager.js";
 import { useResize } from "../../services/index.js";
 import { isDev } from "../../utils/index.js";
+import { features } from "../features.js";
 function __getResponsiveName(that, name) {
   const { breakpoint } = useResize().props();
   if (!breakpoint) {
     return name;
   }
   let responsiveName = name;
-  const propertyName = __getPropertyName(name);
-  const regex = new RegExp(`${propertyName}:(.+)$`);
-  for (const optionName of Object.keys(that.__element.dataset)) {
+  const propertyName = __getPropertyName(name).toLowerCase();
+  const regex = new RegExp(`${propertyName}:(.+)$`, "i");
+  const attributes = features.get("attributes");
+  const dataOptionRegExp = new RegExp(`^${attributes.option}-`);
+  for (const optionName of that.__element.getAttributeNames()) {
     if (regex.test(optionName)) {
       const [, breakpoints] = optionName.match(regex);
       const isInBreakpoint = breakpoints.split(":").includes(breakpoint);
       if (isInBreakpoint) {
-        responsiveName = optionName.replace(/^option/, "");
+        responsiveName = optionName.replace(dataOptionRegExp, "");
       }
     }
   }

package/Base/managers/ResponsiveOptionsManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../packages/js-toolkit/Base/managers/ResponsiveOptionsManager.ts"],
-  "sourcesContent": ["import { OptionsManager, __getPropertyName } from './OptionsManager.js';\nimport type { OptionObject } from './OptionsManager.js';\nimport { useResize } from '../../services/index.js';\nimport { isDev } from '../../utils/index.js';\n\nexport type ResponsiveOptionObject = OptionObject & { responsive?: boolean };\n\n/**\n * Get the currently active responsive name of an option.\n *\n * @param   {ResponsiveOptionsManager} that\n * @param   {string} name The default name of the option.\n * @returns {string}      The responsive name if one matches the current breakpoint, the default name otherwise.\n */\nfunction __getResponsiveName(that: ResponsiveOptionsManager, name: string) {\n  const { breakpoint } = useResize().props();\n\n  if (!breakpoint) {\n    return name;\n  }\n\n  let responsiveName = name;\n  const propertyName = __getPropertyName(name);\n  const regex = new RegExp(`${propertyName}:(.+)$`);\n\n  for (const optionName of Object.keys(that.__element.dataset)) {\n    if (regex.test(optionName)) {\n      const [, breakpoints] = optionName.match(regex);\n      const isInBreakpoint = breakpoints.split(':').includes(breakpoint);\n      if (isInBreakpoint) {\n        responsiveName = optionName.replace(/^option/, '');\n      }\n    }\n  }\n\n  return responsiveName;\n}\n\n/**\n * Class options to manage options as data attributes on an HTML element.\n */\nexport class ResponsiveOptionsManager extends OptionsManager {\n  /**\n   * Get an option value.\n   *\n   * @param   {string} name The option name.\n   * @param   {ResponsiveOptionObject} config The option configuration.\n   * @returns {any}\n   */\n  get(name: string, config: ResponsiveOptionObject) {\n    if (!config.responsive) {\n      return super.get(name, config);\n    }\n\n    return super.get(__getResponsiveName(this, name), config);\n  }\n\n  /**\n   * Set an option value.\n   *\n   * @param {string} name The option name.\n   * @param {any} value The new value.\n   * @param {ResponsiveOptionObject} config The option configuration.\n   */\n  set(name: string, value: unknown, config: ResponsiveOptionObject) {\n    if (!config.responsive) {\n      super.set(name, value, config);\n      return;\n    }\n\n    if (isDev) {\n      console.warn(`[${this.__config.name}]`, 'Responsive options are read-only.');\n    }\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB,yBAAyB;AAElD,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AAWtB,SAAS,oBAAoB,MAAgC,MAAc;AACzE,QAAM,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM;AAEzC,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,MAAI,iBAAiB;AACrB,QAAM,eAAe,kBAAkB,IAAI;AAC3C,QAAM,QAAQ,IAAI,OAAO,GAAG,YAAY,QAAQ;AAEhD,aAAW,cAAc,OAAO,KAAK,KAAK,UAAU,OAAO,GAAG;AAC5D,QAAI,MAAM,KAAK,UAAU,GAAG;AAC1B,YAAM,CAAC,EAAE,WAAW,IAAI,WAAW,MAAM,KAAK;AAC9C,YAAM,iBAAiB,YAAY,MAAM,GAAG,EAAE,SAAS,UAAU;AACjE,UAAI,gBAAgB;AAClB,yBAAiB,WAAW,QAAQ,WAAW,EAAE;AAAA,MACnD;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAKO,MAAM,iCAAiC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3D,IAAI,MAAc,QAAgC;AAChD,QAAI,CAAC,OAAO,YAAY;AACtB,aAAO,MAAM,IAAI,MAAM,MAAM;AAAA,IAC/B;AAEA,WAAO,MAAM,IAAI,oBAAoB,MAAM,IAAI,GAAG,MAAM;AAAA,EAC1D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,IAAI,MAAc,OAAgB,QAAgC;AAChE,QAAI,CAAC,OAAO,YAAY;AACtB,YAAM,IAAI,MAAM,OAAO,MAAM;AAC7B;AAAA,IACF;AAEA,QAAI,OAAO;AACT,cAAQ,KAAK,IAAI,KAAK,SAAS,IAAI,KAAK,mCAAmC;AAAA,IAC7E;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { OptionsManager, __getPropertyName } from './OptionsManager.js';\nimport type { OptionObject } from './OptionsManager.js';\nimport { useResize } from '../../services/index.js';\nimport { isDev } from '../../utils/index.js';\nimport { features } from '../features.js';\n\nexport type ResponsiveOptionObject = OptionObject & { responsive?: boolean };\n\n/**\n * Get the currently active responsive name of an option.\n *\n * @param   {ResponsiveOptionsManager} that\n * @param   {string} name The default name of the option.\n * @returns {string}      The responsive name if one matches the current breakpoint, the default name otherwise.\n */\nfunction __getResponsiveName(that: ResponsiveOptionsManager, name: string) {\n  const { breakpoint } = useResize().props();\n\n  if (!breakpoint) {\n    return name;\n  }\n\n  let responsiveName = name;\n  const propertyName = __getPropertyName(name).toLowerCase();\n  const regex = new RegExp(`${propertyName}:(.+)$`, 'i');\n  const attributes = features.get('attributes');\n  const dataOptionRegExp = new RegExp(`^${attributes.option}-`);\n\n  for (const optionName of that.__element.getAttributeNames()) {\n    if (regex.test(optionName)) {\n      const [, breakpoints] = optionName.match(regex);\n      const isInBreakpoint = breakpoints.split(':').includes(breakpoint);\n      if (isInBreakpoint) {\n        responsiveName = optionName.replace(dataOptionRegExp, '');\n      }\n    }\n  }\n\n  return responsiveName;\n}\n\n/**\n * Class options to manage options as data attributes on an HTML element.\n */\nexport class ResponsiveOptionsManager extends OptionsManager {\n  /**\n   * Get an option value.\n   *\n   * @param   {string} name The option name.\n   * @param   {ResponsiveOptionObject} config The option configuration.\n   * @returns {any}\n   */\n  get(name: string, config: ResponsiveOptionObject) {\n    if (!config.responsive) {\n      return super.get(name, config);\n    }\n\n    return super.get(__getResponsiveName(this, name), config);\n  }\n\n  /**\n   * Set an option value.\n   *\n   * @param {string} name The option name.\n   * @param {any} value The new value.\n   * @param {ResponsiveOptionObject} config The option configuration.\n   */\n  set(name: string, value: unknown, config: ResponsiveOptionObject) {\n    if (!config.responsive) {\n      super.set(name, value, config);\n      return;\n    }\n\n    if (isDev) {\n      console.warn(`[${this.__config.name}]`, 'Responsive options are read-only.');\n    }\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB,yBAAyB;AAElD,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AACtB,SAAS,gBAAgB;AAWzB,SAAS,oBAAoB,MAAgC,MAAc;AACzE,QAAM,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM;AAEzC,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,MAAI,iBAAiB;AACrB,QAAM,eAAe,kBAAkB,IAAI,EAAE,YAAY;AACzD,QAAM,QAAQ,IAAI,OAAO,GAAG,YAAY,UAAU,GAAG;AACrD,QAAM,aAAa,SAAS,IAAI,YAAY;AAC5C,QAAM,mBAAmB,IAAI,OAAO,IAAI,WAAW,MAAM,GAAG;AAE5D,aAAW,cAAc,KAAK,UAAU,kBAAkB,GAAG;AAC3D,QAAI,MAAM,KAAK,UAAU,GAAG;AAC1B,YAAM,CAAC,EAAE,WAAW,IAAI,WAAW,MAAM,KAAK;AAC9C,YAAM,iBAAiB,YAAY,MAAM,GAAG,EAAE,SAAS,UAAU;AACjE,UAAI,gBAAgB;AAClB,yBAAiB,WAAW,QAAQ,kBAAkB,EAAE;AAAA,MAC1D;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;AAKO,MAAM,iCAAiC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3D,IAAI,MAAc,QAAgC;AAChD,QAAI,CAAC,OAAO,YAAY;AACtB,aAAO,MAAM,IAAI,MAAM,MAAM;AAAA,IAC/B;AAEA,WAAO,MAAM,IAAI,oBAAoB,MAAM,IAAI,GAAG,MAAM;AAAA,EAC1D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,IAAI,MAAc,OAAgB,QAAgC;AAChE,QAAI,CAAC,OAAO,YAAY;AACtB,YAAM,IAAI,MAAM,OAAO,MAAM;AAC7B;AAAA,IACF;AAEA,QAAI,OAAO;AACT,cAAQ,KAAK,IAAI,KAAK,SAAS,IAAI,KAAK,mCAAmC;AAAA,IAC7E;AAAA,EACF;AACF;",
   "names": []
 }

package/Base/utils.d.ts

@@ -1,8 +1,8 @@
-import type { Base, BaseConfig } from './index.js';
+import type { Base, BaseConfig, BaseConstructor } from './index.js';
 /**
  * Add a task to the main queue.
  */
-export declare function addToQueue(fn: () => unknown): void;
+export declare function addToQueue(fn: () => unknown): Promise<unknown>;
 /**
  * Get a list of elements based on the name of a component.
  *
@@ -24,7 +24,12 @@ export declare function eventIsDefinedInConfig(event: string, config: BaseConfig
 export declare function eventIsNative(event: string, element: HTMLElement): boolean;
 /**
  * Get the target of a given event.
- *
- * @todo Return false in v3 if event is not defined or not native to prevent adding a listener.
  */
-export declare function getEventTarget(instance: Base, event: string, config: BaseConfig): Base | Base['$el'];
+export declare function getEventTarget(instance: Base, event: string, config: BaseConfig): Base['$el'];
+/**
+ * Get all mounted instances or the ones from a given component.
+ */
+export declare function getInstances(): Set<Base>;
+export declare function getInstances<T extends BaseConstructor = BaseConstructor>(ctor: T): Set<InstanceType<T>>;
+export declare function addInstance(instance: Base): void;
+export declare function deleteInstance(instance: Base): void;

package/Base/utils.js

@@ -1,33 +1,35 @@
-import { isArray, isDefined, isDev, SmartQueue } from "../utils/index.js";
+import { isArray, isDefined, SmartQueue } from "../utils/index.js";
 import { features } from "./features.js";
 let queue;
 function addToQueue(fn) {
-  if (!features.get("asyncChildren")) {
+  if (features.get("blocking")) {
     fn();
     return;
   }
   if (!queue) {
     queue = new SmartQueue();
   }
-  queue.add(fn);
+  return queue.add(fn);
 }
 const selectors = /* @__PURE__ */ new Map();
 const separator = " ";
 function getSelector(nameOrSelector) {
-  if (!selectors.has(nameOrSelector)) {
+  const { component } = features.get("attributes");
+  const key = component + nameOrSelector;
+  if (!selectors.has(key)) {
     const parts = [
       // Single selector
-      `[data-component="${nameOrSelector}"]`,
+      `[${component}="${nameOrSelector}"]`,
       // Selector in the middle of a list of selectors
-      `[data-component*="${separator}${nameOrSelector}${separator}"]`,
+      `[${component}*="${separator}${nameOrSelector}${separator}"]`,
       // Selector at the end of a list of selectors
-      `[data-component$="${separator}${nameOrSelector}"]`,
+      `[${component}$="${separator}${nameOrSelector}"]`,
       // Selector at the beginning of a list of selectors
-      `[data-component^="${nameOrSelector}${separator}"]`
+      `[${component}^="${nameOrSelector}${separator}"]`
     ];
-    selectors.set(nameOrSelector, parts.join(","));
+    selectors.set(key, parts.join(","));
   }
-  return selectors.get(nameOrSelector);
+  return selectors.get(key);
 }
 function getComponentElements(nameOrSelector, element = document) {
   const selector = getSelector(nameOrSelector);
@@ -48,26 +50,38 @@ function eventIsNative(event, element) {
   return isDefined(element[`on${event}`]);
 }
 function getEventTarget(instance, event, config) {
-  if (eventIsDefinedInConfig(event, config)) {
-    return instance;
-  }
-  if (eventIsNative(event, instance.$el)) {
+  if (eventIsDefinedInConfig(event, config) || eventIsNative(event, instance.$el)) {
     return instance.$el;
   }
-  if (isDev) {
-    console.warn(
-      `[${config.name}]`,
-      `The "${event}" event is missing from the configuration and is not a native`,
-      `event for the root element of type \`${instance.$el.constructor.name}\`.`
-    );
+}
+const instances = /* @__PURE__ */ new Set();
+function getInstances(ctor) {
+  if (isDefined(ctor)) {
+    const filteredInstances = /* @__PURE__ */ new Set();
+    for (const instance of instances) {
+      if (instance instanceof ctor) {
+        filteredInstances.add(instance);
+      }
+    }
+    return filteredInstances;
+  } else {
+    return new Set(instances);
   }
-  return instance;
+}
+function addInstance(instance) {
+  instances.add(instance);
+}
+function deleteInstance(instance) {
+  instances.delete(instance);
 }
 export {
+  addInstance,
   addToQueue,
+  deleteInstance,
   eventIsDefinedInConfig,
   eventIsNative,
   getComponentElements,
-  getEventTarget
+  getEventTarget,
+  getInstances
 };
 //# sourceMappingURL=utils.js.map

package/Base/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/Base/utils.ts"],
-  "sourcesContent": ["import { isArray, isDefined, isDev, SmartQueue } from '../utils/index.js';\nimport type { Base, BaseConfig } from './index.js';\nimport { features } from './features.js';\n\nlet queue: SmartQueue;\n\n/**\n * Add a task to the main queue.\n */\nexport function addToQueue(fn: () => unknown): void {\n  if (!features.get('asyncChildren')) {\n    fn();\n    return;\n  }\n\n  if (!queue) {\n    queue = new SmartQueue();\n  }\n\n  queue.add(fn);\n}\n\nconst selectors = new Map();\n\n// Separator used for multi-component declaration in `data-component` attributeS.\nconst separator = ' ';\n\n/**\n * Get the selector for a given component.\n */\nfunction getSelector(nameOrSelector: string): string {\n  if (!selectors.has(nameOrSelector)) {\n    const parts = [\n      // Single selector\n      `[data-component=\"${nameOrSelector}\"]`,\n      // Selector in the middle of a list of selectors\n      `[data-component*=\"${separator}${nameOrSelector}${separator}\"]`,\n      // Selector at the end of a list of selectors\n      `[data-component$=\"${separator}${nameOrSelector}\"]`,\n      // Selector at the beginning of a list of selectors\n      `[data-component^=\"${nameOrSelector}${separator}\"]`,\n    ];\n    selectors.set(nameOrSelector, parts.join(','));\n  }\n\n  return selectors.get(nameOrSelector);\n}\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 = getSelector(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, and if the selector does not\n  // start with an uppercase letter, matching a component's name, try a classic DOM selector.\n  if (elements.length === 0 && nameOrSelector[0] === nameOrSelector[0].toLowerCase()) {\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 *\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,OAAO,kBAAkB;AAEtD,SAAS,gBAAgB;AAEzB,IAAI;AAKG,SAAS,WAAW,IAAyB;AAClD,MAAI,CAAC,SAAS,IAAI,eAAe,GAAG;AAClC,OAAG;AACH;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,YAAQ,IAAI,WAAW;AAAA,EACzB;AAEA,QAAM,IAAI,EAAE;AACd;AAEA,MAAM,YAAY,oBAAI,IAAI;AAG1B,MAAM,YAAY;AAKlB,SAAS,YAAY,gBAAgC;AACnD,MAAI,CAAC,UAAU,IAAI,cAAc,GAAG;AAClC,UAAM,QAAQ;AAAA;AAAA,MAEZ,oBAAoB,cAAc;AAAA;AAAA,MAElC,qBAAqB,SAAS,GAAG,cAAc,GAAG,SAAS;AAAA;AAAA,MAE3D,qBAAqB,SAAS,GAAG,cAAc;AAAA;AAAA,MAE/C,qBAAqB,cAAc,GAAG,SAAS;AAAA,IACjD;AACA,cAAU,IAAI,gBAAgB,MAAM,KAAK,GAAG,CAAC;AAAA,EAC/C;AAEA,SAAO,UAAU,IAAI,cAAc;AACrC;AAYO,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,YAAY,cAAc;AAC3C,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAQ;AAAA,EAAC;AAIT,MAAI,SAAS,WAAW,KAAK,eAAe,CAAC,MAAM,eAAe,CAAC,EAAE,YAAY,GAAG;AAClF,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,KAAK,EAAE,CAAC;AACxC;AAOO,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,IAAI;AAAA,MACf,QAAQ,KAAK;AAAA,MACb,wCAAwC,SAAS,IAAI,YAAY,IAAI;AAAA,IACvE;AAAA,EACF;AAGA,SAAO;AACT;",
+  "sourcesContent": ["import { isArray, isDefined, isDev, SmartQueue } from '../utils/index.js';\nimport type { Base, BaseConfig, BaseConstructor } from './index.js';\nimport { features } from './features.js';\n\nlet queue: SmartQueue;\n\n/**\n * Add a task to the main queue.\n */\nexport function addToQueue(fn: () => unknown) {\n  if (features.get('blocking')) {\n    fn();\n    return;\n  }\n\n  if (!queue) {\n    queue = new SmartQueue();\n  }\n\n  return queue.add(fn);\n}\n\nconst selectors = new Map();\n\n// Separator used for multi-component declaration in `data-component` attributeS.\nconst separator = ' ';\n\n/**\n * Get the selector for a given component.\n */\nfunction getSelector(nameOrSelector: string): string {\n  const { component } = features.get('attributes');\n  const key = component + nameOrSelector;\n\n  if (!selectors.has(key)) {\n    const parts = [\n      // Single selector\n      `[${component}=\"${nameOrSelector}\"]`,\n      // Selector in the middle of a list of selectors\n      `[${component}*=\"${separator}${nameOrSelector}${separator}\"]`,\n      // Selector at the end of a list of selectors\n      `[${component}$=\"${separator}${nameOrSelector}\"]`,\n      // Selector at the beginning of a list of selectors\n      `[${component}^=\"${nameOrSelector}${separator}\"]`,\n    ];\n    selectors.set(key, parts.join(','));\n  }\n\n  return selectors.get(key);\n}\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 = getSelector(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, and if the selector does not\n  // start with an uppercase letter, matching a component's name, try a classic DOM selector.\n  if (elements.length === 0 && nameOrSelector[0] === nameOrSelector[0].toLowerCase()) {\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(\n  instance: Base,\n  event: string,\n  config: BaseConfig,\n): Base['$el'] {\n  if (eventIsDefinedInConfig(event, config) || eventIsNative(event, instance.$el)) {\n    return instance.$el;\n  }\n}\n\nconst instances = new Set<Base>();\n\n/**\n * Get all mounted instances or the ones from a given component.\n */\nexport function getInstances(): Set<Base>;\nexport function getInstances<T extends BaseConstructor = BaseConstructor>(\n  ctor: T,\n): Set<InstanceType<T>>;\nexport function getInstances<T extends BaseConstructor = BaseConstructor>(\n  ctor?: T,\n): Set<InstanceType<T>> | Set<Base> {\n  if (isDefined(ctor)) {\n    const filteredInstances = new Set<InstanceType<T>>();\n    for (const instance of instances) {\n      if (instance instanceof ctor) {\n        filteredInstances.add(instance as InstanceType<T>);\n      }\n    }\n    return filteredInstances;\n  } else {\n    return new Set(instances);\n  }\n}\n\nexport function addInstance(instance: Base) {\n  instances.add(instance);\n}\n\nexport function deleteInstance(instance: Base) {\n  instances.delete(instance);\n}\n"],
+  "mappings": "AAAA,SAAS,SAAS,WAAkB,kBAAkB;AAEtD,SAAS,gBAAgB;AAEzB,IAAI;AAKG,SAAS,WAAW,IAAmB;AAC5C,MAAI,SAAS,IAAI,UAAU,GAAG;AAC5B,OAAG;AACH;AAAA,EACF;AAEA,MAAI,CAAC,OAAO;AACV,YAAQ,IAAI,WAAW;AAAA,EACzB;AAEA,SAAO,MAAM,IAAI,EAAE;AACrB;AAEA,MAAM,YAAY,oBAAI,IAAI;AAG1B,MAAM,YAAY;AAKlB,SAAS,YAAY,gBAAgC;AACnD,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,YAAY;AAC/C,QAAM,MAAM,YAAY;AAExB,MAAI,CAAC,UAAU,IAAI,GAAG,GAAG;AACvB,UAAM,QAAQ;AAAA;AAAA,MAEZ,IAAI,SAAS,KAAK,cAAc;AAAA;AAAA,MAEhC,IAAI,SAAS,MAAM,SAAS,GAAG,cAAc,GAAG,SAAS;AAAA;AAAA,MAEzD,IAAI,SAAS,MAAM,SAAS,GAAG,cAAc;AAAA;AAAA,MAE7C,IAAI,SAAS,MAAM,cAAc,GAAG,SAAS;AAAA,IAC/C;AACA,cAAU,IAAI,KAAK,MAAM,KAAK,GAAG,CAAC;AAAA,EACpC;AAEA,SAAO,UAAU,IAAI,GAAG;AAC1B;AAYO,SAAS,qBACd,gBACA,UAAkC,UACnB;AACf,QAAM,WAAW,YAAY,cAAc;AAC3C,MAAI,WAAW,CAAC;AAEhB,MAAI;AACF,eAAW,MAAM,KAAK,QAAQ,iBAAiB,QAAQ,CAAC;AAAA,EAE1D,QAAQ;AAAA,EAAC;AAIT,MAAI,SAAS,WAAW,KAAK,eAAe,CAAC,MAAM,eAAe,CAAC,EAAE,YAAY,GAAG;AAClF,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,KAAK,EAAE,CAAC;AACxC;AAKO,SAAS,eACd,UACA,OACA,QACa;AACb,MAAI,uBAAuB,OAAO,MAAM,KAAK,cAAc,OAAO,SAAS,GAAG,GAAG;AAC/E,WAAO,SAAS;AAAA,EAClB;AACF;AAEA,MAAM,YAAY,oBAAI,IAAU;AASzB,SAAS,aACd,MACkC;AAClC,MAAI,UAAU,IAAI,GAAG;AACnB,UAAM,oBAAoB,oBAAI,IAAqB;AACnD,eAAW,YAAY,WAAW;AAChC,UAAI,oBAAoB,MAAM;AAC5B,0BAAkB,IAAI,QAA2B;AAAA,MACnD;AAAA,IACF;AACA,WAAO;AAAA,EACT,OAAO;AACL,WAAO,IAAI,IAAI,SAAS;AAAA,EAC1B;AACF;AAEO,SAAS,YAAY,UAAgB;AAC1C,YAAU,IAAI,QAAQ;AACxB;AAEO,SAAS,eAAe,UAAgB;AAC7C,YAAU,OAAO,QAAQ;AAC3B;",
   "names": []
 }

package/README.md

@@ -1,9 +1,11 @@
-# JS Toolkit
+# @studiometa/js-toolkit
 
-[![NPM Version](https://img.shields.io/npm/v/@studiometa/js-toolkit.svg?style=flat-square)](https://www.npmjs.com/package/@studiometa/js-toolkit/)
-[![Size](https://img.shields.io/bundlephobia/minzip/@studiometa/js-toolkit?label=size&style=flat-square)](https://bundlephobia.com/package/@studiometa/js-toolkit)
-[![Dependency Status](https://img.shields.io/librariesio/release/npm/@studiometa/js-toolkit?style=flat-square)](https://david-dm.org/studiometa/js-toolkit)
-![Codecov](https://img.shields.io/codecov/c/github/studiometa/js-toolkit?style=flat-square)
+[![NPM Version](https://img.shields.io/npm/v/@studiometa/js-toolkit.svg?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/js-toolkit/)
+[![NPM Next Version](https://img.shields.io/npm/v/@studiometa/js-toolkit/next?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/js-toolkit/v/next)
+[![Downloads](https://img.shields.io/npm/dm/@studiometa/js-toolkit?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/js-toolkit/)
+[![Size](https://img.shields.io/bundlephobia/minzip/@studiometa/js-toolkit?style=flat&colorB=3e63dd&colorA=414853&label=size)](https://bundlephobia.com/package/@studiometa/js-toolkit)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@studiometa/js-toolkit?style=flat&colorB=3e63dd&colorA=414853)](https://david-dm.org/studiometa/js-toolkit)
+![Codecov](https://img.shields.io/codecov/c/github/studiometa/js-toolkit?style=flat&colorB=3e63dd&colorA=414853)
 
 > A JavaScript data-attributes driven micro-framework shipped with plenty of useful utility functions to boost your project.
 
@@ -26,7 +28,106 @@ This project is a JavaScript micro-framework (along with its utility functions)
 - Initializing components in the right place at the right time
 - Defining dependencies between components
 
-Visit [js-toolkit.studiometa.dev](https://js-toolkit.studiometa.dev) to learn more.
+Visit [js-toolkit.studiometa.dev](https://js-toolkit.studiometa.dev) to learn more, or jump directly to [ui.studiometa.dev](https://ui.studiometa.dev) to discover existing components.
+
+## Quick overview
+
+This framework lets you define components as classes, and bind them to the DOM with `data-…` attributes. For example, here is how a `Counter` component would be defined in JavaScript:
+
+```js
+import { Base } from '@studiometa/js-toolkit';
+
+export default class Counter extends Base {
+  static config = {
+    name: 'Counter',
+    refs: ['add', 'remove', 'count'],
+  };
+
+  get counter() {
+    return this.$refs.count.valueAsNumber;
+  }
+
+  set counter(value) {
+    this.$refs.count.value = value;
+  }
+
+  onAddClick() {
+    this.counter += 1;
+  }
+
+  onRemoveClick() {
+    this.counter -= 1;
+  }
+}
+```
+
+And its accompanying HTML would be sprinkled with `data-…` attributes to bind elements from the DOM to the JavaScript class.
+
+```html
+<div data-component="Counter">
+  <button data-ref="add">Add</button>
+  <button data-ref="remove">Remove</button>
+  <input data-ref="count" type="number" value="0" />
+</div>
+```
+
+You can define options that can be specified with `data-option-...` attributes as well. First in JavaScript:
+
+```diff
+  class Counter extends Base {
+    static config = {
+      name: 'Counter',
+      refs: ['add', 'remove', 'count'],
++     options: {
++       step: {
++         type: Number,
++         default: 1,
++       },
++     },
+    };
+
+    onAddClick() {
+-     this.counter += 1;
++     this.counter += this.$options.step;
+    }
+
+    onRemoveClick() {
+-     this.counter -= 1;
++     this.counter -= this.$options.step;
+    }
+  }
+```
+
+And then adjust it as you wish in your HTML:
+
+```diff
+- <div data-component="Counter">
++ <div data-component="Counter" data-option-step="2">
+    <button data-ref="add">Add</button>
+    <button data-ref="remove">Remove</button>
+    <input data-ref="count" type="number" value="0">
+  </div>
+```
+
+The framework also offers a way to instantiate a root component as an application, with child components as dependencies:
+
+```js
+import { Base, createApp } from '@studiometa/js-toolkit';
+import Counter from './components/Counter.js';
+
+class App extends Base {
+  static config = {
+    name: 'App',
+    components: {
+      Counter,
+    },
+  };
+}
+
+export default createApp(App);
+```
+
+Visit our ["Getting Started" guide](https://js-toolkit.studiometa.dev/guide/) to learn more and try the above component by visiting [the playground](https://ui.studiometa.dev/-/play/#script=eNqVkjFPwzAQhff%2BijcguRVtEGurSpTuDKyIwdiXYprYkX2pQFX%2BO7bjlg6A1EiJndO97873bNrOecYRjzLQHMqTZNp0HQbU3rUQD4F7bVxLLO8%2BwoKda%2FaGxWoyUY0MAVvXWyYP%2BmSyOmQOjhMgsGSjoJytzQ7rHAOsbGkJUVRinoOe6rDEi5BaizmEp9YdKO1UShOvY5br2DgbE0dSqkDdzx%2FAX11kP%2FXtG%2FlRkh5NtewbXuL%2BFBvGzRC%2FQzwHsCOOfeaOprMC9MS9t%2BB3E6qb1GCVM6qDbHrahLHKKiESIVwQcsYJ87s%2BjiOvZ72zG623jVH7cwNZWZi4XRdSGUKVzn6hfs4j%2Bwew%2BBsQEaOVyfbrbIyKYqFy8SJZsnzhTzG5TDstcdyp2umSTeM7W30DtazCdQ%3D%3D&html=eNqFkEsKwzAMRPc9hdDe5EOXcaD0Br2BEyvBkMjGkUN7%2Byb1ogkUupJAmjfMNNatYI0Y1fs5eCYWjXefWChiPvggzrNahILGGqGfzLJoDOoKw0RPGM22YnsBaLok4jnLIg0ajbUHQQ3dqLopkarKEuLmYslie7O2KbL0NyXS7Ff6D3p8%2Fk4sxyHJAdXv0RDkFUgjp7nbY65mQ2ksTw7R8aiqPBwvJF%2BfS1NstbVv4jxoZA%3D%3D&style=eNpLyk%2BpVKjmUlAoSExJycxLt1IwLErNteaqBQBpsgf8). Discover our existing library of components by checking out the [@studiometa/ui](https://github.com/studiometa/ui) package.
 
 ## Contributing
 

package/decorators/index.d.ts

@@ -7,6 +7,7 @@ export * from './withIntersectionObserver.js';
 export * from './withMountOnMediaQuery.js';
 export * from './withMountWhenInView.js';
 export * from './withMountWhenPrefersMotion.js';
+export * from './withName.js';
 export * from './withRelativePointer.js';
 export * from './withResponsiveOptions.js';
 export * from './withScrolledInView/index.js';

package/decorators/index.js

@@ -7,6 +7,7 @@ export * from "./withIntersectionObserver.js";
 export * from "./withMountOnMediaQuery.js";
 export * from "./withMountWhenInView.js";
 export * from "./withMountWhenPrefersMotion.js";
+export * from "./withName.js";
 export * from "./withRelativePointer.js";
 export * from "./withResponsiveOptions.js";
 export * from "./withScrolledInView/index.js";

package/decorators/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/decorators/index.ts"],
-  "sourcesContent": ["export * from './withBreakpointManager.js';\nexport * from './withBreakpointObserver.js';\nexport * from './withDrag.js';\nexport * from './withExtraConfig.js';\nexport * from './withFreezedOptions.js';\nexport * from './withIntersectionObserver.js';\nexport * from './withMountOnMediaQuery.js';\nexport * from './withMountWhenInView.js';\nexport * from './withMountWhenPrefersMotion.js';\nexport * from './withRelativePointer.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView/index.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["export * from './withBreakpointManager.js';\nexport * from './withBreakpointObserver.js';\nexport * from './withDrag.js';\nexport * from './withExtraConfig.js';\nexport * from './withFreezedOptions.js';\nexport * from './withIntersectionObserver.js';\nexport * from './withMountOnMediaQuery.js';\nexport * from './withMountWhenInView.js';\nexport * from './withMountWhenPrefersMotion.js';\nexport * from './withName.js';\nexport * from './withRelativePointer.js';\nexport * from './withResponsiveOptions.js';\nexport * from './withScrolledInView/index.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

package/decorators/withBreakpointManager.js

@@ -55,20 +55,22 @@ function withBreakpointManager(BaseClass, breakpoints) {
      * Override the default $mount method to prevent component's from being
      * mounted when they should not.
      */
-    $mount() {
-      super.$mount();
+    async $mount() {
+      await super.$mount();
       testBreakpoints(instances.get(this));
       return this;
     }
     /**
      * Destroy all instances when the main one is destroyed.
      */
-    $destroy() {
+    async $destroy() {
+      const promises = [];
       if (isArray(instances.get(this))) {
         for (const [, instance] of instances.get(this)) {
-          instance.$destroy();
+          promises.push(instance.$destroy());
         }
       }
+      await Promise.all(promises);
       return super.$destroy();
     }
   }

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  for (const [breakpointKeys, instance] of breakpoints) {\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        for (const [, instance] of instances.get(this)) {\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,aAAW,CAAC,gBAAgB,QAAQ,KAAK,aAAa;AACpD,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;AACF;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;AAAA,EAKA,MAAM,8BAA+D,UAAa;AAAA;AAAA;AAAA;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,GAAG,IAAI,MAAM;AACzC,wBAAgB,UAAU,IAAI,IAAI,CAAC;AAAA,MACrC,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAe;AACb,YAAM,OAAO;AAEb,sBAAgB,UAAU,IAAI,IAAI,CAAC;AAEnC,aAAO;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKA,WAAiB;AACf,UAAI,QAAQ,UAAU,IAAI,IAAI,CAAC,GAAG;AAChC,mBAAW,CAAC,EAAE,QAAQ,KAAK,UAAU,IAAI,IAAI,GAAG;AAC9C,mBAAS,SAAS;AAAA,QACpB;AAAA,MACF;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  for (const [breakpointKeys, instance] of breakpoints) {\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    async $mount() {\n      await 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    async $destroy() {\n      const promises = [];\n      if (isArray(instances.get(this))) {\n        for (const [, instance] of instances.get(this)) {\n          promises.push(instance.$destroy());\n        }\n      }\n\n      await Promise.all(promises);\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,aAAW,CAAC,gBAAgB,QAAQ,KAAK,aAAa;AACpD,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;AACF;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;AAAA,EAKA,MAAM,8BAA+D,UAAa;AAAA;AAAA;AAAA;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,GAAG,IAAI,MAAM;AACzC,wBAAgB,UAAU,IAAI,IAAI,CAAC;AAAA,MACrC,CAAC;AAAA,IACH;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAM,SAAS;AACb,YAAM,MAAM,OAAO;AAEnB,sBAAgB,UAAU,IAAI,IAAI,CAAC;AAEnC,aAAO;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKA,MAAM,WAAW;AACf,YAAM,WAAW,CAAC;AAClB,UAAI,QAAQ,UAAU,IAAI,IAAI,CAAC,GAAG;AAChC,mBAAW,CAAC,EAAE,QAAQ,KAAK,UAAU,IAAI,IAAI,GAAG;AAC9C,mBAAS,KAAK,SAAS,SAAS,CAAC;AAAA,QACnC;AAAA,MACF;AAEA,YAAM,QAAQ,IAAI,QAAQ;AAE1B,aAAO,MAAM,SAAS;AAAA,IACxB;AAAA,EACF;AAGA,SAAO;AACT;",
   "names": []
 }

package/decorators/withBreakpointObserver.d.ts

@@ -7,7 +7,6 @@ export interface WithBreakpointObserverProps extends BaseProps {
     };
 }
 export interface WithBreakpointObserverInterface extends BaseInterface {
-    $mount(): this;
 }
 /**
  * BreakpointObserver class.

package/decorators/withBreakpointObserver.js

@@ -1,5 +1,6 @@
 import { useResize } from "../services/index.js";
 import { isDev, startsWith } from "../utils/index.js";
+import { features } from "../Base/features.js";
 function testBreakpoints(instance, breakpoint = useResize().props().breakpoint) {
   const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
   const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
@@ -67,8 +68,9 @@ function withBreakpointObserver(BaseClass) {
         return;
       }
       const key = `BreakpointObserver-${this.$id}`;
+      const attributes = features.get("attributes");
       const mutationObserver = new MutationObserver(([mutation]) => {
-        if (mutation.type === "attributes" && (mutation.attributeName === "data-options" || startsWith(mutation.attributeName, "data-option-"))) {
+        if (mutation.type === "attributes" && startsWith(mutation.attributeName, `${attributes.option}-`)) {
           if (!hasBreakpointConfiguration(this)) {
             this.$mount();
             remove(key);
@@ -87,7 +89,7 @@ function withBreakpointObserver(BaseClass) {
      * Override the default $mount method to prevent component's from being
      * mounted when they should not.
      */
-    $mount() {
+    async $mount() {
       if (!hasBreakpointConfiguration(this)) {
         return super.$mount();
       }