planetcomponents
v2.0.0
Published
[email protected] base components
Downloads
58
Readme
Components
require Bootstrap-vue
Components
AppContainer
Le conteneur de la page
<app-container :appTitle="settings.title">
<template slot="globalActions">
<b-button variant="primary"><i class="fab fa-empire" /></b-button>
// Will appear top right
</template>
<div class="container">
// content
</div>
</app-container>
ChartContainer
Permet de contenir un graphique Il vaut mieux utiliser un tableau de bords pour cela car chart container attends un format précis
Confirm
Modal de confirmation
<confirm ref="confirmUse" title="Attention">
Êtes-vous sûre de vouloir utiliser ce composant?
</confirm>
export default {
methods: {
async use () {
await this.$refs.confirmUse.trigger()
}
}
}
Dashboard
Permet d'intégrer un tableau de bord. Il faut dans un premier temps le créer sur l'interface de paramétrage. Le rendre global puis utiliser l'id du tableau de bord crée. Dans des soucis d'authentification il faut indiquer le module pour lequel le token est actif
<div class="w-100">
<dashboard id="idDuTableauDeBord" module="xxx" />
</div>
Datatable
Datatable qui permet de trier, d'avoir un classement par pages et de rechercher.
<template>
<app-container app-title="Mon titre">
<datatable ref="_datatable_result" class="mb-1" :colonnes="columns" rowId="id" :rows="rows" :selectable="true" :striped="true" :small="true">
<template slot="actionsOnAll">
<b-button size="sm" v-b-tooltip.hover.left @click="fakeAction" title="Action pour du vent" variant="success" class="ml-1 mr-1"><i class="fa fa-jedi" /></b-button>
</template>
<template slot-scope="datas">
<td class="font-weight-bold">{{ datas.line.name }}</td>
<td>{{ datas.line.age }}</td>
<td>{{ datas.line.animal }}</td>
<td>{{ datas.line.account }}</td>
</template>
</datatable>
</app-container>
</template>
import uniqid from 'uniqid'
import Chance from 'chance'
export default {
data () {
const chance = new Chance()
const rows = []
for (let i = 0; i < 168; i++) {
rows.push({
id: uniqid('person-'),
name: chance.name({ nationality: 'fr' }),
age: chance.age(),
animal: chance.animal(),
account: chance.euro()
})
}
return {
rows,
columns: [
{ libelle: 'Nom prénom', id: 'name', sortable: true },
{ libelle: 'Âge', id: 'age', sortable: true },
{ libelle: 'animal', id: 'animal', sortable: false },
{ libelle: 'Fortune', id: 'account', sortable: true }
]
}
},
methods: {
fakeAction () {
const selection = this.$refs._datatable_result
console.log(selection.selected)
}
}
}
Datepicker
Datepicker au thème de bootstrap
<p-datepicker v-model="today"/>
export default {
data () {
return {
today: new Date() // works with string too eg: '2019-01-01'
}
}
}
Loading
Joli loader qui correspond au logiciel et qui s'adapte aux primary / scondary / info de bootstrap
<loading>Chargement...</loading>
<!-- OR -->
<loading />
NavbarSide
Side bar intégrer au template de base. Généralement utilisé de la sorte:
<template>
<div id="app" class="d-flex flex-grow">
<navbar-side :routes="routes" app-title="Test" appLogo="fa fa-trash"/>
<router-view />
</div>
</template>
export default {
data () {
return {
routes: [
{ path: '/home', libelle: this.$t('message.routes.home'), icon: 'fa-home' },
{ path: '/about', libelle: this.$t('message.routes.about'), icon: 'fa-thumbtack' },
{ path: '/datatable', libelle: this.$t('message.routes.datatable'), icon: 'fa-table' }
]
}
}
}
PopulationSelection
Sélecteur de population sans jquery. Inclu l'iframe de sélection. Doit être connecté au logiciel pour l'utiliser. Sera remplacer à terme par le nouveau rh
<div class="container" v-show="apiReady">
<population-selection
:restrictions="restrictions"
:mergeRestrictions="merge"
:options="{ filtresDisabled: ['bases', 'agences', 'departements', 'filiales']}"
:debut="debut"
:fin="fin"
ref="selecteur"
style="width:100%;height:600px;"
@loaded="apiReady = true"/>
<div class="pt-1 d-flex justify-content-center">
<b-button variant="primary" @click="selectPopulation" disabled="!apiReady">Sélectionner</b-button>
</div>
</div>
export default {
data () {
const today = new Date().toISOString().substr(0, 10)
return {
restrictions: {
filtres: [],
trigrammes: []
},
merge: false,
debut: today,
fin: today,
apiReady: false
}
},
methods: {
async selectPopulation () {
const selection = this.$refs.selecteur.getApi()
const selectionDatas = await selection.api('getSelection')
}
}
}
Prompt
Un prompt avec une modale bootstrap
<prompt ref="prompt" title="Attention" label="Nouveau nom:" />
export default {
methods: {
async launchPrompt () {
const value = await this.$refs.prompt.trigger()
console.log(value)
}
}
}
RangeSelector
Un composant lié au datepicker permettant d'avoir accès a des dates préselectionnées eg: ce mois-ci, hier etc.
<range-selector v-model="range" />
<range-selector v-model="range2" />
export default {
data () {
return {
range: null, // will go to custome with value to today
range2: {
start: null,
end: null,
alias: 'yesterday' // will automatically set start and end to yesterday
}
}
}
}
Alias disponibles:
- yesterday
- dayBeforeYesterday
- thisDayLastWeek
- previousWeek
- previousMonth
- previousYear
- last2Days
- last7Days
- last30Days
- last90Days
- last6Months
- last1Year
- last2Years
- last5Years
- all
- today
- todaySoFar
- thisWeek
- thisMonth
- thisYear
Spacer
Utile pour les dispositions flex exemple: Le bouton sera à droite carle spacer prendra tout l'espace disponible
<div class="d-flex">
<spacer />
<b-button variant="primary">TEST</b-button>
</div>