MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Cleaning up code and improving chip list.

Browse Source
This commit is contained in:
MattMo
2025-09-24 14:31:07 -07:00
parent 1f26bf5b18
commit 449a5eb896
2 changed files with 20 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
chip-list.js
View File

@@ -12,40 +12,17 @@ class ChipList extends IgniteElement {
get styles() {
return /*css*/`
mt-chip-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
border: solid 0.13rem #ced4da;
border-radius: 0.3rem;
padding: 0.4rem;
}
mt-chip-list.no-border {
border-color: transparent;
}
mt-chip-list:focus {
outline: none;
}
mt-chip-list:hover {
cursor: pointer;
}
mt-chip-list.editing {
border: solid 0.13rem rgba(0,0,0,0.1);
border-radius: 0.3rem;
outline: 0;
box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
border-color: var(--bs-primary-border-subtle);
}
mt-chip-list.placeholder {
border: solid 0.13rem #ced4da;
border-radius: 0.3rem;
color: rgba(0,0,0,0.6);
}
mt-chip-list > .input-container {
mt-chip-list .input-container {
display: flex;
flex-direction: column;
justify-content: center;
@@ -54,7 +31,7 @@ class ChipList extends IgniteElement {
flex-shrink: 1;
}
mt-chip-list > .input-container > .input {
mt-chip-list .input-container > .input {
outline: none;
}
@@ -97,18 +74,15 @@ class ChipList extends IgniteElement {
render() {
return this.template
.style("position", "relative")
.class(this.border, value => value ? null : "no-border")
.class("form-control form-control-lg position-relative d-flex flex-row flex-wrap gap-2 align-items-center")
.class(this.editing, value => value ? "editing" : null)
.attribute("tabindex", "0")
.onFocus(e => this.onFocus())
.class([this.editing, this.items], (editing, items) => {
return !editing && (items == null || items.length == 0) ? "placeholder" : null;
})
.child(
new span(this.placeholder).hide([this.editing, this.items], (editing, items) => {
return editing || (items != null && items.length > 0);
}),
//Placeholder
new span().class("text-muted").child(this.placeholder).hide([this.editing, this.items], (editing, items) => editing || (items != null && items.length > 0)),
//Chips
new list(this.items, (item) => {
return new Chip()
.id(item.id)
@@ -121,6 +95,8 @@ class ChipList extends IgniteElement {
})
.child(item.content);
}),
//Text input
new div()
.class("input-container")
.child(
@@ -218,7 +194,9 @@ class ChipList extends IgniteElement {
this.onSearchCallback = setTimeout(() => this.onSearch(this, this.input.textContent.trim()), this.onSearchDelay);
}
})
),
),
//Search results popper
new Popper()
.property("show", this.searching)
.child(