@gradio/tabitem 0.4.0 → 0.4.2

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 +25 -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 +11 -4
  6. package/dist/shared/TabItem.svelte.d.ts +1 -0
  7. package/package.json +3 -3
  8. package/shared/TabItem.svelte +11 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @gradio/tabitem
2
2
 
3
+ ## 0.4.2
4
+
5
+ ### Dependency updates
6
+
7
+ - @gradio/tabs@0.4.2
8
+ - @gradio/utils@0.10.1
9
+ - @gradio/column@0.2.0
10
+
11
+ ## 0.4.1
12
+
13
+ ### Fixes
14
+
15
+ - [#10372](https://github.com/gradio-app/gradio/pull/10372) [`96bbde2`](https://github.com/gradio-app/gradio/commit/96bbde277e059f79bb2c9898576050e84dab147a) - Allow propogation of fill_height through Rows and Tabs, via scale. Thanks @aliabid94!
16
+
17
+ ### Dependency updates
18
+
19
+ - @gradio/tabs@0.4.1
20
+ - @gradio/column@0.2.0
21
+
22
+ ## 0.4.0
23
+
24
+ ### Dependency updates
25
+
26
+ - @gradio/column@0.2.0
27
+
3
28
  ## 0.4.0
4
29
 
5
30
  ### Features
package/Index.svelte CHANGED
@@ -18,6 +18,7 @@
18
18
  export let visible = true;
19
19
  export let interactive = true;
20
20
  export let order: number;
21
+ export let scale: number;
21
22
  </script>
22
23
 
23
24
  <TabItem
@@ -28,6 +29,7 @@
28
29
  {interactive}
29
30
  {id}
30
31
  {order}
32
+ {scale}
31
33
  on:select={({ detail }) => gradio?.dispatch("select", detail)}
32
34
  >
33
35
  <slot />
package/dist/Index.svelte CHANGED
@@ -10,6 +10,7 @@ export let gradio;
10
10
  export let visible = true;
11
11
  export let interactive = true;
12
12
  export let order;
13
+ export let scale;
13
14
  </script>
14
15
 
15
16
  <TabItem
@@ -20,6 +21,7 @@ export let order;
20
21
  {interactive}
21
22
  {id}
22
23
  {order}
24
+ {scale}
23
25
  on:select={({ detail }) => gradio?.dispatch("select", detail)}
24
26
  >
25
27
  <slot />
package/dist/Index.svelte.d.ts CHANGED
@@ -13,6 +13,7 @@ declare const __propDef: {
13
13
  visible?: boolean | undefined;
14
14
  interactive?: boolean | undefined;
15
15
  order: number;
16
+ scale: number;
16
17
  };
17
18
  events: {
18
19
  [evt: string]: CustomEvent<any>;
package/dist/shared/TabItem.svelte CHANGED
@@ -8,12 +8,13 @@ export let id = {};
8
8
  export let visible;
9
9
  export let interactive;
10
10
  export let order;
11
+ export let scale;
11
12
  const dispatch = createEventDispatcher();
12
13
  const { register_tab, unregister_tab, selected_tab, selected_tab_index } = getContext(TABS);
13
14
  let tab_index;
14
15
  $:
15
16
  tab_index = register_tab(
16
- { label, id, elem_id, visible, interactive },
17
+ { label, id, elem_id, visible, interactive, scale },
17
18
  order
18
19
  );
19
20
  onMount(() => {
@@ -27,10 +28,12 @@ $:
27
28
  <div
28
29
  id={elem_id}
29
30
  class="tabitem {elem_classes.join(' ')}"
30
- style:display={$selected_tab === id && visible ? "block" : "none"}
31
+ class:grow-children={scale >= 1}
32
+ style:display={$selected_tab === id && visible ? "flex" : "none"}
33
+ style:flex-grow={scale}
31
34
  role="tabpanel"
32
35
  >
33
- <Column>
36
+ <Column scale={scale >= 1 ? scale : null}>
34
37
  <slot />
35
38
  </Column>
36
39
  </div>
@@ -39,7 +42,8 @@ $:
39
42
 
40
43
  <style>
41
44
  div {
42
- display: block;
45
+ display: flex;
46
+ flex-direction: column;
43
47
  position: relative;
44
48
  border: none;
45
49
  border-radius: var(--radius-sm);
@@ -47,4 +51,7 @@ $:
47
51
  width: 100%;
48
52
  box-sizing: border-box;
49
53
  }
54
+ .grow-children > :global(.column > .column) {
55
+ flex-grow: 1;
56
+ }
50
57
  </style>
package/dist/shared/TabItem.svelte.d.ts CHANGED
@@ -9,6 +9,7 @@ declare const __propDef: {
9
9
  visible: boolean;
10
10
  interactive: boolean;
11
11
  order: number;
12
+ scale: number;
12
13
  };
13
14
  events: {
14
15
  select: CustomEvent<SelectData>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/tabitem",
3
- "version": "0.4.0",
3
+ "version": "0.4.2",
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/tabs": "^0.4.2",
19
20
  "@gradio/column": "^0.2.0",
20
- "@gradio/tabs": "^0.4.0",
21
- "@gradio/utils": "^0.10.0"
21
+ "@gradio/utils": "^0.10.1"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@gradio/preview": "^0.13.0"
package/shared/TabItem.svelte CHANGED
@@ -11,6 +11,7 @@
11
11
  export let visible: boolean;
12
12
  export let interactive: boolean;
13
13
  export let order: number;
14
+ export let scale: number;
14
15
 
15
16
  const dispatch = createEventDispatcher<{ select: SelectData }>();
16
17
 
@@ -20,7 +21,7 @@
20
21
  let tab_index: number;
21
22
 
22
23
  $: tab_index = register_tab(
23
- { label, id, elem_id, visible, interactive },
24
+ { label, id, elem_id, visible, interactive, scale },
24
25
  order
25
26
  );
26
27
 
@@ -36,10 +37,12 @@
36
37
  <div
37
38
  id={elem_id}
38
39
  class="tabitem {elem_classes.join(' ')}"
39
- style:display={$selected_tab === id && visible ? "block" : "none"}
40
+ class:grow-children={scale >= 1}
41
+ style:display={$selected_tab === id && visible ? "flex" : "none"}
42
+ style:flex-grow={scale}
40
43
  role="tabpanel"
41
44
  >
42
- <Column>
45
+ <Column scale={scale >= 1 ? scale : null}>
43
46
  <slot />
44
47
  </Column>
45
48
  </div>
@@ -48,7 +51,8 @@
48
51
 
49
52
  <style>
50
53
  div {
51
- display: block;
54
+ display: flex;
55
+ flex-direction: column;
52
56
  position: relative;
53
57
  border: none;
54
58
  border-radius: var(--radius-sm);
@@ -56,4 +60,7 @@
56
60
  width: 100%;
57
61
  box-sizing: border-box;
58
62
  }
63
+ .grow-children > :global(.column > .column) {
64
+ flex-grow: 1;
65
+ }
59
66
  </style>