[add] Row & Col components

[refactor] rewrite Alert & BreadCrumb components to WebCell v3
[optimize] Class updating of Nav component
[fix] Pagination margin bugs
[optimize] update Upstream packages

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-rc.1",
+    "version": "2.0.0-rc.2",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -31,7 +31,7 @@
         "mobx": "^6.13.6",
         "regenerator-runtime": "^0.14.1",
         "web-cell": "^3.0.3",
-        "web-utility": "^4.4.2"
+        "web-utility": "^4.4.3"
     },
     "peerDependencies": {
         "@fortawesome/fontawesome-free": "^6",

pnpm-lock.yaml

@@ -1,9 +1,9 @@
-import { JsxProps } from 'dom-renderer';
-import { FC } from 'web-cell';
+import classNames from 'classnames';
+import { FC, WebCellProps } from 'web-cell';
 
 import { Size } from '../type';
 
-export interface ContainerProps extends JsxProps<HTMLDivElement> {
+export interface ContainerProps extends WebCellProps {
     fluid?: boolean | Size;
 }
 
@@ -22,3 +22,77 @@ export const Container: FC<ContainerProps> = ({
         {children}
     </div>
 );
+
+export type RowProps = Record<'xs' | Size, number | 'auto'> & WebCellProps;
+
+export const Row: FC<RowProps> = ({
+    className,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl,
+    children,
+    ...props
+}) => {
+    const size = xs || sm || md || lg || xl || xxl;
+    const columnClass = size
+        ? `row-cols${
+              xs
+                  ? ''
+                  : sm
+                    ? '-sm'
+                    : md
+                      ? '-md'
+                      : lg
+                        ? '-lg'
+                        : xl
+                          ? '-xl'
+                          : xxl && '-xxl'
+          }-${size}`
+        : '';
+
+    return (
+        <div className={classNames('row', columnClass, className)} {...props}>
+            {children}
+        </div>
+    );
+};
+
+export type ColProps = RowProps;
+
+export const Col: FC<ColProps> = ({
+    className,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl,
+    children,
+    ...props
+}) => {
+    const size = xs || sm || md || lg || xl || xxl;
+    const columnClass = size
+        ? `col${
+              xs
+                  ? ''
+                  : sm
+                    ? '-sm'
+                    : md
+                      ? '-md'
+                      : lg
+                        ? '-lg'
+                        : xl
+                          ? '-xl'
+                          : xxl && '-xxl'
+          }-${size}`
+        : '';
+
+    return (
+        <div className={classNames('col', columnClass, className)} {...props}>
+            {children}
+        </div>
+    );
+};

source/Layout/Grid.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import { FC, WebCellProps } from 'web-cell';
+
+export type BreadcrumbProps = WebCellProps;
+
+export const BreadCrumb: FC<BreadcrumbProps> = ({ children, ...props }) => (
+    <nav {...props}>
+        <ol className="breadcrumb">{children}</ol>
+    </nav>
+);
+
+export interface BreadcrumbItemProps extends WebCellProps<HTMLAnchorElement> {
+    active?: boolean;
+}
+
+export const BreadcrumbItem: FC<BreadcrumbItemProps> = ({
+    className = '',
+    href,
+    target,
+    active,
+    children,
+    ...props
+}) => (
+    <li
+        className={classNames('breadcrumb-item', { active }, className)}
+        ariaCurrent={active ? 'page' : undefined}
+        {...props}
+    >
+        {active ? children : <a {...{ href, target }}>{children}</a>}
+    </li>
+);

source/Navigator/BreadCrumb.tsx

@@ -1,5 +1,15 @@
+import classNames from 'classnames';
 import { JsxChildren } from 'dom-renderer';
-import { FC, WebCell, WebCellProps, component } from 'web-cell';
+import { observable } from 'mobx';
+import {
+    FC,
+    WebCell,
+    WebCellProps,
+    attribute,
+    component,
+    reaction
+} from 'web-cell';
+import { CustomElement } from 'web-utility';
 
 import { ButtonProps } from '../Form/Button';
 import { DropdownButton } from './Dropdown';
@@ -41,21 +51,47 @@ export const NavDropdown: FC<NavDropdownProps> = ({
     </DropdownButton>
 );
 
-export interface Nav extends WebCell {}
+export interface NavProps extends WebCellProps {
+    variant?: 'pills' | 'underline' | 'tabs';
+    fill?: boolean;
+    justify?: boolean;
+}
+
+export interface Nav extends WebCell<NavProps> {}
 
 @component({
     tagName: 'bs-nav',
     mode: 'open'
 })
-export class Nav extends HTMLElement {
-    declare props: WebCellProps;
+export class Nav extends HTMLElement implements CustomElement {
+    @attribute
+    @observable
+    accessor variant: 'pills' | 'underline' | 'tabs' | undefined;
+
+    @attribute
+    @observable
+    accessor fill = false;
+
+    @attribute
+    @observable
+    accessor justify = false;
+
+    @reaction(({ variant, fill, justify }) => ({ variant, fill, justify }))
+    protected updateClass({ variant, fill, justify }: this) {
+        this.className = classNames('nav', this.className, {
+            [`nav-${variant}`]: variant,
+            'nav-fill': fill,
+            [`nav-justified`]: justify
+        });
+    }
 
     connectedCallback() {
+        this.role = 'tablist';
+
         const navBar = this.closest<OffcanvasNavbar>(
             'offcanvas-navbar, .navbar'
         );
-
-        if (!navBar) return this.classList.add('nav');
+        if (!navBar) return;
 
         const expand =
             navBar.expand ||

source/Navigator/Nav.tsx

@@ -14,7 +14,7 @@ export const Pagination: FC<PaginationProps> = ({
     ...props
 }) => (
     <nav {...props}>
-        <ol className={`pagination ${size ? `pagination-${size}` : ''}`}>
+        <ol className={`m-0 pagination ${size ? `pagination-${size}` : ''}`}>
             {children}
         </ol>
     </nav>
@@ -75,7 +75,7 @@ export const Pager: FC<PagerProps> = ({
 
     return (
         <form
-            className="d-flex align-items-center gap-3"
+            className="m-0 d-flex align-items-center gap-3"
             onSubmit={onChange && (event => event.preventDefault())}
         >
             <FormControl
@@ -104,7 +104,7 @@ export const Pager: FC<PagerProps> = ({
                     onChange?.({ pageSize, pageIndex: +input.value });
                 }}
             />
-            <Pagination className="my-0">
+            <Pagination>
                 {pageIndex > 1 && (
                     <PaginationItem {...propsOf(1)}>1</PaginationItem>
                 )}

source/Navigator/Pagination.tsx

@@ -0,0 +1,51 @@
+import classNames from 'classnames';
+import { FC, WebCellProps } from 'web-cell';
+
+import { CloseButton } from '../Form/Button';
+import { TextColor } from '../type';
+
+export interface AlertProps extends WebCellProps {
+    variant?: TextColor;
+    title?: string;
+    dismissible?: boolean;
+    show?: boolean;
+    onClose?: (event: MouseEvent) => any;
+}
+
+export const Alert: FC<AlertProps> = ({
+    className,
+    variant = 'primary',
+    title,
+    children,
+    show = true,
+    dismissible,
+    onClose
+}) => (
+    <aside
+        className={classNames(
+            'alert',
+            `alert-${variant}`,
+            { 'alert-dismissible fade': dismissible, show },
+            className
+        )}
+        role="alert"
+    >
+        {title && <h4 className="alert-heading">{title}</h4>}
+
+        {children}
+
+        {dismissible && <CloseButton onClick={onClose} />}
+    </aside>
+);
+
+export type AlertLinkProps = WebCellProps<HTMLAnchorElement>;
+
+export const AlertLink: FC<AlertLinkProps> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <a className={`alert-link ${className}`} {...props}>
+        {children}
+    </a>
+);