129 lines
4.6 KiB
HTML
129 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>ln.vue Demo Application</title>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="css/ln.vue.css"/>
|
|
|
|
<script type="text/javascript" src="js/vue.js"></script>
|
|
<script type="text/javascript" src="js/vue-router.js"></script>
|
|
|
|
<script type="text/javascript" src="js/ln.vue.application.js"></script>
|
|
<script type="text/javascript" src="js/ln.vue.components.js"></script>
|
|
<script type="text/javascript" src="js/ln.vue.table.js"></script>
|
|
|
|
<style>
|
|
table#controls > tbody > tr > td:nth-child(3) {
|
|
padding-left: 24px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="frame">
|
|
<h1>ln.vue Demo Application</h1>
|
|
|
|
<ln-navbar
|
|
:navitems="[
|
|
{ href: '/', label: 'HOME' },
|
|
{ href: '/controls', label: 'Simple Form Controls' },
|
|
{ href: '/table', label: 'Table View Control' },
|
|
{ href: '/state', label: 'Current State' },
|
|
]"></ln-navbar>
|
|
<router-view></router-view>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
LNVue.addRouteTemplate(
|
|
"/",
|
|
`<div>This is the ln.vue demo application. Feel free to test all the features, you can find.</div>`
|
|
);
|
|
LNVue.addRouteTemplate(
|
|
"/state",
|
|
`<div>Current User Input object:<br><br>
|
|
<span class="json">{{ JSON.stringify(controls,null,4) }}</span>
|
|
</div>`
|
|
);
|
|
|
|
LNVue.addRoute("/controls","/controls.html");
|
|
LNVue.addRoute("/table","/table.html");
|
|
|
|
app = new LNVue("#frame",{
|
|
data: {
|
|
columns: {
|
|
FirstName: {
|
|
label: 'Vorname',
|
|
editor: 'ln-textfield',
|
|
},
|
|
MiddleNames: {
|
|
label: 'weitere Vornamen',
|
|
editor: 'ln-textfield',
|
|
},
|
|
LastName: {
|
|
label: 'Nachname',
|
|
editor: 'ln-textfield',
|
|
},
|
|
},
|
|
slideItems: [
|
|
'Enkelkinder',
|
|
'Kinder',
|
|
'Ich',
|
|
'Eltern',
|
|
'Grosseltern',
|
|
],
|
|
controls: {
|
|
textfield: "Textfeld",
|
|
textarea: "Even multi-\nline text is possible!",
|
|
files: [],
|
|
slide1000: 50,
|
|
items: {
|
|
hwo: "Harald Wolff-Thobaben",
|
|
uth: "Ute Thobaben",
|
|
jwo: "Justus Jan Nico Wolff",
|
|
nth: "Niclas Thobaben",
|
|
pbr: "Peter Brommer",
|
|
hbr: "Hilde Brommer",
|
|
|
|
},
|
|
itemsArray: [
|
|
"Harald Wolff-Thobaben",
|
|
"Ute Thobaben",
|
|
"Niclas Thobaben",
|
|
],
|
|
selectedItem: 'hwo',
|
|
selectedNumericalItem: 1,
|
|
integer: 1234,
|
|
float: 1234.5678,
|
|
|
|
rows: [
|
|
{
|
|
FirstName: 'Harald',
|
|
MiddleNames: 'Christian Joachim',
|
|
LastName: 'Wolff-Thobaben',
|
|
},
|
|
{
|
|
FirstName: 'Ute',
|
|
MiddleNames: '',
|
|
LastName: 'Thobaben',
|
|
},
|
|
{
|
|
FirstName: 'Pascal',
|
|
MiddleNames: 'Gerome',
|
|
LastName: 'Thobaben',
|
|
},
|
|
{
|
|
FirstName: 'Niclas',
|
|
MiddleNames: '',
|
|
LastName: 'Thobaben',
|
|
},
|
|
],
|
|
},
|
|
table: {
|
|
currentrow: null,
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |