mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-08 06:29:03 +00:00
52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
/**
|
|
* notion-enhancer
|
|
* (c) 2023 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
|
* (https://notion-enhancer.github.io/) under the MIT license
|
|
*/
|
|
|
|
"use strict";
|
|
|
|
function Checkbox({ _get, _set, _requireReload = true, ...props }) {
|
|
let _initialValue;
|
|
const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
|
|
$input = html`<input
|
|
type="checkbox"
|
|
class="hidden checked:&+div:(px-px
|
|
bg-[color:var(--theme--accent-primary)])
|
|
not-checked:&+div:(&>i:text-transparent
|
|
border-(& [color:var(--theme--fg-primary)])
|
|
hover:bg-[color:var(--theme--bg-hover)])"
|
|
...${props}
|
|
/>`;
|
|
extendProps($input, { onchange: () => _set?.($input.checked) });
|
|
useState(["rerender"], async () => {
|
|
const checked = (await _get?.()) ?? $input.checked;
|
|
$input.checked = checked;
|
|
if (_requireReload) {
|
|
_initialValue ??= checked;
|
|
if (checked !== _initialValue) setState({ databaseUpdated: true });
|
|
}
|
|
});
|
|
|
|
return html`<label
|
|
tabindex="0"
|
|
class="notion-enhancer--menu-checkbox cursor-pointer"
|
|
onkeydown=${(event) => {
|
|
if ([" ", "Enter"].includes(event.key)) {
|
|
event.preventDefault();
|
|
$input.click();
|
|
}
|
|
}}
|
|
>
|
|
${$input}
|
|
<div class="flex items-center h-[16px] transition duration-200">
|
|
<i
|
|
class="i-check size-[14px]
|
|
text-[color:var(--theme--accent-primary\\_contrast)]"
|
|
></i>
|
|
</div>
|
|
</label>`;
|
|
}
|
|
|
|
export { Checkbox };
|