@gradio/code 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,4 +1,24 @@
 # @gradio/code
+
+## 0.17.0
+
+### Features
+
+- [#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!
+
+### Dependency updates
+
+- @gradio/atoms@0.20.0
+- @gradio/utils@0.11.0
+- @gradio/statustracker@0.12.1
+- @gradio/upload@0.17.3
+
+## 0.16.0
+
+### Dependency updates
+
+- @gradio/utils@0.10.4
+
 ## 0.16.0
 
 ### Features

package/Index.svelte

@@ -69,7 +69,14 @@
 			<CodeIcon />
 		</Empty>
 	{:else}
-		<Widget language={gradio.props.language} value={gradio.props.value} />
+		<Widget
+			language={gradio.props.language}
+			value={gradio.props.value}
+			buttons={gradio.props.buttons ?? ["copy", "download"]}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
+		/>
 
 		<Code
 			bind:value={gradio.props.value}

package/dist/Index.svelte

@@ -69,7 +69,14 @@
 			<CodeIcon />
 		</Empty>
 	{:else}
-		<Widget language={gradio.props.language} value={gradio.props.value} />
+		<Widget
+			language={gradio.props.language}
+			value={gradio.props.value}
+			buttons={gradio.props.buttons ?? ["copy", "download"]}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
+		/>
 
 		<Code
 			bind:value={gradio.props.value}

package/dist/shared/Widgets.svelte

@@ -2,12 +2,19 @@
 	import Copy from "./Copy.svelte";
 	import Download from "./Download.svelte";
 	import { IconButtonWrapper } from "@gradio/atoms";
+	import type { CustomButton as CustomButtonType } from "@gradio/utils";
 
 	export let value: string;
 	export let language: string;
+	export let buttons: (string | CustomButtonType)[] | null = null;
+	export let on_custom_button_click: ((id: number) => void) | null = null;
 </script>
 
-<IconButtonWrapper>
-	<Download {value} {language} />
-	<Copy {value} />
+<IconButtonWrapper {buttons} {on_custom_button_click}>
+	{#if buttons?.some((btn) => typeof btn === "string" && btn === "download")}
+		<Download {value} {language} />
+	{/if}
+	{#if buttons?.some((btn) => typeof btn === "string" && btn === "copy")}
+		<Copy {value} />
+	{/if}
 </IconButtonWrapper>

package/dist/shared/Widgets.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { CustomButton as CustomButtonType } from "@gradio/utils";
 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> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -14,6 +15,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const Widgets: $$__sveltets_2_IsomorphicComponent<{
     value: string;
     language: string;
+    buttons?: (string | CustomButtonType)[] | null;
+    on_custom_button_click?: ((id: number) => void) | null;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import type { CustomButton } from "@gradio/utils";
 export interface CodeProps {
     value: string;
     language: string;
@@ -6,6 +7,7 @@ export interface CodeProps {
     show_line_numbers: boolean;
     autocomplete: boolean;
     lines: number;
+    buttons: (string | CustomButton)[] | null;
 }
 export interface CodeEvents {
     change: any;
@@ -13,4 +15,7 @@ export interface CodeEvents {
     focus: any;
     blur: any;
     clear_status: any;
+    custom_button_click: {
+        id: number;
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/code",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -27,11 +27,11 @@
     "cm6-theme-basic-dark": "^0.2.0",
     "cm6-theme-basic-light": "^0.2.0",
     "codemirror": "^6.0.2",
-    "@gradio/statustracker": "^0.12.0",
-    "@gradio/utils": "^0.10.3",
-    "@gradio/upload": "^0.17.2",
-    "@gradio/atoms": "^0.19.0",
-    "@gradio/icons": "^0.15.0"
+    "@gradio/atoms": "^0.20.0",
+    "@gradio/icons": "^0.15.0",
+    "@gradio/upload": "^0.17.3",
+    "@gradio/statustracker": "^0.12.1",
+    "@gradio/utils": "^0.11.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",
@@ -51,7 +51,7 @@
     "./package.json": "./package.json"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.15.0"
+    "@gradio/preview": "^0.15.1"
   },
   "peerDependencies": {
     "svelte": "^5.43.4"

package/shared/Widgets.svelte

@@ -2,12 +2,19 @@
 	import Copy from "./Copy.svelte";
 	import Download from "./Download.svelte";
 	import { IconButtonWrapper } from "@gradio/atoms";
+	import type { CustomButton as CustomButtonType } from "@gradio/utils";
 
 	export let value: string;
 	export let language: string;
+	export let buttons: (string | CustomButtonType)[] | null = null;
+	export let on_custom_button_click: ((id: number) => void) | null = null;
 </script>
 
-<IconButtonWrapper>
-	<Download {value} {language} />
-	<Copy {value} />
+<IconButtonWrapper {buttons} {on_custom_button_click}>
+	{#if buttons?.some((btn) => typeof btn === "string" && btn === "download")}
+		<Download {value} {language} />
+	{/if}
+	{#if buttons?.some((btn) => typeof btn === "string" && btn === "copy")}
+		<Copy {value} />
+	{/if}
 </IconButtonWrapper>

package/types.ts

@@ -1,3 +1,5 @@
+import type { CustomButton } from "@gradio/utils";
+
 export interface CodeProps {
 	value: string;
 	language: string;
@@ -6,6 +8,7 @@ export interface CodeProps {
 	show_line_numbers: boolean;
 	autocomplete: boolean;
 	lines: number;
+	buttons: (string | CustomButton)[] | null;
 }
 
 export interface CodeEvents {
@@ -14,4 +17,5 @@ export interface CodeEvents {
 	focus: any;
 	blur: any;
 	clear_status: any;
+	custom_button_click: { id: number };
 }