{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipyvuetify as v\n",
    "\n",
    "from traitlets import (Any, Unicode, List)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class MyMenu(v.VuetifyTemplate):\n",
    "    \n",
    "    color = Unicode('primary').tag(sync=True)\n",
    "    items = List(['red', 'green', 'purple']).tag(sync=True)\n",
    "    button_text = Unicode('menu').tag(sync=True)\n",
    "    template = Unicode('''\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-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",
    "    \n",
    "    \n",
    "    def vue_menu_click(self, data):\n",
    "        self.color = self.items[data]\n",
    "        self.button_text = self.items[data]\n",
    "    \n",
    "    \n",
    "MyMenu()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from traitlets import *\n",
    "import ipyvuetify as v\n",
    "\n",
    "\n",
    "select = v.Select(items=['identity', 'log', 'log10', 'log1p', 'log1p'], v_model='log', label='Transform')\n",
    "\n",
    "class Test(v.VuetifyTemplate):\n",
    "    \n",
    "    items = Any(['a', 'b']).tag(sync=True)\n",
    "    template = Unicode('''\n",
    "            <v-layout column>\n",
    "              <myselect/>\n",
    "              <v-select :items=\"items\"/>\n",
    "            </v-layout>\n",
    "''').tag(sync=True)\n",
    "    \n",
    "    \n",
    "    def vue_menu_click(self, data):\n",
    "        self.color = self.items[data]\n",
    "        self.button_text = self.items[data]\n",
    "    \n",
    "    \n",
    "test = Test(components={'myselect': select})\n",
    "test"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import traitlets\n",
    "import ipyvuetify as v\n",
    "import json\n",
    "\n",
    "class PandasDataFrame(v.VuetifyTemplate):\n",
    "    \"\"\"\n",
    "    Vuetify DataTable rendering of a pandas DataFrame\n",
    "    \n",
    "    Args:\n",
    "        data (DataFrame) - the data to render\n",
    "        title (str) - optional title\n",
    "    \"\"\"\n",
    "    \n",
    "    headers = traitlets.List([]).tag(sync=True, allow_null=True)\n",
    "    items = traitlets.List([]).tag(sync=True, allow_null=True)\n",
    "    search = traitlets.Unicode('').tag(sync=True)\n",
    "    title = traitlets.Unicode('DataFrame').tag(sync=True)\n",
    "    index_col = traitlets.Unicode('').tag(sync=True)\n",
    "    template = traitlets.Unicode('''\n",
    "        <template>\n",
    "          <v-card>\n",
    "            <v-card-title>\n",
    "              <span class=\"title font-weight-bold\">{{ title }}</span>\n",
    "              <v-spacer></v-spacer>\n",
    "                <v-text-field\n",
    "                    v-model=\"search\"\n",
    "                    append-icon=\"mdi-magnify\"\n",
    "                    label=\"Search ...\"\n",
    "                    single-line\n",
    "                    hide-details\n",
    "                ></v-text-field>\n",
    "            </v-card-title>\n",
    "            <v-data-table\n",
    "                :headers=\"headers\"\n",
    "                :items=\"items\"\n",
    "                :search=\"search\"\n",
    "                :item-key=\"index_col\"\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=\"mdi-alert\">\n",
    "                    Sorry, nothing to display here :(\n",
    "                  </v-alert>\n",
    "                </template>\n",
    "                <template v-slot:no-results>\n",
    "                    <v-alert :value=\"true\" color=\"error\" icon=\"mdi-alert\">\n",
    "                      Your search for \"{{ search }}\" found no results.\n",
    "                    </v-alert>\n",
    "                </template>\n",
    "                <template v-slot:items=\"rows\">\n",
    "                  <td v-for=\"(element, label, index) in rows.item\"\n",
    "                      @click=cell_click(element)\n",
    "                      >\n",
    "                    {{ element }}\n",
    "                  </td>\n",
    "                </template>\n",
    "            </v-data-table>\n",
    "          </v-card>\n",
    "        </template>\n",
    "        ''').tag(sync=True)\n",
    "    \n",
    "    def __init__(self, *args, \n",
    "                 data=pd.DataFrame(), \n",
    "                 title=None,\n",
    "                 **kwargs):\n",
    "        super().__init__(*args, **kwargs)\n",
    "        data = data.reset_index()\n",
    "        self.index_col = data.columns[0]\n",
    "        headers = [{\n",
    "              \"text\": col,\n",
    "              \"value\": col\n",
    "            } for col in data.columns]\n",
    "        headers[0].update({'align': 'left', 'sortable': True})\n",
    "        self.headers = headers\n",
    "        self.items = json.loads(\n",
    "            data.to_json(orient='records'))\n",
    "        if title is not None:\n",
    "            self.title = title\n",
    "    \n",
    "    \n",
    "iris = pd.read_csv('https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv')\n",
    "test = PandasDataFrame(data = iris, title='Iris')\n",
    "test"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}