migrate ui library

lib/ui/checkbox.js

@@ -0,0 +1,76 @@
+import { createIcon } from "./icon";
+
+function fillCheckbox(container, type, label) {
+    const layer = document.createElement('layer');
+    layer.className = 'check-box-inner';
+    layer.appendChild(createIcon(type, 'check'));
+    container.appendChild(layer);
+    if (label != null && label.length > 0) {
+        const span = document.createElement('span');
+        span.innerText = label;
+        container.appendChild(span);
+    }
+}
+
+function createCheckbox(opts) {
+    opts ??= {};
+    const container = document.createElement('label');
+    container.className = 'checkbox-wrapper';
+    const input = document.createElement('input');
+    input.setAttribute('type', 'checkbox');
+    if (typeof opts.onchange === 'function') {
+        input.addEventListener('change', opts.onchange);
+    }
+    container.appendChild(input);
+    if (opts.isImage) {
+        container.classList.add('checkbox-image');
+        let height = opts.imageHeight;
+        if (isNaN(height) || height <= 0) {
+            height = 14;
+        }
+        if (opts.checkedNode != null) {
+            if (!opts.checkedNode.classList.contains('checked')) {
+                opts.checkedNode.classList.add('checked');
+            }
+            container.appendChild(opts.checkedNode);
+        }
+        if (opts.uncheckedNode != null) {
+            if (!opts.uncheckedNode.classList.contains('unchecked')) {
+                opts.uncheckedNode.classList.add('unchecked');
+            }
+            container.appendChild(opts.uncheckedNode);
+        }
+    } else {
+        fillCheckbox(container, opts.type || 'fa-regular', opts.label);
+    }
+    return container;
+}
+
+function resolveCheckbox(container) {
+    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.hasChildNodes()) {
+            if (!box.classList.contains('checkbox-image')) {
+                box.classList.add('checkbox-image');
+            }
+        } else {
+            const type = box.getAttribute('data-type') || 'fa-regular';
+            const label = box.getAttribute('data-label');
+            fillCheckbox(box, type, label)
+            box.removeAttribute('data-type');
+            box.removeAttribute('data-label');
+        }
+        const input = document.createElement('input');
+        input.setAttribute('type', 'checkbox');
+        box.insertBefore(input, box.firstChild);
+    }
+    return container;
+}
+
+export {
+    createCheckbox,
+    resolveCheckbox
+}