feat(components): ✨ 💩 Aggiunto wrapper data table

Necessita miglioramenti

.idea/inspectionProfiles/Project_Default.xml

@@ -74,12 +74,13 @@
     <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="5">
+          <list size="6">
             <item index="0" class="java.lang.String" itemvalue="slot" />
             <item index="1" class="java.lang.String" itemvalue="class" />
             <item index="2" class="java.lang.String" itemvalue="tabindex" />
             <item index="3" class="java.lang.String" itemvalue="divider" />
             <item index="4" class="java.lang.String" itemvalue="padded" />
+            <item index="5" class="java.lang.String" itemvalue="scope" />
           </list>
         </value>
       </option>

resources/js/Components/DataTable/DataTable.js

@@ -0,0 +1,59 @@
+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}>
+      <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">
+          <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">
+                Righe per pagina
+              </div>
+
+              <mwc-select className="mdc-data-table__pagination-rows-per-page-select">
+                <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>
+                <mwc-list-item value="75">75</mwc-list-item>
+                <mwc-list-item value="100">100</mwc-list-item>
+              </mwc-select>
+            </div>
+
+            <div className="mdc-data-table__pagination-navigation">
+              <div className="mdc-data-table__pagination-total">
+                1‑10 di 100
+              </div>
+              <mwc-icon-button className="mdc-data-table__pagination-button" data-page="first" disabled>
+                <Mdi icon="page_first"/>
+              </mwc-icon-button>
+              <mwc-icon-button className="mdc-data-table__pagination-button" data-page="prev" disabled>
+                <Mdi icon="chevron_left"/>
+              </mwc-icon-button>
+              <mwc-icon-button className="mdc-data-table__pagination-button" data-page="next">
+                <Mdi icon="chevron_right"/>
+              </mwc-icon-button>
+              <mwc-icon-button className="mdc-data-table__pagination-button" data-page="last">
+                <Mdi icon="chevron_last"/>
+              </mwc-icon-button>
+            </div>
+          </div>
+        </div> : ''}
+
+        <div className="mdc-data-table__progress-indicator">
+          <div className="mdc-data-table__scrim"/>
+          <mwc-linear-progress className="mdc-data-table__linear-progress" indeterminate/>
+        </div>
+      </div>
+    </div>;
+    // TODO: Inserire traduzioni
+  }
+}

resources/js/Components/DataTable/TableBody.js

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

resources/js/Components/DataTable/TableCell.js

@@ -0,0 +1,13 @@
+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/TableHead.js

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

resources/js/Components/DataTable/TableHeadCell.js

@@ -0,0 +1,15 @@
+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/TableHeadRow.js

@@ -0,0 +1,9 @@
+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/TableRow.js

@@ -0,0 +1,9 @@
+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>;
+  }
+}