lightview 1.8.1-b → 2.0.0

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.
Files changed (224) hide show
  1. package/.agent/workflows/daisyui-component-migration.md +155 -0
  2. package/.codacy/cli.sh +149 -0
  3. package/.codacy/codacy.yaml +15 -0
  4. package/.github/instructions/codacy.instructions.md +72 -0
  5. package/.wranglerignore +21 -0
  6. package/README.md +1331 -21
  7. package/_headers +4 -0
  8. package/build.js +70 -0
  9. package/components/actions/button.js +151 -0
  10. package/components/actions/dropdown.js +120 -0
  11. package/components/actions/modal.js +146 -0
  12. package/components/actions/swap.js +118 -0
  13. package/components/daisyui.js +288 -0
  14. package/components/data-display/accordion.js +128 -0
  15. package/components/data-display/alert.js +112 -0
  16. package/components/data-display/avatar.js +170 -0
  17. package/components/data-display/badge.js +82 -0
  18. package/components/data-display/card.js +151 -0
  19. package/components/data-display/carousel.js +94 -0
  20. package/components/data-display/chart.js +220 -0
  21. package/components/data-display/chat.js +128 -0
  22. package/components/data-display/collapse.js +103 -0
  23. package/components/data-display/countdown.js +69 -0
  24. package/components/data-display/diff.js +111 -0
  25. package/components/data-display/kbd.js +65 -0
  26. package/components/data-display/loading.js +75 -0
  27. package/components/data-display/progress.js +79 -0
  28. package/components/data-display/radial-progress.js +88 -0
  29. package/components/data-display/skeleton.js +66 -0
  30. package/components/data-display/stats.js +159 -0
  31. package/components/data-display/table.js +146 -0
  32. package/components/data-display/timeline.js +146 -0
  33. package/components/data-display/toast.js +72 -0
  34. package/components/data-display/tooltip.js +74 -0
  35. package/components/data-input/checkbox.js +253 -0
  36. package/components/data-input/file-input.js +224 -0
  37. package/components/data-input/input.js +264 -0
  38. package/components/data-input/radio.js +338 -0
  39. package/components/data-input/range.js +204 -0
  40. package/components/data-input/rating.js +219 -0
  41. package/components/data-input/select.js +287 -0
  42. package/components/data-input/textarea.js +287 -0
  43. package/components/data-input/toggle.js +201 -0
  44. package/components/index.js +137 -0
  45. package/components/layout/divider.js +72 -0
  46. package/components/layout/drawer.js +142 -0
  47. package/components/layout/footer.js +100 -0
  48. package/components/layout/hero.js +109 -0
  49. package/components/layout/indicator.js +90 -0
  50. package/components/layout/join.js +78 -0
  51. package/components/layout/navbar.js +110 -0
  52. package/components/navigation/breadcrumbs.js +91 -0
  53. package/components/navigation/dock.js +103 -0
  54. package/components/navigation/menu.js +126 -0
  55. package/components/navigation/pagination.js +105 -0
  56. package/components/navigation/steps.js +89 -0
  57. package/components/navigation/tabs.css +177 -0
  58. package/components/navigation/tabs.js +123 -0
  59. package/components/theme/theme-switch.css +65 -0
  60. package/components/theme/theme-switch.js +177 -0
  61. package/docs/about.html +164 -0
  62. package/docs/api/computed.html +184 -0
  63. package/docs/api/effects.html +173 -0
  64. package/docs/api/elements.html +180 -0
  65. package/docs/api/enhance.html +225 -0
  66. package/docs/api/hypermedia.html +165 -0
  67. package/docs/api/index.html +178 -0
  68. package/docs/api/nav.html +18 -0
  69. package/docs/api/signals.html +136 -0
  70. package/docs/api/state.html +217 -0
  71. package/docs/assets/images/logo-favicon.svg +42 -0
  72. package/docs/assets/images/logo-static.svg +40 -0
  73. package/docs/assets/images/logo.svg +66 -0
  74. package/docs/assets/js/examplify.js +395 -0
  75. package/docs/assets/styles/site.css +1102 -0
  76. package/docs/assets/styles/themes.css +236 -0
  77. package/docs/components/accordion.html +439 -0
  78. package/docs/components/alert.html +528 -0
  79. package/docs/components/avatar.html +586 -0
  80. package/docs/components/badge.html +531 -0
  81. package/docs/components/breadcrumbs.html +278 -0
  82. package/docs/components/button.html +579 -0
  83. package/docs/components/card.html +561 -0
  84. package/docs/components/carousel.html +286 -0
  85. package/docs/components/chart-area.html +702 -0
  86. package/docs/components/chart-bar.html +782 -0
  87. package/docs/components/chart-column.html +735 -0
  88. package/docs/components/chart-line.html +794 -0
  89. package/docs/components/chart-pie.html +823 -0
  90. package/docs/components/chart.html +612 -0
  91. package/docs/components/chat.html +547 -0
  92. package/docs/components/checkbox.html +641 -0
  93. package/docs/components/collapse.html +536 -0
  94. package/docs/components/component-nav.html +53 -0
  95. package/docs/components/countdown.html +470 -0
  96. package/docs/components/diff.html +245 -0
  97. package/docs/components/divider.html +240 -0
  98. package/docs/components/dock.html +277 -0
  99. package/docs/components/drawer.html +515 -0
  100. package/docs/components/dropdown.html +479 -0
  101. package/docs/components/file-input.html +591 -0
  102. package/docs/components/footer.html +301 -0
  103. package/docs/components/gallery.html +504 -0
  104. package/docs/components/hero.html +264 -0
  105. package/docs/components/index.css +840 -0
  106. package/docs/components/index.html +735 -0
  107. package/docs/components/indicator.html +342 -0
  108. package/docs/components/input.html +644 -0
  109. package/docs/components/join.html +285 -0
  110. package/docs/components/kbd.html +322 -0
  111. package/docs/components/loading.html +521 -0
  112. package/docs/components/menu.html +461 -0
  113. package/docs/components/modal.html +639 -0
  114. package/docs/components/navbar.html +321 -0
  115. package/docs/components/pagination.html +279 -0
  116. package/docs/components/progress.html +514 -0
  117. package/docs/components/radial-progress.html +434 -0
  118. package/docs/components/radio.html +655 -0
  119. package/docs/components/range.html +611 -0
  120. package/docs/components/rating.html +642 -0
  121. package/docs/components/select.html +696 -0
  122. package/docs/components/sidebar-setup.js +93 -0
  123. package/docs/components/skeleton.html +447 -0
  124. package/docs/components/spinner.html +68 -0
  125. package/docs/components/stats.html +486 -0
  126. package/docs/components/steps.html +356 -0
  127. package/docs/components/swap.html +517 -0
  128. package/docs/components/switch.html +68 -0
  129. package/docs/components/table.html +668 -0
  130. package/docs/components/tabs.html +506 -0
  131. package/docs/components/text-input.html +68 -0
  132. package/docs/components/textarea.html +603 -0
  133. package/docs/components/timeline.html +487 -0
  134. package/docs/components/toast.html +474 -0
  135. package/docs/components/toggle.html +564 -0
  136. package/docs/components/tooltip.html +423 -0
  137. package/docs/examples/getting-started-example.html +40 -0
  138. package/docs/examples/index.html +93 -0
  139. package/docs/getting-started/index.html +739 -0
  140. package/docs/getting-started/reviews.html +23 -0
  141. package/docs/getting-started/reviews.odom +108 -0
  142. package/docs/getting-started/reviews.vdom +84 -0
  143. package/docs/index.html +134 -0
  144. package/docs/playground.html +416 -0
  145. package/docs/router.html +285 -0
  146. package/docs/styles/index.html +190 -0
  147. package/functions/_middleware.js +32 -0
  148. package/index.html +309 -0
  149. package/lightview-router.js +364 -0
  150. package/lightview-x.js +1577 -0
  151. package/lightview.js +658 -1109
  152. package/lightview.js.backup +793 -0
  153. package/middleware/locale.js +25 -0
  154. package/middleware/markdown.js +44 -0
  155. package/middleware/notFound.js +37 -0
  156. package/package.json +27 -41
  157. package/watch.js +92 -0
  158. package/wrangler.toml +12 -0
  159. package/.idea/lightview.iml +0 -12
  160. package/.idea/modules.xml +0 -8
  161. package/.idea/vcs.xml +0 -6
  162. package/LICENSE +0 -21
  163. package/codepen-no-tabs-embed.css +0 -2
  164. package/components/chart/chart.html +0 -17
  165. package/components/chart/example.html +0 -32
  166. package/components/chart.html +0 -83
  167. package/components/components.js +0 -113
  168. package/components/gantt/example.html +0 -22
  169. package/components/gantt/gantt.html +0 -42
  170. package/components/gauge/example.html +0 -28
  171. package/components/gauge/gauge.html +0 -20
  172. package/components/gauge.html +0 -60
  173. package/components/orgchart/example.html +0 -25
  174. package/components/orgchart/orgchart.html +0 -41
  175. package/components/repl/code-editor.html +0 -64
  176. package/components/repl/editor.html +0 -37
  177. package/components/repl/editorjs-inline-tool/index.js +0 -3
  178. package/components/repl/editorjs-inline-tool/inline-tools.js +0 -28
  179. package/components/repl/editorjs-inline-tool/tool.js +0 -175
  180. package/components/repl/repl-with-wysiwyg.html +0 -355
  181. package/components/repl/repl.html +0 -345
  182. package/components/repl/sup.js +0 -44
  183. package/components/repl/wysiwyg-repl.html +0 -258
  184. package/components/timeline/example.html +0 -33
  185. package/components/timeline/timeline.html +0 -44
  186. package/components/timeline.html +0 -81
  187. package/examples/anchor.html +0 -11
  188. package/examples/chart.html +0 -34
  189. package/examples/counter.html +0 -26
  190. package/examples/counter.test.mjs +0 -47
  191. package/examples/counter2.html +0 -26
  192. package/examples/directives.html +0 -79
  193. package/examples/foreign.html +0 -50
  194. package/examples/forgeinform.html +0 -98
  195. package/examples/form.html +0 -61
  196. package/examples/gauge.html +0 -18
  197. package/examples/invalid-template-literals.html +0 -44
  198. package/examples/medium/remote.html +0 -60
  199. package/examples/message.html +0 -18
  200. package/examples/nested.html +0 -11
  201. package/examples/object-bound-form.html +0 -34
  202. package/examples/remote-server.js +0 -51
  203. package/examples/remote.html +0 -34
  204. package/examples/remote.json +0 -1
  205. package/examples/scratch.html +0 -69
  206. package/examples/sensors/index.html +0 -30
  207. package/examples/sensors/sensor-server.js +0 -30
  208. package/examples/shared.html +0 -41
  209. package/examples/template.html +0 -33
  210. package/examples/timeline.html +0 -21
  211. package/examples/todo.html +0 -38
  212. package/examples/top.html +0 -10
  213. package/examples/types.html +0 -94
  214. package/examples/xor.html +0 -62
  215. package/jest-puppeteer.config.js +0 -5
  216. package/jest.config.json +0 -12
  217. package/sites/client.html +0 -48
  218. package/sites/index.html +0 -247
  219. package/test/basic.html +0 -93
  220. package/test/basic.test.mjs +0 -315
  221. package/test/extended.html +0 -29
  222. package/test/extended.test.mjs +0 -448
  223. package/types.js +0 -534
  224. package/unsplash.key +0 -1
package/components/timeline/example.html DELETED
@@ -1,33 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Lightview:Component:Timeline:Example</title>
5
- <link href="./timeline.html" rel="module">
6
- <script src="../../lightview.js"></script>
7
- </head>
8
- <body>
9
- <l-timeline title="Presidents">
10
- {
11
- options: { showRowLabels: false },
12
- rows: [
13
- [ '1', 'George Washington','1789-03-30', '1797-2-04' ],
14
- [ '2', 'John Adams', '1797-02-04', '1801-02-04' ],
15
- [ '3', 'Thomas Jefferson', '1801-02-04', '1809-02-04']
16
- ]
17
- }
18
- </l-timeline>
19
- <l-timeline title="Presidents and Vice Presidents">
20
- {
21
- options: { },
22
- rows: [
23
- [ 'President', 'George Washington','1789-03-30', '1797-2-04' ],
24
- [ 'President', 'John Adams', '1797-02-04', '1801-02-04' ],
25
- [ 'President', 'Thomas Jefferson', '1801-02-04', '1809-02-04'],
26
- [ 'Vice President', 'John Adams','1789-03-21', '1797-02-04'],
27
- [ 'Vice President', 'Thomas Jefferson','1797-02-04', '1801-02-04'],
28
- [ 'Vice President', 'Aaron Burr','1801-02-04', '1805-02-04']
29
- ]
30
- }
31
- </l-timeline>
32
- </body>
33
- </html>
package/components/timeline/timeline.html DELETED
@@ -1,44 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Lightview:Component:Timeline</title>
5
- </head>
6
- <body>
7
- <div id="target"></div>
8
- <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
9
- <script id="lightview">
10
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
11
- const {chart} = await import(new URL("../components.js", window.location.href).href);
12
- chart(self, {
13
- packages: ["timeline"],
14
- columns: [
15
- {id: "RowLabel", type: "string"},
16
- {id: "BarLabel", type: "string"},
17
- {id: "Start", type: "date"},
18
- {id: "End", type: "date"}
19
- ],
20
- type: "Timeline",
21
- optionsTransform(options) {
22
- options = {...options};
23
- if ("showRowLabels" in options) {
24
- options.timeline = {showRowLabels: options.showRowLabels};
25
- }
26
- return options;
27
- },
28
- rowTransform(row, i) {
29
- return row.map((item, index) => {
30
- if (item && (index === 2 || index === 3)) {
31
- const date = new Date(item);
32
- if (!date || typeof (date) !== "object" || !(date instanceof Date)) {
33
- throw new TypeError(`row:${i} col:${index} is not a date`);
34
- }
35
- return date;
36
- }
37
- return item;
38
- })
39
- }
40
- });
41
- }
42
- </script>
43
- </body>
44
- </html>
package/components/timeline.html DELETED
@@ -1,81 +0,0 @@
1
- <html>
2
- <head>
3
- <meta charset="UTF-8">
4
- <title>Lightview:Timeline</title>
5
- </head>
6
- <body hidden>
7
- <div id="target"></div>
8
- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
9
- <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
10
- <script type="lightview/module">
11
- debugger;
12
- let table = JSON5.parse(self.firstChild.textContent.trim()),
13
- chart,
14
- datatable,
15
- options = {};
16
- const target = self.getElementById("target"),
17
- resizeObserver = new ResizeObserver(entries => {
18
- for (let entry of entries) {
19
- if(entry.contentBoxSize) {
20
- // Firefox implements `contentBoxSize` as a single content rect, rather than an array
21
- const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
22
- options.width = contentBoxSize.inlineSize;
23
- } else {
24
- options.width = entry.contentRect.width;
25
- }
26
- }
27
- chart.draw(datatable, options);
28
- }),
29
- callback = (textNode, oldValue, newValue) => {
30
- datatable = new google.visualization.DataTable();
31
- try {
32
- table = table || JSON5.parse(newValue.trim());
33
- datatable = google.visualization.arrayToDataTable(table);
34
- chart.draw(datatable, options);
35
- table = null;
36
- } catch (e) {
37
- target.innerText = e + newValue;
38
- }
39
- };
40
- self.firstChild.innerText = "Loading ...";
41
- self.variables({type: "string", title: "string", style: "string"}, {observed});
42
- if(style) target.setAttribute("style",style);
43
- self.addRow = (row) => {
44
- datatable.addRows([row]);
45
- chart.draw(datatable, options);
46
- };
47
- self.setValue = (row,col,value) => {
48
- if(datatable) {
49
- datatable.setValue(row,col,value);
50
- chart.draw(datatable, options);
51
- }
52
- };
53
- self.setOptions = (newOptions) => {
54
- Object.assign(options,newOptions);
55
- };
56
- self.init = () => {
57
- if(!options.title && title) options.title = title;
58
- chart = new google.visualization.Timeline(target);
59
- addEventListener("change",({target,value}) => {
60
- if(target === "title") {
61
- options.title = value;
62
- } else if(target === "style") {
63
- target.setAttribute("style",value);
64
- }
65
- chart.draw(datatable, options);
66
- });
67
-
68
- const node = self.firstChild;
69
- callback(node, node.textContent, node.textContent);
70
- // Will be used by the Lightview global observer
71
- node.characterDataMutationCallback = callback;
72
- // resized charts if window resizes
73
- resizeObserver.observe(target);
74
- };
75
- self.addEventListener("connected", ({target}) => {
76
- google.charts.load("current", {"packages": ["timeline"]});
77
- google.charts.setOnLoadCallback(self.init);
78
- });
79
- </script>
80
- </body>
81
- </html>
package/examples/anchor.html DELETED
@@ -1,11 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>Anchors</title>
5
- <script src="../lightview.js?as=x-body"></script>
6
- </head>
7
- <body>
8
- <p><a href="./counter.html" target="#mytarget" crossorigin="use-credentials">Show Counter</a></p>
9
- <div id="mytarget">To Be Replaced</div>
10
- </body>
11
- </html>
package/examples/chart.html DELETED
@@ -1,34 +0,0 @@
1
- <!DOCTYPE html>
2
- <head>
3
- <title>Chart</title>
4
- <link href="../components/chart/chart.html" rel="module">
5
- <script src="../lightview.js"></script>
6
- </head>
7
- <body>
8
- <l-chart id="myChart" type="PieChart" style="height:500px;" title="How Much Pizza I Ate Last Night" hidden l-unhide>
9
- {
10
- options: {
11
-
12
- },
13
- columns: [
14
- {label: "Topping", type: "string"},
15
- {label: "Slices", type: "number"}
16
- ],
17
- rows: [
18
- ["Mushrooms", 3],
19
- ["Onions", 1],
20
- ["Olives", 1],
21
- ["Zucchini", 1],
22
- ["Pepperoni", 2]
23
- ]
24
- }
25
- </l-chart>
26
- <script>
27
- const el = document.getElementById("myChart");
28
- el.addEventListener("mounted",() => {
29
- chart = el.chart;
30
- chart.addRow(["Anchovies",1]);
31
- });
32
- </script>
33
- </body>
34
- </html>
package/examples/counter.html DELETED
@@ -1,26 +0,0 @@
1
- <head>
2
- <title>Lightview:Examples:Counter</title>
3
- <script src="../lightview.js?as=x-body"></script>
4
- </head>
5
-
6
- <body>
7
- <p>
8
- <button l-on:click="${bump}">Click count:${count}</button>
9
- </p>
10
-
11
- <script id="lightview">
12
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
13
- self.variables({count: "number",}, {reactive, set: 0});
14
- self.bump = () => count++;
15
- }
16
- </script>
17
-
18
- <style>
19
- button {
20
- margin: 20px;
21
- background: gray
22
- }
23
- </style>
24
- </body>
25
-
26
- </html>
package/examples/counter.test.mjs DELETED
@@ -1,47 +0,0 @@
1
- import 'expect-puppeteer';
2
-
3
- describe('Lightview:Example:Counter', () => {
4
- beforeAll(async () => {
5
- await page.goto('http://localhost:8080/examples/counter.html');
6
- });
7
-
8
- test('should be titled "Lightview:Examples:Counter"', async () => {
9
- await expect(page.title()).resolves.toMatch("Lightview:Examples:Counter");
10
- });
11
-
12
- test('count should be a variable', async () => {
13
- const result = await page.evaluate(async () => {
14
- return document.body.getVariable("count");
15
- });
16
- expect(result).toBeDefined();
17
- const {name,type,value,reactive} = result;
18
- expect(name).toBe("count");
19
- expect(type).toBe("number");
20
- expect(value).toBe(0);
21
- expect(reactive).toBe(true);
22
- });
23
-
24
- test('bump should be called', async () => {
25
- const result = await page.evaluate(async () => {
26
- document.body.bump();
27
- return document.body.getVariableValue("count");
28
- });
29
- expect(result).toBe(1);
30
- });
31
-
32
- test('click should bump', async () => {
33
- const buttonHandle = await page.evaluateHandle('document.body.querySelector("button")');
34
- await buttonHandle.click();
35
- const result = await page.evaluate(async () => {
36
- return document.body.getVariableValue("count");
37
- });
38
- expect(result).toBe(2);
39
- });
40
-
41
- test("should be custom element", async() => {
42
- const result = await page.evaluate(async () => {
43
- return document.body.constructor.name;
44
- });
45
- expect(result).toBe("CustomElement");
46
- })
47
- })
package/examples/counter2.html DELETED
@@ -1,26 +0,0 @@
1
- <head>
2
- <title>Lightview:Examples:Counter</title>
3
- <script src="../lightview.js?as=x-body"></script>
4
- </head>
5
-
6
- <body>
7
- <p>
8
- <button l-on:click="${bump}">Click count:${count}</button>
9
- </p>
10
-
11
- <script id="lightview">
12
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
13
- this.variables({count: "number",}, {reactive,set:0});
14
- this.bump = () => count++;
15
- }
16
- </script>
17
-
18
- <style>
19
- button {
20
- margin: 20px;
21
- background: gray
22
- }
23
- </style>
24
- </body>
25
-
26
- </html>
package/examples/directives.html DELETED
@@ -1,79 +0,0 @@
1
- <!DOCTYPE html>
2
-
3
- <head>
4
- <title>Directives</title>
5
- <script src="../lightview.js?as=x-body"></script>
6
- </head>
7
-
8
- <body>
9
-
10
- <div style="margin:20px">
11
- <p>
12
- Show: <input type="checkbox" value="${on}">
13
- <div l-if="${on}">
14
- Now you've done it. You've exposed me.
15
- </div>
16
- </p>
17
- <p>
18
-
19
- <p>
20
- How would you like that burger?<br>
21
- <select value="${options}" multiple>
22
- <option>lettuce</option>
23
- <option>tomato</option>
24
- <option>cheese</option>
25
- </select>
26
- </p>
27
-
28
-
29
- For (defaults to each)
30
- <ul l-for:each="${options}">
31
- <li>${index}:${item}</li>
32
- </ul>
33
- For Each
34
- <ul l-for:each="${options}">
35
- <li>${index}:${item}</li>
36
- </ul>
37
- For Values
38
- <ul l-for:values="${options}">
39
- <li>${item}:${index}</li>
40
- </ul>
41
- For Keys
42
- <ul l-for:keys="${options}">
43
- <li>${item}</li>
44
- </ul>
45
- For Entries
46
- <ul l-for:entries="${options}">
47
- <li>${item[0]}:${item[1]}</li>
48
- </ul>
49
-
50
- Variable Values
51
- <p id="variables"></p>
52
- </div>
53
- <script id="lightview">
54
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
55
- self.variables({on: "boolean", options: Array}, {reactive});
56
-
57
- on = true;
58
- options = ["lettuce"];
59
-
60
- // demo instrumentation
61
- const variableValues = () => {
62
- const el = self.getElementById("variables");
63
- while (el.lastElementChild) el.lastElementChild.remove();
64
- self.getVariableNames().forEach((name) => {
65
- const line = document.createElement("div");
66
- line.innerText = `${name} = ${JSON.stringify(self.getVariableValue(name))}`;
67
- el.appendChild(line);
68
- });
69
- };
70
- variableValues();
71
- addEventListener("change", () => {
72
- variableValues()
73
- });
74
- }
75
-
76
- </script>
77
- </body>
78
-
79
- </html>
package/examples/foreign.html DELETED
@@ -1,50 +0,0 @@
1
- <!DOCTYPE html>
2
-
3
- <head>
4
- <title>Remote</title>
5
- <link type="module" src="">
6
- <meta name="l-enableFrames">
7
- <script src="../lightview.js"></script>
8
- </head>
9
-
10
- <body>
11
- <p>
12
- The component below is loaded from an alternate domain and running in a child iframe.
13
- The logging console is below the component in this frame.
14
- </p>
15
- <p>New Order:<span id="orderclip"></span></p>
16
- <iframe id="myframe"
17
- class="l-remote" style="border-width:2px;border-style:dashed;"
18
- src="https://lightview.dev/examples/foreignform.html?id=myframe"></iframe>
19
- <div id="console" style="max-height:250px;scroll:auto"></div>
20
- <script>
21
- const iframe = document.getElementById("myframe");
22
- iframe.addEventListener("DOMContentLoaded",(event) => {
23
- // modify the line below, or remove this event listener
24
- // based on the needs of your application
25
- console.log(event);
26
- });
27
- iframe.addEventListener("message",({detail}) => {
28
- // modify the lines below, or remove this event listener
29
- // based on the needs of your application
30
- const orderclip = document.getElementById("orderclip");
31
- orderclip.innerText = JSON.stringify(detail);
32
- });
33
-
34
- iframe.addEventListener("attribute.changed",(event) => {
35
- const {target,detail} = event,
36
- {attributeName,value,oldValue} = detail;
37
- event.stopImmediatePropagation();
38
- if(target.getAttribute(attributeName)!==oldValue) {
39
- // modify the lines below, or remove this event listener
40
- // based on the needs of your application
41
- const console = document.getElementById("console"),
42
- line = document.createElement("div");
43
- line.innerText = JSON.stringify(detail);
44
- console.appendChild(line);
45
- }
46
- });
47
- </script>
48
- </body>
49
-
50
- </html>
package/examples/forgeinform.html DELETED
@@ -1,98 +0,0 @@
1
- <!DOCTYPE html>
2
-
3
- <head>
4
- <title>Form</title>
5
- <script src="../lightview.js?as=x-body"></script>
6
- <script>Lightview.whenFramed(({as,unhide,importAnchors,isolated,enableFrames}) => {
7
- Lightview.bodyAsComponent({as,unhide,importAnchors,isolated,enableFrames});
8
- })</script>
9
- </head>
10
-
11
- <body style="height:fit-content;width:fit-content;display:flex;flex-direction:column;max-height:100%;overflow:auto;">
12
- <div style="margin:20px">
13
- <p>
14
- <input type="text" value="${color}">
15
- <input type="checkbox" value="${checked}">
16
- <input type="radio" name="color" value="red">
17
- <input type="radio" name="color" value="yellow">
18
- <input type="radio" name="color" value="green">
19
- <select value="${color}">
20
- <option value="red">red</option>
21
- <option>yellow</option>
22
- <option> green </option>
23
- </select>
24
- <div>Hamburger options:</div>
25
- <select value="${hamburger}" multiple>
26
- <option value="lettuce">lettuce</option>
27
- <option>tomato</option>
28
- <option>cheese</option>
29
- </select>
30
- <br><button l-on:click="${placeOrder}">Place Order</button>
31
- </p>
32
- Expose: <input type="checkbox" value="${checked}">
33
- <p l-if="${checked}">
34
- Now you've done it. You've exposed me.
35
- </p>
36
- <ul l-for="${hamburger}">
37
- <li>${item}</li>
38
- </ul>
39
- <ul l-for:entries="${hamburger}">
40
- <li>${item[0]}:${item[1]}</li>
41
- </ul>
42
- <ul l-for:values="${hamburger}">
43
- <li>${item}</li>
44
- </ul>
45
- <p id="variables">
46
-
47
- </p>
48
- </div>
49
- <script id="lightview">
50
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
51
- const orders = [];
52
- self.variables({
53
- checked: "boolean"
54
- }, {
55
- reactive
56
- });
57
- self.variables({
58
- color: "string",
59
- hamburger: Array
60
- }, {
61
- reactive, exported
62
- });
63
- self.addEventListener("connected", () => {
64
- color = "green";
65
- checked = true;
66
- hamburger = ["lettuce"];
67
- });
68
- self.placeOrder = () => {
69
- orders.push(hamburger);
70
- message = {hamburger};
71
- };
72
- // demo instrumentation
73
- const variableValues = () => {
74
- const el = self.getElementById("variables");
75
- while (el.lastElementChild) el.lastElementChild.remove();
76
- self.getVariableNames().forEach((name) => {
77
- const line = document.createElement("div");
78
- line.innerText = `${name} = ${JSON.stringify(self.getVariableValue(name))}`;
79
- el.appendChild(line);
80
- });
81
- const line = document.createElement("div");
82
- line.innerText = "Previous Orders";
83
- el.appendChild(line);
84
- orders.forEach((order) => {
85
- const line = document.createElement("div");
86
- line.innerText = JSON.stringify(order);
87
- el.appendChild(line);
88
- });
89
- };
90
- variableValues();
91
- addEventListener("change", () => {
92
- variableValues()
93
- });
94
- }
95
- </script>
96
- </body>
97
-
98
- </html>
package/examples/form.html DELETED
@@ -1,61 +0,0 @@
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
- <div style="margin:20px;padding:5px;border:1px;border-style:solid;border-color:${color}">
11
- <p>
12
- <input type="text" value="${color}">
13
- <input type="radio" name="color" value="red">
14
- <input type="radio" name="color" value="yellow">
15
- <input type="radio" name="color" value="green">
16
- <select value="${color}">
17
- <option value="red">red</option>
18
- <option>yellow</option>
19
- <option> green</option>
20
- </select>
21
- <div>Hamburger options:</div>
22
- <select value="${hamburger}" multiple>
23
- <option value="lettuce">lettuce</option>
24
- <option value="tomato">tomato</option>
25
- <option>cheese</option>
26
- </select>
27
- </p>
28
- Expose: <input type="checkbox" value="${checked}">
29
- <p l-if="${checked}">
30
- Now you've done it. You've exposed me.
31
- </p>
32
- <p id="variables">
33
-
34
- </p>
35
- </div>
36
- <script id="lightview">
37
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
38
- self.variables({color: "string"}, {reactive});
39
- addEventListener("change", () => {
40
- variableValues()
41
- });
42
- self.addEventListener("connected", () => {
43
- color = "yellow";
44
- checked = true;
45
- hamburger = ["cheese"];
46
- });
47
- // demo instrumentation
48
- const variableValues = () => {
49
- const el = self.getElementById("variables");
50
- while (el.lastElementChild) el.lastElementChild.remove();
51
- self.getVariableNames().forEach((name) => {
52
- const line = document.createElement("div");
53
- line.innerText = `${name} = ${JSON.stringify(self.getVariableValue(name))}`;
54
- el.appendChild(line);
55
- });
56
- };
57
- }
58
- </script>
59
- </body>
60
-
61
- </html>
package/examples/gauge.html DELETED
@@ -1,18 +0,0 @@
1
- <!DOCTYPE html>
2
- <head>
3
- <title>Chart</title>
4
- <link href="../components/gauge.html" rel="module">
5
- <script src="../lightview.js"></script>
6
- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
7
- <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
8
- </head>
9
- <body>
10
- <l-gauge id="myGauge" style="max-width:750px" type="Gauge" label="Laptop" value="50"></l-gauge>
11
- <script>
12
- const gauge = document.getElementById("myGauge");
13
- setInterval(function() {
14
- gauge.setValue(40 + Math.round(60 * Math.random()));
15
- }, 2500);
16
- </script>
17
- </body>
18
- </html>
package/examples/invalid-template-literals.html DELETED
@@ -1,44 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <title>Invalid Template Literals</title>
5
- <script src="../lightview.js?as=x-body"></script>
6
- </head>
7
- <body>
8
- <p>
9
- <button l-on:click="${bump}">Click count:${count}</button>
10
- </p>
11
- <div style="margin:20px">
12
- <p>
13
- ${"<h1>"+(test++)+"</h1>"}
14
- </p>
15
- <p>
16
- ${(while (test)<10 { test++}; test)}
17
- </p>
18
- <p>
19
- ${(() =>test)()}
20
- </p>
21
- <p>
22
- ${(() = >test)()}
23
- </p>
24
- <p>
25
- ${function(){return \${test}})()}
26
- </p>
27
- </div>
28
-
29
- <script id="lightview">
30
- (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
31
- self.variables({count: "number", test: "number"}, {reactive, set: 0});
32
- self.bump = () => count++;
33
- }
34
- </script>
35
-
36
- <style>
37
- button {
38
- margin: 20px;
39
- background: gray
40
- }
41
- </style>
42
- </body>
43
-
44
- </html>