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

60
docs/components/fab.md
View File

@@ -64,7 +64,7 @@ Fab({
```javascript
const BasicDemo = () => {
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
return div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
Fab({
icon: '➕',
actions: [
@@ -89,7 +89,7 @@ mount(BasicDemo, '#demo-basic');
```javascript
const LabelDemo = () => {
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
return div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
Fab({
label: 'Create',
icon: '✨',
@@ -117,9 +117,9 @@ mount(LabelDemo, '#demo-label');
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({
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({
items: [
{ value: 'bottom-6 right-6', label: 'Bottom Right' },
{ value: 'bottom-6 left-6', label: 'Bottom Left' },
@@ -130,7 +130,7 @@ const PositionsDemo = () => {
onchange: (e) => position(e.target.value)
})
]),
Div({ class: 'absolute inset-0 flex items-center justify-center text-sm opacity-50 pointer-events-none' }, [
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({
@@ -171,9 +171,9 @@ const ColorsDemo = () => {
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({
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({
items: Object.keys(variants).map(v => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) })),
value: variant,
onchange: (e) => variant(e.target.value)
@@ -229,7 +229,7 @@ const ReactiveActions = () => {
}
];
return Div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
return div({ class: 'relative h-[300px] w-full bg-base-100 rounded-lg overflow-hidden' }, [
Fab({
icon: () => count() > 0 ? `🔢 ${count()}` : '🎛️',
actions: actions
@@ -258,11 +258,11 @@ const DocumentActions = () => {
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
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: '✏️',
@@ -291,11 +291,11 @@ mount(DocumentActions, '#demo-document');
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
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()}` : ''}`,
@@ -353,22 +353,22 @@ const VariantsDemo = () => {
{ 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'),
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'),
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'),
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'),
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' })
])
])