@illinois-grad/grad-vue 2.5.5 → 3.0.0

package/custom-elements.json

@@ -2840,15 +2840,6 @@
               "optional": true,
               "description": "Title and accessible name for the nav landmark"
             },
-            {
-              "kind": "field",
-              "name": "items",
-              "type": {
-                "text": "TreeMenuItem[]"
-              },
-              "optional": false,
-              "description": "Items for the menu"
-            },
             {
               "kind": "field",
               "name": "listType",
@@ -2856,7 +2847,7 @@
                 "text": "\"ul\" | \"ol\""
               },
               "optional": true,
-              "description": "List element type - use `ol` for numbered hierarchies like book chapters",
+              "description": "List element type",
               "default": "\"ul\""
             },
             {
@@ -2868,12 +2859,60 @@
               "optional": true,
               "description": "Theme",
               "default": "\"light\""
+            },
+            {
+              "kind": "field",
+              "name": "storageKey",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "When provided, expanded/collapsed states are saved to `sessionStorage` under this key and restored on page load. Item states are keyed by each the `label` prop."
             }
           ],
           "events": []
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/web-components.js",
+      "declarations": [
+        {
+          "kind": "custom-element",
+          "name": "GTreeMenuListElement",
+          "tagName": "g-tree-menu-list",
+          "members": [],
+          "events": []
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/web-components.js",
+      "declarations": [
+        {
+          "kind": "custom-element",
+          "name": "GTreeMenuItemElement",
+          "tagName": "g-tree-menu-item",
+          "members": [],
+          "events": [
+            {
+              "name": "expand",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "name": "collapse",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ]
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/web-components.js",

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

@@ -1,20 +1,37 @@
-import type { TreeMenuItem } from "./tree-menu/GTreeMenuList.vue";
 /**
  * A hierarchical sidebar menu component suitable for book-like or nested-section
  * navigation. Items with children start collapsed and can be expanded/collapsed
  * individually.
  *
+ * Links are authored directly in HTML for progressive enhancement — the page
+ * works as a basic list of links even without JavaScript.
+ *
+ * Use `GTreeMenuList` and `GTreeMenuItem` sub-components to build the menu:
+ *
+ * ```vue-html
+ * <GTreeMenu title="Contents">
+ *     <GTreeMenuList>
+ *         <GTreeMenuItem label="Chapter 1">
+ *             <a href="#ch1">Chapter 1</a>
+ *             <template #children>
+ *                 <GTreeMenuItem><a href="#s1">Section 1.1</a></GTreeMenuItem>
+ *             </template>
+ *         </GTreeMenuItem>
+ *     </GTreeMenuList>
+ * </GTreeMenu>
+ * ```
+ *
  * **Props**:
  *
  * - `title` - optional heading and accessible name for the nav landmark.
- * - `items` - array of `TreeMenuItem` objects. Each item may have:
- *   - `label` - display text (required).
- *   - `href` or `to` - link destination. When `to` is provided and `vue-router`
- *     is present the link is rendered as a `<router-link>`.
- *   - `children` - nested `TreeMenuItem[]` for sub-levels (unlimited depth).
  * - `listType` - `ul` (default) or `ol`. Use `ol` for numbered
- *   hierarchies such as book chapters.
+ *   hierarchies such as book chapters. Inherited by nested `GTreeMenuList`
+ *   components via provide/inject.
  * - `theme` - `light` (default) or `dark`.
+ * - `storageKey` - when provided, expanded/collapsed states are persisted to
+ *   `sessionStorage` under this key and restored on page load. This is useful
+ *   in Web Component / Drupal contexts where every page navigation is a full
+ *   refresh. Item states are keyed by the item's `label` prop.
  *
  * **Keyboard navigation** (tree-view style):
  *
@@ -26,18 +43,14 @@ import type { TreeMenuItem } from "./tree-menu/GTreeMenuList.vue";
  */
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
      * Title and accessible name for the nav landmark
      * @demo Tree Menu
      */
     title?: string;
     /**
-     * Items for the menu
-     */
-    items: TreeMenuItem[];
-    /**
-     * List element type - use `ol` for numbered hierarchies like book chapters
+     * List element type
      * @demo
      */
     listType?: "ul" | "ol";
@@ -46,6 +59,12 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     theme?: "light" | "dark";
+    /**
+     * When provided, expanded/collapsed states are saved to `sessionStorage`
+     * under this key and restored on page load. Item states are keyed by each
+     * the `label` prop.
+     */
+    storageKey?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /**
      * Title and accessible name for the nav landmark
@@ -53,11 +72,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
      */
     title?: string;
     /**
-     * Items for the menu
-     */
-    items: TreeMenuItem[];
-    /**
-     * List element type - use `ol` for numbered hierarchies like book chapters
+     * List element type
      * @demo
      */
     listType?: "ul" | "ol";
@@ -66,7 +81,20 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     theme?: "light" | "dark";
+    /**
+     * When provided, expanded/collapsed states are saved to `sessionStorage`
+     * under this key and restored on page load. Item states are keyed by each
+     * the `label` prop.
+     */
+    storageKey?: string;
 }> & Readonly<{}>, {
     theme: "light" | "dark";
     listType: "ul" | "ol";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tree-menu/GTreeMenuItem.vue.d.ts

@@ -0,0 +1,52 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Accessible label used for the toggle button's aria-label when the
+     * item has children (e.g. "Chapter 1" → "Chapter 1 sub-menu").
+     */
+    label?: string;
+    /**
+     * Whether the item starts expanded. Only meaningful for items that
+     * have a `#children` slot. When a `storageKey` is active on the parent
+     * `GTreeMenu` and a stored value exists for this item's `label`, the
+     * stored value takes precedence over this prop and subsequent prop
+     * updates are ignored for that item.
+     * @demo
+     */
+    expanded?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expand: () => any;
+    collapse: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Accessible label used for the toggle button's aria-label when the
+     * item has children (e.g. "Chapter 1" → "Chapter 1 sub-menu").
+     */
+    label?: string;
+    /**
+     * Whether the item starts expanded. Only meaningful for items that
+     * have a `#children` slot. When a `storageKey` is active on the parent
+     * `GTreeMenu` and a stored value exists for this item's `label`, the
+     * stored value takes precedence over this prop and subsequent prop
+     * updates are ignored for that item.
+     * @demo
+     */
+    expanded?: boolean;
+}> & Readonly<{
+    onExpand?: (() => any) | undefined;
+    onCollapse?: (() => any) | undefined;
+}>, {
+    expanded: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    children?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tree-menu/GTreeMenuList.vue.d.ts

@@ -1,23 +1,28 @@
-export type TreeMenuItem = {
-    label: string;
-    href?: string;
-    to?: string;
-    children?: TreeMenuItem[];
-};
+/**
+ * List wrapper for `GTreeMenuItem` items inside a `GTreeMenu`.
+ * Renders as `<ul>` or `<ol>` depending on the `listType` prop.
+ * When no `listType` is specified the value provided by the parent
+ * `GTreeMenu` (via provide/inject) is used, falling back to `ul`.
+ */
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{
-    items: TreeMenuItem[];
-    listType: "ul" | "ol";
-    expandedItems: Set<string>;
-    keyPrefix: string;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: (key: string) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    items: TreeMenuItem[];
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * List element type (`ul` or `ol`).
+     */
+    listType?: "ul" | "ol";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * List element type (`ul` or `ol`).
+     */
+    listType?: "ul" | "ol";
+}> & Readonly<{}>, {
     listType: "ul" | "ol";
-    expandedItems: Set<string>;
-    keyPrefix: string;
-}> & Readonly<{
-    onToggle?: ((key: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};