This commit is contained in:
+1
-5
@@ -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
File diff suppressed because it is too large
Load Diff
@@ -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'
|
||||
);
|
||||
```
|
||||
@@ -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'
|
||||
);
|
||||
```
|
||||
@@ -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'
|
||||
)
|
||||
```
|
||||
@@ -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 fine‑grained 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'
|
||||
)
|
||||
```
|
||||
@@ -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'
|
||||
);
|
||||
```
|
||||
+476
-292
File diff suppressed because it is too large
Load Diff
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Vendored
+2
-2
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user