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

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

Browse Source
This commit is contained in:
Natxo
2026-04-22 08:27:59 +02:00
parent 65d78ca215
commit 5a5f593025
63 changed files with 610 additions and 748 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/Accordion.js
View File

@@ -1,15 +0,0 @@
// components/Accordion.js
import { Tag } from "sigpro";
import { Collapse } from "./Collapse.js";
export const Accordion = (props) => {
const name = props.name || `accordion-${Math.random().toString(36).slice(2, 9)}`;
return Tag("div", { class: `space-y-2 ${props.class ?? ''}` },
props.items.map(item => Collapse({
...item,
name,
type: "radio",
class: item.class
}, item.children))
);
};

7
components/Collapse.js
View File

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

4
components/Input.js
View File

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

84
components/_Base.js
View File

@@ -1,84 +0,0 @@
import { $, Tag } from "sigpro";
import { Tag } from "sigpro";
export const Alert = (props, children) => Tag("div", { ...props, class: `alert ${props.class ?? ''}` }, children);
export const Badge = (props, children) => Tag("span", { ...props, class: `badge ${props.class ?? ''}` }, children);
export const Button = (props, children) => Tag("button", { ...props, class: `btn ${props.class ?? ''}` }, children);
export const Card = (props, children) => Tag("div", { ...props, class: `card ${props.class ?? ''}` }, children);
export const CardTitle = (props, children) => Tag("div", { ...props, class: `card-title ${props.class ?? ''}` }, children);
export const CardBody = (props, children) => Tag("div", { ...props, class: `card-body ${props.class ?? ''}` }, children);
export const CardActions = (props, children) => Tag("div", { ...props, class: `card-actions ${props.class ?? ''}` }, children);
export const Carousel = (props, children) => Tag("div", { ...props, class: `carousel ${props.class ?? ''}` }, children);
export const CarouselItem = (props, children) => Tag("div", { ...props, class: `carousel-item ${props.class ?? ''}` }, children);
export const Chat = (props, children) => Tag("div", { ...props, class: `chat ${props.class ?? ''}` }, children);
export const ChatBubble = (props, children) => Tag("div", { ...props, class: `chat-bubble ${props.class ?? ''}` }, children);
export const Checkbox = (props) => Tag("input", { ...props, type: "checkbox", class: `checkbox ${props.class ?? ''}` });
export const Collapse = (props, children) => Tag("div", { ...props, class: `collapse ${props.class ?? ''}` }, children);
export const Divider = (props) => Tag("div", { ...props, class: `divider ${props.class ?? ''}` });
export const Drawer = (props, children) => Tag("div", { ...props, class: `drawer ${props.class ?? ''}` }, children);
export const Dropdown = (props, children) => Tag("details", { ...props, class: `dropdown ${props.class ?? ''}` }, children);
export const Fab = (props, children) => Tag("div", { ...props, class: `fab ${props.class ?? ''}` }, children);
export const Fieldset = (props, children) => Tag("fieldset", { ...props, class: `fieldset ${props.class ?? ''}` }, children);
export const Indicator = (props, children) => Tag("div", { ...props, class: `indicator ${props.class ?? ''}` }, children);
export const Input = (props) => Tag("input", { ...props, class: `input ${props.class ?? ''}` });
export const Kbd = (props, children) => Tag("kbd", { ...props, class: `kbd ${props.class ?? ''}` }, children);
export const Label = (props, children) => Tag("label", { ...props, class: `label ${props.class ?? ''}` }, children);
export const List = (props, children) => Tag("ul", { ...props, class: `list ${props.class ?? ''}` }, children);
export const Menu = (props, children) => Tag("ul", { ...props, class: `menu ${props.class ?? ''}` }, children);
export const Modal = (props, children) => Tag("dialog", { ...props, class: `modal ${props.class ?? ''}` }, children);
export const Navbar = (props, children) => Tag("div", { ...props, class: `navbar ${props.class ?? ''}` }, children);
export const Radio = (props) => Tag("input", { ...props, type: "radio", class: `radio ${props.class ?? ''}` });
export const Range = (props) => Tag("input", { ...props, type: "range", class: `range ${props.class ?? ''}` });
export const Rating = (props, children) => Tag("div", { ...props, class: `rating ${props.class ?? ''}` }, children);
export const Select = (props, children) => Tag("select", { ...props, class: `select ${props.class ?? ''}` }, children);
export const Skeleton = (props) => Tag("div", { ...props, class: `skeleton ${props.class ?? ''}` });
export const Stack = (props, children) => Tag("div", { ...props, class: `stack ${props.class ?? ''}` }, children);
export const Stat = (props, children) => Tag("div", { ...props, class: `stat ${props.class ?? ''}` }, children);
export const Stats = (props, children) => Tag("div", { ...props, class: `stats ${props.class ?? ''}` }, children);
export const Steps = (props, children) => Tag("ul", { ...props, class: `steps ${props.class ?? ''}` }, children);
export const Step = (props, children) => Tag("li", { ...props, class: `step ${props.class ?? ''}` }, children);
export const Swap = (props, children) => Tag("label", { ...props, class: `swap ${props.class ?? ''}` }, children);
export const Table = (props, children) => Tag("table", { ...props, class: `table ${props.class ?? ''}` }, children);
export const Tab = (props, children) => Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, children);
export const Tabs = (props, children) => Tag("div", { ...props, class: `tabs ${props.class ?? ''}` }, children);
export const TabContent = (props, children) => Tag("div", { ...props, class: `tab-content ${props.class ?? ''}` }, children);
export const Textarea = (props) => Tag("textarea", { ...props, class: `textarea ${props.class ?? ''}` });
export const Timeline = (props, children) => Tag("ul", { ...props, class: `timeline ${props.class ?? ''}` }, children);
export const Toast = (props, children) => Tag("div", { ...props, class: `toast ${props.class ?? ''}` }, children);
export const Toggle = (props) => Tag("input", { ...props, type: "checkbox", class: `toggle ${props.class ?? ''}` });
export const Tooltip = (props, children) => Tag("div", { ...props, class: `tooltip ${props.class ?? ''}` }, children);
// Complex
export const TabClose = (props) => Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, [
Tag("span", { class: "flex items-center" }, [
p.label,
Tag("span", {
class: "icon-[lucide--x] w-3.5 h-3.5 ml-2 cursor-pointer hover:opacity-70",
onclick: (e) => { e.stopPropagation(); p.onClose?.(e); }
})
])
]);
export const TabItems = (props) => {
const items = typeof p.items === "function" ? p.items : () => p.items || [];
return For(
items,
(item, idx) => {
const TabComp = item.closable ? TabClose : Tab;
return [
TabComp({
label: item.label,
class: () => p.activeIndex() === idx ? "tab-active" : "",
onclick: (e) => { e.preventDefault(); p.activeIndex(idx); },
onClose: () => p.onClose?.(idx, item)
}),
TabContent({
style: () => `display: ${p.activeIndex() === idx ? "block" : "none"};`
}, typeof item.content === "function" ? item.content() : item.content)
];
},
(item, idx) => item.id ?? idx
);
};

22
components/accordion.js Normal file
View File

@@ -0,0 +1,22 @@
// components/Accordion.js
import { Tag } 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 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)
]);
};

0
components/Alert.js → components/alert.js
View File

10
components/Autocomplete.js → components/autocomplete.js
View File

@@ -10,15 +10,15 @@ export const Autocomplete = (props) => {
Watch(() => {
const v = typeof props.value === "function" ? props.value() : props.value;
return v || "";
}, (newVal) => query(newVal));
}, (newVal) => setTimeout(() => query(newVal), 0));
Watch(() => {
const q = String(query()).toLowerCase();
const allItems = typeof props.items === "function" ? props.items() : props.items;
const filtered = q
? allItems.filter((item) =>
(typeof item === "string" ? item : item.label).toLowerCase().includes(q)
)
(typeof item === "string" ? item : item.label).toLowerCase().includes(q)
)
: allItems;
filteredItems(filtered);
});
@@ -57,8 +57,8 @@ export const Autocomplete = (props) => {
...props,
type: "text",
class: "grow",
value: query,
placeholder: props.placeholder || "Buscar...",
value: query,
onfocus: () => isOpen(true),
onblur: () => setTimeout(() => isOpen(false), 150),
onkeydown: handleKeyDown,
@@ -71,7 +71,7 @@ export const Autocomplete = (props) => {
}
})
]),
Tag("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"};`

0
components/Badge.js → components/badge.js
View File

0
components/Button.js → components/button.js
View File

0
components/Calendar.js → components/calendar.js
View File

0
components/Card.js → components/card.js
View File

0
components/Carousel.js → components/carousel.js
View File

0
components/Chat.js → components/chat.js
View File

0
components/Checkbox.js → components/checkbox.js
View File

0
components/Colorpicker.js → components/colorpicker.js
View File

2
components/Datepicker.js → components/datepicker.js
View File

@@ -1,6 +1,6 @@
// components/Datepicker.js
import { $, Tag, If, Watch } from "sigpro";
import { Calendar } from "./Calendar.js";
import { Calendar } from "./calendar.js";
export const Datepicker = (props) => {
const isOpen = $(false);

0
components/Divider.js → components/divider.js
View File

0
components/Drawer.js → components/drawer.js
View File

0
components/Dropdown.js → components/dropdown.js
View File

0
components/Fab.js → components/fab.js
View File

0
components/Fieldset.js → components/fieldset.js
View File

0
components/Fileinput.js → components/fileinput.js
View File

0
components/Icon.js → components/icon.js
View File

0
components/Indicator.js → components/indicator.js
View File

13
components/input.js Normal file
View File

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

0
components/Kdb.js → components/kbd.js
View File

0
components/Loading.js → components/loading.js
View File

0
components/Menu.js → components/menu.js
View File

0
components/Modal.js → components/modal.js
View File

0
components/Navbar.js → components/navbar.js
View File

0
components/Radial.js → components/radial.js
View File

0
components/Radio.js → components/radio.js
View File

0
components/Range.js → components/range.js
View File

0
components/Rating.js → components/rating.js
View File

15
components/Select.js → components/select.js
View File

@@ -6,8 +6,8 @@ export const Select = (props, children) => {
return Tag("select", { ...props, class: `select ${props.class ?? ''}` }, children);
};
export const Options = (props) => {
const placeholderOption = props.placeholder
export const SelectItems = (props) => {
const placeholderOption = props.placeholder
? Tag("option", { disabled: props.placeholderDisabled ?? true, selected: true }, props.placeholder)
: null;
@@ -22,4 +22,13 @@ export const Options = (props) => {
);
return placeholderOption ? [placeholderOption, dynamicOptions] : dynamicOptions;
};
};
export const SelectLabel = (props, children) => Tag("label", { class: `${props.float ? 'floating-label' : 'select'}` },
[
Tag("span", { class: props.float ? '' : 'label opacity-50' }, props.label),
props.left ?? null,
Tag("select", { ...props, class: `${props.float ? 'select' : ''} ${props.class ?? ''}` }, children),
props.right ?? null
]
);

0
components/Skeleton.js → components/skeleton.js
View File

0
components/Stack.js → components/stack.js
View File

0
components/Stat.js → components/stat.js
View File

0
components/Steps.js → components/steps.js
View File

0
components/Swap.js → components/swap.js
View File

2
components/Table.js → components/table.js
View File

@@ -6,7 +6,7 @@ export const Table = (props, children) => {
return Tag("table", { ...props, class: `table ${props.class ?? ''}` }, children);
};
export const Rows = (props) => {
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) ?

0
components/Tabs.js → components/tabs.js
View File

0
components/Textarea.js → components/textarea.js
View File

0
components/Textrotate.js → components/textrotate.js
View File

0
components/Timeline.js → components/timeline.js
View File

0
components/Toast.js → components/toast.js
View File

0
components/Toggle.js → components/toggle.js
View File

0
components/Tooltip.js → components/tooltip.js
View File

20
dist/sigpro-ui.css vendored
View File

@@ -958,26 +958,6 @@
}
}
}
.collapse-plus {
@layer daisyui.l1.l2 {
> .collapse-title:after {
position: absolute;
display: block;
height: 0.5rem;
width: 0.5rem;
@media (prefers-reduced-motion: no-preference) {
transition-property: all;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
top: 0.9rem;
inset-inline-end: 1.4rem;
--tw-content: "+";
content: var(--tw-content);
pointer-events: none;
}
}
}
.dropdown {
@layer daisyui.l1.l2.l3 {
position: relative;

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

@@ -436,25 +436,21 @@ if (typeof window < "u")
window[s] = (t, r) => S(e, t, r);
});
// components/Collapse.js
var exports_Collapse = {};
__export(exports_Collapse, {
Collapse: () => Collapse
});
var Collapse = (props, children) => {
children === undefined && (children = props, props = {});
return S("div", { ...props, class: `collapse ${props.class ?? ""}` }, children);
};
// components/Accordion.js
var Accordion = (props) => {
const name = props.name || `accordion-${Math.random().toString(36).slice(2, 9)}`;
return S("div", { class: `space-y-2 ${props.class ?? ""}` }, props.items.map((item) => Collapse({
...item,
name,
type: "radio",
class: item.class
}, item.children)));
if (props.items && Array.isArray(props.items)) {
return S("div", { class: `space-y-2 ${props.class ?? ""}` }, props.items.map((item) => S("div", { class: `collapse ${item.class ?? ""}` }, [
S("input", { type: "radio", name, checked: item.open }),
S("div", { class: "collapse-title text-xl font-medium" }, item.title),
S("div", { class: "collapse-content" }, item.children)
])));
}
return S("div", { class: `collapse ${props.class ?? ""}` }, [
S("input", { type: "radio", name, checked: props.open }),
S("div", { class: "collapse-title text-xl font-medium" }, props.title),
S("div", { class: "collapse-content" }, props.children)
]);
};
// components/Alert.js
@@ -480,7 +476,7 @@ var Autocomplete = (props) => {
R(() => {
const v2 = typeof props.value === "function" ? props.value() : props.value;
return v2 || "";
}, (newVal) => query(newVal));
}, (newVal) => setTimeout(() => query(newVal), 0));
R(() => {
const q2 = String(query()).toLowerCase();
const allItems = typeof props.items === "function" ? props.items() : props.items;
@@ -519,9 +515,9 @@ var Autocomplete = (props) => {
S("input", {
...props,
type: "text",
class: "grow",
value: query,
class: "input grow",
placeholder: props.placeholder || "Buscar...",
value: query,
onfocus: () => isOpen(true),
onblur: () => setTimeout(() => isOpen(false), 150),
onkeydown: handleKeyDown,
@@ -1126,9 +1122,16 @@ var Indicator = (props, children) => {
// components/Input.js
var exports_Input = {};
__export(exports_Input, {
InputLabel: () => InputLabel,
Input: () => Input
});
var Input = (props) => S("input", { ...props, class: `input ${props.class ?? ""}` });
var InputLabel = (props) => S("label", { class: `${props.float ? "floating-label" : "input"}` }, [
S("span", { class: props.float ? "" : "label opacity-50" }, props.label),
props.left ?? null,
S("input", { ...props, class: `${props.float ? "input" : ""} ${props.class ?? ""}` }),
props.right ?? null
]);
// components/Kdb.js
var exports_Kdb = {};
@@ -1301,14 +1304,15 @@ var SkeletonText = (props) => {
// components/Select.js
var exports_Select = {};
__export(exports_Select, {
Select: () => Select,
Options: () => Options
SelectLabel: () => SelectLabel,
SelectItems: () => SelectItems,
Select: () => Select
});
var Select = (props, children) => {
children === undefined && (children = props, props = {});
return S("select", { ...props, class: `select ${props.class ?? ""}` }, children);
};
var Options = (props) => {
var SelectItems = (props) => {
const placeholderOption = props.placeholder ? S("option", { disabled: props.placeholderDisabled ?? true, selected: true }, props.placeholder) : null;
const dynamicOptions = K(() => [...typeof props.items === "function" ? props.items() : props.items || []], (item) => {
const val2 = typeof item === "string" ? item : item.value;
@@ -1317,6 +1321,12 @@ var Options = (props) => {
}, props.keyFn || ((item) => typeof item === "string" ? item : item.value));
return placeholderOption ? [placeholderOption, dynamicOptions] : dynamicOptions;
};
var SelectLabel = (props, children) => S("label", { class: `${props.float ? "floating-label" : "select"}` }, [
S("span", { class: props.float ? "" : "label opacity-50" }, props.label),
props.left ?? null,
S("select", { ...props, class: `${props.float ? "select" : ""} ${props.class ?? ""}` }, children),
props.right ?? null
]);
// components/Stack.js
var exports_Stack = {};
@@ -1371,14 +1381,14 @@ var Swap = (props) => {
// components/Table.js
var exports_Table = {};
__export(exports_Table, {
Table: () => Table,
Rows: () => Rows
TableItems: () => TableItems,
Table: () => Table
});
var Table = (props, children) => {
children === undefined && (children = props, props = {});
return S("table", { ...props, class: `table ${props.class ?? ""}` }, children);
};
var Rows = (props) => {
var TableItems = (props) => {
const itemArray = typeof props.items === "function" ? props.items() : props.items || [];
const thead = props.header !== false && props.columns?.some((col) => col.label) ? S("thead", {}, S("tr", {}, props.columns.map((col) => S("th", { class: col.class }, col.label)))) : null;
const tbody = S("tbody", {}, [
@@ -1578,7 +1588,6 @@ var Components = {
...exports_Carousel,
...exports_Chat,
...exports_Checkbox,
...exports_Collapse,
...exports_Colorpicker,
...exports_Datepicker,
...exports_Drawer,

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

File diff suppressed because one or more lines are too long

61
dist/sigpro-ui.js vendored
View File

@@ -467,25 +467,21 @@
window[s] = (t, r) => S(e, t, r);
});
// components/Collapse.js
var exports_Collapse = {};
__export(exports_Collapse, {
Collapse: () => Collapse
});
var Collapse = (props, children) => {
children === undefined && (children = props, props = {});
return S("div", { ...props, class: `collapse ${props.class ?? ""}` }, children);
};
// components/Accordion.js
var Accordion = (props) => {
const name = props.name || `accordion-${Math.random().toString(36).slice(2, 9)}`;
return S("div", { class: `space-y-2 ${props.class ?? ""}` }, props.items.map((item) => Collapse({
...item,
name,
type: "radio",
class: item.class
}, item.children)));
if (props.items && Array.isArray(props.items)) {
return S("div", { class: `space-y-2 ${props.class ?? ""}` }, props.items.map((item) => S("div", { class: `collapse ${item.class ?? ""}` }, [
S("input", { type: "radio", name, checked: item.open }),
S("div", { class: "collapse-title text-xl font-medium" }, item.title),
S("div", { class: "collapse-content" }, item.children)
])));
}
return S("div", { class: `collapse ${props.class ?? ""}` }, [
S("input", { type: "radio", name, checked: props.open }),
S("div", { class: "collapse-title text-xl font-medium" }, props.title),
S("div", { class: "collapse-content" }, props.children)
]);
};
// components/Alert.js
@@ -511,7 +507,7 @@
R(() => {
const v2 = typeof props.value === "function" ? props.value() : props.value;
return v2 || "";
}, (newVal) => query(newVal));
}, (newVal) => setTimeout(() => query(newVal), 0));
R(() => {
const q2 = String(query()).toLowerCase();
const allItems = typeof props.items === "function" ? props.items() : props.items;
@@ -550,9 +546,9 @@
S("input", {
...props,
type: "text",
class: "grow",
value: query,
class: "input grow",
placeholder: props.placeholder || "Buscar...",
value: query,
onfocus: () => isOpen(true),
onblur: () => setTimeout(() => isOpen(false), 150),
onkeydown: handleKeyDown,
@@ -1157,9 +1153,16 @@
// components/Input.js
var exports_Input = {};
__export(exports_Input, {
InputLabel: () => InputLabel,
Input: () => Input
});
var Input = (props) => S("input", { ...props, class: `input ${props.class ?? ""}` });
var InputLabel = (props) => S("label", { class: `${props.float ? "floating-label" : "input"}` }, [
S("span", { class: props.float ? "" : "label opacity-50" }, props.label),
props.left ?? null,
S("input", { ...props, class: `${props.float ? "input" : ""} ${props.class ?? ""}` }),
props.right ?? null
]);
// components/Kdb.js
var exports_Kdb = {};
@@ -1332,14 +1335,15 @@
// components/Select.js
var exports_Select = {};
__export(exports_Select, {
Select: () => Select,
Options: () => Options
SelectLabel: () => SelectLabel,
SelectItems: () => SelectItems,
Select: () => Select
});
var Select = (props, children) => {
children === undefined && (children = props, props = {});
return S("select", { ...props, class: `select ${props.class ?? ""}` }, children);
};
var Options = (props) => {
var SelectItems = (props) => {
const placeholderOption = props.placeholder ? S("option", { disabled: props.placeholderDisabled ?? true, selected: true }, props.placeholder) : null;
const dynamicOptions = K(() => [...typeof props.items === "function" ? props.items() : props.items || []], (item) => {
const val2 = typeof item === "string" ? item : item.value;
@@ -1348,6 +1352,12 @@
}, props.keyFn || ((item) => typeof item === "string" ? item : item.value));
return placeholderOption ? [placeholderOption, dynamicOptions] : dynamicOptions;
};
var SelectLabel = (props, children) => S("label", { class: `${props.float ? "floating-label" : "select"}` }, [
S("span", { class: props.float ? "" : "label opacity-50" }, props.label),
props.left ?? null,
S("select", { ...props, class: `${props.float ? "select" : ""} ${props.class ?? ""}` }, children),
props.right ?? null
]);
// components/Stack.js
var exports_Stack = {};
@@ -1402,14 +1412,14 @@
// components/Table.js
var exports_Table = {};
__export(exports_Table, {
Table: () => Table,
Rows: () => Rows
TableItems: () => TableItems,
Table: () => Table
});
var Table = (props, children) => {
children === undefined && (children = props, props = {});
return S("table", { ...props, class: `table ${props.class ?? ""}` }, children);
};
var Rows = (props) => {
var TableItems = (props) => {
const itemArray = typeof props.items === "function" ? props.items() : props.items || [];
const thead = props.header !== false && props.columns?.some((col) => col.label) ? S("thead", {}, S("tr", {}, props.columns.map((col) => S("th", { class: col.class }, col.label)))) : null;
const tbody = S("tbody", {}, [
@@ -1609,7 +1619,6 @@
...exports_Carousel,
...exports_Chat,
...exports_Checkbox,
...exports_Collapse,
...exports_Colorpicker,
...exports_Datepicker,
...exports_Drawer,

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

241
docs/components/accordion.md
View File

@@ -12,21 +12,10 @@ Collapsible accordion component for organizing content into expandable sections.
| :--- | :--- | :--- | :--- |
| `title` | `string \| VNode \| Signal` | Required | Accordion section title |
| `open` | `boolean \| Signal<boolean>` | `false` | Whether the accordion is expanded |
| `name` | `string` | `-` | Group name for radio-style accordions (only one open at a time) |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `name` | `string` | `auto-generated` | Group name for radio-style accordions |
| `class` | `string` | `''` | Additional CSS classes |
| `children` | `VNode \| Array<VNode>` | Required | Content to display when expanded |
## Styling
Accordion supports all **daisyUI Collapse classes**:
| Category | Keywords | Description |
| :--- | :--- | :--- |
| Type | `collapse-arrow`, `collapse-plus`, `collapse-minus` | Expand indicator style |
| Color | `collapse-primary`, `collapse-secondary`, `collapse-accent` | Color variants |
| Background | `bg-base-100`, `bg-base-200` | Background colors |
> For further details, check the [daisyUI Collapse Documentation](https://daisyui.com/components/collapse) – Full reference for CSS classes.
| `items` | `Array` | `-` | Array of accordion items (alternative API) |
## Live Examples
@@ -39,7 +28,9 @@ Accordion supports all **daisyUI Collapse classes**:
</div>
</div>
```javascript
```js
const { Accordion, Div, Mount } = window;
const BasicDemo = () => {
const open1 = $(false);
const open2 = $(false);
@@ -49,24 +40,18 @@ const BasicDemo = () => {
Accordion({
title: 'Section 1',
open: open1,
onclick: () => open1(!open1())
}, [
Div({ class: 'p-2' }, 'Content for section 1. This is a basic accordion section.')
]),
children: Div({ class: 'p-2' }, 'Content for section 1. This is a basic accordion section.')
}),
Accordion({
title: 'Section 2',
open: open2,
onclick: () => open2(!open2())
}, [
Div({ class: 'p-2' }, 'Content for section 2. You can put any content here.')
]),
children: Div({ class: 'p-2' }, 'Content for section 2. You can put any content here.')
}),
Accordion({
title: 'Section 3',
open: open3,
onclick: () => open3(!open3())
}, [
Div({ class: 'p-2' }, 'Content for section 3. Accordions are great for FAQs.')
])
children: Div({ class: 'p-2' }, 'Content for section 3. Accordions are great for FAQs.')
})
]);
};
Mount(BasicDemo, '#demo-basic');
@@ -81,40 +66,78 @@ Mount(BasicDemo, '#demo-basic');
</div>
</div>
```javascript
```js
const { Accordion, Div, Mount } = window;
const GroupDemo = () => {
const openSection = $('section1');
return Div({ class: 'flex flex-col gap-2' }, [
Accordion({
name: 'group',
title: 'Section 1',
name: 'group',
open: () => openSection() === 'section1',
onclick: () => openSection('section1')
}, [
Div({ class: 'p-2' }, 'Content for section 1. Only one section can be open at a time.')
]),
children: Div({ class: 'p-2' }, 'Content for section 1. Only one section can be open at a time.')
}),
Accordion({
name: 'group',
title: 'Section 2',
name: 'group',
open: () => openSection() === 'section2',
onclick: () => openSection('section2')
}, [
Div({ class: 'p-2' }, 'Content for section 2. Opening this will close section 1.')
]),
children: Div({ class: 'p-2' }, 'Content for section 2. Opening this will close section 1.')
}),
Accordion({
title: 'Section 3',
name: 'group',
title: 'Section 3',
open: () => openSection() === 'section3',
onclick: () => openSection('section3')
}, [
Div({ class: 'p-2' }, 'Content for section 3. This is useful for FAQ sections.')
])
children: Div({ class: 'p-2' }, 'Content for section 3. This is useful for FAQ sections.')
})
]);
};
Mount(GroupDemo, '#demo-group');
```
### Using Items Array
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-items" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```js
const { Accordion, Div, Mount } = window;
const ItemsDemo = () => {
const openItems = $({
item1: true,
item2: false,
item3: false
});
return Accordion({
items: [
{
title: 'First Item',
open: () => openItems().item1,
children: Div({ class: 'p-2' }, 'This is the content of the first item.')
},
{
title: 'Second Item',
open: () => openItems().item2,
children: Div({ class: 'p-2' }, 'This is the content of the second item.')
},
{
title: 'Third Item',
open: () => openItems().item3,
children: Div({ class: 'p-2' }, 'This is the content of the third item.')
}
]
});
};
Mount(ItemsDemo, '#demo-items');
```
### FAQ Accordion
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
@@ -124,26 +147,25 @@ Mount(GroupDemo, '#demo-group');
</div>
</div>
```javascript
```js
const { Accordion, Div, Mount } = window;
const FaqDemo = () => {
const openFaq = $('faq1');
const faqs = [
{ id: 'faq1', question: 'What is this component?', answer: 'This is an accordion component built with DaisyUI and Tailwind CSS for creating collapsible content sections.' },
{ id: 'faq2', question: 'How do I use it?', answer: 'Simply import the Accordion component and pass title and children props. Use the open prop to control expansion.' },
{ id: 'faq3', question: 'Can I have multiple open?', answer: 'Yes! By default, accordions can be opened independently. Use the name prop to create groups where only one can be open.' },
{ id: 'faq4', question: 'Is it accessible?', answer: 'Yes, the accordion uses proper ARIA attributes and keyboard navigation support.' }
{ id: 'faq2', question: 'How do I use it?', answer: 'Simply import the Accordion component and pass title and children props.' },
{ id: 'faq3', question: 'Can I have multiple open?', answer: 'Yes! By default, accordions can be opened independently.' }
];
return Div({ class: 'flex flex-col gap-2' }, faqs.map(faq =>
Accordion({
title: faq.question,
name: 'faq-group',
title: faq.question,
open: () => openFaq() === faq.id,
onclick: () => openFaq(openFaq() === faq.id ? '' : faq.id)
}, [
Div({ class: 'p-2 text-sm' }, faq.answer)
])
children: Div({ class: 'p-2 text-sm' }, faq.answer)
})
));
};
Mount(FaqDemo, '#demo-faq');
@@ -158,7 +180,9 @@ Mount(FaqDemo, '#demo-faq');
</div>
</div>
```javascript
```js
const { Accordion, Div, Span, Mount } = window;
const RichDemo = () => {
const open1 = $(true);
const open2 = $(false);
@@ -167,9 +191,7 @@ const RichDemo = () => {
Accordion({
title: Span({ class: 'flex items-center gap-2' }, ['📊', 'Statistics']),
open: open1,
onclick: () => open1(!open1())
}, [
Div({ class: 'p-2' }, [
children: Div({ class: 'p-2' }, [
Div({ class: 'grid grid-cols-2 gap-4' }, [
Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
Div({ class: 'stat-title' }, 'Users'),
@@ -178,24 +200,14 @@ const RichDemo = () => {
Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
Div({ class: 'stat-title' }, 'Revenue'),
Div({ class: 'stat-value text-lg' }, '$45,678')
]),
Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
Div({ class: 'stat-title' }, 'Growth'),
Div({ class: 'stat-value text-lg text-success' }, '+23%')
]),
Div({ class: 'stat bg-base-100 rounded-lg p-3' }, [
Div({ class: 'stat-title' }, 'Active'),
Div({ class: 'stat-value text-lg' }, '89%')
])
])
])
]),
}),
Accordion({
title: Span({ class: 'flex items-center gap-2' }, ['👥', 'Team Members']),
open: open2,
onclick: () => open2(!open2())
}, [
Div({ class: 'p-2 space-y-2' }, [
children: Div({ class: 'p-2 space-y-2' }, [
Div({ class: 'flex items-center gap-3 p-2 hover:bg-base-100 rounded-lg' }, [
Div({ class: 'avatar placeholder' }, [
Div({ class: 'bg-primary text-primary-content rounded-full w-10 h-10 flex items-center justify-center' }, 'JD')
@@ -204,18 +216,9 @@ const RichDemo = () => {
Div({ class: 'font-medium' }, 'John Doe'),
Div({ class: 'text-sm opacity-70' }, 'Developer')
])
]),
Div({ class: 'flex items-center gap-3 p-2 hover:bg-base-100 rounded-lg' }, [
Div({ class: 'avatar placeholder' }, [
Div({ class: 'bg-secondary text-secondary-content rounded-full w-10 h-10 flex items-center justify-center' }, 'JS')
]),
Div({ class: 'flex-1' }, [
Div({ class: 'font-medium' }, 'Jane Smith'),
Div({ class: 'text-sm opacity-70' }, 'Designer')
])
])
])
])
})
]);
};
Mount(RichDemo, '#demo-rich');
@@ -230,7 +233,9 @@ Mount(RichDemo, '#demo-rich');
</div>
</div>
```javascript
```js
const { Accordion, Div, Span, Button, Input, Radio, Mount } = window;
const FormAccordion = () => {
const openStep = $('step1');
const formData = $({
@@ -255,18 +260,15 @@ const FormAccordion = () => {
};
const handleSubmit = () => {
Toast('Form submitted!', 'alert-success', 2000);
console.log(formData());
window.Toast('Form submitted!', 'alert-success', 2000);
};
return Div({ class: 'flex flex-col gap-2' }, [
Accordion({
title: Span({ class: 'flex items-center gap-2' }, ['1️⃣', 'Personal Information']),
name: 'form-steps',
title: Span({ class: 'flex items-center gap-2' }, ['1️⃣', 'Personal Information']),
open: () => openStep() === 'step1',
onclick: () => openStep('step1')
}, [
Div({ class: 'p-4 space-y-4' }, [
children: Div({ class: 'p-4 space-y-4' }, [
Input({
label: 'Full Name',
value: () => formData().name,
@@ -288,14 +290,12 @@ const FormAccordion = () => {
}, 'Next →')
])
])
]),
}),
Accordion({
title: Span({ class: 'flex items-center gap-2' }, ['2️⃣', 'Address']),
name: 'form-steps',
title: Span({ class: 'flex items-center gap-2' }, ['2️⃣', 'Address']),
open: () => openStep() === 'step2',
onclick: () => openStep('step2')
}, [
Div({ class: 'p-4 space-y-4' }, [
children: Div({ class: 'p-4 space-y-4' }, [
Input({
label: 'Address',
value: () => formData().address,
@@ -304,20 +304,15 @@ const FormAccordion = () => {
}),
Div({ class: 'flex justify-between mt-2' }, [
Button({ class: 'btn btn-ghost btn-sm', onclick: prevStep }, '← Back'),
Button({
class: 'btn btn-primary btn-sm',
onclick: nextStep
}, 'Next →')
Button({ class: 'btn btn-primary btn-sm', onclick: nextStep }, 'Next →')
])
])
]),
}),
Accordion({
title: Span({ class: 'flex items-center gap-2' }, ['3️⃣', 'Payment']),
name: 'form-steps',
title: Span({ class: 'flex items-center gap-2' }, ['3️⃣', 'Payment']),
open: () => openStep() === 'step3',
onclick: () => openStep('step3')
}, [
Div({ class: 'p-4 space-y-4' }, [
children: Div({ class: 'p-4 space-y-4' }, [
Div({ class: 'flex flex-col gap-2' }, [
Radio({
label: 'Credit Card',
@@ -343,7 +338,7 @@ const FormAccordion = () => {
Button({ class: 'btn btn-success btn-sm', onclick: handleSubmit }, 'Submit')
])
])
])
})
]);
};
Mount(FormAccordion, '#demo-form');
@@ -354,11 +349,13 @@ Mount(FormAccordion, '#demo-form');
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Accordion, Div, Span, Mount } = window;
const VariantsDemo = () => {
const open1 = $(true);
const open2 = $(false);
@@ -366,34 +363,26 @@ const VariantsDemo = () => {
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'text-sm font-bold' }, 'Default Accordion'),
Div({ class: 'flex flex-col gap-2' }, [
Accordion({ title: 'Default style', open: open1, onclick: () => open1(!open1()) }, [
Div({ class: 'p-2' }, 'Default accordion with standard styling.')
])
]),
Accordion({
title: 'Default style',
open: open1,
children: Div({ class: 'p-2' }, 'Default accordion with standard styling.')
}),
Div({ class: 'text-sm font-bold mt-2' }, 'Custom Styling'),
Div({ class: 'flex flex-col gap-2' }, [
Accordion({
title: Span({ class: 'text-primary font-bold' }, 'Primary Title'),
open: open2,
onclick: () => open2(!open2()),
class: 'bg-primary/5 border-primary/20'
}, [
Div({ class: 'p-2' }, 'Accordion with custom styling and primary color.')
])
]),
Accordion({
title: Span({ class: 'text-primary font-bold' }, 'Primary Title'),
open: open2,
class: 'bg-primary/5 border-primary/20',
children: Div({ class: 'p-2' }, 'Accordion with custom styling and primary color.')
}),
Div({ class: 'text-sm font-bold mt-2' }, 'With Icons'),
Div({ class: 'flex flex-col gap-2' }, [
Accordion({
title: Span({ class: 'flex items-center gap-2' }, ['✨', 'Featured Content']),
open: open3,
onclick: () => open3(!open3())
}, [
Div({ class: 'p-2' }, 'Accordion with emoji icons in the title.')
])
])
Accordion({
title: Span({ class: 'flex items-center gap-2' }, ['✨', 'Featured Content']),
open: open3,
children: Div({ class: 'p-2' }, 'Accordion with emoji icons in the title.')
})
]);
};
Mount(VariantsDemo, '#demo-variants');

207
docs/components/alert.md
View File

@@ -10,36 +10,20 @@ Alert component for displaying contextual messages, notifications, and feedback
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `type` | `string` | `'info'` | Alert type: `'info'`, `'success'`, `'warning'`, `'error'` |
| `soft` | `boolean \| Signal<boolean>` | `true` | Use soft variant (subtle background) |
| `actions` | `VNode \| function` | `-` | Optional action buttons or content |
| `message` | `string \| VNode \| Signal` | `-` | Alert message content |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `children` | `string \| VNode` | `-` | Alert content (alternative to `message`) |
| `children` | `string \| VNode \| Array<VNode>` | Required | Alert content |
## Styling
Alert supports all **daisyUI Alert classes**:
| Category | Keywords | Description |
| Category | Classes | Description |
| :--- | :--- | :--- |
| Color | `alert-info`, `alert-success`, `alert-warning`, `alert-error` | Alert type variants |
| Style | `alert-soft` (default), `alert-solid` | Visual style variants |
> For further details, check the [daisyUI Alert Documentation](https://daisyui.com/components/alert) – Full reference for CSS classes.
### Example
```javascript
Alert({
type: "success",
soft: false,
class: "shadow-lg",
message: "Operation completed!"
});
// Applies: solid success alert with shadow
```
## Live Examples
### Basic Alerts
@@ -47,17 +31,19 @@ Alert({
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Alert, Div, Mount } = window;
const BasicDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
Alert({ type: 'info', message: 'This is an informational message.' }),
Alert({ type: 'success', message: 'Operation completed successfully!' }),
Alert({ type: 'warning', message: 'Please review your input before proceeding.' }),
Alert({ type: 'error', message: 'An error occurred while processing your request.' })
Alert({ class: 'alert-info' }, 'This is an informational message.'),
Alert({ class: 'alert-success' }, 'Operation completed successfully!'),
Alert({ class: 'alert-warning' }, 'Please review your input before proceeding.'),
Alert({ class: 'alert-error' }, 'An error occurred while processing your request.')
]);
};
Mount(BasicDemo, '#demo-basic');
@@ -68,17 +54,19 @@ Mount(BasicDemo, '#demo-basic');
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Alert, Div, Mount } = window;
const VariantsDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
Alert({ type: 'info', soft: true, message: 'Soft info alert (default)' }),
Alert({ type: 'info', soft: false, message: 'Solid info alert' }),
Alert({ type: 'success', soft: true, message: 'Soft success alert' }),
Alert({ type: 'success', soft: false, message: 'Solid success alert' })
Alert({ class: 'alert-info alert-soft' }, 'Soft info alert'),
Alert({ class: 'alert-info alert-solid' }, 'Solid info alert'),
Alert({ class: 'alert-success alert-soft' }, 'Soft success alert'),
Alert({ class: 'alert-success alert-solid' }, 'Solid success alert')
]);
};
Mount(VariantsDemo, '#demo-variants');
@@ -89,11 +77,13 @@ Mount(VariantsDemo, '#demo-variants');
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-actions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
<div id="demo-actions" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Alert, Button, Div, Mount, Toast } = window;
const ActionsDemo = () => {
const showUndo = $(false);
const deletedItem = $(null);
@@ -119,15 +109,10 @@ const ActionsDemo = () => {
Button({ class: 'btn btn-sm', onclick: () => deleteItem('Document A') }, 'Delete Document A'),
Button({ class: 'btn btn-sm', onclick: () => deleteItem('Document B') }, 'Delete Document B')
]),
() => showUndo() ? Alert({
type: 'warning',
soft: true,
message: `Deleted: ${deletedItem()}`,
actions: Button({
class: 'btn btn-sm btn-primary',
onclick: undoDelete
}, 'Undo')
}) : null
() => showUndo() ? Alert({ class: 'alert-warning alert-soft flex justify-between items-center' }, [
Span({}, `Deleted: ${deletedItem()}`),
Button({ class: 'btn btn-sm btn-primary', onclick: undoDelete }, 'Undo')
]) : null
]);
};
Mount(ActionsDemo, '#demo-actions');
@@ -138,27 +123,22 @@ Mount(ActionsDemo, '#demo-actions');
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-dismissible" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
<div id="demo-dismissible" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Alert, Button, Div, Mount } = window;
const DismissibleDemo = () => {
const visible = $(true);
return Div({ class: 'flex flex-col gap-3' }, [
() => visible() ? Alert({
type: 'info',
message: 'This alert can be dismissed. Click the X button to close.',
actions: Button({
class: 'btn btn-xs btn-circle btn-ghost',
onclick: () => visible(false)
}, '✕')
}) : null,
() => !visible() ? Button({
class: 'btn btn-sm btn-ghost',
onclick: () => visible(true)
}, 'Show Alert') : null
() => visible() ? Alert({ class: 'alert-info flex justify-between items-center' }, [
Span({}, 'This alert can be dismissed. Click the X button to close.'),
Button({ class: 'btn btn-xs btn-circle btn-ghost', onclick: () => visible(false) }, '✕')
]) : null,
() => !visible() ? Button({ class: 'btn btn-sm btn-ghost', onclick: () => visible(true) }, 'Show Alert') : null
]);
};
Mount(DismissibleDemo, '#demo-dismissible');
@@ -173,7 +153,9 @@ Mount(DismissibleDemo, '#demo-dismissible');
</div>
</div>
```javascript
```js
const { Alert, Div, Input, Mount } = window;
const ReactiveDemo = () => {
const email = $('');
const error = $('');
@@ -189,126 +171,37 @@ const ReactiveDemo = () => {
return Div({ class: 'flex flex-col gap-4' }, [
Input({
label: 'Email Address',
class: 'input input-bordered',
placeholder: 'Enter your email',
value: email,
oninput: (e) => validateEmail(e.target.value)
}),
() => error() ? Alert({ type: 'error', message: error() }) : null,
() => email() && !error() ? Alert({
type: 'success',
message: `Valid email: ${email()}`
}) : null
() => error() ? Alert({ class: 'alert-error' }, error()) : null,
() => email() && !error() ? Alert({ class: 'alert-success' }, `Valid email: ${email()}`) : null
]);
};
Mount(ReactiveDemo, '#demo-reactive');
```
### Form Validation
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
const FormDemo = () => {
const name = $('');
const email = $('');
const submitted = $(false);
const errors = $({ name: '', email: '' });
const validate = () => {
const newErrors = {
name: name().trim() ? '' : 'Name is required',
email: email().trim() ? (email().includes('@') ? '' : 'Invalid email') : 'Email is required'
};
errors(newErrors);
return !newErrors.name && !newErrors.email;
};
const handleSubmit = () => {
if (validate()) {
submitted(true);
setTimeout(() => submitted(false), 3000);
Toast('Form submitted successfully!', 'alert-success', 2000);
}
};
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'text-lg font-bold' }, 'Contact Form'),
Input({
label: 'Name',
value: name,
error: () => errors().name,
oninput: (e) => {
name(e.target.value);
validate();
}
}),
Input({
label: 'Email',
value: email,
error: () => errors().email,
oninput: (e) => {
email(e.target.value);
validate();
}
}),
Button({ class: 'btn btn-primary', onclick: handleSubmit }, 'Submit'),
() => submitted() ? Alert({
type: 'success',
message: 'Thank you! We will contact you soon.'
}) : null,
() => (errors().name || errors().email) ? Alert({
type: 'error',
message: 'Please fix the errors above before submitting.'
}) : null
]);
};
Mount(FormDemo, '#demo-form');
```
### Icon Alerts
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
</div>
</div>
```javascript
const IconsDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
Alert({ type: 'info', message: 'Information alert with custom icon' }),
Alert({ type: 'success', message: 'Success alert with custom icon' }),
Alert({ type: 'warning', message: 'Warning alert with custom icon' }),
Alert({ type: 'error', message: 'Error alert with custom icon' })
]);
};
Mount(IconsDemo, '#demo-icons');
```
### All Types
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-all" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
<div id="demo-all" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Alert, Div, Mount } = window;
const AllTypesDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
Alert({ type: 'info', message: 'ℹ️ This is an info alert' }),
Alert({ type: 'success', message: '✅ This is a success alert' }),
Alert({ type: 'warning', message: '⚠️ This is a warning alert' }),
Alert({ type: 'error', message: '❌ This is an error alert' })
Alert({ class: 'alert-info' }, 'ℹ️ This is an info alert'),
Alert({ class: 'alert-success' }, '✅ This is a success alert'),
Alert({ class: 'alert-warning' }, '⚠️ This is a warning alert'),
Alert({ class: 'alert-error' }, '❌ This is an error alert')
]);
};
Mount(AllTypesDemo, '#demo-all');
```
```

290
docs/components/autocomplete.md
View File

@@ -8,24 +8,24 @@ Searchable dropdown with autocomplete functionality, keyboard navigation, and re
## Props
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `class` | `string` | `''` | Additional CSS classes for the container |
| `items` | `Array<string \| {value: string, label: string}> \| Signal` | `[]` | Items to search from |
| `value` | `string \| Signal<string>` | `''` | Selected value (reactive) |
| `onselect` | `function(item)` | `-` | Called when an option is selected |
| `label` | `string` | `-` | Label text for the input |
| `placeholder` | `string` | `'Search...'` | Placeholder text |
| Prop | Type | Default | Description |
| :------------ | :---------------------------------------------------------- | :------------ | :--------------------------------------- |
| `class` | `string` | `''` | Additional CSS classes for the container |
| `items` | `Array<string \| {value: string, label: string}> \| Signal` | `[]` | Items to search from |
| `value` | `string \| Signal<string>` | `''` | Selected value (reactive) |
| `onselect` | `function(item)` | `-` | Called when an option is selected |
| `label` | `string` | `-` | Label text for the input |
| `placeholder` | `string` | `'Buscar...'` | Placeholder text |
## Styling
Autocomplete wraps a **daisyUI Input component** internally. All Input styling classes work:
| Category | Keywords | Description |
| :--- | :--- | :--- |
| Color | `input-primary`, `input-secondary`, `input-accent`, `input-ghost`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input scale |
| Style | `input-bordered` (default), `input-ghost` | Visual style variants |
| Category | Keywords | Description |
| :------- | :------------------------------------------------------------------------------------------------------------------------------- | :-------------------- |
| Color | `input-primary`, `input-secondary`, `input-accent`, `input-ghost`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input scale |
| Style | `input-bordered` (default), `input-ghost` | Visual style variants |
> For further details, check the [daisyUI Input Documentation](https://daisyui.com/components/input) – Full reference for CSS classes.
@@ -36,22 +36,33 @@ Autocomplete wraps a **daisyUI Input component** internally. All Input styling c
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Autocomplete, Mount } = window;
const BasicDemo = () => {
const selected = $('');
const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon'];
const selected = $("");
const fruits = [
"Apple",
"Banana",
"Orange",
"Grape",
"Strawberry",
"Mango",
"Pineapple",
"Watermelon",
];
return Autocomplete({
items: fruits,
value: selected,
onselect: (value) => selected(value)
onselect: (value) => selected(value),
});
};
Mount(BasicDemo, '#demo-basic');
Mount(BasicDemo, "#demo-basic");
```
### With Objects
@@ -59,42 +70,46 @@ Mount(BasicDemo, '#demo-basic');
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-objects" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
<div id="demo-objects" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Autocomplete, Div, Mount } = window;
const ObjectsDemo = () => {
const selected = $('');
const selectedLabel = $('');
const selected = $("");
const selectedLabel = $("");
const countries = [
{ value: 'mx', label: 'Mexico' },
{ value: 'us', label: 'United States' },
{ value: 'ca', label: 'Canada' },
{ value: 'br', label: 'Brazil' },
{ value: 'ar', label: 'Argentina' },
{ value: 'es', label: 'Spain' }
{ value: "mx", label: "Mexico" },
{ value: "us", label: "United States" },
{ value: "ca", label: "Canada" },
{ value: "br", label: "Brazil" },
{ value: "ar", label: "Argentina" },
{ value: "es", label: "Spain" },
];
return Div({ class: 'flex flex-col gap-4 w-full' }, [
return Div({ class: "flex flex-col gap-4 w-full" }, [
Autocomplete({
items: countries,
value: selectedLabel,
onselect: (item) => {
const selectedItem = typeof item === 'string'
? countries.find(c => c.label === item)
: item;
selected(selectedItem?.value || '');
selectedLabel(selectedItem?.label || '');
}
const selectedItem =
typeof item === "string"
? countries.find((c) => c.label === item)
: item;
selected(selectedItem?.value || "");
selectedLabel(selectedItem?.label || "");
},
}),
Div({ class: 'alert alert-success' }, [
() => `Selected: ${selected()} - ${selectedLabel()}`
])
Div(
{ class: "alert alert-info mt-4" },
() => `Selected: ${selected()} - ${selectedLabel()}`,
),
]);
};
Mount(ObjectsDemo, '#demo-objects');
Mount(ObjectsDemo, "#demo-objects");
```
### With Reactive Display
@@ -102,30 +117,45 @@ Mount(ObjectsDemo, '#demo-objects');
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
<div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Autocomplete, Div, Mount } = window;
const ReactiveDemo = () => {
const selected = $('');
const selected = $("");
const programmingLanguages = [
'JavaScript', 'Python', 'Java', 'C++', 'Ruby', 'Go', 'Rust', 'TypeScript', 'Swift', 'Kotlin'
"JavaScript",
"Python",
"Java",
"C++",
"Ruby",
"Go",
"Rust",
"TypeScript",
"Swift",
"Kotlin",
];
return Div({ class: 'flex flex-col gap-4 w-full' }, [
return Div({ class: "flex flex-col gap-4 w-full" }, [
Autocomplete({
items: programmingLanguages,
value: selected,
onselect: (value) => selected(value)
onselect: (value) => selected(value),
}),
() => selected() ? Div({ class: 'alert alert-info' }, [
`You selected: ${selected()}`
]) : null
() =>
selected()
? Div(
{ class: "alert alert-success mt-4" },
`You selected: ${selected()}`,
)
: null,
]);
};
Mount(ReactiveDemo, '#demo-reactive');
Mount(ReactiveDemo, "#demo-reactive");
```
### Dynamic Items
@@ -133,45 +163,63 @@ Mount(ReactiveDemo, '#demo-reactive');
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
<div id="demo-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Autocomplete, Select, SelectItems, Div, Mount } = window;
const DynamicDemo = () => {
const selected = $('');
const filterType = $('all');
const selected = $("");
const filterType = $("all");
const allItems = {
fruits: ['Apple', 'Banana', 'Orange', 'Mango'],
vegetables: ['Carrot', 'Broccoli', 'Spinach', 'Potato'],
all: ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato']
fruits: ["Apple", "Banana", "Orange", "Mango"],
vegetables: ["Carrot", "Broccoli", "Spinach", "Potato"],
all: [
"Apple",
"Banana",
"Orange",
"Mango",
"Carrot",
"Broccoli",
"Spinach",
"Potato",
],
};
return Div({ class: 'flex flex-col gap-4 w-full' }, [
Select({
class: 'select-bordered w-full',
value: filterType,
onchange: (e) => filterType(e.target.value)
}, [
Options({
items: [
{ value: 'all', label: 'All items' },
{ value: 'fruits', label: 'Fruits' },
{ value: 'vegetables', label: 'Vegetables' }
]
})
const options = [
{ value: "all", label: "All items" },
{ value: "fruits", label: "Fruits" },
{ value: "vegetables", label: "Vegetables" },
];
const handleFilterChange = (e) => {
filterType(e.target.value);
selected("");
setTimeout(() => selected(""), 300);
};
return Div({ class: "flex flex-col gap-4 w-full" }, [
Select(
{
class: "select select-bordered w-full",
value: filterType,
onchange: handleFilterChange,
},
SelectItems({ items: options }),
),
Div({ key: () => filterType() }, [
Autocomplete({
items: () => allItems[filterType()],
value: selected,
onselect: (value) => selected(value),
}),
]),
Autocomplete({
items: () => allItems[filterType()],
value: selected,
onselect: (value) => selected(value)
})
]);
};
Mount(DynamicDemo, '#demo-dynamic');
Mount(DynamicDemo, "#demo-dynamic");
```
### All Variants
@@ -179,40 +227,50 @@ Mount(DynamicDemo, '#demo-dynamic');
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Autocomplete, Div, Mount } = window;
const VariantsDemo = () => {
const colors = ['Red', 'Blue', 'Green', 'Yellow', 'Purple', 'Orange', 'Pink', 'Brown', 'Black', 'White'];
return Div({ class: 'flex flex-col gap-4' }, [
Div({}, [
Autocomplete({
class: 'input-primary',
items: colors,
value: $(''),
placeholder: 'Search colors...'
})
]),
Div({}, [
Autocomplete({
class: 'input-secondary',
items: colors,
value: $(''),
placeholder: 'Search colors...'
})
]),
Div({}, [
Autocomplete({
class: 'input-ghost',
items: colors,
value: $(''),
placeholder: 'Search colors...'
})
])
const colors = [
"Red",
"Blue",
"Green",
"Yellow",
"Purple",
"Orange",
"Pink",
"Brown",
"Black",
"White",
];
return Div({ class: "flex flex-col gap-4" }, [
Div({ class: "font-bold" }, "Primary"),
Autocomplete({
class: "input-primary",
items: colors,
value: $(""),
placeholder: "Search colors...",
}),
Div({ class: "font-bold mt-2" }, "Secondary"),
Autocomplete({
class: "input-secondary",
items: colors,
value: $(""),
placeholder: "Search colors...",
}),
Div({ class: "font-bold mt-2" }, "Ghost"),
Autocomplete({
class: "input-ghost",
items: colors,
value: $(""),
placeholder: "Search colors...",
}),
]);
};
Mount(VariantsDemo, '#demo-variants');
```
Mount(VariantsDemo, "#demo-variants");
```

189
docs/components/input.md
View File

@@ -1,6 +1,6 @@
# Input
Form input component with icons, password toggle, and validation. Use `Label()` and `Tooltip()` as wrappers for label and tooltip functionality.
Form input component with icons, password toggle, and validation.
## Tag
@@ -13,11 +13,9 @@ Form input component with icons, password toggle, and validation. Use `Label()`
| `type` | `string` | `'text'` | Input type (text, password, email, number, date) |
| `value` | `string \| Signal<string>` | `''` | Input value |
| `placeholder` | `string` | `' '` | Placeholder text |
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed inside input |
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `oninput` | `function` | `-` | Input event handler |
| `validate` | `function` | `-` | Validation function returning error message |
## Styling
@@ -36,18 +34,19 @@ Input supports all **daisyUI Input classes**:
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Input, Mount } = window;
const BasicDemo = () => {
const name = $("");
return Input({
placeholder: "Enter your name",
value: name,
oninput: (e) => name(e.target.value),
oninput: (e) => name(e.target.value)
});
};
Mount(BasicDemo, "#demo-basic");
@@ -55,25 +54,29 @@ Mount(BasicDemo, "#demo-basic");
### With Icon
Wrap the input inside a `Div` with class `input` and add an icon as a sibling.
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-icon" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
<div id="demo-icon" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { InputLabel, Div, Icon, Mount } = window;
const IconDemo = () => {
const email = $("");
return Label({ class: "input" }, [
return Div({ class: "input input-bordered flex items-center gap-2" }, [
Icon("✉️"),
Input({
class: "grow",
Tag("input", {
class: "grow",
type: "email",
value: email,
oninput: (e) => email(e.target.value),
}),
placeholder: "Email",
oninput: (e) => email(e.target.value)
})
]);
};
Mount(IconDemo, "#demo-icon");
@@ -84,30 +87,31 @@ Mount(IconDemo, "#demo-icon");
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-password" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
<div id="demo-password" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Input, Div, Icon, Swap, Mount } = window;
const PasswordDemo = () => {
const password = $("");
const visible = $(false);
return Label({ class: "input input-bordered w-full max-w-xs" }, [
return Div({ class: "input input-bordered flex items-center gap-2" }, [
Icon("icon-[lucide--lock]"),
Input({
Tag("input", {
type: () => (visible() ? "text" : "password"),
value: password,
placeholder: "Contraseña",
placeholder: "Password",
class: "grow",
oninput: (e) => password(e.target.value),
oninput: (e) => password(e.target.value)
}),
Swap({
value: visible,
class: "swap-rotate",
on: Icon("icon-[lucide--eye]"),
off: Icon("icon-[lucide--eye-off]"),
}),
off: Icon("icon-[lucide--eye-off]")
})
]);
};
Mount(PasswordDemo, "#demo-password");
@@ -115,93 +119,86 @@ Mount(PasswordDemo, "#demo-password");
### With Floating Label
Wrap the input with `Label()` component:
Use a wrapper `Div` with class `floating-label`.
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-label" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
<div id="demo-label" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Input, Div, Span, Mount } = window;
const LabelDemo = () => {
const email = $("");
return Label({ class: "floating-label" }, [
Span("Text floating"),
return Div({ class: "floating-label" }, [
Span("Email"),
Input({
type: "email",
label: "Email",
value: email,
placeholder: "Clic here",
oninput: (e) => email(e.target.value),
}),
placeholder: " ",
oninput: (e) => email(e.target.value)
})
]);
};
Mount(LabelDemo, "#demo-label");
```
### With Tooltip & label
### With Tooltip
Wrap the input with `Tooltip()` component:
Wrap the input with `Tooltip` component.
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
<div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Input, Tooltip, Mount } = window;
const TooltipDemo = () => {
const username = $("");
return Tooltip(
{ tip: "Must be at least 3 characters" },
Label({ class: "input" }, [
Span({ class: "label" }, "User"),
Input({
value: username,
label: "Username",
placeholder: "Username",
oninput: (e) => username(e.target.value),
}),
]),
);
return Tooltip({ tip: "Must be at least 3 characters" }, [
Input({
placeholder: "Username",
value: username,
oninput: (e) => username(e.target.value)
})
]);
};
Mount(TooltipDemo, "#demo-tooltip");
```
### Error State
Add `input-error` class and show a validation message.
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-error" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
<div id="demo-error" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Input, Div, Mount } = window;
const ErrorDemo = () => {
const email = $("");
return Div({ class: "form-control w-full max-w-xs" }, [
Label({ class: "label" }, Span({ class: "label-text" }, "Email")),
Div({ class: "relative w-full" }, [
Input({
type: "email",
value: email,
placeholder: "mail@site.com",
class: "input input-bordered w-full pl-10 validator",
required: true,
oninput: (e) => email(e.target.value)
}),
Span({ class: "absolute left-3 top-1/2 -translate-y-1/2 text-base-content/60" },
Icon("icon-[lucide--mail]")
)
]),
Div({ class: "validator-hint hidden" }, "Enter a valid email address")
const isValid = () => email().includes("@");
return Div({ class: "flex flex-col gap-2" }, [
Tag("input", {
type: "email",
class: () => `input input-bordered ${email() && !isValid() ? "input-error" : ""}`,
value: email,
placeholder: "mail@example.com",
oninput: (e) => email(e.target.value)
}),
() => email() && !isValid() ? Div({ class: "text-error text-sm" }, "Enter a valid email") : null
]);
};
Mount(ErrorDemo, "#demo-error");
@@ -212,16 +209,15 @@ Mount(ErrorDemo, "#demo-error");
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
<div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Input, Mount } = window;
const DisabledDemo = () => {
return Input({
value: "john.doe",
disabled: true,
});
return Input({ value: "john.doe", disabled: true });
};
Mount(DisabledDemo, "#demo-disabled");
```
@@ -231,38 +227,27 @@ Mount(DisabledDemo, "#demo-disabled");
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
```js
const { Input, Div, Mount } = window;
const VariantsDemo = () => {
const text = $("");
const number = $(0);
return Div({ class: "flex flex-col gap-4" }, [
Input({
placeholder: "Type something...",
value: text,
oninput: (e) => text(e.target.value),
}),
Input({
type: "number",
value: number,
oninput: (e) => number(parseInt(e.target.value) || 0),
}),
Input({
type: "date",
value: $("2024-01-01"),
}),
Input({ class: "input-primary", value: "Primary" }),
Input({ class: "input-secondary", value: "Secondary" }),
Input({ class: "input-accent", value: "Accent" }),
Input({ class: "input-ghost", value: "Ghost" }),
Input({ class: "input-info", value: "Info" }),
Input({ class: "input-success", value: "Success" }),
Input({ class: "input-warning", value: "Warning" }),
Input({ class: "input-error", value: "Error" }),
Input({ placeholder: "Default", value: text, oninput: (e) => text(e.target.value) }),
Input({ class: "input-primary", placeholder: "Primary", value: $("") }),
Input({ class: "input-secondary", placeholder: "Secondary", value: $("") }),
Input({ class: "input-accent", placeholder: "Accent", value: $("") }),
Input({ class: "input-ghost", placeholder: "Ghost", value: $("") }),
Input({ class: "input-info", placeholder: "Info", value: $("") }),
Input({ class: "input-success", placeholder: "Success", value: $("") }),
Input({ class: "input-warning", placeholder: "Warning", value: $("") }),
Input({ class: "input-error", placeholder: "Error", value: $("") }),
Input({ type: "number", placeholder: "Number", value: $(0), oninput: (e) => e.target.value }),
Input({ type: "date", value: $("2024-01-01") })
]);
};
Mount(VariantsDemo, "#demo-variants");

15
docs/index.html
View File

@@ -41,17 +41,24 @@
plugins: [
function (hook, vm) {
hook.doneEach(function () {
// Buscamos los bloques de código JS que queremos ejecutar
// Seleccionamos solo los bloques marcados con ```js
const codeBlocks = document.querySelectorAll(
'pre[data-lang="javascript"] code',
'pre[data-lang="js"] code',
);
codeBlocks.forEach((code) => {
try {
const runDemo = new Function(code.innerText);
// Usamos un bloque anónimo para evitar colisiones de variables const/let
// si el usuario ejecuta el mismo código varias veces.
const scriptContent = `(function() {
${code.innerText}
})();`;
const runDemo = new Function(scriptContent);
runDemo();
} catch (err) {
console.error("Error en la demo de SigPro:", err);
// Un error común es que el bloque de código esté vacío o mal formado
console.error("Error ejecutando demo de SigPro:", err);
}
});
});

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

86
index.js
View File

@@ -1,47 +1,46 @@
import * as AccordionModule from './components/Accordion.js';
import * as AlertModule from './components/Alert.js';
import * as AutocompleteModule from './components/Autocomplete.js';
import * as BadgeModule from './components/Badge.js';
import * as ButtonModule from './components/Button.js';
import * as CalendarModule from './components/Calendar.js';
import * as CardModule from './components/Card.js';
import * as CarouselModule from './components/Carousel.js';
import * as ChatModule from './components/Chat.js';
import * as CheckboxModule from './components/Checkbox.js';
import * as CollapseModule from './components/Collapse.js';
import * as ColorpickerModule from './components/Colorpicker.js';
import * as DatepickerModule from './components/Datepicker.js';
import * as DrawerModule from './components/Drawer.js';
import * as DropdownModule from './components/Dropdown.js';
import * as FabModule from './components/Fab.js';
import * as FieldsetModule from './components/Fieldset.js';
import * as FileinputModule from './components/Fileinput.js';
import * as IconModule from './components/Icon.js';
import * as IndicatorModule from './components/Indicator.js';
import * as InputModule from './components/Input.js';
import * as KdbModule from './components/Kdb.js';
import * as AccordionModule from './components/accordion.js';
import * as AlertModule from './components/alert.js';
import * as AutocompleteModule from './components/autocomplete.js';
import * as BadgeModule from './components/badge.js';
import * as ButtonModule from './components/button.js';
import * as CalendarModule from './components/calendar.js';
import * as CardModule from './components/card.js';
import * as CarouselModule from './components/carousel.js';
import * as ChatModule from './components/chat.js';
import * as CheckboxModule from './components/checkbox.js';
import * as ColorpickerModule from './components/colorpicker.js';
import * as DatepickerModule from './components/datepicker.js';
import * as DrawerModule from './components/drawer.js';
import * as DropdownModule from './components/dropdown.js';
import * as FabModule from './components/fab.js';
import * as FieldsetModule from './components/fieldset.js';
import * as FileinputModule from './components/fileinput.js';
import * as IconModule from './components/icon.js';
import * as IndicatorModule from './components/indicator.js';
import * as InputModule from './components/input.js';
import * as KdbModule from './components/kbd.js';
// import * as ListModule from './components/List.js';
import * as LoadingModule from './components/Loading.js';
import * as MenuModule from './components/Menu.js';
import * as ModalModule from './components/Modal.js';
import * as NavbarModule from './components/Navbar.js';
import * as RadialModule from './components/Radial.js';
import * as RadioModule from './components/Radio.js';
import * as RangeModule from './components/Range.js';
import * as RatingModule from './components/Rating.js';
import * as SkeletonModule from './components/Skeleton.js';
import * as SelectModule from './components/Select.js';
import * as StackModule from './components/Stack.js';
import * as StatModule from './components/Stat.js';
import * as StepsModule from './components/Stat.js';
import * as SwapModule from './components/Swap.js';
import * as TableModule from './components/Table.js';
import * as TabsModule from './components/Tabs.js';
import * as TextareaModule from './components/Textarea.js';
import * as TextrotateModule from './components/Textrotate.js';
import * as TimelineModule from './components/Timeline.js';
import * as ToastModule from './components/Toast.js';
import * as TooltipModule from './components/Tooltip.js';
import * as LoadingModule from './components/loading.js';
import * as MenuModule from './components/menu.js';
import * as ModalModule from './components/modal.js';
import * as NavbarModule from './components/navbar.js';
import * as RadialModule from './components/radial.js';
import * as RadioModule from './components/radio.js';
import * as RangeModule from './components/range.js';
import * as RatingModule from './components/rating.js';
import * as SkeletonModule from './components/skeleton.js';
import * as SelectModule from './components/select.js';
import * as StackModule from './components/stack.js';
import * as StatModule from './components/stat.js';
import * as StepsModule from './components/stat.js';
import * as SwapModule from './components/swap.js';
import * as TableModule from './components/table.js';
import * as TabsModule from './components/tabs.js';
import * as TextareaModule from './components/textarea.js';
import * as TextrotateModule from './components/textrotate.js';
import * as TimelineModule from './components/timeline.js';
import * as ToastModule from './components/toast.js';
import * as TooltipModule from './components/tooltip.js';
import { Locale, tt } from './utils.js';
export const Components = {
@@ -55,7 +54,6 @@ export const Components = {
...CarouselModule,
...ChatModule,
...CheckboxModule,
...CollapseModule,
...ColorpickerModule,
...DatepickerModule,
...DrawerModule,

4
package.json
View File

@@ -44,8 +44,8 @@
},
"scripts": {
"clean": "rm -rf ./dist ./css/*.css ./docs/*.js ./docs/*.css",
"build:css": "tailwindcss -i ./sigpro.css -o ./dist/sigpro-ui.css --content './src/**/*.js'",
"build:cssmin": "tailwindcss -i ./sigpro.css -o ./dist/sigpro-ui.min.css --content './src/**/*.js' --minify",
"build:css": "tailwindcss -i ./sigpro.css -o ./dist/sigpro-ui.css --content './src/**/*.js' && du -h ./dist/sigpro-ui.css",
"build:cssmin": "tailwindcss -i ./sigpro.css -o ./dist/sigpro-ui.min.css --content './src/**/*.js' --minify && du -h ./dist/sigpro-ui.css",
"build:js": "bun run build:js:iife && bun run build:js:esm",
"build:js:iife": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI",
"build:js:iife:min": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",