@gradio/uploadbutton 0.9.15 → 0.9.17

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 +26 -0
  2. package/Index.svelte +4 -4
  3. package/UploadButton.stories.svelte +64 -60
  4. package/dist/Index.svelte +4 -4
  5. package/dist/shared/UploadButton.svelte +63 -35
  6. package/dist/shared/UploadButton.svelte.d.ts +10 -33
  7. package/package.json +7 -7
  8. package/shared/UploadButton.svelte +63 -35
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # @gradio/uploadbutton
2
2
 
3
+ ## 0.9.17
4
+
5
+ ### Fixes
6
+
7
+ - [#12800](https://github.com/gradio-app/gradio/pull/12800) [`7a1c321`](https://github.com/gradio-app/gradio/commit/7a1c321b6546ba05a353488f5133e8262c4a8a39) - Bump svelte/kit for security reasons. Thanks @freddyaboulton!
8
+ - [#12782](https://github.com/gradio-app/gradio/pull/12782) [`8a262d6`](https://github.com/gradio-app/gradio/commit/8a262d652ad8f33a2c09f3f98f501978ae416cf0) - Migrate UploadButton. Thanks @freddyaboulton!
9
+
10
+ ### Dependency updates
11
+
12
+ - @gradio/button@0.6.3
13
+ - @gradio/utils@0.11.2
14
+ - @gradio/upload@0.17.4
15
+ - @gradio/client@2.0.3
16
+
17
+ ## 0.9.16
18
+
19
+ ### Fixes
20
+
21
+ - [#12681](https://github.com/gradio-app/gradio/pull/12681) [`ba46c2d`](https://github.com/gradio-app/gradio/commit/ba46c2df1405c11e495304af8f91acfdf69d0b18) - Migrate Button to Svelte 5. Thanks @freddyaboulton!
22
+
23
+ ### Dependency updates
24
+
25
+ - @gradio/utils@0.11.1
26
+ - @gradio/button@0.6.2
27
+ - @gradio/client@2.0.2
28
+
3
29
  ## 0.9.15
4
30
 
5
31
  ### Dependency updates
package/Index.svelte CHANGED
@@ -46,10 +46,10 @@
46
46
  variant={gradio.props.variant}
47
47
  label={gradio.shared.label}
48
48
  max_file_size={gradio.shared.max_file_size}
49
- on:click={() => gradio.dispatch("click")}
50
- on:change={({ detail }) => handle_event(detail, "change")}
51
- on:upload={({ detail }) => handle_event(detail, "upload")}
52
- on:error={({ detail }) => {
49
+ onclick={() => gradio.dispatch("click")}
50
+ onchange={(detail) => handle_event(detail, "change")}
51
+ onupload={(detail) => handle_event(detail, "upload")}
52
+ onerror={(detail) => {
53
53
  gradio.dispatch("error", detail);
54
54
  }}
55
55
  upload={(...args) => gradio.shared.client.upload(...args)}
package/UploadButton.stories.svelte CHANGED
@@ -1,69 +1,75 @@
1
- <script>
2
- import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
3
  import UploadButton from "./Index.svelte";
4
- </script>
4
+ import { wrapProps } from "../storybook/wrapProps";
5
5
 
6
- <Meta
7
- title="Components/UploadButton"
8
- component={UploadButton}
9
- argTypes={{
10
- label: {
11
- control: "text",
12
- description: "The text to display on the button",
13
- name: "label",
14
- value: "Gradio Button"
15
- },
16
- variant: {
17
- options: ["primary", "secondary", "stop"],
18
- description: "The variant of the button",
19
- control: { type: "select" },
20
- defaultValue: "primary"
21
- },
22
- size: {
23
- options: ["sm", "lg"],
24
- description: "The size of the button",
25
- control: { type: "select" },
26
- defaultValue: "lg"
27
- },
28
- visible: {
29
- options: [true, false],
30
- description: "Sets the visibility of the button",
31
- control: { type: "boolean" },
32
- defaultValue: true
33
- },
34
- interactive: {
35
- options: [true, false],
36
- description: "If false, the button will be in a disabled state",
37
- control: { type: "boolean" },
38
- defaultValue: true
39
- },
40
- disabled: {
41
- options: [true, false],
42
- control: { type: "boolean" },
43
- defaultValue: false
44
- },
45
- scale: {
46
- options: [null, 0.5, 1, 2],
47
- description:
48
- "relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. Only applies in Rows, or top-level Components in Blocks where fill_height=True. ",
49
- control: { type: "select" }
6
+ const { Story } = defineMeta({
7
+ title: "Components/UploadButton",
8
+ component: UploadButton,
9
+ argTypes: {
10
+ label: {
11
+ control: "text",
12
+ description: "The text to display on the button",
13
+ name: "label",
14
+ value: "Gradio Button"
15
+ },
16
+ variant: {
17
+ options: ["primary", "secondary", "stop"],
18
+ description: "The variant of the button",
19
+ control: { type: "select" },
20
+ defaultValue: "primary"
21
+ },
22
+ size: {
23
+ options: ["sm", "lg"],
24
+ description: "The size of the button",
25
+ control: { type: "select" },
26
+ defaultValue: "lg"
27
+ },
28
+ visible: {
29
+ options: [true, false],
30
+ description: "Sets the visibility of the button",
31
+ control: { type: "boolean" },
32
+ defaultValue: true
33
+ },
34
+ interactive: {
35
+ options: [true, false],
36
+ description: "If false, the button will be in a disabled state",
37
+ control: { type: "boolean" },
38
+ defaultValue: true
39
+ },
40
+ disabled: {
41
+ options: [true, false],
42
+ control: { type: "boolean" },
43
+ defaultValue: false
44
+ },
45
+ scale: {
46
+ options: [null, 0.5, 1, 2],
47
+ description: "relative size compared to adjacent Components.",
48
+ control: { type: "select" }
49
+ }
50
50
  }
51
- }}
52
- />
51
+ });
52
+ </script>
53
53
 
54
- <Template let:args>
55
- <UploadButton value="Gradio Button" {...args} />
56
- </Template>
54
+ {#snippet template(args)}
55
+ <UploadButton {...wrapProps({ value: "Gradio Button", ...args })} />
56
+ {/snippet}
57
57
 
58
58
  <Story
59
59
  name="Primary"
60
60
  args={{ label: "Upload", variant: "primary", size: "lg", scale: 1 }}
61
+ {template}
61
62
  />
62
63
  <Story
63
64
  name="Secondary"
64
65
  args={{ label: "Upload", variant: "secondary", size: "lg" }}
66
+ {template}
67
+ />
68
+ <Story
69
+ name="Stop"
70
+ args={{ label: "Upload", variant: "stop", size: "lg" }}
71
+ {template}
65
72
  />
66
- <Story name="Stop" args={{ label: "Upload", variant: "stop", size: "lg" }} />
67
73
  <Story
68
74
  name="Button with external image icon"
69
75
  args={{
@@ -73,17 +79,15 @@
73
79
  url: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
74
80
  }
75
81
  }}
82
+ {template}
76
83
  />
77
84
  <Story
78
85
  name="Button with visible equal to false"
79
- args={{
80
- label: "Upload",
81
- visible: false
82
- }}
86
+ args={{ label: "Upload", visible: false }}
87
+ {template}
83
88
  />
84
89
  <Story
85
90
  name="Button with null label (should be collapsed)"
86
- args={{
87
- label: null
88
- }}
91
+ args={{ label: null }}
92
+ {template}
89
93
  />
package/dist/Index.svelte CHANGED
@@ -46,10 +46,10 @@
46
46
  variant={gradio.props.variant}
47
47
  label={gradio.shared.label}
48
48
  max_file_size={gradio.shared.max_file_size}
49
- on:click={() => gradio.dispatch("click")}
50
- on:change={({ detail }) => handle_event(detail, "change")}
51
- on:upload={({ detail }) => handle_event(detail, "upload")}
52
- on:error={({ detail }) => {
49
+ onclick={() => gradio.dispatch("click")}
50
+ onchange={(detail) => handle_event(detail, "change")}
51
+ onupload={(detail) => handle_event(detail, "upload")}
52
+ onerror={(detail) => {
53
53
  gradio.dispatch("error", detail);
54
54
  }}
55
55
  upload={(...args) => gradio.shared.client.upload(...args)}
package/dist/shared/UploadButton.svelte CHANGED
@@ -1,44 +1,71 @@
1
1
  <script lang="ts">
2
- import { tick, createEventDispatcher } from "svelte";
2
+ import { tick } from "svelte";
3
3
  import { BaseButton } from "@gradio/button";
4
4
  import { prepare_files, type FileData, type Client } from "@gradio/client";
5
5
 
6
- export let elem_id = "";
7
- export let elem_classes: string[] = [];
8
- export let visible: boolean | "hidden" = true;
9
- export let label: string | null;
10
- export let value: null | FileData | FileData[];
11
- export let file_count: string;
12
- export let file_types: string[] = [];
13
- export let root: string;
14
- export let size: "sm" | "md" | "lg" = "lg";
15
- export let icon: FileData | null = null;
16
- export let scale: number | null = null;
17
- export let min_width: number | undefined = undefined;
18
- export let variant: "primary" | "secondary" | "stop" = "secondary";
19
- export let disabled = false;
20
- export let max_file_size: number | null = null;
21
- export let upload: Client["upload"];
22
-
23
- const dispatch = createEventDispatcher();
6
+ let {
7
+ elem_id = "",
8
+ elem_classes = [],
9
+ visible = true,
10
+ label,
11
+ value,
12
+ file_count,
13
+ file_types = [],
14
+ root,
15
+ size = "lg",
16
+ icon = null,
17
+ scale = null,
18
+ min_width = undefined,
19
+ variant = "secondary",
20
+ disabled = false,
21
+ max_file_size = null,
22
+ upload,
23
+ onclick,
24
+ onchange,
25
+ onupload,
26
+ onerror,
27
+ children
28
+ }: {
29
+ elem_id?: string;
30
+ elem_classes?: string[];
31
+ visible?: boolean | "hidden";
32
+ label: string | null;
33
+ value?: null | FileData | FileData[];
34
+ file_count: string;
35
+ file_types?: string[];
36
+ root: string;
37
+ size?: "sm" | "md" | "lg";
38
+ icon?: FileData | null;
39
+ scale?: number | null;
40
+ min_width?: number | undefined;
41
+ variant?: "primary" | "secondary" | "stop";
42
+ disabled?: boolean;
43
+ max_file_size?: number | null;
44
+ upload: Client["upload"];
45
+ onclick?: () => void;
46
+ onchange?: (value: null | FileData | FileData[]) => void;
47
+ onupload?: (value: null | FileData | FileData[]) => void;
48
+ onerror?: (message: string) => void;
49
+ children?: import("svelte").Snippet;
50
+ } = $props();
24
51
 
25
52
  let hidden_upload: HTMLInputElement;
26
- let accept_file_types: string | null;
27
53
 
28
- if (file_types == null) {
29
- accept_file_types = null;
30
- } else {
31
- file_types = file_types.map((x) => {
54
+ let accept_file_types = $derived.by(() => {
55
+ if (file_types == null) {
56
+ return null;
57
+ }
58
+ const mapped = file_types.map((x) => {
32
59
  if (x.startsWith(".")) {
33
60
  return x;
34
61
  }
35
62
  return x + "/*";
36
63
  });
37
- accept_file_types = file_types.join(", ");
38
- }
64
+ return mapped.join(", ");
65
+ });
39
66
 
40
67
  function open_file_upload(): void {
41
- dispatch("click");
68
+ onclick?.();
42
69
  hidden_upload.click();
43
70
  }
44
71
 
@@ -59,12 +86,13 @@
59
86
  await upload(all_file_data, root, undefined, max_file_size ?? Infinity)
60
87
  )?.filter((x) => x !== null) as FileData[];
61
88
  } catch (e) {
62
- dispatch("error", (e as Error).message);
89
+ onerror?.((e as Error).message);
63
90
  return;
64
91
  }
65
- value = file_count === "single" ? all_file_data?.[0] : all_file_data;
66
- dispatch("change", value);
67
- dispatch("upload", value);
92
+ const new_value =
93
+ file_count === "single" ? all_file_data?.[0] : all_file_data;
94
+ onchange?.(new_value);
95
+ onupload?.(new_value);
68
96
  }
69
97
 
70
98
  async function load_files_from_upload(e: Event): Promise<void> {
@@ -85,8 +113,8 @@
85
113
  accept={accept_file_types}
86
114
  type="file"
87
115
  bind:this={hidden_upload}
88
- on:change={load_files_from_upload}
89
- on:click={clear_input_value}
116
+ onchange={load_files_from_upload}
117
+ onclick={clear_input_value}
90
118
  multiple={file_count === "multiple" || undefined}
91
119
  webkitdirectory={file_count === "directory" || undefined}
92
120
  mozdirectory={file_count === "directory" || undefined}
@@ -99,7 +127,7 @@
99
127
  {elem_id}
100
128
  {elem_classes}
101
129
  {visible}
102
- on:click={open_file_upload}
130
+ onclick={open_file_upload}
103
131
  {scale}
104
132
  {min_width}
105
133
  {disabled}
@@ -107,7 +135,7 @@
107
135
  {#if icon}
108
136
  <img class="button-icon" src={icon.url} alt={`${value} icon`} />
109
137
  {/if}
110
- <slot />
138
+ {#if children}{@render children()}{/if}
111
139
  </BaseButton>
112
140
 
113
141
  <style>
package/dist/shared/UploadButton.svelte.d.ts CHANGED
@@ -1,28 +1,10 @@
1
1
  import { type FileData, type Client } from "@gradio/client";
2
- 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> {
3
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
- $$bindings?: Bindings;
5
- } & Exports;
6
- (internal: unknown, props: Props & {
7
- $$events?: Events;
8
- $$slots?: Slots;
9
- }): Exports & {
10
- $set?: any;
11
- $on?: any;
12
- };
13
- z_$$bindings?: Bindings;
14
- }
15
- type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
16
- default: any;
17
- } ? Props extends Record<string, never> ? any : {
18
- children?: any;
19
- } : {});
20
- declare const UploadButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
2
+ type $$ComponentProps = {
21
3
  elem_id?: string;
22
4
  elem_classes?: string[];
23
5
  visible?: boolean | "hidden";
24
6
  label: string | null;
25
- value: null | FileData | FileData[];
7
+ value?: null | FileData | FileData[];
26
8
  file_count: string;
27
9
  file_types?: string[];
28
10
  root: string;
@@ -34,17 +16,12 @@ declare const UploadButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pr
34
16
  disabled?: boolean;
35
17
  max_file_size?: number | null;
36
18
  upload: Client["upload"];
37
- }, {
38
- default: {};
39
- }>, {
40
- click: CustomEvent<any>;
41
- error: CustomEvent<any>;
42
- change: CustomEvent<any>;
43
- upload: CustomEvent<any>;
44
- } & {
45
- [evt: string]: CustomEvent<any>;
46
- }, {
47
- default: {};
48
- }, {}, string>;
49
- type UploadButton = InstanceType<typeof UploadButton>;
19
+ onclick?: () => void;
20
+ onchange?: (value: null | FileData | FileData[]) => void;
21
+ onupload?: (value: null | FileData | FileData[]) => void;
22
+ onerror?: (message: string) => void;
23
+ children?: import("svelte").Snippet;
24
+ };
25
+ declare const UploadButton: import("svelte").Component<$$ComponentProps, {}, "">;
26
+ type UploadButton = ReturnType<typeof UploadButton>;
50
27
  export default UploadButton;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/uploadbutton",
3
- "version": "0.9.15",
3
+ "version": "0.9.17",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -17,16 +17,16 @@
17
17
  },
18
18
  "main": "./Index.svelte",
19
19
  "dependencies": {
20
- "@gradio/button": "^0.6.1",
21
- "@gradio/client": "^2.0.1",
22
- "@gradio/upload": "^0.17.3",
23
- "@gradio/utils": "^0.11.0"
20
+ "@gradio/button": "^0.6.3",
21
+ "@gradio/upload": "^0.17.4",
22
+ "@gradio/client": "^2.0.3",
23
+ "@gradio/utils": "^0.11.2"
24
24
  },
25
25
  "devDependencies": {
26
- "@gradio/preview": "^0.15.1"
26
+ "@gradio/preview": "^0.15.2"
27
27
  },
28
28
  "peerDependencies": {
29
- "svelte": "^5.43.4"
29
+ "svelte": "^5.48.0"
30
30
  },
31
31
  "repository": {
32
32
  "type": "git",
package/shared/UploadButton.svelte CHANGED
@@ -1,44 +1,71 @@
1
1
  <script lang="ts">
2
- import { tick, createEventDispatcher } from "svelte";
2
+ import { tick } from "svelte";
3
3
  import { BaseButton } from "@gradio/button";
4
4
  import { prepare_files, type FileData, type Client } from "@gradio/client";
5
5
 
6
- export let elem_id = "";
7
- export let elem_classes: string[] = [];
8
- export let visible: boolean | "hidden" = true;
9
- export let label: string | null;
10
- export let value: null | FileData | FileData[];
11
- export let file_count: string;
12
- export let file_types: string[] = [];
13
- export let root: string;
14
- export let size: "sm" | "md" | "lg" = "lg";
15
- export let icon: FileData | null = null;
16
- export let scale: number | null = null;
17
- export let min_width: number | undefined = undefined;
18
- export let variant: "primary" | "secondary" | "stop" = "secondary";
19
- export let disabled = false;
20
- export let max_file_size: number | null = null;
21
- export let upload: Client["upload"];
22
-
23
- const dispatch = createEventDispatcher();
6
+ let {
7
+ elem_id = "",
8
+ elem_classes = [],
9
+ visible = true,
10
+ label,
11
+ value,
12
+ file_count,
13
+ file_types = [],
14
+ root,
15
+ size = "lg",
16
+ icon = null,
17
+ scale = null,
18
+ min_width = undefined,
19
+ variant = "secondary",
20
+ disabled = false,
21
+ max_file_size = null,
22
+ upload,
23
+ onclick,
24
+ onchange,
25
+ onupload,
26
+ onerror,
27
+ children
28
+ }: {
29
+ elem_id?: string;
30
+ elem_classes?: string[];
31
+ visible?: boolean | "hidden";
32
+ label: string | null;
33
+ value?: null | FileData | FileData[];
34
+ file_count: string;
35
+ file_types?: string[];
36
+ root: string;
37
+ size?: "sm" | "md" | "lg";
38
+ icon?: FileData | null;
39
+ scale?: number | null;
40
+ min_width?: number | undefined;
41
+ variant?: "primary" | "secondary" | "stop";
42
+ disabled?: boolean;
43
+ max_file_size?: number | null;
44
+ upload: Client["upload"];
45
+ onclick?: () => void;
46
+ onchange?: (value: null | FileData | FileData[]) => void;
47
+ onupload?: (value: null | FileData | FileData[]) => void;
48
+ onerror?: (message: string) => void;
49
+ children?: import("svelte").Snippet;
50
+ } = $props();
24
51
 
25
52
  let hidden_upload: HTMLInputElement;
26
- let accept_file_types: string | null;
27
53
 
28
- if (file_types == null) {
29
- accept_file_types = null;
30
- } else {
31
- file_types = file_types.map((x) => {
54
+ let accept_file_types = $derived.by(() => {
55
+ if (file_types == null) {
56
+ return null;
57
+ }
58
+ const mapped = file_types.map((x) => {
32
59
  if (x.startsWith(".")) {
33
60
  return x;
34
61
  }
35
62
  return x + "/*";
36
63
  });
37
- accept_file_types = file_types.join(", ");
38
- }
64
+ return mapped.join(", ");
65
+ });
39
66
 
40
67
  function open_file_upload(): void {
41
- dispatch("click");
68
+ onclick?.();
42
69
  hidden_upload.click();
43
70
  }
44
71
 
@@ -59,12 +86,13 @@
59
86
  await upload(all_file_data, root, undefined, max_file_size ?? Infinity)
60
87
  )?.filter((x) => x !== null) as FileData[];
61
88
  } catch (e) {
62
- dispatch("error", (e as Error).message);
89
+ onerror?.((e as Error).message);
63
90
  return;
64
91
  }
65
- value = file_count === "single" ? all_file_data?.[0] : all_file_data;
66
- dispatch("change", value);
67
- dispatch("upload", value);
92
+ const new_value =
93
+ file_count === "single" ? all_file_data?.[0] : all_file_data;
94
+ onchange?.(new_value);
95
+ onupload?.(new_value);
68
96
  }
69
97
 
70
98
  async function load_files_from_upload(e: Event): Promise<void> {
@@ -85,8 +113,8 @@
85
113
  accept={accept_file_types}
86
114
  type="file"
87
115
  bind:this={hidden_upload}
88
- on:change={load_files_from_upload}
89
- on:click={clear_input_value}
116
+ onchange={load_files_from_upload}
117
+ onclick={clear_input_value}
90
118
  multiple={file_count === "multiple" || undefined}
91
119
  webkitdirectory={file_count === "directory" || undefined}
92
120
  mozdirectory={file_count === "directory" || undefined}
@@ -99,7 +127,7 @@
99
127
  {elem_id}
100
128
  {elem_classes}
101
129
  {visible}
102
- on:click={open_file_upload}
130
+ onclick={open_file_upload}
103
131
  {scale}
104
132
  {min_width}
105
133
  {disabled}
@@ -107,7 +135,7 @@
107
135
  {#if icon}
108
136
  <img class="button-icon" src={icon.url} alt={`${value} icon`} />
109
137
  {/if}
110
- <slot />
138
+ {#if children}{@render children()}{/if}
111
139
  </BaseButton>
112
140
 
113
141
  <style>