uni-theme-select 1.0.1 → 1.0.3

package/dist/index.js

@@ -67,9 +67,22 @@ var themes = [
   {
     name: "custom",
     properties: {
+      "primary-button-text-color": "",
+      "primary-button-color": "",
+      "primary-button-border-color": "",
+      "primary-button-border-radius": "",
+      "secondary-button-text-color": "",
+      "secondary-button-color": "",
+      "secondary-button-border-color": "",
+      "secondary-button-border-radius": "",
       "bg-color": "",
-      "text-color": "",
-      "primary-color": ""
+      "font-family": "",
+      "primary-font-color": "",
+      "primary-font-size": "",
+      "primary-font-weight": "",
+      "secondary-font-color": "",
+      "secondary-font-weight": "",
+      "secondary-font-size": ""
     }
   }
 ];
@@ -77,12 +90,55 @@ var themes = [
 // src/coreFunctions.ts
 var import_coloris = require("@melloware/coloris/dist/coloris.css");
 var import_coloris2 = __toESM(require("@melloware/coloris"));
+
+// src/store.ts
+var ThemeStore = class {
+  constructor() {
+    this.currentTheme = "custom";
+    this.themeProps = {};
+    this.listeners = [];
+  }
+  setTheme(themeName, themeProps) {
+    this.currentTheme = themeName;
+    this.themeProps = themeProps;
+    this.notify();
+  }
+  getTheme() {
+    return {
+      themeName: this.currentTheme,
+      properties: this.themeProps
+    };
+  }
+  subscribe(listener) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener);
+    };
+  }
+  notify() {
+    this.listeners.forEach((listener) => listener(this.currentTheme, this.themeProps));
+  }
+};
+var themeStore = new ThemeStore();
+
+// src/coreFunctions.ts
 var colorFields = [
-  { id: "bgColor", label: "Background" },
-  { id: "primaryColor", label: "Primary" },
-  { id: "secondaryColor", label: "Secondary" },
-  { id: "borderColor", label: "Border Color" },
-  { id: "textColor", label: "Text Color" }
+  { id: "bg-color", label: "Background Color", defaultValue: "#fff", type: "text", class: "radius-50" },
+  { id: "primary-button-color", label: "Primary Button Color", defaultValue: "rgb(174, 174, 174)", type: "text", class: "radius-50" },
+  { id: "primary-button-border-color", label: "Primary Button Border Color", defaultValue: "rgba(0, 0, 0, 0)", type: "text", class: "radius-50" },
+  { id: "primary-button-border-radius", label: "Primary Button Border Radius", defaultValue: "0", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
+  { id: "primary-button-text-color", label: "Primary Button Text Color", defaultValue: "#000", type: "text", class: "radius-50" },
+  { id: "secondary-button-color", label: "Secondary Button Color", defaultValue: "rgb(174, 174, 174)", type: "text", class: "radius-50" },
+  { id: "secondary-button-border-color", label: "Secondary Button Border Color", defaultValue: "rgba(0, 0, 0, 0)", type: "text", class: "radius-50" },
+  { id: "secondary-button-border-radius", label: "Secondary Button Border Radius", defaultValue: "0", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
+  { id: "secondary-button-text-color", label: "Secondary Button Text Color", defaultValue: "#000", type: "text", class: "radius-50" },
+  { id: "font-family", label: "Font Family", defaultValue: "", type: "text" },
+  { id: "primary-font-size", label: "Primary Font Size", defaultValue: "14", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
+  { id: "primary-font-color", label: "Primary Font Color", defaultValue: "#000", type: "text", class: "radius-50" },
+  { id: "primary-font-weight", label: "Primary Font Weight", defaultValue: "600", type: "text", class: "uni-text-input" },
+  { id: "secondary-font-size", label: "Secondary Font Size", defaultValue: "14", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
+  { id: "secondary-font-color", label: "Secondary Font Color", defaultValue: "#ccc", type: "text", class: "radius-50" },
+  { id: "secondary-font-weight", label: "Primary Font Weight", defaultValue: "500", type: "text", class: "uni-text-input" }
 ];
 function injectStyles() {
   if (document.getElementById("uni-theme-style")) return;
@@ -134,11 +190,13 @@ function injectStyles() {
             box-shadow: -4px 0 12px rgba(0,0,0,0.2);
             transition: right 0.3s ease;
             z-index: 9999;
+            overflow: auto
         }
 
         #uni-theme-root.opened #uni-theme-panel{
             right: 0;
-            max-height: 500px;
+            overflow: scroll;
+            max-height: 600px;
         }
 
         #uni-theme-root.opened #uni-theme-toggle{
@@ -163,62 +221,103 @@ function injectStyles() {
         .clr-field{
             margin: 5px 0
         }
-        .uni-color-group {
+        .uni-input-group {
             display: flex;
             align-items: center;
             justify-content: space-between;
             margin-bottom: 14px;
             gap: 12px;
+            text-align: left;
         }
 
-        .uni-color-group label {
-            font-size: 18px;
+        .uni-input-group label {
+            font-size: 14px;
             font-weight: 500;
-            color: var(--text-color, #333);
+            color: #333;
         }
 
-        .uni-color-input {
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
+        .uni-input {
+            width: 30px;
+            height: 30px;
             border: 2px solid #ddd;
             cursor: pointer;
             padding: 0;
         }
+        .uni-text-input{
+            width: 50px;
+            height: 19px;
+        }
+        .radius-50{
+            border-radius:50%
+        }
 
     `;
   document.head.appendChild(style);
 }
-function setTheme(name, themeProps = {}) {
-  const theme = name === "custom" ? { name, properties: themeProps } : themes.find((t) => t.name === name);
-  if (!theme) {
-    console.warn(`Theme "${name}" not found`);
-    return;
+function setTheme(name, customProps = {}) {
+  let themeProps = {};
+  if (name == "custom" && customProps) {
+    themeProps = customProps;
+  } else {
+    const theme = themes.find((t) => t.name === name);
+    if (!theme) {
+      console.warn(`Theme "${name}" not found`);
+      return;
+    }
+    themeProps = theme.properties;
   }
   const root = document.documentElement;
-  Object.entries(theme.properties).forEach(([key, value]) => {
+  Object.entries(themeProps).forEach(([key, value]) => {
     root.style.setProperty(`--${key}`, value);
   });
-  localStorage.setItem("uts-theme", name);
+  localStorage.setItem(
+    "uts-theme",
+    JSON.stringify({
+      name,
+      properties: themeProps
+    })
+  );
+  themeStore.setTheme(name, themeProps);
 }
 function constructPanel(container) {
   const panel = document.createElement("div");
   panel.id = "uni-theme-panel";
   const title = document.createElement("h3");
   title.textContent = "Select Custom Theme";
+  const selectThemes = document.createElement("select");
+  selectThemes.id = "available-themes";
+  selectThemes.innerHTML = `
+        <option value="">Select theme</option>
+        <option value="beige">Beige</option>
+        <option value="dark">Dark</option>
+        <option value="light">Light</option>
+    `;
   panel.appendChild(title);
+  panel.appendChild(selectThemes);
   colorFields.forEach((field) => {
     const group = document.createElement("div");
-    group.className = "uni-color-group";
+    group.className = "uni-input-group";
     const label = document.createElement("label");
     label.textContent = field.label;
     const input = document.createElement("input");
-    input.type = "text";
-    input.className = "uni-color-input";
+    input.type = field.type;
+    input.name = field.id;
+    input.className = `uni-input ${field.class}`;
     input.id = `uni-theme-${field.id}`;
-    input.value = "#000";
+    input.value = field.defaultValue;
     group.appendChild(label);
     group.appendChild(input);
+    if (field.units && field.units.length > 0) {
+      const inputUnits = document.createElement("select");
+      inputUnits.disabled = true;
+      field.units.forEach((unit) => {
+        const option = document.createElement("option");
+        option.value = unit;
+        option.textContent = unit;
+        inputUnits.appendChild(option);
+      });
+      group.appendChild(inputUnits);
+    }
     panel.appendChild(group);
   });
   container.appendChild(panel);
@@ -240,18 +339,27 @@ function initThemeElements() {
   const themeToggler = document.getElementById("uni-theme-toggle");
   const themePanel = document.getElementById("uni-theme-panel");
   import_coloris2.default.init();
-  document.querySelectorAll(".uni-color-input").forEach((input) => {
-    console.log(input.className);
+  document.querySelectorAll(".uni-input").forEach((input) => {
     (0, import_coloris2.default)({
-      el: `.${input.className}`,
+      el: `.uni-input.radius-50`,
       alpha: true,
       format: "hex"
     });
     input.addEventListener("input", (e) => {
       const target = e.target;
-      target.style.background = target.value;
+      const currentTheme = themeStore.getTheme();
+      currentTheme.properties[target.name] = target.value;
+      console.log(currentTheme);
+      setTheme(currentTheme.themeName, currentTheme.properties);
     });
   });
+  const availableThemes = document.getElementById("available-themes");
+  availableThemes == null ? void 0 : availableThemes.addEventListener("change", (e) => {
+    var _a;
+    const selectedTheme = (_a = e.target) == null ? void 0 : _a.value;
+    const props = themes.find((item) => item.name == selectedTheme);
+    setTheme(selectedTheme, props == null ? void 0 : props.properties);
+  });
   return { themeToggler, themePanel };
 }
 
@@ -261,8 +369,12 @@ function getAvailableThemes() {
 }
 function loadSavedTheme() {
   const saved = localStorage.getItem("uts-theme");
-  if (saved) {
-    setTheme(saved);
+  if (!saved) return;
+  const parsed = JSON.parse(saved);
+  if (parsed.name == "custom") {
+    setTheme(parsed.name, parsed.properties);
+  } else {
+    setTheme(parsed.name);
   }
 }
 function mountToggleTheme(options = {}) {

package/dist/index.mjs

@@ -27,9 +27,22 @@ var themes = [
   {
     name: "custom",
     properties: {
+      "primary-button-text-color": "",
+      "primary-button-color": "",
+      "primary-button-border-color": "",
+      "primary-button-border-radius": "",
+      "secondary-button-text-color": "",
+      "secondary-button-color": "",
+      "secondary-button-border-color": "",
+      "secondary-button-border-radius": "",
       "bg-color": "",
-      "text-color": "",
-      "primary-color": ""
+      "font-family": "",
+      "primary-font-color": "",
+      "primary-font-size": "",
+      "primary-font-weight": "",
+      "secondary-font-color": "",
+      "secondary-font-weight": "",
+      "secondary-font-size": ""
     }
   }
 ];
@@ -37,12 +50,55 @@ var themes = [
 // src/coreFunctions.ts
 import "@melloware/coloris/dist/coloris.css";
 import Coloris from "@melloware/coloris";
+
+// src/store.ts
+var ThemeStore = class {
+  constructor() {
+    this.currentTheme = "custom";
+    this.themeProps = {};
+    this.listeners = [];
+  }
+  setTheme(themeName, themeProps) {
+    this.currentTheme = themeName;
+    this.themeProps = themeProps;
+    this.notify();
+  }
+  getTheme() {
+    return {
+      themeName: this.currentTheme,
+      properties: this.themeProps
+    };
+  }
+  subscribe(listener) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener);
+    };
+  }
+  notify() {
+    this.listeners.forEach((listener) => listener(this.currentTheme, this.themeProps));
+  }
+};
+var themeStore = new ThemeStore();
+
+// src/coreFunctions.ts
 var colorFields = [
-  { id: "bgColor", label: "Background" },
-  { id: "primaryColor", label: "Primary" },
-  { id: "secondaryColor", label: "Secondary" },
-  { id: "borderColor", label: "Border Color" },
-  { id: "textColor", label: "Text Color" }
+  { id: "bg-color", label: "Background Color", defaultValue: "#fff", type: "text", class: "radius-50" },
+  { id: "primary-button-color", label: "Primary Button Color", defaultValue: "rgb(174, 174, 174)", type: "text", class: "radius-50" },
+  { id: "primary-button-border-color", label: "Primary Button Border Color", defaultValue: "rgba(0, 0, 0, 0)", type: "text", class: "radius-50" },
+  { id: "primary-button-border-radius", label: "Primary Button Border Radius", defaultValue: "0", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
+  { id: "primary-button-text-color", label: "Primary Button Text Color", defaultValue: "#000", type: "text", class: "radius-50" },
+  { id: "secondary-button-color", label: "Secondary Button Color", defaultValue: "rgb(174, 174, 174)", type: "text", class: "radius-50" },
+  { id: "secondary-button-border-color", label: "Secondary Button Border Color", defaultValue: "rgba(0, 0, 0, 0)", type: "text", class: "radius-50" },
+  { id: "secondary-button-border-radius", label: "Secondary Button Border Radius", defaultValue: "0", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
+  { id: "secondary-button-text-color", label: "Secondary Button Text Color", defaultValue: "#000", type: "text", class: "radius-50" },
+  { id: "font-family", label: "Font Family", defaultValue: "", type: "text" },
+  { id: "primary-font-size", label: "Primary Font Size", defaultValue: "14", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
+  { id: "primary-font-color", label: "Primary Font Color", defaultValue: "#000", type: "text", class: "radius-50" },
+  { id: "primary-font-weight", label: "Primary Font Weight", defaultValue: "600", type: "text", class: "uni-text-input" },
+  { id: "secondary-font-size", label: "Secondary Font Size", defaultValue: "14", type: "number", class: "uni-text-input", units: ["px", "%", "em"] },
+  { id: "secondary-font-color", label: "Secondary Font Color", defaultValue: "#ccc", type: "text", class: "radius-50" },
+  { id: "secondary-font-weight", label: "Primary Font Weight", defaultValue: "500", type: "text", class: "uni-text-input" }
 ];
 function injectStyles() {
   if (document.getElementById("uni-theme-style")) return;
@@ -94,11 +150,13 @@ function injectStyles() {
             box-shadow: -4px 0 12px rgba(0,0,0,0.2);
             transition: right 0.3s ease;
             z-index: 9999;
+            overflow: auto
         }
 
         #uni-theme-root.opened #uni-theme-panel{
             right: 0;
-            max-height: 500px;
+            overflow: scroll;
+            max-height: 600px;
         }
 
         #uni-theme-root.opened #uni-theme-toggle{
@@ -123,62 +181,103 @@ function injectStyles() {
         .clr-field{
             margin: 5px 0
         }
-        .uni-color-group {
+        .uni-input-group {
             display: flex;
             align-items: center;
             justify-content: space-between;
             margin-bottom: 14px;
             gap: 12px;
+            text-align: left;
         }
 
-        .uni-color-group label {
-            font-size: 18px;
+        .uni-input-group label {
+            font-size: 14px;
             font-weight: 500;
-            color: var(--text-color, #333);
+            color: #333;
         }
 
-        .uni-color-input {
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
+        .uni-input {
+            width: 30px;
+            height: 30px;
             border: 2px solid #ddd;
             cursor: pointer;
             padding: 0;
         }
+        .uni-text-input{
+            width: 50px;
+            height: 19px;
+        }
+        .radius-50{
+            border-radius:50%
+        }
 
     `;
   document.head.appendChild(style);
 }
-function setTheme(name, themeProps = {}) {
-  const theme = name === "custom" ? { name, properties: themeProps } : themes.find((t) => t.name === name);
-  if (!theme) {
-    console.warn(`Theme "${name}" not found`);
-    return;
+function setTheme(name, customProps = {}) {
+  let themeProps = {};
+  if (name == "custom" && customProps) {
+    themeProps = customProps;
+  } else {
+    const theme = themes.find((t) => t.name === name);
+    if (!theme) {
+      console.warn(`Theme "${name}" not found`);
+      return;
+    }
+    themeProps = theme.properties;
   }
   const root = document.documentElement;
-  Object.entries(theme.properties).forEach(([key, value]) => {
+  Object.entries(themeProps).forEach(([key, value]) => {
     root.style.setProperty(`--${key}`, value);
   });
-  localStorage.setItem("uts-theme", name);
+  localStorage.setItem(
+    "uts-theme",
+    JSON.stringify({
+      name,
+      properties: themeProps
+    })
+  );
+  themeStore.setTheme(name, themeProps);
 }
 function constructPanel(container) {
   const panel = document.createElement("div");
   panel.id = "uni-theme-panel";
   const title = document.createElement("h3");
   title.textContent = "Select Custom Theme";
+  const selectThemes = document.createElement("select");
+  selectThemes.id = "available-themes";
+  selectThemes.innerHTML = `
+        <option value="">Select theme</option>
+        <option value="beige">Beige</option>
+        <option value="dark">Dark</option>
+        <option value="light">Light</option>
+    `;
   panel.appendChild(title);
+  panel.appendChild(selectThemes);
   colorFields.forEach((field) => {
     const group = document.createElement("div");
-    group.className = "uni-color-group";
+    group.className = "uni-input-group";
     const label = document.createElement("label");
     label.textContent = field.label;
     const input = document.createElement("input");
-    input.type = "text";
-    input.className = "uni-color-input";
+    input.type = field.type;
+    input.name = field.id;
+    input.className = `uni-input ${field.class}`;
     input.id = `uni-theme-${field.id}`;
-    input.value = "#000";
+    input.value = field.defaultValue;
     group.appendChild(label);
     group.appendChild(input);
+    if (field.units && field.units.length > 0) {
+      const inputUnits = document.createElement("select");
+      inputUnits.disabled = true;
+      field.units.forEach((unit) => {
+        const option = document.createElement("option");
+        option.value = unit;
+        option.textContent = unit;
+        inputUnits.appendChild(option);
+      });
+      group.appendChild(inputUnits);
+    }
     panel.appendChild(group);
   });
   container.appendChild(panel);
@@ -200,18 +299,27 @@ function initThemeElements() {
   const themeToggler = document.getElementById("uni-theme-toggle");
   const themePanel = document.getElementById("uni-theme-panel");
   Coloris.init();
-  document.querySelectorAll(".uni-color-input").forEach((input) => {
-    console.log(input.className);
+  document.querySelectorAll(".uni-input").forEach((input) => {
     Coloris({
-      el: `.${input.className}`,
+      el: `.uni-input.radius-50`,
       alpha: true,
       format: "hex"
     });
     input.addEventListener("input", (e) => {
       const target = e.target;
-      target.style.background = target.value;
+      const currentTheme = themeStore.getTheme();
+      currentTheme.properties[target.name] = target.value;
+      console.log(currentTheme);
+      setTheme(currentTheme.themeName, currentTheme.properties);
     });
   });
+  const availableThemes = document.getElementById("available-themes");
+  availableThemes == null ? void 0 : availableThemes.addEventListener("change", (e) => {
+    var _a;
+    const selectedTheme = (_a = e.target) == null ? void 0 : _a.value;
+    const props = themes.find((item) => item.name == selectedTheme);
+    setTheme(selectedTheme, props == null ? void 0 : props.properties);
+  });
   return { themeToggler, themePanel };
 }
 
@@ -221,8 +329,12 @@ function getAvailableThemes() {
 }
 function loadSavedTheme() {
   const saved = localStorage.getItem("uts-theme");
-  if (saved) {
-    setTheme(saved);
+  if (!saved) return;
+  const parsed = JSON.parse(saved);
+  if (parsed.name == "custom") {
+    setTheme(parsed.name, parsed.properties);
+  } else {
+    setTheme(parsed.name);
   }
 }
 function mountToggleTheme(options = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uni-theme-select",
-  "version": "1.0.01",
+  "version": "1.0.3",
   "description": "Framework-agnostic theme switcher",
   "main": "dist/index.js",
   "module": "dist/index.mjs",