solara 1.6.1__tar.gz → 1.7.0__tar.gz

{solara-1.6.1 → solara-1.7.0}/.bumpversion.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 1.6.1
+current_version = 1.7.0
 commit = True
 tag = True
 parse = (?P<major>\d+)(\.(?P<minor>\d+))(\.(?P<patch>\d+))((?P<release>.)(?P<build>\d+))?

{solara-1.6.1 → solara-1.7.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: solara
-Version: 1.6.1
+Version: 1.7.0
 Summary: Build webapps using IPywidgets
 Author-email: "Maarten A. Breddels" <maartenbreddels@gmail.com>
 Classifier: License :: OSI Approved :: MIT License
@@ -33,7 +33,7 @@ Requires-Dist: jupyter_client>=7.0.0
 Requires-Dist: watchdog
 Requires-Dist: requests
 Requires-Dist: pygments==2.10; python_version < '3.7'
-Requires-Dist: solara-assets==1.6.1 ; extra == "assets"
+Requires-Dist: solara-assets==1.7.0 ; extra == "assets"
 Requires-Dist: flake8 ; extra == "dev"
 Requires-Dist: bqplot ; extra == "dev"
 Requires-Dist: bqplot-image-gl ; extra == "dev"

{solara-1.6.1 → solara-1.7.0}/packages/assets/solara_assets/__init__.py

@@ -1,2 +1,2 @@
 "CDN assets for Solara"
-__version__ = "1.6.1"
+__version__ = "1.7.0"

{solara-1.6.1 → solara-1.7.0}/packages/solara-enterprise/pyproject.toml

@@ -11,7 +11,7 @@ license = {file = "LICENSE"}
 classifiers = ["License :: Free for non-commercial use"]
 dynamic = ["version", "description"]
 dependencies = [
-    "solara==1.6.1",
+    "solara==1.7.0",
 ]
 
 ssg = [

{solara-1.6.1 → solara-1.7.0}/packages/solara-enterprise/solara_enterprise/__init__.py

@@ -1,2 +1,2 @@
 "Enterprise features for Solara"
-__version__ = "1.6.1"
+__version__ = "1.7.0"

{solara-1.6.1 → solara-1.7.0}/pyproject.toml

@@ -78,7 +78,7 @@ dev = [
     "pytest-playwright; python_version > '3.6'",
 ]
 assets = [
-    "solara-assets==1.6.1"
+    "solara-assets==1.7.0"
 ]
 flask = [
     "flask",

{solara-1.6.1 → solara-1.7.0}/release.md

@@ -7,14 +7,14 @@
 ## Making an alpha release
 
 
-    $ ./release.sh patch --new-version 1.6.1a1
+    $ ./release.sh patch --new-version 1.7.0a1
 
 
 # semi automated
 To make a new release
 ```
 # update solara/__init__.py
-$ git add -u && git commit -m 'Release v1.6.1' && git tag v1.6.1 && git push upstream master v1.6.1
+$ git add -u && git commit -m 'Release v1.7.0' && git tag v1.7.0 && git push upstream master v1.7.0
 ```
 
 
@@ -22,5 +22,5 @@ If a problem happens, and you want to keep the history clean
 ```
 # do fix
 $ git rebase -i HEAD~3
-$ git tag v1.6.1 -f &&  git push upstream master v1.6.1 -f
+$ git tag v1.7.0 -f &&  git push upstream master v1.7.0 -f
 ```

{solara-1.6.1 → solara-1.7.0}/solara/__init__.py

@@ -1,5 +1,5 @@
 """Build webapps using IPywidgets"""
-__version__ = "1.6.1"
+__version__ = "1.7.0"
 github_url = "https://github.com/widgetti/solara"
 git_branch = "master"
 
@@ -35,6 +35,7 @@ from reacton import (
     use_state,
     use_state_widget,
 )  # noqa: F403, F401
+from reacton.core import Element  # noqa: F403, F401
 from . import util
 
 # flake8: noqa: F402

{solara-1.6.1 → solara-1.7.0}/solara/autorouting.py

@@ -3,6 +3,7 @@ import importlib
 import inspect
 import pkgutil
 import re
+import warnings
 from pathlib import Path
 from types import ModuleType
 from typing import Any, Callable, List, Optional, cast
@@ -356,7 +357,7 @@ def generate_routes(module: ModuleType) -> List[solara.Route]:
                     raise KeyError(f"Route {k!r} listen in route_order not found in {module}")
             routes = [lookup[k] for k in route_order]
             if set(lookup) - set(route_order):
-                raise KeyError(f"Some routes are not in route_order: {set(lookup) - set(route_order)}")
+                warnings.warn(f"Some routes are not in route_order: {set(lookup) - set(route_order)}")
 
     else:
         children = getattr(module, "routes", [])

{solara-1.6.1 → solara-1.7.0}/solara/components/applayout.py

@@ -218,7 +218,7 @@ def AppLayout(
 
     title = t.use_title_get() or title
 
-    show_app_bar = title or routes or children_appbar or use_drawer
+    show_app_bar = title or (routes and navigation) or children_appbar or use_drawer
     if not show_app_bar and not children_sidebar and len(children) == 1:
         return children[0]
     if embedded_mode and not fullscreen:

solara-1.7.0/solara/components/datatable.py

@@ -0,0 +1,220 @@
+import dataclasses
+import math
+import os
+from dataclasses import replace
+from typing import Callable, List, Optional
+
+import ipyvuetify as v
+import ipywidgets
+import traitlets
+
+import solara
+import solara.hooks.dataframe
+import solara.lab
+from solara.lab.hooks.dataframe import use_df_column_names
+from solara.lab.utils.dataframe import df_type
+
+from .. import CellAction, ColumnAction
+
+
+def _ensure_dict(d):
+    if dataclasses.is_dataclass(d):
+        return dataclasses.asdict(d)
+    return d
+
+
+def _drop_keys_from_list_of_mappings(drop):
+    def closure(list_of_dicts, widget):
+        return [{k: v for k, v in _ensure_dict(d).items() if k not in drop} for d in list_of_dicts]
+
+    return closure
+
+
+class DataTableWidget(v.VuetifyTemplate):
+    template_file = os.path.realpath(os.path.join(os.path.dirname(__file__), "datatable.vue"))
+
+    total_length = traitlets.CInt().tag(sync=True)
+    checked = traitlets.List([]).tag(sync=True)  # indices of which rows are selected
+    column_actions = traitlets.List(trait=traitlets.Instance(ColumnAction), default_value=[]).tag(
+        sync=True, to_json=_drop_keys_from_list_of_mappings(["on_click"])
+    )
+    _column_actions_callbacks = traitlets.List(trait=traitlets.Callable(), default_value=[])
+    cell_actions = traitlets.List(trait=traitlets.Instance(CellAction), default_value=[]).tag(sync=True, to_json=_drop_keys_from_list_of_mappings(["on_click"]))
+    _cell_actions_callbacks = traitlets.List(trait=traitlets.Callable(), default_value=[])
+    items = traitlets.Any().tag(sync=True)  # the data, a list of dict
+    headers = traitlets.Any().tag(sync=True)
+    headers_selections = traitlets.Any().tag(sync=True)
+    options = traitlets.Any().tag(sync=True)
+    items_per_page = traitlets.CInt(11).tag(sync=True)
+    selections = traitlets.Any([]).tag(sync=True)
+    selection_colors = traitlets.Any([]).tag(sync=True)
+    selection_enabled = traitlets.Bool(True).tag(sync=True)
+    highlighted = traitlets.Int(None, allow_none=True).tag(sync=True)
+    scrollable = traitlets.Bool(False).tag(sync=True)
+
+    # for use with scrollable, when used in the default UI
+    height = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+
+    hidden_components = traitlets.List([]).tag(sync=False)
+    column_header_hover = traitlets.Unicode(allow_none=True).tag(sync=True)
+    column_header_widget = traitlets.Any(allow_none=True).tag(sync=True, **ipywidgets.widget_serialization)
+
+    def vue_on_column_action(self, data):
+        header_value, action_index = data
+        on_click = self._column_actions_callbacks[action_index]
+        if on_click:
+            on_click(header_value)
+
+    def vue_on_cell_action(self, data):
+        row, header_value, action_index = data
+        on_click = self._cell_actions_callbacks[action_index]
+        if on_click:
+            on_click(header_value, row)
+
+
+def format_default(df, column, row_index, value):
+    if isinstance(value, float) and math.isnan(value):
+        return "NaN"
+    return str(value)
+
+
+@solara.component
+def DataTable(
+    df,
+    page=0,
+    items_per_page=20,
+    format=None,
+    column_actions: List[ColumnAction] = [],
+    cell_actions: List[CellAction] = [],
+    scrollable=False,
+    on_column_header_hover: Optional[Callable[[Optional[str]], None]] = None,
+    column_header_info: Optional[solara.Element] = None,
+):
+    total_length = len(df)
+    options = {"descending": False, "page": page + 1, "itemsPerPage": items_per_page, "sortBy": [], "totalItems": total_length}
+    options, set_options = solara.use_state(options, key="options")
+    format = format or format_default
+    # frontend does 1 base, we use 0 based
+    page = options["page"] - 1
+    items_per_page = options["itemsPerPage"]
+    i1 = page * items_per_page
+    i2 = min(total_length, (page + 1) * items_per_page)
+
+    columns = use_df_column_names(df)
+
+    items = []
+    column_data = {}
+    dfs = df[i1:i2]
+
+    if df_type(df) == "pandas":
+        column_data = dfs[columns].to_dict("records")
+    else:
+        column_data = dfs[columns].to_records()
+    for i in range(i2 - i1):
+        item = {"__row__": i + i1}  # special key for the row number
+        for column in columns:
+            item[column] = format(dfs, column, i + i1, column_data[i][column])
+        items.append(item)
+
+    headers = [{"text": name, "value": name, "sortable": False} for name in columns]
+    column_actions_callbacks = [k.on_click for k in column_actions]
+    cell_actions_callbacks = [k.on_click for k in cell_actions]
+    column_actions = [replace(k, on_click=None) for k in column_actions]
+    cell_actions = [replace(k, on_click=None) for k in cell_actions]
+
+    return DataTableWidget.element(
+        total_length=total_length,
+        items=items,
+        headers=headers,
+        headers_selections=[],
+        options=options,
+        items_per_page=items_per_page,
+        selections=[],
+        selection_colors=[],
+        selection_enabled=False,
+        highlighted=None,
+        scrollable=scrollable,
+        on_options=set_options,
+        column_actions=column_actions,
+        cell_actions=cell_actions,
+        _column_actions_callbacks=column_actions_callbacks,
+        _cell_actions_callbacks=cell_actions_callbacks,
+        on_column_header_hover=on_column_header_hover,
+        column_header_widget=column_header_info,
+    )
+
+
+@solara.component
+def DataFrame(
+    df,
+    items_per_page=20,
+    column_actions: List[ColumnAction] = [],
+    cell_actions: List[CellAction] = [],
+    scrollable=False,
+    on_column_header_hover: Optional[Callable[[Optional[str]], None]] = None,
+    column_header_info: Optional[solara.Element] = None,
+):
+    """Displays a Pandas dataframe in a table.
+
+    Pass in a dataframe as first argument, and optionally how many items per page to display.
+
+    ```solara
+    import solara
+    import pandas as pd
+    import plotly
+
+    df = plotly.data.iris()
+
+    @solara.component
+    def Page():
+        solara.DataFrame(df, items_per_page=5)
+
+    ```
+
+    # Custom column header info
+
+    Use the `column_header_info` argument to display a custom component on the column header when
+    the user hover above it. In this case we display the value counts for the column.
+
+    ```solara
+    import solara
+    import pandas as pd
+    import plotly
+
+    df = plotly.data.iris()
+
+    @solara.component
+    def Page():
+        column_hover, set_column_hover = solara.use_state(None)
+
+        with solara.Column(margin=4) as column_header_info:
+            if column_hover:
+                solara.Text("Value counts for " + column_hover)
+                display(df[column_hover].value_counts())
+            # if no column is hovered above, we provide an empty container
+            # so we always see the triple dot icon on the column header
+
+        solara.DataFrame(df, column_header_info=column_header_info, on_column_header_hover=set_column_hover)
+    ```
+
+
+    ## Arguments
+
+     * `df` - `DataFrame` - a Pandas dataframe.
+     * `items_per_page` - `int` - number of items per page.
+     * `column_actions` - Triggered via clicking on the triple dot icon on the headers (visible when hovering).
+     * `cell_actions` -  Triggered via clicking on the triple dot icon in the cell (visible when hovering).
+     * `on_column_header_hover` - Optional callback when the user hovers over the triple dot icon on a header.
+     * `column_header_info` - Element to display in the column menu popup (visible when hovering), provide an
+            empty container element (like [Column](/api/column)) to force showing the trigle dot icon (see example).
+
+    """
+    return DataTable(
+        df,
+        items_per_page=items_per_page,
+        column_actions=column_actions,
+        cell_actions=cell_actions,
+        scrollable=scrollable,
+        on_column_header_hover=on_column_header_hover,
+        column_header_info=column_header_info,
+    )

solara-1.7.0/solara/components/datatable.vue

@@ -0,0 +1,175 @@
+<template>
+  <v-slide-x-transition appear>
+    <div class="solara-data-table__viewport">
+      <v-data-table dense hide-default-header :headers="[...headers]" :items="items"
+        :footer-props="{ 'items-per-page-options': [10, 20, 50, 100] }" :options.sync="options"
+        :items_per_page.sync="items_per_page" :server-items-length="total_length" :class="[
+          'elevation-1',
+          'solara-data-table',
+          scrollable && 'solara-data-table--scrollable',
+        ]" :style="scrollable && height != null && `height: ${height}`">
+        <template v-slot:header="props">
+          <thead>
+            <tr>
+              <th style="padding: 0 10px; width: 40px">#</th>
+              <th style="padding: 0 1px; width: 30px" v-if="selection_enabled">
+                <v-btn icon color="primary" text small @click="apply_filter">
+                  <v-icon>filter_list</v-icon>
+                </v-btn>
+              </th>
+              <th style="padding: 0 1px" v-for="(header, index) in headers_selections" :key="header.text">
+                <v-icon style="padding: 0 1px" :key="index" :color="selection_colors[index]">brightness_1</v-icon>
+              </th>
+              <v-slide-x-transition :key="header.text" v-for="header in headers">
+                <th class="text-no-wrap">
+                  {{ header.text }}
+                  <v-menu open-on-hover bottom offset-y @input="isOpen => onHeaderHover({ isOpen, header })"
+                    v-if="(column_actions && column_actions.length) || column_header_widget">
+                    <template v-slot:activator="{ on, attrs }">
+                      <v-icon v-bind="attrs" v-on="on" small class="solara-data-table-menu">mdi-dots-vertical</v-icon>
+                    </template>
+                    <v-sheet v-if="header.value === column_header_hover" class="solara-data-table-column-header-sheet">
+                      <jupyter-widget v-if="column_header_widget" :widget="column_header_widget"></jupyter-widget>
+                    </v-sheet>
+                    <v-list v-if="column_actions && column_actions.length">
+                      <v-subheader>Actions:</v-subheader>
+                      <v-list-item link @click="on_column_action([header.value, index])"
+                        v-for="(action, index) in column_actions" :key="index">
+                        <v-list-item-icon><v-icon>{{ action.icon }}</v-icon></v-list-item-icon>
+                        <v-list-item-title>{{ action.name }}</v-list-item-title>
+                      </v-list-item>
+                    </v-list>
+                  </v-menu>
+                </th>
+              </v-slide-x-transition>
+            </tr>
+          </thead>
+        </template>
+        <template v-slot:item="props">
+          <!-- @click="on_row_clicked(props.item.__row__)" -->
+          <tr :class="{ highlightedRow: props.item.__row__ === highlighted }">
+            <td style="padding: 0 10px" class="text-xs-left">
+              <i>{{ props.item.__row__ }}</i>
+            </td>
+            <td style="padding: 0 1px" class="text-xs-left" v-if="selection_enabled">
+              <v-checkbox hide-details style="margin-top: 0; padding-top: 0"
+                :input-value="checked.indexOf(props.item.__row__) != -1" :key="props.item.__row__"
+                @change="(value) => select({ checked: value, row: props.item.__row__ })" />
+            </td>
+            <td style="padding: 0 1px" :key="header.text" v-for="(header, index) in headers_selections">
+              <v-fade-transition leave-absolute>
+                <v-icon v-if="props.item[header.value]" v-model="props.item[header.value]"
+                  :color="selection_colors[index]">brightness_1</v-icon>
+              </v-fade-transition>
+            </td>
+            <td v-for="header in headers" class="text-truncate text-no-wrap" :key="header.text"
+              :title="props.item[header.value]">
+              <v-slide-x-transition appear>
+                <!-- <span @click="on_item_click([props.item.__row__, header.value])">{{ props.item[header.value] }}</span> -->
+                <span>
+                  {{ props.item[header.value] }}
+                  <v-menu open-on-hover bottom offset-y v-if="cell_actions.length">
+                    <template v-slot:activator="{ on, attrs }">
+                      <v-icon v-bind="attrs" v-on="on" small class="solara-data-table-menu">mdi-dots-vertical</v-icon>
+                    </template>
+                    <v-list v-for="(action, index) in cell_actions" :key="index">
+                      <v-list-item link @click="on_cell_action([props.item.__row__, header.value, index])">
+                        <v-list-item-icon><v-icon>{{ action.icon }}</v-icon></v-list-item-icon>
+                        <v-list-item-title>{{ action.name }}</v-list-item-title>
+                      </v-list-item>
+                    </v-list>
+                  </v-menu>
+                </span>
+
+              </v-slide-x-transition>
+            </td>
+          </tr>
+        </template>
+      </v-data-table>
+    </div>
+  </v-slide-x-transition>
+</template>
+
+<script>
+module.exports = {
+  methods: {
+    onHeaderHover({ header, isOpen }) {
+      if (isOpen) {
+        // if isOpen is true, we clicked, and we set it header.value
+        this.column_header_hover = header.value
+      } else {
+        // if false, we only 'unset' if the current header equals the current open menu
+        // because sometimes the menu from another column is closed after opening the new one
+        if (this.column_header_hover == header.value) {
+          this.column_header_hover = null
+        }
+      }
+    }
+  }
+}
+</script>
+<style id="solara_table">
+.highlightedRow {
+  background-color: #e3f2fd;
+}
+
+.solara-data-table table {
+  table-layout: fixed;
+}
+
+.solara-data-table--scrollable .v-data-table__wrapper {
+  overflow-y: auto;
+  height: calc(100% - 59px);
+}
+
+.solara-data-table--scrollable thead>tr {
+  position: sticky;
+  top: 0;
+}
+
+.solara-data-table--scrollable .v-data-table__wrapper,
+.solara-data-table--scrollable .v-data-table__wrapper>table,
+.solara-data-table--scrollable .v-data-table__wrapper>table thead,
+.solara-data-table--scrollable .v-data-table__wrapper>table thead * {
+  background-color: inherit;
+}
+
+/* prevent checkboxes overlaying the table header */
+.solara-data-table--scrollable .v-data-table__wrapper>table thead {
+  position: relative;
+  z-index: 1;
+}
+
+/* avoid margins to collapse, to avoid a white background */
+.solara-data-table-column-header-sheet {
+  overflow: auto;
+}
+
+.solara-data-table.v-data-table th,
+.solara-data-table.v-data-table td {
+  padding-left: 4px;
+  padding-right: 0;
+}
+
+.v-data-table .solara-data-table-menu {
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+
+.v-data-table th:hover .solara-data-table-menu,
+.v-data-table td:hover .solara-data-table-menu {
+  opacity: 1;
+}
+
+.solara-data-table__viewport {
+  overflow-x: auto;
+  width: 100%;
+  max-height: 100%;
+}
+
+.solara-data-table.v-data-table,
+.solara-data-table.v-data-table table {
+  max-width: unset;
+  width: unset;
+}
+</style>

{solara-1.6.1 → solara-1.7.0}/solara/server/assets/style.css

@@ -88,3 +88,8 @@ div.highlight {
 .solara-image {
     cursor: unset !important;
 }
+
+
+.jp-OutputArea-prompt {
+    display: none;
+}

{solara-1.6.1 → solara-1.7.0}/solara/server/static/solara_bootstrap.py

@@ -119,7 +119,7 @@ async def main():
     ]
     for dep in requirements:
         await micropip.install(dep, keep_going=True)
-    await micropip.install("/wheels/solara-1.6.1-py2.py3-none-any.whl", keep_going=True)
+    await micropip.install("/wheels/solara-1.7.0-py2.py3-none-any.whl", keep_going=True)
     import solara
 
     el = solara.Warning("lala")

{solara-1.6.1 → solara-1.7.0}/solara/website/assets/custom.css

@@ -38,7 +38,6 @@ a:link {
     color: var(--color-primary);
 }
 
-pre,
 .jp-RenderedHTMLCommon pre {
     background-color: var(--color-grey-light);
     display: block;

{solara-1.6.1 → solara-1.7.0}/solara/website/pages/api/dataframe.py

@@ -5,18 +5,12 @@
 
 from typing import Any, Dict, Optional, cast
 
-from solara.website.utils import apidoc
+import plotly
 
-try:
-    import vaex
-except ImportError:
-    vaex = None
 import solara
+from solara.website.utils import apidoc
 
-if vaex is not None:
-    df = vaex.datasets.titanic()
-else:
-    df = None
+df = plotly.data.iris()
 
 
 @solara.component
@@ -32,21 +26,19 @@ def Page():
 
     column_actions = [solara.ColumnAction(icon="mdi-sunglasses", name="User column action", on_click=on_action_column)]
     cell_actions = [solara.CellAction(icon="mdi-white-balance-sunny", name="User cell action", on_click=on_action_cell)]
-    with solara.Div() as main:
-        solara.MarkdownIt(
-            f"""
-            ## Demo
+    solara.MarkdownIt(
+        f"""
+        ## Demo
 
-            Below we show display the titanic dataset, and demonstrate a user colum and cell action. Try clicking on the triple icon when hovering
-            above a column or cell. And see the following values changes:
+        Below we show display the titanic dataset, and demonstrate a user colum and cell action. Try clicking on the triple icon when hovering
+        above a column or cell. And see the following values changes:
 
-            * Column action on: `{column}`
-            * Cell action on: `{cell}`
+        * Column action on: `{column}`
+        * Cell action on: `{cell}`
 
-        """
-        )
-        solara.DataFrame(df, column_actions=column_actions, cell_actions=cell_actions)
-    return main
+    """
+    )
+    solara.DataFrame(df, column_actions=column_actions, cell_actions=cell_actions)
 
 
 __doc__ += apidoc(solara.DataFrame.f)  # type: ignore

{solara-1.6.1 → solara-1.7.0}/solara/website/pages/api/warning.py

@@ -34,6 +34,13 @@ def Page():
             outlined=outlined,
             icon=icon,
         )
+        solara.Warning(
+            f"This is solara.Warning(label='...', text={text}, dense={dense}, outlined={outlined}, icon={icon})",
+            text=text,
+            dense=dense,
+            outlined=outlined,
+            icon=icon,
+        )
     return main
 
 

solara-1.7.0/solara/widgets/widgets.py

@@ -0,0 +1,57 @@
+import os
+
+import ipyvuetify as v
+import ipywidgets
+import traitlets
+
+__all__ = [
+    "VegaLite",
+    "Navigator",
+    "GridLayout",
+    "HTML",
+    "watch",
+]
+
+
+class VegaLite(v.VuetifyTemplate):
+    template_file = os.path.realpath(os.path.join(os.path.dirname(__file__), "vue/vegalite.vue"))
+    spec = traitlets.Dict().tag(sync=True)
+    listen_to_click = traitlets.Bool(False).tag(sync=True)
+    listen_to_hover = traitlets.Bool(False).tag(sync=True)
+    on_click = traitlets.traitlets.Callable(None, allow_none=True)
+    on_hover = traitlets.traitlets.Callable(None, allow_none=True)
+
+    def vue_altair_click(self, *args):
+        if self.on_click:
+            self.on_click(*args)
+
+    def vue_altair_hover(self, *args):
+        if self.on_hover:
+            self.on_hover(*args)
+
+
+class Navigator(v.VuetifyTemplate):
+    template_file = os.path.realpath(os.path.join(os.path.dirname(__file__), "vue/navigator.vue"))
+    location = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+
+
+class GridLayout(v.VuetifyTemplate):
+    template_file = os.path.join(os.path.dirname(__file__), "vue/gridlayout.vue")
+    gridlayout_loaded = traitlets.Bool(False).tag(sync=True)
+    items = traitlets.Union([traitlets.List(), traitlets.Dict()], default_value=[]).tag(sync=True, **ipywidgets.widget_serialization)
+    grid_layout = traitlets.List(default_value=[]).tag(sync=True)
+    draggable = traitlets.CBool(True).tag(sync=True)
+    resizable = traitlets.CBool(True).tag(sync=True)
+
+
+class HTML(v.VuetifyTemplate):
+    template_file = os.path.realpath(os.path.join(os.path.dirname(__file__), "vue/html.vue"))
+    tag = traitlets.Unicode("div").tag(sync=True)
+    attributes = traitlets.Dict().tag(sync=True)
+    unsafe_innerHTML = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+
+
+def watch():
+    import ipyvue
+
+    ipyvue.watch(os.path.realpath(os.path.dirname(__file__) + "/vue"))