@gradio/button 0.5.14-dev.0 → 0.5.14

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 +34 -0
  2. package/Index.svelte +21 -29
  3. package/dist/Index.svelte +27 -28
  4. package/dist/Index.svelte.d.ts +7 -31
  5. package/dist/shared/Button.svelte +22 -16
  6. package/dist/shared/Button.svelte.d.ts +39 -30
  7. package/package.json +7 -7
  8. package/shared/Button.svelte +6 -3
package/CHANGELOG.md CHANGED
@@ -1,4 +1,38 @@
1
1
  # @gradio/button
2
+ ## 0.5.14
3
+
4
+ ### Features
5
+
6
+ - [#12438](https://github.com/gradio-app/gradio/pull/12438) [`25ffc03`](https://github.com/gradio-app/gradio/commit/25ffc0398f8feb43d817c02b2ab970c16de6d797) - Svelte5 migration and bugfix
7
+
8
+ ### Dependencies
9
+
10
+ - @gradio/client@2.0.0
11
+ - @gradio/image@0.24.0
12
+ - @gradio/upload@0.17.2
13
+ - @gradio/utils@0.10.3
14
+
15
+ ## 0.5.14-dev.2
16
+
17
+ ### Dependency updates
18
+
19
+ - @gradio/client@2.0.0-dev.2
20
+ - @gradio/upload@0.17.2-dev.2
21
+ - @gradio/image@0.24.0-dev.2
22
+
23
+ ## 0.5.14-dev.1
24
+
25
+ ### Dependency updates
26
+
27
+ - @gradio/upload@0.17.2-dev.1
28
+ - @gradio/utils@0.10.3-dev.0
29
+ - @gradio/image@0.23.2-dev.1
30
+
31
+ ## 0.5.14-dev.0
32
+
33
+ ### Dependency updates
34
+
35
+ - @gradio/client@2.0.0-dev.1
2
36
 
3
37
  ## 0.5.14-dev.0
4
38
 
package/Index.svelte CHANGED
@@ -3,40 +3,32 @@
3
3
  </script>
4
4
 
5
5
  <script lang="ts">
6
- import type { Gradio } from "@gradio/utils";
7
- import { type FileData } from "@gradio/client";
6
+ import { Gradio } from "@gradio/utils";
7
+ import type { SharedProps } from "@gradio/utils";
8
8
 
9
9
  import Button from "./shared/Button.svelte";
10
10
 
11
- export let elem_id = "";
12
- export let elem_classes: string[] = [];
13
- export let visible: boolean | "hidden" = true;
14
- export let value: string | null;
15
- export let variant: "primary" | "secondary" | "stop" = "secondary";
16
- export let interactive: boolean;
17
- export let size: "sm" | "lg" = "lg";
18
- export let scale: number | null = null;
19
- export let icon: FileData | null = null;
20
- export let link: string | null = null;
21
- export let min_width: number | undefined = undefined;
22
- export let gradio: Gradio<{
23
- click: never;
24
- }>;
11
+ let _props: { shared_props: SharedProps; props: {} } = $props();
12
+ const gradio = new Gradio<never, {}>(_props);
13
+
14
+ function handle_click() {
15
+ gradio.dispatch("click");
16
+ }
25
17
  </script>
26
18
 
27
19
  <Button
28
- {value}
29
- {variant}
30
- {elem_id}
31
- {elem_classes}
32
- {size}
33
- {scale}
34
- {link}
35
- {icon}
36
- {min_width}
37
- {visible}
38
- disabled={!interactive}
39
- on:click={() => gradio.dispatch("click")}
20
+ value={gradio.props.value}
21
+ variant={gradio.props.variant}
22
+ elem_id={gradio.shared.elem_id}
23
+ elem_classes={gradio.shared.elem_classes}
24
+ size={gradio.props.size}
25
+ scale={gradio.props.scale}
26
+ link={gradio.props.link}
27
+ icon={gradio.props.icon}
28
+ min_width={gradio.shared.min_width}
29
+ visible={gradio.shared.visible}
30
+ disabled={!gradio.shared.interactive}
31
+ on:click={handle_click}
40
32
  >
41
- {value ?? ""}
33
+ {gradio.props.value ?? ""}
42
34
  </Button>
package/dist/Index.svelte CHANGED
@@ -1,35 +1,34 @@
1
- <script context="module">export { default as BaseButton } from "./shared/Button.svelte";
1
+ <script context="module" lang="ts">
2
+ export { default as BaseButton } from "./shared/Button.svelte";
2
3
  </script>
3
4
 
4
- <script>import {} from "@gradio/client";
5
- import Button from "./shared/Button.svelte";
6
- export let elem_id = "";
7
- export let elem_classes = [];
8
- export let visible = true;
9
- export let value;
10
- export let variant = "secondary";
11
- export let interactive;
12
- export let size = "lg";
13
- export let scale = null;
14
- export let icon = null;
15
- export let link = null;
16
- export let min_width = void 0;
17
- export let gradio;
5
+ <script lang="ts">
6
+ import { Gradio } from "@gradio/utils";
7
+ import type { SharedProps } from "@gradio/utils";
8
+
9
+ import Button from "./shared/Button.svelte";
10
+
11
+ let _props: { shared_props: SharedProps; props: {} } = $props();
12
+ const gradio = new Gradio<never, {}>(_props);
13
+
14
+ function handle_click() {
15
+ gradio.dispatch("click");
16
+ }
18
17
  </script>
19
18
 
20
19
  <Button
21
- {value}
22
- {variant}
23
- {elem_id}
24
- {elem_classes}
25
- {size}
26
- {scale}
27
- {link}
28
- {icon}
29
- {min_width}
30
- {visible}
31
- disabled={!interactive}
32
- on:click={() => gradio.dispatch("click")}
20
+ value={gradio.props.value}
21
+ variant={gradio.props.variant}
22
+ elem_id={gradio.shared.elem_id}
23
+ elem_classes={gradio.shared.elem_classes}
24
+ size={gradio.props.size}
25
+ scale={gradio.props.scale}
26
+ link={gradio.props.link}
27
+ icon={gradio.props.icon}
28
+ min_width={gradio.shared.min_width}
29
+ visible={gradio.shared.visible}
30
+ disabled={!gradio.shared.interactive}
31
+ on:click={handle_click}
33
32
  >
34
- {value ?? ""}
33
+ {gradio.props.value ?? ""}
35
34
  </Button>
package/dist/Index.svelte.d.ts CHANGED
@@ -1,33 +1,9 @@
1
- import { SvelteComponent } from "svelte";
2
1
  export { default as BaseButton } from "./shared/Button.svelte";
3
- import type { Gradio } from "@gradio/utils";
4
- import { type FileData } from "@gradio/client";
5
- declare const __propDef: {
6
- props: {
7
- elem_id?: string;
8
- elem_classes?: string[];
9
- visible?: boolean | "hidden";
10
- value: string | null;
11
- variant?: "primary" | "secondary" | "stop";
12
- interactive: boolean;
13
- size?: "sm" | "lg";
14
- scale?: number | null;
15
- icon?: FileData | null;
16
- link?: string | null;
17
- min_width?: number | undefined;
18
- gradio: Gradio<{
19
- click: never;
20
- }>;
21
- };
22
- events: {
23
- [evt: string]: CustomEvent<any>;
24
- };
25
- slots: {};
26
- exports?: {} | undefined;
27
- bindings?: string | undefined;
2
+ import type { SharedProps } from "@gradio/utils";
3
+ type $$ComponentProps = {
4
+ shared_props: SharedProps;
5
+ props: {};
28
6
  };
29
- export type IndexProps = typeof __propDef.props;
30
- export type IndexEvents = typeof __propDef.events;
31
- export type IndexSlots = typeof __propDef.slots;
32
- export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
33
- }
7
+ declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
8
+ type Index = ReturnType<typeof Index>;
9
+ export default Index;
package/dist/shared/Button.svelte CHANGED
@@ -1,16 +1,19 @@
1
- <script>import {} from "@gradio/client";
2
- import { Image } from "@gradio/image/shared";
3
- export let elem_id = "";
4
- export let elem_classes = [];
5
- export let visible = true;
6
- export let variant = "secondary";
7
- export let size = "lg";
8
- export let value = null;
9
- export let link = null;
10
- export let icon = null;
11
- export let disabled = false;
12
- export let scale = null;
13
- export let min_width = void 0;
1
+ <script lang="ts">
2
+ import { type FileData } from "@gradio/client";
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 icon: FileData | null = null;
14
+ export let disabled = false;
15
+ export let scale: number | null = null;
16
+ export let min_width: number | undefined = undefined;
14
17
  </script>
15
18
 
16
19
  {#if link && link.length > 0}
@@ -30,7 +33,10 @@ export let min_width = void 0;
30
33
  id={elem_id}
31
34
  >
32
35
  {#if icon}
33
- <Image class="button-icon" src={icon.url} alt={`${value} icon`} />
36
+ <Image
37
+ src={icon.url}
38
+ restProps={{ alt: `${value} icon`, class: "button-icon" }}
39
+ />
34
40
  {/if}
35
41
  <slot />
36
42
  </a>
@@ -49,9 +55,9 @@ export let min_width = void 0;
49
55
  >
50
56
  {#if icon}
51
57
  <Image
52
- class={`button-icon ${value ? "right-padded" : ""}`}
58
+ restProps={{ alt: `${value} icon` }}
59
+ class_names={[`button-icon ${value ? "right-padded" : ""}`]}
53
60
  src={icon.url}
54
- alt={`${value} icon`}
55
61
  />
56
62
  {/if}
57
63
  <slot />
package/dist/shared/Button.svelte.d.ts CHANGED
@@ -1,33 +1,42 @@
1
- import { SvelteComponent } from "svelte";
2
1
  import { type FileData } from "@gradio/client";
3
- declare const __propDef: {
4
- props: {
5
- elem_id?: string;
6
- elem_classes?: string[];
7
- visible?: boolean | "hidden";
8
- variant?: "primary" | "secondary" | "stop" | "huggingface";
9
- size?: "sm" | "md" | "lg";
10
- value?: string | null;
11
- link?: string | null;
12
- icon?: FileData | null;
13
- disabled?: boolean;
14
- scale?: number | null;
15
- min_width?: number | undefined;
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;
16
12
  };
17
- events: {
18
- click: MouseEvent;
19
- } & {
20
- [evt: string]: CustomEvent<any>;
21
- };
22
- slots: {
23
- default: {};
24
- };
25
- exports?: {} | undefined;
26
- bindings?: string | undefined;
27
- };
28
- export type ButtonProps = typeof __propDef.props;
29
- export type ButtonEvents = typeof __propDef.events;
30
- export type ButtonSlots = typeof __propDef.slots;
31
- export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
13
+ z_$$bindings?: Bindings;
32
14
  }
33
- export {};
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
+ icon?: FileData | null;
29
+ disabled?: boolean;
30
+ scale?: number | null;
31
+ min_width?: number | undefined;
32
+ }, {
33
+ default: {};
34
+ }>, {
35
+ click: PointerEvent;
36
+ } & {
37
+ [evt: string]: CustomEvent<any>;
38
+ }, {
39
+ default: {};
40
+ }, {}, string>;
41
+ type Button = InstanceType<typeof Button>;
42
+ export default Button;
package/package.json CHANGED
@@ -1,19 +1,19 @@
1
1
  {
2
2
  "name": "@gradio/button",
3
- "version": "0.5.14-dev.0",
3
+ "version": "0.5.14",
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/utils": "^0.10.2",
11
- "@gradio/client": "^2.0.0-dev.0",
12
- "@gradio/image": "^0.23.2-dev.0",
13
- "@gradio/upload": "^0.17.2-dev.0"
10
+ "@gradio/client": "^2.0.0",
11
+ "@gradio/upload": "^0.17.2",
12
+ "@gradio/utils": "^0.10.3",
13
+ "@gradio/image": "^0.24.0"
14
14
  },
15
15
  "devDependencies": {
16
- "@gradio/preview": "^0.14.0"
16
+ "@gradio/preview": "^0.15.0"
17
17
  },
18
18
  "main": "./Index.svelte",
19
19
  "main_changeset": true,
@@ -26,7 +26,7 @@
26
26
  }
27
27
  },
28
28
  "peerDependencies": {
29
- "svelte": "^4.0.0"
29
+ "svelte": "^5.43.4"
30
30
  },
31
31
  "repository": {
32
32
  "type": "git",
package/shared/Button.svelte CHANGED
@@ -33,7 +33,10 @@
33
33
  id={elem_id}
34
34
  >
35
35
  {#if icon}
36
- <Image class="button-icon" src={icon.url} alt={`${value} icon`} />
36
+ <Image
37
+ src={icon.url}
38
+ restProps={{ alt: `${value} icon`, class: "button-icon" }}
39
+ />
37
40
  {/if}
38
41
  <slot />
39
42
  </a>
@@ -52,9 +55,9 @@
52
55
  >
53
56
  {#if icon}
54
57
  <Image
55
- class={`button-icon ${value ? "right-padded" : ""}`}
58
+ restProps={{ alt: `${value} icon` }}
59
+ class_names={[`button-icon ${value ? "right-padded" : ""}`]}
56
60
  src={icon.url}
57
- alt={`${value} icon`}
58
61
  />
59
62
  {/if}
60
63
  <slot />