@gradio/tabs 0.5.4 → 0.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/Index.svelte +13 -13
  3. package/Tabs.stories.svelte +105 -99
  4. package/Walkthrough.stories.svelte +117 -111
  5. package/dist/Index.svelte +13 -13
  6. package/dist/types.d.ts +6 -0
  7. package/package.json +4 -4
  8. package/types.ts +6 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # @gradio/tabs
2
2
 
3
+ ## 0.5.6
4
+
5
+ ### Fixes
6
+
7
+ - [#12846](https://github.com/gradio-app/gradio/pull/12846) [`226daba`](https://github.com/gradio-app/gradio/commit/226daba5f65257244efc7c310500ea5366b20a87) - Fix bug where children of accordions dont get rendered when they are opened programmatically. Thanks @freddyaboulton!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/utils@0.11.3
12
+
13
+ ## 0.5.5
14
+
15
+ ### Fixes
16
+
17
+ - [#12800](https://github.com/gradio-app/gradio/pull/12800) [`7a1c321`](https://github.com/gradio-app/gradio/commit/7a1c321b6546ba05a353488f5133e8262c4a8a39) - Bump svelte/kit for security reasons. Thanks @freddyaboulton!
18
+ - [#12693](https://github.com/gradio-app/gradio/pull/12693) [`b48da51`](https://github.com/gradio-app/gradio/commit/b48da517d2daa62d3b201f9a84bef9352d485b38) - Fix bug where Walkthrough Component Freezes. Thanks @freddyaboulton!
19
+
20
+ ### Dependency updates
21
+
22
+ - @gradio/utils@0.11.2
23
+
24
+ ## 0.5.4
25
+
26
+ ### Dependency updates
27
+
28
+ - @gradio/utils@0.11.1
29
+
3
30
  ## 0.5.4
4
31
 
5
32
  ### Dependency updates
package/Index.svelte CHANGED
@@ -7,24 +7,24 @@
7
7
  import Tabs from "./shared/Tabs.svelte";
8
8
  import Walkthrough from "./shared/Walkthrough.svelte";
9
9
  import type { TabsProps, TabsEvents } from "./types";
10
+ import { untrack } from "svelte";
10
11
 
11
12
  let props = $props();
12
13
  const gradio = new Gradio<TabsEvents, TabsProps>(props);
13
14
 
14
- let old_selected = $state(gradio.props.selected);
15
-
16
15
  $effect(() => {
17
- if (old_selected !== gradio.props.selected) {
18
- const i = gradio.props.initial_tabs.findIndex(
19
- (t) => t.id === gradio.props.selected
20
- );
21
- gradio.dispatch("gradio_tab_select", {
22
- value: gradio.props.initial_tabs[i].label,
23
- index: i,
24
- id: gradio.props.initial_tabs[i].id,
25
- component_id: gradio.props.initial_tabs[i].component_id
16
+ if (gradio.props.selected) {
17
+ untrack(() => {
18
+ const i = gradio.props.initial_tabs.findIndex(
19
+ (t) => t.id === gradio.props.selected
20
+ );
21
+ gradio.dispatch("gradio_tab_select", {
22
+ value: gradio.props.initial_tabs[i].label,
23
+ index: i,
24
+ id: gradio.props.initial_tabs[i].id,
25
+ component_id: gradio.props.initial_tabs[i].component_id
26
+ });
26
27
  });
27
- old_selected = gradio.props.selected;
28
28
  }
29
29
  });
30
30
  </script>
@@ -34,7 +34,7 @@
34
34
  visible={gradio.shared.visible}
35
35
  elem_id={gradio.shared.elem_id}
36
36
  elem_classes={gradio.shared.elem_classes}
37
- bind:selected={gradio.props.selected}
37
+ selected={gradio.props.selected}
38
38
  on:change={() => gradio.dispatch("change")}
39
39
  on:select={(e) => {
40
40
  gradio.dispatch("select", e.detail);
package/Tabs.stories.svelte CHANGED
@@ -1,104 +1,110 @@
1
- <script>
2
- import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
3
- import Tabs from "./Index.svelte";
4
- import TabItem from "../tabitem/Index.svelte";
5
- </script>
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
+ import { BaseTabs } from "./Index.svelte";
4
+
5
+ const cheetah = "/cheetah.jpg";
6
6
 
7
- <Meta title="Components/Tabs" component={Tabs} />
7
+ const { Story } = defineMeta({
8
+ title: "Components/Tabs",
9
+ component: BaseTabs
10
+ });
8
11
 
9
- <Template let:args>
10
- <Tabs {...args}>
11
- <TabItem
12
- order={0}
13
- id="tab-1"
14
- label="Image Tab"
15
- gradio={undefined}
16
- visible
17
- interactive
18
- elem_classes={["editor-tabitem"]}
19
- scale={0}
20
- >
21
- <img
22
- style="width: 200px;"
23
- alt="Cheetah"
24
- src="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
25
- />
26
- </TabItem>
27
- <TabItem
28
- order={1}
29
- id="tab-2"
30
- label="Hidden Tab"
31
- gradio={undefined}
32
- visible={false}
33
- interactive
34
- elem_classes={["editor-tabitem"]}
35
- scale={0}
36
- >
37
- Secret Tab
38
- </TabItem>
39
- <TabItem
40
- order={2}
41
- id="tab-3"
42
- label="Visible Tab"
43
- gradio={undefined}
44
- visible
45
- interactive
46
- elem_classes={["editor-tabitem"]}
47
- scale={0}
48
- >
49
- Visible Tab
50
- </TabItem>
51
- </Tabs>
52
- </Template>
12
+ const basicTabs = [
13
+ {
14
+ label: "Image Tab",
15
+ id: "tab-1",
16
+ elem_id: undefined,
17
+ visible: true,
18
+ interactive: true,
19
+ scale: null,
20
+ component_id: 1
21
+ },
22
+ {
23
+ label: "Hidden Tab",
24
+ id: "tab-2",
25
+ elem_id: undefined,
26
+ visible: false,
27
+ interactive: true,
28
+ scale: null,
29
+ component_id: 2
30
+ },
31
+ {
32
+ label: "Visible Tab",
33
+ id: "tab-3",
34
+ elem_id: undefined,
35
+ visible: true,
36
+ interactive: true,
37
+ scale: null,
38
+ component_id: 3
39
+ }
40
+ ];
53
41
 
54
- <Story name="Tabs" args={{}} />
42
+ const manyTabs = [
43
+ {
44
+ label: "This is visible tab 1",
45
+ id: "tab-1",
46
+ elem_id: undefined,
47
+ visible: true,
48
+ interactive: true,
49
+ scale: null,
50
+ component_id: 1
51
+ },
52
+ {
53
+ label: "This is visible tab 2",
54
+ id: "tab-2",
55
+ elem_id: undefined,
56
+ visible: true,
57
+ interactive: true,
58
+ scale: null,
59
+ component_id: 2
60
+ },
61
+ {
62
+ label: "This is visible tab 3",
63
+ id: "tab-3",
64
+ elem_id: undefined,
65
+ visible: true,
66
+ interactive: true,
67
+ scale: null,
68
+ component_id: 3
69
+ },
70
+ {
71
+ label: "This is invisible tab 4",
72
+ id: "tab-4",
73
+ elem_id: undefined,
74
+ visible: false,
75
+ interactive: true,
76
+ scale: null,
77
+ component_id: 4
78
+ },
79
+ {
80
+ label: "This is invisible tab 5",
81
+ id: "tab-5",
82
+ elem_id: undefined,
83
+ visible: false,
84
+ interactive: true,
85
+ scale: null,
86
+ component_id: 5
87
+ }
88
+ ];
89
+ </script>
90
+
91
+ <Story name="Tabs" args={{ initial_tabs: basicTabs, selected: "tab-1" }}>
92
+ {#snippet template(args)}
93
+ <BaseTabs {...args}>
94
+ <div style="padding: 1rem;">
95
+ <img style="width: 200px;" alt="Cheetah" src={cheetah} />
96
+ </div>
97
+ </BaseTabs>
98
+ {/snippet}
99
+ </Story>
55
100
 
56
- <Story name="TabsLastInvisible" args={{}}>
57
- <Tabs selected="tab-1" gradio={undefined}>
58
- <TabItem
59
- order={0}
60
- id="tab-1"
61
- label="This is visible tab 1"
62
- gradio={undefined}
63
- visible
64
- interactive
65
- scale={0}
66
- ></TabItem>
67
- <TabItem
68
- order={1}
69
- id="tab-2"
70
- label="This is visible tab 2"
71
- gradio={undefined}
72
- visible
73
- interactive
74
- scale={0}
75
- ></TabItem>
76
- <TabItem
77
- order={2}
78
- id="tab-3"
79
- label="This is visible tab 3"
80
- gradio={undefined}
81
- visible
82
- interactive
83
- scale={0}
84
- ></TabItem>
85
- <TabItem
86
- order={3}
87
- id="tab-4"
88
- label="This is invisible tab 4"
89
- gradio={undefined}
90
- visible={false}
91
- interactive
92
- scale={0}
93
- ></TabItem>
94
- <TabItem
95
- order={4}
96
- id="tab-5"
97
- label="This is invisible tab 5"
98
- gradio={undefined}
99
- visible={false}
100
- interactive
101
- scale={0}
102
- ></TabItem>
103
- </Tabs>
101
+ <Story
102
+ name="TabsLastInvisible"
103
+ args={{ initial_tabs: manyTabs, selected: "tab-1" }}
104
+ >
105
+ {#snippet template(args)}
106
+ <BaseTabs {...args}>
107
+ <div style="padding: 1rem;">Tab content goes here</div>
108
+ </BaseTabs>
109
+ {/snippet}
104
110
  </Story>
package/Walkthrough.stories.svelte CHANGED
@@ -1,116 +1,122 @@
1
- <script>
2
- import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
3
- import Tabs from "./Index.svelte";
4
- import TabItem from "../tabitem/Index.svelte";
5
- </script>
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
+ import Walkthrough from "./shared/Walkthrough.svelte";
4
+
5
+ const cheetah = "/cheetah.jpg";
6
6
 
7
- <Meta title="Components/Walkthrough" component={Tabs} />
7
+ const { Story } = defineMeta({
8
+ title: "Components/Walkthrough",
9
+ component: Walkthrough
10
+ });
8
11
 
9
- <Template let:args>
10
- <Tabs {...args} name="walkthrough">
11
- <TabItem
12
- order={0}
13
- id="tab-1"
14
- label="Image Tab"
15
- gradio={undefined}
16
- visible
17
- interactive
18
- elem_classes={["editor-tabitem"]}
19
- scale={0}
20
- >
21
- <img
22
- style="width: 200px;"
23
- alt="Cheetah"
24
- src="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
25
- />
26
- </TabItem>
27
- <TabItem
28
- order={1}
29
- id="tab-2"
30
- label="Hidden Tab"
31
- gradio={undefined}
32
- visible={false}
33
- interactive
34
- elem_classes={["editor-tabitem"]}
35
- scale={0}
36
- >
37
- Secret Tab
38
- </TabItem>
39
- <TabItem
40
- order={2}
41
- id="tab-3"
42
- label="Visible Tab"
43
- gradio={undefined}
44
- visible
45
- interactive
46
- elem_classes={["editor-tabitem"]}
47
- scale={0}
48
- >
49
- Visible Tab
50
- </TabItem>
51
- <TabItem
52
- order={3}
53
- id="tab-4"
54
- label="Visible Tab"
55
- gradio={undefined}
56
- visible
57
- interactive
58
- elem_classes={["editor-tabitem"]}
59
- scale={0}
60
- >
61
- Visible Tab
62
- </TabItem>
63
- </Tabs>
64
- </Template>
12
+ const walkthroughTabs = [
13
+ {
14
+ label: "Image Tab",
15
+ id: "tab-1",
16
+ elem_id: undefined,
17
+ visible: true,
18
+ interactive: true,
19
+ scale: null,
20
+ component_id: 1
21
+ },
22
+ {
23
+ label: "Hidden Tab",
24
+ id: "tab-2",
25
+ elem_id: undefined,
26
+ visible: false,
27
+ interactive: true,
28
+ scale: null,
29
+ component_id: 2
30
+ },
31
+ {
32
+ label: "Visible Tab 1",
33
+ id: "tab-3",
34
+ elem_id: undefined,
35
+ visible: true,
36
+ interactive: true,
37
+ scale: null,
38
+ component_id: 3
39
+ },
40
+ {
41
+ label: "Visible Tab 2",
42
+ id: "tab-4",
43
+ elem_id: undefined,
44
+ visible: true,
45
+ interactive: true,
46
+ scale: null,
47
+ component_id: 4
48
+ }
49
+ ];
65
50
 
66
- <Story name="Tabs Walkthrough" args={{}} />
51
+ const lastInvisibleTabs = [
52
+ {
53
+ label: "This is visible tab 1",
54
+ id: "tab-1",
55
+ elem_id: undefined,
56
+ visible: true,
57
+ interactive: true,
58
+ scale: null,
59
+ component_id: 1
60
+ },
61
+ {
62
+ label: "This is visible tab 2",
63
+ id: "tab-2",
64
+ elem_id: undefined,
65
+ visible: true,
66
+ interactive: true,
67
+ scale: null,
68
+ component_id: 2
69
+ },
70
+ {
71
+ label: "This is visible tab 3",
72
+ id: "tab-3",
73
+ elem_id: undefined,
74
+ visible: true,
75
+ interactive: true,
76
+ scale: null,
77
+ component_id: 3
78
+ },
79
+ {
80
+ label: "This is invisible tab 4",
81
+ id: "tab-4",
82
+ elem_id: undefined,
83
+ visible: false,
84
+ interactive: true,
85
+ scale: null,
86
+ component_id: 4
87
+ },
88
+ {
89
+ label: "This is invisible tab 5",
90
+ id: "tab-5",
91
+ elem_id: undefined,
92
+ visible: false,
93
+ interactive: true,
94
+ scale: null,
95
+ component_id: 5
96
+ }
97
+ ];
98
+ </script>
99
+
100
+ <Story
101
+ name="Tabs Walkthrough"
102
+ args={{ initial_tabs: walkthroughTabs, selected: "tab-1" }}
103
+ >
104
+ {#snippet template(args)}
105
+ <Walkthrough {...args}>
106
+ <div style="padding: 1rem;">
107
+ <img style="width: 200px;" alt="Cheetah" src={cheetah} />
108
+ </div>
109
+ </Walkthrough>
110
+ {/snippet}
111
+ </Story>
67
112
 
68
- <Story name="TabsLastInvisible" args={{}}>
69
- <Tabs selected="tab-1" gradio={undefined} name="walkthrough">
70
- <TabItem
71
- order={0}
72
- id="tab-1"
73
- label="This is visible tab 1"
74
- gradio={undefined}
75
- visible
76
- interactive
77
- scale={0}
78
- ></TabItem>
79
- <TabItem
80
- order={1}
81
- id="tab-2"
82
- label="This is visible tab 2"
83
- gradio={undefined}
84
- visible
85
- interactive
86
- scale={0}
87
- ></TabItem>
88
- <TabItem
89
- order={2}
90
- id="tab-3"
91
- label="This is visible tab 3"
92
- gradio={undefined}
93
- visible
94
- interactive
95
- scale={0}
96
- ></TabItem>
97
- <TabItem
98
- order={3}
99
- id="tab-4"
100
- label="This is invisible tab 4"
101
- gradio={undefined}
102
- visible={false}
103
- interactive
104
- scale={0}
105
- ></TabItem>
106
- <TabItem
107
- order={4}
108
- id="tab-5"
109
- label="This is invisible tab 5"
110
- gradio={undefined}
111
- visible={false}
112
- interactive
113
- scale={0}
114
- ></TabItem>
115
- </Tabs>
113
+ <Story
114
+ name="TabsLastInvisible"
115
+ args={{ initial_tabs: lastInvisibleTabs, selected: "tab-1" }}
116
+ >
117
+ {#snippet template(args)}
118
+ <Walkthrough {...args}>
119
+ <div style="padding: 1rem;">Walkthrough content goes here</div>
120
+ </Walkthrough>
121
+ {/snippet}
116
122
  </Story>
package/dist/Index.svelte CHANGED
@@ -7,24 +7,24 @@
7
7
  import Tabs from "./shared/Tabs.svelte";
8
8
  import Walkthrough from "./shared/Walkthrough.svelte";
9
9
  import type { TabsProps, TabsEvents } from "./types";
10
+ import { untrack } from "svelte";
10
11
 
11
12
  let props = $props();
12
13
  const gradio = new Gradio<TabsEvents, TabsProps>(props);
13
14
 
14
- let old_selected = $state(gradio.props.selected);
15
-
16
15
  $effect(() => {
17
- if (old_selected !== gradio.props.selected) {
18
- const i = gradio.props.initial_tabs.findIndex(
19
- (t) => t.id === gradio.props.selected
20
- );
21
- gradio.dispatch("gradio_tab_select", {
22
- value: gradio.props.initial_tabs[i].label,
23
- index: i,
24
- id: gradio.props.initial_tabs[i].id,
25
- component_id: gradio.props.initial_tabs[i].component_id
16
+ if (gradio.props.selected) {
17
+ untrack(() => {
18
+ const i = gradio.props.initial_tabs.findIndex(
19
+ (t) => t.id === gradio.props.selected
20
+ );
21
+ gradio.dispatch("gradio_tab_select", {
22
+ value: gradio.props.initial_tabs[i].label,
23
+ index: i,
24
+ id: gradio.props.initial_tabs[i].id,
25
+ component_id: gradio.props.initial_tabs[i].component_id
26
+ });
26
27
  });
27
- old_selected = gradio.props.selected;
28
28
  }
29
29
  });
30
30
  </script>
@@ -34,7 +34,7 @@
34
34
  visible={gradio.shared.visible}
35
35
  elem_id={gradio.shared.elem_id}
36
36
  elem_classes={gradio.shared.elem_classes}
37
- bind:selected={gradio.props.selected}
37
+ selected={gradio.props.selected}
38
38
  on:change={() => gradio.dispatch("change")}
39
39
  on:select={(e) => {
40
40
  gradio.dispatch("select", e.detail);
package/dist/types.d.ts CHANGED
@@ -11,4 +11,10 @@ export interface TabsProps {
11
11
  export interface TabsEvents {
12
12
  change: never;
13
13
  select: SelectData;
14
+ gradio_tab_select: {
15
+ value: string;
16
+ index: number;
17
+ id: string | number;
18
+ component_id: string | number;
19
+ };
14
20
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/tabs",
3
- "version": "0.5.4",
3
+ "version": "0.5.6",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -17,13 +17,13 @@
17
17
  "./package.json": "./package.json"
18
18
  },
19
19
  "dependencies": {
20
- "@gradio/utils": "^0.11.0"
20
+ "@gradio/utils": "^0.11.3"
21
21
  },
22
22
  "devDependencies": {
23
- "@gradio/preview": "^0.15.1"
23
+ "@gradio/preview": "^0.15.2"
24
24
  },
25
25
  "peerDependencies": {
26
- "svelte": "^5.43.4"
26
+ "svelte": "^5.48.0"
27
27
  },
28
28
  "repository": {
29
29
  "type": "git",
package/types.ts CHANGED
@@ -13,4 +13,10 @@ export interface TabsProps {
13
13
  export interface TabsEvents {
14
14
  change: never;
15
15
  select: SelectData;
16
+ gradio_tab_select: {
17
+ value: string;
18
+ index: number;
19
+ id: string | number;
20
+ component_id: string | number;
21
+ };
16
22
  }