Add table component
This commit is contained in:
parent
42b628b165
commit
dc7d0d1354
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -11,6 +11,7 @@
|
||||||
"@editorjs/paragraph": "^2.11.3",
|
"@editorjs/paragraph": "^2.11.3",
|
||||||
"@inertiajs/vue3": "^1.0.14",
|
"@inertiajs/vue3": "^1.0.14",
|
||||||
"@ryangjchandler/alpine-tooltip": "^2.0.1",
|
"@ryangjchandler/alpine-tooltip": "^2.0.1",
|
||||||
|
"@tailwindcss/container-queries": "^0.1.1",
|
||||||
"@tailwindcss/forms": "^0.5.7",
|
"@tailwindcss/forms": "^0.5.7",
|
||||||
"@tailwindcss/typography": "^0.5.10",
|
"@tailwindcss/typography": "^0.5.10",
|
||||||
"@vitejs/plugin-vue": "^4.6.2",
|
"@vitejs/plugin-vue": "^4.6.2",
|
||||||
|
@ -998,6 +999,14 @@
|
||||||
"tippy.js": "^6.3.1"
|
"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": {
|
"node_modules/@tailwindcss/forms": {
|
||||||
"version": "0.5.7",
|
"version": "0.5.7",
|
||||||
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
|
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
|
||||||
|
|
|
@ -30,6 +30,7 @@
|
||||||
"@editorjs/paragraph": "^2.11.3",
|
"@editorjs/paragraph": "^2.11.3",
|
||||||
"@inertiajs/vue3": "^1.0.14",
|
"@inertiajs/vue3": "^1.0.14",
|
||||||
"@ryangjchandler/alpine-tooltip": "^2.0.1",
|
"@ryangjchandler/alpine-tooltip": "^2.0.1",
|
||||||
|
"@tailwindcss/container-queries": "^0.1.1",
|
||||||
"@tailwindcss/forms": "^0.5.7",
|
"@tailwindcss/forms": "^0.5.7",
|
||||||
"@tailwindcss/typography": "^0.5.10",
|
"@tailwindcss/typography": "^0.5.10",
|
||||||
"@vitejs/plugin-vue": "^4.6.2",
|
"@vitejs/plugin-vue": "^4.6.2",
|
||||||
|
|
|
@ -5,6 +5,5 @@
|
||||||
@import 'base.css';
|
@import 'base.css';
|
||||||
@import 'layout';
|
@import 'layout';
|
||||||
@import 'buttons';
|
@import 'buttons';
|
||||||
@import 'table';
|
|
||||||
@import 'bool';
|
@import 'bool';
|
||||||
@import 'editor';
|
@import 'editor';
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
|
@ -29,5 +29,5 @@ module.exports = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
|
plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms'), require('@tailwindcss/container-queries')],
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue