Spares Shared
Modulo di componenti custom per applicazioni frontend del progetto catalogo ricambi for doing amazing things.
Componenti
- 🌳 Treeview
- 📐 Technical Sheet
Installazione
- Aggiungi
@granello-dev/spares-shared
al progetto
# Using pnpm
pnpm add -D @granello-dev/spares-shared
# Using yarn
yarn add --dev @granello-dev/spares-shared
# Using npm
npm install --save-dev @granello-dev/spares-shared
- Aggiungi
@granello-dev/spares-shared
alla sezionemodules
del filenuxt.config.ts
export default defineNuxtConfig({
modules: [
'@granello-dev/spares-shared'
]
})
Fatto! ✨
Treeview
<s-treeview />
Props
Nome | Binding | Tipo | Descrizione | Richiesta | Default |
---|---|---|---|---|---|
model-value | Sì | TreeItem [] | I nodi della treeview selezionati | No | [] |
active-item-treeview-id | Sì | String | Il treeview_id del nodo attivo | No | undefined |
title | String | Il titolo mostrato sopra la treeview | No | '' | |
loading | Boolean | Indica lo stato di caricamento della treeview | No | false | |
items | TreeItem[] | I nodi della treeview. Quelli che hanno figli (chidlren.length > 0) saranno visualizzati come aperti | Sì | ||
selectable | Boolean | Indica se i nodi della treeview devono poter essere selezionabili | No | false | |
load-item | (treeviewId:string) => Promise | Funzione asincrona chiamata ogni volta che un nodo viene "aperto". Deve restituire un TreeItem. | No | null | |
disable | (item:TreeItem) => boolean | Funzione chiamata per ogni elemento, che indica se disabilitarlo o no | No | null | |
empty-key | String | La chiave della proprietà nell'oggetto item che indica se l'oggetto non ha figli (nasconde icona) | No | null |
Eventi
Nome | Tipo | Descrizione |
---|---|---|
click:item | (item:TreeItem) => void | Il nodo della treeview è stato cliccato |
load:item | (item:TreeItem) => void | Il nodo della treeview è stato caricato |
Slots
Nome | Descrizione | Prop |
---|---|---|
actions | Elemento in alto a destra, a fianco del titolo | |
prepend | Elemento all'inizio (sinistra) di ogni nodo della treeview | item: TreeItem |
Technical sheet
<s-tech-drawing />
Props
Nome | Binding | Tipo | Descrizione | Richiesta | Default |
---|---|---|---|---|---|
svg-markup | String | Il markup dell'svg | No | undefined | |
fallback-image-url | String | L'url dell'immagine da visualizzare nel caso il markup svg non sia presente | No | undefined | |
loading | Boolean | Indica lo stato di caricamento del disegno | No | false | |
loading-label | String | L'etichetta del messaggio di caricamento in corso | No | Loading.. | |
active-pmi | Sì | String | L'etichetta del pmi attivo | No | undefined |
fullscreen | Sì | Boolean | Indica se visualizzare il disegno a tutto schermi | No | false |
tooltip-fullscreen | String | Testo da visualizzare su hover del pulsante | No | fullscreen | |
tooltip-zoom-in | String | Testo da visualizzare su hover del pulsante | No | zoom in | |
tooltip-zoom-out | String | Testo da visualizzare su hover del pulsante | No | zoom out | |
tooltip-zoom-reset | String | Testo da visualizzare su hover del pulsante | No | zoom reset | |
tooltip-download | String | Testo da visualizzare su hover del pulsante. La presenza di questa label attiva anche pulsante download | No | download | |
bottom-label | String | Etichetta da mostrare in basso a sinistra | No | null |
Eventi
Nome | Tipo | Descrizione |
---|---|---|
click:link | (name:String) => void | Un elemento link è stato cliccato |
download | () => void | L'utente ha cliccato download |
Development
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release