Upload folder using huggingface_hub

README.md

@@ -1,9 +1,9 @@
 
 ---
 tags: [gradio-custom-component,gradio-template-Column,Modal, Popup]
-title: gradio_modal V0.0.1
-colorFrom: yellow
-colorTo: purple
+title: gradio_modal V0.0.2
+colorFrom: gray
+colorTo: indigo
 sdk: docker
 pinned: false
 license: apache-2.0

app.py

@@ -17,4 +17,5 @@ with gr.Blocks() as demo:
         gr.Markdown("Hello world!")
     show_btn.click(lambda: Modal(visible=True), None, modal)
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -1 +1 @@
-gradio_modal==0.0.1
+gradio_modal==0.0.2

space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'Modal': {'description': 'Modal is a layout element within Blocks that will show its content in a popup above other content.\n    from gradio_modal import Modal\n    with gr.Blocks() as demo:\n        with Modal():\n            text1 = gr.Textbox()\n            text2 = gr.Textbox()\n            btn = gr.Button("Button")', 'members': {'__init__': {'visible': {'type': 'bool', 'default': 'False', 'description': 'If False, column will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'allow_user_close': {'type': 'bool', 'default': 'True', 'description': 'If True, user can close the modal (by clicking outside, clicking the X, or the escape key).'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {}}, 'events': {}}, '__meta__': {'additional_interfaces': {}}}
+_docs = {'Modal': {'description': 'Modal is a layout element within Blocks that will show its content in a popup above other content.\n    from gradio_modal import Modal\n    with gr.Blocks() as demo:\n        with Modal():\n            text1 = gr.Textbox()\n            text2 = gr.Textbox()\n            btn = gr.Button("Button")', 'members': {'__init__': {'visible': {'type': 'bool', 'default': 'False', 'description': 'If False, modal will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'allow_user_close': {'type': 'bool', 'default': 'True', 'description': 'If True, user can close the modal (by clicking outside, clicking the X, or the escape key).'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {}}, 'events': {'blur': {'type': None, 'default': None, 'description': 'This listener is triggered when the Modal is unfocused/blurred.'}}}, '__meta__': {'additional_interfaces': {}}}
     
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -21,7 +21,7 @@ with gr.Blocks(
 # `gradio_modal`
 
 <div style="display: flex; gap: 7px;">
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+<a href="https://pypi.org/project/gradio_modal/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_modal"></a>  
 </div>
 
 A popup modal component
@@ -38,25 +38,25 @@ pip install gradio_modal
 ## Usage
 
 ```python
-
 import gradio as gr
 from gradio_modal import Modal
 
-
 with gr.Blocks() as demo:
-    gr.Markdown("### Main Page")
-    gr.Textbox("lorem ipsum " * 1000, lines=10)
-
-    with Modal(visible=True) as modal:
-        gr.Markdown("# License Agreement")
-        gr.Textbox(value="This is the license agreement. Please read it carefully. " * 5, lines=12)
-        close_btn = gr.Button("Close Modal")
-        close_btn.click(lambda: Modal(visible=False), None, modal)
-
-    show_btn = gr.Button("Show Modal")
+    with gr.Tab("Tab 1"):
+        text_1 = gr.Textbox(label="Input 1")
+        text_2 = gr.Textbox(label="Input 2")
+        text_1.submit(lambda x:x, text_1, text_2)
+        show_btn = gr.Button("Show Modal")
+        gr.Examples(
+            [["Text 1", "Text 2"], ["Text 3", "Text 4"]],
+            inputs=[text_1, text_2],
+        )
+    with gr.Tab("Tab 2"):
+        gr.Markdown("This is tab 2")
+    with Modal(visible=False) as modal:
+        gr.Markdown("Hello world!")
     show_btn.click(lambda: Modal(visible=True), None, modal)
 
-
 if __name__ == "__main__":
     demo.launch()
 
@@ -73,6 +73,10 @@ if __name__ == "__main__":
     gr.ParamViewer(value=_docs["Modal"]["members"]["__init__"], linkify=[])
 
 
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["Modal"]["events"], linkify=['Event'])
+
+
 
 
 

src/README.md

@@ -1,6 +1,6 @@
 
 # `gradio_modal`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+<a href="https://pypi.org/project/gradio_modal/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_modal"></a>  
 
 A popup modal component
 
@@ -13,25 +13,25 @@ pip install gradio_modal
 ## Usage
 
 ```python
-
 import gradio as gr
 from gradio_modal import Modal
 
-
 with gr.Blocks() as demo:
-    gr.Markdown("### Main Page")
-    gr.Textbox("lorem ipsum " * 1000, lines=10)
-
-    with Modal(visible=True) as modal:
-        gr.Markdown("# License Agreement")
-        gr.Textbox(value="This is the license agreement. Please read it carefully. " * 5, lines=12)
-        close_btn = gr.Button("Close Modal")
-        close_btn.click(lambda: Modal(visible=False), None, modal)
-
-    show_btn = gr.Button("Show Modal")
+    with gr.Tab("Tab 1"):
+        text_1 = gr.Textbox(label="Input 1")
+        text_2 = gr.Textbox(label="Input 2")
+        text_1.submit(lambda x:x, text_1, text_2)
+        show_btn = gr.Button("Show Modal")
+        gr.Examples(
+            [["Text 1", "Text 2"], ["Text 3", "Text 4"]],
+            inputs=[text_1, text_2],
+        )
+    with gr.Tab("Tab 2"):
+        gr.Markdown("This is tab 2")
+    with Modal(visible=False) as modal:
+        gr.Markdown("Hello world!")
     show_btn.click(lambda: Modal(visible=True), None, modal)
 
-
 if __name__ == "__main__":
     demo.launch()
 
@@ -61,7 +61,7 @@ bool
 
 </td>
 <td align="left"><code>False</code></td>
-<td align="left">If False, column will be hidden.</td>
+<td align="left">If False, modal will be hidden.</td>
 </tr>
 
 <tr>
@@ -118,5 +118,11 @@ bool
 </tbody></table>
 
 
+### Events
+
+| name | description |
+|:-----|:------------|
+| `blur` | This listener is triggered when the Modal is unfocused/blurred. |
+
 
 

src/backend/gradio_modal/templates/component/index.js

@@ -11,8 +11,8 @@ const {
   insert: ee,
   safe_not_equal: le,
   set_dynamic_element_data: z,
-  set_style: u,
-  toggle_class: b,
+  set_style: m,
+  toggle_class: g,
   transition_in: U,
   transition_out: F,
   update_slot_base: te
@@ -53,24 +53,24 @@ function fe(f) {
       ), i && i.c(), z(
         /*tag*/
         f[14]
-      )(e, s), b(
+      )(e, s), g(
         e,
         "hidden",
         /*visible*/
         f[10] === !1
-      ), b(
+      ), g(
         e,
         "padded",
         /*padding*/
         f[6]
-      ), b(
+      ), g(
         e,
         "border_focus",
         /*border_mode*/
         f[5] === "focus"
-      ), b(e, "hide-container", !/*explicit_call*/
+      ), g(e, "hide-container", !/*explicit_call*/
       f[8] && !/*container*/
-      f[9]), u(
+      f[9]), m(
         e,
         "height",
         /*get_dimension*/
@@ -78,7 +78,7 @@ function fe(f) {
           /*height*/
           f[0]
         )
-      ), u(e, "width", typeof /*width*/
+      ), m(e, "width", typeof /*width*/
       f[1] == "number" ? `calc(min(${/*width*/
       f[1]}px, 100%))` : (
         /*get_dimension*/
@@ -86,23 +86,23 @@ function fe(f) {
           /*width*/
           f[1]
         )
-      )), u(
+      )), m(
         e,
         "border-style",
         /*variant*/
         f[4]
-      ), u(
+      ), m(
         e,
         "overflow",
         /*allow_overflow*/
         f[11] ? "visible" : "hidden"
-      ), u(
+      ), m(
         e,
         "flex-grow",
         /*scale*/
         f[12]
-      ), u(e, "min-width", `calc(min(${/*min_width*/
-      f[13]}px, 100%))`), u(e, "border-width", "var(--block-border-width)");
+      ), m(e, "min-width", `calc(min(${/*min_width*/
+      f[13]}px, 100%))`), m(e, "border-width", "var(--block-border-width)");
     },
     m(t, o) {
       ee(t, e, o), i && i.m(e, null), a = !0;
@@ -143,25 +143,25 @@ function fe(f) {
         (!a || o & /*elem_classes*/
         8 && l !== (l = "block " + /*elem_classes*/
         t[3].join(" ") + " svelte-1t38q2d")) && { class: l }
-      ])), b(
+      ])), g(
         e,
         "hidden",
         /*visible*/
         t[10] === !1
-      ), b(
+      ), g(
         e,
         "padded",
         /*padding*/
         t[6]
-      ), b(
+      ), g(
         e,
         "border_focus",
         /*border_mode*/
         t[5] === "focus"
-      ), b(e, "hide-container", !/*explicit_call*/
+      ), g(e, "hide-container", !/*explicit_call*/
       t[8] && !/*container*/
       t[9]), o & /*height*/
-      1 && u(
+      1 && m(
         e,
         "height",
         /*get_dimension*/
@@ -170,7 +170,7 @@ function fe(f) {
           t[0]
         )
       ), o & /*width*/
-      2 && u(e, "width", typeof /*width*/
+      2 && m(e, "width", typeof /*width*/
       t[1] == "number" ? `calc(min(${/*width*/
       t[1]}px, 100%))` : (
         /*get_dimension*/
@@ -179,25 +179,25 @@ function fe(f) {
           t[1]
         )
       )), o & /*variant*/
-      16 && u(
+      16 && m(
         e,
         "border-style",
         /*variant*/
         t[4]
       ), o & /*allow_overflow*/
-      2048 && u(
+      2048 && m(
         e,
         "overflow",
         /*allow_overflow*/
         t[11] ? "visible" : "hidden"
       ), o & /*scale*/
-      4096 && u(
+      4096 && m(
         e,
         "flex-grow",
         /*scale*/
         t[12]
       ), o & /*min_width*/
-      8192 && u(e, "min-width", `calc(min(${/*min_width*/
+      8192 && m(e, "min-width", `calc(min(${/*min_width*/
       t[13]}px, 100%))`);
     },
     i(t) {
@@ -239,7 +239,7 @@ function ne(f) {
   };
 }
 function ae(f, e, l) {
-  let { $$slots: a = {}, $$scope: n } = e, { height: i = void 0 } = e, { width: d = void 0 } = e, { elem_id: s = "" } = e, { elem_classes: t = [] } = e, { variant: o = "solid" } = e, { border_mode: m = "base" } = e, { padding: h = !0 } = e, { type: c = "normal" } = e, { test_id: r = void 0 } = e, { explicit_call: S = !1 } = e, { container: B = !0 } = e, { visible: L = !0 } = e, { allow_overflow: T = !0 } = e, { scale: E = null } = e, { min_width: M = 0 } = e, P = c === "fieldset" ? "fieldset" : "div";
+  let { $$slots: a = {}, $$scope: n } = e, { height: i = void 0 } = e, { width: d = void 0 } = e, { elem_id: s = "" } = e, { elem_classes: t = [] } = e, { variant: o = "solid" } = e, { border_mode: u = "base" } = e, { padding: b = !0 } = e, { type: c = "normal" } = e, { test_id: w = void 0 } = e, { explicit_call: r = !1 } = e, { container: B = !0 } = e, { visible: L = !0 } = e, { allow_overflow: T = !0 } = e, { scale: E = null } = e, { min_width: M = 0 } = e, P = c === "fieldset" ? "fieldset" : "div";
   const Q = (_) => {
     if (_ !== void 0) {
       if (typeof _ == "number")
@@ -249,17 +249,17 @@ function ae(f, e, l) {
     }
   };
   return f.$$set = (_) => {
-    "height" in _ && l(0, i = _.height), "width" in _ && l(1, d = _.width), "elem_id" in _ && l(2, s = _.elem_id), "elem_classes" in _ && l(3, t = _.elem_classes), "variant" in _ && l(4, o = _.variant), "border_mode" in _ && l(5, m = _.border_mode), "padding" in _ && l(6, h = _.padding), "type" in _ && l(16, c = _.type), "test_id" in _ && l(7, r = _.test_id), "explicit_call" in _ && l(8, S = _.explicit_call), "container" in _ && l(9, B = _.container), "visible" in _ && l(10, L = _.visible), "allow_overflow" in _ && l(11, T = _.allow_overflow), "scale" in _ && l(12, E = _.scale), "min_width" in _ && l(13, M = _.min_width), "$$scope" in _ && l(17, n = _.$$scope);
+    "height" in _ && l(0, i = _.height), "width" in _ && l(1, d = _.width), "elem_id" in _ && l(2, s = _.elem_id), "elem_classes" in _ && l(3, t = _.elem_classes), "variant" in _ && l(4, o = _.variant), "border_mode" in _ && l(5, u = _.border_mode), "padding" in _ && l(6, b = _.padding), "type" in _ && l(16, c = _.type), "test_id" in _ && l(7, w = _.test_id), "explicit_call" in _ && l(8, r = _.explicit_call), "container" in _ && l(9, B = _.container), "visible" in _ && l(10, L = _.visible), "allow_overflow" in _ && l(11, T = _.allow_overflow), "scale" in _ && l(12, E = _.scale), "min_width" in _ && l(13, M = _.min_width), "$$scope" in _ && l(17, n = _.$$scope);
   }, [
     i,
     d,
     s,
     t,
     o,
-    m,
-    h,
+    u,
+    b,
+    w,
     r,
-    S,
     B,
     L,
     T,
@@ -609,7 +609,7 @@ se.reduce(
 );
 const {
   SvelteComponent: _e,
-  attr: w,
+  attr: y,
   create_slot: de,
   detach: oe,
   element: ce,
@@ -619,8 +619,8 @@ const {
   insert: be,
   null_to_empty: D,
   safe_not_equal: ge,
-  set_style: y,
-  toggle_class: g,
+  set_style: k,
+  toggle_class: h,
   transition_in: he,
   transition_out: ve,
   update_slot_base: we
@@ -640,36 +640,36 @@ function ye(f) {
   );
   return {
     c() {
-      e = ce("div"), d && d.c(), w(
+      e = ce("div"), d && d.c(), y(
         e,
         "id",
         /*elem_id*/
         f[3]
-      ), w(e, "class", l = D(
+      ), y(e, "class", l = D(
         /*elem_classes*/
         f[4].join(" ")
-      ) + " svelte-1m1obck"), g(
+      ) + " svelte-1m1obck"), h(
         e,
         "gap",
         /*gap*/
         f[1]
-      ), g(
+      ), h(
         e,
         "compact",
         /*variant*/
         f[6] === "compact"
-      ), g(
+      ), h(
         e,
         "panel",
         /*variant*/
         f[6] === "panel"
-      ), g(e, "hide", !/*visible*/
-      f[5]), y(
+      ), h(e, "hide", !/*visible*/
+      f[5]), k(
         e,
         "flex-grow",
         /*scale*/
         f[0]
-      ), y(e, "min-width", a);
+      ), k(e, "min-width", a);
     },
     m(s, t) {
       be(s, e, t), d && d.m(e, null), n = !0;
@@ -694,7 +694,7 @@ function ye(f) {
         ),
         null
       ), (!n || t & /*elem_id*/
-      8) && w(
+      8) && y(
         e,
         "id",
         /*elem_id*/
@@ -703,35 +703,35 @@ function ye(f) {
       16 && l !== (l = D(
         /*elem_classes*/
         s[4].join(" ")
-      ) + " svelte-1m1obck")) && w(e, "class", l), (!n || t & /*elem_classes, gap*/
-      18) && g(
+      ) + " svelte-1m1obck")) && y(e, "class", l), (!n || t & /*elem_classes, gap*/
+      18) && h(
         e,
         "gap",
         /*gap*/
         s[1]
       ), (!n || t & /*elem_classes, variant*/
-      80) && g(
+      80) && h(
         e,
         "compact",
         /*variant*/
         s[6] === "compact"
       ), (!n || t & /*elem_classes, variant*/
-      80) && g(
+      80) && h(
         e,
         "panel",
         /*variant*/
         s[6] === "panel"
       ), (!n || t & /*elem_classes, visible*/
-      48) && g(e, "hide", !/*visible*/
+      48) && h(e, "hide", !/*visible*/
       s[5]), t & /*scale*/
-      1 && y(
+      1 && k(
         e,
         "flex-grow",
         /*scale*/
         s[0]
       ), t & /*min_width*/
       4 && a !== (a = `calc(min(${/*min_width*/
-      s[2]}px, 100%))`) && y(e, "min-width", a);
+      s[2]}px, 100%))`) && k(e, "min-width", a);
     },
     i(s) {
       n || (he(d, s), n = !0);
@@ -745,10 +745,10 @@ function ye(f) {
   };
 }
 function ke(f, e, l) {
-  let { $$slots: a = {}, $$scope: n } = e, { scale: i = null } = e, { gap: d = !0 } = e, { min_width: s = 0 } = e, { elem_id: t = "" } = e, { elem_classes: o = [] } = e, { visible: m = !0 } = e, { variant: h = "default" } = e;
+  let { $$slots: a = {}, $$scope: n } = e, { scale: i = null } = e, { gap: d = !0 } = e, { min_width: s = 0 } = e, { elem_id: t = "" } = e, { elem_classes: o = [] } = e, { visible: u = !0 } = e, { variant: b = "default" } = e;
   return f.$$set = (c) => {
-    "scale" in c && l(0, i = c.scale), "gap" in c && l(1, d = c.gap), "min_width" in c && l(2, s = c.min_width), "elem_id" in c && l(3, t = c.elem_id), "elem_classes" in c && l(4, o = c.elem_classes), "visible" in c && l(5, m = c.visible), "variant" in c && l(6, h = c.variant), "$$scope" in c && l(7, n = c.$$scope);
-  }, [i, d, s, t, o, m, h, n, a];
+    "scale" in c && l(0, i = c.scale), "gap" in c && l(1, d = c.gap), "min_width" in c && l(2, s = c.min_width), "elem_id" in c && l(3, t = c.elem_id), "elem_classes" in c && l(4, o = c.elem_classes), "visible" in c && l(5, u = c.visible), "variant" in c && l(6, b = c.variant), "$$scope" in c && l(7, n = c.$$scope);
+  }, [i, d, s, t, o, u, b, n, a];
 }
 let je = class extends _e {
   constructor(e) {
@@ -771,39 +771,39 @@ const {
   create_component: G,
   create_slot: Se,
   destroy_component: J,
-  detach: j,
-  element: k,
+  detach: C,
+  element: j,
   get_all_dirty_from_scope: Be,
   get_slot_changes: Le,
   init: Te,
-  insert: C,
+  insert: q,
   listen: K,
   mount_component: O,
   noop: Ee,
   safe_not_equal: Me,
   space: ze,
   toggle_class: H,
-  transition_in: q,
-  transition_out: I,
+  transition_in: I,
+  transition_out: S,
   update_slot_base: Ae
 } = window.__gradio__svelte__internal;
 function N(f) {
   let e, l, a;
   return {
     c() {
-      e = k("div"), e.innerHTML = '<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L9 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 1L1 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>', v(e, "class", "close svelte-ra5mg6");
+      e = j("div"), e.innerHTML = '<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L9 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9 1L1 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>', v(e, "class", "close svelte-ra5mg6");
     },
     m(n, i) {
-      C(n, e, i), l || (a = K(
+      q(n, e, i), l || (a = K(
         e,
         "click",
-        /*click_handler*/
-        f[6]
+        /*close*/
+        f[5]
       ), l = !0);
     },
     p: Ee,
     d(n) {
-      n && j(e), l = !1, a();
+      n && C(e), l = !1, a();
     }
   };
 }
@@ -811,12 +811,12 @@ function De(f) {
   let e;
   const l = (
     /*#slots*/
-    f[5].default
+    f[7].default
   ), a = Se(
     l,
     f,
     /*$$scope*/
-    f[9],
+    f[10],
     null
   );
   return {
@@ -828,30 +828,30 @@ function De(f) {
     },
     p(n, i) {
       a && a.p && (!e || i & /*$$scope*/
-      512) && Ae(
+      1024) && Ae(
         a,
         l,
         n,
         /*$$scope*/
-        n[9],
+        n[10],
         e ? Le(
           l,
           /*$$scope*/
-          n[9],
+          n[10],
           i,
           null
         ) : Be(
           /*$$scope*/
-          n[9]
+          n[10]
         ),
         null
       );
     },
     i(n) {
-      e || (q(a, n), e = !0);
+      e || (I(a, n), e = !0);
     },
     o(n) {
-      I(a, n), e = !1;
+      S(a, n), e = !1;
     },
     d(n) {
       a && a.d(n);
@@ -873,23 +873,23 @@ function He(f) {
       n && n.c(), e = ze(), G(l.$$.fragment);
     },
     m(i, d) {
-      n && n.m(i, d), C(i, e, d), O(l, i, d), a = !0;
+      n && n.m(i, d), q(i, e, d), O(l, i, d), a = !0;
     },
     p(i, d) {
       /*allow_user_close*/
       i[3] ? n ? n.p(i, d) : (n = N(i), n.c(), n.m(e.parentNode, e)) : n && (n.d(1), n = null);
       const s = {};
       d & /*$$scope*/
-      512 && (s.$$scope = { dirty: d, ctx: i }), l.$set(s);
+      1024 && (s.$$scope = { dirty: d, ctx: i }), l.$set(s);
     },
     i(i) {
-      a || (q(l.$$.fragment, i), a = !0);
+      a || (I(l.$$.fragment, i), a = !0);
     },
     o(i) {
-      I(l.$$.fragment, i), a = !1;
+      S(l.$$.fragment, i), a = !1;
     },
     d(i) {
-      i && j(e), n && n.d(i), J(l, i);
+      i && C(e), n && n.d(i), J(l, i);
     }
   };
 }
@@ -903,7 +903,7 @@ function Ne(f) {
     }
   }), {
     c() {
-      e = k("div"), l = k("div"), G(a.$$.fragment), v(l, "class", "modal-container svelte-ra5mg6"), v(e, "class", n = "modal " + /*elem_classes*/
+      e = j("div"), l = j("div"), G(a.$$.fragment), v(l, "class", "modal-container svelte-ra5mg6"), v(e, "class", n = "modal " + /*elem_classes*/
       f[2].join(" ") + " svelte-ra5mg6"), v(
         e,
         "id",
@@ -913,17 +913,17 @@ function Ne(f) {
       f[0]);
     },
     m(t, o) {
-      C(t, e, o), qe(e, l), O(a, l, null), f[7](e), i = !0, d || (s = K(
+      q(t, e, o), qe(e, l), O(a, l, null), f[8](e), i = !0, d || (s = K(
         e,
         "click",
-        /*click_handler_1*/
-        f[8]
+        /*click_handler*/
+        f[9]
       ), d = !0);
     },
     p(t, [o]) {
-      const m = {};
-      o & /*$$scope, visible, allow_user_close*/
-      521 && (m.$$scope = { dirty: o, ctx: t }), a.$set(m), (!i || o & /*elem_classes*/
+      const u = {};
+      o & /*$$scope, allow_user_close*/
+      1032 && (u.$$scope = { dirty: o, ctx: t }), a.$set(u), (!i || o & /*elem_classes*/
       4 && n !== (n = "modal " + /*elem_classes*/
       t[2].join(" ") + " svelte-ra5mg6")) && v(e, "class", n), (!i || o & /*elem_id*/
       2) && v(
@@ -936,42 +936,45 @@ function Ne(f) {
       t[0]);
     },
     i(t) {
-      i || (q(a.$$.fragment, t), i = !0);
+      i || (I(a.$$.fragment, t), i = !0);
     },
     o(t) {
-      I(a.$$.fragment, t), i = !1;
+      S(a.$$.fragment, t), i = !1;
     },
     d(t) {
-      t && j(e), J(a), f[7](null), d = !1, s();
+      t && C(e), J(a), f[8](null), d = !1, s();
     }
   };
 }
 function Ue(f, e, l) {
-  let { $$slots: a = {}, $$scope: n } = e, { elem_id: i = "" } = e, { elem_classes: d = [] } = e, { visible: s = !1 } = e, { allow_user_close: t = !0 } = e, o = null;
+  let { $$slots: a = {}, $$scope: n } = e, { elem_id: i = "" } = e, { elem_classes: d = [] } = e, { visible: s = !1 } = e, { allow_user_close: t = !0 } = e, { gradio: o } = e, u = null;
+  const b = () => {
+    l(0, s = !1), o.dispatch("blur");
+  };
   document.addEventListener("keydown", (r) => {
-    t && r.key === "Escape" && l(0, s = !1);
+    t && r.key === "Escape" && b();
   });
-  const m = () => l(0, s = !1);
-  function h(r) {
+  function c(r) {
     Ie[r ? "unshift" : "push"](() => {
-      o = r, l(4, o);
+      u = r, l(4, u);
     });
   }
-  const c = (r) => {
-    t && r.target === o && l(0, s = !1);
+  const w = (r) => {
+    t && r.target === u && b();
   };
   return f.$$set = (r) => {
-    "elem_id" in r && l(1, i = r.elem_id), "elem_classes" in r && l(2, d = r.elem_classes), "visible" in r && l(0, s = r.visible), "allow_user_close" in r && l(3, t = r.allow_user_close), "$$scope" in r && l(9, n = r.$$scope);
+    "elem_id" in r && l(1, i = r.elem_id), "elem_classes" in r && l(2, d = r.elem_classes), "visible" in r && l(0, s = r.visible), "allow_user_close" in r && l(3, t = r.allow_user_close), "gradio" in r && l(6, o = r.gradio), "$$scope" in r && l(10, n = r.$$scope);
   }, [
     s,
     i,
     d,
     t,
+    u,
+    b,
     o,
     a,
-    m,
-    h,
     c,
+    w,
     n
   ];
 }
@@ -981,7 +984,8 @@ class Ge extends Ce {
       elem_id: 1,
       elem_classes: 2,
       visible: 0,
-      allow_user_close: 3
+      allow_user_close: 3,
+      gradio: 6
     });
   }
 }

src/demo/app.py

@@ -17,4 +17,5 @@ with gr.Blocks() as demo:
         gr.Markdown("Hello world!")
     show_btn.click(lambda: Modal(visible=True), None, modal)
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch()

src/demo/space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'Modal': {'description': 'Modal is a layout element within Blocks that will show its content in a popup above other content.\n    from gradio_modal import Modal\n    with gr.Blocks() as demo:\n        with Modal():\n            text1 = gr.Textbox()\n            text2 = gr.Textbox()\n            btn = gr.Button("Button")', 'members': {'__init__': {'visible': {'type': 'bool', 'default': 'False', 'description': 'If False, column will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'allow_user_close': {'type': 'bool', 'default': 'True', 'description': 'If True, user can close the modal (by clicking outside, clicking the X, or the escape key).'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {}}, 'events': {}}, '__meta__': {'additional_interfaces': {}}}
+_docs = {'Modal': {'description': 'Modal is a layout element within Blocks that will show its content in a popup above other content.\n    from gradio_modal import Modal\n    with gr.Blocks() as demo:\n        with Modal():\n            text1 = gr.Textbox()\n            text2 = gr.Textbox()\n            btn = gr.Button("Button")', 'members': {'__init__': {'visible': {'type': 'bool', 'default': 'False', 'description': 'If False, modal will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.'}, 'allow_user_close': {'type': 'bool', 'default': 'True', 'description': 'If True, user can close the modal (by clicking outside, clicking the X, or the escape key).'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}}, 'postprocess': {}}, 'events': {'blur': {'type': None, 'default': None, 'description': 'This listener is triggered when the Modal is unfocused/blurred.'}}}, '__meta__': {'additional_interfaces': {}}}
     
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -21,7 +21,7 @@ with gr.Blocks(
 # `gradio_modal`
 
 <div style="display: flex; gap: 7px;">
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+<a href="https://pypi.org/project/gradio_modal/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_modal"></a>  
 </div>
 
 A popup modal component
@@ -38,25 +38,25 @@ pip install gradio_modal
 ## Usage
 
 ```python
-
 import gradio as gr
 from gradio_modal import Modal
 
-
 with gr.Blocks() as demo:
-    gr.Markdown("### Main Page")
-    gr.Textbox("lorem ipsum " * 1000, lines=10)
-
-    with Modal(visible=True) as modal:
-        gr.Markdown("# License Agreement")
-        gr.Textbox(value="This is the license agreement. Please read it carefully. " * 5, lines=12)
-        close_btn = gr.Button("Close Modal")
-        close_btn.click(lambda: Modal(visible=False), None, modal)
-
-    show_btn = gr.Button("Show Modal")
+    with gr.Tab("Tab 1"):
+        text_1 = gr.Textbox(label="Input 1")
+        text_2 = gr.Textbox(label="Input 2")
+        text_1.submit(lambda x:x, text_1, text_2)
+        show_btn = gr.Button("Show Modal")
+        gr.Examples(
+            [["Text 1", "Text 2"], ["Text 3", "Text 4"]],
+            inputs=[text_1, text_2],
+        )
+    with gr.Tab("Tab 2"):
+        gr.Markdown("This is tab 2")
+    with Modal(visible=False) as modal:
+        gr.Markdown("Hello world!")
     show_btn.click(lambda: Modal(visible=True), None, modal)
 
-
 if __name__ == "__main__":
     demo.launch()
 
@@ -73,6 +73,10 @@ if __name__ == "__main__":
     gr.ParamViewer(value=_docs["Modal"]["members"]["__init__"], linkify=[])
 
 
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["Modal"]["events"], linkify=['Event'])
+
+
 
 
 

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_modal"
-version = "0.0.1"
+version = "0.0.2"
 description = "A popup modal component"
 readme = "README.md"
 license = "MIT"
@@ -36,7 +36,7 @@ classifiers = [
 dev = ["build", "twine"]
 
 [tool.hatch.build]
-artifacts = ["/backend/gradio_modal/templates", "*.pyi", "backend/gradio_modal/templates", "backend/gradio_modal/templates"]
+artifacts = ["/backend/gradio_modal/templates", "*.pyi", "backend/gradio_modal/templates", "backend/gradio_modal/templates", "backend/gradio_modal/templates", "backend/gradio_modal/templates"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gradio_modal"]