@gradio/code 0.2.0-beta.5 → 0.2.0-beta.8

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 (12) hide show
  1. package/CHANGELOG.md +33 -26
  2. package/{static/StaticCode.svelte → Index.svelte} +23 -4
  3. package/README.md +47 -0
  4. package/package.json +10 -11
  5. package/shared/Code.svelte +4 -3
  6. package/shared/Copy.svelte +14 -5
  7. package/example/index.ts +0 -1
  8. package/interactive/InteractiveCode.svelte +0 -52
  9. package/interactive/index.ts +0 -1
  10. package/shared/index.ts +0 -2
  11. package/static/index.ts +0 -1
  12. /package/{example/Code.svelte → Example.svelte} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,52 +1,59 @@
1
1
  # @gradio/code
2
2
 
3
- ## 0.2.0-beta.5
3
+ ## 0.2.0-beta.8
4
4
 
5
5
  ### Features
6
6
 
7
- - [#5648](https://github.com/gradio-app/gradio/pull/5648) [`c573e2339`](https://github.com/gradio-app/gradio/commit/c573e2339b86c85b378dc349de5e9223a3c3b04a) - Publish all components to npm. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
7
+ - [#6136](https://github.com/gradio-app/gradio/pull/6136) [`667802a6c`](https://github.com/gradio-app/gradio/commit/667802a6cdbfb2ce454a3be5a78e0990b194548a) - JS Component Documentation. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
8
+ - [#6149](https://github.com/gradio-app/gradio/pull/6149) [`90318b1dd`](https://github.com/gradio-app/gradio/commit/90318b1dd118ae08a695a50e7c556226234ab6dc) - swap `mode` on the frontned to `interactive` to match the backend. Thanks [@pngwn](https://github.com/pngwn)!
8
9
 
9
- ## 0.2.0-beta.4
10
+ ## 0.2.0-beta.7
10
11
 
11
- ### Patch Changes
12
+ ### Features
12
13
 
13
- - Updated dependencies [[`0b4fd5b6d`](https://github.com/gradio-app/gradio/commit/0b4fd5b6db96fc95a155e5e935e17e1ab11d1161)]:
14
- - @gradio/utils@0.2.0-beta.3
15
- - @gradio/atoms@0.2.0-beta.3
16
- - @gradio/statustracker@0.3.0-beta.4
17
- - @gradio/upload@0.3.0-beta.3
14
+ - [#6016](https://github.com/gradio-app/gradio/pull/6016) [`83e947676`](https://github.com/gradio-app/gradio/commit/83e947676d327ca2ab6ae2a2d710c78961c771a0) - Format js in v4 branch. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
18
15
 
19
- ## 0.2.0-beta.3
16
+ ## 0.2.0-beta.6
20
17
 
21
- ### Patch Changes
18
+ ### Features
22
19
 
23
- - Updated dependencies [[`14fc612d8`](https://github.com/gradio-app/gradio/commit/14fc612d84bf6b1408eccd3a40fab41f25477571)]:
24
- - @gradio/utils@0.2.0-beta.2
25
- - @gradio/atoms@0.2.0-beta.2
26
- - @gradio/statustracker@0.3.0-beta.3
27
- - @gradio/upload@0.3.0-beta.2
20
+ - [#5960](https://github.com/gradio-app/gradio/pull/5960) [`319c30f3f`](https://github.com/gradio-app/gradio/commit/319c30f3fccf23bfe1da6c9b132a6a99d59652f7) - rererefactor frontend files. Thanks [@pngwn](https://github.com/pngwn)!
21
+ - [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
28
22
 
29
- ## 0.2.0-beta.2
23
+ ## 0.2.3
30
24
 
31
- ### Features
25
+ ### Patch Changes
32
26
 
33
- - [#5620](https://github.com/gradio-app/gradio/pull/5620) [`c4c25ecdf`](https://github.com/gradio-app/gradio/commit/c4c25ecdf8c2fab5e3c41b519564e3b6a9ebfce3) - fix build and broken imports. Thanks [@pngwn](https://github.com/pngwn)!
27
+ - Updated dependencies [[`e70805d54`](https://github.com/gradio-app/gradio/commit/e70805d54cc792452545f5d8eccc1aa0212a4695)]:
28
+ - @gradio/atoms@0.2.0
29
+ - @gradio/statustracker@0.2.3
30
+ - @gradio/upload@0.3.3
34
31
 
35
- ## 0.2.0-beta.1
32
+ ## 0.2.2
36
33
 
37
34
  ### Patch Changes
38
35
 
39
36
  - Updated dependencies []:
40
- - @gradio/utils@0.2.0-beta.1
41
- - @gradio/atoms@0.2.0-beta.1
42
- - @gradio/statustracker@0.3.0-beta.1
43
- - @gradio/upload@0.3.0-beta.1
37
+ - @gradio/utils@0.1.2
38
+ - @gradio/atoms@0.1.4
39
+ - @gradio/statustracker@0.2.2
40
+ - @gradio/upload@0.3.2
41
+
42
+ ## 0.2.1
43
+
44
+ ### Patch Changes
45
+
46
+ - Updated dependencies [[`8f0fed857`](https://github.com/gradio-app/gradio/commit/8f0fed857d156830626eb48b469d54d211a582d2)]:
47
+ - @gradio/icons@0.2.0
48
+ - @gradio/atoms@0.1.3
49
+ - @gradio/statustracker@0.2.1
50
+ - @gradio/upload@0.3.1
44
51
 
45
- ## 0.2.0-beta.0
52
+ ## 0.2.0
46
53
 
47
54
  ### Features
48
55
 
49
- - [#5507](https://github.com/gradio-app/gradio/pull/5507) [`1385dc688`](https://github.com/gradio-app/gradio/commit/1385dc6881f2d8ae7a41106ec21d33e2ef04d6a9) - Custom components. Thanks [@pngwn](https://github.com/pngwn)!
56
+ - [#5554](https://github.com/gradio-app/gradio/pull/5554) [`75ddeb390`](https://github.com/gradio-app/gradio/commit/75ddeb390d665d4484667390a97442081b49a423) - Accessibility Improvements. Thanks [@hannahblair](https://github.com/hannahblair)!
50
57
 
51
58
  ## 0.1.2
52
59
 
package/{static/StaticCode.svelte → Index.svelte} RENAMED
@@ -1,10 +1,19 @@
1
+ <script context="module" lang="ts">
2
+ export { default as BaseCode } from "./shared/Code.svelte";
3
+ export { default as BaseCopy } from "./shared/Copy.svelte";
4
+ export { default as BaseDownload } from "./shared/Download.svelte";
5
+ export { default as BaseWidget } from "./shared/Widgets.svelte";
6
+ export { default as BaseExample } from "./Example.svelte";
7
+ </script>
8
+
1
9
  <script lang="ts">
2
10
  import type { Gradio } from "@gradio/utils";
3
11
  import { afterUpdate } from "svelte";
4
12
 
5
13
  import type { LoadingStatus } from "@gradio/statustracker";
6
14
 
7
- import Code, { Widget } from "../shared";
15
+ import Code from "./shared/Code.svelte";
16
+ import Widget from "./shared/Widgets.svelte";
8
17
  import { StatusTracker } from "@gradio/statustracker";
9
18
  import { Block, BlockLabel, Empty } from "@gradio/atoms";
10
19
  import { Code as CodeIcon } from "@gradio/icons";
@@ -24,6 +33,9 @@
24
33
  export let label = gradio.i18n("code.code");
25
34
  export let show_label = true;
26
35
  export let loading_status: LoadingStatus;
36
+ export let scale: number | null = null;
37
+
38
+ export let interactive: boolean;
27
39
 
28
40
  let dark_mode = target.classList.contains("dark");
29
41
 
@@ -39,7 +51,14 @@
39
51
  $: value, handle_change();
40
52
  </script>
41
53
 
42
- <Block variant={"solid"} padding={false} {elem_id} {elem_classes} {visible}>
54
+ <Block
55
+ variant={"solid"}
56
+ padding={false}
57
+ {elem_id}
58
+ {elem_classes}
59
+ {visible}
60
+ {scale}
61
+ >
43
62
  <StatusTracker
44
63
  autoscroll={gradio.autoscroll}
45
64
  i18n={gradio.i18n}
@@ -48,13 +67,13 @@
48
67
 
49
68
  <BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
50
69
 
51
- {#if !value}
70
+ {#if !value && !interactive}
52
71
  <Empty unpadded_box={true} size="large">
53
72
  <CodeIcon />
54
73
  </Empty>
55
74
  {:else}
56
75
  <Widget {language} {value} />
57
76
 
58
- <Code bind:value {language} {lines} {dark_mode} readonly />
77
+ <Code bind:value {language} {lines} {dark_mode} readonly={!interactive} />
59
78
  {/if}
60
79
  </Block>
package/README.md CHANGED
@@ -1 +1,48 @@
1
1
  # `@gradio/code`
2
+
3
+ ```html
4
+ <script>
5
+ import { BaseCode, BaseCopy, BaseDownload, BaseWidget, BaseExample} from "gradio/code";
6
+ </script>
7
+ ```
8
+
9
+ BaseCode
10
+ ```javascript
11
+ export let classNames = "";
12
+ export let value = "";
13
+ export let dark_mode: boolean;
14
+
15
+ export let basic = true;
16
+ export let language: string;
17
+ export let lines = 5;
18
+ export let extensions: Extension[] = [];
19
+
20
+ export let useTab = true;
21
+
22
+ export let readonly = false;
23
+ export let placeholder: string | HTMLElement | null | undefined = undefined;
24
+ ```
25
+
26
+ BaseCopy
27
+ ```javascript
28
+ export let value: string;
29
+ ```
30
+
31
+ BaseDownload
32
+ ```javascript
33
+ export let value: string;
34
+ export let language: string;
35
+ ```
36
+
37
+ BaseWidget
38
+ ```javascript
39
+ export let value: string;
40
+ export let language: string;
41
+ ```
42
+
43
+ BaseExample
44
+ ```
45
+ export let value: string;
46
+ export let type: "gallery" | "table";
47
+ export let selected = false;
48
+ ```
package/package.json CHANGED
@@ -1,9 +1,8 @@
1
1
  {
2
2
  "name": "@gradio/code",
3
- "version": "0.2.0-beta.5",
3
+ "version": "0.2.0-beta.8",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
- "main": "./index.svelte",
7
6
  "author": "",
8
7
  "license": "ISC",
9
8
  "private": false,
@@ -28,17 +27,17 @@
28
27
  "cm6-theme-basic-dark": "^0.2.0",
29
28
  "cm6-theme-basic-light": "^0.2.0",
30
29
  "codemirror": "^6.0.1",
31
- "@gradio/atoms": "^0.2.0-beta.3",
32
- "@gradio/icons": "^0.2.0-beta.0",
33
- "@gradio/statustracker": "^0.3.0-beta.5",
34
- "@gradio/upload": "^0.3.0-beta.3",
35
- "@gradio/utils": "^0.2.0-beta.3"
30
+ "@gradio/atoms": "^0.2.0-beta.6",
31
+ "@gradio/icons": "^0.2.0-beta.3",
32
+ "@gradio/statustracker": "^0.3.0-beta.8",
33
+ "@gradio/upload": "^0.3.0-beta.6",
34
+ "@gradio/utils": "^0.2.0-beta.6"
36
35
  },
37
36
  "main_changeset": true,
37
+ "main": "./Index.svelte",
38
38
  "exports": {
39
- "./package.json": "./package.json",
40
- "./interactive": "./interactive/index.ts",
41
- "./static": "./static/index.ts",
42
- "./example": "./example/index.ts"
39
+ ".": "./Index.svelte",
40
+ "./example": "./Example.svelte",
41
+ "./package.json": "./package.json"
43
42
  }
44
43
  }
package/shared/Code.svelte CHANGED
@@ -42,7 +42,7 @@
42
42
 
43
43
  $: reconfigure(), lang_extension;
44
44
  $: setDoc(value);
45
- $: updateLines(lines);
45
+ $: updateLines();
46
46
 
47
47
  function setDoc(newDoc: string): void {
48
48
  if (view && newDoc !== view.state.doc.toString()) {
@@ -56,7 +56,7 @@
56
56
  }
57
57
  }
58
58
 
59
- function updateLines(newLines: number): void {
59
+ function updateLines(): void {
60
60
  if (view) {
61
61
  view.requestMeasure({ read: updateGutters });
62
62
  }
@@ -169,7 +169,8 @@
169
169
  ): Extension[] {
170
170
  const extensions: Extension[] = [
171
171
  EditorView.editable.of(!readonly),
172
- EditorState.readOnly.of(readonly)
172
+ EditorState.readOnly.of(readonly),
173
+ EditorView.contentAttributes.of({ "aria-label": "Code input container" })
173
174
  ];
174
175
 
175
176
  if (basic) {
package/shared/Copy.svelte CHANGED
@@ -27,12 +27,21 @@
27
27
  });
28
28
  </script>
29
29
 
30
- <button on:click={handle_copy} title="copy">
31
- <!-- {#if !copied} -->
32
- <span class="copy-text" class:copied><Copy /> </span>
33
- <!-- {/if} -->
30
+ <button
31
+ on:click={handle_copy}
32
+ title="copy"
33
+ class:copied
34
+ aria-roledescription="Copy value"
35
+ aria-label="Copy"
36
+ >
37
+ <Copy />
34
38
  {#if copied}
35
- <span class="check" transition:fade><Check /></span>
39
+ <span
40
+ class="check"
41
+ transition:fade
42
+ aria-roledescription="Value copied"
43
+ aria-label="Copied"><Check /></span
44
+ >
36
45
  {/if}
37
46
  </button>
38
47
 
package/example/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default } from "./Code.svelte";
package/interactive/InteractiveCode.svelte DELETED
@@ -1,52 +0,0 @@
1
- <script lang="ts">
2
- import type { Gradio } from "@gradio/utils";
3
- import { afterUpdate } from "svelte";
4
-
5
- import type { LoadingStatus } from "@gradio/statustracker";
6
-
7
- import Code from "../shared";
8
- import { StatusTracker } from "@gradio/statustracker";
9
- import { Block, BlockLabel } from "@gradio/atoms";
10
- import { Code as CodeIcon } from "@gradio/icons";
11
-
12
- export let gradio: Gradio<{
13
- change: typeof value;
14
- input: never;
15
- }>;
16
- export let value = "";
17
- export let value_is_output = false;
18
- export let language = "";
19
- export let lines = 5;
20
- export let target: HTMLElement;
21
- export let elem_id = "";
22
- export let elem_classes: string[] = [];
23
- export let visible = true;
24
- export let label = gradio.i18n("code.code");
25
- export let show_label = true;
26
- export let loading_status: LoadingStatus;
27
-
28
- let dark_mode = target.classList.contains("dark");
29
-
30
- function handle_change(): void {
31
- gradio.dispatch("change", value);
32
- if (!value_is_output) {
33
- gradio.dispatch("input");
34
- }
35
- }
36
- afterUpdate(() => {
37
- value_is_output = false;
38
- });
39
- $: value, handle_change();
40
- </script>
41
-
42
- <Block variant={"solid"} padding={false} {elem_id} {elem_classes} {visible}>
43
- <StatusTracker
44
- autoscroll={gradio.autoscroll}
45
- i18n={gradio.i18n}
46
- {...loading_status}
47
- />
48
-
49
- <BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />
50
-
51
- <Code bind:value {language} {lines} {dark_mode} />
52
- </Block>
package/interactive/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default } from "./InteractiveCode.svelte";
package/shared/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default } from "./Code.svelte";
2
- export { default as Widget } from "./Widgets.svelte";
package/static/index.ts DELETED
@@ -1 +0,0 @@
1
- export { default } from "./StaticCode.svelte";
/package/{example/Code.svelte → Example.svelte} RENAMED
File without changes