add support for data bindings

setup.py

@@ -2,7 +2,7 @@
 
 setuptools.setup(
     name="streamfy",
-    version="0.1.2",
+    version="0.1.3",
     author="",
     author_email="",
     description="",

streamfy/__init__.py

@@ -5,17 +5,6 @@
 
 _RELEASE = False
 
-# Declare a Streamlit component. `declare_component` returns a function
-# that is used to create instances of the component. We're naming this
-# function "_component_func", with an underscore prefix, because we don't want
-# to expose it directly to users. Instead, we will create a custom wrapper
-# function, below, that will serve as our component's public API.
-
-# It's worth noting that this call to `declare_component` is the
-# *only thing* you need to do to create the binding between Streamlit and
-# your component frontend. Everything else we do in this file is simply a
-# best practice.
-
 if not _RELEASE:
     _component_func = components.declare_component(
         "streamfy",
@@ -27,18 +16,12 @@
     _component_func = components.declare_component(
         "streamfy", path=build_dir)
 
-# Create a wrapper function for the component. This is an optional
-# best practice - we could simply expose the component function returned by
-# `declare_component` and call it done. The wrapper allows us to customize
-# our component's API: we can pre-process its input args, post-process its
-# output value, and add a docstring for users.
-
-
-def taginput(name, key=None):
-    component_value = _component_func(name=name, key=key, default=0)
+def taginput(data=[], placeholder="", key=None):
+    component_value = _component_func(data=data, placeholder=placeholder, key=key)
     return component_value
 
 if not _RELEASE:
     st.subheader("Start")
-    taginput("test", key="foo")
+    tags = taginput(data = ["A", "B", "C"], placeholder = "Choose letter")
+    st.write(tags)
     st.subheader("End")

streamfy/frontend/src/Streamfy.vue

@@ -4,7 +4,7 @@
       <b-taginput
         ref="tagRef"
         v-model="tags"
-        :data="suggestions"
+        :data="data"
         autocomplete
         :allow-new="true"
         :open-on-focus="true"
@@ -25,10 +25,13 @@ import { useStreamlit } from "./streamlit"
 
 export default {
   name: "Streamfy",
-  props: ["args"], // Arguments that are passed to the plugin in Python are accessible in prop "args"
+  props: ["args"],
   data() {
     return {
+      tags: [],
       focusOpen: false,
+      data: this.args.data ?? [],
+      placeholder: this.args.placeholder ?? '',
     }
   },
   methods: {
@@ -44,17 +47,17 @@ export default {
       setTimeout(() => Streamlit.setFrameHeight(80), 200);
     }
   },
+  watch: {
+    tags() {
+      Streamlit.setComponentValue([...this.tags]);
+    }
+  },
   setup() {
     useStreamlit() // lifecycle hooks for automatic Streamlit resize
 
     const tagRef = ref(null);
 
-    const tags = [];
-    const suggestions = ["Albertson", "Abogadro", "C", "D", "E", "F", "G"]
-
     return {
-      tags,
-      suggestions,
       tagRef,
     }
   },