solara-ui 1.45.0__py3-none-any.whl

solara/lab/components/input_date.py

@@ -0,0 +1,339 @@
+import datetime as dt
+from typing import Callable, Dict, List, Optional, Tuple, Union, cast
+
+import ipyvue
+import reacton
+
+import solara
+import solara.lab
+from solara.components.input import _use_input_type
+
+
+def use_close_menu(el: reacton.core.Element, is_open: solara.Reactive[bool]):
+    is_open_ref = solara.use_ref(is_open)
+    is_open_ref.current = is_open
+
+    def monitor_events():
+        def close_menu(*ignore_args):
+            is_open_ref.current.set(False)
+
+        widget = cast(ipyvue.VueWidget, solara.get_widget(el))
+        widget.on_event("keyup.enter", close_menu)
+        widget.on_event("keydown.tab", close_menu)
+
+        def cleanup():
+            widget.on_event("keyup.enter", close_menu, remove=True)
+            widget.on_event("keydown.tab", close_menu, remove=True)
+
+        return cleanup
+
+    solara.use_effect(monitor_events, [])
+
+
+@solara.component
+def InputDate(
+    value: Union[solara.Reactive[Optional[dt.date]], Optional[dt.date]],
+    on_value: Optional[Callable[[Optional[dt.date]], None]] = None,
+    label: str = "Pick a date",
+    children: List[solara.Element] = [],
+    open_value: Union[solara.Reactive[bool], bool] = False,
+    on_open_value: Optional[Callable[[bool], None]] = None,
+    optional: bool = False,
+    date_format: str = "%Y/%m/%d",
+    first_day_of_the_week: int = 1,
+    style: Optional[Union[str, Dict[str, str]]] = None,
+    classes: Optional[List[str]] = None,
+    date_picker_type: str = "date",
+    min_date: Optional[str] = None,
+    max_date: Optional[str] = None,
+):
+    """
+    Show a textfield, which when clicked, opens a datepicker. The input date should be of type `datetime.date`.
+
+    ## Basic Example
+
+    ```solara
+    import solara
+    import solara.lab
+    import datetime as dt
+
+
+    @solara.component
+    def Page():
+        date = solara.use_reactive(dt.date.today())
+
+        solara.lab.InputDate(date)
+        solara.Text(str(date.value))
+    ```
+
+    ## Arguments
+
+    * value: Reactive variable of type `datetime.date`, or `None`. This date is selected the first time the component is rendered.
+    * on_value: a callback function for when value changes. The callback function receives the new value as an argument.
+    * label: Text used to label the text field that triggers the datepicker.
+    * children: List of Elements to be rendered under the calendar. If empty, a close button is rendered.
+    * open_value: Controls and communicates the state of the datepicker. If True, the datepicker is open. If False, the datepicker is closed.
+    Intended to be used in conjunction with a custom set of controls to close the datepicker.
+    * on_open_value: a callback function for when open_value changes. Also receives the new value as an argument.
+    * optional: Determines whether to show an error when value is `None`. If `True`, no error is shown.
+    * date_format: Sets the format of the date displayed in the text field. Defaults to `"%Y/%m/%d"`. For more information, see
+    <a href="https://docs.python.org/3/library/datetime.html#strftime-and-strptime-format-codes" target="_blank">the Python documentation</a>.
+    * first_day_of_the_week: Sets the first day of the week, as an `int` starting count from Sunday (`=0`). Defaults to `1`, which is Monday.
+    * style: CSS style to apply to the text field. Either a string or a dictionary of CSS properties (i.e. `{"property": "value"}`).
+    * classes: List of CSS classes to apply to the text field.
+    * date_picker_type: Sets the type of the datepicker. Use `"date"` for date selection or `"month"` for month selection. Defaults to `"date"`.
+    * min_date: Earliest allowed date/month (ISO 8601 format). If not specified, there is no limit.
+    * max_date: Latest allowed date/month (ISO 8601 format). If not specified, there is no limit.
+    """
+    value_reactive = solara.use_reactive(value, on_value)  # type: ignore
+    del value, on_value
+    datepicker_is_open = solara.use_reactive(open_value, on_open_value)  # type: ignore
+    del open_value, on_open_value
+
+    if date_picker_type == "date":
+        internal_date_format = "%Y-%m-%d"
+    elif date_picker_type == "month":
+        internal_date_format = "%Y-%m"
+    else:
+        raise ValueError("date_picker_type must be either 'date' or 'month'.")
+
+    def set_date_typed_cast(value: Optional[str]):
+        if value:
+            try:
+                date_value = dt.datetime.strptime(value, date_format).date()
+                return date_value
+            except ValueError:
+                raise ValueError(f"Date {value} does not match format {date_format.replace('%', '')}")
+        elif optional:
+            return None
+        else:
+            raise ValueError("Date cannot be empty")
+
+    def date_to_str(date: Optional[dt.date]) -> str:
+        if date is not None:
+            return date.strftime(date_format)
+        return ""
+
+    def set_date_cast(new_value: Optional[str]):
+        if new_value:
+            date_value = dt.datetime.strptime(new_value, internal_date_format).date()
+            datepicker_is_open.set(False)
+            value_reactive.value = date_value
+
+    def standard_strfy(date: Optional[dt.date]):
+        if date is None:
+            return None
+        else:
+            return date.strftime(internal_date_format)
+
+    date_standard_str = standard_strfy(value_reactive.value)
+
+    style_flat = solara.util._flatten_style(style)
+
+    internal_value, error_message, set_value_cast = _use_input_type(value_reactive, set_date_typed_cast, date_to_str)
+
+    if error_message:
+        label += f" ({error_message})"
+    input = solara.v.TextField(
+        label=label,
+        v_model=internal_value,
+        on_v_model=set_value_cast,
+        append_icon="mdi-calendar",
+        error=bool(error_message),
+        style_="min-width: 290px;" + style_flat,
+        class_=", ".join(classes) if classes else "",
+    )
+
+    use_close_menu(input, datepicker_is_open)
+
+    with solara.lab.Menu(
+        activator=input,
+        close_on_content_click=False,
+        open_value=datepicker_is_open,
+        use_activator_width=False,
+    ):
+        with solara.v.DatePicker(
+            v_model=date_standard_str,
+            on_v_model=set_date_cast,
+            first_day_of_week=first_day_of_the_week,
+            style_="width: 100%;",
+            max=max_date,
+            min=min_date,
+            type=date_picker_type,
+        ):
+            if len(children) > 0:
+                solara.display(*children)
+
+
+@solara.component
+def InputDateRange(
+    value: Union[solara.Reactive[Tuple[Optional[dt.date], Optional[dt.date]]], Tuple[Optional[dt.date], Optional[dt.date]]],
+    on_value: Optional[Callable[[Optional[Tuple[Optional[dt.date], Optional[dt.date]]]], None]] = None,
+    label: str = "Select dates",
+    children: List[solara.Element] = [],
+    open_value: Union[solara.Reactive[bool], bool] = False,
+    on_open_value: Optional[Callable[[bool], None]] = None,
+    optional: bool = False,
+    date_format: str = "%Y/%m/%d",
+    first_day_of_the_week: int = 1,
+    style: Optional[Union[str, Dict[str, str]]] = None,
+    classes: Optional[List[str]] = None,
+    date_picker_type: str = "date",
+    min_date: Optional[str] = None,
+    max_date: Optional[str] = None,
+    sort: Optional[bool] = False,
+):
+    """
+    Show a textfield, which when clicked, opens a datepicker that allows users to select a range of dates by choosing a starting and ending date.
+    The input dates should be stored in a reactive tuple of type `datetime.date`. The list should contain either precisely two elements.
+    For an empty pre-selection of dates, pass a reactive empty list.
+
+    ## Basic Example
+
+    ```solara
+    import solara
+    import solara.lab
+    import datetime as dt
+
+
+    @solara.component
+    def Page():
+        dates = solara.use_reactive(tuple([dt.date.today(), dt.date.today() + dt.timedelta(days=1)]))
+
+        solara.lab.InputDateRange(dates)
+        solara.Text(str(dates.value))
+    ```
+
+    ## Arguments
+
+    * value: Tuple with elements of type `datetime.date`. For an empty pre-selection of dates, pass an empty tuple.
+    * on_value: a callback function for when value changes. The callback function receives the new value as an argument.
+    * label: Text used to label the text field that triggers the datepicker.
+    * children: List of Elements to be rendered under the calendar. If empty, a close button is rendered.
+    * open_value: Controls and communicates the state of the datepicker. If True, the datepicker is open. If False, the datepicker is closed.
+    Intended to be used in conjunction with a custom set of controls to close the datepicker.
+    * on_open_value: a callback function for when open_value changes. Also receives the new value as an argument.
+    * date_format: Sets the format of the date displayed in the text field. Defaults to `"%Y/%m/%d"`. For more information,
+    see <a href="https://docs.python.org/3/library/datetime.html#strftime-and-strptime-format-codes" target="_blank">the Python documentation</a>.
+    * optional: Determines whether go show an error when value is `None`. If `True`, no error is shown.
+    * first_day_of_the_week: Sets the first day of the week, as an `int` starting count from Sunday (`=0`). Defaults to `1`, which is Monday.
+    * style: CSS style to apply to the text field. Either a string or a dictionary of CSS properties (i.e. `{"property": "value"}`).
+    * classes: List of CSS classes to apply to the text field.
+    * date_picker_type: Sets the type of the datepicker. Use `"date"` for date selection or `"month"` for month selection. Defaults to `"date"`.
+    * min_date: Earliest allowed date/month (ISO 8601 format). If not specified, there is no limit.
+    * max_date: Latest allowed date/month (ISO 8601 format). If not specified, there is no limit.
+    * sort: If True, selected dates will be sorted in ascending order, regardless of the order they were picked. If False, preserves the order the
+    dates were selected.
+
+    ## A More Advanced Example
+
+    ```solara
+    import solara
+    import solara.lab
+    import datetime as dt
+
+
+    @solara.component
+    def Page():
+        date = solara.use_reactive(tuple([dt.date.today(), None]))
+        range_is_open = solara.use_reactive(False)
+        stay_length = solara.use_reactive(1)
+
+        def set_end_date(value):
+            if value and value[0]:
+                value = value[0]
+                second_date = value + dt.timedelta(days=stay_length.value)
+                date.set([value, second_date])
+
+        def book():
+            # Do some stuff here
+            range_is_open.set(False)
+
+        solara.use_memo(lambda: set_end_date(date.value), [stay_length.value])
+
+        with solara.Column(style="width: 400px;"):
+            solara.IntSlider("Length of stay", stay_length, min=1, max=10)
+            with solara.lab.InputDateRange(
+                date,
+                on_value=set_end_date,
+                open_value=range_is_open,
+            ):
+                with solara.Row(justify="end", style="width: 100%;"):
+                    solara.Button(
+                        label="Book",
+                        color="primary",
+                        on_click=book,
+                    )
+
+    ```
+    """
+    value_reactive = solara.use_reactive(value, on_value)  # type: ignore
+    del value, on_value
+
+    if date_picker_type == "date":
+        internal_date_format = "%Y-%m-%d"
+    elif date_picker_type == "month":
+        internal_date_format = "%Y-%m"
+    else:
+        raise ValueError("date_picker_type must be either 'date' or 'month'.")
+
+    date_standard_strings = [date.strftime(internal_date_format) for date in value_reactive.value if date is not None]
+    datepicker_is_open = solara.use_reactive(open_value, on_open_value)  # type: ignore
+    del open_value, on_open_value
+    style_flat = solara.util._flatten_style(style)
+
+    def dates_to_string(dates: Tuple[Optional[dt.date], Optional[dt.date]]):
+        string_dates = [date.strftime(date_format) if date is not None else "" for date in dates]
+        if (len(dates) < 2 or dates[1] is None) and not optional:
+            return string_dates[0], f"Please select two {date_picker_type}s"
+        return " - ".join(string_dates), None
+
+    def set_dates_cast(values):
+        date_value = cast(
+            Tuple[Optional[dt.date], Optional[dt.date]],
+            tuple([(dt.datetime.strptime(item, internal_date_format).date() if item is not None else None) for item in values]),
+        )
+        if len(date_value) > 1 and date_value[1] is not None:
+            datepicker_is_open.set(False)
+
+            if sort:
+                date_value = cast(Tuple[dt.date, dt.date], tuple(sorted(date_value)))
+
+        value_reactive.value = date_value
+
+    string_dates, error_message = dates_to_string(value_reactive.value)
+
+    if error_message:
+        label += f" ({error_message})"
+    input = solara.v.TextField(
+        label=label,
+        v_model=string_dates,
+        append_icon="mdi-calendar",
+        error=bool(error_message),
+        style_="min-width: 290px;" + style_flat,
+        readonly=True,
+        class_=", ".join(classes) if classes else "",
+    )
+
+    # We include closing on tab in case users want to skip the field with tab
+    use_close_menu(input, datepicker_is_open)
+
+    with solara.lab.Menu(
+        activator=input,
+        close_on_content_click=False,
+        open_value=datepicker_is_open,
+        use_activator_width=False,
+    ):
+        with solara.v.DatePicker(
+            v_model=date_standard_strings,
+            on_v_model=set_dates_cast,
+            range=True,
+            first_day_of_week=first_day_of_the_week,
+            style_="width: 100%;",
+            max=max_date,
+            min=min_date,
+            type=date_picker_type,
+        ):
+            if len(children) > 0:
+                for el in children:
+                    solara.display(el)

solara/lab/components/input_time.py

@@ -0,0 +1,133 @@
+import datetime as dt
+from typing import Callable, Dict, List, Optional, Union
+
+import solara
+import solara.lab
+from solara.lab.components.input_date import use_close_menu
+from solara.components.input import _use_input_type
+
+
+@solara.component
+def InputTime(
+    value: Union[solara.Reactive[Optional[dt.time]], Optional[dt.time]],
+    on_value: Optional[Callable[[Optional[dt.time]], None]] = None,
+    label: str = "Pick a time",
+    children: List[solara.Element] = [],
+    open_value: Union[solara.Reactive[bool], bool] = False,
+    on_open_value: Optional[Callable[[bool], None]] = None,
+    optional: bool = False,
+    twelve_hour_clock: bool = False,
+    use_seconds: bool = False,
+    allowed_minutes: Optional[List[int]] = None,
+    style: Optional[Union[str, Dict[str, str]]] = None,
+    classes: Optional[List[str]] = None,
+):
+    """
+    Show a textfield, which when clicked, opens a timepicker. The input time should be of type `datetime.time`.
+
+    ## Basic Example
+
+    ```solara {pycafe-link}
+    import solara
+    import solara.lab
+    import datetime as dt
+
+
+    @solara.component
+    def Page():
+        time = solara.use_reactive(dt.time(12, 0))
+
+        solara.lab.InputTime(time, allowed_minutes=[0, 15, 30, 45])
+        solara.Text(str(time.value))
+    ```
+
+    ## Arguments
+
+    * value: Reactive variable of type `datetime.time`, or `None`. This time is selected the first time the component is rendered.
+    * on_value: a callback function for when value changes. The callback function receives the new value as an argument.
+    * label: Text used to label the text field that triggers the timepicker.
+    * children: List of Elements to be rendered under the timepicker. If empty, a close button is rendered.
+    * open_value: Controls and communicates the state of the timepicker. If True, the timepicker is open. If False, the timepicker is closed.
+    Intended to be used in conjunction with a custom set of controls to close the timepicker.
+    * on_open_value: a callback function for when open_value changes. Also receives the new value as an argument.
+    * optional: Determines whether to show an error when value is `None`. If `True`, no error is shown.
+    * twelve_hour_clock: If `True`, the timepicker will display in 12-hour format. If `False`, the timepicker will display in 24-hour format.
+    * use_seconds: If `True`, the timepicker will allow input of seconds.
+    * allowed_minutes: List of allowed minutes for the timepicker. Restricts the input to specific minute intervals.
+    * style: CSS style to apply to the text field. Either a string or a dictionary of CSS properties (i.e. `{"property": "value"}`).
+    * classes: List of CSS classes to apply to the text field.
+    """
+    time_format_internal = f"%H:%M{':%S' if use_seconds else ''}"
+    time_format_display = f"%H:%M{':%S' if use_seconds else ''}"
+    if twelve_hour_clock:
+        time_format_display = f"%I:%M{':%S' if use_seconds else ''} %p"
+    value_reactive = solara.use_reactive(value, on_value)  # type: ignore
+    del value, on_value
+    timepicker_is_open = solara.use_reactive(open_value, on_open_value)  # type: ignore
+    del open_value, on_open_value
+
+    def set_time_typed_cast(value: Optional[str]):
+        if value:
+            try:
+                time_value = dt.datetime.strptime(value, time_format_display).time()
+                return time_value
+            except ValueError:
+                raise ValueError(f"Time {value} does not match format {time_format_display.replace('%', '')}")
+        elif optional:
+            return None
+        else:
+            raise ValueError("Time cannot be empty")
+
+    def time_to_str(time: Optional[dt.time]) -> str:
+        if time is not None:
+            return time.strftime(time_format_display)
+        return ""
+
+    def set_time_cast(new_value: Optional[str]):
+        if new_value:
+            time_value = dt.datetime.strptime(new_value, time_format_internal).time()
+            value_reactive.value = time_value
+
+    def standard_strfy(time: Optional[dt.time]):
+        if time is None:
+            return None
+        else:
+            return time.strftime(time_format_internal)
+
+    time_standard_str = standard_strfy(value_reactive.value)
+
+    style_flat = solara.util._flatten_style(style)
+
+    internal_value, error_message, set_value_cast = _use_input_type(value_reactive, set_time_typed_cast, time_to_str)
+
+    if error_message:
+        label += f" ({error_message})"
+    input = solara.v.TextField(
+        label=label,
+        v_model=internal_value,
+        on_v_model=set_value_cast,
+        append_icon="mdi-clock",
+        error=bool(error_message),
+        style_="min-width: 290px;" + style_flat,
+        class_=", ".join(classes) if classes else "",
+    )
+
+    use_close_menu(input, timepicker_is_open)
+
+    with solara.lab.Menu(
+        activator=input,
+        close_on_content_click=False,
+        open_value=timepicker_is_open,
+        use_activator_width=False,
+    ):
+        with solara.v.TimePicker(
+            ampm_in_title=twelve_hour_clock,
+            v_model=time_standard_str,
+            on_v_model=set_time_cast,
+            format="24hr" if not twelve_hour_clock else "ampm",
+            allowed_minutes=allowed_minutes,
+            use_seconds=use_seconds,
+            style_="width: 100%;",
+        ):
+            if len(children) > 0:
+                solara.display(*children)

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>