# Le composant Hub Element

ASTUCE Le composant Hub Element utilise le mixin HubElementMixin. Ce mixin peut être utilisé à la place d'un

héritage (extends) du composant HubElement. :::

# Propriétés

# displayType: string

Type d'affichage du hub element. Cette propriété peut contenir 3 valeurs :

• "COLLAPSED": Le composant affiche son template dans le dock lorsqu'il est replié
• "EXPANDED": Le composant affiche son template dans le dock lorsqu'il est déplié
• "CONTENT": Le composant affiche son template comme contenu du hub

# parentPath: string

Route d'accès à l'élément parent. Cette propriété doit être utilisé pour résoudre les sous routes de navigation éventuellement utilisées dans le composant.

# entryOptions: object

Options de l'entrée du Hub correspondant. L'objet contient les informations suivantes :

interface EntryOptions {
  name: string; // Nom du Hub Element (tel qu'il a été défini dans sa configuration)
  route: string; // Url d'accès au Hub Element (tel qu'elle a été définie dans sa configuration)
  completeRoute: string; // Url absolu d'accès au Hub Element
  selectable: boolean; // true si le Hub Element peut être sélectionné
  activated: boolean; // true si le Hub Element est sélectionné par défaut lors de l'accès à l'interface du Hub
  activatedOrder: number | null; // Priorité de sélection par défaut si plusieurs Hub Element ont l'option activated à true
  expandable: boolean; // true si le Hub Element dispose d'un affichage étendu dans le Dock de l'interface du Hub.
}

# Méthodes

# resolveHubSubPath(path)

Retourne le chemin résolu à partir de la propriété parentPath.

# hubNotify(notification)

Envoie une notification au Hub Station. Le paramètre fourni à cette méthode doit respecter le format suivant :

{
  type: "info", // Type de notification parmi: "info", "notice", "success", "warning", "error"
  content: {
    textContent: "Un message d'information", // ou htmlContent: "<em>Un message d'information important</em>"
    title: "Titre du message"
  },
  options: {
    displayTime: 1000, // temps d'affichage en ms de la notification (5000ms par défaut)
    closable: false // La notification peut être fermée via l'ui ou non (true par défaut)
  }
}

# registerRoute(pattern, routeHandler)

Permet d'enregistrer une route du composant dans le routeur. L'argument pattern peut être une chaîne de caractères ou une expression régulière.

Exemple

export default {
  created() {
    // En utilisant une chaîne de caractère
    this.registerRoute("/user/:id/:action", function(params, query) {
      // Soit http://site.com/user/42/save?answer=42 alors :
      // params.id = 42
      // params.action = save
      // query = "answer=42"
    });
    // En utilisant une expression régulière
    this.registerRoute(/\/products\/(d+)\/(w+)\/?/, function(id, action) {
      // Soit http://site.com/products/42/save alors :
      // id = 42
      // action = save
    });
  }
};

# registerRoutes(routeHandlers)

Permet d'enregistrer plusieurs routes du composant dans le routeur. L'argument routeHandlers est un objet.

Exemple

export default {
  created() {
    this.registerRoutes({
      "products/:id": function(params) {
        // http://site.com/products/42
        // params.id = 42
      },
      products: function() {
        // http://site.com/products
      },
      "*": function() {
        // Supporte wildcard *
      }
    });
  }
};

# navigate(route)

Permet de déclencher un changement de route. L'argument route est une chaîne de caractère.

Exemple

export default {
  watch: {
    selectedUser(newValue) {
      this.navigate(`/users/${newValue}`);
    }
  }
};

# getRouter()

Permet de récupérer l'instance du routeur. Par défaut, le routeur utilisé est le routeur Navigo

Exemple

export default {
  mounted() {
    const latestResolvedRoute = this.getRouter().lastRouteResolved();
  }
};

# Computed

# isDockCollapsed: boolean

Détermine si le composant est affiché dans le dock replié

# isDockExpanded: boolean

Détermine si le composant est affiché dans le dock déplié

# isHubContent: boolean

Détermine si le composant est affiché en tant que contenu