add carrousel

hal9ai · Mar 3, 2024 · bf358ab · bf358ab
1 parent 50a1a83
commit bf358ab
Show file tree

Hide file tree

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

diff --git a/streamfy/__init__.py b/streamfy/__init__.py
@@ -37,6 +37,11 @@ def button(**kwargs):
     component_value = _component_func(component="button", **hyphened)
     return component_value
 
+def carousel(**kwargs):
+    hyphened = hyphen_case_keys(kwargs)
+    component_value = _component_func(component="carousel", **hyphened)
+    return component_value
+
 def taginput(**kwargs):
     hyphened = hyphen_case_keys(kwargs)
     component_value = _component_func(component="taginput", **hyphened)
@@ -56,6 +61,14 @@ def table(**kwargs):
     if button(text = "Click!"):
         st.write("Clicked!")
 
+    st.subheader("Carousel")
+    selection = carousel(items=[
+        "https://picsum.photos/id/1051/1230/500",
+        "https://picsum.photos/id/1052/1230/500",
+        "https://picsum.photos/id/1053/1230/500",
+    ])
+    st.write(selection)
+
     st.subheader("Tags")
     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)

diff --git a/streamfy/frontend/src/Streamfy.vue b/streamfy/frontend/src/Streamfy.vue
@@ -5,8 +5,7 @@
         v-if="args.component == 'breadcrumb' && args.items != undefined"
       >
         <b-breadcrumb-item
-          v-for="item in args.items"
-          :key="item.text"
+          v-for="(item, i) in args.items" :key="i"
           v-bind="item"
           @click="click(item)"
         >{{item.text}}
@@ -15,9 +14,30 @@
       <b-button 
         v-else-if="args.component == 'button'"
         v-bind="args"
-        @click="click(args)">
+        @click="click(args)"
+      >
         {{ args.text}}
       </b-button>
+      <b-carousel
+        v-else-if="args.component == 'carousel'"
+        v-bind="args"
+      >
+        <b-carousel-item
+          v-for="(item, i) in args.items" :key="i"
+        >
+          <a class="image" @click="click(item)">
+            <img :src="item">
+          </a>
+        </b-carousel-item>
+        <template #list="props">
+          <b-carousel-list
+            v-model="props.active"
+            :data="args.items"
+            @switch="props.switch($event, false)"
+            as-indicator 
+          />
+        </template>
+      </b-carousel>
       <b-taginput
         v-else-if="args.component == 'taginput'"
         v-model="result"
@@ -45,6 +65,7 @@ export default {
   name: "Streamfy",
   props: ["args"],
   data() {
+    setTimeout(() => Streamlit.setFrameHeight(), 1000);
     return {
       result: [],
       jdata: undefined,