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

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

Browse Source
This commit is contained in:
natxocc
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
Readme.md
+10 -10
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:
```javascript
import { $, Mount, Button, Modal, Input, Alert } from "sigpro-ui";
import { $, mount, Button, Modal, Input, Alert } from "sigpro-ui";
import "sigpro-ui/css";
const App = () => {
@@ -63,7 +63,7 @@ const App = () => {
);
};
Mount(App, "#app");
mount(App, "#app");
```
### 2. Global Approach (Zero-Import)
@@ -85,7 +85,7 @@ const myApp = () => Table({ items: [], columns: [] });
## Basic Example
```javascript
import { $, Mount, Button, Toast, Div, H1 } from "sigpro-ui";
import { $, mount, Button, Toast, Div, H1 } from "sigpro-ui";
import "sigpro-ui/css";
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)
- `$()` - Reactive signals
- `Watch()` - Watch reactive dependencies
- `Tag()` - Create HTML elements with reactivity
- `If()` - Conditional rendering
- `For()` - List rendering
- `Router()` - Hash-based routing
- `Mount()` - Mount components to DOM
- `watch()` - watch reactive dependencies
- `h()` - Create HTML elements with reactivity
- `when()` - Conditional rendering
- `each()` - List rendering
- `router()` - Hash-based routing
- `mount()` - mount components to DOM
Explore [SigPro Core Docs](https://natxocc.github.io/sigpro/#/) for more information.
components/accordion.js
+10 -10
View File
@@ -1,22 +1,22 @@
// components/Accordion.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Accordion = (props) => {
const name = props.name || `accordion-${Math.random().toString(36).slice(2, 9)}`;
if (props.items && Array.isArray(props.items)) {
return Tag("div", { class: `space-y-2 ${props.class ?? ''}` },
props.items.map(item => Tag("div", { class: `collapse ${item.class ?? ''}` }, [
Tag("input", { type: "radio", name, checked: item.open }),
Tag("div", { class: "collapse-title text-xl font-medium" }, item.title),
Tag("div", { class: "collapse-content" }, item.children)
return h("div", { class: `space-y-2 ${props.class ?? ''}` },
props.items.map(item => h("div", { class: `collapse ${item.class ?? ''}` }, [
h("input", { type: "radio", name, checked: item.open }),
h("div", { class: "collapse-title text-xl font-medium" }, item.title),
h("div", { class: "collapse-content" }, item.children)
]))
);
}
return Tag("div", { class: `collapse ${props.class ?? ''}` }, [
Tag("input", { type: "radio", name, checked: props.open }),
Tag("div", { class: "collapse-title text-xl font-medium" }, props.title),
Tag("div", { class: "collapse-content" }, props.children)
return h("div", { class: `collapse ${props.class ?? ''}` }, [
h("input", { type: "radio", name, checked: props.open }),
h("div", { class: "collapse-title text-xl font-medium" }, props.title),
h("div", { class: "collapse-content" }, props.children)
]);
};
components/alert.js
+2 -2
View File
@@ -1,7 +1,7 @@
// components/Alert.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Alert = (props, children) => {
children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `alert ${props.class ?? ''}` }, children);
return h("div", { ...props, class: `alert ${props.class ?? ''}` }, children);
};
components/autocomplete.js
+12 -12
View File
@@ -1,5 +1,5 @@
// components/Autocomplete.js
import { $, Tag, For, Watch } from "sigpro";
import { $, h, each, watch } from "sigpro";
export const Autocomplete = (props) => {
const query = $("");
@@ -7,12 +7,12 @@ export const Autocomplete = (props) => {
const cursor = $(-1);
const filteredItems = $([]);
Watch(() => {
watch(() => {
const v = typeof props.value === "function" ? props.value() : props.value;
return v || "";
}, (newVal) => setTimeout(() => query(newVal), 0));
Watch(() => {
watch(() => {
const q = String(query()).toLowerCase();
const allItems = typeof props.items === "function" ? props.items() : props.items;
const filtered = q
@@ -50,10 +50,10 @@ export const Autocomplete = (props) => {
}
};
return Tag("div", { class: `relative w-full ${props.class ?? ''}` }, [
Tag("label", { class: "input input-bordered w-full" }, [
Tag("span", { class: "icon-[lucide--search]" }),
Tag("input", {
return h("div", { class: `relative w-full ${props.class ?? ''}` }, [
h("label", { class: "input input-bordered w-full" }, [
h("span", { class: "icon-[lucide--search]" }),
h("input", {
...props,
type: "text",
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",
style: () => `display: ${isOpen() && filteredItems().length ? "block" : "none"};`
}, [
For(filteredItems, (item, idx) =>
Tag("li", {}, [
Tag("a", {
each(filteredItems, (item, idx) =>
h("li", {}, [
h("a", {
class: () => `block w-full ${cursor() === idx ? "active bg-primary text-primary-content" : ""}`,
onclick: () => pick(item),
onmouseenter: () => cursor(idx)
@@ -86,7 +86,7 @@ export const Autocomplete = (props) => {
]),
(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
])
]);
};
components/badge.js
+2 -2
View File
@@ -1,7 +1,7 @@
// components/Badge.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Badge = (props, children) => {
children === undefined && (children = props, props = {});
return Tag("span", { ...props, class: `badge ${props.class ?? ''}` }, children);
return h("span", { ...props, class: `badge ${props.class ?? ''}` }, children);
};
components/button.js
+2 -2
View File
@@ -1,6 +1,6 @@
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Button = (props, children) => {
children === undefined && (children = props, props = {});
return Tag("button", { ...props, class: `btn ${props.class ?? ''}` }, children);
return h("button", { ...props, class: `btn ${props.class ?? ''}` }, children);
};
components/calendar.js
+24 -24
View File
@@ -1,5 +1,5 @@
// components/Calendar.js
import { $, Tag } from "sigpro";
import { $, h } from "sigpro";
export const Calendar = (props) => {
const internalDate = $(new Date());
@@ -69,9 +69,9 @@ export const Calendar = (props) => {
};
const HourSlider = ({ value: hVal, onChange: onHourChange }) => {
return Tag("div", { class: "flex-1" }, [
Tag("div", { class: "flex gap-2 items-center" }, [
Tag("input", {
return h("div", { class: "flex-1" }, [
h("div", { class: "flex gap-2 items-center" }, [
h("input", {
type: "range",
min: 0,
max: 23,
@@ -79,38 +79,38 @@ export const Calendar = (props) => {
class: "range range-xs flex-1",
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"
)
])
]);
};
return Tag("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" }, [
Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) },
Tag("span", { class: "icon-[lucide--chevrons-left]" })
return h("div", { class: `p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none ${props.class ?? ''}`.trim() }, [
h("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
h("div", { class: "flex gap-0.5" }, [
h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) },
h("span", { class: "icon-[lucide--chevrons-left]" })
),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
Tag("span", { class: "icon-[lucide--chevron-left]" })
h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
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" })
]),
Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) },
Tag("span", { class: "icon-[lucide--chevron-right]" })
h("div", { class: "flex gap-0.5" }, [
h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) },
h("span", { class: "icon-[lucide--chevron-right]" })
),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
Tag("span", { class: "icon-[lucide--chevrons-right]" })
h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
h("span", { class: "icon-[lucide--chevrons-right]" })
)
])
]),
Tag("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)),
h("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
...["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 year = d.getFullYear();
@@ -120,14 +120,14 @@ export const Calendar = (props) => {
const daysInMonth = new Date(year, month + 1, 0).getDate();
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++) {
const date = new Date(year, month, i);
const dStr = formatDate(date);
cells.push(
Tag("button", {
h("button", {
type: "button",
class: () => {
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()
? Tag("div", { class: "flex gap-4" }, [
? h("div", { class: "flex gap-4" }, [
HourSlider({ value: startHour, onChange: (h) => startHour(h) }),
HourSlider({ value: endHour, onChange: (h) => endHour(h) })
])
components/card.js
+5 -5
View File
@@ -1,22 +1,22 @@
// components/Card.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Card = (props, children) => {
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) => {
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) => {
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) => {
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);
};
components/carousel.js
+3 -3
View File
@@ -1,12 +1,12 @@
// components/Carousel.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Carousel = (props, children) => {
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) => {
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);
};
components/chat.js
+8 -8
View File
@@ -1,33 +1,33 @@
// components/Chat.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Chat = (props, children) => {
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) => {
children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `chat-image avatar ${props.class ?? ''}` },
Tag("div", { class: "w-10 rounded-full" },
typeof children === "string" ? Tag("img", { src: children, alt: "avatar" }) : children
return h("div", { ...props, class: `chat-image avatar ${props.class ?? ''}` },
h("div", { class: "w-10 rounded-full" },
typeof children === "string" ? h("img", { src: children, alt: "avatar" }) : children
)
);
};
export const ChatHeader = (props, children) => {
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) => {
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) => {
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) => {
components/checkbox.js
+2 -2
View File
@@ -1,4 +1,4 @@
// 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 ?? ''}` });
components/colorpicker.js
+11 -11
View File
@@ -1,5 +1,5 @@
// components/Colorpicker.js
import { $, Tag, If } from "sigpro";
import { $, h, when} from "sigpro";
export const Colorpicker = (props) => {
const isOpen = $(false);
@@ -20,28 +20,28 @@ export const Colorpicker = (props) => {
return (typeof v === "function" ? v() : v) || "#000000";
};
return Tag("div", { class: `relative w-fit ${props.class ?? ''}` }, [
Tag("button", {
return h("div", { class: `relative w-fit ${props.class ?? ''}` }, [
h("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",
onclick: (e) => { e.stopPropagation(); isOpen(!isOpen()); },
...props
}, [
Tag("div", {
h("div", {
class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
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, () =>
Tag("div", {
when(isOpen, () =>
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",
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 =>
Tag("button", {
h("button", {
type: "button",
style: `background-color: ${c}`,
class: () => {
@@ -58,8 +58,8 @@ export const Colorpicker = (props) => {
])
),
If(isOpen, () =>
Tag("div", {
when(isOpen, () =>
h("div", {
class: "fixed inset-0 z-[100]",
onclick: () => isOpen(false)
})
components/datepicker.js
+10 -10
View File
@@ -1,5 +1,5 @@
// components/Datepicker.js
import { $, Tag, If, Watch } from "sigpro";
import { $, h, when, watch } from "sigpro";
import { Calendar } from "./calendar.js";
export const Datepicker = (props) => {
@@ -11,7 +11,7 @@ export const Datepicker = (props) => {
const displayValue = $("");
Watch(() => {
watch(() => {
const v = typeof props.value === "function" ? props.value() : props.value;
if (!v) {
displayValue("");
@@ -49,10 +49,10 @@ export const Datepicker = (props) => {
isOpen(!isOpen());
};
return Tag("div", { class: `relative w-full ${props.class ?? ''}` }, [
Tag("label", { class: "input input-bordered w-full", onclick: toggleOpen }, [
Tag("span", { class: "icon-[lucide--calendar]" }),
Tag("input", {
return h("div", { class: `relative w-full ${props.class ?? ''}` }, [
h("label", { class: "input input-bordered w-full", onclick: toggleOpen }, [
h("span", { class: "icon-[lucide--calendar]" }),
h("input", {
...props,
type: "text",
class: "grow",
@@ -62,8 +62,8 @@ export const Datepicker = (props) => {
})
]),
If(isOpen, () =>
Tag("div", {
when(isOpen, () =>
h("div", {
class: "absolute left-0 mt-2 z-[100]",
onclick: (e) => e.stopPropagation()
}, [
@@ -76,8 +76,8 @@ 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) })
)
]);
};
components/divider.js
+2 -2
View File
@@ -1,4 +1,4 @@
// 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 ?? ''}` });
components/drawer.js
+8 -8
View File
@@ -1,29 +1,29 @@
// components/Drawer.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Drawer = (props, children) => {
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) => {
const id = props.id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
return Tag("div", { ...props, class: `drawer ${props.class ?? ''}` }, [
Tag("input", {
return h("div", { ...props, class: `drawer ${props.class ?? ''}` }, [
h("input", {
id,
type: "checkbox",
class: "drawer-toggle",
checked: () => (typeof props.open === "function" ? props.open() : props.open),
onchange: (e) => typeof props.open === "function" && props.open(e.target.checked)
}),
Tag("div", { class: "drawer-content" }, props.children),
Tag("div", { class: "drawer-side" }, [
Tag("label", {
h("div", { class: "drawer-content" }, props.children),
h("div", { class: "drawer-side" }, [
h("label", {
for: id,
class: "drawer-overlay",
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
)
])
components/dropdown.js
+2 -2
View File
@@ -1,5 +1,5 @@
// components/Dropdown.js
import { Tag } from "sigpro";
import { h } from "sigpro";
let currentOpen = null;
@@ -13,7 +13,7 @@ if (typeof window !== 'undefined' && !window.__dropdownHandlerRegistered) {
window.__dropdownHandlerRegistered = true;
}
export const Dropdown = (props) => Tag("details", {
export const Dropdown = (props) => h("details", {
...props,
class: `dropdown ${props.class ?? ''}`,
onclick: (e) => {
components/fab.js
+2 -2
View File
@@ -1,7 +1,7 @@
// components/Fab.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Fab = (props, children) => {
children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `fab ${props.class ?? ''}` }, children);
return h("div", { ...props, class: `fab ${props.class ?? ''}` }, children);
};
components/fieldset.js
+3 -3
View File
@@ -1,10 +1,10 @@
// 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,
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
]);
components/fileinput.js
+19 -19
View File
@@ -1,5 +1,5 @@
// components/Fileinput.js
import { $, Tag, If, For } from "sigpro";
import { $, h, when, each } from "sigpro";
export const Fileinput = (props) => {
const selectedFiles = $([]);
@@ -24,19 +24,19 @@ export const Fileinput = (props) => {
props.onselect?.(updated);
};
return Tag("div", { ...props, class: `fieldset w-full p-0 ${props.class ?? ''}` }, [
Tag("label", {
return h("div", { ...props, class: `fieldset w-full p-0 ${props.class ?? ''}` }, [
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"}`,
ondragover: (e) => { e.preventDefault(); isDragging(true); },
ondragleave: () => isDragging(false),
ondrop: (e) => { e.preventDefault(); isDragging(false); handleFiles(e.dataTransfer.files); }
}, [
Tag("div", { class: "flex items-center gap-3 w-full" }, [
Tag("span", { class: "icon-[lucide--upload]" }),
Tag("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("div", { class: "flex items-center gap-3 w-full" }, [
h("span", { class: "icon-[lucide--upload]" }),
h("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
h("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${props.max || 2}MB`)
]),
Tag("input", {
h("input", {
type: "file",
multiple: true,
accept: props.accept || "*",
@@ -44,21 +44,21 @@ export const Fileinput = (props) => {
onchange: (e) => handleFiles(e.target.files)
})
]),
() => error() && Tag("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()),
If(() => selectedFiles().length > 0, () =>
Tag("ul", { class: "mt-2 space-y-1" }, [
For(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" }, [
Tag("div", { class: "flex items-center gap-2 truncate" }, [
Tag("span", { class: "opacity-50" }, "📄"),
Tag("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
Tag("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`)
() => error() && h("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()),
when(() => selectedFiles().length > 0, () =>
h("ul", { class: "mt-2 space-y-1" }, [
each(selectedFiles, (file, idx) =>
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" }, [
h("div", { class: "flex items-center gap-2 truncate" }, [
h("span", { class: "opacity-50" }, "📄"),
h("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
h("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`)
]),
Tag("button", {
h("button", {
type: "button",
class: "btn btn-ghost btn-xs btn-circle",
onclick: (e) => { e.preventDefault(); removeFile(idx); }
}, Tag("span", { class: "icon-[lucide--x]" }))
}, h("span", { class: "icon-[lucide--x]" }))
]),
(file) => file.name + file.lastModified
)
components/icon.js
+4 -4
View File
@@ -1,14 +1,14 @@
// components/Icon.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Icon = (props, children) => {
if (typeof props === "string") {
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;
const { class: className, ...rest } = props;
return Tag("span", { ...rest, class: className }, children);
return h("span", { ...rest, class: className }, children);
};
components/indicator.js
+3 -3
View File
@@ -1,10 +1,10 @@
// components/Indicator.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Indicator = (props, children) => {
children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `indicator ${props.class ?? ''}` }, [
props.value ? Tag("span", { class: `indicator-item badge ${props.class ?? ''}` }, props.value) : null,
return h("div", { ...props, class: `indicator ${props.class ?? ''}` }, [
props.value ? h("span", { class: `indicator-item badge ${props.class ?? ''}` }, props.value) : null,
children
]);
};
components/input.js
+5 -5
View File
@@ -1,13 +1,13 @@
// 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,
Tag("input", { ...props, class: `${props.float ? 'input' : ''} ${props.class ?? ''}` }),
h("input", { ...props, class: `${props.float ? 'input' : ''} ${props.class ?? ''}` }),
props.right ?? null
]
);
components/kbd.js
+2 -2
View File
@@ -1,7 +1,7 @@
// components/Kbd.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Kbd = (props, children) => {
children === undefined && (children = props, props = {});
return Tag("kbd", { ...props, class: `kbd ${props.class ?? ''}` }, children);
return h("kbd", { ...props, class: `kbd ${props.class ?? ''}` }, children);
};
components/loading.js
+2 -2
View File
@@ -1,7 +1,7 @@
// components/Loading.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Loading = (props, children) => {
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);
};
components/menu.js
+8 -8
View File
@@ -1,9 +1,9 @@
// components/Menu.js
import { Tag, For } from "sigpro";
import { h, each } from "sigpro";
export const Menu = (props, children) => {
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) => {
@@ -12,14 +12,14 @@ export const MenuItems = (props) => {
const renderItem = (item) => {
if (item.children) {
return Tag("li", {}, [
Tag("details", {}, [
Tag("summary", {}, item.label),
Tag("ul", {}, MenuItems({ items: item.children }))
return h("li", {}, [
h("details", {}, [
h("summary", {}, item.label),
h("ul", {}, MenuItems({ items: item.children }))
])
]);
}
return Tag("li", {}, Tag("a", {
return h("li", {}, h("a", {
href: item.href,
onclick: item.onclick ? (e) => {
if (!item.href) e.preventDefault();
@@ -28,5 +28,5 @@ export const MenuItems = (props) => {
}, item.label));
};
return For(itemsSignal, renderItem, keyFn);
return each(itemsSignal, renderItem, keyFn);
};
components/modal.js
+9 -9
View File
@@ -1,10 +1,10 @@
// components/Modal.js
import { Tag, Watch } from "sigpro";
import { h, watch } from "sigpro";
export const Modal = (props) => {
let dialogRef = null;
Watch(() => {
watch(() => {
const isOpen = typeof props.open === "function" ? props.open() : props.open;
if (!dialogRef) return;
isOpen ? dialogRef.showModal() : dialogRef.close();
@@ -12,22 +12,22 @@ export const Modal = (props) => {
const close = () => typeof props.open === "function" && props.open(false);
return Tag("dialog", {
return h("dialog", {
...props,
ref: el => dialogRef = el,
class: `modal ${props.class ?? ''}`,
onclose: close,
oncancel: close
}, [
Tag("div", { class: "modal-box" }, [
props.title && Tag("h3", { class: "text-lg font-bold" }, props.title),
h("div", { class: "modal-box" }, [
props.title && h("h3", { class: "text-lg font-bold" }, props.title),
props.children,
Tag("div", { class: "modal-action" }, [
props.actions || Tag("button", { class: "btn", onclick: close }, "Cerrar")
h("div", { class: "modal-action" }, [
props.actions || h("button", { class: "btn", onclick: close }, "Cerrar")
])
]),
Tag("form", { method: "dialog", class: "modal-backdrop" }, [
Tag("button", {}, "close")
h("form", { method: "dialog", class: "modal-backdrop" }, [
h("button", {}, "close")
])
]);
};
components/navbar.js
+2 -2
View File
@@ -1,7 +1,7 @@
// components/Navbar.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Navbar = (props, children) => {
children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `navbar ${props.class ?? ''}` }, children);
return h("div", { ...props, class: `navbar ${props.class ?? ''}` }, children);
};
components/radial.js
+2 -2
View File
@@ -1,12 +1,12 @@
// components/Radial.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Radial = (props, children) => {
children === undefined && (children = props, props = {});
const percentage = props.value != null ? (props.value / (props.max || 100)) * 100 : 0;
const style = `--value: ${percentage}; --max: 100;`;
return Tag("div", {
return h("div", {
...props,
class: `radial-progress ${props.class ?? ''}`,
style: style,
components/radio.js
+2 -2
View File
@@ -1,4 +1,4 @@
// 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 ?? ''}` });
components/range.js
+2 -2
View File
@@ -1,4 +1,4 @@
// 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 ?? ''}` });
components/rating.js
+3 -3
View File
@@ -1,13 +1,13 @@
// components/Rating.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Rating = (props, children) => {
children === undefined && (children = props, props = {});
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;
return Tag("input", {
return h("input", {
type: "radio",
name,
class: `mask ${props.mask || "mask-star"}`,
components/select.js
+8 -8
View File
@@ -1,22 +1,22 @@
// components/Select.js
import { Tag, For } from "sigpro";
import { h, each } from "sigpro";
export const Select = (props, children) => {
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) => {
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;
const dynamicOptions = For(
const dynamicOptions = each(
() => [...(typeof props.items === "function" ? props.items() : props.items || [])],
(item) => {
const val = typeof item === "string" ? item : item.value;
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))
);
@@ -24,11 +24,11 @@ export const SelectItems = (props) => {
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,
Tag("select", { ...props, class: `${props.float ? 'select' : ''} ${props.class ?? ''}` }, children),
h("select", { ...props, class: `${props.float ? 'select' : ''} ${props.class ?? ''}` }, children),
props.right ?? null
]
);
components/skeleton.js
+4 -4
View File
@@ -1,12 +1,12 @@
// 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) => {
return Tag("div", { ...props, class: "space-y-2" },
return h("div", { ...props, class: "space-y-2" },
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 ?? ''}` })
)
);
};
components/stack.js
+2 -2
View File
@@ -1,7 +1,7 @@
// components/Stack.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Stack = (props, children) => {
children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `stack ${props.class ?? ''}` }, children);
return h("div", { ...props, class: `stack ${props.class ?? ''}` }, children);
};
components/stat.js
+8 -8
View File
@@ -1,20 +1,20 @@
// components/Stats.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Stats = (props, children) => {
children === undefined && (children = props, props = {});
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) => {
children === undefined && (children = props, props = {});
return Tag("div", { ...props, class: `stat ${props.class ?? ''}` }, [
props.icon && Tag("div", { class: "stat-figure" }, props.icon),
props.label && Tag("div", { class: "stat-title" }, props.label),
props.value && Tag("div", { class: "stat-value" }, props.value),
props.desc && Tag("div", { class: "stat-desc" }, props.desc),
props.actions && Tag("div", { class: "stat-actions" }, props.actions),
return h("div", { ...props, class: `stat ${props.class ?? ''}` }, [
props.icon && h("div", { class: "stat-figure" }, props.icon),
props.label && h("div", { class: "stat-title" }, props.label),
props.value && h("div", { class: "stat-value" }, props.value),
props.desc && h("div", { class: "stat-desc" }, props.desc),
props.actions && h("div", { class: "stat-actions" }, props.actions),
children
]);
};
components/steps.js
+3 -3
View File
@@ -1,12 +1,12 @@
// components/Steps.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Steps = (props, children) => {
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) => {
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);
};
components/swap.js
+5 -5
View File
@@ -1,14 +1,14 @@
// components/Swap.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Swap = (props) => {
return Tag("label", { ...props, class: `swap ${props.class ?? ''}` }, [
Tag("input", {
return h("label", { ...props, class: `swap ${props.class ?? ''}` }, [
h("input", {
type: "checkbox",
checked: () => typeof props.value === "function" ? props.value() : props.value,
onchange: (e) => typeof props.value === "function" && props.value(e.target.checked)
}),
Tag("div", { class: "swap-on" }, props.on),
Tag("div", { class: "swap-off" }, props.off)
h("div", { class: "swap-on" }, props.on),
h("div", { class: "swap-off" }, props.off)
]);
};
components/table.js
+9 -9
View File
@@ -1,27 +1,27 @@
// components/Table.js
import { Tag, For } from "sigpro";
import { h, each } from "sigpro";
export const Table = (props, children) => {
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) => {
const itemArray = typeof props.items === "function" ? props.items() : (props.items || []);
const thead = props.header !== false && props.columns?.some(col => col.label) ?
Tag("thead", {},
Tag("tr", {},
props.columns.map(col => Tag("th", { class: col.class }, col.label))
h("thead", {},
h("tr", {},
props.columns.map(col => h("th", { class: col.class }, col.label))
)
) : null;
const tbody = Tag("tbody", {}, [
For(itemArray, (item, idx) =>
Tag("tr", {},
const tbody = h("tbody", {}, [
each(itemArray, (item, idx) =>
h("tr", {},
props.columns.map(col => {
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))
components/tabs.js
+8 -8
View File
@@ -1,25 +1,25 @@
// components/Tabs.js
import { Tag, For } from "sigpro";
import { h, each } from "sigpro";
export const Tabs = (props, children) => {
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) => {
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) => {
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 ?? ''}` }, [
Tag("span", { class: "flex items-center" }, [
export const TabClose = (props) => h("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, [
h("span", { class: "flex items-center" }, [
props.label,
Tag("span", {
h("span", {
class: "icon-[lucide--x] w-3.5 h-3.5 ml-2 cursor-pointer hover:opacity-70",
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) => {
const items = typeof props.items === "function" ? props.items : () => props.items || [];
return For(
return each(
items,
(item, idx) => {
const TabComp = item.closable ? TabClose : Tab;
components/textarea.js
+2 -2
View File
@@ -1,4 +1,4 @@
// 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 ?? ''}` });
components/textrotate.js
+3 -3
View File
@@ -1,12 +1,12 @@
// components/Textrotate.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const TextRotate = (props) => {
const wordsArray = Array.isArray(props.words)
? props.words
: (typeof props.words === 'string' ? props.words.split(',') : []);
return Tag("span", { ...props, class: `text-rotate ${props.class ?? ''}` }, [
Tag("span", {}, wordsArray.map(word => Tag("span", {}, word)))
return h("span", { ...props, class: `text-rotate ${props.class ?? ''}` }, [
h("span", {}, wordsArray.map(word => h("span", {}, word)))
]);
};
components/timeline.js
+2 -2
View File
@@ -1,11 +1,11 @@
// components/Timeline.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Timeline = (props, children) => {
children === undefined && (children = props, props = {});
const vertical = props.vertical !== false;
const compact = props.compact === true;
return Tag("ul", {
return h("ul", {
...props,
class: `timeline ${vertical ? 'timeline-vertical' : 'timeline-horizontal'} ${compact ? 'timeline-compact' : ''} ${props.class ?? ''}`.trim()
}, children);
components/toast.js
+8 -8
View File
@@ -1,17 +1,17 @@
// components/Toast.js
import { Tag, Mount } from "sigpro";
import { h, mount } from "sigpro";
export const Toast = (message, type = "alert-success", duration = 3500) => {
let container = document.getElementById("sigpro-toast-container");
if (!container) {
container = Tag("div", {
container = h("div", {
id: "sigpro-toast-container",
class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none"
});
document.body.appendChild(container);
}
const toastHost = Tag("div", { style: "display: contents" });
const toastHost = h("div", { style: "display: contents" });
container.appendChild(toastHost);
let timeoutId;
@@ -32,16 +32,16 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
};
const ToastComponent = () => {
const closeIcon = Tag("span", { class: "icon-[lucide--x]" });
const closeBtn = Tag("button", {
const closeIcon = h("span", { class: "icon-[lucide--x]" });
const closeBtn = h("button", {
class: "btn btn-xs btn-circle btn-ghost",
onclick: close
}, 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`
}, [
Tag("span", {}, typeof message === "function" ? message() : message),
h("span", {}, typeof message === "function" ? message() : message),
closeBtn
]);
@@ -49,7 +49,7 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
return alertDiv;
};
const instance = Mount(ToastComponent, toastHost);
const instance = mount(ToastComponent, toastHost);
if (duration > 0) timeoutId = setTimeout(close, duration);
return close;
};
components/toggle.js
+2 -2
View File
@@ -1,4 +1,4 @@
// 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 ?? ''}` });
components/tooltip.js
+2 -2
View File
@@ -1,7 +1,7 @@
// components/Tooltip.js
import { Tag } from "sigpro";
import { h } from "sigpro";
export const Tooltip = (props, children) => {
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);
};
dist/sigpro-ui.css
Vendored
+1 -59
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 theme, base, components, utilities;
@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 {
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 {
@layer daisyui.l1.l2.l3 {
border: var(--border) solid currentColor;
@@ -3152,9 +3101,6 @@
.top-0 {
top: calc(var(--spacing) * 0);
}
.top-1\/2 {
top: calc(1 / 2 * 100%);
}
.top-2 {
top: calc(var(--spacing) * 2);
}
@@ -4995,10 +4941,6 @@
--tw-translate-x: 100%;
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 {
--tw-translate-y: calc(var(--spacing) * 2);
translate: var(--tw-translate-x) var(--tw-translate-y);
dist/sigpro-ui.esm.js
Vendored
+586 -598
View File
File diff suppressed because it is too large Load Diff
dist/sigpro-ui.esm.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/sigpro-ui.js
Vendored
+586 -598
View File
File diff suppressed because it is too large Load Diff
dist/sigpro-ui.min.css
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
dist/sigpro-ui.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
docs/README.md
+2 -2
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. |
| **Components** | **SigPro-UI** | 60+ semantic, reactive components. |
| **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
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
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
docs/components/accordion.md
+14 -14
View File
@@ -29,7 +29,7 @@ Collapsible accordion component for organizing content into expandable sections.
</div>
```js
const { Accordion, Div, Mount } = window;
const { Accordion, Div, mount } = window;
const BasicDemo = () => {
const open1 = $(false);
@@ -54,7 +54,7 @@ const BasicDemo = () => {
})
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Group Accordion (Radio Style)
@@ -67,7 +67,7 @@ Mount(BasicDemo, '#demo-basic');
</div>
```js
const { Accordion, Div, Mount } = window;
const { Accordion, Div, mount } = window;
const GroupDemo = () => {
const openSection = $('section1');
@@ -93,7 +93,7 @@ const GroupDemo = () => {
})
]);
};
Mount(GroupDemo, '#demo-group');
mount(GroupDemo, '#demo-group');
```
### Using Items Array
@@ -106,7 +106,7 @@ Mount(GroupDemo, '#demo-group');
</div>
```js
const { Accordion, Div, Mount } = window;
const { Accordion, Div, mount } = window;
const ItemsDemo = () => {
const openItems = $({
@@ -135,7 +135,7 @@ const ItemsDemo = () => {
]
});
};
Mount(ItemsDemo, '#demo-items');
mount(ItemsDemo, '#demo-items');
```
### FAQ Accordion
@@ -148,7 +148,7 @@ Mount(ItemsDemo, '#demo-items');
</div>
```js
const { Accordion, Div, Mount } = window;
const { Accordion, Div, mount } = window;
const FaqDemo = () => {
const openFaq = $('faq1');
@@ -168,7 +168,7 @@ const FaqDemo = () => {
})
));
};
Mount(FaqDemo, '#demo-faq');
mount(FaqDemo, '#demo-faq');
```
### With Rich Content
@@ -181,7 +181,7 @@ Mount(FaqDemo, '#demo-faq');
</div>
```js
const { Accordion, Div, Span, Mount } = window;
const { Accordion, Div, Span, mount } = window;
const RichDemo = () => {
const open1 = $(true);
@@ -221,7 +221,7 @@ const RichDemo = () => {
})
]);
};
Mount(RichDemo, '#demo-rich');
mount(RichDemo, '#demo-rich');
```
### Form Accordion
@@ -234,7 +234,7 @@ Mount(RichDemo, '#demo-rich');
</div>
```js
const { Accordion, Div, Span, Button, Input, Radio, Mount } = window;
const { Accordion, Div, Span, Button, Input, Radio, mount } = window;
const FormAccordion = () => {
const openStep = $('step1');
@@ -341,7 +341,7 @@ const FormAccordion = () => {
})
]);
};
Mount(FormAccordion, '#demo-form');
mount(FormAccordion, '#demo-form');
```
### All Variants
@@ -354,7 +354,7 @@ Mount(FormAccordion, '#demo-form');
</div>
```js
const { Accordion, Div, Span, Mount } = window;
const { Accordion, Div, Span, mount } = window;
const VariantsDemo = () => {
const open1 = $(true);
@@ -385,5 +385,5 @@ const VariantsDemo = () => {
})
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
docs/components/alert.md
+12 -12
View File
@@ -36,7 +36,7 @@ Alert supports all **daisyUI Alert classes**:
</div>
```js
const { Alert, Div, Mount } = window;
const { Alert, Div, mount } = window;
const BasicDemo = () => {
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.')
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Soft vs Solid Variants
@@ -59,7 +59,7 @@ Mount(BasicDemo, '#demo-basic');
</div>
```js
const { Alert, Div, Mount } = window;
const { Alert, Div, mount } = window;
const VariantsDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
@@ -69,7 +69,7 @@ const VariantsDemo = () => {
Alert({ class: 'alert-success alert-solid' }, 'Solid success alert')
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### With Actions
@@ -82,7 +82,7 @@ Mount(VariantsDemo, '#demo-variants');
</div>
```js
const { Alert, Button, Div, Mount, Toast } = window;
const { Alert, Button, Div, mount, Toast } = window;
const ActionsDemo = () => {
const showUndo = $(false);
@@ -115,7 +115,7 @@ const ActionsDemo = () => {
]) : null
]);
};
Mount(ActionsDemo, '#demo-actions');
mount(ActionsDemo, '#demo-actions');
```
### Dismissible Alert
@@ -128,7 +128,7 @@ Mount(ActionsDemo, '#demo-actions');
</div>
```js
const { Alert, Button, Div, Mount } = window;
const { Alert, Button, Div, mount } = window;
const DismissibleDemo = () => {
const visible = $(true);
@@ -141,7 +141,7 @@ const DismissibleDemo = () => {
() => !visible() ? Button({ class: 'btn btn-sm btn-ghost', onclick: () => visible(true) }, 'Show Alert') : null
]);
};
Mount(DismissibleDemo, '#demo-dismissible');
mount(DismissibleDemo, '#demo-dismissible');
```
### Reactive Alert
@@ -154,7 +154,7 @@ Mount(DismissibleDemo, '#demo-dismissible');
</div>
```js
const { Alert, Div, Input, Mount } = window;
const { Alert, Div, Input, mount } = window;
const ReactiveDemo = () => {
const email = $('');
@@ -180,7 +180,7 @@ const ReactiveDemo = () => {
() => email() && !error() ? Alert({ class: 'alert-success' }, `Valid email: ${email()}`) : null
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### All Types
@@ -193,7 +193,7 @@ Mount(ReactiveDemo, '#demo-reactive');
</div>
```js
const { Alert, Div, Mount } = window;
const { Alert, Div, mount } = window;
const AllTypesDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
@@ -203,5 +203,5 @@ const AllTypesDemo = () => {
Alert({ class: 'alert-error' }, '❌ This is an error alert')
]);
};
Mount(AllTypesDemo, '#demo-all');
mount(AllTypesDemo, '#demo-all');
```
docs/components/autocomplete.md
+10 -10
View File
@@ -41,7 +41,7 @@ Autocomplete wraps a **daisyUI Input component** internally. All Input styling c
</div>
```js
const { Autocomplete, Mount } = window;
const { Autocomplete, mount } = window;
const BasicDemo = () => {
const selected = $("");
@@ -62,7 +62,7 @@ const BasicDemo = () => {
onselect: (value) => selected(value),
});
};
Mount(BasicDemo, "#demo-basic");
mount(BasicDemo, "#demo-basic");
```
### With Objects
@@ -75,7 +75,7 @@ Mount(BasicDemo, "#demo-basic");
</div>
```js
const { Autocomplete, Div, Mount } = window;
const { Autocomplete, Div, mount } = window;
const ObjectsDemo = () => {
const selected = $("");
@@ -109,7 +109,7 @@ const ObjectsDemo = () => {
),
]);
};
Mount(ObjectsDemo, "#demo-objects");
mount(ObjectsDemo, "#demo-objects");
```
### With Reactive Display
@@ -122,7 +122,7 @@ Mount(ObjectsDemo, "#demo-objects");
</div>
```js
const { Autocomplete, Div, Mount } = window;
const { Autocomplete, Div, mount } = window;
const ReactiveDemo = () => {
const selected = $("");
@@ -155,7 +155,7 @@ const ReactiveDemo = () => {
: null,
]);
};
Mount(ReactiveDemo, "#demo-reactive");
mount(ReactiveDemo, "#demo-reactive");
```
### Dynamic Items
@@ -168,7 +168,7 @@ Mount(ReactiveDemo, "#demo-reactive");
</div>
```js
const { Autocomplete, Select, SelectItems, Div, Mount } = window;
const { Autocomplete, Select, SelectItems, Div, mount } = window;
const DynamicDemo = () => {
const selected = $("");
@@ -219,7 +219,7 @@ const DynamicDemo = () => {
]),
]);
};
Mount(DynamicDemo, "#demo-dynamic");
mount(DynamicDemo, "#demo-dynamic");
```
### All Variants
@@ -232,7 +232,7 @@ Mount(DynamicDemo, "#demo-dynamic");
</div>
```js
const { Autocomplete, Div, Mount } = window;
const { Autocomplete, Div, mount } = window;
const VariantsDemo = () => {
const colors = [
@@ -272,5 +272,5 @@ const VariantsDemo = () => {
}),
]);
};
Mount(VariantsDemo, "#demo-variants");
mount(VariantsDemo, "#demo-variants");
```
docs/components/badge.md
+10 -10
View File
@@ -56,7 +56,7 @@ const BasicDemo = () => {
Badge({ class: 'badge-error' }, 'Error')
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Badge Sizes
@@ -78,7 +78,7 @@ const SizesDemo = () => {
Badge({ class: 'badge-lg' }, 'Large')
]);
};
Mount(SizesDemo, '#demo-sizes');
mount(SizesDemo, '#demo-sizes');
```
### Outline Badges
@@ -103,7 +103,7 @@ const OutlineDemo = () => {
Badge({ class: 'badge-outline badge-error' }, 'Error')
]);
};
Mount(OutlineDemo, '#demo-outline');
mount(OutlineDemo, '#demo-outline');
```
### Ghost Badges
@@ -128,7 +128,7 @@ const GhostDemo = () => {
Badge({ class: 'badge-ghost badge-error' }, 'Error')
]);
};
Mount(GhostDemo, '#demo-ghost');
mount(GhostDemo, '#demo-ghost');
```
### With Icons
@@ -165,7 +165,7 @@ const IconsDemo = () => {
])
]);
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Status Badges
@@ -194,7 +194,7 @@ const StatusDemo = () => {
))
]);
};
Mount(StatusDemo, '#demo-status');
mount(StatusDemo, '#demo-status');
```
### Count Badges
@@ -227,7 +227,7 @@ const CountDemo = () => {
])
]);
};
Mount(CountDemo, '#demo-count');
mount(CountDemo, '#demo-count');
```
### Interactive Badge
@@ -255,7 +255,7 @@ const InteractiveDemo = () => {
}, 'Reset')
]);
};
Mount(InteractiveDemo, '#demo-interactive');
mount(InteractiveDemo, '#demo-interactive');
```
### All Variants
@@ -287,7 +287,7 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Inline with Text
@@ -319,5 +319,5 @@ const InlineDemo = () => {
])
]);
};
Mount(InlineDemo, '#demo-inline');
mount(InlineDemo, '#demo-inline');
```
docs/components/button.md
+8 -8
View File
@@ -48,7 +48,7 @@ Button({ class: "btn-primary btn-lg btn-circle gap-4" }, "Click Me");
const BasicDemo = () => {
return Button({ class: "btn-primary" }, "Click Me");
};
Mount(BasicDemo, "#demo-basic");
mount(BasicDemo, "#demo-basic");
```
### With Loading State
@@ -69,10 +69,10 @@ const LoadingDemo = () => {
isSaving(false);
},
},
[If(isSaving, ()=>Loading()), "Save Changes"],
[when(isSaving, ()=>Loading()), "Save Changes"],
);
};
Mount(LoadingDemo, "#demo-loading");
mount(LoadingDemo, "#demo-loading");
```
### With Icon
@@ -85,7 +85,7 @@ const IconDemo = () => {
Button({ class: "btn-primary" }, [Icon("icon-[lucide--x]"), "Favorite"]),
]);
};
Mount(IconDemo, "#demo-icon");
mount(IconDemo, "#demo-icon");
```
### With Badge (using Indicator)
@@ -99,7 +99,7 @@ const BadgeDemo = () => {
Button({ class: "btn-outline" }, "Notifications"),
);
};
Mount(BadgeDemo, "#demo-badge");
mount(BadgeDemo, "#demo-badge");
```
### With Tooltip
@@ -113,7 +113,7 @@ const TooltipDemo = () => {
Button({ class: "btn-ghost" }, "Delete"),
);
};
Mount(TooltipDemo, "#demo-tooltip");
mount(TooltipDemo, "#demo-tooltip");
```
### Combined (Badge + Tooltip)
@@ -137,7 +137,7 @@ const CombinedDemo = () => {
),
);
};
Mount(CombinedDemo, "#demo-combined");
mount(CombinedDemo, "#demo-combined");
```
### All Color Variants
@@ -155,5 +155,5 @@ const VariantsDemo = () => {
Button({ class: "btn-disabled" }, "Disabled"),
]);
};
Mount(VariantsDemo, "#demo-variants");
mount(VariantsDemo, "#demo-variants");
```
docs/components/checkbox.md
+7 -7
View File
@@ -61,7 +61,7 @@ const BasicDemo = () => {
onclick: () => accepted(!accepted())
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Toggle Switch
@@ -89,7 +89,7 @@ const ToggleDemo = () => {
: Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
]);
};
Mount(ToggleDemo, '#demo-toggle');
mount(ToggleDemo, '#demo-toggle');
```
### Disabled State
@@ -116,7 +116,7 @@ const DisabledDemo = () => {
})
]);
};
Mount(DisabledDemo, '#demo-disabled');
mount(DisabledDemo, '#demo-disabled');
```
### Reactive Multiple Selection
@@ -169,7 +169,7 @@ const MultipleDemo = () => {
})
]);
};
Mount(MultipleDemo, '#demo-multiple');
mount(MultipleDemo, '#demo-multiple');
```
### With Tooltip
@@ -195,7 +195,7 @@ const TooltipDemo = () => {
})
);
};
Mount(TooltipDemo, '#demo-tooltip');
mount(TooltipDemo, '#demo-tooltip');
```
### All Variants
@@ -244,7 +244,7 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Form Example
@@ -288,5 +288,5 @@ const FormDemo = () => {
: null
]);
};
Mount(FormDemo, '#demo-form');
mount(FormDemo, '#demo-form');
```
docs/components/colorpicker.md
+6 -6
View File
@@ -45,7 +45,7 @@ const BasicDemo = () => {
value: color
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Reactive Preview
@@ -74,7 +74,7 @@ const PreviewDemo = () => {
])
]);
};
Mount(PreviewDemo, '#demo-preview');
mount(PreviewDemo, '#demo-preview');
```
### Color Palette Grid
@@ -112,7 +112,7 @@ const PaletteDemo = () => {
Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
]);
};
Mount(PaletteDemo, '#demo-palette');
mount(PaletteDemo, '#demo-palette');
```
### With Text Color Preview
@@ -148,7 +148,7 @@ const TextDemo = () => {
])
]);
};
Mount(TextDemo, '#demo-text');
mount(TextDemo, '#demo-text');
```
### All Variants
@@ -181,7 +181,7 @@ const VariantsDemo = () => {
})
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Dynamic Color Swatch
@@ -221,5 +221,5 @@ const DynamicDemo = () => {
])
]);
};
Mount(DynamicDemo, '#demo-dynamic');
mount(DynamicDemo, '#demo-dynamic');
```
docs/components/datepicker.md
+6 -6
View File
@@ -50,7 +50,7 @@ const BasicDemo = () => {
placeholder: 'Choose a date...'
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Date Range Picker
@@ -78,7 +78,7 @@ const RangeDemo = () => {
]) : null
]);
};
Mount(RangeDemo, '#demo-range');
mount(RangeDemo, '#demo-range');
```
### With Time Selection
@@ -106,7 +106,7 @@ const TimeDemo = () => {
]) : null
]);
};
Mount(TimeDemo, '#demo-time');
mount(TimeDemo, '#demo-time');
```
### Range with Time
@@ -135,7 +135,7 @@ const RangeTimeDemo = () => {
]) : null
]);
};
Mount(RangeTimeDemo, '#demo-range-time');
mount(RangeTimeDemo, '#demo-range-time');
```
### Reactive Display
@@ -167,7 +167,7 @@ const ReactiveDemo = () => {
])
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### All Variants
@@ -201,5 +201,5 @@ const VariantsDemo = () => {
})
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
docs/components/drawer.md
+7 -7
View File
@@ -61,7 +61,7 @@ const BasicDemo = () => {
])
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Navigation Drawer
@@ -138,7 +138,7 @@ const NavDrawer = () => {
])
});
};
Mount(NavDrawer, '#demo-nav');
mount(NavDrawer, '#demo-nav');
```
### Settings Drawer
@@ -233,7 +233,7 @@ const SettingsDrawer = () => {
])
});
};
Mount(SettingsDrawer, '#demo-settings');
mount(SettingsDrawer, '#demo-settings');
```
### Cart Drawer
@@ -336,7 +336,7 @@ const CartDrawer = () => {
])
});
};
Mount(CartDrawer, '#demo-cart');
mount(CartDrawer, '#demo-cart');
```
### Responsive Drawer
@@ -404,7 +404,7 @@ const ResponsiveDrawer = () => {
])
});
};
Mount(ResponsiveDrawer, '#demo-responsive');
mount(ResponsiveDrawer, '#demo-responsive');
```
### Form Drawer
@@ -462,7 +462,7 @@ const FormDrawer = () => {
}),
Div({ class: 'form-control' }, [
Span({ class: 'label-text mb-1' }, 'Message'),
Tag('textarea', {
h('textarea', {
class: 'textarea textarea-bordered h-24',
placeholder: 'Your message',
value: message,
@@ -489,5 +489,5 @@ const FormDrawer = () => {
])
});
};
Mount(FormDrawer, '#demo-form');
mount(FormDrawer, '#demo-form');
```
docs/components/dropdown.md
+7 -7
View File
@@ -71,7 +71,7 @@ const BasicDemo = () => {
]
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -96,7 +96,7 @@ const IconsDemo = () => {
]
});
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Action Dropdown
@@ -124,7 +124,7 @@ const ActionsDemo = () => {
]
});
};
Mount(ActionsDemo, '#demo-actions');
mount(ActionsDemo, '#demo-actions');
```
### User Dropdown
@@ -153,7 +153,7 @@ const UserDropdown = () => {
]
});
};
Mount(UserDropdown, '#demo-user');
mount(UserDropdown, '#demo-user');
```
### Reactive Items
@@ -180,7 +180,7 @@ const ReactiveDropdown = () => {
items: items
});
};
Mount(ReactiveDropdown, '#demo-reactive');
mount(ReactiveDropdown, '#demo-reactive');
```
### Notification Dropdown
@@ -225,7 +225,7 @@ const NotificationsDropdown = () => {
});
};
Mount(NotificationsDropdown, '#demo-notifications');
mount(NotificationsDropdown, '#demo-notifications');
```
### All Variants
@@ -251,5 +251,5 @@ const VariantsDemo = () => {
Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems })
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
docs/components/fab.md
+8 -8
View File
@@ -75,7 +75,7 @@ const BasicDemo = () => {
})
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Label
@@ -101,7 +101,7 @@ const LabelDemo = () => {
})
]);
};
Mount(LabelDemo, '#demo-label');
mount(LabelDemo, '#demo-label');
```
### Different Positions
@@ -145,7 +145,7 @@ const PositionsDemo = () => {
})
]);
};
Mount(PositionsDemo, '#demo-positions');
mount(PositionsDemo, '#demo-positions');
```
### Color Variants
@@ -190,7 +190,7 @@ const ColorsDemo = () => {
})
]);
};
Mount(ColorsDemo, '#demo-colors');
mount(ColorsDemo, '#demo-colors');
```
### Reactive Actions
@@ -236,7 +236,7 @@ const ReactiveActions = () => {
})
]);
};
Mount(ReactiveActions, '#demo-reactive');
mount(ReactiveActions, '#demo-reactive');
```
### Document Actions
@@ -275,7 +275,7 @@ const DocumentActions = () => {
})
]);
};
Mount(DocumentActions, '#demo-document');
mount(DocumentActions, '#demo-document');
```
### Messaging FAB
@@ -333,7 +333,7 @@ const MessagingFAB = () => {
})
]);
};
Mount(MessagingFAB, '#demo-messaging');
mount(MessagingFAB, '#demo-messaging');
```
### All Variants
@@ -374,5 +374,5 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
docs/components/fieldset.md
+7 -7
View File
@@ -62,7 +62,7 @@ const BasicDemo = () => {
])
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Reactive Legend
@@ -104,7 +104,7 @@ const ReactiveDemo = () => {
])
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Address Form
@@ -146,7 +146,7 @@ const AddressDemo = () => {
])
]);
};
Mount(AddressDemo, '#demo-address');
mount(AddressDemo, '#demo-address');
```
### Payment Method
@@ -187,7 +187,7 @@ const PaymentDemo = () => {
])
]);
};
Mount(PaymentDemo, '#demo-payment');
mount(PaymentDemo, '#demo-payment');
```
### Preferences Panel
@@ -236,7 +236,7 @@ const PreferencesDemo = () => {
])
]);
};
Mount(PreferencesDemo, '#demo-preferences');
mount(PreferencesDemo, '#demo-preferences');
```
### Registration Form
@@ -294,7 +294,7 @@ const RegistrationDemo = () => {
])
]);
};
Mount(RegistrationDemo, '#demo-registration');
mount(RegistrationDemo, '#demo-registration');
```
### All Variants
@@ -320,5 +320,5 @@ const VariantsDemo = () => {
Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
docs/components/indicator.md
+6 -6
View File
@@ -59,7 +59,7 @@ const BasicDemo = () => {
)
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Online Status Indicator
@@ -91,7 +91,7 @@ const StatusDemo = () => {
)
]);
};
Mount(StatusDemo, '#demo-status');
mount(StatusDemo, '#demo-status');
```
### Reactive Counter
@@ -129,7 +129,7 @@ const ReactiveDemo = () => {
])
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Shopping Cart
@@ -188,7 +188,7 @@ const CartDemo = () => {
]);
};
Mount(CartDemo, '#demo-cart');
mount(CartDemo, '#demo-cart');
```
### Email Inbox
@@ -249,7 +249,7 @@ const InboxDemo = () => {
]);
};
Mount(InboxDemo, '#demo-inbox');
mount(InboxDemo, '#demo-inbox');
```
### All Variants
@@ -280,5 +280,5 @@ const VariantsDemo = () => {
)
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
docs/components/input.md
+19 -19
View File
@@ -39,7 +39,7 @@ Input supports all **daisyUI Input classes**:
</div>
```js
const { Input, Mount } = window;
const { Input, mount } = window;
const BasicDemo = () => {
const name = $("");
@@ -49,7 +49,7 @@ const BasicDemo = () => {
oninput: (e) => name(e.target.value)
});
};
Mount(BasicDemo, "#demo-basic");
mount(BasicDemo, "#demo-basic");
```
### With Icon
@@ -64,13 +64,13 @@ Wrap the input inside a `Div` with class `input` and add an icon as a sibling.
</div>
```js
const { InputLabel, Div, Icon, Mount } = window;
const { InputLabel, Div, Icon, mount } = window;
const IconDemo = () => {
const email = $("");
return Div({ class: "input input-bordered flex items-center gap-2" }, [
Icon("✉️"),
Tag("input", {
h("input", {
class: "grow",
type: "email",
value: email,
@@ -79,7 +79,7 @@ const IconDemo = () => {
})
]);
};
Mount(IconDemo, "#demo-icon");
mount(IconDemo, "#demo-icon");
```
### Password with Toggle
@@ -92,14 +92,14 @@ Mount(IconDemo, "#demo-icon");
</div>
```js
const { Input, Div, Icon, Swap, Mount } = window;
const { Input, Div, Icon, Swap, mount } = window;
const PasswordDemo = () => {
const password = $("");
const visible = $(false);
return Div({ class: "input input-bordered flex items-center gap-2" }, [
Icon("icon-[lucide--lock]"),
Tag("input", {
h("input", {
type: () => (visible() ? "text" : "password"),
value: password,
placeholder: "Password",
@@ -114,7 +114,7 @@ const PasswordDemo = () => {
})
]);
};
Mount(PasswordDemo, "#demo-password");
mount(PasswordDemo, "#demo-password");
```
### With Floating Label
@@ -129,7 +129,7 @@ Use a wrapper `Div` with class `floating-label`.
</div>
```js
const { Input, Div, Span, Mount } = window;
const { Input, Div, Span, mount } = window;
const LabelDemo = () => {
const email = $("");
@@ -143,7 +143,7 @@ const LabelDemo = () => {
})
]);
};
Mount(LabelDemo, "#demo-label");
mount(LabelDemo, "#demo-label");
```
### With Tooltip
@@ -158,7 +158,7 @@ Wrap the input with `Tooltip` component.
</div>
```js
const { Input, Tooltip, Mount } = window;
const { Input, Tooltip, mount } = window;
const TooltipDemo = () => {
const username = $("");
@@ -170,7 +170,7 @@ const TooltipDemo = () => {
})
]);
};
Mount(TooltipDemo, "#demo-tooltip");
mount(TooltipDemo, "#demo-tooltip");
```
### Error State
@@ -185,13 +185,13 @@ Add `input-error` class and show a validation message.
</div>
```js
const { Input, Div, Mount } = window;
const { Input, Div, mount } = window;
const ErrorDemo = () => {
const email = $("");
const isValid = () => email().includes("@");
return Div({ class: "flex flex-col gap-2" }, [
Tag("input", {
h("input", {
type: "email",
class: () => `input input-bordered ${email() && !isValid() ? "input-error" : ""}`,
value: email,
@@ -201,7 +201,7 @@ const ErrorDemo = () => {
() => email() && !isValid() ? Div({ class: "text-error text-sm" }, "Enter a valid email") : null
]);
};
Mount(ErrorDemo, "#demo-error");
mount(ErrorDemo, "#demo-error");
```
### Disabled State
@@ -214,12 +214,12 @@ Mount(ErrorDemo, "#demo-error");
</div>
```js
const { Input, Mount } = window;
const { Input, mount } = window;
const DisabledDemo = () => {
return Input({ value: "john.doe", disabled: true });
};
Mount(DisabledDemo, "#demo-disabled");
mount(DisabledDemo, "#demo-disabled");
```
### All Variants
@@ -232,7 +232,7 @@ Mount(DisabledDemo, "#demo-disabled");
</div>
```js
const { Input, Div, Mount } = window;
const { Input, Div, mount } = window;
const VariantsDemo = () => {
const text = $("");
@@ -250,5 +250,5 @@ const VariantsDemo = () => {
Input({ type: "date", value: $("2024-01-01") })
]);
};
Mount(VariantsDemo, "#demo-variants");
mount(VariantsDemo, "#demo-variants");
```
docs/components/list.md
+9 -9
View File
@@ -51,7 +51,7 @@ const BasicDemo = () => {
]),
});
};
Mount(BasicDemo, "#demo-basic");
mount(BasicDemo, "#demo-basic");
```
### With Header
@@ -90,7 +90,7 @@ const HeaderDemo = () => {
]),
});
};
Mount(HeaderDemo, "#demo-header");
mount(HeaderDemo, "#demo-header");
```
### With Icons
@@ -134,7 +134,7 @@ const IconsDemo = () => {
),
});
};
Mount(IconsDemo, "#demo-icons");
mount(IconsDemo, "#demo-icons");
```
### With Badges
@@ -194,7 +194,7 @@ const BadgesDemo = () => {
),
});
};
Mount(BadgesDemo, "#demo-badges");
mount(BadgesDemo, "#demo-badges");
```
### Interactive List
@@ -252,7 +252,7 @@ const InteractiveDemo = () => {
: Div({ class: "alert alert-soft" }, "Select a project to see details"),
]);
};
Mount(InteractiveDemo, "#demo-interactive");
mount(InteractiveDemo, "#demo-interactive");
```
### Reactive List (Todo App)
@@ -291,7 +291,7 @@ const ReactiveDemo = () => {
};
const pendingCount = () => todos().filter(t => !t.done).length;
Watch(()=> console.log(pendingCount()));
watch(()=> console.log(pendingCount()));
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'flex gap-2' }, [
Input({
@@ -330,7 +330,7 @@ const ReactiveDemo = () => {
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Avatar List
@@ -383,7 +383,7 @@ const AvatarDemo = () => {
]),
});
};
Mount(AvatarDemo, "#demo-avatar");
mount(AvatarDemo, "#demo-avatar");
```
### All Variants
@@ -421,5 +421,5 @@ const VariantsDemo = () => {
}),
]);
};
Mount(VariantsDemo, "#demo-variants");
mount(VariantsDemo, "#demo-variants");
```
docs/components/menu.md
+8 -8
View File
@@ -72,7 +72,7 @@ const BasicDemo = () => {
]
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -117,7 +117,7 @@ const IconsDemo = () => {
]
});
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Nested Menu
@@ -187,7 +187,7 @@ const NestedDemo = () => {
]
});
};
Mount(NestedDemo, '#demo-nested');
mount(NestedDemo, '#demo-nested');
```
### Horizontal Menu
@@ -232,7 +232,7 @@ const HorizontalDemo = () => {
]
});
};
Mount(HorizontalDemo, '#demo-horizontal');
mount(HorizontalDemo, '#demo-horizontal');
```
### Sidebar Menu
@@ -295,7 +295,7 @@ const SidebarDemo = () => {
])
]);
};
Mount(SidebarDemo, '#demo-sidebar');
mount(SidebarDemo, '#demo-sidebar');
```
### Account Menu
@@ -346,7 +346,7 @@ const AccountDemo = () => {
]
});
};
Mount(AccountDemo, '#demo-account');
mount(AccountDemo, '#demo-account');
```
### Collapsible Sidebar
@@ -384,7 +384,7 @@ const CollapsibleDemo = () => {
])
]);
};
Mount(CollapsibleDemo, '#demo-collapsible');
mount(CollapsibleDemo, '#demo-collapsible');
```
### All Variants
@@ -422,5 +422,5 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
docs/components/modal.md
+7 -7
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
@@ -199,7 +199,7 @@ const FormModal = () => {
])
]);
};
Mount(FormModal, '#demo-form');
mount(FormModal, '#demo-form');
```
### Confirmation Modal
@@ -260,7 +260,7 @@ const ConfirmDemo = () => {
])
]);
};
Mount(ConfirmDemo, '#demo-confirm');
mount(ConfirmDemo, '#demo-confirm');
```
### Large Content Modal
@@ -312,7 +312,7 @@ const LargeDemo = () => {
])
]);
};
Mount(LargeDemo, '#demo-large');
mount(LargeDemo, '#demo-large');
```
### Multiple Modals
@@ -354,7 +354,7 @@ const MultipleDemo = () => {
}, 'Please review your input before proceeding.')
]);
};
Mount(MultipleDemo, '#demo-multiple');
mount(MultipleDemo, '#demo-multiple');
```
### Custom Styled Modal
@@ -391,5 +391,5 @@ const CustomDemo = () => {
])
]);
};
Mount(CustomDemo, '#demo-custom');
mount(CustomDemo, '#demo-custom');
```
docs/components/navbar.md
+7 -7
View File
@@ -51,7 +51,7 @@ const BasicDemo = () => {
])
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Navigation Links
@@ -92,7 +92,7 @@ const LinksDemo = () => {
])
]);
};
Mount(LinksDemo, '#demo-links');
mount(LinksDemo, '#demo-links');
```
### With Search
@@ -128,7 +128,7 @@ const SearchDemo = () => {
])
]);
};
Mount(SearchDemo, '#demo-search');
mount(SearchDemo, '#demo-search');
```
### With Avatar and Dropdown
@@ -167,7 +167,7 @@ const AvatarDemo = () => {
])
]);
};
Mount(AvatarDemo, '#demo-avatar');
mount(AvatarDemo, '#demo-avatar');
```
### Responsive Navbar
@@ -206,7 +206,7 @@ const ResponsiveDemo = () => {
]) : null
]);
};
Mount(ResponsiveDemo, '#demo-responsive');
mount(ResponsiveDemo, '#demo-responsive');
```
### With Brand and Actions
@@ -237,7 +237,7 @@ const BrandDemo = () => {
])
]);
};
Mount(BrandDemo, '#demo-brand');
mount(BrandDemo, '#demo-brand');
```
### All Variants
@@ -272,5 +272,5 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
docs/components/radio.md
+7 -7
View File
@@ -70,7 +70,7 @@ const BasicDemo = () => {
Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Tooltip
@@ -105,7 +105,7 @@ const TooltipDemo = () => {
})
]);
};
Mount(TooltipDemo, '#demo-tooltip');
mount(TooltipDemo, '#demo-tooltip');
```
### Disabled State
@@ -139,7 +139,7 @@ const DisabledDemo = () => {
})
]);
};
Mount(DisabledDemo, '#demo-disabled');
mount(DisabledDemo, '#demo-disabled');
```
### Reactive Preview
@@ -199,7 +199,7 @@ const ReactiveDemo = () => {
}, () => `${size()} ${color()} preview`)
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Payment Method Selection
@@ -250,7 +250,7 @@ const PaymentDemo = () => {
})
]);
};
Mount(PaymentDemo, '#demo-payment');
mount(PaymentDemo, '#demo-payment');
```
### All Variants
@@ -334,7 +334,7 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Dynamic Options
@@ -405,5 +405,5 @@ const DynamicDemo = () => {
: null
]);
};
Mount(DynamicDemo, '#demo-dynamic');
mount(DynamicDemo, '#demo-dynamic');
```
docs/components/range.md
+7 -7
View File
@@ -57,7 +57,7 @@ const BasicDemo = () => {
Div({ class: 'text-center' }, () => `Value: ${value()}%`)
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### 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()}%)` })
]);
};
Mount(TooltipDemo, '#demo-tooltip');
mount(TooltipDemo, '#demo-tooltip');
```
### Color Variants
@@ -109,7 +109,7 @@ const ColorsDemo = () => {
Range({ label: 'Accent', value: accent, class: 'range-accent', oninput: (e) => accent(e.target.value) })
]);
};
Mount(ColorsDemo, '#demo-colors');
mount(ColorsDemo, '#demo-colors');
```
### Size Variants
@@ -135,7 +135,7 @@ const SizesDemo = () => {
Range({ label: 'Large', value: lg, class: 'range-lg', oninput: (e) => lg(e.target.value) })
]);
};
Mount(SizesDemo, '#demo-sizes');
mount(SizesDemo, '#demo-sizes');
```
### Price Range
@@ -173,7 +173,7 @@ const PriceDemo = () => {
})
]);
};
Mount(PriceDemo, '#demo-price');
mount(PriceDemo, '#demo-price');
```
### Audio Controls
@@ -227,7 +227,7 @@ const AudioDemo = () => {
])
]);
};
Mount(AudioDemo, '#demo-audio');
mount(AudioDemo, '#demo-audio');
```
### All Variants
@@ -254,5 +254,5 @@ const VariantsDemo = () => {
Range({ disabled: true, value: $(50), oninput: (e) => {} })
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
docs/components/rating.md
+7 -7
View File
@@ -54,7 +54,7 @@ const BasicDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Heart Rating
@@ -80,7 +80,7 @@ const HeartDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
]);
};
Mount(HeartDemo, '#demo-heart');
mount(HeartDemo, '#demo-heart');
```
### Star with Outline
@@ -106,7 +106,7 @@ const Star2Demo = () => {
Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
]);
};
Mount(Star2Demo, '#demo-star2');
mount(Star2Demo, '#demo-star2');
```
### Read-only Rating
@@ -131,7 +131,7 @@ const ReadonlyDemo = () => {
Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
]);
};
Mount(ReadonlyDemo, '#demo-readonly');
mount(ReadonlyDemo, '#demo-readonly');
```
### Product Review
@@ -186,7 +186,7 @@ const ReviewDemo = () => {
])
]);
};
Mount(ReviewDemo, '#demo-review');
mount(ReviewDemo, '#demo-review');
```
### All Variants
@@ -219,7 +219,7 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Interactive Feedback
@@ -268,5 +268,5 @@ const FeedbackDemo = () => {
: null
]);
};
Mount(FeedbackDemo, '#demo-feedback');
mount(FeedbackDemo, '#demo-feedback');
```
docs/components/select.md
+5 -5
View File
@@ -67,7 +67,7 @@ const BasicDemo = () => {
])
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Reactive Display
@@ -102,7 +102,7 @@ const ReactiveDemo = () => {
Div({ class: 'alert alert-info' }, () => `You selected: ${selected()}`)
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Disabled State
@@ -133,7 +133,7 @@ const DisabledDemo = () => {
])
]);
};
Mount(DisabledDemo, '#demo-disabled');
mount(DisabledDemo, '#demo-disabled');
```
### Dynamic Items
@@ -195,7 +195,7 @@ const DynamicDemo = () => {
() => selectedItem() ? Div({ class: 'alert alert-success' }, `Selected: ${selectedItem()}`) : null
]);
};
Mount(DynamicDemo, '#demo-dynamic');
mount(DynamicDemo, '#demo-dynamic');
```
### All Variants
@@ -263,5 +263,5 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
docs/components/stack.md
+8 -8
View File
@@ -44,7 +44,7 @@ const BasicDemo = () => {
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
@@ -73,7 +73,7 @@ const CardsDemo = () => {
])
]);
};
Mount(CardsDemo, '#demo-cards');
mount(CardsDemo, '#demo-cards');
```
### Avatar Stack
@@ -99,7 +99,7 @@ const AvatarsDemo = () => {
])
]);
};
Mount(AvatarsDemo, '#demo-avatars');
mount(AvatarsDemo, '#demo-avatars');
```
### Image Stack
@@ -125,7 +125,7 @@ const ImagesDemo = () => {
])
]);
};
Mount(ImagesDemo, '#demo-images');
mount(ImagesDemo, '#demo-images');
```
### Photo Gallery Stack
@@ -157,7 +157,7 @@ const GalleryDemo = () => {
)
]);
};
Mount(GalleryDemo, '#demo-gallery');
mount(GalleryDemo, '#demo-gallery');
```
### Interactive Stack
@@ -197,7 +197,7 @@ const InteractiveDemo = () => {
])
]);
};
Mount(InteractiveDemo, '#demo-interactive');
mount(InteractiveDemo, '#demo-interactive');
```
### Notification Stack
@@ -249,7 +249,7 @@ const NotificationsDemo = () => {
}, 'Clear All')
]);
};
Mount(NotificationsDemo, '#demo-notifications');
mount(NotificationsDemo, '#demo-notifications');
```
### All Variants
@@ -290,5 +290,5 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
docs/components/stat.md
+7 -7
View File
@@ -59,7 +59,7 @@ const BasicDemo = () => {
})
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -94,7 +94,7 @@ const IconsDemo = () => {
})
]);
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Reactive Values
@@ -137,7 +137,7 @@ const ReactiveDemo = () => {
])
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Multiple Stats in Row
@@ -178,7 +178,7 @@ const MultipleDemo = () => {
})
]);
};
Mount(MultipleDemo, '#demo-multiple');
mount(MultipleDemo, '#demo-multiple');
```
### Dashboard Example
@@ -243,7 +243,7 @@ const DashboardDemo = () => {
])
]);
};
Mount(DashboardDemo, '#demo-dashboard');
mount(DashboardDemo, '#demo-dashboard');
```
### All Variants
@@ -288,7 +288,7 @@ const VariantsDemo = () => {
})
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Compact Stats
@@ -325,5 +325,5 @@ const CompactDemo = () => {
})
]);
};
Mount(CompactDemo, '#demo-compact');
mount(CompactDemo, '#demo-compact');
```
docs/components/swap.md
+8 -8
View File
@@ -49,7 +49,7 @@ const BasicDemo = () => {
off: "💫 OFF"
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Icon Swap
@@ -71,7 +71,7 @@ const IconsDemo = () => {
off: "👁️‍🗨️"
});
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Emoji Swap
@@ -93,7 +93,7 @@ const EmojiDemo = () => {
off: "🖤"
});
};
Mount(EmojiDemo, '#demo-emoji');
mount(EmojiDemo, '#demo-emoji');
```
### Custom Content Swap
@@ -115,7 +115,7 @@ const CustomDemo = () => {
off: Div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"])
});
};
Mount(CustomDemo, '#demo-custom');
mount(CustomDemo, '#demo-custom');
```
### With Reactive State
@@ -144,7 +144,7 @@ const ReactiveDemo = () => {
)
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Toggle Mode Swap
@@ -192,7 +192,7 @@ const ModeDemo = () => {
])
]);
};
Mount(ModeDemo, '#demo-mode');
mount(ModeDemo, '#demo-mode');
```
### All Variants
@@ -241,7 +241,7 @@ const VariantsDemo = () => {
])
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Simple Todo Toggle
@@ -279,5 +279,5 @@ const TodoDemo = () => {
})
]);
};
Mount(TodoDemo, '#demo-todo');
mount(TodoDemo, '#demo-todo');
```
docs/components/table.md
+8 -8
View File
@@ -70,7 +70,7 @@ const BasicDemo = () => {
]
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Zebra Stripes
@@ -101,7 +101,7 @@ const ZebraDemo = () => {
zebra: true
});
};
Mount(ZebraDemo, '#demo-zebra');
mount(ZebraDemo, '#demo-zebra');
```
### With Custom Cell Rendering
@@ -147,7 +147,7 @@ const CustomDemo = () => {
zebra: true
});
};
Mount(CustomDemo, '#demo-custom');
mount(CustomDemo, '#demo-custom');
```
### With Footers
@@ -195,7 +195,7 @@ const FooterDemo = () => {
zebra: true
});
};
Mount(FooterDemo, '#demo-footer');
mount(FooterDemo, '#demo-footer');
```
### Empty State
@@ -223,7 +223,7 @@ const EmptyDemo = () => {
])
});
};
Mount(EmptyDemo, '#demo-empty');
mount(EmptyDemo, '#demo-empty');
```
### Reactive Data
@@ -294,7 +294,7 @@ const ReactiveDemo = () => {
})
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### With Actions
@@ -354,7 +354,7 @@ const ActionsDemo = () => {
zebra: true
});
};
Mount(ActionsDemo, '#demo-actions');
mount(ActionsDemo, '#demo-actions');
```
### All Variants
@@ -408,5 +408,5 @@ const VariantsDemo = () => {
})
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
docs/components/tabs.md
+8 -8
View File
@@ -87,7 +87,7 @@ const BasicDemo = () => {
]
});
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### With Icons
@@ -126,7 +126,7 @@ const IconsDemo = () => {
]
});
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### With Tooltips
@@ -168,7 +168,7 @@ const TooltipsDemo = () => {
]
});
};
Mount(TooltipsDemo, '#demo-tooltips');
mount(TooltipsDemo, '#demo-tooltips');
```
### Disabled Tab
@@ -207,7 +207,7 @@ const DisabledDemo = () => {
]
});
};
Mount(DisabledDemo, '#demo-disabled');
mount(DisabledDemo, '#demo-disabled');
```
### Reactive Content
@@ -253,7 +253,7 @@ const ReactiveDemo = () => {
]
});
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Form Tabs
@@ -355,7 +355,7 @@ const FormTabs = () => {
])
]);
};
Mount(FormTabs, '#demo-form');
mount(FormTabs, '#demo-form');
```
### All Variants
@@ -415,7 +415,7 @@ const VariantsDemo = () => {
Tabs({ items: createItems(active4), class: 'tabs-border' })
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
### Closable Tabs
@@ -452,5 +452,5 @@ const ClosableTabsDemo = () => {
]);
};
Mount(ClosableTabsDemo, '#demo-closable');
mount(ClosableTabsDemo, '#demo-closable');
```
docs/components/timeline.md
+8 -8
View File
@@ -60,7 +60,7 @@ const BasicDemo = () => {
return Timeline({ items: events });
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Horizontal Timeline
@@ -88,7 +88,7 @@ const HorizontalDemo = () => {
class: 'min-w-[600px]'
});
};
Mount(HorizontalDemo, '#demo-horizontal');
mount(HorizontalDemo, '#demo-horizontal');
```
### Compact Timeline
@@ -114,7 +114,7 @@ const CompactDemo = () => {
compact: true
});
};
Mount(CompactDemo, '#demo-compact');
mount(CompactDemo, '#demo-compact');
```
### Custom Icons
@@ -137,7 +137,7 @@ const IconsDemo = () => {
return Timeline({ items: milestones });
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Reactive Timeline
@@ -192,7 +192,7 @@ const ReactiveDemo = () => {
])
]);
};
Mount(ReactiveDemo, '#demo-reactive');
mount(ReactiveDemo, '#demo-reactive');
```
### Order Status Tracker
@@ -234,7 +234,7 @@ const OrderDemo = () => {
))
]);
};
Mount(OrderDemo, '#demo-order');
mount(OrderDemo, '#demo-order');
```
### Company History
@@ -259,7 +259,7 @@ const HistoryDemo = () => {
return Timeline({ items: milestones });
};
Mount(HistoryDemo, '#demo-history');
mount(HistoryDemo, '#demo-history');
```
### All Variants
@@ -290,5 +290,5 @@ const VariantsDemo = () => {
Timeline({ items: sampleItems, compact: true })
]);
};
Mount(VariantsDemo, '#demo-variants');
mount(VariantsDemo, '#demo-variants');
```
docs/components/toast.md
+8 -8
View File
@@ -44,7 +44,7 @@ const BasicDemo = () => {
}, 'Error Toast')
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Different Durations
@@ -77,7 +77,7 @@ const DurationDemo = () => {
}, '8 Seconds')
]);
};
Mount(DurationDemo, '#demo-duration');
mount(DurationDemo, '#demo-duration');
```
### Interactive Toast
@@ -115,7 +115,7 @@ const InteractiveDemo = () => {
Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`)
]);
};
Mount(InteractiveDemo, '#demo-interactive');
mount(InteractiveDemo, '#demo-interactive');
```
### Form Validation Toast
@@ -174,7 +174,7 @@ const FormToastDemo = () => {
}, 'Login')
]);
};
Mount(FormToastDemo, '#demo-form');
mount(FormToastDemo, '#demo-form');
```
### Success Feedback
@@ -227,7 +227,7 @@ const FeedbackDemo = () => {
))
]);
};
Mount(FeedbackDemo, '#demo-feedback');
mount(FeedbackDemo, '#demo-feedback');
```
### Error Handling
@@ -274,7 +274,7 @@ const ErrorDemo = () => {
}, 'Timeout')
]);
};
Mount(ErrorDemo, '#demo-error');
mount(ErrorDemo, '#demo-error');
```
### Custom Messages
@@ -311,7 +311,7 @@ const CustomDemo = () => {
}, 'Security Alert')
]);
};
Mount(CustomDemo, '#demo-custom');
mount(CustomDemo, '#demo-custom');
```
### Multiple Toasts
@@ -339,5 +339,5 @@ const MultipleDemo = () => {
}, 'Show Multiple Toasts')
]);
};
Mount(MultipleDemo, '#demo-multiple');
mount(MultipleDemo, '#demo-multiple');
```
docs/components/tooltip.md
+8 -8
View File
@@ -58,7 +58,7 @@ const BasicDemo = () => {
])
]);
};
Mount(BasicDemo, '#demo-basic');
mount(BasicDemo, '#demo-basic');
```
### Tooltip Positions
@@ -87,7 +87,7 @@ const PositionsDemo = () => {
])
]);
};
Mount(PositionsDemo, '#demo-positions');
mount(PositionsDemo, '#demo-positions');
```
### Tooltip with Icons
@@ -116,7 +116,7 @@ const IconsDemo = () => {
])
]);
};
Mount(IconsDemo, '#demo-icons');
mount(IconsDemo, '#demo-icons');
```
### Form Field Tooltips
@@ -159,7 +159,7 @@ const FormDemo = () => {
])
]);
};
Mount(FormDemo, '#demo-form');
mount(FormDemo, '#demo-form');
```
### Interactive Tooltip
@@ -201,7 +201,7 @@ const InteractiveDemo = () => {
])
]);
};
Mount(InteractiveDemo, '#demo-interactive');
mount(InteractiveDemo, '#demo-interactive');
```
### Rich Tooltip Content
@@ -240,7 +240,7 @@ const RichDemo = () => {
])
]);
};
Mount(RichDemo, '#demo-rich');
mount(RichDemo, '#demo-rich');
```
### Color Variants
@@ -278,7 +278,7 @@ const ColorsDemo = () => {
])
]);
};
Mount(ColorsDemo, '#demo-colors');
mount(ColorsDemo, '#demo-colors');
```
### All Tooltip Positions
@@ -315,5 +315,5 @@ const AllPositionsDemo = () => {
])
]);
};
Mount(AllPositionsDemo, '#demo-all-positions');
mount(AllPositionsDemo, '#demo-all-positions');
```
docs/install.md
+15 -15
View File
@@ -23,15 +23,15 @@ npm install sigpro-ui
```javascript
// 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";
// Create your app
const App = () => {
const count = $(0);
return Tag('div', { class: 'p-8 max-w-md mx-auto' }, [
Tag('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
return h('div', { class: 'p-8 max-w-md mx-auto' }, [
h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
Input({
placeholder: 'Enter your name...'
@@ -49,8 +49,8 @@ const App = () => {
]);
};
// Mount your app
Mount(App, "#app");
// mount your app
mount(App, "#app");
```
### 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
// No need to import anything!
const { $, Mount, Button, Input, Alert } = window;
const { $, mount, Button, Input, Alert } = window;
const App = () => {
const name = $('');
const count = $(0);
return Tag('div', { class: 'max-w-md mx-auto p-4' }, [
Tag('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
return h('div', { class: 'max-w-md mx-auto p-4' }, [
h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
Input({
value: name,
@@ -103,7 +103,7 @@ Simply add the script tag and start using SigProUI:
]);
};
Mount(App, '#app');
mount(App, '#app');
</script>
</body>
</html>
@@ -115,12 +115,12 @@ When you install SigProUI, you get:
### SigPro Core Functions
- `$()` - Reactive signals
- `Watch()` - Watch reactive dependencies
- `Tag()` - Create HTML elements with reactivity
- `If()` - Conditional rendering
- `For()` - List rendering
- `Router()` - Hash-based routing
- `Mount()` - Mount components to DOM
- `watch()` - watch reactive dependencies
- `h()` - Create HTML elements with reactivity
- `when()` - Conditional rendering
- `each()` - List rendering
- `router()` - Hash-based routing
- `mount()` - mount components to DOM
>For more information about SigPro Core visit official Docs [SigPro Docs](https://natxocc.github.io/sigpro/#/)
docs/quick.md
+2 -2
View File
@@ -184,14 +184,14 @@ Input({
const userId = $("123");
const userData = $(null);
Watch(userId, async (id) => {
watch(userId, async (id) => {
loading(true);
userData(await fetch(`/api/user/${id}`).then(r => r.json()));
loading(false);
});
// In template
If(() => userData(), () => Alert({ type: "success" }, userData()?.name))
when(() => userData(), () => Alert({ type: "success" }, userData()?.name))
```
### Modal with Confirm Action
docs/sigpro-ui.min.css
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/sigpro-ui.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
package.json
+4 -3
View File
@@ -8,12 +8,12 @@
"main": "./index.js",
"module": "./index.js",
"devDependencies": {
"@iconify/json": "^2.2.463",
"@iconify/json": "^2.2.465",
"@iconify/tailwind4": "^1.2.3",
"@tailwindcss/cli": "^4.2.2",
"@tailwindcss/cli": "^4.2.4",
"daisyui": "^5.5.19",
"sigpro": "git+http://gitea:3000/natxocc/sigpro",
"tailwindcss": "^4.2.2"
"tailwindcss": "^4.2.4"
},
"exports": {
".": {
@@ -43,6 +43,7 @@
"registry": "https://git.natxocc.com/api/packages/natxocc/npm/"
},
"scripts": {
"del": "bun pm cache rm && rm -f bun.lockb $$ rm -f bun.lock",
"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:cssmin": "tailwindcss -i ./sigpro.css -o ./dist/sigpro-ui.min.css --content './src/**/*.js' --minify && du -h ./dist/sigpro-ui.css",
src/components/Accordion.js
+5 -5
View File
@@ -1,5 +1,5 @@
// components/Accordion.js
import { Tag } from "sigpro";
import { h } from "sigpro";
import { ui, val } from "../utils.js";
/**
@@ -14,16 +14,16 @@ import { ui, val } from "../utils.js";
export const Accordion = (props, children) => {
const { class: className, title, name, open, ...rest } = props;
return Tag("div", {
return h("div", {
...rest,
class: ui('collapse collapse-arrow bg-base-200 mb-2', className),
}, [
Tag("input", {
h("input", {
type: name ? "radio" : "checkbox",
name: name,
checked: val(open),
}),
Tag("div", { class: "collapse-title text-xl font-medium" }, title),
Tag("div", { class: "collapse-content" }, children),
h("div", { class: "collapse-title text-xl font-medium" }, title),
h("div", { class: "collapse-content" }, children),
]);
};
src/components/Alert.js
+5 -5
View File
@@ -1,5 +1,5 @@
// components/Alert.js
import { Tag } from "sigpro";
import { h } from "sigpro";
import { ui, getIcon } from "../utils.js";
/**
@@ -26,16 +26,16 @@ export const Alert = (props, children) => {
const content = children || props.message;
return Tag("div", {
return h("div", {
...rest,
role: "alert",
class: ui('alert', allClasses),
}, () => [
getIcon(iconMap[type]),
Tag("div", { class: "flex-1" }, [
Tag("span", {}, [typeof content === "function" ? content() : content])
h("div", { class: "flex-1" }, [
h("span", {}, [typeof content === "function" ? content() : content])
]),
actions ? Tag("div", { class: "flex-none" }, [
actions ? h("div", { class: "flex-none" }, [
typeof actions === "function" ? actions() : actions
]) : null,
].filter(Boolean));
src/components/Autocomplete.js
+10 -10
View File
@@ -1,5 +1,5 @@
// components/Autocomplete.js
import { $, Tag, For } from "sigpro";
import { $, h, each } from "sigpro";
import { val } from "../utils.js";
import { Input } from "./Input.js";
@@ -22,10 +22,10 @@ export const Autocomplete = (props) => {
const cursor = $(-1);
// 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 = $([]);
Watch(() => {
watch(() => {
const q = String(query()).toLowerCase();
const data = val(items) || [];
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({
label,
class: className,
@@ -75,14 +75,14 @@ export const Autocomplete = (props) => {
onkeydown: nav,
oninput: (e) => {
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);
isOpen(true);
cursor(-1);
},
...rest,
}),
Tag(
h(
"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",
@@ -90,11 +90,11 @@ export const Autocomplete = (props) => {
style: () => (isOpen() && list().length ? "display:block" : "display:none"),
},
[
For(
each(
list,
(opt, i) =>
Tag("li", {}, [
Tag(
h("li", {}, [
h(
"a",
{
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,
),
// 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")),
],
),
]);
src/components/Badge.js
+2 -2
View File
@@ -1,5 +1,5 @@
// components/Badge.js
import { Tag } from "sigpro";
import { h } from "sigpro";
import { ui } from "../utils.js";
/**
@@ -14,7 +14,7 @@ import { ui } from "../utils.js";
export const Badge = (props, children) => {
const { class: className, ...rest } = props;
return Tag("span", {
return h("span", {
...rest,
class: ui('badge', className),
}, children);
src/components/Button.js
+2 -2
View File
@@ -1,5 +1,5 @@
// components/Button.js
import { Tag } from "sigpro";
import { h } from "sigpro";
import { ui, val, getIcon } from "../utils.js";
/**
@@ -16,7 +16,7 @@ import { ui, val, getIcon } from "../utils.js";
export const Button = (props, children) => {
const { class: className, ...rest } = props;
return Tag("button", {
return h("button", {
...rest,
class: ui('btn', className),
disabled: () => val(props.disabled),
src/components/Calendar.js
+20 -20
View File
@@ -1,4 +1,4 @@
import { $, Tag, Watch } from "sigpro";
import { $, h, watch } from "sigpro";
import { val, getIcon } from "../utils.js";
export const Calendar = (props) => {
@@ -66,9 +66,9 @@ export const Calendar = (props) => {
};
const HourSlider = ({ value: hVal, onChange: onHourChange }) => {
return Tag("div", { class: "flex-1" }, [
Tag("div", { class: "flex gap-2 items-center" }, [
Tag("input", {
return h("div", { class: "flex-1" }, [
h("div", { class: "flex gap-2 items-center" }, [
h("input", {
type: "range",
min: 0,
max: 23,
@@ -79,38 +79,38 @@ export const Calendar = (props) => {
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"
),
]),
]);
};
return Tag("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" }, [
Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) },
return h("div", { class: `p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none ${className}` }, [
h("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
h("div", { class: "flex gap-0.5" }, [
h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) },
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]")
),
]),
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" }),
]),
Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) },
h("div", { class: "flex gap-0.5" }, [
h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) },
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]")
),
]),
]),
Tag("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)),
h("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
...["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 year = d.getFullYear();
@@ -120,14 +120,14 @@ export const Calendar = (props) => {
const daysInMonth = new Date(year, month + 1, 0).getDate();
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++) {
const date = new Date(year, month, i);
const dStr = formatDate(date);
nodes.push(
Tag("button", {
h("button", {
type: "button",
class: () => {
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()
? Tag("div", { class: "flex gap-4" }, [
? h("div", { class: "flex gap-4" }, [
HourSlider({
value: startHour,
onChange: (newHour) => startHour(newHour),
src/components/Checkbox.js
+4 -4
View File
@@ -1,5 +1,5 @@
// components/Checkbox.js
import { Tag } from "sigpro";
import { h } from "sigpro";
import { val, ui } from "../utils.js";
/**
@@ -16,15 +16,15 @@ import { val, ui } from "../utils.js";
export const Checkbox = (props) => {
const { class: className, value, toggle, label, ...rest } = props;
const checkEl = Tag("input", {
const checkEl = h("input", {
...rest,
type: "checkbox",
class: () => ui(val(toggle) ? "toggle" : "checkbox", className),
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,
label ? Tag("span", { class: "label-text" }, label) : null,
label ? h("span", { class: "label-text" }, label) : null,
]);
};
src/components/Colorpicker.js
+11 -11
View File
@@ -1,5 +1,5 @@
// components/Colorpicker.js
import { $, Tag, If } from "sigpro";
import { $, h, when} from "sigpro";
import { val, ui } from "../utils.js";
/**
@@ -30,8 +30,8 @@ export const Colorpicker = (props) => {
const getColor = () => val(value) || "#000000";
return Tag("div", { class: ui('relative w-fit', className) }, [
Tag(
return h("div", { class: ui('relative w-fit', className) }, [
h(
"button",
{
type: "button",
@@ -43,27 +43,27 @@ export const Colorpicker = (props) => {
...rest,
},
[
Tag("div", {
h("div", {
class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
style: () => `background-color: ${getColor()}`,
}),
label ? Tag("span", { class: "opacity-80" }, label) : null,
label ? h("span", { class: "opacity-80" }, label) : null,
],
),
If(isOpen, () =>
Tag(
when(isOpen, () =>
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",
onclick: (e) => e.stopPropagation(),
},
[
Tag(
h(
"div",
{ class: "grid grid-cols-8 gap-1" },
palette.map((c) =>
Tag("button", {
h("button", {
type: "button",
style: `background-color: ${c}`,
class: () => {
@@ -82,8 +82,8 @@ export const Colorpicker = (props) => {
),
),
If(isOpen, () =>
Tag("div", {
when(isOpen, () =>
h("div", {
class: "fixed inset-0 z-[100]",
onclick: () => isOpen(false),
}),
src/components/Datepicker.js
+6 -6
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 { Input } from "./Input.js";
import { Calendar } from "./Calendar.js";
@@ -12,7 +12,7 @@ export const Datepicker = (props) => {
// Formatear el valor para mostrarlo en el input
const displayValue = $("");
Watch(() => {
watch(() => {
const v = val(value);
if (!v) {
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({
label,
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
@@ -56,8 +56,8 @@ export const Datepicker = (props) => {
...rest,
}),
If(isOpen, () =>
Tag("div", {
when(isOpen, () =>
h("div", {
class: "absolute left-0 mt-2 z-[100]",
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) })),
]);
};
src/components/Drawer.js
+7 -7
View File
@@ -1,5 +1,5 @@
// components/Drawer.js
import { Tag } from "sigpro";
import { h } from "sigpro";
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)}`;
return Tag("div", {
return h("div", {
...rest,
class: ui('drawer', className),
}, [
Tag("input", {
h("input", {
id: drawerId,
type: "checkbox",
class: "drawer-toggle",
@@ -27,18 +27,18 @@ export const Drawer = (props, children) => {
if (typeof open === "function") open(e.target.checked);
}
}),
Tag("div", { class: "drawer-content" }, [
h("div", { class: "drawer-content" }, [
typeof content === "function" ? content() : content
]),
Tag("div", { class: "drawer-side" }, [
Tag("label", {
h("div", { class: "drawer-side" }, [
h("label", {
for: drawerId,
class: "drawer-overlay",
onclick: () => {
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
])
])
src/components/Dropdown.js
+8 -8
View File
@@ -1,5 +1,5 @@
// components/Dropdown.js
import { Tag, For, Watch } from "sigpro";
import { h, each, watch } from "sigpro";
import { ui } from "../utils.js";
/**
@@ -28,11 +28,11 @@ if (typeof window !== 'undefined' && !window.__dropdownHandlerRegistered) {
export const Dropdown = (props) => {
const { class: className, label, icon, items, ...rest } = props;
return Tag("details", {
return h("details", {
...rest,
class: ui('dropdown', className),
}, [
Tag("summary", {
h("summary", {
class: "btn m-1 flex items-center gap-2 list-none cursor-pointer",
style: "display: inline-flex;",
onclick: (e) => {
@@ -48,15 +48,15 @@ export const Dropdown = (props) => {
() => icon ? (typeof icon === "function" ? icon() : icon) : null,
() => label ? (typeof label === "function" ? label() : label) : null
]),
Tag("ul", {
h("ul", {
tabindex: "-1",
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 || []);
return currentItems.map(item =>
Tag("li", {}, [
Tag("a", {
h("li", {}, [
h("a", {
class: item.class || "",
onclick: (e) => {
if (item.onclick) item.onclick(e);
@@ -67,8 +67,8 @@ export const Dropdown = (props) => {
}
}
}, [
item.icon ? Tag("span", {}, item.icon) : null,
Tag("span", {}, item.label)
item.icon ? h("span", {}, item.icon) : null,
h("span", {}, item.label)
])
])
);
src/components/Fab.js
+6 -6
View File
@@ -1,5 +1,5 @@
// components/Fab.js
import { Tag } from "sigpro";
import { h } from "sigpro";
import { val, ui, getIcon } from "../utils.js";
/**
@@ -16,14 +16,14 @@ import { val, ui, getIcon } from "../utils.js";
export const Fab = (props) => {
const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
return Tag(
return h(
"div",
{
...rest,
class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className),
},
[
Tag(
h(
"div",
{
tabindex: 0,
@@ -37,9 +37,9 @@ export const Fab = (props) => {
),
...val(actions).map((act) =>
Tag("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,
Tag(
h("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
act.label ? h("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
h(
"button",
{
type: "button",
src/components/Fetch.js
+3 -3
View File
@@ -1,4 +1,4 @@
import { $$, Tag, isFunc } from "sigpro";
import { $$, h, isFunc } from "sigpro";
const _cache = new Map();
@@ -42,10 +42,10 @@ export const Request = async (key, url, opts = {}) => {
export const Response = ({ name, loading, error }, { children }) => {
const store = getStore(name);
return Tag("div", { style: "display:contents" }, [
return h("div", { style: "display:contents" }, [
() => {
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;
return null;
}

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