diff --git a/src/core/menu/components.mjs b/src/core/menu/components.mjs
index e8720a6..c55b909 100644
--- a/src/core/menu/components.mjs
+++ b/src/core/menu/components.mjs
@@ -224,74 +224,69 @@ function Option({ type, value, description, _get, _set, ...props }) {
`;
}
-function TextInput({ _get, _set, ...props }) {
+function Input({ wide, transparent, icon, onrerender, ...props }) {
const { html } = globalThis.__enhancerApi,
$input = html``;
-
- const { onchange } = $input;
- $input.onchange = (event) => {
- onchange?.(event);
- _set?.($input.value);
- };
- useState(["rerender"], () => {
- _get?.().then((value) => ($input.value = value));
- });
-
- return html``;
-}
-
-function NumberInput({ _get, _set, ...props }) {
- const { html } = globalThis.__enhancerApi,
- $input = html``;
-
- const { onchange } = $input;
- $input.onchange = (event) => {
- onchange?.(event);
- _set?.($input.value);
- };
- useState(["rerender"], () => {
- _get?.().then((value) => ($input.value = value));
- });
-
- return html``;
-}
-
-function HotkeyInput({ _get, _set, ...props }) {
- const { html } = globalThis.__enhancerApi,
- $input = html``,
+ $icon = html``;
+ useState(["rerender"], () => onrerender?.($input, $icon));
+ return html``;
+}
+
+function TextInput({ _get, _set, onchange, ...props }) {
+ const { html } = globalThis.__enhancerApi;
+ return html`<${Input}
+ wide
+ type="text"
+ icon="text-cursor"
+ onchange=${(event) => {
+ onchange?.(event);
+ _set?.(event.target.value);
+ }}
+ onrerender=${($input) => {
+ _get?.().then((value) => ($input.value = value));
+ }}
+ ...${props}
+ />`;
+}
+
+function NumberInput({ _get, _set, onchange, ...props }) {
+ const { html } = globalThis.__enhancerApi;
+ return html`<${Input}
+ type="number"
+ icon="hash"
+ onchange=${(event) => {
+ onchange?.(event);
+ _set?.(event.target.value);
+ }}
+ onrerender=${($input) => {
+ _get?.().then((value) => ($input.value = value));
+ }}
+ ...${props}
+ />`;
+}
+
+function HotkeyInput({ _get, _set, onkeydown, ...props }) {
+ const { html } = globalThis.__enhancerApi,
updateHotkey = (event) => {
event.preventDefault();
const keys = [];
@@ -301,7 +296,7 @@ function HotkeyInput({ _get, _set, ...props }) {
keys.push(alias);
}
if (!keys.length && ["Backspace", "Delete"].includes(event.key)) {
- $input.value = "";
+ event.target.value = "";
} else if (event.key) {
let key = event.key;
if (key === " ") key = "Space";
@@ -313,49 +308,30 @@ function HotkeyInput({ _get, _set, ...props }) {
// avoid e.g. Shift+Shift, force inclusion of non-modifier
if (keys.includes(key)) return;
keys.push(key.length === 1 ? key.toUpperCase() : key);
- $input.value = keys.join("+");
+ event.target.value = keys.join("+");
}
- $input.dispatchEvent(new Event("input"));
- $input.dispatchEvent(new Event("change"));
+ event.target.dispatchEvent(new Event("input"));
+ event.target.dispatchEvent(new Event("change"));
};
-
- const { onkeydown } = $input;
- $input.onkeydown = (event) => {
- updateHotkey(event);
- onkeydown?.(event);
- _set?.($input.value);
- };
- useState(["rerender"], () => {
- _get?.().then((value) => ($input.value = value));
- });
-
- return html``;
+ return html`<${Input}
+ type="text"
+ icon="command"
+ onkeydown=${(event) => {
+ updateHotkey(event);
+ onkeydown?.(event);
+ _set?.(event.target.value);
+ }}
+ onrerender=${($input) => {
+ _get?.().then((value) => ($input.value = value));
+ }}
+ ...${props}
+ />`;
}
-function ColorInput({ _get, _set, ...props }) {
+function ColorInput({ _get, _set, oninput, ...props }) {
Coloris({ format: "rgb" });
const { html } = globalThis.__enhancerApi,
- $input = html``,
- $icon = html``,
- updateContrast = () => {
+ updateContrast = ($input, $icon) => {
$input.style.background = $input.value;
const [r, g, b, a = 1] = $input.value
.replace(/^rgba?\(/, "")
@@ -369,30 +345,25 @@ function ColorInput({ _get, _set, ...props }) {
$input.style.color = Math.sqrt(brightness) > 165.75 ? "#000" : "#fff";
} else $input.style.color = "#000";
$icon.style.color = $input.style.color;
+ $icon.style.opacity = "0.7";
};
-
- const { oninput } = $input;
- $input.oninput = (event) => {
- oninput?.(event);
- _set?.($input.value);
- updateContrast();
- };
- useState(["rerender"], () => {
- _get?.().then((value) => {
- $input.value = value;
- updateContrast();
- });
- });
-
- return html``;
+ return html`<${Input}
+ transparent
+ type="text"
+ icon="pipette"
+ data-coloris
+ oninput=${(event) => {
+ oninput?.(event);
+ _set?.(event.target.value);
+ }}
+ onrerender=${($input, $icon) => {
+ _get?.().then((value) => {
+ $input.value = value;
+ updateContrast($input, $icon);
+ });
+ }}
+ ...${props}
+ />`;
}
function FileInput({ extensions, _get, _set, ...props }) {
@@ -438,8 +409,8 @@ function FileInput({ extensions, _get, _set, ...props }) {