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

Updateing Docs

Browse Source
This commit is contained in:
natxocc
2026-04-02 19:31:39 +02:00
parent 5a77deb442
commit f0c710f8c2
138 changed files with 25729 additions and 3918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
docs/components/input.md
View File

@@ -2,6 +2,7 @@
Form input component with floating label, icons, password toggle, tooltip, and error states. Fully integrated with DaisyUI and Tailwind.
## Tag
`Input`
@@ -37,7 +38,6 @@ const BasicDemo = () => {
const name = $('');
return Input({
label: 'Full Name',
placeholder: 'Enter your name',
value: name,
oninput: (e) => name(e.target.value)
@@ -60,9 +60,8 @@ const IconDemo = () => {
const email = $('');
return Input({
label: 'Email',
type: 'email',
icon: Icons.iconMail,
icon: "✉️",
value: email,
oninput: (e) => email(e.target.value)
});
@@ -84,7 +83,6 @@ const PasswordDemo = () => {
const password = $('');
return Input({
label: 'Password',
type: 'password',
value: password,
oninput: (e) => password(e.target.value)
@@ -107,7 +105,6 @@ const TooltipDemo = () => {
const username = $('');
return Input({
label: 'Username',
tip: 'Must be at least 3 characters',
value: username,
oninput: (e) => username(e.target.value)
@@ -137,7 +134,6 @@ const ErrorDemo = () => {
};
return Input({
label: 'Email',
type: 'email',
value: email,
error: () => !isValid() && email() ? 'Invalid email address' : '',
@@ -159,7 +155,6 @@ $mount(ErrorDemo, '#demo-error');
```javascript
const DisabledDemo = () => {
return Input({
label: 'Username',
value: 'john.doe',
disabled: true
});
@@ -183,166 +178,30 @@ const VariantsDemo = () => {
return Div({ class: 'flex flex-col gap-4' }, [
Input({
label: 'Text Input',
placeholder: 'Type something...',
value: text,
oninput: (e) => text(e.target.value)
}),
Input({
label: 'Number Input',
type: 'number',
value: number,
oninput: (e) => number(parseInt(e.target.value) || 0)
}),
Input({
label: 'Date 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-link', value:"Link"}),
Input({class: 'input-info', value:"Info"}),
Input({class: 'input-success', value:"Success"}),
Input({class: 'input-warning', value:"Warning"}),
Input({class: 'input-error', value:"Error"}),
]);
};
$mount(VariantsDemo, '#demo-variants');
```
<script>
(function() {
const initInputExamples = () => {
// 1. Basic Input
const basicTarget = document.querySelector('#demo-basic');
if (basicTarget && !basicTarget.hasChildNodes()) {
const BasicDemo = () => {
const name = $('');
return Input({
label: 'Full Name',
placeholder: 'Enter your name',
value: name,
oninput: (e) => name(e.target.value)
});
};
$mount(BasicDemo, basicTarget);
}
// 2. With Icon
const iconTarget = document.querySelector('#demo-icon');
if (iconTarget && !iconTarget.hasChildNodes()) {
const IconDemo = () => {
const email = $('');
return Input({
label: 'Email',
type: 'email',
icon: Icons.iconMail,
value: email,
oninput: (e) => email(e.target.value)
});
};
$mount(IconDemo, iconTarget);
}
// 3. Password with Toggle
const passwordTarget = document.querySelector('#demo-password');
if (passwordTarget && !passwordTarget.hasChildNodes()) {
const PasswordDemo = () => {
const password = $('');
return Input({
label: 'Password',
type: 'password',
value: password,
oninput: (e) => password(e.target.value)
});
};
$mount(PasswordDemo, passwordTarget);
}
// 4. With Tooltip
const tooltipTarget = document.querySelector('#demo-tooltip');
if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
const TooltipDemo = () => {
const username = $('');
return Input({
label: 'Username',
tip: 'Must be at least 3 characters',
value: username,
oninput: (e) => username(e.target.value)
});
};
$mount(TooltipDemo, tooltipTarget);
}
// 5. Error State
const errorTarget = document.querySelector('#demo-error');
if (errorTarget && !errorTarget.hasChildNodes()) {
const ErrorDemo = () => {
const email = $('');
const isValid = $(true);
const validate = (value) => {
const valid = value.includes('@') && value.includes('.');
isValid(valid);
email(value);
};
return Input({
label: 'Email',
type: 'email',
value: email,
error: () => !isValid() && email() ? 'Invalid email address' : '',
oninput: (e) => validate(e.target.value)
});
};
$mount(ErrorDemo, errorTarget);
}
// 6. Disabled State
const disabledTarget = document.querySelector('#demo-disabled');
if (disabledTarget && !disabledTarget.hasChildNodes()) {
const DisabledDemo = () => {
return Input({
label: 'Username',
value: 'john.doe',
disabled: true
});
};
$mount(DisabledDemo, disabledTarget);
}
// 7. All Variants
const variantsTarget = document.querySelector('#demo-variants');
if (variantsTarget && !variantsTarget.hasChildNodes()) {
const VariantsDemo = () => {
const text = $('');
const number = $(0);
return Div({ class: 'flex flex-col gap-4' }, [
Input({
label: 'Text Input',
placeholder: 'Type something...',
value: text,
oninput: (e) => text(e.target.value)
}),
Input({
label: 'Number Input',
type: 'number',
value: number,
oninput: (e) => number(parseInt(e.target.value) || 0)
}),
Input({
label: 'Date Input',
type: 'date',
value: $('2024-01-01')
})
]);
};
$mount(VariantsDemo, variantsTarget);
}
};
initInputExamples();
if (window.$docsify) {
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
hook.doneEach(initInputExamples);
});
}
})();
</script>