@granello-dev/spares-shared

Spares Shared

Modulo di componenti custom per applicazioni frontend del progetto catalogo ricambi for doing amazing things.

Componenti

• 🌳 Treeview
• 📐 Technical Sheet

Installazione

1. 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

2. Aggiungi @granello-dev/spares-shared alla sezione modules del file nuxt.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