@kerkhoff-ict/solora 2.1.9 → 2.2.0

package/dist/index.css

@@ -429,8 +429,8 @@
   }
 }
 
-/* src/components/dropdown.css */
-.dropdown {
+/* src/components/dropdown-style.css */
+.sol-container {
   position: relative;
   display: inline-block;
   font-family:
@@ -438,147 +438,81 @@
     BlinkMacSystemFont,
     "Segoe UI",
     Roboto,
-    Helvetica,
-    Arial,
     sans-serif;
   cursor: pointer;
   user-select: none;
 }
-.dropdown-btn {
-  padding: 0.3rem 0.4rem;
+.sol-btn {
+  padding: 0.5rem 0.8rem;
   border-radius: 12px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   background: var(--color-bg, #fefefe);
   color: var(--color-text-dark, #000);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  gap: 10px;
 }
-.dropdown-btn:hover {
-  background: var(--color-bg-hover, rgba(0, 0, 0, 0.05));
+.sol-btn:hover {
+  background: rgba(0, 0, 0, 0.03);
 }
-.dropdown-btn:after {
+.sol-btn::after {
   content: "\25be";
-  margin-left: 0.5rem;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   transition: transform 0.2s ease;
 }
-.dropdown.open .dropdown-btn:after {
+.sol-container.open .sol-btn::after {
   transform: rotate(180deg);
 }
-.dropdown-content {
+.sol-menu {
   position: absolute;
   top: 100%;
   left: 0;
-  width: 100%;
-  min-width: 10rem;
-  border-radius: 12px;
+  min-width: 100%;
   margin-top: 0.5rem;
-  overflow: hidden;
-  overflow-y: auto;
-  background: transparent;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.7);
   border: 1px solid rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
-  max-height: 15rem;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+  z-index: 1000;
   opacity: 0;
   transform: translateY(-10px) scale(0.95);
   pointer-events: none;
   transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-  z-index: 1000;
-}
-.dropdown-content::-webkit-scrollbar {
-  width: 6px;
-}
-.dropdown-content::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-}
-.dropdown-content::-webkit-scrollbar-track {
-  background: transparent;
+  overflow: hidden;
 }
-.dropdown.open .dropdown-content {
+.sol-container.open .sol-menu {
   opacity: 1;
   transform: translateY(0) scale(1);
   pointer-events: auto;
 }
-.dropdown-item {
-  padding: 0.3rem 0.4rem;
-  color: var(--color-text-dark, #000);
-  transition: background 0.2s, color 0.2s;
-  cursor: pointer;
+.sol-item {
+  padding: 0.6rem 0.8rem;
+  transition: background 0.2s;
+  color: #000;
 }
-.dropdown-item:hover {
+.sol-item:hover {
   background: rgba(0, 0, 0, 0.05);
 }
-.dropdown-item.active {
-  font-weight: 600;
-  background: rgba(0, 0, 0, 0.1);
-}
-.dropdown-item[aria-disabled=true],
-.dropdown-item.placeholder {
-  color: rgba(0, 0, 0, 0.4);
-  cursor: default;
-  pointer-events: none;
-}
-.dropdown input[type=hidden] {
-  display: none;
-}
-.dropdown-divider {
-  height: 1px;
-  margin: 0.25rem 0;
-  background: rgba(0, 0, 0, 0.1);
-}
-.dropdown-label {
-  padding: 0.3rem 0.4rem;
+.sol-item.active {
+  background: rgba(0, 0, 0, 0.08);
   font-weight: 600;
-  color: rgba(0, 0, 0, 0.6);
-  cursor: default;
 }
-:root.dark .dropdown-btn {
+:root.dark .sol-btn {
   background: #1c1c1e;
-  color: #f0f0f0;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
-}
-:root.dark .dropdown-btn:hover {
-  background: rgba(255, 255, 255, 0.05);
-}
-:root.dark .dropdown-content {
-  background: transparent;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
-}
-:root.dark .dropdown-item {
-  color: #f0f0f0;
-}
-:root.dark .dropdown-item:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-:root.dark .dropdown-item.active {
-  background: rgba(255, 255, 255, 0.12);
-}
-:root.dark .dropdown-divider {
-  background: rgba(255, 255, 255, 0.2);
-}
-:root.dark .dropdown-item[aria-disabled=true],
-:root.dark .dropdown-item.placeholder {
-  color: rgba(255, 255, 255, 0.4);
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.1);
 }
-:root.dark .dropdown-label {
-  color: rgba(255, 255, 255, 0.6);
+:root.dark .sol-menu {
+  background: rgba(28, 28, 30, 0.7);
+  color: #fff;
 }
-:root.dark .dropdown-content::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
+:root.dark .sol-item {
+  color: #fff;
 }
 
 /* src/components/input.css */

package/dist/index.js

@@ -1847,77 +1847,6 @@ function initMaximizeButton(block, maximizeBtn) {
   });
 }
 
-// src/components/dropdown.js
-function initDropdowns() {
-  if (typeof window === "undefined") return;
-  document.querySelectorAll(".dropdown").forEach((drop) => {
-    if (drop.dataset.initialized) return;
-    drop.dataset.initialized = "true";
-    const btn = drop.querySelector(".dropdown-btn");
-    const content = drop.querySelector(".dropdown-content");
-    if (!btn || !content) return;
-    let hiddenInput = drop.querySelector('input[type="hidden"]');
-    if (!hiddenInput) {
-      hiddenInput = document.createElement("input");
-      hiddenInput.type = "hidden";
-      hiddenInput.name = drop.dataset.name || "dropdown";
-      drop.appendChild(hiddenInput);
-    }
-    const getItems = () => Array.from(content.querySelectorAll('.dropdown-item:not([aria-disabled="true"])'));
-    const setValue = (item) => {
-      if (item.getAttribute("aria-disabled") === "true") return;
-      btn.innerHTML = item.innerHTML;
-      content.querySelectorAll(".dropdown-item").forEach((i) => i.classList.remove("active"));
-      item.classList.add("active");
-      hiddenInput.value = item.dataset.value ?? item.textContent.trim();
-      drop.dispatchEvent(new CustomEvent("change", { detail: hiddenInput.value }));
-    };
-    const initialItem = content.querySelector(".dropdown-item.active") || content.querySelector('.dropdown-item:not([aria-disabled="true"])');
-    if (initialItem) setValue(initialItem);
-    const toggle = () => drop.classList.toggle("open");
-    const close = () => drop.classList.remove("open");
-    btn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      toggle();
-    });
-    document.addEventListener("click", (e) => {
-      if (!drop.contains(e.target)) close();
-    });
-    btn.addEventListener("keydown", (e) => {
-      if (!["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.key)) return;
-      const items = getItems();
-      let currentIndex = items.findIndex((i) => i.classList.contains("active"));
-      e.preventDefault();
-      drop.classList.add("open");
-      if (e.key === "ArrowDown") {
-        currentIndex = (currentIndex + 1) % items.length;
-      } else if (e.key === "ArrowUp") {
-        currentIndex = (currentIndex - 1 + items.length) % items.length;
-      } else if (e.key === "Enter") {
-        if (currentIndex >= 0) setValue(items[currentIndex]);
-        close();
-        return;
-      } else if (e.key === "Escape") {
-        close();
-        return;
-      }
-      items.forEach((i) => i.classList.remove("active"));
-      items[currentIndex].classList.add("active");
-      items[currentIndex].scrollIntoView({ block: "nearest" });
-    });
-    content.addEventListener("click", (e) => {
-      const item = e.target.closest(".dropdown-item");
-      if (item) {
-        setValue(item);
-        close();
-      }
-    });
-    btn.setAttribute("tabindex", "0");
-    btn.setAttribute("role", "combobox");
-    btn.setAttribute("aria-haspopup", "listbox");
-  });
-}
-
 // src/components/contextMenu.js
 function initContextMenu() {
   let menu = document.querySelector(".sol-context-menu");
@@ -2268,19 +2197,80 @@ function initThemeToggle(elementSelector = ".sol-theme-toggle") {
   });
 }
 
+// src/components/sol-core.js
+function initSolCore() {
+  const elements = document.querySelectorAll('[class*="sol-dropdown-w-["]');
+  elements.forEach((el) => {
+    const classList = Array.from(el.classList);
+    const widthClass = classList.find((c) => c.startsWith("sol-dropdown-w-["));
+    if (widthClass) {
+      const widthValue = widthClass.match(/\[(.*?)\]/)[1];
+      el.style.width = widthValue;
+      const btn = el.querySelector(".sol-btn");
+      if (btn) btn.style.width = "100%";
+    }
+  });
+}
+
+// src/components/sol-select.js
+function initSolSelect() {
+  document.querySelectorAll(".sol-select").forEach((select) => {
+    const btn = select.querySelector(".sol-btn");
+    const items = select.querySelectorAll(".sol-item");
+    const input = select.querySelector('input[type="hidden"]');
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      select.classList.toggle("open");
+    });
+    items.forEach((item) => {
+      item.addEventListener("click", () => {
+        const val = item.dataset.value || item.innerText;
+        btn.innerText = item.innerText;
+        if (input) input.value = val;
+        items.forEach((i) => i.classList.remove("active"));
+        item.classList.add("active");
+        select.classList.remove("open");
+      });
+    });
+  });
+}
+
+// src/components/sol-dropdown.js
+function initSolDropdown() {
+  document.querySelectorAll(".sol-dropdown").forEach((dropdown) => {
+    const btn = dropdown.querySelector(".sol-btn");
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      dropdown.classList.toggle("open");
+    });
+    dropdown.querySelectorAll(".sol-item").forEach((item) => {
+      item.addEventListener("click", () => {
+        dropdown.classList.remove("open");
+      });
+    });
+  });
+  document.addEventListener("click", () => {
+    document.querySelectorAll(".sol-container").forEach((el) => el.classList.remove("open"));
+  });
+}
+
 // src/index.js
 if (typeof window !== "undefined") {
   document.addEventListener("DOMContentLoaded", () => {
+    initSolCore();
     initCodeblocks();
-    initDropdowns();
     initContextMenu();
     initThemeToggle();
+    initSolSelect();
+    initSolDropdown();
   });
 }
 export {
   initCodeblocks,
   initContextMenu,
-  initDropdowns,
+  initSolCore,
+  initSolDropdown,
+  initSolSelect,
   initThemeToggle
 };
 /*! Bundled license information:

package/package.json

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