lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
536 lines (504 loc) • 26.5 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: 'Collapse' }
]
});
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">Collapse</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;">
Collapse is used for showing and hiding content.
Unlike Accordion, multiple collapses can be open simultaneously.
</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;">Independent collapse sections
</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: 180,
autoRun: true
});
</script><code contenteditable="true">await import('/components/data-display/collapse.js');
const { tags, $ } = Lightview;
const { div, p, Collapse } = tags;
const demo = div({ style: 'display: flex; flex-direction: column; gap: 0.5rem' },
Collapse({ icon: 'arrow' },
Collapse.Title({}, '📖 Description'),
Collapse.Content({},
p({}, 'This is a detailed product description that can be expanded.')
)
),
Collapse({ icon: 'arrow' },
Collapse.Title({}, '📦 Shipping Info'),
Collapse.Content({},
p({}, 'Free shipping on orders over $50. Delivery in 3-5 days.')
)
),
Collapse({ icon: 'arrow' },
Collapse.Title({}, '🔄 Returns'),
Collapse.Content({},
p({}, '30-day return policy for unused items in original packaging.')
)
)
);
$('#example').content(demo);</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: 180
});
</script><code contenteditable="true">await import('/components/data-display/collapse.js');
const { $, tags } = Lightview;
const { Collapse, div, p } = tags;
const demo = {
tag: div,
attributes: { style: 'display: flex; flex-direction: column; gap: 0.5rem' },
children: [
{
tag: Collapse,
attributes: { icon: 'arrow' },
children: [
{ tag: Collapse.Title, children: ['📖 Description'] },
{ tag: Collapse.Content, children: [{ tag: p, children: ['This is a detailed product description that can be expanded.'] }] }
]
},
{
tag: Collapse,
attributes: { icon: 'arrow' },
children: [
{ tag: Collapse.Title, children: ['📦 Shipping Info'] },
{ tag: Collapse.Content, children: [{ tag: p, children: ['Free shipping on orders over $50. Delivery in 3-5 days.'] }] }
]
},
{
tag: Collapse,
attributes: { icon: 'arrow' },
children: [
{ tag: Collapse.Title, children: ['🔄 Returns'] },
{ tag: Collapse.Content, children: [{ tag: p, children: ['30-day return policy for unused items in original packaging.'] }] }
]
}
]
};
$('#example').content(demo);</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: 180
});
</script><code contenteditable="true">await import('/components/data-display/collapse.js');
const { $ } = Lightview;
const demo = {
div: {
style: 'display: flex; flex-direction: column; gap: 0.5rem',
children: [
{
Collapse: {
icon: 'arrow',
children: [
{ 'Collapse.Title': { children: ['📖 Description'] } },
{ 'Collapse.Content': { children: [{ p: { children: ['This is a detailed product description that can be expanded.'] } }] } }
]
}
},
{
Collapse: {
icon: 'arrow',
children: [
{ 'Collapse.Title': { children: ['📦 Shipping Info'] } },
{ 'Collapse.Content': { children: [{ p: { children: ['Free shipping on orders over $50. Delivery in 3-5 days.'] } }] } }
]
}
},
{
Collapse: {
icon: 'arrow',
children: [
{ 'Collapse.Title': { children: ['🔄 Returns'] } },
{ 'Collapse.Content': { children: [{ p: { children: ['30-day return policy for unused items in original packaging.'] } }] } }
]
}
}
]
}
};
$('#example').content(demo);</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">Initially Open</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Collapse with open prop</p>
<!-- Tabs -->
<script>
globalThis.switchReactiveSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
const contentEl = document.getElementById(`reactive-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="reactive-tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchReactiveSyntaxTab('tagged')">Tagged</button>
<button id="reactive-tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('vdom')">vDOM</button>
<button id="reactive-tab-btn-object" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('object')">Object DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="reactive-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: 200
});
</script><code contenteditable="true">await import('/components/data-display/collapse.js');
const { tags, $ } = Lightview;
const { div, p, ul, li, Collapse } = tags;
const demo = div({ style: 'display: flex; flex-direction: column; gap: 0.5rem' },
Collapse({ icon: 'plus', open: true },
Collapse.Title({}, '🎁 What\'s included'),
Collapse.Content({},
ul({ style: 'list-style-type: disc; padding-left: 1rem;' },
li({}, 'Premium headphones'),
li({}, 'Carrying case'),
li({}, '3.5mm audio cable'),
li({}, 'User manual')
)
)
),
Collapse({ icon: 'plus' },
Collapse.Title({}, '⚡ Specifications'),
Collapse.Content({},
ul({ style: 'list-style-type: disc; padding-left: 1rem;' },
li({}, 'Driver size: 40mm'),
li({}, 'Battery: 30h playtime'),
li({}, 'Bluetooth 5.0')
)
)
)
);
$('#example').content(demo);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="reactive-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: 200
});
</script><code contenteditable="true">await import('/components/data-display/collapse.js');
const { $, tags } = Lightview;
const { Collapse, div, ul, li } = tags;
const demo = {
tag: div,
attributes: { style: 'display: flex; flex-direction: column; gap: 0.5rem' },
children: [
{
tag: Collapse,
attributes: { icon: 'plus', open: true },
children: [
{ tag: Collapse.Title, children: ['🎁 What\'s included'] },
{
tag: Collapse.Content,
children: [{
tag: ul,
attributes: { style: 'list-style-type: disc; padding-left: 1rem;' },
children: [
{ tag: li, children: ['Premium headphones'] },
{ tag: li, children: ['Carrying case'] },
{ tag: li, children: ['3.5mm audio cable'] },
{ tag: li, children: ['User manual'] }
]
}]
}
]
},
{
tag: Collapse,
attributes: { icon: 'plus' },
children: [
{ tag: Collapse.Title, children: ['⚡ Specifications'] },
{
tag: Collapse.Content,
children: [{
tag: ul,
attributes: { style: 'list-style-type: disc; padding-left: 1rem;' },
children: [
{ tag: li, children: ['Driver size: 40mm'] },
{ tag: li, children: ['Battery: 30h playtime'] },
{ tag: li, children: ['Bluetooth 5.0'] }
]
}]
}
]
}
]
};
$('#example').content(demo);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="reactive-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: 200
});
</script><code contenteditable="true">await import('/components/data-display/collapse.js');
const { $ } = Lightview;
const demo = {
div: {
style: 'display: flex; flex-direction: column; gap: 0.5rem',
children: [
{
Collapse: {
icon: 'plus',
open: true,
children: [
{ 'Collapse.Title': { children: ['🎁 What\'s included'] } },
{
'Collapse.Content': {
children: [{
ul: {
style: 'list-style-type: disc; padding-left: 1rem;',
children: [
{ li: { children: ['Premium headphones'] } },
{ li: { children: ['Carrying case'] } },
{ li: { children: ['3.5mm audio cable'] } },
{ li: { children: ['User manual'] } }
]
}
}]
}
}
]
}
},
{
Collapse: {
icon: 'plus',
children: [
{ 'Collapse.Title': { children: ['⚡ Specifications'] } },
{
'Collapse.Content': {
children: [{
ul: {
style: 'list-style-type: disc; padding-left: 1rem;',
children: [
{ li: { children: ['Driver size: 40mm'] } },
{ li: { children: ['Battery: 30h playtime'] } },
{ li: { children: ['Bluetooth 5.0'] } }
]
}
}]
}
}
]
}
}
]
}
};
$('#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>icon</code></td>
<td>string</td>
<td>'arrow'</td>
<td>'arrow' | 'plus'</td>
</tr>
<tr>
<td><code>open</code></td>
<td>boolean</td>
<td>false</td>
<td>Initially open</td>
</tr>
<tr>
<td><code>focus</code></td>
<td>boolean</td>
<td>false</td>
<td>Open on focus (accessibility)</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>Collapse.Title</code></td>
<td>Clickable header area</td>
</tr>
<tr>
<td><code>Collapse.Content</code></td>
<td>Hidden content container</td>
</tr>
</tbody>
</table>
</div>
<!-- Static Examples -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Arrow Icon</h2>
<div class="collapse collapse-arrow"
style="background-color: oklch(var(--b1)); border: 1px solid oklch(var(--b3)); border-radius: var(--rounded-box, 1rem); margin-bottom: 1rem;">
<input type="checkbox" />
<div class="collapse-title font-semibold">Click to open/close</div>
<div class="collapse-content">
<p>This content is hidden by default.</p>
</div>
</div>
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Plus/Minus Icon</h2>
<div class="collapse collapse-plus"
style="background-color: oklch(var(--b1)); border: 1px solid oklch(var(--b3)); border-radius: var(--rounded-box, 1rem); margin-bottom: 1rem;">
<input type="checkbox" />
<div class="collapse-title font-semibold">Click to expand</div>
<div class="collapse-content">
<p>Expanded content here.</p>
</div>
</div>
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Force Open</h2>
<div class="collapse collapse-open"
style="background-color: oklch(var(--b1)); border: 1px solid oklch(var(--b3)); border-radius: var(--rounded-box, 1rem); margin-bottom: 2rem;">
<div class="collapse-title font-semibold">I am always open</div>
<div class="collapse-content">
<p>This collapse is forced open with <code>collapse-open</code>.</p>
</div>
</div>
</div>
</div>
</div>
</div>