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/sites/client.html DELETED
@@ -1,48 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Sites:Client</title>
6
- <template id="template"></template>
7
- <script src="../lightview.js"></script>
8
- <script src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js"></script>
9
- <script>
10
- const template = document.getElementById("template"),
11
- client = new Peer("anywhichway3",{debug:3});
12
- client.on("open",(id) => {
13
- console.log(id);
14
- setTimeout(()=> document.body.innerHTML+=id);
15
- const server = client.connect("anywhichway1");
16
- server.on("open",() => {
17
- server.send("Hi from " + id);
18
- setTimeout(() => {
19
- server.send("Hi from " + id);
20
- },5000);
21
- });
22
- });
23
- client.on("connection",(conn) => {
24
- //conn.on("open",() => {
25
- // conn.send("Client does not accept inbound connections")
26
- // });
27
- conn.on("data",(data) => {
28
- console.log(data);
29
- template.innerHTML = data;
30
- setTimeout(()=> document.body.innerHTML=data);
31
- const component = window.customElements.get("x-body");
32
- if(component) component.setTemplateNode(template)
33
- else Lightview.createComponent("x-body",template);
34
- const body = document.createElement("x-body");
35
- document.body.parentElement.replaceChild(body, document.body);
36
- Object.defineProperty(document, "body", {
37
- enumerable: true, configurable: true, get() {
38
- return body;
39
- }
40
- });
41
- })
42
- });
43
- </script>
44
- </head>
45
- <body>
46
-
47
- </body>
48
- </html>
package/sites/index.html DELETED
@@ -1,247 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Lightview:Sites</title>
6
- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
7
- <script src="https://unpkg.com/turndown/dist/turndown.js"></script>
8
- <script src="https://cdn.tiny.cloud/1/y2ts772rioh7s7bmlcosnef03zs6kpedu5ovw1sdfzslurej/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
9
- <script src="https://unpkg.com/@isomorphic-git/lightning-fs"></script>
10
- <script src="https://unpkg.com/isomorphic-git"></script>
11
- <script src="https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js"></script>
12
- <script type="module">
13
- const fs = new LightningFS('my-app');
14
- const files = await git.listFiles({ fs, dir: '/' });
15
- console.log(files);
16
- window.fs = fs.promises;
17
- </script>
18
- <script>
19
- var server = new Peer("anywhichway1");
20
- // on open will be launch when you successfully connect to PeerServer
21
- server.on('open', (id) => {
22
- console.log(id);
23
- });
24
- server.on("connection",(conn) => {
25
- conn.on('data', async (data) => {
26
- console.log('Received', data);
27
- let content = await fs.readFile("/test.html",{encoding:"utf8"});
28
- const client = server.connect(conn.peer);
29
- client.on("open",() => {
30
- content += `<p>${new Date().toISOString()}</p>`
31
- client.send(content);
32
- });
33
- });
34
- //const client = server.connect(conn.peer);
35
- })
36
- </script>
37
- <script src="../lightview.js?as=x-body"></script>
38
- </head>
39
- <body style="display:flex;flex-direction:row;min-height:98vh;margin: 10px">
40
- <div style="width:200px;min-height:100%;border:1px solid;padding-left:10px;padding-bottom:10px">
41
- <div style="width:100%;"><label for="hamburger" style="float:left" l-on:click="${onTabClick}">hamburger</label><br></br>Files</div>
42
- <div id="files"></div>
43
- </div>
44
- <div id="content" style="flex:auto;min-height:100%;border:1px solid;padding:10px">
45
- <div style="display:flex;flex-direction:column;min-height:100%">
46
- <div id="tabs" style="flex-grow:0;width:100%;border:1px;padding-bottom:5px;display:none">
47
- <label for="markdown" l-on:click="${onTabClick}">Markdown</label>
48
- <label for="html" l-on:click="${onTabClick}">HTML</label>
49
- <label for="css" l-on:click="${onTabClick}">Style</label>
50
- <label for="script" l-on:click="${onTabClick}">Script</label>
51
- <label for="head" l-on:click="${onTabClick}">Head</label>
52
- <label for="preview" l-on:click="${onTabClick}">Preview</label>
53
- </div>
54
- <textarea id="markdown" style="flex-grow:1;padding-right:2px;;display:none">${bodyMarkdown}</textarea>
55
- <textarea id="html" style="flex-grow:1;padding-right:2px;display:none">${bodyHTML}</textarea>
56
- <textarea id="css" style="flex-grow:1;display:none">${cssText}</textarea>
57
- <textarea id="script" style="flex-grow:1;display:none">${scriptText}</textarea>
58
- <textarea id="head" style="flex-grow:1;display:none">${headText}</textarea>
59
- <div id="preview" style="flex-grow:1;display:none"></div>
60
- <div id="hamburger" style="flex-grow:1;display:none">options</div>
61
- <div id="wysiwyg" style="flex-grow:1;width:100%;border:1px solid">
62
- </div>
63
- </div>
64
- </div>
65
- <style id="style"></style>
66
- <script type="lightview/module">
67
- const turndownService = new TurndownService({headingStyle:"atx",codeBlockStyle:"fenced",emDelimiter:"*"}),
68
- fs = new LightningFS('my-app').promises;
69
- turndownService.keep(() => true);
70
-
71
- const {html,css,script} = await import("../types.js");
72
- self.variables({
73
- onTabClick:"function"
74
- });
75
- self.variables({
76
- bodyMarkdown:html,
77
- bodyHTML:html,
78
- cssText:css,
79
- scriptText:script,
80
- headHTML:html
81
- },{reactive});
82
-
83
- let fragment;
84
- try {
85
- const fullHTML = await fs.readFile("/test.html",{encoding:"utf8"}),
86
- parser = new DOMParser();
87
- fragment = parser.parseFromString(fullHTML||"","text/html");
88
- } catch(e) {
89
-
90
- };
91
-
92
- const body_el = fragment?.body,
93
- style_el = fragment?.querySelector("style"),
94
- script_el = fragment?.querySelector("script");
95
- if(style_el) style_el.remove();
96
- if(script_el) script_el.remove();
97
-
98
- bodyHTML = body_el?.innerHTML || "";
99
- bodyMarkdown = "";
100
- cssText = style_el?.innerHTML || "";
101
- scriptText = script_el?.innerHTML || "",
102
- headHTML = fragment?.head.innerHTML || "";
103
-
104
- const tabs = [...self.querySelectorAll("label[for]")]
105
- .map((label) => {
106
- const id = label.getAttribute("for");
107
- return [id,self.getElementById(id),label];
108
- });
109
-
110
- onTabClick = (event) => {
111
- const targetid = event.target.getAttribute("for");
112
- tabs.forEach(([id,el,label]) => {
113
- if(id===targetid) {
114
- el.style.display = "unset";
115
- label.style.borderBottom = "solid";
116
- } else {
117
- el.style.display = "none";
118
- label.style.borderBottom = "none";
119
- }
120
- });
121
- if(targetid==="preview") doPreview();
122
- };
123
-
124
- const doPreview = () => {
125
- const template = document.createElement("template");
126
- template.innerHTML = "<style>" + cssText + "</style>" + htmlEl.value + '<script type="lightview/module">' + scriptText + "<" + "/script>";
127
- const component = window.customElements.get("x-preview");
128
- if(component) { component.setTemplateNode(template); }
129
- else { Lightview.createComponent("x-preview",template); }
130
- previewEl.innerHTML = "<x-preview></x-preview>";
131
- fs.writeFile("/test.html",template.innerHTML,{encoding:"utf8"},()=>{});
132
- };
133
-
134
- const wysywigEl = self.getElementById("wysiwyg"),
135
- markdownEl = self.getElementById("markdown"),
136
- htmlEl = self.getElementById("html"),
137
- tabsEl = self.getElementById("tabs"),
138
- styleEl = self.getElementById("style"),
139
- previewEl = self.getElementById("preview");
140
-
141
- let prevtext; // prevents indirect recursion
142
- observe(() => {
143
- const text = turndownService.turndown(bodyHTML).trim();
144
- if(text && text!==prevtext) {
145
- bodyMarkdown = markdownEl.innerHTML = prevtext = text;
146
- }
147
- });
148
-
149
- let prevhtml; // prevents indirect recursion
150
- observe(() => {
151
- const html = marked.parse(bodyMarkdown).trim();
152
- if(html && html!==prevhtml) {
153
- bodyHTML = htmlEl.innerText = prevhtml = html;
154
- }
155
- });
156
-
157
- observe(() => {
158
- const dummy = cssText;
159
- if(tinymce.activeEditor) {
160
- tinymce.activeEditor.destroy();
161
- initMCE();
162
- }
163
- });
164
-
165
- let advEdit = false;
166
- const toggleAdvEdit = () => {
167
- advEdit = !advEdit;
168
- if(advEdit) {
169
- tabsEl.style.display = "unset";
170
- } else {
171
- tabsEl.style.display = "none";
172
- }
173
- tabs.forEach(([_,el,label]) => {
174
- if(advEdit && el===markdownEl) {
175
- el.style.display = "unset";
176
- label.style.borderBottom = "solid";
177
- return;
178
- }
179
- el.style.display = "none";
180
- label.style.borderBottom = "none";
181
- });
182
- initMCE();
183
- };
184
-
185
- const initMCE = () => {
186
- tinymce.init({
187
- target: wysywigEl,
188
- content_style: cssText,
189
- setup: (editor) => {
190
- editor.ui.registry.addButton('advancedEdit', {
191
- text: 'AdvEdit',
192
- onAction: () => {
193
- editor.destroy();
194
- toggleAdvEdit();
195
- }
196
- });
197
- editor.on("init",() => {
198
- observe(()=> {
199
- const html = editor.getContent();
200
- if(html !== bodyHTML) {
201
- editor.setContent(bodyHTML);
202
- }
203
- });
204
- });
205
- ["input","FormatApply","FormatRemove"]
206
- .forEach((event) => {
207
- editor.on(event,() => {
208
- const html = editor.getContent();
209
- if(!bodyHTML || (bodyHTML !== html)) {
210
- bodyHTML = htmlEl.innerText = html;
211
- }
212
- });
213
- });
214
- },
215
- plugins: "a11ychecker advcode casechange export formatpainter image editimage linkchecker autolink lists checklist media mediaembed pageembed powerpaste searchreplace table advtable tableofcontents tinycomments tinymcespellchecker",
216
- toolbar: "undo redo | addcomment showcomments | h1 h2 h3 h4 formatselect casechange bullist numlist checklist | advancedEdit",
217
- toolbar_mode: "floating",
218
- tinycomments_mode: "embedded",
219
- tinycomments_author: "Author name",
220
- removed_menuitems: 'fontsizes, fontformats, forecolor, backcolor, lineheight, inline, inserttable code undo redo',
221
- style_formats: [
222
- { title: 'Headings', items: [
223
- { title: 'Heading 1', format: 'h1' },
224
- { title: 'Heading 2', format: 'h2' },
225
- { title: 'Heading 3', format: 'h3' },
226
- { title: 'Heading 4', format: 'h4' },
227
- { title: 'Heading 5', format: 'h5' },
228
- { title: 'Heading 6', format: 'h6' }
229
- ]
230
- }
231
- ],
232
- statusbar: false,
233
- menu: {
234
- format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | codeformat blockformats align | removeformat'}
235
- }
236
- });
237
- };
238
-
239
- self.addEventListener("connected",() => {
240
- initMCE();
241
- });
242
-
243
- // format: remove fonts, line height, text color, background color formats.inline, formats.block.div and formats.blocks.pre, block.pre
244
- // view: remove source code
245
- </script>
246
- </body>
247
- </html>
package/test/basic.html DELETED
@@ -1,93 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Basic</title>
6
- <template id="x-test" name="joe" open="true" count=1 children='["mary"]' l-on:click="${bump}">
7
-
8
- <input id="idatetime" type="datetime" value="${idatetime}">
9
-
10
- <span id="children">${children}</span>
11
-
12
- <span id="name">${name}</span>
13
- <span id="open">${open}</span>
14
- <span id="count">${count}</span>
15
-
16
- <span id="color">${color}</span>
17
- <span id="checked">${checked}</span>
18
- <span id="age">${age}</span>
19
- <span id="hamburger">${hamburger}</span>
20
-
21
- <input id="iuntyped" value="${iuntyped}">
22
- <input id="itext" type="text" value="${itext}">
23
- <input id="itel" type="tel" value="${itel}">
24
- <input id="iemail" type="email" value="${iemail}">
25
- <input id="iurl" type="url" value="${iurl}">
26
- <input id="iradio" type="radio" name="iradio" value="test">
27
- <input id="isearch" type="search" value="${isearch}">
28
-
29
- <input id="icolor" type="color" value="${icolor}">
30
- <input id="ipassword" type="password" value="${ipassword}">
31
-
32
- <input id="inumber" type="number" value="${inumber}">
33
- <input id="irange" type="range" value="${irange}">
34
-
35
- <input id="icheckbox" type="checkbox" value="${icheckbox}">
36
- </template>
37
- <script>
38
- document.getElementById("x-test").mount = (self) => {
39
- // debugger;
40
- self.variables({name: "string", open: "boolean", count: "number", children: Array}, {imported, reactive});
41
- self.variables({color: "string", checked: "boolean", age: "number", hamburger: Array}, {
42
- exported,
43
- reactive
44
- });
45
- self.variables({counter: "number"}, {reactive});
46
- self.variables({myshare: "number"}, {shared});
47
-
48
- color = "green";
49
- checked = true;
50
- age = 27;
51
- hamburger = ["lettuce"];
52
- counter = 0;
53
- myshare = 1;
54
-
55
- self.addEventListener("connected", ({target}) => {
56
- iuntyped = "test";
57
- itext = "test";
58
- itel = "test";
59
- iemail = "test";
60
- iurl = "test";
61
- isearch = "test";
62
- iradio = "test";
63
- icolor = "test";
64
- ipassword = "test";
65
-
66
- inumber = 1;
67
- irange = 1;
68
- idatetime = new Date();
69
-
70
- icheckbox = true;
71
- target.testId = target.id;
72
- });
73
-
74
- self.bump = () => {
75
- counter++;
76
- };
77
-
78
- addEventListener("change", ({variableName, value}) => {
79
- self[variableName] = value;
80
- });
81
- }
82
- </script>
83
- <script src="../lightview2.js"></script>
84
- <script>
85
- Lightview.createComponent("x-test",document.getElementById("x-test"));
86
- </script>
87
- </head>
88
- <body>
89
- <p><x-test id="test"></x-test></p>
90
-
91
- <p><x-test id="test1"></x-test></p>
92
- </body>
93
- </html>