Correct components errors
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s

This commit is contained in:
2026-04-29 17:49:29 +02:00
parent 77732dc3f7
commit 5cfa3a231e
22 changed files with 2298 additions and 1358 deletions

View File

@@ -5,8 +5,4 @@
* **Introduction**
* [Installation](install.md)
* [Quick Reference](quick.md)
* [Forms & Inputs](demo_forms.md)
* [Data & Dysplay](demo_display.md)
* [Feedback & Overlays](demo_overlay.md)
* [Navigation & Layout](demo_layout.md)
* [WYSIWYG Editor](demo_editor.md)
* [Examples](demo.md)

1226
docs/demo.md Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -1,155 +0,0 @@
# Display
## Card
<div id="demo-card"></div>
```js
mount(
Card({ class: 'bg-base-100 w-96 shadow-xl' }, [
figure(img({ src: 'https://picsum.photos/400/200', alt: 'Imagen' })),
CardBody({}, [
CardTitle({}, '¡Nuevo producto!'),
p('Esta tarjeta muestra la composición flexible. Puedes añadir imágenes, texto, badges y más.'),
div({ class: 'flex gap-2 mt-2' }, [
Badge({ class: 'badge-primary' }, 'Nuevo'),
Badge({ class: 'badge-outline' }, 'En stock')
])
]),
CardActions({ class: 'justify-end m-4 gap-4' }, [
Button({ class: 'btn-ghost btn-sm' }, 'Cancelar'),
Button({ class: 'btn-primary btn-sm' }, 'Comprar')
])
]),
'#demo-card'
);
```
## Badge
<div id="demo-badge"></div>
```js
mount(
Badge({ class: 'badge-primary' }, 'New'),
'#demo-badge'
);
```
## Indicator
<div id="demo-indicator"></div>
```js
mount(
Indicator({ value: '5' },
Button({ class: 'btn btn-sm' }, 'Notifications')
),
'#demo-indicator'
);
```
## List
<div id="demo-list"></div>
```js
const items = $(['Dashboard', 'Settings', 'Help'])
mount(
List({ class: 'bg-base-200 rounded-box p-2' },
ListRows({
items,
render: (item) => span({ class: 'font-bold' }, item)
})
),
'#demo-list'
)
```
## Stack
<div id="demo-stack"></div>
```js
mount(
Stack({ class: 'w-32 h-20' }, [
div({ class: 'bg-primary text-primary-content p-2' }, 'Top'),
div({ class: 'bg-secondary text-secondary-content p-2' }, 'Bottom')
]),
'#demo-stack'
);
```
## Stat
<div id="demo-stat"></div>
```js
mount(
Stats({},
Stat({
title: 'Total Downloads',
value: '12.5K',
desc: '21% more than last month'
})
),
'#demo-stat'
)
```
## Table
<div id="demo-table"></div>
```js
const users = [
{ id: 1, name: 'Alice', role: 'Admin' },
{ id: 2, name: 'Bob', role: 'Editor' },
{ id: 3, name: 'Charlie', role: 'Viewer' }
];
mount([
Table({ class: 'table-zebra' },
TableItems({ items: users, columns: [{ key: 'name', label: 'Name' }, { key: 'role', label: 'Role' }] })
),
Table({ class: 'table-zebra' }, [
h('thead', {}, h('tr', {}, [h('th', {}, 'Nombre'), h('th', {}, 'Acción')])),
h('tbody', {},
users.map( user => h('tr', {}, [
h('td', {}, user.name),
h('td', {}, Button({ class: 'btn-xs' }, 'Editar'))
]))
)
])
],
'#demo-table'
)
```
## Textrotate
<div id="demo-textrotate"></div>
```js
mount(
Textrotate({ class: 'text-2xl font-bold' },
span({class:"bg-base-200"},[
span({}, 'Reactivo'),
span({}, 'Simple'),
span({}, 'Rápido'),
span({}, 'SigPro')
])),
'#demo-textrotate'
)
```
## Timeline
<div id="demo-timeline"></div>
```js
mount(
Timeline({ vertical: true }, [
li({}, [
div({ class: 'timeline-start' }, '2024'),
div({ class: 'timeline-middle' }, span({ class: 'icon-[lucide--check]' })),
div({ class: 'timeline-end timeline-box' }, 'Project started')
]),
li({}, [
div({ class: 'timeline-start' }, '2025'),
div({ class: 'timeline-middle' }, span({ class: 'icon-[lucide--clock]' })),
div({ class: 'timeline-end timeline-box' }, 'First prototype')
])
]),
'#demo-timeline'
);
```

View File

@@ -1,19 +0,0 @@
# Editor
<div id="demo-editor"></div>
<div id="demo-editor-output" class="mt-4 p-4 border border-base-300 rounded-box bg-base-200"></div>
```js
const content = $('<p><strong>Hello</strong> world!</p>');
mount(
div({ class: 'flex flex-col gap-4' }, [
Editor({
value: content,
placeholder: 'Escribe tu historia…',
class: 'max-w-2xl'
})
]),
'#demo-editor'
);
```

View File

@@ -1,187 +0,0 @@
# Forms
## Autocomplete
<div id="demo-autocomplete"></div>
```js
const selected = $('');
const items = ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato'];
mount(
Autocomplete({
items,
value: selected,
placeholder: 'Search...',
onselect: (val) => console.log('Selected:', val)
}),
'#demo-autocomplete'
);
```
## Button
<div id="demo-button"></div>
```js
const count = $(0);
mount(
Button({
class: 'btn-primary',
onclick: () => count(count() + 1)
}, () => `Clicked ${count()} times`),
'#demo-button'
);
```
## Checkbox
<div id="demo-checkbox"></div>
```js
const checked = $(false);
mount(
div({ class: 'flex items-center gap-2' }, [
Checkbox({
checked,
onchange: (e) => checked(e.target.checked),
}),
span({}, 'Accept terms')
]),
'#demo-checkbox'
);
```
## Colorpicker
<div id="demo-colorpicker"></div>
```js
const color = $('');
mount(
Colorpicker({
value: color,
label: 'Pick a color',
onchange: (c) => console.log('Color:', c)
}),
'#demo-colorpicker'
);
```
## Datepicker
<div id="demo-datepicker"></div>
```js
const date = $('');
mount(
Datepicker({
value: date,
range: true,
hour: true,
placeholder: 'Select date',
onChange: (val) => console.log('Date:', val)
}),
'#demo-datepicker'
);
```
## Input
<div id="demo-input"></div>
```js
const text = $('');
const pass = $('');
mount([
Input({
label: 'Username',
float: true,
value: text,
left: Icon('icon-[lucide--user]')
}),
Input({
type: 'password',
label: 'Password',
float: true,
value: pass,
left: Icon('icon-[lucide--lock]')
})],
'#demo-input'
);
```
## Radio
<div id="demo-radio"></div>
```js
const option = $('');
mount(
div({ class: 'flex gap-2' }, [
Radio({ name: 'option', value: 'a', checked: () => option() === 'a', onchange: () => option('a') }),
Radio({ name: 'option', value: 'b', checked: () => option() === 'b', onchange: () => option('b') }),
]),
'#demo-radio'
);
```
## Range
<div id="demo-range"></div>
```js
const rangeValue = $(50);
mount(
div({ class: 'flex flex-col gap-2' }, [
Range({ min: 0, max: 100, value: rangeValue }),
span({}, () => `Value: ${rangeValue()}`)
]),
'#demo-range'
);
```
## Rating
<div id="demo-rating"></div>
```js
const stars = $(0)
mount(
Rating({}, [
RatingItems({ count: 5, value: stars, name: 'rat1', class:"mask-star" }),
]),
'#demo-rating'
)
```
## Select
<div id="demo-select"></div>
```js
const choice = $('');
mount(
Select({
items: ['Option 1', 'Option 2', 'Option 3'],
placeholder: 'Choose...',
value: choice,
}),
'#demo-select'
);
```
## Swap
<div id="demo-swap"></div>
```js
const isActive = $(false)
mount(
Swap({ class: 'text-base' }, [
SwapToggle({ value: isActive, class: 'swap-rotate' }),
SwapOn({}, span({ class: 'icon-[lucide--moon]' })),
SwapOff({}, span({ class: 'icon-[lucide--sun]' }))
]),
'#demo-swap'
)
```

View File

@@ -1,181 +0,0 @@
# Layout
## Accordion
<div id="demo-accordion"></div>
```js
const accItems = $([
{ title: 'What is SigPro?', content: 'A lightweight UI library built on DaisyUI and a finegrained reactivity system.' },
{ title: 'Why use it?', content: 'No build step, minimal boilerplate, and all components are just JavaScript functions.' },
{ title: 'Browser support?', content: 'All modern browsers that support ES2020+' }
]);
mount(
div({ class: 'flex flex-col gap-8' }, [
Accordion({items: accItems, class: "collapse-arrow bg-base-100 border border-base-300"})
]),
'#demo-accordion'
);
```
## Drawer
<div id="demo-drawer"></div>
```js
const leftOpen = $(false)
const rightOpen = $(false)
mount(
Drawer({ open: leftOpen }, [
DrawerToggle({ id: 'left-drawer', checked: leftOpen }),
DrawerContent({}, [
Drawer({ open: rightOpen, class: 'drawer-end' }, [
DrawerToggle({ id: 'right-drawer', checked: rightOpen }),
DrawerContent({}, [
div({ class: 'p-4' }, [
h3({ class: 'text-lg font-bold' }, 'Panel central'),
label({ for: 'left-drawer', class: 'btn' }, 'Abrir izquierdo'),
label({ for: 'right-drawer', class: 'btn ml-2' }, 'Abrir derecho'),
p({}, 'Contenido principal aquí...')
])
]),
DrawerSide({}, [
DrawerOverlay({ for: 'right-drawer' }),
div({ class: 'min-h-full bg-base-200 w-60 p-4' },
h4({ class: 'font-semibold' }, 'Menú derecho')
)
])
])
]),
DrawerSide({}, [
DrawerOverlay({ for: 'left-drawer' }),
div({ class: 'min-h-full bg-base-200 w-60 p-4' },
h4({ class: 'font-semibold' }, 'Menú izquierdo')
)
])
]),
'#demo-drawer'
)
```
## Dropdown
<div id="demo-dropdown"></div>
```js
mount(
div({ class: 'flex gap-4' }, [
Dropdown({}, [
DropdownButton({}, 'Options'),
DropdownContent({ class: 'menu bg-base-100 rounded-box w-52 p-2 shadow' }, [
Menu({
items: [
{ label: 'Edit', onclick: () => close() },
{ label: 'Delete', onclick: () => close() },
{ label: 'Archive' }
]
})
])
]),
Dropdown({}, [
DropdownButton({}, 'More'),
DropdownContent({ class: 'menu bg-base-100 rounded-box w-40 p-2 shadow' },
ul({}, [
li({}, a({ href: '#', onclick: (e) => { e.preventDefault(); close(); } }, 'Profile')),
li({}, a({ href: '#', onclick: (e) => { e.preventDefault(); close(); } }, 'Logout'))
])
)
])
]),
'#demo-dropdown'
);
```
## Fab
<div id="demo-fab"></div>
```js
mount(
div({ class: 'flex gap-4' }, [
Fab({ class: 'btn-lg btn-circle btn-secondary', icon:"R" }, [
Button({},"C"),
Button({},"B"),
Button({},"A"),
])
]),
'#demo-fab'
);
```
## Fieldset
<div id="demo-fieldset"></div>
```js
mount(
div({ class: 'flex gap-4 bg' }, [
Fieldset({ label: 'Personal Info', class:"bg-base-200 border-base-300 rounded-box w-xs border gap-3 p-4" }, [
Input({ label: 'Name', float: true, value: $('') }),
Select({ label: 'Country', float: true, items: ['Spain', 'France', 'Italy'], value: $('') })
]),
Fieldset({ class: 'bg-base-200 p-4 rounded-box' , label: "Any content"}, [
div({}, 'Any content')
])
]),
'#demo-fieldset'
);
```
## Menu
<div id="demo-menu"></div>
```js
const menuItems = $([
{ label: 'Home' },
{ label: 'Products', children: [
{ label: 'Laptops' },
{ label: 'Phones' }
]},
{ label: 'About', onclick: () => console.log('About clicked') }
]);
mount(
div({ class: 'flex gap-4' }, [
Menu({ items: menuItems, class: 'bg-base-200 rounded-box w-56' }),
]),
'#demo-menu'
);
```
## Navbar
<div id="demo-navbar"></div>
```js
mount(
Navbar({ class: 'bg-base-200 rounded-box' }, [
div({ class: 'flex-1' },
a({ class: 'btn btn-ghost text-xl' }, 'SigPro')
),
div({ class: 'flex-none gap-2' }, [
Button({ class: 'btn btn-ghost' }, 'Login'),
Button({ class: 'btn btn-primary' }, 'Sign up')
])
]),
'#demo-navbar'
);
```
## Tabs
<div id="demo-tabs"></div>
```js
const activeTab = $(0);
const tabsData = $([
{ label: 'Tab A', content: 'Content of tab A' },
{ label: 'Tab B', content: 'Content of tab B', closable: true },
{ label: 'Tab C', content: 'Content of tab C' }
])
mount(
Tabs({ class: 'tabs-box', items: tabsData, activeIndex: activeTab }),
'#demo-tabs'
)
```

View File

@@ -1,120 +0,0 @@
# Overlays
## Alert
<div id="demo-alert"></div>
```js
mount(
Alert({ class: 'alert-success' }, [
span({}, 'Operation completed successfully!'),
Button({ class: 'btn-sm' }, 'Undo')
]),
'#demo-alert'
);
```
## Chat
<div id="demo-chat"></div>
```js
mount(
div({ class: 'flex flex-col gap-4' }, [
// Mensaje izquierdo (Obi-Wan)
Chat({ class: 'chat-start' }, [
ChatImage({}, img({
src: 'https://img.daisyui.com/images/profile/demo/kenobee@192.webp',
alt: 'Obi-Wan Kenobi'
})),
ChatHeader({}, [
'Obi-Wan Kenobi',
time({ class: 'text-xs opacity-50' }, '12:45')
]),
ChatBubble({}, 'You were the Chosen One!'),
ChatFooter({ class: 'opacity-50' }, 'Delivered')
]),
// Mensaje derecho (Anakin)
Chat({ class: 'chat-end' }, [
ChatImage({}, img({
src: 'https://img.daisyui.com/images/profile/demo/anakeen@192.webp',
alt: 'Anakin'
})),
ChatHeader({}, [
'Anakin',
time({ class: 'text-xs opacity-50' }, '12:46')
]),
ChatBubble({}, 'I hate you!'),
ChatFooter({ class: 'opacity-50' }, 'Seen at 12:46')
])
]),
'#demo-chat'
);
```
## Modal
<div id="demo-modal"></div>
```js
const modalOpen = $(false);
mount(
div({ class: 'flex flex-col items-start gap-2' }, [
Button({
class: 'btn',
onclick: () => modalOpen(true)
}, 'Abrir modal'),
Modal({
open: modalOpen,
title: 'Congratulations!',
backdrop: true,
actions: [
form({ method: 'dialog' },
Button({ class: 'btn', onclick: () => modalOpen(false) }, 'Close')
)
]
}, [
p({}, 'You have successfully created a reactive DaisyUI modal with SigPro.')
])
]),
'#demo-modal'
);
```
## Toast
<div id="demo-toast"></div>
```js
mount(
div({ class: 'flex flex-wrap gap-2' }, [
Button({ class: 'btn', onclick: () => Toast('File saved!') }, 'Simple'),
Button({ class: 'btn', onclick: () => Toast('Error', 'alert-error', 5000) }, 'Error (5s)'),
Button({ class: 'btn', onclick: () => Toast(
div({ class: 'flex items-center gap-2' }, [
span({ class: 'icon-[lucide--check] text-lg' }),
span({}, 'Report generated successfully')
]),
'alert-success'
) }, 'With icon'),
Button({ class: 'btn', onclick: () => Toast(
h('div', { class: 'flex flex-col' }, [
h('strong', {}, '¡ATTENTION!'),
h('span', {}, 'Error saving!'),
h('button', { class: 'btn btn-xs mt-1', onclick: () => console.log('retry') }, 'Retry')
]),
'alert-warning',
7000
) }, 'Complex')
]),
'#demo-toast'
);
```
## Tooltip
<div id="demo-tooltip"></div>
```js
mount(
Tooltip({ tip: 'Click to save', class: 'tooltip-right' },
Button({ class: 'btn' }, 'Save')
),
'#demo-tooltip'
);
```

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long