Composables

Composables Vue 3 per gestire stato foglio, lista, sorgenti ERP, versioni, ACL, filtri globali e tema.

Mappa composables

ComposableStato gestitoService dipendente
usePzetaFogliOptionsOpzioni risolte dal plugin
useFogliListLista fogli + filtri + paginazioneFogliPostgrestService
useSpreadsheetStato foglio aperto (FoglioState) + snapshot + lockFogliPostgrestService, LockService, FortuneSheetAdapter
useSpreadsheetERPCatalogo + sorgenti attive + refreshFogliPostgrestService, ErpDataService
useSpreadsheetVersioniStorico versioni + ripristinoFogliPostgrestService
useFogliAclACL foglio (lettura/scrittura)FogliPostgrestService
useGlobalFiltersFiltri globali del foglio + autosaveFogliPostgrestService
useThemeStato tema (light/dark/system) globale

Quando usare un composable invece di SpreadsheetEditor

Usa direttamente i composables quando vuoi:

  • UI custom: layout completamente diverso dall'editor di default
  • Solo lista: pagina dashboard che mostra solo metadati fogli senza editor
  • Solo backend: scripting/batch che usa i service senza UI
  • Test/Storybook: stato controllato manualmente

Per la maggior parte dei casi però, SpreadsheetEditor e FogliListView sono sufficienti — usano questi composables internamente.

Esempio composto: editor custom

<script setup lang="ts">
import { ref } from 'vue'
import {
  useSpreadsheet,
  useSpreadsheetERP,
  useGlobalFilters,
  useSpreadsheetVersioni,
} from '@pzeta/vue-foglidicalcolo'

const foglioId = ref<number | null>(42)
const mode = ref<'edit' | 'view'>('edit')

const spreadsheet = useSpreadsheet({
  foglioId,
  mode,
  autosaveInterval: ref(60),
  onSave: (e) => console.log('Saved rev.', e.revisione),
  onError: (e) => console.error('Editor error:', e),
})

const globalFilters = useGlobalFilters({
  idfolio: foglioId,
})

const erp = useSpreadsheetERP({
  idfolio: foglioId,
  filtriGlobali: globalFilters.filtri,
  sorgentiConfig: computed(() => erp.sorgentiAttive.value.map((s) => s.config)),
})

const versioni = useSpreadsheetVersioni()

// Carica al mount, monta l'adapter su un container DOM custom
// ...
</script>

Sotto-pagine