@gradio/draggable 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,4 +1,44 @@
 # @gradio/draggable
+## 0.3.0
+
+### Features
+
+- [#12438](https://github.com/gradio-app/gradio/pull/12438) [`25ffc03`](https://github.com/gradio-app/gradio/commit/25ffc0398f8feb43d817c02b2ab970c16de6d797) - Svelte5 migration and bugfix
+
+## 0.2.1
+
+### Dependency updates
+
+- @gradio/statustracker@0.12.0-dev.1
+
+## 0.2.1
+
+### Dependency updates
+
+- @gradio/utils@0.10.3-dev.0
+- @gradio/statustracker@0.12.0-dev.0
+
+## 0.2.1
+
+### Fixes
+
+- [#11784](https://github.com/gradio-app/gradio/pull/11784) [`d9dd3f5`](https://github.com/gradio-app/gradio/commit/d9dd3f54b7fb34cf7118e549d39fc63937ca3489) - Add "hidden" option to component's `visible` kwarg to render but visually hide the component.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/statustracker@0.11.1
+
+## 0.2.0
+
+### Dependency updates
+
+- @gradio/statustracker@0.11.0
+
+## 0.2.0
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.18
 
 ## 0.2.0
 

package/Index.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
+	import type { DraggableProps, DraggableEvents } from "./types";
+	import { Gradio } from "@gradio/utils";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import type { Gradio } from "@gradio/utils";
 	import { onMount, tick } from "svelte";
 
-	export let elem_id: string;
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export let orientation: "row" | "column" = "row";
-	export let loading_status: LoadingStatus | undefined = undefined;
-	export let gradio: Gradio | undefined = undefined;
-	export let show_progress = false;
+	const props = $props();
+	const gradio = new Gradio<DraggableEvents, DraggableProps>(props);
 
 	let container_el: HTMLDivElement;
 	let dragged_el: HTMLElement | null = null;
@@ -267,23 +262,23 @@
 
 <div
 	bind:this={container_el}
-	class:hide={!visible}
-	class:horizontal={orientation === "row"}
-	class:vertical={orientation === "column"}
-	id={elem_id}
-	class="draggable {elem_classes.join(' ')}"
+	class:hide={!gradio.shared.visible}
+	class:horizontal={gradio.props.orientation === "row"}
+	class:vertical={gradio.props.orientation === "column"}
+	id={gradio.shared.elem_id}
+	class="draggable {(gradio.shared.elem_classes || []).join(' ')}"
 	role="region"
 	aria-label="Draggable items container"
 >
-	{#if loading_status && show_progress && gradio}
+	{#if gradio.shared.loading_status && gradio.props.show_progress}
 		<StatusTracker
-			autoscroll={gradio.autoscroll}
+			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
-			{...loading_status}
-			status={loading_status
-				? loading_status.status == "pending"
+			{...gradio.shared.loading_status}
+			status={gradio.shared.loading_status
+				? gradio.shared.loading_status.status == "pending"
 					? "generating"
-					: loading_status.status
+					: gradio.shared.loading_status.status
 				: null}
 		/>
 	{/if}

package/dist/Index.svelte

@@ -1,218 +1,284 @@
-<script>import { StatusTracker } from "@gradio/statustracker";
-import { onMount, tick } from "svelte";
-export let elem_id;
-export let elem_classes = [];
-export let visible = true;
-export let orientation = "row";
-export let loading_status = void 0;
-export let gradio = void 0;
-export let show_progress = false;
-let container_el;
-let dragged_el = null;
-let dragged_index = -1;
-let items = [];
-let current_drop_target = null;
-const drag_event_handlers = [
-  { event: "dragstart", handler: handle_drag_start },
-  { event: "dragend", handler: handle_drag_end }
-];
-const drop_event_handlers = [
-  { event: "dragover", handler: handle_drag_over },
-  { event: "drop", handler: handle_drop },
-  { event: "dragenter", handler: handle_drag_enter }
-];
-function add_drag_listeners(element) {
-  drag_event_handlers.forEach(({ event, handler }) => {
-    element.addEventListener(event, handler);
-  });
-}
-function remove_drag_listeners(element) {
-  drag_event_handlers.forEach(({ event, handler }) => {
-    element.removeEventListener(event, handler);
-  });
-}
-function add_drop_listeners(element) {
-  drop_event_handlers.forEach(({ event, handler }) => {
-    element.addEventListener(event, handler);
-  });
-}
-function remove_drop_listeners(element) {
-  drop_event_handlers.forEach(({ event, handler }) => {
-    element.removeEventListener(event, handler);
-  });
-}
-function setup_draggable_item(element, index) {
-  element.classList.add("draggable-item");
-  element.setAttribute("data-index", index.toString());
-  element.style.position = "relative";
-  const handle = document.createElement("div");
-  handle.className = "drag-handle";
-  handle.setAttribute("draggable", "true");
-  handle.setAttribute("aria-grabbed", "false");
-  handle.setAttribute("data-index", index.toString());
-  handle.innerHTML = "\u22EE\u22EE";
-  element.appendChild(handle);
-  add_drag_listeners(handle);
-  add_drop_listeners(element);
-}
-function setup_drag_and_drop() {
-  if (!container_el) return;
-  items.forEach((item) => {
-    const handle = item.querySelector(".drag-handle");
-    if (handle) {
-      remove_drag_listeners(handle);
-      handle.remove();
-    }
-    remove_drop_listeners(item);
-  });
-  items = [];
-  const children = Array.from(container_el.children);
-  let item_index = 0;
-  children.forEach((child) => {
-    if (child.classList.contains("status-tracker")) return;
-    if (child.classList.contains("form") && child.children.length > 0) {
-      const form_children = Array.from(child.children);
-      form_children.forEach((form_child) => {
-        items.push(form_child);
-        setup_draggable_item(form_child, item_index);
-        item_index++;
-      });
-    } else {
-      items.push(child);
-      setup_draggable_item(child, item_index);
-      item_index++;
-    }
-  });
-}
-function handle_drag_start(e) {
-  e.stopPropagation?.();
-  const handle = e.currentTarget;
-  const element = handle.parentElement;
-  dragged_el = element;
-  dragged_index = parseInt(handle.dataset.index || "-1");
-  handle.setAttribute("aria-grabbed", "true");
-  element.classList.add("dragging");
-  if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/html", element.outerHTML);
-    e.dataTransfer.setDragImage(element, 10, 10);
-  }
-}
-function handle_drag_end(e) {
-  e.stopPropagation?.();
-  const handle = e.currentTarget;
-  const element = handle.parentElement;
-  element.classList.remove("dragging");
-  handle.setAttribute("aria-grabbed", "false");
-  if (current_drop_target) {
-    current_drop_target.classList.remove("drop-target");
-    current_drop_target = null;
-  }
-  dragged_el = null;
-  dragged_index = -1;
-}
-function handle_drag_over(e) {
-  e.preventDefault();
-  e.dataTransfer && (e.dataTransfer.dropEffect = "move");
-  return false;
-}
-function handle_drag_enter(e) {
-  e.stopPropagation?.();
-  const target = e.currentTarget;
-  if (target === dragged_el) return;
-  if (!dragged_el || !container_el) return;
-  const dragged_parent = dragged_el.parentElement;
-  const target_parent = target.parentElement;
-  const is_dragged_in_form = dragged_parent?.classList.contains("form") && dragged_parent.parentElement === container_el;
-  const is_target_in_form = target_parent?.classList.contains("form") && target_parent.parentElement === container_el;
-  const is_dragged_direct = dragged_parent === container_el;
-  const is_target_direct = target_parent === container_el;
-  if (!((is_dragged_in_form || is_dragged_direct) && (is_target_in_form || is_target_direct))) {
-    return;
-  }
-  if (current_drop_target && current_drop_target !== target) {
-    current_drop_target.classList.remove("drop-target");
-  }
-  target.classList.add("drop-target");
-  current_drop_target = target;
-}
-async function handle_drop(e) {
-  e.stopPropagation?.();
-  const target = e.currentTarget;
-  target.classList.remove("drop-target");
-  if (current_drop_target) {
-    current_drop_target.classList.remove("drop-target");
-    current_drop_target = null;
-  }
-  if (dragged_el && dragged_el !== target && container_el) {
-    const dragged_parent = dragged_el.parentElement;
-    const target_parent = target.parentElement;
-    const is_dragged_in_form = dragged_parent?.classList.contains("form") && dragged_parent.parentElement === container_el;
-    const is_target_in_form = target_parent?.classList.contains("form") && target_parent.parentElement === container_el;
-    const is_dragged_direct = dragged_parent === container_el;
-    const is_target_direct = target_parent === container_el;
-    if (!((is_dragged_in_form || is_dragged_direct) && (is_target_in_form || is_target_direct))) {
-      return false;
-    }
-    const placeholder = document.createElement("div");
-    placeholder.style.display = "none";
-    dragged_parent.insertBefore(placeholder, dragged_el);
-    target_parent.insertBefore(dragged_el, target);
-    dragged_parent.insertBefore(target, placeholder);
-    placeholder.remove();
-    dragged_el?.classList.remove("dragging");
-    const dragged_handle = dragged_el?.querySelector(
-      ".drag-handle"
-    );
-    if (dragged_handle) {
-      dragged_handle.setAttribute("aria-grabbed", "false");
-    }
-    await tick();
-    setup_drag_and_drop();
-  }
-  return false;
-}
-onMount(() => {
-  setup_drag_and_drop();
-  const observer = new MutationObserver(setup_drag_and_drop);
-  if (container_el) {
-    observer.observe(container_el, {
-      childList: true,
-      subtree: false
-    });
-  }
-  return () => {
-    observer.disconnect();
-    items.forEach((item) => {
-      const handle = item.querySelector(".drag-handle");
-      if (handle) {
-        remove_drag_listeners(handle);
-      }
-      remove_drop_listeners(item);
-    });
-  };
-});
+<script lang="ts">
+	import type { DraggableProps, DraggableEvents } from "./types";
+	import { Gradio } from "@gradio/utils";
+	import { StatusTracker } from "@gradio/statustracker";
+	import { onMount, tick } from "svelte";
+
+	const props = $props();
+	const gradio = new Gradio<DraggableEvents, DraggableProps>(props);
+
+	let container_el: HTMLDivElement;
+	let dragged_el: HTMLElement | null = null;
+	let dragged_index = -1;
+	let items: HTMLElement[] = [];
+	let current_drop_target: HTMLElement | null = null;
+
+	const drag_event_handlers = [
+		{ event: "dragstart", handler: handle_drag_start },
+		{ event: "dragend", handler: handle_drag_end }
+	] as const;
+
+	const drop_event_handlers = [
+		{ event: "dragover", handler: handle_drag_over },
+		{ event: "drop", handler: handle_drop },
+		{ event: "dragenter", handler: handle_drag_enter }
+	] as const;
+
+	function add_drag_listeners(element: HTMLElement): void {
+		drag_event_handlers.forEach(({ event, handler }) => {
+			element.addEventListener(event, handler);
+		});
+	}
+
+	function remove_drag_listeners(element: HTMLElement): void {
+		drag_event_handlers.forEach(({ event, handler }) => {
+			element.removeEventListener(event, handler);
+		});
+	}
+
+	function add_drop_listeners(element: HTMLElement): void {
+		drop_event_handlers.forEach(({ event, handler }) => {
+			element.addEventListener(event, handler);
+		});
+	}
+
+	function remove_drop_listeners(element: HTMLElement): void {
+		drop_event_handlers.forEach(({ event, handler }) => {
+			element.removeEventListener(event, handler);
+		});
+	}
+
+	function setup_draggable_item(element: HTMLElement, index: number): void {
+		element.classList.add("draggable-item");
+		element.setAttribute("data-index", index.toString());
+		element.style.position = "relative";
+
+		const handle = document.createElement("div");
+		handle.className = "drag-handle";
+		handle.setAttribute("draggable", "true");
+		handle.setAttribute("aria-grabbed", "false");
+		handle.setAttribute("data-index", index.toString());
+		handle.innerHTML = "⋮⋮";
+
+		element.appendChild(handle);
+		add_drag_listeners(handle);
+		add_drop_listeners(element);
+	}
+
+	function setup_drag_and_drop(): void {
+		if (!container_el) return;
+
+		items.forEach((item) => {
+			const handle = item.querySelector(".drag-handle");
+			if (handle) {
+				remove_drag_listeners(handle as HTMLElement);
+				handle.remove();
+			}
+			remove_drop_listeners(item);
+		});
+		items = [];
+
+		const children = Array.from(container_el.children) as HTMLElement[];
+		let item_index = 0;
+
+		children.forEach((child) => {
+			if (child.classList.contains("status-tracker")) return;
+
+			if (child.classList.contains("form") && child.children.length > 0) {
+				const form_children = Array.from(child.children) as HTMLElement[];
+				form_children.forEach((form_child) => {
+					items.push(form_child);
+					setup_draggable_item(form_child, item_index);
+					item_index++;
+				});
+			} else {
+				items.push(child);
+				setup_draggable_item(child, item_index);
+				item_index++;
+			}
+		});
+	}
+
+	function handle_drag_start(e: DragEvent): void {
+		e.stopPropagation?.();
+
+		const handle = e.currentTarget as HTMLElement;
+		const element = handle.parentElement as HTMLElement;
+		dragged_el = element;
+		dragged_index = parseInt(handle.dataset.index || "-1");
+
+		handle.setAttribute("aria-grabbed", "true");
+		element.classList.add("dragging");
+
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = "move";
+			e.dataTransfer.setData("text/html", element.outerHTML);
+			e.dataTransfer.setDragImage(element, 10, 10);
+		}
+	}
+
+	function handle_drag_end(e: DragEvent): void {
+		e.stopPropagation?.();
+
+		const handle = e.currentTarget as HTMLElement;
+		const element = handle.parentElement as HTMLElement;
+		element.classList.remove("dragging");
+		handle.setAttribute("aria-grabbed", "false");
+
+		if (current_drop_target) {
+			current_drop_target.classList.remove("drop-target");
+			current_drop_target = null;
+		}
+
+		dragged_el = null;
+		dragged_index = -1;
+	}
+
+	function handle_drag_over(e: DragEvent): boolean {
+		e.preventDefault();
+		e.dataTransfer && (e.dataTransfer.dropEffect = "move");
+		return false;
+	}
+
+	function handle_drag_enter(e: DragEvent): void {
+		e.stopPropagation?.();
+
+		const target = e.currentTarget as HTMLElement;
+		if (target === dragged_el) return;
+
+		if (!dragged_el || !container_el) return;
+
+		const dragged_parent = dragged_el.parentElement;
+		const target_parent = target.parentElement;
+
+		const is_dragged_in_form =
+			dragged_parent?.classList.contains("form") &&
+			dragged_parent.parentElement === container_el;
+		const is_target_in_form =
+			target_parent?.classList.contains("form") &&
+			target_parent.parentElement === container_el;
+		const is_dragged_direct = dragged_parent === container_el;
+		const is_target_direct = target_parent === container_el;
+
+		if (
+			!(
+				(is_dragged_in_form || is_dragged_direct) &&
+				(is_target_in_form || is_target_direct)
+			)
+		) {
+			return;
+		}
+
+		if (current_drop_target && current_drop_target !== target) {
+			current_drop_target.classList.remove("drop-target");
+		}
+
+		target.classList.add("drop-target");
+		current_drop_target = target;
+	}
+
+	async function handle_drop(e: DragEvent): Promise<boolean> {
+		e.stopPropagation?.();
+
+		const target = e.currentTarget as HTMLElement;
+		target.classList.remove("drop-target");
+
+		if (current_drop_target) {
+			current_drop_target.classList.remove("drop-target");
+			current_drop_target = null;
+		}
+
+		if (dragged_el && dragged_el !== target && container_el) {
+			const dragged_parent = dragged_el.parentElement;
+			const target_parent = target.parentElement;
+
+			const is_dragged_in_form =
+				dragged_parent?.classList.contains("form") &&
+				dragged_parent.parentElement === container_el;
+			const is_target_in_form =
+				target_parent?.classList.contains("form") &&
+				target_parent.parentElement === container_el;
+			const is_dragged_direct = dragged_parent === container_el;
+			const is_target_direct = target_parent === container_el;
+
+			if (
+				!(
+					(is_dragged_in_form || is_dragged_direct) &&
+					(is_target_in_form || is_target_direct)
+				)
+			) {
+				return false;
+			}
+
+			const placeholder = document.createElement("div");
+			placeholder.style.display = "none";
+
+			dragged_parent!.insertBefore(placeholder, dragged_el);
+
+			target_parent!.insertBefore(dragged_el, target);
+			dragged_parent!.insertBefore(target, placeholder);
+
+			placeholder.remove();
+
+			dragged_el?.classList.remove("dragging");
+			const dragged_handle = dragged_el?.querySelector(
+				".drag-handle"
+			) as HTMLElement;
+			if (dragged_handle) {
+				dragged_handle.setAttribute("aria-grabbed", "false");
+			}
+
+			await tick();
+			setup_drag_and_drop();
+		}
+
+		return false;
+	}
+
+	onMount(() => {
+		setup_drag_and_drop();
+
+		const observer = new MutationObserver(setup_drag_and_drop);
+
+		if (container_el) {
+			observer.observe(container_el, {
+				childList: true,
+				subtree: false
+			});
+		}
+
+		return () => {
+			observer.disconnect();
+			items.forEach((item) => {
+				const handle = item.querySelector(".drag-handle");
+				if (handle) {
+					remove_drag_listeners(handle as HTMLElement);
+				}
+				remove_drop_listeners(item);
+			});
+		};
+	});
 </script>
 
 <div
 	bind:this={container_el}
-	class:hide={!visible}
-	class:horizontal={orientation === "row"}
-	class:vertical={orientation === "column"}
-	id={elem_id}
-	class="draggable {elem_classes.join(' ')}"
+	class:hide={!gradio.shared.visible}
+	class:horizontal={gradio.props.orientation === "row"}
+	class:vertical={gradio.props.orientation === "column"}
+	id={gradio.shared.elem_id}
+	class="draggable {(gradio.shared.elem_classes || []).join(' ')}"
 	role="region"
 	aria-label="Draggable items container"
 >
-	{#if loading_status && show_progress && gradio}
+	{#if gradio.shared.loading_status && gradio.props.show_progress}
 		<StatusTracker
-			autoscroll={gradio.autoscroll}
+			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
-			{...loading_status}
-			status={loading_status
-				? loading_status.status == "pending"
+			{...gradio.shared.loading_status}
+			status={gradio.shared.loading_status
+				? gradio.shared.loading_status.status == "pending"
 					? "generating"
-					: loading_status.status
+					: gradio.shared.loading_status.status
 				: null}
 		/>
 	{/if}

package/dist/Index.svelte.d.ts

@@ -1,28 +1,20 @@
-import { SvelteComponent } from "svelte";
-import type { LoadingStatus } from "@gradio/statustracker";
-import type { Gradio } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        elem_id: string;
-        elem_classes?: string[];
-        visible?: boolean;
-        orientation?: "row" | "column";
-        loading_status?: LoadingStatus | undefined;
-        gradio?: Gradio | undefined;
-        show_progress?: boolean;
+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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Index: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Index = InstanceType<typeof Index>;
+export default Index;

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+export interface DraggableProps {
+    orientation: "row" | "column";
+    show_progress: boolean;
+}
+export interface DraggableEvents {
+    clear_status: never;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/draggable",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Gradio Draggable layout component",
   "type": "module",
   "author": "",
@@ -16,12 +16,12 @@
     "./package.json": "./package.json"
   },
   "devDependencies": {
-    "@gradio/statustracker": "^0.10.17",
-    "@gradio/preview": "^0.14.0",
-    "@gradio/utils": "^0.10.2"
+    "@gradio/preview": "^0.15.0",
+    "@gradio/statustracker": "^0.12.0",
+    "@gradio/utils": "^0.10.3"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.43.4"
   },
   "repository": {
     "type": "git",

package/types.ts

@@ -0,0 +1,10 @@
+import type { LoadingStatus } from "@gradio/statustracker";
+
+export interface DraggableProps {
+	orientation: "row" | "column";
+	show_progress: boolean;
+}
+
+export interface DraggableEvents {
+	clear_status: never;
+}