fix(components): drawer api and events

- fix undocumented APIs - wip auto interactions for close Signed-off-by: Cory Rylan <cory@coryrylan.com>
blueprintui · Aug 9, 2023 · fcdd4d0 · fcdd4d0
1 parent f8f3f3c
commit fcdd4d0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 24 deletions.
diff --git a/packages/components/blueprint.config.js b/packages/components/blueprint.config.js
@@ -50,6 +50,10 @@ export default {
             margin: 0;
             background: var(--bp-layer-canvas-background);
           }
+
+          body:has(bp-shell) {
+            padding: 0;
+          }
         </style>
       `;
     }

diff --git a/packages/components/src/shell/element.examples.js b/packages/components/src/shell/element.examples.js
@@ -12,13 +12,8 @@ export function example() {
       import '@blueprintui/components/include/alert.js';
       import '@blueprintui/icons/shapes/home.js';
     </script>
-    <style>
-      body { 
-        padding: 0;
-      }
-    </style>
 
-    <bp-shell>
+    <bp-shell interaction="auto">
       <bp-nav expanded>
         <bp-nav-item>
           <bp-icon shape="home"></bp-icon> item 1
@@ -41,11 +36,6 @@ export function example() {
         </bp-alert-group>
       </section>
     </bp-shell>
-    <script type="module">
-      const button = document.querySelector('#drawer-button');
-      const shell = document.querySelector('bp-shell');
-      button.addEventListener('click', () => shell.open = !shell.open);
-    </script>
     `;
 }
 
@@ -58,11 +48,6 @@ export function collapsedNav() {
       import '@blueprintui/components/include/alert.js';
       import '@blueprintui/icons/shapes/home.js';
     </script>
-    <style>
-      body { 
-        padding: 0;
-      }
-    </style>
 
     <bp-shell>
       <bp-header>
@@ -98,11 +83,6 @@ export function noHeader() {
       import '@blueprintui/components/include/nav.js';
       import '@blueprintui/icons/shapes/home.js';
     </script>
-    <style>
-      body { 
-        padding: 0;
-      }
-    </style>
 
     <bp-shell>
       <bp-nav expanded>

diff --git a/packages/components/src/shell/element.ts b/packages/components/src/shell/element.ts
@@ -1,7 +1,7 @@
 import { html, LitElement } from 'lit';
 import { state } from 'lit/decorators/state.js';
 import { property } from 'lit/decorators/property.js';
-import { baseStyles } from '@blueprintui/components/internals';
+import { baseStyles, interactionClose, InteractionCloseController } from '@blueprintui/components/internals';
 import type { BpNav } from '@blueprintui/components/nav';
 import type { BpHeader } from '@blueprintui/components/header';
 import styles from './element.css' assert { type: 'css' };
@@ -16,15 +16,23 @@ import styles from './element.css' assert { type: 'css' };
  * ```
  *
  * @element bp-shell
+ * @event open - dispatched when the drawer is opened
+ * @event close - dispatched when the drawer is closed
  * @slot - slot for content
  */
+@interactionClose<BpShell>()
 export class BpShell extends LitElement {
   static styles = [baseStyles, styles];
 
   @property({ type: Number }) breakpoint = 1024;
 
   @property({ type: Boolean }) open = false;
 
+  @property({ type: String }) interaction: 'auto';
+
+  /** determine user closable state */
+  @property({ type: Boolean }) closable = false;
+
   @state() private width = 0;
 
   get #nav() {
@@ -39,6 +47,8 @@ export class BpShell extends LitElement {
     return this.#header?.querySelector<HTMLButtonElement>('[bp-shell="drawer-button"]');
   }
 
+  private declare interactionCloseController: InteractionCloseController<this>;
+
   render() {
     return html`
       <div part="internal" class=${this.width >= this.breakpoint ? 'app-breakpoint' : ''}>
@@ -68,6 +78,11 @@ export class BpShell extends LitElement {
 
       if (this.#drawerButton) {
         this.#drawerButton.hidden = this.width >= this.breakpoint;
+        this.#drawerButton.addEventListener('click', () => {
+          if (this.interaction === 'auto') {
+            this.open = true; // eslint-disable-line
+          }
+        });
       }
     }).observe(this);
   }
@@ -77,7 +92,9 @@ export class BpShell extends LitElement {
   }
 
   #close() {
-    // todo: should be stateless with event
-    this.open = false; // eslint-disable-line
+    this.interactionCloseController.close();
+    if (this.interaction === 'auto') {
+      this.open = false; // eslint-disable-line
+    }
   }
 }