@pigreco/jsutils (1.1.5)

Published 2026-05-26 10:16:28 +02:00 by pigreco

Setup this registry in your project .npmrc file:

@pigreco:registry=

To install the package using npm, run the following command:

npm install @pigreco/jsutils@1.1.5

or add it to the package.json file:

"@pigreco/jsutils": "1.1.5"

For more information on the npm registry, see the documentation.

@pigreco/jsutils

Collezione di utility JavaScript per applicazioni web con Bootstrap 5, jQuery, e librerie comuni.

Installazione

npm install @pigreco/jsutils

Dipendenze

jQuery ^3.7.1
Bootstrap 5 (peer dependency)
SweetAlert2 ^11.10.0
Notyf ^3.10.0
BlockUI ^1.0.0
XLSX ^0.18.5
ApexCharts (opzionale, per initApexChart)

Inizializzazione

import jsutils from '@pigreco/jsutils';

// Inizializza tutte le utility in un colpo solo
jsutils.pgInit();

Oppure inizializza solo le utility necessarie:

jsutils.initForm();
jsutils.initModal();
jsutils.initTable();
// ...

API Reference

`pgInit()`

Inizializza tutte le utility: ajax, apexcharts, excel, form, modal, offcanvas, tooltip, table, pgsort.

`initAjax()`

Abilita il caricamento di contenuti HTML via AJAX usando data attributes.

Data attributes:

Attributo	Descrizione
`data-pg-ajax`	URL da caricare via AJAX
`data-pg-ajax-target`	Selettore jQuery dell'elemento da popolare

Esempio:

<button data-pg-ajax="/api/contenuto" data-pg-ajax-target="#risultato">
  Carica
</button>
<div id="risultato"></div>

`alertConfirm(message, callback)`

Mostra una dialog di conferma SweetAlert2 con localizzazione italiana.

Parametri:

Parametro	Tipo	Default	Descrizione
`message`	String	`'Sei sicuro?'`	Testo della dialog
`callback`	Function	—	Riceve `true` se confermato, `false` se annullato

Esempio:

alertConfirm('Vuoi eliminare questo elemento?', (confermato) => {
  if (confermato) {
    // procedi con l'eliminazione
  }
});

Disponibile anche come window.alertConfirm.

`initApexChart()`

Aggiunge il plugin jQuery $.fn.apexCharts() per la creazione di grafici via AJAX.

Plugin jQuery:

$('#grafico').apexCharts({
  type: 'line',       // tipo di grafico (default: "line")
  ajaxtype: 'get',    // metodo HTTP (default: "get")
  ajaxurl: '/api/chart-config'  // URL da cui caricare la configurazione
});

`blockuiDefaults`

Oggetto con i default di BlockUI già configurati (loader centrato, overlay semitrasparente, animazioni).

`constants`

Costanti HTML condivise.

Costante	Descrizione
`SPINNER_SM`	Spinner Bootstrap piccolo (`spinner-border-sm`)
`SPINNER_BLU`	Spinner Bootstrap blu (`text-blue`)

import jsutils from '@pigreco/jsutils';
const { SPINNER_SM } = jsutils.constants;

Disponibile anche come window.constants.

`initExcel()`

Abilita l'esportazione di tabelle HTML in file Excel (o CSV) tramite XLSX.

Data attributes sul bottone di export:

Attributo	Default	Descrizione
`data-pgexcel-table`	—	ID della tabella da esportare
`data-pgexcel-filename`	ID tabella	Nome del file di output
`data-pgexcel-type`	`xlsx`	Tipo file (`xlsx`, `csv`, ...)
`data-pgexcel-sheet`	`sheet1`	Nome del foglio

Nota: Le colonne con data-hide="true" vengono escluse dall'export. I valori con € o % vengono convertiti automaticamente in numeri.

Esempio:

<button
  data-pgexcel-table="tabellaOrdini"
  data-pgexcel-filename="ordini-2024"
  data-pgexcel-sheet="Ordini">
  Esporta Excel
</button>
<table id="tabellaOrdini">...</table>

`initForm()`

Gestisce l'invio di form via AJAX con validazione e notifiche.

Data attributes sul bottone di submit:

Attributo	Descrizione
`data-pg-form`	Selettore jQuery del form
`data-pg-form-success`	Codice JS da eseguire in caso di successo
`data-pg-form-before`	Codice JS da eseguire prima dell'invio (ritorna `false` per annullare)
`data-pg-form-notify`	`"true"` per usare notifiche Notyf invece del toast
`data-pg-form-toast`	`"false"` per disabilitare il toast
`data-pg-form-title`	Titolo personalizzato per la risposta

Risposta JSON attesa dal server:

{
  "error": false,
  "message": "Operazione completata",
  "validations": {}
}

Se validations contiene errori, i campi vengono marcati con classe is-invalid.

Esempio:

<form id="mioForm" method="POST" action="/api/salva">
  <input name="nome" type="text">
</form>
<button
  data-pg-form="#mioForm"
  data-pg-form-success="location.reload()">
  Salva
</button>

`initModal()` / `openPgModal(options)`

Carica contenuti in modal Bootstrap 5 via AJAX.

initModal() attiva il comportamento su elementi con data-pgmodal-ajax.

openPgModal(options) apre programmaticamente una modal:

Opzione	Tipo	Descrizione
`url`	String	URL da cui caricare il contenuto
`title`	String	Titolo da impostare in `.modal-title`
`target`	String	Selettore jQuery del contenitore modal
`destinationClass`	String	Classe custom per il body (default: `.pg-modal-body`)
`params`	Object	Parametri query string aggiuntivi

Esempio con data attribute:

<button data-pgmodal-ajax="/form/modifica/1" data-target="#myModal" data-title="Modifica">
  Apri Modal
</button>

Esempio programmatico:

openPgModal({
  url: '/form/modifica/1',
  title: 'Modifica elemento',
  target: '#myModal',
  params: { id: 1 }
});

openPgModal disponibile anche come window.openPgModal.

`notifiche`

Istanza Notyf preconfigurata (durata 2500ms, posizione in alto a destra).

import jsutils from '@pigreco/jsutils';
jsutils.notifiche.success('Operazione completata!');
jsutils.notifiche.error('Si è verificato un errore.');

Disponibile anche come window.notifiche.

`initOffcanvas()` / `openPgOffcanvas(options)`

Carica contenuti in pannelli offcanvas Bootstrap 5 via AJAX.

initOffcanvas() attiva il comportamento su elementi con data-pgoffcanvas-ajax.

openPgOffcanvas(options) apre programmaticamente un offcanvas:

Opzione	Tipo	Descrizione
`url`	String	URL da cui caricare il contenuto
`title`	String	Titolo da impostare in `.offcanvas-title`
`target`	String	Selettore jQuery del contenitore offcanvas
`width`	String	Classe CSS per la larghezza (es. `offcanvas-sm`)
`params`	Object	Parametri query string aggiuntivi

Esempio:

openPgOffcanvas({
  url: '/dettaglio/1',
  title: 'Dettaglio',
  target: '#sidePanel',
  width: 'offcanvas-lg'
});

openPgOffcanvas disponibile anche come window.openPgOffcanvas.

`$.pgajax(options)`

Plugin jQuery per chiamate AJAX con supporto CSRF, blocking UI e notifiche automatiche.

Opzione	Default	Descrizione
`url`	`"/"`	URL della richiesta
`method`	`"get"`	Metodo HTTP
`data`	`{}`	Dati da inviare
`htmlTarget`	`""`	Selettore jQuery dell'elemento da popolare con la risposta
`afterSuccess`	`console.log`	Callback di successo
`beforeSend`	—	Hook pre-invio personalizzato
`success`	—	Handler successo personalizzato
`error`	—	Handler errore personalizzato
`complete`	—	Handler completamento personalizzato

Il token CSRF viene iniettato automaticamente dai meta tag della pagina.

Esempio:

$.pgajax({
  url: '/api/dati',
  method: 'post',
  data: { id: 42 },
  htmlTarget: '#risultato',
  afterSuccess: (data) => console.log('Fatto!', data)
});

`initPgsort()`

Abilita l'ordinamento dinamico delle colonne di una tabella via AJAX.

Struttura HTML richiesta:

<div class="pgsort-wrapper" data-url="/api/tabella">
  <table>
    <thead>
      <tr>
        <th class="pgsort-col" data-sort-field="nome" data-sort-dir="asc">Nome</th>
        <th class="pgsort-col" data-sort-field="data" data-sort-dir="desc">Data</th>
      </tr>
    </thead>
    <tbody>...</tbody>
  </table>
</div>

Al click su .pgsort-col, viene eseguita una richiesta AJAX all'URL del wrapper con i parametri di ordinamento, e il contenuto del wrapper viene aggiornato.

`initTable()`

Carica dinamicamente il contenuto di una tabella via AJAX.

Data attributes:

Attributo	Descrizione
`data-pgtable-ajax`	URL da cui caricare il contenuto
`data-pgtable-ajax-target`	Selettore jQuery dell'elemento da popolare
`data-pgtable-ajax-params`	Parametri query string aggiuntivi

Esempio:

<button
  data-pgtable-ajax="/api/tabella"
  data-pgtable-ajax-target="#wrapper">
  Ricarica
</button>
<div id="wrapper">
  <table>...</table>
</div>

`initTooltips()`

Abilita i tooltip Bootstrap 5 con inizializzazione lazy (al primo hover).

<span data-toggle="tooltip" title="Testo del tooltip">Hover su di me</span>

initTooltips disponibile anche come window.initTooltips.

Oggetti globali (`window`)

Le seguenti utility vengono esposte su window automaticamente all'import:

Variabile	Tipo	Descrizione
`alertConfirm`	Function	Dialog di conferma SweetAlert2
`openPgModal`	Function	Apertura programmatica di modal
`openPgOffcanvas`	Function	Apertura programmatica di offcanvas
`notifiche`	Notyf	Sistema di notifiche
`constants`	Object	Costanti HTML condivise
`initTooltips`	Function	Inizializzazione tooltip Bootstrap

Licenza

MIT

Dependencies

ID	Version
blockui	^1.0.0
jquery	^3.7.1
notyf	^3.10.0
sweetalert2	^11.10.0
xlsx	^0.18.5

Details

npm

2026-05-26 10:16:28 +02:00

MIT

latest

8.3 KiB

Assets (1)

jsutils-1.1.5.tgz 8.3 KiB

Versions (21) View all

1.1.5

2026-05-26

1.0.19

2026-04-23

1.0.18

2026-03-30

1.0.17

2026-03-23

1.0.16

2026-03-11

@pigreco/jsutils (1.1.5)

Installation

About this package

@pigreco/jsutils

Installazione

Dipendenze

Inizializzazione

API Reference

`pgInit()`

`initAjax()`

`alertConfirm(message, callback)`

`initApexChart()`

`blockuiDefaults`

`constants`

`initExcel()`

`initForm()`

`initModal()` / `openPgModal(options)`

`notifiche`

`initOffcanvas()` / `openPgOffcanvas(options)`

`$.pgajax(options)`

`initPgsort()`

`initTable()`

`initTooltips()`

Oggetti globali (`window`)

Licenza

Dependencies

@pigreco/jsutils (1.1.5)

Installation

About this package

@pigreco/jsutils

Installazione

Dipendenze

Inizializzazione

API Reference

pgInit()

initAjax()

alertConfirm(message, callback)

initApexChart()

blockuiDefaults

constants

initExcel()

initForm()

initModal() / openPgModal(options)

notifiche

initOffcanvas() / openPgOffcanvas(options)

$.pgajax(options)

initPgsort()

initTable()

initTooltips()

Oggetti globali (window)

Licenza

Dependencies

`pgInit()`

`initAjax()`

`alertConfirm(message, callback)`

`initApexChart()`

`blockuiDefaults`

`constants`

`initExcel()`

`initForm()`

`initModal()` / `openPgModal(options)`

`notifiche`

`initOffcanvas()` / `openPgOffcanvas(options)`

`$.pgajax(options)`

`initPgsort()`

`initTable()`

`initTooltips()`

Oggetti globali (`window`)