lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
642 lines (603 loc) • 32.4 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: 'Rating' }
]
});
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">Rating</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;">
Rating allows users to rate items with stars or other shapes.
Supports labels, half stars, different masks, and reactive state binding.
</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;">Rating components 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: 300,
autoRun: true
});
</script><code contenteditable="true">const { default: Rating } = await import('/components/data-input/rating.js');
const { tags, $ } = Lightview;
const { div, p } = tags;
// 1. Basic rating
const basic = Rating({
defaultValue: 3
});
// 2. Rating with label
const withLabel = Rating({
label: 'Rate this product',
defaultValue: 4,
max: 5
});
// 3. Rating with different colors and masks
const hearts = Rating({
label: 'Love it?',
defaultValue: 3,
mask: 'heart',
color: 'red-500'
});
// 4. Half stars
const halfStars = Rating({
label: 'Precise rating',
half: true,
defaultValue: 3.5,
hidden: true
});
// Insert all examples
$('#example').content(
div({ style: 'display: flex; flex-direction: column; gap: 1.5rem' }, basic, withLabel, hearts, halfStars)
);</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: 300
});
</script><code contenteditable="true">const { default: Rating } = await import('/components/data-input/rating.js');
const { $ } = Lightview;
const basic = {
tag: Rating,
attributes: {
defaultValue: 3
}
};
const withLabel = {
tag: Rating,
attributes: {
label: 'Rate this product',
defaultValue: 4,
max: 5
}
};
const hearts = {
tag: Rating,
attributes: {
label: 'Love it?',
defaultValue: 3,
mask: 'heart',
color: 'red-500'
}
};
const halfStars = {
tag: Rating,
attributes: {
label: 'Precise rating',
half: true,
defaultValue: 3.5,
hidden: true
}
};
$('#example').content({
tag: 'div',
attributes: { style: 'display: flex; flex-direction: column; gap: 1.5rem' },
children: [basic, withLabel, hearts, halfStars]
});</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: 300
});
</script><code contenteditable="true">const { default: Rating } = await import('/components/data-input/rating.js');
const { tags, $ } = Lightview;
tags.Rating = Rating;
$('#example').content({
div: {
style: 'display: flex; flex-direction: column; gap: 1.5rem',
children: [
{
Rating: {
defaultValue: 3
}
},
{
Rating: {
label: 'Rate this product',
defaultValue: 4,
max: 5
}
},
{
Rating: {
label: 'Love it?',
defaultValue: 3,
mask: 'heart',
color: 'red-500'
}
},
{
Rating: {
label: 'Precise rating',
half: true,
defaultValue: 3.5,
hidden: true
}
}
]
}
});</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;">Two-way binding with signals
</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: 220
});
</script><code contenteditable="true">const { default: Rating } = await import('/components/data-input/rating.js');
const { signal, tags, $ } = Lightview;
const { div, p, span } = tags;
// Signal for two-way binding
const rating = signal(0);
// Reactive rating demo
const reactiveDemo = div({ style: 'display: flex; flex-direction: column; gap: 1rem' },
Rating({
label: 'How was your experience?',
value: rating,
max: 5,
size: 'lg',
hidden: true,
helper: 'Click to rate'
}),
div({ class: 'divider' }),
p({ class: 'text-lg font-semibold' },
() => {
const val = rating.value;
if (val === 0) return span({class: 'opacity-50'}, 'No rating yet');
if (val <= 1) return span({class: 'text-error'}, '😞 Poor');
if (val <= 2) return span({class: 'text-warning'}, '😐 Fair');
if (val <= 3) return span({class: 'text-info'}, '🙂 Good');
if (val <= 4) return span({class: 'text-success'}, '😊 Great');
return span({class: 'text-primary'}, '🤩 Excellent!');
}
),
p({ class: 'text-sm font-mono opacity-70' },
() => `Rating value: ${rating.value} / 5`
)
);
$('#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: 220
});
</script><code contenteditable="true">const { default: Rating } = await import('/components/data-input/rating.js');
const { signal, $ } = Lightview;
const rating = signal(0);
const reactiveDemo = {
tag: 'div',
attributes: { style: 'display: flex; flex-direction: column; gap: 1rem' },
children: [
{
tag: Rating,
attributes: {
label: 'How was your experience?',
value: rating,
max: 5,
size: 'lg',
hidden: true,
helper: 'Click to rate'
}
},
{ tag: 'div', attributes: { class: 'divider' } },
{
tag: 'p',
attributes: { class: 'text-lg font-semibold' },
children: [
() => {
const val = rating.value;
if (val === 0) return { tag: 'span', attributes: { class: 'opacity-50' }, children: ['No rating yet'] };
if (val <= 1) return { tag: 'span', attributes: { class: 'text-error' }, children: ['😞 Poor'] };
if (val <= 2) return { tag: 'span', attributes: { class: 'text-warning' }, children: ['😐 Fair'] };
if (val <= 3) return { tag: 'span', attributes: { class: 'text-info' }, children: ['🙂 Good'] };
if (val <= 4) return { tag: 'span', attributes: { class: 'text-success' }, children: ['😊 Great'] };
return { tag: 'span', attributes: { class: 'text-primary' }, children: ['🤩 Excellent!'] };
}
]
},
{
tag: 'p',
attributes: { class: 'text-sm font-mono opacity-70' },
children: [
() => `Rating value: ${rating.value} / 5`
]
}
]
};
$('#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: 220
});
</script><code contenteditable="true">const { default: Rating } = await import('/components/data-input/rating.js');
const { signal, tags, $ } = Lightview;
tags.Rating = Rating;
const rating = signal(0);
const reactiveDemo = {
div: {
style: 'display: flex; flex-direction: column; gap: 1rem',
children: [
{
Rating: {
label: 'How was your experience?',
value: rating,
max: 5,
size: 'lg',
hidden: true,
helper: 'Click to rate'
}
},
{ div: { class: 'divider' } },
{
p: {
class: 'text-lg font-semibold',
children: [
() => {
const val = rating.value;
if (val === 0) return { span: { class: 'opacity-50', children: ['No rating yet'] } };
if (val <= 1) return { span: { class: 'text-error', children: ['😞 Poor'] } };
if (val <= 2) return { span: { class: 'text-warning', children: ['😐 Fair'] } };
if (val <= 3) return { span: { class: 'text-info', children: ['🙂 Good'] } };
if (val <= 4) return { span: { class: 'text-success', children: ['😊 Great'] } };
return { span: { class: 'text-primary', children: ['🤩 Excellent!'] } };
}
]
}
},
{
p: {
class: 'text-sm font-mono opacity-70',
children: [
() => `Rating value: ${rating.value} / 5`
]
}
}
]
}
};
$('#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>value</code></td>
<td>number | signal</td>
<td>-</td>
<td>Current rating value (reactive with signals)</td>
</tr>
<tr>
<td><code>defaultValue</code></td>
<td>number</td>
<td>0</td>
<td>Default value for uncontrolled mode</td>
</tr>
<tr>
<td><code>max</code></td>
<td>number</td>
<td>5</td>
<td>Maximum rating (number of stars)</td>
</tr>
<tr>
<td><code>label</code></td>
<td>string</td>
<td>-</td>
<td>Label text displayed above the rating</td>
</tr>
<tr>
<td><code>helper</code></td>
<td>string</td>
<td>-</td>
<td>Helper text displayed below the rating</td>
</tr>
<tr>
<td><code>half</code></td>
<td>boolean</td>
<td>false</td>
<td>Allow half-star ratings</td>
</tr>
<tr>
<td><code>hidden</code></td>
<td>boolean</td>
<td>false</td>
<td>Include hidden 0-star option for clearing</td>
</tr>
<tr>
<td><code>mask</code></td>
<td>string</td>
<td>'star-2'</td>
<td>'star' | 'star-2' | 'heart' | 'circle' | 'square' | 'diamond'</td>
</tr>
<tr>
<td><code>color</code></td>
<td>string</td>
<td>'orange-400'</td>
<td>Tailwind color class for the rating icons</td>
</tr>
<tr>
<td><code>size</code></td>
<td>string</td>
<td>-</td>
<td>'xs' | 'sm' | 'md' | 'lg'</td>
</tr>
<tr>
<td><code>disabled</code></td>
<td>boolean</td>
<td>false</td>
<td>Disable the rating</td>
</tr>
<tr>
<td><code>readOnly</code></td>
<td>boolean</td>
<td>false</td>
<td>Make rating read-only (display only)</td>
</tr>
<tr>
<td><code>onChange</code></td>
<td>function</td>
<td>-</td>
<td>Callback when rating changes: <code>(rating) => void</code></td>
</tr>
<tr>
<td><code>useShadow</code></td>
<td>boolean</td>
<td>*</td>
<td>Render in Shadow DOM</td>
</tr>
</tbody>
</table>
</div>
<!-- Sizes Example -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sizes</h2>
<div class="example-stack" style="margin-bottom: 2rem;">
<div class="rating rating-xs">
<input type="radio" name="rating-xs" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-xs" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-xs" class="mask mask-star-2 bg-orange-400" checked />
<input type="radio" name="rating-xs" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-xs" class="mask mask-star-2 bg-orange-400" />
</div>
<div class="rating rating-sm">
<input type="radio" name="rating-sm" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-sm" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-sm" class="mask mask-star-2 bg-orange-400" checked />
<input type="radio" name="rating-sm" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-sm" class="mask mask-star-2 bg-orange-400" />
</div>
<div class="rating rating-md">
<input type="radio" name="rating-md" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-md" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-md" class="mask mask-star-2 bg-orange-400" checked />
<input type="radio" name="rating-md" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-md" class="mask mask-star-2 bg-orange-400" />
</div>
<div class="rating rating-lg">
<input type="radio" name="rating-lg" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-lg" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-lg" class="mask mask-star-2 bg-orange-400" checked />
<input type="radio" name="rating-lg" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-lg" class="mask mask-star-2 bg-orange-400" />
</div>
</div>
<!-- Half Stars Example -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Half Stars</h2>
<div class="rating rating-lg rating-half" style="margin-bottom: 2rem;">
<input type="radio" name="rating-half" class="rating-hidden" />
<input type="radio" name="rating-half" class="mask mask-star-2 mask-half-1 bg-green-500" />
<input type="radio" name="rating-half" class="mask mask-star-2 mask-half-2 bg-green-500" />
<input type="radio" name="rating-half" class="mask mask-star-2 mask-half-1 bg-green-500"
checked />
<input type="radio" name="rating-half" class="mask mask-star-2 mask-half-2 bg-green-500" />
<input type="radio" name="rating-half" class="mask mask-star-2 mask-half-1 bg-green-500" />
<input type="radio" name="rating-half" class="mask mask-star-2 mask-half-2 bg-green-500" />
<input type="radio" name="rating-half" class="mask mask-star-2 mask-half-1 bg-green-500" />
<input type="radio" name="rating-half" class="mask mask-star-2 mask-half-2 bg-green-500" />
<input type="radio" name="rating-half" class="mask mask-star-2 mask-half-1 bg-green-500" />
<input type="radio" name="rating-half" class="mask mask-star-2 mask-half-2 bg-green-500" />
</div>
<!-- Different Masks -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Different Shapes</h2>
<div class="example-stack" style="margin-bottom: 2rem;">
<div>
<p class="text-sm opacity-70 mb-1">Hearts</p>
<div class="rating">
<input type="radio" name="rating-heart" class="mask mask-heart bg-red-400" />
<input type="radio" name="rating-heart" class="mask mask-heart bg-red-400" />
<input type="radio" name="rating-heart" class="mask mask-heart bg-red-400" checked />
<input type="radio" name="rating-heart" class="mask mask-heart bg-red-400" />
<input type="radio" name="rating-heart" class="mask mask-heart bg-red-400" />
</div>
</div>
<div>
<p class="text-sm opacity-70 mb-1">Circles</p>
<div class="rating">
<input type="radio" name="rating-circle" class="mask mask-circle bg-blue-400" />
<input type="radio" name="rating-circle" class="mask mask-circle bg-blue-400" />
<input type="radio" name="rating-circle" class="mask mask-circle bg-blue-400" checked />
<input type="radio" name="rating-circle" class="mask mask-circle bg-blue-400" />
<input type="radio" name="rating-circle" class="mask mask-circle bg-blue-400" />
</div>
</div>
<div>
<p class="text-sm opacity-70 mb-1">Diamonds</p>
<div class="rating">
<input type="radio" name="rating-diamond" class="mask mask-diamond bg-purple-400" />
<input type="radio" name="rating-diamond" class="mask mask-diamond bg-purple-400" />
<input type="radio" name="rating-diamond" class="mask mask-diamond bg-purple-400"
checked />
<input type="radio" name="rating-diamond" class="mask mask-diamond bg-purple-400" />
<input type="radio" name="rating-diamond" class="mask mask-diamond bg-purple-400" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>