npm - lightview - Versions diffs - 1.7.3-b → 1.8.1-b - Mend

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

package/README.md +1 -1
package/components/chart/chart.html +6 -4
package/components/chart/example.html +1 -1
package/components/chart.html +67 -65
package/components/components.js +10 -2
package/components/gantt/gantt.html +31 -29
package/components/gauge/gauge.html +20 -0
package/components/gauge.html +47 -44
package/components/orgchart/example.html +1 -1
package/components/orgchart/orgchart.html +30 -25
package/components/repl/code-editor.html +64 -0
package/components/repl/editor.html +37 -0
package/components/repl/editorjs-inline-tool/index.js +3 -0
package/components/repl/editorjs-inline-tool/inline-tools.js +28 -0
package/components/repl/editorjs-inline-tool/tool.js +175 -0
package/components/repl/repl-with-wysiwyg.html +355 -0
package/components/repl/repl.html +345 -0
package/components/repl/sup.js +44 -0
package/components/repl/wysiwyg-repl.html +258 -0
package/components/timeline/timeline.html +33 -31
package/examples/anchor.html +11 -0
package/examples/chart.html +22 -54
package/examples/counter.html +5 -3
package/examples/counter2.html +26 -0
package/examples/directives.html +19 -17
package/examples/forgeinform.html +45 -43
package/examples/form.html +22 -20
package/examples/gauge.html +2 -0
package/examples/invalid-template-literals.html +5 -3
package/examples/message.html +10 -4
package/examples/nested.html +1 -1
package/examples/object-bound-form.html +12 -10
package/examples/remote.html +17 -15
package/examples/shared.html +41 -0
package/examples/xor.html +21 -20
package/lightview.js +107 -72
package/package.json +7 -2
package/sites/client.html +48 -0
package/sites/index.html +247 -0
package/test/basic.html +15 -13
package/test/basic.test.mjs +0 -10
package/test/extended.html +17 -20
package/types.js +10 -1
package/unsplash.key +1 -0
package/components/gauge/guage.html +0 -19

package/README.md CHANGED Viewed

@@ -1,4 +1,4 @@
-# lightview v1.7.3b (BETA)
+# lightview v1.8.1b (BETA)
 Small, simple, powerful web UI and micro front end creation ...

package/components/chart/chart.html CHANGED Viewed

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
@@ -5,11 +6,12 @@
 </head>
 <body>
 <div id="target"></div>
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
-<script type="lightview/module">
-    const {chart} = await import("../components.js");
-    chart(self);
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        const {chart} = await import(new URL("../components.js", this.componentBaseURI).href);
+        chart(self);
+    }
 </script>
 </body>
 </html>

package/components/chart/example.html CHANGED Viewed

@@ -22,7 +22,7 @@
     }
 </l-chart>
 <script>
-    const el = document.getElementById("myChart");
+    const el = document.getElementById("myPieChart");
     el.addEventListener("mounted",() => {
         chart = el.chart;
         chart.addRow(["Anchovies",1]);

package/components/chart.html CHANGED Viewed

@@ -7,75 +7,77 @@
 <div id="target"></div>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
-<script type="lightview/module">
-    let table = JSON5.parse(self.firstChild.textContent.trim()),
-        chart,
-        datatable,
-        options = {};
-    const target = self.getElementById("target"),
-        resizeObserver = new ResizeObserver(entries => {
-          for (let entry of entries) {
-            if(entry.contentBoxSize) {
-              // Firefox implements `contentBoxSize` as a single content rect, rather than an array
-              const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
-              options.width = contentBoxSize.inlineSize;
-            } else {
-              options.width = entry.contentRect.width;
-            }
-          }
-          chart.draw(datatable, options);
-        }),
-        callback = (textNode, oldValue, newValue) => {
-            datatable = new google.visualization.DataTable();
-            try {
-                table = table || JSON5.parse(newValue.trim());
-                datatable = google.visualization.arrayToDataTable(table);
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        let table = JSON5.parse(self.firstChild.textContent.trim()),
+            chart,
+            datatable,
+            options = {};
+        const target = self.getElementById("target"),
+            resizeObserver = new ResizeObserver(entries => {
+                for (let entry of entries) {
+                    if (entry.contentBoxSize) {
+                        // Firefox implements `contentBoxSize` as a single content rect, rather than an array
+                        const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
+                        options.width = contentBoxSize.inlineSize;
+                    } else {
+                        options.width = entry.contentRect.width;
+                    }
+                }
                 chart.draw(datatable, options);
-                table = null;
-            } catch (e) {
-                target.innerText = e + newValue;
-            }
-        };
-    self.firstChild.innerText = "Loading ...";
-    self.variables({type: "string", title: "string", style: "string"}, {observed});
-    if(style) target.setAttribute("style",style);
-    self.addRow = (row) => {
-        datatable.addRows([row]);
-        chart.draw(datatable, options);
-    };
-    self.setValue = (row,col,value) => {
-        if(datatable) {
-            datatable.setValue(row,col,value);
+            }),
+            callback = (textNode, oldValue, newValue) => {
+                datatable = new google.visualization.DataTable();
+                try {
+                    table = table || JSON5.parse(newValue.trim());
+                    datatable = google.visualization.arrayToDataTable(table);
+                    chart.draw(datatable, options);
+                    table = null;
+                } catch (e) {
+                    target.innerText = e + newValue;
+                }
+            };
+        self.firstChild.innerText = "Loading ...";
+        self.variables({type: "string", title: "string", style: "string"}, {observed});
+        if (style) target.setAttribute("style", style);
+        self.addRow = (row) => {
+            datatable.addRows([row]);
             chart.draw(datatable, options);
-        }
-    };
-    self.setOptions = (newOptions) => {
-      Object.assign(options,newOptions);
-    };
-    self.init = () => {
-        if(!options.title && title) options.title = title;
-        chart = new google.visualization[type](target);
-        addEventListener("change",({target,value}) => {
-            if (target === "type") {
-                chart = new google.visualization[type](target);
-            } else if (target === "title") {
-                options.title = value;
-            } else if(target === "style") {
-                target.setAttribute("style",value);
+        };
+        self.setValue = (row, col, value) => {
+            if (datatable) {
+                datatable.setValue(row, col, value);
+                chart.draw(datatable, options);
             }
-            chart.draw(datatable, options);
+        };
+        self.setOptions = (newOptions) => {
+            Object.assign(options, newOptions);
+        };
+        self.init = () => {
+            if (!options.title && title) options.title = title;
+            chart = new google.visualization[type](target);
+            addEventListener("change", ({target, value}) => {
+                if (target === "type") {
+                    chart = new google.visualization[type](target);
+                } else if (target === "title") {
+                    options.title = value;
+                } else if (target === "style") {
+                    target.setAttribute("style", value);
+                }
+                chart.draw(datatable, options);
+            });
+            const node = self.firstChild;
+            callback(node, node.textContent, node.textContent);
+            // Will be used by the Lightview global observer
+            node.characterDataMutationCallback = callback;
+            // resized charts if window resizes
+            resizeObserver.observe(target);
+        };
+        self.addEventListener("connected", ({target}) => {
+            google.charts.load("current", {"packages": ["corechart", "gauge"]});
+            google.charts.setOnLoadCallback(self.init);
         });
-        const node = self.firstChild;
-        callback(node, node.textContent, node.textContent);
-        // Will be used by the Lightview global observer
-        node.characterDataMutationCallback = callback;
-        // resized charts if window resizes
-        resizeObserver.observe(target);
-    };
-    self.addEventListener("connected", ({target}) => {
-        google.charts.load("current", {"packages": ["corechart","gauge"]});
-        google.charts.setOnLoadCallback(self.init);
-    });
+    }
 </script>
 </body>
 </html>

package/components/components.js CHANGED Viewed

@@ -97,9 +97,17 @@ const chart = (self,{packages = ["corechart"],options={},columns=[],rows=[],type
         self.dispatchEvent(new Event("mounted"));
     };
     self.addEventListener("connected", ({target}) => {
-        google.charts.load("current", {"packages":packages});
-        google.charts.setOnLoadCallback(self.init);
+        const gscript = document.createElement("script");
+        gscript.setAttribute("src","https://www.gstatic.com/charts/loader.js");
+        gscript.onload = () => {
+            google.charts.load("current", {"packages":packages});
+            google.charts.setOnLoadCallback(self.init);
+        };
+        self.appendChild(gscript);
     });
+    const jscript = document.createElement("script");
+    jscript.setAttribute("src","https://unpkg.com/json5@^2.0.0/dist/index.min.js");
+    document.head.appendChild(jscript);
 }
 export {chart};

package/components/gantt/gantt.html CHANGED Viewed

@@ -1,40 +1,42 @@
+<!DOCTYPE html>
 <html>
 <head>
     <title>Lightview:Component:Gantt</title>
 </head>
 <body>
 <div id="target"></div>
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
-<script type="lightview/module">
-    const {chart} = await import("../components.js"),
-        {duration} = await import("/types.js");
-    chart(self,{
-      packages:["gantt"],
-      columns:[
-        {label:"Task ID",type:"string"},
-        {label:"Task Name",type:"string"},
-        {label:"Start Date",type:"date"},
-        {label:"End Date",type:"date"},
-        {label:"Duration",type:"number"},
-        {label:"% Complete",type:"number"},
-        {label:"Dependencies",type:"string"}
-        ],
-      type:"Gantt",
-      rowTransform(row,i) {
-        return row.map((item,index) => {
-          if(item && (index===2 || index===3)) {
-            const date = new Date(item);
-            if(!date || typeof(date)!=="object" || !(date instanceof Date)) {
-                throw new TypeError(`row:${i} col:${index} is not a date`);
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        const {chart} = await import("../components.js"),
+            {duration} = await import("/types.js");
+        chart(self, {
+            packages: ["gantt"],
+            columns: [
+                {label: "Task ID", type: "string"},
+                {label: "Task Name", type: "string"},
+                {label: "Start Date", type: "date"},
+                {label: "End Date", type: "date"},
+                {label: "Duration", type: "number"},
+                {label: "% Complete", type: "number"},
+                {label: "Dependencies", type: "string"}
+            ],
+            type: "Gantt",
+            rowTransform(row, i) {
+                return row.map((item, index) => {
+                    if (item && (index === 2 || index === 3)) {
+                        const date = new Date(item);
+                        if (!date || typeof (date) !== "object" || !(date instanceof Date)) {
+                            throw new TypeError(`row:${i} col:${index} is not a date`);
+                        }
+                        return date;
+                    }
+                    if (item && index === 4) return duration.parse(item);
+                    return item;
+                })
             }
-            return date;
-          }
-          if(item && index===4) return duration.parse(item);
-          return item;
-        })
-      }
-    });
+        });
+    }
 </script>
 </body>
 </html>

package/components/gauge/gauge.html ADDED Viewed

@@ -0,0 +1,20 @@
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Component:Gauge</title>
+</head>
+<body>
+<div id="target"></div>
+<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        const {chart} = await import("../components.js");
+        chart(self, {
+            packages: ["corechart", "gauge"],
+            columns: [{label: "Label", type: "string"}, {label: "Value", type: "number"}],
+            type: "Gauge"
+        });
+    }
+</script>
+</body>
+</html>

package/components/gauge.html CHANGED Viewed

@@ -6,52 +6,55 @@
 <body hidden>
 <div id="target"></div>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-<script type="lightview/module">
-    const target = self.getElementById("target"),
-        resizeObserver = new ResizeObserver(entries => {
-          for (let entry of entries) {
-            if(entry.contentBoxSize) {
-              // Firefox implements `contentBoxSize` as a single content rect, rather than an array
-              const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
-              options.width = contentBoxSize.inlineSize;
-            } else {
-              options.width = entry.contentRect.width;
+<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        const target = self.getElementById("target"),
+            resizeObserver = new ResizeObserver(entries => {
+                for (let entry of entries) {
+                    if (entry.contentBoxSize) {
+                        // Firefox implements `contentBoxSize` as a single content rect, rather than an array
+                        const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
+                        options.width = contentBoxSize.inlineSize;
+                    } else {
+                        options.width = entry.contentRect.width;
+                    }
+                }
+                chart.draw(datatable, options);
+            });
+        let chart,
+            datatable,
+            options;
+        self.variables({label: "string", value: "number", style: "string"}, {observed});
+        if (style) target.setAttribute("style", style);
+        self.setValue = (newValue) => {
+            if (datatable) {
+                datatable.setValue(0, 1, newValue);
+                chart.draw(datatable, options);
             }
-          }
-          chart.draw(datatable, options);
+        };
+        self.init = () => {
+            options = {};
+            chart = new google.visualization.Gauge(target);
+            datatable = google.visualization.arrayToDataTable([["Label", "Value"], [label, value]]);
+            addEventListener("change", ({target, value}) => {
+                if (target === "label") {
+                    datatable.setValue(0, 0, value);
+                } else if (target === "value") {
+                    self.setValue(value);
+                } else if (target === "style") {
+                    target.setAttribute("style", value);
+                }
+                chart.draw(datatable, options);
+            });
+            resizeObserver.observe(target);
+            self.removeAttribute("hidden");
+        };
+        self.addEventListener("mounted", ({target}) => {
+            google.charts.load("current", {"packages": ["corechart", "gauge"]});
+            google.charts.setOnLoadCallback(self.init);
         });
-    let chart,
-        datatable,
-        options;
-    self.variables({label: "string", value:"number", style: "string"}, {observed});
-    if(style) target.setAttribute("style",style);
-    self.setValue = (newValue) => {
-        if(datatable) {
-            datatable.setValue(0,1,newValue);
-            chart.draw(datatable, options);
-        }
-    };
-    self.init = () => {
-        options = { };
-        chart = new google.visualization.Gauge(target);
-        datatable = google.visualization.arrayToDataTable([["Label","Value"],[label,value]]);
-        addEventListener("change",({target,value}) => {
-            if (target === "label") {
-                datatable.setValue(0,0,value);
-            } else if(target ==="value") {
-                self.setValue(value);
-            } else if(target === "style") {
-                target.setAttribute("style",value);
-            }
-            chart.draw(datatable, options);
-        });
-        resizeObserver.observe(target);
-        self.removeAttribute("hidden");
-    };
-    self.addEventListener("connected", ({target}) => {
-        google.charts.load("current", {"packages": ["corechart","gauge"]});
-        google.charts.setOnLoadCallback(self.init);
-    });
+    }
 </script>
 </body>
 </html>

package/components/orgchart/example.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <title>Lightview:Component:OrgChart:Example</title>
     <link href="./orgchart.html" rel="module">
-    <script src="../../lightview.js"></script>
+    <script src="../../lightview2.js"></script>
 </head>
 <body>
 <l-orgchart id="myChart" style="height:500px;" title="My Org">

package/components/orgchart/orgchart.html CHANGED Viewed

@@ -1,36 +1,41 @@
+<!DOCTYPE html>
 <html>
 <head>
     <title>Lightview:Component:OrgChart</title>
+    <script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
 </head>
 <body>
 <link id="load-css-2" rel="stylesheet" type="text/css" href="https://www.gstatic.com/charts/51/css/orgchart/orgchart.css">
 <div id="target"></div>
-<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-<script src="https://unpkg.com/json5@^2.0.0/dist/index.min.js"></script>
-<script type="lightview/module">
-    const {chart} = await import("../components.js");
-    chart(self,{
-      options: {allowHtml: true, allowCollapse: true},
-      packages:["orgchart"],
-      columns:[
-        {label:"Name",type:"string"},
-        {label:"Manager",type:"string"},
-        {label:"Tooltip",type:"string"}
-        ],
-      type:"OrgChart",
-      // 4 columns in definition data name,title,manager,tooltip
-      rowTransform(row) {
-        return row.reduce((row,item,index) => {
-            item ||= "";
-            if(index===1) {
-                row[0] = {v:row[0],f:`<div style="text-align:center;">${row[0]}<div style="font-style:italic">${item}</div></div>`}
-            } else {
-                row.push(item);
+<script id="lightview">
+    (document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
+        const {chart} = await import("../components.js");
+        chart(self, {
+            options: {allowHtml: true, allowCollapse: true},
+            packages: ["orgchart"],
+            columns: [
+                {label: "Name", type: "string"},
+                {label: "Manager", type: "string"},
+                {label: "Tooltip", type: "string"}
+            ],
+            type: "OrgChart",
+            // 4 columns in definition data name,title,manager,tooltip
+            rowTransform(row) {
+                return row.reduce((row, item, index) => {
+                    item ||= "";
+                    if (index === 1) {
+                        row[0] = {
+                            v: row[0],
+                            f: `<div style="text-align:center;">${row[0]}<div style="font-style:italic">${item}</div></div>`
+                        }
+                    } else {
+                        row.push(item);
+                    }
+                    return row;
+                }, []);
             }
-            return row;
-        },[]);
-      }
-    });
+        });
+    }
 </script>
 </body>
 </html>

package/components/repl/code-editor.html ADDED Viewed

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet"
+          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
+</head>
+<body>
+<div style="position:relative">
+<pre style="position:absolute;top:0;left:0;"><textarea id="editor"  class="hljs language-html" style="border:none"></textarea></pre>
+<pre style="position:absolute;top:0;left:0;"><code id="codereflector" class="hljs language-html" style="padding:2px;"></code></pre>
+</div>
+<style>
+    .cursor {
+        -webkit-animation: 2s linear infinite condemned_blink_effect; /* for Safari 4.0 - 8.0 */
+        animation: 2s linear infinite condemned_blink_effect;
+        position:relative;left:-.45ch;letter-spacing:1px;
+    }
+    /* for Safari 4.0 - 8.0 */
+    @-webkit-keyframes condemned_blink_effect {
+        0% {
+            visibility: hidden;
+        }
+        50% {
+            visibility: hidden;
+        }
+        100% {
+            visibility: visible;
+        }
+    }
+    @keyframes condemned_blink_effect {
+        0% {
+            visibility: hidden;
+        }
+        50% {
+            visibility: hidden;
+        }
+        100% {
+            visibility: visible;
+        }
+    }
+</style>
+<script>
+    const editor = document.getElementById("editor"),
+        reflector = document.getElementById("codereflector");
+    Object.defineProperty(editor,"innerText",{get() { return editor.value; }});
+    editor.addEventListener("input",() => {
+        //editor.style.cssText = document.defaultView.getComputedStyle(reflector, "").cssText;
+        const startPosition = editor.selectionStart,
+            endPosition = editor.selectionEnd,
+            value = editor.value.substring(0,startPosition) + "|cursor|" + editor.value.substring(startPosition);
+        reflector.innerText = value;
+        hljs.highlightElement(reflector);
+        reflector.innerHTML = reflector.innerHTML.replace("|cursor|",'<span class="cursor">|</span>');
+    })
+</script>
+</body>
+</html>

package/components/repl/editor.html ADDED Viewed

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Lightview:Component:REPL:Example</title>
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
+</head>
+<body>
+<div id="editor"></div>
+<script>
+    const wysywigEl = document.getElementById("wysywig");
+    const editor = new EditorJS({
+        /**
+         * Id of Element that should contain the Editor
+         */
+        holder: "editor",
+        /**
+         * Available Tools list.
+         * Pass Tool's class or Settings object for each Tool you want to use
+         */
+        tools: {
+            header: {
+                class: Header,
+                inlineToolbar: ['link']
+            },
+            list: {
+                class: List,
+                inlineToolbar: true
+            }
+        }
+    })
+</script>
+</body>
+</html>

package/components/repl/editorjs-inline-tool/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { default } from './tool.js';
+export { ItalicInlineTool, StrongInlineTool, UnderlineInlineTool, } from './inline-tools.js';
+//# sourceMappingURL=index.js.map

package/components/repl/editorjs-inline-tool/inline-tools.js ADDED Viewed

@@ -0,0 +1,28 @@
+import createGenericInlineTool from './tool.js';
+export var ItalicInlineTool = createGenericInlineTool({
+    sanitize: {
+        em: {},
+    },
+    shortcut: 'CMD+I',
+    tagName: 'EM',
+    toolboxIcon:
+    // icon editor-js uses
+    '<svg class="icon icon--italic" width="34px" height="34px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#italic"></use></svg>',
+});
+export var StrongInlineTool = createGenericInlineTool({
+    sanitize: {
+        strong: {},
+    },
+    shortcut: 'CMD+B',
+    tagName: 'STRONG',
+    toolboxIcon: '<svg class="icon icon--bold" width="12px" height="14px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bold"></use></svg>',
+});
+export var UnderlineInlineTool = createGenericInlineTool({
+    sanitize: {
+        u: {},
+    },
+    tagName: 'U',
+    // icon taken from https://github.com/mui-org/material-ui/blob/4fba0dafd30f608937efa32883d151ba01fc9681/packages/material-ui-icons/src/FormatUnderlined.js
+    toolboxIcon: '<svg width="24" height="24" viewBox="-8 0 38 24"><path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"></path></svg>',
+});
+//# sourceMappingURL=inline-tools.js.map