solara-ui 1.45.0__py3-none-any.whl

solara/components/slider.py

@@ -0,0 +1,442 @@
+import math
+import os
+from datetime import date, datetime, timedelta
+from typing import Callable, List, Optional, Tuple, TypeVar, Union, cast
+
+import ipyvue
+import ipyvuetify
+import reacton.core
+import traitlets
+from typing_extensions import Literal
+
+import solara
+from solara.alias import rv
+
+T = TypeVar("T")
+
+
+@solara.value_component(int)
+def SliderInt(
+    label: str,
+    value: Union[int, solara.Reactive[int]] = 0,
+    min: int = 0,
+    max: int = 10,
+    step: int = 1,
+    on_value: Optional[Callable[[int], None]] = None,
+    thumb_label: Union[bool, Literal["always"]] = True,
+    tick_labels: Union[List[str], Literal["end_points"], bool] = False,
+    disabled: bool = False,
+):
+    """Slider for controlling an integer value.
+
+    ### Basic example:
+
+    ```solara
+    import solara
+
+    int_value = solara.reactive(42)
+
+
+    @solara.component
+    def Page():
+        solara.SliderInt("Some integer", value=int_value, min=-10, max=120)
+        solara.Markdown(f"**Int value**: {int_value.value}")
+        with solara.Row():
+            solara.Button("Reset", on_click=lambda: int_value.set(42))
+    ```
+
+
+    ## Arguments
+
+    * `label`: Label to display next to the slider.
+    * `value`: The currently selected value.
+    * `min`: Minimum value.
+    * `max`: Maximum value.
+    * `step`: Step size.
+    * `on_value`: Callback to call when the value changes.
+    * `thumb_label`: Show a thumb label when sliding (True), always ("always"), or never (False).
+    * `tick_labels`: Show tick labels corresponding to the values (True),
+            custom tick labels by passing a list of strings, only end_points ("end_points"),
+            or no labels at all (False, the default).
+    * `disabled`: Whether the slider is disabled.
+    """
+    reactive_value = solara.use_reactive(value, on_value)
+    del value, on_value
+
+    def set_value_cast(value):
+        reactive_value.value = int(value)
+
+    updated_tick_labels = _produce_tick_labels(tick_labels, min, max, step)
+
+    return rv.Slider(
+        v_model=reactive_value.value,
+        on_v_model=set_value_cast,
+        label=label,
+        min=min,
+        max=max,
+        step=step,
+        thumb_label=thumb_label,
+        tick_labels=updated_tick_labels,
+        dense=False,
+        hide_details=True,
+        disabled=disabled,
+    )
+
+
+@solara.value_component(None)
+def SliderRangeInt(
+    label: str,
+    value: Union[Tuple[int, int], solara.Reactive[Tuple[int, int]]] = (1, 3),
+    min: int = 0,
+    max: int = 10,
+    step: int = 1,
+    on_value: Callable[[Tuple[int, int]], None] = None,
+    thumb_label: Union[bool, Literal["always"]] = True,
+    tick_labels: Union[List[str], Literal["end_points"], bool] = False,
+    disabled: bool = False,
+) -> reacton.core.ValueElement[ipyvuetify.RangeSlider, Tuple[int, int]]:
+    """Slider for controlling a range of integer values.
+
+    ### Basic example:
+
+    ```solara
+    import solara
+
+    int_range = solara.reactive((0, 42))
+
+
+    @solara.component
+    def Page():
+        solara.SliderRangeInt("Some integer range", value=int_range, min=-10, max=120)
+        solara.Markdown(f"**Int range value**: {int_range.value}")
+        with solara.Row():
+            solara.Button("Reset", on_click=lambda: int_range.set((0, 42)))
+    ```
+
+    ## Arguments
+    * `label`: Label to display next to the slider.
+    * `value`: The currently selected value.
+    * `min`: Minimum value.
+    * `max`: Maximum value.
+    * `step`: Step size.
+    * `on_value`: Callback to call when the value changes.
+    * `thumb_label`: Show a thumb label when sliding (True), always ("always"), or never (False).
+    * `tick_labels`: Show tick labels corresponding to the values (True),
+            custom tick labels by passing a list of strings, only end_points ("end_points"),
+            or no labels at all (False, the default).
+    * `disabled`: Whether the slider is disabled.
+    """
+    reactive_value = solara.use_reactive(value, on_value)
+    del value, on_value
+
+    def set_value_cast(value):
+        v1, v2 = value
+        reactive_value.set((int(v1), int(v2)))
+
+    updated_tick_labels = _produce_tick_labels(tick_labels, min, max, step)
+
+    return cast(
+        reacton.core.ValueElement[ipyvuetify.RangeSlider, Tuple[int, int]],
+        rv.RangeSlider(
+            v_model=reactive_value.value,
+            on_v_model=set_value_cast,
+            label=label,
+            min=min,
+            max=max,
+            step=step,
+            thumb_label=thumb_label,
+            tick_labels=updated_tick_labels,
+            dense=False,
+            hide_details=True,
+            disabled=disabled,
+        ),
+    )
+
+
+@solara.value_component(float)
+def SliderFloat(
+    label: str,
+    value: Union[float, solara.Reactive[float]] = 0,
+    min: float = 0,
+    max: float = 10.0,
+    step: float = 0.1,
+    on_value: Callable[[float], None] = None,
+    thumb_label: Union[bool, Literal["always"]] = True,
+    tick_labels: Union[List[str], Literal["end_points"], bool] = False,
+    disabled: bool = False,
+):
+    """Slider for controlling a float value.
+
+    ### Basic example:
+
+    ```solara
+    import solara
+
+    float_value = solara.reactive(42.4)
+
+
+    @solara.component
+    def Page():
+        solara.SliderFloat("Some integer", value=float_value, min=-10, max=120)
+        solara.Markdown(f"**Float value**: {float_value.value}")
+        with solara.Row():
+            solara.Button("Reset", on_click=lambda: float_value.set(42.5))
+    ```
+
+    ## Arguments
+    * `label`: Label to display next to the slider.
+    * `value`: The current value.
+    * `min`: The minimum value.
+    * `max`: The maximum value.
+    * `step`: The step size.
+    * `on_value`: Callback to call when the value changes.
+    * `thumb_label`: Show a thumb label when sliding (True), always ("always"), or never (False).
+    * `tick_labels`: Show tick labels corresponding to the values (True),
+            custom tick labels by passing a list of strings, only end_points ("end_points"),
+            or no labels at all (False, the default).
+    * `disabled`: Whether the slider is disabled.
+    """
+    reactive_value = solara.use_reactive(value, on_value)
+    del value, on_value
+
+    def set_value_cast(value):
+        reactive_value.set(float(value))
+
+    updated_tick_labels = _produce_tick_labels(tick_labels, min, max, step)
+
+    return rv.Slider(
+        v_model=reactive_value.value,
+        on_v_model=set_value_cast,
+        label=label,
+        min=min,
+        max=max,
+        step=step,
+        thumb_label=thumb_label,
+        tick_labels=updated_tick_labels,
+        dense=False,
+        hide_details=True,
+        disabled=disabled,
+    )
+
+
+@solara.value_component(None)
+def SliderRangeFloat(
+    label: str,
+    value: Union[Tuple[float, float], solara.Reactive[Tuple[float, float]]] = (1.0, 3.0),
+    min: float = 0.0,
+    max: float = 10.0,
+    step: float = 0.1,
+    on_value: Callable[[Tuple[float, float]], None] = None,
+    thumb_label: Union[bool, Literal["always"]] = True,
+    tick_labels: Union[List[str], Literal["end_points"], bool] = False,
+    disabled: bool = False,
+) -> reacton.core.ValueElement[ipyvuetify.RangeSlider, Tuple[float, float]]:
+    """Slider for controlling a range of float values.
+
+    ### Basic example:
+
+    ```solara
+    import solara
+
+    float_range = solara.reactive((0.1, 42.4))
+
+
+    @solara.component
+    def Page():
+        solara.SliderRangeFloat("Some float range", value=float_range, min=-10, max=120)
+        solara.Markdown(f"**Float range value**: {float_range.value}")
+        with solara.Row():
+            solara.Button("Reset", on_click=lambda: float_range.set((0.1, 42.4)))
+    ```
+
+    ## Arguments
+    * `label`: Label to display next to the slider.
+    * `value`: The current value.
+    * `min`: The minimum value.
+    * `max`: The maximum value.
+    * `step`: The step size.
+    * `on_value`: Callback to call when the value changes.
+    * `thumb_label`: Show a thumb label when sliding (True), always ("always"), or never (False).
+    * `tick_labels`: Show tick labels corresponding to the values (True),
+            custom tick labels by passing a list of strings, only end_points ("end_points"),
+            or no labels at all (False, the default).
+    * `disabled`: Whether the slider is disabled.
+    """
+    reactive_value = solara.use_reactive(value, on_value)
+    del value, on_value
+
+    def set_value_cast(value):
+        v1, v2 = value
+        reactive_value.set((float(v1), float(v2)))
+
+    updated_tick_labels = _produce_tick_labels(tick_labels, min, max, step)
+
+    return cast(
+        reacton.core.ValueElement[ipyvuetify.RangeSlider, Tuple[float, float]],
+        rv.RangeSlider(
+            v_model=reactive_value.value,
+            on_v_model=set_value_cast,
+            label=label,
+            min=min,
+            max=max,
+            step=step,
+            thumb_label=thumb_label,
+            tick_labels=updated_tick_labels,
+            dense=False,
+            hide_details=True,
+            disabled=disabled,
+        ),
+    )
+
+
+@solara.value_component(None)
+def SliderValue(
+    label: str,
+    value: Union[T, solara.Reactive[T]],
+    values: List[T],
+    on_value: Callable[[T], None] = None,
+    disabled: bool = False,
+) -> reacton.core.ValueElement[ipyvuetify.Slider, T]:
+    """Slider for selecting a value from a list of values.
+
+    ### Basic example:
+
+    ```solara
+    import solara
+
+    foods = ["Kiwi", "Banana", "Apple"]
+    food = solara.reactive("Banana")
+
+
+    @solara.component
+    def Page():
+        solara.SliderValue(label="Food", value=food, values=foods)
+        solara.Markdown(f"**Selected**: {food.value}")
+    ```
+
+    ## Arguments
+    * `label`: Label to display next to the slider.
+    * `value`: The currently selected value.
+    * `values`: List of values to select from.
+    * `on_value`: Callback to call when the value changes.
+    * `disabled`: Whether the slider is disabled.
+
+    """
+    reactive_value = solara.use_reactive(value, on_value)
+    del value, on_value
+    index, set_index = solara.use_state(values.index(reactive_value.value), key="index")
+
+    def on_index(index):
+        set_index(index)
+        value = values[index]
+        reactive_value.set(value)
+
+    return cast(
+        reacton.core.ValueElement[ipyvuetify.Slider, T],
+        rv.Slider(
+            v_model=index,
+            on_v_model=on_index,
+            ticks=True,
+            tick_labels=values,
+            label=label,
+            min=0,
+            max=len(values) - 1,
+            dense=False,
+            hide_details=True,
+            disabled=disabled,
+        ),
+    )
+
+
+class DateSliderWidget(ipyvue.VueTemplate):
+    template_file = os.path.realpath(os.path.join(os.path.dirname(__file__), "slider_date.vue"))
+
+    min = traitlets.CFloat(0).tag(sync=True)
+    days = traitlets.CFloat(0).tag(sync=True)
+    value = traitlets.Any(0).tag(sync=True)
+
+    label = traitlets.Unicode("").tag(sync=True)
+    disabled = traitlets.Bool(False).tag(sync=True)
+
+
+@solara.value_component(date)
+def SliderDate(
+    label: str,
+    value: Union[date, solara.Reactive[date]] = date(2010, 7, 28),
+    min: date = date(1981, 1, 1),
+    max: date = date(2050, 12, 30),
+    on_value: Callable[[date], None] = None,
+    disabled: bool = False,
+):
+    """Slider for controlling a date value.
+
+    ### Basic example:
+
+    ```solara
+    import solara
+    import datetime
+
+    date_value = solara.reactive(datetime.date(2010, 7, 28))
+
+
+    @solara.component
+    def Page():
+        solara.SliderDate("Some date", value=date_value)
+        solara.Markdown(f"**Date value**: {date_value.value.strftime('%Y-%b-%d')}")
+        with solara.Row():
+            solara.Button("Reset", on_click=lambda: date_value.set(datetime.date(2010, 7, 28)))
+    ```
+
+    ## Arguments
+    * `label`: Label to display next to the slider.
+    * `value`: The current value.
+    * `min`: The minimum value.
+    * `max`: The maximum value.
+    * `on_value`: Callback to call when the value changes.
+    * `disabled`: Whether the slider is disabled.
+    """
+    reactive_value = solara.use_reactive(value, on_value)
+    del value, on_value
+
+    def format(d: date):
+        return float(datetime(d.year, d.month, d.day).timestamp())
+
+    dt_min = format(min)
+    delta: timedelta = max - min
+    days = delta.days
+
+    delta_value: timedelta = reactive_value.value - min
+    days_value = delta_value.days
+    if days_value < 0:
+        days_value = 0
+
+    def set_value_cast(value):
+        date = min + timedelta(days=value)
+        reactive_value.set(date)
+
+    return DateSliderWidget.element(label=label, min=dt_min, days=days, on_value=set_value_cast, value=days_value, disabled=disabled)
+
+
+def _produce_tick_labels(tick_labels: Union[List[str], Literal["end_points"], bool], min: float, max: float, step: float) -> Optional[List[str]]:
+    if tick_labels == "end_points":
+        num_repeats = int(math.ceil((max - min) / step)) - 1
+        _tick_labels = [str(min), *([""] * num_repeats), str(max)]
+    elif tick_labels is False:
+        _tick_labels = None
+    elif tick_labels is True:
+        _tick_labels, start = [], min
+
+        while start < max:
+            _tick_labels.append(str(start))
+            start += step
+        _tick_labels.append(str(max))
+    else:
+        _tick_labels = tick_labels
+
+    return _tick_labels
+
+
+FloatSlider = SliderFloat
+IntSlider = SliderInt
+ValueSlider = SliderValue
+DateSlider = SliderDate

solara/components/slider_date.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <v-slider :label="label" :min="0" :max="days" v-model="value" :disabled="disabled">
+      <template v-slot:append>
+        <!-- give it a fixed with so the slider doesn't move around -->
+        <div class="solara-fixedwidth">
+          <div class="solara-makespace">2000-mmm-99</div>
+          <div class="solara-realvalue">
+            {{ valueDate }}
+          </div>
+        </div>
+      </template>
+    </v-slider>
+  </div>
+</template>
+<script>
+module.exports = {
+  mounted() {},
+  computed: {
+    startDate() {
+      return new Date(this.min * 1000);
+    },
+    date() {
+      const date = new Date(this.startDate);
+      date.setDate(date.getDate() + this.value);
+      return date;
+    },
+    valueDate() {
+      const date = this.date;
+      if (date) {
+        const year = date.toLocaleDateString(undefined, { year: "numeric" });
+        const month = date.toLocaleDateString(undefined, { month: "short" });
+        const day = date.toLocaleDateString(undefined, { day: "numeric" });
+        return `${year}-${month}-${day}`;
+      }
+    },
+  },
+  watch: {},
+};
+</script>
+<style id="solara-slider-date">
+.v-input__append-outer {
+  white-space: nowrap;
+}
+.solara-fixedwidth {
+  position: relative;
+}
+.solara-makespace {
+  visibility: hidden;
+}
+.solara-realvalue {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+</style>

solara/components/spinner-solara.vue

@@ -0,0 +1,105 @@
+<template>
+    <div class="solara-sun-spinner-container">
+        <!-- <img id="sun-spinner" height="100px" src="static/assets/favicon.svg" /> -->
+        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
+            xmlns:svgjs="http://svgjs.com/svgjs" :width="size" :height="size" viewBox="0 0 65 65" fill="none">
+            <path id="sun-spinner1" style="transform-origin: center;"
+                d="M57.11 30.64L61.47 17.87L48.7 13.51L42.76 1.39999L30.65 7.34999L17.87 2.97999L13.51 15.75L1.40002 21.7L7.35002 33.81L2.99002 46.58L15.76 50.94L21.71 63.06L33.82 57.11L46.59 61.47L50.95 48.7L63.06 42.75L57.11 30.64ZM54.26 34.39L34.39 54.26C33.19 55.46 31.25 55.46 30.05 54.26L10.2 34.4C9.00002 33.2 9.00002 31.26 10.2 30.07L30.06 10.2C31.26 8.99999 33.2 8.99999 34.4 10.2L54.27 30.07C55.47 31.27 55.47 33.21 54.27 34.4L54.26 34.39Z"
+                :fill="color_back"></path>
+            <path id="sun-spinner2" style="transform-origin: center;"
+                d="M53.62 19.42L51.65 6.07L38.3 8.04L27.46 0L19.42 10.84L6.07 12.82L8.04 26.17L0 37L10.84 45.04L12.81 58.39L26.16 56.42L37 64.46L45.04 53.62L58.39 51.64L56.42 38.29L64.46 27.45L53.62 19.4V19.42ZM52.8 24.06L44.24 50.82C43.72 52.43 42 53.32 40.39 52.81L13.63 44.25C12.02 43.74 11.13 42.01 11.64 40.4L20.21 13.64C20.72 12.03 22.45 11.14 24.06 11.65L50.82 20.21C52.43 20.72 53.32 22.45 52.81 24.06H52.8Z"
+                :fill="color_front"></path>
+        </svg>
+    </div>
+</template>
+
+<style id="solara-spinner">
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(359deg);
+    }
+}
+
+@keyframes oscillate {
+    0% {
+        transform: scale(0.8);
+    }
+
+    50% {
+        transform: scale(1.0);
+    }
+
+    100% {
+        transform: scale(0.8);
+    }
+}
+
+#sun-spinner1 {
+    animation: spin 6s linear infinite;
+    padding: 10px;
+}
+
+#sun-spinner2 {
+    animation: spin 2s cubic-bezier(.79, .14, .15, .86) infinite;
+    padding: 10px;
+}
+
+.solara-sun-spinner-container {
+    animation: oscillate 2s linear infinite;
+    display: inline-block;
+}
+
+@keyframes bounce-in {
+    0% {
+        transform: scale(0);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes bounce-out {
+    0% {
+        transform: translateZ(0) scale(1);
+    }
+
+    100% {
+        transform: translateZ(0) scale(50);
+    }
+}
+
+.solara-transition-enter-active {
+    transition: opacity 0.5s ease;
+    /* animation: bounce-in 0.5s ease; */
+}
+
+.solara-transition-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.solara-transition-leave-active .solara-loader {
+    animation: bounce-out 0.5s ease;
+}
+
+.solara-transition-leave-active .solara-sun-spinner-container {
+    animation: unset;
+}
+
+.solara-transition-leave-active h1 {
+    visibility: hidden;
+}
+
+.solara-transition-enter,
+.solara-transition-leave-to {
+    opacity: 0;
+}
+
+.solara-sun-spinner-container {
+    overflow: hidden;
+}
+</style>

solara/components/spinner.py

@@ -0,0 +1,45 @@
+import ipyvue
+import traitlets
+
+import solara
+
+
+class SpinnerSolaraWidget(ipyvue.VueTemplate):
+    template_file = (__file__, "spinner-solara.vue")
+
+    size = traitlets.Unicode("64px").tag(sync=True)
+    color_back = traitlets.Unicode("#FFCF64").tag(sync=True)
+    color_front = traitlets.Unicode("#FF8C3E").tag(sync=True)
+
+
+@solara.component
+def SpinnerSolara(size="64px", color_back="#FFCF64", color_front="#FF8C3E"):
+    """Spinner component with the Solara logo to indicate the app is busy.
+
+    ## Examples
+    ### Basic example
+
+    ```solara
+    import solara
+
+    @solara.component
+    def Page():
+        solara.SpinnerSolara(size="100px")
+    ```
+
+    ## Changing the colors
+    ```solara
+    import solara
+
+    @solara.component
+    def Page():
+        solara.SpinnerSolara(size="100px", color_back="Grey", color_front="Lime")
+    ```
+
+
+    ## Arguments
+     * `size`: Size of the spinner.
+     * `color_back`: Color of the spinner in the background.
+     * `color_front`: Color of the spinner in the foreground.
+    """
+    return SpinnerSolaraWidget.element(size=size, color_back=color_back, color_front=color_front)

solara/components/sql_code.py

@@ -0,0 +1,41 @@
+from typing import Dict, List
+
+import ipyvue
+import traitlets
+
+import solara
+
+
+class SqlCodeWidget(ipyvue.VueTemplate):
+    template_file = (__file__, "sql_code.vue")
+
+    label = traitlets.Unicode("").tag(sync=True)
+    query = traitlets.Unicode(allow_none=True, default_value=None).tag(sync=True)
+    tables = traitlets.Dict(allow_none=True, default_value=None).tag(sync=True)
+    height = traitlets.Unicode("180px").tag(sync=True)
+    cdn = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+
+    @traitlets.default("cdn")
+    def _cdn(self):
+        import solara.settings
+
+        if not solara.settings.assets.proxy:
+            return solara.settings.assets.cdn
+
+
+@solara.component
+def SqlCode(label="Query", query: str = None, tables: Dict[str, List[str]] = None, on_query=None, height="180px"):
+    """SQL textfield input with auto complete and SQL syntax highlighting.
+
+    To get auto complete for the column names, prefix it with the table name, i.e. "titanic.sur ctrl+space"
+
+    ## Arguments
+
+     * `label`: Label for the textfield.
+     * `query`: SQL query.
+     * `tables`: Dictionary with table names as keys and list of column names as values (used for auto complete).
+     * `on_query`: Callback function that is called when the query is changed
+     * `height`: Height of the textfield
+
+    """
+    return SqlCodeWidget.element(label=label, query=query, tables=tables, on_query=on_query, height=height)