src/lib/component/TaskItem.svelte - master - EnnRath/SvelteKitProj

src/lib/component/TaskItem.svelte
143 строки4 KB
unknown
Рефакторинг: удалены старые компоненты, добавлены todo и API
08 май 2026, 09:00
08 май 2026, 09:00eb7d329
<!-- src/lib/component/TaskItem.svelte -->
<script lang="ts">
    export let task: {
        id: number;
        title: string;
        completed: boolean;
    };
    export let onDelete: (id: number) => void;
    export let onUpdate: (task: { id: number; title: string; completed: boolean }) => void;    
    let isEditing = false;
    let editedTitle = task.title;
    let inputElement: HTMLInputElement; // Ссылка на input элемент
    
    // Реактивный блок для установки фокуса при начале редактирования
    $: if (isEditing) {
        // Используем setTimeout, чтобы дать Svelte время отрисовать DOM
        setTimeout(() => {
            if (inputElement) {
                inputElement.focus();
            }
        });
    }
    
    function toggleComplete() {
        onUpdate({ ...task, completed: !task.completed });
    }
    
    function saveEdit() {
        if (editedTitle.trim()) {
            onUpdate({ ...task, title: editedTitle });
            isEditing = false;
        }
    }
    
    function cancelEdit() {
        editedTitle = task.title;
        isEditing = false;
    }
    
    function handleKeyDown(e: KeyboardEvent) {
        if (e.key === 'Enter') {
            saveEdit();
        } else if (e.key === 'Escape') {
            cancelEdit();
        }
    }
</script>

<div class="task-item {task.completed ? 'completed' : ''}">
    {#if isEditing}
        <input 
            type="text" 
            bind:value={editedTitle}
            bind:this={inputElement}
            on:keydown={handleKeyDown}
            placeholder="Редактировать задачу..."
        />
        <button on:click={saveEdit} class="save" title="Сохранить"></button>
        <button on:click={cancelEdit} class="cancel" title="Отмена"></button>
    {:else}
        <input 
            type="checkbox" 
            checked={task.completed} 
            on:change={toggleComplete}
            title={task.completed ? 'Отметить как невыполненное' : 'Отметить как выполненное'}
        />
        <span class="title">{task.title}</span>
        <button on:click={() => isEditing = true} class="edit" title="Редактировать">Изменить</button>
        <button on:click={() => onDelete(task.id)} class="delete" title="Удалить">Удалить</button>
    {/if}
</div>

<style>
    .task-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border-bottom: 1px solid #eee;
        transition: background-color 0.2s;
    }
    
    .task-item:hover {
        background-color: #f9f9f9;
    }
    
    .task-item.completed .title {
        text-decoration: line-through;
        color: #888;
    }
    
    .title {
        flex: 1;
        font-size: 16px;
    }
    
    button {
        cursor: pointer;
        border: none;
        background: none;
        font-size: 1.2em;
        padding: 4px 8px;
        border-radius: 4px;
        transition: background-color 0.2s;
    }
    
    button:hover {
        background-color: #e0e0e0;
    }
    
    .save:hover {
        background-color: #4CAF50;
        color: white;
    }
    
    .cancel:hover {
        background-color: #f44336;
        color: white;
    }
    
    .edit:hover {
        background-color: #ffc107;
    }
    
    .delete:hover {
        background-color: #dc3545;
        color: white;
    }
    
    input[type="text"] {
        flex: 1;
        padding: 6px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }
    
    input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }
</style>