31. Componentes blade (de clase y anonimos)

Buenas! Ha habido cambios en la manera que jetstream gestiona los componentes:

  - Los componentes de jetstream ahora vienen visibles desde el principio en resources/views/components. 

  - Para llamarlos ya no es necesario usar <x-jet-foo> sino que se les llama como a cualquier componente, <x-foo>.


 

? Componentes creados por Breeze

Con la instalación de Breeze encontramos componentes en resources/views/components

? Componentes creados por Jetstream

Para ver todos los componentes creados en la instalación de Jetstream debemos publicarlos:

php artisan vendor:publish --tag=jetstream-views

Los componentes aparecerán en resources/views/vendor/jetstream/components

Estos componentes se llaman de una manera un poco diferente:

<x-jet-welcome />

? Componentes de Clase

Cuando queremos separar la lógica de la vista hacemos uso de los componentes de clase.

php artisan make:component Alert2

Se crea el archivo app/View/Components/Alert2.php con la lógica

<?php

namespace App\View\Components;
use Illuminate\View\Component;

class Alert2 extends Component
{
	public $clases;
	public function __construct($type = 'info')
	{
		switch($type) {
			case 'info':
				$clases = "bg-blue-100 border-blue-500 text-blue-700";
				break;
			case 'danger':
				$clases = "bg-red-100 border-red-500 text-red-700";
				break;
			default:
				$clases = "bg-orange-100 border-orange-500 text-orange-700";
				break;
		}
		$this->clases = $clases;
	}
	public function render()
	{
		return view('components.alert2');
	}
}

y su vista en resources/views/components/alert2.blade.php 

<article 
	{{ $attributes->merge([
		'class' => "border-l-4 p-4 $classes", 
		'role' => "alert"
	]) }} 
>
	<h1 class="font-bold">{{ $title }}</h1>
	{{ $slot }}
</article>

Para su implementación llamamos al componente Alert2:

<x-alert2 :type="$type" id="alerta" class="mb-4" role="prueba">

	<x-slot name="title">
		Este es el título desde el slot 2
	</x-slot>
	
	<p>Este es un texto de prueba2</p>
	
</x-alert2>

? Componentes

Para generar un componente, por ejemplo de alerta, creamos la carpeta components en la ruta resources/views y ahí dentro haremos los archivos de blade para cada componente.

Entonces creamos el archivo alert.blade.php conteniendo el siguiente código

<div 
	class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" 
	role="alert"
>
  <p class="font-bold">Be Warned</p>
  <p>Something not ideal might be happening.</p>
</div>

Y lo llamamos desde, por ejemplo, dashboard.blade.php de la siguiente forma:

<x-alert />

Para configurar el contenido principal del alerta modificamos el código incluyendo {{ $slot }}

<div 
	class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" 
	role="alert"
>
  <p class="font-bold">Be Warned</p>
  {{ $slot }}
</div>

Ahora podemos ocupar la variable $slot de la siguiente manera:

<x-alert>
	<p>Este es un texto de prueba</p>
</x-alert>

Para configurar el título podemos usar los atributos del componente:

<x-alert title="Título de prueba">
	<p>Este es un texto de prueba</p>
</x-alert>

Y lo recibimos en el componente haciendo uso de la directiva props:

@props(['title'])

<article 
	class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" 
	role="alert"
>
	<h1 class="font-bold">{{ $title }}</h1>
	{{ $slot }}
</article>

Otra forma de pasar información a los componentes es usar slots secundarios nombrados:

<x-alert>
	<x-slot name="title">
		Este es el título desde el slot
	</x-slot>
	<p>Este es un texto de prueba</p>
</x-alert>

Y lo recibimos sin necesidad de la directiva props:

<article 
	class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" 
	role="alert"
>
	<h1 class="font-bold">{{ $title }}</h1>
	{{ $slot }}
</article>

Usando todas estas formas:

<x-alert type="info">
	<x-slot name="title">
		Este es el título desde el slot
	</x-slot>
	<p>Este es un texto de prueba</p>
</x-alert>

Recibimos la información de la siguiente manera en el componente:

@props(['type'] => 'info')

@php
	switch($type) {
		case 'info':
			$clases = "bg-blue-100 border-blue-500 text-blue-700";
			break;
		case 'danger':
			$clases = "bg-red-100 border-red-500 text-red-700";
			break;
		default:
			$clases = "bg-orange-100 border-orange-500 text-orange-700";
			break;
	}
@endphp

<article class="border-l-4 p-4 {{ $clases }}" role="alert">
	<h1 class="font-bold">{{ $title }}</h1>
	{{ $slot }}
</article>

Si queremos usar variables en los atributos del componente:

@php
	$type = 'info';
@endphp

<x-alert :type="$type">
	<x-slot name="title">
		Este es el título desde el slot
	</x-slot>
	<p>Este es un texto de prueba</p>
</x-alert>

Si queremos pasarle un atributo, por ejemplo un id, en lugar de un valor:

<x-alert :type="$type" id="alerta">

Puedo recibirlo por props:

@props(['type'] => 'info', 'id')
...
<article id="{{ $id }}">

Esta forma es poco práctica porque debemos definir todos los posibles atributos que esperamos recibir. 

Los componentes tienen una variable llamada attributes. Si no definimos los valores enviados en props se guardarán en attributes.

@props(['type'] => 'info')
...
<article $attributes>

Si queremos enviar un atributo de clase:

<x-alert :type="$type" id="alerta" class="mb-4">

Si ya definimos una clase en $attributes no podemos definir otras y se perderán los otros estilos:

<article {{ $attributes }} class="border-l-4 p-4 {{ $classes }}" role="alert">

Para solucionar esto:

<article 
	{{ $attributes->merge(['class' => "border-l-4 p-4 $classes"]) }} 
	role="alert"
>

El merge combina los atributos que estamos pasando con los atributos base de clase. Otros tipos de atributos no se combinan sino que se reemplazan.

<article 
	{{ $attributes->merge([
		'class' => "border-l-4 p-4 $classes", 
		'role' => "alert"
	]) }} 
>

Victor una pregunta como haces para que te abra la vista cuando le daz click desde un modelo, alguna extension?