update editor and components
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
This commit is contained in:
1063
components/All.js
1063
components/All.js
File diff suppressed because it is too large
Load Diff
@@ -4,31 +4,82 @@ import { get, cls, isFn } from "./All.js"
|
||||
export const Editor = (p) => {
|
||||
const { value, class: extraClass } = p
|
||||
let editorRef = null
|
||||
let savedRange = null
|
||||
|
||||
const isSource = $(false)
|
||||
const source = $("")
|
||||
const count = $(0)
|
||||
const refreshTick = $(0)
|
||||
const showEmojis = $(false)
|
||||
|
||||
const emojis = ["😀", "😊", "😉", "🧐", "😮", "🤔", "😅", "😂", "😍", "😘", "🥰", "👍", "👎", "👌", "🤝", "🤞", "👋", "👏", "🙌", "🙏", "💪", "☝️", "👇", "👈", "👉", "🖕", "✅", "⚠️", "🚀", "📢", "✉️", "❤️"]
|
||||
|
||||
const saveSelection = () => {
|
||||
const sel = window.getSelection()
|
||||
if (sel.getRangeAt && sel.rangeCount) savedRange = sel.getRangeAt(0)
|
||||
}
|
||||
|
||||
const restoreSelection = () => {
|
||||
if (savedRange) {
|
||||
const sel = window.getSelection()
|
||||
sel.removeAllRanges()
|
||||
sel.addRange(savedRange)
|
||||
}
|
||||
}
|
||||
|
||||
const triggerRefresh = () => {
|
||||
refreshTick(refreshTick() + 1)
|
||||
if (editorRef) count(editorRef.innerText.length)
|
||||
}
|
||||
|
||||
const notify = () => {
|
||||
if (!editorRef) return
|
||||
const html = editorRef.innerHTML
|
||||
if (isFn(value)) value(html)
|
||||
else p.onchange?.(html)
|
||||
triggerRefresh()
|
||||
}
|
||||
|
||||
const exec = (cmd, val = null) => {
|
||||
if (!editorRef) return
|
||||
editorRef.focus()
|
||||
if (savedRange) restoreSelection()
|
||||
document.execCommand(cmd, false, val)
|
||||
savedRange = null
|
||||
notify()
|
||||
}
|
||||
|
||||
const openLightbox = (src) => {
|
||||
const overlay = document.createElement('div')
|
||||
overlay.style = `position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;`
|
||||
const img = document.createElement('img')
|
||||
img.src = src
|
||||
img.style = `max-width:95%;max-height:95%;box-shadow:0 0 30px rgba(0,0,0,0.5);border-radius:4px;`
|
||||
overlay.onclick = () => document.body.removeChild(overlay)
|
||||
overlay.appendChild(img)
|
||||
document.body.appendChild(overlay)
|
||||
}
|
||||
|
||||
const handleUpload = (file) => {
|
||||
if (!file) return
|
||||
const reader = new FileReader()
|
||||
reader.onload = (re) => {
|
||||
if (file.type.startsWith('image/')) {
|
||||
const imgHtml = `<div style="display:inline-block; resize:both; overflow:hidden; vertical-align:bottom; line-height:0; width:200px; height:auto; border:1px dashed #ccc; padding:2px; cursor:pointer;" class="resizable-img-container"><img src="${re.target.result}" style="width:100%; height:100%; object-fit:contain; pointer-events:none;"></div> `
|
||||
exec("insertHTML", imgHtml)
|
||||
} else {
|
||||
const linkHtml = `<a href="${re.target.result}" download="${file.name}" contenteditable="false" style="display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid #ccc; border-radius:4px; background:#f9f9f9; text-decoration:none; color:#333; font-size:12px; margin:2px; cursor:pointer;"><span class="icon-[lucide--paperclip] w-3 h-3"></span>${file.name}</a> `
|
||||
exec("insertHTML", linkHtml)
|
||||
}
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
|
||||
const queryState = (cmd, val = null) => {
|
||||
if (!editorRef) return false
|
||||
refreshTick(); if (!editorRef || isSource()) return false
|
||||
try {
|
||||
if (cmd === 'formatBlock') {
|
||||
const sel = window.getSelection()
|
||||
if (!sel.rangeCount) return false
|
||||
let node = sel.getRangeAt(0).commonAncestorContainer
|
||||
let node = window.getSelection().getRangeAt(0).commonAncestorContainer
|
||||
while (node && node !== editorRef) {
|
||||
if (node.nodeType === 1 && node.tagName === val) return true
|
||||
node = node.parentNode
|
||||
@@ -36,110 +87,122 @@ export const Editor = (p) => {
|
||||
return false
|
||||
}
|
||||
return document.queryCommandState(cmd)
|
||||
} catch (e) {
|
||||
return false
|
||||
}
|
||||
} catch (e) { return false }
|
||||
}
|
||||
|
||||
const toolbar = h("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200" }, [
|
||||
h("div", { class: "flex flex-wrap gap-1 flex-1" }, [
|
||||
h("button", {
|
||||
type: "button",
|
||||
class: () => `btn btn-ghost btn-xs ${queryState('bold') ? 'btn-active' : ''}`,
|
||||
onclick: () => exec("bold")
|
||||
}, h("span", { class: "icon-[lucide--bold]" })),
|
||||
|
||||
h("button", {
|
||||
type: "button",
|
||||
class: () => `btn btn-ghost btn-xs ${queryState('italic') ? 'btn-active' : ''}`,
|
||||
onclick: () => exec("italic")
|
||||
}, h("span", { class: "icon-[lucide--italic]" })),
|
||||
|
||||
h("button", {
|
||||
type: "button",
|
||||
class: () => `btn btn-ghost btn-xs ${queryState('underline') ? 'btn-active' : ''}`,
|
||||
onclick: () => exec("underline")
|
||||
}, h("span", { class: "icon-[lucide--underline]" })),
|
||||
|
||||
h("button", {
|
||||
type: "button",
|
||||
class: () => `btn btn-ghost btn-xs ${queryState('strikeThrough') ? 'btn-active' : ''}`,
|
||||
onclick: () => exec("strikeThrough")
|
||||
}, h("span", { class: "icon-[lucide--strikethrough]" })),
|
||||
const toolbar = h("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [
|
||||
h("div", { class: "flex flex-wrap gap-1 flex-1 items-center" }, [
|
||||
// GRUPO 1: ESTILOS
|
||||
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('bold') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("bold") }, h("span", { class: "icon-[lucide--bold]" })),
|
||||
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('italic') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("italic") }, h("span", { class: "icon-[lucide--italic]" })),
|
||||
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('underline') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("underline") }, h("span", { class: "icon-[lucide--underline]" })),
|
||||
h("input", { type: "color", class: "w-5 h-5 p-0 border-0 bg-transparent cursor-pointer", oninput: (e) => exec("foreColor", e.target.value) }),
|
||||
|
||||
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
||||
|
||||
h("button", {
|
||||
type: "button",
|
||||
class: "btn btn-ghost btn-xs",
|
||||
onclick: () => exec("justifyLeft")
|
||||
}, h("span", { class: "icon-[lucide--align-left]" })),
|
||||
|
||||
// --- Botón Alineación Centro ---
|
||||
h("button", {
|
||||
type: "button",
|
||||
class: "btn btn-ghost btn-xs",
|
||||
onclick: () => exec("justifyCenter")
|
||||
}, h("span", { class: "icon-[lucide--align-center]" })),
|
||||
|
||||
// --- Botón Alineación Derecha ---
|
||||
h("button", {
|
||||
type: "button",
|
||||
class: "btn btn-ghost btn-xs",
|
||||
onclick: () => exec("justifyRight")
|
||||
}, h("span", { class: "icon-[lucide--align-right]" })),
|
||||
|
||||
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
||||
|
||||
// GRUPO 2: LISTAS Y PÁRRAFO
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertUnorderedList") }, h("span", { class: "icon-[lucide--list]" })),
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertOrderedList") }, h("span", { class: "icon-[lucide--list-ordered]" })),
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("outdent"), title: "Mover izquierda" }, h("span", { class: "icon-[lucide--indent-decrease]" })),
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("indent"), title: "Mover derecha (Tab)" }, h("span", { class: "icon-[lucide--indent-increase]" })),
|
||||
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('formatBlock', 'BLOCKQUOTE') ? 'btn-active' : ''}`, onclick: () => exec("formatBlock", queryState('formatBlock', 'BLOCKQUOTE') ? 'P' : 'BLOCKQUOTE') }, h("span", { class: "icon-[lucide--quote]" })),
|
||||
|
||||
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
||||
|
||||
h("button", {
|
||||
type: "button",
|
||||
class: () => `btn btn-ghost btn-xs ${queryState('formatBlock', 'BLOCKQUOTE') ? 'btn-active' : ''}`,
|
||||
onclick: () => exec("formatBlock", queryState('formatBlock', 'BLOCKQUOTE') ? 'P' : 'BLOCKQUOTE')
|
||||
}, h("span", { class: "icon-[lucide--quote]" })),
|
||||
// GRUPO 3: INSERTAR
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const url = window.prompt('URL:'); if (url) exec("createLink", url) } }, h("span", { class: "icon-[lucide--link]" })),
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const input = document.createElement('input'); input.type = 'file'; input.onchange = (e) => handleUpload(e.target.files[0]); input.click(); } }, h("span", { class: "icon-[lucide--paperclip]" })),
|
||||
|
||||
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
||||
|
||||
h("select", { class: "select select-xs w-16", onchange: (e) => exec("fontSize", e.target.value), value: "3" }, [
|
||||
h("option", { value: "1" }, "1"),
|
||||
h("option", { value: "2" }, "2"),
|
||||
h("option", { value: "3" }, "3"),
|
||||
h("option", { value: "4" }, "4"),
|
||||
h("option", { value: "5" }, "5"),
|
||||
h("option", { value: "6" }, "6"),
|
||||
h("option", { value: "7" }, "7"),
|
||||
// EMOJIS
|
||||
h("div", { class: "relative" }, [
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: (e) => { e.stopPropagation(); saveSelection(); showEmojis(!showEmojis()); } }, h("span", { class: "icon-[lucide--smile]" })),
|
||||
h("div", { class: "absolute top-full left-0 mt-1 p-2 bg-base-100 border border-base-300 shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1", style: () => showEmojis() ? "display:flex" : "display:none" }, emojis.map(emo => h("span", { class: "cursor-pointer hover:bg-base-200 p-1 rounded text-lg", onclick: (e) => { e.stopPropagation(); exec("insertText", emo); showEmojis(false); } }, emo)))
|
||||
]),
|
||||
|
||||
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
||||
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo") }, h("span", { class: "icon-[lucide--undo-2]" })),
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo") }, h("span", { class: "icon-[lucide--redo-2]" })),
|
||||
// GRUPO 4: UTILIDADES
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("removeFormat") }, h("span", { class: "icon-[lucide--eraser]" })),
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo"), title: "Deshacer" }, h("span", { class: "icon-[lucide--undo-2]" })),
|
||||
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo"), title: "Rehacer" }, h("span", { class: "icon-[lucide--redo-2]" })),
|
||||
]),
|
||||
|
||||
h("div", { class: "flex" }, [
|
||||
h("button", {
|
||||
type: "button",
|
||||
class: () => `btn btn-ghost btn-xs ${isSource() ? 'btn-active' : ''}`,
|
||||
onclick: () => {
|
||||
const wasSource = isSource()
|
||||
if (!wasSource) {
|
||||
source(editorRef?.innerHTML || "")
|
||||
} else {
|
||||
if (editorRef) {
|
||||
editorRef.innerHTML = source()
|
||||
notify()
|
||||
}
|
||||
}
|
||||
isSource(!wasSource)
|
||||
}
|
||||
}, h("span", { class: "icon-[lucide--code-2]" }))
|
||||
])
|
||||
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${isSource() ? 'btn-active' : ''}`, onclick: () => { if (!isSource()) source(editorRef?.innerHTML || ""); else if (editorRef) { editorRef.innerHTML = source(); notify(); }; isSource(!isSource()) } }, h("span", { class: "icon-[lucide--code-2]" }))
|
||||
])
|
||||
|
||||
return h("div", { class: cls("border border-base-300 rounded-box bg-base-100 overflow-hidden", extraClass) }, [
|
||||
if (typeof document !== 'undefined' && !document.getElementById('editor-styles')) {
|
||||
const style = document.createElement('style')
|
||||
style.id = 'editor-styles'
|
||||
style.textContent = `
|
||||
[contenteditable="true"] div,
|
||||
[contenteditable="true"] p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
`
|
||||
document.head.appendChild(style)
|
||||
}
|
||||
return h("div", { class: cls("border border-base-300 rounded-box bg-base-100 overflow-hidden shadow-sm flex flex-col", extraClass) }, [
|
||||
toolbar,
|
||||
h("div", { class: "relative" }, [
|
||||
h("div", { class: "relative flex-1 flex flex-col", onclick: () => showEmojis(false) }, [
|
||||
h("div", {
|
||||
ref: el => {
|
||||
if (!editorRef && el) {
|
||||
editorRef = el
|
||||
el.innerHTML = get(value) || ""
|
||||
editorRef = el; el.innerHTML = get(value) || "";
|
||||
document.execCommand("defaultParagraphSeparator", false, "br");
|
||||
el.addEventListener('click', (e) => {
|
||||
const container = e.target.closest('.resizable-img-container');
|
||||
if (container) { const img = container.querySelector('img'); if (img) openLightbox(img.src); }
|
||||
});
|
||||
}
|
||||
},
|
||||
style: () => `min-height:10rem;${isSource() ? 'display:none' : ''}`,
|
||||
class: "p-3 outline-none text-base-content [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:list-item [&_p]:m-0 [&_div]:m-0 [&_br]:content-[''] [&_br]:block [&_br]:h-[1em]",
|
||||
style: () => `min-height:22rem;${isSource() ? 'display:none' : ''}`,
|
||||
class: "p-4 outline-none text-base-content leading-relaxed [&>div]:m-0 [&>p]:m-0 [&>div]:min-h-[1em] [&_.resizable-img-container]:hover:border-primary [&_blockquote]:border-l-4 [&_blockquote]:border-base-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_ul]:list-disc [&_ul]:pl-8 [&_ol]:list-decimal [&_ol]:pl-8",
|
||||
contenteditable: "true",
|
||||
oninput: notify,
|
||||
onpaste: () => setTimeout(notify, 0)
|
||||
onkeydown: (e) => { if (e.key === 'Tab') { e.preventDefault(); exec("indent"); } },
|
||||
onkeyup: () => { triggerRefresh(); saveSelection(); },
|
||||
onclick: (e) => { triggerRefresh(); saveSelection(); e.stopPropagation(); },
|
||||
onmouseup: () => { notify(); saveSelection(); },
|
||||
onpaste: (e) => {
|
||||
e.preventDefault();
|
||||
const text = e.clipboardData.getData('text/plain');
|
||||
exec('insertText', text);
|
||||
},
|
||||
ondragover: (e) => e.preventDefault(),
|
||||
ondrop: (e) => { e.preventDefault(); handleUpload(e.dataTransfer.files[0]) }
|
||||
}),
|
||||
h("textarea", {
|
||||
class: "w-full min-h-[10rem] p-3 outline-none font-mono text-sm bg-base-200 border-0",
|
||||
class: "w-full flex-1 min-h-[22rem] p-4 outline-none font-mono text-sm bg-base-200 border-0",
|
||||
style: () => isSource() ? '' : 'display:none',
|
||||
value: source,
|
||||
oninput: (e) => source(e.target.value)
|
||||
oninput: (e) => { source(e.target.value); if (editorRef) editorRef.innerHTML = e.target.value; p.onchange?.(e.target.value); }
|
||||
})
|
||||
]),
|
||||
h("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [
|
||||
h("span", () => `${count()} caracteres`)
|
||||
])
|
||||
])
|
||||
}
|
||||
@@ -48,8 +48,7 @@ export const Autocomplete = ({ items, value, onselect, placeholder = 'Buscar...'
|
||||
onclick: () => pick(item),
|
||||
onmouseenter: () => cursor(idx)
|
||||
}, getBy(item))
|
||||
]),
|
||||
(item, idx) => getBy(item) + idx
|
||||
])
|
||||
),
|
||||
() => filtered().length === 0
|
||||
? h('li', { class: 'p-4 opacity-50 text-center' }, 'Sin resultados')
|
||||
|
||||
@@ -18,8 +18,7 @@ export const Select = (props) => {
|
||||
const value = typeof item === "string" ? item : item.value;
|
||||
const label = typeof item === "string" ? item : item.label;
|
||||
return h("option", { value }, label);
|
||||
},
|
||||
keyFn || ((item) => (typeof item === "string" ? item : item.value))
|
||||
}
|
||||
);
|
||||
|
||||
const options = placeholderOption
|
||||
|
||||
@@ -59,8 +59,7 @@ export const Fileinput = (props) => {
|
||||
class: "btn btn-ghost btn-xs btn-circle",
|
||||
onclick: (e) => { e.preventDefault(); removeFile(idx); }
|
||||
}, h("span", { class: "icon-[lucide--x]" }))
|
||||
]),
|
||||
(file) => file.name + file.lastModified
|
||||
])
|
||||
)
|
||||
])
|
||||
)
|
||||
|
||||
@@ -7,7 +7,7 @@ export const Menu = (props, children) => {
|
||||
};
|
||||
|
||||
export const MenuItems = (props) => {
|
||||
const { items, keyFn = (item, idx) => item.id ?? idx } = props;
|
||||
const { items } = props;
|
||||
const itemsSignal = typeof items === "function" ? items : () => items || [];
|
||||
|
||||
const renderItem = (item) => {
|
||||
@@ -28,5 +28,5 @@ export const MenuItems = (props) => {
|
||||
}, item.label));
|
||||
};
|
||||
|
||||
return each(itemsSignal, renderItem, keyFn);
|
||||
return each(itemsSignal, renderItem);
|
||||
};
|
||||
@@ -23,8 +23,7 @@ export const TableItems = (props) => {
|
||||
const content = col.render ? col.render(item, idx) : item[col.key];
|
||||
return h("td", { class: col.class }, content);
|
||||
})
|
||||
)
|
||||
, props.keyFn || ((item, idx) => item.id ?? idx))
|
||||
))
|
||||
]);
|
||||
|
||||
return [thead, tbody];
|
||||
|
||||
@@ -43,7 +43,6 @@ export const TabItems = (props) => {
|
||||
style: () => `display: ${props.activeIndex() === idx ? "block" : "none"};`
|
||||
}, typeof item.content === "function" ? item.content() : item.content)
|
||||
];
|
||||
},
|
||||
(item, idx) => item.id ?? idx
|
||||
}
|
||||
);
|
||||
};
|
||||
1834
dist/sigpro-ui.css
vendored
1834
dist/sigpro-ui.css
vendored
File diff suppressed because it is too large
Load Diff
947
dist/sigpro-ui.esm.js
vendored
947
dist/sigpro-ui.esm.js
vendored
File diff suppressed because it is too large
Load Diff
8
dist/sigpro-ui.esm.min.js
vendored
8
dist/sigpro-ui.esm.min.js
vendored
File diff suppressed because one or more lines are too long
947
dist/sigpro-ui.js
vendored
947
dist/sigpro-ui.js
vendored
File diff suppressed because it is too large
Load Diff
2
dist/sigpro-ui.min.css
vendored
2
dist/sigpro-ui.min.css
vendored
File diff suppressed because one or more lines are too long
8
dist/sigpro-ui.min.js
vendored
8
dist/sigpro-ui.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,68 +0,0 @@
|
||||
# Accordion
|
||||
|
||||
Collapsible accordion component for organizing content into expandable sections.
|
||||
|
||||
## 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` | `auto-generated` | Group name for radio-style accordions |
|
||||
| `class` | `string` | `''` | Additional CSS classes |
|
||||
| `children` | `VNode \| Array<VNode>` | Required | Content to display when expanded |
|
||||
| `items` | `Array` | `-` | Array of accordion items (alternative API) |
|
||||
|
||||
## 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>
|
||||
|
||||
```js
|
||||
const { Accordion, Div, mount } = window;
|
||||
|
||||
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,
|
||||
},
|
||||
div(
|
||||
{ class: "p-2" },
|
||||
"Content for section 1. This is a basic accordion section.",
|
||||
),
|
||||
),
|
||||
Accordion({
|
||||
title: "Section 2",
|
||||
open: open2,
|
||||
}, div(
|
||||
{ class: "p-2" },
|
||||
"Content for section 2. You can put any content here.",
|
||||
),),
|
||||
Accordion({
|
||||
title: "Section 3",
|
||||
open: open3,
|
||||
children: div(
|
||||
{ class: "p-2" },
|
||||
"Content for section 3. Accordions are great for FAQs.",
|
||||
),
|
||||
}),
|
||||
]);
|
||||
};
|
||||
mount(BasicDemo, "#demo-basic");
|
||||
```
|
||||
@@ -1,207 +0,0 @@
|
||||
# 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 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `children` | `string \| VNode \| Array<VNode>` | Required | Alert content |
|
||||
|
||||
## Styling
|
||||
|
||||
Alert supports all **daisyUI Alert classes**:
|
||||
|
||||
| Category | Classes | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color | `alert-info`, `alert-success`, `alert-warning`, `alert-error` | Alert type variants |
|
||||
| Style | `alert-soft` (default), `alert-solid` | Visual style variants |
|
||||
|
||||
> For further details, check the [daisyUI Alert Documentation](https://daisyui.com/components/alert) – Full reference for CSS classes.
|
||||
|
||||
## 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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const { Alert, Div, mount } = window;
|
||||
|
||||
const BasicDemo = () => {
|
||||
return div({ class: 'flex flex-col gap-3' }, [
|
||||
Alert({ class: 'alert-info' }, 'This is an informational message.'),
|
||||
Alert({ class: 'alert-success' }, 'Operation completed successfully!'),
|
||||
Alert({ class: 'alert-warning' }, 'Please review your input before proceeding.'),
|
||||
Alert({ class: 'alert-error' }, '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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const { Alert, Div, mount } = window;
|
||||
|
||||
const VariantsDemo = () => {
|
||||
return div({ class: 'flex flex-col gap-3' }, [
|
||||
Alert({ class: 'alert-info alert-soft' }, 'Soft info alert'),
|
||||
Alert({ class: 'alert-info alert-solid' }, 'Solid info alert'),
|
||||
Alert({ class: 'alert-success alert-soft' }, 'Soft success alert'),
|
||||
Alert({ class: 'alert-success alert-solid' }, '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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const { Alert, Button, Div, mount, Toast } = window;
|
||||
|
||||
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({ class: 'alert-warning alert-soft flex justify-between items-center' }, [
|
||||
span({}, `Deleted: ${deletedItem()}`),
|
||||
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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const { Alert, Button, Div, mount } = window;
|
||||
|
||||
const DismissibleDemo = () => {
|
||||
const visible = $(true);
|
||||
|
||||
return div({ class: 'flex flex-col gap-3' }, [
|
||||
() => visible() ? Alert({ class: 'alert-info flex justify-between items-center' }, [
|
||||
span({}, 'This alert can be dismissed. Click the X button to close.'),
|
||||
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>
|
||||
|
||||
```js
|
||||
const { Alert, Div, Input, mount } = window;
|
||||
|
||||
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({
|
||||
class: 'input input-bordered',
|
||||
placeholder: 'Enter your email',
|
||||
value: email,
|
||||
oninput: (e) => validateEmail(e.target.value)
|
||||
}),
|
||||
() => error() ? Alert({ class: 'alert-error' }, error()) : null,
|
||||
() => email() && !error() ? Alert({ class: 'alert-success' }, `Valid email: ${email()}`) : null
|
||||
]);
|
||||
};
|
||||
mount(ReactiveDemo, '#demo-reactive');
|
||||
```
|
||||
|
||||
### 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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const { Alert, Div, mount } = window;
|
||||
|
||||
const AllTypesDemo = () => {
|
||||
return div({ class: 'flex flex-col gap-3' }, [
|
||||
Alert({ class: 'alert-info' }, 'ℹ️ This is an info alert'),
|
||||
Alert({ class: 'alert-success' }, '✅ This is a success alert'),
|
||||
Alert({ class: 'alert-warning' }, '⚠️ This is a warning alert'),
|
||||
Alert({ class: 'alert-error' }, '❌ This is an error alert')
|
||||
]);
|
||||
};
|
||||
mount(AllTypesDemo, '#demo-all');
|
||||
```
|
||||
@@ -1,117 +0,0 @@
|
||||
# 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="app-demo" class="bg-base-100 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
// const App = () => {
|
||||
// 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({
|
||||
// items: [
|
||||
// { value: 'all', label: 'All items' },
|
||||
// { value: 'fruits', label: 'Fruits' },
|
||||
// { value: 'vegetables', label: 'Vegetables' }
|
||||
// ],
|
||||
// value: filterType,
|
||||
// onchange: (e) => filterType(e.target.value)
|
||||
// },
|
||||
// ),
|
||||
// Autocomplete({
|
||||
// items: () => allItems[filterType()],
|
||||
// value: selected,
|
||||
// onselect: (value) => selected(value)
|
||||
// })
|
||||
// ]);
|
||||
// };
|
||||
|
||||
|
||||
const App = () => {
|
||||
const password = $("");
|
||||
const selected = $('');
|
||||
|
||||
const countries = [
|
||||
'España', 'México', 'Argentina', 'Colombia', 'Chile',
|
||||
{ label: 'Estados Unidos', value: 'US' },
|
||||
{ label: 'Canadá', value: 'CA' },
|
||||
];
|
||||
|
||||
// Lógica de validación sencilla
|
||||
const requirements = [
|
||||
{ label: "Mínimo 8 caracteres", check: () => password().length >= 8 },
|
||||
{ label: "Incluye un número", check: () => /\d/.test(password()) },
|
||||
{ label: "Símbolo especial", check: () => /[^A-Za-z0-9]/.test(password()) },
|
||||
];
|
||||
const paisSelected = $("");
|
||||
return div({ class: "p-10 max-w-md" }, [
|
||||
Autocomplete({
|
||||
label: 'País',
|
||||
float: true,
|
||||
placeholder: 'Escribe para buscar...',
|
||||
items: countries,
|
||||
value: selected,
|
||||
onselect: (item) => console.log('Seleccionado:', item),
|
||||
}),
|
||||
|
||||
h('p', { class: 'text-sm opacity-70' }, () =>
|
||||
`Valor actual: ${selected() || 'ninguno'}`
|
||||
),
|
||||
Input({
|
||||
type: "password",
|
||||
value: password,
|
||||
rule: "[0-9]*",
|
||||
hint: "Debes escribir numeros del 0 al 9",
|
||||
oninput: (e) => password(e.target.value),
|
||||
label: "Pass",
|
||||
float: true,
|
||||
left: span({ class: "icon-[lucide--lock] mr-2" }),
|
||||
// El contenido que se animará con fx() dentro del Input
|
||||
content: div(
|
||||
{
|
||||
class:
|
||||
"mt-2 p-4 bg-base-200 rounded-lg shadow-xl border border-base-300",
|
||||
},
|
||||
[
|
||||
span(
|
||||
{ class: "text-xs font-bold uppercase opacity-50" },
|
||||
"Seguridad:",
|
||||
),
|
||||
ul(
|
||||
{ class: "mt-2 space-y-1" },
|
||||
requirements.map((req) =>
|
||||
h(
|
||||
"li",
|
||||
{
|
||||
class: () =>
|
||||
`flex items-center text-sm ${req.check() ? "text-success" : "text-error opacity-50"}`,
|
||||
},
|
||||
[
|
||||
span({
|
||||
class: () =>
|
||||
`mr-2 ${req.check() ? "icon-[lucide--check]" : "icon-[lucide--x]"}`,
|
||||
}),
|
||||
req.label,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
}),
|
||||
]);
|
||||
};
|
||||
|
||||
mount(App, "#app-demo");
|
||||
```
|
||||
@@ -1,323 +0,0 @@
|
||||
# Badge
|
||||
|
||||
Badge component for displaying counts, labels, and status indicators.
|
||||
|
||||
## Tag
|
||||
|
||||
`Badge`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI badge variants) |
|
||||
| `children` | `string \| VNode` | `-` | Badge content |
|
||||
|
||||
## Styling
|
||||
|
||||
Badge supports all **daisyUI Badge classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color | `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error` | Visual color variants |
|
||||
| Size | `badge-xs`, `badge-sm`, `badge-md`, `badge-lg` | Badge scale |
|
||||
| Style | `badge-outline`, `badge-ghost`, `badge-dash` | Visual style variants |
|
||||
|
||||
> For further details, check the [daisyUI Badge Documentation](https://daisyui.com/components/badge) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Badge({ class: "badge-primary badge-lg" }, "New");
|
||||
// Applies: primary color, large size
|
||||
```
|
||||
|
||||
## 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' }, [
|
||||
span({}, '✓'),
|
||||
span({}, 'Success')
|
||||
]),
|
||||
Badge({ class: 'gap-1 badge-warning' }, [
|
||||
span({}, '⚠'),
|
||||
span({}, 'Warning')
|
||||
]),
|
||||
Badge({ class: 'gap-1 badge-error' }, [
|
||||
span({}, '✗'),
|
||||
span({}, 'Error')
|
||||
]),
|
||||
Badge({ class: 'gap-1 badge-info' }, [
|
||||
span({}, 'ℹ'),
|
||||
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');
|
||||
```
|
||||
@@ -1,159 +0,0 @@
|
||||
# Button
|
||||
|
||||
---
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Description |
|
||||
| :--------- | :--------------------------- | :----------------------------------------------------- |
|
||||
| `class` | `string` | Additional CSS classes |
|
||||
| `loading` | `boolean \| Signal<boolean>` | Shows a spinner and disables the button |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | Disabled state |
|
||||
| `icon` | `string \| VNode \| Signal` | Icon displayed before the text |
|
||||
| `onclick` | `function` | Click event handler |
|
||||
| `type` | `string` | Native button type (`'button'`, `'submit'`, `'reset'`) |
|
||||
|
||||
---
|
||||
|
||||
## Classes (daisyUI)
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :------- | :--------------------------------------------------------------------------------------------------------------- | :-------------------- |
|
||||
| Color | `btn-primary`, `btn-secondary`, `btn-accent`, `btn-ghost`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` | Visual color variants |
|
||||
| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl` | Button scale |
|
||||
| Style | `btn-outline`, `btn-soft`, `btn-dash`, `btn-link` | Visual style variants |
|
||||
| Shape | `btn-circle`, `btn-square`, `btn-wide`, `btn-block` | Button shape |
|
||||
| State | `btn-active`, `btn-disabled` | Forced visual states |
|
||||
|
||||
> SigProUI supports styling via daisyUI independently or combined with the `ui` prop.
|
||||
> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
button({ class: "btn-primary btn-lg btn-circle gap-4" }, "Click Me");
|
||||
// Applies: primary color, large size, circular shape
|
||||
// class is any css class from pure css or favorite framework
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Examples
|
||||
|
||||
### 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",
|
||||
disabled: isSaving,
|
||||
onclick: async () => {
|
||||
isSaving(true);
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
isSaving(false);
|
||||
},
|
||||
},
|
||||
[when(isSaving, ()=>Loading()), "Save Changes"],
|
||||
);
|
||||
};
|
||||
mount(LoadingDemo, "#demo-loading");
|
||||
```
|
||||
|
||||
### With Icon
|
||||
|
||||
<div id="demo-icon" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
|
||||
```javascript
|
||||
const IconDemo = () => {
|
||||
return div({ class: "flex flex-wrap gap-2 justify-center" }, [
|
||||
button({ class: "btn-primary" }, [Icon("icon-[lucide--x]"), "Favorite"]),
|
||||
]);
|
||||
};
|
||||
mount(IconDemo, "#demo-icon");
|
||||
```
|
||||
|
||||
### With Badge (using Indicator)
|
||||
|
||||
<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 Indicator(
|
||||
{ value: "3", class: "badge-accent" },
|
||||
button({ class: "btn-outline" }, "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 Tooltip(
|
||||
{ tip: "Delete item" },
|
||||
button({ class: "btn-ghost" }, "Delete"),
|
||||
);
|
||||
};
|
||||
mount(TooltipDemo, "#demo-tooltip");
|
||||
```
|
||||
|
||||
### Combined (Badge + Tooltip)
|
||||
|
||||
<div id="demo-combined" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||
|
||||
```javascript
|
||||
const CombinedDemo = () => {
|
||||
const count = $(0);
|
||||
return Tooltip(
|
||||
{ tip: () => `${count()} likes` },
|
||||
Indicator(
|
||||
{ value: count, class: "badge-accent" },
|
||||
button(
|
||||
{
|
||||
class: "btn-primary btn-lg",
|
||||
onclick: () => count(count() + 1),
|
||||
},
|
||||
["👍", "Like", Icon("icon-[lucide--heart]")],
|
||||
),
|
||||
),
|
||||
);
|
||||
};
|
||||
mount(CombinedDemo, "#demo-combined");
|
||||
```
|
||||
|
||||
### All Color 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"),
|
||||
button({ class: "btn-disabled" }, "Disabled"),
|
||||
]);
|
||||
};
|
||||
mount(VariantsDemo, "#demo-variants");
|
||||
```
|
||||
@@ -1,292 +0,0 @@
|
||||
# Checkbox
|
||||
|
||||
Toggle checkbox component with label 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 |
|
||||
| `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 |
|
||||
|
||||
## Styling
|
||||
|
||||
Checkbox supports all **daisyUI Checkbox and Toggle classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color (Checkbox) | `checkbox-primary`, `checkbox-secondary`, `checkbox-accent`, `checkbox-info`, `checkbox-success`, `checkbox-warning`, `checkbox-error` | Checkbox color variants |
|
||||
| Size (Checkbox) | `checkbox-xs`, `checkbox-sm`, `checkbox-md`, `checkbox-lg` | Checkbox scale |
|
||||
| Color (Toggle) | `toggle-primary`, `toggle-secondary`, `toggle-accent`, `toggle-info`, `toggle-success`, `toggle-warning`, `toggle-error` | Toggle color variants |
|
||||
| Size (Toggle) | `toggle-xs`, `toggle-sm`, `toggle-md`, `toggle-lg` | Toggle scale |
|
||||
|
||||
> For further details, check the [daisyUI Checkbox Documentation](https://daisyui.com/components/checkbox) and [daisyUI Toggle Documentation](https://daisyui.com/components/toggle) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
// Checkbox
|
||||
Checkbox({ class: "checkbox-primary checkbox-lg", label: "Accept terms" });
|
||||
|
||||
// Toggle switch
|
||||
Checkbox({ toggle: true, class: "toggle-success", label: "Enable feature" });
|
||||
```
|
||||
|
||||
## 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');
|
||||
```
|
||||
|
||||
### 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');
|
||||
```
|
||||
|
||||
### 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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const TooltipDemo = () => {
|
||||
const accepted = $(false);
|
||||
|
||||
return Tooltip({
|
||||
tip: "You must accept the terms to continue"
|
||||
},
|
||||
Checkbox({
|
||||
label: 'I accept the terms',
|
||||
value: accepted,
|
||||
onclick: () => accepted(!accepted())
|
||||
})
|
||||
);
|
||||
};
|
||||
mount(TooltipDemo, '#demo-tooltip');
|
||||
```
|
||||
|
||||
### 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');
|
||||
```
|
||||
@@ -1,225 +0,0 @@
|
||||
# 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 (Tailwind + custom styling) |
|
||||
|
||||
## Styling
|
||||
|
||||
Colorpicker is a custom component built with Tailwind CSS. The button supports standard **daisyUI Button classes** for consistent styling:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg` | Button scale |
|
||||
| Style | `btn-outline`, `btn-soft`, `btn-ghost` | Visual style variants |
|
||||
|
||||
> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – The color picker button accepts standard button styling classes.
|
||||
|
||||
## 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 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, '#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 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, '#demo-dynamic');
|
||||
```
|
||||
@@ -1,205 +0,0 @@
|
||||
# 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) |
|
||||
|
||||
## Styling
|
||||
|
||||
Datepicker wraps a **daisyUI Input component** internally. All Input styling classes work:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color | `input-primary`, `input-secondary`, `input-accent`, `input-ghost`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
|
||||
| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input scale |
|
||||
| Style | `input-bordered` (default), `input-ghost` | Visual style variants |
|
||||
|
||||
> For further details, check the [daisyUI Input Documentation](https://daisyui.com/components/input) – Full reference for CSS classes.
|
||||
|
||||
## 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>
|
||||
|
||||
```js
|
||||
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');
|
||||
```
|
||||
@@ -1,493 +0,0 @@
|
||||
# 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) |
|
||||
|
||||
## Styling
|
||||
|
||||
Drawer supports all **daisyUI Drawer classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Position | `drawer-end` | Drawer opens from the right side |
|
||||
| Width | `w-64`, `w-80`, `w-96` | Custom drawer width (Tailwind) |
|
||||
|
||||
> For further details, check the [daisyUI Drawer Documentation](https://daisyui.com/components/drawer) – Full reference for CSS classes.
|
||||
|
||||
## 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)
|
||||
}, span('✕'))
|
||||
])
|
||||
]),
|
||||
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('-')),
|
||||
span({ class: 'w-8 text-center' }, item.quantity),
|
||||
button({
|
||||
class: 'btn btn-xs btn-circle',
|
||||
onclick: () => updateQuantity(item.id, 1)
|
||||
}, span('+'))
|
||||
]),
|
||||
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
|
||||
}, span('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)
|
||||
}, span({ class: 'flex items-center gap-2' }, [span('🛒'), span(`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);
|
||||
}
|
||||
}, span({ class: 'flex flex-col items-center gap-1' }, [span('📦'), span('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'),
|
||||
h('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');
|
||||
```
|
||||
@@ -1,255 +0,0 @@
|
||||
# Dropdown
|
||||
|
||||
Dropdown component for creating menus that appear when triggered. Uses DaisyUI's native details/summary pattern.
|
||||
|
||||
## 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>` | Required | Array of menu items |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
|
||||
### MenuItem Structure
|
||||
|
||||
| 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 |
|
||||
|
||||
## Styling
|
||||
|
||||
Dropdown supports all **daisyUI Dropdown classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Position | `dropdown-end` | Align dropdown to the right |
|
||||
| Direction | `dropdown-top`, `dropdown-bottom`, `dropdown-left`, `dropdown-right` | Dropdown open direction |
|
||||
| Hover | `dropdown-hover` | Open on hover instead of click |
|
||||
|
||||
> For further details, check the [daisyUI Dropdown Documentation](https://daisyui.com/components/dropdown) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Dropdown({
|
||||
label: "Menu",
|
||||
class: "dropdown-end dropdown-hover",
|
||||
items: [
|
||||
{ label: "Profile", onclick: () => console.log("Profile") },
|
||||
{ label: "Settings", onclick: () => console.log("Settings") }
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic 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-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
|
||||
|
||||
<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
|
||||
|
||||
<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
|
||||
|
||||
<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
|
||||
|
||||
<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 unreadCount = () => notifications().filter(n => !n.read).length;
|
||||
|
||||
const markAsRead = (id) => {
|
||||
notifications(notifications().map(n =>
|
||||
n.id === id ? { ...n, read: true } : n
|
||||
));
|
||||
};
|
||||
|
||||
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',
|
||||
items: () => notifications().map(notif => ({
|
||||
label: div({ class: 'flex flex-col' }, [
|
||||
span({ class: 'font-medium' }, notif.title),
|
||||
span({ class: 'text-xs opacity-60' }, notif.time)
|
||||
]),
|
||||
class: notif.read ? '' : 'bg-primary/5',
|
||||
onclick: () => markAsRead(notif.id)
|
||||
}))
|
||||
});
|
||||
};
|
||||
|
||||
mount(NotificationsDropdown, '#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-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');
|
||||
```
|
||||
@@ -1,378 +0,0 @@
|
||||
# Fab
|
||||
|
||||
Floating Action Button (FAB) component for primary actions with expandable menu options.
|
||||
|
||||
## 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 |
|
||||
| `text` | `string` | Alternative text when no icon is provided |
|
||||
|
||||
## Styling
|
||||
|
||||
Fab uses **daisyUI Button classes** for styling the main button and action buttons:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color | `btn-primary`, `btn-secondary`, `btn-accent`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` | Visual color variants |
|
||||
| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl` | Button scale |
|
||||
| Shape | `btn-circle` | Circular button shape (default for FAB) |
|
||||
|
||||
> For further details, check the [daisyUI FAB Documentation](https://daisyui.com/components/fab) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Fab({
|
||||
icon: "➕",
|
||||
class: "btn-primary btn-lg",
|
||||
position: "bottom-6 right-6",
|
||||
actions: [
|
||||
{ icon: "📝", label: "New Note", onclick: () => console.log("Create note") }
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
## 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({
|
||||
items: [
|
||||
{ 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' }
|
||||
],
|
||||
value: position,
|
||||
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({
|
||||
items: Object.keys(variants).map(v => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) })),
|
||||
value: variant,
|
||||
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');
|
||||
```
|
||||
|
||||
### 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');
|
||||
```
|
||||
@@ -1,324 +0,0 @@
|
||||
# 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 |
|
||||
|
||||
## Styling
|
||||
|
||||
Fieldset supports all **daisyUI Fieldset classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Base | `fieldset` | Base fieldset styling |
|
||||
| Color | `fieldset-primary`, `fieldset-secondary`, `fieldset-accent` | Border color variants |
|
||||
| Size | `fieldset-xs`, `fieldset-sm`, `fieldset-md`, `fieldset-lg` | Fieldset scale |
|
||||
|
||||
> For further details, check the [daisyUI Fieldset Documentation](https://daisyui.com/components/fieldset) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Fieldset({
|
||||
legend: "Personal Information",
|
||||
class: "fieldset-primary w-full max-w-md"
|
||||
}, [
|
||||
input({ label: "Name", placeholder: "Enter your name" }),
|
||||
input({ label: "Email", type: "email" })
|
||||
]);
|
||||
```
|
||||
|
||||
## 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,
|
||||
items: [
|
||||
{ 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, inputValue: 'credit', onclick: () => method('credit') }),
|
||||
Radio({ label: 'PayPal', value: method, inputValue: 'paypal', onclick: () => method('paypal') }),
|
||||
Radio({ label: 'Bank Transfer', value: method, inputValue: '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, inputValue: 'light', onclick: () => theme('light') }),
|
||||
Radio({ label: 'Dark', value: theme, inputValue: 'dark', onclick: () => theme('dark') }),
|
||||
Radio({ label: 'System', value: theme, inputValue: 'system', onclick: () => theme('system') })
|
||||
])
|
||||
]),
|
||||
select({
|
||||
label: 'Language',
|
||||
value: language,
|
||||
items: [
|
||||
{ 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');
|
||||
```
|
||||
@@ -1,284 +0,0 @@
|
||||
# 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 |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `value` | `string \| VNode \| Signal` | `-` | Content to display as indicator |
|
||||
| `class` | `string` | `''` | Additional CSS classes for the badge |
|
||||
| `children` | `VNode` | `-` | Element to attach the indicator to |
|
||||
|
||||
## Styling
|
||||
|
||||
Indicator uses **daisyUI Indicator and Badge classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Position | `indicator-start`, `indicator-end`, `indicator-top`, `indicator-bottom` | Indicator position (default: top-end) |
|
||||
| Badge Color | `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error` | Badge visual variants |
|
||||
| Badge Size | `badge-xs`, `badge-sm`, `badge-md`, `badge-lg` | Badge scale |
|
||||
|
||||
> For further details, check the [daisyUI Indicator Documentation](https://daisyui.com/components/indicator) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Indicator({ value: "3", class: "badge-primary" },
|
||||
button({ class: "btn" }, "Notifications")
|
||||
);
|
||||
```
|
||||
|
||||
## 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({ value: '3', class: 'badge-primary' },
|
||||
div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '📦')
|
||||
),
|
||||
Indicator({ value: '99+', class: 'badge-secondary' },
|
||||
div({ class: 'w-16 h-16 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
|
||||
),
|
||||
Indicator({ value: 'New', class: '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({ value: '●', class: '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({ value: '●', class: '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({ value: '●', class: '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({
|
||||
value: () => count() > 0 ? count() : null,
|
||||
class: '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({
|
||||
value: () => cart().length,
|
||||
class: '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({
|
||||
value: () => unread(),
|
||||
class: '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');
|
||||
```
|
||||
|
||||
### 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({ value: '3', class: 'badge-primary badge-sm' },
|
||||
div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '📧')
|
||||
),
|
||||
Indicator({ value: '99+', class: 'badge-secondary badge-md' },
|
||||
div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '🔔')
|
||||
),
|
||||
Indicator({ value: '●', class: 'badge-success badge-xs' },
|
||||
div({ class: 'avatar' }, [
|
||||
div({ class: 'w-10 h-10 rounded-full bg-primary' })
|
||||
])
|
||||
),
|
||||
Indicator({ value: '!', class: 'badge-error badge-sm' },
|
||||
div({ class: 'w-12 h-12 bg-base-300 rounded-lg flex items-center justify-center' }, '⚠️')
|
||||
)
|
||||
]);
|
||||
};
|
||||
mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
@@ -1,254 +0,0 @@
|
||||
# Input
|
||||
|
||||
Form input component with icons, password toggle, and validation.
|
||||
|
||||
## Tag
|
||||
|
||||
`Input`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :------------ | :--------------------------- | :------- | :----------------------------------------------- |
|
||||
| `type` | `string` | `'text'` | Input type (text, password, email, number, date) |
|
||||
| `value` | `string \| Signal<string>` | `''` | Input value |
|
||||
| `placeholder` | `string` | `' '` | Placeholder text |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `oninput` | `function` | `-` | Input event handler |
|
||||
|
||||
## Styling
|
||||
|
||||
Input supports all **daisyUI Input classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :------- | :---------------------------------------------------------------------------------------------------------------- | :------------------- |
|
||||
| Style | `input-bordered`, `input-ghost` | Input style variants |
|
||||
| Color | `input-primary`, `input-secondary`, `input-accent`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
|
||||
| Size | `input-xs`, `input-sm`, `input-md`, `input-lg` | Input size variants |
|
||||
|
||||
## 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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const { Input, mount } = window;
|
||||
|
||||
const BasicDemo = () => {
|
||||
const name = $("");
|
||||
return input({
|
||||
placeholder: "Enter your name",
|
||||
value: name,
|
||||
oninput: (e) => name(e.target.value)
|
||||
});
|
||||
};
|
||||
mount(BasicDemo, "#demo-basic");
|
||||
```
|
||||
|
||||
### With Icon
|
||||
|
||||
Wrap the input inside a `Div` with class `input` and add an icon as a sibling.
|
||||
|
||||
<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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const { InputLabel, Div, Icon, mount } = window;
|
||||
|
||||
const IconDemo = () => {
|
||||
const email = $("");
|
||||
return div({ class: "input input-bordered flex items-center gap-2" }, [
|
||||
Icon("✉️"),
|
||||
h("input", {
|
||||
class: "grow",
|
||||
type: "email",
|
||||
value: email,
|
||||
placeholder: "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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const { Input, Div, Icon, Swap, mount } = window;
|
||||
|
||||
const PasswordDemo = () => {
|
||||
const password = $("");
|
||||
const visible = $(false);
|
||||
return div({ class: "input input-bordered flex items-center gap-2" }, [
|
||||
Icon("icon-[lucide--lock]"),
|
||||
h("input", {
|
||||
type: () => (visible() ? "text" : "password"),
|
||||
value: password,
|
||||
placeholder: "Password",
|
||||
class: "grow",
|
||||
oninput: (e) => password(e.target.value)
|
||||
}),
|
||||
Swap({
|
||||
value: visible,
|
||||
class: "swap-rotate",
|
||||
on: Icon("icon-[lucide--eye]"),
|
||||
off: Icon("icon-[lucide--eye-off]")
|
||||
})
|
||||
]);
|
||||
};
|
||||
mount(PasswordDemo, "#demo-password");
|
||||
```
|
||||
|
||||
### With Floating Label
|
||||
|
||||
Use a wrapper `Div` with class `floating-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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const { Input, Div, Span, mount } = window;
|
||||
|
||||
const LabelDemo = () => {
|
||||
const email = $("");
|
||||
return div({ class: "floating-label" }, [
|
||||
span("Email"),
|
||||
input({
|
||||
type: "email",
|
||||
value: email,
|
||||
placeholder: " ",
|
||||
oninput: (e) => email(e.target.value)
|
||||
})
|
||||
]);
|
||||
};
|
||||
mount(LabelDemo, "#demo-label");
|
||||
```
|
||||
|
||||
### With Tooltip
|
||||
|
||||
Wrap the input with `Tooltip` component.
|
||||
|
||||
<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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const { Input, Tooltip, mount } = window;
|
||||
|
||||
const TooltipDemo = () => {
|
||||
const username = $("");
|
||||
return Tooltip({ tip: "Must be at least 3 characters" }, [
|
||||
input({
|
||||
placeholder: "Username",
|
||||
value: username,
|
||||
oninput: (e) => username(e.target.value)
|
||||
})
|
||||
]);
|
||||
};
|
||||
mount(TooltipDemo, "#demo-tooltip");
|
||||
```
|
||||
|
||||
### Error State
|
||||
|
||||
Add `input-error` class and show a validation message.
|
||||
|
||||
<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>
|
||||
|
||||
```js
|
||||
const { Input, Div, mount } = window;
|
||||
|
||||
const ErrorDemo = () => {
|
||||
const email = $("");
|
||||
const isValid = () => email().includes("@");
|
||||
return div({ class: "flex flex-col gap-2" }, [
|
||||
h("input", {
|
||||
type: "email",
|
||||
class: () => `input input-bordered ${email() && !isValid() ? "input-error" : ""}`,
|
||||
value: email,
|
||||
placeholder: "mail@example.com",
|
||||
oninput: (e) => email(e.target.value)
|
||||
}),
|
||||
() => email() && !isValid() ? div({ class: "text-error text-sm" }, "Enter a valid email") : null
|
||||
]);
|
||||
};
|
||||
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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const { Input, mount } = window;
|
||||
|
||||
const DisabledDemo = () => {
|
||||
return input({ 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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```js
|
||||
const { Input, Div, mount } = window;
|
||||
|
||||
const VariantsDemo = () => {
|
||||
const text = $("");
|
||||
return div({ class: "flex flex-col gap-4" }, [
|
||||
input({ placeholder: "Default", value: text, oninput: (e) => text(e.target.value) }),
|
||||
input({ class: "input-primary", placeholder: "Primary", value: $("") }),
|
||||
input({ class: "input-secondary", placeholder: "Secondary", value: $("") }),
|
||||
input({ class: "input-accent", placeholder: "Accent", value: $("") }),
|
||||
input({ class: "input-ghost", placeholder: "Ghost", value: $("") }),
|
||||
input({ class: "input-info", placeholder: "Info", value: $("") }),
|
||||
input({ class: "input-success", placeholder: "Success", value: $("") }),
|
||||
input({ class: "input-warning", placeholder: "Warning", value: $("") }),
|
||||
input({ class: "input-error", placeholder: "Error", value: $("") }),
|
||||
input({ type: "number", placeholder: "Number", value: $(0), oninput: (e) => e.target.value }),
|
||||
input({ type: "date", value: $("2024-01-01") })
|
||||
]);
|
||||
};
|
||||
mount(VariantsDemo, "#demo-variants");
|
||||
```
|
||||
@@ -1,425 +0,0 @@
|
||||
# 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)` | Required | 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) |
|
||||
|
||||
## Styling
|
||||
|
||||
List supports all **daisyUI List classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--------- | :------------ | :------------------------- |
|
||||
| Base | `list` | Base list styling |
|
||||
| Variant | `list-row` | Row styling for list items |
|
||||
| Background | `bg-base-100` | Background color |
|
||||
|
||||
> For further details, check the [daisyUI List Documentation](https://daisyui.com/components/list) – Full reference for CSS classes.
|
||||
|
||||
## 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 (Todo App)
|
||||
|
||||
<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;
|
||||
watch(()=> console.log(pendingCount()));
|
||||
return div({ class: 'flex flex-col gap-4' }, [
|
||||
div({ class: 'flex gap-2' }, [
|
||||
input({
|
||||
placeholder: 'Add new task...',
|
||||
value: newTodo,
|
||||
oninput: (e) => newTodo(e.target.value),
|
||||
onkeypress: (e) => e.key === 'Enter' && addTodo()
|
||||
}),
|
||||
button({ class: 'btn btn-primary', onclick: addTodo }, 'Add')
|
||||
]),
|
||||
List({
|
||||
items: todos,
|
||||
render: (item) => {
|
||||
// Esta función busca siempre el estado actual del item dentro del signal
|
||||
const it = () => todos().find(t => t.id === item.id) || item;
|
||||
|
||||
return div({
|
||||
class: () => `flex items-center gap-3 p-2 border-b border-base-300 ${it().done ? 'opacity-60' : ''}`
|
||||
}, [
|
||||
Checkbox({
|
||||
value: () => it().done,
|
||||
onclick: () => toggleTodo(item.id)
|
||||
}),
|
||||
span({
|
||||
class: () => `flex-1 ${it().done ? 'line-through' : ''}`,
|
||||
onclick: () => toggleTodo(item.id)
|
||||
}, () => it().text),
|
||||
button({
|
||||
class: 'btn btn-ghost btn-xs btn-circle',
|
||||
onclick: () => deleteTodo(item.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");
|
||||
```
|
||||
@@ -1,426 +0,0 @@
|
||||
# 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) |
|
||||
|
||||
## Styling
|
||||
|
||||
Menu supports all **daisyUI Menu classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Direction | `menu-vertical` (default), `menu-horizontal` | Menu orientation |
|
||||
| Size | `menu-xs`, `menu-sm`, `menu-md`, `menu-lg` | Menu scale |
|
||||
| Style | `menu-compact` | Reduced padding |
|
||||
| Background | `bg-base-100`, `bg-base-200` | Background colors |
|
||||
|
||||
> For further details, check the [daisyUI Menu Documentation](https://daisyui.com/components/menu) – Full reference for CSS classes.
|
||||
|
||||
## 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 = $(3);
|
||||
|
||||
return Menu({
|
||||
class: 'rounded-box w-56',
|
||||
items: [
|
||||
{
|
||||
icon: '👤',
|
||||
label: 'My Profile',
|
||||
onclick: () => Toast('Profile clicked', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '📧',
|
||||
label: 'Messages',
|
||||
onclick: () => Toast('Messages opened', 'alert-info', 2000)
|
||||
},
|
||||
{
|
||||
icon: '🔔',
|
||||
label: 'Notifications',
|
||||
badge: () => notifications(),
|
||||
onclick: () => {
|
||||
notifications(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');
|
||||
```
|
||||
@@ -1,395 +0,0 @@
|
||||
# Modal
|
||||
|
||||
Modal dialog component for displaying content in an overlay with customizable actions and backdrop. Uses the native HTML `<dialog>` element for better accessibility and performance.
|
||||
|
||||
## 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 |
|
||||
|
||||
## Styling
|
||||
|
||||
Modal supports all **daisyUI Modal classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Size | `modal-sm`, `modal-md`, `modal-lg`, `modal-xl` | Modal scale |
|
||||
| Position | `modal-top`, `modal-middle`, `modal-bottom` | Modal vertical alignment |
|
||||
|
||||
> For further details, check the [daisyUI Modal Documentation](https://daisyui.com/components/modal) – Full reference for CSS classes.
|
||||
|
||||
## 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({
|
||||
class: 'btn-primary',
|
||||
onclick: () => {
|
||||
isOpen(false);
|
||||
}
|
||||
}, 'Custom Action')
|
||||
}, [
|
||||
div({ class: 'py-4' }, 'This is a basic modal dialog. Press ESC or click Close.')
|
||||
])
|
||||
]);
|
||||
};
|
||||
mount(BasicDemo, '#demo-basic');
|
||||
```
|
||||
|
||||
|
||||
<!-- Open the modal using ID.showModal() method -->
|
||||
<button class="btn" onclick="my_modal_1.showModal()">TEST DIRECTO</button>
|
||||
<dialog id="my_modal_1" class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">Hello!</h3>
|
||||
<p class="py-4">Press ESC key or click the button below to close</p>
|
||||
<div class="modal-action">
|
||||
<form method="dialog">
|
||||
<!-- if there is a button in form, it will close the modal -->
|
||||
<button class="btn">Close</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
|
||||
### 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');
|
||||
```
|
||||
@@ -1,276 +0,0 @@
|
||||
# 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) |
|
||||
|
||||
## Styling
|
||||
|
||||
Navbar supports all **daisyUI Navbar classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Base | `navbar` | Base navbar styling |
|
||||
| Sections | `navbar-start`, `navbar-center`, `navbar-end` | Content alignment sections |
|
||||
| Background | `bg-base-100`, `bg-base-200`, `bg-primary`, etc. | Background colors |
|
||||
| Shadow | `shadow`, `shadow-lg`, `shadow-md` | Box shadow variants |
|
||||
|
||||
> For further details, check the [daisyUI Navbar Documentation](https://daisyui.com/components/navbar) – Full reference for CSS classes.
|
||||
|
||||
## 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 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' }, [
|
||||
span({ class: 'text-sm' }, 'Dashboard'),
|
||||
span({ class: 'text-sm' }, 'Projects'),
|
||||
span({ class: 'text-sm' }, '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' }, [
|
||||
span({ class: 'menu-item' }, 'Profile'),
|
||||
span({ class: 'menu-item' }, 'Settings'),
|
||||
span({ 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');
|
||||
```
|
||||
@@ -1,409 +0,0 @@
|
||||
# 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 |
|
||||
| `inputValue` | `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 |
|
||||
|
||||
## Styling
|
||||
|
||||
Radio supports all **daisyUI Radio classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color | `radio-primary`, `radio-secondary`, `radio-accent`, `radio-info`, `radio-success`, `radio-warning`, `radio-error` | Radio color variants |
|
||||
| Size | `radio-xs`, `radio-sm`, `radio-md`, `radio-lg` | Radio scale |
|
||||
|
||||
> For further details, check the [daisyUI Radio Documentation](https://daisyui.com/components/radio) – Full reference for CSS classes.
|
||||
|
||||
## 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,
|
||||
inputValue: 'option1',
|
||||
onclick: () => selected('option1')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option 2',
|
||||
name: 'basic-group',
|
||||
value: selected,
|
||||
inputValue: 'option2',
|
||||
onclick: () => selected('option2')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option 3',
|
||||
name: 'basic-group',
|
||||
value: selected,
|
||||
inputValue: '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,
|
||||
inputValue: 'light',
|
||||
tooltip: 'Light theme with white background',
|
||||
onclick: () => selected('light')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Dark mode',
|
||||
name: 'theme-group',
|
||||
value: selected,
|
||||
inputValue: '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,
|
||||
inputValue: 'enabled',
|
||||
onclick: () => selected('enabled')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Disabled option (cannot select)',
|
||||
name: 'disabled-group',
|
||||
value: selected,
|
||||
inputValue: '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,
|
||||
inputValue: 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,
|
||||
inputValue: 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,
|
||||
inputValue: 'credit',
|
||||
onclick: () => method('credit')
|
||||
}),
|
||||
Radio({
|
||||
label: '🏦 Bank Transfer',
|
||||
name: 'payment-group',
|
||||
value: method,
|
||||
inputValue: 'bank',
|
||||
onclick: () => method('bank')
|
||||
}),
|
||||
Radio({
|
||||
label: '📱 Digital Wallet',
|
||||
name: 'payment-group',
|
||||
value: method,
|
||||
inputValue: '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,
|
||||
inputValue: 'primary1',
|
||||
class: 'radio-primary',
|
||||
onclick: () => primary('primary1')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option B',
|
||||
name: 'primary-group',
|
||||
value: primary,
|
||||
inputValue: '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,
|
||||
inputValue: 'secondary1',
|
||||
class: 'radio-secondary',
|
||||
onclick: () => secondary('secondary1')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option B',
|
||||
name: 'secondary-group',
|
||||
value: secondary,
|
||||
inputValue: '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,
|
||||
inputValue: 'accent1',
|
||||
class: 'radio-accent',
|
||||
onclick: () => accent('accent1')
|
||||
}),
|
||||
Radio({
|
||||
label: 'Option B',
|
||||
name: 'accent-group',
|
||||
value: accent,
|
||||
inputValue: '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,
|
||||
inputValue: 'cars',
|
||||
onclick: () => {
|
||||
category('cars');
|
||||
selected('');
|
||||
}
|
||||
}),
|
||||
Radio({
|
||||
label: 'Colors',
|
||||
name: 'category-group',
|
||||
value: category,
|
||||
inputValue: '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,
|
||||
inputValue: opt.value,
|
||||
onclick: () => selected(opt.value)
|
||||
})
|
||||
)
|
||||
),
|
||||
() => selected()
|
||||
? div({ class: 'alert alert-success mt-2' }, () => `Selected ${category()}: ${selected()}`)
|
||||
: null
|
||||
]);
|
||||
};
|
||||
mount(DynamicDemo, '#demo-dynamic');
|
||||
```
|
||||
@@ -1,258 +0,0 @@
|
||||
# Range
|
||||
|
||||
Range slider component for selecting numeric values with labels, tooltips, and DaisyUI styling.
|
||||
|
||||
## Tag
|
||||
|
||||
`Range`
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `value` | `number \| Signal<number>` | `0` | Current slider value |
|
||||
| `min` | `number` | `0` | Minimum value |
|
||||
| `max` | `number` | `100` | Maximum value |
|
||||
| `step` | `number` | `1` | Step increment |
|
||||
| `label` | `string \| VNode \| Signal` | `-` | Label text for the slider |
|
||||
| `tooltip` | `string` | `-` | Tooltip text on hover |
|
||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `oninput` | `function` | `-` | Input event handler |
|
||||
|
||||
## Styling
|
||||
|
||||
Range supports all **daisyUI Range classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color | `range-primary`, `range-secondary`, `range-accent`, `range-info`, `range-success`, `range-warning`, `range-error` | Range color variants |
|
||||
| Size | `range-xs`, `range-sm`, `range-md`, `range-lg` | Range scale |
|
||||
|
||||
> For further details, check the [daisyUI Range Documentation](https://daisyui.com/components/range) – Full reference for CSS classes.
|
||||
|
||||
## Live Examples
|
||||
|
||||
### Basic Range
|
||||
|
||||
<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-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const BasicDemo = () => {
|
||||
const value = $(50);
|
||||
|
||||
return div({ class: 'flex flex-col gap-4' }, [
|
||||
Range({
|
||||
label: 'Volume',
|
||||
value: value,
|
||||
min: 0,
|
||||
max: 100,
|
||||
oninput: (e) => value(parseInt(e.target.value))
|
||||
}),
|
||||
div({ class: 'text-center' }, () => `Value: ${value()}%`)
|
||||
]);
|
||||
};
|
||||
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"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const TooltipDemo = () => {
|
||||
const brightness = $(75);
|
||||
|
||||
return div({ class: 'flex flex-col gap-4' }, [
|
||||
Range({
|
||||
label: 'Brightness',
|
||||
value: brightness,
|
||||
min: 0,
|
||||
max: 100,
|
||||
tooltip: () => `${brightness()}% brightness`,
|
||||
oninput: (e) => brightness(parseInt(e.target.value))
|
||||
}),
|
||||
div({ class: 'w-full h-20 rounded-lg transition-all', style: () => `background-color: hsl(0, 0%, ${brightness()}%)` })
|
||||
]);
|
||||
};
|
||||
mount(TooltipDemo, '#demo-tooltip');
|
||||
```
|
||||
|
||||
### 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-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const ColorsDemo = () => {
|
||||
const primary = $(30);
|
||||
const secondary = $(60);
|
||||
const accent = $(90);
|
||||
|
||||
return div({ class: 'flex flex-col gap-4' }, [
|
||||
Range({ label: 'Primary', value: primary, class: 'range-primary', oninput: (e) => primary(e.target.value) }),
|
||||
Range({ label: 'Secondary', value: secondary, class: 'range-secondary', oninput: (e) => secondary(e.target.value) }),
|
||||
Range({ label: 'Accent', value: accent, class: 'range-accent', oninput: (e) => accent(e.target.value) })
|
||||
]);
|
||||
};
|
||||
mount(ColorsDemo, '#demo-colors');
|
||||
```
|
||||
|
||||
### Size 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-sizes" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const SizesDemo = () => {
|
||||
const xs = $(25);
|
||||
const sm = $(50);
|
||||
const md = $(75);
|
||||
const lg = $(100);
|
||||
|
||||
return div({ class: 'flex flex-col gap-4' }, [
|
||||
Range({ label: 'Extra Small', value: xs, class: 'range-xs', oninput: (e) => xs(e.target.value) }),
|
||||
Range({ label: 'Small', value: sm, class: 'range-sm', oninput: (e) => sm(e.target.value) }),
|
||||
Range({ label: 'Medium', value: md, class: 'range-md', oninput: (e) => md(e.target.value) }),
|
||||
Range({ label: 'Large', value: lg, class: 'range-lg', oninput: (e) => lg(e.target.value) })
|
||||
]);
|
||||
};
|
||||
mount(SizesDemo, '#demo-sizes');
|
||||
```
|
||||
|
||||
### Price Range
|
||||
|
||||
<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-price" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const PriceDemo = () => {
|
||||
const price = $(500);
|
||||
const maxPrice = 1000;
|
||||
|
||||
return div({ class: 'flex flex-col gap-4' }, [
|
||||
Range({
|
||||
label: 'Price Range',
|
||||
value: price,
|
||||
min: 0,
|
||||
max: maxPrice,
|
||||
step: 10,
|
||||
oninput: (e) => price(parseInt(e.target.value))
|
||||
}),
|
||||
div({ class: 'flex justify-between' }, [
|
||||
span({}, '$0'),
|
||||
span({}, () => `$${price()}`),
|
||||
span({}, `$${maxPrice}`)
|
||||
]),
|
||||
div({ class: 'mt-2 text-sm opacity-70' }, () => {
|
||||
if (price() < 250) return 'Budget friendly';
|
||||
if (price() < 750) return 'Mid range';
|
||||
return 'Premium';
|
||||
})
|
||||
]);
|
||||
};
|
||||
mount(PriceDemo, '#demo-price');
|
||||
```
|
||||
|
||||
### Audio Controls
|
||||
|
||||
<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-audio" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
const AudioDemo = () => {
|
||||
const volume = $(50);
|
||||
const bass = $(40);
|
||||
const treble = $(60);
|
||||
|
||||
return div({ class: 'flex flex-col gap-4' }, [
|
||||
div({ class: 'flex items-center gap-3' }, [
|
||||
span({ class: 'w-12' }, '🔊'),
|
||||
Range({
|
||||
value: volume,
|
||||
min: 0,
|
||||
max: 100,
|
||||
class: 'range-primary flex-1',
|
||||
oninput: (e) => volume(e.target.value)
|
||||
}),
|
||||
span({ class: 'w-12 text-right' }, () => `${volume()}%`)
|
||||
]),
|
||||
div({ class: 'flex items-center gap-3' }, [
|
||||
span({ class: 'w-12' }, '🎵 Bass'),
|
||||
Range({
|
||||
value: bass,
|
||||
min: 0,
|
||||
max: 100,
|
||||
class: 'range-secondary flex-1',
|
||||
oninput: (e) => bass(e.target.value)
|
||||
}),
|
||||
span({ class: 'w-12 text-right' }, () => `${bass()}%`)
|
||||
]),
|
||||
div({ class: 'flex items-center gap-3' }, [
|
||||
span({ class: 'w-12' }, '🎶 Treble'),
|
||||
Range({
|
||||
value: treble,
|
||||
min: 0,
|
||||
max: 100,
|
||||
class: 'range-accent flex-1',
|
||||
oninput: (e) => treble(e.target.value)
|
||||
}),
|
||||
span({ class: 'w-12 text-right' }, () => `${treble()}%`)
|
||||
])
|
||||
]);
|
||||
};
|
||||
mount(AudioDemo, '#demo-audio');
|
||||
```
|
||||
|
||||
### 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 value = $(50);
|
||||
|
||||
return div({ class: 'flex flex-col gap-4' }, [
|
||||
div({ class: 'text-sm font-bold' }, 'With Label'),
|
||||
Range({ label: 'Label', value: $(50), oninput: (e) => {} }),
|
||||
|
||||
div({ class: 'text-sm font-bold mt-2' }, 'With Tooltip'),
|
||||
Range({ tooltip: 'Tooltip message', value: $(50), oninput: (e) => {} }),
|
||||
|
||||
div({ class: 'text-sm font-bold mt-2' }, 'Disabled'),
|
||||
Range({ disabled: true, value: $(50), oninput: (e) => {} })
|
||||
]);
|
||||
};
|
||||
mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
@@ -1,272 +0,0 @@
|
||||
# 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) |
|
||||
| `onchange` | `function` | `-` | Callback when rating changes |
|
||||
|
||||
## Styling
|
||||
|
||||
Rating supports all **daisyUI Rating classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Base | `rating` | Base rating container |
|
||||
| Color | `rating-primary`, `rating-secondary`, `rating-accent`, `rating-info`, `rating-success`, `rating-warning`, `rating-error` | Rating color variants |
|
||||
| Size | `rating-xs`, `rating-sm`, `rating-md`, `rating-lg` | Rating scale |
|
||||
| Mask | `mask-star`, `mask-star-2`, `mask-heart` | Rating icon shapes |
|
||||
|
||||
> For further details, check the [daisyUI Rating Documentation](https://daisyui.com/components/rating) – Full reference for CSS classes.
|
||||
|
||||
## 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');
|
||||
```
|
||||
|
||||
### 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,
|
||||
onchange: (v) => quality(v)
|
||||
})
|
||||
]),
|
||||
div({ class: 'flex justify-between items-center' }, [
|
||||
span({ class: 'text-sm w-24' }, 'Price:'),
|
||||
Rating({
|
||||
value: price,
|
||||
count: 5,
|
||||
onchange: (v) => price(v)
|
||||
})
|
||||
]),
|
||||
div({ class: 'flex justify-between items-center' }, [
|
||||
span({ class: 'text-sm w-24' }, 'Support:'),
|
||||
Rating({
|
||||
value: support,
|
||||
count: 5,
|
||||
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 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);
|
||||
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');
|
||||
```
|
||||
@@ -1,267 +0,0 @@
|
||||
# Select
|
||||
|
||||
Dropdown select component with full DaisyUI styling and reactive options.
|
||||
|
||||
## Tag
|
||||
|
||||
`Select`, `Options`
|
||||
|
||||
## Select Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `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 |
|
||||
|
||||
## Options Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
| :--- | :--- | :--- | :--- |
|
||||
| `items` | `Array<string \| {value, label}> \| Signal<Array>` | `[]` | Array of items (strings or objects) |
|
||||
| `placeholder` | `string` | `-` | Optional placeholder option (disabled, selected) |
|
||||
|
||||
## Styling
|
||||
|
||||
Select supports all **daisyUI Select classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Color | `select-primary`, `select-secondary`, `select-accent`, `select-info`, `select-success`, `select-warning`, `select-error` | Select color variants |
|
||||
| Size | `select-xs`, `select-sm`, `select-md`, `select-lg` | Select scale |
|
||||
| Style | `select-bordered` (default), `select-ghost` | Visual style variants |
|
||||
|
||||
> For further details, check the [daisyUI Select Documentation](https://daisyui.com/components/select) – Full reference for CSS classes.
|
||||
|
||||
## 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 div({ class: 'form-control w-full max-w-xs' }, [
|
||||
label({ class: 'label' }, span({ class: 'label-text' }, 'Choose a fruit')),
|
||||
select({
|
||||
class: 'select select-bordered w-full',
|
||||
value: selected,
|
||||
onchange: (e) => selected(e.target.value)
|
||||
}, [
|
||||
Options({
|
||||
items: [
|
||||
{ value: 'apple', label: '🍎 Apple' },
|
||||
{ value: 'banana', label: '🍌 Banana' },
|
||||
{ value: 'orange', label: '🍊 Orange' },
|
||||
{ value: 'grape', label: '🍇 Grape' }
|
||||
]
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
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' }, [
|
||||
div({ class: 'form-control w-full max-w-xs' }, [
|
||||
label({ class: 'label' }, span({ class: 'label-text' }, 'Select size')),
|
||||
select({
|
||||
class: 'select select-bordered w-full',
|
||||
value: selected,
|
||||
onchange: (e) => selected(e.target.value)
|
||||
}, [
|
||||
Options({
|
||||
items: [
|
||||
{ value: 'small', label: 'Small' },
|
||||
{ value: 'medium', label: 'Medium' },
|
||||
{ value: 'large', label: 'Large' }
|
||||
]
|
||||
})
|
||||
])
|
||||
]),
|
||||
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 div({ class: 'form-control w-full max-w-xs' }, [
|
||||
label({ class: 'label' }, span({ class: 'label-text' }, 'Country (disabled)')),
|
||||
select({
|
||||
class: 'select select-bordered w-full',
|
||||
value: 'mx',
|
||||
disabled: true
|
||||
}, [
|
||||
Options({
|
||||
items: [
|
||||
{ value: 'mx', label: 'Mexico' },
|
||||
{ value: 'us', label: 'United States' },
|
||||
{ value: 'ca', label: 'Canada' }
|
||||
]
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
mount(DisabledDemo, '#demo-disabled');
|
||||
```
|
||||
|
||||
### Dynamic 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-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 category = $('fruits');
|
||||
const selectedItem = $('');
|
||||
|
||||
const items = {
|
||||
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' }, [
|
||||
div({ class: 'form-control w-full max-w-xs' }, [
|
||||
label({ class: 'label' }, span({ class: 'label-text' }, 'Category')),
|
||||
select({
|
||||
class: 'select select-bordered w-full',
|
||||
value: category,
|
||||
onchange: (e) => {
|
||||
category(e.target.value);
|
||||
selectedItem('');
|
||||
}
|
||||
}, [
|
||||
Options({
|
||||
items: [
|
||||
{ value: 'fruits', label: 'Fruits' },
|
||||
{ value: 'vegetables', label: 'Vegetables' }
|
||||
]
|
||||
})
|
||||
])
|
||||
]),
|
||||
div({ class: 'form-control w-full max-w-xs' }, [
|
||||
label({ class: 'label' }, span({ class: 'label-text' }, 'Item')),
|
||||
select({
|
||||
class: 'select select-bordered w-full',
|
||||
value: selectedItem,
|
||||
onchange: (e) => selectedItem(e.target.value)
|
||||
}, [
|
||||
Options({
|
||||
items: () => items[category()] || []
|
||||
})
|
||||
])
|
||||
]),
|
||||
() => selectedItem() ? div({ class: 'alert alert-success' }, `Selected: ${selectedItem()}`) : null
|
||||
]);
|
||||
};
|
||||
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 ghost = $('');
|
||||
|
||||
return div({ class: 'flex flex-col gap-4' }, [
|
||||
div({ class: 'form-control w-full max-w-xs' }, [
|
||||
label({ class: 'label' }, span({ class: 'label-text' }, 'Primary Select')),
|
||||
select({
|
||||
class: 'select select-primary w-full',
|
||||
value: primary,
|
||||
onchange: (e) => primary(e.target.value)
|
||||
}, [
|
||||
Options({
|
||||
items: [
|
||||
{ value: 'option1', label: 'Option 1' },
|
||||
{ value: 'option2', label: 'Option 2' },
|
||||
{ value: 'option3', label: 'Option 3' }
|
||||
]
|
||||
})
|
||||
])
|
||||
]),
|
||||
div({ class: 'form-control w-full max-w-xs' }, [
|
||||
label({ class: 'label' }, span({ class: 'label-text' }, 'Secondary Select')),
|
||||
select({
|
||||
class: 'select select-secondary w-full',
|
||||
value: secondary,
|
||||
onchange: (e) => secondary(e.target.value)
|
||||
}, [
|
||||
Options({
|
||||
items: [
|
||||
{ value: 'option1', label: 'Option 1' },
|
||||
{ value: 'option2', label: 'Option 2' }
|
||||
]
|
||||
})
|
||||
])
|
||||
]),
|
||||
div({ class: 'form-control w-full max-w-xs' }, [
|
||||
label({ class: 'label' }, span({ class: 'label-text' }, 'Ghost Select')),
|
||||
select({
|
||||
class: 'select select-ghost w-full',
|
||||
value: ghost,
|
||||
onchange: (e) => ghost(e.target.value)
|
||||
}, [
|
||||
Options({
|
||||
placeholder: 'Select an option',
|
||||
items: [
|
||||
{ value: 'opt1', label: 'Option 1' },
|
||||
{ value: 'opt2', label: 'Option 2' }
|
||||
]
|
||||
})
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
@@ -1,294 +0,0 @@
|
||||
# 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) |
|
||||
|
||||
## Styling
|
||||
|
||||
Stack supports all **daisyUI Stack classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Base | `stack` | Base stack container |
|
||||
| Direction | `stack-top`, `stack-bottom`, `stack-start`, `stack-end` | Stack alignment |
|
||||
| Width | `w-*` (Tailwind) | Custom width for the stack |
|
||||
|
||||
> For further details, check the [daisyUI Stack Documentation](https://daisyui.com/components/stack) – Full reference for CSS classes.
|
||||
|
||||
## 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 h-16 flex items-center justify-center' }, 'JD')
|
||||
]),
|
||||
div({ class: 'avatar placeholder' }, [
|
||||
div({ class: 'bg-primary text-primary-content rounded-full w-16 h-16 flex items-center justify-center' }, 'JS')
|
||||
]),
|
||||
div({ class: 'avatar placeholder' }, [
|
||||
div({ class: 'bg-secondary text-secondary-content rounded-full w-16 h-16 flex items-center justify-center' }, '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);`
|
||||
}, [
|
||||
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');
|
||||
```
|
||||
@@ -1,329 +0,0 @@
|
||||
# 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) |
|
||||
|
||||
## Styling
|
||||
|
||||
Stat supports all **daisyUI Stat classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Base | `stat` | Base stat container |
|
||||
| Sections | `stat-figure`, `stat-title`, `stat-value`, `stat-desc` | Stat sub-components |
|
||||
| Variants | `stat-compact` | Compact spacing variant |
|
||||
|
||||
> For further details, check the [daisyUI Stat Documentation](https://daisyui.com/components/stat) – Full reference for CSS classes.
|
||||
|
||||
## 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: span({ class: 'text-4xl' }, '👥') // text-4xl para emojis
|
||||
}),
|
||||
Stat({
|
||||
label: 'New Orders',
|
||||
value: '89',
|
||||
desc: 'Today',
|
||||
icon: span({ class: 'text-4xl' }, '📦')
|
||||
}),
|
||||
Stat({
|
||||
label: 'Pending Tasks',
|
||||
value: '23',
|
||||
desc: 'Need attention',
|
||||
icon: span({ class: 'text-4xl' }, '⏳')
|
||||
})
|
||||
]);
|
||||
};
|
||||
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: span({ class: 'text-2xl' }, '🔢')
|
||||
}),
|
||||
Stat({
|
||||
label: 'Squared',
|
||||
value: () => Math.pow(count(), 2),
|
||||
desc: 'Square of counter',
|
||||
icon: span({ class: 'text-2xl' }, '📐')
|
||||
})
|
||||
]),
|
||||
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');
|
||||
```
|
||||
|
||||
### 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-4xl' }, '📝') // text-4xl
|
||||
}),
|
||||
Stat({
|
||||
label: 'Comments',
|
||||
value: '8,901',
|
||||
desc: 'Engagement',
|
||||
icon: span({ class: 'text-4xl' }, '💬')
|
||||
}),
|
||||
Stat({
|
||||
label: 'Likes',
|
||||
value: '12,345',
|
||||
desc: 'Reactions',
|
||||
icon: span({ class: 'text-4xl' }, '❤️')
|
||||
}),
|
||||
Stat({
|
||||
label: 'Shares',
|
||||
value: '456',
|
||||
desc: 'Viral reach',
|
||||
icon: span({ class: 'text-4xl' }, '🔄')
|
||||
})
|
||||
]);
|
||||
};
|
||||
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: span({ class: 'text-4xl' }, '👥') // text-4xl
|
||||
}),
|
||||
Stat({
|
||||
label: 'Revenue',
|
||||
value: () => `$${stats().revenue.toLocaleString()}`,
|
||||
desc: 'This month',
|
||||
icon: span({ class: 'text-4xl' }, '💰')
|
||||
}),
|
||||
Stat({
|
||||
label: 'Orders',
|
||||
value: () => stats().orders.toLocaleString(),
|
||||
desc: 'Completed',
|
||||
icon: span({ class: 'text-4xl' }, '📦')
|
||||
}),
|
||||
Stat({
|
||||
label: 'Satisfaction',
|
||||
value: () => `${stats().satisfaction}%`,
|
||||
desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good',
|
||||
icon: span({ class: 'text-4xl' }, '😊')
|
||||
})
|
||||
]),
|
||||
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: 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' }, '✅'),
|
||||
class: 'bg-success/10 text-success'
|
||||
}),
|
||||
Stat({
|
||||
label: 'Warning Stat',
|
||||
value: '23',
|
||||
desc: 'Pending items',
|
||||
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' }, '❌'),
|
||||
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');
|
||||
```
|
||||
@@ -1,283 +0,0 @@
|
||||
# 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 \| Signal` | `-` | Content to show when state is on |
|
||||
| `off` | `string \| VNode \| Signal` | `-` | Content to show when state is off |
|
||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||||
| `onclick` | `function` | `-` | Click event handler |
|
||||
|
||||
## Styling
|
||||
|
||||
Swap supports all **daisyUI Swap classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Base | `swap` | Base swap container |
|
||||
| Size | `swap-xs`, `swap-sm`, `swap-md`, `swap-lg` | Swap scale |
|
||||
| Effect | `swap-rotate`, `swap-flip` | Animation effect on toggle |
|
||||
|
||||
> For further details, check the [daisyUI Swap Documentation](https://daisyui.com/components/swap) – Full reference for CSS classes.
|
||||
|
||||
## 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"
|
||||
});
|
||||
};
|
||||
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: "👁️",
|
||||
off: "👁️🗨️"
|
||||
});
|
||||
};
|
||||
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: "🖤"
|
||||
});
|
||||
};
|
||||
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"])
|
||||
});
|
||||
};
|
||||
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: "👁️",
|
||||
off: "👁️🗨️"
|
||||
}),
|
||||
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: "☀️"
|
||||
})
|
||||
]),
|
||||
div({ class: 'flex justify-between items-center' }, [
|
||||
span({}, 'Notifications'),
|
||||
Swap({
|
||||
value: notifications,
|
||||
on: "🔔",
|
||||
off: "🔕"
|
||||
})
|
||||
]),
|
||||
div({ class: 'flex justify-between items-center' }, [
|
||||
span({}, 'Sound effects'),
|
||||
Swap({
|
||||
value: sound,
|
||||
on: "🔊",
|
||||
off: "🔇"
|
||||
})
|
||||
]),
|
||||
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: "✅",
|
||||
off: "❌"
|
||||
})
|
||||
])
|
||||
]);
|
||||
};
|
||||
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: "✅",
|
||||
off: "⬜"
|
||||
})
|
||||
])
|
||||
),
|
||||
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');
|
||||
```
|
||||
@@ -1,412 +0,0 @@
|
||||
# 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<Column>` | `[]` | 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) |
|
||||
|
||||
### Column Structure
|
||||
|
||||
| Property | Type | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| `label` | `string` | Column header text |
|
||||
| `key` | `string` | Property key to display from item |
|
||||
| `render` | `function(item, index)` | Custom render function for cell content |
|
||||
| `class` | `string` | Additional CSS classes for column cells |
|
||||
| `footer` | `string \| VNode` | Footer content for the column |
|
||||
|
||||
## Styling
|
||||
|
||||
Table supports all **daisyUI Table classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Base | `table` | Base table styling |
|
||||
| Variant | `table-zebra` | Zebra striping |
|
||||
| Size | `table-xs`, `table-sm`, `table-md`, `table-lg`, `table-xl` | Table scale |
|
||||
| Feature | `table-pin-rows`, `table-pin-cols` | Pin headers/columns |
|
||||
|
||||
> For further details, check the [daisyUI Table Documentation](https://daisyui.com/components/table) – Full reference for CSS classes.
|
||||
|
||||
## 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 p-4' }, [
|
||||
span({ class: 'text-2xl' }, '📭'),
|
||||
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');
|
||||
```
|
||||
@@ -1,456 +0,0 @@
|
||||
# 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) |
|
||||
|
||||
## Styling
|
||||
|
||||
Tabs supports all **daisyUI Tabs classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Base | `tabs` | Base tabs container |
|
||||
| Variant | `tabs-box`, `tabs-lifted` | Tab style variants |
|
||||
| Size | `tabs-xs`, `tabs-sm`, `tabs-md`, `tabs-lg` | Tab scale |
|
||||
| State | `tab-active`, `tab-disabled` | Tab states |
|
||||
|
||||
> For further details, check the [daisyUI Tabs Documentation](https://daisyui.com/components/tabs) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Tabs({
|
||||
items: [
|
||||
{ label: "Tab 1", content: "Content 1", active: true },
|
||||
{ label: "Tab 2", content: "Content 2" }
|
||||
],
|
||||
class: "tabs-box"
|
||||
});
|
||||
```
|
||||
|
||||
## 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 active1 = $('tab1');
|
||||
const active2 = $('tab1');
|
||||
const active3 = $('tab1');
|
||||
const active4 = $('tab4');
|
||||
|
||||
const createItems = (active) => [
|
||||
{
|
||||
label: 'Tab 1',
|
||||
active: () => active() === 'tab1',
|
||||
onclick: () => active('tab1'),
|
||||
content: div({ class: 'p-4' }, 'Content 1')
|
||||
},
|
||||
{
|
||||
label: 'Tab 2',
|
||||
active: () => active() === 'tab2',
|
||||
onclick: () => active('tab2'),
|
||||
content: div({ class: 'p-4' }, 'Content 2')
|
||||
},
|
||||
{
|
||||
label: 'Tab 3',
|
||||
active: () => active() === 'tab3',
|
||||
onclick: () => active('tab3'),
|
||||
content: div({ class: 'p-4' }, 'Content 3')
|
||||
},
|
||||
{
|
||||
label: 'Tab 4',
|
||||
active: () => active() === 'tab4',
|
||||
onclick: () => active('tab4'),
|
||||
content: div({ class: 'p-4' }, 'Content 4')
|
||||
}
|
||||
];
|
||||
|
||||
return div({ class: 'flex flex-col gap-6' }, [
|
||||
div({ class: 'text-sm font-bold' }, 'Default Tabs'),
|
||||
Tabs({ items: createItems(active1) }),
|
||||
|
||||
div({ class: 'text-sm font-bold mt-4' }, 'Boxed Tabs'),
|
||||
Tabs({ items: createItems(active2), class: 'tabs-box' }),
|
||||
|
||||
div({ class: 'text-sm font-bold mt-4' }, 'Lifted Tabs'),
|
||||
Tabs({ items: createItems(active3), class: 'tabs-lift' }),
|
||||
|
||||
div({ class: 'text-sm font-bold mt-4' }, 'Bordered Tabs'),
|
||||
Tabs({ items: createItems(active4), class: 'tabs-border' })
|
||||
]);
|
||||
};
|
||||
mount(VariantsDemo, '#demo-variants');
|
||||
```
|
||||
|
||||
### Closable 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-closable" class="bg-base-100 p-6 rounded-xl border border-base-300"></div> </div> </div>
|
||||
|
||||
```javascript
|
||||
let nextTabId = 4;
|
||||
|
||||
const ClosableTabsDemo = () => {
|
||||
const tabs = $([
|
||||
{ label: 'Tab 1', tip:"Tab1" , content: div('Content 1') }, // ❌ quita active: true
|
||||
{ label: 'Tab 2', tip: "Tab 2 Default", content: div('Content 2'), closable: true },
|
||||
{ label: 'Tab 3', content: div('Content 3'), closable: true }
|
||||
]);
|
||||
|
||||
// Opcional: si quieres que la primera pestaña esté activa al inicio,
|
||||
// puedes hacerlo mediante una señal externa o simplemente confiar en que
|
||||
// activeIndex empieza en 0 (que es el comportamiento por defecto).
|
||||
|
||||
const addTab = () => {
|
||||
const newId = nextTabId++;
|
||||
tabs([...tabs(), {
|
||||
label: `Tab ${newId}`,
|
||||
content: div(`Content ${newId}`),
|
||||
onClose: (item) => console.log('Closing Individual', item),
|
||||
closable: true
|
||||
}]);
|
||||
};
|
||||
|
||||
return div({ class: 'flex flex-col gap-4' }, [
|
||||
button({ class: 'btn btn-sm btn-outline mb-2', onclick: addTab }, 'Add Tab'),
|
||||
Tabs({ items: tabs, onTabClose: (item) => console.log('Closing', item) })
|
||||
]);
|
||||
};
|
||||
|
||||
mount(ClosableTabsDemo, '#demo-closable');
|
||||
```
|
||||
@@ -1,294 +0,0 @@
|
||||
# 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) |
|
||||
|
||||
## Styling
|
||||
|
||||
Timeline supports all **daisyUI Timeline classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Base | `timeline`, `timeline-vertical`, `timeline-horizontal` | Timeline orientation |
|
||||
| Size | `timeline-compact` | Compact spacing variant |
|
||||
| Color | `bg-primary`, `bg-success`, `bg-warning`, `bg-error`, `bg-info` | Icon background colors |
|
||||
|
||||
> For further details, check the [daisyUI Timeline Documentation](https://daisyui.com/components/timeline) – Full reference for CSS classes.
|
||||
|
||||
## 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: '🚀', completed: true },
|
||||
{ title: 'MVP', detail: 'Minimum viable product', icon: '💡', completed: true },
|
||||
{ title: 'Beta', detail: 'Beta release', icon: '⚙️', completed: false },
|
||||
{ title: 'Launch', detail: 'Public launch', icon: '🎉', 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 = $(0);
|
||||
const steps = [
|
||||
{ title: 'Order Placed', detail: 'Your order has been confirmed', type: 'success' },
|
||||
{ title: 'Processing', detail: 'Payment verified, preparing shipment', type: 'success' },
|
||||
{ title: 'Shipped', detail: 'Package on the way', type: 'warning' },
|
||||
{ title: 'Delivered', detail: 'Arriving soon', type: 'info' }
|
||||
];
|
||||
|
||||
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,
|
||||
disabled: () => currentStep() === 0
|
||||
}, '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 = $('pending'); // ← empezar en 'pending'
|
||||
|
||||
const statusMap = {
|
||||
pending: { title: 'Order Pending', detail: 'Awaiting confirmation', type: 'warning' },
|
||||
confirmed: { title: 'Order Confirmed', detail: 'Payment received', type: 'info' },
|
||||
processing: { title: 'Processing', detail: 'Preparing your order', type: 'info' },
|
||||
shipped: { title: 'Shipped', detail: 'Package in transit', type: 'info' },
|
||||
delivered: { title: 'Delivered', detail: 'Order completed', 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', type: 'success', completed: true },
|
||||
{ title: '2017 - First Product', detail: 'Launched first software product', type: 'success', completed: true },
|
||||
{ title: '2019 - Series A', detail: 'Raised $5M, expanded to 50 employees', 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');
|
||||
```
|
||||
@@ -1,343 +0,0 @@
|
||||
# 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');
|
||||
```
|
||||
@@ -1,319 +0,0 @@
|
||||
# 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 |
|
||||
|
||||
## Styling
|
||||
|
||||
Tooltip supports all **daisyUI Tooltip classes**:
|
||||
|
||||
| Category | Keywords | Description |
|
||||
| :--- | :--- | :--- |
|
||||
| Position | `tooltip-top` (default), `tooltip-bottom`, `tooltip-left`, `tooltip-right` | Tooltip position |
|
||||
| Color | `tooltip-primary`, `tooltip-secondary`, `tooltip-accent`, `tooltip-info`, `tooltip-success`, `tooltip-warning`, `tooltip-error` | Tooltip color variants |
|
||||
|
||||
> For further details, check the [daisyUI Tooltip Documentation](https://daisyui.com/components/tooltip) – Full reference for CSS classes.
|
||||
|
||||
### Example
|
||||
|
||||
```javascript
|
||||
Tooltip({ tip: "This is a tooltip", class: "tooltip-primary" }, [
|
||||
button({ class: "btn" }, "Hover me")
|
||||
]);
|
||||
```
|
||||
|
||||
## 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' }, [
|
||||
span({ class: 'text-2xl' }, 'ℹ️')
|
||||
])
|
||||
]);
|
||||
};
|
||||
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 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' }, [
|
||||
span({}, '⚠️'),
|
||||
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-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');
|
||||
```
|
||||
@@ -12,26 +12,7 @@ const accItems = $([
|
||||
|
||||
mount(
|
||||
div({ class: 'flex flex-col gap-8' }, [
|
||||
// Example 1: radio type with arrow variant
|
||||
Accordion({
|
||||
variant: 'arrow',
|
||||
items: [
|
||||
{ title: 'Radio with arrow', content: 'This uses collapse‑arrow' },
|
||||
{ title: 'Open by default', content: 'This one is open', open: true },
|
||||
'Simple string item (no content)'
|
||||
]
|
||||
}),
|
||||
// Example 2: details type with plus variant
|
||||
Accordion({
|
||||
type: 'details',
|
||||
variant: 'plus',
|
||||
items: [
|
||||
{ title: 'Details with plus', content: 'Uses the native <details> element' },
|
||||
{ title: 'Another detail', content: 'Accordion style but with plus icon' }
|
||||
]
|
||||
}),
|
||||
// Example 3: reactive items (signal)
|
||||
Accordion({ items: accItems })
|
||||
Accordion({items: accItems, class: "collapse-arrow bg-base-100 border border-base-300"})
|
||||
]),
|
||||
'#demo-accordion'
|
||||
);
|
||||
@@ -45,14 +26,14 @@ const drawerOpen = $(false);
|
||||
|
||||
mount(
|
||||
div({}, [
|
||||
Button({ class: 'btn', onclick: () => drawerOpen(true) }, 'Open Drawer'),
|
||||
Drawer({ open: drawerOpen, side: Menu({ items: [
|
||||
Drawer({ open: drawerOpen, id: 'drw', side: Menu({ items: [
|
||||
{ label: 'Dashboard', onclick: () => drawerOpen(false) },
|
||||
{ label: 'Settings' },
|
||||
{ label: 'Help' }
|
||||
]}) }, [
|
||||
div({ class: 'p-4' }, [
|
||||
div({ class: 'p-4 border border-base-300' }, [
|
||||
h3({ class: 'text-lg font-bold' }, 'Main Content'),
|
||||
Button({ class: 'btn', onclick: () => drawerOpen(true) }, 'Open Drawer'),
|
||||
p({}, 'This is the main page. Click the button above to open the drawer.')
|
||||
])
|
||||
])
|
||||
@@ -67,25 +48,35 @@ mount(
|
||||
```js
|
||||
mount(
|
||||
div({ class: 'flex gap-4' }, [
|
||||
// Example 1: automatic items
|
||||
Dropdown({
|
||||
trigger: 'Options',
|
||||
items: [
|
||||
{ label: 'Edit', onclick: () => console.log('Edit') },
|
||||
{ label: 'Delete', onclick: () => console.log('Delete') },
|
||||
{ label: 'Archive' }
|
||||
]
|
||||
}),
|
||||
// Example 2: custom children (manual)
|
||||
Dropdown({ trigger: 'More' }, [
|
||||
h('ul', { class: 'menu dropdown-content bg-base-100 rounded-box w-40 p-2 shadow' }, [
|
||||
li({}, a({}, 'Profile')),
|
||||
li({}, a({}, 'Logout'))
|
||||
// Example 1: con Menu (cierre automático al hacer clic en un ítem)
|
||||
Dropdown({ label: 'Options', class: 'dropdown' }, [
|
||||
Menu({
|
||||
items: [
|
||||
{ label: 'Edit', onclick: () => close() },
|
||||
{ label: 'Delete', onclick: () => close() },
|
||||
{ label: 'Archive' }
|
||||
],
|
||||
class: 'dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow z-1'
|
||||
})
|
||||
]),
|
||||
// Example 2: manual (cerrar ítems con blur)
|
||||
Dropdown({ label: 'More', class: 'dropdown' }, [
|
||||
ul({ class: 'dropdown-content menu bg-base-100 rounded-box w-40 p-2 shadow' }, [
|
||||
li({}, a({
|
||||
tabindex: '-1',
|
||||
href: '#',
|
||||
onclick: (e) => { e.preventDefault(); close(); }
|
||||
}, 'Profile')),
|
||||
li({}, a({
|
||||
tabindex: '-1',
|
||||
href: '#',
|
||||
onclick: (e) => { e.preventDefault(); close(); }
|
||||
}, 'Logout'))
|
||||
])
|
||||
])
|
||||
]),
|
||||
'#demo-dropdown'
|
||||
);
|
||||
)
|
||||
```
|
||||
|
||||
## Fab
|
||||
@@ -94,8 +85,11 @@ mount(
|
||||
```js
|
||||
mount(
|
||||
div({ class: 'flex gap-4' }, [
|
||||
Fab({ class: 'fab-bottom-left' }, span({ class: 'icon-[lucide--plus]' })),
|
||||
Fab({ class: 'fab-top-right', style: 'position:relative' }, span({ class: 'icon-[lucide--settings]' }))
|
||||
Fab({ class: 'btn-lg btn-circle btn-secondary', icon:"R" }, [
|
||||
Button({},"C"),
|
||||
Button({},"B"),
|
||||
Button({},"A"),
|
||||
])
|
||||
]),
|
||||
'#demo-fab'
|
||||
);
|
||||
@@ -106,13 +100,13 @@ mount(
|
||||
|
||||
```js
|
||||
mount(
|
||||
div({ class: 'flex gap-4' }, [
|
||||
Fieldset({ legend: 'Personal Info' }, [
|
||||
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' }, [
|
||||
div({}, 'Any content without legend')
|
||||
Fieldset({ class: 'bg-base-200 p-4 rounded-box' , label: "Any content"}, [
|
||||
div({}, 'Any content')
|
||||
])
|
||||
]),
|
||||
'#demo-fieldset'
|
||||
@@ -134,13 +128,7 @@ const menuItems = $([
|
||||
|
||||
mount(
|
||||
div({ class: 'flex gap-4' }, [
|
||||
// Example 1: automatic from items (signal)
|
||||
Menu({ items: menuItems, class: 'menu-vertical' }),
|
||||
// Example 2: manual children
|
||||
Menu({ class: 'menu-horizontal bg-base-200 rounded-box' }, [
|
||||
li({}, a({}, 'One')),
|
||||
li({}, a({}, 'Two'))
|
||||
])
|
||||
Menu({ items: menuItems, class: 'bg-base-200 rounded-box w-56' }),
|
||||
]),
|
||||
'#demo-menu'
|
||||
);
|
||||
@@ -173,29 +161,10 @@ 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(
|
||||
div({ class: 'flex flex-col gap-4' }, [
|
||||
// Example 1: reactive tabs with closable
|
||||
Tabs({
|
||||
items: tabsData,
|
||||
activeIndex: activeTab,
|
||||
class: "tabs-box",
|
||||
onClose: (idx) => {
|
||||
const newTabs = tabsData().filter((_, i) => i !== idx);
|
||||
tabsData(newTabs);
|
||||
if (activeTab() >= newTabs.length) activeTab(Math.max(0, newTabs.length - 1));
|
||||
}
|
||||
}),
|
||||
// Example 2: manual tabs with custom content
|
||||
Tabs({}, [
|
||||
a({ class: () => `tab ${activeTab() === 0 ? 'tab-active' : ''}`, onclick: () => activeTab(0) }, 'Manual A'),
|
||||
a({ class: () => `tab ${activeTab() === 1 ? 'tab-active' : ''}`, onclick: () => activeTab(1) }, 'Manual B'),
|
||||
div({ class: 'tab-content', style: () => `display:${activeTab() === 0 ? 'block' : 'none'}` }, 'Content for manual A'),
|
||||
div({ class: 'tab-content', style: () => `display:${activeTab() === 1 ? 'block' : 'none'}` }, 'Content for manual B')
|
||||
])
|
||||
]),
|
||||
Tabs({ class: 'tabs-box', items: tabsData, activeIndex: activeTab }),
|
||||
'#demo-tabs'
|
||||
);
|
||||
)
|
||||
```
|
||||
2
docs/sigpro-ui.min.css
vendored
2
docs/sigpro-ui.min.css
vendored
File diff suppressed because one or more lines are too long
8
docs/sigpro-ui.min.js
vendored
8
docs/sigpro-ui.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -174,6 +174,7 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* sigpro-ui daisyUI classes - extracted from components */
|
||||
|
||||
/* join join-vertical lg:join-horizontal divider divider-horizontal validator validator-hint glass */
|
||||
|
||||
Reference in New Issue
Block a user