Define default classes while subclassing (#3843)

This PR introduces `default_classes`, `default_style` and
`default_props` arguments for `Element.__init_subclass__` so that
defaults like "nicegui-*" classes can be defined while subclassing. This
way they can be removed by the user calling something like
`ui.link.default_classes(replace='text-red-500')`, solving issue #3826.

nicegui/element.py

@@ -84,6 +84,9 @@ def __init_subclass__(cls, *,
                           libraries: List[Union[str, Path]] = [],  # noqa: B006  # DEPRECATED
                           exposed_libraries: List[Union[str, Path]] = [],  # noqa: B006  # DEPRECATED
                           extra_libraries: List[Union[str, Path]] = [],  # noqa: B006  # DEPRECATED
+                          default_classes: Optional[str] = None,
+                          default_style: Optional[str] = None,
+                          default_props: Optional[str] = None,
                           ) -> None:
         super().__init_subclass__()
         base = Path(inspect.getfile(cls)).parent
@@ -127,6 +130,9 @@ def glob_absolute_paths(file: Union[str, Path]) -> List[Path]:
         cls._default_props = copy(cls._default_props)
         cls._default_classes = copy(cls._default_classes)
         cls._default_style = copy(cls._default_style)
+        cls.default_classes(default_classes)
+        cls.default_style(default_style)
+        cls.default_props(default_props)
 
     def add_resource(self, path: Union[str, Path]) -> None:
         """Add a resource to the element.

nicegui/elements/aggrid.py

@@ -13,7 +13,10 @@
         import pandas as pd
 
 
-class AgGrid(Element, component='aggrid.js', dependencies=['lib/aggrid/ag-grid-community.min.js']):
+class AgGrid(Element,
+             component='aggrid.js',
+             dependencies=['lib/aggrid/ag-grid-community.min.js'],
+             default_classes='nicegui-aggrid'):
 
     def __init__(self,
                  options: Dict, *,
@@ -36,7 +39,6 @@ def __init__(self,
         self._props['options'] = options
         self._props['html_columns'] = html_columns[:]
         self._props['auto_size_columns'] = auto_size_columns
-        self._classes.append('nicegui-aggrid')
         self._classes.append(f'ag-theme-{theme}')
 
     @classmethod

nicegui/elements/card.py

@@ -5,7 +5,7 @@
 from ..element import Element
 
 
-class Card(Element):
+class Card(Element, default_classes='nicegui-card'):
 
     def __init__(self, *,
                  align_items: Optional[Literal['start', 'end', 'center', 'baseline', 'stretch']] = None,
@@ -23,7 +23,6 @@ def __init__(self, *,
         :param align_items: alignment of the items in the card ("start", "end", "center", "baseline", or "stretch"; default: `None`)
         """
         super().__init__('q-card')
-        self._classes.append('nicegui-card')
         if align_items:
             self._classes.append(f'items-{align_items}')
 

nicegui/elements/carousel.py

@@ -52,7 +52,7 @@ def previous(self) -> None:
         self.run_method('previous')
 
 
-class CarouselSlide(DisableableElement):
+class CarouselSlide(DisableableElement, default_classes='nicegui-carousel-slide'):
 
     def __init__(self, name: Optional[str] = None) -> None:
         """Carousel Slide
@@ -66,6 +66,5 @@ def __init__(self, name: Optional[str] = None) -> None:
         self.carousel = cast(ValueElement, context.slot.parent)
         name = name or f'slide_{len(self.carousel.default_slot.children)}'
         self._props['name'] = name
-        self._classes.append('nicegui-carousel-slide')
         if self.carousel.value is None:
             self.carousel.value = name

nicegui/elements/code.py

@@ -10,7 +10,7 @@
 from .timer import Timer as timer
 
 
-class Code(ContentElement):
+class Code(ContentElement, default_classes='nicegui-code'):
 
     def __init__(self, content: str = '', *, language: Optional[str] = 'python') -> None:
         """Code
@@ -23,7 +23,6 @@ def __init__(self, content: str = '', *, language: Optional[str] = 'python') ->
         :param language: language of the code (default: "python")
         """
         super().__init__(content=remove_indentation(content))
-        self._classes.append('nicegui-code')
 
         with self:
             self.markdown = markdown().classes('overflow-auto') \

nicegui/elements/codemirror.py

@@ -245,7 +245,7 @@
 ]
 
 
-class CodeMirror(ValueElement, DisableableElement, component='codemirror.js'):
+class CodeMirror(ValueElement, DisableableElement, component='codemirror.js', default_classes='nicegui-codemirror'):
     VALUE_PROP = 'value'
     LOOPBACK = None
 
@@ -283,8 +283,6 @@ def __init__(
         super().__init__(value=value, on_value_change=on_change)
         self.add_resource(Path(__file__).parent / 'lib' / 'codemirror')
 
-        self._classes.append('nicegui-codemirror')
-
         self._props['language'] = language
         self._props['theme'] = theme
         self._props['indent'] = indent

nicegui/elements/column.py

@@ -3,7 +3,7 @@
 from ..element import Element
 
 
-class Column(Element):
+class Column(Element, default_classes='nicegui-column'):
 
     def __init__(self, *,
                  wrap: bool = False,
@@ -17,7 +17,6 @@ def __init__(self, *,
         :param align_items: alignment of the items in the column ("start", "end", "center", "baseline", or "stretch"; default: `None`)
         """
         super().__init__('div')
-        self._classes.append('nicegui-column')
         if align_items:
             self._classes.append(f'items-{align_items}')
 

nicegui/elements/echart.py

@@ -17,7 +17,10 @@
     pass
 
 
-class EChart(Element, component='echart.js', dependencies=['lib/echarts/echarts.min.js', 'lib/echarts-gl/echarts-gl.min.js']):
+class EChart(Element,
+             component='echart.js',
+             dependencies=['lib/echarts/echarts.min.js', 'lib/echarts-gl/echarts-gl.min.js'],
+             default_classes='nicegui-echart'):
 
     def __init__(self, options: Dict, on_point_click: Optional[Handler[EChartPointClickEventArguments]] = None, *, enable_3d: bool = False) -> None:
         """Apache EChart
@@ -33,7 +36,6 @@ def __init__(self, options: Dict, on_point_click: Optional[Handler[EChartPointCl
         super().__init__()
         self._props['options'] = options
         self._props['enable_3d'] = enable_3d or any('3D' in key for key in options)
-        self._classes.append('nicegui-echart')
 
         if on_point_click:
             self.on_point_click(on_point_click)

nicegui/elements/editor.py

@@ -5,7 +5,7 @@
 from .mixins.value_element import ValueElement
 
 
-class Editor(ValueElement, DisableableElement, component='editor.js'):
+class Editor(ValueElement, DisableableElement, component='editor.js', default_classes='nicegui-editor'):
     VALUE_PROP: str = 'value'
     LOOPBACK = False
 
@@ -24,7 +24,6 @@ def __init__(self,
         :param on_change: callback to be invoked when the value changes
         """
         super().__init__(value=value, on_value_change=on_change)
-        self._classes.append('nicegui-editor')
         if placeholder is not None:
             self._props['placeholder'] = placeholder
 

nicegui/elements/expansion.py

@@ -7,7 +7,7 @@
 from .mixins.value_element import ValueElement
 
 
-class Expansion(IconElement, TextElement, ValueElement, DisableableElement):
+class Expansion(IconElement, TextElement, ValueElement, DisableableElement, default_classes='nicegui-expansion'):
 
     def __init__(self,
                  text: str = '', *,
@@ -33,7 +33,6 @@ def __init__(self,
             self._props['caption'] = caption
         if group is not None:
             self._props['group'] = group
-        self._classes.append('nicegui-expansion')
 
     def open(self) -> None:
         """Open the expansion."""

nicegui/elements/grid.py

@@ -3,7 +3,7 @@
 from ..element import Element
 
 
-class Grid(Element):
+class Grid(Element, default_classes='nicegui-grid'):
 
     def __init__(self,
                  *,
@@ -18,7 +18,6 @@ def __init__(self,
         :param columns: number of columns in the grid or a string with the grid-template-columns CSS property (e.g. 'auto 1fr')
         """
         super().__init__('div')
-        self._classes.append('nicegui-grid')
 
         if isinstance(rows, int):
             self._style['grid-template-rows'] = f'repeat({rows}, minmax(0, 1fr))'

nicegui/elements/joystick.py

@@ -6,14 +6,17 @@
 from ..events import GenericEventArguments, Handler, JoystickEventArguments, handle_event
 
 
-class Joystick(Element, component='joystick.vue', dependencies=['lib/nipplejs/nipplejs.js']):
+class Joystick(Element,
+               component='joystick.vue',
+               dependencies=['lib/nipplejs/nipplejs.js'],
+               default_classes='nicegui-joystick'):
 
     def __init__(self, *,
                  on_start: Optional[Handler[JoystickEventArguments]] = None,
                  on_move: Optional[Handler[JoystickEventArguments]] = None,
                  on_end: Optional[Handler[JoystickEventArguments]] = None,
                  throttle: float = 0.05,
-                 ** options: Any) -> None:
+                 **options: Any) -> None:
         """Joystick
 
         Create a joystick based on `nipple.js <https://yoannmoi.net/nipplejs/>`_.
@@ -26,7 +29,6 @@ def __init__(self, *,
         """
         super().__init__()
         self._props['options'] = options
-        self._classes.append('nicegui-joystick')
         self.active = False
 
         self._start_handlers = [on_start] if on_start else []

nicegui/elements/leaflet.py

@@ -11,7 +11,7 @@
 from .leaflet_layer import Layer
 
 
-class Leaflet(Element, component='leaflet.js'):
+class Leaflet(Element, component='leaflet.js', default_classes='nicegui-leaflet'):
     # pylint: disable=import-outside-toplevel
     from .leaflet_layers import GenericLayer as generic_layer
     from .leaflet_layers import Marker as marker
@@ -40,7 +40,6 @@ def __init__(self,
         """
         super().__init__()
         self.add_resource(Path(__file__).parent / 'lib' / 'leaflet')
-        self._classes.append('nicegui-leaflet')
 
         self.layers: List[Layer] = []
         self.is_initialized = False

nicegui/elements/link.py

@@ -5,7 +5,7 @@
 from .mixins.text_element import TextElement
 
 
-class Link(TextElement, component='link.js'):
+class Link(TextElement, component='link.js', default_classes='nicegui-link'):
 
     def __init__(self,
                  text: str = '',
@@ -31,7 +31,6 @@ def __init__(self,
         elif callable(target):
             self._props['href'] = Client.page_routes[target]
         self._props['target'] = '_blank' if new_tab else '_self'
-        self._classes.append('nicegui-link')
 
 
 class LinkTarget(Element):

nicegui/elements/log.py

@@ -4,7 +4,7 @@
 from .label import Label
 
 
-class Log(Element):
+class Log(Element, default_classes='nicegui-log'):
 
     def __init__(self, max_lines: Optional[int] = None) -> None:
         """Log View
@@ -15,7 +15,6 @@ def __init__(self, max_lines: Optional[int] = None) -> None:
         """
         super().__init__()
         self.max_lines = max_lines
-        self._classes.append('nicegui-log')
 
     def push(self, line: Any) -> None:
         """Add a new line to the log.

nicegui/elements/markdown.py

@@ -14,7 +14,7 @@
 CODEHILITE_CSS_URL = f'/_nicegui/{__version__}/codehilite.css'
 
 
-class Markdown(ContentElement, component='markdown.js'):
+class Markdown(ContentElement, component='markdown.js', default_classes='nicegui-markdown'):
 
     def __init__(self,
                  content: str = '', *,
@@ -29,7 +29,6 @@ def __init__(self,
         """
         self.extras = extras[:]
         super().__init__(content=content)
-        self._classes.append('nicegui-markdown')
         if 'mermaid' in extras:
             self._props['use_mermaid'] = True
             self.libraries.append(Mermaid.exposed_libraries[0])

nicegui/elements/pyplot.py

@@ -33,7 +33,7 @@ def __exit__(self, *_) -> None:
     pass
 
 
-class Pyplot(Element):
+class Pyplot(Element, default_classes='nicegui-pyplot'):
 
     def __init__(self, *, close: bool = True, **kwargs: Any) -> None:
         """Pyplot Context
@@ -47,7 +47,6 @@ def __init__(self, *, close: bool = True, **kwargs: Any) -> None:
             raise ImportError('Matplotlib is not installed. Please run "pip install matplotlib".')
 
         super().__init__('div')
-        self._classes.append('nicegui-pyplot')
         self.close = close
         self.fig = plt.figure(**kwargs)
         self._convert_to_html()

nicegui/elements/row.py

@@ -3,7 +3,7 @@
 from ..element import Element
 
 
-class Row(Element):
+class Row(Element, default_classes='nicegui-row'):
 
     def __init__(self, *,
                  wrap: bool = True,
@@ -17,7 +17,6 @@ def __init__(self, *,
         :param align_items: alignment of the items in the row ("start", "end", "center", "baseline", or "stretch"; default: `None`)
         """
         super().__init__('div')
-        self._classes.append('nicegui-row')
         self._classes.append('row')  # NOTE: for compatibility with Quasar's col-* classes
         if align_items:
             self._classes.append(f'items-{align_items}')

nicegui/elements/scene.py

@@ -50,7 +50,8 @@ class Scene(Element,
                 'lib/three/modules/OrbitControls.js',
                 'lib/three/modules/STLLoader.js',
                 'lib/tween/tween.umd.js',
-            ]):
+            ],
+            default_classes='nicegui-scene'):
     # pylint: disable=import-outside-toplevel
     from .scene_objects import AxesHelper as axes_helper
     from .scene_objects import Box as box
@@ -119,7 +120,6 @@ def __init__(self,
         self.on('dragstart', self._handle_drag)
         self.on('dragend', self._handle_drag)
         self._props['drag_constraints'] = drag_constraints
-        self._classes.append('nicegui-scene')
 
     def on_click(self, callback: Handler[SceneClickEventArguments]) -> Self:
         """Add a callback to be invoked when a 3D object is clicked."""

nicegui/elements/scene_view.py

@@ -20,7 +20,8 @@ class SceneView(Element,
                 dependencies=[
                     'lib/tween/tween.umd.js',
                     'lib/three/three.module.js',
-                ]):
+                ],
+                default_classes='nicegui-scene-view'):
 
     def __init__(self,
                  scene: Scene,
@@ -53,7 +54,6 @@ def __init__(self,
         self._click_handlers = [on_click] if on_click else []
         self.on('init', self._handle_init)
         self.on('click3d', self._handle_click)
-        self._classes.append('nicegui-scene-view')
 
     def on_click(self, callback: Handler[ClickEventArguments]) -> Self:
         """Add a callback to be invoked when a 3D object is clicked."""

nicegui/elements/scroll_area.py

@@ -6,7 +6,7 @@
 from ..events import GenericEventArguments, Handler, ScrollEventArguments, handle_event
 
 
-class ScrollArea(Element):
+class ScrollArea(Element, default_classes='nicegui-scroll-area'):
 
     def __init__(self, *, on_scroll: Optional[Handler[ScrollEventArguments]] = None) -> None:
         """Scroll Area
@@ -17,7 +17,6 @@ def __init__(self, *, on_scroll: Optional[Handler[ScrollEventArguments]] = None)
         :param on_scroll: function to be called when the scroll position changes
         """
         super().__init__('q-scroll-area')
-        self._classes.append('nicegui-scroll-area')
 
         if on_scroll:
             self.on_scroll(on_scroll)

nicegui/elements/separator.py

@@ -1,7 +1,7 @@
 from ..element import Element
 
 
-class Separator(Element):
+class Separator(Element, default_classes='nicegui-separator'):
 
     def __init__(self) -> None:
         """Separator
@@ -11,4 +11,3 @@ def __init__(self) -> None:
         It serves as a separator for cards, menus and other component containers and is similar to HTML's <hr> tag.
         """
         super().__init__('q-separator')
-        self._classes.append('nicegui-separator')