@gradio/tabitem 0.3.5 → 0.4.0

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 +18 -0
  2. package/Index.svelte +2 -0
  3. package/dist/Index.svelte +2 -0
  4. package/dist/Index.svelte.d.ts +1 -0
  5. package/dist/shared/TabItem.svelte +10 -3
  6. package/dist/shared/TabItem.svelte.d.ts +1 -0
  7. package/package.json +3 -3
  8. package/shared/TabItem.svelte +10 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @gradio/tabitem
2
2
 
3
+ ## 0.4.0
4
+
5
+ ### Features
6
+
7
+ - [#10192](https://github.com/gradio-app/gradio/pull/10192) [`4fc7fb7`](https://github.com/gradio-app/gradio/commit/4fc7fb777c42af537e4af612423fa44029657d41) - Ensure components can be remounted with their previous data. Thanks @pngwn!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/utils@0.10.0
12
+ - @gradio/tabs@0.4.0
13
+ - @gradio/column@0.2.0
14
+
15
+ ## 0.3.5
16
+
17
+ ### Dependency updates
18
+
19
+ - @gradio/column@0.2.0
20
+
3
21
  ## 0.3.5
4
22
 
5
23
  ### Dependency updates
package/Index.svelte CHANGED
@@ -17,6 +17,7 @@
17
17
  | undefined;
18
18
  export let visible = true;
19
19
  export let interactive = true;
20
+ export let order: number;
20
21
  </script>
21
22
 
22
23
  <TabItem
@@ -26,6 +27,7 @@
26
27
  {visible}
27
28
  {interactive}
28
29
  {id}
30
+ {order}
29
31
  on:select={({ detail }) => gradio?.dispatch("select", detail)}
30
32
  >
31
33
  <slot />
package/dist/Index.svelte CHANGED
@@ -9,6 +9,7 @@ export let id;
9
9
  export let gradio;
10
10
  export let visible = true;
11
11
  export let interactive = true;
12
+ export let order;
12
13
  </script>
13
14
 
14
15
  <TabItem
@@ -18,6 +19,7 @@ export let interactive = true;
18
19
  {visible}
19
20
  {interactive}
20
21
  {id}
22
+ {order}
21
23
  on:select={({ detail }) => gradio?.dispatch("select", detail)}
22
24
  >
23
25
  <slot />
package/dist/Index.svelte.d.ts CHANGED
@@ -12,6 +12,7 @@ declare const __propDef: {
12
12
  }> | undefined;
13
13
  visible?: boolean | undefined;
14
14
  interactive?: boolean | undefined;
15
+ order: number;
15
16
  };
16
17
  events: {
17
18
  [evt: string]: CustomEvent<any>;
package/dist/shared/TabItem.svelte CHANGED
@@ -7,18 +7,23 @@ export let label;
7
7
  export let id = {};
8
8
  export let visible;
9
9
  export let interactive;
10
+ export let order;
10
11
  const dispatch = createEventDispatcher();
11
12
  const { register_tab, unregister_tab, selected_tab, selected_tab_index } = getContext(TABS);
12
13
  let tab_index;
13
14
  $:
14
- tab_index = register_tab({ label, id, elem_id, visible, interactive });
15
+ tab_index = register_tab(
16
+ { label, id, elem_id, visible, interactive },
17
+ order
18
+ );
15
19
  onMount(() => {
16
- return () => unregister_tab({ label, id, elem_id });
20
+ return () => unregister_tab({ label, id, elem_id }, order);
17
21
  });
18
22
  $:
19
23
  $selected_tab_index === tab_index && tick().then(() => dispatch("select", { value: label, index: tab_index }));
20
24
  </script>
21
25
 
26
+ <!-- {#if $selected_tab === id && visible} -->
22
27
  <div
23
28
  id={elem_id}
24
29
  class="tabitem {elem_classes.join(' ')}"
@@ -30,9 +35,11 @@ $:
30
35
  </Column>
31
36
  </div>
32
37
 
38
+ <!-- {/if} -->
39
+
33
40
  <style>
34
41
  div {
35
- display: flex;
42
+ display: block;
36
43
  position: relative;
37
44
  border: none;
38
45
  border-radius: var(--radius-sm);
package/dist/shared/TabItem.svelte.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const __propDef: {
8
8
  id?: (string | number | object) | undefined;
9
9
  visible: boolean;
10
10
  interactive: boolean;
11
+ order: number;
11
12
  };
12
13
  events: {
13
14
  select: CustomEvent<SelectData>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/tabitem",
3
- "version": "0.3.5",
3
+ "version": "0.4.0",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -17,8 +17,8 @@
17
17
  },
18
18
  "dependencies": {
19
19
  "@gradio/column": "^0.2.0",
20
- "@gradio/tabs": "^0.3.5",
21
- "@gradio/utils": "^0.9.0"
20
+ "@gradio/tabs": "^0.4.0",
21
+ "@gradio/utils": "^0.10.0"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@gradio/preview": "^0.13.0"
package/shared/TabItem.svelte CHANGED
@@ -10,6 +10,7 @@
10
10
  export let id: string | number | object = {};
11
11
  export let visible: boolean;
12
12
  export let interactive: boolean;
13
+ export let order: number;
13
14
 
14
15
  const dispatch = createEventDispatcher<{ select: SelectData }>();
15
16
 
@@ -18,16 +19,20 @@
18
19
 
19
20
  let tab_index: number;
20
21
 
21
- $: tab_index = register_tab({ label, id, elem_id, visible, interactive });
22
+ $: tab_index = register_tab(
23
+ { label, id, elem_id, visible, interactive },
24
+ order
25
+ );
22
26
 
23
27
  onMount(() => {
24
- return (): void => unregister_tab({ label, id, elem_id });
28
+ return (): void => unregister_tab({ label, id, elem_id }, order);
25
29
  });
26
30
 
27
31
  $: $selected_tab_index === tab_index &&
28
32
  tick().then(() => dispatch("select", { value: label, index: tab_index }));
29
33
  </script>
30
34
 
35
+ <!-- {#if $selected_tab === id && visible} -->
31
36
  <div
32
37
  id={elem_id}
33
38
  class="tabitem {elem_classes.join(' ')}"
@@ -39,9 +44,11 @@
39
44
  </Column>
40
45
  </div>
41
46
 
47
+ <!-- {/if} -->
48
+
42
49
  <style>
43
50
  div {
44
- display: flex;
51
+ display: block;
45
52
  position: relative;
46
53
  border: none;
47
54
  border-radius: var(--radius-sm);