@gradio/file 0.13.1-dev.2 → 0.14.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 (12) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/Index.svelte +9 -1
  3. package/dist/Index.svelte +9 -1
  4. package/dist/shared/File.svelte +7 -1
  5. package/dist/shared/File.svelte.d.ts +2 -0
  6. package/dist/shared/FileUpload.svelte +7 -1
  7. package/dist/shared/FileUpload.svelte.d.ts +3 -0
  8. package/dist/types.d.ts +5 -1
  9. package/package.json +8 -8
  10. package/shared/File.svelte +7 -1
  11. package/shared/FileUpload.svelte +7 -1
  12. package/types.ts +3 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,41 @@
1
1
  # @gradio/file
2
2
 
3
+ ## 0.14.0
4
+
5
+ ### Features
6
+
7
+ - [#12539](https://github.com/gradio-app/gradio/pull/12539) [`f1d83fa`](https://github.com/gradio-app/gradio/commit/f1d83fac3d6e4bad60cf896a026fa2d572f26073) - Add ability to add custom buttons to components. Thanks @abidlabs!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/atoms@0.20.0
12
+ - @gradio/utils@0.11.0
13
+ - @gradio/client@2.0.1
14
+ - @gradio/statustracker@0.12.1
15
+ - @gradio/upload@0.17.3
16
+
17
+ ## 0.13.1
18
+
19
+ ### Dependency updates
20
+
21
+ - @gradio/utils@0.10.4
22
+
23
+ ## 0.13.1
24
+
25
+ ### Features
26
+
27
+ - [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Clear Error statuses
28
+ - [#12438](https://github.com/gradio-app/gradio/pull/12438) [`25ffc03`](https://github.com/gradio-app/gradio/commit/25ffc0398f8feb43d817c02b2ab970c16de6d797) - Svelte5 migration and bugfix
29
+
30
+ ### Dependencies
31
+
32
+ - @gradio/atoms@0.19.0
33
+ - @gradio/client@2.0.0
34
+ - @gradio/icons@0.15.0
35
+ - @gradio/statustracker@0.12.0
36
+ - @gradio/upload@0.17.2
37
+ - @gradio/utils@0.10.3
38
+
3
39
  ## 0.13.1-dev.2
4
40
 
5
41
  ### Dependency updates
package/Index.svelte CHANGED
@@ -65,7 +65,7 @@
65
65
  status={pending_upload
66
66
  ? "generating"
67
67
  : gradio.shared.loading_status?.status || "complete"}
68
- on:clear_status={() =>
68
+ on_clear_status={() =>
69
69
  gradio.dispatch("clear_status", gradio.shared.loading_status)}
70
70
  />
71
71
  {#if !gradio.shared.interactive}
@@ -78,6 +78,10 @@
78
78
  show_label={gradio.shared.show_label}
79
79
  height={gradio.props.height}
80
80
  i18n={gradio.i18n}
81
+ buttons={gradio.props.buttons}
82
+ on_custom_button_click={(id) => {
83
+ gradio.dispatch("custom_button_click", { id });
84
+ }}
81
85
  />
82
86
  {:else}
83
87
  <FileUpload
@@ -94,6 +98,10 @@
94
98
  root={gradio.shared.root}
95
99
  allow_reordering={gradio.props.allow_reordering}
96
100
  max_file_size={gradio.shared.max_file_size}
101
+ buttons={gradio.props.buttons}
102
+ on_custom_button_click={(id) => {
103
+ gradio.dispatch("custom_button_click", { id });
104
+ }}
97
105
  on:change={({ detail }) => {
98
106
  gradio.props.value = detail;
99
107
  }}
package/dist/Index.svelte CHANGED
@@ -65,7 +65,7 @@
65
65
  status={pending_upload
66
66
  ? "generating"
67
67
  : gradio.shared.loading_status?.status || "complete"}
68
- on:clear_status={() =>
68
+ on_clear_status={() =>
69
69
  gradio.dispatch("clear_status", gradio.shared.loading_status)}
70
70
  />
71
71
  {#if !gradio.shared.interactive}
@@ -78,6 +78,10 @@
78
78
  show_label={gradio.shared.show_label}
79
79
  height={gradio.props.height}
80
80
  i18n={gradio.i18n}
81
+ buttons={gradio.props.buttons}
82
+ on_custom_button_click={(id) => {
83
+ gradio.dispatch("custom_button_click", { id });
84
+ }}
81
85
  />
82
86
  {:else}
83
87
  <FileUpload
@@ -94,6 +98,10 @@
94
98
  root={gradio.shared.root}
95
99
  allow_reordering={gradio.props.allow_reordering}
96
100
  max_file_size={gradio.shared.max_file_size}
101
+ buttons={gradio.props.buttons}
102
+ on_custom_button_click={(id) => {
103
+ gradio.dispatch("custom_button_click", { id });
104
+ }}
97
105
  on:change={({ detail }) => {
98
106
  gradio.props.value = detail;
99
107
  }}
package/dist/shared/File.svelte CHANGED
@@ -1,7 +1,8 @@
1
1
  <script lang="ts">
2
- import { BlockLabel, Empty } from "@gradio/atoms";
2
+ import { BlockLabel, Empty, IconButtonWrapper } from "@gradio/atoms";
3
3
  import { File } from "@gradio/icons";
4
4
  import FilePreview from "./FilePreview.svelte";
5
+ import type { CustomButton as CustomButtonType } from "@gradio/utils";
5
6
 
6
7
  let {
7
8
  value,
@@ -10,11 +11,16 @@
10
11
  selectable,
11
12
  i18n,
12
13
  height,
14
+ buttons = null,
15
+ on_custom_button_click = null,
13
16
  on_select,
14
17
  on_download
15
18
  } = $props();
16
19
  </script>
17
20
 
21
+ {#if show_label && buttons && buttons.length > 0}
22
+ <IconButtonWrapper {buttons} {on_custom_button_click} />
23
+ {/if}
18
24
  <BlockLabel
19
25
  {show_label}
20
26
  float={value === null}
package/dist/shared/File.svelte.d.ts CHANGED
@@ -6,6 +6,8 @@ declare const File: import("svelte").Component<{
6
6
  selectable: any;
7
7
  i18n: any;
8
8
  height: any;
9
+ buttons?: any;
10
+ on_custom_button_click?: any;
9
11
  on_select: any;
10
12
  on_download: any;
11
13
  }, {}, "">;
package/dist/shared/FileUpload.svelte CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  import FilePreview from "./FilePreview.svelte";
9
9
  import type { I18nFormatter } from "@gradio/utils";
10
+ import type { CustomButton as CustomButtonType } from "@gradio/utils";
10
11
 
11
12
  export let value: null | FileData | FileData[];
12
13
 
@@ -24,6 +25,8 @@
24
25
  export let uploading = false;
25
26
  export let allow_reordering = false;
26
27
  export let upload_promise: Promise<(FileData | null)[]> | null = null;
28
+ export let buttons: (string | CustomButtonType)[] | null = null;
29
+ export let on_custom_button_click: ((id: number) => void) | null = null;
27
30
 
28
31
  async function handle_upload({
29
32
  detail
@@ -59,10 +62,13 @@
59
62
  $: dispatch("drag", dragging);
60
63
  </script>
61
64
 
65
+ {#if show_label && buttons && buttons.length > 0}
66
+ <IconButtonWrapper {buttons} {on_custom_button_click} />
67
+ {/if}
62
68
  <BlockLabel {show_label} Icon={File} float={!value} label={label || "File"} />
63
69
 
64
70
  {#if value && (Array.isArray(value) ? value.length > 0 : true)}
65
- <IconButtonWrapper>
71
+ <IconButtonWrapper buttons={buttons || []} {on_custom_button_click}>
66
72
  {#if !(file_count === "single" && (Array.isArray(value) ? value.length > 0 : value !== null))}
67
73
  <IconButton Icon={UploadIcon} label={i18n("common.upload")}>
68
74
  <Upload
package/dist/shared/FileUpload.svelte.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { FileData, Client } from "@gradio/client";
2
2
  import type { I18nFormatter } from "@gradio/utils";
3
+ import type { CustomButton as CustomButtonType } from "@gradio/utils";
3
4
  interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
4
5
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
5
6
  $$bindings?: Bindings;
@@ -34,6 +35,8 @@ declare const FileUpload: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Prop
34
35
  uploading?: boolean;
35
36
  allow_reordering?: boolean;
36
37
  upload_promise?: Promise<(FileData | null)[]> | null;
38
+ buttons?: (string | CustomButtonType)[] | null;
39
+ on_custom_button_click?: ((id: number) => void) | null;
37
40
  }, {
38
41
  default: {};
39
42
  }>, {
package/dist/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { FileData } from "@gradio/client";
2
2
  import type { LoadingStatus } from "js/statustracker";
3
- import type { SelectData } from "@gradio/utils";
3
+ import type { SelectData, CustomButton } from "@gradio/utils";
4
4
  export interface FileProps {
5
5
  value: FileData | FileData[] | null;
6
6
  file_types: string[];
@@ -9,6 +9,7 @@ export interface FileProps {
9
9
  type: "filepath" | "binary";
10
10
  _selectable: boolean;
11
11
  height: number | null;
12
+ buttons: (string | CustomButton)[] | null;
12
13
  }
13
14
  export interface FileEvents {
14
15
  upload: FileData | FileData[];
@@ -19,4 +20,7 @@ export interface FileEvents {
19
20
  select: SelectData | null;
20
21
  change: FileData | FileData[] | null;
21
22
  delete: void;
23
+ custom_button_click: {
24
+ id: number;
25
+ };
22
26
  }
package/package.json CHANGED
@@ -1,21 +1,21 @@
1
1
  {
2
2
  "name": "@gradio/file",
3
- "version": "0.13.1-dev.2",
3
+ "version": "0.14.0",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
7
7
  "license": "ISC",
8
8
  "private": false,
9
9
  "dependencies": {
10
- "@gradio/atoms": "^0.19.0-dev.1",
11
- "@gradio/client": "^2.0.0-dev.2",
12
- "@gradio/icons": "^0.15.0-dev.0",
13
- "@gradio/statustracker": "^0.12.0-dev.1",
14
- "@gradio/upload": "^0.17.2-dev.2",
15
- "@gradio/utils": "^0.10.3-dev.0"
10
+ "@gradio/atoms": "^0.20.0",
11
+ "@gradio/client": "^2.0.1",
12
+ "@gradio/statustracker": "^0.12.1",
13
+ "@gradio/icons": "^0.15.0",
14
+ "@gradio/upload": "^0.17.3",
15
+ "@gradio/utils": "^0.11.0"
16
16
  },
17
17
  "devDependencies": {
18
- "@gradio/preview": "^0.15.0-dev.0"
18
+ "@gradio/preview": "^0.15.1"
19
19
  },
20
20
  "main": "./Index.svelte",
21
21
  "main_changeset": true,
package/shared/File.svelte CHANGED
@@ -1,7 +1,8 @@
1
1
  <script lang="ts">
2
- import { BlockLabel, Empty } from "@gradio/atoms";
2
+ import { BlockLabel, Empty, IconButtonWrapper } from "@gradio/atoms";
3
3
  import { File } from "@gradio/icons";
4
4
  import FilePreview from "./FilePreview.svelte";
5
+ import type { CustomButton as CustomButtonType } from "@gradio/utils";
5
6
 
6
7
  let {
7
8
  value,
@@ -10,11 +11,16 @@
10
11
  selectable,
11
12
  i18n,
12
13
  height,
14
+ buttons = null,
15
+ on_custom_button_click = null,
13
16
  on_select,
14
17
  on_download
15
18
  } = $props();
16
19
  </script>
17
20
 
21
+ {#if show_label && buttons && buttons.length > 0}
22
+ <IconButtonWrapper {buttons} {on_custom_button_click} />
23
+ {/if}
18
24
  <BlockLabel
19
25
  {show_label}
20
26
  float={value === null}
package/shared/FileUpload.svelte CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  import FilePreview from "./FilePreview.svelte";
9
9
  import type { I18nFormatter } from "@gradio/utils";
10
+ import type { CustomButton as CustomButtonType } from "@gradio/utils";
10
11
 
11
12
  export let value: null | FileData | FileData[];
12
13
 
@@ -24,6 +25,8 @@
24
25
  export let uploading = false;
25
26
  export let allow_reordering = false;
26
27
  export let upload_promise: Promise<(FileData | null)[]> | null = null;
28
+ export let buttons: (string | CustomButtonType)[] | null = null;
29
+ export let on_custom_button_click: ((id: number) => void) | null = null;
27
30
 
28
31
  async function handle_upload({
29
32
  detail
@@ -59,10 +62,13 @@
59
62
  $: dispatch("drag", dragging);
60
63
  </script>
61
64
 
65
+ {#if show_label && buttons && buttons.length > 0}
66
+ <IconButtonWrapper {buttons} {on_custom_button_click} />
67
+ {/if}
62
68
  <BlockLabel {show_label} Icon={File} float={!value} label={label || "File"} />
63
69
 
64
70
  {#if value && (Array.isArray(value) ? value.length > 0 : true)}
65
- <IconButtonWrapper>
71
+ <IconButtonWrapper buttons={buttons || []} {on_custom_button_click}>
66
72
  {#if !(file_count === "single" && (Array.isArray(value) ? value.length > 0 : value !== null))}
67
73
  <IconButton Icon={UploadIcon} label={i18n("common.upload")}>
68
74
  <Upload
package/types.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { FileData } from "@gradio/client";
2
2
  import type { LoadingStatus } from "js/statustracker";
3
- import type { SelectData } from "@gradio/utils";
3
+ import type { SelectData, CustomButton } from "@gradio/utils";
4
4
 
5
5
  export interface FileProps {
6
6
  value: FileData | FileData[] | null;
@@ -10,6 +10,7 @@ export interface FileProps {
10
10
  type: "filepath" | "binary";
11
11
  _selectable: boolean;
12
12
  height: number | null;
13
+ buttons: (string | CustomButton)[] | null;
13
14
  }
14
15
 
15
16
  export interface FileEvents {
@@ -21,4 +22,5 @@ export interface FileEvents {
21
22
  select: SelectData | null;
22
23
  change: FileData | FileData[] | null;
23
24
  delete: void;
25
+ custom_button_click: { id: number };
24
26
  }