solara-ui 1.45.0__py3-none-any.whl

solara/components/sql_code.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <v-subheader class="pl-0 query-input-label">{{ label }}</v-subheader>
+    <div ref="cm" class="solara-sql-code" :style="`height: ${height};`"></div>
+    <div>Use <kbd>Ctrl</kbd>+<kbd>Space</kbd> for auto-complete</div>
+  </div>
+</template>
+<script>
+  module.exports = {
+    async mounted() {
+      const cmVersion = '5.65.3';
+
+      if (!document.getElementById('codemirror-hint.css')) {
+        const link = document.createElement('link');
+        link.href = `${this.getCdn()}/codemirror@${cmVersion}/addon/hint/show-hint.css`;
+        link.type = "text/css";
+        link.rel = "stylesheet";
+        link.id="codemirror-hint.css";
+        document.head.appendChild(link);
+      }
+
+      await this.loadRequire();
+
+      requirejs.config({paths:{
+          codemirror: `${this.getCdn()}/codemirror@${cmVersion}`
+      }});
+
+      requirejs(["codemirror/lib/codemirror", "codemirror/mode/sql/sql", "codemirror/addon/hint/show-hint", "codemirror/addon/hint/sql-hint"],
+          (cm) => {
+            this.myCodeMirror = cm(this.$refs.cm, {
+              value: this.query || '',
+              mode: "text/x-sql",
+              extraKeys: {"Ctrl-Space": "autocomplete"},
+              hint: cm.hint.sql,
+              hintOptions: {
+                tables: this.tables
+              },
+              lineNumbers: true,
+              gutter: true,
+            });
+            this.myCodeMirror.on('change', (cm, changeObj) => this.query=cm.getValue())
+          });
+    },
+    watch: {
+      query(value) {
+        if (this.myCodeMirror.getValue() !== value) {
+          this.myCodeMirror.setValue(value)
+        }
+      },
+      tables(value) {
+        if (this.myCodeMirror) {
+          this.myCodeMirror.options.hintOptions.tables = value;
+        }
+      }
+    },
+    methods: {
+      import(deps) {
+        return this.loadRequire().then(
+          () => {
+            if(window.jupyterVue) {
+              // in jupyterlab, we take Vue from ipyvue/jupyterVue
+              define("vue", [], () => window.jupyterVue.Vue);
+            } else {
+              define("vue", ['jupyter-vue'], jupyterVue => jupyterVue.Vue);
+            }
+            return new Promise((resolve, reject) => {
+              requirejs(deps, (...modules) => resolve(modules));
+            })
+          }
+        );
+      },
+      loadRequire() {
+        /* Needed in lab */
+        if (window.requirejs) {
+            console.log('require found');
+            return Promise.resolve()
+        }
+        return new Promise((resolve, reject) => {
+          const script = document.createElement('script');
+          script.src = `${this.getCdn()}/requirejs@2.3.6/require.js`;
+          script.onload = resolve;
+          script.onerror = reject;
+          document.head.appendChild(script);
+        });
+      },
+      getJupyterBaseUrl() {
+        // if base url is set, we use ./ for relative paths compared to the base url
+        if (document.getElementsByTagName("base").length) {
+          return document.baseURI;
+        }
+        const labConfigData = document.getElementById('jupyter-config-data');
+        if(labConfigData) {
+          /* lab and Voila */
+          return JSON.parse(labConfigData.textContent).baseUrl;
+        }
+        let base = document.body.dataset.baseUrl || document.baseURI;
+        if(!base.endsWith('/')) {
+          base += '/';
+        }
+        return base
+      },
+      getCdn() {
+        return this.cdn || (window.solara ? window.solara.cdn : `${this.getJupyterBaseUrl()}_solara/cdn`);
+      },
+    }
+  }
+</script>
+<style id="solara-sql-code">
+.solara-sql-code {
+  border: 1px solid gray;
+}
+
+ul.CodeMirror-hints.default {
+  z-index: 10000;
+}
+
+.solara-sql-code .CodeMirror.cm-s-default {
+  height: 100%
+}
+
+.v-subheader.query-input-label {
+  font-size: 12px;
+  height: unset;
+}
+</style>

solara/components/style.py

@@ -0,0 +1,105 @@
+import asyncio
+import hashlib
+import logging
+from pathlib import Path
+from typing import Optional, Union, cast
+
+import ipyvuetify as v
+
+try:
+    import watchfiles
+except ModuleNotFoundError:
+    watchfiles = None  # type: ignore
+
+import solara
+import solara.server.settings
+
+logger = logging.getLogger("solara.Style")
+
+
+@solara.component
+def Style(value: Union[str, Path] = ""):
+    """Add a custom piece of CSS.
+
+    Note that this is considered an advanced feature, and should be used with caution.
+
+    ## Example
+
+    ```python
+    from pathlib import Path
+    import solara
+
+
+    @solara.component
+    def Page():
+        solara.Style(Path("style.css"))
+        solara.Button("Click me", classes=["company-style-button"])
+    ```
+
+    ## Arguments
+
+    - `value`: The CSS string of CSS file to insert into the page. In development mode (the default)
+        when a Path argument is passed, the file will be watched for changes, and the CSS will be reloaded when
+        the file changes. In production mode, the CSS will be inserted once, and not reloaded.
+    """
+    css_content_reloaded, set_css_content_reloaded = solara.use_state(cast(Optional[str], None))
+
+    def hot_reload():
+        in_production = solara.server.settings.main.mode == "production"
+        if not in_production and isinstance(value, Path):
+
+            async def watch():
+                try:
+                    async for _ in watchfiles.awatch(value):
+                        print(value, "changed, reloading css")  # noqa
+                        set_css_content_reloaded(cast(Path, value).read_text(encoding="utf-8"))
+                except RuntimeError:
+                    pass  # swallow the RuntimeError: Already borrowed errors from watchfiles
+                except Exception:
+                    logger.exception("Error watching file")
+
+            if watchfiles:
+                future = asyncio.create_task(watch())
+                return future.cancel
+            else:
+                logger.warning("watchfiles not installed, cannot watch file")
+
+    solara.use_effect(hot_reload, [value])
+
+    uuid = solara.use_unique_key()
+    if css_content_reloaded is not None:
+        css_content = css_content_reloaded
+    else:
+        css_content = value.read_text(encoding="utf-8") if isinstance(value, Path) else value
+    # del value
+    hash = hashlib.sha256(css_content.encode("utf-8")).hexdigest()
+    # the key is unique for this component + value
+    # so that we create a new component if the value changes
+    # but we do not remove the css of a component with the same value
+    key = uuid + "-" + hash
+    # ipyvue does not remove the css itself, so we need to do it manually
+    script = (
+        """
+<script>
+module.exports = {
+  destroyed() {
+    document.getElementById("ipyvue-%s").remove();
+  },
+};
+</script>
+    """
+        % key
+    )
+
+    template = f"""
+<template>
+    <span style="display: none">
+    </span>
+</template>
+{script}
+<style id="{key}">
+{css_content}
+</style>
+    """
+    # using .key avoids reusing the template, which causes a flicker (due to ipyvue)
+    return v.VuetifyTemplate.element(template=template).key(key)

solara/components/switch.py

@@ -0,0 +1,71 @@
+from typing import Callable, Dict, List, Optional, Union
+
+import reacton.ipyvuetify as v
+
+import solara
+
+
+@solara.value_component(bool)
+def Switch(
+    *,
+    label: str = None,
+    value: Union[bool, solara.Reactive[bool]] = True,
+    on_value: Callable[[bool], None] = None,
+    disabled: bool = False,
+    color: str = None,
+    children: list = [],
+    classes: List[str] = [],
+    style: Optional[Union[str, Dict[str, str]]] = None,
+):
+    """A switch component provides users the ability to choose between two distinct values. But aesthetically different from a checkbox.
+
+    Basic examples
+
+    ```solara
+    import solara
+
+    show_message = solara.reactive(True)
+    disable = solara.reactive(False)
+
+
+    @solara.component
+    def Page():
+        with solara.Column():
+            with solara.Row():
+                solara.Switch(label="Hide Message", value=show_message, disabled=disable.value)
+                solara.Switch(label="Disable Message Switch", value=disable)
+
+            if show_message.value:
+                solara.Markdown("## Use Switch to show/hide message")
+
+    ```
+
+
+    ## Arguments
+
+     * `label`: The label to display next to the switch.
+     * `value`: The current value of the switch (True or False).
+     * `on_value`: A callback that is called when the switch is toggled.
+     * `disabled`: If True, the switch is disabled and cannot be used.
+     * `color`: The color of the switch. Can be the name of a [theme](https://solara.dev/documentation/components/lab/theming) color variable (i.e. "success"), a color from the [Material color palette](https://v2.vuetifyjs.com/en/styles/colors/#material-colors) (i.e. "red darken-3"), or a CSS color (i.e. "#ff991f").
+     * `children`: A list of child elements to display on the switch.
+     * `classes`: Additional CSS classes to apply.
+     * `style`: CSS style to apply.
+
+    """
+    reactive_value = solara.use_reactive(value, on_value)
+    del value, on_value
+
+    if label:
+        children = [label] + children
+
+    return v.Switch(
+        label=label,
+        v_model=reactive_value.value,
+        on_v_model=reactive_value.set,
+        disabled=disabled,
+        color=color,
+        class_=solara.util._combine_classes(classes),
+        style_=solara.util._flatten_style(style),
+        children=children,
+    )

solara/components/tab_navigation.py

@@ -0,0 +1,37 @@
+import solara
+from solara.alias import rv, rvue
+
+
+@solara.component
+def LinkTab(path, label):
+    # both adding href to tab or adding Link makes vuetify buggy
+    with rv.Tab() as tab:
+        # with solara.Link(path):
+        solara.Text(label)
+    router = solara.use_router()
+
+    def go(*ignore):
+        router.push(path)
+
+    rvue.use_event(tab, "click.prevent.stop", go)
+    return tab
+
+
+@solara.component
+def TabNavigation(children=[], vertical=False, **kwargs):
+    children = children or []
+    route_current, all_routes = solara.use_route()
+
+    tab_index = all_routes.index(route_current) if route_current is not None else 0
+
+    with rv.Tabs(v_model=tab_index, vertical=vertical, **kwargs) as main:
+        for i, route in enumerate(all_routes):
+            path = solara.resolve_path(route)
+            LinkTab(path, route.label or "No title")
+        if route_current is None:
+            return solara.Error("Page does not exist")
+
+        with rv.TabsItems(v_model=tab_index, children=children):
+            pass
+
+    return main

solara/components/title.py

@@ -0,0 +1,90 @@
+from typing import Callable, Dict, Optional, Tuple, cast
+
+import ipyvuetify as vy
+import reacton.core
+import traitlets
+
+import solara
+import solara.lab
+
+
+class TitleWidget(vy.VuetifyTemplate):
+    template_file = (__file__, "title.vue")
+    title = traitlets.Unicode().tag(sync=True)
+    level = traitlets.Int().tag(sync=True)
+
+
+Titles = Dict[str, Tuple[int, str]]
+
+
+def _set_titles_default(updater: Callable[[Titles], Titles]):
+    pass
+
+
+titles_context = solara.create_context(_set_titles_default)
+
+
+def use_title_get() -> Optional[str]:
+    titles, set_titles = solara.use_state(cast(Titles, {}))
+    titles_context.provide(set_titles)  # type: ignore
+    if titles:
+        title = max([(order, title) for (key, (order, title)) in titles.items()], key=lambda x: x[0])[1]
+    else:
+        title = None
+    return title
+
+
+def use_title_set(title: str, offset: int):
+    key = solara.use_unique_key(prefix="title-")
+    set_titles = solara.use_context(titles_context)
+
+    def update():
+        set_titles(lambda titles: {**titles, key: (offset, title)})
+
+    solara.use_effect(update, [title])
+
+    def restore():
+        def cleanup():
+            def without(titles):
+                titles_restored = titles.copy()
+                titles_restored.pop(key, None)
+                return titles_restored
+
+            set_titles(without)
+
+        return cleanup
+
+    solara.use_effect(restore, [])
+
+
+@solara.component
+def Title(title: str):
+    """Set the title of a page.
+
+    ```python
+    import solara
+
+    @solara.component
+    def Page():
+        with solara.VBox() as main:
+            MyAwesomeComponent()
+            solara.Title("My page title")
+        return main
+    ```
+
+    If multiple Title components are used, the 'deepest' child will take precedence.
+
+    ## Arguments
+
+     * title: the title of the page
+    """
+    level = 0
+    rc = reacton.core.get_render_context()
+    context = rc.context
+    while context and context.parent:
+        level += 1
+        context = context.parent
+    offset = 2**level
+    use_title_set(title, offset)
+
+    return TitleWidget.element(title=title, level=level)

solara/components/title.vue

@@ -0,0 +1,38 @@
+<template><span style="display: none">{{ title }}</span></template>
+
+<script>
+module.exports = {
+  mounted() {
+    if (window._solaraTitles === undefined) {
+      window._solaraTitles = [];
+    }
+    window._solaraTitles.push(this);
+    this.updateTitle();
+  },
+  destroyed() {
+    window._solaraTitles.splice(window._solaraTitles.indexOf(this), 1);
+    if (window._solaraTitles.length) {
+      window._solaraTitles[0].updateTitle();
+    }
+  },
+  watch: {
+    title() {
+      this.updateTitle();
+    },
+    level() {
+      this.updateTitle();
+    },
+  },
+  methods: {
+    updateTitle() {
+      let deepestTitle = window._solaraTitles[0];
+      for (let i = 1; i < window._solaraTitles.length; i++) {
+        if (window._solaraTitles[i].level > deepestTitle.level) {
+          deepestTitle = window._solaraTitles[i];
+        }
+      }
+      document.title = deepestTitle.title;
+    }
+  },
+};
+</script>

solara/components/togglebuttons.py

@@ -0,0 +1,200 @@
+from typing import Callable, Dict, List, Optional, TypeVar, Union, cast, overload
+
+import ipyvuetify as v
+import reacton
+from typing_extensions import Literal
+
+import solara
+from solara.alias import rv
+from solara.util import _combine_classes
+
+T = TypeVar("T")
+
+
+def _get_button_value(button: reacton.core.Element):
+    if "value" in button.kwargs:
+        value = button.kwargs["value"]
+    else:
+        value = button.kwargs.get("label")
+        if value is None and button.args:
+            value = button.args[0]
+    return value
+
+
+@overload
+@solara.value_component(None)
+def ToggleButtonsSingle(
+    value: Union[T, solara.Reactive[T]],
+    values: List[T] = ...,
+    children: List[reacton.core.Element] = ...,
+    on_value: Optional[Callable[[T], None]] = ...,
+    dense: bool = ...,
+    mandatory: Literal[True] = ...,
+    classes: List[str] = ...,
+    style: Union[str, Dict[str, str], None] = ...,
+) -> reacton.core.ValueElement[v.BtnToggle, T]: ...
+
+
+@overload
+@solara.value_component(None)
+def ToggleButtonsSingle(
+    value: Union[Optional[T], solara.Reactive[Optional[T]]] = None,
+    values: List[T] = ...,
+    children: List[reacton.core.Element] = ...,
+    on_value: Optional[Callable[[Optional[T]], None]] = ...,
+    dense: bool = ...,
+    mandatory: Literal[False] = ...,
+    classes: List[str] = ...,
+    style: Union[str, Dict[str, str], None] = ...,
+) -> reacton.core.ValueElement[v.BtnToggle, T]: ...
+
+
+@solara.value_component(None)
+def ToggleButtonsSingle(
+    value: Union[None, T, Optional[T], solara.Reactive[T], solara.Reactive[Optional[T]]] = None,
+    values: List[T] = [],
+    children: List[reacton.core.Element] = [],
+    on_value: Optional[Callable[[T], None]] = None,
+    dense: bool = False,
+    mandatory: bool = True,
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+) -> reacton.core.ValueElement[v.BtnToggle, T]:
+    """ToggleButtons for selecting a single value.
+
+    ```solara
+    import solara
+
+    foods = ["Kiwi", "Banana", "Apple"]
+    food = solara.reactive("Banana")
+
+
+    @solara.component
+    def Page():
+        with solara.Card("My favorite food"):
+            solara.ToggleButtonsSingle(value=food, values=foods)
+            solara.Markdown(f"**Selected**: {food.value}")
+    ```
+
+    ### Using Buttons
+
+    Instead of passing the values as a list, we can also use the buttons as children.
+    This allows us to customize the buttons, for example to add an icon.
+
+    ```solara
+    import solara
+
+    direction = solara.reactive("left")
+
+
+    @solara.component
+    def Page():
+        with solara.Card("Pick a direction"):
+            # instead of using the values argument, we can use the buttons as children
+            # the label of the button will be used as value, if no value is given.
+            with solara.ToggleButtonsSingle(value=direction):
+                # note that the label and the value are different
+                solara.Button("Up", icon_name="mdi-arrow-up-bold", value="up", text=True)
+                solara.Button("Down", icon_name="mdi-arrow-down-bold", value="down", text=True)
+                solara.Button("Left", icon_name="mdi-arrow-left-bold", value="left", text=True)
+                solara.Button("Right", icon_name="mdi-arrow-right-bold", value="right", text=True)
+            solara.Markdown(f"**Selected**: {direction.value}")
+    ```
+
+    ## Arguments
+
+     * `value`: The currently selected value.
+     * `values`: List of values to select from.
+     * `children`: List of buttons to use as values.
+     * `on_value`: Callback to call when the value changes.
+     * `dense`: Whether to use a dense (smaller) style.
+     * `mandatory`: Whether a choice is mandatory.
+     * `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(classes)
+    style_flat = solara.util._flatten_style(style)
+    # TODO: make type safe
+    # typing is ignored below due to an issue with the typing; The combination of value being T and on_value being of type Callback[[Optional[T]], None] is
+    # not allowed to be passed to use_reactive. We also do not allow this by using our overloads, but this information seems lost at this point by
+    # the typechecker
+    reactive_value = solara.use_reactive(value, on_value)  # type: ignore
+    children = [solara.Button(label=str(value)) for value in values] + children
+    values = values + [_get_button_value(button) for button in children]  # type: ignore
+    # When mandatory = True, index should not be None, but we are letting the front-end take care of setting index to 0 because of a bug
+    # (see https://github.com/widgetti/solara/issues/282)
+    # TODO: set index to 0 on python side (after #282 is resolved)
+    index, set_index = solara.use_state_or_update(values.index(reactive_value.value) if reactive_value.value in values else None, key="index")
+
+    def on_index(index):
+        set_index(index)
+        if mandatory:
+            value = values[index]
+        else:
+            value = values[index] if index is not None else None
+        reactive_value.set(value)
+
+    return cast(
+        reacton.core.ValueElement[v.BtnToggle, T],
+        rv.BtnToggle(children=children, multiple=False, mandatory=mandatory, v_model=index, on_v_model=on_index, dense=dense, class_=class_, style_=style_flat),
+    )
+
+
+@solara.value_component(None)
+def ToggleButtonsMultiple(
+    value: Union[List[T], solara.Reactive[List[T]]] = [],
+    values: List[T] = [],
+    children: List[reacton.core.Element] = [],
+    on_value: Union[Callable[[List[T]], None], None] = None,
+    dense: bool = False,
+    mandatory: bool = False,
+    classes: List[str] = [],
+    style: Union[str, Dict[str, str], None] = None,
+) -> reacton.core.ValueElement[v.BtnToggle, List[T]]:
+    """ToggleButtons for selecting multiple values.
+
+    ### Basic example:
+    ```solara
+    import solara
+
+    all_languages = "Python C++ Java JavaScript TypeScript BASIC".split()
+    languages = solara.reactive([all_languages[0]])
+
+
+    @solara.component
+    def Page():
+        with solara.Card("My favorite programming languages"):
+            solara.ToggleButtonsMultiple(languages, all_languages)
+            solara.Markdown(f"**Selected**: {languages.value}")
+    ```
+
+    ## Arguments
+
+     * `value`: The currently selected values.
+     * `values`: List of values to select from.
+     * `children`: List of buttons to use as values.
+     * `on_value`: Callback to call when the value changes.
+     * `dense`: Whether to use a dense (smaller) style.
+     * `mandatory`: Whether selecting at least one element is mandatory.
+     * `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(classes)
+    style_flat = solara.util._flatten_style(style)
+    # See comment regarding typing issue in ToggleButtonsSingle
+    reactive_value = solara.use_reactive(value, on_value)  # type: ignore
+    children = [solara.Button(label=str(value)) for value in values] + children
+    allvalues = values + [_get_button_value(button) for button in children]
+    indices, set_indices = solara.use_state_or_update([allvalues.index(k) for k in reactive_value.value], key="index")
+
+    def on_indices(indices):
+        set_indices(indices)
+        value = [allvalues[k] for k in indices]
+        reactive_value.set(value)
+
+    return cast(
+        reacton.core.ValueElement[v.BtnToggle, List[T]],
+        rv.BtnToggle(
+            children=children, multiple=True, mandatory=mandatory, v_model=indices, on_v_model=on_indices, dense=dense, class_=class_, style_=style_flat
+        ),
+    )