[add] Nav Dropdown component & Offcanvas hiding

[optimize] update Usage section of Read Me document

Author: TechQuery

ReadMe.md

@@ -14,37 +14,70 @@
 
 ## Usage
 
+### Installation
+
 ```shell
-npm install boot-cell iterable-observer @nuintun/qrcode
+npm install dom-renderer web-cell boot-cell
+npm install parcel @parcel/config-default @parcel/transformer-typescript-tsc -D
+```
+
+#### `package.json`
+
+```json
+{
+    "scripts": {
+        "start": "parcel source/index.html --open",
+        "build": "parcel build source/index.html --public-url ."
+    }
+}
+```
+
+#### `tsconfig.json`
+
+```json
+{
+    "compilerOptions": {
+        "target": "ES6",
+        "module": "ES2020",
+        "moduleResolution": "Node",
+        "useDefineForClassFields": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "dom-renderer"
+    }
+}
 ```
 
-`index.html`
+#### `.parcelrc`
+
+```json
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
+    }
+}
+```
+
+### `source/index.html`
 
 ```html
-<link
-    rel="stylesheet"
-    href="https://unpkg.com/[email protected]/dist/dialog-polyfill.css"
-/>
 <link
     rel="stylesheet"
     href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
 />
 <link
     rel="stylesheet"
-    href="https://unpkg.com/[email protected].2/font/bootstrap-icons.css"
+    href="https://unpkg.com/[email protected].3/font/bootstrap-icons.css"
 />
 <link
     rel="stylesheet"
     href="https://unpkg.com/@fortawesome/[email protected]/css/all.min.css"
 />
-<script
-    crossorigin
-    src="https://polyfill.app/api/polyfill?features=es.array.flat,es.object.from-entries,regenerator-runtime,intersection-observer,resize-observer"
-></script>
-<script src="https://unpkg.com/[email protected]/dist/dialog-polyfill.js"></script>
-<script src="https://unpkg.com/[email protected]/dist/share-min.js"></script>
-<script src="https://unpkg.com/@webcomponents/[email protected]/custom-elements-es5-adapter.js"></script>
-<script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>
+<script src="https://polyfill.web-cell.dev/feature/ECMAScript.js"></script>
+<script src="https://polyfill.web-cell.dev/feature/WebComponents.js"></script>
+<script src="https://polyfill.web-cell.dev/feature/ElementInternals.js"></script>
+<script src="https://polyfill.web-cell.dev/feature/Dialog.js"></script>
+<script src="https://polyfill.web-cell.dev/feature/Share.js"></script>
 ```
 
 ## Components

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-beta.4",
+    "version": "2.0.0-beta.6",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",

source/Button.tsx

@@ -17,7 +17,7 @@ export interface ButtonProps
 export const Button: FC<ButtonProps> = ({
     className,
     href,
-    variant = 'primary',
+    variant,
     active,
     children,
     ...props
@@ -30,14 +30,14 @@ export const Button: FC<ButtonProps> = ({
             role="button"
             className={classNames(Class, { disabled, active })}
             tabIndex={disabled ? -1 : tabIndex}
-            ariaDisabled={disabled + ''}
-            ariaPressed={active + ''}
-            {...props}
+            ariaDisabled={disabled?.toString()}
+            ariaPressed={active?.toString()}
+            {...{ href, ...props }}
         >
             {children}
         </a>
     ) : (
-        <button className={Class} {...props} ariaPressed={active + ''}>
+        <button className={Class} {...props} ariaPressed={active?.toString()}>
             {children}
         </button>
     );

source/Dropdown.tsx

@@ -46,6 +46,8 @@ export const DropdownItem: FC<WebCellProps<HTMLAnchorElement>> = ({
 );
 
 export interface DropdownButtonProps extends WebCellProps, ButtonProps {
+    boxClass?: string;
+    buttonClass?: string;
     caption: JsxChildren;
 }
 
@@ -57,6 +59,14 @@ export interface DropdownButtonProps extends WebCellProps, ButtonProps {
 export class DropdownButton extends HTMLElement {
     declare props: DropdownButtonProps;
 
+    @attribute
+    @observable
+    accessor boxClass: string;
+
+    @attribute
+    @observable
+    accessor buttonClass: string;
+
     @attribute
     @observable
     accessor variant: ButtonProps['variant'];
@@ -68,18 +78,23 @@ export class DropdownButton extends HTMLElement {
     @observable
     accessor caption: JsxChildren;
 
+    @attribute
+    @observable
+    accessor disabled = false;
+
     @attribute
     @observable
     accessor show = false;
 
     renderContent() {
-        const { variant, size, caption, show } = this;
+        const { boxClass, buttonClass, variant, size, caption } = this,
+            { disabled, show } = this;
 
         return (
-            <Dropdown className={classNames({ show })}>
+            <Dropdown className={classNames(boxClass, { show })}>
                 <DropdownToggle
-                    className={classNames({ show })}
-                    {...{ variant, size }}
+                    className={classNames(buttonClass, { show })}
+                    {...{ variant, size, disabled }}
                     onClick={() => (this.show = !show)}
                 >
                     {caption}

source/Nav.tsx

@@ -1,9 +1,11 @@
-import { JsxProps } from 'dom-renderer';
+import { JsxChildren } from 'dom-renderer';
 import { FC, WebCell, WebCellProps, component } from 'web-cell';
 
+import { ButtonProps } from './Button';
+import { DropdownButton } from './Dropdown';
 import { OffcanvasNavbar } from './Navbar';
 
-export interface NavLinkProps extends JsxProps<HTMLAnchorElement> {
+export interface NavLinkProps extends WebCellProps<HTMLAnchorElement> {
     active?: boolean;
 }
 
@@ -18,6 +20,27 @@ export const NavLink: FC<NavLinkProps> = ({
     </a>
 );
 
+export interface NavDropdownProps
+    extends Omit<NavLinkProps, 'title' | 'type'>,
+        Pick<ButtonProps, 'disabled' | 'onClick'> {
+    title: JsxChildren;
+}
+
+export const NavDropdown: FC<NavDropdownProps> = ({
+    title,
+    children,
+    ...props
+}) => (
+    <DropdownButton
+        boxClass="nav-item"
+        buttonClass="nav-link"
+        caption={title}
+        {...props}
+    >
+        {children}
+    </DropdownButton>
+);
+
 export interface Nav extends WebCell {}
 
 @component({

source/Navbar.tsx

@@ -1,7 +1,14 @@
 import { JsxProps, VNode } from 'dom-renderer';
 import { observable } from 'mobx';
-import { FC, WebCellProps, attribute, component, observer } from 'web-cell';
-import { uniqueID } from 'web-utility';
+import {
+    FC,
+    WebCell,
+    WebCellProps,
+    attribute,
+    component,
+    observer
+} from 'web-cell';
+import { delegate, uniqueID } from 'web-utility';
 
 import { Container, ContainerProps } from './Grid';
 import {
@@ -73,12 +80,14 @@ export interface OffcanvasNavbarProps
     brand?: VNode;
 }
 
+export interface OffcanvasNavbar extends WebCell {}
+
 @component({
     tagName: 'offcanvas-navbar',
     mode: 'open'
 })
 @observer
-export class OffcanvasNavbar extends HTMLElement {
+export class OffcanvasNavbar extends HTMLElement implements WebCell {
     declare props: OffcanvasNavbarProps;
 
     @attribute
@@ -124,6 +133,30 @@ export class OffcanvasNavbar extends HTMLElement {
     @observable
     accessor closeButton = true;
 
+    connectedCallback() {
+        globalThis.addEventListener?.('keyup', this.close, true);
+
+        this.addEventListener('click', this.handleLink);
+    }
+
+    disconnectedCallback() {
+        globalThis.removeEventListener?.('keyup', this.close, true);
+
+        this.addEventListener('click', this.handleLink);
+    }
+
+    close = (event?: KeyboardEvent | MouseEvent) => {
+        if (
+            event instanceof KeyboardEvent &&
+            !['Escape', 'Enter'].includes(event.key)
+        )
+            return;
+
+        this.open = false;
+    };
+
+    handleLink = delegate('a[href].nav-link', this.close);
+
     renderContent() {
         const { variant, bg, expand, fixed, sticky, fluid, brand } = this,
             { title, titleId, offcanvasId, open, closeButton } = this;
@@ -141,6 +174,7 @@ export class OffcanvasNavbar extends HTMLElement {
                         id={offcanvasId}
                         aria-labelledby={titleId}
                         show={open}
+                        onHide={this.close}
                     >
                         <OffcanvasHeader
                             closeButton={closeButton}

source/Offcanvas.tsx

@@ -1,10 +1,9 @@
-import { JsxProps } from 'dom-renderer';
-import { FC } from 'web-cell';
+import { FC, WebCellProps } from 'web-cell';
 import { uniqueID } from 'web-utility';
 
 import { CloseButton } from './Button';
 
-export const OffcanvasTitle: FC<JsxProps<HTMLHeadingElement>> = ({
+export const OffcanvasTitle: FC<WebCellProps<HTMLHeadingElement>> = ({
     className = '',
     children,
     ...props
@@ -14,7 +13,7 @@ export const OffcanvasTitle: FC<JsxProps<HTMLHeadingElement>> = ({
     </h5>
 );
 
-export interface OffcanvasHeaderProps extends JsxProps<HTMLDivElement> {
+export interface OffcanvasHeaderProps extends WebCellProps<HTMLDivElement> {
     closeButton?: boolean;
     onHide?: () => any;
 }
@@ -33,7 +32,7 @@ export const OffcanvasHeader: FC<OffcanvasHeaderProps> = ({
     </div>
 );
 
-export const OffcanvasBody: FC<JsxProps<HTMLDivElement>> = ({
+export const OffcanvasBody: FC<WebCellProps<HTMLDivElement>> = ({
     className = '',
     children,
     ...props
@@ -43,7 +42,8 @@ export const OffcanvasBody: FC<JsxProps<HTMLDivElement>> = ({
     </div>
 );
 
-export interface OffcanvasProps extends JsxProps<HTMLDivElement> {
+export interface OffcanvasProps
+    extends Omit<OffcanvasHeaderProps, 'closeButton'> {
     backdrop?: boolean | 'static';
     show?: boolean;
 }
@@ -52,6 +52,7 @@ export const Offcanvas: FC<OffcanvasProps> = ({
     className = '',
     backdrop = true,
     show,
+    onHide,
     children,
     ...props
 }) => (
@@ -66,7 +67,8 @@ export const Offcanvas: FC<OffcanvasProps> = ({
         >
             {children}
         </div>
-        {show && <div className="offcanvas-backdrop show" />}
+
+        {show && <div className="offcanvas-backdrop show" onClick={onHide} />}
     </>
 );
 
@@ -77,14 +79,20 @@ export interface OffcanvasBoxProps
 }
 
 export const OffcanvasBox: FC<OffcanvasBoxProps> = ({
+    style,
     title,
     titleId = uniqueID(),
     closeButton,
+    onHide,
     children,
     ...props
 }) => (
-    <Offcanvas {...props} aria-labelledby={titleId}>
-        <OffcanvasHeader closeButton={closeButton}>
+    <Offcanvas
+        style={{ maxWidth: '75vw', ...style }}
+        {...{ ...props, onHide }}
+        aria-labelledby={titleId}
+    >
+        <OffcanvasHeader {...{ closeButton, onHide }}>
             <OffcanvasTitle id={titleId}>{title}</OffcanvasTitle>
         </OffcanvasHeader>
         <OffcanvasBody>{children}</OffcanvasBody>