109 lines
5.4 KiB
HTML
109 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>AutoForm Mega Unit Test</title>
|
|
<script src="./lib/state.js"></script>
|
|
<script src="./lib/bootstrap.js"></script>
|
|
<script src="./lib/base.js"></script>
|
|
<script>
|
|
window.fullSchema = [
|
|
{ name: 't', label: 'Text Input', type: 'text', placeholder: 'Enter name...' },
|
|
{ name: 's', label: 'Single Select', type: 'select', options: [{label:'Option 1', value:'1'}, {label:'Option 2', value:'2'}] },
|
|
{ name: 'date', label: 'Single Date', type: 'DatePicker' },
|
|
{ name: 'range', label: 'Date Range', type: 'DatePicker', setting: { rangeEnd: 'rangeEnd' } },
|
|
{ name: 'c', label: 'Multi Check', type: 'checkbox', options: ['Apple', 'Banana', 'Orange'] },
|
|
{ name: 'r', label: 'Single Radio', type: 'radio', options: ['High', 'Medium', 'Low'] },
|
|
{ name: 'sw', label: 'Enable Linkage', type: 'switch' },
|
|
{ name: 'linkageField', label: 'Secret Key', type: 'password', if: 'this.data.sw', placeholder: 'Only visible when switch is ON' },
|
|
{ name: 'cp', label: 'Color Picker', type: 'ColorPicker' },
|
|
{ name: 'tg', label: 'Tags System', type: 'TagsInput' },
|
|
{ name: 'txt', label: 'Description', type: 'textarea' }
|
|
];
|
|
|
|
window.searchSchema = [
|
|
{ name: 'q', type: 'text', placeholder: 'Search...' },
|
|
{ name: 'cat', type: 'select', placeholder: 'Category', options: ['All', 'Docs', 'Issues'] }
|
|
];
|
|
|
|
window.compactSchema = [
|
|
{ name: 'user', label: 'User', type: 'text' },
|
|
{ name: 'role', label: 'Role', type: 'select', options: ['Admin', 'Editor'] }
|
|
];
|
|
|
|
Object.assign(window.State, {
|
|
formData: { t: 'Apigo', s: '1', c: ['Apple'], sw: false, cp: '#0d6efd', range: '2026-01-01', rangeEnd: '2026-12-31' },
|
|
searchData: { q: '', cat: '' },
|
|
compactData: { user: 'Admin', role: 'Admin' }
|
|
});
|
|
</script>
|
|
<style>body { padding: 30px; background: #111; color: #eee; }</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<h2 class="mb-4">AutoForm Mega Test & Function Showcase</h2>
|
|
|
|
<div class="row g-4">
|
|
<!-- 1. 垂直模式 -->
|
|
<div class="col-md-4">
|
|
<div class="card bg-dark border-secondary h-100">
|
|
<div class="card-header border-secondary bg-secondary bg-opacity-10">1. Vertical Mode</div>
|
|
<div class="card-body">
|
|
<AutoForm id="formV" vertical $.state.schema="window.fullSchema" $.state.data="State.formData"></AutoForm>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. 响应式水平模式 -->
|
|
<div class="col-md-8">
|
|
<div class="card bg-dark border-secondary">
|
|
<div class="card-header border-secondary bg-secondary bg-opacity-10 d-flex justify-content-between">
|
|
<span>2. Responsive Horizontal</span>
|
|
<small class="text-info">Try shrinking the window!</small>
|
|
</div>
|
|
<div class="card-body">
|
|
<AutoForm id="formH" $.state.schema="window.fullSchema" $.state.data="State.formData">
|
|
<template slot="actions">
|
|
<button type="button" class="btn btn-outline-info" onclick="UI.toast('Custom Action!')">Custom Button</button>
|
|
</template>
|
|
</AutoForm>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-dark border-secondary mt-4">
|
|
<div class="card-header border-secondary bg-secondary bg-opacity-10">2b. Forced Horizontal</div>
|
|
<div class="card-body">
|
|
<AutoForm id="formFH" horizontal $.state.schema="window.fullSchema" $.state.data="State.formData"></AutoForm>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<h4 class="text-primary border-bottom pb-2">3. Inline Mode Scenarios</h4>
|
|
<div class="row align-items-end">
|
|
<div class="col-auto">
|
|
<h6>Toolbar (No label, with action)</h6>
|
|
<div class="p-2 border border-secondary rounded bg-dark d-inline-block shadow-sm">
|
|
<AutoForm id="formSearch" inline submitlabel="Search" $.state.schema="window.searchSchema" $.state.data="State.searchData"></AutoForm>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto ms-4">
|
|
<h6>Compact Config (With labels, no button)</h6>
|
|
<div class="p-2 border border-secondary rounded bg-dark d-inline-block shadow-sm">
|
|
<AutoForm id="formCompact" inline nobutton $.state.schema="window.compactSchema" $.state.data="State.compactData"></AutoForm>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 card bg-dark border-primary">
|
|
<div class="card-header border-primary text-primary">Live Data Sync Debug</div>
|
|
<div class="card-body">
|
|
<pre class="m-0 text-success" $text="JSON.stringify(State.formData, null, 2)"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|