solara-ui 1.45.0__py3-none-any.whl

solara/components/button.py

@@ -0,0 +1,85 @@
+from typing import Callable, Dict, List, Optional, Union
+
+import solara
+import solara.util
+from reacton import ipyvue
+from reacton import ipyvuetify as v
+
+
+@solara.component
+def Button(
+    label: str = None,
+    on_click: Callable[[], None] = None,
+    icon_name: str = None,
+    children: list = [],
+    disabled=False,
+    text=False,
+    outlined=False,
+    color: Optional[str] = None,
+    click_event="click",
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+    value=None,
+    **kwargs,
+):
+    """A button that can be clicked to trigger an event.
+
+    ## Example
+
+    ```solara
+    import solara
+
+
+    @solara.component
+    def Page():
+        with solara.Row():
+            solara.Button(label="Default")
+            solara.Button(label="Default+color", color="primary")
+            solara.Button(label="Text", text=True)
+            solara.Button(label="Outlined", outlined=True)
+            solara.Button(label="Outlined+color", outlined=True, color="primary")
+    ```
+
+
+    ## Arguments
+
+    - `label`: The text to display on the button.
+    - `on_click`: A callback function that is called when the button is clicked.
+    - `icon_name`: The name of the icon to display on the button ([Overview of available icons](https://pictogrammers.github.io/@mdi/font/4.9.95/)).
+    - `children`: A list of child elements to display on the button.
+    - `disabled`: Whether the button is disabled.
+    - `text`: Whether the button should be displayed as text, it has no shadow and no background.
+    - `outlined`: Whether the button should be displayed as outlined, it has no background.
+    - `value`: (Optional) When used as a child of a ToggleButtons component, the value of the selected button, see
+        [ToggleButtons](/documentation/components/input/togglebuttons).
+    - `classes`: Additional CSS classes to apply.
+    - `style`: CSS style to apply.
+
+    ### Deprecated arguments
+    - click_event: (Deprecated/export option: The event that triggers the on_click callback, which can include vue event modifiers).
+
+    """
+    if label:
+        children = [label] + children
+    if icon_name:
+        children = [v.Icon(left=bool(label), children=[icon_name])] + children
+    if "class_" in kwargs:
+        kwargs = kwargs.copy()
+        class_ = solara.util._combine_classes([*classes, kwargs.pop("class_")])
+    else:
+        class_ = solara.util._combine_classes(classes)
+    kwargs = kwargs.copy()
+    style_flat = solara.util._flatten_style(style)
+    if "style_" in kwargs:
+        style_flat += kwargs.pop("style_")
+    if solara.util.ipyvuetify_major_version == 3:
+        variant = "elevated"
+        if text:
+            variant = "text"
+        elif outlined:
+            variant = "outlined"
+        btn = solara.v.Btn(children=children, **kwargs, disabled=disabled, class_=class_, style_=style_flat, color=color, variant=variant)
+    else:
+        btn = solara.v.Btn(children=children, **kwargs, disabled=disabled, text=text, class_=class_, style_=style_flat, outlined=outlined, color=color)
+    ipyvue.use_event(btn, click_event, lambda *_ignore: on_click and on_click())
+    return btn

solara/components/card.py

@@ -0,0 +1,87 @@
+from typing import Dict, List, Optional, Union
+
+import reacton.ipyvuetify as v
+import solara
+from solara.util import _combine_classes
+
+
+@solara.component
+def Card(
+    title: Optional[str] = None,
+    subtitle: Optional[str] = None,
+    elevation: int = 2,
+    margin=2,
+    children: List[solara.Element] = [],
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+):
+    """A card combines a title, subtitle, content and actions into a single unit.
+
+
+    ## Example
+    ```solara
+    import solara
+
+    @solara.component
+    def Page():
+        with solara.Card(title="Card title", subtitle="Card subtitle"):
+            solara.Markdown(
+                "Lorem ipsum dolor sit amet consectetur adipisicing elit. "\\
+                "Commodi, ratione debitis quis est labore voluptatibus! "\\
+                "Eaque cupiditate minima, at placeat totam, magni doloremque "\\
+                "veniam neque porro libero rerum unde voluptatem!"
+            )
+            with solara.CardActions():
+                solara.Button("Action 1", text=True)
+                solara.Button("Action 2", text=True)
+    ```
+
+
+    ## Arguments
+
+     * `title`: Title of the card.
+     * `subtitle`: Subtitle of the card.
+     * `elevation`: Elevation of the card, gives the appearance of hovering above the page.
+     * `margin`: Margin of the card.
+     * `children`: Children are placed as the main content of the card.
+     * `style`: CSS style to apply to the top level element.
+    """
+    class_ = _combine_classes([f"ma-{margin}", *classes])
+    style_flat = solara.util._flatten_style(style)
+    children_actions = []
+    children_text = []
+    for child in children:
+        if isinstance(child, solara.Element) and child.component == solara.CardActions:
+            children_actions.extend(child.kwargs.get("children", []))
+        else:
+            children_text.append(child)
+    with v.Card(elevation=elevation, class_=class_, style_=style_flat) as main:
+        if title:
+            with v.CardTitle(
+                children=[title],
+            ):
+                pass
+        if subtitle:
+            with v.CardSubtitle(
+                children=[subtitle],
+            ):
+                pass
+        with v.CardText(children=children_text):
+            pass
+        if children_actions:
+            with v.CardActions(children=children_actions):
+                pass
+    return main
+
+
+@solara.component
+def CardActions(children: List[solara.Element] = []):
+    """Container for actions in a card.
+
+    See [Card](/documentation/components/layout/card) for an example.
+
+    # Arguments
+
+     * `children`: Children are placed as the action area of the card.
+    """
+    solara.Error("You should not see this if you add a CardActions as a child component of a Card")

solara/components/checkbox.py

@@ -0,0 +1,50 @@
+from typing import Callable, Union
+
+import reacton
+import reacton.ipyvuetify as v
+
+import solara
+
+
+@reacton.value_component(bool)
+def Checkbox(
+    *,
+    label=None,
+    value: Union[bool, solara.Reactive[bool]] = True,
+    on_value: Callable[[bool], None] = None,
+    disabled=False,
+    style: str = None,
+):
+    """A checkbox is a widget that allows the user to toggle a boolean state.
+
+    Basic examples
+
+    ```solara
+    import solara
+
+    turbo_boost = solara.reactive(True)
+
+    @solara.component
+    def Page():
+        checkbox = solara.Checkbox(label="Turbo boost", value=turbo_boost)
+        if turbo_boost.value:
+            solara.Success("Turbo boost is on")
+        else:
+            solara.Warning("Turbo boost is off, you might want to turn it on")
+    ```
+
+
+    ## Arguments
+
+     * `label`: The label to display next to the checkbox.
+     * `value`: The current value of the checkbox (True or False).
+     * `on_value`: A callback that is called when the checkbox is toggled.
+     * `disabled`: If True, the checkbox is disabled and cannot be used.
+     * `style`: A string of CSS styles to apply to the checkbox.
+    """
+    reactive_value = solara.use_reactive(value, on_value)
+    del value, on_value
+    children = []
+    if label is not None:
+        children = [label]
+    return v.Checkbox(label=label, v_model=reactive_value.value, on_v_model=reactive_value.set, disabled=disabled, style_=style, children=children)

solara/components/code_highlight_css.py

@@ -0,0 +1,11 @@
+import ipyvuetify as vy
+import solara
+
+
+class CodeHighlightCssWidget(vy.VuetifyTemplate):
+    template_file = (__file__, "code_highlight_css.vue")
+
+
+@solara.component
+def CodeHighlightCss():
+    return CodeHighlightCssWidget.element()

solara/components/code_highlight_css.vue

@@ -0,0 +1,63 @@
+<template>
+</template>
+
+<style id="solara-code-highlight">
+
+.solara-code-highlight__box {
+  border: var(--jp-border-width, 1px) solid var(--jp-cell-editor-border-color, #e0e0e0);
+  border-radius: 0;
+  background: var(--jp-cell-editor-background, #f5f5f5);
+  padding: 5px;
+}
+
+div.output_area .solara-code-highlight pre {
+  padding: 0;
+}
+
+.solara-code-highlight .highlight .hll { background-color: var(--jp-cell-editor-active-background) }
+.solara-code-highlight .highlight {
+  color: var(--jp-mirror-editor-variable-color);
+  background: var(--jp-cell-editor-background);
+  -webkit-font-smoothing: initial;
+}
+.solara-code-highlight .highlight .c { color: var(--jp-mirror-editor-comment-color, #408080FF); font-style: italic } /* Comment */
+.solara-code-highlight .highlight .err { color: var(--jp-mirror-editor-error-color, #FF0000FF) } /* Error */
+.solara-code-highlight .highlight .k { color: var(--jp-mirror-editor-keyword-color, #008000FF); font-weight: bold } /* Keyword */
+.solara-code-highlight .highlight .o { color: var(--jp-mirror-editor-operator-color, #AA22FFFF); font-weight: bold } /* Operator */
+.solara-code-highlight .highlight .p { color: var(--jp-mirror-editor-punctuation-color, #0055AAFF) } /* Punctuation */
+.solara-code-highlight .highlight .ch { color: var(--jp-mirror-editor-comment-color, #408080FF); font-style: italic } /* Comment.Hashbang */
+.solara-code-highlight .highlight .cm { color: var(--jp-mirror-editor-comment-color, #408080FF); font-style: italic } /* Comment.Multiline */
+.solara-code-highlight .highlight .cp { color: var(--jp-mirror-editor-comment-color, #408080FF); font-style: italic } /* Comment.Preproc */
+.solara-code-highlight .highlight .cpf { color: var(--jp-mirror-editor-comment-color, #408080FF); font-style: italic } /* Comment.PreprocFile */
+.solara-code-highlight .highlight .c1 { color: var(--jp-mirror-editor-comment-color, #408080FF); font-style: italic } /* Comment.Single */
+.solara-code-highlight .highlight .cs { color: var(--jp-mirror-editor-comment-color, #408080FF); font-style: italic } /* Comment.Special */
+.solara-code-highlight .highlight .kc { color: var(--jp-mirror-editor-keyword-color, #008000FF); font-weight: bold } /* Keyword.Constant */
+.solara-code-highlight .highlight .kd { color: var(--jp-mirror-editor-keyword-color, #008000FF); font-weight: bold } /* Keyword.Declaration */
+.solara-code-highlight .highlight .kn { color: var(--jp-mirror-editor-keyword-color, #008000FF); font-weight: bold } /* Keyword.Namespace */
+.solara-code-highlight .highlight .kp { color: var(--jp-mirror-editor-keyword-color, #008000FF); font-weight: bold } /* Keyword.Pseudo */
+.solara-code-highlight .highlight .kr { color: var(--jp-mirror-editor-keyword-color, #008000FF); font-weight: bold } /* Keyword.Reserved */
+.solara-code-highlight .highlight .kt { color: var(--jp-mirror-editor-keyword-color, #008000FF); font-weight: bold } /* Keyword.Type */
+.solara-code-highlight .highlight .m { color: var(--jp-mirror-editor-number-color, #008000FF) } /* Literal.Number */
+.solara-code-highlight .highlight .s { color: var(--jp-mirror-editor-string-color, #008000FF) } /* Literal.String */
+.solara-code-highlight .highlight .ow { color: var(--jp-mirror-editor-operator-color, #AA22FFFF); font-weight: bold } /* Operator.Word */
+.solara-code-highlight .highlight .w { color: var(--jp-mirror-editor-variable-color) } /* Text.Whitespace */
+.solara-code-highlight .highlight .mb { color: var(--jp-mirror-editor-number-color, #008000FF) } /* Literal.Number.Bin */
+.solara-code-highlight .highlight .mf { color: var(--jp-mirror-editor-number-color, #008000FF) } /* Literal.Number.Float */
+.solara-code-highlight .highlight .mh { color: var(--jp-mirror-editor-number-color, #008000FF) } /* Literal.Number.Hex */
+.solara-code-highlight .highlight .mi { color: var(--jp-mirror-editor-number-color, #008000FF) } /* Literal.Number.Integer */
+.solara-code-highlight .highlight .mo { color: var(--jp-mirror-editor-number-color, #008000FF) } /* Literal.Number.Oct */
+.solara-code-highlight .highlight .sa { color: var(--jp-mirror-editor-string-color, #BA2121FF) } /* Literal.String.Affix */
+.solara-code-highlight .highlight .sb { color: var(--jp-mirror-editor-string-color, #BA2121FF) } /* Literal.String.Backtick */
+.solara-code-highlight .highlight .sc { color: var(--jp-mirror-editor-string-color, #BA2121FF) } /* Literal.String.Char */
+.solara-code-highlight .highlight .dl { color: var(--jp-mirror-editor-string-color, #BA2121FF) } /* Literal.String.Delimiter */
+.solara-code-highlight .highlight .sd { color: var(--jp-mirror-editor-string-color, #BA2121FF) } /* Literal.String.Doc */
+.solara-code-highlight .highlight .s2 { color: var(--jp-mirror-editor-string-color, #BA2121FF) } /* Literal.String.Double */
+.solara-code-highlight .highlight .se { color: var(--jp-mirror-editor-string-color, #BA2121FF) } /* Literal.String.Escape */
+.solara-code-highlight .highlight .sh { color: var(--jp-mirror-editor-string-color, #BA2121FF) } /* Literal.String.Heredoc */
+.solara-code-highlight .highlight .si { color: var(--jp-mirror-editor-string-color, #BA2121FF) } /* Literal.String.Interpol */
+.solara-code-highlight .highlight .sx { color: var(--jp-mirror-editor-string-color, #BA2121FF) } /* Literal.String.Other */
+.solara-code-highlight .highlight .sr { color: var(--jp-mirror-editor-string-color, #BA2121FF) } /* Literal.String.Regex */
+.solara-code-highlight .highlight .s1 { color: var(--jp-mirror-editor-string-color, #BA2121FF) } /* Literal.String.Single */
+.solara-code-highlight .highlight .ss { color: var(--jp-mirror-editor-string-color, #BA2121FF) } /* Literal.String.Symbol */
+.solara-code-highlight .highlight .il { color: var(--jp-mirror-editor-number-color, #008000FF) } /* Literal.Number.Integer.Long */
+</style>

solara/components/columns.py

@@ -0,0 +1,159 @@
+import itertools
+from typing import Dict, List, Union
+
+import reacton.ipyvuetify as rv
+
+import solara
+from solara.util import _combine_classes
+
+
+def cycle(value):
+    if value is None:
+        return itertools.cycle([None])
+    elif isinstance(value, int):
+        return itertools.cycle([value])
+    elif isinstance(value, (list, tuple)):
+        return itertools.cycle(value)
+    else:
+        raise ValueError(f"Invalid value for columns: {value}, should be None, int, or list/tuple.")
+
+
+@solara.component
+def Columns(
+    widths: List[Union[float, int]] = [1],
+    wrap=True,
+    gutters=True,
+    gutters_dense=False,
+    children=[],
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+):
+    """Lays out children in columns, with relative widths specified as a list of floats or ints.
+
+    Widths are relative to each other, so [1, 2, 1] will result in 1/4, 1/2, 1/4 width columns.
+    Columns with a width of 0 will take up the minimal amount of space.
+
+    If there are more children than widths, the width list will be cycled.
+
+    ```python
+    with solara.Columns([1, 2, 1]):
+        solara.Text("I am on the left")
+        with solara.Card("Middle"):
+            ...
+        with solara.Column():
+            ...
+    ```
+
+    When three children are added to this component, they will be laid out in three columns,
+    with the first and last column taking up 1/4 of the width, and the middle column taking up 1/2 of the width.
+
+    ```solara
+    import solara
+
+    @solara.component
+    def Page():
+        with solara.Columns([0, 1, 2]):
+            solara.Text("I am as small as possible")
+            solara.Select("I stretch", values=["a", "b", "c"], value="a")
+            solara.Select("I stretch twice the amount", values=["a", "b", "c"], value="a")
+    ```
+
+
+    # Arguments
+
+     * `widths`: List of floats or ints, specifying the relative widths of the columns.
+     * `wrap`: Whether to wrap the columns to the next row if there is not enough space available. This only happens when using widths of 0.
+     * `gutters`: Whether to add gutters between the columns.
+     * `gutters_dense`: Make gutters smaller.
+     * `children`: List of children to be laid out in columns.
+     * `style`: CSS style to apply to the top level element.
+     * `classes`: List of CSS classes to be applied to the top level element.
+
+    """
+    class_ = _combine_classes([*(["flex-nowrap"] if not wrap else []), *classes])
+    style_flat = solara.util._flatten_style(style)
+    with rv.Row(class_=class_, no_gutters=not gutters, dense=gutters_dense, style_=style_flat) as main:
+        for child, width in zip(children, cycle(widths)):
+            # we add height: 100% because this will trigger a chain of height set if it is set on the parent
+            # via the style. If we do not set the height, it will have no effect. Furthermore, we only have
+            # a single child, so this cannot interfere with other siblings.
+            with rv.Col(children=[child], style_=f"height: 100%; flex-grow: {width}; overflow: auto" if width != 0 else "flex-grow: 0"):
+                pass
+    return main
+
+
+@solara.component
+def ColumnsResponsive(
+    default=None,
+    small=None,
+    medium=None,
+    large=None,
+    xlarge=None,
+    children=[],
+    wrap=True,
+    gutters=True,
+    gutters_dense=False,
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+):
+    """Lay our children in columns, on a 12 point grid system that is responsive to screen size.
+
+    If a single number is specified, or less values than children, the values will be cycled.
+    The total width of this system is 12, so if you want to have 3 columns, each taking up 4 points, you would specify [4, 4, 4] or 4.
+
+
+    ```python
+    with ColumnsResponsive([4, 4, 4]):
+        ...
+    with ColumnsResponsive(4):  # same effect
+        ...
+    ```
+
+    If you want the first column to take up 4 points, and the second column to take up the remaining 8 points, you would specify [4, 8].
+
+    ```python
+    with ColumnsResponsive([4, 8]):
+        ...
+    ```
+
+    If you want your columns to be full width on large screen, and next to each other on larger screens.
+
+    ```python
+    with ColumnsResponsive(12, large=[4, 8]):
+        ...
+    ```
+
+    # Arguments
+
+     * default: Width of column for >= 0 px.
+     * small: Width of column for >= 600 px.
+     * medium: Width of column >= 960 px.
+     * large: Width of column for >= 1264 px.
+     * xlarge: Width of column for >= 1904 px.
+
+    """
+
+    def cycle(value):
+        if value is None:
+            return itertools.cycle([None])
+        elif isinstance(value, int):
+            return itertools.cycle([value])
+        elif isinstance(value, (list, tuple)):
+            return itertools.cycle(value)
+        else:
+            raise ValueError(f"Invalid value for columns: {value}, should be None, int, or list/tuple.")
+
+    class_ = _combine_classes([*(["flex-nowrap"] if not wrap else []), *classes])
+    style_flat = solara.util._flatten_style(style)
+    with rv.Row(class_=class_ if not wrap else "", style_=style_flat, no_gutters=not gutters, dense=gutters_dense) as main:
+        for child, xsmall, small, medium, large, xlarge in zip(children, cycle(default), cycle(small), cycle(medium), cycle(large), cycle(xlarge)):
+            with rv.Col(
+                cols=xsmall,
+                sm=small,
+                md=medium,
+                lg=large,
+                xl=xlarge,
+                children=[child],
+            ):
+                pass
+    return main

solara/components/component_vue.py

@@ -0,0 +1,134 @@
+import inspect
+import os
+from typing import Any, Callable, Dict, Type
+
+import ipyvue as vue
+import ipyvuetify as v
+import ipywidgets as widgets
+import traitlets
+import typing_extensions
+
+import solara
+
+P = typing_extensions.ParamSpec("P")
+
+
+def _widget_from_signature(classname, base_class: Type[widgets.Widget], func: Callable[..., None], event_prefix: str) -> Type[widgets.Widget]:
+    classprops: Dict[str, Any] = {}
+
+    parameters = inspect.signature(func).parameters
+    for name, param in parameters.items():
+        if name.startswith("event_"):
+            event_name = name[6:]
+
+            def event_handler(self, data, buffers=None, event_name=event_name, param=param):
+                callback = self._event_callbacks.get(event_name, param.default)
+                if callback:
+                    if buffers:
+                        callback(data, buffers)
+                    else:
+                        callback(data)
+
+            classprops[f"vue_{event_name}"] = event_handler
+        elif name.startswith("on_") and name[3:] in parameters:
+            # callback, will be handled by reacton
+            continue
+        else:
+            if param.default == inspect.Parameter.empty:
+                trait = traitlets.Any()
+            else:
+                trait = traitlets.Any(default_value=param.default)
+            classprops[name] = trait.tag(sync=True, **widgets.widget_serialization)
+    # maps event_foo to a callable
+    classprops["_event_callbacks"] = traitlets.Dict(default_value={})
+
+    widget_class = type(classname, (base_class,), classprops)
+    return widget_class
+
+
+def _widget_vue(vue_path: str, vuetify=True) -> Callable[[Callable[P, None]], Type[v.VuetifyTemplate]]:
+    def decorator(func: Callable[P, None]):
+        class VuetifyWidgetSolara(v.VuetifyTemplate):
+            template_file = (os.path.abspath(inspect.getfile(func)), vue_path)
+
+        class VueWidgetSolara(vue.VueTemplate):
+            template_file = (os.path.abspath(inspect.getfile(func)), vue_path)
+
+        base_class = VuetifyWidgetSolara if vuetify else VueWidgetSolara
+        widget_class = _widget_from_signature("VueWidgetSolaraSub", base_class, func, "vue_")
+
+        return widget_class
+
+    return decorator
+
+
+def component_vue(vue_path: str, vuetify=True) -> Callable[[Callable[P, None]], Callable[P, solara.Element]]:
+    """Decorator to create a component backed by a Vue template.
+
+    Although many components can be made from the Python side, sometimes it is easier to write components using Vue directly.
+    It can also be beneficial for performance, since instead of creating many widgets from the Python side we only send data to
+    the frontend. If event handling is also done on the frontend, this reduces latency and makes you app feel much smoother.
+
+
+    All arguments of the function are exposed as Vue properties. Argument pairs of the form `foo`, and `on_foo`
+    are assumed by refer to the same vue property, with `on_foo` being the event handler when `foo` changes from
+    the vue template.
+
+    Arguments or the form `event_foo` should be callbacks that can be called from the vue template. They are
+    available as the function `foo` in the vue template.
+
+    [See the vue v2 api](https://v2.vuejs.org/v2/api/) for more information on how to use Vue, like `watch`,
+    `methods` and lifecycle hooks such as `mounted` and `destroyed`.
+
+    See the [Vue component example](/documentation/examples/general/vue_component) for an example of how to use this decorator.
+
+
+    ## Examples
+
+    A component that takes a `foo` argument and an `on_foo` callback that gets called when `foo` changes (from the frontend).
+
+    ```python
+    import solara
+
+    @solara.component_vue("my_foo_component.vue")
+    def MyFooComponent(foo: int, on_foo: Callable[[int], None]):
+        pass
+    ```
+
+    The following component only takes in a month argument and an event_date_clicked callback that gets called from
+    the vue template using `this.date_clicked({'extra-data': 42, 'day': this.day})`.
+    ```python
+    import solara
+
+    @solara.component_vue("my_date_component.vue")
+    def MyDateComponent(month: int, event_date_clicked: Callable):
+        pass
+    ```
+
+    ## Arguments
+
+     * `vue_path`: The path to the Vue template file.
+     * `vuetify`: Whether the Vue template uses Vuetify components.
+
+    """
+
+    def decorator(func: Callable[P, None]):
+        VueWidgetSolaraSub = _widget_vue(vue_path, vuetify=vuetify)(func)
+
+        def wrapper(*args, **kwargs):
+            event_callbacks = {}
+            kwargs = kwargs.copy()
+            # take out all events named like event_foo and put them in a separate dict
+            for name in list(kwargs):
+                if name.startswith("event_"):
+                    event_callbacks[name[6:]] = kwargs.pop(name)
+            if event_callbacks:
+                kwargs["_event_callbacks"] = event_callbacks
+            return VueWidgetSolaraSub.element(*args, **kwargs)  # type: ignore
+
+        return wrapper
+
+    return decorator
+
+
+_component_vue = component_vue