2026-05-14 20:04:31 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Base.js Modular & Performance Tests</title>
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
<script type="importmap">
|
|
|
|
|
{
|
|
|
|
|
"imports": {
|
|
|
|
|
"@web/state": "../../state/src/index.js",
|
|
|
|
|
"@web/base": "../src/index.js"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="d-flex flex-column vh-100">
|
|
|
|
|
<div id="results" class="p-2 bg-light border-bottom">Running tests...</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const list_data = []
|
|
|
|
|
for (let i = 0; i < 10000; i++) {
|
|
|
|
|
list_data.push({ id: i, label: `item ${i}`, index: i, group: i % 1000, summary: `item ${i} summary`, parent: Math.floor(i / 10) })
|
|
|
|
|
}
|
|
|
|
|
const group_list = []
|
|
|
|
|
for (let i = 0; i < 1000; i++) {
|
|
|
|
|
group_list.push({ id: i, label: `group ${i}`, summary: `group ${i} summary` })
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2026-05-20 22:52:44 +08:00
|
|
|
<script>
|
|
|
|
|
function switchTab(tabId) {
|
|
|
|
|
document.querySelectorAll('.list-container').forEach(el => el.style.display = 'none');
|
|
|
|
|
document.getElementById('container-' + tabId).style.display = 'flex';
|
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
|
|
|
|
document.getElementById('btn-' + tabId).classList.add('active');
|
|
|
|
|
window.activeTab = tabId;
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<div class="p-2 border-bottom d-flex gap-2">
|
|
|
|
|
<button id="btn-ll" class="tab-btn btn btn-sm btn-outline-primary active" onclick="switchTab('ll')">Fast List</button>
|
|
|
|
|
<button id="btn-gl" class="tab-btn btn btn-sm btn-outline-primary" onclick="switchTab('gl')">Fast Grouped</button>
|
|
|
|
|
<button id="btn-tt" class="tab-btn btn btn-sm btn-outline-primary" onclick="switchTab('tt')">Fast Tree</button>
|
|
|
|
|
<button id="btn-ct" class="tab-btn btn btn-sm btn-outline-primary" onclick="switchTab('ct')">Normal Tree</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="d-flex flex-fill p-2 overflow-hidden">
|
|
|
|
|
<div id="container-ll" class="list-container flex-fill d-flex flex-column overflow-hidden">
|
2026-05-20 08:54:56 +08:00
|
|
|
<h5>Fast List (Variable Height)</h5>
|
|
|
|
|
<List fast id="ll" auto-select class="flex-fill d-flex flex-column gap-3 bg-body-secondary rounded" $.state.list="list_data" $onitemclick="console.log(index, item)">
|
|
|
|
|
<template slot="item">
|
|
|
|
|
<div class="d-flex justify-content-center align-items-center border border-primary rounded" $text="item.label" $.style.height="${(item.index%10)*5+40}px"></div>
|
|
|
|
|
</template>
|
|
|
|
|
</List>
|
|
|
|
|
</div>
|
2026-05-20 22:52:44 +08:00
|
|
|
<div id="container-gl" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
|
2026-05-20 08:54:56 +08:00
|
|
|
<h5>Fast Grouped List</h5>
|
|
|
|
|
<List fast mode="group" id="gl" auto-select auto-select-group class="flex-fill d-flex flex-column border border-info rounded" $.state.groups="group_list" $.state.list="list_data"
|
|
|
|
|
$ongroupclick="console.log(index, item)">
|
|
|
|
|
</List>
|
|
|
|
|
</div>
|
2026-05-20 22:52:44 +08:00
|
|
|
<div id="container-tt" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
|
2026-05-20 08:54:56 +08:00
|
|
|
<h5>Fast Tree List</h5>
|
|
|
|
|
<List fast mode="tree" id="tt" auto-select class="flex-fill d-flex flex-column border border-info rounded" $.state.list="list_data" $onitemclick="console.log(index, item)"></List>
|
|
|
|
|
</div>
|
2026-05-20 22:52:44 +08:00
|
|
|
<div id="container-ct" class="list-container flex-fill flex-column overflow-hidden" style="display: none;">
|
2026-05-20 08:54:56 +08:00
|
|
|
<h5>Normal Tree List (Collapsible)</h5>
|
|
|
|
|
<List mode="tree" collapsible id="ct" auto-select class="flex-fill d-flex flex-column border border-info rounded" $.state.list="list_data.slice(0, 1200)" $onitemclick="console.log(index, item)">
|
|
|
|
|
</List>
|
|
|
|
|
</div>
|
2026-05-14 20:04:31 +08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="module">
|
|
|
|
|
import { runTests } from './base.test.js';
|
|
|
|
|
|
|
|
|
|
async function runAll() {
|
|
|
|
|
const results = document.getElementById('results');
|
|
|
|
|
try {
|
|
|
|
|
// Wait for components to initialize
|
|
|
|
|
await new Promise(r => setTimeout(r, 500));
|
|
|
|
|
await runTests();
|
|
|
|
|
results.innerHTML = '<h1 style="color: green; font-size: 1.2rem">All Tests Passed 🎉</h1>';
|
|
|
|
|
window.testStatus = 'passed';
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
results.innerHTML = '<h1 style="color: red; font-size: 1.2rem">Tests Failed: ' + e.message + '</h1>';
|
|
|
|
|
window.testStatus = 'failed';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
runAll();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
