@illinois-grad/grad-vue 2.3.4 → 2.4.0

package/dist/components/GSubmitButton.vue.d.ts

@@ -1,29 +1,57 @@
-interface Props {
+/**
+ * A submit button that integrates with GForm.
+ *
+ * When used inside a GForm, the button will automatically:
+ * - Show a loading state during form submission
+ * - Be disabled when specified
+ *
+ * @example
+ * <GForm v-model="formData" @submit="handleSubmit">
+ *   <GTextInput name="email" label="Email" />
+ *   <GSubmitButton>Submit</GSubmitButton>
+ * </GForm>
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
      * Disabled state
+     * @demo
      */
     disabled?: boolean;
     /**
      * Loading text to show during submission
+     * @demo
      */
     loadingText?: string;
     /**
      * Variant
+     * @demo
      */
     variant?: "primary" | "secondary" | "danger";
-}
-declare var __VLS_8: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Disabled state
+     * @demo
+     */
+    disabled?: boolean;
+    /**
+     * Loading text to show during submission
+     * @demo
+     */
+    loadingText?: string;
+    /**
+     * Variant
+     * @demo
+     */
+    variant?: "primary" | "secondary" | "danger";
+}> & Readonly<{}>, {
     disabled: boolean;
     variant: "primary" | "secondary" | "danger";
     loadingText: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/GTable.vue.d.ts

@@ -16,29 +16,114 @@ export interface BulkAction {
      */
     theme?: "primary" | "secondary" | "accent" | "danger";
 }
+/**
+ * A data table component with support for grouping, sorting, filtering, and pagination.
+ *
+ * A heavy focus has been on performance. The table body doesn't use any
+ * Vue components, it's pure render functions. We've used it with
+ * 4000 rows and 14 columns loaded without issues.
+ *
+ * This is a bit complicated to use, so an example has been omitted here.
+ * Instead, look at the source for this demo: [GTable Demo Source](https://github.com/graduatecollege/grad-vue/blob/main/demo/components/demo/GTableDemo.vue).
+ *
+ * Here are some of the key points.
+ *
+ * Table content is provided with:
+ * - `columns` configuration using the `TableColumn` type.
+ *   - At minimum the configuration must include `key` for which field of the data
+ *     objects to use, and `label` for the column header.
+ *   - `sortable: true` makes the column sortable.
+ *   - `filter` can be used to provide a `TableColumnFilter` configuration.
+ *   - `display` accepts a custom render function for the column data.
+ *   - `trClass` and `tdClass` can be used to provide custom classes for table rows and cells.
+ * - `data` array with objects containing fields for the columns.
+ *
+ * Rows can be made clickable with `row-clickable`. In this case, one of the
+ * cells must contain a link. Clicking a row will emit a `row-click` event
+ * with the link `href` from the first link in the row.
+ *
+ * Grouping can be enabled by passing a column key to `groupBy`.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: <T extends TableRow, C extends TableColumn<T>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         /**
          * Accessible label
+         * @demo Colleges
          */
         label: string;
+        /**
+         * The data to display in the table
+         *
+         * The data should be an array of objects, each representing a row in the table.
+         * Each object should have a unique `key` property that can be used to identify the row.
+         */
         data: T[];
+        /**
+         * The columns to display in the table
+         *
+         * Each column's key needs to match the key of a property in the data objects,
+         * which determines the data to display in that column by default. You can also
+         * provide a custom display function to customize the data display.
+         */
         columns: C[];
+        /**
+         * Result count for all of the possible results (not just the current page)
+         *
+         * This is shown in the toolbar.
+         */
         resultCount?: number;
+        /**
+         * A column key to group the data by
+         *
+         * If provided, the `groupRender` render function will be used to render the group header.
+         */
         groupBy?: keyof T;
-        filtering?: UseFilteringReturn<any>;
+        /**
+         * A render function to customize the display of the group header.
+         *
+         * @param groupValue The value of the group key for the current row
+         * @param row The row object for the first row in the group
+         */
         groupRender?: (groupValue: any, row: T) => VNode;
+        /**
+         * Filtering object created with useFiltering()
+         */
+        filtering?: UseFilteringReturn<any>;
+        /**
+         * Make the table rows clickable
+         */
         rowClickable?: boolean;
+        /**
+         * A function to customize the classes applied to table rows
+         * @param row The row object
+         */
         rowClass?: (row: T) => string | string[] | undefined;
+        /**
+         * The starting index for this page
+         *
+         * This is used for the ARIA rowindex attribute, and is VERY important
+         * to not get wrong.
+         */
         startIndex: number;
         /**
          * Enable bulk selection with checkboxes
+         * @demo
          */
         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
+         * @demo
          */
         showPagination?: boolean;
     } & {
@@ -70,8 +155,6 @@ declare const __VLS_export: <T extends TableRow, C extends TableColumn<T>>(__VLS
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
 } : {

package/dist/components/GTermSelector.vue.d.ts

@@ -1,33 +1,73 @@
-interface Props {
+/**
+ * A button that shows the selected term. Clicking it opens a popover
+ * that allows jumping to a different term.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
     /**
      * Title for the popover.
+     * @demo Period Selection
      */
     title?: string;
     /**
      * Label for year select.
+     * @demo Select Year
      */
     yearLabel?: string;
     /**
      * Label for period select.
+     * @demo Term
      */
     periodLabel?: string;
+    /**
+     * List of possible term years
+     */
     termYears?: string[];
+    /**
+     * List of possible term names
+     */
     termNames?: string[];
-}
-type __VLS_Props = Props;
-type __VLS_ModelProps = {
+} & {
     modelValue?: {
         year: string;
         name: string;
     };
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: {
         year: string;
         name: string;
     }) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Title for the popover.
+     * @demo Period Selection
+     */
+    title?: string;
+    /**
+     * Label for year select.
+     * @demo Select Year
+     */
+    yearLabel?: string;
+    /**
+     * Label for period select.
+     * @demo Term
+     */
+    periodLabel?: string;
+    /**
+     * List of possible term years
+     */
+    termYears?: string[];
+    /**
+     * List of possible term names
+     */
+    termNames?: string[];
+} & {
+    modelValue?: {
+        year: string;
+        name: string;
+    };
+}> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
         year: string;
         name: string;
@@ -37,5 +77,3 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     termYears: string[];
     termNames: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/components/GTextInput.vue.d.ts

@@ -1,56 +1,119 @@
-type Props = {
+/**
+ * A text input with styling for a label, instructions, and error messages.
+ *
+ * If `label` is omitted, an accessible label must be provided some other way.
+ * All non-prop attributes are passed through to the input element, including
+ * `id`.
+ *
+ * Errors are provided as an array of strings or computed values.
+ * Multiple errors will all be displayed.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
      * Label
+     * @demo Example Label
      */
     label?: string;
     /**
      * Placeholder text
+     * @demo
      */
     placeholder?: string;
     /**
      * Disabled
+     * @demo
      */
     disabled?: boolean;
+    /**
+     * Error messages array (supports multiple validation errors)
+     */
     errors?: string[];
     /**
      * Instructions
+     * @demo
      */
     instructions?: string;
     /**
      * Prefix text (displayed before input)
+     * @demo
      */
     prefix?: string;
     /**
      * Suffix text (displayed after input)
+     * @demo
      */
     suffix?: string;
     /**
      * Debounce in milliseconds
+     * @demo
      */
     debounce?: number;
+    /**
+     * Name for form registration
+     */
     name?: string;
-};
-type __VLS_Props = Props;
-type __VLS_ModelProps = {
+} & {
     modelValue?: string | null;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    instructions?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null | undefined) => any;
     change: (args_0: {
         was: string | null | undefined;
         to: string | null;
     }) => any;
-    "update:modelValue": (value: string | null | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Label
+     * @demo Example Label
+     */
+    label?: string;
+    /**
+     * Placeholder text
+     * @demo
+     */
+    placeholder?: string;
+    /**
+     * Disabled
+     * @demo
+     */
+    disabled?: boolean;
+    /**
+     * Error messages array (supports multiple validation errors)
+     */
+    errors?: string[];
+    /**
+     * Instructions
+     * @demo
+     */
+    instructions?: string;
+    /**
+     * Prefix text (displayed before input)
+     * @demo
+     */
+    prefix?: string;
+    /**
+     * Suffix text (displayed after input)
+     * @demo
+     */
+    suffix?: string;
+    /**
+     * Debounce in milliseconds
+     * @demo
+     */
+    debounce?: number;
+    /**
+     * Name for form registration
+     */
+    name?: string;
+} & {
+    modelValue?: string | null;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
     onChange?: ((args_0: {
         was: string | null | undefined;
         to: string | null;
     }) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {
     label: string;
     name: string;
@@ -61,10 +124,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     prefix: string;
     suffix: string;
     debounce: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    instructions?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/GThreeWayToggle.vue.d.ts

@@ -1,37 +1,74 @@
-interface Props {
+/**
+ * This component acts like a radio button group condensed into a compact
+ * element with the goal of making it easy to go over many of them at once.
+ *
+ * In addition to the arrow keys changing the selected value, special key
+ * bindings exist for 'y' and 'n' to set yes and no respectively.
+ *
+ * A `describedby` prop can be passed with an ID to an element to be used as
+ * the `aria-describedby` for the group element.
+ *
+ * When the value changes, `v-model` is updated. A `change` event is also emitted
+ * if the value changed from user interaction.
+ *
+ * Slots:
+ * - `label`: Custom label content. Defaults to `label` prop if not provided.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
      * Accessible label
+     * @demo Three-way toggle
      */
     label: string;
+    /**
+     * ID of an element that describes the input
+     */
     describedby?: string;
     /**
      * Error message
+     * @demo
      */
     error?: string;
     /**
      * Disabled
+     * @demo
      */
     disabled?: boolean;
-}
-type __VLS_Props = Props;
-type __VLS_ModelProps = {
+} & {
     modelValue?: boolean | null;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (...args: any[]) => void;
     "update:modelValue": (value: boolean | null) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Accessible label
+     * @demo Three-way toggle
+     */
+    label: string;
+    /**
+     * ID of an element that describes the input
+     */
+    describedby?: string;
+    /**
+     * Error message
+     * @demo
+     */
+    error?: string;
+    /**
+     * Disabled
+     * @demo
+     */
+    disabled?: boolean;
+} & {
+    modelValue?: boolean | null;
+}> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean | null) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/GUserMenu.vue.d.ts

@@ -1,31 +1,82 @@
-interface Props {
+/**
+ * User menu component for toolbars. Displays a button with the user's initials
+ * inside a colored circle. When clicked, it opens a popover with the user's
+ * email and a menu for account-related links.
+ *
+ * **Slots**:
+ * - `default` contains menu items (links or buttons) that will be wrapped in
+ *   an unordered list for accessibility.
+ *
+ * **Props**:
+ * - `initials` - User's initials to display in the avatar
+ * - `email` - User's email to display in the popover
+ * - `color` - Background color for the avatar (should be deterministic)
+ * - `label` - Accessible label for the menu button. The initial will be prepended to this for the full label.
+ *
+ * Example:
+ *
+ * ```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>
+ * ```
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
      * User initial(s)
+     * @demo J
      */
     initials: string;
     /**
      * User email
+     * @demo j@example.org
      */
     email: string;
     /**
      * Background color
+     * @demo
      */
     color?: string;
     /**
      * Accessible label
+     * @demo
      */
     label?: string;
-}
-type __VLS_Slots = {
-    default(): any;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * User initial(s)
+     * @demo J
+     */
+    initials: string;
+    /**
+     * User email
+     * @demo j@example.org
+     */
+    email: string;
+    /**
+     * Background color
+     * @demo
+     */
+    color?: string;
+    /**
+     * Accessible label
+     * @demo
+     */
+    label?: string;
+}> & Readonly<{}>, {
     label: string;
     color: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default(): any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/form/GFormErrorMessages.vue.d.ts

@@ -3,7 +3,9 @@
  * This component is used by form input components to display validation errors
  * in a consistent way across all form fields.
  */
-interface Props {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
     /**
      * Array of error messages to display
      */
@@ -12,7 +14,13 @@ interface Props {
      * ID for the error container (used for aria-describedby)
      */
     id: string;
-}
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Array of error messages to display
+     */
+    errors: string[];
+    /**
+     * ID for the error container (used for aria-describedby)
+     */
+    id: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/table/GTableBody.vue.d.ts

@@ -1,6 +1,11 @@
 import { type VNode } from "vue";
 import { TableColumn, TableRow } from "./TableColumn.ts";
 import { UseTableChangesReturn } from "../../compose/useTableChanges.ts";
+/**
+ * Internal component for rendering the table body.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: <T extends TableRow, C extends TableColumn<T>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
         data: T[];
@@ -40,8 +45,6 @@ declare const __VLS_export: <T extends TableRow, C extends TableColumn<T>>(__VLS
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
 } : {