diff --git a/src/api/interface.js b/src/api/interface.js
index 1504f55..fab4eb2 100644
--- a/src/api/interface.js
+++ b/src/api/interface.js
@@ -544,6 +544,7 @@ const h = (type, props, ...children) => {
: document.createElement(type);
for (const prop in props ?? {}) {
if (htmlAttributes.includes(prop) || prop.startsWith("data-")) {
+ if (typeof props[prop] === "boolean" && !props[prop]) continue;
elem.setAttribute(prop, props[prop]);
} else elem[prop] = props[prop];
}
diff --git a/src/core/menu/components.mjs b/src/core/menu/components.mjs
index 62d4f73..93bb7a4 100644
--- a/src/core/menu/components.mjs
+++ b/src/core/menu/components.mjs
@@ -69,46 +69,53 @@ function View({ id }, ...children) {
return $el;
}
-function Option({ mod, type, ...props }) {
+function Option({ type, value, description, _update, ...props }) {
const { html } = globalThis.__enhancerApi,
camelToSentenceCase = (string) =>
string[0].toUpperCase() +
string.replace(/[A-Z]/g, (match) => ` ${match.toLowerCase()}`).slice(1);
+ let $input;
const label = props.label ?? camelToSentenceCase(props.key),
- description = props.description;
- if (type === "heading") {
- return html``;
- }
-
- let $input;
- switch (type) {
+ >
+ ${label}
+ `;
case "text":
- $input = html`<${TextInput} value=${props.value} />`;
+ $input = html`<${TextInput} ...${{ value, onchange }} />`;
break;
case "number":
- $input = html`<${NumberInput} value=${props.value} />`;
+ $input = html`<${NumberInput} ...${{ value, onchange }} />`;
break;
case "hotkey":
- $input = html`<${HotkeyInput} value=${props.value} />`;
+ $input = html`<${HotkeyInput} ...${{ value, onchange }} />`;
break;
case "color":
- $input = html`<${ColorInput} value=${props.value} />`;
+ $input = html`<${ColorInput} ...${{ value, onchange }} />`;
break;
case "file":
- $input = html`<${FileInput} extensions=${props.extensions} />`;
+ $input = html`<${FileInput}
+ extensions="${props.extensions}"
+ onchange=${onchange}
+ />`;
break;
case "select":
- $input = html`<${Select} values=${props.values} />`;
+ $input = html`<${Select}
+ values=${props.values}
+ ...${{ value, onchange }}
+ />`;
break;
case "toggle":
- $input = html`<${Toggle} />`;
+ $input = html`<${Toggle}
+ checked=${value}
+ onchange=${(event) => _update(event.target.checked)}
+ />`;
}
return html`<${type === "toggle" ? "label" : "div"}
class="notion-enhancer--menu-option flex items-center justify-between
@@ -189,10 +196,12 @@ function HotkeyInput({ value, onkeydown, ...props }) {
if (event.code === "Period") key = ".";
if (key === "Control") key = "Ctrl";
// avoid e.g. Shift+Shift, force inclusion of non-modifier
- if (keys.includes(event.key)) return;
+ if (keys.includes(key)) return;
keys.push(key.length === 1 ? key.toUpperCase() : key);
event.target.value = keys.join("+");
}
+ event.target.dispatchEvent(new Event("input"));
+ event.target.dispatchEvent(new Event("change"));
};
props.onkeydown = (event) => {
updateHotkey(event);
@@ -292,7 +301,7 @@ function FileInput({ extensions, ...props }) {
`;
}
-function Select({ values, onchange, ...props }) {
+function Select({ values, value, onchange, ...props }) {
const { html } = globalThis.__enhancerApi,
updateWidth = ($select) => {
const $tmp = html``;
})}
`;
+ $select.value = value ?? $select.value;
updateWidth($select);
return html`