tessl/npm-gradio--utils

General functions for handling events in Gradio Svelte components

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Event Data Types

Name: tessl/npm-gradio--utils
Author: tessl

Standardized TypeScript interfaces for all component event types in the Gradio ecosystem. These interfaces ensure consistent data structures across all Gradio components and enable type-safe event handling in TypeScript applications.

Capabilities

ValueData Interface

Represents component value changes with metadata indicating it's value data.

/**
 * Represents component value changes with metadata
 */
interface ValueData {
  /** The actual value from the component */
  value: any;
  /** Flag indicating this is value data */
  is_value_data: boolean;
}

Usage Example:

import { type ValueData } from "@gradio/utils";

function handleValueChange(data: ValueData) {
  if (data.is_value_data) {
    console.log("New value:", data.value);
  }
}

SelectData Interface

Represents selection events from components like tables, galleries, or lists.

/**
 * Represents selection events from interactive components
 */
interface SelectData {
  /** Row values for table selections (optional) */
  row_value?: any[];
  /** Column values for table selections (optional) */
  col_value?: any[];
  /** Index of selected item - single number or [row, col] for tables */
  index: number | [number, number];
  /** The selected value */
  value: any;
  /** Whether the item is currently selected (optional) */
  selected?: boolean;
}

Usage Examples:

import { type SelectData } from "@gradio/utils";

// Handle list selection
function handleListSelect(data: SelectData) {
  console.log(`Selected item ${data.index}:`, data.value);
}

// Handle table selection
function handleTableSelect(data: SelectData) {
  if (Array.isArray(data.index)) {
    const [row, col] = data.index;
    console.log(`Selected cell [${row}, ${col}]:`, data.value);
    console.log("Row data:", data.row_value);
    console.log("Column data:", data.col_value);
  }
}

LikeData Interface

Represents like/unlike events from components with rating or favoriting functionality.

/**
 * Represents like/unlike events from rating components
 */
interface LikeData {
  /** Index of the liked item - single number or [row, col] for tables */
  index: number | [number, number];
  /** The value of the liked item */
  value: any;
  /** Like status - boolean for simple like/unlike, string for rating systems */
  liked?: boolean | string;
}

Usage Examples:

import { type LikeData } from "@gradio/utils";

// Handle simple like/unlike
function handleLike(data: LikeData) {
  if (typeof data.liked === "boolean") {
    console.log(`Item ${data.index} ${data.liked ? "liked" : "unliked"}`);
  }
}

// Handle rating system
function handleRating(data: LikeData) {
  if (typeof data.liked === "string") {
    console.log(`Item ${data.index} rated: ${data.liked}`);
  }
}

KeyUpData Interface

Represents keyboard events with key information and current input value.

/**
 * Represents keyboard events with key and input context
 */
interface KeyUpData {
  /** The key that was pressed */
  key: string;
  /** Current value of the input field */
  input_value: string;
}

Usage Example:

import { type KeyUpData } from "@gradio/utils";

function handleKeyUp(data: KeyUpData) {
  if (data.key === "Enter") {
    console.log("Enter pressed with input:", data.input_value);
  }
  
  if (data.key === "Escape") {
    console.log("Escape pressed, clearing input");
  }
}

ShareData Interface

Represents sharing events with content description and optional title.

/**
 * Represents sharing events with content metadata
 */
interface ShareData {
  /** Description of the content being shared */
  description: string;
  /** Optional title for the shared content */
  title?: string;
}

Usage Example:

import { type ShareData } from "@gradio/utils";

function handleShare(data: ShareData) {
  const shareText = data.title 
    ? `${data.title}: ${data.description}`
    : data.description;
    
  if (navigator.share) {
    navigator.share({
      title: data.title,
      text: data.description
    });
  }
}

CopyData Interface

Represents copy-to-clipboard events with the copied content.

/**
 * Represents copy-to-clipboard events
 */
interface CopyData {
  /** The content that was copied to clipboard */
  value: string;
}

Usage Example:

import { type CopyData } from "@gradio/utils";

function handleCopy(data: CopyData) {
  console.log("Copied to clipboard:", data.value);
  // Show feedback to user
  showToast("Content copied to clipboard!");
}

Type Safety Best Practices

Use type guards to safely handle event data:

import { 
  type ValueData, 
  type SelectData, 
  type LikeData 
} from "@gradio/utils";

function handleEvent(data: ValueData | SelectData | LikeData) {
  if ("is_value_data" in data) {
    // This is ValueData
    console.log("Value changed:", data.value);
  } else if ("selected" in data) {
    // This is SelectData
    console.log("Selection changed:", data.index);
  } else if ("liked" in data) {
    // This is LikeData
    console.log("Like status changed:", data.liked);
  }
}