update ui.color_input

api_docs_and_examples.py

@@ -195,7 +195,7 @@ def create_full() -> None:
                   on_change=lambda e: number_result.set_text(f'you entered: {e.value}'))
         number_result = ui.label()
 
-    # @example(ui.color_input)
+    @example(ui.color_input, skip=False)
     def color_input_example():
         color_label = ui.label('Change my color!')
         ui.color_input(label='Color', value='#000000',

nicegui/element.py

@@ -1,5 +1,6 @@
 import shlex
 from abc import ABC
+from copy import deepcopy
 from typing import Any, Callable, Dict, List, Optional
 
 from . import globals
@@ -79,7 +80,7 @@ class Element(ABC, Visibility):
         '''
         def parse_style(text: Optional[str]) -> Dict[str, str]:
             return dict((word.strip() for word in part.split(':')) for part in text.strip('; ').split(';')) if text else {}
-        style_dict = self._style if replace is None else {}
+        style_dict = deepcopy(self._style) if replace is None else {}
         for key in parse_style(remove):
             del style_dict[key]
         style_dict.update(parse_style(add))

nicegui/elements/color_input.py

@@ -0,0 +1,39 @@
+from typing import Callable, Dict, Optional
+
+from nicegui import ui
+
+from ..element import Element
+from ..events import ValueChangeEventArguments, handle_event
+from .mixins.value_element import ValueElement
+
+
+class ColorInput(ValueElement):
+
+    def __init__(self, label: str = None, *,
+                 placeholder: str = None, value: str = '', on_change: Optional[Callable] = None) -> None:
+        """Color Input
+
+        :param label: displayed label for the color input
+        :param placeholder: text to show if no color is selected
+        :param value: the current color value
+        :param on_change: callback to execute when the input is confirmed by leaving the focus
+        """
+        super().__init__(tag='q-input', value=value, on_value_change=on_change)
+        self._props['label'] = label
+        self._props['placeholder'] = placeholder
+
+        with self, ui.menu() as self.popup:
+            def handle_change(msg: Dict) -> None:
+                arguments = ValueChangeEventArguments(sender=self, client=self.client, value=msg['args'])
+                handle_event(on_change, arguments)
+            self.color_element = Element('q-color').on('change', handle_change)
+
+        with self.add_slot('append'):
+            self.button = ui.button(on_click=self.popup.open) \
+                .props('icon=colorize flat round', remove='color').classes('cursor-pointer')
+
+    def open(self) -> None:
+        self.popup.open()
+
+    def close(self) -> None:
+        self.popup.close()

nicegui/elements/old/color_input.py

@@ -1,50 +0,0 @@
-from typing import Callable, Optional
-
-import justpy as jp
-
-from .string_element import StringElement
-
-
-class ColorInput(StringElement):
-
-    def __init__(self, label: str = None, *,
-                 placeholder: str = None, value: str = '', on_change: Optional[Callable] = None):
-        """Color Input
-
-        :param label: displayed label for the color input
-        :param placeholder: text to show if no color is selected
-        :param value: the current color value
-        :param on_change: callback to execute when the input is confirmed by leaving the focus
-        """
-        view = jp.QInput(
-            label=label,
-            placeholder=placeholder,
-            value=value,
-            change=self.handle_change,
-            disable_input_event=True,
-            temp=False,
-        )
-
-        self._icon_button = jp.parse_html('''
-            <q-icon name="colorize" class="cursor-pointer">
-                <q-popup-proxy transition-show="scale" transition-hide="scale" name="popup" no-parent-event>
-                    <q-color name="color_input"/>
-                </q-popup-proxy>
-            </q-icon>''')
-        view.add_scoped_slot('append', self._icon_button)
-        self._icon_button.on('click', lambda *_: self.open() or False)
-        self._icon_button.name_dict['color_input'].on('change', self.handle_change)
-        self._icon_button.name_dict['color_input'].disable_input_event = True
-        self._icon_button.name_dict['popup'].on('input', lambda *_: self.update() or False)
-        self._icon_button.name_dict['popup'].on('show', lambda *_: self.update() or False)
-        self._icon_button.name_dict['popup'].on('hide', lambda *_: self.update() or False)
-
-        super().__init__(view, value=value, on_change=on_change)
-
-    def open(self):
-        self._icon_button.name_dict['popup'].value = True
-        self.update()
-
-    def close(self):
-        self.view.name_dict['popup'].value = False
-        self.update()

nicegui/ui.py

@@ -4,6 +4,7 @@ from .elements.card import Card as card
 from .elements.card import CardActions as card_actions
 from .elements.card import CardSection as card_section
 from .elements.checkbox import Checkbox as checkbox
+from .elements.color_input import ColorInput as color_input
 from .elements.colors import Colors as colors
 from .elements.column import Column as column
 from .elements.dialog import Dialog as dialog