@gradio/core 0.10.1 → 0.11.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 (5) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/src/Embed.svelte +26 -10
  3. package/dist/src/Embed.svelte.d.ts +1 -0
  4. package/package.json +49 -48
  5. package/src/Embed.svelte +27 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # @gradio/core
2
2
 
3
+ ## 0.11.0
4
+
5
+ ### Features
6
+
7
+ - [#10569](https://github.com/gradio-app/gradio/pull/10569) [`bd4895a`](https://github.com/gradio-app/gradio/commit/bd4895a95a29fa1f0d12fefde26a82a1d60954e9) - Update Lite to support multi-page apps. Thanks @whitphx!
8
+ - [#10630](https://github.com/gradio-app/gradio/pull/10630) [`77432c7`](https://github.com/gradio-app/gradio/commit/77432c7fa84c56ef76364bf23f4273e889a94a71) - gradio sketch - UI based gradio skeleton builder. Thanks @aliabid94!
9
+
10
+ ### Fixes
11
+
12
+ - [#10622](https://github.com/gradio-app/gradio/pull/10622) [`b505df0`](https://github.com/gradio-app/gradio/commit/b505df0b883d119d4660c25519497c4d86eea8d5) - Fix fill_width. Thanks @aliabid94!
13
+
14
+ ## 0.10.1
15
+
16
+ ### Dependency updates
17
+
18
+ - @gradio/image@0.21.2
19
+ - @gradio/upload@0.15.2
20
+ - @gradio/code@0.10.18
21
+ - @gradio/paramviewer@0.7.2
22
+ - @gradio/statustracker@0.10.4
23
+ - @gradio/video@0.14.2
24
+ - @gradio/atoms@0.13.3
25
+ - @gradio/gallery@0.15.7
26
+ - @gradio/plot@0.9.9
27
+ - @gradio/button@0.4.7
28
+ - @gradio/column@0.2.0
29
+ - @gradio/textbox@0.10.4
30
+ - @gradio/checkbox@0.4.14
31
+ - @gradio/file@0.12.7
32
+
3
33
  ## 0.10.1
4
34
 
5
35
  ### Features
package/dist/src/Embed.svelte CHANGED
@@ -1,10 +1,12 @@
1
- <script>import space_logo from "./images/spaces.svg";
1
+ <script>import { getContext } from "svelte";
2
+ import space_logo from "./images/spaces.svg";
2
3
  import { _ } from "svelte-i18n";
3
4
  export let wrapper;
4
5
  export let version;
5
6
  export let initial_height;
6
7
  export let fill_width;
7
8
  export let is_embed;
9
+ export let is_lite;
8
10
  export let space;
9
11
  export let display;
10
12
  export let info;
@@ -12,6 +14,7 @@ export let loaded;
12
14
  export let pages = [];
13
15
  export let current_page = "";
14
16
  export let root;
17
+ const set_page = getContext("set_lite_page");
15
18
  </script>
16
19
 
17
20
  <div
@@ -28,17 +31,28 @@ export let root;
28
31
  <div class="nav-holder">
29
32
  <nav class="fillable" class:fill_width>
30
33
  {#each pages as [route, label], i}
31
- <a
32
- href="{root}/{route}"
33
- class:active={route === current_page}
34
- data-sveltekit-reload
35
- >{label}
36
- </a>
34
+ {#if is_lite}
35
+ <button
36
+ class:active={route === current_page}
37
+ on:click={(e) => {
38
+ e.preventDefault();
39
+ set_page?.(route);
40
+ }}
41
+ >{label}
42
+ </button>
43
+ {:else}
44
+ <a
45
+ href={`${root}/${route}`}
46
+ class:active={route === current_page}
47
+ data-sveltekit-reload
48
+ >{label}
49
+ </a>
50
+ {/if}
37
51
  {/each}
38
52
  </nav>
39
53
  </div>
40
54
  {/if}
41
- <main class="fillable" class:app={!display && !is_embed}>
55
+ <main class="fillable" class:fill_width class:app={!display && !is_embed}>
42
56
  <slot />
43
57
  <div>
44
58
  {#if display && space && info}
@@ -79,14 +93,16 @@ export let root;
79
93
  margin: 0 auto;
80
94
  padding: 0 var(--size-8);
81
95
  }
82
- nav a {
96
+ nav a,
97
+ button {
83
98
  padding: var(--size-1) var(--size-2);
84
99
  border-radius: var(--block-radius);
85
100
  border-width: var(--block-border-width);
86
101
  border-color: transparent;
87
102
  color: var(--body-text-color-subdued);
88
103
  }
89
- nav a.active {
104
+ nav a.active,
105
+ button.active {
90
106
  color: var(--body-text-color);
91
107
  border-color: var(--block-border-color);
92
108
  background-color: var(--block-background-fill);
package/dist/src/Embed.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ declare const __propDef: {
6
6
  initial_height: string;
7
7
  fill_width: boolean;
8
8
  is_embed: boolean;
9
+ is_lite: boolean;
9
10
  space: string | null;
10
11
  display: boolean;
11
12
  info: boolean;
package/package.json CHANGED
@@ -1,66 +1,67 @@
1
1
  {
2
2
  "name": "@gradio/core",
3
- "version": "0.10.1",
3
+ "version": "0.11.0",
4
4
  "type": "module",
5
5
  "devDependencies": {
6
- "@gradio/accordion": "^0.5.7",
7
- "@gradio/annotatedimage": "^0.9.7",
8
- "@gradio/audio": "^0.17.1",
9
- "@gradio/atoms": "^0.13.2",
10
- "@gradio/button": "^0.4.6",
11
- "@gradio/box": "^0.2.11",
12
- "@gradio/chatbot": "^0.23.0",
13
- "@gradio/checkbox": "^0.4.13",
14
- "@gradio/checkboxgroup": "^0.6.13",
6
+ "@gradio/accordion": "^0.5.8",
7
+ "@gradio/annotatedimage": "^0.9.8",
8
+ "@gradio/atoms": "^0.13.3",
9
+ "@gradio/audio": "^0.17.2",
10
+ "@gradio/box": "^0.2.12",
11
+ "@gradio/chatbot": "^0.23.2",
12
+ "@gradio/checkbox": "^0.4.14",
13
+ "@gradio/checkboxgroup": "^0.6.14",
14
+ "@gradio/button": "^0.4.7",
15
15
  "@gradio/client": "^1.12.0",
16
- "@gradio/colorpicker": "^0.4.13",
17
- "@gradio/code": "^0.10.17",
16
+ "@gradio/code": "^0.10.18",
17
+ "@gradio/colorpicker": "^0.4.14",
18
18
  "@gradio/column": "^0.2.0",
19
- "@gradio/dataframe": "^0.16.1",
20
- "@gradio/dataset": "^0.4.6",
21
- "@gradio/downloadbutton": "^0.3.6",
22
- "@gradio/datetime": "^0.3.5",
23
- "@gradio/dropdown": "^0.9.11",
24
- "@gradio/fallback": "^0.4.13",
25
- "@gradio/file": "^0.12.6",
26
- "@gradio/fileexplorer": "^0.5.17",
27
- "@gradio/gallery": "^0.15.6",
28
- "@gradio/form": "^0.2.11",
19
+ "@gradio/dataset": "^0.4.7",
20
+ "@gradio/dataframe": "^0.16.2",
21
+ "@gradio/datetime": "^0.3.6",
22
+ "@gradio/downloadbutton": "^0.3.7",
23
+ "@gradio/dropdown": "^0.9.12",
24
+ "@gradio/file": "^0.12.7",
25
+ "@gradio/fallback": "^0.4.14",
26
+ "@gradio/fileexplorer": "^0.5.18",
27
+ "@gradio/form": "^0.2.12",
28
+ "@gradio/gallery": "^0.15.7",
29
29
  "@gradio/group": "^0.2.0",
30
- "@gradio/highlightedtext": "^0.8.13",
31
- "@gradio/html": "^0.6.4",
32
- "@gradio/image": "^0.21.1",
30
+ "@gradio/highlightedtext": "^0.8.14",
33
31
  "@gradio/icons": "^0.10.0",
34
- "@gradio/imageeditor": "^0.12.8",
35
- "@gradio/json": "^0.5.13",
36
- "@gradio/label": "^0.5.5",
37
- "@gradio/model3d": "^0.14.1",
32
+ "@gradio/html": "^0.6.5",
33
+ "@gradio/image": "^0.21.2",
34
+ "@gradio/imageeditor": "^0.12.9",
35
+ "@gradio/json": "^0.5.14",
36
+ "@gradio/label": "^0.5.6",
38
37
  "@gradio/browserstate": "^0.3.1",
39
- "@gradio/markdown": "^0.13.3",
40
- "@gradio/multimodaltextbox": "^0.9.7",
41
- "@gradio/nativeplot": "^0.5.7",
42
- "@gradio/paramviewer": "^0.7.1",
43
- "@gradio/number": "^0.5.13",
44
- "@gradio/radio": "^0.6.13",
45
- "@gradio/plot": "^0.9.8",
46
- "@gradio/sidebar": "^0.1.3",
38
+ "@gradio/model3d": "^0.14.2",
39
+ "@gradio/markdown": "^0.13.4",
40
+ "@gradio/nativeplot": "^0.5.8",
41
+ "@gradio/multimodaltextbox": "^0.9.8",
42
+ "@gradio/number": "^0.5.14",
43
+ "@gradio/paramviewer": "^0.7.2",
44
+ "@gradio/radio": "^0.6.14",
47
45
  "@gradio/row": "^0.2.1",
48
- "@gradio/simpledropdown": "^0.3.13",
49
- "@gradio/simpleimage": "^0.8.17",
50
- "@gradio/simpletextbox": "^0.3.13",
51
- "@gradio/slider": "^0.6.1",
52
- "@gradio/statustracker": "^0.10.3",
53
- "@gradio/tabitem": "^0.4.2",
46
+ "@gradio/sidebar": "^0.1.5",
47
+ "@gradio/plot": "^0.9.9",
48
+ "@gradio/simpledropdown": "^0.3.14",
49
+ "@gradio/simpleimage": "^0.8.18",
50
+ "@gradio/sketchbox": "^0.6.0",
51
+ "@gradio/simpletextbox": "^0.3.14",
52
+ "@gradio/slider": "^0.6.2",
53
+ "@gradio/statustracker": "^0.10.4",
54
54
  "@gradio/state": "^0.1.2",
55
+ "@gradio/tabitem": "^0.4.2",
55
56
  "@gradio/tabs": "^0.4.2",
57
+ "@gradio/textbox": "^0.10.4",
56
58
  "@gradio/theme": "^0.4.0",
57
- "@gradio/uploadbutton": "^0.8.6",
58
- "@gradio/textbox": "^0.10.3",
59
+ "@gradio/upload": "^0.15.2",
59
60
  "@gradio/timer": "^0.4.4",
60
- "@gradio/upload": "^0.15.1",
61
+ "@gradio/uploadbutton": "^0.8.7",
61
62
  "@gradio/utils": "^0.10.1",
62
- "@gradio/video": "^0.14.1",
63
- "@gradio/wasm": "^0.17.3"
63
+ "@gradio/wasm": "^0.17.3",
64
+ "@gradio/video": "^0.14.2"
64
65
  },
65
66
  "msw": {
66
67
  "workerDirectory": "public"
package/src/Embed.svelte CHANGED
@@ -1,4 +1,5 @@
1
1
  <script lang="ts">
2
+ import { getContext } from "svelte";
2
3
  import space_logo from "./images/spaces.svg";
3
4
  import { _ } from "svelte-i18n";
4
5
  export let wrapper: HTMLDivElement;
@@ -6,6 +7,7 @@
6
7
  export let initial_height: string;
7
8
  export let fill_width: boolean;
8
9
  export let is_embed: boolean;
10
+ export let is_lite: boolean;
9
11
 
10
12
  export let space: string | null;
11
13
  export let display: boolean;
@@ -14,6 +16,9 @@
14
16
  export let pages: [string, string][] = [];
15
17
  export let current_page = "";
16
18
  export let root: string;
19
+
20
+ const set_page: ((page: string) => void) | undefined =
21
+ getContext("set_lite_page");
17
22
  </script>
18
23
 
19
24
  <div
@@ -30,17 +35,28 @@
30
35
  <div class="nav-holder">
31
36
  <nav class="fillable" class:fill_width>
32
37
  {#each pages as [route, label], i}
33
- <a
34
- href="{root}/{route}"
35
- class:active={route === current_page}
36
- data-sveltekit-reload
37
- >{label}
38
- </a>
38
+ {#if is_lite}
39
+ <button
40
+ class:active={route === current_page}
41
+ on:click={(e) => {
42
+ e.preventDefault();
43
+ set_page?.(route);
44
+ }}
45
+ >{label}
46
+ </button>
47
+ {:else}
48
+ <a
49
+ href={`${root}/${route}`}
50
+ class:active={route === current_page}
51
+ data-sveltekit-reload
52
+ >{label}
53
+ </a>
54
+ {/if}
39
55
  {/each}
40
56
  </nav>
41
57
  </div>
42
58
  {/if}
43
- <main class="fillable" class:app={!display && !is_embed}>
59
+ <main class="fillable" class:fill_width class:app={!display && !is_embed}>
44
60
  <slot />
45
61
  <div>
46
62
  {#if display && space && info}
@@ -81,14 +97,16 @@
81
97
  margin: 0 auto;
82
98
  padding: 0 var(--size-8);
83
99
  }
84
- nav a {
100
+ nav a,
101
+ button {
85
102
  padding: var(--size-1) var(--size-2);
86
103
  border-radius: var(--block-radius);
87
104
  border-width: var(--block-border-width);
88
105
  border-color: transparent;
89
106
  color: var(--body-text-color-subdued);
90
107
  }
91
- nav a.active {
108
+ nav a.active,
109
+ button.active {
92
110
  color: var(--body-text-color);
93
111
  border-color: var(--block-border-color);
94
112
  background-color: var(--block-background-fill);