lightview 1.6.6-b → 1.7.3-b
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/components/chart/chart.html +15 -0
- package/components/chart/example.html +32 -0
- package/components/chart.html +22 -18
- package/components/components.js +105 -0
- package/components/gantt/example.html +22 -0
- package/components/gantt/gantt.html +40 -0
- package/components/gauge/example.html +28 -0
- package/components/gauge/guage.html +19 -0
- package/components/orgchart/example.html +25 -0
- package/components/orgchart/orgchart.html +36 -0
- package/components/timeline/example.html +33 -0
- package/components/timeline/timeline.html +42 -0
- package/components/timeline.html +81 -0
- package/examples/counter.html +1 -1
- package/examples/forgeinform.html +1 -1
- package/examples/invalid-template-literals.html +1 -4
- package/examples/medium/remote.html +3 -2
- package/examples/message.html +0 -1
- package/examples/object-bound-form.html +32 -0
- package/examples/timeline.html +21 -0
- package/examples/todo.html +38 -0
- package/examples/types.html +2 -2
- package/examples/xor.html +1 -0
- package/lightview.js +285 -214
- package/package.json +1 -1
- package/test/basic.html +8 -5
- package/types.js +73 -2
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>Form</title>
|
|
6
|
+
<script src="../lightview.js?as=x-body"></script>
|
|
7
|
+
</head>
|
|
8
|
+
|
|
9
|
+
<body>
|
|
10
|
+
<form value="${hamburger}" style="margin:20px;padding:5px;border:1px;border-style:solid;">
|
|
11
|
+
<div>Hamburger options:</div>
|
|
12
|
+
<select value="${hamburger.options}" multiple>
|
|
13
|
+
<option value="lettuce">lettuce</option>
|
|
14
|
+
<option value="tomato">tomato</option>
|
|
15
|
+
<option>cheese</option>
|
|
16
|
+
</select>
|
|
17
|
+
<p id="variables">
|
|
18
|
+
|
|
19
|
+
</p>
|
|
20
|
+
</form>
|
|
21
|
+
<script type="lightview/module">
|
|
22
|
+
self.addEventListener("connected",() => {
|
|
23
|
+
hamburger.options = ["cheese"];
|
|
24
|
+
observe(() => {
|
|
25
|
+
const el = self.getElementById("variables");
|
|
26
|
+
el.innerText = JSON.stringify(hamburger);
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
</script>
|
|
30
|
+
</body>
|
|
31
|
+
|
|
32
|
+
</html>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Chart</title>
|
|
4
|
+
<link href="../components/timeline.html" rel="module">
|
|
5
|
+
<script src="../lightview.js"></script>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<l-timeline id="myPieChart" style="max-width:750px" type="PieChart" title="How Much Pizza I Ate Last Night">
|
|
9
|
+
// Chart will resize automatically to a max-width of 750px and repaint on type and title changes.
|
|
10
|
+
// The component DOM element also exposes a method `el.addRow(row:array)` to dynamically add data
|
|
11
|
+
// And, `el.init()` will re-render from the initial data and current attributes.
|
|
12
|
+
[
|
|
13
|
+
[{ type: 'string', id: 'Position' },{ type: 'string', id: 'Name' },{ type: 'date', id: 'Start' },{ type: 'date', id: 'End' }],
|
|
14
|
+
[ '1', 'George Washington', '1789-03-30','1797-02-04'] // Date(1789, 3, 30), Date(1797, 2, 4)
|
|
15
|
+
//[ '2', 'John Adams', Date(1797, 2, 4), Date(1801, 2, 4) ],
|
|
16
|
+
//[ '3', 'Thomas Jefferson', Date(1801, 2, 4), Date(1809, 2, 4) ]]);
|
|
17
|
+
]
|
|
18
|
+
</l-timeline>
|
|
19
|
+
|
|
20
|
+
</body>
|
|
21
|
+
</html>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>Lightview:Examples:ToDo</title>
|
|
4
|
+
<script src="../lightview.js?as=x-body"></script>
|
|
5
|
+
</head>
|
|
6
|
+
<body>
|
|
7
|
+
<input type="text" value="${newItem}" placeholder="new todo item...">
|
|
8
|
+
<button l-on:click="${addToList}">Add</button>
|
|
9
|
+
<div l-for="${todoList}">
|
|
10
|
+
<input value="${item.status}" type="checkbox">
|
|
11
|
+
<span class="${item.status ? 'checked' : ''}">${item.text}</span>
|
|
12
|
+
<span l-on:click="({self}) => self.removeFromList(${index})">X>
|
|
13
|
+
<br/>
|
|
14
|
+
</div>
|
|
15
|
+
<script type="lightview/module">
|
|
16
|
+
self.variables(
|
|
17
|
+
{ todoList: Array },
|
|
18
|
+
{
|
|
19
|
+
reactive,
|
|
20
|
+
set: [
|
|
21
|
+
{text: 'Write my first post', status: true},
|
|
22
|
+
{text: 'Upload the post to the blog', status: false}
|
|
23
|
+
]
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
self.addToList = () => {
|
|
27
|
+
todoList = [...todoList, {text: newItem, status: false}];
|
|
28
|
+
newItem = '';
|
|
29
|
+
};
|
|
30
|
+
self.removeFromList = (index) => {
|
|
31
|
+
todoList.splice(index, 1);
|
|
32
|
+
};
|
|
33
|
+
</script>
|
|
34
|
+
<style>
|
|
35
|
+
.checked { text-decoration: line-through; }
|
|
36
|
+
</style>
|
|
37
|
+
</body>
|
|
38
|
+
</html>
|
package/examples/types.html
CHANGED
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
<body>
|
|
10
10
|
<div style="margin:20px">
|
|
11
11
|
<p>
|
|
12
|
-
<button l-on:click="run">Run</button>
|
|
13
|
-
<button l-on:click="clear">Clear</button>
|
|
12
|
+
<button l-on:click="${run}">Run</button>
|
|
13
|
+
<button l-on:click="${clear}">Clear</button>
|
|
14
14
|
</p>
|
|
15
15
|
<p id="console"></p>
|
|
16
16
|
</div>
|