How to use the ipyvuetify.VuetifyTemplate function in ipyvuetify

def vue_menu_click(self, data):
        value = getattr(self.component, self.target)
        setattr(self.component, self.target, value + ' + ' + str(self.items[data]))


class ColumnSelectionAdder(ColumnPicker):
    component = traitlets.Any()
    target = traitlets.Unicode('v_model')

    def vue_menu_click(self, data):
        value = getattr(self.component, self.target)
        setattr(self.component, self.target, value + ' & ({} == 0)'.format(self.items[data]))


class SelectionEditor(v.VuetifyTemplate):
    df = traitlets.Any()
    input = traitlets.Any()
    adder = traitlets.Any()
    on_close = traitlets.Any()
    components = traitlets.Dict(None, allow_none=True).tag(sync=True, **widgets.widget.widget_serialization)

    @traitlets.default('components')
    def _components(self):
        return {'component-input': self.input, 'adder': self.adder}

    @traitlets.default('input')
    def _input(self):
        return ExpressionSelectionTextArea(df=self.df)

    @traitlets.default('adder')
    def _adder(self):

import traitlets
import ipywidgets as widgets
import ipyvuetify as v

from glue.core.subset import ElementSubsetState
from glue.core.data import Subset
from glue.viewers.common.layer_artist import LayerArtist
from ..view import IPyWidgetView


with open(os.path.join(os.path.dirname(__file__), "table.vue")) as f:
    TEMPLATE = f.read()


class TableBase(v.VuetifyTemplate):
    total_length = traitlets.CInt().tag(sync=True)
    checked = traitlets.List([]).tag(sync=True)  # indices of which rows are selected
    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)

    def _update(self):
        self._update_columns()

    def _update_columns(self):
        self.headers = self._get_headers()

test
            
            <div style="position: absolute; right: 20px; bottom: 30px; opacity: 0.8">
                
            </div>
        ''').tag(sync=True)

    def save_column(self):
        if self.editor.valid:
            self.df[self.column_name] = self.editor.v_model
            if self.on_close:
                self.on_close()


class ColumnList(v.VuetifyTemplate, vt.ColumnsMixin):
    column_filter = traitlets.Unicode('').tag(sync=True)
    valid_expression = traitlets.Bool(False).tag(sync=True)
    dialog_open = traitlets.Bool(False).tag(sync=True)
    editor = traitlets.Any()
    editor_open = traitlets.Bool(False).tag(sync=True)
    tooltip = traitlets.Unicode('Add example expression based on column...').tag(sync=True)
    template = traitlets.Unicode(load_template('columnlist.vue')).tag(sync=True)

    def __init__(self, df=None, **kwargs):
        super(ColumnList, self).__init__(df=df, **kwargs)
        traitlets.dlink((self.editor.editor, 'valid'), (self, 'valid_expression'))
        self.editor.editor.on_event('keypress.enter', self._on_enter)

    @traitlets.default('editor')
    def _editor(self):
        editor = VirtualColumnEditor(df=self.df)

import ipyvuetify as v
from glue.core import Subset

__all__ = ['LayerOptionsWidget']


import traitlets
import ipywidgets as widgets
from ..vuetify_helpers import load_template, WidgetCache


class LayerOptionsWidget(v.VuetifyTemplate):
    """
    A widget that contains a way to select layers, and will automatically show
    the options for the selected layer.
    """

    template = load_template('layeroptions.vue', __file__)
    layers = traitlets.List().tag(sync=True, **widgets.widget_serialization)
    selected = traitlets.Int(0).tag(sync=True)
    color_menu_open = traitlets.Bool(False).tag(sync=True)

    def __init__(self, viewer):
        super().__init__()
        self.viewer = viewer

        widgetCache = WidgetCache()

import ipyvuetify as v
import traitlets
from ...state_traitlets_helpers import GlueState
from ...vuetify_helpers import load_template, link_glue_choices

__all__ = ['HistogramViewerStateWidget']


class HistogramViewerStateWidget(v.VuetifyTemplate):
    template = load_template('viewer_histogram.vue', __file__)
    x_att_items = traitlets.List().tag(sync=True)
    x_att_selected = traitlets.Int().tag(sync=True)
    glue_state = GlueState().tag(sync=True)

    def __init__(self, viewer_state):
        super().__init__()

        self.glue_state = viewer_state

        link_glue_choices(self, viewer_state, 'x_att')

<span>!</span>
        
            error_outline
      
    


    
    
          
    

''').tag(sync=True)


class AnimatedCounter(v.VuetifyTemplate):
    characters = traitlets.List(traitlets.Unicode()).tag(sync=True)
    value = traitlets.Integer()
    format = traitlets.Unicode('{: 14,d}')
    prefix = traitlets.Unicode('').tag(sync=True)
    postfix = traitlets.Unicode('').tag(sync=True)

    @traitlets.observe('value')
    def _value(self, change):
        text = self.format.format(self.value)
        self.characters = [k.replace(' ', '&nbsp;') for k in text]

    template = traitlets.Unicode('''
          <div>
          {{ prefix }}
          
              <span></span></div>

    @traitlets.observe('value')
    def _value(self, change):
        text = self.format.format(self.value)
        self.characters = [k.replace(' ', ' ') for k in text]

    template = traitlets.Unicode('''
          <div>
          {{ prefix }}
          
              <span></span>
          
          {{ postfix }}
          </div>
      ''').tag(sync=True)

class ProgressCircularNoAnimation(v.VuetifyTemplate):
    """v-progress-circular that avoids animations"""
    parts = traitlets.List(traitlets.Unicode()).tag(sync=True)
    width = traitlets.Integer().tag(sync=True)
    size = traitlets.Integer().tag(sync=True)
    value = traitlets.Float().tag(sync=True)
    color = traitlets.Unicode('{: 14,d}').tag(sync=True)
    text = traitlets.Unicode('{: 14,d}').tag(sync=True)
    hidden = traitlets.Bool(False).tag(sync=True)
    template = traitlets.Unicode('''
        {{ text }}
        {{ text }}
      ''').tag(sync=True)


class ExpressionTextArea(v.Textarea):
    df = traitlets.Any()

__all__ = ['SubsetSelect']


def load_template_as_traitlet(path, filename):
    with open(os.path.join(os.path.dirname(path), filename)) as f:
        return traitlets.Unicode(f.read()).tag(sync=True)


def subset_to_dict(subset):
    return {
        'label': subset.label,
        'color': subset.style.color
    }


class SubsetSelect(v.VuetifyTemplate, HubListener):
    """
    Widget responsible for selecting which subsets are active, sync state between UI and glue.
    """

    selected = traitlets.List().tag(sync=True)
    available = traitlets.List().tag(sync=True)
    no_selection_text = traitlets.Unicode('No selection (create new)').tag(sync=True)
    multiple = traitlets.Bool(False).tag(sync=True)
    nr_of_full_names = traitlets.Int(2).tag(sync=True)
    show_allow_multiple_subsets = traitlets.Bool(False).tag(sync=True)

    methods = traitlets.Unicode('''{
        toSubsets(indices) {
            return indices.map(i => this.available[i]);
        },
        deselect() {

def _placeholder(self):
        return "Enter a custom (boolean) expression"

    @traitlets.default('prepend_icon')
    def _prepend_icon(self):
        return 'filter_list'

    @traitlets.observe('v_model')
    def update_custom_selection(self, change):
        if self.check_expression():
            self.update_selection()

    def update_selection(self):
        self.df.select(self.v_model, name=self.selection_name)

class ColumnPicker(v.VuetifyTemplate):
    df = traitlets.Any()
    items = traitlets.List(['foo', 'bar']).tag(sync=True)
    tooltip = traitlets.Unicode('Add example expression based on column...').tag(sync=True)
    template = traitlets.Unicode('''
        
            
                <template>
                    
                        {{ tooltip }}
                        <template>
                            
                                add
                            
                        </template>
                    </template>

from __future__ import absolute_import
import ipyvuetify as v
import ipywidgets as widgets
import traitlets
from traitlets import *
from . import traitlets as vt

def load_template(filename):
    with open(os.path.join(os.path.dirname(__file__), filename)) as f:
        return f.read()

class PlotTemplate(v.VuetifyTemplate):
    show_output = Bool(False).tag(sync=True)
    new_output = Bool(False).tag(sync=True)
    title = Unicode('Vaex').tag(sync=True)

    drawer = Bool(True).tag(sync=True)
    clipped = Bool(False).tag(sync=True)
    model = Any(True).tag(sync=True)
    floating = Bool(False).tag(sync=True)
    dark = Bool(False).tag(sync=True)
    mini = Bool(False).tag(sync=True)
    components = Dict(None, allow_none=True).tag(sync=True, **widgets.widget.widget_serialization)
    items = Any([]).tag(sync=True)
    type = Unicode('temporary').tag(sync=True)
    items = List(['red', 'green', 'purple']).tag(sync=True)
    button_text = Unicode('menu').tag(sync=True)
    drawers = Any(['Default (no property)', 'Permanent', 'Temporary']).tag(sync=True)