{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Ipyvuetify demo\n",
    "\n",
    "See the [documentation](https://ipyvuetify.readthedocs.io/en/latest/index.html)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%pip install -q ipyvue ipyvuetify"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipyvuetify as v\n",
    "\n",
    "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.\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "count = 0\n",
    "\n",
    "\n",
    "def on_click(widget, event, data):\n",
    "    global count\n",
    "    count += 1\n",
    "    button1.children = [\"button \" + str(count)]\n",
    "\n",
    "\n",
    "button1 = v.Btn(children=[\"button\"])\n",
    "button1.on_event(\"click\", on_click)\n",
    "\n",
    "v.Layout(class_=\"pa-2\", children=[button1])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## First template"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipyvuetify as v\n",
    "import traitlets\n",
    "\n",
    "\n",
    "class FruitSelector(v.VuetifyTemplate):\n",
    "    fruits = traitlets.List(traitlets.Unicode(), default_value=[\"Apple\", \"Pear\"]).tag(sync=True)\n",
    "    selected = traitlets.Unicode(default_value=\"\", allow_none=True).tag(sync=True)\n",
    "\n",
    "    @traitlets.default(\"template\")\n",
    "    def _template(self):\n",
    "        return \"\"\"\n",
    "        <template>\n",
    "            <div>\n",
    "                <v-select label=\"Fruits\" :items=\"fruits\" v-model=\"selected\"/>\n",
    "            </div>\n",
    "        </template>\n",
    "        \"\"\"\n",
    "\n",
    "\n",
    "fruits = FruitSelector()\n",
    "fruits"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "fruits.selected"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Advanced template"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipyvuetify as v\n",
    "import traitlets\n",
    "\n",
    "\n",
    "class FruitSelector(v.VuetifyTemplate):\n",
    "    fruits = traitlets.List(traitlets.Unicode(), default_value=[\"Apple\", \"Pear\"]).tag(sync=True)\n",
    "    selected = traitlets.Unicode(default_value=\"\", allow_none=True).tag(sync=True)\n",
    "\n",
    "    @traitlets.default(\"template\")\n",
    "    def _template(self):\n",
    "        return \"\"\"\n",
    "            <template>\n",
    "                <div>\n",
    "                    <v-select label=\"Fruits\" :items=\"fruits\" v-model=\"selected\"/>\n",
    "                    Available fruits\n",
    "                    <table class=\"fruit-selector\">\n",
    "                        <tr v-for=\"(fruit, index) in fruits\" :key=\"index\" @click=\"selected = fruit\">\n",
    "                            <td>{{index}}</td>\n",
    "                            <td>{{fruit}}</td>\n",
    "                            <td>{{fruit == selected ? \"selected\" : \"\"}}</td>\n",
    "                        </tr>\n",
    "                    </table>\n",
    "                </div>\n",
    "            </template>\n",
    "            <style id=\"fruit-selector-style\">\n",
    "                .fruit-selector td {\n",
    "                    border: 1px solid black;\n",
    "                }\n",
    "\n",
    "            </style>\n",
    "\n",
    "        \"\"\"\n",
    "\n",
    "\n",
    "fruits = FruitSelector(fruits=[\"Banana\", \"Pear\", \"Apple\"])\n",
    "fruits"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Template in vue files"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Currently local files can not be easily accessed in the kernel in `jupyterlite`. See\n",
    "this [issue](https://github.com/jupyterlite/jupyterlite/issues/119). Here is a work\n",
    "around."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from js import fetch\n",
    "\n",
    "\n",
    "async def _download_file(filename):\n",
    "    URL = f\"https://raw.githubusercontent.com/jupyterlite/jupyterlite/main/examples/data/{filename}\"\n",
    "    res = await fetch(URL)\n",
    "    text = await res.text()\n",
    "\n",
    "    with open(filename, \"w\") as f:\n",
    "        f.write(text)\n",
    "\n",
    "\n",
    "files = [\"fruit-selector.vue\", \"card.vue\"]\n",
    "for filename in files:\n",
    "    print(f\"Download {filename} from GH\")\n",
    "    res = await _download_file(filename)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipyvuetify as v\n",
    "import traitlets\n",
    "\n",
    "other_fruits = [\"Pineapple\", \"Kiwi\", \"Cherry\"]\n",
    "\n",
    "\n",
    "class FruitSelector(v.VuetifyTemplate):\n",
    "    template_file = \"fruit-selector.vue\"\n",
    "\n",
    "    fruits = traitlets.List(traitlets.Unicode(), default_value=[\"Apple\", \"Pear\"]).tag(sync=True)\n",
    "    selected = traitlets.Unicode(default_value=\"\", allow_none=True).tag(sync=True)\n",
    "    can_add_from_python = traitlets.Bool(default_value=True).tag(sync=True)\n",
    "\n",
    "    def vue_add_fruit_python(self, data=None):\n",
    "        if other_fruits:\n",
    "            fruit = other_fruits.pop()\n",
    "            self.fruits = self.fruits + [fruit]\n",
    "        if not other_fruits:\n",
    "            self.can_add_from_python = False\n",
    "\n",
    "\n",
    "fruits = FruitSelector(fruits=[\"Banana\", \"Pear\", \"Apple\"])\n",
    "fruits"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipyvuetify as v\n",
    "import traitlets\n",
    "\n",
    "\n",
    "class CardExample(v.VuetifyTemplate):\n",
    "    template_file = \"card.vue\"\n",
    "\n",
    "    loading = traitlets.Bool(default_value=False).tag(sync=True)\n",
    "    selection = traitlets.Int(default_value=1, allow_none=True).tag(sync=True)\n",
    "\n",
    "\n",
    "card = CardExample()\n",
    "card"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "card.selection"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "card.selection = 3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.8.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}