Day 17 - Component Challenge

Challenge UI with Livewire & Alpine.js

Source

Day 17

Press ESC to exit

Source

Day 17

Sortable List & Timeline

Drag-and-drop reorderable list and activity timeline visualization

Sortable List

Liste réordonnçable par glisser-déposer avec synchronisation Livewire.

Features

Drag-and-drop natif avec Sortable.js
Synchronisation Livewire
Handle de drag personnalisable
Animation fluide
Support mobile (touch)

Liste de tâches

6 tâches

Réviser le design du dashboard

High En attente

1
Implémenter l'authentification

High Terminé

2
Créer les tests unitaires

Medium En attente

3
Optimiser les requêtes SQL

Medium En cours

4
Mettre à jour la documentation

Low En attente

5
Déployer en production

High En attente

6

Timeline

Fil chronologique pour afficher l'historique d'activités ou d'événements.

Features

Mode vertical et horizontal
Icônes par type d'événement
Mode alternant gauche/droite
Animations d'apparition
Tailles personnalisables

Timeline verticale

2024-01-15 à 09:00

Projet créé

Le projet Livewire UI Lab a été initialisé avec Laravel et Livewire.

Par Jiordi

2024-02-01 à 14:30

Première release

Publication de la version 0.1.0 avec les 5 premiers composants.

Par Jiordi

2024-02-10 à 11:15

Bug corrigé

Correction du problème d'affichage sur mobile pour le composant Modal.

Par Équipe Dev

2024-03-05 à 16:45

Nouvelle fonctionnalité

Ajout du mode sombre et des thèmes personnalisés.

Par Jiordi

2024-03-20 à 10:00

Milestone atteint

Le Lab UI a dépassé les 1000 étoiles sur GitHub!

Par Communauté

Timeline alternante

2024-01-15 à 09:00

Projet créé

Le projet Livewire UI Lab a été initialisé avec Laravel et Livewire.

Par Jiordi

2024-02-01 à 14:30

Première release

Publication de la version 0.1.0 avec les 5 premiers composants.

Par Jiordi

2024-02-10 à 11:15

Bug corrigé

Correction du problème d'affichage sur mobile pour le composant Modal.

Par Équipe Dev

2024-03-05 à 16:45

Nouvelle fonctionnalité

Ajout du mode sombre et des thèmes personnalisés.

Par Jiordi

2024-03-20 à 10:00

Milestone atteint

Le Lab UI a dépassé les 1000 étoiles sur GitHub!

Par Communauté

Timeline horizontale

2024-01-15

Projet créé

Le projet Livewire UI Lab a été initialisé avec Laravel et Livewire.

2024-02-01

Première release

Publication de la version 0.1.0 avec les 5 premiers composants.

2024-02-10

Bug corrigé

Correction du problème d'affichage sur mobile pour le composant Modal.

2024-03-05

Nouvelle fonctionnalité

Ajout du mode sombre et des thèmes personnalisés.

Usage Examples

Sortable List Usage

{{-- Livewire Component --}}
class TaskList extends Component
{
    public array $tasks = [
        ['id' => 1, 'title' => 'Task 1'],
        ['id' => 2, 'title' => 'Task 2'],
        ['id' => 3, 'title' => 'Task 3'],
    ];
 
    public function updateOrder(array $ids): void
    {
        $tasksById = collect($this->tasks)
            ->keyBy('id')->toArray();
        $this->tasks = array_map(
            fn($id) => $tasksById[$id], $ids
        );
    }
}
 
{{-- Blade View --}}
<div x-data="sortableList({
    items: @js($tasks),
    itemKey: 'id',
    onUpdate: (ids) => $wire.updateOrder(ids)
})">
    <ul x-ref="sortableList" class="space-y-2">
        @foreach($tasks as $task)
            <li data-id="{{ $task['id'] }}"
                class="sortable-item">
                <div class="sortable-handle">
                    <x-lucide-grip-vertical />
                </div>
                <span>{{ $task['title'] }}</span>
            </li>
        @endforeach
    </ul>
</div>
 
{{-- With Custom Styling --}}
<div x-data="sortableList({
    items: @js($items),
    onUpdate: (ids) => handleReorder(ids)
})"
    class="bg-card rounded-lg p-4"
>
    <ul x-ref="sortableList">
        @foreach($items as $item)
            <li data-id="{{ $item['id'] }}"
                class="flex items-center gap-3 p-3
                    border rounded-lg mb-2
                    hover:border-primary/50">
                <div class="sortable-handle
                    cursor-grab active:cursor-grabbing">
                    ≡
                </div>
                {{ $item['name'] }}
            </li>
        @endforeach
    </ul>
</div>

Timeline Usage

{{-- Basic Vertical Timeline --}}
<x-ui.timeline
    :items="$events"
    variant="vertical"
/>
 
{{-- Horizontal Timeline --}}
<x-ui.timeline
    :items="$events"
    variant="horizontal"
    size="sm"
/>
 
{{-- Alternating Timeline --}}
<x-ui.timeline
    :items="$events"
    variant="vertical"
    :alternating="true"
/>
 
{{-- Timeline Data Structure --}}
@php
$events = [
    [
        'title' => 'Project Started',
        'description' => 'Initial commit',
        'date' => '2024-01-15',
        'time' => '09:00',
        'type' => 'create', // create, release,
                            // fix, feature,
                            // milestone, error
        'user' => 'Jiordi',
    ],
    [
        'title' => 'First Release',
        'description' => 'Version 1.0.0',
        'date' => '2024-02-01',
        'type' => 'release',
    ],
];
@endphp
 
{{-- Different Sizes --}}
<x-ui.timeline :items="$events" size="sm" />
<x-ui.timeline :items="$events" size="md" />
<x-ui.timeline :items="$events" size="lg" />
 
{{-- Line Styles --}}
<x-ui.timeline
    :items="$events"
    lineStyle="solid"
/>
<x-ui.timeline
    :items="$events"
    lineStyle="dashed"
/>
 
{{-- Without Animation --}}
<x-ui.timeline
    :items="$events"
    :animated="false"
/>