### Monorepo Setup and Build Commands

Source: https://github.com/graduatecollege/grad-vue/blob/main/README.md

Commands for setting up the monorepo, installing dependencies, building packages, and running tests. These commands are managed using npm workspaces.

```bash
# Install dependencies for all packages
npm install

# Build all packages
npm run build

# Build specific package
npm run build:grad-vue
npm run build:grad-vue-rte

# Run tests
npm test

# Start playground for development
npm run dev
```

--------------------------------

### Vue Component Demo Structure with ComponentDemo Wrapper

Source: https://github.com/graduatecollege/grad-vue/blob/main/demo/README.md

An example of how to create an interactive component demonstration page using the `ComponentDemo` wrapper. This Vue 3 script setup example shows defining reactive state and passing props to a custom component.

```vue
<script setup lang="ts">
import { ref } from 'vue';

const myValue = ref('');
</script>

<template>
  <div>
    <h1>MyComponent</h1>
    
    <ComponentDemo
      name="Basic Usage"
      description="Description of your component"
      :props-config="{
        propName: {
          type: 'string',
          default: 'default value',
          label: 'Prop Label'
        }
      }">
      <template #default="{ props }">
        <MyComponent v-model="myValue" v-bind="props" />
      </template>
    </ComponentDemo>
  </div>
</template>
```

--------------------------------

### Build and Run Grad-Vue Development Server

Source: https://github.com/graduatecollege/grad-vue/blob/main/demo/README.md

Commands to build the parent Grad-Vue library, install dependencies for the demo site, and start the local development server. Assumes the user is in the project root.

```bash
cd ..
npm install
npm run build

npm install
npm run dev
```

--------------------------------

### Install grad-vue Package

Source: https://github.com/graduatecollege/grad-vue/blob/main/README.md

Installs the main grad-vue component library using npm. This package contains common UI patterns like buttons, inputs, modals, and tables.

```bash
npm install @illinois-grad/grad-vue
```

--------------------------------

### Install grad-vue-rte Package

Source: https://github.com/graduatecollege/grad-vue/blob/main/README.md

Installs the grad-vue-rte package, which provides rich text editor components built with Tiptap. This is a separate package to avoid unnecessary dependencies.

```bash
npm install @illinois-grad/grad-vue-rte
```

--------------------------------

### GPopover Component Example (Vue HTML)

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

An example demonstrating the usage of the GPopover component in Vue. It shows how to use the trigger slot to control the popover's visibility with a button.

```vue-html
<GPopover>
    <template #trigger="{ toggle }">
        <GButton @click="toggle">
            Can Popovers' Popovers have Popovers?
        </GButton>
    </template>
    <div>Even if they can, should they?</div>
</GPopover>
```

--------------------------------

### GButton Component Examples

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

Demonstrates the usage of the GButton component from grad-vue. It showcases various themes, sizes, styles, and how to render it as a link or Vue Router link.

```vue
<script setup>
import { GButton } from '@illinois-grad/grad-vue'

function handleClick() {
  console.log('Button clicked')
}
</script>

<template>
  <!-- Basic button variants -->
  <GButton @click="handleClick">Primary Button</GButton>
  <GButton theme="secondary">Secondary</GButton>
  <GButton theme="danger">Delete</GButton>
  <GButton theme="accent">Accent</GButton>

  <!-- Size variants -->
  <GButton size="small">Small</GButton>
  <GButton size="medium">Medium</GButton>
  <GButton size="large">Large</GButton>

  <!-- Style variants -->
  <GButton outlined>Outlined</GButton>
  <GButton text>Text Only</GButton>

  <!-- As a link -->
  <GButton component="a" href="https://example.com">External Link</GButton>

  <!-- As Vue Router link -->
  <GButton component="router-link" to="/dashboard">Dashboard</GButton>
</template>
```

--------------------------------

### Install grad-vue Component Library

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

Installs the grad-vue component library using npm. This is the first step to using the library's UI components in your Vue.js or Nuxt.js project.

```bash
npm install @illinois-grad/grad-vue
```

--------------------------------

### GTextInput Component Examples

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

Illustrates the functionality of the GTextInput component from grad-vue. It covers basic input with labels, instructions, error handling, and prefix/suffix usage.

```vue
<script setup>
import { ref, computed } from 'vue'
import { GTextInput } from '@illinois-grad/grad-vue'

const username = ref('')
const email = ref('')

const usernameErrors = computed(() => {
  if (!username.value) return ['Username is required']
  if (username.value.length < 3) return ['Username must be at least 3 characters']
  return []
})
</script>

<template>
  <!-- Basic input with label -->
  <GTextInput
    v-model="username"
    label="Username"
    placeholder="Enter your username"
    :errors="usernameErrors"
  />

  <!-- Input with instructions -->
  <GTextInput
    v-model="email"
    label="Email Address"
    instructions="We'll never share your email"
    placeholder="you@example.com"
  />

  <!-- Input with prefix and suffix -->
  <GTextInput
    v-model="price"
    label="Price"
    prefix="$"
    suffix=".00"
  />

  <!-- Disabled input with custom debounce -->
  <GTextInput
    v-model="readonly"
    label="Read Only"
    disabled
    :debounce="300"
  />
</template>
```

--------------------------------

### Setup grad-vue in Nuxt.js Application

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

Sets up the grad-vue component library as a Nuxt.js plugin. This ensures the components are correctly initialized within the Nuxt application lifecycle.

```javascript
// Nuxt.js plugin (plugins/grad-vue.ts)
import GradVue from '@illinois-grad/grad-vue';
import '@illinois-grad/grad-vue/grad-vue.css';

export default defineNuxtPlugin(async (nuxt) => {
    nuxt.vueApp.use(GradVue);
})
```

--------------------------------

### Setup grad-vue in Vue.js Application

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

Configures the grad-vue component library for a Vue.js 3 application. It imports the necessary modules and CSS, then registers the library with the Vue app instance.

```javascript
// Vue.js setup
import { createApp } from 'vue'
import GradVue from '@illinois-grad/grad-vue'
import '@illinois-grad/grad-vue/grad-vue.css'
import App from './App.vue'

const app = createApp(App)
app.use(GradVue)
```

--------------------------------

### GSearch: Minimal Vue Implementation

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

Demonstrates a basic setup for the GSearch component. It defines search results, a submit handler to filter results based on user input, and a select handler. The component itself is rendered with props for results and event listeners for submit and select actions.

```vue
<script setup lang="ts">
interface SearchResult {
    id: string;
    title: string;
}

const searchData = ref<SearchResult[]>([
    { id: "1", title: "The Quick Fox" },
    { id: "2", title: "The Lazy Dog" },
    { id: "3", title: "The Brown Bear" },
]);
const searchResults = ref<SearchResult[]>([]);

function submit(query: string) {
    searchResults.value = searchData.value.filter((result) =>
        result.title.toLowerCase().includes(query.toLowerCase()),
    );
}
function selected(item: SearchResult) {
    console.log("Selected:", item);
}
</script>
<template>
    <GSearch
        :results="searchResults"
        @submit="submit"
        @select="selected">
    </GSearch>
</template>
```

--------------------------------

### Key-Value Detail List Component with Vue.js

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

Showcases the `GDetailList` and `GDetailListItem` components for displaying structured key-value data. It supports both default grid layout and a vertical layout variant. The example demonstrates displaying user information.

```vue
<script setup>
import { GDetailList, GDetailListItem } from '@illinois-grad/grad-vue'

const user = {
  name: 'John Doe',
  email: 'john.doe@illinois.edu',
  department: 'Computer Science',
  advisor: 'Dr. Jane Smith',
  enrollmentDate: '2023-08-15',
  status: 'Active'
}
</script>

<template>
  <!-- Grid layout (default) -->
  <GDetailList>
    <GDetailListItem label="Name">{{ user.name }}</GDetailListItem>
    <GDetailListItem label="Email">{{ user.email }}</GDetailListItem>
    <GDetailListItem label="Department">{{ user.department }}</GDetailListItem>
    <GDetailListItem label="Advisor">{{ user.advisor }}</GDetailListItem>
    <GDetailListItem label="Enrolled">{{ user.enrollmentDate }}</GDetailListItem>
    <GDetailListItem label="Status">{{ user.status }}</GDetailListItem>
  </GDetailList>

  <!-- Vertical layout -->
  <GDetailList variant="vertical">
    <GDetailListItem label="Name">{{ user.name }}</GDetailListItem>
    <GDetailListItem label="Email">{{ user.email }}</GDetailListItem>
  </GDetailList>
</template>

```

--------------------------------

### Progress Indicator Component with Vue.js

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

Features a `GProgress` component for displaying loading or progress states. It supports both indeterminate (spinner) and determinate (percentage-based) modes, includes ARIA attributes for accessibility, and offers various size variants. The example demonstrates simulating an upload progress.

```vue
<script setup>
import { ref } from 'vue'
import { GProgress } from '@illinois-grad/grad-vue'

const uploadProgress = ref(0)

async function simulateUpload() {
  uploadProgress.value = 0
  for (let i = 0; i <= 100; i += 10) {
    uploadProgress.value = i
    await new Promise(r => setTimeout(r, 200))
  }
}
</script>

<template>
  <!-- Indeterminate spinner (no value) -->
  <GProgress label="Loading data" size="medium" />

  <!-- Determinate progress bar -->
  <GProgress
    :value="uploadProgress"
    label="Uploading file"
    size="large"
  />

  <!-- Size variants -->
  <GProgress label="Tiny" size="tiny" />
  <GProgress label="Small" size="small" />
  <GProgress label="Medium" size="medium" />
  <GProgress label="Large" size="large" />

  <GButton @click="simulateUpload">Start Upload</GButton>
</template>

```

--------------------------------

### GDateRangeInput: Start and End Date Selection

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

A component designed for selecting a range of dates, composed of two GDateInput components. It allows users to specify both a start and an end date with customizable labels for each input.

```typescript
interface Props {
    /**
     * Label for the component
     */
    label?: string;
    /**
     * Label for the start date input
     */
    startLabel?: string;
    /**
     * Label for the end date input
     */
    endLabel?: string;
    /**
     * Disabled
     */
    disabled?: boolean;

    // Error messages array (supports multiple validation errors)
    errors?: string[];
    /**
     * Instructions
     */
    instructions?: string;
    // Name for form registration
    name?: string;
}
```

--------------------------------

### GSubmitButton Integration with GForm (Vue.js Example)

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

Illustrates how to use the GSubmitButton within a GForm component. The button automatically handles loading states and disabling during form submission when placed inside a GForm.

```vue
<GForm v-model="formData" @submit="handleSubmit">
  <GTextInput name="email" label="Email" />
  <GSubmitButton>Submit</GSubmitButton>
</GForm>
```

--------------------------------

### GChatInput: Vue Rich Text Editor for Chat

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

The GChatInput component is a rich text editor for chat applications, built using Tiptap. It supports basic formatting like bold and italic, lists, and a bubble menu. It requires installation of '@illinois-grad/grad-vue-rte' and its CSS. The component emits content as a Tiptap JSON object.

```bash
npm install @illinois-grad/grad-vue-rte
```

```vue
<script setup>
import { ref } from 'vue'
import { GChatInput } from '@illinois-grad/grad-vue-rte'
import '@illinois-grad/grad-vue-rte/grad-vue-rte.css'

const messageContent = ref('')

function handleSend(content) {
  console.log('Message sent:', content)
  // content is a Tiptap JSON object

  // Send to API
  fetch('/api/messages', {
    method: 'POST',
    body: JSON.stringify({ content })
  })

  // Clear input
  messageContent.value = ''
}
</script>

<template>
  <GChatInput
    v-model="messageContent"
    placeholder="Type your message..."
    label="Message input"
    :max-rows="5"
    @send="handleSend"
  />

  <!-- Disabled state -->
  <GChatInput
    v-model="messageContent"
    placeholder="Chat disabled"
    disabled
  />
</template>
```

--------------------------------

### Build Grad-Vue Demo Site for GitHub Pages

Source: https://github.com/graduatecollege/grad-vue/blob/main/demo/README.md

Command to generate static files for deploying the Grad-Vue demo site to GitHub Pages. The output is placed in the `.output/public` directory.

```bash
npm run generate:gh-pages
```

--------------------------------

### Sync Component Props and Documentation

Source: https://github.com/graduatecollege/grad-vue/blob/main/packages/grad-vue/README.md

Command to synchronize component properties and documentation from the component's source code. This process generates demo configurations and updates documentation automatically.

```bash
npm run sync-props
```

--------------------------------

### Create New Component Script

Source: https://github.com/graduatecollege/grad-vue/blob/main/packages/grad-vue/README.md

Command to bootstrap a new component within the grad-vue project. This script automates the creation of component files and their registration.

```bash
npm run component:new -- GMyNewComponent
```

--------------------------------

### Build grad-vue Library

Source: https://github.com/graduatecollege/grad-vue/blob/main/packages/grad-vue/README.md

Commands for building the grad-vue library. Includes options for a standard build and a watch mode for development.

```bash
# Build the library
npm run build

# Watch for changes during development
npm run watch
```

--------------------------------

### GDateRangeInput

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

A date range input component allowing users to select a start and end date using two GDateInput components.

```APIDOC
## GDateRangeInput

### Description
A date range input component with start and end dates.

This component uses two GDateInput components laid out horizontally to allow selecting a date range.

### Props
- **label** (string) - Optional - Label for the component
- **startLabel** (string) - Optional - Label for the start date input
- **endLabel** (string) - Optional - Label for the end date input
- **disabled** (boolean) - Optional - Disabled state for the component
- **errors** (array) - Optional - Error messages array (supports multiple validation errors)
- **instructions** (string) - Optional - Instructions for the component
- **name** (string) - Optional - Name for form registration
```

--------------------------------

### Create and Push Git Release Tag

Source: https://github.com/graduatecollege/grad-vue/blob/main/packages/grad-vue/README.md

Demonstrates the process of creating and pushing a Git tag for releasing a new version of the package. This action triggers an automatic publish to NPM.

```bash
# Create and push a new release
git tag v1.0.0
git push origin v1.0.0
```

--------------------------------

### Import All Components in Nuxt.js Application

Source: https://github.com/graduatecollege/grad-vue/blob/main/packages/grad-vue/README.md

Shows how to integrate grad-vue components into a Nuxt.js project by adding a plugin. This makes all components available throughout the Nuxt application.

```javascript
import GradVue from '@illinois-grad/grad-vue';
import '@illinois-grad/grad-vue/grad-vue.css';

export default defineNuxtPlugin(async (nuxt) => {
    nuxt.vueApp.use(GradVue);
})
```

--------------------------------

### Import All Components in Vue.js Application

Source: https://github.com/graduatecollege/grad-vue/blob/main/packages/grad-vue/README.md

Demonstrates how to import and use all grad-vue components within a Vue.js application by registering the plugin. This makes all components globally available.

```javascript
import { createApp } from 'vue'
import GradVue from '@illinois-grad/grad-vue'
import App from './App.vue'

const app = createApp(App)
app.use(GradVue)
```

--------------------------------

### Testing Commands with Vitest and Playwright

Source: https://github.com/graduatecollege/grad-vue/blob/main/README.md

Commands for running tests within the monorepo using Vitest and Playwright. Includes options for running all tests, running with a UI, and generating reports.

```bash
# Run all tests
npm test

# Run tests with UI
npm run test:ui

# Run tests and generate report
npm run test:run
```

--------------------------------

### Run Vitest Tests

Source: https://github.com/graduatecollege/grad-vue/blob/main/packages/grad-vue/README.md

Commands to execute tests using Vitest. Includes options for running tests in watch mode for continuous feedback or running them once.

```bash
# Run tests in watch mode
npm test

# Run tests once
npm run test:run
```

--------------------------------

### Chat Log Scroller - GHistoryScroller

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

GHistoryScroller is a component for displaying content in a chat-log-like manner, starting from the bottom and allowing users to scroll up for older entries. It automatically scrolls to the bottom and provides a button to jump back to the bottom when scrolled up. It supports ARIA roles for accessibility if a label is provided.

```vue-html
<GHistoryScroller
    v-bind="props"
    :entries="historyEntries"
    class="history-scroller">
    <template #default="{ entry }">
        <div class="history-entry">
            This is history for: {{ entry.id }}
        </div>
    </template>
</GHistoryScroller>
```

```typescript
interface Props<T> {
    /**
     * Accessible label
     */
    label?: string; // Demo: History
    entries: T[];
}
```

--------------------------------

### Import Individual Component in Vue.js

Source: https://github.com/graduatecollege/grad-vue/blob/main/packages/grad-vue/README.md

Illustrates importing and using a single grad-vue component, such as GButton, in a Vue.js project. This is useful for selectively using components.

```javascript
import { GButton } from '@illinois-grad/grad-vue'

export default {
  components: {
    GButton
  }
}
```

```vue
<script setup>
import { GButton } from '@illinois-grad/grad-vue'
</script>

<template>
  <GButton @click="handleClick">Click me</GButton>
</template>
```

--------------------------------

### Create New Component Command

Source: https://github.com/graduatecollege/grad-vue/blob/main/README.md

Command to generate a new component within the main grad-vue package. For the grad-vue-rte package, components must be created manually.

```bash
npm run component:new ComponentName
```

--------------------------------

### useSidebar

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

Manages sidebar state and responsive behavior for sidebar/hamburger menu communication.

```APIDOC
## useSidebar

### Description
Manages sidebar state and responsive behavior for sidebar/hamburger menu communication.

### Method
Composable function

### Endpoint
N/A (Composable function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { provide } from 'vue'
import { useSidebar } from '@illinois-grad/grad-vue'

// Default breakpoint (max-width: 800px)
const sidebar = useSidebar()

// Custom breakpoint
const sidebar = useSidebar('(max-width: 1024px)')

// Provide to children components
provide('sidebar', sidebar)
```

### Response
#### Success Response (200)
N/A (Composable function)

#### Response Example
```json
{
  "sidebar.open": "Ref<boolean> - sidebar open state",
  "sidebar.toggle()": "Function - toggle sidebar",
  "sidebar.isCollapsible": "Ref<boolean> - whether sidebar is collapsible based on media query"
}
```
```

--------------------------------

### useActiveLinkContent

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

Tracks which section is visible for active link highlighting in navigation menus.

```APIDOC
## useActiveLinkContent

### Description
Tracks which section is visible for active link highlighting in navigation menus.

### Method
Composable function

### Endpoint
N/A (Composable function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { ref, onMounted, useTemplateRef } from 'vue'
import { useActiveLinkContent } from '@illinois-grad/grad-vue'

const activeId = ref('')
const mainContent = useTemplateRef('main')

onMounted(() => {
  // Parameters: element ref, top offset (for fixed headers), active ID ref
  const { stop } = useActiveLinkContent(mainContent, 70, activeId)

  // Optional: stop observing
  // stop()
})
```

### Response
#### Success Response (200)
N/A (Composable function)

#### Response Example
```json
{
  "activeId": "Ref<string> - currently active section ID",
  "stop": "Function - stops observing the content sections"
}
```
```

--------------------------------

### GUserMenu Component Usage (Vue.js)

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

Demonstrates how to use the GUserMenu component, which displays user initials in a colored circle and opens a popover with user details and account links. It accepts props for initials, email, color, and an accessible label. The default slot can contain menu items.

```vue-html
<GUserMenu
    initials="J"
    email="j@example.com"
    color="#4A90E2"
>
    <router-link to="/profile">Profile</router-link>
    <a href="/settings">Settings</a>
    <button @click="handleLogout">Logout</button>
</GUserMenu>
```

--------------------------------

### Responsive Sidebar Navigation with Vue.js

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

Implements a responsive sidebar navigation system using GSidebar, GSidebarMenu, and GHamburgerMenu components. It utilizes the `useSidebar` composable for state management and `useActiveLinkContent` for in-page navigation tracking. The sidebar is collapsible on mobile devices.

```vue
<script setup>
import { ref, provide, onMounted, useTemplateRef } from 'vue'
import {
  GSidebar,
  GSidebarMenu,
  GHamburgerMenu,
  GAppHeader,
  useSidebar,
  useActiveLinkContent
} from '@illinois-grad/grad-vue'

// Create and provide sidebar state
const sidebar = useSidebar()
provide('sidebar', sidebar)

// Track active section for in-page navigation
const activeId = ref('')
const mainContent = useTemplateRef('main')

onMounted(() => {
  useActiveLinkContent(mainContent, 70, activeId)
})

const menuItems = [
  { label: 'Overview', href: '#overview' },
  { label: 'Installation', href: '#installation' },
  { label: 'Components', href: '#components' },
  { label: 'API Reference', href: '#api' }
]
</script>

<template>
  <GAppHeader brand="Graduate College">
    <template #app-controls>
      <GHamburgerMenu label="Toggle navigation" />
    </template>
  </GAppHeader>

  <GSidebar
    theme="dark"
    width="280px"
    background-color="#1e3a5f"
  >
    <GSidebarMenu
      title="Documentation"
      :items="menuItems"
      v-model="activeId"
      spy
      :offset="70"
      theme="dark"
    />
  </GSidebar>

  <main ref="main" class="main-content">
    <section id="overview">
      <h2>Overview</h2>
      <p>Introduction content...</p>
    </section>
    <section id="installation">
      <h2>Installation</h2>
      <p>Setup instructions...</p>
    </section>
    <section id="components">
      <h2>Components</h2>
      <p>Component documentation...</p>
    </section>
    <section id="api">
      <h2>API Reference</h2>
      <p>API details...</p>
    </section>
  </main>
</template>

```

--------------------------------

### Import Individual Component

Source: https://github.com/graduatecollege/grad-vue/blob/main/packages/grad-vue-rte/README.md

Imports a single component, GChatInput, from the @illinois-grad/grad-vue-rte package. This approach is useful when only specific components are needed, reducing bundle size. The component's CSS is also imported.

```javascript
import { GChatInput } from '@illinois-grad/grad-vue-rte'
import '@illinois-grad/grad-vue-rte/grad-vue-rte.css'
```

--------------------------------

### Import All Components in Nuxt.js

Source: https://github.com/graduatecollege/grad-vue/blob/main/packages/grad-vue-rte/README.md

Integrates the GradVueRTE package into a Nuxt.js application by adding a plugin. This makes all RTE components available throughout the Nuxt application and includes the required CSS.

```javascript
import GradVueRTE from '@illinois-grad/grad-vue-rte';
import '@illinois-grad/grad-vue-rte/grad-vue-rte.css';

export default defineNuxtPlugin(async (nuxt) => {
    nuxt.vueApp.use(GradVueRTE);
});
```

--------------------------------

### GChatInput Component Usage in Vue

Source: https://github.com/graduatecollege/grad-vue/blob/main/packages/grad-vue-rte/README.md

Demonstrates the usage of the GChatInput component in a Vue.js template. It shows how to bind input using v-model to a ref, set a placeholder, and handle the 'send' event.

```vue
<template>
  <GChatInput 
    v-model="comment"
    placeholder="Enter your comment"
    @send="handleSend"
  />
</template>

<script setup>
import { ref } from 'vue'
import { GChatInput } from '@illinois-grad/grad-vue-rte'

const comment = ref('')

function handleSend(content) {
  console.log('Comment sent:', content)
  comment.value = ''
}
</script>
```

--------------------------------

### GAlertDialog: Confirming Actions with Vue

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

Implements a modal dialog for user confirmation before executing critical actions. It utilizes Vue's reactivity system and emits 'confirm' and 'cancel' events. Requires GButton for interactive elements and is designed to work with a modal root element.

```vue
<script setup>
import { ref } from 'vue'
import { GAlertDialog, GButton } from '@illinois-grad/grad-vue'

const showDeleteDialog = ref(false)
const itemToDelete = ref(null)

function confirmDelete() {
  console.log('Deleting item:', itemToDelete.value)
  showDeleteDialog.value = false
}

function cancelDelete() {
  itemToDelete.value = null
  showDeleteDialog.value = false
}

function requestDelete(item) {
  itemToDelete.value = item
  showDeleteDialog.value = true
}
</script>

<template>
  <GButton theme="danger" @click="requestDelete({ id: 1, name: 'Report' })">
    Delete Report
  </GButton>

  <GAlertDialog
    v-if="showDeleteDialog"
    label="Confirm Deletion"
    button-text="Delete"
    button-color="danger"
    @confirm="confirmDelete"
    @cancel="cancelDelete"
  >
    <p>Are you sure you want to delete "{{ itemToDelete?.name }}"?</p>
    <p>This action cannot be undone.</p>
  </GAlertDialog>

  <div id="modal-root"></div>
</template>
```

--------------------------------

### GTextInput Component Props Documentation (TypeScript)

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

Details the TypeScript interface for GTextInput component props. It covers essential attributes like label, placeholder, disabled state, error messages, instructions, and prefix/suffix text, along with debounce settings for input handling.

```typescript
interface Props {
    /**
     * Label
     */
    label?: string; // Demo: Example Label
    /**
     * Placeholder text
     */
    placeholder?: string;
    /**
     * Disabled
     */
    disabled?: boolean;

    // Error messages array (supports multiple validation errors)
    errors?: string[];
    /**
     * Instructions
     */
    instructions?: string;
    /**
     * Prefix text (displayed before input)
     */
    prefix?: string;
    /**
     * Suffix text (displayed after input)
     */
    suffix?: string;
    /**
     * Debounce in milliseconds
     */
    debounce?: number;

    // Name for form registration
    name?: string;
}
```

--------------------------------

### GClipboard: Vue Component for Copy-to-Clipboard

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

The GClipboard component displays text with an integrated copy-to-clipboard button and provides tooltip feedback upon successful copying. It requires the '@illinois-grad/grad-vue' package. The text can be hidden if only the button is desired.

```vue
<script setup>
import { GClipboard } from '@illinois-grad/grad-vue'

const apiKey = 'sk-1234567890abcdef'
const shareUrl = 'https://app.example.com/share/abc123'
</script>

<template>
  <!-- Show text with copy button -->
  <GClipboard :text="apiKey" copy-label="Copy API Key" />

  <!-- Hidden text (useful when displayed elsewhere) -->
  <div>
    <label>Share Link:</label>
    <a :href="shareUrl">{{ shareUrl }}</a>
    <GClipboard :text="shareUrl" hide-text />
  </div>
</template>
```

--------------------------------

### GSearch: Autocomplete Search Input with Vue

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

A flexible search input component that provides an autocomplete dropdown for suggestions. It handles search queries and item selection events, but does not perform the search logic internally, allowing for custom asynchronous data fetching. Supports various configurations including manual search and custom option rendering.

```vue
<script setup>
import { ref } from 'vue'
import { GSearch } from '@illinois-grad/grad-vue'

const searchResults = ref([])
const loading = ref(false)

const allItems = [
  { id: '1', title: 'Introduction to Vue.js' },
  { id: '2', title: 'Advanced TypeScript Patterns' },
  { id: '3', title: 'Building Accessible Components' },
  { id: '4', title: 'Performance Optimization Guide' }
]

async function handleSearch(query) {
  loading.value = true
  // Simulate API delay
  await new Promise(resolve => setTimeout(resolve, 300))

  searchResults.value = allItems.filter(item =>
    item.title.toLowerCase().includes(query.toLowerCase())
  )
  loading.value = false
}

function handleSelect(item) {
  console.log('Selected:', item)
  // Navigate or perform action with selected item
}
</script>

<template>
  <!-- Auto-search on typing -->
  <GSearch
    :results="searchResults"
    :loading="loading"
    placeholder="Search documentation..."
    label="Search"
    @submit="handleSearch"
    @select="handleSelect"
  />

  <!-- Manual search (on Enter or button click) -->
  <GSearch
    :results="searchResults"
    :auto="false"
    placeholder="Press Enter to search"
    @submit="handleSearch"
    @select="handleSelect"
  />

  <!-- Custom option rendering -->
  <GSearch
    :results="searchResults"
    @submit="handleSearch"
    @select="handleSelect"
  >
    <template #option="{ option }">
      <div class="search-result">
        <strong>{{ option.title }}</strong>
        <small>ID: {{ option.id }}</small>
      </div>
    </template>
  </GSearch>
</template>
```

--------------------------------

### Manage Sidebar State with useSidebar (Vue)

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

The `useSidebar` composable manages the open/closed state of a sidebar component and handles responsive behavior. It can accept a custom media query breakpoint. The composable provides reactive state and a toggle function for controlling the sidebar's visibility and collapse behavior.

```typescript
import { provide } from 'vue'
import { useSidebar } from '@illinois-grad/grad-vue'

// Default breakpoint (max-width: 800px)
const sidebar = useSidebar()

// Custom breakpoint
const sidebar = useSidebar('(max-width: 1024px)')

// Provide to children components
provide('sidebar', sidebar)

// API
// sidebar.open      // Ref<boolean> - sidebar open state
// sidebar.toggle()  // Function - toggle sidebar
// sidebar.isCollapsible // Ref<boolean> - whether sidebar is collapsible based on media query
```

--------------------------------

### Implement Reactive Filtering with useFiltering (Vue)

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

The `useFiltering` composable provides utilities for creating reactive filters for tables and lists. It manages filter states, determines filtered columns, indicates if filtering is active, and offers a function to clear all filters. It also includes helper functions to convert filter states to URL query parameters.

```typescript
import { useFiltering, filterAsQuery, filtersToQueryParams } from '@illinois-grad/grad-vue'

const { filters, filteredColumns, isFiltered, clearFilters } = useFiltering({
  status: null,
  department: null
})

// Convert filters to URL query string
const queryString = filtersToQueryParams(filters.value)
```

--------------------------------

### Use Active Link Content Composable (Vue.js)

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

Demonstrates how to use the `useActiveLinkContent` composable function in Vue.js to track active links within a sidebar menu for in-page navigation. It requires a template ref to the main content area and a ref to store the active element's ID.

```vue
<script setup lang="ts">
import { computed, onMounted, ref, useTemplateRef } from "vue";
import { useActiveLinkContent } from "@illinois-grad/grad-vue";

const activeId = ref<string>("");
const main = useTemplateRef("main");
// onMounted is for Nuxt compatibility
onMounted(() => {
    useActiveLinkContent(main, 70, activeId);
});
</script>

<template>
  <GSidebar>
      <GSidebarMenu
          :items="[
              { label: 'Buttons', href: '#buttons' },
              { label: 'More Buttons', href: '#more-buttons' }
          ]"
          v-model="activeId"
      />
  </GSidebar>
  <main class="main" ref="main">
      <section id="buttons">
          <h2>Buttons</h2>
          <p>Some buttons</p>
      </section>
      <section id="more-buttons">
          <h2>More Buttons</h2>
          <p>Some more buttons</p>
      </section>
  </main>
</template>
```

--------------------------------

### Basic CSS Styling for Grad-Vue Body

Source: https://github.com/graduatecollege/grad-vue/blob/main/playground/index.html

This CSS snippet defines the basic styling for the 'body' element in the Grad-Vue application. It sets margin, padding, font family, background color, and ensures a consistent look across the application. No external dependencies are required for this styling.

```css
body {
  margin: 0;
  padding: 0;
  font-family: var(--il-font-sans);
  background-color: #fff;
}
```

--------------------------------

### GNoteInput Component Props Interface (TypeScript)

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

Defines the TypeScript interface for the props of the GNoteInput component, which also utilizes Tiptap for rich text editing, specifically for notes. It offers formatting options like bold, italic, and lists, with an always-visible toolbar. The available props are 'placeholder' and 'label'.

```typescript
interface Props {
    /**
     * Placeholder text
     */
    placeholder?: string;
    /**
     * Accessible label
     */
    label?: string;
}
```

--------------------------------

### GClipboard

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

Displays text with an integrated clipboard button for easy copying. The text can be hidden, and it provides feedback if the browser doesn't support clipboard functionality.

```APIDOC
## GClipboard

### Description
Displays text with a clipboard button that copies the text to the clipboard. The text can be hidden in cases where it's already displayed differently.

If for some reason the user's browser doesn't support a clipboard, the tooltip will indicate that when they try to copy.

### Props
- **text** (string) - Required - Text to be copied. (Demo: This is some text to get copied)
- **hideText** (boolean) - Optional - Hide the visible text
- **copyLabel** (string) - Optional - Copy button label
```

--------------------------------

### Import All Components in Vue.js

Source: https://github.com/graduatecollege/grad-vue/blob/main/packages/grad-vue-rte/README.md

Imports and registers all components from the GradVueRTE package for use in a Vue.js 3 application. It also imports the necessary CSS for the components.

```javascript
import { createApp } from 'vue'
import GradVueRTE from '@illinois-grad/grad-vue-rte'
import '@illinois-grad/grad-vue-rte/grad-vue-rte.css'
import App from './App.vue'

const app = createApp(App)
app.use(GradVueRTE)
```

--------------------------------

### GTable Component Props Documentation (TypeScript)

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

Defines the TypeScript interface for the props of the GTable component. It outlines properties for data, columns, grouping, filtering, row interactivity, and bulk selection, emphasizing performance and flexibility.

```typescript
interface Props<T, C> {
    /**
     * Accessible label
     */
    label: string; // Demo: Colleges
    data: T[];
    columns: C[];
    resultCount?: number;
    groupBy?: keyof T;
    filtering?: UseFilteringReturn<any>;
    groupRender?: (groupValue: any, row: T) => VNode;
    rowClickable?: boolean;
    rowClass?: (row: T) => string | string[] | undefined;
    startIndex: number;
    /**
     * Enable bulk selection with checkboxes
     */
    bulkSelectionEnabled?: boolean;
    // Array of actions to show in the sticky toolbar when rows are selected
    bulkActions?: BulkAction[];

    // Optional change tracker for editable tables
    // Pass a composable from useTableChanges() to track user edits
    changeTracker?: UseTableChangesReturn<T>;

    /**
     * Explicitly show the pagination bar even if the slot is empty
     */
    showPagination?: boolean;
}
```

--------------------------------

### GButton: Customizable Button Component

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

A versatile button component that can be rendered as different HTML elements using the 'component' prop, such as links or router-links. It offers various styling options for size, theme, and appearance.

```vue-html
<GButton component="router-link" to="/some-route">
    Click me
</GButton>
```

```typescript
interface Props {
    /**
     * Button size
     */
    size?: "small" | "medium" | "large";
    /**
     * Button color theme
     */
    theme?: "primary" | "secondary" | "accent" | "danger" | "none";
    /**
     * Use outlined style
     */
    outlined?: boolean;
    /**
     * Use text style
     */
    text?: boolean;

    to?: string | Record<string, any>;
    component?: string;
}
```

--------------------------------

### GClipboard: Copy Text to Clipboard

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

A component that displays text and provides a button to copy it to the clipboard. It handles cases where the text might be hidden and provides feedback if the browser does not support clipboard operations.

```typescript
interface Props {
    /**
     * Text
     */
    text: string; // Demo: This is some text to get copied

    /**
     * Hide the visible text
     */
    hideText?: boolean;

    /**
     * Copy button label
     */
    copyLabel?: string;
}
```

--------------------------------

### GTable: High-Performance Data Display with Vue

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

A versatile data table component for displaying large datasets with features like sorting, filtering, pagination, and bulk actions. It's optimized for performance using render functions and supports custom cell rendering and row click handling. Dependencies include GTablePagination and useFiltering hook.

```vue
<script setup>
import { ref, computed } from 'vue'
import { GTable, GTablePagination, useFiltering } from '@illinois-grad/grad-vue'

const data = ref([
  { key: '1', name: 'Engineering', budget: 50000, active: true },
  { key: '2', name: 'Marketing', budget: 35000, active: true },
  { key: '3', name: 'Finance', budget: 45000, active: false },
  { key: '4', name: 'HR', budget: 28000, active: true }
])

const columns = [
  {
    key: 'name',
    label: 'Department',
    sortable: true
  },
  {
    key: 'budget',
    label: 'Budget',
    sortable: true,
    display: (val) => `$${val.toLocaleString()}`
  },
  {
    key: 'active',
    label: 'Status',
    filter: {
      type: 'select',
      options: [
        { label: 'Active', value: true },
        { label: 'Inactive', value: false }
      ]
    },
    display: (val) => val ? 'Active' : 'Inactive'
  }
]

const sortField = ref('name')
const sortOrder = ref(1) // 1 = ascending, -1 = descending
const filter = ref({})
const selectedRows = ref([])

const bulkActions = [
  { id: 'archive', label: 'Archive', theme: 'secondary' },
  { id: 'delete', label: 'Delete', theme: 'danger' }
]

function handleBulkAction(actionId, selectedKeys) {
  console.log(`Action ${actionId} on:`, selectedKeys)
}

function handleRowClick(link) {
  console.log('Navigate to:', link)
}
</script>

<template>
  <GTable
    label="Departments"
    :data="data"
    :columns="columns"
    v-model:sort-field="sortField"
    v-model:sort-order="sortOrder"
    v-model:filter="filter"
    v-model:selected-rows="selectedRows"
    :start-index="1"
    bulk-selection-enabled
    :bulk-actions="bulkActions"
    @bulk-action="handleBulkAction"
  >
    <template #pagination>
      <GTablePagination :total="data.length" :per-page="10" />
    </template>
  </GTable>
</template>
```

--------------------------------

### GSidebar Component Props (TypeScript)

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

Defines the properties for the GSidebar component, including custom background color, background image, theme, and various offset and width configurations.

```typescript
interface Props {
    /**
     * Custom background color
     */
    backgroundColor?: string;
    /**
     * Custom background image
     */
    backgroundImage?: string; // Demo: none
    /**
     * Sidebar theme
     */
    theme?: "light" | "dark";
    // Offset from the top of the viewport
    topOffset?: string;
    // Top offset variable to use instead of topOffset
    topOffsetVar?: string;
    /**
     * Width
     *
     * Width of the sidebar
     */
    width?: string;
}
```

--------------------------------

### Floating Popover Component with Vue.js

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

Provides a `GPopover` component that displays floating content relative to a trigger element. It ensures the popover remains within the viewport and supports basic and minimal styling options. Dependencies include `GPopover` and `GButton` from `@illinois-grad/grad-vue`.

```vue
<script setup>
import { GPopover, GButton } from '@illinois-grad/grad-vue'
</script>

<template>
  <!-- Basic popover -->
  <GPopover>
    <template #trigger="{ toggle }">
      <GButton @click="toggle">Show Info</GButton>
    </template>
    <div>
      <h3>Information</h3>
      <p>This is additional context about the feature.</p>
    </div>
  </GPopover>

  <!-- Minimal style (no padding) -->
  <GPopover minimal>
    <template #trigger="{ toggle }">
      <GButton @click="toggle">Options</GButton>
    </template>
    <ul class="menu-list">
      <li><button>Edit</button></li>
      <li><button>Duplicate</button></li>
      <li><button>Delete</button></li>
    </ul>
  </GPopover>
</template>

```

--------------------------------

### Track Visible Content for Active Links with useActiveLinkContent (Vue)

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

The `useActiveLinkContent` composable tracks which section of a page is currently visible in the viewport to highlight the corresponding active link in navigation menus. It requires a template ref to the main content area and an optional top offset for fixed headers. The composable returns a function to stop observing the elements.

```typescript
import { ref, onMounted, useTemplateRef } from 'vue'
import { useActiveLinkContent } from '@illinois-grad/grad-vue'

const activeId = ref('')
const mainContent = useTemplateRef('main')

onMounted(() => {
  // Parameters: element ref, top offset (for fixed headers), active ID ref
  const { stop } = useActiveLinkContent(mainContent, 70, activeId)

  // Optional: stop observing
  // stop()
})
```

--------------------------------

### GChatInput Component Props Interface (TypeScript)

Source: https://github.com/graduatecollege/grad-vue/blob/main/API.md

Defines the TypeScript interface for the props of the GChatInput component. This component uses Tiptap for rich text editing and supports features like bold, italic, lists, and undo/redo. The props include 'placeholder', 'disabled', 'maxRows', and 'label'.

```typescript
interface Props {
    /**
     * Placeholder text
     */
    placeholder?: string;
    /**
     * Disabled
     */
    disabled?: boolean;
    /**
     * Maximum number of rows
     */
    maxRows?: number;
    /**
     * Accessible label
     */
    label?: string;
}
```

--------------------------------

### useFiltering

Source: https://context7.com/graduatecollege/grad-vue/llms.txt

Provides reactive filtering utilities for tables and lists.

```APIDOC
## useFiltering

### Description
Provides reactive filtering utilities for tables and lists.

### Method
Composable function

### Endpoint
N/A (Composable function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { useFiltering, filterAsQuery, filtersToQueryParams } from '@illinois-grad/grad-vue'

const { filters, filteredColumns, isFiltered, clearFilters } = useFiltering({
  status: null,
  department: null
})

// Convert filters to URL query string
const queryString = filtersToQueryParams(filters.value)
```

### Response
#### Success Response (200)
N/A (Composable function)

#### Response Example
```json
{
  "filters": "Ref<object> - current filter values",
  "filteredColumns": "Array - columns currently being filtered",
  "isFiltered": "Ref<boolean> - indicates if any filters are active",
  "clearFilters": "Function - clears all active filters"
}
```
```