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

adapt new Input
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-23 13:22:49 +02:00
parent 59e6d972a8
commit e842ed8041
61 changed files with 2553 additions and 2758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
docs/components/stat.md
View File

@@ -41,7 +41,7 @@ Stat supports all **daisyUI Stat classes**:
```javascript
const BasicDemo = () => {
return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
return div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
Stat({
label: 'Total Users',
value: '2,345',
@@ -73,24 +73,24 @@ mount(BasicDemo, '#demo-basic');
```javascript
const IconsDemo = () => {
return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
return div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
Stat({
label: 'Active Users',
value: '1,234',
desc: 'Currently online',
icon: Span({ class: 'text-4xl' }, '👥') // text-4xl para emojis
icon: span({ class: 'text-4xl' }, '👥') // text-4xl para emojis
}),
Stat({
label: 'New Orders',
value: '89',
desc: 'Today',
icon: Span({ class: 'text-4xl' }, '📦')
icon: span({ class: 'text-4xl' }, '📦')
}),
Stat({
label: 'Pending Tasks',
value: '23',
desc: 'Need attention',
icon: Span({ class: 'text-4xl' }, '⏳')
icon: span({ class: 'text-4xl' }, '⏳')
})
]);
};
@@ -110,27 +110,27 @@ mount(IconsDemo, '#demo-icons');
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' }, [
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: Span({ class: 'text-2xl' }, '🔢')
icon: span({ class: 'text-2xl' }, '🔢')
}),
Stat({
label: 'Squared',
value: () => Math.pow(count(), 2),
desc: 'Square of counter',
icon: Span({ class: 'text-2xl' }, '📐')
icon: span({ class: 'text-2xl' }, '📐')
})
]),
Div({ class: 'flex gap-2 justify-center' }, [
Button({
div({ class: 'flex gap-2 justify-center' }, [
button({
class: 'btn btn-primary',
onclick: () => count(count() + 1)
}, 'Increment'),
Button({
button({
class: 'btn btn-ghost',
onclick: () => count(0)
}, 'Reset')
@@ -151,30 +151,30 @@ mount(ReactiveDemo, '#demo-reactive');
```javascript
const MultipleDemo = () => {
return Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
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-4xl' }, '📝') // text-4xl
icon: span({ class: 'text-4xl' }, '📝') // text-4xl
}),
Stat({
label: 'Comments',
value: '8,901',
desc: 'Engagement',
icon: Span({ class: 'text-4xl' }, '💬')
icon: span({ class: 'text-4xl' }, '💬')
}),
Stat({
label: 'Likes',
value: '12,345',
desc: 'Reactions',
icon: Span({ class: 'text-4xl' }, '❤️')
icon: span({ class: 'text-4xl' }, '❤️')
}),
Stat({
label: 'Shares',
value: '456',
desc: 'Viral reach',
icon: Span({ class: 'text-4xl' }, '🔄')
icon: span({ class: 'text-4xl' }, '🔄')
})
]);
};
@@ -208,35 +208,35 @@ const DashboardDemo = () => {
});
};
return Div({ class: 'flex flex-col gap-6' }, [
Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
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: Span({ class: 'text-4xl' }, '👥') // text-4xl
icon: span({ class: 'text-4xl' }, '👥') // text-4xl
}),
Stat({
label: 'Revenue',
value: () => `$${stats().revenue.toLocaleString()}`,
desc: 'This month',
icon: Span({ class: 'text-4xl' }, '💰')
icon: span({ class: 'text-4xl' }, '💰')
}),
Stat({
label: 'Orders',
value: () => stats().orders.toLocaleString(),
desc: 'Completed',
icon: Span({ class: 'text-4xl' }, '📦')
icon: span({ class: 'text-4xl' }, '📦')
}),
Stat({
label: 'Satisfaction',
value: () => `${stats().satisfaction}%`,
desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good',
icon: Span({ class: 'text-4xl' }, '😊')
icon: span({ class: 'text-4xl' }, '😊')
})
]),
Div({ class: 'flex justify-center' }, [
Button({
div({ class: 'flex justify-center' }, [
button({
class: 'btn btn-primary',
onclick: updateStats
}, 'Refresh Data')
@@ -257,33 +257,33 @@ mount(DashboardDemo, '#demo-dashboard');
```javascript
const VariantsDemo = () => {
return Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
return div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
Stat({
label: 'Primary Stat',
value: '1,234',
desc: 'With description',
icon: Span({ class: 'text-4xl' }, '⭐'), // text-4xl
icon: span({ class: 'text-4xl' }, '⭐'), // text-4xl
class: 'bg-primary/10 text-primary'
}),
Stat({
label: 'Success Stat',
value: '89%',
desc: 'Success rate',
icon: Span({ class: 'text-4xl' }, '✅'),
icon: span({ class: 'text-4xl' }, '✅'),
class: 'bg-success/10 text-success'
}),
Stat({
label: 'Warning Stat',
value: '23',
desc: 'Pending items',
icon: Span({ class: 'text-4xl' }, '⚠️'),
icon: span({ class: 'text-4xl' }, '⚠️'),
class: 'bg-warning/10 text-warning'
}),
Stat({
label: 'Error Stat',
value: '5',
desc: 'Failed attempts',
icon: Span({ class: 'text-4xl' }, '❌'),
icon: span({ class: 'text-4xl' }, '❌'),
class: 'bg-error/10 text-error'
})
]);
@@ -302,7 +302,7 @@ mount(VariantsDemo, '#demo-variants');
```javascript
const CompactDemo = () => {
return Div({ class: 'flex flex-wrap gap-4' }, [
return div({ class: 'flex flex-wrap gap-4' }, [
Stat({
label: 'Views',
value: '12.3K',