Updateing Docs
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# Accordion
|
||||
|
||||
Collapsible accordion component for organizing content into expandable sections with DaisyUI styling.
|
||||
Collapsible accordion component for organizing content into expandable sections.
|
||||
|
||||
## Tag
|
||||
|
||||
@@ -8,13 +8,38 @@ Collapsible accordion component for organizing content into expandable sections
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `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) |
|
||||
| `children` | `VNode \| Array<VNode>` | Required | Content to display when expanded |
|
||||
| Prop | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `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) |
|
||||
| `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.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Accordion({
|
||||
title: "Click to expand",
|
||||
class: "collapse-arrow bg-base-100",
|
||||
open: isOpen,
|
||||
onclick: () => isOpen(!isOpen())
|
||||
}, [
|
||||
Div({ class: "p-4" }, "Hidden content here")
|
||||
]);
|
||||
```
|
||||
|
||||
## Live Examples
|
||||
|
||||
@@ -385,346 +410,4 @@ const VariantsDemo = () => {
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initAccordionExamples = () => {
|
||||
|
||||
// 1. Basic Accordion
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const open1 = $(false);
|
||||
const open2 = $(false);
|
||||
const open3 = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: 'Section 1',
|
||||
open: open1,
|
||||
onclick: () => open1(!open1())
|
||||
}, [
|
||||
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.')
|
||||
]),
|
||||
Accordion({
|
||||
title: 'Section 3',
|
||||
open: open3,
|
||||
onclick: () => open3(!open3())
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 3. Accordions are great for FAQs.')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Group Accordion (Radio Style)
|
||||
const groupTarget = document.querySelector('#demo-group');
|
||||
if (groupTarget && !groupTarget.hasChildNodes()) {
|
||||
const GroupDemo = () => {
|
||||
const openSection = $('section1');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
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.')
|
||||
]),
|
||||
Accordion({
|
||||
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.')
|
||||
]),
|
||||
Accordion({
|
||||
title: 'Section 3',
|
||||
name: 'group',
|
||||
open: () => openSection() === 'section3',
|
||||
onclick: () => openSection('section3')
|
||||
}, [
|
||||
Div({ class: 'p-2' }, 'Content for section 3. This is useful for FAQ sections.')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(GroupDemo, groupTarget);
|
||||
}
|
||||
|
||||
// 3. FAQ Accordion
|
||||
const faqTarget = document.querySelector('#demo-faq');
|
||||
if (faqTarget && !faqTarget.hasChildNodes()) {
|
||||
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.' }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, faqs.map(faq =>
|
||||
Accordion({
|
||||
title: faq.question,
|
||||
name: 'faq-group',
|
||||
open: () => openFaq() === faq.id,
|
||||
onclick: () => openFaq(openFaq() === faq.id ? '' : faq.id)
|
||||
}, [
|
||||
Div({ class: 'p-2 text-sm' }, faq.answer)
|
||||
])
|
||||
));
|
||||
};
|
||||
$mount(FaqDemo, faqTarget);
|
||||
}
|
||||
|
||||
// 4. With Rich Content
|
||||
const richTarget = document.querySelector('#demo-rich');
|
||||
if (richTarget && !richTarget.hasChildNodes()) {
|
||||
const RichDemo = () => {
|
||||
const open1 = $(true);
|
||||
const open2 = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['📊', 'Statistics']),
|
||||
open: open1,
|
||||
onclick: () => open1(!open1())
|
||||
}, [
|
||||
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'),
|
||||
Div({ class: 'stat-value text-lg' }, '1,234')
|
||||
]),
|
||||
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' }, [
|
||||
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')
|
||||
]),
|
||||
Div({ class: 'flex-1' }, [
|
||||
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, richTarget);
|
||||
}
|
||||
|
||||
// 5. Form Accordion
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
const FormAccordion = () => {
|
||||
const openStep = $('step1');
|
||||
const formData = $({
|
||||
name: '',
|
||||
email: '',
|
||||
address: '',
|
||||
payment: 'credit'
|
||||
});
|
||||
|
||||
const updateField = (field, value) => {
|
||||
formData({ ...formData(), [field]: value });
|
||||
};
|
||||
|
||||
const nextStep = () => {
|
||||
if (openStep() === 'step1') openStep('step2');
|
||||
else if (openStep() === 'step2') openStep('step3');
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
if (openStep() === 'step2') openStep('step1');
|
||||
else if (openStep() === 'step3') openStep('step2');
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
Toast('Form submitted!', 'alert-success', 2000);
|
||||
console.log(formData());
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, [
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['1️⃣', 'Personal Information']),
|
||||
name: 'form-steps',
|
||||
open: () => openStep() === 'step1',
|
||||
onclick: () => openStep('step1')
|
||||
}, [
|
||||
Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: 'Full Name',
|
||||
value: () => formData().name,
|
||||
placeholder: 'Enter your name',
|
||||
oninput: (e) => updateField('name', e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: () => formData().email,
|
||||
placeholder: 'email@example.com',
|
||||
oninput: (e) => updateField('email', e.target.value)
|
||||
}),
|
||||
Div({ class: 'flex justify-end mt-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary btn-sm',
|
||||
onclick: nextStep,
|
||||
disabled: () => !formData().name || !formData().email
|
||||
}, 'Next →')
|
||||
])
|
||||
])
|
||||
]),
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['2️⃣', 'Address']),
|
||||
name: 'form-steps',
|
||||
open: () => openStep() === 'step2',
|
||||
onclick: () => openStep('step2')
|
||||
}, [
|
||||
Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: 'Address',
|
||||
value: () => formData().address,
|
||||
placeholder: 'Street address',
|
||||
oninput: (e) => updateField('address', e.target.value)
|
||||
}),
|
||||
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 →')
|
||||
])
|
||||
])
|
||||
]),
|
||||
Accordion({
|
||||
title: Span({ class: 'flex items-center gap-2' }, ['3️⃣', 'Payment']),
|
||||
name: 'form-steps',
|
||||
open: () => openStep() === 'step3',
|
||||
onclick: () => openStep('step3')
|
||||
}, [
|
||||
Div({ class: 'p-4 space-y-4' }, [
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Radio({
|
||||
label: 'Credit Card',
|
||||
value: () => formData().payment,
|
||||
radioValue: 'credit',
|
||||
onclick: () => updateField('payment', 'credit')
|
||||
}),
|
||||
Radio({
|
||||
label: 'PayPal',
|
||||
value: () => formData().payment,
|
||||
radioValue: 'paypal',
|
||||
onclick: () => updateField('payment', 'paypal')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Bank Transfer',
|
||||
value: () => formData().payment,
|
||||
radioValue: 'bank',
|
||||
onclick: () => updateField('payment', 'bank')
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between mt-2' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm', onclick: prevStep }, '← Back'),
|
||||
Button({ class: 'btn btn-success btn-sm', onclick: handleSubmit }, 'Submit')
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(FormAccordion, formTarget);
|
||||
}
|
||||
|
||||
// 6. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const open1 = $(true);
|
||||
const open2 = $(false);
|
||||
const open3 = $(false);
|
||||
|
||||
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.')
|
||||
])
|
||||
]),
|
||||
|
||||
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.')
|
||||
])
|
||||
]),
|
||||
|
||||
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.')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initAccordionExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initAccordionExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
@@ -8,14 +8,37 @@ Alert component for displaying contextual messages, notifications, and feedback
|
||||
|
||||
## Props
|
||||
|
||||
| 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`) |
|
||||
| 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`) |
|
||||
|
||||
## Styling
|
||||
|
||||
Alert supports all **daisyUI Alert classes**:
|
||||
|
||||
| Category | Keywords | 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
|
||||
|
||||
@@ -288,234 +311,4 @@ const AllTypesDemo = () => {
|
||||
]);
|
||||
};
|
||||
$mount(AllTypesDemo, '#demo-all');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initAlertExamples = () => {
|
||||
|
||||
// 1. Basic Alerts
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
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.' })
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Soft vs Solid Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
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' })
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
|
||||
// 3. With Actions
|
||||
const actionsTarget = document.querySelector('#demo-actions');
|
||||
if (actionsTarget && !actionsTarget.hasChildNodes()) {
|
||||
const ActionsDemo = () => {
|
||||
const showUndo = $(false);
|
||||
const deletedItem = $(null);
|
||||
|
||||
const deleteItem = (item) => {
|
||||
deletedItem(item);
|
||||
showUndo(true);
|
||||
setTimeout(() => {
|
||||
if (showUndo()) {
|
||||
showUndo(false);
|
||||
Toast('Item permanently deleted', 'alert-info', 2000);
|
||||
}
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
const undoDelete = () => {
|
||||
showUndo(false);
|
||||
Toast(`Restored: ${deletedItem()}`, 'alert-success', 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex gap-2' }, [
|
||||
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
|
||||
]);
|
||||
};
|
||||
$mount(ActionsDemo, actionsTarget);
|
||||
}
|
||||
|
||||
// 4. Dismissible Alert
|
||||
const dismissibleTarget = document.querySelector('#demo-dismissible');
|
||||
if (dismissibleTarget && !dismissibleTarget.hasChildNodes()) {
|
||||
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
|
||||
]);
|
||||
};
|
||||
$mount(DismissibleDemo, dismissibleTarget);
|
||||
}
|
||||
|
||||
// 5. Reactive Alert
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const email = $('');
|
||||
const error = $('');
|
||||
|
||||
const validateEmail = (value) => {
|
||||
email(value);
|
||||
if (value && !value.includes('@')) {
|
||||
error('Please enter a valid email address');
|
||||
} else {
|
||||
error('');
|
||||
}
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Input({
|
||||
label: 'Email Address',
|
||||
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
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 6. Form Validation
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
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, formTarget);
|
||||
}
|
||||
|
||||
// 7. Icon Alerts
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
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, iconsTarget);
|
||||
}
|
||||
|
||||
// 8. All Types
|
||||
const allTarget = document.querySelector('#demo-all');
|
||||
if (allTarget && !allTarget.hasChildNodes()) {
|
||||
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' })
|
||||
]);
|
||||
};
|
||||
$mount(AllTypesDemo, allTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initAlertExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initAlertExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
@@ -1,6 +1,6 @@
|
||||
# Autocomplete
|
||||
|
||||
Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive options.
|
||||
Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive items.
|
||||
|
||||
## Tag
|
||||
|
||||
@@ -8,14 +8,38 @@ Searchable dropdown with autocomplete functionality, keyboard navigation, and re
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :------------------------------------------------ | :------------------ | :----------------------------------------------- |
|
||||
| `label` | `string` | `-` | Label text for the input |
|
||||
| `options` | `Array<string \| {value: string, label: string}>` | `[]` | Options to search from |
|
||||
| `value` | `string \| Signal<string>` | `''` | Selected value |
|
||||
| `placeholder`| `string` | `'Search...'` | Placeholder text |
|
||||
| `onSelect` | `function` | `-` | Called when an option is selected |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| 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 |
|
||||
|
||||
## 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 |
|
||||
|
||||
> For further details, check the [daisyUI Input Documentation](https://daisyui.com/components/input) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Autocomplete({
|
||||
class: "input-primary input-lg",
|
||||
items: fruits,
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
});
|
||||
// Applies: primary color, large size
|
||||
```
|
||||
|
||||
## Live Examples
|
||||
|
||||
@@ -34,8 +58,7 @@ const BasicDemo = () => {
|
||||
const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon'];
|
||||
|
||||
return Autocomplete({
|
||||
label: 'Search fruit',
|
||||
options: fruits,
|
||||
items: fruits,
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
});
|
||||
@@ -68,8 +91,7 @@ const ObjectsDemo = () => {
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Autocomplete({
|
||||
label: 'Search country',
|
||||
options: countries,
|
||||
items: countries,
|
||||
value: selectedLabel,
|
||||
onSelect: (item) => {
|
||||
const selectedItem = typeof item === 'string'
|
||||
@@ -80,7 +102,7 @@ const ObjectsDemo = () => {
|
||||
}
|
||||
}),
|
||||
Div({ class: 'alert alert-success' }, [
|
||||
`Selected: ${selected()} - ${selectedLabel()}`
|
||||
() => `Selected: ${selected()} - ${selectedLabel()}`
|
||||
])
|
||||
]);
|
||||
};
|
||||
@@ -106,8 +128,7 @@ const ReactiveDemo = () => {
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Autocomplete({
|
||||
label: 'Programming language',
|
||||
options: programmingLanguages,
|
||||
items: programmingLanguages,
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
}),
|
||||
@@ -119,7 +140,7 @@ const ReactiveDemo = () => {
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Dynamic Options
|
||||
### Dynamic Items
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
@@ -141,8 +162,7 @@ const DynamicDemo = () => {
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Select({
|
||||
label: 'Category',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'all', label: 'All items' },
|
||||
{ value: 'fruits', label: 'Fruits' },
|
||||
{ value: 'vegetables', label: 'Vegetables' }
|
||||
@@ -151,8 +171,7 @@ const DynamicDemo = () => {
|
||||
onchange: (e) => filterType(e.target.value)
|
||||
}),
|
||||
Autocomplete({
|
||||
label: 'Search item',
|
||||
options: () => allItems[filterType()],
|
||||
items: () => allItems[filterType()],
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
})
|
||||
@@ -177,27 +196,24 @@ const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({}, [
|
||||
Autocomplete({
|
||||
label: 'Primary style',
|
||||
class: 'input-primary',
|
||||
options: colors,
|
||||
items: colors,
|
||||
value: $(''),
|
||||
placeholder: 'Search colors...'
|
||||
})
|
||||
]),
|
||||
Div({}, [
|
||||
Autocomplete({
|
||||
label: 'Secondary style',
|
||||
class: 'input-secondary',
|
||||
options: colors,
|
||||
items: colors,
|
||||
value: $(''),
|
||||
placeholder: 'Search colors...'
|
||||
})
|
||||
]),
|
||||
Div({}, [
|
||||
Autocomplete({
|
||||
label: 'Ghost style',
|
||||
class: 'input-ghost',
|
||||
options: colors,
|
||||
items: colors,
|
||||
value: $(''),
|
||||
placeholder: 'Search colors...'
|
||||
})
|
||||
@@ -205,172 +221,4 @@ const VariantsDemo = () => {
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initAutocompleteExamples = () => {
|
||||
|
||||
// 1. Basic Autocomplete
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const selected = $('');
|
||||
const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry', 'Mango', 'Pineapple', 'Watermelon'];
|
||||
|
||||
return Autocomplete({
|
||||
label: 'Search fruit',
|
||||
options: fruits,
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Objects
|
||||
const objectsTarget = document.querySelector('#demo-objects');
|
||||
if (objectsTarget && !objectsTarget.hasChildNodes()) {
|
||||
const ObjectsDemo = () => {
|
||||
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' }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Autocomplete({
|
||||
label: 'Search country',
|
||||
options: countries,
|
||||
value: selectedLabel,
|
||||
onSelect: (item) => {
|
||||
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()}`
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ObjectsDemo, objectsTarget);
|
||||
}
|
||||
|
||||
// 3. Reactive Display
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const selected = $('');
|
||||
|
||||
const programmingLanguages = [
|
||||
'JavaScript', 'Python', 'Java', 'C++', 'Ruby', 'Go', 'Rust', 'TypeScript', 'Swift', 'Kotlin'
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Autocomplete({
|
||||
label: 'Programming language',
|
||||
options: programmingLanguages,
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
}),
|
||||
() => selected() ? Div({ class: 'alert alert-info' }, [
|
||||
`You selected: ${selected()}`
|
||||
]) : null
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 4. Dynamic Options
|
||||
const dynamicTarget = document.querySelector('#demo-dynamic');
|
||||
if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
|
||||
const DynamicDemo = () => {
|
||||
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']
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Select({
|
||||
label: 'Category',
|
||||
options: [
|
||||
{ value: 'all', label: 'All items' },
|
||||
{ value: 'fruits', label: 'Fruits' },
|
||||
{ value: 'vegetables', label: 'Vegetables' }
|
||||
],
|
||||
value: filterType,
|
||||
onchange: (e) => filterType(e.target.value)
|
||||
}),
|
||||
Autocomplete({
|
||||
label: 'Search item',
|
||||
options: () => allItems[filterType()],
|
||||
value: selected,
|
||||
onSelect: (value) => selected(value)
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(DynamicDemo, dynamicTarget);
|
||||
}
|
||||
|
||||
// 5. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const colors = ['Red', 'Blue', 'Green', 'Yellow', 'Purple', 'Orange', 'Pink', 'Brown', 'Black', 'White'];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({}, [
|
||||
Autocomplete({
|
||||
label: 'Primary style',
|
||||
class: 'input-primary',
|
||||
options: colors,
|
||||
value: $(''),
|
||||
placeholder: 'Search colors...'
|
||||
})
|
||||
]),
|
||||
Div({}, [
|
||||
Autocomplete({
|
||||
label: 'Secondary style',
|
||||
class: 'input-secondary',
|
||||
options: colors,
|
||||
value: $(''),
|
||||
placeholder: 'Search colors...'
|
||||
})
|
||||
]),
|
||||
Div({}, [
|
||||
Autocomplete({
|
||||
label: 'Ghost style',
|
||||
class: 'input-ghost',
|
||||
options: colors,
|
||||
value: $(''),
|
||||
placeholder: 'Search colors...'
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initAutocompleteExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initAutocompleteExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
@@ -1,6 +1,6 @@
|
||||
# Badge
|
||||
|
||||
Badge component for displaying counts, labels, and status indicators with DaisyUI styling.
|
||||
Badge component for displaying counts, labels, and status indicators.
|
||||
|
||||
## Tag
|
||||
|
||||
@@ -8,10 +8,29 @@ Badge component for displaying counts, labels, and status indicators with DaisyU
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI badge variants) |
|
||||
| `children` | `string \| VNode` | `-` | Badge content |
|
||||
| Prop | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI badge variants) |
|
||||
| `children` | `string \| VNode` | `-` | Badge content |
|
||||
|
||||
## Styling
|
||||
|
||||
Badge supports all **daisyUI Badge classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color | `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error` | Visual color variants |
|
||||
| Size | `badge-xs`, `badge-sm`, `badge-md`, `badge-lg` | Badge scale |
|
||||
| Style | `badge-outline`, `badge-ghost`, `badge-dash` | Visual style variants |
|
||||
|
||||
> For further details, check the [daisyUI Badge Documentation](https://daisyui.com/components/badge) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Badge({ class: "badge-primary badge-lg" }, "New");
|
||||
// Applies: primary color, large size
|
||||
```
|
||||
|
||||
## Live Examples
|
||||
|
||||
@@ -125,19 +144,19 @@ $mount(GhostDemo, '#demo-ghost');
|
||||
const IconsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-2' }, [
|
||||
Badge({ class: 'gap-1' }, [
|
||||
Icons.iconSuccess,
|
||||
Span({}, '✓'),
|
||||
Span({}, 'Success')
|
||||
]),
|
||||
Badge({ class: 'gap-1 badge-warning' }, [
|
||||
Icons.iconWarning,
|
||||
Span({}, '⚠'),
|
||||
Span({}, 'Warning')
|
||||
]),
|
||||
Badge({ class: 'gap-1 badge-error' }, [
|
||||
Icons.iconError,
|
||||
Span({}, '✗'),
|
||||
Span({}, 'Error')
|
||||
]),
|
||||
Badge({ class: 'gap-1 badge-info' }, [
|
||||
Icons.iconInfo,
|
||||
Span({}, 'ℹ'),
|
||||
Span({}, 'Info')
|
||||
]),
|
||||
Badge({ class: 'gap-1' }, [
|
||||
@@ -301,237 +320,4 @@ const InlineDemo = () => {
|
||||
]);
|
||||
};
|
||||
$mount(InlineDemo, '#demo-inline');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initBadgeExamples = () => {
|
||||
|
||||
// 1. Basic Badge
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-2' }, [
|
||||
Badge({}, 'Default'),
|
||||
Badge({ class: 'badge-primary' }, 'Primary'),
|
||||
Badge({ class: 'badge-secondary' }, 'Secondary'),
|
||||
Badge({ class: 'badge-accent' }, 'Accent'),
|
||||
Badge({ class: 'badge-info' }, 'Info'),
|
||||
Badge({ class: 'badge-success' }, 'Success'),
|
||||
Badge({ class: 'badge-warning' }, 'Warning'),
|
||||
Badge({ class: 'badge-error' }, 'Error')
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Badge Sizes
|
||||
const sizesTarget = document.querySelector('#demo-sizes');
|
||||
if (sizesTarget && !sizesTarget.hasChildNodes()) {
|
||||
const SizesDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-2 items-center' }, [
|
||||
Badge({ class: 'badge-xs' }, 'Extra Small'),
|
||||
Badge({ class: 'badge-sm' }, 'Small'),
|
||||
Badge({}, 'Default'),
|
||||
Badge({ class: 'badge-md' }, 'Medium'),
|
||||
Badge({ class: 'badge-lg' }, 'Large')
|
||||
]);
|
||||
};
|
||||
$mount(SizesDemo, sizesTarget);
|
||||
}
|
||||
|
||||
// 3. Outline Badges
|
||||
const outlineTarget = document.querySelector('#demo-outline');
|
||||
if (outlineTarget && !outlineTarget.hasChildNodes()) {
|
||||
const OutlineDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-2' }, [
|
||||
Badge({ class: 'badge-outline' }, 'Default'),
|
||||
Badge({ class: 'badge-outline badge-primary' }, 'Primary'),
|
||||
Badge({ class: 'badge-outline badge-secondary' }, 'Secondary'),
|
||||
Badge({ class: 'badge-outline badge-accent' }, 'Accent'),
|
||||
Badge({ class: 'badge-outline badge-info' }, 'Info'),
|
||||
Badge({ class: 'badge-outline badge-success' }, 'Success'),
|
||||
Badge({ class: 'badge-outline badge-warning' }, 'Warning'),
|
||||
Badge({ class: 'badge-outline badge-error' }, 'Error')
|
||||
]);
|
||||
};
|
||||
$mount(OutlineDemo, outlineTarget);
|
||||
}
|
||||
|
||||
// 4. Ghost Badges
|
||||
const ghostTarget = document.querySelector('#demo-ghost');
|
||||
if (ghostTarget && !ghostTarget.hasChildNodes()) {
|
||||
const GhostDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-2' }, [
|
||||
Badge({ class: 'badge-ghost' }, 'Default'),
|
||||
Badge({ class: 'badge-ghost badge-primary' }, 'Primary'),
|
||||
Badge({ class: 'badge-ghost badge-secondary' }, 'Secondary'),
|
||||
Badge({ class: 'badge-ghost badge-accent' }, 'Accent'),
|
||||
Badge({ class: 'badge-ghost badge-info' }, 'Info'),
|
||||
Badge({ class: 'badge-ghost badge-success' }, 'Success'),
|
||||
Badge({ class: 'badge-ghost badge-warning' }, 'Warning'),
|
||||
Badge({ class: 'badge-ghost badge-error' }, 'Error')
|
||||
]);
|
||||
};
|
||||
$mount(GhostDemo, ghostTarget);
|
||||
}
|
||||
|
||||
// 5. With Icons
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-2' }, [
|
||||
Badge({ class: 'gap-1' }, [
|
||||
Img({src: Icons.iconSuccess}),
|
||||
Span({}, 'Success')
|
||||
]),
|
||||
Badge({ class: 'gap-1 badge-warning' }, [
|
||||
Img({src: Icons.iconWarning}),
|
||||
Span({}, 'Warning')
|
||||
]),
|
||||
Badge({ class: 'gap-1 badge-error' }, [
|
||||
Img({src: Icons.iconError}),
|
||||
Span({}, 'Error')
|
||||
]),
|
||||
Badge({ class: 'gap-1 badge-info' }, [
|
||||
Img({src: Icons.iconInfo}),
|
||||
Span({}, 'Info')
|
||||
]),
|
||||
Badge({ class: 'gap-1' }, [
|
||||
Span({}, '★'),
|
||||
Span({}, '4.5')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 6. Status Badges
|
||||
const statusTarget = document.querySelector('#demo-status');
|
||||
if (statusTarget && !statusTarget.hasChildNodes()) {
|
||||
const StatusDemo = () => {
|
||||
const statuses = [
|
||||
{ label: 'Active', class: 'badge-success' },
|
||||
{ label: 'Pending', class: 'badge-warning' },
|
||||
{ label: 'Completed', class: 'badge-info' },
|
||||
{ label: 'Failed', class: 'badge-error' },
|
||||
{ label: 'Archived', class: 'badge-ghost' }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Order Status'),
|
||||
Div({ class: 'flex flex-wrap gap-2' }, statuses.map(status =>
|
||||
Badge({ class: status.class }, status.label)
|
||||
))
|
||||
]);
|
||||
};
|
||||
$mount(StatusDemo, statusTarget);
|
||||
}
|
||||
|
||||
// 7. Count Badges
|
||||
const countTarget = document.querySelector('#demo-count');
|
||||
if (countTarget && !countTarget.hasChildNodes()) {
|
||||
const CountDemo = () => {
|
||||
const notifications = $(3);
|
||||
const messages = $(5);
|
||||
const updates = $(0);
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-6' }, [
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Span({}, 'Notifications'),
|
||||
Badge({ class: 'badge-primary' }, () => notifications())
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Span({}, 'Messages'),
|
||||
Badge({ class: 'badge-secondary' }, () => messages())
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Span({}, 'Updates'),
|
||||
Badge({ class: 'badge-ghost' }, () => updates() || '0')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(CountDemo, countTarget);
|
||||
}
|
||||
|
||||
// 8. Interactive Badge
|
||||
const interactiveTarget = document.querySelector('#demo-interactive');
|
||||
if (interactiveTarget && !interactiveTarget.hasChildNodes()) {
|
||||
const InteractiveDemo = () => {
|
||||
const count = $(0);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Div({ class: 'flex items-center gap-4' }, [
|
||||
Button({ class: 'btn btn-sm', onclick: () => count(count() - 1) }, '-'),
|
||||
Badge({ class: 'badge-primary text-lg min-w-[4rem] justify-center' }, () => count()),
|
||||
Button({ class: 'btn btn-sm', onclick: () => count(count() + 1) }, '+')
|
||||
]),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm',
|
||||
onclick: () => count(0)
|
||||
}, 'Reset')
|
||||
]);
|
||||
};
|
||||
$mount(InteractiveDemo, interactiveTarget);
|
||||
}
|
||||
|
||||
// 9. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'flex flex-wrap gap-2' }, [
|
||||
Badge({ class: 'badge-xs' }, 'XS'),
|
||||
Badge({ class: 'badge-sm' }, 'SM'),
|
||||
Badge({}, 'MD'),
|
||||
Badge({ class: 'badge-lg' }, 'LG')
|
||||
]),
|
||||
Div({ class: 'flex flex-wrap gap-2' }, [
|
||||
Badge({ class: 'badge-primary badge-sm' }, 'Primary'),
|
||||
Badge({ class: 'badge-secondary badge-sm' }, 'Secondary'),
|
||||
Badge({ class: 'badge-accent badge-sm' }, 'Accent')
|
||||
]),
|
||||
Div({ class: 'flex flex-wrap gap-2' }, [
|
||||
Badge({ class: 'badge-outline badge-primary' }, 'Outline'),
|
||||
Badge({ class: 'badge-ghost badge-primary' }, 'Ghost')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
|
||||
// 10. Inline with Text
|
||||
const inlineTarget = document.querySelector('#demo-inline');
|
||||
if (inlineTarget && !inlineTarget.hasChildNodes()) {
|
||||
const InlineDemo = () => {
|
||||
return Div({ class: 'space-y-2' }, [
|
||||
Div({ class: 'text-sm' }, [
|
||||
'Your order is ',
|
||||
Badge({ class: 'badge-success badge-sm' }, 'Confirmed'),
|
||||
' and will be shipped soon.'
|
||||
]),
|
||||
Div({ class: 'text-sm' }, [
|
||||
'This feature is ',
|
||||
Badge({ class: 'badge-warning badge-sm' }, 'Beta'),
|
||||
' and may change.'
|
||||
]),
|
||||
Div({ class: 'text-sm' }, [
|
||||
'Version ',
|
||||
Badge({ class: 'badge-info badge-xs' }, 'v2.1.0'),
|
||||
' released on March 2026'
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(InlineDemo, inlineTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initBadgeExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initBadgeExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
@@ -1,248 +0,0 @@
|
||||
# Button
|
||||
|
||||
Styled button with full DaisyUI support and reactive states.
|
||||
|
||||
## Tag
|
||||
|
||||
`Button`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :------------------ | :------------------------------------------ |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
|
||||
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
|
||||
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
|
||||
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
|
||||
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
|
||||
| `onclick` | `function` | `-` | Click event handler |
|
||||
| `type` | `string` | `'button'` | Native button type |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Button
|
||||
|
||||
<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 = () => {
|
||||
return Button({ class: "btn btn-primary" }, "Click Me");
|
||||
};
|
||||
$mount(BasicDemo, "#demo-basic");
|
||||
```
|
||||
|
||||
### With Loading 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-loading" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const LoadingDemo = () => {
|
||||
const isSaving = $(false);
|
||||
|
||||
return Button(
|
||||
{
|
||||
class: "btn btn-success",
|
||||
loading: isSaving,
|
||||
onclick: async () => {
|
||||
isSaving(true);
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
isSaving(false);
|
||||
},
|
||||
},
|
||||
"Save Changes",
|
||||
);
|
||||
};
|
||||
$mount(LoadingDemo, "#demo-loading");
|
||||
```
|
||||
|
||||
### With Badge
|
||||
|
||||
<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-badge" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BadgeDemo = () => {
|
||||
return Button(
|
||||
{
|
||||
class: "btn btn-outline",
|
||||
badge: "3",
|
||||
badgeClass: "badge-accent",
|
||||
},
|
||||
"Notifications",
|
||||
);
|
||||
};
|
||||
$mount(BadgeDemo, "#demo-badge");
|
||||
```
|
||||
|
||||
### 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 = () => {
|
||||
return Button(
|
||||
{
|
||||
class: "btn btn-ghost",
|
||||
tooltip: "Delete item",
|
||||
},
|
||||
"Delete",
|
||||
);
|
||||
};
|
||||
$mount(TooltipDemo, "#demo-tooltip");
|
||||
```
|
||||
|
||||
### 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 = () => {
|
||||
const isDisabled = $(true);
|
||||
|
||||
return Button(
|
||||
{
|
||||
class: "btn btn-primary",
|
||||
disabled: isDisabled,
|
||||
},
|
||||
"Submit",
|
||||
);
|
||||
};
|
||||
$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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
|
||||
Button({ class: "btn btn-primary" }, "Primary"),
|
||||
Button({ class: "btn btn-secondary" }, "Secondary"),
|
||||
Button({ class: "btn btn-accent" }, "Accent"),
|
||||
Button({ class: "btn btn-ghost" }, "Ghost"),
|
||||
Button({ class: "btn btn-outline" }, "Outline"),
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, "#demo-variants");
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initButtonExamples = () => {
|
||||
|
||||
// 1. Basic Button
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => Button({ class: "btn btn-primary" }, "Click Me");
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Loading State
|
||||
const loadingTarget = document.querySelector('#demo-loading');
|
||||
if (loadingTarget && !loadingTarget.hasChildNodes()) {
|
||||
const LoadingDemo = () => {
|
||||
const isSaving = $(false);
|
||||
return Button({
|
||||
class: "btn btn-success",
|
||||
loading: isSaving,
|
||||
onclick: async () => {
|
||||
isSaving(true);
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
isSaving(false);
|
||||
}
|
||||
}, "Save Changes");
|
||||
};
|
||||
$mount(LoadingDemo, loadingTarget);
|
||||
}
|
||||
|
||||
// 3. Badge
|
||||
const badgeTarget = document.querySelector('#demo-badge');
|
||||
if (badgeTarget && !badgeTarget.hasChildNodes()) {
|
||||
const BadgeDemo = () => Button({
|
||||
class: "btn btn-outline",
|
||||
badge: "3",
|
||||
badgeClass: "badge-accent"
|
||||
}, "Notifications");
|
||||
$mount(BadgeDemo, badgeTarget);
|
||||
}
|
||||
|
||||
// 4. Tooltip
|
||||
const tooltipTarget = document.querySelector('#demo-tooltip');
|
||||
if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
|
||||
const TooltipDemo = () => Button({
|
||||
class: "btn btn-ghost",
|
||||
tooltip: "Delete item"
|
||||
}, "Delete");
|
||||
$mount(TooltipDemo, tooltipTarget);
|
||||
}
|
||||
|
||||
// 5. Disabled State
|
||||
const disabledTarget = document.querySelector('#demo-disabled');
|
||||
if (disabledTarget && !disabledTarget.hasChildNodes()) {
|
||||
const DisabledDemo = () => {
|
||||
const isDisabled = $(true);
|
||||
return Button({
|
||||
class: "btn btn-primary",
|
||||
disabled: isDisabled
|
||||
}, "Submit");
|
||||
};
|
||||
$mount(DisabledDemo, disabledTarget);
|
||||
}
|
||||
|
||||
// 6. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => Div({ class: "flex flex-wrap gap-2 justify-center" }, [
|
||||
Button({ class: "btn btn-primary" }, "Primary"),
|
||||
Button({ class: "btn btn-secondary" }, "Secondary"),
|
||||
Button({ class: "btn btn-accent" }, "Accent"),
|
||||
Button({ class: "btn btn-ghost" }, "Ghost"),
|
||||
Button({ class: "btn btn-outline" }, "Outline")
|
||||
]);
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
// Ejecutar la función después de definirla
|
||||
initButtonExamples();
|
||||
|
||||
// Registrar para navegación en Docsify
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initButtonExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@@ -1,53 +1,44 @@
|
||||
> # Button(props, children?: string | Signal | [...]): HTMLElement
|
||||
# Button
|
||||
|
||||
---
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :------------------ | :------------------------------- |
|
||||
| `class` | `string` | `''` | Additional CSS classes (daisyUI) |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
|
||||
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
|
||||
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
|
||||
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
|
||||
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
|
||||
| `onclick` | `function` | `-` | Click event handler |
|
||||
| `type` | `string` | `'button'` | Native button type |
|
||||
| Prop | Type | Description |
|
||||
| :--------- | :--------------------------- | :----------------------------------------------------- |
|
||||
| `class` | `string` | Additional CSS classes |
|
||||
| `loading` | `boolean \| Signal<boolean>` | Shows a spinner and disables the button |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | Disabled state |
|
||||
| `icon` | `string \| VNode \| Signal` | Icon displayed before the text |
|
||||
| `onclick` | `function` | Click event handler |
|
||||
| `type` | `string` | Native button type (`'button'`, `'submit'`, `'reset'`) |
|
||||
|
||||
## Class Options
|
||||
---
|
||||
|
||||
For more detailed information about the underlying styling system, visit the daisyUI documentation:
|
||||
## Classes (daisyUI)
|
||||
|
||||
- [daisyUI Button](https://daisyui.com/components/button)
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color | `btn-primary`, `btn-secondary`, `btn-accent`, `btn-ghost`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` | Visual color variants |
|
||||
| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl` | Button scale |
|
||||
| Style | `btn-outline`, `btn-soft`, `btn-dash`, `btn-link` | Visual style variants |
|
||||
| Shape | `btn-circle`, `btn-square`, `btn-wide`, `btn-block` | Button shape |
|
||||
| State | `btn-active`, `btn-disabled` | Forced visual states |
|
||||
|
||||
| Class Name | Category | Description |
|
||||
| :-------------- | :------------ | :------------------------------------ |
|
||||
| `btn-neutral` | `Color` 🎨 | Neutral brand color |
|
||||
| `btn-primary` | `Color` 🎨 | Primary brand color |
|
||||
| `btn-secondary` | `Color` 🎨 | Secondary brand color |
|
||||
| `btn-accent` | `Color` 🎨 | Accent brand color |
|
||||
| `btn-info` | `Color` 🎨 | Informational blue color |
|
||||
| `btn-success` | `Color` 🎨 | Success green color |
|
||||
| `btn-warning` | `Color` 🎨 | Warning yellow color |
|
||||
| `btn-error` | `Color` 🎨 | Error red color |
|
||||
| `btn-xl` | `Size` 📏 | Extra large scale |
|
||||
| `btn-lg` | `Size` 📏 | Large scale |
|
||||
| `btn-md` | `Size` 📏 | Medium scale (Default) |
|
||||
| `btn-sm` | `Size` 📏 | Small scale |
|
||||
| `btn-xs` | `Size` 📏 | Extra small scale |
|
||||
| `btn-outline` | `Style` ✨ | Transparent with colored border |
|
||||
| `btn-dash` | `Style` ✨ | Dashed border style |
|
||||
| `btn-soft` | `Style` ✨ | Low opacity background color |
|
||||
| `btn-ghost` | `Style` ✨ | No background, hover effect only |
|
||||
| `btn-link` | `Style` ✨ | Looks like a text link |
|
||||
| `btn-square` | `Shape` 📐 | 1:1 aspect ratio |
|
||||
| `btn-circle` | `Shape` 📐 | 1:1 aspect ratio with rounded corners |
|
||||
| `btn-wide` | `Shape` 📐 | Extra horizontal padding |
|
||||
| `btn-block` | `Shape` 📐 | Full width of container |
|
||||
| `btn-active` | `Behavior` ⚙️ | Forced active/pressed state |
|
||||
| `btn-disabled` | `Behavior` ⚙️ | Visual and functional disabled state |
|
||||
> SigProUI supports styling via daisyUI independently or combined with the `ui` prop.
|
||||
> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Button({ class: "btn-primary btn-lg btn-circle gap-4"}, "Click Me");
|
||||
// Applies: primary color, large size, circular shape
|
||||
// class is any css class from pure css or favorite framework
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Button
|
||||
|
||||
@@ -84,19 +75,32 @@ const LoadingDemo = () => {
|
||||
$mount(LoadingDemo, "#demo-loading");
|
||||
```
|
||||
|
||||
### With Badge
|
||||
### With Icon
|
||||
|
||||
<div id="demo-icon" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
|
||||
```javascript
|
||||
const IconDemo = () => {
|
||||
return Button(
|
||||
{
|
||||
class: "btn-primary",
|
||||
icon: "⭐",
|
||||
},
|
||||
"Favorite",
|
||||
);
|
||||
};
|
||||
$mount(IconDemo, "#demo-icon");
|
||||
```
|
||||
|
||||
### With Badge (using Indicator)
|
||||
|
||||
<div id="demo-badge" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
|
||||
```javascript
|
||||
const BadgeDemo = () => {
|
||||
return Button(
|
||||
{
|
||||
class: "btn-outline",
|
||||
badge: "3",
|
||||
badgeClass: "badge-accent",
|
||||
},
|
||||
"Notifications",
|
||||
return Indicator(
|
||||
{ value: "3", class: "badge-accent" },
|
||||
Button({ class: "btn-outline" }, "Notifications"),
|
||||
);
|
||||
};
|
||||
$mount(BadgeDemo, "#demo-badge");
|
||||
@@ -108,36 +112,37 @@ $mount(BadgeDemo, "#demo-badge");
|
||||
|
||||
```javascript
|
||||
const TooltipDemo = () => {
|
||||
return Button(
|
||||
{
|
||||
class: "btn-ghost",
|
||||
tooltip: "Delete item",
|
||||
},
|
||||
"Delete",
|
||||
);
|
||||
return Tooltip({ tip: "Delete item" }, Button({ class: "btn-ghost" }, "Delete"));
|
||||
};
|
||||
$mount(TooltipDemo, "#demo-tooltip");
|
||||
```
|
||||
|
||||
### Disabled State
|
||||
### Combined (Badge + Tooltip)
|
||||
|
||||
<div id="demo-disabled" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
<div id="demo-combined" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
|
||||
```javascript
|
||||
const DisabledDemo = () => {
|
||||
const isDisabled = $(true);
|
||||
|
||||
return Button(
|
||||
{
|
||||
class: "btn-primary btn-disabled",
|
||||
},
|
||||
"Submit",
|
||||
const CombinedDemo = () => {
|
||||
const count = $(0);
|
||||
return Tooltip(
|
||||
{ tip: () => `${count()} likes` },
|
||||
Indicator(
|
||||
{ value: count, class: "badge-accent" },
|
||||
Button(
|
||||
{
|
||||
class: "btn-primary btn-lg",
|
||||
icon: "👍",
|
||||
onclick: () => count(count() + 1),
|
||||
},
|
||||
"Like",
|
||||
)
|
||||
),
|
||||
);
|
||||
};
|
||||
$mount(DisabledDemo, "#demo-disabled");
|
||||
$mount(CombinedDemo, "#demo-combined");
|
||||
```
|
||||
|
||||
### All Variants
|
||||
### All Color Variants
|
||||
|
||||
<div id="demo-variants" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
|
||||
@@ -153,16 +158,3 @@ const VariantsDemo = () => {
|
||||
};
|
||||
$mount(VariantsDemo, "#demo-variants");
|
||||
```
|
||||
|
||||
<div id="demo-test" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
|
||||
```javascript
|
||||
const TestDemo = () => {
|
||||
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
|
||||
$html("span", {class: "indicator"},[
|
||||
5,
|
||||
Button('Click')])
|
||||
]);
|
||||
};
|
||||
$mount(TestDemo, "#demo-test");
|
||||
```
|
||||
|
||||
@@ -8,15 +8,38 @@ Toggle checkbox component with label, tooltip support, and reactive state manage
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `label` | `string` | `-` | Label text for the checkbox |
|
||||
| `value` | `boolean \| Signal<boolean>` | `false` | Checked state |
|
||||
| `tooltip` | `string` | `-` | Tooltip text on hover |
|
||||
| `toggle` | `boolean` | `false` | Display as toggle switch instead of checkbox |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `onclick` | `function` | `-` | Click event handler |
|
||||
| Prop | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `label` | `string` | `-` | Label text for the checkbox |
|
||||
| `value` | `boolean \| Signal<boolean>` | `false` | Checked state |
|
||||
| `tooltip` | `string` | `-` | Tooltip text on hover |
|
||||
| `toggle` | `boolean` | `false` | Display as toggle switch instead of checkbox |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `onclick` | `function` | `-` | Click event handler |
|
||||
|
||||
## Styling
|
||||
|
||||
Checkbox supports all **daisyUI Checkbox and Toggle classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color (Checkbox) | `checkbox-primary`, `checkbox-secondary`, `checkbox-accent`, `checkbox-info`, `checkbox-success`, `checkbox-warning`, `checkbox-error` | Checkbox color variants |
|
||||
| Size (Checkbox) | `checkbox-xs`, `checkbox-sm`, `checkbox-md`, `checkbox-lg` | Checkbox scale |
|
||||
| Color (Toggle) | `toggle-primary`, `toggle-secondary`, `toggle-accent`, `toggle-info`, `toggle-success`, `toggle-warning`, `toggle-error` | Toggle color variants |
|
||||
| Size (Toggle) | `toggle-xs`, `toggle-sm`, `toggle-md`, `toggle-lg` | Toggle scale |
|
||||
|
||||
> For further details, check the [daisyUI Checkbox Documentation](https://daisyui.com/components/checkbox) and [daisyUI Toggle Documentation](https://daisyui.com/components/toggle) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
// Checkbox
|
||||
Checkbox({ class: "checkbox-primary checkbox-lg", label: "Accept terms" });
|
||||
|
||||
// Toggle switch
|
||||
Checkbox({ toggle: true, class: "toggle-success", label: "Enable feature" });
|
||||
```
|
||||
|
||||
## Live Examples
|
||||
|
||||
@@ -264,216 +287,4 @@ const FormDemo = () => {
|
||||
]);
|
||||
};
|
||||
$mount(FormDemo, '#demo-form');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initCheckboxExamples = () => {
|
||||
|
||||
// 1. Basic Checkbox
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const accepted = $(false);
|
||||
|
||||
return Checkbox({
|
||||
label: 'I accept the terms and conditions',
|
||||
value: accepted,
|
||||
onclick: () => accepted(!accepted())
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Toggle Switch
|
||||
const toggleTarget = document.querySelector('#demo-toggle');
|
||||
if (toggleTarget && !toggleTarget.hasChildNodes()) {
|
||||
const ToggleDemo = () => {
|
||||
const enabled = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Checkbox({
|
||||
label: 'Enable notifications',
|
||||
value: enabled,
|
||||
toggle: true,
|
||||
onclick: () => enabled(!enabled())
|
||||
}),
|
||||
() => enabled()
|
||||
? Div({ class: 'alert alert-success' }, 'Notifications are ON')
|
||||
: Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
|
||||
]);
|
||||
};
|
||||
$mount(ToggleDemo, toggleTarget);
|
||||
}
|
||||
|
||||
// 3. With Tooltip
|
||||
const tooltipTarget = document.querySelector('#demo-tooltip');
|
||||
if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
|
||||
const TooltipDemo = () => {
|
||||
const darkMode = $(false);
|
||||
|
||||
return Checkbox({
|
||||
label: 'Dark mode',
|
||||
value: darkMode,
|
||||
tooltip: 'Enable dark theme preference',
|
||||
onclick: () => darkMode(!darkMode())
|
||||
});
|
||||
};
|
||||
$mount(TooltipDemo, tooltipTarget);
|
||||
}
|
||||
|
||||
// 4. Disabled State
|
||||
const disabledTarget = document.querySelector('#demo-disabled');
|
||||
if (disabledTarget && !disabledTarget.hasChildNodes()) {
|
||||
const DisabledDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Checkbox({
|
||||
label: 'Checked and disabled',
|
||||
value: true,
|
||||
disabled: true
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Unchecked and disabled',
|
||||
value: false,
|
||||
disabled: true
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(DisabledDemo, disabledTarget);
|
||||
}
|
||||
|
||||
// 5. Reactive Multiple Selection
|
||||
const multipleTarget = document.querySelector('#demo-multiple');
|
||||
if (multipleTarget && !multipleTarget.hasChildNodes()) {
|
||||
const MultipleDemo = () => {
|
||||
const options = [
|
||||
{ id: 1, label: 'Option 1', selected: $(false) },
|
||||
{ id: 2, label: 'Option 2', selected: $(false) },
|
||||
{ id: 3, label: 'Option 3', selected: $(false) }
|
||||
];
|
||||
|
||||
const selectAll = $(false);
|
||||
|
||||
const toggleAll = (value) => {
|
||||
selectAll(value);
|
||||
options.forEach(opt => opt.selected(value));
|
||||
};
|
||||
|
||||
const updateSelectAll = () => {
|
||||
const allSelected = options.every(opt => opt.selected());
|
||||
selectAll(allSelected);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Checkbox({
|
||||
label: 'Select all',
|
||||
value: selectAll,
|
||||
onclick: () => toggleAll(!selectAll())
|
||||
}),
|
||||
Div({ class: 'divider my-1' }),
|
||||
...options.map(opt => Checkbox({
|
||||
label: opt.label,
|
||||
value: opt.selected,
|
||||
onclick: () => {
|
||||
opt.selected(!opt.selected());
|
||||
updateSelectAll();
|
||||
}
|
||||
})),
|
||||
Div({ class: 'mt-2 text-sm opacity-70' }, () => {
|
||||
const count = options.filter(opt => opt.selected()).length;
|
||||
return `${count} of ${options.length} selected`;
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(MultipleDemo, multipleTarget);
|
||||
}
|
||||
|
||||
// 6. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const variant1 = $(true);
|
||||
const variant2 = $(false);
|
||||
const variant3 = $(true);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Div({ class: 'flex items-center gap-4' }, [
|
||||
Checkbox({
|
||||
label: 'Primary',
|
||||
value: variant1,
|
||||
class: 'checkbox-primary',
|
||||
onclick: () => variant1(!variant1())
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Secondary',
|
||||
value: variant2,
|
||||
class: 'checkbox-secondary',
|
||||
onclick: () => variant2(!variant2())
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-4' }, [
|
||||
Checkbox({
|
||||
label: 'Accent',
|
||||
value: variant3,
|
||||
class: 'checkbox-accent',
|
||||
onclick: () => variant3(!variant3())
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Toggle switch',
|
||||
value: $(false),
|
||||
toggle: true,
|
||||
class: 'toggle-primary'
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
|
||||
// 7. Form Example
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
const FormDemo = () => {
|
||||
const subscribe = $(false);
|
||||
const weekly = $(false);
|
||||
const monthly = $(true);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Newsletter preferences'),
|
||||
Checkbox({
|
||||
label: 'Subscribe to newsletter',
|
||||
value: subscribe,
|
||||
onclick: () => subscribe(!subscribe())
|
||||
}),
|
||||
() => subscribe() ? Div({ class: 'ml-6 flex flex-col gap-2' }, [
|
||||
Checkbox({
|
||||
label: 'Weekly updates',
|
||||
value: weekly,
|
||||
onclick: () => weekly(!weekly())
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Monthly digest',
|
||||
value: monthly,
|
||||
onclick: () => monthly(!monthly())
|
||||
})
|
||||
]) : null,
|
||||
() => subscribe() && (weekly() || monthly())
|
||||
? Div({ class: 'alert alert-success text-sm mt-2' }, 'You will receive updates!')
|
||||
: subscribe()
|
||||
? Div({ class: 'alert alert-warning text-sm mt-2' }, 'Select at least one frequency')
|
||||
: null
|
||||
]);
|
||||
};
|
||||
$mount(FormDemo, formTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initCheckboxExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initCheckboxExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
@@ -8,11 +8,32 @@ Color picker component with preset color palette, reactive value binding, and cu
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `label` | `string` | `-` | Label text for the button |
|
||||
| `value` | `string \| Signal<string>` | `'#000000'` | Selected color value (hex format) |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| Prop | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `label` | `string` | `-` | Label text for the button |
|
||||
| `value` | `string \| Signal<string>` | `'#000000'` | Selected color value (hex format) |
|
||||
| `class` | `string` | `''` | Additional CSS classes (Tailwind + custom styling) |
|
||||
|
||||
## Styling
|
||||
|
||||
Colorpicker is a custom component built with Tailwind CSS. The button supports standard **daisyUI Button classes** for consistent styling:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg` | Button scale |
|
||||
| Style | `btn-outline`, `btn-soft`, `btn-ghost` | Visual style variants |
|
||||
|
||||
> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – The color picker button accepts standard button styling classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Colorpicker({
|
||||
class: "btn-outline btn-sm",
|
||||
label: "Pick color",
|
||||
value: selectedColor
|
||||
});
|
||||
```
|
||||
|
||||
## Live Examples
|
||||
|
||||
@@ -56,10 +77,10 @@ const PreviewDemo = () => {
|
||||
value: color
|
||||
}),
|
||||
Div({
|
||||
class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200',
|
||||
class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200 flex items-center justify-center',
|
||||
style: () => `background-color: ${color()}`
|
||||
}, [
|
||||
Div({ class: 'text-center leading-20 pt-6 opacity-70' }, () => color())
|
||||
Div({ class: 'text-center font-mono text-sm bg-black/20 px-2 py-1 rounded' }, () => color())
|
||||
])
|
||||
]);
|
||||
};
|
||||
@@ -196,187 +217,19 @@ const DynamicDemo = () => {
|
||||
]),
|
||||
Div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
|
||||
style: () => `background-color: ${primary()}; color: white`
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
|
||||
style: () => `background-color: ${primary()}`
|
||||
}, 'Primary'),
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
|
||||
style: () => `background-color: ${secondary()}; color: white`
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
|
||||
style: () => `background-color: ${secondary()}`
|
||||
}, 'Secondary'),
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
|
||||
style: () => `background-color: ${accent()}; color: white`
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
|
||||
style: () => `background-color: ${accent()}`
|
||||
}, 'Accent')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DynamicDemo, '#demo-dynamic');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initColorpickerExamples = () => {
|
||||
|
||||
// 1. Basic Colorpicker
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const color = $('#3b82f6');
|
||||
return Colorpicker({
|
||||
label: 'Pick a color',
|
||||
value: color
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Reactive Preview
|
||||
const previewTarget = document.querySelector('#demo-preview');
|
||||
if (previewTarget && !previewTarget.hasChildNodes()) {
|
||||
const PreviewDemo = () => {
|
||||
const color = $('#10b981');
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Colorpicker({
|
||||
label: 'Choose color',
|
||||
value: color
|
||||
}),
|
||||
Div({
|
||||
class: 'w-full h-20 rounded-lg shadow-inner transition-all duration-200 flex items-center justify-center',
|
||||
style: () => `background-color: ${color()}`
|
||||
}, [
|
||||
Div({ class: 'text-center font-mono text-sm bg-black/20 px-2 py-1 rounded' }, () => color())
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PreviewDemo, previewTarget);
|
||||
}
|
||||
|
||||
// 3. Color Palette Grid
|
||||
const paletteTarget = document.querySelector('#demo-palette');
|
||||
if (paletteTarget && !paletteTarget.hasChildNodes()) {
|
||||
const PaletteDemo = () => {
|
||||
const selectedColor = $('#ef4444');
|
||||
const presets = [
|
||||
'#ef4444', '#f97316', '#f59e0b', '#eab308',
|
||||
'#84cc16', '#10b981', '#14b8a6', '#06b6d4',
|
||||
'#3b82f6', '#6366f1', '#8b5cf6', '#d946ef',
|
||||
'#ec489a', '#f43f5e', '#6b7280', '#1f2937'
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Colorpicker({
|
||||
label: 'Custom color',
|
||||
value: selectedColor
|
||||
}),
|
||||
Div({ class: 'divider text-xs' }, 'Or choose from palette'),
|
||||
Div({ class: 'grid grid-cols-8 gap-2' }, presets.map(color =>
|
||||
Button({
|
||||
class: `w-8 h-8 rounded-lg shadow-sm transition-transform hover:scale-110`,
|
||||
style: `background-color: ${color}`,
|
||||
onclick: () => selectedColor(color)
|
||||
})
|
||||
)),
|
||||
Div({ class: 'mt-2 text-center text-sm font-mono' }, () => selectedColor())
|
||||
]);
|
||||
};
|
||||
$mount(PaletteDemo, paletteTarget);
|
||||
}
|
||||
|
||||
// 4. With Text Color Preview
|
||||
const textTarget = document.querySelector('#demo-text');
|
||||
if (textTarget && !textTarget.hasChildNodes()) {
|
||||
const TextDemo = () => {
|
||||
const bgColor = $('#1e293b');
|
||||
const textColor = $('#f8fafc');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Colorpicker({
|
||||
label: 'Background',
|
||||
value: bgColor
|
||||
}),
|
||||
Colorpicker({
|
||||
label: 'Text',
|
||||
value: textColor
|
||||
})
|
||||
]),
|
||||
Div({
|
||||
class: 'p-6 rounded-lg text-center font-bold transition-all duration-200',
|
||||
style: () => `background-color: ${bgColor()}; color: ${textColor()}`
|
||||
}, [
|
||||
'Preview text with your colors'
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(TextDemo, textTarget);
|
||||
}
|
||||
|
||||
// 5. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 items-center' }, [
|
||||
Colorpicker({
|
||||
label: 'Primary',
|
||||
value: $('#3b82f6')
|
||||
}),
|
||||
Colorpicker({
|
||||
label: 'Success',
|
||||
value: $('#10b981')
|
||||
}),
|
||||
Colorpicker({
|
||||
label: 'Warning',
|
||||
value: $('#f59e0b')
|
||||
}),
|
||||
Colorpicker({
|
||||
label: 'Error',
|
||||
value: $('#ef4444')
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
|
||||
// 6. Dynamic Color Swatch
|
||||
const dynamicTarget = document.querySelector('#demo-dynamic');
|
||||
if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
|
||||
const DynamicDemo = () => {
|
||||
const primary = $('#3b82f6');
|
||||
const secondary = $('#ef4444');
|
||||
const accent = $('#10b981');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Div({ class: 'flex flex-wrap gap-4' }, [
|
||||
Colorpicker({ label: 'Primary', value: primary }),
|
||||
Colorpicker({ label: 'Secondary', value: secondary }),
|
||||
Colorpicker({ label: 'Accent', value: accent })
|
||||
]),
|
||||
Div({ class: 'grid grid-cols-3 gap-2 mt-2' }, [
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
|
||||
style: () => `background-color: ${primary()}`
|
||||
}, 'Primary'),
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
|
||||
style: () => `background-color: ${secondary()}`
|
||||
}, 'Secondary'),
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold text-white',
|
||||
style: () => `background-color: ${accent()}`
|
||||
}, 'Accent')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DynamicDemo, dynamicTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initColorpickerExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initColorpickerExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
@@ -8,14 +8,37 @@ Date and date range picker component with calendar interface, time selection, an
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :------------------------------------------------ | :----------------------- | :----------------------------------------------- |
|
||||
| `label` | `string` | `-` | Label text for the input |
|
||||
| `value` | `string \| {start: string, end: string} \| Signal` | `-` | Selected date or range |
|
||||
| `range` | `boolean` | `false` | Enable date range selection mode |
|
||||
| `hour` | `boolean` | `false` | Enable hour selection |
|
||||
| `placeholder`| `string` | `'Select date...'` | Placeholder text |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| Prop | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `label` | `string` | `-` | Label text for the input |
|
||||
| `value` | `string \| {start: string, end: string} \| Signal` | `-` | Selected date or range |
|
||||
| `range` | `boolean` | `false` | Enable date range selection mode |
|
||||
| `hour` | `boolean` | `false` | Enable hour selection |
|
||||
| `placeholder` | `string` | `'Select date...'` | Placeholder text |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
## Styling
|
||||
|
||||
Datepicker 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 |
|
||||
|
||||
> For further details, check the [daisyUI Input Documentation](https://daisyui.com/components/input) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Datepicker({
|
||||
class: "input-primary input-lg",
|
||||
label: "Select date",
|
||||
value: selectedDate
|
||||
});
|
||||
// Applies: primary color, large size
|
||||
```
|
||||
|
||||
## Live Examples
|
||||
|
||||
@@ -190,150 +213,4 @@ const VariantsDemo = () => {
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initDatepickerExamples = () => {
|
||||
|
||||
// 1. Basic Datepicker
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const date = $('');
|
||||
|
||||
return Datepicker({
|
||||
label: 'Select date',
|
||||
value: date,
|
||||
placeholder: 'Choose a date...'
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Date Range Picker
|
||||
const rangeTarget = document.querySelector('#demo-range');
|
||||
if (rangeTarget && !rangeTarget.hasChildNodes()) {
|
||||
const RangeDemo = () => {
|
||||
const range = $({ start: '', end: '' });
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Datepicker({
|
||||
label: 'Date range',
|
||||
value: range,
|
||||
range: true,
|
||||
placeholder: 'Select start and end date...'
|
||||
}),
|
||||
() => range().start && range().end ? Div({ class: 'alert alert-success' }, [
|
||||
`Selected: ${range().start} → ${range().end}`
|
||||
]) : null
|
||||
]);
|
||||
};
|
||||
$mount(RangeDemo, rangeTarget);
|
||||
}
|
||||
|
||||
// 3. With Time Selection
|
||||
const timeTarget = document.querySelector('#demo-time');
|
||||
if (timeTarget && !timeTarget.hasChildNodes()) {
|
||||
const TimeDemo = () => {
|
||||
const datetime = $('');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Datepicker({
|
||||
label: 'Select date and time',
|
||||
value: datetime,
|
||||
hour: true,
|
||||
placeholder: 'Choose date and time...'
|
||||
}),
|
||||
() => datetime() ? Div({ class: 'alert alert-info' }, [
|
||||
`Selected: ${datetime()}`
|
||||
]) : null
|
||||
]);
|
||||
};
|
||||
$mount(TimeDemo, timeTarget);
|
||||
}
|
||||
|
||||
// 4. Range with Time
|
||||
const rangeTimeTarget = document.querySelector('#demo-range-time');
|
||||
if (rangeTimeTarget && !rangeTimeTarget.hasChildNodes()) {
|
||||
const RangeTimeDemo = () => {
|
||||
const range = $({ start: '', end: '', startHour: 9, endHour: 17 });
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Datepicker({
|
||||
label: 'Schedule range',
|
||||
value: range,
|
||||
range: true,
|
||||
hour: true,
|
||||
placeholder: 'Select date and time range...'
|
||||
}),
|
||||
() => range().start && range().end ? Div({ class: 'alert alert-primary' }, [
|
||||
`From ${range().start} ${range().startHour || 9}:00 to ${range().end} ${range().endHour || 17}:00`
|
||||
]) : null
|
||||
]);
|
||||
};
|
||||
$mount(RangeTimeDemo, rangeTimeTarget);
|
||||
}
|
||||
|
||||
// 5. Reactive Display
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const date = $('');
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Datepicker({
|
||||
label: 'Select date',
|
||||
value: date,
|
||||
placeholder: 'Choose a date...'
|
||||
}),
|
||||
Div({ class: 'stats shadow' }, [
|
||||
Div({ class: 'stat' }, [
|
||||
Div({ class: 'stat-title' }, 'Selected date'),
|
||||
Div({ class: 'stat-value text-sm' }, () => date() || 'Not selected'),
|
||||
Div({ class: 'stat-desc' }, () => date() === today ? 'Today' : '')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 6. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Datepicker({
|
||||
label: 'Single date',
|
||||
value: $('2024-12-25'),
|
||||
placeholder: 'Select date...'
|
||||
}),
|
||||
Datepicker({
|
||||
label: 'Date range',
|
||||
range: true,
|
||||
value: $({ start: '2024-12-01', end: '2024-12-31' }),
|
||||
placeholder: 'Select range...'
|
||||
}),
|
||||
Datepicker({
|
||||
label: 'With time',
|
||||
hour: true,
|
||||
value: $('2024-12-25T14:00:00'),
|
||||
placeholder: 'Select date and time...'
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initDatepickerExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initDatepickerExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
@@ -8,13 +8,37 @@ Drawer component for creating off-canvas side panels with overlay and toggle fun
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `id` | `string` | Required | Unique identifier for the drawer |
|
||||
| `open` | `boolean \| Signal<boolean>` | `false` | Drawer open state |
|
||||
| `side` | `VNode` | Required | Content to display in the drawer panel |
|
||||
| `content` | `VNode` | Required | Main page content |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| Prop | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `id` | `string` | Required | Unique identifier for the drawer |
|
||||
| `open` | `boolean \| Signal<boolean>` | `false` | Drawer open state |
|
||||
| `side` | `VNode` | Required | Content to display in the drawer panel |
|
||||
| `content` | `VNode` | Required | Main page content |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
## Styling
|
||||
|
||||
Drawer supports all **daisyUI Drawer classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Position | `drawer-end` | Drawer opens from the right side |
|
||||
| Width | `w-64`, `w-80`, `w-96` | Custom drawer width (Tailwind) |
|
||||
|
||||
> For further details, check the [daisyUI Drawer Documentation](https://daisyui.com/components/drawer) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Drawer({
|
||||
id: "my-drawer",
|
||||
open: isOpen,
|
||||
class: "drawer-end",
|
||||
side: SidebarContent,
|
||||
content: MainContent
|
||||
});
|
||||
// Applies: drawer opens from right side
|
||||
```
|
||||
|
||||
## Live Examples
|
||||
|
||||
@@ -479,440 +503,4 @@ const FormDrawer = () => {
|
||||
});
|
||||
};
|
||||
$mount(FormDrawer, '#demo-form');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initDrawerExamples = () => {
|
||||
|
||||
// 1. Basic Drawer
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Drawer({
|
||||
id: 'basic-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'text-lg font-bold mb-4' }, 'Menu'),
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'About'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4 text-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Open Drawer')
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Navigation Drawer
|
||||
const navTarget = document.querySelector('#demo-nav');
|
||||
if (navTarget && !navTarget.hasChildNodes()) {
|
||||
const NavDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const activePage = $('home');
|
||||
|
||||
const pages = {
|
||||
home: 'Welcome to the Home Page!',
|
||||
about: 'About Us - Learn more about our company',
|
||||
services: 'Our Services - What we offer',
|
||||
contact: 'Contact Us - Get in touch'
|
||||
};
|
||||
|
||||
return Drawer({
|
||||
id: 'nav-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4 w-64' }, [
|
||||
Div({ class: 'text-xl font-bold mb-6' }, 'MyApp'),
|
||||
Div({ class: 'flex flex-col gap-1' }, [
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('home');
|
||||
isOpen(false);
|
||||
}
|
||||
}, '🏠 Home'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'about' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('about');
|
||||
isOpen(false);
|
||||
}
|
||||
}, 'ℹ️ About'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'services' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('services');
|
||||
isOpen(false);
|
||||
}
|
||||
}, '⚙️ Services'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'contact' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('contact');
|
||||
isOpen(false);
|
||||
}
|
||||
}, '📧 Contact')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle',
|
||||
onclick: () => isOpen(true)
|
||||
}, '☰'),
|
||||
Span({ class: 'text-lg font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'card bg-base-200 shadow-lg' }, [
|
||||
Div({ class: 'card-body' }, [
|
||||
Div({ class: 'text-2xl font-bold mb-2' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)),
|
||||
Div({ class: 'text-lg' }, () => pages[activePage()])
|
||||
])
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(NavDrawer, navTarget);
|
||||
}
|
||||
|
||||
// 3. Settings Drawer
|
||||
const settingsTarget = document.querySelector('#demo-settings');
|
||||
if (settingsTarget && !settingsTarget.hasChildNodes()) {
|
||||
const SettingsDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const darkMode = $(false);
|
||||
const notifications = $(true);
|
||||
const autoSave = $(false);
|
||||
|
||||
return Drawer({
|
||||
id: 'settings-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4 w-80' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-6' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Settings'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle btn-sm',
|
||||
onclick: () => isOpen(false)
|
||||
}, '✕')
|
||||
]),
|
||||
Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({}, 'Dark Mode'),
|
||||
Swap({
|
||||
value: darkMode,
|
||||
on: "🌙",
|
||||
off: "☀️",
|
||||
onclick: () => darkMode(!darkMode())
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({}, 'Notifications'),
|
||||
Swap({
|
||||
value: notifications,
|
||||
on: "🔔",
|
||||
off: "🔕",
|
||||
onclick: () => notifications(!notifications())
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({}, 'Auto Save'),
|
||||
Swap({
|
||||
value: autoSave,
|
||||
on: "✅",
|
||||
off: "⭕",
|
||||
onclick: () => autoSave(!autoSave())
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'divider my-4' }),
|
||||
Div({ class: 'flex gap-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary flex-1',
|
||||
onclick: () => {
|
||||
isOpen(false);
|
||||
Toast('Settings saved!', 'alert-success', 2000);
|
||||
}
|
||||
}, 'Save'),
|
||||
Button({
|
||||
class: 'btn btn-ghost flex-1',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-lg font-bold' }, 'Dashboard'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle',
|
||||
onclick: () => isOpen(true)
|
||||
}, '⚙️')
|
||||
]),
|
||||
Div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [
|
||||
Div({ class: 'stat bg-base-200 rounded-lg p-4' }, [
|
||||
Div({ class: 'stat-title' }, 'Users'),
|
||||
Div({ class: 'stat-value' }, '1,234')
|
||||
]),
|
||||
Div({ class: 'stat bg-base-200 rounded-lg p-4' }, [
|
||||
Div({ class: 'stat-title' }, 'Revenue'),
|
||||
Div({ class: 'stat-value' }, '$45K')
|
||||
])
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(SettingsDrawer, settingsTarget);
|
||||
}
|
||||
|
||||
// 4. Cart Drawer
|
||||
const cartTarget = document.querySelector('#demo-cart');
|
||||
if (cartTarget && !cartTarget.hasChildNodes()) {
|
||||
const CartDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const cart = $([
|
||||
{ id: 1, name: 'Product 1', price: 29, quantity: 2 },
|
||||
{ id: 2, name: 'Product 2', price: 49, quantity: 1 }
|
||||
]);
|
||||
|
||||
const updateQuantity = (id, delta) => {
|
||||
cart(cart().map(item => {
|
||||
if (item.id === id) {
|
||||
const newQty = Math.max(0, item.quantity + delta);
|
||||
return newQty === 0 ? null : { ...item, quantity: newQty };
|
||||
}
|
||||
return item;
|
||||
}).filter(Boolean));
|
||||
};
|
||||
|
||||
const total = () => cart().reduce((sum, item) => sum + (item.price * item.quantity), 0);
|
||||
|
||||
return Drawer({
|
||||
id: 'cart-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'flex flex-col h-full' }, [
|
||||
Div({ class: 'p-4 border-b border-base-300' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-xl font-bold' }, `Cart (${cart().length} items)`),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle btn-sm',
|
||||
onclick: () => isOpen(false)
|
||||
}, '✕')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'flex-1 overflow-y-auto p-4' }, cart().length === 0
|
||||
? Div({ class: 'text-center text-gray-500 mt-8' }, 'Your cart is empty')
|
||||
: Div({ class: 'flex flex-col gap-3' }, cart().map(item =>
|
||||
Div({ class: 'flex gap-3 items-center p-2 bg-base-200 rounded-lg' }, [
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, item.name),
|
||||
Div({ class: 'text-sm' }, `$${item.price} each`)
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-xs btn-circle',
|
||||
onclick: () => updateQuantity(item.id, -1)
|
||||
}, '-'),
|
||||
Span({ class: 'w-8 text-center' }, item.quantity),
|
||||
Button({
|
||||
class: 'btn btn-xs btn-circle',
|
||||
onclick: () => updateQuantity(item.id, 1)
|
||||
}, '+')
|
||||
]),
|
||||
Span({ class: 'font-bold w-16 text-right' }, `$${item.price * item.quantity}`)
|
||||
])
|
||||
))
|
||||
),
|
||||
Div({ class: 'p-4 border-t border-base-300' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
Span({ class: 'font-bold' }, 'Total'),
|
||||
Span({ class: 'text-xl font-bold' }, () => `$${total()}`)
|
||||
]),
|
||||
Button({
|
||||
class: 'btn btn-primary w-full',
|
||||
onclick: () => {
|
||||
isOpen(false);
|
||||
Toast('Checkout initiated!', 'alert-success', 2000);
|
||||
},
|
||||
disabled: () => cart().length === 0
|
||||
}, 'Checkout')
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-lg font-bold' }, 'Store'),
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, () => `🛒 Cart (${cart().length})`)
|
||||
]),
|
||||
Div({ class: 'mt-4 grid grid-cols-2 gap-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-outline h-32 flex flex-col',
|
||||
onclick: () => {
|
||||
cart([...cart(), { id: Date.now(), name: 'New Product', price: 39, quantity: 1 }]);
|
||||
Toast('Added to cart!', 'alert-success', 1500);
|
||||
}
|
||||
}, ['📦', 'Add to Cart'])
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(CartDrawer, cartTarget);
|
||||
}
|
||||
|
||||
// 5. Responsive Drawer
|
||||
const responsiveTarget = document.querySelector('#demo-responsive');
|
||||
if (responsiveTarget && !responsiveTarget.hasChildNodes()) {
|
||||
const ResponsiveDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const activePage = $('home');
|
||||
|
||||
const MenuItems = () => Div({ class: 'flex flex-col gap-1 p-4' }, [
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('home');
|
||||
if (window.innerWidth < 1024) isOpen(false);
|
||||
}
|
||||
}, '🏠 Home'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'analytics' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('analytics');
|
||||
if (window.innerWidth < 1024) isOpen(false);
|
||||
}
|
||||
}, '📊 Analytics'),
|
||||
Button({
|
||||
class: `btn btn-ghost justify-start ${activePage() === 'settings' ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
activePage('settings');
|
||||
if (window.innerWidth < 1024) isOpen(false);
|
||||
}
|
||||
}, '⚙️ Settings')
|
||||
]);
|
||||
|
||||
return Drawer({
|
||||
id: 'responsive-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'w-64' }, [
|
||||
Div({ class: 'text-xl font-bold p-4 border-b border-base-300' }, 'Menu'),
|
||||
MenuItems()
|
||||
]),
|
||||
content: Div({ class: 'flex' }, [
|
||||
Div({ class: 'hidden lg:block w-64 border-r border-base-300' }, [MenuItems()]),
|
||||
Div({ class: 'flex-1 p-4' }, [
|
||||
Div({ class: 'flex justify-between items-center lg:hidden mb-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle',
|
||||
onclick: () => isOpen(true)
|
||||
}, '☰'),
|
||||
Span({ class: 'text-lg font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'card bg-base-200' }, [
|
||||
Div({ class: 'card-body' }, [
|
||||
Div({ class: 'text-2xl font-bold' }, () => activePage().charAt(0).toUpperCase() + activePage().slice(1)),
|
||||
Div({}, 'Content area. On desktop, the menu is always visible on the left.')
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(ResponsiveDrawer, responsiveTarget);
|
||||
}
|
||||
|
||||
// 6. Form Drawer
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
const FormDrawer = () => {
|
||||
const isOpen = $(false);
|
||||
const name = $('');
|
||||
const email = $('');
|
||||
const message = $('');
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (name() && email() && message()) {
|
||||
Toast('Message sent!', 'alert-success', 2000);
|
||||
isOpen(false);
|
||||
name('');
|
||||
email('');
|
||||
message('');
|
||||
} else {
|
||||
Toast('Please fill all fields', 'alert-warning', 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return Drawer({
|
||||
id: 'form-drawer',
|
||||
open: isOpen,
|
||||
side: Div({ class: 'p-4 w-96' }, [
|
||||
Div({ class: 'flex justify-between items-center mb-4' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Contact Us'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle btn-sm',
|
||||
onclick: () => isOpen(false)
|
||||
}, '✕')
|
||||
]),
|
||||
Div({ class: 'flex flex-col gap-4' }, [
|
||||
Input({
|
||||
label: 'Name',
|
||||
value: name,
|
||||
placeholder: 'Your name',
|
||||
oninput: (e) => name(e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
placeholder: 'your@email.com',
|
||||
oninput: (e) => email(e.target.value)
|
||||
}),
|
||||
Div({ class: 'form-control' }, [
|
||||
Span({ class: 'label-text mb-1' }, 'Message'),
|
||||
$html('textarea', {
|
||||
class: 'textarea textarea-bordered h-24',
|
||||
placeholder: 'Your message',
|
||||
value: message,
|
||||
oninput: (e) => message(e.target.value)
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex gap-2 mt-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary flex-1',
|
||||
onclick: handleSubmit
|
||||
}, 'Send'),
|
||||
Button({
|
||||
class: 'btn btn-ghost flex-1',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel')
|
||||
])
|
||||
])
|
||||
]),
|
||||
content: Div({ class: 'p-4 text-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Contact Us')
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(FormDrawer, formTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initDrawerExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initDrawerExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
@@ -8,22 +8,45 @@ Dropdown component for creating menus, selectors, and action panels that appear
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `label` | `string \| VNode \| Signal` | `-` | Button label or content |
|
||||
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed next to label |
|
||||
| `items` | `Array<MenuItem> \| Signal<Array>` | `-` | Array of menu items (alternative to children) |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `VNode \| function` | `-` | Custom dropdown content (alternative to items) |
|
||||
| Prop | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `label` | `string \| VNode \| Signal` | `-` | Button label or content |
|
||||
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed next to label |
|
||||
| `items` | `Array<MenuItem> \| Signal<Array>` | `-` | Array of menu items (alternative to children) |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `VNode \| function` | `-` | Custom dropdown content (alternative to items) |
|
||||
|
||||
### MenuItem Structure (when using `items`)
|
||||
|
||||
| Property | Type | Description |
|
||||
| :---------- | :--------------------------- | :----------------------------------------------- |
|
||||
| `label` | `string \| VNode` | Menu item text |
|
||||
| `icon` | `string \| VNode` | Optional icon for the menu item |
|
||||
| `onclick` | `function` | Click handler |
|
||||
| `class` | `string` | Additional CSS classes for the menu item |
|
||||
| Property | Type | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| `label` | `string \| VNode` | Menu item text |
|
||||
| `icon` | `string \| VNode` | Optional icon for the menu item |
|
||||
| `onclick` | `function` | Click handler |
|
||||
| `class` | `string` | Additional CSS classes for the menu item |
|
||||
|
||||
## Styling
|
||||
|
||||
Dropdown supports all **daisyUI Dropdown classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Position | `dropdown-end` | Align dropdown to the right |
|
||||
| Direction | `dropdown-top`, `dropdown-bottom`, `dropdown-left`, `dropdown-right` | Dropdown open direction |
|
||||
| Hover | `dropdown-hover` | Open on hover instead of click |
|
||||
|
||||
> For further details, check the [daisyUI Dropdown Documentation](https://daisyui.com/components/dropdown) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Dropdown({
|
||||
label: "Menu",
|
||||
class: "dropdown-end dropdown-hover",
|
||||
items: menuItems
|
||||
});
|
||||
// Applies: right-aligned, opens on hover
|
||||
```
|
||||
|
||||
## Live Examples
|
||||
|
||||
@@ -276,214 +299,4 @@ const VariantsDemo = () => {
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initDropdownExamples = () => {
|
||||
|
||||
// 1. Basic Dropdown (Items Array)
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Dropdown({
|
||||
label: 'Options',
|
||||
items: [
|
||||
{ label: 'Profile', onclick: () => Toast('Profile clicked', 'alert-info', 2000) },
|
||||
{ label: 'Settings', onclick: () => Toast('Settings clicked', 'alert-info', 2000) },
|
||||
{ label: 'Logout', onclick: () => Toast('Logged out', 'alert-warning', 2000), class: 'text-error' }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Icons (Items Array)
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
return Dropdown({
|
||||
label: 'Menu',
|
||||
icon: '☰',
|
||||
items: [
|
||||
{ icon: '👤', label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) },
|
||||
{ icon: '⭐', label: 'Favorites', onclick: () => Toast('Favorites', 'alert-info', 2000) },
|
||||
{ icon: '📁', label: 'Documents', onclick: () => Toast('Documents', 'alert-info', 2000) },
|
||||
{ icon: '⚙️', label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 3. Action Dropdown (Items Array)
|
||||
const actionsTarget = document.querySelector('#demo-actions');
|
||||
if (actionsTarget && !actionsTarget.hasChildNodes()) {
|
||||
const ActionsDemo = () => {
|
||||
const handleAction = (action) => {
|
||||
Toast(`${action} action`, 'alert-info', 2000);
|
||||
};
|
||||
|
||||
return Dropdown({
|
||||
label: 'Actions',
|
||||
class: 'dropdown-end',
|
||||
items: [
|
||||
{ icon: '✏️', label: 'Edit', onclick: () => handleAction('Edit') },
|
||||
{ icon: '📋', label: 'Copy', onclick: () => handleAction('Copy') },
|
||||
{ icon: '🗑️', label: 'Delete', onclick: () => handleAction('Delete'), class: 'text-error' }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(ActionsDemo, actionsTarget);
|
||||
}
|
||||
|
||||
// 4. User Dropdown (Items Array)
|
||||
const userTarget = document.querySelector('#demo-user');
|
||||
if (userTarget && !userTarget.hasChildNodes()) {
|
||||
const UserDropdown = () => {
|
||||
return Dropdown({
|
||||
label: Span({ class: 'flex items-center gap-2' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-primary text-primary-content rounded-full w-8 h-8 flex items-center justify-center text-sm' }, 'JD')
|
||||
]),
|
||||
'John Doe'
|
||||
]),
|
||||
class: 'dropdown-end',
|
||||
items: [
|
||||
{ label: 'Profile', onclick: () => Toast('Profile', 'alert-info', 2000) },
|
||||
{ label: 'Settings', onclick: () => Toast('Settings', 'alert-info', 2000) },
|
||||
{ label: 'Sign Out', onclick: () => Toast('Signed out', 'alert-warning', 2000), class: 'text-error' }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(UserDropdown, userTarget);
|
||||
}
|
||||
|
||||
// 5. Reactive Items
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDropdown = () => {
|
||||
const count = $(0);
|
||||
|
||||
const items = () => [
|
||||
{ label: `Count: ${count()}`, onclick: () => {} },
|
||||
{ label: 'Increment', onclick: () => count(count() + 1) },
|
||||
{ label: 'Decrement', onclick: () => count(count() - 1) },
|
||||
{ label: 'Reset', onclick: () => count(0) }
|
||||
];
|
||||
|
||||
return Dropdown({
|
||||
label: () => `Counter (${count()})`,
|
||||
items: items
|
||||
});
|
||||
};
|
||||
$mount(ReactiveDropdown, reactiveTarget);
|
||||
}
|
||||
|
||||
// 6. Notification Dropdown (Custom Children)
|
||||
const notifTarget = document.querySelector('#demo-notifications');
|
||||
if (notifTarget && !notifTarget.hasChildNodes()) {
|
||||
const NotificationsDropdown = () => {
|
||||
const notifications = $([
|
||||
{ id: 1, title: 'New message', time: '5 min ago', read: false },
|
||||
{ id: 2, title: 'Update available', time: '1 hour ago', read: false },
|
||||
{ id: 3, title: 'Task completed', time: '2 hours ago', read: true }
|
||||
]);
|
||||
|
||||
const markAsRead = (id) => {
|
||||
notifications(notifications().map(n =>
|
||||
n.id === id ? { ...n, read: true } : n
|
||||
));
|
||||
};
|
||||
|
||||
const unreadCount = () => notifications().filter(n => !n.read).length;
|
||||
|
||||
return Dropdown({
|
||||
label: Span({ class: 'relative' }, [
|
||||
'🔔',
|
||||
() => unreadCount() > 0 ? Span({ class: 'badge badge-xs badge-error absolute -top-1 -right-2' }, unreadCount()) : null
|
||||
]),
|
||||
class: 'dropdown-end',
|
||||
children: () => Div({ class: 'w-80' }, [
|
||||
Div({ class: 'p-3 border-b border-base-300 font-bold' }, `Notifications (${unreadCount()} unread)`),
|
||||
Div({ class: 'max-h-64 overflow-y-auto' }, notifications().map(notif =>
|
||||
Div({
|
||||
class: `p-3 border-b border-base-300 cursor-pointer hover:bg-base-200 ${!notif.read ? 'bg-primary/5' : ''}`,
|
||||
onclick: () => markAsRead(notif.id)
|
||||
}, [
|
||||
Div({ class: 'font-medium' }, notif.title),
|
||||
Div({ class: 'text-xs opacity-60' }, notif.time),
|
||||
!notif.read && Span({ class: 'badge badge-xs badge-primary mt-1' }, 'New')
|
||||
])
|
||||
)),
|
||||
Div({ class: 'p-2 text-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-xs btn-ghost w-full',
|
||||
onclick: () => notifications([])
|
||||
}, 'Clear all')
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(NotificationsDropdown, notifTarget);
|
||||
}
|
||||
|
||||
// 7. Custom Content Dropdown
|
||||
const customTarget = document.querySelector('#demo-custom');
|
||||
if (customTarget && !customTarget.hasChildNodes()) {
|
||||
const CustomDropdown = () => {
|
||||
const selected = $('Option 1');
|
||||
|
||||
return Dropdown({
|
||||
label: () => selected(),
|
||||
children: () => Div({ class: 'p-4 min-w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Select an option'),
|
||||
Div({ class: 'flex flex-col gap-1' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm justify-start',
|
||||
onclick: () => selected('Option 1')
|
||||
}, 'Option 1'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm justify-start',
|
||||
onclick: () => selected('Option 2')
|
||||
}, 'Option 2'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm justify-start',
|
||||
onclick: () => selected('Option 3')
|
||||
}, 'Option 3')
|
||||
])
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(CustomDropdown, customTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const commonItems = [
|
||||
{ label: 'Item 1', onclick: () => Toast('Item 1', 'alert-info', 2000) },
|
||||
{ label: 'Item 2', onclick: () => Toast('Item 2', 'alert-info', 2000) },
|
||||
{ label: 'Item 3', onclick: () => Toast('Item 3', 'alert-info', 2000) }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Dropdown({ label: 'Default', items: commonItems }),
|
||||
Dropdown({ label: 'With Icon', icon: '☰', items: commonItems }),
|
||||
Dropdown({ label: 'End Position', class: 'dropdown-end', items: commonItems })
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initDropdownExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initDropdownExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
@@ -29,13 +29,13 @@ Indicator component for adding badges, status markers, or notifications to eleme
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Indicator({ badge: '3', badgeClass: 'badge-primary' }, [
|
||||
Indicator({ value: '3', ui: 'badge-primary' }, [
|
||||
Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '📦')
|
||||
]),
|
||||
Indicator({ badge: '99+', badgeClass: 'badge-secondary' }, [
|
||||
Indicator({ value: '99+', ui: 'badge-secondary' }, [
|
||||
Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
|
||||
]),
|
||||
Indicator({ badge: 'New', badgeClass: 'badge-accent' }, [
|
||||
Indicator({ value: 'New', ui: 'badge-accent' }, [
|
||||
Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '✨')
|
||||
])
|
||||
]);
|
||||
@@ -55,17 +55,17 @@ $mount(BasicDemo, '#demo-basic');
|
||||
```javascript
|
||||
const StatusDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
|
||||
Indicator({ value: '●', ui: 'badge-success badge-xs' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JD')
|
||||
])
|
||||
]),
|
||||
Indicator({ badge: '●', badgeClass: 'badge-warning badge-xs' }, [
|
||||
Indicator({ value: '●', ui: 'badge-warning badge-xs' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'JS')
|
||||
])
|
||||
]),
|
||||
Indicator({ badge: '●', badgeClass: 'badge-error badge-xs' }, [
|
||||
Indicator({ value: '●', ui: 'badge-error badge-xs' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'BC')
|
||||
])
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -140,8 +140,7 @@ const CustomDemo = () => {
|
||||
Input({
|
||||
type: 'number',
|
||||
value: count,
|
||||
class: 'input input-sm w-24',
|
||||
oninput: (e) => count(parseInt(e.target.value) || 1)
|
||||
class: 'input input-sm w-24'
|
||||
})
|
||||
]),
|
||||
Rating({
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Select
|
||||
|
||||
Dropdown select component with full DaisyUI styling, reactive options, and form integration.
|
||||
Dropdown select component with full DaisyUI styling, reactive items, and form integration.
|
||||
|
||||
## Tag
|
||||
|
||||
@@ -11,7 +11,7 @@ Dropdown select component with full DaisyUI styling, reactive options, and form
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :------------------ | :----------------------------------------------- |
|
||||
| `label` | `string` | `-` | Label text above select |
|
||||
| `options` | `Array<{value: string, label: string}>` | `[]` | Array of options with value and label |
|
||||
| `items` | `Array<{value: string, label: string}>` | `[]` | Array of items with value and label |
|
||||
| `value` | `string \| Signal<string>` | `''` | Selected value |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||
@@ -34,7 +34,7 @@ const BasicDemo = () => {
|
||||
|
||||
return Select({
|
||||
label: 'Choose a fruit',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'apple', label: '🍎 Apple' },
|
||||
{ value: 'banana', label: '🍌 Banana' },
|
||||
{ value: 'orange', label: '🍊 Orange' },
|
||||
@@ -59,11 +59,10 @@ $mount(BasicDemo, '#demo-basic');
|
||||
```javascript
|
||||
const ReactiveDemo = () => {
|
||||
const selected = $('small');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Select({
|
||||
label: 'Select size',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'small', label: 'Small' },
|
||||
{ value: 'medium', label: 'Medium' },
|
||||
{ value: 'large', label: 'Large' }
|
||||
@@ -72,7 +71,7 @@ const ReactiveDemo = () => {
|
||||
onchange: (e) => selected(e.target.value)
|
||||
}),
|
||||
Div({ class: 'alert alert-info' }, [
|
||||
`You selected: ${selected()}`
|
||||
() => `You selected: ${selected()}`
|
||||
])
|
||||
]);
|
||||
};
|
||||
@@ -92,7 +91,7 @@ $mount(ReactiveDemo, '#demo-reactive');
|
||||
const DisabledDemo = () => {
|
||||
return Select({
|
||||
label: 'Country (disabled)',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'mx', label: 'Mexico' },
|
||||
{ value: 'us', label: 'United States' },
|
||||
{ value: 'ca', label: 'Canada' }
|
||||
@@ -104,7 +103,7 @@ const DisabledDemo = () => {
|
||||
$mount(DisabledDemo, '#demo-disabled');
|
||||
```
|
||||
|
||||
### Dynamic Options
|
||||
### Dynamic items
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
@@ -117,7 +116,7 @@ $mount(DisabledDemo, '#demo-disabled');
|
||||
const DynamicDemo = () => {
|
||||
const category = $('fruits');
|
||||
|
||||
const options = {
|
||||
const items = {
|
||||
fruits: [
|
||||
{ value: 'apple', label: '🍎 Apple' },
|
||||
{ value: 'banana', label: '🍌 Banana' }
|
||||
@@ -131,7 +130,7 @@ const DynamicDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Select({
|
||||
label: 'Category',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'fruits', label: 'Fruits' },
|
||||
{ value: 'vegetables', label: 'Vegetables' }
|
||||
],
|
||||
@@ -140,7 +139,7 @@ const DynamicDemo = () => {
|
||||
}),
|
||||
Select({
|
||||
label: 'Item',
|
||||
options: () => options[category()] || [],
|
||||
items: () => items[category()] || [],
|
||||
value: $(''),
|
||||
onchange: (e) => console.log('Selected:', e.target.value)
|
||||
})
|
||||
@@ -168,7 +167,7 @@ const VariantsDemo = () => {
|
||||
Select({
|
||||
label: 'Primary Select',
|
||||
class: 'select-primary',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'option1', label: 'Option 1' },
|
||||
{ value: 'option2', label: 'Option 2' },
|
||||
{ value: 'option3', label: 'Option 3' }
|
||||
@@ -179,7 +178,7 @@ const VariantsDemo = () => {
|
||||
Select({
|
||||
label: 'Secondary Select',
|
||||
class: 'select-secondary',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'option1', label: 'Option 1' },
|
||||
{ value: 'option2', label: 'Option 2' }
|
||||
],
|
||||
@@ -189,7 +188,7 @@ const VariantsDemo = () => {
|
||||
Select({
|
||||
label: 'Ghost Select',
|
||||
class: 'select-ghost',
|
||||
options: [
|
||||
items: [
|
||||
{ value: '', label: 'Select an option' },
|
||||
{ value: 'opt1', label: 'Option 1' },
|
||||
{ value: 'opt2', label: 'Option 2' }
|
||||
@@ -214,7 +213,7 @@ $mount(VariantsDemo, '#demo-variants');
|
||||
|
||||
return Select({
|
||||
label: 'Choose a fruit',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'apple', label: '🍎 Apple' },
|
||||
{ value: 'banana', label: '🍌 Banana' },
|
||||
{ value: 'orange', label: '🍊 Orange' },
|
||||
@@ -236,7 +235,7 @@ $mount(VariantsDemo, '#demo-variants');
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Select({
|
||||
label: 'Select size',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'small', label: 'Small' },
|
||||
{ value: 'medium', label: 'Medium' },
|
||||
{ value: 'large', label: 'Large' }
|
||||
@@ -258,7 +257,7 @@ $mount(VariantsDemo, '#demo-variants');
|
||||
const DisabledDemo = () => {
|
||||
return Select({
|
||||
label: 'Country (disabled)',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'mx', label: 'Mexico' },
|
||||
{ value: 'us', label: 'United States' },
|
||||
{ value: 'ca', label: 'Canada' }
|
||||
@@ -270,13 +269,13 @@ $mount(VariantsDemo, '#demo-variants');
|
||||
$mount(DisabledDemo, disabledTarget);
|
||||
}
|
||||
|
||||
// 4. Dynamic Options
|
||||
// 4. Dynamic items
|
||||
const dynamicTarget = document.querySelector('#demo-dynamic');
|
||||
if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
|
||||
const DynamicDemo = () => {
|
||||
const category = $('fruits');
|
||||
|
||||
const options = {
|
||||
const items = {
|
||||
fruits: [
|
||||
{ value: 'apple', label: '🍎 Apple' },
|
||||
{ value: 'banana', label: '🍌 Banana' }
|
||||
@@ -290,7 +289,7 @@ $mount(VariantsDemo, '#demo-variants');
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Select({
|
||||
label: 'Category',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'fruits', label: 'Fruits' },
|
||||
{ value: 'vegetables', label: 'Vegetables' }
|
||||
],
|
||||
@@ -299,7 +298,7 @@ $mount(VariantsDemo, '#demo-variants');
|
||||
}),
|
||||
Select({
|
||||
label: 'Item',
|
||||
options: () => options[category()] || [],
|
||||
items: () => items[category()] || [],
|
||||
value: $(''),
|
||||
onchange: (e) => console.log('Selected:', e.target.value)
|
||||
})
|
||||
@@ -320,7 +319,7 @@ $mount(VariantsDemo, '#demo-variants');
|
||||
Select({
|
||||
label: 'Primary Select',
|
||||
class: 'select-primary',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'option1', label: 'Option 1' },
|
||||
{ value: 'option2', label: 'Option 2' },
|
||||
{ value: 'option3', label: 'Option 3' }
|
||||
@@ -331,7 +330,7 @@ $mount(VariantsDemo, '#demo-variants');
|
||||
Select({
|
||||
label: 'Secondary Select',
|
||||
class: 'select-secondary',
|
||||
options: [
|
||||
items: [
|
||||
{ value: 'option1', label: 'Option 1' },
|
||||
{ value: 'option2', label: 'Option 2' }
|
||||
],
|
||||
@@ -341,7 +340,7 @@ $mount(VariantsDemo, '#demo-variants');
|
||||
Select({
|
||||
label: 'Ghost Select',
|
||||
class: 'select-ghost',
|
||||
options: [
|
||||
items: [
|
||||
{ value: '', label: 'Select an option' },
|
||||
{ value: 'opt1', label: 'Option 1' },
|
||||
{ value: 'opt2', label: 'Option 2' }
|
||||
|
||||
Reference in New Issue
Block a user