lightview 1.7.3-b → 1.8.1-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.
Files changed (45) hide show
  1. package/README.md +1 -1
  2. package/components/chart/chart.html +6 -4
  3. package/components/chart/example.html +1 -1
  4. package/components/chart.html +67 -65
  5. package/components/components.js +10 -2
  6. package/components/gantt/gantt.html +31 -29
  7. package/components/gauge/gauge.html +20 -0
  8. package/components/gauge.html +47 -44
  9. package/components/orgchart/example.html +1 -1
  10. package/components/orgchart/orgchart.html +30 -25
  11. package/components/repl/code-editor.html +64 -0
  12. package/components/repl/editor.html +37 -0
  13. package/components/repl/editorjs-inline-tool/index.js +3 -0
  14. package/components/repl/editorjs-inline-tool/inline-tools.js +28 -0
  15. package/components/repl/editorjs-inline-tool/tool.js +175 -0
  16. package/components/repl/repl-with-wysiwyg.html +355 -0
  17. package/components/repl/repl.html +345 -0
  18. package/components/repl/sup.js +44 -0
  19. package/components/repl/wysiwyg-repl.html +258 -0
  20. package/components/timeline/timeline.html +33 -31
  21. package/examples/anchor.html +11 -0
  22. package/examples/chart.html +22 -54
  23. package/examples/counter.html +5 -3
  24. package/examples/counter2.html +26 -0
  25. package/examples/directives.html +19 -17
  26. package/examples/forgeinform.html +45 -43
  27. package/examples/form.html +22 -20
  28. package/examples/gauge.html +2 -0
  29. package/examples/invalid-template-literals.html +5 -3
  30. package/examples/message.html +10 -4
  31. package/examples/nested.html +1 -1
  32. package/examples/object-bound-form.html +12 -10
  33. package/examples/remote.html +17 -15
  34. package/examples/shared.html +41 -0
  35. package/examples/xor.html +21 -20
  36. package/lightview.js +107 -72
  37. package/package.json +7 -2
  38. package/sites/client.html +48 -0
  39. package/sites/index.html +247 -0
  40. package/test/basic.html +15 -13
  41. package/test/basic.test.mjs +0 -10
  42. package/test/extended.html +17 -20
  43. package/types.js +10 -1
  44. package/unsplash.key +1 -0
  45. package/components/gauge/guage.html +0 -19
package/test/basic.html CHANGED
@@ -32,16 +32,18 @@
32
32
  <input id="inumber" type="number" value="${inumber}">
33
33
  <input id="irange" type="range" value="${irange}">
34
34
 
35
-
36
-
37
35
  <input id="icheckbox" type="checkbox" value="${icheckbox}">
38
-
39
- <script type="lightview/module">
40
- // debugger;
41
- self.variables({name:"string",open:"boolean",count:"number",children:Array},{imported,reactive});
42
- self.variables({color:"string",checked:"boolean",age:"number",hamburger:Array},{exported,reactive});
43
- self.variables({counter:"number"},{reactive});
44
- self.variables({myshare:"number"},{shared});
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});
45
47
 
46
48
  color = "green";
47
49
  checked = true;
@@ -73,12 +75,12 @@
73
75
  counter++;
74
76
  };
75
77
 
76
- addEventListener("change",({variableName,value}) => {
78
+ addEventListener("change", ({variableName, value}) => {
77
79
  self[variableName] = value;
78
80
  });
79
- </script>
80
- </template>
81
- <script src="../lightview.js"></script>
81
+ }
82
+ </script>
83
+ <script src="../lightview2.js"></script>
82
84
  <script>
83
85
  Lightview.createComponent("x-test",document.getElementById("x-test"));
84
86
  </script>
package/test/basic.test.mjs CHANGED
@@ -1,15 +1,5 @@
1
1
  import 'expect-puppeteer';
2
2
 
3
- describe('Google', () => {
4
- beforeAll(async () => {
5
- await page.goto('https://google.com');
6
- });
7
-
8
- test('should be titled "Google"', async () => {
9
- await expect(page.title()).resolves.toMatch('Google');
10
- });
11
- });
12
-
13
3
  describe('Lightview - Variables', () => {
14
4
  beforeAll(async () => {
15
5
  await page.goto('http://localhost:8080/test/basic.html');
package/test/extended.html CHANGED
@@ -3,30 +3,27 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <title>Extended</title>
6
- <script src="../lightview.js?as=x-body"></script>
6
+ <script src="../lightview2.js?as=x-body"></script>
7
7
  </head>
8
8
  <body>
9
- <script type="lightview/module">
10
- const {array,boolean,number,object,string} = await import("../types.js");
9
+ <script>
10
+ document.body.mount = async (self) => {
11
+ const {array,boolean,number,object,string} = await import("../types.js");
11
12
 
12
- self.variables({strictarray:array},{set:[]});
13
- self.variables({strictboolean:boolean},{set:true});
14
- self.variables({strictnumber:number},{set:0});
15
- self.variables({strictobject:object},{set:{}});
16
- self.variables({strictstring:string},{set:"test"});
17
- self.variables({extendedarray:array({required:true,minlength:2,maxlength:3})});
18
- self.variables({extendedboolean:boolean({required:true})});
19
- self.variables({extendednumber:number({required:true,min:1,max:4,step:2,allowNaN:false})});
20
- self.variables({extendedobject:object({required:true})});
21
- self.variables({extendedstring:string({required:true,minlength:2,maxlength:4})});
22
-
23
- self.variables({allowNaNnumber:number({min:null,max:null,step:null})});
24
- self.variables({noNaNnumber:number({allowNaN:false})});
25
-
26
- //debugger;
27
- //self.setVariableValue("extendedarray",[]);
28
- //console.log(typeof(extendedarray),extendedarray);
13
+ self.variables({strictarray:array},{set:[]});
14
+ self.variables({strictboolean:boolean},{set:true});
15
+ self.variables({strictnumber:number},{set:0});
16
+ self.variables({strictobject:object},{set:{}});
17
+ self.variables({strictstring:string},{set:"test"});
18
+ self.variables({extendedarray:array({required:true,minlength:2,maxlength:3})});
19
+ self.variables({extendedboolean:boolean({required:true})});
20
+ self.variables({extendednumber:number({required:true,min:1,max:4,step:2,allowNaN:false})});
21
+ self.variables({extendedobject:object({required:true})});
22
+ self.variables({extendedstring:string({required:true,minlength:2,maxlength:4})});
29
23
 
24
+ self.variables({allowNaNnumber:number({min:null,max:null,step:null})});
25
+ self.variables({noNaNnumber:number({allowNaN:false})});
26
+ }
30
27
  </script>
31
28
  </body>
32
29
  </html>
package/types.js CHANGED
@@ -356,6 +356,15 @@ const string = ({coerce=false, required = false,whenInvalid = ifInvalid, maxleng
356
356
  }
357
357
  }
358
358
 
359
+ const html = (...args) => string(...args);
360
+ html.safe = true;
361
+
362
+ const css = (...args) => string(...args);
363
+ css.safe = true;
364
+
365
+ const script = (...args) => string(...args);
366
+ script.safe = true;
367
+
359
368
 
360
369
  const validateSymbol = function(value,variable) {
361
370
  if(value===undefined && variable.value===undefined) {
@@ -522,4 +531,4 @@ const remote = (config) => {
522
531
 
523
532
  const remoteGenerator = handleRemote;
524
533
 
525
- export {ValidityState,any,array,boolean,duration,number,object,remote,remoteGenerator,string,symbol,reviver}
534
+ export {ValidityState,any,array,boolean,duration,number,object,remote,remoteGenerator,string,symbol,reviver,html,css,script}
package/unsplash.key ADDED
@@ -0,0 +1 @@
1
+ nRe-dHABvjv2shxyvDFQd3Y9MPni77qBG9ImAVH0wig
package/components/gauge/guage.html DELETED
@@ -1,19 +0,0 @@
1
- <html>
2
- <head>
3
- <meta charset="UTF-8">
4
- <title>Lightview:Component:Gauge</title>
5
- </head>
6
- <body>
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
- const {chart} = await import("../components.js");
12
- chart(self,{
13
- packages:["corechart","gauge"],
14
- columns:[{label:"Label",type:"string"},{label:"Value",type:"number"}],
15
- type:"Gauge"
16
- });
17
- </script>
18
- </body>
19
- </html>