Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/petrix12/wireui2024
https://github.com/petrix12/wireui2024
Last synced: 8 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/petrix12/wireui2024
- Owner: petrix12
- Created: 2024-01-07T17:48:30.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-05-23T06:34:53.000Z (6 months ago)
- Last Synced: 2024-05-23T07:36:45.001Z (6 months ago)
- Language: PHP
- Size: 1000 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Livewire y WireUI: Crea interfaces web responsivas de forma fácil
+ URL: https://codersfree.com/cursos/livewire-wireui-crea-interfaces-web-responsivas-facil
## Instalación:
+ Página oficial: https://v1.wireui.dev
1. Ejecutar:
+ $ composer require wireui/wireui
2. Modificar plantilla principal **resources\views\layouts\app.blade.php**:
```html
@wireUiScripts
```
3. Modificar el archivo de configuración de tailwind **tailwind.config.js**:
```js
// ...
module.exports = {
presets: [
// ...
require('./vendor/wireui/wireui/tailwind.config.js')
],
// ...
content: [
// ...
'./vendor/wireui/wireui/resources/**/*.blade.php',
'./vendor/wireui/wireui/ts/**/*.ts',
'./vendor/wireui/wireui/src/View/**/*.php'
]
// ...
```
4. Ejecutar:
+ $ npm run dev
5. Publicar archivos de configuración:
+ $ php artisan vendor:publish --tag='wireui.config'
+ **Nota:** publica el archivo de configuración: **config\wireui.php**.
+ $ php artisan vendor:publish --tag='wireui.resources'
+ **Nota:** publica los archivos de recursos en **resources\views\vendor\wireui**.
+ $ php artisan vendor:publish --tag='wireui.lang'
+ **Nota:** publica los archivos de traducción de paquete en **lang\vendor\wireui**.
## Cambiar nombres a componentes de WireUI para evitar conflictos con Jetstream o cualquier otro componente
1. Modificar archivo de configuración **config\wireui.php** (al **alias** del elemento **components** anteponer **wireui.**):
```php
// ...
return [
// ...
'components' => [
'avatar' => [
'class' => Components\Avatar::class,
'alias' => 'wireui.avatar',
],
'icon' => [
'class' => Components\Icon::class,
'alias' => 'wireui.icon',
],
'icon.spinner' => [
'class' => Components\Icons\Spinner::class,
'alias' => 'wireui.icon.spinner',
],
'color-picker' => [
'class' => Components\ColorPicker::class,
'alias' => 'wireui.color-picker',
],
'input' => [
'class' => Components\Input::class,
'alias' => 'wireui.input',
],
'textarea' => [
'class' => Components\Textarea::class,
'alias' => 'wireui.textarea',
],
'label' => [
'class' => Components\Label::class,
'alias' => 'wireui.label',
],
'error' => [
'class' => Components\Error::class,
'alias' => 'wireui.error',
],
'errors' => [
'class' => Components\Errors::class,
'alias' => 'wireui.errors',
],
'inputs.maskable' => [
'class' => Components\Inputs\MaskableInput::class,
'alias' => 'wireui.inputs.maskable',
],
'inputs.phone' => [
'class' => Components\Inputs\PhoneInput::class,
'alias' => 'wireui.inputs.phone',
],
'inputs.currency' => [
'class' => Components\Inputs\CurrencyInput::class,
'alias' => 'wireui.inputs.currency',
],
'inputs.number' => [
'class' => Components\Inputs\NumberInput::class,
'alias' => 'wireui.inputs.number',
],
'inputs.password' => [
'class' => Components\Inputs\PasswordInput::class,
'alias' => 'wireui.inputs.password',
],
'badge' => [
'class' => Components\Badge::class,
'alias' => 'wireui.badge',
],
'badge.circle' => [
'class' => Components\CircleBadge::class,
'alias' => 'wireui.badge.circle',
],
'button' => [
'class' => Components\Button::class,
'alias' => 'wireui.button',
],
'button.circle' => [
'class' => Components\CircleButton::class,
'alias' => 'wireui.button.circle',
],
'dropdown' => [
'class' => Components\Dropdown::class,
'alias' => 'wireui.dropdown',
],
'dropdown.item' => [
'class' => Components\Dropdown\DropdownItem::class,
'alias' => 'wireui.dropdown.item',
],
'dropdown.header' => [
'class' => Components\Dropdown\DropdownHeader::class,
'alias' => 'wireui.dropdown.header',
],
'notifications' => [
'class' => Components\Notifications::class,
'alias' => 'wireui.notifications',
],
'datetime-picker' => [
'class' => Components\DatetimePicker::class,
'alias' => 'wireui.datetime-picker',
],
'time-picker' => [
'class' => Components\TimePicker::class,
'alias' => 'wireui.time-picker',
],
'card' => [
'class' => Components\Card::class,
'alias' => 'wireui.card',
],
'native-select' => [
'class' => Components\NativeSelect::class,
'alias' => 'wireui.native-select',
],
'select' => [
'class' => Components\Select::class,
'alias' => 'wireui.select',
],
'select.option' => [
'class' => Components\Select\Option::class,
'alias' => 'wireui.select.option',
],
'select.user-option' => [
'class' => Components\Select\UserOption::class,
'alias' => 'wireui.select.user-option',
],
'toggle' => [
'class' => Components\Toggle::class,
'alias' => 'wireui.toggle',
],
'checkbox' => [
'class' => Components\Checkbox::class,
'alias' => 'wireui.checkbox',
],
'radio' => [
'class' => Components\Radio::class,
'alias' => 'wireui.radio',
],
'modal' => [
'class' => Components\Modal::class,
'alias' => 'wireui.modal',
],
'modal.card' => [
'class' => Components\ModalCard::class,
'alias' => 'wireui.modal.card',
],
'dialog' => [
'class' => Components\Dialog::class,
'alias' => 'wireui.dialog',
],
],
];
```
2. Ejecutar:
+ $ php artisan optimize:clear
## Preparación del entorno de prueba
1. Crear rutas de prueba en **routes\web.php**:
```php
// ...
use Illuminate\Http\Request;
// ...
// RUTAS DE PRUEBA WIREUI
Route::get('/wireui/forms', function () {
return view('wireui.forms');
})->name('forms');
Route::post('/wireui/forms', function (Request $request) {
$request->validate([
'nombre' => 'required',
'url' => 'required'
]);
return $request->all();
})->name('forms.store');
Route::get('/wireui/tables', function () {
return view('wireui.tables');
})->name('tables');
Route::get('/wireui/livewire', function () {
return view('wireui.livewire');
})->name('livewire');
Route::get('/wireui/actions', function () {
return view('wireui.actions');
})->name('actions');
Route::get('/wireui/ui', function () {
return view('wireui.ui');
})->name('ui');
Route::get('/wireui/dropdown', function () {
return view('wireui.dropdown');
})->name('dropdown');
Route::get('/wireui/modal', function () {
return view('wireui.modal');
})->name('modal');
```
2. Crear rutas de prueba en **routes\api.php**:
```php
// RUTAS DE PRUEBA WIREUI
Route::get('/users', function(Request $request) {
$search = $request->search;
return \App\Models\User::where('name', 'like', "%{$search}%")
->orWhere('email', 'like', "%{$search}%")
->get();
})->name('api.users.index');
Route::get('/users2', function(Request $request) {
$search = $request->search;
return \App\Models\User::where('name', 'like', "%{$search}%")
->orWhere('email', 'like', "%{$search}%")
->when($request->exists('selected'), function($query) use($request) {
$query->whereIn('id', $request->selected)->limit(10);
})
->get();s
})->name('api.users.index2');
Route::get('/users3', function(Request $request) {
return \App\Models\User::when($request->search, function($query, $search) {
$query->where('name', 'like', "%{$search}%")
->orWhere('email', 'like', "%{$search}%");
})->when($request->selected, function($query, $selected) {
$query->whereIn('id', $selected)->limit(10);
})->get();
})->name('api.users.index3');
```
3. Crear vistas de prueba:
+ resources\views\wireui\forms.blade.php:
```php
Formularios
```
+ resources\views\wireui\tables.blade.php:
```php
Tablas
```
+ resources\views\wireui\livewire.blade.php:
```php
Livewire
```
+ resources\views\wireui\actions.blade.php:
```php
Acciones
```
+ resources\views\wireui\ui.blade.php:
```php
UI
```
+ resources\views\wireui\dropdown.blade.php:
```php
Dropdown
```
+ resources\views\wireui\modal.blade.php:
```php
Modal
```
4. Modificar el menú de navegación en **resources\views\navigation-menu.blade.php**.
## Ejemplos vista formularios
+ Modificar seeder **database\seeders\DatabaseSeeder.php**:
```php
// ...
public function run(): void
{
\App\Models\User::factory(100)->create();
\App\Models\User::factory()->create([
'name' => 'Test User',
'email' => '[email protected]',
]);
}
// ...
```
+ Ejecutar seeder:
+ $ php artisan db:seed
+ Diseñar vista **resources\views\wireui\forms.blade.php**:
```php
Formularios
@csrf
{{-- VALIDACIÓN DE ERRORES --}}
Agregar
{{-- INPUTS --}}
{{-- TEXTAREA --}}
{{-- SELECTS --}}
España
Venezuela
Austria
Colombia
Italia
España
Venezuela
Austria
Colombia
Italia
{{-- COLORS --}}
{{-- TOGGLES --}}
{{-- CHECK BOX --}}
{{-- RADIO BUTTONS --}}
{{-- BOTONES --}}
Guardar
Guardar
Guardar
Guardar
```
## Ejemplos vista tablas
+ Instalar Livewire Powergrid:
+ $ composer require power-components/livewire-powergrid
+ Publicar los archivos de configuración:
+ $ php artisan vendor:publish --tag=livewire-powergrid-config
+ **Nota:** se genera un archivo de configuración en **config\livewire-powergrid.php**
+ Crear una tabla (Ejecutar en un terminal de Git Bash):
+ $ php artisan powergrid:create
+ Component Name: UserTable
+ [M]odel or [C]ollection? (default: M): M
+ Model (ex: App\Models\User): App\Models\User
+ Use the based on fillable ? (yes/no) [no]: yes
+ **Nota:** La tabla se crea como un componente de Livewire:
+ Controlador: app\Http\Livewire\UserTable.php
+ Vista: en la vista se llamará con la directiva: @livewire('user-table')
+ Diseñar vista **resources\views\wireui\tables.blade.php**:
```php
Tablas
@livewire('user-table')
```
## Componentes de Livewire
1. Crear componente livewire:
+ $ php artisan make:livewire forms
2. Modificar vista **resources\views\wireui\livewire.blade.php**:
```php
@extends('layouts/layoutMaster')
@section('title', 'Livewire')
@section('page-style')
@endsection
@section('content')
Pruebas livewire
@livewire('forms')
@endsection
```
3. Modificar componente **resources\views\livewire\forms.blade.php**:
```php
{{-- MASCARAS --}}
{{-- CURRENCY --}}
{{-- FECHA y HORA --}}
```
## Acciones
1. Crear componente livewire:
+ $ php artisan make:livewire notification
2. Crear componente livewire:
+ $ php artisan make:livewire dialog
3. Incluir el componente **notifications** en **resources\views\layouts\app.blade.php**:
```php
```
4. Modificar la vista **resources\views\wireui\actions.blade.php**:
```php
@extends('layouts/layoutMaster')
@section('title', 'Acciones')
@section('page-style')
@endsection
@section('content')
Pruebas acciones
Abrir notificación
@livewire('notification')
Abrir diálogo
@livewire('dialog')
@endsection
@section('page-script')
function openNotification() {
window.$wireui.notify({
'title': 'Notificación',
'description': 'Descripción de prueba',
'icon': 'success'
});
}
function openDialogo() {
window.$wireui.dialog({
'title': 'Diálogo',
'description': 'Descripción de prueba',
'icon': 'success'
});
}
@endsection
```
5. Modificar controlador livewire **app\Http\Livewire\Notification.php**:
```php
notification([
'title' => 'Notificación',
'description' => 'Notificación de prueba',
'icon' => 'info'
]);
*/
/*
$this->notification()->success(
$title ='Notificación',
$description = 'Notificación de prueba'
);
*/
$this->notification()->confirm([
'title' => 'Seguro?',
'description' => 'Descripción de prueba',
'icon' => 'question',
'accept' => [
'label' => 'Aceptar',
'method' => 'miMetodo',
'params' => 'prueba'
],
'reject' => [
'label' => 'Cancelar'
]
]);
}
public function miMetodo($params) {
}
public function render()
{
return view('livewire.notification');
}
}
```
6. Modificar vista livewire **resources\views\livewire\notification.blade.php**:
```php
Abrir notificación
```
7. Modificar controlador livewire **app\Http\Livewire\Dialog.php**:
```php
dialog([
'title' => 'Diálogo',
'description' => 'Diálogo de prueba',
'icon' => 'info'
]);
*/
$this->dialog()->confirm([
'title' => 'Seguro?',
'description' => 'Descripción de prueba',
'icon' => 'question',
'accept' => [
'label' => 'Aceptar',
'method' => 'miMetodo',
'params' => 'prueba'
],
'reject' => [
'label' => 'Cancelar'
]
]);
}
public function miMetodo($params) {
}
public function render()
{
return view('livewire.dialog');
}
}
```
8. Modificar vista livewire **resources\views\livewire\dialog.blade.php**:
```php
Abrir diálogo
```
## Componentes UI
1. Modificar vista **resources\views\wireui\ui.blade.php**:
```php
@extends('layouts/layoutMaster')
@section('title', 'UI')
@section('page-style')
@endsection
@section('content')
Pruebas UI
{{-- ICONOS --}}
{{-- Iconos: https://v1.heroicons.com --}}
Iconos
{{-- BADGES --}}
{{-- Badges: https://v1.wireui.dev/docs/badges --}}
Badges
12
20
30
30
30
{{-- AVATARES --}}
{{-- Avatar: https://v1.wireui.dev/docs/avatar --}}
Avatares
@endsection
```
## Componentes Dropdown
1. Modificar vista **resources\views\wireui\dropdown.blade.php**:
```php
@extends('layouts/layoutMaster')
@section('title', 'Dropdown')
@section('page-style')
@endsection
@section('content')
Pruebas Dropdown
Tablas
Dropdown
@endsection
```
## Modal
1. Crear componente livewire **modal**:
+ $ php artisan make:livewire modal
2. Modificar vista **resources\views\wireui\modal.blade.php**:
```php
@extends('layouts/layoutMaster')
@section('title', 'Modal')
@section('page-style')
@endsection
@section('content')
Pruebas Modales
@livewire('modal')
@endsection
```
3. Modificar componente controlador livewire **app\Http\Livewire\Modal.php**:
```php
Abrir modal
{{--
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, eaque reprehenderit nemo
illo magnam alias error! Laboriosam ex unde architecto, libero non impedit similique sunt
repellendus eaque aliquid! Iure, nam?
Cerrar modal
--}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, eaque reprehenderit nemo
illo magnam alias error! Laboriosam ex unde architecto, libero non impedit similique sunt
repellendus eaque aliquid! Iure, nam?
Cerrar modal
```
## Páginas de interes
+ Iconos: https://v1.heroicons.com
+ Badges: https://v1.wireui.dev/docs/badges
+ Avatar: https://v1.wireui.dev/docs/avatar
+ Botones: https://v1.wireui.dev/docs/buttons
+ Tablas:
+ https://github.com/Power-Components/livewire-powergrid
+ https://livewire-powergrid.com/get-started/install.html
+ https://livewire-powergrid.com/get-started/create-powergrid-table.html
+ Mascaras: https://v1.wireui.dev/docs/maskable-inputs
###################
# Livewire y WireUI: Crea interfaces web responsivas de forma fácil
+ URL: https://codersfree.com/cursos/livewire-wireui-crea-interfaces-web-responsivas-facil
## Instalación:
+ Página oficial: https://v1.wireui.dev
1. Ejecutar:
+ $ composer require wireui/wireui
2. Modificar plantilla principal **resources\views\layouts\app.blade.php**:
```html
@wireUiScripts
```
3. Modificar el archivo de configuración de tailwind **tailwind.config.js**:
```js
// ...
module.exports = {
presets: [
// ...
require('./vendor/wireui/wireui/tailwind.config.js')
],
// ...
content: [
// ...
'./vendor/wireui/wireui/resources/**/*.blade.php',
'./vendor/wireui/wireui/ts/**/*.ts',
'./vendor/wireui/wireui/src/View/**/*.php'
]
// ...
```
4. Ejecutar:
+ $ npm run dev
5. Publicar archivos de configuración:
+ $ php artisan vendor:publish --tag='wireui.config'
+ **Nota:** publica el archivo de configuración: **config\wireui.php**.
+ $ php artisan vendor:publish --tag='wireui.resources'
+ **Nota:** publica los archivos de recursos en **resources\views\vendor\wireui**.
+ $ php artisan vendor:publish --tag='wireui.lang'
+ **Nota:** publica los archivos de traducción de paquete en **lang\vendor\wireui**.
## Preparación del entorno de prueba
1. Crear rutas de prueba en **routes\web.php**:
```php
// ...
use Illuminate\Http\Request;
// ...
// RUTAS DE PRUEBA WIREUI
Route::get('/wireui/forms', function () {
return view('wireui.forms');
})->name('forms');
Route::post('/wireui/forms', function (Request $request) {
$request->validate([
'nombre' => 'required',
'url' => 'required'
]);
return $request->all();
})->name('forms.store');
Route::get('/wireui/tables', function () {
return view('wireui.tables');
})->name('tables');
Route::get('/wireui/livewire', function () {
return view('wireui.livewire');
})->name('livewire');
Route::get('/wireui/actions', function () {
return view('wireui.actions');
})->name('actions');
Route::get('/wireui/ui', function () {
return view('wireui.ui');
})->name('ui');
```
2. Crear rutas de prueba en **routes\api.php**:
```php
// RUTAS DE PRUEBA WIREUI
Route::get('/users', function(Request $request) {
$search = $request->search;
return \App\Models\User::where('name', 'like', "%{$search}%")
->orWhere('email', 'like', "%{$search}%")
->get();
})->name('api.users.index');
Route::get('/users2', function(Request $request) {
$search = $request->search;
return \App\Models\User::where('name', 'like', "%{$search}%")
->orWhere('email', 'like', "%{$search}%")
->when($request->exists('selected'), function($query) use($request) {
$query->whereIn('id', $request->selected)->limit(10);
})
->get();s
})->name('api.users.index2');
Route::get('/users3', function(Request $request) {
return \App\Models\User::when($request->search, function($query, $search) {
$query->where('name', 'like', "%{$search}%")
->orWhere('email', 'like', "%{$search}%");
})->when($request->selected, function($query, $selected) {
$query->whereIn('id', $selected)->limit(10);
})->get();
})->name('api.users.index3');
```
3. Crear vistas de prueba:
+ resources\views\wireui\forms.blade.php:
```php
Formularios
AQUÍ EL CONTENIDO DE LA PÁGINA
```
+ resources\views\wireui\tables.blade.php:
```php
Formularios
AQUÍ EL CONTENIDO DE LA PÁGINA
```
+ resources\views\wireui\livewire.blade.php:
```php
Formularios
AQUÍ EL CONTENIDO DE LA PÁGINA
```
+ resources\views\wireui\actions.blade.php:
```php
Formularios
AQUÍ EL CONTENIDO DE LA PÁGINA
```
+ resources\views\wireui\ui.blade.php:
```php
Formularios
AQUÍ EL CONTENIDO DE LA PÁGINA
```
4. Modificar menú vertical en **resources\menu\AdministradorVerticalMenu.json** para incluir las pruebas:
```json
{
"menu": [
{
"name": "Pruebas WireUI",
"icon": "menu-icon tf-icons ti ti-table",
"slug": "pruebas-ui",
"submenu": [
{
"url": "/wireui/forms",
"name": "Formularios",
"icon": "menu-icon tf-icons ti ti-calculator",
"slug": "wireui-formularios"
},
{
"url": "/wireui/tables",
"name": "Tablas",
"icon": "menu-icon tf-icons ti ti-calculator",
"slug": "wireui-tables"
},
{
"url": "/wireui/livewire",
"name": "Livewire",
"icon": "menu-icon tf-icons ti ti-calculator",
"slug": "wireui-livewire"
},
{
"url": "/wireui/actions",
"name": "Acciones",
"icon": "menu-icon tf-icons ti ti-calculator",
"slug": "wireui-actions"
},
{
"url": "/wireui/ui",
"name": "UI",
"icon": "menu-icon tf-icons ti ti-calculator",
"slug": "wireui-ui"
}
]
},
// ...
]
}
```
## Ejemplos vista formularios
+ Diseñar vista **resources\views\wireui\forms.blade.php**:
```php
@extends('layouts/layoutMaster')
@section('title', 'Formulario')
@section('page-style')
{{-- --}}
{{-- --}}
{{-- --}}
{{-- --}}
{{-- --}}
{{-- --}}
@endsection
@section('content')
Pruebas formularios
@csrf
{{-- VALIDACIÓN DE ERRORES --}}
Agregar
{{-- INPUTS --}}
{{-- TEXTAREA --}}
{{-- SELECTS --}}
España
Venezuela
Austria
Colombia
Italia
España
Venezuela
Austria
Colombia
Italia
{{-- COLORS --}}
{{-- TOGGLES --}}
{{-- CHECK BOX --}}
{{-- RADIS BUTTONS --}}
{{-- BOTONES --}}
Guardar
Guardar
Guardar
Guardar
@endsection
```
## Ejemplos vista tablas
+ Instalar Livewire Powergrid:
+ $ composer require power-components/livewire-powergrid
+ Publicar los archivos de configuración:
+ $ php artisan vendor:publish --tag=livewire-powergrid-config
+ **Nota:** se genera un archivo de configuración en **config\livewire-powergrid.php**
+ Crear una tabla:
+ $ php artisan powergrid:create
+ Component Name: UserTable
+ [M]odel or [C]ollection? (default: M): M
+ Model (ex: App\Models\User): App\Models\User
+ Use the based on fillable ? (yes/no) [no]: yes
+ **Nota:** La tabla se crea como un componente de Livewire:
+ Controlador: app\Http\Livewire\UserTable.php
+ Vista: en la vista se llamará con la directiva: @livewire('user-table')
+ Diseñar vista **resources\views\wireui\tables.blade.php**:
```php
@extends('layouts/layoutMaster')
@section('title', 'Tablas')
@section('page-style')
@endsection
@section('content')
Pruebas tablas
@livewire('user-table')
@endsection
```
## Componentes de Livewire
1. Crear componente livewire:
+ $ php artisan make:livewire forms
2. Modificar vista **resources\views\wireui\livewire.blade.php**:
```php
@extends('layouts/layoutMaster')
@section('title', 'Livewire')
@section('page-style')
@endsection
@section('content')
Pruebas livewire
@livewire('forms')
@endsection
```
3. Modificar componente **resources\views\livewire\forms.blade.php**:
```php
{{-- MASCARAS --}}
{{-- CURRENCY --}}
{{-- FECHA y HORA --}}
```
## Acciones
1. Crear componente livewire:
+ $ php artisan make:livewire notification
2. Crear componente livewire:
+ $ php artisan make:livewire dialog
3. Incluir el componente **notifications** en **resources\views\layouts\app.blade.php**:
```php
```
4. Modificar la vista **resources\views\wireui\actions.blade.php**:
```php
```
5. Modificar controlador livewire **app\Http\Livewire\Notification.php**:
```php
notification([
'title' => 'Notificación',
'description' => 'Notificación de prueba',
'icon' => 'info'
]);
*/
/*
$this->notification()->success(
$title ='Notificación',
$description = 'Notificación de prueba'
);
*/
$this->notification()->confirm([
'title' => 'Seguro?',
'description' => 'Descripción de prueba',
'icon' => 'question',
'accept' => [
'label' => 'Aceptar',
'method' => 'miMetodo',
'params' => 'prueba'
],
'reject' => [
'label' => 'Cancelar'
]
]);
}
public function miMetodo($params) {
}
public function render()
{
return view('livewire.notification');
}
}
```
6. Modificar vista livewire **resources\views\livewire\notification.blade.php**:
```php
Abrir notificación
```
7. Modificar controlador livewire **app\Http\Livewire\Dialog.php**:
```php
```
8. Modificar vista livewire **resources\views\livewire\dialog.blade.php**:
```php
Abrir diálogo
```
9. mmmmm
## Páginas de interes
+ Iconos: https://v1.heroicons.com
+ Botones: https://v1.wireui.dev/docs/buttons
+ Tablas:
+ https://github.com/Power-Components/livewire-powergrid
+ https://livewire-powergrid.com/get-started/install.html
+ https://livewire-powergrid.com/get-started/create-powergrid-table.html
+ Mascaras: https://v1.wireui.dev/docs/maskable-inputs
Videos culminados: 14 (Componentes de formularios)
Rama actual: wireui01