lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
104 lines (88 loc) • 3.45 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic</title>
<template id="x-test" name="joe" open="true" count=1 children='["mary"]' l-on:click="${bump}">
<input id="iuntyped" value="${iuntyped}">
<input id="idatetime" type="datetime" value="${idatetime}">
<span id="children">${children}</span>
<span id="name">${name}</span>
<span id="open">${open}</span>
<span id="count">${count}</span>
<span id="color">${color}</span>
<span id="checked">${checked}</span>
<span id="age">${age}</span>
<span id="hamburger">${hamburger}</span>
<input id="itext" type="text" value="${itext}">
<input id="itel" type="tel" value="${itel}">
<input id="iemail" type="email" value="${iemail}">
<input id="iurl" type="url" value="${iurl}">
<input id="iradio" type="radio" name="iradio" value="test">
<input id="isearch" type="search" value="${isearch}">
<input id="icolor" type="color" value="${icolor}">
<input id="ipassword" type="password" value="${ipassword}">
<input id="inumber" type="number" value="${inumber}">
<input id="irange" type="range" value="${irange}">
<input id="icheckbox" type="checkbox" value="${icheckbox}">
</template>
<script>
document.getElementById("x-test").mount = async (self) => {
// debugger;
self.variables(
{
shared:"function"
},
{
constant: (await import("../types.js")).shared
}
);
self.variables({name: "string", open: "boolean", count: "number", children: Array}, {imported, reactive});
self.variables({color: "string", checked: "boolean", age: "number", hamburger: Array}, {
exported,
reactive
});
self.variables({counter: "number"}, {reactive});
self.variables({myshare: "number"}, {shared});
color = "green";
checked = true;
age = 27;
hamburger = ["lettuce"];
counter = 0;
myshare = 1;
self.addEventListener("mounted", ({target}) => {
debugger;
iuntyped = "test";
itext = "test";
itel = "test";
iemail = "test";
iurl = "test";
isearch = "test";
iradio = "test";
icolor = "test";
ipassword = "test";
inumber = 1;
irange = 1;
idatetime = new Date();
icheckbox = true;
target.testId = target.id;
});
self.bump = () => {
counter++;
};
addEventListener("change", ({variableName, value}) => {
self[variableName] = value;
});
}
</script>
<script src="../lightview.js"></script>
<script>
Lightview.createInputVariables = true;
Lightview.createComponent("x-test",document.getElementById("x-test"));
</script>
</head>
<body>
<p><x-test id="test"></x-test></p>
<p><x-test id="test1"></x-test></p>
</body>
</html>