BookStack Code Mirror - bookstack/blob - resources/js/components/component.js

   1 export class Component {
   2
   3     /**
   4      * The registered name of the component.
   5      * @type {string}
   6      */
   7     $name = '';
   8
   9     /**
  10      * The element that the component is registered upon.
  11      * @type {Element}
  12      */
  13     $el = null;
  14
  15     /**
  16      * Mapping of referenced elements within the component.
  17      * @type {Object<string, Element>}
  18      */
  19     $refs = {};
  20
  21     /**
  22      * Mapping of arrays of referenced elements within the component so multiple
  23      * references, sharing the same name, can be fetched.
  24      * @type {Object<string, Element[]>}
  25      */
  26     $manyRefs = {};
  27
  28     /**
  29      * Options passed into this component.
  30      * @type {Object<String, String>}
  31      */
  32     $opts = {};
  33
  34     /**
  35      * Component-specific setup methods.
  36      * Use this to assign local variables and run any initial setup or actions.
  37      */
  38     setup() {
  39         //
  40     }
  41
  42     /**
  43      * Emit an event from this component.
  44      * Will be bubbled up from the dom element this is registered on, as a custom event
  45      * with the name `<elementName>-<eventName>`, with the provided data in the event detail.
  46      * @param {String} eventName
  47      * @param {Object} data
  48      */
  49     $emit(eventName, data = {}) {
  50         data.from = this;
  51         const componentName = this.$name;
  52         const event = new CustomEvent(`${componentName}-${eventName}`, {
  53             bubbles: true,
  54             detail: data,
  55         });
  56         this.$el.dispatchEvent(event);
  57     }
  58
  59 }