@illinois-grad/grad-vue 2.3.4 → 2.4.0

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

@@ -12,22 +12,25 @@
  * </GDetailList>
  * ```
  */
-interface Props {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
      * Layout style for the items.
+     * @demo
      */
     variant?: "grid" | "vertical";
-}
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => 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<{
+    /**
+     * Layout style for the items.
+     * @demo
+     */
+    variant?: "grid" | "vertical";
+}> & Readonly<{}>, {
     variant: "grid" | "vertical";
-}, {}, {}, {}, 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/GEmailInput.vue.d.ts

@@ -1,31 +1,76 @@
-type Props = {
+/**
+ * An email input component.
+ *
+ * This component is a wrapper around GTextInput with type="email" for
+ * proper email validation and mobile keyboard optimization.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
     /**
      * Label
+     * @demo
      */
     label?: string;
     /**
      * Placeholder text
+     * @demo
      */
     placeholder?: string;
     /**
      * Disabled
+     * @demo
      */
     disabled?: boolean;
+    /**
+     * Error messages array (supports multiple validation errors)
+     */
     errors?: string[];
     /**
      * Instructions
+     * @demo
      */
     instructions?: string;
+    /**
+     * Name for form registration
+     */
     name?: string;
-};
-type __VLS_Props = Props;
-type __VLS_ModelProps = {
+} & {
     modelValue?: string | null;
-};
-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: string | null | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Label
+     * @demo
+     */
+    label?: string;
+    /**
+     * Placeholder text
+     * @demo
+     */
+    placeholder?: string;
+    /**
+     * Disabled
+     * @demo
+     */
+    disabled?: boolean;
+    /**
+     * Error messages array (supports multiple validation errors)
+     */
+    errors?: string[];
+    /**
+     * Instructions
+     * @demo
+     */
+    instructions?: string;
+    /**
+     * Name for form registration
+     */
+    name?: string;
+} & {
+    modelValue?: string | null;
+}> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
 }>, {
     label: string;
@@ -35,5 +80,3 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     disabled: boolean;
     instructions: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,40 +1,73 @@
-interface Props {
+/**
+ * A form wrapper component that automatically manages form state and
+ * connects to child input components.
+ *
+ * Child input components that have a `name` prop will automatically
+ * register with the form, and their values will be tracked in the form model.
+ *
+ * ### Features
+ *
+ * - Automatic value tracking for child input components with the `name` prop
+ * - Reactive error handling by providing a computed list of errors
+ * - Optionally manage your own form state in a parent component by providing a
+ *   `form` injection
+ *
+ * ### Basic example
+ *
+ * ```vue-html
+ * <GForm v-model="formData" @submit="handleSubmit">
+ *   <template #default="{ isSubmitting, hasErrors }">
+ *     <GTextInput name="firstName" label="First Name" :errors="firstNameErrors" />
+ *     <GSubmitButton :disabled="hasErrors">Submit</GSubmitButton>
+ *   </template>
+ * </GForm>
+ * ```
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
      * Action URL (optional, for native form submission)
+     * @demo
      */
     action?: string;
     /**
      * HTTP method (optional, for native form submission)
+     * @demo
      */
     method?: string;
-}
-type __VLS_Props = Props;
-type __VLS_ModelProps = {
+} & {
     modelValue?: Record<string, any>;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {
-    isSubmitting: boolean;
-    hasErrors: boolean;
-    values: Record<string, any>;
-    errors: Record<string, string[]>;
-};
-type __VLS_Slots = {} & {
-    default?: (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: Record<string, any>) => any;
     submit: (values: Record<string, any>) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Action URL (optional, for native form submission)
+     * @demo
+     */
+    action?: string;
+    /**
+     * HTTP method (optional, for native form submission)
+     * @demo
+     */
+    method?: string;
+} & {
+    modelValue?: Record<string, any>;
+}> & Readonly<{
     "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
     onSubmit?: ((values: Record<string, any>) => any) | undefined;
 }>, {
     action: string;
     method: 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: {
+        isSubmitting: boolean;
+        hasErrors: boolean;
+        values: Record<string, any>;
+        errors: Record<string, string[]>;
+    }) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,15 +1,49 @@
-interface Props {
+/**
+ * A hamburger menu button that toggles a sidebar, intended for the
+ * GAppHeader and GSidebar components.
+ *
+ * <span id="use-sidebar">Use with the `useSidebar`</span> composable function
+ * that takes care of passing state between the different components.
+ *
+ * Here's an example, this could be your App.vue or a layout file:
+ *
+ * ```vue
+ * <script setup lang="ts">
+ * import { computed, h, onMounted, provide, ref, useTemplateRef } from "vue";
+ * import { useSidebar } from "../src/compose/useSidebar";
+ *
+ * const sidebar = useSidebar();
+ * provide("sidebar", sidebar);
+ *
+ * // Or optionally a custom breakpoint
+ * // const sidebar = useSidebar("(max-width: 600px)");
+ * &lt;/script>
+ * ```
+ *
+ * As long as GHamburgerMenu and GSidebar are descendants of the component that
+ * provides the sidebar, they will be able to communicate with each other.
+ *
+ * > [!NOTE]
+ * > This button hides itself automatically according to the useSidebar media query.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
     /**
      * Accessible label
+     * @demo
      */
     label?: string;
-}
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: () => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Accessible label
+     * @demo
+     */
+    label?: string;
+}> & Readonly<{
     onToggle?: (() => any) | undefined;
 }>, {
     label: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,11 +1,45 @@
+/**
+ * A scroller that is used for content that's typically shown like a chat log,
+ * meaning it starts at the bottom, and you scroll up for older entries.
+ *
+ * The scroller automatically starts at the bottom. When scrolled up, a button
+ * appears that jumps to the bottom. This button is also the first focusable
+ * element for accessibility.
+ *
+ * If the `label` is provided, the scroller will have the ARIA `role="log"` and
+ * the label as the `aria-label`.
+ *
+ * **Slot** `default` is what will be rendered for each entry in the
+ * `entries`. For example:
+ *
+ * ```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>
+ * ```
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: <T extends {
     id: string | number;
 }>(__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 History
          */
         label?: string;
+        /**
+         * History entries passed to default slot
+         * @demo
+         */
         entries: T[];
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -21,8 +55,6 @@ declare const __VLS_export: <T extends {
 }>) => 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/GModal.vue.d.ts

@@ -1,37 +1,103 @@
-interface Props {
+/**
+ * Generic modal component.
+ *
+ * Clicking on the outside or pressing the escape key will close the modal.
+ *
+ * > [!IMPORTANT]
+ * >
+ * > The surrounding page **must** have an element with the id `modal-root`,
+ * > this modal will be teleported to it, so it can properly be over all
+ * > other content. The `modal-root` should be somewhere near the end of the
+ * > page structure.
+ *
+ * **Props**:
+ *
+ * - `label`: Modal accessible label.
+ * - `describedby`: Element ID to pass to aria-describedby. Use this if there's
+ *   specific important text to describe the modal.
+ * - `hiddenLabel`: Hide label visually. It will still be used as `aria-label`.
+ * - `size`: Modal size
+ *
+ * **Slot** `default` is used as the content of the modal.
+ *
+ * When the modal is opened, focus is placed on the H2 label element. This
+ * can be overridden by providing a `popover-focus` attribute on an element
+ * inside the modal.
+ *
+ * Adding a dimming overlay behind modals can be done by placing `GOverlay`
+ * at the end of the page structure.
+ *
+ * > [!WARNING]
+ * > There are some shenanigans in the modal and overlay implementation in order
+ * > to support Nuxt without including it as a dependency. Specifically, the refs
+ * > to store the state of the overlay stack is added to `window._g_overlay_stack_state`
+ * > when `document` is defined. That makes it only load in the client.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
      * Modal label
+     * @demo Basic Modal
      */
     label: string;
     /**
      * ID for aria-describedby
+     * @demo
      */
     describedby?: string;
     /**
      * Hide label
+     * @demo
      */
     hiddenLabel?: boolean;
     /**
      * Modal size
+     * @demo
      */
     size?: "small" | "medium" | "large" | "full";
-}
-declare var __VLS_13: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /**
+     * Modal classes
+     * @demo
+     */
+    classes?: string | string[];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Modal label
+     * @demo Basic Modal
+     */
+    label: string;
+    /**
+     * ID for aria-describedby
+     * @demo
+     */
+    describedby?: string;
+    /**
+     * Hide label
+     * @demo
+     */
+    hiddenLabel?: boolean;
+    /**
+     * Modal size
+     * @demo
+     */
+    size?: "small" | "medium" | "large" | "full";
+    /**
+     * Modal classes
+     * @demo
+     */
+    classes?: string | string[];
+}> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {
     size: "small" | "medium" | "large" | "full";
     hiddenLabel: boolean;
     describedby: 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/GOverlay.vue.d.ts

@@ -1,3 +1,6 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Client-side overlay for behind modal dialogs.
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,37 +1,62 @@
-interface Props {
+/**
+ * Popover that appears next to or over a trigger element, staying visible
+ * in the viewport as much as possible.
+ *
+ * **Slot** `trigger` must have an interactive element for which
+ * the only interaction is to open the popover. The trigger element is also used
+ * for `aria-labelledby`. The trigger is passed a prop `toggle` which is a function
+ * that toggles the popover's open state.
+ *
+ * **Slot** `default` is the content of the popover.
+ *
+ * Example:
+ *
+ * ```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>
+ * ```
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
      * Render without padding
+     * @demo
      */
     minimal?: boolean;
-}
-type __VLS_Props = Props;
-declare function toggle(): void;
-type __VLS_ModelProps = {
-    modelValue?: boolean;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {
-    toggle: typeof toggle;
-}, __VLS_9: {};
-type __VLS_Slots = {} & {
-    trigger?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_9) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    modelValue?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     show: (...args: any[]) => void;
     hide: (...args: any[]) => void;
     "update:modelValue": (value: boolean) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Render without padding
+     * @demo
+     */
+    minimal?: boolean;
+} & {
+    modelValue?: boolean;
+}> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;
     onHide?: ((...args: any[]) => any) | undefined;
 }>, {
     minimal: boolean;
-}, {}, {}, {}, 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>, {
+    trigger?: (props: {
+        toggle: () => void;
+    }) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,21 +1,54 @@
-type Props = {
+/**
+ * A component that can show progress from 1 to 100 or an indeterminate spinner.
+ * If a value is omitted, the progress will be indeterminate.
+ *
+ * If no `label` is specified, the default accessible label will be "Loading".
+ *
+ * If a value is provided, the element will have the ARIA role `progressbar`
+ * with the appropriate ARIA value attributes.
+ *
+ * If no value is provided, the element will have the ARIA role `status`.
+ *
+ * > [!NOTE]
+ * > This element announces to assistive technologies, so make sure to
+ * > limit its use to cases where that's appropriate.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /**
+     * Accessible label
+     * @demo
+     */
+    label?: string;
+    /**
+     * Progress 1-100 or blank
+     * @demo
+     */
+    value?: number;
+    /**
+     * Progress circle size
+     * @demo
+     */
+    size?: "tiny" | "small" | "medium" | "large";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /**
      * Accessible label
+     * @demo
      */
     label?: string;
     /**
      * Progress 1-100 or blank
+     * @demo
      */
     value?: number;
     /**
      * Progress circle size
+     * @demo
      */
     size?: "tiny" | "small" | "medium" | "large";
-};
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+}> & Readonly<{}>, {
     size: "tiny" | "small" | "medium" | "large";
     label: string;
     value: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;