Ipyvuetify demo¶

%pip install -q ipyvue ipyvuetify

import ipyvuetify as v

lorum_ipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

count = 0


def on_click(widget, event, data):
    global count
    count += 1
    button1.children = ["button " + str(count)]


button1 = v.Btn(children=["button"])
button1.on_event("click", on_click)

v.Layout(class_="pa-2", children=[button1])

import ipyvuetify as v
import traitlets


class FruitSelector(v.VuetifyTemplate):
    fruits = traitlets.List(traitlets.Unicode(), default_value=["Apple", "Pear"]).tag(sync=True)
    selected = traitlets.Unicode(default_value="", allow_none=True).tag(sync=True)

    @traitlets.default("template")
    def _template(self):
        return """
        <template>
            <div>
                <v-select label="Fruits" :items="fruits" v-model="selected"/>
            </div>
        </template>
        """


fruits = FruitSelector()
fruits

fruits.selected

import ipyvuetify as v
import traitlets


class FruitSelector(v.VuetifyTemplate):
    fruits = traitlets.List(traitlets.Unicode(), default_value=["Apple", "Pear"]).tag(sync=True)
    selected = traitlets.Unicode(default_value="", allow_none=True).tag(sync=True)

    @traitlets.default("template")
    def _template(self):
        return """
            <template>
                <div>
                    <v-select label="Fruits" :items="fruits" v-model="selected"/>
                    Available fruits
                    <table class="fruit-selector">
                        <tr v-for="(fruit, index) in fruits" :key="index" @click="selected = fruit">
                            <td>{{index}}</td>
                            <td>{{fruit}}</td>
                            <td>{{fruit == selected ? "selected" : ""}}</td>
                        </tr>
                    </table>
                </div>
            </template>
            <style id="fruit-selector-style">
                .fruit-selector td {
                    border: 1px solid black;
                }

            </style>

        """


fruits = FruitSelector(fruits=["Banana", "Pear", "Apple"])
fruits

from js import fetch


async def _download_file(filename):
    URL = f"https://raw.githubusercontent.com/jupyterlite/jupyterlite/main/examples/data/{filename}"
    res = await fetch(URL)
    text = await res.text()

    with open(filename, "w") as f:
        f.write(text)


files = ["fruit-selector.vue", "card.vue"]
for filename in files:
    print(f"Download {filename} from GH")
    res = await _download_file(filename)

import ipyvuetify as v
import traitlets

other_fruits = ["Pineapple", "Kiwi", "Cherry"]


class FruitSelector(v.VuetifyTemplate):
    template_file = "fruit-selector.vue"

    fruits = traitlets.List(traitlets.Unicode(), default_value=["Apple", "Pear"]).tag(sync=True)
    selected = traitlets.Unicode(default_value="", allow_none=True).tag(sync=True)
    can_add_from_python = traitlets.Bool(default_value=True).tag(sync=True)

    def vue_add_fruit_python(self, data=None):
        if other_fruits:
            fruit = other_fruits.pop()
            self.fruits = self.fruits + [fruit]
        if not other_fruits:
            self.can_add_from_python = False


fruits = FruitSelector(fruits=["Banana", "Pear", "Apple"])
fruits

import ipyvuetify as v
import traitlets


class CardExample(v.VuetifyTemplate):
    template_file = "card.vue"

    loading = traitlets.Bool(default_value=False).tag(sync=True)
    selection = traitlets.Int(default_value=1, allow_none=True).tag(sync=True)


card = CardExample()
card

card.selection

card.selection = 3