Skip to content

Commit

Permalink
docs: make example notebooks work
Browse files Browse the repository at this point in the history
  • Loading branch information
@mariobuikhuizen
mariobuikhuizen committed Nov 1, 2023
1 parent 1d257e1 commit d671636
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 57 deletions.
41 changes: 22 additions & 19 deletions examples/Examples template.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,26 +23,27 @@
" items = List(['red', 'green', 'purple']).tag(sync=True)\n",
" button_text = Unicode('menu').tag(sync=True)\n",
" template = Unicode('''\n",
" <template>\n",
" <v-layout>\n",
" <v-menu offset-y>\n",
" <template v-slot:activator=\"{ on }\">\n",
" <v-btn\n",
" :color=\"color\"\n",
" class=\"white--text\"\n",
" v-on=\"on\">\n",
" {{ button_text }}\n",
" </v-btn>\n",
" </template>\n",
" <v-list>\n",
" <v-list-item\n",
" <v-btn\n",
" :color=\"color\"\n",
" class=\"white--text\"\n",
" >\n",
" {{ button_text }}\n",
" <v-menu activator=\"parent\" offset-y>\n",
" <v-list>\n",
" <v-list-item\n",
" v-for=\"(item, index) in items\"\n",
" :key=\"index\"\n",
" @click=\"menu_click(index)\">\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",
" @click=\"menu_click(index)\"\n",
" >\n",
" <v-list-item-title>{{ item }}</v-list-item-title>\n",
" </v-list-item>\n",
" </v-list>\n",
" </v-menu>\n",
" </v-btn>\n",
" </v-layout>\n",
" </template>''').tag(sync=True)\n",
" \n",
" \n",
" def vue_menu_click(self, data):\n",
Expand All @@ -69,10 +70,12 @@
" \n",
" items = Any(['a', 'b']).tag(sync=True)\n",
" template = Unicode('''\n",
" <template>\n",
" <v-layout column>\n",
" <myselect/>\n",
" <v-select :items=\"items\"/>\n",
" </v-layout>\n",
" </template>\n",
"''').tag(sync=True)\n",
" \n",
" \n",
Expand Down Expand Up @@ -161,8 +164,8 @@
" data = data.reset_index()\n",
" self.index_col = data.columns[0]\n",
" headers = [{\n",
" \"text\": col,\n",
" \"value\": col\n",
" \"title\": col,\n",
" \"key\": col\n",
" } for col in data.columns]\n",
" headers[0].update({'align': 'left', 'sortable': True})\n",
" self.headers = headers\n",
Expand Down
76 changes: 40 additions & 36 deletions examples/Examples.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,13 @@
"outputs": [],
"source": [
"v.Layout(children=[\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', variant='text', class_='ma-2', children=['flat']),\n",
" v.Btn(color='primary', variant='text', disabled=True, class_='ma-2', children=['flat']),\n",
" v.Btn(color='primary', class_='rounded-pill ma-2', children=['rounded']),\n",
" v.Btn(color='primary', class_='rounded-pill ma-2', disabled=True, children=['rounded']),\n",
" v.Btn(color='primary', variant='flat', class_='ma-2', children=['depressed']),\n",
" v.Btn(color='primary', icon=True, class_='ma-2', children=[v.Icon(children=['mdi-thumb-up'])]),\n",
" v.Btn(color='primary', outline=True, class_='ma-2', children=['outline']),\n",
" v.Btn(color='primary', variant='outlined', class_='ma-2', children=['outline']),\n",
"])"
]
},
Expand All @@ -72,12 +72,12 @@
"outputs": [],
"source": [
"v.Layout(children=[\n",
" v.Btn(color='primary', small=True, class_='ma-2', children=['small']),\n",
" v.Btn(color='primary', size='small', 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=['mdi-pencil'])]),\n",
" v.Btn(color='primary', class_='ma-2', fab=True, children=[v.Icon(children=['mdi-pencil'])]),\n",
" v.Btn(color='primary', class_='ma-2', fab=True, large=True, children=[v.Icon(children=['mdi-pencil'])]),\n",
" v.Btn(color='primary', class_='ma-2', size='large', children=['large']),\n",
" v.Btn(color='primary', class_='ma-2', size='small', icon=True, children=[v.Icon(children=['mdi-pencil'])]),\n",
" v.Btn(color='primary', class_='ma-2', icon=True, children=[v.Icon(children=['mdi-pencil'])]),\n",
" v.Btn(color='primary', class_='ma-2', icon=True, size='large', children=[v.Icon(children=['mdi-pencil'])]),\n",
"])"
]
},
Expand Down Expand Up @@ -108,17 +108,17 @@
"outputs": [],
"source": [
"toggle_single = v.BtnToggle(v_model=2, class_='mr-3', children=[\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-format-align-left'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-format-align-center'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-format-align-right'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-format-align-justify'])]),\n",
" v.Btn(variant='text', children=[v.Icon(children=['mdi-format-align-left'])]),\n",
" v.Btn(variant='text', children=[v.Icon(children=['mdi-format-align-center'])]),\n",
" v.Btn(variant='text', children=[v.Icon(children=['mdi-format-align-right'])]),\n",
" v.Btn(variant='text', children=[v.Icon(children=['mdi-format-align-justify'])]),\n",
"])\n",
"\n",
"toggle_multi = v.BtnToggle(v_model=[0,2], multiple=True, children=[\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-format-bold'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-format-italic'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-format-underline'])]),\n",
" v.Btn(text=True, children=[v.Icon(children=['mdi-format-color-fill'])]),\n",
" v.Btn(variant='text', children=[v.Icon(children=['mdi-format-bold'])]),\n",
" v.Btn(variant='text', children=[v.Icon(children=['mdi-format-italic'])]),\n",
" v.Btn(variant='text', children=[v.Icon(children=['mdi-format-underline'])]),\n",
" v.Btn(variant='text', children=[v.Icon(children=['mdi-format-color-fill'])]),\n",
"])\n",
"\n",
"v.Layout(children=[\n",
Expand All @@ -134,13 +134,11 @@
"outputs": [],
"source": [
"v.Layout(children=[\n",
" v.Btn(color='primary', class_='ma-2', children=[\n",
" v.Icon(left=True, children=['mdi-fingerprint']),\n",
" v.Btn(color='primary', class_='ma-2', prepend_icon='mdi-fingerprint', children=[\n",
" 'Icon left'\n",
" ]),\n",
" v.Btn(color='primary', class_='ma-2', children=[\n",
" v.Btn(color='primary', class_='ma-2', append_icon='mdi-fingerprint', children=[\n",
" 'Icon right',\n",
" v.Icon(right=True, children=['mdi-fingerprint']),\n",
" ]),\n",
" v.Tooltip(bottom=True, v_slots=[{\n",
" 'name': 'activator',\n",
Expand Down Expand Up @@ -265,11 +263,19 @@
"outputs": [],
"source": [
"tab_list = [v.Tab(children=['Tab ' + str(i)]) for i in range(1,4)]\n",
"content_list = [v.TabItem(children=[lorum_ipsum]) for i in range(1,4)] \n",
"content_list = [v.WindowItem(children=[lorum_ipsum]) for i in range(1,4)] \n",
"\n",
"tabs = v.Tabs(\n",
" v_model=1, \n",
" children=tab_list + content_list)\n",
"tabs"
" children=tab_list)\n",
"\n",
"windows = v.Window(\n",
" v_model=1,\n",
" children=content_list)\n",
"\n",
"ipywidgets.link((tabs, 'v_model'), (windows, 'v_model'))\n",
"\n",
"v.Sheet(children=[tabs, windows])"
]
},
{
Expand All @@ -284,7 +290,7 @@
"drawer_button = v.Btn(color='primary', children=['Close drawer'])\n",
"drawer_button.on_event('click', on_click)\n",
"\n",
"vnd = v.NavigationDrawer(v_model=False, absolute=True, right=True, children=[\n",
"vnd = v.NavigationDrawer(v_model=False, absolute=True, location='right', children=[\n",
" drawer_button\n",
"])\n",
"\n",
Expand All @@ -301,12 +307,12 @@
"outputs": [],
"source": [
"vepc1 = v.ExpansionPanel(children=[\n",
" v.ExpansionPanelHeader(children=['item1']),\n",
" v.ExpansionPanelContent(children=['First Text'])])\n",
" v.ExpansionPanelTitle(children=['item1']),\n",
" v.ExpansionPanelText(children=['First Text'])])\n",
"\n",
"vepc2 = v.ExpansionPanel(children=[\n",
" v.ExpansionPanelHeader(children=['item2']),\n",
" v.ExpansionPanelContent(children=['Second Text'])])\n",
" v.ExpansionPanelTitle(children=['item2']),\n",
" v.ExpansionPanelText(children=['Second Text'])])\n",
"\n",
"vep = v.ExpansionPanels(children=[vepc1, vepc2])\n",
"vl = v.Layout(class_='pa-4', children=[vep])\n",
Expand All @@ -319,13 +325,10 @@
"metadata": {},
"outputs": [],
"source": [
"v.Banner(single_line=True,\n",
"v.Banner(single_line=True, icon='mdi-thumb-up',\n",
" v_slots=[{\n",
" 'name': 'icon',\n",
" 'children': v.Icon(children=['mdi-thumb-up'])\n",
" }, {\n",
" 'name': 'actions',\n",
" 'children': v.Btn(text=True, color='deep-purple accent-4', children=['Action'])\n",
" 'children': v.Btn(variant='text', color='deep-purple accent-4', children=['Action'])\n",
" }], \n",
" children=['One line message text string with two actions on tablet / Desktop'])"
]
Expand All @@ -336,6 +339,7 @@
"metadata": {},
"outputs": [],
"source": [
"print('Not yet available in Vuetify 3 (see: https://github.com/vuetifyjs/vuetify/issues/13518)')\n",
"activated = v.Chip(children=['_'])\n",
"\n",
"items = [{\n",
Expand Down
7 changes: 6 additions & 1 deletion ipyvuetify/extra/file_input.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
clearable
chips
:counter="multiple"
@change="setFiles"
@update:modelValue="setFiles"
:webkitdirectory="directory"
:directory="directory"
:accept="accept"
Expand All @@ -24,6 +24,11 @@

<script>
export default {
data() {
return {
myfiles: undefined,
};
},
created() {
this.chunk_size = 2 * 1024 * 1024;
},
Expand Down
3 changes: 2 additions & 1 deletion js/src/VuetifyView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { VDataTable } from "vuetify/labs/VDataTable";

const observer = new MutationObserver((mutationList, observer) => {
for (const mutation of mutationList) {
Expand All @@ -30,7 +31,7 @@ export class VuetifyView extends VueView {
);
super.addPlugins(vueApp);
const vuetify = createVuetify({
components,
components: { ...components, VDataTable },
directives,
});
this.el.classList.add("vuetify-styles");
Expand Down

0 comments on commit d671636

Please sign in to comment.