Updateing Docs
This commit is contained in:
730
docs/components_old/accordion.md
Normal file
730
docs/components_old/accordion.md
Normal file
@@ -0,0 +1,730 @@
|
||||
# Accordion
|
||||
|
||||
Collapsible accordion component for organizing content into expandable sections with DaisyUI styling.
|
||||
|
||||
## Tag
|
||||
|
||||
`Accordion`
|
||||
|
||||
## 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 |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Accordion
|
||||
|
||||
<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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-basic');
|
||||
```
|
||||
|
||||
### Group Accordion (Radio Style)
|
||||
|
||||
<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-group" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-group');
|
||||
```
|
||||
|
||||
### FAQ Accordion
|
||||
|
||||
<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-faq" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-faq');
|
||||
```
|
||||
|
||||
### With Rich Content
|
||||
|
||||
<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-rich" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-rich');
|
||||
```
|
||||
|
||||
### Form Accordion
|
||||
|
||||
<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-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-form');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#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>
|
||||
521
docs/components_old/alert.md
Normal file
521
docs/components_old/alert.md
Normal file
@@ -0,0 +1,521 @@
|
||||
# Alert
|
||||
|
||||
Alert component for displaying contextual messages, notifications, and feedback with different severity levels. Supports soft and solid variants.
|
||||
|
||||
## Tag
|
||||
|
||||
`Alert`
|
||||
|
||||
## 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`) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Alerts
|
||||
|
||||
<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 flex-col gap-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-basic');
|
||||
```
|
||||
|
||||
### Soft vs Solid Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-variants');
|
||||
```
|
||||
|
||||
### With Actions
|
||||
|
||||
<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-actions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-actions');
|
||||
```
|
||||
|
||||
### Dismissible Alert
|
||||
|
||||
<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-dismissible" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-dismissible');
|
||||
```
|
||||
|
||||
### Reactive Alert
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Form Validation
|
||||
|
||||
<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-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-form');
|
||||
```
|
||||
|
||||
### Icon Alerts
|
||||
|
||||
<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-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-icons');
|
||||
```
|
||||
|
||||
### All Types
|
||||
|
||||
<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-all" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#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>
|
||||
376
docs/components_old/autocomplete.md
Normal file
376
docs/components_old/autocomplete.md
Normal file
@@ -0,0 +1,376 @@
|
||||
# Autocomplete
|
||||
|
||||
Searchable dropdown with autocomplete functionality, keyboard navigation, and reactive options.
|
||||
|
||||
## Tag
|
||||
|
||||
`Autocomplete`
|
||||
|
||||
## 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) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Autocomplete
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const 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, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Objects
|
||||
|
||||
<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-objects" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-objects');
|
||||
```
|
||||
|
||||
### With Reactive Display
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Dynamic Options
|
||||
|
||||
<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-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-dynamic');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const 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, '#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>
|
||||
537
docs/components_old/badge.md
Normal file
537
docs/components_old/badge.md
Normal file
@@ -0,0 +1,537 @@
|
||||
# Badge
|
||||
|
||||
Badge component for displaying counts, labels, and status indicators with DaisyUI styling.
|
||||
|
||||
## Tag
|
||||
|
||||
`Badge`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI badge variants) |
|
||||
| `children` | `string \| VNode` | `-` | Badge content |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic 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-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-basic');
|
||||
```
|
||||
|
||||
### Badge Sizes
|
||||
|
||||
<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-sizes" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-sizes');
|
||||
```
|
||||
|
||||
### Outline Badges
|
||||
|
||||
<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-outline" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-outline');
|
||||
```
|
||||
|
||||
### Ghost Badges
|
||||
|
||||
<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-ghost" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-ghost');
|
||||
```
|
||||
|
||||
### With Icons
|
||||
|
||||
<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-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-2' }, [
|
||||
Badge({ class: 'gap-1' }, [
|
||||
Icons.iconSuccess,
|
||||
Span({}, 'Success')
|
||||
]),
|
||||
Badge({ class: 'gap-1 badge-warning' }, [
|
||||
Icons.iconWarning,
|
||||
Span({}, 'Warning')
|
||||
]),
|
||||
Badge({ class: 'gap-1 badge-error' }, [
|
||||
Icons.iconError,
|
||||
Span({}, 'Error')
|
||||
]),
|
||||
Badge({ class: 'gap-1 badge-info' }, [
|
||||
Icons.iconInfo,
|
||||
Span({}, 'Info')
|
||||
]),
|
||||
Badge({ class: 'gap-1' }, [
|
||||
Span({}, '★'),
|
||||
Span({}, '4.5')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(IconsDemo, '#demo-icons');
|
||||
```
|
||||
|
||||
### Status Badges
|
||||
|
||||
<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-status" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-status');
|
||||
```
|
||||
|
||||
### Count Badges
|
||||
|
||||
<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-count" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-count');
|
||||
```
|
||||
|
||||
### Interactive 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-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-interactive');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
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, '#demo-variants');
|
||||
```
|
||||
|
||||
### Inline with Text
|
||||
|
||||
<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-inline" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#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>
|
||||
248
docs/components_old/button copy.md
Normal file
248
docs/components_old/button copy.md
Normal file
@@ -0,0 +1,248 @@
|
||||
# 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>
|
||||
168
docs/components_old/button.md
Normal file
168
docs/components_old/button.md
Normal file
@@ -0,0 +1,168 @@
|
||||
> # Button(props, children?: string | Signal | [...]): HTMLElement
|
||||
|
||||
---
|
||||
|
||||
## 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 |
|
||||
|
||||
## Class Options
|
||||
|
||||
For more detailed information about the underlying styling system, visit the daisyUI documentation:
|
||||
|
||||
- [daisyUI Button](https://daisyui.com/components/button)
|
||||
|
||||
| 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 |
|
||||
|
||||
### Basic Button
|
||||
|
||||
<div id="demo-basic" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Button({ class: "btn-primary" }, "Click Me");
|
||||
};
|
||||
$mount(BasicDemo, "#demo-basic");
|
||||
```
|
||||
|
||||
### With Loading State
|
||||
|
||||
<div id="demo-loading" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
|
||||
```javascript
|
||||
const LoadingDemo = () => {
|
||||
const isSaving = $(false);
|
||||
|
||||
return Button(
|
||||
{
|
||||
class: "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 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",
|
||||
);
|
||||
};
|
||||
$mount(BadgeDemo, "#demo-badge");
|
||||
```
|
||||
|
||||
### With Tooltip
|
||||
|
||||
<div id="demo-tooltip" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
|
||||
```javascript
|
||||
const TooltipDemo = () => {
|
||||
return Button(
|
||||
{
|
||||
class: "btn-ghost",
|
||||
tooltip: "Delete item",
|
||||
},
|
||||
"Delete",
|
||||
);
|
||||
};
|
||||
$mount(TooltipDemo, "#demo-tooltip");
|
||||
```
|
||||
|
||||
### Disabled State
|
||||
|
||||
<div id="demo-disabled" 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",
|
||||
);
|
||||
};
|
||||
$mount(DisabledDemo, "#demo-disabled");
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div id="demo-variants" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
|
||||
Button({ class: "btn-primary" }, "Primary"),
|
||||
Button({ class: "btn-secondary" }, "Secondary"),
|
||||
Button({ class: "btn-accent" }, "Accent"),
|
||||
Button({ class: "btn-ghost" }, "Ghost"),
|
||||
Button({ class: "btn-outline" }, "Outline"),
|
||||
]);
|
||||
};
|
||||
$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");
|
||||
```
|
||||
479
docs/components_old/checkbox.md
Normal file
479
docs/components_old/checkbox.md
Normal file
@@ -0,0 +1,479 @@
|
||||
# Checkbox
|
||||
|
||||
Toggle checkbox component with label, tooltip support, and reactive state management.
|
||||
|
||||
## Tag
|
||||
|
||||
`Checkbox`
|
||||
|
||||
## 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 |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Checkbox
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const accepted = $(false);
|
||||
|
||||
return Checkbox({
|
||||
label: 'I accept the terms and conditions',
|
||||
value: accepted,
|
||||
onclick: () => accepted(!accepted())
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Toggle Switch
|
||||
|
||||
<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-toggle" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-toggle');
|
||||
```
|
||||
|
||||
### With Tooltip
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const TooltipDemo = () => {
|
||||
const darkMode = $(false);
|
||||
|
||||
return Checkbox({
|
||||
label: 'Dark mode',
|
||||
value: darkMode,
|
||||
tooltip: 'Enable dark theme preference',
|
||||
onclick: () => darkMode(!darkMode())
|
||||
});
|
||||
};
|
||||
$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 flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-disabled');
|
||||
```
|
||||
|
||||
### Reactive Multiple Selection
|
||||
|
||||
<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-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-multiple');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const 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, '#demo-variants');
|
||||
```
|
||||
|
||||
### Form Example
|
||||
|
||||
<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-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#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>
|
||||
382
docs/components_old/colorpicker.md
Normal file
382
docs/components_old/colorpicker.md
Normal file
@@ -0,0 +1,382 @@
|
||||
# Colorpicker
|
||||
|
||||
Color picker component with preset color palette, reactive value binding, and customizable appearance.
|
||||
|
||||
## Tag
|
||||
|
||||
`Colorpicker`
|
||||
|
||||
## 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) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Colorpicker
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const color = $('#3b82f6');
|
||||
|
||||
return Colorpicker({
|
||||
label: 'Pick a color',
|
||||
value: color
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Reactive Preview
|
||||
|
||||
<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-preview" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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',
|
||||
style: () => `background-color: ${color()}`
|
||||
}, [
|
||||
Div({ class: 'text-center leading-20 pt-6 opacity-70' }, () => color())
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PreviewDemo, '#demo-preview');
|
||||
```
|
||||
|
||||
### Color Palette Grid
|
||||
|
||||
<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-palette" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-palette');
|
||||
```
|
||||
|
||||
### With Text Color Preview
|
||||
|
||||
<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-text" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-text');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-variants');
|
||||
```
|
||||
|
||||
### Dynamic Color Swatch
|
||||
|
||||
<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-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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',
|
||||
style: () => `background-color: ${primary()}; color: white`
|
||||
}, 'Primary'),
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
|
||||
style: () => `background-color: ${secondary()}; color: white`
|
||||
}, 'Secondary'),
|
||||
Div({
|
||||
class: 'h-12 rounded-lg shadow-sm flex items-center justify-center text-xs font-bold',
|
||||
style: () => `background-color: ${accent()}; color: white`
|
||||
}, '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>
|
||||
339
docs/components_old/datepicker.md
Normal file
339
docs/components_old/datepicker.md
Normal file
@@ -0,0 +1,339 @@
|
||||
# Datepicker
|
||||
|
||||
Date and date range picker component with calendar interface, time selection, and reactive state management.
|
||||
|
||||
## Tag
|
||||
|
||||
`Datepicker`
|
||||
|
||||
## 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) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Datepicker
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const date = $('');
|
||||
|
||||
return Datepicker({
|
||||
label: 'Select date',
|
||||
value: date,
|
||||
placeholder: 'Choose a date...'
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Date Range Picker
|
||||
|
||||
<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-range" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-range');
|
||||
```
|
||||
|
||||
### With Time Selection
|
||||
|
||||
<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-time" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-time');
|
||||
```
|
||||
|
||||
### Range with Time
|
||||
|
||||
<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-range-time" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-range-time');
|
||||
```
|
||||
|
||||
### Reactive Display
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-reactive');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
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, '#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>
|
||||
918
docs/components_old/drawer.md
Normal file
918
docs/components_old/drawer.md
Normal file
@@ -0,0 +1,918 @@
|
||||
# Drawer
|
||||
|
||||
Drawer component for creating off-canvas side panels with overlay and toggle functionality.
|
||||
|
||||
## Tag
|
||||
|
||||
`Drawer`
|
||||
|
||||
## 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) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Drawer
|
||||
|
||||
<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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-basic');
|
||||
```
|
||||
|
||||
### Navigation Drawer
|
||||
|
||||
<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-nav" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-nav');
|
||||
```
|
||||
|
||||
### Settings Drawer
|
||||
|
||||
<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-settings" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-settings');
|
||||
```
|
||||
|
||||
### Cart Drawer
|
||||
|
||||
<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-cart" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-cart');
|
||||
```
|
||||
|
||||
### Responsive Drawer
|
||||
|
||||
<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-responsive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-responsive');
|
||||
```
|
||||
|
||||
### Form Drawer
|
||||
|
||||
<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-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#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>
|
||||
489
docs/components_old/dropdown.md
Normal file
489
docs/components_old/dropdown.md
Normal file
@@ -0,0 +1,489 @@
|
||||
# Dropdown
|
||||
|
||||
Dropdown component for creating menus, selectors, and action panels that appear when triggered. Supports both array-based items and custom content.
|
||||
|
||||
## Tag
|
||||
|
||||
`Dropdown`
|
||||
|
||||
## 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) |
|
||||
|
||||
### 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 |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Dropdown (Items Array)
|
||||
|
||||
<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 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, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Icons (Items Array)
|
||||
|
||||
<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-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-icons');
|
||||
```
|
||||
|
||||
### Action Dropdown (Items Array)
|
||||
|
||||
<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-actions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-actions');
|
||||
```
|
||||
|
||||
### User Dropdown (Items Array)
|
||||
|
||||
<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-user" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-user');
|
||||
```
|
||||
|
||||
### Reactive Items
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Notification Dropdown (Custom Children)
|
||||
|
||||
<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-notifications" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-notifications');
|
||||
```
|
||||
|
||||
### Custom Content Dropdown
|
||||
|
||||
<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-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#demo-custom');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
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, '#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>
|
||||
688
docs/components_old/fab.md
Normal file
688
docs/components_old/fab.md
Normal file
@@ -0,0 +1,688 @@
|
||||
# Fab
|
||||
|
||||
Floating Action Button (FAB) component for primary actions with expandable menu options. Each example uses a container with `position: relative` and explicit height to position the FAB correctly.
|
||||
|
||||
## Tag
|
||||
|
||||
`Fab`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :--------------- | :----------------------------------------------- |
|
||||
| `icon` | `string \| VNode \| Signal` | `-` | Main FAB icon |
|
||||
| `label` | `string \| VNode \| Signal` | `-` | Text label for main button |
|
||||
| `actions` | `Array<Action> \| Signal<Array>` | `[]` | Array of action buttons that expand from FAB |
|
||||
| `position` | `string` | `'bottom-6 right-6'` | CSS position classes (e.g., 'bottom-6 left-6') |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
### Action Structure
|
||||
|
||||
| Property | Type | Description |
|
||||
| :---------- | :--------------------------- | :----------------------------------------------- |
|
||||
| `label` | `string \| VNode` | Label text shown next to action button |
|
||||
| `icon` | `string \| VNode` | Icon for the action button |
|
||||
| `onclick` | `function` | Click handler |
|
||||
| `class` | `string` | Additional CSS classes for the action button |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic FAB
|
||||
|
||||
<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 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Fab({
|
||||
icon: '➕',
|
||||
actions: [
|
||||
{ icon: '📝', label: 'New Note', onclick: () => Toast('Create note', 'alert-info', 2000) },
|
||||
{ icon: '📷', label: 'Take Photo', onclick: () => Toast('Open camera', 'alert-info', 2000) },
|
||||
{ icon: '📎', label: 'Attach File', onclick: () => Toast('Attach file', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Label
|
||||
|
||||
<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-label" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const LabelDemo = () => {
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Fab({
|
||||
label: 'Create',
|
||||
icon: '✨',
|
||||
actions: [
|
||||
{ icon: '📝', label: 'Document', onclick: () => Toast('New document', 'alert-success', 2000) },
|
||||
{ icon: '🎨', label: 'Design', onclick: () => Toast('New design', 'alert-success', 2000) },
|
||||
{ icon: '📊', label: 'Spreadsheet', onclick: () => Toast('New spreadsheet', 'alert-success', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(LabelDemo, '#demo-label');
|
||||
```
|
||||
|
||||
### Different Positions
|
||||
|
||||
<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-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[500px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PositionsDemo = () => {
|
||||
const position = $('bottom-6 right-6');
|
||||
|
||||
return Div({ class: 'relative h-[500px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
|
||||
Select({
|
||||
value: position,
|
||||
options: [
|
||||
{ value: 'bottom-6 right-6', label: 'Bottom Right' },
|
||||
{ value: 'bottom-6 left-6', label: 'Bottom Left' },
|
||||
{ value: 'top-6 right-6', label: 'Top Right' },
|
||||
{ value: 'top-6 left-6', label: 'Top Left' }
|
||||
],
|
||||
onchange: (e) => position(e.target.value)
|
||||
})
|
||||
]),
|
||||
Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50 pointer-events-none' }, [
|
||||
'FAB position changes relative to this container'
|
||||
]),
|
||||
Fab({
|
||||
position: () => position(),
|
||||
icon: '🧭',
|
||||
actions: [
|
||||
{ icon: '⬅️', label: 'Bottom Left', onclick: () => position('bottom-6 left-6') },
|
||||
{ icon: '➡️', label: 'Bottom Right', onclick: () => position('bottom-6 right-6') },
|
||||
{ icon: '⬆️', label: 'Top Right', onclick: () => position('top-6 right-6') },
|
||||
{ icon: '⬇️', label: 'Top Left', onclick: () => position('top-6 left-6') }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(PositionsDemo, '#demo-positions');
|
||||
```
|
||||
|
||||
### Color 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-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ColorsDemo = () => {
|
||||
const variant = $('primary');
|
||||
|
||||
const variants = {
|
||||
primary: { class: 'btn-primary', icon: '🔵' },
|
||||
secondary: { class: 'btn-secondary', icon: '🟣' },
|
||||
accent: { class: 'btn-accent', icon: '🔴' },
|
||||
info: { class: 'btn-info', icon: '🔷' },
|
||||
success: { class: 'btn-success', icon: '🟢' },
|
||||
warning: { class: 'btn-warning', icon: '🟡' },
|
||||
error: { class: 'btn-error', icon: '🔴' }
|
||||
};
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
|
||||
Select({
|
||||
value: variant,
|
||||
options: Object.keys(variants).map(v => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) })),
|
||||
onchange: (e) => variant(e.target.value)
|
||||
})
|
||||
]),
|
||||
Fab({
|
||||
class: variants[variant()].class,
|
||||
icon: variants[variant()].icon,
|
||||
actions: [
|
||||
{ icon: '📝', label: 'Action 1', onclick: () => Toast('Action 1', 'alert-info', 2000) },
|
||||
{ icon: '🎨', label: 'Action 2', onclick: () => Toast('Action 2', 'alert-info', 2000) },
|
||||
{ icon: '⚙️', label: 'Action 3', onclick: () => Toast('Action 3', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(ColorsDemo, '#demo-colors');
|
||||
```
|
||||
|
||||
### Reactive Actions
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveActions = () => {
|
||||
const count = $(0);
|
||||
|
||||
const actions = () => [
|
||||
{
|
||||
icon: '🔢',
|
||||
label: `Count: ${count()}`,
|
||||
onclick: () => {}
|
||||
},
|
||||
{
|
||||
icon: '➕',
|
||||
label: 'Increment',
|
||||
onclick: () => count(count() + 1)
|
||||
},
|
||||
{
|
||||
icon: '➖',
|
||||
label: 'Decrement',
|
||||
onclick: () => count(count() - 1)
|
||||
},
|
||||
{
|
||||
icon: '🔄',
|
||||
label: 'Reset',
|
||||
onclick: () => count(0)
|
||||
}
|
||||
];
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Fab({
|
||||
icon: () => count() > 0 ? `🔢 ${count()}` : '🎛️',
|
||||
actions: actions
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveActions, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Document Actions
|
||||
|
||||
<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-document" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DocumentActions = () => {
|
||||
const saved = $(false);
|
||||
|
||||
const handleSave = () => {
|
||||
saved(true);
|
||||
Toast('Document saved!', 'alert-success', 2000);
|
||||
setTimeout(() => saved(false), 3000);
|
||||
};
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
|
||||
Div({ class: 'text-6xl mb-4' }, '📄'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Untitled Document'),
|
||||
() => saved() ? Div({ class: 'mt-4' }, Alert({ type: 'success', message: '✓ Saved successfully' })) : null
|
||||
]),
|
||||
Fab({
|
||||
icon: '✏️',
|
||||
actions: [
|
||||
{ icon: '💾', label: 'Save', onclick: handleSave },
|
||||
{ icon: '📋', label: 'Copy', onclick: () => Toast('Copied!', 'alert-info', 2000) },
|
||||
{ icon: '✂️', label: 'Cut', onclick: () => Toast('Cut!', 'alert-info', 2000) },
|
||||
{ icon: '📎', label: 'Share', onclick: () => Toast('Share dialog', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(DocumentActions, '#demo-document');
|
||||
```
|
||||
|
||||
### Messaging FAB
|
||||
|
||||
<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-messaging" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const MessagingFAB = () => {
|
||||
const unread = $(3);
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
|
||||
Div({ class: 'text-6xl mb-4' }, '💬'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Messages'),
|
||||
() => unread() > 0 ? Div({ class: 'badge badge-error mt-2' }, `${unread()} unread`) : null
|
||||
]),
|
||||
Fab({
|
||||
icon: () => `💬${unread() > 0 ? ` ${unread()}` : ''}`,
|
||||
class: 'btn-primary',
|
||||
actions: [
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'New Message',
|
||||
onclick: () => Toast('Start new conversation', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
label: 'Group Chat',
|
||||
onclick: () => Toast('Create group', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📞',
|
||||
label: 'Voice Call',
|
||||
onclick: () => Toast('Start call', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📹',
|
||||
label: 'Video Call',
|
||||
onclick: () => Toast('Start video call', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
label: () => `Mark as read (${unread()})`,
|
||||
onclick: () => {
|
||||
unread(0);
|
||||
Toast('All messages read', 'alert-success', 2000);
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(MessagingFAB, '#demo-messaging');
|
||||
```
|
||||
|
||||
### Flower Style FAB
|
||||
|
||||
<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-flower" class="bg-base-100 p-6 rounded-xl border border-base-300 min-h-[300px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FlowerDemo = () => {
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50' }, [
|
||||
'Flower style FAB (quarter circle arrangement)'
|
||||
]),
|
||||
Fab({
|
||||
icon: '🌸',
|
||||
class: 'fab-flower',
|
||||
actions: [
|
||||
{ icon: '📷', label: 'Camera', onclick: () => Toast('Camera', 'alert-info', 2000) },
|
||||
{ icon: '🎨', label: 'Gallery', onclick: () => Toast('Gallery', 'alert-info', 2000) },
|
||||
{ icon: '🎤', label: 'Voice', onclick: () => Toast('Voice', 'alert-info', 2000) },
|
||||
{ icon: '📍', label: 'Location', onclick: () => Toast('Location', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(FlowerDemo, '#demo-flower');
|
||||
```
|
||||
|
||||
### 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 min-h-[400px] relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const actions = [
|
||||
{ icon: '⭐', label: 'Favorite', onclick: () => Toast('Favorited', 'alert-info', 2000) },
|
||||
{ icon: '🔔', label: 'Remind', onclick: () => Toast('Reminder set', 'alert-info', 2000) },
|
||||
{ icon: '📅', label: 'Schedule', onclick: () => Toast('Scheduled', 'alert-info', 2000) }
|
||||
];
|
||||
|
||||
return Div({ class: 'relative h-[400px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'grid grid-cols-2 gap-4 p-4 h-full' }, [
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Primary'),
|
||||
Fab({ icon: '🔵', class: 'btn-primary', actions, position: 'bottom-6 left-6' })
|
||||
]),
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Secondary'),
|
||||
Fab({ icon: '🟣', class: 'btn-secondary', actions, position: 'bottom-6 right-6' })
|
||||
]),
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Accent'),
|
||||
Fab({ icon: '🔴', class: 'btn-accent', actions, position: 'top-6 left-6' })
|
||||
]),
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Success'),
|
||||
Fab({ icon: '🟢', class: 'btn-success', actions, position: 'top-6 right-6' })
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initFabExamples = () => {
|
||||
|
||||
// 1. Basic FAB
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Fab({
|
||||
icon: '➕',
|
||||
actions: [
|
||||
{ icon: '📝', label: 'New Note', onclick: () => Toast('Create note', 'alert-info', 2000) },
|
||||
{ icon: '📷', label: 'Take Photo', onclick: () => Toast('Open camera', 'alert-info', 2000) },
|
||||
{ icon: '📎', label: 'Attach File', onclick: () => Toast('Attach file', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Label
|
||||
const labelTarget = document.querySelector('#demo-label');
|
||||
if (labelTarget && !labelTarget.hasChildNodes()) {
|
||||
const LabelDemo = () => {
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Fab({
|
||||
label: 'Create',
|
||||
icon: '✨',
|
||||
actions: [
|
||||
{ icon: '📝', label: 'Document', onclick: () => Toast('New document', 'alert-success', 2000) },
|
||||
{ icon: '🎨', label: 'Design', onclick: () => Toast('New design', 'alert-success', 2000) },
|
||||
{ icon: '📊', label: 'Spreadsheet', onclick: () => Toast('New spreadsheet', 'alert-success', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(LabelDemo, labelTarget);
|
||||
}
|
||||
|
||||
// 3. Different Positions
|
||||
const positionsTarget = document.querySelector('#demo-positions');
|
||||
if (positionsTarget && !positionsTarget.hasChildNodes()) {
|
||||
const PositionsDemo = () => {
|
||||
const position = $('bottom-6 right-6');
|
||||
|
||||
return Div({ class: 'relative h-[500px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
|
||||
Select({
|
||||
value: position,
|
||||
options: [
|
||||
{ value: 'bottom-6 right-6', label: 'Bottom Right' },
|
||||
{ value: 'bottom-6 left-6', label: 'Bottom Left' },
|
||||
{ value: 'top-6 right-6', label: 'Top Right' },
|
||||
{ value: 'top-6 left-6', label: 'Top Left' }
|
||||
],
|
||||
onchange: (e) => position(e.target.value)
|
||||
})
|
||||
]),
|
||||
Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50 pointer-events-none' }, [
|
||||
'FAB position changes relative to this container'
|
||||
]),
|
||||
Fab({
|
||||
position: () => position(),
|
||||
icon: '🧭',
|
||||
actions: [
|
||||
{ icon: '⬅️', label: 'Bottom Left', onclick: () => position('bottom-6 left-6') },
|
||||
{ icon: '➡️', label: 'Bottom Right', onclick: () => position('bottom-6 right-6') },
|
||||
{ icon: '⬆️', label: 'Top Right', onclick: () => position('top-6 right-6') },
|
||||
{ icon: '⬇️', label: 'Top Left', onclick: () => position('top-6 left-6') }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(PositionsDemo, positionsTarget);
|
||||
}
|
||||
|
||||
// 4. Color Variants
|
||||
const colorsTarget = document.querySelector('#demo-colors');
|
||||
if (colorsTarget && !colorsTarget.hasChildNodes()) {
|
||||
const ColorsDemo = () => {
|
||||
const variant = $('primary');
|
||||
|
||||
const variants = {
|
||||
primary: { class: 'btn-primary', icon: '🔵' },
|
||||
secondary: { class: 'btn-secondary', icon: '🟣' },
|
||||
accent: { class: 'btn-accent', icon: '🔴' },
|
||||
info: { class: 'btn-info', icon: '🔷' },
|
||||
success: { class: 'btn-success', icon: '🟢' },
|
||||
warning: { class: 'btn-warning', icon: '🟡' },
|
||||
error: { class: 'btn-error', icon: '🔴' }
|
||||
};
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute top-4 left-4 z-20 bg-base-200 p-2 rounded-lg shadow' }, [
|
||||
Select({
|
||||
value: variant,
|
||||
options: Object.keys(variants).map(v => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) })),
|
||||
onchange: (e) => variant(e.target.value)
|
||||
})
|
||||
]),
|
||||
Fab({
|
||||
class: variants[variant()].class,
|
||||
icon: variants[variant()].icon,
|
||||
actions: [
|
||||
{ icon: '📝', label: 'Action 1', onclick: () => Toast('Action 1', 'alert-info', 2000) },
|
||||
{ icon: '🎨', label: 'Action 2', onclick: () => Toast('Action 2', 'alert-info', 2000) },
|
||||
{ icon: '⚙️', label: 'Action 3', onclick: () => Toast('Action 3', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(ColorsDemo, colorsTarget);
|
||||
}
|
||||
|
||||
// 5. Reactive Actions
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveActions = () => {
|
||||
const count = $(0);
|
||||
|
||||
const actions = () => [
|
||||
{
|
||||
icon: '🔢',
|
||||
label: `Count: ${count()}`,
|
||||
onclick: () => {}
|
||||
},
|
||||
{
|
||||
icon: '➕',
|
||||
label: 'Increment',
|
||||
onclick: () => count(count() + 1)
|
||||
},
|
||||
{
|
||||
icon: '➖',
|
||||
label: 'Decrement',
|
||||
onclick: () => count(count() - 1)
|
||||
},
|
||||
{
|
||||
icon: '🔄',
|
||||
label: 'Reset',
|
||||
onclick: () => count(0)
|
||||
}
|
||||
];
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Fab({
|
||||
icon: () => count() > 0 ? `🔢 ${count()}` : '🎛️',
|
||||
actions: actions
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveActions, reactiveTarget);
|
||||
}
|
||||
|
||||
// 6. Document Actions
|
||||
const documentTarget = document.querySelector('#demo-document');
|
||||
if (documentTarget && !documentTarget.hasChildNodes()) {
|
||||
const DocumentActions = () => {
|
||||
const saved = $(false);
|
||||
|
||||
const handleSave = () => {
|
||||
saved(true);
|
||||
Toast('Document saved!', 'alert-success', 2000);
|
||||
setTimeout(() => saved(false), 3000);
|
||||
};
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
|
||||
Div({ class: 'text-6xl mb-4' }, '📄'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Untitled Document'),
|
||||
() => saved() ? Div({ class: 'mt-4' }, Alert({ type: 'success', message: '✓ Saved successfully' })) : null
|
||||
]),
|
||||
Fab({
|
||||
icon: '✏️',
|
||||
actions: [
|
||||
{ icon: '💾', label: 'Save', onclick: handleSave },
|
||||
{ icon: '📋', label: 'Copy', onclick: () => Toast('Copied!', 'alert-info', 2000) },
|
||||
{ icon: '✂️', label: 'Cut', onclick: () => Toast('Cut!', 'alert-info', 2000) },
|
||||
{ icon: '📎', label: 'Share', onclick: () => Toast('Share dialog', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(DocumentActions, documentTarget);
|
||||
}
|
||||
|
||||
// 7. Messaging FAB
|
||||
const messagingTarget = document.querySelector('#demo-messaging');
|
||||
if (messagingTarget && !messagingTarget.hasChildNodes()) {
|
||||
const MessagingFAB = () => {
|
||||
const unread = $(3);
|
||||
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute inset-0 flex flex-col items-center justify-center' }, [
|
||||
Div({ class: 'text-6xl mb-4' }, '💬'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Messages'),
|
||||
() => unread() > 0 ? Div({ class: 'badge badge-error mt-2' }, `${unread()} unread`) : null
|
||||
]),
|
||||
Fab({
|
||||
icon: () => `💬${unread() > 0 ? ` ${unread()}` : ''}`,
|
||||
class: 'btn-primary',
|
||||
actions: [
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'New Message',
|
||||
onclick: () => Toast('Start new conversation', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
label: 'Group Chat',
|
||||
onclick: () => Toast('Create group', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📞',
|
||||
label: 'Voice Call',
|
||||
onclick: () => Toast('Start call', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📹',
|
||||
label: 'Video Call',
|
||||
onclick: () => Toast('Start video call', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
label: () => `Mark as read (${unread()})`,
|
||||
onclick: () => {
|
||||
unread(0);
|
||||
Toast('All messages read', 'alert-success', 2000);
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(MessagingFAB, messagingTarget);
|
||||
}
|
||||
|
||||
// 8. Flower Style FAB
|
||||
const flowerTarget = document.querySelector('#demo-flower');
|
||||
if (flowerTarget && !flowerTarget.hasChildNodes()) {
|
||||
const FlowerDemo = () => {
|
||||
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50' }, [
|
||||
'Flower style FAB (quarter circle arrangement)'
|
||||
]),
|
||||
Fab({
|
||||
icon: '🌸',
|
||||
class: 'fab-flower',
|
||||
actions: [
|
||||
{ icon: '📷', label: 'Camera', onclick: () => Toast('Camera', 'alert-info', 2000) },
|
||||
{ icon: '🎨', label: 'Gallery', onclick: () => Toast('Gallery', 'alert-info', 2000) },
|
||||
{ icon: '🎤', label: 'Voice', onclick: () => Toast('Voice', 'alert-info', 2000) },
|
||||
{ icon: '📍', label: 'Location', onclick: () => Toast('Location', 'alert-info', 2000) }
|
||||
]
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(FlowerDemo, flowerTarget);
|
||||
}
|
||||
|
||||
// 9. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const actions = [
|
||||
{ icon: '⭐', label: 'Favorite', onclick: () => Toast('Favorited', 'alert-info', 2000) },
|
||||
{ icon: '🔔', label: 'Remind', onclick: () => Toast('Reminder set', 'alert-info', 2000) },
|
||||
{ icon: '📅', label: 'Schedule', onclick: () => Toast('Scheduled', 'alert-info', 2000) }
|
||||
];
|
||||
|
||||
return Div({ class: 'relative h-[400px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
|
||||
Div({ class: 'grid grid-cols-2 gap-4 p-4 h-full' }, [
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Primary'),
|
||||
Fab({ icon: '🔵', class: 'btn-primary', actions, position: 'bottom-6 left-6' })
|
||||
]),
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Secondary'),
|
||||
Fab({ icon: '🟣', class: 'btn-secondary', actions, position: 'bottom-6 right-6' })
|
||||
]),
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Accent'),
|
||||
Fab({ icon: '🔴', class: 'btn-accent', actions, position: 'top-6 left-6' })
|
||||
]),
|
||||
Div({ class: 'relative border rounded-lg bg-base-200' }, [
|
||||
Span({ class: 'absolute top-2 left-2 text-xs opacity-50' }, 'Success'),
|
||||
Fab({ icon: '🟢', class: 'btn-success', actions, position: 'top-6 right-6' })
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initFabExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initFabExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
549
docs/components_old/fieldset.md
Normal file
549
docs/components_old/fieldset.md
Normal file
@@ -0,0 +1,549 @@
|
||||
# Fieldset
|
||||
|
||||
Fieldset component for grouping form fields with optional legend and consistent styling.
|
||||
|
||||
## Tag
|
||||
|
||||
`Fieldset`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `legend` | `string \| VNode \| Signal` | `-` | Fieldset legend/title |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `VNode \| Array<VNode>` | Required | Form fields or content inside the fieldset |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Fieldset
|
||||
|
||||
<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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Fieldset({
|
||||
legend: 'User Information',
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Full Name', placeholder: 'Enter your name' }),
|
||||
Input({ label: 'Email', type: 'email', placeholder: 'user@example.com' }),
|
||||
Input({ label: 'Phone', type: 'tel', placeholder: '+1 234 567 890' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Reactive Legend
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveDemo = () => {
|
||||
const name = $('');
|
||||
const email = $('');
|
||||
const isValid = () => name().length > 0 && email().includes('@');
|
||||
|
||||
return Fieldset({
|
||||
legend: () => isValid() ? '✓ Valid Form' : '✗ Incomplete Form',
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({
|
||||
label: 'Full Name',
|
||||
value: name,
|
||||
oninput: (e) => name(e.target.value),
|
||||
placeholder: 'Enter your name'
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
oninput: (e) => email(e.target.value),
|
||||
placeholder: 'user@example.com'
|
||||
}),
|
||||
() => isValid()
|
||||
? Alert({ type: 'success', message: 'Form is ready to submit' })
|
||||
: Alert({ type: 'warning', message: 'Please fill all required fields' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Address Form
|
||||
|
||||
<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-address" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AddressDemo = () => {
|
||||
const address = $('');
|
||||
const city = $('');
|
||||
const zip = $('');
|
||||
const country = $('us');
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['📍', 'Shipping Address']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Street Address', value: address, placeholder: '123 Main St', oninput: (e) => address(e.target.value) }),
|
||||
Div({ class: 'grid grid-cols-2 gap-4' }, [
|
||||
Input({ label: 'City', value: city, placeholder: 'City', oninput: (e) => city(e.target.value) }),
|
||||
Input({ label: 'ZIP Code', value: zip, placeholder: 'ZIP', oninput: (e) => zip(e.target.value) })
|
||||
]),
|
||||
Select({
|
||||
label: 'Country',
|
||||
value: country,
|
||||
options: [
|
||||
{ value: 'us', label: 'United States' },
|
||||
{ value: 'ca', label: 'Canada' },
|
||||
{ value: 'mx', label: 'Mexico' }
|
||||
],
|
||||
onchange: (e) => country(e.target.value)
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AddressDemo, '#demo-address');
|
||||
```
|
||||
|
||||
### Payment Method
|
||||
|
||||
<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-payment" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PaymentDemo = () => {
|
||||
const method = $('credit');
|
||||
const cardNumber = $('');
|
||||
const expiry = $('');
|
||||
const cvv = $('');
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['💳', 'Payment Details']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({ label: 'Credit Card', value: method, radioValue: 'credit', onclick: () => method('credit') }),
|
||||
Radio({ label: 'PayPal', value: method, radioValue: 'paypal', onclick: () => method('paypal') }),
|
||||
Radio({ label: 'Bank Transfer', value: method, radioValue: 'bank', onclick: () => method('bank') })
|
||||
]),
|
||||
() => method() === 'credit' ? Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Card Number', value: cardNumber, placeholder: '1234 5678 9012 3456', oninput: (e) => cardNumber(e.target.value) }),
|
||||
Div({ class: 'grid grid-cols-2 gap-4' }, [
|
||||
Input({ label: 'Expiry Date', value: expiry, placeholder: 'MM/YY', oninput: (e) => expiry(e.target.value) }),
|
||||
Input({ label: 'CVV', type: 'password', value: cvv, placeholder: '123', oninput: (e) => cvv(e.target.value) })
|
||||
])
|
||||
]) : null,
|
||||
() => method() === 'paypal' ? Alert({ type: 'info', message: 'You will be redirected to PayPal after confirming.' }) : null,
|
||||
() => method() === 'bank' ? Alert({ type: 'warning', message: 'Bank transfer details will be sent via email.' }) : null
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PaymentDemo, '#demo-payment');
|
||||
```
|
||||
|
||||
### Preferences Panel
|
||||
|
||||
<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-preferences" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PreferencesDemo = () => {
|
||||
const theme = $('light');
|
||||
const language = $('en');
|
||||
const notifications = $(true);
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Preferences']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Div({ class: 'form-control' }, [
|
||||
Span({ class: 'label-text mb-2' }, 'Theme'),
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({ label: 'Light', value: theme, radioValue: 'light', onclick: () => theme('light') }),
|
||||
Radio({ label: 'Dark', value: theme, radioValue: 'dark', onclick: () => theme('dark') }),
|
||||
Radio({ label: 'System', value: theme, radioValue: 'system', onclick: () => theme('system') })
|
||||
])
|
||||
]),
|
||||
Select({
|
||||
label: 'Language',
|
||||
value: language,
|
||||
options: [
|
||||
{ value: 'en', label: 'English' },
|
||||
{ value: 'es', label: 'Español' },
|
||||
{ value: 'fr', label: 'Français' }
|
||||
],
|
||||
onchange: (e) => language(e.target.value)
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Enable notifications',
|
||||
value: notifications,
|
||||
onclick: () => notifications(!notifications())
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PreferencesDemo, '#demo-preferences');
|
||||
```
|
||||
|
||||
### Registration Form
|
||||
|
||||
<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-registration" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const RegistrationDemo = () => {
|
||||
const username = $('');
|
||||
const email = $('');
|
||||
const password = $('');
|
||||
const confirmPassword = $('');
|
||||
const accepted = $(false);
|
||||
|
||||
const passwordsMatch = () => password() === confirmPassword();
|
||||
const isFormValid = () => username() && email().includes('@') && password().length >= 6 && passwordsMatch() && accepted();
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (isFormValid()) {
|
||||
Toast('Registration successful!', 'alert-success', 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['📝', 'Create Account']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Username', value: username, placeholder: 'Choose a username', oninput: (e) => username(e.target.value) }),
|
||||
Input({ label: 'Email', type: 'email', value: email, placeholder: 'your@email.com', oninput: (e) => email(e.target.value) }),
|
||||
Input({ label: 'Password', type: 'password', value: password, placeholder: 'Min. 6 characters', oninput: (e) => password(e.target.value) }),
|
||||
Input({
|
||||
label: 'Confirm Password',
|
||||
type: 'password',
|
||||
value: confirmPassword,
|
||||
error: () => confirmPassword() && !passwordsMatch() ? 'Passwords do not match' : '',
|
||||
oninput: (e) => confirmPassword(e.target.value)
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'I accept the Terms and Conditions',
|
||||
value: accepted,
|
||||
onclick: () => accepted(!accepted())
|
||||
}),
|
||||
() => !isFormValid() && (username() || email() || password()) ? Alert({ type: 'warning', message: 'Please complete all fields correctly' }) : null,
|
||||
Button({
|
||||
class: 'btn btn-primary w-full',
|
||||
onclick: handleSubmit,
|
||||
disabled: () => !isFormValid()
|
||||
}, 'Register')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(RegistrationDemo, '#demo-registration');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const commonContent = Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Field 1', placeholder: 'Enter value' }),
|
||||
Input({ label: 'Field 2', placeholder: 'Enter value' }),
|
||||
Button({ class: 'btn btn-primary' }, 'Submit')
|
||||
]);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Fieldset({ legend: 'Default Fieldset', class: 'w-full' }, [commonContent]),
|
||||
Fieldset({ legend: 'With Shadow', class: 'w-full shadow-lg' }, [commonContent]),
|
||||
Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initFieldsetExamples = () => {
|
||||
|
||||
// 1. Basic Fieldset
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Fieldset({
|
||||
legend: 'User Information',
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Full Name', placeholder: 'Enter your name' }),
|
||||
Input({ label: 'Email', type: 'email', placeholder: 'user@example.com' }),
|
||||
Input({ label: 'Phone', type: 'tel', placeholder: '+1 234 567 890' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Reactive Legend
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const name = $('');
|
||||
const email = $('');
|
||||
const isValid = () => name().length > 0 && email().includes('@');
|
||||
|
||||
return Fieldset({
|
||||
legend: () => isValid() ? '✓ Valid Form' : '✗ Incomplete Form',
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({
|
||||
label: 'Full Name',
|
||||
value: name,
|
||||
oninput: (e) => name(e.target.value),
|
||||
placeholder: 'Enter your name'
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
oninput: (e) => email(e.target.value),
|
||||
placeholder: 'user@example.com'
|
||||
}),
|
||||
() => isValid()
|
||||
? Alert({ type: 'success', message: 'Form is ready to submit' })
|
||||
: Alert({ type: 'warning', message: 'Please fill all required fields' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 3. Address Form
|
||||
const addressTarget = document.querySelector('#demo-address');
|
||||
if (addressTarget && !addressTarget.hasChildNodes()) {
|
||||
const AddressDemo = () => {
|
||||
const address = $('');
|
||||
const city = $('');
|
||||
const zip = $('');
|
||||
const country = $('us');
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['📍', 'Shipping Address']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Street Address', value: address, placeholder: '123 Main St', oninput: (e) => address(e.target.value) }),
|
||||
Div({ class: 'grid grid-cols-2 gap-4' }, [
|
||||
Input({ label: 'City', value: city, placeholder: 'City', oninput: (e) => city(e.target.value) }),
|
||||
Input({ label: 'ZIP Code', value: zip, placeholder: 'ZIP', oninput: (e) => zip(e.target.value) })
|
||||
]),
|
||||
Select({
|
||||
label: 'Country',
|
||||
value: country,
|
||||
options: [
|
||||
{ value: 'us', label: 'United States' },
|
||||
{ value: 'ca', label: 'Canada' },
|
||||
{ value: 'mx', label: 'Mexico' }
|
||||
],
|
||||
onchange: (e) => country(e.target.value)
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AddressDemo, addressTarget);
|
||||
}
|
||||
|
||||
// 4. Payment Method
|
||||
const paymentTarget = document.querySelector('#demo-payment');
|
||||
if (paymentTarget && !paymentTarget.hasChildNodes()) {
|
||||
const PaymentDemo = () => {
|
||||
const method = $('credit');
|
||||
const cardNumber = $('');
|
||||
const expiry = $('');
|
||||
const cvv = $('');
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['💳', 'Payment Details']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({ label: 'Credit Card', value: method, radioValue: 'credit', onclick: () => method('credit') }),
|
||||
Radio({ label: 'PayPal', value: method, radioValue: 'paypal', onclick: () => method('paypal') }),
|
||||
Radio({ label: 'Bank Transfer', value: method, radioValue: 'bank', onclick: () => method('bank') })
|
||||
]),
|
||||
() => method() === 'credit' ? Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Card Number', value: cardNumber, placeholder: '1234 5678 9012 3456', oninput: (e) => cardNumber(e.target.value) }),
|
||||
Div({ class: 'grid grid-cols-2 gap-4' }, [
|
||||
Input({ label: 'Expiry Date', value: expiry, placeholder: 'MM/YY', oninput: (e) => expiry(e.target.value) }),
|
||||
Input({ label: 'CVV', type: 'password', value: cvv, placeholder: '123', oninput: (e) => cvv(e.target.value) })
|
||||
])
|
||||
]) : null,
|
||||
() => method() === 'paypal' ? Alert({ type: 'info', message: 'You will be redirected to PayPal after confirming.' }) : null,
|
||||
() => method() === 'bank' ? Alert({ type: 'warning', message: 'Bank transfer details will be sent via email.' }) : null
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PaymentDemo, paymentTarget);
|
||||
}
|
||||
|
||||
// 5. Preferences Panel
|
||||
const preferencesTarget = document.querySelector('#demo-preferences');
|
||||
if (preferencesTarget && !preferencesTarget.hasChildNodes()) {
|
||||
const PreferencesDemo = () => {
|
||||
const theme = $('light');
|
||||
const language = $('en');
|
||||
const notifications = $(true);
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Preferences']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Div({ class: 'form-control' }, [
|
||||
Span({ class: 'label-text mb-2' }, 'Theme'),
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({ label: 'Light', value: theme, radioValue: 'light', onclick: () => theme('light') }),
|
||||
Radio({ label: 'Dark', value: theme, radioValue: 'dark', onclick: () => theme('dark') }),
|
||||
Radio({ label: 'System', value: theme, radioValue: 'system', onclick: () => theme('system') })
|
||||
])
|
||||
]),
|
||||
Select({
|
||||
label: 'Language',
|
||||
value: language,
|
||||
options: [
|
||||
{ value: 'en', label: 'English' },
|
||||
{ value: 'es', label: 'Español' },
|
||||
{ value: 'fr', label: 'Français' }
|
||||
],
|
||||
onchange: (e) => language(e.target.value)
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Enable notifications',
|
||||
value: notifications,
|
||||
onclick: () => notifications(!notifications())
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PreferencesDemo, preferencesTarget);
|
||||
}
|
||||
|
||||
// 6. Registration Form
|
||||
const registrationTarget = document.querySelector('#demo-registration');
|
||||
if (registrationTarget && !registrationTarget.hasChildNodes()) {
|
||||
const RegistrationDemo = () => {
|
||||
const username = $('');
|
||||
const email = $('');
|
||||
const password = $('');
|
||||
const confirmPassword = $('');
|
||||
const accepted = $(false);
|
||||
|
||||
const passwordsMatch = () => password() === confirmPassword();
|
||||
const isFormValid = () => username() && email().includes('@') && password().length >= 6 && passwordsMatch() && accepted();
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (isFormValid()) {
|
||||
Toast('Registration successful!', 'alert-success', 2000);
|
||||
}
|
||||
};
|
||||
|
||||
return Fieldset({
|
||||
legend: Span({ class: 'flex items-center gap-2' }, ['📝', 'Create Account']),
|
||||
class: 'w-full max-w-md mx-auto'
|
||||
}, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Username', value: username, placeholder: 'Choose a username', oninput: (e) => username(e.target.value) }),
|
||||
Input({ label: 'Email', type: 'email', value: email, placeholder: 'your@email.com', oninput: (e) => email(e.target.value) }),
|
||||
Input({ label: 'Password', type: 'password', value: password, placeholder: 'Min. 6 characters', oninput: (e) => password(e.target.value) }),
|
||||
Input({
|
||||
label: 'Confirm Password',
|
||||
type: 'password',
|
||||
value: confirmPassword,
|
||||
error: () => confirmPassword() && !passwordsMatch() ? 'Passwords do not match' : '',
|
||||
oninput: (e) => confirmPassword(e.target.value)
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'I accept the Terms and Conditions',
|
||||
value: accepted,
|
||||
onclick: () => accepted(!accepted())
|
||||
}),
|
||||
() => !isFormValid() && (username() || email() || password()) ? Alert({ type: 'warning', message: 'Please complete all fields correctly' }) : null,
|
||||
Button({
|
||||
class: 'btn btn-primary w-full',
|
||||
onclick: handleSubmit,
|
||||
disabled: () => !isFormValid()
|
||||
}, 'Register')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(RegistrationDemo, registrationTarget);
|
||||
}
|
||||
|
||||
// 7. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const commonContent = Div({ class: 'space-y-4' }, [
|
||||
Input({ label: 'Field 1', placeholder: 'Enter value' }),
|
||||
Input({ label: 'Field 2', placeholder: 'Enter value' }),
|
||||
Button({ class: 'btn btn-primary' }, 'Submit')
|
||||
]);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Fieldset({ legend: 'Default Fieldset', class: 'w-full' }, [commonContent]),
|
||||
Fieldset({ legend: 'With Shadow', class: 'w-full shadow-lg' }, [commonContent]),
|
||||
Fieldset({ legend: 'With Background', class: 'w-full bg-base-100' }, [commonContent])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initFieldsetExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initFieldsetExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
556
docs/components_old/indicator.md
Normal file
556
docs/components_old/indicator.md
Normal file
@@ -0,0 +1,556 @@
|
||||
# Indicator
|
||||
|
||||
Indicator component for adding badges, status markers, or notifications to elements. Perfect for showing counts, online status, or alerts.
|
||||
|
||||
## Tag
|
||||
|
||||
`Indicator`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `badge` | `string \| VNode \| Signal` | `-` | Content to display as indicator |
|
||||
| `badgeClass` | `string` | `''` | Additional CSS classes for the badge |
|
||||
| `class` | `string` | `''` | Additional CSS classes for the container |
|
||||
| `children` | `VNode` | `-` | Element to attach the indicator to |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Indicator
|
||||
|
||||
<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 flex-wrap gap-8 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Indicator({ badge: '3', badgeClass: 'badge-primary' }, [
|
||||
Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '📦')
|
||||
]),
|
||||
Indicator({ badge: '99+', badgeClass: 'badge-secondary' }, [
|
||||
Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
|
||||
]),
|
||||
Indicator({ badge: 'New', badgeClass: 'badge-accent' }, [
|
||||
Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '✨')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Online Status Indicator
|
||||
|
||||
<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-status" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const StatusDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Indicator({ badge: '●', badgeClass: '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' }, [
|
||||
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' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'BC')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(StatusDemo, '#demo-status');
|
||||
```
|
||||
|
||||
### Reactive Counter
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4 items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveDemo = () => {
|
||||
const count = $(0);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Indicator({
|
||||
badge: () => count() > 0 ? count() : null,
|
||||
badgeClass: 'badge-primary'
|
||||
}, [
|
||||
Button({
|
||||
class: 'btn btn-lg btn-primary',
|
||||
onclick: () => count(count() + 1)
|
||||
}, 'Notifications')
|
||||
]),
|
||||
Div({ class: 'flex gap-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => count(Math.max(0, count() - 1))
|
||||
}, 'Decrease'),
|
||||
Button({
|
||||
class: 'btn btn-sm btn-ghost',
|
||||
onclick: () => count(0)
|
||||
}, 'Clear')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Shopping Cart
|
||||
|
||||
<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-cart" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CartDemo = () => {
|
||||
const cart = $([
|
||||
{ id: 1, name: 'Product 1', price: 29 },
|
||||
{ id: 2, name: 'Product 2', price: 49 }
|
||||
]);
|
||||
|
||||
const addItem = () => {
|
||||
const newId = Math.max(...cart().map(i => i.id), 0) + 1;
|
||||
cart([...cart(), { id: newId, name: `Product ${newId}`, price: Math.floor(Math.random() * 100) + 10 }]);
|
||||
Toast('Item added to cart', 'alert-success', 1500);
|
||||
};
|
||||
|
||||
const removeItem = (id) => {
|
||||
cart(cart().filter(item => item.id !== id));
|
||||
Toast('Item removed', 'alert-info', 1500);
|
||||
};
|
||||
|
||||
const total = () => cart().reduce((sum, item) => sum + item.price, 0);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Indicator({
|
||||
badge: () => cart().length,
|
||||
badgeClass: 'badge-primary'
|
||||
}, [
|
||||
Button({ class: 'btn', onclick: addItem }, '🛒 Add to Cart')
|
||||
]),
|
||||
Span({ class: 'text-lg font-bold' }, () => `Total: $${total()}`)
|
||||
]),
|
||||
cart().length === 0
|
||||
? Div({ class: 'alert alert-soft text-center' }, 'Cart is empty')
|
||||
: Div({ class: 'flex flex-col gap-2' }, cart().map(item =>
|
||||
Div({ class: 'flex justify-between items-center p-2 bg-base-200 rounded-lg' }, [
|
||||
Span({}, item.name),
|
||||
Div({ class: 'flex gap-2 items-center' }, [
|
||||
Span({ class: 'text-sm font-bold' }, `$${item.price}`),
|
||||
Button({
|
||||
class: 'btn btn-xs btn-ghost btn-circle',
|
||||
onclick: () => removeItem(item.id)
|
||||
}, '✕')
|
||||
])
|
||||
])
|
||||
))
|
||||
]);
|
||||
};
|
||||
$mount(CartDemo, '#demo-cart');
|
||||
```
|
||||
|
||||
### Email Inbox
|
||||
|
||||
<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-inbox" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const InboxDemo = () => {
|
||||
const unread = $(3);
|
||||
const messages = $([
|
||||
{ id: 1, from: 'john@example.com', subject: 'Meeting tomorrow', read: false },
|
||||
{ id: 2, from: 'jane@example.com', subject: 'Project update', read: false },
|
||||
{ id: 3, from: 'bob@example.com', subject: 'Question about design', read: false },
|
||||
{ id: 4, from: 'alice@example.com', subject: 'Weekly report', read: true }
|
||||
]);
|
||||
|
||||
const markAsRead = (id) => {
|
||||
const msg = messages().find(m => m.id === id);
|
||||
if (!msg.read) {
|
||||
msg.read = true;
|
||||
messages([...messages()]);
|
||||
unread(unread() - 1);
|
||||
}
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Indicator({
|
||||
badge: () => unread(),
|
||||
badgeClass: 'badge-primary'
|
||||
}, [
|
||||
Span({ class: 'text-lg font-bold' }, 'Inbox')
|
||||
]),
|
||||
Button({
|
||||
class: 'btn btn-sm btn-ghost',
|
||||
onclick: () => {
|
||||
messages().forEach(m => m.read = true);
|
||||
messages([...messages()]);
|
||||
unread(0);
|
||||
}
|
||||
}, 'Mark all read')
|
||||
]),
|
||||
Div({ class: 'flex flex-col gap-2' }, messages().map(msg =>
|
||||
Div({
|
||||
class: `p-3 rounded-lg cursor-pointer transition-all ${msg.read ? 'bg-base-200 opacity-60' : 'bg-primary/10 border-l-4 border-primary'}`,
|
||||
onclick: () => markAsRead(msg.id)
|
||||
}, [
|
||||
Div({ class: 'font-medium' }, msg.from),
|
||||
Div({ class: 'text-sm' }, msg.subject),
|
||||
!msg.read && Span({ class: 'badge badge-xs badge-primary mt-1' }, 'New')
|
||||
])
|
||||
))
|
||||
]);
|
||||
};
|
||||
$mount(InboxDemo, '#demo-inbox');
|
||||
```
|
||||
|
||||
### Custom Position
|
||||
|
||||
<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-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PositionsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Top-Left'),
|
||||
Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Top-Right'),
|
||||
Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Bottom-Left'),
|
||||
Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Bottom-Right'),
|
||||
Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PositionsDemo, '#demo-positions');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Indicator({ badge: '3', badgeClass: 'badge-primary badge-sm' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '📧')
|
||||
]),
|
||||
Indicator({ badge: '99+', badgeClass: 'badge-secondary badge-md' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
|
||||
]),
|
||||
Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
|
||||
Div({ class: 'avatar' }, [
|
||||
Div({ class: 'w-10 h-10 rounded-full bg-primary' })
|
||||
])
|
||||
]),
|
||||
Indicator({ badge: '!', badgeClass: 'badge-error badge-sm' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '⚠️')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initIndicatorExamples = () => {
|
||||
|
||||
// 1. Basic Indicator
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Indicator({ badge: '3', badgeClass: 'badge-primary' }, [
|
||||
Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '📦')
|
||||
]),
|
||||
Indicator({ badge: '99+', badgeClass: 'badge-secondary' }, [
|
||||
Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
|
||||
]),
|
||||
Indicator({ badge: 'New', badgeClass: 'badge-accent' }, [
|
||||
Div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '✨')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Online Status Indicator
|
||||
const statusTarget = document.querySelector('#demo-status');
|
||||
if (statusTarget && !statusTarget.hasChildNodes()) {
|
||||
const StatusDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Indicator({ badge: '●', badgeClass: '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' }, [
|
||||
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' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-neutral text-neutral-content rounded-full w-12 h-12 flex items-center justify-center' }, 'BC')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(StatusDemo, statusTarget);
|
||||
}
|
||||
|
||||
// 3. Reactive Counter
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const count = $(0);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Indicator({
|
||||
badge: () => count() > 0 ? count() : null,
|
||||
badgeClass: 'badge-primary'
|
||||
}, [
|
||||
Button({
|
||||
class: 'btn btn-lg btn-primary',
|
||||
onclick: () => count(count() + 1)
|
||||
}, 'Notifications')
|
||||
]),
|
||||
Div({ class: 'flex gap-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => count(Math.max(0, count() - 1))
|
||||
}, 'Decrease'),
|
||||
Button({
|
||||
class: 'btn btn-sm btn-ghost',
|
||||
onclick: () => count(0)
|
||||
}, 'Clear')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 4. Shopping Cart
|
||||
const cartTarget = document.querySelector('#demo-cart');
|
||||
if (cartTarget && !cartTarget.hasChildNodes()) {
|
||||
const CartDemo = () => {
|
||||
const cart = $([
|
||||
{ id: 1, name: 'Product 1', price: 29 },
|
||||
{ id: 2, name: 'Product 2', price: 49 }
|
||||
]);
|
||||
|
||||
const addItem = () => {
|
||||
const newId = Math.max(...cart().map(i => i.id), 0) + 1;
|
||||
cart([...cart(), { id: newId, name: `Product ${newId}`, price: Math.floor(Math.random() * 100) + 10 }]);
|
||||
Toast('Item added to cart', 'alert-success', 1500);
|
||||
};
|
||||
|
||||
const removeItem = (id) => {
|
||||
cart(cart().filter(item => item.id !== id));
|
||||
Toast('Item removed', 'alert-info', 1500);
|
||||
};
|
||||
|
||||
const total = () => cart().reduce((sum, item) => sum + item.price, 0);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Indicator({
|
||||
badge: () => cart().length,
|
||||
badgeClass: 'badge-primary'
|
||||
}, [
|
||||
Button({ class: 'btn', onclick: addItem }, '🛒 Add to Cart')
|
||||
]),
|
||||
Span({ class: 'text-lg font-bold' }, () => `Total: $${total()}`)
|
||||
]),
|
||||
cart().length === 0
|
||||
? Div({ class: 'alert alert-soft text-center' }, 'Cart is empty')
|
||||
: Div({ class: 'flex flex-col gap-2' }, cart().map(item =>
|
||||
Div({ class: 'flex justify-between items-center p-2 bg-base-200 rounded-lg' }, [
|
||||
Span({}, item.name),
|
||||
Div({ class: 'flex gap-2 items-center' }, [
|
||||
Span({ class: 'text-sm font-bold' }, `$${item.price}`),
|
||||
Button({
|
||||
class: 'btn btn-xs btn-ghost btn-circle',
|
||||
onclick: () => removeItem(item.id)
|
||||
}, '✕')
|
||||
])
|
||||
])
|
||||
))
|
||||
]);
|
||||
};
|
||||
$mount(CartDemo, cartTarget);
|
||||
}
|
||||
|
||||
// 5. Email Inbox
|
||||
const inboxTarget = document.querySelector('#demo-inbox');
|
||||
if (inboxTarget && !inboxTarget.hasChildNodes()) {
|
||||
const InboxDemo = () => {
|
||||
const unread = $(3);
|
||||
const messages = $([
|
||||
{ id: 1, from: 'john@example.com', subject: 'Meeting tomorrow', read: false },
|
||||
{ id: 2, from: 'jane@example.com', subject: 'Project update', read: false },
|
||||
{ id: 3, from: 'bob@example.com', subject: 'Question about design', read: false },
|
||||
{ id: 4, from: 'alice@example.com', subject: 'Weekly report', read: true }
|
||||
]);
|
||||
|
||||
const markAsRead = (id) => {
|
||||
const msg = messages().find(m => m.id === id);
|
||||
if (!msg.read) {
|
||||
msg.read = true;
|
||||
messages([...messages()]);
|
||||
unread(unread() - 1);
|
||||
}
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Indicator({
|
||||
badge: () => unread(),
|
||||
badgeClass: 'badge-primary'
|
||||
}, [
|
||||
Span({ class: 'text-lg font-bold' }, 'Inbox')
|
||||
]),
|
||||
Button({
|
||||
class: 'btn btn-sm btn-ghost',
|
||||
onclick: () => {
|
||||
messages().forEach(m => m.read = true);
|
||||
messages([...messages()]);
|
||||
unread(0);
|
||||
}
|
||||
}, 'Mark all read')
|
||||
]),
|
||||
Div({ class: 'flex flex-col gap-2' }, messages().map(msg =>
|
||||
Div({
|
||||
class: `p-3 rounded-lg cursor-pointer transition-all ${msg.read ? 'bg-base-200 opacity-60' : 'bg-primary/10 border-l-4 border-primary'}`,
|
||||
onclick: () => markAsRead(msg.id)
|
||||
}, [
|
||||
Div({ class: 'font-medium' }, msg.from),
|
||||
Div({ class: 'text-sm' }, msg.subject),
|
||||
!msg.read && Span({ class: 'badge badge-xs badge-primary mt-1' }, 'New')
|
||||
])
|
||||
))
|
||||
]);
|
||||
};
|
||||
$mount(InboxDemo, inboxTarget);
|
||||
}
|
||||
|
||||
// 6. Custom Position
|
||||
const positionsTarget = document.querySelector('#demo-positions');
|
||||
if (positionsTarget && !positionsTarget.hasChildNodes()) {
|
||||
const PositionsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Top-Left'),
|
||||
Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Top-Right'),
|
||||
Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Bottom-Left'),
|
||||
Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Bottom-Right'),
|
||||
Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg' })
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PositionsDemo, positionsTarget);
|
||||
}
|
||||
|
||||
// 7. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Indicator({ badge: '3', badgeClass: 'badge-primary badge-sm' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '📧')
|
||||
]),
|
||||
Indicator({ badge: '99+', badgeClass: 'badge-secondary badge-md' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
|
||||
]),
|
||||
Indicator({ badge: '●', badgeClass: 'badge-success badge-xs' }, [
|
||||
Div({ class: 'avatar' }, [
|
||||
Div({ class: 'w-10 h-10 rounded-full bg-primary' })
|
||||
])
|
||||
]),
|
||||
Indicator({ badge: '!', badgeClass: 'badge-error badge-sm' }, [
|
||||
Div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '⚠️')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initIndicatorExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initIndicatorExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
348
docs/components_old/input.md
Normal file
348
docs/components_old/input.md
Normal file
@@ -0,0 +1,348 @@
|
||||
# Input
|
||||
|
||||
Form input component with floating label, icons, password toggle, tooltip, and error states. Fully integrated with DaisyUI and Tailwind.
|
||||
|
||||
## Tag
|
||||
|
||||
`Input`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :--------- | :----------------------------------------------- |
|
||||
| `label` | `string` | `-` | Label text (floating style) |
|
||||
| `type` | `string` | `'text'` | Input type (text, password, email, number, date) |
|
||||
| `value` | `string \| Signal<string>` | `''` | Input value |
|
||||
| `placeholder`| `string` | `' '` | Placeholder text |
|
||||
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed inside input |
|
||||
| `tip` | `string` | `-` | Help tooltip text |
|
||||
| `error` | `string \| Signal<string>` | `-` | Error message to display |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `oninput` | `function` | `-` | Input event handler |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Input
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const name = $('');
|
||||
|
||||
return Input({
|
||||
label: 'Full Name',
|
||||
placeholder: 'Enter your name',
|
||||
value: name,
|
||||
oninput: (e) => name(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Icon
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-icon" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconDemo = () => {
|
||||
const email = $('');
|
||||
|
||||
return Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
icon: Icons.iconMail,
|
||||
value: email,
|
||||
oninput: (e) => email(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(IconDemo, '#demo-icon');
|
||||
```
|
||||
|
||||
### Password with Toggle
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-password" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PasswordDemo = () => {
|
||||
const password = $('');
|
||||
|
||||
return Input({
|
||||
label: 'Password',
|
||||
type: 'password',
|
||||
value: password,
|
||||
oninput: (e) => password(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(PasswordDemo, '#demo-password');
|
||||
```
|
||||
|
||||
### With Tooltip
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const TooltipDemo = () => {
|
||||
const username = $('');
|
||||
|
||||
return Input({
|
||||
label: 'Username',
|
||||
tip: 'Must be at least 3 characters',
|
||||
value: username,
|
||||
oninput: (e) => username(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(TooltipDemo, '#demo-tooltip');
|
||||
```
|
||||
|
||||
### Error State
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-error" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ErrorDemo = () => {
|
||||
const email = $('');
|
||||
const isValid = $(true);
|
||||
|
||||
const validate = (value) => {
|
||||
const valid = value.includes('@') && value.includes('.');
|
||||
isValid(valid);
|
||||
email(value);
|
||||
};
|
||||
|
||||
return Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
error: () => !isValid() && email() ? 'Invalid email address' : '',
|
||||
oninput: (e) => validate(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(ErrorDemo, '#demo-error');
|
||||
```
|
||||
|
||||
### Disabled State
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DisabledDemo = () => {
|
||||
return Input({
|
||||
label: 'Username',
|
||||
value: 'john.doe',
|
||||
disabled: true
|
||||
});
|
||||
};
|
||||
$mount(DisabledDemo, '#demo-disabled');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const text = $('');
|
||||
const number = $(0);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Input({
|
||||
label: 'Text Input',
|
||||
placeholder: 'Type something...',
|
||||
value: text,
|
||||
oninput: (e) => text(e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Number Input',
|
||||
type: 'number',
|
||||
value: number,
|
||||
oninput: (e) => number(parseInt(e.target.value) || 0)
|
||||
}),
|
||||
Input({
|
||||
label: 'Date Input',
|
||||
type: 'date',
|
||||
value: $('2024-01-01')
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initInputExamples = () => {
|
||||
|
||||
// 1. Basic Input
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const name = $('');
|
||||
return Input({
|
||||
label: 'Full Name',
|
||||
placeholder: 'Enter your name',
|
||||
value: name,
|
||||
oninput: (e) => name(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Icon
|
||||
const iconTarget = document.querySelector('#demo-icon');
|
||||
if (iconTarget && !iconTarget.hasChildNodes()) {
|
||||
const IconDemo = () => {
|
||||
const email = $('');
|
||||
return Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
icon: Icons.iconMail,
|
||||
value: email,
|
||||
oninput: (e) => email(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(IconDemo, iconTarget);
|
||||
}
|
||||
|
||||
// 3. Password with Toggle
|
||||
const passwordTarget = document.querySelector('#demo-password');
|
||||
if (passwordTarget && !passwordTarget.hasChildNodes()) {
|
||||
const PasswordDemo = () => {
|
||||
const password = $('');
|
||||
return Input({
|
||||
label: 'Password',
|
||||
type: 'password',
|
||||
value: password,
|
||||
oninput: (e) => password(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(PasswordDemo, passwordTarget);
|
||||
}
|
||||
|
||||
// 4. With Tooltip
|
||||
const tooltipTarget = document.querySelector('#demo-tooltip');
|
||||
if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
|
||||
const TooltipDemo = () => {
|
||||
const username = $('');
|
||||
return Input({
|
||||
label: 'Username',
|
||||
tip: 'Must be at least 3 characters',
|
||||
value: username,
|
||||
oninput: (e) => username(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(TooltipDemo, tooltipTarget);
|
||||
}
|
||||
|
||||
// 5. Error State
|
||||
const errorTarget = document.querySelector('#demo-error');
|
||||
if (errorTarget && !errorTarget.hasChildNodes()) {
|
||||
const ErrorDemo = () => {
|
||||
const email = $('');
|
||||
const isValid = $(true);
|
||||
|
||||
const validate = (value) => {
|
||||
const valid = value.includes('@') && value.includes('.');
|
||||
isValid(valid);
|
||||
email(value);
|
||||
};
|
||||
|
||||
return Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
error: () => !isValid() && email() ? 'Invalid email address' : '',
|
||||
oninput: (e) => validate(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(ErrorDemo, errorTarget);
|
||||
}
|
||||
|
||||
// 6. Disabled State
|
||||
const disabledTarget = document.querySelector('#demo-disabled');
|
||||
if (disabledTarget && !disabledTarget.hasChildNodes()) {
|
||||
const DisabledDemo = () => {
|
||||
return Input({
|
||||
label: 'Username',
|
||||
value: 'john.doe',
|
||||
disabled: true
|
||||
});
|
||||
};
|
||||
$mount(DisabledDemo, disabledTarget);
|
||||
}
|
||||
|
||||
// 7. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const text = $('');
|
||||
const number = $(0);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Input({
|
||||
label: 'Text Input',
|
||||
placeholder: 'Type something...',
|
||||
value: text,
|
||||
oninput: (e) => text(e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Number Input',
|
||||
type: 'number',
|
||||
value: number,
|
||||
oninput: (e) => number(parseInt(e.target.value) || 0)
|
||||
}),
|
||||
Input({
|
||||
label: 'Date Input',
|
||||
type: 'date',
|
||||
value: $('2024-01-01')
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initInputExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initInputExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
601
docs/components_old/list.md
Normal file
601
docs/components_old/list.md
Normal file
@@ -0,0 +1,601 @@
|
||||
|
||||
# List
|
||||
|
||||
List component with custom item rendering, headers, and reactive data binding.
|
||||
|
||||
## Tag
|
||||
|
||||
`List`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :--------------- | :----------------------------------------------- |
|
||||
| `items` | `Array \| Signal<Array>` | `[]` | Data array to display |
|
||||
| `header` | `string \| VNode \| Signal` | `-` | Optional header content |
|
||||
| `render` | `function(item, index)` | `-` | Custom render function for each item |
|
||||
| `keyFn` | `function(item, index)` | `(item, idx) => idx` | Unique key function for items |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic List
|
||||
|
||||
<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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const items = ['Apple', 'Banana', 'Orange', 'Grape', 'Mango'];
|
||||
|
||||
return List({
|
||||
items: items,
|
||||
render: (item) => Div({ class: 'p-3 hover:bg-base-200 transition-colors' }, [
|
||||
Span({ class: 'font-medium' }, item)
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Header
|
||||
|
||||
<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-header" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const HeaderDemo = () => {
|
||||
const users = [
|
||||
{ name: 'John Doe', email: 'john@example.com', status: 'active' },
|
||||
{ name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' },
|
||||
{ name: 'Bob Johnson', email: 'bob@example.com', status: 'active' }
|
||||
];
|
||||
|
||||
return List({
|
||||
items: users,
|
||||
header: Div({ class: 'p-3 bg-primary/10 font-bold border-b border-base-300' }, 'Active Users'),
|
||||
render: (user) => Div({ class: 'p-3 border-b border-base-300 hover:bg-base-200' }, [
|
||||
Div({ class: 'font-medium' }, user.name),
|
||||
Div({ class: 'text-sm opacity-70' }, user.email),
|
||||
Span({ class: `badge badge-sm ${user.status === 'active' ? 'badge-success' : 'badge-ghost'} mt-1` }, user.status)
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(HeaderDemo, '#demo-header');
|
||||
```
|
||||
|
||||
### With Icons
|
||||
|
||||
<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-icons" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconsDemo = () => {
|
||||
const settings = [
|
||||
{ icon: '🔊', label: 'Sound', description: 'Adjust volume and notifications' },
|
||||
{ icon: '🌙', label: 'Display', description: 'Brightness and dark mode' },
|
||||
{ icon: '🔒', label: 'Privacy', description: 'Security settings' },
|
||||
{ icon: '🌐', label: 'Network', description: 'WiFi and connections' }
|
||||
];
|
||||
|
||||
return List({
|
||||
items: settings,
|
||||
render: (item) => Div({ class: 'flex gap-3 p-3 hover:bg-base-200 transition-colors cursor-pointer' }, [
|
||||
Div({ class: 'text-2xl' }, item.icon),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, item.label),
|
||||
Div({ class: 'text-sm opacity-60' }, item.description)
|
||||
]),
|
||||
Span({ class: 'opacity-40' }, '→')
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, '#demo-icons');
|
||||
```
|
||||
|
||||
### With Badges
|
||||
|
||||
<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-badges" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BadgesDemo = () => {
|
||||
const notifications = [
|
||||
{ id: 1, message: 'New comment on your post', time: '5 min ago', unread: true },
|
||||
{ id: 2, message: 'Your order has been shipped', time: '1 hour ago', unread: true },
|
||||
{ id: 3, message: 'Welcome to the platform!', time: '2 days ago', unread: false },
|
||||
{ id: 4, message: 'Weekly digest available', time: '3 days ago', unread: false }
|
||||
];
|
||||
|
||||
return List({
|
||||
items: notifications,
|
||||
render: (item) => Div({ class: `flex justify-between items-center p-3 border-b border-base-300 hover:bg-base-200 ${item.unread ? 'bg-primary/5' : ''}` }, [
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, item.message),
|
||||
Div({ class: 'text-xs opacity-50' }, item.time)
|
||||
]),
|
||||
item.unread ? Span({ class: 'badge badge-primary badge-sm' }, 'New') : null
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(BadgesDemo, '#demo-badges');
|
||||
```
|
||||
|
||||
### Interactive List
|
||||
|
||||
<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-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const InteractiveDemo = () => {
|
||||
const selected = $(null);
|
||||
const items = [
|
||||
{ id: 1, name: 'Project Alpha', status: 'In Progress' },
|
||||
{ id: 2, name: 'Project Beta', status: 'Planning' },
|
||||
{ id: 3, name: 'Project Gamma', status: 'Completed' },
|
||||
{ id: 4, name: 'Project Delta', status: 'Review' }
|
||||
];
|
||||
|
||||
const statusColors = {
|
||||
'In Progress': 'badge-warning',
|
||||
'Planning': 'badge-info',
|
||||
'Completed': 'badge-success',
|
||||
'Review': 'badge-accent'
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
List({
|
||||
items: items,
|
||||
render: (item) => Div({
|
||||
class: `p-3 cursor-pointer transition-all hover:bg-base-200 ${selected() === item.id ? 'bg-primary/10 border-l-4 border-primary' : 'border-l-4 border-transparent'}`,
|
||||
onclick: () => selected(item.id)
|
||||
}, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Div({ class: 'font-medium' }, item.name),
|
||||
Span({ class: `badge ${statusColors[item.status]}` }, item.status)
|
||||
])
|
||||
])
|
||||
}),
|
||||
() => selected()
|
||||
? Div({ class: 'alert alert-info' }, `Selected: ${items.find(i => i.id === selected()).name}`)
|
||||
: Div({ class: 'alert alert-soft' }, 'Select a project to see details')
|
||||
]);
|
||||
};
|
||||
$mount(InteractiveDemo, '#demo-interactive');
|
||||
```
|
||||
|
||||
### Reactive List
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveDemo = () => {
|
||||
const todos = $([
|
||||
{ id: 1, text: 'Complete documentation', done: false },
|
||||
{ id: 2, text: 'Review pull requests', done: false },
|
||||
{ id: 3, text: 'Deploy to production', done: false }
|
||||
]);
|
||||
|
||||
const newTodo = $('');
|
||||
|
||||
const addTodo = () => {
|
||||
if (newTodo().trim()) {
|
||||
const newId = Math.max(...todos().map(t => t.id), 0) + 1;
|
||||
todos([...todos(), { id: newId, text: newTodo(), done: false }]);
|
||||
newTodo('');
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTodo = (id) => {
|
||||
todos(todos().map(t =>
|
||||
t.id === id ? { ...t, done: !t.done } : t
|
||||
));
|
||||
};
|
||||
|
||||
const deleteTodo = (id) => {
|
||||
todos(todos().filter(t => t.id !== id));
|
||||
};
|
||||
|
||||
const pendingCount = () => todos().filter(t => !t.done).length;
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex gap-2' }, [
|
||||
Input({
|
||||
placeholder: 'Add new task...',
|
||||
value: newTodo,
|
||||
class: 'flex-1',
|
||||
oninput: (e) => newTodo(e.target.value),
|
||||
onkeypress: (e) => e.key === 'Enter' && addTodo()
|
||||
}),
|
||||
Button({ class: 'btn btn-primary', onclick: addTodo }, 'Add')
|
||||
]),
|
||||
List({
|
||||
items: todos,
|
||||
render: (todo) => Div({ class: `flex items-center gap-3 p-2 border-b border-base-300 hover:bg-base-200 ${todo.done ? 'opacity-60' : ''}` }, [
|
||||
Checkbox({
|
||||
value: todo.done,
|
||||
onclick: () => toggleTodo(todo.id)
|
||||
}),
|
||||
Span({
|
||||
class: `flex-1 ${todo.done ? 'line-through' : ''}`,
|
||||
onclick: () => toggleTodo(todo.id)
|
||||
}, todo.text),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-xs btn-circle',
|
||||
onclick: () => deleteTodo(todo.id)
|
||||
}, '✕')
|
||||
])
|
||||
}),
|
||||
Div({ class: 'text-sm opacity-70 mt-2' }, () => `${pendingCount()} tasks remaining`)
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Avatar List
|
||||
|
||||
<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-avatar" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AvatarDemo = () => {
|
||||
const contacts = [
|
||||
{ name: 'Alice Johnson', role: 'Developer', avatar: 'A', online: true },
|
||||
{ name: 'Bob Smith', role: 'Designer', avatar: 'B', online: false },
|
||||
{ name: 'Charlie Brown', role: 'Manager', avatar: 'C', online: true },
|
||||
{ name: 'Diana Prince', role: 'QA Engineer', avatar: 'D', online: false }
|
||||
];
|
||||
|
||||
return List({
|
||||
items: contacts,
|
||||
render: (contact) => Div({ class: 'flex gap-3 p-3 hover:bg-base-200 transition-colors' }, [
|
||||
Div({ class: `avatar ${contact.online ? 'online' : 'offline'}`, style: 'width: 48px' }, [
|
||||
Div({ class: 'rounded-full bg-primary text-primary-content flex items-center justify-center w-12 h-12 font-bold' }, contact.avatar)
|
||||
]),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, contact.name),
|
||||
Div({ class: 'text-sm opacity-60' }, contact.role)
|
||||
]),
|
||||
Div({ class: `badge badge-sm ${contact.online ? 'badge-success' : 'badge-ghost'}` }, contact.online ? 'Online' : 'Offline')
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(AvatarDemo, '#demo-avatar');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const items = ['Item 1', 'Item 2', 'Item 3'];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default List'),
|
||||
List({
|
||||
items: items,
|
||||
render: (item) => Div({ class: 'p-2' }, item)
|
||||
}),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
|
||||
List({
|
||||
items: items,
|
||||
render: (item) => Div({ class: 'p-2' }, item),
|
||||
class: 'shadow-lg'
|
||||
}),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'Rounded Corners'),
|
||||
List({
|
||||
items: items,
|
||||
render: (item) => Div({ class: 'p-2' }, item),
|
||||
class: 'rounded-box overflow-hidden'
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initListExamples = () => {
|
||||
|
||||
// 1. Basic List
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const items = ['Apple', 'Banana', 'Orange', 'Grape', 'Mango'];
|
||||
|
||||
return List({
|
||||
items: items,
|
||||
render: (item) => Div({ class: 'p-3 hover:bg-base-200 transition-colors' }, [
|
||||
Span({ class: 'font-medium' }, item)
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Header
|
||||
const headerTarget = document.querySelector('#demo-header');
|
||||
if (headerTarget && !headerTarget.hasChildNodes()) {
|
||||
const HeaderDemo = () => {
|
||||
const users = [
|
||||
{ name: 'John Doe', email: 'john@example.com', status: 'active' },
|
||||
{ name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' },
|
||||
{ name: 'Bob Johnson', email: 'bob@example.com', status: 'active' }
|
||||
];
|
||||
|
||||
return List({
|
||||
items: users,
|
||||
header: Div({ class: 'p-3 bg-primary/10 font-bold border-b border-base-300' }, 'Active Users'),
|
||||
render: (user) => Div({ class: 'p-3 border-b border-base-300 hover:bg-base-200' }, [
|
||||
Div({ class: 'font-medium' }, user.name),
|
||||
Div({ class: 'text-sm opacity-70' }, user.email),
|
||||
Span({ class: `badge badge-sm ${user.status === 'active' ? 'badge-success' : 'badge-ghost'} mt-1` }, user.status)
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(HeaderDemo, headerTarget);
|
||||
}
|
||||
|
||||
// 3. With Icons
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
const settings = [
|
||||
{ icon: '🔊', label: 'Sound', description: 'Adjust volume and notifications' },
|
||||
{ icon: '🌙', label: 'Display', description: 'Brightness and dark mode' },
|
||||
{ icon: '🔒', label: 'Privacy', description: 'Security settings' },
|
||||
{ icon: '🌐', label: 'Network', description: 'WiFi and connections' }
|
||||
];
|
||||
|
||||
return List({
|
||||
items: settings,
|
||||
render: (item) => Div({ class: 'flex gap-3 p-3 hover:bg-base-200 transition-colors cursor-pointer' }, [
|
||||
Div({ class: 'text-2xl' }, item.icon),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, item.label),
|
||||
Div({ class: 'text-sm opacity-60' }, item.description)
|
||||
]),
|
||||
Span({ class: 'opacity-40' }, '→')
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 4. With Badges
|
||||
const badgesTarget = document.querySelector('#demo-badges');
|
||||
if (badgesTarget && !badgesTarget.hasChildNodes()) {
|
||||
const BadgesDemo = () => {
|
||||
const notifications = [
|
||||
{ id: 1, message: 'New comment on your post', time: '5 min ago', unread: true },
|
||||
{ id: 2, message: 'Your order has been shipped', time: '1 hour ago', unread: true },
|
||||
{ id: 3, message: 'Welcome to the platform!', time: '2 days ago', unread: false },
|
||||
{ id: 4, message: 'Weekly digest available', time: '3 days ago', unread: false }
|
||||
];
|
||||
|
||||
return List({
|
||||
items: notifications,
|
||||
render: (item) => Div({ class: `flex justify-between items-center p-3 border-b border-base-300 hover:bg-base-200 ${item.unread ? 'bg-primary/5' : ''}` }, [
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, item.message),
|
||||
Div({ class: 'text-xs opacity-50' }, item.time)
|
||||
]),
|
||||
item.unread ? Span({ class: 'badge badge-primary badge-sm' }, 'New') : null
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(BadgesDemo, badgesTarget);
|
||||
}
|
||||
|
||||
// 5. Interactive List
|
||||
const interactiveTarget = document.querySelector('#demo-interactive');
|
||||
if (interactiveTarget && !interactiveTarget.hasChildNodes()) {
|
||||
const InteractiveDemo = () => {
|
||||
const selected = $(null);
|
||||
const items = [
|
||||
{ id: 1, name: 'Project Alpha', status: 'In Progress' },
|
||||
{ id: 2, name: 'Project Beta', status: 'Planning' },
|
||||
{ id: 3, name: 'Project Gamma', status: 'Completed' },
|
||||
{ id: 4, name: 'Project Delta', status: 'Review' }
|
||||
];
|
||||
|
||||
const statusColors = {
|
||||
'In Progress': 'badge-warning',
|
||||
'Planning': 'badge-info',
|
||||
'Completed': 'badge-success',
|
||||
'Review': 'badge-accent'
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
List({
|
||||
items: items,
|
||||
render: (item) => Div({
|
||||
class: `p-3 cursor-pointer transition-all hover:bg-base-200 ${selected() === item.id ? 'bg-primary/10 border-l-4 border-primary' : 'border-l-4 border-transparent'}`,
|
||||
onclick: () => selected(item.id)
|
||||
}, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Div({ class: 'font-medium' }, item.name),
|
||||
Span({ class: `badge ${statusColors[item.status]}` }, item.status)
|
||||
])
|
||||
])
|
||||
}),
|
||||
() => selected()
|
||||
? Div({ class: 'alert alert-info' }, `Selected: ${items.find(i => i.id === selected()).name}`)
|
||||
: Div({ class: 'alert alert-soft' }, 'Select a project to see details')
|
||||
]);
|
||||
};
|
||||
$mount(InteractiveDemo, interactiveTarget);
|
||||
}
|
||||
|
||||
// 6. Reactive List
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const todos = $([
|
||||
{ id: 1, text: 'Complete documentation', done: false },
|
||||
{ id: 2, text: 'Review pull requests', done: false },
|
||||
{ id: 3, text: 'Deploy to production', done: false }
|
||||
]);
|
||||
|
||||
const newTodo = $('');
|
||||
|
||||
const addTodo = () => {
|
||||
if (newTodo().trim()) {
|
||||
const newId = Math.max(...todos().map(t => t.id), 0) + 1;
|
||||
todos([...todos(), { id: newId, text: newTodo(), done: false }]);
|
||||
newTodo('');
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTodo = (id) => {
|
||||
todos(todos().map(t =>
|
||||
t.id === id ? { ...t, done: !t.done } : t
|
||||
));
|
||||
};
|
||||
|
||||
const deleteTodo = (id) => {
|
||||
todos(todos().filter(t => t.id !== id));
|
||||
};
|
||||
|
||||
const pendingCount = () => todos().filter(t => !t.done).length;
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex gap-2' }, [
|
||||
Input({
|
||||
placeholder: 'Add new task...',
|
||||
value: newTodo,
|
||||
class: 'flex-1',
|
||||
oninput: (e) => newTodo(e.target.value),
|
||||
onkeypress: (e) => e.key === 'Enter' && addTodo()
|
||||
}),
|
||||
Button({ class: 'btn btn-primary', onclick: addTodo }, 'Add')
|
||||
]),
|
||||
List({
|
||||
items: todos,
|
||||
render: (todo) => Div({ class: `flex items-center gap-3 p-2 border-b border-base-300 hover:bg-base-200 ${todo.done ? 'opacity-60' : ''}` }, [
|
||||
Checkbox({
|
||||
value: todo.done,
|
||||
onclick: () => toggleTodo(todo.id)
|
||||
}),
|
||||
Span({
|
||||
class: `flex-1 ${todo.done ? 'line-through' : ''}`,
|
||||
onclick: () => toggleTodo(todo.id)
|
||||
}, todo.text),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-xs btn-circle',
|
||||
onclick: () => deleteTodo(todo.id)
|
||||
}, '✕')
|
||||
])
|
||||
}),
|
||||
Div({ class: 'text-sm opacity-70 mt-2' }, () => `${pendingCount()} tasks remaining`)
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 7. Avatar List
|
||||
const avatarTarget = document.querySelector('#demo-avatar');
|
||||
if (avatarTarget && !avatarTarget.hasChildNodes()) {
|
||||
const AvatarDemo = () => {
|
||||
const contacts = [
|
||||
{ name: 'Alice Johnson', role: 'Developer', avatar: 'A', online: true },
|
||||
{ name: 'Bob Smith', role: 'Designer', avatar: 'B', online: false },
|
||||
{ name: 'Charlie Brown', role: 'Manager', avatar: 'C', online: true },
|
||||
{ name: 'Diana Prince', role: 'QA Engineer', avatar: 'D', online: false }
|
||||
];
|
||||
|
||||
return List({
|
||||
items: contacts,
|
||||
render: (contact) => Div({ class: 'flex gap-3 p-3 hover:bg-base-200 transition-colors' }, [
|
||||
Div({ class: `avatar ${contact.online ? 'online' : 'offline'}`, style: 'width: 48px' }, [
|
||||
Div({ class: 'rounded-full bg-primary text-primary-content flex items-center justify-center w-12 h-12 font-bold' }, contact.avatar)
|
||||
]),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'font-medium' }, contact.name),
|
||||
Div({ class: 'text-sm opacity-60' }, contact.role)
|
||||
]),
|
||||
Div({ class: `badge badge-sm ${contact.online ? 'badge-success' : 'badge-ghost'}` }, contact.online ? 'Online' : 'Offline')
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(AvatarDemo, avatarTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const items = ['Item 1', 'Item 2', 'Item 3'];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default List'),
|
||||
List({
|
||||
items: items,
|
||||
render: (item) => Div({ class: 'p-2' }, item)
|
||||
}),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
|
||||
List({
|
||||
items: items,
|
||||
render: (item) => Div({ class: 'p-2' }, item),
|
||||
class: 'shadow-lg'
|
||||
}),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'Rounded Corners'),
|
||||
List({
|
||||
items: items,
|
||||
render: (item) => Div({ class: 'p-2' }, item),
|
||||
class: 'rounded-box overflow-hidden'
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initListExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initListExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
597
docs/components_old/loading.md
Normal file
597
docs/components_old/loading.md
Normal file
@@ -0,0 +1,597 @@
|
||||
# Loading
|
||||
|
||||
Loading spinner component for indicating loading states with customizable size and colors.
|
||||
|
||||
## Tag
|
||||
|
||||
`Loading`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :--------------- | :----------------------------------------------- |
|
||||
| `$show` | `boolean \| Signal<boolean>` | `true` | Show/hide the loading spinner |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI loading variants)|
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Loading
|
||||
|
||||
<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 flex-wrap gap-8 justify-center items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner' }),
|
||||
Loading({ $show: true, class: 'loading-dots' }),
|
||||
Loading({ $show: true, class: 'loading-ring' }),
|
||||
Loading({ $show: true, class: 'loading-ball' }),
|
||||
Loading({ $show: true, class: 'loading-bars' }),
|
||||
Loading({ $show: true, class: 'loading-infinity' })
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Loading Sizes
|
||||
|
||||
<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-sizes" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const SizesDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-xs' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Extra Small')
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-sm' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Small')
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-md' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Medium')
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-lg' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Large')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SizesDemo, '#demo-sizes');
|
||||
```
|
||||
|
||||
### Loading Colors
|
||||
|
||||
<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-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ColorsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner text-primary' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-secondary' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-accent' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-info' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-success' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-warning' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-error' })
|
||||
]);
|
||||
};
|
||||
$mount(ColorsDemo, '#demo-colors');
|
||||
```
|
||||
|
||||
### Button 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-button" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4 items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ButtonDemo = () => {
|
||||
const isLoading = $(false);
|
||||
|
||||
const handleClick = async () => {
|
||||
isLoading(true);
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
isLoading(false);
|
||||
Toast('Operation completed!', 'alert-success', 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
loading: isLoading,
|
||||
onclick: handleClick
|
||||
}, 'Submit'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Click the button to see loading state')
|
||||
]);
|
||||
};
|
||||
$mount(ButtonDemo, '#demo-button');
|
||||
```
|
||||
|
||||
### Async Data Loading
|
||||
|
||||
<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-async" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AsyncDemo = () => {
|
||||
const loading = $(false);
|
||||
const data = $(null);
|
||||
const error = $(null);
|
||||
|
||||
const loadData = async () => {
|
||||
loading(true);
|
||||
error(null);
|
||||
data(null);
|
||||
|
||||
try {
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
const result = {
|
||||
users: 1234,
|
||||
posts: 5678,
|
||||
comments: 9012
|
||||
};
|
||||
data(result);
|
||||
Toast('Data loaded successfully!', 'alert-success', 2000);
|
||||
} catch (err) {
|
||||
error('Failed to load data');
|
||||
Toast('Error loading data', 'alert-error', 2000);
|
||||
} finally {
|
||||
loading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: loadData,
|
||||
disabled: () => loading()
|
||||
}, loading() ? 'Loading...' : 'Load Data')
|
||||
]),
|
||||
Div({ class: 'relative min-h-[200px] flex items-center justify-center' }, [
|
||||
() => loading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null,
|
||||
() => data() ? Div({ class: 'grid grid-cols-3 gap-4 w-full' }, [
|
||||
Div({ class: 'stat' }, [
|
||||
Div({ class: 'stat-title' }, 'Users'),
|
||||
Div({ class: 'stat-value' }, data().users)
|
||||
]),
|
||||
Div({ class: 'stat' }, [
|
||||
Div({ class: 'stat-title' }, 'Posts'),
|
||||
Div({ class: 'stat-value' }, data().posts)
|
||||
]),
|
||||
Div({ class: 'stat' }, [
|
||||
Div({ class: 'stat-title' }, 'Comments'),
|
||||
Div({ class: 'stat-value' }, data().comments)
|
||||
])
|
||||
]) : null,
|
||||
() => error() ? Alert({ type: 'error', message: error() }) : null
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AsyncDemo, '#demo-async');
|
||||
```
|
||||
|
||||
### Full Page Loading
|
||||
|
||||
<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-fullpage" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FullpageDemo = () => {
|
||||
const isLoading = $(false);
|
||||
|
||||
const simulatePageLoad = () => {
|
||||
isLoading(true);
|
||||
setTimeout(() => {
|
||||
isLoading(false);
|
||||
Toast('Page loaded!', 'alert-success', 2000);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'relative' }, [
|
||||
Div({ class: 'flex justify-center p-8' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: simulatePageLoad
|
||||
}, 'Simulate Page Load')
|
||||
]),
|
||||
() => isLoading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null
|
||||
]);
|
||||
};
|
||||
$mount(FullpageDemo, '#demo-fullpage');
|
||||
```
|
||||
|
||||
### Conditional Loading
|
||||
|
||||
<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-conditional" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ConditionalDemo = () => {
|
||||
const loadingState = $('idle');
|
||||
const content = $('');
|
||||
|
||||
const simulateAction = (action) => {
|
||||
loadingState('loading');
|
||||
setTimeout(() => {
|
||||
content(`Action: ${action} completed at ${new Date().toLocaleTimeString()}`);
|
||||
loadingState('success');
|
||||
setTimeout(() => loadingState('idle'), 1500);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const loadingStates = {
|
||||
idle: null,
|
||||
loading: Loading({ $show: true, class: 'loading-spinner text-primary' }),
|
||||
success: Alert({ type: 'success', message: '✓ Done!' })
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex gap-2 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => simulateAction('Save')
|
||||
}, 'Save'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => simulateAction('Update')
|
||||
}, 'Update'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => simulateAction('Delete')
|
||||
}, 'Delete')
|
||||
]),
|
||||
Div({ class: 'flex justify-center min-h-[100px] items-center' }, [
|
||||
() => loadingStates[loadingState()],
|
||||
() => content() && loadingState() === 'idle' ? Div({ class: 'text-center' }, content()) : null
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ConditionalDemo, '#demo-conditional');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Spinner'),
|
||||
Div({ class: 'flex gap-4 justify-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-xs' }),
|
||||
Loading({ $show: true, class: 'loading-spinner loading-sm' }),
|
||||
Loading({ $show: true, class: 'loading-spinner loading-md' }),
|
||||
Loading({ $show: true, class: 'loading-spinner loading-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Dots'),
|
||||
Div({ class: 'flex gap-4 justify-center' }, [
|
||||
Loading({ $show: true, class: 'loading-dots loading-xs' }),
|
||||
Loading({ $show: true, class: 'loading-dots loading-sm' }),
|
||||
Loading({ $show: true, class: 'loading-dots loading-md' }),
|
||||
Loading({ $show: true, class: 'loading-dots loading-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Ring'),
|
||||
Div({ class: 'flex gap-4 justify-center' }, [
|
||||
Loading({ $show: true, class: 'loading-ring loading-xs' }),
|
||||
Loading({ $show: true, class: 'loading-ring loading-sm' }),
|
||||
Loading({ $show: true, class: 'loading-ring loading-md' }),
|
||||
Loading({ $show: true, class: 'loading-ring loading-lg' })
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initLoadingExamples = () => {
|
||||
|
||||
// 1. Basic Loading
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner' }),
|
||||
Loading({ $show: true, class: 'loading-dots' }),
|
||||
Loading({ $show: true, class: 'loading-ring' }),
|
||||
Loading({ $show: true, class: 'loading-ball' }),
|
||||
Loading({ $show: true, class: 'loading-bars' }),
|
||||
Loading({ $show: true, class: 'loading-infinity' })
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Loading Sizes
|
||||
const sizesTarget = document.querySelector('#demo-sizes');
|
||||
if (sizesTarget && !sizesTarget.hasChildNodes()) {
|
||||
const SizesDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-xs' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Extra Small')
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-sm' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Small')
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-md' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Medium')
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-lg' }),
|
||||
Div({ class: 'text-xs mt-2' }, 'Large')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SizesDemo, sizesTarget);
|
||||
}
|
||||
|
||||
// 3. Loading Colors
|
||||
const colorsTarget = document.querySelector('#demo-colors');
|
||||
if (colorsTarget && !colorsTarget.hasChildNodes()) {
|
||||
const ColorsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner text-primary' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-secondary' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-accent' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-info' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-success' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-warning' }),
|
||||
Loading({ $show: true, class: 'loading-spinner text-error' })
|
||||
]);
|
||||
};
|
||||
$mount(ColorsDemo, colorsTarget);
|
||||
}
|
||||
|
||||
// 4. Button Loading State
|
||||
const buttonTarget = document.querySelector('#demo-button');
|
||||
if (buttonTarget && !buttonTarget.hasChildNodes()) {
|
||||
const ButtonDemo = () => {
|
||||
const isLoading = $(false);
|
||||
|
||||
const handleClick = async () => {
|
||||
isLoading(true);
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
isLoading(false);
|
||||
Toast('Operation completed!', 'alert-success', 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
loading: isLoading,
|
||||
onclick: handleClick
|
||||
}, 'Submit'),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Click the button to see loading state')
|
||||
]);
|
||||
};
|
||||
$mount(ButtonDemo, buttonTarget);
|
||||
}
|
||||
|
||||
// 5. Async Data Loading
|
||||
const asyncTarget = document.querySelector('#demo-async');
|
||||
if (asyncTarget && !asyncTarget.hasChildNodes()) {
|
||||
const AsyncDemo = () => {
|
||||
const loading = $(false);
|
||||
const data = $(null);
|
||||
const error = $(null);
|
||||
|
||||
const loadData = async () => {
|
||||
loading(true);
|
||||
error(null);
|
||||
data(null);
|
||||
|
||||
try {
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
const result = {
|
||||
users: 1234,
|
||||
posts: 5678,
|
||||
comments: 9012
|
||||
};
|
||||
data(result);
|
||||
Toast('Data loaded successfully!', 'alert-success', 2000);
|
||||
} catch (err) {
|
||||
error('Failed to load data');
|
||||
Toast('Error loading data', 'alert-error', 2000);
|
||||
} finally {
|
||||
loading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: loadData,
|
||||
disabled: () => loading()
|
||||
}, loading() ? 'Loading...' : 'Load Data')
|
||||
]),
|
||||
Div({ class: 'relative min-h-[200px] flex items-center justify-center' }, [
|
||||
() => loading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null,
|
||||
() => data() ? Div({ class: 'grid grid-cols-3 gap-4 w-full' }, [
|
||||
Div({ class: 'stat' }, [
|
||||
Div({ class: 'stat-title' }, 'Users'),
|
||||
Div({ class: 'stat-value' }, data().users)
|
||||
]),
|
||||
Div({ class: 'stat' }, [
|
||||
Div({ class: 'stat-title' }, 'Posts'),
|
||||
Div({ class: 'stat-value' }, data().posts)
|
||||
]),
|
||||
Div({ class: 'stat' }, [
|
||||
Div({ class: 'stat-title' }, 'Comments'),
|
||||
Div({ class: 'stat-value' }, data().comments)
|
||||
])
|
||||
]) : null,
|
||||
() => error() ? Alert({ type: 'error', message: error() }) : null
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AsyncDemo, asyncTarget);
|
||||
}
|
||||
|
||||
// 6. Full Page Loading
|
||||
const fullpageTarget = document.querySelector('#demo-fullpage');
|
||||
if (fullpageTarget && !fullpageTarget.hasChildNodes()) {
|
||||
const FullpageDemo = () => {
|
||||
const isLoading = $(false);
|
||||
|
||||
const simulatePageLoad = () => {
|
||||
isLoading(true);
|
||||
setTimeout(() => {
|
||||
isLoading(false);
|
||||
Toast('Page loaded!', 'alert-success', 2000);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'relative' }, [
|
||||
Div({ class: 'flex justify-center p-8' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: simulatePageLoad
|
||||
}, 'Simulate Page Load')
|
||||
]),
|
||||
() => isLoading() ? Loading({ $show: true, class: 'loading-spinner loading-lg' }) : null
|
||||
]);
|
||||
};
|
||||
$mount(FullpageDemo, fullpageTarget);
|
||||
}
|
||||
|
||||
// 7. Conditional Loading
|
||||
const conditionalTarget = document.querySelector('#demo-conditional');
|
||||
if (conditionalTarget && !conditionalTarget.hasChildNodes()) {
|
||||
const ConditionalDemo = () => {
|
||||
const loadingState = $('idle');
|
||||
const content = $('');
|
||||
|
||||
const simulateAction = (action) => {
|
||||
loadingState('loading');
|
||||
setTimeout(() => {
|
||||
content(`Action: ${action} completed at ${new Date().toLocaleTimeString()}`);
|
||||
loadingState('success');
|
||||
setTimeout(() => loadingState('idle'), 1500);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const loadingStates = {
|
||||
idle: null,
|
||||
loading: Loading({ $show: true, class: 'loading-spinner text-primary' }),
|
||||
success: Alert({ type: 'success', message: '✓ Done!' })
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex gap-2 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => simulateAction('Save')
|
||||
}, 'Save'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => simulateAction('Update')
|
||||
}, 'Update'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => simulateAction('Delete')
|
||||
}, 'Delete')
|
||||
]),
|
||||
Div({ class: 'flex justify-center min-h-[100px] items-center' }, [
|
||||
() => loadingStates[loadingState()],
|
||||
() => content() && loadingState() === 'idle' ? Div({ class: 'text-center' }, content()) : null
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ConditionalDemo, conditionalTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Spinner'),
|
||||
Div({ class: 'flex gap-4 justify-center' }, [
|
||||
Loading({ $show: true, class: 'loading-spinner loading-xs' }),
|
||||
Loading({ $show: true, class: 'loading-spinner loading-sm' }),
|
||||
Loading({ $show: true, class: 'loading-spinner loading-md' }),
|
||||
Loading({ $show: true, class: 'loading-spinner loading-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Dots'),
|
||||
Div({ class: 'flex gap-4 justify-center' }, [
|
||||
Loading({ $show: true, class: 'loading-dots loading-xs' }),
|
||||
Loading({ $show: true, class: 'loading-dots loading-sm' }),
|
||||
Loading({ $show: true, class: 'loading-dots loading-md' }),
|
||||
Loading({ $show: true, class: 'loading-dots loading-lg' })
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Ring'),
|
||||
Div({ class: 'flex gap-4 justify-center' }, [
|
||||
Loading({ $show: true, class: 'loading-ring loading-xs' }),
|
||||
Loading({ $show: true, class: 'loading-ring loading-sm' }),
|
||||
Loading({ $show: true, class: 'loading-ring loading-md' }),
|
||||
Loading({ $show: true, class: 'loading-ring loading-lg' })
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initLoadingExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initLoadingExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
760
docs/components_old/menu.md
Normal file
760
docs/components_old/menu.md
Normal file
@@ -0,0 +1,760 @@
|
||||
# Menu
|
||||
|
||||
Menu component for creating navigation menus, sidebars, and dropdowns with support for nested items, icons, and active states.
|
||||
|
||||
## Tag
|
||||
|
||||
`Menu`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `items` | `Array<MenuItem>` | `[]` | Menu items configuration |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
### MenuItem Structure
|
||||
|
||||
| Property | Type | Description |
|
||||
| :---------- | :--------------------------- | :----------------------------------------------- |
|
||||
| `label` | `string \| VNode` | Menu item text or content |
|
||||
| `icon` | `string \| VNode` | Optional icon to display |
|
||||
| `active` | `boolean \| Signal<boolean>` | Active state highlighting |
|
||||
| `onclick` | `function` | Click handler |
|
||||
| `children` | `Array<MenuItem>` | Nested submenu items |
|
||||
| `open` | `boolean` | Whether submenu is open (for nested items) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Menu
|
||||
|
||||
<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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const activeItem = $('home');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
label: 'Home',
|
||||
active: () => activeItem() === 'home',
|
||||
onclick: () => activeItem('home')
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
active: () => activeItem() === 'about',
|
||||
onclick: () => activeItem('about')
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
active: () => activeItem() === 'contact',
|
||||
onclick: () => activeItem('contact')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Icons
|
||||
|
||||
<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-icons" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconsDemo = () => {
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
icon: '🏠',
|
||||
label: 'Dashboard',
|
||||
active: () => activeItem() === 'dashboard',
|
||||
onclick: () => activeItem('dashboard')
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
label: 'Analytics',
|
||||
active: () => activeItem() === 'analytics',
|
||||
onclick: () => activeItem('analytics')
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
active: () => activeItem() === 'settings',
|
||||
onclick: () => activeItem('settings')
|
||||
},
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'Profile',
|
||||
active: () => activeItem() === 'profile',
|
||||
onclick: () => activeItem('profile')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, '#demo-icons');
|
||||
```
|
||||
|
||||
### Nested Menu
|
||||
|
||||
<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-nested" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const NestedDemo = () => {
|
||||
const activeItem = $('products');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
label: 'Dashboard',
|
||||
onclick: () => activeItem('dashboard'),
|
||||
active: () => activeItem() === 'dashboard'
|
||||
},
|
||||
{
|
||||
label: 'Products',
|
||||
icon: '📦',
|
||||
open: true,
|
||||
children: [
|
||||
{
|
||||
label: 'All Products',
|
||||
onclick: () => activeItem('all-products'),
|
||||
active: () => activeItem() === 'all-products'
|
||||
},
|
||||
{
|
||||
label: 'Add New',
|
||||
onclick: () => activeItem('add-product'),
|
||||
active: () => activeItem() === 'add-product'
|
||||
},
|
||||
{
|
||||
label: 'Categories',
|
||||
children: [
|
||||
{
|
||||
label: 'Electronics',
|
||||
onclick: () => activeItem('electronics'),
|
||||
active: () => activeItem() === 'electronics'
|
||||
},
|
||||
{
|
||||
label: 'Clothing',
|
||||
onclick: () => activeItem('clothing'),
|
||||
active: () => activeItem() === 'clothing'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: '📋',
|
||||
onclick: () => activeItem('orders'),
|
||||
active: () => activeItem() === 'orders'
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: '⚙️',
|
||||
onclick: () => activeItem('settings'),
|
||||
active: () => activeItem() === 'settings'
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(NestedDemo, '#demo-nested');
|
||||
```
|
||||
|
||||
### Horizontal Menu
|
||||
|
||||
<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-horizontal" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const HorizontalDemo = () => {
|
||||
const activeItem = $('home');
|
||||
|
||||
return Menu({
|
||||
class: 'menu-horizontal rounded-box',
|
||||
items: [
|
||||
{
|
||||
label: 'Home',
|
||||
active: () => activeItem() === 'home',
|
||||
onclick: () => activeItem('home')
|
||||
},
|
||||
{
|
||||
label: 'Products',
|
||||
children: [
|
||||
{ label: 'Electronics', onclick: () => activeItem('electronics') },
|
||||
{ label: 'Clothing', onclick: () => activeItem('clothing') },
|
||||
{ label: 'Books', onclick: () => activeItem('books') }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
onclick: () => activeItem('about'),
|
||||
active: () => activeItem() === 'about'
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
onclick: () => activeItem('contact'),
|
||||
active: () => activeItem() === 'contact'
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(HorizontalDemo, '#demo-horizontal');
|
||||
```
|
||||
|
||||
### Sidebar Menu
|
||||
|
||||
<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-sidebar" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const SidebarDemo = () => {
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Div({ class: 'flex' }, [
|
||||
Div({ class: 'w-64' }, [
|
||||
Menu({
|
||||
class: 'rounded-box w-full',
|
||||
items: [
|
||||
{
|
||||
icon: '📊',
|
||||
label: 'Dashboard',
|
||||
active: () => activeItem() === 'dashboard',
|
||||
onclick: () => activeItem('dashboard')
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
label: 'Users',
|
||||
children: [
|
||||
{
|
||||
label: 'All Users',
|
||||
onclick: () => activeItem('all-users'),
|
||||
active: () => activeItem() === 'all-users'
|
||||
},
|
||||
{
|
||||
label: 'Add User',
|
||||
onclick: () => activeItem('add-user'),
|
||||
active: () => activeItem() === 'add-user'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '📁',
|
||||
label: 'Files',
|
||||
onclick: () => activeItem('files'),
|
||||
active: () => activeItem() === 'files'
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
onclick: () => activeItem('settings'),
|
||||
active: () => activeItem() === 'settings'
|
||||
}
|
||||
]
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex-1 p-4' }, [
|
||||
Div({ class: 'alert alert-info' }, () => `Current page: ${activeItem()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SidebarDemo, '#demo-sidebar');
|
||||
```
|
||||
|
||||
### Account Menu
|
||||
|
||||
<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-account" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AccountDemo = () => {
|
||||
const [notifications, setNotifications] = $(3);
|
||||
|
||||
return Menu({
|
||||
class: 'rounded-box w-56',
|
||||
items: [
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'My Profile',
|
||||
onclick: () => Toast('Profile clicked', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📧',
|
||||
label: 'Messages',
|
||||
badge: '3',
|
||||
onclick: () => Toast('Messages opened', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
label: 'Notifications',
|
||||
badge: () => notifications(),
|
||||
onclick: () => {
|
||||
setNotifications(0);
|
||||
Toast('Notifications cleared', 'alert-success', 2000);
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
onclick: () => Toast('Settings opened', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🚪',
|
||||
label: 'Logout',
|
||||
onclick: () => Toast('Logged out', 'alert-warning', 2000)
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(AccountDemo, '#demo-account');
|
||||
```
|
||||
|
||||
### Collapsible Sidebar
|
||||
|
||||
<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-collapsible" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CollapsibleDemo = () => {
|
||||
const collapsed = $(false);
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Div({ class: 'flex gap-4' }, [
|
||||
Div({ class: `transition-all duration-300 ${collapsed() ? 'w-16' : 'w-64'}` }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm mb-2 w-full',
|
||||
onclick: () => collapsed(!collapsed())
|
||||
}, collapsed() ? '→' : '←'),
|
||||
Menu({
|
||||
class: `rounded-box ${collapsed() ? 'menu-compact' : ''}`,
|
||||
items: [
|
||||
{ icon: '📊', label: collapsed() ? '' : 'Dashboard', active: () => activeItem() === 'dashboard', onclick: () => activeItem('dashboard') },
|
||||
{ icon: '👥', label: collapsed() ? '' : 'Users', active: () => activeItem() === 'users', onclick: () => activeItem('users') },
|
||||
{ icon: '📁', label: collapsed() ? '' : 'Files', active: () => activeItem() === 'files', onclick: () => activeItem('files') },
|
||||
{ icon: '⚙️', label: collapsed() ? '' : 'Settings', active: () => activeItem() === 'settings', onclick: () => activeItem('settings') }
|
||||
]
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'alert alert-info' }, () => `Selected: ${activeItem()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(CollapsibleDemo, '#demo-collapsible');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const items = [
|
||||
{ label: 'Item 1' },
|
||||
{ label: 'Item 2' },
|
||||
{ label: 'Item 3', children: [
|
||||
{ label: 'Subitem 1' },
|
||||
{ label: 'Subitem 2' }
|
||||
]}
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-8' }, [
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Default'),
|
||||
Menu({ items })
|
||||
]),
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Compact'),
|
||||
Menu({ items, class: 'menu-compact' })
|
||||
]),
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'With Shadow'),
|
||||
Menu({ items, class: 'shadow-lg' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initMenuExamples = () => {
|
||||
|
||||
// 1. Basic Menu
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const activeItem = $('home');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
label: 'Home',
|
||||
active: () => activeItem() === 'home',
|
||||
onclick: () => activeItem('home')
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
active: () => activeItem() === 'about',
|
||||
onclick: () => activeItem('about')
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
active: () => activeItem() === 'contact',
|
||||
onclick: () => activeItem('contact')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Icons
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
icon: '🏠',
|
||||
label: 'Dashboard',
|
||||
active: () => activeItem() === 'dashboard',
|
||||
onclick: () => activeItem('dashboard')
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
label: 'Analytics',
|
||||
active: () => activeItem() === 'analytics',
|
||||
onclick: () => activeItem('analytics')
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
active: () => activeItem() === 'settings',
|
||||
onclick: () => activeItem('settings')
|
||||
},
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'Profile',
|
||||
active: () => activeItem() === 'profile',
|
||||
onclick: () => activeItem('profile')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 3. Nested Menu
|
||||
const nestedTarget = document.querySelector('#demo-nested');
|
||||
if (nestedTarget && !nestedTarget.hasChildNodes()) {
|
||||
const NestedDemo = () => {
|
||||
const activeItem = $('products');
|
||||
|
||||
return Menu({
|
||||
items: [
|
||||
{
|
||||
label: 'Dashboard',
|
||||
onclick: () => activeItem('dashboard'),
|
||||
active: () => activeItem() === 'dashboard'
|
||||
},
|
||||
{
|
||||
label: 'Products',
|
||||
icon: '📦',
|
||||
open: true,
|
||||
children: [
|
||||
{
|
||||
label: 'All Products',
|
||||
onclick: () => activeItem('all-products'),
|
||||
active: () => activeItem() === 'all-products'
|
||||
},
|
||||
{
|
||||
label: 'Add New',
|
||||
onclick: () => activeItem('add-product'),
|
||||
active: () => activeItem() === 'add-product'
|
||||
},
|
||||
{
|
||||
label: 'Categories',
|
||||
children: [
|
||||
{
|
||||
label: 'Electronics',
|
||||
onclick: () => activeItem('electronics'),
|
||||
active: () => activeItem() === 'electronics'
|
||||
},
|
||||
{
|
||||
label: 'Clothing',
|
||||
onclick: () => activeItem('clothing'),
|
||||
active: () => activeItem() === 'clothing'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Orders',
|
||||
icon: '📋',
|
||||
onclick: () => activeItem('orders'),
|
||||
active: () => activeItem() === 'orders'
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: '⚙️',
|
||||
onclick: () => activeItem('settings'),
|
||||
active: () => activeItem() === 'settings'
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(NestedDemo, nestedTarget);
|
||||
}
|
||||
|
||||
// 4. Horizontal Menu
|
||||
const horizontalTarget = document.querySelector('#demo-horizontal');
|
||||
if (horizontalTarget && !horizontalTarget.hasChildNodes()) {
|
||||
const HorizontalDemo = () => {
|
||||
const activeItem = $('home');
|
||||
|
||||
return Menu({
|
||||
class: 'menu-horizontal rounded-box',
|
||||
items: [
|
||||
{
|
||||
label: 'Home',
|
||||
active: () => activeItem() === 'home',
|
||||
onclick: () => activeItem('home')
|
||||
},
|
||||
{
|
||||
label: 'Products',
|
||||
children: [
|
||||
{ label: 'Electronics', onclick: () => activeItem('electronics') },
|
||||
{ label: 'Clothing', onclick: () => activeItem('clothing') },
|
||||
{ label: 'Books', onclick: () => activeItem('books') }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'About',
|
||||
onclick: () => activeItem('about'),
|
||||
active: () => activeItem() === 'about'
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
onclick: () => activeItem('contact'),
|
||||
active: () => activeItem() === 'contact'
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(HorizontalDemo, horizontalTarget);
|
||||
}
|
||||
|
||||
// 5. Sidebar Menu
|
||||
const sidebarTarget = document.querySelector('#demo-sidebar');
|
||||
if (sidebarTarget && !sidebarTarget.hasChildNodes()) {
|
||||
const SidebarDemo = () => {
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Div({ class: 'flex' }, [
|
||||
Div({ class: 'w-64' }, [
|
||||
Menu({
|
||||
class: 'rounded-box w-full',
|
||||
items: [
|
||||
{
|
||||
icon: '📊',
|
||||
label: 'Dashboard',
|
||||
active: () => activeItem() === 'dashboard',
|
||||
onclick: () => activeItem('dashboard')
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
label: 'Users',
|
||||
children: [
|
||||
{
|
||||
label: 'All Users',
|
||||
onclick: () => activeItem('all-users'),
|
||||
active: () => activeItem() === 'all-users'
|
||||
},
|
||||
{
|
||||
label: 'Add User',
|
||||
onclick: () => activeItem('add-user'),
|
||||
active: () => activeItem() === 'add-user'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '📁',
|
||||
label: 'Files',
|
||||
onclick: () => activeItem('files'),
|
||||
active: () => activeItem() === 'files'
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
onclick: () => activeItem('settings'),
|
||||
active: () => activeItem() === 'settings'
|
||||
}
|
||||
]
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex-1 p-4' }, [
|
||||
Div({ class: 'alert alert-info' }, () => `Current page: ${activeItem()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SidebarDemo, sidebarTarget);
|
||||
}
|
||||
|
||||
// 6. Account Menu
|
||||
const accountTarget = document.querySelector('#demo-account');
|
||||
if (accountTarget && !accountTarget.hasChildNodes()) {
|
||||
const AccountDemo = () => {
|
||||
const [notifications, setNotifications] = $(3);
|
||||
|
||||
return Menu({
|
||||
class: 'rounded-box w-56',
|
||||
items: [
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'My Profile',
|
||||
onclick: () => Toast('Profile clicked', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📧',
|
||||
label: 'Messages',
|
||||
badge: '3',
|
||||
onclick: () => Toast('Messages opened', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
label: 'Notifications',
|
||||
badge: () => notifications(),
|
||||
onclick: () => {
|
||||
setNotifications(0);
|
||||
Toast('Notifications cleared', 'alert-success', 2000);
|
||||
}
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
label: 'Settings',
|
||||
onclick: () => Toast('Settings opened', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🚪',
|
||||
label: 'Logout',
|
||||
onclick: () => Toast('Logged out', 'alert-warning', 2000)
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(AccountDemo, accountTarget);
|
||||
}
|
||||
|
||||
// 7. Collapsible Sidebar
|
||||
const collapsibleTarget = document.querySelector('#demo-collapsible');
|
||||
if (collapsibleTarget && !collapsibleTarget.hasChildNodes()) {
|
||||
const CollapsibleDemo = () => {
|
||||
const collapsed = $(false);
|
||||
const activeItem = $('dashboard');
|
||||
|
||||
return Div({ class: 'flex gap-4' }, [
|
||||
Div({ class: `transition-all duration-300 ${collapsed() ? 'w-16' : 'w-64'}` }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm mb-2 w-full',
|
||||
onclick: () => collapsed(!collapsed())
|
||||
}, collapsed() ? '→' : '←'),
|
||||
Menu({
|
||||
class: `rounded-box ${collapsed() ? 'menu-compact' : ''}`,
|
||||
items: [
|
||||
{ icon: '📊', label: collapsed() ? '' : 'Dashboard', active: () => activeItem() === 'dashboard', onclick: () => activeItem('dashboard') },
|
||||
{ icon: '👥', label: collapsed() ? '' : 'Users', active: () => activeItem() === 'users', onclick: () => activeItem('users') },
|
||||
{ icon: '📁', label: collapsed() ? '' : 'Files', active: () => activeItem() === 'files', onclick: () => activeItem('files') },
|
||||
{ icon: '⚙️', label: collapsed() ? '' : 'Settings', active: () => activeItem() === 'settings', onclick: () => activeItem('settings') }
|
||||
]
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex-1' }, [
|
||||
Div({ class: 'alert alert-info' }, () => `Selected: ${activeItem()}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(CollapsibleDemo, collapsibleTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const items = [
|
||||
{ label: 'Item 1' },
|
||||
{ label: 'Item 2' },
|
||||
{ label: 'Item 3', children: [
|
||||
{ label: 'Subitem 1' },
|
||||
{ label: 'Subitem 2' }
|
||||
]}
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-8' }, [
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Default'),
|
||||
Menu({ items })
|
||||
]),
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Compact'),
|
||||
Menu({ items, class: 'menu-compact' })
|
||||
]),
|
||||
Div({ class: 'w-48' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'With Shadow'),
|
||||
Menu({ items, class: 'shadow-lg' })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initMenuExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initMenuExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
667
docs/components_old/modal.md
Normal file
667
docs/components_old/modal.md
Normal file
@@ -0,0 +1,667 @@
|
||||
# Modal
|
||||
|
||||
Modal dialog component for displaying content in an overlay with customizable actions and backdrop.
|
||||
|
||||
## Tag
|
||||
|
||||
`Modal`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `open` | `boolean \| Signal<boolean>` | `false` | Modal visibility state |
|
||||
| `title` | `string \| VNode \| Signal` | `-` | Modal title text |
|
||||
| `buttons` | `Array<VNode> \| VNode` | `-` | Action buttons to display (auto-closes on click) |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `string \| VNode` | `-` | Modal content |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Modal
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Open Modal'),
|
||||
Modal({
|
||||
open: isOpen,
|
||||
title: 'Basic Modal',
|
||||
buttons: Button({ onclick: () => isOpen(false) }, 'Close')
|
||||
}, [
|
||||
Div({ class: 'py-4' }, 'This is a basic modal dialog. You can put any content here.')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Modal with Actions
|
||||
|
||||
<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-actions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ActionsDemo = () => {
|
||||
const isOpen = $(false);
|
||||
const confirmed = $(false);
|
||||
|
||||
const handleConfirm = () => {
|
||||
confirmed(true);
|
||||
isOpen(false);
|
||||
Toast('Action confirmed!', 'alert-success', 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Confirm Action'),
|
||||
() => confirmed() ? Alert({
|
||||
type: 'success',
|
||||
message: 'You confirmed the action!'
|
||||
}) : null,
|
||||
Modal({
|
||||
open: isOpen,
|
||||
title: 'Confirm Action',
|
||||
buttons: [
|
||||
Button({
|
||||
class: 'btn btn-ghost',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel'),
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: handleConfirm
|
||||
}, 'Confirm')
|
||||
]
|
||||
}, [
|
||||
Div({ class: 'py-4' }, 'Are you sure you want to perform this action? This cannot be undone.')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ActionsDemo, '#demo-actions');
|
||||
```
|
||||
|
||||
### Form Modal
|
||||
|
||||
<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-form" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FormModal = () => {
|
||||
const isOpen = $(false);
|
||||
const name = $('');
|
||||
const email = $('');
|
||||
const submitted = $(false);
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (name() && email()) {
|
||||
submitted(true);
|
||||
isOpen(false);
|
||||
Toast(`Welcome ${name()}!`, 'alert-success', 2000);
|
||||
setTimeout(() => submitted(false), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Sign Up'),
|
||||
() => submitted() ? Alert({
|
||||
type: 'success',
|
||||
message: 'Account created successfully!'
|
||||
}) : null,
|
||||
Modal({
|
||||
open: isOpen,
|
||||
title: 'Create Account',
|
||||
buttons: [
|
||||
Button({
|
||||
class: 'btn btn-ghost',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel'),
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: handleSubmit
|
||||
}, 'Sign Up')
|
||||
]
|
||||
}, [
|
||||
Div({ class: 'flex flex-col gap-4 py-2' }, [
|
||||
Input({
|
||||
label: 'Full Name',
|
||||
value: name,
|
||||
placeholder: 'Enter your name',
|
||||
oninput: (e) => name(e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
placeholder: 'Enter your email',
|
||||
oninput: (e) => email(e.target.value)
|
||||
})
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(FormModal, '#demo-form');
|
||||
```
|
||||
|
||||
### Confirmation Modal
|
||||
|
||||
<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-confirm" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ConfirmDemo = () => {
|
||||
const isOpen = $(false);
|
||||
const items = $([
|
||||
{ id: 1, name: 'Document A' },
|
||||
{ id: 2, name: 'Document B' },
|
||||
{ id: 3, name: 'Document C' }
|
||||
]);
|
||||
const pendingDelete = $(null);
|
||||
|
||||
const confirmDelete = (item) => {
|
||||
pendingDelete(item);
|
||||
isOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
items(items().filter(i => i.id !== pendingDelete().id));
|
||||
isOpen(false);
|
||||
Toast(`Deleted: ${pendingDelete().name}`, 'alert-info', 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex flex-col gap-2' }, items().map(item =>
|
||||
Div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [
|
||||
Span({}, item.name),
|
||||
Button({
|
||||
class: 'btn btn-xs btn-error',
|
||||
onclick: () => confirmDelete(item)
|
||||
}, 'Delete')
|
||||
])
|
||||
)),
|
||||
Modal({
|
||||
open: isOpen,
|
||||
title: 'Delete Confirmation',
|
||||
buttons: [
|
||||
Button({
|
||||
class: 'btn btn-ghost',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel'),
|
||||
Button({
|
||||
class: 'btn btn-error',
|
||||
onclick: handleDelete
|
||||
}, 'Delete')
|
||||
]
|
||||
}, [
|
||||
Div({ class: 'py-4' }, () => `Are you sure you want to delete "${pendingDelete()?.name}"? This action cannot be undone.`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ConfirmDemo, '#demo-confirm');
|
||||
```
|
||||
|
||||
### Large Content Modal
|
||||
|
||||
<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-large" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const LargeDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Open Large Modal'),
|
||||
Modal({
|
||||
open: isOpen,
|
||||
title: 'Terms and Conditions',
|
||||
buttons: Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'I Agree')
|
||||
}, [
|
||||
Div({ class: 'py-4 max-h-96 overflow-y-auto' }, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Div({ class: 'text-sm' }, [
|
||||
Div({ class: 'font-bold mb-2' }, '1. Introduction'),
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.'
|
||||
]),
|
||||
Div({ class: 'text-sm' }, [
|
||||
Div({ class: 'font-bold mb-2' }, '2. User Obligations'),
|
||||
'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.'
|
||||
]),
|
||||
Div({ class: 'text-sm' }, [
|
||||
Div({ class: 'font-bold mb-2' }, '3. Privacy Policy'),
|
||||
'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.'
|
||||
]),
|
||||
Div({ class: 'text-sm' }, [
|
||||
Div({ class: 'font-bold mb-2' }, '4. Termination'),
|
||||
'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.'
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(LargeDemo, '#demo-large');
|
||||
```
|
||||
|
||||
### Multiple Modals
|
||||
|
||||
<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-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const MultipleDemo = () => {
|
||||
const modal1 = $(false);
|
||||
const modal2 = $(false);
|
||||
const modal3 = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Button({ class: 'btn', onclick: () => modal1(true) }, 'Info Modal'),
|
||||
Button({ class: 'btn', onclick: () => modal2(true) }, 'Success Modal'),
|
||||
Button({ class: 'btn', onclick: () => modal3(true) }, 'Warning Modal'),
|
||||
|
||||
Modal({
|
||||
open: modal1,
|
||||
title: 'Information',
|
||||
buttons: Button({ onclick: () => modal1(false) }, 'OK')
|
||||
}, 'This is an informational message.'),
|
||||
|
||||
Modal({
|
||||
open: modal2,
|
||||
title: 'Success!',
|
||||
buttons: Button({ onclick: () => modal2(false) }, 'Great!')
|
||||
}, 'Your operation was completed successfully.'),
|
||||
|
||||
Modal({
|
||||
open: modal3,
|
||||
title: 'Warning',
|
||||
buttons: Button({ onclick: () => modal3(false) }, 'Understood')
|
||||
}, 'Please review your input before proceeding.')
|
||||
]);
|
||||
};
|
||||
$mount(MultipleDemo, '#demo-multiple');
|
||||
```
|
||||
|
||||
### Custom Styled Modal
|
||||
|
||||
<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-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CustomDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Open Custom Modal'),
|
||||
Modal({
|
||||
open: isOpen,
|
||||
class: 'bg-gradient-to-r from-primary to-secondary text-primary-content'
|
||||
}, [
|
||||
Div({ class: 'text-center py-8' }, [
|
||||
Div({ class: 'text-6xl mb-4' }, '🎉'),
|
||||
Div({ class: 'text-2xl font-bold mb-2' }, 'Congratulations!'),
|
||||
Div({ class: 'mb-6' }, 'You\'ve successfully completed the tutorial.'),
|
||||
Button({
|
||||
class: 'btn btn-ghost bg-white/20 hover:bg-white/30',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Get Started')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(CustomDemo, '#demo-custom');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initModalExamples = () => {
|
||||
|
||||
// 1. Basic Modal
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Open Modal'),
|
||||
Modal({
|
||||
open: isOpen,
|
||||
title: 'Basic Modal',
|
||||
buttons: Button({ onclick: () => isOpen(false) }, 'Close')
|
||||
}, [
|
||||
Div({ class: 'py-4' }, 'This is a basic modal dialog. You can put any content here.')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Modal with Actions
|
||||
const actionsTarget = document.querySelector('#demo-actions');
|
||||
if (actionsTarget && !actionsTarget.hasChildNodes()) {
|
||||
const ActionsDemo = () => {
|
||||
const isOpen = $(false);
|
||||
const confirmed = $(false);
|
||||
|
||||
const handleConfirm = () => {
|
||||
confirmed(true);
|
||||
isOpen(false);
|
||||
Toast('Action confirmed!', 'alert-success', 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Confirm Action'),
|
||||
() => confirmed() ? Alert({
|
||||
type: 'success',
|
||||
message: 'You confirmed the action!'
|
||||
}) : null,
|
||||
Modal({
|
||||
open: isOpen,
|
||||
title: 'Confirm Action',
|
||||
buttons: [
|
||||
Button({
|
||||
class: 'btn btn-ghost',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel'),
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: handleConfirm
|
||||
}, 'Confirm')
|
||||
]
|
||||
}, [
|
||||
Div({ class: 'py-4' }, 'Are you sure you want to perform this action? This cannot be undone.')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ActionsDemo, actionsTarget);
|
||||
}
|
||||
|
||||
// 3. Form Modal
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
const FormModal = () => {
|
||||
const isOpen = $(false);
|
||||
const name = $('');
|
||||
const email = $('');
|
||||
const submitted = $(false);
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (name() && email()) {
|
||||
submitted(true);
|
||||
isOpen(false);
|
||||
Toast(`Welcome ${name()}!`, 'alert-success', 2000);
|
||||
setTimeout(() => submitted(false), 3000);
|
||||
}
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Sign Up'),
|
||||
() => submitted() ? Alert({
|
||||
type: 'success',
|
||||
message: 'Account created successfully!'
|
||||
}) : null,
|
||||
Modal({
|
||||
open: isOpen,
|
||||
title: 'Create Account',
|
||||
buttons: [
|
||||
Button({
|
||||
class: 'btn btn-ghost',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel'),
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: handleSubmit
|
||||
}, 'Sign Up')
|
||||
]
|
||||
}, [
|
||||
Div({ class: 'flex flex-col gap-4 py-2' }, [
|
||||
Input({
|
||||
label: 'Full Name',
|
||||
value: name,
|
||||
placeholder: 'Enter your name',
|
||||
oninput: (e) => name(e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
placeholder: 'Enter your email',
|
||||
oninput: (e) => email(e.target.value)
|
||||
})
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(FormModal, formTarget);
|
||||
}
|
||||
|
||||
// 4. Confirmation Modal
|
||||
const confirmTarget = document.querySelector('#demo-confirm');
|
||||
if (confirmTarget && !confirmTarget.hasChildNodes()) {
|
||||
const ConfirmDemo = () => {
|
||||
const isOpen = $(false);
|
||||
const items = $([
|
||||
{ id: 1, name: 'Document A' },
|
||||
{ id: 2, name: 'Document B' },
|
||||
{ id: 3, name: 'Document C' }
|
||||
]);
|
||||
const pendingDelete = $(null);
|
||||
|
||||
const confirmDelete = (item) => {
|
||||
pendingDelete(item);
|
||||
isOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
items(items().filter(i => i.id !== pendingDelete().id));
|
||||
isOpen(false);
|
||||
Toast(`Deleted: ${pendingDelete().name}`, 'alert-info', 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex flex-col gap-2' }, items().map(item =>
|
||||
Div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [
|
||||
Span({}, item.name),
|
||||
Button({
|
||||
class: 'btn btn-xs btn-error',
|
||||
onclick: () => confirmDelete(item)
|
||||
}, 'Delete')
|
||||
])
|
||||
)),
|
||||
Modal({
|
||||
open: isOpen,
|
||||
title: 'Delete Confirmation',
|
||||
buttons: [
|
||||
Button({
|
||||
class: 'btn btn-ghost',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Cancel'),
|
||||
Button({
|
||||
class: 'btn btn-error',
|
||||
onclick: handleDelete
|
||||
}, 'Delete')
|
||||
]
|
||||
}, [
|
||||
Div({ class: 'py-4' }, () => `Are you sure you want to delete "${pendingDelete()?.name}"? This action cannot be undone.`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ConfirmDemo, confirmTarget);
|
||||
}
|
||||
|
||||
// 5. Large Content Modal
|
||||
const largeTarget = document.querySelector('#demo-large');
|
||||
if (largeTarget && !largeTarget.hasChildNodes()) {
|
||||
const LargeDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Open Large Modal'),
|
||||
Modal({
|
||||
open: isOpen,
|
||||
title: 'Terms and Conditions',
|
||||
buttons: Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'I Agree')
|
||||
}, [
|
||||
Div({ class: 'py-4 max-h-96 overflow-y-auto' }, [
|
||||
Div({ class: 'space-y-4' }, [
|
||||
Div({ class: 'text-sm' }, [
|
||||
Div({ class: 'font-bold mb-2' }, '1. Introduction'),
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.'
|
||||
]),
|
||||
Div({ class: 'text-sm' }, [
|
||||
Div({ class: 'font-bold mb-2' }, '2. User Obligations'),
|
||||
'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.'
|
||||
]),
|
||||
Div({ class: 'text-sm' }, [
|
||||
Div({ class: 'font-bold mb-2' }, '3. Privacy Policy'),
|
||||
'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.'
|
||||
]),
|
||||
Div({ class: 'text-sm' }, [
|
||||
Div({ class: 'font-bold mb-2' }, '4. Termination'),
|
||||
'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.'
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(LargeDemo, largeTarget);
|
||||
}
|
||||
|
||||
// 6. Multiple Modals
|
||||
const multipleTarget = document.querySelector('#demo-multiple');
|
||||
if (multipleTarget && !multipleTarget.hasChildNodes()) {
|
||||
const MultipleDemo = () => {
|
||||
const modal1 = $(false);
|
||||
const modal2 = $(false);
|
||||
const modal3 = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Button({ class: 'btn', onclick: () => modal1(true) }, 'Info Modal'),
|
||||
Button({ class: 'btn', onclick: () => modal2(true) }, 'Success Modal'),
|
||||
Button({ class: 'btn', onclick: () => modal3(true) }, 'Warning Modal'),
|
||||
|
||||
Modal({
|
||||
open: modal1,
|
||||
title: 'Information',
|
||||
buttons: Button({ onclick: () => modal1(false) }, 'OK')
|
||||
}, 'This is an informational message.'),
|
||||
|
||||
Modal({
|
||||
open: modal2,
|
||||
title: 'Success!',
|
||||
buttons: Button({ onclick: () => modal2(false) }, 'Great!')
|
||||
}, 'Your operation was completed successfully.'),
|
||||
|
||||
Modal({
|
||||
open: modal3,
|
||||
title: 'Warning',
|
||||
buttons: Button({ onclick: () => modal3(false) }, 'Understood')
|
||||
}, 'Please review your input before proceeding.')
|
||||
]);
|
||||
};
|
||||
$mount(MultipleDemo, multipleTarget);
|
||||
}
|
||||
|
||||
// 7. Custom Styled Modal
|
||||
const customTarget = document.querySelector('#demo-custom');
|
||||
if (customTarget && !customTarget.hasChildNodes()) {
|
||||
const CustomDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => isOpen(true)
|
||||
}, 'Open Custom Modal'),
|
||||
Modal({
|
||||
open: isOpen,
|
||||
class: 'bg-gradient-to-r from-primary to-secondary text-primary-content'
|
||||
}, [
|
||||
Div({ class: 'text-center py-8' }, [
|
||||
Div({ class: 'text-6xl mb-4' }, '🎉'),
|
||||
Div({ class: 'text-2xl font-bold mb-2' }, 'Congratulations!'),
|
||||
Div({ class: 'mb-6' }, 'You\'ve successfully completed the tutorial.'),
|
||||
Button({
|
||||
class: 'btn btn-ghost bg-white/20 hover:bg-white/30',
|
||||
onclick: () => isOpen(false)
|
||||
}, 'Get Started')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(CustomDemo, customTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initModalExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initModalExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
551
docs/components_old/navbar.md
Normal file
551
docs/components_old/navbar.md
Normal file
@@ -0,0 +1,551 @@
|
||||
# Navbar
|
||||
|
||||
Navigation bar component for creating responsive headers with logo, navigation links, and actions.
|
||||
|
||||
## Tag
|
||||
|
||||
`Navbar`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `VNode \| Array<VNode>` | `-` | Navbar content (should contain left, center, right sections) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Navbar
|
||||
|
||||
<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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Logo')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Span({ class: 'text-sm' }, 'Navigation Items')
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm' }, 'Login')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Navigation Links
|
||||
|
||||
<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-links" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const LinksDemo = () => {
|
||||
const active = $('home');
|
||||
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('home')
|
||||
}, 'Home'),
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'about' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('about')
|
||||
}, 'About'),
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'contact' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('contact')
|
||||
}, 'Contact')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Sign Up')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(LinksDemo, '#demo-links');
|
||||
```
|
||||
|
||||
### With Dropdown Menu
|
||||
|
||||
<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-dropdown" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DropdownDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Div({ class: 'dropdown' }, [
|
||||
Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost lg:hidden' }, [
|
||||
Span({ class: 'sr-only' }, 'Open menu'),
|
||||
Icons.iconInfo
|
||||
]),
|
||||
Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
|
||||
Div({ class: 'menu-item' }, 'Home'),
|
||||
Div({ class: 'menu-item' }, 'About'),
|
||||
Div({ class: 'menu-item' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Div({ class: 'menu-item' }, 'Home'),
|
||||
Div({ class: 'menu-item' }, 'About'),
|
||||
Div({ class: 'menu-item' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Login')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DropdownDemo, '#demo-dropdown');
|
||||
```
|
||||
|
||||
### With Search
|
||||
|
||||
<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-search" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const SearchDemo = () => {
|
||||
const searchQuery = $('');
|
||||
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center' }, [
|
||||
Div({ class: 'form-control' }, [
|
||||
Input({
|
||||
placeholder: 'Search...',
|
||||
value: searchQuery,
|
||||
class: 'input input-bordered w-48 md:w-auto',
|
||||
oninput: (e) => searchQuery(e.target.value)
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '🔔'),
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '👤')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SearchDemo, '#demo-search');
|
||||
```
|
||||
|
||||
### With Avatar and Dropdown
|
||||
|
||||
<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-avatar" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AvatarDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Div({ class: 'menu-item' }, 'Dashboard'),
|
||||
Div({ class: 'menu-item' }, 'Projects'),
|
||||
Div({ class: 'menu-item' }, 'Tasks')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Div({ class: 'dropdown dropdown-end' }, [
|
||||
Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost btn-circle avatar' }, [
|
||||
Div({ class: 'w-8 rounded-full bg-primary text-primary-content flex items-center justify-center' }, 'JD')
|
||||
]),
|
||||
Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
|
||||
Div({ class: 'menu-item' }, 'Profile'),
|
||||
Div({ class: 'menu-item' }, 'Settings'),
|
||||
Div({ class: 'menu-item' }, 'Logout')
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AvatarDemo, '#demo-avatar');
|
||||
```
|
||||
|
||||
### Responsive Navbar
|
||||
|
||||
<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-responsive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ResponsiveDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col' }, [
|
||||
Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle lg:hidden',
|
||||
onclick: () => isOpen(!isOpen())
|
||||
}, '☰')
|
||||
]),
|
||||
Div({ class: 'navbar-center' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '🔔')
|
||||
])
|
||||
]),
|
||||
() => isOpen() ? Div({ class: 'flex flex-col gap-2 p-4 bg-base-200 rounded-box mt-2' }, [
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'About'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Services'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
|
||||
]) : null
|
||||
]);
|
||||
};
|
||||
$mount(ResponsiveDemo, '#demo-responsive');
|
||||
```
|
||||
|
||||
### With Brand and Actions
|
||||
|
||||
<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-brand" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BrandDemo = () => {
|
||||
return Navbar({ class: 'rounded-box bg-primary text-primary-content' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Brand')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Span({ class: 'text-sm' }, 'Features'),
|
||||
Span({ class: 'text-sm' }, 'Pricing'),
|
||||
Span({ class: 'text-sm' }, 'About')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm' }, 'Login'),
|
||||
Button({ class: 'btn btn-outline btn-sm ml-2' }, 'Sign Up')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BrandDemo, '#demo-brand');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Navbar'),
|
||||
Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({}, 'Start')]),
|
||||
Div({ class: 'navbar-center' }, [Span({}, 'Center')]),
|
||||
Div({ class: 'navbar-end' }, [Span({}, 'End')])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
|
||||
Navbar({ class: 'rounded-box shadow-lg' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({}, 'Logo')]),
|
||||
Div({ class: 'navbar-end' }, [Button({ class: 'btn btn-sm' }, 'Button')])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Background'),
|
||||
Navbar({ class: 'rounded-box bg-base-300' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({ class: 'font-bold' }, 'Colored')]),
|
||||
Div({ class: 'navbar-end' }, [Span({ class: 'text-sm' }, 'Info')])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initNavbarExamples = () => {
|
||||
|
||||
// 1. Basic Navbar
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Logo')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Span({ class: 'text-sm' }, 'Navigation Items')
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm' }, 'Login')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Navigation Links
|
||||
const linksTarget = document.querySelector('#demo-links');
|
||||
if (linksTarget && !linksTarget.hasChildNodes()) {
|
||||
const LinksDemo = () => {
|
||||
const active = $('home');
|
||||
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'home' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('home')
|
||||
}, 'Home'),
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'about' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('about')
|
||||
}, 'About'),
|
||||
Button({
|
||||
class: `btn btn-ghost btn-sm ${active() === 'contact' ? 'btn-active' : ''}`,
|
||||
onclick: () => active('contact')
|
||||
}, 'Contact')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Sign Up')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(LinksDemo, linksTarget);
|
||||
}
|
||||
|
||||
// 3. With Dropdown Menu
|
||||
const dropdownTarget = document.querySelector('#demo-dropdown');
|
||||
if (dropdownTarget && !dropdownTarget.hasChildNodes()) {
|
||||
const DropdownDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Div({ class: 'dropdown' }, [
|
||||
Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost lg:hidden' }, [
|
||||
Span({ class: 'sr-only' }, 'Open menu'),
|
||||
Icons.iconInfo
|
||||
]),
|
||||
Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
|
||||
Div({ class: 'menu-item' }, 'Home'),
|
||||
Div({ class: 'menu-item' }, 'About'),
|
||||
Div({ class: 'menu-item' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Div({ class: 'menu-item' }, 'Home'),
|
||||
Div({ class: 'menu-item' }, 'About'),
|
||||
Div({ class: 'menu-item' }, 'Contact')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Login')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DropdownDemo, dropdownTarget);
|
||||
}
|
||||
|
||||
// 4. With Search
|
||||
const searchTarget = document.querySelector('#demo-search');
|
||||
if (searchTarget && !searchTarget.hasChildNodes()) {
|
||||
const SearchDemo = () => {
|
||||
const searchQuery = $('');
|
||||
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center' }, [
|
||||
Div({ class: 'form-control' }, [
|
||||
Input({
|
||||
placeholder: 'Search...',
|
||||
value: searchQuery,
|
||||
class: 'input input-bordered w-48 md:w-auto',
|
||||
oninput: (e) => searchQuery(e.target.value)
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '🔔'),
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '👤')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(SearchDemo, searchTarget);
|
||||
}
|
||||
|
||||
// 5. With Avatar and Dropdown
|
||||
const avatarTarget = document.querySelector('#demo-avatar');
|
||||
if (avatarTarget && !avatarTarget.hasChildNodes()) {
|
||||
const AvatarDemo = () => {
|
||||
return Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Div({ class: 'menu-item' }, 'Dashboard'),
|
||||
Div({ class: 'menu-item' }, 'Projects'),
|
||||
Div({ class: 'menu-item' }, 'Tasks')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Div({ class: 'dropdown dropdown-end' }, [
|
||||
Div({ tabindex: 0, role: 'button', class: 'btn btn-ghost btn-circle avatar' }, [
|
||||
Div({ class: 'w-8 rounded-full bg-primary text-primary-content flex items-center justify-center' }, 'JD')
|
||||
]),
|
||||
Div({ tabindex: 0, class: 'dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow' }, [
|
||||
Div({ class: 'menu-item' }, 'Profile'),
|
||||
Div({ class: 'menu-item' }, 'Settings'),
|
||||
Div({ class: 'menu-item' }, 'Logout')
|
||||
])
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AvatarDemo, avatarTarget);
|
||||
}
|
||||
|
||||
// 6. Responsive Navbar
|
||||
const responsiveTarget = document.querySelector('#demo-responsive');
|
||||
if (responsiveTarget && !responsiveTarget.hasChildNodes()) {
|
||||
const ResponsiveDemo = () => {
|
||||
const isOpen = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col' }, [
|
||||
Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-circle lg:hidden',
|
||||
onclick: () => isOpen(!isOpen())
|
||||
}, '☰')
|
||||
]),
|
||||
Div({ class: 'navbar-center' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'MyApp')
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '🔔')
|
||||
])
|
||||
]),
|
||||
() => isOpen() ? Div({ class: 'flex flex-col gap-2 p-4 bg-base-200 rounded-box mt-2' }, [
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Home'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'About'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Services'),
|
||||
Button({ class: 'btn btn-ghost justify-start' }, 'Contact')
|
||||
]) : null
|
||||
]);
|
||||
};
|
||||
$mount(ResponsiveDemo, responsiveTarget);
|
||||
}
|
||||
|
||||
// 7. With Brand and Actions
|
||||
const brandTarget = document.querySelector('#demo-brand');
|
||||
if (brandTarget && !brandTarget.hasChildNodes()) {
|
||||
const BrandDemo = () => {
|
||||
return Navbar({ class: 'rounded-box bg-primary text-primary-content' }, [
|
||||
Div({ class: 'navbar-start' }, [
|
||||
Span({ class: 'text-xl font-bold' }, 'Brand')
|
||||
]),
|
||||
Div({ class: 'navbar-center hidden lg:flex' }, [
|
||||
Div({ class: 'menu menu-horizontal px-1' }, [
|
||||
Span({ class: 'text-sm' }, 'Features'),
|
||||
Span({ class: 'text-sm' }, 'Pricing'),
|
||||
Span({ class: 'text-sm' }, 'About')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'navbar-end' }, [
|
||||
Button({ class: 'btn btn-ghost btn-sm' }, 'Login'),
|
||||
Button({ class: 'btn btn-outline btn-sm ml-2' }, 'Sign Up')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BrandDemo, brandTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Navbar'),
|
||||
Navbar({ class: 'rounded-box' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({}, 'Start')]),
|
||||
Div({ class: 'navbar-center' }, [Span({}, 'Center')]),
|
||||
Div({ class: 'navbar-end' }, [Span({}, 'End')])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Shadow'),
|
||||
Navbar({ class: 'rounded-box shadow-lg' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({}, 'Logo')]),
|
||||
Div({ class: 'navbar-end' }, [Button({ class: 'btn btn-sm' }, 'Button')])
|
||||
]),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'With Background'),
|
||||
Navbar({ class: 'rounded-box bg-base-300' }, [
|
||||
Div({ class: 'navbar-start' }, [Span({ class: 'font-bold' }, 'Colored')]),
|
||||
Div({ class: 'navbar-end' }, [Span({ class: 'text-sm' }, 'Info')])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initNavbarExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initNavbarExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
740
docs/components_old/radio.md
Normal file
740
docs/components_old/radio.md
Normal file
@@ -0,0 +1,740 @@
|
||||
# Radio
|
||||
|
||||
Radio button component with label, tooltip support, and reactive group selection. All radios in the same group share a common `name` attribute for proper HTML semantics.
|
||||
|
||||
## Tag
|
||||
|
||||
`Radio`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `label` | `string` | `-` | Label text for the radio button |
|
||||
| `value` | `string \| Signal<string>` | `-` | Selected value signal for the group |
|
||||
| `radioValue` | `string` | `-` | Value of this radio button |
|
||||
| `name` | `string` | `-` | Group name (all radios in group should share this) |
|
||||
| `tooltip` | `string` | `-` | Tooltip text on hover |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `onclick` | `function` | `-` | Click event handler |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Radio Group
|
||||
|
||||
<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 flex-col gap-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const selected = $('option1');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Radio({
|
||||
label: 'Option 1',
|
||||
name: 'basic-group',
|
||||
value: selected,
|
||||
radioValue: 'option1',
|
||||
onclick: () => selected('option1')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option 2',
|
||||
name: 'basic-group',
|
||||
value: selected,
|
||||
radioValue: 'option2',
|
||||
onclick: () => selected('option2')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option 3',
|
||||
name: 'basic-group',
|
||||
value: selected,
|
||||
radioValue: 'option3',
|
||||
onclick: () => selected('option3')
|
||||
}),
|
||||
Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### 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 flex-col gap-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const TooltipDemo = () => {
|
||||
const selected = $('light');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Radio({
|
||||
label: 'Light mode',
|
||||
name: 'theme-group',
|
||||
value: selected,
|
||||
radioValue: 'light',
|
||||
tooltip: 'Light theme with white background',
|
||||
onclick: () => selected('light')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Dark mode',
|
||||
name: 'theme-group',
|
||||
value: selected,
|
||||
radioValue: 'dark',
|
||||
tooltip: 'Dark theme with black background',
|
||||
onclick: () => selected('dark')
|
||||
})
|
||||
]);
|
||||
};
|
||||
$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 flex-col gap-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DisabledDemo = () => {
|
||||
const selected = $('enabled');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Radio({
|
||||
label: 'Enabled option',
|
||||
name: 'disabled-group',
|
||||
value: selected,
|
||||
radioValue: 'enabled',
|
||||
onclick: () => selected('enabled')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Disabled option (cannot select)',
|
||||
name: 'disabled-group',
|
||||
value: selected,
|
||||
radioValue: 'disabled',
|
||||
disabled: true,
|
||||
onclick: () => selected('disabled')
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(DisabledDemo, '#demo-disabled');
|
||||
```
|
||||
|
||||
### Reactive Preview
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveDemo = () => {
|
||||
const size = $('medium');
|
||||
const color = $('blue');
|
||||
|
||||
const sizes = [
|
||||
{ value: 'small', label: 'Small' },
|
||||
{ value: 'medium', label: 'Medium' },
|
||||
{ value: 'large', label: 'Large' }
|
||||
];
|
||||
|
||||
const colors = [
|
||||
{ value: 'blue', label: 'Blue' },
|
||||
{ value: 'green', label: 'Green' },
|
||||
{ value: 'red', label: 'Red' }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Select size'),
|
||||
Div({ class: 'flex gap-4' }, sizes.map(s =>
|
||||
Radio({
|
||||
label: s.label,
|
||||
name: 'size-group',
|
||||
value: size,
|
||||
radioValue: s.value,
|
||||
onclick: () => size(s.value)
|
||||
})
|
||||
)),
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'Select color'),
|
||||
Div({ class: 'flex gap-4' }, colors.map(c =>
|
||||
Radio({
|
||||
label: c.label,
|
||||
name: 'color-group',
|
||||
value: color,
|
||||
radioValue: c.value,
|
||||
onclick: () => color(c.value)
|
||||
})
|
||||
)),
|
||||
Div({
|
||||
class: 'mt-4 p-4 rounded-lg text-center transition-all',
|
||||
style: () => {
|
||||
const sizeMap = { small: 'text-sm', medium: 'text-base', large: 'text-lg' };
|
||||
const colorMap = { blue: '#3b82f6', green: '#10b981', red: '#ef4444' };
|
||||
return `background-color: ${colorMap[color()]}; color: white; ${sizeMap[size()]}`;
|
||||
}
|
||||
}, () => `${size()} ${color()} preview`)
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Payment Method Selection
|
||||
|
||||
<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-payment" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PaymentDemo = () => {
|
||||
const method = $('credit');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Payment method'),
|
||||
Div({ class: 'flex flex-col gap-3' }, [
|
||||
Radio({
|
||||
label: '💳 Credit Card',
|
||||
name: 'payment-group',
|
||||
value: method,
|
||||
radioValue: 'credit',
|
||||
onclick: () => method('credit')
|
||||
}),
|
||||
Radio({
|
||||
label: '🏦 Bank Transfer',
|
||||
name: 'payment-group',
|
||||
value: method,
|
||||
radioValue: 'bank',
|
||||
onclick: () => method('bank')
|
||||
}),
|
||||
Radio({
|
||||
label: '📱 Digital Wallet',
|
||||
name: 'payment-group',
|
||||
value: method,
|
||||
radioValue: 'wallet',
|
||||
onclick: () => method('wallet')
|
||||
})
|
||||
]),
|
||||
Div({ class: 'alert alert-info mt-2' }, () => {
|
||||
const messages = {
|
||||
credit: 'You selected Credit Card. Enter your card details.',
|
||||
bank: 'You selected Bank Transfer. Use the provided account number.',
|
||||
wallet: 'You selected Digital Wallet. Scan the QR code to pay.'
|
||||
};
|
||||
return messages[method()];
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(PaymentDemo, '#demo-payment');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const primary = $('primary1');
|
||||
const secondary = $('secondary1');
|
||||
const accent = $('accent1');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'card bg-base-200 p-4' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Primary variant'),
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({
|
||||
label: 'Option A',
|
||||
name: 'primary-group',
|
||||
value: primary,
|
||||
radioValue: 'primary1',
|
||||
class: 'radio-primary',
|
||||
onclick: () => primary('primary1')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option B',
|
||||
name: 'primary-group',
|
||||
value: primary,
|
||||
radioValue: 'primary2',
|
||||
class: 'radio-primary',
|
||||
onclick: () => primary('primary2')
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'card bg-base-200 p-4' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Secondary variant'),
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({
|
||||
label: 'Option A',
|
||||
name: 'secondary-group',
|
||||
value: secondary,
|
||||
radioValue: 'secondary1',
|
||||
class: 'radio-secondary',
|
||||
onclick: () => secondary('secondary1')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option B',
|
||||
name: 'secondary-group',
|
||||
value: secondary,
|
||||
radioValue: 'secondary2',
|
||||
class: 'radio-secondary',
|
||||
onclick: () => secondary('secondary2')
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'card bg-base-200 p-4' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Accent variant'),
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({
|
||||
label: 'Option A',
|
||||
name: 'accent-group',
|
||||
value: accent,
|
||||
radioValue: 'accent1',
|
||||
class: 'radio-accent',
|
||||
onclick: () => accent('accent1')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option B',
|
||||
name: 'accent-group',
|
||||
value: accent,
|
||||
radioValue: 'accent2',
|
||||
class: 'radio-accent',
|
||||
onclick: () => accent('accent2')
|
||||
})
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
### Dynamic Options
|
||||
|
||||
<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-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DynamicDemo = () => {
|
||||
const category = $('cars');
|
||||
const selected = $('');
|
||||
|
||||
const options = {
|
||||
cars: [
|
||||
{ value: 'sedan', label: 'Sedan' },
|
||||
{ value: 'suv', label: 'SUV' },
|
||||
{ value: 'sports', label: 'Sports' }
|
||||
],
|
||||
colors: [
|
||||
{ value: 'red', label: 'Red' },
|
||||
{ value: 'blue', label: 'Blue' },
|
||||
{ value: 'black', label: 'Black' }
|
||||
]
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({
|
||||
label: 'Cars',
|
||||
name: 'category-group',
|
||||
value: category,
|
||||
radioValue: 'cars',
|
||||
onclick: () => {
|
||||
category('cars');
|
||||
selected('');
|
||||
}
|
||||
}),
|
||||
Radio({
|
||||
label: 'Colors',
|
||||
name: 'category-group',
|
||||
value: category,
|
||||
radioValue: 'colors',
|
||||
onclick: () => {
|
||||
category('colors');
|
||||
selected('');
|
||||
}
|
||||
})
|
||||
]),
|
||||
Div({ class: 'divider my-1' }),
|
||||
Div({ class: 'text-sm font-bold' }, () => `Select ${category()}`),
|
||||
Div({ class: 'flex flex-col gap-2' }, () =>
|
||||
options[category()].map(opt =>
|
||||
Radio({
|
||||
label: opt.label,
|
||||
name: 'dynamic-option-group',
|
||||
value: selected,
|
||||
radioValue: opt.value,
|
||||
onclick: () => selected(opt.value)
|
||||
})
|
||||
)
|
||||
),
|
||||
() => selected()
|
||||
? Div({ class: 'alert alert-success mt-2' }, () => `Selected ${category()}: ${selected()}`)
|
||||
: null
|
||||
]);
|
||||
};
|
||||
$mount(DynamicDemo, '#demo-dynamic');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initRadioExamples = () => {
|
||||
|
||||
// 1. Basic Radio Group
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const selected = $('option1');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Radio({
|
||||
label: 'Option 1',
|
||||
name: 'basic-group',
|
||||
value: selected,
|
||||
radioValue: 'option1',
|
||||
onclick: () => selected('option1')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option 2',
|
||||
name: 'basic-group',
|
||||
value: selected,
|
||||
radioValue: 'option2',
|
||||
onclick: () => selected('option2')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option 3',
|
||||
name: 'basic-group',
|
||||
value: selected,
|
||||
radioValue: 'option3',
|
||||
onclick: () => selected('option3')
|
||||
}),
|
||||
Div({ class: 'mt-2 text-sm opacity-70' }, () => `Selected: ${selected()}`)
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Tooltip
|
||||
const tooltipTarget = document.querySelector('#demo-tooltip');
|
||||
if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
|
||||
const TooltipDemo = () => {
|
||||
const selected = $('light');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Radio({
|
||||
label: 'Light mode',
|
||||
name: 'theme-group',
|
||||
value: selected,
|
||||
radioValue: 'light',
|
||||
tooltip: 'Light theme with white background',
|
||||
onclick: () => selected('light')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Dark mode',
|
||||
name: 'theme-group',
|
||||
value: selected,
|
||||
radioValue: 'dark',
|
||||
tooltip: 'Dark theme with black background',
|
||||
onclick: () => selected('dark')
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(TooltipDemo, tooltipTarget);
|
||||
}
|
||||
|
||||
// 3. Disabled State
|
||||
const disabledTarget = document.querySelector('#demo-disabled');
|
||||
if (disabledTarget && !disabledTarget.hasChildNodes()) {
|
||||
const DisabledDemo = () => {
|
||||
const selected = $('enabled');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Radio({
|
||||
label: 'Enabled option',
|
||||
name: 'disabled-group',
|
||||
value: selected,
|
||||
radioValue: 'enabled',
|
||||
onclick: () => selected('enabled')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Disabled option (cannot select)',
|
||||
name: 'disabled-group',
|
||||
value: selected,
|
||||
radioValue: 'disabled',
|
||||
disabled: true,
|
||||
onclick: () => selected('disabled')
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(DisabledDemo, disabledTarget);
|
||||
}
|
||||
|
||||
// 4. Reactive Preview
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const size = $('medium');
|
||||
const color = $('blue');
|
||||
|
||||
const sizes = [
|
||||
{ value: 'small', label: 'Small' },
|
||||
{ value: 'medium', label: 'Medium' },
|
||||
{ value: 'large', label: 'Large' }
|
||||
];
|
||||
|
||||
const colors = [
|
||||
{ value: 'blue', label: 'Blue' },
|
||||
{ value: 'green', label: 'Green' },
|
||||
{ value: 'red', label: 'Red' }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Select size'),
|
||||
Div({ class: 'flex gap-4' }, sizes.map(s =>
|
||||
Radio({
|
||||
label: s.label,
|
||||
name: 'size-group',
|
||||
value: size,
|
||||
radioValue: s.value,
|
||||
onclick: () => size(s.value)
|
||||
})
|
||||
)),
|
||||
Div({ class: 'text-sm font-bold mt-2' }, 'Select color'),
|
||||
Div({ class: 'flex gap-4' }, colors.map(c =>
|
||||
Radio({
|
||||
label: c.label,
|
||||
name: 'color-group',
|
||||
value: color,
|
||||
radioValue: c.value,
|
||||
onclick: () => color(c.value)
|
||||
})
|
||||
)),
|
||||
Div({
|
||||
class: 'mt-4 p-4 rounded-lg text-center transition-all',
|
||||
style: () => {
|
||||
const sizeMap = { small: 'text-sm', medium: 'text-base', large: 'text-lg' };
|
||||
const colorMap = { blue: '#3b82f6', green: '#10b981', red: '#ef4444' };
|
||||
return `background-color: ${colorMap[color()]}; color: white; ${sizeMap[size()]}`;
|
||||
}
|
||||
}, () => `${size()} ${color()} preview`)
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 5. Payment Method Selection
|
||||
const paymentTarget = document.querySelector('#demo-payment');
|
||||
if (paymentTarget && !paymentTarget.hasChildNodes()) {
|
||||
const PaymentDemo = () => {
|
||||
const method = $('credit');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Payment method'),
|
||||
Div({ class: 'flex flex-col gap-3' }, [
|
||||
Radio({
|
||||
label: '💳 Credit Card',
|
||||
name: 'payment-group',
|
||||
value: method,
|
||||
radioValue: 'credit',
|
||||
onclick: () => method('credit')
|
||||
}),
|
||||
Radio({
|
||||
label: '🏦 Bank Transfer',
|
||||
name: 'payment-group',
|
||||
value: method,
|
||||
radioValue: 'bank',
|
||||
onclick: () => method('bank')
|
||||
}),
|
||||
Radio({
|
||||
label: '📱 Digital Wallet',
|
||||
name: 'payment-group',
|
||||
value: method,
|
||||
radioValue: 'wallet',
|
||||
onclick: () => method('wallet')
|
||||
})
|
||||
]),
|
||||
Div({ class: 'alert alert-info mt-2' }, () => {
|
||||
const messages = {
|
||||
credit: 'You selected Credit Card. Enter your card details.',
|
||||
bank: 'You selected Bank Transfer. Use the provided account number.',
|
||||
wallet: 'You selected Digital Wallet. Scan the QR code to pay.'
|
||||
};
|
||||
return messages[method()];
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(PaymentDemo, paymentTarget);
|
||||
}
|
||||
|
||||
// 6. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const primary = $('primary1');
|
||||
const secondary = $('secondary1');
|
||||
const accent = $('accent1');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'card bg-base-200 p-4' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Primary variant'),
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({
|
||||
label: 'Option A',
|
||||
name: 'primary-group',
|
||||
value: primary,
|
||||
radioValue: 'primary1',
|
||||
class: 'radio-primary',
|
||||
onclick: () => primary('primary1')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option B',
|
||||
name: 'primary-group',
|
||||
value: primary,
|
||||
radioValue: 'primary2',
|
||||
class: 'radio-primary',
|
||||
onclick: () => primary('primary2')
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'card bg-base-200 p-4' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Secondary variant'),
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({
|
||||
label: 'Option A',
|
||||
name: 'secondary-group',
|
||||
value: secondary,
|
||||
radioValue: 'secondary1',
|
||||
class: 'radio-secondary',
|
||||
onclick: () => secondary('secondary1')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option B',
|
||||
name: 'secondary-group',
|
||||
value: secondary,
|
||||
radioValue: 'secondary2',
|
||||
class: 'radio-secondary',
|
||||
onclick: () => secondary('secondary2')
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'card bg-base-200 p-4' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Accent variant'),
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({
|
||||
label: 'Option A',
|
||||
name: 'accent-group',
|
||||
value: accent,
|
||||
radioValue: 'accent1',
|
||||
class: 'radio-accent',
|
||||
onclick: () => accent('accent1')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option B',
|
||||
name: 'accent-group',
|
||||
value: accent,
|
||||
radioValue: 'accent2',
|
||||
class: 'radio-accent',
|
||||
onclick: () => accent('accent2')
|
||||
})
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
|
||||
// 7. Dynamic Options
|
||||
const dynamicTarget = document.querySelector('#demo-dynamic');
|
||||
if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
|
||||
const DynamicDemo = () => {
|
||||
const category = $('cars');
|
||||
const selected = $('');
|
||||
|
||||
const options = {
|
||||
cars: [
|
||||
{ value: 'sedan', label: 'Sedan' },
|
||||
{ value: 'suv', label: 'SUV' },
|
||||
{ value: 'sports', label: 'Sports' }
|
||||
],
|
||||
colors: [
|
||||
{ value: 'red', label: 'Red' },
|
||||
{ value: 'blue', label: 'Blue' },
|
||||
{ value: 'black', label: 'Black' }
|
||||
]
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex gap-4' }, [
|
||||
Radio({
|
||||
label: 'Cars',
|
||||
name: 'category-group',
|
||||
value: category,
|
||||
radioValue: 'cars',
|
||||
onclick: () => {
|
||||
category('cars');
|
||||
selected('');
|
||||
}
|
||||
}),
|
||||
Radio({
|
||||
label: 'Colors',
|
||||
name: 'category-group',
|
||||
value: category,
|
||||
radioValue: 'colors',
|
||||
onclick: () => {
|
||||
category('colors');
|
||||
selected('');
|
||||
}
|
||||
})
|
||||
]),
|
||||
Div({ class: 'divider my-1' }),
|
||||
Div({ class: 'text-sm font-bold' }, () => `Select ${category()}`),
|
||||
Div({ class: 'flex flex-col gap-2' }, () =>
|
||||
options[category()].map(opt =>
|
||||
Radio({
|
||||
label: opt.label,
|
||||
name: 'dynamic-option-group',
|
||||
value: selected,
|
||||
radioValue: opt.value,
|
||||
onclick: () => selected(opt.value)
|
||||
})
|
||||
)
|
||||
),
|
||||
() => selected()
|
||||
? Div({ class: 'alert alert-success mt-2' }, () => `Selected ${category()}: ${selected()}`)
|
||||
: null
|
||||
]);
|
||||
};
|
||||
$mount(DynamicDemo, dynamicTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initRadioExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initRadioExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
536
docs/components_old/rating.md
Normal file
536
docs/components_old/rating.md
Normal file
@@ -0,0 +1,536 @@
|
||||
# Rating
|
||||
|
||||
Star rating component with customizable count, icons, and read-only mode.
|
||||
|
||||
## Tag
|
||||
|
||||
`Rating`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :--------------- | :----------------------------------------------- |
|
||||
| `value` | `number \| Signal<number>` | `0` | Current rating value |
|
||||
| `count` | `number \| Signal<number>` | `5` | Number of stars/items |
|
||||
| `mask` | `string` | `'mask-star'` | Mask shape (mask-star, mask-star-2, mask-heart) |
|
||||
| `readonly` | `boolean \| Signal<boolean>` | `false` | Disable interaction |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Rating
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const rating = $(3);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
||||
Rating({
|
||||
value: rating,
|
||||
count: 5,
|
||||
onchange: (value) => rating(value)
|
||||
}),
|
||||
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Heart Rating
|
||||
|
||||
<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-heart" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const HeartDemo = () => {
|
||||
const rating = $(4);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
||||
Rating({
|
||||
value: rating,
|
||||
count: 5,
|
||||
mask: 'mask-heart',
|
||||
onchange: (value) => rating(value)
|
||||
}),
|
||||
Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
|
||||
]);
|
||||
};
|
||||
$mount(HeartDemo, '#demo-heart');
|
||||
```
|
||||
|
||||
### Star with Outline
|
||||
|
||||
<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-star2" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const Star2Demo = () => {
|
||||
const rating = $(2);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
||||
Rating({
|
||||
value: rating,
|
||||
count: 5,
|
||||
mask: 'mask-star-2',
|
||||
onchange: (value) => rating(value)
|
||||
}),
|
||||
Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
|
||||
]);
|
||||
};
|
||||
$mount(Star2Demo, '#demo-star2');
|
||||
```
|
||||
|
||||
### Read-only Rating
|
||||
|
||||
<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-readonly" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReadonlyDemo = () => {
|
||||
const rating = $(4.5);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
||||
Rating({
|
||||
value: rating,
|
||||
count: 5,
|
||||
readonly: true
|
||||
}),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
|
||||
]);
|
||||
};
|
||||
$mount(ReadonlyDemo, '#demo-readonly');
|
||||
```
|
||||
|
||||
### Custom Count
|
||||
|
||||
<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-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CustomDemo = () => {
|
||||
const rating = $(3);
|
||||
const count = $(10);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Div({ class: 'flex items-center gap-4' }, [
|
||||
Span({ class: 'text-sm' }, 'Number of stars:'),
|
||||
Input({
|
||||
type: 'number',
|
||||
value: count,
|
||||
class: 'input input-sm w-24',
|
||||
oninput: (e) => count(parseInt(e.target.value) || 1)
|
||||
})
|
||||
]),
|
||||
Rating({
|
||||
value: rating,
|
||||
count: count,
|
||||
onchange: (value) => rating(value)
|
||||
}),
|
||||
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / ${count()}`)
|
||||
]);
|
||||
};
|
||||
$mount(CustomDemo, '#demo-custom');
|
||||
```
|
||||
|
||||
### Product Review
|
||||
|
||||
<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-review" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReviewDemo = () => {
|
||||
const quality = $(4);
|
||||
const price = $(3);
|
||||
const support = $(5);
|
||||
|
||||
const average = () => Math.round(((quality() + price() + support()) / 3) * 10) / 10;
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-lg font-bold' }, 'Product Review'),
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-sm w-24' }, 'Quality:'),
|
||||
Rating({
|
||||
value: quality,
|
||||
count: 5,
|
||||
size: 'sm',
|
||||
onchange: (v) => quality(v)
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-sm w-24' }, 'Price:'),
|
||||
Rating({
|
||||
value: price,
|
||||
count: 5,
|
||||
size: 'sm',
|
||||
onchange: (v) => price(v)
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-sm w-24' }, 'Support:'),
|
||||
Rating({
|
||||
value: support,
|
||||
count: 5,
|
||||
size: 'sm',
|
||||
onchange: (v) => support(v)
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'divider my-1' }),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'font-bold' }, 'Overall:'),
|
||||
Div({ class: 'text-2xl font-bold text-primary' }, () => average())
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReviewDemo, '#demo-review');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Mask Star'),
|
||||
Rating({ value: $(3), count: 5, mask: 'mask-star' })
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Mask Star 2 (yellow)' ),
|
||||
Rating({ value: $(4), count: 5, mask: 'mask-star-2', class: 'rating-warning' })
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Mask Heart'),
|
||||
Rating({ value: $(5), count: 5, mask: 'mask-heart', class: 'rating-error' })
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Half Stars (read-only)'),
|
||||
Rating({ value: $(3.5), count: 5, readonly: true })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
### Interactive Feedback
|
||||
|
||||
<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-feedback" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FeedbackDemo = () => {
|
||||
const rating = $(0);
|
||||
const feedback = $(false);
|
||||
|
||||
const messages = {
|
||||
1: 'Very disappointed 😞',
|
||||
2: 'Could be better 😕',
|
||||
3: 'Good 👍',
|
||||
4: 'Very good 😊',
|
||||
5: 'Excellent! 🎉'
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'How was your experience?'),
|
||||
Rating({
|
||||
value: rating,
|
||||
count: 5,
|
||||
onchange: (value) => {
|
||||
rating(value);
|
||||
feedback(true);
|
||||
if (value >= 4) {
|
||||
Toast('Thank you for your positive feedback!', 'alert-success', 2000);
|
||||
} else if (value <= 2) {
|
||||
Toast('We appreciate your feedback and will improve!', 'alert-warning', 2000);
|
||||
} else {
|
||||
Toast('Thanks for your rating!', 'alert-info', 2000);
|
||||
}
|
||||
}
|
||||
})
|
||||
]),
|
||||
() => rating() > 0
|
||||
? Div({ class: 'alert alert-soft text-center' }, [
|
||||
messages[rating()] || `Rating: ${rating()} stars`
|
||||
])
|
||||
: null
|
||||
]);
|
||||
};
|
||||
$mount(FeedbackDemo, '#demo-feedback');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initRatingExamples = () => {
|
||||
|
||||
// 1. Basic Rating
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const rating = $(3);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
||||
Rating({
|
||||
value: rating,
|
||||
count: 5,
|
||||
onchange: (value) => rating(value)
|
||||
}),
|
||||
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Heart Rating
|
||||
const heartTarget = document.querySelector('#demo-heart');
|
||||
if (heartTarget && !heartTarget.hasChildNodes()) {
|
||||
const HeartDemo = () => {
|
||||
const rating = $(4);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
||||
Rating({
|
||||
value: rating,
|
||||
count: 5,
|
||||
mask: 'mask-heart',
|
||||
onchange: (value) => rating(value)
|
||||
}),
|
||||
Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
|
||||
]);
|
||||
};
|
||||
$mount(HeartDemo, heartTarget);
|
||||
}
|
||||
|
||||
// 3. Star with Outline
|
||||
const star2Target = document.querySelector('#demo-star2');
|
||||
if (star2Target && !star2Target.hasChildNodes()) {
|
||||
const Star2Demo = () => {
|
||||
const rating = $(2);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
||||
Rating({
|
||||
value: rating,
|
||||
count: 5,
|
||||
mask: 'mask-star-2',
|
||||
onchange: (value) => rating(value)
|
||||
}),
|
||||
Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
|
||||
]);
|
||||
};
|
||||
$mount(Star2Demo, star2Target);
|
||||
}
|
||||
|
||||
// 4. Read-only Rating
|
||||
const readonlyTarget = document.querySelector('#demo-readonly');
|
||||
if (readonlyTarget && !readonlyTarget.hasChildNodes()) {
|
||||
const ReadonlyDemo = () => {
|
||||
const rating = $(4.5);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
||||
Rating({
|
||||
value: rating,
|
||||
count: 5,
|
||||
readonly: true
|
||||
}),
|
||||
Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
|
||||
]);
|
||||
};
|
||||
$mount(ReadonlyDemo, readonlyTarget);
|
||||
}
|
||||
|
||||
// 5. Custom Count
|
||||
const customTarget = document.querySelector('#demo-custom');
|
||||
if (customTarget && !customTarget.hasChildNodes()) {
|
||||
const CustomDemo = () => {
|
||||
const rating = $(3);
|
||||
const count = $(10);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Div({ class: 'flex items-center gap-4' }, [
|
||||
Span({ class: 'text-sm' }, 'Number of stars:'),
|
||||
Input({
|
||||
type: 'number',
|
||||
value: count,
|
||||
class: 'input input-sm w-24',
|
||||
oninput: (e) => count(parseInt(e.target.value) || 1)
|
||||
})
|
||||
]),
|
||||
Rating({
|
||||
value: rating,
|
||||
count: count,
|
||||
onchange: (value) => rating(value)
|
||||
}),
|
||||
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / ${count()}`)
|
||||
]);
|
||||
};
|
||||
$mount(CustomDemo, customTarget);
|
||||
}
|
||||
|
||||
// 6. Product Review
|
||||
const reviewTarget = document.querySelector('#demo-review');
|
||||
if (reviewTarget && !reviewTarget.hasChildNodes()) {
|
||||
const ReviewDemo = () => {
|
||||
const quality = $(4);
|
||||
const price = $(3);
|
||||
const support = $(5);
|
||||
|
||||
const average = () => Math.round(((quality() + price() + support()) / 3) * 10) / 10;
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'text-lg font-bold' }, 'Product Review'),
|
||||
Div({ class: 'flex flex-col gap-2' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-sm w-24' }, 'Quality:'),
|
||||
Rating({
|
||||
value: quality,
|
||||
count: 5,
|
||||
size: 'sm',
|
||||
onchange: (v) => quality(v)
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-sm w-24' }, 'Price:'),
|
||||
Rating({
|
||||
value: price,
|
||||
count: 5,
|
||||
size: 'sm',
|
||||
onchange: (v) => price(v)
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-sm w-24' }, 'Support:'),
|
||||
Rating({
|
||||
value: support,
|
||||
count: 5,
|
||||
size: 'sm',
|
||||
onchange: (v) => support(v)
|
||||
})
|
||||
])
|
||||
]),
|
||||
Div({ class: 'divider my-1' }),
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'font-bold' }, 'Overall:'),
|
||||
Div({ class: 'text-2xl font-bold text-primary' }, () => average())
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReviewDemo, reviewTarget);
|
||||
}
|
||||
|
||||
// 7. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Mask Star'),
|
||||
Rating({ value: $(3), count: 5, mask: 'mask-star' })
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Mask Star 2 (yellow)' ),
|
||||
Rating({ value: $(4), count: 5, mask: 'mask-star-2', class: 'rating-warning' })
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Mask Heart'),
|
||||
Rating({ value: $(5), count: 5, mask: 'mask-heart', class: 'rating-error' })
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Half Stars (read-only)'),
|
||||
Rating({ value: $(3.5), count: 5, readonly: true })
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
|
||||
// 8. Interactive Feedback
|
||||
const feedbackTarget = document.querySelector('#demo-feedback');
|
||||
if (feedbackTarget && !feedbackTarget.hasChildNodes()) {
|
||||
const FeedbackDemo = () => {
|
||||
const rating = $(0);
|
||||
const feedback = $(false);
|
||||
|
||||
const messages = {
|
||||
1: 'Very disappointed 😞',
|
||||
2: 'Could be better 😕',
|
||||
3: 'Good 👍',
|
||||
4: 'Very good 😊',
|
||||
5: 'Excellent! 🎉'
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'How was your experience?'),
|
||||
Rating({
|
||||
value: rating,
|
||||
count: 5,
|
||||
onchange: (value) => {
|
||||
rating(value);
|
||||
feedback(true);
|
||||
if (value >= 4) {
|
||||
Toast('Thank you for your positive feedback!', 'alert-success', 2000);
|
||||
} else if (value <= 2) {
|
||||
Toast('We appreciate your feedback and will improve!', 'alert-warning', 2000);
|
||||
} else {
|
||||
Toast('Thanks for your rating!', 'alert-info', 2000);
|
||||
}
|
||||
}
|
||||
})
|
||||
]),
|
||||
() => rating() > 0
|
||||
? Div({ class: 'alert alert-soft text-center' }, [
|
||||
messages[rating()] || `Rating: ${rating()} stars`
|
||||
])
|
||||
: null
|
||||
]);
|
||||
};
|
||||
$mount(FeedbackDemo, feedbackTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initRatingExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initRatingExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
366
docs/components_old/select.md
Normal file
366
docs/components_old/select.md
Normal file
@@ -0,0 +1,366 @@
|
||||
# Select
|
||||
|
||||
Dropdown select component with full DaisyUI styling, reactive options, and form integration.
|
||||
|
||||
## Tag
|
||||
|
||||
`Select`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :------------------ | :----------------------------------------------- |
|
||||
| `label` | `string` | `-` | Label text above select |
|
||||
| `options` | `Array<{value: string, label: string}>` | `[]` | Array of options with value and label |
|
||||
| `value` | `string \| Signal<string>` | `''` | Selected value |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||
| `onchange` | `function` | `-` | Change event handler |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Select
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const selected = $('apple');
|
||||
|
||||
return Select({
|
||||
label: 'Choose a fruit',
|
||||
options: [
|
||||
{ value: 'apple', label: '🍎 Apple' },
|
||||
{ value: 'banana', label: '🍌 Banana' },
|
||||
{ value: 'orange', label: '🍊 Orange' },
|
||||
{ value: 'grape', label: '🍇 Grape' }
|
||||
],
|
||||
value: selected,
|
||||
onchange: (e) => selected(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Reactive Display
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveDemo = () => {
|
||||
const selected = $('small');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Select({
|
||||
label: 'Select size',
|
||||
options: [
|
||||
{ value: 'small', label: 'Small' },
|
||||
{ value: 'medium', label: 'Medium' },
|
||||
{ value: 'large', label: 'Large' }
|
||||
],
|
||||
value: selected,
|
||||
onchange: (e) => selected(e.target.value)
|
||||
}),
|
||||
Div({ class: 'alert alert-info' }, [
|
||||
`You selected: ${selected()}`
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Disabled State
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DisabledDemo = () => {
|
||||
return Select({
|
||||
label: 'Country (disabled)',
|
||||
options: [
|
||||
{ value: 'mx', label: 'Mexico' },
|
||||
{ value: 'us', label: 'United States' },
|
||||
{ value: 'ca', label: 'Canada' }
|
||||
],
|
||||
value: 'mx',
|
||||
disabled: true
|
||||
});
|
||||
};
|
||||
$mount(DisabledDemo, '#demo-disabled');
|
||||
```
|
||||
|
||||
### Dynamic Options
|
||||
|
||||
<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-dynamic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DynamicDemo = () => {
|
||||
const category = $('fruits');
|
||||
|
||||
const options = {
|
||||
fruits: [
|
||||
{ value: 'apple', label: '🍎 Apple' },
|
||||
{ value: 'banana', label: '🍌 Banana' }
|
||||
],
|
||||
vegetables: [
|
||||
{ value: 'carrot', label: '🥕 Carrot' },
|
||||
{ value: 'broccoli', label: '🥦 Broccoli' }
|
||||
]
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Select({
|
||||
label: 'Category',
|
||||
options: [
|
||||
{ value: 'fruits', label: 'Fruits' },
|
||||
{ value: 'vegetables', label: 'Vegetables' }
|
||||
],
|
||||
value: category,
|
||||
onchange: (e) => category(e.target.value)
|
||||
}),
|
||||
Select({
|
||||
label: 'Item',
|
||||
options: () => options[category()] || [],
|
||||
value: $(''),
|
||||
onchange: (e) => console.log('Selected:', e.target.value)
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(DynamicDemo, '#demo-dynamic');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const primary = $('option1');
|
||||
const secondary = $('option2');
|
||||
const accent = $('');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Select({
|
||||
label: 'Primary Select',
|
||||
class: 'select-primary',
|
||||
options: [
|
||||
{ value: 'option1', label: 'Option 1' },
|
||||
{ value: 'option2', label: 'Option 2' },
|
||||
{ value: 'option3', label: 'Option 3' }
|
||||
],
|
||||
value: primary,
|
||||
onchange: (e) => primary(e.target.value)
|
||||
}),
|
||||
Select({
|
||||
label: 'Secondary Select',
|
||||
class: 'select-secondary',
|
||||
options: [
|
||||
{ value: 'option1', label: 'Option 1' },
|
||||
{ value: 'option2', label: 'Option 2' }
|
||||
],
|
||||
value: secondary,
|
||||
onchange: (e) => secondary(e.target.value)
|
||||
}),
|
||||
Select({
|
||||
label: 'Ghost Select',
|
||||
class: 'select-ghost',
|
||||
options: [
|
||||
{ value: '', label: 'Select an option' },
|
||||
{ value: 'opt1', label: 'Option 1' },
|
||||
{ value: 'opt2', label: 'Option 2' }
|
||||
],
|
||||
value: accent,
|
||||
onchange: (e) => accent(e.target.value)
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initSelectExamples = () => {
|
||||
|
||||
// 1. Basic Select
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const selected = $('apple');
|
||||
|
||||
return Select({
|
||||
label: 'Choose a fruit',
|
||||
options: [
|
||||
{ value: 'apple', label: '🍎 Apple' },
|
||||
{ value: 'banana', label: '🍌 Banana' },
|
||||
{ value: 'orange', label: '🍊 Orange' },
|
||||
{ value: 'grape', label: '🍇 Grape' }
|
||||
],
|
||||
value: selected,
|
||||
onchange: (e) => selected(e.target.value)
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Reactive Display
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const selected = $('small');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Select({
|
||||
label: 'Select size',
|
||||
options: [
|
||||
{ value: 'small', label: 'Small' },
|
||||
{ value: 'medium', label: 'Medium' },
|
||||
{ value: 'large', label: 'Large' }
|
||||
],
|
||||
value: selected,
|
||||
onchange: (e) => selected(e.target.value)
|
||||
}),
|
||||
Div({ class: 'alert alert-info' }, [
|
||||
`You selected: ${selected()}`
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 3. Disabled State
|
||||
const disabledTarget = document.querySelector('#demo-disabled');
|
||||
if (disabledTarget && !disabledTarget.hasChildNodes()) {
|
||||
const DisabledDemo = () => {
|
||||
return Select({
|
||||
label: 'Country (disabled)',
|
||||
options: [
|
||||
{ value: 'mx', label: 'Mexico' },
|
||||
{ value: 'us', label: 'United States' },
|
||||
{ value: 'ca', label: 'Canada' }
|
||||
],
|
||||
value: 'mx',
|
||||
disabled: true
|
||||
});
|
||||
};
|
||||
$mount(DisabledDemo, disabledTarget);
|
||||
}
|
||||
|
||||
// 4. Dynamic Options
|
||||
const dynamicTarget = document.querySelector('#demo-dynamic');
|
||||
if (dynamicTarget && !dynamicTarget.hasChildNodes()) {
|
||||
const DynamicDemo = () => {
|
||||
const category = $('fruits');
|
||||
|
||||
const options = {
|
||||
fruits: [
|
||||
{ value: 'apple', label: '🍎 Apple' },
|
||||
{ value: 'banana', label: '🍌 Banana' }
|
||||
],
|
||||
vegetables: [
|
||||
{ value: 'carrot', label: '🥕 Carrot' },
|
||||
{ value: 'broccoli', label: '🥦 Broccoli' }
|
||||
]
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
Select({
|
||||
label: 'Category',
|
||||
options: [
|
||||
{ value: 'fruits', label: 'Fruits' },
|
||||
{ value: 'vegetables', label: 'Vegetables' }
|
||||
],
|
||||
value: category,
|
||||
onchange: (e) => category(e.target.value)
|
||||
}),
|
||||
Select({
|
||||
label: 'Item',
|
||||
options: () => options[category()] || [],
|
||||
value: $(''),
|
||||
onchange: (e) => console.log('Selected:', e.target.value)
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(DynamicDemo, dynamicTarget);
|
||||
}
|
||||
|
||||
// 5. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const primary = $('option1');
|
||||
const secondary = $('option2');
|
||||
const accent = $('');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Select({
|
||||
label: 'Primary Select',
|
||||
class: 'select-primary',
|
||||
options: [
|
||||
{ value: 'option1', label: 'Option 1' },
|
||||
{ value: 'option2', label: 'Option 2' },
|
||||
{ value: 'option3', label: 'Option 3' }
|
||||
],
|
||||
value: primary,
|
||||
onchange: (e) => primary(e.target.value)
|
||||
}),
|
||||
Select({
|
||||
label: 'Secondary Select',
|
||||
class: 'select-secondary',
|
||||
options: [
|
||||
{ value: 'option1', label: 'Option 1' },
|
||||
{ value: 'option2', label: 'Option 2' }
|
||||
],
|
||||
value: secondary,
|
||||
onchange: (e) => secondary(e.target.value)
|
||||
}),
|
||||
Select({
|
||||
label: 'Ghost Select',
|
||||
class: 'select-ghost',
|
||||
options: [
|
||||
{ value: '', label: 'Select an option' },
|
||||
{ value: 'opt1', label: 'Option 1' },
|
||||
{ value: 'opt2', label: 'Option 2' }
|
||||
],
|
||||
value: accent,
|
||||
onchange: (e) => accent(e.target.value)
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initSelectExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initSelectExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
519
docs/components_old/stack.md
Normal file
519
docs/components_old/stack.md
Normal file
@@ -0,0 +1,519 @@
|
||||
# Stack
|
||||
|
||||
Stack component for layering multiple elements on top of each other, creating depth and visual hierarchy.
|
||||
|
||||
## Tag
|
||||
|
||||
`Stack`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `Array<VNode> \| VNode` | `-` | Elements to stack (first is bottom, last is top) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Stack
|
||||
|
||||
<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 Stack({ class: 'w-40' }, [
|
||||
Div({ class: 'bg-primary text-primary-content rounded-lg p-4 shadow-lg' }, 'Layer 1'),
|
||||
Div({ class: 'bg-secondary text-secondary-content rounded-lg p-4 shadow-lg' }, 'Layer 2'),
|
||||
Div({ class: 'bg-accent text-accent-content rounded-lg p-4 shadow-lg' }, 'Layer 3')
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Card Stack
|
||||
|
||||
<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-cards" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CardsDemo = () => {
|
||||
return Stack({ class: 'w-64' }, [
|
||||
Div({ class: 'card bg-base-100 shadow-xl border border-base-300' }, [
|
||||
Div({ class: 'card-body p-4' }, [
|
||||
Span({ class: 'text-sm opacity-70' }, 'Back Card'),
|
||||
Span({ class: 'font-bold' }, 'Additional info')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'card bg-primary text-primary-content shadow-xl' }, [
|
||||
Div({ class: 'card-body p-4' }, [
|
||||
Span({ class: 'text-sm' }, 'Front Card'),
|
||||
Span({ class: 'font-bold text-lg' }, 'Main Content')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(CardsDemo, '#demo-cards');
|
||||
```
|
||||
|
||||
### Avatar Stack
|
||||
|
||||
<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-avatars" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AvatarsDemo = () => {
|
||||
return Stack({ class: 'w-32' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-neutral text-neutral-content rounded-full w-16' }, [
|
||||
Span({}, 'JD')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-primary text-primary-content rounded-full w-16' }, [
|
||||
Span({}, 'JS')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-secondary text-secondary-content rounded-full w-16' }, [
|
||||
Span({}, 'BC')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AvatarsDemo, '#demo-avatars');
|
||||
```
|
||||
|
||||
### Image Stack
|
||||
|
||||
<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-images" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ImagesDemo = () => {
|
||||
return Stack({ class: 'w-48' }, [
|
||||
Div({ class: 'w-full h-32 bg-gradient-to-r from-primary to-secondary rounded-lg shadow-lg' }, [
|
||||
Div({ class: 'p-2 text-white text-sm' }, 'Background Image')
|
||||
]),
|
||||
Div({ class: 'w-full h-32 bg-gradient-to-r from-secondary to-accent rounded-lg shadow-lg translate-x-2 translate-y-2' }, [
|
||||
Div({ class: 'p-2 text-white text-sm' }, 'Middle Layer')
|
||||
]),
|
||||
Div({ class: 'w-full h-32 bg-gradient-to-r from-accent to-primary rounded-lg shadow-lg translate-x-4 translate-y-4 flex items-center justify-center' }, [
|
||||
Span({ class: 'text-white font-bold' }, 'Top Layer')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ImagesDemo, '#demo-images');
|
||||
```
|
||||
|
||||
### Photo Gallery Stack
|
||||
|
||||
<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-gallery" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const GalleryDemo = () => {
|
||||
const photos = [
|
||||
{ color: 'bg-primary', label: 'Photo 1' },
|
||||
{ color: 'bg-secondary', label: 'Photo 2' },
|
||||
{ color: 'bg-accent', label: 'Photo 3' },
|
||||
{ color: 'bg-info', label: 'Photo 4' }
|
||||
];
|
||||
|
||||
return Stack({ class: 'w-48 cursor-pointer hover:scale-105 transition-transform' }, [
|
||||
...photos.map((photo, idx) =>
|
||||
Div({
|
||||
class: `${photo.color} rounded-lg shadow-lg transition-all`,
|
||||
style: `transform: translate(${idx * 4}px, ${idx * 4}px); width: 100%; height: 100%;`
|
||||
}, [
|
||||
Div({ class: 'p-4 text-white font-bold' }, photo.label)
|
||||
])
|
||||
)
|
||||
]);
|
||||
};
|
||||
$mount(GalleryDemo, '#demo-gallery');
|
||||
```
|
||||
|
||||
### Interactive Stack
|
||||
|
||||
<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-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const InteractiveDemo = () => {
|
||||
const active = $(0);
|
||||
const colors = ['primary', 'secondary', 'accent', 'info', 'success'];
|
||||
const labels = ['Home', 'Profile', 'Settings', 'Messages', 'Notifications'];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-6 items-center' }, [
|
||||
Stack({ class: 'w-56' }, colors.map((color, idx) =>
|
||||
Div({
|
||||
class: `bg-${color} text-${color}-content rounded-lg p-4 shadow-lg transition-all cursor-pointer ${idx === active() ? 'scale-105 z-10' : ''}`,
|
||||
style: `transform: translate(${idx * 8}px, ${idx * 8}px);`,
|
||||
onclick: () => active(idx)
|
||||
}, [
|
||||
Div({ class: 'font-bold' }, labels[idx]),
|
||||
Div({ class: 'text-sm opacity-80' }, `Layer ${idx + 1}`)
|
||||
])
|
||||
)),
|
||||
Div({ class: 'mt-4 text-center' }, [
|
||||
Span({ class: 'font-bold' }, () => `Active: ${labels[active()]}`),
|
||||
Div({ class: 'flex gap-2 mt-2' }, colors.map((_, idx) =>
|
||||
Button({
|
||||
class: `btn btn-xs ${idx === active() ? 'btn-primary' : 'btn-ghost'}`,
|
||||
onclick: () => active(idx)
|
||||
}, `${idx + 1}`)
|
||||
))
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(InteractiveDemo, '#demo-interactive');
|
||||
```
|
||||
|
||||
### Notification Stack
|
||||
|
||||
<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-notifications" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const NotificationsDemo = () => {
|
||||
const notifications = $([
|
||||
{ id: 1, message: 'New message from John', type: 'info' },
|
||||
{ id: 2, message: 'Your order has shipped', type: 'success' },
|
||||
{ id: 3, message: 'Meeting in 10 minutes', type: 'warning' }
|
||||
]);
|
||||
|
||||
const removeNotification = (id) => {
|
||||
notifications(notifications().filter(n => n.id !== id));
|
||||
};
|
||||
|
||||
const typeClasses = {
|
||||
info: 'bg-info text-info-content',
|
||||
success: 'bg-success text-success-content',
|
||||
warning: 'bg-warning text-warning-content',
|
||||
error: 'bg-error text-error-content'
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Stack({ class: 'w-80' }, notifications().map((notif, idx) =>
|
||||
Div({
|
||||
class: `${typeClasses[notif.type]} rounded-lg p-3 shadow-lg transition-all cursor-pointer`,
|
||||
style: `transform: translate(${idx * 4}px, ${idx * 4}px);`,
|
||||
onclick: () => removeNotification(notif.id)
|
||||
}, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-sm' }, notif.message),
|
||||
Span({ class: 'text-xs opacity-70 cursor-pointer hover:opacity-100' }, '✕')
|
||||
])
|
||||
])
|
||||
)),
|
||||
notifications().length === 0
|
||||
? Div({ class: 'alert alert-soft' }, 'No notifications')
|
||||
: Button({
|
||||
class: 'btn btn-sm btn-ghost mt-2',
|
||||
onclick: () => notifications([])
|
||||
}, 'Clear All')
|
||||
]);
|
||||
};
|
||||
$mount(NotificationsDemo, '#demo-notifications');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Small Stack'),
|
||||
Stack({ class: 'w-24' }, [
|
||||
Div({ class: 'bg-primary rounded p-2 text-xs' }, '1'),
|
||||
Div({ class: 'bg-secondary rounded p-2 text-xs' }, '2'),
|
||||
Div({ class: 'bg-accent rounded p-2 text-xs' }, '3')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Medium Stack'),
|
||||
Stack({ class: 'w-32' }, [
|
||||
Div({ class: 'bg-primary rounded p-3' }, 'A'),
|
||||
Div({ class: 'bg-secondary rounded p-3' }, 'B'),
|
||||
Div({ class: 'bg-accent rounded p-3' }, 'C')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Large Stack'),
|
||||
Stack({ class: 'w-40' }, [
|
||||
Div({ class: 'bg-primary rounded p-4' }, 'X'),
|
||||
Div({ class: 'bg-secondary rounded p-4' }, 'Y'),
|
||||
Div({ class: 'bg-accent rounded p-4' }, 'Z')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initStackExamples = () => {
|
||||
|
||||
// 1. Basic Stack
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Stack({ class: 'w-40' }, [
|
||||
Div({ class: 'bg-primary text-primary-content rounded-lg p-4 shadow-lg' }, 'Layer 1'),
|
||||
Div({ class: 'bg-secondary text-secondary-content rounded-lg p-4 shadow-lg' }, 'Layer 2'),
|
||||
Div({ class: 'bg-accent text-accent-content rounded-lg p-4 shadow-lg' }, 'Layer 3')
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Card Stack
|
||||
const cardsTarget = document.querySelector('#demo-cards');
|
||||
if (cardsTarget && !cardsTarget.hasChildNodes()) {
|
||||
const CardsDemo = () => {
|
||||
return Stack({ class: 'w-64' }, [
|
||||
Div({ class: 'card bg-base-100 shadow-xl border border-base-300' }, [
|
||||
Div({ class: 'card-body p-4' }, [
|
||||
Span({ class: 'text-sm opacity-70' }, 'Back Card'),
|
||||
Span({ class: 'font-bold' }, 'Additional info')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'card bg-primary text-primary-content shadow-xl' }, [
|
||||
Div({ class: 'card-body p-4' }, [
|
||||
Span({ class: 'text-sm' }, 'Front Card'),
|
||||
Span({ class: 'font-bold text-lg' }, 'Main Content')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(CardsDemo, cardsTarget);
|
||||
}
|
||||
|
||||
// 3. Avatar Stack
|
||||
const avatarsTarget = document.querySelector('#demo-avatars');
|
||||
if (avatarsTarget && !avatarsTarget.hasChildNodes()) {
|
||||
const AvatarsDemo = () => {
|
||||
return Stack({ class: 'w-32' }, [
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-neutral text-neutral-content rounded-full w-16' }, [
|
||||
Span({}, 'JD')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-primary text-primary-content rounded-full w-16' }, [
|
||||
Span({}, 'JS')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'avatar placeholder' }, [
|
||||
Div({ class: 'bg-secondary text-secondary-content rounded-full w-16' }, [
|
||||
Span({}, 'BC')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AvatarsDemo, avatarsTarget);
|
||||
}
|
||||
|
||||
// 4. Image Stack
|
||||
const imagesTarget = document.querySelector('#demo-images');
|
||||
if (imagesTarget && !imagesTarget.hasChildNodes()) {
|
||||
const ImagesDemo = () => {
|
||||
return Stack({ class: 'w-48' }, [
|
||||
Div({ class: 'w-full h-32 bg-gradient-to-r from-primary to-secondary rounded-lg shadow-lg' }, [
|
||||
Div({ class: 'p-2 text-white text-sm' }, 'Background Image')
|
||||
]),
|
||||
Div({ class: 'w-full h-32 bg-gradient-to-r from-secondary to-accent rounded-lg shadow-lg translate-x-2 translate-y-2' }, [
|
||||
Div({ class: 'p-2 text-white text-sm' }, 'Middle Layer')
|
||||
]),
|
||||
Div({ class: 'w-full h-32 bg-gradient-to-r from-accent to-primary rounded-lg shadow-lg translate-x-4 translate-y-4 flex items-center justify-center' }, [
|
||||
Span({ class: 'text-white font-bold' }, 'Top Layer')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ImagesDemo, imagesTarget);
|
||||
}
|
||||
|
||||
// 5. Photo Gallery Stack
|
||||
const galleryTarget = document.querySelector('#demo-gallery');
|
||||
if (galleryTarget && !galleryTarget.hasChildNodes()) {
|
||||
const GalleryDemo = () => {
|
||||
const photos = [
|
||||
{ color: 'bg-primary', label: 'Photo 1' },
|
||||
{ color: 'bg-secondary', label: 'Photo 2' },
|
||||
{ color: 'bg-accent', label: 'Photo 3' },
|
||||
{ color: 'bg-info', label: 'Photo 4' }
|
||||
];
|
||||
|
||||
return Stack({ class: 'w-48 cursor-pointer hover:scale-105 transition-transform' }, [
|
||||
...photos.map((photo, idx) =>
|
||||
Div({
|
||||
class: `${photo.color} rounded-lg shadow-lg transition-all`,
|
||||
style: `transform: translate(${idx * 4}px, ${idx * 4}px); width: 100%; height: 100%;`
|
||||
}, [
|
||||
Div({ class: 'p-4 text-white font-bold' }, photo.label)
|
||||
])
|
||||
)
|
||||
]);
|
||||
};
|
||||
$mount(GalleryDemo, galleryTarget);
|
||||
}
|
||||
|
||||
// 6. Interactive Stack
|
||||
const interactiveTarget = document.querySelector('#demo-interactive');
|
||||
if (interactiveTarget && !interactiveTarget.hasChildNodes()) {
|
||||
const InteractiveDemo = () => {
|
||||
const active = $(0);
|
||||
const colors = ['primary', 'secondary', 'accent', 'info', 'success'];
|
||||
const labels = ['Home', 'Profile', 'Settings', 'Messages', 'Notifications'];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-6 items-center' }, [
|
||||
Stack({ class: 'w-56' }, colors.map((color, idx) =>
|
||||
Div({
|
||||
class: `bg-${color} text-${color}-content rounded-lg p-4 shadow-lg transition-all cursor-pointer ${idx === active() ? 'scale-105 z-10' : ''}`,
|
||||
style: `transform: translate(${idx * 8}px, ${idx * 8}px);`,
|
||||
onclick: () => active(idx)
|
||||
}, [
|
||||
Div({ class: 'font-bold' }, labels[idx]),
|
||||
Div({ class: 'text-sm opacity-80' }, `Layer ${idx + 1}`)
|
||||
])
|
||||
)),
|
||||
Div({ class: 'mt-4 text-center' }, [
|
||||
Span({ class: 'font-bold' }, () => `Active: ${labels[active()]}`),
|
||||
Div({ class: 'flex gap-2 mt-2' }, colors.map((_, idx) =>
|
||||
Button({
|
||||
class: `btn btn-xs ${idx === active() ? 'btn-primary' : 'btn-ghost'}`,
|
||||
onclick: () => active(idx)
|
||||
}, `${idx + 1}`)
|
||||
))
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(InteractiveDemo, interactiveTarget);
|
||||
}
|
||||
|
||||
// 7. Notification Stack
|
||||
const notificationsTarget = document.querySelector('#demo-notifications');
|
||||
if (notificationsTarget && !notificationsTarget.hasChildNodes()) {
|
||||
const NotificationsDemo = () => {
|
||||
const notifications = $([
|
||||
{ id: 1, message: 'New message from John', type: 'info' },
|
||||
{ id: 2, message: 'Your order has shipped', type: 'success' },
|
||||
{ id: 3, message: 'Meeting in 10 minutes', type: 'warning' }
|
||||
]);
|
||||
|
||||
const removeNotification = (id) => {
|
||||
notifications(notifications().filter(n => n.id !== id));
|
||||
};
|
||||
|
||||
const typeClasses = {
|
||||
info: 'bg-info text-info-content',
|
||||
success: 'bg-success text-success-content',
|
||||
warning: 'bg-warning text-warning-content',
|
||||
error: 'bg-error text-error-content'
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Stack({ class: 'w-80' }, notifications().map((notif, idx) =>
|
||||
Div({
|
||||
class: `${typeClasses[notif.type]} rounded-lg p-3 shadow-lg transition-all cursor-pointer`,
|
||||
style: `transform: translate(${idx * 4}px, ${idx * 4}px);`,
|
||||
onclick: () => removeNotification(notif.id)
|
||||
}, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'text-sm' }, notif.message),
|
||||
Span({ class: 'text-xs opacity-70 cursor-pointer hover:opacity-100' }, '✕')
|
||||
])
|
||||
])
|
||||
)),
|
||||
notifications().length === 0
|
||||
? Div({ class: 'alert alert-soft' }, 'No notifications')
|
||||
: Button({
|
||||
class: 'btn btn-sm btn-ghost mt-2',
|
||||
onclick: () => notifications([])
|
||||
}, 'Clear All')
|
||||
]);
|
||||
};
|
||||
$mount(NotificationsDemo, notificationsTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Small Stack'),
|
||||
Stack({ class: 'w-24' }, [
|
||||
Div({ class: 'bg-primary rounded p-2 text-xs' }, '1'),
|
||||
Div({ class: 'bg-secondary rounded p-2 text-xs' }, '2'),
|
||||
Div({ class: 'bg-accent rounded p-2 text-xs' }, '3')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Medium Stack'),
|
||||
Stack({ class: 'w-32' }, [
|
||||
Div({ class: 'bg-primary rounded p-3' }, 'A'),
|
||||
Div({ class: 'bg-secondary rounded p-3' }, 'B'),
|
||||
Div({ class: 'bg-accent rounded p-3' }, 'C')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-sm mb-2' }, 'Large Stack'),
|
||||
Stack({ class: 'w-40' }, [
|
||||
Div({ class: 'bg-primary rounded p-4' }, 'X'),
|
||||
Div({ class: 'bg-secondary rounded p-4' }, 'Y'),
|
||||
Div({ class: 'bg-accent rounded p-4' }, 'Z')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initStackExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initStackExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
644
docs/components_old/stat.md
Normal file
644
docs/components_old/stat.md
Normal file
@@ -0,0 +1,644 @@
|
||||
# Stat
|
||||
|
||||
Statistic card component for displaying metrics, counts, and key performance indicators with optional icons and descriptions.
|
||||
|
||||
## Tag
|
||||
|
||||
`Stat`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `label` | `string \| VNode \| Signal` | `-` | Statistic label/title |
|
||||
| `value` | `string \| number \| Signal` | `-` | Main statistic value |
|
||||
| `desc` | `string \| VNode \| Signal` | `-` | Description or trend text |
|
||||
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed in the figure area |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Stat
|
||||
|
||||
<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 grid grid-cols-1 md:grid-cols-3 gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Total Users',
|
||||
value: '2,345',
|
||||
desc: '↗︎ 120 new users this month'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Revenue',
|
||||
value: '$45,678',
|
||||
desc: '↘︎ 5% decrease from last month'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Conversion Rate',
|
||||
value: '3.45%',
|
||||
desc: '↗︎ 0.5% increase'
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Icons
|
||||
|
||||
<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-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-3 gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconsDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Active Users',
|
||||
value: '1,234',
|
||||
desc: 'Currently online',
|
||||
icon: Icons.iconShow
|
||||
}),
|
||||
Stat({
|
||||
label: 'New Orders',
|
||||
value: '89',
|
||||
desc: 'Today',
|
||||
icon: Icons.iconSuccess
|
||||
}),
|
||||
Stat({
|
||||
label: 'Pending Tasks',
|
||||
value: '23',
|
||||
desc: 'Need attention',
|
||||
icon: Icons.iconWarning
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(IconsDemo, '#demo-icons');
|
||||
```
|
||||
|
||||
### Reactive Values
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveDemo = () => {
|
||||
const count = $(0);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Counter',
|
||||
value: () => count(),
|
||||
desc: 'Click the button to increase',
|
||||
icon: Icons.iconInfo
|
||||
}),
|
||||
Stat({
|
||||
label: 'Squared',
|
||||
value: () => Math.pow(count(), 2),
|
||||
desc: 'Square of counter',
|
||||
icon: Icons.iconSuccess
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex gap-2 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => count(count() + 1)
|
||||
}, 'Increment'),
|
||||
Button({
|
||||
class: 'btn btn-ghost',
|
||||
onclick: () => count(0)
|
||||
}, 'Reset')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### With Trend Indicators
|
||||
|
||||
<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-trends" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-1 md:grid-cols-3 gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const TrendsDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Weekly Sales',
|
||||
value: '$12,345',
|
||||
desc: Div({ class: 'text-success' }, '↗︎ 15% increase'),
|
||||
icon: Icons.iconSuccess
|
||||
}),
|
||||
Stat({
|
||||
label: 'Bounce Rate',
|
||||
value: '42%',
|
||||
desc: Div({ class: 'text-error' }, '↘︎ 3% from last week'),
|
||||
icon: Icons.iconError
|
||||
}),
|
||||
Stat({
|
||||
label: 'Avg. Session',
|
||||
value: '4m 32s',
|
||||
desc: Div({ class: 'text-warning' }, '↗︎ 12 seconds'),
|
||||
icon: Icons.iconWarning
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(TrendsDemo, '#demo-trends');
|
||||
```
|
||||
|
||||
### Multiple Stats in Row
|
||||
|
||||
<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-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const MultipleDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Posts',
|
||||
value: '1,234',
|
||||
desc: 'Total content',
|
||||
icon: Span({ class: 'text-2xl' }, '📝')
|
||||
}),
|
||||
Stat({
|
||||
label: 'Comments',
|
||||
value: '8,901',
|
||||
desc: 'Engagement',
|
||||
icon: Span({ class: 'text-2xl' }, '💬')
|
||||
}),
|
||||
Stat({
|
||||
label: 'Likes',
|
||||
value: '12,345',
|
||||
desc: 'Reactions',
|
||||
icon: Span({ class: 'text-2xl' }, '❤️')
|
||||
}),
|
||||
Stat({
|
||||
label: 'Shares',
|
||||
value: '456',
|
||||
desc: 'Viral reach',
|
||||
icon: Span({ class: 'text-2xl' }, '🔄')
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(MultipleDemo, '#demo-multiple');
|
||||
```
|
||||
|
||||
### Dashboard Example
|
||||
|
||||
<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-dashboard" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DashboardDemo = () => {
|
||||
const stats = $({
|
||||
users: 1245,
|
||||
revenue: 89342,
|
||||
orders: 342,
|
||||
satisfaction: 94
|
||||
});
|
||||
|
||||
const updateStats = () => {
|
||||
stats({
|
||||
users: stats().users + Math.floor(Math.random() * 50),
|
||||
revenue: stats().revenue + Math.floor(Math.random() * 1000),
|
||||
orders: stats().orders + Math.floor(Math.random() * 20),
|
||||
satisfaction: Math.min(100, stats().satisfaction + Math.floor(Math.random() * 5) - 2)
|
||||
});
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Total Users',
|
||||
value: () => stats().users.toLocaleString(),
|
||||
desc: 'Registered users',
|
||||
icon: Icons.iconShow
|
||||
}),
|
||||
Stat({
|
||||
label: 'Revenue',
|
||||
value: () => `$${stats().revenue.toLocaleString()}`,
|
||||
desc: 'This month',
|
||||
icon: Icons.iconSuccess
|
||||
}),
|
||||
Stat({
|
||||
label: 'Orders',
|
||||
value: () => stats().orders.toLocaleString(),
|
||||
desc: 'Completed',
|
||||
icon: Icons.iconInfo
|
||||
}),
|
||||
Stat({
|
||||
label: 'Satisfaction',
|
||||
value: () => `${stats().satisfaction}%`,
|
||||
desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good',
|
||||
icon: Icons.iconWarning
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: updateStats
|
||||
}, 'Refresh Data')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DashboardDemo, '#demo-dashboard');
|
||||
```
|
||||
|
||||
### 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 grid grid-cols-1 md:grid-cols-2 gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Primary Stat',
|
||||
value: '1,234',
|
||||
desc: 'With description',
|
||||
icon: Icons.iconInfo,
|
||||
class: 'bg-primary/10 text-primary'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Success Stat',
|
||||
value: '89%',
|
||||
desc: 'Success rate',
|
||||
icon: Icons.iconSuccess,
|
||||
class: 'bg-success/10 text-success'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Warning Stat',
|
||||
value: '23',
|
||||
desc: 'Pending items',
|
||||
icon: Icons.iconWarning,
|
||||
class: 'bg-warning/10 text-warning'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Error Stat',
|
||||
value: '5',
|
||||
desc: 'Failed attempts',
|
||||
icon: Icons.iconError,
|
||||
class: 'bg-error/10 text-error'
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
### Compact Stats
|
||||
|
||||
<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-compact" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CompactDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4' }, [
|
||||
Stat({
|
||||
label: 'Views',
|
||||
value: '12.3K',
|
||||
class: 'stat-compact'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Likes',
|
||||
value: '2,456',
|
||||
class: 'stat-compact'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Comments',
|
||||
value: '345',
|
||||
class: 'stat-compact'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Shares',
|
||||
value: '89',
|
||||
class: 'stat-compact'
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(CompactDemo, '#demo-compact');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initStatExamples = () => {
|
||||
|
||||
// 1. Basic Stat
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Total Users',
|
||||
value: '2,345',
|
||||
desc: '↗︎ 120 new users this month'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Revenue',
|
||||
value: '$45,678',
|
||||
desc: '↘︎ 5% decrease from last month'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Conversion Rate',
|
||||
value: '3.45%',
|
||||
desc: '↗︎ 0.5% increase'
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Icons
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Active Users',
|
||||
value: '1,234',
|
||||
desc: 'Currently online',
|
||||
icon: Icons.iconShow
|
||||
}),
|
||||
Stat({
|
||||
label: 'New Orders',
|
||||
value: '89',
|
||||
desc: 'Today',
|
||||
icon: Icons.iconSuccess
|
||||
}),
|
||||
Stat({
|
||||
label: 'Pending Tasks',
|
||||
value: '23',
|
||||
desc: 'Need attention',
|
||||
icon: Icons.iconWarning
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 3. Reactive Values
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const count = $(0);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Counter',
|
||||
value: () => count(),
|
||||
desc: 'Click the button to increase',
|
||||
icon: Icons.iconInfo
|
||||
}),
|
||||
Stat({
|
||||
label: 'Squared',
|
||||
value: () => Math.pow(count(), 2),
|
||||
desc: 'Square of counter',
|
||||
icon: Icons.iconSuccess
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex gap-2 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => count(count() + 1)
|
||||
}, 'Increment'),
|
||||
Button({
|
||||
class: 'btn btn-ghost',
|
||||
onclick: () => count(0)
|
||||
}, 'Reset')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 4. With Trend Indicators
|
||||
const trendsTarget = document.querySelector('#demo-trends');
|
||||
if (trendsTarget && !trendsTarget.hasChildNodes()) {
|
||||
const TrendsDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Weekly Sales',
|
||||
value: '$12,345',
|
||||
desc: Div({ class: 'text-success' }, '↗︎ 15% increase'),
|
||||
icon: Icons.iconSuccess
|
||||
}),
|
||||
Stat({
|
||||
label: 'Bounce Rate',
|
||||
value: '42%',
|
||||
desc: Div({ class: 'text-error' }, '↘︎ 3% from last week'),
|
||||
icon: Icons.iconError
|
||||
}),
|
||||
Stat({
|
||||
label: 'Avg. Session',
|
||||
value: '4m 32s',
|
||||
desc: Div({ class: 'text-warning' }, '↗︎ 12 seconds'),
|
||||
icon: Icons.iconWarning
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(TrendsDemo, trendsTarget);
|
||||
}
|
||||
|
||||
// 5. Multiple Stats in Row
|
||||
const multipleTarget = document.querySelector('#demo-multiple');
|
||||
if (multipleTarget && !multipleTarget.hasChildNodes()) {
|
||||
const MultipleDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Posts',
|
||||
value: '1,234',
|
||||
desc: 'Total content',
|
||||
icon: Span({ class: 'text-2xl' }, '📝')
|
||||
}),
|
||||
Stat({
|
||||
label: 'Comments',
|
||||
value: '8,901',
|
||||
desc: 'Engagement',
|
||||
icon: Span({ class: 'text-2xl' }, '💬')
|
||||
}),
|
||||
Stat({
|
||||
label: 'Likes',
|
||||
value: '12,345',
|
||||
desc: 'Reactions',
|
||||
icon: Span({ class: 'text-2xl' }, '❤️')
|
||||
}),
|
||||
Stat({
|
||||
label: 'Shares',
|
||||
value: '456',
|
||||
desc: 'Viral reach',
|
||||
icon: Span({ class: 'text-2xl' }, '🔄')
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(MultipleDemo, multipleTarget);
|
||||
}
|
||||
|
||||
// 6. Dashboard Example
|
||||
const dashboardTarget = document.querySelector('#demo-dashboard');
|
||||
if (dashboardTarget && !dashboardTarget.hasChildNodes()) {
|
||||
const DashboardDemo = () => {
|
||||
const stats = $({
|
||||
users: 1245,
|
||||
revenue: 89342,
|
||||
orders: 342,
|
||||
satisfaction: 94
|
||||
});
|
||||
|
||||
const updateStats = () => {
|
||||
stats({
|
||||
users: stats().users + Math.floor(Math.random() * 50),
|
||||
revenue: stats().revenue + Math.floor(Math.random() * 1000),
|
||||
orders: stats().orders + Math.floor(Math.random() * 20),
|
||||
satisfaction: Math.min(100, stats().satisfaction + Math.floor(Math.random() * 5) - 2)
|
||||
});
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Total Users',
|
||||
value: () => stats().users.toLocaleString(),
|
||||
desc: 'Registered users',
|
||||
icon: Icons.iconShow
|
||||
}),
|
||||
Stat({
|
||||
label: 'Revenue',
|
||||
value: () => `$${stats().revenue.toLocaleString()}`,
|
||||
desc: 'This month',
|
||||
icon: Icons.iconSuccess
|
||||
}),
|
||||
Stat({
|
||||
label: 'Orders',
|
||||
value: () => stats().orders.toLocaleString(),
|
||||
desc: 'Completed',
|
||||
icon: Icons.iconInfo
|
||||
}),
|
||||
Stat({
|
||||
label: 'Satisfaction',
|
||||
value: () => `${stats().satisfaction}%`,
|
||||
desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good',
|
||||
icon: Icons.iconWarning
|
||||
})
|
||||
]),
|
||||
Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: updateStats
|
||||
}, 'Refresh Data')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(DashboardDemo, dashboardTarget);
|
||||
}
|
||||
|
||||
// 7. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
|
||||
Stat({
|
||||
label: 'Primary Stat',
|
||||
value: '1,234',
|
||||
desc: 'With description',
|
||||
icon: Icons.iconInfo,
|
||||
class: 'bg-primary/10 text-primary'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Success Stat',
|
||||
value: '89%',
|
||||
desc: 'Success rate',
|
||||
icon: Icons.iconSuccess,
|
||||
class: 'bg-success/10 text-success'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Warning Stat',
|
||||
value: '23',
|
||||
desc: 'Pending items',
|
||||
icon: Icons.iconWarning,
|
||||
class: 'bg-warning/10 text-warning'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Error Stat',
|
||||
value: '5',
|
||||
desc: 'Failed attempts',
|
||||
icon: Icons.iconError,
|
||||
class: 'bg-error/10 text-error'
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
|
||||
// 8. Compact Stats
|
||||
const compactTarget = document.querySelector('#demo-compact');
|
||||
if (compactTarget && !compactTarget.hasChildNodes()) {
|
||||
const CompactDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4' }, [
|
||||
Stat({
|
||||
label: 'Views',
|
||||
value: '12.3K',
|
||||
class: 'stat-compact'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Likes',
|
||||
value: '2,456',
|
||||
class: 'stat-compact'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Comments',
|
||||
value: '345',
|
||||
class: 'stat-compact'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Shares',
|
||||
value: '89',
|
||||
class: 'stat-compact'
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(CompactDemo, compactTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initStatExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initStatExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
500
docs/components_old/swap.md
Normal file
500
docs/components_old/swap.md
Normal file
@@ -0,0 +1,500 @@
|
||||
# Swap
|
||||
|
||||
Toggle component that swaps between two states (on/off) with customizable icons or content.
|
||||
|
||||
## Tag
|
||||
|
||||
`Swap`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `value` | `boolean \| Signal<boolean>` | `false` | Swap state (true = on, false = off) |
|
||||
| `on` | `string \| VNode` | `-` | Content to show when state is on |
|
||||
| `off` | `string \| VNode` | `-` | Content to show when state is off |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `onclick` | `function` | `-` | Click event handler |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Swap
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const isOn = $(false);
|
||||
|
||||
return Swap({
|
||||
value: isOn,
|
||||
on: "🌟 ON",
|
||||
off: "💫 OFF",
|
||||
onclick: () => isOn(!isOn())
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Icon Swap
|
||||
|
||||
<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-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconsDemo = () => {
|
||||
const isOn = $(false);
|
||||
|
||||
return Swap({
|
||||
value: isOn,
|
||||
on: Icons.iconShow,
|
||||
off: Icons.iconHide,
|
||||
onclick: () => isOn(!isOn())
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, '#demo-icons');
|
||||
```
|
||||
|
||||
### Emoji Swap
|
||||
|
||||
<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-emoji" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const EmojiDemo = () => {
|
||||
const isOn = $(false);
|
||||
|
||||
return Swap({
|
||||
value: isOn,
|
||||
on: "❤️",
|
||||
off: "🖤",
|
||||
onclick: () => isOn(!isOn())
|
||||
});
|
||||
};
|
||||
$mount(EmojiDemo, '#demo-emoji');
|
||||
```
|
||||
|
||||
### Custom Content Swap
|
||||
|
||||
<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-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CustomDemo = () => {
|
||||
const isOn = $(false);
|
||||
|
||||
return Swap({
|
||||
value: isOn,
|
||||
on: Div({ class: "badge badge-success gap-1" }, ["✅", " Active"]),
|
||||
off: Div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"]),
|
||||
onclick: () => isOn(!isOn())
|
||||
});
|
||||
};
|
||||
$mount(CustomDemo, '#demo-custom');
|
||||
```
|
||||
|
||||
### With Reactive 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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveDemo = () => {
|
||||
const isOn = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Swap({
|
||||
value: isOn,
|
||||
on: Icons.iconShow,
|
||||
off: Icons.iconHide,
|
||||
onclick: () => isOn(!isOn())
|
||||
}),
|
||||
Div({ class: 'text-center' }, () =>
|
||||
isOn()
|
||||
? Div({ class: 'alert alert-success' }, 'Content is visible')
|
||||
: Div({ class: 'alert alert-soft' }, 'Content is hidden')
|
||||
)
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Toggle Mode Swap
|
||||
|
||||
<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-mode" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ModeDemo = () => {
|
||||
const darkMode = $(false);
|
||||
const notifications = $(true);
|
||||
const sound = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
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({}, 'Sound effects'),
|
||||
Swap({
|
||||
value: sound,
|
||||
on: "🔊",
|
||||
off: "🔇",
|
||||
onclick: () => sound(!sound())
|
||||
})
|
||||
]),
|
||||
Div({ class: 'mt-2 p-3 rounded-lg', style: () => darkMode() ? 'background: #1f2937; color: white' : 'background: #f3f4f6' }, [
|
||||
Div({ class: 'text-sm' }, () => `Mode: ${darkMode() ? 'Dark' : 'Light'} | Notifications: ${notifications() ? 'On' : 'Off'} | Sound: ${sound() ? 'On' : 'Off'}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ModeDemo, '#demo-mode');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Volume'),
|
||||
Swap({
|
||||
value: $(false),
|
||||
on: "🔊",
|
||||
off: "🔇"
|
||||
})
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Like'),
|
||||
Swap({
|
||||
value: $(true),
|
||||
on: "❤️",
|
||||
off: "🤍"
|
||||
})
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Star'),
|
||||
Swap({
|
||||
value: $(false),
|
||||
on: "⭐",
|
||||
off: "☆"
|
||||
})
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Check'),
|
||||
Swap({
|
||||
value: $(true),
|
||||
on: Icons.iconSuccess,
|
||||
off: Icons.iconError
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
### Simple Todo Toggle
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-todo" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const TodoDemo = () => {
|
||||
const todos = [
|
||||
{ id: 1, text: 'Complete documentation', completed: $(true) },
|
||||
{ id: 2, text: 'Review pull requests', completed: $(false) },
|
||||
{ id: 3, text: 'Deploy to production', completed: $(false) }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Todo list'),
|
||||
...todos.map(todo =>
|
||||
Div({ class: 'flex items-center justify-between p-2 bg-base-200 rounded-lg' }, [
|
||||
Span({ class: todo.completed() ? 'line-through opacity-50' : '' }, todo.text),
|
||||
Swap({
|
||||
value: todo.completed,
|
||||
on: Icons.iconSuccess,
|
||||
off: Icons.iconClose,
|
||||
onclick: () => todo.completed(!todo.completed())
|
||||
})
|
||||
])
|
||||
),
|
||||
Div({ class: 'mt-2 text-sm opacity-70' }, () => {
|
||||
const completed = todos.filter(t => t.completed()).length;
|
||||
return `${completed} of ${todos.length} tasks completed`;
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(TodoDemo, '#demo-todo');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initSwapExamples = () => {
|
||||
|
||||
// 1. Basic Swap
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const isOn = $(false);
|
||||
|
||||
return Swap({
|
||||
value: isOn,
|
||||
on: "🌟 ON",
|
||||
off: "💫 OFF",
|
||||
onclick: () => isOn(!isOn())
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Icon Swap
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
const isOn = $(false);
|
||||
|
||||
return Swap({
|
||||
value: isOn,
|
||||
on: Icons.iconShow,
|
||||
off: Icons.iconHide,
|
||||
onclick: () => isOn(!isOn())
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 3. Emoji Swap
|
||||
const emojiTarget = document.querySelector('#demo-emoji');
|
||||
if (emojiTarget && !emojiTarget.hasChildNodes()) {
|
||||
const EmojiDemo = () => {
|
||||
const isOn = $(false);
|
||||
|
||||
return Swap({
|
||||
value: isOn,
|
||||
on: "❤️",
|
||||
off: "🖤",
|
||||
onclick: () => isOn(!isOn())
|
||||
});
|
||||
};
|
||||
$mount(EmojiDemo, emojiTarget);
|
||||
}
|
||||
|
||||
// 4. Custom Content Swap
|
||||
const customTarget = document.querySelector('#demo-custom');
|
||||
if (customTarget && !customTarget.hasChildNodes()) {
|
||||
const CustomDemo = () => {
|
||||
const isOn = $(false);
|
||||
|
||||
return Swap({
|
||||
value: isOn,
|
||||
on: Div({ class: "badge badge-success gap-1" }, ["✅", " Active"]),
|
||||
off: Div({ class: "badge badge-ghost gap-1" }, ["⭕", " Inactive"]),
|
||||
onclick: () => isOn(!isOn())
|
||||
});
|
||||
};
|
||||
$mount(CustomDemo, customTarget);
|
||||
}
|
||||
|
||||
// 5. Reactive State
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const isOn = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Swap({
|
||||
value: isOn,
|
||||
on: Icons.iconShow,
|
||||
off: Icons.iconHide,
|
||||
onclick: () => isOn(!isOn())
|
||||
}),
|
||||
Div({ class: 'text-center' }, () =>
|
||||
isOn()
|
||||
? Div({ class: 'alert alert-success' }, 'Content is visible')
|
||||
: Div({ class: 'alert alert-soft' }, 'Content is hidden')
|
||||
)
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 6. Toggle Mode Swap
|
||||
const modeTarget = document.querySelector('#demo-mode');
|
||||
if (modeTarget && !modeTarget.hasChildNodes()) {
|
||||
const ModeDemo = () => {
|
||||
const darkMode = $(false);
|
||||
const notifications = $(true);
|
||||
const sound = $(false);
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
||||
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({}, 'Sound effects'),
|
||||
Swap({
|
||||
value: sound,
|
||||
on: "🔊",
|
||||
off: "🔇",
|
||||
onclick: () => sound(!sound())
|
||||
})
|
||||
]),
|
||||
Div({ class: 'mt-2 p-3 rounded-lg', style: () => darkMode() ? 'background: #1f2937; color: white' : 'background: #f3f4f6' }, [
|
||||
Div({ class: 'text-sm' }, () => `Mode: ${darkMode() ? 'Dark' : 'Light'} | Notifications: ${notifications() ? 'On' : 'Off'} | Sound: ${sound() ? 'On' : 'Off'}`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ModeDemo, modeTarget);
|
||||
}
|
||||
|
||||
// 7. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center items-center' }, [
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Volume'),
|
||||
Swap({
|
||||
value: $(false),
|
||||
on: "🔊",
|
||||
off: "🔇"
|
||||
})
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Like'),
|
||||
Swap({
|
||||
value: $(true),
|
||||
on: "❤️",
|
||||
off: "🤍"
|
||||
})
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Star'),
|
||||
Swap({
|
||||
value: $(false),
|
||||
on: "⭐",
|
||||
off: "☆"
|
||||
})
|
||||
]),
|
||||
Div({ class: 'text-center' }, [
|
||||
Div({ class: 'text-xs mb-2' }, 'Check'),
|
||||
Swap({
|
||||
value: $(true),
|
||||
on: Icons.iconSuccess,
|
||||
off: Icons.iconError
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
|
||||
// 8. Simple Todo Toggle
|
||||
const todoTarget = document.querySelector('#demo-todo');
|
||||
if (todoTarget && !todoTarget.hasChildNodes()) {
|
||||
const TodoDemo = () => {
|
||||
const todos = [
|
||||
{ id: 1, text: 'Complete documentation', completed: $(true) },
|
||||
{ id: 2, text: 'Review pull requests', completed: $(false) },
|
||||
{ id: 3, text: 'Deploy to production', completed: $(false) }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-3' }, [
|
||||
Div({ class: 'text-sm font-bold mb-2' }, 'Todo list'),
|
||||
...todos.map(todo =>
|
||||
Div({ class: 'flex items-center justify-between p-2 bg-base-200 rounded-lg' }, [
|
||||
Span({ class: todo.completed() ? 'line-through opacity-50' : '' }, todo.text),
|
||||
Swap({
|
||||
value: todo.completed,
|
||||
on: Icons.iconSuccess,
|
||||
off: Icons.iconClose,
|
||||
onclick: () => todo.completed(!todo.completed())
|
||||
})
|
||||
])
|
||||
),
|
||||
Div({ class: 'mt-2 text-sm opacity-70' }, () => {
|
||||
const completed = todos.filter(t => t.completed()).length;
|
||||
return `${completed} of ${todos.length} tasks completed`;
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(TodoDemo, todoTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initSwapExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initSwapExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
716
docs/components_old/table.md
Normal file
716
docs/components_old/table.md
Normal file
@@ -0,0 +1,716 @@
|
||||
# Table
|
||||
|
||||
Data table component with sorting, pagination, zebra stripes, pin rows, and custom cell rendering.
|
||||
|
||||
## Tag
|
||||
|
||||
`Table`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :--------------- | :----------------------------------------------- |
|
||||
| `items` | `Array \| Signal<Array>` | `[]` | Data array to display |
|
||||
| `columns` | `Array<{label: string, key?: string, render?: function, class?: string, footer?: string}>` | `[]` | Column definitions |
|
||||
| `keyFn` | `function` | `(item, idx) => idx` | Unique key function for rows |
|
||||
| `zebra` | `boolean \| Signal<boolean>` | `false` | Enable zebra striping |
|
||||
| `pinRows` | `boolean \| Signal<boolean>` | `false` | Pin header rows on scroll |
|
||||
| `empty` | `string \| VNode` | `'No data'` | Content to show when no data |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Table
|
||||
|
||||
<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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const users = [
|
||||
{ id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
|
||||
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
|
||||
{ id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' }
|
||||
];
|
||||
|
||||
return Table({
|
||||
items: users,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Name', key: 'name' },
|
||||
{ label: 'Email', key: 'email' },
|
||||
{ label: 'Role', key: 'role' }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Zebra Stripes
|
||||
|
||||
<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-zebra" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ZebraDemo = () => {
|
||||
const products = [
|
||||
{ id: 1, name: 'Laptop', price: '$999', stock: 15 },
|
||||
{ id: 2, name: 'Mouse', price: '$29', stock: 42 },
|
||||
{ id: 3, name: 'Keyboard', price: '$79', stock: 28 },
|
||||
{ id: 4, name: 'Monitor', price: '$299', stock: 12 }
|
||||
];
|
||||
|
||||
return Table({
|
||||
items: products,
|
||||
columns: [
|
||||
{ label: 'Product', key: 'name' },
|
||||
{ label: 'Price', key: 'price' },
|
||||
{ label: 'Stock', key: 'stock' }
|
||||
],
|
||||
zebra: true
|
||||
});
|
||||
};
|
||||
$mount(ZebraDemo, '#demo-zebra');
|
||||
```
|
||||
|
||||
### With Custom Cell Rendering
|
||||
|
||||
<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-custom" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CustomDemo = () => {
|
||||
const orders = [
|
||||
{ id: 101, customer: 'Alice', amount: 250, status: 'completed' },
|
||||
{ id: 102, customer: 'Bob', amount: 89, status: 'pending' },
|
||||
{ id: 103, customer: 'Charlie', amount: 450, status: 'shipped' }
|
||||
];
|
||||
|
||||
return Table({
|
||||
items: orders,
|
||||
columns: [
|
||||
{ label: 'Order ID', key: 'id' },
|
||||
{ label: 'Customer', key: 'customer' },
|
||||
{
|
||||
label: 'Amount',
|
||||
key: 'amount',
|
||||
render: (item) => `$${item.amount}`
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
key: 'status',
|
||||
render: (item) => {
|
||||
const statusClass = {
|
||||
completed: 'badge badge-success',
|
||||
pending: 'badge badge-warning',
|
||||
shipped: 'badge badge-info'
|
||||
};
|
||||
return Span({ class: statusClass[item.status] }, item.status);
|
||||
}
|
||||
}
|
||||
],
|
||||
zebra: true
|
||||
});
|
||||
};
|
||||
$mount(CustomDemo, '#demo-custom');
|
||||
```
|
||||
|
||||
### With Footers
|
||||
|
||||
<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-footer" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FooterDemo = () => {
|
||||
const sales = [
|
||||
{ month: 'January', revenue: 12500, expenses: 8900 },
|
||||
{ month: 'February', revenue: 14200, expenses: 9200 },
|
||||
{ month: 'March', revenue: 16800, expenses: 10100 }
|
||||
];
|
||||
|
||||
const totalRevenue = sales.reduce((sum, item) => sum + item.revenue, 0);
|
||||
const totalExpenses = sales.reduce((sum, item) => sum + item.expenses, 0);
|
||||
|
||||
return Table({
|
||||
items: sales,
|
||||
columns: [
|
||||
{ label: 'Month', key: 'month' },
|
||||
{
|
||||
label: 'Revenue',
|
||||
key: 'revenue',
|
||||
render: (item) => `$${item.revenue.toLocaleString()}`,
|
||||
footer: `Total: $${totalRevenue.toLocaleString()}`
|
||||
},
|
||||
{
|
||||
label: 'Expenses',
|
||||
key: 'expenses',
|
||||
render: (item) => `$${item.expenses.toLocaleString()}`,
|
||||
footer: `Total: $${totalExpenses.toLocaleString()}`
|
||||
},
|
||||
{
|
||||
label: 'Profit',
|
||||
render: (item) => `$${(item.revenue - item.expenses).toLocaleString()}`,
|
||||
footer: `$${(totalRevenue - totalExpenses).toLocaleString()}`
|
||||
}
|
||||
],
|
||||
zebra: true
|
||||
});
|
||||
};
|
||||
$mount(FooterDemo, '#demo-footer');
|
||||
```
|
||||
|
||||
### Empty 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-empty" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const EmptyDemo = () => {
|
||||
const emptyList = [];
|
||||
|
||||
return Table({
|
||||
items: emptyList,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Name', key: 'name' }
|
||||
],
|
||||
empty: Div({ class: 'flex flex-col items-center gap-2' }, [
|
||||
Icons.iconInfo,
|
||||
Span({}, 'No records found')
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(EmptyDemo, '#demo-empty');
|
||||
```
|
||||
|
||||
### Reactive Data
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveDemo = () => {
|
||||
const filter = $('all');
|
||||
const tasks = $([
|
||||
{ id: 1, title: 'Complete documentation', completed: true },
|
||||
{ id: 2, title: 'Review pull requests', completed: false },
|
||||
{ id: 3, title: 'Deploy to production', completed: false },
|
||||
{ id: 4, title: 'Update dependencies', completed: true }
|
||||
]);
|
||||
|
||||
const filteredTasks = () => {
|
||||
if (filter() === 'completed') {
|
||||
return tasks().filter(t => t.completed);
|
||||
} else if (filter() === 'pending') {
|
||||
return tasks().filter(t => !t.completed);
|
||||
}
|
||||
return tasks();
|
||||
};
|
||||
|
||||
const addTask = () => {
|
||||
const newId = Math.max(...tasks().map(t => t.id), 0) + 1;
|
||||
tasks([...tasks(), { id: newId, title: `Task ${newId}`, completed: false }]);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex gap-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => filter('all')
|
||||
}, 'All'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => filter('completed')
|
||||
}, 'Completed'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => filter('pending')
|
||||
}, 'Pending'),
|
||||
Button({
|
||||
class: 'btn btn-sm btn-primary',
|
||||
onclick: addTask
|
||||
}, 'Add Task')
|
||||
]),
|
||||
Table({
|
||||
items: filteredTasks,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Title', key: 'title' },
|
||||
{
|
||||
label: 'Status',
|
||||
render: (item) => item.completed
|
||||
? Span({ class: 'badge badge-success' }, '✓ Done')
|
||||
: Span({ class: 'badge badge-warning' }, '○ Pending')
|
||||
}
|
||||
],
|
||||
zebra: true
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### With Actions
|
||||
|
||||
<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-actions" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ActionsDemo = () => {
|
||||
const users = $([
|
||||
{ id: 1, name: 'John Doe', email: 'john@example.com', active: true },
|
||||
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', active: false },
|
||||
{ id: 3, name: 'Bob Johnson', email: 'bob@example.com', active: true }
|
||||
]);
|
||||
|
||||
const deleteUser = (id) => {
|
||||
users(users().filter(u => u.id !== id));
|
||||
Toast('User deleted', 'alert-info', 2000);
|
||||
};
|
||||
|
||||
const toggleActive = (id) => {
|
||||
users(users().map(u =>
|
||||
u.id === id ? { ...u, active: !u.active } : u
|
||||
));
|
||||
};
|
||||
|
||||
return Table({
|
||||
items: users,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Name', key: 'name' },
|
||||
{ label: 'Email', key: 'email' },
|
||||
{
|
||||
label: 'Status',
|
||||
render: (item) => item.active
|
||||
? Span({ class: 'badge badge-success' }, 'Active')
|
||||
: Span({ class: 'badge badge-ghost' }, 'Inactive')
|
||||
},
|
||||
{
|
||||
label: 'Actions',
|
||||
render: (item) => Div({ class: 'flex gap-1' }, [
|
||||
Button({
|
||||
class: 'btn btn-xs btn-ghost',
|
||||
onclick: () => toggleActive(item.id)
|
||||
}, item.active ? 'Deactivate' : 'Activate'),
|
||||
Button({
|
||||
class: 'btn btn-xs btn-error',
|
||||
onclick: () => deleteUser(item.id)
|
||||
}, 'Delete')
|
||||
])
|
||||
}
|
||||
],
|
||||
zebra: true
|
||||
});
|
||||
};
|
||||
$mount(ActionsDemo, '#demo-actions');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const data = [
|
||||
{ id: 1, name: 'Item 1', value: 100 },
|
||||
{ id: 2, name: 'Item 2', value: 200 },
|
||||
{ id: 3, name: 'Item 3', value: 300 }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Table'),
|
||||
Table({
|
||||
items: data,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Name', key: 'name' },
|
||||
{ label: 'Value', key: 'value' }
|
||||
]
|
||||
}),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Zebra Stripes'),
|
||||
Table({
|
||||
items: data,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Name', key: 'name' },
|
||||
{ label: 'Value', key: 'value' }
|
||||
],
|
||||
zebra: true
|
||||
}),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Compact Table'),
|
||||
Table({
|
||||
items: data,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Name', key: 'name' },
|
||||
{ label: 'Value', key: 'value' }
|
||||
],
|
||||
class: 'table-compact'
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initTableExamples = () => {
|
||||
|
||||
// 1. Basic Table
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const users = [
|
||||
{ id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
|
||||
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
|
||||
{ id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Editor' }
|
||||
];
|
||||
|
||||
return Table({
|
||||
items: users,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Name', key: 'name' },
|
||||
{ label: 'Email', key: 'email' },
|
||||
{ label: 'Role', key: 'role' }
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Zebra Stripes
|
||||
const zebraTarget = document.querySelector('#demo-zebra');
|
||||
if (zebraTarget && !zebraTarget.hasChildNodes()) {
|
||||
const ZebraDemo = () => {
|
||||
const products = [
|
||||
{ id: 1, name: 'Laptop', price: '$999', stock: 15 },
|
||||
{ id: 2, name: 'Mouse', price: '$29', stock: 42 },
|
||||
{ id: 3, name: 'Keyboard', price: '$79', stock: 28 },
|
||||
{ id: 4, name: 'Monitor', price: '$299', stock: 12 }
|
||||
];
|
||||
|
||||
return Table({
|
||||
items: products,
|
||||
columns: [
|
||||
{ label: 'Product', key: 'name' },
|
||||
{ label: 'Price', key: 'price' },
|
||||
{ label: 'Stock', key: 'stock' }
|
||||
],
|
||||
zebra: true
|
||||
});
|
||||
};
|
||||
$mount(ZebraDemo, zebraTarget);
|
||||
}
|
||||
|
||||
// 3. With Custom Cell Rendering
|
||||
const customTarget = document.querySelector('#demo-custom');
|
||||
if (customTarget && !customTarget.hasChildNodes()) {
|
||||
const CustomDemo = () => {
|
||||
const orders = [
|
||||
{ id: 101, customer: 'Alice', amount: 250, status: 'completed' },
|
||||
{ id: 102, customer: 'Bob', amount: 89, status: 'pending' },
|
||||
{ id: 103, customer: 'Charlie', amount: 450, status: 'shipped' }
|
||||
];
|
||||
|
||||
return Table({
|
||||
items: orders,
|
||||
columns: [
|
||||
{ label: 'Order ID', key: 'id' },
|
||||
{ label: 'Customer', key: 'customer' },
|
||||
{
|
||||
label: 'Amount',
|
||||
key: 'amount',
|
||||
render: (item) => `$${item.amount}`
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
key: 'status',
|
||||
render: (item) => {
|
||||
const statusClass = {
|
||||
completed: 'badge badge-success',
|
||||
pending: 'badge badge-warning',
|
||||
shipped: 'badge badge-info'
|
||||
};
|
||||
return Span({ class: statusClass[item.status] }, item.status);
|
||||
}
|
||||
}
|
||||
],
|
||||
zebra: true
|
||||
});
|
||||
};
|
||||
$mount(CustomDemo, customTarget);
|
||||
}
|
||||
|
||||
// 4. With Footers
|
||||
const footerTarget = document.querySelector('#demo-footer');
|
||||
if (footerTarget && !footerTarget.hasChildNodes()) {
|
||||
const FooterDemo = () => {
|
||||
const sales = [
|
||||
{ month: 'January', revenue: 12500, expenses: 8900 },
|
||||
{ month: 'February', revenue: 14200, expenses: 9200 },
|
||||
{ month: 'March', revenue: 16800, expenses: 10100 }
|
||||
];
|
||||
|
||||
const totalRevenue = sales.reduce((sum, item) => sum + item.revenue, 0);
|
||||
const totalExpenses = sales.reduce((sum, item) => sum + item.expenses, 0);
|
||||
|
||||
return Table({
|
||||
items: sales,
|
||||
columns: [
|
||||
{ label: 'Month', key: 'month' },
|
||||
{
|
||||
label: 'Revenue',
|
||||
key: 'revenue',
|
||||
render: (item) => `$${item.revenue.toLocaleString()}`,
|
||||
footer: `Total: $${totalRevenue.toLocaleString()}`
|
||||
},
|
||||
{
|
||||
label: 'Expenses',
|
||||
key: 'expenses',
|
||||
render: (item) => `$${item.expenses.toLocaleString()}`,
|
||||
footer: `Total: $${totalExpenses.toLocaleString()}`
|
||||
},
|
||||
{
|
||||
label: 'Profit',
|
||||
render: (item) => `$${(item.revenue - item.expenses).toLocaleString()}`,
|
||||
footer: `$${(totalRevenue - totalExpenses).toLocaleString()}`
|
||||
}
|
||||
],
|
||||
zebra: true
|
||||
});
|
||||
};
|
||||
$mount(FooterDemo, footerTarget);
|
||||
}
|
||||
|
||||
// 5. Empty State
|
||||
const emptyTarget = document.querySelector('#demo-empty');
|
||||
if (emptyTarget && !emptyTarget.hasChildNodes()) {
|
||||
const EmptyDemo = () => {
|
||||
const emptyList = [];
|
||||
|
||||
return Table({
|
||||
items: emptyList,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Name', key: 'name' }
|
||||
],
|
||||
empty: Div({ class: 'flex flex-col items-center gap-2' }, [
|
||||
Icons.iconInfo,
|
||||
Span({}, 'No records found')
|
||||
])
|
||||
});
|
||||
};
|
||||
$mount(EmptyDemo, emptyTarget);
|
||||
}
|
||||
|
||||
// 6. Reactive Data
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const filter = $('all');
|
||||
const tasks = $([
|
||||
{ id: 1, title: 'Complete documentation', completed: true },
|
||||
{ id: 2, title: 'Review pull requests', completed: false },
|
||||
{ id: 3, title: 'Deploy to production', completed: false },
|
||||
{ id: 4, title: 'Update dependencies', completed: true }
|
||||
]);
|
||||
|
||||
const filteredTasks = () => {
|
||||
if (filter() === 'completed') {
|
||||
return tasks().filter(t => t.completed);
|
||||
} else if (filter() === 'pending') {
|
||||
return tasks().filter(t => !t.completed);
|
||||
}
|
||||
return tasks();
|
||||
};
|
||||
|
||||
const addTask = () => {
|
||||
const newId = Math.max(...tasks().map(t => t.id), 0) + 1;
|
||||
tasks([...tasks(), { id: newId, title: `Task ${newId}`, completed: false }]);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex gap-2' }, [
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => filter('all')
|
||||
}, 'All'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => filter('completed')
|
||||
}, 'Completed'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => filter('pending')
|
||||
}, 'Pending'),
|
||||
Button({
|
||||
class: 'btn btn-sm btn-primary',
|
||||
onclick: addTask
|
||||
}, 'Add Task')
|
||||
]),
|
||||
Table({
|
||||
items: filteredTasks,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Title', key: 'title' },
|
||||
{
|
||||
label: 'Status',
|
||||
render: (item) => item.completed
|
||||
? Span({ class: 'badge badge-success' }, '✓ Done')
|
||||
: Span({ class: 'badge badge-warning' }, '○ Pending')
|
||||
}
|
||||
],
|
||||
zebra: true
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 7. With Actions
|
||||
const actionsTarget = document.querySelector('#demo-actions');
|
||||
if (actionsTarget && !actionsTarget.hasChildNodes()) {
|
||||
const ActionsDemo = () => {
|
||||
const users = $([
|
||||
{ id: 1, name: 'John Doe', email: 'john@example.com', active: true },
|
||||
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', active: false },
|
||||
{ id: 3, name: 'Bob Johnson', email: 'bob@example.com', active: true }
|
||||
]);
|
||||
|
||||
const deleteUser = (id) => {
|
||||
users(users().filter(u => u.id !== id));
|
||||
Toast('User deleted', 'alert-info', 2000);
|
||||
};
|
||||
|
||||
const toggleActive = (id) => {
|
||||
users(users().map(u =>
|
||||
u.id === id ? { ...u, active: !u.active } : u
|
||||
));
|
||||
};
|
||||
|
||||
return Table({
|
||||
items: users,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Name', key: 'name' },
|
||||
{ label: 'Email', key: 'email' },
|
||||
{
|
||||
label: 'Status',
|
||||
render: (item) => item.active
|
||||
? Span({ class: 'badge badge-success' }, 'Active')
|
||||
: Span({ class: 'badge badge-ghost' }, 'Inactive')
|
||||
},
|
||||
{
|
||||
label: 'Actions',
|
||||
render: (item) => Div({ class: 'flex gap-1' }, [
|
||||
Button({
|
||||
class: 'btn btn-xs btn-ghost',
|
||||
onclick: () => toggleActive(item.id)
|
||||
}, item.active ? 'Deactivate' : 'Activate'),
|
||||
Button({
|
||||
class: 'btn btn-xs btn-error',
|
||||
onclick: () => deleteUser(item.id)
|
||||
}, 'Delete')
|
||||
])
|
||||
}
|
||||
],
|
||||
zebra: true
|
||||
});
|
||||
};
|
||||
$mount(ActionsDemo, actionsTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const data = [
|
||||
{ id: 1, name: 'Item 1', value: 100 },
|
||||
{ id: 2, name: 'Item 2', value: 200 },
|
||||
{ id: 3, name: 'Item 3', value: 300 }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Table'),
|
||||
Table({
|
||||
items: data,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Name', key: 'name' },
|
||||
{ label: 'Value', key: 'value' }
|
||||
]
|
||||
}),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Zebra Stripes'),
|
||||
Table({
|
||||
items: data,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Name', key: 'name' },
|
||||
{ label: 'Value', key: 'value' }
|
||||
],
|
||||
zebra: true
|
||||
}),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Compact Table'),
|
||||
Table({
|
||||
items: data,
|
||||
columns: [
|
||||
{ label: 'ID', key: 'id' },
|
||||
{ label: 'Name', key: 'name' },
|
||||
{ label: 'Value', key: 'value' }
|
||||
],
|
||||
class: 'table-compact'
|
||||
})
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initTableExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initTableExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
677
docs/components_old/tabs.md
Normal file
677
docs/components_old/tabs.md
Normal file
@@ -0,0 +1,677 @@
|
||||
# Tabs
|
||||
|
||||
Tabs component for organizing content into separate panels with tab navigation.
|
||||
|
||||
## Tag
|
||||
|
||||
`Tabs`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `items` | `Array<TabItem> \| Signal<Array>` | `[]` | Array of tab items |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
### TabItem Structure
|
||||
|
||||
| Property | Type | Description |
|
||||
| :---------- | :--------------------------- | :----------------------------------------------- |
|
||||
| `label` | `string \| VNode` | Tab button label |
|
||||
| `content` | `VNode \| function` | Content to display when tab is active |
|
||||
| `active` | `boolean \| Signal<boolean>` | Whether this tab is active (only one per group) |
|
||||
| `disabled` | `boolean` | Whether tab is disabled |
|
||||
| `tip` | `string` | Tooltip text for the tab |
|
||||
| `onclick` | `function` | Click handler (optional, overrides default) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Tabs
|
||||
|
||||
<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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const activeTab = $('tab1');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Tab 1',
|
||||
active: () => activeTab() === 'tab1',
|
||||
onclick: () => activeTab('tab1'),
|
||||
content: Div({ class: 'p-4' }, 'Content for Tab 1')
|
||||
},
|
||||
{
|
||||
label: 'Tab 2',
|
||||
active: () => activeTab() === 'tab2',
|
||||
onclick: () => activeTab('tab2'),
|
||||
content: Div({ class: 'p-4' }, 'Content for Tab 2')
|
||||
},
|
||||
{
|
||||
label: 'Tab 3',
|
||||
active: () => activeTab() === 'tab3',
|
||||
onclick: () => activeTab('tab3'),
|
||||
content: Div({ class: 'p-4' }, 'Content for Tab 3')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### With Icons
|
||||
|
||||
<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-icons" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconsDemo = () => {
|
||||
const activeTab = $('home');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: Span({ class: 'flex items-center gap-2' }, ['🏠', 'Home']),
|
||||
active: () => activeTab() === 'home',
|
||||
onclick: () => activeTab('home'),
|
||||
content: Div({ class: 'p-4' }, 'Welcome to the Home tab!')
|
||||
},
|
||||
{
|
||||
label: Span({ class: 'flex items-center gap-2' }, ['⭐', 'Favorites']),
|
||||
active: () => activeTab() === 'favorites',
|
||||
onclick: () => activeTab('favorites'),
|
||||
content: Div({ class: 'p-4' }, 'Your favorite items appear here.')
|
||||
},
|
||||
{
|
||||
label: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Settings']),
|
||||
active: () => activeTab() === 'settings',
|
||||
onclick: () => activeTab('settings'),
|
||||
content: Div({ class: 'p-4' }, 'Configure your preferences.')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, '#demo-icons');
|
||||
```
|
||||
|
||||
### With Tooltips
|
||||
|
||||
<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-tooltips" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const TooltipsDemo = () => {
|
||||
const activeTab = $('profile');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Profile',
|
||||
tip: 'View your profile information',
|
||||
active: () => activeTab() === 'profile',
|
||||
onclick: () => activeTab('profile'),
|
||||
content: Div({ class: 'p-4' }, 'Profile information here.')
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
tip: 'Adjust your preferences',
|
||||
active: () => activeTab() === 'settings',
|
||||
onclick: () => activeTab('settings'),
|
||||
content: Div({ class: 'p-4' }, 'Settings configuration.')
|
||||
},
|
||||
{
|
||||
label: 'Notifications',
|
||||
tip: 'Manage notifications',
|
||||
active: () => activeTab() === 'notifications',
|
||||
onclick: () => activeTab('notifications'),
|
||||
content: Div({ class: 'p-4' }, 'Notification settings.')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(TooltipsDemo, '#demo-tooltips');
|
||||
```
|
||||
|
||||
### Disabled Tab
|
||||
|
||||
<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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DisabledDemo = () => {
|
||||
const activeTab = $('basic');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Basic',
|
||||
active: () => activeTab() === 'basic',
|
||||
onclick: () => activeTab('basic'),
|
||||
content: Div({ class: 'p-4' }, 'Basic features available.')
|
||||
},
|
||||
{
|
||||
label: 'Premium',
|
||||
disabled: true,
|
||||
tip: 'Upgrade to access',
|
||||
content: Div({ class: 'p-4' }, 'Premium content (locked)')
|
||||
},
|
||||
{
|
||||
label: 'Pro',
|
||||
disabled: true,
|
||||
tip: 'Coming soon',
|
||||
content: Div({ class: 'p-4' }, 'Pro features (coming soon)')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(DisabledDemo, '#demo-disabled');
|
||||
```
|
||||
|
||||
### Reactive Content
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveDemo = () => {
|
||||
const activeTab = $('counter');
|
||||
const count = $(0);
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Counter',
|
||||
active: () => activeTab() === 'counter',
|
||||
onclick: () => activeTab('counter'),
|
||||
content: Div({ class: 'p-4 text-center' }, [
|
||||
Div({ class: 'text-4xl font-bold mb-4' }, () => count()),
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => count(count() + 1)
|
||||
}, 'Increment')
|
||||
])
|
||||
},
|
||||
{
|
||||
label: 'Timer',
|
||||
active: () => activeTab() === 'timer',
|
||||
onclick: () => activeTab('timer'),
|
||||
content: Div({ class: 'p-4' }, () => `Current time: ${new Date().toLocaleTimeString()}`)
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
active: () => activeTab() === 'status',
|
||||
onclick: () => activeTab('status'),
|
||||
content: Div({ class: 'p-4' }, () => `Counter value: ${count()}, Last updated: ${new Date().toLocaleTimeString()}`)
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Form Tabs
|
||||
|
||||
<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-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FormTabs = () => {
|
||||
const activeTab = $('personal');
|
||||
const formData = $({
|
||||
name: '',
|
||||
email: '',
|
||||
address: '',
|
||||
city: '',
|
||||
notifications: true,
|
||||
newsletter: false
|
||||
});
|
||||
|
||||
const updateField = (field, value) => {
|
||||
formData({ ...formData(), [field]: value });
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
Toast('Form submitted!', 'alert-success', 2000);
|
||||
console.log(formData());
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Personal Info',
|
||||
active: () => activeTab() === 'personal',
|
||||
onclick: () => activeTab('personal'),
|
||||
content: Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: '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)
|
||||
})
|
||||
])
|
||||
},
|
||||
{
|
||||
label: 'Address',
|
||||
active: () => activeTab() === 'address',
|
||||
onclick: () => activeTab('address'),
|
||||
content: Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: 'Address',
|
||||
value: () => formData().address,
|
||||
placeholder: 'Street address',
|
||||
oninput: (e) => updateField('address', e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'City',
|
||||
value: () => formData().city,
|
||||
placeholder: 'City',
|
||||
oninput: (e) => updateField('city', e.target.value)
|
||||
})
|
||||
])
|
||||
},
|
||||
{
|
||||
label: 'Preferences',
|
||||
active: () => activeTab() === 'prefs',
|
||||
onclick: () => activeTab('prefs'),
|
||||
content: Div({ class: 'p-4 space-y-4' }, [
|
||||
Checkbox({
|
||||
label: 'Email notifications',
|
||||
value: () => formData().notifications,
|
||||
onclick: () => updateField('notifications', !formData().notifications)
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Newsletter subscription',
|
||||
value: () => formData().newsletter,
|
||||
onclick: () => updateField('newsletter', !formData().newsletter)
|
||||
})
|
||||
])
|
||||
}
|
||||
]
|
||||
}),
|
||||
Div({ class: 'flex justify-end mt-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: handleSubmit
|
||||
}, 'Submit')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(FormTabs, '#demo-form');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const items = [
|
||||
{ label: 'Tab 1', content: 'Content 1' },
|
||||
{ label: 'Tab 2', content: 'Content 2' },
|
||||
{ label: 'Tab 3', content: 'Content 3' }
|
||||
].map((tab, idx) => ({
|
||||
...tab,
|
||||
active: () => idx === 0,
|
||||
content: Div({ class: 'p-4' }, tab.content)
|
||||
}));
|
||||
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Tabs'),
|
||||
Tabs({ items }),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Boxed Tabs'),
|
||||
Tabs({ items, class: 'tabs-box' }),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Lifted Tabs'),
|
||||
Tabs({ items, class: 'tabs-lifted' })
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initTabsExamples = () => {
|
||||
|
||||
// 1. Basic Tabs
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const activeTab = $('tab1');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Tab 1',
|
||||
active: () => activeTab() === 'tab1',
|
||||
onclick: () => activeTab('tab1'),
|
||||
content: Div({ class: 'p-4' }, 'Content for Tab 1')
|
||||
},
|
||||
{
|
||||
label: 'Tab 2',
|
||||
active: () => activeTab() === 'tab2',
|
||||
onclick: () => activeTab('tab2'),
|
||||
content: Div({ class: 'p-4' }, 'Content for Tab 2')
|
||||
},
|
||||
{
|
||||
label: 'Tab 3',
|
||||
active: () => activeTab() === 'tab3',
|
||||
onclick: () => activeTab('tab3'),
|
||||
content: Div({ class: 'p-4' }, 'Content for Tab 3')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. With Icons
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
const activeTab = $('home');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: Span({ class: 'flex items-center gap-2' }, ['🏠', 'Home']),
|
||||
active: () => activeTab() === 'home',
|
||||
onclick: () => activeTab('home'),
|
||||
content: Div({ class: 'p-4' }, 'Welcome to the Home tab!')
|
||||
},
|
||||
{
|
||||
label: Span({ class: 'flex items-center gap-2' }, ['⭐', 'Favorites']),
|
||||
active: () => activeTab() === 'favorites',
|
||||
onclick: () => activeTab('favorites'),
|
||||
content: Div({ class: 'p-4' }, 'Your favorite items appear here.')
|
||||
},
|
||||
{
|
||||
label: Span({ class: 'flex items-center gap-2' }, ['⚙️', 'Settings']),
|
||||
active: () => activeTab() === 'settings',
|
||||
onclick: () => activeTab('settings'),
|
||||
content: Div({ class: 'p-4' }, 'Configure your preferences.')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 3. With Tooltips
|
||||
const tooltipsTarget = document.querySelector('#demo-tooltips');
|
||||
if (tooltipsTarget && !tooltipsTarget.hasChildNodes()) {
|
||||
const TooltipsDemo = () => {
|
||||
const activeTab = $('profile');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Profile',
|
||||
tip: 'View your profile information',
|
||||
active: () => activeTab() === 'profile',
|
||||
onclick: () => activeTab('profile'),
|
||||
content: Div({ class: 'p-4' }, 'Profile information here.')
|
||||
},
|
||||
{
|
||||
label: 'Settings',
|
||||
tip: 'Adjust your preferences',
|
||||
active: () => activeTab() === 'settings',
|
||||
onclick: () => activeTab('settings'),
|
||||
content: Div({ class: 'p-4' }, 'Settings configuration.')
|
||||
},
|
||||
{
|
||||
label: 'Notifications',
|
||||
tip: 'Manage notifications',
|
||||
active: () => activeTab() === 'notifications',
|
||||
onclick: () => activeTab('notifications'),
|
||||
content: Div({ class: 'p-4' }, 'Notification settings.')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(TooltipsDemo, tooltipsTarget);
|
||||
}
|
||||
|
||||
// 4. Disabled Tab
|
||||
const disabledTarget = document.querySelector('#demo-disabled');
|
||||
if (disabledTarget && !disabledTarget.hasChildNodes()) {
|
||||
const DisabledDemo = () => {
|
||||
const activeTab = $('basic');
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Basic',
|
||||
active: () => activeTab() === 'basic',
|
||||
onclick: () => activeTab('basic'),
|
||||
content: Div({ class: 'p-4' }, 'Basic features available.')
|
||||
},
|
||||
{
|
||||
label: 'Premium',
|
||||
disabled: true,
|
||||
tip: 'Upgrade to access',
|
||||
content: Div({ class: 'p-4' }, 'Premium content (locked)')
|
||||
},
|
||||
{
|
||||
label: 'Pro',
|
||||
disabled: true,
|
||||
tip: 'Coming soon',
|
||||
content: Div({ class: 'p-4' }, 'Pro features (coming soon)')
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(DisabledDemo, disabledTarget);
|
||||
}
|
||||
|
||||
// 5. Reactive Content
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const activeTab = $('counter');
|
||||
const count = $(0);
|
||||
|
||||
return Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Counter',
|
||||
active: () => activeTab() === 'counter',
|
||||
onclick: () => activeTab('counter'),
|
||||
content: Div({ class: 'p-4 text-center' }, [
|
||||
Div({ class: 'text-4xl font-bold mb-4' }, () => count()),
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: () => count(count() + 1)
|
||||
}, 'Increment')
|
||||
])
|
||||
},
|
||||
{
|
||||
label: 'Timer',
|
||||
active: () => activeTab() === 'timer',
|
||||
onclick: () => activeTab('timer'),
|
||||
content: Div({ class: 'p-4' }, () => `Current time: ${new Date().toLocaleTimeString()}`)
|
||||
},
|
||||
{
|
||||
label: 'Status',
|
||||
active: () => activeTab() === 'status',
|
||||
onclick: () => activeTab('status'),
|
||||
content: Div({ class: 'p-4' }, () => `Counter value: ${count()}, Last updated: ${new Date().toLocaleTimeString()}`)
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 6. Form Tabs
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
const FormTabs = () => {
|
||||
const activeTab = $('personal');
|
||||
const formData = $({
|
||||
name: '',
|
||||
email: '',
|
||||
address: '',
|
||||
city: '',
|
||||
notifications: true,
|
||||
newsletter: false
|
||||
});
|
||||
|
||||
const updateField = (field, value) => {
|
||||
formData({ ...formData(), [field]: value });
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
Toast('Form submitted!', 'alert-success', 2000);
|
||||
console.log(formData());
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Tabs({
|
||||
items: [
|
||||
{
|
||||
label: 'Personal Info',
|
||||
active: () => activeTab() === 'personal',
|
||||
onclick: () => activeTab('personal'),
|
||||
content: Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: '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)
|
||||
})
|
||||
])
|
||||
},
|
||||
{
|
||||
label: 'Address',
|
||||
active: () => activeTab() === 'address',
|
||||
onclick: () => activeTab('address'),
|
||||
content: Div({ class: 'p-4 space-y-4' }, [
|
||||
Input({
|
||||
label: 'Address',
|
||||
value: () => formData().address,
|
||||
placeholder: 'Street address',
|
||||
oninput: (e) => updateField('address', e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'City',
|
||||
value: () => formData().city,
|
||||
placeholder: 'City',
|
||||
oninput: (e) => updateField('city', e.target.value)
|
||||
})
|
||||
])
|
||||
},
|
||||
{
|
||||
label: 'Preferences',
|
||||
active: () => activeTab() === 'prefs',
|
||||
onclick: () => activeTab('prefs'),
|
||||
content: Div({ class: 'p-4 space-y-4' }, [
|
||||
Checkbox({
|
||||
label: 'Email notifications',
|
||||
value: () => formData().notifications,
|
||||
onclick: () => updateField('notifications', !formData().notifications)
|
||||
}),
|
||||
Checkbox({
|
||||
label: 'Newsletter subscription',
|
||||
value: () => formData().newsletter,
|
||||
onclick: () => updateField('newsletter', !formData().newsletter)
|
||||
})
|
||||
])
|
||||
}
|
||||
]
|
||||
}),
|
||||
Div({ class: 'flex justify-end mt-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: handleSubmit
|
||||
}, 'Submit')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(FormTabs, formTarget);
|
||||
}
|
||||
|
||||
// 7. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const items = [
|
||||
{ label: 'Tab 1', content: 'Content 1' },
|
||||
{ label: 'Tab 2', content: 'Content 2' },
|
||||
{ label: 'Tab 3', content: 'Content 3' }
|
||||
].map((tab, idx) => ({
|
||||
...tab,
|
||||
active: () => idx === 0,
|
||||
content: Div({ class: 'p-4' }, tab.content)
|
||||
}));
|
||||
|
||||
return Div({ class: 'flex flex-col gap-6' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Default Tabs'),
|
||||
Tabs({ items }),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Boxed Tabs'),
|
||||
Tabs({ items, class: 'tabs-box' }),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Lifted Tabs'),
|
||||
Tabs({ items, class: 'tabs-lifted' })
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initTabsExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initTabsExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
553
docs/components_old/timeline.md
Normal file
553
docs/components_old/timeline.md
Normal file
@@ -0,0 +1,553 @@
|
||||
# Timeline
|
||||
|
||||
Timeline component for displaying chronological events, steps, or progress with customizable icons and content.
|
||||
|
||||
## Tag
|
||||
|
||||
`Timeline`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :-------------------------------------- | :--------------- | :----------------------------------------------- |
|
||||
| `items` | `Array<TimelineItem> \| Signal` | `[]` | Timeline items to display |
|
||||
| `vertical` | `boolean \| Signal<boolean>` | `true` | Vertical or horizontal orientation |
|
||||
| `compact` | `boolean \| Signal<boolean>` | `false` | Compact mode with less padding |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
### TimelineItem Structure
|
||||
|
||||
| Property | Type | Description |
|
||||
| :---------- | :--------------------------- | :----------------------------------------------- |
|
||||
| `title` | `string \| VNode \| Signal` | Event title or main text |
|
||||
| `detail` | `string \| VNode \| Signal` | Additional details or description |
|
||||
| `icon` | `string \| VNode` | Custom icon (overrides type) |
|
||||
| `type` | `string` | Type: 'success', 'warning', 'error', 'info' |
|
||||
| `completed` | `boolean` | Whether event is completed (affects connector) |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Timeline
|
||||
|
||||
<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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const events = [
|
||||
{ title: 'Project Started', detail: 'Initial planning and setup', type: 'info', completed: true },
|
||||
{ title: 'Design Phase', detail: 'UI/UX design completed', type: 'success', completed: true },
|
||||
{ title: 'Development', detail: 'Core features implemented', type: 'warning', completed: false },
|
||||
{ title: 'Testing', detail: 'Quality assurance', type: 'info', completed: false },
|
||||
{ title: 'Launch', detail: 'Production deployment', type: 'success', completed: false }
|
||||
];
|
||||
|
||||
return Timeline({ items: events });
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Horizontal Timeline
|
||||
|
||||
<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-horizontal" class="bg-base-100 p-6 rounded-xl border border-base-300 overflow-x-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const HorizontalDemo = () => {
|
||||
const steps = [
|
||||
{ title: 'Step 1', detail: 'Requirements', type: 'success', completed: true },
|
||||
{ title: 'Step 2', detail: 'Design', type: 'success', completed: true },
|
||||
{ title: 'Step 3', detail: 'Development', type: 'warning', completed: false },
|
||||
{ title: 'Step 4', detail: 'Testing', type: 'info', completed: false },
|
||||
{ title: 'Step 5', detail: 'Deploy', type: 'info', completed: false }
|
||||
];
|
||||
|
||||
return Timeline({
|
||||
items: steps,
|
||||
vertical: false,
|
||||
class: 'min-w-[600px]'
|
||||
});
|
||||
};
|
||||
$mount(HorizontalDemo, '#demo-horizontal');
|
||||
```
|
||||
|
||||
### Compact Timeline
|
||||
|
||||
<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-compact" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CompactDemo = () => {
|
||||
const activities = [
|
||||
{ title: 'User login', detail: '10:30 AM', type: 'success', completed: true },
|
||||
{ title: 'Viewed dashboard', detail: '10:32 AM', type: 'info', completed: true },
|
||||
{ title: 'Updated profile', detail: '10:45 AM', type: 'success', completed: true },
|
||||
{ title: 'Made purchase', detail: '11:00 AM', type: 'warning', completed: false }
|
||||
];
|
||||
|
||||
return Timeline({
|
||||
items: activities,
|
||||
compact: true
|
||||
});
|
||||
};
|
||||
$mount(CompactDemo, '#demo-compact');
|
||||
```
|
||||
|
||||
### Custom Icons
|
||||
|
||||
<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-icons" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconsDemo = () => {
|
||||
const milestones = [
|
||||
{ title: 'Kickoff', detail: 'Project kickoff meeting', icon: Icons.iconInfo, completed: true },
|
||||
{ title: 'MVP', detail: 'Minimum viable product', icon: Icons.iconSuccess, completed: true },
|
||||
{ title: 'Beta', detail: 'Beta release', icon: Icons.iconWarning, completed: false },
|
||||
{ title: 'Launch', detail: 'Public launch', icon: Icons.iconShow, completed: false }
|
||||
];
|
||||
|
||||
return Timeline({ items: milestones });
|
||||
};
|
||||
$mount(IconsDemo, '#demo-icons');
|
||||
```
|
||||
|
||||
### Reactive Timeline
|
||||
|
||||
<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-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ReactiveDemo = () => {
|
||||
const currentStep = $(2);
|
||||
const steps = [
|
||||
{ title: 'Order Placed', detail: 'Your order has been confirmed', type: 'success', completed: true },
|
||||
{ title: 'Processing', detail: 'Payment verified, preparing shipment', type: 'success', completed: currentStep() > 1 },
|
||||
{ title: 'Shipped', detail: 'Package on the way', type: 'warning', completed: currentStep() > 2 },
|
||||
{ title: 'Delivered', detail: 'Arriving soon', type: 'info', completed: currentStep() > 3 }
|
||||
];
|
||||
|
||||
const items = () => steps.map((step, idx) => ({
|
||||
...step,
|
||||
completed: idx < currentStep()
|
||||
}));
|
||||
|
||||
const nextStep = () => {
|
||||
if (currentStep() < steps.length) {
|
||||
currentStep(currentStep() + 1);
|
||||
Toast(`Step ${currentStep()}: ${steps[currentStep() - 1].title}`, 'alert-info', 1500);
|
||||
}
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
currentStep(0);
|
||||
Toast('Order tracking reset', 'alert-warning', 1500);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Timeline({ items: items }),
|
||||
Div({ class: 'flex gap-2 justify-center mt-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary btn-sm',
|
||||
onclick: nextStep,
|
||||
disabled: () => currentStep() >= steps.length
|
||||
}, 'Next Step'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm',
|
||||
onclick: reset
|
||||
}, 'Reset')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### Order Status Tracker
|
||||
|
||||
<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-order" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const OrderDemo = () => {
|
||||
const status = $('shipped');
|
||||
|
||||
const statusMap = {
|
||||
pending: { title: 'Order Pending', detail: 'Awaiting confirmation', completed: false, type: 'warning' },
|
||||
confirmed: { title: 'Order Confirmed', detail: 'Payment received', completed: false, type: 'info' },
|
||||
processing: { title: 'Processing', detail: 'Preparing your order', completed: false, type: 'info' },
|
||||
shipped: { title: 'Shipped', detail: 'Package in transit', completed: false, type: 'info' },
|
||||
delivered: { title: 'Delivered', detail: 'Order completed', completed: false, type: 'success' }
|
||||
};
|
||||
|
||||
const statusOrder = ['pending', 'confirmed', 'processing', 'shipped', 'delivered'];
|
||||
const currentIndex = statusOrder.indexOf(status());
|
||||
|
||||
const items = statusOrder.map((key, idx) => ({
|
||||
...statusMap[key],
|
||||
completed: idx < currentIndex
|
||||
}));
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Timeline({ items, compact: true }),
|
||||
Div({ class: 'flex gap-2 justify-center flex-wrap mt-4' }, statusOrder.map(s =>
|
||||
Button({
|
||||
class: `btn btn-xs ${status() === s ? 'btn-primary' : 'btn-ghost'}`,
|
||||
onclick: () => status(s)
|
||||
}, statusMap[s].title)
|
||||
))
|
||||
]);
|
||||
};
|
||||
$mount(OrderDemo, '#demo-order');
|
||||
```
|
||||
|
||||
### Company History
|
||||
|
||||
<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-history" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const HistoryDemo = () => {
|
||||
const milestones = [
|
||||
{
|
||||
title: '2015 - Founded',
|
||||
detail: 'Company started with 3 employees in a small office',
|
||||
type: 'success',
|
||||
completed: true
|
||||
},
|
||||
{
|
||||
title: '2017 - First Product',
|
||||
detail: 'Launched our first software product to market',
|
||||
type: 'success',
|
||||
completed: true
|
||||
},
|
||||
{
|
||||
title: '2019 - Series A',
|
||||
detail: 'Raised $5M in funding, expanded team to 50',
|
||||
type: 'success',
|
||||
completed: true
|
||||
},
|
||||
{
|
||||
title: '2022 - Global Expansion',
|
||||
detail: 'Opened offices in Europe and Asia',
|
||||
type: 'info',
|
||||
completed: true
|
||||
},
|
||||
{
|
||||
title: '2024 - AI Integration',
|
||||
detail: 'Launched AI-powered features',
|
||||
type: 'warning',
|
||||
completed: false
|
||||
},
|
||||
{
|
||||
title: '2026 - Future Goals',
|
||||
detail: 'Aiming for market leadership',
|
||||
type: 'info',
|
||||
completed: false
|
||||
}
|
||||
];
|
||||
|
||||
return Timeline({ items: milestones });
|
||||
};
|
||||
$mount(HistoryDemo, '#demo-history');
|
||||
```
|
||||
|
||||
### All Variants
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const VariantsDemo = () => {
|
||||
const sampleItems = [
|
||||
{ title: 'Event 1', detail: 'Description here', type: 'success', completed: true },
|
||||
{ title: 'Event 2', detail: 'Description here', type: 'warning', completed: false },
|
||||
{ title: 'Event 3', detail: 'Description here', type: 'info', completed: false }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-8' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Vertical Timeline'),
|
||||
Timeline({ items: sampleItems }),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Horizontal Timeline'),
|
||||
Timeline({ items: sampleItems, vertical: false, class: 'min-w-[500px]' }),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Compact Timeline'),
|
||||
Timeline({ items: sampleItems, compact: true })
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initTimelineExamples = () => {
|
||||
|
||||
// 1. Basic Timeline
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
const events = [
|
||||
{ title: 'Project Started', detail: 'Initial planning and setup', type: 'info', completed: true },
|
||||
{ title: 'Design Phase', detail: 'UI/UX design completed', type: 'success', completed: true },
|
||||
{ title: 'Development', detail: 'Core features implemented', type: 'warning', completed: false },
|
||||
{ title: 'Testing', detail: 'Quality assurance', type: 'info', completed: false },
|
||||
{ title: 'Launch', detail: 'Production deployment', type: 'success', completed: false }
|
||||
];
|
||||
|
||||
return Timeline({ items: events });
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Horizontal Timeline
|
||||
const horizontalTarget = document.querySelector('#demo-horizontal');
|
||||
if (horizontalTarget && !horizontalTarget.hasChildNodes()) {
|
||||
const HorizontalDemo = () => {
|
||||
const steps = [
|
||||
{ title: 'Step 1', detail: 'Requirements', type: 'success', completed: true },
|
||||
{ title: 'Step 2', detail: 'Design', type: 'success', completed: true },
|
||||
{ title: 'Step 3', detail: 'Development', type: 'warning', completed: false },
|
||||
{ title: 'Step 4', detail: 'Testing', type: 'info', completed: false },
|
||||
{ title: 'Step 5', detail: 'Deploy', type: 'info', completed: false }
|
||||
];
|
||||
|
||||
return Timeline({
|
||||
items: steps,
|
||||
vertical: false,
|
||||
class: 'min-w-[600px]'
|
||||
});
|
||||
};
|
||||
$mount(HorizontalDemo, horizontalTarget);
|
||||
}
|
||||
|
||||
// 3. Compact Timeline
|
||||
const compactTarget = document.querySelector('#demo-compact');
|
||||
if (compactTarget && !compactTarget.hasChildNodes()) {
|
||||
const CompactDemo = () => {
|
||||
const activities = [
|
||||
{ title: 'User login', detail: '10:30 AM', type: 'success', completed: true },
|
||||
{ title: 'Viewed dashboard', detail: '10:32 AM', type: 'info', completed: true },
|
||||
{ title: 'Updated profile', detail: '10:45 AM', type: 'success', completed: true },
|
||||
{ title: 'Made purchase', detail: '11:00 AM', type: 'warning', completed: false }
|
||||
];
|
||||
|
||||
return Timeline({
|
||||
items: activities,
|
||||
compact: true
|
||||
});
|
||||
};
|
||||
$mount(CompactDemo, compactTarget);
|
||||
}
|
||||
|
||||
// 4. Custom Icons
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
const milestones = [
|
||||
{ title: 'Kickoff', detail: 'Project kickoff meeting', icon: Icons.iconInfo, completed: true },
|
||||
{ title: 'MVP', detail: 'Minimum viable product', icon: Icons.iconSuccess, completed: true },
|
||||
{ title: 'Beta', detail: 'Beta release', icon: Icons.iconWarning, completed: false },
|
||||
{ title: 'Launch', detail: 'Public launch', icon: Icons.iconShow, completed: false }
|
||||
];
|
||||
|
||||
return Timeline({ items: milestones });
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 5. Reactive Timeline
|
||||
const reactiveTarget = document.querySelector('#demo-reactive');
|
||||
if (reactiveTarget && !reactiveTarget.hasChildNodes()) {
|
||||
const ReactiveDemo = () => {
|
||||
const currentStep = $(2);
|
||||
const steps = [
|
||||
{ title: 'Order Placed', detail: 'Your order has been confirmed', type: 'success', completed: true },
|
||||
{ title: 'Processing', detail: 'Payment verified, preparing shipment', type: 'success', completed: currentStep() > 1 },
|
||||
{ title: 'Shipped', detail: 'Package on the way', type: 'warning', completed: currentStep() > 2 },
|
||||
{ title: 'Delivered', detail: 'Arriving soon', type: 'info', completed: currentStep() > 3 }
|
||||
];
|
||||
|
||||
const items = () => steps.map((step, idx) => ({
|
||||
...step,
|
||||
completed: idx < currentStep()
|
||||
}));
|
||||
|
||||
const nextStep = () => {
|
||||
if (currentStep() < steps.length) {
|
||||
currentStep(currentStep() + 1);
|
||||
Toast(`Step ${currentStep()}: ${steps[currentStep() - 1].title}`, 'alert-info', 1500);
|
||||
}
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
currentStep(0);
|
||||
Toast('Order tracking reset', 'alert-warning', 1500);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Timeline({ items: items }),
|
||||
Div({ class: 'flex gap-2 justify-center mt-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary btn-sm',
|
||||
onclick: nextStep,
|
||||
disabled: () => currentStep() >= steps.length
|
||||
}, 'Next Step'),
|
||||
Button({
|
||||
class: 'btn btn-ghost btn-sm',
|
||||
onclick: reset
|
||||
}, 'Reset')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ReactiveDemo, reactiveTarget);
|
||||
}
|
||||
|
||||
// 6. Order Status Tracker
|
||||
const orderTarget = document.querySelector('#demo-order');
|
||||
if (orderTarget && !orderTarget.hasChildNodes()) {
|
||||
const OrderDemo = () => {
|
||||
const status = $('shipped');
|
||||
|
||||
const statusMap = {
|
||||
pending: { title: 'Order Pending', detail: 'Awaiting confirmation', completed: false, type: 'warning' },
|
||||
confirmed: { title: 'Order Confirmed', detail: 'Payment received', completed: false, type: 'info' },
|
||||
processing: { title: 'Processing', detail: 'Preparing your order', completed: false, type: 'info' },
|
||||
shipped: { title: 'Shipped', detail: 'Package in transit', completed: false, type: 'info' },
|
||||
delivered: { title: 'Delivered', detail: 'Order completed', completed: false, type: 'success' }
|
||||
};
|
||||
|
||||
const statusOrder = ['pending', 'confirmed', 'processing', 'shipped', 'delivered'];
|
||||
const currentIndex = statusOrder.indexOf(status());
|
||||
|
||||
const items = statusOrder.map((key, idx) => ({
|
||||
...statusMap[key],
|
||||
completed: idx < currentIndex
|
||||
}));
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Timeline({ items, compact: true }),
|
||||
Div({ class: 'flex gap-2 justify-center flex-wrap mt-4' }, statusOrder.map(s =>
|
||||
Button({
|
||||
class: `btn btn-xs ${status() === s ? 'btn-primary' : 'btn-ghost'}`,
|
||||
onclick: () => status(s)
|
||||
}, statusMap[s].title)
|
||||
))
|
||||
]);
|
||||
};
|
||||
$mount(OrderDemo, orderTarget);
|
||||
}
|
||||
|
||||
// 7. Company History
|
||||
const historyTarget = document.querySelector('#demo-history');
|
||||
if (historyTarget && !historyTarget.hasChildNodes()) {
|
||||
const HistoryDemo = () => {
|
||||
const milestones = [
|
||||
{
|
||||
title: '2015 - Founded',
|
||||
detail: 'Company started with 3 employees in a small office',
|
||||
type: 'success',
|
||||
completed: true
|
||||
},
|
||||
{
|
||||
title: '2017 - First Product',
|
||||
detail: 'Launched our first software product to market',
|
||||
type: 'success',
|
||||
completed: true
|
||||
},
|
||||
{
|
||||
title: '2019 - Series A',
|
||||
detail: 'Raised $5M in funding, expanded team to 50',
|
||||
type: 'success',
|
||||
completed: true
|
||||
},
|
||||
{
|
||||
title: '2022 - Global Expansion',
|
||||
detail: 'Opened offices in Europe and Asia',
|
||||
type: 'info',
|
||||
completed: true
|
||||
},
|
||||
{
|
||||
title: '2024 - AI Integration',
|
||||
detail: 'Launched AI-powered features',
|
||||
type: 'warning',
|
||||
completed: false
|
||||
},
|
||||
{
|
||||
title: '2026 - Future Goals',
|
||||
detail: 'Aiming for market leadership',
|
||||
type: 'info',
|
||||
completed: false
|
||||
}
|
||||
];
|
||||
|
||||
return Timeline({ items: milestones });
|
||||
};
|
||||
$mount(HistoryDemo, historyTarget);
|
||||
}
|
||||
|
||||
// 8. All Variants
|
||||
const variantsTarget = document.querySelector('#demo-variants');
|
||||
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
||||
const VariantsDemo = () => {
|
||||
const sampleItems = [
|
||||
{ title: 'Event 1', detail: 'Description here', type: 'success', completed: true },
|
||||
{ title: 'Event 2', detail: 'Description here', type: 'warning', completed: false },
|
||||
{ title: 'Event 3', detail: 'Description here', type: 'info', completed: false }
|
||||
];
|
||||
|
||||
return Div({ class: 'flex flex-col gap-8' }, [
|
||||
Div({ class: 'text-sm font-bold' }, 'Vertical Timeline'),
|
||||
Timeline({ items: sampleItems }),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Horizontal Timeline'),
|
||||
Timeline({ items: sampleItems, vertical: false, class: 'min-w-[500px]' }),
|
||||
|
||||
Div({ class: 'text-sm font-bold mt-4' }, 'Compact Timeline'),
|
||||
Timeline({ items: sampleItems, compact: true })
|
||||
]);
|
||||
};
|
||||
$mount(VariantsDemo, variantsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initTimelineExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initTimelineExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
630
docs/components_old/toast.md
Normal file
630
docs/components_old/toast.md
Normal file
@@ -0,0 +1,630 @@
|
||||
# Toast
|
||||
|
||||
Toast notification utility for displaying temporary messages that automatically dismiss after a specified duration. Can be used programmatically.
|
||||
|
||||
## Function
|
||||
|
||||
`Toast(message, type = 'alert-info', duration = 3500)`
|
||||
|
||||
| Param | Type | Default | Description |
|
||||
| :--------- | :--------------------------- | :--------------- | :----------------------------------------------- |
|
||||
| `message` | `string \| VNode` | `-` | Message content to display |
|
||||
| `type` | `string` | `'alert-info'` | Alert type: 'alert-info', 'alert-success', 'alert-warning', 'alert-error' |
|
||||
| `duration` | `number` | `3500` | Auto-dismiss duration in milliseconds |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Toast
|
||||
|
||||
<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 flex-wrap gap-2 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-info',
|
||||
onclick: () => Toast('This is an info message', 'alert-info', 3000)
|
||||
}, 'Info Toast'),
|
||||
Button({
|
||||
class: 'btn btn-success',
|
||||
onclick: () => Toast('Operation successful!', 'alert-success', 3000)
|
||||
}, 'Success Toast'),
|
||||
Button({
|
||||
class: 'btn btn-warning',
|
||||
onclick: () => Toast('Please check your input', 'alert-warning', 3000)
|
||||
}, 'Warning Toast'),
|
||||
Button({
|
||||
class: 'btn btn-error',
|
||||
onclick: () => Toast('An error occurred', 'alert-error', 3000)
|
||||
}, 'Error Toast')
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Different Durations
|
||||
|
||||
<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-duration" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const DurationDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => Toast('Short (1s)', 'alert-info', 1000)
|
||||
}, '1 Second'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => Toast('Normal (3s)', 'alert-success', 3000)
|
||||
}, '3 Seconds'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => Toast('Long (5s)', 'alert-warning', 5000)
|
||||
}, '5 Seconds'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => Toast('Very Long (8s)', 'alert-error', 8000)
|
||||
}, '8 Seconds')
|
||||
]);
|
||||
};
|
||||
$mount(DurationDemo, '#demo-duration');
|
||||
```
|
||||
|
||||
### Interactive Toast
|
||||
|
||||
<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-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const InteractiveDemo = () => {
|
||||
const count = $(0);
|
||||
|
||||
const showRandomToast = () => {
|
||||
const types = ['alert-info', 'alert-success', 'alert-warning', 'alert-error'];
|
||||
const messages = [
|
||||
'You clicked the button!',
|
||||
'Action completed successfully',
|
||||
'Processing your request...',
|
||||
'Something interesting happened'
|
||||
];
|
||||
const randomType = types[Math.floor(Math.random() * types.length)];
|
||||
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
|
||||
count(count() + 1);
|
||||
Toast(`${randomMessage} (${count()})`, randomType, 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: showRandomToast
|
||||
}, 'Show Random Toast'),
|
||||
Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`)
|
||||
]);
|
||||
};
|
||||
$mount(InteractiveDemo, '#demo-interactive');
|
||||
```
|
||||
|
||||
### Form Validation Toast
|
||||
|
||||
<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-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FormToastDemo = () => {
|
||||
const email = $('');
|
||||
const password = $('');
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!email()) {
|
||||
Toast('Please enter your email', 'alert-warning', 3000);
|
||||
return;
|
||||
}
|
||||
if (!email().includes('@')) {
|
||||
Toast('Please enter a valid email address', 'alert-error', 3000);
|
||||
return;
|
||||
}
|
||||
if (!password()) {
|
||||
Toast('Please enter your password', 'alert-warning', 3000);
|
||||
return;
|
||||
}
|
||||
if (password().length < 6) {
|
||||
Toast('Password must be at least 6 characters', 'alert-error', 3000);
|
||||
return;
|
||||
}
|
||||
Toast('Login successful! Redirecting...', 'alert-success', 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
|
||||
Div({ class: 'text-lg font-bold text-center' }, 'Login Form'),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
placeholder: 'user@example.com',
|
||||
oninput: (e) => email(e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Password',
|
||||
type: 'password',
|
||||
value: password,
|
||||
placeholder: 'Enter password',
|
||||
oninput: (e) => password(e.target.value)
|
||||
}),
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: handleSubmit
|
||||
}, 'Login')
|
||||
]);
|
||||
};
|
||||
$mount(FormToastDemo, '#demo-form');
|
||||
```
|
||||
|
||||
### Success Feedback
|
||||
|
||||
<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-feedback" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FeedbackDemo = () => {
|
||||
const items = $([
|
||||
{ id: 1, name: 'Item 1', saved: false },
|
||||
{ id: 2, name: 'Item 2', saved: false },
|
||||
{ id: 3, name: 'Item 3', saved: false }
|
||||
]);
|
||||
|
||||
const saveItem = (id) => {
|
||||
items(items().map(item =>
|
||||
item.id === id ? { ...item, saved: true } : item
|
||||
));
|
||||
Toast(`Item ${id} saved successfully!`, 'alert-success', 2000);
|
||||
};
|
||||
|
||||
const saveAll = () => {
|
||||
items(items().map(item => ({ ...item, saved: true })));
|
||||
Toast('All items saved!', 'alert-success', 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'font-bold' }, 'Items to Save'),
|
||||
Button({
|
||||
class: 'btn btn-sm btn-primary',
|
||||
onclick: saveAll
|
||||
}, 'Save All')
|
||||
]),
|
||||
Div({ class: 'flex flex-col gap-2' }, items().map(item =>
|
||||
Div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [
|
||||
Span({}, item.name),
|
||||
item.saved
|
||||
? Span({ class: 'badge badge-success' }, '✓ Saved')
|
||||
: Button({
|
||||
class: 'btn btn-xs btn-primary',
|
||||
onclick: () => saveItem(item.id)
|
||||
}, 'Save')
|
||||
])
|
||||
))
|
||||
]);
|
||||
};
|
||||
$mount(FeedbackDemo, '#demo-feedback');
|
||||
```
|
||||
|
||||
### Error Handling
|
||||
|
||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||||
<div id="demo-error" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ErrorDemo = () => {
|
||||
const simulateApiCall = () => {
|
||||
const success = Math.random() > 0.3;
|
||||
|
||||
if (success) {
|
||||
Toast('Data loaded successfully!', 'alert-success', 2000);
|
||||
} else {
|
||||
Toast('Failed to load data. Please try again.', 'alert-error', 3000);
|
||||
}
|
||||
};
|
||||
|
||||
const simulateNetworkError = () => {
|
||||
Toast('Network error: Unable to connect to server', 'alert-error', 4000);
|
||||
};
|
||||
|
||||
const simulateTimeout = () => {
|
||||
Toast('Request timeout (5s). Please check your connection.', 'alert-warning', 4000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-3 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: simulateApiCall
|
||||
}, 'Simulate API Call'),
|
||||
Button({
|
||||
class: 'btn btn-error',
|
||||
onclick: simulateNetworkError
|
||||
}, 'Network Error'),
|
||||
Button({
|
||||
class: 'btn btn-warning',
|
||||
onclick: simulateTimeout
|
||||
}, 'Timeout')
|
||||
]);
|
||||
};
|
||||
$mount(ErrorDemo, '#demo-error');
|
||||
```
|
||||
|
||||
### Custom Messages
|
||||
|
||||
<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-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-2 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const CustomDemo = () => {
|
||||
const showCustomToast = (type, message) => {
|
||||
Toast(message, type, 3000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-info',
|
||||
onclick: () => showCustomToast('alert-info', '📧 New email received from john@example.com')
|
||||
}, 'Email'),
|
||||
Button({
|
||||
class: 'btn btn-success',
|
||||
onclick: () => showCustomToast('alert-success', '💰 Payment of $49.99 completed')
|
||||
}, 'Payment'),
|
||||
Button({
|
||||
class: 'btn btn-warning',
|
||||
onclick: () => showCustomToast('alert-warning', '⚠️ Your session will expire in 5 minutes')
|
||||
}, 'Session Warning'),
|
||||
Button({
|
||||
class: 'btn btn-error',
|
||||
onclick: () => showCustomToast('alert-error', '🔒 Failed login attempt detected')
|
||||
}, 'Security Alert')
|
||||
]);
|
||||
};
|
||||
$mount(CustomDemo, '#demo-custom');
|
||||
```
|
||||
|
||||
### Multiple Toasts
|
||||
|
||||
<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-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const MultipleDemo = () => {
|
||||
const showMultipleToasts = () => {
|
||||
Toast('First message', 'alert-info', 3000);
|
||||
setTimeout(() => Toast('Second message', 'alert-success', 3000), 500);
|
||||
setTimeout(() => Toast('Third message', 'alert-warning', 3000), 1000);
|
||||
setTimeout(() => Toast('Fourth message', 'alert-error', 3000), 1500);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: showMultipleToasts
|
||||
}, 'Show Multiple Toasts')
|
||||
]);
|
||||
};
|
||||
$mount(MultipleDemo, '#demo-multiple');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initToastExamples = () => {
|
||||
|
||||
// 1. Basic Toast
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-info',
|
||||
onclick: () => Toast('This is an info message', 'alert-info', 3000)
|
||||
}, 'Info Toast'),
|
||||
Button({
|
||||
class: 'btn btn-success',
|
||||
onclick: () => Toast('Operation successful!', 'alert-success', 3000)
|
||||
}, 'Success Toast'),
|
||||
Button({
|
||||
class: 'btn btn-warning',
|
||||
onclick: () => Toast('Please check your input', 'alert-warning', 3000)
|
||||
}, 'Warning Toast'),
|
||||
Button({
|
||||
class: 'btn btn-error',
|
||||
onclick: () => Toast('An error occurred', 'alert-error', 3000)
|
||||
}, 'Error Toast')
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Different Durations
|
||||
const durationTarget = document.querySelector('#demo-duration');
|
||||
if (durationTarget && !durationTarget.hasChildNodes()) {
|
||||
const DurationDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => Toast('Short (1s)', 'alert-info', 1000)
|
||||
}, '1 Second'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => Toast('Normal (3s)', 'alert-success', 3000)
|
||||
}, '3 Seconds'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => Toast('Long (5s)', 'alert-warning', 5000)
|
||||
}, '5 Seconds'),
|
||||
Button({
|
||||
class: 'btn btn-sm',
|
||||
onclick: () => Toast('Very Long (8s)', 'alert-error', 8000)
|
||||
}, '8 Seconds')
|
||||
]);
|
||||
};
|
||||
$mount(DurationDemo, durationTarget);
|
||||
}
|
||||
|
||||
// 3. Interactive Toast
|
||||
const interactiveTarget = document.querySelector('#demo-interactive');
|
||||
if (interactiveTarget && !interactiveTarget.hasChildNodes()) {
|
||||
const InteractiveDemo = () => {
|
||||
const count = $(0);
|
||||
|
||||
const showRandomToast = () => {
|
||||
const types = ['alert-info', 'alert-success', 'alert-warning', 'alert-error'];
|
||||
const messages = [
|
||||
'You clicked the button!',
|
||||
'Action completed successfully',
|
||||
'Processing your request...',
|
||||
'Something interesting happened'
|
||||
];
|
||||
const randomType = types[Math.floor(Math.random() * types.length)];
|
||||
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
|
||||
count(count() + 1);
|
||||
Toast(`${randomMessage} (${count()})`, randomType, 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: showRandomToast
|
||||
}, 'Show Random Toast'),
|
||||
Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`)
|
||||
]);
|
||||
};
|
||||
$mount(InteractiveDemo, interactiveTarget);
|
||||
}
|
||||
|
||||
// 4. Form Validation Toast
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
const FormToastDemo = () => {
|
||||
const email = $('');
|
||||
const password = $('');
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!email()) {
|
||||
Toast('Please enter your email', 'alert-warning', 3000);
|
||||
return;
|
||||
}
|
||||
if (!email().includes('@')) {
|
||||
Toast('Please enter a valid email address', 'alert-error', 3000);
|
||||
return;
|
||||
}
|
||||
if (!password()) {
|
||||
Toast('Please enter your password', 'alert-warning', 3000);
|
||||
return;
|
||||
}
|
||||
if (password().length < 6) {
|
||||
Toast('Password must be at least 6 characters', 'alert-error', 3000);
|
||||
return;
|
||||
}
|
||||
Toast('Login successful! Redirecting...', 'alert-success', 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
|
||||
Div({ class: 'text-lg font-bold text-center' }, 'Login Form'),
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
placeholder: 'user@example.com',
|
||||
oninput: (e) => email(e.target.value)
|
||||
}),
|
||||
Input({
|
||||
label: 'Password',
|
||||
type: 'password',
|
||||
value: password,
|
||||
placeholder: 'Enter password',
|
||||
oninput: (e) => password(e.target.value)
|
||||
}),
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: handleSubmit
|
||||
}, 'Login')
|
||||
]);
|
||||
};
|
||||
$mount(FormToastDemo, formTarget);
|
||||
}
|
||||
|
||||
// 5. Success Feedback
|
||||
const feedbackTarget = document.querySelector('#demo-feedback');
|
||||
if (feedbackTarget && !feedbackTarget.hasChildNodes()) {
|
||||
const FeedbackDemo = () => {
|
||||
const items = $([
|
||||
{ id: 1, name: 'Item 1', saved: false },
|
||||
{ id: 2, name: 'Item 2', saved: false },
|
||||
{ id: 3, name: 'Item 3', saved: false }
|
||||
]);
|
||||
|
||||
const saveItem = (id) => {
|
||||
items(items().map(item =>
|
||||
item.id === id ? { ...item, saved: true } : item
|
||||
));
|
||||
Toast(`Item ${id} saved successfully!`, 'alert-success', 2000);
|
||||
};
|
||||
|
||||
const saveAll = () => {
|
||||
items(items().map(item => ({ ...item, saved: true })));
|
||||
Toast('All items saved!', 'alert-success', 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4' }, [
|
||||
Div({ class: 'flex justify-between items-center' }, [
|
||||
Span({ class: 'font-bold' }, 'Items to Save'),
|
||||
Button({
|
||||
class: 'btn btn-sm btn-primary',
|
||||
onclick: saveAll
|
||||
}, 'Save All')
|
||||
]),
|
||||
Div({ class: 'flex flex-col gap-2' }, items().map(item =>
|
||||
Div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [
|
||||
Span({}, item.name),
|
||||
item.saved
|
||||
? Span({ class: 'badge badge-success' }, '✓ Saved')
|
||||
: Button({
|
||||
class: 'btn btn-xs btn-primary',
|
||||
onclick: () => saveItem(item.id)
|
||||
}, 'Save')
|
||||
])
|
||||
))
|
||||
]);
|
||||
};
|
||||
$mount(FeedbackDemo, feedbackTarget);
|
||||
}
|
||||
|
||||
// 6. Error Handling
|
||||
const errorTarget = document.querySelector('#demo-error');
|
||||
if (errorTarget && !errorTarget.hasChildNodes()) {
|
||||
const ErrorDemo = () => {
|
||||
const simulateApiCall = () => {
|
||||
const success = Math.random() > 0.3;
|
||||
|
||||
if (success) {
|
||||
Toast('Data loaded successfully!', 'alert-success', 2000);
|
||||
} else {
|
||||
Toast('Failed to load data. Please try again.', 'alert-error', 3000);
|
||||
}
|
||||
};
|
||||
|
||||
const simulateNetworkError = () => {
|
||||
Toast('Network error: Unable to connect to server', 'alert-error', 4000);
|
||||
};
|
||||
|
||||
const simulateTimeout = () => {
|
||||
Toast('Request timeout (5s). Please check your connection.', 'alert-warning', 4000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-3 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: simulateApiCall
|
||||
}, 'Simulate API Call'),
|
||||
Button({
|
||||
class: 'btn btn-error',
|
||||
onclick: simulateNetworkError
|
||||
}, 'Network Error'),
|
||||
Button({
|
||||
class: 'btn btn-warning',
|
||||
onclick: simulateTimeout
|
||||
}, 'Timeout')
|
||||
]);
|
||||
};
|
||||
$mount(ErrorDemo, errorTarget);
|
||||
}
|
||||
|
||||
// 7. Custom Messages
|
||||
const customTarget = document.querySelector('#demo-custom');
|
||||
if (customTarget && !customTarget.hasChildNodes()) {
|
||||
const CustomDemo = () => {
|
||||
const showCustomToast = (type, message) => {
|
||||
Toast(message, type, 3000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-info',
|
||||
onclick: () => showCustomToast('alert-info', '📧 New email received from john@example.com')
|
||||
}, 'Email'),
|
||||
Button({
|
||||
class: 'btn btn-success',
|
||||
onclick: () => showCustomToast('alert-success', '💰 Payment of $49.99 completed')
|
||||
}, 'Payment'),
|
||||
Button({
|
||||
class: 'btn btn-warning',
|
||||
onclick: () => showCustomToast('alert-warning', '⚠️ Your session will expire in 5 minutes')
|
||||
}, 'Session Warning'),
|
||||
Button({
|
||||
class: 'btn btn-error',
|
||||
onclick: () => showCustomToast('alert-error', '🔒 Failed login attempt detected')
|
||||
}, 'Security Alert')
|
||||
]);
|
||||
};
|
||||
$mount(CustomDemo, customTarget);
|
||||
}
|
||||
|
||||
// 8. Multiple Toasts
|
||||
const multipleTarget = document.querySelector('#demo-multiple');
|
||||
if (multipleTarget && !multipleTarget.hasChildNodes()) {
|
||||
const MultipleDemo = () => {
|
||||
const showMultipleToasts = () => {
|
||||
Toast('First message', 'alert-info', 3000);
|
||||
setTimeout(() => Toast('Second message', 'alert-success', 3000), 500);
|
||||
setTimeout(() => Toast('Third message', 'alert-warning', 3000), 1000);
|
||||
setTimeout(() => Toast('Fourth message', 'alert-error', 3000), 1500);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex justify-center' }, [
|
||||
Button({
|
||||
class: 'btn btn-primary',
|
||||
onclick: showMultipleToasts
|
||||
}, 'Show Multiple Toasts')
|
||||
]);
|
||||
};
|
||||
$mount(MultipleDemo, multipleTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initToastExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initToastExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
554
docs/components_old/tooltip.md
Normal file
554
docs/components_old/tooltip.md
Normal file
@@ -0,0 +1,554 @@
|
||||
# Tooltip
|
||||
|
||||
Tooltip component for displaying helpful hints and additional information on hover.
|
||||
|
||||
## Tag
|
||||
|
||||
`Tooltip`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
|
||||
| `tip` | `string \| VNode \| Signal` | `-` | Tooltip content to display on hover |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `VNode` | `-` | Element to attach the tooltip to |
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic 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-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Tooltip({ tip: 'This is a tooltip' }, [
|
||||
Button({ class: 'btn btn-primary' }, 'Hover me')
|
||||
]),
|
||||
Tooltip({ tip: 'Tooltips can be placed on any element' }, [
|
||||
Span({ class: 'text-sm cursor-help border-b border-dashed' }, 'Help text')
|
||||
]),
|
||||
Tooltip({ tip: 'Icons can also have tooltips' }, [
|
||||
Icons.iconInfo
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
### Tooltip Positions
|
||||
|
||||
<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-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PositionsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Top')
|
||||
]),
|
||||
Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Bottom')
|
||||
]),
|
||||
Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Left')
|
||||
]),
|
||||
Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Right')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PositionsDemo, '#demo-positions');
|
||||
```
|
||||
|
||||
### Tooltip with Icons
|
||||
|
||||
<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-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const IconsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Tooltip({ tip: 'Save document' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '💾')
|
||||
]),
|
||||
Tooltip({ tip: 'Edit item' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '✏️')
|
||||
]),
|
||||
Tooltip({ tip: 'Delete permanently' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle text-error' }, '🗑️')
|
||||
]),
|
||||
Tooltip({ tip: 'Settings' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '⚙️')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(IconsDemo, '#demo-icons');
|
||||
```
|
||||
|
||||
### Form Field Tooltips
|
||||
|
||||
<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-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const FormDemo = () => {
|
||||
const username = $('');
|
||||
const email = $('');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Input({
|
||||
label: 'Username',
|
||||
value: username,
|
||||
placeholder: 'Choose a username',
|
||||
oninput: (e) => username(e.target.value)
|
||||
}),
|
||||
Tooltip({ tip: 'Must be at least 3 characters, letters and numbers only' }, [
|
||||
Span({ class: 'cursor-help text-info' }, '?')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
placeholder: 'Enter your email',
|
||||
oninput: (e) => email(e.target.value)
|
||||
}),
|
||||
Tooltip({ tip: 'We\'ll never share your email with anyone' }, [
|
||||
Span({ class: 'cursor-help text-info' }, '?')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(FormDemo, '#demo-form');
|
||||
```
|
||||
|
||||
### Interactive 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-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const InteractiveDemo = () => {
|
||||
const showTip = $(false);
|
||||
const tooltipText = $('Hover over the button!');
|
||||
|
||||
const updateTooltip = (text) => {
|
||||
tooltipText(text);
|
||||
setTimeout(() => {
|
||||
tooltipText('Hover over the button!');
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Tooltip({ tip: () => tooltipText() }, [
|
||||
Button({
|
||||
class: 'btn btn-primary btn-lg',
|
||||
onclick: () => Toast('Button clicked!', 'alert-info', 2000)
|
||||
}, 'Interactive Button')
|
||||
]),
|
||||
Div({ class: 'flex gap-2 flex-wrap justify-center mt-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-xs',
|
||||
onclick: () => updateTooltip('You clicked the button!')
|
||||
}, 'Change Tooltip'),
|
||||
Button({
|
||||
class: 'btn btn-xs',
|
||||
onclick: () => updateTooltip('Try hovering now!')
|
||||
}, 'Change Again')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(InteractiveDemo, '#demo-interactive');
|
||||
```
|
||||
|
||||
### Rich Tooltip Content
|
||||
|
||||
<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-rich" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const RichDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Tooltip({
|
||||
tip: Div({ class: 'text-left p-1' }, [
|
||||
Div({ class: 'font-bold' }, 'User Info'),
|
||||
Div({ class: 'text-xs' }, 'John Doe'),
|
||||
Div({ class: 'text-xs' }, 'john@example.com'),
|
||||
Div({ class: 'badge badge-xs badge-primary mt-1' }, 'Admin')
|
||||
])
|
||||
}, [
|
||||
Button({ class: 'btn btn-outline' }, 'User Profile')
|
||||
]),
|
||||
Tooltip({
|
||||
tip: Div({ class: 'text-left p-1' }, [
|
||||
Div({ class: 'font-bold flex items-center gap-1' }, [
|
||||
Icons.iconWarning,
|
||||
Span({}, 'System Status')
|
||||
]),
|
||||
Div({ class: 'text-xs' }, 'All systems operational'),
|
||||
Div({ class: 'text-xs text-success' }, '✓ 99.9% uptime')
|
||||
])
|
||||
}, [
|
||||
Button({ class: 'btn btn-outline' }, 'System Status')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(RichDemo, '#demo-rich');
|
||||
```
|
||||
|
||||
### Color 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-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ColorsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Tooltip({ tip: 'Primary tooltip', class: 'tooltip-primary' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Primary')
|
||||
]),
|
||||
Tooltip({ tip: 'Secondary tooltip', class: 'tooltip-secondary' }, [
|
||||
Button({ class: 'btn btn-secondary btn-sm' }, 'Secondary')
|
||||
]),
|
||||
Tooltip({ tip: 'Accent tooltip', class: 'tooltip-accent' }, [
|
||||
Button({ class: 'btn btn-accent btn-sm' }, 'Accent')
|
||||
]),
|
||||
Tooltip({ tip: 'Info tooltip', class: 'tooltip-info' }, [
|
||||
Button({ class: 'btn btn-info btn-sm' }, 'Info')
|
||||
]),
|
||||
Tooltip({ tip: 'Success tooltip', class: 'tooltip-success' }, [
|
||||
Button({ class: 'btn btn-success btn-sm' }, 'Success')
|
||||
]),
|
||||
Tooltip({ tip: 'Warning tooltip', class: 'tooltip-warning' }, [
|
||||
Button({ class: 'btn btn-warning btn-sm' }, 'Warning')
|
||||
]),
|
||||
Tooltip({ tip: 'Error tooltip', class: 'tooltip-error' }, [
|
||||
Button({ class: 'btn btn-error btn-sm' }, 'Error')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ColorsDemo, '#demo-colors');
|
||||
```
|
||||
|
||||
### All Tooltip Positions
|
||||
|
||||
<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-all-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-3 gap-4 justify-items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AllPositionsDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-3 gap-4 justify-items-center' }, [
|
||||
Div({ class: 'col-start-2' }, [
|
||||
Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Top')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-1 row-start-2' }, [
|
||||
Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Left')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-2 row-start-2' }, [
|
||||
Tooltip({ tip: 'Center tooltip', class: 'tooltip' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Center')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-3 row-start-2' }, [
|
||||
Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Right')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-2 row-start-3' }, [
|
||||
Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Bottom')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AllPositionsDemo, '#demo-all-positions');
|
||||
```
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const initTooltipExamples = () => {
|
||||
|
||||
// 1. Basic Tooltip
|
||||
const basicTarget = document.querySelector('#demo-basic');
|
||||
if (basicTarget && !basicTarget.hasChildNodes()) {
|
||||
const BasicDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Tooltip({ tip: 'This is a tooltip' }, [
|
||||
Button({ class: 'btn btn-primary' }, 'Hover me')
|
||||
]),
|
||||
Tooltip({ tip: 'Tooltips can be placed on any element' }, [
|
||||
Span({ class: 'text-sm cursor-help border-b border-dashed' }, 'Help text')
|
||||
]),
|
||||
Tooltip({ tip: 'Icons can also have tooltips' }, [
|
||||
Icons.iconInfo
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(BasicDemo, basicTarget);
|
||||
}
|
||||
|
||||
// 2. Tooltip Positions
|
||||
const positionsTarget = document.querySelector('#demo-positions');
|
||||
if (positionsTarget && !positionsTarget.hasChildNodes()) {
|
||||
const PositionsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Top')
|
||||
]),
|
||||
Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Bottom')
|
||||
]),
|
||||
Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Left')
|
||||
]),
|
||||
Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
|
||||
Button({ class: 'btn btn-sm' }, 'Right')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(PositionsDemo, positionsTarget);
|
||||
}
|
||||
|
||||
// 3. Tooltip with Icons
|
||||
const iconsTarget = document.querySelector('#demo-icons');
|
||||
if (iconsTarget && !iconsTarget.hasChildNodes()) {
|
||||
const IconsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
|
||||
Tooltip({ tip: 'Save document' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '💾')
|
||||
]),
|
||||
Tooltip({ tip: 'Edit item' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '✏️')
|
||||
]),
|
||||
Tooltip({ tip: 'Delete permanently' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle text-error' }, '🗑️')
|
||||
]),
|
||||
Tooltip({ tip: 'Settings' }, [
|
||||
Button({ class: 'btn btn-ghost btn-circle' }, '⚙️')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(IconsDemo, iconsTarget);
|
||||
}
|
||||
|
||||
// 4. Form Field Tooltips
|
||||
const formTarget = document.querySelector('#demo-form');
|
||||
if (formTarget && !formTarget.hasChildNodes()) {
|
||||
const FormDemo = () => {
|
||||
const username = $('');
|
||||
const email = $('');
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Input({
|
||||
label: 'Username',
|
||||
value: username,
|
||||
placeholder: 'Choose a username',
|
||||
oninput: (e) => username(e.target.value)
|
||||
}),
|
||||
Tooltip({ tip: 'Must be at least 3 characters, letters and numbers only' }, [
|
||||
Span({ class: 'cursor-help text-info' }, '?')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'flex items-center gap-2' }, [
|
||||
Input({
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
value: email,
|
||||
placeholder: 'Enter your email',
|
||||
oninput: (e) => email(e.target.value)
|
||||
}),
|
||||
Tooltip({ tip: 'We\'ll never share your email with anyone' }, [
|
||||
Span({ class: 'cursor-help text-info' }, '?')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(FormDemo, formTarget);
|
||||
}
|
||||
|
||||
// 5. Interactive Tooltip
|
||||
const interactiveTarget = document.querySelector('#demo-interactive');
|
||||
if (interactiveTarget && !interactiveTarget.hasChildNodes()) {
|
||||
const InteractiveDemo = () => {
|
||||
const showTip = $(false);
|
||||
const tooltipText = $('Hover over the button!');
|
||||
|
||||
const updateTooltip = (text) => {
|
||||
tooltipText(text);
|
||||
setTimeout(() => {
|
||||
tooltipText('Hover over the button!');
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
||||
Tooltip({ tip: () => tooltipText() }, [
|
||||
Button({
|
||||
class: 'btn btn-primary btn-lg',
|
||||
onclick: () => Toast('Button clicked!', 'alert-info', 2000)
|
||||
}, 'Interactive Button')
|
||||
]),
|
||||
Div({ class: 'flex gap-2 flex-wrap justify-center mt-4' }, [
|
||||
Button({
|
||||
class: 'btn btn-xs',
|
||||
onclick: () => updateTooltip('You clicked the button!')
|
||||
}, 'Change Tooltip'),
|
||||
Button({
|
||||
class: 'btn btn-xs',
|
||||
onclick: () => updateTooltip('Try hovering now!')
|
||||
}, 'Change Again')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(InteractiveDemo, interactiveTarget);
|
||||
}
|
||||
|
||||
// 6. Rich Tooltip Content
|
||||
const richTarget = document.querySelector('#demo-rich');
|
||||
if (richTarget && !richTarget.hasChildNodes()) {
|
||||
const RichDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Tooltip({
|
||||
tip: Div({ class: 'text-left p-1' }, [
|
||||
Div({ class: 'font-bold' }, 'User Info'),
|
||||
Div({ class: 'text-xs' }, 'John Doe'),
|
||||
Div({ class: 'text-xs' }, 'john@example.com'),
|
||||
Div({ class: 'badge badge-xs badge-primary mt-1' }, 'Admin')
|
||||
])
|
||||
}, [
|
||||
Button({ class: 'btn btn-outline' }, 'User Profile')
|
||||
]),
|
||||
Tooltip({
|
||||
tip: Div({ class: 'text-left p-1' }, [
|
||||
Div({ class: 'font-bold flex items-center gap-1' }, [
|
||||
Icons.iconWarning,
|
||||
Span({}, 'System Status')
|
||||
]),
|
||||
Div({ class: 'text-xs' }, 'All systems operational'),
|
||||
Div({ class: 'text-xs text-success' }, '✓ 99.9% uptime')
|
||||
])
|
||||
}, [
|
||||
Button({ class: 'btn btn-outline' }, 'System Status')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(RichDemo, richTarget);
|
||||
}
|
||||
|
||||
// 7. Color Variants
|
||||
const colorsTarget = document.querySelector('#demo-colors');
|
||||
if (colorsTarget && !colorsTarget.hasChildNodes()) {
|
||||
const ColorsDemo = () => {
|
||||
return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
|
||||
Tooltip({ tip: 'Primary tooltip', class: 'tooltip-primary' }, [
|
||||
Button({ class: 'btn btn-primary btn-sm' }, 'Primary')
|
||||
]),
|
||||
Tooltip({ tip: 'Secondary tooltip', class: 'tooltip-secondary' }, [
|
||||
Button({ class: 'btn btn-secondary btn-sm' }, 'Secondary')
|
||||
]),
|
||||
Tooltip({ tip: 'Accent tooltip', class: 'tooltip-accent' }, [
|
||||
Button({ class: 'btn btn-accent btn-sm' }, 'Accent')
|
||||
]),
|
||||
Tooltip({ tip: 'Info tooltip', class: 'tooltip-info' }, [
|
||||
Button({ class: 'btn btn-info btn-sm' }, 'Info')
|
||||
]),
|
||||
Tooltip({ tip: 'Success tooltip', class: 'tooltip-success' }, [
|
||||
Button({ class: 'btn btn-success btn-sm' }, 'Success')
|
||||
]),
|
||||
Tooltip({ tip: 'Warning tooltip', class: 'tooltip-warning' }, [
|
||||
Button({ class: 'btn btn-warning btn-sm' }, 'Warning')
|
||||
]),
|
||||
Tooltip({ tip: 'Error tooltip', class: 'tooltip-error' }, [
|
||||
Button({ class: 'btn btn-error btn-sm' }, 'Error')
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(ColorsDemo, colorsTarget);
|
||||
}
|
||||
|
||||
// 8. All Tooltip Positions
|
||||
const allPositionsTarget = document.querySelector('#demo-all-positions');
|
||||
if (allPositionsTarget && !allPositionsTarget.hasChildNodes()) {
|
||||
const AllPositionsDemo = () => {
|
||||
return Div({ class: 'grid grid-cols-3 gap-4 justify-items-center' }, [
|
||||
Div({ class: 'col-start-2' }, [
|
||||
Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Top')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-1 row-start-2' }, [
|
||||
Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Left')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-2 row-start-2' }, [
|
||||
Tooltip({ tip: 'Center tooltip', class: 'tooltip' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Center')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-3 row-start-2' }, [
|
||||
Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Right')
|
||||
])
|
||||
]),
|
||||
Div({ class: 'col-start-2 row-start-3' }, [
|
||||
Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
|
||||
Button({ class: 'btn btn-sm w-24' }, 'Bottom')
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
$mount(AllPositionsDemo, allPositionsTarget);
|
||||
}
|
||||
};
|
||||
|
||||
initTooltipExamples();
|
||||
|
||||
if (window.$docsify) {
|
||||
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
||||
hook.doneEach(initTooltipExamples);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user