silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Add table component

This commit is contained in:
philipp lang 2024-10-16 23:03:04 +02:00
parent 17f3aff307
commit e4d1df6a28
6 changed files with 42 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/View/Ui/Table.php Normal file
View File

@ -0,0 +1,31 @@
<?php
namespace App\View\Ui;
use Illuminate\View\Component;
class Table extends Component
{
public function __construct(public string $mode = 'dark')
{
}
public function render()
{
return <<<'HTML'
<div class="@container/table">
<table cellpadding="0" cellspacing="0" border="0" class="w-full @if ($mode === 'dark') table-dark @else table-light @endif
[&_th]:text-left [&_th]:px-2 [&_th]:@4xl/table:px-6 [&_th]:text-gray-200 [&_th]:font-semibold [&_th]:py-3 [&_th]:border-gray-600 [&_th]:border-b
[&_tbody_tr]:text-gray-200 [&_tbody_tr]:duration-300 [&_tbody_tr]:rounded [&_tbody_tr:hover]:bg-gray-800
[&_tr_td]:py-1 [&_tr_td]:px-2 [&_tr_td]:@4xl/table:px-6
[&.table-light_th]:border-gray-500 [&.table-light_tbody_tr:hover]:bg-gray-700
">
{{ $slot }}
</table>
</div>
HTML;
}
}

9
package-lock.json generated
View File

@ -11,6 +11,7 @@
"@editorjs/paragraph": "^2.11.3",
"@inertiajs/vue3": "^1.0.14",
"@ryangjchandler/alpine-tooltip": "^2.0.1",
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10",
"@vitejs/plugin-vue": "^4.6.2",
@ -998,6 +999,14 @@
"tippy.js": "^6.3.1"
}
},
"node_modules/@tailwindcss/container-queries": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
"integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
"peerDependencies": {
"tailwindcss": ">=3.2.0"
}
},
"node_modules/@tailwindcss/forms": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",

1
package.json
View File

@ -30,6 +30,7 @@
"@editorjs/paragraph": "^2.11.3",
"@inertiajs/vue3": "^1.0.14",
"@ryangjchandler/alpine-tooltip": "^2.0.1",
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.10",
"@vitejs/plugin-vue": "^4.6.2",

1
resources/css/app.css vendored
View File

@ -5,6 +5,5 @@
@import 'base.css';
@import 'layout';
@import 'buttons';
@import 'table';
@import 'bool';
@import 'editor';

42
resources/css/table.css vendored
View File

@ -1,42 +0,0 @@
.custom-table {
width: 100%;
& > thead > th {
@apply text-left px-6 text-gray-200 font-semibold py-3 border-gray-600 border-b;
}
& > tr {
@apply text-gray-200 transition-all duration-300 rounded hover:bg-gray-800;
& > td {
@apply py-1 px-6;
}
}
&.custom-table-sm {
& > thead > th {
@apply px-3 py-2;
}
& > tr {
& > td {
@apply py-1 px-3;
}
}
}
&.custom-table-light {
& > thead > th {
@apply border-gray-500;
}
& > td {
&:hover {
@apply bg-gray-700;
}
}
}
}
.custom-table > * {
display: table-row;
}
.custom-table > * > * {
display: table-cell;
}

2
tailwind.config.js vendored
View File

@ -29,5 +29,5 @@ module.exports = {
},
},
plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms'), require('@tailwindcss/container-queries')],
};