2026-05-23 17:37:25 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>AutoForm Diagnostic</title>
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
<script type="importmap">
|
|
|
|
|
{
|
|
|
|
|
"imports": {
|
|
|
|
|
"@web/state": "../../state/src/index.js",
|
|
|
|
|
"@web/base": "../../base/src/index.js"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script type="module">
|
|
|
|
|
import { Component, NewState, RefreshState } from '@web/state';
|
|
|
|
|
import '@web/base';
|
|
|
|
|
window.RefreshState = RefreshState;
|
|
|
|
|
|
|
|
|
|
window.DiagnosticState = NewState({
|
|
|
|
|
schema: [],
|
|
|
|
|
data: {}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
window.runDiagnostic = async () => {
|
|
|
|
|
const form = document.getElementById('diagForm');
|
|
|
|
|
if (!form.state) form.state = NewState({ schema: [] });
|
|
|
|
|
|
|
|
|
|
console.log('--- STEP 1: TEXT ---');
|
2026-05-27 23:27:45 +08:00
|
|
|
DiagnosticState.schema = [{ name: 't1', label: '', type: 'text' }];
|
2026-05-23 17:37:25 +08:00
|
|
|
DiagnosticState.data = { t1: 'Hello World' };
|
|
|
|
|
form.state.schema = DiagnosticState.schema;
|
|
|
|
|
form.data = DiagnosticState.data;
|
|
|
|
|
RefreshState(form);
|
|
|
|
|
await new Promise(r => setTimeout(r, 200));
|
|
|
|
|
console.log('Input value:', form.querySelector('input')?.value);
|
|
|
|
|
|
|
|
|
|
console.log('--- STEP 2: TAGS ---');
|
2026-05-27 23:27:45 +08:00
|
|
|
DiagnosticState.schema = [{ name: 'tags', label: '', type: 'TagsInput' }];
|
2026-05-23 17:37:25 +08:00
|
|
|
DiagnosticState.data = { tags: ['A', 'B'] };
|
|
|
|
|
form.state.schema = DiagnosticState.schema;
|
|
|
|
|
form.data = DiagnosticState.data;
|
|
|
|
|
RefreshState(form);
|
|
|
|
|
await new Promise(r => setTimeout(r, 200));
|
|
|
|
|
console.log('Tags count:', form.querySelectorAll('TagsInput button').length);
|
|
|
|
|
|
|
|
|
|
console.log('--- STEP 3: RADIO ---');
|
2026-05-27 23:27:45 +08:00
|
|
|
DiagnosticState.schema = [{ name: 'r1', label: '', type: 'radio', options: ['Op1', 'Op2'] }];
|
2026-05-23 17:37:25 +08:00
|
|
|
DiagnosticState.data = { r1: 'Op2' };
|
|
|
|
|
form.state.schema = DiagnosticState.schema;
|
|
|
|
|
form.data = DiagnosticState.data;
|
|
|
|
|
RefreshState(form);
|
|
|
|
|
await new Promise(r => setTimeout(r, 200));
|
|
|
|
|
console.log('Radio Op2 checked:', form.querySelector('input[value="Op2"]')?.checked);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
|
RefreshState(document.documentElement);
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="p-4">
|
|
|
|
|
<div style="width: 300px; border: 1px solid blue; min-height: 100px;">
|
|
|
|
|
<AutoForm id="diagForm" inline></AutoForm>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="btn btn-danger mt-3" onclick="runDiagnostic()">START DIAGNOSTIC</button>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
