PHPackages galax13a/live4crud-tailwind - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. galax13a/live4crud-tailwind ActiveLibrary[Utility & Helpers](/categories/utility) galax13a/live4crud-tailwind =========================== Scaffold Livewire 4 Components, migrations, factory and CRUD in one command based on database tables. Built for Laravel 13 + Livewire 4 + Tailwind CSS. 00PHP Since Mar 25Pushed 3mo agoCompare [ Source](https://github.com/galax13a/live4crud-tailwind)[ Packagist](https://packagist.org/packages/galax13a/live4crud-tailwind)[ RSS](/packages/galax13a-live4crud-tailwind/feed)WikiDiscussions master Synced 3w ago READMEChangelogDependenciesVersions (1)Used By (0) live4crud-tailwind ================== [](#live4crud-tailwind) **CRUD scaffolding para Laravel · Livewire 4 · PowerGrid 6 · Tailwind CSS** [![Packagist Version](https://camo.githubusercontent.com/59f2b4d1b4d85166aeb97da7111b4365bafbcc8159c0dd6ed0ee0be21f7677e5/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f67616c61783133612f6c69766534637275642d7461696c77696e642e7376673f7374796c653d666c61742d73717561726526636f6c6f723d696e6469676f)](https://packagist.org/packages/galax13a/live4crud-tailwind)[![PHP Version](https://camo.githubusercontent.com/fca6a5abe8cb8ca5a09d7514f79421a5acfc883e66c5e71627c5051291b2c4ce/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322532422d626c75653f7374796c653d666c61742d737175617265)](https://php.net)[![Laravel](https://camo.githubusercontent.com/390f9c7ce65edf31b3e416bedf9d4bcea8a6a13682b72c6dd64f229ad12eb7ef/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d313125323025374325323031322d7265643f7374796c653d666c61742d737175617265)](https://laravel.com)[![Livewire](https://camo.githubusercontent.com/0e3338654763cb405ec9eddbcf58dfa41d1fd7aeb5e2a1831bc3d14f31dfc443/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c697665776972652d33253230253743253230342d70696e6b3f7374796c653d666c61742d737175617265)](https://livewire.laravel.com)[![PowerGrid](https://camo.githubusercontent.com/24e8b06271d2a59f458d1ecddef247169340008635e176bb22e7bb0f29a54273/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f506f776572477269642d362d707572706c653f7374796c653d666c61742d737175617265)](https://livewire-powergrid.com)[![License: MIT](https://camo.githubusercontent.com/152aa2a37725b9fd554b28ff24d270f6071c67927a63e6d635a55c8e188e20c7/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e3f7374796c653d666c61742d737175617265)](LICENSE.md) Genera un CRUD completo a partir de cualquier tabla de base de datos con **un solo comando**. Modelo Eloquent · componente Livewire · tabla PowerGrid · vistas Blade · Factory · rutas. --- Tabla de contenidos ------------------- [](#tabla-de-contenidos) 1. [Requisitos](#requisitos) 2. [Instalación](#instalaci%C3%B3n) 3. [Configuración inicial](#configuraci%C3%B3n-inicial) 4. [Generar un CRUD](#generar-un-crud) 5. [Archivos generados](#archivos-generados) 6. [Detección automática](#detecci%C3%B3n-autom%C3%A1tica) 7. [Arquitectura y flujo de eventos](#arquitectura-y-flujo-de-eventos) 8. [Configuración](#configuraci%C3%B3n) 9. [Tailwind CSS](#tailwind-css) 10. [PowerGrid — tabla de datos](#powergrid--tabla-de-datos) 11. [Personalizar stubs](#personalizar-stubs) 12. [Ejemplo de salida completa](#ejemplo-de-salida-completa) 13. [Preguntas frecuentes](#preguntas-frecuentes) 14. [Licencia](#licencia) --- Requisitos ---------- [](#requisitos) DependenciaVersión mínimaPHP8.2Laravel11 ó 12Livewire3 ó 4PowerGrid6.0Tailwind CSS3 ó 4Alpine.js3 (incluido con Livewire)> **Nota:** PHP 8.1 no está soportado. El paquete usa `readonly` properties y otros features de PHP 8.2. --- Instalación ----------- [](#instalación) ### 1 · Instalar el paquete vía Composer [](#1--instalar-el-paquete-vía-composer) ``` composer require galax13a/live4crud-tailwind ``` El paquete se auto-registra gracias al *package discovery* de Laravel. No es necesario agregar nada al `config/app.php`. ### 2 · Verificar que Livewire y PowerGrid están instalados [](#2--verificar-que-livewire-y-powergrid-están-instalados) Si no los tienes aún: ``` composer require livewire/livewire "^3.0|^4.0" composer require power-components/livewire-powergrid "^6.0" ``` ### 3 · Ejecutar el instalador del paquete [](#3--ejecutar-el-instalador-del-paquete) ``` php artisan live4crud:install ``` Esto hace automáticamente: AcciónResultadoPublica config propia`config/live4crud.php`Publica config de PowerGrid`config/livewire-powergrid.php`Fuerza tema Tailwind en PowerGrid`'theme' => 'tailwind'`Crea directorios necesarios`app/Livewire/`, `app/Livewire/Tables/`, `app/Models/`, `resources/views/livewire/`Publica layout base`resources/views/layouts/app.blade.php`Marca en rutasAgrega `// live4crud-routes` en `routes/web.php`### 4 · (Opcional) Publicar los stubs para personalizarlos [](#4--opcional-publicar-los-stubs-para-personalizarlos) ``` php artisan vendor:publish --tag=live4crud-stubs # Genera: resources/stubs/live4crud/ ``` --- Configuración inicial --------------------- [](#configuración-inicial) ### Tailwind CSS [](#tailwind-css) Si no tienes Tailwind instalado, sigue la [guía oficial](https://tailwindcss.com/docs/installation). Luego agrega las rutas de las vistas de Livewire al array `content` en `tailwind.config.js`: ``` // tailwind.config.js module.exports = { content: [ './resources/views/**/*.blade.php', './resources/views/livewire/**/*.blade.php', './app/Livewire/**/*.php', ], theme: { extend: {}, }, plugins: [], } ``` ### PowerGrid — tema Tailwind [](#powergrid--tema-tailwind) El instalador ya lo configura, pero puedes verificarlo en `config/livewire-powergrid.php`: ``` 'theme' => \PowerComponents\LivewirePowerGrid\Themes\Tailwind::class, ``` ### Cargar los assets de Livewire en tu layout [](#cargar-los-assets-de-livewire-en-tu-layout) Asegúrate de que tu layout tenga las directivas de Livewire: ``` {{-- resources/views/layouts/app.blade.php --}} ... @livewireStyles ... @livewireScripts ``` > El layout publicado por `live4crud:install` ya incluye estas directivas. --- Generar un CRUD --------------- [](#generar-un-crud) > **Importante:** la tabla debe existir en la base de datos antes de ejecutar el comando. Crea y ejecuta tu migración primero. ``` php artisan live4crud:generate {tabla} ``` El comando te preguntará qué layout usar: ``` Layout: [0] layouts.app [1] layouts.admin ``` ### Ejemplos [](#ejemplos) ``` # Tabla simple php artisan live4crud:generate products # Tabla con relación (tiene columna user_id) php artisan live4crud:generate orders # Tabla con FK a otra tabla php artisan live4crud:generate order_items # Tabla con enums php artisan live4crud:generate invoices ``` --- Archivos generados ------------------ [](#archivos-generados) Usando `php artisan live4crud:generate products` como ejemplo: ``` app/ ├── Models/ │ └── Product.php ← Modelo Eloquent con relaciones auto-detectadas └── Livewire/ ├── Products.php ← Componente Livewire: modal + store/update/destroy └── Tables/ └── ProductTable.php ← Tabla PowerGrid: búsqueda, filtros, paginación database/ └── factories/ └── ProductFactory.php ← Factory con datos Faker según tipo de columna resources/ └── views/ └── livewire/ └── products/ ├── index.blade.php ← Página principal (@extends layout + @livewire) ├── view.blade.php ← Vista del componente: header + tabla + modal └── modals.blade.php ← Modal crear/editar con campos Tailwind routes/ └── web.php ← Ruta agregada: GET /products ``` ### Ruta generada [](#ruta-generada) ``` // routes/web.php (agregado automáticamente) Route::get('/products', fn() => view('livewire.products.index'))->name('products.index'); ``` Accede en: `http://tu-app.test/products` --- Detección automática -------------------- [](#detección-automática) El generador inspecciona el esquema de la base de datos y adapta el código generado: ### Tipos de columna → campo de formulario [](#tipos-de-columna--campo-de-formulario) Tipo de columnaCampo generado`varchar`, `string````int`, `bigint````decimal`, `float````text`, `longtext````date````datetime`, `timestamp````enum(...)``` con todas las opciones del enum`tinyint` / columna `active`Toggle switch Tailwindcolumna `enable` / `enabled`Toggle switch verde Tailwind### Relaciones detectadas automáticamente [](#relaciones-detectadas-automáticamente) CondiciónResultado en el modeloLa tabla tiene FK hacia otra tabla`belongsTo()` generadoOtra tabla tiene FK apuntando a esta`hasMany()` o `hasOne()`Columna `parent_id` en la misma tabla`parent()` + `children()` (árbol)Columna `user_id` presenteScope de usuario (`where user_id = auth()->id()`)### Tipos de filtro PowerGrid auto-generados [](#tipos-de-filtro-powergrid-auto-generados) Tipo de columnaFiltro PowerGrid`varchar`, `string``Filter::inputText()`FK a otra tabla`Filter::select()` con datos del modelo relacionado`enum``Filter::select()` con opciones del enum`tinyint` / booleano`Filter::boolean()``date`, `datetime``Filter::datepicker()`--- Arquitectura y flujo de eventos ------------------------------- [](#arquitectura-y-flujo-de-eventos) El paquete genera **dos componentes** que se coordinan mediante eventos Livewire: ``` ┌─────────────────────────────────────────┐ │ resources/views/livewire/ │ │ products/view.blade.php │ │ │ │ ┌──────────────────────────────────┐ │ │ │ App\Livewire\Tables\ProductTable│ │ ← PowerGrid │ │ • Búsqueda global │ │ • Columnas ordenables │ │ • Filtros por columna │ │ • Paginación │ │ • [Editar] [Eliminar] │ │ • Toggle columnas │ └──────┬──────────────┬────────────┘ │ • Responsive │ │ │ │ │ dispatch dispatch │ │ live4crud-edit live4crud-delete │ │ │ │ │ │ ▼ ▼ │ │ ┌──────────────────────────────────┐ │ │ │ App\Livewire\Products │ │ ← Livewire CRUD │ │ #[On('live4crud-edit')] │ │ • Abre modal │ │ #[On('live4crud-delete')] │ │ • store() / update() │ │ • Modal crear / editar │ │ • destroy() │ └──────────────────────────────────┘ │ • Validación │ │ │ │ dispatch pg:eventRefresh-ProductTable │ │ │ │ │ └──→ PowerGrid refresca sólo ───┘ └─────────────────────────────────────────┘ ``` ### Paso a paso del flujo [](#paso-a-paso-del-flujo) 1. El usuario hace clic en **"Editar"** en la tabla PowerGrid 2. PowerGrid ejecuta `Button::add('edit')->dispatch('live4crud-edit', ['id' => $row->id])` 3. El componente `Products.php` recibe el evento gracias a `#[On('live4crud-edit')]` 4. Se abre el modal con los datos del registro 5. El usuario guarda → `update()` se ejecuta 6. Al finalizar, se llama a `$this->dispatch('pg:eventRefresh-ProductTable')` 7. PowerGrid refresca la tabla automáticamente sin recargar la página --- Configuración ------------- [](#configuración) Publica el archivo de configuración: ``` php artisan vendor:publish --tag=live4crud-config ``` `config/live4crud.php`: ``` return [ /* | Ruta a los stubs personalizados. | 'default' usa los stubs del paquete. | Usa resource_path('stubs/live4crud') si los publicaste. */ 'stubs_path' => 'default', /* | Layout Blade que extenderán las vistas generadas. */ 'app_layout' => 'layouts.app', /* | Namespace para los modelos generados. */ 'model_namespace' => 'App\Models', /* | Namespace para los componentes Livewire generados. */ 'livewire_namespace' => 'App\Livewire', /* | Columnas que se excluyen de los formularios, fillable y vistas. */ 'unwanted_columns' => [ 'id', 'password', 'email_verified_at', 'remember_token', 'created_at', 'updated_at', 'deleted_at', ], ]; ``` --- Tailwind CSS ------------ [](#tailwind-css-1) ### Instalación rápida con Vite (recomendado para producción) [](#instalación-rápida-con-vite-recomendado-para-producción) ``` npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` `tailwind.config.js`: ``` module.exports = { content: [ './resources/views/**/*.blade.php', './resources/views/livewire/**/*.blade.php', './app/Livewire/**/*.php', ], theme: { extend: {} }, plugins: [], } ``` `resources/css/app.css`: ``` @tailwind base; @tailwind components; @tailwind utilities; ``` `vite.config.js`: ``` import { defineConfig } from 'vite' import laravel from 'laravel-vite-plugin' export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true }), ], }) ``` En tu layout: ``` @vite(['resources/css/app.css', 'resources/js/app.js']) ``` ### CDN (sólo para desarrollo / pruebas) [](#cdn-sólo-para-desarrollo--pruebas) El layout publicado por `live4crud:install` ya incluye el CDN de Tailwind para que funcione inmediatamente: ``` ``` > Reemplaza el CDN por Vite antes de ir a producción. --- PowerGrid — tabla de datos -------------------------- [](#powergrid--tabla-de-datos) La tabla generada en `app/Livewire/Tables/{Model}Table.php` extiende `PowerGridComponent` e incluye: ### Búsqueda global [](#búsqueda-global) Habilitada con `Header::make()->showSearchInput()`. Busca en todas las columnas marcadas con `->searchable()`. ### Filtros por columna [](#filtros-por-columna) ``` public function filters(): array { return [ Filter::inputText('name')->placeholder('Buscar por nombre'), Filter::select('category_id') ->dataSource(Category::all()) ->optionLabel('name') ->optionValue('id'), Filter::boolean('active'), Filter::datepicker('created_at'), ]; } ``` ### Botones de acción [](#botones-de-acción) Los botones despachan eventos Livewire que recibe el componente CRUD: ``` public function actions(Product $row): array { return [ Button::add('edit') ->slot('Editar') ->dispatch('live4crud-edit', ['id' => $row->id]), Button::add('delete') ->slot('Eliminar') ->dispatch('live4crud-delete', ['id' => $row->id]), ]; } ``` ### Añadir más columnas manualmente [](#añadir-más-columnas-manualmente) Edita `app/Livewire/Tables/ProductTable.php`: ``` public function columns(): array { return [ Column::make('ID', 'id')->sortable()->hidden(), Column::make('Nombre', 'name')->sortable()->searchable(), Column::make('Precio', 'price')->sortable(), // Columna de relación (eager load en datasource) Column::make('Categoría', 'category_name')->sortable()->searchable(), Column::action('Acciones'), ]; } public function datasource(): Builder { return Product::query()->with('category') ->join('categories', 'categories.id', '=', 'products.category_id') ->select('products.*', 'categories.name as category_name'); } ``` ### Exportar a Excel / CSV [](#exportar-a-excel--csv) Instala el paquete de exportación de PowerGrid: ``` composer require power-components/livewire-powergrid-export ``` Y agrega en `setUp()`: ``` use PowerComponents\LivewirePowerGrid\Exportable; public function setUp(): array { return [ Exportable::make('reporte-products') ->striped() ->type(Exportable::TYPE_XLS, Exportable::TYPE_CSV), Header::make()->showSearchInput()->showToggleColumns(), Footer::make()->showPerPage()->showRecordCount(), Responsive::make(), ]; } ``` --- Personalizar stubs ------------------ [](#personalizar-stubs) Puedes modificar completamente el código generado publicando los stubs: ``` php artisan vendor:publish --tag=live4crud-stubs # → resources/stubs/live4crud/ ``` Estructura de los stubs publicados: ``` resources/stubs/live4crud/ ├── Model.stub ← Modelo Eloquent estándar ├── ModelUser.stub ← Modelo con scope de usuario ├── Livewire.stub ← Componente Livewire (modal + CRUD) ├── LivewireUser.stub ← Componente Livewire con filtro por user_id ├── PowerGridTable.stub ← Tabla PowerGrid estándar ├── PowerGridTableUser.stub ← Tabla PowerGrid filtrada por usuario ├── Factory.stub ← Factory Faker └── views/ ├── index.stub ← Página principal ├── view.stub ← Vista con tabla y header ├── modals.stub ← Modal crear/editar ├── form-field.stub ← Input texto/número ├── form-field-date.stub ← Input fecha ├── form-field-active.stub ← Toggle boolean (active) ├── form-field-enable.stub ← Toggle boolean (enable) ├── form-field-enum-table.stub ← Select con opciones enum └── form-field-select-table.stub ← Select con datos de otra tabla (FK) ``` Luego indica al paquete que use tus stubs personalizados en `config/live4crud.php`: ``` 'stubs_path' => resource_path('stubs/live4crud'), ``` --- Ejemplo de salida completa -------------------------- [](#ejemplo-de-salida-completa) ### Migración de ejemplo [](#migración-de-ejemplo) ``` Schema::create('products', function (Blueprint $table) { $table->id(); $table->foreignId('category_id')->constrained(); $table->string('name'); $table->text('description')->nullable(); $table->decimal('price', 10, 2); $table->enum('status', ['draft', 'active', 'archived'])->default('draft'); $table->boolean('active')->default(true); $table->date('available_at')->nullable(); $table->timestamps(); }); ``` ``` php artisan migrate php artisan live4crud:generate products ``` ### Modelo generado — `app/Models/Product.php` [](#modelo-generado--appmodelsproductphp) ```