nicegui 1.2.0__tar.gz → 1.2.2__tar.gz

{nicegui-1.2.0 → nicegui-1.2.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: nicegui
-Version: 1.2.0
+Version: 1.2.2
 Summary: Web User Interface with Buttons, Dialogs, Markdown, 3D Scences and Plots
 Home-page: https://github.com/zauberzeug/nicegui
 License: MIT
@@ -111,10 +111,10 @@ Note: NiceGUI will automatically reload the page when you modify the code.
 
 ## Documentation and Examples
 
-The API reference is hosted at [https://nicegui.io/reference](https://nicegui.io/reference) and provides plenty of live examples.
+The documentation is hosted at [https://nicegui.io/documentation](https://nicegui.io/documentation) and provides plenty of live demos.
 The whole content of [https://nicegui.io](https://nicegui.io) is [implemented with NiceGUI itself](https://github.com/zauberzeug/nicegui/blob/main/main.py).
 
-You may also have a look at [our in-depth demonstrations](https://github.com/zauberzeug/nicegui/tree/main/examples) of what you can do with NiceGUI.
+You may also have a look at our [in-depth examples](https://github.com/zauberzeug/nicegui/tree/main/examples) of what you can do with NiceGUI.
 
 ## Why?
 

{nicegui-1.2.0 → nicegui-1.2.2}/README.md

@@ -75,10 +75,10 @@ Note: NiceGUI will automatically reload the page when you modify the code.
 
 ## Documentation and Examples
 
-The API reference is hosted at [https://nicegui.io/reference](https://nicegui.io/reference) and provides plenty of live examples.
+The documentation is hosted at [https://nicegui.io/documentation](https://nicegui.io/documentation) and provides plenty of live demos.
 The whole content of [https://nicegui.io](https://nicegui.io) is [implemented with NiceGUI itself](https://github.com/zauberzeug/nicegui/blob/main/main.py).
 
-You may also have a look at [our in-depth demonstrations](https://github.com/zauberzeug/nicegui/tree/main/examples) of what you can do with NiceGUI.
+You may also have a look at our [in-depth examples](https://github.com/zauberzeug/nicegui/tree/main/examples) of what you can do with NiceGUI.
 
 ## Why?
 

{nicegui-1.2.0 → nicegui-1.2.2}/nicegui/element.py

@@ -1,7 +1,6 @@
 from __future__ import annotations
 
 import re
-from abc import ABC
 from copy import deepcopy
 from typing import TYPE_CHECKING, Any, Callable, Dict, List, Optional, Union
 
@@ -20,12 +19,13 @@ if TYPE_CHECKING:
 PROPS_PATTERN = re.compile(r'([\w\-]+)(?:=(?:("[^"\\]*(?:\\.[^"\\]*)*")|([\w\-.%:\/]+)))?(?:$|\s)')
 
 
-class Element(ABC, Visibility):
+class Element(Visibility):
 
     def __init__(self, tag: str, *, _client: Optional[Client] = None) -> None:
         """Generic Element
 
-        This class is also the base class for all other elements.
+        This class is the base class for all other UI elements.
+        But you can use it to create elements with arbitrary HTML tags.
 
         :param tag: HTML tag of the element
         :param _client: client for this element (for internal use only)
@@ -167,10 +167,6 @@ class Element(ABC, Visibility):
 
         Removing or replacing styles can be helpful if the predefined style is not desired.
 
-        .. codeblock:: python
-
-            ui.button('Click me').style('color: #6E93D6; font-size: 200%', remove='font-weight; background-color')
-
         :param add: semicolon-separated list of styles to add to the element
         :param remove: semicolon-separated list of styles to remove from the element
         :param replace: semicolon-separated list of styles to use instead of existing ones
@@ -203,10 +199,6 @@ class Element(ABC, Visibility):
         This allows modifying the look of the element or its layout using `Quasar <https://quasar.dev/>`_ props.
         Since props are simply applied as HTML attributes, they can be used with any HTML element.
 
-        .. codeblock:: python
-
-            ui.button('Open menu').props('outline icon=menu')
-
         Boolean properties are assumed ``True`` if no value is specified.
 
         :param add: whitespace-delimited list of either boolean values or key=value pair to add

{nicegui-1.2.0 → nicegui-1.2.2}/nicegui/elements/chart.js

@@ -9,12 +9,25 @@ export default {
       });
     }, 0); // NOTE: wait for window.path_prefix to be set in app.mounted()
   },
+  beforeDestroy() {
+    this.destroyChart();
+  },
+  beforeUnmount() {
+    this.destroyChart();
+  },
   methods: {
     update_chart() {
-      while (this.chart.series.length > this.options.series.length) this.chart.series[0].remove();
-      while (this.chart.series.length < this.options.series.length) this.chart.addSeries({}, false);
-      this.chart.update(this.options);
+      if (this.chart) {
+        while (this.chart.series.length > this.options.series.length) this.chart.series[0].remove();
+        while (this.chart.series.length < this.options.series.length) this.chart.addSeries({}, false);
+        this.chart.update(this.options);
+      }
     },
+    destroyChart () {
+      if (this.chart) {
+        this.chart.destroy()
+      }
+    }
   },
   props: {
     type: String,

{nicegui-1.2.0 → nicegui-1.2.2}/nicegui/elements/color_input.py

@@ -26,5 +26,11 @@ class ColorInput(ValueElement):
 
         with self.add_slot('append'):
             self.picker = ColorPicker(on_pick=lambda e: self.set_value(e.color))
-            self.button = ui.button(on_click=self.picker.open) \
+            self.button = ui.button(on_click=self.open_picker) \
                 .props('icon=colorize flat round', remove='color').classes('cursor-pointer')
+
+    def open_picker(self) -> None:
+        """Open the color picker"""
+        if self.value:
+            self.picker.set_color(self.value)
+        self.picker.open()

{nicegui-1.2.0 → nicegui-1.2.2}/nicegui/elements/color_picker.py

@@ -18,4 +18,11 @@ class ColorPicker(Menu):
         with self:
             def handle_change(msg: Dict):
                 handle_event(on_pick, ColorPickEventArguments(sender=self, client=self.client, color=msg['args']))
-            Element('q-color').on('change', handle_change)
+            self.q_color = Element('q-color').on('change', handle_change)
+
+    def set_color(self, color: str) -> None:
+        """Set the color of the picker
+
+        :param color: the color to set
+        """
+        self.q_color.props(f'model-value="{color}"')

nicegui-1.2.2/nicegui/elements/interactive_image.js

@@ -0,0 +1,65 @@
+export default {
+  template: `
+    <div style="position:relative">
+      <img :src="src" style="width:100%; height:100%;" v-on="onEvents" draggable="false" />
+      <svg v-if="cross" style="position:absolute;top:0;left:0;pointer-events:none" :viewBox="viewBox">
+        <g :style="{ display: cssDisplay }">
+          <line :x1="x" y1="0" :x2="x" y2="100%" stroke="black" />
+          <line x1="0" :y1="y" x2="100%" :y2="y" stroke="black" />
+        </g>
+        <g v-html="content"></g>
+      </svg>
+    </div>
+  `,
+  data() {
+    return {
+      viewBox: "0 0 0 0",
+      x: 100,
+      y: 100,
+      cssDisplay: "none",
+    };
+  },
+  methods: {
+    updateCrossHair(e) {
+      this.x = (e.offsetX * e.target.naturalWidth) / e.target.clientWidth;
+      this.y = (e.offsetY * e.target.naturalHeight) / e.target.clientHeight;
+    },
+    onImageLoaded(e) {
+      this.viewBox = `0 0 ${e.target.naturalWidth} ${e.target.naturalHeight}`;
+    },
+    onMouseEvent(type, e) {
+      this.$emit("mouse", {
+        mouse_event_type: type,
+        image_x: (e.offsetX * e.target.naturalWidth) / e.target.clientWidth,
+        image_y: (e.offsetY * e.target.naturalHeight) / e.target.clientHeight,
+        button: e.button,
+        buttons: e.buttons,
+        altKey: e.altKey,
+        ctrlKey: e.ctrlKey,
+        metaKey: e.metaKey,
+        shiftKey: e.shiftKey,
+      });
+    },
+  },
+  computed: {
+    onEvents() {
+      const allEvents = {};
+      for (const type of this.events) {
+        allEvents[type] = (event) => this.onMouseEvent(type, event);
+      }
+      if (this.cross) {
+        allEvents["mouseenter"] = () => (this.cssDisplay = "block");
+        allEvents["mouseleave"] = () => (this.cssDisplay = "none");
+        allEvents["mousemove"] = (event) => this.updateCrossHair(event);
+        allEvents["load"] = (event) => this.onImageLoaded(event);
+      }
+      return allEvents;
+    },
+  },
+  props: {
+    src: String,
+    content: String,
+    events: Array,
+    cross: Boolean,
+  },
+};

{nicegui-1.2.0 → nicegui-1.2.2}/nicegui/elements/interactive_image.py

@@ -52,7 +52,3 @@ class InteractiveImage(SourceElement, ContentElement):
             )
             return handle_event(on_mouse, arguments)
         self.on('mouse', handle_mouse)
-
-    def on_source_change(self, source: str) -> None:
-        super().on_source_change(source)
-        self.run_method('set_source', source)