@aigne/afs-ui 1.11.0-beta.12

package/dist/web-page/renderers/input.cjs

@@ -0,0 +1,137 @@
+
+//#region src/web-page/renderers/input.ts
+const INPUT_JS = `
+  function renderAupInput(node) {
+    var el = document.createElement("div");
+    el.className = "aup-input";
+    var p = node.props || {};
+    var s = node.state || {};
+    var inputType = p.type || p.variant || "text";
+
+    // Label
+    if (p.label) {
+      var lbl = document.createElement("label");
+      lbl.textContent = _escapeHtml(String(p.label));
+      el.appendChild(lbl);
+    }
+
+    if (inputType === "select") {
+      var sel = document.createElement("select");
+      var opts = Array.isArray(p.options) ? p.options : [];
+      for (var i = 0; i < opts.length; i++) {
+        var opt = document.createElement("option");
+        var optItem = opts[i];
+        // Support both string options and {label, value} objects
+        var optVal = typeof optItem === "object" && optItem !== null ? (optItem.value || optItem.label || "") : String(optItem);
+        var optLabel = typeof optItem === "object" && optItem !== null ? (optItem.label || optItem.value || "") : String(optItem);
+        opt.value = String(optVal);
+        opt.textContent = _escapeHtml(String(optLabel));
+        if (String(p.value) === String(optVal) || String(s.value) === String(optVal)) opt.selected = true;
+        sel.appendChild(opt);
+      }
+      sel.onchange = function() {
+        if (node.events && node.events.change) {
+          _fireAupEvent(node.id, "change", { value: sel.value });
+        }
+      };
+      el.appendChild(sel);
+    } else if (inputType === "toggle") {
+      var toggleRow = document.createElement("div");
+      toggleRow.className = "aup-toggle";
+      var track = document.createElement("div");
+      track.className = "aup-toggle-track" + (s.value ? " on" : "");
+      var thumb = document.createElement("div");
+      thumb.className = "aup-toggle-thumb";
+      track.appendChild(thumb);
+      toggleRow.appendChild(track);
+      toggleRow.onclick = function() {
+        track.classList.toggle("on");
+        if (node.events && node.events.change) {
+          _fireAupEvent(node.id, "change", {});
+        }
+      };
+      el.appendChild(toggleRow);
+    } else if (inputType === "checkbox") {
+      var cbRow = document.createElement("div");
+      cbRow.className = "aup-checkbox-row";
+      var cb = document.createElement("input");
+      cb.type = "checkbox";
+      cb.checked = !!s.value;
+      cb.onchange = function() {
+        if (node.events && node.events.change) {
+          _fireAupEvent(node.id, "change", {});
+        }
+      };
+      cbRow.appendChild(cb);
+      if (p.label) {
+        var cbLbl = document.createElement("span");
+        cbLbl.textContent = _escapeHtml(String(p.label));
+        cbRow.appendChild(cbLbl);
+      }
+      el.appendChild(cbRow);
+    } else if (inputType === "slider") {
+      var slider = document.createElement("input");
+      slider.type = "range";
+      if (p.min !== undefined) slider.min = String(p.min);
+      if (p.max !== undefined) slider.max = String(p.max);
+      if (p.step !== undefined) slider.step = String(p.step);
+      if (s.value !== undefined) slider.value = String(s.value);
+      slider.oninput = function() {
+        if (node.events && node.events.change) {
+          _fireAupEvent(node.id, "change", {});
+        }
+      };
+      el.appendChild(slider);
+    } else if (inputType === "progress") {
+      var row = document.createElement("div");
+      row.className = "aup-progress-row";
+      var bar = document.createElement("div");
+      bar.className = "aup-progress";
+      var fill = document.createElement("div");
+      fill.className = "aup-progress-fill";
+      var pct = Math.max(0, Math.min(100, parseFloat(s.value) || 0));
+      fill.style.width = pct + "%";
+      if (p.intent) fill.setAttribute("data-intent", p.intent);
+      bar.appendChild(fill);
+      row.appendChild(bar);
+      if (p.showValue !== false) {
+        var lbl = document.createElement("span");
+        lbl.className = "aup-progress-label";
+        lbl.textContent = Math.round(pct) + "%";
+        row.appendChild(lbl);
+      }
+      el.appendChild(row);
+    } else if (inputType === "textarea") {
+      var ta = document.createElement("textarea");
+      ta.rows = p.rows || 3;
+      if (p.placeholder) ta.placeholder = String(p.placeholder);
+      if (s.value !== undefined) ta.value = String(s.value);
+      ta.oninput = function() {
+        if (node.events && node.events.change) {
+          _fireAupEvent(node.id, "change", {});
+        }
+      };
+      el.appendChild(ta);
+    } else {
+      // text, password, date, etc.
+      var inp = document.createElement("input");
+      inp.type = inputType === "password" ? "password" : "text";
+      if (p.placeholder) inp.placeholder = String(p.placeholder);
+      if (s.value !== undefined) inp.value = String(s.value);
+      if (p.min !== undefined) inp.min = String(p.min);
+      if (p.max !== undefined) inp.max = String(p.max);
+      if (inputType === "date") inp.type = "date";
+      inp.oninput = function() {
+        if (node.events && node.events.change) {
+          _fireAupEvent(node.id, "change", {});
+        }
+      };
+      el.appendChild(inp);
+    }
+    return el;
+  }
+
+`;
+
+//#endregion
+exports.INPUT_JS = INPUT_JS;

package/dist/web-page/renderers/input.mjs

@@ -0,0 +1,137 @@
+//#region src/web-page/renderers/input.ts
+const INPUT_JS = `
+  function renderAupInput(node) {
+    var el = document.createElement("div");
+    el.className = "aup-input";
+    var p = node.props || {};
+    var s = node.state || {};
+    var inputType = p.type || p.variant || "text";
+
+    // Label
+    if (p.label) {
+      var lbl = document.createElement("label");
+      lbl.textContent = _escapeHtml(String(p.label));
+      el.appendChild(lbl);
+    }
+
+    if (inputType === "select") {
+      var sel = document.createElement("select");
+      var opts = Array.isArray(p.options) ? p.options : [];
+      for (var i = 0; i < opts.length; i++) {
+        var opt = document.createElement("option");
+        var optItem = opts[i];
+        // Support both string options and {label, value} objects
+        var optVal = typeof optItem === "object" && optItem !== null ? (optItem.value || optItem.label || "") : String(optItem);
+        var optLabel = typeof optItem === "object" && optItem !== null ? (optItem.label || optItem.value || "") : String(optItem);
+        opt.value = String(optVal);
+        opt.textContent = _escapeHtml(String(optLabel));
+        if (String(p.value) === String(optVal) || String(s.value) === String(optVal)) opt.selected = true;
+        sel.appendChild(opt);
+      }
+      sel.onchange = function() {
+        if (node.events && node.events.change) {
+          _fireAupEvent(node.id, "change", { value: sel.value });
+        }
+      };
+      el.appendChild(sel);
+    } else if (inputType === "toggle") {
+      var toggleRow = document.createElement("div");
+      toggleRow.className = "aup-toggle";
+      var track = document.createElement("div");
+      track.className = "aup-toggle-track" + (s.value ? " on" : "");
+      var thumb = document.createElement("div");
+      thumb.className = "aup-toggle-thumb";
+      track.appendChild(thumb);
+      toggleRow.appendChild(track);
+      toggleRow.onclick = function() {
+        track.classList.toggle("on");
+        if (node.events && node.events.change) {
+          _fireAupEvent(node.id, "change", {});
+        }
+      };
+      el.appendChild(toggleRow);
+    } else if (inputType === "checkbox") {
+      var cbRow = document.createElement("div");
+      cbRow.className = "aup-checkbox-row";
+      var cb = document.createElement("input");
+      cb.type = "checkbox";
+      cb.checked = !!s.value;
+      cb.onchange = function() {
+        if (node.events && node.events.change) {
+          _fireAupEvent(node.id, "change", {});
+        }
+      };
+      cbRow.appendChild(cb);
+      if (p.label) {
+        var cbLbl = document.createElement("span");
+        cbLbl.textContent = _escapeHtml(String(p.label));
+        cbRow.appendChild(cbLbl);
+      }
+      el.appendChild(cbRow);
+    } else if (inputType === "slider") {
+      var slider = document.createElement("input");
+      slider.type = "range";
+      if (p.min !== undefined) slider.min = String(p.min);
+      if (p.max !== undefined) slider.max = String(p.max);
+      if (p.step !== undefined) slider.step = String(p.step);
+      if (s.value !== undefined) slider.value = String(s.value);
+      slider.oninput = function() {
+        if (node.events && node.events.change) {
+          _fireAupEvent(node.id, "change", {});
+        }
+      };
+      el.appendChild(slider);
+    } else if (inputType === "progress") {
+      var row = document.createElement("div");
+      row.className = "aup-progress-row";
+      var bar = document.createElement("div");
+      bar.className = "aup-progress";
+      var fill = document.createElement("div");
+      fill.className = "aup-progress-fill";
+      var pct = Math.max(0, Math.min(100, parseFloat(s.value) || 0));
+      fill.style.width = pct + "%";
+      if (p.intent) fill.setAttribute("data-intent", p.intent);
+      bar.appendChild(fill);
+      row.appendChild(bar);
+      if (p.showValue !== false) {
+        var lbl = document.createElement("span");
+        lbl.className = "aup-progress-label";
+        lbl.textContent = Math.round(pct) + "%";
+        row.appendChild(lbl);
+      }
+      el.appendChild(row);
+    } else if (inputType === "textarea") {
+      var ta = document.createElement("textarea");
+      ta.rows = p.rows || 3;
+      if (p.placeholder) ta.placeholder = String(p.placeholder);
+      if (s.value !== undefined) ta.value = String(s.value);
+      ta.oninput = function() {
+        if (node.events && node.events.change) {
+          _fireAupEvent(node.id, "change", {});
+        }
+      };
+      el.appendChild(ta);
+    } else {
+      // text, password, date, etc.
+      var inp = document.createElement("input");
+      inp.type = inputType === "password" ? "password" : "text";
+      if (p.placeholder) inp.placeholder = String(p.placeholder);
+      if (s.value !== undefined) inp.value = String(s.value);
+      if (p.min !== undefined) inp.min = String(p.min);
+      if (p.max !== undefined) inp.max = String(p.max);
+      if (inputType === "date") inp.type = "date";
+      inp.oninput = function() {
+        if (node.events && node.events.change) {
+          _fireAupEvent(node.id, "change", {});
+        }
+      };
+      el.appendChild(inp);
+    }
+    return el;
+  }
+
+`;
+
+//#endregion
+export { INPUT_JS };
+//# sourceMappingURL=input.mjs.map

package/dist/web-page/renderers/input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.mjs","names":[],"sources":["../../../src/web-page/renderers/input.ts"],"sourcesContent":["export const INPUT_JS = `\n  function renderAupInput(node) {\n    var el = document.createElement(\"div\");\n    el.className = \"aup-input\";\n    var p = node.props || {};\n    var s = node.state || {};\n    var inputType = p.type || p.variant || \"text\";\n\n    // Label\n    if (p.label) {\n      var lbl = document.createElement(\"label\");\n      lbl.textContent = _escapeHtml(String(p.label));\n      el.appendChild(lbl);\n    }\n\n    if (inputType === \"select\") {\n      var sel = document.createElement(\"select\");\n      var opts = Array.isArray(p.options) ? p.options : [];\n      for (var i = 0; i < opts.length; i++) {\n        var opt = document.createElement(\"option\");\n        var optItem = opts[i];\n        // Support both string options and {label, value} objects\n        var optVal = typeof optItem === \"object\" && optItem !== null ? (optItem.value || optItem.label || \"\") : String(optItem);\n        var optLabel = typeof optItem === \"object\" && optItem !== null ? (optItem.label || optItem.value || \"\") : String(optItem);\n        opt.value = String(optVal);\n        opt.textContent = _escapeHtml(String(optLabel));\n        if (String(p.value) === String(optVal) || String(s.value) === String(optVal)) opt.selected = true;\n        sel.appendChild(opt);\n      }\n      sel.onchange = function() {\n        if (node.events && node.events.change) {\n          _fireAupEvent(node.id, \"change\", { value: sel.value });\n        }\n      };\n      el.appendChild(sel);\n    } else if (inputType === \"toggle\") {\n      var toggleRow = document.createElement(\"div\");\n      toggleRow.className = \"aup-toggle\";\n      var track = document.createElement(\"div\");\n      track.className = \"aup-toggle-track\" + (s.value ? \" on\" : \"\");\n      var thumb = document.createElement(\"div\");\n      thumb.className = \"aup-toggle-thumb\";\n      track.appendChild(thumb);\n      toggleRow.appendChild(track);\n      toggleRow.onclick = function() {\n        track.classList.toggle(\"on\");\n        if (node.events && node.events.change) {\n          _fireAupEvent(node.id, \"change\", {});\n        }\n      };\n      el.appendChild(toggleRow);\n    } else if (inputType === \"checkbox\") {\n      var cbRow = document.createElement(\"div\");\n      cbRow.className = \"aup-checkbox-row\";\n      var cb = document.createElement(\"input\");\n      cb.type = \"checkbox\";\n      cb.checked = !!s.value;\n      cb.onchange = function() {\n        if (node.events && node.events.change) {\n          _fireAupEvent(node.id, \"change\", {});\n        }\n      };\n      cbRow.appendChild(cb);\n      if (p.label) {\n        var cbLbl = document.createElement(\"span\");\n        cbLbl.textContent = _escapeHtml(String(p.label));\n        cbRow.appendChild(cbLbl);\n      }\n      el.appendChild(cbRow);\n    } else if (inputType === \"slider\") {\n      var slider = document.createElement(\"input\");\n      slider.type = \"range\";\n      if (p.min !== undefined) slider.min = String(p.min);\n      if (p.max !== undefined) slider.max = String(p.max);\n      if (p.step !== undefined) slider.step = String(p.step);\n      if (s.value !== undefined) slider.value = String(s.value);\n      slider.oninput = function() {\n        if (node.events && node.events.change) {\n          _fireAupEvent(node.id, \"change\", {});\n        }\n      };\n      el.appendChild(slider);\n    } else if (inputType === \"progress\") {\n      var row = document.createElement(\"div\");\n      row.className = \"aup-progress-row\";\n      var bar = document.createElement(\"div\");\n      bar.className = \"aup-progress\";\n      var fill = document.createElement(\"div\");\n      fill.className = \"aup-progress-fill\";\n      var pct = Math.max(0, Math.min(100, parseFloat(s.value) || 0));\n      fill.style.width = pct + \"%\";\n      if (p.intent) fill.setAttribute(\"data-intent\", p.intent);\n      bar.appendChild(fill);\n      row.appendChild(bar);\n      if (p.showValue !== false) {\n        var lbl = document.createElement(\"span\");\n        lbl.className = \"aup-progress-label\";\n        lbl.textContent = Math.round(pct) + \"%\";\n        row.appendChild(lbl);\n      }\n      el.appendChild(row);\n    } else if (inputType === \"textarea\") {\n      var ta = document.createElement(\"textarea\");\n      ta.rows = p.rows || 3;\n      if (p.placeholder) ta.placeholder = String(p.placeholder);\n      if (s.value !== undefined) ta.value = String(s.value);\n      ta.oninput = function() {\n        if (node.events && node.events.change) {\n          _fireAupEvent(node.id, \"change\", {});\n        }\n      };\n      el.appendChild(ta);\n    } else {\n      // text, password, date, etc.\n      var inp = document.createElement(\"input\");\n      inp.type = inputType === \"password\" ? \"password\" : \"text\";\n      if (p.placeholder) inp.placeholder = String(p.placeholder);\n      if (s.value !== undefined) inp.value = String(s.value);\n      if (p.min !== undefined) inp.min = String(p.min);\n      if (p.max !== undefined) inp.max = String(p.max);\n      if (inputType === \"date\") inp.type = \"date\";\n      inp.oninput = function() {\n        if (node.events && node.events.change) {\n          _fireAupEvent(node.id, \"change\", {});\n        }\n      };\n      el.appendChild(inp);\n    }\n    return el;\n  }\n\n`;\n"],"mappings":";AAAA,MAAa,WAAW"}