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(

10
chip.js
View File

@@ -1,6 +1,6 @@
import { IgniteHtml } from '../ignite-html/ignite-html.js';
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot, button, span } from "../ignite-html/ignite-template.js";
import { IgniteTemplate, slot, button, span, i } from "../ignite-html/ignite-template.js";
class Chip extends IgniteElement {
constructor() {
@@ -21,8 +21,8 @@ class Chip extends IgniteElement {
mt-chip {
border-radius: 1em;
background-color: #e0e0e0;
padding-top: 0.3em;
padding-bottom: 0.3em;
padding-top: 0.2em;
padding-bottom: 0.2em;
padding-left: 0.6em;
padding-right: 0.6em;
display: flex;
@@ -44,8 +44,8 @@ class Chip extends IgniteElement {
.child(
new slot(this),
new button()
.class("btn ml-2 p-0")
.child(`<i class="fal fa-times"></i>`)
.class("btn ms-2 p-0")
.child(new i().class("fa-solid fa-circle-x"))
.style("color", this.color)
.style("line-height", "1")
.style("border", "none")