- Updates template folder according to changes in justpy 0.2.3.

nicegui/static/templates/js/altairjp.js

@@ -0,0 +1,34 @@
+// {* raw *}
+
+// Uses https://github.com/vega/vega-embed
+
+Vue.component('altairjp', {
+    template:
+        `<div  v-bind:id="jp_props.id" :class="jp_props.classes"  :style="jp_props.style"  >
+<div v-bind:id="'altair' + jp_props.id" :class="jp_props.classes"  :style="jp_props.style" ></div>
+</div>`,
+    data: function () {
+        return {
+            vega_source: {}
+        }
+    },
+    methods: {
+        chart_create() {
+            this.vega_source = this.$props.jp_props.vega_source;
+            el = document.getElementById('altair' + this.$props.jp_props.id.toString());
+            vegaEmbed(el, JSON.parse(this.$props.jp_props.vega_source), this.$props.jp_props.options).then(function (result) {
+            }).catch(console.error);
+        }
+    },
+    mounted() {
+        this.chart_create();
+    },
+    updated() {
+        if (this.vega_source != this.$props.jp_props.vega_source) this.chart_create();
+    },
+    props: {
+        jp_props: Object
+    }
+});
+
+// {* endraw *}

nicegui/static/templates/js/bokehjp.js

@@ -0,0 +1,36 @@
+// {* raw *}
+
+// https://docs.bokeh.org/en/latest/docs/user_guide/embed.html
+
+Vue.component('bokehjp', {
+    template:
+        `<div  v-bind:id="jp_props.id" :class="jp_props.classes"  :style="jp_props.style">
+<div v-bind:id="'bokeh' + jp_props.id"></div>
+</div>`,
+    data: function () {
+        return {
+            chart: null
+        }
+    },
+    methods: {
+        chart_create() {
+            this.chart = this.$props.jp_props.chart;
+            const chart_obj = JSON.parse(this.$props.jp_props.chart);
+            Bokeh.embed.embed_item(chart_obj, 'bokeh' + this.$props.jp_props.id.toString());
+        }
+    },
+    mounted() {
+        this.chart_create();
+    },
+    updated() {
+        if (this.chart != this.$props.jp_props.chart) {
+            document.getElementById('bokeh' + this.$props.jp_props.id.toString()).innerHTML = "";
+            this.chart_create();
+       }
+    },
+    props: {
+        jp_props: Object
+    }
+});
+
+// {* endraw *}

nicegui/static/templates/js/deckgl.js

@@ -0,0 +1,48 @@
+// {* raw *}
+
+// Work in progress. Does not work well for all decks
+// Use the iframejp component instead for now
+
+var cached_deckgl_def = {};
+
+Vue.component('deckgl', {
+    template:
+        `<div  v-bind:id="jp_props.id" :class="jp_props.classes"  :style="jp_props.style"  ></div>`,
+    data: function () {
+        return {
+            deck_def: {},
+            deckInstance: null
+        }
+    },
+    methods: {
+        deck_create() {
+            const tooltip = true;
+            const customLibraries = null;
+            this.deck_def = this.$props.jp_props.deck;
+            jsonInput = JSON.parse(this.deck_def);
+            this.$nextTick(function () {
+                this.deckInstance = createDeck({
+                    mapboxApiKey: this.$props.jp_props.mapbox_key,
+                    container: document.getElementById(this.$props.jp_props.id.toString()),
+                    jsonInput,
+                    tooltip,
+                    customLibraries
+                });
+            });
+        }
+    },
+    mounted() {
+        this.deck_create();
+    },
+    updated() {
+        updateDeck('', this.deckInstance);
+        updateDeck(this.$props.jp_props.deck, this.deckInstance);
+        this.deckInstance.redraw(true);
+        this.deck_def = this.$props.jp_props.deck;
+    },
+    props: {
+        jp_props: Object
+    }
+});
+
+// {* endraw *}

nicegui/static/templates/js/event_handler.js

@@ -174,4 +174,4 @@ function send_to_server(e, event_type, debug_flag) {
     }
 }
 
-// {% endraw %}
+// {% endraw %}

nicegui/static/templates/js/iframejp.js

@@ -0,0 +1,65 @@
+// {* raw *}
+
+
+Vue.component('iframejp', {
+    template:
+        `<div v-bind:id="jp_props.id" :class="jp_props.classes"  :style="jp_props.style + '; position: relative'">
+            <iframe  v-bind:id="'frame0'+jp_props.id"  style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;" ></iframe>
+            <iframe  v-bind:id="'frame1'+jp_props.id"  style="visibility: hidden;: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0;"></iframe>
+        </div>`,
+    data: function () {
+        return {
+            src_data_current: '',
+            active_frame: 0,
+            inactive_frame: 1
+        }
+    },
+    methods: {
+        inject_deck() {
+            const el_active = document.getElementById('frame' + this.active_frame.toString() + this.$props.jp_props.id.toString());
+            const el_inactive = document.getElementById('frame' + this.inactive_frame.toString() + this.$props.jp_props.id.toString());
+            const src_data_new = decodeURIComponent(this.$props.jp_props.attrs.srcdoc);
+            const view_delay = this.$props.jp_props.view_delay;
+            const transition_duration = this.$props.jp_props.transition_duration;
+            el_active.onload = null;
+            el_inactive.onload = null;
+
+            if (src_data_new != this.src_data_current) {
+                this.src_data_current = src_data_new;
+
+                el_active.onload = async function (event) {
+                    // Sleep this function for view_delay milliseconds
+                   // await new Promise(r => setTimeout(r, view_delay));
+
+                    el_active.style.transition = `width ${transition_duration}s ease-out`;
+                    el_inactive.style.transition = `width ${transition_duration}s ease-out`;
+
+                    el_active.style.visibility = 'visible';
+
+                    el_active.style.width = '100%';
+                    el_inactive.style.width = '0%';
+                    await new Promise(r => setTimeout(r, transition_duration * 1000));
+                    el_inactive.style.visibility = 'hidden';
+                };
+
+                el_active.setAttribute("srcdoc", this.src_data_current);
+
+                this.active_frame = (this.active_frame + 1) % 2;
+                this.inactive_frame = (this.inactive_frame + 1) % 2;
+
+            }
+
+        }
+    },
+    mounted() {
+        this.inject_deck();
+    },
+    updated() {
+        this.inject_deck();
+    },
+    props: {
+        jp_props: Object
+    }
+});
+
+// {* endraw *}

nicegui/static/templates/js/katexjp.js

@@ -0,0 +1,31 @@
+// {* raw *}
+
+
+Vue.component('katexjp', {
+    template:
+        `<div  v-bind:id="jp_props.id" :class="jp_props.classes"  :style="jp_props.style"  ></div>`,
+    data: function () {
+        return {
+            equation: ''
+        }
+    },
+    methods: {
+        equation_create() {
+            this.equation = this.$props.jp_props.equation;
+            katex.render(this.$props.jp_props.equation, document.getElementById(this.$props.jp_props.id.toString()), this.$props.jp_props.options);
+        }
+    },
+    mounted() {
+        this.equation_create();
+    },
+    updated() {
+        if (this.equation != this.$props.jp_props.equation) {
+            this.equation_create();
+        }
+    },
+    props: {
+        jp_props: Object
+    }
+});
+
+// {* endraw *}

nicegui/static/templates/js/plotlyjp.js

@@ -0,0 +1,43 @@
+// {* raw *}
+
+
+Vue.component('plotlyjp', {
+    template:
+        `<div  v-bind:id="jp_props.id" :class="jp_props.classes"  :style="jp_props.style"  >
+<div v-bind:id="'plt' + jp_props.id" class="plotly-graph-div js-plotly-plot" style="height:600px; width:500px;"></div>
+</div>`,
+    data: function () {
+        return {
+            chart: null
+        }
+    },
+    methods: {
+        chart_create() {
+            // console.log(this.$props.jp_props);
+            this.chart = this.$props.jp_props.chart;
+            const chart_obj = JSON.parse(this.$props.jp_props.chart);
+            // https://plotly.com/javascript/plotlyjs-function-reference/
+            Plotly.react(document.getElementById('plt'+this.$props.jp_props.id.toString()),
+                chart_obj['data'], chart_obj['layout'], this.$props.jp_props.config);
+
+            // this.$nextTick(function () {
+           // katex.render(this.$props.jp_props.chart, document.getElementById(this.$props.jp_props.id.toString()), {throwOnError: false});
+            // });
+        }
+    },
+    mounted() {
+        this.chart_create();
+    },
+    updated() {
+        this.chart_create();
+//         this.$nextTick(function() {
+// });
+
+
+    },
+    props: {
+        jp_props: Object
+    }
+});
+
+// {* endraw *}

nicegui/static/templates/local/materialdesignicons/iconfont/README.md

@@ -1,10 +1,8 @@
 The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts:
 
 ```html
-<link
-  href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet"
-/>
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
 ```
 
 Read more in our full usage guide:

nicegui/static/templates/local/tailwind/components.css

@@ -0,0 +1 @@
+.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:640px){.sm\:container{width:100%}@media (min-width:640px){.sm\:container{max-width:640px}}@media (min-width:768px){.sm\:container{max-width:768px}}@media (min-width:1024px){.sm\:container{max-width:1024px}}@media (min-width:1280px){.sm\:container{max-width:1280px}}}@media (min-width:768px){.md\:container{width:100%}@media (min-width:640px){.md\:container{max-width:640px}}@media (min-width:768px){.md\:container{max-width:768px}}@media (min-width:1024px){.md\:container{max-width:1024px}}@media (min-width:1280px){.md\:container{max-width:1280px}}}@media (min-width:1024px){.lg\:container{width:100%}@media (min-width:640px){.lg\:container{max-width:640px}}@media (min-width:768px){.lg\:container{max-width:768px}}@media (min-width:1024px){.lg\:container{max-width:1024px}}@media (min-width:1280px){.lg\:container{max-width:1280px}}}@media (min-width:1280px){.xl\:container{width:100%}@media (min-width:640px){.xl\:container{max-width:640px}}@media (min-width:768px){.xl\:container{max-width:768px}}@media (min-width:1024px){.xl\:container{max-width:1024px}}@media (min-width:1280px){.xl\:container{max-width:1280px}}}

nicegui/static/templates/main.html

@@ -300,4 +300,4 @@
         }
     });
 
-</script>
+</script>

nicegui/static/templates/optional_packages.html

@@ -0,0 +1,51 @@
+{% if options.highcharts %}
+    {% include 'highcharts.html' %}
+{% endif %}
+
+{% if options.aggrid %}
+    {% if not options.no_internet %}
+        <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
+    {% else %}
+        <script src="/templates/local/ag-grid-community.js"></script>
+    {% endif %}
+{% endif %}
+
+{% if options.aggrid_enterprise %}
+    {% if not options.no_internet %}
+        <script src="https://unpkg.com/ag-grid-enterprise/dist/ag-grid-enterprise.min.js"></script>
+    {% else %}
+        <script src="/templates/local/ag-grid-enterprise.js"></script>
+    {% endif %}
+{% endif %}
+
+{% if options.deckgl %}
+    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet'/>
+    <script src='https://cdn.jsdelivr.net/npm/@deck.gl/jupyter-widget@~8.4.*/dist/index.js'></script>
+{% endif %}
+
+{% if options.katex %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css"
+          integrity="sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc"
+          crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js"
+            integrity="sha384-YNHdsYkH6gMx9y3mRkmcJ2mFUjTd0qNQQvY9VYZgQd7DcN7env35GzlmFaZ23JGp"
+            crossorigin="anonymous"></script>
+{% endif %}
+
+{% if options.vega %}
+ <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
+{% endif %}
+
+{% if options.plotly %}
+ <script src="https://cdn.plot.ly/plotly-2.1.0.min.js"></script>
+{% endif %}
+
+{% if options.bokeh %}
+ <script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.2.min.js"></script>
+ <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.2.min.js"></script>
+ <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.2.min.js"></script>
+ <script src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.3.2.min.js"></script>
+{% endif %}

nicegui/static/templates/quasar.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+
     {% include 'favicon.html' %}
 
         {% if options.tailwind %}

nicegui/static/templates/tailwind.html

@@ -7,9 +7,15 @@
 
         {% if options.tailwind %}
             {% if not options.no_internet %}
-                <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">
+                <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.4.6/dist/base.min.css">
+                <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.4.6/dist/components.min.css">
+                <link rel="stylesheet" href="https://unpkg.com/@tailwindcss/typography@^0.1.2/dist/typography.min.css">
+                <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.4.6/dist/utilities.min.css">
             {% else %}
-                <link href="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/tailwind/tailwind.min.css" rel="stylesheet">
+                <link href="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/tailwind/base.css" rel="stylesheet">
+                <link href="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/tailwind/components.css" rel="stylesheet">
+                <link href="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/tailwind/typography.css" rel="stylesheet">
+                <link href="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/tailwind/utilities.css" rel="stylesheet">
             {% endif %}
             <style>
                 {% include 'css/form.css' %}