K
KoreUI

Order List

UI

Lista única reordenable: arrastra los elementos o usa los botones para fijar un orden. Útil para prioridades, pasos de un flujo, columnas o cualquier secuencia editable.

Requiere Livewire. kore::order-list guarda el array de valores en el orden elegido con wire:model en un componente Livewire real. Fuera de ese contexto no tiene dónde sincronizar el orden.

En vivo

Arrastra por el tirador para reordenar, o usa las flechas ↑/↓ del teclado. Es un componente Livewire real: el estado de abajo se actualiza en cada movimiento.

Prioridad — arrastra por el tirador o usa ↑/↓

priorityOrder: []

Pasos de aprobación — reorderable=false, solo lectura

approvalSteps: [] 

{{-- Arrastrable --}}
<x-kore::order-list
    wire:model="priorityOrder"
    label="Prioridad"
    :items="$items"
/>

{{-- Solo lectura --}}
<x-kore::order-list
    wire:model="approvalSteps"
    label="Pasos de aprobación"
    :items="$stepItems"
    :reorderable="false"
/>
{{-- Arrastrable --}}
<x-kore::order-list
    wire:model="priorityOrder"
    label="Prioridad"
    :items="$items"
/>

{{-- Solo lectura --}}
<x-kore::order-list
    wire:model="approvalSteps"
    label="Pasos de aprobación"
    :items="$stepItems"
    :reorderable="false"
/>

Cómo funciona

Arrastre por tirador, botones accesibles y reconciliación de valores.

  • Arrastre por el tirador. Usa x-sort, el plugin de Alpine embebido en Livewire 4, para reordenar arrastrando.
  • Botones ↑ / ↓ accesibles. Alternativa por teclado a la misma acción, sin depender del ratón. Con reorderable=false se ocultan ambos: la lista queda de solo lectura.
  • El orden se sincroniza como array. Cada movimiento manda el array de valores completo con $wire.$set.
  • Reconciliación de valores. Si el wire:model llega vacío, se usa el orden de items. Los valores que ya no existen en items se descartan, y los nuevos que falten en el array se añaden al final — así un cambio en las opciones nunca deja el wire:model en un estado inconsistente.
  • Clave estable por valor. La lista renderiza desde el array order — la fuente de verdad — con :key="item.value" y x-sort:item="item.value", así que el reordenamiento es por valor, no por índice.

Props

Prop Tipo Default Descripción
items array [] Elementos: value y label por cada uno
wire:model string — La propiedad Livewire donde vive el array de valores en su orden
reorderable bool true Permite arrastrar. Con false la lista es de solo lectura
label string null Etiqueta del campo
hint string null Texto de ayuda bajo el campo
name string null Nombre del campo, para formularios y errores
error string null Mensaje de error a mostrar
required bool false Marca el campo como obligatorio
disabled bool false Desactiva la interacción
readonly bool false El orden se ve pero no se cambia, y el valor se sigue enviando
showError bool true Muestra el mensaje de error automático de validación
Cargando