<jupyter_start><jupyter_text>Ipyvuetify demoSee the [documentation](https://ipyvuetify.readthedocs.io/en/latest/index.html)<jupyter_code>import micropip
await micropip.install('ipyvuetify==1.8.1')

import ipywidgets
import ipyvuetify as v
from threading import Timer

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])<jupyter_output><empty_output><jupyter_text>First template<jupyter_code>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<jupyter_output><empty_output><jupyter_text>Advanced template<jupyter_code>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<jupyter_output><empty_output><jupyter_text>Template in vue files Currenly local files can not be easily accessed in the kernel in `jupyterlite`. See this [issue](https://github.com/jupyterlite/jupyterlite/issues/119).Here is a work around.<jupyter_code>from js import fetch

async def _download_file(filename):
    URL = f"https://raw.githubusercontent.com/jupyterlite/jupyterlite/main/examples/{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
import random


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
import random


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<jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.12082262210796915, 'fraction_numerical': 0.003427592116538132, 'mean_word_length': 3.153914590747331, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 3, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 9, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '4', 'dir': 'jupyter-structured-clean-dedup', 'id': '29914', 'license': 'BSD-3-Clause', 'n_tokens_mistral': 1568, 'n_tokens_neox': 1483, 'n_words': 321, 'path': 'examples/pyolite - ipyvuetify.ipynb', 'repo_name': 'seidlr/jupyterlite', 'size': '4668'}