nicegui 2.1.0__tar.gz → 2.2.0__tar.gz

{nicegui-2.1.0 → nicegui-2.2.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: nicegui
-Version: 2.1.0
+Version: 2.2.0
 Summary: Create web-based user interfaces with Python. The nice way.
 Home-page: https://github.com/zauberzeug/nicegui
 License: MIT

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/element.py

@@ -518,7 +518,7 @@ class Element(Visibility):
             additions.append(f'text={shorten(self._text)}')
         if hasattr(self, 'content') and self.content:  # pylint: disable=no-member
             additions.append(f'content={shorten(self.content)}')  # pylint: disable=no-member
-        IGNORED_PROPS = {'loopback', 'color', 'view', 'innerHTML', 'codehilite_css'}
+        IGNORED_PROPS = {'loopback', 'color', 'view', 'innerHTML', 'codehilite_css_url'}
         additions += [
             f'{key}={shorten(value)}'
             for key, value in self._props.items()

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/element_filter.py

@@ -10,7 +10,9 @@ from .elements.mixins.content_element import ContentElement
 from .elements.mixins.source_element import SourceElement
 from .elements.mixins.text_element import TextElement
 from .elements.notification import Notification
+from .elements.radio import Radio
 from .elements.select import Select
+from .elements.toggle import Toggle
 
 T = TypeVar('T', bound=Element)
 
@@ -109,16 +111,17 @@ class ElementFilter(Generic[T]):
                     element.props.get('icon'),
                     element.props.get('placeholder'),
                     element.props.get('value'),
+                    element.props.get('error-message'),
                     element.text if isinstance(element, TextElement) else None,
                     element.content if isinstance(element, ContentElement) else None,
                     element.source if isinstance(element, SourceElement) else None,
                 ) if content]
                 if isinstance(element, Notification):
                     element_contents.append(element.message)
-                if isinstance(element, Select):
+                if isinstance(element, (Select, Radio, Toggle)):
                     options = {option['value']: option['label'] for option in element.props.get('options', [])}
                     element_contents.append(options.get(element.value, ''))
-                    if element.is_showing_popup:
+                    if not isinstance(element, Select) or element.is_showing_popup:
                         element_contents.extend(options.values())
                 if any(all(needle not in str(haystack) for haystack in element_contents) for needle in self._contents):
                     continue

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/elements/choice_element.py

@@ -41,7 +41,6 @@ class ChoiceElement(ValueElement):
         :param value: The new value. If not given, the current value is kept.
         """
         self.options = options
-        self.update()
         if value is not ...:
             self.value = value
-            self.update()
+        self.update()

nicegui-2.2.0/nicegui/elements/colors.js

@@ -0,0 +1,35 @@
+export default {
+  mounted() {
+    for (let name in this.$props) {
+      if (name === "customColors") continue;
+      document.body.style.setProperty("--q-" + name.replace("_", "-"), this.$props[name]);
+    }
+    if (this.customColors) {
+      let customCSS = "";
+      for (let customColor in this.customColors) {
+        const colorName = customColor.replaceAll("_", "-");
+        const colorVar = "--q-" + colorName;
+        document.body.style.setProperty(colorVar, this.customColors[customColor]);
+        customCSS += `.text-${colorName} { color: var(${colorVar}) !important; }\n`;
+        customCSS += `.bg-${colorName} { background-color: var(${colorVar}) !important; }\n`;
+      }
+      const style = document.createElement("style");
+      style.innerHTML = customCSS;
+      style.dataset.niceguiCustomColors = "";
+      document.head.querySelectorAll("[data-nicegui-custom-colors]").forEach((el) => el.remove());
+      document.getElementsByTagName("head")[0].appendChild(style);
+    }
+  },
+  props: {
+    primary: String,
+    secondary: String,
+    accent: String,
+    dark: String,
+    dark_page: String,
+    positive: String,
+    negative: String,
+    info: String,
+    warning: String,
+    customColors: Object,
+  },
+};

nicegui-2.2.0/nicegui/elements/colors.py

@@ -0,0 +1,45 @@
+from ..element import Element
+from .mixins.color_elements import QUASAR_COLORS
+
+
+class Colors(Element, component='colors.js'):
+
+    def __init__(self, *,
+                 primary: str = '#5898d4',
+                 secondary: str = '#26a69a',
+                 accent: str = '#9c27b0',
+                 dark: str = '#1d1d1d',
+                 dark_page: str = '#121212',
+                 positive: str = '#21ba45',
+                 negative: str = '#c10015',
+                 info: str = '#31ccec',
+                 warning: str = '#f2c037',
+                 **custom_colors: str) -> None:
+        """Color Theming
+
+        Sets the main colors (primary, secondary, accent, ...) used by `Quasar <https://quasar.dev/style/theme-builder>`_.
+
+        :param primary: Primary color (default: "#5898d4")
+        :param secondary: Secondary color (default: "#26a69a")
+        :param accent: Accent color (default: "#9c27b0")
+        :param dark: Dark color (default: "#1d1d1d")
+        :param dark_page: Dark page color (default: "#121212")
+        :param positive: Positive color (default: "#21ba45")
+        :param negative: Negative color (default: "#c10015")
+        :param info: Info color (default: "#31ccec")
+        :param warning: Warning color (default: "#f2c037")
+        :param custom_colors: Custom color definitions for branding (needs ``ui.colors`` to be called before custom color is ever used)
+        """
+        super().__init__()
+        self._props['primary'] = primary
+        self._props['secondary'] = secondary
+        self._props['accent'] = accent
+        self._props['dark'] = dark
+        self._props['dark_page'] = dark_page
+        self._props['positive'] = positive
+        self._props['negative'] = negative
+        self._props['info'] = info
+        self._props['warning'] = warning
+        self._props['customColors'] = custom_colors
+        QUASAR_COLORS.update({name.replace('_', '-') for name in custom_colors})
+        self.update()

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/elements/echart.py

@@ -100,7 +100,7 @@ class EChart(Element, component='echart.js', dependencies=['lib/echarts/echarts.
         self.run_method('update_chart')
 
     def run_chart_method(self, name: str, *args, timeout: float = 1) -> AwaitableResponse:
-        """Run a method of the JSONEditor instance.
+        """Run a method of the EChart instance.
 
         See the `ECharts documentation <https://echarts.apache.org/en/api.html#echartsInstance>`_ for a list of methods.
 

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/elements/markdown.js

@@ -1,7 +1,10 @@
+import { loadResource } from "../../static/utils/resources.js";
+
 export default {
   template: `<div></div>`,
   async mounted() {
-    this.ensure_codehilite_css();
+    await this.$nextTick(); // NOTE: wait for window.path_prefix to be set
+    await loadResource(window.path_prefix + this.codehilite_css_url);
     if (this.use_mermaid) {
       this.mermaid = (await import("mermaid")).default;
       this.renderMermaid();
@@ -21,17 +24,9 @@ export default {
         await this.mermaid.run({ nodes: [pre.children[0]] });
       });
     },
-    ensure_codehilite_css() {
-      if (!document.querySelector(`style[data-codehilite-css]`)) {
-        const style = document.createElement("style");
-        style.setAttribute("data-codehilite-css", "");
-        style.innerHTML = this.codehilite_css;
-        document.head.appendChild(style);
-      }
-    },
   },
   props: {
-    codehilite_css: String,
+    codehilite_css_url: String,
     use_mermaid: {
       required: false,
       default: false,

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/elements/markdown.py

@@ -3,11 +3,16 @@ from functools import lru_cache
 from typing import List
 
 import markdown2
+from fastapi.responses import PlainTextResponse
 from pygments.formatters import HtmlFormatter  # pylint: disable=no-name-in-module
 
+from .. import core
+from ..version import __version__
 from .mermaid import Mermaid
 from .mixins.content_element import ContentElement
 
+CODEHILITE_CSS_URL = f'/_nicegui/{__version__}/codehilite.css'
+
 
 class Markdown(ContentElement, component='markdown.js'):
 
@@ -25,14 +30,18 @@ class Markdown(ContentElement, component='markdown.js'):
         self.extras = extras[:]
         super().__init__(content=content)
         self._classes.append('nicegui-markdown')
-        self._props['codehilite_css'] = (
-            HtmlFormatter(nobackground=True).get_style_defs('.codehilite') +
-            HtmlFormatter(nobackground=True, style='github-dark').get_style_defs('.body--dark .codehilite')
-        )
         if 'mermaid' in extras:
             self._props['use_mermaid'] = True
             self.libraries.append(Mermaid.exposed_libraries[0])
 
+        self._props['codehilite_css_url'] = CODEHILITE_CSS_URL
+        if not any(r for r in core.app.routes if getattr(r, 'path', None) == CODEHILITE_CSS_URL):
+            core.app.get(CODEHILITE_CSS_URL)(lambda: PlainTextResponse(
+                HtmlFormatter(nobackground=True).get_style_defs('.codehilite') +
+                HtmlFormatter(nobackground=True, style='github-dark').get_style_defs('.body--dark .codehilite'),
+                media_type='text/css',
+            ))
+
     def _handle_content_change(self, content: str) -> None:
         html = prepare_content(content, extras=' '.join(self.extras))
         if self._props.get('innerHTML') != html:

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/elements/plotly.vue

@@ -13,6 +13,12 @@ export default {
   },
   methods: {
     update() {
+      // wait for plotly to be loaded
+      if (typeof Plotly === "undefined") {
+        setTimeout(this.update, 10);
+        return;
+      }
+
       // default responsive to true
       const options = this.options;
       if (options.config === undefined) options.config = { responsive: true };

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/elements/scene.js

@@ -279,6 +279,9 @@ export default {
           undefined,
           (error) => console.error(error)
         );
+      } else if (type == "axes_helper") {
+        mesh = new THREE.AxesHelper(args[0]);
+        mesh.material.transparent = true;
       } else {
         let geometry;
         const wireframe = args.pop();
@@ -401,6 +404,7 @@ export default {
     },
     move_camera(x, y, z, look_at_x, look_at_y, look_at_z, up_x, up_y, up_z, duration) {
       if (this.camera_tween) this.camera_tween.stop();
+      const camera_up_changed = up_x !== null || up_y !== null || up_z !== null;
       this.camera_tween = new TWEEN.Tween([
         this.camera.position.x,
         this.camera.position.y,
@@ -433,6 +437,12 @@ export default {
           this.camera.lookAt(p[6], p[7], p[8]);
           this.controls.target.set(p[6], p[7], p[8]);
         })
+        .onComplete(() => {
+          if (camera_up_changed) {
+            this.controls.dispose();
+            this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+          }
+        })
         .start();
     },
     get_camera() {

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/elements/scene.py

@@ -51,6 +51,7 @@ class Scene(Element,
                 'lib/tween/tween.umd.js',
             ]):
     # pylint: disable=import-outside-toplevel
+    from .scene_objects import AxesHelper as axes_helper
     from .scene_objects import Box as box
     from .scene_objects import Curve as curve
     from .scene_objects import Cylinder as cylinder

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/elements/scene_objects.py

@@ -335,3 +335,21 @@ class PointCloud(Object3D):
         self.args[0] = points
         self.args[1] = colors
         self.scene.run_method('set_points', self.id, points, colors)
+
+
+class AxesHelper(Object3D):
+
+    def __init__(self,
+                 length: float = 1.0,
+                 ) -> None:
+        """Axes Helper
+
+        This element is based on Three.js' `AxesHelper <https://threejs.org/docs/#api/en/helpers/AxesHelper>`_ object.
+        It is used to visualize the XYZ axes:
+        The X axis is red.
+        The Y axis is green.
+        The Z axis is blue.
+
+        :param length: length of the the axes (default: 1.0)
+        """
+        super().__init__('axes_helper', length)

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/functions/navigate.py

@@ -60,6 +60,8 @@ class Navigate:
             path = f'#c{target.id}'
         elif callable(target):
             path = Client.page_routes[target]
+        else:
+            raise TypeError(f'Invalid target type: {type(target)}')
         context.client.open(path, new_tab)
 
 

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/static/nicegui.js

@@ -158,7 +158,11 @@ function renderRecursively(elements, id) {
   Object.entries(props).forEach(([key, value]) => {
     if (key.startsWith(":")) {
       try {
-        props[key.substring(1)] = eval(value);
+        try {
+          props[key.substring(1)] = new Function(`return (${value})`)();
+        } catch (e) {
+          props[key.substring(1)] = eval(value);
+        }
         delete props[key];
       } catch (e) {
         console.error(`Error while converting ${key} attribute to function:`, e);

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/static/utils/dynamic_properties.js

@@ -11,7 +11,11 @@ export function convertDynamicProperties(obj, recursive) {
   for (const [attr, value] of Object.entries(obj)) {
     if (attr.startsWith(":")) {
       try {
-        obj[attr.slice(1)] = new Function(`return (${value})`)();
+        try {
+          obj[attr.slice(1)] = new Function(`return (${value})`)();
+        } catch (e) {
+          obj[attr.slice(1)] = eval(value);
+        }
         delete obj[attr];
       } catch (e) {
         console.error(`Error while converting ${attr} attribute to function:`, e);

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/testing/user.py

@@ -36,6 +36,12 @@ class User:
         self.notify = UserNotify()
         self.download = UserDownload(self)
 
+    @property
+    def _client(self) -> Client:
+        if self.client is None:
+            raise ValueError('This user has not opened a page yet. Did you forgot to call .open()?')
+        return self.client
+
     def __getattribute__(self, name: str) -> Any:
         if name not in {'notify', 'navigate', 'download'}:  # NOTE: avoid infinite recursion
             ui.navigate = self.navigate
@@ -95,9 +101,8 @@ class User:
         By default `should_see` makes three attempts to find the element before failing.
         This can be adjusted with the `retries` parameter.
         """
-        assert self.client
         for _ in range(retries):
-            with self.client:
+            with self._client:
                 if self.notify.contains(target) or self._gather_elements(target, kind, marker, content):
                     return
                 await asyncio.sleep(0.1)
@@ -130,9 +135,8 @@ class User:
                              retries: int = 3,
                              ) -> None:
         """Assert that the page does not contain an input with the given value."""
-        assert self.client
         for _ in range(retries):
-            with self.client:
+            with self._client:
                 if not self.notify.contains(target) and not self._gather_elements(target, kind, marker, content):
                     return
                 await asyncio.sleep(0.05)
@@ -175,8 +179,7 @@ class User:
              content: Union[str, List[str], None] = None,
              ) -> UserInteraction[T]:
         """Select elements for interaction."""
-        assert self.client
-        with self.client:
+        with self._client:
             elements = self._gather_elements(target, kind, marker, content)
             if not elements:
                 raise AssertionError('expected to find at least one ' +
@@ -186,8 +189,7 @@ class User:
     @property
     def current_layout(self) -> Element:
         """Return the root layout element of the current page."""
-        assert self.client
-        return self.client.layout
+        return self._client.layout
 
     def _gather_elements(self,
                          target: Union[str, Type[T], None] = None,

{nicegui-2.1.0 → nicegui-2.2.0}/nicegui/testing/user_interaction.py

@@ -6,6 +6,7 @@ from typing_extensions import Self
 
 from nicegui import background_tasks, events, ui
 from nicegui.element import Element
+from nicegui.elements.mixins.value_element import ValueElement
 
 if TYPE_CHECKING:
     from .user import User
@@ -43,7 +44,10 @@ class UserInteraction(Generic[T]):
         return self
 
     def type(self, text: str) -> Self:
-        """Type the given text into the selected elements."""
+        """Type the given text into the selected elements.
+
+        Note: All elements must have a ``value`` attribute.
+        """
         assert self.user.client
         with self.user.client:
             for element in self.elements:
@@ -75,3 +79,15 @@ class UserInteraction(Generic[T]):
                     event_arguments = events.GenericEventArguments(sender=element, client=self.user.client, args=args)
                     events.handle_event(listener.handler, event_arguments)
         return self
+
+    def clear(self) -> Self:
+        """Clear the selected elements.
+
+        Note: All elements must have a ``value`` attribute).
+        """
+        assert self.user.client
+        with self.user.client:
+            for element in self.elements:
+                assert isinstance(element, ValueElement)
+                element.value = None
+        return self

{nicegui-2.1.0 → nicegui-2.2.0}/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "nicegui"
-version = "v2.1.0"
+version = "v2.2.0"
 description = "Create web-based user interfaces with Python. The nice way."
 authors = ["Zauberzeug GmbH <info@zauberzeug.com>"]
 license = "MIT"

nicegui-2.1.0/nicegui/elements/colors.js

@@ -1,17 +0,0 @@
-export default {
-  mounted() {
-    for (let name in this.$props) {
-      document.body.style.setProperty("--q-" + name, this.$props[name]);
-    }
-  },
-  props: {
-    primary: String,
-    secondary: String,
-    accent: String,
-    dark: String,
-    positive: String,
-    negative: String,
-    info: String,
-    warning: String,
-  },
-};

nicegui-2.1.0/nicegui/elements/colors.py

@@ -1,28 +0,0 @@
-from ..element import Element
-
-
-class Colors(Element, component='colors.js'):
-
-    def __init__(self, *,
-                 primary='#5898d4',
-                 secondary='#26a69a',
-                 accent='#9c27b0',
-                 dark='#1d1d1d',
-                 positive='#21ba45',
-                 negative='#c10015',
-                 info='#31ccec',
-                 warning='#f2c037') -> None:
-        """Color Theming
-
-        Sets the main colors (primary, secondary, accent, ...) used by `Quasar <https://quasar.dev/style/theme-builder>`_.
-        """
-        super().__init__()
-        self._props['primary'] = primary
-        self._props['secondary'] = secondary
-        self._props['accent'] = accent
-        self._props['dark'] = dark
-        self._props['positive'] = positive
-        self._props['negative'] = negative
-        self._props['info'] = info
-        self._props['warning'] = warning
-        self.update()