Fix typescript config
This commit is contained in:
parent
86ac495feb
commit
b1391ed82e
3 changed files with 16 additions and 29 deletions
|
@ -1,9 +1,6 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"lib": ["ESNext", "DOM"],
|
"target": "es2020",
|
||||||
"target": "ESNext",
|
|
||||||
"module": "ESNext",
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"checkJs": true
|
"checkJs": true
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,6 @@
|
||||||
"browser": "src/BetterSelect.js",
|
"browser": "src/BetterSelect.js",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"version": "1.5.3",
|
"version": "1.5.4",
|
||||||
"url": "https://darkwiiplayer.github.io/BetterSelect/"
|
"url": "https://darkwiiplayer.github.io/BetterSelect/"
|
||||||
}
|
}
|
||||||
|
|
|
@ -75,10 +75,6 @@ export class BetterSelect extends HTMLElement {
|
||||||
|
|
||||||
#internals = this.attachInternals()
|
#internals = this.attachInternals()
|
||||||
|
|
||||||
/** @type {Set<String>} */
|
|
||||||
// @ts-ignore
|
|
||||||
#states = this.#internals.states
|
|
||||||
|
|
||||||
static formAssociated = true
|
static formAssociated = true
|
||||||
static observedAttributes = Object.freeze(["placeholder", "search-placeholder", "required"])
|
static observedAttributes = Object.freeze(["placeholder", "search-placeholder", "required"])
|
||||||
|
|
||||||
|
@ -196,25 +192,22 @@ export class BetterSelect extends HTMLElement {
|
||||||
|
|
||||||
this.#internals.role = "combobox"
|
this.#internals.role = "combobox"
|
||||||
|
|
||||||
// @ts-ignore
|
this.options = this.getElementsByTagName("option")
|
||||||
this.options = /** @type {HTMLOptionElement[]} */(this.getElementsByTagName("option"))
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
for (const element of this.shadowRoot.querySelectorAll(`[id]`)) {
|
for (const element of this.shadowRoot.querySelectorAll(`[id]`)) {
|
||||||
this[element.id] = element
|
this[element.id] = element
|
||||||
}
|
}
|
||||||
|
|
||||||
this.shadowRoot.addEventListener("click", event => {
|
this.shadowRoot.addEventListener("click", event => {
|
||||||
|
if (!(event.target instanceof HTMLElement)) return
|
||||||
/** @type {HTMLLIElement} */
|
/** @type {HTMLLIElement} */
|
||||||
// @ts-ignore
|
|
||||||
const item = event.target.closest("#list > li")
|
const item = event.target.closest("#list > li")
|
||||||
if (item) {
|
if (item) {
|
||||||
this.setOption(item)
|
this.setOption(item)
|
||||||
this.dispatchEvent(new InputEvent("input", {bubbles: true}))
|
this.dispatchEvent(new InputEvent("input", {bubbles: true}))
|
||||||
this.close()
|
this.close()
|
||||||
} else if (!this.#states.has("--open")) {
|
} else if (!this.#internals.states.has("--open")) {
|
||||||
this.open()
|
this.open()
|
||||||
// @ts-ignore
|
|
||||||
} else if (this.display.contains(event.target) || this.display.contains(event.target.closest("[slot]")?.assignedSlot)) {
|
} else if (this.display.contains(event.target) || this.display.contains(event.target.closest("[slot]")?.assignedSlot)) {
|
||||||
this.close()
|
this.close()
|
||||||
}
|
}
|
||||||
|
@ -222,7 +215,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
|
|
||||||
this.addEventListener("keydown", event => {
|
this.addEventListener("keydown", event => {
|
||||||
const key = event.key
|
const key = event.key
|
||||||
if (this.#states.has("--open")) {
|
if (this.#internals.states.has("--open")) {
|
||||||
if (key == " " && this.list.contains(this.shadowRoot.activeElement)) {
|
if (key == " " && this.list.contains(this.shadowRoot.activeElement)) {
|
||||||
this.close()
|
this.close()
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
@ -251,8 +244,8 @@ export class BetterSelect extends HTMLElement {
|
||||||
})
|
})
|
||||||
|
|
||||||
this.shadowRoot.addEventListener("input", event => {
|
this.shadowRoot.addEventListener("input", event => {
|
||||||
// @ts-ignore
|
/** @type {HTMLInputElement} */
|
||||||
const item = event.target.closest("#input")
|
const item = /** @type {HTMLElement} */(event.target).closest("#input")
|
||||||
if (item) {
|
if (item) {
|
||||||
this.search(item.value)
|
this.search(item.value)
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
|
@ -284,9 +277,8 @@ export class BetterSelect extends HTMLElement {
|
||||||
|
|
||||||
/** @param {string} search */
|
/** @param {string} search */
|
||||||
closedSearch(search) {
|
closedSearch(search) {
|
||||||
// @ts-ignore
|
|
||||||
for (const item of this.list.children) {
|
for (const item of this.list.children) {
|
||||||
if (this.match(search, item)) {
|
if ((item instanceof HTMLElement) && this.match(search, item)) {
|
||||||
this.setOption(item)
|
this.setOption(item)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
@ -330,25 +322,23 @@ export class BetterSelect extends HTMLElement {
|
||||||
}, {signal})
|
}, {signal})
|
||||||
|
|
||||||
this.dialog.show()
|
this.dialog.show()
|
||||||
this.#states.add("open")
|
this.#internals.states.add("open")
|
||||||
|
|
||||||
if ("populate" in this) {
|
if ("populate" in this) {
|
||||||
this.#states.add("--loading")
|
this.#internals.states.add("--loading")
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
await this.populate()
|
await this.populate()
|
||||||
this.#states.delete("--loading")
|
this.#internals.states.delete("--loading")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
close() {
|
close() {
|
||||||
this.input.value = null
|
this.input.value = null
|
||||||
// @ts-ignore
|
|
||||||
for (const hidden of this.list.querySelectorAll("[hidden]"))
|
for (const hidden of this.list.querySelectorAll("[hidden]"))
|
||||||
hidden.removeAttribute("hidden")
|
hidden.removeAttribute("hidden")
|
||||||
this.#abortOpen?.abort()
|
this.#abortOpen?.abort()
|
||||||
this.#abortOpen = null
|
this.#abortOpen = null
|
||||||
// @ts-ignore
|
this.#internals.states.delete("--open")
|
||||||
this.#states.delete("--open")
|
|
||||||
this.dialog.close()
|
this.dialog.close()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -356,9 +346,9 @@ export class BetterSelect extends HTMLElement {
|
||||||
|
|
||||||
/** @param {String} value */
|
/** @param {String} value */
|
||||||
search(value) {
|
search(value) {
|
||||||
// @ts-ignore
|
|
||||||
for (const item of this.list.children) {
|
for (const item of this.list.children) {
|
||||||
item.toggleAttribute("hidden", !this.match(value, item))
|
if (item instanceof HTMLElement)
|
||||||
|
item.toggleAttribute("hidden", !this.match(value, item))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -415,7 +405,7 @@ export class BetterSelect extends HTMLElement {
|
||||||
if (value === undefined) {
|
if (value === undefined) {
|
||||||
this.clear()
|
this.clear()
|
||||||
} else {
|
} else {
|
||||||
for (const option of Array.from(this.options)) {
|
for (const option of this.options) {
|
||||||
if (option.value === String(value)) {
|
if (option.value === String(value)) {
|
||||||
this.setValue(option.value, option.innerText)
|
this.setValue(option.value, option.innerText)
|
||||||
return
|
return
|
||||||
|
|
Loading…
Reference in a new issue