lightview 1.8.2 → 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 (264) 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 +1330 -19
  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 +610 -15
  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 +485 -42
  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 +132 -42
  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 +659 -1200
  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/docs/CNAME +0 -1
  165. package/docs/api.html +0 -674
  166. package/docs/blank.html +0 -10
  167. package/docs/comparedto.html +0 -89
  168. package/docs/components/chart-repl.html +0 -69
  169. package/docs/components/components.js +0 -113
  170. package/docs/components/contents.html +0 -17
  171. package/docs/components/gantt-repl.html +0 -61
  172. package/docs/components/gantt.html +0 -42
  173. package/docs/components/gauge-repl.html +0 -66
  174. package/docs/components/gauge.html +0 -20
  175. package/docs/components/orgchart-repl.html +0 -64
  176. package/docs/components/orgchart.html +0 -41
  177. package/docs/components/repl-as-src.html +0 -17
  178. package/docs/components/repl-repl.html +0 -95
  179. package/docs/components/repl.html +0 -527
  180. package/docs/components/timeline-repl.html +0 -72
  181. package/docs/components.html +0 -14
  182. package/docs/css/highlightjs.min.css +0 -9
  183. package/docs/css/tutorial.css +0 -35
  184. package/docs/examples/anchor.html +0 -11
  185. package/docs/examples/chart.html +0 -34
  186. package/docs/examples/counter.html +0 -26
  187. package/docs/examples/counter.test.mjs +0 -47
  188. package/docs/examples/counter2.html +0 -26
  189. package/docs/examples/directives.html +0 -79
  190. package/docs/examples/foreign.html +0 -50
  191. package/docs/examples/forgeinform.html +0 -98
  192. package/docs/examples/form.html +0 -61
  193. package/docs/examples/gauge.html +0 -18
  194. package/docs/examples/invalid-template-literals.html +0 -44
  195. package/docs/examples/medium/remote.html +0 -60
  196. package/docs/examples/message.html +0 -18
  197. package/docs/examples/nested.html +0 -11
  198. package/docs/examples/object-bound-form.html +0 -34
  199. package/docs/examples/remote-server.js +0 -51
  200. package/docs/examples/remote.html +0 -34
  201. package/docs/examples/remote.json +0 -1
  202. package/docs/examples/scratch.html +0 -69
  203. package/docs/examples/sensors/index.html +0 -44
  204. package/docs/examples/sensors/sensor-server.js +0 -30
  205. package/docs/examples/shared.html +0 -41
  206. package/docs/examples/template.html +0 -33
  207. package/docs/examples/timeline.html +0 -21
  208. package/docs/examples/todo.html +0 -40
  209. package/docs/examples/top.html +0 -10
  210. package/docs/examples/types.html +0 -94
  211. package/docs/examples/xor.html +0 -62
  212. package/docs/examples.html +0 -25
  213. package/docs/javascript/codejar.min.js +0 -8
  214. package/docs/javascript/highlightjs.min.js +0 -1173
  215. package/docs/javascript/isomorphic-git.js +0 -9
  216. package/docs/javascript/json5.min.js +0 -1
  217. package/docs/javascript/lightning-fs.js +0 -1
  218. package/docs/javascript/lightview.js +0 -1285
  219. package/docs/javascript/marked.min.js +0 -6
  220. package/docs/javascript/peerjs.min.js +0 -70
  221. package/docs/javascript/turndown.js +0 -973
  222. package/docs/javascript/types.js +0 -606
  223. package/docs/javascript/utils.js +0 -45
  224. package/docs/lightview.html +0 -63
  225. package/docs/old_index.html +0 -965
  226. package/docs/old_index.md +0 -1132
  227. package/docs/slidein.html +0 -51
  228. package/docs/tutorial/0-getting-started.html +0 -67
  229. package/docs/tutorial/1-intro-to-variables.html +0 -103
  230. package/docs/tutorial/10-template-components.html +0 -80
  231. package/docs/tutorial/11-linked-components.html +0 -76
  232. package/docs/tutorial/12-imported-components.html +0 -67
  233. package/docs/tutorial/13-input-binding.html +0 -94
  234. package/docs/tutorial/14-automatic-variable-creation.html +0 -74
  235. package/docs/tutorial/15-form-binding.html +0 -110
  236. package/docs/tutorial/16-if-directive.html +0 -60
  237. package/docs/tutorial/17-loop-directives.html +0 -83
  238. package/docs/tutorial/18-sanitizing-and-escaping-input.html +0 -79
  239. package/docs/tutorial/2-imported-and-exported-variables.html +0 -80
  240. package/docs/tutorial/3-data-types.html +0 -89
  241. package/docs/tutorial/4-extended-data-types.html +0 -83
  242. package/docs/tutorial/5-extended-functional-types.html +0 -96
  243. package/docs/tutorial/5.1-extended-functional-types.html +0 -79
  244. package/docs/tutorial/5.2-extended-functional-types.html +0 -70
  245. package/docs/tutorial/6-conventional-javascript.html +0 -75
  246. package/docs/tutorial/7-monitoring-with-observers.html +0 -107
  247. package/docs/tutorial/8-event-listeners.html +0 -65
  248. package/docs/tutorial/9-intro-to-components.html +0 -91
  249. package/docs/tutorial/contents.html +0 -32
  250. package/docs/tutorial/my-component.html +0 -29
  251. package/docs/tutorial/remote-value.json +0 -4
  252. package/docs/websiterepl.html +0 -46
  253. package/jest-puppeteer.config.js +0 -5
  254. package/jest.config.json +0 -12
  255. package/lightview.min.js +0 -1
  256. package/lightview_good.js +0 -1267
  257. package/lightview_optimized.js +0 -1274
  258. package/repl_hold.html +0 -320
  259. package/test/basic.html +0 -104
  260. package/test/basic.test.mjs +0 -315
  261. package/test/extended.html +0 -29
  262. package/test/extended.test.mjs +0 -448
  263. package/types.js +0 -607
  264. package/unsplash.key +0 -1
package/docs/components/timeline-repl.html DELETED
@@ -1,72 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Components:Timeline</title>
6
- <link href="../css/tutorial.css" rel="stylesheet">
7
- <link href="../slidein.html" rel="module">
8
- <link href="repl.html" rel="module">
9
- <script src="../javascript/highlightjs.min.js"></script>
10
- <script src="../javascript/marked.min.js"></script>
11
- <script src="../javascript/utils.js"></script>
12
- </head>
13
- <body class="tutorial-body">
14
- <script src="../javascript/lightview.js"></script>
15
- <div class="tutorial-instructions">
16
- <l-slidein src="./contents.html" class="toc"></l-slidein>
17
- <div class="markdown">
18
- ## Timeline
19
-
20
-
21
-
22
- </div>
23
- <button class="nav-previous"><a href="orgchart-repl.html" target="content">Previous</a></button>
24
- <button class="nav-next"><a href="gauge-repl.html" target="content">Next</a></button>
25
- </div>
26
- <div class="repl">
27
- <h2></h2>
28
- <l-repl id="repl" style="min-height:95vh;min-width:600px;" previewpinned path="$location" previewheight="400px">
29
- <div slot="headhtml"></div>
30
- <div slot="bodyhtml"></div>
31
- <div slot="script"></div>
32
- <template slot="src">
33
- <l-head>
34
- <link href="./timeline.html" rel="module">
35
- <script src="../javascript/lightview.js"></script>
36
- </l-head>
37
- <l-body>
38
- <l-timeline title="Presidents">
39
- {
40
- options: { showRowLabels: false },
41
- rows: [
42
- [ '1', 'George Washington','1789-03-30', '1797-2-04' ],
43
- [ '2', 'John Adams', '1797-02-04', '1801-02-04' ],
44
- [ '3', 'Thomas Jefferson', '1801-02-04', '1809-02-04']
45
- ]
46
- }
47
- </l-timeline>
48
- <l-timeline title="Presidents and Vice Presidents">
49
- {
50
- options: { },
51
- rows: [
52
- [ 'President', 'George Washington','1789-03-30', '1797-2-04' ],
53
- [ 'President', 'John Adams', '1797-02-04', '1801-02-04' ],
54
- [ 'President', 'Thomas Jefferson', '1801-02-04', '1809-02-04'],
55
- [ 'Vice President', 'John Adams','1789-03-21', '1797-02-04'],
56
- [ 'Vice President', 'Thomas Jefferson','1797-02-04', '1801-02-04'],
57
- [ 'Vice President', 'Aaron Burr','1801-02-04', '1805-02-04']
58
- ]
59
- }
60
- </l-timeline>
61
- </l-body>
62
- <script>
63
-
64
- </script>
65
- </template>
66
- </l-repl>
67
- </div>
68
- <script>
69
- processMarkdown();
70
- </script>
71
- </body>
72
- </html>
package/docs/components.html DELETED
@@ -1,14 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview: Components</title>
6
- </head>
7
- <body>
8
- <h2>Chart Components</h2>
9
- <ul>
10
- <li><a href="./components/chart/repl.html">Bar, Pie, Column</a></li>
11
- <li><a href="./components/gantt/example.html">Gannt</a></li>
12
- </ul>
13
- </body>
14
- </html>
package/docs/css/highlightjs.min.css DELETED
@@ -1,9 +0,0 @@
1
- /*!
2
- Theme: Default
3
- Description: Original highlight.js style
4
- Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
5
- Maintainer: @highlightjs/core-team
6
- Website: https://highlightjs.org/
7
- License: see project LICENSE
8
- Touched: 2021
9
- */pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:#695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
package/docs/css/tutorial.css DELETED
@@ -1,35 +0,0 @@
1
- .toc {
2
- position:fixed;
3
- background:white;
4
- overflow-y:hidden;
5
- overflow-x:hidden;
6
- border:1px solid;
7
- margin-right:5px;
8
- margin-left: 0px;
9
- height:100%;
10
- min-width:10px;
11
- max-width:250px;
12
- top:0px;
13
- bottom:0px;
14
- }
15
- .markdown {
16
- margin-left:20px
17
- }
18
- .tutorial-body {
19
- display:flex;
20
- margin: 0px;
21
- overflow: auto;
22
- }
23
- .tutorial-instructions {
24
- margin-right:10px;
25
- min-width: 500px
26
- }
27
-
28
- .nav-previous {
29
- float:left;
30
- margin-left:20px
31
- }
32
-
33
- .nav-next {
34
- float:right;
35
- }
package/docs/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/docs/examples/chart.html DELETED
@@ -1,34 +0,0 @@
1
- <!DOCTYPE html>
2
- <head>
3
- <title>Chart</title>
4
- <link href="../components/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/docs/examples/counter.html DELETED
@@ -1,26 +0,0 @@
1
- <head>
2
- <title>Lightview:Examples:Counter</title>
3
- <script src="../../lightview.js?as=x-body" type="application/javascript"></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/docs/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/docs/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/docs/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/docs/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/docs/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/docs/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/docs/examples/gauge.html DELETED
@@ -1,18 +0,0 @@
1
- <!DOCTYPE html>
2
- <head>
3
- <title>Chart</title>
4
- <link href="../components/gauge-repl.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/docs/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>