support v4-beta

Author: icetalker

.gitignore

@@ -12,3 +12,4 @@ testbench.yaml
 vendor
 node_modules
 .php-cs-fixer.cache
+package-lock.json

README.md

@@ -48,7 +48,7 @@ protected function form(Form $form): Form
                 ->collapsible()
                 ->minItems(3)
                 ->maxItems(5)
-                ->columnSpan('full'),
+                ->columnSpanFull(),
 
     ]);
 }
@@ -119,28 +119,9 @@ protected function form(Form $form): Form
 }
 ```
 
-## Style customization
+## Alternative
 
-Besides the `colStyles()` method mentioned above, we use few css classes to provide extra ability for style customization. These classes were so called CSS "hook" classes. They are prefixed with `it-`(short for `icetalker`, which is the vendor name). Although we already have hook classes in old version, it's never been documented here. And for now, we rename these hook name by the new prefix `it-`:
-
-- `it-table-repeater` instead of `filament-table-repeater` in old version: As what you can tell from the class name, it allows you to customize the style for the whole table.
-- `it-table-repeater-cell-label` instead of `filament-table-repeater-header-cell` in old version: As what you can tell from the class name, it allows you to customize the style for the label of each column.
-- `it-table-repeater-cell` instead of `filament-table-repeater-tbody-cell` in old version: As what you can tell from the class name, it allows you to customize the style for the cell of each column.
-- `it-table-repeater-row`. This is new hook class, so that you can customize the style for each row. 
-
-You may add CSS to these classes in your `app.css` file, and filled with your own styles like this:
-
-```css
-.it-table-repeater-cell-label {
-    background-color: #fafafa;
-}
-```
-
-## Testing
-
-```bash
-composer test
-```
+Since Filament v4, `Reapeater` Component has it own `table()` method. You could use it to achieve the same function if you are using the latest version.
 
 ## Changelog
 

composer.json

@@ -17,10 +17,9 @@
         }
     ],
     "require": {
-        "php": "^8.0",
-        "filament/forms": "^3.0",
-        "spatie/laravel-package-tools": "^1.9.2",
-        "illuminate/contracts": "^8.6|^9.0|^10.0|^11.0|^12.0"
+        "php": "~8.2",
+        "filament/forms": "~4.0",
+        "spatie/laravel-package-tools": "^1.9.2"
     },
     "require-dev": {
         "friendsofphp/php-cs-fixer": "^3.8",

config/filament-table-repeater.php

@@ -0,0 +1,16 @@
+{
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build:css": "npx @tailwindcss/cli -i resources/css/table-repeater.css -o dist/css/table-repeater.css --postcss --minify",
+    "build": "npm run build:css"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.16",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "postcss-nesting": "^13.0.2",
+    "tailwindcss": "^4.1.11"
+  }
+}

dist/css/table-repeater.css

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package.json

@@ -0,0 +1,65 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+.it-table-repeater  {
+    @apply bg-white border border-gray-200 shadow-sm rounded-xl relative dark:bg-gray-800 dark:border-gray-600;
+
+    & .it-table-repeater-header{
+        @apply flex items-center h-10 overflow-hidden border-b border-gray-100 bg-gray-50 rounded-t-xl dark:bg-gray-800 dark:border-gray-700;
+
+        & :first-child{
+            @apply flex-1;
+        }
+
+        & > div {
+            
+            & .it-table-repeater-btn-collapse{
+                @apply flex items-center justify-center flex-none w-10 h-10 text-gray-400 transition hover:text-gray-300 dark:text-gray-400 dark:hover:text-gray-500;
+            }
+        }
+        
+    }
+
+    & > div{
+        & > table {
+            @apply w-full text-left rtl:text-right table-auto mx-4;
+
+
+            & > thead {
+                & > tr {
+                    & > th {
+                        @apply p-2;
+                    }
+                }
+            }
+            
+            & >tbody{
+                & > tr {
+                    & > td {
+                        @apply px-1 py-2 align-top;
+                    }
+
+                    & .it-table-repeater-actions{
+                        @apply flex items-center gap-x-3 py-2 px-1;
+                    }
+
+                }
+            }
+        }
+
+        & .it-table-repeater-collapsed {
+            @apply p-2 text-xs text-center text-gray-400;
+        }
+
+    }
+
+    & .it-table-repeater-add {
+        @apply flex py-2 px-8
+    }
+    
+}
+
+.it-hidden{
+    @apply hidden
+}