@studiometa/js-toolkit 2.2.3 → 2.3.0

package/Base/managers/RefsManager.cjs

@@ -27,12 +27,13 @@ __export(RefsManager_exports, {
 });
 module.exports = __toCommonJS(RefsManager_exports);
 var import_AbstractManager = __toESM(require("./AbstractManager.cjs"), 1);
+var import_utils = require("../../utils/index.cjs");
 function normalizeRefName(name) {
   return name.endsWith("[]") ? name.replace(/\[\]$/, "") : name;
 }
 function __filterRefsBelongingToInstance(that, ref) {
   let ancestor = ref.parentElement;
-  while (ancestor && ancestor.dataset.component === void 0) {
+  while (ancestor && !(0, import_utils.isDefined)(ancestor.dataset.component)) {
     ancestor = ancestor.parentElement;
   }
   return ancestor === null || ancestor === that.__element;
@@ -41,11 +42,13 @@ function __register(that, refName) {
   const isMultiple = refName.endsWith("[]");
   const propName = normalizeRefName(refName);
   const refs = Array.from(that.__element.querySelectorAll(`[data-ref="${refName}"]`)).filter((ref) => __filterRefsBelongingToInstance(that, ref));
-  if (!isMultiple && refs.length > 1) {
+  if (import_utils.isDev && !isMultiple && refs.length > 1) {
     console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref has been found multiple times.`, "Did you forgot to add the `[]` suffix to its name?");
   }
-  if (!isMultiple && refs.length <= 1 && refs[0] === void 0) {
-    console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref is missing.`, `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`);
+  if (!isMultiple && refs.length <= 1 && !(0, import_utils.isDefined)(refs[0])) {
+    if (import_utils.isDev) {
+      console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref is missing.`, `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`);
+    }
     return;
   }
   that.__eventsManager.bindRef(refName, refs);
@@ -57,13 +60,12 @@ function __register(that, refName) {
 }
 function __unregister(that, refName) {
   const propName = normalizeRefName(refName);
-  const refs = Array.isArray(that[propName]) ? that[propName] : [that[propName]];
+  const refs = (0, import_utils.isArray)(that[propName]) ? that[propName] : [that[propName]];
   that.__eventsManager.unbindRef(refName, refs);
 }
 var RefsManager = class extends import_AbstractManager.default {
   get __refs() {
-    var _a;
-    return (_a = this.__config.refs) != null ? _a : [];
+    return this.__config.refs ?? [];
   }
   registerAll() {
     this.__refs.forEach((refName) => __register(this, refName));

package/Base/managers/RefsManager.js

@@ -1,10 +1,11 @@
 import AbstractManager from "./AbstractManager.js";
+import { isDev, isArray, isDefined } from "../../utils/index.js";
 function normalizeRefName(name) {
   return name.endsWith("[]") ? name.replace(/\[\]$/, "") : name;
 }
 function __filterRefsBelongingToInstance(that, ref) {
   let ancestor = ref.parentElement;
-  while (ancestor && ancestor.dataset.component === void 0) {
+  while (ancestor && !isDefined(ancestor.dataset.component)) {
     ancestor = ancestor.parentElement;
   }
   return ancestor === null || ancestor === that.__element;
@@ -13,11 +14,13 @@ function __register(that, refName) {
   const isMultiple = refName.endsWith("[]");
   const propName = normalizeRefName(refName);
   const refs = Array.from(that.__element.querySelectorAll(`[data-ref="${refName}"]`)).filter((ref) => __filterRefsBelongingToInstance(that, ref));
-  if (!isMultiple && refs.length > 1) {
+  if (isDev && !isMultiple && refs.length > 1) {
     console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref has been found multiple times.`, "Did you forgot to add the `[]` suffix to its name?");
   }
-  if (!isMultiple && refs.length <= 1 && refs[0] === void 0) {
-    console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref is missing.`, `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`);
+  if (!isMultiple && refs.length <= 1 && !isDefined(refs[0])) {
+    if (isDev) {
+      console.warn(`[${that.__base.$options.name}]`, `The "${refName}" ref is missing.`, `Is there an \`[data-ref="${refName}"]\` element in the component's scope?`);
+    }
     return;
   }
   that.__eventsManager.bindRef(refName, refs);
@@ -29,13 +32,12 @@ function __register(that, refName) {
 }
 function __unregister(that, refName) {
   const propName = normalizeRefName(refName);
-  const refs = Array.isArray(that[propName]) ? that[propName] : [that[propName]];
+  const refs = isArray(that[propName]) ? that[propName] : [that[propName]];
   that.__eventsManager.unbindRef(refName, refs);
 }
 class RefsManager extends AbstractManager {
   get __refs() {
-    var _a;
-    return (_a = this.__config.refs) != null ? _a : [];
+    return this.__config.refs ?? [];
   }
   registerAll() {
     this.__refs.forEach((refName) => __register(this, refName));

package/Base/managers/ResponsiveOptionsManager.cjs

@@ -27,6 +27,7 @@ __export(ResponsiveOptionsManager_exports, {
 module.exports = __toCommonJS(ResponsiveOptionsManager_exports);
 var import_OptionsManager = __toESM(require("./OptionsManager.cjs"), 1);
 var import_services = require("../../services/index.cjs");
+var import_utils = require("../../utils/index.cjs");
 function __getResponsiveName(that, name) {
   const { breakpoint } = (0, import_services.useResize)().props();
   if (!breakpoint) {
@@ -56,7 +57,9 @@ var ResponsiveOptionsManager = class extends import_OptionsManager.default {
       super.set(name, value, config);
       return;
     }
-    console.warn(`[${this.__config.name}]`, "Responsive options are read-only.");
+    if (import_utils.isDev) {
+      console.warn(`[${this.__config.name}]`, "Responsive options are read-only.");
+    }
   }
 };
 if (module.exports.default) module.exports = module.exports.default;

package/Base/managers/ResponsiveOptionsManager.js

@@ -1,5 +1,6 @@
 import OptionsManager, { __getPropertyName } from "./OptionsManager.js";
 import { useResize } from "../../services/index.js";
+import { isDev } from "../../utils/index.js";
 function __getResponsiveName(that, name) {
   const { breakpoint } = useResize().props();
   if (!breakpoint) {
@@ -29,7 +30,9 @@ class ResponsiveOptionsManager extends OptionsManager {
       super.set(name, value, config);
       return;
     }
-    console.warn(`[${this.__config.name}]`, "Responsive options are read-only.");
+    if (isDev) {
+      console.warn(`[${this.__config.name}]`, "Responsive options are read-only.");
+    }
   }
 }
 export {

package/Base/managers/ServicesManager.cjs

@@ -4,7 +4,6 @@ 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 });
@@ -19,10 +18,6 @@ var __copyProps = (to, from, except, desc) => {
 };
 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/Base/managers/ServicesManager.js
 var ServicesManager_exports = {};
@@ -48,10 +43,7 @@ var SERVICES_MAP = {
 };
 var SERVICE_NAMES = Object.keys(SERVICES_MAP);
 var ServicesManager = class extends import_AbstractManager.default {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "__customServices", {});
-  }
+  __customServices = {};
   get __services() {
     return {
       ...this.__customServices,
@@ -99,7 +91,7 @@ var ServicesManager = class extends import_AbstractManager.default {
     remove(this.__base.$id);
   }
   toggle(service, force) {
-    if (typeof force !== "undefined") {
+    if ((0, import_utils.isDefined)(force)) {
       if (force && !this.has(service)) {
         this.enable(service);
       }
@@ -118,7 +110,10 @@ var ServicesManager = class extends import_AbstractManager.default {
   }
   unregister(name) {
     if (SERVICE_NAMES.includes(name)) {
-      throw new Error(`[ServicesManager] The \`${name}\` core service can not be unregistered.`);
+      if (import_utils.isDev) {
+        throw new Error(`[ServicesManager] The \`${name}\` core service can not be unregistered.`);
+      }
+      return;
     }
     this.__base.__removeEmits(name);
     delete this.__customServices[name];

package/Base/managers/ServicesManager.js

@@ -1,9 +1,3 @@
-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";
@@ -11,7 +5,7 @@ import useScroll from "../../services/scroll.js";
 import useKey from "../../services/key.js";
 import useLoad from "../../services/load.js";
 import AbstractManager from "./AbstractManager.js";
-import { noop, isFunction } from "../../utils/index.js";
+import { noop, isFunction, isDefined, isDev } from "../../utils/index.js";
 const SERVICES_MAP = {
   scrolled: useScroll,
   resized: useResize,
@@ -22,10 +16,7 @@ const SERVICES_MAP = {
 };
 const SERVICE_NAMES = Object.keys(SERVICES_MAP);
 class ServicesManager extends AbstractManager {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "__customServices", {});
-  }
+  __customServices = {};
   get __services() {
     return {
       ...this.__customServices,
@@ -73,7 +64,7 @@ class ServicesManager extends AbstractManager {
     remove(this.__base.$id);
   }
   toggle(service, force) {
-    if (typeof force !== "undefined") {
+    if (isDefined(force)) {
       if (force && !this.has(service)) {
         this.enable(service);
       }
@@ -92,7 +83,10 @@ class ServicesManager extends AbstractManager {
   }
   unregister(name) {
     if (SERVICE_NAMES.includes(name)) {
-      throw new Error(`[ServicesManager] The \`${name}\` core service can not be unregistered.`);
+      if (isDev) {
+        throw new Error(`[ServicesManager] The \`${name}\` core service can not be unregistered.`);
+      }
+      return;
     }
     this.__base.__removeEmits(name);
     delete this.__customServices[name];

package/Base/utils.cjs

@@ -19,9 +19,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/js-toolkit/Base/utils.js
 var utils_exports = {};
 __export(utils_exports, {
-  getComponentElements: () => getComponentElements
+  eventIsDefinedInConfig: () => eventIsDefinedInConfig,
+  eventIsNative: () => eventIsNative,
+  getComponentElements: () => getComponentElements,
+  getEventTarget: () => getEventTarget
 });
 module.exports = __toCommonJS(utils_exports);
+var import_utils = require("../utils/index.cjs");
 function getComponentElements(nameOrSelector, element = document) {
   const selector = `[data-component="${nameOrSelector}"]`;
   let elements = [];
@@ -34,4 +38,22 @@ function getComponentElements(nameOrSelector, element = document) {
   }
   return elements;
 }
+function eventIsDefinedInConfig(event, config) {
+  return (0, import_utils.isArray)(config.emits) && config.emits.includes(event);
+}
+function eventIsNative(event, element) {
+  return (0, import_utils.isDefined)(element[`on${event}`]);
+}
+function getEventTarget(instance, event, config) {
+  if (eventIsDefinedInConfig(event, config)) {
+    return instance;
+  }
+  if (eventIsNative(event, instance.$el)) {
+    return instance.$el;
+  }
+  if (import_utils.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}\`.`);
+  }
+  return instance;
+}
 if (module.exports.default) module.exports = module.exports.default;

package/Base/utils.d.ts

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

package/Base/utils.js

@@ -1,3 +1,4 @@
+import { isArray, isDefined, isDev } from "../utils/index.js";
 function getComponentElements(nameOrSelector, element = document) {
   const selector = `[data-component="${nameOrSelector}"]`;
   let elements = [];
@@ -10,6 +11,27 @@ function getComponentElements(nameOrSelector, element = document) {
   }
   return elements;
 }
+function eventIsDefinedInConfig(event, config) {
+  return isArray(config.emits) && config.emits.includes(event);
+}
+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)) {
+    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}\`.`);
+  }
+  return instance;
+}
 export {
-  getComponentElements
+  eventIsDefinedInConfig,
+  eventIsNative,
+  getComponentElements,
+  getEventTarget
 };

package/decorators/withBreakpointManager.cjs

@@ -26,6 +26,7 @@ __export(withBreakpointManager_exports, {
 });
 module.exports = __toCommonJS(withBreakpointManager_exports);
 var import_resize = __toESM(require("../services/resize.cjs"), 1);
+var import_utils = require("../utils/index.cjs");
 function testBreakpoints(breakpoints) {
   const { breakpoint } = (0, import_resize.default)().props();
   breakpoints.forEach(([breakpointKeys, instance]) => {
@@ -45,15 +46,24 @@ function mountComponents(instance, breakpoints) {
 }
 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 (!(0, import_utils.isArray)(breakpoints)) {
+    if (import_utils.isDev) {
+      throw new Error("[withBreakpointManager] The `breakpoints` parameter must be an array.");
+    }
+    return BaseClass;
   }
   if (breakpoints.length < 2) {
-    throw new Error("[withBreakpointManager] You must define at least 2 breakpoints.");
+    if (import_utils.isDev) {
+      throw new Error("[withBreakpointManager] You must define at least 2 breakpoints.");
+    }
+    return BaseClass;
   }
   const { add, props } = (0, import_resize.default)();
   if (!props().breakpoint) {
-    throw new Error(`The \`BreakpointManager\` class requires breakpoints to be defined.`);
+    if (import_utils.isDev) {
+      throw new Error(`The \`BreakpointManager\` class requires breakpoints to be defined.`);
+    }
+    return BaseClass;
   }
   return class extends BaseClass {
     constructor(element) {
@@ -72,7 +82,7 @@ function withBreakpointManager(BaseClass, breakpoints) {
       return this;
     }
     $destroy() {
-      if (Array.isArray(instances.get(this))) {
+      if ((0, import_utils.isArray)(instances.get(this))) {
         instances.get(this).forEach(([, instance]) => {
           instance.$destroy();
         });

package/decorators/withBreakpointManager.js

@@ -1,4 +1,5 @@
 import useResize from "../services/resize.js";
+import { isDev, isArray } from "../utils/index.js";
 function testBreakpoints(breakpoints) {
   const { breakpoint } = useResize().props();
   breakpoints.forEach(([breakpointKeys, instance]) => {
@@ -18,15 +19,24 @@ function mountComponents(instance, 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.");
+  if (!isArray(breakpoints)) {
+    if (isDev) {
+      throw new Error("[withBreakpointManager] The `breakpoints` parameter must be an array.");
+    }
+    return BaseClass;
   }
   if (breakpoints.length < 2) {
-    throw new Error("[withBreakpointManager] You must define at least 2 breakpoints.");
+    if (isDev) {
+      throw new Error("[withBreakpointManager] You must define at least 2 breakpoints.");
+    }
+    return BaseClass;
   }
   const { add, props } = useResize();
   if (!props().breakpoint) {
-    throw new Error(`The \`BreakpointManager\` class requires breakpoints to be defined.`);
+    if (isDev) {
+      throw new Error(`The \`BreakpointManager\` class requires breakpoints to be defined.`);
+    }
+    return BaseClass;
   }
   return class extends BaseClass {
     constructor(element) {
@@ -45,7 +55,7 @@ function withBreakpointManager(BaseClass, breakpoints) {
       return this;
     }
     $destroy() {
-      if (Array.isArray(instances.get(this))) {
+      if (isArray(instances.get(this))) {
         instances.get(this).forEach(([, instance]) => {
           instance.$destroy();
         });

package/decorators/withBreakpointObserver.cjs

@@ -4,7 +4,6 @@ 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 });
@@ -19,10 +18,6 @@ var __copyProps = (to, from, except, desc) => {
 };
 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 = {};
@@ -31,6 +26,7 @@ __export(withBreakpointObserver_exports, {
 });
 module.exports = __toCommonJS(withBreakpointObserver_exports);
 var import_resize = __toESM(require("../services/resize.cjs"), 1);
+var import_utils = require("../utils/index.cjs");
 function testBreakpoints(instance, breakpoint = (0, import_resize.default)().props().breakpoint) {
   const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
   const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
@@ -51,7 +47,9 @@ function testConflictingBreakpointConfiguration(instance) {
   }
 }
 function addToResize(key, instance) {
-  testConflictingBreakpointConfiguration(instance);
+  if (import_utils.isDev) {
+    testConflictingBreakpointConfiguration(instance);
+  }
   const { add, has } = (0, import_resize.default)();
   if (!has(key)) {
     add(key, function onResize({ breakpoint }) {
@@ -65,14 +63,25 @@ function addToResize(key, instance) {
   }
 }
 function withBreakpointObserver(BaseClass) {
-  var _a, _b;
-  return _b = class extends BaseClass {
+  return class extends BaseClass {
+    static config = {
+      ...BaseClass.config,
+      name: `${BaseClass.config.name}WithBreakpointObserver`,
+      options: {
+        ...BaseClass.config?.options || {},
+        activeBreakpoints: String,
+        inactiveBreakpoints: String
+      }
+    };
     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.`);
+        if (import_utils.isDev) {
+          throw new Error(`[${name}] The \`BreakpointObserver\` class requires breakpoints to be defined.`);
+        }
+        return;
       }
       const key = `BreakpointObserver-${this.$id}`;
       const mutationObserver = new MutationObserver(([mutation]) => {
@@ -101,14 +110,6 @@ function withBreakpointObserver(BaseClass) {
       }
       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;

package/decorators/withBreakpointObserver.js

@@ -1,10 +1,5 @@
-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 useResize from "../services/resize.js";
+import { isDev } from "../utils/index.js";
 function testBreakpoints(instance, breakpoint = useResize().props().breakpoint) {
   const { activeBreakpoints, inactiveBreakpoints } = instance.$options;
   const isInActiveBreakpoint = activeBreakpoints && activeBreakpoints.split(" ").includes(breakpoint);
@@ -25,7 +20,9 @@ function testConflictingBreakpointConfiguration(instance) {
   }
 }
 function addToResize(key, instance) {
-  testConflictingBreakpointConfiguration(instance);
+  if (isDev) {
+    testConflictingBreakpointConfiguration(instance);
+  }
   const { add, has } = useResize();
   if (!has(key)) {
     add(key, function onResize({ breakpoint }) {
@@ -39,14 +36,25 @@ function addToResize(key, instance) {
   }
 }
 function withBreakpointObserver(BaseClass) {
-  var _a, _b;
-  return _b = class extends BaseClass {
+  return class extends BaseClass {
+    static config = {
+      ...BaseClass.config,
+      name: `${BaseClass.config.name}WithBreakpointObserver`,
+      options: {
+        ...BaseClass.config?.options || {},
+        activeBreakpoints: String,
+        inactiveBreakpoints: String
+      }
+    };
     constructor(element) {
       super(element);
       const { remove, props } = useResize();
       const { name } = this.$options;
       if (!props().breakpoint) {
-        throw new Error(`[${name}] The \`BreakpointObserver\` class requires breakpoints to be defined.`);
+        if (isDev) {
+          throw new Error(`[${name}] The \`BreakpointObserver\` class requires breakpoints to be defined.`);
+        }
+        return;
       }
       const key = `BreakpointObserver-${this.$id}`;
       const mutationObserver = new MutationObserver(([mutation]) => {
@@ -75,15 +83,7 @@ function withBreakpointObserver(BaseClass) {
       }
       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;
+  };
 }
 export {
   withBreakpointObserver as default

package/decorators/withDrag.cjs

@@ -4,7 +4,6 @@ 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 });
@@ -19,10 +18,6 @@ var __copyProps = (to, from, except, desc) => {
 };
 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/withDrag.js
 var withDrag_exports = {};
@@ -32,8 +27,11 @@ __export(withDrag_exports, {
 module.exports = __toCommonJS(withDrag_exports);
 var import_drag = __toESM(require("../services/drag.cjs"), 1);
 function withDrag(BaseClass, { target = (instance) => instance.$el, ...options } = {}) {
-  var _a;
-  return _a = class extends BaseClass {
+  return class extends BaseClass {
+    static config = {
+      name: `${BaseClass.config.name}WithDrag`,
+      emits: ["dragged"]
+    };
     constructor(el) {
       super(el);
       this.$on("mounted", () => {
@@ -45,9 +43,6 @@ function withDrag(BaseClass, { target = (instance) => instance.$el, ...options }
         this.$services.unregister("dragged");
       });
     }
-  }, __publicField(_a, "config", {
-    name: `${BaseClass.config.name}WithDrag`,
-    emits: ["dragged"]
-  }), _a;
+  };
 }
 if (module.exports.default) module.exports = module.exports.default;

package/decorators/withDrag.js

@@ -1,13 +1,10 @@
-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 useDrag from "../services/drag.js";
 function withDrag(BaseClass, { target = (instance) => instance.$el, ...options } = {}) {
-  var _a;
-  return _a = class extends BaseClass {
+  return class extends BaseClass {
+    static config = {
+      name: `${BaseClass.config.name}WithDrag`,
+      emits: ["dragged"]
+    };
     constructor(el) {
       super(el);
       this.$on("mounted", () => {
@@ -19,10 +16,7 @@ function withDrag(BaseClass, { target = (instance) => instance.$el, ...options }
         this.$services.unregister("dragged");
       });
     }
-  }, __publicField(_a, "config", {
-    name: `${BaseClass.config.name}WithDrag`,
-    emits: ["dragged"]
-  }), _a;
+  };
 }
 export {
   withDrag as default