solara-ui 1.31.0__py2.py3-none-any.whl

solara/lab/components/menu.py

@@ -0,0 +1,181 @@
+from typing import Callable, Dict, List, Optional, Union
+
+import solara
+from solara.components.component_vue import component_vue
+
+
+@component_vue("menu.vue")
+def MenuWidget(
+    activator: List[solara.Element],
+    show_menu: bool,
+    on_show_menu: Optional[Callable] = None,
+    close_on_content_click: bool = True,
+    children: List[solara.Element] = [],
+    style: Optional[str] = None,
+    context: bool = False,
+    use_absolute: bool = True,
+    use_activator_width: bool = True,
+):
+    pass
+
+
+@solara.component
+def ClickMenu(
+    activator: Union[solara.Element, List[solara.Element]],
+    open_value: Union[solara.Reactive[bool], bool] = False,
+    on_open_value: Optional[Callable] = None,
+    children: List[solara.Element] = [],
+    style: Optional[Union[str, Dict[str, str]]] = None,
+):
+    """
+    Show a pop-up menu by clicking on the `activator` element. The menu appears at the cursor position.
+
+    ```solara
+    import solara
+
+
+    @solara.component
+    def Page():
+        image_url = "/static/public/beach.jpeg"
+        image = solara.Image(image=image_url)
+
+        with solara.lab.ClickMenu(activator=image):
+            with solara.Column(gap="0px"):
+                [solara.Button(f"Click me {i}!", text=True) for i in range(5)]
+
+    ```
+
+
+    ## Arguments
+
+    * activator: Clicking on this element will open the menu. Accepts either a `solara.Element`, or a list of elements.
+    * open_value: Controls and communicates the state of the menu. If True, the menu is open. If False, the menu is closed.
+    * on_open_value: Function to call when the menu is opened or closed.
+    * menu_contents: List of Elements to be contained in the menu.
+    * style: CSS style to apply. Applied directly onto the `v-menu` component.
+    """
+    open_reactive = solara.use_reactive(open_value, on_open_value)
+    del open_value
+
+    style_flat = solara.util._flatten_style(style)
+
+    if not isinstance(activator, list):
+        activator = [activator]
+
+    return MenuWidget(
+        activator=activator,
+        children=children,
+        show_menu=open_reactive.value,
+        on_show_menu=open_reactive.set,
+        style=style_flat,
+    )
+
+
+@solara.component
+def ContextMenu(
+    activator: Union[solara.Element, List[solara.Element]],
+    open_value: Union[solara.Reactive[bool], bool] = False,
+    on_open_value: Optional[Callable] = None,
+    children: List[solara.Element] = [],
+    style: Optional[Union[str, Dict[str, str]]] = None,
+):
+    """
+    Show a context menu by triggering the contextmenu event on the `activator` element. The menu appears at the cursor position.
+
+    A contextmenu event is typically triggered by clicking the right mouse button, or by pressing the context menu key.
+
+    ```solara
+    import solara
+
+
+    @solara.component
+    def Page():
+        image_url = "/static/public/beach.jpeg"
+        image = solara.Image(image=image_url)
+
+        with solara.lab.ContextMenu(activator=image):
+            with solara.Column(gap="0px"):
+                [solara.Button(f"Click me {i}!", text=True) for i in range(5)]
+
+    ```
+
+    ## Arguments
+
+    * activator: Clicking on this element will open the menu. Accepts either a `solara.Element`, or a list of elements.
+    * open_value: Controls and communicates the state of the menu. If True, the menu is open. If False, the menu is closed.
+    * on_open_value: Function to call when the menu is opened or closed.
+    * children: List of Elements to be contained in the menu
+    * style: CSS style to apply. Applied directly onto the `v-menu` component.
+    """
+    open_reactive = solara.use_reactive(open_value, on_open_value)
+    del open_value
+    style_flat = solara.util._flatten_style(style)
+
+    if not isinstance(activator, list):
+        activator = [activator]
+
+    return MenuWidget(
+        activator=activator,
+        children=children,
+        show_menu=open_reactive.value,
+        on_show_menu=open_reactive.set,
+        style=style_flat,
+        context=True,
+    )
+
+
+@solara.component
+def Menu(
+    activator: Union[solara.Element, List[solara.Element]],
+    open_value: Union[solara.Reactive[bool], bool] = False,
+    on_open_value: Optional[Callable] = None,
+    close_on_content_click: bool = True,
+    children: List[solara.Element] = [],
+    style: Optional[Union[str, Dict[str, str]]] = None,
+    use_activator_width: bool = True,
+):
+    """
+    Show a pop-up menu by clicking on the `activator` element. The menu appears below the `activator` element.
+
+    ```solara
+    import solara
+
+
+    @solara.component
+    def Page():
+        btn = solara.Button("Show suboptions")
+
+        with solara.lab.Menu(activator=btn):
+            with solara.Column(gap="0px"):
+                [solara.Button(f"Click me {str(i)}!", text=True) for i in range(5)]
+
+    ```
+
+    ## Arguments
+
+    * activator: Clicking on this element will open the menu. Accepts either a `solara.Element`, or a list of elements.
+    * open_value: Controls and communicates the state of the menu. If True, the menu is open. If False, the menu is closed.
+    * on_open_value: Function to call when the menu is opened or closed.
+    * children: List of Elements to be contained in the menu
+    * style: CSS style to apply. Applied directly onto the `v-menu` component.
+    * use_activator_width: If True, the menu will have a minimum width equal to the activator element.
+      If False, the menu width will be determined by the content.
+    """
+    open_reactive = solara.use_reactive(open_value, on_open_value)
+    del open_value
+
+    style_flat = solara.util._flatten_style(style)
+
+    if not isinstance(activator, list):
+        activator = [activator]
+
+    return MenuWidget(
+        activator=activator,
+        children=children,
+        show_menu=open_reactive.value,
+        on_show_menu=open_reactive.set,
+        close_on_content_click=close_on_content_click,
+        style=style_flat,
+        use_absolute=False,
+        use_activator_width=use_activator_width,
+    )

solara/lab/components/menu.vue

@@ -0,0 +1,38 @@
+<template>
+    <v-menu
+        v-model="show_menu"
+        :absolute="use_absolute"
+        offset-y
+        :close-on-content-click="close_on_content_click"
+        :min-width="use_activator_width ? null : 'auto'"
+    >
+        <template v-if="context" v-slot:activator="{ on }">
+            <div v-for="(element, index) in activator"
+                :key="index"
+                @contextmenu.prevent="show($event, on)">
+                <jupyter-widget :widget="element"></jupyter-widget>
+            </div>
+        </template>
+        <template v-else v-slot:activator="{ on }">
+            <jupyter-widget :widget="element" v-for="(element, index) in activator" :key="index" @click.native="on.click"></jupyter-widget>
+        </template>
+        <v-list v-for="(element, index) in children" :key="index" style="padding: 0;">
+            <jupyter-widget :widget="element"  :style="style" ></jupyter-widget>
+        </v-list>
+    </v-menu>
+</template>
+
+<script>
+module.exports = {
+    methods: {
+        show(e, on) {
+            // hide menu, and trigger the event on the next tick, otherwise vue does not see
+            // `show_menu` changing and will no do any animation
+            this.show_menu = false;
+            this.$nextTick(() => {
+                on.click(e)
+            })
+        }
+    }
+}
+</script>

solara/lab/components/tabs.py

@@ -0,0 +1,274 @@
+from typing import Callable, Dict, List, Optional, TypeVar, Union
+
+import solara
+from solara import v
+
+
+@solara.component
+def Tab(
+    label: Union[None, str, solara.Element] = None,
+    icon_name: Optional[str] = None,
+    path_or_route: Union[None, str, "solara.Route"] = None,
+    disabled=False,
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+    children: List[solara.Element] = [],
+    tab_children: List[Union[solara.Element, str]] = [],
+):
+    """An item in a Tabs component.
+
+    (*Note: [This component is experimental and its API may change in the future](/documentation/getting_started/what-is-lab).*)
+
+    Should be a direct child of a [Tabs](/documentation/components/lab/tabs).
+
+    ## Arguments
+     * `label`: The label of the tab.
+     * `icon_name`: The name of the icon to display in the tab.
+     * `path_or_route`: The path or route to navigate to when the tab is clicked.
+     * `disabled`: Whether the tab is disabled.
+     * `classes`: Additional CSS classes to apply.
+     * `style`: CSS style to apply.
+     * `children`: The children of the tab. These will be displayed when the tab is active.
+     * `tab_children`: The children of the tab header. These will be displayed in the tab
+        header, if a label or icon_name is provided they are prepended to the `tab_children`.
+
+    """
+    if label is not None:
+        tab_children = [label] + tab_children
+    if icon_name:
+        tab_children = [v.Icon(left=bool(label), children=[icon_name])] + tab_children
+    style_flat = solara.util._flatten_style(style)
+    class_ = solara.util._combine_classes(classes)
+    # note: children is not used, it is only used in the Tabs component
+    return v.Tab(children=tab_children, disabled=disabled, class_=class_, style_=style_flat)
+
+
+T = TypeVar("T")
+
+
+@solara.component
+def Tabs(
+    value: Union[None, int, "solara.Reactive[int]"] = None,
+    on_value: Optional[Callable[[int], None]] = None,
+    color: Optional[str] = None,
+    background_color: Optional[str] = None,
+    slider_color: Optional[str] = None,
+    dark: bool = False,
+    grow: bool = False,
+    vertical=False,
+    align: str = "left",
+    lazy=False,
+    children: List[solara.Element] = [],
+):
+    """A tabbed container showing one tab at a time.
+
+    (*Note: [This component is experimental and its API may change in the future](/documentation/getting_started/what-is-lab).*)
+
+    Note that if Tabs are used as a child of the [AppBar](/documentation/components/layout/app_bar) component, the tabs
+    will be placed under the app bar. See our [authorization app](/apps/authorization) for an example.
+
+    If the children [Tab](/documentation/components/lab/tab) elements are passed a `path_or_route` argument, the active tab
+    will be based on the path of the current page.
+
+
+    ## Examples
+
+    ### Only tabs headers
+
+    ```solara
+    import solara
+    import solara.lab
+
+
+    @solara.component
+    def Page():
+        with solara.lab.Tabs():
+            solara.lab.Tab("Tab 1")
+            solara.lab.Tab("Tab 2")
+    ```
+
+    ### Tabs with content
+
+    This is usually only used when the tabs are placed in the [AppBar](/documentation/components/layout/app_bar) component.
+
+    ```solara
+    import solara
+    import solara.lab
+
+
+    @solara.component
+    def Page():
+        with solara.lab.Tabs():
+            with solara.lab.Tab("Tab 1"):
+                solara.Markdown("Hello")
+            with solara.lab.Tab("Tab 2"):
+                solara.Markdown("World")
+    ```
+
+
+    ### Tabs events
+
+    The `value` on the Tabs component is a reactive value that can be used to
+    listen to changes in the selected tab and make the UI respond to it.
+
+    ```solara
+    import solara
+    import solara.lab
+
+    tab_index = solara.reactive(0)
+
+
+    @solara.component
+    def Page():
+
+        def next_tab():
+            tab_index.value = (tab_index.value + 1) % 2
+
+        solara.Title(f"Tab {tab_index.value + 1}")
+        solara.Button('Next Tab', on_click=next_tab)
+
+        with solara.lab.Tabs(value=tab_index):
+            with solara.lab.Tab("Tab 1"):
+                solara.Markdown("Hello")
+            with solara.lab.Tab("Tab 2"):
+                solara.Markdown("World")
+            with solara.lab.Tab("Disabled", disabled=True):
+                solara.Markdown("World")
+
+    ```
+
+    ### Advanced tabs
+
+    Tabs can be nested, styled and placed vertically.
+
+    ```solara
+    import solara
+    import solara.lab
+
+
+    @solara.component
+    def Page():
+        with solara.lab.Tabs(background_color="primary", dark=True):
+            with solara.lab.Tab("Home", icon_name="mdi-home"):
+                solara.Markdown("Hello")
+            with solara.lab.Tab("Advanced", icon_name="mdi-apps"):
+                with solara.lab.Tabs(grow=True, background_color="primary", dark=True, slider_color="green"):
+                    with solara.lab.Tab("Settings", icon_name="mdi-cogs"):
+                        with solara.lab.Tabs(vertical=True, slider_color="green"):
+                            with solara.lab.Tab("User", icon_name="mdi-account"):
+                                solara.Markdown("User settings")
+                            with solara.lab.Tab("System", icon_name="mdi-access-point"):
+                                solara.Markdown("System settings")
+                    with solara.lab.Tab("Analytics", icon_name="mdi-chart-line"):
+                        with solara.lab.Tabs(vertical=True):
+                            with solara.lab.Tab("User", icon_name="mdi-account"):
+                                solara.Markdown("User analytics")
+                            with solara.lab.Tab("System", icon_name="mdi-access-point"):
+                                solara.Markdown("System analytics")
+
+    ```
+
+
+    ### Many tabs
+
+    If many tabs are shown, paginations arrows are shown.
+
+    ```solara
+    import solara
+    import solara.lab
+
+    tab_count = 30
+
+
+    @solara.component
+    def Page():
+        with solara.lab.Tabs():
+            for i in range(tab_count):
+                with solara.lab.Tab(f"Tab {i+1}"):
+                    solara.Markdown(f"Content for tab {i+1}")
+    ```
+
+
+    ## Arguments
+
+     * `value`: The index of the selected tab. If `None`, the first tab is selected or it is based in the route/path.
+     * `on_value`: A callback that is called when the selected tab changes.
+     * `color`: The color of text in the tab headers (only for dark=False).
+     * `background_color`: The background color of the tab headers.
+     * `slider_color`: The color of the slider.
+     * `dark`: Apply a dark theme.
+     * `grow`: Whether the tabs should grow to fill the available space.
+     * `vertical`: Whether the tabs are vertical.
+     * `align`: The alignment of the tabs, possible values are 'left', 'start', 'center', 'right' or 'end'.
+     * `lazy`: Whether the child components of the inactive tabs are rendered or not. If lazy=True, components of inactive tabs are not rendered.
+     * `classes`: Additional CSS classes to apply.
+     * `style`: CSS style to apply.
+    """
+
+    paths_of_routes = [child.kwargs.get("path_or_route") for child in children]
+    paths = [solara.resolve_path(path_or_route, level=0) if path_or_route else None for path_or_route in paths_of_routes]
+    router = solara.use_router()
+    if value is None:
+        if router.path in paths:
+            value = paths.index(router.path)
+        else:
+            value = 0
+
+    def safe_on_value(index: Optional[int]):
+        if on_value and index is not None:
+            on_value(index)
+
+    reactive_value = solara.use_reactive(value, safe_on_value)
+    del value
+
+    has_content = False
+    for i, child in enumerate(children):
+        if not child.component == Tab:
+            raise ValueError(f"Tabs children must be Tab components, but child {i} is {child.component}")
+        if child.kwargs.get("children"):
+            has_content = True
+
+    def on_v_model(index: Optional[int]):
+        if index is not None:
+            path = paths[index]
+            if path:
+                router.push(path)
+            reactive_value.value = index
+
+    if align not in ["left", "start", "center", "right", "end"]:
+        raise ValueError(f"Tabs align must be one of 'left', 'start', 'center', 'right', 'end', but is {align}")
+
+    with v.Tabs(
+        v_model=reactive_value.value,
+        on_v_model=on_v_model,
+        centered=align == "center",
+        right=align in ["right", "end"],
+        children=children,
+        vertical=vertical,
+        color=color,
+        background_color=background_color,
+        show_arrows=True,
+        grow=grow,
+        dark=dark,
+    ) as tabs:
+        v.TabsSlider(color=slider_color)
+        if has_content:
+            with v.TabsItems(v_model=reactive_value.value, on_v_model=on_v_model):
+                for i, child in enumerate(children):
+                    if not lazy or reactive_value.value == i:
+                        v.TabItem(children=child.kwargs.get("children", []), value=i)
+                    else:
+                        v.TabItem(
+                            value=i,
+                            children=[
+                                # Nice idea, but by using the widget interface the tab does not change without binding using
+                                # v-model. So we would need to implement this using a vuetify template.
+                                # v.SkeletonLoader(
+                                #     class_="mx-auto",
+                                #     max_width="300",
+                                #     type="card",
+                                # )
+                            ],
+                        )
+
+    return tabs

solara/lab/components/theming.py

@@ -0,0 +1,98 @@
+from typing import Callable, Dict, Union, cast
+
+import ipyvuetify.Themes
+from ipyvuetify.Themes import Theme
+
+import solara
+from solara.components.component_vue import component_vue
+from solara.tasks import Proxy
+
+theme = Proxy(Theme)
+ipyvuetify.Themes.theme = cast(ipyvuetify.Themes.Theme, theme)
+
+
+def use_dark_effective():
+    """Return True if the frontend is using a dark theme.
+
+    Equivalent of
+
+    ```python
+    solara.use_trait_observe(solara.lab.theme, "dark_effective")
+    ```
+
+    See [use_trait_observe](/api/use_trait_observe).
+    """
+    return solara.use_trait_observe(theme, "dark_effective")
+
+
+def _set_theme(themes: Union[Dict[str, Dict[str, str]], None]):
+    if themes is None:
+        return
+
+    for theme_type in themes.keys():
+        widget = getattr(theme.themes, theme_type)
+        with widget.hold_trait_notifications():
+            for k, v in themes[theme_type].items():
+                setattr(widget, k, v)
+
+
+def _get_theme(theme: Theme) -> Dict[str, Dict[str, str]]:
+    theme_dict: Dict[str, Dict[str, str]] = cast(Dict[str, Dict[str, str]], {})
+    for theme_type, theme_value in theme.themes.__dict__.items():
+        theme_traits = theme_value.keys
+        theme_dict[theme_type] = {}
+        for trait in theme_traits:
+            if not trait.startswith("_"):
+                theme_dict[theme_type][trait] = getattr(theme_value, trait)
+    return theme_dict
+
+
+@component_vue("theming.vue")
+def _ThemeToggle(
+    theme_dark: str,
+    event_sync_themes: Callable[[str], None],
+    enable_auto: bool,
+    on_icon: str,
+    off_icon: str,
+    auto_icon: str,
+    clicks: int = 1,
+):
+    pass
+
+
+@solara.component
+def ThemeToggle(
+    on_icon: str = "mdi-weather-night",
+    off_icon: str = "mdi-weather-sunny",
+    auto_icon: str = "mdi-brightness-auto",
+    enable_auto: bool = True,
+):
+    """
+    Insert a toggle switch for user to switch between light and dark themes.
+
+    ```solara
+    import solara.lab
+
+    @solara.component
+    def Page():
+        solara.lab.ThemeToggle()
+    ```
+
+    ## Arguments
+    - `on_icon`: The icon to display when the dark theme is enabled.
+    - `off_icon`: The icon to display when the dark theme is disabled.
+    - `auto_icon`: The icon to display when the theme is set to auto. Only visible if `enable_auto` is `True`.
+    - `enable_auto`: Whether to enable the auto detection of dark mode.
+    """
+
+    def sync_themes(selected_theme: str):
+        theme.dark = selected_theme
+
+    return _ThemeToggle(
+        theme_dark=theme.dark,
+        event_sync_themes=sync_themes,
+        enable_auto=enable_auto,
+        on_icon=on_icon,
+        off_icon=off_icon,
+        auto_icon=auto_icon,
+    )

solara/lab/components/theming.vue

@@ -0,0 +1,72 @@
+<template>
+    <v-btn
+        icon
+        @click="countClicks"
+        >
+        <v-icon>
+            {{ this.clicks === 1 ? this.on_icon : this.clicks === 2 ? this.off_icon : this.auto_icon }}
+        </v-icon>
+    </v-btn>
+</template>
+<script>
+module.exports = {
+    mounted() {
+        if (window.solara) {
+            if (localStorage.getItem(':solara:theme.variant')) {
+                this.theme_dark = this.initTheme();
+            }
+        }
+
+        if ( this.theme_dark === false ) {
+            this.clicks = 2;
+        } else if ( this.theme_dark === null ) {
+            this.clicks = 3;
+        }
+        this.lim = this.enable_auto ? 3 : 2;
+    },
+    methods: {
+        countClicks() {
+            if ( this.clicks < this.lim ) {
+                this.clicks++;
+            } else {
+                this.clicks = 1;
+            }
+            this.theme_dark = this.get_theme_bool( this.clicks );
+        },
+        get_theme_bool( clicks ) {
+            if ( clicks === 3 ) {
+                return null;
+            } else if ( clicks === 2 ) {
+                return false;
+            } else {
+                return true;
+            }
+        },
+        stringifyTheme() {
+            return this.theme_dark === true ? 'dark' : this.theme_dark === false ? 'light' : 'auto';
+        },
+        initTheme() {
+            storedTheme = JSON.parse(localStorage.getItem(':solara:theme.variant'));
+            return storedTheme === 'dark' ? true : storedTheme === 'light' ? false : null;
+        },
+        setTheme() {
+            if ( window.solara && this.theme_dark === null ) {
+                this.$vuetify.theme.dark = this.prefersDarkScheme();
+                return;
+            }
+            this.$vuetify.theme.dark = this.theme_dark;
+        },
+        prefersDarkScheme() {
+            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+        },
+    },
+    watch: {
+        clicks (val) {
+            if ( window.solara ) {theme.variant = this.stringifyTheme();}
+            this.setTheme();
+            if ( window.solara ) {localStorage.setItem(':solara:theme.variant', JSON.stringify(theme.variant));}
+            this.sync_themes(this.theme_dark);
+        },
+    }
+}
+</script>

solara/lab/hooks/dataframe.py

@@ -0,0 +1,12 @@
+from ..utils.dataframe import df_type
+
+
+def use_df_column_names(df):
+    if df_type(df) == "vaex":
+        return df.get_column_names()
+    elif df_type(df) == "pandas":
+        return df.columns.tolist()
+    elif df_type(df) == "polars":
+        return df.columns
+    else:
+        raise TypeError(f"{type(df)} not supported")

solara/lab/toestand.py

@@ -0,0 +1,3 @@
+# for backwards compatibility
+from solara.toestand import KernelStoreValue as ConnectionStore  # noqa: F401
+from solara.toestand import Reactive, Ref, State, use_sync_external_store  # noqa: F401

solara/lab/utils/__init__.py

@@ -0,0 +1,2 @@
+from .cookies import cookies  # noqa: F401
+from .headers import headers  # noqa: F401

solara/lab/utils/cookies.py

@@ -0,0 +1,5 @@
+from typing import Dict, Optional, cast
+
+from solara.toestand import Reactive
+
+cookies: Reactive[Optional[Dict[str, str]]] = Reactive(cast(Optional[Dict[str, str]], None), key="solara.lab.cookies")