Merge branch 'main' into xss

.github/workflows/test.yml

@@ -32,9 +32,7 @@ jobs:
  - name: test startup
  run: ./test_startup.sh
  - name: setup chromedriver
- uses: nanasess/setup-chromedriver@v2.0.0
- with:
- chromedriver-version: "114.0.5735.90"
+ uses: nanasess/setup-chromedriver@v2.1.1
  - name: pytest
  run: pytest
  - name: upload screenshots

.vscode/settings.json

@@ -1,7 +1,6 @@
 {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
- "editor.minimap.enabled": false,
  "isort.args": ["--line-length", "120"],
  "prettier.printWidth": 120,
  "python.formatting.provider": "autopep8",

main.py

@@ -1,13 +1,6 @@
 #!/usr/bin/env python3
 import importlib
 import inspect
-
-if True:
- # increasing max decode packets to be able to transfer images
- # see https://github.com/miguelgrinberg/python-engineio/issues/142
- from engineio.payload import Payload
- Payload.max_decode_packets = 500
-
 import os
 from pathlib import Path
 from typing import Awaitable, Callable, Optional

nicegui/elements/query.js

@@ -13,7 +13,7 @@ export default {
  },
  add_style(style) {
  Object.entries(style).forEach(([key, val]) =>
- document.querySelectorAll(this.selector).forEach((e) => (e.style[key] = val))
+ document.querySelectorAll(this.selector).forEach((e) => e.style.setProperty(key, val))
  );
  },
  remove_style(keys) {

tests/conftest.py

@@ -6,9 +6,9 @@
 import pytest
 from selenium import webdriver
 from selenium.webdriver.chrome.service import Service
-from webdriver_manager.chrome import ChromeDriverManager
 
 from nicegui import Client, globals
+from nicegui.elements import plotly, pyplot
 from nicegui.page import page
 
 from .screen import Screen
@@ -32,13 +32,17 @@ def capabilities(capabilities: Dict) -> Dict:
 
 @pytest.fixture(autouse=True)
 def reset_globals() -> Generator[None, None, None]:
+ print('!!! resetting globals !!!')
  for path in {'/'}.union(globals.page_routes.values()):
  globals.app.remove_route(path)
  globals.app.middleware_stack = None
  globals.app.user_middleware.clear()
  # NOTE favicon routes must be removed separately because they are not "pages"
  [globals.app.routes.remove(r) for r in globals.app.routes if r.path.endswith('/favicon.ico')]
  importlib.reload(globals)
+ # repopulate globals.optional_features
+ importlib.reload(plotly)
+ importlib.reload(pyplot)
  globals.app.storage.clear()
  globals.index_client = Client(page('/'), shared=True).__enter__()
  globals.app.get('/')(globals.index_client.build_response)
@@ -53,7 +57,7 @@ def remove_all_screenshots() -> None:
 
 @pytest.fixture(scope='function')
 def driver(chrome_options: webdriver.ChromeOptions) -> webdriver.Chrome:
- s = Service(ChromeDriverManager().install())
+ s = Service()
  driver = webdriver.Chrome(service=s, options=chrome_options)
  driver.implicitly_wait(Screen.IMPLICIT_WAIT)
  driver.set_page_load_timeout(4)

tests/test_query.py

@@ -52,3 +52,11 @@ def test_query_multiple_divs(screen: Screen):
  screen.wait(0.5)
  assert screen.find('A').value_of_css_property('border') == '1px solid rgb(0, 0, 0)'
  assert screen.find('B').value_of_css_property('border') == '1px solid rgb(0, 0, 0)'
+
+
+def test_query_with_css_variables(screen: Screen):
+ ui.add_body_html('<div id="element">Test</div>')
+ ui.query('#element').style('--color: red; color: var(--color)')
+
+ screen.open('/')
+ assert screen.find('Test').value_of_css_property('color') == 'rgba(255, 0, 0, 1)'

website/documentation.py

@@ -164,7 +164,7 @@ def add_face():
  add_face()
 
  ui.button('Add', on_click=add_face)
- ui.button('Remove', on_click=lambda: container.remove(0))
+ ui.button('Remove', on_click=lambda: container.remove(0) if list(container) else None)
  ui.button('Clear', on_click=container.clear)
 
  load_demo(ui.expansion)

website/search.py

@@ -32,7 +32,8 @@ def __init__(self) -> None:
  ui.icon('search', size='2em')
  ui.input(placeholder='Search documentation', on_change=self.handle_input) \
  .classes('flex-grow').props('borderless autofocus')
- ui.button('ESC').props('padding="2px 8px" outline size=sm color=grey-5').classes('shadow')
+ ui.button('ESC', on_click=self.dialog.close) \
+ .props('padding="2px 8px" outline size=sm color=grey-5').classes('shadow')
  ui.separator()
  self.results = ui.element('q-list').classes('w-full').props('separator')
  ui.keyboard(self.handle_keypress)

website/static/search_index.json

@@ -144,6 +144,11 @@
  "content": "Using NiceGUI as web interface for a ROS2 robot",
  "url": "https://github.com/zauberzeug/nicegui/tree/main/examples/ros2/"
  },
+ {
+ "title": "Example: Download Text as File",
+ "content": "providing in-memory data like strings as file download",
+ "url": "https://github.com/zauberzeug/nicegui/tree/main/examples/download_text_as_file/main.py"
+ },
  {
  "title": "Basic Elements",
  "content": "This is **Markdown**.",
@@ -874,6 +879,11 @@
  "content": "You can also use Lottie files with animations.",
  "url": "/documentation/image#lottie_files"
  },
+ {
+ "title": "Image: Image link",
+ "content": "Images can link to another page by wrapping them in a ui.link.",
+ "url": "/documentation/image#image_link"
+ },
  {
  "title": "Color Theming",
  "content": "Sets the main colors (primary, secondary, accent, ...) used by Quasar <https://quasar.dev/>_.",
@@ -1094,6 +1104,11 @@
  "content": "You can link to other pages by providing the link target as path or function reference.",
  "url": "/documentation/link#links_to_other_pages"
  },
+ {
+ "title": "Link: Link from images and other elements",
+ "content": "By nesting elements inside a link you can make the whole element clickable. This works with all elements but is most useful for non-interactive elements like ui.image, ui.avatar etc.",
+ "url": "/documentation/link#link_from_images_and_other_elements"
+ },
  {
  "title": "Log view",
  "content": "Create a log view that allows to add new lines without re-transmitting the whole history to the client. :param max_lines: maximum number of lines before dropping oldest ones (default: None) push clear Clear the log",