darkwiiplayer/BetterSelect
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rename files

Browse source
This commit is contained in:
Talia 2025-01-31 14:53:09 +01:00
parent 7963660e2d
commit 7a9048558d
Signed by: darkwiiplayer
GPG key ID: 7808674088232B3E
3 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
package.json
View file

@ -1,9 +1,12 @@
{ {
"name": "@darkwiiplayer/better-select", "name": "@darkwiiplayer/better-select",
"browser": "src/BetterSelect.js", "exports": {
".": "./src/better-select.js",
"./styles": "./src/better-select.css"
},
"type": "module", "type": "module",
"license": "MIT", "license": "MIT",
"version": "1.5.5", "version": "2.0.0",
"url": "https://darkwiiplayer.github.io/BetterSelect/", "url": "https://darkwiiplayer.github.io/BetterSelect/",
"scripts": { "scripts": {
"definitions": "tsc src/*.js --declaration --allowJs --emitDeclarationOnly" "definitions": "tsc src/*.js --declaration --allowJs --emitDeclarationOnly"

4
src/BetterSelect.css → src/better-select.css
View file

@ -66,7 +66,7 @@ better-select {
background-color: var(--highlight); background-color: var(--highlight);
} }
&:not(:state(--open))::part(drop-down) { &:not(:state(open))::part(drop-down) {
transform: scale(100%, 70%) translate(0, -30%); transform: scale(100%, 70%) translate(0, -30%);
opacity: 0; opacity: 0;
} }
@ -80,7 +80,7 @@ better-select {
transition: transform .3s var(--overshoot); transition: transform .3s var(--overshoot);
} }
&:state(--open)::part(display)::after { &:state(open)::part(display)::after {
transform: rotate(180deg); transform: rotate(180deg);
} }
} }

12
src/BetterSelect.js → src/better-select.js
View file

@ -145,7 +145,7 @@ export class BetterSelect extends HTMLElement {
slot[name="loading"] { slot[name="loading"] {
display: none; display: none;
} }
:host(:state(--loading)) { :host(:state(loading)) {
[part="list"] { display: none; } [part="list"] { display: none; }
slot[name="loading"] { display: block; } slot[name="loading"] { display: block; }
} }
@ -206,7 +206,7 @@ export class BetterSelect extends HTMLElement {
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.#internals.states.has("--open")) { } else if (!this.#internals.states.has("open")) {
this.open() this.open()
} 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()
@ -215,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.#internals.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()
@ -325,10 +325,10 @@ export class BetterSelect extends HTMLElement {
this.#internals.states.add("open") this.#internals.states.add("open")
if ("populate" in this) { if ("populate" in this) {
this.#internals.states.add("--loading") this.#internals.states.add("loading")
// @ts-ignore // @ts-ignore
await this.populate() await this.populate()
this.#internals.states.delete("--loading") this.#internals.states.delete("loading")
} }
} }
@ -338,7 +338,7 @@ export class BetterSelect extends HTMLElement {
hidden.removeAttribute("hidden") hidden.removeAttribute("hidden")
this.#abortOpen?.abort() this.#abortOpen?.abort()
this.#abortOpen = null this.#abortOpen = null
this.#internals.states.delete("--open") this.#internals.states.delete("open")
this.dialog.close() this.dialog.close()
} }