natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

changed to new functions
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-22 12:06:34 +02:00
parent 5a5f593025
commit 59e6d972a8
125 changed files with 1934 additions and 2015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
Readme.md
View File

@@ -48,7 +48,7 @@ You can use SigPro UI in two ways: **Modular** (Recommended) or **Global** (Fast
Import only the components you need: Import only the components you need:
```javascript ```javascript
import { $, Mount, Button, Modal, Input, Alert } from "sigpro-ui"; import { $, mount, Button, Modal, Input, Alert } from "sigpro-ui";
import "sigpro-ui/css"; import "sigpro-ui/css";
const App = () => { const App = () => {
@@ -63,7 +63,7 @@ const App = () => {
); );
}; };
Mount(App, "#app"); mount(App, "#app");
``` ```
### 2. Global Approach (Zero-Import) ### 2. Global Approach (Zero-Import)
@@ -85,7 +85,7 @@ const myApp = () => Table({ items: [], columns: [] });
## Basic Example ## Basic Example
```javascript ```javascript
import { $, Mount, Button, Toast, Div, H1 } from "sigpro-ui"; import { $, mount, Button, Toast, Div, H1 } from "sigpro-ui";
import "sigpro-ui/css"; import "sigpro-ui/css";
const App = () => { const App = () => {
@@ -104,7 +104,7 @@ const App = () => {
]); ]);
}; };
Mount(App, "#app"); mount(App, "#app");
``` ```
--- ---
@@ -113,12 +113,12 @@ Mount(App, "#app");
### Core Functions (from SigPro) ### Core Functions (from SigPro)
- `$()` - Reactive signals - `$()` - Reactive signals
- `Watch()` - Watch reactive dependencies - `watch()` - watch reactive dependencies
- `Tag()` - Create HTML elements with reactivity - `h()` - Create HTML elements with reactivity
- `If()` - Conditional rendering - `when()` - Conditional rendering
- `For()` - List rendering - `each()` - List rendering
- `Router()` - Hash-based routing - `router()` - Hash-based routing
- `Mount()` - Mount components to DOM - `mount()` - mount components to DOM
Explore [SigPro Core Docs](https://natxocc.github.io/sigpro/#/) for more information. Explore [SigPro Core Docs](https://natxocc.github.io/sigpro/#/) for more information.

20
components/accordion.js
View File

@@ -1,22 +1,22 @@
// components/Accordion.js // components/Accordion.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Accordion = (props) => { export const Accordion = (props) => {
const name = props.name || `accordion-${Math.random().toString(36).slice(2, 9)}`; const name = props.name || `accordion-${Math.random().toString(36).slice(2, 9)}`;
if (props.items && Array.isArray(props.items)) { if (props.items && Array.isArray(props.items)) {
return Tag("div", { class: `space-y-2 ${props.class ?? ''}` }, return h("div", { class: `space-y-2 ${props.class ?? ''}` },
props.items.map(item => Tag("div", { class: `collapse ${item.class ?? ''}` }, [ props.items.map(item => h("div", { class: `collapse ${item.class ?? ''}` }, [
Tag("input", { type: "radio", name, checked: item.open }), h("input", { type: "radio", name, checked: item.open }),
Tag("div", { class: "collapse-title text-xl font-medium" }, item.title), h("div", { class: "collapse-title text-xl font-medium" }, item.title),
Tag("div", { class: "collapse-content" }, item.children) h("div", { class: "collapse-content" }, item.children)
])) ]))
); );
} }
return Tag("div", { class: `collapse ${props.class ?? ''}` }, [ return h("div", { class: `collapse ${props.class ?? ''}` }, [
Tag("input", { type: "radio", name, checked: props.open }), h("input", { type: "radio", name, checked: props.open }),
Tag("div", { class: "collapse-title text-xl font-medium" }, props.title), h("div", { class: "collapse-title text-xl font-medium" }, props.title),
Tag("div", { class: "collapse-content" }, props.children) h("div", { class: "collapse-content" }, props.children)
]); ]);
}; };

4
components/alert.js
View File

@@ -1,7 +1,7 @@
// components/Alert.js // components/Alert.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Alert = (props, children) => { export const Alert = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `alert ${props.class ?? ''}` }, children); return h("div", { ...props, class: `alert ${props.class ?? ''}` }, children);
}; };

24
components/autocomplete.js
View File

@@ -1,5 +1,5 @@
// components/Autocomplete.js // components/Autocomplete.js
import { $, Tag, For, Watch } from "sigpro"; import { $, h, each, watch } from "sigpro";
export const Autocomplete = (props) => { export const Autocomplete = (props) => {
const query = $(""); const query = $("");
@@ -7,12 +7,12 @@ export const Autocomplete = (props) => {
const cursor = $(-1); const cursor = $(-1);
const filteredItems = $([]); const filteredItems = $([]);
Watch(() => { watch(() => {
const v = typeof props.value === "function" ? props.value() : props.value; const v = typeof props.value === "function" ? props.value() : props.value;
return v || ""; return v || "";
}, (newVal) => setTimeout(() => query(newVal), 0)); }, (newVal) => setTimeout(() => query(newVal), 0));
Watch(() => { watch(() => {
const q = String(query()).toLowerCase(); const q = String(query()).toLowerCase();
const allItems = typeof props.items === "function" ? props.items() : props.items; const allItems = typeof props.items === "function" ? props.items() : props.items;
const filtered = q const filtered = q
@@ -50,10 +50,10 @@ export const Autocomplete = (props) => {
} }
}; };
return Tag("div", { class: `relative w-full ${props.class ?? ''}` }, [ return h("div", { class: `relative w-full ${props.class ?? ''}` }, [
Tag("label", { class: "input input-bordered w-full" }, [ h("label", { class: "input input-bordered w-full" }, [
Tag("span", { class: "icon-[lucide--search]" }), h("span", { class: "icon-[lucide--search]" }),
Tag("input", { h("input", {
...props, ...props,
type: "text", type: "text",
class: "grow", class: "grow",
@@ -72,13 +72,13 @@ export const Autocomplete = (props) => {
}) })
]), ]),
Tag("ul", { h("ul", {
class: "absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50", class: "absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",
style: () => `display: ${isOpen() && filteredItems().length ? "block" : "none"};` style: () => `display: ${isOpen() && filteredItems().length ? "block" : "none"};`
}, [ }, [
For(filteredItems, (item, idx) => each(filteredItems, (item, idx) =>
Tag("li", {}, [ h("li", {}, [
Tag("a", { h("a", {
class: () => `block w-full ${cursor() === idx ? "active bg-primary text-primary-content" : ""}`, class: () => `block w-full ${cursor() === idx ? "active bg-primary text-primary-content" : ""}`,
onclick: () => pick(item), onclick: () => pick(item),
onmouseenter: () => cursor(idx) onmouseenter: () => cursor(idx)
@@ -86,7 +86,7 @@ export const Autocomplete = (props) => {
]), ]),
(item, idx) => (typeof item === "string" ? item : item.value) + idx (item, idx) => (typeof item === "string" ? item : item.value) + idx
), ),
() => filteredItems().length === 0 ? Tag("li", { class: "flex justify-center p-4 opacity-50" }, Tag("span", { class: "icon-[lucide--search-x] text-2xl" })) : null () => filteredItems().length === 0 ? h("li", { class: "flex justify-center p-4 opacity-50" }, h("span", { class: "icon-[lucide--search-x] text-2xl" })) : null
]) ])
]); ]);
}; };

4
components/badge.js
View File

@@ -1,7 +1,7 @@
// components/Badge.js // components/Badge.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Badge = (props, children) => { export const Badge = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("span", { ...props, class: `badge ${props.class ?? ''}` }, children); return h("span", { ...props, class: `badge ${props.class ?? ''}` }, children);
}; };

4
components/button.js
View File

@@ -1,6 +1,6 @@
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Button = (props, children) => { export const Button = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("button", { ...props, class: `btn ${props.class ?? ''}` }, children); return h("button", { ...props, class: `btn ${props.class ?? ''}` }, children);
}; };

48
components/calendar.js
View File

@@ -1,5 +1,5 @@
// components/Calendar.js // components/Calendar.js
import { $, Tag } from "sigpro"; import { $, h } from "sigpro";
export const Calendar = (props) => { export const Calendar = (props) => {
const internalDate = $(new Date()); const internalDate = $(new Date());
@@ -69,9 +69,9 @@ export const Calendar = (props) => {
}; };
const HourSlider = ({ value: hVal, onChange: onHourChange }) => { const HourSlider = ({ value: hVal, onChange: onHourChange }) => {
return Tag("div", { class: "flex-1" }, [ return h("div", { class: "flex-1" }, [
Tag("div", { class: "flex gap-2 items-center" }, [ h("div", { class: "flex gap-2 items-center" }, [
Tag("input", { h("input", {
type: "range", type: "range",
min: 0, min: 0,
max: 23, max: 23,
@@ -79,38 +79,38 @@ export const Calendar = (props) => {
class: "range range-xs flex-1", class: "range range-xs flex-1",
oninput: (e) => onHourChange(parseInt(e.target.value)) oninput: (e) => onHourChange(parseInt(e.target.value))
}), }),
Tag("span", { class: "text-sm font-mono min-w-[48px] text-center" }, h("span", { class: "text-sm font-mono min-w-[48px] text-center" },
() => String(typeof hVal === "function" ? hVal() : hVal).padStart(2, "0") + ":00" () => String(typeof hVal === "function" ? hVal() : hVal).padStart(2, "0") + ":00"
) )
]) ])
]); ]);
}; };
return Tag("div", { class: `p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none ${props.class ?? ''}`.trim() }, [ return h("div", { class: `p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none ${props.class ?? ''}`.trim() }, [
Tag("div", { class: "flex justify-between items-center mb-4 gap-1" }, [ h("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
Tag("div", { class: "flex gap-0.5" }, [ h("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) },
Tag("span", { class: "icon-[lucide--chevrons-left]" }) h("span", { class: "icon-[lucide--chevrons-left]" })
), ),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
Tag("span", { class: "icon-[lucide--chevron-left]" }) h("span", { class: "icon-[lucide--chevron-left]" })
) )
]), ]),
Tag("span", { class: "font-bold uppercase flex-1 text-center" }, [ h("span", { class: "font-bold uppercase flex-1 text-center" }, [
() => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }) () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" })
]), ]),
Tag("div", { class: "flex gap-0.5" }, [ h("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) },
Tag("span", { class: "icon-[lucide--chevron-right]" }) h("span", { class: "icon-[lucide--chevron-right]" })
), ),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
Tag("span", { class: "icon-[lucide--chevrons-right]" }) h("span", { class: "icon-[lucide--chevrons-right]" })
) )
]) ])
]), ]),
Tag("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [ h("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
...["L", "M", "X", "J", "V", "S", "D"].map((d) => Tag("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)), ...["L", "M", "X", "J", "V", "S", "D"].map((d) => h("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
() => { () => {
const d = internalDate(); const d = internalDate();
const year = d.getFullYear(); const year = d.getFullYear();
@@ -120,14 +120,14 @@ export const Calendar = (props) => {
const daysInMonth = new Date(year, month + 1, 0).getDate(); const daysInMonth = new Date(year, month + 1, 0).getDate();
const cells = []; const cells = [];
for (let i = 0; i < offset; i++) cells.push(Tag("div")); for (let i = 0; i < offset; i++) cells.push(h("div"));
for (let i = 1; i <= daysInMonth; i++) { for (let i = 1; i <= daysInMonth; i++) {
const date = new Date(year, month, i); const date = new Date(year, month, i);
const dStr = formatDate(date); const dStr = formatDate(date);
cells.push( cells.push(
Tag("button", { h("button", {
type: "button", type: "button",
class: () => { class: () => {
const v = getCurrentValue(); const v = getCurrentValue();
@@ -160,9 +160,9 @@ export const Calendar = (props) => {
} }
]), ]),
props.hour ? Tag("div", { class: "mt-3 pt-2 border-t border-base-300" }, [ props.hour ? h("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
isRangeMode() isRangeMode()
? Tag("div", { class: "flex gap-4" }, [ ? h("div", { class: "flex gap-4" }, [
HourSlider({ value: startHour, onChange: (h) => startHour(h) }), HourSlider({ value: startHour, onChange: (h) => startHour(h) }),
HourSlider({ value: endHour, onChange: (h) => endHour(h) }) HourSlider({ value: endHour, onChange: (h) => endHour(h) })
]) ])

10
components/card.js
View File

@@ -1,22 +1,22 @@
// components/Card.js // components/Card.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Card = (props, children) => { export const Card = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `card ${props.class ?? ''}` }, children); return h("div", { ...props, class: `card ${props.class ?? ''}` }, children);
}; };
export const CardTitle = (props, children) => { export const CardTitle = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `card-title ${props.class ?? ''}` }, children); return h("div", { ...props, class: `card-title ${props.class ?? ''}` }, children);
}; };
export const CardBody = (props, children) => { export const CardBody = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `card-body ${props.class ?? ''}` }, children); return h("div", { ...props, class: `card-body ${props.class ?? ''}` }, children);
}; };
export const CardActions = (props, children) => { export const CardActions = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `card-actions ${props.class ?? ''}` }, children); return h("div", { ...props, class: `card-actions ${props.class ?? ''}` }, children);
}; };

6
components/carousel.js
View File

@@ -1,12 +1,12 @@
// components/Carousel.js // components/Carousel.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Carousel = (props, children) => { export const Carousel = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `carousel ${props.class ?? ''}` }, children); return h("div", { ...props, class: `carousel ${props.class ?? ''}` }, children);
}; };
export const CarouselItem = (props, children) => { export const CarouselItem = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `carousel-item ${props.class ?? ''}` }, children); return h("div", { ...props, class: `carousel-item ${props.class ?? ''}` }, children);
}; };

16
components/chat.js
View File

@@ -1,33 +1,33 @@
// components/Chat.js // components/Chat.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Chat = (props, children) => { export const Chat = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `chat ${props.class ?? ''}` }, children); return h("div", { ...props, class: `chat ${props.class ?? ''}` }, children);
}; };
export const ChatImage = (props, children) => { export const ChatImage = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `chat-image avatar ${props.class ?? ''}` }, return h("div", { ...props, class: `chat-image avatar ${props.class ?? ''}` },
Tag("div", { class: "w-10 rounded-full" }, h("div", { class: "w-10 rounded-full" },
typeof children === "string" ? Tag("img", { src: children, alt: "avatar" }) : children typeof children === "string" ? h("img", { src: children, alt: "avatar" }) : children
) )
); );
}; };
export const ChatHeader = (props, children) => { export const ChatHeader = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `chat-header ${props.class ?? ''}` }, children); return h("div", { ...props, class: `chat-header ${props.class ?? ''}` }, children);
}; };
export const ChatFooter = (props, children) => { export const ChatFooter = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `chat-footer ${props.class ?? ''}` }, children); return h("div", { ...props, class: `chat-footer ${props.class ?? ''}` }, children);
}; };
export const ChatBubble = (props, children) => { export const ChatBubble = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `chat-bubble ${props.class ?? ''}` }, children); return h("div", { ...props, class: `chat-bubble ${props.class ?? ''}` }, children);
}; };
export const ChatMessage = (props) => { export const ChatMessage = (props) => {

4
components/checkbox.js
View File

@@ -1,4 +1,4 @@
// components/Checkbox.js // components/Checkbox.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Checkbox = (props) => Tag("input", { ...props, type: "checkbox", class: `checkbox ${props.class ?? ''}` }); export const Checkbox = (props) => h("input", { ...props, type: "checkbox", class: `checkbox ${props.class ?? ''}` });

22
components/colorpicker.js
View File

@@ -1,5 +1,5 @@
// components/Colorpicker.js // components/Colorpicker.js
import { $, Tag, If } from "sigpro"; import { $, h, when} from "sigpro";
export const Colorpicker = (props) => { export const Colorpicker = (props) => {
const isOpen = $(false); const isOpen = $(false);
@@ -20,28 +20,28 @@ export const Colorpicker = (props) => {
return (typeof v === "function" ? v() : v) || "#000000"; return (typeof v === "function" ? v() : v) || "#000000";
}; };
return Tag("div", { class: `relative w-fit ${props.class ?? ''}` }, [ return h("div", { class: `relative w-fit ${props.class ?? ''}` }, [
Tag("button", { h("button", {
type: "button", type: "button",
class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case", class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",
onclick: (e) => { e.stopPropagation(); isOpen(!isOpen()); }, onclick: (e) => { e.stopPropagation(); isOpen(!isOpen()); },
...props ...props
}, [ }, [
Tag("div", { h("div", {
class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0", class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
style: () => `background-color: ${getColor()}` style: () => `background-color: ${getColor()}`
}), }),
props.label ? Tag("span", { class: "opacity-80" }, props.label) : null props.label ? h("span", { class: "opacity-80" }, props.label) : null
]), ]),
If(isOpen, () => when(isOpen, () =>
Tag("div", { h("div", {
class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none", class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",
onclick: (e) => e.stopPropagation() onclick: (e) => e.stopPropagation()
}, [ }, [
Tag("div", { class: "grid grid-cols-8 gap-1" }, h("div", { class: "grid grid-cols-8 gap-1" },
palette.map(c => palette.map(c =>
Tag("button", { h("button", {
type: "button", type: "button",
style: `background-color: ${c}`, style: `background-color: ${c}`,
class: () => { class: () => {
@@ -58,8 +58,8 @@ export const Colorpicker = (props) => {
]) ])
), ),
If(isOpen, () => when(isOpen, () =>
Tag("div", { h("div", {
class: "fixed inset-0 z-[100]", class: "fixed inset-0 z-[100]",
onclick: () => isOpen(false) onclick: () => isOpen(false)
}) })

20
components/datepicker.js
View File

@@ -1,5 +1,5 @@
// components/Datepicker.js // components/Datepicker.js
import { $, Tag, If, Watch } from "sigpro"; import { $, h, when, watch } from "sigpro";
import { Calendar } from "./calendar.js"; import { Calendar } from "./calendar.js";
export const Datepicker = (props) => { export const Datepicker = (props) => {
@@ -11,7 +11,7 @@ export const Datepicker = (props) => {
const displayValue = $(""); const displayValue = $("");
Watch(() => { watch(() => {
const v = typeof props.value === "function" ? props.value() : props.value; const v = typeof props.value === "function" ? props.value() : props.value;
if (!v) { if (!v) {
displayValue(""); displayValue("");
@@ -49,10 +49,10 @@ export const Datepicker = (props) => {
isOpen(!isOpen()); isOpen(!isOpen());
}; };
return Tag("div", { class: `relative w-full ${props.class ?? ''}` }, [ return h("div", { class: `relative w-full ${props.class ?? ''}` }, [
Tag("label", { class: "input input-bordered w-full", onclick: toggleOpen }, [ h("label", { class: "input input-bordered w-full", onclick: toggleOpen }, [
Tag("span", { class: "icon-[lucide--calendar]" }), h("span", { class: "icon-[lucide--calendar]" }),
Tag("input", { h("input", {
...props, ...props,
type: "text", type: "text",
class: "grow", class: "grow",
@@ -62,8 +62,8 @@ export const Datepicker = (props) => {
}) })
]), ]),
If(isOpen, () => when(isOpen, () =>
Tag("div", { h("div", {
class: "absolute left-0 mt-2 z-[100]", class: "absolute left-0 mt-2 z-[100]",
onclick: (e) => e.stopPropagation() onclick: (e) => e.stopPropagation()
}, [ }, [
@@ -76,8 +76,8 @@ export const Datepicker = (props) => {
]) ])
), ),
If(isOpen, () => when(isOpen, () =>
Tag("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) }) h("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })
) )
]); ]);
}; };

4
components/divider.js
View File

@@ -1,4 +1,4 @@
// components/Collapse.js // components/Collapse.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Divider = (props) => Tag("div", { ...props, class: `divider ${props.class ?? ''}` }); export const Divider = (props) => h("div", { ...props, class: `divider ${props.class ?? ''}` });

16
components/drawer.js
View File

@@ -1,29 +1,29 @@
// components/Drawer.js // components/Drawer.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Drawer = (props, children) => { export const Drawer = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `drawer ${props.class ?? ''}` }, children); return h("div", { ...props, class: `drawer ${props.class ?? ''}` }, children);
}; };
export const Sidebar = (props) => { export const Sidebar = (props) => {
const id = props.id || `drawer-${Math.random().toString(36).slice(2, 9)}`; const id = props.id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
return Tag("div", { ...props, class: `drawer ${props.class ?? ''}` }, [ return h("div", { ...props, class: `drawer ${props.class ?? ''}` }, [
Tag("input", { h("input", {
id, id,
type: "checkbox", type: "checkbox",
class: "drawer-toggle", class: "drawer-toggle",
checked: () => (typeof props.open === "function" ? props.open() : props.open), checked: () => (typeof props.open === "function" ? props.open() : props.open),
onchange: (e) => typeof props.open === "function" && props.open(e.target.checked) onchange: (e) => typeof props.open === "function" && props.open(e.target.checked)
}), }),
Tag("div", { class: "drawer-content" }, props.children), h("div", { class: "drawer-content" }, props.children),
Tag("div", { class: "drawer-side" }, [ h("div", { class: "drawer-side" }, [
Tag("label", { h("label", {
for: id, for: id,
class: "drawer-overlay", class: "drawer-overlay",
onclick: () => typeof props.open === "function" && props.open(false) onclick: () => typeof props.open === "function" && props.open(false)
}), }),
Tag("div", { class: "min-h-full bg-base-200 w-80 p-4" }, h("div", { class: "min-h-full bg-base-200 w-80 p-4" },
typeof props.content === "function" ? props.content() : props.content typeof props.content === "function" ? props.content() : props.content
) )
]) ])

4
components/dropdown.js
View File

@@ -1,5 +1,5 @@
// components/Dropdown.js // components/Dropdown.js
import { Tag } from "sigpro"; import { h } from "sigpro";
let currentOpen = null; let currentOpen = null;
@@ -13,7 +13,7 @@ if (typeof window !== 'undefined' && !window.__dropdownHandlerRegistered) {
window.__dropdownHandlerRegistered = true; window.__dropdownHandlerRegistered = true;
} }
export const Dropdown = (props) => Tag("details", { export const Dropdown = (props) => h("details", {
...props, ...props,
class: `dropdown ${props.class ?? ''}`, class: `dropdown ${props.class ?? ''}`,
onclick: (e) => { onclick: (e) => {

4
components/fab.js
View File

@@ -1,7 +1,7 @@
// components/Fab.js // components/Fab.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Fab = (props, children) => { export const Fab = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `fab ${props.class ?? ''}` }, children); return h("div", { ...props, class: `fab ${props.class ?? ''}` }, children);
}; };

6
components/fieldset.js
View File

@@ -1,10 +1,10 @@
// components/Fieldset.js // components/Fieldset.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Fieldset = (props, children) => Tag("fieldset", { export const Fieldset = (props, children) => h("fieldset", {
...props, ...props,
class: `fieldset ${props.class ?? ''}` class: `fieldset ${props.class ?? ''}`
}, [ }, [
props.legend ? Tag("legend", { class: "fieldset-legend" }, props.legend) : null, props.legend ? h("legend", { class: "fieldset-legend" }, props.legend) : null,
children children
]); ]);

38
components/fileinput.js
View File

@@ -1,5 +1,5 @@
// components/Fileinput.js // components/Fileinput.js
import { $, Tag, If, For } from "sigpro"; import { $, h, when, each } from "sigpro";
export const Fileinput = (props) => { export const Fileinput = (props) => {
const selectedFiles = $([]); const selectedFiles = $([]);
@@ -24,19 +24,19 @@ export const Fileinput = (props) => {
props.onselect?.(updated); props.onselect?.(updated);
}; };
return Tag("div", { ...props, class: `fieldset w-full p-0 ${props.class ?? ''}` }, [ return h("div", { ...props, class: `fieldset w-full p-0 ${props.class ?? ''}` }, [
Tag("label", { h("label", {
class: () => `relative flex items-center justify-between w-full h-12 px-4 border-2 border-dashed rounded-lg cursor-pointer transition-all duration-200 ${isDragging() ? "border-primary bg-primary/10" : "border-base-content/20 bg-base-100 hover:bg-base-200"}`, class: () => `relative flex items-center justify-between w-full h-12 px-4 border-2 border-dashed rounded-lg cursor-pointer transition-all duration-200 ${isDragging() ? "border-primary bg-primary/10" : "border-base-content/20 bg-base-100 hover:bg-base-200"}`,
ondragover: (e) => { e.preventDefault(); isDragging(true); }, ondragover: (e) => { e.preventDefault(); isDragging(true); },
ondragleave: () => isDragging(false), ondragleave: () => isDragging(false),
ondrop: (e) => { e.preventDefault(); isDragging(false); handleFiles(e.dataTransfer.files); } ondrop: (e) => { e.preventDefault(); isDragging(false); handleFiles(e.dataTransfer.files); }
}, [ }, [
Tag("div", { class: "flex items-center gap-3 w-full" }, [ h("div", { class: "flex items-center gap-3 w-full" }, [
Tag("span", { class: "icon-[lucide--upload]" }), h("span", { class: "icon-[lucide--upload]" }),
Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."), h("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${props.max || 2}MB`) h("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${props.max || 2}MB`)
]), ]),
Tag("input", { h("input", {
type: "file", type: "file",
multiple: true, multiple: true,
accept: props.accept || "*", accept: props.accept || "*",
@@ -44,21 +44,21 @@ export const Fileinput = (props) => {
onchange: (e) => handleFiles(e.target.files) onchange: (e) => handleFiles(e.target.files)
}) })
]), ]),
() => error() && Tag("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()), () => error() && h("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()),
If(() => selectedFiles().length > 0, () => when(() => selectedFiles().length > 0, () =>
Tag("ul", { class: "mt-2 space-y-1" }, [ h("ul", { class: "mt-2 space-y-1" }, [
For(selectedFiles, (file, idx) => each(selectedFiles, (file, idx) =>
Tag("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [ h("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
Tag("div", { class: "flex items-center gap-2 truncate" }, [ h("div", { class: "flex items-center gap-2 truncate" }, [
Tag("span", { class: "opacity-50" }, "📄"), h("span", { class: "opacity-50" }, "📄"),
Tag("span", { class: "truncate font-medium max-w-[200px]" }, file.name), h("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
Tag("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`) h("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`)
]), ]),
Tag("button", { h("button", {
type: "button", type: "button",
class: "btn btn-ghost btn-xs btn-circle", class: "btn btn-ghost btn-xs btn-circle",
onclick: (e) => { e.preventDefault(); removeFile(idx); } onclick: (e) => { e.preventDefault(); removeFile(idx); }
}, Tag("span", { class: "icon-[lucide--x]" })) }, h("span", { class: "icon-[lucide--x]" }))
]), ]),
(file) => file.name + file.lastModified (file) => file.name + file.lastModified
) )

8
components/icon.js
View File

@@ -1,14 +1,14 @@
// components/Icon.js // components/Icon.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Icon = (props, children) => { export const Icon = (props, children) => {
if (typeof props === "string") { if (typeof props === "string") {
if (props.includes("icon-") || props.startsWith("lucide-")) { if (props.includes("icon-") || props.startsWith("lucide-")) {
return Tag("span", { class: props }, children); return h("span", { class: props }, children);
} }
return Tag("span", { class: "icon" }, props); return h("span", { class: "icon" }, props);
} }
if (!props) return null; if (!props) return null;
const { class: className, ...rest } = props; const { class: className, ...rest } = props;
return Tag("span", { ...rest, class: className }, children); return h("span", { ...rest, class: className }, children);
}; };

6
components/indicator.js
View File

@@ -1,10 +1,10 @@
// components/Indicator.js // components/Indicator.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Indicator = (props, children) => { export const Indicator = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `indicator ${props.class ?? ''}` }, [ return h("div", { ...props, class: `indicator ${props.class ?? ''}` }, [
props.value ? Tag("span", { class: `indicator-item badge ${props.class ?? ''}` }, props.value) : null, props.value ? h("span", { class: `indicator-item badge ${props.class ?? ''}` }, props.value) : null,
children children
]); ]);
}; };

10
components/input.js
View File

@@ -1,13 +1,13 @@
// components/Input.js // components/Input.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Input = (props) => Tag("input", { ...props, class: `input ${props.class ?? ''}` }); export const Input = (props) => h("input", { ...props, class: `input ${props.class ?? ''}` });
export const InputLabel = (props) => Tag("label", { class: `${props.float ? 'floating-label' : 'input'}` }, export const InputLabel = (props) => h("label", { class: `${props.float ? 'floating-label' : 'input'}` },
[ [
Tag("span", { class: props.float ? '' : 'label opacity-50' }, props.label), h("span", { class: props.float ? '' : 'label opacity-50' }, props.label),
props.left ?? null, props.left ?? null,
Tag("input", { ...props, class: `${props.float ? 'input' : ''} ${props.class ?? ''}` }), h("input", { ...props, class: `${props.float ? 'input' : ''} ${props.class ?? ''}` }),
props.right ?? null props.right ?? null
] ]
); );

4
components/kbd.js
View File

@@ -1,7 +1,7 @@
// components/Kbd.js // components/Kbd.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Kbd = (props, children) => { export const Kbd = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("kbd", { ...props, class: `kbd ${props.class ?? ''}` }, children); return h("kbd", { ...props, class: `kbd ${props.class ?? ''}` }, children);
}; };

4
components/loading.js
View File

@@ -1,7 +1,7 @@
// components/Loading.js // components/Loading.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Loading = (props, children) => { export const Loading = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("span", { ...props, class: `loading loading-spinner ${props.class ?? ''}` }, children); return h("span", { ...props, class: `loading loading-spinner ${props.class ?? ''}` }, children);
}; };

16
components/menu.js
View File

@@ -1,9 +1,9 @@
// components/Menu.js // components/Menu.js
import { Tag, For } from "sigpro"; import { h, each } from "sigpro";
export const Menu = (props, children) => { export const Menu = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("ul", { ...props, class: `menu ${props.class ?? ''}` }, children); return h("ul", { ...props, class: `menu ${props.class ?? ''}` }, children);
}; };
export const MenuItems = (props) => { export const MenuItems = (props) => {
@@ -12,14 +12,14 @@ export const MenuItems = (props) => {
const renderItem = (item) => { const renderItem = (item) => {
if (item.children) { if (item.children) {
return Tag("li", {}, [ return h("li", {}, [
Tag("details", {}, [ h("details", {}, [
Tag("summary", {}, item.label), h("summary", {}, item.label),
Tag("ul", {}, MenuItems({ items: item.children })) h("ul", {}, MenuItems({ items: item.children }))
]) ])
]); ]);
} }
return Tag("li", {}, Tag("a", { return h("li", {}, h("a", {
href: item.href, href: item.href,
onclick: item.onclick ? (e) => { onclick: item.onclick ? (e) => {
if (!item.href) e.preventDefault(); if (!item.href) e.preventDefault();
@@ -28,5 +28,5 @@ export const MenuItems = (props) => {
}, item.label)); }, item.label));
}; };
return For(itemsSignal, renderItem, keyFn); return each(itemsSignal, renderItem, keyFn);
}; };

18
components/modal.js
View File

@@ -1,10 +1,10 @@
// components/Modal.js // components/Modal.js
import { Tag, Watch } from "sigpro"; import { h, watch } from "sigpro";
export const Modal = (props) => { export const Modal = (props) => {
let dialogRef = null; let dialogRef = null;
Watch(() => { watch(() => {
const isOpen = typeof props.open === "function" ? props.open() : props.open; const isOpen = typeof props.open === "function" ? props.open() : props.open;
if (!dialogRef) return; if (!dialogRef) return;
isOpen ? dialogRef.showModal() : dialogRef.close(); isOpen ? dialogRef.showModal() : dialogRef.close();
@@ -12,22 +12,22 @@ export const Modal = (props) => {
const close = () => typeof props.open === "function" && props.open(false); const close = () => typeof props.open === "function" && props.open(false);
return Tag("dialog", { return h("dialog", {
...props, ...props,
ref: el => dialogRef = el, ref: el => dialogRef = el,
class: `modal ${props.class ?? ''}`, class: `modal ${props.class ?? ''}`,
onclose: close, onclose: close,
oncancel: close oncancel: close
}, [ }, [
Tag("div", { class: "modal-box" }, [ h("div", { class: "modal-box" }, [
props.title && Tag("h3", { class: "text-lg font-bold" }, props.title), props.title && h("h3", { class: "text-lg font-bold" }, props.title),
props.children, props.children,
Tag("div", { class: "modal-action" }, [ h("div", { class: "modal-action" }, [
props.actions || Tag("button", { class: "btn", onclick: close }, "Cerrar") props.actions || h("button", { class: "btn", onclick: close }, "Cerrar")
]) ])
]), ]),
Tag("form", { method: "dialog", class: "modal-backdrop" }, [ h("form", { method: "dialog", class: "modal-backdrop" }, [
Tag("button", {}, "close") h("button", {}, "close")
]) ])
]); ]);
}; };

4
components/navbar.js
View File

@@ -1,7 +1,7 @@
// components/Navbar.js // components/Navbar.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Navbar = (props, children) => { export const Navbar = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `navbar ${props.class ?? ''}` }, children); return h("div", { ...props, class: `navbar ${props.class ?? ''}` }, children);
}; };

4
components/radial.js
View File

@@ -1,12 +1,12 @@
// components/Radial.js // components/Radial.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Radial = (props, children) => { export const Radial = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
const percentage = props.value != null ? (props.value / (props.max || 100)) * 100 : 0; const percentage = props.value != null ? (props.value / (props.max || 100)) * 100 : 0;
const style = `--value: ${percentage}; --max: 100;`; const style = `--value: ${percentage}; --max: 100;`;
return Tag("div", { return h("div", {
...props, ...props,
class: `radial-progress ${props.class ?? ''}`, class: `radial-progress ${props.class ?? ''}`,
style: style, style: style,

4
components/radio.js
View File

@@ -1,4 +1,4 @@
// components/Radio.js // components/Radio.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Radio = (props) => Tag("input", { ...props, type: "radio", class: `radio ${props.class ?? ''}` }); export const Radio = (props) => h("input", { ...props, type: "radio", class: `radio ${props.class ?? ''}` });

4
components/range.js
View File

@@ -1,4 +1,4 @@
// components/Range.js // components/Range.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Range = (props) => Tag("input", { ...props, type: "range", class: `range ${props.class ?? ''}` }); export const Range = (props) => h("input", { ...props, type: "range", class: `range ${props.class ?? ''}` });

6
components/rating.js
View File

@@ -1,13 +1,13 @@
// components/Rating.js // components/Rating.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Rating = (props, children) => { export const Rating = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
const name = `rating-${Math.random().toString(36).slice(2, 7)}`; const name = `rating-${Math.random().toString(36).slice(2, 7)}`;
return Tag("div", { ...props, class: `rating ${props.class ?? ''}` }, children || Array.from({ length: props.count || 5 }, (_, i) => { return h("div", { ...props, class: `rating ${props.class ?? ''}` }, children || Array.from({ length: props.count || 5 }, (_, i) => {
const starValue = i + 1; const starValue = i + 1;
return Tag("input", { return h("input", {
type: "radio", type: "radio",
name, name,
class: `mask ${props.mask || "mask-star"}`, class: `mask ${props.mask || "mask-star"}`,

16
components/select.js
View File

@@ -1,22 +1,22 @@
// components/Select.js // components/Select.js
import { Tag, For } from "sigpro"; import { h, each } from "sigpro";
export const Select = (props, children) => { export const Select = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("select", { ...props, class: `select ${props.class ?? ''}` }, children); return h("select", { ...props, class: `select ${props.class ?? ''}` }, children);
}; };
export const SelectItems = (props) => { export const SelectItems = (props) => {
const placeholderOption = props.placeholder const placeholderOption = props.placeholder
? Tag("option", { disabled: props.placeholderDisabled ?? true, selected: true }, props.placeholder) ? h("option", { disabled: props.placeholderDisabled ?? true, selected: true }, props.placeholder)
: null; : null;
const dynamicOptions = For( const dynamicOptions = each(
() => [...(typeof props.items === "function" ? props.items() : props.items || [])], () => [...(typeof props.items === "function" ? props.items() : props.items || [])],
(item) => { (item) => {
const val = typeof item === "string" ? item : item.value; const val = typeof item === "string" ? item : item.value;
const label = typeof item === "string" ? item : item.label; const label = typeof item === "string" ? item : item.label;
return Tag("option", { value: val }, label); return h("option", { value: val }, label);
}, },
props.keyFn || ((item) => (typeof item === "string" ? item : item.value)) props.keyFn || ((item) => (typeof item === "string" ? item : item.value))
); );
@@ -24,11 +24,11 @@ export const SelectItems = (props) => {
return placeholderOption ? [placeholderOption, dynamicOptions] : dynamicOptions; return placeholderOption ? [placeholderOption, dynamicOptions] : dynamicOptions;
}; };
export const SelectLabel = (props, children) => Tag("label", { class: `${props.float ? 'floating-label' : 'select'}` }, export const SelectLabel = (props, children) => h("label", { class: `${props.float ? 'floating-label' : 'select'}` },
[ [
Tag("span", { class: props.float ? '' : 'label opacity-50' }, props.label), h("span", { class: props.float ? '' : 'label opacity-50' }, props.label),
props.left ?? null, props.left ?? null,
Tag("select", { ...props, class: `${props.float ? 'select' : ''} ${props.class ?? ''}` }, children), h("select", { ...props, class: `${props.float ? 'select' : ''} ${props.class ?? ''}` }, children),
props.right ?? null props.right ?? null
] ]
); );

8
components/skeleton.js
View File

@@ -1,12 +1,12 @@
// components/Skeleton.js // components/Skeleton.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Skeleton = (props) => Tag("div", { ...props, class: `skeleton ${props.class ?? ''}` }); export const Skeleton = (props) => h("div", { ...props, class: `skeleton ${props.class ?? ''}` });
export const SkeletonText = (props) => { export const SkeletonText = (props) => {
return Tag("div", { ...props, class: "space-y-2" }, return h("div", { ...props, class: "space-y-2" },
Array.from({ length: props.lines || 3 }, () => Array.from({ length: props.lines || 3 }, () =>
Tag("div", { class: `skeleton h-4 w-full ${props.class ?? ''}` }) h("div", { class: `skeleton h-4 w-full ${props.class ?? ''}` })
) )
); );
}; };

4
components/stack.js
View File

@@ -1,7 +1,7 @@
// components/Stack.js // components/Stack.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Stack = (props, children) => { export const Stack = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `stack ${props.class ?? ''}` }, children); return h("div", { ...props, class: `stack ${props.class ?? ''}` }, children);
}; };

16
components/stat.js
View File

@@ -1,20 +1,20 @@
// components/Stats.js // components/Stats.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Stats = (props, children) => { export const Stats = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
const direction = props.vertical ? "stats-vertical" : "stats-horizontal"; const direction = props.vertical ? "stats-vertical" : "stats-horizontal";
return Tag("div", { ...props, class: `stats ${direction} ${props.class ?? ''}`.trim() }, children); return h("div", { ...props, class: `stats ${direction} ${props.class ?? ''}`.trim() }, children);
}; };
export const Stat = (props, children) => { export const Stat = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `stat ${props.class ?? ''}` }, [ return h("div", { ...props, class: `stat ${props.class ?? ''}` }, [
props.icon && Tag("div", { class: "stat-figure" }, props.icon), props.icon && h("div", { class: "stat-figure" }, props.icon),
props.label && Tag("div", { class: "stat-title" }, props.label), props.label && h("div", { class: "stat-title" }, props.label),
props.value && Tag("div", { class: "stat-value" }, props.value), props.value && h("div", { class: "stat-value" }, props.value),
props.desc && Tag("div", { class: "stat-desc" }, props.desc), props.desc && h("div", { class: "stat-desc" }, props.desc),
props.actions && Tag("div", { class: "stat-actions" }, props.actions), props.actions && h("div", { class: "stat-actions" }, props.actions),
children children
]); ]);
}; };

6
components/steps.js
View File

@@ -1,12 +1,12 @@
// components/Steps.js // components/Steps.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Steps = (props, children) => { export const Steps = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("ul", { ...props, class: `steps ${props.class ?? ''}` }, children); return h("ul", { ...props, class: `steps ${props.class ?? ''}` }, children);
}; };
export const Step = (props, children) => { export const Step = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("li", { ...props, class: `step ${props.class ?? ''}`, "data-content": props.dataContent }, children); return h("li", { ...props, class: `step ${props.class ?? ''}`, "data-content": props.dataContent }, children);
}; };

10
components/swap.js
View File

@@ -1,14 +1,14 @@
// components/Swap.js // components/Swap.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Swap = (props) => { export const Swap = (props) => {
return Tag("label", { ...props, class: `swap ${props.class ?? ''}` }, [ return h("label", { ...props, class: `swap ${props.class ?? ''}` }, [
Tag("input", { h("input", {
type: "checkbox", type: "checkbox",
checked: () => typeof props.value === "function" ? props.value() : props.value, checked: () => typeof props.value === "function" ? props.value() : props.value,
onchange: (e) => typeof props.value === "function" && props.value(e.target.checked) onchange: (e) => typeof props.value === "function" && props.value(e.target.checked)
}), }),
Tag("div", { class: "swap-on" }, props.on), h("div", { class: "swap-on" }, props.on),
Tag("div", { class: "swap-off" }, props.off) h("div", { class: "swap-off" }, props.off)
]); ]);
}; };

18
components/table.js
View File

@@ -1,27 +1,27 @@
// components/Table.js // components/Table.js
import { Tag, For } from "sigpro"; import { h, each } from "sigpro";
export const Table = (props, children) => { export const Table = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("table", { ...props, class: `table ${props.class ?? ''}` }, children); return h("table", { ...props, class: `table ${props.class ?? ''}` }, children);
}; };
export const TableItems = (props) => { export const TableItems = (props) => {
const itemArray = typeof props.items === "function" ? props.items() : (props.items || []); const itemArray = typeof props.items === "function" ? props.items() : (props.items || []);
const thead = props.header !== false && props.columns?.some(col => col.label) ? const thead = props.header !== false && props.columns?.some(col => col.label) ?
Tag("thead", {}, h("thead", {},
Tag("tr", {}, h("tr", {},
props.columns.map(col => Tag("th", { class: col.class }, col.label)) props.columns.map(col => h("th", { class: col.class }, col.label))
) )
) : null; ) : null;
const tbody = Tag("tbody", {}, [ const tbody = h("tbody", {}, [
For(itemArray, (item, idx) => each(itemArray, (item, idx) =>
Tag("tr", {}, h("tr", {},
props.columns.map(col => { props.columns.map(col => {
const content = col.render ? col.render(item, idx) : item[col.key]; const content = col.render ? col.render(item, idx) : item[col.key];
return Tag("td", { class: col.class }, content); return h("td", { class: col.class }, content);
}) })
) )
, props.keyFn || ((item, idx) => item.id ?? idx)) , props.keyFn || ((item, idx) => item.id ?? idx))

16
components/tabs.js
View File

@@ -1,25 +1,25 @@
// components/Tabs.js // components/Tabs.js
import { Tag, For } from "sigpro"; import { h, each } from "sigpro";
export const Tabs = (props, children) => { export const Tabs = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `tabs ${props.class ?? ''}` }, children); return h("div", { ...props, class: `tabs ${props.class ?? ''}` }, children);
}; };
export const Tab = (props, children) => { export const Tab = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, children); return h("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, children);
}; };
export const TabContent = (props, children) => { export const TabContent = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `tab-content ${props.class ?? ''}` }, children); return h("div", { ...props, class: `tab-content ${props.class ?? ''}` }, children);
}; };
export const TabClose = (props) => Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, [ export const TabClose = (props) => h("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, [
Tag("span", { class: "flex items-center" }, [ h("span", { class: "flex items-center" }, [
props.label, props.label,
Tag("span", { h("span", {
class: "icon-[lucide--x] w-3.5 h-3.5 ml-2 cursor-pointer hover:opacity-70", class: "icon-[lucide--x] w-3.5 h-3.5 ml-2 cursor-pointer hover:opacity-70",
onclick: (e) => { e.stopPropagation(); props.onClose?.(e); } onclick: (e) => { e.stopPropagation(); props.onClose?.(e); }
}) })
@@ -28,7 +28,7 @@ export const TabClose = (props) => Tag("a", { ...props, role: "tab", class: `tab
export const TabItems = (props) => { export const TabItems = (props) => {
const items = typeof props.items === "function" ? props.items : () => props.items || []; const items = typeof props.items === "function" ? props.items : () => props.items || [];
return For( return each(
items, items,
(item, idx) => { (item, idx) => {
const TabComp = item.closable ? TabClose : Tab; const TabComp = item.closable ? TabClose : Tab;

4
components/textarea.js
View File

@@ -1,4 +1,4 @@
// components/Textarea.js // components/Textarea.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Textarea = (props) => Tag("textarea", { ...props, class: `textarea ${props.class ?? ''}` }); export const Textarea = (props) => h("textarea", { ...props, class: `textarea ${props.class ?? ''}` });

6
components/textrotate.js
View File

@@ -1,12 +1,12 @@
// components/Textrotate.js // components/Textrotate.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const TextRotate = (props) => { export const TextRotate = (props) => {
const wordsArray = Array.isArray(props.words) const wordsArray = Array.isArray(props.words)
? props.words ? props.words
: (typeof props.words === 'string' ? props.words.split(',') : []); : (typeof props.words === 'string' ? props.words.split(',') : []);
return Tag("span", { ...props, class: `text-rotate ${props.class ?? ''}` }, [ return h("span", { ...props, class: `text-rotate ${props.class ?? ''}` }, [
Tag("span", {}, wordsArray.map(word => Tag("span", {}, word))) h("span", {}, wordsArray.map(word => h("span", {}, word)))
]); ]);
}; };

4
components/timeline.js
View File

@@ -1,11 +1,11 @@
// components/Timeline.js // components/Timeline.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Timeline = (props, children) => { export const Timeline = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
const vertical = props.vertical !== false; const vertical = props.vertical !== false;
const compact = props.compact === true; const compact = props.compact === true;
return Tag("ul", { return h("ul", {
...props, ...props,
class: `timeline ${vertical ? 'timeline-vertical' : 'timeline-horizontal'} ${compact ? 'timeline-compact' : ''} ${props.class ?? ''}`.trim() class: `timeline ${vertical ? 'timeline-vertical' : 'timeline-horizontal'} ${compact ? 'timeline-compact' : ''} ${props.class ?? ''}`.trim()
}, children); }, children);

16
components/toast.js
View File

@@ -1,17 +1,17 @@
// components/Toast.js // components/Toast.js
import { Tag, Mount } from "sigpro"; import { h, mount } from "sigpro";
export const Toast = (message, type = "alert-success", duration = 3500) => { export const Toast = (message, type = "alert-success", duration = 3500) => {
let container = document.getElementById("sigpro-toast-container"); let container = document.getElementById("sigpro-toast-container");
if (!container) { if (!container) {
container = Tag("div", { container = h("div", {
id: "sigpro-toast-container", id: "sigpro-toast-container",
class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none" class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none"
}); });
document.body.appendChild(container); document.body.appendChild(container);
} }
const toastHost = Tag("div", { style: "display: contents" }); const toastHost = h("div", { style: "display: contents" });
container.appendChild(toastHost); container.appendChild(toastHost);
let timeoutId; let timeoutId;
@@ -32,16 +32,16 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
}; };
const ToastComponent = () => { const ToastComponent = () => {
const closeIcon = Tag("span", { class: "icon-[lucide--x]" }); const closeIcon = h("span", { class: "icon-[lucide--x]" });
const closeBtn = Tag("button", { const closeBtn = h("button", {
class: "btn btn-xs btn-circle btn-ghost", class: "btn btn-xs btn-circle btn-ghost",
onclick: close onclick: close
}, closeIcon); }, closeIcon);
const alertDiv = Tag("div", { const alertDiv = h("div", {
class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto` class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`
}, [ }, [
Tag("span", {}, typeof message === "function" ? message() : message), h("span", {}, typeof message === "function" ? message() : message),
closeBtn closeBtn
]); ]);
@@ -49,7 +49,7 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
return alertDiv; return alertDiv;
}; };
const instance = Mount(ToastComponent, toastHost); const instance = mount(ToastComponent, toastHost);
if (duration > 0) timeoutId = setTimeout(close, duration); if (duration > 0) timeoutId = setTimeout(close, duration);
return close; return close;
}; };

4
components/toggle.js
View File

@@ -1,4 +1,4 @@
// components/Toggle.js // components/Toggle.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Toggle = (p) => Tag("input", { ...p, type: "checkbox", class: `toggle ${p.class ?? ''}` }); export const Toggle = (p) => h("input", { ...p, type: "checkbox", class: `toggle ${p.class ?? ''}` });

4
components/tooltip.js
View File

@@ -1,7 +1,7 @@
// components/Tooltip.js // components/Tooltip.js
import { Tag } from "sigpro"; import { h } from "sigpro";
export const Tooltip = (props, children) => { export const Tooltip = (props, children) => {
children === undefined && (children = props, props = {}); children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `tooltip ${props.class ?? ''}`, "data-tip": props.tip }, children); return h("div", { ...props, class: `tooltip ${props.class ?? ''}`, "data-tip": props.tip }, children);
}; };

60
dist/sigpro-ui.css vendored
View File

@@ -1,4 +1,4 @@
/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */ /*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
@layer properties; @layer properties;
@layer theme, base, components, utilities; @layer theme, base, components, utilities;
@layer theme { @layer theme {
@@ -1392,36 +1392,6 @@
} }
} }
} }
.validator-hint {
@layer daisyui.l1.l2.l3 {
visibility: hidden;
margin-top: calc(0.25rem * 2);
font-size: 0.75rem;
}
}
.validator {
@layer daisyui.l1.l2.l3 {
&:user-valid, &:has(:user-valid) {
&, &:focus, &:checked, &[aria-checked="true"], &:focus-within {
--input-color: var(--color-success);
}
}
&:user-invalid, &:has(:user-invalid), &[aria-invalid]:not([aria-invalid="false"]), &:has([aria-invalid]:not([aria-invalid="false"])) {
&, &:focus, &:checked, &[aria-checked="true"], &:focus-within {
--input-color: var(--color-error);
}
& ~ .validator-hint {
visibility: visible;
color: var(--color-error);
}
}
}
&:user-invalid, &:has(:user-invalid), &[aria-invalid]:not([aria-invalid="false"]), &:has([aria-invalid]:not([aria-invalid="false"])) {
& ~ .validator-hint {
display: revert-layer;
}
}
}
.collapse { .collapse {
visibility: collapse; visibility: collapse;
} }
@@ -1606,27 +1576,6 @@
} }
} }
} }
.toast {
@layer daisyui.l1.l2.l3 {
position: fixed;
inset-inline-start: auto;
inset-inline-end: calc(0.25rem * 4);
top: auto;
bottom: calc(0.25rem * 4);
display: flex;
flex-direction: column;
gap: calc(0.25rem * 2);
background-color: transparent;
translate: var(--toast-x, 0) var(--toast-y, 0);
width: max-content;
max-width: calc(100vw - 2rem);
& > * {
@media (prefers-reduced-motion: no-preference) {
animation: toast 0.25s ease-out;
}
}
}
}
.toggle { .toggle {
@layer daisyui.l1.l2.l3 { @layer daisyui.l1.l2.l3 {
border: var(--border) solid currentColor; border: var(--border) solid currentColor;
@@ -3152,9 +3101,6 @@
.top-0 { .top-0 {
top: calc(var(--spacing) * 0); top: calc(var(--spacing) * 0);
} }
.top-1\/2 {
top: calc(1 / 2 * 100%);
}
.top-2 { .top-2 {
top: calc(var(--spacing) * 2); top: calc(var(--spacing) * 2);
} }
@@ -4995,10 +4941,6 @@
--tw-translate-x: 100%; --tw-translate-x: 100%;
translate: var(--tw-translate-x) var(--tw-translate-y); translate: var(--tw-translate-x) var(--tw-translate-y);
} }
.-translate-y-1\/2 {
--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-2 { .translate-y-2 {
--tw-translate-y: calc(var(--spacing) * 2); --tw-translate-y: calc(var(--spacing) * 2);
translate: var(--tw-translate-x) var(--tw-translate-y); translate: var(--tw-translate-x) var(--tw-translate-y);

1184
dist/sigpro-ui.esm.js vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/sigpro-ui.esm.min.js vendored
View File

File diff suppressed because one or more lines are too long

1182
dist/sigpro-ui.js vendored
View File

File diff suppressed because it is too large Load Diff

4
dist/sigpro-ui.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/sigpro-ui.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
docs/README.md
View File

@@ -61,7 +61,7 @@ It eliminates the gap between your data (Signals) and your UI components. Each c
| **Engine** | **SigPro** | Atomic reactivity without V-DOM. | | **Engine** | **SigPro** | Atomic reactivity without V-DOM. |
| **Components** | **SigPro-UI** | 60+ semantic, reactive components. | | **Components** | **SigPro-UI** | 60+ semantic, reactive components. |
| **Styling** | **daisyUI v5** | Beautiful, accessible, themeable. | | **Styling** | **daisyUI v5** | Beautiful, accessible, themeable. |
| **Learning Curve** | **Zero** | If you know JS and HTML, you know SigPro-UI. | | **Learning Curve** | **Zero** | whenyou know JS and HTML, you know SigPro-UI. |
### Semantic Functionalism ### Semantic Functionalism
Stop writing endless HTML strings. Use semantic JavaScript constructors that return live, reactive DOM nodes. Stop writing endless HTML strings. Use semantic JavaScript constructors that return live, reactive DOM nodes.
@@ -90,7 +90,7 @@ To achieve the performance promised by SigPro-UI, your environment must be equip
### 1. SigPro Core ### 1. SigPro Core
The atomic heart. SigPro-UI requires the SigPro runtime (`$`, `Watch`, `Tag`, etc.) to be present in the global scope or provided as a module. The atomic heart. SigPro-UI requires the SigPro runtime (`$`, `watch`, `h`, etc.) to be present in the global scope or provided as a module.
### 2. daisyUI v5 ### 2. daisyUI v5

28
docs/components/accordion.md
View File

@@ -29,7 +29,7 @@ Collapsible accordion component for organizing content into expandable sections.
</div> </div>
```js ```js
const { Accordion, Div, Mount } = window; const { Accordion, Div, mount } = window;
const BasicDemo = () => { const BasicDemo = () => {
const open1 = $(false); const open1 = $(false);
@@ -54,7 +54,7 @@ const BasicDemo = () => {
}) })
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### Group Accordion (Radio Style) ### Group Accordion (Radio Style)
@@ -67,7 +67,7 @@ Mount(BasicDemo, '#demo-basic');
</div> </div>
```js ```js
const { Accordion, Div, Mount } = window; const { Accordion, Div, mount } = window;
const GroupDemo = () => { const GroupDemo = () => {
const openSection = $('section1'); const openSection = $('section1');
@@ -93,7 +93,7 @@ const GroupDemo = () => {
}) })
]); ]);
}; };
Mount(GroupDemo, '#demo-group'); mount(GroupDemo, '#demo-group');
``` ```
### Using Items Array ### Using Items Array
@@ -106,7 +106,7 @@ Mount(GroupDemo, '#demo-group');
</div> </div>
```js ```js
const { Accordion, Div, Mount } = window; const { Accordion, Div, mount } = window;
const ItemsDemo = () => { const ItemsDemo = () => {
const openItems = $({ const openItems = $({
@@ -135,7 +135,7 @@ const ItemsDemo = () => {
] ]
}); });
}; };
Mount(ItemsDemo, '#demo-items'); mount(ItemsDemo, '#demo-items');
``` ```
### FAQ Accordion ### FAQ Accordion
@@ -148,7 +148,7 @@ Mount(ItemsDemo, '#demo-items');
</div> </div>
```js ```js
const { Accordion, Div, Mount } = window; const { Accordion, Div, mount } = window;
const FaqDemo = () => { const FaqDemo = () => {
const openFaq = $('faq1'); const openFaq = $('faq1');
@@ -168,7 +168,7 @@ const FaqDemo = () => {
}) })
)); ));
}; };
Mount(FaqDemo, '#demo-faq'); mount(FaqDemo, '#demo-faq');
``` ```
### With Rich Content ### With Rich Content
@@ -181,7 +181,7 @@ Mount(FaqDemo, '#demo-faq');
</div> </div>
```js ```js
const { Accordion, Div, Span, Mount } = window; const { Accordion, Div, Span, mount } = window;
const RichDemo = () => { const RichDemo = () => {
const open1 = $(true); const open1 = $(true);
@@ -221,7 +221,7 @@ const RichDemo = () => {
}) })
]); ]);
}; };
Mount(RichDemo, '#demo-rich'); mount(RichDemo, '#demo-rich');
``` ```
### Form Accordion ### Form Accordion
@@ -234,7 +234,7 @@ Mount(RichDemo, '#demo-rich');
</div> </div>
```js ```js
const { Accordion, Div, Span, Button, Input, Radio, Mount } = window; const { Accordion, Div, Span, Button, Input, Radio, mount } = window;
const FormAccordion = () => { const FormAccordion = () => {
const openStep = $('step1'); const openStep = $('step1');
@@ -341,7 +341,7 @@ const FormAccordion = () => {
}) })
]); ]);
}; };
Mount(FormAccordion, '#demo-form'); mount(FormAccordion, '#demo-form');
``` ```
### All Variants ### All Variants
@@ -354,7 +354,7 @@ Mount(FormAccordion, '#demo-form');
</div> </div>
```js ```js
const { Accordion, Div, Span, Mount } = window; const { Accordion, Div, Span, mount } = window;
const VariantsDemo = () => { const VariantsDemo = () => {
const open1 = $(true); const open1 = $(true);
@@ -385,5 +385,5 @@ const VariantsDemo = () => {
}) })
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```

24
docs/components/alert.md
View File

@@ -36,7 +36,7 @@ Alert supports all **daisyUI Alert classes**:
</div> </div>
```js ```js
const { Alert, Div, Mount } = window; const { Alert, Div, mount } = window;
const BasicDemo = () => { const BasicDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [ return Div({ class: 'flex flex-col gap-3' }, [
@@ -46,7 +46,7 @@ const BasicDemo = () => {
Alert({ class: 'alert-error' }, 'An error occurred while processing your request.') Alert({ class: 'alert-error' }, 'An error occurred while processing your request.')
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### Soft vs Solid Variants ### Soft vs Solid Variants
@@ -59,7 +59,7 @@ Mount(BasicDemo, '#demo-basic');
</div> </div>
```js ```js
const { Alert, Div, Mount } = window; const { Alert, Div, mount } = window;
const VariantsDemo = () => { const VariantsDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [ return Div({ class: 'flex flex-col gap-3' }, [
@@ -69,7 +69,7 @@ const VariantsDemo = () => {
Alert({ class: 'alert-success alert-solid' }, 'Solid success alert') Alert({ class: 'alert-success alert-solid' }, 'Solid success alert')
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```
### With Actions ### With Actions
@@ -82,7 +82,7 @@ Mount(VariantsDemo, '#demo-variants');
</div> </div>
```js ```js
const { Alert, Button, Div, Mount, Toast } = window; const { Alert, Button, Div, mount, Toast } = window;
const ActionsDemo = () => { const ActionsDemo = () => {
const showUndo = $(false); const showUndo = $(false);
@@ -115,7 +115,7 @@ const ActionsDemo = () => {
]) : null ]) : null
]); ]);
}; };
Mount(ActionsDemo, '#demo-actions'); mount(ActionsDemo, '#demo-actions');
``` ```
### Dismissible Alert ### Dismissible Alert
@@ -128,7 +128,7 @@ Mount(ActionsDemo, '#demo-actions');
</div> </div>
```js ```js
const { Alert, Button, Div, Mount } = window; const { Alert, Button, Div, mount } = window;
const DismissibleDemo = () => { const DismissibleDemo = () => {
const visible = $(true); const visible = $(true);
@@ -141,7 +141,7 @@ const DismissibleDemo = () => {
() => !visible() ? Button({ class: 'btn btn-sm btn-ghost', onclick: () => visible(true) }, 'Show Alert') : null () => !visible() ? Button({ class: 'btn btn-sm btn-ghost', onclick: () => visible(true) }, 'Show Alert') : null
]); ]);
}; };
Mount(DismissibleDemo, '#demo-dismissible'); mount(DismissibleDemo, '#demo-dismissible');
``` ```
### Reactive Alert ### Reactive Alert
@@ -154,7 +154,7 @@ Mount(DismissibleDemo, '#demo-dismissible');
</div> </div>
```js ```js
const { Alert, Div, Input, Mount } = window; const { Alert, Div, Input, mount } = window;
const ReactiveDemo = () => { const ReactiveDemo = () => {
const email = $(''); const email = $('');
@@ -180,7 +180,7 @@ const ReactiveDemo = () => {
() => email() && !error() ? Alert({ class: 'alert-success' }, `Valid email: ${email()}`) : null () => email() && !error() ? Alert({ class: 'alert-success' }, `Valid email: ${email()}`) : null
]); ]);
}; };
Mount(ReactiveDemo, '#demo-reactive'); mount(ReactiveDemo, '#demo-reactive');
``` ```
### All Types ### All Types
@@ -193,7 +193,7 @@ Mount(ReactiveDemo, '#demo-reactive');
</div> </div>
```js ```js
const { Alert, Div, Mount } = window; const { Alert, Div, mount } = window;
const AllTypesDemo = () => { const AllTypesDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [ return Div({ class: 'flex flex-col gap-3' }, [
@@ -203,5 +203,5 @@ const AllTypesDemo = () => {
Alert({ class: 'alert-error' }, '❌ This is an error alert') Alert({ class: 'alert-error' }, '❌ This is an error alert')
]); ]);
}; };
Mount(AllTypesDemo, '#demo-all'); mount(AllTypesDemo, '#demo-all');
``` ```

20
docs/components/autocomplete.md
View File

@@ -41,7 +41,7 @@ Autocomplete wraps a **daisyUI Input component** internally. All Input styling c
</div> </div>
```js ```js
const { Autocomplete, Mount } = window; const { Autocomplete, mount } = window;
const BasicDemo = () => { const BasicDemo = () => {
const selected = $(""); const selected = $("");
@@ -62,7 +62,7 @@ const BasicDemo = () => {
onselect: (value) => selected(value), onselect: (value) => selected(value),
}); });
}; };
Mount(BasicDemo, "#demo-basic"); mount(BasicDemo, "#demo-basic");
``` ```
### With Objects ### With Objects
@@ -75,7 +75,7 @@ Mount(BasicDemo, "#demo-basic");
</div> </div>
```js ```js
const { Autocomplete, Div, Mount } = window; const { Autocomplete, Div, mount } = window;
const ObjectsDemo = () => { const ObjectsDemo = () => {
const selected = $(""); const selected = $("");
@@ -109,7 +109,7 @@ const ObjectsDemo = () => {
), ),
]); ]);
}; };
Mount(ObjectsDemo, "#demo-objects"); mount(ObjectsDemo, "#demo-objects");
``` ```
### With Reactive Display ### With Reactive Display
@@ -122,7 +122,7 @@ Mount(ObjectsDemo, "#demo-objects");
</div> </div>
```js ```js
const { Autocomplete, Div, Mount } = window; const { Autocomplete, Div, mount } = window;
const ReactiveDemo = () => { const ReactiveDemo = () => {
const selected = $(""); const selected = $("");
@@ -155,7 +155,7 @@ const ReactiveDemo = () => {
: null, : null,
]); ]);
}; };
Mount(ReactiveDemo, "#demo-reactive"); mount(ReactiveDemo, "#demo-reactive");
``` ```
### Dynamic Items ### Dynamic Items
@@ -168,7 +168,7 @@ Mount(ReactiveDemo, "#demo-reactive");
</div> </div>
```js ```js
const { Autocomplete, Select, SelectItems, Div, Mount } = window; const { Autocomplete, Select, SelectItems, Div, mount } = window;
const DynamicDemo = () => { const DynamicDemo = () => {
const selected = $(""); const selected = $("");
@@ -219,7 +219,7 @@ const DynamicDemo = () => {
]), ]),
]); ]);
}; };
Mount(DynamicDemo, "#demo-dynamic"); mount(DynamicDemo, "#demo-dynamic");
``` ```
### All Variants ### All Variants
@@ -232,7 +232,7 @@ Mount(DynamicDemo, "#demo-dynamic");
</div> </div>
```js ```js
const { Autocomplete, Div, Mount } = window; const { Autocomplete, Div, mount } = window;
const VariantsDemo = () => { const VariantsDemo = () => {
const colors = [ const colors = [
@@ -272,5 +272,5 @@ const VariantsDemo = () => {
}), }),
]); ]);
}; };
Mount(VariantsDemo, "#demo-variants"); mount(VariantsDemo, "#demo-variants");
``` ```

20
docs/components/badge.md
View File

@@ -56,7 +56,7 @@ const BasicDemo = () => {
Badge({ class: 'badge-error' }, 'Error') Badge({ class: 'badge-error' }, 'Error')
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### Badge Sizes ### Badge Sizes
@@ -78,7 +78,7 @@ const SizesDemo = () => {
Badge({ class: 'badge-lg' }, 'Large') Badge({ class: 'badge-lg' }, 'Large')
]); ]);
}; };
Mount(SizesDemo, '#demo-sizes'); mount(SizesDemo, '#demo-sizes');
``` ```
### Outline Badges ### Outline Badges
@@ -103,7 +103,7 @@ const OutlineDemo = () => {
Badge({ class: 'badge-outline badge-error' }, 'Error') Badge({ class: 'badge-outline badge-error' }, 'Error')
]); ]);
}; };
Mount(OutlineDemo, '#demo-outline'); mount(OutlineDemo, '#demo-outline');
``` ```
### Ghost Badges ### Ghost Badges
@@ -128,7 +128,7 @@ const GhostDemo = () => {
Badge({ class: 'badge-ghost badge-error' }, 'Error') Badge({ class: 'badge-ghost badge-error' }, 'Error')
]); ]);
}; };
Mount(GhostDemo, '#demo-ghost'); mount(GhostDemo, '#demo-ghost');
``` ```
### With Icons ### With Icons
@@ -165,7 +165,7 @@ const IconsDemo = () => {
]) ])
]); ]);
}; };
Mount(IconsDemo, '#demo-icons'); mount(IconsDemo, '#demo-icons');
``` ```
### Status Badges ### Status Badges
@@ -194,7 +194,7 @@ const StatusDemo = () => {
)) ))
]); ]);
}; };
Mount(StatusDemo, '#demo-status'); mount(StatusDemo, '#demo-status');
``` ```
### Count Badges ### Count Badges
@@ -227,7 +227,7 @@ const CountDemo = () => {
]) ])
]); ]);
}; };
Mount(CountDemo, '#demo-count'); mount(CountDemo, '#demo-count');
``` ```
### Interactive Badge ### Interactive Badge
@@ -255,7 +255,7 @@ const InteractiveDemo = () => {
}, 'Reset') }, 'Reset')
]); ]);
}; };
Mount(InteractiveDemo, '#demo-interactive'); mount(InteractiveDemo, '#demo-interactive');
``` ```
### All Variants ### All Variants
@@ -287,7 +287,7 @@ const VariantsDemo = () => {
]) ])
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```
### Inline with Text ### Inline with Text
@@ -319,5 +319,5 @@ const InlineDemo = () => {
]) ])
]); ]);
}; };
Mount(InlineDemo, '#demo-inline'); mount(InlineDemo, '#demo-inline');
``` ```

16
docs/components/button.md
View File

@@ -48,7 +48,7 @@ Button({ class: "btn-primary btn-lg btn-circle gap-4" }, "Click Me");
const BasicDemo = () => { const BasicDemo = () => {
return Button({ class: "btn-primary" }, "Click Me"); return Button({ class: "btn-primary" }, "Click Me");
}; };
Mount(BasicDemo, "#demo-basic"); mount(BasicDemo, "#demo-basic");
``` ```
### With Loading State ### With Loading State
@@ -69,10 +69,10 @@ const LoadingDemo = () => {
isSaving(false); isSaving(false);
}, },
}, },
[If(isSaving, ()=>Loading()), "Save Changes"], [when(isSaving, ()=>Loading()), "Save Changes"],
); );
}; };
Mount(LoadingDemo, "#demo-loading"); mount(LoadingDemo, "#demo-loading");
``` ```
### With Icon ### With Icon
@@ -85,7 +85,7 @@ const IconDemo = () => {
Button({ class: "btn-primary" }, [Icon("icon-[lucide--x]"), "Favorite"]), Button({ class: "btn-primary" }, [Icon("icon-[lucide--x]"), "Favorite"]),
]); ]);
}; };
Mount(IconDemo, "#demo-icon"); mount(IconDemo, "#demo-icon");
``` ```
### With Badge (using Indicator) ### With Badge (using Indicator)
@@ -99,7 +99,7 @@ const BadgeDemo = () => {
Button({ class: "btn-outline" }, "Notifications"), Button({ class: "btn-outline" }, "Notifications"),
); );
}; };
Mount(BadgeDemo, "#demo-badge"); mount(BadgeDemo, "#demo-badge");
``` ```
### With Tooltip ### With Tooltip
@@ -113,7 +113,7 @@ const TooltipDemo = () => {
Button({ class: "btn-ghost" }, "Delete"), Button({ class: "btn-ghost" }, "Delete"),
); );
}; };
Mount(TooltipDemo, "#demo-tooltip"); mount(TooltipDemo, "#demo-tooltip");
``` ```
### Combined (Badge + Tooltip) ### Combined (Badge + Tooltip)
@@ -137,7 +137,7 @@ const CombinedDemo = () => {
), ),
); );
}; };
Mount(CombinedDemo, "#demo-combined"); mount(CombinedDemo, "#demo-combined");
``` ```
### All Color Variants ### All Color Variants
@@ -155,5 +155,5 @@ const VariantsDemo = () => {
Button({ class: "btn-disabled" }, "Disabled"), Button({ class: "btn-disabled" }, "Disabled"),
]); ]);
}; };
Mount(VariantsDemo, "#demo-variants"); mount(VariantsDemo, "#demo-variants");
``` ```

14
docs/components/checkbox.md
View File

@@ -61,7 +61,7 @@ const BasicDemo = () => {
onclick: () => accepted(!accepted()) onclick: () => accepted(!accepted())
}); });
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### Toggle Switch ### Toggle Switch
@@ -89,7 +89,7 @@ const ToggleDemo = () => {
: Div({ class: 'alert alert-soft' }, 'Notifications are OFF') : Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
]); ]);
}; };
Mount(ToggleDemo, '#demo-toggle'); mount(ToggleDemo, '#demo-toggle');
``` ```
### Disabled State ### Disabled State
@@ -116,7 +116,7 @@ const DisabledDemo = () => {
}) })
]); ]);
}; };
Mount(DisabledDemo, '#demo-disabled'); mount(DisabledDemo, '#demo-disabled');
``` ```
### Reactive Multiple Selection ### Reactive Multiple Selection
@@ -169,7 +169,7 @@ const MultipleDemo = () => {
}) })
]); ]);
}; };
Mount(MultipleDemo, '#demo-multiple'); mount(MultipleDemo, '#demo-multiple');
``` ```
### With Tooltip ### With Tooltip
@@ -195,7 +195,7 @@ const TooltipDemo = () => {
}) })
); );
}; };
Mount(TooltipDemo, '#demo-tooltip'); mount(TooltipDemo, '#demo-tooltip');
``` ```
### All Variants ### All Variants
@@ -244,7 +244,7 @@ const VariantsDemo = () => {
]) ])
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```
### Form Example ### Form Example
@@ -288,5 +288,5 @@ const FormDemo = () => {
: null : null
]); ]);
}; };
Mount(FormDemo, '#demo-form'); mount(FormDemo, '#demo-form');
``` ```

12
docs/components/colorpicker.md
View File

@@ -45,7 +45,7 @@ const BasicDemo = () => {
value: color value: color
}); });
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### With Reactive Preview ### With Reactive Preview
@@ -74,7 +74,7 @@ const PreviewDemo = () => {
]) ])
]); ]);
}; };
Mount(PreviewDemo, '#demo-preview'); mount(PreviewDemo, '#demo-preview');
``` ```
### Color Palette Grid ### Color Palette Grid
@@ -112,7 +112,7 @@ const PaletteDemo = () => {
Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor()) Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
]); ]);
}; };
Mount(PaletteDemo, '#demo-palette'); mount(PaletteDemo, '#demo-palette');
``` ```
### With Text Color Preview ### With Text Color Preview
@@ -148,7 +148,7 @@ const TextDemo = () => {
]) ])
]); ]);
}; };
Mount(TextDemo, '#demo-text'); mount(TextDemo, '#demo-text');
``` ```
### All Variants ### All Variants
@@ -181,7 +181,7 @@ const VariantsDemo = () => {
}) })
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```
### Dynamic Color Swatch ### Dynamic Color Swatch
@@ -221,5 +221,5 @@ const DynamicDemo = () => {
]) ])
]); ]);
}; };
Mount(DynamicDemo, '#demo-dynamic'); mount(DynamicDemo, '#demo-dynamic');
``` ```

12
docs/components/datepicker.md
View File

@@ -50,7 +50,7 @@ const BasicDemo = () => {
placeholder: 'Choose a date...' placeholder: 'Choose a date...'
}); });
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### Date Range Picker ### Date Range Picker
@@ -78,7 +78,7 @@ const RangeDemo = () => {
]) : null ]) : null
]); ]);
}; };
Mount(RangeDemo, '#demo-range'); mount(RangeDemo, '#demo-range');
``` ```
### With Time Selection ### With Time Selection
@@ -106,7 +106,7 @@ const TimeDemo = () => {
]) : null ]) : null
]); ]);
}; };
Mount(TimeDemo, '#demo-time'); mount(TimeDemo, '#demo-time');
``` ```
### Range with Time ### Range with Time
@@ -135,7 +135,7 @@ const RangeTimeDemo = () => {
]) : null ]) : null
]); ]);
}; };
Mount(RangeTimeDemo, '#demo-range-time'); mount(RangeTimeDemo, '#demo-range-time');
``` ```
### Reactive Display ### Reactive Display
@@ -167,7 +167,7 @@ const ReactiveDemo = () => {
]) ])
]); ]);
}; };
Mount(ReactiveDemo, '#demo-reactive'); mount(ReactiveDemo, '#demo-reactive');
``` ```
### All Variants ### All Variants
@@ -201,5 +201,5 @@ const VariantsDemo = () => {
}) })
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```

14
docs/components/drawer.md
View File

@@ -61,7 +61,7 @@ const BasicDemo = () => {
]) ])
}); });
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### Navigation Drawer ### Navigation Drawer
@@ -138,7 +138,7 @@ const NavDrawer = () => {
]) ])
}); });
}; };
Mount(NavDrawer, '#demo-nav'); mount(NavDrawer, '#demo-nav');
``` ```
### Settings Drawer ### Settings Drawer
@@ -233,7 +233,7 @@ const SettingsDrawer = () => {
]) ])
}); });
}; };
Mount(SettingsDrawer, '#demo-settings'); mount(SettingsDrawer, '#demo-settings');
``` ```
### Cart Drawer ### Cart Drawer
@@ -336,7 +336,7 @@ const CartDrawer = () => {
]) ])
}); });
}; };
Mount(CartDrawer, '#demo-cart'); mount(CartDrawer, '#demo-cart');
``` ```
### Responsive Drawer ### Responsive Drawer
@@ -404,7 +404,7 @@ const ResponsiveDrawer = () => {
]) ])
}); });
}; };
Mount(ResponsiveDrawer, '#demo-responsive'); mount(ResponsiveDrawer, '#demo-responsive');
``` ```
### Form Drawer ### Form Drawer
@@ -462,7 +462,7 @@ const FormDrawer = () => {
}), }),
Div({ class: 'form-control' }, [ Div({ class: 'form-control' }, [
Span({ class: 'label-text mb-1' }, 'Message'), Span({ class: 'label-text mb-1' }, 'Message'),
Tag('textarea', { h('textarea', {
class: 'textarea textarea-bordered h-24', class: 'textarea textarea-bordered h-24',
placeholder: 'Your message', placeholder: 'Your message',
value: message, value: message,
@@ -489,5 +489,5 @@ const FormDrawer = () => {
]) ])
}); });
}; };
Mount(FormDrawer, '#demo-form'); mount(FormDrawer, '#demo-form');
``` ```

14
docs/components/dropdown.md
View File

@@ -71,7 +71,7 @@ const BasicDemo = () => {
] ]
}); });
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### With Icons ### With Icons
@@ -96,7 +96,7 @@ const IconsDemo = () => {
] ]
}); });
}; };
Mount(IconsDemo, '#demo-icons'); mount(IconsDemo, '#demo-icons');
``` ```
### Action Dropdown ### Action Dropdown
@@ -124,7 +124,7 @@ const ActionsDemo = () => {
] ]
}); });
}; };
Mount(ActionsDemo, '#demo-actions'); mount(ActionsDemo, '#demo-actions');
``` ```
### User Dropdown ### User Dropdown
@@ -153,7 +153,7 @@ const UserDropdown = () => {
] ]
}); });
}; };
Mount(UserDropdown, '#demo-user'); mount(UserDropdown, '#demo-user');
``` ```
### Reactive Items ### Reactive Items
@@ -180,7 +180,7 @@ const ReactiveDropdown = () => {
items: items items: items
}); });
}; };
Mount(ReactiveDropdown, '#demo-reactive'); mount(ReactiveDropdown, '#demo-reactive');
``` ```
### Notification Dropdown ### Notification Dropdown
@@ -225,7 +225,7 @@ const NotificationsDropdown = () => {
}); });
}; };
Mount(NotificationsDropdown, '#demo-notifications'); mount(NotificationsDropdown, '#demo-notifications');
``` ```
### All Variants ### All Variants
@@ -251,5 +251,5 @@ const VariantsDemo = () => {
Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems }) Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems })
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```

16
docs/components/fab.md
View File

@@ -75,7 +75,7 @@ const BasicDemo = () => {
}) })
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### With Label ### With Label
@@ -101,7 +101,7 @@ const LabelDemo = () => {
}) })
]); ]);
}; };
Mount(LabelDemo, '#demo-label'); mount(LabelDemo, '#demo-label');
``` ```
### Different Positions ### Different Positions
@@ -145,7 +145,7 @@ const PositionsDemo = () => {
}) })
]); ]);
}; };
Mount(PositionsDemo, '#demo-positions'); mount(PositionsDemo, '#demo-positions');
``` ```
### Color Variants ### Color Variants
@@ -190,7 +190,7 @@ const ColorsDemo = () => {
}) })
]); ]);
}; };
Mount(ColorsDemo, '#demo-colors'); mount(ColorsDemo, '#demo-colors');
``` ```
### Reactive Actions ### Reactive Actions
@@ -236,7 +236,7 @@ const ReactiveActions = () => {
}) })
]); ]);
}; };
Mount(ReactiveActions, '#demo-reactive'); mount(ReactiveActions, '#demo-reactive');
``` ```
### Document Actions ### Document Actions
@@ -275,7 +275,7 @@ const DocumentActions = () => {
}) })
]); ]);
}; };
Mount(DocumentActions, '#demo-document'); mount(DocumentActions, '#demo-document');
``` ```
### Messaging FAB ### Messaging FAB
@@ -333,7 +333,7 @@ const MessagingFAB = () => {
}) })
]); ]);
}; };
Mount(MessagingFAB, '#demo-messaging'); mount(MessagingFAB, '#demo-messaging');
``` ```
### All Variants ### All Variants
@@ -374,5 +374,5 @@ const VariantsDemo = () => {
]) ])
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```

14
docs/components/fieldset.md
View File

@@ -62,7 +62,7 @@ const BasicDemo = () => {
]) ])
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### With Reactive Legend ### With Reactive Legend
@@ -104,7 +104,7 @@ const ReactiveDemo = () => {
]) ])
]); ]);
}; };
Mount(ReactiveDemo, '#demo-reactive'); mount(ReactiveDemo, '#demo-reactive');
``` ```
### Address Form ### Address Form
@@ -146,7 +146,7 @@ const AddressDemo = () => {
]) ])
]); ]);
}; };
Mount(AddressDemo, '#demo-address'); mount(AddressDemo, '#demo-address');
``` ```
### Payment Method ### Payment Method
@@ -187,7 +187,7 @@ const PaymentDemo = () => {
]) ])
]); ]);
}; };
Mount(PaymentDemo, '#demo-payment'); mount(PaymentDemo, '#demo-payment');
``` ```
### Preferences Panel ### Preferences Panel
@@ -236,7 +236,7 @@ const PreferencesDemo = () => {
]) ])
]); ]);
}; };
Mount(PreferencesDemo, '#demo-preferences'); mount(PreferencesDemo, '#demo-preferences');
``` ```
### Registration Form ### Registration Form
@@ -294,7 +294,7 @@ const RegistrationDemo = () => {
]) ])
]); ]);
}; };
Mount(RegistrationDemo, '#demo-registration'); mount(RegistrationDemo, '#demo-registration');
``` ```
### All Variants ### All Variants
@@ -320,5 +320,5 @@ const VariantsDemo = () => {
Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent]) Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent])
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```

12
docs/components/indicator.md
View File

@@ -59,7 +59,7 @@ const BasicDemo = () => {
) )
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### Online Status Indicator ### Online Status Indicator
@@ -91,7 +91,7 @@ const StatusDemo = () => {
) )
]); ]);
}; };
Mount(StatusDemo, '#demo-status'); mount(StatusDemo, '#demo-status');
``` ```
### Reactive Counter ### Reactive Counter
@@ -129,7 +129,7 @@ const ReactiveDemo = () => {
]) ])
]); ]);
}; };
Mount(ReactiveDemo, '#demo-reactive'); mount(ReactiveDemo, '#demo-reactive');
``` ```
### Shopping Cart ### Shopping Cart
@@ -188,7 +188,7 @@ const CartDemo = () => {
]); ]);
}; };
Mount(CartDemo, '#demo-cart'); mount(CartDemo, '#demo-cart');
``` ```
### Email Inbox ### Email Inbox
@@ -249,7 +249,7 @@ const InboxDemo = () => {
]); ]);
}; };
Mount(InboxDemo, '#demo-inbox'); mount(InboxDemo, '#demo-inbox');
``` ```
### All Variants ### All Variants
@@ -280,5 +280,5 @@ const VariantsDemo = () => {
) )
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```

38
docs/components/input.md
View File

@@ -39,7 +39,7 @@ Input supports all **daisyUI Input classes**:
</div> </div>
```js ```js
const { Input, Mount } = window; const { Input, mount } = window;
const BasicDemo = () => { const BasicDemo = () => {
const name = $(""); const name = $("");
@@ -49,7 +49,7 @@ const BasicDemo = () => {
oninput: (e) => name(e.target.value) oninput: (e) => name(e.target.value)
}); });
}; };
Mount(BasicDemo, "#demo-basic"); mount(BasicDemo, "#demo-basic");
``` ```
### With Icon ### With Icon
@@ -64,13 +64,13 @@ Wrap the input inside a `Div` with class `input` and add an icon as a sibling.
</div> </div>
```js ```js
const { InputLabel, Div, Icon, Mount } = window; const { InputLabel, Div, Icon, mount } = window;
const IconDemo = () => { const IconDemo = () => {
const email = $(""); const email = $("");
return Div({ class: "input input-bordered flex items-center gap-2" }, [ return Div({ class: "input input-bordered flex items-center gap-2" }, [
Icon("✉️"), Icon("✉️"),
Tag("input", { h("input", {
class: "grow", class: "grow",
type: "email", type: "email",
value: email, value: email,
@@ -79,7 +79,7 @@ const IconDemo = () => {
}) })
]); ]);
}; };
Mount(IconDemo, "#demo-icon"); mount(IconDemo, "#demo-icon");
``` ```
### Password with Toggle ### Password with Toggle
@@ -92,14 +92,14 @@ Mount(IconDemo, "#demo-icon");
</div> </div>
```js ```js
const { Input, Div, Icon, Swap, Mount } = window; const { Input, Div, Icon, Swap, mount } = window;
const PasswordDemo = () => { const PasswordDemo = () => {
const password = $(""); const password = $("");
const visible = $(false); const visible = $(false);
return Div({ class: "input input-bordered flex items-center gap-2" }, [ return Div({ class: "input input-bordered flex items-center gap-2" }, [
Icon("icon-[lucide--lock]"), Icon("icon-[lucide--lock]"),
Tag("input", { h("input", {
type: () => (visible() ? "text" : "password"), type: () => (visible() ? "text" : "password"),
value: password, value: password,
placeholder: "Password", placeholder: "Password",
@@ -114,7 +114,7 @@ const PasswordDemo = () => {
}) })
]); ]);
}; };
Mount(PasswordDemo, "#demo-password"); mount(PasswordDemo, "#demo-password");
``` ```
### With Floating Label ### With Floating Label
@@ -129,7 +129,7 @@ Use a wrapper `Div` with class `floating-label`.
</div> </div>
```js ```js
const { Input, Div, Span, Mount } = window; const { Input, Div, Span, mount } = window;
const LabelDemo = () => { const LabelDemo = () => {
const email = $(""); const email = $("");
@@ -143,7 +143,7 @@ const LabelDemo = () => {
}) })
]); ]);
}; };
Mount(LabelDemo, "#demo-label"); mount(LabelDemo, "#demo-label");
``` ```
### With Tooltip ### With Tooltip
@@ -158,7 +158,7 @@ Wrap the input with `Tooltip` component.
</div> </div>
```js ```js
const { Input, Tooltip, Mount } = window; const { Input, Tooltip, mount } = window;
const TooltipDemo = () => { const TooltipDemo = () => {
const username = $(""); const username = $("");
@@ -170,7 +170,7 @@ const TooltipDemo = () => {
}) })
]); ]);
}; };
Mount(TooltipDemo, "#demo-tooltip"); mount(TooltipDemo, "#demo-tooltip");
``` ```
### Error State ### Error State
@@ -185,13 +185,13 @@ Add `input-error` class and show a validation message.
</div> </div>
```js ```js
const { Input, Div, Mount } = window; const { Input, Div, mount } = window;
const ErrorDemo = () => { const ErrorDemo = () => {
const email = $(""); const email = $("");
const isValid = () => email().includes("@"); const isValid = () => email().includes("@");
return Div({ class: "flex flex-col gap-2" }, [ return Div({ class: "flex flex-col gap-2" }, [
Tag("input", { h("input", {
type: "email", type: "email",
class: () => `input input-bordered ${email() && !isValid() ? "input-error" : ""}`, class: () => `input input-bordered ${email() && !isValid() ? "input-error" : ""}`,
value: email, value: email,
@@ -201,7 +201,7 @@ const ErrorDemo = () => {
() => email() && !isValid() ? Div({ class: "text-error text-sm" }, "Enter a valid email") : null () => email() && !isValid() ? Div({ class: "text-error text-sm" }, "Enter a valid email") : null
]); ]);
}; };
Mount(ErrorDemo, "#demo-error"); mount(ErrorDemo, "#demo-error");
``` ```
### Disabled State ### Disabled State
@@ -214,12 +214,12 @@ Mount(ErrorDemo, "#demo-error");
</div> </div>
```js ```js
const { Input, Mount } = window; const { Input, mount } = window;
const DisabledDemo = () => { const DisabledDemo = () => {
return Input({ value: "john.doe", disabled: true }); return Input({ value: "john.doe", disabled: true });
}; };
Mount(DisabledDemo, "#demo-disabled"); mount(DisabledDemo, "#demo-disabled");
``` ```
### All Variants ### All Variants
@@ -232,7 +232,7 @@ Mount(DisabledDemo, "#demo-disabled");
</div> </div>
```js ```js
const { Input, Div, Mount } = window; const { Input, Div, mount } = window;
const VariantsDemo = () => { const VariantsDemo = () => {
const text = $(""); const text = $("");
@@ -250,5 +250,5 @@ const VariantsDemo = () => {
Input({ type: "date", value: $("2024-01-01") }) Input({ type: "date", value: $("2024-01-01") })
]); ]);
}; };
Mount(VariantsDemo, "#demo-variants"); mount(VariantsDemo, "#demo-variants");
``` ```

18
docs/components/list.md
View File

@@ -51,7 +51,7 @@ const BasicDemo = () => {
]), ]),
}); });
}; };
Mount(BasicDemo, "#demo-basic"); mount(BasicDemo, "#demo-basic");
``` ```
### With Header ### With Header
@@ -90,7 +90,7 @@ const HeaderDemo = () => {
]), ]),
}); });
}; };
Mount(HeaderDemo, "#demo-header"); mount(HeaderDemo, "#demo-header");
``` ```
### With Icons ### With Icons
@@ -134,7 +134,7 @@ const IconsDemo = () => {
), ),
}); });
}; };
Mount(IconsDemo, "#demo-icons"); mount(IconsDemo, "#demo-icons");
``` ```
### With Badges ### With Badges
@@ -194,7 +194,7 @@ const BadgesDemo = () => {
), ),
}); });
}; };
Mount(BadgesDemo, "#demo-badges"); mount(BadgesDemo, "#demo-badges");
``` ```
### Interactive List ### Interactive List
@@ -252,7 +252,7 @@ const InteractiveDemo = () => {
: Div({ class: "alert alert-soft" }, "Select a project to see details"), : Div({ class: "alert alert-soft" }, "Select a project to see details"),
]); ]);
}; };
Mount(InteractiveDemo, "#demo-interactive"); mount(InteractiveDemo, "#demo-interactive");
``` ```
### Reactive List (Todo App) ### Reactive List (Todo App)
@@ -291,7 +291,7 @@ const ReactiveDemo = () => {
}; };
const pendingCount = () => todos().filter(t => !t.done).length; const pendingCount = () => todos().filter(t => !t.done).length;
Watch(()=> console.log(pendingCount())); watch(()=> console.log(pendingCount()));
return Div({ class: 'flex flex-col gap-4' }, [ return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'flex gap-2' }, [ Div({ class: 'flex gap-2' }, [
Input({ Input({
@@ -330,7 +330,7 @@ const ReactiveDemo = () => {
]); ]);
}; };
Mount(ReactiveDemo, '#demo-reactive'); mount(ReactiveDemo, '#demo-reactive');
``` ```
### Avatar List ### Avatar List
@@ -383,7 +383,7 @@ const AvatarDemo = () => {
]), ]),
}); });
}; };
Mount(AvatarDemo, "#demo-avatar"); mount(AvatarDemo, "#demo-avatar");
``` ```
### All Variants ### All Variants
@@ -421,5 +421,5 @@ const VariantsDemo = () => {
}), }),
]); ]);
}; };
Mount(VariantsDemo, "#demo-variants"); mount(VariantsDemo, "#demo-variants");
``` ```

16
docs/components/menu.md
View File

@@ -72,7 +72,7 @@ const BasicDemo = () => {
] ]
}); });
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### With Icons ### With Icons
@@ -117,7 +117,7 @@ const IconsDemo = () => {
] ]
}); });
}; };
Mount(IconsDemo, '#demo-icons'); mount(IconsDemo, '#demo-icons');
``` ```
### Nested Menu ### Nested Menu
@@ -187,7 +187,7 @@ const NestedDemo = () => {
] ]
}); });
}; };
Mount(NestedDemo, '#demo-nested'); mount(NestedDemo, '#demo-nested');
``` ```
### Horizontal Menu ### Horizontal Menu
@@ -232,7 +232,7 @@ const HorizontalDemo = () => {
] ]
}); });
}; };
Mount(HorizontalDemo, '#demo-horizontal'); mount(HorizontalDemo, '#demo-horizontal');
``` ```
### Sidebar Menu ### Sidebar Menu
@@ -295,7 +295,7 @@ const SidebarDemo = () => {
]) ])
]); ]);
}; };
Mount(SidebarDemo, '#demo-sidebar'); mount(SidebarDemo, '#demo-sidebar');
``` ```
### Account Menu ### Account Menu
@@ -346,7 +346,7 @@ const AccountDemo = () => {
] ]
}); });
}; };
Mount(AccountDemo, '#demo-account'); mount(AccountDemo, '#demo-account');
``` ```
### Collapsible Sidebar ### Collapsible Sidebar
@@ -384,7 +384,7 @@ const CollapsibleDemo = () => {
]) ])
]); ]);
}; };
Mount(CollapsibleDemo, '#demo-collapsible'); mount(CollapsibleDemo, '#demo-collapsible');
``` ```
### All Variants ### All Variants
@@ -422,5 +422,5 @@ const VariantsDemo = () => {
]) ])
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```

14
docs/components/modal.md
View File

@@ -63,7 +63,7 @@ const BasicDemo = () => {
]) ])
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
@@ -130,7 +130,7 @@ const ActionsDemo = () => {
]) ])
]); ]);
}; };
Mount(ActionsDemo, '#demo-actions'); mount(ActionsDemo, '#demo-actions');
``` ```
### Form Modal ### Form Modal
@@ -199,7 +199,7 @@ const FormModal = () => {
]) ])
]); ]);
}; };
Mount(FormModal, '#demo-form'); mount(FormModal, '#demo-form');
``` ```
### Confirmation Modal ### Confirmation Modal
@@ -260,7 +260,7 @@ const ConfirmDemo = () => {
]) ])
]); ]);
}; };
Mount(ConfirmDemo, '#demo-confirm'); mount(ConfirmDemo, '#demo-confirm');
``` ```
### Large Content Modal ### Large Content Modal
@@ -312,7 +312,7 @@ const LargeDemo = () => {
]) ])
]); ]);
}; };
Mount(LargeDemo, '#demo-large'); mount(LargeDemo, '#demo-large');
``` ```
### Multiple Modals ### Multiple Modals
@@ -354,7 +354,7 @@ const MultipleDemo = () => {
}, 'Please review your input before proceeding.') }, 'Please review your input before proceeding.')
]); ]);
}; };
Mount(MultipleDemo, '#demo-multiple'); mount(MultipleDemo, '#demo-multiple');
``` ```
### Custom Styled Modal ### Custom Styled Modal
@@ -391,5 +391,5 @@ const CustomDemo = () => {
]) ])
]); ]);
}; };
Mount(CustomDemo, '#demo-custom'); mount(CustomDemo, '#demo-custom');
``` ```

14
docs/components/navbar.md
View File

@@ -51,7 +51,7 @@ const BasicDemo = () => {
]) ])
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### With Navigation Links ### With Navigation Links
@@ -92,7 +92,7 @@ const LinksDemo = () => {
]) ])
]); ]);
}; };
Mount(LinksDemo, '#demo-links'); mount(LinksDemo, '#demo-links');
``` ```
### With Search ### With Search
@@ -128,7 +128,7 @@ const SearchDemo = () => {
]) ])
]); ]);
}; };
Mount(SearchDemo, '#demo-search'); mount(SearchDemo, '#demo-search');
``` ```
### With Avatar and Dropdown ### With Avatar and Dropdown
@@ -167,7 +167,7 @@ const AvatarDemo = () => {
]) ])
]); ]);
}; };
Mount(AvatarDemo, '#demo-avatar'); mount(AvatarDemo, '#demo-avatar');
``` ```
### Responsive Navbar ### Responsive Navbar
@@ -206,7 +206,7 @@ const ResponsiveDemo = () => {
]) : null ]) : null
]); ]);
}; };
Mount(ResponsiveDemo, '#demo-responsive'); mount(ResponsiveDemo, '#demo-responsive');
``` ```
### With Brand and Actions ### With Brand and Actions
@@ -237,7 +237,7 @@ const BrandDemo = () => {
]) ])
]); ]);
}; };
Mount(BrandDemo, '#demo-brand'); mount(BrandDemo, '#demo-brand');
``` ```
### All Variants ### All Variants
@@ -272,5 +272,5 @@ const VariantsDemo = () => {
]) ])
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```

14
docs/components/radio.md
View File

@@ -70,7 +70,7 @@ const BasicDemo = () => {
Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`) Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### With Tooltip ### With Tooltip
@@ -105,7 +105,7 @@ const TooltipDemo = () => {
}) })
]); ]);
}; };
Mount(TooltipDemo, '#demo-tooltip'); mount(TooltipDemo, '#demo-tooltip');
``` ```
### Disabled State ### Disabled State
@@ -139,7 +139,7 @@ const DisabledDemo = () => {
}) })
]); ]);
}; };
Mount(DisabledDemo, '#demo-disabled'); mount(DisabledDemo, '#demo-disabled');
``` ```
### Reactive Preview ### Reactive Preview
@@ -199,7 +199,7 @@ const ReactiveDemo = () => {
}, () => `${size()} ${color()} preview`) }, () => `${size()} ${color()} preview`)
]); ]);
}; };
Mount(ReactiveDemo, '#demo-reactive'); mount(ReactiveDemo, '#demo-reactive');
``` ```
### Payment Method Selection ### Payment Method Selection
@@ -250,7 +250,7 @@ const PaymentDemo = () => {
}) })
]); ]);
}; };
Mount(PaymentDemo, '#demo-payment'); mount(PaymentDemo, '#demo-payment');
``` ```
### All Variants ### All Variants
@@ -334,7 +334,7 @@ const VariantsDemo = () => {
]) ])
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```
### Dynamic Options ### Dynamic Options
@@ -405,5 +405,5 @@ const DynamicDemo = () => {
: null : null
]); ]);
}; };
Mount(DynamicDemo, '#demo-dynamic'); mount(DynamicDemo, '#demo-dynamic');
``` ```

14
docs/components/range.md
View File

@@ -57,7 +57,7 @@ const BasicDemo = () => {
Div({ class: 'text-center' }, () => `Value: ${value()}%`) Div({ class: 'text-center' }, () => `Value: ${value()}%`)
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### With Tooltip ### With Tooltip
@@ -85,7 +85,7 @@ const TooltipDemo = () => {
Div({ class: 'w-full h-20 rounded-lg transition-all', style: () => `background-color: hsl(0, 0%, ${brightness()}%)` }) Div({ class: 'w-full h-20 rounded-lg transition-all', style: () => `background-color: hsl(0, 0%, ${brightness()}%)` })
]); ]);
}; };
Mount(TooltipDemo, '#demo-tooltip'); mount(TooltipDemo, '#demo-tooltip');
``` ```
### Color Variants ### Color Variants
@@ -109,7 +109,7 @@ const ColorsDemo = () => {
Range({ label: 'Accent', value: accent, class: 'range-accent', oninput: (e) => accent(e.target.value) }) Range({ label: 'Accent', value: accent, class: 'range-accent', oninput: (e) => accent(e.target.value) })
]); ]);
}; };
Mount(ColorsDemo, '#demo-colors'); mount(ColorsDemo, '#demo-colors');
``` ```
### Size Variants ### Size Variants
@@ -135,7 +135,7 @@ const SizesDemo = () => {
Range({ label: 'Large', value: lg, class: 'range-lg', oninput: (e) => lg(e.target.value) }) Range({ label: 'Large', value: lg, class: 'range-lg', oninput: (e) => lg(e.target.value) })
]); ]);
}; };
Mount(SizesDemo, '#demo-sizes'); mount(SizesDemo, '#demo-sizes');
``` ```
### Price Range ### Price Range
@@ -173,7 +173,7 @@ const PriceDemo = () => {
}) })
]); ]);
}; };
Mount(PriceDemo, '#demo-price'); mount(PriceDemo, '#demo-price');
``` ```
### Audio Controls ### Audio Controls
@@ -227,7 +227,7 @@ const AudioDemo = () => {
]) ])
]); ]);
}; };
Mount(AudioDemo, '#demo-audio'); mount(AudioDemo, '#demo-audio');
``` ```
### All Variants ### All Variants
@@ -254,5 +254,5 @@ const VariantsDemo = () => {
Range({ disabled: true, value: $(50), oninput: (e) => {} }) Range({ disabled: true, value: $(50), oninput: (e) => {} })
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```

14
docs/components/rating.md
View File

@@ -54,7 +54,7 @@ const BasicDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`) Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### Heart Rating ### Heart Rating
@@ -80,7 +80,7 @@ const HeartDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`) Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
]); ]);
}; };
Mount(HeartDemo, '#demo-heart'); mount(HeartDemo, '#demo-heart');
``` ```
### Star with Outline ### Star with Outline
@@ -106,7 +106,7 @@ const Star2Demo = () => {
Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`) Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
]); ]);
}; };
Mount(Star2Demo, '#demo-star2'); mount(Star2Demo, '#demo-star2');
``` ```
### Read-only Rating ### Read-only Rating
@@ -131,7 +131,7 @@ const ReadonlyDemo = () => {
Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)') Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
]); ]);
}; };
Mount(ReadonlyDemo, '#demo-readonly'); mount(ReadonlyDemo, '#demo-readonly');
``` ```
### Product Review ### Product Review
@@ -186,7 +186,7 @@ const ReviewDemo = () => {
]) ])
]); ]);
}; };
Mount(ReviewDemo, '#demo-review'); mount(ReviewDemo, '#demo-review');
``` ```
### All Variants ### All Variants
@@ -219,7 +219,7 @@ const VariantsDemo = () => {
]) ])
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```
### Interactive Feedback ### Interactive Feedback
@@ -268,5 +268,5 @@ const FeedbackDemo = () => {
: null : null
]); ]);
}; };
Mount(FeedbackDemo, '#demo-feedback'); mount(FeedbackDemo, '#demo-feedback');
``` ```

10
docs/components/select.md
View File

@@ -67,7 +67,7 @@ const BasicDemo = () => {
]) ])
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### With Reactive Display ### With Reactive Display
@@ -102,7 +102,7 @@ const ReactiveDemo = () => {
Div({ class: 'alert alert-info' }, () => `You selected: ${selected()}`) Div({ class: 'alert alert-info' }, () => `You selected: ${selected()}`)
]); ]);
}; };
Mount(ReactiveDemo, '#demo-reactive'); mount(ReactiveDemo, '#demo-reactive');
``` ```
### Disabled State ### Disabled State
@@ -133,7 +133,7 @@ const DisabledDemo = () => {
]) ])
]); ]);
}; };
Mount(DisabledDemo, '#demo-disabled'); mount(DisabledDemo, '#demo-disabled');
``` ```
### Dynamic Items ### Dynamic Items
@@ -195,7 +195,7 @@ const DynamicDemo = () => {
() => selectedItem() ? Div({ class: 'alert alert-success' }, `Selected: ${selectedItem()}`) : null () => selectedItem() ? Div({ class: 'alert alert-success' }, `Selected: ${selectedItem()}`) : null
]); ]);
}; };
Mount(DynamicDemo, '#demo-dynamic'); mount(DynamicDemo, '#demo-dynamic');
``` ```
### All Variants ### All Variants
@@ -263,5 +263,5 @@ const VariantsDemo = () => {
]) ])
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```

16
docs/components/stack.md
View File

@@ -44,7 +44,7 @@ const BasicDemo = () => {
Div({ class: 'bg-accent text-accent-content rounded-lg p-4 shadow-lg' }, 'Layer 3') Div({ class: 'bg-accent text-accent-content rounded-lg p-4 shadow-lg' }, 'Layer 3')
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### Card Stack ### Card Stack
@@ -73,7 +73,7 @@ const CardsDemo = () => {
]) ])
]); ]);
}; };
Mount(CardsDemo, '#demo-cards'); mount(CardsDemo, '#demo-cards');
``` ```
### Avatar Stack ### Avatar Stack
@@ -99,7 +99,7 @@ const AvatarsDemo = () => {
]) ])
]); ]);
}; };
Mount(AvatarsDemo, '#demo-avatars'); mount(AvatarsDemo, '#demo-avatars');
``` ```
### Image Stack ### Image Stack
@@ -125,7 +125,7 @@ const ImagesDemo = () => {
]) ])
]); ]);
}; };
Mount(ImagesDemo, '#demo-images'); mount(ImagesDemo, '#demo-images');
``` ```
### Photo Gallery Stack ### Photo Gallery Stack
@@ -157,7 +157,7 @@ const GalleryDemo = () => {
) )
]); ]);
}; };
Mount(GalleryDemo, '#demo-gallery'); mount(GalleryDemo, '#demo-gallery');
``` ```
### Interactive Stack ### Interactive Stack
@@ -197,7 +197,7 @@ const InteractiveDemo = () => {
]) ])
]); ]);
}; };
Mount(InteractiveDemo, '#demo-interactive'); mount(InteractiveDemo, '#demo-interactive');
``` ```
### Notification Stack ### Notification Stack
@@ -249,7 +249,7 @@ const NotificationsDemo = () => {
}, 'Clear All') }, 'Clear All')
]); ]);
}; };
Mount(NotificationsDemo, '#demo-notifications'); mount(NotificationsDemo, '#demo-notifications');
``` ```
### All Variants ### All Variants
@@ -290,5 +290,5 @@ const VariantsDemo = () => {
]) ])
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```

14
docs/components/stat.md
View File

@@ -59,7 +59,7 @@ const BasicDemo = () => {
}) })
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### With Icons ### With Icons
@@ -94,7 +94,7 @@ const IconsDemo = () => {
}) })
]); ]);
}; };
Mount(IconsDemo, '#demo-icons'); mount(IconsDemo, '#demo-icons');
``` ```
### Reactive Values ### Reactive Values
@@ -137,7 +137,7 @@ const ReactiveDemo = () => {
]) ])
]); ]);
}; };
Mount(ReactiveDemo, '#demo-reactive'); mount(ReactiveDemo, '#demo-reactive');
``` ```
### Multiple Stats in Row ### Multiple Stats in Row
@@ -178,7 +178,7 @@ const MultipleDemo = () => {
}) })
]); ]);
}; };
Mount(MultipleDemo, '#demo-multiple'); mount(MultipleDemo, '#demo-multiple');
``` ```
### Dashboard Example ### Dashboard Example
@@ -243,7 +243,7 @@ const DashboardDemo = () => {
]) ])
]); ]);
}; };
Mount(DashboardDemo, '#demo-dashboard'); mount(DashboardDemo, '#demo-dashboard');
``` ```
### All Variants ### All Variants
@@ -288,7 +288,7 @@ const VariantsDemo = () => {
}) })
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```
### Compact Stats ### Compact Stats
@@ -325,5 +325,5 @@ const CompactDemo = () => {
}) })
]); ]);
}; };
Mount(CompactDemo, '#demo-compact'); mount(CompactDemo, '#demo-compact');
``` ```

16
docs/components/swap.md
View File

@@ -49,7 +49,7 @@ const BasicDemo = () => {
off: "💫 OFF" off: "💫 OFF"
}); });
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### Icon Swap ### Icon Swap
@@ -71,7 +71,7 @@ const IconsDemo = () => {
off: "👁️‍🗨️" off: "👁️‍🗨️"
}); });
}; };
Mount(IconsDemo, '#demo-icons'); mount(IconsDemo, '#demo-icons');
``` ```
### Emoji Swap ### Emoji Swap
@@ -93,7 +93,7 @@ const EmojiDemo = () => {
off: "🖤" off: "🖤"
}); });
}; };
Mount(EmojiDemo, '#demo-emoji'); mount(EmojiDemo, '#demo-emoji');
``` ```
### Custom Content Swap ### Custom Content Swap
@@ -115,7 +115,7 @@ const CustomDemo = () => {
off: Div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"]) off: Div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"])
}); });
}; };
Mount(CustomDemo, '#demo-custom'); mount(CustomDemo, '#demo-custom');
``` ```
### With Reactive State ### With Reactive State
@@ -144,7 +144,7 @@ const ReactiveDemo = () => {
) )
]); ]);
}; };
Mount(ReactiveDemo, '#demo-reactive'); mount(ReactiveDemo, '#demo-reactive');
``` ```
### Toggle Mode Swap ### Toggle Mode Swap
@@ -192,7 +192,7 @@ const ModeDemo = () => {
]) ])
]); ]);
}; };
Mount(ModeDemo, '#demo-mode'); mount(ModeDemo, '#demo-mode');
``` ```
### All Variants ### All Variants
@@ -241,7 +241,7 @@ const VariantsDemo = () => {
]) ])
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```
### Simple Todo Toggle ### Simple Todo Toggle
@@ -279,5 +279,5 @@ const TodoDemo = () => {
}) })
]); ]);
}; };
Mount(TodoDemo, '#demo-todo'); mount(TodoDemo, '#demo-todo');
``` ```

16
docs/components/table.md
View File

@@ -70,7 +70,7 @@ const BasicDemo = () => {
] ]
}); });
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### With Zebra Stripes ### With Zebra Stripes
@@ -101,7 +101,7 @@ const ZebraDemo = () => {
zebra: true zebra: true
}); });
}; };
Mount(ZebraDemo, '#demo-zebra'); mount(ZebraDemo, '#demo-zebra');
``` ```
### With Custom Cell Rendering ### With Custom Cell Rendering
@@ -147,7 +147,7 @@ const CustomDemo = () => {
zebra: true zebra: true
}); });
}; };
Mount(CustomDemo, '#demo-custom'); mount(CustomDemo, '#demo-custom');
``` ```
### With Footers ### With Footers
@@ -195,7 +195,7 @@ const FooterDemo = () => {
zebra: true zebra: true
}); });
}; };
Mount(FooterDemo, '#demo-footer'); mount(FooterDemo, '#demo-footer');
``` ```
### Empty State ### Empty State
@@ -223,7 +223,7 @@ const EmptyDemo = () => {
]) ])
}); });
}; };
Mount(EmptyDemo, '#demo-empty'); mount(EmptyDemo, '#demo-empty');
``` ```
### Reactive Data ### Reactive Data
@@ -294,7 +294,7 @@ const ReactiveDemo = () => {
}) })
]); ]);
}; };
Mount(ReactiveDemo, '#demo-reactive'); mount(ReactiveDemo, '#demo-reactive');
``` ```
### With Actions ### With Actions
@@ -354,7 +354,7 @@ const ActionsDemo = () => {
zebra: true zebra: true
}); });
}; };
Mount(ActionsDemo, '#demo-actions'); mount(ActionsDemo, '#demo-actions');
``` ```
### All Variants ### All Variants
@@ -408,5 +408,5 @@ const VariantsDemo = () => {
}) })
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```

16
docs/components/tabs.md
View File

@@ -87,7 +87,7 @@ const BasicDemo = () => {
] ]
}); });
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### With Icons ### With Icons
@@ -126,7 +126,7 @@ const IconsDemo = () => {
] ]
}); });
}; };
Mount(IconsDemo, '#demo-icons'); mount(IconsDemo, '#demo-icons');
``` ```
### With Tooltips ### With Tooltips
@@ -168,7 +168,7 @@ const TooltipsDemo = () => {
] ]
}); });
}; };
Mount(TooltipsDemo, '#demo-tooltips'); mount(TooltipsDemo, '#demo-tooltips');
``` ```
### Disabled Tab ### Disabled Tab
@@ -207,7 +207,7 @@ const DisabledDemo = () => {
] ]
}); });
}; };
Mount(DisabledDemo, '#demo-disabled'); mount(DisabledDemo, '#demo-disabled');
``` ```
### Reactive Content ### Reactive Content
@@ -253,7 +253,7 @@ const ReactiveDemo = () => {
] ]
}); });
}; };
Mount(ReactiveDemo, '#demo-reactive'); mount(ReactiveDemo, '#demo-reactive');
``` ```
### Form Tabs ### Form Tabs
@@ -355,7 +355,7 @@ const FormTabs = () => {
]) ])
]); ]);
}; };
Mount(FormTabs, '#demo-form'); mount(FormTabs, '#demo-form');
``` ```
### All Variants ### All Variants
@@ -415,7 +415,7 @@ const VariantsDemo = () => {
Tabs({ items: createItems(active4), class: 'tabs-border' }) Tabs({ items: createItems(active4), class: 'tabs-border' })
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```
### Closable Tabs ### Closable Tabs
@@ -452,5 +452,5 @@ const ClosableTabsDemo = () => {
]); ]);
}; };
Mount(ClosableTabsDemo, '#demo-closable'); mount(ClosableTabsDemo, '#demo-closable');
``` ```

16
docs/components/timeline.md
View File

@@ -60,7 +60,7 @@ const BasicDemo = () => {
return Timeline({ items: events }); return Timeline({ items: events });
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### Horizontal Timeline ### Horizontal Timeline
@@ -88,7 +88,7 @@ const HorizontalDemo = () => {
class: 'min-w-[600px]' class: 'min-w-[600px]'
}); });
}; };
Mount(HorizontalDemo, '#demo-horizontal'); mount(HorizontalDemo, '#demo-horizontal');
``` ```
### Compact Timeline ### Compact Timeline
@@ -114,7 +114,7 @@ const CompactDemo = () => {
compact: true compact: true
}); });
}; };
Mount(CompactDemo, '#demo-compact'); mount(CompactDemo, '#demo-compact');
``` ```
### Custom Icons ### Custom Icons
@@ -137,7 +137,7 @@ const IconsDemo = () => {
return Timeline({ items: milestones }); return Timeline({ items: milestones });
}; };
Mount(IconsDemo, '#demo-icons'); mount(IconsDemo, '#demo-icons');
``` ```
### Reactive Timeline ### Reactive Timeline
@@ -192,7 +192,7 @@ const ReactiveDemo = () => {
]) ])
]); ]);
}; };
Mount(ReactiveDemo, '#demo-reactive'); mount(ReactiveDemo, '#demo-reactive');
``` ```
### Order Status Tracker ### Order Status Tracker
@@ -234,7 +234,7 @@ const OrderDemo = () => {
)) ))
]); ]);
}; };
Mount(OrderDemo, '#demo-order'); mount(OrderDemo, '#demo-order');
``` ```
### Company History ### Company History
@@ -259,7 +259,7 @@ const HistoryDemo = () => {
return Timeline({ items: milestones }); return Timeline({ items: milestones });
}; };
Mount(HistoryDemo, '#demo-history'); mount(HistoryDemo, '#demo-history');
``` ```
### All Variants ### All Variants
@@ -290,5 +290,5 @@ const VariantsDemo = () => {
Timeline({ items: sampleItems, compact: true }) Timeline({ items: sampleItems, compact: true })
]); ]);
}; };
Mount(VariantsDemo, '#demo-variants'); mount(VariantsDemo, '#demo-variants');
``` ```

16
docs/components/toast.md
View File

@@ -44,7 +44,7 @@ const BasicDemo = () => {
}, 'Error Toast') }, 'Error Toast')
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### Different Durations ### Different Durations
@@ -77,7 +77,7 @@ const DurationDemo = () => {
}, '8 Seconds') }, '8 Seconds')
]); ]);
}; };
Mount(DurationDemo, '#demo-duration'); mount(DurationDemo, '#demo-duration');
``` ```
### Interactive Toast ### Interactive Toast
@@ -115,7 +115,7 @@ const InteractiveDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`) Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`)
]); ]);
}; };
Mount(InteractiveDemo, '#demo-interactive'); mount(InteractiveDemo, '#demo-interactive');
``` ```
### Form Validation Toast ### Form Validation Toast
@@ -174,7 +174,7 @@ const FormToastDemo = () => {
}, 'Login') }, 'Login')
]); ]);
}; };
Mount(FormToastDemo, '#demo-form'); mount(FormToastDemo, '#demo-form');
``` ```
### Success Feedback ### Success Feedback
@@ -227,7 +227,7 @@ const FeedbackDemo = () => {
)) ))
]); ]);
}; };
Mount(FeedbackDemo, '#demo-feedback'); mount(FeedbackDemo, '#demo-feedback');
``` ```
### Error Handling ### Error Handling
@@ -274,7 +274,7 @@ const ErrorDemo = () => {
}, 'Timeout') }, 'Timeout')
]); ]);
}; };
Mount(ErrorDemo, '#demo-error'); mount(ErrorDemo, '#demo-error');
``` ```
### Custom Messages ### Custom Messages
@@ -311,7 +311,7 @@ const CustomDemo = () => {
}, 'Security Alert') }, 'Security Alert')
]); ]);
}; };
Mount(CustomDemo, '#demo-custom'); mount(CustomDemo, '#demo-custom');
``` ```
### Multiple Toasts ### Multiple Toasts
@@ -339,5 +339,5 @@ const MultipleDemo = () => {
}, 'Show Multiple Toasts') }, 'Show Multiple Toasts')
]); ]);
}; };
Mount(MultipleDemo, '#demo-multiple'); mount(MultipleDemo, '#demo-multiple');
``` ```

16
docs/components/tooltip.md
View File

@@ -58,7 +58,7 @@ const BasicDemo = () => {
]) ])
]); ]);
}; };
Mount(BasicDemo, '#demo-basic'); mount(BasicDemo, '#demo-basic');
``` ```
### Tooltip Positions ### Tooltip Positions
@@ -87,7 +87,7 @@ const PositionsDemo = () => {
]) ])
]); ]);
}; };
Mount(PositionsDemo, '#demo-positions'); mount(PositionsDemo, '#demo-positions');
``` ```
### Tooltip with Icons ### Tooltip with Icons
@@ -116,7 +116,7 @@ const IconsDemo = () => {
]) ])
]); ]);
}; };
Mount(IconsDemo, '#demo-icons'); mount(IconsDemo, '#demo-icons');
``` ```
### Form Field Tooltips ### Form Field Tooltips
@@ -159,7 +159,7 @@ const FormDemo = () => {
]) ])
]); ]);
}; };
Mount(FormDemo, '#demo-form'); mount(FormDemo, '#demo-form');
``` ```
### Interactive Tooltip ### Interactive Tooltip
@@ -201,7 +201,7 @@ const InteractiveDemo = () => {
]) ])
]); ]);
}; };
Mount(InteractiveDemo, '#demo-interactive'); mount(InteractiveDemo, '#demo-interactive');
``` ```
### Rich Tooltip Content ### Rich Tooltip Content
@@ -240,7 +240,7 @@ const RichDemo = () => {
]) ])
]); ]);
}; };
Mount(RichDemo, '#demo-rich'); mount(RichDemo, '#demo-rich');
``` ```
### Color Variants ### Color Variants
@@ -278,7 +278,7 @@ const ColorsDemo = () => {
]) ])
]); ]);
}; };
Mount(ColorsDemo, '#demo-colors'); mount(ColorsDemo, '#demo-colors');
``` ```
### All Tooltip Positions ### All Tooltip Positions
@@ -315,5 +315,5 @@ const AllPositionsDemo = () => {
]) ])
]); ]);
}; };
Mount(AllPositionsDemo, '#demo-all-positions'); mount(AllPositionsDemo, '#demo-all-positions');
``` ```

30
docs/install.md
View File

@@ -23,15 +23,15 @@ npm install sigpro-ui
```javascript ```javascript
// Import everything from sigpro-ui (includes sigpro core) // Import everything from sigpro-ui (includes sigpro core)
import { $, Mount, Button, Alert, Input, tt } from "sigpro-ui"; import { $, mount, Button, Alert, Input, tt } from "sigpro-ui";
import "sigpro-ui/css"; import "sigpro-ui/css";
// Create your app // Create your app
const App = () => { const App = () => {
const count = $(0); const count = $(0);
return Tag('div', { class: 'p-8 max-w-md mx-auto' }, [ return h('div', { class: 'p-8 max-w-md mx-auto' }, [
Tag('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'), h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
Input({ Input({
placeholder: 'Enter your name...' placeholder: 'Enter your name...'
@@ -49,8 +49,8 @@ const App = () => {
]); ]);
}; };
// Mount your app // mount your app
Mount(App, "#app"); mount(App, "#app");
``` ```
### CDN Usage (no build step) ### CDN Usage (no build step)
@@ -77,14 +77,14 @@ Simply add the script tag and start using SigProUI:
// All functions are available directly in window // All functions are available directly in window
// No need to import anything! // No need to import anything!
const { $, Mount, Button, Input, Alert } = window; const { $, mount, Button, Input, Alert } = window;
const App = () => { const App = () => {
const name = $(''); const name = $('');
const count = $(0); const count = $(0);
return Tag('div', { class: 'max-w-md mx-auto p-4' }, [ return h('div', { class: 'max-w-md mx-auto p-4' }, [
Tag('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'), h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
Input({ Input({
value: name, value: name,
@@ -103,7 +103,7 @@ Simply add the script tag and start using SigProUI:
]); ]);
}; };
Mount(App, '#app'); mount(App, '#app');
</script> </script>
</body> </body>
</html> </html>
@@ -115,12 +115,12 @@ When you install SigProUI, you get:
### SigPro Core Functions ### SigPro Core Functions
- `$()` - Reactive signals - `$()` - Reactive signals
- `Watch()` - Watch reactive dependencies - `watch()` - watch reactive dependencies
- `Tag()` - Create HTML elements with reactivity - `h()` - Create HTML elements with reactivity
- `If()` - Conditional rendering - `when()` - Conditional rendering
- `For()` - List rendering - `each()` - List rendering
- `Router()` - Hash-based routing - `router()` - Hash-based routing
- `Mount()` - Mount components to DOM - `mount()` - mount components to DOM
>For more information about SigPro Core visit official Docs [SigPro Docs](https://natxocc.github.io/sigpro/#/) >For more information about SigPro Core visit official Docs [SigPro Docs](https://natxocc.github.io/sigpro/#/)

4
docs/quick.md
View File

@@ -184,14 +184,14 @@ Input({
const userId = $("123"); const userId = $("123");
const userData = $(null); const userData = $(null);
Watch(userId, async (id) => { watch(userId, async (id) => {
loading(true); loading(true);
userData(await fetch(`/api/user/${id}`).then(r => r.json())); userData(await fetch(`/api/user/${id}`).then(r => r.json()));
loading(false); loading(false);
}); });
// In template // In template
If(() => userData(), () => Alert({ type: "success" }, userData()?.name)) when(() => userData(), () => Alert({ type: "success" }, userData()?.name))
``` ```
### Modal with Confirm Action ### Modal with Confirm Action

4
docs/sigpro-ui.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/sigpro-ui.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
package.json
View File

@@ -8,12 +8,12 @@
"main": "./index.js", "main": "./index.js",
"module": "./index.js", "module": "./index.js",
"devDependencies": { "devDependencies": {
"@iconify/json": "^2.2.463", "@iconify/json": "^2.2.465",
"@iconify/tailwind4": "^1.2.3", "@iconify/tailwind4": "^1.2.3",
"@tailwindcss/cli": "^4.2.2", "@tailwindcss/cli": "^4.2.4",
"daisyui": "^5.5.19", "daisyui": "^5.5.19",
"sigpro": "git+http://gitea:3000/natxocc/sigpro", "sigpro": "git+http://gitea:3000/natxocc/sigpro",
"tailwindcss": "^4.2.2" "tailwindcss": "^4.2.4"
}, },
"exports": { "exports": {
".": { ".": {
@@ -43,6 +43,7 @@
"registry": "https://git.natxocc.com/api/packages/natxocc/npm/" "registry": "https://git.natxocc.com/api/packages/natxocc/npm/"
}, },
"scripts": { "scripts": {
"del": "bun pm cache rm && rm -f bun.lockb $$ rm -f bun.lock",
"clean": "rm -rf ./dist ./css/*.css ./docs/*.js ./docs/*.css", "clean": "rm -rf ./dist ./css/*.css ./docs/*.js ./docs/*.css",
"build:css": "tailwindcss -i ./sigpro.css -o ./dist/sigpro-ui.css --content './src/**/*.js' && du -h ./dist/sigpro-ui.css", "build:css": "tailwindcss -i ./sigpro.css -o ./dist/sigpro-ui.css --content './src/**/*.js' && du -h ./dist/sigpro-ui.css",
"build:cssmin": "tailwindcss -i ./sigpro.css -o ./dist/sigpro-ui.min.css --content './src/**/*.js' --minify && du -h ./dist/sigpro-ui.css", "build:cssmin": "tailwindcss -i ./sigpro.css -o ./dist/sigpro-ui.min.css --content './src/**/*.js' --minify && du -h ./dist/sigpro-ui.css",

10
src/components/Accordion.js
View File

@@ -1,5 +1,5 @@
// components/Accordion.js // components/Accordion.js
import { Tag } from "sigpro"; import { h } from "sigpro";
import { ui, val } from "../utils.js"; import { ui, val } from "../utils.js";
/** /**
@@ -14,16 +14,16 @@ import { ui, val } from "../utils.js";
export const Accordion = (props, children) => { export const Accordion = (props, children) => {
const { class: className, title, name, open, ...rest } = props; const { class: className, title, name, open, ...rest } = props;
return Tag("div", { return h("div", {
...rest, ...rest,
class: ui('collapse collapse-arrow bg-base-200 mb-2', className), class: ui('collapse collapse-arrow bg-base-200 mb-2', className),
}, [ }, [
Tag("input", { h("input", {
type: name ? "radio" : "checkbox", type: name ? "radio" : "checkbox",
name: name, name: name,
checked: val(open), checked: val(open),
}), }),
Tag("div", { class: "collapse-title text-xl font-medium" }, title), h("div", { class: "collapse-title text-xl font-medium" }, title),
Tag("div", { class: "collapse-content" }, children), h("div", { class: "collapse-content" }, children),
]); ]);
}; };

10
src/components/Alert.js
View File

@@ -1,5 +1,5 @@
// components/Alert.js // components/Alert.js
import { Tag } from "sigpro"; import { h } from "sigpro";
import { ui, getIcon } from "../utils.js"; import { ui, getIcon } from "../utils.js";
/** /**
@@ -26,16 +26,16 @@ export const Alert = (props, children) => {
const content = children || props.message; const content = children || props.message;
return Tag("div", { return h("div", {
...rest, ...rest,
role: "alert", role: "alert",
class: ui('alert', allClasses), class: ui('alert', allClasses),
}, () => [ }, () => [
getIcon(iconMap[type]), getIcon(iconMap[type]),
Tag("div", { class: "flex-1" }, [ h("div", { class: "flex-1" }, [
Tag("span", {}, [typeof content === "function" ? content() : content]) h("span", {}, [typeof content === "function" ? content() : content])
]), ]),
actions ? Tag("div", { class: "flex-none" }, [ actions ? h("div", { class: "flex-none" }, [
typeof actions === "function" ? actions() : actions typeof actions === "function" ? actions() : actions
]) : null, ]) : null,
].filter(Boolean)); ].filter(Boolean));

20
src/components/Autocomplete.js
View File

@@ -1,5 +1,5 @@
// components/Autocomplete.js // components/Autocomplete.js
import { $, Tag, For } from "sigpro"; import { $, h, each } from "sigpro";
import { val } from "../utils.js"; import { val } from "../utils.js";
import { Input } from "./Input.js"; import { Input } from "./Input.js";
@@ -22,10 +22,10 @@ export const Autocomplete = (props) => {
const cursor = $(-1); const cursor = $(-1);
// FIX CRÍTICO: En lugar de una computed automática, usamos una señal manual // FIX CRÍTICO: En lugar de una computed automática, usamos una señal manual
// y un Watch para garantizar que la lista se actualice SÍNCRONAMENTE. // y un watch para garantizar que la lista se actualice SÍNCRONAMENTE.
const list = $([]); const list = $([]);
Watch(() => { watch(() => {
const q = String(query()).toLowerCase(); const q = String(query()).toLowerCase();
const data = val(items) || []; const data = val(items) || [];
const filtered = q const filtered = q
@@ -64,7 +64,7 @@ export const Autocomplete = (props) => {
} }
}; };
return Tag("div", { class: 'relative w-full' }, [ return h("div", { class: 'relative w-full' }, [
Input({ Input({
label, label,
class: className, class: className,
@@ -75,14 +75,14 @@ export const Autocomplete = (props) => {
onkeydown: nav, onkeydown: nav,
oninput: (e) => { oninput: (e) => {
const v = e.target.value; const v = e.target.value;
query(v); // Esto dispara el Watch de arriba y actualiza 'list' query(v); // Esto dispara el watch de arriba y actualiza 'list'
if (typeof value === "function") value(v); if (typeof value === "function") value(v);
isOpen(true); isOpen(true);
cursor(-1); cursor(-1);
}, },
...rest, ...rest,
}), }),
Tag( h(
"ul", "ul",
{ {
class: "absolute dropdown-menu left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50", class: "absolute dropdown-menu left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",
@@ -90,11 +90,11 @@ export const Autocomplete = (props) => {
style: () => (isOpen() && list().length ? "display:block" : "display:none"), style: () => (isOpen() && list().length ? "display:block" : "display:none"),
}, },
[ [
For( each(
list, list,
(opt, i) => (opt, i) =>
Tag("li", {}, [ h("li", {}, [
Tag( h(
"a", "a",
{ {
class: () => `block w-full ${cursor() === i ? "active bg-primary text-primary-content" : ""}`, class: () => `block w-full ${cursor() === i ? "active bg-primary text-primary-content" : ""}`,
@@ -107,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" }, "nodata")), () => (list().length ? null : h("li", { class: "p-2 text-center opacity-50" }, "nodata")),
], ],
), ),
]); ]);

4
src/components/Badge.js
View File

@@ -1,5 +1,5 @@
// components/Badge.js // components/Badge.js
import { Tag } from "sigpro"; import { h } from "sigpro";
import { ui } from "../utils.js"; import { ui } from "../utils.js";
/** /**
@@ -14,7 +14,7 @@ import { ui } from "../utils.js";
export const Badge = (props, children) => { export const Badge = (props, children) => {
const { class: className, ...rest } = props; const { class: className, ...rest } = props;
return Tag("span", { return h("span", {
...rest, ...rest,
class: ui('badge', className), class: ui('badge', className),
}, children); }, children);

4
src/components/Button.js
View File

@@ -1,5 +1,5 @@
// components/Button.js // components/Button.js
import { Tag } from "sigpro"; import { h } from "sigpro";
import { ui, val, getIcon } from "../utils.js"; import { ui, val, getIcon } from "../utils.js";
/** /**
@@ -16,7 +16,7 @@ import { ui, val, getIcon } from "../utils.js";
export const Button = (props, children) => { export const Button = (props, children) => {
const { class: className, ...rest } = props; const { class: className, ...rest } = props;
return Tag("button", { return h("button", {
...rest, ...rest,
class: ui('btn', className), class: ui('btn', className),
disabled: () => val(props.disabled), disabled: () => val(props.disabled),

40
src/components/Calendar.js
View File

@@ -1,4 +1,4 @@
import { $, Tag, Watch } from "sigpro"; import { $, h, watch } from "sigpro";
import { val, getIcon } from "../utils.js"; import { val, getIcon } from "../utils.js";
export const Calendar = (props) => { export const Calendar = (props) => {
@@ -66,9 +66,9 @@ export const Calendar = (props) => {
}; };
const HourSlider = ({ value: hVal, onChange: onHourChange }) => { const HourSlider = ({ value: hVal, onChange: onHourChange }) => {
return Tag("div", { class: "flex-1" }, [ return h("div", { class: "flex-1" }, [
Tag("div", { class: "flex gap-2 items-center" }, [ h("div", { class: "flex gap-2 items-center" }, [
Tag("input", { h("input", {
type: "range", type: "range",
min: 0, min: 0,
max: 23, max: 23,
@@ -79,38 +79,38 @@ export const Calendar = (props) => {
onHourChange(newHour); onHourChange(newHour);
}, },
}), }),
Tag("span", { class: "text-sm font-mono min-w-[48px] text-center" }, h("span", { class: "text-sm font-mono min-w-[48px] text-center" },
() => String(val(hVal)).padStart(2, "0") + ":00" () => String(val(hVal)).padStart(2, "0") + ":00"
), ),
]), ]),
]); ]);
}; };
return Tag("div", { class: `p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none ${className}` }, [ return h("div", { class: `p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none ${className}` }, [
Tag("div", { class: "flex justify-between items-center mb-4 gap-1" }, [ h("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
Tag("div", { class: "flex gap-0.5" }, [ h("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) },
getIcon("icon-[lucide--chevrons-left]") getIcon("icon-[lucide--chevrons-left]")
), ),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
getIcon("icon-[lucide--chevron-left]") getIcon("icon-[lucide--chevron-left]")
), ),
]), ]),
Tag("span", { class: "font-bold uppercase flex-1 text-center" }, [ h("span", { class: "font-bold uppercase flex-1 text-center" }, [
() => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }), () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }),
]), ]),
Tag("div", { class: "flex gap-0.5" }, [ h("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) },
getIcon("icon-[lucide--chevron-right]") getIcon("icon-[lucide--chevron-right]")
), ),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
getIcon("icon-[lucide--chevrons-right]") getIcon("icon-[lucide--chevrons-right]")
), ),
]), ]),
]), ]),
Tag("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [ h("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
...["L", "M", "X", "J", "V", "S", "D"].map((d) => Tag("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)), ...["L", "M", "X", "J", "V", "S", "D"].map((d) => h("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
() => { () => {
const d = internalDate(); const d = internalDate();
const year = d.getFullYear(); const year = d.getFullYear();
@@ -120,14 +120,14 @@ export const Calendar = (props) => {
const daysInMonth = new Date(year, month + 1, 0).getDate(); const daysInMonth = new Date(year, month + 1, 0).getDate();
const nodes = []; const nodes = [];
for (let i = 0; i < offset; i++) nodes.push(Tag("div")); for (let i = 0; i < offset; i++) nodes.push(h("div"));
for (let i = 1; i <= daysInMonth; i++) { for (let i = 1; i <= daysInMonth; i++) {
const date = new Date(year, month, i); const date = new Date(year, month, i);
const dStr = formatDate(date); const dStr = formatDate(date);
nodes.push( nodes.push(
Tag("button", { h("button", {
type: "button", type: "button",
class: () => { class: () => {
const v = val(value); const v = val(value);
@@ -160,9 +160,9 @@ export const Calendar = (props) => {
}, },
]), ]),
hour ? Tag("div", { class: "mt-3 pt-2 border-t border-base-300" }, [ hour ? h("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
isRangeMode() isRangeMode()
? Tag("div", { class: "flex gap-4" }, [ ? h("div", { class: "flex gap-4" }, [
HourSlider({ HourSlider({
value: startHour, value: startHour,
onChange: (newHour) => startHour(newHour), onChange: (newHour) => startHour(newHour),

8
src/components/Checkbox.js
View File

@@ -1,5 +1,5 @@
// components/Checkbox.js // components/Checkbox.js
import { Tag } from "sigpro"; import { h } from "sigpro";
import { val, ui } from "../utils.js"; import { val, ui } from "../utils.js";
/** /**
@@ -16,15 +16,15 @@ import { val, ui } from "../utils.js";
export const Checkbox = (props) => { export const Checkbox = (props) => {
const { class: className, value, toggle, label, ...rest } = props; const { class: className, value, toggle, label, ...rest } = props;
const checkEl = Tag("input", { const checkEl = h("input", {
...rest, ...rest,
type: "checkbox", type: "checkbox",
class: () => ui(val(toggle) ? "toggle" : "checkbox", className), class: () => ui(val(toggle) ? "toggle" : "checkbox", className),
checked: value checked: value
}); });
return Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [ return h("label", { class: "label cursor-pointer justify-start gap-3" }, [
checkEl, checkEl,
label ? Tag("span", { class: "label-text" }, label) : null, label ? h("span", { class: "label-text" }, label) : null,
]); ]);
}; };

22
src/components/Colorpicker.js
View File

@@ -1,5 +1,5 @@
// components/Colorpicker.js // components/Colorpicker.js
import { $, Tag, If } from "sigpro"; import { $, h, when} from "sigpro";
import { val, ui } from "../utils.js"; import { val, ui } from "../utils.js";
/** /**
@@ -30,8 +30,8 @@ export const Colorpicker = (props) => {
const getColor = () => val(value) || "#000000"; const getColor = () => val(value) || "#000000";
return Tag("div", { class: ui('relative w-fit', className) }, [ return h("div", { class: ui('relative w-fit', className) }, [
Tag( h(
"button", "button",
{ {
type: "button", type: "button",
@@ -43,27 +43,27 @@ export const Colorpicker = (props) => {
...rest, ...rest,
}, },
[ [
Tag("div", { h("div", {
class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0", class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
style: () => `background-color: ${getColor()}`, style: () => `background-color: ${getColor()}`,
}), }),
label ? Tag("span", { class: "opacity-80" }, label) : null, label ? h("span", { class: "opacity-80" }, label) : null,
], ],
), ),
If(isOpen, () => when(isOpen, () =>
Tag( h(
"div", "div",
{ {
class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none", class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",
onclick: (e) => e.stopPropagation(), onclick: (e) => e.stopPropagation(),
}, },
[ [
Tag( h(
"div", "div",
{ class: "grid grid-cols-8 gap-1" }, { class: "grid grid-cols-8 gap-1" },
palette.map((c) => palette.map((c) =>
Tag("button", { h("button", {
type: "button", type: "button",
style: `background-color: ${c}`, style: `background-color: ${c}`,
class: () => { class: () => {
@@ -82,8 +82,8 @@ export const Colorpicker = (props) => {
), ),
), ),
If(isOpen, () => when(isOpen, () =>
Tag("div", { h("div", {
class: "fixed inset-0 z-[100]", class: "fixed inset-0 z-[100]",
onclick: () => isOpen(false), onclick: () => isOpen(false),
}), }),

12
src/components/Datepicker.js
View File

@@ -1,4 +1,4 @@
import { $, Tag, If, Watch } from "sigpro"; import { $, h, when, watch } from "sigpro";
import { val, ui, getIcon } from "../utils.js"; import { val, ui, getIcon } from "../utils.js";
import { Input } from "./Input.js"; import { Input } from "./Input.js";
import { Calendar } from "./Calendar.js"; import { Calendar } from "./Calendar.js";
@@ -12,7 +12,7 @@ export const Datepicker = (props) => {
// Formatear el valor para mostrarlo en el input // Formatear el valor para mostrarlo en el input
const displayValue = $(""); const displayValue = $("");
Watch(() => { watch(() => {
const v = val(value); const v = val(value);
if (!v) { if (!v) {
displayValue(""); displayValue("");
@@ -42,7 +42,7 @@ export const Datepicker = (props) => {
} }
}; };
return Tag("div", { class: ui('relative w-full', className) }, [ return h("div", { class: ui('relative w-full', className) }, [
Input({ Input({
label, label,
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."), placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
@@ -56,8 +56,8 @@ export const Datepicker = (props) => {
...rest, ...rest,
}), }),
If(isOpen, () => when(isOpen, () =>
Tag("div", { h("div", {
class: "absolute left-0 mt-2 z-[100]", class: "absolute left-0 mt-2 z-[100]",
onclick: (e) => e.stopPropagation(), onclick: (e) => e.stopPropagation(),
}, [ }, [
@@ -70,6 +70,6 @@ export const Datepicker = (props) => {
]) ])
), ),
If(isOpen, () => Tag("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })), when(isOpen, () => h("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
]); ]);
}; };

14
src/components/Drawer.js
View File

@@ -1,5 +1,5 @@
// components/Drawer.js // components/Drawer.js
import { Tag } from "sigpro"; import { h } from "sigpro";
import { ui } from "../utils.js"; import { ui } from "../utils.js";
/** /**
@@ -14,11 +14,11 @@ export const Drawer = (props, children) => {
const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`; const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
return Tag("div", { return h("div", {
...rest, ...rest,
class: ui('drawer', className), class: ui('drawer', className),
}, [ }, [
Tag("input", { h("input", {
id: drawerId, id: drawerId,
type: "checkbox", type: "checkbox",
class: "drawer-toggle", class: "drawer-toggle",
@@ -27,18 +27,18 @@ export const Drawer = (props, children) => {
if (typeof open === "function") open(e.target.checked); if (typeof open === "function") open(e.target.checked);
} }
}), }),
Tag("div", { class: "drawer-content" }, [ h("div", { class: "drawer-content" }, [
typeof content === "function" ? content() : content typeof content === "function" ? content() : content
]), ]),
Tag("div", { class: "drawer-side" }, [ h("div", { class: "drawer-side" }, [
Tag("label", { h("label", {
for: drawerId, for: drawerId,
class: "drawer-overlay", class: "drawer-overlay",
onclick: () => { onclick: () => {
if (typeof open === "function") open(false); if (typeof open === "function") open(false);
} }
}), }),
Tag("div", { class: "min-h-full bg-base-200 w-80" }, [ h("div", { class: "min-h-full bg-base-200 w-80" }, [
typeof side === "function" ? side() : side typeof side === "function" ? side() : side
]) ])
]) ])

16
src/components/Dropdown.js
View File

@@ -1,5 +1,5 @@
// components/Dropdown.js // components/Dropdown.js
import { Tag, For, Watch } from "sigpro"; import { h, each, watch } from "sigpro";
import { ui } from "../utils.js"; import { ui } from "../utils.js";
/** /**
@@ -28,11 +28,11 @@ if (typeof window !== 'undefined' && !window.__dropdownHandlerRegistered) {
export const Dropdown = (props) => { export const Dropdown = (props) => {
const { class: className, label, icon, items, ...rest } = props; const { class: className, label, icon, items, ...rest } = props;
return Tag("details", { return h("details", {
...rest, ...rest,
class: ui('dropdown', className), class: ui('dropdown', className),
}, [ }, [
Tag("summary", { h("summary", {
class: "btn m-1 flex items-center gap-2 list-none cursor-pointer", class: "btn m-1 flex items-center gap-2 list-none cursor-pointer",
style: "display: inline-flex;", style: "display: inline-flex;",
onclick: (e) => { onclick: (e) => {
@@ -48,15 +48,15 @@ export const Dropdown = (props) => {
() => icon ? (typeof icon === "function" ? icon() : icon) : null, () => icon ? (typeof icon === "function" ? icon() : icon) : null,
() => label ? (typeof label === "function" ? label() : label) : null () => label ? (typeof label === "function" ? label() : label) : null
]), ]),
Tag("ul", { h("ul", {
tabindex: "-1", tabindex: "-1",
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300" class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"
}, [ }, [
() => { () => {
const currentItems = typeof items === "function" ? items() : (items || []); const currentItems = typeof items === "function" ? items() : (items || []);
return currentItems.map(item => return currentItems.map(item =>
Tag("li", {}, [ h("li", {}, [
Tag("a", { h("a", {
class: item.class || "", class: item.class || "",
onclick: (e) => { onclick: (e) => {
if (item.onclick) item.onclick(e); if (item.onclick) item.onclick(e);
@@ -67,8 +67,8 @@ export const Dropdown = (props) => {
} }
} }
}, [ }, [
item.icon ? Tag("span", {}, item.icon) : null, item.icon ? h("span", {}, item.icon) : null,
Tag("span", {}, item.label) h("span", {}, item.label)
]) ])
]) ])
); );

12
src/components/Fab.js
View File

@@ -1,5 +1,5 @@
// components/Fab.js // components/Fab.js
import { Tag } from "sigpro"; import { h } from "sigpro";
import { val, ui, getIcon } from "../utils.js"; import { val, ui, getIcon } from "../utils.js";
/** /**
@@ -16,14 +16,14 @@ import { val, ui, getIcon } from "../utils.js";
export const Fab = (props) => { export const Fab = (props) => {
const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props; const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
return Tag( return h(
"div", "div",
{ {
...rest, ...rest,
class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className), class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className),
}, },
[ [
Tag( h(
"div", "div",
{ {
tabindex: 0, tabindex: 0,
@@ -37,9 +37,9 @@ export const Fab = (props) => {
), ),
...val(actions).map((act) => ...val(actions).map((act) =>
Tag("div", { class: "flex items-center gap-3 transition-all duration-300" }, [ h("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
act.label ? Tag("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null, act.label ? h("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
Tag( h(
"button", "button",
{ {
type: "button", type: "button",

6
src/components/Fetch.js
View File

@@ -1,4 +1,4 @@
import { $$, Tag, isFunc } from "sigpro"; import { $$, h, isFunc } from "sigpro";
const _cache = new Map(); const _cache = new Map();
@@ -42,10 +42,10 @@ export const Request = async (key, url, opts = {}) => {
export const Response = ({ name, loading, error }, { children }) => { export const Response = ({ name, loading, error }, { children }) => {
const store = getStore(name); const store = getStore(name);
return Tag("div", { style: "display:contents" }, [ return h("div", { style: "display:contents" }, [
() => { () => {
if (store.loading) return loading || "Cargando..."; if (store.loading) return loading || "Cargando...";
if (store.error) return isFunc(error) ? error(store.error) : Tag("p", {}, store.error); if (store.error) return isFunc(error) ? error(store.error) : h("p", {}, store.error);
if (store.data) return isFunc(children[0]) ? children[0](store.data) : children; if (store.data) return isFunc(children[0]) ? children[0](store.data) : children;
return null; return null;
} }

Some files were not shown because too many files have changed in this diff Show More