minimaly-css - npm Package Compare versions

Comparing version 1.1.1 to 1.2.1

dist/minimaly.js

@@ -0,3 +1,21 @@
+// Minimaly.js
+// A lightweight JavaScript library for creating UI components
+
+//toast
+window.showToast = function (message, type = "info", duration = 3000) {
+  const toast = document.createElement("div");
+  toast.className = `toast toast-${type}`;
+  toast.textContent = message;
+
+  document.body.appendChild(toast);
+
+  setTimeout(() => {
+    toast.classList.add("fade-out");
+    toast.addEventListener("transitionend", () => toast.remove());
+  }, duration);
+};
+
+//modal and tabs
 document.addEventListener("DOMContentLoaded", () => {
-  document.querySelectorAll("modal").forEach(modal => {
+  document.querySelectorAll("modal").forEach((modal) => {
     const toggleText = modal.getAttribute("toggle") || "Open";
@@ -28,2 +46,109 @@ const btn = document.createElement("button");
   });
-});
+  document.querySelectorAll("tabs").forEach((tabs) => {
+    const tabHeaders = document.createElement("div");
+    tabHeaders.style.display = "flex";
+    tabHeaders.style.gap = "10px";
+    tabHeaders.style.marginBottom = "10px";
+
+    const tabContents = Array.from(tabs.querySelectorAll("tab"));
+    tabContents.forEach((tab, index) => {
+      const title = tab.getAttribute("title") || `Tab ${index + 1}`;
+      const btn = document.createElement("button");
+      btn.textContent = title;
+      btn.style.padding = "5px 10px";
+      btn.style.cursor = "pointer";
+      btn.style.border = "1px solid #ccc";
+      btn.style.background = "#f0f0f0";
+
+      if (index === 0) {
+        tab.style.display = "block";
+        btn.style.background = "#ddd";
+      } else {
+        tab.style.display = "none";
+      }
+
+      btn.addEventListener("click", () => {
+        tabContents.forEach((t) => (t.style.display = "none"));
+        tabs
+          .querySelectorAll("button")
+          .forEach((b) => (b.style.background = "#f0f0f0"));
+        tab.style.display = "block";
+        btn.style.background = "#ddd";
+      });
+
+      tabHeaders.appendChild(btn);
+    });
+
+    tabs.prepend(tabHeaders);
+  });
+});
+
+//accordion
+// This code creates an accordion component
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll("accordion").forEach((acc) => {
+    const sections = acc.querySelectorAll("section");
+
+    sections.forEach((section, index) => {
+      const title = section.getAttribute("title") || `Section ${index + 1}`;
+      const header = document.createElement("div");
+      header.textContent = title;
+      header.style.cursor = "pointer";
+      header.style.background = "#f9f9f9";
+      header.style.padding = "8px";
+      header.style.border = "1px solid #ddd";
+      header.style.borderBottom = "none";
+      header.style.fontWeight = "bold";
+
+      const content = document.createElement("div");
+      content.innerHTML = section.innerHTML;
+      content.style.border = "1px solid #ddd";
+      content.style.borderTop = "none";
+      content.style.padding = "10px";
+      content.style.display = "none";
+
+      header.addEventListener("click", () => {
+        const isVisible = content.style.display === "block";
+        acc
+          .querySelectorAll("div[accordion-content]")
+          .forEach((c) => (c.style.display = "none"));
+        content.style.display = isVisible ? "none" : "block";
+      });
+
+      content.setAttribute("accordion-content", "");
+      section.innerHTML = "";
+      section.appendChild(header);
+      section.appendChild(content);
+    });
+  });
+});
+
+//tooltip
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll("[tooltip]").forEach((el) => {
+    const message = el.getAttribute("tooltip");
+    const tooltip = document.createElement("div");
+    tooltip.className = "tooltip-bubble";
+    tooltip.textContent = message;
+    el.style.position = "relative";
+    el.appendChild(tooltip);
+
+    el.addEventListener("mouseenter", () => {
+      tooltip.style.opacity = "1";
+    });
+
+    el.addEventListener("mouseleave", () => {
+      tooltip.style.opacity = "0";
+    });
+  });
+});
+
+//navbar
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".nav-toggle").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const nav = btn.nextElementSibling;
+      nav.classList.toggle("open");
+    });
+  });
+});

package.json

 {
   "name": "minimaly-css",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "Minimal, semantic, avtomatik responsiv va interaktiv CSS framework",
@@ -5,0 +5,0 @@ "main": "dist/index.css",

src/minimaly.js

@@ -0,3 +1,21 @@
+// Minimaly.js
+// A lightweight JavaScript library for creating UI components
+
+//toast
+window.showToast = function (message, type = "info", duration = 3000) {
+  const toast = document.createElement("div");
+  toast.className = `toast toast-${type}`;
+  toast.textContent = message;
+
+  document.body.appendChild(toast);
+
+  setTimeout(() => {
+    toast.classList.add("fade-out");
+    toast.addEventListener("transitionend", () => toast.remove());
+  }, duration);
+};
+
+//modal and tabs
 document.addEventListener("DOMContentLoaded", () => {
-  document.querySelectorAll("modal").forEach(modal => {
+  document.querySelectorAll("modal").forEach((modal) => {
     const toggleText = modal.getAttribute("toggle") || "Open";
@@ -28,2 +46,109 @@ const btn = document.createElement("button");
   });
-});
+  document.querySelectorAll("tabs").forEach((tabs) => {
+    const tabHeaders = document.createElement("div");
+    tabHeaders.style.display = "flex";
+    tabHeaders.style.gap = "10px";
+    tabHeaders.style.marginBottom = "10px";
+
+    const tabContents = Array.from(tabs.querySelectorAll("tab"));
+    tabContents.forEach((tab, index) => {
+      const title = tab.getAttribute("title") || `Tab ${index + 1}`;
+      const btn = document.createElement("button");
+      btn.textContent = title;
+      btn.style.padding = "5px 10px";
+      btn.style.cursor = "pointer";
+      btn.style.border = "1px solid #ccc";
+      btn.style.background = "#f0f0f0";
+
+      if (index === 0) {
+        tab.style.display = "block";
+        btn.style.background = "#ddd";
+      } else {
+        tab.style.display = "none";
+      }
+
+      btn.addEventListener("click", () => {
+        tabContents.forEach((t) => (t.style.display = "none"));
+        tabs
+          .querySelectorAll("button")
+          .forEach((b) => (b.style.background = "#f0f0f0"));
+        tab.style.display = "block";
+        btn.style.background = "#ddd";
+      });
+
+      tabHeaders.appendChild(btn);
+    });
+
+    tabs.prepend(tabHeaders);
+  });
+});
+
+//accordion
+// This code creates an accordion component
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll("accordion").forEach((acc) => {
+    const sections = acc.querySelectorAll("section");
+
+    sections.forEach((section, index) => {
+      const title = section.getAttribute("title") || `Section ${index + 1}`;
+      const header = document.createElement("div");
+      header.textContent = title;
+      header.style.cursor = "pointer";
+      header.style.background = "#f9f9f9";
+      header.style.padding = "8px";
+      header.style.border = "1px solid #ddd";
+      header.style.borderBottom = "none";
+      header.style.fontWeight = "bold";
+
+      const content = document.createElement("div");
+      content.innerHTML = section.innerHTML;
+      content.style.border = "1px solid #ddd";
+      content.style.borderTop = "none";
+      content.style.padding = "10px";
+      content.style.display = "none";
+
+      header.addEventListener("click", () => {
+        const isVisible = content.style.display === "block";
+        acc
+          .querySelectorAll("div[accordion-content]")
+          .forEach((c) => (c.style.display = "none"));
+        content.style.display = isVisible ? "none" : "block";
+      });
+
+      content.setAttribute("accordion-content", "");
+      section.innerHTML = "";
+      section.appendChild(header);
+      section.appendChild(content);
+    });
+  });
+});
+
+//tooltip
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll("[tooltip]").forEach((el) => {
+    const message = el.getAttribute("tooltip");
+    const tooltip = document.createElement("div");
+    tooltip.className = "tooltip-bubble";
+    tooltip.textContent = message;
+    el.style.position = "relative";
+    el.appendChild(tooltip);
+
+    el.addEventListener("mouseenter", () => {
+      tooltip.style.opacity = "1";
+    });
+
+    el.addEventListener("mouseleave", () => {
+      tooltip.style.opacity = "0";
+    });
+  });
+});
+
+//navbar
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".nav-toggle").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const nav = btn.nextElementSibling;
+      nav.classList.toggle("open");
+    });
+  });
+});

No alert changes

Improved metrics

Total package byte prevSize

22330

184.46%

Number of package files

20

53.85%

Lines of code

896

187.18%

No dependency changes