add support for breadcrumbs

hal9ai · Mar 3, 2024 · 3eaadd7 · 3eaadd7
1 parent e18004c
commit 3eaadd7
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 18 deletions.
diff --git a/setup.py b/setup.py
@@ -2,7 +2,7 @@
 
 setuptools.setup(
     name="streamfy",
-    version="0.1.5",
+    version="0.1.6",
     author="",
     author_email="",
     description="",

diff --git a/streamfy/__init__.py b/streamfy/__init__.py
@@ -37,10 +37,20 @@ def table(**kwargs):
     component_value = _component_func(component="table", **hyphened)
     return component_value
 
+def breadcrumb(**kwargs):
+    hyphened = hyphen_case_keys(kwargs)
+    component_value = _component_func(component="breadcrumb", **hyphened)
+    return component_value
+
 if not _RELEASE:
+    st.subheader("Breadcrumb")
+    item = breadcrumb(items=[{"text": "A"}, {"text": "B"}])
+    st.write(item)
+
     st.subheader("Tags")
-    tags = taginput(data=["A", "B", "C"], placeholder="Choose letter")
+    tags = taginput(data=["A", "B", "C"], allow_new=True, open_on_focus=True, type="is-info", aria_close_label="Remove", placeholder="Choose letter")
     st.write(tags)
+
     st.subheader("Table")
     columns = [
         {

diff --git a/streamfy/frontend/src/Streamfy.vue b/streamfy/frontend/src/Streamfy.vue
@@ -1,24 +1,32 @@
 <template>
   <span>
-    <b-field ref="tagField" :label="label">
+    <b-field ref="field" :label="label">
+      <b-breadcrumb
+        v-if="args.component == 'breadcrumb' && args.items != undefined"
+      >
+        <b-breadcrumb-item
+          v-for="item in args.items"
+          :key="item.text"
+          v-bind="item"
+          tag="router-link"
+          to="#"
+          @click="click(item.text)"
+        >{{item.text}}
+        </b-breadcrumb-item>
+      </b-breadcrumb>
       <b-taginput
-        v-if="args.component == 'taginput'"
+        v-else-if="args.component == 'taginput'"
         v-model="tags"
-        :data="args.data"
-        autocomplete
-        :allow-new="true"
-        :open-on-focus="true"
-        type="is-info"
-        :placeholder="args.placeholder"
-        aria-close-label="Remove"
+        v-bind="args"
         @focus="focused"
-        @blur="blured">
+        @blur="blured"
+      >
       </b-taginput>
       <b-table
         v-else-if="args.component == 'table'"
         v-bind="args"
         :mobile-cards="args['has_mobile_cards'] != undefined ? args['has_mobile_cards'] : false"
-        >
+      >
       </b-table>
     </b-field>
   </span>
@@ -40,8 +48,8 @@ export default {
   },
   methods: {
     focused() {
-      if (this.tagField) {
-        const menu = this.tagField.$el.querySelector('.dropdown-menu');
+      if (this.field) {
+        const menu = this.field.$el.querySelector('.dropdown-menu');
         menu.style.bottom = 'auto';
       }
 
@@ -50,7 +58,10 @@ export default {
     },
     blured() {
       setTimeout(() => Streamlit.setFrameHeight(), 200);
-    }
+    },
+    click(value) {
+      Streamlit.setComponentValue(value)
+    },
   },
   watch: {
     tags() {
@@ -60,10 +71,10 @@ export default {
   setup() {
     useStreamlit()
 
-    const tagField = ref(null);
+    const field = ref(null);
 
     return {
-      tagField,
+      field,
     }
   },
 }