From 985b7942c40ad2aed25516c64b6bd9a27fdbcc43 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Wed, 16 Oct 2024 23:03:04 +0200
Subject: [PATCH] Add table component
---
app/View/Ui/Table.php | 31 ++++++++++++++++++++++++++++++
package-lock.json | 9 +++++++++
package.json | 1 +
resources/css/app.css | 1 -
resources/css/table.css | 42 -----------------------------------------
tailwind.config.js | 2 +-
6 files changed, 42 insertions(+), 44 deletions(-)
create mode 100644 app/View/Ui/Table.php
delete mode 100644 resources/css/table.css
diff --git a/app/View/Ui/Table.php b/app/View/Ui/Table.php
new file mode 100644
index 00000000..baf8f18e
--- /dev/null
+++ b/app/View/Ui/Table.php
@@ -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;
+ }
+}
diff --git a/package-lock.json b/package-lock.json
index 94bcd631..ee145d8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
@@ -1026,6 +1027,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.10",
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz",
diff --git a/package.json b/package.json
index ef318bb1..5a6b244a 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/resources/css/app.css b/resources/css/app.css
index f7ca8c23..3c9b4825 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -5,6 +5,5 @@
@import 'base.css';
@import 'layout';
@import 'buttons';
-@import 'table';
@import 'bool';
@import 'editor';
diff --git a/resources/css/table.css b/resources/css/table.css
deleted file mode 100644
index 518bb1bd..00000000
--- a/resources/css/table.css
+++ /dev/null
@@ -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;
-}
diff --git a/tailwind.config.js b/tailwind.config.js
index 4ab5adc1..2a2fae05 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,5 +29,5 @@ module.exports = {
},
},
- plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
+ plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms'), require('@tailwindcss/container-queries')],
};