@mugiranezaj/todo
v1.1.1
Published
The `Todo` component provides a simple to-do list application where users can add, mark as completed, and remove tasks.
Readme
Todo Component Documentation
Description
The Todo component provides a simple to-do list application where users can add, mark as completed, and remove tasks.
Props
| Prop | Type | Default | Description |
| -------------- | ------ | ------------------------------------------- | --------------------------------- |
| title | String | "Todo List" | The title of the to-do list. |
| placeholder | String | "Add a new task..." | Placeholder text for input field. |
| initialTasks | Array | [{ text: 'Learn Vue', completed: false }] | List of tasks to display. |
| maxTasks | Int | 5 | MAximum number of Tasks. |
Methods
| Method | Description |
| --------------------------- | ---------------------------- |
| addTask | Adds a new task to the list. |
| removeTask(index: number) | Removes a task by index. |
CSS Classes
| Class | Description |
| ------------- | ------------------------------------------------- |
| .todo | Wrapper for the to-do component. |
| .todo-input | Styles the input and button container. |
| .completed | Applies a strikethrough style to completed tasks. |
Usage
<Todo
title="My Tasks"
placeholder="What needs to be done?"
:initialTasks="[{ text: 'Learn Vue', completed: false }]"
:maxTasks="5"
:allowDuplicates="false"
/>