@gradio/tabitem 0.6.0 → 0.6.1

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 +11 -0
  2. package/Index.svelte +2 -4
  3. package/dist/Index.svelte +1 -3
  4. package/dist/Index.svelte.d.ts +1 -1
  5. package/dist/shared/TabItem.svelte +12 -14
  6. package/dist/shared/TabItem.svelte.d.ts +1 -1
  7. package/package.json +4 -4
  8. package/shared/TabItem.svelte +13 -15
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @gradio/tabitem
2
2
 
3
+ ## 0.6.1
4
+
5
+ ### Fixes
6
+
7
+ - [#11784](https://github.com/gradio-app/gradio/pull/11784) [`d9dd3f5`](https://github.com/gradio-app/gradio/commit/d9dd3f54b7fb34cf7118e549d39fc63937ca3489) - Add "hidden" option to component's `visible` kwarg to render but visually hide the component. Thanks @pngwn!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/tabs@0.5.1
12
+ - @gradio/column@0.2.2
13
+
3
14
  ## 0.6.0
4
15
 
5
16
  ### Features
package/Index.svelte CHANGED
@@ -15,7 +15,7 @@
15
15
  select: SelectData;
16
16
  }>
17
17
  | undefined;
18
- export let visible = true;
18
+ export let visible: boolean | "hidden" = true;
19
19
  export let interactive = true;
20
20
  export let order: number;
21
21
  export let scale: number;
@@ -32,7 +32,5 @@
32
32
  {scale}
33
33
  on:select={({ detail }) => gradio?.dispatch("select", detail)}
34
34
  >
35
- {#if visible}
36
- <slot />
37
- {/if}
35
+ <slot />
38
36
  </TabItem>
package/dist/Index.svelte CHANGED
@@ -24,7 +24,5 @@ export let scale;
24
24
  {scale}
25
25
  on:select={({ detail }) => gradio?.dispatch("select", detail)}
26
26
  >
27
- {#if visible}
28
- <slot />
29
- {/if}
27
+ <slot />
30
28
  </TabItem>
package/dist/Index.svelte.d.ts CHANGED
@@ -10,7 +10,7 @@ declare const __propDef: {
10
10
  gradio: Gradio<{
11
11
  select: SelectData;
12
12
  }> | undefined;
13
- visible?: boolean;
13
+ visible?: boolean | "hidden";
14
14
  interactive?: boolean;
15
15
  order: number;
16
16
  scale: number;
package/dist/shared/TabItem.svelte CHANGED
@@ -22,20 +22,18 @@ onMount(() => {
22
22
  $: $selected_tab_index === tab_index && tick().then(() => dispatch("select", { value: label, index: tab_index }));
23
23
  </script>
24
24
 
25
- {#if $selected_tab === id && visible}
26
- <div
27
- id={elem_id}
28
- class="tabitem {elem_classes.join(' ')}"
29
- class:grow-children={scale >= 1}
30
- style:display={$selected_tab === id && visible ? "flex" : "none"}
31
- style:flex-grow={scale}
32
- role="tabpanel"
33
- >
34
- <Column scale={scale >= 1 ? scale : null}>
35
- <slot />
36
- </Column>
37
- </div>
38
- {/if}
25
+ <div
26
+ id={elem_id}
27
+ class="tabitem {elem_classes.join(' ')}"
28
+ class:grow-children={scale >= 1}
29
+ style:display={$selected_tab === id && visible !== false ? "flex" : "none"}
30
+ style:flex-grow={scale}
31
+ role="tabpanel"
32
+ >
33
+ <Column scale={scale >= 1 ? scale : null}>
34
+ <slot />
35
+ </Column>
36
+ </div>
39
37
 
40
38
  <style>
41
39
  div {
package/dist/shared/TabItem.svelte.d.ts CHANGED
@@ -6,7 +6,7 @@ declare const __propDef: {
6
6
  elem_classes?: string[];
7
7
  label: string;
8
8
  id?: string | number | object;
9
- visible: boolean;
9
+ visible: boolean | "hidden";
10
10
  interactive: boolean;
11
11
  order: number;
12
12
  scale: number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/tabitem",
3
- "version": "0.6.0",
3
+ "version": "0.6.1",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -16,9 +16,9 @@
16
16
  "./package.json": "./package.json"
17
17
  },
18
18
  "dependencies": {
19
- "@gradio/column": "^0.2.1",
20
- "@gradio/tabs": "^0.5.0",
21
- "@gradio/utils": "^0.10.2"
19
+ "@gradio/column": "^0.2.2",
20
+ "@gradio/utils": "^0.10.2",
21
+ "@gradio/tabs": "^0.5.1"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@gradio/preview": "^0.14.0"
package/shared/TabItem.svelte CHANGED
@@ -8,7 +8,7 @@
8
8
  export let elem_classes: string[] = [];
9
9
  export let label: string;
10
10
  export let id: string | number | object = {};
11
- export let visible: boolean;
11
+ export let visible: boolean | "hidden";
12
12
  export let interactive: boolean;
13
13
  export let order: number;
14
14
  export let scale: number;
@@ -33,20 +33,18 @@
33
33
  tick().then(() => dispatch("select", { value: label, index: tab_index }));
34
34
  </script>
35
35
 
36
- {#if $selected_tab === id && visible}
37
- <div
38
- id={elem_id}
39
- class="tabitem {elem_classes.join(' ')}"
40
- class:grow-children={scale >= 1}
41
- style:display={$selected_tab === id && visible ? "flex" : "none"}
42
- style:flex-grow={scale}
43
- role="tabpanel"
44
- >
45
- <Column scale={scale >= 1 ? scale : null}>
46
- <slot />
47
- </Column>
48
- </div>
49
- {/if}
36
+ <div
37
+ id={elem_id}
38
+ class="tabitem {elem_classes.join(' ')}"
39
+ class:grow-children={scale >= 1}
40
+ style:display={$selected_tab === id && visible !== false ? "flex" : "none"}
41
+ style:flex-grow={scale}
42
+ role="tabpanel"
43
+ >
44
+ <Column scale={scale >= 1 ? scale : null}>
45
+ <slot />
46
+ </Column>
47
+ </div>
50
48
 
51
49
  <style>
52
50
  div {