[refactor] rewrite Core codes of Table & Dropdown components

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-beta.0",
+    "version": "2.0.0-beta.2",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",

source/Dropdown.tsx

@@ -0,0 +1,105 @@
+import classNames from 'classnames';
+import { JsxChildren } from 'dom-renderer';
+import { observable } from 'mobx';
+import { FC, WebCellProps, attribute, component, observer } from 'web-cell';
+
+import { Button, ButtonProps } from './Button';
+
+export const Dropdown: FC<WebCellProps<HTMLDivElement>> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <div className={`dropdown ${className}`} {...props}>
+        {children}
+    </div>
+);
+
+export const DropdownToggle: FC<ButtonProps> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <Button {...props} className={`dropdown-toggle ${className}`} type="button">
+        {children}
+    </Button>
+);
+
+export const DropdownMenu: FC<WebCellProps> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <nav className={`dropdown-menu ${className}`} {...props}>
+        {children}
+    </nav>
+);
+
+export const DropdownItem: FC<WebCellProps<HTMLAnchorElement>> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <a className={`dropdown-item ${className}`} {...props}>
+        {children}
+    </a>
+);
+
+export interface DropdownButtonProps extends WebCellProps, ButtonProps {
+    caption: JsxChildren;
+}
+
+@component({
+    tagName: 'dropdown-button',
+    mode: 'open'
+})
+@observer
+export class DropdownButton extends HTMLElement {
+    declare props: DropdownButtonProps;
+
+    @attribute
+    @observable
+    accessor variant: ButtonProps['variant'];
+
+    @attribute
+    @observable
+    accessor size: ButtonProps['size'];
+
+    @observable
+    accessor caption: JsxChildren;
+
+    @attribute
+    @observable
+    accessor show = false;
+
+    renderContent() {
+        const { variant, size, caption, show } = this;
+
+        return (
+            <Dropdown className={classNames({ show })}>
+                <DropdownToggle
+                    className={classNames({ show })}
+                    {...{ variant, size }}
+                    onClick={() => (this.show = !show)}
+                >
+                    {caption}
+                </DropdownToggle>
+                <DropdownMenu className={classNames({ show })}>
+                    <slot />
+                </DropdownMenu>
+            </Dropdown>
+        );
+    }
+
+    render() {
+        return (
+            <>
+                <link
+                    rel="stylesheet"
+                    href="https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+                />
+                {this.renderContent()}
+            </>
+        );
+    }
+}

source/Table.tsx

@@ -0,0 +1,60 @@
+import classNames from 'classnames';
+import { FC, WebCellProps } from 'web-cell';
+
+import { Color, Size } from './type';
+
+export interface TableProps extends WebCellProps<HTMLTableElement> {
+    variant?: Color;
+    size?: 'sm';
+    responsive?: boolean | Size;
+    striped?: boolean | 'columns';
+    hover?: boolean;
+    bordered?: boolean;
+    borderless?: boolean;
+    caption?: 'top';
+}
+
+export const Table: FC<TableProps> = ({
+    className,
+    variant,
+    size,
+    responsive,
+    striped,
+    hover,
+    bordered,
+    borderless,
+    caption,
+    children,
+    ...props
+}) => {
+    const table = (
+        <table
+            className={classNames(
+                'table',
+                variant && `table-${variant}`,
+                size && `table-${size}`,
+                striped &&
+                    `table-striped${striped === 'columns' ? '-columns' : ''}`,
+                hover && 'table-hover',
+                bordered && 'table-bordered',
+                borderless && 'table-borderless',
+                caption && `caption-${caption}`
+            )}
+            {...props}
+        >
+            {children}
+        </table>
+    );
+
+    return responsive ? (
+        <div
+            className={`table-responsive${
+                responsive === true ? '' : `-${responsive}`
+            }`}
+        >
+            {table}
+        </div>
+    ) : (
+        table
+    );
+};

source/index.ts

@@ -1,8 +1,10 @@
 export * from './type';
 export * from './Grid';
+export * from './Table';
+export * from './Form';
+export * from './Button';
+export * from './Icon';
+export * from './Dropdown';
 export * from './Nav';
 export * from './Navbar';
 export * from './Offcanvas';
-export * from './Icon';
-export * from './Button';
-export * from './Form';