[add] Image, Ratio, Scroll Boundary & Tooltip components

[optimize] update Upstream packages
[remove] useless Component files

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-beta.2",
+    "version": "2.0.0-beta.3",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -26,10 +26,10 @@
     "dependencies": {
         "@swc/helpers": "^0.5.3",
         "classnames": "^2.5.1",
-        "dom-renderer": "^2.0.5",
+        "dom-renderer": "^2.0.6",
         "mobx": "^6.12.0",
         "regenerator-runtime": "^0.14.1",
-        "web-cell": "^3.0.0-rc.6",
+        "web-cell": "^3.0.0-rc.7",
         "web-utility": "^4.1.3"
     },
     "peerDependencies": {
@@ -49,7 +49,7 @@
         "@parcel/transformer-less": "~2.11.0",
         "@parcel/transformer-typescript-tsc": "^2.11.0",
         "@parcel/transformer-typescript-types": "~2.11.0",
-        "@peculiar/webcrypto": "^1.4.3",
+        "@peculiar/webcrypto": "^1.4.4",
         "@tech_query/snabbdom-looks-like": "^2.0.1",
         "@types/classnames": "^2.3.1",
         "@types/jest": "^29.5.11",
@@ -66,11 +66,11 @@
         "markdown-area-element": "^0.2.3",
         "open-cli": "^8.0.0",
         "parcel": "~2.11.0",
-        "prettier": "^3.1.1",
+        "prettier": "^3.2.4",
         "ts-jest": "^29.1.1",
         "ts-node": "^10.9.2",
         "typedoc": "^0.25.7",
-        "typedoc-plugin-mdn-links": "^3.1.11",
+        "typedoc-plugin-mdn-links": "^3.1.12",
         "typescript": "~5.3.3"
     },
     "scripts": {

pnpm-lock.yaml

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import { FC, WebCellProps } from 'web-cell';
+
+export type ImageProps = WebCellProps<HTMLImageElement> &
+    Partial<
+        Record<'fluid' | 'rounded' | 'roundedCircle' | 'thumbnail', boolean>
+    >;
+
+export const Image: FC<ImageProps> = ({
+    className,
+    fluid,
+    rounded,
+    roundedCircle,
+    thumbnail,
+    ...props
+}) => (
+    <img
+        className={classNames(
+            fluid && 'img-fluid',
+            thumbnail && `img-thumbnail`,
+            { rounded },
+            roundedCircle && 'rounded-circle',
+            className
+        )}
+        {...props}
+    />
+);

source/Image.tsx

@@ -13,14 +13,9 @@ export const NavLink: FC<NavLinkProps> = ({
     children,
     ...props
 }) => (
-    <li className="nav-item">
-        <a
-            className={`nav-link ${active ? 'active' : ''} ${className}`}
-            {...props}
-        >
-            {children}
-        </a>
-    </li>
+    <a className={`nav-link ${active ? 'active' : ''} ${className}`} {...props}>
+        {children}
+    </a>
 );
 
 export interface Nav extends WebCell {}

source/Nav.tsx

@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+import { FC, WebCellProps } from 'web-cell';
+
+export interface RatioProps extends WebCellProps {
+    aspectRatio?: number | '1x1' | '4x3' | '16x9' | '21x9';
+}
+
+export const Ratio: FC<RatioProps> = ({ aspectRatio = '1x1', children }) => (
+    <div
+        className={classNames(
+            'ratio',
+            typeof aspectRatio === 'string' && `ratio-${aspectRatio}`
+        )}
+        style={
+            typeof aspectRatio === 'number'
+                ? { '--bs-aspect-ratio': `${aspectRatio * 100}%` }
+                : undefined
+        }
+    >
+        {children}
+    </div>
+);

source/Ratio.tsx

@@ -0,0 +1,61 @@
+import classNames from 'classnames';
+import { JsxChildren } from 'dom-renderer';
+import { FC, WebCellProps } from 'web-cell';
+
+export type EdgePosition = 'top' | 'bottom' | 'left' | 'right';
+
+export type TouchHandler = (edge: EdgePosition) => any;
+
+export interface ScrollBoundaryProps
+    extends WebCellProps,
+        Partial<Record<EdgePosition, JsxChildren>> {
+    onTouch: TouchHandler;
+}
+
+function touch(edge: EdgePosition, onTouch: TouchHandler) {
+    return (node: HTMLElement | null) =>
+        node &&
+        new IntersectionObserver(
+            ([{ isIntersecting }]) => isIntersecting && onTouch(edge)
+        ).observe(node);
+}
+
+export const ScrollBoundary: FC<ScrollBoundaryProps> = ({
+    className,
+    onTouch,
+    top,
+    left,
+    right,
+    bottom,
+    children
+}) => (
+    <div className={classNames('position-relative', className)}>
+        <div
+            className="position-absolute top-0 left-0 w-100"
+            ref={touch('top', onTouch)}
+        >
+            {top}
+        </div>
+        <div
+            className="position-absolute top-0 left-0 h-100"
+            ref={touch('left', onTouch)}
+        >
+            {left}
+        </div>
+
+        {children}
+
+        <div
+            className="position-absolute top-0 right-0 h-100"
+            ref={touch('right', onTouch)}
+        >
+            {right}
+        </div>
+        <div
+            className="position-absolute top-100 left-0 w-100"
+            ref={touch('bottom', onTouch)}
+        >
+            {bottom}
+        </div>
+    </div>
+);

source/ScrollBoundary.tsx

@@ -0,0 +1,76 @@
+import { JsxChildren } from 'dom-renderer';
+import { observable } from 'mobx';
+import {
+    FC,
+    WebCell,
+    WebCellProps,
+    attribute,
+    component,
+    observer
+} from 'web-cell';
+
+export const Tooltip: FC<WebCellProps> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <div
+        className={`tooltip bs-tooltip show position-absolute ${className}`}
+        role="tooltip"
+        {...props}
+    >
+        <div className="tooltip-arrow" />
+        <div className="tooltip-inner">{children}</div>
+    </div>
+);
+
+export interface TooltipBoxProps extends WebCellProps {
+    content: JsxChildren;
+}
+
+export interface TooltipBox extends WebCell {}
+
+@component({
+    tagName: 'tooltip-box',
+    mode: 'open'
+})
+@observer
+export class TooltipBox extends HTMLElement implements WebCell {
+    declare props: TooltipBoxProps;
+
+    content: JsxChildren;
+
+    @attribute
+    @observable
+    accessor show = false;
+
+    connectedCallback() {
+        this.style.display = 'inline-block';
+
+        this.addEventListener('mouseenter', this.handleToggle);
+        this.addEventListener('mouseleave', this.handleToggle);
+    }
+
+    disconnectedCallback() {
+        this.removeEventListener('mouseenter', this.handleToggle);
+        this.removeEventListener('mouseleave', this.handleToggle);
+    }
+
+    handleToggle = () => (this.show = !this.show);
+
+    render() {
+        const { content, show } = this;
+
+        return (
+            <>
+                <link
+                    rel="stylesheet"
+                    href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
+                />
+                <slot />
+
+                {show && <Tooltip>{content}</Tooltip>}
+            </>
+        );
+    }
+}

source/Tooltip.tsx

@@ -1,9 +1,13 @@
 export * from './type';
+export * from './Ratio';
 export * from './Grid';
 export * from './Table';
+export * from './ScrollBoundary';
 export * from './Form';
 export * from './Button';
 export * from './Icon';
+export * from './Image';
+export * from './Tooltip';
 export * from './Dropdown';
 export * from './Nav';
 export * from './Navbar';