feat: ✨ Sostituito Laravel Mix con Vite

Vite permette di utilizzare i moduli ES6, in modo da caricare le views dei moduli custom tramite Import Maps (automatico). Gli assets devono essere inseriti nella cartella resources/static invece che nella cartella public.
Altri miglioramenti:
- I componenti sono stati migliorati, in modo da utilizzare collect.js (le collections di Laravel in JS) e classnames (per l'aggiunta di classi CSS ai componenti)
- Ogni cartella ha ora un file `index.js` così da poter importare facilmente i componenti nei moduli custom
- Possibilità di aggiungere un titolo nella pagina, definendolo nella route
-

resources/js/Components/DataTable/DataTable.jsx

@@ -1,18 +1,19 @@
 import '@material/mwc-linear-progress';
 import '@material/mwc-list/mwc-list-item';
 import '@material/mwc-select';
+
 import Component from '../Component';
 import Mdi from '../Mdi';
 
 export default class DataTable extends Component {
   view(vnode) {
-    return <div className="mdc-data-table" {...vnode.attrs}>
+    return <div className="mdc-data-table" {...this.attrs.all()}>
       <div className="mdc-data-table__table-container">
         <table className="mdc-data-table__table" aria-label={vnode.attrs['aria-label']}>
           {vnode.children}
         </table>
 
-        {vnode.attrs.paginated ? <div className="mdc-data-table__pagination">
+        {this.attrs.has('paginated') ? <div className="mdc-data-table__pagination">
           <div className="mdc-data-table__pagination-trailing">
             <div className="mdc-data-table__pagination-rows-per-page">
               <div className="mdc-data-table__pagination-rows-per-page-label">
@@ -20,6 +21,8 @@ export default class DataTable extends Component {
               </div>
 
               <mwc-select className="mdc-data-table__pagination-rows-per-page-select">
+                {/* TODO: Rendere dinamico (permetti a chi chiama il componente di
+                scegliere i valori da visualizzare */}
                 <mwc-list-item value="10">10</mwc-list-item>
                 <mwc-list-item value="25">25</mwc-list-item>
                 <mwc-list-item value="50">50</mwc-list-item>
@@ -30,6 +33,7 @@ export default class DataTable extends Component {
 
             <div className="mdc-data-table__pagination-navigation">
               <div className="mdc-data-table__pagination-total">
+                {/* TODO: Aggiungere i18n */}
                 1‑10 di 100
               </div>
               <mwc-icon-button className="mdc-data-table__pagination-button" data-page="first" disabled>
@@ -54,6 +58,5 @@ export default class DataTable extends Component {
         </div>
       </div>
     </div>;
-    // TODO: Inserire traduzioni
   }
 }

resources/js/Components/DataTable/TableBody.jsx

@@ -2,6 +2,6 @@ import Component from '../Component';
 
 export default class TableBody extends Component {
   view(vnode) {
-    return <tbody {...vnode.attrs}>{vnode.children}</tbody>;
+    return <tbody {...this.attrs.all()}>{vnode.children}</tbody>;
   }
 }

resources/js/Components/DataTable/TableCell.js

@@ -1,13 +0,0 @@
-import classnames from 'classnames';
-import Component from '../Component';
-
-/**
- * Attributes:
- * - type: numeric, checkbox
- */
-export default class TableCell extends Component {
-  view(vnode) {
-    this.attrs.className = classnames('mdc-data-table__cell', vnode.attrs.className, `mdc-data-table__cell--${vnode.attrs.type}`);
-    return <td {...this.attrs}>{vnode.children}</td>;
-  }
-}

resources/js/Components/DataTable/TableCell.jsx

@@ -0,0 +1,12 @@
+import Component from '../Component';
+
+/**
+ * Attributes:
+ * - type: numeric, checkbox
+ */
+export default class TableCell extends Component {
+  view(vnode) {
+    this.attrs.addClassNames('mdc-data-table__cell', `mdc-data-table__cell--${this.attrs.get('type')}`);
+    return <td {...this.attrs.all()}>{vnode.children}</td>;
+  }
+}

resources/js/Components/DataTable/TableFooter.jsx

@@ -0,0 +1,7 @@
+import Component from '../Component';
+
+export default class TableFooter extends Component {
+  view(vnode) {
+    return <tfoot {...this.attrs.all()}>{vnode.children}</tfoot>;
+  }
+}

resources/js/Components/DataTable/TableHead.jsx

@@ -2,6 +2,6 @@ import Component from '../Component';
 
 export default class TableHead extends Component {
   view(vnode) {
-    return <thead {...vnode.attrs}>{vnode.children}</thead>;
+    return <thead {...this.attrs.all()}>{vnode.children}</thead>;
   }
 }

resources/js/Components/DataTable/TableHeadCell.js

@@ -1,15 +0,0 @@
-import classnames from 'classnames';
-import Component from '../Component';
-
-/**
- * Attributes:
- * - type: numeric, checkbox
- */
-export default class TableHeadCell extends Component {
-  view(vnode) {
-    this.attrs.className = classnames('mdc-data-table__header-cell', vnode.attrs.className, {
-      [`mdc-data-table__header-cell--${vnode.attrs.type}`]: vnode.attrs.type
-    });
-    return <th {...this.attrs} role="columnheader" scope="col">{vnode.children}</th>;
-  }
-}

resources/js/Components/DataTable/TableHeadCell.jsx

@@ -0,0 +1,14 @@
+import Component from '../Component';
+
+/**
+ * Attributes:
+ * - type: numeric, checkbox
+ */
+export default class TableHeadCell extends Component {
+  view(vnode) {
+    this.attrs.addClassNames('mdc-data-table__header-cell', {
+      [`mdc-data-table__header-cell--${this.attrs.get('type')}`]: this.attrs.has('type')
+    });
+    return <th {...this.attrs.all()} role="columnheader" scope="col">{vnode.children}</th>;
+  }
+}

resources/js/Components/DataTable/TableHeadRow.js

@@ -1,9 +0,0 @@
-import classnames from 'classnames';
-import Component from '../Component';
-
-export default class TableHeadRow extends Component {
-  view(vnode) {
-    this.attrs.className = classnames('mdc-data-table__header-row', vnode.attrs.className);
-    return <tr {...this.attrs}>{vnode.children}</tr>;
-  }
-}

resources/js/Components/DataTable/TableHeadRow.jsx

@@ -0,0 +1,8 @@
+import Component from '../Component';
+
+export default class TableHeadRow extends Component {
+  view(vnode) {
+    this.attrs.addClassNames('mdc-data-table__header-row');
+    return <tr {...this.attrs.all()}>{vnode.children}</tr>;
+  }
+}

resources/js/Components/DataTable/TableRow.js

@@ -1,9 +0,0 @@
-import classnames from 'classnames';
-import Component from '../Component';
-
-export default class TableRow extends Component {
-  view(vnode) {
-    this.attrs.className = classnames('mdc-data-table__row', vnode.attrs.className);
-    return <tr {...this.attrs}>{vnode.children}</tr>;
-  }
-}

resources/js/Components/DataTable/TableRow.jsx

@@ -0,0 +1,8 @@
+import Component from '../Component';
+
+export default class TableRow extends Component {
+  view(vnode) {
+    this.attrs.addClassNames('mdc-data-table__row');
+    return <tr {...this.attrs.all()}>{vnode.children}</tr>;
+  }
+}

resources/js/Components/DataTable/index.js

@@ -0,0 +1,9 @@
+export { default as DataTable } from './DataTable.jsx';
+export { default as TableBody } from './TableBody.jsx';
+export { default as TableCell } from './TableCell.jsx';
+export { default as TableFooter } from './TableFooter.jsx';
+export { default as TableHead } from './TableHead.jsx';
+export { default as TableHeadCell } from './TableHeadCell.jsx';
+export { default as TableHeadRow } from './TableHeadRow.jsx';
+export { default as TableRow } from './TableRow.jsx';
+