Skip to content

Commit

Permalink
feat: support Vuetify2
Browse files Browse the repository at this point in the history
  • Loading branch information
@mariobuikhuizen
mariobuikhuizen committed Sep 18, 2019
1 parent 4dfc90c commit e5932c0
Show file tree
Hide file tree
Showing 12 changed files with 10,477 additions and 5,379 deletions.
29 changes: 26 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ ipyvuetify
[![Conda Version](https://img.shields.io/conda/vn/conda-forge/ipyvuetify.svg)](https://anaconda.org/conda-forge/ipyvuetify)
[![Binder](https://mybinder.org/badge.svg)](https://mybinder.org/v2/gh/mariobuikhuizen/ipyvuetify/master?filepath=examples%2FExamples.ipynb)

Jupyter widgets based on [vuetify UI components](https://v15.vuetifyjs.com/en/) which implement Google's
Jupyter widgets based on [vuetify UI components](https://vuetifyjs.com/) which implement Google's
[Material Design Spec](https://material.io/) with the [Vue.js framework](https://vuejs.org/).

Installation
Expand All @@ -31,7 +31,7 @@ Usage

For examples see the [example notebook](examples/Examples.ipynb).

The [Vuetify documentation](https://v15.vuetifyjs.com/en/components/buttons#buttons) can be used to find all available
The [Vuetify documentation](https://vuetifyjs.com/components/buttons#buttons) can be used to find all available
components and attributes (in the left side bar or use the search field). Ipyvuetify tries to stay close to the Vue.js
and Vuetify template syntax, but there are some differences:

Expand All @@ -42,7 +42,6 @@ and Vuetify template syntax, but there are some differences:
| Flag attributes require a boolean value | `<v-btn round ...` | `Btn(round=True ...` |
| Attributes are snake_case | `<v-menu offset-y ..` | `Menu(offset_y=True ...` |
| The v_model attribute (value in ipywidgets) contains the value directly | `<v-slider v-model="some_property" ...` | `Slider(v_model=25...` |
| Scoped slots are not yet implemented, use slot instead | `<v-menu><template slot:activator="{ on }"><v-btn v-on=on>` | `Menu(children=[Btn(slot='activator',...), ...]`
| Event listeners are defined with on_event | `<v-btn @click='someMethod()' ...` | `button.on_event('click', some_method)` |
| | | `def some_method(widget, event, data):` |
| Regular HTML tags can made with the Html class | `<div>...</div>` | `Html(tag='div', children=[...])` |
Expand All @@ -66,6 +65,30 @@ def update_mini(widget, event, data):
drawer.on_event('update:miniVariant', update_mini)
```

### (scoped) slots
##### Vuetify:
```HTML
<v-menu>
<template slot:activator="{ on }">
<v-btn v-on="on">...</v-btn>
</template>
<v-list>
...
</v-list>
</v-menu>
```
##### ipyvuetify:
```python
Menu(v_slots=[{
'name': 'activator',
'variable': 'x',
'children': Btn(v_on='x.on', children=[...])
}], children=[
List(...)
])
```
For non scoped slots `'scope': 'x'` and `v_on` can be omitted.

Alternate usage
---------------

Expand Down
10 changes: 5 additions & 5 deletions examples/Examples template.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,18 @@
" <template v-slot:activator=\"{ on }\">\n",
" <v-btn\n",
" :color=\"color\"\n",
" dark\n",
" class=\"white--text\"\n",
" v-on=\"on\">\n",
" {{ button_text }}\n",
" </v-btn>\n",
" </template>\n",
" <v-list>\n",
" <v-list-tile\n",
" <v-list-item\n",
" v-for=\"(item, index) in items\"\n",
" :key=\"index\"\n",
" @click=\"menu_click(index)\">\n",
" <v-list-tile-title>{{ item }}</v-list-tile-title>\n",
" </v-list-tile>\n",
" <v-list-item-title>{{ item }}</v-list-item-title>\n",
" </v-list-item>\n",
" </v-list>\n",
" </v-menu>\n",
" </v-layout>''').tag(sync=True)\n",
Expand Down Expand Up @@ -129,7 +129,7 @@
" :items=\"items\"\n",
" :search=\"search\"\n",
" :item-key=\"index_col\"\n",
" :rows-per-page-items=\"[25, 50, 250, 500]\"\n",
" :footer-props=\"{'items-per-page-options': [25, 50, 250, 500]}\"\n",
" >\n",
" <template v-slot:no-data>\n",
" <v-alert :value=\"true\" color=\"error\" icon=\"warning\">\n",
Expand Down
148 changes: 90 additions & 58 deletions examples/Examples.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"button1 = v.Btn(children=['button'])\n",
"button1.on_event('click', on_click)\n",
"\n",
"v.Layout(children=[button1])"
"v.Layout(class_='pa-2', children=[button1])"
]
},
{
Expand All @@ -39,11 +39,11 @@
"outputs": [],
"source": [
"v.Layout(children=[\n",
" v.Btn(color='primary', children=['primary']),\n",
" v.Btn(color='error', children=['error']),\n",
" v.Btn(color='pink lighten-4', children=['custom']),\n",
" v.Btn(color='#654321', dark=True, children=['hex']),\n",
" v.Btn(color='#654321', disabled=True, children=['disabled']),\n",
" v.Btn(color='primary', class_='ma-2', children=['primary']),\n",
" v.Btn(color='error', class_='ma-2', children=['error']),\n",
" v.Btn(color='pink lighten-4', class_='ma-2', children=['custom']),\n",
" v.Btn(color='#654321', dark=True, class_='ma-2', children=['hex']),\n",
" v.Btn(color='#654321', disabled=True, class_='ma-2', children=['disabled']),\n",
"\n",
"])"
]
Expand All @@ -55,13 +55,13 @@
"outputs": [],
"source": [
"v.Layout(children=[\n",
" v.Btn(color='primary', flat=True, children=['flat']),\n",
" v.Btn(color='primary', flat=True, disabled=True, children=['flat']),\n",
" v.Btn(color='primary', round=True, children=['round']),\n",
" v.Btn(color='primary', round=True, disabled=True, children=['round']),\n",
" v.Btn(color='primary', depressed=True, children=['depressed']),\n",
" v.Btn(color='primary', flat=True, icon=True, children=[v.Icon(children=['thumb_up'])]),\n",
" v.Btn(color='primary', outline=True, children=['outline']),\n",
" v.Btn(color='primary', text=True, class_='ma-2', children=['flat']),\n",
" v.Btn(color='primary', text=True, disabled=True, class_='ma-2', children=['flat']),\n",
" v.Btn(color='primary', rounded=True, class_='ma-2', children=['rounded']),\n",
" v.Btn(color='primary', rounded=True, class_='ma-2', disabled=True, children=['rounded']),\n",
" v.Btn(color='primary', depressed=True, class_='ma-2', children=['depressed']),\n",
" v.Btn(color='primary', icon=True, class_='ma-2', children=[v.Icon(children=['thumb_up'])]),\n",
" v.Btn(color='primary', outline=True, class_='ma-2', children=['outline']),\n",
"])"
]
},
Expand All @@ -72,12 +72,12 @@
"outputs": [],
"source": [
"v.Layout(children=[\n",
" v.Btn(color='primary', small=True, children=['small']),\n",
" v.Btn(color='primary', children=['normal']),\n",
" v.Btn(color='primary', large=True, children=['large']),\n",
" v.Btn(color='primary', small=True, fab=True, children=[v.Icon(children=['edit'])]),\n",
" v.Btn(color='primary', fab=True, children=[v.Icon(children=['edit'])]),\n",
" v.Btn(color='primary', fab=True, large=True, children=[v.Icon(children=['edit'])]),\n",
" v.Btn(color='primary', small=True, class_='ma-2', children=['small']),\n",
" v.Btn(color='primary', class_='ma-2', children=['normal']),\n",
" v.Btn(color='primary', class_='ma-2', large=True, children=['large']),\n",
" v.Btn(color='primary', class_='ma-2', small=True, fab=True, children=[v.Icon(children=['edit'])]),\n",
" v.Btn(color='primary', class_='ma-2', fab=True, children=[v.Icon(children=['edit'])]),\n",
" v.Btn(color='primary', class_='ma-2', fab=True, large=True, children=[v.Icon(children=['edit'])]),\n",
"])"
]
},
Expand All @@ -95,7 +95,7 @@
" toggleLoading()\n",
" Timer(2.0, toggleLoading).start()\n",
" \n",
"button2 = v.Btn(loading=False, children=['loader'])\n",
"button2 = v.Btn(loading=False, class_='ma-2', children=['loader'])\n",
"button2.on_event('click', on_loader_click)\n",
"\n",
"v.Layout(children=[button2])"
Expand All @@ -108,17 +108,17 @@
"outputs": [],
"source": [
"toggle_single = v.BtnToggle(v_model=2, class_='mr-3', children=[\n",
" v.Btn(flat=True, children=[v.Icon(children=['format_align_left'])]),\n",
" v.Btn(flat=True, children=[v.Icon(children=['format_align_center'])]),\n",
" v.Btn(flat=True, children=[v.Icon(children=['format_align_right'])]),\n",
" v.Btn(flat=True, children=[v.Icon(children=['format_align_justify'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['format_align_left'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['format_align_center'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['format_align_right'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['format_align_justify'])]),\n",
"])\n",
"\n",
"toggle_multi = v.BtnToggle(v_model=[0,2], multiple=True, children=[\n",
" v.Btn(flat=True, children=[v.Icon(children=['format_bold'])]),\n",
" v.Btn(flat=True, children=[v.Icon(children=['format_italic'])]),\n",
" v.Btn(flat=True, children=[v.Icon(children=['format_underline'])]),\n",
" v.Btn(flat=True, children=[v.Icon(children=['format_color_fill'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['format_bold'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['format_italic'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['format_underline'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['format_color_fill'])]),\n",
"])\n",
"\n",
"v.Layout(children=[\n",
Expand All @@ -134,18 +134,21 @@
"outputs": [],
"source": [
"v.Layout(children=[\n",
" v.Btn(color='primary', children=[\n",
" v.Btn(color='primary', class_='ma-2', children=[\n",
" v.Icon(left=True, children=['fingerprint']),\n",
" 'Icon left'\n",
" ]),\n",
" v.Btn(color='primary', children=[\n",
" v.Btn(color='primary', class_='ma-2', children=[\n",
" 'Icon right',\n",
" v.Icon(right=True, children=['fingerprint']),\n",
" ]),\n",
" v.Tooltip(bottom=True, children=[\n",
" v.Btn(slot='activator', color='primary', children=[\n",
" v.Tooltip(bottom=True, v_slots=[{\n",
" 'name': 'activator',\n",
" 'variable': 'tooltip',\n",
" 'children': v.Btn(v_on='tooltip.on', color='primary', class_='ma-2', children=[\n",
" 'tooltip' \n",
" ]),\n",
" }], children=[\n",
" 'Insert tooltip text here'\n",
" ]) \n",
"])"
Expand All @@ -165,25 +168,32 @@
" info.children=[f'Item {items.index(widget)+1} clicked']\n",
" \n",
"\n",
"items = [v.ListTile(children=[\n",
" v.ListTileTitle(children=[\n",
"items = [v.ListItem(children=[\n",
" v.ListItemTitle(children=[\n",
" f'Click me {i}'])]) \n",
" for i in range(1, 5)]\n",
"\n",
"for item in items:\n",
" item.on_event('click', on_menu_click)\n",
"\n",
"menu = v.Menu(offset_y=True, children=[\n",
" v.Btn(slot='activator', color='primary', children=[\n",
" 'menu', \n",
" v.Icon(right=True, children=[\n",
" 'arrow_drop_down'\n",
" ])\n",
" ]),\n",
" v.List(children=items)\n",
"])\n",
"menu = v.Menu(offset_y=True,\n",
" v_slots=[{\n",
" 'name': 'activator',\n",
" 'variable': 'menuData',\n",
" 'children': v.Btn(v_on='menuData.on', class_='ma-2', color='primary', children=[\n",
" 'menu', \n",
" v.Icon(right=True, children=[\n",
" 'arrow_drop_down'\n",
" ])\n",
" ]),\n",
" }]\n",
" , \n",
" children=[\n",
" v.List(children=items)\n",
" ]\n",
")\n",
"\n",
"info = v.Chip()\n",
"info = v.Chip(class_='ma-2')\n",
"\n",
"layout = v.Layout(children=[\n",
" menu\n",
Expand All @@ -197,17 +207,23 @@
"metadata": {},
"outputs": [],
"source": [
"v.Dialog(v_model=False, width='500', children=[\n",
" v.Btn(slot=\"activator\", color='success', dark=True, children=[\n",
" \"Open dialog\"\n",
"v.Layout(children=[\n",
" v.Dialog(width='500', v_slots=[{\n",
" 'name': 'activator',\n",
" 'variable': 'x',\n",
" 'children': v.Btn(v_on='x.on', color='success', dark=True, children=[\n",
" 'Open dialog'\n",
" ]),\n",
" }], \n",
" children=[\n",
" v.Card(children=[\n",
" v.CardTitle(class_='headline gray lighten-2', primary_title=True, children=[\n",
" \"Lorem ipsum\"]),\n",
" v.CardText(children=[\n",
" lorum_ipsum])\n",
" ])\n",
" ])"
" ])\n",
"]) "
]
},
{
Expand Down Expand Up @@ -284,20 +300,36 @@
"metadata": {},
"outputs": [],
"source": [
"vepc1 = v.ExpansionPanelContent(children=[\n",
" v.Html(tag='div', slot='header', children=['item1']),\n",
" v.Card(children=[\n",
" v.CardText(children=['First Text'])])])\n",
"vepc1 = v.ExpansionPanel(children=[\n",
" v.ExpansionPanelHeader(children=['item1']),\n",
" v.ExpansionPanelContent(children=['First Text'])])\n",
"\n",
"vepc2 = v.ExpansionPanelContent(children=[\n",
" v.Html(tag='div', slot='header', children=['item2']),\n",
" v.Card(children=[\n",
" v.CardText(children=['Second Text'])])])\n",
"vepc2 = v.ExpansionPanel(children=[\n",
" v.ExpansionPanelHeader(children=['item2']),\n",
" v.ExpansionPanelContent(children=['Second Text'])])\n",
"\n",
"vep = v.ExpansionPanel(children=[vepc1, vepc2])\n",
"vl = v.Layout(children=[vep])\n",
"vep = v.ExpansionPanels(children=[vepc1, vepc2])\n",
"vl = v.Layout(class_='pa-4', children=[vep])\n",
"vl"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"v.Banner(single_line=True,\n",
" v_slots=[{\n",
" 'name': 'icon',\n",
" 'children': v.Icon(children=['thumb_up'])\n",
" }, {\n",
" 'name': 'actions',\n",
" 'children': v.Btn(text=True, color='deep-purple accent-4', children=['Action'])\n",
" }], \n",
" children=['One line message text string with two actions on tablet / Desktop'])"
]
},
}
],
"metadata": {
Expand Down
2 changes: 1 addition & 1 deletion generate_source/generate_source.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

here = os.path.dirname(os.path.abspath(__file__))

vuetify_api = f'{here}/vuetify_api_1.5.12.json'
vuetify_api = f'{here}/vuetify_api_2.0.17.json'
base_schema = f'{here}/base.json'
build_dir = f'{here}/build'
widget_gen_schema = f'{build_dir}/widget_gen_schema.json'
Expand Down
Loading

0 comments on commit e5932c0

Please sign in to comment.