Merge remote-tracking branch 'origin/feature/per_session_data' into f…

…eature/per_session_data

CITATION.cff

@@ -8,7 +8,7 @@ authors:
   given-names: Rodja
   orcid: https://orcid.org/0009-0009-4735-6227
 title: 'NiceGUI: Web-based user interfaces with Python. The nice way.'
-version: v1.4.19
-date-released: '2024-03-22'
+version: v1.4.20
+date-released: '2024-04-04'
 url: https://github.com/zauberzeug/nicegui
-doi: 10.5281/zenodo.10853391
+doi: 10.5281/zenodo.10927542

CONTRIBUTING.md

@@ -79,7 +79,7 @@ We use [autopep8](https://github.com/hhatto/autopep8) with a 120 character line
 Before submitting a pull request, please run
 
 ```bash
-autopep8 --max-line-length=120 --experimental  --in-place --recursive .
+autopep8 --max-line-length=120 --in-place --recursive .
 ```
 
 on your code to ensure that it meets our formatting guidelines.

examples/chat_app/main.py

@@ -26,7 +26,7 @@ def send() -> None:
     user_id = str(uuid4())
     avatar = f'https://robohash.org/{user_id}?bgset=bg2'
 
-    ui.add_style(r'a:link, a:visited {color: inherit !important; text-decoration: none; font-weight: 500}')
+    ui.add_css(r'a:link, a:visited {color: inherit !important; text-decoration: none; font-weight: 500}')
     with ui.footer().classes('bg-white'), ui.column().classes('w-full max-w-3xl mx-auto my-6'):
         with ui.row().classes('w-full no-wrap items-center'):
             with ui.avatar().on('click', lambda: ui.navigate.to(main)):

examples/chat_with_ai/main.py

@@ -39,7 +39,7 @@ async def send() -> None:
         thinking = False
         chat_messages.refresh()
 
-    ui.add_style(r'a:link, a:visited {color: inherit !important; text-decoration: none; font-weight: 500}')
+    ui.add_css(r'a:link, a:visited {color: inherit !important; text-decoration: none; font-weight: 500}')
 
     # the queries below are used to expand the contend down to the footer (content can then use flex-grow to expand)
     ui.query('.q-page').classes('flex')

nicegui/elements/button_dropdown.py

@@ -0,0 +1,68 @@
+from typing import Any, Callable, Optional
+
+from ..events import ClickEventArguments, handle_event
+from .mixins.color_elements import BackgroundColorElement
+from .mixins.disableable_element import DisableableElement
+from .mixins.text_element import TextElement
+from .mixins.value_element import ValueElement
+
+
+class DropdownButton(TextElement, DisableableElement, BackgroundColorElement, ValueElement):
+
+    def __init__(self,
+                 text: str = '', *,
+                 value: bool = False,
+                 on_value_change: Optional[Callable[..., Any]] = None,
+                 on_click: Optional[Callable[..., Any]] = None,
+                 color: Optional[str] = 'primary',
+                 icon: Optional[str] = None,
+                 auto_close: Optional[bool] = False,
+                 split: Optional[bool] = False,
+                 ) -> None:
+        """Dropdown Button
+
+        This element is based on Quasar's `QBtnDropDown <https://quasar.dev/vue-components/button-dropdown>`_ component.
+
+        The ``color`` parameter accepts a Quasar color, a Tailwind color, or a CSS color.
+        If a Quasar color is used, the button will be styled according to the Quasar theme including the color of the text.
+        Note that there are colors like "red" being both a Quasar color and a CSS color.
+        In such cases the Quasar color will be used.
+
+        :param text: the label of the button
+        :param value: if the dropdown is open or not (default: `False`)
+        :param on_value_change: callback which is invoked when the dropdown is opened or closed
+        :param on_click: callback which is invoked when button is pressed
+        :param color: the color of the button (either a Quasar, Tailwind, or CSS color or `None`, default: 'primary')
+        :param icon: the name of an icon to be displayed on the button (default: `None`)
+        :param auto_close: whether the dropdown should close automatically when an item is clicked (default: `False`)
+        :param split: whether to split the dropdown icon into a separate button (default: `False`)
+        """
+        super().__init__(tag='q-btn-dropdown',
+                         text=text, background_color=color, value=value, on_value_change=on_value_change)
+
+        if icon:
+            self._props['icon'] = icon
+
+        if auto_close:
+            self._props['auto-close'] = True
+
+        if split:
+            self._props['split'] = True
+
+        if on_click:
+            self.on('click', lambda _: handle_event(on_click, ClickEventArguments(sender=self, client=self.client)), [])
+
+    def _text_to_model_text(self, text: str) -> None:
+        self._props['label'] = text
+
+    def open(self) -> None:
+        """Open the dropdown."""
+        self.value = True
+
+    def close(self) -> None:
+        """Close the dropdown."""
+        self.value = False
+
+    def toggle(self) -> None:
+        """Toggle the dropdown."""
+        self.value = not self.value

nicegui/elements/button_group.py

@@ -0,0 +1,12 @@
+from ..element import Element
+
+
+class ButtonGroup(Element):
+
+    def __init__(self) -> None:
+        """Button Group
+
+        This element is based on Quasar's `QBtnGroup <https://quasar.dev/vue-components/button-group>`_ component.
+        You must use the same design props on both the parent button group and the children buttons.
+        """
+        super().__init__(tag='q-btn-group')

nicegui/functions/style.py

@@ -1,21 +1,68 @@
 from pathlib import Path
 from typing import Union
 
-import sass
+from .. import optional_features
+
+try:
+    import sass
+    optional_features.register('sass')
+except ImportError:
+    pass
 
 from .. import helpers
+from ..logging import log
 from .html import add_head_html
 
 
-def add_style(content: Union[str, Path], indented: bool = False) -> None:
-    """Add style definitions to the page.
+def add_style(content: Union[str, Path], indented: bool = False) -> None:  # DEPRECATED
+    """Add style definitions to the page. [DEPRECATED]
+
+    Note:
+    This function is deprecated, because it can't reliably detect the style language.
+    Use `add_css`, `add_scss` or `add_sass` instead.
+    """
+    if helpers.is_file(content):
+        content = Path(content).read_text()
+    if optional_features.has('sass'):
+        content = sass.compile(string=str(content).strip(), indented=indented)
+    log.warning("`ui.add_style` is deprecated, because it can't reliably detect the style language. "
+                'Use `ui.add_css`, `ui.add_scss` or `ui.add_sass` instead.')
+    add_head_html(f'<style>{content}</style>')
+
+
+def add_css(content: Union[str, Path]) -> None:
+    """Add CSS style definitions to the page.
+
+    This function can be used to add CSS style definitions to the head of the HTML page.
+
+    :param content: CSS content (string or file path)
+    """
+    if helpers.is_file(content):
+        content = Path(content).read_text()
+    add_head_html(f'<style>{content}</style>')
+
 
-    This function can be used to add CSS, SCSS, or SASS style definitions to the head of the HTML page.
+def add_scss(content: Union[str, Path], *, indented: bool = False) -> None:
+    """Add SCSS style definitions to the page.
 
-    :param content: style content (string or file path)
-    :param indented: whether the content is indented (SASS) or not (SCSS/CSS) (default: `False`)
+    This function can be used to add SCSS style definitions to the head of the HTML page.
+
+    :param content: SCSS content (string or file path)
+    :param indented: whether the content is indented (SASS) or not (SCSS) (default: `False`)
     """
+    if not optional_features.has('sass'):
+        raise ImportError('Please run "pip install libsass" to use SASS or SCSS.')
+
     if helpers.is_file(content):
         content = Path(content).read_text()
-    css = sass.compile(string=str(content).strip(), indented=indented)
-    add_head_html(f'<style>{css}</style>')
+    add_css(sass.compile(string=str(content).strip(), indented=indented))
+
+
+def add_sass(content: Union[str, Path]) -> None:
+    """Add SASS style definitions to the page.
+
+    This function can be used to add SASS style definitions to the head of the HTML page.
+
+    :param content: SASS content (string or file path)
+    """
+    add_scss(content, indented=True)

nicegui/optional_features.py

@@ -10,6 +10,7 @@
     'plotly',
     'pyecharts',
     'webview',
+    'sass',
 ]
 
 

nicegui/ui.py

@@ -5,6 +5,7 @@
     'avatar',
     'badge',
     'button',
+    'button_group',
     'card',
     'card_actions',
     'card_section',
@@ -23,6 +24,7 @@
     'dark_mode',
     'date',
     'dialog',
+    'dropdown_button',
     'echart',
     'editor',
     'expansion',
@@ -101,6 +103,9 @@
     'refreshable',
     'refreshable_method',
     'state',
+    'add_css',
+    'add_sass',
+    'add_scss',
     'add_style',
     'update',
     'page',
@@ -121,6 +126,8 @@
 from .elements.avatar import Avatar as avatar
 from .elements.badge import Badge as badge
 from .elements.button import Button as button
+from .elements.button_dropdown import DropdownButton as dropdown_button
+from .elements.button_group import ButtonGroup as button_group
 from .elements.card import Card as card
 from .elements.card import CardActions as card_actions
 from .elements.card import CardSection as card_section
@@ -175,7 +182,7 @@
 from .elements.pyplot import Pyplot as pyplot
 from .elements.query import Query as query
 from .elements.radio import Radio as radio
-from .elements.range import Range as range
+from .elements.range import Range as range  # pylint: disable=redefined-builtin
 from .elements.restructured_text import ReStructuredText as restructured_text
 from .elements.row import Row as row
 from .elements.scene import Scene as scene
@@ -215,7 +222,7 @@
 from .functions.open import open  # pylint: disable=redefined-builtin
 from .functions.page_title import page_title
 from .functions.refreshable import refreshable, refreshable_method, state
-from .functions.style import add_style
+from .functions.style import add_css, add_sass, add_scss, add_style
 from .functions.update import update
 from .page import page
 from .page_layout import Drawer as drawer