From 6c9dfdf050e87a72017100cf9736ac1b0b3a8664 Mon Sep 17 00:00:00 2001
From: Javier Luraschi <jluraschi@gmail.com>
Date: Mon, 4 Mar 2024 00:08:16 -0800
Subject: [PATCH] filter out tags when used

---
 examples/requirements.txt          |  2 +-
 setup.py                           |  2 +-
 streamfy/frontend/src/Streamfy.vue | 61 +++++++++++++++++++++++-------
 3 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/examples/requirements.txt b/examples/requirements.txt
index 85f1fe0..eb0a66b 100644
--- a/examples/requirements.txt
+++ b/examples/requirements.txt
@@ -1,3 +1,3 @@
-streamfy
+streamfy==0.2.6
 streamlit==1.15.2
 
diff --git a/setup.py b/setup.py
index 6c95ac1..a8cc73c 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@
 
 setuptools.setup(
     name="streamfy",
-    version="0.2.5",
+    version="0.2.6",
     author="",
     author_email="",
     description="",
diff --git a/streamfy/frontend/src/Streamfy.vue b/streamfy/frontend/src/Streamfy.vue
index 86cb586..8a920f1 100644
--- a/streamfy/frontend/src/Streamfy.vue
+++ b/streamfy/frontend/src/Streamfy.vue
@@ -160,6 +160,8 @@
         v-bind="args"
         @focus="focused"
         @blur="blured"
+        :data="filtered"
+        @typing="filteredData"
       >
       </b-taginput>
 
@@ -223,6 +225,7 @@ export default {
     setTimeout(() => Streamlit.setFrameHeight(), 1000);
     return {
       result: this.args.default,
+      filtered: undefined,
     }
   },
   methods: {
@@ -253,22 +256,48 @@ export default {
     click(value) {
       this.result = value
     },
+    filteredData(text) {
+      if (this.args.component != 'taginput') return;
+      if (!this.args.data) return;
+
+      console.log('x1')
+
+      const result = this.result;
+      console.log('x2')
+      this.filtered = this.args.data
+        .filter(e => {
+          console.log('x3 ' + e)
+          return !result.includes(e)
+        })
+        .filter((datum) => {
+          console.log('x4 ' + datum + ' ' + text)
+          return datum
+            .toString()
+            .toLowerCase()
+            .indexOf(text.toLowerCase()) >= 0
+        })
+    },
   },
   watch: {
-    result() {
-      if (this.result?.isArray && this.result.isArray()) {
-        Streamlit.setComponentValue([...this.result]);
-      }
-      else if (this.result?.constructor?.toString()?.includes("Array")) {
-        Streamlit.setComponentValue([...this.result]);
-      }
-      else if (this.result?.constructor == Object) {
-        Streamlit.setComponentValue(Object.assign({}, this.result));
-      }
-      else {
-        Streamlit.setComponentValue(this.result);
-      }
-    },
+    result: {
+      immediate: true,
+      handler: function() {
+        if (this.result?.isArray && this.result.isArray()) {
+          Streamlit.setComponentValue([...this.result]);
+        }
+        else if (this.result?.constructor?.toString()?.includes("Array")) {
+          Streamlit.setComponentValue([...this.result]);
+        }
+        else if (this.result?.constructor == Object) {
+          Streamlit.setComponentValue(Object.assign({}, this.result));
+        }
+        else {
+          Streamlit.setComponentValue(this.result);
+        }
+
+        this.filteredData('');
+      },
+    }
   },
   setup() {
     useStreamlit()
@@ -296,4 +325,8 @@ export default {
   .sy-slider {
     padding: 30px 20px 10px 20px;
   }
+
+  .sy-taginput .dropdown-content {
+    margin-bottom: 20px;
+  }
 </style>