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

adjustment

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-21 17:17:56 +08:00
parent c4316e7e52
commit 222ca43afb
23 changed files with 341 additions and 293 deletions

28
lib/ui/checkbox.js

@@ -5,7 +5,7 @@ import { createIcon } from "./icon";
function fillCheckbox(container, type = 'fa-regular', label, tabindex = -1, charactor = 'check') {
container.appendChild(
createElement('layer', layer => {
layer.className = 'check-box-inner';
layer.className = 'ui-check-inner';
layer.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') {
const input = container.querySelector('input');
@@ -30,7 +30,7 @@ function fillCheckbox(container, type = 'fa-regular', label, tabindex = -1, char
}
function createRadiobox(opts = {}) {
const container = createElement('label', 'checkbox-wrapper radiobox-wrapper',
const container = createElement('label', 'ui-check-wrapper ui-radio-wrapper',
createElement('input', input => {
input.setAttribute('type', 'radio');
input.name = opts.name;
@@ -52,12 +52,12 @@ function createRadiobox(opts = {}) {
if (opts.className) {
container.classList.add(opts.className);
}
fillCheckbox(container, opts.type, opts.label, opts.tabindex, 'circle');
fillCheckbox(container, opts.type, opts.label, opts.tabIndex, 'circle');
return container;
}
function createCheckbox(opts = {}) {
const container = createElement('label', 'checkbox-wrapper',
const container = createElement('label', 'ui-check-wrapper',
createElement('input', input => {
input.setAttribute('type', 'checkbox');
if (opts.checked === true) {
@@ -82,7 +82,7 @@ function createCheckbox(opts = {}) {
container.classList.add('disabled');
}
if (opts.checkedNode != null && opts.uncheckedNode != null) {
container.classList.add('checkbox-image');
container.classList.add('ui-check-image-wrapper');
let height = opts.imageHeight;
if (isNaN(height) || height <= 0) {
height = 14;
@@ -92,7 +92,7 @@ function createCheckbox(opts = {}) {
opts.uncheckedNode.classList.add('unchecked');
container.appendChild(opts.uncheckedNode);
} else {
fillCheckbox(container, opts.type, opts.label, opts.tabindex);
fillCheckbox(container, opts.type, opts.label, opts.tabIndex);
}
return container;
}
@@ -101,7 +101,7 @@ function resolveCheckbox(container = document.body, legacy) {
if (legacy) {
const checks = container.querySelectorAll('input[type="checkbox"]');
for (let chk of checks) {
if (chk.parentElement.classList.contains('checkbox-wrapper')) {
if (chk.parentElement.classList.contains('ui-check-wrapper')) {
// skip
continue;
}
@@ -139,9 +139,9 @@ function resolveCheckbox(container = document.body, legacy) {
text = label.innerText;
}
if (chk.disabled) {
label.className = 'checkbox-wrapper disabled';
label.className = 'ui-check-wrapper disabled';
} else {
label.className = 'checkbox-wrapper';
label.className = 'ui-check-wrapper';
}
label.replaceChildren();
fillCheckbox(label, 'fa-regular', text, chk.tabIndex);
@@ -150,18 +150,18 @@ function resolveCheckbox(container = document.body, legacy) {
}
const boxes = container.querySelectorAll('label[data-checkbox]');
for (let box of boxes) {
if (!box.classList.contains('checkbox-wrapper')) {
box.classList.add('checkbox-wrapper');
if (!box.classList.contains('ui-check-wrapper')) {
box.classList.add('ui-check-wrapper');
}
if (box.hasChildNodes()) {
if (!box.classList.contains('checkbox-image')) {
box.classList.add('checkbox-image');
if (!box.classList.contains('ui-check-image-wrapper')) {
box.classList.add('ui-check-image-wrapper');
}
} else {
fillCheckbox(box,
box.dataset.type,
box.dataset.label,
box.dataset.tabindex)
box.dataset.tabIndex)
box.removeAttribute('data-type');
box.removeAttribute('data-label');
}