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

Search select now uses new converter template.

Browse Source
This commit is contained in:
MattMo 2023-07-25 23:20:43 -07:00
parent a52f0e86a1
commit e0cee31096
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
search-select.js
View File

@ -1,6 +1,6 @@
import { IgniteHtml } from '../ignite-html/ignite-html.js'; import { IgniteHtml } from '../ignite-html/ignite-html.js';
import { IgniteElement } from "../ignite-html/ignite-element.js"; import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, button, ul, slot, span, div } from "../ignite-html/ignite-template.js"; import { IgniteTemplate, button, ul, slot, span, div, html, converter } from "../ignite-html/ignite-template.js";
import { IgniteProperty } from "../ignite-html/ignite-html.js"; import { IgniteProperty } from "../ignite-html/ignite-html.js";
import { Popper } from "./popper.js"; import { Popper } from "./popper.js";
@ -31,16 +31,23 @@ class SearchSelect extends IgniteElement {
render() { render() {
return this.template return this.template
.class("w-100 position-relative") .class("w-100 position-relative form-control form-control-lg d-flex flex-row")
.attribute("tabindex", "0") .attribute("tabindex", "0")
.child( .child(
new div() new div()
.class("form-control form-control-lg") .style("flex", 1)
.innerHTML(this.value) .style("border", "none")
.style("outline", "none")
.style("overflow", "auto")
.attribute("contenteditable", true) .attribute("contenteditable", true)
.data("placeholder", this.placeholder)
.ref(this.inputElement), .ref(this.inputElement),
new div().child(
new converter(this.value, this.optionsRenderer)
),
new button().class("btn btn-none").child("<i class='fa-solid fa-times' />"),
new Popper().class("form-control form-control-lg shadow").property("show", true).child( new Popper().class("form-control form-control-lg shadow").property("show", true).child(
"Test" "Test"
) )