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

package/Base/index.d.ts

@@ -14,13 +14,14 @@
  * @property {Boolean} [debug]
  * @property {Boolean} [log]
  * @property {String[]} [refs]
+ * @property {String[]} [emits]
  * @property {BaseConfigComponents} [components]
  * @property {BaseConfigOptions} [options]
  */
 /**
  * Base class.
  */
-export default class Base {
+export default class Base extends EventTarget {
     /**
      * This is a Base instance.
      * @type {Boolean}
@@ -174,6 +175,30 @@ export default class Base {
      * @return {void}
      */
     $terminate(): void;
+    /**
+     * Test if the given event is configured and warn otherwise.
+     *
+     * @private
+     * @param   {string} event The event name.
+     * @returns {void}
+     */
+    private __testEventIsDefined;
+    /**
+     * Add an emitted event.
+     *
+     * @private
+     * @param   {string} event The event name.
+     * @returns {void}
+     */
+    private __addEmits;
+    /**
+     * Remove an emitted event.
+     *
+     * @private
+     * @param   {string} event The event name.
+     * @returns {void}
+     */
+    private __removeEmits;
     /**
      * Bind a listener function to an event.
      *
@@ -233,6 +258,7 @@ export type BaseConfig = {
     debug?: boolean;
     log?: boolean;
     refs?: string[];
+    emits?: string[];
     components?: BaseConfigComponents;
     options?: BaseConfigOptions;
 };

package/Base/index.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 { getComponentElements } from './utils.js';
 import ChildrenManager from './managers/ChildrenManager.js';
@@ -11,10 +11,11 @@ import ServicesManager from './managers/ServicesManager.js';
 import EventsManager from './managers/EventsManager.js';
 import OptionsManager from './managers/OptionsManager.js';
 var id = 0;
+var isDev = typeof __DEV__ !== 'undefined' && __DEV__;
 
 function noop() {}
 
-export default class Base {
+export default class Base extends EventTarget {
   get $root() {
     if (!this.$parent) {
       return this;
@@ -47,6 +48,10 @@ export default class Base {
         config.options = _objectSpread(_objectSpread({}, proto.constructor.config.options), config.options);
       }
 
+      if (proto.constructor.config.emits && config.emits) {
+        config.emits = [...proto.constructor.config.emits, ...config.emits];
+      }
+
       proto = Object.getPrototypeOf(proto);
     }
 
@@ -54,27 +59,19 @@ export default class Base {
   }
 
   get $services() {
-    var services = this.__services;
-    this.$emit('get:services', services);
-    return services;
+    return this.__services;
   }
 
   get $refs() {
-    var refs = this.__refs;
-    this.$emit('get:refs', refs);
-    return refs;
+    return this.__refs;
   }
 
   get $options() {
-    var options = this.__options;
-    this.$emit('get:options', options);
-    return options;
+    return this.__options;
   }
 
   get $children() {
-    var children = this.__children;
-    this.$emit('get:children', children);
-    return children;
+    return this.__children;
   }
 
   get $log() {
@@ -82,7 +79,7 @@ export default class Base {
   }
 
   get __debug() {
-    return this.__options.debug && typeof window.__DEV__ !== 'undefined' && window.__DEV__ ? window.console.log.bind(window, "[debug] [".concat(this.$id, "]")) : noop;
+    return isDev && this.__options.debug ? window.console.log.bind(window, "[debug] [".concat(this.$id, "]")) : noop;
   }
 
   __callMethod(method) {
@@ -90,12 +87,8 @@ export default class Base {
       args[_key - 1] = arguments[_key];
     }
 
-    this.__debug('callMethod', method, ...args);
-
-    if (method === 'destroyed' && !this.$isMounted || method === 'mounted' && this.$isMounted) {
-      this.__debug('not', method, 'because the method has already been triggered once.');
-
-      return;
+    if (isDev) {
+      this.__debug('callMethod', method, ...args);
     }
 
     this.$emit(method, ...args);
@@ -106,7 +99,9 @@ export default class Base {
 
     this[method].call(this, ...args);
 
-    this.__debug(method, this, ...args);
+    if (isDev) {
+      this.__debug(method, this, ...args);
+    }
   }
 
   __hasEvent(event) {
@@ -116,6 +111,8 @@ export default class Base {
   }
 
   constructor(element) {
+    super();
+
     _defineProperty(this, "$parent", null);
 
     _defineProperty(this, "$id", void 0);
@@ -144,11 +141,7 @@ export default class Base {
       __config
     } = this;
 
-    if (!__config) {
-      throw new Error('The `config` static property must be defined.');
-    }
-
-    if (!__config.name) {
+    if (__config.name === 'Base') {
       throw new Error('The `config.name` property is required.');
     }
 
@@ -169,13 +162,23 @@ export default class Base {
     this.__children = new ChildrenManager(this, element, __config.components || {}, this.__events);
     this.__refs = new RefsManager(this, element, __config.refs || [], this.__events);
 
-    this.__debug('constructor', this);
+    if (isDev) {
+      this.__debug('constructor', this);
+    }
 
     return this;
   }
 
   $mount() {
-    this.__debug('$mount');
+    if (this.$isMounted) {
+      return this;
+    }
+
+    this.$isMounted = true;
+
+    if (isDev) {
+      this.__debug('$mount');
+    }
 
     this.$children.registerAll();
     this.$refs.registerAll();
@@ -187,12 +190,13 @@ export default class Base {
 
     this.__callMethod('mounted');
 
-    this.$isMounted = true;
     return this;
   }
 
   $update() {
-    this.__debug('$update');
+    if (isDev) {
+      this.__debug('$update');
+    }
 
     this.$refs.unregisterAll();
     this.$services.disableAll();
@@ -207,7 +211,15 @@ export default class Base {
   }
 
   $destroy() {
-    this.__debug('$destroy');
+    if (!this.$isMounted) {
+      return this;
+    }
+
+    this.$isMounted = false;
+
+    if (isDev) {
+      this.__debug('$destroy');
+    }
 
     this.__events.unbindRootElement();
 
@@ -217,12 +229,13 @@ export default class Base {
 
     this.__callMethod('destroyed');
 
-    this.$isMounted = false;
     return this;
   }
 
   $terminate() {
-    this.__debug('$terminate');
+    if (isDev) {
+      this.__debug('$terminate');
+    }
 
     this.$destroy();
 
@@ -235,8 +248,36 @@ export default class Base {
     });
   }
 
+  __testEventIsDefined(event) {
+    if (!(Array.isArray(this.__config.emits) && this.__config.emits.includes(event))) {
+      console.warn("[".concat(this.__config.name, "]"), "The \"".concat(event, "\" event is missing from the configuration."));
+    }
+  }
+
+  __addEmits(event) {
+    var ctor = this.constructor;
+
+    if (Array.isArray(ctor.config.emits)) {
+      ctor.config.emits.push(event);
+    } else {
+      ctor.config.emits = [event];
+    }
+  }
+
+  __removeEmits(event) {
+    var ctor = this.constructor;
+    var index = ctor.config.emits.findIndex(value => value === event);
+    ctor.config.emits.splice(index, 1);
+  }
+
   $on(event, listener, options) {
-    this.__debug('$on', event, listener, options);
+    if (isDev) {
+      this.__debug('$on', event, listener, options);
+    }
+
+    if (isDev) {
+      this.__testEventIsDefined(event);
+    }
 
     var set = this.__eventHandlers.get(event);
 
@@ -247,18 +288,24 @@ export default class Base {
     }
 
     set.add(listener);
-    this.$el.addEventListener(event, listener, options);
+    this.addEventListener(event, listener, options);
     return () => {
       this.$off(event, listener, options);
     };
   }
 
   $off(event, listener, options) {
-    this.__debug('$off', event, listener);
+    if (isDev) {
+      this.__debug('$off', event, listener);
+    }
+
+    if (isDev) {
+      this.__testEventIsDefined(event);
+    }
 
     this.__eventHandlers.get(event).delete(listener);
 
-    this.$el.removeEventListener(event, listener, options);
+    this.removeEventListener(event, listener, options);
   }
 
   $emit(event) {
@@ -266,9 +313,15 @@ export default class Base {
       args[_key2 - 1] = arguments[_key2];
     }
 
-    this.__debug('$emit', event, args);
+    if (isDev) {
+      this.__debug('$emit', event, args);
+    }
+
+    if (isDev) {
+      this.__testEventIsDefined(event);
+    }
 
-    this.$el.dispatchEvent(new CustomEvent(event, {
+    this.dispatchEvent(new CustomEvent(event, {
       detail: args
     }));
   }
@@ -285,4 +338,7 @@ export default class Base {
 
 _defineProperty(Base, "$isBase", true);
 
-_defineProperty(Base, "config", void 0);
+_defineProperty(Base, "config", {
+  name: 'Base',
+  emits: ['mounted', 'updated', 'destroyed', 'terminated', 'ticked', 'scrolled', 'resized', 'moved', 'loaded', 'keyed']
+});

package/Base/managers/EventsManager.d.ts

@@ -4,6 +4,8 @@
  */
 /**
  * Event management class.
+ * @todo Prevent binding of `onChildOrRefEvent` to the root element
+ * @todo Use event delegation?
  */
 export default class EventsManager {
     /**
@@ -150,7 +152,7 @@ export default class EventsManager {
      * Manage event methods on the root element.
      *
      * @param {'add'|'remove'} [mode]
-     *   The action to perform: add or remove the event listeners.
+     *   The action to perform: add or remove the event listeners, defaults to 'add'.
      *
      * @return {void}
      * @private

package/Base/managers/EventsManager.js

@@ -37,7 +37,7 @@ export default class EventsManager {
 
     _defineProperty(this, "__childrenHandler", {
       handleEvent: event => {
-        var child = event.currentTarget.__base__;
+        var child = event.currentTarget;
         var childName;
         var index = 0;
         var childrenManager = this.__base.$children;
@@ -141,10 +141,14 @@ export default class EventsManager {
 
     var methods = this.__getEventMethodsByName();
 
+    var {
+      emits = []
+    } = this.__base.__config;
     methods.forEach(method => {
       var event = this.__getEventNameByMethod(method);
 
-      this.__rootElement[modeMethod](event, this.__rootElementHandler);
+      var target = emits.includes(event) ? this.__base : this.__rootElement;
+      target[modeMethod](event, this.__rootElementHandler);
     });
   }
 

package/Base/managers/OptionsManager.d.ts

@@ -8,6 +8,8 @@
  */
 /**
  * Class options to manage options as data attributes on an HTML element.
+ *
+ * @todo Use `MutationObserver` to update values? Might be more performant.
  * @augments {OptionsInterface}
  */
 export default class OptionsManager {

package/Base/managers/RefsManager.d.ts

@@ -4,6 +4,8 @@
  */
 /**
  * Refs Manager
+ *
+ * @todo Use `MutationObserver` to automatically update refs?
  */
 export default class RefsManager {
     /**

package/Base/managers/RefsManager.js

@@ -50,6 +50,11 @@ export default class RefsManager {
       console.warn("[".concat(this.__base.$options.name, "]"), "The \"".concat(refName, "\" ref has been found multiple times."), 'Did you forgot to add the `[]` suffix to its name?');
     }
 
+    if (!isMultiple && refs.length <= 1 && refs[0] === undefined) {
+      console.warn("[".concat(this.__base.$options.name, "]"), "The \"".concat(refName, "\" ref is missing."), "Is there an `[data-ref=\"".concat(refName, "\"]` element in the component's scope?"));
+      return;
+    }
+
     this.__eventsManager.bindRef(refName, refs);
 
     Object.defineProperty(this, propName, {

package/Base/managers/ServicesManager.d.ts

@@ -1,8 +1,11 @@
 /**
- * @typedef {keyof SERVICES_MAP} ServiceName
+ * @typedef {typeof SERVICES_MAP & Record<string, () => ServiceInterface>} Services
+ * @typedef {keyof SERVICES_MAP|string} ServiceName
  */
 /**
  * Services management for the Base class.
+ *
+ * @todo Add support for disabled services on mount when the method is defined.
  */
 export default class ServicesManager {
     /**
@@ -81,7 +84,29 @@ export default class ServicesManager {
     unregister(name: string): void;
 }
 export type Base = import('../index').default;
-export type ServiceInterface = import('../../services').ServiceInterface;
+export type BaseConstructor = import('../index').BaseConstructor;
+export type ServiceInterface = import('../../services').ServiceInterface<any>;
+export type Services = typeof SERVICES_MAP & Record<string, () => ServiceInterface>;
 export type ServiceName = keyof {
-    [x: string]: () => import("../../services").ServiceInterface;
-};
+    scrolled: typeof useScroll;
+    resized: typeof useResize;
+    ticked: typeof useRaf;
+    moved: typeof usePointer;
+    keyed: typeof useKey;
+    loaded: typeof useLoad;
+} | string;
+declare namespace SERVICES_MAP {
+    export { useScroll as scrolled };
+    export { useResize as resized };
+    export { useRaf as ticked };
+    export { usePointer as moved };
+    export { useKey as keyed };
+    export { useLoad as loaded };
+}
+import useScroll from "../../services/scroll.js";
+import useResize from "../../services/resize.js";
+import useRaf from "../../services/raf.js";
+import usePointer from "../../services/pointer.js";
+import useKey from "../../services/key.js";
+import useLoad from "../../services/load.js";
+export {};

package/Base/managers/ServicesManager.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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';
@@ -118,6 +118,8 @@ export default class ServicesManager {
 
   register(name, useFunction) {
     this.__customServices[name] = useFunction;
+
+    this.__base.__addEmits(name);
   }
 
   unregister(name) {
@@ -125,6 +127,8 @@ export default class ServicesManager {
       throw new Error("[ServicesManager] The `".concat(name, "` core service can not be unregistered."));
     }
 
+    this.__base.__removeEmits(name);
+
     delete this.__customServices[name];
   }
 

package/README.md

@@ -15,80 +15,23 @@ Install the latest version via NPM:
 npm install @studiometa/js-toolkit
 ```
 
-## Concept
+## Documentation
 
-[] todo
+This project contains a JavaScript micro-framework and its utility functions whose main objectives are:
 
-## Usage
+- Enforcing best-practice and consistency between projects
+- Using elements from the DOM easily
+- Enabling custom behaviours on component initialization or other user events
+- Disabling custom behaviours on component destruction or other user events
+- Initializing components in the right place at the right time
+- Defining dependencies between components
 
-Import the `Base` class and extend it to create your components:
+Visit [js-toolkit.studiometa.dev](https://js-toolkit.studiometa.dev) to learn more.
 
-```js
-import { Base, createApp } from '@studiometa/js-toolkit';
+## Contributing
 
-class Component extends Base {
-  static config = {
-    name: 'Component',
-  }
+This projects follows the [Git Flow](https://github.com/petervanderdoes/gitflow-avh) methodology to manage its branches and features. The packages and their dependencies are managed with NPM workspaces. The files are linted with ESLint, type checked with TypeScript and formatted with Prettier.
 
-  sayHello() {
-    console.log('Hello!');
-  }
-}
+## License
 
-class App extends Base {
-  static config = {
-    name: 'App',
-    components: {
-      Component,
-    },
-    refs: ['btn', 'items[]'],
-    options: {
-      foo: String,
-      bar: { type: String, default: 'bar' },
-    }
-  };
-
-  mounted() {
-    this.$log('mounted');
-
-    // Options
-    this.$options.name; // 'App'
-    this.$options.log; // true
-    this.$options.debug; // false
-    this.$options.foo // ''
-    this.$options.bar // 'bar'
-
-    // Children
-    this.$children.Component; // Array<Component>
-
-    // DOM references
-    this.$refs.btn; // <button data-ref="btn"></button>
-    this.$refs.items[0]; // <li data-ref="items[]"></li>
-  }
-
-  destroyed() {
-    this.$log('destroyed');
-  }
-
-  scrolled(props) {
-    this.$log('scrolled', props);
-  }
-
-  resized(props) {
-    this.$log('resized', props);
-  }
-}
-
-export default createApp(App, document.body);
-```
-
-Read the [documentation](https://js-toolkit.studiometa.dev/) to learn more.
-
-## Contribution
-
-This projects follows the [Git Flow](https://github.com/petervanderdoes/gitflow-avh) methodology to manage its branches and features.
-
-The packages from this project are managed with NPM workspaces.
-
-The files are linted with ESLint, type checked with TypeScript and formatted with Prettier.
+See [LICENSE](./LICENSE).

package/decorators/index.d.ts

@@ -1,9 +1,8 @@
-import withBreakpointManager from "./withBreakpointManager.js";
-import withBreakpointObserver from "./withBreakpointObserver.js";
-import withDrag from "./withDrag.js";
-import withExtraConfig from "./withExtraConfig.js";
-import withIntersectionObserver from "./withIntersectionObserver.js";
-import withMountWhenInView from "./withMountWhenInView.js";
-import withScrolledInView from "./withScrolledInView.js";
-import withVue2 from "./withVue2.js";
-export { withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView, withScrolledInView, withVue2 };
+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";

package/decorators/index.js

@@ -1,9 +1,8 @@
-import withBreakpointManager from './withBreakpointManager.js';
-import withBreakpointObserver from './withBreakpointObserver.js';
-import withDrag from './withDrag.js';
-import withExtraConfig from './withExtraConfig.js';
-import withIntersectionObserver from './withIntersectionObserver.js';
-import withMountWhenInView from './withMountWhenInView.js';
-import withScrolledInView from './withScrolledInView.js';
-import withVue2 from './withVue2.js';
-export { withBreakpointManager, withBreakpointObserver, withDrag, withExtraConfig, withIntersectionObserver, withMountWhenInView, withScrolledInView, withVue2 };
+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';

package/decorators/withBreakpointObserver.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 useResize from '../services/resize.js';
 

package/decorators/withDrag.js

@@ -1,14 +1,17 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["target"];
 import useDrag from '../services/drag.js';
 export default function withDrag(BaseClass) {
+  var _class, _temp;
+
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       {
     target = instance => instance.$el
   } = _ref,
       options = _objectWithoutProperties(_ref, _excluded);
 
-  return class extends BaseClass {
+  return _temp = _class = class extends BaseClass {
     constructor(el) {
       super(el);
       this.$on('mounted', () => {
@@ -21,5 +24,8 @@ export default function withDrag(BaseClass) {
       });
     }
 
-  };
+  }, _defineProperty(_class, "config", {
+    name: "".concat(BaseClass.config.name, "WithDrag"),
+    emits: ['dragged']
+  }), _temp;
 }