helorui

helorui

Vue3 components library

Installation

Les composants s'appuient sur Tailwind CSS 3 et sur une feuille de classes communes (boutons, champs, étiquettes, tableaux, menus). Dans la feuille Tailwind du projet :

@import 'helorui/src/css/helorui.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Dans tailwind.config.js :

• content doit lister './node_modules/helorui/**/*.vue' ;
• theme.colors doit déclarer primary, slate, red, amber, emerald et blue.

Enregistrement global des composants :

import * as helorui from 'helorui'

for(const [name, component] of Object.entries(helorui.components)) {
    app.component(name, component);
}
app.config.globalProperties.$filters = helorui.filters;

Mise en page

Administration générique

generic-table (liste) et generic-singleton (réglages) construisent une page d'admin à partir d'une liste de champs. Options de generic-table en plus des champs : description, createLabel (« Nouvelle version »), itemLabel (champ qui nomme un élément dans les popups), canCreate, canUpdate, canDelete, orderBy, orderDir, orderableBy, storageKey.

Le slot before-list de generic-table accueille un contenu entre le titre et la liste (chiffres clés, graphique).

Options d'un champ :