New docs
This commit is contained in:
348
docs/components/input.md
Normal file
348
docs/components/input.md
Normal file
@@ -0,0 +1,348 @@
|
||||
# Input
|
||||
|
||||
Form input component with floating label, icons, password toggle, tooltip, and error states. Fully integrated with DaisyUI and Tailwind.
|
||||
|
||||
## Tag
|
||||
|
||||
`Input`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :--------- | :----------------------------------------------- |
|
||||
| `label` | `string` | `-` | Label text (floating style) |
|
||||
| `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 |
|
||||
| `tip` | `string` | `-` | Help tooltip text |
|
||||
| `error` | `string \| Signal<string>` | `-` | Error message to display |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `oninput` | `function` | `-` | Input event handler |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Input
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const name = $('');
|
||||
|
||||
return Input({
|
||||
label: 'Full Name',
|
||||
placeholder: 'Enter your name',
|
||||
value: name,
|
||||
oninput: (e) => name(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With 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-icon" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconDemo = () => {
|
||||
const email = $('');
|
||||
|
||||
return Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
icon: Icons.iconMail,
|
||||
value: email,
|
||||
oninput: (e) => email(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(IconDemo, '#demo-icon');
|
||||
```
|
||||
|
||||
### Password with Toggle
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PasswordDemo = () => {
|
||||
const password = $('');
|
||||
|
||||
return Input({
|
||||
label: 'Password',
|
||||
type: 'password',
|
||||
value: password,
|
||||
oninput: (e) => password(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(PasswordDemo, '#demo-password');
|
||||
```
|
||||
|
||||
### With Tooltip
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-tooltip');
|
||||
```
|
||||
|
||||
### Error State
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-error');
|
||||
```
|
||||
|
||||
### Disabled State
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DisabledDemo = () => {
|
||||
return Input({
|
||||
label: 'Username',
|
||||
value: 'john.doe',
|
||||
disabled: true
|
||||
});
|
||||
};
|
||||
$mount(DisabledDemo, '#demo-disabled');
|
||||
```
|
||||
|
||||
### All 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-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#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>
|
||||
Reference in New Issue
Block a user