@bifrostui/react 1.4.0-beta.1 → 1.4.0
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/dist/Dialog/FunctionalDialog.js +19 -12
- package/dist/Input/Input.css +4 -0
- package/dist/Modal/Modal.miniapp.d.ts +1 -1
- package/dist/Popover/Popover.js +40 -43
- package/dist/Popover/Popover.types.d.ts +0 -5
- package/dist/Progress/Progress.css +1 -1
- package/dist/Radio/Radio.css +3 -3
- package/dist/Select/Select.css +1 -1
- package/dist/Slider/Slider.css +7 -7
- package/dist/Tabs/Tabs.css +3 -2
- package/dist/Tabs/Tabs.js +1 -0
- package/dist/ThemeProvider/ThemeProvider.types.d.ts +4 -4
- package/dist/Toast/FunctionalToast.js +15 -7
- package/dist/Toast/Toast.css +5 -4
- package/dist/Tooltip/Tooltip.js +34 -37
- package/dist/Tooltip/Tooltip.types.d.ts +0 -5
- package/es/Dialog/FunctionalDialog.js +19 -12
- package/es/Input/Input.css +4 -0
- package/es/Modal/Modal.miniapp.d.ts +1 -1
- package/es/Popover/Popover.js +42 -44
- package/es/Popover/Popover.types.d.ts +0 -5
- package/es/Progress/Progress.css +1 -1
- package/es/Radio/Radio.css +3 -3
- package/es/Select/Select.css +1 -1
- package/es/Slider/Slider.css +7 -7
- package/es/Tabs/Tabs.css +3 -2
- package/es/Tabs/Tabs.js +1 -0
- package/es/ThemeProvider/ThemeProvider.types.d.ts +4 -4
- package/es/Toast/FunctionalToast.js +15 -7
- package/es/Toast/Toast.css +5 -4
- package/es/Tooltip/Tooltip.js +36 -38
- package/es/Tooltip/Tooltip.types.d.ts +0 -5
- package/package.json +5 -5
|
@@ -168,8 +168,9 @@ const prompt = (options) => {
|
|
|
168
168
|
const useDialog = () => {
|
|
169
169
|
const holderRef = import_react.default.useRef(null);
|
|
170
170
|
const wrapAPI = (props) => {
|
|
171
|
-
|
|
172
|
-
const
|
|
171
|
+
var _a;
|
|
172
|
+
const options = __spreadValues({ theme: (_a = holderRef.current) == null ? void 0 : _a.theme }, formatProps(props));
|
|
173
|
+
const _b = options, { onConfirm, onCancel } = _b, rest = __objRest(_b, ["onConfirm", "onCancel"]);
|
|
173
174
|
return new Promise((resolve) => {
|
|
174
175
|
DialogGenerator(__spreadProps(__spreadValues({}, rest), {
|
|
175
176
|
onConfirm: (val) => __async(void 0, null, function* () {
|
|
@@ -186,16 +187,22 @@ const useDialog = () => {
|
|
|
186
187
|
}));
|
|
187
188
|
});
|
|
188
189
|
};
|
|
189
|
-
wrapAPI.confirm = (options) =>
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
|
|
190
|
+
wrapAPI.confirm = (options) => {
|
|
191
|
+
var _a;
|
|
192
|
+
return Dialog(__spreadProps(__spreadValues({
|
|
193
|
+
type: "confirm"
|
|
194
|
+
}, formatProps(options)), {
|
|
195
|
+
theme: (_a = holderRef.current) == null ? void 0 : _a.theme
|
|
196
|
+
}));
|
|
197
|
+
};
|
|
198
|
+
wrapAPI.prompt = (options) => {
|
|
199
|
+
var _a;
|
|
200
|
+
return Dialog(__spreadProps(__spreadValues({
|
|
201
|
+
type: "prompt"
|
|
202
|
+
}, formatProps(options)), {
|
|
203
|
+
theme: (_a = holderRef.current) == null ? void 0 : _a.theme
|
|
204
|
+
}));
|
|
205
|
+
};
|
|
199
206
|
return [wrapAPI, /* @__PURE__ */ import_react.default.createElement(import_Dialog.default, { key: "dialog-holder", ref: holderRef })];
|
|
200
207
|
};
|
|
201
208
|
Dialog.confirm = confirm;
|
package/dist/Input/Input.css
CHANGED
|
@@ -39,6 +39,10 @@
|
|
|
39
39
|
outline: none;
|
|
40
40
|
background-color: var(--background-color);
|
|
41
41
|
font-size: var(--bui-text-size-2);
|
|
42
|
+
width: auto;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
text-overflow: ellipsis;
|
|
45
|
+
white-space: nowrap;
|
|
42
46
|
}
|
|
43
47
|
.bui-input-input::placeholder {
|
|
44
48
|
color: var(--bui-color-fg-subtle);
|
|
@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
|
|
|
12
12
|
keepMounted?: boolean;
|
|
13
13
|
} & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
14
14
|
ref?: React.Ref<HTMLDivElement>;
|
|
15
|
-
},
|
|
15
|
+
}, keyof import("@bifrostui/types").ICommonProps | "open" | "keepMounted" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock">, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
16
16
|
export default Modal;
|
package/dist/Popover/Popover.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
5
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
@@ -20,7 +18,6 @@ var __spreadValues = (a, b) => {
|
|
|
20
18
|
}
|
|
21
19
|
return a;
|
|
22
20
|
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
21
|
var __objRest = (source, exclude) => {
|
|
25
22
|
var target = {};
|
|
26
23
|
for (var prop in source)
|
|
@@ -77,8 +74,7 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
|
|
|
77
74
|
trigger = "click",
|
|
78
75
|
onOpenChange,
|
|
79
76
|
open,
|
|
80
|
-
hideArrow
|
|
81
|
-
PortalProps
|
|
77
|
+
hideArrow
|
|
82
78
|
} = _a, others = __objRest(_a, [
|
|
83
79
|
"className",
|
|
84
80
|
"style",
|
|
@@ -90,8 +86,7 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
|
|
|
90
86
|
"trigger",
|
|
91
87
|
"onOpenChange",
|
|
92
88
|
"open",
|
|
93
|
-
"hideArrow"
|
|
94
|
-
"PortalProps"
|
|
89
|
+
"hideArrow"
|
|
95
90
|
]);
|
|
96
91
|
const controlByUser = typeof open !== "undefined";
|
|
97
92
|
const positionArr = placement.split(/([A-Z])/);
|
|
@@ -136,15 +131,7 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
|
|
|
136
131
|
return;
|
|
137
132
|
hidePopover(event);
|
|
138
133
|
};
|
|
139
|
-
(0,
|
|
140
|
-
if (controlByUser)
|
|
141
|
-
return;
|
|
142
|
-
document.addEventListener("click", clickEventHandler);
|
|
143
|
-
return () => {
|
|
144
|
-
document.removeEventListener("click", clickEventHandler);
|
|
145
|
-
};
|
|
146
|
-
}, []);
|
|
147
|
-
const onRootElementMouted = () => {
|
|
134
|
+
const onRootElementMouted = (0, import_utils.throttle)(() => {
|
|
148
135
|
const result = (0, import_utils.getStylesAndLocation)({
|
|
149
136
|
childrenRef,
|
|
150
137
|
arrowDirection,
|
|
@@ -161,7 +148,25 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
|
|
|
161
148
|
setArrowLocation(newArrowLocation);
|
|
162
149
|
}
|
|
163
150
|
setTooltyles(styles);
|
|
151
|
+
}, 100);
|
|
152
|
+
const bindEvent = () => {
|
|
153
|
+
if (!controlByUser) {
|
|
154
|
+
document.addEventListener("click", clickEventHandler);
|
|
155
|
+
}
|
|
156
|
+
window.addEventListener("resize", onRootElementMouted);
|
|
164
157
|
};
|
|
158
|
+
const unbindEvent = () => {
|
|
159
|
+
if (!controlByUser) {
|
|
160
|
+
document.removeEventListener("click", clickEventHandler);
|
|
161
|
+
}
|
|
162
|
+
window.removeEventListener("resize", onRootElementMouted);
|
|
163
|
+
};
|
|
164
|
+
(0, import_react.useEffect)(() => {
|
|
165
|
+
bindEvent();
|
|
166
|
+
return () => {
|
|
167
|
+
unbindEvent();
|
|
168
|
+
};
|
|
169
|
+
}, []);
|
|
165
170
|
if (!title && !content)
|
|
166
171
|
return null;
|
|
167
172
|
let triggerEventOption;
|
|
@@ -176,34 +181,26 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
|
|
|
176
181
|
const childrenOptions = __spreadValues({
|
|
177
182
|
ref: childrenRef
|
|
178
183
|
}, triggerEventOption);
|
|
179
|
-
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, open || openStatus ? /* @__PURE__ */ import_react.default.createElement(
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
184
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, open || openStatus ? /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onRootElementMouted, ref }, /* @__PURE__ */ import_react.default.createElement(
|
|
185
|
+
"div",
|
|
186
|
+
__spreadValues({
|
|
187
|
+
className: (0, import_clsx.default)(prefixCls, className, `popover-${arrowDirection}`, {
|
|
188
|
+
"bui-popover-arrow-hide": hideArrow
|
|
189
|
+
}),
|
|
190
|
+
"data-id": `tt_${ttId}`,
|
|
191
|
+
style: __spreadValues(__spreadValues({}, style), tooltyles)
|
|
192
|
+
}, others),
|
|
193
|
+
!hideArrow ? /* @__PURE__ */ import_react.default.createElement(
|
|
187
194
|
"div",
|
|
188
|
-
|
|
189
|
-
className: (0, import_clsx.default)(
|
|
190
|
-
"bui-popover-arrow
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
{
|
|
198
|
-
className: (0, import_clsx.default)(
|
|
199
|
-
"bui-popover-arrow",
|
|
200
|
-
`location-${arrowLocation}`
|
|
201
|
-
)
|
|
202
|
-
}
|
|
203
|
-
) : null,
|
|
204
|
-
/* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-content" }, title ? /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-title" }, title) : null, content ? /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-inner-content" }, content) : null)
|
|
205
|
-
)
|
|
206
|
-
) : null, import_react.default.isValidElement(children) ? import_react.default.cloneElement(children, childrenOptions) : children);
|
|
195
|
+
{
|
|
196
|
+
className: (0, import_clsx.default)(
|
|
197
|
+
"bui-popover-arrow",
|
|
198
|
+
`location-${arrowLocation}`
|
|
199
|
+
)
|
|
200
|
+
}
|
|
201
|
+
) : null,
|
|
202
|
+
/* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-content" }, title ? /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-title" }, title) : null, content ? /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-inner-content" }, content) : null)
|
|
203
|
+
)) : null, import_react.default.isValidElement(children) ? import_react.default.cloneElement(children, childrenOptions) : children);
|
|
207
204
|
});
|
|
208
205
|
Popover.displayName = "BuiPopover";
|
|
209
206
|
var Popover_default = Popover;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { OverrideProps } from '@bifrostui/types';
|
|
3
|
-
import { PortalCoreProps } from '../Portal/Portal.types';
|
|
4
3
|
type triggerType = 'click' | 'hover';
|
|
5
4
|
export type PopoverProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
|
|
6
5
|
props: P & {
|
|
@@ -39,10 +38,6 @@ export type PopoverProps<D extends React.ElementType = 'div', P = {}> = Override
|
|
|
39
38
|
* @default 'click'
|
|
40
39
|
*/
|
|
41
40
|
trigger?: triggerType | triggerType[];
|
|
42
|
-
/**
|
|
43
|
-
* Portal组件的属性
|
|
44
|
-
*/
|
|
45
|
-
PortalProps?: PortalCoreProps;
|
|
46
41
|
/**
|
|
47
42
|
* 点击事件回调方法
|
|
48
43
|
* - event 触发事件
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.bui-progress {
|
|
2
|
-
--fill-color: var(--bui-progress-fill-color, --bui-color-primary);
|
|
2
|
+
--fill-color: var(--bui-progress-fill-color, var(--bui-color-primary));
|
|
3
3
|
--trail-color: var(--bui-progress-trail-color, rgba(156, 156, 165, 0.2));
|
|
4
4
|
--stroke-width: var(--bui-progress-stroke-width, 8px);
|
|
5
5
|
--width: var(--bui-progress-width, 100%);
|
package/dist/Radio/Radio.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.bui-radio {
|
|
2
|
-
--label-color: var(--bui-radio-label-color, --bui-color-fg-default);
|
|
3
|
-
--label-font-size: var(--bui-radio-label-font-size, --bui-text-size-1);
|
|
4
|
-
--icon-font-size: var(--bui-radio-icon-font-size, --bui-title-size-2);
|
|
2
|
+
--label-color: var(--bui-radio-label-color, var(--bui-color-fg-default));
|
|
3
|
+
--label-font-size: var(--bui-radio-label-font-size, var(--bui-text-size-1));
|
|
4
|
+
--icon-font-size: var(--bui-radio-icon-font-size, var(--bui-title-size-2));
|
|
5
5
|
--icon-padding: var(--bui-radio-icon-padding, 5px);
|
|
6
6
|
display: inline-flex;
|
|
7
7
|
align-items: center;
|
package/dist/Select/Select.css
CHANGED
package/dist/Slider/Slider.css
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
.bui-slider {
|
|
2
|
-
--line-color: var(--bui-slider-line-color, --bui-color-primary);
|
|
3
|
-
--line-bg-color: var(--bui-slider-line-bg-color, --bui-color-border-default);
|
|
2
|
+
--line-color: var(--bui-slider-line-color, var(--bui-color-primary));
|
|
3
|
+
--line-bg-color: var(--bui-slider-line-bg-color, var(--bui-color-border-default));
|
|
4
4
|
--width: var(--bui-slider-width, 100%);
|
|
5
5
|
--height: var(--bui-slider-height, 2px);
|
|
6
6
|
--padding: var(--bui-slider-padding, 19px 0);
|
|
7
7
|
--button-width: var(--bui-slider-button-width, 26px);
|
|
8
8
|
--button-height: var(--bui-slider-button-height, 26px);
|
|
9
9
|
--button-font-size: var(--bui-slider-button-font-size, var(--bui-title-size-3));
|
|
10
|
-
--button-border-radius: var(--bui
|
|
10
|
+
--button-border-radius: var(--bui-slider-button-border-radius, 50%);
|
|
11
11
|
--tooltip-width: var(--bui-slider-tooltip-width, 46px);
|
|
12
12
|
--tooltip-height: var(--bui-slider-tooltip-height, 24px);
|
|
13
13
|
--tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);
|
|
14
14
|
--tooltip-border-radius: var(--bui-slider-tooltip-border-radius, 24px);
|
|
15
|
-
--tooltip-font-size: var(--bui-tooltip-font-size, --bui-text-size-3);
|
|
16
|
-
--tooltip-color: var(--bui-tooltip-color, --bui-color-white);
|
|
17
|
-
--tooltip-bg-color: var(--bui-tooltip-bg-color, --line-color);
|
|
15
|
+
--tooltip-font-size: var(--bui-tooltip-font-size, var(--bui-text-size-3));
|
|
16
|
+
--tooltip-color: var(--bui-tooltip-color, var(--bui-color-white));
|
|
17
|
+
--tooltip-bg-color: var(--bui-tooltip-bg-color, var(--line-color));
|
|
18
18
|
position: relative;
|
|
19
19
|
width: var(--width);
|
|
20
20
|
height: var(--height);
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
top: 50%;
|
|
40
40
|
left: 0;
|
|
41
41
|
width: 100%;
|
|
42
|
-
height: var(
|
|
42
|
+
height: var(--height);
|
|
43
43
|
transform: translateY(-50%);
|
|
44
44
|
background-color: var(--line-bg-color);
|
|
45
45
|
}
|
package/dist/Tabs/Tabs.css
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
--active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
|
|
5
5
|
--line-height: var(--bui-tabs-line-height, 3PX);
|
|
6
6
|
--line-width: var(--bui-tabs-line-width, 18px);
|
|
7
|
+
--mask-width: var(--bui-tabs-mask-width, 12px);
|
|
7
8
|
--mask-height: var(--bui-tabs-mask-height, 100%);
|
|
8
9
|
--tab-height: var(--bui-tab-height, 100%);
|
|
9
10
|
--tab-padding: var(--bui-tab-padding, var(--bui-spacing-lg) var(--bui-spacing-lg) 10px);
|
|
@@ -40,8 +41,8 @@
|
|
|
40
41
|
top: 0;
|
|
41
42
|
bottom: 0;
|
|
42
43
|
z-index: 1;
|
|
43
|
-
width:
|
|
44
|
-
height: var(--
|
|
44
|
+
width: var(--mask-width);
|
|
45
|
+
height: var(--mask-height);
|
|
45
46
|
pointer-events: none;
|
|
46
47
|
}
|
|
47
48
|
.bui-tabs-mask-left {
|
package/dist/Tabs/Tabs.js
CHANGED
|
@@ -135,6 +135,7 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
|
|
|
135
135
|
(0, import_react.useEffect)(() => {
|
|
136
136
|
const handleResize = (0, import_utils.debounce)(() => {
|
|
137
137
|
animate({ transitionInUse: true });
|
|
138
|
+
updateMask();
|
|
138
139
|
}, 100);
|
|
139
140
|
window.addEventListener("resize", handleResize);
|
|
140
141
|
return () => {
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { OverrideProps } from '@bifrostui/types';
|
|
3
3
|
import { BaseLang } from '../locales/base';
|
|
4
|
-
export type ThemeProviderProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
|
|
5
|
-
props: P & ThemeProps;
|
|
6
|
-
defaultComponent: D;
|
|
7
|
-
}, D>;
|
|
8
4
|
export interface Breakpoints {
|
|
9
5
|
/**
|
|
10
6
|
* 超小屏幕 (小于 576px,实际为了处理临界值,断点值为 575.98px)
|
|
@@ -124,4 +120,8 @@ export type MountResponsiveTokenOptions = Pick<ThemeProps, 'responsive'> & {
|
|
|
124
120
|
export type UpdateTokensOptions = Pick<ThemeProps, 'isRoot' | 'containerId' | 'container'> & {
|
|
125
121
|
rootString: string;
|
|
126
122
|
};
|
|
123
|
+
export type ThemeProviderProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
|
|
124
|
+
props: P & ThemeProps;
|
|
125
|
+
defaultComponent: D;
|
|
126
|
+
}, D>;
|
|
127
127
|
export { BaseLang, ResponsiveTokenOptions, ThemeProps, BuiltInThemesTokenOptions, componentsTokenOptions, };
|
|
@@ -62,7 +62,7 @@ module.exports = __toCommonJS(FunctionalToast_exports);
|
|
|
62
62
|
var import_utils = require("@bifrostui/utils");
|
|
63
63
|
var import_react = __toESM(require("react"));
|
|
64
64
|
var import_Toast = __toESM(require("./Toast"));
|
|
65
|
-
|
|
65
|
+
let toastCloses = [];
|
|
66
66
|
const formatProps = (props) => {
|
|
67
67
|
if (typeof props === "string") {
|
|
68
68
|
return { message: props };
|
|
@@ -126,7 +126,12 @@ const functionalToast = (props) => {
|
|
|
126
126
|
destroyAll();
|
|
127
127
|
toastCloses.push(close);
|
|
128
128
|
if (duration !== 0 && typeof duration === "number") {
|
|
129
|
-
timer = setTimeout(
|
|
129
|
+
timer = setTimeout(() => {
|
|
130
|
+
close();
|
|
131
|
+
if (!allowMultiple) {
|
|
132
|
+
toastCloses = [];
|
|
133
|
+
}
|
|
134
|
+
}, duration);
|
|
130
135
|
}
|
|
131
136
|
return () => {
|
|
132
137
|
clearTimeout(timer);
|
|
@@ -158,11 +163,14 @@ functionalToast.clear = () => {
|
|
|
158
163
|
const useToast = () => {
|
|
159
164
|
const holderRef = import_react.default.useRef(null);
|
|
160
165
|
["warning", "loading", "success", "fail"].forEach((methodName) => {
|
|
161
|
-
functionalToast[methodName] = (options) =>
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
+
functionalToast[methodName] = (options) => {
|
|
167
|
+
var _a;
|
|
168
|
+
return functionalToast(__spreadProps(__spreadValues({
|
|
169
|
+
type: methodName
|
|
170
|
+
}, formatProps(options)), {
|
|
171
|
+
theme: (_a = holderRef.current) == null ? void 0 : _a.theme
|
|
172
|
+
}));
|
|
173
|
+
};
|
|
166
174
|
});
|
|
167
175
|
functionalToast.clear = () => {
|
|
168
176
|
setTimeout(() => {
|
package/dist/Toast/Toast.css
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
.bui-toast {
|
|
2
2
|
--min-width: var(--bui-toast-min-width, 86px);
|
|
3
3
|
--max-width: var(--bui-toast-max-width, 80%);
|
|
4
|
+
--text-align: var(--bui-toast-text-align, center);
|
|
4
5
|
--flex-direction: var(--bui-toast-flex-direction, column);
|
|
5
6
|
--padding: var(--bui-toast-padding, var(--bui-spacing-xl));
|
|
6
7
|
--position-top: var(--bui-toast-position-top, 15%);
|
|
7
8
|
--position-bottom: var(--bui-toast-position-bottom, 85%);
|
|
8
9
|
--background-color: var(--bui-toast-bg-color, rgba(0, 0, 0, 0.8));
|
|
9
|
-
--border-radius: var(--bui-toast-border-radius, --bui-shape-radius-default);
|
|
10
|
-
--icon-margin: var(--bui-toast-icon-margin
|
|
10
|
+
--border-radius: var(--bui-toast-border-radius, var(--bui-shape-radius-default));
|
|
11
|
+
--icon-margin: var(--bui-toast-icon-margin, 0 0 8px);
|
|
11
12
|
--icon-font-size: var(--bui-toast-icon-font-size, 30px);
|
|
12
13
|
position: fixed;
|
|
13
14
|
left: 50%;
|
|
@@ -22,7 +23,7 @@
|
|
|
22
23
|
word-break: break-all;
|
|
23
24
|
white-space: pre-wrap;
|
|
24
25
|
background-color: var(--background-color);
|
|
25
|
-
text-align:
|
|
26
|
+
text-align: var(--text-align);
|
|
26
27
|
font-family: var(--bui-font-family);
|
|
27
28
|
}
|
|
28
29
|
.bui-toast.bui-toast-allow-click {
|
|
@@ -48,6 +49,6 @@
|
|
|
48
49
|
align-items: center;
|
|
49
50
|
}
|
|
50
51
|
.bui-toast-icon .bui-svg-icon {
|
|
51
|
-
margin:
|
|
52
|
+
margin: var(--icon-margin);
|
|
52
53
|
font-size: var(--icon-font-size);
|
|
53
54
|
}
|
package/dist/Tooltip/Tooltip.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
5
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
@@ -20,7 +18,6 @@ var __spreadValues = (a, b) => {
|
|
|
20
18
|
}
|
|
21
19
|
return a;
|
|
22
20
|
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
21
|
var __objRest = (source, exclude) => {
|
|
25
22
|
var target = {};
|
|
26
23
|
for (var prop in source)
|
|
@@ -75,8 +72,7 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
|
|
|
75
72
|
placement = "top",
|
|
76
73
|
trigger = "click",
|
|
77
74
|
onOpenChange,
|
|
78
|
-
open
|
|
79
|
-
PortalProps
|
|
75
|
+
open
|
|
80
76
|
} = _a, others = __objRest(_a, [
|
|
81
77
|
"className",
|
|
82
78
|
"style",
|
|
@@ -86,8 +82,7 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
|
|
|
86
82
|
"placement",
|
|
87
83
|
"trigger",
|
|
88
84
|
"onOpenChange",
|
|
89
|
-
"open"
|
|
90
|
-
"PortalProps"
|
|
85
|
+
"open"
|
|
91
86
|
]);
|
|
92
87
|
const controlByUser = typeof open !== "undefined";
|
|
93
88
|
const positionArr = placement.split(/([A-Z])/);
|
|
@@ -132,15 +127,7 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
|
|
|
132
127
|
return;
|
|
133
128
|
hideTooltip(event);
|
|
134
129
|
};
|
|
135
|
-
(0,
|
|
136
|
-
if (controlByUser)
|
|
137
|
-
return;
|
|
138
|
-
document.addEventListener("click", clickEventHandler);
|
|
139
|
-
return () => {
|
|
140
|
-
document.removeEventListener("click", clickEventHandler);
|
|
141
|
-
};
|
|
142
|
-
}, []);
|
|
143
|
-
const onRootElementMouted = () => {
|
|
130
|
+
const onRootElementMouted = (0, import_utils.throttle)(() => {
|
|
144
131
|
const result = (0, import_utils.getStylesAndLocation)({
|
|
145
132
|
childrenRef,
|
|
146
133
|
arrowDirection,
|
|
@@ -157,7 +144,25 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
|
|
|
157
144
|
setArrowLocation(newArrowLocation);
|
|
158
145
|
}
|
|
159
146
|
setTooltyles(styles);
|
|
147
|
+
}, 100);
|
|
148
|
+
const bindEvent = () => {
|
|
149
|
+
if (!controlByUser) {
|
|
150
|
+
document.addEventListener("click", clickEventHandler);
|
|
151
|
+
}
|
|
152
|
+
window.addEventListener("resize", onRootElementMouted);
|
|
160
153
|
};
|
|
154
|
+
const unbindEvent = () => {
|
|
155
|
+
if (!controlByUser) {
|
|
156
|
+
document.removeEventListener("click", clickEventHandler);
|
|
157
|
+
}
|
|
158
|
+
window.removeEventListener("resize", onRootElementMouted);
|
|
159
|
+
};
|
|
160
|
+
(0, import_react.useEffect)(() => {
|
|
161
|
+
bindEvent();
|
|
162
|
+
return () => {
|
|
163
|
+
unbindEvent();
|
|
164
|
+
};
|
|
165
|
+
}, []);
|
|
161
166
|
let triggerEventOption;
|
|
162
167
|
if (!controlByUser) {
|
|
163
168
|
triggerEventOption = (0, import_utils.triggerEventTransform)({
|
|
@@ -170,29 +175,21 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
|
|
|
170
175
|
const childrenOptions = __spreadValues({
|
|
171
176
|
ref: childrenRef
|
|
172
177
|
}, triggerEventOption);
|
|
173
|
-
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ import_react.default.createElement(
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
}),
|
|
178
|
+
return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onRootElementMouted, ref }, /* @__PURE__ */ import_react.default.createElement(
|
|
179
|
+
"div",
|
|
180
|
+
__spreadValues({
|
|
181
|
+
className: (0, import_clsx.default)(prefixCls, className, `tooltip-${arrowDirection}`),
|
|
182
|
+
style: __spreadValues(__spreadValues({}, style), tooltyles),
|
|
183
|
+
"data-id": `tt_${ttId}`
|
|
184
|
+
}, others),
|
|
180
185
|
/* @__PURE__ */ import_react.default.createElement(
|
|
181
186
|
"div",
|
|
182
|
-
|
|
183
|
-
className: (0, import_clsx.default)(
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
"div",
|
|
189
|
-
{
|
|
190
|
-
className: (0, import_clsx.default)("bui-tooltip-arrow", `location-${arrowLocation}`)
|
|
191
|
-
}
|
|
192
|
-
),
|
|
193
|
-
/* @__PURE__ */ import_react.default.createElement("div", { className: "bui-tooltip-content" }, title)
|
|
194
|
-
)
|
|
195
|
-
) : null, import_react.default.isValidElement(children) ? import_react.default.cloneElement(children, childrenOptions) : children);
|
|
187
|
+
{
|
|
188
|
+
className: (0, import_clsx.default)("bui-tooltip-arrow", `location-${arrowLocation}`)
|
|
189
|
+
}
|
|
190
|
+
),
|
|
191
|
+
/* @__PURE__ */ import_react.default.createElement("div", { className: "bui-tooltip-content" }, title)
|
|
192
|
+
)) : null, import_react.default.isValidElement(children) ? import_react.default.cloneElement(children, childrenOptions) : children);
|
|
196
193
|
});
|
|
197
194
|
Tooltip.displayName = "BuiTooltip";
|
|
198
195
|
var Tooltip_default = Tooltip;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { OverrideProps } from '@bifrostui/types';
|
|
3
|
-
import { PortalCoreProps } from '../Portal/Portal.types';
|
|
4
3
|
type triggerType = 'click' | 'hover';
|
|
5
4
|
export type TooltipProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
|
|
6
5
|
props: P & {
|
|
@@ -30,10 +29,6 @@ export type TooltipProps<D extends React.ElementType = 'div', P = {}> = Override
|
|
|
30
29
|
* @default 'click'
|
|
31
30
|
*/
|
|
32
31
|
trigger?: triggerType | triggerType[];
|
|
33
|
-
/**
|
|
34
|
-
* Portal组件的属性
|
|
35
|
-
*/
|
|
36
|
-
PortalProps?: PortalCoreProps;
|
|
37
32
|
/**
|
|
38
33
|
* 点击事件回调方法
|
|
39
34
|
* - event 触发事件
|
|
@@ -138,8 +138,9 @@ const prompt = (options) => {
|
|
|
138
138
|
const useDialog = () => {
|
|
139
139
|
const holderRef = React.useRef(null);
|
|
140
140
|
const wrapAPI = (props) => {
|
|
141
|
-
|
|
142
|
-
const
|
|
141
|
+
var _a;
|
|
142
|
+
const options = __spreadValues({ theme: (_a = holderRef.current) == null ? void 0 : _a.theme }, formatProps(props));
|
|
143
|
+
const _b = options, { onConfirm, onCancel } = _b, rest = __objRest(_b, ["onConfirm", "onCancel"]);
|
|
143
144
|
return new Promise((resolve) => {
|
|
144
145
|
DialogGenerator(__spreadProps(__spreadValues({}, rest), {
|
|
145
146
|
onConfirm: (val) => __async(void 0, null, function* () {
|
|
@@ -156,16 +157,22 @@ const useDialog = () => {
|
|
|
156
157
|
}));
|
|
157
158
|
});
|
|
158
159
|
};
|
|
159
|
-
wrapAPI.confirm = (options) =>
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
|
|
160
|
+
wrapAPI.confirm = (options) => {
|
|
161
|
+
var _a;
|
|
162
|
+
return Dialog(__spreadProps(__spreadValues({
|
|
163
|
+
type: "confirm"
|
|
164
|
+
}, formatProps(options)), {
|
|
165
|
+
theme: (_a = holderRef.current) == null ? void 0 : _a.theme
|
|
166
|
+
}));
|
|
167
|
+
};
|
|
168
|
+
wrapAPI.prompt = (options) => {
|
|
169
|
+
var _a;
|
|
170
|
+
return Dialog(__spreadProps(__spreadValues({
|
|
171
|
+
type: "prompt"
|
|
172
|
+
}, formatProps(options)), {
|
|
173
|
+
theme: (_a = holderRef.current) == null ? void 0 : _a.theme
|
|
174
|
+
}));
|
|
175
|
+
};
|
|
169
176
|
return [wrapAPI, /* @__PURE__ */ React.createElement(Popup, { key: "dialog-holder", ref: holderRef })];
|
|
170
177
|
};
|
|
171
178
|
Dialog.confirm = confirm;
|
package/es/Input/Input.css
CHANGED
|
@@ -39,6 +39,10 @@
|
|
|
39
39
|
outline: none;
|
|
40
40
|
background-color: var(--background-color);
|
|
41
41
|
font-size: var(--bui-text-size-2);
|
|
42
|
+
width: auto;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
text-overflow: ellipsis;
|
|
45
|
+
white-space: nowrap;
|
|
42
46
|
}
|
|
43
47
|
.bui-input-input::placeholder {
|
|
44
48
|
color: var(--bui-color-fg-subtle);
|
|
@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
|
|
|
12
12
|
keepMounted?: boolean;
|
|
13
13
|
} & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
14
14
|
ref?: React.Ref<HTMLDivElement>;
|
|
15
|
-
}, "open" | keyof import("@bifrostui/types").ICommonProps | "
|
|
15
|
+
}, "open" | keyof import("@bifrostui/types").ICommonProps | "keepMounted" | "container" | "disablePortal" | "onClose" | "hideBackdrop" | "BackdropProps" | "disableScrollLock">, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
16
16
|
export default Modal;
|
package/es/Popover/Popover.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
2
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
3
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
4
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
@@ -16,7 +14,6 @@ var __spreadValues = (a, b) => {
|
|
|
16
14
|
}
|
|
17
15
|
return a;
|
|
18
16
|
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
17
|
var __objRest = (source, exclude) => {
|
|
21
18
|
var target = {};
|
|
22
19
|
for (var prop in source)
|
|
@@ -34,7 +31,8 @@ import React, { useState, useRef, useEffect } from "react";
|
|
|
34
31
|
import {
|
|
35
32
|
getStylesAndLocation,
|
|
36
33
|
triggerEventTransform,
|
|
37
|
-
useUniqueId
|
|
34
|
+
useUniqueId,
|
|
35
|
+
throttle
|
|
38
36
|
} from "@bifrostui/utils";
|
|
39
37
|
import Portal from "../Portal";
|
|
40
38
|
import "./Popover.css";
|
|
@@ -51,8 +49,7 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
51
49
|
trigger = "click",
|
|
52
50
|
onOpenChange,
|
|
53
51
|
open,
|
|
54
|
-
hideArrow
|
|
55
|
-
PortalProps
|
|
52
|
+
hideArrow
|
|
56
53
|
} = _a, others = __objRest(_a, [
|
|
57
54
|
"className",
|
|
58
55
|
"style",
|
|
@@ -64,8 +61,7 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
64
61
|
"trigger",
|
|
65
62
|
"onOpenChange",
|
|
66
63
|
"open",
|
|
67
|
-
"hideArrow"
|
|
68
|
-
"PortalProps"
|
|
64
|
+
"hideArrow"
|
|
69
65
|
]);
|
|
70
66
|
const controlByUser = typeof open !== "undefined";
|
|
71
67
|
const positionArr = placement.split(/([A-Z])/);
|
|
@@ -110,15 +106,7 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
110
106
|
return;
|
|
111
107
|
hidePopover(event);
|
|
112
108
|
};
|
|
113
|
-
|
|
114
|
-
if (controlByUser)
|
|
115
|
-
return;
|
|
116
|
-
document.addEventListener("click", clickEventHandler);
|
|
117
|
-
return () => {
|
|
118
|
-
document.removeEventListener("click", clickEventHandler);
|
|
119
|
-
};
|
|
120
|
-
}, []);
|
|
121
|
-
const onRootElementMouted = () => {
|
|
109
|
+
const onRootElementMouted = throttle(() => {
|
|
122
110
|
const result = getStylesAndLocation({
|
|
123
111
|
childrenRef,
|
|
124
112
|
arrowDirection,
|
|
@@ -135,7 +123,25 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
135
123
|
setArrowLocation(newArrowLocation);
|
|
136
124
|
}
|
|
137
125
|
setTooltyles(styles);
|
|
126
|
+
}, 100);
|
|
127
|
+
const bindEvent = () => {
|
|
128
|
+
if (!controlByUser) {
|
|
129
|
+
document.addEventListener("click", clickEventHandler);
|
|
130
|
+
}
|
|
131
|
+
window.addEventListener("resize", onRootElementMouted);
|
|
138
132
|
};
|
|
133
|
+
const unbindEvent = () => {
|
|
134
|
+
if (!controlByUser) {
|
|
135
|
+
document.removeEventListener("click", clickEventHandler);
|
|
136
|
+
}
|
|
137
|
+
window.removeEventListener("resize", onRootElementMouted);
|
|
138
|
+
};
|
|
139
|
+
useEffect(() => {
|
|
140
|
+
bindEvent();
|
|
141
|
+
return () => {
|
|
142
|
+
unbindEvent();
|
|
143
|
+
};
|
|
144
|
+
}, []);
|
|
139
145
|
if (!title && !content)
|
|
140
146
|
return null;
|
|
141
147
|
let triggerEventOption;
|
|
@@ -150,34 +156,26 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
150
156
|
const childrenOptions = __spreadValues({
|
|
151
157
|
ref: childrenRef
|
|
152
158
|
}, triggerEventOption);
|
|
153
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, open || openStatus ? /* @__PURE__ */ React.createElement(
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
159
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, open || openStatus ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted, ref }, /* @__PURE__ */ React.createElement(
|
|
160
|
+
"div",
|
|
161
|
+
__spreadValues({
|
|
162
|
+
className: clsx(prefixCls, className, `popover-${arrowDirection}`, {
|
|
163
|
+
"bui-popover-arrow-hide": hideArrow
|
|
164
|
+
}),
|
|
165
|
+
"data-id": `tt_${ttId}`,
|
|
166
|
+
style: __spreadValues(__spreadValues({}, style), tooltyles)
|
|
167
|
+
}, others),
|
|
168
|
+
!hideArrow ? /* @__PURE__ */ React.createElement(
|
|
161
169
|
"div",
|
|
162
|
-
|
|
163
|
-
className: clsx(
|
|
164
|
-
"bui-popover-arrow
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
{
|
|
172
|
-
className: clsx(
|
|
173
|
-
"bui-popover-arrow",
|
|
174
|
-
`location-${arrowLocation}`
|
|
175
|
-
)
|
|
176
|
-
}
|
|
177
|
-
) : null,
|
|
178
|
-
/* @__PURE__ */ React.createElement("div", { className: "bui-popover-content" }, title ? /* @__PURE__ */ React.createElement("div", { className: "bui-popover-title" }, title) : null, content ? /* @__PURE__ */ React.createElement("div", { className: "bui-popover-inner-content" }, content) : null)
|
|
179
|
-
)
|
|
180
|
-
) : null, React.isValidElement(children) ? React.cloneElement(children, childrenOptions) : children);
|
|
170
|
+
{
|
|
171
|
+
className: clsx(
|
|
172
|
+
"bui-popover-arrow",
|
|
173
|
+
`location-${arrowLocation}`
|
|
174
|
+
)
|
|
175
|
+
}
|
|
176
|
+
) : null,
|
|
177
|
+
/* @__PURE__ */ React.createElement("div", { className: "bui-popover-content" }, title ? /* @__PURE__ */ React.createElement("div", { className: "bui-popover-title" }, title) : null, content ? /* @__PURE__ */ React.createElement("div", { className: "bui-popover-inner-content" }, content) : null)
|
|
178
|
+
)) : null, React.isValidElement(children) ? React.cloneElement(children, childrenOptions) : children);
|
|
181
179
|
});
|
|
182
180
|
Popover.displayName = "BuiPopover";
|
|
183
181
|
var Popover_default = Popover;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { OverrideProps } from '@bifrostui/types';
|
|
3
|
-
import { PortalCoreProps } from '../Portal/Portal.types';
|
|
4
3
|
type triggerType = 'click' | 'hover';
|
|
5
4
|
export type PopoverProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
|
|
6
5
|
props: P & {
|
|
@@ -39,10 +38,6 @@ export type PopoverProps<D extends React.ElementType = 'div', P = {}> = Override
|
|
|
39
38
|
* @default 'click'
|
|
40
39
|
*/
|
|
41
40
|
trigger?: triggerType | triggerType[];
|
|
42
|
-
/**
|
|
43
|
-
* Portal组件的属性
|
|
44
|
-
*/
|
|
45
|
-
PortalProps?: PortalCoreProps;
|
|
46
41
|
/**
|
|
47
42
|
* 点击事件回调方法
|
|
48
43
|
* - event 触发事件
|
package/es/Progress/Progress.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.bui-progress {
|
|
2
|
-
--fill-color: var(--bui-progress-fill-color, --bui-color-primary);
|
|
2
|
+
--fill-color: var(--bui-progress-fill-color, var(--bui-color-primary));
|
|
3
3
|
--trail-color: var(--bui-progress-trail-color, rgba(156, 156, 165, 0.2));
|
|
4
4
|
--stroke-width: var(--bui-progress-stroke-width, 8px);
|
|
5
5
|
--width: var(--bui-progress-width, 100%);
|
package/es/Radio/Radio.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
.bui-radio {
|
|
2
|
-
--label-color: var(--bui-radio-label-color, --bui-color-fg-default);
|
|
3
|
-
--label-font-size: var(--bui-radio-label-font-size, --bui-text-size-1);
|
|
4
|
-
--icon-font-size: var(--bui-radio-icon-font-size, --bui-title-size-2);
|
|
2
|
+
--label-color: var(--bui-radio-label-color, var(--bui-color-fg-default));
|
|
3
|
+
--label-font-size: var(--bui-radio-label-font-size, var(--bui-text-size-1));
|
|
4
|
+
--icon-font-size: var(--bui-radio-icon-font-size, var(--bui-title-size-2));
|
|
5
5
|
--icon-padding: var(--bui-radio-icon-padding, 5px);
|
|
6
6
|
display: inline-flex;
|
|
7
7
|
align-items: center;
|
package/es/Select/Select.css
CHANGED
package/es/Slider/Slider.css
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
.bui-slider {
|
|
2
|
-
--line-color: var(--bui-slider-line-color, --bui-color-primary);
|
|
3
|
-
--line-bg-color: var(--bui-slider-line-bg-color, --bui-color-border-default);
|
|
2
|
+
--line-color: var(--bui-slider-line-color, var(--bui-color-primary));
|
|
3
|
+
--line-bg-color: var(--bui-slider-line-bg-color, var(--bui-color-border-default));
|
|
4
4
|
--width: var(--bui-slider-width, 100%);
|
|
5
5
|
--height: var(--bui-slider-height, 2px);
|
|
6
6
|
--padding: var(--bui-slider-padding, 19px 0);
|
|
7
7
|
--button-width: var(--bui-slider-button-width, 26px);
|
|
8
8
|
--button-height: var(--bui-slider-button-height, 26px);
|
|
9
9
|
--button-font-size: var(--bui-slider-button-font-size, var(--bui-title-size-3));
|
|
10
|
-
--button-border-radius: var(--bui
|
|
10
|
+
--button-border-radius: var(--bui-slider-button-border-radius, 50%);
|
|
11
11
|
--tooltip-width: var(--bui-slider-tooltip-width, 46px);
|
|
12
12
|
--tooltip-height: var(--bui-slider-tooltip-height, 24px);
|
|
13
13
|
--tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);
|
|
14
14
|
--tooltip-border-radius: var(--bui-slider-tooltip-border-radius, 24px);
|
|
15
|
-
--tooltip-font-size: var(--bui-tooltip-font-size, --bui-text-size-3);
|
|
16
|
-
--tooltip-color: var(--bui-tooltip-color, --bui-color-white);
|
|
17
|
-
--tooltip-bg-color: var(--bui-tooltip-bg-color, --line-color);
|
|
15
|
+
--tooltip-font-size: var(--bui-tooltip-font-size, var(--bui-text-size-3));
|
|
16
|
+
--tooltip-color: var(--bui-tooltip-color, var(--bui-color-white));
|
|
17
|
+
--tooltip-bg-color: var(--bui-tooltip-bg-color, var(--line-color));
|
|
18
18
|
position: relative;
|
|
19
19
|
width: var(--width);
|
|
20
20
|
height: var(--height);
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
top: 50%;
|
|
40
40
|
left: 0;
|
|
41
41
|
width: 100%;
|
|
42
|
-
height: var(
|
|
42
|
+
height: var(--height);
|
|
43
43
|
transform: translateY(-50%);
|
|
44
44
|
background-color: var(--line-bg-color);
|
|
45
45
|
}
|
package/es/Tabs/Tabs.css
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
--active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
|
|
5
5
|
--line-height: var(--bui-tabs-line-height, 3PX);
|
|
6
6
|
--line-width: var(--bui-tabs-line-width, 18px);
|
|
7
|
+
--mask-width: var(--bui-tabs-mask-width, 12px);
|
|
7
8
|
--mask-height: var(--bui-tabs-mask-height, 100%);
|
|
8
9
|
--tab-height: var(--bui-tab-height, 100%);
|
|
9
10
|
--tab-padding: var(--bui-tab-padding, var(--bui-spacing-lg) var(--bui-spacing-lg) 10px);
|
|
@@ -40,8 +41,8 @@
|
|
|
40
41
|
top: 0;
|
|
41
42
|
bottom: 0;
|
|
42
43
|
z-index: 1;
|
|
43
|
-
width:
|
|
44
|
-
height: var(--
|
|
44
|
+
width: var(--mask-width);
|
|
45
|
+
height: var(--mask-height);
|
|
45
46
|
pointer-events: none;
|
|
46
47
|
}
|
|
47
48
|
.bui-tabs-mask-left {
|
package/es/Tabs/Tabs.js
CHANGED
|
@@ -116,6 +116,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
116
116
|
useEffect(() => {
|
|
117
117
|
const handleResize = debounce(() => {
|
|
118
118
|
animate({ transitionInUse: true });
|
|
119
|
+
updateMask();
|
|
119
120
|
}, 100);
|
|
120
121
|
window.addEventListener("resize", handleResize);
|
|
121
122
|
return () => {
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { OverrideProps } from '@bifrostui/types';
|
|
3
3
|
import { BaseLang } from '../locales/base';
|
|
4
|
-
export type ThemeProviderProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
|
|
5
|
-
props: P & ThemeProps;
|
|
6
|
-
defaultComponent: D;
|
|
7
|
-
}, D>;
|
|
8
4
|
export interface Breakpoints {
|
|
9
5
|
/**
|
|
10
6
|
* 超小屏幕 (小于 576px,实际为了处理临界值,断点值为 575.98px)
|
|
@@ -124,4 +120,8 @@ export type MountResponsiveTokenOptions = Pick<ThemeProps, 'responsive'> & {
|
|
|
124
120
|
export type UpdateTokensOptions = Pick<ThemeProps, 'isRoot' | 'containerId' | 'container'> & {
|
|
125
121
|
rootString: string;
|
|
126
122
|
};
|
|
123
|
+
export type ThemeProviderProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
|
|
124
|
+
props: P & ThemeProps;
|
|
125
|
+
defaultComponent: D;
|
|
126
|
+
}, D>;
|
|
127
127
|
export { BaseLang, ResponsiveTokenOptions, ThemeProps, BuiltInThemesTokenOptions, componentsTokenOptions, };
|
|
@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
|
|
|
32
32
|
import { render, unmount, getRootElement } from "@bifrostui/utils";
|
|
33
33
|
import React, { useCallback, useEffect, useState } from "react";
|
|
34
34
|
import ToastView from "./Toast";
|
|
35
|
-
|
|
35
|
+
let toastCloses = [];
|
|
36
36
|
const formatProps = (props) => {
|
|
37
37
|
if (typeof props === "string") {
|
|
38
38
|
return { message: props };
|
|
@@ -96,7 +96,12 @@ const functionalToast = (props) => {
|
|
|
96
96
|
destroyAll();
|
|
97
97
|
toastCloses.push(close);
|
|
98
98
|
if (duration !== 0 && typeof duration === "number") {
|
|
99
|
-
timer = setTimeout(
|
|
99
|
+
timer = setTimeout(() => {
|
|
100
|
+
close();
|
|
101
|
+
if (!allowMultiple) {
|
|
102
|
+
toastCloses = [];
|
|
103
|
+
}
|
|
104
|
+
}, duration);
|
|
100
105
|
}
|
|
101
106
|
return () => {
|
|
102
107
|
clearTimeout(timer);
|
|
@@ -128,11 +133,14 @@ functionalToast.clear = () => {
|
|
|
128
133
|
const useToast = () => {
|
|
129
134
|
const holderRef = React.useRef(null);
|
|
130
135
|
["warning", "loading", "success", "fail"].forEach((methodName) => {
|
|
131
|
-
functionalToast[methodName] = (options) =>
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
+
functionalToast[methodName] = (options) => {
|
|
137
|
+
var _a;
|
|
138
|
+
return functionalToast(__spreadProps(__spreadValues({
|
|
139
|
+
type: methodName
|
|
140
|
+
}, formatProps(options)), {
|
|
141
|
+
theme: (_a = holderRef.current) == null ? void 0 : _a.theme
|
|
142
|
+
}));
|
|
143
|
+
};
|
|
136
144
|
});
|
|
137
145
|
functionalToast.clear = () => {
|
|
138
146
|
setTimeout(() => {
|
package/es/Toast/Toast.css
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
.bui-toast {
|
|
2
2
|
--min-width: var(--bui-toast-min-width, 86px);
|
|
3
3
|
--max-width: var(--bui-toast-max-width, 80%);
|
|
4
|
+
--text-align: var(--bui-toast-text-align, center);
|
|
4
5
|
--flex-direction: var(--bui-toast-flex-direction, column);
|
|
5
6
|
--padding: var(--bui-toast-padding, var(--bui-spacing-xl));
|
|
6
7
|
--position-top: var(--bui-toast-position-top, 15%);
|
|
7
8
|
--position-bottom: var(--bui-toast-position-bottom, 85%);
|
|
8
9
|
--background-color: var(--bui-toast-bg-color, rgba(0, 0, 0, 0.8));
|
|
9
|
-
--border-radius: var(--bui-toast-border-radius, --bui-shape-radius-default);
|
|
10
|
-
--icon-margin: var(--bui-toast-icon-margin
|
|
10
|
+
--border-radius: var(--bui-toast-border-radius, var(--bui-shape-radius-default));
|
|
11
|
+
--icon-margin: var(--bui-toast-icon-margin, 0 0 8px);
|
|
11
12
|
--icon-font-size: var(--bui-toast-icon-font-size, 30px);
|
|
12
13
|
position: fixed;
|
|
13
14
|
left: 50%;
|
|
@@ -22,7 +23,7 @@
|
|
|
22
23
|
word-break: break-all;
|
|
23
24
|
white-space: pre-wrap;
|
|
24
25
|
background-color: var(--background-color);
|
|
25
|
-
text-align:
|
|
26
|
+
text-align: var(--text-align);
|
|
26
27
|
font-family: var(--bui-font-family);
|
|
27
28
|
}
|
|
28
29
|
.bui-toast.bui-toast-allow-click {
|
|
@@ -48,6 +49,6 @@
|
|
|
48
49
|
align-items: center;
|
|
49
50
|
}
|
|
50
51
|
.bui-toast-icon .bui-svg-icon {
|
|
51
|
-
margin:
|
|
52
|
+
margin: var(--icon-margin);
|
|
52
53
|
font-size: var(--icon-font-size);
|
|
53
54
|
}
|
package/es/Tooltip/Tooltip.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
2
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
3
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
4
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
@@ -16,7 +14,6 @@ var __spreadValues = (a, b) => {
|
|
|
16
14
|
}
|
|
17
15
|
return a;
|
|
18
16
|
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
17
|
var __objRest = (source, exclude) => {
|
|
21
18
|
var target = {};
|
|
22
19
|
for (var prop in source)
|
|
@@ -34,7 +31,8 @@ import React, { useState, useRef, useEffect } from "react";
|
|
|
34
31
|
import {
|
|
35
32
|
getStylesAndLocation,
|
|
36
33
|
triggerEventTransform,
|
|
37
|
-
useUniqueId
|
|
34
|
+
useUniqueId,
|
|
35
|
+
throttle
|
|
38
36
|
} from "@bifrostui/utils";
|
|
39
37
|
import Portal from "../Portal";
|
|
40
38
|
import "./Tooltip.css";
|
|
@@ -49,8 +47,7 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
49
47
|
placement = "top",
|
|
50
48
|
trigger = "click",
|
|
51
49
|
onOpenChange,
|
|
52
|
-
open
|
|
53
|
-
PortalProps
|
|
50
|
+
open
|
|
54
51
|
} = _a, others = __objRest(_a, [
|
|
55
52
|
"className",
|
|
56
53
|
"style",
|
|
@@ -60,8 +57,7 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
60
57
|
"placement",
|
|
61
58
|
"trigger",
|
|
62
59
|
"onOpenChange",
|
|
63
|
-
"open"
|
|
64
|
-
"PortalProps"
|
|
60
|
+
"open"
|
|
65
61
|
]);
|
|
66
62
|
const controlByUser = typeof open !== "undefined";
|
|
67
63
|
const positionArr = placement.split(/([A-Z])/);
|
|
@@ -106,15 +102,7 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
106
102
|
return;
|
|
107
103
|
hideTooltip(event);
|
|
108
104
|
};
|
|
109
|
-
|
|
110
|
-
if (controlByUser)
|
|
111
|
-
return;
|
|
112
|
-
document.addEventListener("click", clickEventHandler);
|
|
113
|
-
return () => {
|
|
114
|
-
document.removeEventListener("click", clickEventHandler);
|
|
115
|
-
};
|
|
116
|
-
}, []);
|
|
117
|
-
const onRootElementMouted = () => {
|
|
105
|
+
const onRootElementMouted = throttle(() => {
|
|
118
106
|
const result = getStylesAndLocation({
|
|
119
107
|
childrenRef,
|
|
120
108
|
arrowDirection,
|
|
@@ -131,7 +119,25 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
131
119
|
setArrowLocation(newArrowLocation);
|
|
132
120
|
}
|
|
133
121
|
setTooltyles(styles);
|
|
122
|
+
}, 100);
|
|
123
|
+
const bindEvent = () => {
|
|
124
|
+
if (!controlByUser) {
|
|
125
|
+
document.addEventListener("click", clickEventHandler);
|
|
126
|
+
}
|
|
127
|
+
window.addEventListener("resize", onRootElementMouted);
|
|
134
128
|
};
|
|
129
|
+
const unbindEvent = () => {
|
|
130
|
+
if (!controlByUser) {
|
|
131
|
+
document.removeEventListener("click", clickEventHandler);
|
|
132
|
+
}
|
|
133
|
+
window.removeEventListener("resize", onRootElementMouted);
|
|
134
|
+
};
|
|
135
|
+
useEffect(() => {
|
|
136
|
+
bindEvent();
|
|
137
|
+
return () => {
|
|
138
|
+
unbindEvent();
|
|
139
|
+
};
|
|
140
|
+
}, []);
|
|
135
141
|
let triggerEventOption;
|
|
136
142
|
if (!controlByUser) {
|
|
137
143
|
triggerEventOption = triggerEventTransform({
|
|
@@ -144,29 +150,21 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
|
|
|
144
150
|
const childrenOptions = __spreadValues({
|
|
145
151
|
ref: childrenRef
|
|
146
152
|
}, triggerEventOption);
|
|
147
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ React.createElement(
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
}),
|
|
153
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted, ref }, /* @__PURE__ */ React.createElement(
|
|
154
|
+
"div",
|
|
155
|
+
__spreadValues({
|
|
156
|
+
className: clsx(prefixCls, className, `tooltip-${arrowDirection}`),
|
|
157
|
+
style: __spreadValues(__spreadValues({}, style), tooltyles),
|
|
158
|
+
"data-id": `tt_${ttId}`
|
|
159
|
+
}, others),
|
|
154
160
|
/* @__PURE__ */ React.createElement(
|
|
155
161
|
"div",
|
|
156
|
-
|
|
157
|
-
className: clsx(
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
"div",
|
|
163
|
-
{
|
|
164
|
-
className: clsx("bui-tooltip-arrow", `location-${arrowLocation}`)
|
|
165
|
-
}
|
|
166
|
-
),
|
|
167
|
-
/* @__PURE__ */ React.createElement("div", { className: "bui-tooltip-content" }, title)
|
|
168
|
-
)
|
|
169
|
-
) : null, React.isValidElement(children) ? React.cloneElement(children, childrenOptions) : children);
|
|
162
|
+
{
|
|
163
|
+
className: clsx("bui-tooltip-arrow", `location-${arrowLocation}`)
|
|
164
|
+
}
|
|
165
|
+
),
|
|
166
|
+
/* @__PURE__ */ React.createElement("div", { className: "bui-tooltip-content" }, title)
|
|
167
|
+
)) : null, React.isValidElement(children) ? React.cloneElement(children, childrenOptions) : children);
|
|
170
168
|
});
|
|
171
169
|
Tooltip.displayName = "BuiTooltip";
|
|
172
170
|
var Tooltip_default = Tooltip;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { OverrideProps } from '@bifrostui/types';
|
|
3
|
-
import { PortalCoreProps } from '../Portal/Portal.types';
|
|
4
3
|
type triggerType = 'click' | 'hover';
|
|
5
4
|
export type TooltipProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
|
|
6
5
|
props: P & {
|
|
@@ -30,10 +29,6 @@ export type TooltipProps<D extends React.ElementType = 'div', P = {}> = Override
|
|
|
30
29
|
* @default 'click'
|
|
31
30
|
*/
|
|
32
31
|
trigger?: triggerType | triggerType[];
|
|
33
|
-
/**
|
|
34
|
-
* Portal组件的属性
|
|
35
|
-
*/
|
|
36
|
-
PortalProps?: PortalCoreProps;
|
|
37
32
|
/**
|
|
38
33
|
* 点击事件回调方法
|
|
39
34
|
* - event 触发事件
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bifrostui/react",
|
|
3
|
-
"version": "1.4.0
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "React components for building mobile application",
|
|
5
5
|
"homepage": "http://bui.taopiaopiao.com",
|
|
6
6
|
"license": "MIT",
|
|
@@ -33,10 +33,10 @@
|
|
|
33
33
|
"clsx": "^1.2.1",
|
|
34
34
|
"dayjs": "^1.11.7",
|
|
35
35
|
"swiper": "^8.1.5",
|
|
36
|
-
"@bifrostui/icons": "1.4.0
|
|
37
|
-
"@bifrostui/
|
|
38
|
-
"@bifrostui/
|
|
39
|
-
"@bifrostui/utils": "1.4.0
|
|
36
|
+
"@bifrostui/icons": "1.4.0",
|
|
37
|
+
"@bifrostui/styles": "1.4.0",
|
|
38
|
+
"@bifrostui/types": "1.4.0",
|
|
39
|
+
"@bifrostui/utils": "1.4.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"@tarojs/components": "^3.0.0",
|