Update JavaScript dependencies (#3654)

* update google fonts * update Tailwind API * update JavaScript dependencies * fix relative paths in mermaid library * adjustments for AG Grid version 32 * add new coremirror themes * fix some type annotations * fix echart test * adjustments for vanilla-jsoneditor version 23 * clean up lib folder * adjustments for mermaid version 11 * add missing dependencies for `ui.scene` * fix tween update * fix test about serving image files * restore accidentally removed codemirror dependencies * add missing page function for scene.initialized demo * try to make upload test more robust * fix overflow when adding borders to the plotly plot * prevent some elements from overflowing their containers * found a better workaround * fix EChart layout issue (see #2932) * make sure to pass kwargs to `ui.table` * improve layout of interactive styling demo * fix name of option "suppressFieldDotNotation" * fix another table initializer * fix overflowing window corners * simplify buggy AG Grid theme demo * wait for chart to be initialized * improve initial scene resize * tiny layout fix
zauberzeug · Aug 30, 2024 · 2cf863c · 2cf863c
1 parent 2415996
commit 2cf863c
Show file tree

Hide file tree

Showing 468 changed files with 544,640 additions and 676,119 deletions.
diff --git a/DEPENDENCIES.md b/DEPENDENCIES.md
@@ -1,19 +1,19 @@
 # Included Web Dependencies
 
-- vue: 3.3.6 ([MIT](https://opensource.org/licenses/MIT))
-- quasar: 2.13.0 ([MIT](https://opensource.org/licenses/MIT))
-- tailwindcss: 3.2.0 ([MIT](https://opensource.org/licenses/MIT))
-- socket.io: 4.7.2 ([MIT](https://opensource.org/licenses/MIT))
-- es-module-shims: 1.8.0 ([MIT](https://opensource.org/licenses/MIT))
-- aggrid: 30.2.0 ([MIT](https://opensource.org/licenses/MIT))
+- vue: 3.4.38 ([MIT](https://opensource.org/licenses/MIT))
+- quasar: 2.16.9 ([MIT](https://opensource.org/licenses/MIT))
+- tailwindcss: 3.4.10 ([MIT](https://opensource.org/licenses/MIT))
+- socket.io: 4.7.5 ([MIT](https://opensource.org/licenses/MIT))
+- es-module-shims: 1.10.0 ([MIT](https://opensource.org/licenses/MIT))
+- aggrid: 32.1.0 ([MIT](https://opensource.org/licenses/MIT))
 - codemirror: 6.0.1 ([MIT](https://opensource.org/licenses/MIT))
-- echarts: 5.4.3 ([Apache-2.0](https://opensource.org/licenses/Apache-2.0))
+- echarts: 5.5.1 ([Apache-2.0](https://opensource.org/licenses/Apache-2.0))
 - echarts-gl: 2.0.9 ([BSD-3-Clause](https://opensource.org/licenses/BSD-3-Clause))
 - leaflet: 1.9.4 ([BSD-2-Clause](https://opensource.org/licenses/BSD-2-Clause))
 - leaflet-draw: 1.0.4 ([MIT](https://opensource.org/licenses/MIT))
-- mermaid: 10.5.1 ([MIT](https://opensource.org/licenses/MIT))
-- nipplejs: 0.10.1 ([MIT](https://opensource.org/licenses/MIT))
-- plotly: 2.27.0 ([MIT](https://opensource.org/licenses/MIT))
-- three: 0.157.0 ([MIT](https://opensource.org/licenses/MIT))
-- tween: 21.0.0 ([MIT](https://opensource.org/licenses/MIT))
-- vanilla-jsoneditor: 0.18.10 ([ISC](https://opensource.org/licenses/ISC))
+- mermaid: 11.0.2 ([MIT](https://opensource.org/licenses/MIT))
+- nipplejs: 0.10.2 ([MIT](https://opensource.org/licenses/MIT))
+- plotly: 2.35.0 ([MIT](https://opensource.org/licenses/MIT))
+- three: 0.168.0 ([MIT](https://opensource.org/licenses/MIT))
+- tween: 25.0.0 ([MIT](https://opensource.org/licenses/MIT))
+- vanilla-jsoneditor: 0.23.8 ([ISC](https://opensource.org/licenses/ISC))
diff --git a/nicegui/elements/aggrid.js b/nicegui/elements/aggrid.js
@@ -42,21 +42,18 @@ export default {
         checkboxRenderer: CheckboxRenderer,
       };
 
-      this.grid = new agGrid.Grid(this.$el, this.gridOptions);
-      this.gridOptions.api.addGlobalListener(this.handle_event);
+      this.api = agGrid.createGrid(this.$el, this.gridOptions);
+      this.api.addGlobalListener(this.handle_event);
     },
     run_grid_method(name, ...args) {
-      return runMethod(this.gridOptions.api, name, args);
-    },
-    run_column_method(name, ...args) {
-      return runMethod(this.gridOptions.columnApi, name, args);
+      return runMethod(this.api, name, args);
     },
     run_row_method(row_id, name, ...args) {
-      return runMethod(this.gridOptions.api.getRowNode(row_id), name, args);
+      return runMethod(this.api.getRowNode(row_id), name, args);
     },
     handle_event(type, args) {
       if ((type === "gridReady" || type === "gridSizeChanged") && this.auto_size_columns) {
-        this.gridOptions.api.sizeColumnsToFit();
+        this.api.sizeColumnsToFit();
       }
       this.$emit(type, {
         value: args.value,

diff --git a/nicegui/elements/aggrid.py b/nicegui/elements/aggrid.py
@@ -3,7 +3,7 @@
 
 from typing_extensions import Self
 
-from .. import optional_features
+from .. import helpers, optional_features
 from ..awaitable_response import AwaitableResponse
 from ..element import Element
 
@@ -25,7 +25,7 @@ def __init__(self,
 
         An element to create a grid using `AG Grid <https://www.ag-grid.com/>`_.
 
-        The methods `run_grid_method` and `run_column_method` can be used to interact with the AG Grid instance on the client.
+        The methods `run_grid_method` and `run_row_method` can be used to interact with the AG Grid instance on the client.
 
         :param options: dictionary of AG Grid options
         :param html_columns: list of columns that should be rendered as HTML (default: `[]`)
@@ -79,7 +79,7 @@ def is_special_dtype(dtype):
         return cls({
             'columnDefs': [{'field': str(col)} for col in df.columns],
             'rowData': df.to_dict('records'),
-            'suppressDotNotation': True,
+            'suppressFieldDotNotation': True,
             **options,
         }, theme=theme, auto_size_columns=auto_size_columns)
 
@@ -108,21 +108,15 @@ def run_grid_method(self, name: str, *args, timeout: float = 1) -> AwaitableResp
         """
         return self.run_method('run_grid_method', name, *args, timeout=timeout)
 
-    def run_column_method(self, name: str, *args, timeout: float = 1) -> AwaitableResponse:
-        """Run an AG Grid Column API method.
+    def run_column_method(self, name: str, *args, timeout: float = 1) -> AwaitableResponse:  # DEPRECATED
+        """This method is deprecated. Use `run_grid_method` instead.
 
-        See `AG Grid Column API <https://www.ag-grid.com/javascript-data-grid/column-api/>`_ for a list of methods.
-
-        If the function is awaited, the result of the method call is returned.
-        Otherwise, the method is executed without waiting for a response.
-
-        :param name: name of the method
-        :param args: arguments to pass to the method
-        :param timeout: timeout in seconds (default: 1 second)
-
-        :return: AwaitableResponse that can be awaited to get the result of the method call
+        See https://www.ag-grid.com/javascript-data-grid/column-api/ for more information
         """
-        return self.run_method('run_column_method', name, *args, timeout=timeout)
+        helpers.warn_once('The method `run_column_method` is deprecated. '
+                          'It will be removed in NiceGUI 3.0. '
+                          'Use `run_grid_method` instead.')
+        return self.run_method('run_grid_method', name, *args, timeout=timeout)
 
     def run_row_method(self, row_id: str, name: str, *args, timeout: float = 1) -> AwaitableResponse:
         """Run an AG Grid API method on a specific row.
@@ -191,7 +185,7 @@ async def get_client_data(
         }
         result = await self.client.run_javascript(f'''
             const rowData = [];
-            getElement({self.id}).gridOptions.api.{API_METHODS[method]}(node => rowData.push(node.data));
+            getElement({self.id}).api.{API_METHODS[method]}(node => rowData.push(node.data));
             return rowData;
         ''', timeout=timeout)
         return cast(List[Dict], result)

diff --git a/nicegui/elements/codemirror.py b/nicegui/elements/codemirror.py
@@ -154,51 +154,94 @@
 
 SUPPORTED_THEMES = Literal[
     'abcdef',
+    'abcdefDarkStyle',
     'abyss',
+    'abyssDarkStyle',
     'androidstudio',
+    'androidstudioDarkStyle',
     'andromeda',
+    'andromedaDarkStyle',
     'atomone',
+    'atomoneDarkStyle',
     'aura',
+    'auraDarkStyle',
     'basicDark',
+    'basicDarkStyle',
     'basicLight',
+    'basicLightStyle',
     'bbedit',
+    'bbeditLightStyle',
     'bespin',
+    'bespinDarkStyle',
     'consoleDark',
     'consoleLight',
     'copilot',
+    'copilotDarkStyle',
     'darcula',
+    'darculaDarkStyle',
+    'douToneLightStyle',
     'dracula',
+    'draculaDarkStyle',
     'duotoneDark',
+    'duotoneDarkStyle',
     'duotoneLight',
     'eclipse',
+    'eclipseLightStyle',
     'githubDark',
+    'githubDarkStyle',
     'githubLight',
+    'githubLightStyle',
     'gruvboxDark',
+    'gruvboxDarkStyle',
     'gruvboxLight',
     'kimbie',
+    'kimbieDarkStyle',
     'material',
     'materialDark',
+    'materialDarkStyle',
     'materialLight',
+    'materialLightStyle',
     'monokai',
+    'monokaiDarkStyle',
     'monokaiDimmed',
+    'monokaiDimmedDarkStyle',
     'noctisLilac',
+    'noctisLilacLightStyle',
     'nord',
+    'nordDarkStyle',
     'okaidia',
+    'okaidiaDarkStyle',
     'oneDark',
     'quietlight',
+    'quietlightStyle',
     'red',
+    'redDarkStyle',
     'solarizedDark',
+    'solarizedDarkStyle',
     'solarizedLight',
+    'solarizedLightStyle',
     'sublime',
+    'sublimeDarkStyle',
     'tokyoNight',
     'tokyoNightDay',
+    'tokyoNightDayStyle',
     'tokyoNightStorm',
+    'tokyoNightStormStyle',
+    'tokyoNightStyle',
     'tomorrowNightBlue',
+    'tomorrowNightBlueStyle',
     'vscodeDark',
+    'vscodeDarkStyle',
+    'vscodeLight',
+    'vscodeLightStyle',
     'whiteDark',
+    'whiteDarkStyle',
     'whiteLight',
+    'whiteLightStyle',
     'xcodeDark',
+    'xcodeDarkStyle',
     'xcodeLight',
+    'xcodeLightStyle',
 ]
 
 

diff --git a/nicegui/elements/echart.js b/nicegui/elements/echart.js
@@ -4,7 +4,7 @@ import { convertDynamicProperties } from "../../static/utils/dynamic_properties.
 export default {
   template: "<div></div>",
   async mounted() {
-    await this.$nextTick(); // wait for Tailwind classes to be applied
+    await new Promise((resolve) => setTimeout(resolve, 0)); // wait for Tailwind classes to be applied
     if (this.enable_3d) {
       await import("echarts-gl");
     }
@@ -72,6 +72,10 @@ export default {
   },
   methods: {
     update_chart() {
+      if (!this.chart) {
+        setTimeout(this.update_chart, 10);
+        return;
+      }
       convertDynamicProperties(this.options, true);
       this.chart.setOption(this.options, { notMerge: this.chart.options?.series.length != this.options.series.length });
     },

diff --git a/nicegui/elements/json_editor.js b/nicegui/elements/json_editor.js
@@ -1,4 +1,4 @@
-import { JSONEditor } from "index";
+import { JSONEditor } from "standalone";
 
 export default {
   template: "<div></div>",

diff --git a/nicegui/elements/json_editor.py b/nicegui/elements/json_editor.py
@@ -7,7 +7,7 @@
 from ..events import GenericEventArguments, JsonEditorChangeEventArguments, JsonEditorSelectEventArguments, handle_event
 
 
-class JsonEditor(Element, component='json_editor.js', dependencies=['lib/vanilla-jsoneditor/index.js']):
+class JsonEditor(Element, component='json_editor.js', dependencies=['lib/vanilla-jsoneditor/standalone.js']):
 
     def __init__(self,
                  properties: Dict, *,