@bbki.ng/components 1.4.0 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/index.css +0 -0
- package/dist/index.d.ts +86 -8
- package/dist/index.js +259 -6
- package/dist/index.mjs +250 -5
- package/package.json +2 -2
package/CHANGELOG.md
ADDED
package/dist/index.css
CHANGED
|
File without changes
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,89 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React, { EventHandler } from 'react';
|
|
2
|
+
import { LinkProps as LinkProps$1 } from 'react-router-dom';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
declare type ArticleProps = {
|
|
5
|
+
title: string;
|
|
6
|
+
className?: string;
|
|
7
|
+
content?: any;
|
|
8
|
+
children: any;
|
|
9
|
+
};
|
|
10
|
+
declare const Article: (props: ArticleProps) => JSX.Element;
|
|
11
|
+
|
|
12
|
+
declare enum ButtonType {
|
|
13
|
+
DANGER = "danger",
|
|
14
|
+
PRIMARY = "primary",
|
|
15
|
+
NORMAL = "normal",
|
|
16
|
+
DISABLED = "disabled"
|
|
17
|
+
}
|
|
18
|
+
interface ButtonProps {
|
|
19
|
+
className?: string;
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
type?: ButtonType;
|
|
22
|
+
onClick: EventHandler<React.MouseEvent<HTMLButtonElement>>;
|
|
23
|
+
}
|
|
24
|
+
declare function Button(props: ButtonProps): JSX.Element;
|
|
25
|
+
declare namespace Button {
|
|
26
|
+
var displayName: string;
|
|
9
27
|
}
|
|
10
28
|
|
|
11
|
-
|
|
29
|
+
declare type LogoProps = {
|
|
30
|
+
className?: string;
|
|
31
|
+
};
|
|
32
|
+
declare const Logo: (props: LogoProps) => JSX.Element;
|
|
33
|
+
|
|
34
|
+
declare type PathObj = {
|
|
35
|
+
path?: string;
|
|
36
|
+
name: string;
|
|
37
|
+
};
|
|
38
|
+
declare type BreadcrumbProps = {
|
|
39
|
+
paths: PathObj[];
|
|
40
|
+
};
|
|
41
|
+
declare const Breadcrumb: (props: BreadcrumbProps) => JSX.Element;
|
|
42
|
+
|
|
43
|
+
declare type NavProps = {
|
|
44
|
+
paths: PathObj[];
|
|
45
|
+
className?: string;
|
|
46
|
+
};
|
|
47
|
+
declare const Nav: (props: NavProps) => JSX.Element;
|
|
48
|
+
|
|
49
|
+
declare enum LinkColor {
|
|
50
|
+
BLUE = "blue",
|
|
51
|
+
RED = "red",
|
|
52
|
+
GRAY = "gray"
|
|
53
|
+
}
|
|
54
|
+
interface LinkProps extends LinkProps$1 {
|
|
55
|
+
color?: LinkColor;
|
|
56
|
+
className?: string;
|
|
57
|
+
external?: boolean;
|
|
58
|
+
to: string;
|
|
59
|
+
children: any;
|
|
60
|
+
}
|
|
61
|
+
declare const Link: (props: LinkProps) => JSX.Element;
|
|
62
|
+
|
|
63
|
+
interface TagProps extends Pick<LinkProps, "to" | "children" | "className"> {
|
|
64
|
+
name?: string;
|
|
65
|
+
}
|
|
66
|
+
declare const Tag: (props: TagProps) => JSX.Element;
|
|
67
|
+
declare const Tags: (props: {
|
|
68
|
+
tags: TagProps[];
|
|
69
|
+
className?: string;
|
|
70
|
+
}) => JSX.Element;
|
|
71
|
+
|
|
72
|
+
declare type PanelProps = {
|
|
73
|
+
width?: number;
|
|
74
|
+
children: any;
|
|
75
|
+
className?: string;
|
|
76
|
+
};
|
|
77
|
+
declare const Panel: (props: PanelProps) => JSX.Element;
|
|
78
|
+
|
|
79
|
+
declare type PopConfirmProps = {
|
|
80
|
+
onOk?: EventHandler<React.MouseEvent<HTMLButtonElement>>;
|
|
81
|
+
onCancel?: EventHandler<React.MouseEvent<HTMLButtonElement>>;
|
|
82
|
+
className?: string;
|
|
83
|
+
content?: any;
|
|
84
|
+
children?: any;
|
|
85
|
+
width?: number;
|
|
86
|
+
};
|
|
87
|
+
declare const PopConfirm: (props: PopConfirmProps) => JSX.Element;
|
|
88
|
+
|
|
89
|
+
export { Article, ArticleProps, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, Link, LinkColor, LinkProps, Logo, LogoProps, Nav, NavProps, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Tag, TagProps, Tags };
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,39 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
7
24
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
8
37
|
var __export = (target, all) => {
|
|
9
38
|
for (var name in all)
|
|
10
39
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -29,19 +58,243 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
|
29
58
|
// src/index.tsx
|
|
30
59
|
var src_exports = {};
|
|
31
60
|
__export(src_exports, {
|
|
32
|
-
|
|
61
|
+
Article: () => Article,
|
|
62
|
+
Breadcrumb: () => Breadcrumb,
|
|
63
|
+
Button: () => Button,
|
|
64
|
+
ButtonType: () => ButtonType,
|
|
65
|
+
Link: () => Link,
|
|
66
|
+
LinkColor: () => LinkColor,
|
|
67
|
+
Logo: () => Logo,
|
|
68
|
+
Nav: () => Nav,
|
|
69
|
+
Panel: () => Panel,
|
|
70
|
+
PopConfirm: () => PopConfirm,
|
|
71
|
+
Tag: () => Tag,
|
|
72
|
+
Tags: () => Tags
|
|
33
73
|
});
|
|
34
74
|
|
|
35
|
-
// src/
|
|
36
|
-
var
|
|
75
|
+
// src/article/Article.tsx
|
|
76
|
+
var import_classnames = __toESM(require("classnames"));
|
|
77
|
+
var import_react = __toESM(require("react"));
|
|
78
|
+
var Article = (props) => {
|
|
79
|
+
const { title, content, children, className } = props;
|
|
80
|
+
return /* @__PURE__ */ import_react.default.createElement("div", {
|
|
81
|
+
className: (0, import_classnames.default)("article", className)
|
|
82
|
+
}, /* @__PURE__ */ import_react.default.createElement("div", {
|
|
83
|
+
className: "text-[2.25rem]"
|
|
84
|
+
}, title), /* @__PURE__ */ import_react.default.createElement("hr", {
|
|
85
|
+
className: "my-64 border-gray-200"
|
|
86
|
+
}), /* @__PURE__ */ import_react.default.createElement("div", {
|
|
87
|
+
className: "text-gray-700"
|
|
88
|
+
}, children || content));
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
// src/button/Button.tsx
|
|
92
|
+
var import_react2 = __toESM(require("react"));
|
|
93
|
+
var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
|
|
94
|
+
ButtonType2["DANGER"] = "danger";
|
|
95
|
+
ButtonType2["PRIMARY"] = "primary";
|
|
96
|
+
ButtonType2["NORMAL"] = "normal";
|
|
97
|
+
ButtonType2["DISABLED"] = "disabled";
|
|
98
|
+
return ButtonType2;
|
|
99
|
+
})(ButtonType || {});
|
|
37
100
|
function Button(props) {
|
|
38
|
-
|
|
39
|
-
|
|
101
|
+
const typeClsMap = {
|
|
102
|
+
["danger" /* DANGER */]: "text-red-500",
|
|
103
|
+
["primary" /* PRIMARY */]: "text-blue-600",
|
|
104
|
+
["disabled" /* DISABLED */]: "text-gray-400 cursor-not-allowed",
|
|
105
|
+
["normal" /* NORMAL */]: "text-black"
|
|
106
|
+
};
|
|
107
|
+
const { type = "normal" /* NORMAL */, className = "", onClick } = props;
|
|
108
|
+
const shadowTransCls = type === "disabled" /* DISABLED */ ? "" : "transition-all duration-200 ease-in-out shadow-button hover:shadow-button-hover active:shadow-empty";
|
|
109
|
+
return /* @__PURE__ */ import_react2.default.createElement("button", {
|
|
110
|
+
className: `${typeClsMap[type]} ${className} ${shadowTransCls} py-8 px-16 transition-all duration-200 ease-in-out`,
|
|
111
|
+
onClick
|
|
40
112
|
}, props.children);
|
|
41
113
|
}
|
|
42
114
|
Button.displayName = "Button";
|
|
115
|
+
|
|
116
|
+
// src/logo/Logo.tsx
|
|
117
|
+
var React3 = __toESM(require("react"));
|
|
118
|
+
var Logo = (props) => /* @__PURE__ */ React3.createElement("svg", {
|
|
119
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
120
|
+
width: "48",
|
|
121
|
+
height: "48",
|
|
122
|
+
viewBox: "0 0 48 48",
|
|
123
|
+
fill: "none",
|
|
124
|
+
className: props.className
|
|
125
|
+
}, /* @__PURE__ */ React3.createElement("path", {
|
|
126
|
+
d: "M29.1152 21.3106C32.0605 21.3106 34.4481 18.9101 34.4481 15.9489V24.6457C34.4481 25.7585 33.5508 26.6607 32.444 26.6607H15.1207C14.0138 26.6607 13.1166 25.7585 13.1166 24.6457V15.9489C13.1166 18.9101 15.5042 21.3106 18.4494 21.3106C21.3947 21.3106 23.7823 18.9101 23.7823 15.9489C23.7823 18.9101 26.17 21.3106 29.1152 21.3106Z",
|
|
127
|
+
fill: "#9CA3AF"
|
|
128
|
+
}), /* @__PURE__ */ React3.createElement("path", {
|
|
129
|
+
d: "M23.7823 15.9373L23.7823 15.9489C23.7823 15.9451 23.7823 15.9412 23.7823 15.9373Z",
|
|
130
|
+
fill: "#9CA3AF"
|
|
131
|
+
}), /* @__PURE__ */ React3.createElement("path", {
|
|
132
|
+
d: "M23.1143 28.004C23.1205 30.9598 25.5057 33.3541 28.4472 33.3541C31.3886 33.3541 33.7738 30.9598 33.7801 28.004H23.1143Z",
|
|
133
|
+
fill: "#9CA3AF"
|
|
134
|
+
}), /* @__PURE__ */ React3.createElement("path", {
|
|
135
|
+
d: "M13.7846 28.004C13.7846 28.0079 13.7846 28.0117 13.7846 28.0156C13.7908 30.9714 16.1761 33.3657 19.1175 33.3657C22.0589 33.3657 24.4442 30.9714 24.4504 28.0156H13.7846V28.004Z",
|
|
136
|
+
fill: "#9CA3AF"
|
|
137
|
+
}), /* @__PURE__ */ React3.createElement("path", {
|
|
138
|
+
d: "M14.4527 15.9373C14.4527 16.6792 13.8545 17.2806 13.1166 17.2806C12.3786 17.2806 11.7805 16.6792 11.7805 15.9373C11.7805 15.1954 12.3786 14.594 13.1166 14.594C13.8545 14.594 14.4527 15.1954 14.4527 15.9373Z",
|
|
139
|
+
fill: "#9CA3AF"
|
|
140
|
+
}), /* @__PURE__ */ React3.createElement("path", {
|
|
141
|
+
d: "M25.1184 15.2657C25.1184 16.0076 24.5202 16.609 23.7823 16.609C23.0444 16.609 22.4462 16.0076 22.4462 15.2657C22.4462 14.5238 23.0444 13.9224 23.7823 13.9224C24.5202 13.9224 25.1184 14.5238 25.1184 15.2657Z",
|
|
142
|
+
fill: "#9CA3AF"
|
|
143
|
+
}), /* @__PURE__ */ React3.createElement("path", {
|
|
144
|
+
d: "M35.7842 15.9373C35.7842 16.6792 35.186 17.2806 34.4481 17.2806C33.7102 17.2806 33.112 16.6792 33.112 15.9373C33.112 15.1954 33.7102 14.594 34.4481 14.594C35.186 14.594 35.7842 15.1954 35.7842 15.9373Z",
|
|
145
|
+
fill: "#9CA3AF"
|
|
146
|
+
}));
|
|
147
|
+
|
|
148
|
+
// src/nav/Nav.tsx
|
|
149
|
+
var import_react5 = __toESM(require("react"));
|
|
150
|
+
|
|
151
|
+
// src/breadcrumb/Breadcrumb.tsx
|
|
152
|
+
var import_react4 = __toESM(require("react"));
|
|
153
|
+
|
|
154
|
+
// src/link/Link.tsx
|
|
155
|
+
var import_classnames2 = __toESM(require("classnames"));
|
|
156
|
+
var import_react_router_dom = require("react-router-dom");
|
|
157
|
+
var import_react3 = __toESM(require("react"));
|
|
158
|
+
var LinkColor = /* @__PURE__ */ ((LinkColor2) => {
|
|
159
|
+
LinkColor2["BLUE"] = "blue";
|
|
160
|
+
LinkColor2["RED"] = "red";
|
|
161
|
+
LinkColor2["GRAY"] = "gray";
|
|
162
|
+
return LinkColor2;
|
|
163
|
+
})(LinkColor || {});
|
|
164
|
+
var COLOR_MAPPING = {
|
|
165
|
+
["blue" /* BLUE */]: "text-blue-600",
|
|
166
|
+
["red" /* RED */]: "text-red-500",
|
|
167
|
+
["gray" /* GRAY */]: "text-gray-400"
|
|
168
|
+
};
|
|
169
|
+
var HOVER_COLOR_MAPPING = {
|
|
170
|
+
["blue" /* BLUE */]: "hover:bg-blue-100",
|
|
171
|
+
["red" /* RED */]: "hover:bg-red-100",
|
|
172
|
+
["gray" /* GRAY */]: "hover:bg-gray-100"
|
|
173
|
+
};
|
|
174
|
+
var Link = (props) => {
|
|
175
|
+
const _a = props, {
|
|
176
|
+
color = "blue" /* BLUE */,
|
|
177
|
+
external,
|
|
178
|
+
className,
|
|
179
|
+
children
|
|
180
|
+
} = _a, rest = __objRest(_a, [
|
|
181
|
+
"color",
|
|
182
|
+
"external",
|
|
183
|
+
"className",
|
|
184
|
+
"children"
|
|
185
|
+
]);
|
|
186
|
+
const linkCls = (0, import_classnames2.default)(COLOR_MAPPING[color], className, "rounded", "no-underline", "transition-colors", HOVER_COLOR_MAPPING[color]);
|
|
187
|
+
if (external) {
|
|
188
|
+
return /* @__PURE__ */ import_react3.default.createElement("a", {
|
|
189
|
+
href: props.to,
|
|
190
|
+
className: linkCls,
|
|
191
|
+
target: "_blank",
|
|
192
|
+
rel: "noreferrer"
|
|
193
|
+
}, children);
|
|
194
|
+
}
|
|
195
|
+
return /* @__PURE__ */ import_react3.default.createElement(import_react_router_dom.Link, __spreadProps(__spreadValues({}, rest), {
|
|
196
|
+
className: linkCls
|
|
197
|
+
}), children);
|
|
198
|
+
};
|
|
199
|
+
|
|
200
|
+
// src/breadcrumb/Breadcrumb.tsx
|
|
201
|
+
var Breadcrumb = (props) => {
|
|
202
|
+
const { paths } = props;
|
|
203
|
+
const PathElements = paths.map(({ path, name }, index) => {
|
|
204
|
+
const slash = index === 0 ? null : /* @__PURE__ */ import_react4.default.createElement("span", {
|
|
205
|
+
className: "text-gray-400"
|
|
206
|
+
}, "/");
|
|
207
|
+
const link = path ? /* @__PURE__ */ import_react4.default.createElement(Link, {
|
|
208
|
+
to: path
|
|
209
|
+
}, name) : /* @__PURE__ */ import_react4.default.createElement("span", {
|
|
210
|
+
className: "text-gray-400"
|
|
211
|
+
}, name);
|
|
212
|
+
return /* @__PURE__ */ import_react4.default.createElement("span", {
|
|
213
|
+
key: path || name
|
|
214
|
+
}, slash, link);
|
|
215
|
+
});
|
|
216
|
+
return /* @__PURE__ */ import_react4.default.createElement("div", {
|
|
217
|
+
className: "breadcrumb"
|
|
218
|
+
}, PathElements);
|
|
219
|
+
};
|
|
220
|
+
|
|
221
|
+
// src/nav/Nav.tsx
|
|
222
|
+
var Nav = (props) => {
|
|
223
|
+
return /* @__PURE__ */ import_react5.default.createElement("div", {
|
|
224
|
+
className: `p-8 w-full flex items-center ${props.className}`
|
|
225
|
+
}, /* @__PURE__ */ import_react5.default.createElement(Logo, {
|
|
226
|
+
className: "mr-8"
|
|
227
|
+
}), /* @__PURE__ */ import_react5.default.createElement(Breadcrumb, {
|
|
228
|
+
paths: props.paths
|
|
229
|
+
}));
|
|
230
|
+
};
|
|
231
|
+
|
|
232
|
+
// src/tag/Tag.tsx
|
|
233
|
+
var import_classnames3 = __toESM(require("classnames"));
|
|
234
|
+
var import_react6 = __toESM(require("react"));
|
|
235
|
+
var Tag = (props) => {
|
|
236
|
+
return /* @__PURE__ */ import_react6.default.createElement(Link, __spreadProps(__spreadValues({}, props), {
|
|
237
|
+
color: "gray" /* GRAY */
|
|
238
|
+
}), /* @__PURE__ */ import_react6.default.createElement("small", null, "#", props.children));
|
|
239
|
+
};
|
|
240
|
+
var Tags = (props) => {
|
|
241
|
+
const { tags, className } = props;
|
|
242
|
+
return /* @__PURE__ */ import_react6.default.createElement("div", {
|
|
243
|
+
className: (0, import_classnames3.default)(className, "inline-block")
|
|
244
|
+
}, tags.map((tag, index) => {
|
|
245
|
+
const isLast = index === tags.length - 1;
|
|
246
|
+
return /* @__PURE__ */ import_react6.default.createElement(Tag, __spreadProps(__spreadValues({}, tag), {
|
|
247
|
+
key: tag.to,
|
|
248
|
+
className: (0, import_classnames3.default)({ "mr-8": !isLast })
|
|
249
|
+
}));
|
|
250
|
+
}));
|
|
251
|
+
};
|
|
252
|
+
|
|
253
|
+
// src/panel/Panel.tsx
|
|
254
|
+
var import_react7 = __toESM(require("react"));
|
|
255
|
+
var Panel = (props) => {
|
|
256
|
+
const { className = "", children } = props;
|
|
257
|
+
const [show, setShow] = (0, import_react7.useState)(false);
|
|
258
|
+
(0, import_react7.useEffect)(() => {
|
|
259
|
+
setShow(true);
|
|
260
|
+
}, []);
|
|
261
|
+
return /* @__PURE__ */ import_react7.default.createElement("div", {
|
|
262
|
+
className: `transition-all ease-in-out duration-900 ${className} ${show ? "shadow-panel" : "shadow-empty"} p-32`
|
|
263
|
+
}, children);
|
|
264
|
+
};
|
|
265
|
+
|
|
266
|
+
// src/pop-confirm/PopConfirm.tsx
|
|
267
|
+
var import_react8 = __toESM(require("react"));
|
|
268
|
+
var PopConfirm = (props) => {
|
|
269
|
+
const { onOk, onCancel, children, content, className } = props;
|
|
270
|
+
return /* @__PURE__ */ import_react8.default.createElement(Panel, {
|
|
271
|
+
className
|
|
272
|
+
}, /* @__PURE__ */ import_react8.default.createElement("div", {
|
|
273
|
+
className: "mb-32"
|
|
274
|
+
}, children || content), /* @__PURE__ */ import_react8.default.createElement("div", {
|
|
275
|
+
className: "flex justify-end"
|
|
276
|
+
}, onCancel && /* @__PURE__ */ import_react8.default.createElement(Button, {
|
|
277
|
+
onClick: onCancel,
|
|
278
|
+
type: "normal" /* NORMAL */
|
|
279
|
+
}, "Cancel"), onOk && /* @__PURE__ */ import_react8.default.createElement(Button, {
|
|
280
|
+
onClick: onOk,
|
|
281
|
+
className: "ml-16",
|
|
282
|
+
type: "primary" /* PRIMARY */
|
|
283
|
+
}, "OK")));
|
|
284
|
+
};
|
|
43
285
|
module.exports = __toCommonJS(src_exports);
|
|
44
286
|
// Annotate the CommonJS export names for ESM import in node:
|
|
45
287
|
0 && (module.exports = {
|
|
46
|
-
|
|
288
|
+
Article,
|
|
289
|
+
Breadcrumb,
|
|
290
|
+
Button,
|
|
291
|
+
ButtonType,
|
|
292
|
+
Link,
|
|
293
|
+
LinkColor,
|
|
294
|
+
Logo,
|
|
295
|
+
Nav,
|
|
296
|
+
Panel,
|
|
297
|
+
PopConfirm,
|
|
298
|
+
Tag,
|
|
299
|
+
Tags
|
|
47
300
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,11 +1,256 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// src/article/Article.tsx
|
|
34
|
+
import classNames from "classnames";
|
|
35
|
+
import React from "react";
|
|
36
|
+
var Article = (props) => {
|
|
37
|
+
const { title, content, children, className } = props;
|
|
38
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
39
|
+
className: classNames("article", className)
|
|
40
|
+
}, /* @__PURE__ */ React.createElement("div", {
|
|
41
|
+
className: "text-[2.25rem]"
|
|
42
|
+
}, title), /* @__PURE__ */ React.createElement("hr", {
|
|
43
|
+
className: "my-64 border-gray-200"
|
|
44
|
+
}), /* @__PURE__ */ React.createElement("div", {
|
|
45
|
+
className: "text-gray-700"
|
|
46
|
+
}, children || content));
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
// src/button/Button.tsx
|
|
50
|
+
import React2 from "react";
|
|
51
|
+
var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
|
|
52
|
+
ButtonType2["DANGER"] = "danger";
|
|
53
|
+
ButtonType2["PRIMARY"] = "primary";
|
|
54
|
+
ButtonType2["NORMAL"] = "normal";
|
|
55
|
+
ButtonType2["DISABLED"] = "disabled";
|
|
56
|
+
return ButtonType2;
|
|
57
|
+
})(ButtonType || {});
|
|
3
58
|
function Button(props) {
|
|
4
|
-
|
|
5
|
-
|
|
59
|
+
const typeClsMap = {
|
|
60
|
+
["danger" /* DANGER */]: "text-red-500",
|
|
61
|
+
["primary" /* PRIMARY */]: "text-blue-600",
|
|
62
|
+
["disabled" /* DISABLED */]: "text-gray-400 cursor-not-allowed",
|
|
63
|
+
["normal" /* NORMAL */]: "text-black"
|
|
64
|
+
};
|
|
65
|
+
const { type = "normal" /* NORMAL */, className = "", onClick } = props;
|
|
66
|
+
const shadowTransCls = type === "disabled" /* DISABLED */ ? "" : "transition-all duration-200 ease-in-out shadow-button hover:shadow-button-hover active:shadow-empty";
|
|
67
|
+
return /* @__PURE__ */ React2.createElement("button", {
|
|
68
|
+
className: `${typeClsMap[type]} ${className} ${shadowTransCls} py-8 px-16 transition-all duration-200 ease-in-out`,
|
|
69
|
+
onClick
|
|
6
70
|
}, props.children);
|
|
7
71
|
}
|
|
8
72
|
Button.displayName = "Button";
|
|
73
|
+
|
|
74
|
+
// src/logo/Logo.tsx
|
|
75
|
+
import * as React3 from "react";
|
|
76
|
+
var Logo = (props) => /* @__PURE__ */ React3.createElement("svg", {
|
|
77
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
78
|
+
width: "48",
|
|
79
|
+
height: "48",
|
|
80
|
+
viewBox: "0 0 48 48",
|
|
81
|
+
fill: "none",
|
|
82
|
+
className: props.className
|
|
83
|
+
}, /* @__PURE__ */ React3.createElement("path", {
|
|
84
|
+
d: "M29.1152 21.3106C32.0605 21.3106 34.4481 18.9101 34.4481 15.9489V24.6457C34.4481 25.7585 33.5508 26.6607 32.444 26.6607H15.1207C14.0138 26.6607 13.1166 25.7585 13.1166 24.6457V15.9489C13.1166 18.9101 15.5042 21.3106 18.4494 21.3106C21.3947 21.3106 23.7823 18.9101 23.7823 15.9489C23.7823 18.9101 26.17 21.3106 29.1152 21.3106Z",
|
|
85
|
+
fill: "#9CA3AF"
|
|
86
|
+
}), /* @__PURE__ */ React3.createElement("path", {
|
|
87
|
+
d: "M23.7823 15.9373L23.7823 15.9489C23.7823 15.9451 23.7823 15.9412 23.7823 15.9373Z",
|
|
88
|
+
fill: "#9CA3AF"
|
|
89
|
+
}), /* @__PURE__ */ React3.createElement("path", {
|
|
90
|
+
d: "M23.1143 28.004C23.1205 30.9598 25.5057 33.3541 28.4472 33.3541C31.3886 33.3541 33.7738 30.9598 33.7801 28.004H23.1143Z",
|
|
91
|
+
fill: "#9CA3AF"
|
|
92
|
+
}), /* @__PURE__ */ React3.createElement("path", {
|
|
93
|
+
d: "M13.7846 28.004C13.7846 28.0079 13.7846 28.0117 13.7846 28.0156C13.7908 30.9714 16.1761 33.3657 19.1175 33.3657C22.0589 33.3657 24.4442 30.9714 24.4504 28.0156H13.7846V28.004Z",
|
|
94
|
+
fill: "#9CA3AF"
|
|
95
|
+
}), /* @__PURE__ */ React3.createElement("path", {
|
|
96
|
+
d: "M14.4527 15.9373C14.4527 16.6792 13.8545 17.2806 13.1166 17.2806C12.3786 17.2806 11.7805 16.6792 11.7805 15.9373C11.7805 15.1954 12.3786 14.594 13.1166 14.594C13.8545 14.594 14.4527 15.1954 14.4527 15.9373Z",
|
|
97
|
+
fill: "#9CA3AF"
|
|
98
|
+
}), /* @__PURE__ */ React3.createElement("path", {
|
|
99
|
+
d: "M25.1184 15.2657C25.1184 16.0076 24.5202 16.609 23.7823 16.609C23.0444 16.609 22.4462 16.0076 22.4462 15.2657C22.4462 14.5238 23.0444 13.9224 23.7823 13.9224C24.5202 13.9224 25.1184 14.5238 25.1184 15.2657Z",
|
|
100
|
+
fill: "#9CA3AF"
|
|
101
|
+
}), /* @__PURE__ */ React3.createElement("path", {
|
|
102
|
+
d: "M35.7842 15.9373C35.7842 16.6792 35.186 17.2806 34.4481 17.2806C33.7102 17.2806 33.112 16.6792 33.112 15.9373C33.112 15.1954 33.7102 14.594 34.4481 14.594C35.186 14.594 35.7842 15.1954 35.7842 15.9373Z",
|
|
103
|
+
fill: "#9CA3AF"
|
|
104
|
+
}));
|
|
105
|
+
|
|
106
|
+
// src/nav/Nav.tsx
|
|
107
|
+
import React6 from "react";
|
|
108
|
+
|
|
109
|
+
// src/breadcrumb/Breadcrumb.tsx
|
|
110
|
+
import React5 from "react";
|
|
111
|
+
|
|
112
|
+
// src/link/Link.tsx
|
|
113
|
+
import classNames2 from "classnames";
|
|
114
|
+
import { Link as BaseLink } from "react-router-dom";
|
|
115
|
+
import React4 from "react";
|
|
116
|
+
var LinkColor = /* @__PURE__ */ ((LinkColor2) => {
|
|
117
|
+
LinkColor2["BLUE"] = "blue";
|
|
118
|
+
LinkColor2["RED"] = "red";
|
|
119
|
+
LinkColor2["GRAY"] = "gray";
|
|
120
|
+
return LinkColor2;
|
|
121
|
+
})(LinkColor || {});
|
|
122
|
+
var COLOR_MAPPING = {
|
|
123
|
+
["blue" /* BLUE */]: "text-blue-600",
|
|
124
|
+
["red" /* RED */]: "text-red-500",
|
|
125
|
+
["gray" /* GRAY */]: "text-gray-400"
|
|
126
|
+
};
|
|
127
|
+
var HOVER_COLOR_MAPPING = {
|
|
128
|
+
["blue" /* BLUE */]: "hover:bg-blue-100",
|
|
129
|
+
["red" /* RED */]: "hover:bg-red-100",
|
|
130
|
+
["gray" /* GRAY */]: "hover:bg-gray-100"
|
|
131
|
+
};
|
|
132
|
+
var Link = (props) => {
|
|
133
|
+
const _a = props, {
|
|
134
|
+
color = "blue" /* BLUE */,
|
|
135
|
+
external,
|
|
136
|
+
className,
|
|
137
|
+
children
|
|
138
|
+
} = _a, rest = __objRest(_a, [
|
|
139
|
+
"color",
|
|
140
|
+
"external",
|
|
141
|
+
"className",
|
|
142
|
+
"children"
|
|
143
|
+
]);
|
|
144
|
+
const linkCls = classNames2(COLOR_MAPPING[color], className, "rounded", "no-underline", "transition-colors", HOVER_COLOR_MAPPING[color]);
|
|
145
|
+
if (external) {
|
|
146
|
+
return /* @__PURE__ */ React4.createElement("a", {
|
|
147
|
+
href: props.to,
|
|
148
|
+
className: linkCls,
|
|
149
|
+
target: "_blank",
|
|
150
|
+
rel: "noreferrer"
|
|
151
|
+
}, children);
|
|
152
|
+
}
|
|
153
|
+
return /* @__PURE__ */ React4.createElement(BaseLink, __spreadProps(__spreadValues({}, rest), {
|
|
154
|
+
className: linkCls
|
|
155
|
+
}), children);
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
// src/breadcrumb/Breadcrumb.tsx
|
|
159
|
+
var Breadcrumb = (props) => {
|
|
160
|
+
const { paths } = props;
|
|
161
|
+
const PathElements = paths.map(({ path, name }, index) => {
|
|
162
|
+
const slash = index === 0 ? null : /* @__PURE__ */ React5.createElement("span", {
|
|
163
|
+
className: "text-gray-400"
|
|
164
|
+
}, "/");
|
|
165
|
+
const link = path ? /* @__PURE__ */ React5.createElement(Link, {
|
|
166
|
+
to: path
|
|
167
|
+
}, name) : /* @__PURE__ */ React5.createElement("span", {
|
|
168
|
+
className: "text-gray-400"
|
|
169
|
+
}, name);
|
|
170
|
+
return /* @__PURE__ */ React5.createElement("span", {
|
|
171
|
+
key: path || name
|
|
172
|
+
}, slash, link);
|
|
173
|
+
});
|
|
174
|
+
return /* @__PURE__ */ React5.createElement("div", {
|
|
175
|
+
className: "breadcrumb"
|
|
176
|
+
}, PathElements);
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
// src/nav/Nav.tsx
|
|
180
|
+
var Nav = (props) => {
|
|
181
|
+
return /* @__PURE__ */ React6.createElement("div", {
|
|
182
|
+
className: `p-8 w-full flex items-center ${props.className}`
|
|
183
|
+
}, /* @__PURE__ */ React6.createElement(Logo, {
|
|
184
|
+
className: "mr-8"
|
|
185
|
+
}), /* @__PURE__ */ React6.createElement(Breadcrumb, {
|
|
186
|
+
paths: props.paths
|
|
187
|
+
}));
|
|
188
|
+
};
|
|
189
|
+
|
|
190
|
+
// src/tag/Tag.tsx
|
|
191
|
+
import classNames3 from "classnames";
|
|
192
|
+
import React7 from "react";
|
|
193
|
+
var Tag = (props) => {
|
|
194
|
+
return /* @__PURE__ */ React7.createElement(Link, __spreadProps(__spreadValues({}, props), {
|
|
195
|
+
color: "gray" /* GRAY */
|
|
196
|
+
}), /* @__PURE__ */ React7.createElement("small", null, "#", props.children));
|
|
197
|
+
};
|
|
198
|
+
var Tags = (props) => {
|
|
199
|
+
const { tags, className } = props;
|
|
200
|
+
return /* @__PURE__ */ React7.createElement("div", {
|
|
201
|
+
className: classNames3(className, "inline-block")
|
|
202
|
+
}, tags.map((tag, index) => {
|
|
203
|
+
const isLast = index === tags.length - 1;
|
|
204
|
+
return /* @__PURE__ */ React7.createElement(Tag, __spreadProps(__spreadValues({}, tag), {
|
|
205
|
+
key: tag.to,
|
|
206
|
+
className: classNames3({ "mr-8": !isLast })
|
|
207
|
+
}));
|
|
208
|
+
}));
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
// src/panel/Panel.tsx
|
|
212
|
+
import React8, { useEffect, useState } from "react";
|
|
213
|
+
var Panel = (props) => {
|
|
214
|
+
const { className = "", children } = props;
|
|
215
|
+
const [show, setShow] = useState(false);
|
|
216
|
+
useEffect(() => {
|
|
217
|
+
setShow(true);
|
|
218
|
+
}, []);
|
|
219
|
+
return /* @__PURE__ */ React8.createElement("div", {
|
|
220
|
+
className: `transition-all ease-in-out duration-900 ${className} ${show ? "shadow-panel" : "shadow-empty"} p-32`
|
|
221
|
+
}, children);
|
|
222
|
+
};
|
|
223
|
+
|
|
224
|
+
// src/pop-confirm/PopConfirm.tsx
|
|
225
|
+
import React9 from "react";
|
|
226
|
+
var PopConfirm = (props) => {
|
|
227
|
+
const { onOk, onCancel, children, content, className } = props;
|
|
228
|
+
return /* @__PURE__ */ React9.createElement(Panel, {
|
|
229
|
+
className
|
|
230
|
+
}, /* @__PURE__ */ React9.createElement("div", {
|
|
231
|
+
className: "mb-32"
|
|
232
|
+
}, children || content), /* @__PURE__ */ React9.createElement("div", {
|
|
233
|
+
className: "flex justify-end"
|
|
234
|
+
}, onCancel && /* @__PURE__ */ React9.createElement(Button, {
|
|
235
|
+
onClick: onCancel,
|
|
236
|
+
type: "normal" /* NORMAL */
|
|
237
|
+
}, "Cancel"), onOk && /* @__PURE__ */ React9.createElement(Button, {
|
|
238
|
+
onClick: onOk,
|
|
239
|
+
className: "ml-16",
|
|
240
|
+
type: "primary" /* PRIMARY */
|
|
241
|
+
}, "OK")));
|
|
242
|
+
};
|
|
9
243
|
export {
|
|
10
|
-
|
|
244
|
+
Article,
|
|
245
|
+
Breadcrumb,
|
|
246
|
+
Button,
|
|
247
|
+
ButtonType,
|
|
248
|
+
Link,
|
|
249
|
+
LinkColor,
|
|
250
|
+
Logo,
|
|
251
|
+
Nav,
|
|
252
|
+
Panel,
|
|
253
|
+
PopConfirm,
|
|
254
|
+
Tag,
|
|
255
|
+
Tags
|
|
11
256
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bbki.ng/components",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.1",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"@bbki.ng/eslint-preset": "1.0.2",
|
|
20
|
-
"@bbki.ng/tsconfig": "1.1.
|
|
20
|
+
"@bbki.ng/tsconfig": "1.1.1",
|
|
21
21
|
"@types/react": "^17.0.13",
|
|
22
22
|
"@types/react-dom": "^17.0.8",
|
|
23
23
|
"@types/react-router-dom": "^5.3.2",
|