349 lines
10 KiB
Markdown
349 lines
10 KiB
Markdown
# 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>
|