Merge branch 'template-folder' into main

nicegui/elements/page.py

@@ -37,11 +37,6 @@ class Page(jp.QuasarPage):
         self.tailwind = True  # use Tailwind classes instead of Quasars
         self.css = css
         self.on_connect = on_connect or config.on_connect
-        self.head_html += '''
-            <script>
-                confirm = () => { setTimeout(location.reload.bind(location), 100); return false; };
-            </script>
-        '''  # avoid confirmation dialog for reload
 
         self.view = jp.Div(a=self, classes=classes, style='row-gap: 1em', temp=False)
         self.view.add_page(self)

nicegui/static/copy_justpy_templates.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+rm -r templates
+cp -r ../../../justpy/justpy/templates .

nicegui/static/templates/js/aggrid.js

@@ -6,6 +6,20 @@ Vue.component('grid', {
     template:
         `<div  v-bind:id="jp_props.id" :class="jp_props.classes"  :style="jp_props.style"  ></div>`,
     methods: {
+        evaluate_formatters(def) {
+            if (Array.isArray(def)) {
+                for (const element of def) {
+                    this.evaluate_formatters(element);
+                }
+            } else if (typeof def == "object") {
+                for (const [key, value] of Object.entries(def)) {
+                    if (key.toLowerCase().includes('formatter')) {
+                        eval('def[key] = ' + def[key]);
+                    }
+                    this.evaluate_formatters(value);
+                }
+            }
+        },
         grid_change() {
             var j = JSON.stringify(this.$props.jp_props.def);
             var grid_def = JSON.parse(j);  // Deep copy the grid definition
@@ -18,6 +32,7 @@ Vue.component('grid', {
             cached_grid_def[this.$props.jp_props.id] = j;
             grid_def.onGridReady = grid_ready;
             grid_def.popupParent = document.querySelector('body');
+            this.evaluate_formatters(grid_def);
             for (const field of this.$props.jp_props.evaluate) {
                 eval('grid_def[field] = ' + grid_def[field]);
             }

nicegui/static/templates/js/chartjp.js

@@ -9,9 +9,25 @@ Vue.component('chart', {
     template:
         `<div v-bind:id="jp_props.id" :class="jp_props.classes"  :style="jp_props.style" ></div>`,
     methods: {
+        evaluate_formatters(def) {
+            if (Array.isArray(def)) {
+                for (const element of def) {
+                    this.evaluate_formatters(element);
+                }
+            } else if (typeof def == "object") {
+                for (const [key, value] of Object.entries(def)) {
+                    if (key.toLowerCase().includes('formatter')) {
+                        eval('def[key] = ' + def[value]);
+                    }
+                    this.evaluate_formatters(value);
+                }
+            }
+        },
         graph_change() {
             cached_graph_def[this.$props.jp_props.id] = JSON.stringify(this.$props.jp_props.def);
             var container = this.$props.jp_props.id.toString();
+            // Evaluate all properties that include 'formatter'
+            this.evaluate_formatters(this.$props.jp_props.def);
             if (this.$props.jp_props.stock) {
                 var c = Highcharts.stockChart(container, this.$props.jp_props.def);
             } else {
@@ -278,6 +294,41 @@ Vue.component('chart', {
                 }
             }
 
+            if (this.$props.jp_props.events.indexOf('zoom_x') >= 0) {
+                update_dict.xAxis = {
+                    events: {}
+                };
+                update_dict.xAxis.events.setExtremes = function (e) {
+                    var p = {
+                        event_type: 'zoom_x',
+                        id: id,
+                        type: e.type,
+                        min: e.min,
+                        max: e.max,
+                        page_id: page_id,
+                        websocket_id: websocket_id
+                    };
+                    send_to_server(p, 'event');
+                }
+            }
+            if (this.$props.jp_props.events.indexOf('zoom_y') >= 0) {
+                update_dict.yAxis = {
+                    events: {}
+                };
+                update_dict.yAxis.events.setExtremes = function (e) {
+                    var p = {
+                        event_type: 'zoom_y',
+                        id: id,
+                        type: e.type,
+                        min: e.min,
+                        max: e.max,
+                        page_id: page_id,
+                        websocket_id: websocket_id
+                    };
+                    send_to_server(p, 'event');
+                }
+            }
+
             c.update(update_dict);
         }
     },

nicegui/static/templates/js/editorjp.js

@@ -73,7 +73,7 @@ Vue.component('editorjp', {
 
     },
     updated() {
-        if (this.$props.jp_props.input_type) {    //this.$props.jp_props.input_type
+        if (this.$props.jp_props.input_type) {
             if (this.$props.cached_value != this.$props.jp_props.value) {
                 var cursor_position = this.$props.simplemde.codemirror.getCursor();
                 this.$props.simplemde.value(this.$props.jp_props.value);

nicegui/static/templates/js/event_handler.js

@@ -12,6 +12,7 @@ function eventHandler(props, event, form_data, aux) {
         console.log('-------------------------');
     }
     if (!websocket_ready && use_websockets) {
+        setTimeout(function(){ eventHandler(props, event, form_data, aux); }, 100);
         return;
     }
     let event_type = event.type;
@@ -132,8 +133,7 @@ function send_to_server(e, event_type, debug_flag) {
     }
     if (use_websockets) {
         if (web_socket_closed) {
-            let ok_to_reload = confirm('Page needs to be reloaded, click OK to reload');
-            if (ok_to_reload) window.location.reload();
+            window.location.reload();
             return;
         }
         if (websocket_ready) {

nicegui/static/templates/js/html_component.js

@@ -253,6 +253,9 @@ Vue.component('html_component', {
     mounted() {
         const el = this.$refs['r' + this.$props.jp_props.id];
         const props = this.$props.jp_props;
+         if (Boolean(props.attrs.srcdoc)) {
+             this.$props.jp_props.attrs.srcdoc = decodeURIComponent(this.$props.jp_props.attrs.srcdoc);
+         }
 
         if (props.animation) this.animateFunction();
         if (props.id && props.transition && props.transition.load) this.transitionLoadFunction();
@@ -296,6 +299,9 @@ Vue.component('html_component', {
     updated() {
         const el = this.$refs['r' + this.$props.jp_props.id];
         const props = this.$props.jp_props;
+        if (Boolean(props.attrs.srcdoc)) {
+             this.$props.jp_props.attrs.srcdoc = decodeURIComponent(this.$props.jp_props.attrs.srcdoc);
+         }
 
         if (props.animation) this.animateFunction();
         if (this.$props.jp_props.id && props.transition) this.transitionFunction();

nicegui/static/templates/js/quasar_component.js

@@ -25,7 +25,7 @@ Vue.component('quasar_component', {
                     if (typeof this.jp_props.attrs[evaluated_prop] == 'string') {
                         this.jp_props.attrs[evaluated_prop] = eval(this.jp_props.attrs[evaluated_prop])
                     } else {
-                        for (let j = 0; i < this.jp_props.attrs[evaluated_prop].length; i++) {
+                        for (let j = 0; i < this.jp_props.attrs[evaluated_prop].length; j++) {
                             this.jp_props.attrs[evaluated_prop][j] = eval(this.jp_props.attrs[evaluated_prop][j]);
                         }
                     }
@@ -113,6 +113,16 @@ Vue.component('quasar_component', {
                     fn = this.cancelEvent;
                     break;
 
+                    // For QResizeObserver
+                case 'resize':
+                fn = this.resizeEvent;
+                break;
+
+                 // For QSelect
+                case 'filter':
+                fn = this.filterEvent;
+                break;
+
                 default:
                     fn = this.defaultEvent;
             }
@@ -225,6 +235,12 @@ Vue.component('quasar_component', {
             storage_dict['r' + this.$props.jp_props.id] = done;
             this.eventFunction(index, 'load');
         }),
+        resizeEvent: (function (event) {
+            this.eventFunction(event, 'resize');
+        }),
+        filterEvent: (function (event) {
+            this.eventFunction(event, 'filter');
+        }),
         submitEvent: (function (event) {
             var form_elements_list = [];
             var props = this.$props;

nicegui/static/templates/main.html

@@ -15,6 +15,12 @@
     {% include 'js/quasar_component.js' %}
     {% include 'js/chartjp.js' %}
     {% include 'js/aggrid.js' %}
+    {% include 'js/iframejp.js' %}
+    {% include 'js/deckgl.js' %}
+    {% include 'js/altairjp.js' %}
+    {% include 'js/plotlyjp.js' %}
+    {% include 'js/bokehjp.js' %}
+    {% include 'js/katexjp.js' %}
     {% include 'js/editorjp.js' %}
 
     {% if page_options.title is not none %}
@@ -34,12 +40,27 @@
 
     {% for event in page_options.events %}
         document.addEventListener('{{ event }}', function (evt) {
+            console.log(evt);
             const e = {
                 'event_type': '{{ event }}',
                 'visibility': document.visibilityState,
                 'page_id': page_id,
                 'websocket_id': websocket_id
             };
+            if (evt instanceof KeyboardEvent) {
+        // https://developer.mozilla.org/en-US/docs/Web/Events/keydown   keyup, keypress
+        e['key_data'] = {
+            altKey: evt.altKey,
+            ctrlKey: evt.ctrlKey,
+            shiftKey: evt.shiftKey,
+            metaKey: evt.metaKey,
+            code: evt.code,
+            key: evt.key,
+            location: evt.location,
+            repeat: evt.repeat,
+            locale: evt.locale
+        }
+    }
             send_to_server(e, 'page_event', false);
         });
     {% endfor %}
@@ -53,28 +74,27 @@
         }
         path_prefix = '{{ request.headers.get('X-Forwarded-Prefix','') }}'
         if (location.port) {
-            var socket = new WebSocket(protocol_string + document.domain + ':' + location.port + path_prefix );
+            var socket = new WebSocket(protocol_string + document.domain + ':' + location.port + path_prefix);
         } else {
             var socket = new WebSocket(protocol_string + document.domain + path_prefix);
         }
 
         socket.addEventListener('open', function (event) {
-            console.log('Websocket opened');
+            console.log('Webocket opened');
             socket.send(JSON.stringify({'type': 'connect', 'page_id': page_id}));
         });
 
         socket.addEventListener('error', function (event) {
             console.log('Websocket closed');
-            let ok_to_reload = confirm('Page needs to be reloaded, click OK to reload');
-            if (ok_to_reload) window.location.reload()
+            window.location.reload();
+            // setTimeout(function(){ window.location.reload(); }, 3000);
         });
 
         var web_socket_closed = false;
         socket.addEventListener('close', function (event) {
             console.log('Websocket closed');
             web_socket_closed = true;
-            let ok_to_reload = confirm('Page needs to be reloaded, click OK to reload');
-            if (ok_to_reload) window.location.reload()
+            window.location.reload()
         });
 
         socket.addEventListener('message', function (event) {

nicegui/static/templates/quasar.html

@@ -4,12 +4,12 @@
 
     {% include 'favicon.html' %}
 
-        {% if options.tailwind %}
+    {% if options.tailwind %}
             {% if not options.no_internet %}
-                <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">
+                <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2.0/dist/base.min.css">
+                <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2.0/dist/components.min.css">
+                <link rel="stylesheet" href="https://unpkg.com/@tailwindcss/typography@0.4.x/dist/typography.min.css">
+                <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2.0/dist/utilities.min.css">
             {% else %}
                 <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">
@@ -29,9 +29,11 @@
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"/>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"/>
         {% if options.quasar_version %}
-            <link href="https://cdn.jsdelivr.net/npm/quasar@{{ options.quasar_version }}/dist/quasar.min.css" rel="stylesheet" type="text/css">
+            <link href="https://cdn.jsdelivr.net/npm/quasar@{{ options.quasar_version }}/dist/quasar.min.css"
+                  rel="stylesheet" type="text/css">
         {% else %}
-            <link href="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.min.css" rel="stylesheet" type="text/css">
+            <link href="https://cdn.jsdelivr.net/npm/quasar@^1.0.3/dist/quasar.min.css" rel="stylesheet"
+                  type="text/css">
         {% endif %}
     {% else %}
         <link rel="stylesheet" href="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/robotofont/robotofont.css"/>
@@ -48,25 +50,7 @@
 
     {{ page_options.head_html | safe }}
 
-    {% 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="{{ request.headers.get('X-Forwarded-Prefix','') }}/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="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/ag-grid-enterprise.js"></script>
-        {% endif %}
-    {% endif %}
+    {% include 'optional_packages.html' %}
 
 </head>
 

nicegui/static/templates/tailwind.html

@@ -7,10 +7,10 @@
 
         {% if options.tailwind %}
             {% if not options.no_internet %}
-                <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">
+                <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2.0/dist/base.min.css">
+                <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2.0/dist/components.min.css">
+                <link rel="stylesheet" href="https://unpkg.com/@tailwindcss/typography@0.4.x/dist/typography.min.css">
+                <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2.0/dist/utilities.min.css">
             {% else %}
                 <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">
@@ -47,25 +47,8 @@
             {% endif %}
         {% endif %}
 
-        {% 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="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/ag-grid-community.js"></script>
-            {% endif %}
-        {% endif %}
+        {% include 'optional_packages.html' %}
 
-        {% 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="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/ag-grid-enterprise.js"></script>
-            {% endif %}
-        {% endif %}
     </head>
 
 

nicegui/static/templates/tailwindui.html

@@ -8,10 +8,10 @@
         {% if options.tailwind %}
             {% if not options.no_internet %}
                 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.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/typography@/dist/typography.min.css">
             {% else %}
-                <link href="/templates/local/tailwindui.css" rel="stylesheet">
-                <link href="/templates/local/tailwind/typography.css" rel="stylesheet">
+                <link href="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/tailwindui.css" rel="stylesheet">
+                <link href="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/tailwind/typography.css" rel="stylesheet">
 
             {% endif %}
             <style>
@@ -24,8 +24,8 @@
             <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"/>
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"/>
         {% else %}
-            <link rel="stylesheet" href="/templates/local/fontawesome/css/all.min.css"/>
-            <link rel="stylesheet" href="/templates/local/animate.css"/>
+            <link rel="stylesheet" href="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/fontawesome/css/all.min.css"/>
+            <link rel="stylesheet" href="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/animate.css"/>
         {% endif %}
 
         <style>
@@ -39,8 +39,8 @@
                 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
                 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
             {% else %}
-                <script src="/templates/local/jquery.js"></script>
-                <script src="/templates/local/vue.js"></script>
+                <script src="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/jquery.js"></script>
+                <script src="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/vue.js"></script>
             {% endif %}
         {% endif %}
 
@@ -52,7 +52,7 @@
             {% 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>
+                <script src="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/ag-grid-community.js"></script>
             {% endif %}
         {% endif %}
 
@@ -60,7 +60,7 @@
             {% 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>
+                <script src="{{ request.headers.get('X-Forwarded-Prefix','') }}/templates/local/ag-grid-enterprise.js"></script>
             {% endif %}
         {% endif %}
     </head>