K
KoreUI

Key-Value

Form

Editor de pares clave-valor dinámicos, ideal para metadata, settings, variables de entorno o cabeceras HTTP. El usuario añade, edita, elimina y —opcionalmente— reordena filas.

Requiere Livewire. El editor sincroniza su estado con $wire.$set desde un plugin Alpine (KoreKeyValue), y reorderable usa x-sort —el plugin de Alpine que Livewire trae embebido—, así que la vista necesita un componente Livewire con una propiedad pública recibiendo el wire:model.

En vivo

Añade, edita y elimina pares. En el segundo editor, arrastra el tirador para reordenar filas. Es un componente Livewire real: el JSON debajo de cada uno muestra el estado sincronizado.

Metadatos

{"env":"production","region":"mx-central"}

Cabeceras HTTP — reordenable

{"Content-Type":"application\/json","Accept":"application\/json"}
{{-- Básico --}}
<x-kore::key-value wire:model="meta" label="Metadatos" />

{{-- Reordenable, con placeholders propios --}}
<x-kore::key-value
    wire:model="headers"
    label="Cabeceras HTTP"
    key-placeholder="Header"
    value-placeholder="Valor"
    reorderable
/>
{{-- Básico --}}
<x-kore::key-value wire:model="meta" label="Metadatos" />

{{-- Reordenable, con placeholders propios --}}
<x-kore::key-value
    wire:model="headers"
    label="Cabeceras HTTP"
    key-placeholder="Header"
    value-placeholder="Valor"
    reorderable
/>

Formato de datos

El componente sincroniza un objeto, no un array de pares.

El wire:model de kore::key-value siempre recibe un objeto —en PHP, un array asociativo— con forma {clave: valor}. Las filas con clave vacía se descartan al sincronizar, así que nunca llega una clave "" al servidor.

Estado inicial vacío, tras editar dos filas:

public array $meta = [];

// Resultado tras editar:
// ['env' => 'production', 'region' => 'mx-central']

Si necesitas un array de pares en lugar de un objeto, guarda el wire:model como array y transfórmalo en el backend. El contenedor va con wire:ignore para que el morphing de Livewire no pise el DOM que Alpine controla —el mismo motor de array que usa kore::tag-input—.

Reordenable

reorderable=true habilita arrastrar filas para cambiar su orden.

El reordenamiento usa x-sort, el plugin de Alpine que Livewire trae embebido, por lo que requiere Livewire en la página —no funciona en un contexto Alpine puro sin Livewire cargado—. Combínalo con keyPlaceholder y valuePlaceholder cuando el dominio de los datos lo pida, como en el ejemplo de cabeceras HTTP de arriba.

Props

Prop Tipo Default Descripción
label string|null null Etiqueta del campo
hint string|null null Texto de ayuda
name string|null null Nombre (se deriva de wire:model si se omite)
error string|null null Mensaje de error manual
size string config(md) Tamaño: sm, md, lg
keyPlaceholder string Clave Placeholder de la columna clave
valuePlaceholder string Valor Placeholder de la columna valor
addLabel string Añadir Texto del botón de añadir
addable bool true Muestra el botón de añadir
deletable bool true Muestra el botón de eliminar por fila
reorderable bool false Permite reordenar arrastrando, usa x-sort
max int|null null Límite de filas
disabled bool false Desactiva el editor
readonly bool false No añade, borra ni reordena pares; el valor se envía
required bool false Marca el campo como obligatorio
showError bool true Pinta los errores de validación. A false calla todos: ni el bag $errors ni un error escrito a mano
Cargando