@studiometa/js-toolkit 2.0.0-beta.9 → 2.0.0

package/Base/managers/ServicesManager.js

@@ -1,17 +1,17 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import usePointer from '../../services/pointer.js';
-import useRaf from '../../services/raf.js';
-import useResize from '../../services/resize.js';
-import useScroll from '../../services/scroll.js';
-import useKey from '../../services/key.js';
-import useLoad from '../../services/load.js';
-import { hasMethod } from '../utils.js';
-var SERVICES_MAP = {
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import usePointer from "../../services/pointer.js";
+import useRaf from "../../services/raf.js";
+import useResize from "../../services/resize.js";
+import useScroll from "../../services/scroll.js";
+import useKey from "../../services/key.js";
+import useLoad from "../../services/load.js";
+import { hasMethod } from "../utils.js";
+const SERVICES_MAP = {
   scrolled: useScroll,
   resized: useResize,
   ticked: useRaf,
@@ -19,17 +19,11 @@ var SERVICES_MAP = {
   keyed: useKey,
   loaded: useLoad
 };
-var SERVICE_NAMES = Object.keys(SERVICES_MAP);
-export default class ServicesManager {
-  get __services() {
-    return _objectSpread(_objectSpread({}, this.__customServices), SERVICES_MAP);
-  }
-
+const SERVICE_NAMES = Object.keys(SERVICES_MAP);
+class ServicesManager {
   constructor(instance) {
-    _defineProperty(this, "__base", void 0);
-
-    _defineProperty(this, "__customServices", {});
-
+    __publicField(this, "__base");
+    __publicField(this, "__customServices", {});
     Object.defineProperties(this, {
       __base: {
         enumerable: false,
@@ -38,74 +32,58 @@ export default class ServicesManager {
       }
     });
   }
-
+  get __services() {
+    return {
+      ...this.__customServices,
+      ...SERVICES_MAP
+    };
+  }
   has(service) {
     if (!((hasMethod(this.__base, service) || this.__base.__hasEvent(service)) && this.__services[service])) {
       return false;
     }
-
-    var {
-      has
-    } = this.__services[service]();
-
+    const { has } = this.__services[service]();
     return has(this.__base.$id);
   }
-
+  get(service) {
+    return this.__services[service]().props();
+  }
   enable(service) {
     if (this.has(service)) {
       return this.disable.bind(this, service);
     }
-
     if (!(hasMethod(this.__base, service) || this.__base.__hasEvent(service)) || !this.__services[service]) {
-      return function noop() {};
+      return function noop() {
+      };
     }
-
-    var {
-      add
-    } = this.__services[service]();
-
-    var self = this;
-
-    function serviceHandler() {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
+    const { add } = this.__services[service]();
+    const self = this;
+    function serviceHandler(...args) {
       self.__base.__callMethod(service, ...args);
     }
-
     add(this.__base.$id, serviceHandler);
     return this.disable.bind(this, service);
   }
-
   enableAll() {
-    return Object.keys(this.__services).map(serviceName => this.enable(serviceName));
+    return Object.keys(this.__services).map((serviceName) => this.enable(serviceName));
   }
-
   disableAll() {
-    Object.keys(this.__services).forEach(serviceName => {
+    Object.keys(this.__services).forEach((serviceName) => {
       this.disable(serviceName);
     });
   }
-
   disable(service) {
     if (!this.__services[service]) {
       return;
     }
-
-    var {
-      remove
-    } = this.__services[service]();
-
+    const { remove } = this.__services[service]();
     remove(this.__base.$id);
   }
-
   toggle(service, force) {
-    if (typeof force !== 'undefined') {
+    if (typeof force !== "undefined") {
       if (force && !this.has(service)) {
         this.enable(service);
       }
-
       if (!force && this.has(service)) {
         this.disable(service);
       }
@@ -115,21 +93,18 @@ export default class ServicesManager {
       this.enable(service);
     }
   }
-
   register(name, useFunction) {
     this.__customServices[name] = useFunction;
-
     this.__base.__addEmits(name);
   }
-
   unregister(name) {
     if (SERVICE_NAMES.includes(name)) {
-      throw new Error("[ServicesManager] The `".concat(name, "` core service can not be unregistered."));
+      throw new Error(`[ServicesManager] The \`${name}\` core service can not be unregistered.`);
     }
-
     this.__base.__removeEmits(name);
-
     delete this.__customServices[name];
   }
-
-}
+}
+export {
+  ServicesManager as default
+};

package/Base/utils.cjs

@@ -0,0 +1,41 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/Base/utils.js
+var utils_exports = {};
+__export(utils_exports, {
+  getComponentElements: () => getComponentElements,
+  hasMethod: () => hasMethod
+});
+module.exports = __toCommonJS(utils_exports);
+function hasMethod(obj, name) {
+  return typeof obj[name] === "function";
+}
+function getComponentElements(nameOrSelector, element = document) {
+  const selector = `[data-component="${nameOrSelector}"]`;
+  let elements = [];
+  try {
+    elements = Array.from(element.querySelectorAll(selector));
+  } catch {
+  }
+  if (elements.length === 0) {
+    elements = Array.from(element.querySelectorAll(nameOrSelector));
+  }
+  return elements;
+}
+if (module.exports.default) module.exports = module.exports.default;

package/Base/utils.d.ts

@@ -5,18 +5,18 @@
  * Test if an object has a method.
  *
  * @param  {Object}  obj  The object to test
- * @param  {String}  name The method's name
- * @return {Boolean}
+ * @param  {string}  name The method's name
+ * @returns {boolean}
  */
 export function hasMethod(obj: any, name: string): boolean;
 /**
  * Get a list of elements based on the name of a component.
  *
- * @param {String} nameOrSelector
+ * @param {string} nameOrSelector
  *   The name or selector to used for this component.
  * @param {HTMLElement|Document} element
  *   The root element on which to query the selector, defaults to `document`.
- * @return {Array<HTMLElement>}
+ * @returns {Array<HTMLElement>}
  *   A list of elements on which the component should be mounted.
  */
 export function getComponentElements(nameOrSelector: string, element?: HTMLElement | Document): Array<HTMLElement>;

package/Base/utils.js

@@ -1,18 +1,19 @@
-export function hasMethod(obj, name) {
-  return typeof obj[name] === 'function';
+function hasMethod(obj, name) {
+  return typeof obj[name] === "function";
 }
-export function getComponentElements(nameOrSelector) {
-  var element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
-  var selector = "[data-component=\"".concat(nameOrSelector, "\"]");
-  var elements = [];
-
+function getComponentElements(nameOrSelector, element = document) {
+  const selector = `[data-component="${nameOrSelector}"]`;
+  let elements = [];
   try {
     elements = Array.from(element.querySelectorAll(selector));
-  } catch (_unused) {}
-
+  } catch {
+  }
   if (elements.length === 0) {
     elements = Array.from(element.querySelectorAll(nameOrSelector));
   }
-
   return elements;
-}
+}
+export {
+  getComponentElements,
+  hasMethod
+};

package/decorators/index.cjs

@@ -0,0 +1,45 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/decorators/index.js
+var decorators_exports = {};
+__export(decorators_exports, {
+  withBreakpointManager: () => import_withBreakpointManager.default,
+  withBreakpointObserver: () => import_withBreakpointObserver.default,
+  withDrag: () => import_withDrag.default,
+  withExtraConfig: () => import_withExtraConfig.default,
+  withFreezedOptions: () => import_withFreezedOptions.default,
+  withIntersectionObserver: () => import_withIntersectionObserver.default,
+  withMountWhenInView: () => import_withMountWhenInView.default,
+  withScrolledInView: () => import_withScrolledInView.default,
+  withVue2: () => import_withVue2.default
+});
+module.exports = __toCommonJS(decorators_exports);
+var import_withBreakpointManager = __toESM(require("./withBreakpointManager.cjs"), 1);
+var import_withBreakpointObserver = __toESM(require("./withBreakpointObserver.cjs"), 1);
+var import_withDrag = __toESM(require("./withDrag.cjs"), 1);
+var import_withExtraConfig = __toESM(require("./withExtraConfig.cjs"), 1);
+var import_withFreezedOptions = __toESM(require("./withFreezedOptions.cjs"), 1);
+var import_withIntersectionObserver = __toESM(require("./withIntersectionObserver.cjs"), 1);
+var import_withMountWhenInView = __toESM(require("./withMountWhenInView.cjs"), 1);
+var import_withScrolledInView = __toESM(require("./withScrolledInView.cjs"), 1);
+var import_withVue2 = __toESM(require("./withVue2.cjs"), 1);
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/index.d.ts

@@ -2,6 +2,7 @@ export { default as withBreakpointManager } from "./withBreakpointManager.js";
 export { default as withBreakpointObserver } from "./withBreakpointObserver.js";
 export { default as withDrag } from "./withDrag.js";
 export { default as withExtraConfig } from "./withExtraConfig.js";
+export { default as withFreezedOptions } from "./withFreezedOptions.js";
 export { default as withIntersectionObserver } from "./withIntersectionObserver.js";
 export { default as withMountWhenInView } from "./withMountWhenInView.js";
 export { default as withScrolledInView } from "./withScrolledInView.js";

package/decorators/index.js

@@ -1,8 +1,20 @@
-export { default as withBreakpointManager } from './withBreakpointManager.js';
-export { default as withBreakpointObserver } from './withBreakpointObserver.js';
-export { default as withDrag } from './withDrag.js';
-export { default as withExtraConfig } from './withExtraConfig.js';
-export { default as withIntersectionObserver } from './withIntersectionObserver.js';
-export { default as withMountWhenInView } from './withMountWhenInView.js';
-export { default as withScrolledInView } from './withScrolledInView.js';
-export { default as withVue2 } from './withVue2.js';
+import { default as default2 } from "./withBreakpointManager.js";
+import { default as default3 } from "./withBreakpointObserver.js";
+import { default as default4 } from "./withDrag.js";
+import { default as default5 } from "./withExtraConfig.js";
+import { default as default6 } from "./withFreezedOptions.js";
+import { default as default7 } from "./withIntersectionObserver.js";
+import { default as default8 } from "./withMountWhenInView.js";
+import { default as default9 } from "./withScrolledInView.js";
+import { default as default10 } from "./withVue2.js";
+export {
+  default2 as withBreakpointManager,
+  default3 as withBreakpointObserver,
+  default4 as withDrag,
+  default5 as withExtraConfig,
+  default6 as withFreezedOptions,
+  default7 as withIntersectionObserver,
+  default8 as withMountWhenInView,
+  default9 as withScrolledInView,
+  default10 as withVue2
+};

package/decorators/withBreakpointManager.cjs

@@ -0,0 +1,84 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/decorators/withBreakpointManager.js
+var withBreakpointManager_exports = {};
+__export(withBreakpointManager_exports, {
+  default: () => withBreakpointManager
+});
+module.exports = __toCommonJS(withBreakpointManager_exports);
+var import_resize = __toESM(require("../services/resize.cjs"), 1);
+function testBreakpoints(breakpoints) {
+  const { breakpoint } = (0, import_resize.default)().props();
+  breakpoints.forEach(([breakpointKeys, instance]) => {
+    if (breakpointKeys.includes(breakpoint) && !instance.$isMounted) {
+      setTimeout(() => instance.$mount(), 0);
+    } else if (!breakpointKeys.includes(breakpoint) && instance.$isMounted) {
+      instance.$destroy();
+    }
+  });
+}
+function mountComponents(instance, breakpoints) {
+  return breakpoints.map(([bk, ComponentClass]) => {
+    const child = new ComponentClass(instance.$el);
+    Object.defineProperty(child, "$parent", { get: () => instance.$parent });
+    return [bk, child];
+  });
+}
+var instances = /* @__PURE__ */ new WeakMap();
+function withBreakpointManager(BaseClass, breakpoints) {
+  if (!Array.isArray(breakpoints)) {
+    throw new Error("[withBreakpointManager] The `breakpoints` parameter must be an array.");
+  }
+  if (breakpoints.length < 2) {
+    throw new Error("[withBreakpointManager] You must define at least 2 breakpoints.");
+  }
+  const { add, props } = (0, import_resize.default)();
+  if (!props().breakpoint) {
+    throw new Error(`The \`BreakpointManager\` class requires breakpoints to be defined.`);
+  }
+  return class extends BaseClass {
+    constructor(element) {
+      super(element);
+      if (!instances.has(this)) {
+        instances.set(this, mountComponents(this, breakpoints));
+      }
+      add(`BreakpointManager-${this.$id}`, () => {
+        testBreakpoints(instances.get(this));
+      });
+      this.instances = instances.get(this);
+    }
+    $mount() {
+      super.$mount();
+      testBreakpoints(instances.get(this));
+      return this;
+    }
+    $destroy() {
+      if (Array.isArray(instances.get(this))) {
+        instances.get(this).forEach(([, instance]) => {
+          instance.$destroy();
+        });
+      }
+      return super.$destroy();
+    }
+  };
+}
+if (module.exports.default) module.exports = module.exports.default;

package/decorators/withBreakpointManager.d.ts

@@ -2,8 +2,8 @@
  * BreakpointManager class.
  * @template {BaseConstructor} T
  * @param {T} BaseClass
- * @param {Array<[String, BaseConstructor]>} breakpoints
- * @return {T}
+ * @param {Array<[string, BaseConstructor]>} breakpoints
+ * @returns {T}
  */
 export default function withBreakpointManager<T extends typeof import("../Base").default>(BaseClass: T, breakpoints: Array<[string, BaseConstructor]>): T;
 export type Base = import('../Base').default;

package/decorators/withBreakpointManager.js

@@ -1,12 +1,7 @@
-import useResize from '../services/resize.js';
-
+import useResize from "../services/resize.js";
 function testBreakpoints(breakpoints) {
-  var {
-    breakpoint
-  } = useResize().props();
-  breakpoints.forEach(_ref => {
-    var [breakpointKeys, instance] = _ref;
-
+  const { breakpoint } = useResize().props();
+  breakpoints.forEach(([breakpointKeys, instance]) => {
     if (breakpointKeys.includes(breakpoint) && !instance.$isMounted) {
       setTimeout(() => instance.$mount(), 0);
     } else if (!breakpointKeys.includes(breakpoint) && instance.$isMounted) {
@@ -14,68 +9,51 @@ function testBreakpoints(breakpoints) {
     }
   });
 }
-
 function mountComponents(instance, breakpoints) {
-  return breakpoints.map(_ref2 => {
-    var [bk, ComponentClass] = _ref2;
-    var child = new ComponentClass(instance.$el);
-    Object.defineProperty(child, '$parent', {
-      get: () => instance.$parent
-    });
+  return breakpoints.map(([bk, ComponentClass]) => {
+    const child = new ComponentClass(instance.$el);
+    Object.defineProperty(child, "$parent", { get: () => instance.$parent });
     return [bk, child];
   });
 }
-
-var instances = new WeakMap();
-export default function withBreakpointManager(BaseClass, breakpoints) {
+const instances = /* @__PURE__ */ new WeakMap();
+function withBreakpointManager(BaseClass, breakpoints) {
   if (!Array.isArray(breakpoints)) {
-    throw new Error('[withBreakpointManager] The `breakpoints` parameter must be an array.');
+    throw new Error("[withBreakpointManager] The `breakpoints` parameter must be an array.");
   }
-
   if (breakpoints.length < 2) {
-    throw new Error('[withBreakpointManager] You must define at least 2 breakpoints.');
+    throw new Error("[withBreakpointManager] You must define at least 2 breakpoints.");
   }
-
-  var {
-    add,
-    props
-  } = useResize();
-
+  const { add, props } = useResize();
   if (!props().breakpoint) {
-    throw new Error("The `BreakpointManager` class requires breakpoints to be defined.");
+    throw new Error(`The \`BreakpointManager\` class requires breakpoints to be defined.`);
   }
-
   return class extends BaseClass {
     constructor(element) {
       super(element);
-
       if (!instances.has(this)) {
         instances.set(this, mountComponents(this, breakpoints));
       }
-
-      add("BreakpointManager-".concat(this.$id), () => {
+      add(`BreakpointManager-${this.$id}`, () => {
         testBreakpoints(instances.get(this));
       });
       this.instances = instances.get(this);
-      return this;
     }
-
     $mount() {
       super.$mount();
       testBreakpoints(instances.get(this));
       return this;
     }
-
     $destroy() {
       if (Array.isArray(instances.get(this))) {
-        instances.get(this).forEach(_ref3 => {
-          var [, instance] = _ref3;
+        instances.get(this).forEach(([, instance]) => {
           instance.$destroy();
         });
       }
-
       return super.$destroy();
     }
-
   };
-}
+}
+export {
+  withBreakpointManager as default
+};

package/decorators/withBreakpointObserver.cjs

@@ -0,0 +1,114 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/js-toolkit/decorators/withBreakpointObserver.js
+var withBreakpointObserver_exports = {};
+__export(withBreakpointObserver_exports, {
+  default: () => withBreakpointObserver
+});
+module.exports = __toCommonJS(withBreakpointObserver_exports);
+var import_resize = __toESM(require("../services/resize.cjs"), 1);
+function testBreakpoints(instance, breakpoint = (0, import_resize.default)().props().breakpoint) {
+  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
+  const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
+  const isInInactiveBreakpoint = inactiveBreakpoints && inactiveBreakpoints.split(" ").includes(breakpoint);
+  if (activeBreakpoints && isInActiveBreakpoint || inactiveBreakpoints && !isInInactiveBreakpoint) {
+    return "$mount";
+  }
+  return "$destroy";
+}
+function hasBreakpointConfiguration(instance) {
+  const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
+  return Boolean(activeBreakpoints || inactiveBreakpoints);
+}
+function testConflictingBreakpointConfiguration(instance) {
+  const { activeBreakpoints, inactiveBreakpoints, name } = instance.$options;
+  if (activeBreakpoints && inactiveBreakpoints) {
+    throw new Error(`[${name}] Incorrect configuration: the \`activeBreakpoints\` and \`inactiveBreakpoints\` are not compatible.`);
+  }
+}
+function addToResize(key, instance) {
+  testConflictingBreakpointConfiguration(instance);
+  const { add, has } = (0, import_resize.default)();
+  if (!has(key)) {
+    add(key, function onResize({ breakpoint }) {
+      const action = testBreakpoints(instance, breakpoint);
+      if (action === "$destroy" && instance.$isMounted) {
+        instance[action]();
+      } else if (action === "$mount" && !instance.$isMounted) {
+        setTimeout(() => instance[action](), 0);
+      }
+    });
+  }
+}
+function withBreakpointObserver(BaseClass) {
+  var _a, _b;
+  return _b = class extends BaseClass {
+    constructor(element) {
+      super(element);
+      const { remove, props } = (0, import_resize.default)();
+      const { name } = this.$options;
+      if (!props().breakpoint) {
+        throw new Error(`[${name}] The \`BreakpointObserver\` class requires breakpoints to be defined.`);
+      }
+      const key = `BreakpointObserver-${this.$id}`;
+      const mutationObserver = new MutationObserver(([mutation]) => {
+        if (mutation.type === "attributes" && (mutation.attributeName === "data-options" || mutation.attributeName.startsWith("data-option-"))) {
+          if (!hasBreakpointConfiguration(this)) {
+            this.$mount();
+            remove(key);
+            return;
+          }
+          addToResize(key, this);
+        }
+      });
+      mutationObserver.observe(this.$el, { attributes: true });
+      if (!hasBreakpointConfiguration(this)) {
+        return;
+      }
+      addToResize(key, this);
+    }
+    $mount() {
+      if (!hasBreakpointConfiguration(this)) {
+        return super.$mount();
+      }
+      const action = testBreakpoints(this);
+      if (action === "$mount") {
+        return super.$mount();
+      }
+      return this;
+    }
+  }, __publicField(_b, "config", {
+    ...BaseClass.config,
+    name: `${BaseClass.config.name}WithBreakpointObserver`,
+    options: {
+      ...((_a = BaseClass.config) == null ? void 0 : _a.options) || {},
+      activeBreakpoints: String,
+      inactiveBreakpoints: String
+    }
+  }), _b;
+}
+if (module.exports.default) module.exports = module.exports.default;