Manuel de référence

# Tabs component

Les composants Tabs, Tab et SmartElementTab définissent un ensemble de composants permettant de créer une liste d'onglets et les méthodes/événements nécessaires à la navigation entre ces derniers.
Le composant Tabs définit le conteneur parent des différents onglets que sont les composants Tab et SmartElementTab.

tabs

# Installation

Les tabs sont composés de trois éléments à importer.

  • @anakeen/user-interfaces/components/lib/AnkTabs.esm
  • @anakeen/user-interfaces/components/lib/AnkSmartElementTab.esm
  • @anakeen/user-interfaces/components/lib/AnkTab.esm

Si vous importez le smartElementTab, vous devez aussi importer la CSS associée :

  • @anakeen/user-interfaces/components/scss/AnkSmartElement.scss

WARNING

Le composant SmartElementTab est asynchrone, il faut donc le charger manière asynchrone dans vue (avec une closure). De plus, pour accéder au composant il faut attendre que celui-ci soit monté, un évènement vue @smartElementTabMounted est mis à disposition pour pouvoir déclencher une méthode à ce moment.

# Tabs component

Le composant Tabs fournit un système d'onglets pour la manipulation de Smart Element Tab (SmartElementTab) ou de Tab.

# Propriétés

v-model (string) optionnel

La valeur liée au nom de l'onglet sélectionné.

selected (string) optionnel

Nom de l'onglet sélectionné.

type (TabTypes) optionnel

Type de l'onglet Valeurs possible: Card | Border_Card | Bezel.

closable (boolean) optionnel

Définit la possibilité de fermer ou non chaque onglet (par défaut: false).

addable (boolean) optionnel

Définit la possibilité d'ajouter des onglets vides (par défaut: false).

minTabSize (string) optionnel

Définit la largeur minimale d'un onglet

forceScrollNavigation (boolean) optionnel

Définit l'affichage obligatoire des boutons de navigation (par défaut: false).

# Événements

# tabRemove

Cet événement permet d'effectuer des instructions avant la suppression d'un onglet.

# Déclenchement

Cet événement est déclenché lorsque l'utilisateur clique sur le bouton de suppression d'un onglet.

# Paramètres passés au callback

tabRemoved (string)

Nom de la l'onglet supprimé

# Exemple d'utilisation



 

























 













<template>
  <div>
    <ank-tabs selected="smartTab" @tabRemove="onRemoveTab">
      <ank-smart-tab v-if="myTabOpen" ref="smartTab" identifier="USER_ADMIN" name="smartTab" :closable="true" />
      <ank-tab tabId="htmlTab" label="HTMLTab">
        <h1>HTMLTab</h1>
      </ank-tab>
    </ank-tabs>
  </div>
</template>
<script>
import AnkTabs from "@anakeen/user-interfaces/components/lib/AnkTabs.esm";
import AnkSmartTab from "@anakeen/user-interfaces/components/lib/AnkSmartElementTab.esm";
import AnkTab from "@anakeen/user-interfaces/components/lib/AnkTab.esm";
import "@anakeen/user-interfaces/components/scss/AnkSmartElement.scss";

export default {
  components: {
    AnkTabs,
    AnkSmartTab: () => AnkSmartTab,
    AnkTab
  },
  data() {
    return {
      myTabOpen: true
    };
  },
  methods: {
    onRemoveTab(event, detail) {
      this.$refs.smartTab
        .closeSmartElement()
        .then(() => {
          this.myTabOpen = false;
        })
        .catch(err => {
          console.error(err);
        });
    }
  }
};
</script>

# tabClick

Cet événement permet d'effectuer des instructions lorsque l'utilisateur sélectionne un onglet.

# Déclenchement

Cet événement est déclenché lorsque l'utilisateur sélectionne un onglet.

# Paramètres passés au callback

event

Événement

# Exemple d'utilisation



 

























 






<template>
  <div>
    <ank-tabs selected="smartTab" @tabClick="onSelectedTab">
      <ank-smart-tab v-if="myTabOpen" ref="smartTab" identifier="USER_ADMIN" name="smartTab" :closable="true" />
      <ank-tab tabId="htmlTab" label="HTMLTab">
        <h1>HTMLTab</h1>
      </ank-tab>
    </ank-tabs>
  </div>
</template>
<script>
import AnkTabs from "@anakeen/user-interfaces/components/lib/AnkTabs.esm";
import AnkSmartTab from "@anakeen/user-interfaces/components/lib/AnkSmartElementTab.esm";
import AnkTab from "@anakeen/user-interfaces/components/lib/AnkTab.esm";
import "@anakeen/user-interfaces/components/scss/AnkSmartElement.scss";

export default {
  components: {
    AnkTabs,
    AnkSmartTab: () => AnkSmartTab,
    AnkTab
  },
  data() {
    return {
      myTabOpen: true
    };
  },
  methods: {
    onSelectedTab(event) {
      console.log(`L'onglet ${event.selectedTab} est selectionné`);
    }
  }
};
</script>

# tabBeforeLeave

Cet événement permet d'effectuer des instructions avant de naviguer en dehors de l'onglet

# Déclenchement

Cet événement est déclenché lorsque l'utilisateur navigue en dehors de l'onglet

# Paramètres passés au callback

event

Événement

# input

Cet événement permet de mettre à jour l'identifiant de l'onglet sélectionné .

# Déclenchement

Cet événement est déclenché lorsque l'utilisateur navigue en dehors de l'onglet.

# Paramètres passés au callback

tabName

Identifiant de l'onglet

# Méthodes

# setSelectedTab

public setSelectedTab(string tabName)

Cette méthode permet de sélectionner un onglet.

# Arguments

tabName (string)

Identifiant de l'onglet.

# Retour

Aucun.

# Erreurs / Exceptions

Aucune.

# Exemple d'utilisation

<template>
  <div>
    <ank-tabs ref="smartTab">
      <ank-smart-tab identifier="USER_ADMIN" />
      <ank-tab tabId="htmlTab" label="HTMLTab">
        <h1>HTMLTab</h1>
      </ank-tab>
    </ank-tabs>
  </div>
</template>
<script>
import AnkTabs from "@anakeen/user-interfaces/components/lib/AnkTabs.esm";
import AnkSmartTab from "@anakeen/user-interfaces/components/lib/AnkSmartElementTab.esm";
import AnkTab from "@anakeen/user-interfaces/components/lib/AnkTab.esm";
import "@anakeen/user-interfaces/components/scss/AnkSmartElement.scss";

export default {
  components: {
    AnkTabs,
    AnkSmartTab: () => AnkSmartTab,
    AnkTab
  },
  mounted() {
    this.$refs.smartTab.setSelectedTab("USER_ADMIN");
  }
};
</script>

# Smart Element Tab component

# Description

Le composant SmartElementTab représente un onglet contenant un Smart Element.

# Propriétés

label (string) optionnel

Titre de l'onglet (par défaut: "Chargement en cours..."). Pour définir un label customisé, il est possible d'utiliser une balise <template v-slot:label></template> dans laquelle est défini le template vue du label.

disabled (boolean) optionnel

Désactivation d'un onglet (par défaut false).

identifier (string) optionnel

Identifiant du Smart Element.

tabId (string) optionnel

Identifiant de l'onglet.

viewId (string) optionnel

Définit la vue de rendu (par défaut : "!defaultConsultation").

closable (boolean) optionnel

Définit la possibilité de fermer ou non chaque onglet (par défaut: false).

lazy (boolean) optionnel

Définit le mode de chargement des onglets:

  • si lazy vaut true, alors les onglets ne se chargeront qu'au clic sur l'onglet.
  • si lazy vaut false, alors les onglets sont chargés au montage du composant. Par défaut lazy vaut false.

# Slots

# loading

Le slot nommé loading permet de personnaliser l'affichage du chargement en cours. L'affichage du chargement est automatiquement retiré lorsque l'évènement ready du Smart Element a été déclenché.
Par défaut, le chargement est représenté par le logo Anakeen ainsi qu'une barre de chargement. Le contenu du slot est rendu dans la balise encadrant le Smart Element, ainsi l'affichage du chargement occupe l'ensemble de l'espace pris par le Smart Element.

# Exemple

Affichage d'un texte centré

<template>
  <div>
    <ank-tabs class="custom-tabs">
      <ank-smart-tab identifier="USER_ADMIN" class="custom-tab">
        <template v-slot:loading>
          <h1>Chargement en cours...</h1>
        </template>
      </ank-smart-tab>
    </ank-tabs>
  </div>
</template>
<style scoped>
.custom-tabs {
  height: 500px;
}
.custom-tab > .ank-se-tab-element > .smart-element-custom-loading > .custom-loading {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
</style>

# Événements

# Événements du composant Smart Element

Chaque onglet du composant correspond à un Smart Element, l'ensemble des événements du Smart Element est propagé sur le composant Tabs avec le nom suivant :

SmartElementTab<nom_evenement>

<template>
  <div>
    <ank-tabs selected="smartTab">
      <ank-smart-tab
        identifier="USER_ADMIN"
        name="smartTab"
        @SmartElementTabAfterSave="onEvent"
        @SmartElementTabAfterDelete="onEvent"
        @SmartElementTabActionClick="onEvent"
        @SmartElementTabDisplayError="onEvent"
        @SmartElementTabDisplayMessage="onEvent"
        @SmartElementTabBeforeSave="onEvent"
      />
      <ank-tab tabId="htmlTab" label="HTMLTab">
        <h1>HTMLTab</h1>
      </ank-tab>
    </ank-tabs>
  </div>
</template>
<script>
import AnkTabs from "@anakeen/user-interfaces/components/lib/AnkTabs.esm";
import AnkSmartTab from "@anakeen/user-interfaces/components/lib/AnkSmartElementTab.esm";
import AnkTab from "@anakeen/user-interfaces/components/lib/AnkTab.esm";

import "@anakeen/user-interfaces/components/scss/AnkSmartElement.scss";
export default {
  components: {
    AnkTabs,
    AnkSmartTab: () => AnkSmartTab,
    AnkTab
  },
  methods: {
    onEvent: function(event, detail) {
      console.log(event, detail);
    }
  }
};
</script>

# Annulation de la sauvegarde du Smart Element

L'annulation de la sauvegarde d'un Smart Element doit se faire avant que la procédure de sauvegarde soit engagée.
De fait, il faut effectuer cette annulation durant l'événement SmartElementTabBeforeSave.

# Méthodes

# closeSmartElement

void closeSmartElement();

Cette méthode permet de fermer le Smart Element courant.

Attention

Cette méthode ne ferme pas l'onglet dans lequel se trouve le Smart Element.

# Arguments

Aucun.

# Retour

Aucun.

# Erreurs / Exceptions

Aucune.

# Exemple

  • Fermeture de l'onglet du Smart Element courant suite à la fermeture du Smart Element
<template>
  <div>
    <ank-tabs selected="smartTab" @tabRemove="onRemoveTab">
      <ank-smart-tab v-if="myTabOpen" ref="smartTab" identifier="USER_ADMIN" name="smartTab" :closable="true" />
      <ank-tab tabId="htmlTab" label="HTMLTab">
        <h1>HTMLTab</h1>
      </ank-tab>
    </ank-tabs>
  </div>
</template>
<script>
import AnkTabs from "@anakeen/user-interfaces/components/lib/AnkTabs.esm";
import AnkSmartTab from "@anakeen/user-interfaces/components/lib/AnkSmartElementTab.esm";
import AnkTab from "@anakeen/user-interfaces/components/lib/AnkTab.esm";
import "@anakeen/user-interfaces/components/scss/AnkSmartElement.scss";

export default {
  components: {
    AnkTabs,
    AnkSmartTab: () => AnkSmartTab,
    AnkTab
  },
  data() {
    return {
      myTabOpen: true
    };
  },
  methods: {
    onRemoveTab(event, detail) {
      this.$refs.smartTab
        .closeSmartElement()
        .then(() => {
          this.myTabOpen = false;
        })
        .catch(err => {
          console.error(err);
        });
    }
  }
};
</script>

# Autres méthodes

Le composant SmartElementTab permet également d'utiliser toutes les méthodes liées au Smart Element (voir documentation sur les méthodes de Smart Element).

# Exemple

<template>
    <div>
      <ank-tabs selected="smartTab">
        <ank-smart-tab
                identifier="112861"
                name="smartTab"
                ref="myTab"
                @SmartElementTabMounted="onEvent"
        />
        <ank-tab tabId="htmlTab" label="HTMLTab">
          <h1>HTMLTab</h1>
        </ank-tab>
      </ank-tabs>
    </div>
  </div>
</template>
<script>
import AnkTabs from "@anakeen/user-interfaces/components/lib/AnkTabs.esm";
import AnkSmartTab from "@anakeen/user-interfaces/components/lib/AnkSmartElementTab.esm";
import AnkTab from "@anakeen/user-interfaces/components/lib/AnkTab.esm";
import "@anakeen/user-interfaces/components/scss/AnkSmartElement.scss";

export default {
  components: {
    AnkTabs,
    AnkSmartTab: () => AnkSmartTab,
    AnkTab
  },
  data() {
    return {
      myTabOpen: true
    };
  },
  methods: {
    onEvent(event) {
      console.log(this.$refs.myTab.getProperties());
    }
  }
};
</script>

# Tab component

# Description

Le composant Tab représente un onglet générique pouvant contenir un template VueJs ou de la DOM.

# Propriétés

tabId (string)

Identifiant de l'onglet

label (string) optionnel

Titre de l'onglet (par défaut: ""). Pour définir un label customisé, il est possible d'utiliser une balise <template v-slot:label></template> dans laquelle est défini le template vue du label.

disabled (boolean) optionnel

Désactivation d'un onglet (par défaut false).

closable (boolean) optionnel

Définit la possibilité de fermer ou non chaque onglet (par défaut: false).

lazy (boolean) optionnel

Définit le mode de chargement des onglets:

  • si lazy vaut true, alors les onglets ne se chargeront qu'au clic sur l'onglet.
  • si lazy vaut false, alors les onglets sont charger au montage du composant. Par défaut lazy vaut false.

# Événements

# Événement tabLabelChanged

# Déclenchement

Cet événement est déclenché lorsque le titre du l'onget a été modifié.

# Paramètres passés au callback

Aucun.

# Méthodes

Aucune.

# Exemple

<template>
  <div class="ank-test-app">
    <div class="ank-test-app-tabs-wrapper">
      <ank-tabs class="ank-test-app-tabs">
        <ank-tab :closable="false" tabId="welcome">
          <template slot="label">
            <span class="ank-test-app-welcome-title" v-html="welcomeTabTitle" />
          </template>
          <span>body</span>
        </ank-tab>
      </ank-tabs>
    </div>
  </div>
</template>
<script>
import AnkTabs from "@anakeen/user-interfaces/components/lib/AnkTabs.esm";
import AnkTab from "@anakeen/user-interfaces/components/lib/AnkTab.esm";
import "@anakeen/user-interfaces/components/scss/AnkSmartElement.scss";

export default {
  components: {
    AnkTabs,
    AnkTab
  },
  data() {
    return {
      welcomeTabTitle: "Welcome"
    };
  }
};
</script>

# Exemple

<template>
  <div class="ank-test-app">
    <div class="ank-test-app-tabs-wrapper">
      <ank-tabs class="ank-test-app-tabs" ref="testAppTabs" @tabRemove="onRemoveTab" @tabAdd="onTabAdd" addable>
        <ank-tab :closable="false" tabId="welcome">
          <template slot="label">
            <span class="ank-test-app-welcome-title" v-html="welcomeTabTitle"></span>
          </template>
          <span>body</span>
        </ank-tab>
        <ank-smart-tab
          v-for="(tab, index) in tabs"
          :identifier="tab.name"
          :key="tab.tabId"
          :tabId="tab.tabId"
          :closable="!!tab.closable"
          :viewId="tab.viewId || '!defaultConsultation'"
          :revision="tab.revision"
          ref="seTab"
          @SmartElementTabAfterSave="onAfterSave"
          @SmartElementTabAfterDelete="onAfterDelete"
          @SmartElementTabActionClick="onActionClick"
          @SmartElementTabDisplayError="onDisplayError"
          @SmartElementTabDisplayMessage="onDisplayMessage"
        >
        </ank-smart-tab>
      </ank-tabs>
    </div>
  </div>
</template>
<script>
import AnkTabs from "@anakeen/user-interfaces/components/lib/AnkTabs.esm";
import AnkSmartTab from "@anakeen/user-interfaces/components/lib/AnkSmartElementTab.esm";
import AnkTab from "@anakeen/user-interfaces/components/lib/AnkTab.esm";
import "@anakeen/user-interfaces/components/scss/AnkSmartElement.scss";

export default {
  components: {
    AnkTabs,
    AnkSmartTab: () => AnkSmartTab,
    AnkTab
  },
  data() {
    return {
      welcomeTabTitle: "Welcome",
      tabs: [
        {
          closable: true,
          name: "2099"
        },
        {
          closable: true,
          name: "2113"
        },
        {
          closable: false,
          name: "2090"
        }
      ]
    };
  },
  methods: {
    onAfterSave(event, detail) {
      console.log(event, detail);
    },
    onAfterDelete(event, detail) {
      console.log(event, detail);
    },
    onActionClick(event, detail) {
      console.log(event, detail);
    },
    onDisplayError(event, detail) {
      console.log(event, detail);
    },
    onDisplayMessage(event, detail) {
      console.log(event, detail);
    },
    onTabAdd(event, detail) {
      this.tabs.push({
        closable: true,
        name: "2133"
      });
    },
    onRemoveTab(event, detail) {
      this.$refs.seTab.forEach((item, key) => {
        if (item.paneName === event) {
          item
            .closeSmartElement()
            .then(() => {
              this.tabs.splice(key, 1);
            })
            .catch(err => {
              console.error(err);
            });
        }
      });
    }
  }
};
</script>