Skip to content

Commit 409b099

Browse files
TechQueryTechQuery
committed
[add] Image, Ratio, Scroll Boundary & Tooltip components
[optimize] update Upstream packages [remove] useless Component files
1 parent c1c72ed commit 409b099

File tree

10 files changed

+220
-164
lines changed

10 files changed

+220
-164
lines changed

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "boot-cell",
3-
"version": "2.0.0-beta.2",
3+
"version": "2.0.0-beta.3",
44
"license": "LGPL-3.0",
55
"author": "shiy2008@gmail.com",
66
"description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -26,10 +26,10 @@
2626
"dependencies": {
2727
"@swc/helpers": "^0.5.3",
2828
"classnames": "^2.5.1",
29-
"dom-renderer": "^2.0.5",
29+
"dom-renderer": "^2.0.6",
3030
"mobx": "^6.12.0",
3131
"regenerator-runtime": "^0.14.1",
32-
"web-cell": "^3.0.0-rc.6",
32+
"web-cell": "^3.0.0-rc.7",
3333
"web-utility": "^4.1.3"
3434
},
3535
"peerDependencies": {
@@ -49,7 +49,7 @@
4949
"@parcel/transformer-less": "~2.11.0",
5050
"@parcel/transformer-typescript-tsc": "^2.11.0",
5151
"@parcel/transformer-typescript-types": "~2.11.0",
52-
"@peculiar/webcrypto": "^1.4.3",
52+
"@peculiar/webcrypto": "^1.4.4",
5353
"@tech_query/snabbdom-looks-like": "^2.0.1",
5454
"@types/classnames": "^2.3.1",
5555
"@types/jest": "^29.5.11",
@@ -66,11 +66,11 @@
6666
"markdown-area-element": "^0.2.3",
6767
"open-cli": "^8.0.0",
6868
"parcel": "~2.11.0",
69-
"prettier": "^3.1.1",
69+
"prettier": "^3.2.4",
7070
"ts-jest": "^29.1.1",
7171
"ts-node": "^10.9.2",
7272
"typedoc": "^0.25.7",
73-
"typedoc-plugin-mdn-links": "^3.1.11",
73+
"typedoc-plugin-mdn-links": "^3.1.12",
7474
"typescript": "~5.3.3"
7575
},
7676
"scripts": {

‎pnpm-lock.yaml‎

Lines changed: 21 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/Image.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import classNames from 'classnames';
2+
import { FC, WebCellProps } from 'web-cell';
3+
4+
export type ImageProps = WebCellProps<HTMLImageElement> &
5+
Partial<
6+
Record<'fluid' | 'rounded' | 'roundedCircle' | 'thumbnail', boolean>
7+
>;
8+
9+
export const Image: FC<ImageProps> = ({
10+
className,
11+
fluid,
12+
rounded,
13+
roundedCircle,
14+
thumbnail,
15+
...props
16+
}) => (
17+
<img
18+
className={classNames(
19+
fluid && 'img-fluid',
20+
thumbnail && `img-thumbnail`,
21+
{ rounded },
22+
roundedCircle && 'rounded-circle',
23+
className
24+
)}
25+
{...props}
26+
/>
27+
);

‎source/Nav.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,9 @@ export const NavLink: FC<NavLinkProps> = ({
1313
children,
1414
...props
1515
}) => (
16-
<li className="nav-item">
17-
<a
18-
className={`nav-link ${active ? 'active' : ''} ${className}`}
19-
{...props}
20-
>
21-
{children}
22-
</a>
23-
</li>
16+
<a className={`nav-link ${active ? 'active' : ''} ${className}`} {...props}>
17+
{children}
18+
</a>
2419
);
2520

2621
export interface Nav extends WebCell {}

‎source/Ratio.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import classNames from 'classnames';
2+
import { FC, WebCellProps } from 'web-cell';
3+
4+
export interface RatioProps extends WebCellProps {
5+
aspectRatio?: number | '1x1' | '4x3' | '16x9' | '21x9';
6+
}
7+
8+
export const Ratio: FC<RatioProps> = ({ aspectRatio = '1x1', children }) => (
9+
<div
10+
className={classNames(
11+
'ratio',
12+
typeof aspectRatio === 'string' && `ratio-${aspectRatio}`
13+
)}
14+
style={
15+
typeof aspectRatio === 'number'
16+
? { '--bs-aspect-ratio': `${aspectRatio * 100}%` }
17+
: undefined
18+
}
19+
>
20+
{children}
21+
</div>
22+
);

‎source/ScrollBoundary.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import classNames from 'classnames';
2+
import { JsxChildren } from 'dom-renderer';
3+
import { FC, WebCellProps } from 'web-cell';
4+
5+
export type EdgePosition = 'top' | 'bottom' | 'left' | 'right';
6+
7+
export type TouchHandler = (edge: EdgePosition) => any;
8+
9+
export interface ScrollBoundaryProps
10+
extends WebCellProps,
11+
Partial<Record<EdgePosition, JsxChildren>> {
12+
onTouch: TouchHandler;
13+
}
14+
15+
function touch(edge: EdgePosition, onTouch: TouchHandler) {
16+
return (node: HTMLElement | null) =>
17+
node &&
18+
new IntersectionObserver(
19+
([{ isIntersecting }]) => isIntersecting && onTouch(edge)
20+
).observe(node);
21+
}
22+
23+
export const ScrollBoundary: FC<ScrollBoundaryProps> = ({
24+
className,
25+
onTouch,
26+
top,
27+
left,
28+
right,
29+
bottom,
30+
children
31+
}) => (
32+
<div className={classNames('position-relative', className)}>
33+
<div
34+
className="position-absolute top-0 left-0 w-100"
35+
ref={touch('top', onTouch)}
36+
>
37+
{top}
38+
</div>
39+
<div
40+
className="position-absolute top-0 left-0 h-100"
41+
ref={touch('left', onTouch)}
42+
>
43+
{left}
44+
</div>
45+
46+
{children}
47+
48+
<div
49+
className="position-absolute top-0 right-0 h-100"
50+
ref={touch('right', onTouch)}
51+
>
52+
{right}
53+
</div>
54+
<div
55+
className="position-absolute top-100 left-0 w-100"
56+
ref={touch('bottom', onTouch)}
57+
>
58+
{bottom}
59+
</div>
60+
</div>
61+
);

‎source/Tooltip.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { JsxChildren } from 'dom-renderer';
2+
import { observable } from 'mobx';
3+
import {
4+
FC,
5+
WebCell,
6+
WebCellProps,
7+
attribute,
8+
component,
9+
observer
10+
} from 'web-cell';
11+
12+
export const Tooltip: FC<WebCellProps> = ({
13+
className = '',
14+
children,
15+
...props
16+
}) => (
17+
<div
18+
className={`tooltip bs-tooltip show position-absolute ${className}`}
19+
role="tooltip"
20+
{...props}
21+
>
22+
<div className="tooltip-arrow" />
23+
<div className="tooltip-inner">{children}</div>
24+
</div>
25+
);
26+
27+
export interface TooltipBoxProps extends WebCellProps {
28+
content: JsxChildren;
29+
}
30+
31+
export interface TooltipBox extends WebCell {}
32+
33+
@component({
34+
tagName: 'tooltip-box',
35+
mode: 'open'
36+
})
37+
@observer
38+
export class TooltipBox extends HTMLElement implements WebCell {
39+
declare props: TooltipBoxProps;
40+
41+
content: JsxChildren;
42+
43+
@attribute
44+
@observable
45+
accessor show = false;
46+
47+
connectedCallback() {
48+
this.style.display = 'inline-block';
49+
50+
this.addEventListener('mouseenter', this.handleToggle);
51+
this.addEventListener('mouseleave', this.handleToggle);
52+
}
53+
54+
disconnectedCallback() {
55+
this.removeEventListener('mouseenter', this.handleToggle);
56+
this.removeEventListener('mouseleave', this.handleToggle);
57+
}
58+
59+
handleToggle = () => (this.show = !this.show);
60+
61+
render() {
62+
const { content, show } = this;
63+
64+
return (
65+
<>
66+
<link
67+
rel="stylesheet"
68+
href="https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css"
69+
/>
70+
<slot />
71+
72+
{show && <Tooltip>{content}</Tooltip>}
73+
</>
74+
);
75+
}
76+
}

‎source/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
export * from './type';
2+
export * from './Ratio';
23
export * from './Grid';
34
export * from './Table';
5+
export * from './ScrollBoundary';
46
export * from './Form';
57
export * from './Button';
68
export * from './Icon';
9+
export * from './Image';
10+
export * from './Tooltip';
711
export * from './Dropdown';
812
export * from './Nav';
913
export * from './Navbar';

0 commit comments

Comments
 (0)