@gradio/code 0.10.0-beta.4 → 0.10.0-beta.5

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 (14) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/Index.svelte +9 -3
  3. package/dist/Index.svelte +9 -3
  4. package/dist/Index.svelte.d.ts +2 -0
  5. package/dist/shared/Code.svelte +12 -4
  6. package/dist/shared/Code.svelte.d.ts +2 -1
  7. package/dist/shared/Copy.svelte +2 -34
  8. package/dist/shared/Download.svelte +8 -36
  9. package/dist/shared/Widgets.svelte +3 -25
  10. package/package.json +7 -7
  11. package/shared/Code.svelte +12 -4
  12. package/shared/Copy.svelte +2 -34
  13. package/shared/Download.svelte +8 -36
  14. package/shared/Widgets.svelte +3 -25
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @gradio/code
2
2
 
3
+ ## 0.10.0-beta.5
4
+
5
+ ### Features
6
+
7
+ - [#9450](https://github.com/gradio-app/gradio/pull/9450) [`991883e`](https://github.com/gradio-app/gradio/commit/991883e217dc0a3512b3ae3245378812f373b8db) - Improve `gr.Code`. Thanks @hannahblair!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/upload@0.13.0-beta.5
12
+ - @gradio/statustracker@0.8.0-beta.3
13
+ - @gradio/icons@0.8.0-beta.3
14
+ - @gradio/atoms@0.9.0-beta.3
15
+
3
16
  ## 0.10.0-beta.4
4
17
 
5
18
  ### Dependency updates
package/Index.svelte CHANGED
@@ -29,7 +29,7 @@
29
29
  export let value_is_output = false;
30
30
  export let language = "";
31
31
  export let lines = 5;
32
- export let max_lines = 20;
32
+ export let max_lines: number | undefined = undefined;
33
33
  export let elem_id = "";
34
34
  export let elem_classes: string[] = [];
35
35
  export let visible = true;
@@ -37,6 +37,8 @@
37
37
  export let show_label = true;
38
38
  export let loading_status: LoadingStatus;
39
39
  export let scale: number | null = null;
40
+ export let min_width: number | undefined = undefined;
41
+ export let wrap_lines = false;
40
42
 
41
43
  export let interactive: boolean;
42
44
 
@@ -55,13 +57,14 @@
55
57
  </script>
56
58
 
57
59
  <Block
58
- height={"fit-content"}
60
+ height={max_lines && "fit-content"}
59
61
  variant={"solid"}
60
62
  padding={false}
61
63
  {elem_id}
62
64
  {elem_classes}
63
65
  {visible}
64
66
  {scale}
67
+ {min_width}
65
68
  >
66
69
  <StatusTracker
67
70
  autoscroll={gradio.autoscroll}
@@ -70,7 +73,9 @@
70
73
  on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
71
74
  />
72
75
 
73
- <BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
76
+ {#if show_label}
77
+ <BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
78
+ {/if}
74
79
 
75
80
  {#if !value && !interactive}
76
81
  <Empty unpadded_box={true} size="large">
@@ -85,6 +90,7 @@
85
90
  {lines}
86
91
  {max_lines}
87
92
  {dark_mode}
93
+ {wrap_lines}
88
94
  readonly={!interactive}
89
95
  on:blur={() => gradio.dispatch("blur")}
90
96
  on:focus={() => gradio.dispatch("focus")}
package/dist/Index.svelte CHANGED
@@ -16,7 +16,7 @@ export let value = "";
16
16
  export let value_is_output = false;
17
17
  export let language = "";
18
18
  export let lines = 5;
19
- export let max_lines = 20;
19
+ export let max_lines = void 0;
20
20
  export let elem_id = "";
21
21
  export let elem_classes = [];
22
22
  export let visible = true;
@@ -24,6 +24,8 @@ export let label = gradio.i18n("code.code");
24
24
  export let show_label = true;
25
25
  export let loading_status;
26
26
  export let scale = null;
27
+ export let min_width = void 0;
28
+ export let wrap_lines = false;
27
29
  export let interactive;
28
30
  let dark_mode = gradio.theme === "dark";
29
31
  function handle_change() {
@@ -40,13 +42,14 @@ $:
40
42
  </script>
41
43
 
42
44
  <Block
43
- height={"fit-content"}
45
+ height={max_lines && "fit-content"}
44
46
  variant={"solid"}
45
47
  padding={false}
46
48
  {elem_id}
47
49
  {elem_classes}
48
50
  {visible}
49
51
  {scale}
52
+ {min_width}
50
53
  >
51
54
  <StatusTracker
52
55
  autoscroll={gradio.autoscroll}
@@ -55,7 +58,9 @@ $:
55
58
  on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
56
59
  />
57
60
 
58
- <BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
61
+ {#if show_label}
62
+ <BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
63
+ {/if}
59
64
 
60
65
  {#if !value && !interactive}
61
66
  <Empty unpadded_box={true} size="large">
@@ -70,6 +75,7 @@ $:
70
75
  {lines}
71
76
  {max_lines}
72
77
  {dark_mode}
78
+ {wrap_lines}
73
79
  readonly={!interactive}
74
80
  on:blur={() => gradio.dispatch("blur")}
75
81
  on:focus={() => gradio.dispatch("focus")}
package/dist/Index.svelte.d.ts CHANGED
@@ -27,6 +27,8 @@ declare const __propDef: {
27
27
  show_label?: boolean | undefined;
28
28
  loading_status: LoadingStatus;
29
29
  scale?: (number | null) | undefined;
30
+ min_width?: number | undefined;
31
+ wrap_lines?: boolean | undefined;
30
32
  interactive: boolean;
31
33
  };
32
34
  events: {
package/dist/shared/Code.svelte CHANGED
@@ -17,11 +17,12 @@ export let dark_mode;
17
17
  export let basic = true;
18
18
  export let language;
19
19
  export let lines = 5;
20
- export let max_lines = 20;
20
+ export let max_lines = null;
21
21
  export let extensions = [];
22
22
  export let use_tab = true;
23
23
  export let readonly = false;
24
24
  export let placeholder = void 0;
25
+ export let wrap_lines = false;
25
26
  const dispatch = createEventDispatcher();
26
27
  let lang_extension;
27
28
  let element;
@@ -94,7 +95,8 @@ function resize(_view) {
94
95
  }
95
96
  const minLines = lines == 1 ? 1 : lines + 1;
96
97
  scroller.style.minHeight = `calc(${lineHeight} * ${minLines})`;
97
- scroller.style.maxHeight = `calc(${lineHeight} * ${max_lines + 1})`;
98
+ if (max_lines)
99
+ scroller.style.maxHeight = `calc(${lineHeight} * ${max_lines + 1})`;
98
100
  }
99
101
  function handle_change(vu) {
100
102
  if (vu.docChanged) {
@@ -132,6 +134,9 @@ const FontTheme = EditorView.theme({
132
134
  fontFamily: "var(--font-mono)",
133
135
  minHeight: "100%"
134
136
  },
137
+ ".cm-gutterElement": {
138
+ marginRight: "var(--spacing-xs)"
139
+ },
135
140
  ".cm-gutters": {
136
141
  marginRight: "1px",
137
142
  borderRight: "1px solid var(--border-color-primary)",
@@ -173,6 +178,9 @@ function get_base_extensions(basic2, use_tab2, placeholder2, readonly2, lang) {
173
178
  extensions2.push(lang);
174
179
  }
175
180
  extensions2.push(EditorView.updateListener.of(handle_change));
181
+ if (wrap_lines) {
182
+ extensions2.push(EditorView.lineWrapping);
183
+ }
176
184
  return extensions2;
177
185
  }
178
186
  function get_theme() {
@@ -203,13 +211,13 @@ onMount(() => {
203
211
  .wrap {
204
212
  display: flex;
205
213
  flex-direction: column;
206
- flex-flow: column;
214
+ flex-grow: 1;
207
215
  margin: 0;
208
216
  padding: 0;
209
217
  height: 100%;
210
218
  }
211
219
  .codemirror-wrapper {
212
- height: 100%;
220
+ flex-grow: 1;
213
221
  overflow: auto;
214
222
  }
215
223
 
package/dist/shared/Code.svelte.d.ts CHANGED
@@ -8,11 +8,12 @@ declare const __propDef: {
8
8
  basic?: boolean | undefined;
9
9
  language: string;
10
10
  lines?: number | undefined;
11
- max_lines?: number | undefined;
11
+ max_lines?: (number | null) | undefined;
12
12
  extensions?: Extension[] | undefined;
13
13
  use_tab?: boolean | undefined;
14
14
  readonly?: boolean | undefined;
15
15
  placeholder?: string | HTMLElement | null | undefined;
16
+ wrap_lines?: boolean | undefined;
16
17
  };
17
18
  events: {
18
19
  change: CustomEvent<string>;
package/dist/shared/Copy.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>import { onDestroy } from "svelte";
2
- import { fade } from "svelte/transition";
3
2
  import { Copy, Check } from "@gradio/icons";
3
+ import { IconButton } from "@gradio/atoms";
4
4
  let copied = false;
5
5
  export let value;
6
6
  let timer;
@@ -24,36 +24,4 @@ onDestroy(() => {
24
24
  });
25
25
  </script>
26
26
 
27
- <button
28
- on:click={handle_copy}
29
- title="Copy message"
30
- class:copied
31
- aria-label={copied ? "Message copied" : "Copy Message"}
32
- >
33
- {#if !copied}
34
- <Copy />
35
- {:else}
36
- <span class="check">
37
- <Check />
38
- </span>
39
- {/if}
40
- </button>
41
-
42
- <style>
43
- button {
44
- position: relative;
45
- cursor: pointer;
46
- padding: 5px;
47
- width: 22px;
48
- height: 22px;
49
- }
50
-
51
- .check {
52
- top: 0;
53
- right: 0;
54
- z-index: var(--layer-top);
55
- background: var(--block-label-background-fill);
56
- width: 100%;
57
- height: 100%;
58
- }
59
- </style>
27
+ <IconButton Icon={copied ? Check : Copy} on:click={handle_copy} />
package/dist/shared/Download.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script>import { onDestroy } from "svelte";
2
- import { fade } from "svelte/transition";
3
2
  import { Download, Check } from "@gradio/icons";
4
3
  import { DownloadLink } from "@gradio/wasm/svelte";
4
+ import { IconButton } from "@gradio/atoms";
5
5
  export let value;
6
6
  export let language;
7
7
  $:
@@ -48,38 +48,10 @@ onDestroy(() => {
48
48
  });
49
49
  </script>
50
50
 
51
- <div class="container">
52
- <DownloadLink
53
- download="file.{ext}"
54
- href={download_value}
55
- on:click={copy_feedback}
56
- >
57
- <Download />
58
- {#if copied}
59
- <span class="check" transition:fade><Check /></span>
60
- {/if}
61
- </DownloadLink>
62
- </div>
63
-
64
- <style>
65
- .container {
66
- position: relative;
67
- cursor: pointer;
68
- padding: 5px;
69
-
70
- width: 22px;
71
- height: 22px;
72
- }
73
-
74
- .check {
75
- position: absolute;
76
- top: 0;
77
- right: 0;
78
- z-index: var(--layer-top);
79
- background: var(--background-fill-primary);
80
- padding: var(--size-1);
81
- width: 100%;
82
- height: 100%;
83
- color: var(--body-text-color);
84
- }
85
- </style>
51
+ <DownloadLink
52
+ download="file.{ext}"
53
+ href={download_value}
54
+ on:click={copy_feedback}
55
+ >
56
+ <IconButton Icon={copied ? Check : Download} />
57
+ </DownloadLink>
package/dist/shared/Widgets.svelte CHANGED
@@ -1,33 +1,11 @@
1
1
  <script>import Copy from "./Copy.svelte";
2
2
  import Download from "./Download.svelte";
3
+ import { IconButtonWrapper } from "@gradio/atoms";
3
4
  export let value;
4
5
  export let language;
5
6
  </script>
6
7
 
7
- <div>
8
+ <IconButtonWrapper>
8
9
  <Download {value} {language} />
9
10
  <Copy {value} />
10
- </div>
11
-
12
- <style>
13
- div {
14
- display: flex;
15
- position: absolute;
16
- top: var(--block-label-margin);
17
- right: var(--block-label-margin);
18
- align-items: center;
19
-
20
- z-index: var(--layer-2);
21
- transition: 150ms;
22
- box-shadow: var(--shadow-drop);
23
- border: 1px solid var(--border-color-primary);
24
- border-top: none;
25
- border-right: none;
26
- border-radius: var(--block-label-right-radius);
27
- background: var(--block-label-background-fill);
28
- overflow: hidden;
29
- color: var(--block-label-text-color);
30
- font: var(--font);
31
- font-size: var(--button-small-text-size);
32
- }
33
- </style>
11
+ </IconButtonWrapper>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/code",
3
- "version": "0.10.0-beta.4",
3
+ "version": "0.10.0-beta.5",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -27,12 +27,12 @@
27
27
  "cm6-theme-basic-dark": "^0.2.0",
28
28
  "cm6-theme-basic-light": "^0.2.0",
29
29
  "codemirror": "^6.0.1",
30
- "@gradio/icons": "^0.8.0-beta.2",
31
- "@gradio/statustracker": "^0.8.0-beta.2",
32
- "@gradio/upload": "^0.13.0-beta.4",
33
- "@gradio/atoms": "^0.9.0-beta.2",
34
- "@gradio/wasm": "^0.14.0-beta.3",
35
- "@gradio/utils": "^0.7.0-beta.2"
30
+ "@gradio/atoms": "^0.9.0-beta.3",
31
+ "@gradio/icons": "^0.8.0-beta.3",
32
+ "@gradio/statustracker": "^0.8.0-beta.3",
33
+ "@gradio/utils": "^0.7.0-beta.2",
34
+ "@gradio/upload": "^0.13.0-beta.5",
35
+ "@gradio/wasm": "^0.14.0-beta.3"
36
36
  },
37
37
  "main_changeset": true,
38
38
  "main": "./Index.svelte",
package/shared/Code.svelte CHANGED
@@ -20,11 +20,12 @@
20
20
  export let basic = true;
21
21
  export let language: string;
22
22
  export let lines = 5;
23
- export let max_lines = 20;
23
+ export let max_lines: number | null = null;
24
24
  export let extensions: Extension[] = [];
25
25
  export let use_tab = true;
26
26
  export let readonly = false;
27
27
  export let placeholder: string | HTMLElement | null | undefined = undefined;
28
+ export let wrap_lines = false;
28
29
 
29
30
  const dispatch = createEventDispatcher<{
30
31
  change: string;
@@ -109,7 +110,8 @@
109
110
 
110
111
  const minLines = lines == 1 ? 1 : lines + 1;
111
112
  scroller.style.minHeight = `calc(${lineHeight} * ${minLines})`;
112
- scroller.style.maxHeight = `calc(${lineHeight} * ${max_lines + 1})`;
113
+ if (max_lines)
114
+ scroller.style.maxHeight = `calc(${lineHeight} * ${max_lines + 1})`;
113
115
  }
114
116
 
115
117
  function handle_change(vu: ViewUpdate): void {
@@ -150,6 +152,9 @@
150
152
  fontFamily: "var(--font-mono)",
151
153
  minHeight: "100%"
152
154
  },
155
+ ".cm-gutterElement": {
156
+ marginRight: "var(--spacing-xs)"
157
+ },
153
158
  ".cm-gutters": {
154
159
  marginRight: "1px",
155
160
  borderRight: "1px solid var(--border-color-primary)",
@@ -201,6 +206,9 @@
201
206
  }
202
207
 
203
208
  extensions.push(EditorView.updateListener.of(handle_change));
209
+ if (wrap_lines) {
210
+ extensions.push(EditorView.lineWrapping);
211
+ }
204
212
  return extensions;
205
213
  }
206
214
 
@@ -235,13 +243,13 @@
235
243
  .wrap {
236
244
  display: flex;
237
245
  flex-direction: column;
238
- flex-flow: column;
246
+ flex-grow: 1;
239
247
  margin: 0;
240
248
  padding: 0;
241
249
  height: 100%;
242
250
  }
243
251
  .codemirror-wrapper {
244
- height: 100%;
252
+ flex-grow: 1;
245
253
  overflow: auto;
246
254
  }
247
255
 
package/shared/Copy.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { onDestroy } from "svelte";
3
- import { fade } from "svelte/transition";
4
3
  import { Copy, Check } from "@gradio/icons";
4
+ import { IconButton } from "@gradio/atoms";
5
5
 
6
6
  let copied = false;
7
7
  export let value: string;
@@ -27,36 +27,4 @@
27
27
  });
28
28
  </script>
29
29
 
30
- <button
31
- on:click={handle_copy}
32
- title="Copy message"
33
- class:copied
34
- aria-label={copied ? "Message copied" : "Copy Message"}
35
- >
36
- {#if !copied}
37
- <Copy />
38
- {:else}
39
- <span class="check">
40
- <Check />
41
- </span>
42
- {/if}
43
- </button>
44
-
45
- <style>
46
- button {
47
- position: relative;
48
- cursor: pointer;
49
- padding: 5px;
50
- width: 22px;
51
- height: 22px;
52
- }
53
-
54
- .check {
55
- top: 0;
56
- right: 0;
57
- z-index: var(--layer-top);
58
- background: var(--block-label-background-fill);
59
- width: 100%;
60
- height: 100%;
61
- }
62
- </style>
30
+ <IconButton Icon={copied ? Check : Copy} on:click={handle_copy} />
package/shared/Download.svelte CHANGED
@@ -1,8 +1,8 @@
1
1
  <script lang="ts">
2
2
  import { onDestroy } from "svelte";
3
- import { fade } from "svelte/transition";
4
3
  import { Download, Check } from "@gradio/icons";
5
4
  import { DownloadLink } from "@gradio/wasm/svelte";
5
+ import { IconButton } from "@gradio/atoms";
6
6
 
7
7
  export let value: string;
8
8
  export let language: string;
@@ -53,38 +53,10 @@
53
53
  });
54
54
  </script>
55
55
 
56
- <div class="container">
57
- <DownloadLink
58
- download="file.{ext}"
59
- href={download_value}
60
- on:click={copy_feedback}
61
- >
62
- <Download />
63
- {#if copied}
64
- <span class="check" transition:fade><Check /></span>
65
- {/if}
66
- </DownloadLink>
67
- </div>
68
-
69
- <style>
70
- .container {
71
- position: relative;
72
- cursor: pointer;
73
- padding: 5px;
74
-
75
- width: 22px;
76
- height: 22px;
77
- }
78
-
79
- .check {
80
- position: absolute;
81
- top: 0;
82
- right: 0;
83
- z-index: var(--layer-top);
84
- background: var(--background-fill-primary);
85
- padding: var(--size-1);
86
- width: 100%;
87
- height: 100%;
88
- color: var(--body-text-color);
89
- }
90
- </style>
56
+ <DownloadLink
57
+ download="file.{ext}"
58
+ href={download_value}
59
+ on:click={copy_feedback}
60
+ >
61
+ <IconButton Icon={copied ? Check : Download} />
62
+ </DownloadLink>
package/shared/Widgets.svelte CHANGED
@@ -1,35 +1,13 @@
1
1
  <script lang="ts">
2
2
  import Copy from "./Copy.svelte";
3
3
  import Download from "./Download.svelte";
4
+ import { IconButtonWrapper } from "@gradio/atoms";
4
5
 
5
6
  export let value: string;
6
7
  export let language: string;
7
8
  </script>
8
9
 
9
- <div>
10
+ <IconButtonWrapper>
10
11
  <Download {value} {language} />
11
12
  <Copy {value} />
12
- </div>
13
-
14
- <style>
15
- div {
16
- display: flex;
17
- position: absolute;
18
- top: var(--block-label-margin);
19
- right: var(--block-label-margin);
20
- align-items: center;
21
-
22
- z-index: var(--layer-2);
23
- transition: 150ms;
24
- box-shadow: var(--shadow-drop);
25
- border: 1px solid var(--border-color-primary);
26
- border-top: none;
27
- border-right: none;
28
- border-radius: var(--block-label-right-radius);
29
- background: var(--block-label-background-fill);
30
- overflow: hidden;
31
- color: var(--block-label-text-color);
32
- font: var(--font);
33
- font-size: var(--button-small-text-size);
34
- }
35
- </style>
13
+ </IconButtonWrapper>