diff --git a/index.html b/index.html
index f3040f2..cef7c46 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,7 @@
A better muli-option input box for HTML
-
+
Placeholder...
diff --git a/package.json b/package.json
index 5d369ca..b2de09e 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,6 @@
"browser": "src/BetterSelect.js",
"type": "module",
"license": "MIT",
- "version": "1.3.1",
+ "version": "1.4.0",
"url": "https://darkwiiplayer.github.io/BetterSelect/"
}
diff --git a/readme.md b/readme.md
index 4a3e852..7212935 100644
--- a/readme.md
+++ b/readme.md
@@ -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
-* `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
## Parts
@@ -18,9 +23,9 @@
* `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
-## 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
diff --git a/src/BetterSelect.js b/src/BetterSelect.js
index 7b06aa4..c0afda6 100644
--- a/src/BetterSelect.js
+++ b/src/BetterSelect.js
@@ -1,3 +1,4 @@
+
const template = fn => {
return (arr, ...params) => {
if (arr instanceof Array) {
@@ -57,6 +58,7 @@ export class BetterSelect extends HTMLElement {
#internals = this.attachInternals()
static formAssociated = true
+ static observedAttributes = Object.freeze(["placeholder", "search-placeholder"])
static styleSheet = css`
: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() {
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)
+ }
}
+