tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimize style sheets, support tabIndex in popup

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-21 10:59:56 +08:00
parent cbdb2c7868
commit c4316e7e52
16 changed files with 235 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
lib/ui/checkbox.js
View File

@ -2,9 +2,23 @@ import './css/checkbox.scss';
import { createElement } from "../functions";
import { createIcon } from "./icon";
function fillCheckbox(container, type, label, charactor = 'check') {
function fillCheckbox(container, type = 'fa-regular', label, tabindex = -1, charactor = 'check') {
container.appendChild(
createElement('layer', 'check-box-inner', createIcon(type, charactor))
createElement('layer', layer => {
layer.className = 'check-box-inner';
layer.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') {
const input = container.querySelector('input');
if (input != null) {
input.checked = !input.checked;
input.dispatchEvent(new Event('change'));
}
}
});
if (tabindex >= 0) {
layer.tabIndex = tabindex;
}
}, createIcon(type, charactor))
);
if (label instanceof Element) {
container.appendChild(label);
@ -38,7 +52,7 @@ function createRadiobox(opts = {}) {
if (opts.className) {
container.classList.add(opts.className);
}
fillCheckbox(container, opts.type || 'fa-regular', opts.label, 'circle');
fillCheckbox(container, opts.type, opts.label, opts.tabindex, 'circle');
return container;
}
@ -78,7 +92,7 @@ function createCheckbox(opts = {}) {
opts.uncheckedNode.classList.add('unchecked');
container.appendChild(opts.uncheckedNode);
} else {
fillCheckbox(container, opts.type || 'fa-regular', opts.label);
fillCheckbox(container, opts.type, opts.label, opts.tabindex);
}
return container;
}
@ -130,7 +144,7 @@ function resolveCheckbox(container = document.body, legacy) {
label.className = 'checkbox-wrapper';
}
label.replaceChildren();
fillCheckbox(label, 'fa-regular', text);
fillCheckbox(label, 'fa-regular', text, chk.tabIndex);
label.insertBefore(chk, label.firstChild);
}
}
@ -144,9 +158,10 @@ function resolveCheckbox(container = document.body, legacy) {
box.classList.add('checkbox-image');
}
} else {
const type = box.dataset.type || 'fa-regular';
const label = box.dataset.label;
fillCheckbox(box, type, label)
fillCheckbox(box,
box.dataset.type,
box.dataset.label,
box.dataset.tabindex)
box.removeAttribute('data-type');
box.removeAttribute('data-label');
}