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

Add support for placeholders as attributes

Browse source
This commit is contained in:
Talia 2025-01-17 13:21:36 +01:00
parent 3f7d435fff
commit 5490237d88
4 changed files with 37 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -50,7 +50,7 @@
<p>A better muli-option input box for HTML</p> <p>A better muli-option input box for HTML</p>
<better-select name="better-selection" class="search"> <better-select name="better-selection" class="search" placeholder="Placeholder..." search-placeholder="Search...">
<span slot="placeholder">Placeholder...</span> <span slot="placeholder">Placeholder...</span>
<option value="first">First value</option> <option value="first">First value</option>
<option value="second">Second value</option> <option value="second">Second value</option>

2
package.json
View file

@ -3,6 +3,6 @@
"browser": "src/BetterSelect.js", "browser": "src/BetterSelect.js",
"type": "module", "type": "module",
"license": "MIT", "license": "MIT",
"version": "1.3.1", "version": "1.4.0",
"url": "https://darkwiiplayer.github.io/BetterSelect/" "url": "https://darkwiiplayer.github.io/BetterSelect/"
} }

11
readme.md
View file

@ -1,6 +1,11 @@
## Attributes
* `placeholder` Placeholder displayed when nothing is selected
* `search-placeholder` Placeholder passed to the search input in the drop-down
## Slots ## Slots
* `placeholder`: Only shown when nothing is selected * `placeholder`: Only shown when nothing is selected (replaces attribute placeholder if present)
* `loading`: Hidden by default, shown instead of items while `populate()` runs * `loading`: Hidden by default, shown instead of items while `populate()` runs
## Parts ## Parts
@ -18,9 +23,9 @@
* `search(string)`: Called on search input to update the list of options * `search(string)`: Called on search input to update the list of options
* `match(string, element)`: Used by `search` to compare each option to the search string * `match(string, element)`: Used by `search` to compare each option to the search string
## Attributes ## Properties
* `closeSignal`: An AbortSignal that fires when the drop-down closes * `closeSignal`: (read-only) An AbortSignal that fires when the drop-down closes
## Events ## Events

27
src/BetterSelect.js
View file

@ -1,3 +1,4 @@
const template = fn => { const template = fn => {
return (arr, ...params) => { return (arr, ...params) => {
if (arr instanceof Array) { if (arr instanceof Array) {
@ -57,6 +58,7 @@ export class BetterSelect extends HTMLElement {
#internals = this.attachInternals() #internals = this.attachInternals()
static formAssociated = true static formAssociated = true
static observedAttributes = Object.freeze(["placeholder", "search-placeholder"])
static styleSheet = css` static styleSheet = css`
:host { :host {
@ -394,7 +396,32 @@ export class BetterSelect extends HTMLElement {
} }
} }
/** Changes the placeholder displayed in the display area
* @param {string} text
*/
placeholderChanged(text) {
this.placeholder.innerText = text
}
/** Changes the placeholder displayed in the search box when the drop-down is open
* @param {string} text
*/
searchPlaceholderChanged(text) {
this.input.placeholder = text
}
clear() { clear() {
this.setValue(undefined, "") this.setValue(undefined, "")
} }
/**
* @param {String} name
* @param {String} before
* @param {String} after
*/
attributeChangedCallback(name, before, after) {
const methodName = name.replace(/-([a-z])/g, (_all, letter) => (letter.toUpperCase())) + "Changed"
if (methodName in this) this[methodName](after, before)
} }
}