reconvert sigpro/ui
This commit is contained in:
@@ -17,4 +17,5 @@
|
||||
* [Tags](api/tags.md)
|
||||
* [Global Store](api/global.md)
|
||||
* [JSX Style](api/jsx.md)
|
||||
* [HTML converter](convert.md)
|
||||
* [HTML converter](convert.md)
|
||||
* [UI](ui.md)
|
||||
@@ -1,6 +1,6 @@
|
||||
// src/convert.js
|
||||
import { $ } from "./sigpro.js";
|
||||
function html2sigpro(h) {
|
||||
function html2sigpro(h, advanced = false) {
|
||||
const B = new Set(["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "defer", "disabled", "formnovalidate", "hidden", "ismap", "itemscope", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "selected", "truespeed"]), esc = (v) => v.replace(/"/g, "\\\""), bP = (el) => {
|
||||
let a = [...el.attributes].map(({ name: n, value: v }) => /^on/i.test(n) ? `${n}: (e) => { ${v.replace(/\s+/g, " ").trim()} }` : B.has(n.toLowerCase()) && (!v || v == n) ? `${n}: true` : `${n}: "${esc(v)}"`);
|
||||
return a.length ? `{ ${a.join(", ")} }` : "";
|
||||
@@ -11,12 +11,48 @@ function html2sigpro(h) {
|
||||
return t.trim() ? `${s}"${esc(t)}"` : "";
|
||||
}
|
||||
if (n.nodeType == 1) {
|
||||
let t = n.tagName.toLowerCase(), p = bP(n), c = [...n.childNodes].map((i) => cN(i, d + 1)).filter(Boolean);
|
||||
if (!c.length)
|
||||
let t = n.tagName.toLowerCase();
|
||||
let classes = [];
|
||||
let otherAttrs = [];
|
||||
if (advanced) {
|
||||
const classAttribute = Array.from(n.attributes).find((attr) => attr.name === "class");
|
||||
if (classAttribute) {
|
||||
classes = classAttribute.value.trim().split(/\s+/).filter((c2) => c2);
|
||||
}
|
||||
otherAttrs = [...n.attributes].filter((attr) => attr.name !== "class");
|
||||
}
|
||||
let p = "";
|
||||
if (advanced && classes.length > 0) {
|
||||
const classChain = classes.map((c2) => `.${c2.replace(/-/g, "_")}`).join("");
|
||||
if (otherAttrs.length > 0) {
|
||||
const otherProps = otherAttrs.map(({ name: n2, value: v }) => /^on/i.test(n2) ? `${n2}: (e) => { ${v.replace(/\s+/g, " ").trim()} }` : B.has(n2.toLowerCase()) && (!v || v == n2) ? `${n2}: true` : `${n2}: "${esc(v)}"`);
|
||||
p = `${classChain}({ ${otherProps.join(", ")} })`;
|
||||
} else {
|
||||
p = classChain;
|
||||
}
|
||||
} else {
|
||||
p = bP(n);
|
||||
}
|
||||
let c = [...n.childNodes].map((i) => cN(i, d + 1)).filter(Boolean);
|
||||
if (!c.length) {
|
||||
if (advanced && classes.length > 0 && otherAttrs.length === 0) {
|
||||
return `${s}${t}${p}`;
|
||||
}
|
||||
return `${s}${t}(${p})`;
|
||||
}
|
||||
if (c.length == 1 && !c[0].includes(`
|
||||
`))
|
||||
`)) {
|
||||
if (advanced && classes.length > 0 && otherAttrs.length === 0 && !p.includes("{")) {
|
||||
return `${s}${t}${p}(${c[0].trim()})`;
|
||||
}
|
||||
return `${s}${t}(${p ? p + ", " : ""}${c[0].trim()})`;
|
||||
}
|
||||
if (advanced && classes.length > 0 && otherAttrs.length === 0 && !p.includes("{")) {
|
||||
return `${s}${t}${p}([
|
||||
${c.join(`,
|
||||
`)}
|
||||
${s}])`;
|
||||
}
|
||||
return `${s}${t}(${p ? p + ", " : ""}[
|
||||
${c.join(`,
|
||||
`)}
|
||||
@@ -34,13 +70,16 @@ var converter = () => {
|
||||
const setInH = (v) => inH(v);
|
||||
const outS = $("");
|
||||
const setOutS = (v) => outS(v);
|
||||
const advanced = $(false);
|
||||
const setAdvanced = (v) => advanced(v);
|
||||
const cnv = () => {
|
||||
try {
|
||||
setOutS(html2sigpro(inH()));
|
||||
setOutS(html2sigpro(inH(), advanced()));
|
||||
} catch (e) {
|
||||
setOutS("Error: " + e.message);
|
||||
}
|
||||
}, txS = "width:100%;height:200px;padding:10px;border:1px solid #ccc;border-radius:4px;font-family:monospace;font-size:14px;box-sizing:border-box;resize:vertical", btS = "padding:8px 16px;border:none;border-radius:4px;cursor:pointer;margin-right:8px;font-size:14px";
|
||||
};
|
||||
const txS = "width:100%;height:200px;padding:10px;border:1px solid #ccc;border-radius:4px;font-family:monospace;font-size:14px;box-sizing:border-box;resize:vertical", btS = "padding:8px 16px;border:none;border-radius:4px;cursor:pointer;margin-right:8px;font-size:14px";
|
||||
return div({ style: "max-width:900px;margin:20px auto;font-family:sans-serif" }, [
|
||||
h1("HTML → SigPro"),
|
||||
label({ style: "display:block;font-weight:700" }, "HTML:"),
|
||||
@@ -53,12 +92,20 @@ var converter = () => {
|
||||
cnv();
|
||||
}
|
||||
}),
|
||||
div({ style: "margin:10px 0" }, [
|
||||
div({ style: "margin:10px 0;display:flex;align-items:center;gap:10px" }, [
|
||||
button({ style: btS + ";background:#3b82f6;color:#fff", onclick: cnv }, "Convert"),
|
||||
button({ style: btS + ";background:#d1d5db", onclick: () => {
|
||||
setInH("");
|
||||
setOutS("");
|
||||
} }, "Clear")
|
||||
setAdvanced(false);
|
||||
} }, "Clear"),
|
||||
label({ style: "display:flex;align-items:center;gap:5px;cursor:pointer" }, [
|
||||
input({ type: "checkbox", checked: advanced, onchange: (e) => {
|
||||
setAdvanced(e.target.checked);
|
||||
cnv();
|
||||
} }),
|
||||
span("Advanced (dot notation for classes)")
|
||||
])
|
||||
]),
|
||||
div({ style: "display:flex;justify-content:space-between;align-items:center;margin-bottom:5px" }, [
|
||||
span({ style: "font-weight:700" }, "Out:"),
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="es">
|
||||
<html lang="es" data-theme="splight">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>SigPro Docs</title>
|
||||
@@ -10,12 +10,12 @@
|
||||
rel="stylesheet"
|
||||
href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css"
|
||||
/>
|
||||
|
||||
<link
|
||||
<link href="./sigpro.ui.css" rel="stylesheet" type="text/css" />
|
||||
<!-- <link
|
||||
href="https://cdn.jsdelivr.net/npm/daisyui@5"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
/> -->
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||
</head>
|
||||
@@ -65,12 +65,17 @@
|
||||
</script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
|
||||
<script type="module">
|
||||
import * as SigPro from "./sigpro.min.js";
|
||||
import * as SigPro from "./sigpro.js";
|
||||
Object.assign(window, SigPro);
|
||||
import("./convert.js").then(() => {
|
||||
import "./sigpro.tags.js";
|
||||
import "./sigpro.ui.js";
|
||||
|
||||
import("./sigpro.convert.js").then(() => {
|
||||
console.log("SigPro y Convert cargados correctamente.");
|
||||
});
|
||||
// document.documentElement.setAttribute("data-theme", "splight");
|
||||
</script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
|
||||
</body>
|
||||
|
||||
34
docs/sigpro.convert.js
Normal file
34
docs/sigpro.convert.js
Normal file
@@ -0,0 +1,34 @@
|
||||
var{$:x}=window.SigPro;function f(s,l="tags"){let a=new Set(["allowfullscreen","async","autofocus","autoplay","checked","controls","default","defer","disabled","formnovalidate","hidden","ismap","itemscope","loop","multiple","muted","nomodule","novalidate","open","playsinline","readonly","required","reversed","selected","truespeed"]),p=(o)=>o.replace(/"/g,"\\\""),c=(o)=>{let t=[...o.attributes].map(({name:e,value:n})=>/^on/i.test(e)?`${e}: (e) => { ${n.replace(/\s+/g," ").trim()} }`:a.has(e.toLowerCase())&&(!n||n==e)?`${e}: true`:`${e}: "${p(n)}"`);return t.length?`{ ${t.join(", ")} }`:""},m=(o,t=0)=>{let e=" ".repeat(t);if(o.nodeType==3){let n=o.textContent;return n.trim()?`${e}"${p(n)}"`:""}if(o.nodeType==1){let n=o.tagName.toLowerCase(),d=c(o),i=l==="core"?`h('${n}'`:n,r=[...o.childNodes].map((h)=>m(h,t+1)).filter(Boolean),g=!!d;if(l==="core"){if(!r.length)return g?`${e}${i}, ${d})`:`${e}${i})`;if(r.length===1&&!r[0].includes(`
|
||||
`))return g?`${e}${i}, ${d}, ${r[0].trim()})`:`${e}${i}, ${r[0].trim()})`;return g?`${e}${i}, ${d}, [
|
||||
${r.join(`,
|
||||
`)}
|
||||
${e}])`:`${e}${i}, [
|
||||
${r.join(`,
|
||||
`)}
|
||||
${e}])`}else{if(!r.length)return g?`${e}${i}(${d})`:`${e}${i}`;if(r.length===1&&!r[0].includes(`
|
||||
`))return g?`${e}${i}(${d}, ${r[0].trim()})`:`${e}${i}(${r[0].trim()})`;return g?`${e}${i}(${d}, [
|
||||
${r.join(`,
|
||||
`)}
|
||||
${e}])`:`${e}${i}([
|
||||
${r.join(`,
|
||||
`)}
|
||||
${e}])`}}return""},u=[...new DOMParser().parseFromString(s,"text/html").body.childNodes].map((o)=>m(o)).filter(Boolean);return u.length==1?u[0].trim():`[
|
||||
${u.join(`,
|
||||
`)}
|
||||
]`}var b=()=>{let s=x(""),l=x(""),a=x("tags"),p=x(""),c=()=>{try{l(f(s(),a()))}catch(t){l("Error: "+t.message)}p(s())},m=()=>{s(""),l(""),a("tags"),p("")},u="width:100%;height:200px;padding:10px;border:1px solid #ccc;border-radius:4px;font-family:monospace;font-size:14px;box-sizing:border-box;resize:vertical",o="padding:8px 16px;border:none;border-radius:4px;cursor:pointer;margin-right:8px;font-size:14px";return div({style:"margin:20px auto;font-family:sans-serif"},[h1("HTML → SigPro"),div({style:"margin-bottom:10px"},[div({style:"display:flex;gap:20px;flex-wrap:wrap;margin-top:5px"},[label({style:"display:flex;align-items:center;gap:6px"},["Core",input({type:"radio",name:"mode",value:"core",checked:a()==="core",onchange:(t)=>{if(t.target.checked)a("core"),c()}}),span("core — h('tag', props, ...)")]),label({style:"display:flex;align-items:center;gap:6px"},["Tags",input({type:"radio",name:"mode",value:"tags",checked:a()==="tags",onchange:(t)=>{if(t.target.checked)a("tags"),c()}}),span("tags — tag({ props }, ...)")])])]),div({style:"margin-top:15px;display:flex;gap:10px"},[button({style:"padding:8px 16px;border:none;border-radius:4px;cursor:pointer;margin-right:8px;font-size:14px;background:#3b82f6;color:#fff",onclick:c},"Convert"),button({style:"padding:8px 16px;border:none;border-radius:4px;cursor:pointer;margin-right:8px;font-size:14px;background:#d1d5db",onclick:m},"Clear")]),div({style:"display:grid;grid-template-columns:1fr;gap:15px;margin-top:15px;width:100%"},[div({style:"border:1px solid #ccc;border-radius:8px;padding:10px;display:flex;flex-direction:column"},[label({style:"font-weight:bold;margin-bottom:8px"},"HTML Input"),textarea({style:"width:100%;height:200px;padding:10px;border:1px solid #ccc;border-radius:4px;font-family:monospace;font-size:14px;box-sizing:border-box;resize:vertical",placeholder:"Paste your HTML here...",value:s,oninput:(t)=>{s(t.target.value),c()}})]),div({style:"border:1px solid #ccc;border-radius:8px;padding:10px;display:flex;flex-direction:column"},[div({style:"display:flex;justify-content:space-between;align-items:center;margin-bottom:8px"},[span({style:"font-weight:bold"},"SigPro Output"),button({style:"padding:4px 8px;background:#10b981;color:white;border:none;border-radius:4px;cursor:pointer;font-size:12px",onclick:()=>{navigator.clipboard.writeText(l()),alert("Copied!")}},"Copy")]),textarea({style:"width:100%;height:200px;padding:10px;border:1px solid #ccc;border-radius:4px;font-family:monospace;font-size:14px;box-sizing:border-box;resize:vertical;background:#f9fafb",readonly:!0,value:l,placeholder:"Converted code will appear here..."})]),div({style:"border:1px solid #ccc;border-radius:8px;padding:10px;display:flex;flex-direction:column"},[label({style:"font-weight:bold;margin-bottom:8px"},"Live Preview"),iframe({style:"width:100%;height:200px;border:1px solid #e2e8f0;border-radius:4px;background:white;",srcdoc:()=>{return`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||
<style>
|
||||
body { padding: 10px; margin: 0; font-family: sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${p()||""}
|
||||
</body>
|
||||
</html>
|
||||
`},sandbox:"allow-same-origin allow-scripts allow-popups allow-forms allow-modals"})])])])};window.html2sigpro=f;window.converter=b;
|
||||
396
docs/sigpro.js
396
docs/sigpro.js
File diff suppressed because one or more lines are too long
1
docs/sigpro.min.js
vendored
1
docs/sigpro.min.js
vendored
File diff suppressed because one or more lines are too long
1
docs/sigpro.tags.js
Normal file
1
docs/sigpro.tags.js
Normal file
@@ -0,0 +1 @@
|
||||
var{h:a}=window.SigPro;if(typeof window<"u")"a abbr article aside audio b blockquote br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label legend li main mark meter nav object ol optgroup option output p picture pre progress section select slot small source span strong sub summary sup svg table tbody td template textarea tfoot th thead time tr u ul video".split(" ").forEach((e)=>{window[e]=(t,s)=>a(e,t,s)});
|
||||
2
docs/sigpro.ui.css
Normal file
2
docs/sigpro.ui.css
Normal file
File diff suppressed because one or more lines are too long
1
docs/sigpro.ui.js
Normal file
1
docs/sigpro.ui.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/sigpro.utils.js
Normal file
1
docs/sigpro.utils.js
Normal file
@@ -0,0 +1 @@
|
||||
import{h as m,watch as x,$ as d,render as b,isF as g}from"./sigpro.js";var l=(t)=>{let e=()=>window.location.hash.slice(1)||"/",o=d(e()),n=()=>o(e());window.addEventListener("hashchange",n);let s=m("div",{class:"router-hook"}),h=null;return x([o],()=>{let f=o(),a=t.find((r)=>{let c=r.path.split("/").filter(Boolean),p=f.split("/").filter(Boolean);return c.length===p.length&&c.every((w,y)=>w[0]===":"||w===p[y])})||t.find((r)=>r.path==="*");if(a){h?.destroy();let r={};a.path.split("/").filter(Boolean).forEach((c,p)=>{if(c[0]===":")r[c.slice(1)]=f.split("/").filter(Boolean)[p]}),l.params(r),h=b(()=>g(a.component)?a.component(r):a.component),s.replaceChildren(h.container)}}),s.destroy=()=>{window.removeEventListener("hashchange",n),h?.destroy()},s};l.params=d({});l.to=(t)=>window.location.hash=t.replace(/^#?\/?/,"#/");l.back=()=>window.history.back();l.path=()=>window.location.hash.replace(/^#/,"")||"/";var v=async(t,e={},o=null)=>{if(o)o(!0);try{let n=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e),credentials:"include"});if(!n.ok){let s=await n.text();throw Error(`Error ${n.status}: ${s}`)}return await n.json()}finally{if(o)o(!1)}},u=d("en"),i={},E=(t)=>{for(let e of Object.keys(t)){if(!i[e])i[e]={};Object.assign(i[e],t[e])}},L=(t)=>{if(t&&i[t])u(t)},B=(t)=>{return()=>i[u()]?.[t]??t};export{B as t,L as setLocale,l as router,v as db,E as addLang};
|
||||
4
docs/sigpro.vite.js
Normal file
4
docs/sigpro.vite.js
Normal file
@@ -0,0 +1,4 @@
|
||||
function g(){let u="\x00virtual:sigpro-routes",i=(e)=>{if(!fs.existsSync(e))return[];return fs.readdirSync(e,{recursive:!0}).filter((r)=>/\.(js|jsx)$/.test(r)&&!path.basename(r).startsWith("_")).map((r)=>path.resolve(e,r))},l=(e,r)=>{return("/"+path.relative(e,r).replace(/\\/g,"/").replace(/\.(js|jsx)$/,"").replace(/\/index$/,"").replace(/^index$/,"")).replace(/\/+/g,"/").replace(/\[\.\.\.([^\]]+)\]/g,"*").replace(/\[([^\]]+)\]/g,":$1").replace(/\/$/,"")||"/"};return{name:"sigpro-router",resolveId(e){if(e==="virtual:sigpro-routes")return u},load(e){if(e!==u)return;let r=process.cwd(),t=path.resolve(r,"src/pages"),p=i(t).sort((n,a)=>{let o=l(t,n),c=l(t,a);if(o.includes(":")&&!c.includes(":"))return 1;if(!o.includes(":")&&c.includes(":"))return-1;return c.length-o.length}),s="";if(p.forEach((n)=>{let a=l(t,n),o="./"+path.relative(r,n).replace(/\\/g,"/");s+=` { path: '${a}', component: () => import('/${o}') },
|
||||
`}),!s.includes("path: '*'"))s+=` { path: '*', component: () => ({ default: () => document.createTextNode('404 - Not Found') }) },
|
||||
`;return`export const routes = [
|
||||
${s}];`}}}export{g as sigproRouter};
|
||||
80
docs/ui.md
Normal file
80
docs/ui.md
Normal file
@@ -0,0 +1,80 @@
|
||||
<div id="ui"></div>
|
||||
|
||||
```js
|
||||
// ===== SIGNALS =====
|
||||
const fruta = $("");
|
||||
const color = $("#3b82f6");
|
||||
const fecha = $("");
|
||||
const rango = $({ start: null, end: null });
|
||||
const pais = $("");
|
||||
|
||||
// ===== OPCIONES =====
|
||||
const frutas = ["Manzana", "Pera", "Plátano", "Fresa", "Mango", "Sandía", "Melón", "Uva"];
|
||||
const paises = [
|
||||
{ label: "🇪🇸 España", value: "ES" },
|
||||
{ label: "🇲🇽 México", value: "MX" },
|
||||
{ label: "🇦🇷 Argentina", value: "AR" },
|
||||
{ label: "🇨🇴 Colombia", value: "CO" },
|
||||
{ label: "🇨🇱 Chile", value: "CL" }
|
||||
];
|
||||
|
||||
mount(() =>
|
||||
div({ class: "p-8 max-w-md mx-auto flex flex-col gap-4" }, [
|
||||
h1({ class: "text-2xl font-bold" }, "Field Components"),
|
||||
|
||||
// Autocomplete simple
|
||||
ui.autocomplete({
|
||||
label: "Fruta favorita",
|
||||
items: frutas,
|
||||
value: fruta,
|
||||
placeholder: "Buscar fruta..."
|
||||
}),
|
||||
|
||||
// Autocomplete con objetos
|
||||
ui.autocomplete({
|
||||
label: "País",
|
||||
items: paises,
|
||||
value: pais,
|
||||
placeholder: "Elige un país..."
|
||||
}),
|
||||
|
||||
// Datepicker simple
|
||||
ui.datepicker({
|
||||
label: "Fecha de nacimiento",
|
||||
value: fecha,
|
||||
placeholder: "Selecciona fecha..."
|
||||
}),
|
||||
|
||||
// Datepicker rango
|
||||
ui.datepicker({
|
||||
label: "Estancia",
|
||||
range: true,
|
||||
value: rango,
|
||||
placeholder: "Check-in → Check-out"
|
||||
}),
|
||||
|
||||
// Colorpicker
|
||||
ui.colorpicker({
|
||||
label: "Color favorito",
|
||||
value: color,
|
||||
placeholder: "Elige un color..."
|
||||
}),
|
||||
|
||||
ui.theme(),
|
||||
// Preview
|
||||
div({ class: "bg-base-200 rounded-box p-4 flex flex-col gap-2 text-sm" }, [
|
||||
div({}, () => `🍎 Fruta: ${val(fruta) || "—"}`),
|
||||
div({}, () => `🌍 País: ${val(pais) || "—"}`),
|
||||
div({}, () => `📅 Fecha: ${val(fecha) || "—"}`),
|
||||
div({}, () => {
|
||||
const r = val(rango);
|
||||
return r.start && r.end ? `🏨 Estancia: ${r.start} → ${r.end}` : "🏨 Estancia: —";
|
||||
}),
|
||||
div({ class: "flex items-center gap-2" }, [
|
||||
span({}, "🎨 Color:"),
|
||||
div({ class: "w-6 h-6 rounded border border-base-300", style: () => `background:${val(color)}` })
|
||||
])
|
||||
])
|
||||
])
|
||||
, "#ui");
|
||||
```
|
||||
Reference in New Issue
Block a user