@illinois-grad/grad-vue 2.3.5 → 2.4.0

package/README.md

@@ -97,11 +97,26 @@ npm run sync-props
 
 Some notes on this process:
 
-- The `docs` section is generated from a jsdoc immediately after the opening `<script setup` tag. It supports markdown formatting.
-- The `props-config` section is generated from the `Props` interface or type in the component script, with default
-  values from the `withDefaults` function call.
-- The `Props` interface can have a `// Demo: <value>` comment to override the default value for the prop in the demo.
-- Props without a jsdoc will not be included in the demo.
+- The `docs` section is generated from a JSDoc comment at the top of the non-setup `<script>` block. It supports markdown formatting.
+- The `props-config` section is generated from the `Props` interface or type in the component script.
+- **Only props with a `@demo` tag in their JSDoc are included in the demo config.** This lets you write full JSDoc on every prop for IDE/documentation purposes without all of them appearing in the interactive demo panel.
+- A non-empty `@demo` value is used as the pre-filled default shown in the demo input:
+  ```typescript
+  /**
+   * Modal label
+   * @demo Basic Modal
+   */
+  label: string;
+  ```
+- An empty `@demo` tag (no value) includes the prop in the demo but with no pre-filled value:
+  ```typescript
+  /**
+   * Placeholder text
+   * @demo
+   */
+  placeholder?: string;
+  ```
+- Props without a `@demo` tag will not be included in the demo, regardless of whether they have a JSDoc comment.
 
 > [!TIP]
 > The markdown docs at the top of the component file cannot have a `</script>` because of how Vue.js parses the file.

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

@@ -1,35 +1,66 @@
-interface Props {
+/**
+ * Alert dialog for confirming or canceling actions.
+ *
+ * Clicking on the outside or pressing the escape key will close the dialog
+ * and that counts as canceling.
+ *
+ * > [!IMPORTANT]
+ * >
+ * > The surrounding page **must** have an element with the id `modal-root`,
+ * > this dialog 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.
+ *
+ * **Slot** `default` is used as the content of the alert, and also becomes
+ * the ARIA description of the alert.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
      * Dialog label
+     * @demo
      */
     label?: string;
     /**
      * Accept button text
+     * @demo
      */
     buttonText?: string;
     /**
      * Accept button color
+     * @demo
      */
     buttonColor?: "primary" | "secondary" | "danger";
-}
-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, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: (...args: any[]) => void;
     confirm: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Dialog label
+     * @demo
+     */
+    label?: string;
+    /**
+     * Accept button text
+     * @demo
+     */
+    buttonText?: string;
+    /**
+     * Accept button color
+     * @demo
+     */
+    buttonColor?: "primary" | "secondary" | "danger";
+}> & Readonly<{
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }>, {
     label: string;
     buttonText: string;
     buttonColor: "primary" | "secondary" | "danger";
-}, {}, {}, {}, 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/GAppHeader.vue.d.ts

@@ -8,34 +8,46 @@
  *
  * **Slot** `app-controls` is the remaining area to the right.
  */
-type Props = {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Whether to show the Illinois logo
+     */
     illinois?: boolean;
     /**
      * Top-left corner text
      *
      * You can customize this text element with the "left" slot.
+     * @demo
      */
     brand?: string;
-};
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {
-    class: string;
-};
-type __VLS_Slots = {} & {
-    left?: (props: typeof __VLS_1) => any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Whether to show the Illinois logo
+     */
+    illinois?: boolean;
+    /**
+     * Top-left corner text
+     *
+     * You can customize this text element with the "left" slot.
+     * @demo
+     */
+    brand?: string;
+}> & Readonly<{}>, {
+    illinois: boolean;
+    brand: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    left?: (props: {}) => any;
 } & {
-    icon?: (props: typeof __VLS_3) => any;
+    icon?: (props: {}) => any;
 } & {
-    title?: (props: typeof __VLS_5) => any;
+    title?: (props: {}) => any;
 } & {
-    'app-controls'?: (props: typeof __VLS_7) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    illinois: boolean;
-    brand: 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;
+    'app-controls'?: (props: {
+        class: string;
+    }) => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,29 +1,59 @@
-interface Props {
+/**
+ * The element or component can be set with the `component` prop, so it can be
+ * a link or `router-link` component from vue-router. For example:
+ *
+ * ```vue-html
+ * <GButton component="router-link" to="/some-route">
+ *     Click me
+ * </GButton>
+ * ```
+ *
+ * Note that grad-vue doesn't include vue-router as a dependency.
+ *
+ * **Icons** can be added with either the `icon` prop or a named slot `icon`:
+ * - Use the `icon` prop to pass an icon class string, e.g., "fa-solid fa-plus".
+ * - If using the `icon` prop, the icon will be rendered as a span with the `aria-hidden` attribute set to `true`.
+ * - Use a named slot `icon` to provide custom icon content.
+ * - If both `icon` prop and named slot `icon` are provided, the named slot takes precedence.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
      * Button size
+     * @demo
      */
     size?: "small" | "medium" | "large";
     /**
      * Button color theme
+     * @demo
      */
     theme?: "primary" | "secondary" | "accent" | "danger" | "none";
     /**
      * Use outlined style
+     * @demo
      */
     outlined?: boolean;
     /**
      * Use text style
+     * @demo
      */
     text?: boolean;
+    /**
+     * The to target for when using the button as a router-link
+     */
     to?: string | Record<string, any>;
+    /**
+     * The component to use for the button
+     */
     component?: string;
+    /**
+     * Optional icon classes to render an icon span before the label.
+     * Example: "fa-solid fa-plus" or "material-symbols:add".
+     * If a named slot `icon` is provided, it takes precedence over this prop.
+     */
     icon?: string;
-}
-type __VLS_Slots = {
-    default(): any;
-    icon?: () => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
     focus: (...args: any[]) => void;
     blur: (...args: any[]) => void;
@@ -33,7 +63,42 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     mouseup: (...args: any[]) => void;
     mouseenter: (...args: any[]) => void;
     mouseleave: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Button size
+     * @demo
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Button color theme
+     * @demo
+     */
+    theme?: "primary" | "secondary" | "accent" | "danger" | "none";
+    /**
+     * Use outlined style
+     * @demo
+     */
+    outlined?: boolean;
+    /**
+     * Use text style
+     * @demo
+     */
+    text?: boolean;
+    /**
+     * The to target for when using the button as a router-link
+     */
+    to?: string | Record<string, any>;
+    /**
+     * The component to use for the button
+     */
+    component?: string;
+    /**
+     * Optional icon classes to render an icon span before the label.
+     * Example: "fa-solid fa-plus" or "material-symbols:add".
+     * If a named slot `icon` is provided, it takes precedence over this prop.
+     */
+    icon?: string;
+}> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
@@ -51,10 +116,10 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     to: string | Record<string, any>;
     component: string;
     icon: 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;
+    icon?: () => any;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,17 +1,42 @@
-interface Props {
+/**
+ * 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.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
     /**
      * Text
+     * @demo This is some text to get copied
      */
     text: string;
     /**
      * Hide the visible text
+     * @demo
      */
     hideText?: boolean;
     /**
      * Copy button label
+     * @demo
      */
     copyLabel?: 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<{
+    /**
+     * Text
+     * @demo This is some text to get copied
+     */
+    text: string;
+    /**
+     * Hide the visible text
+     * @demo
+     */
+    hideText?: boolean;
+    /**
+     * Copy button label
+     * @demo
+     */
+    copyLabel?: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,31 +1,76 @@
-type Props = {
+/**
+ * A currency input component for US dollars.
+ *
+ * This component is a wrapper around a text input with a prefix and
+ * appropriate input type for currency values.
+ */
+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/GDateInput.vue.d.ts

@@ -1,31 +1,76 @@
-type Props = {
+/**
+ * A date input component.
+ *
+ * This component is a wrapper around GTextInput with type="date" for
+ * proper date selection using the browser's native date picker.
+ */
+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/GDateRangeInput.vue.d.ts

@@ -1,40 +1,99 @@
-type Props = {
+/**
+ * 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.
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /**
+     * Label for the component
+     * @demo
+     */
+    label?: string;
+    /**
+     * Label for the start date input
+     * @demo
+     */
+    startLabel?: string;
+    /**
+     * Label for the end date input
+     * @demo
+     */
+    endLabel?: 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?: {
+        start: string | null;
+        end: string | null;
+    };
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        start: string | null;
+        end: string | null;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{
     /**
      * Label for the component
+     * @demo
      */
     label?: string;
     /**
      * Label for the start date input
+     * @demo
      */
     startLabel?: string;
     /**
      * Label for the end date input
+     * @demo
      */
     endLabel?: 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 DateRange = {
-    start: string | null;
-    end: string | null;
-};
-type __VLS_ModelProps = {
-    modelValue?: DateRange;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: DateRange) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: DateRange) => any) | undefined;
+} & {
+    modelValue?: {
+        start: string | null;
+        end: string | null;
+    };
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        start: string | null;
+        end: string | null;
+    }) => any) | undefined;
 }>, {
     label: string;
     name: string;
@@ -44,5 +103,3 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     startLabel: string;
     endLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;