@illinois-grad/grad-vue 3.0.5 → 3.0.7

package/custom-elements.json

@@ -1065,6 +1065,15 @@
               "optional": true,
               "description": "Sidebar channel key for custom elements mode",
               "default": "\"default\""
+            },
+            {
+              "kind": "field",
+              "name": "mediaQuery",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Sidebar media query for custom elements mode"
             }
           ],
           "events": [
@@ -1852,6 +1861,15 @@
               "optional": true,
               "description": "Sidebar channel key for custom elements mode",
               "default": "\"default\""
+            },
+            {
+              "kind": "field",
+              "name": "mediaQuery",
+              "type": {
+                "text": "string"
+              },
+              "optional": true,
+              "description": "Sidebar media query for custom elements mode"
             }
           ],
           "events": []
@@ -2867,7 +2885,7 @@
                 "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."
+              "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. If the menu is inside a scrollable container such as `GSidebar`, the scroll position is also saved and restored automatically."
             },
             {
               "kind": "field",

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

@@ -26,7 +26,7 @@
  * > [!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.
+ * > matching GSidebar instance and `media-query` to set the collapsible breakpoint.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -41,6 +41,11 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     sidebarKey?: string;
+    /**
+     * Sidebar media query for custom elements mode
+     * @demo
+     */
+    mediaQuery?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: () => any;
 }, string, import("vue").PublicProps, Readonly<{
@@ -54,6 +59,11 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @demo
      */
     sidebarKey?: string;
+    /**
+     * Sidebar media query for custom elements mode
+     * @demo
+     */
+    mediaQuery?: string;
 }> & Readonly<{
     onToggle?: (() => any) | undefined;
 }>, {

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

@@ -13,7 +13,8 @@
  * for details.
  *
  * In web components mode, use the `sidebar-key` prop to pair this sidebar
- * with a matching GHamburgerMenu instance.
+ * with a matching GHamburgerMenu instance and `media-query` to set the
+ * collapsible breakpoint.
  */
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -53,6 +54,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     sidebarKey?: string;
+    /**
+     * Sidebar media query for custom elements mode
+     * @demo
+     */
+    mediaQuery?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     /**
      * Custom background color
@@ -89,6 +95,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * @demo
      */
     sidebarKey?: string;
+    /**
+     * Sidebar media query for custom elements mode
+     * @demo
+     */
+    mediaQuery?: string;
 }> & Readonly<{}>, {
     width: string;
     theme: "light" | "dark";

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

@@ -38,7 +38,9 @@
  * - `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.
+ *   refresh. Item states are keyed by the item's `label` prop. If the menu is
+ *   inside a scrollable container such as `GSidebar`, the scroll position is
+ *   also saved and restored automatically.
  *
  * **Keyboard navigation** (tree-view style):
  *
@@ -69,7 +71,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
      * 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.
+     * the `label` prop. If the menu is inside a scrollable container such as
+     * `GSidebar`, the scroll position is also saved and restored automatically.
      */
     storageKey?: string;
     /**
@@ -96,7 +99,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /**
      * 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.
+     * the `label` prop. If the menu is inside a scrollable container such as
+     * `GSidebar`, the scroll position is also saved and restored automatically.
      */
     storageKey?: string;
     /**

package/dist/compose/useWebComponentSidebar.d.ts

@@ -2,8 +2,9 @@ import { Ref } from "vue";
 type SidebarChannel = {
     id: string;
     open: Ref<boolean>;
+    breakpoint: Ref<string>;
     isCollapsible: Ref<boolean>;
     toggle: () => void;
 };
-export declare function useWebComponentSidebar(key?: string, breakpoint?: Ref<string> | string): SidebarChannel;
+export declare function useWebComponentSidebar(key?: string, breakpoint?: Ref<string | undefined> | string): SidebarChannel;
 export {};