Import individual
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s

This commit is contained in:
2026-04-17 20:29:16 +02:00
parent 33c7cede32
commit 949be7939d
48 changed files with 1624 additions and 5295 deletions

1624
dist/sigpro-ui.esm.js vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

1644
dist/sigpro-ui.js vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -10,17 +10,7 @@
href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css"
/> />
<link <link href="./sigpro.css" rel="stylesheet" type="text/css" />
href="./sigpro.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> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
@@ -42,27 +32,31 @@
sidebarDisplayLevel: 1, sidebarDisplayLevel: 1,
executeScript: true, executeScript: true,
copyCode: { copyCode: {
buttonText: '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>', buttonText:
'<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>',
errorText: "Error", errorText: "Error",
successText: '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg>', successText:
'<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg>',
}, },
plugins: [ plugins: [
function(hook, vm) { function (hook, vm) {
hook.doneEach(function() { hook.doneEach(function () {
// Buscamos los bloques de código JS que queremos ejecutar // Buscamos los bloques de código JS que queremos ejecutar
const codeBlocks = document.querySelectorAll('pre[data-lang="javascript"] code'); const codeBlocks = document.querySelectorAll(
'pre[data-lang="javascript"] code',
codeBlocks.forEach(code => { );
try {
const runDemo = new Function(code.innerText); codeBlocks.forEach((code) => {
runDemo(); try {
} catch (err) { const runDemo = new Function(code.innerText);
console.error("Error en la demo de SigPro:", err); runDemo();
} } catch (err) {
}); console.error("Error en la demo de SigPro:", err);
}); }
} });
] });
},
],
}; };
</script> </script>
@@ -70,4 +64,4 @@
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
<script src="./sigpro-ui.min.js"></script> <script src="./sigpro-ui.min.js"></script>
</body> </body>
</html> </html>

2100
docs/sigpro-ui.min.js vendored

File diff suppressed because one or more lines are too long

123
index.js
View File

@@ -1,56 +1,85 @@
// import './src/sigpro.js'; import * as AccordionModule from './src/components/Accordion.js';
import { $, Watch, Tag, If, For, Router, Mount } from './src/sigpro.js'; import * as AlertModule from './src/components/Alert.js';
import * as Components from './src/components/index.js'; import * as AutocompleteModule from './src/components/Autocomplete.js';
import * as Utils from './src/core/utils.js'; import * as BadgeModule from './src/components/Badge.js';
import { tt } from './src/core/i18n.js'; import * as ButtonModule from './src/components/Button.js';
import * as CheckboxModule from './src/components/Checkbox.js';
import * as ColorpickerModule from './src/components/Colorpicker.js';
import * as DatepickerModule from './src/components/Datepicker.js';
import * as DrawerModule from './src/components/Drawer.js';
import * as DropdownModule from './src/components/Dropdown.js';
import * as FabModule from './src/components/Fab.js';
import * as FieldsetModule from './src/components/Fieldset.js';
import * as FileinputModule from './src/components/Fileinput.js';
import * as IndicatorModule from './src/components/Indicator.js';
import * as InputModule from './src/components/Input.js';
import * as LabelModule from './src/components/Label.js';
import * as ListModule from './src/components/List.js';
import * as MenuModule from './src/components/Menu.js';
import * as ModalModule from './src/components/Modal.js';
import * as NavbarModule from './src/components/Navbar.js';
import * as RadioModule from './src/components/Radio.js';
import * as RangeModule from './src/components/Range.js';
import * as RatingModule from './src/components/Rating.js';
import * as SelectModule from './src/components/Select.js';
import * as StackModule from './src/components/Stack.js';
import * as StatModule from './src/components/Stat.js';
import * as SwapModule from './src/components/Swap.js';
import * as TableModule from './src/components/Table.js';
import * as TabsModule from './src/components/Tabs.js';
import * as TimelineModule from './src/components/Timeline.js';
import * as ToastModule from './src/components/Toast.js';
import * as TooltipModule from './src/components/Tooltip.js';
import { Locale, tt } from './src/core/utils.js';
export const Components = {
...AccordionModule,
...AlertModule,
...AutocompleteModule,
...BadgeModule,
...ButtonModule,
...CheckboxModule,
...ColorpickerModule,
...DatepickerModule,
...DrawerModule,
...DropdownModule,
...FabModule,
...FieldsetModule,
...FileinputModule,
...IndicatorModule,
...InputModule,
...LabelModule,
...ListModule,
...MenuModule,
...ModalModule,
...NavbarModule,
...RadioModule,
...RangeModule,
...RatingModule,
...SelectModule,
...StackModule,
...StatModule,
...SwapModule,
...TableModule,
...TabsModule,
...TimelineModule,
...ToastModule,
...TooltipModule
};
export const Utils = {
Locale, tt
};
export * from './src/components/index.js';
export * from './src/core/utils.js';
export { $, Watch, Tag, If, For, Router, Mount, tt };
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
// const CoreAPI = { $, $$, ender, Watch, Tag, If, For, Router, Mount } = SigPro; Object.entries({ ...Components, ...Utils }).forEach(([name, value]) => {
// Object.entries(CoreAPI).forEach(([name, fn]) => {
// Object.defineProperty(window, name, {
// value: fn,
// writable: false,
// configurable: false,
// enumerable: true
// });
// });
Object.entries(Components).forEach(([name, component]) => {
Object.defineProperty(window, name, { Object.defineProperty(window, name, {
value: component, value,
writable: false, writable: false,
configurable: true, configurable: true,
enumerable: true enumerable: true
}); });
}); });
console.log("SigProUI installed");
Object.entries(Utils).forEach(([name, fn]) => { }
Object.defineProperty(window, name, {
value: fn,
writable: false,
configurable: true,
enumerable: true
});
});
Object.defineProperty(window, 'tt', {
value: tt,
writable: false,
configurable: true,
enumerable: true
});
Object.defineProperty(window, 'SigProUI', {
value: { ...Components, Utils, tt },
writable: false,
configurable: true,
enumerable: true
});
console.log("🎨 SigProUI ready");
}

View File

@@ -1,13 +1,18 @@
{ {
"name": "sigpro-ui", "name": "sigpro-ui",
"version": "1.1.4", "version": "1.1.4",
"repository": {
"type": "git",
"url": "https://git.natxocc.com/natxocc/sigpro-ui"
},
"main": "./index.js", "main": "./index.js",
"module": "./index.js", "module": "./index.js",
"devDependencies": { "devDependencies": {
"@iconify/json": "^2.2.458", "@iconify/json": "^2.2.463",
"@iconify/tailwind4": "^1.2.3", "@iconify/tailwind4": "^1.2.3",
"@tailwindcss/cli": "^4.0.0", "@tailwindcss/cli": "^4.2.2",
"daisyui": "^5.5.19", "daisyui": "^5.5.19",
"sigpro": "git+http://gitea:3000/natxocc/sigpro",
"tailwindcss": "^4.2.2" "tailwindcss": "^4.2.2"
}, },
"exports": { "exports": {
@@ -21,17 +26,9 @@
"default": "./css/index.js" "default": "./css/index.js"
} }
}, },
"homepage": "https://sigpro.natxocc.com/ui/#/",
"repository": {
"type": "git",
"url": "https://git.natxocc.com/natxocc/sigpro-ui"
},
"bugs": { "bugs": {
"url": "https://git.natxocc.com/natxocc/sigpro-ui/issues" "url": "https://git.natxocc.com/natxocc/sigpro-ui/issues"
}, },
"publishConfig": {
"registry": "https://git.natxocc.com/api/packages/natxocc/npm/"
},
"files": [ "files": [
"index.js", "index.js",
"index.d.ts", "index.d.ts",
@@ -40,12 +37,12 @@
"README.md", "README.md",
"LICENSE" "LICENSE"
], ],
"homepage": "https://sigpro.natxocc.com/ui/#/",
"jsdelivr": "./dist/sigpro-ui.min.js", "jsdelivr": "./dist/sigpro-ui.min.js",
"license": "MIT", "license": "MIT",
"sideEffects": [ "publishConfig": {
"./css/*", "registry": "https://git.natxocc.com/api/packages/natxocc/npm/"
"**/*.css" },
],
"scripts": { "scripts": {
"clean": "rm -rf ./dist ./css/*.css ./docs/*.js ./docs/*.css", "clean": "rm -rf ./dist ./css/*.css ./docs/*.js ./docs/*.css",
"build:cssmin": "tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.min.css --content './src/**/*.js' --minify", "build:cssmin": "tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.min.css --content './src/**/*.js' --minify",
@@ -54,11 +51,15 @@
"build:js": "bun run build:js:iife && bun run build:js:esm", "build:js": "bun run build:js:iife && bun run build:js:esm",
"build:js:iife": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify", "build:js:iife": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
"build:js:esm": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.js --format=esm && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.min.js --format=esm --minify", "build:js:esm": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.js --format=esm && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.min.js --format=esm --minify",
"build:jsdocs": "bun build ./index.js --bundle --outfile=./docs/sigpro-ui.min.js --format=iife --global-name=SigProUI ", "build:jsdocs": "bun build ./index.js --bundle --outfile=./docs/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
"build": "bun run clean && bun run build:css && bun run build:js && bun run build:jsdocs && bun run build:cssdocs && bun run build:cssmin", "build": "bun run clean && bun run build:css && bun run build:js && bun run build:jsdocs && bun run build:cssdocs && bun run build:cssmin",
"prepublishOnly": "bun run build", "prepublishOnly": "bun run build",
"docs": "bun x serve docs" "docs": "bun x serve docs"
}, },
"sideEffects": [
"./css/*",
"**/*.css"
],
"type": "module", "type": "module",
"unpkg": "./dist/sigpro-ui.min.js" "unpkg": "./dist/sigpro-ui.min.js"
} }

8
sigpro-ui.code-workspace Normal file
View File

@@ -0,0 +1,8 @@
{
"folders": [
{
"path": "."
}
],
"settings": {}
}

View File

@@ -1,5 +1,5 @@
// components/Accordion.js // components/Accordion.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { ui, val } from "../core/utils.js"; import { ui, val } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Alert.js // components/Alert.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { ui, getIcon } from "../core/utils.js"; import { ui, getIcon } from "../core/utils.js";
/** /**

View File

@@ -1,7 +1,6 @@
// components/Autocomplete.js // components/Autocomplete.js
// import { $, Tag, For } from "../sigpro.js"; import { $, Tag, For } from "sigpro";
import { val } from "../core/utils.js"; import { val } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import { Input } from "./Input.js"; import { Input } from "./Input.js";
/** /**
@@ -69,7 +68,7 @@ export const Autocomplete = (props) => {
Input({ Input({
label, label,
class: className, class: className,
placeholder: placeholder || tt("search")(), placeholder: placeholder,
value: query, // Vinculado a la señal query value: query, // Vinculado a la señal query
onfocus: () => isOpen(true), onfocus: () => isOpen(true),
onblur: () => setTimeout(() => isOpen(false), 150), onblur: () => setTimeout(() => isOpen(false), 150),
@@ -108,7 +107,7 @@ export const Autocomplete = (props) => {
(opt, i) => (typeof opt === "string" ? opt : opt.value) + i, (opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
), ),
// Mensaje de "no hay datos" reactivo // Mensaje de "no hay datos" reactivo
() => (list().length ? null : Tag("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())), () => (list().length ? null : Tag("li", { class: "p-2 text-center opacity-50" }, "nodata")),
], ],
), ),
]); ]);

View File

@@ -1,5 +1,5 @@
// components/Badge.js // components/Badge.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { ui } from "../core/utils.js"; import { ui } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Button.js // components/Button.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { ui, val, getIcon } from "../core/utils.js"; import { ui, val, getIcon } from "../core/utils.js";
/** /**

View File

@@ -1,4 +1,5 @@
// components/Checkbox.js // components/Checkbox.js
import { Tag } from "sigpro";
import { val, ui } from "../core/utils.js"; import { val, ui } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Colorpicker.js // components/Colorpicker.js
// import { $, Tag, If } from "../sigpro.js"; import { $, Tag, If } from "sigpro";
import { val, ui } from "../core/utils.js"; import { val, ui } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Datepicker.js // components/Datepicker.js
// import { $, Tag, If } from "../sigpro.js"; import { $, Tag, If } from "sigpro";
import { val, ui, getIcon } from "../core/utils.js"; import { val, ui, getIcon } from "../core/utils.js";
import { Input } from "./Input.js"; import { Input } from "./Input.js";

View File

@@ -1,5 +1,5 @@
// components/Drawer.js // components/Drawer.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { ui } from "../core/utils.js"; import { ui } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Dropdown.js // components/Dropdown.js
// import { Tag, For, Watch } from "../sigpro.js"; import { Tag, For, Watch } from "sigpro";
import { ui } from "../core/utils.js"; import { ui } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Fab.js // components/Fab.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { val, ui, getIcon } from "../core/utils.js"; import { val, ui, getIcon } from "../core/utils.js";
/** /**

View File

@@ -1,3 +1,4 @@
import { $$ } from "sigpro";
export const Fetch = ({ url, options = {}, fallback = "Cargando..." }, { children }) => { export const Fetch = ({ url, options = {}, fallback = "Cargando..." }, { children }) => {
const state = $$({ data: null, loading: true, error: null }); const state = $$({ data: null, loading: true, error: null });
let controller = null; let controller = null;

View File

@@ -1,4 +1,4 @@
import { $$, Tag, isFunc } from "./sigpro.js"; import { $$, Tag, isFunc } from "sigpro";
const _cache = new Map(); const _cache = new Map();

View File

@@ -1,5 +1,5 @@
// components/Fieldset.js // components/Fieldset.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { val, ui } from "../core/utils.js"; import { val, ui } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Fileinput.js // components/Fileinput.js
// import { $, Tag, If, For } from "../sigpro.js"; import { $, Tag, If, For } from "sigpro";
import { ui, getIcon } from "../core/utils.js"; import { ui, getIcon } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Indicator.js // components/Indicator.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { ui } from "../core/utils.js"; import { ui } from "../core/utils.js";
/** /**

View File

@@ -1,4 +1,5 @@
// components/Input.js // components/Input.js
import { Tag } from "sigpro";
import { val, ui, getIcon } from "../core/utils.js"; import { val, ui, getIcon } from "../core/utils.js";
/** /**

View File

@@ -1,4 +1,5 @@
// components/Label.js // components/Label.js
import { Tag } from "sigpro";
import { ui, val } from "../core/utils.js"; import { ui, val } from "../core/utils.js";
export const Label = (props) => { export const Label = (props) => {

View File

@@ -1,5 +1,5 @@
// components/List.js // components/List.js
// import { Tag, If, For } from "../sigpro.js"; import { Tag, If, For } from "sigpro";
import { ui, val } from "../core/utils.js"; import { ui, val } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Menu.js // components/Menu.js
// import { Tag, For } from "../sigpro.js"; import { Tag, For } from "sigpro";
import { val, ui } from "../core/utils.js"; import { val, ui } from "../core/utils.js";
/** /**

View File

@@ -1,7 +1,6 @@
// components/Modal.js // components/Modal.js
// import { Tag, Watch } from "../sigpro.js"; import { Tag, Watch } from "sigpro";
import { ui } from "../core/utils.js"; import { ui } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import { Button } from "./Button.js"; import { Button } from "./Button.js";
/** /**
@@ -54,7 +53,7 @@ export const Modal = (props, children) => {
Tag("div", { class: "modal-action" }, [ Tag("div", { class: "modal-action" }, [
Tag("form", { method: "dialog", class: "flex gap-2" }, [ Tag("form", { method: "dialog", class: "flex gap-2" }, [
...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean), ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
Button({ type: "submit" }, tt("close")()) Button({ type: "submit" }, "close")
]) ])
]) ])
]), ]),

View File

@@ -1,5 +1,5 @@
// components/Navbar.js // components/Navbar.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { ui } from "../core/utils.js"; import { ui } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Radio.js // components/Radio.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { val, ui } from "../core/utils.js"; import { val, ui } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Range.js // components/Range.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { val, ui } from "../core/utils.js"; import { val, ui } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Rating.js // components/Rating.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { val, ui } from "../core/utils.js"; import { val, ui } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Select.js // components/Select.js
// import { Tag, For } from "../sigpro.js"; import { Tag, For } from "sigpro";
import { val, ui } from "../core/utils.js"; import { val, ui } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Stack.js // components/Stack.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { ui } from "../core/utils.js"; import { ui } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Stat.js // components/Stat.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { val, ui } from "../core/utils.js"; import { val, ui } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Swap.js // components/Swap.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { ui, val } from "../core/utils.js"; import { ui, val } from "../core/utils.js";
/** /**

View File

@@ -1,7 +1,6 @@
// components/Table.js // components/Table.js
// import { Tag, For, If } from "../sigpro.js"; import { Tag, For, If } from "sigpro";
import { val, ui } from "../core/utils.js"; import { val, ui } from "../core/utils.js";
import { tt } from "../core/i18n.js";
/** /**
* Table component * Table component
@@ -14,7 +13,7 @@ import { tt } from "../core/i18n.js";
* - hover, text-center, p-10, opacity-50 * - hover, text-center, p-10, opacity-50
*/ */
export const Table = (props) => { export const Table = (props) => {
const { class: className, items = [], columns = [], keyFn, zebra = false, pinRows = false, empty = tt("nodata")(), ...rest } = props; const { class: className, items = [], columns = [], keyFn, zebra = false, pinRows = false, empty = "nodata", ...rest } = props;
const tableClass = () => { const tableClass = () => {
const zebraClass = val(zebra) ? "table-zebra" : ""; const zebraClass = val(zebra) ? "table-zebra" : "";

View File

@@ -1,5 +1,5 @@
// components/Tabs.js // components/Tabs.js
import { $, Tag, Watch } from "../sigpro.js"; import { $, Tag, Watch } from "sigpro";
import { val, ui, getIcon } from "..//core/utils.js"; import { val, ui, getIcon } from "..//core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Timeline.js // components/Timeline.js
// import { Tag, For } from "../sigpro.js"; import { Tag } from "sigpro";
import { val, ui, getIcon } from "../core/utils.js"; import { val, ui, getIcon } from "../core/utils.js";
/** /**

View File

@@ -1,5 +1,5 @@
// components/Toast.js // components/Toast.js
// import { Tag, Mount } from "../sigpro.js"; import { Tag, Mount } from "sigpro";
import { getIcon } from "../core/utils.js"; import { getIcon } from "../core/utils.js";
import { Button } from "./Button.js"; import { Button } from "./Button.js";

View File

@@ -1,5 +1,5 @@
// components/Tooltip.js // components/Tooltip.js
// import { Tag } from "../sigpro.js"; import { Tag } from "sigpro";
import { ui } from "../core/utils.js"; import { ui } from "../core/utils.js";
/** /**
@@ -16,4 +16,4 @@ export const Tooltip = (props, children) =>
...props, ...props,
class: () => ui('tooltip w-full', props.class), class: () => ui('tooltip w-full', props.class),
"data-tip": props.tip, "data-tip": props.tip,
}, children); }, children)

View File

@@ -1,110 +0,0 @@
import * as AccordionModule from './Accordion.js';
import * as AlertModule from './Alert.js';
import * as AutocompleteModule from './Autocomplete.js';
import * as BadgeModule from './Badge.js';
import * as ButtonModule from './Button.js';
import * as CheckboxModule from './Checkbox.js';
import * as ColorpickerModule from './Colorpicker.js';
import * as DatepickerModule from './Datepicker.js';
import * as DrawerModule from './Drawer.js';
import * as DropdownModule from './Dropdown.js';
import * as FabModule from './Fab.js';
import * as FieldsetModule from './Fieldset.js';
import * as FileinputModule from './Fileinput.js';
import * as IndicatorModule from './Indicator.js';
import * as InputModule from './Input.js';
import * as LabelModule from './Label.js';
import * as ListModule from './List.js';
import * as MenuModule from './Menu.js';
import * as ModalModule from './Modal.js';
import * as NavbarModule from './Navbar.js';
import * as RadioModule from './Radio.js';
import * as RangeModule from './Range.js';
import * as RatingModule from './Rating.js';
import * as SelectModule from './Select.js';
import * as StackModule from './Stack.js';
import * as StatModule from './Stat.js';
import * as SwapModule from './Swap.js';
import * as TableModule from './Table.js';
import * as TabsModule from './Tabs.js';
import * as TimelineModule from './Timeline.js';
import * as ToastModule from './Toast.js';
import * as TooltipModule from './Tooltip.js';
export * from './Accordion.js';
export * from './Alert.js';
export * from './Autocomplete.js';
export * from './Badge.js';
export * from './Button.js';
export * from './Checkbox.js';
export * from './Colorpicker.js';
export * from './Datepicker.js';
export * from './Drawer.js';
export * from './Dropdown.js';
export * from "./Fab.js";
export * from './Fieldset.js';
export * from './Fileinput.js';
export * from './Indicator.js';
export * from './Input.js';
export * from './Label.js';
export * from './List.js';
export * from './Menu.js';
export * from './Modal.js';
export * from './Navbar.js';
export * from './Radio.js';
export * from './Range.js';
export * from './Rating.js';
export * from './Select.js';
export * from './Stack.js';
export * from './Stat.js';
export * from './Swap.js';
export * from './Table.js';
export * from './Tabs.js';
export * from './Timeline.js';
export * from './Toast.js';
export * from './Tooltip.js';
const Components = {
...AccordionModule,
...AlertModule,
...AutocompleteModule,
...BadgeModule,
...ButtonModule,
...CheckboxModule,
...ColorpickerModule,
...DatepickerModule,
...DrawerModule,
...DropdownModule,
...FabModule,
...FieldsetModule,
...FileinputModule,
...IndicatorModule,
...InputModule,
...LabelModule,
...ListModule,
...MenuModule,
...ModalModule,
...NavbarModule,
...RadioModule,
...RangeModule,
...RatingModule,
...SelectModule,
...StackModule,
...StatModule,
...SwapModule,
...TableModule,
...TabsModule,
...TimelineModule,
...ToastModule,
...TooltipModule
};
export default {
...Components,
install: (target = window) => {
Object.entries(Components).forEach(([name, component]) => {
target[name] = component;
});
console.log("🚀 SigproUI");
}
};

View File

@@ -1,26 +0,0 @@
// import { $ } from "../sigpro.js";
export const i18n = {
es: {
close: "Cerrar",
confirm: "Confirmar",
cancel: "Cancelar",
search: "Buscar...",
loading: "Cargando...",
nodata: "Sin datos"
},
en: {
close: "Close",
confirm: "Confirm",
cancel: "Cancel",
search: "Search...",
loading: "Loading...",
nodata: "No data"
}
};
export const currentLocale = $("es");
export const Locale = t => currentLocale(t);
export const tt = t => () => i18n[currentLocale()][t] || t;

View File

@@ -1,5 +1,5 @@
// core/utils.js // core/utils.js
// import { Tag } from "../sigpro.js"; import { $, Tag } from "sigpro";
export const val = t => typeof t === "function" ? t() : t; export const val = t => typeof t === "function" ? t() : t;
@@ -33,4 +33,30 @@ export const getIcon = (icon) => {
} }
return null; return null;
}; };
export const i18n = {
es: {
close: "Cerrar",
confirm: "Confirmar",
cancel: "Cancelar",
search: "Buscar...",
loading: "Cargando...",
nodata: "Sin datos"
},
en: {
close: "Close",
confirm: "Confirm",
cancel: "Cancel",
search: "Search...",
loading: "Loading...",
nodata: "No data"
}
};
export const currentLocale = $("es");
// Export design
export const Locale = t => currentLocale(t);
export const tt = t => () => i18n[currentLocale()][t] || t;

View File

@@ -1,518 +0,0 @@
// sigpro 1.2.0
const isFunc = f => typeof f === "function"
const isObj = o => o && typeof o === "object"
const isArr = Array.isArray
const doc = typeof document !== "undefined" ? document : null
const ensureNode = n => n?._isRuntime ? n.container : (n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n)))
let activeEffect = null
let activeOwner = null
let isFlushing = false
let batchDepth = 0
const effectQueue = new Set()
const proxyCache = new WeakMap()
const ITER = Symbol('iter')
const MOUNTED_NODES = new WeakMap()
const dispose = eff => {
if (!eff || eff._disposed) return
eff._disposed = true
const stack = [eff]
while (stack.length) {
const e = stack.pop()
if (e._cleanups) {
e._cleanups.forEach(fn => fn())
e._cleanups.clear()
}
if (e._children) {
e._children.forEach(child => stack.push(child))
e._children.clear()
}
if (e._deps) {
e._deps.forEach(depSet => depSet.delete(e))
e._deps.clear()
}
}
}
const onMount = fn => {
if (activeOwner) (activeOwner._mounts ||= []).push(fn)
}
const onUnmount = fn => {
if (activeOwner) (activeOwner._cleanups ||= new Set()).add(fn)
}
const untrack = fn => {
const p = activeEffect
activeEffect = null
try { return fn() } finally { activeEffect = p }
}
const createEffect = (fn, isComputed = false) => {
const effect = () => {
if (effect._disposed) return
if (effect._deps) effect._deps.forEach(s => s.delete(effect))
if (effect._cleanups) {
effect._cleanups.forEach(c => c())
effect._cleanups.clear()
}
const prevEffect = activeEffect
const prevOwner = activeOwner
activeEffect = activeOwner = effect
try {
return effect._result = fn()
} catch (e) {
console.error("[SigPro]", e)
} finally {
activeEffect = prevEffect
activeOwner = prevOwner
}
}
effect._deps = effect._cleanups = effect._children = null
effect._disposed = false
effect._isComputed = isComputed
effect._depth = activeEffect ? activeEffect._depth + 1 : 0
effect._mounts = []
effect._parent = activeOwner
if (activeOwner) (activeOwner._children ||= new Set()).add(effect)
return effect
}
const flush = () => {
if (isFlushing) return
isFlushing = true
const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth)
effectQueue.clear()
for (const e of sorted) if (!e._disposed) e()
isFlushing = false
}
const Batch = fn => {
batchDepth++
try {
return fn()
} finally {
batchDepth--
if (batchDepth === 0 && effectQueue.size > 0 && !isFlushing) {
flush()
}
}
}
const trackUpdate = (subs, trigger = false) => {
if (!trigger && activeEffect && !activeEffect._disposed) {
subs.add(activeEffect)
; (activeEffect._deps ||= new Set()).add(subs)
} else if (trigger) {
let hasQueue = false
subs.forEach(e => {
if (e === activeEffect || e._disposed) return
if (e._isComputed) {
e._dirty = true
if (e._subs) trackUpdate(e._subs, true)
} else {
effectQueue.add(e)
hasQueue = true
}
})
if (hasQueue && !isFlushing && batchDepth === 0) queueMicrotask(flush)
}
}
const $ = (val, key = null) => {
const subs = new Set()
if (isFunc(val)) {
let cache, dirty = true
const computed = () => {
if (dirty) {
const prev = activeEffect
activeEffect = computed
try {
const next = val()
if (!Object.is(cache, next)) {
cache = next
dirty = false
trackUpdate(subs, true)
}
} finally { activeEffect = prev }
}
trackUpdate(subs)
return cache
}
computed._isComputed = true
computed._subs = subs
computed._dirty = true
computed._deps = null
computed._disposed = false
computed.markDirty = () => { dirty = true }
computed.stop = () => {
computed._disposed = true
if (computed._deps) {
computed._deps.forEach(depSet => depSet.delete(computed))
computed._deps.clear()
}
subs.clear()
}
if (activeOwner) onUnmount(computed.stop)
return computed
}
if (key) try { val = JSON.parse(localStorage.getItem(key)) ?? val } catch (e) { }
return (...args) => {
if (args.length) {
const next = isFunc(args[0]) ? args[0](val) : args[0]
if (!Object.is(val, next)) {
val = next
if (key) localStorage.setItem(key, JSON.stringify(val))
trackUpdate(subs, true)
}
}
trackUpdate(subs)
return val
}
}
const $$ = (target) => {
if (!isObj(target)) return target
if (proxyCache.has(target)) return proxyCache.get(target)
const subsMap = new Map()
const getSubs = (k) => {
let s = subsMap.get(k)
if (!s) subsMap.set(k, s = new Set())
return s
}
const proxy = new Proxy(target, {
get(t, k) {
trackUpdate(getSubs(k))
return $$(t[k])
},
set(t, k, v) {
const isNew = !(k in t)
if (!Object.is(t[k], v)) {
t[k] = v
trackUpdate(getSubs(k), true)
if (isNew) trackUpdate(getSubs(ITER), true)
}
return true
},
deleteProperty(t, k) {
const res = Reflect.deleteProperty(t, k)
if (res) {
trackUpdate(getSubs(k), true)
trackUpdate(getSubs(ITER), true)
}
return res
},
ownKeys(t) {
trackUpdate(getSubs(ITER))
return Reflect.ownKeys(t)
}
})
proxyCache.set(target, proxy)
return proxy
}
const Watch = (sources, cb) => {
if (cb === undefined) {
const effect = createEffect(sources)
effect()
return () => dispose(effect)
}
const effect = createEffect(() => {
const vals = Array.isArray(sources) ? sources.map(s => s()) : sources()
untrack(() => cb(vals))
})
effect()
return () => dispose(effect)
}
const cleanupNode = node => {
if (node._cleanups) {
node._cleanups.forEach(fn => fn())
node._cleanups.clear()
}
if (node._ownerEffect) dispose(node._ownerEffect)
if (node.childNodes) node.childNodes.forEach(cleanupNode)
}
const DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i
const isDangerousAttr = key => key === 'src' || key === 'href' || key.startsWith('on')
const validateAttr = (key, val) => {
if (val == null || val === false) return null
if (isDangerousAttr(key)) {
const sVal = String(val)
if (DANGEROUS_PROTOCOL.test(sVal)) {
console.warn(`[SigPro] Bloqueado protocolo peligroso en ${key}`)
return '#'
}
}
return val
}
const Tag = (tag, props = {}, children = []) => {
if (props instanceof Node || isArr(props) || !isObj(props)) {
children = props
props = {}
}
if (isFunc(tag)) {
const ctx = { _mounts: [], _cleanups: new Set() }
const effect = createEffect(() => {
const result = tag(props, {
children,
emit: (ev, ...args) => props[`on${ev[0].toUpperCase()}${ev.slice(1)}`]?.(...args)
})
effect._result = result
return result
})
effect()
const result = effect._result
if (result == null) return null
const node = (result instanceof Node || (isArr(result) && result.every(n => n instanceof Node)))
? result
: doc.createTextNode(String(result))
const attach = n => {
if (isObj(n) && !n._isRuntime) {
n._mounts = effect._mounts || []
n._cleanups = effect._cleanups || new Set()
n._ownerEffect = effect
}
}
isArr(node) ? node.forEach(attach) : attach(node)
return node
}
const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use)$/.test(tag)
const el = isSVG ? doc.createElementNS("http://www.w3.org/2000/svg", tag) : doc.createElement(tag)
el._cleanups = new Set()
for (let k in props) {
if (!props.hasOwnProperty(k)) continue
let v = props[k]
if (k === "ref") {
isFunc(v) ? v(el) : (v.current = el)
continue
}
if (k.startsWith("on")) {
const ev = k.slice(2).toLowerCase()
el.addEventListener(ev, v)
const off = () => el.removeEventListener(ev, v)
el._cleanups.add(off)
onUnmount(off)
} else if (isFunc(v)) {
const effect = createEffect(() => {
const val = validateAttr(k, v())
if (k === "class") el.className = val || ""
else if (val == null) el.removeAttribute(k)
else if (k in el && !isSVG) el[k] = val
else el.setAttribute(k, val === true ? "" : val)
})
effect()
el._cleanups.add(() => dispose(effect))
onUnmount(() => dispose(effect))
if (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) && (k === "value" || k === "checked")) {
const evType = k === "checked" ? "change" : "input"
el.addEventListener(evType, ev => v(ev.target[k]))
}
} else {
const val = validateAttr(k, v)
if (val != null) {
if (k in el && !isSVG) el[k] = val
else el.setAttribute(k, val === true ? "" : val)
}
}
}
const append = c => {
if (isArr(c)) return c.forEach(append)
if (isFunc(c)) {
const anchor = doc.createTextNode("")
el.appendChild(anchor)
let currentNodes = []
const effect = createEffect(() => {
const res = c()
const next = (isArr(res) ? res : [res]).map(ensureNode)
currentNodes.forEach(n => {
if (n._isRuntime) n.destroy()
else cleanupNode(n)
if (n.parentNode) n.remove()
})
let ref = anchor
for (let i = next.length - 1; i >= 0; i--) {
const node = next[i]
if (node.parentNode !== ref.parentNode) ref.parentNode?.insertBefore(node, ref)
if (node._mounts) node._mounts.forEach(fn => fn())
ref = node
}
currentNodes = next
})
effect()
el._cleanups.add(() => dispose(effect))
onUnmount(() => dispose(effect))
} else {
const node = ensureNode(c)
el.appendChild(node)
if (node._mounts) node._mounts.forEach(fn => fn())
}
}
append(children)
return el
}
const Render = renderFn => {
const cleanups = new Set()
const mounts = []
const previousOwner = activeOwner
const previousEffect = activeEffect
const container = doc.createElement("div")
container.style.display = "contents"
container.setAttribute("role", "presentation")
activeOwner = { _cleanups: cleanups, _mounts: mounts }
activeEffect = null
const processResult = result => {
if (!result) return
if (result._isRuntime) {
cleanups.add(result.destroy)
container.appendChild(result.container)
} else if (isArr(result)) {
result.forEach(processResult)
} else {
container.appendChild(result instanceof Node ? result : doc.createTextNode(String(result == null ? "" : result)))
}
}
try {
processResult(renderFn({ onCleanup: fn => cleanups.add(fn) }))
} finally {
activeOwner = previousOwner
activeEffect = previousEffect
}
mounts.forEach(fn => fn())
return {
_isRuntime: true,
container,
destroy: () => {
cleanups.forEach(fn => fn())
cleanupNode(container)
container.remove()
}
}
}
const If = (cond, ifYes, ifNot = null) => {
const anchor = doc.createTextNode("")
const root = Tag("div", { style: "display:contents" }, [anchor])
let currentView = null
Watch(
() => !!(isFunc(cond) ? cond() : cond),
show => {
if (currentView) {
currentView.destroy()
currentView = null
}
const content = show ? ifYes : ifNot
if (content) {
currentView = Render(() => isFunc(content) ? content() : content)
root.insertBefore(currentView.container, anchor)
}
}
)
onUnmount(() => currentView?.destroy())
return root
}
const For = (src, itemFn, keyFn) => {
const anchor = doc.createTextNode("")
const root = Tag("div", { style: "display:contents" }, [anchor])
let cache = new Map()
Watch(() => (isFunc(src) ? src() : src) || [], items => {
const nextCache = new Map()
const nextOrder = []
const newItems = items || []
for (let i = 0; i < newItems.length; i++) {
const item = newItems[i]
const key = keyFn ? keyFn(item, i) : (item?.id ?? i)
let view = cache.get(key)
if (!view) view = Render(() => itemFn(item, i))
else cache.delete(key)
nextCache.set(key, view)
nextOrder.push(view)
}
cache.forEach(view => view.destroy())
let lastRef = anchor
for (let i = nextOrder.length - 1; i >= 0; i--) {
const view = nextOrder[i]
const node = view.container
if (node.nextSibling !== lastRef) root.insertBefore(node, lastRef)
lastRef = node
}
cache = nextCache
})
return root
}
const Router = routes => {
const getHash = () => window.location.hash.slice(1) || "/"
const path = $(getHash())
const handler = () => path(getHash())
window.addEventListener("hashchange", handler)
onUnmount(() => window.removeEventListener("hashchange", handler))
const hook = Tag("div", { class: "router-hook" })
let currentView = null
Watch([path], () => {
const cur = path()
const route = routes.find(r => {
const p1 = r.path.split("/").filter(Boolean)
const p2 = cur.split("/").filter(Boolean)
return p1.length === p2.length && p1.every((p, i) => p[0] === ":" || p === p2[i])
}) || routes.find(r => r.path === "*")
if (route) {
currentView?.destroy()
const params = {}
route.path.split("/").filter(Boolean).forEach((p, i) => {
if (p[0] === ":") params[p.slice(1)] = cur.split("/").filter(Boolean)[i]
})
Router.params(params)
currentView = Render(() => isFunc(route.component) ? route.component(params) : route.component)
hook.replaceChildren(currentView.container)
}
})
return hook
}
Router.params = $({})
Router.to = p => window.location.hash = p.replace(/^#?\/?/, "#/")
Router.back = () => window.history.back()
Router.path = () => window.location.hash.replace(/^#/, "") || "/"
const Mount = (comp, target) => {
const t = typeof target === "string" ? doc.querySelector(target) : target
if (!t) return
if (MOUNTED_NODES.has(t)) MOUNTED_NODES.get(t).destroy()
const inst = Render(isFunc(comp) ? comp : () => comp)
t.replaceChildren(inst.container)
MOUNTED_NODES.set(t, inst)
return inst
}
const SigPro = Object.freeze({ $, $$, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount, Batch })
if (typeof window !== "undefined") {
Object.assign(window, SigPro)
"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg"
.split(" ").forEach(t => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c))
}
export { $, $$, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount, Batch }
export default SigPro

View File

@@ -1,558 +0,0 @@
// sigpro 1.2.2
const isFunc = f => typeof f === "function"
const isObj = o => o && typeof o === "object"
const isArr = Array.isArray
const doc = typeof document !== "undefined" ? document : null
const ensureNode = n => n?._isRuntime ? n.container : (n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n)))
let activeEffect = null
let activeOwner = null
let isFlushing = false
let batchDepth = 0
const effectQueue = new Set()
const proxyCache = new WeakMap()
const ITER = Symbol('iter')
const MOUNTED_NODES = new WeakMap()
const dispose = eff => {
if (!eff || eff._disposed) return
eff._disposed = true
const stack = [eff]
while (stack.length) {
const e = stack.pop()
if (e._cleanups) {
e._cleanups.forEach(fn => fn())
e._cleanups.clear()
}
if (e._children) {
e._children.forEach(child => stack.push(child))
e._children.clear()
}
if (e._deps) {
e._deps.forEach(depSet => depSet.delete(e))
e._deps.clear()
}
}
}
const onMount = fn => {
if (activeOwner) (activeOwner._mounts ||= []).push(fn)
}
const onUnmount = fn => {
if (activeOwner) (activeOwner._cleanups ||= new Set()).add(fn)
}
const untrack = fn => {
const p = activeEffect
activeEffect = null
try { return fn() } finally { activeEffect = p }
}
const createEffect = (fn, isComputed = false) => {
const effect = () => {
if (effect._disposed) return
if (effect._deps) effect._deps.forEach(s => s.delete(effect))
if (effect._cleanups) {
effect._cleanups.forEach(c => c())
effect._cleanups.clear()
}
const prevEffect = activeEffect
const prevOwner = activeOwner
activeEffect = activeOwner = effect
try {
return effect._result = fn()
} catch (e) {
console.error("[SigPro]", e)
} finally {
activeEffect = prevEffect
activeOwner = prevOwner
}
}
effect._deps = effect._cleanups = effect._children = null
effect._disposed = false
effect._isComputed = isComputed
effect._depth = activeEffect ? activeEffect._depth + 1 : 0
effect._mounts = []
effect._parent = activeOwner
if (activeOwner) (activeOwner._children ||= new Set()).add(effect)
return effect
}
const flush = () => {
if (isFlushing) return
isFlushing = true
const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth)
effectQueue.clear()
for (const e of sorted) if (!e._disposed) e()
isFlushing = false
}
const Batch = fn => {
batchDepth++
try {
return fn()
} finally {
batchDepth--
if (batchDepth === 0 && effectQueue.size > 0 && !isFlushing) {
flush()
}
}
}
const trackUpdate = (subs, trigger = false) => {
if (!trigger && activeEffect && !activeEffect._disposed) {
subs.add(activeEffect)
; (activeEffect._deps ||= new Set()).add(subs)
} else if (trigger && subs.size > 0) {
let hasQueue = false
for (const e of subs) {
if (e === activeEffect || e._disposed) continue
if (e._isComputed) {
e._dirty = true
if (e._subs) trackUpdate(e._subs, true)
} else {
effectQueue.add(e)
hasQueue = true
}
}
if (hasQueue && !isFlushing && batchDepth === 0) queueMicrotask(flush)
}
}
const $ = (val, key = null) => {
const subs = new Set()
if (isFunc(val)) {
let cache, dirty = true
const computed = () => {
if (dirty) {
const prev = activeEffect
activeEffect = computed
try {
const next = val()
if (!Object.is(cache, next)) {
cache = next
dirty = false
trackUpdate(subs, true)
}
} finally { activeEffect = prev }
}
trackUpdate(subs)
return cache
}
computed._isComputed = true
computed._subs = subs
computed._dirty = true
computed._deps = null
computed._disposed = false
computed.markDirty = () => { dirty = true }
computed.stop = () => {
computed._disposed = true
if (computed._deps) {
computed._deps.forEach(depSet => depSet.delete(computed))
computed._deps.clear()
}
subs.clear()
}
if (activeOwner) onUnmount(computed.stop)
return computed
}
if (key) try { val = JSON.parse(localStorage.getItem(key)) ?? val } catch (e) { }
return (...args) => {
if (args.length) {
const next = isFunc(args[0]) ? args[0](val) : args[0]
if (!Object.is(val, next)) {
val = next
if (key) localStorage.setItem(key, JSON.stringify(val))
trackUpdate(subs, true)
}
}
trackUpdate(subs)
return val
}
}
const $$ = (target) => {
if (!isObj(target)) return target
let proxy = proxyCache.get(target)
if (proxy) return proxy
const subsMap = new Map()
const getSubs = (k) => {
let s = subsMap.get(k)
if (!s) subsMap.set(k, (s = new Set()))
return s
}
proxy = new Proxy(target, {
get(t, k, receiver) {
if (typeof k !== 'symbol') trackUpdate(getSubs(k))
return $$(Reflect.get(t, k, receiver))
},
set(t, k, v, receiver) {
const isNew = !Reflect.has(t, k)
const oldV = Reflect.get(t, k, receiver)
const result = Reflect.set(t, k, v, receiver)
if (result && !Object.is(oldV, v)) {
trackUpdate(getSubs(k), true)
if (isNew) trackUpdate(getSubs(ITER), true)
}
return result
},
deleteProperty(t, k) {
const result = Reflect.deleteProperty(t, k)
if (result) {
trackUpdate(getSubs(k), true)
trackUpdate(getSubs(ITER), true)
}
return result
},
ownKeys(t) {
trackUpdate(getSubs(ITER))
return Reflect.ownKeys(t)
}
})
proxyCache.set(target, proxy)
return proxy
}
const Watch = (sources, cb) => {
if (cb === undefined) {
const effect = createEffect(sources)
effect()
return () => dispose(effect)
}
const effect = createEffect(() => {
const vals = Array.isArray(sources) ? sources.map(s => s()) : sources()
untrack(() => cb(vals))
})
effect()
return () => dispose(effect)
}
const cleanupNode = node => {
if (node._cleanups) {
node._cleanups.forEach(fn => fn())
node._cleanups.clear()
}
if (node._ownerEffect) dispose(node._ownerEffect)
if (node.childNodes) node.childNodes.forEach(cleanupNode)
}
const DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i
const isDangerousAttr = key => key === 'src' || key === 'href' || key.startsWith('on')
const validateAttr = (key, val) => {
if (val == null || val === false) return null
if (isDangerousAttr(key)) {
const sVal = String(val)
if (DANGEROUS_PROTOCOL.test(sVal)) {
console.warn(`[SigPro] Bloqueado protocolo peligroso en ${key}`)
return '#'
}
}
return val
}
const Tag = (tag, props = {}, children = []) => {
if (props instanceof Node || isArr(props) || !isObj(props)) {
children = props
props = {}
}
if (isFunc(tag)) {
const ctx = { _mounts: [], _cleanups: new Set() }
const effect = createEffect(() => {
const result = tag(props, {
children,
emit: (ev, ...args) => props[`on${ev[0].toUpperCase()}${ev.slice(1)}`]?.(...args)
})
effect._result = result
return result
})
effect()
const result = effect._result
if (result == null) return null
const node = (result instanceof Node || (isArr(result) && result.every(n => n instanceof Node)))
? result
: doc.createTextNode(String(result))
const attach = n => {
if (isObj(n) && !n._isRuntime) {
n._mounts = effect._mounts || []
n._cleanups = effect._cleanups || new Set()
n._ownerEffect = effect
}
}
isArr(node) ? node.forEach(attach) : attach(node)
return node
}
const SVG_TAGS = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use|image|ellipse|foreignObject|linearGradient|radialGradient|stop|pattern|mask|clipPath|filter|feColorMatrix|feBlend|feGaussianBlur|animate|animateTransform|set|metadata|desc|title|symbol|marker|view|switch|a|altGlyph|altGlyphDef|altGlyphItem|glyph|glyphRef|hkern|vkern|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|missing-glyph|mpath|textPath|tref|tbreak)$/i;
const isSVG = SVG_TAGS.test(tag);
const el = isSVG ? doc.createElementNS("http://www.w3.org/2000/svg", tag) : doc.createElement(tag)
el._cleanups = new Set()
for (let k in props) {
if (!props.hasOwnProperty(k)) continue
let v = props[k]
if (k === "ref") {
isFunc(v) ? v(el) : (v.current = el)
continue
}
if (isSVG && k.startsWith("xlink:")) {
const ns = "http://www.w3.org/1999/xlink"
val == null ? el.removeAttributeNS(ns, k.slice(6)) : el.setAttributeNS(ns, k.slice(6), val)
continue
}
if (k.startsWith("on")) {
const ev = k.slice(2).toLowerCase()
el.addEventListener(ev, v)
const off = () => el.removeEventListener(ev, v)
el._cleanups.add(off)
onUnmount(off)
} else if (isFunc(v)) {
const effect = createEffect(() => {
const val = validateAttr(k, v())
if (k === "class") el.className = val || ""
else if (val == null) el.removeAttribute(k)
else if (k in el && !isSVG) el[k] = val
else el.setAttribute(k, val === true ? "" : val)
})
effect()
el._cleanups.add(() => dispose(effect))
onUnmount(() => dispose(effect))
if (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) && (k === "value" || k === "checked")) {
const evType = k === "checked" ? "change" : "input"
el.addEventListener(evType, ev => v(ev.target[k]))
}
} else {
const val = validateAttr(k, v)
if (val != null) {
if (k in el && !isSVG) el[k] = val
else el.setAttribute(k, val === true ? "" : val)
}
}
}
const append = c => {
if (isArr(c)) return c.forEach(append)
if (isFunc(c)) {
const anchor = doc.createTextNode("")
el.appendChild(anchor)
let currentNodes = []
const effect = createEffect(() => {
const res = c()
const next = (isArr(res) ? res : [res]).map(ensureNode)
currentNodes.forEach(n => {
if (n._isRuntime) n.destroy()
else cleanupNode(n)
if (n.parentNode) n.remove()
})
let ref = anchor
for (let i = next.length - 1; i >= 0; i--) {
const node = next[i]
if (node.parentNode !== ref.parentNode) ref.parentNode?.insertBefore(node, ref)
if (node._mounts) node._mounts.forEach(fn => fn())
ref = node
}
currentNodes = next
})
effect()
el._cleanups.add(() => dispose(effect))
onUnmount(() => dispose(effect))
} else {
const node = ensureNode(c)
el.appendChild(node)
if (node._mounts) node._mounts.forEach(fn => fn())
}
}
append(children)
return el
}
const Render = renderFn => {
const cleanups = new Set()
const mounts = []
const previousOwner = activeOwner
const previousEffect = activeEffect
const container = doc.createElement("div")
container.style.display = "contents"
container.setAttribute("role", "presentation")
activeOwner = { _cleanups: cleanups, _mounts: mounts }
activeEffect = null
const processResult = result => {
if (!result) return
if (result._isRuntime) {
cleanups.add(result.destroy)
container.appendChild(result.container)
} else if (isArr(result)) {
result.forEach(processResult)
} else {
container.appendChild(result instanceof Node ? result : doc.createTextNode(String(result == null ? "" : result)))
}
}
try {
processResult(renderFn({ onCleanup: fn => cleanups.add(fn) }))
} finally {
activeOwner = previousOwner
activeEffect = previousEffect
}
mounts.forEach(fn => fn())
return {
_isRuntime: true,
container,
destroy: () => {
cleanups.forEach(fn => fn())
cleanupNode(container)
container.remove()
}
}
}
const If = (cond, ifYes, ifNot = null) => {
const anchor = doc.createTextNode("")
const root = Tag("div", { style: "display:contents" }, [anchor])
let currentView = null
Watch(
() => !!(isFunc(cond) ? cond() : cond),
show => {
if (currentView) {
currentView.destroy()
currentView = null
}
const content = show ? ifYes : ifNot
if (content) {
currentView = Render(() => isFunc(content) ? content() : content)
root.insertBefore(currentView.container, anchor)
}
}
)
onUnmount(() => currentView?.destroy())
return root
}
const For = (src, itemFn, keyFn) => {
const anchor = doc.createTextNode("")
const root = Tag("div", { style: "display:contents" }, [anchor])
let cache = new Map()
Watch(() => (isFunc(src) ? src() : src) || [], items => {
const nextCache = new Map()
const nextOrder = []
const newItems = items || []
for (let i = 0; i < newItems.length; i++) {
const item = newItems[i]
const key = keyFn ? keyFn(item, i) : (item?.id ?? i)
let view = cache.get(key)
if (!view) view = Render(() => itemFn(item, i))
else cache.delete(key)
nextCache.set(key, view)
nextOrder.push(view)
}
cache.forEach(view => view.destroy())
let lastRef = anchor
for (let i = nextOrder.length - 1; i >= 0; i--) {
const view = nextOrder[i]
const node = view.container
if (node.nextSibling !== lastRef) root.insertBefore(node, lastRef)
lastRef = node
}
cache = nextCache
})
return root
}
const Router = routes => {
const getHash = () => window.location.hash.slice(1) || "/"
const path = $(getHash())
const handler = () => path(getHash())
window.addEventListener("hashchange", handler)
onUnmount(() => window.removeEventListener("hashchange", handler))
const hook = Tag("div", { class: "router-hook" })
let currentView = null
Watch([path], () => {
const cur = path()
const route = routes.find(r => {
const p1 = r.path.split("/").filter(Boolean)
const p2 = cur.split("/").filter(Boolean)
return p1.length === p2.length && p1.every((p, i) => p[0] === ":" || p === p2[i])
}) || routes.find(r => r.path === "*")
if (route) {
currentView?.destroy()
const params = {}
route.path.split("/").filter(Boolean).forEach((p, i) => {
if (p[0] === ":") params[p.slice(1)] = cur.split("/").filter(Boolean)[i]
})
Router.params(params)
currentView = Render(() => isFunc(route.component) ? route.component(params) : route.component)
hook.replaceChildren(currentView.container)
}
})
return hook
}
Router.params = $({})
Router.to = p => window.location.hash = p.replace(/^#?\/?/, "#/")
Router.back = () => window.history.back()
Router.path = () => window.location.hash.replace(/^#/, "") || "/"
const Anim = (show, render, { enter, leave } = {}) => {
const wrap = Tag('div', { style: 'display:contents' })
let view = null
const wait = (el, cb) => {
let done = false
const finish = () => !done && (done = true, cb())
if (!el) return finish()
'transitionend animationend'.split(' ').map(e => el.addEventListener(e, finish, { once: true }))
setTimeout(finish, 500)
}
Watch(show, on => {
if (on && !view) {
const el = (view = Render(render)).container.firstChild
wrap.appendChild(view.container)
if (enter && el) {
el.classList.add(enter); el.clientTop
el.classList.add(enter + '-active')
wait(el, () => el.classList.remove(enter, enter + '-active'))
}
} else if (!on && view) {
const el = view.container.firstChild
const del = () => (view?.destroy(), view = null)
leave && el ? (el.classList.add(leave), wait(el, del)) : del()
}
})
return onUnmount(() => view?.destroy()), wrap
}
const Mount = (comp, target) => {
const t = typeof target === "string" ? doc.querySelector(target) : target
if (!t) return
if (MOUNTED_NODES.has(t)) MOUNTED_NODES.get(t).destroy()
const inst = Render(isFunc(comp) ? comp : () => comp)
t.replaceChildren(inst.container)
MOUNTED_NODES.set(t, inst)
return inst
}
const SigPro = Object.freeze({ $, $$, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount, Anim, Batch })
if (typeof window !== "undefined") {
Object.assign(window, SigPro)
"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg"
.split(" ").forEach(t => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c))
}
export { $, $$, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount, Anim, Batch }
export default SigPro