docs: fix examples

widgetti · Nov 1, 2023 · 0ec320e · 0ec320e
1 parent 9d8a21e
commit 0ec320e
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 10 deletions.
diff --git a/class_components.ipynb b/class_components.ipynb
@@ -21,9 +21,11 @@
     "    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",
@@ -44,6 +46,7 @@
     "    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",
@@ -52,6 +55,7 @@
     "            <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",
@@ -113,9 +117,11 @@
     "    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",
@@ -135,6 +141,7 @@
     "    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",
@@ -146,6 +153,7 @@
     "            \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",

diff --git a/examples/DeepWatch.ipynb b/examples/DeepWatch.ipynb
@@ -15,6 +15,7 @@
     "    deep_array = traitlets.List(['array']).tag(sync=True)\n",
     "    deep_array2 = traitlets.List([{'prop': 'array2'}]).tag(sync=True)\n",
     "    template = traitlets.Unicode('''\n",
+    "    <template>\n",
     "        <div>\n",
     "            <v-text-field v-model=\"deep.prop\" />\n",
     "            <v-text-field v-model=\"deep.deeper.prop\" />\n",
@@ -27,6 +28,7 @@
     "            {{ deep_array[0] }} |\n",
     "            {{ deep_array2[0].prop }}\n",
     "        </div>\n",
+    "    </template>\n",
     "    ''').tag(sync=True)\n",
     "    \n",
     "md = MyDeep()\n",

diff --git a/examples/EmbeddingJupyterWidgetsInVueTemplate.ipynb b/examples/EmbeddingJupyterWidgetsInVueTemplate.ipynb
@@ -29,12 +29,14 @@
     "\n",
     "\n",
     "    template=Unicode(\"\"\"\n",
-    "        <div>\n",
-    "            <div v-for=\"item in items\" :key=\"item.title + item.content\">\n",
-    "                {{ item.title }}: <jupyter-widget :widget=\"item.content\" />\n",
+    "        <template>\n",
+    "            <div>\n",
+    "                <div v-for=\"item in items\" :key=\"item.title + item.content\">\n",
+    "                    {{ item.title }}: <jupyter-widget :widget=\"item.content\" />\n",
+    "                </div>\n",
+    "                Single widget: <jupyter-widget :widget=\"single_widget\" />\n",
     "            </div>\n",
-    "            Single widget: <jupyter-widget :widget=\"single_widget\" />\n",
-    "        </div>\n",
+    "        </template>\n",
     "    \"\"\").tag(sync=True)\n",
     "\n",
     "my_component = MyComponent()\n",

diff --git a/examples/fullVueComponent.ipynb b/examples/fullVueComponent.ipynb
@@ -169,7 +169,7 @@
     "class Testing(v.VuetifyTemplate):\n",
     "    template = Unicode(\"\"\"\n",
     "    <template>\n",
-    "        <test-comp :viewer=\"some_widget\"></test_comp>\n",
+    "        <test-comp :viewer=\"some_widget\"></test-comp>\n",
     "    </template>\n",
     "    \"\"\").tag(sync=True)\n",
     "    \n",

diff --git a/examples/hot-reload/my_component.vue b/examples/hot-reload/my_component.vue
@@ -6,7 +6,7 @@
   </div>
 </template>
 <script>
-  module.exports = {
+  export default {
     props: ['my-data']
   }
 </script>
diff --git a/examples/hot-reload/my_sub_component.vue b/examples/hot-reload/my_sub_component.vue
@@ -5,7 +5,7 @@
   </div>
 </template>
 <script>
-  module.exports = {
+  export default {
     props: ['label']
   }
 </script>
diff --git a/examples/hot-reload/my_widget_template.vue b/examples/hot-reload/my_widget_template.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
     <h1>My Widget template</h1>
-    <my-component :my-data="some_data"></my-component>
+    <my-component :my-data="some_data"/>
   </div>
 </template>
diff --git a/js/src/VueTemplateRenderer.js b/js/src/VueTemplateRenderer.js
@@ -270,7 +270,7 @@ function createClassComponents(components, containerModel, parentView) {
                     {
                         create_widget: componentSpec.class, // eslint-disable-line camelcase
                         id: this.id,
-                        props: this.$options.propsData,
+                        props: this.$props,
                     },
                     containerModel.callbacks(parentView),
                 );