fix: update header content to be rendered from index directly
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
class SearchBar extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.attachShadow({ mode: "open" });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
@@ -14,24 +14,28 @@ class SearchBar extends HTMLElement {
|
||||
}
|
||||
|
||||
addEventListeners() {
|
||||
const input = this.shadowRoot.querySelector('.search-input');
|
||||
const form = this.shadowRoot.querySelector('.search-form');
|
||||
const input = this.shadowRoot.querySelector(".search-input");
|
||||
const form = this.shadowRoot.querySelector(".search-form");
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
form.addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
this.dispatchEvent(new CustomEvent('search', {
|
||||
detail: { query: input.value },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("search", {
|
||||
detail: { query: input.value },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
input.addEventListener('input', (e) => {
|
||||
this.dispatchEvent(new CustomEvent('search-input', {
|
||||
detail: { query: e.target.value },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
input.addEventListener("input", (e) => {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("search-input", {
|
||||
detail: { query: e.target.value },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -46,6 +50,8 @@ class SearchBar extends HTMLElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.5rem);
|
||||
background-color: #951D51;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
@@ -95,4 +101,4 @@ class SearchBar extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('search-bar', SearchBar);
|
||||
customElements.define("search-bar", SearchBar);
|
||||
|
||||
Reference in New Issue
Block a user