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