@gradio/button 0.6.0 → 0.6.2

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 +20 -0
  2. package/Index.svelte +15 -3
  3. package/dist/Index.svelte +15 -3
  4. package/dist/Index.svelte.d.ts +13 -1
  5. package/dist/shared/Button.svelte +40 -17
  6. package/dist/shared/Button.svelte.d.ts +19 -41
  7. package/package.json +5 -5
  8. package/shared/Button.svelte +40 -17
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @gradio/button
2
2
 
3
+ ## 0.6.2
4
+
5
+ ### Fixes
6
+
7
+ - [#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!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/utils@0.11.1
12
+ - @gradio/client@2.0.2
13
+
14
+ ## 0.6.1
15
+
16
+ ### Dependency updates
17
+
18
+ - @gradio/utils@0.11.0
19
+ - @gradio/client@2.0.1
20
+ - @gradio/upload@0.17.3
21
+ - @gradio/image@0.25.0
22
+
3
23
  ## 0.6.0
4
24
 
5
25
  ### Features
package/Index.svelte CHANGED
@@ -7,9 +7,21 @@
7
7
  import type { SharedProps } from "@gradio/utils";
8
8
 
9
9
  import Button from "./shared/Button.svelte";
10
+ import type { FileData } from "client/js/src";
11
+ interface ButtonProps {
12
+ value: string | null;
13
+ variant: "primary" | "secondary" | "stop";
14
+ size: "sm" | "md" | "lg";
15
+ scale: number;
16
+ link: string | null;
17
+ icon: FileData | null;
18
+ link_target: "_self" | "_blank";
19
+ elem_id: string | null;
20
+ elem_classes?: string[];
21
+ }
10
22
 
11
- let _props: { shared_props: SharedProps; props: {} } = $props();
12
- const gradio = new Gradio<never, {}>(_props);
23
+ let _props: { shared_props: SharedProps; props: ButtonProps } = $props();
24
+ const gradio = new Gradio<never, ButtonProps>(_props);
13
25
 
14
26
  function handle_click() {
15
27
  gradio.dispatch("click");
@@ -29,7 +41,7 @@
29
41
  visible={gradio.shared.visible}
30
42
  disabled={!gradio.shared.interactive}
31
43
  link_target={gradio.props.link_target}
32
- on:click={handle_click}
44
+ onclick={handle_click}
33
45
  >
34
46
  {gradio.props.value ?? ""}
35
47
  </Button>
package/dist/Index.svelte CHANGED
@@ -7,9 +7,21 @@
7
7
  import type { SharedProps } from "@gradio/utils";
8
8
 
9
9
  import Button from "./shared/Button.svelte";
10
+ import type { FileData } from "client/js/src";
11
+ interface ButtonProps {
12
+ value: string | null;
13
+ variant: "primary" | "secondary" | "stop";
14
+ size: "sm" | "md" | "lg";
15
+ scale: number;
16
+ link: string | null;
17
+ icon: FileData | null;
18
+ link_target: "_self" | "_blank";
19
+ elem_id: string | null;
20
+ elem_classes?: string[];
21
+ }
10
22
 
11
- let _props: { shared_props: SharedProps; props: {} } = $props();
12
- const gradio = new Gradio<never, {}>(_props);
23
+ let _props: { shared_props: SharedProps; props: ButtonProps } = $props();
24
+ const gradio = new Gradio<never, ButtonProps>(_props);
13
25
 
14
26
  function handle_click() {
15
27
  gradio.dispatch("click");
@@ -29,7 +41,7 @@
29
41
  visible={gradio.shared.visible}
30
42
  disabled={!gradio.shared.interactive}
31
43
  link_target={gradio.props.link_target}
32
- on:click={handle_click}
44
+ onclick={handle_click}
33
45
  >
34
46
  {gradio.props.value ?? ""}
35
47
  </Button>
package/dist/Index.svelte.d.ts CHANGED
@@ -1,8 +1,20 @@
1
1
  export { default as BaseButton } from "./shared/Button.svelte";
2
2
  import type { SharedProps } from "@gradio/utils";
3
+ import type { FileData } from "client/js/src";
4
+ interface ButtonProps {
5
+ value: string | null;
6
+ variant: "primary" | "secondary" | "stop";
7
+ size: "sm" | "md" | "lg";
8
+ scale: number;
9
+ link: string | null;
10
+ icon: FileData | null;
11
+ link_target: "_self" | "_blank";
12
+ elem_id: string | null;
13
+ elem_classes?: string[];
14
+ }
3
15
  type $$ComponentProps = {
4
16
  shared_props: SharedProps;
5
- props: {};
17
+ props: ButtonProps;
6
18
  };
7
19
  declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
8
20
  type Index = ReturnType<typeof Index>;
package/dist/shared/Button.svelte CHANGED
@@ -1,20 +1,39 @@
1
1
  <script lang="ts">
2
2
  import { type FileData } from "@gradio/client";
3
3
  import { Image } from "@gradio/image/shared";
4
-
5
- export let elem_id = "";
6
- export let elem_classes: string[] = [];
7
- export let visible: boolean | "hidden" = true;
8
- export let variant: "primary" | "secondary" | "stop" | "huggingface" =
9
- "secondary";
10
- export let size: "sm" | "md" | "lg" = "lg";
11
- export let value: string | null = null;
12
- export let link: string | null = null;
13
- export let link_target: "_self" | "_blank" | "_parent" | "_top" = "_self";
14
- export let icon: FileData | null = null;
15
- export let disabled = false;
16
- export let scale: number | null = null;
17
- export let min_width: number | undefined = undefined;
4
+ import { type Snippet } from "svelte";
5
+
6
+ let {
7
+ elem_id,
8
+ elem_classes = [],
9
+ visible,
10
+ variant,
11
+ size,
12
+ value,
13
+ link,
14
+ link_target,
15
+ icon,
16
+ disabled,
17
+ scale,
18
+ min_width,
19
+ onclick = () => {},
20
+ children
21
+ }: {
22
+ elem_id: string | null;
23
+ elem_classes: string[] | null;
24
+ visible: boolean | "hidden";
25
+ variant: "primary" | "secondary" | "stop" | "huggingface";
26
+ size: "sm" | "md" | "lg";
27
+ value: string | null;
28
+ link: string | null;
29
+ link_target: "_self" | "_blank" | "_parent" | "_top";
30
+ icon: FileData | null;
31
+ disabled: boolean;
32
+ scale: number | null;
33
+ min_width: number | undefined;
34
+ onclick: () => void;
35
+ children?: Snippet;
36
+ } = $props();
18
37
  </script>
19
38
 
20
39
  {#if link && link.length > 0}
@@ -40,11 +59,13 @@
40
59
  restProps={{ alt: `${value} icon`, class: "button-icon" }}
41
60
  />
42
61
  {/if}
43
- <slot />
62
+ {#if children}
63
+ {@render children()}
64
+ {/if}
44
65
  </a>
45
66
  {:else}
46
67
  <button
47
- on:click
68
+ {onclick}
48
69
  class:hidden={visible === false || visible === "hidden"}
49
70
  class="{size} {variant} {elem_classes.join(' ')}"
50
71
  style:flex-grow={scale}
@@ -62,7 +83,9 @@
62
83
  src={icon.url}
63
84
  />
64
85
  {/if}
65
- <slot />
86
+ {#if children}
87
+ {@render children()}
88
+ {/if}
66
89
  </button>
67
90
  {/if}
68
91
 
package/dist/shared/Button.svelte.d.ts CHANGED
@@ -1,43 +1,21 @@
1
1
  import { type FileData } 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 Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
21
- elem_id?: string;
22
- elem_classes?: string[];
23
- visible?: boolean | "hidden";
24
- variant?: "primary" | "secondary" | "stop" | "huggingface";
25
- size?: "sm" | "md" | "lg";
26
- value?: string | null;
27
- link?: string | null;
28
- link_target?: "_self" | "_blank" | "_parent" | "_top";
29
- icon?: FileData | null;
30
- disabled?: boolean;
31
- scale?: number | null;
32
- min_width?: number | undefined;
33
- }, {
34
- default: {};
35
- }>, {
36
- click: PointerEvent;
37
- } & {
38
- [evt: string]: CustomEvent<any>;
39
- }, {
40
- default: {};
41
- }, {}, string>;
42
- type Button = InstanceType<typeof Button>;
2
+ import { type Snippet } from "svelte";
3
+ type $$ComponentProps = {
4
+ elem_id: string | null;
5
+ elem_classes: string[] | null;
6
+ visible: boolean | "hidden";
7
+ variant: "primary" | "secondary" | "stop" | "huggingface";
8
+ size: "sm" | "md" | "lg";
9
+ value: string | null;
10
+ link: string | null;
11
+ link_target: "_self" | "_blank" | "_parent" | "_top";
12
+ icon: FileData | null;
13
+ disabled: boolean;
14
+ scale: number | null;
15
+ min_width: number | undefined;
16
+ onclick: () => void;
17
+ children?: Snippet;
18
+ };
19
+ declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
20
+ type Button = ReturnType<typeof Button>;
43
21
  export default Button;
package/package.json CHANGED
@@ -1,16 +1,16 @@
1
1
  {
2
2
  "name": "@gradio/button",
3
- "version": "0.6.0",
3
+ "version": "0.6.2",
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/client": "^2.0.0",
11
- "@gradio/utils": "^0.10.4",
12
- "@gradio/image": "^0.24.0",
13
- "@gradio/upload": "^0.17.2"
10
+ "@gradio/upload": "^0.17.3",
11
+ "@gradio/image": "^0.25.0",
12
+ "@gradio/client": "^2.0.2",
13
+ "@gradio/utils": "^0.11.1"
14
14
  },
15
15
  "devDependencies": {
16
16
  "@gradio/preview": "^0.15.1"
package/shared/Button.svelte CHANGED
@@ -1,20 +1,39 @@
1
1
  <script lang="ts">
2
2
  import { type FileData } from "@gradio/client";
3
3
  import { Image } from "@gradio/image/shared";
4
-
5
- export let elem_id = "";
6
- export let elem_classes: string[] = [];
7
- export let visible: boolean | "hidden" = true;
8
- export let variant: "primary" | "secondary" | "stop" | "huggingface" =
9
- "secondary";
10
- export let size: "sm" | "md" | "lg" = "lg";
11
- export let value: string | null = null;
12
- export let link: string | null = null;
13
- export let link_target: "_self" | "_blank" | "_parent" | "_top" = "_self";
14
- export let icon: FileData | null = null;
15
- export let disabled = false;
16
- export let scale: number | null = null;
17
- export let min_width: number | undefined = undefined;
4
+ import { type Snippet } from "svelte";
5
+
6
+ let {
7
+ elem_id,
8
+ elem_classes = [],
9
+ visible,
10
+ variant,
11
+ size,
12
+ value,
13
+ link,
14
+ link_target,
15
+ icon,
16
+ disabled,
17
+ scale,
18
+ min_width,
19
+ onclick = () => {},
20
+ children
21
+ }: {
22
+ elem_id: string | null;
23
+ elem_classes: string[] | null;
24
+ visible: boolean | "hidden";
25
+ variant: "primary" | "secondary" | "stop" | "huggingface";
26
+ size: "sm" | "md" | "lg";
27
+ value: string | null;
28
+ link: string | null;
29
+ link_target: "_self" | "_blank" | "_parent" | "_top";
30
+ icon: FileData | null;
31
+ disabled: boolean;
32
+ scale: number | null;
33
+ min_width: number | undefined;
34
+ onclick: () => void;
35
+ children?: Snippet;
36
+ } = $props();
18
37
  </script>
19
38
 
20
39
  {#if link && link.length > 0}
@@ -40,11 +59,13 @@
40
59
  restProps={{ alt: `${value} icon`, class: "button-icon" }}
41
60
  />
42
61
  {/if}
43
- <slot />
62
+ {#if children}
63
+ {@render children()}
64
+ {/if}
44
65
  </a>
45
66
  {:else}
46
67
  <button
47
- on:click
68
+ {onclick}
48
69
  class:hidden={visible === false || visible === "hidden"}
49
70
  class="{size} {variant} {elem_classes.join(' ')}"
50
71
  style:flex-grow={scale}
@@ -62,7 +83,9 @@
62
83
  src={icon.url}
63
84
  />
64
85
  {/if}
65
- <slot />
86
+ {#if children}
87
+ {@render children()}
88
+ {/if}
66
89
  </button>
67
90
  {/if}
68
91