lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
639 lines (581 loc) • 29.3 kB
HTML
<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js"></script>
<script>
if (globalThis.LightviewRouter) {
LightviewRouter.base('/index.html');
}
</script>
<!-- Load the page-specific stylesheet -->
<link rel="stylesheet" href="./index.css">
<!-- Gallery Structure -->
<div class="gallery-page">
<div class="gallery-layout">
<!-- Sidebar Overlay -->
<div id="sidebar-overlay" class="sidebar-overlay"></div>
<!-- Sidebar -->
<div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
<!-- Main Content -->
<div id="gallery-main" class="gallery-main">
<!-- Header Container -->
<div
style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
<!-- Breadcrumbs Row -->
<div style="padding: 0.75rem 1.5rem 0;">
<script>
(() => {
const { Breadcrumbs } = Lightview.tags;
const breadcrumbs = Breadcrumbs({
id: 'page-breadcrumbs',
items: [
{ label: 'Components', href: '/docs/components' },
{ label: 'Modal' }
]
});
document.currentScript.replaceWith(breadcrumbs.domEl);
})();
</script>
</div>
<!-- Title Row -->
<div class="gallery-header"
style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
<button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
style="stroke: currentColor; stroke-width: 2;">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
</svg>
</button>
<h1 class="gallery-title">Modal</h1>
</div>
</div>
<!-- Content -->
<div class="gallery-content">
<div class="section-content" style="max-width: 1000px;">
<p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
Modal is used to show a dialog or a box when you click a button.
Uses the native HTML <code><dialog></code> element for accessibility.
</p>
<!-- Basic Example with Examplify -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Basic Example</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Simple modal with open/close
functionality
</p>
<!-- Tabs -->
<script>
globalThis.switchSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`tab-btn-${t}`);
const contentEl = document.getElementById(`syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchSyntaxTab('tagged')">Tagged</button>
<button id="tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('vdom')">vDOM</button>
<button id="tab-btn-object" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('object')">Object
DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 60,
autoRun: true
});
</script><code contenteditable="true">await import('/components/actions/modal.js');
await import('/components/actions/button.js');
const { tags, $ } = Lightview;
const { h3, p, Modal, Button } = tags;
const modalId = 'my_modal';
// Create the modal
const modal = Modal({ id: modalId },
Modal.Box({},
h3({ class: 'text-lg font-bold' }, 'Hello! 👋'),
p({ class: 'py-4' }, 'This modal was created with Lightview components.'),
Modal.Action({},
Button({ onclick: () => Modal.close(modalId) }, 'Close')
)
),
Modal.Backdrop({})
);
// Create trigger button
const trigger = Button({
color: 'primary',
onclick: () => Modal.open(modalId)
}, 'Open Modal');
$('#example').content([trigger, modal]);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 60
});
</script><code contenteditable="true">await import('/components/actions/modal.js');
await import('/components/actions/button.js');
const { $, tags } = Lightview;
const { Modal, Button, h3, p } = tags;
const modalId = 'my_modal';
// Create the modal
const modal = {
tag: Modal,
attributes: { id: modalId },
children: [
{
tag: Modal.Box,
children: [
{ tag: h3, attributes: { class: 'text-lg font-bold' }, children: ['Hello! 👋'] },
{ tag: p, attributes: { class: 'py-4' }, children: ['This modal was created with Lightview components.'] },
{
tag: Modal.Action,
children: [
{ tag: Button, attributes: { onclick: () => Modal.close(modalId) }, children: ['Close'] }
]
}
]
},
{ tag: Modal.Backdrop }
]
};
// Create trigger button
const trigger = {
tag: Button,
attributes: {
color: 'primary',
onclick: () => Modal.open(modalId)
},
children: ['Open Modal']
};
$('#example').content([trigger, modal]);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 60
});
</script><code contenteditable="true">await import('/components/actions/modal.js');
await import('/components/actions/button.js');
const { $ } = Lightview;
const { Modal } = Lightview.tags;
const modalId = 'my_modal';
// Create the modal
const modal = {
Modal: {
id: modalId,
children: [
{
'Modal.Box': {
children: [
{ h3: { class: 'text-lg font-bold', children: ['Hello! 👋'] } },
{ p: { class: 'py-4', children: ['This modal was created with Lightview components.'] } },
{
'Modal.Action': {
children: [{ Button: { onclick: () => Modal.close(modalId), children: ['Close'] } }]
}
}
]
}
},
{ 'Modal.Backdrop': {} }
]
}
};
// Create trigger button
const trigger = {
Button: {
color: 'primary',
onclick: () => Modal.open(modalId),
children: ['Open Modal']
}
};
$('#example').content([trigger, modal]);</code></pre>
</div>
</div>
</div>
<!-- Reactive Example with Examplify -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Confirmation Dialog</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Modal with confirm/cancel
actions</p>
<!-- Tabs -->
<script>
globalThis.switchReactiveSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`tab-btn-reactive-${t}`);
const contentEl = document.getElementById(`syntax-reactive-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="tab-btn-reactive-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchReactiveSyntaxTab('tagged')">Tagged</button>
<button id="tab-btn-reactive-vdom" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('vdom')">vDOM</button>
<button id="tab-btn-reactive-object" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('object')">Object DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="syntax-reactive-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 60
});
</script><code contenteditable="true">await import('/components/actions/modal.js');
await import('/components/actions/button.js');
const { signal, tags, $ } = Lightview;
const { div, h3, p, Modal, Button } = tags;
const status = signal('Ready');
const modalId = 'confirm_modal';
const handleConfirm = () => {
status.value = '✅ Confirmed!';
Modal.close(modalId);
};
const handleCancel = () => {
status.value = '❌ Cancelled';
Modal.close(modalId);
};
const confirmModal = Modal({ id: modalId },
Modal.Box({},
h3({ class: 'text-lg font-bold' }, 'Are you sure?'),
p({ class: 'py-4' }, 'This action cannot be undone.'),
Modal.Action({},
Button({ color: 'ghost', onclick: handleCancel }, 'Cancel'),
Button({ color: 'error', onclick: handleConfirm }, 'Delete')
)
),
Modal.Backdrop({})
);
const demo = div({ style: 'display: flex; align-items: center; gap: 1rem' },
Button({
color: 'error',
variant: 'outline',
onclick: () => Modal.open(modalId)
}, 'Delete Item'),
p({ class: 'text-sm opacity-70' }, () => `Status: ${status.value}`),
confirmModal
);
$('#example').content(demo);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="syntax-reactive-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 60
});
</script><code contenteditable="true">await import('/components/actions/modal.js');
await import('/components/actions/button.js');
const { signal, $, tags } = Lightview;
const { Modal, Button, div, h3, p } = tags;
const status = signal('Ready');
const modalId = 'confirm_modal';
const handleConfirm = () => {
status.value = '✅ Confirmed!';
Modal.close(modalId);
};
const handleCancel = () => {
status.value = '❌ Cancelled';
Modal.close(modalId);
};
const confirmModal = {
tag: Modal,
attributes: { id: modalId },
children: [
{
tag: Modal.Box,
children: [
{ tag: h3, attributes: { class: 'text-lg font-bold' }, children: ['Are you sure?'] },
{ tag: p, attributes: { class: 'py-4' }, children: ['This action cannot be undone.'] },
{
tag: Modal.Action,
children: [
{ tag: Button, attributes: { color: 'ghost', onclick: handleCancel }, children: ['Cancel'] },
{ tag: Button, attributes: { color: 'error', onclick: handleConfirm }, children: ['Delete'] }
]
}
]
},
{ tag: Modal.Backdrop }
]
};
const demo = {
tag: div,
attributes: { style: 'display: flex; align-items: center; gap: 1rem' },
children: [
{
tag: Button,
attributes: {
color: 'error',
variant: 'outline',
onclick: () => Modal.open(modalId)
},
children: ['Delete Item']
},
{ tag: p, attributes: { class: 'text-sm opacity-70' }, children: [() => `Status: ${status.value}`] },
confirmModal
]
};
$('#example').content(demo);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="syntax-reactive-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 60
});
</script><code contenteditable="true">await import('/components/actions/modal.js');
await import('/components/actions/button.js');
const { signal, $ } = Lightview;
const { Modal } = Lightview.tags;
const status = signal('Ready');
const modalId = 'confirm_modal';
const handleConfirm = () => {
status.value = '✅ Confirmed!';
Modal.close(modalId);
};
const handleCancel = () => {
status.value = '❌ Cancelled';
Modal.close(modalId);
};
const confirmModal = {
Modal: {
id: modalId,
children: [
{
'Modal.Box': {
children: [
{ h3: { class: 'text-lg font-bold', children: ['Are you sure?'] } },
{ p: { class: 'py-4', children: ['This action cannot be undone.'] } },
{
'Modal.Action': {
children: [
{ Button: { color: 'ghost', onclick: handleCancel, children: ['Cancel'] } },
{ Button: { color: 'error', onclick: handleConfirm, children: ['Delete'] } }
]
}
}
]
}
},
{ 'Modal.Backdrop': {} }
]
}
};
const demo = {
div: {
style: 'display: flex; align-items: center; gap: 1rem',
children: [
{
Button: {
color: 'error',
variant: 'outline',
onclick: () => Modal.open(modalId),
children: ['Delete Item']
}
},
{ p: { class: 'text-sm opacity-70', children: [() => `Status: ${status.value}`] } },
confirmModal
]
}
};
$('#example').content(demo);</code></pre>
</div>
</div>
</div>
<!-- Props Table -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Props</h2>
<div style="overflow-x: auto; margin-bottom: 2rem;">
<table class="table table-zebra">
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>id</code></td>
<td>string</td>
<td>-</td>
<td>Required unique ID for the modal</td>
</tr>
<tr>
<td><code>open</code></td>
<td>boolean | function</td>
<td>false</td>
<td>Control open state (reactive)</td>
</tr>
<tr>
<td><code>position</code></td>
<td>string</td>
<td>'middle'</td>
<td>'top' | 'middle' | 'bottom'</td>
</tr>
<tr>
<td><code>onClose</code></td>
<td>function</td>
<td>-</td>
<td>Callback when modal closes</td>
</tr>
</tbody>
</table>
</div>
<!-- Static Methods -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Static Methods</h2>
<div style="overflow-x: auto; margin-bottom: 2rem;">
<table class="table table-zebra">
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Modal.open(id)</code></td>
<td>Open a modal by its ID</td>
</tr>
<tr>
<td><code>Modal.close(id)</code></td>
<td>Close a modal by its ID</td>
</tr>
</tbody>
</table>
</div>
<!-- Sub-components -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sub-components</h2>
<div style="overflow-x: auto; margin-bottom: 2rem;">
<table class="table table-zebra">
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Modal.Box</code></td>
<td>The content container</td>
</tr>
<tr>
<td><code>Modal.Action</code></td>
<td>Container for action buttons (typically at bottom)</td>
</tr>
<tr>
<td><code>Modal.Backdrop</code></td>
<td>Click-to-close backdrop</td>
</tr>
</tbody>
</table>
</div>
<!-- Positions -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Positions</h2>
<div class="example-flex" style="margin-bottom: 2rem;">
<button class="btn" onclick="document.getElementById('modal_top').showModal()">Top</button>
<button class="btn" onclick="document.getElementById('modal_middle').showModal()">Middle
(default)</button>
<button class="btn"
onclick="document.getElementById('modal_bottom').showModal()">Bottom</button>
</div>
<dialog id="modal_top" class="modal modal-top">
<div class="modal-box">
<h3 class="text-lg font-bold">Top Modal</h3>
<p class="py-4">This modal appears at the top.</p>
<div class="modal-action">
<form method="dialog"><button class="btn">Close</button></form>
</div>
</div>
<form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>
<dialog id="modal_middle" class="modal modal-middle">
<div class="modal-box">
<h3 class="text-lg font-bold">Middle Modal</h3>
<p class="py-4">This modal appears in the middle (default).</p>
<div class="modal-action">
<form method="dialog"><button class="btn">Close</button></form>
</div>
</div>
<form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>
<dialog id="modal_bottom" class="modal modal-bottom">
<div class="modal-box">
<h3 class="text-lg font-bold">Bottom Modal</h3>
<p class="py-4">This modal appears at the bottom.</p>
<div class="modal-action">
<form method="dialog"><button class="btn">Close</button></form>
</div>
</div>
<form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>
<!-- Responsive -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Responsive Modal</h2>
<p style="opacity: 0.7; margin-bottom: 1rem;">Full-screen on mobile, centered on desktop.</p>
<button class="btn btn-primary" style="margin-bottom: 2rem;"
onclick="document.getElementById('modal_responsive').showModal()">
Open Responsive Modal
</button>
<dialog id="modal_responsive" class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<h3 class="text-lg font-bold">Responsive Modal</h3>
<p class="py-4">This modal is full-width at the bottom on mobile, and centered on larger
screens.</p>
<div class="modal-action">
<form method="dialog">
<button class="btn">Close</button>
</form>
</div>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
</div>
</div>