@gradio/button 0.2.50 → 0.2.51
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.
- package/CHANGELOG.md +12 -0
- package/dist/Index.svelte +35 -0
- package/dist/Index.svelte.d.ts +31 -0
- package/dist/main.d.ts +2 -0
- package/dist/main.js +2 -0
- package/dist/shared/Button.svelte +149 -0
- package/dist/shared/Button.svelte.d.ts +31 -0
- package/package.json +14 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @gradio/button
|
|
2
2
|
|
|
3
|
+
## 0.2.51
|
|
4
|
+
|
|
5
|
+
### Fixes
|
|
6
|
+
|
|
7
|
+
- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types. Thanks @pngwn!
|
|
8
|
+
|
|
9
|
+
### Dependency updates
|
|
10
|
+
|
|
11
|
+
- @gradio/utils@0.6.1
|
|
12
|
+
- @gradio/client@1.5.2
|
|
13
|
+
- @gradio/upload@0.12.4
|
|
14
|
+
|
|
3
15
|
## 0.2.50
|
|
4
16
|
|
|
5
17
|
### Features
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<script context="module">export { default as BaseButton } from "./shared/Button.svelte";
|
|
2
|
+
</script>
|
|
3
|
+
|
|
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;
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<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")}
|
|
33
|
+
>
|
|
34
|
+
{value ? gradio.i18n(value) : ""}
|
|
35
|
+
</Button>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
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 | undefined;
|
|
8
|
+
elem_classes?: string[] | undefined;
|
|
9
|
+
visible?: boolean | undefined;
|
|
10
|
+
value: string | null;
|
|
11
|
+
variant?: ("primary" | "secondary" | "stop") | undefined;
|
|
12
|
+
interactive: boolean;
|
|
13
|
+
size?: ("sm" | "lg") | undefined;
|
|
14
|
+
scale?: (number | null) | undefined;
|
|
15
|
+
icon?: (FileData | null) | undefined;
|
|
16
|
+
link?: (string | null) | undefined;
|
|
17
|
+
min_width?: number | undefined;
|
|
18
|
+
gradio: Gradio<{
|
|
19
|
+
click: never;
|
|
20
|
+
}>;
|
|
21
|
+
};
|
|
22
|
+
events: {
|
|
23
|
+
[evt: string]: CustomEvent<any>;
|
|
24
|
+
};
|
|
25
|
+
slots: {};
|
|
26
|
+
};
|
|
27
|
+
export type IndexProps = typeof __propDef.props;
|
|
28
|
+
export type IndexEvents = typeof __propDef.events;
|
|
29
|
+
export type IndexSlots = typeof __propDef.slots;
|
|
30
|
+
export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
|
|
31
|
+
}
|
package/dist/main.d.ts
ADDED
package/dist/main.js
ADDED
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
<script>import {} from "@gradio/client";
|
|
2
|
+
export let elem_id = "";
|
|
3
|
+
export let elem_classes = [];
|
|
4
|
+
export let visible = true;
|
|
5
|
+
export let variant = "secondary";
|
|
6
|
+
export let size = "lg";
|
|
7
|
+
export let value = null;
|
|
8
|
+
export let link = null;
|
|
9
|
+
export let icon = null;
|
|
10
|
+
export let disabled = false;
|
|
11
|
+
export let scale = null;
|
|
12
|
+
export let min_width = void 0;
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
{#if link && link.length > 0}
|
|
16
|
+
<a
|
|
17
|
+
href={link}
|
|
18
|
+
rel="noopener noreferrer"
|
|
19
|
+
class:hidden={!visible}
|
|
20
|
+
class:disabled
|
|
21
|
+
aria-disabled={disabled}
|
|
22
|
+
class="{size} {variant} {elem_classes.join(' ')}"
|
|
23
|
+
style:flex-grow={scale}
|
|
24
|
+
style:pointer-events={disabled ? "none" : null}
|
|
25
|
+
style:width={scale === 0 ? "fit-content" : null}
|
|
26
|
+
style:min-width={typeof min_width === "number"
|
|
27
|
+
? `calc(min(${min_width}px, 100%))`
|
|
28
|
+
: null}
|
|
29
|
+
id={elem_id}
|
|
30
|
+
>
|
|
31
|
+
{#if icon}
|
|
32
|
+
<img class="button-icon" src={icon.url} alt={`${value} icon`} />
|
|
33
|
+
{/if}
|
|
34
|
+
<slot />
|
|
35
|
+
</a>
|
|
36
|
+
{:else}
|
|
37
|
+
<button
|
|
38
|
+
on:click
|
|
39
|
+
class:hidden={!visible}
|
|
40
|
+
class="{size} {variant} {elem_classes.join(' ')}"
|
|
41
|
+
style:flex-grow={scale}
|
|
42
|
+
style:width={scale === 0 ? "fit-content" : null}
|
|
43
|
+
style:min-width={typeof min_width === "number"
|
|
44
|
+
? `calc(min(${min_width}px, 100%))`
|
|
45
|
+
: null}
|
|
46
|
+
id={elem_id}
|
|
47
|
+
{disabled}
|
|
48
|
+
>
|
|
49
|
+
{#if icon}
|
|
50
|
+
<img class="button-icon" src={icon.url} alt={`${value} icon`} />
|
|
51
|
+
{/if}
|
|
52
|
+
<slot />
|
|
53
|
+
</button>
|
|
54
|
+
{/if}
|
|
55
|
+
|
|
56
|
+
<style>
|
|
57
|
+
button,
|
|
58
|
+
a {
|
|
59
|
+
display: inline-flex;
|
|
60
|
+
justify-content: center;
|
|
61
|
+
align-items: center;
|
|
62
|
+
transition: var(--button-transition);
|
|
63
|
+
box-shadow: var(--button-shadow);
|
|
64
|
+
padding: var(--size-0-5) var(--size-2);
|
|
65
|
+
text-align: center;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
button:hover,
|
|
69
|
+
button[disabled],
|
|
70
|
+
a:hover,
|
|
71
|
+
a.disabled {
|
|
72
|
+
box-shadow: var(--button-shadow-hover);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
button:active,
|
|
76
|
+
a:active {
|
|
77
|
+
box-shadow: var(--button-shadow-active);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
button[disabled],
|
|
81
|
+
a.disabled {
|
|
82
|
+
opacity: 0.5;
|
|
83
|
+
filter: grayscale(30%);
|
|
84
|
+
cursor: not-allowed;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.hidden {
|
|
88
|
+
display: none;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.primary {
|
|
92
|
+
border: var(--button-border-width) solid var(--button-primary-border-color);
|
|
93
|
+
background: var(--button-primary-background-fill);
|
|
94
|
+
color: var(--button-primary-text-color);
|
|
95
|
+
}
|
|
96
|
+
.primary:hover,
|
|
97
|
+
.primary[disabled] {
|
|
98
|
+
border-color: var(--button-primary-border-color-hover);
|
|
99
|
+
background: var(--button-primary-background-fill-hover);
|
|
100
|
+
color: var(--button-primary-text-color-hover);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.secondary {
|
|
104
|
+
border: var(--button-border-width) solid
|
|
105
|
+
var(--button-secondary-border-color);
|
|
106
|
+
background: var(--button-secondary-background-fill);
|
|
107
|
+
color: var(--button-secondary-text-color);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.secondary:hover,
|
|
111
|
+
.secondary[disabled] {
|
|
112
|
+
border-color: var(--button-secondary-border-color-hover);
|
|
113
|
+
background: var(--button-secondary-background-fill-hover);
|
|
114
|
+
color: var(--button-secondary-text-color-hover);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.stop {
|
|
118
|
+
border: var(--button-border-width) solid var(--button-cancel-border-color);
|
|
119
|
+
background: var(--button-cancel-background-fill);
|
|
120
|
+
color: var(--button-cancel-text-color);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.stop:hover,
|
|
124
|
+
.stop[disabled] {
|
|
125
|
+
border-color: var(--button-cancel-border-color-hover);
|
|
126
|
+
background: var(--button-cancel-background-fill-hover);
|
|
127
|
+
color: var(--button-cancel-text-color-hover);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.sm {
|
|
131
|
+
border-radius: var(--button-small-radius);
|
|
132
|
+
padding: var(--button-small-padding);
|
|
133
|
+
font-weight: var(--button-small-text-weight);
|
|
134
|
+
font-size: var(--button-small-text-size);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.lg {
|
|
138
|
+
border-radius: var(--button-large-radius);
|
|
139
|
+
padding: var(--button-large-padding);
|
|
140
|
+
font-weight: var(--button-large-text-weight);
|
|
141
|
+
font-size: var(--button-large-text-size);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.button-icon {
|
|
145
|
+
width: var(--text-xl);
|
|
146
|
+
height: var(--text-xl);
|
|
147
|
+
margin-right: var(--spacing-xl);
|
|
148
|
+
}
|
|
149
|
+
</style>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import { type FileData } from "@gradio/client";
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
elem_id?: string | undefined;
|
|
6
|
+
elem_classes?: string[] | undefined;
|
|
7
|
+
visible?: boolean | undefined;
|
|
8
|
+
variant?: ("primary" | "secondary" | "stop") | undefined;
|
|
9
|
+
size?: ("sm" | "lg") | undefined;
|
|
10
|
+
value?: (string | null) | undefined;
|
|
11
|
+
link?: (string | null) | undefined;
|
|
12
|
+
icon?: (FileData | null) | undefined;
|
|
13
|
+
disabled?: boolean | undefined;
|
|
14
|
+
scale?: (number | null) | undefined;
|
|
15
|
+
min_width?: number | undefined;
|
|
16
|
+
};
|
|
17
|
+
events: {
|
|
18
|
+
click: MouseEvent;
|
|
19
|
+
} & {
|
|
20
|
+
[evt: string]: CustomEvent<any>;
|
|
21
|
+
};
|
|
22
|
+
slots: {
|
|
23
|
+
default: {};
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
export type ButtonProps = typeof __propDef.props;
|
|
27
|
+
export type ButtonEvents = typeof __propDef.events;
|
|
28
|
+
export type ButtonSlots = typeof __propDef.slots;
|
|
29
|
+
export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
|
|
30
|
+
}
|
|
31
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,24 +1,31 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/button",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.51",
|
|
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": "^1.5.
|
|
11
|
-
"@gradio/
|
|
12
|
-
"@gradio/
|
|
10
|
+
"@gradio/client": "^1.5.2",
|
|
11
|
+
"@gradio/utils": "^0.6.1",
|
|
12
|
+
"@gradio/upload": "^0.12.4"
|
|
13
13
|
},
|
|
14
14
|
"devDependencies": {
|
|
15
|
-
"@gradio/preview": "^0.11.
|
|
15
|
+
"@gradio/preview": "^0.11.1"
|
|
16
16
|
},
|
|
17
17
|
"main": "./Index.svelte",
|
|
18
18
|
"main_changeset": true,
|
|
19
19
|
"exports": {
|
|
20
|
-
".": "./
|
|
21
|
-
"
|
|
20
|
+
"./package.json": "./package.json",
|
|
21
|
+
".": {
|
|
22
|
+
"gradio": "./Index.svelte",
|
|
23
|
+
"svelte": "./dist/Index.svelte",
|
|
24
|
+
"types": "./dist/Index.svelte.d.ts"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"peerDependencies": {
|
|
28
|
+
"svelte": "^4.0.0"
|
|
22
29
|
},
|
|
23
30
|
"repository": {
|
|
24
31
|
"type": "git",
|