components/task-filter.js

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);