@kerkhoff-ict/solora 2.6.1 → 2.7.0

package/dist/index.css

@@ -745,6 +745,26 @@
 :root.dark .sol-input-error {
   border-color: var(--color-danger, #ff453a) !important;
 }
+.sol-input:read-only {
+  background: var(--color-bg-readonly, #f9f9f9);
+  border-color: rgba(0, 0, 0, 0.05);
+  cursor: default;
+  box-shadow: none;
+  color: var(--color-text-dark, #000);
+}
+.sol-input:read-only:hover {
+  background: var(--color-bg-readonly, #f9f9f9);
+  border-color: rgba(0, 0, 0, 0.05);
+}
+.sol-input:read-only:focus {
+  border-color: rgba(0, 0, 0, 0.1);
+  box-shadow: none;
+}
+:root.dark .sol-input:read-only {
+  background: rgba(255, 255, 255, 0.03);
+  border-color: rgba(255, 255, 255, 0.05);
+  color: var(--color-text-light, #fff);
+}
 .sol-input:hover {
   border-color: rgba(0, 0, 0, 0.2);
   background: var(--color-bg-hover, #ffffff);
@@ -1079,6 +1099,124 @@
   background: rgba(255, 255, 255, 0.2);
 }
 
+/* src/components/check.css */
+.apple-input-group {
+  margin-bottom: 1.5rem;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+}
+.apple-input-group-title {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  display: block;
+  color: var(--color-text-dark, #000);
+}
+.apple-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin-bottom: 0.6rem;
+  cursor: pointer;
+  user-select: none;
+  color: var(--color-text-dark, #000);
+}
+.apple-input-wrapper input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.apple-control {
+  position: relative;
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  background: #fff;
+  border: 1.5px solid rgba(0, 0, 0, 0.2);
+  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+.apple-checkbox .apple-control {
+  border-radius: 4px;
+}
+.apple-radio .apple-control {
+  border-radius: 50%;
+}
+.apple-input-wrapper:hover input:not(:disabled) ~ .apple-control {
+  border-color: rgba(0, 0, 0, 0.4);
+}
+.apple-input-wrapper input:checked ~ .apple-control {
+  background-color: #007aff;
+  border-color: #007aff;
+}
+.apple-checkbox .apple-control:after {
+  content: "";
+  position: absolute;
+  display: none;
+  left: 6px;
+  top: 2px;
+  width: 5px;
+  height: 10px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.apple-checkbox input:checked ~ .apple-control:after {
+  display: block;
+}
+.apple-radio .apple-control:after {
+  content: "";
+  position: absolute;
+  display: none;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: white;
+}
+.apple-radio input:checked ~ .apple-control:after {
+  display: block;
+}
+.apple-input-wrapper input:disabled ~ .apple-control {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.1);
+  cursor: not-allowed;
+}
+.apple-input-wrapper input:disabled ~ .apple-label {
+  color: rgba(0, 0, 0, 0.4);
+  cursor: not-allowed;
+}
+:root.dark .apple-input-group-title,
+:root.dark .apple-input-wrapper {
+  color: #f0f0f0;
+}
+:root.dark .apple-control {
+  background: #1c1c1e;
+  border-color: rgba(255, 255, 255, 0.3);
+}
+:root.dark .apple-input-wrapper:hover input:not(:disabled) ~ .apple-control {
+  border-color: rgba(255, 255, 255, 0.5);
+}
+:root.dark .apple-input-wrapper input:checked ~ .apple-control {
+  background-color: #0a84ff;
+  border-color: #0a84ff;
+}
+:root.dark .apple-input-wrapper input:disabled ~ .apple-control {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+:root.dark .apple-input-wrapper input:disabled ~ .apple-label {
+  color: rgba(255, 255, 255, 0.3);
+}
+
 /* src/index.css */
 :root {
   --font-body:

package/dist/index.js

@@ -2359,6 +2359,31 @@ function initPopovers() {
   });
 }
 
+// src/components/check.js
+function initCheck() {
+  const limitedGroups = document.querySelectorAll(".apple-input-group[data-max]");
+  limitedGroups.forEach((group) => {
+    const maxAllowed = parseInt(group.getAttribute("data-max"), 10);
+    const checkboxes = group.querySelectorAll('input[type="checkbox"]');
+    checkboxes.forEach((checkbox) => {
+      checkbox.addEventListener("change", () => {
+        const checkedCount = group.querySelectorAll('input[type="checkbox"]:checked').length;
+        if (checkedCount >= maxAllowed) {
+          checkboxes.forEach((cb) => {
+            if (!cb.checked) {
+              cb.disabled = true;
+            }
+          });
+        } else {
+          checkboxes.forEach((cb) => {
+            cb.disabled = false;
+          });
+        }
+      });
+    });
+  });
+}
+
 // src/index.js
 function safeInitAll() {
   try {
@@ -2368,6 +2393,7 @@ function safeInitAll() {
     initContextMenu();
     initThemeToggle();
     initPopovers();
+    initCheck();
   } catch (err) {
     console.warn("[Solora] initAll error:", err);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerkhoff-ict/solora",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "Simple CSS component library",
   "main": "dist/index.js",
   "style": "dist/index.css",