class_components.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "import ipyvue as vue\n",
    "from traitlets import (Dict, Unicode, List, Instance, observe)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class SubComponent(vue.VueTemplate):\n",
    "    input = Unicode().tag(sync=True)\n",
    "    something = Unicode('defaultvalue').tag(sync=True)\n",
    "    template = Unicode('''\n",
    "    <template>\n",
    "        <div style=\"border: 1px solid green; margin: 2px\" @click=\"append_one()\">\n",
    "            [{{ something }}] input: {{ input }} \n",
    "        </div>\n",
    "    </template>    \n",
    "    ''').tag(sync=True)\n",
    "    \n",
    "    def vue_append_one(self, *args):\n",
    "        self.input = f'{self.input}1'\n",
    "    \n",
    "SubComponent(input='some text')    "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "class MainComponent(vue.VueTemplate):\n",
    "    texts = List(['xxxx', 'yyyy']).tag(sync=True)\n",
    "    direct = Unicode('aaa').tag(sync=True)\n",
    "    template = Unicode('''\n",
    "    <template>\n",
    "        <div>\n",
    "            <div style=\"border: 1px solid black\">\n",
    "               <sub-component v-for=\"t in texts\" :input=\"t\" :key=\"t\" />\n",
    "            </div>\n",
    "            <sub-component :input=\"direct\" something=\"---\"/>\n",
    "            <w-button v-for=\"t in texts\" :description=\"t\" :key=\"t\" />\n",
    "            <w-button description=\"no v-for\"/>\n",
    "        </div>\n",
    "    </template>\n",
    "    ''').tag(sync=True)\n",
    "    \n",
    "    components=Dict({\n",
    "        'sub-component': SubComponent,\n",
    "        'w-button': widgets.Button\n",
    "    }).tag(sync=True, **vue.VueTemplate.class_component_serialization)\n",
    "\n",
    "mainComponent = MainComponent()\n",
    "mainComponent"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "mainComponent.texts=['xxxx', 'zzzz']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "mainComponent._component_instances"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "mainComponent.direct = 'bbb'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Non serializable properties"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class Database():\n",
    "    def __init__(self, url):\n",
    "        self.url = url\n",
    "\n",
    "class DatabaseInfo(vue.VueTemplate):\n",
    "    db = Instance(Database)\n",
    "    info = Unicode().tag(sync=True)\n",
    "    label = Unicode().tag(sync=True)\n",
    "    \n",
    "    template = Unicode('''\n",
    "    <template>\n",
    "        <div style=\"border: 1px solid green; margin: 2px\">\n",
    "            [{{ label }}] Db URL: {{ info }}\n",
    "        </div>\n",
    "    </template>\n",
    "    ''').tag(sync=True)\n",
    "    \n",
    "    @observe('db')\n",
    "    def db_changed(self, change):\n",
    "        self.info = self.db.url"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "class MyApp(vue.VueTemplate):\n",
    "    \n",
    "    customer_db = Instance(Database).tag(sync_ref=True)\n",
    "    supplier_db_collection = Dict().tag(sync_ref=True)\n",
    "    \n",
    "    template = Unicode('''\n",
    "    <template>\n",
    "        <div>\n",
    "            <database-info label=\"customers\" :db=\"customer_db\" />\n",
    "            \n",
    "            <database-info\n",
    "                label=\"supplier\"\n",
    "                v-for=\"supplier in supplier_db_collection.preferred\"\n",
    "                :db=\"supplier\"\n",
    "                :key=\"supplier.id\" />\n",
    "            \n",
    "            <database-info label=\"function\" :db=\"{functionRef: 'db_factory', args: ['localhost/function1']}\" />\n",
    "        </div>\n",
    "    </template>\n",
    "    ''').tag(sync=True)\n",
    "    \n",
    "    components = Dict({\n",
    "        'database-info': DatabaseInfo\n",
    "    }).tag(sync=True, **vue.VueTemplate.class_component_serialization)\n",
    "    \n",
    "    def db_factory(self, url):\n",
    "        return Database(url)\n",
    "\n",
    "my_app = MyApp(\n",
    "    customer_db = Database('localhost/customers'),\n",
    "    supplier_db_collection = {'preferred': [Database('localhost/intel')]}\n",
    ")\n",
    "my_app   "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "my_app.customer_db = Database('remote/customers_v2')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "my_app.supplier_db_collection = {'preferred': [Database('remote/amd')]}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}