@granello-dev/spares-manager-shared

spares-manager-shared

Per testare componenti

yarn install

yarn serve

Compilazione e pubblicazione

Prima di tutto aggiornare versione in package.json.

yarn build-bundle

npm publish --access public

(E' richiesto fare login con npm)

Utilizzo in altra app nuxt

yarn add @granello-dev/spares-manager-shared

Creare file /plugins/shared.js (nome file non importante).

Importare il plugin e lo stile css

// /plugins/shared.js
import Shared from '@granello-dev/spares-manager-shared'
import '@granello-dev/spares-manager-shared/dist/spares-manager-shared.css'
Vue.use(Shared)

Aggiungere il plugin in nuxt.config.js

// nuxt.config.js
plugins: [
    '~/plugins/vue-plugins',
    // ...
  ]

Aggiungere i componenti Vuetify utilizzati dalla libreria nel file nuxt.config.js

// nuxt.config.js
vuetify: {
    // ...
    treeShake: {
        components: ['VCard', 'VCardTitle', 'VCardText', 'VTreeview', 'VIcon', 'VBtn', 'VFlex', 'VTooltip']
    }
    // ...
}

Treeview <treeview>

Note

• La prop item-key è fissa a internal_code. Questo perchè avendo all'interno dell'albero sia entità che tavole, il campo ID non è univoco.

Props

• Quelle previste da componente <v-treeview> vengono passate.
• catalog struttura albero come arriva da API
• entity-id l'id dell'entità da aprire. Per esempio, nel progetto catalogo online viene utilizzata this.$route.query.entity per fare in modo che al cambio del parametro in query URL venga aggiornato in automatico l'albero.
• revision-id come entity-id, vedi sopra
• loading viene passato alla <v-card> in modo da mostrare barra di caricamento

Slot

• title titolo sopra l'albero
• item-left allineato a sinistra in ognuno degli elementi dell'albero. Si può accedere all'item. Es. <template v-slot:item-left="{item}">

Eventi

• element-activated restituisce l'elemento attivato

Drawing <drawing>

Note

• Schermi desktop: l'svg viene inizializzato con larghezza e altezza del contenitore
• Schermi mobile: l'svg viene inizializzato con altezza del contenitore

v-model

Data binding a due vie con etichetta della posizione disegno attiva. Es. "1"

Props

• svg-markup il markup del disegno svg
• fullscreen visualizzazione a schermo intero (da gestire in padre). Usare .sync per data binding a due vie.
• hidden-parts array contenente i drawing position da nascondere dal disegno svg
• tooltip-fullscreen tooltip del pulsante fullscreen
• tooltip-zoom-in tooltip del pulsante zoom in
• tooltip-zoom-out tooltip del pulsante zoom out
• tooltip-zoom-reset tooltip del pulsante zoom reset
• tooltip-download-svg tooltip del pulsante download svg
• filename abilitazione del pulsante download svg e nome del file scaricato

Slot

Eventi

• clicked-link restituisce l'etichetta dell'elemento LINK cliccato. Solitamente è l'internal code della tavola Es. "E.01.01.L0000_0"
• svg-ready l'svg è stato reso interattivo e pronto