@illinois-grad/grad-vue 2.5.0 → 2.5.2

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

@@ -0,0 +1,120 @@
+export interface CheckboxOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    hint?: string;
+}
+/**
+ * A group of checkboxes (or radio buttons) with styling for a label,
+ * instructions, and error messages.
+ *
+ * When more than one option is provided (or `radio` mode is used), a
+ * `fieldset` + `legend` provides semantic grouping. With a single checkbox
+ * a plain `div` is rendered instead.
+ *
+ * Each option renders as a native `<input type="checkbox">` (or
+ * `type="radio"` when `radio` is `true`) so that keyboard navigation and
+ * browser/assistive-technology support come for free.
+ *
+ * In standard Vue usage, this registers with the nearest parent `GForm` via
+ * injection. In custom-elements mode, use matching `form-key` values to pair
+ * with a `GForm`.
+ *
+ * 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: import("vue").DefineComponent<{
+    /**
+     * Legend / accessible label for the group
+     * @demo Checkbox Group
+     */
+    label?: string;
+    /**
+     * List of checkbox options
+     */
+    options: CheckboxOption[];
+    /**
+     * Instructions shown below the legend
+     * @demo
+     */
+    instructions?: string;
+    /**
+     * Error messages array (supports multiple validation errors)
+     */
+    errors?: string[];
+    /**
+     * Mark the group as required
+     * @demo
+     */
+    required?: boolean;
+    /**
+     * Render as radio buttons (single-select)
+     * @demo
+     */
+    radio?: boolean;
+    /**
+     * Name for form registration and native input `name` attribute
+     */
+    name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
+} & {
+    modelValue?: string[];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+    change: (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Legend / accessible label for the group
+     * @demo Checkbox Group
+     */
+    label?: string;
+    /**
+     * List of checkbox options
+     */
+    options: CheckboxOption[];
+    /**
+     * Instructions shown below the legend
+     * @demo
+     */
+    instructions?: string;
+    /**
+     * Error messages array (supports multiple validation errors)
+     */
+    errors?: string[];
+    /**
+     * Mark the group as required
+     * @demo
+     */
+    required?: boolean;
+    /**
+     * Render as radio buttons (single-select)
+     * @demo
+     */
+    radio?: boolean;
+    /**
+     * Name for form registration and native input `name` attribute
+     */
+    name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
+} & {
+    modelValue?: string[];
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    onChange?: ((value: string[]) => any) | undefined;
+}>, {
+    label: string;
+    radio: boolean;
+    name: string;
+    instructions: string;
+    errors: string[];
+    required: boolean;
+    formKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -3,6 +3,10 @@
  *
  * This component is a wrapper around a text input with a prefix and
  * appropriate input type for currency values.
+ *
+ * In standard Vue usage, this registers with the nearest parent `GForm` via
+ * injection. In custom-elements mode, use matching `form-key` values to pair
+ * with a `GForm`.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -35,6 +39,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Name for form registration
      */
     name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | null;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -68,6 +76,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Name for form registration
      */
     name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | null;
 }> & Readonly<{
@@ -76,7 +88,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
     placeholder: string;
     name: string;
-    disabled: boolean;
-    errors: string[];
     instructions: string;
+    errors: string[];
+    formKey: string;
+    disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -3,6 +3,10 @@
  *
  * This component is a wrapper around GTextInput with type="date" for
  * proper date selection using the browser's native date picker.
+ *
+ * In standard Vue usage, this registers with the nearest parent `GForm` via
+ * injection. In custom-elements mode, use matching `form-key` values to pair
+ * with a `GForm`.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -35,6 +39,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Name for form registration
      */
     name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | null;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -68,6 +76,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Name for form registration
      */
     name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | null;
 }> & Readonly<{
@@ -76,7 +88,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
     placeholder: string;
     name: string;
-    disabled: boolean;
-    errors: string[];
     instructions: string;
+    errors: string[];
+    formKey: string;
+    disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -3,6 +3,10 @@
  *
  * This component uses two GDateInput components laid out horizontally
  * to allow selecting a date range.
+ *
+ * In standard Vue usage, this registers with the nearest parent `GForm` via
+ * injection. In custom-elements mode, use matching `form-key` values to pair
+ * with a `GForm`.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -40,6 +44,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Name for form registration
      */
     name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: {
         start: string | null;
@@ -84,6 +92,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Name for form registration
      */
     name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: {
         start: string | null;
@@ -97,9 +109,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }>, {
     label: string;
     name: string;
-    disabled: boolean;
-    errors: string[];
     instructions: string;
+    errors: string[];
+    formKey: string;
+    disabled: boolean;
     startLabel: string;
     endLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -76,7 +76,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
     placeholder: string;
     name: string;
-    disabled: boolean;
-    errors: string[];
     instructions: string;
+    errors: string[];
+    disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,138 @@
+/**
+ * A file input component for accessible file uploads.
+ *
+ * If `label` is omitted, an accessible label must be provided some other way.
+ *
+ * In standard Vue usage, this registers with the nearest parent `GForm` via
+ * injection. In custom-elements mode, use matching `form-key` values to pair
+ * with a `GForm`.
+ *
+ * Errors are provided as an array of strings. Multiple errors will all be
+ * displayed. Client-side validation errors from `maxFileSize` and `maxFiles`
+ * are shown alongside any provided `errors`.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /**
+     * Label
+     * @demo Upload File
+     */
+    label?: string;
+    /**
+     * Instructions
+     * @demo
+     */
+    instructions?: string;
+    /**
+     * Disabled
+     * @demo
+     */
+    disabled?: boolean;
+    /**
+     * Error messages array (supports multiple validation errors)
+     */
+    errors?: string[];
+    /**
+     * Required
+     * @demo
+     */
+    required?: boolean;
+    /**
+     * Name for form registration
+     */
+    name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
+    /**
+     * Accepted file types (e.g. ".pdf,.docx" or "image/*")
+     * @demo
+     */
+    accept?: string;
+    /**
+     * Allow multiple file selection
+     * @demo
+     */
+    multiple?: boolean;
+    /**
+     * Maximum file size in bytes for client-side validation
+     * @demo
+     */
+    maxFileSize?: number;
+    /**
+     * Maximum number of files allowed for client-side validation
+     * @demo
+     */
+    maxFiles?: number;
+} & {
+    modelValue?: File[];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: File[]) => any;
+    change: (files: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Label
+     * @demo Upload File
+     */
+    label?: string;
+    /**
+     * Instructions
+     * @demo
+     */
+    instructions?: string;
+    /**
+     * Disabled
+     * @demo
+     */
+    disabled?: boolean;
+    /**
+     * Error messages array (supports multiple validation errors)
+     */
+    errors?: string[];
+    /**
+     * Required
+     * @demo
+     */
+    required?: boolean;
+    /**
+     * Name for form registration
+     */
+    name?: string;
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
+    /**
+     * Accepted file types (e.g. ".pdf,.docx" or "image/*")
+     * @demo
+     */
+    accept?: string;
+    /**
+     * Allow multiple file selection
+     * @demo
+     */
+    multiple?: boolean;
+    /**
+     * Maximum file size in bytes for client-side validation
+     * @demo
+     */
+    maxFileSize?: number;
+    /**
+     * Maximum number of files allowed for client-side validation
+     * @demo
+     */
+    maxFiles?: number;
+} & {
+    modelValue?: File[];
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
+    onChange?: ((files: File[]) => any) | undefined;
+}>, {
+    instructions: string;
+    errors: string[];
+    required: boolean;
+    disabled: boolean;
+    multiple: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -11,6 +11,8 @@
  * - 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
+ * - In web components mode, use the `form-key` prop to pair a form with
+ *   matching inputs/buttons across custom element app boundaries
  *
  * ### Basic example
  *
@@ -36,6 +38,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     method?: string;
+    /**
+     * Form channel key for custom elements mode
+     * @demo
+     */
+    formKey?: string;
 } & {
     modelValue?: Record<string, any>;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -52,12 +59,18 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     method?: string;
+    /**
+     * Form channel key for custom elements mode
+     * @demo
+     */
+    formKey?: string;
 } & {
     modelValue?: Record<string, any>;
 }> & Readonly<{
     onSubmit?: ((values: Record<string, any>) => any) | undefined;
     "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
 }>, {
+    formKey: string;
     action: string;
     method: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

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

@@ -25,6 +25,8 @@
  *
  * > [!NOTE]
  * > This button hides itself automatically according to the useSidebar media query.
+ * > In web components mode, use the `sidebar-key` prop to pair this menu with a
+ * > matching GSidebar instance.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -34,6 +36,11 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     label?: string;
+    /**
+     * Sidebar channel key for custom elements mode
+     * @demo
+     */
+    sidebarKey?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: () => any;
 }, string, import("vue").PublicProps, Readonly<{
@@ -42,8 +49,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     label?: string;
+    /**
+     * Sidebar channel key for custom elements mode
+     * @demo
+     */
+    sidebarKey?: string;
 }> & Readonly<{
     onToggle?: (() => any) | undefined;
 }>, {
     label: string;
+    sidebarKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -26,12 +26,6 @@
  *
  * 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;

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

@@ -2,11 +2,14 @@
  * 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
+ * **Slot** `trigger` is optional. When provided, it should contain an
+ * interactive element for opening the popover and it is used for
+ * `aria-labelledby`. The trigger is passed a prop `toggle` which is a function
  * that toggles the popover's open state.
  *
+ * Without a trigger slot, open the popover programmatically via `show()` or
+ * `toggle()` on the component instance / custom element.
+ *
  * **Slot** `default` is the content of the popover.
  *
  * Example:
@@ -30,25 +33,38 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     minimal?: boolean;
-} & {
+    /**
+     * v-model binding for the open state. Also works as a plain
+     * prop/attribute in custom-element mode where `defineModel`
+     * would revert local state.
+     */
     modelValue?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
     show: (...args: any[]) => void;
     hide: (...args: any[]) => void;
-    "update:modelValue": (value: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<{
     /**
      * Render without padding
      * @demo
      */
     minimal?: boolean;
-} & {
+    /**
+     * v-model binding for the open state. Also works as a plain
+     * prop/attribute in custom-element mode where `defineModel`
+     * would revert local state.
+     */
     modelValue?: boolean;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;
     onHide?: ((...args: any[]) => any) | undefined;
 }>, {
+    modelValue: boolean;
     minimal: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     trigger?: (props: {

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

@@ -2,6 +2,10 @@
  * By default, this component behaves like a normal select element with
  * custom styling.
  *
+ * In standard Vue usage, this registers with the nearest parent `GForm` via
+ * injection. In custom-elements mode, use matching `form-key` values to pair
+ * with a `GForm`.
+ *
  * The component can be marked `searchable` to enable search functionality.
  * This turns it into a text input that filters the options. Filtering is
  * done with a simple lower-case string search.
@@ -64,6 +68,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * Error messages array (supports multiple validation errors)
      */
     errors?: string[];
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | number | null;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -122,6 +130,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * Error messages array (supports multiple validation errors)
      */
     errors?: string[];
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | number | null;
 }> & Readonly<{
@@ -129,8 +141,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
 }>, {
     name: string;
-    disabled: boolean;
     errors: string[];
+    formKey: string;
+    disabled: boolean;
     searchable: boolean;
     compact: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

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

@@ -1,6 +1,10 @@
 /**
  * This component is just a radio button group with special styling.
  *
+ * In standard Vue usage, this registers with the nearest parent `GForm` via
+ * injection. In custom-elements mode, use matching `form-key` values to pair
+ * with a `GForm`.
+ *
  * Use the `options` prop to provide a list of choices. Each option can
  * be a string or an object with `label` and `value` properties.
  *
@@ -40,6 +44,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Error messages array (supports multiple validation errors)
      */
     errors?: string[];
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | number;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -76,6 +84,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * Error messages array (supports multiple validation errors)
      */
     errors?: string[];
+    /**
+     * Form channel key for custom elements mode
+     */
+    formKey?: string;
 } & {
     modelValue?: string | number;
 }> & Readonly<{
@@ -84,6 +96,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }>, {
     size: "small" | "medium" | "large";
     name: string;
-    disabled: boolean;
     errors: string[];
+    formKey: string;
+    disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -11,6 +11,9 @@
  * The sidebar can be made collapsible by providing the `sidebar` injected
  * object from `useSidebar`. See the [Hamburger Menu Documentation](#use-sidebar)
  * for details.
+ *
+ * In web components mode, use the `sidebar-key` prop to pair this sidebar
+ * with a matching GHamburgerMenu instance.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -45,6 +48,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     width?: string;
+    /**
+     * Sidebar channel key for custom elements mode
+     * @demo
+     */
+    sidebarKey?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /**
      * Custom background color
@@ -76,9 +84,15 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     width?: string;
+    /**
+     * Sidebar channel key for custom elements mode
+     * @demo
+     */
+    sidebarKey?: string;
 }> & Readonly<{}>, {
     width: string;
     theme: "light" | "dark";
+    sidebarKey: string;
     backgroundColor: string;
     backgroundImage: string;
     topOffset: string;