Spaces:
Running
Running
File size: 2,176 Bytes
ab59162 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | class TaskFilter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.filter-container {
@apply mb-6 p-4 bg-white rounded-lg shadow-md;
}
.filter-row {
@apply flex flex-wrap items-center gap-4;
}
select, input {
@apply px-3 py-2 border border-gray-300 rounded-md;
}
button {
@apply px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700;
}
</style>
<div class="filter-container">
<div class="filter-row">
<select id="statusFilter">
<option value="all">All Statuses</option>
<option value="completed">Completed</option>
<option value="pending">Pending</option>
<option value="overdue">Overdue</option>
</select>
<select id="priorityFilter">
<option value="all">All Priorities</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
<input type="date" id="dateFilter">
<button id="applyFilter">Apply</button>
<button id="resetFilter">Reset</button>
</div>
</div>
`;
this.shadowRoot.getElementById('applyFilter').addEventListener('click', () => {
const filters = {
status: this.shadowRoot.getElementById('statusFilter').value,
priority: this.shadowRoot.getElementById('priorityFilter').value,
date: this.shadowRoot.getElementById('dateFilter').value
};
this.dispatchEvent(new CustomEvent('filter-changed', { detail: filters }));
});
this.shadowRoot.getElementById('resetFilter').addEventListener('click', () => {
this.shadowRoot.getElementById('statusFilter').value = 'all';
this.shadowRoot.getElementById('priorityFilter').value = 'all';
this.shadowRoot.getElementById('dateFilter').value = '';
this.dispatchEvent(new CustomEvent('filter-changed', { detail: {} }));
});
}
}
customElements.define('task-filter', TaskFilter); |