lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
591 lines (550 loc) • 29.1 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: 'File Input' }
]
});
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">File Input</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;">
File Input allows users to select and upload files.
Supports labels, validation, helper text, and multiple file selection.
</p>
<!-- Basic Example with Examplify -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Basic Examples</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">File inputs with various
configurations
</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'],
type: 'module',
minHeight: 350,
autoRun: true
});
</script><code contenteditable="true">const { default: FileInput } = await import('/components/data-input/file-input.js');
const { tags, $ } = Lightview;
const { div } = tags;
// 1. Basic file input
const basic = FileInput({});
// 2. With label and helper
const withLabel = FileInput({
label: 'Upload Document',
helper: 'PDF, DOC, or DOCX files only',
accept: '.pdf,.doc,.docx'
});
// 3. Multiple files with color
const multiple = FileInput({
label: 'Upload Images',
accept: 'image/*',
multiple: true,
color: 'primary',
helper: 'You can select multiple images'
});
// 4. Required file input
const required = FileInput({
label: 'Resume',
required: true,
accept: '.pdf'
});
// Insert all examples
$('#example').content(
div({ style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem' }, basic, withLabel, multiple, required)
);</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'],
type: 'module',
minHeight: 350
});
</script><code contenteditable="true">const { default: FileInput } = await import('/components/data-input/file-input.js');
const { $ } = Lightview;
const demo = {
tag: 'div',
attributes: { style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem' },
children: [
{ tag: FileInput },
{
tag: FileInput,
attributes: { label: 'Upload Document', helper: 'PDF, DOC, or DOCX files only', accept: '.pdf,.doc,.docx' }
},
{
tag: FileInput,
attributes: { label: 'Upload Images', accept: 'image/*', multiple: true, color: 'primary', helper: 'You can select multiple images' }
},
{
tag: FileInput,
attributes: { label: 'Resume', required: true, accept: '.pdf' }
}
]
};
$('#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'],
type: 'module',
minHeight: 350
});
</script><code contenteditable="true">const { default: FileInput } = await import('/components/data-input/file-input.js');
const { tags, $ } = Lightview;
tags.FileInput = FileInput;
const demo = {
div: {
style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem',
children: [
{ FileInput: {} },
{ FileInput: { label: 'Upload Document', helper: 'PDF, DOC, or DOCX files only', accept: '.pdf,.doc,.docx' } },
{ FileInput: { label: 'Upload Images', accept: 'image/*', multiple: true, color: 'primary', helper: 'You can select multiple images' } },
{ FileInput: { label: 'Resume', required: true, accept: '.pdf' } }
]
}
};
$('#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">Reactive Example</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">File validation and state
display</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'],
type: 'module',
minHeight: 280
});
</script><code contenteditable="true">const { default: FileInput } = await import('/components/data-input/file-input.js');
const { signal, tags, $ } = Lightview;
const { div, p, span, ul, li } = tags;
const selectedFiles = signal([]);
const validateFile = (files) => {
if (!files || files.length === 0) return 'Please select a file';
for (const file of files) {
if (file.size > 5 * 1024 * 1024) {
return `File "${file.name}" exceeds 5MB limit`;
}
}
return null;
};
const reactiveDemo = div({ style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem' },
FileInput({
label: 'Upload Files',
helper: 'Max 5MB per file',
multiple: true,
validate: validateFile,
onChange: (files) => {
selectedFiles.value = Array.from(files);
}
}),
div({ class: 'divider' }),
() => {
const files = selectedFiles.value;
if (files.length === 0) {
return p({ class: 'text-sm opacity-50' }, 'No files selected');
}
return div({},
p({ class: 'text-sm font-semibold mb-2' },
`${files.length} file(s) selected:`
),
ul({ class: 'text-xs font-mono', style: 'display: flex; flex-direction: column; gap: 0.25rem' },
...files.map(f =>
li({},
span({ class: 'text-primary' }, f.name),
span({ class: 'opacity-50' }, ` (${(f.size / 1024).toFixed(1)} KB)`)
)
)
)
);
}
);
$('#example').content(reactiveDemo);</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'],
type: 'module',
minHeight: 280
});
</script><code contenteditable="true">const { default: FileInput } = await import('/components/data-input/file-input.js');
const { signal, $ } = Lightview;
const selectedFiles = signal([]);
const validateFile = (files) => {
if (!files || files.length === 0) return 'Please select a file';
for (const file of files) {
if (file.size > 5 * 1024 * 1024) {
return `File "${file.name}" exceeds 5MB limit`;
}
}
return null;
};
const reactiveDemo = {
tag: 'div',
attributes: { style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem' },
children: [
{
tag: FileInput,
attributes: {
label: 'Upload Files',
helper: 'Max 5MB per file',
multiple: true,
validate: validateFile,
onChange: (files) => { selectedFiles.value = Array.from(files); }
}
},
{ tag: 'div', attributes: { class: 'divider' } },
() => {
const files = selectedFiles.value;
if (files.length === 0) {
return { tag: 'p', attributes: { class: 'text-sm opacity-50' }, children: ['No files selected'] };
}
return {
tag: 'div',
children: [
{
tag: 'p',
attributes: { class: 'text-sm font-semibold mb-2' },
children: [`${files.length} file(s) selected:`]
},
{
tag: 'ul',
attributes: { class: 'text-xs font-mono', style: 'display: flex; flex-direction: column; gap: 0.25rem' },
children: files.map(f => ({
tag: 'li',
children: [
{ tag: 'span', attributes: { class: 'text-primary' }, children: [f.name] },
{ tag: 'span', attributes: { class: 'opacity-50' }, children: [` (${(f.size / 1024).toFixed(1)} KB)`] }
]
}))
}
]
};
}
]
};
$('#example').content(reactiveDemo);</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'],
type: 'module',
minHeight: 280
});
</script><code contenteditable="true">const { default: FileInput } = await import('/components/data-input/file-input.js');
const { signal, tags, $ } = Lightview;
tags.FileInput = FileInput;
const selectedFiles = signal([]);
const validateFile = (files) => {
if (!files || files.length === 0) return 'Please select a file';
for (const file of files) {
if (file.size > 5 * 1024 * 1024) {
return `File "${file.name}" exceeds 5MB limit`;
}
}
return null;
};
const reactiveDemo = {
div: {
style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem',
children: [
{
FileInput: {
label: 'Upload Files',
helper: 'Max 5MB per file',
multiple: true,
validate: validateFile,
onChange: (files) => { selectedFiles.value = Array.from(files); }
}
},
{ div: { class: 'divider' } },
() => {
const files = selectedFiles.value;
if (files.length === 0) {
return { p: { class: 'text-sm opacity-50', children: ['No files selected'] } };
}
return {
div: {
children: [
{ p: { class: 'text-sm font-semibold mb-2', children: [`${files.length} file(s) selected:`] } },
{
ul: {
class: 'text-xs font-mono', style: 'display: flex; flex-direction: column; gap: 0.25rem',
children: files.map(f => ({
li: {
children: [
{ span: { class: 'text-primary', children: [f.name] } },
{ span: { class: 'opacity-50', children: [` (${(f.size / 1024).toFixed(1)} KB)`] } }
]
}
}))
}
}
]
}
};
}
]
}
};
$('#example').content(reactiveDemo);</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>accept</code></td>
<td>string</td>
<td>-</td>
<td>Accepted file types (e.g., '.pdf,.doc', 'image/*')</td>
</tr>
<tr>
<td><code>multiple</code></td>
<td>boolean</td>
<td>false</td>
<td>Allow multiple file selection</td>
</tr>
<tr>
<td><code>label</code></td>
<td>string</td>
<td>-</td>
<td>Label text displayed above the input</td>
</tr>
<tr>
<td><code>helper</code></td>
<td>string</td>
<td>-</td>
<td>Helper text displayed below the input</td>
</tr>
<tr>
<td><code>error</code></td>
<td>string | function</td>
<td>-</td>
<td>Error message or reactive error function</td>
</tr>
<tr>
<td><code>validate</code></td>
<td>function</td>
<td>-</td>
<td>Validation function: <code>(files) => errorMessage | null</code></td>
</tr>
<tr>
<td><code>color</code></td>
<td>string</td>
<td>-</td>
<td>'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
</td>
</tr>
<tr>
<td><code>size</code></td>
<td>string</td>
<td>'md'</td>
<td>'xs' | 'sm' | 'md' | 'lg'</td>
</tr>
<tr>
<td><code>ghost</code></td>
<td>boolean</td>
<td>false</td>
<td>Ghost style (no background)</td>
</tr>
<tr>
<td><code>disabled</code></td>
<td>boolean</td>
<td>false</td>
<td>Disable the file input</td>
</tr>
<tr>
<td><code>required</code></td>
<td>boolean</td>
<td>false</td>
<td>Mark as required field (shows asterisk)</td>
</tr>
<tr>
<td><code>onChange</code></td>
<td>function</td>
<td>-</td>
<td>Callback when files selected: <code>(files, event) => void</code></td>
</tr>
<tr>
<td><code>useShadow</code></td>
<td>boolean</td>
<td>*</td>
<td>Render in Shadow DOM. *Follows global <code>initComponents()</code> setting</td>
</tr>
</tbody>
</table>
</div>
<!-- Colors -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Colors</h2>
<div class="example-grid-responsive" style="margin-bottom: 2rem;">
<input type="file" class="file-input file-input-primary w-full max-w-xs" />
<input type="file" class="file-input file-input-secondary w-full max-w-xs" />
<input type="file" class="file-input file-input-accent w-full max-w-xs" />
<input type="file" class="file-input file-input-info w-full max-w-xs" />
<input type="file" class="file-input file-input-success w-full max-w-xs" />
<input type="file" class="file-input file-input-warning w-full max-w-xs" />
<input type="file" class="file-input file-input-error w-full max-w-xs" />
</div>
<!-- Sizes -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sizes</h2>
<div class="example-stack" style="margin-bottom: 2rem;">
<input type="file" class="file-input file-input-xs w-full max-w-xs" />
<input type="file" class="file-input file-input-sm w-full max-w-xs" />
<input type="file" class="file-input file-input-md w-full max-w-xs" />
<input type="file" class="file-input file-input-lg w-full max-w-xs" />
</div>
<!-- Variants -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Variants</h2>
<div class="example-stack" style="margin-bottom: 2rem;">
<div>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 0.25rem;">Ghost</p>
<input type="file" class="file-input file-input-ghost w-full max-w-xs" />
</div>
<div>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 0.25rem;">Disabled</p>
<input type="file" class="file-input w-full max-w-xs" disabled />
</div>
</div>
<!-- With Fieldset -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">With Label (Fieldset Pattern)</h2>
<div style="max-width: 28rem; margin-bottom: 2rem;">
<fieldset class="fieldset">
<legend class="fieldset-legend">Upload Avatar</legend>
<input type="file" class="file-input w-full" accept="image/*" />
<p class="label">JPG, PNG, or GIF up to 2MB</p>
</fieldset>
</div>
</div>
</div>
</div>
</div>