95 lines
3.3 KiB
HTML
95 lines
3.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>CodeEditor Demo</title>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body { padding: 20px; background-color: #f8f9fa; }
|
||
|
|
.demo-section { margin-bottom: 40px; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
|
||
|
|
h2 { margin-bottom: 20px; font-size: 1.25rem; color: #333; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="mb-4">CodeEditor Component Demo</h1>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h2>Basic Usage (JS)</h2>
|
||
|
|
<CodeEditor id="editor1" lang="javascript" value="console.log('Hello World');"></CodeEditor>
|
||
|
|
<div class="mt-2">
|
||
|
|
<strong>Current Value:</strong>
|
||
|
|
<pre id="val1" class="bg-light p-2 mt-1" style="font-size: 12px;"></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h2>AutoForm Integration</h2>
|
||
|
|
<AutoForm id="myForm"></AutoForm>
|
||
|
|
<div class="mt-3">
|
||
|
|
<strong>Form Data:</strong>
|
||
|
|
<pre id="formData" class="bg-light p-2 mt-1" style="font-size: 12px;"></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h2>Readonly HTML</h2>
|
||
|
|
<CodeEditor lang="html" value="<div class='test'>Hello</div>" readonly></CodeEditor>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"@web/state": "../../state/src/index.js",
|
||
|
|
"@web/base": "../../base/src/index.js",
|
||
|
|
"@web/editor": "../src/index.js"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script type="module">
|
||
|
|
import { RefreshState, NewState } from '@web/state';
|
||
|
|
import '@web/base';
|
||
|
|
import '../src/index.js';
|
||
|
|
|
||
|
|
window.RefreshState = RefreshState;
|
||
|
|
const editor1 = document.getElementById('editor1');
|
||
|
|
const val1 = document.getElementById('val1');
|
||
|
|
|
||
|
|
editor1.addEventListener('input', () => {
|
||
|
|
val1.textContent = editor1.value;
|
||
|
|
});
|
||
|
|
val1.textContent = editor1.value;
|
||
|
|
|
||
|
|
// Demo 2: AutoForm
|
||
|
|
const myForm = document.getElementById('myForm');
|
||
|
|
const formDataDisplay = document.getElementById('formData');
|
||
|
|
|
||
|
|
myForm.state = NewState({
|
||
|
|
schema: [
|
||
|
|
{ name: 'title', label: 'Project Title', type: 'text' },
|
||
|
|
{ name: 'config', label: 'Configuration (JSON)', type: 'code', setting: { lang: 'json' } }
|
||
|
|
],
|
||
|
|
data: {
|
||
|
|
title: 'My Awesome App',
|
||
|
|
config: '{\n "version": "1.0.0",\n "enabled": true\n}'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
const updateFormData = () => {
|
||
|
|
formDataDisplay.textContent = JSON.stringify(myForm.state.data, null, 2);
|
||
|
|
};
|
||
|
|
|
||
|
|
myForm.addEventListener('input', updateFormData);
|
||
|
|
updateFormData();
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
RefreshState(document.documentElement);
|
||
|
|
window.testStatus = 'ready';
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|