Ver el código de «2. VUE. Reactividade e Ciclo de Vida dos compoñentes. Directivas»


[[Category:DAW]]
[[Category:DWCC]]

= Obxectivos da unidade (4 horas) =

Nesta unidade introdúcese a reactividade en Vue, o ciclo de vida dos compoñentes e o uso das directivas máis habituais para enlazar datos, eventos e interface de usuario, comprendendo como o framework actualiza automaticamente a aplicación.

* Comprender o concepto de reactividade en Vue. 
* Distinguir entre compoñentes funcionais e con estado. 
* Empregar ref() e reactive() para manexar datos. 
* Usar propiedades computed e o hook onMounted().

= Reactividade en VUE =

En Vue, a reactividadee significa que o framework é capaz de detectar automaticamente  cando cambian os datos e actualizar a interface de usuario (DOM) sen recargar a páxina. 
Neste sendo, en Vue temos tres funcións básicas ref, reactive e computed para traballar a reactividade. Todas serven para crear variables reactivas, e dicir, cambian co seu valor e Vue actualiza automaticamente a interface.  

Todas fan o mesmo pero no se usan igual ni serven exactamente para o mesmo. 

Vémolo con un exemplo cada caso.  

== 1. ref() ==
* ref() manexa variables primitivas coma números, cadenas de texto, booleanos ou calquer valor simple incluíndo arrays simples que non formen parte de obxectos máis complexos. 
* Accedemos ao valor ca expresión .value 

<syntaxhighlight lang="js">
import { ref } from 'vue'; 
 
const contador = ref(0); 
contador.value++;           // Vue actualiza o DOM automaticamente 
</syntaxhighlight>

Imos crear un compoñente XestionUsuarios.vue, onde faremos as probas iniciais eliminando os compoñentes que houbera (ej. HelloWorld.vue).  

O principio este compoñente será onde practicaremos estes conceptos básicos de Vue deixando tamén aparcado a aplicación de estilos web.

Con todo, '''hai que indicar os estilos dende a zona de ''style''''' importánse así, con algunha das dúas opcións. 

'''Opción 1: con class''' (recomendado por ser reutilizable)

<syntaxhighlight lang="html">
<div class="menu">Inicio</div> <div id="menu">Inicio</div> 
  <style scoped> 
    .nome { 
    color: blue; 
    font-weight: bold; 
    } 
  </style> 
</syntaxhighlight>


'''Opción 2: con id'''

<syntaxhighlight lang="html">
<div id="menu">Inicio</div> 
  <style scoped> 
    #nome { 
    color: blue; 
    font-weight: bold; 
    } 
  </style> 
</syntaxhighlight>

Volvendo a este compoñentes que estamos a crear. A estrutura sería algo así: 
 
Por outra banda, como vimos na unidade anterior, App.vue é a raíz onde arranca a aplicación; por iso imos facer algún cambio nel para que se poida ver o novo compoñente. 

Así que facemos as modificacións que se mostran na seguinte imaxe. 
<gallery widths=500 heights=300>
File:Vue-iniciar-proxecto-npm-run-dev.png|Non se nos esqueza de arrincar o servizo Vue, se non estivese iniciado. 
File:Vue-proxecto-iniciado.png|O resultado co proxecto iniciado
</gallery> 

 
Se pulsamos nos botóns irá cambiando o valor numérico executando o código situado na zona de script que mostra posteriormente na páxina sen que esta se recargue xa que vai chamando as funcións aumentar e restar asociadas aos botóns mediante @click

== 2. reactive ==

Usase '''para valores máis complexos''' como obxectos ou estruturas de datos.  

Engadamos no compoñente '''XestionUsuarios.vue''' anterior os seguintes códigos marcados en vermello. 

Podemos observar que temos '''unha estrutura de datos''' chamada xogador que imos a utilizar para manter os seus cambios con '''reactive''' tal como explicamos antes. 

O máis importante é a outra diferencia máis entre ref y reactive:
* A ref accedemos ao valor co termo .value, contador.value)
* Con reactive accedemos a estrutura de datos co nome da mesma e o valor correspondente, neste caso xogador.puntuacion. 

Resultado:

== 3. computed ==
As propiedades computed serven para calcular valores derivados, xeralmente a partires de outros datos reactivos de forma automática. É importante ter en conta que non almacena datos como poden facer reactive ou ref, senón que  devolven un resultado que  depende de outros.  

Solo cando estes cambian computed actúa. Entre as súas vantaxes están a reutilización de código e mellora do  rendemento xa que actúan só cando fai falla.  

Neste caso observamos que a función computada que se chama estadoxogador depende dunha variable reactive.  
 
O resultado antes: 
  
 
E despois de chegar ao valor de puntuación 5:

= Ciclo de vida dun compoñente. Directivas =

En  Vue, cada compoñente pasa por distintas fases desde que se crea ata que desaparece da pantalla. Esta fases forman o chamado ciclo de vida do compoñente. 

As fases máis importantes son: 
* Creación: o compoñente é definido e prepara a súa lóxica interna, pero sen mostrarse aínda. 
* Montaxe: o compoñente xa está visible no DOM do navegador. 
* Actualización: cando cambian os datos reactivos, o compoñente vólvese a renderizar para mostrar os cambios. 
* Desmontaxe: o compoñentes elimínase do DOM. 

Neste tipo de procesos hai un hook moi útil: onMounted(), que se executa automaticamente cando o compoñente xa está montado no DOM.  

Nas versións actuais de Vue, especialmente usando script setup, moita lóxica inicial pódese executar directamente dentro do setup(), polo que algúns programadores empregan menos o hook.  

Sen embargo, onMounted() segue sendo necesario cando necesitas acceder ao DOM, 

facer peticións as APIs ou inicializar datos só despois de que o compoñente estea completamente cargado.  

Resumindo, é o mecanismo ideal para: 
* Cargar os datos dende unha API, por exemplo, dende unha base de datos. 
* Iniciar temporizadores 
* Executar código que precise o compoñente cando estea visible na pantalla. 

Antes de continuar, no almacén deste unidade hai dous arquivos modificados que se corresponden cos anteriores: 
* XestionUsuarios.vue que o cambiamos polo que modificamos antes 
* App.vue que ten lixeiras modificacións de estilo co respecto ao anterior. 

Debemos incluílos no entorno substituíndo ao anterior para ir preparando o miniproxecto global. Tras a substitución e lanzamento do proxecto (npm run dev) debe  aparecernos no navegador algo parecido a isto. 
 
 '''IMPORTANTE'''. Non entraremos a explicar os estilos CSS que se propoñen para o deseño da páxina porque queda fora do alcance e obxectivo do curso. 
 De feito, moitos deles son recollidos de outros proxectos realizados na aula, na Internet e, tamén, con algunha modificación con IA nalgún aspecto para a súa mellora, aínda que as veces hai que retocalos. 

Volvendo os compoñentes, o que temos é un sinxelo formulario é debaixo unha listaxe que nos mostra o que imos engadindo no formulario. Ademais na dereita da táboa temos un lapis que é un botón para editar un usuario que se cargue na táboa, e un botón con unha icona dun cubo de lixo para eliminalo. 

== App.vue ==

Empecemos botando unha ollada a App.vue.  

O arquivo raíz non ten nada especial ou diferente ao da unidade anterior que cargaba HelloWorld.vue. Neste caso script importa o compoñente que quero usar, XestionUsuarios.vue e na parte do style basicamente que apareza no centro ocupando o 80% do ancho e algunhas melloras de estilo adicionais como soporte inicial a dispositivos como tablets ou móbiles. 
 
Este é o que menos tocaremos ao longo do proxecto. De feito só o tocaremos un par de veces máis e con modificacións mínimas nas unidades posteriores pero que afectarán de 
gran maneira ao resto de proxecto tal como pode sospeitar deste arquivo chave. 

== Xestionusuarios.vue ==

O que ten conceptos substanciais para entender o funcionamento de Vue é o XestionUsuarios.vue. 

Pola súa lonxitude iremos por partes.
 
=== A. Template ===
 
Contén un '''formulario''' e debaixo unha '''táboa''' onde carga os datos que imos introducindo no formulario. 

<gallery widths=500 heights=700>
File:vue-form.png|Parte correspondente ao form
File:vue-taboa.png|Parte correspondente a táboa: 
</gallery>

==== Directivas moi usadas ====
  
Chegados a este punto aparece outro dos conceptos clave na programación co ''framework Vue''', que son as '''directivas''', marcadas elas con subliñado vermello. 

Vémolas: 
; v-model
: vincula un dato do compoñente que é unha variable da zona do script, cun elemento dun formulario (input, select, textarea, etc.) de forma reactiva e bidireccional. 
Isto quere dicir que, se cambias o valor no campo do formulario, a variable tamén cambia, e se modificas a variable no código, o formulario actualízase automaticamente. 

Neste caso temos un modelo que chamamos novoUsuario coas súas variables: nome, correo, activo,... que aparece logo na declaración de datos do script. 

; v-if/v-else/ v-else-if
: permite mostrar u ocultar partes del template segundo  una condición lóxica, e dicir, quita e pon elementos do DOM.  

Existe un similar, '''v-show''' solo oculta usando CSS con display:none, é más eficiente se cambias moito entre mostrar/ocultar. 
 
; v-bind ou simplemente " : ", que afecta ao botón e que permite ligar de forma reactiva un atributo HTML cun dato do compoñente.  

É dicir, calquera atributo dun elemento (placeholder, disabled, class, title, src, etc.) pode "tomar" o seu valor dunha variable da zona do script. O comportamento é exactamente o mesmo: se a variable cambia, o atributo actualízase no navegador automaticamente. 

Neste caso mentres non engada un nome e un dni o botón está deshabilitado. 

Un exemplo:
<syntaxhighlight lang="js">
<td :style="{ color: u.edad >= 18 ? 'blue' : 'orange', fontWeight: 'bold' }"> {{ u.edad }} </td> 
</syntaxhighlight>

Se o usuario é maior de idade cor azul; senón cor laranxa e negrita 
 
; v-for
: serve para amosar unha lista de elementos, repetindo unha parte do template (por exemplo, filas dunha táboa ou rexistros do usuario) por cada elemento dun array ou colección.  

O atributo :key é moi importante para que Vue identifique cada elemento de maneira única e xestione mellor as actualizacións cando se recorre con for. 

==== Outras diectivas ====
 
Existen varias directivas máis, pero por citar algunha das sinxelas, que non a usamos neste código. 
; v-on
: que sustituiría a @ no botón:
<syntaxhighlight lang="js">
v-on:click="engadirUsuario" 
</syntaxhighlight>

; v-text
: sustitúe  a {{  }} 
<syntaxhighlight lang="js">
<p v-text="mensaxe"></p> 
</syntaxhighlight>

; v-html
:  insire HTML (coidado con seguridade):       
<syntaxhighlight lang="js">
<div v-html="contidoHtml"></div> 
</syntaxhighlight>

Existe outras máis complexas, algunhas delas verémolas nas seguintes unidades. 

En canto o resto do código resto xa é sintaxes de html e css.

=== B. Script. ===

==== Declaración de variables ====

Na primeira imaxe vemos a '''declaración de variables''':
* unha variable, o ''array usuarios'', esta declarada como '''''ref''''' que xa se indicou que se fai para '''declarar variables reactivas de tipos de datos primitivos''' ou non moi complexos. 
* unha '''estrutura de datos''' complexa , ''novoUsuario'', e polo tanto declarámola como reactive. Ademais é o "nexo de unión" ca zona de ''template'', xa que coincide ca directiva

Calquer cambio na zona de script que afecta a novoUsuario veráse reflexada no template.

Na segunda imaxe vemos o '''''hooked onMounted''''' que se executa cando se carga o compoñente. Neste caso carga datos no array usuarios que declaramos na zona anterior cando se monta a páxina. 

O v-for do template recorre a listaxe de usuarios e cárgaos na táboa, tal como se mostra.

<gallery widths=450 heights=250>
File: vue-declaracion-variables.png | Zona d edeclaracións varabia usuaurios (array usuarios) declarado como ref e estutura de datps novoUsuario coma reactive
File: vue-on-mounted.png | Zona de ciclo de vida con hook onMounted
</gallery>

==== ''Hook onMounted'' ====

A segundo parte é o '''''hook onMounted''''', que se executa cando se carga o compoñente. 

Neste caso '''carga datos''' no array usuarios que declaramos na zona anterior cando se  monta a páxina.  

O '''v-for''' do '''''template''''' recorre a listaxe de usuarios e cárgaos na táboa.

==== Funcións ====

As seguinte imaxes teñen que ver cas '''funcións''' ou '''métodos''' que "fan algo".  
 
; A función gardarUsuario
: o que fai mediante o método push, e cargar un novoUsuario no array usuarios, cando pulsamos o botón Gardar Usuario na zona do template. 
 
; A función eliminarUsuario
: a través da clave index da táboa, elimina un usuario do array mediante a función splice que coincida co mencionado index. 

; A función editarUsuario
: carga na variable usuario elixido co valor de index e asínao a novoUsuario, e como novoUsuario é una variable reactiva cárgao a súa vez no template, é dicir, no formulario. Recordemos unha vez máis, o v model novoUsuario é o "nexo de unión" entre a zona de JS e o template.

<gallery widths=450 heights=250>
File:vue-funcions.png|caption|Métodos ou funcións
File:vue-gardar-usuario.png|caption|A función gardarUsuario
File:vue-editar-e-eliminar-usuario.png| AS funcións editarUsuario e eliminarUsuario
</gallery>

==== ''Style'' ====

A parte de ''style'' non a comentamos porque non é tema deste curso de iniciación.  

==== Outros ''hooks'' ====

Finalmente falamos do '''hook onMounted()'''. Non é o único, pero sí '''o máis empregado'''. 

Na táboa seguinte móstranse outros. 

{| class="wikitable sortable" style="width:100%; text-align:center; border-collapse: collapse; background-color: #f9f9f9;"
|-
! style="background-color: #4CAF50; color: white; width: 20%;" | Hook
! style="background-color: #4CAF50; color: white; width: 30%;" | Momento do ciclo
! style="background-color: #4CAF50; color: white; width: 50%;" | Cando se usa normalmente
|-
| style="background-color: #f0f0f0; font-weight:bold;" | onBeforeMounted()
| Xusto '''antes de montar''' o compoñente no DOM
| Preparar algo antes de que o compoñente se vexa na pantalla
|-
| style="background-color: #e8f5e9; font-weight:bold;" | onMounted()
| Cando o compoñente '''xa está montado''' no DOM
| Cargar datos, facer peticións, iniciar temporizadores ou librarías que necesitan o DOM
|-
| style="background-color: #f0f0f0; font-weight:bold;" | onBeforeUpdate()
| '''Antes''' de que o compoñente '''se actualice''' por un cambio reactivo
| Ver o valor antigo antes de que se renderice de novo ou realizar accións previas
|-
| style="background-color: #e8f5e9; font-weight:bold;" | onUpdate()
| '''Despois''' de que '''se actualice''' o DOM
| Realizar accións tras un cambio visual (animacións, scroll, etc.)
|-
| style="background-color: #f0f0f0; font-weight:bold;" | onBeforeUnmount()
| '''Antes''' de que o compoñente '''se desmonte''' (destruír)
| Limpar temporizadores, listeners, ou conexións abertas
|-
| style="background-color: #e8f5e9; font-weight:bold;" | onUnmounted()
| '''Cando''' o compoñente '''xa foi eliminado''' do DOM
| Confirmar que todo foi liberado correctamente
|-
| style="background-color: #f0f0f0; font-weight:bold;" | onActivated()
| '''Cada vez que o compoñente “volta á vida”''' despois de ter estado gardado en caché
| Recargar datos se é necesario. Reiniciar contadores, animacións ou estados que só teñen sentido cando o compoñente está visible.
|-
| style="background-color: #e8f5e9; font-weight:bold;" | onDeactivated()
| '''Cando''' o compoñente '''pasa a estar oculto pero non destruído''', porque segue gardado
| Pausa temporizadores, garda estados ou cancela listeners cando paso a outra páxina.
|}

= Resumo =
* Comprendemos como Vue '''actualiza automaticamente a interfaz''' grazas á '''''reactividade'''''. 
* Aprendemos a usar '''''ref''''', '''''reactive''''' e '''''computed''''' 
* Coñecemos as '''fases do ciclo de vida''' dun compoñente e o '''''hook onMounted'''''. 
* '''Aplicamos''' todo '''nun compoñente práctico cun formulario e unha táboa''' para mostrar os datos.

= Tarefa =

Recoméndase que:
* execute a aplicación tras cada pequeno cambio
* observe o comportamento no navegador
* relacione cada modificación co concepto teórico correspondente

== Exercicio 1 - Separación entre datos e eventos ==

Engadir un botón que permita limpar o formulario sen afectar á lista de usuarios. O botón chamará a unha función limparForm().

== Exercicio 2 - Aplicación de estilos diferentes dependendo ligados aos datos ==

Aplicar estilos distintos ás filas da táboa segundo o tipo de usuario: 
* Empresa: fondo verde suave ou similar
* Particular: fondo amarelo suave ou similar

== Exercicio 3 - Atributos HTML reactivos dun dato temporal, non da lista completa ==

Modificar o campo de texto do nome para que a cor do bordo dependa do tipo de conta seleccionada.

Axuda:

<syntaxhighlight lang="js">
<input
  v-model="novoUsuario.nome"
  type="text"
  required
  :style="{ borderColor: novoUsuario.tipoCuenta === 'empresa' ? 'green' : 'red' }"
/>
</syntaxhighlight>

Na zona de style:
<syntaxhighlight lang="css">
input {
  transition: border-color 0.3s ease;
}
</syntaxhighlight>

== Exercicio  4. Datos derivados e reactividade ==

A partir do array reactivo usuarios, mostrar no encabezado da táboa o número de usuarios activos e inactivos actualizándose de forma automática ao engadir ou eliminar usuarios a partires do array
 LISTAXE DE USUARIOS — Usuarios activos: 2 | Inactivos: 1

Non é obrigatorio empregar computed, pero recoméndase reflexionar sobre que datos deben almacenarse e cales poden derivarse doutros.

 '''Axuda'''.
 Usar filter para construir unha subarray cos activos e logo con length calcular o tamaño de ese subarray

<syntaxhighlight lang="js">
const resultado = elementos.filter(e => /* condición */)
console.log(resultado.length)
</syntaxhighlight>
Se modificamos un usuario a súa condición de activo vemos como a aplicación actúa de forma reactiva e modifica o número de usuarios.

== Posible solución ==

<syntaxhighlight lang="js">
<template>
  <div class="xestion-usuarios">
    <h4>👥 Xestión de usuarios</h4>
    <form @submit.prevent="gardarUsuario">
      <div class="fila">
        <div class="campo campo-dni">
          <label>DNI/CIF:</label>
          <input v-model="novoUsuario.dni" type="text" required style="text-align: center;" />
        </div>
        <div class="campo campo-nome">
          <label>Nome:</label>
          <input v-model="novoUsuario.nome" type="text" required :style="{ borderColor: novoUsuario.tipoCuenta === 'empresa' ? 'green' : 'red' }"
/>
        </div>
      </div>
      <div class="fila">
        <div class="campo campo-correo">
          <label>Correo:</label>
          <input v-model="novoUsuario.correo" type="email" required />
        </div>
        <div class="campo campo-provincia">
          <label>Provincia:</label>
          <select v-model="novoUsuario.provincia">
            <option value="">-- Escolle unha provincia --</option>
            <option>A Coruña</option>
            <option>Lugo</option>
            <option>Ourense</option>
            <option>Pontevedra</option>
          </select>
        </div>
      </div>
      <div class="fila fila-centrada">
        <div class="campo inline-activo">
          <label>Activo:</label>
          <div class="inline-control">
            <input v-model="novoUsuario.activo" type="checkbox" />
            <span>Activo</span>
          </div>
        </div>
        <div class="campo inline-cuenta">
          <label>Tipo de conta:</label>
          <div class="inline-control radios">
            <label>
              <input v-model="novoUsuario.tipoCuenta" type="radio" value="particular" />
              <span>Particular</span>
            </label>
            <label>
              <input v-model="novoUsuario.tipoCuenta" type="radio" value="empresa" />
              <span>Empresa</span>
            </label>
          </div>
        </div>
      </div>
      <div class="fila">
      <button type="submit" class="btn-guardar" :disabled="novoUsuario.dni === '' || novoUsuario.nome === ''">
        Gardar
      </button>
      <button type="button" class="btn-limpar" @click="limparForm">
        Limpar
      </button>
      </div>
    </form>
    <h4> 📋 LISTAXE DE USUARIOS — Usuarios activos: {{ usuariosActivos }} | Inactivos: {{ usuariosInactivos }}</h4>
    <table v-if="usuarios.length > 0">
      <thead>
        <tr>
          <th>#</th>
          <th>DNI/CIF</th>
          <th>Nome</th>
          <th>Correo</th>
          <th>Provincia</th>
          <th>Activo</th>
          <th>Tipo de conta</th>
          <th>Accións</th>
        </tr>
      </thead>
      <tbody>
<tr v-for="(u, index) in usuarios" :key="index"
    :class="{'empresa-row': u.tipoCuenta === 'empresa', 'particular-row': u.tipoCuenta === 'particular'}">
          <td>{{ index + 1 }}</td>
          <td style="text-align: center;">{{ u.dni }}</td>
          <td>{{ u.nome }}</td>
          <td>{{ u.correo }}</td>
          <td>{{ u.provincia }}</td>
          <td style="text-align: center;">{{ u.activo ? "✅" : "❌" }}</td>
          <td>{{ u.tipoCuenta }}</td>
          <td style="text-align: center;">
            <button @click="editarUsuario(index)" title="Editar">✏️</button>
            <button @click="eliminarUsuario(index)" title="Eliminar">🗑️</button>
          </td>
        </tr>
      </tbody>
    </table>

    <p v-else>Non hai usuarios cargados.</p>
  </div>
</template>

<script setup>
/// Zona de declaracións
import { ref, reactive, onMounted, computed } from 'vue'

const usuarios = ref([])  //almacena la lista de usuarios e os seus cambios

const usuariosActivos = computed(() => usuarios.value.filter(u => u.activo).length)
const usuariosInactivos = computed(() => usuarios.value.filter(u => !u.activo).length)

const novoUsuario = reactive({
  dni: "",
  nome: "",
  correo: "",
  provincia: "",
  activo: false,
  tipoCuenta: ""
})

/// Zona de ciclo de vida

onMounted(() => {       //sempre se cargan estos usuarios de exemplo ao iniciar o componente
  usuarios.value = [
    { dni: "A000000C", nome: "Soldaduras SL", correo: "soldadura@email.com", provincia: "A Coruña", activo: true, tipoCuenta: "empresa" },
    { dni: "0000000C", nome: "María Pérez", correo: "maria@email.com", provincia: "Lugo", activo: false, tipoCuenta: "particular" },
    { dni: "B1234567D", nome: "Xosé López", correo: "xose@email.com", provincia: "Ourense", activo: true, tipoCuenta: "particular" },
    { dni: "C9876543E", nome: "Construcións Modernas", correo: "construcion@email.com", provincia: "Pontevedra", activo: true, tipoCuenta: "empresa" }
  ]
})

/// Zona de métodos ou funcións

function gardarUsuario() {
  usuarios.value.push({ ...novoUsuario })  //engade o novo usuario á lista (copia do obxecto)
  Object.assign(novoUsuario, { dni: "", nome: "", correo: "", idade: null, provincia: "", activo: false, sexo: "" }) //reinicia o formulario
}

function eliminarUsuario(index) {
  usuarios.value.splice(index, 1);   //elimina o usuario da lista
}

function editarUsuario(index) {
  const usuario = usuarios.value[index];   //carga os datos do usuario elixido no formulario
  Object.assign(novoUsuario, usuario);  // carga os datos do usuario no formulario recorda v-model do formulario é novoUsuario
}

</script>

<style scoped>
.xestion-usuarios {
  width: 80vw;
  max-width: 1200px;
  /* opcional para que no crezca demasiado en pantallas muy grandes */
  background: white;
  padding: 2rem;
  overflow: visible;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.fila {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.fila-centrada {
  justify-content: center;
}

.campo {
  display: flex;
  align-items: center;
  /* label e input en la misma línea */
  gap: 0.5rem;
  border-radius: 0px;
}

.campo-dni {
  flex: 1;
  /* ocupa menos espacio */
  border-radius: 0px;
}

.campo-nome {
  flex: 3;
  /* ocupa más espacio */
  border-radius: 0px;
}

.campo-correo {
  flex: 2;
  /* ocupa más espacio */
  border-radius: 0px;
}

.campo select {
  flex: 1;
  padding: 0.6rem;
  border: 1px solid #ddd;
  border-radius: 0px;
  width: 100%;
}

.campo-provincia {
  flex: 1;
  /* ocupa menos espacio */
  border-radius: 0px;
}

.campo label {
  min-width: 80px;
  /* ancho fijo para alinear */
  font-weight: 500;
  font: bold
}

.campo input {
  flex: 1;
  /* ocupa todo el espacio restante */
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 0px;
  box-sizing: border-box;
}

.btn-guardar {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 0.4rem 1.5rem;
  border-radius: 0px;
  cursor: pointer;
  margin: 0 auto;
  display: block;
}

.btn-limpar {
  background-color: lightskyblue;
  color: white;
  border: none;
  padding: 0.4rem 1.5rem;
  border-radius: 0px;
  cursor: pointer;
  margin: 0 auto;
  display: block;
}

.btn-guardar:hover {
  background-color: #0056b3;
  border-radius: 0px;
}

.button {
  background: none;
  border: 2px solid #ddd;
  cursor: pointer;
  font-size: 1rem;
}

.inline-control {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-right: 5rem;
}

table {
  width: 100%;
  border-collapse: separate;
  margin-top: 1rem;
  font-size: 0.8rem;
  border: 1px solid #ddd;
}

th,
td {
  border: 1px solid #ddd;
  padding: 0.7rem;
  text-align: left;
}

th {
  text-align: center;
  background-color: #f8f9fa;
}

h4 {
  margin-bottom: 1rem;
  font-weight: 600;
  background-color: #73aff0;
  color: white;
}

@media (max-width: 768px) {
  .xestion-usuarios {
    padding: 1rem;
    /* reducir el padding en pantallas pequeñas */
  }

  .fila {
    flex-direction: column;
    /* apila los campos verticalmente en móviles */
    gap: 0.5rem;
    /* opcional: un pequeño espacio entre ellos */
  }
}
.empresa-row {
  background-color: lightgreen; /* verde suave */
}
.particular-row {
  background-color: lightyellow; /* amarelo suave */
}
input {
  transition: border-color 0.3s ease;
}
</style>
</syntaxhighlight>

= Referencias =
* Introdución ao desenvolvemento de aplicacións web con Vue.js impartido polo profesor Juan Carlos Pérez González baixo licenza Atribución-Non comercial-Compartir igual 4.0 Internacional