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

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

Browse Source
This commit is contained in:
Natxo
2026-04-23 13:22:49 +02:00
parent 59e6d972a8
commit e842ed8041
61 changed files with 2553 additions and 2758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
docs/components/input.md
View File

@@ -43,7 +43,7 @@ const { Input, mount } = window;
const BasicDemo = () => {
const name = $("");
return Input({
return input({
placeholder: "Enter your name",
value: name,
oninput: (e) => name(e.target.value)
@@ -68,7 +68,7 @@ const { InputLabel, Div, Icon, mount } = window;
const IconDemo = () => {
const email = $("");
return Div({ class: "input input-bordered flex items-center gap-2" }, [
return div({ class: "input input-bordered flex items-center gap-2" }, [
Icon("✉️"),
h("input", {
class: "grow",
@@ -97,7 +97,7 @@ 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" }, [
return div({ class: "input input-bordered flex items-center gap-2" }, [
Icon("icon-[lucide--lock]"),
h("input", {
type: () => (visible() ? "text" : "password"),
@@ -133,9 +133,9 @@ const { Input, Div, Span, mount } = window;
const LabelDemo = () => {
const email = $("");
return Div({ class: "floating-label" }, [
Span("Email"),
Input({
return div({ class: "floating-label" }, [
span("Email"),
input({
type: "email",
value: email,
placeholder: " ",
@@ -163,7 +163,7 @@ const { Input, Tooltip, mount } = window;
const TooltipDemo = () => {
const username = $("");
return Tooltip({ tip: "Must be at least 3 characters" }, [
Input({
input({
placeholder: "Username",
value: username,
oninput: (e) => username(e.target.value)
@@ -190,7 +190,7 @@ const { Input, Div, mount } = window;
const ErrorDemo = () => {
const email = $("");
const isValid = () => email().includes("@");
return Div({ class: "flex flex-col gap-2" }, [
return div({ class: "flex flex-col gap-2" }, [
h("input", {
type: "email",
class: () => `input input-bordered ${email() && !isValid() ? "input-error" : ""}`,
@@ -198,7 +198,7 @@ const ErrorDemo = () => {
placeholder: "mail@example.com",
oninput: (e) => email(e.target.value)
}),
() => email() && !isValid() ? Div({ class: "text-error text-sm" }, "Enter a valid email") : null
() => email() && !isValid() ? div({ class: "text-error text-sm" }, "Enter a valid email") : null
]);
};
mount(ErrorDemo, "#demo-error");
@@ -217,7 +217,7 @@ mount(ErrorDemo, "#demo-error");
const { Input, mount } = window;
const DisabledDemo = () => {
return Input({ value: "john.doe", disabled: true });
return input({ value: "john.doe", disabled: true });
};
mount(DisabledDemo, "#demo-disabled");
```
@@ -236,18 +236,18 @@ const { Input, Div, mount } = window;
const VariantsDemo = () => {
const text = $("");
return Div({ class: "flex flex-col gap-4" }, [
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") })
return div({ class: "flex flex-col gap-4" }, [
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");